diff --git a/WebUI/electron/electron-env.d.ts b/WebUI/electron/electron-env.d.ts
index aa5a7a34..e31b4d21 100644
--- a/WebUI/electron/electron-env.d.ts
+++ b/WebUI/electron/electron-env.d.ts
@@ -42,6 +42,7 @@ type LocalSettings = {
 
 type ThemeSettings = {
   availableThemes: Theme[];
+  currentTheme: Theme;
 };
 
 type ModelPaths = {
diff --git a/WebUI/external/settings-dev.json b/WebUI/external/settings-dev.json
index 9981cda3..c93ef73e 100644
--- a/WebUI/external/settings-dev.json
+++ b/WebUI/external/settings-dev.json
@@ -2,5 +2,6 @@
     "envType": "arc",
     "debug":1,
     "port":56789,
-    "availableThemes": ["dark","lnl"]
+    "availableThemes": ["dark","lnl"],
+    "currentTheme": "lnl"
 }
\ No newline at end of file
diff --git a/WebUI/src/assets/js/store/i18n.ts b/WebUI/src/assets/js/store/i18n.ts
index b58225d9..54edc964 100644
--- a/WebUI/src/assets/js/store/i18n.ts
+++ b/WebUI/src/assets/js/store/i18n.ts
@@ -1,13 +1,15 @@
 import { defineStore } from "pinia";
 
 export const useI18N = defineStore("i18n", () => {
+  
   const langName = ref("en_US");
+  const currentLanguageName = ref("English");
   const state = reactive<StringKV>({
   });
 
   async function init() {
     const language = localStorage.getItem("language");
-    if (language == "zh_CN" || language == "en_US") {
+    if (language == "zh_CN" || language == "en_US" || language == "ko_KR") {
       await switchLanguage(language);
     } else {
       await initFromLocal();
@@ -19,24 +21,57 @@ export const useI18N = defineStore("i18n", () => {
     return switchLanguage(navigator.language == "zh-CN" ? "zh_CN" : "en_US");
   }
 
+  function changeLanguage(value: any, index: number) { 
+    switchLanguage(value.value)
+  } 
+
   function updateLanguageRecord(record: Record<string, string>) {
     Object.keys(record).forEach((key) => {
       state[key] = record[key];
     });
     document.title = state.MAIN_TITLE;
   }
+ 
+  const languageOptions = ref([
+    { value: 'en_US', name: state.SETTINGS_BASIC_LANGUAGE_EN },
+    { value: 'zh_CN', name: state.SETTINGS_BASIC_LANGUAGE_ZH },
+    { value: 'ko_KR', name: state.SETTINGS_BASIC_LANGUAGE_KO },
+  ])
+
+  const currentLanguageDict = ref<StringKV>({
+    "en_US": state.SETTINGS_BASIC_LANGUAGE_EN,
+    "zh_CN": state.SETTINGS_BASIC_LANGUAGE_ZH,
+    "ko_KR": state.SETTINGS_BASIC_LANGUAGE_KO,
+  });
+
+  async function updateLanguageNames(lang: string) {
+    currentLanguageDict.value["en_US"] = state.SETTINGS_BASIC_LANGUAGE_EN;
+    currentLanguageDict.value["zh_CN"] = state.SETTINGS_BASIC_LANGUAGE_ZH;
+    currentLanguageDict.value["ko_KR"] = state.SETTINGS_BASIC_LANGUAGE_KO;
+    currentLanguageName.value = currentLanguageDict.value[lang];
+    languageOptions.value = languageOptions.value.map((item) => {
+      item.name = currentLanguageDict.value[item.value];
+      return item;
+    });
+  }
 
   async function switchLanguage(lang: string) {
     const languageRecords = await import(`../../i18n/${lang}.json`);
     updateLanguageRecord(languageRecords);
     langName.value = lang;
     localStorage.setItem("language", lang);
+    updateLanguageNames(lang);
   }
 
   return {
     state,
     langName,
+    languageOptions,
+    currentLanguageName,
     init,
     switchLanguage,
+    changeLanguage,
   };
+
+
 });
\ No newline at end of file
diff --git a/WebUI/src/assets/js/store/theme.ts b/WebUI/src/assets/js/store/theme.ts
index cb36fffc..be963eb1 100644
--- a/WebUI/src/assets/js/store/theme.ts
+++ b/WebUI/src/assets/js/store/theme.ts
@@ -9,6 +9,7 @@ export const useTheme = defineStore("theme", () => {
     window.electronAPI.getThemeSettings().then((themeSettings) => {
         const themesFromSettings = themeSettings.availableThemes.filter(t => knownThemes.includes(t));
         if (themesFromSettings.length > 0) availableThemes.value = themesFromSettings;
+        if (knownThemes.includes(themeSettings.currentTheme)) selected.value = themeSettings.currentTheme;
     });
 
     return {
diff --git a/WebUI/src/views/AppSettings.vue b/WebUI/src/views/AppSettings.vue
index ec158c50..150d61ec 100644
--- a/WebUI/src/views/AppSettings.vue
+++ b/WebUI/src/views/AppSettings.vue
@@ -42,21 +42,20 @@
             <div class="px-3 flex-none flex flex-col gap-3">
                 <div class="flex flex-col gap-2">
                     <p>{{ languages.SETTINGS_BASIC_LANGUAGE }}</p>
-                    <div class="grid grid-cols-2 gap-2">
-                        <radio-bolck :checked="i18n.langName == 'en_US'" :text="languages.SETTINGS_BASIC_LANGUAGE_EN"
-                            @click="() => { i18n.switchLanguage('en_US') }"></radio-bolck>
-                        <radio-bolck :checked="i18n.langName == 'zh_CN'" :text="languages.SETTINGS_BASIC_LANGUAGE_ZH"
-                            @click="() => { i18n.switchLanguage('zh_CN') }"></radio-bolck>
-                        <radio-bolck :checked="i18n.langName == 'ko_KR'" :text="languages.SETTINGS_BASIC_LANGUAGE_KO"
-                            @click="() => { i18n.switchLanguage('ko_KR') }"></radio-bolck>
-                    </div>
-                </div>
-                <div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
-                    <p>Theme</p>
-                    <div class="grid grid-cols-2 gap-2">
-                        <radio-bolck class="uppercase" v-for="themeName in theme.availableThemes" :checked="theme.active === themeName" :text="themeName"
-                            @click="() => theme.selected = themeName"></radio-bolck>
-                    </div>
+                    <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
+                        <template #selected>
+                            <div class="flex gap-2 items-center">
+                                <span class="rounded-full bg-green-500 w-2 h-2"></span>
+                                <span>{{ i18n.currentLanguageName }}</span>
+                            </div>
+                        </template>
+                        <template #list="slotItem">
+                            <div class="flex gap-2 items-center">
+                                <span class="rounded-full bg-green-500 w-2 h-2"></span>
+                                <span>{{ slotItem.item.name }}</span>
+                            </div>
+                        </template>
+                    </drop-selector>
                 </div>
                 <div class="flex flex-col gap-2">
                     <p>{{ languages.SETTINGS_INFERENCE_DEVICE }}</p>