diff --git a/public/assets/gameImages/buttons/info.png b/public/assets/gameImages/buttons/info.png
new file mode 100644
index 00000000..a762a6c7
Binary files /dev/null and b/public/assets/gameImages/buttons/info.png differ
diff --git a/public/assets/images/troubleshooting/01-01.png b/public/assets/images/troubleshooting/01-01.png
new file mode 100644
index 00000000..d714bd93
Binary files /dev/null and b/public/assets/images/troubleshooting/01-01.png differ
diff --git a/public/assets/images/troubleshooting/01-02.png b/public/assets/images/troubleshooting/01-02.png
new file mode 100644
index 00000000..80a3a972
Binary files /dev/null and b/public/assets/images/troubleshooting/01-02.png differ
diff --git a/public/assets/images/troubleshooting/01-03.png b/public/assets/images/troubleshooting/01-03.png
new file mode 100644
index 00000000..8feaf04f
Binary files /dev/null and b/public/assets/images/troubleshooting/01-03.png differ
diff --git a/public/assets/images/troubleshooting/01-04.png b/public/assets/images/troubleshooting/01-04.png
new file mode 100644
index 00000000..821b65ea
Binary files /dev/null and b/public/assets/images/troubleshooting/01-04.png differ
diff --git a/public/assets/images/troubleshooting/01-05.png b/public/assets/images/troubleshooting/01-05.png
new file mode 100644
index 00000000..dfd5fd71
Binary files /dev/null and b/public/assets/images/troubleshooting/01-05.png differ
diff --git a/public/assets/images/troubleshooting/alert.png b/public/assets/images/troubleshooting/alert.png
new file mode 100644
index 00000000..4a71c6d3
Binary files /dev/null and b/public/assets/images/troubleshooting/alert.png differ
diff --git a/public/assets/troubleshootingDB/troubleshooting.json b/public/assets/troubleshootingDB/troubleshooting.json
new file mode 100644
index 00000000..03b90481
--- /dev/null
+++ b/public/assets/troubleshootingDB/troubleshooting.json
@@ -0,0 +1,74 @@
+{
+    "issues": [
+        {
+            "name": "Microphone is not working",
+            "body": [
+                {
+                    "type": "title",
+                    "content": "Safari, Firefox, and Edge"
+                },
+                {
+                    "type": "text",
+                    "content": "Oops! Our games don’t fully work on Safari, Firefox, or Edge just yet. For now, please switch to Google Chrome for the best experience."
+                },
+                {
+                    "type": "text",
+                    "content": "We’re working on it—thanks for hanging in there!"
+                },
+                {
+                    "type": "title",
+                    "content": "Chrome"
+                },
+                {
+                    "type": "text",
+                    "content": "Chrome likes to pick your microphone for you (how thoughtful… right?). It doesn’t ask—just grabs the default one and runs with it. Want to change it? Here’s how:"
+                },
+                {
+                    "type": "text",
+                    "content": "1. Go to Settings > Privacy and Security > Site Settings > Microphone"
+                },
+                {
+                    "type": "image",
+                    "path": "/assets/images/troubleshooting/01-01.png",
+                    "caption": "Go to site settings"
+                },
+                {
+                    "type": "image",
+                    "path": "/assets/images/troubleshooting/01-02.png",
+                    "caption": "Choose Privacy and security"
+                },
+                {
+                    "type": "image",
+                    "path": "/assets/images/troubleshooting/01-03.png",
+                    "caption": "Click Site settings"
+                },
+                {
+                    "type": "image",
+                    "path": "/assets/images/troubleshooting/01-04.png",
+                    "caption": "Select Microphone"
+                },
+                {
+                    "type": "text",
+                    "content": "2. Pick the mic you actually want to use"
+                },
+                {
+                    "type": "image",
+                    "path": "/assets/images/troubleshooting/01-05.png",
+                    "caption": "Pick the mic you want to use"
+                },
+                {
+                    "type": "title",
+                    "content": "Still need help?"
+                },
+                {
+                    "type": "text",
+                    "content": "No worries — we’ve got your back! Our dev team is super responsive and loves squashing bugs like it’s their day job (because it is)."
+                },
+                {
+                    "type": "text",
+                    "content": "Reach out to us at connect.audemy@gmail.com We’ll get things sorted in no time!"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/pages/Footer/GamePagesFooter.vue b/src/pages/Footer/GamePagesFooter.vue
new file mode 100644
index 00000000..34d57e23
--- /dev/null
+++ b/src/pages/Footer/GamePagesFooter.vue
@@ -0,0 +1,27 @@
+<!-- GamePagesFooter.vue -->
+<template>
+    <header class="flex items-center justify-between px-8 py-4 bg-transparent">
+      <!-- Something Not Working? Button -->
+      <div class="fixed bottom-10 left-10 z-50">
+        <button
+          @click="handleSthNotWorkingButtonClick"
+          class="text-black font-semibold py-2 px-4 rounded-lg flex items-center gap-2"
+        >
+          <img
+            src="/public/assets/gameImages/buttons/info.png" 
+            alt="Icon" 
+            class="w-6 h-6" 
+          />
+          <span>Something Not Working?</span>
+        </button>
+      </div>
+    </header> 
+</template>
+  
+  <script setup>
+defineProps({
+  handleSthNotWorkingButtonClick: Function,
+  currentAudios: Array,
+});
+  </script>
+  
diff --git a/src/pages/GameZone/GameZone.vue b/src/pages/GameZone/GameZone.vue
index 769b431a..c9d57635 100644
--- a/src/pages/GameZone/GameZone.vue
+++ b/src/pages/GameZone/GameZone.vue
@@ -3,6 +3,7 @@ import Header from "../../components/Header/Header.vue";
 import GameZoneList from "../GameZone/GameZoneList/GameZoneList.vue";
 import GameProgress from "../GameZone/GameProgress/GameProgress.vue";
 import { ref, onMounted } from "vue";
+
 const currentPage = ref(1);
 const changeCurrentPage = (page) => {
     currentPage.value = page;
@@ -21,49 +22,221 @@ onMounted(() => {
   sessionStorage.removeItem("gameCategory");
 });
 
+// Reactive flags to track dropdown visibility for each game menu (for 'aria-expanded')
+const isLangMenuOpen = ref(false);
+const isMathMenuOpen = ref(false);
+
+// Updates Language menu visibility flag
+const changeIsLangMenuOpen = (bool) => {
+  isLangMenuOpen.value = bool;
+};
+
+// Updates Math menu visibility flag
+const changeIsMathMenuOpen = (bool) => {
+  isMathMenuOpen.value = bool;
+};
+
+function activateGameMenu(event) {
+  const menuBtn = event.currentTarget;
+
+  // Conditionally activate and style menu button
+  const isMenuActive = menuBtn.style.getPropertyValue('color') === 'rgb(8, 123, 180)' ? true : false;
+  if (isMenuActive) {
+    // Deactivate and reset styling for menu 
+    deactivateGameMenu(menuBtn);
+
+    // Update reactive flag based on currentPage
+    if (currentPage.value === 1) {
+      changeIsLangMenuOpen(false);
+    } else {
+      changeIsMathMenuOpen(false);
+    }
+
+  } else {
+    menuBtn.style.backgroundColor = '#e6f3fa';
+    menuBtn.style.fontWeight = '600';
+    menuBtn.style.color = '#087BB4';
+    menuBtn.style.borderColor = '#087BB4';
+
+    // Style arrow (svg)
+    const svgArrow = menuBtn.querySelector('svg');
+    svgArrow.style.fill = '#087BB4';
+
+    // Update reactive flag based on currentPage
+    if (currentPage.value === 1) {
+      changeIsLangMenuOpen(true);
+    } else {
+      changeIsMathMenuOpen(true);
+    }
+  }
+  // Toggle visibility of dropdown
+  toggleDropdown();
+}
+
+// Deactivates the game menu button by resetting its styles
+function deactivateGameMenu(menuBtn) { 
+  // Reset button
+  menuBtn.style.backgroundColor = '#FFFFFF';
+  menuBtn.style.fontWeight = 'normal';
+  menuBtn.style.color = '#6E777C';
+  menuBtn.style.borderColor = '#6E777C';
+
+  // Reset arrow (svg)
+  const svgArrow = menuBtn.querySelector('svg');
+  svgArrow.style.fill = '#6E777C';
+
+} 
+
+// Toggles visibility of the active dropdown menu (Language or Math)
+function toggleDropdown() {
+  if (currentPage.value === 1) {
+    // Toggle Language dropdown visibility
+    const langDropdown = document.getElementById("lang-dropdown-div");
+    langDropdown.classList.toggle('hidden');
+
+    // Update reactive flag for Language menu
+    const isLangVisible = !langDropdown.classList.contains('hidden');
+    changeIsLangMenuOpen(isLangVisible);
+
+  } else {
+    // Toggle Math dropdown visibility
+    const mathDropdown = document.getElementById("math-dropdown-div");
+    mathDropdown.classList.toggle('hidden');
+
+    // Update reactive flag for Math menu
+    const isMathVisible = !mathDropdown.classList.contains('hidden');
+    changeIsMathMenuOpen(isMathVisible); 
+  }
+}
+
+function handlePageSwitch(newPage) {
+  // Deactivate and reset styling for the opposite menu button
+  let oppositeMenuBtn = document.getElementById('lang-menu-btn');
+  let oppositeDropdown = document.getElementById('lang-dropdown-div');
+
+  if (newPage === 1) {
+    // Opposite page = Math Games
+    oppositeMenuBtn = document.getElementById('math-menu-btn');
+    oppositeDropdown = document.getElementById('math-dropdown-div');
+  } 
+
+  deactivateGameMenu(oppositeMenuBtn);
+
+  // Hide the opposite dropdown if it's currently visible
+  if (!oppositeDropdown.classList.contains('hidden')) {
+    oppositeDropdown.classList.add('hidden');
+  }
+  
+  // Update the current page
+  changeCurrentPage(newPage);
+
+  // Update reactive flags to reflect menu states for new page
+  if (newPage === 1) {
+    changeIsLangMenuOpen(true);
+    changeIsMathMenuOpen(false);
+  } else {
+    changeIsMathMenuOpen(true);
+    changeIsLangMenuOpen(false);
+  }
+}
+
+function handleMenuBlur(event) {
+  // Determine the currently active dropdown
+  let currentDropdown = document.getElementById('math-dropdown-div');
+  if (currentPage.value === 1) {
+    currentDropdown = document.getElementById('lang-dropdown-div');
+  } 
+
+  // Keep menu open if focus moved into the dropdown options (e.g., tabbing through it)
+  if (currentDropdown.contains(event.relatedTarget)) {
+    return;
+  }
+
+  const menuBtn = event.currentTarget;
+  hideMenuDropdown(menuBtn, currentDropdown);
+}
+
+function handleDropdownFocusOut(event) {
+  const currentDropdown = event.currentTarget;
+
+  // Keep dropdown open if focus is still within it (e.g., tabbing through it)
+  if (currentDropdown.contains(event.relatedTarget)) {
+    return;
+  }
+
+  // Otherwise, close dropdown and deactivate the corresponding menu button
+  let menuBtn = document.getElementById('lang-menu-btn');
+  if (currentPage.value === 2) {
+    menuBtn = document.getElementById('math-menu-btn');
+  }
+
+  hideMenuDropdown(menuBtn, currentDropdown);
+}
+
+function hideMenuDropdown(menuBtn, currentDropdown) {
+  // Deactivates and reset styling for menu
+  deactivateGameMenu(menuBtn);
+
+  // Hides opened dropdown
+  currentDropdown.classList.add('hidden');
+
+  // Update reactive flag 
+  if (currentPage.value === 1) {
+    changeIsLangMenuOpen(false);
+  } else {
+    changeIsMathMenuOpen(false);
+  }
+}
 
 </script>
+
+
+
 <template>
-    <div
-        class="relative bg-white h-full overflow-x-hidden flex flex-col justify-center"
-    >
-        <div class="px-20">
-            <Header
-                :textColor="'text-black'"
-                :logoPath="'/assets/images/header/header-logo-2.png'"
-            />
-        </div>
-        <div class="w-full pt-10 flex align-center justify-center">
-            <div class="w-10/12">
-                <h2
-                    class="font-poppins text-black text-[40px] mobile:text-[25px] M-0"
-                >
-                    Play and learn with us!
-                </h2>
-                <div class="w-full flex gap-10 mb-10">
-                    <button
-                        @click="changeCurrentPage(1)"
-                        :class="[
-                            currentPage == 1
-                                ? 'text-[#087BB4] bg-[#e6f3fa] font-semibold border-[#087BB4]'
-                                : 'text-[#6E777C] bg-white border-[#6E777C]',
-                        ]"
-                        class="font-poppins mobile:text-[14px] py-2 px-8 rounded-full border"
-                    >
-                        Language Games
-                    </button>
-                    <button
-                        @click="changeCurrentPage(2)"
-                        :class="[
-                            currentPage == 2
-                                ? 'text-[#087BB4] bg-[#e6f3fa] font-semibold border-[#087BB4]'
-                                : 'text-[#6E777C] bg-white border-[#6E777C]',
-                        ]"
-                        class="font-poppins mobile:text-[14px] py-2 px-8 rounded-full border"
-                    >
-                        Math Games
-                    </button>
-                    <!--button
+  <div
+    class="relative bg-white h-full overflow-x-hidden flex flex-col justify-center"
+  >
+    <div class="px-20">
+      <Header
+        :textColor="'text-black'"
+        :logoPath="'/assets/images/header/header-logo-2.png'"
+      />
+    </div>
+    <div class="w-full pt-10 flex align-center justify-center">
+      <div class="w-10/12">
+        <h2 id="game-zone-header" class="font-poppins text-black text-[40px] mobile:text-[25px] mobile:text-center mt-10 M-0">
+          Play and learn with us!
+        </h2>
+        <div id="game-zone-grid" class="w-full grid grid-rows-3 gap-5 mb-10 mt-10">
+
+          <!-- LANGUAGE GAMES FILTER BUTTON -->
+          <button
+            @click="handlePageSwitch(1)"
+            :class="[
+              currentPage == 1
+                ? 'text-[#087BB4] bg-[#e6f3fa] font-semibold border-[#087BB4]'
+                : 'text-[#6E777C] bg-white border-[#6E777C]'
+            ]"
+            class="font-poppins mobile:text-[14px] py-2 px-8 rounded-full border"
+            id="lang-filter-btn"
+          >
+            Language Games
+          </button>
+
+          <!-- MATH GAMES FILTER BUTTON -->
+          <button
+            @click="handlePageSwitch(2)"
+            :class="[
+              currentPage == 2
+                ? 'text-[#087BB4] bg-[#e6f3fa] font-semibold border-[#087BB4]'
+                : 'text-[#6E777C] bg-white border-[#6E777C]'
+            ]"
+            class="font-poppins mobile:text-[14px] py-2 px-8 rounded-full border"
+            id="math-filter-btn"
+          >
+            Math Games
+          </button>
+          <!--button
             @click="changeCurrentPage(3)"
             :class="
               currentPage == 3
@@ -74,16 +247,229 @@ onMounted(() => {
           >
             My Progress
           </button-->
-                </div>
-                <div>
-                    <div v-if="currentPage != 3">
-                        <GameZoneList :type="currentPage" />
-                    </div>
-                    <div v-if="currentPage === 3">
-                        <GameProgress />
-                    </div>
-                </div>
+
+          <!-- LANGUAGE GAMES MENU -->
+          <div class="relative w-full h-full" 
+              id="lang-menu-div"
+              :class="[
+                currentPage === 1 ? 'flex' : 'hidden'
+              ]"
+          >
+            <button type="button" 
+                    id="lang-menu-btn"
+                    @click="activateGameMenu"
+                    @blur="handleMenuBlur"
+                    :aria-expanded="isLangMenuOpen"
+                    aria-haspopup="true"
+                    aria-controls="lang-dropdown-div"
+                    :class="[
+                      currentPage === 1 ? 'flex' : 'hidden',
+                      'w-full items-center justify-center gap-2 font-poppins text-[#6E777C] bg-[#FFFFFF] font-normal border border-[#6E777C] mobile:text-[14px] py-2 px-8 rounded-full'
+                    ]"
+            >
+              <span>Game Menu</span>
+                <svg class="inline size-5 text-gray-400 fill-[#6E777C]" 
+                      viewBox="0 0 20 20" 
+                      fill="currentColor" 
+                      aria-hidden="true" 
+                      data-slot="icon"
+                      :class="[
+                          currentPage === 1
+                          ? 'fill-[#6E777C]'
+                          : 'hidden'
+                      ]"
+                >
+                  <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+              </svg>
+            </button>
+    
+            <!-- LANGUAGE GAMES DROPDOWN OPTIONS -->
+            <div
+                id="lang-dropdown-div"
+                @focusout="handleDropdownFocusOut"
+                tabindex="-1"
+                class="hidden absolute left-0 top-10 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden text-center" 
+                role="menu" 
+                aria-orientation="vertical" 
+                aria-labelledby="lang-menu-btn"
+            >
+              <div id="lang-dropdown-options" class="py-1 text-[15px]" role="none">             
+                <a href="/game/definitionDetective" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-1">
+                  Definition Detective
+                </a>
+                <a href="/game/partofspeech" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-2">
+                  Part of Speech
+                </a>
+                <a href="/game/colorgame" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-3">
+                  Color Game
+                </a>
+                <a href="/game/syllableSorting" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-4">
+                  Syllable Sorting
+                </a>
+                <a href="/game/vocabVortex" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-5">
+                  Vocabulary Vortex
+                </a>
+                <a href="/game/polarpairing" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-6">
+                  Polar Pairing
+                </a>
+                <a href="/game/oddoneout" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-7">
+                  Odd One Out
+                </a>
+                <a href="/game/spellingbee" class="block px-4 py-2 text-gray-700" role="menuitem" id="lang-game-8">
+                  Spelling Bee
+                </a>
+              </div>
             </div>
+          </div>
+          
+          <!-- MATH GAMES MENU -->
+          <div class="relative w-full h-full" 
+              id="math-menu-div"
+              :class="[
+                currentPage === 2 ? 'flex' : 'hidden'
+              ]"
+          >
+            <button type="button" 
+                    id="math-menu-btn"
+                    @click="activateGameMenu"
+                    @blur="handleMenuBlur"
+                    :aria-expanded="isMathMenuOpen"
+                    aria-haspopup="true"
+                    aria-controls="math-dropdown-div"
+                    :class="[
+                      currentPage === 2 ? 'flex' : 'hidden',
+                      'w-full items-center justify-center gap-2 font-poppins text-[#6E777C] bg-[#FFFFFF] font-normal border border-[#6E777C] mobile:text-[14px] py-2 px-8 rounded-full'
+                    ]"
+            >
+              <span>Game Menu</span>
+                <svg class="size-5 text-gray-400" 
+                      viewBox="0 0 20 20" 
+                      fill="currentColor" 
+                      aria-hidden="true" 
+                      data-slot="icon"
+                      :class="[
+                          currentPage === 2
+                          ? 'fill-[#6E777C]'
+                          : 'hidden'
+                      ]"
+                >
+                  <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                </svg>
+            </button>
+            <!-- MATH GAMES DROPDOWN OPTIONS -->
+            <div 
+                id="math-dropdown-div"
+                @focusout="handleDropdownFocusOut"
+                tabindex="-1"
+                class="hidden absolute left-0 top-10 z-10 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-hidden text-center" 
+                role="menu" 
+                aria-orientation="vertical" 
+                aria-labelledby="math-menu-btn"
+            >
+              <div id="math-dropdown-options" class="py-1 text-[15px]" role="none">           
+                <a href="/game/fruitfrenzy" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-1">
+                  Fruit Frenzy
+                </a>
+                <a href="/game/shapeshark" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-2">
+                  Shape Shark
+                </a>
+                <a href="/game/addition" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-3">
+                  Animal Addition
+                </a>
+                <a href="/game/subtraction" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-4">
+                  Subtraction Safari
+                </a>
+                <a href="game/multiplicationmadness" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-5">
+                  Multiplication Madness
+                </a>
+                <a href="/game/DivisionDuel" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-6">
+                  Division Duel
+                </a>
+                <a href="/game/monkeymadness" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-7">
+                  Monkey Madness
+                </a>
+                <a href="/game/carcounting" class="block px-4 py-2 text-gray-700" role="menuitem" id="math-game-8">
+                  Car Counting
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div v-if="currentPage != 3">
+            <GameZoneList :type="currentPage" />
+          </div>
+          <div v-if="currentPage === 3">
+            <GameProgress />
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
+
+
+
+<style scoped>
+
+button:hover, #lang-menu-btn:hover, #math-menu-btn:hover {
+  background-color: #e6f3fa; 
+}
+
+#lang-dropdown-options a, #math-dropdown-options a {
+  border-bottom: 1px #D3D3D3 solid;
+}
+
+#lang-dropdown-options a:last-child, #math-dropdown-options a:last-child {
+  border-bottom: none;
+}
+
+#lang-dropdown-options a:hover, #math-dropdown-options a:hover {
+  background-color: #e6f3fa;
+}
+
+/* * * * * Edge Case: 'Language Games' button expands horizontally between 767px–803px widths * * * * */
+/* Shift both Language and Math dropdowns downward to avoid overlap with expanded button */
+@media only screen and (min-width: 767px) and (max-width: 803px) {
+  #lang-dropdown-div, #math-dropdown-div {
+    margin-top: 30px;
+  }
+}
+
+/* * * * * Medium Viewports (width ≥768px and <= 1024px) * * * * */
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+  #game-zone-header {
+    margin-top: 0;
+  }
+
+  #game-zone-grid {
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto; /* switches to single row */
+  }
+}
+
+/* * * * * Large Viewports (width ≥ 1025px) * * * * */
+@media only screen and (min-width: 1025px) {
+  #game-zone-header {
+    margin-top: 0;
+  }
+
+  #game-zone-grid {
+    grid-template-areas: 'lang math . . . . menu';
+    grid-template-rows: auto;
+  }
+
+  #lang-filter-btn {
+    grid-area: lang;
+  }
+
+  #math-filter-btn {
+    grid-area: math;
+  }
+
+  #lang-menu-div, #math-menu-div {
+    grid-area: menu;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/GameZone/GameZoneCard/GameZoneCard.vue b/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
index 692f609f..e8e8c900 100644
--- a/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
+++ b/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
@@ -18,6 +18,7 @@ const props = defineProps({
         @click="$emit('selectGame', url)"
         class="w-full h-[320px] mobile:h-[160px] rounded-[16px] border-[5px] border-[#323232] shadow-2xl  p-5 relative flex justify-center items-center"
         :style="{ backgroundColor: bgColor, color: textColor ?? '#323232' }"
+        style="z-index:0" 
     >
         <img
             :src="icon"
diff --git a/src/pages/GameZone/GameZoneList/AdditionGame.vue b/src/pages/GameZone/GameZoneList/AdditionGame.vue
index ffc27e7e..092cc2df 100644
--- a/src/pages/GameZone/GameZoneList/AdditionGame.vue
+++ b/src/pages/GameZone/GameZoneList/AdditionGame.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -269,6 +275,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -576,6 +583,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/CarCounting.vue b/src/pages/GameZone/GameZoneList/CarCounting.vue
index 86246114..e7e589c4 100644
--- a/src/pages/GameZone/GameZoneList/CarCounting.vue
+++ b/src/pages/GameZone/GameZoneList/CarCounting.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -260,6 +266,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -584,6 +591,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/ColorGame.vue b/src/pages/GameZone/GameZoneList/ColorGame.vue
index 9360de26..0e59953b 100644
--- a/src/pages/GameZone/GameZoneList/ColorGame.vue
+++ b/src/pages/GameZone/GameZoneList/ColorGame.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -558,4 +565,15 @@ const startFirstQuestion = () => {
   numOfAudiosPlayed.value = 1;
   playNextQuestion();
 };
+
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
 </script>
diff --git a/src/pages/GameZone/GameZoneList/DefinitionDetective.vue b/src/pages/GameZone/GameZoneList/DefinitionDetective.vue
index abc2be5d..0da81161 100644
--- a/src/pages/GameZone/GameZoneList/DefinitionDetective.vue
+++ b/src/pages/GameZone/GameZoneList/DefinitionDetective.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -265,6 +271,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -571,6 +578,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8.Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/DivisionDuel.vue b/src/pages/GameZone/GameZoneList/DivisionDuel.vue
index 0bd36c26..3cdefe82 100644
--- a/src/pages/GameZone/GameZoneList/DivisionDuel.vue
+++ b/src/pages/GameZone/GameZoneList/DivisionDuel.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -263,6 +269,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -562,6 +569,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8.Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/FruitFrenzy.vue b/src/pages/GameZone/GameZoneList/FruitFrenzy.vue
index d74bed21..c785a026 100644
--- a/src/pages/GameZone/GameZoneList/FruitFrenzy.vue
+++ b/src/pages/GameZone/GameZoneList/FruitFrenzy.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -267,6 +273,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -568,6 +575,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/MonkeyMadness.vue b/src/pages/GameZone/GameZoneList/MonkeyMadness.vue
index 5d6008fc..726d4b59 100644
--- a/src/pages/GameZone/GameZoneList/MonkeyMadness.vue
+++ b/src/pages/GameZone/GameZoneList/MonkeyMadness.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -264,6 +270,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -563,6 +570,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/MultiplicationMadness.vue b/src/pages/GameZone/GameZoneList/MultiplicationMadness.vue
index af61a2c3..c60d0e25 100644
--- a/src/pages/GameZone/GameZoneList/MultiplicationMadness.vue
+++ b/src/pages/GameZone/GameZoneList/MultiplicationMadness.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -569,6 +576,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/OddOneOut.vue b/src/pages/GameZone/GameZoneList/OddOneOut.vue
index 47a3f214..33a909d3 100644
--- a/src/pages/GameZone/GameZoneList/OddOneOut.vue
+++ b/src/pages/GameZone/GameZoneList/OddOneOut.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -267,6 +273,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -560,6 +567,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/PartOfSpeech.vue b/src/pages/GameZone/GameZoneList/PartOfSpeech.vue
index 99bf044c..2adf0249 100644
--- a/src/pages/GameZone/GameZoneList/PartOfSpeech.vue
+++ b/src/pages/GameZone/GameZoneList/PartOfSpeech.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -558,6 +565,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/PolarPairing.vue b/src/pages/GameZone/GameZoneList/PolarPairing.vue
index 8456b22f..d93d2365 100644
--- a/src/pages/GameZone/GameZoneList/PolarPairing.vue
+++ b/src/pages/GameZone/GameZoneList/PolarPairing.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -267,6 +273,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -562,6 +569,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/ShapeShark.vue b/src/pages/GameZone/GameZoneList/ShapeShark.vue
index 051126bc..d46e3f40 100644
--- a/src/pages/GameZone/GameZoneList/ShapeShark.vue
+++ b/src/pages/GameZone/GameZoneList/ShapeShark.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -563,6 +570,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/SpellingBee.vue b/src/pages/GameZone/GameZoneList/SpellingBee.vue
index f322341d..475794a5 100644
--- a/src/pages/GameZone/GameZoneList/SpellingBee.vue
+++ b/src/pages/GameZone/GameZoneList/SpellingBee.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -273,6 +279,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -566,6 +573,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/SubtractionGame.vue b/src/pages/GameZone/GameZoneList/SubtractionGame.vue
index 389a55e1..5d4f7fda 100644
--- a/src/pages/GameZone/GameZoneList/SubtractionGame.vue
+++ b/src/pages/GameZone/GameZoneList/SubtractionGame.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -567,6 +574,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/SyllableSorting.vue b/src/pages/GameZone/GameZoneList/SyllableSorting.vue
index 876d6d65..f26efbde 100644
--- a/src/pages/GameZone/GameZoneList/SyllableSorting.vue
+++ b/src/pages/GameZone/GameZoneList/SyllableSorting.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -266,6 +272,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -563,6 +570,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/GameZone/GameZoneList/Vocab.vue b/src/pages/GameZone/GameZoneList/Vocab.vue
index 9e683da5..b1b80b96 100644
--- a/src/pages/GameZone/GameZoneList/Vocab.vue
+++ b/src/pages/GameZone/GameZoneList/Vocab.vue
@@ -5,6 +5,12 @@
       <GamePagesHeader />
     </div>
 
+    <!-- Something Not Working? Button -->
+    <GamePagesFooter
+      :handleSthNotWorkingButtonClick="handleSthNotWorkingButtonClick"
+      :currentAudios="currentAudios"
+    />
+
     <!-- Decorative Elements -->
     <div
       class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none"
@@ -267,6 +273,7 @@
 // 1. Imports
 import { onMounted, onUnmounted, ref, watch, computed } from "vue";
 import GamePagesHeader from "../../Header/GamePagesHeader.vue";
+import GamePagesFooter from "../../Footer/GamePagesFooter.vue"
 import { requestMicPermission } from "../../../Utilities/requestMicAccess";
 import {
   playIntro,
@@ -559,6 +566,17 @@ const startFirstQuestion = () => {
   playNextQuestion();
 };
 
+/**
+ * Handles the something not working button click
+ */
+ const handleSthNotWorkingButtonClick = () => {
+  console.log("Navigating to Troubleshooting Page...");
+  // Stop all audio playback before navigating away
+  stopAudios(currentAudios);
+  // Force navigate to the game zone page
+  window.location.href = "/troubleshooting";
+};
+
 // 8. Exposed Values
 // (none exposed in this component)
 </script>
diff --git a/src/pages/Troubleshooting/Troubleshooting.vue b/src/pages/Troubleshooting/Troubleshooting.vue
new file mode 100644
index 00000000..7d4af126
--- /dev/null
+++ b/src/pages/Troubleshooting/Troubleshooting.vue
@@ -0,0 +1,77 @@
+<script setup>
+// Components
+import ScrollUpButton from "../../components/ScrollUpButton/ScrollUpButton.vue";
+import Header from "../../components/Header/Header.vue";
+import Footer from "../../components/Footer/Footer.vue";
+import troubleshootingData from "../../../public/assets/troubleshootingDB/troubleshooting.json"
+
+const openImageInNewTab = (imageSrc, imageName) => {
+  const newTab = window.open();
+  newTab.document.body.innerHTML = `<img src="${imageSrc}" style="width:70%; height:auto;"/>`;
+  newTab.document.title = `image: ${imageName}`;
+};
+</script>
+
+<template>
+    <ScrollUpButton />
+
+    <div class="px-20 relative" ref="content">
+        <Header :logoPath="'/assets/images/header/header-logo-2.png'"/>
+    </div>
+
+    <div
+        class="relative flex flex-col items-start justify-center mobile:justify-center w-full h-[10%] mt-[2rem] px-[8rem] mb-16 tablet:mb-[265px] mobile:mb-[129px]"
+    >
+        <!-- HEADER -->
+        <div class="max-w-[519px]">
+            <h2
+                class="text-left font-poppins text-4.5xl tablet:text-[32px] mobile:text-[24px] mobile:text-center font-[400] mobile:ml-0"
+            >
+                Troubleshooting Page
+            </h2>
+        </div>
+
+        <!-- QUESTIONS -->
+        <div
+            class="flex flex-col w-full items-start justify-start mt-3 tablet:mb-[265px] mobile:mb-[129px]"
+        >
+            <!-- Loop through issues dynamically -->
+            <div
+                v-for="(issue, index) in troubleshootingData.issues"
+                :key="index"
+                class="w-full mb-6 mt-2 p-10 border-8 rounded-lg"
+            >
+                <h3 class="text-3xl font-semibold mb-4 text-[#087BB4] flex items-center gap-2">
+                    <img
+                        src="/public/assets/images/troubleshooting/alert.png"
+                        alt="Icon" 
+                        class="w-6 h-6" 
+                    />
+                    {{ issue.name }}
+                </h3>
+
+                <!-- Loop through the body items (titles, text, and images) -->
+                <div v-for="(item, idx) in issue.body" :key="idx">
+                    <!-- Title -->
+                    <h4 v-if="item.type === 'title'" class="text-2xl font-semibold mt-8 mb-2">{{ item.content }}</h4>
+
+                    <!-- Text -->
+                    <p v-if="item.type === 'text'" class="text-body text-lg font-poppins leading-8 mb-4">
+                        {{ item.content }}
+                    </p>
+
+                    <!-- Image -->
+                    <img
+                        v-if="item.type === 'image'"
+                        :src="item.path"
+                        :alt="item.caption"
+                        class="w-[504px] mb-4"
+                        @click="openImageInNewTab(item.path, item.caption)"
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <Footer />
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index fc29816d..d6d63bcd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,6 +13,7 @@ import ResetConfirm from "../pages/ResetPassword/ResetConfirm.vue";
 import ResetLandingPage from "../pages/ResetPassword/ResetLandingPage.vue";
 import AboutUs from "../pages/AboutUs/AboutUs.vue";
 import Impact from "../pages/Impact/Impact.vue";
+import Troubleshooting from "../pages/Troubleshooting/Troubleshooting.vue"
 // import SpellingBee from "../pages/GameZone/GameZoneList/SpellingBee/SpellingBee.vue";
 
 const routes = [
@@ -30,6 +31,7 @@ const routes = [
     { path: "/reset-confirm", name: "Reset Confirm", component: ResetConfirm },
     { path: "/reset-landing-page", name: "Reset Landing Page", component: ResetLandingPage },
     { path: "/:pathMatch(.*)*", name: "not-found", component: NotFound },
+    { path: "/troubleshooting", name: "Troubleshooting Page", component: Troubleshooting },
     {
         path: "/game/addition",
         name: "AdditionGame",