diff --git a/currentVersion.md b/currentVersion.md
index 57199435..e2d5b8e2 100644
--- a/currentVersion.md
+++ b/currentVersion.md
@@ -1,5 +1,9 @@
 ## 🎉 [v3.3.0] 更新日志
 
+### 🚀 性能优化
+
+- 减少了60-70%的闲置内存占用和20%的打开窗口时内存占用
+
 ### ✨ 新增功能
 
 - windows下新增便携模式，无需安装即可运行，数据存储在程序目录下的`data`文件夹中，支持自动更新；Linux下新增`rpm`安装包
@@ -10,10 +14,10 @@
 - 新增教学引导页面，首次运行时会自动弹出
 - 现在支持关闭GPU加速，解决部分兼容性问题
 - 新增高级动画设置，开启后可获得更好的UI体验
-
 - 优化了多个页面的加载速度和浏览性能
 
 ### 🐛 问题修复
 
 - 修复了管理页面中排序下拉框显示异常的问题
 - 修复了暗色模式下任务页面的显示问题
+- 修复了图床设置页面设置为默认图床按钮状态没有及时更新的问题
diff --git a/currentVersion_en.md b/currentVersion_en.md
index b7d976c8..343e0899 100644
--- a/currentVersion_en.md
+++ b/currentVersion_en.md
@@ -1,5 +1,9 @@
 ## 🎉 [v3.3.0] Release Notes
 
+### 🚀 Performance Optimization
+
+- Reduced idle memory usage by 60-70% and memory usage when opening windows by 20%
+
 ### ✨ New Features
 
 - 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
@@ -16,3 +20,4 @@
 
 - Fixed an issue where the sort dropdown in the management page displayed abnormally
 - Fixed an issue where the task page displayed incorrectly in dark mode
+- Fixed an issue where the default image bed button status on the image bed settings page did not update in time
diff --git a/src/renderer/components/ui/TitleBar.vue b/src/renderer/components/ui/TitleBar.vue
index 82f4defc..7b7a8f0d 100644
--- a/src/renderer/components/ui/TitleBar.vue
+++ b/src/renderer/components/ui/TitleBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="fixed top-0 right-0 left-0 z-1000 h-[32px] border-b border-b-border bg-bg-secondary drag-region"
+    class="fixed top-0 right-0 left-0 z-1000 h-[32px] border-b border-b-border/40 bg-bg-secondary drag-region"
     data-drag-region
   >
     <div class="flex h-full items-center justify-between px-4 py-0">
diff --git a/src/renderer/layouts/Main.vue b/src/renderer/layouts/Main.vue
index c459cb8f..7a85efca 100644
--- a/src/renderer/layouts/Main.vue
+++ b/src/renderer/layouts/Main.vue
@@ -6,16 +6,14 @@
     />
     <TitleBar />
     <Navigation />
-    <main class="relative z-1 no-scrollbar h-screen flex-1 overflow-scroll bg-bg-secondary">
-      <div class="m-0 h-full max-w-none">
-        <router-view v-slot="{ Component, route }">
-          <transition name="page" mode="out-in">
-            <keep-alive :include="keepAlivePages">
-              <component :is="Component" :key="route.path" />
-            </keep-alive>
-          </transition>
-        </router-view>
-      </div>
+    <main class="relative z-1 no-scrollbar h-full flex-1 overflow-scroll bg-bg-secondary">
+      <router-view v-slot="{ Component, route }">
+        <transition name="page" mode="out-in">
+          <keep-alive :include="keepAlivePages">
+            <component :is="Component" :key="route.path" />
+          </keep-alive>
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 738952b3..f517829a 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -1,17 +1,15 @@
 <template>
-  <div
-    class="m-0 box-border flex min-h-screen w-full flex-col gap-5 overflow-y-auto p-4 max-md:gap-4 max-md:p-3 max-xs:p-2 lg:mx-auto lg:max-w-[1200px] lg:px-8 lg:py-6"
-  >
-    <!-- Header Card -->
+  <div class="relative no-scrollbar flex h-full w-full items-center justify-center">
     <div
-      class="overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
+      class="relative z-1 no-scrollbar flex h-full w-full flex-col items-center justify-start gap-6 overflow-auto rounded-xl border-none p-8 shadow-sm"
     >
+      <!-- Header Card -->
       <div
-        class="flex flex-row flex-wrap items-center justify-between gap-4 border-b border-border-secondary px-5 py-4 max-md:flex-col max-md:items-stretch"
+        class="flex w-full flex-wrap items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:flex-col max-md:items-stretch max-md:p-5"
       >
         <div class="flex max-w-[calc(100%-300px)] flex-1 flex-wrap items-center gap-2 max-md:order-1">
           <button
-            class="group/provider flex w-auto min-w-[200px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[130px]"
+            class="group/provider flex w-auto min-w-[150px] shrink-0 cursor-pointer items-center gap-3 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-2 font-[inherit] duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover/70 hover:bg-surface hover:shadow-sm focus-visible:focus-ring max-xs:w-full max-xs:min-w-[100px]"
             :title="t('pages.upload.uploadViewHint')"
             @click="handlePicBedNameClick(picBedName)"
           >
