diff --git a/webui/package.json b/webui/package.json
index 78b9a5d5..ab19d880 100644
--- a/webui/package.json
+++ b/webui/package.json
@@ -24,6 +24,7 @@
     "naive-ui": "^2.34.4",
     "pinia": "^2.1.3",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
     "vue-router": "^4.2.1"
   },
   "devDependencies": {
diff --git a/webui/pnpm-lock.yaml b/webui/pnpm-lock.yaml
index 85333c53..a26fb05d 100644
--- a/webui/pnpm-lock.yaml
+++ b/webui/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
   vue:
     specifier: ^3.3.4
     version: 3.3.4
+  vue-i18n:
+    specifier: ^9.2.2
+    version: 9.2.2(vue@3.3.4)
   vue-router:
     specifier: ^4.2.1
     version: 4.2.1(vue@3.3.4)
@@ -1844,6 +1847,44 @@ packages:
       - supports-color
     dev: true
 
+  /@intlify/core-base@9.2.2:
+    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/devtools-if': 9.2.2
+      '@intlify/message-compiler': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+    dev: false
+
+  /@intlify/devtools-if@9.2.2:
+    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+    dev: false
+
+  /@intlify/message-compiler@9.2.2:
+    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/shared': 9.2.2
+      source-map: 0.6.1
+    dev: false
+
+  /@intlify/shared@9.2.2:
+    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    engines: {node: '>= 14'}
+    dev: false
+
+  /@intlify/vue-devtools@9.2.2:
+    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    engines: {node: '>= 14'}
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+    dev: false
+
   /@istanbuljs/load-nyc-config@1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
     engines: {node: '>=8'}
@@ -8260,7 +8301,6 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
@@ -9232,6 +9272,19 @@ packages:
       - supports-color
     dev: true
 
+  /vue-i18n@9.2.2(vue@3.3.4):
+    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      vue: ^3.0.0
+    dependencies:
+      '@intlify/core-base': 9.2.2
+      '@intlify/shared': 9.2.2
+      '@intlify/vue-devtools': 9.2.2
+      '@vue/devtools-api': 6.5.0
+      vue: 3.3.4
+    dev: false
+
   /vue-inbrowser-compiler-independent-utils@4.71.1(vue@3.3.4):
     resolution: {integrity: sha512-K3wt3iVmNGaFEOUR4JIThQRWfqokxLfnPslD41FDZB2ajXp789+wCqJyGYlIFsvEQ2P61PInw6/ph5iiqg51gg==}
     peerDependencies:
diff --git a/webui/src/components/ab-add-bangumi.vue b/webui/src/components/ab-add-bangumi.vue
index 4b630e69..5b380ab7 100644
--- a/webui/src/components/ab-add-bangumi.vue
+++ b/webui/src/components/ab-add-bangumi.vue
@@ -111,22 +111,22 @@ async function subscribe() {
 </script>
 
 <template>
-  <ab-popup v-model:show="show" title="Add Bangumi" css="w-360px">
+  <ab-popup v-model:show="show" :title="$t('topbar.add.title')" css="w-360px">
     <div v-if="!analysis.next" space-y-12px>
       <ab-setting
         v-model:data="rss"
-        label="RSS Link"
+        :label="$t('topbar.add.rsslink')"
         type="input"
         :prop="{
-          placeholder: 'Please enter the RSS link',
+          placeholder: $t('topbar.add.placeholder'),
         }"
         :bottom-line="true"
       ></ab-setting>
 
       <div flex="~ justify-end">
-        <ab-button size="small" :loading="analysis.loading" @click="analyser"
-          >Analyse</ab-button
-        >
+        <ab-button size="small" :loading="analysis.loading" @click="analyser">{{
+          $t('topbar.add.analyse')
+        }}</ab-button>
       </div>
     </div>
 
diff --git a/webui/src/components/ab-change-account.vue b/webui/src/components/ab-change-account.vue
index c44f15e9..a685245e 100644
--- a/webui/src/components/ab-change-account.vue
+++ b/webui/src/components/ab-change-account.vue
@@ -7,22 +7,26 @@ const { user, update } = useAuth();
 </script>
 
 <template>
-  <ab-popup v-model:show="show" title="Change Account" css="w-365px">
+  <ab-popup
+    v-model:show="show"
+    :title="$t('topbar.profile.poptitle')"
+    css="w-365px"
+  >
     <div space-y-16px>
-      <ab-label label="Username">
+      <ab-label :label="$t('topbar.profile.username')">
         <input
           v-model="user.username"
           type="text"
-          placeholder="username"
+          :placeholder="$t('topbar.profile.username')"
           ab-input
         />
       </ab-label>
 
-      <ab-label label="Password">
+      <ab-label :label="$t('topbar.profile.password')">
         <input
           v-model="user.password"
           type="password"
-          placeholder="password"
+          :placeholder="$t('topbar.profile.password')"
           ab-input
         />
       </ab-label>
@@ -30,7 +34,9 @@ const { user, update } = useAuth();
       <div line></div>
 
       <div flex="~ justify-end">
-        <ab-button size="small" @click="update">Update</ab-button>
+        <ab-button size="small" @click="update">{{
+          $t('topbar.profile.updatebtn')
+        }}</ab-button>
       </div>
     </div>
   </ab-popup>
diff --git a/webui/src/components/ab-edit-rule.vue b/webui/src/components/ab-edit-rule.vue
index bdb5e6fe..0602cd3d 100644
--- a/webui/src/components/ab-edit-rule.vue
+++ b/webui/src/components/ab-edit-rule.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { BangumiRule } from '#/bangumi';
 
 const emit = defineEmits<{
@@ -10,7 +11,7 @@ const emit = defineEmits<{
     opts: { id: number; deleteFile: boolean }
   ): void;
 }>();
-
+const { t } = useI18n({ useScope: 'global' });
 const show = defineModel('show', { default: false });
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
@@ -52,9 +53,9 @@ function emitEnable() {
 
 const popupTitle = computed(() => {
   if (rule.value.deleted) {
-    return 'Enable Rule';
+    return t('homepage.rule.enablerule');
   } else {
-    return 'Edit Rule';
+    return t('homepage.rule.editrule');
   }
 });
 
@@ -70,15 +71,17 @@ const boxSize = computed(() => {
 <template>
   <ab-popup v-model:show="show" :title="popupTitle" :css="boxSize">
     <div v-if="rule.deleted">
-      <div>Do you want to enable this rule?</div>
+      <div>{{ $t('homepage.rule.enablehit') }}</div>
 
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitEnable()"
-          >Yes</ab-button
-        >
-        <ab-button size="small" @click="() => close()">No</ab-button>
+        <ab-button size="small" type="warn" @click="() => emitEnable()">{{
+          $t('homepage.rule.yesbtn')
+        }}</ab-button>
+        <ab-button size="small" @click="() => close()">{{
+          $t('homepage.rule.nobtn')
+        }}</ab-button>
       </div>
     </div>
 
@@ -90,29 +93,37 @@ const boxSize = computed(() => {
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('disable')"
-          >Disable</ab-button
+          >{{ $t('homepage.rule.disable') }}</ab-button
         >
         <ab-button
           size="small"
           type="warn"
           @click="() => showDeleteFileDialog('delete')"
-          >Delete</ab-button
+          >{{ $t('homepage.rule.delete') }}</ab-button
         >
-        <ab-button size="small" @click="emitApply">Apply</ab-button>
+        <ab-button size="small" @click="emitApply">{{
+          $t('homepage.rule.apply')
+        }}</ab-button>
       </div>
     </div>
 
-    <ab-popup v-model:show="deleteFileDialog.show" title="Delete">
-      <div>Delete Local File?</div>
+    <ab-popup
+      v-model:show="deleteFileDialog.show"
+      :title="$t('homepage.rule.delete')"
+    >
+      <div>{{ $t('homepage.rule.deletehit') }}</div>
       <div line my-8px></div>
 
       <div fx-cer justify-center space-x-10px>
-        <ab-button size="small" type="warn" @click="() => emitdeleteFile(true)"
-          >Yes</ab-button
-        >
-        <ab-button size="small" @click="() => emitdeleteFile(false)"
-          >No</ab-button
+        <ab-button
+          size="small"
+          type="warn"
+          @click="() => emitdeleteFile(true)"
+          >{{ $t('homepage.rule.yesbtn') }}</ab-button
         >
+        <ab-button size="small" @click="() => emitdeleteFile(false)">{{
+          $t('homepage.rule.nobtn')
+        }}</ab-button>
       </div>
     </ab-popup>
   </ab-popup>
diff --git a/webui/src/components/ab-rule.vue b/webui/src/components/ab-rule.vue
index d232dbc2..1baf825c 100644
--- a/webui/src/components/ab-rule.vue
+++ b/webui/src/components/ab-rule.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { BangumiRule } from '#/bangumi';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const rule = defineModel<BangumiRule>('rule', {
   required: true,
 });
@@ -9,7 +11,7 @@ const rule = defineModel<BangumiRule>('rule', {
 const items: SettingItem<BangumiRule>[] = [
   {
     configKey: 'official_title',
-    label: 'Officical Ttile',
+    label: t('homepage.rule.officaltitle'),
     type: 'input',
     prop: {
       type: 'text',
@@ -17,7 +19,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'year',
-    label: 'Year',
+    label: t('homepage.rule.year'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -26,7 +28,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'season',
-    label: 'Season',
+    label: t('homepage.rule.season'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -36,7 +38,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'offset',
-    label: 'Offset',
+    label: t('homepage.rule.offset'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -45,7 +47,7 @@ const items: SettingItem<BangumiRule>[] = [
   },
   {
     configKey: 'filter',
-    label: 'Exclude',
+    label: t('homepage.rule.exclude'),
     type: 'dynamic-tags',
     bottomLine: true,
   },
diff --git a/webui/src/components/ab-status-bar.vue b/webui/src/components/ab-status-bar.vue
index 2b49f792..5af9f165 100644
--- a/webui/src/components/ab-status-bar.vue
+++ b/webui/src/components/ab-status-bar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue';
-import { AddOne, More } from '@icon-park/vue-next';
+import { AddOne, Earth, More } from '@icon-park/vue-next';
 
 withDefaults(
   defineProps<{
@@ -17,13 +17,22 @@ withDefaults(
   }
 );
 
-defineEmits(['clickAdd']);
+defineEmits(['clickAdds']);
 </script>
 
 <template>
   <Menu>
     <div rel>
       <div fx-cer space-x-16px>
+        <Earth
+          theme="outline"
+          size="24"
+          fill="#fff"
+          is-btn
+          btn-click
+          @click="() => $emit('changeLang')"
+        />
+
         <AddOne
           theme="outline"
           size="24"
diff --git a/webui/src/components/layout/ab-sidebar.vue b/webui/src/components/layout/ab-sidebar.vue
index b032038b..ec2fc882 100644
--- a/webui/src/components/layout/ab-sidebar.vue
+++ b/webui/src/components/layout/ab-sidebar.vue
@@ -9,6 +9,7 @@ import {
   Play,
   SettingTwo,
 } from '@icon-park/vue-next';
+import { useI18n } from 'vue-i18n';
 
 const props = withDefaults(
   defineProps<{
@@ -18,7 +19,7 @@ const props = withDefaults(
     open: false,
   }
 );
-
+const { t } = useI18n({ useScope: 'global' });
 const show = ref(props.open);
 const toggle = () => (show.value = !show.value);
 const route = useRoute();
@@ -28,39 +29,39 @@ const items = [
   {
     id: 1,
     icon: Home,
-    label: 'HomePage',
+    label: t('sidebar.homepage'),
     path: '/bangumi',
   },
   {
     id: 2,
     icon: Calendar,
-    label: 'Calendar',
+    label: t('sidebar.calendar'),
     path: '/calendar',
     hidden: true,
   },
   {
     id: 3,
     icon: Play,
-    label: 'Player',
+    label: t('sidebar.player'),
     path: '/player',
   },
   {
     id: 4,
     icon: Download,
-    label: 'Downloader',
+    label: t('sidebar.downloader'),
     path: '/downloader',
     hidden: true,
   },
   {
     id: 5,
     icon: Log,
-    label: 'Log',
+    label: t('sidebar.log'),
     path: '/log',
   },
   {
     id: 6,
     icon: SettingTwo,
-    label: 'Config',
+    label: t('sidebar.config'),
     path: '/config',
   },
 ];
@@ -88,7 +89,7 @@ const items = [
         @click="toggle"
       >
         <div :class="[!show && 'abs opacity-0']" transition-opacity>
-          <div text-h1>Menu</div>
+          <div text-h1>{{ $t('sidebar.title') }}</div>
         </div>
 
         <MenuUnfold
@@ -138,7 +139,7 @@ const items = [
         @click="logout"
       >
         <Logout :size="24" />
-        <div text-h2>Logout</div>
+        <div text-h2>{{ $t('sidebar.logout') }}</div>
       </div>
     </div>
   </div>
diff --git a/webui/src/components/layout/ab-topbar.vue b/webui/src/components/layout/ab-topbar.vue
index 724b473d..b110f61f 100644
--- a/webui/src/components/layout/ab-topbar.vue
+++ b/webui/src/components/layout/ab-topbar.vue
@@ -7,7 +7,9 @@ import {
   Power,
   Refresh,
 } from '@icon-park/vue-next';
+import { useI18n } from 'vue-i18n';
 
+const { t, locale } = useI18n({ useScope: 'global' });
 const search = ref('');
 const show = ref(false);
 const showAdd = ref(false);
@@ -19,37 +21,37 @@ const { running } = storeToRefs(useProgramStore());
 const items = [
   {
     id: 1,
-    label: 'Start',
+    label: t('topbar.start'),
     icon: PlayOne,
     handle: start,
   },
   {
     id: 2,
-    label: 'Pause',
+    label: t('topbar.pause'),
     icon: Pause,
     handle: pause,
   },
   {
     id: 3,
-    label: 'Restart',
+    label: t('topbar.restart'),
     icon: Refresh,
     handle: restart,
   },
   {
     id: 4,
-    label: 'Shutdown',
+    label: t('topbar.shutdown'),
     icon: Power,
     handle: shutdown,
   },
   {
     id: 5,
-    label: 'Reset Rule',
+    label: t('topbar.resetrule'),
     icon: Format,
     handle: resetRule,
   },
   {
     id: 6,
-    label: 'Profile',
+    label: t('topbar.profile.title'),
     icon: Me,
     handle: () => {
       show.value = true;
@@ -64,6 +66,20 @@ onBeforeMount(() => {
 onUnmounted(() => {
   offUpdate();
 });
+
+function changeLocale() {
+  if (localStorage.getItem('lang') === 'zh-CN') {
+    const newLang = 'en-US';
+    locale.value = newLang;
+    localStorage.setItem('lang', newLang);
+    location.reload();
+  } else {
+    const newLang = 'zh-CN';
+    locale.value = newLang;
+    localStorage.setItem('lang', newLang);
+    location.reload();
+  }
+}
 </script>
 
 <template>
@@ -80,6 +96,7 @@ onUnmounted(() => {
         :items="items"
         :running="running"
         @click-add="() => (showAdd = true)"
+        @change-lang="() => changeLocale()"
       ></ab-status-bar>
     </div>
 
diff --git a/webui/src/components/setting/config-download.vue b/webui/src/components/setting/config-download.vue
index 6350008c..09d2db82 100644
--- a/webui/src/components/setting/config-download.vue
+++ b/webui/src/components/setting/config-download.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Downloader, DownloaderType } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const downloader = getSettingGroup('downloader');
@@ -10,7 +12,7 @@ const downloaderType: DownloaderType = ['qbittorrent'];
 const items: SettingItem<Downloader>[] = [
   {
     configKey: 'type',
-    label: 'Downloader Type',
+    label: t('config.downloaderset.type'),
     type: 'select',
     css: 'w-115px',
     prop: {
@@ -19,7 +21,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'host',
-    label: 'Host',
+    label: t('config.downloaderset.host'),
     type: 'input',
     prop: {
       type: 'text',
@@ -28,7 +30,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'username',
-    label: 'Username',
+    label: t('config.downloaderset.username'),
     type: 'input',
     prop: {
       type: 'text',
@@ -37,7 +39,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'password',
-    label: 'Password',
+    label: t('config.downloaderset.password'),
     type: 'input',
     prop: {
       type: 'text',
@@ -47,7 +49,7 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'path',
-    label: 'Download Path',
+    label: t('config.downloaderset.path'),
     type: 'input',
     prop: {
       type: 'text',
@@ -56,14 +58,14 @@ const items: SettingItem<Downloader>[] = [
   },
   {
     configKey: 'ssl',
-    label: 'SSL',
+    label: t('config.downloaderset.ssl'),
     type: 'switch',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Downloader Setting">
+  <ab-fold-panel :title="$t('config.downloaderset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-manage.vue b/webui/src/components/setting/config-manage.vue
index f06a53a2..10472374 100644
--- a/webui/src/components/setting/config-manage.vue
+++ b/webui/src/components/setting/config-manage.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { BangumiManage, RenameMethod } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const manage = getSettingGroup('bangumi_manage');
@@ -10,12 +12,12 @@ const renameMethod: RenameMethod = ['normal', 'pn', 'advance', 'none'];
 const items: SettingItem<BangumiManage>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.manageset.enable'),
     type: 'switch',
   },
   {
     configKey: 'rename_method',
-    label: 'Rename Method',
+    label: t('config.manageset.method'),
     type: 'select',
     prop: {
       items: renameMethod,
@@ -24,24 +26,24 @@ const items: SettingItem<BangumiManage>[] = [
   },
   {
     configKey: 'eps_complete',
-    label: 'Eps complete',
+    label: t('config.manageset.eps'),
     type: 'switch',
   },
   {
     configKey: 'group_tag',
-    label: 'Add Group Tag',
+    label: t('config.manageset.grouptag'),
     type: 'switch',
   },
   {
     configKey: 'remove_bad_torrent',
-    label: 'Delete Bad Torrent',
+    label: t('config.manageset.deletebadtorr'),
     type: 'switch',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Manage Setting">
+  <ab-fold-panel :title="$t('config.manageset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-normal.vue b/webui/src/components/setting/config-normal.vue
index 5d7c8a0f..42592a4a 100644
--- a/webui/src/components/setting/config-normal.vue
+++ b/webui/src/components/setting/config-normal.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Log, Program } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const program = getSettingGroup('program');
@@ -10,7 +12,7 @@ const log = getSettingGroup('log');
 const programItems: SettingItem<Program>[] = [
   {
     configKey: 'rss_time',
-    label: 'Interval Time of Rss',
+    label: t('config.normalset.rssintvl'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -20,7 +22,7 @@ const programItems: SettingItem<Program>[] = [
   },
   {
     configKey: 'rename_time',
-    label: 'Interval Time of Rename',
+    label: t('config.normalset.renameintvl'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -30,7 +32,7 @@ const programItems: SettingItem<Program>[] = [
   },
   {
     configKey: 'webui_port',
-    label: 'WebUI Port',
+    label: t('config.normalset.webport'),
     type: 'input',
     css: 'w-72px',
     prop: {
@@ -43,13 +45,13 @@ const programItems: SettingItem<Program>[] = [
 
 const logItems: SettingItem<Log> = {
   configKey: 'debug_enable',
-  label: 'Debug',
+  label: t('config.normalset.debug'),
   type: 'switch',
 };
 </script>
 
 <template>
-  <ab-fold-panel title="Normal Setting">
+  <ab-fold-panel :title="$t('config.normalset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in programItems"
diff --git a/webui/src/components/setting/config-notification.vue b/webui/src/components/setting/config-notification.vue
index d0b6d43c..99fbe3fa 100644
--- a/webui/src/components/setting/config-notification.vue
+++ b/webui/src/components/setting/config-notification.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Notification, NotificationType } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const notification = getSettingGroup('notification');
@@ -15,13 +17,13 @@ const notificationType: NotificationType = [
 const items: SettingItem<Notification>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.notificationset.enable'),
     type: 'switch',
     bottomLine: true,
   },
   {
     configKey: 'type',
-    label: 'Type',
+    label: t('config.notificationset.type'),
     type: 'select',
     css: 'w-140px',
     prop: {
@@ -30,7 +32,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'token',
-    label: 'Token',
+    label: t('config.notificationset.token'),
     type: 'input',
     prop: {
       type: 'text',
@@ -39,7 +41,7 @@ const items: SettingItem<Notification>[] = [
   },
   {
     configKey: 'chat_id',
-    label: 'Chat ID',
+    label: t('config.notificationset.chatid'),
     type: 'input',
     prop: {
       type: 'text',
@@ -50,7 +52,7 @@ const items: SettingItem<Notification>[] = [
 </script>
 
 <template>
-  <ab-fold-panel title="Notification Setting">
+  <ab-fold-panel :title="$t('config.notificationset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-parser.vue b/webui/src/components/setting/config-parser.vue
index 06495b81..13f04b3d 100644
--- a/webui/src/components/setting/config-parser.vue
+++ b/webui/src/components/setting/config-parser.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type {
   RssParser,
   RssParserLang,
@@ -7,6 +8,7 @@ import type {
 } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const parser = getSettingGroup('rss_parser');
@@ -19,12 +21,12 @@ const parserMethods: RssParserMethodType = ['tmdb', 'mikan', 'parser'];
 const items: SettingItem<RssParser>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.parserset.enable'),
     type: 'switch',
   },
   {
     configKey: 'type',
-    label: 'Source',
+    label: t('config.parserset.source'),
     type: 'select',
     css: 'w-115px',
     prop: {
@@ -33,7 +35,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'token',
-    label: 'Token',
+    label: t('config.parserset.token'),
     type: 'input',
     prop: {
       type: 'text',
@@ -42,7 +44,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'custom_url',
-    label: 'Custom Url',
+    label: t('config.parserset.url'),
     type: 'input',
     prop: {
       type: 'text',
@@ -52,7 +54,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'language',
-    label: 'Language',
+    label: t('config.parserset.language'),
     type: 'select',
     prop: {
       items: langs,
@@ -60,7 +62,7 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'parser_type',
-    label: 'Parser Type',
+    label: t('config.parserset.type'),
     type: 'select',
     prop: {
       items: parserMethods,
@@ -68,14 +70,14 @@ const items: SettingItem<RssParser>[] = [
   },
   {
     configKey: 'filter',
-    label: 'Exclude',
+    label: t('config.parserset.exclude'),
     type: 'dynamic-tags',
   },
 ];
 </script>
 
 <template>
-  <ab-fold-panel title="Parser Setting">
+  <ab-fold-panel :title="$t('config.parserset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/components/setting/config-player.vue b/webui/src/components/setting/config-player.vue
index b34a0e62..d43b96f2 100644
--- a/webui/src/components/setting/config-player.vue
+++ b/webui/src/components/setting/config-player.vue
@@ -3,19 +3,19 @@ const { types, type, url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
-  <ab-fold-panel title="Media Player Setting">
+  <ab-fold-panel :title="$t('config.mediaplayerset.title')">
     <div space-y-12px>
       <ab-setting
         v-model:data="type"
         type="select"
-        label="type"
+        :label="$t('config.mediaplayerset.type')"
         :prop="{ items: types }"
       ></ab-setting>
 
       <ab-setting
         v-model:data="url"
         type="input"
-        label="url"
+        :label="$t('config.mediaplayerset.url')"
         :prop="{ placeholder: 'media player url' }"
       ></ab-setting>
     </div>
diff --git a/webui/src/components/setting/config-proxy.vue b/webui/src/components/setting/config-proxy.vue
index 9c82b6b4..04407b4e 100644
--- a/webui/src/components/setting/config-proxy.vue
+++ b/webui/src/components/setting/config-proxy.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
 import type { Proxy, ProxyType } from '#/config';
 import type { SettingItem } from '#/components';
 
+const { t } = useI18n({ useScope: 'global' });
 const { getSettingGroup } = useConfigStore();
 
 const proxy = getSettingGroup('proxy');
@@ -10,12 +12,12 @@ const proxyType: ProxyType = ['http', 'https', 'socks5'];
 const items: SettingItem<Proxy>[] = [
   {
     configKey: 'enable',
-    label: 'Enable',
+    label: t('config.proxyset.enable'),
     type: 'switch',
   },
   {
     configKey: 'type',
-    label: 'Proxy Type',
+    label: t('config.proxyset.type'),
     type: 'select',
     prop: {
       items: proxyType,
@@ -24,7 +26,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'host',
-    label: 'Host',
+    label: t('config.proxyset.host'),
     type: 'input',
     prop: {
       type: 'text',
@@ -33,7 +35,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'port',
-    label: 'Port',
+    label: t('config.proxyset.port'),
     type: 'input',
     prop: {
       type: 'text',
@@ -42,7 +44,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'username',
-    label: 'Username',
+    label: t('config.proxyset.username'),
     type: 'input',
     prop: {
       type: 'text',
@@ -51,7 +53,7 @@ const items: SettingItem<Proxy>[] = [
   },
   {
     configKey: 'password',
-    label: 'Password',
+    label: t('config.proxyset.password'),
     type: 'input',
     prop: {
       type: 'text',
@@ -62,7 +64,7 @@ const items: SettingItem<Proxy>[] = [
 </script>
 
 <template>
-  <ab-fold-panel title="Proxy Setting">
+  <ab-fold-panel :title="$t('config.proxyset.title')">
     <div space-y-12px>
       <ab-setting
         v-for="i in items"
diff --git a/webui/src/locales/index.ts b/webui/src/locales/index.ts
new file mode 100644
index 00000000..bcc4a795
--- /dev/null
+++ b/webui/src/locales/index.ts
@@ -0,0 +1,28 @@
+import { createI18n } from 'vue-i18n';
+import enUS from './lang/en-US.json';
+import zhCN from './lang/zh-CN.json';
+
+const messages = {
+  'en-US': enUS,
+  'zh-CN': zhCN,
+};
+
+// Default language is the same as last setting (undefined is browser language)
+let lang = localStorage.getItem('lang');
+if (lang === null) {
+  const navLang = navigator.language;
+  const localLang = navLang || false;
+  lang = localLang || 'en-US';
+}
+localStorage.setItem('lang', lang);
+
+const i18n = createI18n({
+  legacy: false,
+  locale: lang,
+  globalInjection: true,
+  silentTranslationWarn: true,
+  globalInstall: true,
+  messages,
+});
+
+export default i18n;
diff --git a/webui/src/locales/lang/en-US.json b/webui/src/locales/lang/en-US.json
new file mode 100644
index 00000000..513e240d
--- /dev/null
+++ b/webui/src/locales/lang/en-US.json
@@ -0,0 +1,132 @@
+{
+  "login": {
+    "title": "Login",
+    "username": "Username",
+    "password": "Password",
+    "loginbtn": "Login",
+    "default": "Default"
+  },
+  "sidebar": {
+    "title": "Menu",
+    "homepage": "HomePage",
+    "player": "Player",
+    "log": "Log",
+    "config": "Config",
+    "logout": "Logout",
+    "downloader": "Downloader",
+    "calendar": "Calendar"
+  },
+  "topbar": {
+    "start": "Start",
+    "pause": "Pause",
+    "restart": "Restart",
+    "shutdown": "Shutdown",
+    "resetrule": "Reset Rule",
+    "profile": {
+      "title": "Profile",
+      "poptitle": "Change Account",
+      "username": "Username",
+      "password": "Password",
+      "updatebtn": "Update"
+    },
+    "add": {
+      "title": "Add Bangumi",
+      "rsslink": "RSS Link",
+      "placeholder": "Please enter the RSS link",
+      "analyse": "Analyse"
+    }
+  },
+  "homepage": {
+    "title": "Bangumi List",
+    "rule": {
+      "officaltitle": "Official Title",
+      "year": "Year",
+      "season": "Season",
+      "offset": "Offset",
+      "exclude": "Exclude",
+      "enable": "Enable",
+      "disable": "Disable",
+      "delete": "Delete",
+      "apply": "Apply",
+      "yesbtn": "Yes",
+      "nobtn": "No",
+      "enablehit": "Do you want to enable this rule?",
+      "deletehit": "Delete Local File?",
+      "enablerule": "Enable Rule",
+      "editrule": "Edit Rule"
+    }
+  },
+  "player": {
+    "title": "Player",
+    "hit": "Please set up the media player"
+  },
+  "log": {
+    "title": "Log",
+    "reset": "Reset",
+    "copy": "Copy",
+    "contactinfo": "Contact Infomation",
+    "go": "Go",
+    "join": "Join",
+    "bugrepo": "Bug Report"
+  },
+  "config": {
+    "title": "Config",
+    "normalset": {
+      "title": "Normal Setting",
+      "rssintvl": "Interval Time of Rss",
+      "renameintvl": "Interval Time of Rename",
+      "webport": "WebUI Port",
+      "debug": "Debug"
+    },
+    "parserset": {
+      "title": "Parser Setting",
+      "enable": "Enable",
+      "source": "Source",
+      "token": "Token",
+      "url": "Custom Url",
+      "language": "Language",
+      "type": "Parser Type",
+      "exclude": "Exclude"
+    },
+    "downloaderset": {
+      "title": "Downloader Setting",
+      "type": "Downloader Type",
+      "host": "Host",
+      "username": "Username",
+      "password": "Password",
+      "path": "Download Path",
+      "ssl": "SSL"
+    },
+    "manageset": {
+      "title": "Manage Setting",
+      "enable": "Enable",
+      "method": "Rename Method",
+      "eps": "EPS complete",
+      "grouptag": "Add Group Tag",
+      "deletebadtorr": "Delete Bad Torrent"
+    },
+    "notificationset": {
+      "title": "Notification Setting",
+      "enable": "Enable",
+      "type": "Type",
+      "token": "Token",
+      "chatid": "Chat ID"
+    },
+    "proxyset": {
+      "title": "Proxy Setting",
+      "enable": "Enable",
+      "type": "Proxy Type",
+      "host": "Host",
+      "port": "Port",
+      "username": "Username",
+      "password": "Password"
+    },
+    "mediaplayerset": {
+      "title": "Media Player Setting",
+      "type": "type",
+      "url": "url"
+    },
+    "cancel": "Cancel",
+    "apply": "Apply"
+  }
+}
diff --git a/webui/src/locales/lang/zh-CN.json b/webui/src/locales/lang/zh-CN.json
new file mode 100644
index 00000000..c83e5acc
--- /dev/null
+++ b/webui/src/locales/lang/zh-CN.json
@@ -0,0 +1,132 @@
+{
+  "login": {
+    "title": "登录",
+    "username": "用户名",
+    "password": "密码",
+    "loginbtn": "登录",
+    "default": "默认账号密码 "
+  },
+  "sidebar": {
+    "title": "菜单",
+    "homepage": "主页",
+    "player": "播放器",
+    "log": "日志",
+    "config": "设置",
+    "logout": "退出",
+    "calendar": "日历",
+    "downloader": "下载器"
+  },
+  "topbar": {
+    "start": "启动",
+    "pause": "暂停",
+    "restart": "重启",
+    "shutdown": "关闭",
+    "resetrule": "重置规则",
+    "profile": {
+      "title": "账户资料",
+      "poptitle": "修改账户信息",
+      "username": "用户名",
+      "password": "密码",
+      "updatebtn": "更新"
+    },
+    "add": {
+      "title": "添加番剧",
+      "rsslink": "RSS链接",
+      "placeholder": "请输入RSS链接",
+      "analyse": "分析"
+    }
+  },
+  "homepage": {
+    "title": "番剧列表",
+    "rule": {
+      "officaltitle": "官方名称",
+      "year": "年份",
+      "season": "季度",
+      "offset": "偏移",
+      "exclude": "排除",
+      "enable": "启用",
+      "disable": "禁用",
+      "delete": "删除",
+      "apply": "应用",
+      "yesbtn": "是",
+      "nobtn": "否",
+      "enablehit": "确定要让规则生效吗？",
+      "deletehit": "删除本地文件？",
+      "enablerule": "启用规则",
+      "editrule": "编辑规则"
+    }
+  },
+  "player": {
+    "title": "播放器",
+    "hit": "请设置播放器地址"
+  },
+  "log": {
+    "title": "日志",
+    "reset": "重置",
+    "copy": "复制",
+    "contactinfo": "联系方式",
+    "go": "访问",
+    "join": "加入",
+    "bugrepo": "Bug反馈"
+  },
+  "config": {
+    "title": "系统设置",
+    "normalset": {
+      "title": "一般设置",
+      "rssintvl": "RSS间隔",
+      "renameintvl": "重命名间隔",
+      "webport": "网页端口",
+      "debug": "调试"
+    },
+    "parserset": {
+      "title": "解析设置",
+      "enable": "启用",
+      "source": "数据源",
+      "token": "Token",
+      "url": "自定义网址",
+      "language": "语言",
+      "type": "解析类型",
+      "exclude": "排除"
+    },
+    "downloaderset": {
+      "title": "下载设置",
+      "type": "下载器类型",
+      "host": "下载器地址",
+      "username": "用户名",
+      "password": "密码",
+      "path": "下载地址",
+      "ssl": "SSL"
+    },
+    "manageset": {
+      "title": "番剧管理设置",
+      "enable": "启用",
+      "method": "重命名方式",
+      "eps": "EPS完成",
+      "grouptag": "添加组标签",
+      "deletebadtorr": "删除坏种"
+    },
+    "notificationset": {
+      "title": "推送设置",
+      "enable": "启用",
+      "type": "类型",
+      "token": "Token",
+      "chatid": "Chat ID"
+    },
+    "proxyset": {
+      "title": "代理设置",
+      "enable": "启用",
+      "type": "类型",
+      "host": "地址",
+      "port": "端口",
+      "username": "用户名",
+      "password": "密码"
+    },
+    "mediaplayerset": {
+      "title": "播放器设置",
+      "type": "类型",
+      "url": "播放器地址"
+    },
+    "cancel": "取消",
+    "apply": "应用"
+  }
+}
diff --git a/webui/src/main.ts b/webui/src/main.ts
index 7dd15cc8..f0d24b1b 100644
--- a/webui/src/main.ts
+++ b/webui/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { router } from './router';
+import i18n from './locales';
 import App from './App.vue';
 
 import '@unocss/reset/tailwind-compat.css';
@@ -11,4 +12,5 @@ const pinia = createPinia();
 const app = createApp(App);
 app.use(router);
 app.use(pinia);
+app.use(i18n);
 app.mount('#app');
diff --git a/webui/src/pages/index.vue b/webui/src/pages/index.vue
index d638a790..b458bf0a 100644
--- a/webui/src/pages/index.vue
+++ b/webui/src/pages/index.vue
@@ -13,15 +13,11 @@ definePage({
       <ab-sidebar />
 
       <div layout-content>
-        <ab-page-title :title="$route.name"></ab-page-title>
-
-        <div overflow-auto mt-12px flex-grow>
-          <RouterView v-slot="{ Component }">
-            <KeepAlive>
-              <component :is="Component" />
-            </KeepAlive>
-          </RouterView>
-        </div>
+        <RouterView v-slot="{ Component }">
+          <KeepAlive>
+            <component :is="Component" />
+          </KeepAlive>
+        </RouterView>
       </div>
     </main>
   </div>
diff --git a/webui/src/pages/index/bangumi.vue b/webui/src/pages/index/bangumi.vue
index 811bddff..fc6dc328 100644
--- a/webui/src/pages/index/bangumi.vue
+++ b/webui/src/pages/index/bangumi.vue
@@ -93,25 +93,28 @@ definePage({
 </script>
 
 <template>
-  <div flex="~ wrap" gap-y-12px gap-x-50px>
-    <ab-bangumi-card
-      v-for="i in data"
-      :key="i.id"
-      :class="[i.deleted && 'grayscale']"
-      :poster="i.poster_link ?? ''"
-      :name="i.official_title"
-      :season="i.season"
-      @click="() => open(i)"
-    ></ab-bangumi-card>
+  <ab-page-title :title="$t('homepage.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div flex="~ wrap" gap-y-12px gap-x-50px>
+      <ab-bangumi-card
+        v-for="i in data"
+        :key="i.id"
+        :class="[i.deleted && 'grayscale']"
+        :poster="i.poster_link ?? ''"
+        :name="i.official_title"
+        :season="i.season"
+        @click="() => open(i)"
+      ></ab-bangumi-card>
 
-    <ab-edit-rule
-      v-model:show="editRule.show"
-      v-model:rule="editRule.item"
-      @enable="(id) => enableRule(id)"
-      @delete-file="
-        (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
-      "
-      @apply="(rule) => updateRule(rule)"
-    ></ab-edit-rule>
+      <ab-edit-rule
+        v-model:show="editRule.show"
+        v-model:rule="editRule.item"
+        @enable="(id) => enableRule(id)"
+        @delete-file="
+          (type, { id, deleteFile }) => ruleManage(type, id, deleteFile)
+        "
+        @apply="(rule) => updateRule(rule)"
+      ></ab-edit-rule>
+    </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/config.vue b/webui/src/pages/index/config.vue
index bdb6b3a3..2ad8d034 100644
--- a/webui/src/pages/index/config.vue
+++ b/webui/src/pages/index/config.vue
@@ -9,30 +9,35 @@ definePage({
 </script>
 
 <template>
-  <div h-full flex="~ col">
-    <div grid="~ cols-2" gap-20px mb-auto>
-      <div space-y-20px>
-        <config-normal></config-normal>
+  <ab-page-title :title="$t('config.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div h-full flex="~ col">
+      <div grid="~ cols-2" gap-20px mb-auto>
+        <div space-y-20px>
+          <config-normal></config-normal>
 
-        <config-parser></config-parser>
+          <config-parser></config-parser>
 
-        <config-download></config-download>
+          <config-download></config-download>
 
-        <config-manage></config-manage>
+          <config-manage></config-manage>
+        </div>
+
+        <div space-y-20px>
+          <config-notification></config-notification>
+
+          <config-proxy></config-proxy>
+
+          <config-player></config-player>
+        </div>
       </div>
 
-      <div space-y-20px>
-        <config-notification></config-notification>
-
-        <config-proxy></config-proxy>
-
-        <config-player></config-player>
+      <div fx-cer justify-end gap-8px mt-20px>
+        <ab-button type="warn" @click="getConfig">{{
+          $t('config.cancel')
+        }}</ab-button>
+        <ab-button @click="setConfig">{{ $t('config.apply') }}</ab-button>
       </div>
     </div>
-
-    <div fx-cer justify-end gap-8px mt-20px>
-      <ab-button type="warn" @click="getConfig">Cancel</ab-button>
-      <ab-button @click="setConfig">Apply</ab-button>
-    </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/log.vue b/webui/src/pages/index/log.vue
index 94431fa0..fe33e93d 100644
--- a/webui/src/pages/index/log.vue
+++ b/webui/src/pages/index/log.vue
@@ -16,96 +16,101 @@ definePage({
 </script>
 
 <template>
-  <div flex="~ wrap" gap-12px>
-    <ab-container title="Log" w-660px grow>
-      <div
-        rounded-10px
-        border="1px solid black"
-        overflow-auto
-        p-10px
-        max-h-60vh
-      >
-        <pre text-main>{{ log }}</pre>
-      </div>
+  <ab-page-title :title="$t('log.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <div flex="~ wrap" gap-12px>
+      <ab-container :title="$t('log.title')" w-660px grow>
+        <div
+          rounded-10px
+          border="1px solid black"
+          overflow-auto
+          p-10px
+          max-h-60vh
+        >
+          <pre text-main>{{ log }}</pre>
+        </div>
 
-      <div flex="~ justify-end" space-x-10px mt-12px>
-        <ab-button type="warn" size="small" @click="reset">Reset</ab-button>
-        <ab-button size="small" @click="copy">Copy</ab-button>
-      </div>
-    </ab-container>
-
-    <div grow w-500px space-y-20px>
-      <ab-container title="Contact Infomation">
-        <div space-y-12px>
-          <ab-label label="Github">
-            <ab-button
-              size="small"
-              link="https://github.com/EstrellaXD/Auto_Bangumi"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <ab-label label="WebUI Repo">
-            <ab-button
-              size="small"
-              link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <div line></div>
-
-          <ab-label label="Twitter">
-            <ab-button
-              size="small"
-              link="https://twitter.com/Estrella_Pan"
-              target="_blank"
-            >
-              Go
-            </ab-button>
-          </ab-label>
-
-          <ab-label label="Telegram Group">
-            <ab-button
-              size="small"
-              link="https://t.me/autobangumi"
-              target="_blank"
-            >
-              Join
-            </ab-button>
-          </ab-label>
+        <div flex="~ justify-end" space-x-10px mt-12px>
+          <ab-button type="warn" size="small" @click="reset">{{
+            $t('log.reset')
+          }}</ab-button>
+          <ab-button size="small" @click="copy">{{ $t('log.copy') }}</ab-button>
         </div>
       </ab-container>
 
-      <ab-container title="Bug Report">
-        <div space-y-12px>
-          <ab-button
-            mx-auto
-            text-16px
-            w-300px
-            h-46px
-            rounded-10px
-            link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
-            >Github Issue</ab-button
-          >
+      <div grow w-500px space-y-20px>
+        <ab-container :title="$t('log.contactinfo')">
+          <div space-y-12px>
+            <ab-label label="Github">
+              <ab-button
+                size="small"
+                link="https://github.com/EstrellaXD/Auto_Bangumi"
+                target="_blank"
+              >
+                {{ $t('log.go') }}
+              </ab-button>
+            </ab-label>
 
-          <div line></div>
+            <ab-label label="WebUI Repo">
+              <ab-button
+                size="small"
+                link="https://github.com/Rewrite0/Auto_Bangumi_WebUI"
+                target="_blank"
+              >
+                {{ $t('log.go') }}
+              </ab-button>
+            </ab-label>
 
-          <ab-button
-            mx-auto
-            text-16px
-            w-300px
-            h-46px
-            rounded-10px
-            link="mailto:estrellaxd05@gmail.com"
-            >Email Contact</ab-button
-          >
-        </div>
-      </ab-container>
+            <div line></div>
+
+            <ab-label label="Twitter">
+              <ab-button
+                size="small"
+                link="https://twitter.com/Estrella_Pan"
+                target="_blank"
+              >
+                {{ $t('log.go') }}
+              </ab-button>
+            </ab-label>
+
+            <ab-label label="Telegram Group">
+              <ab-button
+                size="small"
+                link="https://t.me/autobangumi"
+                target="_blank"
+              >
+                {{ $t('log.join') }}
+              </ab-button>
+            </ab-label>
+          </div>
+        </ab-container>
+
+        <ab-container :title="$t('log.bugrepo')">
+          <div space-y-12px>
+            <ab-button
+              mx-auto
+              text-16px
+              w-300px
+              h-46px
+              rounded-10px
+              link="https://github.com/EstrellaXD/Auto_Bangumi/issues"
+              >Github Issue</ab-button
+            >
+
+            <div line></div>
+
+            <ab-button
+              mx-auto
+              text-16px
+              w-300px
+              h-46px
+              rounded-10px
+              link="mailto:estrellaxd05@gmail.com"
+              >Email Contact</ab-button
+            >
+          </div>
+        </ab-container>
+      </div>
     </div>
   </div>
 </template>
diff --git a/webui/src/pages/index/player.vue b/webui/src/pages/index/player.vue
index c97ec45a..0cba5d1f 100644
--- a/webui/src/pages/index/player.vue
+++ b/webui/src/pages/index/player.vue
@@ -7,22 +7,24 @@ const { url } = storeToRefs(usePlayerStore());
 </script>
 
 <template>
-  <template v-if="url === ''">
-    <div wh-full f-cer text-h1 text-primary>
-      <RouterLink to="/config" hover:underline
-        >Please set up the media player</RouterLink
-      >
-    </div>
-  </template>
-
-  <iframe
-    v-else
-    :src="url"
-    frameborder="0"
-    allowfullscreen="true"
-    w-full
-    h-full
-    flex-1
-    rounded-12px
-  ></iframe>
+  <ab-page-title :title="$t('player.title')"></ab-page-title>
+  <div overflow-auto mt-12px flex-grow>
+    <template v-if="url === ''">
+      <div wh-full f-cer text-h1 text-primary>
+        <RouterLink to="/config" hover:underline>{{
+          $t('player.hit')
+        }}</RouterLink>
+      </div>
+    </template>
+    <iframe
+      v-else
+      :src="url"
+      frameborder="0"
+      allowfullscreen="true"
+      w-full
+      h-full
+      flex-1
+      rounded-12px
+    ></iframe>
+  </div>
 </template>
diff --git a/webui/src/pages/login.vue b/webui/src/pages/login.vue
index 59b9c8b7..ad4c3997 100644
--- a/webui/src/pages/login.vue
+++ b/webui/src/pages/login.vue
@@ -8,9 +8,9 @@ definePage({
 
 <template>
   <div f-cer layout-container>
-    <ab-container title="Login" w-365px>
+    <ab-container :title="$t('login.title')" w-365px>
       <div space-y-16px>
-        <ab-label label="Username">
+        <ab-label :label="$t('login.username')">
           <input
             v-model="user.username"
             type="text"
@@ -19,7 +19,7 @@ definePage({
           />
         </ab-label>
 
-        <ab-label label="Password">
+        <ab-label :label="$t('login.password')">
           <input
             v-model="user.password"
             type="password"
@@ -32,13 +32,15 @@ definePage({
         <div line></div>
 
         <div flex="~ justify-end">
-          <ab-button size="small" @click="login">Login</ab-button>
+          <ab-button size="small" @click="login">{{
+            $t('login.loginbtn')
+          }}</ab-button>
         </div>
       </div>
     </ab-container>
 
     <div bg="#C7C4AB" text-white rounded-4px py-4px px-2em text-main>
-      <div>Default: admin adminadmin</div>
+      <div>{{ $t('login.default') }}: admin adminadmin</div>
     </div>
   </div>
 </template>