diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index de8ecee..497d02c 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -28,7 +28,7 @@
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
+  --radius: 0.25rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
diff --git a/components/access-keys/change-password.vue b/components/access-keys/change-password.vue
index 2e28bbf..030e54b 100644
--- a/components/access-keys/change-password.vue
+++ b/components/access-keys/change-password.vue
@@ -3,7 +3,7 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import Spinner from '@/components/ui/spinner/Spinner.vue'
 
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -107,7 +107,7 @@ async function submitForm() {
     size="md"
     :close-on-backdrop="false"
   >
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="grid gap-2">
         <Label for="password-current">{{ t('Current Password') }}</Label>
         <Input
@@ -147,7 +147,7 @@ async function submitForm() {
           {{ errors.re_new_secret_key }}
         </p>
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
diff --git a/components/access-keys/edit-item.vue b/components/access-keys/edit-item.vue
index e32f3e4..973351a 100644
--- a/components/access-keys/edit-item.vue
+++ b/components/access-keys/edit-item.vue
@@ -3,9 +3,11 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import Spinner from '@/components/ui/spinner/Spinner.vue'
 
-import { AppCard, AppModal, AppSwitch, AppTextarea } from '@/components/app'
+import { AppModal } from '@/components/app'
 import AppDateTimePicker from '@/components/app/AppDateTimePicker.vue'
 import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
 import dayjs from 'dayjs'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -97,7 +99,7 @@ async function submitForm() {
     size="lg"
     :close-on-backdrop="false"
   >
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="grid gap-2">
         <Label>{{ t('Access Key') }}</Label>
         <Input v-model="formModel.accesskey" disabled />
@@ -120,14 +122,14 @@ async function submitForm() {
 
       <div class="grid gap-2">
         <Label>{{ t('Description') }}</Label>
-        <AppTextarea v-model="formModel.description" :rows="3" />
+        <Textarea v-model="formModel.description" :rows="3" />
       </div>
 
       <div class="flex items-center justify-between rounded-md border p-3">
         <span class="text-sm font-medium">{{ t('Status') }}</span>
-        <AppSwitch v-model="statusBoolean" />
+        <Switch v-model:checked="statusBoolean" />
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
diff --git a/components/access-keys/new-item.vue b/components/access-keys/new-item.vue
index ab1b121..ad4b9b2 100644
--- a/components/access-keys/new-item.vue
+++ b/components/access-keys/new-item.vue
@@ -5,7 +5,7 @@
     size="lg"
     :close-on-backdrop="false"
   >
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="grid gap-2">
         <Label for="create-access-key">{{ t('Access Key') }}</Label>
         <Input id="create-access-key" v-model="formModel.accessKey" autocomplete="off" />
@@ -37,7 +37,7 @@
 
       <div class="grid gap-2">
         <Label for="create-description">{{ t('Description') }}</Label>
-        <AppTextarea id="create-description" v-model="formModel.description" :rows="3" />
+        <Textarea id="create-description" v-model="formModel.description" :rows="3" />
       </div>
 
       <div class="flex items-start justify-between gap-3 rounded-md border p-3">
@@ -47,14 +47,14 @@
             {{ t('Automatically inherit the main account policy when enabled.') }}
           </p>
         </div>
-        <AppSwitch v-model="formModel.impliedPolicy" />
+        <Switch v-model:checked="formModel.impliedPolicy" />
       </div>
 
       <div v-if="!formModel.impliedPolicy" class="grid gap-2">
         <Label>{{ t('Current user policy') }}</Label>
         <json-editor v-model="formModel.policy" />
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -75,9 +75,11 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import Spinner from '@/components/ui/spinner/Spinner.vue'
 
-import { AppCard, AppModal, AppSwitch, AppTextarea } from '@/components/app'
+import { AppModal } from '@/components/app'
 import AppDateTimePicker from '@/components/app/AppDateTimePicker.vue'
 import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { makeRandomString } from '~/utils/functions'
diff --git a/components/app/AppSidebar.vue b/components/app-sidebar.vue
similarity index 93%
rename from components/app/AppSidebar.vue
rename to components/app-sidebar.vue
index 70f6f89..3e0a61b 100644
--- a/components/app/AppSidebar.vue
+++ b/components/app-sidebar.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { Icon } from '#components'
-import LanguageSwitcher from '@/components/language-switcher.vue'
-import ThemeSwitcher from '@/components/theme-switcher.vue'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import {
@@ -21,7 +19,6 @@ import {
   SidebarSeparator,
   useSidebar,
 } from '@/components/ui/sidebar'
-import UserDropdown from '@/components/user-dropdown.vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
@@ -95,7 +92,7 @@ const getLabel = (item: NavItem) => t(item.label)
     <SidebarContent>
       <ScrollArea class="flex-1 pr-1">
         <div class="flex flex-col gap-4">
-          <SidebarGroup v-for="(group, groupIndex) in navGroups" :key="groupIndex" class="gap-1">
+          <SidebarGroup v-for="(group, groupIndex) in navGroups" :key="groupIndex" class="gap-4">
             <SidebarGroupContent>
               <SidebarMenu>
                 <template v-for="item in group" :key="item.label">
@@ -154,13 +151,6 @@ const getLabel = (item: NavItem) => t(item.label)
     </SidebarContent>
 
     <SidebarFooter class="mt-auto flex flex-col gap-3 px-2 pb-2">
-      <div class="pt-3">
-        <div class="flex flex-col gap-2">
-          <LanguageSwitcher />
-          <ThemeSwitcher />
-        </div>
-      </div>
-      <UserDropdown :is-collapsed="isCollapsed" />
     </SidebarFooter>
 
     <SidebarRail />
diff --git a/components/app-top-nav.vue b/components/app-top-nav.vue
new file mode 100644
index 0000000..282d693
--- /dev/null
+++ b/components/app-top-nav.vue
@@ -0,0 +1,13 @@
+<template>
+  <header
+    class="flex h-16 shrink-0 items-center gap-2 justify-between border-b bg-background px-4 transition-[height] ease-linear backdrop-blur group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+    <div class="flex items-center gap-2">
+      <SidebarTrigger class="-ml-1" />
+    </div>
+    <div class="flex items-center gap-2">
+      <LanguageSwitcher />
+      <ThemeSwitcher />
+      <UserDropdown />
+    </div>
+  </header>
+</template>
diff --git a/components/app/AppBadge.vue b/components/app/AppBadge.vue
deleted file mode 100644
index b52d846..0000000
--- a/components/app/AppBadge.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import type { BadgeVariants } from '@/components/ui/badge'
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-
-type AppBadgeVariant = 'default' | 'primary' | 'secondary' | 'outline' | 'danger'
-
-const variantMap: Record<AppBadgeVariant, BadgeVariants['variant']> = {
-  default: 'secondary',
-  primary: 'default',
-  secondary: 'secondary',
-  outline: 'outline',
-  danger: 'destructive',
-}
-
-const props = withDefaults(
-  defineProps<{
-    variant?: AppBadgeVariant
-    class?: HTMLAttributes['class']
-  }>(),
-  {
-    variant: 'default',
-    class: undefined,
-  }
-)
-</script>
-
-<template>
-  <Badge :variant="variantMap[variant]" :class="cn('uppercase tracking-wide', props.class)">
-    <slot />
-  </Badge>
-</template>
diff --git a/components/app/AppProgress.vue b/components/app/AppProgress.vue
deleted file mode 100644
index c54fe8c..0000000
--- a/components/app/AppProgress.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { reactiveOmit } from '@vueuse/core'
-import type { HTMLAttributes } from 'vue'
-import { computed } from 'vue'
-import { ProgressIndicator, ProgressRoot, type ProgressRootProps } from 'reka-ui'
-import { cn } from '@/lib/utils'
-
-const props = withDefaults(
-  defineProps<
-    {
-      value?: number
-      processing?: boolean
-      height?: number | string
-      class?: HTMLAttributes['class']
-    } & ProgressRootProps
-  >(),
-  {
-    value: 0,
-    processing: false,
-  }
-)
-
-const delegatedProps = reactiveOmit(props, 'value', 'processing', 'height', 'class')
-
-const normalizedValue = computed(() => {
-  if (props.value === undefined || Number.isNaN(props.value)) return 0
-  return Math.min(100, Math.max(0, props.value))
-})
-
-const heightStyle = computed(() => {
-  if (!props.height) return undefined
-  if (typeof props.height === 'number') {
-    return `${props.height}px`
-  }
-  return props.height
-})
-</script>
-
-<template>
-  <ProgressRoot
-    v-bind="delegatedProps"
-    :model-value="normalizedValue"
-    :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', props.class)"
-    :style="heightStyle ? { height: heightStyle } : undefined"
-  >
-    <ProgressIndicator
-      :class="cn(
-        'h-full w-full flex-1 bg-primary transition-all',
-        props.processing && 'animate-[progress-indeterminate_1.2s_ease_infinite]'
-      )"
-      :style="`transform: translateX(-${100 - normalizedValue}%);`"
-    />
-  </ProgressRoot>
-</template>
-
-<style scoped>
-@keyframes progress-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(-50%);
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-</style>
diff --git a/components/app/AppSwitch.vue b/components/app/AppSwitch.vue
deleted file mode 100644
index 29afb7c..0000000
--- a/components/app/AppSwitch.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { Switch } from '@/components/ui/switch'
-import type { HTMLAttributes } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    class?: HTMLAttributes['class']
-  }>(),
-  {
-    disabled: false,
-    class: undefined,
-  }
-)
-
-const modelValue = defineModel<boolean>({ default: false })
-
-const handleCheckedChange = (value: boolean) => {
-  modelValue.value = value
-}
-</script>
-
-<template>
-  <Switch
-    :checked="modelValue"
-    :disabled="disabled"
-    :class="props.class"
-    @update:checked="handleCheckedChange"
-  />
-</template>
diff --git a/components/app/AppTabs.vue b/components/app/AppTabs.vue
deleted file mode 100644
index 37c9689..0000000
--- a/components/app/AppTabs.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '#components'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { watch } from 'vue'
-import type { HTMLAttributes } from 'vue'
-
-interface TabItem {
-  key: string
-  label: string
-  icon?: string
-}
-
-const props = defineProps<{
-  tabs: TabItem[]
-  modelValue?: string
-  class?: HTMLAttributes['class']
-}>()
-
-const value = defineModel<string>()
-
-watch(
-  () => props.tabs,
-  tabs => {
-    if (!value.value && tabs?.length) {
-      value.value = tabs[0]?.key ?? ''
-    }
-  },
-  { immediate: true, deep: true }
-)
-</script>
-
-<template>
-  <Tabs v-model="value" class="flex flex-col gap-4">
-    <TabsList class="w-full justify-start overflow-x-auto">
-    <TabsTrigger
-      v-for="tab in tabs"
-      :key="tab.key"
-      :value="tab.key"
-      class="capitalize"
-    >
-        <Icon v-if="tab.icon" :name="tab.icon" class="mr-2 size-4" />
-        {{ tab.label }}
-      </TabsTrigger>
-    </TabsList>
-    <TabsContent
-      v-for="tab in tabs"
-      :key="tab.key"
-      :value="tab.key"
-      class="mt-0"
-    >
-      <slot :name="tab.key" />
-    </TabsContent>
-  </Tabs>
-</template>
diff --git a/components/app/AppTag.vue b/components/app/AppTag.vue
index d01b66c..50fe148 100644
--- a/components/app/AppTag.vue
+++ b/components/app/AppTag.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import AppBadge from './AppBadge.vue'
 import { cn } from '@/lib/utils'
 import type { HTMLAttributes } from 'vue'
 
@@ -26,7 +25,7 @@ const props = withDefaults(
 </script>
 
 <template>
-  <AppBadge variant="outline" :class="cn('capitalize', toneClass[tone], props.class)">
+  <Badge variant="outline" :class="cn('lowercase border-none', toneClass[tone], props.class)">
     <slot />
-  </AppBadge>
+  </Badge>
 </template>
diff --git a/components/app/AppTextarea.vue b/components/app/AppTextarea.vue
deleted file mode 100644
index 0633981..0000000
--- a/components/app/AppTextarea.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import { Textarea } from '@/components/ui/textarea'
-import { cn } from '@/lib/utils'
-import type { HTMLAttributes } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    placeholder?: string
-    rows?: number
-    disabled?: boolean
-    class?: HTMLAttributes['class']
-  }>(),
-  {
-    placeholder: '',
-    rows: 4,
-    disabled: false,
-    class: undefined,
-  }
-)
-
-const modelValue = defineModel<string | number | undefined>({ default: '' })
-</script>
-
-<template>
-  <Textarea
-    v-model="modelValue"
-    :placeholder="placeholder"
-    :rows="rows"
-    :disabled="disabled"
-    :class="cn('resize-y', props.class)"
-  />
-</template>
diff --git a/components/app/index.ts b/components/app/index.ts
index 503de1f..7af125e 100644
--- a/components/app/index.ts
+++ b/components/app/index.ts
@@ -1,18 +1,12 @@
 export { default as AppCard } from './AppCard.vue'
-export { default as AppBadge } from './AppBadge.vue'
-export { default as AppTag } from './AppTag.vue'
-export { default as AppTextarea } from './AppTextarea.vue'
-export { default as AppSelect } from './AppSelect.vue'
-export { default as AppSwitch } from './AppSwitch.vue'
 export { default as AppCheckbox } from './AppCheckbox.vue'
 export { default as AppCheckboxGroup } from './AppCheckboxGroup.vue'
-export { default as AppRadioGroup } from './AppRadioGroup.vue'
 export { default as AppDateTimePicker } from './AppDateTimePicker.vue'
-export { default as AppModal } from './AppModal.vue'
 export { default as AppDrawer } from './AppDrawer.vue'
 export { default as AppEmpty } from './AppEmpty.vue'
-export { default as AppTabs } from './AppTabs.vue'
-export { default as AppUploadZone } from './AppUploadZone.vue'
-export { default as AppProgress } from './AppProgress.vue'
+export { default as AppModal } from './AppModal.vue'
+export { default as AppRadioGroup } from './AppRadioGroup.vue'
+export { default as AppSelect } from './AppSelect.vue'
 export { default as AppSpinner } from './AppSpinner.vue'
-export * from './data-table'
+export { default as AppTag } from './AppTag.vue'
+export { default as AppUploadZone } from './AppUploadZone.vue'
diff --git a/components/buckets/info.vue b/components/buckets/info.vue
index 7bcbe04..00686fe 100644
--- a/components/buckets/info.vue
+++ b/components/buckets/info.vue
@@ -65,17 +65,17 @@
             <p class="text-sm font-medium text-foreground">{{ t('Object Lock') }}</p>
             <AppSpinner v-if="objectLockLoading" size="sm" />
           </div>
-          <AppSwitch v-model="lockStatus" disabled />
+          <Switch v-model:checked="lockStatus" disabled />
         </div>
         <div class="flex items-center justify-between gap-3">
           <div class="flex items-center gap-2">
             <p class="text-sm font-medium text-foreground">{{ t('Version Control') }}</p>
             <AppSpinner v-if="statusLoading" size="sm" />
           </div>
-          <AppSwitch
-            :model-value="versioningStatus === 'Enabled'"
+          <Switch
+            :checked="versioningStatus === 'Enabled'"
             :disabled="lockStatus || statusLoading"
-            @update:model-value="value => handleVersionToggle(value)"
+            @update:checked="value => handleVersionToggle(value)"
           />
         </div>
       </AppCard>
@@ -239,7 +239,8 @@
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppDrawer, AppModal, AppRadioGroup, AppSelect, AppSwitch, AppSpinner } from '@/components/app'
+import { AppCard, AppDrawer, AppModal, AppRadioGroup, AppSelect, AppSpinner } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import { Icon } from '#components'
 import { computed, ref, watch } from 'vue'
diff --git a/components/buckets/new-form.vue b/components/buckets/new-form.vue
index ce086cb..c24cbec 100644
--- a/components/buckets/new-form.vue
+++ b/components/buckets/new-form.vue
@@ -1,82 +1,57 @@
 <template>
   <AppModal v-model="modalVisible" :title="t('Create Bucket')" size="lg" :close-on-backdrop="false">
-    <AppCard padded class="space-y-6">
+    <div class="space-y-6">
       <div class="space-y-2">
         <Label for="bucket-name">{{ t('Please enter name') }}</Label>
-        <Input
-          id="bucket-name"
-          v-model="objectKey"
-          autocomplete="off"
-          :class="[
-            'w-full',
-            showNameError && 'border-destructive focus-visible:ring-destructive',
-          ]"
-        />
+        <Input id="bucket-name" v-model="objectKey" autocomplete="off" :class="[
+          'w-full',
+          showNameError && 'border-destructive focus-visible:ring-destructive',
+        ]" />
       </div>
 
       <div class="space-y-2">
-        <Label>{{ t('Version') }}</Label>
-        <div class="flex items-center justify-between rounded-md border p-3">
-          <AppSwitch v-model="version" />
+        <div class="flex items-center justify-between">
+          <Label>{{ t('Version') }}</Label>
+          <Switch v-model:checked="version" />
         </div>
       </div>
 
       <div class="space-y-2">
-        <Label>{{ t('Object Lock') }}</Label>
-        <div class="flex items-center justify-between rounded-md border p-3">
-          <AppSwitch v-model="objectLock" />
+        <div class="flex items-center justify-between">
+          <Label>{{ t('Object Lock') }}</Label>
+          <Switch v-model:checked="objectLock" />
         </div>
       </div>
 
       <div v-if="objectLock" class="space-y-4 rounded-lg border p-4">
         <div class="flex items-center justify-between">
-          <div>
-            <p class="text-sm font-medium text-foreground">{{ t('Retention') }}</p>
-          </div>
-          <AppSwitch v-model="retentionEnabled" />
+          <Label>{{ t('Retention') }}</Label>
+          <Switch v-model:checked="retentionEnabled" />
         </div>
 
         <div v-if="retentionEnabled" class="space-y-4">
           <div class="space-y-2">
             <Label>{{ t('Retention Mode') }}</Label>
-            <AppRadioGroup
-              v-model="retentionMode"
-              :options="retentionModeOptions"
-              class="grid gap-2 sm:grid-cols-2"
-              item-class="h-full"
-            />
+            <AppRadioGroup v-model="retentionMode" :options="retentionModeOptions" class="grid gap-2 sm:grid-cols-2" item-class="h-full" />
           </div>
 
           <div class="space-y-2">
             <Label>{{ t('Validity') }}</Label>
             <div class="flex flex-col gap-2 sm:flex-row">
-              <Input
-                v-model="retentionPeriod"
-                type="number"
-                class="sm:w-32"
-              />
-              <AppSelect
-                v-model="retentionUnit"
-                :options="retentionUnitOptions"
-                class="sm:w-32"
-              />
+              <Input v-model="retentionPeriod" type="number" class="sm:w-32" />
+              <AppSelect v-model="retentionUnit" :options="retentionUnitOptions" class="sm:w-32" />
             </div>
           </div>
         </div>
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
         <Button variant="outline" @click="closeModal">
           {{ t('Cancel') }}
         </Button>
-        <Button
-          variant="default"
-          :loading="creating"
-          :disabled="isSubmitDisabled"
-          @click="handleCreateBucket"
-        >
+        <Button variant="default" :loading="creating" :disabled="isSubmitDisabled" @click="handleCreateBucket">
           {{ t('Create') }}
         </Button>
       </div>
@@ -85,11 +60,12 @@
 </template>
 
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
-import { AppCard, AppModal, AppRadioGroup, AppSelect, AppSwitch } from '@/components/app'
+import { AppModal, AppRadioGroup, AppSelect } from '@/components/app'
 import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
diff --git a/components/app/data-table/AppDataTablePagination.vue b/components/data-table/data-table-pagination.vue
similarity index 100%
rename from components/app/data-table/AppDataTablePagination.vue
rename to components/data-table/data-table-pagination.vue
diff --git a/components/app/data-table/AppDataTable.vue b/components/data-table/data-table.vue
similarity index 86%
rename from components/app/data-table/AppDataTable.vue
rename to components/data-table/data-table.vue
index 2755045..ca15ff5 100644
--- a/components/app/data-table/AppDataTable.vue
+++ b/components/data-table/data-table.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts" generic="TData">
-import type { Table } from '@tanstack/vue-table'
-import { FlexRender } from '@tanstack/vue-table'
 import AppEmpty from '@/components/app/AppEmpty.vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import Spinner from '@/components/ui/spinner/Spinner.vue'
 import {
-  Table as UiTable,
   TableBody,
   TableCell,
   TableHead,
   TableHeader,
   TableRow,
+  Table as UiTable,
 } from '@/components/ui/table'
-import Spinner from '@/components/ui/spinner/Spinner.vue'
 import { cn } from '@/lib/utils'