@@ -25,17 +23,21 @@
             />
           </button>
           <div
-            class="flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-surface font-[inherit] text-secondary duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:text-accent-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
+            class="flex h-[22px] w-[22px] shrink-0 cursor-pointer items-center justify-center rounded-lg border border-border bg-surface font-[inherit] text-secondary duration-fast ease-standard hover:-translate-y-px hover:border-accent-hover hover:text-accent-hover data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50"
             :title="t('pages.upload.addToFavorites')"
             :data-disabled="favoritePicbeds.length >= MAX_FAVORITE_PICBEDS || isCurrentPicBedInFavorites"
             @click="addCurrentPicbedToFavorites"
           >
-            <PlusIcon :size="12" />
+            <component
+              :is="isCurrentPicBedInFavorites ? CheckIcon : PlusIcon"
+              :size="14"
+              class="duration-fast ease-standard"
+            />
           </div>
           <transition-group
             name="badges-slide"
             tag="div"
-            class="flex max-w-[400px] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
+            class="flex max-w-[calc(100%-300px)] flex-wrap items-center gap-[0.2rem] [.has-many]:max-w-[300px]"
             :class="{ 'has-many': favoritePicbeds.length >= 4 }"
           >
             <button
@@ -83,10 +85,10 @@
               @click="handleImageProcessSingle"
             >
               <Settings :size="16" />
-              <span>{{ t('pages.upload.imageProcessNameSingle') }}</span>
+              <span class="mt-1">{{ t('pages.upload.imageProcessNameSingle') }}</span>
             </button>
             <button class="segmented-button" :title="t('pages.upload.imageProcessName')" @click="handleImageProcess">
-              <span>{{ t('pages.upload.imageProcessName') }}</span>
+              <span class="mt-1">{{ t('pages.upload.imageProcessName') }}</span>
             </button>
           </div>
           <button
@@ -98,158 +100,149 @@
           </button>
         </div>
       </div>
-    </div>
 
-    <!-- Main Upload Card -->
-    <div
-      class="min-h-[300px] overflow-hidden rounded-xl border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
-    >
+      <!-- Main Upload Card -->
       <div
-        id="upload-area"
-        class="group/upload relative m-4 cursor-pointer rounded-xl border-2 border-dashed border-border bg-bg-secondary px-8 py-12 duration-medium ease-standard focus-visible:focus-ring focus-visible:outline-offset-4 max-md:m-3 max-md:px-4 max-md:py-8 max-xs:m-2 max-xs:px-2 max-xs:py-6 [:hover,.drag-active]:border-accent [:hover,.drag-active]:bg-[linear-gradient(135deg,var(--color-surface-elevated)_0%,color-mix(in_srgb,var(--color-accent),transparent_95%)_100%)] [:hover,.drag-active]:shadow-lg [:hover,.drag-active&]:-translate-y-[2px]"
-        :class="{ 'drag-active': dragover }"
-        @drop.prevent="onDrop"
-        @dragover.prevent="dragover = true"
-        @dragleave.prevent="dragover = false"
-        @click="openUploadWindow"
+        class="flex min-h-[230px] w-full flex-1 flex-wrap items-center justify-center gap-4 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:flex-col max-md:items-stretch max-md:p-5"
       >
-        <div class="flex flex-col items-center gap-6 text-center">
-          <div
-            class="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-accent text-white duration-medium ease-standard group-[:hover,.drag-active]/upload:animate-[float_1.5s_ease-in-out_infinite] max-md:h-[60px] max-md:w-[60px]"
-          >
-            <UploadCloudIcon :size="48" />
-          </div>
-          <div class="flex flex-col gap-3">
-            <h3 class="m-0 text-xl font-semibold tracking-tight text-main max-xs:text-lg">
-              {{ t('pages.upload.dragFileToHere') }}
-            </h3>
-            <p class="m-0 text-sm text-secondary">
-              {{ ' ' }}
-            </p>
-            <div class="mt-2 flex flex-col gap-1">
-              <span class="text-xs font-medium tracking-wide text-secondary uppercase">{{
-                t('pages.upload.uploadHint')
-              }}</span>
+        <div
+          id="upload-area"
+          class="group/upload relative flex h-full w-full cursor-pointer items-center justify-center rounded-xl border-2 border-dashed border-border bg-bg-secondary px-1 py-12 duration-medium ease-standard focus-visible:focus-ring focus-visible:outline-offset-4 max-md:px-4 max-md:py-8 max-xs:px-2 max-xs:py-6 [:hover,.drag-active]:border-accent [:hover,.drag-active]:bg-[linear-gradient(135deg,var(--color-surface-elevated)_0%,color-mix(in_srgb,var(--color-accent),transparent_95%)_100%)] [:hover,.drag-active]:shadow-lg [:hover,.drag-active&]:-translate-y-[2px]"
+          :class="{ 'drag-active': dragover }"
+          @drop.prevent="onDrop"
+          @dragover.prevent="dragover = true"
+          @dragleave.prevent="dragover = false"
+          @click="openUploadWindow"
+        >
+          <div class="flex flex-col items-center justify-center gap-6 text-center">
+            <div
+              class="flex h-[80px] w-[80px] items-center justify-center rounded-full bg-accent text-white duration-medium ease-standard group-[:hover,.drag-active]/upload:animate-[float_1.5s_ease-in-out_infinite] max-md:h-[60px] max-md:w-[60px]"
+            >
+              <UploadCloudIcon :size="48" />
+            </div>
+            <div class="flex flex-col gap-2">
+              <h3 class="m-0 text-xl font-semibold tracking-tight text-main max-xs:text-lg">
+                {{ t('pages.upload.dragFileToHere') }}
+              </h3>
+              <p class="m-0 text-sm text-secondary">
+                {{ ' ' }}
+              </p>
+              <div class="mt-2 flex flex-col gap-1">
+                <span class="text-xs font-medium tracking-wide text-secondary uppercase">{{
+                  t('pages.upload.uploadHint')
+                }}</span>
+              </div>
             </div>
           </div>
