diff --git a/currentVersion.md b/currentVersion.md
index 84a835a7..87ba6e6b 100644
--- a/currentVersion.md
+++ b/currentVersion.md
@@ -2,37 +2,42 @@
 
 ### 🚀 性能优化
 
-- 减少了60-70%的闲置内存占用和20%的打开窗口时内存占用
+- 减少了 **60-70%** 的闲置内存占用和 **20%** 的打开窗口时内存占用
 - 优化了多个页面的加载速度和浏览性能
 
 ### ✨ 新增功能
 
-- 新功能
-  - 现在支持关闭GPU加速，解决部分兼容性问题
-  - 新增高级动画设置，开启后可获得更好的UI体验
-  - windows下新增便携模式，无需安装即可运行，数据存储在程序目录下的`data`文件夹中，支持自动更新
-  - Linux下新增`rpm`安装包
-  - 管理页面新增图床编辑卡片页面，避免了之前多配置切换时的混乱
+#### ⚙️ 核心功能
 
-- UI
-  - 新增自定义主题功能，主题仓库[PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub)
-  - 12个内置主题供选择，如bilibili、二次元、极夜紫等风格
-  - 重新设计了管理功能的全部页面
-  - 重构了几乎全部页面，优化了数十项UI细节问题，整体风格更加统一
-  - 相册页面多项优化，支持显示已选择图片数量，匹配的url列表和记忆过滤器打开状态
-  - 优化了管理文件浏览页面侧边栏名字的显示，现在在超出宽度时会滚动显示完整名称
-  - 插件页面现在可以浏览所有插件列表，查看详情和安装
-  - 新增教学引导页面，首次运行时会自动弹出
+- 现在支持手动关闭 GPU 加速，解决部分硬件兼容性导致的黑屏或闪烁问题。
+- 新增高级动画设置，开启后可获得更佳的 UI 交互体验。
+- Windows 便携模式，无需安装运行，数据存储在程序目录下的 `data` 文件夹中，且支持自动更新。
+- Linux 新增 `rpm` 安装包。
+- 新增图床编辑卡片页面，解决多配置切换时的混乱问题。
+- 文件浏览页面新增列表模式支持。
 
-- 其它
-  - 原管理功能重命名为`云端`，更符合实际功能
-  - 现在重置图床后不再自动返回上一页面
+#### 🎨 UI 界面
+
+- 接入主题仓库 [PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub)，支持自定义下载。
+- 提供 12 个内置主题（如 bilibili、二次元、极夜紫等风格）。
+- 重新设计了管理功能的全部页面，重构了几乎所有业务页面，优化数十项 UI 细节。
+  - 优化相册页面卡片样式，边界更清晰，提升选择框视觉效果。
+  - 优化多个页面在窄屏下的显示，避免内容溢出。
+  - 文件浏览侧边栏名称超出宽度时支持滚动显示完整名称。
+- 相册页面支持显示已选数量、匹配的 URL 列表和记忆过滤器状态。
+- 支持浏览完整插件列表、查看详情及一键安装。
+- 新增新手引导页面，首次运行自动弹出。
+
+#### 📝 其它
+
+- 原“管理”功能重命名为 **“云端”**，更符合实际功能定义。
+- 重置图床后不再自动返回上一页面。
 
 ### 🐛 问题修复
 
-- 修复了管理页面中排序下拉框显示异常的问题
-- 修复了管理页面图床列表没有正确为当前选中图床高亮的问题
-- 修复了暗色模式下任务页面的显示问题
-- 修复了图床设置页面设置为默认图床按钮状态没有及时更新的问题
-- 修复了预处理设置页面，图床水印独立设置的按钮状态没有及时更新的问题
-- 修复了部分页面底部元素被遮挡的问题
+- 修复了管理页面中排序下拉框显示异常的问题。
+- 修复了管理页面图床列表未正确高亮当前选中项的问题。
+- 修复了暗色模式下任务页面的显示异常。
+- 修复了图床设置页面“设置为默认图床”按钮状态更新不及时的问题。
+- 修复了预处理设置页面中，图床水印独立设置按钮状态不同步的问题。
+- 修复了部分页面底部元素被遮挡的问题。
diff --git a/currentVersion_en.md b/currentVersion_en.md
index b302eaaf..ff565e81 100644
--- a/currentVersion_en.md
+++ b/currentVersion_en.md
@@ -2,24 +2,42 @@
 
 ### 🚀 Performance Optimization
 
-- Reduced idle memory usage by 60-70% and memory usage when opening windows by 20%
+- Reduced **60-70%** idle memory usage and **20%** memory usage when opening windows.
+- Optimized loading speed and browsing performance for multiple pages
 
 ### ✨ 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