+import type { Table } from '@tanstack/vue-table'
+import { FlexRender } from '@tanstack/vue-table'
 import { computed } from 'vue'
 
 const props = withDefaults(
@@ -47,11 +47,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
     <ScrollArea v-if="bodyHeight" :class="cn('rounded-md border', bodyHeight)">
       <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"
-          >
+          <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">
               <template v-if="!header.isPlaceholder">
                 <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
@@ -71,12 +67,7 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
             </TableRow>
           </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"
-            >
+            <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">
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </TableCell>
@@ -99,7 +90,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">
+            <TableHead v-for="header in headerGroup.headers" :key="header.id" class="py-2">
               <template v-if="!header.isPlaceholder">
                 <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
               </template>
@@ -118,13 +109,8 @@ const hasRows = computed(() => props.table.getRowModel().rows.length > 0)
             </TableRow>
           </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">
+            <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">
                 <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
               </TableCell>
             </TableRow>
diff --git a/components/app/data-table/index.ts b/components/data-table/index.ts
similarity index 100%
rename from components/app/data-table/index.ts
rename to components/data-table/index.ts
diff --git a/components/app/data-table/useDataTable.ts b/components/data-table/useDataTable.ts
similarity index 100%
rename from components/app/data-table/useDataTable.ts
rename to components/data-table/useDataTable.ts
diff --git a/components/events-target/new.vue b/components/events-target/new.vue
index f8f6457..69e6c44 100644
--- a/components/events-target/new.vue
+++ b/components/events-target/new.vue
@@ -7,7 +7,7 @@
   >
     <div class="space-y-6">
       <div v-if="!formData.type" class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <AppCard
+        <div
           v-for="option in typeOptions"
           :key="option.value"
           class="cursor-pointer border border-border/70 transition hover:border-primary"
@@ -20,20 +20,17 @@
               <p class="text-sm text-muted-foreground">{{ option.description }}</p>
             </div>
           </div>
-        </AppCard>
+        </div>
       </div>
 
       <div v-else class="space-y-4">
-        <AppCard
-          class="flex cursor-pointer items-center gap-3 border transition hover:border-primary"
-          @click="resetType"
-        >
+        <div class="flex cursor-pointer items-center gap-3 border transition hover:border-primary" @click="resetType">
           <img :src="iconUrl" class="h-10 w-10" alt="" />
           <div class="flex flex-col">
             <span class="text-sm text-muted-foreground">{{ t('Selected Type') }}</span>
             <span class="text-base font-semibold">{{ formData.type }}</span>
           </div>
-        </AppCard>
+        </div>
 
         <div class="grid gap-4">
           <div class="grid gap-2">
@@ -98,7 +95,7 @@ import { Button } from '@/components/ui/button'
 import { useI18n } from 'vue-i18n'
 import MqttIcon from '~/assets/svg/mqtt.svg'
 import WebhooksIcon from '~/assets/svg/webhooks.svg'
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { computed, reactive, ref, watch } from 'vue'
 import { useEventTarget } from '#imports'
@@ -261,4 +258,4 @@ defineExpose({
     resetType()
   },
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/lifecycle/new-form.vue b/components/lifecycle/new-form.vue
index 25cf515..c6fb732 100644
--- a/components/lifecycle/new-form.vue
+++ b/components/lifecycle/new-form.vue
@@ -13,7 +13,7 @@
         </TabsList>
 
         <TabsContent value="expire" class="mt-0 space-y-6">
-          <AppCard padded class="space-y-4">
+          <div class="space-y-4">
             <div v-if="versioningStatus" class="grid gap-2">
               <Label>{{ t('Object Version') }}</Label>
               <AppSelect v-model="formData.versionType" :options="versionOptions" />
@@ -32,9 +32,9 @@
                 <span class="text-sm text-muted-foreground">{{ t('Days After') }}</span>
               </div>
             </div>
-          </AppCard>
+          </div>
 
-          <AppCard padded class="space-y-4">
+          <div class="space-y-4">
             <details>
               <summary class="cursor-pointer text-sm font-medium text-primary">{{ t('More Configurations') }}</summary>
               <div class="mt-4 space-y-4">
@@ -75,9 +75,9 @@
                 </div>
               </div>
             </details>
-          </AppCard>
+          </div>
 
-          <AppCard v-if="formData.versionType === 'current'" padded>
+          <div v-if="formData.versionType === 'current'">
             <details>
               <summary class="cursor-pointer text-sm font-medium text-primary">{{ t('Advanced Settings') }}</summary>
               <div class="mt-4 flex items-center justify-between">
@@ -87,14 +87,14 @@
                     {{ t('If no versions remain, delete references to this object') }}
                   </p>
                 </div>
-                <AppSwitch v-model="formData.expiredDeleteMark" />
+                <Switch v-model:checked="formData.expiredDeleteMark" />
               </div>
             </details>
-          </AppCard>
+          </div>
         </TabsContent>
 
         <TabsContent value="transition" class="mt-0 space-y-6">
-          <AppCard padded class="space-y-4">
+          <div class="space-y-4">
             <div v-if="versioningStatus" class="grid gap-2">
               <Label>{{ t('Object Version') }}</Label>
               <AppSelect v-model="formData.versionType" :options="versionOptions" />
@@ -122,9 +122,9 @@
                 :placeholder="t('Please select storage type')"
               />
             </div>
-          </AppCard>
+          </div>
 
-          <AppCard padded class="space-y-4">
+          <div class="space-y-4">
             <details>
               <summary class="cursor-pointer text-sm font-medium text-primary">{{ t('More Configurations') }}</summary>
               <div class="mt-4 space-y-4">
@@ -165,7 +165,7 @@
                 </div>
               </div>
             </details>
-          </AppCard>
+          </div>
         </TabsContent>
       </Tabs>
     </div>
@@ -184,7 +184,8 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import { AppCard, AppModal, AppSelect, AppSwitch } from '@/components/app'
+import { AppModal, AppSelect } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Label } from '@/components/ui/label'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
@@ -213,6 +214,10 @@ const versionOptions = computed(() => [
   { label: t('Non-current Version'), value: 'non-current' },
 ])
 
+const formState = reactive({
+  action: 'expire' as 'expire' | 'transition',
+})
+
 const formData = reactive({
   versionType: 'current',
   days: 1,
@@ -235,10 +240,6 @@ watch(
   { immediate: true }
 )
 
-const formState = reactive({
-  action: 'expire' as 'expire' | 'transition',
-})
-
 const tiers = ref<Array<{ label: string; value: string }>>([])
 
 const loadTiers = async () => {
@@ -444,4 +445,4 @@ onMounted(() => {
   loadTiers()
   loadVersioningStatus()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/delete/task/item.vue b/components/object/delete/task/item.vue
index ff28713..bbf231c 100644
--- a/components/object/delete/task/item.vue
+++ b/components/object/delete/task/item.vue
@@ -6,7 +6,7 @@
         {{ t('Delete Record') }}
       </Button>
     </div>
-    <AppProgress :value="task.progress" :processing="task.status === 'deleting'" :height="2" />
+    <Progress :model-value="task.progress" class="h-[2px]" />
     <div class="flex items-center justify-between text-muted-foreground">
       <div></div>
       <div class="text-muted-foreground">
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
-import { AppProgress } from '@/components/app'
+import Progress from '@/components/ui/progress/Progress.vue'
 import type { DeleteTask } from '~/lib/delete-task-manager'
 import { useDeleteTaskManagerStore } from '~/store/delete-tasks'
 
@@ -35,4 +35,4 @@ const props = defineProps<{ task: DeleteTask }>()
 const handleDeleteTask = () => {
   store.removeTask(props.task.id)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/info.vue b/components/object/info.vue
index 4e207e5..bbd7530 100644
--- a/components/object/info.vue
+++ b/components/object/info.vue
@@ -18,12 +18,7 @@
           <Icon name="ri:file-list-2-line" class="size-4" />
           {{ t('Versions') }}
         </Button>
-        <Button
-          v-if="lockStatus"
-          variant="outline"
-          size="sm"
-          @click="() => (showRetentionView = true)"
-        >
+        <Button v-if="lockStatus" variant="outline" size="sm" @click="() => (showRetentionView = true)">
           <Icon name="ri:lock-line" class="size-4" />
           {{ t('Retention') }}
         </Button>
@@ -53,12 +48,12 @@
           </div>
           <div class="flex items-center justify-between">
             <span class="font-medium text-muted-foreground">{{ t('Legal Hold') }}</span>
-            <AppSwitch :checked="lockStatus" @update:checked="toggleLegalHold" />
+          <Switch :checked="lockStatus" @update:checked="toggleLegalHold" />
           </div>
           <div class="flex flex-col gap-2">
             <span class="font-medium text-muted-foreground">{{ t('Retention') + t('Policy') }}</span>
             <div class="flex flex-col gap-1">
-              <span>{{ retention}}</span>
+              <span>{{ retention }}</span>
               <span v-if="retainUntilDate" class="text-xs text-muted-foreground">{{ retainUntilDate }}</span>
             </div>
           </div>
@@ -73,32 +68,32 @@
     </div>
 
     <AppModal v-model="showTagView" :title="t('Set Tags')" size="lg">
-      <AppCard class="space-y-4">
+      <div class="space-y-4">
         <div class="flex flex-wrap gap-2">
           <AppTag v-for="tag in tags" :key="tag.Key" tone="info">
             {{ tag.Key }}: {{ tag.Value }}
           </AppTag>
         </div>
-        <form class="flex flex-wrap gap-3" @submit.prevent="submitTagForm">
-          <Input v-model="tagFormValue.Key" :placeholder="t('Tag Key Placeholder')" />
-          <Input v-model="tagFormValue.Value" :placeholder="t('Tag Value Placeholder')" />
+        <form class="space-y-4" @submit.prevent="submitTagForm">
+          <div class="flex items-center gap-2">
+            <Input v-model="tagFormValue.Key" :placeholder="t('Tag Key Placeholder')" />
+            <span>=</span>
+            <Input v-model="tagFormValue.Value" :placeholder="t('Tag Value Placeholder')" />
+          </div>
           <Button type="submit" variant="default">{{ t('Add') }}</Button>
         </form>
-      </AppCard>
+      </div>
     </AppModal>
 
     <AppModal v-model="showRetentionView" :title="t('Retention')" size="lg">
-      <AppCard class="space-y-4">
+      <div class="space-y-4">
         <form class="flex flex-col gap-3" @submit.prevent="submitRetention">
           <div class="flex flex-col gap-2">
             <Label>{{ t('Retention Mode') }}</Label>
-            <AppRadioGroup
-              v-model="retentionMode"
-              :options="[
-                { label: t('COMPLIANCE'), value: 'COMPLIANCE' },
-                { label: t('GOVERNANCE'), value: 'GOVERNANCE' },
-              ]"
-            />
+            <AppRadioGroup v-model="retentionMode" :options="[
+              { label: t('COMPLIANCE'), value: 'COMPLIANCE' },
+              { label: t('GOVERNANCE'), value: 'GOVERNANCE' },
+            ]" />
           </div>
           <div class="flex flex-col gap-2">
             <Label>{{ t('Retention RetainUntilDate') }}</Label>
@@ -110,7 +105,7 @@
             <Button variant="outline" @click="() => (showRetentionView = false)">{{ t('Cancel') }}</Button>
           </div>
         </form>
-      </AppCard>
+      </div>
     </AppModal>
 
     <object-preview-modal v-model:show="showPreview" :object="object" />
@@ -118,14 +113,15 @@
 </template>
 
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
-import { AppCard, AppDrawer, AppModal, AppRadioGroup, AppSwitch, AppTag } from '@/components/app'
+import { AppCard, AppDrawer, AppModal, AppRadioGroup, AppTag } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
-import { useI18n } from 'vue-i18n'
-import { ref } from 'vue'
 import { joinRelativeURL } from 'ufo'
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -272,4 +268,4 @@ const copyTemporaryUrl = async () => {
 defineExpose({
   openDrawer,
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/list.vue b/components/object/list.vue
index fb70403..ee6e69b 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="space-y-4">
-    <PageHeader class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+    <div class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
       <div class="flex flex-wrap items-center justify-between gap-3">
-        <Input
-          v-model="searchTerm"
-          :placeholder="t('Search')"
-          class="max-w-md"
-          @input="handleSearch"
-        />
+        <Input v-model="searchTerm" :placeholder="t('Search')" class="max-w-md" @input="handleSearch" />
         <div class="flex flex-wrap items-center gap-2">
           <object-upload-stats />
           <object-delete-stats />
@@ -19,21 +14,11 @@
             <Icon name="ri:file-add-line" class="size-4" />
             <span>{{ t('Upload File') }}/{{ t('Folder') }}</span>
           </Button>
-          <Button
-            variant="destructive"
-            :disabled="!checkedKeys.length"
-            v-show="checkedKeys.length"
-            @click="handleBatchDelete"
-          >
+          <Button variant="destructive" :disabled="!checkedKeys.length" v-show="checkedKeys.length" @click="handleBatchDelete">
             <Icon name="ri:delete-bin-5-line" class="size-4" />
             <span>{{ t('Delete Selected') }}</span>
           </Button>
-          <Button
-            variant="outline"
-            :disabled="!checkedKeys.length"
-            v-show="checkedKeys.length"
-            @click="downloadMultiple"
-          >
+          <Button variant="outline" :disabled="!checkedKeys.length" v-show="checkedKeys.length" @click="downloadMultiple">
             <Icon name="ri:download-cloud-2-line" class="size-4" />
             <span>{{ t('Download') }}</span>
           </Button>
@@ -43,16 +28,9 @@
           </Button>
         </div>
       </div>
-    </PageHeader>
+    </div>
 
-    <AppCard padded class="border">
-      <AppDataTable
-        :table="table"
-        :is-loading="loading"
-        :empty-title="t('No Objects')"
-        :empty-description="t('Upload files or create folders to populate this bucket.')"
-      />
-    </AppCard>
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Objects')" :empty-description="t('Upload files or create folders to populate this bucket.')" />
 
     <div class="flex justify-end gap-2">
       <Button variant="outline" :disabled="!continuationToken" @click="goToPreviousPage">
@@ -65,51 +43,35 @@
       </Button>
     </div>
 
-    <object-upload-picker
-      :show="uploadPickerVisible"
-      :bucketName="bucketName"
-      :prefix="prefix"
-      @update:show="val => {
-        uploadPickerVisible = val
-        refresh()
-      }"
-    />
-    <object-new-form
-      :show="newObjectFormVisible"
-      :bucketName="bucketName"
-      :prefix="prefix"
-      :asPrefix="newObjectAsPrefix"
-      @update:show="val => {
-        newObjectFormVisible = val
-        refresh()
-      }"
-    />
-    <object-info
-      ref="infoRef"
-      :bucket-name="bucketName"
-      @refresh-parent="handleObjectDeleted"
-    />
+    <object-upload-picker :show="uploadPickerVisible" :bucketName="bucketName" :prefix="prefix" @update:show="val => {
+      uploadPickerVisible = val
+      refresh()
+    }" />
+    <object-new-form :show="newObjectFormVisible" :bucketName="bucketName" :prefix="prefix" :asPrefix="newObjectAsPrefix" @update:show="val => {
+      newObjectFormVisible = val
+      refresh()
+    }" />
+    <object-info ref="infoRef" :bucket-name="bucketName" @refresh-parent="handleObjectDeleted" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
-import { AppCard } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
-import PageHeader from '@/components/page/header.vue'
+import { Icon, NuxtLink } from '#components'
 import { ListObjectsV2Command } from '@aws-sdk/client-s3'
+import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
 import { saveAs } from 'file-saver'
 import JSZip from 'jszip'
 import { joinRelativeURL } from 'ufo'
 import { computed, h, ref, watch } from 'vue'
-import type { ColumnDef } from '@tanstack/vue-table'
-import { useUploadTaskManagerStore } from '~/store/upload-tasks'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 import { useDeleteTaskManagerStore } from '~/store/delete-tasks'
-import { Icon, NuxtLink } from '#components'
+import { useUploadTaskManagerStore } from '~/store/upload-tasks'
+import { resolveRouteParam, safeDecodeURIComponent } from '~/utils/functions'
 
 const { $s3Client } = useNuxtApp()
 const { t } = useI18n()
@@ -151,7 +113,7 @@ type ObjectRow = {
 }
 
 const bucketName = computed(() => props.bucket)
-const prefix = computed(() => decodeURIComponent(props.path))
+const prefix = computed(() => resolveRouteParam(props.path))
 
 const bucketPath = (path?: string | string[]) => {
   const value = Array.isArray(path) ? path.join('/') : path
@@ -245,8 +207,30 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
       id: 'object',
       header: () => t('Object'),
       cell: ({ row }: any) => {
-        const displayKey = prefix.value ? row.original.Key.substring(prefix.value.length) : row.original.Key
-        const label = displayKey || '/'
+        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 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 || '/'
+        }
+
         if (row.original.type === 'prefix') {
           return h(
             NuxtLink,
@@ -254,7 +238,9 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
               href: bucketPath(row.original.Key),
               class: 'flex items-center gap-2 text-primary hover:underline',
             },
-            () => [h(Icon, { name: 'ri:folder-line', class: 'size-4' }), label]
+            {
+              default: () => [h(Icon, { name: 'ri:folder-line', class: 'size-4' }), h('span', label)],
+            }
           )
         }
         return h(
@@ -263,7 +249,7 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
             class: 'flex items-center gap-2 text-primary hover:underline',
             onClick: () => infoRef.value?.openDrawer(bucketName.value, row.original.Key),
           },
-          () => [h(Icon, { name: 'ri:file-line', class: 'size-4' }), label]
+          [h(Icon, { name: 'ri:file-line', class: 'size-4' }), h('span', label)]
         )
       },
     },
@@ -285,14 +271,14 @@ const columns = computed<ColumnDef<ObjectRow, any>[]>(() => {
         h('div', { class: 'flex justify-center gap-2' }, [
           row.original.type === 'object'
             ? h(
-                Button,
-                {
-                  variant: 'outline',
-                  size: 'sm',
-                  onClick: () => downloadFile(row.original.Key),
-                },
-                () => [h(Icon, { name: 'ri:download-cloud-2-line', class: 'size-4' }), h('span', t('Download'))]
-              )
+              Button,
+              {
+                variant: 'outline',
+                size: 'sm',
+                onClick: () => downloadFile(row.original.Key),
+              },
+              () => [h(Icon, { name: 'ri:download-cloud-2-line', class: 'size-4' }), h('span', t('Download'))]
+            )
             : null,
           h(
             Button,
@@ -411,4 +397,4 @@ const formatBytes = (bytes: number) => {
   const i = Math.floor(Math.log(bytes) / Math.log(1024))
   return `${(bytes / 1024 ** i).toFixed(2)} ${units[i]}`
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/preview-modal.vue b/components/object/preview-modal.vue
index 26c72dc..ef1eb56 100644
--- a/components/object/preview-modal.vue
+++ b/components/object/preview-modal.vue
@@ -1,13 +1,7 @@
 <template>
   <AppModal v-model="visibleProxy" :title="t('Preview')" size="xl" :close-on-backdrop="false">
     <div class="flex flex-col gap-4">
-      <div class="flex items-center justify-end gap-2">
-        <Button variant="outline" size="sm" @click="closeModal">
-          <Icon name="ri:close-line" class="size-4" />
-          {{ t('Close') }}
-        </Button>
-      </div>
-      <div class="min-h-[300px] rounded-md border p-4">
+      <div class="min-h-[300px] rounded-md border p-4 flex flex-col">
         <AppSpinner v-if="loading" class="mx-auto size-8" />
         <template v-else>
           <div v-if="isImage" class="flex justify-center">
@@ -23,7 +17,7 @@
             <source :src="previewUrl" :type="contentType" />
             {{ t('Your browser does not support the audio tag') }}
           </audio>
-          <div v-else class="flex h-full items-center justify-center text-sm text-muted-foreground">
+          <div v-else class="flex flex-1 justify-self-center items-center justify-center text-sm text-muted-foreground">
             {{ t('Cannot Preview', { contentType: contentType || 'unknown' }) }}
           </div>
         </template>
@@ -33,10 +27,8 @@
 </template>
 
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
 
 import { AppModal, AppSpinner } from '@/components/app'
-import { Icon } from '#components'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -121,4 +113,4 @@ const reset = () => {
 }
 
 const closeModal = () => emit('update:show', false)
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/task-stats.vue b/components/object/task-stats.vue
index ffdb7d7..11275ec 100644
--- a/components/object/task-stats.vue
+++ b/components/object/task-stats.vue
@@ -45,7 +45,7 @@
             {{ t('Clear Records') }}
           </Button>
         </div>
-        <AppProgress :value="percentage" :processing="percentage < 100" :height="3" />
+        <Progress :model-value="percentage" class="h-[3px]" />
       </div>
 
       <Tabs v-model="tab" class="flex flex-col gap-4">
@@ -78,7 +78,8 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
-import { AppDrawer, AppProgress, AppSpinner } from '@/components/app'
+import { AppDrawer, AppSpinner } from '@/components/app'
+import Progress from '@/components/ui/progress/Progress.vue'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { computed, ref, watch } from 'vue'
@@ -149,4 +150,4 @@ const toggleDrawer = () => {
 const clearTasks = () => {
   props.onClearTasks()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/object/upload/picker.vue b/components/object/upload/picker.vue
index 4548a26..44dddc6 100644
--- a/components/object/upload/picker.vue
+++ b/components/object/upload/picker.vue
@@ -51,7 +51,7 @@
         </AlertDescription>
       </Alert>
 
-      <AppCard padded class="space-y-4 border">
+      <div class="space-y-4 border">
         <div class="flex flex-wrap items-center justify-between gap-3">
           <div class="space-y-1 text-sm text-muted-foreground">
             <p v-if="totalFileCount > 0">
@@ -144,7 +144,7 @@
             <span>{{ t('Reading Folder Files') }}</span>
             <span>{{ folderLoadingProgress }}%</span>
           </div>
-          <AppProgress :value="folderLoadingProgress" :processing="true" />
+          <Progress :model-value="folderLoadingProgress" class="h-2" />
         </div>
 
         <div v-if="isAdding" class="space-y-2 rounded-md border border-dashed p-3">
@@ -152,9 +152,9 @@
             <span>{{ t('Adding to Upload Queue') }}</span>
             <span>{{ addProgress }}%</span>
           </div>
-          <AppProgress :value="addProgress" :processing="true" />
+          <Progress :model-value="addProgress" class="h-2" />
         </div>
-      </AppCard>
+      </div>
 
       <div class="flex justify-end gap-2">
         <Button variant="outline" :disabled="!hasFiles || isAdding || isFolderLoading">
@@ -177,7 +177,8 @@
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import { AppCard, AppModal, AppProgress } from '@/components/app'
+import { AppModal } from '@/components/app'
+import Progress from '@/components/ui/progress/Progress.vue'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/components/object/upload/task/item.vue b/components/object/upload/task/item.vue
index 5d91c49..3b71c44 100644
--- a/components/object/upload/task/item.vue
+++ b/components/object/upload/task/item.vue
@@ -26,7 +26,7 @@
         </Button>
       </div>
     </div>
-    <AppProgress :value="task.progress" :processing="task.status === 'uploading'" :height="2" />
+    <Progress :model-value="task.progress" class="h-[2px]" />
     <div class="flex items-center justify-between text-muted-foreground">
       <div>{{ formatBytes(task.file.size) }}</div>
       <div class="text-muted-foreground">
@@ -43,7 +43,7 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
-import { AppProgress } from '@/components/app'
+import Progress from '@/components/ui/progress/Progress.vue'
 import type { UploadTask } from '~/lib/upload-task-manager'
 import { useUploadTaskManagerStore } from '~/store/upload-tasks'
 import { formatBytes } from '~/utils/functions'
diff --git a/components/object/versions.vue b/components/object/versions.vue
index 34ef7be..7f32f33 100644
--- a/components/object/versions.vue
+++ b/components/object/versions.vue
@@ -1,7 +1,7 @@
 <template>
   <AppModal v-model="visibleProxy" :title="t('Object Versions')" size="lg" :close-on-backdrop="false">
     <AppCard padded>
-      <AppDataTable :table="table" :is-loading="loading" :empty-title="t('No Versions')" />
+      <DataTable :table="table" :is-loading="loading" :empty-title="t('No Versions')" />
       <div class="mt-4 flex justify-end">
         <Button variant="outline" @click="closeModal">{{ t('Close') }}</Button>
       </div>
@@ -13,14 +13,14 @@
 import { Button } from '@/components/ui/button'
 
 import { AppCard, AppModal } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
 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 { useI18n } from 'vue-i18n'
-import type { ColumnDef } from '@tanstack/vue-table'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const props = defineProps<{
   bucketName: string
diff --git a/components/object/view.vue b/components/object/view.vue
index e0ca071..b0aac7c 100644
--- a/components/object/view.vue
+++ b/components/object/view.vue
@@ -64,7 +64,7 @@
     </AppCard>
 
     <AppModal v-model="showTagView" :title="t('Set Tags')" size="lg">
-      <AppCard class="space-y-4">
+      <div class="space-y-4">
         <div class="flex flex-wrap gap-2">
           <AppTag v-for="tag in tags" :key="tag.Key" tone="info">
             {{ tag.Key }}: {{ tag.Value }}
@@ -76,7 +76,7 @@
           <Button type="submit" variant="default">{{ t('Add') }}</Button>
           <Button variant="outline" @click="showTagView = false">{{ t('Cancel') }}</Button>
         </form>
-      </AppCard>
+      </div>
     </AppModal>
 
     <object-preview-modal :show="showPreview" :object="object" @update:show="showPreview = $event" />
@@ -184,4 +184,4 @@ const download = () => {
 }
 
 defineExpose({ refresh })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/page-header.vue b/components/page-header.vue
new file mode 100644
index 0000000..fd5b303
--- /dev/null
+++ b/components/page-header.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="sticky top-0 z-10 flex flex-col md:flex-row justify-between gap-2">
+    <slot name="title"></slot>
+    <div class="flex-1 flex flex-wrap items-center justify-end gap-2">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
diff --git a/components/page.vue b/components/page.vue
new file mode 100644
index 0000000..f9aaafa
--- /dev/null
+++ b/components/page.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex flex-col gap-6 p-4">
+    <slot />
+  </div>
+</template>
diff --git a/components/page/content.vue b/components/page/content.vue
deleted file mode 100644
index 2647307..0000000
--- a/components/page/content.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="p-4">
-    <slot></slot>
-  </div>
-</template>
diff --git a/components/page/header.vue b/components/page/header.vue
deleted file mode 100644
index 1dee18b..0000000
--- a/components/page/header.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <div class="p-4 sticky top-0 z-10 px-6 h-16 border-b bg-background flex justify-between ">
-    <slot name="title"></slot>
-    <slot name="actions"></slot>
-  </div>
-</template>
diff --git a/components/policies/form-item.vue b/components/policies/form-item.vue
index a19220c..29ef474 100644
--- a/components/policies/form-item.vue
+++ b/components/policies/form-item.vue
@@ -2,7 +2,7 @@
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -120,7 +120,7 @@ const submitForm = async () => {
     size="lg"
     :close-on-backdrop="false"
   >
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="grid gap-2">
         <Label for="policy-name">{{ t('Policy Name') }}</Label>
         <Input id="policy-name" v-model="form.name" autocomplete="off" />
@@ -134,7 +134,7 @@ const submitForm = async () => {
         </div>
         <p v-if="errors.content" class="text-sm text-destructive">{{ errors.content }}</p>
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -143,4 +143,4 @@ const submitForm = async () => {
       </div>
     </template>
   </AppModal>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/replication/new-form.vue b/components/replication/new-form.vue
index a0cd6a3..e148cad 100644
--- a/components/replication/new-form.vue
+++ b/components/replication/new-form.vue
@@ -6,7 +6,7 @@
     :close-on-backdrop="false"
   >
     <div class="space-y-6">
-      <AppCard padded class="space-y-4">
+      <div class="space-y-4">
         <div class="grid gap-3 md:grid-cols-2">
           <div class="grid gap-2">
             <Label>{{ t('Priority') }}</Label>
@@ -77,15 +77,15 @@
             </div>
           </div>
         </div>
-      </AppCard>
+      </div>
 
-      <AppCard padded class="space-y-4">
+      <div class="space-y-4">
         <div class="flex items-center justify-between">
           <div>
             <p class="text-sm font-medium">{{ t('Use TLS') }}</p>
             <p class="text-xs text-muted-foreground">{{ t('Enable secure transport when connecting to endpoint.') }}</p>
           </div>
-          <AppSwitch v-model="formData.tls" />
+          <Switch v-model:checked="formData.tls" />
         </div>
 
         <div class="flex items-center justify-between">
@@ -93,7 +93,7 @@
             <p class="text-sm font-medium">{{ t('Replicate Existing Objects') }}</p>
             <p class="text-xs text-muted-foreground">{{ t('Include objects that already exist in the source bucket.') }}</p>
           </div>
-          <AppSwitch v-model="formData.existingObject" />
+          <Switch v-model:checked="formData.existingObject" />
         </div>
 
         <div class="flex items-center justify-between">
@@ -101,7 +101,7 @@
             <p class="text-sm font-medium">{{ t('Replicate Delete Markers') }}</p>
             <p class="text-xs text-muted-foreground">{{ t('Sync delete markers to destination bucket.') }}</p>
           </div>
-          <AppSwitch v-model="formData.expiredDeleteMark" />
+          <Switch v-model:checked="formData.expiredDeleteMark" />
         </div>
 
         <div class="space-y-3" v-if="formData.modeType === 'async'">
@@ -122,7 +122,7 @@
             </div>
           </div>
         </div>
-      </AppCard>
+      </div>
     </div>
 
     <template #footer>
@@ -139,8 +139,9 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import { AppCard, AppModal, AppSelect, AppSwitch } from '@/components/app'
+import { AppModal, AppSelect } from '@/components/app'
 import { Label } from '@/components/ui/label'
+import { Switch } from '@/components/ui/switch'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { getBytes } from '@/utils/functions'
@@ -357,4 +358,4 @@ defineExpose({
     visible.value = true
   },
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/tiers/change-key.vue b/components/tiers/change-key.vue
index 22dc986..c4cec04 100644
--- a/components/tiers/change-key.vue
+++ b/components/tiers/change-key.vue
@@ -5,7 +5,7 @@
     size="md"
     :close-on-backdrop="false"
   >
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="grid gap-2">
         <Label>{{ t('Access Key') }}</Label>
         <Input v-model="formModel.accessKey" :placeholder="t('Please enter Access Key')" autocomplete="off" />
@@ -15,7 +15,7 @@
         <Label>{{ t('Secret Key') }}</Label>
         <Input v-model="formModel.secretKey" type="password" autocomplete="off" :placeholder="t('Please enter Secret Key')" />
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -30,7 +30,7 @@
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -104,4 +104,4 @@ const submitForm = async () => {
     submitting.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/tiers/new-form.vue b/components/tiers/new-form.vue
index 201756f..31b80b8 100644
--- a/components/tiers/new-form.vue
+++ b/components/tiers/new-form.vue
@@ -2,7 +2,7 @@
   <AppModal v-model="visible" :title="t('Add Tier')" size="lg" :close-on-backdrop="false">
     <div class="space-y-6">
       <div v-if="!formData.type" class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <AppCard
+        <div
           v-for="item in typeOptions"
           :key="item.value"
           class="cursor-pointer border border-border/70 transition hover:border-primary"
@@ -15,11 +15,11 @@
               <p class="text-sm text-muted-foreground">{{ item.description }}</p>
             </div>
           </div>
-        </AppCard>
+        </div>
       </div>
 
       <div v-else class="space-y-5">
-        <AppCard class="cursor-pointer border transition hover:border-primary" @click="resetType">
+        <div class="cursor-pointer border transition hover:border-primary" @click="resetType">
           <div class="flex items-center gap-3">
             <img :src="iconUrl" class="h-10 w-10" alt="" />
             <div>
@@ -27,9 +27,9 @@
               <p class="text-base font-semibold">{{ formData.type }}</p>
             </div>
           </div>
-        </AppCard>
+        </div>
 
-        <AppCard padded class="space-y-4">
+        <div class="space-y-4">
           <div class="grid gap-2">
             <Label>{{ t('Name') }} (A-Z,0-9,_)</Label>
             <Input
@@ -75,7 +75,7 @@
             <Label>{{ t('Storage Class') }}</Label>
             <Input v-model="formData.storageclass" :placeholder="t('Please Enter storage class')" />
           </div>
-        </AppCard>
+        </div>
       </div>
     </div>
 
@@ -94,7 +94,7 @@
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -217,4 +217,4 @@ defineExpose({
     resetForm()
   },
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/group-edit.vue b/components/users/group-edit.vue
index f28f694..633d980 100644
--- a/components/users/group-edit.vue
+++ b/components/users/group-edit.vue
@@ -1,9 +1,9 @@
 <template>
   <AppModal v-model="visible" :title="group.name || t('Members')" size="lg" :close-on-backdrop="false">
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="flex items-center justify-between rounded-md border px-3 py-2">
         <span class="text-sm text-muted-foreground">{{ t('Status') }}</span>
-        <AppSwitch v-model="statusBoolean" />
+        <Switch v-model:checked="statusBoolean" />
       </div>
 
       <Tabs v-model="activeTab" class="flex flex-col gap-4">
@@ -19,12 +19,13 @@
           <users-group-policies :group="group" @search="getGroupData(group.name)" />
         </TabsContent>
       </Tabs>
-    </AppCard>
+    </div>
   </AppModal>
 </template>
 
 <script setup lang="ts">
-import { AppCard, AppModal, AppSwitch } from '@/components/app'
+import { AppModal } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/components/users/group/new.vue b/components/users/group/new.vue
index 7870a67..3659e32 100644
--- a/components/users/group/new.vue
+++ b/components/users/group/new.vue
@@ -2,7 +2,7 @@
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
@@ -105,7 +105,7 @@ const submitForm = async () => {
 
 <template>
   <AppModal v-model="modalVisible" :title="t('Add group members')" size="lg" :close-on-backdrop="false">
-    <AppCard padded class="space-y-6">
+    <div class="space-y-6">
       <div class="space-y-2">
         <Label class="text-sm font-medium">{{ t('Name') }}</Label>
         <Input v-model="formModel.group" autocomplete="off" />
@@ -159,7 +159,7 @@ const submitForm = async () => {
           </Badge>
         </div>
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -172,4 +172,4 @@ const submitForm = async () => {
       </div>
     </template>
   </AppModal>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/users/group/policies.vue b/components/users/group/policies.vue
index 3e44287..c3623b1 100644
--- a/components/users/group/policies.vue
+++ b/components/users/group/policies.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppCard padded class="space-y-4">
+  <div class="space-y-4">
     <div v-if="!editStatus" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <div class="w-full sm:max-w-xs">
         <Input v-model="searchTerm" :placeholder="t('Search Policy')" />
@@ -84,14 +84,13 @@
         </TableRow>
       </TableBody>
     </Table>
-  </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
-import { AppCard } from '@/components/app'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
@@ -204,4 +203,4 @@ const changePolicies = async () => {
     message.error(t('Edit Failed'))
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/group/set-policies-mutiple.vue b/components/users/group/set-policies-mutiple.vue
index 487905d..7a26f0b 100644
--- a/components/users/group/set-policies-mutiple.vue
+++ b/components/users/group/set-policies-mutiple.vue
@@ -1,6 +1,6 @@
 <template>
   <AppModal v-model="visible" :title="t('Batch allocation policies')" size="xl" :close-on-backdrop="false">
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="w-full sm:max-w-xs">
           <Input v-model="searchTerm" :placeholder="t('Search Policy')" />
@@ -42,7 +42,7 @@
           </TableRow>
         </TableBody>
       </Table>
-    </AppCard>
+    </div>
   </AppModal>
 </template>
 
@@ -50,7 +50,7 @@
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppCheckbox, AppModal } from '@/components/app'
+import { AppCheckbox, AppModal } from '@/components/app'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -155,4 +155,4 @@ const changePolicies = async () => {
 defineExpose({
   openDialog,
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user-edit.vue b/components/users/user-edit.vue
index 05b7b4c..ea9000a 100644
--- a/components/users/user-edit.vue
+++ b/components/users/user-edit.vue
@@ -1,9 +1,9 @@
 <template>
   <AppModal v-model="visible" :title="user.accessKey || t('Account')" size="lg" :close-on-backdrop="false">
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="flex items-center justify-between rounded-md border px-3 py-2">
         <span class="text-sm text-muted-foreground">{{ t('Status') }}</span>
-        <AppSwitch v-model="statusBoolean" />
+        <Switch v-model:checked="statusBoolean" />
       </div>
 
       <Tabs v-model="activeTab" class="flex flex-col gap-4">
@@ -25,12 +25,13 @@
       </Tabs>
 
       <users-user-notice ref="noticeRef" @search="refreshUser" />
-    </AppCard>
+    </div>
   </AppModal>
 </template>
 
 <script setup lang="ts">
-import { AppCard, AppModal, AppSwitch } from '@/components/app'
+import { AppModal } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/components/users/user/account.vue b/components/users/user/account.vue
index 9c48e28..475b651 100644
--- a/components/users/user/account.vue
+++ b/components/users/user/account.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <template v-if="!editStatus">
-      <AppCard padded class="space-y-4">
+      <div class="space-y-4">
         <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
           <div class="w-full sm:max-w-xs">
             <Input v-model="searchTerm" :placeholder="t('Search Account')" />
@@ -57,11 +57,11 @@
             </TableRow>
           </TableBody>
         </Table>
-      </AppCard>
+      </div>
     </template>
 
     <template v-else-if="editType === 'add'">
-      <AppCard padded class="space-y-4">
+      <div class="space-y-4">
         <div class="grid gap-4 md:grid-cols-2">
           <div class="space-y-2">
             <Label>{{ t('Access Key') }}</Label>
@@ -81,7 +81,7 @@
           </div>
           <div class="space-y-2 md:col-span-2">
             <Label>{{ t('Description') }}</Label>
-            <AppTextarea v-model="formModel.description" :rows="3" />
+          <Textarea v-model="formModel.description" :rows="3" />
           </div>
         </div>
 
@@ -93,7 +93,7 @@
                 {{ t('Automatically inherit the main account policy when enabled.') }}
               </p>
             </div>
-            <AppSwitch v-model="formModel.impliedPolicy" />
+            <Switch v-model:checked="formModel.impliedPolicy" />
           </div>
         </div>
 
@@ -106,7 +106,7 @@
           <Button variant="outline" @click="cancelAdd">{{ t('Cancel') }}</Button>
           <Button variant="default" :loading="submitting" @click="submitForm">{{ t('Submit') }}</Button>
         </div>
-      </AppCard>
+      </div>
     </template>
 
     <users-user-acedit
@@ -122,7 +122,9 @@ import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import { AppCard, AppDateTimePicker, AppSwitch, AppTextarea } from '@/components/app'
+import { AppDateTimePicker } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
+import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import dayjs from 'dayjs'
@@ -334,4 +336,4 @@ const deleteItem = async (row: any) => {
     message.error(t('Delete Failed'))
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user/acedit.vue b/components/users/user/acedit.vue
index efbd9fd..0b67ee5 100644
--- a/components/users/user/acedit.vue
+++ b/components/users/user/acedit.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppCard padded class="space-y-4">
+  <div class="space-y-4">
     <div class="grid gap-4 md:grid-cols-2">
       <div class="space-y-2">
         <Label>{{ t('Access Key') }}</Label>
@@ -35,7 +35,7 @@
               {{ t('Automatically inherit the main account policy when enabled.') }}
             </p>
           </div>
-          <AppSwitch v-model="formModel.impliedPolicy" />
+          <Switch v-model:checked="formModel.impliedPolicy" />
         </div>
         <div class="flex items-center justify-between">
           <div>
@@ -44,7 +44,7 @@
               {{ formModel.accountStatus === 'on' ? t('Available') : t('Disabled') }}
             </p>
           </div>
-          <AppSwitch v-model="statusBoolean" />
+          <Switch v-model:checked="statusBoolean" />
         </div>
       </div>
     </div>
@@ -62,14 +62,15 @@
         {{ t('Submit') }}
       </Button>
     </div>
-  </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppDateTimePicker, AppSwitch } from '@/components/app'
+import { AppDateTimePicker } from '@/components/app'
+import { Switch } from '@/components/ui/switch'
 import { Label } from '@/components/ui/label'
 import dayjs from 'dayjs'
 import { computed, reactive, ref, watch } from 'vue'
@@ -197,4 +198,4 @@ const submitForm = async () => {
     submitting.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user/groups.vue b/components/users/user/groups.vue
index 8f1c1d1..26f50c7 100644
--- a/components/users/user/groups.vue
+++ b/components/users/user/groups.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppCard padded class="space-y-4">
+  <div class="space-y-4">
     <div v-if="!editStatus" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <div class="w-full sm:max-w-xs">
         <Input v-model="searchTerm" :placeholder="t('Search Group')" />
@@ -84,14 +84,13 @@
         </TableRow>
       </TableBody>
     </Table>
-  </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
-import { AppCard } from '@/components/app'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
@@ -225,4 +224,4 @@ const changeMembers = async () => {
     submitting.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user/new.vue b/components/users/user/new.vue
index 398701c..bd00564 100644
--- a/components/users/user/new.vue
+++ b/components/users/user/new.vue
@@ -1,6 +1,6 @@
 <template>
   <AppModal v-model="visible" :title="t('Create User')" size="lg" :close-on-backdrop="false">
-    <AppCard padded class="space-y-6">
+    <div class="space-y-6">
       <div class="grid gap-4 md:grid-cols-2">
         <div class="space-y-2">
           <Label>{{ t('User Name') }}</Label>
@@ -103,7 +103,7 @@
           <Badge v-for="value in editForm.policies" :key="value" variant="secondary">{{ value }}</Badge>
         </div>
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -122,7 +122,7 @@
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
@@ -298,4 +298,4 @@ const togglePolicy = (value: string) => {
     editForm.policies = [...editForm.policies, value]
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user/notice.vue b/components/users/user/notice.vue
index 374ea11..1666396 100644
--- a/components/users/user/notice.vue
+++ b/components/users/user/notice.vue
@@ -1,6 +1,6 @@
 <template>
   <AppModal v-model="visible" :title="t('New user has been created')" size="md" :close-on-backdrop="false">
-    <AppCard padded class="space-y-4">
+    <div class="space-y-4">
       <div class="space-y-2">
         <Label>{{ t('Access Key') }}</Label>
         <copy-input v-model="accessKey" class="w-full" :readonly="true" :copy-icon="true" />
@@ -9,7 +9,7 @@
         <Label>{{ t('Secret Key') }}</Label>
         <copy-input v-model="secretkey" class="w-full" :readonly="true" :copy-icon="true" />
       </div>
-    </AppCard>
+    </div>
 
     <template #footer>
       <div class="flex justify-end gap-2">
@@ -23,7 +23,7 @@
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
-import { AppCard, AppModal } from '@/components/app'
+import { AppModal } from '@/components/app'
 import { Label } from '@/components/ui/label'
 import { download } from '@/utils/export-file'
 import { ref } from 'vue'
@@ -70,4 +70,4 @@ const exportFile = () => {
 defineExpose({
   openDialog,
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/components/users/user/policies.vue b/components/users/user/policies.vue
index 0755acf..a585417 100644
--- a/components/users/user/policies.vue
+++ b/components/users/user/policies.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppCard padded class="space-y-4">
+  <div class="space-y-4">
     <div v-if="!editStatus" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <div class="w-full sm:max-w-xs">
         <Input v-model="searchTerm" :placeholder="t('Search Policy')" />
@@ -84,14 +84,13 @@
         </TableRow>
       </TableBody>
     </Table>
-  </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
-import { AppCard } from '@/components/app'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
@@ -207,4 +206,4 @@ const changePolicies = async () => {
     submitting.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/docs/shadcn-migration-plan.md b/docs/shadcn-migration-plan.md
index d7becca..e07c9b3 100644
--- a/docs/shadcn-migration-plan.md
+++ b/docs/shadcn-migration-plan.md
@@ -24,7 +24,7 @@ Each phase will be committed independently on `refactor/shadcn-vue` to keep roll
 | Buttons | `NButton`, `NButtonGroup` | Use shadcn `Button` / `ButtonGroup` directly; add Tailwind utilities or inline spinner when needed for loading states. |
 | Feedback | `NModal`, `NDrawer`, `NAlert`, `NTooltip`, `NEmpty`, `NProgress`, `NSpin`, `NStatistic`, `NBreadcrumb` | Use shadcn `Dialog`, `Drawer`, `Alert`, `Tooltip`, `Empty` block, `Progress`, `Spinner` etc. Create `app-stat`/`app-empty` wrappers where gaps exist. |
 | Data display | `NCard`, `NList`, `NThing`, `NBadge`, `NTag`, `NDescriptions`, `NDescriptionsItem`, `NCarousel`, `NCollapse`, `NCollapseItem` | Replace with shadcn `Card`, `Badge`, `Accordion`, `Tabs` etc. Implement `AppDescriptionList` (simple definition list) and `AppTag` (using `Badge` or `Chip`). Use `Carousel` block already present. |
-| Tables | `NDataTable`, `NVirtualList` | Implement `AppDataTable` powered by `@tanstack/vue-table` + `ScrollArea`. Support selection, inline actions, slot-based cell rendering. Provide compatible props for datasets currently using render functions. |
+| Tables | `NDataTable`, `NVirtualList` | Implement `DataTable` powered by `@tanstack/vue-table` + `ScrollArea`. Support selection, inline actions, slot-based cell rendering. Provide compatible props for datasets currently using render functions. |
 | Misc | `NDrawerContent`, `NScrollbar`, `NPageHeader`, `NPopover`, `NPopconfirm` | Use `DrawerContent`, `ScrollArea`, `PageHeader` replaced by `div` + `Breadcrumb`, shadcn `Popover`, and build `AppConfirmDialog` on top of AlertDialog. |
 
 ### Additional Dependencies
@@ -36,17 +36,17 @@ Each phase will be committed independently on `refactor/shadcn-vue` to keep roll
 
 - `components/app/AppUiProvider.vue` – wraps shadcn theme providers and exports composables for toasts/dialogs.
 - `components/app/AppSidebar.vue` + related items (menu, user dropdown host) following Sidebar07 markup.
-- `components/app/AppCard.vue`, `AppBadge.vue`, `AppTag.vue` (buttons now import `Button` directly).
+- `components/app/AppCard.vue`, `AppTag.vue` (buttons now import `Button` directly).
 - `components/app/AppForm.vue`, `AppFormField.vue`, `AppFieldGrid.vue` for consistent form layout.
 - `components/app/AppDialog.vue`, `AppDrawer.vue`, `AppConfirmDialog.vue`.
-- `components/app/AppDataTable` module with column definitions, toolbar templates, and selection helpers.
+- `components/DataTable` module with column definitions, toolbar templates, and selection helpers.
 - `components/app/AppDescriptionList.vue`, `AppEmpty.vue`, `AppStatistic.vue`, `AppSpinner.vue`.
 
 These wrappers allow feature screens to migrate with minimal churn and keep visual consistency.
 
 ## Page Migration Order
 
-1. **Access Keys / Users / Policies** – heavy data table usage; verify AppDataTable handles selection and actions.
+1. **Access Keys / Users / Policies** – heavy data table usage; verify DataTable handles selection and actions.
 2. **Objects & Buckets** – exercise drawers/modals, dynamic input, and descriptions.
 3. **Lifecycle / Replication / Events** – validate complex forms, tabs, accordions.
 4. **Performance Dashboard** – ensure stats, badges, carousel translations remain coherent.
diff --git a/docs/shadcn-migration-todo.md b/docs/shadcn-migration-todo.md
index f472683..3a5c126 100644
--- a/docs/shadcn-migration-todo.md
+++ b/docs/shadcn-migration-todo.md
@@ -4,8 +4,8 @@
 - [x] Build `components/app/AppSidebar.vue` and supporting subcomponents to render navigation, language/theme controls, and user menu with ShadCN UI widgets.
 - [x] Replace Naive UI providers in `app.vue` with ShadCN-friendly structure, wiring toast/dialog replacements and preserving color mode handling.
 - [x] Convert shared form components and high-use Naive UI elements (buttons, inputs, tables, etc.) to their ShadCN equivalents, introducing reusable wrappers under `components/app-` when helpful.
-  - [x] Establish shared wrappers (`AppCard`, `AppSelect`, `AppSwitch`, etc.) under `components/app`; buttons/inputs now import shadcn primitives directly.
-  - [x] Build reusable data table primitives (`AppDataTable`, pagination, `useDataTable`) powered by TanStack.
+  - [x] Establish shared wrappers (`AppCard`, `AppSelect`, etc.) under `components/app`; buttons/inputs now import shadcn primitives directly.
+  - [x] Build reusable data table primitives (`DataTable`, pagination, `useDataTable`) powered by TanStack.
   - [x] Convert `components/copy-input.vue` to the new wrappers and toast API.
   - [x] Rebuild the users list tab (`components/users/tabs/user.vue`) with ShadCN table, checkbox, dialog, and button primitives.
   - [x] Rebuild the user groups tab (`components/users/tabs/group.vue`) with ShadCN input, table, checkbox, and dialog primitives.
diff --git a/layouts/default.vue b/layouts/default.vue
index 9a503af..f492ab5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import AppSidebar from '@/components/app/AppSidebar.vue'
-import { Separator } from '@/components/ui/separator'
-import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import AppSidebar from '~/components/app-sidebar.vue'
 
 const route = useRoute()
 const showSidebar = computed(() => !route.path.startsWith('/auth'))
@@ -13,13 +12,7 @@ const showSidebar = computed(() => !route.path.startsWith('/auth'))
   <SidebarProvider v-if="showSidebar">
     <AppSidebar />
     <SidebarInset>
-      <header
-        class="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4 transition-[height] ease-linear backdrop-blur group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-        <div class="flex items-center gap-2 px-4">
-          <SidebarTrigger class="-ml-1" />
-          <Separator orientation="vertical" class="h-4" />
-        </div>
-      </header>
+      <AppTopNav />
       <div class="flex flex-1 flex-col gap-4 pt-0">
         <slot />
       </div>
diff --git a/pages/access-keys/index.vue b/pages/access-keys/index.vue
index 6384080..81c2990 100644
--- a/pages/access-keys/index.vue
+++ b/pages/access-keys/index.vue
@@ -1,33 +1,20 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Access Keys') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="flex flex-col gap-4">
-      <AppCard
-        :padded="false"
-        :content-class="'flex flex-col gap-4 md:flex-row md:items-center md:justify-between p-4'"
-      >
+      <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between w-full">
         <div class="flex w-full max-w-sm items-center gap-2">
           <Icon name="ri:search-line" class="size-4 text-muted-foreground" />
-          <Input
-            v-model="searchTerm"
-            :placeholder="t('Search Access Key')"
-          />
+          <Input v-model="searchTerm" :placeholder="t('Search Access Key')" />
         </div>
         <div class="flex flex-wrap items-center justify-end gap-2">
           <Button variant="outline" @click="changePasswordVisible = true">
             <Icon name="ri:key-2-line" class="size-4" />
             <span>{{ t('Change Password') }}</span>
           </Button>
-          <Button
-            variant="outline"
-            :disabled="!selectedKeys.length"
-            @click="deleteSelected"
-          >
+          <Button variant="outline" :disabled="!selectedKeys.length" @click="deleteSelected">
             <Icon name="ri:delete-bin-5-line" class="size-4" />
             <span>{{ t('Delete Selected') }}</span>
           </Button>
@@ -36,43 +23,37 @@
             <span>{{ t('Add Access Key') }}</span>
           </Button>
         </div>
-      </AppCard>
-
-      <div class="space-y-3">
-        <AppDataTable
-          :table="table"
-          :is-loading="loading"
-          :empty-title="t('No Access Keys')"
-          :empty-description="t('Create a new access key to get started.')"
-          class="overflow-hidden"
-          table-class="min-w-full"
-        />
-        <AppDataTablePagination :table="table" class="px-2 py-3" />
       </div>
-    </page-content>
+    </page-header>
+
+    <div class="space-y-3">
+      <DataTable :table="table" :is-loading="loading" :empty-title="t('No Access Keys')" :empty-description="t('Create a new access key to get started.')" class="overflow-hidden"
+        table-class="min-w-full" />
+      <DataTablePagination :table="table" class="px-2 py-3" />
+    </div>
 
     <NewItem ref="newItemRef" v-model:visible="newItemVisible" @search="refresh" @notice="noticeDialog" />
     <EditItem ref="editItemRef" @search="refresh" />
     <ChangePassword ref="changePasswordModalRef" v-model:visible="changePasswordVisible" />
     <users-user-notice ref="noticeRef" @search="refresh" />
-  </div>
+  </page>
 </template>
 
 <script lang="ts" setup>
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
+import { AppTag } from '@/components/app'
+import { Checkbox } from '@/components/ui/checkbox'
 import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
-import { computed, h, onMounted, reactive, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { AppTag } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import AppDataTablePagination from '@/components/app/data-table/AppDataTablePagination.vue'
-import { useDataTable } from '@/components/app/data-table'
-import { Checkbox } from '@/components/ui/checkbox'
 import { ChangePassword, EditItem, NewItem } from '~/components/access-keys'
+import { useDataTable } from '~/components/data-table'
+import DataTablePagination from '@/components/data-table/data-table-pagination.vue'
+import DataTable from '@/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const dialog = useDialog()
diff --git a/pages/browser/[bucket]/[[key]].vue b/pages/browser/[bucket]/[[key]].vue
index fa0e305..772c8ed 100644
--- a/pages/browser/[bucket]/[[key]].vue
+++ b/pages/browser/[bucket]/[[key]].vue
@@ -1,21 +1,18 @@
 <template>
-  <div>
-    <div>
-      <page-header>
-        <template #title>
-          <div class="flex items-center gap-4">
-            <h1 @click="$router.push(bucketPath())" class="cursor-pointer">{{ bucketName }}</h1>
-            <object-path-links :object-key="key" @click="path => $router.push(bucketPath(path))" />
-          </div>
-        </template>
-      </page-header>
-      <page-content class="flex flex-col gap-4">
-        <object-list v-if="isObjectList" :bucket="bucketName" :path="key" />
-        <object-view v-else :bucket-name="bucketName" :object-key="key" />
-      </page-content>
+  <page>
+    <page-header>
+      <template #title>
+        <div class="flex items-center gap-4">
+          <h1 @click="$router.push(bucketPath())" class="cursor-pointer">{{ bucketName }}</h1>
+          <object-path-links :object-key="key" @click="path => $router.push(bucketPath(path))" />
+        </div>
+      </template>
+    </page-header>
+    <div class="flex flex-col gap-4">
+      <object-list v-if="isObjectList" :bucket="bucketName" :path="key" />
+      <object-view v-else :bucket-name="bucketName" :object-key="key" />
     </div>
-    <footer />
-  </div>
+  </page>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +20,7 @@ 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()
@@ -31,7 +29,7 @@ const message = useMessage()
 const router = useRouter()
 
 // bucketName 和 pageSize 来自路由
-const bucketName = computed(() => route.params.bucket as string)
+const bucketName = computed(() => resolveRouteParam(route.params.bucket))
 // 检测bucketName是否存在，使用 head bucket 接口,如果不存在跳转到/browser
 const isBucketExist = () => {
   return useBucket({ region: route.params.region as string })
@@ -48,10 +46,7 @@ const isBucketExist = () => {
 isBucketExist()
 
 // 当前路径的前缀, example: 'folder1/folder2/'
-const key = computed(() => {
-  const rawKey = route.params.key
-  return rawKey ? decodeURIComponent(String(rawKey)) : ''
-})
+const key = computed(() => resolveRouteParam(route.params.key))
 
 const bucketPath = (path: string | Array<string> = '') => {
   if (Array.isArray(path)) {
@@ -65,5 +60,5 @@ const bucketPath = (path: string | Array<string> = '') => {
   return joinRelativeURL('/browser', encodeURIComponent(bucketName.value), encodeURIComponent(path))
 }
 
-const isObjectList = key.value.endsWith('/') || key.value === ''
+const isObjectList = computed(() => key.value === '' || key.value.endsWith('/'))
 </script>
diff --git a/pages/browser/index.vue b/pages/browser/index.vue
index cca53c6..ddcd1d0 100644
--- a/pages/browser/index.vue
+++ b/pages/browser/index.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Buckets') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="flex flex-col gap-4 overflow-y-auto">
-      <AppCard :padded="false" :content-class="'flex flex-wrap items-center justify-between gap-3 p-4'">
-        <div class="flex w-full max-w-sm items-center gap-2">
-          <Icon name="ri:search-2-line" class="size-4 text-muted-foreground" />
-          <Input v-model="searchTerm" :placeholder="t('Search')" />
+      <template #actions>
+        <div class="flex max-w-sm items-center gap-2">
+          <Icon name="ri:search-2-line" class="size-4 text-muted-foreground -mr-8" />
+          <Input v-model="searchTerm" :placeholder="t('Search')" class="pl-8" />
         </div>
         <div class="flex flex-wrap items-center gap-2">
           <Button variant="secondary" @click="formVisible = true">
@@ -22,29 +19,27 @@
             <span>{{ t('Refresh') }}</span>
           </Button>
         </div>
-      </AppCard>
+      </template>
+    </page-header>
 
-      <AppDataTable :table="table" :is-loading="pending" :empty-title="t('No Buckets')" :empty-description="t('Create a bucket to start storing objects.')" />
-    </page-content>
+    <DataTable :table="table" :is-loading="pending" :empty-title="t('No Buckets')" :empty-description="t('Create a bucket to start storing objects.')" />
+  </page>
 
-    <buckets-new-form :show="formVisible" @update:show="handleFormClosed" />
-    <buckets-info ref="infoRef" />
-  </div>
+  <buckets-new-form :show="formVisible" @update:show="handleFormClosed" />
+  <buckets-info ref="infoRef" />
 </template>
 
 <script lang="ts" setup>
 import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
 
 import { Icon, NuxtLink } from '#components'
-import { AppCard } from '@/components/app'
-import { useDataTable } from '@/components/app/data-table'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
 import { niceBytes } from '@/utils/functions'
 import type { ColumnDef } from '@tanstack/vue-table'
 import dayjs from 'dayjs'
 import { computed, h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/pages/buckets/[key].vue b/pages/buckets/[key].vue
index f02348f..14d80b4 100644
--- a/pages/buckets/[key].vue
+++ b/pages/buckets/[key].vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page>
     <page-header>
       <template #title>
         <div class="flex items-center gap-4">
@@ -7,18 +7,17 @@
         </div>
       </template>
     </page-header>
-    <page-content class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <buckets-info :bucket="bucketName" />
-    </page-content>
-    <footer />
-  </div>
+    </div>
+  </page>
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from '#app';
-import { computed } from 'vue';
+import { useRoute } from '#app'
+import { computed } from 'vue'
 
 // 从路由参数中获取 bucketName, pageSize, continuationToken
-const route = useRoute();
-const bucketName = computed(() => decodeURIComponent(route.params.key as string));
+const route = useRoute()
+const bucketName = computed(() => decodeURIComponent(route.params.key as string))
 </script>
diff --git a/pages/config.vue b/pages/config.vue
index 1ff6791..552c8a2 100644
--- a/pages/config.vue
+++ b/pages/config.vue
@@ -1,108 +1,104 @@
 <script lang="ts" setup>
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
-await setPageLayout('plain');
+await setPageLayout('plain')
 
-import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-const { t } = useI18n();
-const router = useRouter();
-const message = useMessage();
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+const { t } = useI18n()
+const router = useRouter()
+const message = useMessage()
 
-const serverHost = ref('');
-const isValid = ref(false);
+const serverHost = ref('')
+const isValid = ref(false)
 
 const validateAndSave = async () => {
   try {
     if (serverHost.value) {
       // 更宽松的URL验证
-      let urlToValidate = serverHost.value.trim();
+      let urlToValidate = serverHost.value.trim()
 
       // 如果没有协议，自动添加https://
       if (!urlToValidate.match(/^https?:\/\//)) {
-        urlToValidate = 'https://' + urlToValidate;
+        urlToValidate = 'https://' + urlToValidate
       }
 
       // 验证URL格式
-      const url = new URL(urlToValidate);
-      console.log('Valid URL:', url.href); // 调试信息
+      const url = new URL(urlToValidate)
+      console.log('Valid URL:', url.href) // 调试信息
 
       // 保存原始输入（如果用户没输入协议，就保存添加了协议的版本）
-      const urlToSave = serverHost.value.match(/^https?:\/\//) ? serverHost.value : urlToValidate;
-      localStorage.setItem('rustfs-server-host', urlToSave);
+      const urlToSave = serverHost.value.match(/^https?:\/\//) ? serverHost.value : urlToValidate
+      localStorage.setItem('rustfs-server-host', urlToSave)
 
       // 如果我们自动添加了协议，更新输入框显示
       if (!serverHost.value.match(/^https?:\/\//)) {
-        serverHost.value = urlToValidate;
+        serverHost.value = urlToValidate
       }
     } else {
       // 如果为空，清除localStorage，使用默认值
-      localStorage.removeItem('rustfs-server-host');
+      localStorage.removeItem('rustfs-server-host')
     }
 
     // 清除配置缓存
-    const { configManager } = await import('~/utils/config');
-    configManager.clearCache();
+    const { configManager } = await import('~/utils/config')
+    configManager.clearCache()
 
-    message.success(t('Server configuration saved successfully'));
+    message.success(t('Server configuration saved successfully'))
 
     // 延迟后刷新页面并跳转，确保配置完全生效
     setTimeout(() => {
-      window.location.href = '/rustfs/console/auth/login';
-    }, 200);
+      window.location.href = '/rustfs/console/auth/login'
+    }, 200)
   } catch (error) {
-    console.error('URL validation error:', error); // 调试信息
-    message.error(t('Invalid server address format') + ': ' + (error as Error).message);
+    console.error('URL validation error:', error) // 调试信息
+    message.error(t('Invalid server address format') + ': ' + (error as Error).message)
   }
-};
+}
 
 const resetToCurrentHost = async () => {
   // 清除localStorage中的配置，让系统回到默认状态（使用当前host）
-  localStorage.removeItem('rustfs-server-host');
+  localStorage.removeItem('rustfs-server-host')
 
   // 清除配置缓存
-  const { configManager } = await import('~/utils/config');
-  configManager.clearCache();
+  const { configManager } = await import('~/utils/config')
+  configManager.clearCache()
 
   // 清空输入框，表示使用默认配置
-  serverHost.value = '';
+  serverHost.value = ''
 
-  message.success(t('Reset to default successfully'));
+  message.success(t('Reset to default successfully'))
 
   // 延迟后跳转到登录页面，确保配置完全生效
   setTimeout(() => {
-    window.location.href = '/rustfs/console/auth/login';
-  }, 200);
-};
+    window.location.href = '/rustfs/console/auth/login'
+  }, 200)
+}
 
 const skipConfig = () => {
-  router.push('/auth/login');
-};
+  router.push('/auth/login')
+}
 
 onMounted(() => {
   // 检查是否已有配置
-  const saved = localStorage.getItem('rustfs-server-host');
+  const saved = localStorage.getItem('rustfs-server-host')
   if (saved) {
-    serverHost.value = saved;
-    isValid.value = true;
+    serverHost.value = saved
+    isValid.value = true
   }
-});
+})
 </script>
 
 <template>
-  <div class="lg:p-20 flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-neutral-800">
+  <page>
     <img src="~/assets/backgrounds/scillate.svg" class="absolute inset-0 z-0 opacity-45" alt="" />
-    <div
-      class="flex-1 flex w-full z-10 max-w-7xl lg:max-h-[85vh] shadow-lg rounded-lg overflow-hidden mx-auto dark:bg-neutral-800 dark:border-neutral-700"
-    >
+    <div class="flex-1 flex w-full z-10 max-w-7xl lg:max-h-[85vh] shadow-lg rounded-lg overflow-hidden mx-auto dark:bg-neutral-800 dark:border-neutral-700">
       <div class="hidden lg:block w-1/2">
         <auth-heros-static></auth-heros-static>
       </div>
-      <div
-        class="w-full lg:w-1/2 flex flex-col justify-center items-center bg-white dark:bg-neutral-900 dark:border-neutral-700 relative"
-      >
+      <div class="w-full lg:w-1/2 flex flex-col justify-center items-center bg-white dark:bg-neutral-900 dark:border-neutral-700 relative">
         <div class="max-w-sm w-full p-4 sm:p-7">
           <img src="~/assets/logo.svg" class="max-w-28" alt="" />
           <div class="py-6">
@@ -123,11 +119,7 @@ onMounted(() => {
                   <div class="text-xs text-gray-500 mb-2">
                     {{ t('Leave empty to use current host as default') }}
                   </div>
-                  <Input
-                    v-model="serverHost"
-                    type="text"
-                    :placeholder="t('Please enter server address (e.g., http://localhost:9000)')"
-                  />
+                  <Input v-model="serverHost" type="text" :placeholder="t('Please enter server address (e.g., http://localhost:9000)')" />
                   <div class="text-xs text-gray-500 mt-1">
                     {{ t('Example: http://localhost:9000 or https://your-domain.com') }}
                   </div>
@@ -156,7 +148,7 @@ onMounted(() => {
               {{ t('Need help?') }}
               <NuxtLink to="https://docs.rustfs.com" class="text-blue-600 hover:underline">{{
                 t('View Documentation')
-              }}</NuxtLink>
+                }}</NuxtLink>
             </p>
           </div>
 
@@ -171,5 +163,5 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </div>
-</template>
\ No newline at end of file
+  </page>
+</template>
diff --git a/pages/events-target/index.vue b/pages/events-target/index.vue
index bbcfbe2..42b702d 100644
--- a/pages/events-target/index.vue
+++ b/pages/events-target/index.vue
@@ -1,16 +1,10 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Event Destinations') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="flex flex-col gap-4">
-      <AppCard
-        :padded="false"
-        :content-class="'flex flex-col gap-4 md:flex-row md:items-center md:justify-between'"
-      >
+      <div class="flex flex-col gap-4 w-full md:flex-row md:items-center md:justify-between">
         <div class="flex w-full max-w-sm items-center gap-2">
           <Icon name="ri:search-2-line" class="size-4 text-muted-foreground" />
           <Input v-model="searchTerm" :placeholder="t('Search')" />
@@ -25,33 +19,26 @@
             <span>{{ t('Refresh') }}</span>
           </Button>
         </div>
-      </AppCard>
+      </div>
+    </page-header>
 
-      <AppCard>
-        <AppDataTable
-          :table="table"
-          :is-loading="pending"
-          :empty-title="t('No Destinations')"
-          :empty-description="t('Create an event destination to forward notifications.')"
-        />
-      </AppCard>
-    </page-content>
+    <DataTable :table="table" :is-loading="pending" :empty-title="t('No Destinations')" :empty-description="t('Create an event destination to forward notifications.')" />
 
     <events-target-new ref="newFormRef" @search="() => refresh()" />
-  </div>
+  </page>
 </template>
 
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
+import { AppTag } from '@/components/app'
 import type { ColumnDef } from '@tanstack/vue-table'
-import { AppCard, AppTag } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
-import { h, computed, ref, watch } from 'vue'
+import { h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -166,4 +153,4 @@ const newFormRef = ref<{ open: () => void }>()
 const addForm = () => {
   newFormRef.value?.open()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/events/index.vue b/pages/events/index.vue
index 15c4cf7..0a5d976 100644
--- a/pages/events/index.vue
+++ b/pages/events/index.vue
@@ -1,48 +1,37 @@
 <template>
-  <div class="space-y-4">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Events') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="space-y-6">
-      <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
-        <div class="w-full max-w-sm space-y-2">
-          <Label for="bucket-select">{{ t('Bucket') }}</Label>
+      <template #actions>
+        <Label for="bucket-select">{{ t('Bucket') }}</Label>
+        <div class="max-w-xs flex-1">
           <Select id="bucket-select" v-model="bucketName" :disabled="!bucketList.length">
             <SelectTrigger>
               <SelectValue :placeholder="t('Please select bucket')" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem
-                v-for="bucket in bucketList"
-                :key="bucket.value"
-                :value="bucket.value"
-              >
+              <SelectItem v-for="bucket in bucketList" :key="bucket.value" :value="bucket.value">
                 {{ bucket.label }}
               </SelectItem>
             </SelectContent>
           </Select>
         </div>
+        <Button type="button" variant="secondary" @click="handleNew">
+          <Icon class="size-4" name="ri:add-line" />
+          <span>{{ t('Add Event Subscription') }}</span>
+        </Button>
+        <Button type="button" variant="secondary" @click="handleRefresh" :disabled="loading">
+          <Icon class="size-4" name="ri:refresh-line" />
+          <span>{{ t('Refresh') }}</span>
+        </Button>
+      </template>
+    </page-header>
 
-        <div class="flex flex-wrap items-center gap-2">
-          <Button type="button" variant="secondary" @click="handleNew">
-            <Icon class="size-4" name="ri:add-line" />
-            <span>{{ t('Add Event Subscription') }}</span>
-          </Button>
-          <Button type="button" variant="secondary" @click="handleRefresh" :disabled="loading">
-            <Icon class="size-4" name="ri:refresh-line" />
-            <span>{{ t('Refresh') }}</span>
-          </Button>
-        </div>
-      </div>
-
+    <div class="space-y-6">
       <div class="relative">
-        <div
-          v-if="loading"
-          class="absolute inset-0 z-10 flex items-center justify-center rounded-lg border bg-background/70 backdrop-blur-sm"
-        >
+        <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center rounded-lg border bg-background/70 backdrop-blur-sm">
           <Spinner class="size-6 text-muted-foreground" />
         </div>
 
@@ -70,11 +59,7 @@
                 </TableCell>
                 <TableCell>
                   <div class="flex flex-wrap gap-1">
-                    <Badge
-                      v-for="event in getDisplayEvents(row.events)"
-                      :key="event"
-                      variant="secondary"
-                    >
+                    <Badge v-for="event in getDisplayEvents(row.events)" :key="event" variant="secondary">
                       {{ event }}
                     </Badge>
                   </div>
@@ -83,13 +68,7 @@
                 <TableCell>{{ row.suffix || '-' }}</TableCell>
                 <TableCell>
                   <div class="flex justify-center">
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="secondary"
-                      class="gap-2"
-                      @click="event => handleRowDelete(row, event)"
-                    >
+                    <Button type="button" size="sm" variant="secondary" class="gap-2" @click="event => handleRowDelete(row, event)">
                       <Icon class="size-4" name="ri:delete-bin-7-line" />
                       {{ t('Delete') }}
                     </Button>
@@ -113,8 +92,8 @@
       </div>
 
       <events-new-form ref="newRef" :bucketName="bucketName" @success="refresh" />
-    </page-content>
-  </div>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/import-export/index.vue b/pages/import-export/index.vue
index 44584dd..f2f7323 100644
--- a/pages/import-export/index.vue
+++ b/pages/import-export/index.vue
@@ -1,16 +1,27 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Import/Export') }}</h1>
       </template>
     </page-header>
 
-    <page-content class="flex flex-col gap-6">
-      <AppTabs :tabs="tabs" v-model="activeTab">
-        <template #iam>
+    <div class="flex flex-col gap-6">
+      <Tabs v-model="activeTab" class="flex flex-col gap-6">
+        <TabsList class="w-full justify-start overflow-x-auto">
+          <TabsTrigger
+            v-for="tab in tabs"
+            :key="tab.key"
+            :value="tab.key"
+            class="capitalize"
+          >
+            {{ tab.label }}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="iam" class="mt-0">
           <div class="space-y-6">
-            <AppCard padded class="space-y-6">
+            <div class="space-y-6">
               <div class="space-y-2">
                 <h2 class="text-lg font-semibold">{{ t('IAM Configuration Export') }}</h2>
                 <p class="text-sm text-muted-foreground">
@@ -61,9 +72,9 @@
                   <span>{{ isLoading ? t('Exporting...') : t('Export Now') }}</span>
                 </Button>
               </div>
-            </AppCard>
+            </div>
 
-            <AppCard padded class="space-y-6">
+            <div class="space-y-6">
               <div class="space-y-2">
                 <h2 class="text-lg font-semibold">{{ t('IAM Configuration Import') }}</h2>
                 <p class="text-sm text-muted-foreground">
@@ -74,11 +85,7 @@
               <div class="space-y-4">
                 <div class="space-y-3">
                   <h3 class="text-sm font-medium">{{ t('Select ZIP File') }}</h3>
-                  <AppUploadZone
-                    :accept="'.zip'"
-                    :disabled="isLoading"
-                    @change="handleFileSelect"
-                  >
+                  <AppUploadZone :accept="'.zip'" :disabled="isLoading" @change="handleFileSelect">
                     <p class="text-base font-medium">{{ t('Click or drag ZIP file to this area to upload') }}</p>
                     <p class="text-sm text-muted-foreground">
                       {{ t('Only ZIP files are supported, and file size should not exceed 10MB') }}
@@ -109,33 +116,28 @@
                       }}
                     </p>
                   </div>
-                  <Button
-                    variant="default"
-                    size="lg"
-                    :loading="isLoading"
-                    :disabled="isLoading || !selectedFile"
-                    @click="handleImportIam"
-                  >
+                  <Button variant="default" size="lg" :loading="isLoading" :disabled="isLoading || !selectedFile" @click="handleImportIam">
                     <Icon name="ri:upload-2-line" class="size-4" />
                     <span>{{ isLoading ? t('Importing...') : t('Import Now') }}</span>
                   </Button>
                 </div>
               </div>
-            </AppCard>
+            </div>
           </div>
-        </template>
-      </AppTabs>
-    </page-content>
-  </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import { AppCard, AppTabs, AppUploadZone } from '@/components/app'
+import { AppUploadZone } from '@/components/app'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
-import { ref, computed } from 'vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
diff --git a/pages/kms-test.vue b/pages/kms-test.vue
index 7428fec..fc8226a 100644
--- a/pages/kms-test.vue
+++ b/pages/kms-test.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">KMS API Test Page</h1>
@@ -9,7 +9,7 @@
       </template>
     </page-header>
 
-    <page-content>
+    <div>
       <AppCard title="KMS API Test Suite" class="mb-6" content-class="space-y-4">
         <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
           <Button @click="testServiceStatus" :loading="testing.status">Test Service Status</Button>
@@ -19,12 +19,8 @@
         </div>
 
         <AppCard v-if="testResults.length > 0" title="Test Results" content-class="space-y-2">
-          <div
-            v-for="(result, index) in testResults"
-            :key="index"
-            class="rounded border-l-4 p-3"
-            :class="result.success ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/10' : 'border-rose-500 bg-rose-50 dark:bg-rose-900/10'"
-          >
+          <div v-for="(result, index) in testResults" :key="index" class="rounded border-l-4 p-3"
+            :class="result.success ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-900/10' : 'border-rose-500 bg-rose-50 dark:bg-rose-900/10'">
             <div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
               <div>
                 <h4 class="font-medium">{{ result.test }}</h4>
@@ -47,30 +43,23 @@
           <p class="text-sm text-muted-foreground">
             Updated KMS API documentation is available in the project's docs folder.
           </p>
-          <Button
-            as="a"
-            href="/docs/kms/frontend-api-guide-zh.md"
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="outline"
-            class="mt-2 w-fit"
-          >
+          <Button as="a" href="/docs/kms/frontend-api-guide-zh.md" target="_blank" rel="noopener noreferrer" variant="outline" class="mt-2 w-fit">
             View API Documentation
           </Button>
         </AppCard>
       </AppCard>
-    </page-content>
-  </div>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
 import { AppCard, AppTag } from '@/components/app'
-import { Button } from '@/components/ui/button';
-import { useMessage } from '@/composables/ui';
-import { reactive, ref } from 'vue';
+import { Button } from '@/components/ui/button'
+import { useMessage } from '@/composables/ui'
+import { reactive, ref } from 'vue'
 
-const { getKMSStatus, getConfiguration, getKeyList, clearCache } = useSSE();
-const message = useMessage();
+const { getKMSStatus, getConfiguration, getKeyList, clearCache } = useSSE()
+const message = useMessage()
 
 // Test states
 const testing = reactive({
@@ -78,17 +67,17 @@ const testing = reactive({
   config: false,
   keys: false,
   cache: false,
-});
+})
 
 const testResults = ref<
   Array<{
-    test: string;
-    success: boolean;
-    message: string;
-    data?: any;
-    timestamp: Date;
+    test: string
+    success: boolean
+    message: string
+    data?: any
+    timestamp: Date
   }>
->([]);
+>([])
 
 const addTestResult = (test: string, success: boolean, message: string, data?: any) => {
   testResults.value.unshift({
@@ -97,73 +86,73 @@ const addTestResult = (test: string, success: boolean, message: string, data?: a
     message,
     data,
     timestamp: new Date(),
-  });
+  })
 
   // Keep only last 10 results
   if (testResults.value.length > 10) {
-    testResults.value = testResults.value.slice(0, 10);
+    testResults.value = testResults.value.slice(0, 10)
   }
-};
+}
 
 const testServiceStatus = async () => {
-  testing.status = true;
+  testing.status = true
   try {
-    const result = await getKMSStatus();
-    addTestResult('Service Status', true, `Service status: ${result.status}, Healthy: ${result.healthy}`, result);
-    message.success('Service status test passed');
+    const result = await getKMSStatus()
+    addTestResult('Service Status', true, `Service status: ${result.status}, Healthy: ${result.healthy}`, result)
+    message.success('Service status test passed')
   } catch (error) {
-    addTestResult('Service Status', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error);
-    message.error('Service status test failed');
+    addTestResult('Service Status', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error)
+    message.error('Service status test failed')
   } finally {
-    testing.status = false;
+    testing.status = false
   }
-};
+}
 
 const testConfiguration = async () => {
-  testing.config = true;
+  testing.config = true
   try {
-    const result = await getConfiguration();
-    addTestResult('Configuration', true, `Configuration loaded with backend: ${result.backend}`, result);
-    message.success('Configuration test passed');
+    const result = await getConfiguration()
+    addTestResult('Configuration', true, `Configuration loaded with backend: ${result.backend}`, result)
+    message.success('Configuration test passed')
   } catch (error) {
-    addTestResult('Configuration', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error);
-    message.error('Configuration test failed');
+    addTestResult('Configuration', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error)
+    message.error('Configuration test failed')
   } finally {
-    testing.config = false;
+    testing.config = false
   }
-};
+}
 
 const testKeyList = async () => {
-  testing.keys = true;
+  testing.keys = true
   try {
-    const result = await getKeyList();
-    const keyCount = result.keys ? result.keys.length : 0;
-    addTestResult('Key List', true, `Found ${keyCount} keys, Truncated: ${result.truncated || false}`, result);
-    message.success('Key list test passed');
+    const result = await getKeyList()
+    const keyCount = result.keys ? result.keys.length : 0
+    addTestResult('Key List', true, `Found ${keyCount} keys, Truncated: ${result.truncated || false}`, result)
+    message.success('Key list test passed')
   } catch (error) {
-    addTestResult('Key List', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error);
-    message.error('Key list test failed');
+    addTestResult('Key List', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error)
+    message.error('Key list test failed')
   } finally {
-    testing.keys = false;
+    testing.keys = false
   }
-};
+}
 
 const testClearCache = async () => {
-  testing.cache = true;
+  testing.cache = true
   try {
-    const result = await clearCache();
+    const result = await clearCache()
     addTestResult(
       'Clear Cache',
       result.status === 'success',
       `Cache clear result: ${result.status} - ${result.message}`,
       result
-    );
-    message.success('Clear cache test completed');
+    )
+    message.success('Clear cache test completed')
   } catch (error) {
-    addTestResult('Clear Cache', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error);
-    message.error('Clear cache test failed');
+    addTestResult('Clear Cache', false, `Error: ${error instanceof Error ? error.message : 'Unknown error'}`, error)
+    message.error('Clear cache test failed')
   } finally {
-    testing.cache = false;
+    testing.cache = false
   }
-};
+}
 </script>
diff --git a/pages/license/components/license-article.vue b/pages/license/components/license-article.vue
index ddfb66a..ce2d451 100644
--- a/pages/license/components/license-article.vue
+++ b/pages/license/components/license-article.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="space-y-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('License') }}</h1>
       </template>
     </page-header>
 
-    <page-content>
+    <div>
       <AppCard class="space-y-4">
         <div class="text-center">
           <h2 class="text-2xl font-bold">{{ t('Apache License') }}</h2>
@@ -16,12 +16,12 @@
         </div>
         <ScrollArea class="h-[70vh] rounded-lg border">
           <pre class="whitespace-pre-wrap p-6 text-sm leading-6 text-muted-foreground">
-{{ licenseContent }}
-          </pre>
+        {{ licenseContent }}
+      </pre>
         </ScrollArea>
       </AppCard>
-    </page-content>
-  </div>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/license/index.vue b/pages/license/index.vue
index 8e444af..57c8745 100644
--- a/pages/license/index.vue
+++ b/pages/license/index.vue
@@ -6,14 +6,14 @@
       </template>
     </page-header>
 
-    <page-content class="space-y-6">
+    <div class="space-y-6">
       <AppCard class="space-y-4">
         <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div class="flex flex-col gap-2">
             <div class="flex items-center gap-3">
-              <AppBadge :variant="hasValidLicense ? 'primary' : 'danger'">
+              <Badge :variant="hasValidLicense ? 'default' : 'destructive'">
                 {{ t('Enterprise License') }}
-              </AppBadge>
+              </Badge>
               <span :class="['text-sm font-medium', hasValidLicense ? 'text-emerald-600' : 'text-rose-500']">
                 {{ t('Status') }}：{{ hasValidLicense ? t('Normal') : t('Expired') }}
               </span>
@@ -74,7 +74,7 @@
                 <td class="px-4 py-3 font-medium">{{ item.name }}</td>
                 <td class="px-4 py-3 text-muted-foreground">{{ item.description }}</td>
                 <td class="px-4 py-3">
-                  <AppBadge variant="primary">{{ item.status }}</AppBadge>
+                  <Badge variant="default">{{ item.status }}</Badge>
                 </td>
               </tr>
             </tbody>
@@ -91,7 +91,7 @@
           </div>
         </dl>
       </AppCard>
-    </page-content>
+    </div>
   </div>
 
   <LicenseArticle v-else />
@@ -101,8 +101,9 @@
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
+import { AppCard } from '@/components/app'
+import { Badge } from '@/components/ui/badge'
 import dayjs from 'dayjs'
-import { AppBadge, AppCard } from '@/components/app'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { SiteConfig } from '~/types/config'
@@ -217,4 +218,4 @@ const contactSupport = () => {
 const updateLicense = () => {
   // 占位逻辑
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/pages/lifecycle/index.vue b/pages/lifecycle/index.vue
index d3547e2..8fc41d6 100644
--- a/pages/lifecycle/index.vue
+++ b/pages/lifecycle/index.vue
@@ -1,62 +1,42 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Lifecycle') }}</h1>
       </template>
+      <div class="flex-1 flex flex-wrap items-center justify-end gap-2">
+        <Label class="text-sm font-medium text-muted-foreground">{{ t('Bucket') }}</Label>
+        <AppSelect v-model="bucketName" :options="bucketList" :placeholder="t('Please select bucket')" class="max-w-xs" />
+        <Button variant="secondary" @click="handleNew">
+          <Icon name="ri:add-line" class="size-4" />
+          <span>{{ t('Add Lifecycle Rule') }}</span>
+        </Button>
+        <Button variant="outline" @click="() => refresh()">
+          <Icon name="ri:refresh-line" class="size-4" />
+          <span>{{ t('Refresh') }}</span>
+        </Button>
+      </div>
     </page-header>
 
-    <page-content class="flex flex-col gap-4">
-      <AppCard
-        :padded="false"
-        :content-class="'flex flex-col gap-4 p-4 md:flex-row md:items-end md:justify-between'"
-      >
-        <div class="w-full max-w-sm">
-          <Label class="mb-2 block text-sm font-medium text-muted-foreground">{{ t('Bucket') }}</Label>
-          <AppSelect
-            v-model="bucketName"
-            :options="bucketList"
-            :placeholder="t('Please select bucket')"
-            class="w-full"
-          />
-        </div>
-        <div class="flex flex-wrap items-center justify-end gap-2">
-          <Button variant="secondary" @click="handleNew">
-            <Icon name="ri:add-line" class="size-4" />
-            <span>{{ t('Add Lifecycle Rule') }}</span>
-          </Button>
-          <Button variant="outline" @click="() => refresh()">
-            <Icon name="ri:refresh-line" class="size-4" />
-            <span>{{ t('Refresh') }}</span>
-          </Button>
-        </div>
-      </AppCard>
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Data')" :empty-description="t('Create lifecycle rules to automate object transitions and expiration.')" />
 
-      <AppDataTable
-        :table="table"
-        :is-loading="loading"
-        :empty-title="t('No Data')"
-        :empty-description="t('Create lifecycle rules to automate object transitions and expiration.')"
-      />
-
-      <lifecycle-new-form ref="newRef" :bucketName="bucketName" @search="() => refresh()" />
-    </page-content>
-  </div>
+    <lifecycle-new-form ref="newRef" :bucketName="bucketName" @search="() => refresh()" />
+  </page>
 </template>
 
 <script lang="ts" setup>
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import type { Bucket } from '@aws-sdk/client-s3'
-import type { ColumnDef } from '@tanstack/vue-table'
-import { AppCard, AppSelect, AppTag } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
+import { AppSelect, AppTag } from '@/components/app'
 import type { SelectOption } from '@/components/app/AppSelect.vue'
 import { Label } from '@/components/ui/label'
-import { h, computed, ref, watch } from 'vue'
+import type { Bucket } from '@aws-sdk/client-s3'
+import type { ColumnDef } from '@tanstack/vue-table'
+import { computed, h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/pages/performance/index.vue b/pages/performance/index.vue
index fc717c0..fa125f1 100644
--- a/pages/performance/index.vue
+++ b/pages/performance/index.vue
@@ -1,172 +1,162 @@
 <template>
-  <page-header>
-    <template #title>
-      <h1 class="text-2xl font-bold">{{ t('Server Information') }}</h1>
-    </template>
-    <template #actions>
-      <Button variant="outline" @click="getPageData">
-        <Icon name="ri:refresh-line" class="mr-2 size-4" />
-        {{ t('Sync') }}
-      </Button>
-    </template>
-  </page-header>
+  <page>
+    <page-header>
+      <template #title>
+        <h1 class="text-2xl font-bold">{{ t('Server Information') }}</h1>
+      </template>
+      <template #actions>
+        <Button variant="outline" @click="getPageData">
+          <Icon name="ri:refresh-line" class="mr-2 size-4" />
+          {{ t('Sync') }}
+        </Button>
+      </template>
+    </page-header>
 
-  <page-content>
-    <div class="grid gap-4 lg:grid-cols-3">
-      <AppCard class="space-y-1">
-        <p class="text-sm text-muted-foreground">{{ t('Storage Space') }}</p>
-        <p class="text-2xl font-semibold">{{ systemInfo?.buckets?.count ?? 0 }}</p>
-      </AppCard>
-      <AppCard class="space-y-1">
-        <p class="text-sm text-muted-foreground">{{ t('Objects') }}</p>
-        <p class="text-2xl font-semibold">{{ systemInfo?.objects?.count ?? 0 }}</p>
-      </AppCard>
-      <AppCard class="space-y-3">
-        <p class="text-sm font-medium text-muted-foreground">{{ t('Usage Report') }}</p>
-        <div class="flex items-center justify-between gap-4">
-          <span class="text-3xl font-semibold">{{ niceBytes(datausageinfo.total_used_capacity) }}</span>
-          <div class="w-32 space-y-2">
-            <AppProgress :value="usedPercent" />
-            <p class="text-xs text-muted-foreground text-right">{{ usedPercent.toFixed(0) }}%</p>
-          </div>
+    <div>
+      <div class="grid gap-4 lg:grid-cols-3">
+        <div class="space-y-1">
+          <p class="text-sm text-muted-foreground">{{ t('Storage Space') }}</p>
+          <p class="text-2xl font-semibold">{{ systemInfo?.buckets?.count ?? 0 }}</p>
+        </div>
+        <div class="space-y-1">
+          <p class="text-sm text-muted-foreground">{{ t('Objects') }}</p>
+          <p class="text-2xl font-semibold">{{ systemInfo?.objects?.count ?? 0 }}</p>
         </div>
         <div class="space-y-3">
-          <div v-for="item in usageStats" :key="item.label" class="flex items-start gap-3 rounded-lg border p-3">
-            <Icon :name="item.icon" class="size-5 text-muted-foreground" />
-            <div class="flex-1">
-              <p class="text-sm font-medium text-foreground">{{ item.label }}</p>
-              <p class="text-xs text-muted-foreground">{{ item.value }}</p>
+          <p class="text-sm font-medium text-muted-foreground">{{ t('Usage Report') }}</p>
+          <div class="flex items-center justify-between gap-4">
+            <span class="text-3xl font-semibold">{{ niceBytes(datausageinfo.total_used_capacity) }}</span>
+            <div class="w-32 space-y-2">
+              <Progress :model-value="usedPercent" class="h-2" />
+              <p class="text-xs text-muted-foreground text-right">{{ usedPercent.toFixed(0) }}%</p>
+            </div>
+          </div>
+          <div class="space-y-3">
+            <div v-for="item in usageStats" :key="item.label" class="flex items-start gap-3 rounded-lg border p-3">
+              <Icon :name="item.icon" class="size-5 text-muted-foreground" />
+              <div class="flex-1">
+                <p class="text-sm font-medium text-foreground">{{ item.label }}</p>
+                <p class="text-xs text-muted-foreground">{{ item.value }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 grid gap-4 lg:grid-cols-2">
+        <div class="space-y-4">
+          <p class="text-sm font-medium text-muted-foreground">{{ t('Servers') }}</p>
+          <div class="grid gap-3 sm:grid-cols-2">
+            <div class="rounded-lg border p-4">
+              <p class="text-sm text-muted-foreground">{{ t('Online') }}</p>
+              <p class="text-2xl font-semibold">{{ onlineServers }}</p>
+            </div>
+            <div class="rounded-lg border p-4">
+              <p class="text-sm text-muted-foreground">{{ t('Offline') }}</p>
+              <p class="text-2xl font-semibold">{{ offlineServers }}</p>
             </div>
           </div>
         </div>
-      </AppCard>
-    </div>
-
-    <div class="mt-6 grid gap-4 lg:grid-cols-2">
-      <AppCard class="space-y-4">
-        <p class="text-sm font-medium text-muted-foreground">{{ t('Servers') }}</p>
-        <div class="grid gap-3 sm:grid-cols-2">
-          <div class="rounded-lg border p-4">
-            <p class="text-sm text-muted-foreground">{{ t('Online') }}</p>
-            <p class="text-2xl font-semibold">{{ onlineServers }}</p>
-          </div>
-          <div class="rounded-lg border p-4">
-            <p class="text-sm text-muted-foreground">{{ t('Offline') }}</p>
-            <p class="text-2xl font-semibold">{{ offlineServers }}</p>
-          </div>
-        </div>
-      </AppCard>
-      <AppCard class="space-y-4">
-        <p class="text-sm font-medium text-muted-foreground">{{ t('Disks') }}</p>
-        <div class="grid gap-3 sm:grid-cols-2">
-          <div class="rounded-lg border p-4">
-            <p class="text-sm text-muted-foreground">{{ t('Online') }}</p>
-            <p class="text-2xl font-semibold">{{ systemInfo?.backend?.onlineDisks ?? 0 }}</p>
-          </div>
-          <div class="rounded-lg border p-4">
-            <p class="text-sm text-muted-foreground">{{ t('Offline') }}</p>
-            <p class="text-2xl font-semibold">{{ systemInfo?.backend?.offlineDisks ?? 0 }}</p>
-          </div>
-        </div>
-      </AppCard>
-    </div>
-
-    <div class="mt-6 grid gap-4 lg:grid-cols-3">
-      <div
-        v-for="item in backendInfo"
-        :key="item.title"
-        class="rounded-lg border p-4"
-      >
-        <div class="flex items-center gap-3 text-sm font-medium text-muted-foreground">
-          <Icon :name="item.icon" class="size-5" />
-          <span>{{ item.title }}</span>
-        </div>
-        <p class="mt-3 text-xl font-semibold text-foreground">{{ item.value ?? '-' }}</p>
-      </div>
-    </div>
-
-    <AppCard class="mt-6 space-y-4">
-      <div class="flex items-center justify-between">
-        <p class="text-base font-semibold">
-          {{ t('Server List') }} ({{ serverInfo.count ?? 0 }})
-        </p>
-      </div>
-      <Accordion type="single" collapsible class="space-y-2">
-        <AccordionItem
-          v-for="(server, index) in systemInfo?.servers || []"
-          :key="server.endpoint"
-          :value="String(index)"
-        >
-          <AccordionTrigger>
-            <div class="flex flex-col gap-2 text-left sm:flex-row sm:items-center sm:gap-4">
-              <div class="flex items-center gap-2">
-                <span
-                  class="inline-flex h-2 w-2 rounded-full"
-                  :class="server.state === 'online' ? 'bg-emerald-500' : 'bg-rose-500'"
-                />
-                <span class="font-semibold">{{ server.endpoint }}</span>
-              </div>
-              <div class="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
-                <span>
-                  {{ t('Disks') }}: {{ countOnlineDrives(server, 'ok') }} / {{ server.drives.length }}
-                </span>
-                <span>
-                  {{ t('Network') }}: {{ countOnlineNetworks(server, 'online') }} /
-                  {{ Object.keys(server.network).length }}
-                </span>
-                <span>
-                  {{ t('Uptime') }}: {{ dayjs().subtract(server.uptime, 'second').toNow() }}
-                </span>
-              </div>
+        <div class="space-y-4">
+          <p class="text-sm font-medium text-muted-foreground">{{ t('Disks') }}</p>
+          <div class="grid gap-3 sm:grid-cols-2">
+            <div class="rounded-lg border p-4">
+              <p class="text-sm text-muted-foreground">{{ t('Online') }}</p>
+              <p class="text-2xl font-semibold">{{ systemInfo?.backend?.onlineDisks ?? 0 }}</p>
             </div>
-          </AccordionTrigger>
-          <AccordionContent>
-            <p class="pb-2 text-xs text-muted-foreground">{{ t('Version') }}: {{ server.version }}</p>
-            <ScrollArea class="w-full">
-              <div class="flex gap-4 pb-2">
-                <div
-                  v-for="drive in server.drives"
-                  :key="drive.uuid"
-                  class="min-w-[260px] rounded-lg border p-4"
-                >
-                  <p class="text-sm font-medium text-muted-foreground">{{ drive.drive_path }}</p>
-                  <p class="mt-1 text-xs text-muted-foreground">
-                    {{ niceBytes(drive.usedspace) }} / {{ niceBytes(drive.totalspace) }}
-                  </p>
-                  <AppProgress :value="drive.totalspace ? (drive.usedspace / drive.totalspace) * 100 : 0" class="mt-3" />
-                  <div class="mt-3 text-xs text-muted-foreground">
-                    <p>
-                      {{ t('Used') }}: <span class="font-medium text-foreground">{{ niceBytes(drive.usedspace) }}</span>
-                    </p>
-                    <p>
-                      {{ t('Available') }}:
-                      <span class="font-medium text-foreground">{{ niceBytes(drive.availspace) }}</span>
-                    </p>
-                  </div>
+            <div class="rounded-lg border p-4">
+              <p class="text-sm text-muted-foreground">{{ t('Offline') }}</p>
+              <p class="text-2xl font-semibold">{{ systemInfo?.backend?.offlineDisks ?? 0 }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-6 grid gap-4 lg:grid-cols-3">
+        <div v-for="item in backendInfo" :key="item.title" class="rounded-lg border p-4">
+          <div class="flex items-center gap-3 text-sm font-medium text-muted-foreground">
+            <Icon :name="item.icon" class="size-5" />
+            <span>{{ item.title }}</span>
+          </div>
+          <p class="mt-3 text-xl font-semibold text-foreground">{{ item.value ?? '-' }}</p>
+        </div>
+      </div>
+
+      <div class="mt-6 space-y-4">
+        <div class="flex items-center justify-between">
+          <p class="text-base font-semibold">
+            {{ t('Server List') }} ({{ serverInfo.count ?? 0 }})
+          </p>
+        </div>
+        <Accordion type="single" collapsible class="space-y-2">
+          <AccordionItem v-for="(server, index) in systemInfo?.servers || []" :key="server.endpoint" :value="String(index)">
+            <AccordionTrigger>
+              <div class="flex flex-col gap-2 text-left sm:flex-row sm:items-center sm:gap-4">
+                <div class="flex items-center gap-2">
+                  <span class="inline-flex h-2 w-2 rounded-full" :class="server.state === 'online' ? 'bg-emerald-500' : 'bg-rose-500'" />
+                  <span class="font-semibold">{{ server.endpoint }}</span>
+                </div>
+                <div class="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+                  <span>
+                    {{ t('Disks') }}: {{ countOnlineDrives(server, 'ok') }} / {{ server.drives.length }}
+                  </span>
+                  <span>
+                    {{ t('Network') }}: {{ countOnlineNetworks(server, 'online') }} /
+                    {{ Object.keys(server.network).length }}
+                  </span>
+                  <span>
+                    {{ t('Uptime') }}: {{ dayjs().subtract(server.uptime, 'second').toNow() }}
+                  </span>
                 </div>
               </div>
-            </ScrollArea>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </AppCard>
-  </page-content>
+            </AccordionTrigger>
+            <AccordionContent>
+              <p class="pb-2 text-xs text-muted-foreground">{{ t('Version') }}: {{ server.version }}</p>
+              <ScrollArea class="w-full">
+                <div class="flex gap-4 pb-2">
+                  <div v-for="drive in server.drives" :key="drive.uuid" class="min-w-[260px] rounded-lg border p-4">
+                    <p class="text-sm font-medium text-muted-foreground">{{ drive.drive_path }}</p>
+                    <p class="mt-1 text-xs text-muted-foreground">
+                      {{ niceBytes(drive.usedspace) }} / {{ niceBytes(drive.totalspace) }}
+                    </p>
+                    <Progress
+                      :model-value="drive.totalspace ? (drive.usedspace / drive.totalspace) * 100 : 0"
+                      class="mt-3 h-2"
+                    />
+                    <div class="mt-3 text-xs text-muted-foreground">
+                      <p>
+                        {{ t('Used') }}: <span class="font-medium text-foreground">{{ niceBytes(drive.usedspace) }}</span>
+                      </p>
+                      <p>
+                        {{ t('Available') }}:
+                        <span class="font-medium text-foreground">{{ niceBytes(drive.availspace) }}</span>
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </ScrollArea>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
 
-import dayjs from 'dayjs'
-import zhCn from 'dayjs/locale/zh-cn'
-import en from 'dayjs/locale/en'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import { Icon } from '#components'
-import { AppCard, AppProgress } from '@/components/app'
+import Progress from '@/components/ui/progress/Progress.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { niceBytes } from '@/utils/functions'
+import dayjs from 'dayjs'
+import en from 'dayjs/locale/en'
+import zhCn from 'dayjs/locale/zh-cn'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { niceBytes } from '@/utils/functions'
 
 const { t, locale } = useI18n()
 const systemApi = useSystem()
@@ -309,11 +299,3 @@ const getPageData = async () => {
 
 getPageData()
 </script>
-
-<script lang="ts">
-export default {
-  components: {
-    AppCard,
-  },
-}
-</script>
\ No newline at end of file
diff --git a/pages/policies/index.vue b/pages/policies/index.vue
index 5c7f842..fc1bd77 100644
--- a/pages/policies/index.vue
+++ b/pages/policies/index.vue
@@ -1,16 +1,10 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('IAM Policies') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="flex flex-col gap-4">
-      <AppCard
-        :padded="false"
-        :content-class="'flex flex-col gap-4 md:flex-row md:items-center md:justify-between'"
-      >
+      <div class="flex flex-col gap-4 w-full md:flex-row md:items-center md:justify-between">
         <div class="flex w-full max-w-sm items-center gap-2">
           <Icon name="ri:search-2-line" class="size-4 text-muted-foreground" />
           <Input v-model="searchTerm" :placeholder="t('Search')" />
@@ -21,31 +15,25 @@
             <span>{{ t('New Policy') }}</span>
           </Button>
         </div>
-      </AppCard>
+      </div>
+    </page-header>
 
-      <AppDataTable
-        :table="table"
-        :is-loading="loading"
-        :empty-title="t('No Policies')"
-        :empty-description="t('Create a policy to manage access control templates.')"
-      />
-    </page-content>
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Policies')" :empty-description="t('Create a policy to manage access control templates.')" />
 
     <policies-form-item v-model:show="showPolicyForm" :policy="current" @saved="fetchPolicies" />
-  </div>
+  </page>
 </template>
 
 <script lang="ts" setup>
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 import { Icon } from '#components'
 import type { ColumnDef } from '@tanstack/vue-table'
-import { AppCard } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
-import { h, computed, onMounted, ref, watch } from 'vue'
+import { computed, h, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const { $api } = useNuxtApp()
diff --git a/pages/replication/index.vue b/pages/replication/index.vue
index c424db0..b73c5c0 100644
--- a/pages/replication/index.vue
+++ b/pages/replication/index.vue
@@ -1,63 +1,43 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Bucket Replication') }}</h1>
       </template>
+      <div class="flex-1 flex flex-wrap items-center justify-end gap-2">
+        <Label class="text-sm font-medium text-muted-foreground">{{ t('Bucket') }}</Label>
+        <AppSelect v-model="bucketName" :options="bucketList" :placeholder="t('Please select bucket')" class="max-w-xs" />
+        <Button variant="secondary" @click="openForm">
+          <Icon name="ri:add-line" class="size-4" />
+          <span>{{ t('Add Replication Rule') }}</span>
+        </Button>
+        <Button variant="outline" @click="() => loadReplication()">
+          <Icon name="ri:refresh-line" class="size-4" />
+          <span>{{ t('Refresh') }}</span>
+        </Button>
+      </div>
     </page-header>
 
-    <page-content class="flex flex-col gap-4">
-      <AppCard
-        :padded="false"
-        :content-class="'flex flex-col gap-4 p-4 md:flex-row md:items-end md:justify-between'"
-      >
-        <div class="w-full max-w-sm">
-          <Label class="mb-2 block text-sm font-medium text-muted-foreground">{{ t('Bucket') }}</Label>
-          <AppSelect
-            v-model="bucketName"
-            :options="bucketList"
-            :placeholder="t('Please select bucket')"
-            class="w-full"
-          />
-        </div>
-        <div class="flex flex-wrap items-center justify-end gap-2">
-          <Button variant="secondary" @click="openForm">
-            <Icon name="ri:add-line" class="size-4" />
-            <span>{{ t('Add Replication Rule') }}</span>
-          </Button>
-          <Button variant="outline" @click="() => loadReplication()">
-            <Icon name="ri:refresh-line" class="size-4" />
-            <span>{{ t('Refresh') }}</span>
-          </Button>
-        </div>
-      </AppCard>
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Data')" :empty-description="t('Add replication rules to sync objects across buckets.')" />
 
-      <AppDataTable
-        :table="table"
-        :is-loading="loading"
-        :empty-title="t('No Data')"
-        :empty-description="t('Add replication rules to sync objects across buckets.')"
-      />
-
-      <replication-new-form ref="addFormRef" :bucketName="bucketName" @success="() => loadReplication()" />
-    </page-content>
-  </div>
+    <replication-new-form ref="addFormRef" :bucketName="bucketName" @success="() => loadReplication()" />
+  </page>
 </template>
 
 <script lang="ts" setup>
 import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
-import type { Bucket } from '@aws-sdk/client-s3'
-import type { ColumnDef } from '@tanstack/vue-table'
-import { AppCard, AppSelect, AppTag } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
+import { AppSelect, AppTag } from '@/components/app'
 import type { SelectOption } from '@/components/app/AppSelect.vue'
 import { Label } from '@/components/ui/label'
+import { useBucket } from '@/composables/useBucket'
+import type { Bucket } from '@aws-sdk/client-s3'
+import type { ColumnDef } from '@tanstack/vue-table'
 import { computed, h, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useBucket } from '@/composables/useBucket'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/pages/settings.vue b/pages/settings.vue
index d02c1ff..fdd5f77 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { configManager } from '~/utils/config'
-import { AppCard } from '@/components/app'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 const { t } = useI18n()
 const message = useMessage()
@@ -92,40 +91,32 @@ const currentItems = computed(() => [
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Settings') }}</h1>
       </template>
     </page-header>
 
-    <page-content class="flex flex-col gap-6">
-      <AppCard padded class="space-y-4">
+    <div class="flex flex-col gap-6">
+      <div class="space-y-4">
         <h2 class="text-lg font-semibold">{{ t('Current Configuration') }}</h2>
         <dl class="grid grid-cols-1 gap-3 md:grid-cols-2">
-          <div
-            v-for="item in currentItems"
-            :key="item.label"
-            class="rounded-md border p-3"
-          >
+          <div v-for="item in currentItems" :key="item.label" class="rounded-md border p-3">
             <dt class="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               {{ item.label }}
             </dt>
             <dd class="mt-1 text-sm">{{ item.value }}</dd>
           </div>
         </dl>
-      </AppCard>
+      </div>
 
-      <AppCard padded class="space-y-4">
+      <div class="space-y-4">
         <h2 class="text-lg font-semibold">{{ t('Server Configuration') }}</h2>
         <form class="space-y-4" @submit.prevent="saveConfig">
           <div class="space-y-2">
             <Label class="text-sm font-medium">{{ t('Server Address') }}</Label>
-            <Input
-              v-model="formData.serverHost"
-              :placeholder="t('Please enter server address (e.g., http://localhost:9000)')"
-              autocomplete="off"
-            />
+            <Input v-model="formData.serverHost" :placeholder="t('Please enter server address (e.g., http://localhost:9000)')" autocomplete="off" />
             <p class="text-xs text-muted-foreground">
               {{ t('Example: http://localhost:9000 or https://your-domain.com') }}
             </p>
@@ -151,7 +142,7 @@ const currentItems = computed(() => [
             </ul>
           </AlertDescription>
         </Alert>
-      </AppCard>
-    </page-content>
-  </div>
-</template>
\ No newline at end of file
+      </div>
+    </div>
+  </page>
+</template>
diff --git a/pages/site-replication/index.vue b/pages/site-replication/index.vue
index 94dd550..acd3ebc 100644
--- a/pages/site-replication/index.vue
+++ b/pages/site-replication/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div>
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Site Replication') }}</h1>
       </template>
     </page-header>
-    <page-content class="flex flex-col gap-4">
+    <div class="flex flex-col gap-4">
       <div class="flex justify-end">
         <Button type="button" variant="secondary" class="inline-flex items-center gap-2" @click="openForm">
           <Icon name="ri:add-line" class="size-4" />
@@ -20,8 +20,8 @@
       </Card>
 
       <site-replication-new-form ref="addFormRef"></site-replication-new-form>
-    </page-content>
-  </div>
+    </div>
+  </page>
 </template>
 
 <script lang="ts" setup>
diff --git a/pages/sse/index.vue b/pages/sse/index.vue
index 0061279..ac9c225 100644
--- a/pages/sse/index.vue
+++ b/pages/sse/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Server-Side Encryption (SSE) Configuration') }}</h1>
@@ -11,15 +11,15 @@
       </template>
     </page-header>
 
-    <page-content>
+    <div>
       <!-- KMS 状态显示 -->
       <AppCard class="mb-6 space-y-4">
         <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
           <div class="flex flex-col gap-2">
             <div class="flex flex-wrap items-center gap-3">
-              <AppBadge :variant="kmsStatusVariant" class="text-sm uppercase">
+              <Badge :variant="kmsStatusVariant" class="text-sm uppercase">
                 {{ getKmsStatusText() }}
-              </AppBadge>
+              </Badge>
               <span class="text-sm text-muted-foreground">{{ getKmsStatusDescription() }}</span>
               <span v-if="sseKmsForm.kms_backend" class="text-xs text-foreground/70">
                 {{ t('Backend') }}: {{ sseKmsForm.backend_type }}
@@ -27,53 +27,26 @@
             </div>
           </div>
           <div class="flex flex-wrap items-center gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              :loading="refreshingStatus"
-              @click="refreshStatus"
-            >
+            <Button size="sm" variant="outline" :loading="refreshingStatus" @click="refreshStatus">
               <Icon name="ri:refresh-line" class="mr-2 size-4" />
               {{ t('Refresh') }}
             </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              :disabled="sseKmsForm.kms_status !== 'Running'"
-              :loading="clearingCache"
-              @click="clearKMSCache"
-            >
+            <Button size="sm" variant="outline" :disabled="sseKmsForm.kms_status !== 'Running'" :loading="clearingCache" @click="clearKMSCache">
               <Icon name="ri:delete-bin-line" class="mr-2 size-4" />
               {{ t('Clear Cache') }}
             </Button>
-            <Button
-              size="sm"
-              variant="outline"
-              :disabled="sseKmsForm.kms_status !== 'Running'"
-              @click="viewDetailedStatus"
-            >
+            <Button size="sm" variant="outline" :disabled="sseKmsForm.kms_status !== 'Running'" @click="viewDetailedStatus">
               <Icon name="ri:eye-line" class="mr-2 size-4" />
               {{ t('Details') }}
             </Button>
 
-            <Button
-              v-if="hasConfiguration && (sseKmsForm.kms_status === 'Configured' || isErrorStatus(sseKmsForm.kms_status))"
-              size="sm"
-              variant="default"
-              :loading="startingKMS"
-              @click="startKMSService"
-            >
+            <Button v-if="hasConfiguration && (sseKmsForm.kms_status === 'Configured' || isErrorStatus(sseKmsForm.kms_status))" size="sm" variant="default" :loading="startingKMS"
+              @click="startKMSService">
               <Icon name="ri:play-line" class="mr-2 size-4" />
               {{ t('Start KMS') }}
             </Button>
 
-            <Button
-              v-if="hasConfiguration && sseKmsForm.kms_status === 'Running'"
-              size="sm"
-              variant="outline"
-              :loading="stoppingKMS"
-              @click="stopKMSService"
-            >
+            <Button v-if="hasConfiguration && sseKmsForm.kms_status === 'Running'" size="sm" variant="outline" :loading="stoppingKMS" @click="stopKMSService">
               <Icon name="ri:stop-line" class="mr-2 size-4" />
               {{ t('Stop KMS') }}
             </Button>
@@ -82,13 +55,13 @@
       </AppCard>
 
       <!-- KMS 配置区域 -->
-      <AppCard :title="t('KMS Configuration')" class="mb-6" content-class="space-y-6">
+      <div class="mb-6 space-y-6">
+        <div class="space-y-2">
+          <h2 class="text-lg font-semibold">{{ t('KMS Configuration') }}</h2>
+        </div>
         <div v-if="!isEditing" class="space-y-4">
           <!-- 当前配置显示 -->
-          <div
-            v-if="sseKmsForm.backend_type"
-            class="rounded-lg border bg-muted/30 p-4 dark:bg-muted/10"
-          >
+          <div v-if="sseKmsForm.backend_type" class="rounded-lg border bg-muted/30 p-4 dark:bg-muted/10">
             <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
               <div class="space-y-2">
                 <p class="text-sm font-semibold text-foreground">
@@ -150,10 +123,7 @@
           </div>
 
           <!-- 未配置状态 -->
-          <div
-            v-else
-            class="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-8 text-muted-foreground"
-          >
+          <div v-else class="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed py-8 text-muted-foreground">
             <Icon name="ri:key-2-line" class="mb-2 text-4xl" />
             <div class="text-sm">{{ t('No KMS configuration found') }}</div>
             <Button size="sm" variant="default" @click="startEditing">
@@ -173,33 +143,17 @@
 
           <div class="space-y-2">
             <Label for="kms-address">{{ t('Vault Server Address') }}</Label>
-            <Input
-              id="kms-address"
-              v-model="sseKmsForm.address"
-              :placeholder="t('e.g., https://vault.example.com:8200')"
-              autocomplete="off"
-            />
+            <Input id="kms-address" v-model="sseKmsForm.address" :placeholder="t('e.g., https://vault.example.com:8200')" autocomplete="off" />
           </div>
 
           <div class="space-y-3">
             <Label>{{ t('Authentication Method') }}</Label>
-            <AppRadioGroup
-              v-model="sseKmsForm.auth_type"
-              :options="authTypeOptions"
-              class="grid gap-3 md:grid-cols-2"
-              item-class="h-full"
-            />
+            <AppRadioGroup v-model="sseKmsForm.auth_type" :options="authTypeOptions" class="grid gap-3 md:grid-cols-2" item-class="h-full" />
           </div>
 
           <div v-if="sseKmsForm.auth_type === 'token'" class="space-y-2">
             <Label for="kms-token">{{ t('Vault Token') }}</Label>
-            <Input
-              id="kms-token"
-              v-model="sseKmsForm.vault_token"
-              type="password"
-              autocomplete="off"
-              :placeholder="t('Enter your Vault authentication token')"
-            />
+            <Input id="kms-token" v-model="sseKmsForm.vault_token" type="password" autocomplete="off" :placeholder="t('Enter your Vault authentication token')" />
             <p class="text-xs text-muted-foreground">
               {{ t('Required: Vault authentication token') }}
             </p>
@@ -208,25 +162,14 @@
           <div v-if="sseKmsForm.auth_type === 'approle'" class="grid gap-4 md:grid-cols-2">
             <div class="space-y-2">
               <Label for="kms-role-id">{{ t('Role ID') }}</Label>
-              <Input
-                id="kms-role-id"
-                v-model="sseKmsForm.vault_app_role_id"
-                :placeholder="t('Enter AppRole Role ID')"
-                autocomplete="off"
-              />
+              <Input id="kms-role-id" v-model="sseKmsForm.vault_app_role_id" :placeholder="t('Enter AppRole Role ID')" autocomplete="off" />
               <p class="text-xs text-muted-foreground">
                 {{ t('AppRole Role ID from Vault') }}
               </p>
             </div>
             <div class="space-y-2">
               <Label for="kms-secret-id">{{ t('Secret ID') }}</Label>
-              <Input
-                id="kms-secret-id"
-                v-model="sseKmsForm.vault_app_role_secret_id"
-                type="password"
-                autocomplete="off"
-                :placeholder="t('Enter AppRole Secret ID')"
-              />
+              <Input id="kms-secret-id" v-model="sseKmsForm.vault_app_role_secret_id" type="password" autocomplete="off" :placeholder="t('Enter AppRole Secret ID')" />
               <p class="text-xs text-muted-foreground">
                 {{ t('AppRole Secret ID from Vault') }}
               </p>
@@ -235,12 +178,7 @@
 
           <div class="space-y-2">
             <Label for="kms-mount-path">{{ t('Transit Mount Path') }}</Label>
-            <Input
-              id="kms-mount-path"
-              v-model="sseKmsForm.mount_path"
-              :placeholder="t('transit')"
-              autocomplete="off"
-            />
+            <Input id="kms-mount-path" v-model="sseKmsForm.mount_path" :placeholder="t('transit')" autocomplete="off" />
             <p class="text-xs text-muted-foreground">
               {{ t('Transit engine mount path, default: transit') }}
             </p>
@@ -248,12 +186,7 @@
 
           <div class="space-y-2">
             <Label for="kms-kv-mount">{{ t('KV Mount Path') }}</Label>
-            <Input
-              id="kms-kv-mount"
-              v-model="sseKmsForm.kv_mount"
-              :placeholder="t('secret')"
-              autocomplete="off"
-            />
+            <Input id="kms-kv-mount" v-model="sseKmsForm.kv_mount" :placeholder="t('secret')" autocomplete="off" />
             <p class="text-xs text-muted-foreground">
               {{ t('KV storage mount path, default: secret') }}
             </p>
@@ -261,12 +194,7 @@
 
           <div class="space-y-2">
             <Label for="kms-key-prefix">{{ t('Key Path Prefix') }}</Label>
-            <Input
-              id="kms-key-prefix"
-              v-model="sseKmsForm.key_path_prefix"
-              :placeholder="t('rustfs/kms/keys')"
-              autocomplete="off"
-            />
+            <Input id="kms-key-prefix" v-model="sseKmsForm.key_path_prefix" :placeholder="t('rustfs/kms/keys')" autocomplete="off" />
             <p class="text-xs text-muted-foreground">
               {{ t('Key storage path prefix in KV store') }}
             </p>
@@ -275,24 +203,14 @@
           <div class="grid gap-6 md:grid-cols-2">
             <div class="space-y-2">
               <Label for="kms-timeout">{{ t('Timeout (seconds)') }}</Label>
-              <Input
-                id="kms-timeout"
-                v-model="sseKmsForm.timeout_seconds"
-                type="number"
-                placeholder="30"
-              />
+              <Input id="kms-timeout" v-model="sseKmsForm.timeout_seconds" type="number" placeholder="30" />
               <p class="text-xs text-muted-foreground">
                 {{ t('Request timeout in seconds, default: 30') }}
               </p>
             </div>
             <div class="space-y-2">
               <Label for="kms-retry">{{ t('Retry Attempts') }}</Label>
-              <Input
-                id="kms-retry"
-                v-model="sseKmsForm.retry_attempts"
-                type="number"
-                placeholder="3"
-              />
+              <Input id="kms-retry" v-model="sseKmsForm.retry_attempts" type="number" placeholder="3" />
               <p class="text-xs text-muted-foreground">
                 {{ t('Number of retry attempts, default: 3') }}
               </p>
@@ -301,35 +219,25 @@
 
           <div class="space-y-2">
             <Label for="kms-default-key">{{ t('Default Key ID') }}</Label>
-            <Input
-              id="kms-default-key"
-              v-model="sseKmsForm.default_key_id"
-              :placeholder="t('rustfs-master')"
-              autocomplete="off"
-            />
+            <Input id="kms-default-key" v-model="sseKmsForm.default_key_id" :placeholder="t('rustfs-master')" autocomplete="off" />
             <p class="text-xs text-muted-foreground">
               {{ t('Default master key ID for SSE-KMS') }}
             </p>
           </div>
 
-          <div class="space-y-2">
-            <Label>{{ t('Enable Cache') }}</Label>
-            <div class="flex items-center justify-between rounded-md border p-3">
-              <AppSwitch v-model="sseKmsForm.enable_cache" />
+            <div class="space-y-2">
+              <Label>{{ t('Enable Cache') }}</Label>
+              <div class="flex items-center justify-between rounded-md border p-3">
+                <Switch v-model:checked="sseKmsForm.enable_cache" />
+              </div>
+              <p class="text-xs text-muted-foreground">
+                {{ t('Enable caching for better performance, default: true') }}
+              </p>
             </div>
-            <p class="text-xs text-muted-foreground">
-              {{ t('Enable caching for better performance, default: true') }}
-            </p>
-          </div>
 
           <div v-if="sseKmsForm.enable_cache" class="space-y-2">
             <Label for="kms-cache-ttl">{{ t('Cache TTL (seconds)') }}</Label>
-            <Input
-              id="kms-cache-ttl"
-              v-model="sseKmsForm.cache_ttl_seconds"
-              type="number"
-              placeholder="600"
-            />
+            <Input id="kms-cache-ttl" v-model="sseKmsForm.cache_ttl_seconds" type="number" placeholder="600" />
             <p class="text-xs text-muted-foreground">
               {{ t('Cache time-to-live in seconds, default: 600') }}
             </p>
@@ -344,7 +252,7 @@
             </Button>
           </div>
         </form>
-      </AppCard>
+      </div>
 
       <!-- KMS 密钥列表 -->
       <AppCard :title="t('KMS Keys Management')" class="mb-6" content-class="space-y-6">
@@ -391,22 +299,11 @@
                 </AppTag>
               </div>
               <div class="flex flex-wrap gap-2">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  :loading="refreshingKeys"
-                  :disabled="sseKmsForm.kms_status !== 'Running'"
-                  @click="refreshKeyList"
-                >
+                <Button size="sm" variant="outline" :loading="refreshingKeys" :disabled="sseKmsForm.kms_status !== 'Running'" @click="refreshKeyList">
                   <Icon name="ri:refresh-line" class="size-4" />
                   {{ t('Refresh') }}
                 </Button>
-                <Button
-                  size="sm"
-                  variant="default"
-                  :disabled="!canAddKeys"
-                  @click="showCreateKeyModal = true"
-                >
+                <Button size="sm" variant="default" :disabled="!canAddKeys" @click="showCreateKeyModal = true">
                   <Icon name="ri:add-line" class="size-4" />
                   {{ t('Create Master Key') }}
                 </Button>
@@ -414,19 +311,12 @@
             </div>
 
             <!-- 主密钥列表 -->
-            <div
-              v-if="
-                kmsKeys.filter(key => !key.key_type || key.key_type === 'master' || key.key_type === 'CMK').length > 0
-              "
-              class="space-y-3"
-            >
-              <div
-                v-for="key in kmsKeys.filter(
-                  key => !key.key_type || key.key_type === 'master' || key.key_type === 'CMK'
-                )"
-                :key="key.key_id"
-                class="border-l-4 border-purple-500 border rounded-lg p-4 bg-purple-50 dark:bg-purple-900/10"
-              >
+            <div v-if="
+              kmsKeys.filter(key => !key.key_type || key.key_type === 'master' || key.key_type === 'CMK').length > 0
+            " class="space-y-3">
+              <div v-for="key in kmsKeys.filter(
+                key => !key.key_type || key.key_type === 'master' || key.key_type === 'CMK'
+              )" :key="key.key_id" class="border-l-4 border-purple-500 border rounded-lg p-4 bg-purple-50 dark:bg-purple-900/10">
                 <div class="flex justify-between items-start">
                   <div class="flex-1">
                     <div class="flex items-center space-x-2 mb-2">
@@ -455,22 +345,11 @@
                     <Button size="sm" variant="outline" @click="showKeyDetails(key.key_id)">
                       {{ t('Details') }}
                     </Button>
-                    <Button
-                      size="sm"
-                      variant="destructive"
-                      :disabled="mapKeyState(key) === 'PendingDeletion'"
-                      @click="deleteKeyClick(key)"
-                    >
+                    <Button size="sm" variant="destructive" :disabled="mapKeyState(key) === 'PendingDeletion'" @click="deleteKeyClick(key)">
                       {{ mapKeyState(key) === 'PendingDeletion' ? t('Deleting...') : t('Delete') }}
                     </Button>
-                    <Button
-                      v-if="mapKeyState(key) === 'PendingDeletion'"
-                      size="sm"
-                      variant="destructive"
-                      class="bg-destructive/10 text-destructive hover:bg-destructive/20"
-                      :disabled="forceDeleting"
-                      @click="forceDeleteKeyClick(key)"
-                    >
+                    <Button v-if="mapKeyState(key) === 'PendingDeletion'" size="sm" variant="destructive" class="bg-destructive/10 text-destructive hover:bg-destructive/20"
+                      :disabled="forceDeleting" @click="forceDeleteKeyClick(key)">
                       {{ t('Force Delete') }}
                     </Button>
                   </div>
@@ -480,22 +359,17 @@
           </div>
 
           <!-- 数据密钥管理区域 -->
-          <div
-            v-if="kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK').length > 0"
-            class="space-y-4 mt-8"
-          >
+          <div v-if="kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK').length > 0" class="space-y-4 mt-8">
             <div class="flex items-center space-x-3">
               <div class="w-4 h-4 bg-green-500 rounded-full"></div>
               <h3 class="text-lg font-medium">{{ t('Data Keys (DEK)') }}</h3>
               <AppTag tone="success">
-                {{ kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK').length }}
+                {{kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK').length}}
               </AppTag>
             </div>
 
             <!-- 数据密钥说明 -->
-            <div
-              class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3 text-sm"
-            >
+            <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded p-3 text-sm">
               <p class="text-green-700 dark:text-green-300">
                 {{
                   t(
@@ -507,11 +381,8 @@
 
             <!-- 数据密钥列表 -->
             <div class="space-y-3">
-              <div
-                v-for="key in kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK')"
-                :key="key.key_id"
-                class="border-l-4 border-green-500 border rounded-lg p-4 bg-green-50 dark:bg-green-900/10"
-              >
+              <div v-for="key in kmsKeys.filter(key => key.key_type === 'data' || key.key_type === 'DEK')" :key="key.key_id"
+                class="border-l-4 border-green-500 border rounded-lg p-4 bg-green-50 dark:bg-green-900/10">
                 <div class="flex justify-between items-start">
                   <div class="flex-1">
                     <div class="flex items-center space-x-2 mb-2">
@@ -552,11 +423,7 @@
             <Icon name="ri:key-2-line" class="text-4xl mx-auto mb-2" />
             <div>{{ t('No KMS keys found') }}</div>
             <div class="text-sm">{{ t('Create your first KMS key to get started') }}</div>
-            <Button
-              class="mt-2"
-              :disabled="!canAddKeys"
-              @click="showCreateKeyModal = true"
-            >
+            <Button class="mt-2" :disabled="!canAddKeys" @click="showCreateKeyModal = true">
               {{ t('Create First Key') }}
             </Button>
           </div>
@@ -579,39 +446,19 @@
           <!-- 搜索和排序 -->
           <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div class="relative flex-1">
-              <Icon
-                name="ri:search-line"
-                class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-              />
-              <Input
-                v-model="bucketSearchQuery"
-                :placeholder="t('Search buckets...')"
-                class="pl-10"
-              />
-              <button
-                v-if="bucketSearchQuery"
-                type="button"
-                class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition hover:text-foreground"
-                @click="bucketSearchQuery = ''"
-              >
+              <Icon name="ri:search-line" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input v-model="bucketSearchQuery" :placeholder="t('Search buckets...')" class="pl-10" />
+              <button v-if="bucketSearchQuery" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground transition hover:text-foreground"
+                @click="bucketSearchQuery = ''">
                 <Icon name="ri:close-circle-line" class="size-4" />
               </button>
             </div>
-            <AppSelect
-              v-model="bucketSortBy"
-              :options="bucketSortOptions"
-              :placeholder="t('Sort by')"
-              class="w-full sm:w-40"
-            />
+            <AppSelect v-model="bucketSortBy" :options="bucketSortOptions" :placeholder="t('Sort by')" class="w-full sm:w-40" />
           </div>
 
           <!-- Bucket 列表 -->
           <div v-if="filteredBuckets.length > 0" class="space-y-3">
-            <div
-              v-for="bucket in filteredBuckets"
-              :key="bucket.name"
-              class="border rounded-lg p-4 hover:shadow-md transition-shadow"
-            >
+            <div v-for="bucket in filteredBuckets" :key="bucket.name" class="border rounded-lg p-4 hover:shadow-md transition-shadow">
               <div class="flex justify-between items-center">
                 <div class="flex-1">
                   <div class="flex items-center space-x-3">
@@ -642,21 +489,12 @@
 
                   <!-- 操作按钮 -->
                   <div class="flex flex-wrap gap-2">
-                    <Button
-                      size="sm"
-                      variant="default"
-                      @click="configureBucketEncryption(bucket)"
-                    >
+                    <Button size="sm" variant="default" @click="configureBucketEncryption(bucket)">
                       <Icon name="ri:lock-line" class="size-4" />
                       {{ t('Configure') }}
                     </Button>
-                    <Button
-                      v-if="bucket.encryptionStatus === 'Enabled'"
-                      size="sm"
-                      variant="destructive"
-                      class="bg-destructive/10 text-destructive hover:bg-destructive/20"
-                      @click="removeBucketEncryption(bucket)"
-                    >
+                    <Button v-if="bucket.encryptionStatus === 'Enabled'" size="sm" variant="destructive" class="bg-destructive/10 text-destructive hover:bg-destructive/20"
+                      @click="removeBucketEncryption(bucket)">
                       <Icon name="ri:lock-unlock-line" class="size-4" />
                       {{ t('Remove') }}
                     </Button>
@@ -665,10 +503,7 @@
               </div>
 
               <!-- 加密详细信息 -->
-              <div
-                v-if="bucket.encryptionStatus === 'Enabled'"
-                class="mt-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded"
-              >
+              <div v-if="bucket.encryptionStatus === 'Enabled'" class="mt-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded">
                 <div class="text-sm">
                   <div>
                     <strong>{{ t('Algorithm') }}:</strong> {{ bucket.encryptionAlgorithm }}
@@ -689,10 +524,7 @@
           </div>
 
           <!-- 搜索无结果 -->
-          <div
-            v-else-if="!bucketListLoading && buckets.length > 0 && filteredBuckets.length === 0"
-            class="text-center py-8 text-gray-500"
-          >
+          <div v-else-if="!bucketListLoading && buckets.length > 0 && filteredBuckets.length === 0" class="text-center py-8 text-gray-500">
             <Icon name="ri:search-line" class="text-4xl mx-auto mb-2" />
             <div>{{ t('No buckets match your search') }}</div>
             <div class="text-sm">{{ t('Try adjusting your search terms') }}</div>
@@ -707,24 +539,14 @@
       </AppCard>
 
       <!-- 配置 Bucket 加密模态框 -->
-      <AppModal
-        v-model="showBucketEncryptModal"
-        :title="
-          selectedBucket
-            ? t('Configure Encryption for {bucket}', { bucket: selectedBucket.name })
-            : t('Configure Bucket Encryption')
-        "
-        size="lg"
-        :close-on-backdrop="false"
-      >
+      <AppModal v-model="showBucketEncryptModal" :title="selectedBucket
+        ? t('Configure Encryption for {bucket}', { bucket: selectedBucket.name })
+        : t('Configure Bucket Encryption')
+        " size="lg" :close-on-backdrop="false">
         <div class="space-y-4">
           <div class="space-y-2">
             <Label>{{ t('Encryption Type') }}</Label>
-            <AppSelect
-              v-model="bucketEncryptForm.encryptionType"
-              :options="bucketEncryptionOptions"
-              :placeholder="t('Select encryption type')"
-            />
+            <AppSelect v-model="bucketEncryptForm.encryptionType" :options="bucketEncryptionOptions" :placeholder="t('Select encryption type')" />
             <p class="text-xs text-muted-foreground">
               {{ t('Choose the encryption method for this bucket') }}
             </p>
@@ -732,12 +554,7 @@
 
           <div v-if="bucketEncryptForm.encryptionType === 'SSE-KMS'" class="space-y-2">
             <Label>{{ t('KMS Key') }}</Label>
-            <AppSelect
-              v-model="bucketEncryptForm.kmsKeyId"
-              :options="kmsKeyOptions"
-              :placeholder="t('Select KMS key')"
-              :disabled="kmsKeysLoading"
-            />
+            <AppSelect v-model="bucketEncryptForm.kmsKeyId" :options="kmsKeyOptions" :placeholder="t('Select KMS key')" :disabled="kmsKeysLoading" />
             <p class="text-xs text-muted-foreground">
               {{ t('Select the KMS key to use for encryption') }}
             </p>
@@ -760,12 +577,7 @@
       </AppModal>
 
       <!-- 移除加密确认模态框 -->
-      <AppModal
-        v-model="showRemoveEncryptModal"
-        :title="t('Confirm Remove Encryption')"
-        size="lg"
-        :close-on-backdrop="false"
-      >
+      <AppModal v-model="showRemoveEncryptModal" :title="t('Confirm Remove Encryption')" size="lg" :close-on-backdrop="false">
         <div class="flex flex-col items-center gap-2 py-4 text-center text-muted-foreground">
           <Icon name="ri:alert-line" class="text-4xl text-orange-500" />
           <div class="text-lg font-medium text-foreground">
@@ -791,12 +603,7 @@
       </AppModal>
 
       <!-- 创建/编辑密钥模态框 -->
-      <AppModal
-        v-model="showCreateKeyModal"
-        :title="t('Create New Key')"
-        size="lg"
-        :close-on-backdrop="false"
-      >
+      <AppModal v-model="showCreateKeyModal" :title="t('Create New Key')" size="lg" :close-on-backdrop="false">
         <div class="space-y-4">
           <div class="space-y-2">
             <Label>{{ t('Key Name') }}</Label>
@@ -808,11 +615,7 @@
 
           <div class="space-y-2">
             <Label>{{ t('Algorithm') }}</Label>
-            <AppSelect
-              v-model="keyForm.algorithm"
-              :options="algorithmOptions"
-              :placeholder="t('Select encryption algorithm')"
-            />
+            <AppSelect v-model="keyForm.algorithm" :options="algorithmOptions" :placeholder="t('Select encryption algorithm')" />
             <p class="text-xs text-muted-foreground">
               {{ t('Encryption algorithm for the key.') }}
             </p>
@@ -832,12 +635,7 @@
       </AppModal>
 
       <!-- 删除确认模态框 -->
-      <AppModal
-        v-model="showDeleteModal"
-        :title="t('Confirm Delete')"
-        size="lg"
-        :close-on-backdrop="false"
-      >
+      <AppModal v-model="showDeleteModal" :title="t('Confirm Delete')" size="lg" :close-on-backdrop="false">
         <div class="flex flex-col items-center gap-2 py-4 text-center text-muted-foreground">
           <Icon name="ri:alert-line" class="text-4xl text-red-500" />
           <div class="text-lg font-medium text-foreground">
@@ -862,12 +660,7 @@
       </AppModal>
 
       <!-- 强制删除确认模态框 -->
-      <AppModal
-        v-model="showForceDeleteModal"
-        :title="t('Confirm Force Delete')"
-        size="lg"
-        :close-on-backdrop="false"
-      >
+      <AppModal v-model="showForceDeleteModal" :title="t('Confirm Force Delete')" size="lg" :close-on-backdrop="false">
         <div class="flex flex-col items-center gap-2 py-4 text-center text-muted-foreground">
           <Icon name="ri:alert-line" class="text-4xl text-red-500" />
           <div class="text-lg font-medium text-foreground">
@@ -895,11 +688,7 @@
       </AppModal>
 
       <!-- 详细状态查看模态框 -->
-      <AppModal
-        v-model="showDetailedStatusModal"
-        :title="t('Detailed KMS Status')"
-        size="lg"
-      >
+      <AppModal v-model="showDetailedStatusModal" :title="t('Detailed KMS Status')" size="lg">
         <div v-if="detailedStatusData" class="space-y-6">
           <div class="grid gap-4 sm:grid-cols-2">
             <div class="space-y-1">
@@ -939,10 +728,10 @@
                   {{
                     detailedStatusData.cache_stats.hit_count && detailedStatusData.cache_stats.miss_count
                       ? (
-                          (detailedStatusData.cache_stats.hit_count /
-                            (detailedStatusData.cache_stats.hit_count + detailedStatusData.cache_stats.miss_count)) *
-                          100
-                        ).toFixed(1) + '%'
+                        (detailedStatusData.cache_stats.hit_count /
+                          (detailedStatusData.cache_stats.hit_count + detailedStatusData.cache_stats.miss_count)) *
+                        100
+                      ).toFixed(1) + '%'
                       : 'N/A'
                   }}
                 </p>
@@ -970,19 +759,21 @@
           </div>
         </template>
       </AppModal>
-    </page-content>
-  </div>
+    </div>
+  </page>
 </template>
 
 <script setup lang="ts">
-import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
-import { ref, reactive, computed, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessage } from '@/composables/ui';
-import { AppBadge, AppCard, AppRadioGroup, AppSelect, AppSpinner, AppSwitch, AppTag } from '@/components/app'
-import { Label } from '@/components/ui/label';
+import { AppCard, AppRadioGroup, AppSelect, AppSpinner, AppTag } from '@/components/app'
+import { Badge } from '@/components/ui/badge'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+import { useMessage } from '@/composables/ui'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 const {
   getKMSStatus,
   getConfiguration,
@@ -998,126 +789,126 @@ const {
   clearCache,
   getDetailedStatus,
   getKeyDetails,
-} = useSSE();
+} = useSSE()
 
-const { listBuckets, getBucketEncryption, putBucketEncryption, deleteBucketEncryption } = useBucket({});
+const { listBuckets, getBucketEncryption, putBucketEncryption, deleteBucketEncryption } = useBucket({})
 
-const { t } = useI18n();
-const message = useMessage();
+const { t } = useI18n()
+const message = useMessage()
 
 // 状态管理
-const isEditing = ref(false);
-const saving = ref(false);
-const testingConnection = ref(false);
-const refreshingStatus = ref(false);
-const clearingCache = ref(false);
-const showDetailedStatusModal = ref(false);
-const startingKMS = ref(false);
-const stoppingKMS = ref(false);
-const detailedStatusData = ref<any>(null);
+const isEditing = ref(false)
+const saving = ref(false)
+const testingConnection = ref(false)
+const refreshingStatus = ref(false)
+const clearingCache = ref(false)
+const showDetailedStatusModal = ref(false)
+const startingKMS = ref(false)
+const stoppingKMS = ref(false)
+const detailedStatusData = ref<any>(null)
 
 const kmsStatusVariant = computed(() => {
-  const type = getKmsStatusType();
+  const type = getKmsStatusType()
   switch (type) {
     case 'success':
-      return 'primary';
+      return 'default'
     case 'warning':
-      return 'outline';
+      return 'outline'
     case 'danger':
-      return 'danger';
+      return 'destructive'
     case 'info':
-      return 'secondary';
+      return 'secondary'
     default:
-      return 'secondary';
+      return 'secondary'
   }
-});
+})
 
 const kmsStatusTone = computed(() => {
-  const type = getKmsStatusType();
+  const type = getKmsStatusType()
   switch (type) {
     case 'success':
-      return 'success';
+      return 'success'
     case 'warning':
-      return 'warning';
+      return 'warning'
     case 'danger':
-      return 'danger';
+      return 'danger'
     case 'info':
-      return 'info';
+      return 'info'
     default:
-      return 'default';
+      return 'default'
   }
-});
+})
 
 // 密钥管理状态
-const showCreateKeyModal = ref(false);
-const showDeleteModal = ref(false);
-const showForceDeleteModal = ref(false);
-const savingKey = ref(false);
-const deletingKey = ref(false);
-const forceDeleting = ref(false);
-const refreshingKeys = ref(false);
-const keyToDelete = ref<any>(null);
-const keyToForceDelete = ref<any>(null);
+const showCreateKeyModal = ref(false)
+const showDeleteModal = ref(false)
+const showForceDeleteModal = ref(false)
+const savingKey = ref(false)
+const deletingKey = ref(false)
+const forceDeleting = ref(false)
+const refreshingKeys = ref(false)
+const keyToDelete = ref<any>(null)
+const keyToForceDelete = ref<any>(null)
 
 // 本地密钥名称映射存储
-const keyNameMapping = ref<Record<string, string>>({});
+const keyNameMapping = ref<Record<string, string>>({})
 
 // Bucket 加密管理状态
-const buckets = ref<any[]>([]);
-const bucketListLoading = ref(false);
-const bucketSearchQuery = ref('');
-const bucketSortBy = ref('name');
-const showBucketEncryptModal = ref(false);
-const showRemoveEncryptModal = ref(false);
-const savingBucketEncryption = ref(false);
-const removingBucketEncryption = ref(false);
-const selectedBucket = ref<any>(null);
-const kmsKeysLoading = ref(false);
+const buckets = ref<any[]>([])
+const bucketListLoading = ref(false)
+const bucketSearchQuery = ref('')
+const bucketSortBy = ref('name')
+const showBucketEncryptModal = ref(false)
+const showRemoveEncryptModal = ref(false)
+const savingBucketEncryption = ref(false)
+const removingBucketEncryption = ref(false)
+const selectedBucket = ref<any>(null)
+const kmsKeysLoading = ref(false)
 
 // 本地存储键名
-const KEY_NAME_MAPPING_STORAGE_KEY = 'kms_key_name_mapping';
+const KEY_NAME_MAPPING_STORAGE_KEY = 'kms_key_name_mapping'
 
 // 从本地存储加载密钥名称映射
 const loadKeyNameMapping = () => {
   try {
-    const stored = localStorage.getItem(KEY_NAME_MAPPING_STORAGE_KEY);
+    const stored = localStorage.getItem(KEY_NAME_MAPPING_STORAGE_KEY)
     if (stored) {
-      keyNameMapping.value = JSON.parse(stored);
+      keyNameMapping.value = JSON.parse(stored)
     }
   } catch (error) {
-    console.warn('Failed to load key name mapping from localStorage:', error);
-    keyNameMapping.value = {};
+    console.warn('Failed to load key name mapping from localStorage:', error)
+    keyNameMapping.value = {}
   }
-};
+}
 
 // 保存密钥名称映射到本地存储
 const saveKeyNameMapping = () => {
   try {
-    localStorage.setItem(KEY_NAME_MAPPING_STORAGE_KEY, JSON.stringify(keyNameMapping.value));
+    localStorage.setItem(KEY_NAME_MAPPING_STORAGE_KEY, JSON.stringify(keyNameMapping.value))
   } catch (error) {
-    console.warn('Failed to save key name mapping to localStorage:', error);
+    console.warn('Failed to save key name mapping to localStorage:', error)
   }
-};
+}
 
 // 设置密钥名称
 const setKeyName = (keyId: string, name: string) => {
-  keyNameMapping.value[keyId] = name;
-  saveKeyNameMapping();
-};
+  keyNameMapping.value[keyId] = name
+  saveKeyNameMapping()
+}
 
 // 删除密钥名称映射
 const removeKeyName = (keyId: string) => {
-  delete keyNameMapping.value[keyId];
-  saveKeyNameMapping();
-};
+  delete keyNameMapping.value[keyId]
+  saveKeyNameMapping()
+}
 
 // 定义KMS状态类型
-type KmsStatus = 'Running' | 'Configured' | 'NotConfigured' | string | { Error: string } | null;
+type KmsStatus = 'Running' | 'Configured' | 'NotConfigured' | string | { Error: string } | null
 
 // 类型守卫函数
 const isErrorStatus = (status: KmsStatus): status is { Error: string } => {
-  return typeof status === 'object' && status !== null && 'Error' in status;
-};
+  return typeof status === 'object' && status !== null && 'Error' in status
+}
 
 // SSE-KMS 表单数据
 const sseKmsForm = reactive({
@@ -1141,47 +932,47 @@ const sseKmsForm = reactive({
   file_permissions: undefined as number | undefined,
   kms_status: '' as KmsStatus, // KMS状态：Running, Stopped, NotConfigured, Error
   kms_backend: null as {
-    type?: string;
-    address?: string;
-    mount_path?: string;
-    kv_mount?: string;
-    key_path_prefix?: string;
+    type?: string
+    address?: string
+    mount_path?: string
+    kv_mount?: string
+    key_path_prefix?: string
     auth_method?: {
-      type?: string;
-      token?: string;
-      role_id?: string;
-      secret_id?: string;
-    };
+      type?: string
+      token?: string
+      role_id?: string
+      secret_id?: string
+    }
   } | null, // KMS后端信息
   kms_healthy: false, // KMS健康状态
-});
+})
 
 // KMS 密钥列表
-const kmsKeys = ref<any[]>([]);
+const kmsKeys = ref<any[]>([])
 
 // 密钥表单数据
 const keyForm = reactive({
   keyName: '',
   algorithm: 'AES-256',
-});
+})
 
 // Bucket 加密配置表单
 const bucketEncryptForm = reactive({
   encryptionType: '',
   kmsKeyId: '',
-});
+})
 
 // Bucket 排序选项
 const bucketSortOptions = computed(() => [
   { label: t('Name'), value: 'name' },
   { label: t('Creation Date'), value: 'creationDate' },
-]);
+])
 
 // Bucket 加密类型选项
 const bucketEncryptionOptions = computed(() => [
   { label: 'SSE-S3', value: 'SSE-S3' },
   { label: 'SSE-KMS', value: 'SSE-KMS' },
-]);
+])
 
 // 算法选项
 const algorithmOptions = [
@@ -1189,7 +980,7 @@ const algorithmOptions = [
   { label: 'AES-128', value: 'AES-128' },
   { label: 'RSA-2048', value: 'RSA-2048' },
   { label: 'RSA-4096', value: 'RSA-4096' },
-];
+]
 
 // 计算属性
 const hasConfiguration = computed(() => {
@@ -1202,8 +993,8 @@ const hasConfiguration = computed(() => {
     ((sseKmsForm.kms_status && sseKmsForm.kms_status !== 'NotConfigured') ||
       sseKmsForm.address ||
       sseKmsForm.default_key_id)
-  );
-});
+  )
+})
 
 const authTypeOptions = computed(() => [
   {
@@ -1216,44 +1007,44 @@ const authTypeOptions = computed(() => [
     value: 'approle',
     description: t('Use AppRole authentication'),
   },
-]);
+])
 
 // 计算属性：是否可以添加密钥
 const canAddKeys = computed(() => {
   // 只有在配置完成且状态为Running且健康时才允许添加密钥
-  return hasConfiguration.value && sseKmsForm.kms_status === 'Running' && sseKmsForm.kms_healthy;
-});
+  return hasConfiguration.value && sseKmsForm.kms_status === 'Running' && sseKmsForm.kms_healthy
+})
 
 // 计算属性：过滤和排序后的bucket列表
 const filteredBuckets = computed(() => {
-  let filtered = [...buckets.value];
+  let filtered = [...buckets.value]
 
   // 搜索过滤
   if (bucketSearchQuery.value) {
-    const query = bucketSearchQuery.value.toLowerCase();
-    filtered = filtered.filter(bucket => bucket.name.toLowerCase().includes(query));
+    const query = bucketSearchQuery.value.toLowerCase()
+    filtered = filtered.filter(bucket => bucket.name.toLowerCase().includes(query))
   }
 
   // 排序
   filtered.sort((a, b) => {
     if (bucketSortBy.value === 'name') {
-      return a.name.localeCompare(b.name);
+      return a.name.localeCompare(b.name)
     } else if (bucketSortBy.value === 'creationDate') {
-      return new Date(b.creationDate).getTime() - new Date(a.creationDate).getTime();
+      return new Date(b.creationDate).getTime() - new Date(a.creationDate).getTime()
     }
-    return 0;
-  });
+    return 0
+  })
 
-  return filtered;
-});
+  return filtered
+})
 
 // 计算属性：KMS密钥选项（用于bucket加密配置）
 const kmsKeyOptions = computed(() => {
   return getMasterKeys().map((key: any) => ({
     label: getKeyName(key),
     value: key.key_id,
-  }));
-});
+  }))
+})
 
 // 辅助函数：获取主密钥列表
 const getMasterKeys = () => {
@@ -1262,114 +1053,114 @@ const getMasterKeys = () => {
     // 1. 如果有key_type字段，则使用该字段
     // 2. 如果没有key_type字段，默认认为是主密钥
     // 3. 如果key_id以特定前缀开头，可能是数据密钥
-    return !key.key_type || key.key_type === 'master' || key.key_type === 'CMK';
-  });
-};
+    return !key.key_type || key.key_type === 'master' || key.key_type === 'CMK'
+  })
+}
 
 // 辅助函数：获取数据密钥列表
 const getDataKeys = () => {
   return kmsKeys.value.filter(key => {
-    return key.key_type === 'data' || key.key_type === 'DEK';
-  });
-};
+    return key.key_type === 'data' || key.key_type === 'DEK'
+  })
+}
 
 // 辅助函数：判断密钥类型
 const getKeyType = (key: any) => {
   if (key.key_type === 'data' || key.key_type === 'DEK') {
-    return 'data';
+    return 'data'
   }
-  return 'master';
-};
+  return 'master'
+}
 
 // 辅助函数：获取密钥名称
 const getKeyName = (key: any) => {
   // 优先从后端的 description 字段获取名称（持久化的）
   if (key.description) {
-    return key.description;
+    return key.description
   }
 
   // 然后从 metadata 或 tags 中获取名称
   // 优先使用 tags.name（新的标准格式），fallback 到 metadata.name（向后兼容）
-  const name = key.tags?.name || key.metadata?.name;
+  const name = key.tags?.name || key.metadata?.name
   if (name) {
-    return name;
+    return name
   }
 
   // 从本地存储的映射中获取名称（临时的，向后兼容）
-  const localName = keyNameMapping.value[key.key_id];
+  const localName = keyNameMapping.value[key.key_id]
   if (localName) {
-    return localName;
+    return localName
   }
 
   // 最后显示密钥ID的前8位
-  return key.key_id ? `Key-${key.key_id.substring(0, 8)}` : 'Unnamed Key';
-};
+  return key.key_id ? `Key-${key.key_id.substring(0, 8)}` : 'Unnamed Key'
+}
 
 // 辅助函数：获取密钥类型显示名称
 const getKeyTypeName = (key: any) => {
-  const type = getKeyType(key);
-  return type === 'data' ? t('Data Key (DEK)') : t('Master Key (CMK)');
-};
+  const type = getKeyType(key)
+  return type === 'data' ? t('Data Key (DEK)') : t('Master Key (CMK)')
+}
 
 // 辅助函数：获取密钥类型颜色
 const getKeyTypeColor = (key: any) => {
-  const type = getKeyType(key);
-  return type === 'data' ? 'green' : 'purple';
-};
+  const type = getKeyType(key)
+  return type === 'data' ? 'green' : 'purple'
+}
 
 // 方法
 const getKmsStatusType = () => {
-  if (!hasConfiguration.value) return 'default';
+  if (!hasConfiguration.value) return 'default'
 
   // 处理Error状态（可能是对象格式）
   if (isErrorStatus(sseKmsForm.kms_status)) {
-    return 'danger';
+    return 'danger'
   }
 
   // 根据KMS状态返回不同的标签类型
   switch (sseKmsForm.kms_status) {
     case 'Running':
-      return sseKmsForm.kms_healthy ? 'success' : 'warning';
+      return sseKmsForm.kms_healthy ? 'success' : 'warning'
     case 'Configured':
-      return 'info';
+      return 'info'
     case 'Stopped':
-      return 'warning';
+      return 'warning'
     case 'Error':
-      return 'danger';
+      return 'danger'
     case 'NotConfigured':
-      return 'default';
+      return 'default'
     default:
-      return 'default';
+      return 'default'
   }
-};
+}
 
 const getKmsStatusText = () => {
-  if (!hasConfiguration.value) return t('Not Configured');
+  if (!hasConfiguration.value) return t('Not Configured')
 
   // 根据KMS状态返回不同的状态文本
   // 注意：后端的Error状态是 Error(String) 格式，会被序列化为对象
   if (isErrorStatus(sseKmsForm.kms_status)) {
-    return t('Error');
+    return t('Error')
   }
 
   switch (sseKmsForm.kms_status) {
     case 'Running':
-      return sseKmsForm.kms_healthy ? t('Running') : t('Running (Unhealthy)');
+      return sseKmsForm.kms_healthy ? t('Running') : t('Running (Unhealthy)')
     case 'Configured':
-      return t('Configured');
+      return t('Configured')
     case 'NotConfigured':
-      return t('Not Configured');
+      return t('Not Configured')
     default:
-      return t('Unknown');
+      return t('Unknown')
   }
-};
+}
 
 const getKmsStatusDescription = () => {
-  if (!hasConfiguration.value) return t('KMS server is not configured');
+  if (!hasConfiguration.value) return t('KMS server is not configured')
 
   // 处理Error状态（可能是对象格式）
   if (isErrorStatus(sseKmsForm.kms_status)) {
-    return t('KMS server has errors') + ': ' + sseKmsForm.kms_status.Error;
+    return t('KMS server has errors') + ': ' + sseKmsForm.kms_status.Error
   }
 
   // 根据KMS状态返回不同的描述
@@ -1377,100 +1168,100 @@ const getKmsStatusDescription = () => {
     case 'Running':
       // 如果KMS运行但配置详情为空，说明是配置详情不可见的状态
       if (sseKmsForm.kms_healthy && (!sseKmsForm.address || sseKmsForm.address === 'configured-but-hidden')) {
-        return t('KMS server is running, configuration details are private');
+        return t('KMS server is running, configuration details are private')
       }
-      return sseKmsForm.kms_healthy ? t('KMS server is running and healthy') : t('KMS server is running but unhealthy');
+      return sseKmsForm.kms_healthy ? t('KMS server is running and healthy') : t('KMS server is running but unhealthy')
     case 'Configured':
-      return t('KMS server is configured but not running');
+      return t('KMS server is configured but not running')
     case 'NotConfigured':
-      return t('KMS server is not configured');
+      return t('KMS server is not configured')
     default:
-      return t('KMS server status unknown');
+      return t('KMS server status unknown')
   }
-};
+}
 
 // 将后端的 key_state 映射到前端期望的状态值
 const mapKeyState = (key: any) => {
   // 后端使用 key_state 字段，前端使用 status 字段
-  const keyState = key.key_state || key.status;
+  const keyState = key.key_state || key.status
 
   switch (keyState) {
     case 'Enabled':
-      return 'Active';
+      return 'Active'
     case 'Disabled':
-      return 'Disabled';
+      return 'Disabled'
     case 'PendingDeletion':
-      return 'PendingDeletion';
+      return 'PendingDeletion'
     case 'Unavailable':
-      return 'Inactive';
+      return 'Inactive'
     default:
-      return keyState;
+      return keyState
   }
-};
+}
 
 // 获取密钥状态标签类型
 const getKeyStatusType = (key: any) => {
-  const status = mapKeyState(key);
+  const status = mapKeyState(key)
   switch (status) {
     case 'Active':
-      return 'success';
+      return 'success'
     case 'Inactive':
-      return 'default';
+      return 'default'
     case 'PendingDeletion':
-      return 'warning';
+      return 'warning'
     case 'Disabled':
-      return 'default';
+      return 'default'
     default:
-      return 'default';
+      return 'default'
   }
-};
+}
 
 // 获取密钥状态显示文本
 const getKeyStatusText = (key: any) => {
-  const status = mapKeyState(key);
+  const status = mapKeyState(key)
   switch (status) {
     case 'Active':
-      return t('Active');
+      return t('Active')
     case 'Inactive':
-      return t('Inactive');
+      return t('Inactive')
     case 'PendingDeletion':
-      return t('Pending Deletion');
+      return t('Pending Deletion')
     case 'Disabled':
-      return t('Disabled');
+      return t('Disabled')
     default:
-      return status;
+      return status
   }
-};
+}
 
 const getKmsTypeName = (kmsType: string) => {
   const names: Record<string, string> = {
     vault: t('HashiCorp Vault Transit Engine'),
-  };
-  return names[kmsType] || kmsType;
-};
+  }
+  return names[kmsType] || kmsType
+}
 
 // 获取认证方式显示名称
 const getAuthMethodName = () => {
   // 从 KMS 后端信息中获取认证方式
   if (sseKmsForm.kms_backend && sseKmsForm.kms_backend.auth_method) {
     if (sseKmsForm.kms_backend.auth_method.type === 'token') {
-      return t('Token');
+      return t('Token')
     } else if (sseKmsForm.kms_backend.auth_method.type === 'approle') {
-      return t('AppRole');
+      return t('AppRole')
     }
   }
-  return t('Not configured');
-};
+  return t('Not configured')
+}
 
 const showKeyDetails = async (keyId: string) => {
   try {
-    const keyDetails = await getKeyDetails(keyId);
+    const keyDetails = await getKeyDetails(keyId)
     // 可以在这里显示密钥详情模态框，或者跳转到详情页面
-    message.info(`Key Details: ${JSON.stringify(keyDetails, null, 2)}`);
+    message.info(`Key Details: ${JSON.stringify(keyDetails, null, 2)}`)
   } catch (error) {
-    message.error(t('Failed to get key details'));
+    message.error(t('Failed to get key details'))
   }
-};
+}
 
 const formatDate = (date: Date) => {
   return new Intl.DateTimeFormat('en-US', {
@@ -1479,30 +1270,30 @@ const formatDate = (date: Date) => {
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
-  }).format(date);
-};
+  }).format(date)
+}
 
 // KMS配置编辑方法
 const startEditing = () => {
   // 如果是首次编辑，默认选中Vault
   if (!sseKmsForm.backend_type) {
-    sseKmsForm.backend_type = 'vault';
+    sseKmsForm.backend_type = 'vault'
   }
-  isEditing.value = true;
-};
+  isEditing.value = true
+}
 
 const cancelEditing = () => {
-  isEditing.value = false;
+  isEditing.value = false
   // 重置表单到当前配置
-  loadKMSStatus();
-};
+  loadKMSStatus()
+}
 
 // 统一的KMS状态和配置获取方法
 const loadKMSStatus = async () => {
   try {
     // 先获取KMS服务状态
-    const statusResponse = await getKMSStatus();
-    console.log('KMS Status Response:', statusResponse); // 临时调试日志
+    const statusResponse = await getKMSStatus()
+    console.log('KMS Status Response:', statusResponse) // 临时调试日志
 
     // 检查服务状态
     if (!statusResponse || statusResponse.status === 'NotConfigured') {
@@ -1523,41 +1314,41 @@ const loadKMSStatus = async () => {
         kms_status: 'NotConfigured',
         kms_backend: null,
         kms_healthy: false,
-      });
-      isEditing.value = true;
-      message.info(t('KMS is not configured, please configure it first'));
-      return;
+      })
+      isEditing.value = true
+      message.info(t('KMS is not configured, please configure it first'))
+      return
     }
 
     // 如果服务已配置，更新状态信息
