diff --git a/apps/frontend/auto-imports.d.ts b/apps/frontend/auto-imports.d.ts
index 6192ef841..40adc8659 100644
--- a/apps/frontend/auto-imports.d.ts
+++ b/apps/frontend/auto-imports.d.ts
@@ -31,7 +31,7 @@ declare global {
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const createWebsocketV2Context: typeof import('./src/composables/useWebsocket')['createWebsocketV2Context']
+  const createWebsocketV2Context: typeof import('./src/composables/useWebsocketV2')['createWebsocketV2Context']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
@@ -307,6 +307,7 @@ declare global {
   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
   const useWebsocket: typeof import('./src/composables/useWebsocket')['useWebsocket']
+  const useWebsocketV2: typeof import('./src/composables/useWebsocketV2')['useWebsocketV2']
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
@@ -338,6 +339,9 @@ declare global {
   // @ts-ignore
   export type { ClientSendEventFn, ClientCreateWsMessageFn } from './src/composables/useWebsocket'
   import('./src/composables/useWebsocket')
+  // @ts-ignore
+  export type { WsEventHandler, WsRegisterEventHandler } from './src/composables/useWebsocketV2'
+  import('./src/composables/useWebsocketV2')
 }
 
 // for vue template auto import
@@ -365,7 +369,7 @@ declare module 'vue' {
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
-    readonly createWebsocketV2Context: UnwrapRef<typeof import('./src/composables/useWebsocket')['createWebsocketV2Context']>
+    readonly createWebsocketV2Context: UnwrapRef<typeof import('./src/composables/useWebsocketV2')['createWebsocketV2Context']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
@@ -616,6 +620,7 @@ declare module 'vue' {
     readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
     readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
     readonly useWebsocket: UnwrapRef<typeof import('./src/composables/useWebsocket')['useWebsocket']>
+    readonly useWebsocketV2: UnwrapRef<typeof import('./src/composables/useWebsocketV2')['useWebsocketV2']>
     readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
     readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
     readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
diff --git a/apps/frontend/components.d.ts b/apps/frontend/components.d.ts
index 19e61ca98..62707a7ca 100644
--- a/apps/frontend/components.d.ts
+++ b/apps/frontend/components.d.ts
@@ -9,23 +9,32 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AlertCard: typeof import('./src/components/ui/AlertCard.vue')['default']
+    ChatGroup: typeof import('./src/components/ui/ChatGroup.vue')['default']
     ChatSelector: typeof import('./src/components/ChatSelector.vue')['default']
     CheckboxGroup: typeof import('./src/components/ui/CheckboxGroup.vue')['default']
+    ComposeMessage: typeof import('./src/components/ui/ComposeMessage.vue')['default']
     Dialog: typeof import('./src/components/ui/Dialog.vue')['default']
     DropdownMenu: typeof import('./src/components/ui/DropdownMenu.vue')['default']
+    ForwardMessage: typeof import('./src/components/ui/ForwardMessage.vue')['default']
     HighlightText: typeof import('./src/components/ui/HighlightText.vue')['default']
     IconButton: typeof import('./src/components/ui/IconButton.vue')['default']
+    ImageMessage: typeof import('./src/components/ui/ImageMessage.vue')['default']
     LoadingButton: typeof import('./src/components/ui/LoadingButton.vue')['default']
+    MessageItem: typeof import('./src/components/ui/MessageItem.vue')['default']
     Pagination: typeof import('./src/components/ui/Pagination.vue')['default']
     ProgressBar: typeof import('./src/components/ui/ProgressBar.vue')['default']
     RadioGroup: typeof import('./src/components/ui/RadioGroup.vue')['default']
+    RefMessage: typeof import('./src/components/ui/RefMessage.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SearchSelect: typeof import('./src/components/ui/SearchSelect.vue')['default']
     SelectDropdown: typeof import('./src/components/ui/SelectDropdown.vue')['default']
+    Settings: typeof import('./src/components/ui/Settings.vue')['default']
+    SlotButton: typeof import('./src/components/ui/SlotButton.vue')['default']
     StatusBadge: typeof import('./src/components/ui/StatusBadge.vue')['default']
     StepIndicator: typeof import('./src/components/ui/StepIndicator.vue')['default']
     Switch: typeof import('./src/components/ui/Switch.vue')['default']
+    TextMessage: typeof import('./src/components/ui/TextMessage.vue')['default']
     ThemeToggle: typeof import('./src/components/ThemeToggle.vue')['default']
   }
 }
diff --git a/apps/frontend/src/App.vue b/apps/frontend/src/App.vue
index 2017feb9b..6621dc017 100644
--- a/apps/frontend/src/App.vue
+++ b/apps/frontend/src/App.vue
@@ -8,7 +8,9 @@ import DefaultLayout from './layouts/default.vue'
   <div class="min-h-screen bg-white transition-all duration-300 ease-in-out dark:bg-gray-900">
     <Toaster position="top-right" :expand="true" :rich-colors="true" />
     <DefaultLayout>
-      <RouterView />
+      <template #default="{ changeTitle, setActions, setHidden, setCollapsed }">
+        <RouterView :change-title="changeTitle" :set-actions="setActions" :set-hidden="setHidden" :set-collapsed="setCollapsed" />
+      </template>
     </DefaultLayout>
   </div>
 </template>
diff --git a/apps/frontend/src/components/ChatSelector.vue b/apps/frontend/src/components/ChatSelector.vue
index 587d0b5b9..04ca960bc 100644
--- a/apps/frontend/src/components/ChatSelector.vue
+++ b/apps/frontend/src/components/ChatSelector.vue
@@ -105,7 +105,7 @@ watch([selectedType, searchQuery], () => {
         <input
           v-model="searchQuery"
           type="text"
-          class="w-full border border-gray-300 rounded-md px-4 py-2 dark:border-gray-600 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100 focus:ring-2 focus:ring-blue-500"
+          class="w-full border border-secondary rounded-md bg-muted px-4 py-2 focus:border-primary focus:ring-2 focus:ring-primary"
           placeholder="Search"
         >
       </div>
@@ -118,20 +118,20 @@ watch([selectedType, searchQuery], () => {
         :key="chat.id"
         class="relative w-full flex active:scale-98 cursor-pointer items-center border rounded-lg p-4 text-left transition-all duration-300 space-x-3 hover:shadow-md hover:-translate-y-0.5"
         :class="{
-          'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-md scale-102': isSelected(chat.id),
-          'border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-600': !isSelected(chat.id),
+          'border-primary bg-primary/10 shadow-md scale-102': isSelected(chat.id),
+          'border-secondary hover:border-primary': !isSelected(chat.id),
         }"
         @click="toggleSelection(chat.id)"
       >
         <div class="min-w-0 flex-1">
           <div class="focus:outline-none">
-            <p class="flex items-center gap-2 text-sm text-gray-900 font-medium dark:text-gray-100">
+            <p class="flex items-center gap-2 text-sm font-medium">
               {{ chat.title }}
-              <span v-if="isSelected(chat.id)" class="text-blue-500 dark:text-blue-400">
+              <span v-if="isSelected(chat.id)" class="text-primary">
                 <div class="i-lucide-circle-check h-4 w-4" />
               </span>
             </p>
-            <p class="truncate text-sm text-gray-500 dark:text-gray-400">
+            <p class="truncate text-sm text-secondary-foreground">
               {{ chat.subtitle }}
             </p>
           </div>
@@ -148,7 +148,7 @@ watch([selectedType, searchQuery], () => {
     />
 
     <!-- No Results Message -->
-    <div v-if="filteredChats.length === 0" class="py-8 text-center text-gray-500 dark:text-gray-400">
+    <div v-if="filteredChats.length === 0" class="py-8 text-center text-secondary-foreground">
       No chats found
     </div>
   </div>
diff --git a/apps/frontend/src/components/ui/ChatGroup.vue b/apps/frontend/src/components/ui/ChatGroup.vue
new file mode 100644
index 000000000..55091556f
--- /dev/null
+++ b/apps/frontend/src/components/ui/ChatGroup.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { CoreDialog } from '@tg-search/core'
+import type { Chat } from '../../types/chat'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  title: string
+  avatar: string
+  icon: string
+  type: 'user' | 'group' | 'channel'
+  chats: Chat[]
+  selectedChatId?: number | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', chat: CoreDialog): void
+}>()
+
+const active = ref(true)
+function toggleActive() {
+  active.value = !active.value
+}
+</script>
+
+<template>
+  <div class="flex cursor-pointer items-center justify-between rounded-md px-4 py-1 text-foreground transition-all duration-300 hover:bg-muted" @click="toggleActive">
+    <div class="flex cursor-pointer items-center gap-1 text-sm font-medium">
+      <div class="flex items-center gap-1">
+        <div :class="props.icon" class="h-4 w-4" />
+        <span class="select-none">{{ props.title }}</span>
+      </div>
+    </div>
+    <div :class="active ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'" class="h-4 w-4 cursor-pointer" />
+  </div>
+  <ul v-show="active" class="scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent max-h-40 overflow-y-auto px-2 space-y-1">
+    <li v-for="chat in chats" :key="chat.id" :class="{ 'bg-muted': chat.id === props.selectedChatId }" class="rounded-md transition-colors duration-100 hover:bg-muted">
+      <SlotButton :text="chat.name.slice(0, 22) + (chat.name.length > 22 ? '...' : '')" @click="emit('click', chat)">
+        <img :alt="`User ${chat.id}`" :src="`https://api.dicebear.com/6.x/bottts/svg?seed=${chat.name}`" class="h-full w-full select-none object-cover">
+      </SlotButton>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+/* 自定义滚动条样式 */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: var(--un-color-muted);
+  border-radius: 4px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background-color: var(--un-color-muted-foreground);
+}
+</style>
diff --git a/apps/frontend/src/components/ui/ComposeMessage.vue b/apps/frontend/src/components/ui/ComposeMessage.vue
new file mode 100644
index 000000000..378e4da16
--- /dev/null
+++ b/apps/frontend/src/components/ui/ComposeMessage.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{
+  direction: 'row' | 'column'
+}>()
+</script>
+
+<template>
+  <div class="flex gap-2" :class="{ 'flex-row items-stretch': direction === 'row', 'flex-col items-start': direction === 'column' }">
+    <div class="flex-1">
+      <slot name="first" />
+    </div>
+    <!-- 分割线 -->
+    <div
+      class="transition-all duration-300 ease-in-out"
+      :class="{
+        'h-[2px] w-full bg-gray-100 dark:bg-gray-800 rounded-full my-2': direction === 'column',
+        'min-h-full w-[2px] bg-gray-100 dark:bg-gray-800 rounded-full mx-2': direction === 'row',
+      }"
+    />
+    <div class="flex-1">
+      <slot name="second" />
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/Dialog.vue b/apps/frontend/src/components/ui/Dialog.vue
index a3e8f29a4..60927c32c 100644
--- a/apps/frontend/src/components/ui/Dialog.vue
+++ b/apps/frontend/src/components/ui/Dialog.vue
@@ -13,6 +13,7 @@ const emit = defineEmits<{
 
 const dialogRef = ref<HTMLDialogElement | null>(null)
 const contentRef = ref<HTMLDivElement | null>(null)
+const isVisible = ref(false)
 
 const isOpen = computed({
   get: () => props.modelValue,
@@ -39,7 +40,7 @@ function closeWithAnimation() {
     contentRef.value.classList.add('dialog-content-leave')
     setTimeout(() => {
       isOpen.value = false
-    }, 200)
+    }, 100)
   }
   else {
     isOpen.value = false
@@ -60,6 +61,7 @@ function enableScroll() {
 
 watch(isOpen, (value) => {
   if (value) {
+    isVisible.value = true
     disableScroll()
     // 打开时重置动画类
     if (contentRef.value) {
@@ -67,6 +69,9 @@ watch(isOpen, (value) => {
     }
   }
   else {
+    setTimeout(() => {
+      isVisible.value = false
+    }, 100)
     enableScroll()
   }
 })
@@ -83,74 +88,64 @@ onUnmounted(() => {
 
 <template>
   <Teleport to="body">
-    <Transition name="dialog">
-      <div
-        v-if="isOpen"
-        ref="dialogRef"
-        class="fixed inset-0 z-50 h-[100dvh] w-[100dvw] overflow-hidden border-black p-4 backdrop-blur-sm"
-        :class="{ 'cursor-pointer': !persistent }"
-        @click="handleOutsideClick"
-      >
-        <!-- 背景遮罩 -->
-        <div class="absolute inset-0 h-full w-full bg-black/60 transition-opacity duration-300" />
-
-        <!-- 对话框内容 -->
-        <div class="z-51 h-full w-full flex items-center justify-center">
+    <div
+      v-show="isVisible"
+      ref="dialogRef"
+      class="fixed inset-0 z-50 h-[100dvh] w-[100dvw] overflow-hidden p-4"
+      :class="{ 'cursor-pointer': !persistent }"
+      @click="handleOutsideClick"
+    >
+      <!-- 背景遮罩 -->
+      <Transition name="fade">
+        <div v-show="isVisible" class="absolute inset-0 h-full w-full backdrop-blur-sm" />
+      </Transition>
+
+      <!-- 对话框内容 -->
+      <div class="z-51 h-full w-full flex items-center justify-center">
+        <Transition name="dialog">
           <div
+            v-show="isVisible"
             ref="contentRef"
-            class="dialog-content relative w-full cursor-default rounded-lg bg-white p-6 shadow-2xl ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/10"
+            class="dialog-content relative w-full cursor-default rounded-lg bg-popover p-6 shadow-2xl ring-1 ring-secondary/10"
             :style="{ maxWidth: maxWidth || '32rem' }"
             @click.stop
           >
             <slot />
           </div>
-        </div>
+        </Transition>
       </div>
-    </Transition>
+    </div>
   </Teleport>
 </template>
 
 <style scoped>
-/* 背景动画 */
-.dialog-enter-active,
-.dialog-leave-active {
-  transition: opacity 0.3s ease;
+/* 背景遮罩动画 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
 }
 
-.dialog-enter-from,
-.dialog-leave-to {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
 }
 
-/* 内容动画 */
-.dialog-content {
-  animation: dialog-content-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.dialog-content-leave {
-  animation: dialog-content-leave 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+/* 对话框内容动画 */
+.dialog-enter-active,
+.dialog-leave-active {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-@keyframes dialog-content-enter {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+.dialog-enter-from,
+.dialog-leave-to {
+  opacity: 0;
+  transform: scale(0.95);
 }
 
-@keyframes dialog-content-leave {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(10px);
-  }
+.dialog-enter-to,
+.dialog-leave-from {
+  opacity: 1;
+  transform: scale(1);
 }
 
 dialog {
diff --git a/apps/frontend/src/components/ui/DropdownMenu.vue b/apps/frontend/src/components/ui/DropdownMenu.vue
index c40e3fa01..e88f2f7f3 100644
--- a/apps/frontend/src/components/ui/DropdownMenu.vue
+++ b/apps/frontend/src/components/ui/DropdownMenu.vue
@@ -13,7 +13,7 @@ const isOpen = ref(false)
 
 <template>
   <div
-    class="relative"
+    class="relative bg-popover"
     @mouseenter="isOpen = true"
     @mouseleave="isOpen = false"
   >
@@ -21,14 +21,14 @@ const isOpen = ref(false)
     <IconButton
       :icon="icon"
       :aria-label="label"
-      :class="{ 'text-blue-500': isOpen }"
+      :class="{ 'text-primary': isOpen }"
       class="transition-colors duration-200"
     />
 
     <!-- Dropdown content -->
     <div
       v-show="isOpen"
-      class="absolute right-0 z-50 w-48 border border-gray-200 rounded-md bg-white py-1 shadow-lg transition-all duration-200 ease-out dark:border-gray-700 dark:bg-gray-800"
+      class="absolute right-0 z-50 w-48 border border-secondary rounded-md bg-card py-1 shadow-lg transition-all duration-200 ease-out"
       :class="[
         isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2 pointer-events-none',
       ]"
diff --git a/apps/frontend/src/components/ui/IconButton.vue b/apps/frontend/src/components/ui/IconButton.vue
index 5ac7182e7..51a7da766 100644
--- a/apps/frontend/src/components/ui/IconButton.vue
+++ b/apps/frontend/src/components/ui/IconButton.vue
@@ -85,7 +85,7 @@ function handleClick(event: MouseEvent) {
 
 <template>
   <button
-    class="rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" :class="[
+    class="rounded-lg hover:bg-muted" :class="[
       sizeClasses[size],
       disabled ? 'cursor-not-allowed opacity-50' : '',
       hasTooltip ? 'group relative' : '',
@@ -100,7 +100,7 @@ function handleClick(event: MouseEvent) {
       :class="[
         iconSizeClasses[size],
         props.icon,
-        darkModeText ? 'dark:text-white' : '',
+        darkModeText ? 'text-foreground' : '',
         withTransition ? 'transition-colors duration-300' : '',
       ]"
     />
diff --git a/apps/frontend/src/components/ui/ImageMessage.vue b/apps/frontend/src/components/ui/ImageMessage.vue
new file mode 100644
index 000000000..3b0245127
--- /dev/null
+++ b/apps/frontend/src/components/ui/ImageMessage.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  image: string
+}>()
+</script>
+
+<template>
+  <div class="max-w-[240px]">
+    <img
+      :src="image"
+      alt="Image"
+      class="h-auto w-full rounded-lg object-cover transition-all duration-200 hover:opacity-90"
+    >
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/MessageItem.vue b/apps/frontend/src/components/ui/MessageItem.vue
new file mode 100644
index 000000000..0609354ce
--- /dev/null
+++ b/apps/frontend/src/components/ui/MessageItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { MessageProps } from '../../types/message-props'
+
+defineProps<MessageProps>()
+</script>
+
+<template>
+  <div class="flex items-start gap-4 rounded-lg p-3 transition-all duration-200 hover:bg-gray-50 dark:hover:bg-gray-800">
+    <div class="mt-1 h-9 w-9 flex items-center justify-center overflow-hidden bg-muted">
+      <img :src="`https://api.dicebear.com/6.x/bottts/svg?seed=${sender}`" alt="User" class="h-full w-full object-cover">
+    </div>
+    <div class="flex-1">
+      <div class="mb-1 flex items-center gap-2">
+        <span class="text-gray-900 font-medium dark:text-gray-100">{{ sender }}</span>
+        <span class="text-xs text-gray-500 dark:text-gray-400">{{ timestamp }}</span>
+      </div>
+      <div class="text-gray-700 dark:text-gray-300">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/RefMessage.vue b/apps/frontend/src/components/ui/RefMessage.vue
new file mode 100644
index 000000000..26163e9a6
--- /dev/null
+++ b/apps/frontend/src/components/ui/RefMessage.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TextMessage from './TextMessage.vue'
+
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-2">
+    <TextMessage :text="text" />
+    <div class="inline-flex border border-gray-100 rounded-lg bg-gray-50 px-3 py-2 transition-all duration-200 dark:border-gray-700 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/SelectDropdown.vue b/apps/frontend/src/components/ui/SelectDropdown.vue
index 4d2f4e035..b90976d24 100644
--- a/apps/frontend/src/components/ui/SelectDropdown.vue
+++ b/apps/frontend/src/components/ui/SelectDropdown.vue
@@ -23,13 +23,13 @@ const emit = defineEmits<{
 
 <template>
   <div>
-    <label v-if="label" class="mb-2 block text-sm text-gray-700 font-medium dark:text-gray-300">
+    <label v-if="label" class="mb-2 block text-sm text-secondary-foreground font-medium">
       {{ label }}
     </label>
     <div class="relative">
       <select
         :value="modelValue"
-        class="w-full appearance-none border border-gray-300 rounded-md bg-white px-4 py-2.5 pr-10 transition-colors dark:border-gray-600 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-200 dark:focus:border-blue-500 dark:focus:ring-blue-700/30"
+        class="w-full appearance-none border border-secondary rounded-md bg-muted px-4 py-2.5 pr-10 text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
         :disabled="disabled"
         @change="($event: Event) => {
           const target = $event.target as HTMLSelectElement
@@ -44,7 +44,7 @@ const emit = defineEmits<{
           {{ option.label }}
         </option>
       </select>
-      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400">
+      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-secondary-foreground">
         <span>▼</span>
       </div>
     </div>
diff --git a/apps/frontend/src/components/ui/Settings.vue b/apps/frontend/src/components/ui/Settings.vue
new file mode 100644
index 000000000..80d6bbafb
--- /dev/null
+++ b/apps/frontend/src/components/ui/Settings.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useSessionStore } from '../../store/useSession'
+
+const emit = defineEmits<{
+  (e: 'toggleSettingsDialogEmit'): void
+  (e: 'setThemeEmit', theme: string): void
+}>()
+
+const router = useRouter()
+
+// 主题相关
+const themes = [
+  { name: '默认', value: 'default' },
+  { name: '莫奈', value: 'monet' },
+  { name: '橙色', value: 'orange' },
+  { name: '绿色', value: 'green' },
+  { name: '淡蓝', value: 'light-blue' },
+]
+
+const currentTheme = ref(localStorage.getItem('theme') || 'default')
+
+function handleThemeChange(theme: string) {
+  currentTheme.value = theme
+  emit('setThemeEmit', theme)
+}
+
+const sessionStore = useSessionStore()
+const { logout } = sessionStore.handleAuth()
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+function toggleSettingsDialog() {
+  emit('toggleSettingsDialogEmit')
+}
+
+function settingLogout() {
+  logout()
+  router.push('/login')
+}
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="mb-6 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="i-lucide-settings h-5 w-5 text-foreground" />
+        <span class="text-lg text-foreground font-medium">设置</span>
+      </div>
+      <button class="rounded-md p-1 text-foreground transition-colors hover:bg-popover/50" @click="toggleSettingsDialog">
+        <div class="i-lucide-x h-5 w-5" />
+      </button>
+    </div>
+    <div class="space-y-4">
+      <div class="flex items-center justify-between rounded-lg p-3 text-foreground transition-colors hover:bg-popover/50">
+        <div class="flex items-center gap-2">
+          <div class="i-lucide-moon h-5 w-5" />
+          <span>深色模式</span>
+        </div>
+        <Switch :model-value="isDark" @update:model-value="toggleDark" />
+      </div>
+      <div class="flex items-center justify-between rounded-lg p-3 text-foreground transition-colors hover:bg-popover/50">
+        <div class="flex items-center gap-2">
+          <div class="i-lucide-palette h-5 w-5" />
+          <span>主题</span>
+        </div>
+        <select
+          v-model="currentTheme"
+          class="border-input focus-visible:ring-ring h-9 w-[180px] border rounded-md bg-background px-3 py-1 text-sm text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+          @change="(e) => handleThemeChange((e.target as HTMLSelectElement).value)"
+        >
+          <option v-for="theme in themes" :key="theme.value" :value="theme.value">
+            {{ theme.name }}
+          </option>
+        </select>
+      </div>
+      <div class="flex items-center justify-between rounded-lg p-3 text-foreground transition-colors hover:bg-popover/50">
+        <div class="flex items-center gap-2">
+          <div class="i-lucide-globe h-5 w-5" />
+          <span>语言</span>
+        </div>
+        <button class="transition-colors">
+          None
+        </button>
+      </div>
+      <div class="flex items-center justify-between rounded-lg p-3 text-foreground transition-colors hover:bg-popover/50">
+        <div class="flex items-center gap-2">
+          <div class="i-lucide-log-out h-5 w-5" />
+          <span>退出登录</span>
+        </div>
+        <button class="text-primary transition-colors hover:text-primary/80" @click="settingLogout">
+          退出
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/frontend/src/components/ui/SlotButton.vue b/apps/frontend/src/components/ui/SlotButton.vue
new file mode 100644
index 000000000..e4ae73c0d
--- /dev/null
+++ b/apps/frontend/src/components/ui/SlotButton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <button class="w-full flex items-center gap-3 rounded-md px-3 py-1 text-sm text-foreground transition-colors hover:bg-muted">
+    <div class="h-6 w-6 flex items-center justify-center overflow-hidden rounded-full">
+      <slot />
+    </div>
+    <span class="select-none">{{ text }}</span>
+  </button>
+</template>
diff --git a/apps/frontend/src/components/ui/Switch.vue b/apps/frontend/src/components/ui/Switch.vue
index e9bfb0df5..217f8cfce 100644
--- a/apps/frontend/src/components/ui/Switch.vue
+++ b/apps/frontend/src/components/ui/Switch.vue
@@ -18,8 +18,8 @@ function toggle() {
 }
 
 const buttonClasses = computed(() => ({
-  'bg-blue-600 dark:bg-blue-500': props.modelValue,
-  'bg-gray-200 dark:bg-gray-700': !props.modelValue,
+  'bg-primary dark:bg-primary': props.modelValue,
+  'bg-muted dark:bg-muted': !props.modelValue,
   'opacity-50 cursor-not-allowed': props.disabled,
   'cursor-pointer': !props.disabled,
 }))
@@ -36,7 +36,7 @@ const toggleClasses = computed(() => ({
     :aria-checked="modelValue"
     :aria-label="label"
     :disabled="disabled"
-    class="relative h-6 w-11 inline-flex flex-shrink-0 border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+    class="relative h-6 w-11 inline-flex flex-shrink-0 border-2 border-transparent rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
     :class="buttonClasses"
     @click="toggle"
   >
diff --git a/apps/frontend/src/components/ui/TextMessage.vue b/apps/frontend/src/components/ui/TextMessage.vue
new file mode 100644
index 000000000..4f99e7fa6
--- /dev/null
+++ b/apps/frontend/src/components/ui/TextMessage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<template>
+  <p class="text-sm">
+    {{ text }}
+  </p>
+</template>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 0bf7521c3..07971dc57 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1,170 +1,289 @@
-<script setup lang="ts">
-import { onClickOutside, usePreferredDark } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
+<script lang="ts" setup>
+import type { CoreDialog } from '@tg-search/core'
+import type { Action } from '../types/action'
+import type { Page } from '../types/page'
+import { useDark } from '@vueuse/core'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { toast } from 'vue-sonner'
-import ThemeToggle from '../components/ThemeToggle.vue'
-import DropdownMenu from '../components/ui/DropdownMenu.vue'
+import { useChatStore } from '../store/useChat'
 import { useSessionStore } from '../store/useSession'
 
-const router = useRouter()
-const isDark = usePreferredDark()
+const sessionStore = useSessionStore()
 
-const showUserMenu = ref(false)
-const showLanguageMenu = ref(false)
-const showCommandMenu = ref(false)
+const { getWsContext } = sessionStore
+const wsContext = getWsContext()
 
-const userMenuRef = ref<HTMLElement | null>(null)
-const languageMenuRef = ref<HTMLElement | null>(null)
-const commandMenuRef = ref<HTMLElement | null>(null)
+const settingsDialog = ref(false)
 
-const sessionStore = useSessionStore()
-const { handleAuth } = sessionStore
-const { activeSessionComputed } = storeToRefs(sessionStore)
+const headerState = reactive<{
+  title: string
+  actions: Action[]
+  hidden: boolean
+  collapsed: boolean
+}>({
+  title: '',
+  actions: [
+  ],
+  hidden: false,
+  collapsed: false,
+})
+
+const pages = ref<Page[]>([
+  {
+    name: '主页',
+    icon: 'i-lucide-home',
+    path: '/',
+  },
+  {
+    name: '嵌入',
+    icon: 'i-lucide-folder-open',
+    path: '/embed',
+  },
+  {
+    name: '同步',
+    icon: 'i-lucide-folder-sync',
+    path: '/sync',
+  },
+  {
+    name: '配置',
+    icon: 'i-lucide-settings',
+    path: '/settings',
+  },
+])
+const currentPage = ref<Page | undefined>()
+const selectedChatId = ref<number | null>(null)
+
+const chatTypes = ref([
+  {
+    name: '私聊',
+    icon: 'i-lucide-user',
+    type: 'user',
+  },
+  {
+    name: '群聊',
+    icon: 'i-lucide-users',
+    type: 'group',
+  },
+  {
+    name: '频道',
+    icon: 'i-lucide-hash',
+    type: 'channel',
+  },
+])
+
+const search = ref('')
+
+const chatStore = useChatStore()
 
-onClickOutside(userMenuRef, () => {
-  showUserMenu.value = false
+const chats = computed(() => chatStore.chats)
+const chatsFiltered = computed(() => {
+  return chats.value.filter(chat => chat.name.toLowerCase().includes(search.value.toLowerCase()))
 })
 
-onClickOutside(languageMenuRef, () => {
-  showLanguageMenu.value = false
+const router = useRouter()
+
+const showActions = ref(false)
+
+const isDark = useDark()
+
+const currentTheme = ref('default')
+
+function setTheme(theme: string) {
+  currentTheme.value = theme
+  document.documentElement.setAttribute('data-theme', theme)
+  localStorage.setItem('theme', theme)
+}
+
+// 初始化主题
+onMounted(() => {
+  if (!sessionStore.getActiveSession()?.isConnected && router.currentRoute.value.path !== '/login') {
+    router.push('/login')
+  }
+  wsContext.sendEvent('entity:me:fetch', undefined)
+  wsContext.sendEvent('dialog:fetch', undefined)
+  const savedTheme = localStorage.getItem('theme') || 'default'
+  setTheme(savedTheme)
 })
 
-onClickOutside(commandMenuRef, () => {
-  showCommandMenu.value = false
+// 监听主题变化
+watch(currentTheme, (newTheme) => {
+  localStorage.setItem('theme', newTheme)
 })
 
-// onMounted(async () => {
-//   if (isConnected.value && !me.value) {
-//     const { sendEvent } = getWsContext()
-//     sendEvent('entity:me:fetch', undefined)
-//   }
-// })
-
-async function handleLogout() {
-  showUserMenu.value = false
-  handleAuth().logout()
-  toast.success('Logout successfully')
-  router.push('/login')
+function changeTitle(newTitle: string) {
+  headerState.title = newTitle
 }
 
-async function handleLogin() {
-  showUserMenu.value = false
-  router.push('/login')
+function setHidden(hidden: boolean) {
+  headerState.hidden = hidden
 }
-</script>
 
-<template>
-  <div class="min-h-screen" :class="{ dark: isDark }">
-    <header class="sticky top-0 z-50 border-b bg-white transition-colors duration-300 dark:border-gray-800 dark:bg-gray-900">
-      <div class="mx-auto h-14 flex items-center justify-between px-4 container">
-        <RouterLink to="/" class="text-lg font-semibold transition-colors duration-300 dark:text-white">
-          Telegram Search
-        </RouterLink>
-
-        <div class="flex items-center gap-4">
-          <IconButton
-            icon="i-lucide-folder-sync"
-            with-transition
-            aria-label="Sync Command"
-            @click="router.push('/sync')"
-          />
+function setActions(actions: Action[]) {
+  // @ts-expect-error: headerState.actions is readonly but we need to modify it
+  headerState.actions = actions
+}
 
-          <!-- User menu -->
-          <DropdownMenu
-            icon="i-lucide-user"
-            label="User Menu"
-          >
-            <div v-if="activeSessionComputed?.me" class="px-4 py-2 text-sm text-gray-700 dark:text-gray-200">
-              <div>{{ activeSessionComputed.me.firstName }} {{ activeSessionComputed.me.lastName }}</div>
-              <div class="text-xs text-gray-500">
-                @{{ activeSessionComputed.me.username }}
-              </div>
-            </div>
+function setCollapsed(collapsed: boolean) {
+  headerState.collapsed = collapsed
+}
 
-            <div v-if="activeSessionComputed?.me?.username" class="my-2 border-b border-gray-200 dark:border-gray-700" />
+function clearSelectedChatAndPage() {
+  selectedChatId.value = null
+  currentPage.value = undefined
+}
 
-            <button
-              v-if="!activeSessionComputed?.isConnected"
-              class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
-              @click="handleLogin"
-            >
-              <div class="flex items-center">
-                <div class="i-lucide-log-in mr-2 h-4 w-4" />
-                <span>Login</span>
-              </div>
-            </button>
+function handleClick(chat: CoreDialog) {
+  router.push(`/chat/${chat.id}?type=${chat.type}`)
+  clearSelectedChatAndPage()
+  setActions([])
+  selectedChatId.value = chat.id
+}
 
-            <button
-              v-if="activeSessionComputed?.isConnected"
-              class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700"
-              @click="handleLogout"
-            >
-              <div class="flex items-center">
-                <div class="i-lucide-log-out mr-2 h-4 w-4" />
-                <span>Logout</span>
-              </div>
-            </button>
-          </DropdownMenu>
+function handlePageClick(page: Page) {
+  clearSelectedChatAndPage()
+  setActions([])
+  currentPage.value = page
+  changeTitle(page.name)
+  router.push(page.path)
+}
+
+function toggleSettingsDialog() {
+  settingsDialog.value = !settingsDialog.value
+}
 
-          <ThemeToggle />
+function toggleActions() {
+  showActions.value = !showActions.value
+}
+</script>
+
+<template>
+  <div class="h-screen w-full flex overflow-hidden bg-background" :class="{ dark: isDark }">
+    <Dialog v-model="settingsDialog">
+      <Settings
+        @toggle-settings-dialog-emit="toggleSettingsDialog"
+        @set-theme-emit="setTheme"
+      />
+    </Dialog>
+    <div class="z-40 h-full w-64 border-r border-r-secondary bg-background dark:border-r-secondary">
+      <div class="h-full flex flex-col overflow-hidden">
+        <div class="p-2">
+          <div class="relative">
+            <div
+              class="i-lucide-search absolute left-2 top-1/2 h-4 w-4 text-xl text-secondary-foreground -translate-y-1/2 dark:text-secondary-foreground"
+            />
+            <input
+              v-model="search" type="text"
+              class="border-input w-full border border-secondary rounded-md bg-muted px-3 py-2 pl-9 text-sm text-foreground ring-offset-background dark:border-secondary dark:bg-muted"
+              placeholder="Search"
+            >
+          </div>
+        </div>
+        <!-- Main menu -->
+        <div class="mt-2 p-2">
+          <ul class="space-y-1">
+            <li
+              v-for="page in pages" :key="page.path"
+              :class="{ 'bg-muted dark:bg-muted': currentPage?.path === page.path }"
+              class="transition-colors hover:bg-muted dark:hover:bg-muted"
+              @click="handlePageClick(page)"
+            >
+              <IconButton class="w-full flex items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground" :icon="page.icon">
+                <span>{{ page.name }}</span>
+              </IconButton>
+            </li>
+          </ul>
+        </div>
 
-          <IconButton
-            icon="i-lucide-settings"
-            with-transition
-            aria-label="Settings"
-            @click="router.push('/settings')"
+        <!-- Chats -->
+        <div v-for="chatType in chatTypes" :key="chatType.type" class="mt-4">
+          <ChatGroup
+            :title="chatType.name" :chats="chatsFiltered.filter(chat => chat.type === chatType.type)"
+            :icon="chatType.icon" :type="chatType.type" :selected-chat-id="selectedChatId" @click="handleClick"
           />
         </div>
+        <!-- User profile -->
+        <div class="mt-auto border-t border-t-secondary p-4 dark:border-t-secondary">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-3">
+              <div class="h-8 w-8 flex items-center justify-center overflow-hidden rounded-full bg-muted">
+                <img
+                  alt="Me" src="https://api.dicebear.com/6.x/bottts/svg?seed=RainbowBird"
+                  class="h-full w-full object-cover"
+                >
+              </div>
+              <div class="flex flex-col">
+                <span class="text-sm text-foreground font-medium">{{ sessionStore.getActiveSession()?.me?.username }}</span>
+                <span class="text-xs text-secondary-foreground">{{ sessionStore.getActiveSession()?.isConnected ? '已链接' : '未链接' }}</span>
+              </div>
+            </div>
+            <div class="flex items-center">
+              <button
+                class="h-8 w-8 flex items-center justify-center rounded-md p-1 text-foreground hover:bg-muted"
+                @click="toggleSettingsDialog"
+              >
+                <div class="i-lucide-settings h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
-    </header>
-
-    <!-- Main content -->
-    <main class="mx-auto bg-white p-4 transition-colors duration-300 container dark:bg-gray-900">
-      <slot />
-    </main>
-
-    <!-- Global Dialog Wrapper -->
-    <div class="pointer-events-none fixed left-0 top-0 z-100 h-screen w-screen">
-      <slot name="dialog" />
+    </div>
+    <div class="flex flex-1 flex-col overflow-hidden">
+      <header v-show="!headerState.hidden" class="h-14 flex items-center border-b border-b-secondary px-4 dark:border-b-secondary">
+        <div class="flex items-center gap-2">
+          <span class="text-foreground font-medium">{{ headerState.title }}</span>
+        </div>
+        <div class="ml-auto flex items-center gap-2">
+          <TransitionGroup name="action">
+            <template v-if="showActions || headerState.collapsed">
+              <button
+                v-for="(action, index) in headerState.actions" :key="index"
+                class="flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-foreground transition-colors hover:bg-muted"
+                :class="{ 'opacity-50': action.disabled, 'cursor-not-allowed': action.disabled }"
+                :disabled="action.disabled"
+                @click="action.onClick"
+              >
+                <div :class="action.icon" class="h-5 w-5" />
+                <span v-if="action.name" class="text-sm">{{ action.name }}</span>
+              </button>
+            </template>
+          </TransitionGroup>
+          <button v-if="!headerState.collapsed" class="rounded-md p-2 text-foreground transition-colors hover:bg-muted" @click="toggleActions">
+            <div
+              class="i-lucide-ellipsis h-5 w-5 transition-transform duration-300"
+              :class="{ 'rotate-90': showActions }"
+            />
+          </button>
+        </div>
+      </header>
+      <main class="flex flex-1 flex-col overflow-hidden">
+        <div class="flex-1 overflow-auto p-4">
+          <slot v-bind="{ changeTitle, setActions, setHidden, setCollapsed }" />
+        </div>
+      </main>
     </div>
   </div>
 </template>
 
-<style>
-:deep(dialog) {
-  pointer-events: auto;
+<style scoped>
+.action-enter-active,
+.action-leave-active {
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Menu animations */
-.menu-enter-active {
-  animation: menu-in 0.2s ease-out;
+.action-enter-from,
+.action-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
 }
 
-.menu-leave-active {
-  animation: menu-out 0.2s ease-in;
+.action-enter-to,
+.action-leave-from {
+  opacity: 1;
+  transform: translateX(0);
 }
 
-@keyframes menu-in {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes menu-out {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
+.action-move {
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 </style>
diff --git a/apps/frontend/src/pages/[...all].vue b/apps/frontend/src/pages/[...all].vue
index 9ece676ac..7988da764 100644
--- a/apps/frontend/src/pages/[...all].vue
+++ b/apps/frontend/src/pages/[...all].vue
@@ -1,19 +1,19 @@
 <template>
   <div class="min-h-screen flex flex-col items-center justify-center">
     <div class="animate-bounce">
-      <div class="text-8xl text-gray-800">
+      <div class="text-8xl text-foreground">
         <i class="i-lucide-circle-alert" />
       </div>
-      <h1 class="text-6xl text-gray-800 font-bold">
+      <h1 class="text-6xl text-foreground font-bold">
         404
       </h1>
     </div>
-    <p class="mt-4 animate-fade-in text-xl text-gray-600">
+    <p class="mt-4 animate-fade-in text-xl text-secondary-foreground">
       Page not found
     </p>
     <RouterLink
       to="/"
-      class="mt-8 flex items-center gap-2 text-blue-500 transition-colors duration-200 hover:text-blue-600"
+      class="mt-8 flex items-center gap-2 text-primary transition-colors duration-200 hover:text-primary/80"
     >
       <i class="i-lucide-house" />
       <span>Return to Home</span>
diff --git a/apps/frontend/src/pages/chat/[id].vue b/apps/frontend/src/pages/chat/[id].vue
new file mode 100644
index 000000000..2886ac358
--- /dev/null
+++ b/apps/frontend/src/pages/chat/[id].vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Action } from '../../types/action'
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+
+const props = defineProps<{
+  changeTitle?: (title: string) => void
+  setActions?: (actions: Action[]) => void
+}>()
+const route = useRoute()
+const id = route.params.id
+
+onMounted(() => {
+  props.changeTitle?.(`👀 ${id}`)
+  props.setActions?.([{
+    icon: 'i-lucide-search',
+    onClick: () => {
+
+    },
+  }])
+})
+</script>
+
+<template>
+  <div class="h-full flex flex-col p-2">
+    <div class="overflow-auto space-y-0" />
+  </div>
+</template>
diff --git a/apps/frontend/src/pages/login.vue b/apps/frontend/src/pages/login.vue
index e2fa2341f..d166c604d 100644
--- a/apps/frontend/src/pages/login.vue
+++ b/apps/frontend/src/pages/login.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Action } from '../types/action'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -7,6 +8,12 @@ import { useSessionStore } from '../store/useSession'
 
 type LoginStep = 'phone' | 'code' | 'password' | 'complete'
 
+const props = defineProps<{
+  changeTitle?: (title: string) => void
+  setActions?: (actions: Action[]) => void
+  setCollapsed?: (collapsed: boolean) => void
+}>()
+
 const router = useRouter()
 
 const connectionStore = useSessionStore()
@@ -66,6 +73,9 @@ onMounted(() => {
   if (isLoggedIn.value) {
     redirectRoot()
   }
+  props.setActions?.([])
+  props.changeTitle?.('登录')
+  props.setCollapsed?.(true)
 })
 
 async function handleLogin() {
@@ -95,8 +105,8 @@ async function handleLogin() {
 </script>
 
 <template>
-  <div class="mx-auto max-w-3xl rounded-lg bg-white p-6 shadow-md">
-    <h1 class="mb-6 text-center text-2xl font-bold">
+  <div class="mx-auto max-w-3xl rounded-lg bg-card p-6 shadow-md">
+    <h1 class="mb-6 text-center text-2xl text-foreground font-bold">
       Telegram 登录
     </h1>
 
@@ -110,10 +120,10 @@ async function handleLogin() {
             <div
               class="h-7 min-w-7 flex items-center justify-center border-2 rounded-full text-sm"
               :class="{
-                'border-indigo-600 text-indigo-600': state.currentStep === step.value,
-                'border-indigo-600 bg-indigo-600 text-white':
+                'border-primary text-primary': state.currentStep === step.value,
+                'border-primary bg-primary text-foreground':
                   steps.findIndex(s => s.value === state.currentStep) > steps.findIndex(s => s.value === step.value),
-                'border-gray-300 text-gray-500':
+                'border-secondary text-secondary-foreground':
                   steps.findIndex(s => s.value === state.currentStep) < steps.findIndex(s => s.value === step.value),
               }"
             >
@@ -126,9 +136,9 @@ async function handleLogin() {
               <div
                 class="text-sm font-medium"
                 :class="{
-                  'text-gray-900': state.currentStep === step.value
+                  'text-foreground': state.currentStep === step.value
                     || steps.findIndex(s => s.value === state.currentStep) > steps.findIndex(s => s.value === step.value),
-                  'text-gray-500': steps.findIndex(s => s.value === state.currentStep) < steps.findIndex(s => s.value === step.value),
+                  'text-secondary-foreground': steps.findIndex(s => s.value === state.currentStep) < steps.findIndex(s => s.value === step.value),
                 }"
               >
                 {{ step.title }}
@@ -136,9 +146,9 @@ async function handleLogin() {
               <div
                 class="text-xs"
                 :class="{
-                  'text-gray-600': state.currentStep === step.value
+                  'text-foreground': state.currentStep === step.value
                     || steps.findIndex(s => s.value === state.currentStep) > steps.findIndex(s => s.value === step.value),
-                  'text-gray-400': steps.findIndex(s => s.value === state.currentStep) < steps.findIndex(s => s.value === step.value),
+                  'text-secondary-foreground': steps.findIndex(s => s.value === state.currentStep) < steps.findIndex(s => s.value === step.value),
                 }"
               >
                 {{ step.description }}
@@ -151,8 +161,8 @@ async function handleLogin() {
             v-if="index < steps.length - 1"
             class="mx-2 h-0.5 flex-1"
             :class="{
-              'bg-indigo-600': steps.findIndex(s => s.value === state.currentStep) > index,
-              'bg-gray-300': steps.findIndex(s => s.value === state.currentStep) <= index,
+              'bg-primary': steps.findIndex(s => s.value === state.currentStep) > index,
+              'bg-secondary': steps.findIndex(s => s.value === state.currentStep) <= index,
             }"
           />
         </template>
@@ -162,16 +172,16 @@ async function handleLogin() {
     <!-- 手机号码表单 -->
     <form v-if="state.currentStep === 'phone'" class="space-y-4" @submit.prevent="handleLogin">
       <div>
-        <label for="phoneNumber" class="block text-sm text-gray-700 font-medium">手机号码</label>
+        <label for="phoneNumber" class="block text-sm text-foreground font-medium">手机号码</label>
         <input
           id="phoneNumber"
           v-model="state.phoneNumber"
           type="tel"
           placeholder="+86 123 4567 8901"
-          class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
+          class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary"
           required
         >
-        <p class="mt-1 text-sm text-gray-500">
+        <p class="mt-1 text-sm text-secondary-foreground">
           请输入完整的手机号，包括国家代码
         </p>
       </div>
@@ -179,7 +189,7 @@ async function handleLogin() {
       <div>
         <button
           type="button"
-          class="text-sm text-indigo-600 hover:text-indigo-500"
+          class="text-sm text-primary hover:text-primary/80"
           @click="state.showAdvancedSettings = !state.showAdvancedSettings"
         >
           {{ state.showAdvancedSettings ? '隐藏高级设置' : '显示高级设置' }}
@@ -188,24 +198,24 @@ async function handleLogin() {
 
       <div v-if="state.showAdvancedSettings" class="space-y-3">
         <div>
-          <label for="apiId" class="block text-sm text-gray-700 font-medium">API ID</label>
+          <label for="apiId" class="block text-sm text-foreground font-medium">API ID</label>
           <input
             id="apiId"
             v-model="state.apiId"
             type="text"
             placeholder="API ID"
-            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
+            class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary"
           >
         </div>
 
         <div>
-          <label for="apiHash" class="block text-sm text-gray-700 font-medium">API Hash</label>
+          <label for="apiHash" class="block text-sm text-foreground font-medium">API Hash</label>
           <input
             id="apiHash"
             v-model="state.apiHash"
             type="text"
             placeholder="API Hash"
-            class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
+            class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary"
           >
         </div>
       </div>
@@ -213,7 +223,7 @@ async function handleLogin() {
       <div>
         <button
           type="submit"
-          class="w-full flex justify-center border border-transparent rounded-md bg-indigo-600 px-4 py-2 text-sm text-white font-medium shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          class="w-full flex justify-center border border-transparent rounded-md bg-primary px-4 py-2 text-sm text-foreground font-medium shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           :disabled="state.isLoading"
         >
           {{ state.isLoading ? '处理中...' : '发送验证码' }}
@@ -224,16 +234,16 @@ async function handleLogin() {
     <!-- 验证码表单 -->
     <form v-if="state.currentStep === 'code'" class="space-y-4" @submit.prevent="handleLogin">
       <div>
-        <label for="verificationCode" class="block text-sm text-gray-700 font-medium">验证码</label>
+        <label for="verificationCode" class="block text-sm text-foreground font-medium">验证码</label>
         <input
           id="verificationCode"
           v-model="state.verificationCode"
           type="text"
           placeholder="请输入 Telegram 发送的验证码"
-          class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
+          class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary"
           required
         >
-        <p class="mt-1 text-sm text-gray-500">
+        <p class="mt-1 text-sm text-secondary-foreground">
           请检查您的 Telegram 应用或短信
         </p>
       </div>
@@ -241,7 +251,7 @@ async function handleLogin() {
       <div>
         <button
           type="submit"
-          class="w-full flex justify-center border border-transparent rounded-md bg-indigo-600 px-4 py-2 text-sm text-white font-medium shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          class="w-full flex justify-center border border-transparent rounded-md bg-primary px-4 py-2 text-sm text-foreground font-medium shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           :disabled="state.isLoading"
         >
           {{ state.isLoading ? '处理中...' : '验证' }}
@@ -252,13 +262,13 @@ async function handleLogin() {
     <!-- 两步验证密码表单 -->
     <form v-if="state.currentStep === 'password'" class="space-y-4" @submit.prevent="handleLogin">
       <div>
-        <label for="twoFactorPassword" class="block text-sm text-gray-700 font-medium">两步验证密码</label>
+        <label for="twoFactorPassword" class="block text-sm text-foreground font-medium">两步验证密码</label>
         <input
           id="twoFactorPassword"
           v-model="state.twoFactorPassword"
           type="password"
           placeholder="请输入您的两步验证密码"
-          class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
+          class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground shadow-sm focus:border-primary focus:outline-none focus:ring-primary"
           required
         >
       </div>
@@ -266,7 +276,7 @@ async function handleLogin() {
       <div>
         <button
           type="submit"
-          class="w-full flex justify-center border border-transparent rounded-md bg-indigo-600 px-4 py-2 text-sm text-white font-medium shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+          class="w-full flex justify-center border border-transparent rounded-md bg-primary px-4 py-2 text-sm text-foreground font-medium shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
           :disabled="state.isLoading"
         >
           {{ state.isLoading ? '处理中...' : '登录' }}
@@ -279,14 +289,14 @@ async function handleLogin() {
       <div class="mb-4 text-3xl">
         🎉
       </div>
-      <h2 class="text-xl text-gray-900 font-medium">
+      <h2 class="text-xl text-foreground font-medium">
         登录成功！
       </h2>
-      <p class="mt-2 text-gray-600">
+      <p class="mt-2 text-secondary-foreground">
         您已成功登录 Telegram 账号
       </p>
       <button
-        class="mt-6 w-full flex justify-center border border-transparent rounded-md bg-indigo-600 px-4 py-2 text-sm text-white font-medium shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        class="mt-6 w-full flex justify-center border border-transparent rounded-md bg-primary px-4 py-2 text-sm text-foreground font-medium shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
         @click="$router.push('/')"
       >
         进入主页
diff --git a/apps/frontend/src/pages/settings.vue b/apps/frontend/src/pages/settings.vue
index a13265553..da302798b 100644
--- a/apps/frontend/src/pages/settings.vue
+++ b/apps/frontend/src/pages/settings.vue
@@ -1,17 +1,42 @@
 <script setup lang="ts">
+import type { Action } from '../types/action'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { toast } from 'vue-sonner'
 import SelectDropdown from '../components/ui/SelectDropdown.vue'
 import { useSessionStore } from '../store/useSession'
 import { useSettingsStore } from '../store/useSettings'
 
+const props = defineProps<{
+  changeTitle?: (title: string) => void
+  setActions?: (actions: Action[]) => void
+  setCollapsed?: (collapsed: boolean) => void
+}>()
+
 const sessionStore = useSessionStore()
 const { getWsContext } = sessionStore
 const isEditing = ref(false)
 const { config } = storeToRefs(useSettingsStore())
 const wsContext = getWsContext()
 
+onMounted(() => {
+  props.changeTitle?.('Settings')
+  props.setActions?.([{
+    icon: 'i-lucide-pencil',
+    name: 'Edit',
+    disabled: computed(() => isEditing.value),
+    onClick: () => {
+      isEditing.value = !isEditing.value
+    },
+  }, {
+    icon: 'i-lucide-save',
+    name: 'Save',
+    disabled: computed(() => !isEditing.value),
+    onClick: updateConfig,
+  }])
+  props.setCollapsed?.(true)
+})
+
 const embeddingProviderOptions = [
   { label: 'OpenAI', value: 'openai' },
   { label: 'Ollama', value: 'ollama' },
@@ -34,193 +59,170 @@ onMounted(() => {
 
 <template>
   <div class="mx-auto p-4 container space-y-6">
-    <div class="flex items-center justify-between">
-      <h1 class="text-2xl font-bold dark:text-white">
-        Settings
-      </h1>
-      <div class="space-x-2">
-        <button
-          v-if="!isEditing"
-          class="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-          @click="isEditing = true"
-        >
-          Edit
-        </button>
-        <template v-else>
-          <button
-            class="rounded-lg bg-blue-500 px-4 py-2 text-white hover:bg-blue-600"
-            @click="updateConfig"
-          >
-            Save
-          </button>
-        </template>
-      </div>
-    </div>
-
     <!-- Settings form -->
     <div class="space-y-6">
       <!-- Database settings -->
-      <div class="border border-gray-200 rounded-lg p-4 dark:border-gray-800">
-        <h2 class="mb-4 text-xl font-semibold dark:text-white">
+      <div class="border border-secondary rounded-lg bg-card p-4">
+        <h2 class="mb-4 text-xl text-foreground font-semibold">
           Database Settings
         </h2>
         <div class="grid gap-4 md:grid-cols-2">
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Host</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Host</label>
             <input
               v-model="config.database.host"
               type="text"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Port</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Port</label>
             <input
               v-model.number="config.database.port"
               type="number"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Username</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Username</label>
             <input
               v-model="config.database.user"
               type="text"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Password</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Password</label>
             <input
               v-model="config.database.password"
               type="password"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div class="md:col-span-2">
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Database Name</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Database Name</label>
             <input
               v-model="config.database.database"
               type="text"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
         </div>
       </div>
 
       <!-- Message settings -->
-      <div class="border border-gray-200 rounded-lg p-4 dark:border-gray-800">
-        <h2 class="mb-4 text-xl font-semibold dark:text-white">
+      <div class="border border-secondary rounded-lg bg-card p-4">
+        <h2 class="mb-4 text-xl text-foreground font-semibold">
           Message Settings
         </h2>
         <div class="grid gap-4 md:grid-cols-2">
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Batch Size</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Batch Size</label>
             <input
               v-model.number="config.message.export.batchSize"
               type="number"
               :min="1"
               :max="1000"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Concurrent Requests</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Concurrent Requests</label>
             <input
               v-model.number="config.message.export.concurrent"
               type="number"
               :min="1"
               :max="10"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Retry Times</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Retry Times</label>
             <input
               v-model.number="config.message.export.retryTimes"
               type="number"
               :min="1"
               :max="10"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Max Takeout Retries</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Max Takeout Retries</label>
             <input
               v-model.number="config.message.export.maxTakeoutRetries"
               type="number"
               :min="1"
               :max="10"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
         </div>
       </div>
 
       <!-- Path settings -->
-      <div class="border border-gray-200 rounded-lg p-4 dark:border-gray-800">
-        <h2 class="mb-4 text-xl font-semibold dark:text-white">
+      <div class="border border-secondary rounded-lg bg-card p-4">
+        <h2 class="mb-4 text-xl text-foreground font-semibold">
           Path Settings
         </h2>
         <div class="grid gap-4">
           <div>
-            <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Storage Path</label>
+            <label class="block text-sm text-secondary-foreground font-medium">Storage Path</label>
             <input
               v-model="config.path.storage"
               type="text"
               :disabled="!isEditing"
-              class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+              class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
             >
           </div>
         </div>
       </div>
 
       <!-- API settings -->
-      <div class="border border-gray-200 rounded-lg p-4 dark:border-gray-800">
-        <h2 class="mb-4 text-xl font-semibold dark:text-white">
+      <div class="border border-secondary rounded-lg bg-card p-4">
+        <h2 class="mb-4 text-xl text-foreground font-semibold">
           API Settings
         </h2>
         <div class="space-y-4">
           <!-- Telegram API -->
           <div>
-            <h3 class="mb-2 text-lg font-medium dark:text-white">
+            <h3 class="mb-2 text-lg text-foreground font-medium">
               Telegram API
             </h3>
             <div class="grid gap-4 md:grid-cols-2">
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">API ID</label>
+                <label class="block text-sm text-secondary-foreground font-medium">API ID</label>
                 <input
                   v-model="config.api.telegram.apiId"
                   type="text"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">API Hash</label>
+                <label class="block text-sm text-secondary-foreground font-medium">API Hash</label>
                 <input
                   v-model="config.api.telegram.apiHash"
                   type="password"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
               <div class="md:col-span-2">
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Phone Number</label>
+                <label class="block text-sm text-secondary-foreground font-medium">Phone Number</label>
                 <input
                   v-model="config.api.telegram.phoneNumber"
                   type="tel"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
             </div>
@@ -228,38 +230,38 @@ onMounted(() => {
 
           <!-- OpenAI API -->
           <div>
-            <h3 class="mb-2 text-lg font-medium dark:text-white">
+            <h3 class="mb-2 text-lg text-foreground font-medium">
               Embedding
             </h3>
             <div class="grid gap-4">
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Provider</label>
+                <label class="block text-sm text-secondary-foreground font-medium">Provider</label>
                 <SelectDropdown v-model="config.api.embedding.provider" :options="embeddingProviderOptions" :disabled="!isEditing" />
               </div>
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">Model</label>
+                <label class="block text-sm text-secondary-foreground font-medium">Model</label>
                 <input
                   v-model="config.api.embedding.model"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">API Key</label>
+                <label class="block text-sm text-secondary-foreground font-medium">API Key</label>
                 <input
                   v-model="config.api.embedding.apiKey"
                   type="password"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
               <div>
-                <label class="block text-sm text-gray-700 font-medium dark:text-gray-300">API Base URL</label>
+                <label class="block text-sm text-secondary-foreground font-medium">API Base URL</label>
                 <input
                   v-model="config.api.embedding.apiBase"
                   type="text"
                   :disabled="!isEditing"
-                  class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 dark:border-gray-700 dark:bg-gray-800 dark:text-white"
+                  class="mt-1 block w-full border border-secondary rounded-md bg-muted px-3 py-2 text-foreground"
                 >
               </div>
             </div>
diff --git a/apps/frontend/src/pages/sync.vue b/apps/frontend/src/pages/sync.vue
index 55fb3bc8c..b2cd846f9 100644
--- a/apps/frontend/src/pages/sync.vue
+++ b/apps/frontend/src/pages/sync.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
+import type { Action } from '../types/action'
 import { storeToRefs } from 'pinia'
-import { ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { toast } from 'vue-sonner'
 import { useChatStore } from '../store/useChat'
 import { useSessionStore } from '../store/useSession'
 import { useSyncTaskStore } from '../store/useSyncTask'
 
+const props = defineProps<{
+  changeTitle?: (title: string) => void
+  setActions?: (actions: Action[]) => void
+  setCollapsed?: (collapsed: boolean) => void
+}>()
+
 const selectedChats = ref<string[]>([])
 
 const sessionStore = useSessionStore()
@@ -43,25 +50,29 @@ watch(currentTaskProgress, (progress) => {
     loadingToast.value = toast.loading(`同步中... ${progress}%`)
   }
 })
+
+onMounted(() => {
+  props.changeTitle?.('同步')
+  props.setActions?.([{
+    icon: 'i-lucide-refresh-cw',
+    name: '开始同步',
+    disabled: computed(() => selectedChats.value.length === 0 || !isLoggedIn.value),
+    onClick: handleSync,
+  }])
+  props.setCollapsed?.(true)
+})
 </script>
 
 <template>
   <div class="space-y-4">
     <div class="flex items-center justify-between">
-      <h3 class="text-lg font-medium">
+      <h3 class="text-lg text-foreground font-medium">
         选择要同步的聊天
       </h3>
       <div class="flex items-center gap-2">
-        <span class="text-sm text-gray-500">
+        <span class="text-sm text-secondary-foreground">
           已选择 {{ selectedChats.length }} 个聊天
         </span>
-        <button
-          class="rounded-md bg-blue-500 px-4 py-2 text-white disabled:cursor-not-allowed hover:bg-blue-600 disabled:opacity-50"
-          :disabled="selectedChats.length === 0 || !isLoggedIn"
-          @click="handleSync"
-        >
-          开始同步
-        </button>
       </div>
     </div>
 
diff --git a/apps/frontend/src/styles/main.css b/apps/frontend/src/styles/main.css
index bf6ff0034..b0dc5d06a 100644
--- a/apps/frontend/src/styles/main.css
+++ b/apps/frontend/src/styles/main.css
@@ -75,3 +75,244 @@ html.dark::view-transition-new(root) {
 :root[class~='dark'] {
   color-scheme: dark;
 }
+
+/* --- Base Radius (Optional: Define once if consistent across themes) --- */
+:root {
+  --radius: 0.5rem; /* Default border radius */
+}
+
+/* --- Default Theme (Optimized & Completed) --- */
+:root[data-theme='default'] {
+  --c-background: oklch(0.99 0 0); /* Slightly off-white for less harshness */
+  --c-foreground: oklch(0.15 0.01 285); /* Dark purple-grey text */
+  --c-card: oklch(1 0 0); /* White card */
+  --c-card-foreground: oklch(0.15 0.01 285); /* Card text */
+  --c-popover: oklch(1 0 0); /* White popover */
+  --c-popover-foreground: oklch(0.15 0.01 285); /* Popover text */
+  --c-primary: oklch(0.62 0.21 260); /* Primary purple (adjusted hue slightly for clarity) */
+  --c-primary-foreground: oklch(0.98 0.01 260); /* Light text on primary */
+  --c-secondary: oklch(0.96 0.015 280); /* Lighter purple-grey secondary */
+  --c-secondary-foreground: oklch(0.25 0.02 280); /* Darker text on secondary */
+  --c-muted: oklch(0.97 0.01 280); /* Muted background */
+  --c-muted-foreground: oklch(0.5 0.015 280); /* Muted text */
+  --c-accent: oklch(0.75 0.18 300); /* Accent color: Magenta/Pink */
+  --c-accent-foreground: oklch(0.1 0.03 300); /* Dark text on accent */
+  --c-destructive: oklch(0.65 0.2 25); /* Destructive color: Red */
+  --c-destructive-foreground: oklch(0.99 0.02 25); /* Light text on destructive */
+  --c-border: oklch(0.9 0.01 280); /* Border color */
+  --c-input: oklch(0.9 0.01 280); /* Input border/background */
+  --c-ring: oklch(0.62 0.21 260 / 0.4); /* Focus ring (primary color with alpha) */
+  --radius: 0.5rem; /* Theme-specific radius (overrides root if needed) */
+}
+
+.dark[data-theme='default'] {
+  --c-background: oklch(0.14 0.01 285); /* Dark purple-grey background */
+  --c-foreground: oklch(0.98 0.005 285); /* Very light grey text */
+  --c-card: oklch(0.2 0.015 285); /* Slightly lighter card */
+  --c-card-foreground: oklch(0.98 0.005 285); /* Card text */
+  --c-popover: oklch(0.2 0.015 285); /* Popover background */
+  --c-popover-foreground: oklch(0.98 0.005 285); /* Popover text */
+  --c-primary: oklch(0.6 0.22 260); /* Primary purple (adjusted for dark mode) */
+  --c-primary-foreground: oklch(0.15 0.03 260); /* Dark text on primary */
+  --c-secondary: oklch(0.3 0.03 280); /* Darker secondary */
+  --c-secondary-foreground: oklch(0.98 0.005 280); /* Light text on secondary */
+  --c-muted: oklch(0.25 0.02 280); /* Darker muted background */
+  --c-muted-foreground: oklch(0.65 0.015 280); /* Muted text */
+  --c-accent: oklch(0.7 0.19 300); /* Accent color (adjusted for dark mode) */
+  --c-accent-foreground: oklch(0.1 0.04 300); /* Dark text on accent */
+  --c-destructive: oklch(0.7 0.2 25); /* Destructive color (adjusted for dark mode) */
+  --c-destructive-foreground: oklch(0.15 0.03 25); /* Dark text on destructive */
+  --c-border: oklch(0.28 0.02 280); /* Border color */
+  --c-input: oklch(0.28 0.02 280); /* Input border/background */
+  --c-ring: oklch(0.6 0.22 260 / 0.4); /* Focus ring */
+  /* --radius is inherited or can be overridden */
+}
+
+/* --- Monet Theme (Revised for Harmony & Completed) --- */
+/* Inspired by nature palettes: soft blues, greens, and earthy tones */
+:root[data-theme='monet'] {
+  --c-background: oklch(0.98 0.015 190); /* Very light cyan/sky blue background */
+  --c-foreground: oklch(0.25 0.04 250); /* Deep indigo/violet text */
+  --c-card: oklch(0.99 0.01 190); /* Slightly off-white card with a hint of cyan */
+  --c-card-foreground: oklch(0.25 0.04 250); /* Card text */
+  --c-popover: oklch(0.99 0.01 190); /* Popover background */
+  --c-popover-foreground: oklch(0.25 0.04 250); /* Popover text */
+  --c-primary: oklch(0.65 0.14 230); /* Primary: Soft Cornflower Blue */
+  --c-primary-foreground: oklch(0.99 0.01 230); /* Very light text on primary */
+  --c-secondary: oklch(0.9 0.05 140); /* Secondary: Pale Sage Green */
+  --c-secondary-foreground: oklch(0.3 0.06 140); /* Darker green text on secondary */
+  --c-muted: oklch(0.95 0.02 190); /* Muted background: Very light cyan-grey */
+  --c-muted-foreground: oklch(0.5 0.03 240); /* Muted text: Soft blue-grey */
+  --c-accent: oklch(0.8 0.1 90); /* Accent: Warm Peach/Sand */
+  --c-accent-foreground: oklch(0.2 0.05 90); /* Dark text on accent */
+  --c-destructive: oklch(0.7 0.18 30); /* Destructive: Terracotta/Soft Red */
+  --c-destructive-foreground: oklch(0.99 0.02 30); /* Light text on destructive */
+  --c-border: oklch(0.9 0.02 190); /* Border color */
+  --c-input: oklch(0.9 0.02 190); /* Input border/background */
+  --c-ring: oklch(0.65 0.14 230 / 0.4); /* Focus ring */
+  --radius: 0.5rem;
+}
+
+.dark[data-theme='monet'] {
+  --c-background: oklch(0.2 0.03 250); /* Deep Indigo background */
+  --c-foreground: oklch(0.96 0.015 190); /* Light cyan-grey text */
+  --c-card: oklch(0.25 0.04 240); /* Slightly lighter indigo card */
+  --c-card-foreground: oklch(0.96 0.015 190); /* Card text */
+  --c-popover: oklch(0.25 0.04 240); /* Popover background */
+  --c-popover-foreground: oklch(0.96 0.015 190); /* Popover text */
+  --c-primary: oklch(0.6 0.15 230); /* Primary: Soft Blue (adjusted) */
+  --c-primary-foreground: oklch(0.15 0.03 230); /* Dark text on primary */
+  --c-secondary: oklch(0.4 0.06 140); /* Secondary: Dark Sage Green */
+  --c-secondary-foreground: oklch(0.96 0.015 140); /* Light text on secondary */
+  --c-muted: oklch(0.3 0.03 250); /* Muted background: Dark indigo-grey */
+  --c-muted-foreground: oklch(0.65 0.02 190); /* Muted text: Medium cyan-grey */
+  --c-accent: oklch(0.7 0.11 90); /* Accent: Muted Gold/Sand (adjusted) */
+  --c-accent-foreground: oklch(0.15 0.05 90); /* Dark text on accent */
+  --c-destructive: oklch(0.65 0.19 30); /* Destructive: Muted Red (adjusted) */
+  --c-destructive-foreground: oklch(0.15 0.03 30); /* Dark text on destructive */
+  --c-border: oklch(0.3 0.03 240); /* Border color */
+  --c-input: oklch(0.3 0.03 240); /* Input border/background */
+  --c-ring: oklch(0.6 0.15 230 / 0.4); /* Focus ring */
+  /* --radius is inherited or can be overridden */
+}
+
+/* --- Orange Theme (Optimized & Completed) --- */
+:root[data-theme='orange'] {
+  --c-background: oklch(0.99 0.01 60); /* Very light warm off-white */
+  --c-foreground: oklch(0.2 0.03 60); /* Dark brown text */
+  --c-card: oklch(1 0 0); /* White card */
+  --c-card-foreground: oklch(0.2 0.03 60); /* Card text */
+  --c-popover: oklch(1 0 0); /* White popover */
+  --c-popover-foreground: oklch(0.2 0.03 60); /* Popover text */
+  --c-primary: oklch(0.7 0.18 55); /* Primary Orange */
+  --c-primary-foreground: oklch(0.99 0.01 55); /* Light text on primary */
+  --c-secondary: oklch(0.95 0.06 60); /* Light orange/peach secondary */
+  --c-secondary-foreground: oklch(0.35 0.08 55); /* Darker orange text on secondary */
+  --c-muted: oklch(0.96 0.03 60); /* Muted background: Very light peach */
+  --c-muted-foreground: oklch(0.55 0.04 60); /* Muted text: Warm grey */
+  --c-accent: oklch(0.75 0.15 90); /* Accent: Yellow/Gold */
+  --c-accent-foreground: oklch(0.2 0.04 90); /* Dark text on accent */
+  --c-destructive: oklch(0.65 0.2 25); /* Destructive: Red */
+  --c-destructive-foreground: oklch(0.99 0.02 25); /* Light text on destructive */
+  --c-border: oklch(0.9 0.03 60); /* Border color */
+  --c-input: oklch(0.9 0.03 60); /* Input border/background */
+  --c-ring: oklch(0.7 0.18 55 / 0.4); /* Focus ring */
+  --radius: 0.5rem;
+}
+
+.dark[data-theme='orange'] {
+  --c-background: oklch(0.2 0.02 60); /* Dark brown background */
+  --c-foreground: oklch(0.97 0.015 60); /* Light beige text */
+  --c-card: oklch(0.25 0.03 60); /* Slightly lighter brown card */
+  --c-card-foreground: oklch(0.97 0.015 60); /* Card text */
+  --c-popover: oklch(0.25 0.03 60); /* Popover background */
+  --c-popover-foreground: oklch(0.97 0.015 60); /* Popover text */
+  --c-primary: oklch(0.75 0.19 55); /* Primary Orange (adjusted) */
+  --c-primary-foreground: oklch(0.2 0.04 55); /* Dark text on primary */
+  --c-secondary: oklch(0.4 0.07 60); /* Darker orange/brown secondary */
+  --c-secondary-foreground: oklch(0.97 0.015 60); /* Light text on secondary */
+  --c-muted: oklch(0.3 0.03 60); /* Muted background: Dark warm grey */
+  --c-muted-foreground: oklch(0.65 0.03 60); /* Muted text */
+  --c-accent: oklch(0.8 0.16 90); /* Accent: Gold (adjusted) */
+  --c-accent-foreground: oklch(0.15 0.05 90); /* Dark text on accent */
+  --c-destructive: oklch(0.7 0.2 25); /* Destructive: Red (adjusted) */
+  --c-destructive-foreground: oklch(0.15 0.03 25); /* Dark text on destructive */
+  --c-border: oklch(0.3 0.03 60); /* Border color */
+  --c-input: oklch(0.3 0.03 60); /* Input border/background */
+  --c-ring: oklch(0.75 0.19 55 / 0.4); /* Focus ring */
+  /* --radius is inherited or can be overridden */
+}
+
+/* --- Green Theme (Optimized & Completed) --- */
+:root[data-theme='green'] {
+  --c-background: oklch(0.99 0.01 145); /* Very light cool off-white */
+  --c-foreground: oklch(0.18 0.03 145); /* Dark green text */
+  --c-card: oklch(1 0 0); /* White card */
+  --c-card-foreground: oklch(0.18 0.03 145); /* Card text */
+  --c-popover: oklch(1 0 0); /* White popover */
+  --c-popover-foreground: oklch(0.18 0.03 145); /* Popover text */
+  --c-primary: oklch(0.65 0.16 145); /* Primary Green */
+  --c-primary-foreground: oklch(0.99 0.01 145); /* Light text on primary */
+  --c-secondary: oklch(0.94 0.05 145); /* Light green/mint secondary */
+  --c-secondary-foreground: oklch(0.3 0.07 145); /* Darker green text on secondary */
+  --c-muted: oklch(0.96 0.02 145); /* Muted background: Very light mint */
+  --c-muted-foreground: oklch(0.55 0.03 145); /* Muted text: Cool grey */
+  --c-accent: oklch(0.75 0.15 190); /* Accent: Cyan/Teal */
+  --c-accent-foreground: oklch(0.15 0.03 190); /* Dark text on accent */
+  --c-destructive: oklch(0.65 0.2 25); /* Destructive: Red */
+  --c-destructive-foreground: oklch(0.99 0.02 25); /* Light text on destructive */
+  --c-border: oklch(0.9 0.02 145); /* Border color */
+  --c-input: oklch(0.9 0.02 145); /* Input border/background */
+  --c-ring: oklch(0.65 0.16 145 / 0.4); /* Focus ring */
+  --radius: 0.5rem;
+}
+
+.dark[data-theme='green'] {
+  --c-background: oklch(0.2 0.025 145); /* Dark green background */
+  --c-foreground: oklch(0.97 0.015 145); /* Light cool grey text */
+  --c-card: oklch(0.25 0.035 145); /* Slightly lighter dark green card */
+  --c-card-foreground: oklch(0.97 0.015 145); /* Card text */
+  --c-popover: oklch(0.25 0.035 145); /* Popover background */
+  --c-popover-foreground: oklch(0.97 0.015 145); /* Popover text */
+  --c-primary: oklch(0.7 0.17 145); /* Primary Green (adjusted) */
+  --c-primary-foreground: oklch(0.15 0.03 145); /* Dark text on primary */
+  --c-secondary: oklch(0.4 0.06 145); /* Darker secondary green */
+  --c-secondary-foreground: oklch(0.97 0.015 145); /* Light text on secondary */
+  --c-muted: oklch(0.3 0.03 145); /* Muted background: Dark cool grey */
+  --c-muted-foreground: oklch(0.65 0.03 145); /* Muted text */
+  --c-accent: oklch(0.7 0.16 190); /* Accent: Teal (adjusted) */
+  --c-accent-foreground: oklch(0.1 0.04 190); /* Dark text on accent */
+  --c-destructive: oklch(0.7 0.2 25); /* Destructive: Red (adjusted) */
+  --c-destructive-foreground: oklch(0.15 0.03 25); /* Dark text on destructive */
+  --c-border: oklch(0.3 0.03 145); /* Border color */
+  --c-input: oklch(0.3 0.03 145); /* Input border/background */
+  --c-ring: oklch(0.7 0.17 145 / 0.4); /* Focus ring */
+  /* --radius is inherited or can be overridden */
+}
+
+/* --- Light Blue Theme (Optimized & Completed) --- */
+:root[data-theme='light-blue'] {
+  --c-background: oklch(0.99 0.006 260); /* Very light blue background */
+  --c-foreground: oklch(0.22 0.025 260); /* Dark blue-grey text */
+  --c-card: oklch(1 0 0); /* White card */
+  --c-card-foreground: oklch(0.22 0.025 260); /* Card text */
+  --c-popover: oklch(1 0 0); /* White popover */
+  --c-popover-foreground: oklch(0.22 0.025 260); /* Popover text */
+  --c-primary: oklch(0.75 0.12 260); /* Primary Light Blue */
+  --c-primary-foreground: oklch(0.15 0.04 260); /* Dark text on primary */
+  --c-secondary: oklch(0.92 0.05 260); /* Lighter blue secondary */
+  --c-secondary-foreground: oklch(0.4 0.07 260); /* Medium blue text on secondary */
+  --c-muted: oklch(0.96 0.018 260); /* Muted background: Very light blue-grey */
+  --c-muted-foreground: oklch(0.55 0.025 260); /* Muted text: Cool grey */
+  --c-accent: oklch(0.8 0.15 210); /* Accent: Aqua/Cyan */
+  --c-accent-foreground: oklch(0.15 0.03 210); /* Dark text on accent */
+  --c-destructive: oklch(0.65 0.2 25); /* Destructive: Red */
+  --c-destructive-foreground: oklch(0.99 0.02 25); /* Light text on destructive */
+  --c-border: oklch(0.9 0.02 260); /* Border color */
+  --c-input: oklch(0.9 0.02 260); /* Input border/background */
+  --c-ring: oklch(0.75 0.12 260 / 0.4); /* Focus ring */
+  --radius: 0.5rem;
+}
+
+.dark[data-theme='light-blue'] {
+  --c-background: oklch(0.18 0.025 260); /* Dark blue-grey background */
+  --c-foreground: oklch(0.97 0.012 260); /* Light blue-grey text */
+  --c-card: oklch(0.23 0.035 260); /* Slightly lighter dark blue-grey card */
+  --c-card-foreground: oklch(0.97 0.012 260); /* Card text */
+  --c-popover: oklch(0.23 0.035 260); /* Popover background */
+  --c-popover-foreground: oklch(0.97 0.012 260); /* Popover text */
+  --c-primary: oklch(0.7 0.14 260); /* Primary Light Blue (adjusted) */
+  --c-primary-foreground: oklch(0.15 0.05 260); /* Dark text on primary */
+  --c-secondary: oklch(0.4 0.06 260); /* Darker secondary blue */
+  --c-secondary-foreground: oklch(0.97 0.012 260); /* Light text on secondary */
+  --c-muted: oklch(0.3 0.03 260); /* Muted background: Dark cool grey */
+  --c-muted-foreground: oklch(0.65 0.025 260); /* Muted text */
+  --c-accent: oklch(0.75 0.16 210); /* Accent: Aqua/Cyan (adjusted) */
+  --c-accent-foreground: oklch(0.1 0.04 210); /* Dark text on accent */
+  --c-destructive: oklch(0.7 0.2 25); /* Destructive: Red (adjusted) */
+  --c-destructive-foreground: oklch(0.15 0.03 25); /* Dark text on destructive */
+  --c-border: oklch(0.3 0.03 260); /* Border color */
+  --c-input: oklch(0.3 0.03 260); /* Input border/background */
+  --c-ring: oklch(0.7 0.14 260 / 0.4); /* Focus ring */
+  /* --radius is inherited or can be overridden */
+}
diff --git a/apps/frontend/src/types/action.ts b/apps/frontend/src/types/action.ts
new file mode 100644
index 000000000..c0ffc26d8
--- /dev/null
+++ b/apps/frontend/src/types/action.ts
@@ -0,0 +1,11 @@
+import type { Ref } from 'vue'
+
+export interface Action {
+  icon: string
+  onClick: () => void
+  name?: string
+  confirm?: boolean
+  confirmText?: string
+  disabled?: boolean | Ref<boolean>
+
+}
diff --git a/apps/frontend/src/types/chat.ts b/apps/frontend/src/types/chat.ts
new file mode 100644
index 000000000..31e143948
--- /dev/null
+++ b/apps/frontend/src/types/chat.ts
@@ -0,0 +1,5 @@
+import type { CoreDialog } from '@tg-search/core'
+
+export interface Chat extends CoreDialog {
+  isSelected?: boolean
+}
diff --git a/apps/frontend/src/types/message-props.ts b/apps/frontend/src/types/message-props.ts
new file mode 100644
index 000000000..39e200039
--- /dev/null
+++ b/apps/frontend/src/types/message-props.ts
@@ -0,0 +1,6 @@
+export interface MessageProps {
+  text: string
+  sender: string
+  timestamp: string
+  isSender: boolean
+}
diff --git a/apps/frontend/src/types/page.ts b/apps/frontend/src/types/page.ts
new file mode 100644
index 000000000..5358f8415
--- /dev/null
+++ b/apps/frontend/src/types/page.ts
@@ -0,0 +1,5 @@
+export interface Page {
+  name: string
+  icon: string
+  path: string
+}
diff --git a/apps/frontend/typed-router.d.ts b/apps/frontend/typed-router.d.ts
index 96833fd7f..cb51dd59d 100644
--- a/apps/frontend/typed-router.d.ts
+++ b/apps/frontend/typed-router.d.ts
@@ -20,6 +20,7 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+    '/chat/[id]': RouteRecordInfo<'/chat/[id]', '/chat/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
     '/settings': RouteRecordInfo<'/settings', '/settings', Record<never, never>, Record<never, never>>,
     '/sync': RouteRecordInfo<'/sync', '/sync', Record<never, never>, Record<never, never>>,
diff --git a/apps/frontend/uno.config.ts b/apps/frontend/uno.config.ts
index 06d5e493c..3cba28476 100644
--- a/apps/frontend/uno.config.ts
+++ b/apps/frontend/uno.config.ts
@@ -60,6 +60,20 @@ export default defineConfig({
         pulse: 'infinite',
       },
     },
+    colors: {
+      'background': 'var(--c-background)',
+      'foreground': 'var(--c-foreground)',
+      'card': 'var(--c-card)',
+      'card-foreground': 'var(--c-card-foreground)',
+      'popover': 'var(--c-popover)',
+      'popover-foreground': 'var(--c-popover-foreground)',
+      'primary': 'var(--c-primary)',
+      'primary-foreground': 'var(--c-primary-foreground)',
+      'secondary': 'var(--c-secondary)',
+      'secondary-foreground': 'var(--c-secondary-foreground)',
+      'muted': 'var(--c-muted)',
+      'muted-foreground': 'var(--c-muted-foreground)',
+    },
   },
   safelist: [
     'animate-fade-in',