diff --git a/.gitignore b/.gitignore
index f798fbc2..63793e93 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,8 +23,3 @@ release
 *.njsproj
 *.sln
 *.sw?
-
-# lockfile
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index 0e75cc64..748fea56 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,8 +17,10 @@ declare module 'vue' {
     MyCarousel: typeof import('./src/components/MyCarousel.vue')['default']
     MyCheckbox: typeof import('./src/components/MyCheckbox.vue')['default']
     MyDropdown: typeof import('./src/components/MyDropdown.vue')['default']
+    MySelect: typeof import('./src/components/MySelect.vue')['default']
     MyTabs: typeof import('./src/components/MyTabs.vue')['default']
     MyTag: typeof import('./src/components/MyTag.vue')['default']
+    MyTextSwitch: typeof import('./src/components/MyTextSwitch.vue')['default']
     MyTooltip: typeof import('./src/components/MyTooltip.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/package.json b/package.json
index 61f4f5cf..d32101e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "miXeD",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "main": "dist-electron/main/index.js",
   "description": "All-in-one miHoYo game launcher",
   "author": "HoraceHYY <horacehuang17@gmail.com>",
diff --git a/src/components/LauncherPosts.vue b/src/components/LauncherPosts.vue
index 6bbfa427..6909f8e5 100644
--- a/src/components/LauncherPosts.vue
+++ b/src/components/LauncherPosts.vue
@@ -12,7 +12,7 @@ defineProps({
 })
 
 const tabsModel = ref(0)
-const keys = ['POST_TYPE_INFO', 'POST_TYPE_ACTIVITY', 'POST_TYPE_ANNOUNCE']
+const keys = ['POST_TYPE_ACTIVITY', 'POST_TYPE_ANNOUNCE', 'POST_TYPE_INFO']
 const tabs = translateMultiple(keys)
 
 const openLink = (url: string) => {
diff --git a/src/components/MyDropdown.vue b/src/components/MyDropdown.vue
index 0a64a9e4..ad543b7a 100644
--- a/src/components/MyDropdown.vue
+++ b/src/components/MyDropdown.vue
@@ -15,11 +15,19 @@ const props = defineProps({
   },
   width: {
     type: String,
-    default: '100%',
+    default: 'max-content',
+  },
+  selected: {
+    type: Number,
+    default: -1,
+  },
+  middle: {
+    type: Boolean,
+    default: false,
   },
 })
 
-defineEmits(['command'])
+const emit = defineEmits(['command'])
 
 const wrapperStyles: Record<string, any> = {
   top: {
@@ -46,17 +54,24 @@ const wrapperStyles: Record<string, any> = {
 }
 
 const showMenu = ref(false)
+const wrapperRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
 let timer: NodeJS.Timeout | number | undefined = undefined
 
-const transformX = computed(() => {
+const transform = computed(() => {
+  if (!wrapperRef.value || !dropdownRef.value) return {}
   if (props.placement === 'top' || props.placement === 'bottom') {
-    return {
-      transform: 'translateX(-50%)',
-    }
+    return wrapperRef.value.clientWidth >= dropdownRef.value.clientWidth
+      ? {}
+      : {
+          transform: `translateX(-${((dropdownRef.value.clientWidth - wrapperRef.value.clientWidth) / 2).toFixed(0)}px)`,
+        }
   } else {
-    return {
-      transform: 'translateY(-50%)',
-    }
+    return wrapperRef.value.clientHeight >= dropdownRef.value.clientHeight
+      ? {}
+      : {
+          transform: `translateY(-${((dropdownRef.value.clientHeight - wrapperRef.value.clientHeight) / 2).toFixed(0)}px)`,
+        }
   }
 })
 
@@ -78,31 +93,37 @@ const onMouseEnter = () => {
 const onMouseLeave = () => {
   timer = setTimeout(hideMenu, 500)
 }
+
+const sendCommand = (idx: number) => {
+  emit('command', idx)
+  hideMenu()
+}
 </script>
 
 <template>
   <div class="relative">
-    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="wrapperRef">
       <slot />
     </div>
 
     <Transition name="fade">
       <div
-        class="absolute min-w-full min-h-full overflow-visible flex flex-row z-50"
+        class="absolute min-w-full overflow-visible flex flex-row z-50"
         :style="{ ...wrapperStyles[placement], width: width }"
         v-if="showMenu"
+        ref="dropdownRef"
       >
         <div
-          class="p-1 bg-white rounded-xl w-fit h-fit min-w-full text-center shadow-md"
-          :style="transformX"
+          class="px-1 py-0.5 bg-white rounded-xl w-fit h-fit min-w-full text-center text-nowrap shadow-md"
+          :style="middle ? transform : undefined"
           @mouseenter="onMouseEnter"
           @mouseleave="onMouseLeave"
         >
           <div
             v-for="(item, idx) in items"
-            class="py-1.5 rounded-lg cursor-default hover:bg-yellow-100 hover:text-yellow-600 active:bg-yellow-400 active:text-yellow-800 transition-all"
-            :class="itemClass"
-            @click="$emit('command', idx)"
+            class="py-1 my-0.5 rounded-lg cursor-default hover:bg-yellow-100 hover:text-yellow-600 active:bg-yellow-400 active:text-yellow-800 transition-all"
+            :class="{ itemClass, 'item-selected': selected == idx }"
+            @click="sendCommand(idx)"
             :key="idx"
           >
             {{ item }}
@@ -114,6 +135,10 @@ const onMouseLeave = () => {
 </template>
 
 <style scoped>
+.item-selected {
+  @apply bg-yellow-100 text-yellow-600;
+}
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
diff --git a/src/components/MySelect.vue b/src/components/MySelect.vue
new file mode 100644
index 00000000..7398abf1
--- /dev/null
+++ b/src/components/MySelect.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { PropType } from 'vue'
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<string[]>,
+    required: true,
+  },
+  selectorClass: {
+    type: String,
+  },
+  selectorStyle: {
+    type: Object as PropType<Record<string, any>>,
+  },
+  itemClass: {
+    type: String,
+  },
+  modelValue: {
+    type: Number,
+    default: -1,
+  },
+  middle: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const selectionChange = (idx: number) => {
+  emit('update:modelValue', idx)
+  if (idx === props.modelValue) {
+    return
+  }
+  emit('change', idx)
+}
+</script>
+
+<template>
+  <MyDropdown
+    :items="items"
+    :item-class="itemClass"
+    :selected="modelValue"
+    :middle="middle"
+    @command="selectionChange"
+  >
+    <div
+      class="w-fit rounded-full py-1 px-3 flex flex-row justify-between"
+      :class="selectorClass"
+      :style="selectorStyle"
+    >
+      <div class="mr-4">{{ modelValue == -1 ? '' : items[modelValue] }}</div>
+      <i class="bi bi-chevron-down" />
+    </div>
+  </MyDropdown>
+</template>
+
+<style scoped></style>
diff --git a/src/components/MyTextSwitch.vue b/src/components/MyTextSwitch.vue
new file mode 100644
index 00000000..67341949
--- /dev/null
+++ b/src/components/MyTextSwitch.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+  },
+  leftText: {
+    type: String,
+    required: true,
+  },
+  rightText: {
+    type: String,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const max = (a: number, b: number) => (a > b ? a : b)
+
+const leftRef = ref<HTMLElement>()
+const rightRef = ref<HTMLElement>()
+
+const unitWidth = computed(() => {
+  if (!leftRef.value || !rightRef.value) return 0
+  return max(leftRef.value.scrollWidth, rightRef.value.scrollWidth) + 10
+})
+
+const sliderTransform = computed(() => {
+  return {
+    transform: props.modelValue
+      ? 'translateX(0)'
+      : `translateX(calc(${unitWidth.value}px + 5px))`,
+  }
+})
+
+watch(unitWidth, () => {
+  console.log('width: ' + unitWidth.value.toString())
+})
+
+const switchState = () => {
+  console.log('width: ' + unitWidth.value.toString())
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <div
+    class="ml-3 rounded-full flex flex-row py-1 bg-white relative cursor-pointer"
+    :style="{ width: `calc(${unitWidth}px * 2 + 10px)` }"
+    @click="switchState"
+  >
+    <div
+      class="rounded-full bg-blue-500 absolute top-0 bottom-0 z-0 transition-all"
+      :style="{ width: `calc(${unitWidth}px + 5px)`, ...sliderTransform }"
+    ></div>
+    <div
+      ref="leftRef"
+      class="rounded-full absolute z-10 left-0 text-center transition-all text-nowrap"
+      :class="{ 'text-white': modelValue }"
+      :style="{ width: `${unitWidth}px` }"
+    >
+      {{ leftText }}
+    </div>
+    <div
+      ref="rightRef"
+      class="rounded-full absolute z-10 right-0 text-center transition-all text-nowrap"
+      :class="{ 'text-white': !modelValue }"
+      :style="{ width: `${unitWidth}px` }"
+    >
+      {{ rightText }}
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/MyTooltip.vue b/src/components/MyTooltip.vue
index 4a02950c..4ac6362e 100644
--- a/src/components/MyTooltip.vue
+++ b/src/components/MyTooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { PropType, ref } from 'vue'
+import { computed, PropType, ref } from 'vue'
 
-defineProps({
+const props = defineProps({
   content: {
     type: String,
     required: false,
@@ -14,6 +14,10 @@ defineProps({
     type: String,
     default: '300px',
   },
+  middle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const wrapperStyles: Record<string, any> = {
@@ -41,8 +45,27 @@ const wrapperStyles: Record<string, any> = {
 }
 
 const showTooltip = ref(false)
+const wrapperRef = ref<HTMLElement>()
+const dropdownRef = ref<HTMLElement>()
 let timer: NodeJS.Timeout | number | undefined = undefined
 
+const transform = computed(() => {
+  if (!wrapperRef.value || !dropdownRef.value) return {}
+  if (props.placement === 'top' || props.placement === 'bottom') {
+    return wrapperRef.value.clientWidth >= dropdownRef.value.clientWidth
+      ? {}
+      : {
+          transform: `translateX(-${((dropdownRef.value.clientWidth - wrapperRef.value.clientWidth) / 2).toFixed(0)}px)`,
+        }
+  } else {
+    return wrapperRef.value.clientHeight >= dropdownRef.value.clientHeight
+      ? {}
+      : {
+          transform: `translateY(-${((dropdownRef.value.clientHeight - wrapperRef.value.clientHeight) / 2).toFixed(0)}px)`,
+        }
+  }
+})
+
 const hideTooltip = () => {
   showTooltip.value = false
   clearTimeout(timer)
@@ -65,18 +88,20 @@ const onMouseLeave = () => {
 
 <template>
   <div class="relative">
-    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
+    <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="wrapperRef">
       <slot />
     </div>
 
     <Transition name="fade">
       <div
-        class="absolute min-w-full min-h-full overflow-visible flex flex-row z-50"
-        :style="{ ...wrapperStyles[placement], width: maxWidth }"
+        class="absolute min-w-full min-h-full w-max overflow-visible flex flex-row z-50"
+        :style="{ ...wrapperStyles[placement], maxWidth: maxWidth }"
         v-if="showTooltip"
       >
         <div
           class="p-2 bg-opacity-80 bg-black rounded-lg text-gray-100 w-fit h-fit text-left"
+          ref="dropdownRef"
+          :style="middle ? transform : undefined"
           @mouseenter="onMouseEnter"
           @mouseleave="onMouseLeave"
         >
diff --git a/src/components/TopHeader.vue b/src/components/TopHeader.vue
index d2d7ae48..4f022e56 100644
--- a/src/components/TopHeader.vue
+++ b/src/components/TopHeader.vue
@@ -110,21 +110,21 @@ const winMin = () => {
       />
     </div>
     <div class="example focus drag" style="width: 35vw">
-      <div class="traffic-lights no-drag mt-2">
-        <button
+      <div class="traffic-lights no-drag mt-2 flex flex-row py-3">
+        <div
           class="traffic-light traffic-light-maximize mx-1"
           id="maximize"
-        ></button>
-        <button
+        ></div>
+        <div
           class="traffic-light traffic-light-minimize mx-1"
           id="minimize"
           @click="winMin"
-        ></button>
-        <button
+        ></div>
+        <div
           class="traffic-light traffic-light-close mx-1"
           id="close"
           @click="winClose"
-        ></button>
+        ></div>
       </div>
     </div>
   </div>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 8b621b40..e957ff89 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -28,7 +28,7 @@ const i18n = createI18n<[MessageSchema], Lang>({
 
 export default i18n
 
-export const availableLangCodes = [
+export const availableLangCodes: Lang[] = [
   'en_US',
   'zh_CN',
   'zh_TW',
@@ -36,7 +36,7 @@ export const availableLangCodes = [
   'ja_JP',
   'fr_FR',
 ]
-export const availableLangNames = [
+export const availableLangNames: string[] = [
   'English',
   '简体中文',
   '繁體中文',
diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index ffa90209..f0889504 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -61,13 +61,13 @@ const defaultBG = computed(() => {
 const prefFont = computed(() => {
   switch (game) {
     case 'gs':
-      return 'gs'
+      return 'font-gs'
     case 'sr':
-      return 'sr-sans'
+      return 'font-sr-sans'
     case 'hi3':
-      return 'normal'
+      return 'font-bold'
   }
-  return 'normal'
+  return 'font-normal'
 })
 let dialogComponent: Component = GenshinDialog
 const launcherInfo = ref<LauncherInfo>({
@@ -352,7 +352,7 @@ const refresh = () => {
         "
         :postTypeMap="postTypeMap"
         class="absolute left-16 top-96 z-50 rounded-xl backdrop-blur-md pl-3 pr-1"
-        :class="`font-${prefFont}`"
+        :class="prefFont"
         style="
           height: 112px;
           width: 396px;
@@ -380,7 +380,7 @@ const refresh = () => {
           >
             <div
               class="mx-2 my-3 flex flex-row rounded-full bg-yellow-400"
-              :class="`font-${prefFont}`"
+              :class="prefFont"
             >
               <button
                 @click="launchGame"
@@ -398,9 +398,10 @@ const refresh = () => {
                   $t('general_clearGamePath'),
                   $t('general_clearProfileInfo'),
                 ]"
+                middle
               >
                 <button
-                  class="text-xl text-gray-900 px-2 h-16 rounded-full hover:bg-yellow-500 transition-all"
+                  class="text-xl text-gray-900 px-2 h-16 rounded-full hover:bg-yellow-500 transition-all font-gs"
                 >
                   …
                 </button>
diff --git a/src/pages/GenshinPage/Components/GSImportDialog.vue b/src/pages/GenshinPage/Components/GSImportDialog.vue
index bb43813c..415d56e0 100644
--- a/src/pages/GenshinPage/Components/GSImportDialog.vue
+++ b/src/pages/GenshinPage/Components/GSImportDialog.vue
@@ -124,7 +124,8 @@ const onDialogOk = () => {
         />
         <MyTooltip
           placement="right"
-          max-width="500px"
+          max-width="400px"
+          middle
           :content="`<${translate('general_launcherDirectory')}>\\Genshin Impact Game\\YuanShen.exe`"
         >
           <div
diff --git a/src/pages/GenshinPage/Components/GenshinDialog.vue b/src/pages/GenshinPage/Components/GenshinDialog.vue
index 3bc69898..78df4dca 100644
--- a/src/pages/GenshinPage/Components/GenshinDialog.vue
+++ b/src/pages/GenshinPage/Components/GenshinDialog.vue
@@ -8,8 +8,10 @@ const props = defineProps({
     default: '50%',
   },
   title: {
-    type: String,
-    default: 'Template GS Dialog',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return 'Template GS Dialog'
+    },
   },
   showCancel: {
     type: Boolean,
@@ -20,8 +22,10 @@ const props = defineProps({
     default: true,
   },
   msg: {
-    type: String,
-    default: '',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return ''
+    },
   },
   msgCenter: {
     type: Boolean,
@@ -38,7 +42,7 @@ const props = defineProps({
     default: true,
   },
   vnode: {
-    type: Object as PropType<VNode>,
+    type: Object as PropType<() => VNode | undefined>,
     default: undefined,
   },
 })
@@ -136,7 +140,7 @@ defineExpose({
           <div>
             <div class="pt-4 ml-6 mr-6">
               <div class="text-center w-full font-gs text-xl text-black">
-                {{ title }}
+                {{ typeof title === 'string' ? title : title() }}
               </div>
             </div>
             <div class="w-full flex flex-row justify-center mt-1">
@@ -168,7 +172,7 @@ defineExpose({
                 class="font-gs px-5"
                 :class="msgCenter ? 'text-center' : 'text-left'"
               >
-                {{ msg }}
+                {{ typeof msg === 'string' ? msg : msg() }}
               </div>
               <component :is="vnode" />
               <slot />
diff --git a/src/pages/GenshinPage/Components/GenshinInfoCard.vue b/src/pages/GenshinPage/Components/GenshinInfoCard.vue
index 6e1ee926..473cdca1 100644
--- a/src/pages/GenshinPage/Components/GenshinInfoCard.vue
+++ b/src/pages/GenshinPage/Components/GenshinInfoCard.vue
@@ -35,6 +35,7 @@ const charsScrollbar = ref()
 const showcaseIdx = ref(0)
 const showCostume = ref(false)
 const retriedCache = ref(false)
+const retriedCompleteCache = ref(false)
 const elementAssets = {
   cryo: {
     bg: '../../src/assets/elementBgs/cryo.png',
@@ -168,8 +169,19 @@ const requestInfo = () => {
       ) {
         retriedCache.value = true
         window.enka.updateCache().then(requestInfo)
+      } else if (
+        err
+          .toString()
+          .startsWith(
+            "Error: Error invoking remote method 'enka:getGenshinPlayer': Error: Complete Genshin data cache not found.",
+          ) &&
+        !retriedCompleteCache.value
+      ) {
+        retriedCompleteCache.value = true
+        window.enka.updateCache().then(requestInfo)
       } else {
         retriedCache.value = false
+        retriedCompleteCache.value = false
         playerInfoLoading.value = false
         playerInfoFailed.value = true
       }
diff --git a/src/pages/Honkai3Page/Components/HI3ImportDialog.vue b/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
index a8efc608..229d820f 100644
--- a/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
+++ b/src/pages/Honkai3Page/Components/HI3ImportDialog.vue
@@ -135,7 +135,8 @@ const onDialogOk = () => {
         />
         <MyTooltip
           placement="right"
-          max-width="500px"
+          max-width="400px"
+          middle
           :content="`<${translate('general_launcherDirectory')}>\\Games\\BH3.exe`"
         >
           <div
diff --git a/src/pages/Honkai3Page/Components/Honkai3Dialog.vue b/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
index 40edeac5..1c767cf0 100644
--- a/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
+++ b/src/pages/Honkai3Page/Components/Honkai3Dialog.vue
@@ -8,8 +8,10 @@ const props = defineProps({
     default: '50%',
   },
   title: {
-    type: String,
-    default: 'Template HK3 Dialog',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return 'Template GS Dialog'
+    },
   },
   showCancel: {
     type: Boolean,
@@ -20,8 +22,10 @@ const props = defineProps({
     default: true,
   },
   msg: {
-    type: String,
-    default: '',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return ''
+    },
   },
   msgCenter: {
     type: Boolean,
@@ -38,7 +42,7 @@ const props = defineProps({
     default: true,
   },
   vnode: {
-    type: Object as PropType<VNode>,
+    type: Object as PropType<() => VNode | undefined>,
     default: undefined,
   },
 })
@@ -109,7 +113,7 @@ defineExpose({
               class="text-center w-full font-bold text-2xl"
               style="color: #51c3f9"
             >
-              {{ title }}
+              {{ typeof title === 'string' ? title : title() }}
             </div>
             <div
               class="text-center w-full opacity-60 text-xs font-bold"
@@ -129,7 +133,7 @@ defineExpose({
                   class="px-5 text-lg"
                   :class="msgCenter ? 'text-center' : 'text-left'"
                 >
-                  {{ msg }}
+                  {{ typeof msg === 'string' ? msg : msg() }}
                 </div>
                 <component :is="vnode" />
                 <slot />
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 318b797e..af427e89 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -3,13 +3,14 @@ import { h, onMounted, ref } from 'vue'
 import {
   availableLangCodes,
   availableLangNames,
-  Lang,
   str2Lang,
   translate,
+  translateWithLocale,
 } from '../i18n'
 import { dialogComponent, DialogStyle } from '../types/dialog/dialog'
 import { useDialog } from '../utils/template-dialog'
 import { useRouter } from 'vue-router'
+import MySelect from '../components/MySelect.vue'
 
 const router = useRouter()
 
@@ -22,7 +23,7 @@ const bgPath = ref('')
 const dialogStyle = ref<DialogStyle>('gs')
 
 const DEFAULT_BG = '../../src/assets/gsbanner.png'
-const lang = ref<Lang | null>(null)
+const lang = ref(0)
 
 onMounted(async () => {
   gsGamePath.value = await window.store.get('gsGamePath')
@@ -37,43 +38,49 @@ onMounted(async () => {
     }
     dialogStyle.value = style
 
-    lang.value = str2Lang(localStorage.getItem('lang'))
-    if (!lang.value) {
+    const langCode = str2Lang(localStorage.getItem('lang'))
+    if (!langCode) {
       localStorage.setItem('lang', 'en_US')
-      lang.value = 'en_US'
+      lang.value = 0
       useDialog(
         dialogComponent(dialogStyle.value),
         {
           onOk(dispose: () => void) {
-            if (lang.value !== 'en_US') {
+            if (lang.value !== 0) {
+              localStorage.setItem('lang', availableLangCodes[lang.value])
               router.go(0)
             }
             dispose()
           },
           onCancel(dispose: () => void) {
-            if (lang.value !== 'en_US') {
-              router.go(0)
-            }
+            lang.value = 0
             dispose()
           },
         },
         {
-          title: translate('general_welcomeTitle'),
-          msg: translate('general_langText'),
-          vnode: h(
-            'div',
-            {
-              style: {
-                display: 'flex',
-                'flex-direction': 'row',
-                'justify-content': 'center',
-                width: '100%',
-              },
-            },
+          title: () =>
+            translateWithLocale(
+              'general_welcomeTitle',
+              availableLangCodes[lang.value],
+            ),
+          msg: () =>
+            translateWithLocale(
+              'general_langText',
+              availableLangCodes[lang.value],
+            ),
+          vnode: () =>
             h(
-              'select',
+              'div',
               {
                 style: {
+                  display: 'flex',
+                  'flex-direction': 'row',
+                  'justify-content': 'center',
+                  width: '100%',
+                },
+              },
+              h(MySelect, {
+                selectorStyle: {
                   'border-width': '1px',
                   'border-color': '#CEA652',
                   'border-radius': '9999px',
@@ -83,29 +90,14 @@ onMounted(async () => {
                   color: '#886a32',
                   'background-color': '#ECE5D8',
                 },
-                onChange: (e: Event) => {
-                  const target = e.target as HTMLSelectElement
-                  localStorage.setItem('lang', target.value)
-                  lang.value = str2Lang(target.value)
+                items: availableLangNames,
+                modelValue: lang.value,
+                middle: true,
+                onChange: (idx: number) => {
+                  lang.value = idx
                 },
-              },
-              availableLangCodes.map((langCode, i) => {
-                return h(
-                  'option',
-                  {
-                    style: {
-                      'border-width': '1px',
-                      'border-color': '#000000',
-                      color: '#000000',
-                      'background-color': '#ffffff',
-                    },
-                    value: langCode,
-                  },
-                  availableLangNames[i],
-                )
               }),
             ),
-          ),
         },
       )
     }
diff --git a/src/pages/SettingsPage/SettingsPage.vue b/src/pages/SettingsPage/SettingsPage.vue
index ef7859c0..aae68d57 100644
--- a/src/pages/SettingsPage/SettingsPage.vue
+++ b/src/pages/SettingsPage/SettingsPage.vue
@@ -21,9 +21,13 @@ import { useDialog } from '../../utils/template-dialog'
 import UpdateDialogContent from '../../components/UpdateDialogContent.vue'
 import LoadingIcon from '../../components/LoadingIcon.vue'
 import ScrollWrapper from '../../components/ScrollWrapper.vue'
+import MySelect from '../../components/MySelect.vue'
+import MyTextSwitch from '../../components/MyTextSwitch.vue'
 
 const lang = ref<Lang>('en_US')
+const selectedLangIdx = ref(0)
 const dialogStyle = ref<DialogStyle>('gs')
+const selectedDialogStyleIdx = ref(0)
 const transitionShow = ref(false)
 const bgPath = ref('')
 const appVer = ref('')
@@ -56,6 +60,7 @@ const gsCostume = ref(false)
 
 onMounted(async () => {
   lang.value = localStorage.lang || 'en_US'
+  selectedLangIdx.value = availableLangCodes.indexOf(lang.value)
   let a = await window.store.get('quitOnClose')
   if (a === undefined) {
     await window.store.set('quitOnClose', true, false)
@@ -72,6 +77,9 @@ onMounted(async () => {
   }
   bgPath.value = await window.store.get('mainBgPath')
   dialogStyle.value = await window.store.get('dialogStyle')
+  selectedDialogStyleIdx.value = availableDialogStyles.indexOf(
+    dialogStyle.value,
+  )
   transitionShow.value = true
 
   gsCostume.value = await window.store.get('gsCostume')
@@ -175,12 +183,14 @@ const switchGsCostume = () => {
   window.store.set('gsCostume', gsCostume.value, false)
 }
 
-const showLangDialog = () => {
+const showLangDialog = (idx: number) => {
+  lang.value = availableLangCodes[idx]
   useDialog(
     dialogComponent(dialogStyle.value),
     {
       onCancel(dispose: () => void) {
         lang.value = localStorage.lang
+        selectedLangIdx.value = availableLangCodes.indexOf(lang.value)
         dispose()
       },
       onOk(dispose: () => void) {
@@ -203,11 +213,15 @@ const showLangDialog = () => {
 }
 
 const showDialogStyleChange = () => {
+  dialogStyle.value = availableDialogStyles[selectedDialogStyleIdx.value]
   useDialog(
     dialogComponent(dialogStyle.value),
     {
       async onCancel(dispose: () => void) {
         dialogStyle.value = await window.store.get('dialogStyle')
+        selectedDialogStyleIdx.value = availableDialogStyles.indexOf(
+          dialogStyle.value,
+        )
         dispose()
       },
       onOk(dispose: () => void) {
@@ -249,6 +263,7 @@ const showClearDialog = () => {
 
 <template>
   <div
+    class="relative"
     :class="transitionShow ? '' : 'opacity-0 blur-lg scale-90'"
     style="transition-duration: 400ms"
   >
@@ -259,49 +274,26 @@ const showClearDialog = () => {
       />
     </div>
     <ScrollWrapper height="91vh" class="scroll-wrapper absolute z-40">
-      <div class="text-left px-10 pt-10 w-1/2">
+      <div class="text-left px-10 pb-5 w-[52%]">
         <!-- GENERAL -->
         <div class="title">{{ $t('settings_general') }}</div>
         <div class="form-item">
           <div class="h-full py-1">{{ $t('settings_selectLang') }}</div>
-          <select
-            name="language"
+          <MySelect
+            v-model="selectedLangIdx"
+            :items="availableLangNames"
             @change="showLangDialog"
-            v-model="lang"
-            class="border-2 rounded-full py-1 px-2 ml-3 hover:bg-gray-100 transition-all"
-          >
-            <option
-              v-for="(langCode, i) in availableLangCodes"
-              :key="i"
-              :value="langCode"
-            >
-              {{ availableLangNames[i] }}
-            </option>
-          </select>
+            middle
+            selector-class="border-2 bg-white py-1 px-2 hover:bg-gray-100 transition-all"
+          />
         </div>
         <div class="form-item">
           <div class="h-full py-1">{{ $t('settings_whenClosingWindow') }}</div>
-          <div
-            class="ml-3 rounded-full flex flex-row py-1 w-64 bg-white relative cursor-pointer"
-            @click="switchQuitAction"
-          >
-            <div
-              class="rounded-full bg-blue-500 w-1/2 absolute top-0 bottom-0 z-0 transition-all"
-              :class="quitOnClose ? 'left-0' : 'left-32'"
-            ></div>
-            <div
-              class="rounded-full w-1/2 absolute z-10 left-0 text-center transition-all"
-              :class="{ 'text-white': quitOnClose }"
-            >
-              {{ $t('settings_quitOnClose') }}
-            </div>
-            <div
-              class="rounded-full w-1/2 absolute z-10 right-0 text-center transition-all"
-              :class="{ 'text-white': !quitOnClose }"
-            >
-              {{ $t('settings_trayOnClose') }}
-            </div>
-          </div>
+          <MyTextSwitch
+            v-model="quitOnClose"
+            :right-text="$t('settings_trayOnClose')"
+            :left-text="$t('settings_quitOnClose')"
+          />
         </div>
         <div class="form-item">
           <div class="h-full py-1">{{ $t('settings_trayOnLaunch') }}</div>
@@ -324,20 +316,13 @@ const showClearDialog = () => {
         <div class="title">{{ $t('settings_appearance') }}</div>
         <div class="form-item">
           <div class="h-full py-1">{{ $t('settings_dialogStyle') }}</div>
-          <select
-            name="dialogStyle"
+          <MySelect
+            v-model="selectedDialogStyleIdx"
+            :items="availableDialogStyleDescs"
             @change="showDialogStyleChange"
-            v-model="dialogStyle"
-            class="border-2 rounded-full py-1 px-2 ml-3 hover:bg-gray-100 transition-all"
-          >
-            <option
-              v-for="(styleCode, i) in availableDialogStyles"
-              :key="i"
-              :value="styleCode"
-            >
-              {{ availableDialogStyleDescs[i] }}
-            </option>
-          </select>
+            middle
+            selector-class="border-2 bg-white py-1 px-2 hover:bg-gray-100 transition-all"
+          />
         </div>
         <div class="form-item">
           <div class="h-full py-1">{{ $t('settings_gsCostume') }}</div>
@@ -345,7 +330,7 @@ const showClearDialog = () => {
             class="ml-3"
             v-model="gsCostume"
             @change="switchGsCostume"
-          ></CustomSwitch>
+          />
         </div>
 
         <!-- ABOUT -->
@@ -411,7 +396,7 @@ const showClearDialog = () => {
 }
 
 .scroll-wrapper {
-  top: 2vh;
+  top: 0;
   left: 1vw;
   width: 96vw;
   border-radius: 5vh 5vh 0 0;
diff --git a/src/pages/StarRailPage/Components/SRImportDialog.vue b/src/pages/StarRailPage/Components/SRImportDialog.vue
index 1c715dc0..36ef7cf4 100644
--- a/src/pages/StarRailPage/Components/SRImportDialog.vue
+++ b/src/pages/StarRailPage/Components/SRImportDialog.vue
@@ -124,7 +124,8 @@ const onDialogOk = () => {
         />
         <MyTooltip
           placement="right"
-          max-width="500px"
+          max-width="400px"
+          middle
           :content="`<${translate('general_launcherDirectory')}>\\Game\\StarRail.exe`"
         >
           <div
diff --git a/src/pages/StarRailPage/Components/StarRailDialog.vue b/src/pages/StarRailPage/Components/StarRailDialog.vue
index b5f6137a..1b982ec6 100644
--- a/src/pages/StarRailPage/Components/StarRailDialog.vue
+++ b/src/pages/StarRailPage/Components/StarRailDialog.vue
@@ -8,8 +8,10 @@ const props = defineProps({
     default: '50%',
   },
   title: {
-    type: String,
-    default: 'Template SR Dialog',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return 'Template GS Dialog'
+    },
   },
   showCancel: {
     type: Boolean,
@@ -20,8 +22,10 @@ const props = defineProps({
     default: true,
   },
   msg: {
-    type: String,
-    default: '',
+    type: Object as PropType<(() => string) | string>,
+    default: () => {
+      return ''
+    },
   },
   msgCenter: {
     type: Boolean,
@@ -38,7 +42,7 @@ const props = defineProps({
     default: true,
   },
   vnode: {
-    type: Object as PropType<VNode>,
+    type: Object as PropType<() => VNode | undefined>,
     default: undefined,
   },
 })
@@ -102,7 +106,7 @@ defineExpose({
         >
           <div class="pt-4 ml-6 mr-6">
             <div class="text-center w-full font-sr-sans text-xl text-black">
-              {{ title }}
+              {{ typeof title === 'string' ? title : title() }}
             </div>
           </div>
           <div class="w-full flex flex-row justify-center mt-1">
@@ -162,7 +166,7 @@ defineExpose({
               class="font-sr-sans px-5"
               :class="msgCenter ? 'text-center' : 'text-left'"
             >
-              {{ msg }}
+              {{ typeof msg === 'string' ? msg : msg() }}
             </div>
             <component :is="vnode" />
             <slot />
diff --git a/src/pages/StarRailPage/Components/StarRailInfoCard.vue b/src/pages/StarRailPage/Components/StarRailInfoCard.vue
index 44fae37d..65aa13c4 100644
--- a/src/pages/StarRailPage/Components/StarRailInfoCard.vue
+++ b/src/pages/StarRailPage/Components/StarRailInfoCard.vue
@@ -530,15 +530,15 @@ const showCharDetails = (index: number) => {
                 </div>
                 <!-- 右侧第一块：属性 -->
                 <div
-                  class="mt-2 text-gray-200 text-xl text-left w-full rounded-xl px-2 py-3 pl-4 bg-black bg-opacity-20 backdrop-blur-md grid grid-cols-3 grid-rows-2"
+                  class="mt-2 text-gray-200 text-xl text-left w-full rounded-xl px-2 py-3 pl-4 bg-black bg-opacity-20 backdrop-blur-md grid grid-cols-4 grid-rows-2"
                 >
                   <div class="w-full flex flex-row">
                     <StatIcon
                       game="sr"
-                      :stat="character.attributes[0].field"
+                      stat="hp"
                       fill="#d1d5db"
                       class="h-5 w-5"
-                      style="margin-top: 1px"
+                      style="margin-top: 3px"
                     />
                     <span class="text-gray-200 text-right font-sr-sans ml-3">{{
                       Math.floor(character.attributes[0].value) +
@@ -548,10 +548,10 @@ const showCharDetails = (index: number) => {
                   <div class="w-full flex flex-row">
                     <StatIcon
                       game="sr"
-                      :stat="character.attributes[1].field"
+                      stat="atk"
                       fill="#d1d5db"
                       class="h-5 w-5"
-                      style="margin-top: 1px"
+                      style="margin-top: 3px"
                     />
                     <span class="text-gray-200 text-right font-sr-sans ml-3">{{
                       Math.floor(character.attributes[1].value) +
@@ -561,10 +561,10 @@ const showCharDetails = (index: number) => {
                   <div class="w-full flex flex-row">
                     <StatIcon
                       game="sr"
-                      :stat="character.attributes[2].field"
+                      stat="def"
                       fill="#d1d5db"
                       class="h-5 w-5"
-                      style="margin-top: 1px"
+                      style="margin-top: 3px"
                     />
                     <span class="text-gray-200 text-right font-sr-sans ml-3">{{
                       Math.floor(character.attributes[2].value) +
@@ -574,10 +574,42 @@ const showCharDetails = (index: number) => {
                   <div class="w-full flex flex-row">
                     <StatIcon
                       game="sr"
-                      :stat="character.attributes[4].field"
+                      stat="effect_res"
                       fill="#d1d5db"
                       class="h-5 w-5"
-                      style="margin-top: 1px"
+                      style="margin-top: 3px"
+                    />
+                    <span class="text-gray-200 text-right font-sr-sans ml-3"
+                      >{{
+                        (
+                          findField(character.additions, 'effect_res').value *
+                          100
+                        ).toFixed(1)
+                      }}%</span
+                    >
+                  </div>
+                  <div class="w-full flex flex-row">
+                    <StatIcon
+                      game="sr"
+                      stat="spd"
+                      fill="#d1d5db"
+                      class="h-5 w-5"
+                      style="margin-top: 3px"
+                    />
+                    <span class="text-gray-200 text-right font-sr-sans ml-3">{{
+                      (
+                        character.attributes[3].value +
+                        findField(character.additions, 'spd').value
+                      ).toFixed(0)
+                    }}</span>
+                  </div>
+                  <div class="w-full flex flex-row">
+                    <StatIcon
+                      game="sr"
+                      stat="crit_rate"
+                      fill="#d1d5db"
+                      class="h-5 w-5"
+                      style="margin-top: 3px"
                     />
                     <span class="text-gray-200 text-right font-sr-sans ml-3"
                       >{{
@@ -592,10 +624,10 @@ const showCharDetails = (index: number) => {
                   <div class="w-full flex flex-row">
                     <StatIcon
                       game="sr"
-                      :stat="character.attributes[5].field"
+                      stat="crit_dmg"
                       fill="#d1d5db"
                       class="h-5 w-5"
-                      style="margin-top: 1px"
+                      style="margin-top: 3px"
                     />
                     <span class="text-gray-200 text-right font-sr-sans ml-3"
                       >{{
@@ -608,7 +640,7 @@ const showCharDetails = (index: number) => {
                     >
                   </div>
                   <div
-                    class="mx-2 rounded-full text-sm bg-white bg-opacity-20 text-center hover:bg-opacity-30 active:scale-95 active:bg-opacity-40 cursor-default transition-all"
+                    class="mr-2 rounded-full text-sm bg-white bg-opacity-20 text-center hover:bg-opacity-30 active:scale-95 active:bg-opacity-40 cursor-default transition-all"
                     @click="showCharDetails(index)"
                   >
                     <div class="font-sr-sans" style="margin-top: 6px">
@@ -733,7 +765,7 @@ const showCharDetails = (index: number) => {
                     :key="idx"
                     class="h-full flex flex-row cursor-default"
                   >
-                    <MyTooltip placement="left" max-width="500px">
+                    <MyTooltip placement="left" max-width="500px" middle>
                       <template #content>
                         <div class="max-w-md">
                           <div class="font-sr text-xl">
diff --git a/src/style.css b/src/style.css
index 60a455f0..c04e4cb5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -36,6 +36,7 @@ body {
     /*overflow-x: hidden;*/
     /*overflow-y: hidden;*/
     position: fixed;
+    user-select: none;
 }
 
 h1 {
diff --git a/src/types/dialog/dialog.ts b/src/types/dialog/dialog.ts
index acf41d32..c91c428e 100644
--- a/src/types/dialog/dialog.ts
+++ b/src/types/dialog/dialog.ts
@@ -4,7 +4,7 @@ import StarRailDialog from '../../pages/StarRailPage/Components/StarRailDialog.v
 import Honkai3Dialog from '../../pages/Honkai3Page/Components/Honkai3Dialog.vue'
 
 export type DialogStyle = 'gs' | 'sr' | 'hi3'
-export const availableDialogStyles = ['gs', 'sr', 'hi3']
+export const availableDialogStyles: DialogStyle[] = ['gs', 'sr', 'hi3']
 export const availableDialogStyleDescs = [
   translate('general_gs'),
   translate('general_sr'),
diff --git a/src/utils/template-dialog.ts b/src/utils/template-dialog.ts
index bc5b6cd1..ae460c6f 100644
--- a/src/utils/template-dialog.ts
+++ b/src/utils/template-dialog.ts
@@ -11,19 +11,20 @@ export function useDialog(
   props: Record<string, any> = {},
 ) {
   const container = document.createElement('div')
-  const dialogVNode = h(component, {
-    ...props,
-    onOk: () => {
-      essentials && essentials.onOk ? essentials.onOk(dispose) : dispose()
-    },
-    onCancel: () => {
-      essentials && essentials.onCancel
-        ? essentials.onCancel(dispose)
-        : dispose()
-    },
-  })
+  const dialogVNode = () =>
+    h(component, {
+      ...props,
+      onOk: () => {
+        essentials && essentials.onOk ? essentials.onOk(dispose) : dispose()
+      },
+      onCancel: () => {
+        essentials && essentials.onCancel
+          ? essentials.onCancel(dispose)
+          : dispose()
+      },
+    })
 
-  render(dialogVNode, container)
+  render(dialogVNode(), container)
   document.body.appendChild(container)
 
   const dispose = () => {
diff --git a/tsconfig.json b/tsconfig.json
index f022e889..f860c39e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,7 @@
     "src",
     "auto-imports.d.ts",
     "node_modules/.pnpm/unplugin-auto-import@0.17.3/node_modules/unplugin-auto-import/auto-imports.d.ts",
+    "node_modules/.pnpm/unplugin-auto-import@0.17.5/node_modules/unplugin-auto-import/auto-imports.d.ts",
     "node_modules/.pnpm/unplugin-auto-import@0.17.5/node_modules/unplugin-auto-import/auto-imports.d.ts"
   ],
   "references": [