diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js
index 7fda9f1e..33474c80 100644
--- a/public/js/components/language-selector.js
+++ b/public/js/components/language-selector.js
@@ -1,6 +1,7 @@
 /**
  * Language Selector Component
- * Creates a dropdown for switching between supported languages
+ * Mobile: Icon-only buttons (flags)
+ * Desktop: Dropdown with full language names
  */
 
 (function() {
@@ -10,24 +11,22 @@
     { code: 'fr', name: 'Français', flag: '🇫🇷' },
     { code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Coming when system is complete' }
   ];
-  
-  function createLanguageSelector() {
-    const container = document.getElementById('language-selector-container');
-    if (!container) return;
-    
-    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
-    
-    const selectorHTML = `
-      <div class="language-selector relative inline-block">
-        <label for="language-selector" class="sr-only">Select Language</label>
-        <select 
-          id="language-selector"
-          class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
+
+  /**
+   * Create desktop dropdown selector (with text)
+   */
+  function createDesktopSelector(currentLang) {
+    return `
+      <div class="language-selector-desktop hidden md:block relative">
+        <label for="language-selector-dropdown" class="sr-only">Select Language</label>
+        <select
+          id="language-selector-dropdown"
+          class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none hover:border-gray-400 transition"
           aria-label="Select language"
         >
           ${supportedLanguages.map(lang => `
-            <option 
-              value="${lang.code}" 
+            <option
+              value="${lang.code}"
               ${lang.code === currentLang ? 'selected' : ''}
               ${lang.disabled ? 'disabled' : ''}
             >
@@ -36,29 +35,180 @@
           `).join('')}
         </select>
         <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
             <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>
         </div>
       </div>
     `;
-    
+  }
+
+  /**
+   * Create mobile icon-only selector
+   */
+  function createMobileSelector(currentLang) {
+    return `
+      <div class="language-selector-mobile md:hidden flex items-center gap-1" role="group" aria-label="Language selection">
+        ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
+          <button
+            class="language-btn w-11 h-11 rounded-lg flex items-center justify-center text-2xl transition-all duration-200 ${
+              lang.code === currentLang
+                ? 'bg-blue-100 ring-2 ring-blue-500'
+                : 'bg-white hover:bg-gray-100 border border-gray-300'
+            }"
+            data-lang="${lang.code}"
+            aria-label="Switch to ${lang.name}"
+            aria-pressed="${lang.code === currentLang}"
+            title="${lang.name}"
+          >
+            ${lang.flag}
+          </button>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  /**
+   * Create mobile menu language selector (inside drawer)
+   */
+  function createMobileMenuSelector(currentLang) {
+    const container = document.getElementById('mobile-menu-language-selector');
+    if (!container) return;
+
+    const selectorHTML = `
+      <div class="border-b border-gray-200 pb-3 mb-3">
+        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Language</p>
+        <div class="space-y-1">
+          ${supportedLanguages.map(lang => `
+            <button
+              class="mobile-menu-lang-btn w-full px-3 py-2.5 text-left rounded-lg transition font-medium flex items-center gap-3 ${
+                lang.code === currentLang
+                  ? 'bg-blue-50 text-blue-700'
+                  : 'text-gray-700 hover:bg-gray-50'
+              } ${lang.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+              data-lang="${lang.code}"
+              ${lang.disabled ? 'disabled' : ''}
+              aria-label="Switch to ${lang.name}"
+            >
+              <span class="text-2xl">${lang.flag}</span>
+              <span class="text-sm flex-1">${lang.name}</span>
+              ${lang.code === currentLang ? '<span class="text-xs text-blue-600">✓</span>' : ''}
+              ${lang.disabled ? '<span class="text-xs text-gray-400">(Coming Soon)</span>' : ''}
+            </button>
+          `).join('')}
+        </div>
+      </div>
+    `;
+
     container.innerHTML = selectorHTML;
-    
-    // Add change event listener
-    const selector = document.getElementById('language-selector');
-    if (selector && window.I18n) {
-      selector.addEventListener('change', function(e) {
+
+    // Attach event listeners for mobile menu buttons
+    document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => {
+      if (!btn.disabled) {
+        btn.addEventListener('click', function(e) {
+          const selectedLang = this.getAttribute('data-lang');
+          if (window.I18n && selectedLang) {
+            window.I18n.setLanguage(selectedLang);
+            // Close mobile menu after selection
+            const mobileMenu = document.getElementById('mobile-menu');
+            if (mobileMenu) {
+              mobileMenu.classList.add('hidden');
+              document.body.style.overflow = '';
+            }
+          }
+        });
+      }
+    });
+  }
+
+  /**
+   * Initialize language selector
+   */
+  function createLanguageSelector() {
+    const container = document.getElementById('language-selector-container');
+    if (!container) return;
+
+    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
+
+    // Create both mobile and desktop versions
+    const combinedHTML = createMobileSelector(currentLang) + createDesktopSelector(currentLang);
+    container.innerHTML = combinedHTML;
+
+    // Attach event listener for desktop dropdown
+    const desktopDropdown = document.getElementById('language-selector-dropdown');
+    if (desktopDropdown && window.I18n) {
+      desktopDropdown.addEventListener('change', function(e) {
         const selectedLang = e.target.value;
         window.I18n.setLanguage(selectedLang);
       });
     }
+
+    // Attach event listeners for mobile icon buttons
+    document.querySelectorAll('.language-btn').forEach(btn => {
+      btn.addEventListener('click', function(e) {
+        const selectedLang = this.getAttribute('data-lang');
+        if (window.I18n && selectedLang) {
+          window.I18n.setLanguage(selectedLang);
+        }
+      });
+    });
+
+    // Initialize mobile menu language selector (if container exists)
+    createMobileMenuSelector(currentLang);
   }
-  
+
+  /**
+   * Update UI when language changes
+   */
+  function updateLanguageUI(newLang) {
+    // Update mobile icon buttons
+    document.querySelectorAll('.language-btn').forEach(btn => {
+      const lang = btn.getAttribute('data-lang');
+      if (lang === newLang) {
+        btn.classList.add('bg-blue-100', 'ring-2', 'ring-blue-500');
+        btn.classList.remove('bg-white', 'border', 'border-gray-300');
+        btn.setAttribute('aria-pressed', 'true');
+      } else {
+        btn.classList.remove('bg-blue-100', 'ring-2', 'ring-blue-500');
+        btn.classList.add('bg-white', 'border', 'border-gray-300');
+        btn.setAttribute('aria-pressed', 'false');
+      }
+    });
+
+    // Update desktop dropdown
+    const dropdown = document.getElementById('language-selector-dropdown');
+    if (dropdown) {
+      dropdown.value = newLang;
+    }
+
+    // Update mobile menu buttons
+    document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => {
+      const lang = btn.getAttribute('data-lang');
+      if (lang === newLang) {
+        btn.classList.add('bg-blue-50', 'text-blue-700');
+        btn.classList.remove('text-gray-700', 'hover:bg-gray-50');
+      } else {
+        btn.classList.remove('bg-blue-50', 'text-blue-700');
+        btn.classList.add('text-gray-700', 'hover:bg-gray-50');
+      }
+    });
+  }
+
+  // Listen for language change events
+  window.addEventListener('languageChanged', function(e) {
+    if (e.detail && e.detail.language) {
+      updateLanguageUI(e.detail.language);
+    }
+  });
+
   // Initialize when DOM is ready
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', createLanguageSelector);
   } else {
     createLanguageSelector();
   }
+
+  // Re-initialize when mobile menu is rendered (if needed)
+  window.addEventListener('mobileMenuRendered', createLanguageSelector);
+
 })();
