diff --git a/README.md b/README.md
index 9412fb69..766bb51b 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,7 @@ Whether you need to organize your cloud files, sync markdown images, or manage m
   <img src="https://github.com/Kuingsmile/PicList/blob/dev/imgs/upload.webp?raw=true" alt="Upload Interface" width="100%">
 </div>
 <div align="center">
-  <img width="2098" height="1398" alt="Image" src="https://github.com/user-attachments/assets/337f8bd9-11e1-443f-9bd3-3db4d5938e97" />
+  <img width="2098" height="1398" alt="Image" src="https://github.com/Kuingsmile/PicList/blob/dev/imgs/anime.webp?raw=true" />
 </div>
 </details>
 
diff --git a/README_cn.md b/README_cn.md
index dd8c63a6..d109d414 100644
--- a/README_cn.md
+++ b/README_cn.md
@@ -60,7 +60,7 @@
   <img src="https://github.com/Kuingsmile/PicList/blob/dev/imgs/upload.webp?raw=true" alt="Upload Interface" width="100%">
 </div>
 <div align="center">
-  <img width="2098" height="1398" alt="Image" src="https://github.com/user-attachments/assets/337f8bd9-11e1-443f-9bd3-3db4d5938e97" />
+  <img width="2098" height="1398" alt="Image" src="https://github.com/Kuingsmile/PicList/blob/dev/imgs/anime.webp?raw=true" />
 </div>
 </details>
 
diff --git a/imgs/anime.webp b/imgs/anime.webp
new file mode 100644
index 00000000..16f71042
Binary files /dev/null and b/imgs/anime.webp differ
diff --git a/src/renderer/pages/picbeds/index.vue b/src/renderer/pages/PicBed.vue
similarity index 86%
rename from src/renderer/pages/picbeds/index.vue
rename to src/renderer/pages/PicBed.vue
index a7ad17c5..4867c0d9 100644
--- a/src/renderer/pages/picbeds/index.vue
+++ b/src/renderer/pages/PicBed.vue
@@ -40,7 +40,7 @@
                 <CustomButton type="secondary" :icon="RotateCcw" :text="t('common.reset')" @click="handleReset" />
                 <CustomButton type="primary" :icon="Check" :text="t('common.confirm')" @click="handleConfirm" />
 
-                <div v-if="picBedConfigList.length > 0" class="dropdown-wrapper">
+                <div v-if="picBedConfigList.length > 0" class="relative">
                   <CustomButton
                     type="primary"
                     :icon="Import"
@@ -51,18 +51,21 @@
                   />
 
                   <Transition name="dropdown">
-                    <div v-show="dropdownVisible" class="dropdown-menu">
-                      <div class="dropdown-header">
+                    <div
+                      v-show="dropdownVisible"
+                      class="absolute right-0 bottom-[calc(100%+8px)] z-1000 min-w-[220px] overflow-auto rounded-xl border border-border bg-surface shadow-md"
+                    >
+                      <div class="bg-bg-tertiary px-4 py-3 text-xs font-semibold tracking-wider text-main uppercase">
                         <span>{{ t('pages.picBedConfigs.selectConfig') }}</span>
                       </div>
-                      <div class="dropdown-items">
+                      <div class="max-h-[250px] overflow-y-auto">
                         <button
                           v-for="item in picBedConfigList"
                           :key="item._id"
-                          class="dropdown-item"
+                          class="flex w-full cursor-pointer items-center gap-2.5 border-none bg-bg-tertiary px-4 py-3 text-center text-sm text-main hover:text-accent"
                           @click="handleConfigImport(item)"
                         >
-                          <FileJson :size="14" />
+                          <FileJson :size="14" class="text-accent" />
                           <span>{{ item._configName }}</span>
                         </button>
                       </div>
@@ -74,32 +77,24 @@
           </div>
 
           <!-- Empty State -->
-          <div v-else class="empty-state-card">
-            <div class="empty-state">
-              <div class="empty-icon-wrapper">
+          <div
+            v-else
+            class="flex w-full items-center justify-center overflow-hidden rounded-2xl border border-border-secondary bg-surface shadow-md"
+          >
+            <div class="px-8 py-16 text-center">
+              <div
+                class="mb-6 inline-flex h-[96px] w-[96px] items-center justify-center rounded-2xl border-2 border-border bg-surface-elevated text-main"
+              >
                 <FolderOpen :size="48" />
               </div>