-    sseKmsForm.kms_status = statusResponse.status;
-    sseKmsForm.kms_healthy = statusResponse.healthy;
+    sseKmsForm.kms_status = statusResponse.status
+    sseKmsForm.kms_healthy = statusResponse.healthy
 
     // 如果服务状态不是运行中，显示相应信息但不获取配置
     if (statusResponse.status !== 'Running') {
       if (statusResponse.status === 'Stopped') {
-        message.warning(t('KMS service is stopped'));
+        message.warning(t('KMS service is stopped'))
       } else if (statusResponse.status === 'Error') {
-        message.error(t('KMS service has errors'));
+        message.error(t('KMS service has errors'))
       }
       // 仍然尝试获取配置以显示当前设置
     }
 
     // 直接从状态响应中获取配置信息
     if (statusResponse.config_summary) {
-      const configResponse = statusResponse.config_summary;
-      console.log('Config Summary from Status:', configResponse); // 临时调试日志
-      console.log('Config Summary Type:', typeof configResponse);
-      console.log('Config Summary Keys:', Object.keys(configResponse || {}));
+      const configResponse = statusResponse.config_summary
+      console.log('Config Summary from Status:', configResponse) // 临时调试日志
+      console.log('Config Summary Type:', typeof configResponse)
+      console.log('Config Summary Keys:', Object.keys(configResponse || {}))
       if (configResponse.backend_summary) {
-        console.log('Backend Summary:', configResponse.backend_summary);
-        console.log('Backend Summary Keys:', Object.keys(configResponse.backend_summary));
+        console.log('Backend Summary:', configResponse.backend_summary)
+        console.log('Backend Summary Keys:', Object.keys(configResponse.backend_summary))
         if (configResponse.backend_summary.backend_type === 'vault') {
-          console.log('Vault Config:', configResponse.backend_summary);
-          console.log('Vault Address:', configResponse.backend_summary.address);
+          console.log('Vault Config:', configResponse.backend_summary)
+          console.log('Vault Address:', configResponse.backend_summary.address)
         }
       } else {
-        console.log('No backend_summary found in config_summary');
+        console.log('No backend_summary found in config_summary')
       }
 
       Object.assign(sseKmsForm, {
@@ -1566,38 +1357,38 @@ const loadKMSStatus = async () => {
         enable_cache: configResponse.enable_cache !== undefined ? configResponse.enable_cache : true,
         timeout_seconds: configResponse.timeout_seconds || 30,
         retry_attempts: configResponse.retry_attempts || 3,
-      });
+      })
 
       // 处理缓存配置
       if (configResponse.cache_summary) {
-        sseKmsForm.cache_ttl_seconds = configResponse.cache_summary.ttl_seconds || 300;
+        sseKmsForm.cache_ttl_seconds = configResponse.cache_summary.ttl_seconds || 300
       }
 
       // 根据backend_summary提取后端特定配置
       if (configResponse.backend_summary) {
         if (configResponse.backend_summary.backend_type === 'vault') {
           // Vault后端配置
-          const vaultConfig = configResponse.backend_summary;
+          const vaultConfig = configResponse.backend_summary
           Object.assign(sseKmsForm, {
             address: vaultConfig.address || '',
             mount_path: vaultConfig.mount_path || 'transit',
             kv_mount: vaultConfig.kv_mount || 'secret',
             key_path_prefix: vaultConfig.key_path_prefix || 'rustfs/kms/keys',
-          });
+          })
 
           // 设置认证方式（基于auth_method_type推断）
