diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html
index a6bedc08..925c9aa7 100644
--- a/WebGames-master/WebGames-master/index.html
+++ b/WebGames-master/WebGames-master/index.html
@@ -190,6 +190,7 @@
     </style>
 </head>
 <body>
+    <iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
     <h1 id="pageTitle">Web Games</h1>
     <button class="toggle-mode" id="toggleMode">Switch to Light Mode</button>
     <div class="button-container">
@@ -871,15 +872,15 @@
             });
         }
 
-        // Function to animate a single game element
-        function animateGame(game) {
+        // Function to animate all game elements with a staggered delay
+        function animateGames(games) {
             anime({
-                targets: game,
+                targets: games,
                 opacity: [0, 1], // Fade in
-                translateY: [-50, 0], // Slide down
-                rotate: [-45, 0], // Small spin counterclockwise (start at -45 degrees and rotate to 0)
-                duration: 3000, // Animation duration (3 seconds)
+                translateY: [50, 0], // Slide up from below
+                duration: 1000, // Animation duration (1 second)
                 easing: 'easeOutExpo', // Smooth easing
+                delay: anime.stagger(50), // 50ms delay between each game
             });
         }
 
@@ -887,11 +888,9 @@
         const observer = new IntersectionObserver((entries, observer) => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    // Animate the game when it comes into view
-                    animateGame(entry.target);
-
-                    // Stop observing the element after animating it
-                    observer.unobserve(entry.target);
+                    // Animate the game with a staggered delay
+                    animateGames(entry.target);
+                    observer.unobserve(entry.target); // Stop observing after animation
                 }
             });
         });
@@ -900,17 +899,15 @@
         const games = document.querySelectorAll('.game');
         games.forEach(game => {
             game.style.opacity = '0'; // Hide games initially
-            game.style.transform = 'translateY(-50px) rotate(-45deg)'; // Move them above and rotate counterclockwise
-            observer.observe(game); // Start observing the game
+            game.style.transform = 'translateY(50px)'; // Move them below their final position
         });
 