+          <input id="file-uploader" ref="fileInput" type="file" multiple class="hidden" @change="onChange" />
         </div>
-        <input id="file-uploader" ref="fileInput" type="file" multiple class="hidden" @change="onChange" />
+
+        <!-- Progress Bar -->
       </div>
 
-      <!-- Progress Bar -->
-      <transition
-        name="progress"
-        enter-active-class="transition-all duration-medium ease-standard"
-        leave-active-class="transition-all duration-medium ease-standard"
-        enter-from-class="opacity-0 -translate-y-[10px]"
-        leave-to-class="opacity-0 -translate-y-[10px]"
+      <div
+        v-if="showProgress"
+        class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border-secondary p-0 shadow-md"
       >
-        <div v-if="showProgress" class="mx-6 my-4 rounded-lg border border-border-secondary bg-surface p-4">
-          <div class="mb-2 h-2 overflow-hidden rounded-sm bg-bg-secondary">
+        <div class="mx-2 my-2 w-full rounded-lg border border-border bg-surface p-4">
+          <div class="mb-2 h-3 overflow-hidden rounded-lg bg-bg-secondary">
             <div
-              class="h-full rounded-sm bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] duration-fast ease-standard data-[error=true]:bg-danger data-[error=true]:bg-none"
+              class="h-full rounded-lg bg-[linear-gradient(90deg,var(--color-accent)_0%,var(--color-primary)_50%)] duration-fast ease-standard data-[error=true]:bg-danger data-[error=true]:bg-none"
               :data-error="showError"
               :style="{ width: `${progress}%` }"
             />
           </div>
-          <span class="block text-center text-sm font-medium text-secondary">
+          <span class="m-0 flex items-center justify-center text-center text-sm font-semibold text-secondary">
             {{ showError ? t('pages.upload.uploadFailed') : `${progress}%` }}
           </span>
         </div>
-      </transition>
-    </div>
+      </div>
 
-    <!-- Quick Actions Card -->
-    <div
-      class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
-    >
-      <div class="px-6 py-4">
-        <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
-          {{ t('pages.upload.quickUpload') }}
-        </h4>
-      </div>
+      <!-- Quick Actions Card -->
       <div
-        class="grid grid-cols-[repeat(auto-fit,minmax(160px,1fr))] gap-3 px-6 py-4 max-md:grid-cols-1 max-md:px-4 max-md:py-3.5 md:grid-cols-[repeat(auto-fit,minmax(180px,1fr))] lg:grid-cols-[repeat(auto-fit,minmax(200px,1fr))]"
+        class="flex w-full flex-col flex-wrap items-center justify-between gap-2 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:items-stretch max-md:p-5"
       >
