diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index 29dc3b6..ab465ab 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -15,7 +15,7 @@ export default function UserToolbar() {
 
   return (
     <>
-      <CustomizeFrogDialog 
+      <CustomizeFrogDialog
         hat={hat}
         frog={frog}
         dialogRef={customizeDialogRef}
@@ -28,17 +28,17 @@ export default function UserToolbar() {
             <img src={hat} className="absolute top-0 left-17 w-16" />
             <img src={frog} className="" />
           </span>
-          <input 
-            name="name" 
-            type="text" 
+          <input
+            name="name"
+            type="text"
             value={name}
             onChange={(e) => setName(e.currentTarget.value)}
-            className="text-lg text-center w-fit border-2 border-green-800 bg-white font-bold rounded pl-2" 
+            className="text-lg text-center w-fit border-2 border-green-800 bg-white font-bold rounded pl-2"
           />
           <button onClick={() => customizeDialogRef.current?.showModal()} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
-            <img src={EditPencil} className="group-hover:text-green-300"/> 
+            <img src={EditPencil} className="group-hover:text-green-300" />
           </button>
-        </div> 
+        </div>
 
         <div className="w-full max-w-1/6 h-auto border rounded bg-green-500/30">
           <Controls />
@@ -51,8 +51,9 @@ export default function UserToolbar() {
           <button className="w-full bg-green-400 hover:bg-green-600 hover:text-green-300 border-2 border-green-800 rounded p-4"
             onClick={() => {
               socketSend({ svg: app.copySvg(), type: "upload-svg" });
+              app.resetDoc();
             }
-          }>Send</button>          
+            }>Send</button>
           <button className="w-full bg-green-400 hover:bg-green-600 hover:text-green-300 border-2 border-green-800 rounded p-4">Ribbit</button>
         </div>
       </menu>
@@ -80,29 +81,29 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
   return (
     <dialog ref={dialogRef} className="bg-white absolute p-4">
       <div className="flex justify-between items-center">
-        <button onClick={() => hatIndex === 0 ? setHatIndex(HATS.length - 1) : setHatIndex(hatIndex-1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
-          <img src={EditPencil} className="group-hover:text-green-300"/> 
+        <button onClick={() => hatIndex === 0 ? setHatIndex(HATS.length - 1) : setHatIndex(hatIndex - 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+          <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
         <img src={currentHat} className="" />
         <button onClick={() => hatIndex === HATS.length ? setHatIndex(0) : setHatIndex(hatIndex + 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
-          <img src={EditPencil} className="group-hover:text-green-300"/> 
+          <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
       </div>
 
       <div className="flex justify-between items-center">
-        <button onClick={() => frogIndex === 0 ? setFrogIndex(HATS.length - 1) : setFrogIndex(frogIndex-1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
-          <img src={EditPencil} className="group-hover:text-green-300"/> 
+        <button onClick={() => frogIndex === 0 ? setFrogIndex(HATS.length - 1) : setFrogIndex(frogIndex - 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
+          <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
         <img src={currentFrog} className="" />
         <button onClick={() => frogIndex === HATS.length ? setFrogIndex(0) : setFrogIndex(frogIndex + 1)} className="border group bg-green-400 hover:bg-green-600 p-2 rounded-full">
-          <img src={EditPencil} className="group-hover:text-green-300"/> 
+          <img src={EditPencil} className="group-hover:text-green-300" />
         </button>
 
       </div>
 
-      <button onClick={() => { 
-        onFrogComplete(currentFrog); 
-        onHatComplete(currentHat); 
+      <button onClick={() => {
+        onFrogComplete(currentFrog);
+        onHatComplete(currentHat);
         dialogRef.current?.close();
       }}>
         Confirm
diff --git a/client-src/views/room/state/frogs.ts b/client-src/views/room/state/frogs.ts
index 6d4f755..3a8dcf3 100644
--- a/client-src/views/room/state/frogs.ts
+++ b/client-src/views/room/state/frogs.ts
@@ -1,17 +1,14 @@
-export const FROGS = [
-  "/Frog1AP.png",
-  "/Frog1BP.png",
-  "/Frog1CP.png",
-  "/Frog2AP.png",
-  "/Frog2BP.png",
-  "/Frog2CP.png",
-  "/Frog3AP.png",
-  "/Frog3BP.png",
-  "/Frog3CP.png",
-  "/Frog4AP.png",
-  "/Frog4BP.png",
-  "/Frog4CP.png",
-  "/Frog5AP.png",
-  "/Frog5BP.png",
-  "/Frog5CP.png",
-];
+import {FrogSchema} from "../../../../isomophic-src/isomorphic"
+
+export const FROG_MAP: Record<string, string | null> = FrogSchema.options.reduce((acc, frog) => {
+  const val = frog.value;
+  if (!val) {
+    acc[val] = val;
+  } else {
+    // This is hacky :)
+    acc[val] = `/${val}.png`;
+  }
+  return acc;
+}, {} as Record<string, string | null>);
+
+export const FROGS = Object.values(FROG_MAP);
\ No newline at end of file
diff --git a/client-src/views/room/state/hats.ts b/client-src/views/room/state/hats.ts
index 2084c88..fd0db4e 100644
--- a/client-src/views/room/state/hats.ts
+++ b/client-src/views/room/state/hats.ts
@@ -1,15 +1,14 @@
-export const HATS = [
-  "",
-  '/CrownGoldP.png',
-  '/CrownSilverP.png',
-  '/CrownLordOfFliesP.png',
-  '/FliesHatP.png',
-  '/PaperHatP.png',
-  '/PrincessHatP.png',
-  '/PropellorHatP.png',
-  '/TopHatP.png',
-  '/UmbrellaHatP.png',
-  '/WizardHatP.png',
-  '/BucketHatP.png',
-  '/FroggyHatP.png',
-];
+import {HatSchema} from "../../../../isomophic-src/isomorphic"
+
+export const HAT_MAP: Record<string, string | null> = HatSchema.options.reduce((acc, hat) => {
+  const val = hat.value;
+  if (!val) {
+    acc[val] = val;
+  } else {
+    // This is hacky :)
+    acc[val] = `/${val}.png`;
+  }
+  return acc;
+}, {} as Record<string, string | null>);
+
+export const HATS = Object.values(HAT_MAP);
\ No newline at end of file
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index 7680160..61ce975 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -1,25 +1,79 @@
-import {z } from "zod";
+import { z } from "zod";
 
 const UploadSVGSchema = z.object({
     type: z.literal("upload-svg"),
     svg: z.string(),
 });
 
+export const FrogSchema = z.union([
+    z.literal("Frog1AP"),
+    z.literal("Frog1BP"),
+    z.literal("Frog1CP"),
+    z.literal("Frog2AP"),
+    z.literal("Frog2BP"),
+    z.literal("Frog2CP"),
+    z.literal("Frog3AP"),
+    z.literal("Frog3BP"),
+    z.literal("Frog3CP"),
+    z.literal("Frog4AP"),
+    z.literal("Frog4BP"),
+    z.literal("Frog4CP"),
+    z.literal("Frog5AP"),
+    z.literal("Frog5BP"),
+    z.literal("Frog5CP"),
+])
+
+export type Frog = z.infer<typeof FrogSchema>;
+
+export const HatSchema = z.union([
+    z.literal(""),
+    z.literal("CrownGoldP"),
+    z.literal("CrownSilverP"),
+    z.literal("CrownLordOfFliesP"),
+    z.literal("FliesHatP"),
+    z.literal("PaperHatP"),
+    z.literal("PrincessHatP"),
+    z.literal("PropellorHatP"),
+    z.literal("TopHatP"),
+    z.literal("UmbrellaHatP"),
+    z.literal("WizardHatP"),
+    z.literal("BucketHatP"),
+    z.literal("FroggyHatP"),
+]);
+
+export type Hat = z.infer<typeof HatSchema>;
+
+const ChangeFrogSchema = z.object({
+    type: z.literal("change-frog"),
+    hat: HatSchema,
+    frog: FrogSchema,
+});
+
 // The type of messages sent from the client to the server via WebSocket
 export const FromClientSocketMessageSchema = z.union([
     UploadSVGSchema,
+    ChangeFrogSchema,
 ]);
 
 export type FromClientSocketMessage = z.infer<typeof FromClientSocketMessageSchema>;
 
 const SVGUploadedSchema = z.object({
     type: z.literal("svg_uploaded"),
+    hat: HatSchema,
+    frog: FrogSchema,
     svgPath: z.string(),
 });
 
+const FrogChangedSchema = z.object({
+    type: z.literal("frog_changed"),
+    hat: HatSchema,
+    frog: FrogSchema,
+});
+
 // The type of messages sent from the server to the client via WebSocket
 export const FromServerSocketMessageSchema = z.union([
     SVGUploadedSchema,
+    FrogChangedSchema,
 ]);
 
 export type FromServerSocketMessage = z.infer<typeof FromServerSocketMessageSchema>;
\ No newline at end of file
diff --git a/server-src/server.ts b/server-src/server.ts
index 13fb968..c4624f2 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -4,7 +4,7 @@ import { Server } from "partyserver";
 
 import type { Connection, WSMessage } from "partyserver";
 
-import { FromClientSocketMessage, FromServerSocketMessage } from "../isomophic-src/isomorphic";
+import { FromClientSocketMessage, FromServerSocketMessage, Frog, Hat } from "../isomophic-src/isomorphic";
 
 function getMessageForClient(data: FromServerSocketMessage): string {
   return JSON.stringify(data);
@@ -27,12 +27,27 @@ export class Chat extends Server {
           },
         });
 
+        const hat = await this.ctx.storage.get<Hat>("hat") || "";
+        const frog = await this.ctx.storage.get<Frog>("frog") || "Frog1AP";
+
         this.broadcast(getMessageForClient({
           type: "svg_uploaded",
+          hat,
+          frog,
           svgPath: `https://drawings.tadpole.social/${svgFileName}`,
         }));
         break;
       }
+      case "change-frog": {
+        this.ctx.storage.put("hat", data.hat);
+        this.ctx.storage.put("frog", data.frog);
+        this.broadcast(getMessageForClient({
+          type: "frog_changed",
+          hat: data.hat,
+          frog: data.frog,
+        }));
+        break;
+      }
     }
   }
 }
-- 
2.51.2


From 7118be9d1bdea67550d5acfdde04dec87776ae01 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Fri, 14 Nov 2025 15:06:46 -0800
Subject: [PATCH 2/3] feat: persist frog customize

---
 client-src/routes/index.tsx           | 12 +++++++-----
 client-src/views/room/UserToolbar.tsx | 11 +++++------
 client-src/views/room/state/frogs.ts  |  5 +++++
 client-src/views/room/state/hats.ts   |  5 +++++
 isomophic-src/isomorphic.ts           |  2 ++
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index c53e16d..6be9ec9 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -2,15 +2,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
 import usePartySocket from "partysocket/react";
 import { useState } from "react";
-import { FromServerSocketMessage } from "../../isomophic-src/isomorphic";
+import { FromServerSocketMessage, SVGUploaded } from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
+import { HAT_MAP } from "../views/room/state/hats";
+import { FROG_MAP } from "../views/room/state/frogs";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
 function Index() {
-  const [images, setImages] = useState<string[]>([]);
+  const [messages, setMessages] = useState<SVGUploaded[]>([]);
 
   usePartySocket({
     host: window.location.host,
@@ -20,7 +22,7 @@ function Index() {
       const data: FromServerSocketMessage = JSON.parse(event.data);
       switch (data.type) {
         case "svg_uploaded":
-          setImages((prev) => [...prev, data.svgPath]);
+          setMessages((prev) => [...prev, data]);
           break;
       }
     },
@@ -30,8 +32,8 @@ function Index() {
     <div className="p-2 font-awexbmp">
       <h3 className="">Welcome Home!</h3>
       <ul> 
-        {images.map((image, index) => (
-          <UserMessage name="frogboi" hat="/BucketHatP.png" frog="Frog1AP.png" image={image} />
+        {messages.map((message) => (
+          <UserMessage name="frogboi" hat={HAT_MAP[message.hat]!} frog={FROG_MAP[message.frog]!} image={message.svgPath} />
         ))}
       </ul>
       <UserToolbar />
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index ab465ab..b6ecf9d 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -2,8 +2,8 @@ import { RefObject, useEffect, useMemo, useRef, useState } from "react";
 import { Controls } from "../draw/components/controls";
 import { Editor } from "../draw/components/editor";
 import EditPencil from "/StreamlineFreehand-EditPencil.svg" with { type: "svg" };
-import { HATS } from "./state/hats";
-import { FROGS } from "./state/frogs";
+import { HATS, REVERSE_HAT_MAP } from "./state/hats";
+import { FROGS, REVERSE_FROG_MAP } from "./state/frogs";
 import { socketSend } from "../draw/services/socket";
 import { app } from "../draw/state";
 
@@ -73,10 +73,8 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
   const [hatIndex, setHatIndex] = useState(HATS.findIndex((v) => v === hat));
   const [frogIndex, setFrogIndex] = useState(FROGS.findIndex((v) => v === frog));
 
-  useEffect(() => console.log({ hatIndex, HATS, hat }), [hat]);
-
-  const currentHat = useMemo(() => HATS[hatIndex], [hatIndex]);
-  const currentFrog = useMemo(() => FROGS[frogIndex], [frogIndex]);
+  const currentHat = useMemo(() => HATS[hatIndex]!, [hatIndex]);
+  const currentFrog = useMemo(() => FROGS[frogIndex]!, [frogIndex]);
 
   return (
     <dialog ref={dialogRef} className="bg-white absolute p-4">
@@ -104,6 +102,7 @@ function CustomizeFrogDialog({ dialogRef, frog, hat, onFrogComplete, onHatComple
       <button onClick={() => {
         onFrogComplete(currentFrog);
         onHatComplete(currentHat);
+        socketSend({ type: "change-frog", frog: REVERSE_FROG_MAP[currentFrog] as never, hat: REVERSE_HAT_MAP[currentHat] as never });
         dialogRef.current?.close();
       }}>
         Confirm
diff --git a/client-src/views/room/state/frogs.ts b/client-src/views/room/state/frogs.ts
index 3a8dcf3..9594fff 100644
--- a/client-src/views/room/state/frogs.ts
+++ b/client-src/views/room/state/frogs.ts
@@ -11,4 +11,9 @@ export const FROG_MAP: Record<string, string | null> = FrogSchema.options.reduce
   return acc;
 }, {} as Record<string, string | null>);
 
+export const REVERSE_FROG_MAP: Record<string, string | null> = Object.entries(FROG_MAP).reduce((acc, [key, value]) => {
+  acc[value ?? ""] = key;
+  return acc;
+}, {} as Record<string, string | null>);
+
 export const FROGS = Object.values(FROG_MAP);
\ No newline at end of file
diff --git a/client-src/views/room/state/hats.ts b/client-src/views/room/state/hats.ts
index fd0db4e..1bd7f34 100644
--- a/client-src/views/room/state/hats.ts
+++ b/client-src/views/room/state/hats.ts
@@ -11,4 +11,9 @@ export const HAT_MAP: Record<string, string | null> = HatSchema.options.reduce((
   return acc;
 }, {} as Record<string, string | null>);
 
+export const REVERSE_HAT_MAP: Record<string, string | null> = Object.entries(HAT_MAP).reduce((acc, [key, value]) => {
+  acc[value ?? ""] = key;
+  return acc;
+}, {} as Record<string, string | null>);
+
 export const HATS = Object.values(HAT_MAP);
\ No newline at end of file
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index 61ce975..2f214a5 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -64,6 +64,8 @@ const SVGUploadedSchema = z.object({
     svgPath: z.string(),
 });
 
+export type SVGUploaded = z.infer<typeof SVGUploadedSchema>;
+
 const FrogChangedSchema = z.object({
     type: z.literal("frog_changed"),
     hat: HatSchema,
-- 
2.51.2


From 89120e2ac2351050400d3d0873ad7cf78e99a929 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Fri, 14 Nov 2025 15:12:47 -0800
Subject: [PATCH 3/3] fix: handle frog change edgecase

---
 client-src/routes/index.tsx | 21 +++++++++++++++++----
 isomophic-src/isomorphic.ts |  2 ++
 server-src/server.ts        |  4 +++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 6be9ec9..f990c5f 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
 import usePartySocket from "partysocket/react";
 import { useState } from "react";
-import { FromServerSocketMessage, SVGUploaded } from "../../isomophic-src/isomorphic";
+import { Frog, FromServerSocketMessage, Hat, SVGUploaded } from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
 import { HAT_MAP } from "../views/room/state/hats";
 import { FROG_MAP } from "../views/room/state/frogs";
@@ -13,6 +13,7 @@ export const Route = createFileRoute("/")({
 
 function Index() {
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
+  const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
 
   usePartySocket({
     host: window.location.host,
@@ -21,9 +22,21 @@ function Index() {
     onMessage(event) {
       const data: FromServerSocketMessage = JSON.parse(event.data);
       switch (data.type) {
-        case "svg_uploaded":
+        case "svg_uploaded": {
           setMessages((prev) => [...prev, data]);
+          setUserMap((prev) => ({
+            ...prev,
+            [data.userId]: { frog: data.frog, hat: data.hat },
+          }));
           break;
+        }
+        case "frog_changed": {
+          setUserMap((prev) => ({
+            ...prev,
+            [data.userId]: { frog: data.frog, hat: data.hat },
+          }));
+          break;
+        }
       }
     },
   });
@@ -31,9 +44,9 @@ function Index() {
   return (
     <div className="p-2 font-awexbmp">
       <h3 className="">Welcome Home!</h3>
-      <ul> 
+      <ul>
         {messages.map((message) => (
-          <UserMessage name="frogboi" hat={HAT_MAP[message.hat]!} frog={FROG_MAP[message.frog]!} image={message.svgPath} />
+          <UserMessage name="frogboi" hat={HAT_MAP[userMap[message.userId]!.hat]!} frog={FROG_MAP[userMap[message.userId]!.frog]!} image={message.svgPath} />
         ))}
       </ul>
       <UserToolbar />
diff --git a/isomophic-src/isomorphic.ts b/isomophic-src/isomorphic.ts
index 2f214a5..d88604e 100644
--- a/isomophic-src/isomorphic.ts
+++ b/isomophic-src/isomorphic.ts
@@ -61,6 +61,7 @@ const SVGUploadedSchema = z.object({
     type: z.literal("svg_uploaded"),
     hat: HatSchema,
     frog: FrogSchema,
+    userId: z.string(),
     svgPath: z.string(),
 });
 
@@ -68,6 +69,7 @@ export type SVGUploaded = z.infer<typeof SVGUploadedSchema>;
 
 const FrogChangedSchema = z.object({
     type: z.literal("frog_changed"),
+    userId: z.string(),
     hat: HatSchema,
     frog: FrogSchema,
 });
diff --git a/server-src/server.ts b/server-src/server.ts
index c4624f2..ed376d2 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -12,7 +12,7 @@ function getMessageForClient(data: FromServerSocketMessage): string {
 
 // Multiple party servers
 export class Chat extends Server {
-  async onMessage(_connection: Connection, message: WSMessage): Promise<void> {
+  async onMessage(connection: Connection, message: WSMessage): Promise<void> {
     const data = JSON.parse(message.toString()) as FromClientSocketMessage;
 
     switch (data.type) {
@@ -33,6 +33,7 @@ export class Chat extends Server {
         this.broadcast(getMessageForClient({
           type: "svg_uploaded",
           hat,
+          userId: connection.id,
           frog,
           svgPath: `https://drawings.tadpole.social/${svgFileName}`,
         }));
@@ -44,6 +45,7 @@ export class Chat extends Server {
         this.broadcast(getMessageForClient({
           type: "frog_changed",
           hat: data.hat,
+          userId: connection.id,
           frog: data.frog,
         }));
         break;