diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 02e8e89..5e1ad38 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -1,28 +1,35 @@
 import { createFileRoute } from "@tanstack/react-router";
 import UserToolbar from "../views/room/UserToolbar";
-import usePartySocket from "partysocket/react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { Frog, FromServerSocketMessage, Hat, SVGUploaded } from "../../isomophic-src/isomorphic";
 import UserMessage from "../views/room/UserMessage";
-import { HAT_MAP, HATS, REVERSE_HAT_MAP } from "../views/room/state/hats";
-import { FROG_MAP, FROGS, REVERSE_FROG_MAP } from "../views/room/state/frogs";
+import { HAT_MAP } from "../views/room/state/hats";
+import { FROG_MAP } from "../views/room/state/frogs";
 import { socketSend } from "../views/draw/services/socket";
+import PartySocket from "partysocket";
 
 export const Route = createFileRoute("/")({
   component: Index,
 });
 
+const socket = new PartySocket({
+  host: window.location.host,
+  room: "room-1",
+  party: "chat",
+})
+
+socket.addEventListener("message", (event) => {
+  console.log("Socket Message:", event.data);
+});
+
 function Index() {
   const [messages, setMessages] = useState<SVGUploaded[]>([]);
   const [userMap, setUserMap] = useState({} as Record<string, { frog: Frog, hat: Hat }>);
   const [hat, setHat] = useState("/TopHatP.png");
   const [frog, setFrog] = useState("/Frog1AP.png");
 
-  usePartySocket({
-    host: window.location.host,
-    room: "room-1",
-    party: "chat",
-    onMessage(event) {
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
       const data: FromServerSocketMessage = JSON.parse(event.data);
       switch (data.type) {
         case "svg_uploaded": {
@@ -41,23 +48,38 @@ function Index() {
           break;
         }
         case "get_frog": {
+          debugger;
+          if (data.userId !== socket.id) return;
           setHat(HAT_MAP[data.hat]!);
           setFrog(FROG_MAP[data.frog]!);
+          console.log({data})
           break;
         }
       }
-    },
-  });
+    }
 
-  useEffect(() => {
-    socketSend({ type: "request-frog" });
+    socket.addEventListener("message", onMessage);
+    return () => {
+      socket.removeEventListener("message", onMessage);
+    };
   }, []);
 
+  useEffect(() => {
+    function onOpen() {
+      socketSend({ type: "request-frog" });
+    }
+    socket.addEventListener("open", onOpen);
+
+    return () => {
+      socket.removeEventListener("open", onOpen);
+    };
+  }, [socket]);
+
   return (
     <div className="p-2 font-awexbmp h-screen flex flex-col">
       <ul className="flex-1 overflow-auto mb-0">
-        {messages.map((message) => (
-          <UserMessage name="frogboi" hat={HAT_MAP[userMap[message.userId]!.hat]!} frog={FROG_MAP[userMap[message.userId]!.frog]!} image={message.svgPath} />
+        {messages.map((message, i) => (
+          <UserMessage key={i} name="frogboi" hat={HAT_MAP[userMap[message.userId]!.hat]!} frog={FROG_MAP[userMap[message.userId]!.frog]!} image={message.svgPath} />
         ))}
       </ul>
       <div className="sticky bottom-0">
diff --git a/server-src/server.ts b/server-src/server.ts
index bafdca2..6c21644 100644
--- a/server-src/server.ts
+++ b/server-src/server.ts
@@ -49,7 +49,7 @@ 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";
-        connection.send(getMessageForClient({
+        this.broadcast(getMessageForClient({
           type: "get_frog",
           hat,
           frog,