-          sseKmsForm.auth_type = vaultConfig.auth_method_type === 'approle' ? 'approle' : 'token';
-          sseKmsForm.vault_token = '***'; // 显示掩码表示已配置
-          sseKmsForm.vault_app_role_id = '';
-          sseKmsForm.vault_app_role_secret_id = '';
+          sseKmsForm.auth_type = vaultConfig.auth_method_type === 'approle' ? 'approle' : 'token'
+          sseKmsForm.vault_token = '***' // 显示掩码表示已配置
+          sseKmsForm.vault_app_role_id = ''
+          sseKmsForm.vault_app_role_secret_id = ''
         } else if (configResponse.backend_summary.backend_type === 'local') {
           // Local后端配置
-          const localConfig = configResponse.backend_summary;
+          const localConfig = configResponse.backend_summary
           Object.assign(sseKmsForm, {
             key_directory: localConfig.key_dir || '',
             has_master_key: localConfig.has_master_key || false,
             file_permissions: localConfig.file_permissions,
-          });
+          })
         }
       }
 
@@ -1611,15 +1402,15 @@ const loadKMSStatus = async () => {
         auth_method: {
           type: 'token', // 默认假设是token认证
         },
-      };
+      }
 
-      message.success(t('Configuration loaded successfully'));
+      message.success(t('Configuration loaded successfully'))
     } else {
       // 如果没有配置信息，但状态服务正常，说明KMS已配置但详情不可见
-      console.log('No config_summary in status response, KMS may be configured but details are private');
-      sseKmsForm.backend_type = statusResponse.backend_type?.toLowerCase() || 'vault';
-      sseKmsForm.default_key_id = 'configured-but-hidden'; // 设置一个标识表示已配置
-      sseKmsForm.address = 'configured-but-hidden';
+      console.log('No config_summary in status response, KMS may be configured but details are private')
+      sseKmsForm.backend_type = statusResponse.backend_type?.toLowerCase() || 'vault'
+      sseKmsForm.default_key_id = 'configured-but-hidden' // 设置一个标识表示已配置
+      sseKmsForm.address = 'configured-but-hidden'
 
       // 构建最小的后端信息用于显示
       sseKmsForm.kms_backend = {
@@ -1631,10 +1422,10 @@ const loadKMSStatus = async () => {
         auth_method: {
           type: 'configured-but-hidden',
         },
-      };
+      }
     }
   } catch (error) {
-    console.error('Failed to load KMS status:', error);
+    console.error('Failed to load KMS status:', error)
 
     // 检查是否是服务未初始化的错误
     if (error instanceof Error && error.message && error.message.includes('KMS service not initialized')) {
@@ -1655,91 +1446,91 @@ const loadKMSStatus = async () => {
         kms_status: 'NotConfigured',
         kms_backend: null,
         kms_healthy: false,
-      });
-      isEditing.value = true;
-      message.info(t('KMS service not initialized, please configure it first'));
+      })
+      isEditing.value = true
+      message.info(t('KMS service not initialized, please configure it first'))
     } else {
       // 其他错误，进入编辑模式
-      isEditing.value = true;
-      message.error(t('Failed to load KMS status'));
+      isEditing.value = true
+      message.error(t('Failed to load KMS status'))
     }
   }