-        <button class="quick-action-button" @click="uploadClipboardFiles">
-          <ClipboardIcon class="shrink-0 text-accent" :size="18" />
-          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
-        </button>
-        <button class="quick-action-button" @click="uploadURLFiles">
-          <LinkIcon class="shrink-0 text-accent" :size="18" />
-          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
-        </button>
-        <button
-          class="quick-action-button"
-          :class="{ 'has-badge': taskQueueStatus.tasks.length > 0 }"
-          @click="openTaskDialog"
-        >
-          <ListTodoIcon class="shrink-0 text-accent" :size="18" />
-          <span class="text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
-          <span
-            v-if="taskQueueStatus.tasks.length > 0"
-            class="absolute top-[50%] right-3 flex min-w-6 animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full px-1.5 py-0 text-sm font-bold text-accent"
-          >
-            {{ taskQueueStatus.tasks.length }}
-          </span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Settings Card -->
-    <div
-      class="overflow-hidden rounded-lg border-[0.2px] border-border-secondary bg-bg-secondary duration-medium ease-standard hover:border-border hover:shadow-md"
-    >
-      <div class="px-6 py-4">
-        <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
-          {{ t('pages.upload.linkFormat') }}
-        </h4>
-      </div>
-      <div
-        class="flex flex-col gap-6 px-6 py-5 max-md:grid-cols-1! max-md:px-5 max-md:py-4 md:grid md:grid-cols-2 md:items-start md:gap-6 lg:gap-8"
-      >
-        <!-- Format Options -->
-        <div class="flex flex-col gap-3">
-          <label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.outputFormat') }}</label>
-          <div
-            class="grid grid-cols-[repeat(auto-fit,minmax(70px,1fr))] gap-[0.4rem] max-md:grid-cols-[repeat(auto-fit,minmax(60px,1fr))]"
-          >
-            <button
-              v-for="(format, key) in pasteFormatList"
-              :key="key"
-              class="cursor-pointer rounded-md border border-border-secondary bg-bg-secondary px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-[0.7rem] font-medium text-secondary duration-fast ease-standard hover:border-accent-hover hover:text-main focus-visible:focus-ring data-[active=true]:border-accent data-[active=true]:bg-accent data-[active=true]:text-white"
-              :data-active="pasteStyle === key"
-              :title="format"
-              @click="updatePasteStyle(key)"
-            >
-              {{ key }}
-            </button>
-          </div>
+        <div class="flex w-full items-start p-0">
+          <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
+            {{ t('pages.upload.quickUpload') }}
+          </h4>
         </div>
+        <div class="flex w-full flex-1 flex-row flex-wrap items-center justify-center gap-4 max-md:gap-3 max-md:px-5">
+          <button class="quick-action-button" @click="uploadClipboardFiles">
+            <ClipboardIcon class="shrink-0 text-accent" :size="15" />
+            <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.clipboardPicture') }}</span>
+          </button>
+          <button class="quick-action-button" @click="uploadURLFiles">
+            <LinkIcon class="shrink-0 text-accent" :size="15" />
+            <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.urlUpload') }}</span>
+          </button>
+          <button
+            class="quick-action-button"
+            :class="{ 'has-badge': taskQueueStatus.tasks.length > 0 }"
+            @click="openTaskDialog"
+          >
+            <ListTodoIcon class="shrink-0 text-accent" :size="15" />
+            <span class="mt-1 text-sm font-medium text-secondary">{{ t('pages.upload.taskUpload') }}</span>
+            <span
+              v-if="taskQueueStatus.tasks.length > 0"
+              class="absolute top-[0.5] right-3 flex min-w-6 animate-[badge-pulse_2s_ease-in-out_infinite] items-center justify-center rounded-full border border-border-secondary px-1.5 py-0 text-sm font-bold text-accent"
+            >
+              {{ taskQueueStatus.tasks.length }}
+            </span>
+          </button>
+        </div>
+      </div>
 
-        <!-- URL Length Options -->
-        <div class="flex flex-col gap-3">
-          <label class="m-0 text-sm font-medium text-main">{{ t('pages.upload.urlType.title') }}</label>
-          <div class="flex w-full overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
-            <button
-              class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
-              :data-active="!useShortUrl"
-              @click="updateUrlType(false)"
-            >
-              <span>{{ t('pages.upload.urlType.normal') }}</span>
-            </button>
-            <button
-              class="flex-1 cursor-pointer border-0 bg-transparent px-[0.675rem] py-[0.325rem] font-[inherit] text-[0.8rem] font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
-              :data-active="useShortUrl"
-              @click="updateUrlType(true)"
-            >
-              <span>{{ t('pages.upload.urlType.short') }}</span>
-            </button>
+      <!-- Settings Card -->
+      <div
+        class="flex w-full flex-row flex-wrap items-center justify-between gap-0 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:flex-col max-md:items-stretch max-md:p-5"
+      >
+        <div class="flex w-full items-start p-0">
+          <h4 class="m-0 text-[0.9rem] font-semibold tracking-tight text-main">
+            {{ t('pages.upload.linkFormat') }}
+          </h4>
+        </div>
+        <div class="flex w-full flex-row gap-2 p-2">
+          <!-- Format Options -->
+          <div class="flex flex-1 flex-col gap-3">
+            <label class="m-0 text-xs font-medium text-secondary">{{ t('pages.upload.outputFormat') }}</label>
+            <div class="flex flex-row">
+              <button
+                v-for="(format, key) in pasteFormatList"
+                :key="key"
+                class="flex-1 cursor-pointer rounded-md border border-border-secondary bg-bg-secondary px-1 py-1 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-[0.7rem] font-medium text-secondary duration-fast ease-standard hover:border-accent-hover hover:text-main focus-visible:focus-ring data-[active=true]:border-accent data-[active=true]:bg-accent data-[active=true]:text-white"
+                :data-active="pasteStyle === key"
+                :title="format"
+                @click="updatePasteStyle(key)"
+              >
+                {{ key }}
+              </button>
+            </div>
+          </div>
+
+          <!-- URL Length Options -->
+          <div class="flex flex-1 flex-col gap-3">
+            <label class="m-0 text-xs font-medium text-secondary">{{ t('pages.upload.urlType.title') }}</label>
+            <div class="flex w-full overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
+              <button
+                class="flex-1 cursor-pointer border-0 bg-transparent py-1 font-[inherit] text-xs font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
+                :data-active="!useShortUrl"
+                @click="updateUrlType(false)"
+              >
+                <span>{{ t('pages.upload.urlType.normal') }}</span>
+              </button>
+              <button
+                class="flex-1 cursor-pointer border-0 bg-transparent py-1 font-[inherit] text-xs font-medium text-secondary duration-fast ease-standard hover:text-main focus-visible:focus-ring data-[active=true]:bg-accent data-[active=true]:text-white"
+                :data-active="useShortUrl"
+                @click="updateUrlType(true)"
+              >
+                <span>{{ t('pages.upload.urlType.short') }}</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
     <!-- Image Process Dialog -->
     <transition name="modal">
       <div
