diff --git a/components/data-table/data-table.vue b/components/data-table/data-table.vue
index a11d1cb..ed93690 100644
--- a/components/data-table/data-table.vue
+++ b/components/data-table/data-table.vue
@@ -11,7 +11,7 @@ import {
   Table as UiTable,
 } from '@/components/ui/table'
 import { cn } from '@/lib/utils'
-import type { Table } from '@tanstack/vue-table'
+import type { Column, Table } from '@tanstack/vue-table'
 import { FlexRender } from '@tanstack/vue-table'
 import { computed } from 'vue'
 
@@ -40,6 +40,16 @@ const props = withDefaults(
 const visibleColumnCount = computed(() => props.table.getVisibleLeafColumns().length)
 
 const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
+
+const resolveMaxWidth = (value?: string | number) => {
+  if (value == null) return undefined
+  return typeof value === 'number' ? `${value}px` : value
+}
+
+const getColumnStyles = (column: Column<TData, unknown>) => {
+  const maxWidth = resolveMaxWidth(column.columnDef.meta?.maxWidth)
+  return maxWidth ? { maxWidth } : undefined
+}
 </script>
 
 <template>
@@ -48,7 +58,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
       <UiTable :class="tableClass">
         <TableHeader :class="stickyHeader ? 'sticky top-0 z-10 bg-muted/40 backdrop-blur' : ''">
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id" :class="stickyHeader ? 'bg-muted/40 backdrop-blur' : undefined">
-            <TableHead v-for="header in headerGroup.headers" :key="header.id">
+            <TableHead v-for="header in headerGroup.headers" :key="header.id" :style="getColumnStyles(header.column)">
               <template v-if="!header.isPlaceholder">
                 <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
               </template>
@@ -58,7 +68,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
         <TableBody>
           <template v-if="isLoading">
             <TableRow>
-              <TableCell :colspan="visibleColumnCount" class="h-32 text-center align-middle">
+              <TableCell :colspan="visibleColumnCount" class="h-48 text-center align-middle">
                 <div class="flex flex-col items-center gap-2">
                   <Spinner class="size-6" />
                   <span class="text-sm text-muted-foreground">Loading...</span>
@@ -68,7 +78,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
           </template>
           <template v-else-if="hasRows">
             <TableRow v-for="row in table.getRowModel().rows" :key="row.id" :data-state="row.getIsSelected() ? 'selected' : undefined" class="transition-colors hover:bg-muted/40">
-              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" :style="getColumnStyles(cell.column)">
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </TableCell>
             </TableRow>
@@ -90,7 +100,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
       <UiTable :class="cn('border rounded-md', tableClass)">
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-            <TableHead v-for="header in headerGroup.headers" :key="header.id" class="py-2">
+            <TableHead v-for="header in headerGroup.headers" :key="header.id" class="py-2" :style="getColumnStyles(header.column)">
               <template v-if="!header.isPlaceholder">
                 <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
               </template>
@@ -100,7 +110,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
         <TableBody>
           <template v-if="isLoading">
             <TableRow>
-              <TableCell :colspan="visibleColumnCount" class="h-32 text-center align-middle">
+              <TableCell :colspan="visibleColumnCount" class="h-48 text-center align-middle">
                 <div class="flex flex-col items-center gap-2">
                   <Spinner class="size-6" />
                   <span class="text-sm text-muted-foreground">Loading...</span>
@@ -110,7 +120,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
           </template>
           <template v-else-if="hasRows">
             <TableRow v-for="row in table.getRowModel().rows" :key="row.id" :data-state="row.getIsSelected() ? 'selected' : undefined" class="transition-colors hover:bg-muted/40">
-              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="py-2">
+              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id" class="py-2" :style="getColumnStyles(cell.column)">
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </TableCell>
             </TableRow>
diff --git a/components/modal.vue b/components/modal.vue
index 5fd3700..0a05c84 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -70,7 +70,7 @@ const handleEscape = (event: Event) => {
         </slot>
       </DialogHeader>
 
-      <div class="max-h-[75vh]">
+      <div class="max-h-[80vh]">
         <slot />
       </div>
 
diff --git a/components/object/info.vue b/components/object/info.vue
index b261129..07e00ed 100644
--- a/components/object/info.vue
+++ b/components/object/info.vue
@@ -6,7 +6,7 @@
           <Icon name="ri:download-line" class="size-4" />
           {{ t('Download') }}
         </Button>
-        <Button variant="outline" size="sm" @click="() => (showPreview = true)">
+        <Button variant="outline" size="sm" @click="openPreview">
           <Icon name="ri:eye-line" class="size-4" />
           {{ t('Preview') }}
         </Button>
@@ -126,26 +126,39 @@
       </div>
     </Modal>
 
-    <object-preview-modal v-model:show="showPreview" :object="object" />
+    <object-preview-modal v-model:show="showPreview" :object="previewObject ?? object" />
+    <ObjectVersions
+      :bucket-name="bucketName"
+      :object-key="object?.Key || ''"
+      :visible="showVersions"
+      @close="handleVersionsClose"
+      @preview="handlePreviewVersion"
+      @refresh-parent="handleVersionsRefresh"
+    />
   </Drawer>
 </template>
 
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
+import { useNuxtApp } from '#app'
+import { GetObjectCommand, HeadObjectCommand } from '@aws-sdk/client-s3'
+import { getSignedUrl as presignGetObject } from '@aws-sdk/s3-request-presigner'
+import { joinRelativeURL } from 'ufo'
+import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Drawer from '@/components/drawer.vue'
+import ObjectVersions from '@/components/object/versions.vue'
 import Modal from '@/components/modal.vue'
-import { Item, ItemContent, ItemHeader, ItemTitle } from '@/components/ui/item'
 import { Badge } from '@/components/ui/badge'
-import { Switch } from '@/components/ui/switch'
+import { Button } from '@/components/ui/button'
 import { Field, FieldContent, FieldLabel } from '@/components/ui/field'
-import { joinRelativeURL } from 'ufo'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { Input } from '@/components/ui/input'
+import { Item, ItemContent, ItemHeader, ItemTitle } from '@/components/ui/item'
+import { Switch } from '@/components/ui/switch'
 
 const { t } = useI18n()
 const message = useMessage()
+const { $s3Client } = useNuxtApp()
 
 const props = defineProps<{
   bucketName: string
@@ -162,26 +175,19 @@ const signedUrl = ref('')
 const showTagView = ref(false)
 const showRetentionView = ref(false)
 const showPreview = ref(false)
+const showVersions = ref(false)
+const previewObject = ref<any | null>(null)
 
 const tagFormValue = ref({ Key: '', Value: '' })
 
-const {
-  getObjectInfo,
-  setLegalHold,
-  putObjectTags,
-  getObjectTags,
-  getObjectRetention,
-  putObjectRetention,
-  getObjectVersions,
-} = useObject({ bucket: props.bucketName })
+const { getObjectInfo, setLegalHold, putObjectTags, getObjectTags, getObjectRetention, putObjectRetention } = useObject({
+  bucket: props.bucketName,
+})
 
-const openDrawer = async (bucket: string, key: string) => {
+const openDrawer = async (_bucket: string, key: string) => {
   visible.value = true
   try {
-    const info = await getObjectInfo(key)
-    object.value = info
-    lockStatus.value = info?.ObjectLockLegalHoldStatus === 'ON'
-    signedUrl.value = info?.SignedUrl || ''
+    await loadObjectInfo(key)
     await fetchTags(key)
     await fetchRetention(key)
   } catch (error) {
@@ -189,6 +195,13 @@ const openDrawer = async (bucket: string, key: string) => {
   }
 }
 
+const loadObjectInfo = async (key: string) => {
+  const info = await getObjectInfo(key)
+  object.value = info
+  lockStatus.value = info?.ObjectLockLegalHoldStatus === 'ON'
+  signedUrl.value = info?.SignedUrl || ''
+}
+
 const fetchTags = async (key: string) => {
   try {
     const response = await getObjectTags(key)
@@ -265,11 +278,71 @@ const resetRetention = async () => {
   }
 }
 
-const viewVersions = async () => {
+const viewVersions = () => {
   if (!object.value) return
-  await getObjectVersions(object.value.Key)
+  showVersions.value = true
 }
 
+const openPreview = (target?: any) => {
+  const source = target ?? object.value
+  if (!source) return
+  previewObject.value = source
+  showPreview.value = true
+}
+
+const handlePreviewVersion = async (versionId: string) => {
+  if (!object.value?.Key) return
+  try {
+    const [head, signed] = await Promise.all([
+      $s3Client.send(
+        new HeadObjectCommand({
+          Bucket: props.bucketName,
+          Key: object.value.Key,
+          VersionId: versionId,
+        })
+      ),
+      presignGetObject(
+        $s3Client,
+        new GetObjectCommand({
+          Bucket: props.bucketName,
+          Key: object.value.Key,
+          VersionId: versionId,
+        }),
+        { expiresIn: 3600 }
+      ),
+    ])
+    previewObject.value = {
+      ...head,
+      Key: object.value.Key,
+      SignedUrl: signed,
+      VersionId: versionId,
+    }
+    showPreview.value = true
+  } catch (error: any) {
+    message.error(error?.message || t('Failed to fetch versions'))
+  }
+}
+
+const handleVersionsClose = () => {
+  showVersions.value = false
+}
+
+const handleVersionsRefresh = async () => {
+  if (!object.value?.Key) return
+  try {
+    await loadObjectInfo(object.value.Key)
+  } catch (error: any) {
+    message.error(error?.message || t('Failed to fetch object info'))
+  }
+}
+
+watch(
+  () => showPreview.value,
+  value => {
+    if (!value) previewObject.value = null
+  }
+)
+
 const download = async () => {
   if (!object.value) return
   const url = joinRelativeURL('/browser', encodeURIComponent(props.bucketName), 'download', encodeURIComponent(object.value.Key))
diff --git a/components/object/list.vue b/components/object/list.vue
index 843d04f..87a8f35 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -65,16 +65,15 @@ import dayjs from 'dayjs'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import { joinRelativeURL } from 'ufo'
+import type { VNode } from 'vue'
 import { computed, h, ref, watch } from 'vue'
 import { useDeleteTaskManagerStore } from '~/store/delete-tasks'
 import { useUploadTaskManagerStore } from '~/store/upload-tasks'
-import { resolveRouteParam, safeDecodeURIComponent } from '~/utils/functions'
 
 const { $s3Client } = useNuxtApp()
 const { t } = useI18n()
 const route = useRoute()
 const dialog = useDialog()
-const message = useMessage()
 const props = defineProps<{ bucket: string; path: string }>()
 
 const uploadPickerVisible = ref(false)
@@ -114,7 +113,13 @@ type ObjectRow = {
 }
 
 const bucketName = computed(() => props.bucket)
-const prefix = computed(() => resolveRouteParam(props.path))
+const prefix = computed(() => decodeURIComponent(props.path))
+const pageSize = computed(() => {
+  const q = route.query.pageSize
+  const s = Array.isArray(q) ? q[0] : q
+  const size = Number.parseInt(s ?? '', 10)
+  return Number.isFinite(size) && size > 0 ? size : 25
+})
 
 const bucketPath = (path?: string | string[]) => {
   const value = Array.isArray(path) ? path.join('/') : path
@@ -126,6 +131,8 @@ const tokenHistory = ref<string[]>([])
 const nextToken = ref<string | undefined>(undefined)
 
 const infoRef = ref<{ openDrawer: (bucket: string, key: string) => void }>()
+const message = useMessage()
+const objectApi = useObject({ bucket: bucketName.value })
 
 const handleNewObject = (asPrefix: boolean) => {
   newObjectAsPrefix.value = asPrefix
@@ -139,43 +146,58 @@ const handleObjectDeleted = () => {
 const fetchObjects = async (): Promise<ObjectRow[]> => {
   loading.value = true
   try {
-    const params: any = {
+    const response = await $s3Client.send(new ListObjectsV2Command({
       Bucket: bucketName.value,
       Prefix: prefix.value,
+      Delimiter: '/',
       ContinuationToken: continuationToken.value,
-      MaxKeys: Number.parseInt((route.query.pageSize as string) ?? '100', 10),
-    }
+      MaxKeys: pageSize.value,
+    }))
 
-    const response = await $s3Client.send(new ListObjectsV2Command(params))
     nextToken.value = response.NextContinuationToken
 
-    const prefixData: ObjectRow[] = (response.CommonPrefixes ?? []).map(item => ({
+    const prefixItems: ObjectRow[] = (response.CommonPrefixes ?? []).map(item => ({
       Key: item.Prefix ?? '',
       type: 'prefix' as const,
       Size: 0,
       LastModified: '',
     }))
 
-    const objectData: ObjectRow[] = (response.Contents ?? []).map(item => ({
+    const objectItems: ObjectRow[] = (response.Contents ?? []).map(item => ({
       Key: item.Key ?? '',
       type: 'object' as const,
       Size: item.Size ?? 0,
       LastModified: item.LastModified ? item.LastModified.toISOString() : '',
     }))
 
-    return [...prefixData, ...objectData]
+    return [...prefixItems, ...objectItems]
   } finally {
     loading.value = false
   }
 }
 
+const asyncDataCacheKey = computed(() => {
+  return `objects-${bucketName.value}-${prefix.value}-${continuationToken.value || 'start'}-${searchTerm.value || 'all'}`
+})
+
+const displayKey = (key: string) => {
+  if (!prefix.value) return key
+  return key.startsWith(prefix.value) ? key.slice(prefix.value.length) : key
+}
+
 const { data, refresh } = await useAsyncData<ObjectRow[]>(
-  'objects',
+  asyncDataCacheKey,
   async () => {
     const objects = await fetchObjects()
-    if (!searchTerm.value) return objects
     const term = searchTerm.value.toLowerCase()
-    return objects.filter(item => item.Key.toLowerCase().includes(term))
+
+    return objects.filter(item => {
+      if (term) {
+        const key = displayKey(item.Key).toLowerCase()
+        return key.includes(term)
+      }
+      return item.Key !== prefix.value
+    })
   },
   {
     default: () => [],
@@ -205,41 +227,25 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
           checked: row.getIsSelected(),
           onChange: (event: Event) => row.toggleSelected((event.target as HTMLInputElement).checked),
         }),
+      meta: {
+        maxWidth: 24,
+      },
     },
     {
       id: 'object',
       header: () => t('Object'),
       cell: ({ row }: any) => {
         const key = row.original.Key ?? ''
-        const prefixValue = prefix.value || ''
-        const isPrefixed = Boolean(prefixValue) && key.startsWith(prefixValue)
-        const relativeKey = isPrefixed ? key.slice(prefixValue.length) : key
+        const displayKey = prefix.value ? key.substring(prefix.value.length) : key
 
-        const trimTrailingSlash = (value: string) => (value.endsWith('/') ? value.slice(0, -1) : value)
-        const normalize = (value: string) => {
-          const trimmed = trimTrailingSlash(value)
-          if (!trimmed) return ''
-          const decoded = safeDecodeURIComponent(trimmed)
-          if (!decoded) return ''
-          const segments = decoded.split('/').filter(Boolean)
-          return segments.length ? segments[segments.length - 1] : decoded
-        }
-
-        let label = normalize(relativeKey)
-        if (!label) {
-          label = normalize(key)
-        }
-        if (!label) {
-          const fallback = safeDecodeURIComponent(trimTrailingSlash(key))
-          label = fallback || key || '/'
-        }
+        let label: string | VNode = displayKey || '/'
 
         if (row.original.type === 'prefix') {
           return h(
             NuxtLink,
             {
               href: bucketPath(row.original.Key),
-              class: 'flex items-center gap-2 text-primary hover:underline',
+              class: 'flex items-center gap-2 text-blue-500 hover:underline',
             },
             {
               default: () => [h(Icon, { name: 'ri:folder-line', class: 'size-4' }), h('span', label)],
@@ -259,12 +265,12 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
     {
       id: 'size',
       header: () => t('Size'),
-      cell: ({ row }: any) => (row.original.type === 'object' ? formatBytes(row.original.Size) : ''),
+      cell: ({ row }: any) => (row.original.type === 'object' ? formatBytes(row.original.Size) : '-'),
     },
     {
       id: 'lastModified',
       header: () => t('Last Modified'),
-      cell: ({ row }: any) => (row.original.LastModified ? dayjs(row.original.LastModified).format('YYYY-MM-DD HH:mm:ss') : ''),
+      cell: ({ row }: any) => (row.original.LastModified ? dayjs(row.original.LastModified).format('YYYY-MM-DD HH:mm:ss') : '-'),
     },
     {
       id: 'actions',
@@ -342,34 +348,123 @@ const handleRefresh = () => {
   refresh()
 }
 
+const computeRelativeKey = (key: string) => {
+  if (!key) return ''
+  const base = prefix.value || ''
+  return base && key.startsWith(base) ? key.slice(base.length) : key
+}
+
+const collectKeysForDeletion = async (keys: string[]) => {
+  const rows = data.value ?? []
+  const rowMap = new Map(rows.map(item => [item.Key, item]))
+  const collected: string[] = []
+
+  for (const key of keys) {
+    if (!key) continue
+    const row = rowMap.get(key)
+    if (row?.type === 'prefix') {
+      await objectApi.mapAllFiles(bucketName.value, row.Key, fileKey => {
+        if (fileKey) {
+          collected.push(fileKey)
+        }
+      })
+    } else {
+      collected.push(key)
+    }
+  }
+
+  return Array.from(new Set(collected))
+}
+
 const downloadFile = async (key: string) => {
-  const url = bucketPath(['download', key])
-  window.open(url, '_blank')
+  if (!key) return
+  const loadingMsg = message.loading(t('Getting URL'), { duration: 0 })
+  try {
+    const url = await objectApi.getSignedUrl(key)
+    window.open(url, '_blank')
+  } catch (error: any) {
+    message.error(error?.message || t('Download Failed'))
+  } finally {
+    loadingMsg.destroy()
+  }
 }
 
 const downloadMultiple = async () => {
-  if (!checkedKeys.value.length) return
-
-  const zip = new JSZip()
-  const folderMap: Record<string, JSZip> = {}
-
-  for (const key of checkedKeys.value) {
-    const response = await fetch(bucketPath(['download', key]))
-    const blob = await response.blob()
-    const relativeKey = prefix.value ? key.replace(prefix.value, '') : key
-    const parts = relativeKey.split('/').filter(Boolean)
-    const fileName = parts.pop() ?? key
-    const folderPath = parts.join('/')
-
-    const folder = folderPath
-      ? folderMap[folderPath] || (folderMap[folderPath] = zip.folder(folderPath)!)
-      : zip
-
-    folder.file(fileName, blob)
+  if (!checkedKeys.value.length) {
+    message.warning(t('Please select at least one item'))
+    return
   }
 
+  const selectedRows = (data.value ?? []).filter(item => checkedKeys.value.includes(item.Key))
+  if (!selectedRows.length) {
+    message.warning(t('No files to download'))
+    return
+  }
+
+  const collecting = message.loading(t('Collecting files'), { duration: 0 })
+  const allFiles: { key: string; relative: string }[] = []
+
+  try {
+    for (const item of selectedRows) {
+      if (item.type === 'object') {
+        const relative = computeRelativeKey(item.Key)
+        allFiles.push({ key: item.Key, relative })
+      } else if (item.type === 'prefix') {
+        await objectApi.mapAllFiles(bucketName.value, item.Key, fileKey => {
+          const relative = computeRelativeKey(fileKey)
+          allFiles.push({ key: fileKey, relative })
+        })
+      }
+    }
+  } catch (error: any) {
+    collecting.destroy()
+    message.error(error?.message || t('Download Failed'))
+    return
+  }
+
+  collecting.destroy()
+
+  if (!allFiles.length) {
+    message.warning(t('No files to download'))
+    return
+  }
+
+  const zip = new JSZip()
+  let finished = 0
+  let destroyProgress: (() => void) | null | undefined
+
+  const updateProgress = () => {
+    if (destroyProgress) destroyProgress()
+    const handle = message.loading(`${t('Downloading files')} ${Math.round((finished / allFiles.length) * 100)}%`, {
+      duration: 0,
+    })
+    destroyProgress = handle.destroy
+  }
+
+  updateProgress()
+
+  try {
+    await Promise.all(
+      allFiles.map(async ({ key, relative }) => {
+        const url = await objectApi.getSignedUrl(key)
+        const response = await fetch(url)
+        const blob = await response.blob()
+        zip.file(relative || key, blob)
+        finished++
+        updateProgress()
+      })
+    )
+  } catch (error: any) {
+    if (destroyProgress) destroyProgress()
+    message.error(error?.message || t('Download Failed'))
+    return
+  }
+
+  if (destroyProgress) destroyProgress()
+
   const content = await zip.generateAsync({ type: 'blob' })
-  saveAs(content, `${bucketName.value}-${Date.now()}.zip`)
+  saveAs(content, `${bucketName.value || 'download'}.zip`)
+  message.success(t('Download ready'))
 }
 
 const confirmDelete = (keys: string[]) => {
@@ -383,14 +478,27 @@ const confirmDelete = (keys: string[]) => {
 }
 
 const handleDelete = async (keys: string[]) => {
-  deleteTaskStore.addKeys(keys, bucketName.value, prefix.value)
-  checkedKeys.value = []
-  table.resetRowSelection()
-  refresh()
+  try {
+    const targets = await collectKeysForDeletion(keys)
+    if (!targets.length) {
+      message.success(t('Delete Success'))
+    } else {
+      deleteTaskStore.addKeys(targets, bucketName.value)
+      message.success(t('Delete task created'))
+    }
+    checkedKeys.value = []
+    table.resetRowSelection()
+    refresh()
+  } catch (error: any) {
+    message.error(error?.message || t('Delete Failed'))
+  }
 }
 
 const handleBatchDelete = () => {
-  if (!checkedKeys.value.length) return
+  if (!checkedKeys.value.length) {
+    message.warning(t('Please select at least one item'))
+    return
+  }
   confirmDelete([...checkedKeys.value])
 }
 
diff --git a/components/object/task-stats.vue b/components/object/task-stats.vue
index c4bf725..47a0946 100644
--- a/components/object/task-stats.vue
+++ b/components/object/task-stats.vue
@@ -12,8 +12,9 @@
         }}
       </span>
     </div>
-    <div v-else>
-      {{ t('Task Completed', { completed: completed.length, failed: failed.length }) }}
+    <div v-else class="flex items-center gap-2">
+      <Icon name="ri:check-line" class="size-4 text-emerald-600" />
+      <span>{{ t('Task Completed', { completed: completed.length, failed: failed.length }) }}</span>
     </div>
   </Button>
 
diff --git a/components/object/upload/picker.vue b/components/object/upload/picker.vue
index 3682693..972a25a 100644
--- a/components/object/upload/picker.vue
+++ b/components/object/upload/picker.vue
@@ -58,7 +58,7 @@
         <!-- objects list / drag area -->
         <div class="rounded-md border-t transition" :class="isDragOver ? 'border-primary bg-primary/5' : ''" @dragenter.prevent="handleDragEnter" @dragover.prevent="handleDragOver"
           @dragleave.prevent="handleDragLeave" @drop.prevent="handleDrop">
-          <div v-if="!selectedItems.length" class="flex h-[42vh] flex-col items-center justify-center gap-4 p-6 text-center">
+          <div v-if="!selectedItems.length" class="flex h-[40vh] flex-col items-center justify-center gap-4 p-6 text-center">
             <Icon name="ri:cloud-upload-line" class="size-10 text-muted-foreground" />
             <p class="text-base font-medium text-muted-foreground">{{ t('No Selection') }}</p>
             <p class="max-w-[320px] text-sm text-muted-foreground">
@@ -68,7 +68,7 @@
           </div>
           <div v-else class="max-h-[42vh] overflow-auto">
             <table class="w-full text-sm">
-              <thead class="sticky top-0 bg-muted text-xs uppercase text-muted-foreground">
+              <thead class="sticky top-0 z-10 bg-muted text-xs uppercase text-muted-foreground">
                 <tr>
                   <th class="px-3 py-2 text-left font-medium">
                     {{ t('Name') }}
diff --git a/components/object/versions.vue b/components/object/versions.vue
index cbade33..1156ca8 100644
--- a/components/object/versions.vue
+++ b/components/object/versions.vue
@@ -1,28 +1,25 @@
 <template>
   <Modal v-model="visibleProxy" :title="t('Object Versions')" size="lg" :close-on-backdrop="false">
-  <Card class="shadow-none">
-      <CardContent class="space-y-4 p-6">
-        <DataTable :table="table" :is-loading="loading" :empty-title="t('No Versions')" />
-        <div class="flex justify-end">
-          <Button variant="outline" @click="closeModal">{{ t('Close') }}</Button>
-        </div>
-      </CardContent>
-    </Card>
+    <div class="space-y-4">
+      <DataTable :table="table" :is-loading="loading" :empty-title="t('No Versions')" />
+      <div class="flex justify-end">
+        <Button variant="outline" @click="closeModal">{{ t('Close') }}</Button>
+      </div>
+    </div>
   </Modal>
 </template>
 
-<script setup lang="tsx">
+<script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
 import DataTable from '@/components/data-table/data-table.vue'
 import { useDataTable } from '@/components/data-table/useDataTable'
 import Modal from '@/components/modal.vue'
-import { Card, CardContent } from '@/components/ui/card'
 import { GetObjectCommand } from '@aws-sdk/client-s3'
 import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
 import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
-import { computed, ref, watch } from 'vue'
+import { computed, h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{
@@ -72,19 +69,36 @@ const columns = computed<ColumnDef<any, any>[]>(() => [
   {
     id: 'actions',
     header: () => t('Action'),
-    cell: ({ row }: any) => (
-      <div class="flex gap-2">
-        <ActionButton variant="outline" size="sm" onClick={() => previewVersion(row.original)}>
-          {t('Preview')}
-        </ActionButton>
-        <ActionButton variant="outline" size="sm" onClick={() => downloadVersion(row.original)}>
-          {t('Download')}
-        </ActionButton>
-        <ActionButton variant="destructive" size="sm" onClick={() => deleteVersion(row.original)}>
-          {t('Delete')}
-        </ActionButton>
-      </div>
-    ),
+    cell: ({ row }: any) =>
+      h('div', { class: 'flex gap-2' }, [
+        h(
+          ActionButton,
+          {
+            variant: 'outline',
+            size: 'sm',
+            onClick: () => previewVersion(row.original),
+          },
+          () => t('Preview')
+        ),
+        h(
+          ActionButton,
+          {
+            variant: 'outline',
+            size: 'sm',
+            onClick: () => downloadVersion(row.original),
+          },
+          () => t('Download')
+        ),
+        h(
+          ActionButton,
+          {
+            variant: 'destructive',
+            size: 'sm',
+            onClick: () => deleteVersion(row.original),
+          },
+          () => t('Delete')
+        ),
+      ]),
   },
 ])
 
diff --git a/components/page.vue b/components/page.vue
index f9aaafa..b38ed76 100644
--- a/components/page.vue
+++ b/components/page.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-6 p-4">
+  <div class="flex flex-col gap-6">
     <slot />
   </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index eed721e..da30fa5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -12,8 +12,8 @@ const showSidebar = computed(() => !route.path.startsWith('/auth'))
   <SidebarProvider v-if="showSidebar">
     <AppSidebar />
     <SidebarInset>
-      <AppTopNav />
-      <div class="flex flex-1 flex-col gap-4 pt-0">
+      <div class="flex flex-1 flex-col gap-4 pt-0 p-6">
+        <AppTopNav />
         <slot />
       </div>
     </SidebarInset>
diff --git a/pages/browser/[bucket]/[[key]].vue b/pages/browser/[bucket]/[[key]].vue
index 9ed43c5..0818917 100644
--- a/pages/browser/[bucket]/[[key]].vue
+++ b/pages/browser/[bucket]/[[key]].vue
@@ -18,7 +18,6 @@ import { useRoute } from '#app'
 import { endsWith } from 'lodash'
 import { joinRelativeURL } from 'ufo'
 import { computed } from 'vue'
-import { resolveRouteParam } from '~/utils/functions'
 
 // 从路由参数中获取 bucketName, pageSize, continuationToken
 const route = useRoute()
@@ -27,8 +26,8 @@ const message = useMessage()
 const router = useRouter()
 
 // bucketName 和 pageSize 来自路由
-const bucketName = computed(() => resolveRouteParam(route.params.bucket))
-// 检测bucketName是否存在，使用 head bucket 接口,如果不存在跳转到/browser
+const bucketName = computed(() => route.params.bucket as string)
+
 const isBucketExist = () => {
   return useBucket({ region: route.params.region as string })
     .headBucket(bucketName.value)
@@ -44,7 +43,7 @@ const isBucketExist = () => {
 isBucketExist()
 
 // 当前路径的前缀, example: 'folder1/folder2/'
-const key = computed(() => resolveRouteParam(route.params.key))
+const key = computed(() => decodeURIComponent(route.params.key as string))
 
 const bucketPath = (path: string | Array<string> = '') => {
   if (Array.isArray(path)) {
@@ -58,5 +57,5 @@ const bucketPath = (path: string | Array<string> = '') => {
   return joinRelativeURL('/browser', encodeURIComponent(bucketName.value), encodeURIComponent(path))
 }
 
-const isObjectList = computed(() => key.value === '' || key.value.endsWith('/'))
+const isObjectList = key.value.endsWith('/') || key.value === ''
 </script>
diff --git a/tests/utils/functions.test.ts b/tests/utils/functions.test.ts
index 016f7a7..1d45ea5 100644
--- a/tests/utils/functions.test.ts
+++ b/tests/utils/functions.test.ts
@@ -1,190 +1,153 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it } from 'vitest'
 import {
   formatBytes,
   getBytes,
   makeRandomString,
-  niceBytes,
-  resolveRouteParam,
-  safeDecodeURIComponent,
-} from '../../utils/functions';
+  niceBytes
+} from '../../utils/functions'
 
 describe('formatBytes', () => {
   it('should format bytes correctly', () => {
-    expect(formatBytes(0)).toBe('0 B');
-    expect(formatBytes(1024)).toBe('1.0 KiB');
-    expect(formatBytes(1024 * 1024)).toBe('1.0 MiB');
-    expect(formatBytes(1024 * 1024 * 1024)).toBe('1.0 GiB');
-  });
+    expect(formatBytes(0)).toBe('0 B')
+    expect(formatBytes(1024)).toBe('1.0 KiB')
+    expect(formatBytes(1024 * 1024)).toBe('1.0 MiB')
+    expect(formatBytes(1024 * 1024 * 1024)).toBe('1.0 GiB')
+  })
 
   it('should handle fractional values', () => {
-    expect(formatBytes(1536)).toBe('1.5 KiB'); // 1.5 KiB
-    expect(formatBytes(1024 * 1024 * 2.5)).toBe('2.5 MiB');
-  });
+    expect(formatBytes(1536)).toBe('1.5 KiB') // 1.5 KiB
+    expect(formatBytes(1024 * 1024 * 2.5)).toBe('2.5 MiB')
+  })
 
   it('should format using K8s units when specified', () => {
-    expect(formatBytes(1024, true)).toBe('1.0 Ki');
-    expect(formatBytes(1024 * 1024, true)).toBe('1.0 Mi');
-    expect(formatBytes(1024 * 1024 * 1024, true)).toBe('1.0 Gi');
-  });
+    expect(formatBytes(1024, true)).toBe('1.0 Ki')
+    expect(formatBytes(1024 * 1024, true)).toBe('1.0 Mi')
+    expect(formatBytes(1024 * 1024 * 1024, true)).toBe('1.0 Gi')
+  })
 
   it('should handle large values', () => {
-    const terabyte = 1024 * 1024 * 1024 * 1024;
-    expect(formatBytes(terabyte)).toBe('1.0 TiB');
+    const terabyte = 1024 * 1024 * 1024 * 1024
+    expect(formatBytes(terabyte)).toBe('1.0 TiB')
 
-    const petabyte = terabyte * 1024;
-    expect(formatBytes(petabyte)).toBe('1.0 PiB');
-  });
+    const petabyte = terabyte * 1024
+    expect(formatBytes(petabyte)).toBe('1.0 PiB')
+  })
 
   it('should handle negative values gracefully', () => {
     // 实际行为：负数的 Math.log 为 NaN，l 会是 0，所以总是格式化为 B 单位
-    expect(formatBytes(-1)).toBe('-1.0 B');
-    expect(formatBytes(-1024)).toBe('-1024.0 B');
-  });
+    expect(formatBytes(-1)).toBe('-1.0 B')
+    expect(formatBytes(-1024)).toBe('-1024.0 B')
+  })
 
   it('should round to one decimal place', () => {
-    expect(formatBytes(1234)).toBe('1.2 KiB');
-    expect(formatBytes(1587)).toBe('1.5 KiB');
-  });
-});
+    expect(formatBytes(1234)).toBe('1.2 KiB')
+    expect(formatBytes(1587)).toBe('1.5 KiB')
+  })
+})
 
 describe('niceBytes', () => {
   it('should convert string bytes to nice format', () => {
-    expect(niceBytes('0')).toBe('0 B');
-    expect(niceBytes('1024')).toBe('1.0 KiB');
-    expect(niceBytes('1048576')).toBe('1.0 MiB');
-  });
+    expect(niceBytes('0')).toBe('0 B')
+    expect(niceBytes('1024')).toBe('1.0 KiB')
+    expect(niceBytes('1048576')).toBe('1.0 MiB')
+  })
 
   it('should handle invalid string input', () => {
-    expect(niceBytes('invalid')).toBe('0 B');
-    expect(niceBytes('')).toBe('0 B');
-  });
+    expect(niceBytes('invalid')).toBe('0 B')
+    expect(niceBytes('')).toBe('0 B')
+  })
 
   it('should use K8s units when specified', () => {
-    expect(niceBytes('1024', true)).toBe('1.0 Ki');
-    expect(niceBytes('1048576', true)).toBe('1.0 Mi');
-  });
+    expect(niceBytes('1024', true)).toBe('1.0 Ki')
+    expect(niceBytes('1048576', true)).toBe('1.0 Mi')
+  })
 
   it('should parse numeric strings with leading zeros', () => {
-    expect(niceBytes('01024')).toBe('1.0 KiB');
-  });
-});
+    expect(niceBytes('01024')).toBe('1.0 KiB')
+  })
+})
 
 describe('getBytes', () => {
   it('should convert value and unit to bytes string', () => {
-    expect(getBytes('1', 'B')).toBe('1');
-    expect(getBytes('1', 'KiB')).toBe('1024');
-    expect(getBytes('1', 'MiB')).toBe('1048576');
-    expect(getBytes('1', 'GiB')).toBe('1073741824');
-  });
+    expect(getBytes('1', 'B')).toBe('1')
+    expect(getBytes('1', 'KiB')).toBe('1024')
+    expect(getBytes('1', 'MiB')).toBe('1048576')
+    expect(getBytes('1', 'GiB')).toBe('1073741824')
+  })
 
   it('should handle fractional values', () => {
-    expect(getBytes('1.5', 'KiB')).toBe('1536');
-    expect(getBytes('2.5', 'MiB')).toBe('2621440');
-  });
+    expect(getBytes('1.5', 'KiB')).toBe('1536')
+    expect(getBytes('2.5', 'MiB')).toBe('2621440')
+  })
 
   it('should handle K8s units when specified', () => {
-    expect(getBytes('1', 'Ki', true)).toBe('1024');
-    expect(getBytes('1', 'Mi', true)).toBe('1048576');
-    expect(getBytes('1', 'Gi', true)).toBe('1073741824');
-  });
+    expect(getBytes('1', 'Ki', true)).toBe('1024')
+    expect(getBytes('1', 'Mi', true)).toBe('1048576')
+    expect(getBytes('1', 'Gi', true)).toBe('1073741824')
+  })
 
   it('should return "0" for invalid units', () => {
-    expect(getBytes('1', 'InvalidUnit')).toBe('0');
-    expect(getBytes('1', 'KB')).toBe('0');
-  });
+    expect(getBytes('1', 'InvalidUnit')).toBe('0')
+    expect(getBytes('1', 'KB')).toBe('0')
+  })
 
   it('should handle all valid units', () => {
-    expect(getBytes('1', 'B')).toBe('1');
-    expect(getBytes('1', 'KiB')).toBe('1024');
-    expect(getBytes('1', 'MiB')).toBe('1048576');
-    expect(getBytes('1', 'GiB')).toBe('1073741824');
-    expect(getBytes('1', 'TiB')).toBe('1099511627776');
-  });
+    expect(getBytes('1', 'B')).toBe('1')
+    expect(getBytes('1', 'KiB')).toBe('1024')
+    expect(getBytes('1', 'MiB')).toBe('1048576')
+    expect(getBytes('1', 'GiB')).toBe('1073741824')
+    expect(getBytes('1', 'TiB')).toBe('1099511627776')
+  })
 
   it('should handle zero value', () => {
-    expect(getBytes('0', 'KiB')).toBe('0');
-    expect(getBytes('0', 'MiB')).toBe('0');
-  });
-});
+    expect(getBytes('0', 'KiB')).toBe('0')
+    expect(getBytes('0', 'MiB')).toBe('0')
+  })
+})
 
 describe('makeRandomString', () => {
   it('should generate string with default length 20', () => {
-    const result = makeRandomString();
-    expect(result).toHaveLength(20);
-  });
+    const result = makeRandomString()
+    expect(result).toHaveLength(20)
+  })
 
   it('should generate string with specified length', () => {
-    expect(makeRandomString(10)).toHaveLength(10);
-    expect(makeRandomString(5)).toHaveLength(5);
-    expect(makeRandomString(50)).toHaveLength(50);
-  });
+    expect(makeRandomString(10)).toHaveLength(10)
+    expect(makeRandomString(5)).toHaveLength(5)
+    expect(makeRandomString(50)).toHaveLength(50)
+  })
 
   it('should generate string with only alphanumeric characters', () => {
-    const result = makeRandomString(100);
-    expect(result).toMatch(/^[a-zA-Z0-9]+$/);
-  });
+    const result = makeRandomString(100)
+    expect(result).toMatch(/^[a-zA-Z0-9]+$/)
+  })
 
   it('should generate different strings on multiple calls', () => {
-    const results = new Set();
+    const results = new Set()
     for (let i = 0; i < 100; i++) {
-      results.add(makeRandomString(20));
+      results.add(makeRandomString(20))
     }
     // 100 个随机字符串应该都不相同（理论上有极小概率重复）
-    expect(results.size).toBeGreaterThan(95);
-  });
+    expect(results.size).toBeGreaterThan(95)
+  })
 
   it('should handle length of 1', () => {
-    const result = makeRandomString(1);
-    expect(result).toHaveLength(1);
-    expect(result).toMatch(/^[a-zA-Z0-9]$/);
-  });
+    const result = makeRandomString(1)
+    expect(result).toHaveLength(1)
+    expect(result).toMatch(/^[a-zA-Z0-9]$/)
+  })
 
   it('should handle length of 0', () => {
-    const result = makeRandomString(0);
-    expect(result).toBe('');
-  });
+    const result = makeRandomString(0)
+    expect(result).toBe('')
+  })
 
   it('should generate strings within the character set range', () => {
-    const validChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
-    const result = makeRandomString(1000);
+    const validChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
+    const result = makeRandomString(1000)
 
     for (const char of result) {
-      expect(validChars).toContain(char);
+      expect(validChars).toContain(char)
     }
-  });
-});
-
-describe('safeDecodeURIComponent', () => {
-  it('should decode a valid encoded value', () => {
-    expect(safeDecodeURIComponent('folder%20name')).toBe('folder name');
-  });
-
-  it('should return the original value when decoding fails', () => {
-    expect(safeDecodeURIComponent('folder%test')).toBe('folder%test');
-  });
-
-  it('should handle empty-like values gracefully', () => {
-    expect(safeDecodeURIComponent('')).toBe('');
-    expect(safeDecodeURIComponent(undefined)).toBe('');
-    expect(safeDecodeURIComponent(null)).toBe('');
-  });
-});
-
-describe('resolveRouteParam', () => {
-  it('should decode a single string param', () => {
-    expect(resolveRouteParam('path%2Fto%2Ffile')).toBe('path/to/file');
-  });
-
-  it('should return raw string when decoding fails', () => {
-    expect(resolveRouteParam('folder%test')).toBe('folder%test');
-  });
-
-  it('should join array params and decode them', () => {
-    expect(resolveRouteParam(['nested', 'path%2Fvalue'])).toBe('nested/path/value');
-  });
-
-  it('should return empty string for undefined or null', () => {
-    expect(resolveRouteParam(undefined)).toBe('');
-    expect(resolveRouteParam(null)).toBe('');
-  });
-});
+  })
+})
diff --git a/utils/functions.ts b/utils/functions.ts
index f05ab42..04042fd 100644
--- a/utils/functions.ts
+++ b/utils/functions.ts
@@ -1,6 +1,6 @@
 // 定义单位
