diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 83c6c2c..8033490 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -21,7 +21,7 @@ export const Route = createFileRoute("/")({
 function Index() {
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState(
-    {} as Record<string, { frog: Frog; hat: Hat }>,
+    {} as Record<string, { frog: Frog; hat: Hat; name: string }>,
   );
   const [hat, setHat] = useState("/TopHatP.png");
   const [frog, setFrog] = useState("/Frog1AP.png");
@@ -35,14 +35,14 @@ function Index() {
           setMessages((prev) => [...prev, data]);
           setUserMap((prev) => ({
             ...prev,
-            [data.userId]: { frog: data.frog, hat: data.hat },
+            [data.userId]: { frog: data.frog, hat: data.hat, name: data.name },
           }));
           break;
         }
         case "frog_changed": {
           setUserMap((prev) => ({
             ...prev,
-            [data.userId]: { frog: data.frog, hat: data.hat },
+            [data.userId]: { frog: data.frog, hat: data.hat, name: data.name },
           }));
           break;
         }
@@ -86,7 +86,7 @@ function Index() {
         {messages.map((message, i) => (
           <UserMessage
             key={i}
-            name="frogboi"
+            name={userMap[message.userId]?.name || "frogboi"}
             hat={HAT_MAP[userMap[message.userId]!.hat]!}
             frog={FROG_MAP[userMap[message.userId]!.frog]!}
             image={message.svgPath}
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index 8256917..1f0e82b 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -85,6 +85,7 @@ const SVGUploadedSchema = z.object({
     frog: FrogSchema,
     userId: z.string(),
     svgPath: z.string(),
+    name: z.string(),
 });
 
 export type SVGUploaded = z.infer<typeof SVGUploadedSchema>;
@@ -94,6 +95,7 @@ const FrogChangedSchema = z.object({
     userId: z.string(),
     hat: HatSchema,
     frog: FrogSchema,
+    name: z.string(),
 });
 
 const GetFrogSchema = z.object({
diff --git a/server-src/server.ts b/server-src/server.ts
index 47728f8..a8323a7 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -29,12 +29,14 @@ export class Chat extends Server {
 
         const hat = await this.ctx.storage.get<Hat>("hat") || "";
         const frog = await this.ctx.storage.get<Frog>("frog") || "Frog1AP";
+        const name = await this.ctx.storage.get<string>("name") || "frogboi";
 
         this.broadcast(getMessageForClient({
           type: "svg_uploaded",
           hat,
           userId: connection.id,
           frog,
+          name,
           svgPath: `https://drawings.tadpole.social/${svgFileName}`,
         }));
         break;
@@ -62,11 +64,13 @@ export class Chat extends Server {
       case "change-frog": {
         this.ctx.storage.put("hat", data.hat);
         this.ctx.storage.put("frog", data.frog);
+        const name = await this.ctx.storage.get<string>("name") || "frogboi";
         this.broadcast(getMessageForClient({
           type: "frog_changed",
           hat: data.hat,
           userId: connection.id,
           frog: data.frog,
+          name,
         }));
         break;
       }