-};
+}
 
 // 加载密钥列表
 const loadKeyList = async () => {
   try {
-    const response = await getKeyList();
-    console.log('Key List Response:', response); // 调试日志
-    console.log('Key List Response Type:', typeof response);
-    console.log('Key List Response Keys:', Object.keys(response || {}));
+    const response = await getKeyList()
+    console.log('Key List Response:', response) // 调试日志
+    console.log('Key List Response Type:', typeof response)
+    console.log('Key List Response Keys:', Object.keys(response || {}))
 
     // 适配新的API响应格式
     if (response && response.success !== false) {
-      kmsKeys.value = response.keys || [];
-      console.log('Loaded keys:', kmsKeys.value.length);
+      kmsKeys.value = response.keys || []
+      console.log('Loaded keys:', kmsKeys.value.length)
     } else {
-      console.log('Key list failed:', response);
-      message.warning(response?.message || t('Failed to load key list'));
-      kmsKeys.value = [];
+      console.log('Key list failed:', response)
+      message.warning(response?.message || t('Failed to load key list'))
+      kmsKeys.value = []
     }
   } catch (error) {
-    console.error('Failed to load key list:', error);
+    console.error('Failed to load key list:', error)
     console.error('Error details:', {
       message: (error as any)?.message,
       status: (error as any)?.status,
       response: (error as any)?.response,
-    });
-    message.error(t('Failed to load key list'));
-    kmsKeys.value = [];
+    })
+    message.error(t('Failed to load key list'))
+    kmsKeys.value = []
   }
