diff --git a/Frontend-Learner/components/common/LanguageSwitcher.vue b/Frontend-Learner/components/common/LanguageSwitcher.vue
index 366cae3a..02c908f2 100644
--- a/Frontend-Learner/components/common/LanguageSwitcher.vue
+++ b/Frontend-Learner/components/common/LanguageSwitcher.vue
@@ -43,9 +43,15 @@ const changeLocale = async (code: string) => {
       anchor="bottom right"
       self="top right"
       class="language-menu"
+      :offset="[0, 8]"
     >
-      <q-list style="min-width: 180px">
-        <q-item-label header class="text-xs font-bold uppercase tracking-wider" style="color: var(--text-secondary);">
+      <q-list style="min-width: 180px" class="py-1">
+        <q-item-label 
+          header 
+          class="text-xs font-black uppercase tracking-wider mb-1 px-4 pt-3"
+          style="color: var(--text-secondary)"
+          :class="['text-slate-600', 'dark:text-slate-400']"
+        >
           {{ $t('language.label') }}
         </q-item-label>
         
@@ -55,26 +61,51 @@ const changeLocale = async (code: string) => {
           clickable
           v-close-popup
           @click="changeLocale(loc.code)"
-          :class="{ 'active-locale': locale === loc.code }"
-          class="language-item"
+          class="language-item mx-2 mb-1 rounded-lg transition-colors duration-200"
+          :class="[
+            locale === loc.code 
+              ? 'bg-blue-50 dark:bg-blue-900/20' 
+              : 'hover:bg-slate-50 dark:hover:bg-slate-800'
+          ]"
         >
-          <q-item-section avatar>
+          <q-item-section avatar style="min-width: 0; padding-right: 12px;">
             <img 
               :src="getFlagPath(loc.code)" 
               :alt="loc.code.toUpperCase()" 
               class="flag-icon-menu"
             />
           </q-item-section>
+          
           <q-item-section>
-            <q-item-label class="font-semibold" style="color: var(--text-primary);">
+            <q-item-label 
+              class="font-bold text-sm"
+              :class="[
+                locale === loc.code 
+                  ? 'text-blue-700 dark:text-blue-300' 
+                  : 'text-slate-900 dark:text-slate-100'
+              ]"
+            >
               {{ loc.name }}
             </q-item-label>
-            <q-item-label caption style="color: var(--text-secondary);">
+            <q-item-label 
+              caption 
+              class="text-xs font-medium mt-0.5"
+              :class="[
+                locale === loc.code 
+                  ? 'text-blue-600/80 dark:text-blue-300/70' 
+                  : 'text-slate-500 dark:text-slate-400'
+              ]"
+            >
               {{ loc.code.toUpperCase() }}
             </q-item-label>
           </q-item-section>
+          
           <q-item-section side v-if="locale === loc.code">
-            <q-icon name="check" color="primary" />
+            <q-icon 
+              name="check" 
+              size="18px"
+              :class="['text-blue-700', 'dark:text-blue-300']" 
+            />
           </q-item-section>
         </q-item>
       </q-list>
diff --git a/Frontend-Learner/nuxt.config.ts b/Frontend-Learner/nuxt.config.ts
index 365b66f7..5bc02e87 100644
--- a/Frontend-Learner/nuxt.config.ts
+++ b/Frontend-Learner/nuxt.config.ts
@@ -7,11 +7,11 @@ export default defineNuxtConfig({
   i18n: {
     strategy: 'no_prefix',
     defaultLocale: 'th',
+    langDir: 'locales',
     locales: [
-      { code: 'th', name: 'ไทย', iso: 'th-TH' },
-      { code: 'en', name: 'English', iso: 'en-US' }
+      { code: 'th', name: 'ไทย', iso: 'th-TH', file: 'th.json' },
+      { code: 'en', name: 'English', iso: 'en-US', file: 'en.json' }
     ],
-    vueI18n: './i18n.config.ts',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected',