diff --git a/currentVersion.md b/currentVersion.md
index 261d3d11..a03e5fbe 100644
--- a/currentVersion.md
+++ b/currentVersion.md
@@ -8,7 +8,8 @@
 
 - windows下新增便携模式，无需安装即可运行，数据存储在程序目录下的`data`文件夹中，支持自动更新；Linux下新增`rpm`安装包
 - 新增自定义主题功能，主题仓库[PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub)
-- 12个内置主题供选择，如bilibili、二次元、极夜紫、gemini等风格
+- 12个内置主题供选择，如bilibili、二次元、极夜紫等风格
+- 重构了几乎全部页面，优化了数十项UI细节问题
 - 相册页面多项优化，支持显示已选择图片数量，匹配的url列表和记忆过滤器打开状态
 - 插件页面现在可以浏览所有插件列表，查看详情和安装
 - 新增教学引导页面，首次运行时会自动弹出
diff --git a/currentVersion_en.md b/currentVersion_en.md
index d4e70e23..b302eaaf 100644
--- a/currentVersion_en.md
+++ b/currentVersion_en.md
@@ -8,7 +8,8 @@
 
 - Added portable mode on Windows, allowing the program to run without installation. Data is stored in the `data` folder within the program directory, and automatic updates are supported. Added `rpm` installation package for Linux
 - Added custom theme functionality, with a theme repository available at [PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub)
-- 12 built-in themes available, such as bilibili, ACG, Night Purple, gemini styles
+- 12 built-in themes available, such as bilibili, ACG, Night Purple styles
+- Refactored almost all pages, optimizing dozens of UI detail issues
 - Multiple optimizations on the album page, supporting display of the number of selected images, matching URL list, and remembering filter open state
 - Plugin page now allows browsing of all plugin lists, viewing details, and installation
 - Added tutorial guide page, which automatically pops up on first run
diff --git a/src/renderer/components/common/customButton.vue b/src/renderer/components/common/customButton.vue
new file mode 100644
index 00000000..09c0c9cb
--- /dev/null
+++ b/src/renderer/components/common/customButton.vue
@@ -0,0 +1,69 @@
+<template>
+  <button
+    :disabled="disabled"
+    class="flex min-w-fit cursor-pointer items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all duration-fast ease-apple not-disabled:hover:shadow-sm disabled:cursor-not-allowed disabled:opacity-50"
+    :class="classVar"
+    :data-active="active"
+    @click="emit('click')"
+  >
+    <slot name="icon">
+      <component :is="icon" v-if="icon" :size="iconSize" />
+    </slot>
+    <slot>
+      <span
+        :class="textClassVar"
+        :data-active="active"
+        class="[.primary] text-sm leading-[1.4] font-semibold text-secondary"
+        >{{ text }}</span
+      >
+    </slot>
+    <slot name="extra"> </slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const {
+  text,
+  disabled,
+  active = false,
+  icon,
+  iconSize = 16,
+  type = 'primary',
+} = defineProps<{
+  text: string
+  icon: any
+  active?: boolean
+  iconSize?: number
+  disabled?: boolean
+  type?: 'primary' | 'secondary' | 'tab'
+}>()
+
+const textClassVar = computed(() => {
+  switch (type) {
+    case 'primary':
+      return 'text-white'
+    case 'secondary':
+      return 'text-main'
+    case 'tab':
+      return active ? 'text-white' : 'text-secondary'
+    default:
+      return ''
+  }
+})
+
+const classVar = computed(() => {
+  switch (type) {
+    case 'primary':
+      return 'bg-accent text-white not-disabled:hover:bg-accent-hover! not-disabled:hover:-translate-y-px'
+    case 'secondary':
+      return 'border border-border! bg-bg-secondary! text-main! not-disabled:hover:bg-surface-elevated! not-disabled:hover:-translate-y-px'
+    case 'tab':
+      return 'flex-1 text-secondary not-disabled:data-[active=false]:hover:bg-accent/30! data-[active=true]:text-white data-[active=true]:bg-accent!'
+    default:
+      return ''
+  }
+})
+const emit = defineEmits<(e: 'click') => void>()
+</script>
diff --git a/src/renderer/components/common/customInput.vue b/src/renderer/components/common/customInput.vue
new file mode 100644
index 00000000..89738ac9
--- /dev/null
+++ b/src/renderer/components/common/customInput.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="flex flex-col">
+    <label class="mb-2 text-sm font-semibold text-secondary">{{ title }}</label>
+
+    <div class="relative w-full">
+      <input
+        v-model="modelValue"
+        :type="type"
+        class="box-border w-full rounded-md border border-border bg-bg-tertiary p-3 pr-10 text-sm text-main transition-all duration-200 ease-apple focus:border-accent focus:outline-none"
+        :placeholder="placeholder"
+      />
+
+      <button
+        v-if="isPassword"
+        type="button"
+        class="absolute top-1/2 right-3 flex -translate-y-1/2 items-center justify-center text-main"
+        @click="type = type === 'password' ? 'text' : 'password'"
+      >
+        <EyeIcon v-if="type === 'password'" class="text-accent" :size="16" />
+        <EyeClosedIcon v-else class="text-accent" :size="16" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { EyeClosedIcon, EyeIcon } from 'lucide-vue-next'
+import { onMounted, ref } from 'vue'
+const modelValue = defineModel<string>()
+const type = ref('text')
+const {
+  isPassword = false,
+  title,
+  placeholder,
+} = defineProps<{
+  isPassword?: boolean
+  title: string
+  placeholder: string
+}>()
+onMounted(() => {
+  if (isPassword) {
+    type.value = 'password'
+  }
+})
+</script>
diff --git a/src/renderer/components/common/customNavCard.vue b/src/renderer/components/common/customNavCard.vue
new file mode 100644
index 00000000..ea012bbd
--- /dev/null
+++ b/src/renderer/components/common/customNavCard.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="flex cursor-pointer items-center gap-4 rounded-lg border border-border bg-bg-secondary p-4 transition-all duration-200 ease-apple hover:-translate-y-px hover:border-accent hover:shadow-md"
+    @click="emit('click')"
+  >
+    <div class="flex h-[25px] w-[25px] shrink-0 items-center justify-center rounded-lg bg-accent text-white">
+      <component :is="icon" :size="15" />
+    </div>
+    <div class="flex-1">
+      <h4 class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ title }}</h4>
+      <slot name="description">
+        <p v-if="description" class="mt-1 text-xs font-medium text-secondary">{{ description }}</p>
+      </slot>
+    </div>
+    <div v-if="!noarrow" class="text-main transition-all duration-200 ease-apple hover:translate-x-1 hover:text-accent">
+      <ChevronRightIcon :size="16" />
+    </div>
+    <slot name="extra"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronRightIcon } from 'lucide-vue-next'
+const {
+  title,
+  icon,
+  description = '',
+  noarrow = false,
+} = defineProps<{
+  icon: any
+  title: string
+  description?: string
+  noarrow?: boolean
+}>()
+const emit = defineEmits<(e: 'click') => void>()
+</script>
diff --git a/src/renderer/components/common/customSelect.vue b/src/renderer/components/common/customSelect.vue
new file mode 100644
index 00000000..b34e1224
--- /dev/null
+++ b/src/renderer/components/common/customSelect.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="mb-3 flex items-center gap-2 text-sm font-medium text-main">
+    <slot name="icon">
+      <component :is="icon" v-if="icon" :size="iconSize" class="text-accent" />
+    </slot>
+    <span class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ title }}</span>
+  </div>
+  <select
+    v-model="modelValue"
+    class="border-box w-full rounded-md border border-border bg-bg-tertiary p-3 text-sm text-main transition-all duration-200 ease-apple focus:border-accent focus:outline-none"
+  >
+    <template v-if="selectList.length > 0">
+      <option v-for="item in selectList" :key="item.value" :value="item.value">
+        {{ item.label }}
+      </option>
+    </template>
+    <slot name="extra"></slot>
+  </select>
+</template>
+
+<script setup lang="ts">
+const modelValue = defineModel<string>()
+
+const {
+  title,
+  icon,
+  iconSize = 18,
+  selectList = [],
+} = defineProps<{
+  title: string
+  icon: any
+  selectList?: { value: string; label: string }[]
+  iconSize?: number
+}>()
+</script>
diff --git a/src/renderer/components/common/customSwitch.vue b/src/renderer/components/common/customSwitch.vue
index 1807d3d7..7df0af41 100644
--- a/src/renderer/components/common/customSwitch.vue
+++ b/src/renderer/components/common/customSwitch.vue
@@ -1,22 +1,35 @@
 <template>
   <label
-    class="flex cursor-pointer items-center gap-4 rounded-lg border border-border bg-bg p-4 transition-all duration-200 ease-apple hover:border-accent hover:bg-surface hover:shadow-sm"
+    class="flex cursor-pointer items-center gap-4 rounded-lg border border-border p-4 transition-all duration-200 ease-apple hover:border-accent hover:bg-surface hover:shadow-sm"
+    :class="noBorder ? 'border-none' : ''"
   >
     <input v-model="modelValue" type="checkbox" class="peer hidden" />
     <span
-      class="bg-linear-180-r relative h-[28px] w-[52px] shrink-0 rounded-full bg-gray-400/80 shadow-sm transition-all duration-medium ease-standard peer-checked:bg-accent before:absolute before:top-[3px] before:left-[3px] before:h-[22px] before:w-[22px] before:rounded-full before:bg-white before:shadow-sm before:transition-all before:duration-200 before:ease-apple before:content-[''] peer-checked:before:translate-x-[24px]"
+      class="bg-linear-180-r relative shrink-0 rounded-full bg-gray-400/80 shadow-sm transition-all duration-medium ease-standard peer-checked:bg-accent before:absolute before:rounded-full before:bg-white before:shadow-sm before:transition-all before:duration-200 before:ease-apple before:content-[''] peer-checked:before:translate-x-[24px]"
+      :class="
+        small
+          ? 'h-[21px] w-[44px] before:top-[2px] before:left-[2px] before:h-[17px] before:w-[17px]'
+          : 'h-[28px] w-[52px] before:top-[3px] before:left-[3px] before:h-[22px] before:w-[22px]'
+      "
     />
     <div class="flex flex-1 flex-col gap-1">
-      <span class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ props.title }}</span>
-      <span class="text-xs text-secondary/90">{{ props.description }}</span>
+      <span class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ title }}</span>
+      <span class="text-xs text-secondary/90">{{ description }}</span>
     </div>
   </label>
 </template>
 
 <script lang="ts" setup>
 const modelValue = defineModel<boolean>()
-const props = defineProps<{
+const {
+  title = '',
+  description = '',
+  noBorder = false,
+  small = false,
+} = defineProps<{
+  noBorder?: boolean
   title?: string
   description?: string
+  small?: boolean
 }>()
 </script>
diff --git a/src/renderer/components/common/multiSelect.vue b/src/renderer/components/common/multiSelect.vue
new file mode 100644
index 00000000..75a1bf5f
--- /dev/null
+++ b/src/renderer/components/common/multiSelect.vue
@@ -0,0 +1,84 @@
+<template>
+  <div :class="tight ? 'mb-0' : 'mb-3'" class="flex items-center gap-2 text-sm font-medium text-main">
+    <slot name="icon">
+      <component :is="icon" v-if="icon" :size="iconSize" class="text-accent" />
+    </slot>
+    <span class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ title }}</span>
+  </div>
+  <div ref="dropdownRef" class="custom-multiselect relative">
+    <button
+      class="flex h-[28px] w-full cursor-pointer items-center justify-between rounded-md border border-border-secondary px-2 py-1.5 text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:border-accent-hover focus:[.active]:border-accent-hover focus:[.active]:shadow-sm"
+      :class="{ active: dropDownOpen }"
+      @click="toggleDropdown($event)"
+    >
+      <span v-if="choosed?.length === 0" class="text-center text-xs font-semibold text-secondary">{{
+        zeroPlaceholder
+      }}</span>
+      <span v-else class="text-center text-xs font-semibold text-secondary"
+        >{{ choosed?.length }} {{ t('pages.gallery.selected') }}</span
+      >
+      <ChevronDownIcon :size="16" />
+    </button>
+    <div
+      v-show="dropDownOpen"
+      class="multiselect-dropdown shadow-lg; fixed z-1000 mt-[2px] no-scrollbar max-h-[280px] min-w-[185px] overflow-y-auto rounded-md border border-border-secondary bg-bg-tertiary px-2 py-1.5 text-main"
+    >
+      <label
+        v-for="item in allList"
+        :key="item.type"
+        class="flex min-h-[unset] cursor-pointer items-center justify-between px-2 py-1 text-sm leading-[1.4] transition-all duration-fast ease-apple hover:bg-accent/50"
+      >
+        <input v-model="choosed" type="checkbox" :value="item.type" class="m-0" />
+        {{ item.name }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const choosed = defineModel<string[]>('choosed')
+const { t } = useI18n()
+const dropdownRef = ref(null)
+
+const dropDownOpen = ref(false)
+function toggleDropdown(event?: Event) {
+  dropDownOpen.value = !dropDownOpen.value
+  if (dropDownOpen.value && event) {
+    nextTick(() => {
+      const trigger = event.target as HTMLElement
+      const dropdown = trigger.parentElement?.querySelector('.multiselect-dropdown') as HTMLElement
+      if (dropdown && trigger) {
+        const rect = trigger.getBoundingClientRect()
+        dropdown.style.top = `${rect.bottom + 2}px`
+        dropdown.style.left = `${rect.left}px`
+        dropdown.style.width = `${Math.max(rect.width, 200)}px`
+      }
+    })
+  }
+}
+
+onClickOutside(dropdownRef, () => {
+  dropDownOpen.value = false
+})
+
+const {
+  tight = true,
+  title,
+  icon = null,
+  iconSize = 18,
+  zeroPlaceholder,
+  allList,
+} = defineProps<{
+  tight?: boolean
+  title: string
+  icon?: any
+  iconSize?: number
+  zeroPlaceholder: string
+  allList: any
+}>()
+</script>
diff --git a/src/renderer/components/common/placeholderTable.vue b/src/renderer/components/common/placeholderTable.vue
index 5b89d85f..002c0ec9 100644
--- a/src/renderer/components/common/placeholderTable.vue
+++ b/src/renderer/components/common/placeholderTable.vue
@@ -5,7 +5,7 @@
         <div
           class="bg-linear-150-r m-0 border-b border-border bg-accent/10 px-4 pt-3.5 pb-2 text-sm font-semibold tracking-wide text-secondary"
         >
-          {{ $t(titleList[key]) }}
+          {{ titleList[key] }}
         </div>
         <div class="grid grid-cols-[repeat(auto-fill,minmax(240px,1fr))] gap-0 py-2">
           <div
diff --git a/src/renderer/components/common/settingCard.vue b/src/renderer/components/common/settingCard.vue
new file mode 100644
index 00000000..bca4b70f
--- /dev/null
+++ b/src/renderer/components/common/settingCard.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="relative rounded-lg border border-border bg-bg-secondary shadow-sm" :class="p1 ? 'p-1' : 'p-4'">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { p1 = false } = defineProps<{
+  p1?: boolean
+}>()
+</script>
diff --git a/src/renderer/components/common/settingSection.vue b/src/renderer/components/common/settingSection.vue
new file mode 100644
index 00000000..bce8e4b3
--- /dev/null
+++ b/src/renderer/components/common/settingSection.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full rounded-lg border border-border bg-bg-secondary p-6 shadow-sm">
+    <div class="mb-2 flex items-start gap-3">
+      <div class="mb-2 flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-lg bg-accent text-white">
+        <slot name="icon">
+          <component :is="icon" v-if="icon" :size="iconSize" />
+        </slot>
+      </div>
+      <div>
+        <slot name="title"
+          ><h2 class="mb-2 text-lg font-semibold text-main">{{ title }}</h2></slot
+        >
+        <slot name="description">
+          <p v-if="description !== ''" class="mb-6 text-sm text-secondary">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+    </div>
+
+    <div :class="onlyOneRow ? 'grid grid-cols-1 gap-4' : 'grid grid-cols-2 gap-4 max-md:grid-cols-1'">
+      <slot />
+    </div>
+    <slot name="extra"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const {
+  title,
+  description = '',
+  icon,
+  iconSize = 20,
+  onlyOneRow = false,
+} = defineProps<{
+  title: string
+  description?: string
+  icon: any
+  iconSize?: number
+  onlyOneRow?: boolean
+}>()
+</script>
diff --git a/src/renderer/components/common/singleSelect.vue b/src/renderer/components/common/singleSelect.vue
new file mode 100644
index 00000000..a1864a21
--- /dev/null
+++ b/src/renderer/components/common/singleSelect.vue
@@ -0,0 +1,85 @@
+<template>
+  <div :class="tight ? 'mb-0' : 'mb-3'" class="flex items-center gap-2 text-sm font-medium text-main">
+    <slot name="icon">
+      <component :is="icon" v-if="icon" :size="iconSize" class="text-accent" />
+    </slot>
+    <span class="text-[0.925rem] leading-[1.4] font-semibold text-secondary">{{ title }}</span>
+  </div>
+  <div ref="dropdownRef" class="sort-dropdown relative">
+    <button
+      class="flex h-[28px] w-full cursor-pointer items-center justify-between gap-1 rounded-md border border-border-secondary px-2 py-1.5 text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:border-accent-hover focus:[.active]:border-accent-hover focus:[.active]:shadow-md"
+      :class="{ active: dropDownOpen }"
+      @click="toggleDropdown($event)"
+    >
+      <SortAscIcon v-if="fronticon" :size="14" />
+      <span class="text-center text-xs font-semibold text-secondary">{{ placeholder || modelValue }}</span>
+      <ChevronDownIcon :size="14" />
+    </button>
+    <div
+      v-show="dropDownOpen"
+      class="sort-options fixed z-10 mt-[2px] min-w-[150px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary shadow-lg"
+    >
+      <button
+        v-for="key in keyList"
+        :key="key"
+        class="block min-h-[unset] w-full cursor-pointer border-none bg-bg-tertiary px-2 py-1 text-center text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:bg-accent/50"
+        @click="selectItem(key)"
+      >
+        <slot name="item" :item="key"> {{ key }} </slot>
+      </button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { ChevronDownIcon, SortAscIcon } from 'lucide-vue-next'
+import { nextTick, ref } from 'vue'
+
+const dropdownRef = ref(null)
+const modelValue = defineModel<string>()
+
+function selectItem(key: string) {
+  modelValue.value = key
+  dropDownOpen.value = false
+}
+
+const dropDownOpen = ref(false)
+function toggleDropdown(event?: Event) {
+  dropDownOpen.value = !dropDownOpen.value
+
+  if (dropDownOpen.value && event) {
+    nextTick(() => {
+      const trigger = event.target as HTMLElement
+      const dropdown = trigger.parentElement?.querySelector('.sort-options') as HTMLElement
+      if (dropdown && trigger) {
+        const rect = trigger.getBoundingClientRect()
+        dropdown.style.top = `${rect.bottom + 2}px`
+        dropdown.style.left = `${rect.left}px`
+        dropdown.style.width = `${Math.max(rect.width, 160)}px`
+      }
+    })
+  }
+}
+
+onClickOutside(dropdownRef, () => {
+  dropDownOpen.value = false
+})
+
+const {
+  title,
+  placeholder = '',
+  fronticon = true,
+  keyList,
+  icon = null,
+  tight = true,
+  iconSize = 18,
+} = defineProps<{
+  title: string
+  icon?: any
+  iconSize?: number
+  tight?: boolean
+  placeholder?: string
+  fronticon?: boolean
+  keyList: string[]
+}>()
+</script>
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json
index 8c2c4f42..15e43b71 100644
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -914,6 +914,7 @@
         "chooseSecondPicBedMode": "Choose Second Image Bed Mode",
         "chooseShowedPicBed": "Please select the image bed to display in the menu",
         "clipboardAndNotification": "Clipboard and Notification",
+        "controlShow": "Control Showed PicBeds",
         "copySuccess": "Copy Successful: {content}",
         "customLinkFormat": "Custom Link Format",
         "customLinkFormatDesc": "Set custom link output format",
@@ -936,7 +937,7 @@
         "imageProcessing": "Image Processing Settings",
         "imageProcessingDesc": "Configure image preprocessing options before upload",
         "isAutoListenClipboard": "Automatically listen for clipboard uploads when the software starts.",
-        "manualRname": "Manual Rename",
+        "manualRename": "Manual Rename",
         "placeholder": {
           "categoryFile": "File Related",
           "categoryHash": "Hash Related",
@@ -968,7 +969,7 @@
         "shortUrlServer": "Short URL Service",
         "sinkDomain": "Sink Domain",
         "sinkToken": "Sink Token",
-        "timestampRname": "Timestamp Rename",
+        "timestampRename": "Timestamp Rename",
         "title": "Upload",
         "uploadBehavior": "Upload Behavior",
         "uploadProcessing": "Upload Processing",
diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json
index 883ffa80..5dd569e6 100644
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -914,6 +914,7 @@
         "chooseSecondPicBedMode": "选择第二图床模式",
         "chooseShowedPicBed": "请选择显示在菜单的图床",
         "clipboardAndNotification": "剪贴板和通知",
+        "controlShow": "图床显示控制",
         "copySuccess": "复制成功: {content}",
         "customLinkFormat": "自定义链接格式",
         "customLinkFormatDesc": "设置自定义的链接输出格式",
@@ -936,7 +937,7 @@
         "imageProcessing": "图片预处理设置",
         "imageProcessingDesc": "配置上传前的图片预处理选项",
         "isAutoListenClipboard": "软件启动时自动监听剪贴板上传",
-        "manualRname": "手动重命名",
+        "manualRename": "手动重命名",
         "placeholder": {
           "categoryFile": "文件相关",
           "categoryHash": "哈希相关",
@@ -968,7 +969,7 @@
         "shortUrlServer": "短链接服务",
         "sinkDomain": "Sink 域名",
         "sinkToken": "Sink Token",
-        "timestampRname": "时间戳重命名",
+        "timestampRename": "时间戳重命名",
         "title": "上传",
         "uploadBehavior": "上传行为",
         "uploadProcessing": "上传处理",
diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json
index 33890bac..474a7838 100644
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -914,6 +914,7 @@
         "chooseSecondPicBedMode": "選擇第二圖床模式",
         "chooseShowedPicBed": "請選擇顯示在菜單的圖床",
         "clipboardAndNotification": "剪貼板和通知",
+        "controlShow": "控制顯示的圖床",
         "copySuccess": "複製成功: {content}",
         "customLinkFormat": "自定義鏈接格式",
         "customLinkFormatDesc": "設置自定義的鏈接輸出格式",
@@ -936,7 +937,7 @@
         "imageProcessing": "圖片預處理設置",
         "imageProcessingDesc": "配置上傳前的圖片預處理選項",
         "isAutoListenClipboard": "軟件啟動時自動監聽剪貼板上傳",
-        "manualRname": "手動重命名",
+        "manualRename": "手動重命名",
         "placeholder": {
           "categoryFile": "文件相關",
           "categoryHash": "哈希相關",
@@ -968,7 +969,7 @@
         "shortUrlServer": "短鏈接服務",
         "sinkDomain": "Sink 域名",
         "sinkToken": "Sink Token",
-        "timestampRname": "時間戳重命名",
+        "timestampRename": "時間戳重命名",
         "title": "上傳",
         "uploadBehavior": "上傳行為",
         "uploadProcessing": "上傳處理",
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index 00c4ee68..d75f3fec 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -83,31 +83,12 @@
       >
         <div class="mb-1 flex w-full flex-wrap items-start gap-3">
           <div class="filter-group">
-            <label class="filter-label">{{ t('pages.gallery.picBedType') }}</label>
-            <div class="custom-multiselect relative">
-              <button
-                class="flex h-[28px] w-full cursor-pointer items-center justify-between rounded-md border border-border-secondary px-2 py-1.5 text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:border-accent-hover focus:[.active]:border-accent-hover focus:[.active]:shadow-sm"
-                :class="{ active: picBedDropdownOpen }"
-                @click="togglePicBedDropdown($event)"
-              >
-                <span v-if="choosedPicBed.length === 0">{{ t('pages.gallery.chooseShowedPicBed') }}</span>
-                <span v-else>{{ choosedPicBed.length }} {{ t('pages.gallery.selected') }}</span>
-                <ChevronDownIcon :size="16" />
-              </button>
-              <div
-                v-show="picBedDropdownOpen"
-                class="multiselect-dropdown shadow-lg; fixed z-1000 mt-[2px] no-scrollbar max-h-[280px] min-w-[185px] overflow-y-auto rounded-md border border-border-secondary bg-bg-tertiary px-2 py-1.5 text-main"
-              >
-                <label
-                  v-for="item in filteredPicBedG"
-                  :key="item.type"
-                  class="flex min-h-[unset] cursor-pointer items-center justify-between px-2 py-1 text-sm leading-[1.4] transition-all duration-fast ease-apple hover:bg-accent-hover"
-                >
-                  <input v-model="choosedPicBed" type="checkbox" :value="item.type" class="m-0" />
-                  {{ item.name }}
-                </label>
-              </div>
-            </div>
+            <MultiSelect
+              v-model:choosed="choosedPicBed"
+              :title="t('pages.gallery.picBedType')"
+              :zero-placeholder="t('pages.gallery.chooseShowedPicBed')"
+              :all-list="filteredPicBedG"
+            />
           </div>
 
           <div class="filter-group">
@@ -120,55 +101,42 @@
           </div>
 
           <div class="filter-group">
-            <label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label>
-            <select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange">
-              <option
-                v-for="(value, key) in pasteStyleMap"
-                :key="key"
-                :value="value"
-                class="bg-bg-tertiary text-sm text-main"
-              >
-                {{ key }}
-              </option>
-            </select>
+            <SingleSelect
+              v-model="pasteStyle"
+              :title="t('pages.gallery.pasteFormat')"
+              :fronticon="false"
+              :key-list="pasteStyleList"
+            >
+              <template #item="{ item }">
+                {{ item }}
+              </template>
+            </SingleSelect>
           </div>
 
           <div class="filter-group">
-            <label class="filter-label">{{ t('pages.gallery.urlType') }}</label>
-            <select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange">
-              <option
-                v-for="(value, key) in shortURLMap"
-                :key="key"
-                :value="value"
-                class="bg-bg-tertiary text-sm text-main"
-              >
-                {{ key }}
-              </option>
-            </select>
+            <SingleSelect
+              v-model="useShortUrl"
+              :title="t('pages.gallery.urlType')"
+              :fronticon="false"
+              :key-list="shortURLList"
+            >
+              <template #item="{ item }">
+                {{ item }}
+              </template>
+            </SingleSelect>
           </div>
 
           <div class="filter-group">
-            <label class="filter-label">{{ t('pages.gallery.sort') }}</label>
-            <div class="sort-dropdown relative">
-              <button class="sort-button" :class="{ active: sortDropdownOpen }" @click="toggleSortDropdown($event)">
-                <SortAscIcon :size="14" />
-                {{ t(`pages.gallery.sortBy.${currentSortField}`) }}
-                <ChevronDownIcon :size="14" />
-              </button>
-              <div
-                v-show="sortDropdownOpen"
-                class="sort-options fixed z-10 mt-[2px] min-w-[150px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary shadow-lg"
-              >
-                <button
-                  v-for="key in ['name', 'ext', 'time', 'check']"
-                  :key="key"
-                  class="block min-h-[unset] w-full cursor-pointer border-none bg-bg-tertiary px-2 py-1 text-center text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:bg-accent-hover"
-                  @click="sortFile(key as any)"
-                >
-                  {{ t(`pages.gallery.sortBy.${key}`) }}
-                </button>
-              </div>
-            </div>
+            <SingleSelect
+              v-model="currentSortField"
+              :placeholder="t(`pages.gallery.sortBy.${currentSortField}`)"
+              :title="t('pages.gallery.sort')"
+              :key-list="['name', 'ext', 'time', 'check']"
+            >
+              <template #item="{ item }">
+                {{ t(`pages.gallery.sortBy.${item}`) }}
+              </template>
+            </SingleSelect>
           </div>
         </div>
 
@@ -240,7 +208,7 @@
           :key="componentKey"
           ref="virtualScrollerRef"
           :view-mode="viewMode"
-          class="virtual-gallery-scroller min-h-0 w-full flex-1 p-1"
+          class="virtual-gallery-scroller min-h-0 w-full flex-1 p-3"
           :items="filterList"
           :item-height="300"
           :grid-breakpoints="effectiveGridBreakpoints"
@@ -596,7 +564,6 @@ import {
   ListIcon,
   RefreshCwIcon,
   SearchIcon,
-  SortAscIcon,
   TrashIcon,
   XIcon,
 } from 'lucide-vue-next'
@@ -615,6 +582,8 @@ import { useI18n } from 'vue-i18n'
 import { onBeforeRouteUpdate } from 'vue-router'
 
 import ALLApi from '@/apis/allApi'
+import MultiSelect from '@/components/common/multiSelect.vue'
+import SingleSelect from '@/components/common/singleSelect.vue'
 import VirtualScroller from '@/components/VirtualScroller.vue'
 import useConfirm from '@/hooks/useConfirm'
 import { usePicBed } from '@/hooks/useGlobal'
@@ -663,18 +632,10 @@ const debouncedSearchText = ref<string>('')
 const debouncedSearchTextURL = ref<string>('')
 const handleBarActive = useStorage<boolean>('galleryHandleBarActive', true)
 const pasteStyle = ref<string>('')
-const pasteStyleMap = {
-  Markdown: 'markdown',
-  HTML: 'HTML',
-  URL: 'URL',
-  UBB: 'UBB',
-  Custom: 'Custom',
-}
+const pasteStyleList = ['markdown', 'HTML', 'URL', 'UBB', 'Custom']
 const useShortUrl = ref<string>('')
-const shortURLMap = {
-  [t('pages.gallery.shortUrl')]: t('pages.gallery.shortUrl'),
-  [t('pages.gallery.longUrl')]: t('pages.gallery.longUrl'),
-}
+const shortURLList = [t('pages.gallery.shortUrl'), t('pages.gallery.longUrl')]
+
 const fileSortNameReverse = ref(false)
 const fileSortTimeReverse = ref(false)
 const fileSortExtReverse = ref(false)
@@ -850,41 +811,6 @@ function onPreviewImageLoad() {
   })
 }
 
-function togglePicBedDropdown(event?: Event) {
-  picBedDropdownOpen.value = !picBedDropdownOpen.value
-  if (sortDropdownOpen.value) sortDropdownOpen.value = false
-  if (picBedDropdownOpen.value && event) {
-    nextTick(() => {
-      const trigger = event.target as HTMLElement
-      const dropdown = trigger.parentElement?.querySelector('.multiselect-dropdown') as HTMLElement
-      if (dropdown && trigger) {
-        const rect = trigger.getBoundingClientRect()
-        dropdown.style.top = `${rect.bottom + 2}px`
-        dropdown.style.left = `${rect.left}px`
-        dropdown.style.width = `${Math.max(rect.width, 200)}px`
-      }
-    })
-  }
-}
-
-function toggleSortDropdown(event?: Event) {
-  sortDropdownOpen.value = !sortDropdownOpen.value
-  if (picBedDropdownOpen.value) picBedDropdownOpen.value = false
-
-  if (sortDropdownOpen.value && event) {
-    nextTick(() => {
-      const trigger = event.target as HTMLElement
-      const dropdown = trigger.parentElement?.querySelector('.sort-options') as HTMLElement
-      if (dropdown && trigger) {
-        const rect = trigger.getBoundingClientRect()
-        dropdown.style.top = `${rect.bottom + 2}px`
-        dropdown.style.left = `${rect.left}px`
-        dropdown.style.width = `${Math.max(rect.width, 160)}px`
-      }
-    })
-  }
-}
-
 function navigateImage(direction: number) {
   const newIndex = gallerySliderControl.index + direction
   if (newIndex >= 0 && newIndex < filterList.value.length) {
@@ -1522,23 +1448,19 @@ function toggleHandleBar() {
   handleBarActive.value = !handleBarActive.value
 }
 
-async function handlePasteStyleChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const val = target.value
-  saveConfig(configPaths.settings.pasteStyle, val)
-  pasteStyle.value = val
-}
+watch(pasteStyle, newVal => {
+  saveConfig(configPaths.settings.pasteStyle, newVal)
+})
 
-function handleUseShortUrlChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const value = target.value
-  saveConfig(configPaths.settings.useShortUrl, value === t('pages.gallery.shortUrl'))
-  useShortUrl.value = value
-}
+watch(useShortUrl, newVal => {
+  saveConfig(configPaths.settings.useShortUrl, newVal === t('pages.gallery.shortUrl'))
+})
+
+watch(currentSortField, () => {
+  sortFile(currentSortField.value)
+})
 
 function sortFile(type: 'name' | 'time' | 'ext' | 'check') {
-  sortDropdownOpen.value = false
-  currentSortField.value = type
   switch (type) {
     case 'name':
       fileSortNameReverse.value = !fileSortNameReverse.value
diff --git a/src/renderer/layouts/Main.vue b/src/renderer/pages/Main.vue
similarity index 90%
rename from src/renderer/layouts/Main.vue
rename to src/renderer/pages/Main.vue
index 7a85efca..85eb1787 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/pages/Main.vue
@@ -22,8 +22,8 @@
 import { useRouter } from 'vue-router'
 
 import InputBoxDialog from '@/components/InputBoxDialog.vue'
-import Navigation from '@/components/NavigationPage.vue'
-import TitleBar from '@/components/ui/TitleBar.vue'
+import Navigation from '@/pages/NavigationPage.vue'
+import TitleBar from '@/pages/TitleBar.vue'
 
 const $router = useRouter()
 const keepAlivePages = $router
diff --git a/src/renderer/components/NavigationPage.vue b/src/renderer/pages/NavigationPage.vue
similarity index 99%
rename from src/renderer/components/NavigationPage.vue
rename to src/renderer/pages/NavigationPage.vue
index f962e938..319adf6c 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/pages/NavigationPage.vue
@@ -233,6 +233,8 @@ import { computed, nextTick, onBeforeMount, onBeforeUnmount, reactive, Ref, ref,
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
+import FirstTimeGuide from '@/components/FirstTimeGuide.vue'
+import ThemeSwitcher from '@/components/ui/ThemeSwitcher.vue'
 import { usePicBed } from '@/hooks/useGlobal'
 import useMessage from '@/hooks/useMessage'
 import * as config from '@/router/config'
@@ -240,9 +242,6 @@ import { SHOW_FIRST_TIME_GUIDE, SHOW_MAIN_PAGE_QRCODE } from '@/utils/constant'
 import { getConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
 
-import FirstTimeGuide from './FirstTimeGuide.vue'
-import ThemeSwitcher from './ui/ThemeSwitcher.vue'
-
 const version = ref(pkg.version)
 const isCollapsed = useStorage('navigation-collapsed', false)
 
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 3ab6192b..b6757c04 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -1,995 +1,692 @@
 <template>
-  <div>
-    <div class="piclist-settings">
+  <div class="relative flex h-full w-full items-center justify-center">
+    <div class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-4 rounded-xl border-none p-4">
       <!-- Header -->
-      <div class="settings-header">
-        <div class="header-content">
-          <Settings :size="24" class="header-icon" />
+      <div
+        class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md max-md:items-stretch max-md:p-5"
+      >
+        <div class="flex flex-1 flex-wrap items-center gap-4">
+          <Settings :size="24" class="text-accent" />
           <div>
-            <h1>{{ t('pages.settings.title') }}</h1>
+            <h1 class="m-0 text-2xl font-semibold tracking-tight text-main">{{ t('pages.settings.title') }}</h1>
           </div>
         </div>
-        <div class="header-actions">
-          <button class="btn btn-secondary" @click="goConfigPage">
-            <BookOpen :size="16" />
-            {{ t('pages.settings.docs') }}
-          </button>
+        <div class="flex gap-3">
+          <CustomButton :text="t('pages.settings.docs')" type="secondary" :icon="BookOpen" @click="goConfigPage" />
         </div>
       </div>
 
       <!-- Tab Navigation -->
-      <div class="tab-navigation">
-        <button
+      <div
+        class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md max-md:items-stretch max-md:p-5"
+      >
+        <CustomButton
           v-for="tab in tabs"
           :key="tab.id"
-          class="tab-button"
-          :class="{ active: currentTab === tab.id }"
-          @click="currentTab = tab.id as 'system' | 'sync' | 'upload' | 'advanced' | 'update'"
-        >
-          <component :is="tab.icon" :size="18" />
-          <span>{{ tab.label }}</span>
-        </button>
+          :text="tab.label"
+          :icon="tab.icon"
+          :active="currentTab === tab.id"
+          :icon-size="18"
+          type="tab"
+          @click="tabClick(tab.id)"
+        />
       </div>
 
       <!-- Settings Content -->
-      <div class="settings-content">
+      <div
+        class="relative flex h-full w-full flex-1 items-center justify-center overflow-hidden rounded-2xl border border-border-secondary p-1 shadow-md"
+      >
         <!-- System Settings Tab -->
-        <div v-if="currentTab === 'system'" class="tab-content">
-          <!-- Language & Appearance Section -->
-          <div class="settings-section system-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper language small-icon">
-                <Globe :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.system.languageAndAppearance') }}</h2>
-              </div>
-            </div>
+        <div
+          v-if="currentTab === 'system'"
+          class="border4 no-scrollbar flex h-full w-full flex-1 flex-col gap-6 overflow-auto p-4"
+        >
+          <SettingSection :title="t('pages.settings.system.languageAndAppearance')" :icon="Globe">
+            <SettingCard>
+              <CustomSelect
+                v-model="currentLanguage"
+                :select-list="languageList"
+                :title="t('pages.settings.system.chooseLanguage')"
+                :icon="Globe"
+              />
+            </SettingCard>
 
-            <div class="system-option-grid">
-              <div class="system-option-card">
-                <div class="system-option-header">
-                  <Globe :size="18" />
-                  <span>{{ t('pages.settings.system.chooseLanguage') }}</span>
-                </div>
-                <select v-model="currentLanguage" class="form-select">
-                  <option v-for="item in languageList" :key="item.value" :value="item.value">
-                    {{ item.label }}
-                  </option>
-                </select>
-              </div>
-
-              <div class="system-option-card">
-                <div class="system-option-header">
-                  <Monitor :size="18" />
-                  <span>{{ t('pages.settings.system.startMode') }}</span>
-                </div>
-                <select v-model="currentStartMode" class="form-select">
+            <SettingCard>
+              <CustomSelect v-model="currentStartMode" :title="t('pages.settings.system.startMode')" :icon="Monitor">
+                <template #extra>
                   <option value="quiet">{{ t('pages.settings.system.quietMode') }}</option>
                   <option v-if="osGlobal !== 'darwin'" value="mini">{{ t('pages.settings.system.miniMode') }}</option>
                   <option v-if="osGlobal === 'darwin'" value="no-tray">
                     {{ t('pages.settings.system.noTrayMode') }}
                   </option>
                   <option value="main">{{ t('pages.settings.system.mainMode') }}</option>
-                </select>
-              </div>
-              <!-- Performance & Animation Toggles -->
-              <div class="system-toggle-card">
-                <label class="switch-label">
-                  <input v-model="isDisableGPU" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.isDisableGPU') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.system.isDisableGPUDesc') }}</div>
-                  </div>
-                </label>
-              </div>
+                </template>
+              </CustomSelect>
+            </SettingCard>
 
-              <div class="system-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.enableAdvancedAnimation" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.enableAdvancedAnimation') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.system.enableAdvancedAnimationDesc') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="isDisableGPU"
+                no-border
+                small
+                :title="t('pages.settings.system.isDisableGPU')"
+                :description="t('pages.settings.system.isDisableGPUDesc')"
+              />
+            </SettingCard>
 
-              <div class="system-option-card">
-                <div class="system-option-header">
-                  <ImageIcon :size="18" />
-                  <span>{{ t('pages.settings.system.chooseTheme') }}</span>
-                </div>
-                <select v-model="currentTheme" class="form-select theme-dropdown">
-                  <option v-for="theme in themeList" :key="theme.key" :value="theme.key">
-                    {{ theme.label }}
-                  </option>
-                </select>
-              </div>
-            </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.enableAdvancedAnimation"
+                no-border
+                small
+                :title="t('pages.settings.system.enableAdvancedAnimation')"
+                :description="t('pages.settings.system.enableAdvancedAnimationDesc')"
+              />
+            </SettingCard>
 
-            <div class="theme-actions-grid">
-              <button
-                class="btn btn-secondary theme-action-btn"
-                :disabled="downloadingThemes"
-                @click="handleDownloadThemes"
-              >
-                <Download :size="14" />
-                <span>{{
-                  downloadingThemes
-                    ? t('pages.settings.system.downloadingThemes')
-                    : t('pages.settings.system.downloadThemes')
-                }}</span>
-              </button>
-              <button class="btn btn-secondary theme-action-btn" @click="handleImportThemes">
-                <Import :size="14" />
-                <span>{{ t('pages.settings.system.importThemes') }}</span>
-              </button>
-            </div>
-          </div>
+            <SettingCard>
+              <CustomSelect
+                v-model="currentTheme"
+                :select-list="themeList"
+                :title="t('pages.settings.system.chooseTheme')"
+                :icon="ImageIcon"
+              />
+            </SettingCard>
+            <template #extra>
+              <div class="mt-3 flex gap-4">
+                <CustomButton
+                  :disabled="downloadingThemes"
+                  :text="
+                    downloadingThemes
+                      ? t('pages.settings.system.downloadingThemes')
+                      : t('pages.settings.system.downloadThemes')
+                  "
+                  :icon-size="14"
+                  :icon="Download"
+                  type="secondary"
+                  @click="handleDownloadThemes"
+                />
+                <CustomButton
+                  :icon="Import"
+                  :text="t('pages.settings.system.importThemes')"
+                  type="secondary"
+                  :icon-size="14"
+                  @click="handleImportThemes"
+                />
+              </div>
+            </template>
+          </SettingSection>
 
           <!-- Window Behavior Section -->
-          <div class="settings-section system-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper window small-icon">
-                <Monitor :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.system.windowBehavior') }}</h2>
-              </div>
-            </div>
-
+          <SettingSection :icon="Monitor" :title="t('pages.settings.system.windowBehavior')">
             <!-- Main Window Size Card -->
-            <div class="window-size-card" @click="mainWindowSizeVisible = true">
-              <div class="window-size-icon">
-                <Monitor :size="15" />
-              </div>
-              <div class="window-size-info">
-                <h4>{{ t('pages.settings.system.mainWindowSize') }}</h4>
-              </div>
-              <div class="window-size-arrow">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 18l6-6-6-6" />
-                </svg>
-              </div>
-            </div>
 
+            <CustomNavCard
+              :title="t('pages.settings.system.mainWindowSize')"
+              :icon="Monitor"
+              @click="mainWindowSizeVisible = true"
+            />
             <!-- Window Behavior Toggles -->
-            <div class="system-toggles-grid">
-              <div v-if="osGlobal === 'darwin'" class="system-toggle-card">
-                <label class="switch-label">
-                  <input
-                    v-model="formOfSetting.isHideDock"
-                    type="checkbox"
-                    class="switch-input"
-                    @change="handleHideDockChange(formOfSetting.isHideDock)"
-                  />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.isHideDock') }}</div>
-                  </div>
-                </label>
-              </div>
 
-              <div v-if="osGlobal !== 'darwin'" class="system-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.autoCloseMiniWindow" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.autoCloseMiniWindow') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard v-if="osGlobal === 'darwin'" p1>
+              <CustomSwitch
+                v-model="formOfSetting.isHideDock"
+                small
+                no-border
+                :title="t('pages.settings.system.isHideDock')"
+                @change="handleHideDockChange(formOfSetting.isHideDock)"
+              />
+            </SettingCard>
 
-              <div v-if="osGlobal !== 'darwin'" class="system-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.autoCloseMainWindow" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.autoCloseMainWindow') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard v-if="osGlobal !== 'darwin'" p1>
+              <CustomSwitch
+                v-model="formOfSetting.autoCloseMiniWindow"
+                small
+                no-border
+                :title="t('pages.settings.system.autoCloseMiniWindow')"
+              />
+            </SettingCard>
 
-              <div v-if="osGlobal !== 'darwin'" class="system-toggle-card">
-                <label class="switch-label">
-                  <input
-                    v-model="formOfSetting.miniWindowOntop"
-                    type="checkbox"
-                    class="switch-input"
-                    @change="handleMiniWindowOntop(formOfSetting.miniWindowOntop)"
-                  />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.miniWindowOnTop') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard v-if="osGlobal !== 'darwin'" p1>
+              <CustomSwitch
+                v-model="formOfSetting.autoCloseMainWindow"
+                small
+                no-border
+                :title="t('pages.settings.system.autoCloseMainWindow')"
+              />
+            </SettingCard>
 
-              <div v-if="osGlobal !== 'darwin'" class="system-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.isCustomMiniIcon" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.isCustomMiniIcon') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard v-if="osGlobal !== 'darwin'" p1>
+              <CustomSwitch
+                v-model="formOfSetting.miniWindowOntop"
+                small
+                no-border
+                :title="t('pages.settings.system.miniWindowOnTop')"
+                @click="handleMiniWindowOntop(formOfSetting.miniWindowOntop)"
+              />
+            </SettingCard>
 
-              <div
-                v-if="osGlobal !== 'darwin' && formOfSetting.isCustomMiniIcon"
-                class="system-toggle-card with-action"
-              >
-                <div class="toggle-with-action-content">
-                  <ImageIcon :size="18" />
-                  <span>{{ t('pages.settings.system.customMiniIconPath') }}</span>
-                </div>
+            <SettingCard v-if="osGlobal !== 'darwin'" p1>
+              <CustomSwitch
+                v-model="formOfSetting.isCustomMiniIcon"
+                small
+                no-border
+                :title="t('pages.settings.system.isCustomMiniIcon')"
+              />
+            </SettingCard>
+
+            <CustomNavCard
+              v-if="osGlobal !== 'darwin' && formOfSetting.isCustomMiniIcon"
+              :icon="ImageIcon"
+              noarrow
+              :title="t('pages.settings.system.customMiniIconPath')"
+            >
+              <template #extra>
                 <button class="btn btn-secondary btn-sm" @click="handleMiniIconPath">
                   {{ t('pages.settings.clickToSet') }}
                 </button>
-              </div>
-            </div>
-          </div>
+              </template>
+            </CustomNavCard>
+          </SettingSection>
           <!-- Startup & Shortcuts Section -->
-          <div class="settings-section system-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper startup small-icon">
-                <Keyboard :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.system.startupAndShortcuts') }}</h2>
-              </div>
-            </div>
-
-            <div class="startup-options-grid">
-              <!-- Auto Launch Toggle -->
-              <div class="startup-toggle-card">
-                <label class="switch-label">
-                  <input
-                    v-model="formOfSetting.autoStart"
-                    type="checkbox"
-                    class="switch-input"
-                    @change="handleAutoStartChange(formOfSetting.autoStart)"
-                  />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.system.autoLaunch') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.system.autoLaunchDesc') }}</div>
-                  </div>
-                </label>
-              </div>
-
-              <!-- Shortcuts Action Card -->
-              <div class="shortcut-action-card" @click="goShortCutPage">
-                <div class="shortcut-action-icon">
-                  <Keyboard :size="22" />
-                </div>
-                <div class="shortcut-action-info">
-                  <h4>{{ t('pages.settings.system.setShortCuts') }}</h4>
-                  <p>{{ t('pages.settings.system.setShortCutsDesc') }}</p>
-                </div>
-                <div class="shortcut-action-arrow">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18l6-6-6-6" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
+          <SettingSection :icon="Keyboard" :title="t('pages.settings.system.startupAndShortcuts')">
+            <!-- Auto Launch Toggle -->
+            <CustomSwitch
+              v-model="formOfSetting.autoStart"
+              small
+              :title="t('pages.settings.system.autoLaunch')"
+              :description="t('pages.settings.system.autoLaunchDesc')"
+              @change="handleAutoStartChange(formOfSetting.autoStart)"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.system.setShortCuts')"
+              :description="t('pages.settings.system.setShortCutsDesc')"
+              :icon="Keyboard"
+              @click="goShortCutPage"
+            />
+          </SettingSection>
         </div>
 
         <!-- Sync & Configure Tab -->
-        <div v-if="currentTab === 'sync'" class="tab-content">
+        <div
+          v-if="currentTab === 'sync'"
+          class="border4 no-scrollbar flex h-full w-full flex-1 flex-col gap-6 overflow-auto p-4"
+        >
           <!-- Sync Status Overview -->
-          <div class="sync-overview-card">
-            <div class="sync-overview-header">
-              <div class="sync-overview-icon">
-                <RotateCcw :size="28" />
-              </div>
-              <div class="sync-overview-info">
-                <h2>{{ t('pages.settings.sync.syncConfiguration') }}</h2>
-                <p class="sync-status-text">
-                  <span class="sync-type-badge">{{ sync.type?.toUpperCase() || 'N/A' }}</span>
-                  <span v-if="sync.type !== 'webdav' && sync.username"
-                    >{{ sync.username }}/{{ sync.repo || '...' }}</span
-                  >
-                  <span v-else-if="sync.type === 'webdav' && sync.webdavEndpoint">{{ sync.webdavEndpoint }}</span>
-                  <span v-else class="sync-not-configured">{{ t('pages.settings.sync.notConfigured') }}</span>
-                </p>
-              </div>
-            </div>
-            <button class="btn btn-primary sync-config-btn" @click="syncVisible = true">
-              <Settings :size="16" />
-              {{ t('pages.settings.sync.configureSync') }}
-            </button>
-          </div>
+          <CustomNavCard noarrow :icon="RotateCcw" :title="t('pages.settings.sync.syncConfiguration')">
+            <template #description>
+              <p class="flex items-center gap-2 text-sm text-secondary">
+                <span
+                  class="inline-flex items-center rounded-sm bg-bg-tertiary px-2 py-1 text-xs font-semibold tracking-wide text-accent"
+                  >{{ sync.type?.toUpperCase() || 'N/A' }}</span
+                >
+                <span v-if="sync.type !== 'webdav' && sync.username" class="m-0 text-sm text-secondary"
+                  >{{ sync.username }}/{{ sync.repo || '...' }}</span
+                >
+                <span v-else-if="sync.type === 'webdav' && sync.webdavEndpoint" class="m-0 text-sm text-secondary">{{
+                  sync.webdavEndpoint
+                }}</span>
+                <span v-else class="text-sm font-semibold text-danger/70 italic">{{
+                  t('pages.settings.sync.notConfigured')
+                }}</span>
+              </p>
+            </template>
+            <template #extra>
+              <CustomButton
+                :icon="Settings"
+                :text="t('pages.settings.sync.configureSync')"
+                type="secondary"
+                @click="syncVisible = true"
+              />
+            </template>
+          </CustomNavCard>
 
           <!-- Sync Actions Section -->
-          <div class="settings-section sync-actions-section">
-            <div class="section-header-with-icon">
-              <CloudUpload :size="30" class="section-icon" />
-              <div>
-                <h2>{{ t('pages.settings.sync.syncActions') }}</h2>
-              </div>
-            </div>
+          <SettingSection :icon="CloudUpload" :title="t('pages.settings.sync.syncActions')">
+            <CustomNavCard
+              :title="t('pages.settings.sync.upDownloadSettings')"
+              :icon="CloudUpload"
+              :description="t('pages.settings.sync.upDownloadDesc')"
+              @click="() => (upDownConfigVisible = true)"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.sync.migrateFromPicGo')"
+              :icon="Import"
+              :description="t('pages.settings.sync.migrateDesc')"
+              @click="handleMigrateFromPicGo"
+            />
 
-            <div class="sync-action-cards">
-              <div class="sync-action-card" @click="upDownConfigVisible = true">
-                <div class="sync-action-icon upload">
-                  <CloudUpload :size="24" />
-                </div>
-                <div class="sync-action-content">
-                  <h4>{{ t('pages.settings.sync.upDownloadSettings') }}</h4>
-                  <p>{{ t('pages.settings.sync.upDownloadDesc') }}</p>
-                </div>
-                <div class="sync-action-arrow">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18l6-6-6-6" />
-                  </svg>
-                </div>
-              </div>
-
-              <div class="sync-action-card" @click="handleMigrateFromPicGo">
-                <div class="sync-action-icon migrate">
-                  <Import :size="24" />
-                </div>
-                <div class="sync-action-content">
-                  <h4>{{ t('pages.settings.sync.migrateFromPicGo') }}</h4>
-                  <p>{{ t('pages.settings.sync.migrateDesc') }}</p>
-                </div>
-                <div class="sync-action-arrow">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18l6-6-6-6" />
-                  </svg>
-                </div>
-              </div>
-              <div v-if="isPortable" class="sync-action-card" @click="handleMigrateFromPicListInstallation">
-                <div class="sync-action-icon migrate">
-                  <Import :size="24" />
-                </div>
-                <div class="sync-action-content">
-                  <h4>{{ t('pages.settings.sync.migrateFromPicListInstallation') }}</h4>
-                  <p>{{ t('pages.settings.sync.migrateDescPicList') }}</p>
-                </div>
-                <div class="sync-action-arrow">
-                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18l6-6-6-6" />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
+            <CustomNavCard
+              v-if="isPortable"
+              :title="t('pages.settings.sync.migrateFromPicListInstallation')"
+              :icon="Import"
+              :description="t('pages.settings.sync.migrateDescPicList')"
+              @click="handleMigrateFromPicListInstallation"
+            />
+          </SettingSection>
 
           <!-- File Management Section -->
-          <div class="settings-section file-management-section">
-            <div class="section-header-with-icon">
-              <FolderOpen :size="30" class="section-icon" />
-              <div>
-                <h2>{{ t('pages.settings.sync.fileManagement') }}</h2>
-              </div>
-            </div>
-
-            <div class="file-action-grid">
-              <button class="file-action-btn" @click="openFile('data.json')">
-                <FileText :size="20" />
-                <span>{{ t('pages.settings.sync.openConfigFile') }}</span>
-              </button>
-
-              <button class="file-action-btn" @click="openDirectory()">
-                <FolderOpen :size="20" />
-                <span>{{ t('pages.settings.sync.openConfigFileDir') }}</span>
-              </button>
-            </div>
-          </div>
+          <SettingSection :icon="FolderOpen" :title="t('pages.settings.sync.fileManagement')">
+            <CustomNavCard
+              :title="t('pages.settings.sync.openConfigFile')"
+              :icon="FileText"
+              @click="openFile('data.json')"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.sync.openConfigFileDir')"
+              :icon="FolderOpen"
+              @click="openDirectory"
+            />
+          </SettingSection>
         </div>
         <!-- Upload Settings Tab -->
-        <div v-if="currentTab === 'upload'" class="tab-content">
+        <div
+          v-if="currentTab === 'upload'"
+          class="border4 no-scrollbar flex h-full w-full flex-1 flex-col gap-6 overflow-auto p-4"
+        >
           <!-- Upload Behavior Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper upload small-icon">
-                <CloudUpload :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.uploadBehavior') }}</h2>
-              </div>
-            </div>
+          <SettingSection :icon="Server" :title="t('pages.settings.upload.controlShow')">
+            <SettingCard>
+              <MultiSelect
+                v-model:choosed="showPicBedList"
+                :icon="Server"
+                :tight="false"
+                :title="t('pages.settings.upload.chooseShowedPicBed')"
+                :zero-placeholder="t('pages.gallery.chooseShowedPicBed')"
+                :all-list="picBedG"
+              />
+            </SettingCard>
+            <SettingCard>
+              <MultiSelect
+                v-model:choosed="galleryPicBedFilterList"
+                :icon="ImageIcon"
+                :tight="false"
+                :title="t('pages.settings.upload.galleryPicBedFilter')"
+                :zero-placeholder="t('pages.gallery.chooseShowedPicBed')"
+                :all-list="picBedG"
+              />
+            </SettingCard>
+          </SettingSection>
+          <SettingSection :icon="CloudUpload" :title="t('pages.settings.upload.uploadBehavior')">
+            <!-- Auto Import Card -->
+            <CustomSwitch
+              v-model="formOfSetting.autoImport"
+              small
+              :title="t('pages.settings.upload.autoImportInManage')"
+              :description="t('pages.settings.upload.autoImportInManageHint')"
+            />
+            <!-- Auto Import PicBed Selection -->
+            <SettingCard v-if="formOfSetting.autoImport">
+              <MultiSelect
+                v-model:choosed="formOfSetting.autoImportPicBed"
+                :icon="ImageIcon"
+                :tight="false"
+                :title="t('pages.settings.upload.autoImportPicBed')"
+                :zero-placeholder="t('pages.settings.upload.autoImportPicBed')"
+                :all-list="picBedG"
+              />
+            </SettingCard>
+            <!-- Second PicBed Card -->
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.enableSecondUploader"
+                small
+                no-border
+                :title="t('pages.settings.upload.enableSecondPicBed')"
+                :description="t('pages.settings.upload.enableSecondPicBedHint')"
+              />
+            </SettingCard>
 
-            <div class="upload-behavior-grid">
-              <!-- Auto Import Card -->
-              <div class="upload-feature-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.autoImport" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.autoImportInManage') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.upload.autoImportInManageHint') }}</div>
-                  </div>
-                </label>
-              </div>
+            <CustomNavCard
+              :title="t('pages.settings.upload.setSecondPicBed')"
+              :icon="CloudUpload"
+              :description="t('pages.settings.upload.setSecondPicBedDesc')"
+              @click="handleChangeSecondPicBed"
+            />
 
-              <!-- Auto Import PicBed Selection -->
-              <div v-if="formOfSetting.autoImport" class="upload-feature-card picbed-selection">
-                <div class="picbed-selection-header">
-                  <span>{{ t('pages.settings.upload.autoImportPicBed') }}</span>
-                </div>
-                <div class="checkbox-group compact">
-                  <label v-for="item in picBedG" :key="item.type" class="checkbox-option">
-                    <input
-                      v-model="formOfSetting.autoImportPicBed"
-                      type="checkbox"
-                      :value="item.type"
-                      class="checkbox-input"
-                    />
-                    <span class="checkbox-indicator" />
-                    <span class="checkbox-label">{{ item.name }}</span>
-                  </label>
-                </div>
-              </div>
-
-              <!-- Second PicBed Card -->
-              <div class="upload-feature-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.enableSecondUploader" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.enableSecondPicBed') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.upload.enableSecondPicBedHint') }}</div>
-                  </div>
-                </label>
-              </div>
-
-              <!-- Set Second PicBed Action -->
-              <div class="upload-action-card" @click="handleChangeSecondPicBed">
-                <div class="upload-action-icon">
-                  <CloudUpload :size="20" />
-                </div>
-                <div class="upload-action-info">
-                  <h4>{{ t('pages.settings.upload.setSecondPicBed') }}</h4>
-                  <p>{{ t('pages.settings.upload.setSecondPicBedDesc') }}</p>
-                </div>
-                <div class="upload-action-arrow">
-                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M9 18l6-6-6-6" />
-                  </svg>
-                </div>
-              </div>
-
-              <div class="system-option-card">
-                <div class="system-option-header">
-                  <Settings2Icon :size="18" />
-                  <span>{{ t('pages.settings.upload.chooseSecondPicBedMode') }}</span>
-                </div>
-                <select v-model="currentSecondMode" class="form-select">
-                  <option v-for="item in secondModeList" :key="item.value" :value="item.value">
-                    {{ item.label }}
-                  </option>
-                </select>
-              </div>
-            </div>
-          </div>
+            <SettingCard>
+              <CustomSelect
+                v-model="currentSecondMode"
+                :select-list="secondModeList"
+                :title="t('pages.settings.upload.chooseSecondPicBedMode')"
+                :icon="Settings2Icon"
+              />
+            </SettingCard>
+          </SettingSection>
 
           <!-- Upload Processing Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper processing small-icon">
-                <ImageIcon :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.uploadProcessing') }}</h2>
-              </div>
-            </div>
+          <SettingSection :icon="ImageIcon" :title="t('pages.settings.upload.uploadProcessing')">
+            <CustomNavCard
+              :title="t('pages.settings.upload.advancedRname')"
+              :icon="Edit"
+              :description="t('pages.settings.upload.advancedRnameDesc')"
+              @click="advancedRenameVisible = true"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.upload.imageProcessing')"
+              :icon="ImageIcon"
+              :description="t('pages.settings.upload.imageProcessingDesc')"
+              @click="imageProcessDialogVisible = true"
+            />
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.deleteCloudFile"
+                small
+                no-border
+                :title="t('pages.settings.upload.deleteCloud')"
+              />
+            </SettingCard>
 
-            <!-- Processing Action Cards -->
-            <div class="processing-actions-grid">
-              <div class="processing-action-card" @click="advancedRenameVisible = true">
-                <div class="processing-action-icon">
-                  <Edit :size="15" />
-                </div>
-                <div class="processing-action-info">
-                  <h4>{{ t('pages.settings.upload.advancedRname') }}</h4>
-                  <p>{{ t('pages.settings.upload.advancedRnameDesc') }}</p>
-                </div>
-              </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.rename"
+                small
+                no-border
+                :title="t('pages.settings.upload.manualRename')"
+              />
+            </SettingCard>
 
-              <div class="processing-action-card" @click="imageProcessDialogVisible = true">
-                <div class="processing-action-icon">
-                  <ImageIcon :size="20" />
-                </div>
-                <div class="processing-action-info">
-                  <h4>{{ t('pages.settings.upload.imageProcessing') }}</h4>
-                  <p>{{ t('pages.settings.upload.imageProcessingDesc') }}</p>
-                </div>
-              </div>
-            </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.autoRename"
+                small
+                no-border
+                :title="t('pages.settings.upload.timestampRename')"
+                description="YYYYMMDDHHmmssSSS"
+              />
+            </SettingCard>
 
-            <!-- Processing Toggles -->
-            <div class="upload-toggles-grid">
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.deleteCloudFile" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.deleteCloud') }}</div>
-                  </div>
-                </label>
-              </div>
-
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.rename" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.manualRname') }}</div>
-                  </div>
-                </label>
-              </div>
-
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.autoRename" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.timestampRname') }}</div>
-                    <div class="switch-description">YYYYMMDDHHmmssSSS</div>
-                  </div>
-                </label>
-              </div>
-
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.deleteLocalFile" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.deleteLocalFileAfterUpload') }}</div>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.deleteLocalFile"
+                small
+                no-border
+                :title="t('pages.settings.upload.deleteLocalFileAfterUpload')"
+              />
+            </SettingCard>
+          </SettingSection>
 
           <!-- Clipboard & Notification Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper clipboard small-icon">
-                <Edit :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.clipboardAndNotification') }}</h2>
-              </div>
-            </div>
+          <SettingSection :icon="Edit" :title="t('pages.settings.upload.clipboardAndNotification')">
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.uploadNotification"
+                small
+                no-border
+                :title="t('pages.settings.upload.enableUploadNotification')"
+              />
+            </SettingCard>
 
-            <div class="upload-toggles-grid">
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.uploadNotification" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.enableUploadNotification') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.uploadResultNotification"
+                small
+                no-border
+                :title="t('pages.settings.upload.enableUploadResultNotification')"
+              />
+            </SettingCard>
 
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.uploadResultNotification" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.enableUploadResultNotification') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.autoCopy"
+                small
+                no-border
+                :title="t('pages.settings.upload.autoCopyUrlAfterUpload')"
+              />
+            </SettingCard>
 
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.autoCopy" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.autoCopyUrlAfterUpload') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.useBuiltinClipboard"
+                small
+                no-border
+                :title="t('pages.settings.upload.useBuiltInClipboardUpload')"
+                :description="t('pages.settings.upload.useBuiltInClipboardUploadHint')"
+              />
+            </SettingCard>
 
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.useBuiltinClipboard" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.useBuiltInClipboardUpload') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.upload.useBuiltInClipboardUploadHint') }}</div>
-                  </div>
-                </label>
-              </div>
-
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.isAutoListenClipboard" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.isAutoListenClipboard') }}</div>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.isAutoListenClipboard"
+                small
+                no-border
+                :title="t('pages.settings.upload.isAutoListenClipboard')"
+              />
+            </SettingCard>
+          </SettingSection>
 
           <!-- URL Format & Link Type Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper link small-icon">
-                <Link :size="20" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.urlFormatAndLinkType') }}</h2>
-              </div>
-            </div>
-
+          <SettingSection :icon="Link" :title="t('pages.settings.upload.urlFormatAndLinkType')">
             <!-- Custom Link Format Action -->
-            <div class="url-format-action-card" @click="customLinkVisible = true">
-              <div class="url-format-icon">
-                <Link :size="15" />
-              </div>
-              <div class="url-format-info">
-                <h4>{{ t('pages.settings.upload.customLinkFormat') }}</h4>
-                <p>{{ t('pages.settings.upload.customLinkFormatDesc') }}</p>
-              </div>
-              <div class="url-format-arrow">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 18l6-6-6-6" />
-                </svg>
-              </div>
-            </div>
+            <CustomNavCard
+              :title="t('pages.settings.upload.customLinkFormat')"
+              :icon="Link"
+              :description="t('pages.settings.upload.customLinkFormatDesc')"
+              @click="customLinkVisible = true"
+            />
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.useShortUrl"
+                small
+                no-border
+                :title="t('pages.settings.upload.enableShortUrl')"
+                :description="t('pages.settings.upload.enableShortUrlDesc')"
+              />
+            </SettingCard>
 
-            <!-- Short URL Toggle -->
-            <div class="short-url-section">
-              <div class="upload-toggle-card">
-                <label class="switch-label">
-                  <input v-model="formOfSetting.useShortUrl" type="checkbox" class="switch-input" />
-                  <span class="switch-slider" />
-                  <div class="switch-content">
-                    <div class="switch-title">{{ t('pages.settings.upload.enableShortUrl') }}</div>
-                    <div class="switch-description">{{ t('pages.settings.upload.enableShortUrlDesc') }}</div>
-                  </div>
-                </label>
-              </div>
+            <SettingCard v-if="formOfSetting.useShortUrl">
+              <CustomSelect
+                v-model="currentShortUrlServer"
+                :select-list="shortUrlServerList"
+                :title="t('pages.settings.upload.shortUrlServer')"
+                :icon="Link"
+              />
+            </SettingCard>
 
-              <!-- Short URL Configuration -->
-              <div v-if="formOfSetting.useShortUrl" class="short-url-config">
-                <div class="short-url-field">
-                  <label>{{ t('pages.settings.upload.shortUrlServer') }}</label>
-                  <select
-                    v-model="currentShortUrlServer"
-                    class="form-select"
-                    @change="handleShortUrlServerChange(currentShortUrlServer)"
-                  >
-                    <option v-for="item in shortUrlServerList" :key="item.value" :value="item.value">
-                      {{ item.label }}
-                    </option>
-                  </select>
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'c1n'">
+              <CustomInput
+                v-model="formOfSetting.c1nToken"
+                :title="t('pages.settings.upload.c1nToken')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.c1nToken')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'c1n'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.c1nToken') }}</label>
-                  <input
-                    v-model="formOfSetting.c1nToken"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.c1nToken')"
-                  />
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'">
+              <CustomInput
+                v-model="formOfSetting.yourlsDomain"
+                :title="t('pages.settings.upload.yourlsDomain')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.yourlsDomain')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'yourls'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.yourlsDomain') }}</label>
-                  <input
-                    v-model="formOfSetting.yourlsDomain"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.yourlsDomain')"
-                  />
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'yourls'">
+              <CustomInput
+                v-model="formOfSetting.yourlsSignature"
+                :title="t('pages.settings.upload.yourlsSignature')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.yourlsSignature')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'yourls'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.yourlsSignature') }}</label>
-                  <input
-                    v-model="formOfSetting.yourlsSignature"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.yourlsSignature')"
-                  />
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'cf_worker'">
+              <CustomInput
+                v-model="formOfSetting.cfWorkerHost"
+                :title="t('pages.settings.upload.cfWorkerHost')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.cfWorkerHost')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'cf_worker'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.cfWorkerHost') }}</label>
-                  <input
-                    v-model="formOfSetting.cfWorkerHost"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.cfWorkerHost')"
-                  />
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'sink'">
+              <CustomInput
+                v-model="formOfSetting.sinkDomain"
+                :title="t('pages.settings.upload.sinkDomain')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.sinkDomain')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'sink'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.sinkDomain') }}</label>
-                  <input
-                    v-model="formOfSetting.sinkDomain"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.sinkDomain')"
-                  />
-                </div>
+            <SettingCard v-if="formOfSetting.useShortUrl && formOfSetting.shortUrlServer === 'sink'">
+              <CustomInput
+                v-model="formOfSetting.sinkToken"
+                :title="t('pages.settings.upload.sinkToken')"
+                :icon="Link"
+                :placeholder="t('pages.settings.upload.sinkToken')"
+              />
+            </SettingCard>
 
-                <div v-if="formOfSetting.shortUrlServer === 'sink'" class="short-url-field">
-                  <label>{{ t('pages.settings.upload.sinkToken') }}</label>
-                  <input
-                    v-model="formOfSetting.sinkToken"
-                    type="text"
-                    class="form-input"
-                    :placeholder="t('pages.settings.upload.sinkToken')"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <!-- Encode Output URL Toggle -->
-            <div class="upload-toggle-card standalone">
-              <label class="switch-label">
-                <input v-model="formOfSetting.encodeOutputURL" type="checkbox" class="switch-input" />
-                <span class="switch-slider" />
-                <div class="switch-content">
-                  <div class="switch-title">{{ t('pages.settings.upload.encodeOutputUrl') }}</div>
-                </div>
-              </label>
-            </div>
-          </div>
-
-          <!-- PicBed Display Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper picbed small-icon">
-                <Server :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.chooseShowedPicBed') }}</h2>
-              </div>
-            </div>
-
-            <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedG" :key="item.name" class="picbed-checkbox-card">
-                <input v-model="showPicBedList" type="checkbox" :value="item.name" class="checkbox-input" />
-                <span class="checkbox-indicator" />
-                <span class="checkbox-label">{{ item.name }}</span>
-              </label>
-            </div>
-          </div>
-
-          <!-- Gallery Filter Section -->
-          <div class="settings-section upload-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper gallery small-icon">
-                <ImageIcon :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.upload.galleryPicBedFilter') }}</h2>
-              </div>
-            </div>
-
-            <div class="picbed-checkbox-grid">
-              <label v-for="item in picBedG" :key="`gallery-${item.name}`" class="picbed-checkbox-card">
-                <input v-model="galleryPicBedFilterList" type="checkbox" :value="item.type" class="checkbox-input" />
-                <span class="checkbox-indicator" />
-                <span class="checkbox-label">{{ item.name }}</span>
-              </label>
-            </div>
-          </div>
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.encodeOutputURL"
+                small
+                no-border
+                :title="t('pages.settings.upload.encodeOutputUrl')"
+              />
+            </SettingCard>
+          </SettingSection>
         </div>
 
-        <!-- Advanced Settings Tab -->
-        <div v-if="currentTab === 'advanced'" class="tab-content">
-          <!-- Logging Section -->
-          <div class="settings-section advanced-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper log small-icon">
-                <FileText :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.advanced.logging') }}</h2>
-              </div>
-            </div>
+        <div
+          v-if="currentTab === 'advanced'"
+          class="border4 no-scrollbar flex h-full w-full flex-1 flex-col gap-6 overflow-auto p-4"
+        >
+          <SettingSection :icon="FileText" :title="t('pages.settings.advanced.logging')">
+            <CustomNavCard
+              :title="t('pages.settings.advanced.logFilePath')"
+              :description="t('pages.settings.advanced.logFilePathDesc')"
+              :icon="FolderOpen"
+              @click="openDirectory"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.advanced.setLog')"
+              :description="t('pages.settings.advanced.setLogDesc')"
+              :icon="Settings"
+              @click="openLogSetting"
+            />
+          </SettingSection>
 
-            <div class="advanced-action-grid">
-              <div class="advanced-action-card" @click="openDirectory()">
-                <div class="advanced-action-icon">
-                  <FolderOpen :size="22" />
-                </div>
-                <div class="advanced-action-info">
-                  <h4>{{ t('pages.settings.advanced.logFilePath') }}</h4>
-                  <p>{{ t('pages.settings.advanced.logFilePathDesc') }}</p>
-                </div>
-              </div>
-
-              <div class="advanced-action-card" @click="openLogSetting">
-                <div class="advanced-action-icon">
-                  <Settings :size="22" />
-                </div>
-                <div class="advanced-action-info">
-                  <h4>{{ t('pages.settings.advanced.setLog') }}</h4>
-                  <p>{{ t('pages.settings.advanced.setLogDesc') }}</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Network & Proxy Section -->
-          <div class="settings-section advanced-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper network small-icon">
-                <Globe :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.advanced.networkAndProxy') }}</h2>
-              </div>
-            </div>
-
-            <div class="advanced-action-card standalone" @click="proxyVisible = true">
-              <div class="advanced-action-icon">
-                <Globe :size="22" />
-              </div>
-              <div class="advanced-action-info">
-                <h4>{{ t('pages.settings.advanced.setProxyAndMirror') }}</h4>
-                <p>{{ t('pages.settings.advanced.setProxyAndMirrorDesc') }}</p>
-              </div>
-              <div class="advanced-action-arrow">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M9 18l6-6-6-6" />
-                </svg>
-              </div>
-            </div>
-          </div>
+          <SettingSection :icon="Globe" :title="t('pages.settings.advanced.networkAndProxy')">
+            <CustomNavCard
+              :title="t('pages.settings.advanced.setProxyAndMirror')"
+              :description="t('pages.settings.advanced.setProxyAndMirrorDesc')"
+              :icon="Globe"
+              @click="proxyVisible = true"
+            />
+          </SettingSection>
 
           <!-- Server Settings Section -->
-          <div class="settings-section advanced-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper server small-icon">
-                <Server :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.advanced.serverSettings') }}</h2>
-              </div>
-            </div>
-
-            <div class="server-config-grid">
-              <div class="server-config-card" @click="webServerVisible = true">
-                <div class="server-config-header">
-                  <div class="server-config-icon web">
-                    <Globe :size="20" />
-                  </div>
-                  <span class="server-config-badge">Web</span>
-                </div>
-                <h4>{{ t('pages.settings.advanced.webServerSettings') }}</h4>
-                <p>{{ t('pages.settings.advanced.webServerSettingsDesc') }}</p>
-              </div>
-
-              <div class="server-config-card" @click="serverVisible = true">
-                <div class="server-config-header">
-                  <div class="server-config-icon api">
-                    <Server :size="20" />
-                  </div>
-                  <span class="server-config-badge">API</span>
-                </div>
-                <h4>{{ t('pages.settings.advanced.uploadServer') }}</h4>
-                <p>{{ t('pages.settings.advanced.uploadServerDesc') }}</p>
-              </div>
-            </div>
-
-            <div class="encryption-key-section">
-              <div class="encryption-key-header">
-                <div class="encryption-key-icon">
-                  <Keyboard :size="18" />
-                </div>
-                <div>
-                  <label>{{ t('pages.settings.advanced.serverEncryptionKey') }}</label>
-                  <small>{{ t('pages.settings.advanced.serverEncryptionKeyDesc') }}</small>
-                </div>
-              </div>
-              <div class="input-with-icon">
-                <input
-                  v-model.trim="formOfSetting.aesPassword"
-                  type="text"
-                  class="form-input"
-                  :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
-                  @change="handleAesPasswordChange(formOfSetting.aesPassword)"
-                />
-              </div>
-            </div>
-          </div>
+          <SettingSection :icon="Server" :title="t('pages.settings.advanced.serverSettings')">
+            <CustomNavCard
+              :title="t('pages.settings.advanced.webServerSettings')"
+              :description="t('pages.settings.advanced.webServerSettingsDesc')"
+              :icon="Globe"
+              @click="webServerVisible = true"
+            />
+            <CustomNavCard
+              :title="t('pages.settings.advanced.uploadServer')"
+              :description="t('pages.settings.advanced.uploadServerDesc')"
+              :icon="Globe"
+              @click="serverVisible = true"
+            />
+            <SettingCard>
+              <CustomInput
+                v-model="formOfSetting.aesPassword"
+                :is-password="true"
+                :title="t('pages.settings.advanced.serverEncryptionKey')"
+                :placeholder="t('pages.settings.advanced.serverEncryptionKey')"
+              />
+            </SettingCard>
+          </SettingSection>
         </div>
-
-        <!-- Update Settings Tab -->
-        <div v-if="currentTab === 'update'" class="tab-content">
-          <!-- Version Status Card -->
-          <div class="update-status-card">
-            <div class="update-status-icon">
-              <RefreshCw :size="16" />
-            </div>
-            <div class="update-status-info">
-              <h2>PicList</h2>
-              <div class="version-info">
-                <span class="version-badge">v{{ version }}</span>
-                <span class="version-label">{{ t('pages.settings.update.currentVersion') }}</span>
-              </div>
-            </div>
-            <button class="btn btn-primary update-check-btn" @click="checkUpdate">
-              <RefreshCw :size="16" />
-              {{ t('pages.settings.update.clickToCheck') }}
-            </button>
-          </div>
-
-          <!-- Update Preferences -->
-          <div class="settings-section update-preferences-section">
-            <div class="update-preference-card">
-              <label class="switch-label">
-                <input v-model="formOfSetting.showUpdateTip" type="checkbox" class="switch-input" />
-                <span class="switch-slider" />
-                <div class="switch-content">
-                  <div class="switch-title">{{ t('pages.settings.update.openUpdateHelper') }}</div>
-                  <div class="switch-description">
-                    {{ t('pages.settings.update.openUpdateHelperDesc') }}
-                  </div>
+        <div
+          v-if="currentTab === 'update'"
+          class="border4 no-scrollbar flex h-full w-full flex-1 flex-col gap-6 overflow-auto p-4"
+        >
+          <SettingSection :icon="RefreshCw" :title="t('pages.settings.update.applicationUpdates')">
+            <CustomNavCard noarrow :icon="RotateCcw" :title="t('pages.settings.update.currentVersion')">
+              <template #description>
+                <div class="flex items-center gap-2">
+                  <span class="rounded-md bg-accent/30 px-2 py-1 text-sm font-semibold text-secondary"
+                    >v{{ version }}</span
+                  >
                 </div>
-              </label>
-            </div>
-          </div>
+              </template>
+              <template #extra>
+                <CustomButton
+                  :icon="RefreshCw"
+                  :text="t('pages.settings.update.clickToCheck')"
+                  type="secondary"
+                  @click="checkUpdate"
+                />
+              </template>
+            </CustomNavCard>
+
+            <SettingCard p1>
+              <CustomSwitch
+                v-model="formOfSetting.showUpdateTip"
+                small
+                no-border
+                :title="t('pages.settings.update.openUpdateHelper')"
+                :description="t('pages.settings.update.openUpdateHelperDesc')"
+              />
+            </SettingCard>
+          </SettingSection>
 
           <!-- Release Notes Section -->