-- 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 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
-- Now supports disabling GPU acceleration to resolve some compatibility issues
-- Added advanced animation settings for a better UI experience
-- Optimized the loading speed of multiple pages and browsing performance
+#### ⚙️ Core Features
+
+- Now supports manually disabling GPU acceleration to resolve black screen or flickering issues caused by some hardware compatibility.
+- Added advanced animation settings for a better UI interaction experience.
+- Windows portable mode, no installation required, data is stored in the `data` folder in the program directory, and supports automatic updates.
+- Added `rpm` installation package for Linux.
+- Added image hosting editing card page to solve confusion when switching multiple configurations.
+- Added list mode support for the file browsing page.
+
+#### 🎨 UI Interface
+
+- Integrated theme repository [PicList ThemeHub](https://github.com/Kuingsmile/PicList-ThemeHub), supporting custom downloads.
+- Provided 12 built-in themes (such as bilibili, 二次元, 极夜紫 styles).
+- Redesigned all pages of the management feature, refactored almost all business pages, and optimized dozens of UI details.
+  - Optimized album page card styles, clearer boundaries, and improved selection box visual effects.
+  - Optimized the display of multiple pages on narrow screens to avoid content overflow.
+  - Supported scrolling to display the full name when the file browsing sidebar name exceeds the width.
+- The album page supports displaying the number of selected items, matching URL lists, and remembering filter states.
+- Supports browsing the complete plugin list, viewing details, and one-click installation.
+- Added a new user guide page that automatically pops up on the first run.
+
+#### 📝 Others
+
+- The original "Management" feature has been renamed to **"Cloud"** to better reflect its actual functionality.
+- After resetting the image hosting, it no longer automatically returns to the previous page.
 
 ### 🐛 Bug Fixes
 
-- 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
-- Fixed an issue where the button status for independent watermark settings on the image bed watermark settings page did not update in time
+- Fixed the issue of abnormal display of the sorting dropdown box on the management page.
+- Fixed the issue where the image hosting list on the management page did not correctly highlight the currently selected item.
+- Fixed the display issue of the task page in dark mode.
+- Fixed the issue where the "Set as Default Image Hosting" button status on the image hosting settings page was not updated in a timely manner.
+- Fixed the issue where the independent watermark setting button status on the image hosting was not synchronized in the preprocessing settings page.
+- Fixed the issue where bottom elements of some pages were obscured.
diff --git a/src/main/events/remotes/menu.ts b/src/main/events/remotes/menu.ts
index c7e77cc0..e6927057 100644
--- a/src/main/events/remotes/menu.ts
+++ b/src/main/events/remotes/menu.ts
@@ -53,9 +53,7 @@ const buildMiniPageMenu = () => {
       label: $t('HIDE_MINI_WINDOW'),
       click() {
         const miniWindow = windowManager.get(IWindowList.MINI_WINDOW)
-        console.log('hide mini window', miniWindow)
         miniWindow?.close()
-        console.log('mini window closed')
       },
     },
     {
diff --git a/src/renderer/components/ImageLocal.vue b/src/renderer/components/ImageLocal.vue
index a57c402d..8300747f 100644
--- a/src/renderer/components/ImageLocal.vue
+++ b/src/renderer/components/ImageLocal.vue
@@ -1,17 +1,22 @@
 <template>
-  <div class="image-container">
-    <div v-if="isLoading" class="loading-placeholder">
-      <div class="loading-spinner" />
+  <div class="relative flex h-full w-full items-center justify-center p-0">
+    <div v-if="isLoading" class="flex h-full w-full items-center justify-center">
+      <div class="h-[34px] w-[34px] animate-spin rounded-full border-3 border-t-3 border-border border-t-accent" />
     </div>
     <img
       v-else-if="!hasError"
       :src="isShowThumbnail && item.isImage ? base64Image : `./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
       alt=""
-      class="image"
+      class="h-full w-full object-contain"
       @load="handleImageLoad"
       @error="handleImageError"
     />
-    <img v-else :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" alt="" class="image" />
+    <img
+      v-else
+      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+      alt=""
+      class="h-full w-full object-contain"
+    />
   </div>
 </template>
 
@@ -60,49 +65,3 @@ onBeforeMount(async () => {
   await createBase64Image()
 })
 </script>
-
-<style scoped>
-.image-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-  width: 100%;
-  height: 100px;
-}
-
-.image {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.loading-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.loading-spinner {
-  border: 2px solid #e4e7ed;
-  border-top: 2px solid #409eff;
-  border-radius: var(--radius-round);
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/renderer/components/ImagePreSign.vue b/src/renderer/components/ImagePreSign.vue
index 03104b91..30c305de 100644
--- a/src/renderer/components/ImagePreSign.vue
+++ b/src/renderer/components/ImagePreSign.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="image-container">
-    <div v-if="isLoading" class="loading-placeholder">
-      <div class="loading-spinner" />
+  <div class="relative flex h-full w-full items-center justify-center p-0">
+    <div v-if="isLoading" class="flex h-full w-full items-center justify-center">
+      <div class="h-[34px] w-[34px] animate-spin rounded-full border-3 border-t-3 border-border border-t-accent" />
     </div>
     <img
       v-else-if="!hasError"
       :src="imageSource"
       alt=""
-      class="image"
+      class="h-full w-full object-contain"
       @load="handleImageLoad"
       @error="handleImageError"
     />
-    <img v-else :src="iconPath" alt="" class="image" />
+    <img v-else :src="iconPath" alt="" class="h-full w-full object-contain" />
   </div>
 </template>
 
@@ -76,49 +76,3 @@ watch(() => [props.url, props.item], getUrl, { deep: true })
 
 onMounted(getUrl)
 </script>
-
-<style scoped>
-.image-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-  width: 100%;
-  height: 100px;
-}
-
-.image {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.loading-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.loading-spinner {
-  border: 2px solid #e4e7ed;
-  border-top: 2px solid #409eff;
-  border-radius: var(--radius-round);
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/renderer/components/ImagePreview.vue b/src/renderer/components/ImagePreview.vue
new file mode 100644
index 00000000..e3e62625
--- /dev/null
+++ b/src/renderer/components/ImagePreview.vue
@@ -0,0 +1,418 @@
+<template>
+  <transition name="modal">
+    <div
+      v-if="gallerySliderControl.visible"
+      class="image-preview-modal fixed inset-0 z-1000 flex items-center justify-center outline-none"
+      tabindex="0"
+      @click.stop
+      @wheel="handleImageWheel"
+      @keydown="handleKeydown"
+    >
+      <div class="absolute inset-0 bg-black/50" :class="{ 'advanced-animation': enableAdvancedAnimation }" />
+      <div class="relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-surface shadow-lg">
+        <button
+          class="absolute top-4 right-4 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-danger bg-danger/70 text-white hover:bg-danger hover:text-white"
+          @click="handleClose"
+        >
+          <XIcon :size="24" />
+        </button>
+
+        <!-- Zoom controls -->
+        <div class="absolute top-4 left-4 z-10 flex items-center gap-2 rounded-lg bg-black/70 p-2">
+          <button class="zoom-btn" :disabled="imagePreviewState.scale <= 0.1" @click="zoomOut">
+            <span>-</span>
+          </button>
+          <span class="min-w-[50px] text-center text-sm font-medium text-white"
+            >{{ Math.round(imagePreviewState.scale * 100) }}%</span
+          >
+          <button class="zoom-btn" :disabled="imagePreviewState.scale >= 5" @click="zoomIn">
+            <span>+</span>
+          </button>
+          <button class="zoom-btn reset-btn" @click="resetImageTransform">Reset</button>
+        </div>
+
+        <div class="relative flex items-center">
+          <button class="nav-button prev" :disabled="gallerySliderControl.index === 0" @click.stop="navigateImage(-1)">
+            <ChevronLeftIcon :size="24" />
+          </button>
+
+          <div
+            class="relative flex h-[80vh] w-[90vw] items-center justify-center overflow-hidden bg-black select-none active:cursor-grab!"
+            @mousedown="handleImageMouseDown"
+            @mousemove="handleImageMouseMove"
+            @mouseup="handleImageMouseUp"
+            @mouseleave="handleImageMouseUp"
+            @touchstart="handleImageTouchStart"
+            @touchmove="handleImageTouchMove"
+            @touchend="handleImageTouchEnd"
+          >
+            <img
+              ref="previewImageRef"
+              :src="currentPreviewImage?.src"
+              :alt="currentPreviewImage?.intro"
+              class="block h-auto max-h-none w-auto max-w-none origin-center object-contain"
+              :style="imageTransformStyle"
+              @load="onPreviewImageLoad"
+              @dragstart.prevent
+              @contextmenu.prevent
+            />
+          </div>
+
+          <button
+            class="nav-button next"
+            :disabled="gallerySliderControl.index === filterList.length - 1"
+            @click.stop="navigateImage(1)"
+          >
+            <ChevronRightIcon :size="24" />
+          </button>
+        </div>
+
+        <div class="flex items-center justify-between border border-border-secondary px-6 py-4">
+          <h3 class="m-0 mr-4 flex-1 overflow-hidden text-base font-semibold text-ellipsis text-main">
+            {{ currentPreviewImage?.intro }}
+          </h3>
+          <div class="mr-4 text-sm font-semibold whitespace-nowrap text-main">
+            {{ gallerySliderControl.index + 1 }} / {{ filterList.length }}
+          </div>
+          <div class="text-center text-xs font-medium text-main">
+            {{ t('pages.gallery.previewHelp') }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import { ChevronLeftIcon, ChevronRightIcon, XIcon } from 'lucide-vue-next'
+import { computed, nextTick, onMounted, reactive, ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { getConfig } from '@/utils/dataSender'
+
+const gallerySliderControl = defineModel<{
+  visible: boolean
+  index: number
+}>('gallerySliderControl', { required: true })
+
+const { filterList, isAlwaysForceReload } = defineProps<{
+  filterList: {
+    src: string
+    imgUrl?: string
+    galleryPath?: string
+    intro?: string
+  }[]
+  isAlwaysForceReload: boolean
+}>()
+
+const { t } = useI18n()
+const previewImageRef = useTemplateRef('previewImageRef')
+const enableAdvancedAnimation = ref(false)
+const imagePreviewState = reactive({
+  scale: 1,
+  translateX: 0,
+  translateY: 0,
+  isDragging: false,
+  startX: 0,
+  startY: 0,
+  startTranslateX: 0,
+  startTranslateY: 0,
+  isSwipeMode: false,
+  swipeStartX: 0,
+  swipeThreshold: 100,
+})
+
+const imageTransformStyle = computed(() => {
+  // Check if image overflows the viewport
+  const imageElement = previewImageRef.value
+  let isDraggable = false
+
+  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
+    const viewerElement = imageElement.parentElement
+    if (viewerElement) {
+      const viewerRect = viewerElement.getBoundingClientRect()
+      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
+      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
+      isDraggable = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
+    }
+  }
+
+  return {
+    transform: `translate(${imagePreviewState.translateX}px, ${imagePreviewState.translateY}px) scale(${imagePreviewState.scale})`,
+    cursor: imagePreviewState.isDragging ? 'grabbing' : isDraggable ? 'grab' : 'default',
+    transition: 'none',
+  }
+})
+
+const currentPreviewImage = computed(() => {
+  const item = filterList[gallerySliderControl.value.index]
+  if (!item) return null
+  const cacheBustedItem = { ...item }
+  if (isAlwaysForceReload) {
+    if (cacheBustedItem.imgUrl) {
+      cacheBustedItem.imgUrl = addCacheBustParam(cacheBustedItem.imgUrl)
+    }
+    if (cacheBustedItem.galleryPath) {
+      cacheBustedItem.galleryPath = addCacheBustParam(cacheBustedItem.galleryPath)
+    }
+  }
+  const src = cacheBustedItem.src || cacheBustedItem.galleryPath || cacheBustedItem.imgUrl || ''
+  cacheBustedItem.src = isAlwaysForceReload ? addCacheBustParam(src) : src
+  return cacheBustedItem
+})
+
+function handleImageWheel(event: WheelEvent) {
+  event.preventDefault()
+  const delta = event.deltaY > 0 ? -1 : 1
+  const zoomFactor = 1.1
+  const newScale =
+    delta > 0 ? Math.min(imagePreviewState.scale * zoomFactor, 5) : Math.max(imagePreviewState.scale / zoomFactor, 0.1)
+
+  zoomToScale(newScale)
+}
+
+function zoomToScale(newScale: number) {
+  const oldScale = imagePreviewState.scale
+  imagePreviewState.scale = newScale
+
+  const optimalScale = calculateOptimalScale()
+  if (newScale <= optimalScale) {
+    imagePreviewState.translateX = 0
+    imagePreviewState.translateY = 0
+  } else {
+    const scaleDiff = newScale / oldScale
+    imagePreviewState.translateX *= scaleDiff
+    imagePreviewState.translateY *= scaleDiff
+  }
+}
+
+function calculateOptimalScale(): number {
+  const imageElement = previewImageRef.value
+  if (!imageElement) {
+    return 1
+  }
+  if (!imageElement.naturalWidth || !imageElement.naturalHeight) {
+    return 1
+  }
+  const viewerElement = imageElement.parentElement
+  if (!viewerElement) {
+    return 1
+  }
+
+  const viewerRect = viewerElement.getBoundingClientRect()
+  const viewerWidth = viewerRect.width
+  const viewerHeight = viewerRect.height
+
+  const imageWidth = imageElement.naturalWidth
+  const imageHeight = imageElement.naturalHeight
+  const scaleX = viewerWidth / imageWidth
+  const scaleY = viewerHeight / imageHeight
+  const optimalScale = Math.min(scaleX, scaleY, 1)
+
+  return optimalScale
+}
+
+function navigateImage(direction: number) {
+  const newIndex = gallerySliderControl.value.index + direction
+  if (newIndex >= 0 && newIndex < filterList.length) {
+    gallerySliderControl.value.index = newIndex
+    resetImageTransform()
+  }
+}
+
+function resetImageTransform() {
+  const optimalScale = calculateOptimalScale()
+  imagePreviewState.scale = optimalScale
+  imagePreviewState.translateX = 0
+  imagePreviewState.translateY = 0
+  imagePreviewState.isDragging = false
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.preventDefault()
+      navigateImage(-1)
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      navigateImage(1)
+      break
+    case 'Escape':
+      event.preventDefault()
+      handleClose()
+      break
+    case '=':
+    case '+':
+      event.preventDefault()
+      zoomIn()
+      break
+    case '-':
+      event.preventDefault()
+      zoomOut()
+      break
+    case '0':
+      event.preventDefault()
+      resetImageTransform()
+      break
+  }
+}
+
+function zoomOut() {
+  const newScale = Math.max(imagePreviewState.scale / 1.2, 0.1)
+  zoomToScale(newScale)
+}
+
+function zoomIn() {
+  zoomToScale(Math.min(imagePreviewState.scale * 1.2, 5))
+}
+
+function handleClose() {
+  gallerySliderControl.value.index = 0
+  gallerySliderControl.value.visible = false
+  resetImageTransform()
+}
+
+function handleImageMouseDown(event: MouseEvent) {
+  const imageElement = previewImageRef.value
+  let isImageLargerThanViewer = false
+
+  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
+    const viewerElement = imageElement.parentElement
+    if (viewerElement) {
+      const viewerRect = viewerElement.getBoundingClientRect()
+      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
+      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
+      isImageLargerThanViewer = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
+    }
+  }
+
+  if (!isImageLargerThanViewer) {
+    imagePreviewState.isSwipeMode = true
+    imagePreviewState.swipeStartX = event.clientX
+  } else {
+    imagePreviewState.isDragging = true
+    imagePreviewState.startX = event.clientX
+    imagePreviewState.startY = event.clientY
+    imagePreviewState.startTranslateX = imagePreviewState.translateX
+    imagePreviewState.startTranslateY = imagePreviewState.translateY
+  }
+  event.preventDefault()
+}
+
+function handleImageMouseMove(event: MouseEvent) {
+  if (imagePreviewState.isDragging) {
+    const deltaX = event.clientX - imagePreviewState.startX
+    const deltaY = event.clientY - imagePreviewState.startY
+    imagePreviewState.translateX = imagePreviewState.startTranslateX + deltaX
+    imagePreviewState.translateY = imagePreviewState.startTranslateY + deltaY
+  }
+}
+
+function handleImageMouseUp(event: MouseEvent) {
+  if (imagePreviewState.isSwipeMode) {
+    const deltaX = event.clientX - imagePreviewState.swipeStartX
+    if (Math.abs(deltaX) > imagePreviewState.swipeThreshold) {
+      if (deltaX > 0) {
+        navigateImage(-1)
+      } else {
+        navigateImage(1)
+      }
+    }
+    imagePreviewState.isSwipeMode = false
+  }
+  imagePreviewState.isDragging = false
+}
+
+function handleImageTouchStart(event: TouchEvent) {
+  const touch = event.touches[0]
+  const imageElement = previewImageRef.value
+  let isImageLargerThanViewer = false
+
+  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
+    const viewerElement = imageElement.parentElement
+    if (viewerElement) {
+      const viewerRect = viewerElement.getBoundingClientRect()
+      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
+      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
+      isImageLargerThanViewer = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
+    }
+  }
+
+  if (!isImageLargerThanViewer) {
+    imagePreviewState.isSwipeMode = true
+    imagePreviewState.swipeStartX = touch.clientX
+  } else {
+    imagePreviewState.isDragging = true
+    imagePreviewState.startX = touch.clientX
+    imagePreviewState.startY = touch.clientY
+    imagePreviewState.startTranslateX = imagePreviewState.translateX
+    imagePreviewState.startTranslateY = imagePreviewState.translateY
+  }
+  event.preventDefault()
+}
+
+function handleImageTouchMove(event: TouchEvent) {
+  if (imagePreviewState.isDragging) {
+    const touch = event.touches[0]
+    const deltaX = touch.clientX - imagePreviewState.startX
+    const deltaY = touch.clientY - imagePreviewState.startY
+    imagePreviewState.translateX = imagePreviewState.startTranslateX + deltaX
+    imagePreviewState.translateY = imagePreviewState.startTranslateY + deltaY
+  }
+  event.preventDefault()
+}
+
+function handleImageTouchEnd(event: TouchEvent) {
+  if (imagePreviewState.isSwipeMode && event.changedTouches.length > 0) {
+    const touch = event.changedTouches[0]
+    const deltaX = touch.clientX - imagePreviewState.swipeStartX
+    if (Math.abs(deltaX) > imagePreviewState.swipeThreshold) {
+      if (deltaX > 0) {
+        navigateImage(-1)
+      } else {
+        navigateImage(1)
+      }
+    }
+    imagePreviewState.isSwipeMode = false
+  }
+  imagePreviewState.isDragging = false
+}
+
+function onPreviewImageLoad() {
+  nextTick(() => {
+    resetImageTransform()
+  })
+}
+
+const addCacheBustParam = (url: string | undefined) => {
+  if (!url) {
+    return ''
+  }
+  if (!(url.startsWith('http://') || url.startsWith('https://'))) {
+    return url
+  }
+  try {
+    const separator = url.includes('?') ? '&' : '?'
+    return `${url}${separator}cbplist=${new Date().getTime()}`
+  } catch (_e) {
+    return url
+  }
+}
+
+async function initConf() {
+  const settingConfig = await getConfig<any>('settings')
+  enableAdvancedAnimation.value = settingConfig.enableAdvancedAnimation || false
+}
+
+onMounted(() => {
+  initConf()
+  resetImageTransform()
+  nextTick(() => {
+    const modal = document.querySelector('.image-preview-modal') as HTMLElement
+    if (modal) {
+      modal.focus()
+    }
+  })
+})
+</script>
diff --git a/src/renderer/components/ImageProcessSetting.vue b/src/renderer/components/ImageProcessSetting.vue
index 8039817e..e0bc4074 100644
--- a/src/renderer/components/ImageProcessSetting.vue
+++ b/src/renderer/components/ImageProcessSetting.vue
@@ -977,7 +977,7 @@
 
             <div class="form-group">
               <label class="title-text">{{ $t('pages.settings.upload.availablePlaceholders') }}</label>
-              <placeholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
+              <PlaceholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
             </div>
           </div>
         </div>
@@ -1014,7 +1014,7 @@ import { useI18n } from 'vue-i18n'
 import customRadioOption from '@/components/common/CustomRadioOption.vue'
 import customRange from '@/components/common/CustomRange.vue'
 import customSwitch from '@/components/common/CustomSwitch.vue'
-import placeholderTable from '@/components/common/PlaceholderTable.vue'
+import PlaceholderTable from '@/components/common/PlaceholderTable.vue'
 import PerPicbedSetting from '@/components/PerPicbedSetting.vue'
 import { getRawData } from '@/utils/common'
 import { configPaths } from '@/utils/configPaths'
diff --git a/src/renderer/components/ImageWebdav.vue b/src/renderer/components/ImageWebdav.vue
index 083b8919..c4edae48 100644
--- a/src/renderer/components/ImageWebdav.vue
+++ b/src/renderer/components/ImageWebdav.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="image-container">
-    <div v-if="isLoading" class="loading-placeholder">
-      <div class="loading-spinner" />
+  <div class="relative flex h-full w-full items-center justify-center p-0">
+    <div v-if="isLoading" class="flex h-full w-full items-center justify-center">
+      <div class="h-[34px] w-[34px] animate-spin rounded-full border-3 border-t-3 border-border border-t-accent" />
     </div>
     <img
       v-else-if="!hasError"
       :src="imageSource"
       alt=""
-      class="image"
+      class="h-full w-full object-contain"
       @load="handleImageLoad"
       @error="handleImageError"
     />
-    <img v-else :src="iconPath" alt="" class="image" />
+    <img v-else :src="iconPath" alt="" class="h-full w-full object-contain" />
   </div>
 </template>
 
@@ -104,49 +104,3 @@ watch(() => [props.url, props.item], fetchImage, { deep: true })
 
 onMounted(fetchImage)
 </script>
-
-<style scoped>
-.image-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 auto;
-  width: 100%;
-  height: 100px;
-}
-
-.image {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.loading-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.loading-spinner {
-  border: 2px solid #e4e7ed;
-  border-top: 2px solid #409eff;
-  border-radius: var(--radius-round);
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/src/renderer/components/common/multiSelect.vue b/src/renderer/components/common/multiSelect.vue
index dd1bc18f..6feca460 100644
--- a/src/renderer/components/common/multiSelect.vue
+++ b/src/renderer/components/common/multiSelect.vue
@@ -21,7 +21,7 @@
     </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"
+      class="multiselect-dropdown fixed z-10000 mt-[2px] max-h-[150px] min-w-[185px] overflow-y-auto rounded-md border border-border-secondary bg-bg-tertiary px-2 py-1.5 text-main shadow-lg"
     >
       <label
         v-for="item in allList"
diff --git a/src/renderer/i18n/locales/en.json b/src/renderer/i18n/locales/en.json
index 7544f27d..8fa266b3 100644
--- a/src/renderer/i18n/locales/en.json
+++ b/src/renderer/i18n/locales/en.json
@@ -542,7 +542,7 @@
         "refresh": "Refresh",
         "reset": "Reset",
         "save": "Save",
-        "savedConfigs": "Enter Saved Cloud",
+        "savedConfigs": "Saved Cloud",
         "selectPlaceholder": "Please select",
         "tips": "Tips",
         "title": "Cloud Management",
diff --git a/src/renderer/i18n/locales/zh-CN.json b/src/renderer/i18n/locales/zh-CN.json
index 1fda9824..a64fc89a 100644
--- a/src/renderer/i18n/locales/zh-CN.json
+++ b/src/renderer/i18n/locales/zh-CN.json
@@ -542,7 +542,7 @@
         "refresh": "刷新",
         "reset": "重置",
         "save": "保存",
-        "savedConfigs": "进入已配置云端",
+        "savedConfigs": "已配置云端",
         "selectPlaceholder": "请选择",
         "tips": "提示",
         "title": "云端管理",
diff --git a/src/renderer/i18n/locales/zh-TW.json b/src/renderer/i18n/locales/zh-TW.json
index 66ad4ca0..cffda24f 100644
--- a/src/renderer/i18n/locales/zh-TW.json
+++ b/src/renderer/i18n/locales/zh-TW.json
@@ -542,7 +542,7 @@
         "refresh": "重新整理",
         "reset": "重設",
         "save": "儲存",
-        "savedConfigs": "進入已配置雲端",
+        "savedConfigs": "已配置雲端",
         "selectPlaceholder": "請選擇",
         "tips": "提示",
         "title": "雲端存儲管理",
diff --git a/src/renderer/index.css b/src/renderer/index.css
index 86d1e660..481b2c36 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -178,4 +178,16 @@
       transform: rotate(360deg);
     }
   }
+
+  @keyframes slide-right {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
 }
diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index b858d54e..6ceb5b88 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -2,203 +2,189 @@
 <template>
   <div
     ref="bucketContainerRef"
-    class="bucket-container"
+    class="relative flex h-full w-full items-center justify-center"
     :class="{ 'content-fullscreen': isContentFullscreen }"
     @scroll="handleBucketContainerScroll"
   >
-    <!-- Header Card -->
-    <div v-if="!isContentFullscreen" class="bucket-card header-card">
-      <div class="card-header">
-        <div class="header-left">
+    <div class="relative z-1 flex h-full w-full flex-col items-center justify-start gap-2 rounded-xl border-none p-0">
+      <!-- Header Card -->
+      <div
+        v-if="!isContentFullscreen"
+        class="flex w-full flex-wrap items-center justify-between gap-4 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
+      >
+        <div class="flex flex-1 flex-wrap items-center gap-4 p-1">
           <!-- Custom Domain Input/Select -->
-          <div
+          <SingleSelect
             v-if="isShowCustomDomainSelectList && customDomainList.length > 1 && isAutoCustomDomain"
-            class="custom-domain-select"
-          >
-            <select v-model="currentCustomDomain" class="select-input" @change="handleChangeCustomUrlInput">
-              <option value="" disabled>
-                {{ t('pages.manage.bucket.selectCustomDomain') }}
-              </option>
-              <option v-for="item in customDomainList" :key="item.value" :value="item.value">
-                {{ item.label }}
-              </option>
-            </select>
-            <ChevronDownIcon class="select-arrow" />
-          </div>
+            v-model="currentCustomDomain"
+            title=""
+            :key-list="customDomainList.map(item => item.value)"
+            :fronticon="false"
+          />
           <input
             v-else-if="isShowCustomDomainInput"
             v-model="currentCustomDomain"
             type="text"
-            class="custom-domain-input"
+            class="w-auto max-w-[200px] min-w-[120px] rounded-md border border-border bg-bg-tertiary px-3 py-2 text-sm text-main placeholder:text-sm placeholder:text-secondary"
             :placeholder="t('pages.manage.bucket.inputCustomDomain')"
             @blur="handleChangeCustomUrlInput"
           />
-          <a v-else class="custom-domain-link" @click="copyToClipboard(currentCustomDomain)">
+          <a
+            v-else
+            class="ml-2 cursor-pointer text-sm font-semibold text-accent no-underline hover:underline"
+            @click="copyToClipboard(currentCustomDomain)"
+          >
             {{ currentCustomDomain }}
           </a>
         </div>
 
-        <div class="header-actions">
+        <div class="flex flex-wrap gap-1 overflow-visible">
           <!-- Upload Files -->
-          <div class="tooltip">
-            <button class="action-button primary" @click="showUploadDialog">
-              <UploadIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.uploadFiles') }}</span>
-            </button>
-          </div>
-
-          <!-- Upload from URL -->
-          <div class="tooltip">
-            <button class="action-button primary" @click="showUrlDialog">
-              <LinkIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.uploadFromUrl') }}</span>
-            </button>
-          </div>
-
-          <!-- Create Folder -->
-          <div v-if="isShowCreateNewFolder" class="tooltip">
-            <button class="action-button primary" @click="handleCreateFolder">
-              <FolderPlusIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.createFolder') }}</span>
-            </button>
-          </div>
-
-          <!-- Download -->
-          <div class="tooltip">
-            <button class="action-button primary" @click="showDownloadDialog">
-              <DownloadIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.downloadPage') }}</span>
-            </button>
-          </div>
-
-          <!-- Batch Rename -->
-          <div v-if="isShowRenameFileIcon" class="tooltip">
-            <button class="action-button primary" @click="handleBatchRenameFile">
-              <EditIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.batchRename') }}</span>
-            </button>
-          </div>
+          <IconButton
+            :tips="t('pages.manage.bucket.uploadFiles')"
+            type="primary"
+            :icon="UploadIcon"
+            @click="showUploadDialog"
+          />
+          <IconButton
+            :tips="t('pages.manage.bucket.uploadFromUrl')"
+            type="primary"
+            :icon="LinkIcon"
+            @click="showUrlDialog"
+          />
+          <IconButton
+            v-if="isShowCreateNewFolder"
+            :tips="t('pages.manage.bucket.createFolder')"
+            type="primary"
+            :icon="FolderPlusIcon"
+            @click="handleCreateFolder"
+          />
+          <IconButton
+            :tips="t('pages.manage.bucket.downloadPage')"
+            type="primary"
+            :icon="DownloadIcon"
+            @click="showDownloadDialog"
+          />
+          <IconButton
+            v-if="isShowRenameFileIcon"
+            :tips="t('pages.manage.bucket.batchRename')"
+            type="primary"
+            :icon="EditIcon"
+            @click="handleBatchRenameFile"
+          />
 
           <!-- Copy URL -->
-          <div class="dropdown">
-            <button
-              class="action-button primary"
-              :class="{ 'action-button': selectedItems.length === 0 }"
-              @click="copyDropdownOpen = !copyDropdownOpen"
+          <div class="relative">
+            <IconButton
+              tips=""
+              type="primary"
+              :icon="CopyIcon"
+              :disabled="selectedItems.length === 0"
+              @click="handlecopyDropdownOpen"
+            />
+            <div
+              v-if="copyDropdownOpen"
+              class="absolute top-full left-0 z-1000 mt-1 min-w-[150px] rounded-md border border-border bg-bg-tertiary shadow-lg"
             >
-              <CopyIcon class="action-icon" />
-            </button>
-            <div v-if="copyDropdownOpen" class="dropdown-content">
               <div
                 v-for="i in linkFormatArray"
                 :key="i.key"
-                class="dropdown-item"
+                class="cursor-pointer bg-bg-tertiary px-3 py-2 text-center text-sm text-main hover:bg-accent/50"
                 @click="handleBatchCopyLink(i.value)"
               >
                 {{ i.key }}
               </div>
-              <div v-if="isShowPresignedUrl" class="dropdown-item" @click="handleBatchCopyLink('preSignURL')">
+              <div
+                v-if="isShowPresignedUrl"
+                class="cursor-pointer bg-bg-tertiary px-3 py-2 text-center text-sm text-main hover:bg-accent/50"
+                @click="handleBatchCopyLink('preSignURL')"
+              >
                 preSignURL
               </div>
             </div>
           </div>
 
-          <!-- Copy File Info -->
-          <div class="tooltip">
-            <button
-              class="action-button primary"
-              :class="{ disabled: selectedItems.length === 0 }"
-              @click="handleBatchCopyInfo"
-            >
-              <InfoIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.copyFileIno') }}</span>
-            </button>
-          </div>
-
-          <!-- Refresh -->
-          <div class="tooltip">
-            <button class="action-button secondary" @click="forceRefreshFileList">
-              <RefreshCwIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.forceRefreshFileList') }}</span>
-            </button>
-          </div>
-
+          <IconButton
+            :tips="t('pages.manage.bucket.copyFileIno')"
+            type="primary"
+            :icon="InfoIcon"
+            :disabled="selectedItems.length === 0"
+            @click="handleBatchCopyInfo"
+          />
+          <IconButton
+            :tips="t('pages.manage.bucket.forceRefreshFileList')"
+            type="secondary"
+            :icon="RefreshCwIcon"
+            @click="forceRefreshFileList"
+          />
           <!-- Search -->
           <input
             v-model="searchText"
             type="text"
-            class="search-input"
+            class="w-auto max-w-[200px] min-w-[120px] rounded-md border border-border bg-bg-tertiary px-3 py-2 text-sm text-main placeholder:text-sm placeholder:text-secondary focus:border-accent focus:shadow-sm focus:outline-none"
             :placeholder="t('pages.manage.bucket.searchPlaceholder')"
           />
         </div>
       </div>
-    </div>
 
-    <!-- Breadcrumb Card -->
-    <div v-if="!isContentFullscreen" class="bucket-card breadcrumb-card">
-      <div class="breadcrumb-container">
-        <HomeIcon class="action-icon" />
-        <template v-if="configMap.prefix !== '/'">
-          <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
-            <ChevronRightIcon class="breadcrumb-separator" />
-            <button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
-              {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
-            </button>
+      <!-- Breadcrumb Card -->
+      <div
+        v-if="!isContentFullscreen"
+        class="flex w-full items-center justify-between gap-4 overflow-hidden rounded-xl border border-border-secondary p-0 shadow-sm"
+      >
+        <div class="flex flex-1 items-center gap-0 overflow-x-auto px-4 py-1">
+          <HomeIcon class="h-[16px] w-[16px] shrink-0 text-accent" />
+          <template v-if="configMap.prefix !== '/'">
+            <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
+              <ChevronRightIcon v-if="index !== 0" class="h-[16px] w-[15px] shrink-0 text-accent" />
+              <button
+                class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+                @click="handleBreadcrumbClick(Number(index))"
+              >
+                {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
+              </button>
+            </template>
+          </template>
+          <template v-else>
+            <span
+              class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+            >
+              {{ t('pages.manage.bucket.rootFolder') }}
+            </span>
           </template>
-        </template>
-        <template v-else>
-          <span class="breadcrumb-item current">
-            {{ t('pages.manage.bucket.rootFolder') }}
-          </span>
-        </template>
-      </div>
-    </div>
-
-    <!-- Control Panel Card -->
-    <div v-if="!isContentFullscreen" class="bucket-card control-panel-card">
-      <div class="control-panel">
-        <div class="control-left">
-          <!-- File Info -->
-          <div class="file-info">
-            <div class="file-info-box">
-              <FileIcon class="action-icon" />
-              <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
-            </div>
-            <div class="file-info-box">
-              <HardDriveIcon class="action-icon" />
-              <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
-            </div>
-          </div>
         </div>
+      </div>
 
-        <div class="control-center">
+      <!-- Control Panel Card -->
+      <div
+        v-if="!isContentFullscreen"
+        class="flex w-full flex-wrap items-center justify-between gap-2 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
+      >
+        <FileInfo :current-page-files-info="currentPageFilesInfo" :calculate-all-file-size="calculateAllFileSize" />
+
+        <div class="flex flex-wrap items-center gap-2">
           <!-- Selection Controls -->
-          <div v-if="selectedItems.length === 0">
-            <button class="action-button secondary" @click="handleCheckAllChange">
-              {{ t('pages.manage.bucket.selectAll') }}
-            </button>
-          </div>
-          <div v-else class="control-center">
-            <button class="action-button secondary" @click="handleCancelCheck">
-              {{ t('pages.manage.bucket.cancel') }}
-            </button>
-            <button class="action-button secondary" @click="handleReverseCheck">
-              {{ t('pages.manage.bucket.reverseSelect') }}
-            </button>
-            <button class="action-button secondary" @click="handleCheckAllChange">
-              {{ t('pages.manage.bucket.selectAll') }}
-            </button>
-            <button class="action-button primary" @click="handleBatchDownload">
-              <DownloadIcon class="action-icon" />
-              {{
-                `${t('pages.manage.bucket.downloadBtn', { num: selectedItems.filter(item => item.isDir === false).length })}`
-              }}
-            </button>
-            <button class="action-button danger" @click="handleBatchDeleteInfo">
-              <Trash2Icon class="action-icon" />
-              {{ `${t('pages.manage.bucket.removeBtn', { num: selectedItems.length })}` }}
-            </button>
-          </div>
+          <IconButton
+            v-if="selectedItems.length === 0"
+            :title="t('pages.manage.bucket.selectAll')"
+            type="secondary"
+            @click="handleCheckAllChange"
+          />
+          <template v-else>
+            <IconButton :title="t('pages.manage.bucket.cancel')" type="secondary" @click="handleCancelCheck" />
+            <IconButton :title="t('pages.manage.bucket.reverseSelect')" type="secondary" @click="handleReverseCheck" />
+            <IconButton :title="t('pages.manage.bucket.selectAll')" type="secondary" @click="handleCheckAllChange" />
+            <IconButton
+              :title="`${t('pages.manage.bucket.downloadBtn', { num: selectedItems.filter(item => item.isDir === false).length })}`"
+              type="primary"
+              @click="handleBatchDownload"
+            />
+            <IconButton
+              :title="`${t('pages.manage.bucket.removeBtn', { num: selectedItems.length })}`"
+              type="danger"
+              @click="handleBatchDeleteInfo"
+            />
+          </template>
 
           <!-- Sort Dropdown -->
           <div class="dropdown">
@@ -215,41 +201,20 @@
           </div>
         </div>
 
-        <div class="control-right">
+        <div class="flex items-center gap-2">
           <!-- Fullscreen Toggle -->
-          <div class="tooltip">
-            <button class="action-button secondary" @click="toggleContentFullscreen">
-              <ExpandIcon v-if="!isContentFullscreen" class="action-icon" />
-              <ShrinkIcon v-else class="action-icon" />
-              <span class="tooltip-text">
-                {{
-                  isContentFullscreen
-                    ? t('pages.manage.bucket.exitFullScreen')
-                    : t('pages.manage.bucket.enterFullScreen')
-                }}
-              </span>
-            </button>
-          </div>
+          <IconButton
+            :icon="isContentFullscreen ? ShrinkIcon : ExpandIcon"
+            :tips="
+              isContentFullscreen ? t('pages.manage.bucket.exitFullScreen') : t('pages.manage.bucket.enterFullScreen')
+            "
+            type="primary"
+            class="z-2"
+            @click="toggleContentFullscreen"
+          />
 
           <!-- View Toggle -->
-          <!--
-          <div class="view-toggle">
-            <button
-              class="view-toggle-button"
-              :class="{ active: layoutStyle === 'grid' }"
-              @click="handleViewChange('grid')"
-            >
-              <GridIcon class="action-icon" />
-            </button>
-            <button
-              class="view-toggle-button"
-              :class="{ active: layoutStyle === 'list' }"
-              @click="handleViewChange('list')"
-            >
-              <ListIcon class="action-icon" />
-            </button>
-          </div>
-          -->
+          <IconButton :icon="layoutStyle === 'grid' ? GridIcon : ListIcon" type="primary" @click="handleViewChange" />
 
           <!-- Pagination -->
           <input
@@ -257,451 +222,442 @@
             v-model="currentPageNumber"
             type="number"
             min="1"
-            class="page-input"
+            class="mr-2 w-[60px] max-w-[60px] min-w-[40px] rounded-md border border-border bg-bg-tertiary px-2 py-1 text-center text-sm text-main focus:border-accent focus:outline-none"
             :disabled="!paging"
             @input="handlePageNumberInput"
           />
         </div>
       </div>
-    </div>
 
-    <!-- Content Card -->
-    <!-- Fullscreen Header (only visible in fullscreen mode) -->
-    <div v-if="isContentFullscreen" class="bucket-card fullscreen-header">
-      <div class="fullscreen-header-left">
-        <div class="fullscreen-breadcrumb">
-          <HomeIcon class="action-icon" />
-          <template v-if="configMap.prefix !== '/'">
-            <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
-              <ChevronRightIcon class="breadcrumb-separator" />
-              <button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
-                {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
-              </button>
-            </template>
-          </template>
-          <template v-else>
-            <span class="breadcrumb-item current">
-              {{ t('pages.manage.bucket.rootFolder') }}
-            </span>
-          </template>
-        </div>
-      </div>
-
-      <div class="fullscreen-header-center">
-        <div class="file-info">
-          <div class="file-info-box">
-            <FileIcon class="action-icon" />
-            <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
-          </div>
-          <div class="file-info-box">
-            <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="fullscreen-header-right">
-        <!-- Search -->
-        <input
-          v-model="searchText"
-          type="text"
-          class="search-input"
-          :placeholder="t('pages.manage.bucket.searchPlaceholder')"
-        />
-
-        <!-- Exit Fullscreen -->
-        <div class="tooltip">
-          <button class="action-button secondary" @click="toggleContentFullscreen">
-            <ShrinkIcon class="action-icon" />
-            <span class="tooltip-text">{{ t('pages.manage.bucket.exitFullScreen') }}</span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="bucket-card content-area">
-      <!-- Virtual Scroller -->
-      <div v-if="filterList.length === 0" class="empty-state">
-        <ImageIcon :size="64" class="empty-icon" />
-        <h3>{{ t('pages.gallery.noImagesFound') }}</h3>
-        <p>{{ t('pages.gallery.tryAdjustingFilters') }}</p>
-      </div>
-      <VirtualScroller
-        v-else
-        ref="virtualScrollerRef"
-        :items="filterList"
-        class="virtual-gallery-scroller"
-        :item-height="layoutStyle === 'grid' ? 240 : 70"
-        :view-mode="layoutStyle"
-        :grid-breakpoints="gridBreakpoints"
-        key-field="key"
+      <!-- Content Card -->
+      <div
+        v-if="isContentFullscreen"
+        class="flex w-full flex-wrap items-center justify-between gap-2 overflow-visible rounded-xl border border-border-secondary p-0 shadow-sm"
       >
-        <template #default="{ item, index }">
-          <!-- Grid View -->
-          <div
-            v-if="layoutStyle === 'grid'"
-            class="file-grid-item"
-            :class="{ selected: item.checked }"
-            @click="item.checked = !item.checked"
-          >
-            <div class="file-preview" @click.stop="handleClickFile(item)">
-              <!-- Image Preview -->
-              <template v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)">
-                <img v-if="isShowThumbnail && item.isImage" :src="item.url" class="file-image" @error="() => {}" />
-                <img v-else :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
+        <div class="flex max-w-[400px] min-w-[200px] items-center overflow-x-auto px-4 py-1">
+          <div class="fullscreen-breadcrumb rounded-md shadow-sm">
+            <HomeIcon class="h-[16px] w-[16px] shrink-0 text-accent" />
+            <template v-if="configMap.prefix !== '/'">
+              <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
+                <ChevronRightIcon v-if="index !== 0" class="h-[16px] w-[15px] shrink-0 text-accent" />
+                <button
+                  class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+                  @click="handleBreadcrumbClick(Number(index))"
+                >
+                  {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
+                </button>
               </template>
+            </template>
+            <template v-else>
+              <span
+                class="flex shrink-0 cursor-pointer items-center gap-1 rounded-md border-none bg-bg-secondary p-1 text-sm font-semibold text-secondary hover:bg-accent/10 hover:text-main"
+              >
+                {{ t('pages.manage.bucket.rootFolder') }}
+              </span>
+            </template>
+          </div>
+        </div>
+        <FileInfo :current-page-files-info="currentPageFilesInfo" :calculate-all-file-size="calculateAllFileSize" />
+        <div class="fullscreen-header-right">
+          <!-- Search -->
+          <input
+            v-model="searchText"
+            type="text"
+            class="w-auto max-w-[200px] min-w-[120px] rounded-md border border-border bg-bg-tertiary px-3 py-2 text-sm text-main placeholder:text-sm placeholder:text-secondary focus:border-accent focus:shadow-sm focus:outline-none"
+            :placeholder="t('pages.manage.bucket.searchPlaceholder')"
+          />
 
-              <!-- S3 PreSign Image -->
-              <ImagePreSign
-                v-else-if="!item.isDir && currentPicBedName === 's3plist' && isUsePreSignedUrl"
-                :is-show-thumbnail="isShowThumbnail"
-                :item="item"
-                :alias="configMap.alias"
-                :url="item.url"
-                :config="handleGetS3Config(item)"
-              />
+          <!-- Exit Fullscreen -->
+          <IconButton
+            :icon="isContentFullscreen ? ShrinkIcon : ExpandIcon"
+            :tips="
+              isContentFullscreen ? t('pages.manage.bucket.exitFullScreen') : t('pages.manage.bucket.enterFullScreen')
+            "
+            type="primary"
+            class="z-2"
+            @click="toggleContentFullscreen"
+          />
+          <IconButton :icon="layoutStyle === 'grid' ? GridIcon : ListIcon" type="primary" @click="handleViewChange" />
+        </div>
+      </div>
 
-              <!-- WebDAV Image -->
-              <ImageWebdav
-                v-else-if="!item.isDir && currentPicBedName === 'webdavplist' && item.isImage"
-                :is-show-thumbnail="isShowThumbnail"
-                :item="item"
-                :config="handleGetWebdavConfig()"
-                :url="item.url"
-              />
+      <div
+        class="no-scrollbar flex min-h-[500px] w-full flex-1 flex-col flex-wrap items-center justify-center gap-2 overflow-auto rounded-2xl border border-border-secondary p-1 shadow-md"
+      >
+        <div v-if="filterList.length === 0" class="h-full w-full">
+          <EmptyPage />
+        </div>
+        <VirtualScroller
+          v-else
+          ref="virtualScrollerRef"
+          :items="filterList"
+          class="virtual-gallery-scroller min-h-0 w-full flex-1 p-3"
+          :item-height="260"
+          :view-mode="layoutStyle"
+          :grid-breakpoints="gridBreakpoints"
+          key-field="key"
+        >
+          <template #default="{ item, index }">
+            <!-- Grid View -->
+            <div
+              class="group/image m-0 box-border flex h-[calc(100%-8px)] w-full cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-border shadow-sm transition-all duration-fast ease-apple hover:-translate-y-[2px] hover:border-accent hover:shadow-md [.selected]:border-2 [.selected]:border-accent [.selected]:shadow-md"
+              :class="{ selected: item.checked }"
+              @click="item.checked = !item.checked"
+            >
+              <div
+                class="relative mb-2 flex aspect-auto min-h-0 flex-1 items-center justify-center overflow-hidden border-b border-dashed border-b-accent/40"
+                @click.stop="handleClickFile(item)"
+              >
+                <!-- Image Preview -->
+                <template
+                  v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)"
+                >
+                  <img
+                    v-if="isShowThumbnail && item.isImage"
+                    :src="item.url"
+                    class="h-full w-full object-contain transition-all duration-fast ease-apple"
+                    @error="() => {}"
+                  />
+                  <img
+                    v-else
+                    :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                    class="h-full w-full object-contain transition-all duration-fast ease-apple"
+                  />
+                </template>
 
-              <!-- Local Image -->
-              <ImageLocal
-                v-else-if="!item.isDir && currentPicBedName === 'local' && item.isImage"
-                :is-show-thumbnail="isShowThumbnail"
-                :item="item"
-                :local-path="item.key"
-              />
+                <!-- S3 PreSign Image -->
+                <ImagePreSign
+                  v-else-if="!item.isDir && currentPicBedName === 's3plist' && isUsePreSignedUrl"
+                  :is-show-thumbnail="isShowThumbnail"
+                  :item="item"
+                  :alias="configMap.alias"
+                  :url="item.url"
+                  :config="handleGetS3Config(item)"
+                />
 
-              <!-- Default File Icon -->
-              <template v-else-if="!item.isDir">
-                <img :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
-              </template>
+                <!-- WebDAV Image -->
+                <ImageWebdav
+                  v-else-if="!item.isDir && currentPicBedName === 'webdavplist' && item.isImage"
+                  :is-show-thumbnail="isShowThumbnail"
+                  :item="item"
+                  :config="handleGetWebdavConfig()"
+                  :url="item.url"
+                />
 
-              <!-- Folder Icon -->
-              <template v-else>
-                <FolderIcon class="file-icon" />
-              </template>
-            </div>
+                <!-- Local Image -->
+                <ImageLocal
+                  v-else-if="!item.isDir && currentPicBedName === 'local' && item.isImage"
+                  :is-show-thumbnail="isShowThumbnail"
+                  :item="item"
+                  :local-path="item.key"
+                />
 
-            <div class="file-info-section">
-              <div class="file-name" :title="item.fileName" @click.stop="copyToClipboard(item.fileName ?? '')">
-                {{ item.fileName ?? '' }}
+                <!-- Default File Icon -->
+                <template v-else-if="!item.isDir">
+                  <img
+                    :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                    class="h-full w-full object-contain p-4 transition-all duration-fast ease-apple"
+                  />
+                </template>
+
+                <!-- Folder Icon -->
+                <template v-else>
+                  <FolderIcon class="h-[64px] w-[64px] text-accent/70" />
+                </template>
               </div>
-              <div class="file-meta">
-                <span>{{ formatFileSize(item.fileSize) }}</span>
-                <span>{{ item.formatedTime }}</span>
-              </div>
-              <div class="file-actions">
-                <div class="file-action-group">
-                  <!-- Rename -->
-                  <button
-                    v-if="!item.isDir && isShowRenameFileIcon"
-                    class="file-action-button"
-                    @click.stop="handleRenameFile(item)"
-                  >
-                    <EditIcon class="action-icon" />
-                  </button>
 
-                  <!-- Download Folder -->
-                  <button v-if="item.isDir" class="file-action-button" @click.stop="handleFolderBatchDownload(item)">
-                    <DownloadIcon class="action-icon" />
-                  </button>
-
-                  <!-- Copy Link Dropdown -->
-                  <div class="file-actions-dropdown" :data-dropdown-index="index">
-                    <button class="file-action-button" @click.stop="toggleCopyDropdown(index, $event)">
-                      <CopyIcon class="action-icon" />
+              <div class="flex shrink-0 flex-col justify-between gap-0.5">
+                <div
+                  class="overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
+                  :title="item.fileName"
+                  @click.stop="copyToClipboard(item.fileName ?? '')"
+                >
+                  <div class="text-center">{{ item.fileName ?? '' }}</div>
+                </div>
+                <div
+                  v-if="!item.isDir"
+                  class="flex items-center justify-center gap-2 text-xs font-medium text-secondary"
+                >
+                  <span class="text-medium text-center text-xs font-medium">{{ formatFileSize(item.fileSize) }}</span>
+                  <span class="text-medium text-center text-xs font-medium">{{ item.formatedTime }}</span>
+                </div>
+                <div class="mr-2 flex items-center justify-between">
+                  <div class="flex flex-1 justify-center gap-2">
+                    <!-- Rename -->
+                    <button
+                      v-if="!item.isDir && isShowRenameFileIcon"
+                      class="file-action-button"
+                      @click.stop="handleRenameFile(item)"
+                    >
+                      <EditIcon class="action-icon" />
                     </button>
-                    <teleport to="body">
-                      <div
-                        v-if="copyDropdownIndex === index"
-                        class="file-actions-dropdown-content floating"
-                        :style="getDropdownStyle(index)"
-                        data-floating-dropdown
-                      >
+
+                    <!-- Download Folder -->
+                    <button v-if="item.isDir" class="file-action-button" @click.stop="handleFolderBatchDownload(item)">
+                      <DownloadIcon class="action-icon" />
+                    </button>
+
+                    <!-- Copy Link Dropdown -->
+                    <div class="relative z-100" :data-dropdown-index="index">
+                      <button class="file-action-button" @click.stop="toggleCopyDropdown(index, $event)">
+                        <CopyIcon class="action-icon" />
+                      </button>
+                      <teleport to="body">
                         <div
-                          v-for="format in linkFormatList"
-                          :key="format"
-                          class="file-actions-dropdown-item"
-                          @click.stop="copyLink(item, format)"
+                          v-if="copyDropdownIndex === index"
+                          class="absolute top-full right-0 z-9999 mt-1 max-h-[240px] max-w-[200px] min-w-[100px] overflow-visible overflow-y-auto border border-border bg-bg-tertiary whitespace-nowrap shadow-md transition-all duration-fast ease-apple"
+                          :style="getDropdownStyle(index)"
                         >
-                          {{ t(`pages.manage.bucket.linkFormat.${format}`) }}
+                          <div
+                            v-for="format in linkFormatList"
+                            :key="format"
+                            class="itmes-center flex cursor-pointer border-b border-b-border-secondary bg-bg-tertiary px-3 py-2 text-center text-sm text-main last:border-b-0 hover:bg-accent/50 hover:text-white"
+                            @click.stop="copyLink(item, format)"
+                          >
+                            {{ t(`pages.manage.bucket.linkFormat.${format}`) }}
+                          </div>
+                          <div
+                            v-if="isShowPresignedUrl"
+                            class="itmes-center flex cursor-pointer border-b border-b-border-secondary bg-bg-tertiary px-3 py-2 text-sm text-main last:border-b-0 hover:bg-accent/50 hover:text-white"
+                            @click.stop="async () => copyToClipboard(await getPreSignedUrl(item))"
+                          >
+                            {{ t('pages.manage.bucket.linkFormat.presign') }}
+                          </div>
                         </div>
-                        <div
-                          v-if="isShowPresignedUrl"
-                          class="file-actions-dropdown-item"
-                          @click.stop="async () => copyToClipboard(await getPreSignedUrl(item))"
-                        >
-                          {{ t('pages.manage.bucket.linkFormat.presign') }}
-                        </div>
-                      </div>
-                    </teleport>
+                      </teleport>
+                    </div>
+
+                    <!-- File Info -->
+                    <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
+                      <InfoIcon class="action-icon" />
+                    </button>
+
+                    <!-- Delete -->
+                    <button class="file-action-button danger" @click.stop="handleDeleteFile(item)">
+                      <Trash2Icon class="action-icon" />
+                    </button>
                   </div>
 
-                  <!-- File Info -->
-                  <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
-                    <InfoIcon class="action-icon" />
-                  </button>
-
-                  <!-- Delete -->
-                  <button class="file-action-button danger" @click.stop="handleDeleteFile(item)">
-                    <Trash2Icon class="action-icon" />
-                  </button>
+                  <!-- Checkbox -->
+                  <label class="relative flex cursor-pointer items-center" @click.stop>
+                    <input
+                      v-model="item.checked"
+                      type="checkbox"
+                      class="peer absolute h-0 w-0 cursor-pointer opacity-0"
+                      @click.stop
+                    />
+                    <span
+                      class="relative inline-block h-[16px] w-[16px] rounded-sm border-2 border-accent/50 transition-all duration-fast ease-apple peer-checked:border-accent-hover peer-checked:bg-accent peer-checked:after:absolute peer-checked:after:top-[-2px] peer-checked:after:left-px peer-checked:after:text-[12px] peer-checked:after:font-bold peer-checked:after:text-white peer-checked:after:content-['✓']"
+                    />
+                  </label>
                 </div>
-
-                <!-- Checkbox -->
-                <input v-model="item.checked" type="checkbox" class="file-checkbox" @click.stop />
               </div>
             </div>
-          </div>
-
-          <!-- List View -->
-          <div v-else class="file-list-item" :class="{ selected: item.checked }" @click="handleCheckChangeOther(item)">
-            <!-- Checkbox -->
-            <input v-model="item.checked" type="checkbox" class="file-list-checkbox file-checkbox" @click.stop />
-
-            <!-- Icon -->
-            <div class="file-list-icon">
-              <template v-if="!item.isDir">
-                <img
-                  v-if="isShowThumbnail && item.isImage"
-                  :src="item.url"
-                  class="file-image"
-                  style="border-radius: 4px; width: 32px; height: 32px; object-fit: cover"
-                  @error="() => {}"
-                />
-                <img
-                  v-else
-                  :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
-                  style="width: 32px; height: 32px; object-fit: contain"
-                />
-              </template>
-              <FolderIcon v-else class="file-icon" style="width: 32px; height: 32px" />
-            </div>
-
-            <!-- File Info -->
-            <div class="file-list-info" @click.stop="handleClickFile(item)">
-              <div class="file-list-name">
-                {{ item.fileName ?? '' }}
-              </div>
-              <div class="file-list-meta">
-                <span>{{ formatFileSize(item.fileSize) }}</span>
-                <span>{{ item.formatedTime }}</span>
-              </div>
-            </div>
-
-            <!-- Actions -->
-            <div class="file-list-actions">
-              <!-- Rename -->
-              <button
-                v-if="!item.isDir && isShowRenameFileIcon"
-                class="file-action-button"
-                @click.stop="handleRenameFile(item)"
-              >
-                <EditIcon class="action-icon" />
-              </button>
-
-              <!-- Download Folder -->
-              <button v-if="item.isDir" class="file-action-button" @click.stop="handleFolderBatchDownload(item)">
-                <DownloadIcon class="action-icon" />
-              </button>
-
-              <!-- Copy Link -->
-              <button
-                class="file-action-button"
-                @click.stop="
-                  async () =>
-                    copyToClipboard(
-                      await formatLink(
-                        item.url,
-                        item.fileName,
-                        manageStore.config.settings.pasteFormat ?? '$markdown',
-                        manageStore.config.settings.customPasteFormat ?? '$url',
-                      ),
-                    )
-                "
-              >
-                <CopyIcon class="action-icon" />
-              </button>
-
-              <!-- File Info -->
-              <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
-                <InfoIcon class="action-icon" />
-              </button>
-
-              <!-- Delete -->
-              <button class="file-action-button danger" @click.stop="handleDeleteFile(item)">
-                <Trash2Icon class="action-icon" />
-              </button>
-            </div>
-          </div>
-        </template>
-      </VirtualScroller>
+          </template>
+        </VirtualScroller>
+      </div>
     </div>
 
     <!-- URL Upload Dialog -->
-    <div v-if="dialogVisible" class="modal-overlay" @click="dialogVisible = false">
-      <div class="modal-container" style="width: 500px" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.urlUploadTitle') }}
-          </h3>
-          <button class="modal-close" @click="dialogVisible = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <div class="form-group">
-            <textarea
-              v-model="urlToUpload"
-              class="form-input form-textarea"
-              placeholder="https://www.baidu.com/img/bd_logo1.png&#10;https://www.baidu.com/img/bd_logo1.png"
-            />
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="action-button secondary" @click="dialogVisible = false">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="action-button primary" @click="handleUploadFromUrl">
-            {{ t('common.confirm') }}
-          </button>
-        </div>
+    <CustomModal
+      v-if="dialogVisible"
+      v-model:visible="dialogVisible"
+      :title="t('pages.manage.bucket.urlUploadTitle')"
+      width="500px"
+      height="auto"
+    >
+      <div class="flex items-center justify-center p-4">
+        <textarea
+          v-model="urlToUpload"
+          class="h-full min-h-[150px] w-full rounded-xl border-2 border-border p-3 text-sm text-main placeholder:text-sm placeholder:text-secondary focus:border-accent focus:outline-none"
+          placeholder="https://www.baidu.com/img/bd_logo1.png&#10;https://www.baidu.com/img/bd_logo1.png"
+        />
       </div>
-    </div>
+
+      <template #footer>
+        <CustomButton type="secondary" :text="t('common.cancel')" @click="dialogVisible = false" />
+        <CustomButton type="primary" :text="t('common.confirm')" @click="handleUploadFromUrl" />
+      </template>
+    </CustomModal>
 
     <!-- Image Preview -->
-    <div v-if="isShowImagePreview" class="modal-overlay" @click="isShowImagePreview = false">
-      <div class="modal-container" style="max-width: 90vw; max-height: 90vh" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">{{ t('pages.manage.bucket.imagePreview') }}</h3>
-          <button class="modal-close" @click="isShowImagePreview = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <img
-            :src="ImagePreviewList[getCurrentPreviewIndex]"
-            style="max-width: 100%; max-height: 70vh; object-fit: contain"
-          />
-        </div>
+    <CustomModal
+      v-if="isShowImagePreview"
+      v-model:visible="isShowImagePreview"
+      :title="t('pages.manage.bucket.imagePreview')"
+      width="auto"
+      height="auto"
+      class="image-preview-modal"
+    >
+      <div class="flex-1 p-4">
+        <img
+          :src="ImagePreviewList[getCurrentPreviewIndex]"
+          style="max-width: 100%; max-height: 70vh; object-fit: contain"
+        />
       </div>
-    </div>
+    </CustomModal>
 
     <!-- File Info Dialog -->
-    <div v-if="isShowFileInfo" class="modal-overlay" @click="isShowFileInfo = false">
-      <div class="modal-container" style="width: 600px" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.fileInfo') }}
-          </h3>
-          <button
-            class="action-button primary"
-            @click="copyToClipboard(JSON.stringify(currentShowedFileInfo, null, 2))"
+    <CustomModal
+      v-if="isShowFileInfo"
+      v-model:visible="isShowFileInfo"
+      width="800px"
+      height="auto"
+      :title="t('pages.manage.bucket.fileInfo')"
+    >
+      <div class="flex items-center justify-end p-1">
+        <CustomButton
+          type="primary"
+          :text="t('pages.manage.bucket.copyFileInfoInJson')"
+          @click="copyToClipboard(JSON.stringify(currentShowedFileInfo, null, 2))"
+        />
+      </div>
+      <div class="modal-content">
+        <div
+          v-for="(value, key) in currentShowedFileInfo"
+          :key="key"
+          class="mb-4 flex items-start gap-4 rounded-md border border-border-secondary bg-bg-secondary p-3 hover:border-accent hover:bg-accent/30"
+        >
+          <div
+            class="shrink-0 grow-0 basis-1/4 cursor-pointer overflow-hidden rounded-sm px-2 py-1 text-sm font-semibold text-ellipsis whitespace-nowrap text-main"
+            :title="`Click to copy key-value pair: ${key}`"
+            @click="copyToClipboard(JSON.stringify({ [key]: value }))"
           >
-            <CopyIcon class="action-icon" />
-            {{ t('pages.manage.bucket.copyFileInfoInJson') }}
-          </button>
-          <button class="modal-close" @click="isShowFileInfo = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <div v-for="(value, key) in currentShowedFileInfo" :key="key" class="file-info-item">
-            <div
-              class="file-info-key"
-              :title="`Click to copy key-value pair: ${key}`"
-              @click="copyToClipboard(JSON.stringify({ [key]: value }))"
-            >
-              {{ key }}
-            </div>
-            <div class="file-info-value" :title="`Click to copy: ${value}`" @click="copyToClipboard(value)">
-              {{ value }}
-            </div>
+            {{ key }}
+          </div>
+          <div
+            class="max-h-[120px] flex-1 cursor-pointer overflow-hidden rounded-sm px-2 py-1 font-['SF_Mono',Monaco,Inconsolata,'Roboto_Mono',monospace] text-sm leading-[1.5] text-ellipsis whitespace-nowrap text-secondary"
+            :title="`Click to copy: ${value}`"
+            @click="copyToClipboard(value)"
+          >
+            {{ value }}
           </div>
         </div>
       </div>
-    </div>
+    </CustomModal>
 
     <!-- Batch Rename Dialog -->
-    <div v-if="isShowBatchRenameDialog" class="modal-overlay" @click="isShowBatchRenameDialog = false">
-      <div class="modal-container" style="width: 600px" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.renameFile') }}
-          </h3>
-          <button class="modal-close" @click="isShowBatchRenameDialog = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <div class="form-group">
-            <label class="form-label">
-              {{ t('pages.manage.bucket.matchedPattern', { num: matchedFilesNumber }) }}
-              <div class="tooltip">
-                <InfoIcon class="action-icon" />
-                <span class="tooltip-text">{{ t('pages.manage.bucket.regexPatternTips') }}</span>
+    <CustomModal
+      v-if="isShowBatchRenameDialog"
+      v-model:visible="isShowBatchRenameDialog"
+      width="700px"
+      height="auto"
+      :title="t('pages.manage.bucket.renameFile')"
+    >
+      <div class="p-6">
+        <div class="mb-6 last:mb-0">
+          <label class="mb-2 flex items-center gap-2 text-sm font-medium text-main">
+            {{ t('pages.manage.bucket.matchedPattern', { num: matchedFilesNumber.length }) }}
+            <div class="tooltip">
+              <InfoIcon class="action-icon" />
+              <span class="tooltip-text">{{ t('pages.manage.bucket.regexPatternTips') }}</span>
+            </div>
+          </label>
+          <input
+            v-model="batchRenameMatch"
+            type="text"
+            class="w-full rounded-md border border-border bg-bg-tertiary p-3 text-sm text-main focus:border-accent focus:bg-white focus:outline-none"
+            :placeholder="t('pages.manage.bucket.regexPlaceholder')"
+            @focus="showMatchedUrls = true"
+            @blur="showMatchedUrls = false"
+          />
+          <div
+            v-if="showMatchedUrls && matchedFilesNumber.length > 0"
+            class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
+          >
+            <div class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main">
+              Matched ({{ matchedFilesNumber.length }}):
+            </div>
+            <div class="max-h-[240px] overflow-auto p-2">
+              <div
+                v-for="(item, index) in matchedFilesNumber"
+                :key="index"
+                class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
+              >
+                {{ item?.fileName || item?.key || item }}
               </div>
-            </label>
-            <input
-              v-model="batchRenameMatch"
-              type="text"
-              class="form-input"
-              :placeholder="t('pages.manage.bucket.regexPlaceholder')"
-            />
-          </div>
-
-          <div class="form-group">
-            <label class="form-label">
-              {{ t('pages.manage.bucket.replaceInput') }}
-            </label>
-            <input v-model="batchRenameReplace" type="text" class="form-input" placeholder="Ex. {Y}-{m}-{uuid}" />
-          </div>
-
-          <div class="form-group">
-            <div class="switch-container">
-              <label class="switch">
-                <input v-model="isRenameIncludeExt" type="checkbox" />
-                <span class="switch-slider" />
-              </label>
-              <span class="switch-label">
-                {{ isRenameIncludeExt ? t('pages.manage.bucket.includeExt') : t('pages.manage.bucket.excludeExt') }}
-              </span>
             </div>
           </div>
         </div>
-        <div class="modal-footer">
-          <button class="action-button secondary" @click="isShowBatchRenameDialog = false">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="action-button primary" @click="isSingleRename ? singleRename() : BatchRename()">
-            {{ t('common.confirm') }}
-          </button>
+
+        <div class="mb-6 last:mb-0">
+          <label class="mb-2 flex items-center gap-2 text-sm font-medium text-main">
+            {{ t('pages.manage.bucket.replaceInput') }}
+            <button
+              class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
+              @click="showFormatInfo = !showFormatInfo"
+            >
+              <InfoIcon :size="16" />
+            </button>
+          </label>
+          <input
+            v-model="batchRenameReplace"
+            type="text"
+            class="w-full rounded-md border border-border bg-bg-tertiary p-3 text-sm text-main focus:border-accent focus:bg-white focus:outline-none"
+            placeholder="Ex. {Y}-{m}-{uuid}"
+          />
+        </div>
+
+        <div class="mb-6 last:mb-0">
+          <CustomSwitch
+            v-model="isRenameIncludeExt"
+            small
+            no-border
+            :title="isRenameIncludeExt ? t('pages.manage.bucket.includeExt') : t('pages.manage.bucket.excludeExt')"
+          />
+        </div>
+        <div v-if="showFormatInfo" class="mb-6 last:mb-0">
+          <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
+          <PlaceholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
         </div>
       </div>
-    </div>
+      <template #footer>
+        <CustomButton :type="'secondary'" :text="t('common.cancel')" @click="isShowBatchRenameDialog = false" />
+        <CustomButton
+          :type="'primary'"
+          :text="t('common.confirm')"
+          @click="isSingleRename ? singleRename() : BatchRename()"
+        />
+      </template>
+    </CustomModal>
 
     <!-- Loading Indicators -->
-    <div v-if="isLoadingData" class="loading-toast loading-toast-bottom">
-      <div class="loading-toast-content">
-        <div class="loading-spinner" />
-        <span class="loading-text">{{ t('pages.manage.bucket.loading') }}</span>
-        <button class="loading-cancel-button" :title="t('common.cancel')" @click="cancelLoading">
+    <div v-if="isLoadingData" class="animate-slide-right fixed right-[25px] bottom-[25px] z-9999 duration-300 ease-out">
+      <div
+        class="flex min-w-[240px] items-center gap-3 rounded-lg bg-accent/85 px-4 py-3.5 shadow-lg transition-all duration-200 ease-apple hover:-translate-y-[2px] hover:bg-accent/95 hover:shadow-xl"
+      >
+        <div
+          class="mr-0 inline-block h-[18px] w-[18px] shrink-0 animate-spin rounded-full border-2 border-t-2 border-black/30 border-t-white"
+        />
+        <span class="flex-1 text-sm leading-[1.4] font-medium text-white">{{ t('pages.manage.bucket.loading') }}</span>
+        <button
+          class="flex h-[28px] w-[28px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-white text-accent transition-all duration-fast ease-apple hover:scale-105 hover:border-danger"
+          :title="t('common.cancel')"
+          @click="cancelLoading"
+        >
           <XIcon class="action-icon" />
         </button>
       </div>
     </div>
 
-    <div v-if="isLoadingDownloadData" class="loading-toast loading-toast-top">
-      <div class="loading-toast-content">
-        <div class="loading-spinner" />
-        <span class="loading-text">{{ t('pages.manage.bucket.prepareDownload') }}</span>
-        <button class="loading-cancel-button" :title="t('common.cancel')" @click="cancelDownloadLoading">
+    <div
+      v-if="isLoadingDownloadData"
+      class="animate-slide-right fixed top-[50px] right-[25px] z-9999 duration-300 ease-out"
+    >
+      <div
+        class="flex min-w-[240px] items-center gap-3 rounded-lg bg-accent/85 px-4 py-3.5 shadow-lg transition-all duration-200 ease-apple hover:-translate-y-[2px] hover:bg-accent/95 hover:shadow-xl"
+      >
+        <div
+          class="mr-0 inline-block h-[18px] w-[18px] shrink-0 animate-spin rounded-full border-2 border-t-2 border-black/30 border-t-white"
+        />
+        <span class="flex-1 text-sm leading-[1.4] font-medium text-white">{{
+          t('pages.manage.bucket.prepareDownload')
+        }}</span>
+        <button
+          class="flex h-[28px] w-[28px] shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-white text-accent transition-all duration-fast ease-apple hover:scale-105 hover:border-danger"
+          :title="t('common.cancel')"
+          @click="cancelDownloadLoading"
+        >
           <XIcon class="action-icon" />
         </button>
       </div>
@@ -1198,45 +1154,37 @@
     </div>
 
     <!-- Create Folder Dialog -->
-    <div v-if="isShowCreateFolderDialog" class="modal-overlay" @click="isShowCreateFolderDialog = false">
-      <div class="modal-container" style="width: 400px" @click.stop>
-        <div class="modal-header">
-          <h3 class="modal-title">
-            {{ t('pages.manage.bucket.createFolder') }}
-          </h3>
-          <button class="modal-close" @click="isShowCreateFolderDialog = false">
-            <XIcon class="action-icon" />
-          </button>
-        </div>
-        <div class="modal-content">
-          <div class="form-group">
-            <label class="form-label">
-              {{ t('pages.manage.bucket.inputFolderTitle') }}
-            </label>
-            <input
-              ref="folderNameInput"
-              v-model="newFolderName"
-              type="text"
-              class="form-input"
-              :placeholder="t('pages.manage.bucket.inputFolderTitle')"
-              @keyup.enter="confirmCreateFolder"
-            />
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button class="action-button secondary" @click="isShowCreateFolderDialog = false">
-            {{ t('common.cancel') }}
-          </button>
-          <button class="action-button primary" :disabled="!newFolderName.trim()" @click="confirmCreateFolder">
-            {{ t('common.confirm') }}
-          </button>
-        </div>
-      </div>
-    </div>
+    <CustomModal
+      v-if="isShowCreateFolderDialog"
+      v-model:visible="isShowCreateFolderDialog"
+      width="600px"
+      height="auto"
+      :title="t('pages.manage.bucket.createFolder')"
+    >
+      <SettingSection only-one-row>
+        <SettingCard>
+          <CustomInput
+            v-model="newFolderName"
+            :title="t('pages.manage.bucket.inputFolderTitle')"
+            :placeholder="t('pages.manage.bucket.inputFolderTitle')"
+          />
+        </SettingCard>
+      </SettingSection>
+      <template #footer>
+        <CustomButton :type="'secondary'" :text="t('common.cancel')" @click="isShowCreateFolderDialog = false" />
+        <CustomButton
+          :type="'primary'"
+          :disabled="!newFolderName.trim()"
+          :text="t('common.confirm')"
+          @click="confirmCreateFolder"
+        />
+      </template>
+    </CustomModal>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useLocalStorage } from '@vueuse/core'
 import {
   ArrowUpDownIcon,
   ChevronDownIcon,
@@ -1248,11 +1196,11 @@ import {
   FileIcon,
   FolderIcon,
   FolderPlusIcon,
-  HardDriveIcon,
+  GridIcon,
   HomeIcon,
-  ImageIcon,
   InfoIcon,
   LinkIcon,
+  ListIcon,
   RefreshCwIcon,
   ShrinkIcon,
   Trash2Icon,
@@ -1261,15 +1209,26 @@ import {
 } from 'lucide-vue-next'
 import { marked } from 'marked'
 import { v4 as uuidv4 } from 'uuid'
-import { computed, nextTick, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import CustomButton from '@/components/common/CustomButton.vue'
+import CustomInput from '@/components/common/CustomInput.vue'
+import CustomModal from '@/components/common/CustomModal.vue'
+import CustomSwitch from '@/components/common/CustomSwitch.vue'
+import PlaceholderTable from '@/components/common/PlaceholderTable.vue'
+import SettingCard from '@/components/common/SettingCard.vue'
+import SettingSection from '@/components/common/SettingSection.vue'
+import SingleSelect from '@/components/common/SingleSelect.vue'
 import ImageLocal from '@/components/ImageLocal.vue'
 import ImagePreSign from '@/components/ImagePreSign.vue'
 import ImageWebdav from '@/components/ImageWebdav.vue'
 import VirtualScroller from '@/components/VirtualScroller.vue'
 import useConfirm from '@/hooks/useConfirm'
 import useMessage from '@/hooks/useMessage'
+import FileInfo from '@/manage/pages/components/FileInfo.vue'
+import IconButton from '@/manage/pages/components/IconButton.vue'
+import EmptyPage from '@/manage/pages/EmptyPage.vue'
 import { fileCacheDbInstance } from '@/manage/store/bucketFileDb'
 import { useDownloadFileTransferStore, useFileTransferStore, useManageStore } from '@/manage/store/manageStore'
 import {
@@ -1288,7 +1247,6 @@ import { videoExt } from '@/manage/utils/videofile'
 import { trimPath } from '@/utils/common'
 import { IRPCActionType } from '@/utils/enum'
 import { cancelDownloadLoadingFileList, refreshDownloadFileTransferList } from '@/utils/static'
-
 /*
 configMap:{
     prefix: string, -> baseDir
@@ -1321,7 +1279,7 @@ const isLoadingData = ref(false)
 const isShowLoadingPage = ref(false)
 const isShowImagePreview = ref(false)
 const isContentFullscreen = ref(false)
-const layoutStyle = ref<'list' | 'grid'>('grid')
+const layoutStyle = useLocalStorage<'list' | 'grid'>('manage-bucket-page-layout-style', 'grid')
 const copyDropdownOpen = ref(false)
 const sortDropdownOpen = ref(false)
 const copyDropdownIndex = ref(-1)
@@ -1394,7 +1352,6 @@ const videoPlayerHeaders = ref({})
 // 创建文件夹相关
 const isShowCreateFolderDialog = ref(false)
 const newFolderName = ref('')
-const folderNameInput = useTemplateRef('folderNameInput')
 // Refs for scroll handling
 const virtualScrollerRef = useTemplateRef('virtualScrollerRef')
 const bucketContainerRef = useTemplateRef('bucketContainerRef')
@@ -1405,6 +1362,8 @@ const isRenameIncludeExt = ref(false)
 const isSingleRename = ref(false)
 const itemToBeRenamed = ref({} as any)
 const previousPageNumber = ref(1)
+const showMatchedUrls = ref(false)
+const showFormatInfo = ref(false)
 
 const linkFormatArray = [
   { key: 'Url', value: 'url' },
@@ -1417,6 +1376,37 @@ const linkFormatArray = [
 const linkFormatList = ['url', 'markdown', 'markdown-with-link', 'html', 'bbcode', 'custom']
 const sortTypeList = ['name', 'size', 'time', 'ext', 'check', 'init']
 
+const advancedRenameList = computed(() => ({
+  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.randomString'), value: '{str-number}' },
+  ],
+}))
+
+const advancedRenameTitleList = computed(() => ({
+  categoryTime: t('pages.settings.upload.placeholder.categoryTime'),
+  categoryHash: t('pages.settings.upload.placeholder.categoryHash'),
+  categoryFile: t('pages.settings.upload.placeholder.categoryFile'),
+}))
+
 const uploadingTaskList = computed(() =>
   uploadTaskList.value.filter(item => ['uploading', 'queuing', 'paused'].includes(item.status)),
 )
@@ -1591,12 +1581,9 @@ function stopRefreshDownloadTask() {
 
 // 界面相关
 
-/* 暂时禁用
-function handleViewChange (val: 'list' | 'grid') {
-  saveConfig('settings.isShowList', val === 'list')
-  layoutStyle.value = val
+function handleViewChange() {
+  layoutStyle.value = layoutStyle.value === 'grid' ? 'list' : 'grid'
 }
-*/
 
 function toggleContentFullscreen() {
   isContentFullscreen.value = !isContentFullscreen.value
@@ -2000,6 +1987,7 @@ async function initCustomDomainList() {
           label: defaultUrl,
           value: defaultUrl,
         })
+      console.log('customDomainList', customDomainList.value)
       currentCustomDomain.value = customDomainList.value[0].value
     } else {
       customDomainList.value.length = 0
@@ -2110,7 +2098,6 @@ async function resetParam(force: boolean = false) {
   isShowCreateFolderDialog.value = false
   newFolderName.value = ''
   lastChoosed.value = -1
-  layoutStyle.value = 'grid'
   fileSortExtReverse.value = false
   fileSortNameReverse.value = false
   fileSortSizeReverse.value = false
@@ -2279,10 +2266,6 @@ function handleReverseCheck() {
   })
 }
 
-function handleCheckChangeOther(item: any) {
-  item.checked = !item.checked
-}
-
 async function handleFolderBatchDownload(item: any) {
   try {
     const result = await confirm.confirm({
@@ -2408,10 +2391,6 @@ function handleCheckAllChange() {
 async function handleCreateFolder() {
   newFolderName.value = ''
   isShowCreateFolderDialog.value = true
-  await nextTick()
-  if (folderNameInput.value) {
-    folderNameInput.value.focus()
-  }
 }
 
 async function confirmCreateFolder() {
@@ -2485,7 +2464,7 @@ function handleBatchRenameFile() {
 
 const matchedFilesNumber = computed(() => {
   if (!batchRenameMatch.value) {
-    return 0
+    return [] as any[]
   }
   const matchedFiles = [] as any[]
   currentPageFilesInfo.forEach((item: any) => {
@@ -2499,7 +2478,8 @@ const matchedFilesNumber = computed(() => {
       }
     }
   })
-  return matchedFiles.length
+  console.log('matchedFiles', matchedFiles)
+  return matchedFiles
 })
 
 async function BatchRename() {
@@ -2660,6 +2640,11 @@ async function copyLink(item: any, type: string) {
   copyDropdownIndex.value = -1
 }
 
+function handlecopyDropdownOpen() {
+  console.log('copyDropdownOpen', copyDropdownOpen.value)
+  copyDropdownOpen.value = !copyDropdownOpen.value
+}
+
 async function handleBatchCopyLink(type: string) {
   if (!selectedItems.value.length) {
     message.warning(t('pages.manage.bucket.selectFileMsg'))
@@ -3099,23 +3084,12 @@ function getDropdownStyle(index: number) {
     left: left + 'px',
     top: top + 'px',
     maxHeight: '240px',
-    zIndex: 4000,
-    minWidth: '140px',
+    zIndex: 9999,
+    minWidth: '100px',
     maxWidth: '200px',
   }
 }
 
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as HTMLElement
-  if (!target.closest('.file-actions-dropdown') && !target.closest('[data-floating-dropdown]')) {
-    copyDropdownIndex.value = -1
-  }
-  if (!target.closest('.dropdown')) {
-    copyDropdownOpen.value = false
-    sortDropdownOpen.value = false
-  }
-}
-
 function getTableKeyOfDb() {
   let tableKey
   if (currentPicBedName.value === 'github') {
@@ -3151,13 +3125,11 @@ function handleDetectShiftKey(event: KeyboardEvent) {
 onBeforeMount(async () => {
   document.addEventListener('keydown', handleDetectShiftKey)
   document.addEventListener('keyup', handleDetectShiftKey)
-  document.addEventListener('click', handleClickOutside)
 })
 
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleDetectShiftKey)
   document.removeEventListener('keyup', handleDetectShiftKey)
-  document.removeEventListener('click', handleClickOutside)
   fileTransferInterval && clearInterval(fileTransferInterval)
   downloadInterval && clearInterval(downloadInterval)
   refreshUploadTaskId.value && clearInterval(refreshUploadTaskId.value)
diff --git a/src/renderer/manage/pages/ManageMain.vue b/src/renderer/manage/pages/ManageMain.vue
index b692ded1..1ecc2c12 100644
--- a/src/renderer/manage/pages/ManageMain.vue
+++ b/src/renderer/manage/pages/ManageMain.vue
@@ -40,7 +40,7 @@
     >
       <div class="flex h-full w-full">
         <div
-          class="flex min-h-0 max-w-[400px] min-w-[120px] flex-col border-r-2 border-r-border transition-all duration-100 ease-out"
+          class="flex min-h-0 max-w-[400px] min-w-[40px] flex-col border-r-2 border-r-border transition-all duration-100 ease-out"
           :style="{ width: sidebarWidth + 'px' }"
         >
           <div class="shrink-0 border-b-2 border-b-border-secondary p-2">
diff --git a/src/renderer/manage/pages/components/FileInfo.vue b/src/renderer/manage/pages/components/FileInfo.vue
new file mode 100644
index 00000000..dc3aa801
--- /dev/null
+++ b/src/renderer/manage/pages/components/FileInfo.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-1 flex-row flex-wrap items-center gap-2 p-0">
+    <div class="ml-2 flex items-center gap-2 p-1">
+      <FileIcon class="h-[13px] w-[13px] text-accent" />
+      <span class="text-xs font-semibold text-secondary">{{
+        `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}`
+      }}</span>
+      <HardDriveIcon class="h-[13px] w-[13px] text-accent" />
+      <span class="text-xs font-semibold text-secondary">{{
+        `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}`
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FileIcon, HardDriveIcon } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+const { currentPageFilesInfo, calculateAllFileSize } = defineProps<{
+  currentPageFilesInfo: any[]
+  calculateAllFileSize: string
+}>()
+</script>
diff --git a/src/renderer/manage/pages/components/IconButton.vue b/src/renderer/manage/pages/components/IconButton.vue
new file mode 100644
index 00000000..3ab9806a
--- /dev/null
+++ b/src/renderer/manage/pages/components/IconButton.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="group relative inline-block">
+    <button
+      class="relative flex cursor-pointer items-center justify-center gap-1 rounded-md p-2 text-xs font-medium transition-all duration-150 ease-apple hover:-translate-y-px disabled:cursor-not-allowed disabled:opacity-50"
+      :class="{
+        'border-none bg-accent text-white hover:bg-accent-hover': type === 'primary',
+        'border-[1.5px] border-border text-main hover:bg-accent/50 hover:text-white': type === 'secondary',
+        'border-none bg-error/80 text-white hover:bg-error': type === 'danger',
+      }"
+      :disabled="disabled"
+      @click="emit('click')"
+    >
+      <component :is="icon" v-if="icon" class="h-[16px] w-[16px]" />
+      <span v-if="title">{{ title }}</span>
+      <span
+        v-if="tips"
+        class="invisible absolute top-[125%] left-1/2 z-10 w-max max-w-[200px] translate-x-[-50%] rounded-md border border-border bg-bg-tertiary p-2 text-center text-xs text-main opacity-0 shadow-md transition-opacity duration-300 group-hover:visible group-hover:opacity-100"
+        >{{ tips }}</span
+      >
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const {
+  icon = null,
+  title = '',
+  tips = '',
+  type,
+  disabled = false,
+} = defineProps<{
+  icon?: any
+  title?: string
+  tips?: string
+  disabled?: boolean
+  type: 'primary' | 'secondary' | 'danger'
+}>()
+const emit = defineEmits<(e: 'click') => void>()
+</script>
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index ed3cee75..78a8582a 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -1,14 +1,7 @@
-/* BucketPage Styles */
+@import "tailwindcss" reference;
+@import "../../../assets/css/theme.css" reference;
+@import "../../../assets/css/utilities.css" reference;
 
-.bucket-container {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  height: 100%;
-  padding: 0.25rem;
-  flex-direction: column;
-  gap: 1rem;
-}
 
 /* Header Card */
 .bucket-card {
@@ -197,8 +190,7 @@
 }
 
 .action-icon {
-  width: 16px;
-  height: 16px;
+  @apply w-[16px] h-[16px];
 }
 
 .search-input {
@@ -546,29 +538,9 @@
 }
 
 .file-action-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-sm);
-  padding: 0.375rem;
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.file-action-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-  transform: translateY(-1px);
-}
-
-.file-action-button.danger:hover {
-  color: var(--color-error);
-  background: rgb(239 68 68 / 10%);
+  @apply flex justify-center items-center border-none rounded-sm p-1.5 w-[32px] h-[32px] text-secondary bg-bg-secondary transition-all duration-fast ease-apple cursor-pointer;
+  @apply hover:bg-accent/10 hover:text-main hover:-translate-y-px;
+  @apply hover:[.danger]:text-error hover:[.danger]:bg-error/10;
 }
 
 .file-checkbox {
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index a7cced1c..932a65d9 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -5,7 +5,7 @@
       class="relative z-1 no-scrollbar flex h-full w-full flex-col items-center justify-start gap-4 overflow-auto rounded-xl border-none p-4 shadow-sm"
     >
       <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"
+        class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-0 shadow-md max-md:items-stretch max-md:p-5"
       >
         <div class="flex flex-1 items-center gap-4 p-1">
           <ImagesIcon :size="24" class="text-accent" />
@@ -205,21 +205,21 @@
           v-else
           :key="componentKey"
           ref="virtualScrollerRef"
+          :items="filterList"
           :view-mode="viewMode"
           class="virtual-gallery-scroller min-h-0 w-full flex-1 p-3"
-          :items="filterList"
           :item-height="300"
           :grid-breakpoints="effectiveGridBreakpoints"
           key-field="key"
         >
           <template #default="{ item, index }">
             <div
-              class="group/image m-0 box-border flex h-[calc(100%-8px)] w-full cursor-pointer flex-col overflow-hidden rounded-lg border border-border-secondary transition-all duration-fast ease-apple hover:-translate-y-[2px] hover:border-border hover:shadow-md [.selected]:border-2 [.selected]:border-accent [.selected]:shadow-md"
+              class="group/image m-0 box-border flex h-[calc(100%-8px)] w-full cursor-pointer flex-col overflow-hidden rounded-lg border-2 border-border shadow-sm transition-all duration-fast ease-apple hover:-translate-y-[2px] hover:border-accent hover:shadow-md [.selected]:border-2 [.selected]:border-accent [.selected]:shadow-md"
               :class="{ selected: choosedList[item.id || ''] }"
               @click="handleChooseImage(!choosedList[item.id || ''], index)"
             >
               <div
-                class="relative flex aspect-auto min-h-0 flex-1 items-center justify-center overflow-hidden"
+                class="relative mb-2 flex aspect-auto min-h-0 flex-1 items-center justify-center overflow-hidden border-b border-dashed border-b-accent/40"
                 @click.stop="zoomImage(index)"
               >
                 <img
@@ -245,16 +245,16 @@
                 </div>
               </div>
 
-              <div class="flex min-h-[80px] shrink-0 flex-col justify-between p-3">
+              <div class="flex shrink-0 flex-col justify-between">
                 <div
-                  class="mb-3 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
+                  class="mb-1.5 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
                   :title="(item.fileName || '').toString().length > 30 ? item.fileName || '' : ''"
                 >
-                  {{ formatFileName(item.fileName || '') }}
+                  <div class="text-center">{{ formatFileName(item.fileName || '') }}</div>
                 </div>
 
-                <div class="flex items-center justify-between">
-                  <div class="flex gap-2">
+                <div class="mr-2 flex items-center justify-between">
+                  <div class="flex flex-1 justify-center gap-2">
                     <button :title="t('pages.gallery.copy')" class="icon-button copy-icon" @click.stop="copy(item)">
                       <ClipboardIcon :size="16" />
                     </button>
@@ -282,7 +282,7 @@
                       @change="e => handleChooseImage((e.target as HTMLInputElement).checked, index)"
                     />
                     <span
-                      class="relative inline-block h-[16px] w-[16px] rounded-sm border-2 border-border transition-all duration-fast ease-apple peer-checked:border-accent-hover peer-checked:bg-accent peer-checked:after:absolute peer-checked:after:top-[-2px] peer-checked:after:left-px peer-checked:after:text-[12px] peer-checked:after:font-bold peer-checked:after:text-white peer-checked:after:content-['✓']"
+                      class="relative inline-block h-[16px] w-[16px] rounded-sm border-2 border-accent/50 transition-all duration-fast ease-apple peer-checked:border-accent-hover peer-checked:bg-accent peer-checked:after:absolute peer-checked:after:top-[-2px] peer-checked:after:left-px peer-checked:after:text-[12px] peer-checked:after:font-bold peer-checked:after:text-white peer-checked:after:content-['✓']"
                     />
                   </label>
                 </div>
@@ -293,92 +293,11 @@
       </div>
     </div>
     <!-- Custom Image Preview Modal -->
-    <transition name="modal">
-      <div
-        v-if="gallerySliderControl.visible"
-        class="image-preview-modal fixed inset-0 z-1000 flex items-center justify-center outline-none"
-        tabindex="0"
-        @click.stop
-        @wheel="handleImageWheel"
-        @keydown="handleKeydown"
-      >
-        <div class="absolute inset-0 bg-black/50" :class="{ 'advanced-animation': enableAdvancedAnimation }" />
-        <div class="relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-surface shadow-lg">
-          <button
-            class="absolute top-4 right-4 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-danger bg-danger/70 text-white hover:bg-danger hover:text-white"
-            @click="handleClose"
-          >
-            <XIcon :size="24" />
-          </button>
-
-          <!-- Zoom controls -->
-          <div class="absolute top-4 left-4 z-10 flex items-center gap-2 rounded-lg bg-black/70 p-2">
-            <button class="zoom-btn" :disabled="imagePreviewState.scale <= 0.1" @click="zoomOut">
-              <span>-</span>
-            </button>
-            <span class="min-w-[50px] text-center text-sm font-medium text-white"
-              >{{ Math.round(imagePreviewState.scale * 100) }}%</span
-            >
-            <button class="zoom-btn" :disabled="imagePreviewState.scale >= 5" @click="zoomIn">
-              <span>+</span>
-            </button>
-            <button class="zoom-btn reset-btn" @click="resetImageTransform">Reset</button>
-          </div>
-
-          <div class="relative flex items-center">
-            <button
-              class="nav-button prev"
-              :disabled="gallerySliderControl.index === 0"
-              @click.stop="navigateImage(-1)"
-            >
-              <ChevronLeftIcon :size="24" />
-            </button>
-
-            <div
-              class="relative flex h-[80vh] w-[90vw] items-center justify-center overflow-hidden bg-black select-none active:cursor-grab!"
-              @mousedown="handleImageMouseDown"
-              @mousemove="handleImageMouseMove"
-              @mouseup="handleImageMouseUp"
-              @mouseleave="handleImageMouseUp"
-              @touchstart="handleImageTouchStart"
-              @touchmove="handleImageTouchMove"
-              @touchend="handleImageTouchEnd"
-            >
-              <img
-                ref="previewImageRef"
-                :src="currentPreviewImage?.src"
-                :alt="currentPreviewImage?.intro"
-                class="block h-auto max-h-none w-auto max-w-none origin-center object-contain"
-                :style="imageTransformStyle"
-                @load="onPreviewImageLoad"
-                @dragstart.prevent
-                @contextmenu.prevent
-              />
-            </div>
-
-            <button
-              class="nav-button next"
-              :disabled="gallerySliderControl.index === filterList.length - 1"
-              @click.stop="navigateImage(1)"
-            >
-              <ChevronRightIcon :size="24" />
-            </button>
-          </div>
-
-          <div class="flex items-center justify-between border border-border-secondary px-6 py-4">
-            <h3 class="m-0 mr-4 flex-1 overflow-hidden text-base font-semibold text-ellipsis text-main">
-              {{ currentPreviewImage?.intro }}
-            </h3>
-            <div class="mr-4 text-sm font-semibold whitespace-nowrap text-main">
-              {{ gallerySliderControl.index + 1 }} / {{ filterList.length }}
-            </div>
-            <div class="text-center text-xs font-medium text-main">
-              {{ t('pages.gallery.previewHelp') }}
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
+    <ImagePreview
+      v-model:gallery-slider-control="gallerySliderControl"
+      :filter-list="filterList"
+      :is-always-force-reload="isAlwaysForceReload"
+    />
 
     <!-- Edit URL Modal -->
     <transition name="modal">
@@ -410,7 +329,7 @@
       >
         <div class="p-6">
           <div class="mb-6 last:mb-0">
-            <label class="form-label">
+            <label class="mb-2 flex items-center gap-2 text-sm font-medium text-main">
               {{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
             </label>
             <input
@@ -441,7 +360,7 @@
           </div>
 
           <div class="mb-6 last:mb-0">
-            <label class="form-label">
+            <label class="mb-2 flex items-center gap-2 text-sm font-medium text-main">
               {{ t('pages.gallery.replacedWith') }}
               <button
                 class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
@@ -456,60 +375,7 @@
           <!-- Format Info Panel -->
           <div v-if="showFormatInfo" class="mb-6 last:mb-0">
             <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
-            <div
-              class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
-            >
-              <div class="border-b border-b-border last:border-b-0">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryTime') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryTime"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="placeholder-category">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryHash') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryHash"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="placeholder-category">
-                <div class="category-title">
-                  {{ t('pages.settings.upload.placeholder.categoryFile') }}
-                </div>
-                <div class="placeholder-grid">
-                  <div
-                    v-for="item in advancedRenameList.categoryFile"
-                    :key="item.value"
-                    class="placeholder-item"
-                    @click="copyPlaceholder(item.value)"
-                  >
-                    <code>{{ item.value }}</code>
-                    <span>{{ item.label }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <PlaceholderTable :list="advancedRenameList" :title-list="advancedRenameTitleList" />
           </div>
         </div>
         <template #footer>
@@ -526,8 +392,6 @@ import { useStorage } from '@vueuse/core'
 import {
   CheckSquareIcon,
   ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
   ChevronUpIcon,
   ClipboardIcon,
   EditIcon,
@@ -560,7 +424,9 @@ import ALLApi from '@/apis/allApi'
 import CustomButton from '@/components/common/CustomButton.vue'
 import CustomModal from '@/components/common/CustomModal.vue'
 import MultiSelect from '@/components/common/MultiSelect.vue'
+import PlaceholderTable from '@/components/common/PlaceholderTable.vue'
 import SingleSelect from '@/components/common/SingleSelect.vue'
+import ImagePreview from '@/components/ImagePreview.vue'
 import VirtualScroller from '@/components/VirtualScroller.vue'
 import useConfirm from '@/hooks/useConfirm'
 import { usePicBed } from '@/hooks/useGlobal'
@@ -586,7 +452,6 @@ const { picBedG } = usePicBed()
 
 const images = ref<ImgInfo[]>([])
 const virtualScrollerRef = useTemplateRef('virtualScrollerRef')
-const previewImageRef = useTemplateRef('previewImageRef')
 const dialogVisible = ref(false)
 const imgInfo = reactive({
   id: '',
@@ -630,22 +495,15 @@ const userGridColumns = useStorage<number>('galleryGridColumns', 4)
 const imageLoadStates = reactive<Record<string, boolean>>({})
 const imageErrorStates = reactive<Record<string, boolean>>({})
 
-const imagePreviewState = reactive({
-  scale: 1,
-  translateX: 0,
-  translateY: 0,
-  isDragging: false,
-  startX: 0,
-  startY: 0,
-  startTranslateX: 0,
-  startTranslateY: 0,
-  isSwipeMode: false,
-  swipeStartX: 0,
-  swipeThreshold: 100,
-})
-
 const pasteStyleList = ['markdown', 'HTML', 'URL', 'UBB', 'Custom']
 const shortURLList = [t('pages.gallery.shortUrl'), t('pages.gallery.longUrl')]
+
+const advancedRenameTitleList = computed(() => ({
+  categoryTime: t('pages.settings.upload.placeholder.categoryTime'),
+  categoryHash: t('pages.settings.upload.placeholder.categoryHash'),
+  categoryFile: t('pages.settings.upload.placeholder.categoryFile'),
+}))
+
 const advancedRenameList = {
   categoryTime: [
     { label: t('pages.settings.upload.placeholder.year4'), value: '{Y}' },
@@ -711,45 +569,6 @@ const selectedCount = computed(() => {
   return Object.values(choosedList).filter(v => v).length
 })
 
-const currentPreviewImage = computed(() => {
-  const item = filterList.value[gallerySliderControl.index]
-  if (!item) return null
-  const cacheBustedItem = { ...item }
-  if (isAlwaysForceReload.value) {
-    if (cacheBustedItem.imgUrl) {
-      cacheBustedItem.imgUrl = addCacheBustParam(cacheBustedItem.imgUrl)
-    }
-    if (cacheBustedItem.galleryPath) {
-      cacheBustedItem.galleryPath = addCacheBustParam(cacheBustedItem.galleryPath)
-    }
-  }
-  const src = cacheBustedItem.src || cacheBustedItem.galleryPath || cacheBustedItem.imgUrl || ''
-  cacheBustedItem.src = isAlwaysForceReload.value ? addCacheBustParam(src) : src
-  return cacheBustedItem
-})
-
-const imageTransformStyle = computed(() => {
-  // Check if image overflows the viewport
-  const imageElement = previewImageRef.value
-  let isDraggable = false
-
-  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
-    const viewerElement = imageElement.parentElement
-    if (viewerElement) {
-      const viewerRect = viewerElement.getBoundingClientRect()
-      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
-      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
-      isDraggable = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
-    }
-  }
-
-  return {
-    transform: `translate(${imagePreviewState.translateX}px, ${imagePreviewState.translateY}px) scale(${imagePreviewState.scale})`,
-    cursor: imagePreviewState.isDragging ? 'grabbing' : isDraggable ? 'grab' : 'default',
-    transition: 'none',
-  }
-})
-
 const dateRange = computed({
   get: () => {
     if (dateRangeStart.value && dateRangeEnd.value) {
@@ -812,11 +631,6 @@ watch(searchTextURL, newVal => {
   }, 300)
 })
 
-function copyPlaceholder(placeholder: string) {
-  window.electron.clipboard.writeText(String(placeholder))
-  message.success(t('pages.settings.upload.copySuccess', { content: placeholder }))
-}
-
 function onImageLoad(id: string) {
   imageLoadStates[id] = true
 }
@@ -826,224 +640,6 @@ function onImageError(id: string) {
   imageErrorStates[id] = true
 }
 
-function onPreviewImageLoad() {
-  nextTick(() => {
-    resetImageTransform()
-  })
-}
-
-function navigateImage(direction: number) {
-  const newIndex = gallerySliderControl.index + direction
-  if (newIndex >= 0 && newIndex < filterList.value.length) {
-    gallerySliderControl.index = newIndex
-    resetImageTransform()
-  }
-}
-
-function resetImageTransform() {
-  const optimalScale = calculateOptimalScale()
-  imagePreviewState.scale = optimalScale
-  imagePreviewState.translateX = 0
-  imagePreviewState.translateY = 0
-  imagePreviewState.isDragging = false
-}
-
-function calculateOptimalScale(): number {
-  const imageElement = previewImageRef.value
-  if (!imageElement) {
-    return 1
-  }
-  if (!imageElement.naturalWidth || !imageElement.naturalHeight) {
-    return 1
-  }
-  const viewerElement = imageElement.parentElement
-  if (!viewerElement) {
-    return 1
-  }
-
-  const viewerRect = viewerElement.getBoundingClientRect()
-  const viewerWidth = viewerRect.width
-  const viewerHeight = viewerRect.height
-
-  const imageWidth = imageElement.naturalWidth
-  const imageHeight = imageElement.naturalHeight
-  const scaleX = viewerWidth / imageWidth
-  const scaleY = viewerHeight / imageHeight
-  const optimalScale = Math.min(scaleX, scaleY, 1)
-
-  return optimalScale
-}
-
-function zoomIn() {
-  zoomToScale(Math.min(imagePreviewState.scale * 1.2, 5))
-}
-
-function zoomOut() {
-  const newScale = Math.max(imagePreviewState.scale / 1.2, 0.1)
-  zoomToScale(newScale)
-}
-
-function zoomToScale(newScale: number) {
-  const oldScale = imagePreviewState.scale
-  imagePreviewState.scale = newScale
-
-  const optimalScale = calculateOptimalScale()
-  if (newScale <= optimalScale) {
-    imagePreviewState.translateX = 0
-    imagePreviewState.translateY = 0
-  } else {
-    const scaleDiff = newScale / oldScale
-    imagePreviewState.translateX *= scaleDiff
-    imagePreviewState.translateY *= scaleDiff
-  }
-}
-
-function handleImageWheel(event: WheelEvent) {
-  event.preventDefault()
-  const delta = event.deltaY > 0 ? -1 : 1
-  const zoomFactor = 1.1
-  const newScale =
-    delta > 0 ? Math.min(imagePreviewState.scale * zoomFactor, 5) : Math.max(imagePreviewState.scale / zoomFactor, 0.1)
-
-  zoomToScale(newScale)
-}
-
-function handleKeydown(event: KeyboardEvent) {
-  switch (event.key) {
-    case 'ArrowLeft':
-      event.preventDefault()
-      navigateImage(-1)
-      break
-    case 'ArrowRight':
-      event.preventDefault()
-      navigateImage(1)
-      break
-    case 'Escape':
-      event.preventDefault()
-      handleClose()
-      break
-    case '=':
-    case '+':
-      event.preventDefault()
-      zoomIn()
-      break
-    case '-':
-      event.preventDefault()
-      zoomOut()
-      break
-    case '0':
-      event.preventDefault()
-      resetImageTransform()
-      break
-  }
-}
-
-function handleImageMouseDown(event: MouseEvent) {
-  const imageElement = previewImageRef.value
-  let isImageLargerThanViewer = false
-
-  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
-    const viewerElement = imageElement.parentElement
-    if (viewerElement) {
-      const viewerRect = viewerElement.getBoundingClientRect()
-      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
-      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
-      isImageLargerThanViewer = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
-    }
-  }
-
-  if (!isImageLargerThanViewer) {
-    imagePreviewState.isSwipeMode = true
-    imagePreviewState.swipeStartX = event.clientX
-  } else {
-    imagePreviewState.isDragging = true
-    imagePreviewState.startX = event.clientX
-    imagePreviewState.startY = event.clientY
-    imagePreviewState.startTranslateX = imagePreviewState.translateX
-    imagePreviewState.startTranslateY = imagePreviewState.translateY
-  }
-  event.preventDefault()
-}
-
-function handleImageMouseMove(event: MouseEvent) {
-  if (imagePreviewState.isDragging) {
-    const deltaX = event.clientX - imagePreviewState.startX
-    const deltaY = event.clientY - imagePreviewState.startY
-    imagePreviewState.translateX = imagePreviewState.startTranslateX + deltaX
-    imagePreviewState.translateY = imagePreviewState.startTranslateY + deltaY
-  }
-}
-
-function handleImageMouseUp(event: MouseEvent) {
-  if (imagePreviewState.isSwipeMode) {
-    const deltaX = event.clientX - imagePreviewState.swipeStartX
-    if (Math.abs(deltaX) > imagePreviewState.swipeThreshold) {
-      if (deltaX > 0) {
-        navigateImage(-1)
-      } else {
-        navigateImage(1)
-      }
-    }
-    imagePreviewState.isSwipeMode = false
-  }
-  imagePreviewState.isDragging = false
-}
-
-function handleImageTouchStart(event: TouchEvent) {
-  const touch = event.touches[0]
-  const imageElement = previewImageRef.value
-  let isImageLargerThanViewer = false
-
-  if (imageElement && imageElement.naturalWidth && imageElement.naturalHeight) {
-    const viewerElement = imageElement.parentElement
-    if (viewerElement) {
-      const viewerRect = viewerElement.getBoundingClientRect()
-      const currentImageWidth = imageElement.naturalWidth * imagePreviewState.scale
-      const currentImageHeight = imageElement.naturalHeight * imagePreviewState.scale
-      isImageLargerThanViewer = currentImageWidth > viewerRect.width + 1 || currentImageHeight > viewerRect.height + 1
-    }
-  }
-
-  if (!isImageLargerThanViewer) {
-    imagePreviewState.isSwipeMode = true
-    imagePreviewState.swipeStartX = touch.clientX
-  } else {
-    imagePreviewState.isDragging = true
-    imagePreviewState.startX = touch.clientX
-    imagePreviewState.startY = touch.clientY
-    imagePreviewState.startTranslateX = imagePreviewState.translateX
-    imagePreviewState.startTranslateY = imagePreviewState.translateY
-  }
-  event.preventDefault()
-}
-
-function handleImageTouchMove(event: TouchEvent) {
-  if (imagePreviewState.isDragging) {
-    const touch = event.touches[0]
-    const deltaX = touch.clientX - imagePreviewState.startX
-    const deltaY = touch.clientY - imagePreviewState.startY
-    imagePreviewState.translateX = imagePreviewState.startTranslateX + deltaX
-    imagePreviewState.translateY = imagePreviewState.startTranslateY + deltaY
-  }
-  event.preventDefault()
-}
-
-function handleImageTouchEnd(event: TouchEvent) {
-  if (imagePreviewState.isSwipeMode && event.changedTouches.length > 0) {
-    const touch = event.changedTouches[0]
-    const deltaX = touch.clientX - imagePreviewState.swipeStartX
-    if (Math.abs(deltaX) > imagePreviewState.swipeThreshold) {
-      if (deltaX > 0) {
-        navigateImage(-1)
-      } else {
-        navigateImage(1)
-      }
-    }
-    imagePreviewState.isSwipeMode = false
-  }
-  imagePreviewState.isDragging = false
-}
-
 function toggleViewMode() {
   viewMode.value = viewMode.value === 'grid' ? 'list' : 'grid'
 }
@@ -1214,20 +810,6 @@ function clearChoosedList() {
 function zoomImage(index: number) {
   gallerySliderControl.index = index
   gallerySliderControl.visible = true
-  resetImageTransform()
-
-  nextTick(() => {
-    const modal = document.querySelector('.image-preview-modal') as HTMLElement
-    if (modal) {
-      modal.focus()
-    }
-  })
-}
-
-function handleClose() {
-  gallerySliderControl.index = 0
-  gallerySliderControl.visible = false
-  resetImageTransform()
 }
 
 async function copy(item: ImgInfo) {
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index 0a9da47e..e9bd605f 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -314,6 +314,7 @@
             <CustomSwitch
               v-model="formOfSetting.autoImport"
               small
+              no-border
               :title="t('pages.settings.upload.autoImportInManage')"
               :description="t('pages.settings.upload.autoImportInManageHint')"
             />
diff --git a/src/renderer/pages/Upload.vue b/src/renderer/pages/Upload.vue
index 76ad55cf..032dd471 100644
--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -9,7 +9,7 @@
       >
         <div class="flex max-w-[calc(100%-300px)] flex-1 flex-wrap items-center gap-2 max-md:order-1">
           <button
-            class="provider-button 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]"
+            class="provider-button group/provider flex w-auto min-w-[150px] shrink-0 cursor-pointer items-center gap-3 rounded-lg bg-bg-secondary px-4 py-2 font-[inherit] shadow-sm 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)"
           >
@@ -47,7 +47,7 @@
             <button
               v-for="picbedType in favoritePicbeds"
               :key="picbedType.id"
-              class="group/badge relative flex w-[85px] shrink-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md border border-border-secondary bg-bg-secondary pt-1.5 pr-2 pb-1.5 pl-3 text-xs font-medium whitespace-nowrap text-secondary transition-all duration-fast ease-standard select-none hover:-translate-y-px hover:border-accent-hover hover:bg-bg-tertiary hover:text-accent-hover [.is-active]:border-[0.1rem] [.is-active]:border-accent-hover [.is-active]:font-semibold [.show-delete]:pr-2"
+              class="group/badge relative flex w-[85px] shrink-0 cursor-pointer items-center gap-2 overflow-hidden rounded-md bg-bg-secondary pt-1.5 pr-2 pb-1.5 pl-3 text-xs font-medium whitespace-nowrap text-secondary shadow-sm transition-all duration-fast ease-standard select-none hover:-translate-y-px hover:border-accent-hover hover:bg-bg-tertiary hover:text-accent-hover [.is-active]:border-[0.1rem] [.is-active]:border-accent-hover [.is-active]:font-semibold [.show-delete]:pr-2"
               :class="{ 'is-active': isCurrentPicbed(picbedType), 'show-delete': longPressedBadge === picbedType.id }"
               :title="t('pages.upload.longPressToRemoveFromFavorites') + getPicbedName(picbedType)"
               @click="handleBadgeClick(picbedType)"
@@ -82,7 +82,7 @@
           </transition-group>
         </div>
         <div class="flex flex-wrap items-center gap-3 max-md:order-2 max-md:justify-stretch">
-          <div class="inline-flex overflow-hidden rounded-md border border-border-secondary bg-bg-secondary">
+          <div class="inline-flex overflow-hidden rounded-md bg-bg-secondary shadow-sm">
             <button
               class="segmented-button"
               :title="t('pages.upload.imageProcessNameSingle')"
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 590ef3d9..634b99db 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -13,7 +13,7 @@
 }
 
 .filter-group {
-  @apply flex flex-col gap-3 flex-1 min-w-[140px];
+  @apply flex flex-col gap-1 flex-1 min-w-[140px];
 }
 
 .filter-label {
@@ -61,32 +61,6 @@
   @apply [.prev]:left-4 [.next]:right-4;
 }
 
-/* Modal Overlay */
-.modal-overlay {
-  @apply fixed inset-0 z-1000 flex justify-center items-center bg-[rgb(0_0_0_/50%)];
-}
-
-.modal-container {
-  @apply overflow-auto rounded-xl w-[90%] max-w-[700px] max-h-[90vh] bg-bg-tertiary shadow-lg;
-}
-
-.modal-header {
-  @apply flex justify-between items-center border-b border-border-secondary p-6;
-}
-
-.modal-close-btn {
-  @apply flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-border bg-surface-elevated text-secondary transition-all duration-fast ease-apple;
-  @apply hover:scale-105 hover:border-danger hover:bg-danger hover:text-white focus-visible:focus-ring;
-}
-
-.modal-footer {
-  @apply flex justify-end border-t border-border-secondary p-6 gap-3;
-}
-
-.form-label {
-  @apply flex items-center mb-2 text-sm font-medium text-main gap-2;
-}
-
 .form-input {
   @apply border border-border rounded-md p-3 w-full text-sm text-main bg-bg-secondary transition-all duration-fast ease-apple box-border;
   @apply focus:border-accent focus:outline-none focus:shadow-md;