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;
+      }
     }
   }
 }