diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index e192b0b..c53e16d 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -3,6 +3,7 @@ import UserToolbar from "../views/room/UserToolbar";
 import usePartySocket from "partysocket/react";
 import { useState } from "react";
 import { FromServerSocketMessage } from "../../isomophic-src/isomorphic";
+import UserMessage from "../views/room/UserMessage";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -26,13 +27,11 @@ function Index() {
   });
 
   return (
-    <div className="relative w-full h-full p-2 font-awexbmp">
+    <div className="p-2 font-awexbmp">
       <h3 className="">Welcome Home!</h3>
-      <ul>
+      <ul> 
         {images.map((image, index) => (
-          <li key={index}>
-            <img src={image} alt={`Uploaded drawing ${index + 1}`} />
-          </li>
+          <UserMessage name="frogboi" hat="/BucketHatP.png" frog="Frog1AP.png" image={image} />
         ))}
       </ul>
       <UserToolbar />
diff --git a/client-src/views/room/UserMessage.tsx b/client-src/views/room/UserMessage.tsx
new file mode 100644
index 0000000..fe1ce6a
--- /dev/null
+++ b/client-src/views/room/UserMessage.tsx
@@ -0,0 +1,21 @@
+type UserMessageProps = {
+  name: string;
+  frog: string;
+  hat: string;
+  image: string;
+}
+
+export default function UserMessage({ name, frog, hat, image }: UserMessageProps) {
+  return (
+    <li className="mx-auto my-4 border-2 border-blue-800 flex gap-4 w-fit h-full bg-blue-500/30 backdrop-blur-lg rounded p-4">
+      <div className="flex flex-col gap-2 items-center text-2xl font-bold">
+        <span className="relative size-56 border-2 rounded p-2 border-green-800 pixelate backdrop-blur-lg">
+          <img src={hat} className="absolute top-0 left-17 w-16" />
+          <img src={frog} className="" />
+        </span>
+        <p>{name}</p>
+      </div>
+      <img src={image} className="bg-white" />
+    </li>
+  );
+}