diff --git a/_locales/cmn-SC.yml b/_locales/cmn-CN.yml
similarity index 97%
rename from _locales/cmn-SC.yml
rename to _locales/cmn-CN.yml
index ccf84ac3..f584074a 100644
--- a/_locales/cmn-SC.yml
+++ b/_locales/cmn-CN.yml
@@ -103,8 +103,8 @@ settings:
   select_language: 界面语文
   select_language_opt:
     english: 英文
-    mandarin_sc: 简体中文
-    mandarin_tc: 正體中文
+    Mandarin_CN: 简体中文
+    Mandarin_TW: 正體中文
     jyut: 粵文
   authorize_app: 授权 BewlyBewly 使用 access key
   authorize_app_desc: >
diff --git a/_locales/cmn-TC.yml b/_locales/cmn-TW.yml
similarity index 97%
rename from _locales/cmn-TC.yml
rename to _locales/cmn-TW.yml
index 85de9789..f9a7e745 100644
--- a/_locales/cmn-TC.yml
+++ b/_locales/cmn-TW.yml
@@ -97,8 +97,8 @@ settings:
   select_language: 介面語文
   select_language_opt:
     english: 英文
-    mandarin_sc: 簡體中文
-    mandarin_tc: 正體中文
+    Mandarin_CN: 簡體中文
+    Mandarin_TW: 正體中文
     jyut: 粵文
   authorize_app: 授權 BewlyBewly 使用 access key
   authorize_app_desc: >
diff --git a/_locales/en.yml b/_locales/en.yml
index 3904beb5..1c6b223d 100644
--- a/_locales/en.yml
+++ b/_locales/en.yml
@@ -103,8 +103,8 @@ settings:
   select_language: Language
   select_language_opt:
     english: English
-    mandarin_sc: Mandarin (Simplified Chinese)
-    mandarin_tc: Mandarin (Traditional Chinese)
+    Mandarin_CN: Mandarin (Simplified Chinese)
+    Mandarin_TW: Mandarin (Traditional Chinese)
     jyut: Cantonese
   authorize_app: Authorize BewlyBewly to use access key
   authorize_app_desc: >
diff --git a/_locales/jyut.yml b/_locales/jyut.yml
index 65853e4b..6df66410 100644
--- a/_locales/jyut.yml
+++ b/_locales/jyut.yml
@@ -103,8 +103,8 @@ settings:
   select_language: 介面語文
   select_language_opt:
     english: 英文
