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,