@@ -697,6 +690,7 @@ import { useStorage } from '@vueuse/core'
 import {
   ArrowLeftRightIcon,
   CheckCircleIcon,
+  CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
   ClipboardIcon,
diff --git a/src/renderer/pages/UploaderConfigPage.vue b/src/renderer/pages/UploaderConfigPage.vue
index b8466294..f1f56dd3 100644
--- a/src/renderer/pages/UploaderConfigPage.vue
+++ b/src/renderer/pages/UploaderConfigPage.vue
@@ -1,52 +1,67 @@
 <template>
-  <div class="config-page">
-    <div class="config-container">
+  <div class="relative no-scrollbar flex h-full min-h-full items-center justify-center">
+    <div
+      class="relative z-1 no-scrollbar flex h-[95%] w-[95%] flex-col gap-6 overflow-auto rounded-xl border-none p-4 shadow-sm"
+    >
       <!-- Hero Header Section -->
-      <header class="page-header">
-        <div class="header-content">
-          <div class="header-icon">
-            <Settings2 :size="28" :stroke-width="1.5" />
+      <header
+        class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-4 shadow-md max-md:flex-col max-md:items-stretch max-md:p-5"
+      >
+        <div class="flex items-center gap-4 max-md:flex-col max-md:justify-center max-md:text-center">
+          <div
+            class="border-xl flex h-[56px] w-[56px] items-center justify-center rounded-2xl border-none text-accent shadow-sm max-md:h-[35px] max-md:w-[35px]"
+          >
+            <Settings2 :size="28" />
           </div>
-          <div class="header-text">
-            <h1 class="page-title">
+          <div class="flex flex-col gap-1 max-md:text-center">
+            <h1 class="m-0 text-2xl font-bold tracking-tight text-main">
               {{ `${picBedName || type} ${t('pages.uploaderConfig.title')}` }}
             </h1>
-            <p class="page-subtitle">
+            <p class="m-0 text-sm text-secondary">
               {{ t('pages.uploaderConfig.subtitle', { count: curConfigList.length }) }}
             </p>
           </div>
         </div>
-        <div class="header-actions">
-          <button class="btn btn-primary btn-glow" :disabled="defaultPicBedG === type" @click="setDefaultPicBed(type)">
+        <div class="flex items-center justify-center gap-3">
+          <button
+            class="relative inline-flex cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-lg border-none bg-accent px-6 py-3 font-[inherit] text-sm font-semibold text-white shadow-sm transition-all duration-fast ease-apple disabled:cursor-not-allowed disabled:bg-surface disabled:text-secondary disabled:opacity-60"
+            :disabled="defaultPicBedG === type"
+            @click="setDefaultPicBed(type)"
+          >
             <Star :size="16" />
-            <span>{{ t('pages.uploaderConfig.setAsDefault') }}</span>
+            <span class="mt-1">{{ t('pages.uploaderConfig.setAsDefault') }}</span>
           </button>
         </div>
       </header>
 
       <!-- Main Content Area -->
-      <main class="main-content">
+      <main class="flex-1">
         <!-- Config Grid -->
-        <TransitionGroup name="config-list" tag="div" class="config-grid">
+        <TransitionGroup
+          name="config-list"
+          tag="div"
+          class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-5 p-1 max-md:grid-cols-1 max-md:gap-4 xl:grid-cols-[repeat(auto-fill,minmax(325px,1fr))] xl:gap-6"
+        >
           <!-- Config Items -->
           <article
             v-for="(item, index) in curConfigList"
             :key="item._id"
-            class="config-card"
+            class="group/config-card relative flex min-h-[180px] cursor-pointer flex-col gap-6 overflow-hidden rounded-xl border border-border-secondary p-5 shadow-sm transition-all duration-fast ease-apple hover:border-accent hover:shadow-md [.is-active]:border-2 [.is-active]:border-accent [.is-active]:shadow-md"
             :class="{ 'is-active': defaultConfigId === item._id }"
             :style="{ '--delay': `${index * 50}ms` }"
             @click="() => selectItem(item._id)"
           >
-            <div v-if="defaultConfigId === item._id" class="active-indicator">
-              <div class="indicator-dot" />
-            </div>
-
             <!-- Card Header -->
-            <div class="card-header">
-              <div class="config-icon">
+            <div class="relative z-1 flex flex-1 items-start justify-between">
+              <div
+                class="peer flex h-[40px] w-[40px] items-center justify-center rounded-lg border border-border-secondary text-accent transition-all duration-fast ease-apple group-hover/config-card:scale-105 [.is-active]:border-none [.is-active]:bg-accent [.is-active]:text-white"
+                :class="{ 'is-active': defaultConfigId === item._id }"
+              >
                 <Cloud :size="20" />
               </div>
-              <div class="card-actions">
+              <div
+                class="grid grid-cols-2 gap-1.5 opacity-0 transition-all duration-fast ease-apple group-hover/config-card:opacity-100 peer-[.is-active]:opacity-100"
+              >
                 <button
                   class="action-btn"
                   :title="
@@ -56,7 +71,7 @@
                   "
                   @click.stop="() => toggleConfigFavorite(item._id, item._configName)"
                 >
-                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? '#f39c12' : 'none'" />
+                  <Heart :size="14" :fill="isConfigFavorited(item._id) ? 'var(--color-warning)' : 'none'" />
                 </button>
                 <button class="action-btn" :title="t('pages.uploaderConfig.edit')" @click.stop="openEditPage(item._id)">
                   <Pencil :size="14" />
@@ -69,7 +84,7 @@
                   <Copy :size="14" />
                 </button>
                 <button
-                  class="action-btn action-btn-danger"
+                  class="action-btn danger"
                   :class="{ disabled: curConfigList.length <= 1 }"
                   :title="t('pages.uploaderConfig.delete')"
                   :disabled="curConfigList.length <= 1"
@@ -81,42 +96,48 @@
             </div>
 
             <!-- Card Body -->
-            <div class="card-body">
-              <h3 class="config-name">{{ item._configName }}</h3>
-              <div class="config-meta">
-                <div style="display: flex; align-items: center; gap: 4px">
+            <div class="relative z-1 flex-1">
+              <h3 class="mx-0 mt-0 mb-2 text-base leading-[1.4] font-semibold tracking-tight text-main">
+                {{ item._configName }}
+              </h3>
+              <div class="flex items-center gap-1.5 text-xs text-tertiary">
+                <div class="flex items-center gap-1">
                   <Clock :size="12" />
                   <span>{{ formatTime(item._updatedAt) }}</span>
                 </div>
-                <div v-if="defaultConfigId === item._id" class="status-badge active">
-                  <CheckCircle2 :size="14" />
+                <div
+                  v-if="defaultConfigId === item._id"
+                  class="inline-flex items-center gap-1.5 rounded-2xl bg-accent/40 px-3 py-1.5 text-xs font-medium text-white transition-all duration-fast ease-standard"
+                >
+                  <CheckCircle2 :size="15" />
                   <span>{{ t('pages.uploaderConfig.selected') }}</span>
                 </div>
-                <div v-else class="status-badge inactive">
+                <div
+                  v-else
+                  class="inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs font-medium text-tertiary transition-all duration-fast ease-standard group-hover/config-card:bg-accent/10"
+                >
                   <Circle :size="14" />
                   <span>{{ t('pages.uploaderConfig.clickToSelect') }}</span>
                 </div>
               </div>
             </div>
-
-            <div class="card-glow" />
           </article>
 
           <article
             key="add-new"
-            class="config-card config-card-add"
-            :style="{ '--delay': `${curConfigList.length * 50}ms` }"
+            class="group/new relative flex min-h-[180px] cursor-pointer flex-col items-center justify-center gap-6 overflow-hidden rounded-xl border-2 border-dashed border-border p-5 shadow-sm transition-all duration-fast ease-apple hover:border-solid hover:border-accent hover:bg-surface hover:shadow-md"
             @click="addNewConfig"
           >
-            <div class="add-content">
-              <div class="add-icon">
+            <div class="flex flex-col items-center gap-3 transition-all duration-fast ease-apple">
+              <div
+                class="flex h-[56px] w-[56px] items-center justify-center rounded-xl border-2 border-dashed border-border text-tertiary transition-all duration-fast ease-apple group-hover/new:scale-105 group-hover/new:border-solid group-hover/new:border-accent group-hover/new:bg-accent/5 group-hover/new:text-accent"
+              >
                 <Plus :size="24" />
               </div>
-              <div class="add-text">
-                <span class="add-title">{{ t('pages.uploaderConfig.addNew') }}</span>
+              <div class="flex flex-col items-center gap-1">
+                <span class="text-base font-semibold text-secondary">{{ t('pages.uploaderConfig.addNew') }}</span>
               </div>
             </div>
-            <div class="card-glow" />
           </article>
         </TransitionGroup>
       </main>
@@ -147,7 +168,7 @@ const message = useMessage()
 const { confirm } = useConfirm()
 const router = useRouter()
 const route = useRoute()
-const { defaultPicBedG, picBedG } = usePicBed()
+const { defaultPicBedG, picBedG, updatePicBeds } = usePicBed()
 const favoritePicbeds = useStorage<IFavoritePicbedItem[]>('favorite-picbeds', [])
 
 const type = ref('')
@@ -312,6 +333,7 @@ function setDefaultPicBed(type: string) {
   })
   const currentConfigName = curConfigList.value.find(item => item._id === defaultConfigId.value)?._configName
   window.electron.sendRPC(IRPCActionType.TRAY_SET_TOOL_TIP, `${type} ${currentConfigName || ''}`)
