diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 14a5e50..83c6c2c 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -25,6 +25,7 @@ function Index() {
   );
   const [hat, setHat] = useState("/TopHatP.png");
   const [frog, setFrog] = useState("/Frog1AP.png");
+  const [name, setName] = useState("frogboi");
 
   useEffect(() => {
     function onMessage(event: MessageEvent) {
@@ -48,6 +49,7 @@ function Index() {
         case "get_frog": {
           setHat(HAT_MAP[data.hat]!);
           setFrog(FROG_MAP[data.frog]!);
+          setName(data.name);
           break;
         }
         case "ribbit_sent": {
@@ -92,7 +94,7 @@ function Index() {
         ))}
       </ul>
       <div className="sticky bottom-0">
-        <UserToolbar hat={hat} frog={frog} setFrog={setFrog} setHat={setHat} />
+        <UserToolbar hat={hat} frog={frog} setFrog={setFrog} setHat={setHat} name={name} setName={setName} />
       </div>
     </div>
   );
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index 635b909..082b1b5 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -1,4 +1,4 @@
-import { RefObject, useMemo, useRef, useState } from "react";
+import { RefObject, useMemo, useRef, useState, useEffect } from "react";
 import { Controls } from "../draw/components/controls";
 import { Editor } from "../draw/components/editor";
 import { HATS, REVERSE_HAT_MAP } from "./state/hats";
@@ -13,6 +13,8 @@ interface UserToolbarProps {
   frog: string;
   setFrog: (value: string) => void;
   setHat: (value: string) => void;
+  name: string;
+  setName: (value: string) => void;
 }
 
 export default function UserToolbar({
@@ -20,10 +22,25 @@ export default function UserToolbar({
   frog,
   setFrog,
   setHat,
+  name,
+  setName,
 }: UserToolbarProps) {
-  const [name, setName] = useState("frogboi");
   const customizeDialogRef = useRef<HTMLDialogElement>(null);
 
+  // Debounce effect - sends name after 500ms of no changes
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      socketSend({ type: "change-name", name });
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [name]);
+
+  // Handler for blur event
+  const handleNameBlur = () => {
+    socketSend({ type: "change-name", name });
+  };
+
   return (
     <>
       <CustomizeFrogDialog
@@ -44,6 +61,7 @@ export default function UserToolbar({
             type="text"
             value={name}
             onChange={(e) => setName(e.currentTarget.value)}
+            onBlur={handleNameBlur}
             className="text-lg text-center w-fit border-2 border-green-800 bg-white font-bold rounded pl-2"
           />
           <button
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index 9de6348..8256917 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -58,12 +58,18 @@ const RequestFrogSchema = z.object({
     type: z.literal("request-frog"),
 });
 
+const ChangeNameSchema = z.object({
+    type: z.literal("change-name"),
+    name: z.string(),
+});
+
 // The type of messages sent from the client to the server via WebSocket
 export const FromClientSocketMessageSchema = z.union([
     UploadSVGSchema,
     RibbitSchema,
     ChangeFrogSchema,
     RequestFrogSchema,
+    ChangeNameSchema,
 ]);
 
 export type FromClientSocketMessage = z.infer<typeof FromClientSocketMessageSchema>;
@@ -95,6 +101,7 @@ const GetFrogSchema = z.object({
     userId: z.string(),
     frog: FrogSchema,
     hat: HatSchema,
+    name: z.string(),
 });
 
 // The type of messages sent from the server to the client via WebSocket
diff --git a/server-src/server.ts b/server-src/server.ts
index bafdca2..47728f8 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -49,10 +49,12 @@ export class Chat extends Server {
       case "request-frog": {
         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";
         connection.send(getMessageForClient({
           type: "get_frog",
           hat,
           frog,
+          name,
           userId: connection.id,
         }));
         break;
@@ -68,6 +70,10 @@ export class Chat extends Server {
         }));
         break;
       }
+      case "change-name": {
+        this.ctx.storage.put("name", data.name);
+        break;
+      }
     }
   }
 }