-              <h3 class="empty-title">{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
-              <p class="empty-description">{{ t('pages.picBedConfigs.noConfigOptionsDesc') }}</p>
+              <h3 class="mb-2 text-xl font-semibold text-main">{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
+              <p class="m-0 text-[0.9rem] text-secondary">{{ t('pages.picBedConfigs.noConfigOptionsDesc') }}</p>
             </div>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Loading Overlay -->
-    <Transition name="fade">
-      <div v-if="loading" class="loading-overlay">
-        <div class="loading-content">
-          <div class="loading-spinner">
-            <div class="spinner-ring" />
-            <Cloud :size="24" class="spinner-icon" />
-          </div>
-          <span class="loading-text">{{ 'loading' }}</span>
-        </div>
-      </div>
-    </Transition>
-
     <transition name="modal">
       <CustomModal
         v-if="imageProcessDialogVisible"
@@ -139,7 +134,6 @@ const type = ref('')
 const config = ref<IPicGoPluginConfig[]>([])
 const picBedConfigList = ref<IUploaderConfigListItem[]>([])
 const picBedName = ref('')
-const loading = ref(false)
 const dropdownVisible = ref(false)
 const imageProcessDialogVisible = ref(false)
 const $route = useRoute()
@@ -151,12 +145,11 @@ const currentPicbedType = $route.params.type as string
 type.value = $route.params.type as string
 
 onBeforeMount(async () => {
-  loading.value = true
   try {
     await getPicBeds()
     await getPicBedConfigList()
-  } finally {
-    loading.value = false
+  } catch (error) {
+    console.error('Initialization error:', error)
   }
 })
 
@@ -292,5 +285,3 @@ export default {
   name: 'PicbedsPage',
 }
 </script>
-
-<style scoped src="../css/Picbeds.css"></style>
diff --git a/src/renderer/pages/css/Picbeds.css b/src/renderer/pages/css/Picbeds.css
deleted file mode 100644
index 94335a64..00000000
--- a/src/renderer/pages/css/Picbeds.css
+++ /dev/null
@@ -1,543 +0,0 @@
-@import url('./common/modal.css');
-@import url('./common/advancedAnimation.css');
-
-/* Page Container */
-.picbeds-page {
-  position: relative;
-  overflow: hidden auto;
-  min-height: 100vh;
-  background: var(--color-background-secondary);
-}
-
-@keyframes ambient-drift {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-
-  33% {
-    transform: translate(2%, -1%) rotate(1deg);
-  }
-
-  66% {
-    transform: translate(-1%, 2%) rotate(-0.5deg);
-  }
-}
-
-/* Main Container */
-.page-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  margin: 0 auto;
-  padding: 2rem;
-  max-width: 1000px;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-2xl);
-  padding: 1.5rem 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);
-}
-
-.header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.title-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.page-subtitle {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.doc-link-btn {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transition: all 0.2s ease;
-  gap: 0.375rem;
-  cursor: pointer;
-}
-
-.doc-link-btn:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-1px);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.btn {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border: none;
-  border-radius: var(--radius-lg);
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 600;
-  transition: all var(--transition-medium);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-secondary {
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-secondary:hover {
-  background: var(--color-surface);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.btn-outline {
-  border: 1px solid var(--color-border);
-  color: var(--color-text-secondary);
-  background: transparent;
-}
-
-.btn-outline:hover {
-  border-color: var(--color-accent);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transform: translateY(-1px);
-}
-
-.btn-success {
-  color: white;
-  background: var(--color-success);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-success:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-warning {
-  color: white;
-  background: var(--color-warning);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-warning:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-sm);
-}
-
-.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::before {
-  left: 100%;
-}
-
-.main-content {
-  flex: 1;
-}
-
-/* Config Card */
-.config-card {
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-2xl);
-  background: var(--color-background-secondary);
-  box-shadow:
-    0 4px 24px rgb(0 0 0 / 6%),
-    0 1px 2px rgb(0 0 0 / 4%);
-  animation: card-enter var(--transition-slow);
-}
-
-@keyframes card-enter {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 1.25rem 1.5rem;
-  background: var(--color-background-secondary);
-  gap: 0.75rem;
-}
-
-.card-header-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  width: 36px;
-  height: 36px;
-  color: var(--color-accent);
-  background: color-mix(in srgb, var(--color-accent), transparent 90%);
-}
-
-.card-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.card-body {
-  padding: 1.5rem;
-}
-
-/* Action Buttons */
-.action-buttons {
-  display: flex;
-  margin-top: 2rem;
-  border-top: 1px solid var(--color-border-secondary);
-  padding-top: 1.5rem;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.dropdown-wrapper {
-  position: relative;
-}
-
-.dropdown-trigger {
-  position: relative;
-}
-
-.dropdown-chevron {
-  margin-left: 0.25rem;
-  transition: transform 0.2s ease;
-}
-
-.dropdown-chevron.rotated {
-  transform: rotate(180deg);
-}
-
-.dropdown-menu {
-  position: absolute;
-  right: 0;
-  bottom: calc(100% + 8px);
-  z-index: 1000;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-xl);
-  min-width: 220px;
-  background: var(--color-surface);
-  box-shadow:
-    0 -12px 40px rgb(0 0 0 / 15%),
-    0 -4px 12px rgb(0 0 0 / 8%);
-}
-
-.dropdown-header {
-  padding: 0.75rem 1rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--color-text-tertiary);
-  background: var(--color-background-tertiary);
-  letter-spacing: 0.05em;
-}
-
-.dropdown-items {
-  overflow-y: auto;
-  max-height: 250px;
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  border: none;
-  padding: 0.75rem 1rem;
-  width: 100%;
-  font-size: 0.875rem;
-  text-align: left;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transition: all 0.15s ease;
-  gap: 0.625rem;
-  cursor: pointer;
-}
-
-.dropdown-item:hover {
-  color: var(--color-accent);
-}
-
-.dropdown-item svg {
-  color: var(--color-text-tertiary);
-  transition: color 0.15s ease;
-}
-
-.dropdown-item:hover svg {
-  color: var(--color-accent);
-}
-
-/* Dropdown Transition */
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all var(--transition-fast);
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(8px) scale(0.95);
-}
-
-.empty-state-card {
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-2xl);
-  background: var(--color-surface);
-  box-shadow: 0 4px 24px rgb(0 0 0 / 6%);
-  animation: card-enter var(--transition-slow);
-}
-
-.empty-state {
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.empty-icon-wrapper {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.5rem;
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-2xl);
-  width: 96px;
-  height: 96px;
-  color: var(--color-text-tertiary);
-  background: var(--color-surface-elevated);
-}
-
-.empty-title {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.empty-description {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-}
-
-.loading-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 60%);
-}
-
-.loading-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1.25rem;
-}
-
-.loading-spinner {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 64px;
-  height: 64px;
-}
-
-.spinner-ring {
-  position: absolute;
-  inset: 0;
-  border: 3px solid rgb(255 255 255 / 15%);
-  border-top-color: white;
-  border-radius: var(--radius-round);
-  animation: spin 1s linear infinite;
-}
-
-.spinner-icon {
-  color: white;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 0.6;
-    transform: scale(1);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1.1);
-  }
-}
-
-.loading-text {
-  font-size: 0.9rem;
-  font-weight: 500;
-  color: white;
-}
-
-/* Fade Transition */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-@media (width <= 768px) {
-  .page-container {
-    padding: 1rem;
-    gap: 1rem;
-  }
-
-  .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;
-  }
-
-  .title-row {
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .page-title {
-    font-size: 1.25rem;
-  }
-
-  .header-actions {
-    justify-content: center;
-  }
-
-  .config-card {
-    border-radius: var(--radius-xl);
-  }
-
-  .card-body {
-    padding: 1.25rem;
-  }
-
-  .action-buttons {
-    flex-direction: column;
-  }
-
-  .btn {
-    justify-content: center;
-    width: 100%;
-  }
-
-  .dropdown-menu {
-    right: auto;
-    left: 0;
-    min-width: 100%;
-  }
-}
-
-@media (width >= 1024px) {
-  .page-container {
-    padding: 2.5rem;
-  }
-}
-
-.btn:focus-visible,
-.doc-link-btn:focus-visible,
-.dropdown-item:focus-visible {
-  outline: 1px solid var(--color-accent);
-  outline-offset: 2px;
-}
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 4abae3f0..804765ab 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -8,7 +8,7 @@ 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 PicBedsPage from '@/pages/PicBed.vue'
 import SettingPage from '@/pages/PicGoSetting.vue'
 import PluginPage from '@/pages/Plugin.vue'
 import RenamePage from '@/pages/RenamePage.vue'