-const UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-const K8S_UNITS = ['B', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
+const UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+const K8S_UNITS = ['B', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi']
 
 /**
  * 将字节数转换为可读格式
@@ -9,8 +9,8 @@ const K8S_UNITS = ['B', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'];
  * @returns {string} - 可读格式的字节数
  */
 export function niceBytes(x: string, isK8sUnits: boolean = false): string {
-  const n = Number.parseInt(x, 10) || 0;
-  return formatBytes(n, isK8sUnits);
+  const n = Number.parseInt(x, 10) || 0
+  return formatBytes(n, isK8sUnits)
 }
 
 /**
@@ -20,13 +20,13 @@ export function niceBytes(x: string, isK8sUnits: boolean = false): string {
  * @returns {string} - 可读格式的字节数
  */
 export function formatBytes(n: number, isK8sUnits: boolean = false): string {
-  const l = Math.floor(Math.log(n) / Math.log(1024)) || 0;
+  const l = Math.floor(Math.log(n) / Math.log(1024)) || 0
 
   if (l < 0) {
-    return '0 B';
+    return '0 B'
   }
-  const value = n / 1024 ** l;
-  return `${value.toFixed(1)} ${isK8sUnits ? K8S_UNITS[l] : UNITS[l]}`;
+  const value = n / 1024 ** l
+  return `${value.toFixed(1)} ${isK8sUnits ? K8S_UNITS[l] : UNITS[l]}`
 }
 
 /**
@@ -37,7 +37,7 @@ export function formatBytes(n: number, isK8sUnits: boolean = false): string {
  * @returns {string} - 字节数的字符串表示
  */
 export function getBytes(value: string, unit: string, fromK8s: boolean = false): string {
-  return convertToBytes(value, unit, fromK8s).toString(10);
+  return convertToBytes(value, unit, fromK8s).toString(10)
 }
 
 /**
@@ -48,15 +48,15 @@ export function getBytes(value: string, unit: string, fromK8s: boolean = false):
  * @returns {number} - 字节数
  */
 function convertToBytes(value: string, unit: string, fromK8s: boolean = false): number {
-  const vl: number = Number.parseFloat(value);
-  const unitsTake = fromK8s ? K8S_UNITS : UNITS;
-  const powFactor = unitsTake.findIndex(element => element === unit);
+  const vl: number = Number.parseFloat(value)
+  const unitsTake = fromK8s ? K8S_UNITS : UNITS
+  const powFactor = unitsTake.findIndex(element => element === unit)
 
   if (powFactor === -1) {
-    return 0;
+    return 0
   }
 
-  return vl * 1024 ** powFactor;
+  return vl * 1024 ** powFactor
 }
 
 /**
@@ -65,56 +65,23 @@ function convertToBytes(value: string, unit: string, fromK8s: boolean = false):
  * @returns
  */
 export function makeRandomString(length = 20): string {
-  let initstr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+  let initstr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
   // 将字符串转换为数组
-  const arr = initstr.split('');
+  const arr = initstr.split('')
 
   // 打乱数组
   for (let i = arr.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    const current = arr[i];
-    const swapWith = arr[j];
+    const j = Math.floor(Math.random() * (i + 1))
+    const current = arr[i]
+    const swapWith = arr[j]
     if (current !== undefined && swapWith !== undefined) {
-      arr[i] = swapWith;
-      arr[j] = current;
+      arr[i] = swapWith
+      arr[j] = current
     }
   }
 
   // 将数组转换回字符串
-  initstr = arr.join('');
+  initstr = arr.join('')
 
-  return initstr.slice(0, length);
-}
-
-/**
- * Safely decodes a URI component without throwing on invalid sequences.
- * If decoding fails, the original value is returned unchanged.
- */
-export function safeDecodeURIComponent(value?: string | null): string {
-  if (value === undefined || value === null || value === '') {
-    return value ?? '';
-  }
-
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-
-/**
- * Normalizes a route parameter that may be encoded or provided as an array.
- * Ensures we always return a usable string and avoid decode errors for malformed values.
- */
-export function resolveRouteParam(param: string | string[] | null | undefined): string {
-  if (param === undefined || param === null) {
-    return '';
-  }
-
-  const raw = Array.isArray(param) ? param.join('/') : String(param);
-  if (!raw) {
-    return '';
-  }
-
-  return safeDecodeURIComponent(raw);
+  return initstr.slice(0, length)
 }