diff --git a/client/public/game_over.mp3 b/client/public/game_over.mp3
new file mode 100644
index 0000000..6f0ec70
Binary files /dev/null and b/client/public/game_over.mp3 differ
diff --git a/client/public/icons/spkr-off.png b/client/public/icons/spkr-off.png
new file mode 100644
index 0000000..cef1f8b
Binary files /dev/null and b/client/public/icons/spkr-off.png differ
diff --git a/client/public/icons/spkr-on.png b/client/public/icons/spkr-on.png
new file mode 100644
index 0000000..08b52ca
Binary files /dev/null and b/client/public/icons/spkr-on.png differ
diff --git a/client/public/totalwin1.mp3 b/client/public/totalwin1.mp3
new file mode 100644
index 0000000..5558cfa
Binary files /dev/null and b/client/public/totalwin1.mp3 differ
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2bfc08a..2be11db 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -20,7 +20,7 @@ import LeaderBoard from './components/LeaderBoard';
 
 import './styles/codezilla.css';
 import BackgroundMusicProvider from './components/BackgroundMusicProvider';
-
+import SoundToggle from './components/SoundToggle';
 
 const LogoutButton: React.FC = () => {
   const navigate = useNavigate();
@@ -43,11 +43,12 @@ const AppContent: React.FC = () => {
   const isGameActive =
     location.pathname.startsWith('/map') ||
     location.pathname.startsWith('/question');
+  
+
 
   return (
     <div className="app-wrapper">
       {/* Only load persistent music during gameplay */}
-
       {isGameActive && (
         <BackgroundMusicProvider src="/black.sabbath.mp3" volume={0.03} />
       )}
@@ -60,22 +61,25 @@ const AppContent: React.FC = () => {
 
       <LogoutButton />
 
-        {/* Routes */}
-        <Routes>
-          <Route path="/" element={<IntroPage />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/map" element={<GameMap />} />
-          <Route path="/gameover" element={<GameOver />} />
-          <Route path="/signup" element={<Signup />} />
-          <Route path="/victory" element={<Victory />} />
-          <Route path="/leaderboard" element={<LeaderBoard />} />
-          <Route path="/question/:id" element={<Questions />} />
-        </Routes>
-      </div>
-
+      {/* ✅ GLOBAL SoundToggle button */}
+      <SoundToggle />
+
+      {/* Routes */}
+      <Routes>
+        <Route path="/" element={<IntroPage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/map" element={<GameMap />} />
+        <Route path="/gameover" element={<GameOver />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/victory" element={<Victory />} />
+        <Route path="/leaderboard" element={<LeaderBoard />} />
+        <Route path="/question/:id" element={<Questions />} />
+      </Routes>
+    </div>
   );
 };
 
+
 const App: React.FC = () => {
   return (
     <Router>
@@ -85,4 +89,3 @@ const App: React.FC = () => {
 };
 
 export default App;
-// commmits
diff --git a/client/src/components/BackgroundMusicProvider.tsx b/client/src/components/BackgroundMusicProvider.tsx
index 5b03d6e..4e00805 100644
--- a/client/src/components/BackgroundMusicProvider.tsx
+++ b/client/src/components/BackgroundMusicProvider.tsx
@@ -1,5 +1,6 @@
-// src/components/BackgroundMusic.tsx
 import { useEffect, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useSound } from './SoundContext';
 
 interface Props {
   src: string;
@@ -10,22 +11,44 @@ let globalAudio: HTMLAudioElement | null = null;
 
 const BackgroundMusic: React.FC<Props> = ({ src, volume = 0.03 }) => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { pathname } = useLocation();
+  const { isSoundOn } = useSound();
 
   useEffect(() => {
+    // Always stop music on login screen
+    if (pathname === '/login') {
+      if (globalAudio) {
+        globalAudio.pause();
+        globalAudio.currentTime = 0;
+        globalAudio = null;
+      }
+      return;
+    }
+
     if (!globalAudio) {
       globalAudio = new Audio(src);
       globalAudio.loop = true;
       globalAudio.volume = volume;
-      globalAudio.play().catch((err) => {
-        console.warn('🎵 Autoplay blocked or failed:', err);
-      });
+
+      const handleUserInteraction = () => {
+        if (isSoundOn) {
+          globalAudio?.play().catch((err) =>
+            console.warn('🎵 Autoplay blocked:', err)
+          );
+        }
+        document.removeEventListener('click', handleUserInteraction);
+      };
+
+      document.addEventListener('click', handleUserInteraction);
     }
+
     audioRef.current = globalAudio;
 
-    return () => {
-      // DO NOT stop or recreate the audio on unmount
-    };
-  }, [src, volume]);
+    // Sync mute state with toggle
+    if (globalAudio) {
+      globalAudio.muted = !isSoundOn;
+    }
+  }, [pathname, src, volume, isSoundOn]);
 
   return null;
 };
diff --git a/client/src/components/SoundContext.tsx b/client/src/components/SoundContext.tsx
new file mode 100644
index 0000000..d09e681
--- /dev/null
+++ b/client/src/components/SoundContext.tsx
@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState } from 'react';
+
+interface SoundContextType {
+  isSoundOn: boolean;
+  toggleSound: () => void;
+  stopMusic: () => void;
+}
+
+const SoundContext = createContext<SoundContextType | undefined>(undefined);
+
+export const SoundProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [isSoundOn, setIsSoundOn] = useState(true);
+
+  const toggleSound = () => {
+    setIsSoundOn((prev) => !prev);
+  };
+
+  const stopMusic = () => {
+    if ((globalThis as any).globalAudio) {
+      const audio = (globalThis as any).globalAudio as HTMLAudioElement;
+      audio.pause();
+      audio.currentTime = 0;
+      (globalThis as any).globalAudio = null;
+    }
+    setIsSoundOn(false);
+  };
+
+  return (
+    <SoundContext.Provider value={{ isSoundOn, toggleSound, stopMusic }}>
+      {children}
+    </SoundContext.Provider>
+  );
+};
+
+export const useSound = () => {
+  const context = useContext(SoundContext);
+  if (!context) throw new Error('useSound must be used within SoundProvider');
+  return context;
+};
diff --git a/client/src/components/SoundToggle.tsx b/client/src/components/SoundToggle.tsx
new file mode 100644
index 0000000..9b081a6
--- /dev/null
+++ b/client/src/components/SoundToggle.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { useSound } from '../components/SoundContext';
+import { useLocation } from 'react-router-dom';
+
+
+const SoundToggle: React.FC = () => {
+  const { isSoundOn, toggleSound } = useSound();
+  const location = useLocation();
+const isGamePage = location.pathname.startsWith('/map') || location.pathname.startsWith('/question');
+
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '1rem',
+        left: '1rem',
+        zIndex: 9999,
+      }}
+    >
+      <button
+  onClick={toggleSound}
+  className={`p-2 bg-transparent rounded-full transition ${isGamePage ? 'hover:opacity-80' : 'opacity-40 cursor-not-allowed'}`}
+  aria-label={isSoundOn ? 'Mute sound' : 'Unmute sound'}
+  disabled={!isGamePage}
+>
+  <img
+    src={isSoundOn && isGamePage ? '/icons/spkr-on.png' : '/icons/spkr-off.png'}
+    alt="Sound Toggle"
+    style={{
+      width: '24px',
+      height: '24px',
+      objectFit: 'contain',
+    }}
+  />"
+
+</button>
+
+    </div>
+  );
+};
+
+export default SoundToggle;
diff --git a/client/src/components/screens/GameMap.tsx b/client/src/components/screens/GameMap.tsx
index 21b9fd0..52ed556 100644
--- a/client/src/components/screens/GameMap.tsx
+++ b/client/src/components/screens/GameMap.tsx
@@ -10,6 +10,8 @@ import "../../styles/codezilla.css";
 import drDanImg from '../../../avatars/drdan2.png';
 import flameImg from '../../assets/flame.png';
 