-};
+}
 
 // 刷新密钥列表
 const refreshKeyList = async () => {
   try {
-    refreshingKeys.value = true;
-    await loadKeyList();
-    message.success(t('Key list refreshed'));
+    refreshingKeys.value = true
+    await loadKeyList()
+    message.success(t('Key list refreshed'))
   } catch (error) {
-    console.error('Failed to refresh key list:', error);
-    message.error(t('Failed to refresh key list'));
+    console.error('Failed to refresh key list:', error)
+    message.error(t('Failed to refresh key list'))
   } finally {
-    refreshingKeys.value = false;
+    refreshingKeys.value = false
   }
-};
+}
 
 // 设置为本地开发
 const setLocalDevelopment = async () => {
   try {
     await configureKMS({
       kms_type: 'local',
-    });
+    })
 
-    message.success(t('Local development mode set successfully'));
+    message.success(t('Local development mode set successfully'))
 
     // 重新加载配置状态
-    await loadKMSStatus();
+    await loadKMSStatus()
   } catch (error) {
-    message.error(t('Failed to set local development mode'));
+    message.error(t('Failed to set local development mode'))
   }
-};
+}
 // setLocalDevelopment();
 
 const validateSseKmsForm = () => {
   if (!sseKmsForm.address || !String(sseKmsForm.address).trim()) {
-    message.error(t('Please enter Vault server address'));
-    return false;
+    message.error(t('Please enter Vault server address'))
+    return false
   }
 
   if (!sseKmsForm.default_key_id || !String(sseKmsForm.default_key_id).trim()) {
-    message.error(t('Please enter default key ID'));
-    return false;
+    message.error(t('Please enter default key ID'))
+    return false
   }
 
   if (sseKmsForm.auth_type === 'token' && (!sseKmsForm.vault_token || !String(sseKmsForm.vault_token).trim())) {
-    message.error(t('Please enter Vault token'));
-    return false;
+    message.error(t('Please enter Vault token'))
+    return false
   }
 
   if (
@@ -1749,47 +1540,47 @@ const validateSseKmsForm = () => {
       !sseKmsForm.vault_app_role_secret_id ||
       !String(sseKmsForm.vault_app_role_secret_id).trim())
   ) {
-    message.error(t('Please enter both Role ID and Secret ID'));
-    return false;
+    message.error(t('Please enter both Role ID and Secret ID'))
+    return false
   }
 
-  return true;
-};
+  return true
+}
 
 const validateKeyForm = () => {
   if (!keyForm.keyName || !keyForm.keyName.toString().trim()) {
-    message.error(t('Please enter key name'));
-    return false;
+    message.error(t('Please enter key name'))
+    return false
   }
-  return true;
-};
+  return true
+}
 
 const validateBucketEncryptForm = () => {
   if (!bucketEncryptForm.encryptionType) {
-    message.error(t('Please select encryption type'));
-    return false;
+    message.error(t('Please select encryption type'))
+    return false
   }
 
   if (bucketEncryptForm.encryptionType === 'SSE-KMS' && !bucketEncryptForm.kmsKeyId) {
-    message.error(t('Please select a KMS key for SSE-KMS encryption'));
-    return false;
+    message.error(t('Please select a KMS key for SSE-KMS encryption'))
+    return false
   }
 
   if (!selectedBucket.value) {
-    message.error(t('No bucket selected'));
-    return false;
+    message.error(t('No bucket selected'))
+    return false
   }
 
-  return true;
-};
+  return true
+}
 
 const saveConfiguration = async () => {
   if (!validateSseKmsForm()) {
-    return;
+    return
   }
 
   try {
-    saving.value = true;
+    saving.value = true
 
     // 调用API保存KMS配置 - 适配新的平铺参数格式
     const configData: any = {
@@ -1803,7 +1594,7 @@ const saveConfiguration = async () => {
       default_key_id: sseKmsForm.default_key_id || null,
       enable_cache: sseKmsForm.enable_cache,
       cache_ttl_seconds: sseKmsForm.cache_ttl_seconds || 600,
-    };
+    }
 
     // 根据选择的认证方式添加相应的字段
     if (sseKmsForm.auth_type === 'token') {
@@ -1811,13 +1602,13 @@ const saveConfiguration = async () => {
         // Token 认证方式
         configData.auth_method = {
           token: sseKmsForm.vault_token,
-        };
+        }
       } else if (sseKmsForm.vault_token === '***') {
         // 如果显示的是掩码，说明已经有配置，不需要重新设置认证信息
-        delete configData.auth_method;
+        delete configData.auth_method
       } else {
-        message.error(t('Please enter Vault token'));
-        return;
+        message.error(t('Please enter Vault token'))
+        return
       }
     } else if (sseKmsForm.auth_type === 'approle') {
       if (
@@ -1830,85 +1621,85 @@ const saveConfiguration = async () => {
         configData.auth_method = {
           role_id: sseKmsForm.vault_app_role_id,
           secret_id: sseKmsForm.vault_app_role_secret_id,
-        };
+        }
       } else if (sseKmsForm.vault_app_role_id === '***' || sseKmsForm.vault_app_role_secret_id === '***') {
         // 如果显示的是掩码，说明已经有配置，不需要重新设置认证信息
-        delete configData.auth_method;
+        delete configData.auth_method
       } else {
-        message.error(t('Please enter both Role ID and Secret ID'));
-        return;
+        message.error(t('Please enter both Role ID and Secret ID'))
+        return
       }
     } else {
-      message.error(t('Please select authentication method'));
-      return;
+      message.error(t('Please select authentication method'))
+      return
     }
 
-    const response = await configureKMS(configData);
+    const response = await configureKMS(configData)
 
     // 处理配置响应，更新KMS状态
     if (response && response.status) {
-      sseKmsForm.kms_status = response.status;
+      sseKmsForm.kms_status = response.status
       // 如果配置成功，假设服务健康
       if (response.success !== false) {
-        sseKmsForm.kms_healthy = true;
+        sseKmsForm.kms_healthy = true
       }
     }
 
     // 更新显示的配置信息（保留用户刚刚输入的值）
     // 这样用户可以看到他们刚刚保存的配置
     if (configData.address) {
-      sseKmsForm.address = configData.address;
+      sseKmsForm.address = configData.address
     }
 
-    message.success(t('Configuration saved successfully'));
-    isEditing.value = false;
-    loadKMSStatus();
+    message.success(t('Configuration saved successfully'))
+    isEditing.value = false
+    loadKMSStatus()
   } catch (error) {
-    console.error('KMS Configuration save error:', error);
-    let errorMessage = t('Failed to save configuration');
+    console.error('KMS Configuration save error:', error)
+    let errorMessage = t('Failed to save configuration')
 
     if (error && typeof error === 'object' && 'message' in error) {
-      errorMessage += `: ${error.message}`;
+      errorMessage += `: ${error.message}`
     } else if (error && typeof error === 'object' && 'response' in error) {
-      const response = error.response as any;
+      const response = error.response as any
       if (response?.data?.message) {
-        errorMessage += `: ${response.data.message}`;
+        errorMessage += `: ${response.data.message}`
       } else if (response?.statusText) {
-        errorMessage += `: ${response.statusText}`;
+        errorMessage += `: ${response.statusText}`
       }
     } else if (typeof error === 'string') {
-      errorMessage += `: ${error}`;
+      errorMessage += `: ${error}`
     }
 
-    message.error(errorMessage);
+    message.error(errorMessage)
   } finally {
-    saving.value = false;
+    saving.value = false
   }