+  updatePicBeds()
   message.success(t('pages.uploaderConfig.setSuccess'))
 }
 </script>
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 916a2797..c5ad2bc1 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -3,12 +3,12 @@
 @import "../../assets/css/utilities.css" reference;
 
 .segmented-button {
-  @apply flex items-center border-none border-r-border-secondary border-r py-2.5 px-4 text-sm font-[inherit] font-medium text-secondary bg-transparent duration-fast ease-standard gap-2 cursor-pointer whitespace-nowrap last:border-r-0 hover:text-accent-hover hover:bg-bg-tertiary;
+  @apply flex items-center border-none border-r-border-secondary border-r py-2.5 px-4 text-sm font-[inherit] font-medium text-secondary duration-fast ease-standard gap-2 cursor-pointer whitespace-nowrap last:border-r-0 hover:text-accent-hover hover:bg-bg-tertiary;
 }
 
 /* Quick Actions Card */
 .quick-action-button {
-  @apply relative flex items-center border border-border-secondary rounded-lg px-4 py-3.5 font-[inherit] text-left bg-bg-secondary duration-medium ease-standard gap-2 cursor-pointer hover:border-accent-hover hover:shadow-md hover:-translate-y-[2px] [.has-badge]:pr-12 max-xs:py-3 max-xs:px-3.5 focus-visible:focus-ring;
+  @apply relative flex flex-1 items-center border border-border-secondary rounded-lg px-4 py-3.5 font-[inherit] text-left bg-bg-secondary duration-medium ease-standard gap-2 cursor-pointer hover:border-accent-hover hover:shadow-md hover:-translate-y-[2px] [.has-badge]:pr-12 max-xs:py-3 max-xs:px-3.5 focus-visible:focus-ring;
 }
 
 .filter-tab {
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
index d8aaa528..e9347efb 100644
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -1,524 +1,7 @@
-/* Page Container */
-.config-page {
-  position: relative;
-  overflow: hidden auto;
-  min-height: 100vh;
-  background: var(--color-background);
-}
-
-/* Main Container */
-.config-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  margin: 0 auto;
-  padding: 2rem;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-/* ============================================
-   Hero Header Section
-   ============================================ */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: var(--color-border);
-  border-radius: var(--radius-2xl);
-  padding: 1.75rem 2rem;
-  background:var(--color-background-secondary);
-  box-shadow: var(--shadow-md);
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-xl);
-  width: 56px;
-  height: 56px;
-  color: var(--color-accent);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-.header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.625rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.page-subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* ============================================
-   Button Styles
-   ============================================ */
-.btn {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border: none;
-  border-radius: var(--radius-lg);
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 600;
-  transition: all var(--transition-medium);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-primary {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: var(--shadow-md);
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.btn-primary:disabled {
-  color: var(--color-text-secondary);
-  background: var(--color-border);
-  opacity: 0.6;
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.btn-glow::before {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
-  transition: left 0.5s ease;
-  content: '';
-}
-
-.btn-glow:hover:not(:disabled)::before {
-  left: 100%;
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-.main-content {
-  flex: 1;
-}
-
-/* Config Grid */
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.25rem;
-}
-
-/* ============================================
-   Config Cards
-   ============================================ */
-.config-card {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  padding: 1.25rem;
-  min-height: 180px;
-  background: var(--color-background-secondary);
-  box-shadow:
-    0 2px 8px rgb(0 0 0 / 4%),
-    0 1px 2px rgb(0 0 0 / 6%);
-  transition: all var(--transition-medium);
-  animation: card-enter var(--transition-slow) backwards;
-  animation-delay: var(--delay, 0ms);
-  flex-direction: column;
-  cursor: pointer;
-}
-
-@keyframes card-enter {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.config-card:hover {
-  border-color: var(--color-accent);
-  box-shadow: var(--shadow-lg);
-}
-
-.config-card:hover .card-glow {
-  opacity: 1;
-}
-
-.config-card:hover .card-actions {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* Active State */
-.config-card.is-active {
-  border: 2px solid var(--color-accent);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-md);
-}
-
-/* Active Indicator */
-.active-indicator {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 2;
-}
-
-.indicator-dot {
-  border-radius: var(--radius-round);
-  width: 10px;
-  height: 10px;
-  background: var(--color-accent);
-  box-shadow: 0 0 12px var(--color-accent);
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%,
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 12px var(--color-accent);
-  }
-
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0 0 20px var(--color-accent);
-  }
-}
-
-/* Card Header */
-.config-card .card-header {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-}
-
-.config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 40px;
-  height: 40px;
-  color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transition: all 0.25s ease;
-}
-
-.config-card:hover .config-icon {
-  transform: scale(1.05);
-}
-
-.config-card.is-active .config-icon {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: var(--shadow-md);
-}
-
-/* Card Actions */
-.config-card .card-actions {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  opacity: 0;
-  transform: translateY(-4px);
-  transition: all 0.25s ease;
-  gap: 0.375rem;
-}
-
-.config-card.is-active .card-actions {
-  opacity: 1;
-  transform: translateY(0);
-}
+@import "tailwindcss" reference;
+@import "../../assets/css/theme.css" reference;
+@import "../../assets/css/utilities.css" reference;
 
 .action-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  width: 30px;
-  height: 30px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.action-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: scale(1.08);
-}
-
-.action-btn-danger:hover:not(.disabled) {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
-  background: var(--color-background-secondary);
-}
-
-.action-btn.disabled {
-  cursor: not-allowed;
-}
-
-/* Card Body */
-.card-body {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-}
-
-.config-name {
-  margin: 0 0 0.5rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-}
-
-.config-meta {
-  display: flex;
-  align-items: center;
-  font-size: 0.8rem;
-  color: var(--color-text-tertiary);
-  gap: 0.375rem;
-}
-
-/* Card Footer */
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-2xl);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  transition: all 0.25s ease;
-  gap: 0.375rem;
-}
-
-.status-badge.active {
-  color: var(--color-accent);
-  background: color-mix(in srgb, var(--color-accent), transparent 95%);
-}
-
-.status-badge.inactive {
-  color: var(--color-text-tertiary);
-  background: var(--color-background-secondary);
-}
-
-.config-card:hover .status-badge.inactive {
-  color: var(--color-text-secondary);
-  background: color-mix(in srgb, var(--color-accent), transparent 97%);
-}
-
-/* ============================================
-   Add New Config Card
-   ============================================ */
-.config-card-add {
-  justify-content: center;
-  align-items: center;
-  border: 2px dashed var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.config-card-add:hover {
-  border-style: solid;
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.add-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transition: all 0.25s ease;
-  gap: 0.75rem;
-}
-
-.add-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-xl);
-  width: 56px;
-  height: 56px;
-  color: var(--color-text-tertiary);
-  background: var(--color-background-secondary);
-  transition: all 0.3s ease;
-}
-
-.config-card-add:hover .add-icon {
-  border-style: solid;
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: color-mix(in srgb, var(--color-accent), transparent 95%);
-  transform: scale(1.05) rotate(90deg);
-}
-
-.add-text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.add-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  transition: color 0.25s ease;
-}
-
-.config-card-add:hover .add-title {
-  color: var(--color-accent);
-}
-
-.add-hint {
-  font-size: 0.8rem;
-  color: var(--color-text-tertiary);
-}
-
-/* ============================================
-   Transition Group Animations
-   ============================================ */
-.config-list-enter-active {
-  transition: all var(--transition-slow);
-}
-
-.config-list-leave-active {
-  position: absolute;
-  transition: all var(--transition-medium);
-}
-
-.config-list-enter-from {
-  opacity: 0;
-  transform: translateY(20px) scale(0.9);
-}
-
-.config-list-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-.config-list-move {
-  transition: transform var(--transition-slow);
-}
-
-/* ============================================
-   Responsive Design
-   ============================================ */
-@media (width <= 768px) {
-  .config-container {
-    padding: 1rem;
-    gap: 1.25rem;
-  }
-
-  .page-header {
-    align-items: stretch;
-    border-radius: var(--radius-xl);
-    padding: 1.25rem;
-    flex-direction: column;
-  }
-
-  .header-content {
-    justify-content: center;
-    text-align: center;
-    flex-direction: column;
-  }
-
-  .header-icon {
-    width: 48px;
-    height: 48px;
-  }
-
-  .page-title {
-    font-size: 1.375rem;
-  }
-
-  .header-actions {
-    justify-content: center;
-  }
-
-  .config-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .config-card {
-    min-height: 160px;
-  }
-
-  .config-card .card-actions {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (width >= 1200px) {
-  .config-container {
-    padding: 2.5rem 3rem;
-  }
-
-  .config-grid {
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.5rem;
-  }
-}
-
-@media (width >= 1600px) {
-  .config-grid {
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  }
+  @apply flex justify-center items-center border border-border-secondary/80 rounded-md text-secondary transition-all duration-fast ease-standard w-[30px] h-[30px] cursor-pointer hover:border-accent hover:text-accent hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed hover:not-disabled:[.danger]:border-danger hover:not-disabled:[.danger]:text-danger;
 }