diff --git a/public/js/components/language-selector.js b/public/js/components/language-selector.js
index e7ea27b5..c8b7c61a 100644
--- a/public/js/components/language-selector.js
+++ b/public/js/components/language-selector.js
@@ -18,51 +18,47 @@
     const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
 
     const selectorHTML = `
-      <div class="language-selector">
-        <!-- Desktop: Dropdown with text (md and up) -->
-        <div class="hidden md:block md:relative">
-          <label for="language-selector-desktop" class="sr-only">Select Language</label>
-          <select
-            id="language-selector-desktop"
-            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"
-            aria-label="Select language"
-          >
-            ${supportedLanguages.map(lang => `
-              <option
-                value="${lang.code}"
-                ${lang.code === currentLang ? 'selected' : ''}
-                ${lang.disabled ? 'disabled' : ''}
-              >
-                ${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
-              </option>
-            `).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">
-              <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>
+      <!-- Desktop: Dropdown with text (md and up) - Hidden on mobile, Block on desktop -->
+      <div class="hidden md:flex md:relative">
+        <label for="language-selector-desktop" class="sr-only">Select Language</label>
+        <select
+          id="language-selector-desktop"
+          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"
+          aria-label="Select language"
+        >
+          ${supportedLanguages.map(lang => `
+            <option
+              value="${lang.code}"
+              ${lang.code === currentLang ? 'selected' : ''}
+              ${lang.disabled ? 'disabled' : ''}
+            >
+              ${lang.flag} ${lang.name}${lang.disabled ? ' (Planned)' : ''}
+            </option>
+          `).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">
+            <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>
 
-        <!-- Mobile: Icon buttons (below md) -->
-        <div class="md:hidden">
-          <div class="flex gap-1">
-            ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
-              <button
-                data-lang="${lang.code}"
-                class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
-                  lang.code === currentLang
-                    ? 'border-blue-600 bg-blue-50'
-                    : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
-                }"
-                aria-label="Switch to ${lang.name}"
-                title="${lang.name}"
-              >
-                <span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
-              </button>
-            `).join('')}
-          </div>
-        </div>
+      <!-- Mobile: Icon buttons (below md) - Flex on mobile, Hidden on desktop -->
+      <div class="flex gap-1 md:hidden">
+        ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
+          <button
+            data-lang="${lang.code}"
+            class="language-icon-btn w-11 h-11 flex items-center justify-center rounded-lg border-2 transition-all ${
+              lang.code === currentLang
+                ? 'border-blue-600 bg-blue-50'
+                : 'border-gray-300 bg-white hover:border-blue-400 hover:bg-blue-50'
+            }"
+            aria-label="Switch to ${lang.name}"
+            title="${lang.name}"
+          >
+            <span class="text-2xl" role="img" aria-label="${lang.name} flag">${lang.flag}</span>
+          </button>
+        `).join('')}
       </div>
     `;