-          <div class="settings-section release-notes-section">
-            <div class="release-notes-card enhanced">
-              <div class="release-notes-header">
-                <div class="release-notes-title">
-                  <BookOpen :size="18" />
-                  <h3>{{ t('pages.settings.update.latestReleaseNotes') }}</h3>
-                </div>
-                <div class="release-notes-actions">
-                  <button
-                    class="btn btn-secondary btn-sm refresh-btn"
-                    :disabled="fetchingReleaseNotes"
-                    @click="fetchReleaseNotesManually"
-                  >
-                    <RefreshCw :size="14" :class="{ rotate: fetchingReleaseNotes }" />
-                    {{ t('pages.settings.update.refresh') }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="release-notes-content">
-                <div v-if="fetchingReleaseNotes" class="release-notes-loading">
-                  <div class="loading-spinner">
-                    <RefreshCw :size="24" class="rotate" />
+          <SettingSection
+            :only-one-row="true"
+            :icon="BookOpen"
+            :title="t('pages.settings.update.latestReleaseNotes')"
+            class="relative"
+          >
+            <div class="absolute top-4 right-4 flex items-center gap-2">
+              <CustomButton
+                :icon="RefreshCw"
+                :text="t('pages.settings.update.refresh')"
+                type="secondary"
+                :disabled="fetchingReleaseNotes"
+                @click="fetchReleaseNotesManually"
+              />
+            </div>
+            <div class="relative w-full rounded-lg border border-border bg-bg-secondary shadow-sm">
+              <div class="max-h-[400px] overflow-y-auto bg-bg-secondary">
+                <div
+                  v-if="fetchingReleaseNotes"
+                  class="flex flex-col items-center justify-center gap-2 p-4 text-center text-sm font-semibold text-secondary"
+                >
+                  <div class="flex h-12 w-12 items-center justify-center rounded-full bg-accent/20 text-accent">
+                    <RefreshCw :size="24" class="animate-ping" />
                   </div>
                   <span>{{ t('pages.settings.update.loadingReleaseNotes') }}</span>
                 </div>
                 <div v-else-if="releaseNotes" class="notes-body" v-html="renderedReleaseNotes"></div>
-                <div v-else-if="releaseNotesError" class="release-notes-error">
-                  <div class="error-icon">⚠️</div>
+                <div
+                  v-else-if="releaseNotesError"
+                  class="flex flex-col items-center justify-center gap-6 bg-error/10 p-4 text-sm text-danger"
+                >
+                  <div class="text-[4rem]">⚠️</div>
                   <span>{{ releaseNotesError }}</span>
-                  <button class="btn btn-link btn-sm" @click="fetchReleaseNotesManually">
-                    {{ t('pages.settings.update.retry') }}
-                  </button>
-                </div>
-                <div v-else class="release-notes-empty">
-                  <div class="empty-icon">📋</div>
-                  <span>{{ t('pages.settings.update.noReleaseNotes') }}</span>
+                  <CustomButton
+                    :icon="RefreshCw"
+                    :text="t('pages.settings.update.retry')"
+                    type="secondary"
+                    @click="fetchReleaseNotesManually"
+                  />
                 </div>
               </div>
 
-              <div v-if="releaseNotesLastFetch" class="release-notes-footer">
-                <small>
+              <div v-if="releaseNotesLastFetch" class="border-t border-border-secondary bg-bg-secondary p-3 text-right">
+                <small class="flex flex-row justify-end gap-1 text-xs text-secondary">
                   <RefreshCw :size="12" />
-                  {{ t('pages.settings.update.lastUpdated') }}: {{ formatLastFetchTime(releaseNotesLastFetch) }}
+                  <div>
+                    {{ t('pages.settings.update.lastUpdated') }}: {{ formatLastFetchTime(releaseNotesLastFetch) }}
+                  </div>
                 </small>
               </div>
             </div>
-          </div>
+          </SettingSection>
         </div>
       </div>
     </div>
@@ -1862,10 +1559,18 @@ import {
 import { marked } from 'marked'
 import type { IConfig } from 'piclist'
 import pkg from 'root/package.json'
-import { computed, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue'
+import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 
+import CustomButton from '@/components/common/customButton.vue'
+import CustomInput from '@/components/common/customInput.vue'
+import CustomNavCard from '@/components/common/customNavCard.vue'
+import CustomSelect from '@/components/common/customSelect.vue'
+import CustomSwitch from '@/components/common/customSwitch.vue'
+import MultiSelect from '@/components/common/multiSelect.vue'
+import SettingCard from '@/components/common/settingCard.vue'
+import SettingSection from '@/components/common/settingSection.vue'
 import ImageProcessSetting from '@/components/ImageProcessSetting.vue'
 import useConfirm from '@/hooks/useConfirm'
 import { osGlobal, usePicBed } from '@/hooks/useGlobal'
@@ -1878,47 +1583,62 @@ import { getConfig, saveConfig } from '@/utils/dataSender'
 import { II18nLanguage, IRPCActionType, ISartMode } from '@/utils/enum'
 import { getLatestVersion } from '@/utils/getLatestVersion'
 
+/* reactive data and refs */
 const { t, locale } = useI18n()
 const $router = useRouter()
 const { confirm } = useConfirm()
 const message = useMessage()
 const { picBedG, updatePicBeds } = usePicBed()
-
 const showPicBedList = ref<string[]>([])
 const galleryPicBedFilterList = ref<string[]>([])
-const themeList = ref<{ key: string; label: string }[]>([{ key: 'default.css', label: '默认' }])
+const themeList = ref<{ value: string; label: string }[]>([{ value: 'default.css', label: '默认' }])
 const currentTheme = ref('default.css')
+const proxy = ref('')
 const downloadingThemes = ref(false)
 const isDisableGPU = ref(false)
 const isPortable = ref(false)
+const currentLanguage = ref()
+const currentSecondMode = ref()
+const currentStartMode = ref()
+const currentShortUrlServer = ref()
+/* dialog visibility refs */
+const logFileVisible = ref(false)
+const customLinkVisible = ref(false)
+const checkUpdateVisible = ref(false)
+const serverVisible = ref(false)
+const webServerVisible = ref(false)
+const syncVisible = ref(false)
+const upDownConfigVisible = ref(false)
+const proxyVisible = ref(false)
+
+const latestVersion = ref('')
+const releaseNotes = ref('')
+const releaseNotesError = ref('')
+const releaseNotesLastFetch = ref<Date | null>(null)
+const fetchingReleaseNotes = ref(false)
+const mainWindowSizeVisible = ref(false)
+const advancedRenameVisible = ref(false)
+const imageProcessDialogVisible = ref(false)
+const rawPicGoSize = ref(false)
+const customLink = reactive({ value: '![$fileName]($url)' })
 const currentTab = useStorage<'system' | 'sync' | 'upload' | 'advanced' | 'update'>('settings-current-tab', 'system')
-
-// Tab configuration
-const tabs = computed(() => [
-  { id: 'system', label: t('pages.settings.system.title'), icon: Settings },
-  { id: 'sync', label: t('pages.settings.sync.title'), icon: RotateCcw },
-  { id: 'upload', label: t('pages.settings.upload.title'), icon: CloudUpload },
-  { id: 'advanced', label: t('pages.settings.advanced.title'), icon: Server },
-  { id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw },
-])
-
-const shortUrlServerList = [
-  { label: 'c1n', value: 'c1n' },
-  { label: 'yourls', value: 'yourls' },
-  { label: 'xyTom/Url-Shorten-Worker', value: 'cf_worker' },
-  { label: 'ccbikai/Sink', value: 'sink' },
-]
-
-const languageList = [
-  { label: '简体中文', value: 'zh-CN' },
-  { label: '繁體中文', value: 'zh-TW' },
-  { label: 'English', value: 'en' },
-]
-
-const secondModeList = [
-  { label: t('pages.settings.upload.secondPicBedMode.backup'), value: 'backup' },
-  { label: t('pages.settings.upload.secondPicBedMode.seperate'), value: 'seperate' },
-]
+const server = ref({ port: 36677, host: '0.0.0.0', enable: true })
+const advancedRename = ref({ enable: false, format: '{filename}' })
+const sync = ref<any>({
+  type: 'github',
+  username: '',
+  repo: '',
+  branch: '',
+  token: '',
+  endpoint: '',
+  proxy: '',
+  interval: 60,
+  // WebDAV-specific fields
+  password: '',
+  authType: 'basic',
+  sslEnabled: true,
+  webdavSavePath: '',
+})
 
 const formOfSetting = ref<ISettingForm>({
   showUpdateTip: true,
@@ -1966,7 +1686,72 @@ const formOfSetting = ref<ISettingForm>({
   theme: 'default.css',
 })
 
-const proxy = ref('')
+/* computed properties */
+const tabs = computed(() => [
+  { id: 'system', label: t('pages.settings.system.title'), icon: Settings },
+  { id: 'sync', label: t('pages.settings.sync.title'), icon: RotateCcw },
+  { id: 'upload', label: t('pages.settings.upload.title'), icon: CloudUpload },
+  { id: 'advanced', label: t('pages.settings.advanced.title'), icon: Server },
+  { id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw },
+])
+
+const advancedAnimation = computed(() => ({
+  advancedAnimation: formOfSetting.value.enableAdvancedAnimation,
+}))
+
+const needUpdate = computed(() => {
+  if (latestVersion.value) {
+    return compareVersion2Update(version, latestVersion.value)
+  }
+  return false
+})
+
+const renderedReleaseNotes = computed(() => {
+  return marked(releaseNotes.value, { breaks: true, gfm: true })
+})
+
+/* constants and enums */
+const syncTaskList = [
+  { task: IRPCActionType.CONFIGURE_UPLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
+  { task: IRPCActionType.CONFIGURE_UPLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
+  { task: IRPCActionType.CONFIGURE_UPLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
+  { task: IRPCActionType.CONFIGURE_DOWNLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
+  { task: IRPCActionType.CONFIGURE_DOWNLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
+  { task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
+  { task: IRPCActionType.CONFIGURE_SYNC_GALLERY_DB, label: t('pages.settings.sync.galleryDB'), number: 2 },
+]
+
+const logLevel = {
+  all: t('pages.settings.advanced.logLevelList.all'),
+  success: t('pages.settings.advanced.logLevelList.success'),
+  error: t('pages.settings.advanced.logLevelList.error'),
+  info: t('pages.settings.advanced.logLevelList.info'),
+  warn: t('pages.settings.advanced.logLevelList.warn'),
+  none: t('pages.settings.advanced.logLevelList.none'),
+}
+
+const syncType = ['github', 'gitee', 'gitea', 'webdav']
+const version = pkg.version
+
+const RELEASE_NOTES_CACHE_DURATION = 30 * 60 * 1000
+
+const shortUrlServerList = [
+  { label: 'c1n', value: 'c1n' },
+  { label: 'yourls', value: 'yourls' },
+  { label: 'xyTom/Url-Shorten-Worker', value: 'cf_worker' },
+  { label: 'ccbikai/Sink', value: 'sink' },
+]
+
+const languageList = [
+  { label: '简体中文', value: 'zh-CN' },
+  { label: '繁體中文', value: 'zh-TW' },
+  { label: 'English', value: 'en' },
+]
+
+const secondModeList = [
+  { label: t('pages.settings.upload.secondPicBedMode.backup'), value: 'backup' },
+  { label: t('pages.settings.upload.secondPicBedMode.seperate'), value: 'seperate' },
+]
 const formKeys = Object.keys(formOfSetting.value) as (keyof ISettingForm)[]
 const autoWatchKeys = [
   'showUpdateTip',
@@ -2003,10 +1788,33 @@ const autoWatchKeys = [
   'enableAdvancedAnimation',
 ]
 
-const advancedAnimation = computed(() => ({
-  advancedAnimation: formOfSetting.value.enableAdvancedAnimation,
-}))
+const advancedRenameList = {
+  categoryTime: [
+    { label: t('pages.settings.upload.placeholder.year4'), value: '{Y}' },
+    { label: t('pages.settings.upload.placeholder.year2'), value: '{y}' },
+    { label: t('pages.settings.upload.placeholder.month'), value: '{m}' },
+    { label: t('pages.settings.upload.placeholder.date'), value: '{d}' },
+    { label: t('pages.settings.upload.placeholder.hour'), value: '{h}' },
+    { label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
+    { label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
+    { label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
+    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
+  ],
+  categoryHash: [
+    { label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
+    { label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
+    { label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
+    { label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
+    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
+  ],
+  categoryFile: [
+    { label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
+    { label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
+    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
+  ],
+}
 
+/* watchers and effects */
 const addWatch = () => {
   autoWatchKeys.forEach(key => {
     watch(
@@ -2017,6 +1825,21 @@ const addWatch = () => {
     )
   })
 
+  watch(showPicBedList, val => {
+    handleShowPicBedListChange(val)
+  })
+
+  watch(galleryPicBedFilterList, val => {
+    handleGalleryPicBedFilterChange(val)
+  })
+
+  watch(
+    () => formOfSetting.value.aesPassword,
+    val => {
+      handleAesPasswordChange(val)
+    },
+  )
+
   watch(currentSecondMode, newVal => {
     if (newVal) {
       saveConfig({ [configPaths.settings.secondPicBedMode]: newVal })
@@ -2061,89 +1884,7 @@ const addProxyWatch = () => {
   })
 }
 
-const advancedRenameList = {
-  categoryTime: [
-    { label: t('pages.settings.upload.placeholder.year4'), value: '{Y}' },
-    { label: t('pages.settings.upload.placeholder.year2'), value: '{y}' },
-    { label: t('pages.settings.upload.placeholder.month'), value: '{m}' },
-    { label: t('pages.settings.upload.placeholder.date'), value: '{d}' },
-    { label: t('pages.settings.upload.placeholder.hour'), value: '{h}' },
-    { label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
-    { label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
-    { label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
-    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
-  ],
-  categoryHash: [
-    { label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
-    { label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
-    { label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
-    { label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
-    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
-  ],
-  categoryFile: [
-    { label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
-    { label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
-    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
-  ],
-}
-
-function copyPlaceholder(placeholder: string) {
-  window.electron.clipboard.writeText(placeholder)
-  message.success(t('pages.settings.upload.copySuccess', { content: placeholder }))
-}
-
-const currentLanguage = ref()
-const currentSecondMode = ref()
-const currentStartMode = ref()
-const currentShortUrlServer = ref()
-
-const logFileVisible = ref(false)
-const customLinkVisible = ref(false)
-const checkUpdateVisible = ref(false)
-const serverVisible = ref(false)
-const webServerVisible = ref(false)
-const syncVisible = ref(false)
-const upDownConfigVisible = ref(false)
-const proxyVisible = ref(false)
-const mainWindowSizeVisible = ref(false)
-const advancedRenameVisible = ref(false)
-const imageProcessDialogVisible = ref(false)
-
-const rawPicGoSize = ref(false)
-
-const customLink = reactive({ value: '![$fileName]($url)' })
-
-const logLevel = {
-  all: t('pages.settings.advanced.logLevelList.all'),
-  success: t('pages.settings.advanced.logLevelList.success'),
-  error: t('pages.settings.advanced.logLevelList.error'),
-  info: t('pages.settings.advanced.logLevelList.info'),
-  warn: t('pages.settings.advanced.logLevelList.warn'),
-  none: t('pages.settings.advanced.logLevelList.none'),
-}
-
-const server = ref({ port: 36677, host: '0.0.0.0', enable: true })
-
-const advancedRename = ref({ enable: false, format: '{filename}' })
-
-const sync = ref<any>({
-  type: 'github',
-  username: '',
-  repo: '',
-  branch: '',
-  token: '',
-  endpoint: '',
-  proxy: '',
-  interval: 60,
-  // WebDAV-specific fields
-  password: '',
-  authType: 'basic',
-  sslEnabled: true,
-  webdavSavePath: '',
-})
-
-const syncType = ['github', 'gitee', 'gitea', 'webdav']
-
+/* methods */
 async function cancelSyncSetting() {
   syncVisible.value = false
   sync.value = (await getConfig(configPaths.settings.sync)) || {
@@ -2170,38 +1911,9 @@ function confirmSyncSetting() {
   syncVisible.value = false
 }
 
-const version = pkg.version
-const latestVersion = ref('')
-const releaseNotes = ref('')
-const releaseNotesError = ref('')
-const releaseNotesLastFetch = ref<Date | null>(null)
-const fetchingReleaseNotes = ref(false)
-
-const RELEASE_NOTES_CACHE_DURATION = 30 * 60 * 1000
-
-const needUpdate = computed(() => {
-  if (latestVersion.value) {
-    return compareVersion2Update(version, latestVersion.value)
-  }
-  return false
-})
-
-onBeforeMount(() => {
-  initData()
-})
-
-let unbindTheme: () => void
-onMounted(() => {
-  unbindTheme = window.electron.onThemeUpdate((_: string) => {
-    console.log('Applying theme CSS update:')
-  })
-})
-
-onBeforeUnmount(() => {
-  if (unbindTheme) {
-    unbindTheme()
-  }
-})
+function tabClick(tabId: string) {
+  currentTab.value = tabId as 'system' | 'sync' | 'upload' | 'advanced' | 'update'
+}
 
 async function loadThemes() {
   try {
@@ -2209,11 +1921,15 @@ async function loadThemes() {
       IRPCActionType.THEME_RESOLVE_THEMES,
     )
     if (themes && themes.length > 0) {
-      themeList.value = themes.sort((a, b) => {
+      const sortedThemes = themes.sort((a, b) => {
         if (a.key === 'default.css') return -1
         if (b.key === 'default.css') return 1
         return a.label.localeCompare(b.label)
       })
+      themeList.value = sortedThemes.map(theme => ({
+        value: theme.key,
+        label: theme.label,
+      }))
     }
   } catch (error) {
     console.error('Failed to load themes:', error)
@@ -2271,7 +1987,7 @@ async function initData() {
   const picBed = config.picBed
   isDisableGPU.value = settings.isDisableGPU || false
   isPortable.value = (await window.electron.triggerRPC<boolean>(IRPCActionType.GET_IS_PORTABLE)) || false
-  showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.name)
+  showPicBedList.value = picBedG.value.filter(item => item.visible).map(item => item.type)
   galleryPicBedFilterList.value = settings.galleryPicBedFilter || []
   currentTheme.value = settings.theme || 'default.css'
   loadThemes()
@@ -2327,8 +2043,6 @@ async function initData() {
   formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
   addProxyWatch()
   addWatch()
-
-  // Fetch release notes on initialization
   fetchReleaseNotes()
 }
 
@@ -2439,18 +2153,16 @@ function handleHideDockChange(val: ICheckBoxValueType) {
   window.electron.sendRPC(IRPCActionType.HIDE_DOCK, val)
 }
 
-watch(showPicBedList, val => {
-  handleShowPicBedListChange(val)
-})
-
-watch(galleryPicBedFilterList, val => {
-  handleGalleryPicBedFilterChange(val)
-})
-
 function handleShowPicBedListChange(val: ICheckBoxValueType[]) {
-  const list = picBedG.value.map(item => ({ ...item, visible: val.includes(item.name) }))
-  saveConfig({ [configPaths.picBed.list]: list })
-  updatePicBeds()
+  try {
+    const list = picBedG.value.map(item => ({ ...item, visible: val.includes(item.type) }))
+    saveConfig({ [configPaths.picBed.list]: list })
+    nextTick(() => {
+      updatePicBeds()
+    })
+  } catch (error) {
+    console.error('Error updating PicBed visibility:', error)
+  }
 }
 
 function handleGalleryPicBedFilterChange(val: ICheckBoxValueType[]) {
@@ -2485,10 +2197,6 @@ function formatLastFetchTime(date: Date): string {
   }
 }
 
-const renderedReleaseNotes = computed(() => {
-  return marked(releaseNotes.value, { breaks: true, gfm: true })
-})
-
 async function fetchReleaseNotes(forceRefresh = false): Promise<void> {
   if (!forceRefresh && releaseNotesLastFetch.value) {
     const timeSinceLastFetch = Date.now() - releaseNotesLastFetch.value.getTime()
@@ -2630,16 +2338,6 @@ function syncMessage(failed: number) {
   }
 }
 
-const syncTaskList = [
-  { task: IRPCActionType.CONFIGURE_UPLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
-  { task: IRPCActionType.CONFIGURE_UPLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
-  { task: IRPCActionType.CONFIGURE_UPLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
-  { task: IRPCActionType.CONFIGURE_DOWNLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
-  { task: IRPCActionType.CONFIGURE_DOWNLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
-  { task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
-  { task: IRPCActionType.CONFIGURE_SYNC_GALLERY_DB, label: t('pages.settings.sync.galleryDB'), number: 2 },
-]
-
 async function syncTaskFn(task: string, number: number) {
   const failed = number - ((await window.electron.triggerRPC<number>(task)) || 0)
   syncMessage(failed)
@@ -2686,6 +2384,29 @@ async function goConfigPage() {
 function goShortCutPage() {
   $router.push({ name: SHORTKEY_PAGE })
 }
+
+function copyPlaceholder(placeholder: string) {
+  window.electron.clipboard.writeText(placeholder)
+  message.success(t('pages.settings.upload.copySuccess', { content: placeholder }))
+}
+
+/* lifecycle hooks */
+onBeforeMount(() => {
+  initData()
+})
+
+let unbindTheme: () => void
+onMounted(() => {
+  unbindTheme = window.electron.onThemeUpdate((_: string) => {
+    console.log('Applying theme CSS update:')
+  })
+})
+
+onBeforeUnmount(() => {
+  if (unbindTheme) {
+    unbindTheme()
+  }
+})
 </script>
 <script lang="ts">
 export default { name: 'SettingPage' }
diff --git a/src/renderer/components/ui/TitleBar.vue b/src/renderer/pages/TitleBar.vue
similarity index 97%
rename from src/renderer/components/ui/TitleBar.vue
rename to src/renderer/pages/TitleBar.vue
index 7b7a8f0d..cd14b099 100644
--- a/src/renderer/components/ui/TitleBar.vue
+++ b/src/renderer/pages/TitleBar.vue
@@ -85,8 +85,8 @@ onBeforeUnmount(() => {
 
 <style scoped>
 @import 'tailwindcss' reference;
-@import '../../assets/css/theme.css' reference;
-@import '../../assets/css/utilities.css' reference;
+@import '../assets/css/theme.css' reference;
+@import '../assets/css/utilities.css' reference;
 
 .control-button {
   @apply flex h-[20px] w-[28px] cursor-pointer items-center justify-center rounded-sm border-0 bg-transparent text-secondary transition-all duration-fast ease-standard hover:bg-surface-elevated hover:text-main [.close:hover]:bg-danger [.close:hover]:text-white [.mini:hover]:bg-success/85 [.mini:hover]:text-white [.minimize:hover]:bg-accent/85 [.minimize:hover]:text-white;
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 4ca0a909..590ef3d9 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -20,22 +20,11 @@
   @apply mb-0 text-sm font-semibold text-secondary leading-[1.4];
 }
 
-.custom-select {
-  @apply border border-border-secondary rounded-md px-2 py-1.5 w-full min-w-0 h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer text-center leading-[1.4];
-  @apply focus:border-accent focus:outline-none focus:shadow-md;
-}
-
 .date-input {
   @apply border border-border-secondary rounded-md px-2 py-1.5 min-w-[20px] h-[28px] text-xs text-main transition-all duration-fast ease-apple flex-1 leading-[1.2];
   @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
 }
 
-.sort-button {
-  @apply flex justify-between items-center border border-border-secondary rounded-md px-2 py-1.5 w-full h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer gap-1 leading-[1.4];
-  @apply hover:border-accent-hover;
-  @apply focus:[.active]:border-accent-hover focus:[.active]:shadow-md;
-}
-
 .search-input {
   @apply border border-border-secondary rounded-md pt-2 pr-3 pb-2 pl-9 w-full text-sm text-main transition-all duration-fast ease-apple;
   @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
diff --git a/src/renderer/components/css/NavigationPage.css b/src/renderer/pages/css/NavigationPage.css
similarity index 100%
rename from src/renderer/components/css/NavigationPage.css
rename to src/renderer/pages/css/NavigationPage.css
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index 791e9491..da3ae51d 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -1,125 +1,8 @@
-@import url('./common/advancedAnimation.css');
 /* stylelint-disable selector-pseudo-class-no-unknown */
-.piclist-settings {
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 100vh;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.piclist-settings::-webkit-scrollbar {
-  display: none;
-}
-
-/* Header */
-.settings-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  color: var(--color-accent);
-}
-
-.settings-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* Tab Navigation */
-.tab-navigation {
-  display: flex;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.5rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.tab-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-  flex: 1;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-}
-
-.tab-button.active {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
-}
-
-/* Settings Content */
-.settings-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.settings-section {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px var(--color-border);
-}
-
-.settings-section h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.settings-section p {
-  margin: 0 0 1.5rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
+@import url('./common/advancedAnimation.css');
+@import 'tailwindcss' reference;
+@import '../../assets/css/theme.css' reference;
+@import '../../assets/css/utilities.css' reference;
 
 /* Form Elements */
 .form-group {
@@ -672,57 +555,6 @@ small {
   background: var(--color-accent-hover);
 }
 
-.release-notes-loading,
-.release-notes-error,
-.release-notes-empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  font-size: 0.925rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-  gap: 0.5rem;
-}
-
-.release-notes-error {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  color: var(--color-error);
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.release-notes-pre {
-  margin: 0;
-  border: none;
-  padding: 1.5rem;
-  font-size: 0.875rem;
-  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
-  white-space: pre-wrap;
-  color: var(--color-text-primary);
-  background: transparent;
-  line-height: 1.6;
-  overflow-wrap: break-word;
-}
-
-.release-notes-footer {
-  border-top: 1px solid var(--color-border);
-  padding: 0.75rem 1.5rem;
-  text-align: center;
-  background: var(--color-background-secondary);
-}
-
-.release-notes-footer small {
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  gap: 0.375rem;
-}
-
 /* Rotation animation for loading icons */
 @keyframes rotate {
   from {
@@ -1472,127 +1304,6 @@ small {
   flex-shrink: 0;
 }
 
-/* Update Preferences */
-.update-preferences-section .update-preference-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0.25rem;
-  background: var(--color-background-secondary);
-}
-
-.update-preferences-section .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.release-notes-card.enhanced {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  background: var(--color-background-secondary);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-}
-
-.release-notes-card.enhanced .release-notes-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background-secondary);
-}
-
-.release-notes-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.release-notes-title svg {
-  color: var(--color-accent);
-}
-
-.release-notes-title h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.refresh-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.release-notes-card.enhanced .release-notes-content {
-  overflow-y: auto;
-  max-height: 400px;
-  background: var(--color-background-secondary);
-}
-
-.release-notes-loading {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-round);
-  width: 48px;
-  height: 48px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-}
-
-.release-notes-loading span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.error-icon {
-  font-size: 2rem;
-}
-
-.release-notes-error span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.release-notes-empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  gap: 0.75rem;
-}
-
-.empty-icon {
-  font-size: 2rem;
-}
-
-.release-notes-empty span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.release-notes-card.enhanced .release-notes-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid var(--color-border);
-  padding: 0.75rem 1.5rem;
-  background: var(--color-background-secondary);
-}
-
 /* Responsive for Advanced & Update */
 @media (width <= 768px) {
   .advanced-action-grid {
@@ -1746,11 +1457,7 @@ small {
 }
 
 /* Theme Actions Grid */
-.theme-actions-grid {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-}
+
 
 .theme-action-btn {
   display: flex;
@@ -2617,61 +2324,42 @@ small {
 }
 
 .notes-body {
-  overflow-y: auto;
-  padding: 1.25rem;
-  max-height: 195px;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
+  @apply overflow-y-auto rounded-lg p-5 max-h-[200px] text-base leading-[1.5] bg-bg-tertiary text-secondary;
 }
 
 .notes-body :deep(h1),
 .notes-body :deep(h2),
 .notes-body :deep(h3) {
-  margin-top: 1.25rem;
-  margin-bottom: 0.5rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
+  @apply font-bold text-main mt-5 mb-2;
 }
 
 .notes-body :deep(h1:first-child),
 .notes-body :deep(h2:first-child),
 .notes-body :deep(h3:first-child) {
-  margin-top: 0;
+  @apply mt-0;
 }
 
 .notes-body :deep(p) {
-  margin-bottom: 0.875rem;
+  @apply mb-2;
 }
 
 .notes-body :deep(ul),
 .notes-body :deep(ol) {
-  padding-left: 1.5rem;
-  margin: 0.875rem 0;
+  @apply list-inside my-3.5 pl-6;
 }
 
 .notes-body :deep(li) {
-  margin-bottom: 0.375rem;
+  @apply mb-1.5;
 }
 
-.notes-body :deep(code) {
-  border-radius: 4px;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.875em;
-  background: var(--color-surface);
-  color: var(--color-text-primary);
+.notes-body :deep(a) {
+  @apply text-accent underline;
 }
 
-.notes-body :deep(pre) {
-  overflow-x: auto;
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  margin: 0.875rem 0;
-  background: var(--color-surface);
+.notes-body :deep(a:hover) {
+  @apply text-accent-hover;
 }
 
-.notes-body :deep(pre code) {
-  padding: 0;
-  background: transparent;
+.notes-body :deep(img) {
+  @apply max-w-full rounded-md;
 }
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index f6c79ecd..4abae3f0 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -1,12 +1,12 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 
-import MainPage from '@/layouts/Main.vue'
 import ManageBucketPage from '@/manage/pages/BucketPage.vue'
 import ManageEmptyPage from '@/manage/pages/EmptyPage.vue'
 import ManageLoginPage from '@/manage/pages/LogInPage.vue'
 import ManageMainPage from '@/manage/pages/ManageMain.vue'
 import ManageSettingPage from '@/manage/pages/ManageSetting.vue'
 import GalleryPage from '@/pages/Gallery.vue'
+import MainPage from '@/pages/Main.vue'
 import MiniPage from '@/pages/MiniPage.vue'
 import PicBedsPage from '@/pages/picbeds/index.vue'
 import SettingPage from '@/pages/PicGoSetting.vue'