-    mandarin_sc: 簡體中文
-    mandarin_tc: 正體中文
+    Mandarin_CN: 簡體中文
+    Mandarin_TW: 正體中文
     jyut: 粵文
   authorize_app: 授權 BewlyBewly 使用 access key
   authorize_app_desc: >
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index c1f6e6b5..e202daf1 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -15,12 +15,12 @@ export default defineComponent({
           label: this.$t('settings.select_language_opt.english'),
         },
         {
-          value: 'cmn-SC',
-          label: this.$t('settings.select_language_opt.mandarin_sc'),
+          value: 'cmn-CN',
+          label: this.$t('settings.select_language_opt.Mandarin_CN'),
         },
         {
-          value: 'cmn-TC',
-          label: this.$t('settings.select_language_opt.mandarin_tc'),
+          value: 'cmn-TW',
+          label: this.$t('settings.select_language_opt.Mandarin_TW'),
         },
         {
           value: 'jyut',
@@ -84,7 +84,7 @@ export default defineComponent({
       />
     </div>
 
-    <div class="settings-item">
+    <!-- <div class="settings-item">
       <div>
         {{ $t('settings.authorize_app') }}
         <br>
@@ -101,7 +101,7 @@ export default defineComponent({
       <button v-else class="line-btn" @click="onRevoke">
         <span>{{ $t('settings.btn.revoke') }}</span>
       </button>
-    </div>
+    </div> -->
 
     <div class="settings-item">
       <div>
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 113427f2..022d8646 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -1,47 +1,50 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
 import 'uno.css'
-import { apperance, isShowTopbar } from '~/logic/storage'
+import { useI18n } from 'vue-i18n'
+import browser from 'webextension-polyfill'
+import Home from './Home/Home.vue'
+import { isShowTopbar } from '~/logic/storage'
 import { language } from '~/logic'
 import '~/styles/index.ts'
-import Home from './home/Home.vue'
-
-// const [show, toggle] = useToggle(false)
+import { LanguageType } from '~/enums/appEnums'
 
+const { locale } = useI18n()
 const [showSettings, toggle] = useToggle(false)
 const isDark = useDark()
 const toggleDark = useToggle(isDark)
+
+window.onload = async () => {
+  // if there is first-time load extension, set the default language by browser display language
+  if (!language.value) {
+    if (browser.i18n.getUILanguage() === 'zh-CN') {
+      language.value = LanguageType.Mandarin_CN
+    }
+    else if (browser.i18n.getUILanguage() === 'zh-TW') {
+      // Since getUILanguage() cannot get the zh-HK language code
+      // use getAcceptLanguages() to get the language code
+      const languages: string[] = await browser.i18n.getAcceptLanguages()
+      if (languages.includes('zh-HK'))
+        language.value = LanguageType.Cantonese
+      else language.value = LanguageType.Mandarin_TW
+    }
+    else {
+      language.value = LanguageType.English
+    }
+  }
+
+  locale.value = language.value
+}
 </script>
 
 <template>
-  <!-- <div class="fixed right-0 bottom-0 m-5 z-100 flex font-sans select-none leading-1em">
-    <div
-      class="bg-white text-gray-800 rounded-full shadow w-max h-min"
-      p="x-4 y-2"
-      m="y-auto r-2"
-      transition="opacity duration-300"
-      :class="show ? 'opacity-100' : 'opacity-0'"
-    >
-      Vitesse WebExt 323143214214
-    </div>
-    <div
-      class="flex w-10 h-10 rounded-full shadow cursor-pointer"
-      bg="teal-600 hover:teal-700"
-      @click="toggle()"
-    >
-      <pixelarticons-power class="block m-auto text-white text-lg" />
-    </div>
-  </div> -->
   <Transition>
     <Topbar v-show="isShowTopbar" class="fixed z-50" />
   </Transition>
   <!-- is home page -->
   <Home />
   <!-- button -->
-  <div
-    flex="~ col"
-    pos="fixed bottom-5 lg:right-5 <lg:right-3"
-  >
+  <div flex="~ col" pos="fixed bottom-5 lg:right-5 <lg:right-3">
     <button
       class="transform active:scale-90"
       w="lg:45px <lg:40px"
@@ -53,7 +56,10 @@ const toggleDark = useToggle(isDark)
       font="leading-0"
       duration="300"
       rounded="$bew-radius"
-      style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
+      style="
+        box-shadow: var(--bew-shadow-2);
+        backdrop-filter: var(--bew-filter-glass);
+      "
       @click="toggleDark()"
     >
       <tabler:moon-stars v-if="isDark" />
@@ -70,7 +76,10 @@ const toggleDark = useToggle(isDark)
       font="leading-0"
       duration="300"
       rounded="$bew-radius"
-      style="box-shadow: var(--bew-shadow-2); backdrop-filter: var(--bew-filter-glass);"
+      style="
+        box-shadow: var(--bew-shadow-2);
+        backdrop-filter: var(--bew-filter-glass);
+      "
       @click="toggle()"
     >
       <tabler:settings />
diff --git a/src/enums/appEnums.ts b/src/enums/appEnums.ts
index f1600538..d3044f89 100644
--- a/src/enums/appEnums.ts
+++ b/src/enums/appEnums.ts
@@ -1,6 +1,6 @@
 export enum LanguageType {
   English = 'en',
-  Mandarin_SC = 'cmn-SC',
-  Mandarin_TC = 'cmn-TC',
+  Mandarin_CN = 'cmn-CN',
+  Mandarin_TW = 'cmn-TW',
   Cantonese = 'jyut',
 }
diff --git a/src/utils/dataFormatter.ts b/src/utils/dataFormatter.ts
index ed31ed19..5b5f26f4 100644
--- a/src/utils/dataFormatter.ts
+++ b/src/utils/dataFormatter.ts
@@ -13,7 +13,7 @@ export const numFormatter = (num: number) => {
       { value: 1e9, symbol: 'B' },
     ]
   }
-  else if (language.value === 'cmn-SC') {
+  else if (language.value === 'cmn-CN') {
     lookup = [
       { value: 1, symbol: ' ' },
       { value: 1e4, symbol: ' 万' },