+
+
 const selectedAvatar = localStorage.getItem('selectedAvatar');
 const username = localStorage.getItem('username') || 'Player';
 
@@ -21,8 +23,7 @@ const GameMap: React.FC = () => {
   const [selectedMinionId, setSelectedMinionId] = useState<string | null>(null);
 
   useEffect(() => {
-    preloadSounds([
-      '/audio/Dan_correct/Dan-correct-1.wav']);
+    preloadSounds(['/audio/Dan_correct/Dan-correct-1.wav']);
   }, []);
 
   const handleDanHover = () => {
@@ -112,7 +113,6 @@ const GameMap: React.FC = () => {
     navigate(`/question/${questionId}`);
   };
 
-  console.log("selectedAvatar:", selectedAvatar);
   return (
     <div className="game-map">
       <BackgroundMusic src="/black.sabbath.mp3" volume={0.03} />
diff --git a/client/src/components/screens/GameOver.tsx b/client/src/components/screens/GameOver.tsx
index 34acf28..b5bfd03 100644
--- a/client/src/components/screens/GameOver.tsx
+++ b/client/src/components/screens/GameOver.tsx
@@ -1,64 +1,68 @@
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import "../../styles/codezilla.css";
 
-
 const GameOverPage = ({
-  avatarUrl     = '/avatars/drdan2.png',
-  codezillaUrl  = '/minions/codezilla2.png',
+  avatarUrl = '/avatars/drdan2.png',
+  codezillaUrl = '/minions/codezilla2.png',
 }) => {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const music = new Audio('/game_over.mp3');
+    const roar = new Audio('/godzilla.roar.mp3');
+
+    music.volume = 0.5;
+    roar.volume = 0.8;
+
+    // Start music immediately
+    music.play().catch((err) =>
+      console.warn('🎵 Game Over music blocked:', err)
+    );
+
+    // Play roar after 2.5 seconds
+    const roarDelay = setTimeout(() => {
+      roar.play().catch((err) =>
+        console.warn('🦖 Godzilla roar blocked:', err)
+      );
+    }, 2500);
+
+    // Cleanup
+    return () => {
+      clearTimeout(roarDelay);
+      music.pause();
+      music.currentTime = 0;
+      roar.pause();
+      roar.currentTime = 0;
+    };
+  }, []);
+
   const handlePlayAgain = () => {
-    // back to the question map
     navigate('/map');
   };
 
   const handleMainMenu = () => {
-    // back to your overall main menu/home
     navigate('/');
   };
 
   return (
-    <div
-      className="game-over-page"
-      // style={{ backgroundImage: `url(${backgroundUrl})` }}
-    >
+    <div className="game-over-page">
       <div className="game-over-container">
         <h1 className="game-over-title">Game Over!</h1>
 
         <div className="game-over-images">
-          <img
-            className="player-avatar"
-            src={avatarUrl}
-            alt="Player Avatar"
-          />
-          <img
-            className="codezilla-avatar"
-            src={codezillaUrl}
-            alt="Codezilla"
-          />
+          <img className="player-avatar" src={avatarUrl} alt="Player Avatar" />
+          <img className="codezilla-avatar" src={codezillaUrl} alt="Codezilla" />
         </div>
 
-        <h2 className="game-over-subtitle">
-          You were defeated by Codezilla!
-        </h2>
-
-        <p className="game-over-cta">
-          Try again to become a code master
-        </p>
+        <h2 className="game-over-subtitle">You were defeated by Codezilla!</h2>
+        <p className="game-over-cta">Try again to become a code master</p>
 
         <div className="game-over-actions">
-          <button
-            className="btn play-again-btn"
-            onClick={handlePlayAgain}
-          >
+          <button className="btn play-again-btn" onClick={handlePlayAgain}>
             Play Again!
           </button>
-
-          <button
-            className="btn main-menu-btn"
-            onClick={handleMainMenu}
-          >
+          <button className="btn main-menu-btn" onClick={handleMainMenu}>
             Main Menu
           </button>
         </div>
diff --git a/client/src/components/screens/Victory.tsx b/client/src/components/screens/Victory.tsx
index 880c18d..2f6b2c2 100644
--- a/client/src/components/screens/Victory.tsx
+++ b/client/src/components/screens/Victory.tsx
@@ -1,5 +1,6 @@
 // src/pages/VictoryPage.tsx
 import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
 import "../../styles/codezilla.css";
 
 export default function VictoryPage({
@@ -8,21 +9,25 @@ export default function VictoryPage({
 }) {
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const victoryMusic = new Audio('/totalwin1.mp3');
+    victoryMusic.volume = 0.5;
+    victoryMusic.play().catch((err) => {
+      console.warn('🏆 Victory sound blocked:', err);
+    });
+  }, []);
+
   const handlePlayAgain = () => {
-    navigate('/map');      // ← back to your question map
+    navigate('/map');
   };
 
   const handleMainMenu = () => {
-    navigate('/');         // ← back to your main menu/home
+    navigate('/');
   };
 
   return (
-    <div
-      className="victory-page"
-      // style={{ backgroundImage: `url(${backgroundUrl})` }}
-    >
+    <div className="victory-page">
       <div className="victory-container">
-        {/* Confetti overlay */}
         <div
           className="victory-confetti"
           style={{ backgroundImage: `url(${confettiUrl})` }}
@@ -30,43 +35,26 @@ export default function VictoryPage({
 
         <h1 className="victory-title">Congratulations!</h1>
 
-        <img
-          className="victory-avatar"
-          src={avatarUrl}
-          alt="Player Avatar"
-        />
+        <img className="victory-avatar" src={avatarUrl} alt="Player Avatar" />
 
-        <h2 className="victory-subtitle">
-          You defeated Codezilla!
-        </h2>
+        <h2 className="victory-subtitle">You defeated Codezilla!</h2>
 
-        <p className="victory-cta">
-          You are a coding master!
-        </p>
+        <p className="victory-cta">You are a coding master!</p>
 
         <div className="victory-actions">
-          <button
-            className="btn play-again-btn"
-            onClick={handlePlayAgain}
-          >
+          <button className="btn play-again-btn" onClick={handlePlayAgain}>
             Play Again!
           </button>
-          <button
-            className="btn main-menu-btn"
-            onClick={handleMainMenu}
-          >
+          <button className="btn main-menu-btn" onClick={handleMainMenu}>
             Main Menu
           </button>
           <button
             className="btn main-menu-btn"
-            onClick={() => {
-              navigate('/leaderboard');
-            }}
+            onClick={() => navigate('/leaderboard')}
           >
             Leaderboards
           </button>
         </div>
-
       </div>
     </div>
   );
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 377e314..93aaefc 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -3,12 +3,15 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 import './index.css';
 import { ApolloProvider } from '@apollo/client';
-import client from './utils/apolloClient'; // or wherever your client file is
+import client from './utils/apolloClient';
+import { SoundProvider } from './components/SoundContext'; // 👈 import SoundProvider
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <ApolloProvider client={client}>
-      <App />
+      <SoundProvider> {/* 👈 wrap your app in the new sound context */}
+        <App />
+      </SoundProvider>
     </ApolloProvider>
-  </React.StrictMode>,
+  </React.StrictMode>
 );