-        // Check if animation is enabled
-        const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
-
-        // Trigger animations on page load if enabled
+        // Wait for the page to fully load before starting animations
         window.onload = () => {
+            const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
+
             if (gameAnimationEnabled) {
-                games.forEach(game => observer.observe(game));
+                games.forEach(game => observer.observe(game)); // Start observing games
             } else {
                 // Make all games visible without animation
                 games.forEach(game => {
@@ -920,6 +917,28 @@
             }
         };
 
+        // Function to toggle game animations
+        function toggleGameAnimations() {
+            const gameAnimationEnabled = getCookie('gameAnimation') === 'true';
+            setCookie('gameAnimation', !gameAnimationEnabled, 30); // Toggle animation state
+
+            if (!gameAnimationEnabled) {
+                // Enable animations
+                games.forEach(game => {
+                    game.style.opacity = '0'; // Reset opacity
+                    game.style.transform = 'translateY(50px)'; // Reset position
+                    observer.observe(game); // Start observing the game
+                });
+            } else {
+                // Disable animations
+                games.forEach(game => {
+                    game.style.opacity = '1'; // Make visible
+                    game.style.transform = 'none'; // Reset transform
+                    observer.unobserve(game); // Stop observing the game
+                });
+            }
+        }
+
         // Check if music is enabled
         const musicEnabled = getCookie('backgroundMusic') === 'true';
         const backgroundMusic = document.getElementById('backgroundMusic');
diff --git a/gametoadd.html b/gametoadd.html
index 85fe51fa..4582e6c6 100644
--- a/gametoadd.html
+++ b/gametoadd.html
@@ -123,6 +123,7 @@
         <li>Game Challenges</li>
         <li>New Chat System for All Pages</li>
     </ul>
+    <iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
 
     <script>
         // Utility function to set a cookie
diff --git a/index.html b/index.html
index a72672e6..28d674c5 100644
--- a/index.html
+++ b/index.html
@@ -107,6 +107,8 @@
     </style>
 </head>
 <body>
+
+    <iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
     <h1 style="opacity: 0;">Moon Gaming</h1>
     <div class="button-container" style="opacity: 0;">
         <button class="button" onclick="location.href='chatroom.html'">Chatroom</button>
@@ -119,8 +121,8 @@
     <!-- Add a clock element to display date and time -->
     <div id="clock" style="opacity: 0; font-size: 1.5rem; margin-top: 20px;"></div>
 
-    <!-- Add background music -->
-    <audio id="backgroundMusic" src="./videoplayback.mp3" loop></audio>
+
+    
 
     <script>
         // Utility function to set a cookie
diff --git a/music.html b/music.html
new file mode 100644
index 00000000..6c6a0099
--- /dev/null
+++ b/music.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Background Music</title>
+</head>
+<body>
+    <audio id="backgroundMusic" src="./videoplayback.mp3" loop autoplay></audio>
+    <script>
+        const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
+        const backgroundMusic = document.getElementById('backgroundMusic');
+
+        if (musicEnabled) {
+            const savedTime = parseFloat(localStorage.getItem('backgroundMusicTime')) || 0;
+            backgroundMusic.currentTime = savedTime; // Resume from the saved time
+            backgroundMusic.volume = 0.5; // Set volume to 50%
+            backgroundMusic.play(); // Play the music
+        } else {
+            backgroundMusic.pause(); // Pause the music
+        }
+
+        // Save the current time periodically
+        setInterval(() => {
+            if (!backgroundMusic.paused) {
+                localStorage.setItem('backgroundMusicTime', backgroundMusic.currentTime);
+            }
+        }, 1000); // Save every second
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/setting.html b/setting.html
index 2d2f210e..2c1e4513 100644
--- a/setting.html
+++ b/setting.html
@@ -126,7 +126,7 @@
         </div>
         <div class="setting-item">
             <span>Background Music</span>
-            <button id="toggleMusicButton">Toggle Background Music</button>
+            <button id="toggleMusicButton">Enable Background Music</button>
         </div>
         <div class="setting-item clear-cookies">
             <span>Clear Cookies</span>
@@ -145,6 +145,8 @@
         </div>
     </div>
 
+    <iframe src="music.html" style="display: none;" id="musicIframe"></iframe>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script>
         // Utility function to set a cookie
@@ -253,25 +255,32 @@
         }
 
         // Function to toggle background music
-        function toggleBackgroundMusic() {
-            const musicEnabled = getCookie('backgroundMusic') === 'true';
-            setCookie('backgroundMusic', !musicEnabled, 30); // Toggle the cookie value
+        function toggleMusic() {
+            const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
+            localStorage.setItem('backgroundMusicEnabled', !musicEnabled); // Toggle music state
 
+            // Update the button text
             const toggleMusicButton = document.getElementById('toggleMusicButton');
+            toggleMusicButton.textContent = !musicEnabled ? 'Disable Background Music' : 'Enable Background Music';
+
+            // Access the iframe's audio element
+            const musicIframe = document.getElementById('musicIframe');
+            const iframeWindow = musicIframe.contentWindow;
+            const backgroundMusic = iframeWindow.document.getElementById('backgroundMusic');
+
             if (!musicEnabled) {
-                toggleMusicButton.textContent = 'Disable Background Music';
+                backgroundMusic.play();
             } else {
-                toggleMusicButton.textContent = 'Enable Background Music';
+                backgroundMusic.pause();
             }
         }
 
         // Set the initial state of the button
-        const musicEnabled = getCookie('backgroundMusic') === 'true';
-        const toggleMusicButton = document.getElementById('toggleMusicButton');
-        toggleMusicButton.textContent = musicEnabled ? 'Disable Background Music' : 'Enable Background Music';
-
-        // Add event listener
-        toggleMusicButton.addEventListener('click', toggleBackgroundMusic);
+        window.onload = () => {
+            const musicEnabled = localStorage.getItem('backgroundMusicEnabled') === 'true';
+            const toggleMusicButton = document.getElementById('toggleMusicButton');
+            toggleMusicButton.textContent = musicEnabled ? 'Disable Background Music' : 'Enable Background Music';
+        };
 
         // Ensure animations are enabled by default
         if (getCookie('gameAnimation') === null) {
@@ -293,6 +302,10 @@
         toggleSetting('toggleSaveSearch', 'saveSearch');
         toggleSetting('toggleGameAnimation', 'gameAnimation');
         toggleSetting('toggleLessButtons', 'lessButtons');
+
+        // Add event listener for background music toggle
+        const toggleMusicButton = document.getElementById('toggleMusicButton');
+        toggleMusicButton.addEventListener('click', toggleMusic);
     </script>
 </body>
 