diff --git a/public/js/components/navbar.js b/public/js/components/navbar.js
index b00e700f..2db5d175 100644
--- a/public/js/components/navbar.js
+++ b/public/js/components/navbar.js
@@ -71,6 +71,9 @@ class TractatusNavbar {
               </button>
             </div>
             <nav class="p-5 space-y-3">
+              <!-- Language Selector in Mobile Menu -->
+              <div id="mobile-menu-language-selector"></div>
+
               <div class="pb-3 mb-3 border-b border-gray-200">
                 <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Audiences</p>
                 <a href="/researcher.html" class="block px-3 py-2.5 text-gray-700 hover:bg-blue-50 hover:text-blue-700 rounded-lg transition font-medium">
diff --git a/public/js/i18n-simple.js b/public/js/i18n-simple.js
index 6be6bb5f..c49c6139 100644
--- a/public/js/i18n-simple.js
+++ b/public/js/i18n-simple.js
@@ -118,7 +118,12 @@ const I18n = {
     
     // Update HTML lang attribute
     document.documentElement.lang = lang;
-    
+
+    // Dispatch event for language change
+    window.dispatchEvent(new CustomEvent('languageChanged', {
+      detail: { language: lang }
+    }));
+
     console.log(`[i18n] Language changed to: ${lang}`);
   },