diff --git a/css/global.css b/css/global.css
index f662194..8ac2d47 100644
--- a/css/global.css
+++ b/css/global.css
@@ -62,11 +62,11 @@ body {
 
   background-color: #22406e;
   border: 1px solid #213d67;
-  padding: 10px;
+  padding: 5px;
   border-radius: 5px; 
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   position: fixed;
-  top: 650px; 
+  bottom: 10px; 
   left: 20px;
   z-index: 1000;
 
@@ -95,16 +95,3 @@ body {
   scrollbar-color: #888 #234271;
 }
 
-#google_translate_element {
-
-  background-color: #22406e;
-  border: 1px solid #213d67;
-  padding: 10px;
-  border-radius: 5px; 
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  position: fixed;
-  top: 650px; 
-  left: 20px;
-  z-index: 1000;
-
-}
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
index 5e4ea7d..9b5ea27 100644
--- a/css/index.css
+++ b/css/index.css
@@ -520,34 +520,77 @@
     box-sizing: border-box;
   }
 }
-.kids-icon {
 
+.icon-toggle-button {
+  display: none;
+}
+
+.icon-toggle-label {
+  display: inline-block;
+  padding: 10px;
+  background-color: #333;
+  cursor: pointer;
+  border-radius: 5px;
   position: fixed;
-  top:  120px;
-  left:  30px;
-  width: 45px; /* Adjust size as needed */
-  height:  45px; /* Adjust size as needed */
-  cursor:  pointer;
-  z-index:  1000; /* Ensure it is on top of other elements */
+  top: 50px;
+  left: 30px;
+  width: 20px;
+  height: 20px;
+  z-index: 1001;
+  background: url('/public/menu.png') no-repeat center center;
+  background-size: contain;
+}
+
+.icon-container {
+  display: none;
+  position: fixed;
+  top: 95px;
+  left: 20px;
+  z-index: 1000;
+  background-color: #1a273c;
+  height: 260px;
+  width:45px ;
+  padding: 10px;
+  border-radius: 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  user-select: none;
+}
 
+.icon-toggle-button:checked + .icon-toggle-label + .icon-container {
+  display: block;
+}
+
+.icon-container img {
+  display: block;
+  margin-bottom: 10px;
 }
 
 .multiplayer-icon {
 
   position:  fixed;
-  top:  50px;
+  top:  100px;
   left:  30px;
   width:  45px; /* Adjust size as needed */
   height:  45px; /* Adjust size as needed */
   cursor:  pointer;
   z-index:  1000; /* Ensure it is on top of other elements */
+}
 
+.kids-icon {
+  position: fixed;
+  top: 170px;
+  left: 30px;
+  width: 45px; /* Adjust size as needed */
+  height: 45px; /* Adjust size as needed */
+  cursor:  pointer;
+  z-index:  1000; /* Ensure it is on top of other elements */
 }
 
+
 .reward-icon {
 
   position:  fixed;
-  top:  200px;
+  top:  250px;
   left:  30px;
   width:  40px; /* Adjust size as needed */
   height:  40px; /* Adjust size as needed */
@@ -559,7 +602,7 @@
 .video-icon {
 
   position:  fixed;
-  top:  270px;
+  top:  320px;
   left:  30px;
   width:  40px; /* Adjust size as needed */
   height:  40px; /* Adjust size as needed */
@@ -595,19 +638,27 @@
 
 .scroll_top {
   position: fixed;
-  right: 90px;
+  right: 80px;
   bottom: 20px;
   cursor: pointer;
   border-radius: 50%;
-  width: 50px;
+  width: 45px;
   /* Define a fixed size for the button */
-  height: 50px;
+  height: 45px;
   /* Ensure it's square */
   overflow: hidden;
   /* Ensure the image doesn't overflow */
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
+  outline: none;
+  border: none;
+  transition: 0.2s ease-in-out; 
+
+}
+
+.scroll_top:hover{
+  transform: scale(1.08);
 }
 
 #to_top {
diff --git a/index.html b/index.html
index 1d04322..96ae2f7 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
     gtag('js', new Date());
 
     gtag('config', 'G-PMJMSDJVFT');
+
   </script>
 
 </head>
@@ -24,16 +25,11 @@
     <source src="./audio/back.mp3" type="audio/mpeg">
   </audio>
 
-  <a href="main/award/badges.html">
-    <img src="public/reward.png" title="awards" alt="Reward Icon" class="reward-icon" id="reward-icon">
-  </a>
-
-  <a href="vids/vid.html">
-    <img src="public/video.png" title="video guides" alt="Video Icon" class="video-icon" id="video-icon">
-  </a>
-
-  <a target="_blank" href="https://create.kahoot.it/share/beginner-cybersecurity-terms/a13ab7e5-c88c-4319-a977-02916d7c9406">
-    <a target="_blank" href="https://create.kahoot.it/share/beginner-cybersecurity-terms/a13ab7e5-c88c-4319-a977-02916d7c9406">
+  <input type="checkbox" id="icon-toggle" class="icon-toggle-button">
+  <label for="icon-toggle" class="icon-toggle-label"></label>
+  <div class="icon-container">
+    <a target="_blank"
+      href="https://create.kahoot.it/share/beginner-cybersecurity-terms/a13ab7e5-c88c-4319-a977-02916d7c9406">
       <img src="public/multiplayer.png" title="kahoot" alt="Multiplayer Icon" class="multiplayer-icon"
         id="multiplayer-icon">
     </a>
@@ -42,182 +38,220 @@
       <img src="public/kids.png" title="enlightened" alt="Kids Icon" class="kids-icon" id="kids-icon">
     </a>
 
-    <img src="public/music.png" title="music" alt="Music Icon" class="music-icon" id="music-icon">
-    <div class="homepage">
-      <section class="homepage-inner">
-        <div class="frame-parent">
-          <div class="cyber-fit-wrapper">
-            <h1 class="cyber-fit">CyberBear</h1>
-          </div>
-          <div class="frame-group">
-            <div class="cyberfit-cyber-challenges-to-wrapper">
-              <div class="cyberfit-cyber-container">
-                <h3> Phishing Attack ⭐ </h3>
-                <p class="cyberfit-cyber">
-                  Learn how to spot sneaky emails and keep your personal info safe from scammers. Are you ready for the
-                  cyber challenge?
-                </p>
-              </div>
+    <a href="main/award/badges.html">
+      <img src="public/reward.png" title="awards" alt="Reward Icon" class="reward-icon" id="reward-icon">
+    </a>
+
+    <a href="vids/vid.html">
+      <img src="public/video.png" title="video guides" alt="Video Icon" class="video-icon" id="video-icon">
+    </a>
+  </div>
+
+  <img src="public/music.png" title="music" alt="Music Icon" class="music-icon" id="music-icon">
+  <div class="homepage">
+    <section class="homepage-inner">
+      <div class="frame-parent">
+        <div class="cyber-fit-wrapper">
+          <h1 class="cyber-fit">CyberBear</h1>
+        </div>
+        <div class="frame-group">
+          <div class="cyberfit-cyber-challenges-to-wrapper">
+            <div class="cyberfit-cyber-container">
+              <h3> Phishing Attack ⭐ </h3>
+              <p class="cyberfit-cyber">
+                Learn how to spot sneaky emails and keep your personal info safe from scammers. Are you ready for the
+                cyber challenge?
+              </p>
             </div>
-            <div class="frame-wrapper">
-              <div class="level-1-parent">
-                <h3 class="level-1">LEVEL- 1</h3>
-
-                <div class="animation-1716828621477-1-wrapper">
-                  <a href="index_levels/index-level1.html">
-                    <img class="animation-1716828621477-1" loading="lazy" alt="play" title="play level 1"
-                      src="./public/animation--1716828621477-1@2x.gif" />
-                  </a>
-                </div>
+          </div>
+          <div class="frame-wrapper">
+            <div class="level-1-parent">
+              <h3 class="level-1">LEVEL- 1</h3>
+
+              <div class="animation-1716828621477-1-wrapper">
+                <a href="index_levels/index-level1.html">
+                  <img class="animation-1716828621477-1" loading="lazy" alt="play" title="play level 1"
+                    src="./public/animation--1716828621477-1@2x.gif" />
+                </a>
               </div>
             </div>
-            <img class="giphy-1-1" loading="lazy" alt="" src="./public/giphy-1-1@2x.gif" />
           </div>
+          <img class="giphy-1-1" loading="lazy" alt="" src="./public/giphy-1-1@2x.gif" />
         </div>
-      </section>
-      <section class="frame-container">
-        <div class="frame-div">
-          <div class="giphy-2-1-parent">
-            <img class="giphy-2-1" loading="lazy" alt="" src="./public/giphy-2-1@2x.gif" />
-            <div class="frame-wrapper1">
-              <div class="level-2-parent">
-                <h3 class="level-2">LEVEL- 2</h3>
-                <div class="animation-1716828621477-2-wrapper">
-                  <a href="index_levels/index-level2.html">
-                    <img class="animation-1716828621477-2" loading="lazy" alt="play" title="play level 2"
-                      src="./public/animation--1716828621477-1@2x.gif" />
-                  </a>
-                </div>
-              </div>
-            </div>
-            <div class="cyberfit-cyber-challenges-to-container">
-              <div class="cyberfit-cyber-container1">
-                <h3> Malware Mayhem ⭐⭐ </h3>
-                <p class="cyberfit-cyber1">
-                  Your mission: Find and defeat the sneaky malware trying to mess up your computer... Let's go!
-                </p>
+      </div>
+    </section>
+    <section class="frame-container">
+      <div class="frame-div">
+        <div class="giphy-2-1-parent">
+          <img class="giphy-2-1" loading="lazy" alt="" src="./public/giphy-2-1@2x.gif" />
+          <div class="frame-wrapper1">
+            <div class="level-2-parent">
+              <h3 class="level-2">LEVEL- 2</h3>
+              <div class="animation-1716828621477-2-wrapper">
+                <a href="index_levels/index-level2.html">
+                  <img class="animation-1716828621477-2" loading="lazy" alt="play" title="play level 2"
+                    src="./public/animation--1716828621477-1@2x.gif" />
+                </a>
               </div>
             </div>
           </div>
-        </div>
-        <div class="frame-parent1">
-          <div class="cyberfit-cyber-challenges-to-frame">
-            <div class="cyberfit-cyber-container2">
-              <h3> Weak Password Worries ⭐⭐⭐ </h3>
-              <p class="cyberfit-cyber2">
-                Create strong passwords and use two-step security to keep hackers and force attacks out. You’ve got
-                this!
+          <div class="cyberfit-cyber-challenges-to-container">
+            <div class="cyberfit-cyber-container1">
+              <h3> Malware Mayhem ⭐⭐ </h3>
+              <p class="cyberfit-cyber1">
+                Your mission: Find and defeat the sneaky malware trying to mess up your computer... Let's go!
               </p>
             </div>
           </div>
-          <div class="frame-parent2">
-            <div class="frame-wrapper2">
-              <div class="level-3-parent">
-                <h3 class="level-3">LEVEL- 3</h3>
-                <div class="animation-1716828621477-3-wrapper">
-                  <a href="index_levels/index-level3.html">
-                    <img class="animation-1716828621477-3" loading="lazy" alt="play" title="play level 3"
-                      src="./public/animation--1716828621477-1@2x.gif" />
-                  </a>
-                </div>
-              </div>
-            </div>
-            <img class="giphy-3-1" loading="lazy" alt="" src="./public/giphy-3-1@2x.gif" />
-          </div>
         </div>
-      </section>
-      <section class="homepage-child">
-        <div class="frame-parent3">
-          <div class="giphy-4-1-wrapper">
-            <img class="giphy-4-1" loading="lazy" alt="" src="./public/giphy-4-1@2x.gif" />
+      </div>
+      <div class="frame-parent1">
+        <div class="cyberfit-cyber-challenges-to-frame">
+          <div class="cyberfit-cyber-container2">
+            <h3> Weak Password Worries ⭐⭐⭐ </h3>
+            <p class="cyberfit-cyber2">
+              Create strong passwords and use two-step security to keep hackers and force attacks out. You’ve got
+              this!
+            </p>
           </div>
-          <div class="frame-wrapper3">
-            <div class="level-4-parent">
-              <h3 class="level-4">LEVEL- 4</h3>
-
-              <div class="animation-1716828621477-4-wrapper">
-                <a href="index_levels/index-level4.html">
-                  <img class="animation-1716828621477-4" loading="lazy" alt="play" title="play level 4"
+        </div>
+        <div class="frame-parent2">
+          <div class="frame-wrapper2">
+            <div class="level-3-parent">
+              <h3 class="level-3">LEVEL- 3</h3>
+              <div class="animation-1716828621477-3-wrapper">
+                <a href="index_levels/index-level3.html">
+                  <img class="animation-1716828621477-3" loading="lazy" alt="play" title="play level 3"
                     src="./public/animation--1716828621477-1@2x.gif" />
                 </a>
               </div>
             </div>
           </div>
-          <div class="cyberfit-cyber-container3">
-            <h3> Cyber Shield Master ⭐⭐⭐⭐</h3>
-            <p class="cyberfit-cyber3">
-              Learn how to stay safe online by being smart, informed, and always one step ahead of cyber threats. Get
-              ready to build the ultimate defense!
-            </p>
+          <img class="giphy-3-1" loading="lazy" alt="" src="./public/giphy-3-1@2x.gif" />
+        </div>
+      </div>
+    </section>
+    <section class="homepage-child">
+      <div class="frame-parent3">
+        <div class="giphy-4-1-wrapper">
+          <img class="giphy-4-1" loading="lazy" alt="" src="./public/giphy-4-1@2x.gif" />
+        </div>
+        <div class="frame-wrapper3">
+          <div class="level-4-parent">
+            <h3 class="level-4">LEVEL- 4</h3>
+
+            <div class="animation-1716828621477-4-wrapper">
+              <a href="index_levels/index-level4.html">
+                <img class="animation-1716828621477-4" loading="lazy" alt="play" title="play level 4"
+                  src="./public/animation--1716828621477-1@2x.gif" />
+              </a>
+            </div>
           </div>
         </div>
-      </section>
-    </div>
-
-    <button class="scroll_top">
-      <img src="public/arrow.png" alt="" id="to_top">
-    </button>
-    <script>
-      const scrollButton = document.querySelector(".scroll_top");
-
-      window.addEventListener("scroll", () => {
-        window.pageYOffset > 100
-          ? scrollButton.classList.add("show-btn")
-          : scrollButton.classList.remove("show-btn");
-      });
-
-      function smoothScrollToTop() {
-        const scrollY = window.pageYOffset;
-        const scrollStep = Math.max(10, Math.floor(scrollY / 20));
-        if (scrollY > 0) {
-          window.scrollBy(0, -scrollStep);
-          requestAnimationFrame(smoothScrollToTop);
-        }
+        <div class="cyberfit-cyber-container3">
+          <h3> Cyber Shield Master ⭐⭐⭐⭐</h3>
+          <p class="cyberfit-cyber3">
+            Learn how to stay safe online by being smart, informed, and always one step ahead of cyber threats. Get
+            ready to build the ultimate defense!
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <button class="scroll_top">
+    <img src="public/arrow.png" alt="scroll to top" id="to_top">
+  </button>
+  <script>
+    const toggleButton = document.querySelector('.icon-toggle-button');
+    const iconContainer = document.querySelector('.icon-container');
+
+    toggleButton.addEventListener('change', function () {
+      if (toggleButton.checked) {
+        iconContainer.style.display = 'block';
+      } else {
+        iconContainer.style.display = 'none';
+      }
+    });
+
+    window.addEventListener('scroll', function () {
+      if (toggleButton.checked) {
+        toggleButton.checked = false;
+        iconContainer.style.display = 'none';
+      }
+    });
+
+    document.addEventListener('click', function (event) {
+      if (toggleButton.checked && !iconContainer.contains(event.target) && !toggleButton.contains(event.target)) {
+        toggleButton.checked = false;
+        iconContainer.style.display = 'none';
+      }
+    });
+
+
+    const scrollButton = document.querySelector(".scroll_top");
+
+    window.addEventListener("scroll", () => {
+
+      if (window.pageYOffset > 1000) {
+        scrollButton.style.display = "flex";
+      } else {
+        scrollButton.style.display = "none";
       }
+    });
 
-      // When the button is clicked, scroll to the top smoothly
-      scrollButton?.addEventListener("click", () => {
+    function smoothScrollToTop() {
+      const scrollY = window.pageYOffset;
+      const scrollStep = Math.max(10, Math.floor(scrollY / 20));
+      if (scrollY > 0) {
+        window.scrollBy(0, -scrollStep);
         requestAnimationFrame(smoothScrollToTop);
-      });
-    </script>
-    <script>
-      var isPlaying = false;
-      var audio = document.getElementById('background-music');
-      var musicIcon = document.getElementById('music-icon');
-
-      musicIcon.addEventListener('click', function () {
-        if (isPlaying) {
-          audio.pause();
-          isPlaying = false;
-        } else {
-          audio.play().catch(error => {
-            console.log('Error playing audio:', error);
-          });
-          isPlaying = true;
-        }
-      });
-    </script>
-    <script>
-      window.embeddedChatbotConfig = {
-        chatbotId: "iHUFXP4dziHwbqdmgIfl3",
-        domain: "www.chatbase.co"
       }
-    </script>
-    <script src="https://www.chatbase.co/embed.min.js" chatbotId="iHUFXP4dziHwbqdmgIfl3" domain="www.chatbase.co" defer>
-    </script>
-    <!-- Google Translate Element -->
-<div id="google_translate_element" style="margin: 20px;"></div>
-<script type="text/javascript">
-    function googleTranslateElementInit() {
-        new google.translate.TranslateElement({
-            pageLanguage: 'en',
-            includedLanguages: 'af,ar,hy,az,ba,eu,bn,bs,ca,hr,cs,da,nl,en,eo,et,tl,tlh,fi,fr,gaa,ka,de,el,gu,ht,ha,he,hi,hu,is,id,it,ja,jw,kn,kk,km,ko,ku,ky,la,lv,lt,lb,mk,ml,mn,no,ne,pl,pt,pa,ro,ru,sr,si,sk,sl,es,su,sw,sv,ta,te,th,tl,tr,uk,ur,vi,cy,xh,yi,zu',
-            layout: google.translate.TranslateElement.InlineLayout.SIMPLE
-        }, 'google_translate_element');
     }
-</script>
-<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 
+    // When the button is clicked, scroll to the top smoothly
+    scrollButton?.addEventListener("click", () => {
+      requestAnimationFrame(smoothScrollToTop);
+    });
+  </script>
+  <script>
+    var isPlaying = false;
+    var audio = document.getElementById('background-music');
+    var musicIcon = document.getElementById('music-icon');
+
+    musicIcon.addEventListener('click', function () {
+      if (isPlaying) {
+        audio.pause();
+        isPlaying = false;
+      } else {
+        audio.play().catch(error => {
+          console.log('Error playing audio:', error);
+        });
+        isPlaying = true;
+      }
+    });
+  </script>
+  <script>
+    window.embeddedChatbotConfig = {
+      chatbotId: "iHUFXP4dziHwbqdmgIfl3",
+      domain: "www.chatbase.co"
+    }
+  </script>
+  <script src="https://www.chatbase.co/embed.min.js" chatbotId="iHUFXP4dziHwbqdmgIfl3" domain="www.chatbase.co" defer>
+  </script>
+  <!-- Google Translate Element -->
+  <div id="google_translate_element"></div>
+  <script type="text/javascript">
+    function googleTranslateElementInit() {
+      new google.translate.TranslateElement({
+        pageLanguage: 'en',
+        includedLanguages: 'af,ar,hy,az,ba,eu,bn,bs,ca,hr,cs,da,nl,en,eo,et,tl,tlh,fi,fr,gaa,ka,de,el,gu,ht,ha,he,hi,hu,is,id,it,ja,jw,kn,kk,km,ko,ku,ky,la,lv,lt,lb,mk,ml,mn,no,ne,pl,pt,pa,ro,ru,sr,si,sk,sl,es,su,sw,sv,ta,te,th,tl,tr,uk,ur,vi,cy,xh,yi,zu',
+        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
+      }, 'google_translate_element');
+    }
+  </script>
+  <script type="text/javascript"
+    src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 
 
 </body>
diff --git a/public/menu.png b/public/menu.png
new file mode 100644
index 0000000..eb906da
Binary files /dev/null and b/public/menu.png differ