-};
+}
 
 const deleteKeyClick = (key: any) => {
   // 如果密钥已经在删除中，显示提示
   if (mapKeyState(key) === 'PendingDeletion') {
-    message.info(t('Key is already pending deletion'));
-    return;
+    message.info(t('Key is already pending deletion'))
+    return
   }
 
-  keyToDelete.value = key;
-  showDeleteModal.value = true;
-};
+  keyToDelete.value = key
+  showDeleteModal.value = true
+}
 
 const forceDeleteKeyClick = (key: any) => {
-  keyToForceDelete.value = key;
-  showForceDeleteModal.value = true;
-};
+  keyToForceDelete.value = key
+  showForceDeleteModal.value = true
+}
 
 const saveKey = async () => {
   if (!validateKeyForm()) {
-    return;
+    return
   }
 
   try {
-    savingKey.value = true;
+    savingKey.value = true
 
     // 调用API创建密钥 - 适配新的参数格式
     const createKeyData = {
@@ -1920,113 +1711,113 @@ const saveKey = async () => {
         created_by: 'console',
         created_at: new Date().toISOString(),
       },
-    };
+    }
 
-    console.log('Creating key with data:', createKeyData);
-    const response = await createKey(createKeyData);
-    console.log('Create key response:', response);
+    console.log('Creating key with data:', createKeyData)
+    const response = await createKey(createKeyData)
+    console.log('Create key response:', response)
 
     // 密钥名称已通过 description 字段保存到后端，无需额外处理
 
-    message.success(t('Key created successfully'));
-    showCreateKeyModal.value = false;
+    message.success(t('Key created successfully'))
+    showCreateKeyModal.value = false
 
     // 重置表单
     Object.assign(keyForm, {
       keyName: '',
       algorithm: 'AES-256',
-    });
+    })
 
     // 重新加载密钥列表
