diff --git a/client-src/routes/index.tsx b/client-src/routes/index.tsx
index 01c9b33..14a5e50 100644
--- a/client-src/routes/index.tsx
+++ b/client-src/routes/index.tsx
@@ -50,6 +50,11 @@ function Index() {
           setFrog(FROG_MAP[data.frog]!);
           break;
         }
+        case "ribbit_sent": {
+          const audio = new Audio("/ribbit.mp3");
+          audio.play().catch((err) => console.error("Failed to play ribbit:", err));
+          break;
+        }
       }
     }
 
diff --git a/client-src/views/room/UserToolbar.tsx b/client-src/views/room/UserToolbar.tsx
index ab2e65f..635b909 100644
--- a/client-src/views/room/UserToolbar.tsx
+++ b/client-src/views/room/UserToolbar.tsx
@@ -22,12 +22,10 @@ export default function UserToolbar({
   setHat,
 }: UserToolbarProps) {
   const [name, setName] = useState("frogboi");
-  const ribbitRef = useRef<HTMLAudioElement>(null);
   const customizeDialogRef = useRef<HTMLDialogElement>(null);
 
   return (
     <>
-      <audio ref={ribbitRef} src="/ribbit.mp3"></audio>
       <CustomizeFrogDialog
         hat={hat}
         frog={frog}
@@ -74,7 +72,6 @@ export default function UserToolbar({
           </button>
           <button
             onClick={() => {
-              ribbitRef.current?.play();
               socketSend({ type: "ribbit", name });
             }}
             className="w-full bg-green-400 hover:bg-green-600 hover:text-green-300 border-2 border-green-800 rounded p-4"