-    await loadKeyList();
+    await loadKeyList()
   } catch (error) {
-    message.error(t('Failed to save key'));
+    message.error(t('Failed to save key'))
   } finally {
-    savingKey.value = false;
+    savingKey.value = false
   }
-};
+}
 
 const confirmDeleteKey = async () => {
   try {
-    deletingKey.value = true;
+    deletingKey.value = true
 
     // 调用API删除密钥 - 适配新的参数格式
-    await deleteKey(keyToDelete.value.key_id);
+    await deleteKey(keyToDelete.value.key_id)
 
     // 密钥删除后，名称信息也随之从后端删除
 
-    message.success(t('Key deleted successfully'));
+    message.success(t('Key deleted successfully'))
 
-    showDeleteModal.value = false;
-    keyToDelete.value = null;
+    showDeleteModal.value = false
+    keyToDelete.value = null
 
     // 重新加载密钥列表
-    await loadKeyList();
+    await loadKeyList()
   } catch (error) {
-    message.error(t('Failed to delete key'));
+    message.error(t('Failed to delete key'))
   } finally {
-    deletingKey.value = false;
+    deletingKey.value = false
   }
-};
+}
 
 const confirmForceDeleteKey = async () => {
   try {
-    forceDeleting.value = true;
+    forceDeleting.value = true
 
     // 调用强制删除API
-    await forceDeleteKey(keyToForceDelete.value.key_id);
+    await forceDeleteKey(keyToForceDelete.value.key_id)
 
-    message.success(t('Key force deleted successfully'));
-    showForceDeleteModal.value = false;
-    keyToForceDelete.value = null;
+    message.success(t('Key force deleted successfully'))
+    showForceDeleteModal.value = false
+    keyToForceDelete.value = null
 
     // 重新加载密钥列表
-    await loadKeyList();
+    await loadKeyList()
   } catch (error) {
-    message.error(t('Failed to force delete key'));
+    message.error(t('Failed to force delete key'))
   } finally {
-    forceDeleting.value = false;
+    forceDeleting.value = false
   }
-};
+}
 
 // 新增功能方法
 const refreshStatus = async () => {
   try {
-    refreshingStatus.value = true;
-    await loadKMSStatus();
-    message.success(t('Status refreshed successfully'));
+    refreshingStatus.value = true
+    await loadKMSStatus()
+    message.success(t('Status refreshed successfully'))
   } catch (error) {
-    message.error(t('Failed to refresh status'));
+    message.error(t('Failed to refresh status'))
   } finally {
-    refreshingStatus.value = false;
+    refreshingStatus.value = false
   }
-};
+}
 
 const clearKMSCache = async () => {
   try {
-    clearingCache.value = true;
-    const result = await clearCache();
+    clearingCache.value = true
+    const result = await clearCache()
     if (result.status === 'success') {
-      message.success(t('Cache cleared successfully'));
+      message.success(t('Cache cleared successfully'))
     } else {
-      message.warning(result.message || t('Cache clear completed with warnings'));
+      message.warning(result.message || t('Cache clear completed with warnings'))
     }
   } catch (error) {
-    message.error(t('Failed to clear cache'));
+    message.error(t('Failed to clear cache'))
   } finally {
-    clearingCache.value = false;
+    clearingCache.value = false
   }
-};
+}
 
 const viewDetailedStatus = async () => {
   try {
-    const detailedStatus = await getDetailedStatus();
-    detailedStatusData.value = detailedStatus;
-    showDetailedStatusModal.value = true;
+    const detailedStatus = await getDetailedStatus()
+    detailedStatusData.value = detailedStatus
+    showDetailedStatusModal.value = true
   } catch (error) {
-    message.error(t('Failed to get detailed status'));
+    message.error(t('Failed to get detailed status'))
   }
-};
+}
 
 // 监听 KMS 类型变化，重置 vault 字段为默认值
 watch(
@@ -2034,56 +1825,56 @@ watch(
   newValue => {
     if (newValue === 'vault') {
       // 切换到 vault 类型时，重置 vault 字段为默认值
-      sseKmsForm.mount_path = 'transit';
-      sseKmsForm.timeout_seconds = 30;
+      sseKmsForm.mount_path = 'transit'
+      sseKmsForm.timeout_seconds = 30
     }
   }
-);
+)
 
 // 启动KMS服务
 const startKMSService = async () => {
   try {
-    startingKMS.value = true;
-    const response = await startKMS();
+    startingKMS.value = true
+    const response = await startKMS()
 
     if (response && response.success) {
-      message.success(t('KMS service started successfully'));
-      sseKmsForm.kms_status = response.status;
-      await loadKMSStatus();
+      message.success(t('KMS service started successfully'))
+      sseKmsForm.kms_status = response.status
+      await loadKMSStatus()
 
       // 刷新密钥列表
-      await loadKeyList();
+      await loadKeyList()
     } else {
-      message.error(t('Failed to start KMS service') + ': ' + (response?.message || 'Unknown error'));
+      message.error(t('Failed to start KMS service') + ': ' + (response?.message || 'Unknown error'))
     }
   } catch (error) {
-    console.error('Failed to start KMS service:', error);
-    message.error(t('Failed to start KMS service'));
+    console.error('Failed to start KMS service:', error)
+    message.error(t('Failed to start KMS service'))
   } finally {
-    startingKMS.value = false;
+    startingKMS.value = false
   }
-};
+}
 
 // 停止KMS服务
 const stopKMSService = async () => {
   try {
-    stoppingKMS.value = true;
-    const response = await stopKMS();
+    stoppingKMS.value = true
+    const response = await stopKMS()
 
     if (response && response.success) {
-      message.success(t('KMS service stopped successfully'));
-      sseKmsForm.kms_status = response.status;
-      await loadKMSStatus();
+      message.success(t('KMS service stopped successfully'))
+      sseKmsForm.kms_status = response.status
+      await loadKMSStatus()
     } else {
-      message.error(t('Failed to stop KMS service') + ': ' + (response?.message || 'Unknown error'));
+      message.error(t('Failed to stop KMS service') + ': ' + (response?.message || 'Unknown error'))
     }
   } catch (error) {
-    console.error('Failed to stop KMS service:', error);
-    message.error(t('Failed to stop KMS service'));
+    console.error('Failed to stop KMS service:', error)
+    message.error(t('Failed to stop KMS service'))
   } finally {
-    stoppingKMS.value = false;
+    stoppingKMS.value = false
   }
-};
+}
 
 // =========================
 // Bucket 加密管理相关方法
@@ -2091,35 +1882,35 @@ const stopKMSService = async () => {
 
 // 加载bucket列表
 const loadBucketList = async () => {
-  bucketListLoading.value = true;
+  bucketListLoading.value = true
   try {
-    const response = await listBuckets();
+    const response = await listBuckets()
     if (response && response.Buckets) {
       // 并行获取每个bucket的加密配置
       const bucketList = await Promise.all(
         response.Buckets.map(async (bucket: any) => {
           try {
-            const encryptionConfig = await getBucketEncryption(bucket.Name);
+            const encryptionConfig = await getBucketEncryption(bucket.Name)
 
-            let encryptionStatus = 'Disabled';
-            let encryptionType = '';
-            let encryptionAlgorithm = '';
-            let kmsKeyId = '';
+            let encryptionStatus = 'Disabled'
+            let encryptionType = ''
+            let encryptionAlgorithm = ''
+            let kmsKeyId = ''
 
-            const rules = encryptionConfig?.ServerSideEncryptionConfiguration?.Rules ?? [];
-            const rule = rules[0];
+            const rules = encryptionConfig?.ServerSideEncryptionConfiguration?.Rules ?? []
+            const rule = rules[0]
 
             if (rule?.ApplyServerSideEncryptionByDefault) {
-              encryptionStatus = 'Enabled';
-              const algorithm = rule.ApplyServerSideEncryptionByDefault.SSEAlgorithm;
+              encryptionStatus = 'Enabled'
+              const algorithm = rule.ApplyServerSideEncryptionByDefault.SSEAlgorithm
 
               if (algorithm === 'aws:kms') {
-                encryptionType = 'SSE-KMS';
-                encryptionAlgorithm = 'AES-256 (KMS)';
-                kmsKeyId = rule.ApplyServerSideEncryptionByDefault.KMSMasterKeyID || '';
+                encryptionType = 'SSE-KMS'
+                encryptionAlgorithm = 'AES-256 (KMS)'
+                kmsKeyId = rule.ApplyServerSideEncryptionByDefault.KMSMasterKeyID || ''
               } else if (algorithm === 'AES256') {
-                encryptionType = 'SSE-S3';
-                encryptionAlgorithm = 'AES-256 (S3)';
+                encryptionType = 'SSE-S3'
+                encryptionAlgorithm = 'AES-256 (S3)'
               }
             }
 
@@ -2130,7 +1921,7 @@ const loadBucketList = async () => {
               encryptionType,
               encryptionAlgorithm,
               kmsKeyId,
-            };
+            }
           } catch (error) {
             // 如果获取加密配置失败（如404），则认为未配置加密
             return {
@@ -2140,57 +1931,57 @@ const loadBucketList = async () => {
               encryptionType: '',
               encryptionAlgorithm: '',
               kmsKeyId: '',
-            };
+            }
           }
         })
-      );
+      )
 
-      buckets.value = bucketList;
+      buckets.value = bucketList
     }
   } catch (error) {
-    console.error('Failed to load bucket list:', error);
-    message.error(t('Failed to load bucket list'));
+    console.error('Failed to load bucket list:', error)
+    message.error(t('Failed to load bucket list'))
   } finally {
-    bucketListLoading.value = false;
+    bucketListLoading.value = false
   }
-};
+}
 
 // 刷新bucket列表
 const refreshBucketList = async () => {
-  await loadBucketList();
-  message.success(t('Bucket list refreshed'));
-};
+  await loadBucketList()
+  message.success(t('Bucket list refreshed'))
+}
 
 // 配置bucket加密
 const configureBucketEncryption = (bucket: any) => {
-  selectedBucket.value = bucket;
+  selectedBucket.value = bucket
 
   // 初始化表单数据
   if (bucket.encryptionStatus === 'Enabled') {
-    bucketEncryptForm.encryptionType = bucket.encryptionType;
-    bucketEncryptForm.kmsKeyId = bucket.kmsKeyId || '';
+    bucketEncryptForm.encryptionType = bucket.encryptionType
+    bucketEncryptForm.kmsKeyId = bucket.kmsKeyId || ''
   } else {
-    bucketEncryptForm.encryptionType = '';
-    bucketEncryptForm.kmsKeyId = '';
+    bucketEncryptForm.encryptionType = ''
+    bucketEncryptForm.kmsKeyId = ''
   }
 
-  showBucketEncryptModal.value = true;
-};
+  showBucketEncryptModal.value = true
+}
 
 // 移除bucket加密
 const removeBucketEncryption = (bucket: any) => {
-  selectedBucket.value = bucket;
-  showRemoveEncryptModal.value = true;
-};
+  selectedBucket.value = bucket
+  showRemoveEncryptModal.value = true
+}
 
 // 保存bucket加密配置
 const saveBucketEncryption = async () => {
   if (!validateBucketEncryptForm()) {
-    return;
+    return
   }
 
   try {
-    savingBucketEncryption.value = true;
+    savingBucketEncryption.value = true
 
     const encryptionConfig: any = {
       Rules: [
@@ -2198,74 +1989,74 @@ const saveBucketEncryption = async () => {
           ApplyServerSideEncryptionByDefault: {},
         },
       ],
-    };
-
-    if (bucketEncryptForm.encryptionType === 'SSE-KMS') {
-      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.SSEAlgorithm = 'aws:kms';
-      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.KMSMasterKeyID = bucketEncryptForm.kmsKeyId;
-    } else if (bucketEncryptForm.encryptionType === 'SSE-S3') {
-      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.SSEAlgorithm = 'AES256';
     }
 
-    await putBucketEncryption(selectedBucket.value.name, encryptionConfig);
+    if (bucketEncryptForm.encryptionType === 'SSE-KMS') {
+      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.SSEAlgorithm = 'aws:kms'
+      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.KMSMasterKeyID = bucketEncryptForm.kmsKeyId
+    } else if (bucketEncryptForm.encryptionType === 'SSE-S3') {
+      encryptionConfig.Rules[0].ApplyServerSideEncryptionByDefault.SSEAlgorithm = 'AES256'
+    }
 
-    message.success(t('Bucket encryption configured successfully'));
-    showBucketEncryptModal.value = false;
+    await putBucketEncryption(selectedBucket.value.name, encryptionConfig)
+
+    message.success(t('Bucket encryption configured successfully'))
+    showBucketEncryptModal.value = false
 
     // 刷新bucket列表
-    await loadBucketList();
+    await loadBucketList()
   } catch (error: any) {
-    console.error('Failed to configure bucket encryption:', error);
-    message.error(t('Failed to configure bucket encryption') + ': ' + error.message);
+    console.error('Failed to configure bucket encryption:', error)
+    message.error(t('Failed to configure bucket encryption') + ': ' + error.message)
   } finally {
-    savingBucketEncryption.value = false;
+    savingBucketEncryption.value = false
   }
-};
+}
 
 // 确认移除bucket加密
 const confirmRemoveBucketEncryption = async () => {
   if (!selectedBucket.value) {
-    message.error(t('No bucket selected'));
-    return;
+    message.error(t('No bucket selected'))
+    return
   }
 
-  removingBucketEncryption.value = true;
+  removingBucketEncryption.value = true
   try {
-    await deleteBucketEncryption(selectedBucket.value.name);
-    message.success(t('Bucket encryption removed successfully'));
-    showRemoveEncryptModal.value = false;
+    await deleteBucketEncryption(selectedBucket.value.name)
+    message.success(t('Bucket encryption removed successfully'))
+    showRemoveEncryptModal.value = false
 
     // 刷新bucket列表
-    await loadBucketList();
+    await loadBucketList()
   } catch (error: any) {
-    console.error('Failed to remove bucket encryption:', error);
-    message.error(t('Failed to remove bucket encryption') + ': ' + error.message);
+    console.error('Failed to remove bucket encryption:', error)
+    message.error(t('Failed to remove bucket encryption') + ': ' + error.message)
   } finally {
-    removingBucketEncryption.value = false;
+    removingBucketEncryption.value = false
   }
-};
+}
 
 // 格式化日期时间
 const formatDateTime = (dateString: string) => {
   try {
-    return new Date(dateString).toLocaleString();
+    return new Date(dateString).toLocaleString()
   } catch (error) {
-    return dateString;
+    return dateString
   }
-};
+}
 
 // 页面加载时获取当前配置和密钥列表
 onMounted(async () => {
-  await loadKMSStatus();
+  await loadKMSStatus()
 
   // 只有在KMS配置正确且状态为Running时才加载密钥列表
   if (sseKmsForm.kms_status === 'Running' && sseKmsForm.kms_healthy) {
-    await loadKeyList();
+    await loadKeyList()
   }
 
   // 加载bucket列表
-  await loadBucketList();
-});
+  await loadBucketList()
+})
 </script>
 
 <style scoped>
diff --git a/pages/tiers/index.vue b/pages/tiers/index.vue
index 9a95152..ce5862e 100644
--- a/pages/tiers/index.vue
+++ b/pages/tiers/index.vue
@@ -1,13 +1,10 @@
 <template>
-  <div class="flex flex-col gap-6">
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Tiers') }}</h1>
       </template>
-    </page-header>
-
-    <page-content class="flex flex-col gap-4">
-      <div class="flex flex-wrap items-center justify-end gap-2">
+      <div class="flex flex-wrap items-center justify-end gap-2 w-full">
         <Button variant="secondary" @click="openNewForm">
           <Icon name="ri:add-line" class="size-4" />
           <span>{{ t('Add Tier') }}</span>
@@ -17,23 +14,13 @@
           <span>{{ t('Refresh') }}</span>
         </Button>
       </div>
+    </page-header>
 
-      <AppDataTable
-        :table="table"
-        :is-loading="loading"
-        :empty-title="t('No Tiers')"
-        :empty-description="t('Add tiers to configure remote storage destinations.')"
-      />
+    <DataTable :table="table" :is-loading="loading" :empty-title="t('No Tiers')" :empty-description="t('Add tiers to configure remote storage destinations.')" />
 
-      <tiers-new-form ref="newFormRef" @search="() => refresh()" />
-      <tiers-change-key
-        ref="changeKeyRef"
-        v-model:visible="changeKeyVisible"
-        v-model:name="selectedTier"
-        @search="() => refresh()"
-      />
-    </page-content>
-  </div>
+    <tiers-new-form ref="newFormRef" @search="() => refresh()" />
+    <tiers-change-key ref="changeKeyRef" v-model:visible="changeKeyVisible" v-model:name="selectedTier" @search="() => refresh()" />
+  </page>
 </template>
 
 <script setup lang="ts">
@@ -41,11 +28,10 @@ import { Button } from '@/components/ui/button'
 
 import { Icon } from '#components'
 import type { ColumnDef } from '@tanstack/vue-table'
-import { AppCard, AppTag } from '@/components/app'
-import AppDataTable from '@/components/app/data-table/AppDataTable.vue'
-import { useDataTable } from '@/components/app/data-table'
-import { computed, h, ref } from 'vue'
+import { h, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDataTable } from '~/components/data-table'
+import DataTable from '~/components/data-table/data-table.vue'
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/pages/users/index.vue b/pages/users/index.vue
index 03ce022..7ee3796 100644
--- a/pages/users/index.vue
+++ b/pages/users/index.vue
@@ -1,35 +1,45 @@
 <template>
-  <div>
+  <page>
     <page-header>
       <template #title>
         <h1 class="text-2xl font-bold">{{ t('Users') }}</h1>
       </template>
     </page-header>
-    <page-content>
-      <AppTabs :tabs="tabs" v-model="activeTab">
-        <template #users>
+    <div>
+      <Tabs v-model="activeTab" class="flex flex-col gap-4">
+        <TabsList class="w-full justify-start overflow-x-auto">
+          <TabsTrigger
+            v-for="tab in tabs"
+            :key="tab.key"
+            :value="tab.key"
+            class="capitalize"
+          >
+            {{ tab.label }}
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="users" class="mt-0">
           <users-tabs-user />
-        </template>
-        <template #userGroup>
+        </TabsContent>
+        <TabsContent value="userGroup" class="mt-0">
           <users-tabs-group />
-        </template>
-      </AppTabs>
-    </page-content>
-  </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  </page>
 </template>
 
 <script setup>
-import { useI18n } from 'vue-i18n';
-import { ref, computed } from 'vue';
-import { AppTabs } from '@/components/app';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n();
-const activeTab = ref('users');
+const { t } = useI18n()
+const activeTab = ref('users')
 
 const tabs = computed(() => [
   { key: 'users', label: t('Users') },
   { key: 'userGroup', label: t('User Groups') },
-]);
+])
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/tests/utils/functions.test.ts b/tests/utils/functions.test.ts
index 784e330..016f7a7 100644
--- a/tests/utils/functions.test.ts
+++ b/tests/utils/functions.test.ts
@@ -1,5 +1,12 @@
 import { describe, expect, it } from 'vitest';
-import { formatBytes, getBytes, makeRandomString, niceBytes } from '../../utils/functions';
+import {
+  formatBytes,
+  getBytes,
+  makeRandomString,
+  niceBytes,
+  resolveRouteParam,
+  safeDecodeURIComponent,
+} from '../../utils/functions';
 
 describe('formatBytes', () => {
   it('should format bytes correctly', () => {
@@ -146,3 +153,38 @@ describe('makeRandomString', () => {
     }
   });
 });
+
+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 a6b3efa..f05ab42 100644
--- a/utils/functions.ts
+++ b/utils/functions.ts
@@ -85,3 +85,36 @@ export function makeRandomString(length = 20): string {
 
   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);
+}