diff --git a/apps/desktop/src-tauri/src/lib.rs b/apps/desktop/src-tauri/src/lib.rs
index fb9c22d8..f36b7f16 100644
--- a/apps/desktop/src-tauri/src/lib.rs
+++ b/apps/desktop/src-tauri/src/lib.rs
@@ -2,7 +2,7 @@ use tauri::LogicalSize;
 
 #[tauri::command]
 fn resize_for_route(window: tauri::Window, route: String) {
-    let is_login = route == "/login" || route == "/";
+    let is_login = route == "/login";
     if is_login {
         let _ = window.set_min_size(None::<tauri::Size>);
         let _ = window.set_size(tauri::Size::Logical(LogicalSize::new(480.0, 700.0)));
diff --git a/apps/desktop/src-tauri/tauri.conf.json b/apps/desktop/src-tauri/tauri.conf.json
index be5060be..6435a070 100644
--- a/apps/desktop/src-tauri/tauri.conf.json
+++ b/apps/desktop/src-tauri/tauri.conf.json
@@ -13,8 +13,8 @@
     "windows": [
       {
         "title": "Memoh",
-        "width": 480,
-        "height": 700
+        "width": 1280,
+        "height": 800
       }
     ],
     "security": {
diff --git a/apps/web/AGENTS.md b/apps/web/AGENTS.md
index 132ef13e..2f2d7c0d 100644
--- a/apps/web/AGENTS.md
+++ b/apps/web/AGENTS.md
@@ -2,7 +2,7 @@
 
 ## Overview
 
-`@memohai/web` is the management UI for Memoh, built with Vue 3 + Vite. It provides visual configuration for bots, models, channels, memory, and more.
+`@memohai/web` is the management UI for Memoh, built with Vue 3 + Vite. It provides a chat interface for interacting with bots, plus visual configuration for bots, models, channels, memory, and more.
 
 ## Tech Stack
 
@@ -16,7 +16,7 @@
 | Data Fetching | Pinia Colada (`@pinia/colada`) + `@memohai/sdk` |
 | Forms | vee-validate + `@vee-validate/zod` + Zod |
 | i18n | vue-i18n (en / zh) |
-| Icons | FontAwesome (primary) + lucide-vue-next (secondary) |
+| Icons | FontAwesome (primary: fas/far/fab) + lucide-vue-next (secondary) |
 | Toast | vue-sonner |
 | Tables | @tanstack/vue-table |
 | Markdown | markstream-vue + Shiki + Mermaid + KaTeX |
@@ -27,38 +27,66 @@
 
 ```
 src/
-├── App.vue                    # Root component (RouterView + Toaster)
+├── App.vue                    # Root component (RouterView + Toaster + settings init)
 ├── main.ts                    # App entry (plugins, global components, API client setup)
-├── router.ts                  # Route definitions and auth guard
-├── style.css                  # Tailwind imports, CSS variables, theme tokens
+├── router.ts                  # Route definitions, auth guard, chunk error recovery
+├── style.css                  # Tailwind imports (delegates to @memohai/ui/style.css)
 ├── i18n.ts                    # vue-i18n configuration
-├── assets/                    # Static assets
+├── assets/                    # Static assets (logo.png, vue.svg)
 ├── components/                # Shared components
-│   ├── sidebar/               #   App sidebar navigation
-│   ├── main-container/        #   Main content area (header + breadcrumb + content)
+│   ├── sidebar/               #   Bot list sidebar (collapsible, bot items, settings link)
+│   │   ├── index.vue          #     Sidebar with bot list + settings gear footer
+│   │   └── bot-item.vue       #     Individual bot entry in sidebar
+│   ├── settings-sidebar/      #   Settings section sidebar (back-to-chat + nav items)
+│   ├── main-container/        #   Main content area (KeepAlive RouterView)
 │   ├── master-detail-sidebar-layout/  # Master-detail layout pattern
+│   ├── chat-list/             #   Chat list helpers
+│   │   └── channel-badge/     #     Channel badge component
+│   ├── chat/                  #   Chat UI sub-components
+│   │   ├── chat-status/       #     Chat connection status indicator
+│   │   └── chat-step/         #     Chat processing step indicator
 │   ├── data-table/            #   TanStack table wrapper
+│   ├── file-manager/          #   File browser (list + viewer)
+│   ├── monaco-editor/         #   Monaco code editor wrapper
 │   ├── form-dialog-shell/     #   Dialog wrapper for forms
 │   ├── confirm-popover/       #   Confirmation popover
 │   ├── loading-button/        #   Button with loading state
 │   ├── status-dot/            #   Status indicator dot
 │   ├── warning-banner/        #   Warning banner
-│   ├── search-provider-logo/  #   Search provider icons
+│   ├── channel-icon/          #   Channel platform icon
+│   ├── provider-icon/         #   LLM provider icon (icons.ts + index.vue)
+│   ├── search-provider-logo/  #   Search provider icons (custom-icons.ts + index.vue)
 │   ├── searchable-select-popover/  # Searchable dropdown
+│   ├── timezone-select/       #   Timezone selector
+│   ├── key-value-editor/      #   Key-value pair editor
+│   ├── import-models-dialog/  #   Bulk model import dialog
 │   ├── add-platform/          #   Add platform dialog
 │   ├── add-provider/          #   Add LLM provider dialog
-│   ├── create-model/          #   Create model dialog
-│   └── chat-list/             #   Chat list helpers
+│   └── create-model/          #   Create model dialog
 ├── composables/               # Reusable composition functions
-│   ├── api/                   #   API-related composables (chat, SSE, platform)
+│   ├── api/                   #   API-related composables
+│   │   ├── useChat.ts         #     Aggregated re-export of chat composables
+│   │   ├── useChat.types.ts   #     Bot, Session, Message, StreamEvent types
+│   │   ├── useChat.chat-api.ts  #   Bot/session CRUD (fetchBots, fetchSessions, etc.)
+│   │   ├── useChat.message-api.ts  # Message fetch, SSE streaming, local channel
+│   │   ├── useChat.sse.ts     #     SSE stream reader and parser
+│   │   ├── useChat.ws.ts      #     WebSocket connection (send, abort, reconnect)
+│   │   ├── useChat.content.ts #     Message content parsing (tool calls, text, reasoning)
+│   │   ├── useChat.sse.test.ts  #   SSE parser tests
+│   │   ├── useContainerStream.ts  # Container creation SSE stream
+│   │   └── usePlatform.ts     #     Platform list query + create mutation
 │   ├── useDialogMutation.ts   #   Mutation wrapper with toast error handling
 │   ├── useRetryingStream.ts   #   SSE retry with exponential backoff
 │   ├── useSyncedQueryParam.ts #   URL query param sync
 │   ├── useBotStatusMeta.ts    #   Bot status metadata
 │   ├── useAvatarInitials.ts   #   Avatar initial generation
 │   ├── useClipboard.ts        #   Clipboard utilities
-│   └── useKeyValueTags.ts     #   Tag management
-├── constants/                 # Constants (client types, etc.)
+│   ├── useKeyValueTags.ts     #   Tag management
+│   ├── useShikiHighlighter.ts #   Shiki syntax highlighter singleton
+│   └── useTerminalCache.ts    #   Terminal output cache
+├── constants/                 # Constants
+│   ├── client-types.ts        #   LLM client type definitions
+│   └── compatibilities.ts     #   Feature compatibility flags
 ├── i18n/locales/              # Translation files (en.json, zh.json)
 ├── layout/
 │   └── main-layout/           # Top-level layout (SidebarProvider)
@@ -66,105 +94,169 @@ src/
 │   └── api-client.ts          # SDK client setup (base URL, auth interceptor)
 ├── pages/                     # Route page components
 │   ├── login/                 #   Login page
-│   ├── main-section/          #   Authenticated layout wrapper
-│   ├── home/                  #   Home page
-│   ├── chat/                  #   Chat interface (SSE streaming)
+│   ├── main-section/          #   Chat section layout (bot sidebar + main container)
+│   ├── settings-section/      #   Settings section layout (settings sidebar + KeepAlive)
+│   ├── home/                  #   Chat interface (used by both `/` and `/chat/:botId?/:sessionId?`)
+│   │   ├── index.vue          #     Route ↔ store sync, session sidebar + chat area
+│   │   ├── composables/       #     Page-specific composables
+│   │   │   ├── useFileManagerProvider.ts  # File manager context
+│   │   │   └── useMediaGallery.ts         # Media gallery state
+│   │   └── components/        #     Chat UI components (26 files)
+│   │       ├── chat-area.vue          # Main chat area (messages, input, attachments)
+│   │       ├── session-sidebar.vue    # Session list sidebar (search, filter, CRUD)
+│   │       ├── bot-sidebar.vue        # Alternative bot sidebar layout
+│   │       ├── chat-header.vue        # Chat top bar (status, step indicator)
+│   │       ├── message-item.vue       # Single message (user/assistant, markdown, blocks)
+│   │       ├── session-item.vue       # Session list row (avatar, title, timestamp)
+│   │       ├── session-metadata.vue   # Collapsible session metadata panel
+│   │       ├── bot-item.vue           # Bot item in sidebar
+│   │       ├── thinking-block.vue     # Collapsible thinking/reasoning block
+│   │       ├── attachment-block.vue   # Attachment grid (images, audio, files)
+│   │       ├── media-gallery-lightbox.vue  # Fullscreen media lightbox
+│   │       ├── tool-call-generic.vue  # Generic tool call (name, status, JSON I/O)
+│   │       ├── tool-call-list.vue     # File listing tool display
+│   │       ├── tool-call-read.vue     # File read tool display
+│   │       ├── tool-call-write.vue    # File write tool display
+│   │       ├── tool-call-edit.vue     # File edit tool display
+│   │       ├── tool-call-exec.vue     # Command execution tool display
+│   │       ├── tool-call-web-search.vue    # Web search tool display
+│   │       ├── tool-call-web-fetch.vue     # Web fetch tool display
+│   │       ├── tool-call-browser.vue       # Browser action tool display
+│   │       ├── tool-call-memory.vue        # Memory read/write tool display
+│   │       ├── tool-call-message.vue       # Send message tool display
+│   │       ├── tool-call-email.vue         # Email tool display
+│   │       ├── tool-call-schedule.vue      # Schedule tool display
+│   │       ├── tool-call-contacts.vue      # Contacts tool display
+│   │       ├── tool-call-subagent.vue      # Sub-agent tool display
+│   │       └── tool-call-skill.vue         # Skill activation tool display
 │   ├── bots/                  #   Bot list + detail (tabs: overview, memory, channels, etc.)
+│   │   ├── index.vue          #     Bot grid with create dialog
+│   │   ├── detail.vue         #     Bot detail with tabbed interface
+│   │   └── components/        #     Bot sub-components (25+ files)
 │   ├── models/                #   LLM provider & model management
-│   ├── search-providers/      #   Search provider management
+│   ├── search-providers/      #   Search provider management (12+ engine configs)
+│   ├── memory-providers/      #   Memory provider management
+│   ├── tts-providers/         #   TTS provider & model management
 │   ├── email-providers/       #   Email provider management
-│   ├── settings/              #   User settings (profile, password, theme, channels)
-│   └── platform/              #   Platform management
+│   ├── browser-contexts/      #   Browser context management
+│   ├── usage/                 #   Token usage statistics
+│   ├── settings/              #   User settings (profile, password, bind codes)
+│   ├── platform/              #   Platform management
+│   └── oauth/                 #   OAuth callback pages
+│       └── mcp-callback.vue   #     MCP OAuth callback handler
 ├── store/                     # Pinia stores
 │   ├── user.ts                #   User state, JWT token, login/logout
 │   ├── settings.ts            #   UI settings (theme, language)
 │   ├── capabilities.ts        #   Server capabilities (container backend)
-│   └── chat-list.ts           #   Chat state, messages, SSE streaming
+│   ├── chat-selection.ts      #   Current bot/session selection (localStorage persisted)
+│   └── chat-list.ts           #   Chat messages, streaming state, SSE/WS event processing
 └── utils/                     # Utility functions
     ├── api-error.ts           #   API error message extraction
     ├── date-time.ts           #   Date/time formatting
+    ├── date-time.test.ts      #   Date/time tests
     ├── channel-icons.ts       #   Channel platform icons
-    └── key-value-tags.ts      #   Tag ↔ Record conversion
+    ├── key-value-tags.ts      #   Tag ↔ Record conversion
+    ├── key-value-tags.test.ts #   Tag conversion tests
+    ├── image-ref.ts           #   Image reference URL resolution
+    ├── image-ref.test.ts      #   Image ref tests
+    ├── timezones.ts           #   Timezone list and utilities
+    └── useControlVisibleStatus.ts  # Visibility control utility
 ```
 
 ## Routes
 
+The app uses a two-section layout architecture:
+
+### Chat Section (`/`)
+
+| Path | Name | Component | Description |
+|------|------|-----------|-------------|
+| `/` | home | `home/index.vue` | Home — empty state when no bot selected |
+| `/chat/:botId?/:sessionId?` | chat | `home/index.vue` | Chat interface with bot + session params |
+
+Both routes render the same `home/index.vue` component. The `home` route shows an empty state; the `chat` route auto-selects a bot and optionally a session based on URL params. URL and store state are bidirectionally synced.
+
+### Settings Section (`/settings`)
+
+| Path | Name | Component | Description |
+|------|------|-----------|-------------|
+| `/settings/bots` | bots | `bots/index.vue` | Bot list grid |
+| `/settings/bots/:botId` | bot-detail | `bots/detail.vue` | Bot detail with tabs |
+| `/settings/models` | models | `models/index.vue` | LLM provider & model management |
+| `/settings/search-providers` | search-providers | `search-providers/index.vue` | Search provider management |
+| `/settings/memory-providers` | memory-providers | `memory-providers/index.vue` | Memory provider management |
+| `/settings/tts-providers` | tts-providers | `tts-providers/index.vue` | TTS provider & model management |
+| `/settings/email-providers` | email-providers | `email-providers/index.vue` | Email provider management |
+| `/settings/browser-contexts` | browser-contexts | `browser-contexts/index.vue` | Browser context management |
+| `/settings/usage` | usage | `usage/index.vue` | Token usage statistics |
+| `/settings/profile` | settings | `settings/index.vue` | User profile settings |
+| `/settings/platform` | platform | `platform/index.vue` | Platform management |
+
+`/settings` redirects to `/settings/bots` by default.
+
+### Standalone Routes
+
 | Path | Name | Component | Description |
 |------|------|-----------|-------------|
 | `/login` | Login | `login/index.vue` | Login form (no auth required) |
-| `/chat` | chat | `chat/index.vue` | Chat interface with bot sidebar |
-| `/home` | home | `home/index.vue` | Home dashboard |
-| `/bots` | bots | `bots/index.vue` | Bot list grid |
-| `/bots/:botId` | bot-detail | `bots/detail.vue` | Bot detail with tabs |
-| `/models` | models | `models/index.vue` | LLM provider & model management |
-| `/search-providers` | search-providers | `search-providers/index.vue` | Search provider management |
-| `/email-providers` | email-providers | `email-providers/index.vue` | Email provider management |
-| `/settings` | settings | `settings/index.vue` | User settings |
-| `/platform` | platform | `platform/index.vue` | Platform management |
+| `/oauth/mcp/callback` | oauth-mcp-callback | `oauth/mcp-callback.vue` | MCP OAuth callback (no auth required) |
 
-Auth guard: all routes except `/login` require `localStorage.getItem('token')`. Logged-in users accessing `/login` are redirected to `/chat`.
+### Auth Guard
+
+- All routes except `/login` and `/oauth/*` require `localStorage.getItem('token')`.
+- Logged-in users accessing `/login` are redirected to `/`.
+- Chunk load errors (dynamic import failures) trigger an automatic page reload.
+- Tauri integration: `afterEach` hook calls `resize_for_route` when running inside Tauri.
 
 ## Layout System
 
-Three-tier layout architecture:
+Two-section layout architecture, both sharing the same `MainLayout` wrapper:
 
 1. **MainLayout** (`layout/main-layout/`) — Top-level wrapper using `SidebarProvider` from `@memohai/ui`. Provides `#sidebar` and `#main` slots.
-2. **Sidebar** (`components/sidebar/`) — Collapsible navigation with logo, menu items, and user avatar footer. Active route highlighting.
-3. **MainContainer** (`components/main-container/`) — Header (sidebar trigger + breadcrumb) + scrollable content area with `<KeepAlive>` wrapped `<RouterView>`.
 
-Several pages use **MasterDetailSidebarLayout** (`components/master-detail-sidebar-layout/`) for left-sidebar + detail-panel patterns (chat, models, search providers, email providers).
+2. **Chat Section** (`pages/main-section/`) — Uses `MainLayout` with:
+   - **Sidebar** (`components/sidebar/`) — Bot list sidebar (collapsible). Header shows "Bots" label + create button. Body lists all bots as `BotItem` entries. Footer has a settings gear link to `/settings`.
+   - **MainContainer** (`components/main-container/`) — `<KeepAlive>` wrapped `<RouterView>` for chat pages.
+
+3. **Settings Section** (`pages/settings-section/`) — Uses `MainLayout` with:
+   - **SettingsSidebar** (`components/settings-sidebar/`) — Collapsible settings navigation. Top has a "back to chat" button that restores the last selected bot/session. Menu items: Bots, Models, Search Providers, Memory Providers, TTS Providers, Email Providers, Browser Contexts, Usage, Settings, Platform.
+   - **SidebarInset** — `<KeepAlive>` wrapped `<RouterView>` for settings pages.
+
+4. **Home/Chat Page** (`pages/home/`) — Internal layout:
+   - **SessionSidebar** — Left panel: session search, source filter, new session button, session list.
+   - **ChatArea** — Center panel: message list with scroll, input area with attachments.
+   - **SessionMetadata** — Right panel (currently disabled): collapsible session metadata.
+
+Several settings pages use **MasterDetailSidebarLayout** (`components/master-detail-sidebar-layout/`) for left-sidebar + detail-panel patterns (models, search providers, email providers, memory providers, tts providers, browser contexts).
 
 ## CSS & Theming
 
+Design tokens, color palette, typography, elevation strategy, and component visual specs are defined in `packages/ui/DESIGN.md`. **Read that file before making any UI changes.**
+
 ### Tailwind CSS 4
 
-CSS-based configuration in `style.css` (no `tailwind.config.*` file):
+CSS-based configuration (no `tailwind.config.*` file). All design tokens (CSS variables, `@theme inline` mapping, base styles) live in `packages/ui/src/style.css`. The web app imports them via:
 
 ```css
-@import "tailwindcss";
+@import "@memohai/ui/style.css";
 ```
 
-Design tokens are CSS custom properties in `:root` / `.dark` using OKLCH color space with a unified subtle purple hue (285):
-- Colors: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring`
-- Sidebar: `--sidebar`, `--sidebar-foreground`, `--sidebar-primary`, etc.
-- Radius: `--radius` with size variants (`--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`)
-- Chart: `--chart-1` through `--chart-5`
-
-Tokens are mapped to Tailwind via `@theme inline` block in `style.css`.
-
-### Color Design Principles
-
-The color system avoids extreme black/white to reduce visual strain and create a layered, warm feel:
-
-- **No pure black or pure white**: Light mode foreground is dark charcoal (L=25%), not black. Dark mode background is dark gray (L=20.5%), not black. Dark mode foreground is soft off-white (L=88%), not pure white.
-- **Subtle color temperature**: All neutral grays carry a tiny chroma (0.004–0.006) at hue 285 (purple), preventing a sterile "dead gray" feel.
-- **Text hierarchy through lightness**: Three distinct levels — `text-foreground` (primary text), `text-secondary-foreground` (emphasis text on secondary surfaces), `text-muted-foreground` (secondary/helper text).
-- **Surface layering**: `background` < `card`/`popover` — card surfaces are slightly lighter than the page background for visual depth.
-
 ### Dark Mode
 
-- CSS: `@custom-variant dark (&:is(.dark *))` in `style.css`
 - Runtime: `useColorMode` from `@vueuse/core` in `store/settings.ts`
 - Storage: theme preference persisted via `useStorage`
 - Toggle: Available in Settings page and login page
-- Usage: semantic tokens auto-switch; no `dark:` prefix needed for themed colors
+- Usage: semantic tokens auto-switch; no `dark:` prefix needed
 
-### Styling Convention
+### Styling Rules
 
-- **Utility-first**: Tailwind classes as primary styling method. Minimal `<style>` blocks.
-- **Semantic tokens only**: Always use theme variables (`text-foreground`, `bg-background`, `bg-card`, `text-muted-foreground`, `border-border`, `bg-accent`, etc.) instead of raw Tailwind colors like `gray-*`, `bg-white`, or `text-black`. This ensures dark mode works automatically without `dark:` overrides.
-- **No hardcoded gray colors**: Never use `gray-100`, `gray-700`, `bg-white dark:bg-gray-800`, etc. in components. Use the semantic mapping instead:
+- Use Tailwind utility classes; avoid `<style>` blocks.
+- Always use semantic color tokens (`text-foreground`, `bg-card`, `border-border`, etc.) — never hardcode raw colors (`gray-*`, `bg-white`, `text-black`).
+- Follow the design system rules in `packages/ui/DESIGN.md`.
 
-| Instead of | Use |
-|------------|-----|
-| `border-gray-200 dark:border-gray-700` | `border-border` |
-| `bg-white dark:bg-gray-800` | `bg-card` or `bg-popover` |
-| `text-gray-900 dark:text-gray-100` | `text-foreground` |
-| `bg-gray-100 dark:bg-gray-700` | `bg-muted` or `bg-secondary` |
-| `hover:bg-gray-50 dark:hover:bg-gray-700` | `hover:bg-accent` |
-| `text-gray-500` / `text-gray-400` | `text-muted-foreground` |
-| `text-gray-600 dark:text-gray-400` | `text-muted-foreground` |
-| `bg-gray-200 dark:bg-gray-700` (separators) | `bg-border` |
+## UI Components (@memohai/ui)
+
+All UI primitives are provided by `@memohai/ui` (43 component groups built on Reka UI). Do not import Reka UI directly. For the component design specification (variants, colors, elevation, spacing), see `packages/ui/DESIGN.md`.
 
 - **Exception**: Physical UI knobs (Switch thumb, Slider thumb) may keep `bg-white` as they need to contrast against colored tracks regardless of theme.
 - **No scoped CSS modules**: Styling is done inline via utility classes.
@@ -178,18 +270,17 @@ katex/dist/katex.min.css     — Math rendering
 vue-sonner/style.css         — Toast notifications (in App.vue)
 ```
 
-## UI Components (@memohai/ui)
+`@memohai/ui` provides 43 component groups built on Reka UI primitives + Tailwind + class-variance-authority:
 
-`@memohai/ui` provides 40+ components built on Reka UI primitives + Tailwind + class-variance-authority:
-
-- **Form**: `Form`, `FormField`, `FormItem`, `FormControl`, `FormLabel`, `FormMessage`
-- **Input**: `Input`, `Textarea`, `InputGroup`, `NativeSelect`, `Combobox`, `TagsInput`
-- **Selection**: `Select`, `RadioGroup`, `Checkbox`, `Switch`
-- **Layout**: `Card`, `Separator`, `Sheet`, `Sidebar`, `ScrollArea`, `Collapsible`
-- **Overlays**: `Dialog`, `Popover`, `Tooltip`, `DropdownMenu`, `ContextMenu`
-- **Data**: `Table`, `Badge`, `Avatar`, `Skeleton`, `Empty`
-- **Navigation**: `Breadcrumb`, `Tabs`, `Pagination`
-- **Feedback**: `Button`, `ButtonGroup`, `Spinner`, `Alert`
+- **Form**: `Form`, `FormField`, `FormFieldArray`, `FormItem`, `FormControl`, `FormLabel`, `FormMessage`, `FormDescription`
+- **Input**: `Input`, `Textarea`, `InputGroup` (Addon, Button, Input, Text, Textarea), `NativeSelect`, `Combobox`, `TagsInput`, `InputOTP` (Group, Slot, Separator)
+- **Selection**: `Select`, `RadioGroup`, `Checkbox`, `Switch`, `Toggle`, `Slider`
+- **Layout**: `Card`, `Separator`, `Sheet`, `Sidebar` (24 sub-components), `ScrollArea`, `Collapsible`, `Item` (10 sub-components)
+- **Overlays**: `Dialog` (incl. `DialogScrollContent`), `Popover`, `Tooltip`, `DropdownMenu`, `ContextMenu`, `Command` (Dialog, Group, Input, Item, List)
+- **Data**: `Table` (9 sub-components), `Badge`, `BadgeCount`, `Avatar`, `Skeleton`, `Empty` (5 sub-components)
+- **Navigation**: `Breadcrumb`, `Tabs`, `Pagination`, `PinInput` (Group, Slot, Separator)
+- **Feedback**: `Button`, `ButtonGroup` (Separator, Text), `Spinner`, `Alert`, `Toaster` (Sonner), `Kbd`
+- **Effects**: `TextGenerateEffect`
 
 ### Form Pattern (vee-validate + Zod)
 
@@ -217,7 +308,7 @@ const form = useForm({
 
 ### Icon Usage
 
-- **FontAwesome** (primary): Global `<FontAwesomeIcon :icon="['fas', 'robot']" />`, icons registered in `main.ts`
+- **FontAwesome** (primary): Global `<FontAwesomeIcon :icon="['fas', 'robot']" />`, full `fas`/`far`/`fab` sets + custom search icons registered in `main.ts`
 - **Lucide** (secondary): Direct imports `<Sun />`, `<Moon />`, used for theme toggle
 
 ### Notification Pattern
@@ -279,25 +370,31 @@ SDK also generates colada helpers: `getBotsQuery()`, `postBotsMutation()`, query
 
 ### Pinia Stores (Client State)
 
-| Store | Purpose |
-|-------|---------|
-| `user` | JWT token (`useLocalStorage`), user info, login/logout |
-| `settings` | Theme (dark/light), language (en/zh), persisted |
-| `capabilities` | Server feature flags (container backend, snapshot support) |
-| `chat-list` | Chat messages, streaming state, SSE event processing |
+| Store | ID | Purpose |
+|-------|----|---------|
+| `user` | `user` | JWT token (`useLocalStorage`), user info (id, username, role, displayName, avatarUrl, timezone), login/logout |
+| `settings` | `settings` | Theme (dark/light), language (en/zh), synced with `useColorMode` and vue-i18n locale |
+| `capabilities` | `capabilities` | Server feature flags (container backend, snapshot support), loaded once from `getPing()` |
+| `chat-selection` | `chat-selection` | Current bot ID and session ID, persisted via `useStorage` to localStorage |
+| `chat-list` | `chat` | Chat messages, sessions, bots, streaming state, SSE/WS event processing. Depends on `chat-selection` store for current bot/session |
 
-Stores use Composition API style (`defineStore(() => { ... })`), with persistence via `pinia-plugin-persistedstate`.
+Stores use Composition API style (`defineStore(() => { ... })`), with persistence via `pinia-plugin-persistedstate` or `useStorage`.
 
-### SSE Streaming (Chat)
+### Streaming (Chat)
 
-Chat responses are streamed via Server-Sent Events:
+Chat supports two transport modes: **Server-Sent Events (SSE)** and **WebSocket**.
 
-- **Endpoints**: `/bots/{bot_id}/web/stream` (chat), `/bots/{bot_id}/messages/events` (real-time updates)
+#### SSE Streaming
+- **Endpoints**: `/bots/{bot_id}/web/stream` (send + stream), `/messages/events` (real-time message updates)
 - **Parsing**: `composables/api/useChat.sse.ts` reads `ReadableStream<Uint8Array>` and parses SSE `data:` lines
 - **Events**: `text_delta`, `reasoning_delta`, `tool_call_start/end`, `attachment_delta`, `processing_completed/failed`
 - **Retry**: `useRetryingStream` composable provides exponential backoff for reconnection
-- **State**: `store/chat-list.ts` processes streaming events into reactive message blocks in real-time
-- **Abort**: Stream cancellation via `AbortSignal`
+
+#### WebSocket
+- **Endpoint**: `/bots/{bot_id}/web/ws` (with token query param)
+- **Implementation**: `composables/api/useChat.ws.ts` wraps native `WebSocket` with send, abort, close, and auto-reconnect
+- **State**: `store/chat-list.ts` processes streaming events from either transport into reactive message blocks in real-time
+- **Abort**: Stream cancellation via `AbortSignal` (SSE) or close message (WS)
 
 ### Error Handling
 
@@ -324,7 +421,7 @@ Chat responses are streamed via Server-Sent Events:
 ## Development Rules
 
 - Use Vue 3 Composition API with `<script setup>` exclusively.
-- Style with Tailwind utility classes; avoid `<style>` blocks.
+- Style with Tailwind utility classes; avoid `<style>` blocks. Follow the design system in `packages/ui/DESIGN.md`.
 - **Always use semantic color tokens** (`text-foreground`, `bg-card`, `border-border`, `text-muted-foreground`, `bg-accent`, etc.) instead of raw colors (`gray-*`, `bg-white`, `text-black`). Never introduce hardcoded Tailwind color classes for themed elements — this breaks dark mode consistency.
 - Use `@memohai/ui` components for all UI primitives; do not import Reka UI directly.
 - Use Pinia Colada (`useQuery`/`useMutation`) for server state; use Pinia stores for client state only.
@@ -333,5 +430,6 @@ Chat responses are streamed via Server-Sent Events:
 - Forms must use vee-validate + Zod schemas via `toTypedSchema()`.
 - Error messages via `resolveApiErrorMessage()` + `toast.error()`.
 - Page components go in `pages/{feature}/`; page-specific sub-components go in `pages/{feature}/components/`.
+- Page-specific composables go in `pages/{feature}/composables/`.
 - Shared components go in `components/`.
 - Composables go in `composables/`; API-specific composables in `composables/api/`.
diff --git a/apps/web/package.json b/apps/web/package.json
index 3278c7ea..3607d5eb 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -34,6 +34,7 @@
     "markstream-vue": "0.0.7-beta.2",
     "mermaid": "^11.12.2",
     "modern-css-reset": "^1.4.0",
+    "moment": "^2.30.1",
     "monaco-editor": "^0.52.2",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
@@ -57,8 +58,10 @@
   },
   "devDependencies": {
     "@memohai/config": "workspace:*",
+    "@types/moment": "^2.13.0",
     "@types/node": "^24.10.1",
     "@types/qrcode": "^1.5.6",
+    "@types/sortablejs": "^1.15.9",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/tsconfig": "^0.8.1",
     "typescript": "~5.9.3",
diff --git a/apps/web/src/components/add-provider/index.vue b/apps/web/src/components/add-provider/index.vue
index d3bbdc20..e4359a23 100644
--- a/apps/web/src/components/add-provider/index.vue
+++ b/apps/web/src/components/add-provider/index.vue
@@ -71,7 +71,7 @@
           </FormField>
           <div
             v-else
-            class="rounded-lg border p-3 text-sm text-muted-foreground"
+            class="rounded-lg border p-3 text-xs text-muted-foreground"
           >
             {{ $t('provider.oauth.createHint') }}
           </div>
@@ -125,7 +125,7 @@
           >
             <FormItem class="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
               <div class="space-y-0.5">
-                <Label class="text-base">
+                <Label class="text-sm">
                   {{ $t('provider.autoImport') }}
                 </Label>
                 <p class="text-[0.8rem] text-muted-foreground">
diff --git a/apps/web/src/components/chat/chat-status/index.vue b/apps/web/src/components/chat/chat-status/index.vue
new file mode 100644
index 00000000..97025be7
--- /dev/null
+++ b/apps/web/src/components/chat/chat-status/index.vue
@@ -0,0 +1,32 @@
+<template>
+  <section class="relative rounded-full p-0.5 border flex-none">
+    <img
+      src="/logo.png"
+      alt="logo.png"
+      class="w-6.5"
+    >
+    <img
+      v-if="isLoading"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjOEI1Q0Y2IiBkPSJNMTIsMUExMSwxMSwwLDEsMCwyMywxMiwxMSwxMSwwLDAsMCwxMiwxWm0wLDE5YTgsOCwwLDEsMSw4LThBOCw4LDAsMCwxLDEyLDIwWiIgb3BhY2l0eT0iMC4yNSIvPjxwYXRoIGZpbGw9IiM4QjVDRjYiIGQ9Ik0xMC4xNCwxLjE2YTExLDExLDAsMCwwLTksOC45MkExLjU5LDEuNTksMCwwLDAsMi40NiwxMiwxLjUyLDEuNTIsMCwwLDAsNC4xMSwxMC43YTgsOCwwLDAsMSw2LjY2LTYuNjFBMS40MiwxLjQyLDAsMCwwLDEyLDIuNjloMEExLjU3LDEuNTcsMCwwLDAsMTAuMTQsMS4xNloiPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgZHVyPSIwLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDEyIDEyOzM2MCAxMiAxMiIvPjwvcGF0aD48L3N2Zz4="
+      alt="loading"
+      width="13"
+      class="absolute bottom-0 right-0 bg-card p-0.5 rounded-full"
+    >   
+    <img
+      v-if="error"
+      src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgOSA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWFzayBpZD0icGF0aC0xLWluc2lkZS0xXzE0OF80NDgiIGZpbGw9IndoaXRlIj4KPHBhdGggZD0iTTQuNSA4LjI1QzIuNDI4OTMgOC4yNSAwLjc1IDYuNTcxMDUgMC43NSA0LjVDMC43NSAyLjQyODkzIDIuNDI4OTMgMC43NSA0LjUgMC43NUM2LjU3MTA1IDAuNzUgOC4yNSAyLjQyODkzIDguMjUgNC41QzguMjUgNi41NzEwNSA2LjU3MTA1IDguMjUgNC41IDguMjVaTTQuNSA3LjVDNi4xNTY4NiA3LjUgNy41IDYuMTU2ODYgNy41IDQuNUM3LjUgMi44NDMxNCA2LjE1Njg2IDEuNSA0LjUgMS41QzIuODQzMTQgMS41IDEuNSAyLjg0MzE0IDEuNSA0LjVDMS41IDYuMTU2ODYgMi44NDMxNCA3LjUgNC41IDcuNVpNNC4xMjUgNS42MjVINC44NzVWNi4zNzVINC4xMjVWNS42MjVaTTQuMTI1IDIuNjI1SDQuODc1VjQuODc1SDQuMTI1VjIuNjI1WiIvPgo8L21hc2s+CjxwYXRoIGQ9Ik00LjEyNSA1LjYyNVY0Ljg3NUgzLjM3NVY1LjYyNUg0LjEyNVpNNC44NzUgNS42MjVINS42MjVWNC44NzVINC44NzVWNS42MjVaTTQuODc1IDYuMzc1VjcuMTI1SDUuNjI1VjYuMzc1SDQuODc1Wk00LjEyNSA2LjM3NUgzLjM3NVY3LjEyNUg0LjEyNVY2LjM3NVpNNC4xMjUgMi42MjVWMS44NzVIMy4zNzVWMi42MjVINC4xMjVaTTQuODc1IDIuNjI1SDUuNjI1VjEuODc1SDQuODc1VjIuNjI1Wk00Ljg3NSA0Ljg3NVY1LjYyNUg1LjYyNVY0Ljg3NUg0Ljg3NVpNNC4xMjUgNC44NzVIMy4zNzVWNS42MjVINC4xMjVWNC44NzVaTTQuNSA4LjI1VjcuNUMyLjg0MzE1IDcuNSAxLjUgNi4xNTY4NCAxLjUgNC41SDAuNzVIMEMwIDYuOTg1MjYgMi4wMTQ3MiA5IDQuNSA5VjguMjVaTTAuNzUgNC41SDEuNUMxLjUgMi44NDMxNCAyLjg0MzE0IDEuNSA0LjUgMS41VjAuNzVWMEMyLjAxNDcyIDAgMCAyLjAxNDcyIDAgNC41SDAuNzVaTTQuNSAwLjc1VjEuNUM2LjE1Njg0IDEuNSA3LjUgMi44NDMxNSA3LjUgNC41SDguMjVIOUM5IDIuMDE0NzIgNi45ODUyNiAwIDQuNSAwVjAuNzVaTTguMjUgNC41SDcuNUM3LjUgNi4xNTY4NCA2LjE1Njg0IDcuNSA0LjUgNy41VjguMjVWOUM2Ljk4NTI2IDkgOSA2Ljk4NTI2IDkgNC41SDguMjVaTTQuNSA3LjVWOC4yNUM2LjU3MTA4IDguMjUgOC4yNSA2LjU3MTA4IDguMjUgNC41SDcuNUg2Ljc1QzYuNzUgNS43NDI2NSA1Ljc0MjY1IDYuNzUgNC41IDYuNzVWNy41Wk03LjUgNC41SDguMjVDOC4yNSAyLjQyODkzIDYuNTcxMDggMC43NSA0LjUgMC43NVYxLjVWMi4yNUM1Ljc0MjY1IDIuMjUgNi43NSAzLjI1NzM2IDYuNzUgNC41SDcuNVpNNC41IDEuNVYwLjc1QzIuNDI4OTMgMC43NSAwLjc1IDIuNDI4OTMgMC43NSA0LjVIMS41SDIuMjVDMi4yNSAzLjI1NzM2IDMuMjU3MzYgMi4yNSA0LjUgMi4yNVYxLjVaTTEuNSA0LjVIMC43NUMwLjc1IDYuNTcxMDggMi40Mjg5MyA4LjI1IDQuNSA4LjI1VjcuNVY2Ljc1QzMuMjU3MzYgNi43NSAyLjI1IDUuNzQyNjUgMi4yNSA0LjVIMS41Wk00LjEyNSA1LjYyNVY2LjM3NUg0Ljg3NVY1LjYyNVY0Ljg3NUg0LjEyNVY1LjYyNVpNNC44NzUgNS42MjVINC4xMjVWNi4zNzVINC44NzVINS42MjVWNS42MjVINC44NzVaTTQuODc1IDYuMzc1VjUuNjI1SDQuMTI1VjYuMzc1VjcuMTI1SDQuODc1VjYuMzc1Wk00LjEyNSA2LjM3NUg0Ljg3NVY1LjYyNUg0LjEyNUgzLjM3NVY2LjM3NUg0LjEyNVpNNC4xMjUgMi42MjVWMy4zNzVINC44NzVWMi42MjVWMS44NzVINC4xMjVWMi42MjVaTTQuODc1IDIuNjI1SDQuMTI1VjQuODc1SDQuODc1SDUuNjI1VjIuNjI1SDQuODc1Wk00Ljg3NSA0Ljg3NVY0LjEyNUg0LjEyNVY0Ljg3NVY1LjYyNUg0Ljg3NVY0Ljg3NVpNNC4xMjUgNC44NzVINC44NzVWMi42MjVINC4xMjVIMy4zNzVWNC44NzVINC4xMjVaIiBmaWxsPSIjNzM3MzczIiBtYXNrPSJ1cmwoI3BhdGgtMS1pbnNpZGUtMV8xNDhfNDQ4KSIvPgo8L3N2Zz4K"
+      alt="error"
+      width="13"
+      class="absolute bottom-0 right-0 bg-card p-0.5 rounded-full"
+    >
+  </section>
+</template>
+
+<script setup lang="ts">
+
+withDefaults(defineProps < { isLoading?: boolean ,error?:boolean} > (), {
+  isLoading: true,
+  error:false
+})
+
+</script>
\ No newline at end of file
diff --git a/apps/web/src/components/chat/chat-step/index.vue b/apps/web/src/components/chat/chat-step/index.vue
new file mode 100644
index 00000000..e090263c
--- /dev/null
+++ b/apps/web/src/components/chat/chat-step/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <section
+    class="inline-flex items-center ml-1 gap-1 text-xs text-muted-foreground"
+  >
+    <i class="w-1.25 aspect-square bg-blue-500 rounded-full" />
+    推理中
+  </section>
+</template>
\ No newline at end of file
diff --git a/apps/web/src/components/create-model/index.vue b/apps/web/src/components/create-model/index.vue
index 66b907df..28ffefef 100644
--- a/apps/web/src/components/create-model/index.vue
+++ b/apps/web/src/components/create-model/index.vue
@@ -116,7 +116,7 @@
               <label
                 v-for="opt in COMPATIBILITY_OPTIONS"
                 :key="opt.value"
-                class="flex items-center gap-1.5 text-sm"
+                class="flex items-center gap-1.5 text-xs"
               >
                 <Checkbox
                   :model-value="selectedCompat.includes(opt.value)"
diff --git a/apps/web/src/components/file-manager/file-list.vue b/apps/web/src/components/file-manager/file-list.vue
index b42585b3..77205943 100644
--- a/apps/web/src/components/file-manager/file-list.vue
+++ b/apps/web/src/components/file-manager/file-list.vue
@@ -91,7 +91,7 @@ function handleClick(entry: HandlersFsFileInfo) {
       >
         <ContextMenuTrigger as-child>
           <div
-            class="flex items-center border-b border-border/50 cursor-pointer px-3 py-2 text-sm transition-colors hover:bg-muted/50"
+            class="flex items-center border-b border-border/50 cursor-pointer px-3 py-2 text-xs transition-colors hover:bg-muted/50"
             @click="handleClick(entry)"
           >
             <div class="flex flex-1 items-center gap-2 min-w-0">
diff --git a/apps/web/src/components/file-manager/file-viewer.vue b/apps/web/src/components/file-manager/file-viewer.vue
index a118e68e..87ccd00f 100644
--- a/apps/web/src/components/file-manager/file-viewer.vue
+++ b/apps/web/src/components/file-manager/file-viewer.vue
@@ -132,7 +132,7 @@ onBeforeUnmount(() => {
           :icon="['fas', 'file']"
           class="size-3.5 shrink-0 text-muted-foreground"
         />
-        <span class="truncate text-sm font-medium">{{ filename }}</span>
+        <span class="truncate text-xs font-medium">{{ filename }}</span>
         <span class="shrink-0 text-xs text-muted-foreground">{{ formatFileSize(file.size) }}</span>
         <span
           v-if="isDirty"
@@ -213,7 +213,7 @@ onBeforeUnmount(() => {
           :icon="['fas', 'file']"
           class="size-12 opacity-30"
         />
-        <p class="text-sm">
+        <p class="text-xs">
           {{ t('bots.files.previewNotAvailable') }}
         </p>
         <Button
diff --git a/apps/web/src/components/file-manager/index.vue b/apps/web/src/components/file-manager/index.vue
index ba417eaf..f7ea6b9c 100644
--- a/apps/web/src/components/file-manager/index.vue
+++ b/apps/web/src/components/file-manager/index.vue
@@ -277,7 +277,7 @@ defineExpose({ navigateTo, openFileByPath })
     <!-- Toolbar -->
     <div class="flex items-center gap-2 border-b border-border px-4 py-2">
       <!-- Breadcrumb -->
-      <nav class="flex min-w-0 flex-1 items-center gap-1 text-sm">
+      <nav class="flex min-w-0 flex-1 items-center gap-1 text-xs">
         <template
           v-for="(seg, idx) in pathSegments(currentPath)"
           :key="seg.path"
@@ -454,7 +454,7 @@ defineExpose({ navigateTo, openFileByPath })
         <DialogHeader>
           <DialogTitle>{{ t('bots.files.confirmDelete') }}</DialogTitle>
         </DialogHeader>
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ t('bots.files.confirmDeleteMessage', { name: deleteTarget?.name ?? '' }) }}
         </p>
         <DialogFooter>
diff --git a/apps/web/src/components/import-models-dialog/index.vue b/apps/web/src/components/import-models-dialog/index.vue
index 0e5b1a0d..2f5dd7d6 100644
--- a/apps/web/src/components/import-models-dialog/index.vue
+++ b/apps/web/src/components/import-models-dialog/index.vue
@@ -19,7 +19,7 @@
     </template>
     <template #body>
       <div class="flex flex-col gap-3 mt-4">
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('models.importConfirmHint') }}
         </p>
       </div>
diff --git a/apps/web/src/components/main-container/index.vue b/apps/web/src/components/main-container/index.vue
index a51c6dd5..3330747d 100644
--- a/apps/web/src/components/main-container/index.vue
+++ b/apps/web/src/components/main-container/index.vue
@@ -1,87 +1,15 @@
 <template>
-  <SidebarInset class="grid grid-rows-[auto_auto_1fr]">
-    <header
-      class="flex h-12 shrink-0 items-center gap-2"
-    >
-      <div class="flex items-center gap-2 px-4">     
-        <SidebarTrigger class="-ml-1" />
-        <Separator
-          orientation="vertical"
-          class="mr-2 data-[orientation=vertical]:h-4"
-        />
-        <Breadcrumb>
-          <BreadcrumbList>
-            <template
-              v-for="(breadcrumbItem, index) in curBreadcrumb"
-              :key="breadcrumbItem"
-            >
-              <template v-if="(index + 1) !== curBreadcrumb.length">
-                <BreadcrumbItem class="hidden md:block">
-                  <BreadcrumbLink :href="breadcrumbItem.path">
-                    {{ breadcrumbItem.breadcrumb }}
-                  </BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator />
-              </template>
-
-              <BreadcrumbItem v-else>
-                <BreadcrumbPage>
-                  {{ breadcrumbItem.breadcrumb }}
-                </BreadcrumbPage>
-              </BreadcrumbItem>
-            </template>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </div>
-    </header>
-    <Separator />
-    <section class="w-full relative">
-      <h1 class="sr-only">
-        {{ currentPageTitle }}
-      </h1>
-      <ScrollArea class="absolute! inset-0">
-        <router-view v-slot="{ Component }">
-          <KeepAlive>
-            <component :is="Component" />
-          </KeepAlive>
-        </router-view>
-      </ScrollArea>
+  <SidebarInset class="flex flex-col overflow-hidden">
+    <section class="flex-1 overflow-y-auto">
+      <router-view v-slot="{ Component }">
+        <KeepAlive>
+          <component :is="Component" />
+        </KeepAlive>
+      </router-view>
     </section>
   </SidebarInset>
 </template>
 
 <script setup lang="ts">
-import {
-  SidebarTrigger, SidebarInset, Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  Separator,
-  ScrollArea,
-} from '@memohai/ui'
-import { useRoute } from 'vue-router'
-import { computed, unref } from 'vue'
-
-const route = useRoute()
-
-const curBreadcrumb = computed(() => {
-  return route.matched
-    .filter(routeItem => routeItem.meta['breadcrumb'])
-    .map(routeItem => {
-      const raw = routeItem.meta['breadcrumb']
-      return {
-        path: routeItem.path,
-        breadcrumb: typeof raw === 'function' ? raw(route) : raw,
-      }
-    })
-})
-
-const currentPageTitle = computed(() => {
-  const last = curBreadcrumb.value[curBreadcrumb.value.length - 1]
-  const title = String(unref(last?.breadcrumb) ?? '').trim()
-  return title || 'Memoh'
-})
-
+import { SidebarInset } from '@memohai/ui'
 </script>
diff --git a/apps/web/src/components/master-detail-sidebar-layout/index.vue b/apps/web/src/components/master-detail-sidebar-layout/index.vue
index d77c5178..397279be 100644
--- a/apps/web/src/components/master-detail-sidebar-layout/index.vue
+++ b/apps/web/src/components/master-detail-sidebar-layout/index.vue
@@ -1,65 +1,68 @@
 <template>
-  <SidebarProvider
-    class="min-h-[initial]! absolute inset-0"
-  >
-    <aside
-      class="hidden md:flex flex-col w-(--sidebar-width) border-r border-border shrink-0 h-full"
-      data-sidebar="sidebar"
+  <SidebarProvider class="min-h-[initial]! absolute inset-0 ">
+    <Sidebar
+      class="relative! **:[[role=navigation]]:relative! sidebar-container h-full!"
     >
-      <SidebarHeader>
+      <SidebarHeader v-if="slots['sidebar-header']">
         <slot name="sidebar-header" />
       </SidebarHeader>
-      <SidebarContent class="px-2 scrollbar-none">
-        <slot name="sidebar-content" />
+      <SidebarContent>
+        <ScrollArea class="h-full">
+          <SidebarMenu class="p-2">           
+            <slot name="sidebar-content" />
+          </SidebarMenu>
+        </ScrollArea>
       </SidebarContent>
       <SidebarFooter v-if="$slots['sidebar-footer']">
         <slot name="sidebar-footer" />
       </SidebarFooter>
-    </aside>
+    </Sidebar>
 
-    <section class="flex-1 min-w-0 h-full">
-      <slot name="detail" />
-    </section>
+    <SidebarInset>
+      <section class="flex-1 min-w-0 relative min-h-0">
+        <slot name="detail" />
+      </section>
 
-    <div class="fixed right-4 top-0 h-12 z-1000 md:hidden flex items-center">
-      <FontAwesomeIcon
-        :icon="['fas', 'bars']"
-        class="cursor-pointer p-2"
-        @click="mobileOpen = !mobileOpen"
-      />
-    </div>
+      <div class="fixed right-4 top-0 h-12 z-1000 md:hidden flex items-center">
+        <FontAwesomeIcon
+          :icon="['fas', 'bars']"
+          class="cursor-pointer p-2"
+          @click="mobileOpen = !mobileOpen"
+        />
+      </div>
 
-    <Sheet
-      :open="mobileOpen"
-      @update:open="(v: boolean) => mobileOpen = v"
-    >
-      <SheetContent
-        data-sidebar="sidebar"
-        side="left"
-        class="bg-sidebar text-sidebar-foreground w-72 p-0 [&>button]:hidden"
+      <Sheet
+        :open="mobileOpen"
+        @update:open="(v: boolean) => mobileOpen = v"
       >
-        <SheetHeader class="sr-only">
-          <SheetTitle>Sidebar</SheetTitle>
-          <SheetDescription>Sidebar navigation</SheetDescription>
-        </SheetHeader>
-        <div class="flex h-full w-full flex-col">
-          <SidebarHeader>
-            <slot name="sidebar-header" />
-          </SidebarHeader>
-          <SidebarContent class="px-2 scrollbar-none">
-            <slot name="sidebar-content" />
-          </SidebarContent>
-          <SidebarFooter v-if="$slots['sidebar-footer']">
-            <slot name="sidebar-footer" />
-          </SidebarFooter>
-        </div>
-      </SheetContent>
-    </Sheet>
+        <SheetContent
+          data-sidebar="sidebar"
+          side="left"
+          class="bg-sidebar text-sidebar-foreground w-72 p-0 [&>button]:hidden"
+        >
+          <SheetHeader class="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Sidebar navigation</SheetDescription>
+          </SheetHeader>
+          <div class="flex h-full w-full flex-col">
+            <SidebarHeader>
+              <slot name="sidebar-header" />
+            </SidebarHeader>
+            <SidebarContent class="px-2 scrollbar-none">
+              <slot name="sidebar-content" />
+            </SidebarContent>
+            <SidebarFooter v-if="$slots['sidebar-footer']">
+              <slot name="sidebar-footer" />
+            </SidebarFooter>
+          </div>
+        </SheetContent>
+      </Sheet>
+    </SidebarInset>
   </SidebarProvider>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import {  ref } from 'vue'
 import {
   Sheet,
   SheetContent,
@@ -70,7 +73,14 @@ import {
   SidebarFooter,
   SidebarHeader,
   SidebarProvider,
+  Sidebar,
+  SidebarInset,
+  ScrollArea,
+  SidebarMenu
 } from '@memohai/ui'
+import { useSlots } from 'vue'
+
+const slots=useSlots()
 
 const mobileOpen = ref(false)
-</script>
+</script>
\ No newline at end of file
diff --git a/apps/web/src/components/searchable-select-popover/index.vue b/apps/web/src/components/searchable-select-popover/index.vue
index 2959e63b..5febb584 100644
--- a/apps/web/src/components/searchable-select-popover/index.vue
+++ b/apps/web/src/components/searchable-select-popover/index.vue
@@ -38,7 +38,7 @@
           v-model="searchTerm"
           :placeholder="searchPlaceholder"
           :aria-label="searchAriaLabel"
-          class="flex h-10 w-full bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground"
+          class="flex h-10 w-full bg-transparent py-3 text-xs outline-none placeholder:text-muted-foreground"
         >
       </div>
 
@@ -48,7 +48,7 @@
       >
         <div
           v-if="filteredGroups.length === 0"
-          class="py-6 text-center text-sm text-muted-foreground"
+          class="py-6 text-center text-xs text-muted-foreground"
         >
           {{ emptyText }}
         </div>
@@ -76,7 +76,7 @@
             type="button"
             role="option"
             :aria-selected="selected === option.value"
-            class="relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground"
+            class="relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-none hover:bg-accent hover:text-accent-foreground"
             :class="{ 'bg-accent': selected === option.value }"
             @click="selectOption(option.value)"
           >
diff --git a/apps/web/src/components/settings-sidebar/index.vue b/apps/web/src/components/settings-sidebar/index.vue
new file mode 100644
index 00000000..9022a2a8
--- /dev/null
+++ b/apps/web/src/components/settings-sidebar/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <aside>
+    <Sidebar collapsible="icon">
+      <SidebarHeader class="p-0 border-0">
+        <button
+          class="h-[53px] flex items-center gap-2.5 px-3.5 w-full border-b border-border text-foreground hover:bg-accent/50 transition-colors group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
+          @click="router.push(backToChatRoute)"
+        >
+          <FontAwesomeIcon
+            :icon="['fas', 'chevron-left']"
+            class="size-3 shrink-0"
+          />
+          <span class="text-xs font-semibold group-data-[collapsible=icon]:hidden">
+            {{ t('sidebar.settings') }}
+          </span>
+        </button>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup class="px-2 py-2.5">
+          <SidebarGroupContent>
+            <SidebarMenu class="gap-0.5">
+              <SidebarMenuItem
+                v-for="item in navItems"
+                :key="item.name"
+              >
+                <SidebarMenuButton
+                  :tooltip="item.title"
+                  :is-active="isItemActive(item.name)"
+                  :aria-current="isItemActive(item.name) ? 'page' : undefined"
+                  class="h-9 gap-2 relative before:absolute before:w-0.5 before:top-1.5 before:bottom-1.5 before:left-0 before:rounded-full data-[active=true]:before:bg-[#8B56E3]"
+                  @click="router.push({ name: item.name })"
+                >
+                  <FontAwesomeIcon
+                    :icon="item.icon"
+                    class="size-3.5 ml-1.5"
+                  />
+                  <span class="text-xs font-medium">{{ item.title }}</span>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useChatSelectionStore } from '@/store/chat-selection'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@memohai/ui'
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useI18n()
+const selectionStore = useChatSelectionStore()
+const { currentBotId, sessionId } = storeToRefs(selectionStore)
+
+const backToChatRoute = computed(() => {
+  const botId = (currentBotId.value ?? '').trim()
+  const targetSessionId = (sessionId.value ?? '').trim()
+  if (!botId) return { name: 'home' as const }
+  return {
+    name: 'chat' as const,
+    params: {
+      botId,
+      sessionId: targetSessionId || undefined,
+    },
+  }
+})
+
+function isItemActive(name: string): boolean {
+  if (name === 'bots') {
+    return route.path.startsWith('/settings/bots')
+  }
+  return route.name === name
+}
+
+const navItems = computed(() => [
+  {
+    title: t('sidebar.bots'),
+    name: 'bots',
+    icon: ['fas', 'robot'],
+  },
+  {
+    title: t('sidebar.models'),
+    name: 'models',
+    icon: ['fas', 'cubes'],
+  },
+  {
+    title: t('sidebar.searchProvider'),
+    name: 'search-providers',
+    icon: ['fas', 'globe'],
+  },
+  {
+    title: t('sidebar.memoryProvider'),
+    name: 'memory-providers',
+    icon: ['fas', 'brain'],
+  },
+  {
+    title: t('sidebar.ttsProvider'),
+    name: 'tts-providers',
+    icon: ['fas', 'volume-high'],
+  },
+  {
+    title: t('sidebar.emailProvider'),
+    name: 'email-providers',
+    icon: ['fas', 'envelope'],
+  },
+  {
+    title: t('sidebar.browserContexts'),
+    name: 'browser-contexts',
+    icon: ['fas', 'window-maximize'],
+  },
+  {
+    title: t('sidebar.usage'),
+    name: 'usage',
+    icon: ['fas', 'chart-line'],
+  },
+  {
+    title: t('sidebar.settings'),
+    name: 'settings',
+    icon: ['fas', 'gear'],
+  },
+])
+</script>
diff --git a/apps/web/src/components/sidebar/bot-item.vue b/apps/web/src/components/sidebar/bot-item.vue
new file mode 100644
index 00000000..c3ff354c
--- /dev/null
+++ b/apps/web/src/components/sidebar/bot-item.vue
@@ -0,0 +1,64 @@
+<template>
+  <SidebarMenuButton
+    :tooltip="bot.display_name || bot.id"
+    as-child
+  >
+    <button
+      :class="[
+        'flex items-center gap-2.5 w-full h-[38px] px-2.5 rounded-lg transition-colors',
+        isActive
+          ? 'bg-background'
+          : bot.status === 'error'
+            ? 'opacity-50 cursor-not-allowed'
+            : 'hover:bg-background/60',
+      ]"
+      :disabled="bot.status === 'error'"
+      @click="handleSelect"
+    >
+      <div class="size-[26px] shrink-0 rounded-full border border-border bg-accent overflow-hidden p-px">
+        <img
+          v-if="bot.avatar_url"
+          :src="bot.avatar_url"
+          :alt="bot.display_name || bot.id"
+          class="size-full rounded-full object-cover"
+        >
+        <span
+          v-else
+          class="size-full flex items-center justify-center text-[8px] font-medium text-muted-foreground"
+        >
+          {{ avatarFallback }}
+        </span>
+      </div>
+      <span class="truncate text-xs font-medium text-foreground leading-[18px]">
+        {{ bot.display_name || bot.id }}
+      </span>
+    </button>
+  </SidebarMenuButton>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRouter } from 'vue-router'
+import type { BotsBot } from '@memohai/sdk'
+import { useChatStore } from '@/store/chat-list'
+import { useAvatarInitials } from '@/composables/useAvatarInitials'
+import { SidebarMenuButton } from '@memohai/ui'
+
+const props = defineProps<{ bot: BotsBot }>()
+
+const router = useRouter()
+const chatStore = useChatStore()
+const { currentBotId } = storeToRefs(chatStore)
+
+const displayName = computed(() => props.bot.display_name || props.bot.id || '')
+const avatarFallback = useAvatarInitials(() => displayName.value, 'B')
+
+const isActive = computed(() => currentBotId.value === props.bot.id)
+
+function handleSelect() {
+  if (props.bot.status === 'error') return
+  chatStore.selectBot(props.bot.id ?? '')
+  router.push({ name: 'chat', params: { botId: props.bot.id } })
+}
+</script>
diff --git a/apps/web/src/components/sidebar/index.vue b/apps/web/src/components/sidebar/index.vue
index 24396628..cf4e9146 100644
--- a/apps/web/src/components/sidebar/index.vue
+++ b/apps/web/src/components/sidebar/index.vue
@@ -1,64 +1,97 @@
 <template>
-  <aside aria-label="Primary">
-    <Sidebar
-      collapsible="icon"
-      role="navigation"
-      aria-label="Primary"
-    >
-      <SidebarHeader>
-        <div class="flex items-center gap-2 px-1 py-1 group-data-[collapsible=icon]:justify-center">
-          <img
-            src="/logo.png"
-            class="size-6 shrink-0"
-            alt="Memoh logo"
+  <aside>
+    <Sidebar collapsible="icon">
+      <SidebarHeader class="p-0 border-0">
+        <div class="h-1.5 group-data-[collapsible=icon]:hidden" />
+        <div class="h-[38px] flex items-center group-data-[collapsible=icon]:justify-center">
+          <div class="flex items-center gap-1 ml-3 group-data-[collapsible=icon]:hidden">
+            <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-[0.7px]">
+              {{ t('sidebar.bots') }}
+            </span>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="ml-auto mr-1.5 size-6 text-muted-foreground hover:text-foreground group-data-[collapsible=icon]:ml-0 group-data-[collapsible=icon]:mr-0"
+            :aria-label="t('bots.createBot')"
+            @click="router.push({ name: 'bots' })"
           >
-          <span class="text-lg font-bold text-muted-foreground truncate group-data-[collapsible=icon]:hidden">
-            Memoh
-          </span>
+            <FontAwesomeIcon
+              :icon="['fas', 'plus']"
+              class="size-3.5"
+            />
+          </Button>
         </div>
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarGroup>
+        <SidebarGroup class="px-2 py-0">
           <SidebarGroupContent>
-            <SidebarMenu>
+            <SidebarMenu class="gap-1">
               <SidebarMenuItem
-                v-for="sidebarItem in sidebarInfo"
-                :key="sidebarItem.title"
+                v-for="bot in bots"
+                :key="bot.id"
               >
-                <SidebarMenuButton
-                  :tooltip="sidebarItem.title"
-                  :is-active="isItemActive(sidebarItem.name)"
-                  :aria-current="isItemActive(sidebarItem.name) ? 'page' : undefined"
-                  @click="router.push({ name: sidebarItem.name })"
-                >
-                  <FontAwesomeIcon :icon="sidebarItem.icon" />
-                  <span>{{ sidebarItem.title }}</span>
-                </SidebarMenuButton>
+                <BotItem :bot="bot" />
               </SidebarMenuItem>
             </SidebarMenu>
+
+            <div
+              v-if="isLoading"
+              class="flex justify-center py-4"
+            >
+              <FontAwesomeIcon
+                :icon="['fas', 'spinner']"
+                class="size-4 animate-spin text-muted-foreground"
+              />
+            </div>
+            <div
+              v-if="!isLoading && bots.length === 0"
+              class="px-3 py-6 text-center text-xs text-muted-foreground"
+            >
+              {{ t('bots.emptyTitle') }}
+            </div>
           </SidebarGroupContent>
         </SidebarGroup>
       </SidebarContent>
 
-      <SidebarFooter class="border-t p-2">
-        <SidebarMenu>
-          <SidebarMenuItem>
+      <SidebarFooter class="relative border-0 px-2 pb-3.5 pt-2.5">
+        <div class="pointer-events-none absolute -top-[120px] left-0 h-[153px] w-full bg-linear-to-t from-(--sidebar-background) from-18% to-transparent z-10 group-data-[collapsible=icon]:hidden" />
+        <SidebarMenu class="gap-2.5">
+          <!-- <SidebarMenuItem>
             <SidebarMenuButton
               :tooltip="displayTitle"
+              class="h-10 px-2.5"
               @click="router.push({ name: 'settings' })"
             >
-              <Avatar class="size-4 shrink-0">
-                <AvatarImage
+              <div class="size-9 shrink-0 rounded-full border border-border bg-accent overflow-hidden p-[1.385px]">
+                <img
                   v-if="userInfo.avatarUrl"
                   :src="userInfo.avatarUrl"
                   :alt="displayTitle"
-                />
-                <AvatarFallback class="text-[7px] text-muted-foreground">
+                  class="size-full rounded-full object-cover"
+                >
+                <span
+                  v-else
+                  class="size-full flex items-center justify-center text-[10px] font-medium text-muted-foreground"
+                >
                   {{ avatarFallback }}
-                </AvatarFallback>
-              </Avatar>
-              <span class="truncate text-sm">{{ displayNameLabel }}</span>
+                </span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem> -->
+          <SidebarMenuItem>
+            <SidebarMenuButton
+              :tooltip="t('sidebar.settings')"
+              class="h-9 px-2.5"
+              :is-active="isSettingsActive"
+              @click="router.push('/settings')"
+            >
+              <FontAwesomeIcon
+                :icon="['fas', 'gear']"
+                class="size-3.5"
+              />
+              <span class="text-xs font-medium">{{ t('sidebar.settings') }}</span>
             </SidebarMenuButton>
           </SidebarMenuItem>
         </SidebarMenu>
@@ -68,10 +101,16 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useQuery } from '@pinia/colada'
+import { getBotsQuery } from '@memohai/sdk/colada'
+import type { BotsBot } from '@memohai/sdk'
+// import { useUserStore } from '@/store/user'
+// import { useAvatarInitials } from '@/composables/useAvatarInitials'
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
+  Button,
   Sidebar,
   SidebarContent,
   SidebarFooter,
@@ -82,79 +121,20 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@memohai/ui'
-import { computed } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { useUserStore } from '@/store/user'
-import { useAvatarInitials } from '@/composables/useAvatarInitials'
+import BotItem from './bot-item.vue'
 
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
-const { userInfo } = useUserStore()
+// const { userInfo } = useUserStore()
 
-const displayNameLabel = computed(() =>
-  userInfo.displayName || userInfo.username || userInfo.id || '-',
-)
-const displayTitle = computed(() =>
-  userInfo.displayName || userInfo.username || userInfo.id || t('settings.user'),
-)
-const avatarFallback = useAvatarInitials(() => displayTitle.value, 'U')
+const { data: botData, isLoading } = useQuery(getBotsQuery())
+const bots = computed<BotsBot[]>(() => botData.value?.items ?? [])
 
-function isItemActive(name: string): boolean {
-  return new RegExp(`^/${name}(\\b|/)`).test(route.path)
-}
+const isSettingsActive = computed(() => route.path.startsWith('/settings'))
 
-const sidebarInfo = computed(() => [
-  {
-    title: t('sidebar.chat'),
-    name: 'chat',
-    icon: ['fas', 'comment-dots'],
-  },
-  {
-    title: t('sidebar.bots'),
-    name: 'bots',
-    icon: ['fas', 'robot'],
-  },
-  {
-    title: t('sidebar.models'),
-    name: 'models',
-    icon: ['fas', 'cubes'],
-  },
-  {
-    title: t('sidebar.searchProvider'),
-    name: 'search-providers',
-    icon: ['fas', 'globe'],
-  },
-  {
-    title: t('sidebar.memoryProvider'),
-    name: 'memory-providers',
-    icon: ['fas', 'brain'],
-  },
-  {
-    title: t('sidebar.ttsProvider'),
-    name: 'tts-providers',
-    icon: ['fas', 'volume-high'],
-  },
-  {
-    title: t('sidebar.emailProvider'),
-    name: 'email-providers',
-    icon: ['fas', 'envelope'],
-  },
-  {
-    title: t('sidebar.browserContexts'),
-    name: 'browser-contexts',
-    icon: ['fas', 'window-maximize'],
-  },
-  {
-    title: t('sidebar.usage'),
-    name: 'usage',
-    icon: ['fas', 'chart-line'],
-  },
-  {
-    title: t('sidebar.settings'),
-    name: 'settings',
-    icon: ['fas', 'gear'],
-  },
-])
+// const displayTitle = computed(() =>
+//   userInfo.displayName || userInfo.username || userInfo.id || t('settings.user'),
+// )
+// const avatarFallback = useAvatarInitials(() => displayTitle.value, 'U')
 </script>
diff --git a/apps/web/src/components/warning-banner/index.vue b/apps/web/src/components/warning-banner/index.vue
index 05766e4a..adf39425 100644
--- a/apps/web/src/components/warning-banner/index.vue
+++ b/apps/web/src/components/warning-banner/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-md border border-yellow-300/50 bg-yellow-50/70 p-3 text-sm text-yellow-800 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-200">
+  <div class="rounded-md border border-yellow-300/50 bg-yellow-50/70 p-3 text-xs text-yellow-800 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-200">
     <slot />
   </div>
 </template>
diff --git a/apps/web/src/i18n/locales/en.json b/apps/web/src/i18n/locales/en.json
index 166e05bf..d5d5363c 100644
--- a/apps/web/src/i18n/locales/en.json
+++ b/apps/web/src/i18n/locales/en.json
@@ -52,13 +52,14 @@
     "retryHint": "Please check and try again"
   },
   "sidebar": {
+    "session": "Session",
     "chat": "Chat",
     "bots": "Bots",
-    "models": "Models",
-    "searchProvider": "Search Providers",
+    "models": "Providers",
+    "searchProvider": "Web Search",
     "memoryProvider": "Memory",
-    "ttsProvider": "TTS Providers",
-    "emailProvider": "Email Providers",
+    "ttsProvider": "Speech",
+    "emailProvider": "Email",
     "settings": "Settings",
     "home": "Home",
     "mcp": "MCP",
@@ -168,18 +169,22 @@
     "noSessions": "No sessions yet",
     "sessionTypeHeartbeat": "Heartbeat",
     "sessionTypeSchedule": "Scheduled Task",
-    "sessionTypeSubagent": "Subagent"
+    "sessionTypeSubagent": "Subagent",
+    "sessionTypeChat": "Chat",
+    "sessionFilterAll": "All",
+    "sessionSourcePrefix": "From:",
+    "searchSessionPlaceholder": "Search"
   },
   "models": {
-    "title": "Models",
+    "title": "Providers",
     "searchPlaceholder": "Search providers…",
     "addModel": "Add Model",
     "editModel": "Edit Model",
     "deleteModelConfirm": "Are you sure you want to delete this model?",
     "searchModelPlaceholder": "Search models…",
     "searchNoResults": "No matching models",
-    "emptyTitle": "No Models",
-    "emptyDescription": "Click the button above to add a model for this provider",
+    "emptyTitle": "No Providers",
+    "emptyDescription": "Click the button above to add a provider",
     "clientType": "Client Type",
     "clientTypePlaceholder": "Select client type",
     "model": "Model ID",
@@ -253,19 +258,19 @@
     }
   },
   "searchProvider": {
-    "title": "Search Providers",
-    "add": "Add Search Provider",
+    "title": "Web Search",
+    "add": "Add Web Search",
     "empty": "No search providers",
     "provider": "Provider Type",
-    "selectHint": "Select or create a search provider",
+    "selectHint": "Select or create a web search provider",
     "unsupportedProvider": "This provider does not have a settings panel yet",
-    "saveSuccess": "Search provider saved",
-    "deleteSuccess": "Search provider deleted",
-    "deleteFailed": "Failed to delete search provider",
+    "saveSuccess": "Web search provider saved",
+    "deleteSuccess": "Web search provider deleted",
+    "deleteFailed": "Failed to delete web search provider",
     "searchPlaceholder": "Search providers...",
-    "emptyTitle": "No Search Providers",
+    "emptyTitle": "No Web Search",
     "emptyDescription": "Add a search provider to configure web search",
-    "deleteConfirm": "Are you sure you want to delete this search provider? This action cannot be undone.",
+    "deleteConfirm": "Are you sure you want to delete this web search provider? This action cannot be undone.",
     "providerNames": {
       "brave": "Brave",
       "bing": "Bing",
@@ -330,11 +335,11 @@
     }
   },
   "ttsProvider": {
-    "title": "TTS Providers",
-    "add": "Add TTS Provider",
+    "title": "Speech",
+    "add": "Add Speech Provider",
     "providerType": "Provider Type",
     "searchPlaceholder": "Search TTS providers...",
-    "emptyTitle": "No TTS Providers",
+    "emptyTitle": "No Speech Providers",
     "emptyDescription": "Add a TTS provider to enable text-to-speech for your bots",
     "deleteConfirm": "Are you sure you want to delete this TTS provider? This action cannot be undone.",
     "models": "Models",
@@ -366,11 +371,11 @@
     }
   },
   "emailProvider": {
-    "title": "Email Providers",
-    "add": "Add Email Provider",
+    "title": "Email",
+    "add": "Add Email",
     "providerType": "Provider Type",
     "searchPlaceholder": "Search email providers...",
-    "emptyTitle": "No Email Providers",
+    "emptyTitle": "No Email",
     "emptyDescription": "Add an email provider to enable email for your bots",
     "deleteConfirm": "Are you sure you want to delete this email provider? This action cannot be undone.",
     "fields": {
@@ -594,6 +599,7 @@
     },
     "tabs": {
       "overview": "Overview",
+      "general": "General",
       "memory": "Memory",
       "channels": "Platforms",
       "container": "Container",
@@ -771,8 +777,8 @@
       "titleModel": "Title Model",
       "titleModelDescription": "Select a small model to auto-generate session titles. Leave empty to disable.",
       "titleModelPlaceholder": "Disabled (no auto title)",
-      "searchProvider": "Search Provider",
-      "searchProviderPlaceholder": "Select search provider",
+      "searchProvider": "Web Search",
+      "searchProviderPlaceholder": "Select web search",
       "memoryProvider": "Memory Provider",
       "memoryProviderPlaceholder": "Select memory provider (disabled if empty)",
       "memoryModePreview": "Selected built-in mode: {mode}",
diff --git a/apps/web/src/i18n/locales/zh.json b/apps/web/src/i18n/locales/zh.json
index 3fa8941b..a83e15a8 100644
--- a/apps/web/src/i18n/locales/zh.json
+++ b/apps/web/src/i18n/locales/zh.json
@@ -52,6 +52,7 @@
     "retryHint": "请检查后重新输入"
   },
   "sidebar": {
+    "session":"会话",
     "chat": "对话",
     "bots": "Bots",
     "models": "模型管理",
@@ -164,7 +165,11 @@
     "noSessions": "暂无会话",
     "sessionTypeHeartbeat": "心跳",
     "sessionTypeSchedule": "定时任务",
-    "sessionTypeSubagent": "子智能体"
+    "sessionTypeSubagent": "子智能体",
+    "sessionTypeChat": "对话",
+    "sessionFilterAll": "全部",
+    "sessionSourcePrefix": "来自：",
+    "searchSessionPlaceholder": "搜索"
   },
   "models": {
     "title": "模型",
@@ -590,6 +595,7 @@
     },
     "tabs": {
       "overview": "概览",
+      "general": "General",
       "memory": "记忆",
       "channels": "平台",
       "container": "容器",
diff --git a/apps/web/src/layout/main-layout/index.vue b/apps/web/src/layout/main-layout/index.vue
index c08d6353..bef39eea 100644
--- a/apps/web/src/layout/main-layout/index.vue
+++ b/apps/web/src/layout/main-layout/index.vue
@@ -2,10 +2,14 @@
   <section class="flex">
     <sidebar-provider
       :default-open="sidebarDefaultOpen"
-      class="**:data-[sidebar=sidebar]:bg-transparent"
     >
-      <slot name="sidebar" />
-      <slot name="main" />
+      <section class="relative">
+        <slot name="sidebar" />
+      </section>
+    
+      <section class="main-left-section" />
+      <slot name="main" />  
+      <section class="main-right-section" />
     </sidebar-provider>
   </section>
 </template>
diff --git a/apps/web/src/pages/bots/components/bot-access.vue b/apps/web/src/pages/bots/components/bot-access.vue
index 59c48481..716564f2 100644
--- a/apps/web/src/pages/bots/components/bot-access.vue
+++ b/apps/web/src/pages/bots/components/bot-access.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="max-w-3xl mx-auto space-y-6">
     <div class="space-y-1">
-      <h2 class="text-lg font-semibold text-foreground">
+      <h2 class="text-sm font-semibold text-foreground">
         {{ $t('bots.access.title') }}
       </h2>
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.access.subtitle') }}
       </p>
     </div>
@@ -12,16 +12,16 @@
     <!-- Default Effect -->
     <section class="rounded-lg border border-border bg-card p-4 space-y-3">
       <div>
-        <p class="text-sm font-medium text-foreground">
+        <p class="text-xs font-medium text-foreground">
           {{ $t('bots.access.defaultEffectTitle') }}
         </p>
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('bots.access.defaultEffectDescription') }}
         </p>
       </div>
       <div class="flex items-center gap-3">
         <button
-          class="flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
+          class="flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
           :class="defaultEffectDraft === 'deny'
             ? 'border-destructive bg-destructive/10 text-destructive'
             : 'border-border bg-card text-muted-foreground hover:bg-accent'"
@@ -35,7 +35,7 @@
           {{ $t('bots.access.effectDeny') }}
         </button>
         <button
-          class="flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors"
+          class="flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors"
           :class="defaultEffectDraft === 'allow'
             ? 'border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
             : 'border-border bg-card text-muted-foreground hover:bg-accent'"
@@ -66,10 +66,10 @@
     <section class="rounded-lg border border-border bg-card p-4 space-y-4">
       <div class="flex items-center justify-between">
         <div>
-          <h3 class="text-base font-semibold text-foreground">
+          <h3 class="text-sm font-semibold text-foreground">
             {{ $t('bots.access.rulesTitle') }}
           </h3>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.access.rulesDescription') }}
           </p>
         </div>
@@ -136,7 +136,7 @@
 
           <!-- Subject + scope -->
           <div class="min-w-0 flex-1 space-y-0.5">
-            <p class="truncate text-sm text-foreground">
+            <p class="truncate text-xs text-foreground">
               {{ describeSubject(rule) }}
             </p>
             <p
@@ -211,7 +211,7 @@
             <Label>{{ $t('bots.access.enabled') }}</Label>
             <div class="flex items-center gap-2 h-9">
               <Switch v-model="ruleForm.enabled" />
-              <span class="text-sm text-muted-foreground">{{ ruleForm.enabled ? $t('common.yes') : $t('common.no') }}</span>
+              <span class="text-xs text-muted-foreground">{{ ruleForm.enabled ? $t('common.yes') : $t('common.no') }}</span>
             </div>
           </div>
 
@@ -221,7 +221,7 @@
             <div class="flex gap-2">
               <button
                 type="button"
-                class="flex-1 rounded-md border px-3 py-2 text-sm font-medium transition-colors"
+                class="flex-1 rounded-md border px-3 py-2 text-xs font-medium transition-colors"
                 :class="ruleForm.effect === 'deny'
                   ? 'border-destructive bg-destructive/10 text-destructive'
                   : 'border-border text-muted-foreground hover:bg-accent'"
@@ -231,7 +231,7 @@
               </button>
               <button
                 type="button"
-                class="flex-1 rounded-md border px-3 py-2 text-sm font-medium transition-colors"
+                class="flex-1 rounded-md border px-3 py-2 text-xs font-medium transition-colors"
                 :class="ruleForm.effect === 'allow'
                   ? 'border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
                   : 'border-border text-muted-foreground hover:bg-accent'"
@@ -313,7 +313,7 @@
                     <AvatarFallback>{{ option.label.slice(0, 2).toUpperCase() }}</AvatarFallback>
                   </Avatar>
                   <div class="min-w-0">
-                    <div class="truncate text-sm">
+                    <div class="truncate text-xs">
                       {{ option.label }}
                     </div>
                     <div
@@ -334,7 +334,7 @@
             :open="scopeOpen"
             @toggle="scopeOpen = ($event.target as HTMLDetailsElement).open"
           >
-            <summary class="flex cursor-pointer items-center gap-1 text-sm font-medium text-foreground select-none list-none">
+            <summary class="flex cursor-pointer items-center gap-1 text-xs font-medium text-foreground select-none list-none">
               <FontAwesomeIcon
                 :icon="['fas', 'chevron-right']"
                 class="size-3 transition-transform group-open:rotate-90"
@@ -387,7 +387,7 @@
                 >
                   <template #option-label="{ option }">
                     <div class="min-w-0 flex-1 text-left">
-                      <div class="truncate text-sm">
+                      <div class="truncate text-xs">
                         {{ option.label }}
                       </div>
                       <div class="truncate text-xs text-muted-foreground">
@@ -484,7 +484,7 @@
 
           <p
             v-if="formError"
-            class="text-sm text-destructive"
+            class="text-xs text-destructive"
           >
             {{ formError }}
           </p>
diff --git a/apps/web/src/pages/bots/components/bot-card.vue b/apps/web/src/pages/bots/components/bot-card.vue
index 3e704ffa..b0775ecb 100644
--- a/apps/web/src/pages/bots/components/bot-card.vue
+++ b/apps/web/src/pages/bots/components/bot-card.vue
@@ -17,13 +17,13 @@
           :src="bot.avatar_url"
           :alt="bot.display_name"
         />
-        <AvatarFallback class="text-base">
+        <AvatarFallback class="text-sm">
           {{ avatarFallback }}
         </AvatarFallback>
       </Avatar>
       <div class="flex-1 min-w-0 flex flex-col gap-1.5">
         <div class="flex items-center justify-between gap-2">
-          <CardTitle class="text-base truncate">
+          <CardTitle class="text-sm truncate">
             {{ bot.display_name || bot.id }}
           </CardTitle>
           <Badge
diff --git a/apps/web/src/pages/bots/components/bot-channels.vue b/apps/web/src/pages/bots/components/bot-channels.vue
index baacf23e..79e19685 100644
--- a/apps/web/src/pages/bots/components/bot-channels.vue
+++ b/apps/web/src/pages/bots/components/bot-channels.vue
@@ -19,7 +19,7 @@
           v-else-if="configuredChannels.length === 0"
           class="flex flex-col items-center justify-center h-full p-4 text-center"
         >
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.channels.emptyTitle') }}
           </p>
           <p class="mt-1 text-xs text-muted-foreground">
@@ -37,7 +37,7 @@
             :key="item.meta.type"
             type="button"
             :aria-pressed="selectedType === item.meta.type"
-            class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm transition-colors hover:bg-accent"
+            class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-xs transition-colors hover:bg-accent"
             :class="{ 'bg-accent': selectedType === item.meta.type }"
             @click="selectedType = item.meta.type ?? ''"
           >
@@ -92,7 +92,7 @@
           >
             <div
               v-if="unconfiguredChannels.length === 0"
-              class="px-3 py-2 text-sm text-muted-foreground text-center"
+              class="px-3 py-2 text-xs text-muted-foreground text-center"
             >
               {{ $t('bots.channels.noAvailableTypes') }}
             </div>
@@ -100,7 +100,7 @@
               v-for="item in unconfiguredChannels"
               :key="item.meta.type"
               type="button"
-              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors"
+              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-xs hover:bg-accent transition-colors"
               @click="addChannel(item.meta.type ?? '')"
             >
               <span class="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
@@ -119,7 +119,7 @@
     <div class="flex-1 min-w-0">
       <div
         v-if="!selectedType || !selectedItem"
-        class="flex h-full items-center justify-center text-sm text-muted-foreground"
+        class="flex h-full items-center justify-center text-xs text-muted-foreground"
       >
         {{ configuredChannels.length > 0 ? $t('bots.channels.selectType') : '' }}
       </div>
diff --git a/apps/web/src/pages/bots/components/bot-compaction.vue b/apps/web/src/pages/bots/components/bot-compaction.vue
index a76e46d5..113ba31c 100644
--- a/apps/web/src/pages/bots/components/bot-compaction.vue
+++ b/apps/web/src/pages/bots/components/bot-compaction.vue
@@ -61,13 +61,13 @@
 
     <!-- Logs header -->
     <div class="flex items-center justify-between">
-      <h3 class="text-lg font-medium">
+      <h3 class="text-sm font-medium">
         {{ $t('bots.compaction.title') }}
       </h3>
       <div class="flex items-center gap-2">
         <NativeSelect
           v-model="statusFilter"
-          class="h-9 w-28 text-sm"
+          class="h-9 w-28 text-xs"
         >
           <option value="">
             {{ $t('bots.compaction.filterAll') }}
@@ -117,7 +117,7 @@
     <!-- Loading -->
     <div
       v-if="isLoading && logs.length === 0"
-      class="flex items-center justify-center py-8 text-sm text-muted-foreground"
+      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
     >
       <Spinner class="mr-2" />
       {{ $t('common.loading') }}
@@ -134,7 +134,7 @@
           class="size-6 text-muted-foreground"
         />
       </div>
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.compaction.empty') }}
       </p>
     </div>
@@ -142,7 +142,7 @@
     <!-- Logs -->
     <template v-else>
       <div class="rounded-md border">
-        <table class="w-full text-sm">
+        <table class="w-full text-xs">
           <thead>
             <tr class="border-b bg-muted/50">
               <th class="px-4 py-2 text-left font-medium">
@@ -192,7 +192,7 @@
       <div
         v-for="log in filteredLogs.filter(l => l.id && expandedIds.has(l.id))"
         :key="'detail-' + log.id"
-        class="rounded-md border bg-muted/20 p-4 text-sm whitespace-pre-wrap wrap-break-word"
+        class="rounded-md border bg-muted/20 p-4 text-xs whitespace-pre-wrap wrap-break-word"
       >
         <p
           v-if="log.error_message"
diff --git a/apps/web/src/pages/bots/components/bot-container.vue b/apps/web/src/pages/bots/components/bot-container.vue
index 1c950176..8d49da2c 100644
--- a/apps/web/src/pages/bots/components/bot-container.vue
+++ b/apps/web/src/pages/bots/components/bot-container.vue
@@ -589,10 +589,10 @@ watch([activeTab, botId], ([tab]) => {
   <div class="mx-auto space-y-5">
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 space-y-1">
-        <h3 class="text-lg font-semibold">
+        <h3 class="text-sm font-semibold">
           {{ $t('bots.container.title') }}
         </h3>
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('bots.container.subtitle') }}
         </p>
       </div>
@@ -627,14 +627,14 @@ watch([activeTab, botId], ([tab]) => {
 
     <div
       v-if="botLifecyclePending"
-      class="rounded-md border border-yellow-300/50 bg-yellow-50/70 p-3 text-sm text-yellow-800 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-200"
+      class="rounded-md border border-yellow-300/50 bg-yellow-50/70 p-3 text-xs text-yellow-800 dark:border-yellow-800/50 dark:bg-yellow-900/10 dark:text-yellow-200"
     >
       {{ $t('bots.container.botNotReady') }}
     </div>
 
     <div
       v-if="containerLoading && !containerInfo && !containerMissing"
-      class="flex items-center gap-2 text-sm text-muted-foreground"
+      class="flex items-center gap-2 text-xs text-muted-foreground"
     >
       <Spinner />
       <span>{{ $t('common.loading') }}</span>
@@ -644,13 +644,13 @@ watch([activeTab, botId], ([tab]) => {
       v-else-if="containerMissing"
       class="space-y-4 rounded-md border p-4"
     >
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.container.empty') }}
       </p>
 
       <div class="rounded-md border p-4 space-y-4">
         <div class="space-y-1">
-          <p class="text-sm font-medium">
+          <p class="text-xs font-medium">
             {{ $t('bots.container.actions.create') }}
           </p>
           <p class="text-xs text-muted-foreground">
@@ -719,7 +719,7 @@ watch([activeTab, botId], ([tab]) => {
         v-if="isLegacy"
         class="flex items-center justify-between gap-3 rounded-md border border-amber-300/50 bg-amber-50/70 p-3 dark:border-amber-800/50 dark:bg-amber-900/10"
       >
-        <p class="text-sm text-amber-800 dark:text-amber-200">
+        <p class="text-xs text-amber-800 dark:text-amber-200">
           {{ $t('bots.container.legacyWarning') }}
         </p>
         <Button
@@ -749,7 +749,7 @@ watch([activeTab, botId], ([tab]) => {
       </div>
 
       <div class="rounded-md border p-4">
-        <dl class="grid grid-cols-1 gap-3 text-sm sm:grid-cols-2">
+        <dl class="grid grid-cols-1 gap-3 text-xs sm:grid-cols-2">
           <div class="space-y-1">
             <dt class="text-muted-foreground">
               {{ $t('bots.container.fields.id') }}
@@ -815,17 +815,17 @@ watch([activeTab, botId], ([tab]) => {
 
       <div class="space-y-4 rounded-md border p-4">
         <div class="space-y-1">
-          <h4 class="text-sm font-medium">
+          <h4 class="text-xs font-medium">
             {{ $t('bots.container.dataTitle') }}
           </h4>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.container.dataSubtitle') }}
           </p>
         </div>
 
         <div
           v-if="hasPreservedData"
-          class="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-sm"
+          class="rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-xs"
         >
           {{ $t('bots.container.preservedDataAvailable') }}
         </div>
@@ -885,10 +885,10 @@ watch([activeTab, botId], ([tab]) => {
 
         <div class="space-y-3">
           <div class="space-y-1">
-            <h4 class="text-sm font-medium text-destructive">
+            <h4 class="text-xs font-medium text-destructive">
               {{ $t('bots.container.deleteTitle') }}
             </h4>
-            <p class="text-sm text-muted-foreground">
+            <p class="text-xs text-muted-foreground">
               {{ $t('bots.container.deleteSubtitle') }}
             </p>
           </div>
@@ -967,14 +967,14 @@ watch([activeTab, botId], ([tab]) => {
 
         <div
           v-if="snapshotsLoading"
-          class="flex items-center gap-2 text-sm text-muted-foreground"
+          class="flex items-center gap-2 text-xs text-muted-foreground"
         >
           <Spinner />
           <span>{{ $t('common.loading') }}</span>
         </div>
         <div
           v-else-if="sortedSnapshots.length === 0"
-          class="text-sm text-muted-foreground"
+          class="text-xs text-muted-foreground"
         >
           {{ $t('bots.container.snapshotEmpty') }}
         </div>
@@ -1059,7 +1059,7 @@ watch([activeTab, botId], ([tab]) => {
                 </ConfirmPopover>
                 <div
                   v-else
-                  class="text-sm text-muted-foreground"
+                  class="text-xs text-muted-foreground"
                 >
                   -
                 </div>
@@ -1068,7 +1068,7 @@ watch([activeTab, botId], ([tab]) => {
           </div>
 
           <div class="hidden overflow-x-auto rounded-md border md:block">
-            <table class="w-full text-sm">
+            <table class="w-full text-xs">
               <thead class="bg-muted/50 text-left">
                 <tr>
                   <th class="px-3 py-2 font-medium">
diff --git a/apps/web/src/pages/bots/components/bot-email.vue b/apps/web/src/pages/bots/components/bot-email.vue
index 663154fd..384e15eb 100644
--- a/apps/web/src/pages/bots/components/bot-email.vue
+++ b/apps/web/src/pages/bots/components/bot-email.vue
@@ -3,10 +3,10 @@
     <!-- Header -->
     <div class="flex items-start justify-between gap-3">
       <div class="space-y-1 min-w-0">
-        <h3 class="text-lg font-semibold">
+        <h3 class="text-sm font-semibold">
           {{ $t('bots.email.title') }}
         </h3>
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('bots.email.subtitle') }}
         </p>
       </div>
@@ -15,7 +15,7 @@
     <!-- Bindings section -->
     <div class="space-y-3">
       <div class="flex items-center justify-between">
-        <h4 class="text-sm font-medium">
+        <h4 class="text-xs font-medium">
           {{ $t('bots.email.bindings') }}
         </h4>
         <Popover>
@@ -39,7 +39,7 @@
               v-for="p in unboundProviders"
               :key="p.id"
               type="button"
-              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
+              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-xs transition-colors hover:bg-accent"
               :disabled="addingBinding"
               @click="handleAddBinding(p)"
             >
@@ -56,7 +56,7 @@
 
       <div
         v-if="bindingsLoading"
-        class="flex items-center gap-2 text-sm text-muted-foreground p-4"
+        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
       >
         <Spinner />
         <span>{{ $t('common.loading') }}</span>
@@ -66,7 +66,7 @@
         v-else-if="!bindings?.length"
         class="rounded-md border p-4"
       >
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('bots.email.noBindings') }}
         </p>
       </div>
@@ -82,7 +82,7 @@
         >
           <div class="flex items-center justify-between">
             <div class="min-w-0">
-              <p class="font-medium text-sm">
+              <p class="font-medium text-xs">
                 {{ providerNameMap[binding.email_provider_id!] || binding.email_provider_id }}
               </p>
               <p
@@ -108,7 +108,7 @@
             </ConfirmPopover>
           </div>
           <Separator class="my-3" />
-          <div class="flex gap-6 text-sm">
+          <div class="flex gap-6 text-xs">
             <label class="flex items-center gap-2 cursor-pointer">
               <Switch
                 :model-value="binding.can_read"
@@ -132,12 +132,12 @@
 
     <!-- Outbox (audit) -->
     <div class="space-y-3">
-      <h4 class="text-sm font-medium">
+      <h4 class="text-xs font-medium">
         {{ $t('bots.email.outbox') }}
       </h4>
       <div
         v-if="outboxLoading"
-        class="flex items-center gap-2 text-sm text-muted-foreground p-4"
+        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
       >
         <Spinner />
         <span>{{ $t('common.loading') }}</span>
@@ -146,7 +146,7 @@
         v-else-if="!outboxItems?.length"
         class="rounded-md border p-4"
       >
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('bots.email.noEmails') }}
         </p>
       </div>
@@ -154,7 +154,7 @@
         v-else
         class="overflow-x-auto rounded-md border"
       >
-        <table class="w-full text-sm">
+        <table class="w-full text-xs">
           <thead class="bg-muted/50 text-left">
             <tr>
               <th class="px-3 py-2 font-medium">
diff --git a/apps/web/src/pages/bots/components/bot-heartbeat.vue b/apps/web/src/pages/bots/components/bot-heartbeat.vue
index b717efa7..7bc0b593 100644
--- a/apps/web/src/pages/bots/components/bot-heartbeat.vue
+++ b/apps/web/src/pages/bots/components/bot-heartbeat.vue
@@ -61,13 +61,13 @@
 
     <!-- Logs header -->
     <div class="flex items-center justify-between">
-      <h3 class="text-lg font-medium">
+      <h3 class="text-sm font-medium">
         {{ $t('bots.heartbeat.title') }}
       </h3>
       <div class="flex items-center gap-2">
         <NativeSelect
           v-model="statusFilter"
-          class="h-9 w-28 text-sm"
+          class="h-9 w-28 text-xs"
         >
           <option value="">
             {{ $t('bots.heartbeat.filterAll') }}
@@ -117,7 +117,7 @@
     <!-- Loading -->
     <div
       v-if="isLoading && logs.length === 0"
-      class="flex items-center justify-center py-8 text-sm text-muted-foreground"
+      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
     >
       <Spinner class="mr-2" />
       {{ $t('common.loading') }}
@@ -134,7 +134,7 @@
           class="size-6 text-muted-foreground"
         />
       </div>
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.heartbeat.empty') }}
       </p>
     </div>
@@ -142,7 +142,7 @@
     <!-- Logs -->
     <template v-else>
       <div class="rounded-md border">
-        <table class="w-full text-sm">
+        <table class="w-full text-xs">
           <thead>
             <tr class="border-b bg-muted/50">
               <th class="px-4 py-2 text-left font-medium">
@@ -193,7 +193,7 @@
       <div
         v-for="log in filteredLogs.filter(l => l.id && expandedIds.has(l.id))"
         :key="'detail-' + log.id"
-        class="rounded-md border bg-muted/20 p-4 text-sm whitespace-pre-wrap wrap-break-word"
+        class="rounded-md border bg-muted/20 p-4 text-xs whitespace-pre-wrap wrap-break-word"
       >
         <p v-if="log.result_text">
           {{ log.result_text }}
diff --git a/apps/web/src/pages/bots/components/bot-mcp.vue b/apps/web/src/pages/bots/components/bot-mcp.vue
index 85a2673a..42faa6d9 100644
--- a/apps/web/src/pages/bots/components/bot-mcp.vue
+++ b/apps/web/src/pages/bots/components/bot-mcp.vue
@@ -22,7 +22,7 @@
     <template #sidebar-content>
       <div
         v-if="loading && items.length === 0"
-        class="flex items-center gap-2 text-sm text-muted-foreground p-4"
+        class="flex items-center gap-2 text-xs text-muted-foreground p-4"
       >
         <Spinner />
         <span>{{ $t('common.loading') }}</span>
@@ -105,7 +105,7 @@
       >
         <div class="p-6 space-y-6">
           <div class="flex items-center justify-between">
-            <h3 class="text-lg font-semibold">
+            <h3 class="text-sm font-semibold">
               {{ selectedItem.name }}
             </h3>
             <div class="flex items-center gap-2">
@@ -248,7 +248,7 @@
 
             <div class="flex items-center justify-between pt-2 border-t">
               <div class="flex items-center gap-2">
-                <Label class="text-sm font-normal">{{ $t('mcp.active') }}</Label>
+                <Label class="text-xs font-normal">{{ $t('mcp.active') }}</Label>
                 <Switch
                   :model-value="formData.active"
                   @update:model-value="(val) => (formData.active = !!val)"
@@ -274,7 +274,7 @@
           >
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-2">
-                <h4 class="text-sm font-medium">
+                <h4 class="text-xs font-medium">
                   {{ $t('mcp.tools') }}
                 </h4>
                 <Badge
@@ -320,14 +320,14 @@
 
             <div
               v-if="selectedItem.status_message && selectedItem.status === 'error'"
-              class="text-sm text-destructive bg-destructive/5 rounded-md p-3"
+              class="text-xs text-destructive bg-destructive/5 rounded-md p-3"
             >
               {{ selectedItem.status_message }}
             </div>
 
             <div
               v-if="probeAuthRequired"
-              class="text-sm text-amber-600 bg-amber-50 dark:bg-amber-900/20 rounded-md p-3 flex items-center gap-2"
+              class="text-xs text-amber-600 bg-amber-50 dark:bg-amber-900/20 rounded-md p-3 flex items-center gap-2"
             >
               <FontAwesomeIcon :icon="['fas', 'lock']" />
               {{ $t('mcp.authRequired') }}
@@ -339,7 +339,7 @@
               class="border rounded-md p-4 space-y-3"
             >
               <div class="flex items-center justify-between">
-                <h4 class="text-sm font-medium">
+                <h4 class="text-xs font-medium">
                   {{ $t('mcp.oauth.title') }}
                 </h4>
                 <Badge
@@ -464,7 +464,7 @@
               <div
                 v-for="tool in displayTools"
                 :key="tool.name"
-                class="flex items-start gap-2 py-1.5 px-2 rounded text-sm hover:bg-accent/50"
+                class="flex items-start gap-2 py-1.5 px-2 rounded text-xs hover:bg-accent/50"
               >
                 <FontAwesomeIcon
                   :icon="['fas', 'wrench']"
@@ -483,7 +483,7 @@
             </div>
             <p
               v-else-if="selectedItem.status === 'connected'"
-              class="text-sm text-muted-foreground"
+              class="text-xs text-muted-foreground"
             >
               {{ $t('mcp.toolsEmpty') }}
             </p>
@@ -579,7 +579,7 @@
       <DialogHeader>
         <DialogTitle>{{ $t('common.import') }} MCP Servers</DialogTitle>
       </DialogHeader>
-      <p class="text-sm text-muted-foreground mt-2">
+      <p class="text-xs text-muted-foreground mt-2">
         {{ $t('mcp.importHint') }}
       </p>
       <div class="h-[350px] rounded-md border overflow-hidden mt-3">
diff --git a/apps/web/src/pages/bots/components/bot-memory.vue b/apps/web/src/pages/bots/components/bot-memory.vue
index b4dfe23f..ce86c713 100644
--- a/apps/web/src/pages/bots/components/bot-memory.vue
+++ b/apps/web/src/pages/bots/components/bot-memory.vue
@@ -4,7 +4,7 @@
     <div class="w-64 shrink-0 flex flex-col border rounded-lg overflow-hidden max-h-full">
       <div class="p-3 border-b space-y-3 shrink-0">
         <div class="flex items-center justify-between">
-          <h4 class="text-sm font-medium">
+          <h4 class="text-xs font-medium">
             {{ $t('bots.memory.files') }}
           </h4>
           <div class="flex items-center gap-1">
@@ -117,7 +117,7 @@
                 class="size-4 text-muted-foreground shrink-0"
               />
               <div class="min-w-0">
-                <h4 class="text-sm font-medium truncate">
+                <h4 class="text-xs font-medium truncate">
                   {{ formatDate(selectedMemory.created_at) }}
                 </h4>
                 <div class="flex items-center gap-1.5 text-[10px] text-muted-foreground mt-0.5">
@@ -175,7 +175,7 @@
           <div class="flex-1 relative">
             <Textarea
               v-model="editContent"
-              class="absolute inset-0 resize-none border-0 rounded-none focus-visible:ring-0 font-mono text-sm p-4 h-full"
+              class="absolute inset-0 resize-none border-0 rounded-none focus-visible:ring-0 font-mono text-xs p-4 h-full"
               placeholder="Write your memory content here (Markdown)..."
             />
           </div>
@@ -228,7 +228,7 @@
             class="size-6 opacity-20"
           />
         </div>
-        <h3 class="text-sm font-medium text-foreground">
+        <h3 class="text-xs font-medium text-foreground">
           {{ $t('bots.memory.title') }}
         </h3>
         <p class="text-xs mt-1 max-w-[240px]">
@@ -352,7 +352,7 @@
         </DialogHeader>
 
         <div class="py-4 space-y-6">
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.memory.compactConfirm') }}
           </p>
 
@@ -371,7 +371,7 @@
                   class="mt-1"
                 />
                 <div class="min-w-0">
-                  <p class="text-sm font-medium">{{ $t('bots.memory.compactRatioLight') }}</p>
+                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioLight') }}</p>
                   <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioLightDesc') }}</p>
                 </div>
               </Label>
@@ -384,7 +384,7 @@
                   class="mt-1"
                 />
                 <div class="min-w-0">
-                  <p class="text-sm font-medium">{{ $t('bots.memory.compactRatioMedium') }}</p>
+                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioMedium') }}</p>
                   <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioMediumDesc') }}</p>
                 </div>
               </Label>
@@ -397,7 +397,7 @@
                   class="mt-1"
                 />
                 <div class="min-w-0">
-                  <p class="text-sm font-medium">{{ $t('bots.memory.compactRatioAggressive') }}</p>
+                  <p class="text-xs font-medium">{{ $t('bots.memory.compactRatioAggressive') }}</p>
                   <p class="text-xs text-muted-foreground">{{ $t('bots.memory.compactRatioAggressiveDesc') }}</p>
                 </div>
               </Label>
diff --git a/apps/web/src/pages/bots/components/bot-overview.vue b/apps/web/src/pages/bots/components/bot-overview.vue
index 8745078a..67d999de 100644
--- a/apps/web/src/pages/bots/components/bot-overview.vue
+++ b/apps/web/src/pages/bots/components/bot-overview.vue
@@ -125,10 +125,10 @@ function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary'
     <div class="rounded-md border p-4">
       <div class="flex items-center justify-between gap-2">
         <div>
-          <p class="text-sm font-medium">
+          <p class="text-xs font-medium">
             {{ $t('bots.checks.title') }}
           </p>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.checks.subtitle') }}
           </p>
         </div>
@@ -145,7 +145,7 @@ function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary'
           {{ $t('common.refresh') }}
         </Button>
       </div>
-      <div class="mt-3 flex items-center gap-2 text-sm">
+      <div class="mt-3 flex items-center gap-2 text-xs">
         <Badge
           :variant="hasIssue ? 'destructive' : 'default'"
           class="text-xs"
@@ -156,7 +156,7 @@ function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary'
 
       <div
         v-if="checksLoading && checks.length === 0"
-        class="mt-4 flex items-center gap-2 text-sm text-muted-foreground"
+        class="mt-4 flex items-center gap-2 text-xs text-muted-foreground"
       >
         <Spinner />
         <span>{{ $t('common.loading') }}</span>
@@ -164,7 +164,7 @@ function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary'
 
       <p
         v-else-if="checks.length === 0"
-        class="mt-4 text-sm text-muted-foreground"
+        class="mt-4 text-xs text-muted-foreground"
       >
         {{ $t('bots.checks.empty') }}
       </p>
@@ -197,7 +197,7 @@ function checkStatusVariant(status: BotCheck['status']): 'default' | 'secondary'
               {{ checkStatusLabel(item.status) }}
             </Badge>
           </div>
-          <p class="mt-2 text-sm">
+          <p class="mt-2 text-xs">
             {{ item.summary }}
           </p>
           <p
diff --git a/apps/web/src/pages/bots/components/bot-schedule.vue b/apps/web/src/pages/bots/components/bot-schedule.vue
index bcdcf0d8..23553e4e 100644
--- a/apps/web/src/pages/bots/components/bot-schedule.vue
+++ b/apps/web/src/pages/bots/components/bot-schedule.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-3">
-        <h3 class="text-lg font-medium">
+        <h3 class="text-sm font-medium">
           {{ $t('bots.schedule.title') }}
         </h3>
         <Badge
@@ -33,7 +33,7 @@
     <!-- Loading -->
     <div
       v-if="isLoading && schedules.length === 0"
-      class="flex items-center justify-center py-8 text-sm text-muted-foreground"
+      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
     >
       <Spinner class="mr-2" />
       {{ $t('common.loading') }}
@@ -50,7 +50,7 @@
           class="size-6 text-muted-foreground"
         />
       </div>
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.schedule.empty') }}
       </p>
     </div>
@@ -58,7 +58,7 @@
     <!-- Table -->
     <template v-else>
       <div class="rounded-md border overflow-hidden">
-        <table class="w-full text-sm">
+        <table class="w-full text-xs">
           <thead>
             <tr class="border-b bg-muted/50">
               <th class="px-4 py-2 text-left font-medium">
@@ -122,7 +122,7 @@
         v-if="totalPages > 1"
         class="flex items-center justify-between pt-4"
       >
-        <span class="text-sm text-muted-foreground">
+        <span class="text-xs text-muted-foreground">
           {{ paginationSummary }}
         </span>
         <Pagination
diff --git a/apps/web/src/pages/bots/components/bot-settings.vue b/apps/web/src/pages/bots/components/bot-settings.vue
index d07dc28f..e7129e1e 100644
--- a/apps/web/src/pages/bots/components/bot-settings.vue
+++ b/apps/web/src/pages/bots/components/bot-settings.vue
@@ -37,7 +37,7 @@
       />
       <div
         v-if="selectedBuiltinMemoryProvider"
-        class="rounded-md border border-border bg-card px-3 py-2 text-sm text-muted-foreground"
+        class="rounded-md border border-border bg-card px-3 py-2 text-xs text-muted-foreground"
       >
         {{ $t('bots.settings.memoryModePreview', {
           mode: $t(`memoryProvider.modeNames.${selectedBuiltinMemoryMode}`),
@@ -49,7 +49,7 @@
       >
         <div class="flex items-start justify-between gap-3">
           <div class="space-y-1">
-            <p class="text-sm font-medium text-foreground">
+            <p class="text-xs font-medium text-foreground">
               {{ indexedMemoryStatusTitle }}
             </p>
             <p class="text-xs text-muted-foreground">
@@ -74,7 +74,7 @@
 
         <div
           v-if="isMemoryStatusLoading"
-          class="text-sm text-muted-foreground"
+          class="text-xs text-muted-foreground"
         >
           {{ $t('common.loading') }}
         </div>
@@ -87,7 +87,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memorySourceDir') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground break-all">
+            <p class="mt-1 text-xs font-medium text-foreground break-all">
               {{ statusCardData.source_dir || '-' }}
             </p>
           </div>
@@ -95,7 +95,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memoryOverviewPath') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground break-all">
+            <p class="mt-1 text-xs font-medium text-foreground break-all">
               {{ statusCardData.overview_path || '-' }}
             </p>
           </div>
@@ -103,7 +103,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memoryMarkdownFiles') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground">
+            <p class="mt-1 text-xs font-medium text-foreground">
               {{ statusCardData.markdown_file_count ?? 0 }}
             </p>
           </div>
@@ -111,7 +111,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memorySourceEntries') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground">
+            <p class="mt-1 text-xs font-medium text-foreground">
               {{ statusCardData.source_count ?? 0 }}
             </p>
           </div>
@@ -119,7 +119,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memoryIndexedEntries') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground">
+            <p class="mt-1 text-xs font-medium text-foreground">
               {{ statusCardData.indexed_count ?? 0 }}
             </p>
           </div>
@@ -130,7 +130,7 @@
             <p class="text-xs text-muted-foreground">
               {{ $t('bots.settings.memoryQdrantCollection') }}
             </p>
-            <p class="mt-1 text-sm font-medium text-foreground break-all">
+            <p class="mt-1 text-xs font-medium text-foreground break-all">
               {{ statusCardData.qdrant_collection || '-' }}
             </p>
           </div>
@@ -142,7 +142,7 @@
               {{ encoderHealthLabel }}
             </p>
             <p
-              class="mt-1 text-sm font-medium"
+              class="mt-1 text-xs font-medium"
               :class="healthTextClass(statusCardData.encoder?.ok)"
             >
               {{ healthLabel(statusCardData.encoder?.ok, statusCardData.encoder?.error) }}
@@ -156,7 +156,7 @@
               {{ $t('bots.settings.memoryQdrantHealth') }}
             </p>
             <p
-              class="mt-1 text-sm font-medium"
+              class="mt-1 text-xs font-medium"
               :class="healthTextClass(statusCardData.qdrant?.ok)"
             >
               {{ healthLabel(statusCardData.qdrant?.ok, statusCardData.qdrant?.error) }}
@@ -309,10 +309,10 @@
 
     <!-- Danger Zone -->
     <div class="rounded-lg border border-destructive/50 bg-destructive/5 p-4 space-y-3">
-      <h3 class="text-sm font-semibold text-destructive">
+      <h3 class="text-xs font-semibold text-destructive">
         {{ $t('bots.settings.dangerZone') }}
       </h3>
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ $t('bots.settings.deleteBotDescription') }}
       </p>
       <div class="flex items-center justify-end">
diff --git a/apps/web/src/pages/bots/components/bot-skills.vue b/apps/web/src/pages/bots/components/bot-skills.vue
index b60b1e11..410711b6 100644
--- a/apps/web/src/pages/bots/components/bot-skills.vue
+++ b/apps/web/src/pages/bots/components/bot-skills.vue
@@ -3,7 +3,7 @@
     <!-- Header -->
     <div class="flex items-center justify-between">
       <div>
-        <h3 class="text-lg font-medium">
+        <h3 class="text-sm font-medium">
           {{ $t('bots.skills.title') }}
         </h3>
       </div>
@@ -22,7 +22,7 @@
     <!-- Loading State -->
     <div
       v-if="isLoading"
-      class="flex items-center justify-center py-8 text-sm text-muted-foreground"
+      class="flex items-center justify-center py-8 text-xs text-muted-foreground"
     >
       <Spinner class="mr-2" />
       {{ $t('common.loading') }}
@@ -39,10 +39,10 @@
           class="size-6 text-muted-foreground"
         />
       </div>
-      <h3 class="text-lg font-medium">
+      <h3 class="text-sm font-medium">
         {{ $t('bots.skills.emptyTitle') }}
       </h3>
-      <p class="text-sm text-muted-foreground mt-1">
+      <p class="text-xs text-muted-foreground mt-1">
         {{ $t('bots.skills.emptyDescription') }}
       </p>
     </div>
@@ -60,7 +60,7 @@
         <CardHeader class="pb-3">
           <div class="flex items-start justify-between gap-2">
             <CardTitle
-              class="text-base truncate"
+              class="text-sm truncate"
               :title="skill.name"
             >
               {{ skill.name }}
diff --git a/apps/web/src/pages/bots/components/channel-settings-panel.vue b/apps/web/src/pages/bots/components/channel-settings-panel.vue
index b4c9231c..3ac42904 100644
--- a/apps/web/src/pages/bots/components/channel-settings-panel.vue
+++ b/apps/web/src/pages/bots/components/channel-settings-panel.vue
@@ -10,10 +10,10 @@
           />
         </span>
         <div>
-          <h3 class="text-lg font-semibold">
+          <h3 class="text-sm font-semibold">
             {{ channelItem.meta.display_name }}
           </h3>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ channelItem.meta.type }}
           </p>
         </div>
@@ -59,7 +59,7 @@
       v-if="showWebhookCallback"
       class="space-y-2"
     >
-      <h4 class="text-sm font-medium">
+      <h4 class="text-xs font-medium">
         {{ $t('bots.channels.webhookCallback') }}
       </h4>
       <p class="text-xs text-muted-foreground">
@@ -102,7 +102,7 @@
 
     <!-- Credentials form (dynamic from config_schema) -->
     <div class="space-y-4">
-      <h4 class="text-sm font-medium">
+      <h4 class="text-xs font-medium">
         {{ $t('bots.channels.credentials') }}
       </h4>
       <p
diff --git a/apps/web/src/pages/bots/components/container-create-progress.vue b/apps/web/src/pages/bots/components/container-create-progress.vue
index 91c31fe8..f05b5c75 100644
--- a/apps/web/src/pages/bots/components/container-create-progress.vue
+++ b/apps/web/src/pages/bots/components/container-create-progress.vue
@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center gap-2 text-sm text-muted-foreground">
+  <div class="flex items-center gap-2 text-xs text-muted-foreground">
     <Spinner class="size-3.5" />
     <span v-if="phase === 'preserving'">
       {{ $t('bots.container.preservingData') }}
diff --git a/apps/web/src/pages/bots/components/create-bot.vue b/apps/web/src/pages/bots/components/create-bot.vue
index 78fda3e7..cb7aa81e 100644
--- a/apps/web/src/pages/bots/components/create-bot.vue
+++ b/apps/web/src/pages/bots/components/create-bot.vue
@@ -93,7 +93,7 @@
               </FormControl>
             </FormItem>
           </FormField>
-          <div class="rounded-md border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+          <div class="rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
             {{ $t('bots.createBotWaitHint') }}
           </div>
         </div>
diff --git a/apps/web/src/pages/bots/components/message-list.vue b/apps/web/src/pages/bots/components/message-list.vue
index cbdc8478..cd7a6035 100644
--- a/apps/web/src/pages/bots/components/message-list.vue
+++ b/apps/web/src/pages/bots/components/message-list.vue
@@ -20,7 +20,7 @@
         <!-- Content -->
         <div class="min-w-0 flex-1 space-y-1.5">
           <!-- Top row -->
-          <div class="flex flex-wrap items-center gap-2 text-sm">
+          <div class="flex flex-wrap items-center gap-2 text-xs">
             <Badge
               :variant="roleBadgeVariant(msg.role)"
               class="text-xs font-medium"
@@ -47,7 +47,7 @@
 
           <!-- Message content -->
           <div
-            class="text-sm leading-relaxed"
+            class="text-xs leading-relaxed"
             :class="{ 'font-mono text-xs': msg.role === 'tool' || msg.role === 'system' }"
           >
             <div
diff --git a/apps/web/src/pages/bots/components/weixin-qr-login.vue b/apps/web/src/pages/bots/components/weixin-qr-login.vue
index 9a19cdaa..835d629b 100644
--- a/apps/web/src/pages/bots/components/weixin-qr-login.vue
+++ b/apps/web/src/pages/bots/components/weixin-qr-login.vue
@@ -2,7 +2,7 @@
   <div class="space-y-4">
     <div class="flex items-center justify-between">
       <div>
-        <h4 class="text-sm font-medium">
+        <h4 class="text-xs font-medium">
           {{ $t('bots.channels.weixinQr.title') }}
         </h4>
         <p class="text-xs text-muted-foreground mt-1">
@@ -61,7 +61,7 @@
               :icon="['fas', 'mobile-screen']"
               class="size-8 text-primary mb-2"
             />
-            <p class="text-sm font-medium text-foreground">
+            <p class="text-xs font-medium text-foreground">
               {{ $t('bots.channels.weixinQr.scanned') }}
             </p>
           </div>
@@ -72,7 +72,7 @@
           v-if="pollStatus === 'expired'"
           class="absolute inset-0 flex flex-col items-center justify-center rounded-lg bg-background/80 gap-2"
         >
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('bots.channels.weixinQr.expired') }}
           </p>
           <Button
@@ -85,7 +85,7 @@
         </div>
       </div>
 
-      <p class="text-sm text-muted-foreground text-center max-w-xs">
+      <p class="text-xs text-muted-foreground text-center max-w-xs">
         {{ statusText }}
       </p>
 
@@ -108,7 +108,7 @@
           class="size-5 text-green-600 dark:text-green-400"
         />
       </div>
-      <p class="text-sm font-medium">
+      <p class="text-xs font-medium">
         {{ $t('bots.channels.weixinQr.success') }}
       </p>
     </div>
@@ -117,7 +117,7 @@
       v-else-if="qrState === 'error'"
       class="flex flex-col items-center gap-3 py-4"
     >
-      <p class="text-sm text-destructive">
+      <p class="text-xs text-destructive">
         {{ errorMessage }}
       </p>
       <Button
diff --git a/apps/web/src/pages/bots/detail.vue b/apps/web/src/pages/bots/detail.vue
index d4fd0af3..33029f00 100644
--- a/apps/web/src/pages/bots/detail.vue
+++ b/apps/web/src/pages/bots/detail.vue
@@ -56,7 +56,7 @@
             </Button>
           </template>
           <template v-else>
-            <h2 class="truncate text-2xl font-semibold tracking-tight">
+            <h2 class="truncate text-sm font-medium">
               {{ botNameDraft.trim() || bot?.display_name || botId }}
             </h2>
             <Button
@@ -77,7 +77,7 @@
             </Button>
           </template>
         </div>
-        <div class="mt-1 flex items-center gap-2 text-sm text-muted-foreground">
+        <div class="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
           <Badge
             v-if="bot"
             :variant="statusVariant"
@@ -97,7 +97,9 @@
     </div>
     <Separator />
     <div class="flex-1 relative">
-      <MasterDetailSidebarLayout class="[&_td:last-child]:w-45">
+      <MasterDetailSidebarLayout
+        class="[&_td:last-child]:w-45"
+      >
         <template #sidebar-content>
           <SidebarMenu
             v-for="tab in tabList"
@@ -127,18 +129,16 @@
         <template #sidebar-footer />
 
         <template #detail>
-          <ScrollArea         
-            class="max-h-full h-full"
-          >
-            <section class="p-4">
+          <div class="absolute inset-0 overflow-y-auto">
+            <div class="p-4">
               <KeepAlive>
                 <component
                   :is="activeComponent?.component"
                   v-bind="activeComponent?.params"
                 />
               </KeepAlive>
-            </section>
-          </ScrollArea>
+            </div>
+          </div>
         </template>
       </MasterDetailSidebarLayout>
     </div>
@@ -213,7 +213,6 @@ import {
   Input,
   Separator,
   Spinner,
-  ScrollArea,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -277,10 +276,12 @@ const tabList = computed(() => {
     {
       value: 'overview', label: 'bots.tabs.overview', component: BotOverview, params: {}
     },
+    { value: 'settings', label: 'bots.tabs.general', component: BotSettings, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
+    { value: 'container', label: 'bots.tabs.container', component: BotContainer, params: {} },
     { value: 'memory', label: 'bots.tabs.memory', component: BotMemory, params: { 'bot-id': bot_id } },
     { value: 'channels', label: 'bots.tabs.channels', component: BotChannels, params: { 'bot-id': bot_id } },
+    { value: 'access', label: 'bots.tabs.access', component: BotAccess, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
     { value: 'email', label: 'bots.tabs.email', component: BotEmail, params: { 'bot-id': bot_id } },
-    { value: 'container', label: 'bots.tabs.container', component: BotContainer, params: {} },
     { value: 'terminal', label: 'bots.tabs.terminal', component: BotTerminal, params: { 'bot-id': bot_id } },
     { value: 'files', label: 'bots.tabs.files', component: BotFiles, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
     { value: 'mcp', label: 'bots.tabs.mcp', component: BotMcp, params: { 'bot-id': bot_id } },
@@ -288,8 +289,6 @@ const tabList = computed(() => {
     { value: 'compaction', label: 'bots.tabs.compaction', component: BotCompaction, params: { 'bot-id': bot_id } },
     { value: 'schedule', label: 'bots.tabs.schedule', component: BotSchedule, params: { 'bot-id': bot_id } },
     { value: 'skills', label: 'bots.tabs.skills', component: BotSkills, params: { 'bot-id': bot_id } },
-    { value: 'access', label: 'bots.tabs.access', component: BotAccess, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } },
-    { value: 'settings', label: 'bots.tabs.settings', component: BotSettings, params: { 'bot-id': bot_id, 'bot-type': bot.value?.type } }
   ]
 })
 
diff --git a/apps/web/src/pages/bots/index.vue b/apps/web/src/pages/bots/index.vue
index 0f8d4924..5a301eef 100644
--- a/apps/web/src/pages/bots/index.vue
+++ b/apps/web/src/pages/bots/index.vue
@@ -2,7 +2,7 @@
   <section class="p-4  mx-auto">
     <!-- Header: search + create -->
     <div class="flex items-center justify-between mb-6 flex-wrap">
-      <h2 class="text-xl font-semibold tracking-tight max-md:hidden">
+      <h2 class="text-xs font-medium max-md:hidden">
         {{ $t('bots.title') }}
       </h2>
       <div class="flex items-center gap-3 ">
diff --git a/apps/web/src/pages/browser-contexts/components/context-setting.vue b/apps/web/src/pages/browser-contexts/components/context-setting.vue
index 8a2fb5b9..04cbced6 100644
--- a/apps/web/src/pages/browser-contexts/components/context-setting.vue
+++ b/apps/web/src/pages/browser-contexts/components/context-setting.vue
@@ -7,7 +7,7 @@
           class="size-5"
         />
         <div>
-          <h2 class="text-base font-semibold">
+          <h2 class="text-sm font-semibold">
             {{ curContext?.name || $t('browserContext.title') }}
           </h2>
           <p class="text-xs text-muted-foreground">
@@ -37,7 +37,7 @@
         </FormField>
 
         <Separator class="my-4" />
-        <h3 class="text-sm font-medium text-foreground">
+        <h3 class="text-xs font-medium text-foreground">
           {{ $t('browserContext.config') }}
         </h3>
 
@@ -53,7 +53,7 @@
                   v-for="c in availableCores"
                   :key="c"
                   type="button"
-                  class="flex items-center gap-2 px-3 py-1.5 rounded-md border text-sm transition-colors"
+                  class="flex items-center gap-2 px-3 py-1.5 rounded-md border text-xs transition-colors"
                   :class="value === c
                     ? 'border-primary bg-primary/10 text-primary font-medium'
                     : 'border-border bg-card text-muted-foreground hover:bg-accent'"
diff --git a/apps/web/src/pages/browser-contexts/index.vue b/apps/web/src/pages/browser-contexts/index.vue
index dc7568e5..40483cb8 100644
--- a/apps/web/src/pages/browser-contexts/index.vue
+++ b/apps/web/src/pages/browser-contexts/index.vue
@@ -6,7 +6,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   Toggle,
   Empty,
   EmptyContent,
@@ -39,16 +38,9 @@ const selectContext = (id: string) => computed(() => {
   return curContext.value?.id === id
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const filteredContexts = computed(() => {
   if (!Array.isArray(contextData.value)) return []
-  if (!searchText.value) return contextData.value
-  const keyword = searchText.value.toLowerCase()
-  return contextData.value.filter((c: BrowsercontextsBrowserContext) => {
-    return (c.name ?? '').toLowerCase().includes(keyword)
-  })
+  return contextData.value
 })
 
 watch(filteredContexts, () => {
@@ -66,26 +58,6 @@ const openStatus = reactive({
 
 <template>
   <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('browserContext.searchPlaceholder')"
-          aria-label="Search browser contexts"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search browser contexts"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template #sidebar-content>
       <SidebarMenu
         v-for="item in filteredContexts"
diff --git a/apps/web/src/pages/chat/components/bot-sidebar.vue b/apps/web/src/pages/chat/components/bot-sidebar.vue
deleted file mode 100644
index dab3ef3d..00000000
--- a/apps/web/src/pages/chat/components/bot-sidebar.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <SidebarMenu
-    v-for="bot in bots"
-    :key="bot.id"
-  >
-    <SidebarMenuItem>
-      <SidebarMenuButton
-        as-child
-        class="justify-start py-5! px-4"
-      >
-        <Toggle
-          :class="`p-2! border border-transparent h-[initial]! ${currentBotId === bot.id ? 'border-inherit' : ''}`"
-          :model-value="isActive(bot.id as string).value"
-          @click="handleSelect(bot)"
-        >
-          <Avatar class="size-8 shrink-0">
-            <AvatarImage
-              v-if="bot.avatar_url"
-              :src="bot.avatar_url"
-              :alt="bot.display_name"
-            />
-            <AvatarFallback class="text-xs">
-              {{ (bot.display_name || bot.id).slice(0, 2).toUpperCase() }}
-            </AvatarFallback>
-          </Avatar>
-          <div class="flex-1 text-left min-w-0">
-            <div class="font-medium truncate">
-              {{ bot.display_name || bot.id }}
-            </div>
-          </div>
-        </Toggle>
-      </SidebarMenuButton>
-    </SidebarMenuItem>
-  </SidebarMenu>
-  <SidebarMenu>
-    <div
-      v-if="isLoading"
-      class="flex justify-center py-4"
-    >
-      <FontAwesomeIcon
-        :icon="['fas', 'spinner']"
-        class="size-4 animate-spin text-muted-foreground"
-      />
-    </div>
-
-    <div
-      v-if="!isLoading && bots.length === 0"
-      class="px-3 py-6 text-center text-sm text-muted-foreground"
-    >
-      {{ $t('bots.emptyTitle') }}
-    </div>
-  </SidebarMenu>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import { Avatar, AvatarImage, AvatarFallback } from '@memohai/ui'
-import { useQuery } from '@pinia/colada'
-import { getBotsQuery } from '@memohai/sdk/colada'
-import type { BotsBot } from '@memohai/sdk'
-import { useChatStore } from '@/store/chat-list'
-import { storeToRefs } from 'pinia'
-import {
-  Toggle,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
- } from '@memohai/ui'
-
-const chatStore = useChatStore()
-const { currentBotId } = storeToRefs(chatStore)
-
-const { data: botData, isLoading } = useQuery(getBotsQuery())
-const bots = computed<BotsBot[]>(() => botData.value?.items ?? [])
-
-const isActive = (id: string) => computed(() => {
-  return currentBotId.value === id
-})
-
-function handleSelect(bot: BotsBot) {
-  chatStore.selectBot(bot.id)
-}
-</script>
diff --git a/apps/web/src/pages/chat/components/session-sidebar.vue b/apps/web/src/pages/chat/components/session-sidebar.vue
deleted file mode 100644
index 4e9c701d..00000000
--- a/apps/web/src/pages/chat/components/session-sidebar.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<template>
-  <div class="flex flex-col h-full">
-    <!-- Session list -->
-    <SidebarMenu v-if="currentBotId">
-      <SidebarMenuItem
-        v-for="session in sessions"
-        :key="session.id"
-      >
-        <SidebarMenuButton
-          as-child
-          class="justify-start py-3! px-3"
-        >
-          <Toggle
-            :class="`p-2! border border-transparent h-[initial]! w-full ${sessionId === session.id ? 'border-inherit' : ''}`"
-            :model-value="sessionId === session.id"
-            @click="handleSelect(session)"
-          >
-            <!-- Avatar area -->
-            <div class="relative shrink-0">
-              <Avatar
-                v-if="isIMSession(session)"
-                class="size-8"
-              >
-                <AvatarImage
-                  v-if="sessionAvatarUrl(session)"
-                  :src="sessionAvatarUrl(session)!"
-                  :alt="sessionDisplayLabel(session)"
-                />
-                <AvatarFallback class="text-xs bg-primary/10 text-primary">
-                  {{ sessionAvatarFallback(session) }}
-                </AvatarFallback>
-              </Avatar>
-              <div
-                v-else
-                class="flex items-center justify-center size-8"
-              >
-                <FontAwesomeIcon
-                  :icon="sessionIcon(session)"
-                  class="size-3.5"
-                  :class="sessionIconClass(session)"
-                />
-              </div>
-              <ChannelBadge
-                v-if="isIMSession(session)"
-                :platform="session.channel_type!"
-              />
-            </div>
-
-            <div class="flex-1 text-left min-w-0">
-              <div class="text-sm truncate">
-                {{ session.title || $t('chat.untitledSession') }}
-              </div>
-              <div
-                v-if="sessionSubLabel(session)"
-                class="text-xs text-muted-foreground truncate"
-              >
-                {{ sessionSubLabel(session) }}
-              </div>
-              <div
-                v-else-if="session.updated_at"
-                class="text-xs text-muted-foreground truncate"
-              >
-                {{ formatTime(session.updated_at) }}
-              </div>
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                as-child
-                @click.stop
-              >
-                <button
-                  class="p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity"
-                  :aria-label="$t('common.operation')"
-                >
-                  <FontAwesomeIcon
-                    :icon="['fas', 'ellipsis-vertical']"
-                    class="size-3"
-                  />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem @click.stop="handleDelete(session)">
-                  <FontAwesomeIcon
-                    :icon="['fas', 'trash']"
-                    class="size-3 mr-2"
-                  />
-                  {{ $t('chat.deleteSession') }}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Toggle>
-        </SidebarMenuButton>
-      </SidebarMenuItem>
-    </SidebarMenu>
-
-    <div
-      v-if="currentBotId && !loadingChats && sessions.length === 0"
-      class="px-3 py-6 text-center text-sm text-muted-foreground"
-    >
-      {{ $t('chat.noSessions') }}
-    </div>
-
-    <div
-      v-if="loadingChats"
-      class="flex justify-center py-4"
-    >
-      <FontAwesomeIcon
-        :icon="['fas', 'spinner']"
-        class="size-4 animate-spin text-muted-foreground"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
-import { useChatStore } from '@/store/chat-list'
-import type { SessionSummary } from '@/composables/api/useChat'
-import { Avatar, AvatarImage, AvatarFallback } from '@memohai/ui'
-import ChannelBadge from '@/components/chat-list/channel-badge/index.vue'
-import {
-  Toggle,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from '@memohai/ui'
-
-const { t } = useI18n()
-const chatStore = useChatStore()
-const { sessions, sessionId, currentBotId, loadingChats } = storeToRefs(chatStore)
-
-const WEB_CHANNELS = new Set(['web', ''])
-
-function isIMSession(session: SessionSummary): boolean {
-  const ct = (session.channel_type ?? '').trim().toLowerCase()
-  return ct !== '' && !WEB_CHANNELS.has(ct)
-}
-
-function sessionIcon(session: SessionSummary): string[] {
-  switch (session.type) {
-    case 'heartbeat': return ['fas', 'heart-pulse']
-    case 'schedule': return ['fas', 'clock']
-    case 'subagent': return ['fas', 'code-branch']
-    default: return ['fas', 'message']
-  }
-}
-
-function sessionIconClass(session: SessionSummary): string {
-  switch (session.type) {
-    case 'heartbeat': return 'text-rose-400'
-    case 'schedule': return 'text-amber-400'
-    case 'subagent': return 'text-violet-400'
-    default: return 'text-muted-foreground'
-  }
-}
-
-function routeMeta(session: SessionSummary): Record<string, unknown> {
-  return session.route_metadata ?? {}
-}
-
-function isGroupConversation(session: SessionSummary): boolean {
-  const ct = (session.route_conversation_type ?? '').trim().toLowerCase()
-  return ct === 'group' || ct === 'supergroup' || ct === 'channel'
-}
-
-function sessionAvatarUrl(session: SessionSummary): string | null {
-  const meta = routeMeta(session)
-  if (isGroupConversation(session)) {
-    const convAvatar = (meta.conversation_avatar_url as string ?? '').trim()
-    if (convAvatar) return convAvatar
-  }
-  const url = (meta.sender_avatar_url as string ?? '').trim()
-  return url || null
-}
-
-function sessionAvatarFallback(session: SessionSummary): string {
-  const label = sessionDisplayLabel(session)
-  return label ? label.charAt(0).toUpperCase() : '?'
-}
-
-function sessionDisplayLabel(session: SessionSummary): string {
-  const meta = routeMeta(session)
-  const convName = (meta.conversation_name as string ?? '').trim()
-  if (convName) return convName
-  const senderName = (meta.sender_display_name as string ?? '').trim()
-  if (senderName) return senderName
-  const senderUsername = (meta.sender_username as string ?? '').trim()
-  if (senderUsername) return senderUsername
-  return ''
-}
-
-function sessionSubLabel(session: SessionSummary): string {
-  if (session.type === 'heartbeat') return t('chat.sessionTypeHeartbeat')
-  if (session.type === 'schedule') return t('chat.sessionTypeSchedule')
-  if (session.type === 'subagent') return t('chat.sessionTypeSubagent')
-
-  if (!isIMSession(session)) return ''
-  const meta = routeMeta(session)
-
-  if (isGroupConversation(session)) {
-    const convHandle = (meta.conversation_handle as string ?? '').trim()
-    if (convHandle) return convHandle.startsWith('@') ? convHandle : `@${convHandle}`
-    const convName = (meta.conversation_name as string ?? '').trim()
-    if (convName) return `@${convName}`
-  }
-
-  const senderUsername = (meta.sender_username as string ?? '').trim()
-  if (senderUsername) return `@${senderUsername}`
-  const senderName = (meta.sender_display_name as string ?? '').trim()
-  if (senderName) return senderName
-  return ''
-}
-
-function handleSelect(session: SessionSummary) {
-  chatStore.selectSession(session.id)
-}
-
-function handleDelete(session: SessionSummary) {
-  chatStore.removeSession(session.id)
-}
-
-function formatTime(dateStr: string): string {
-  try {
-    const d = new Date(dateStr)
-    if (Number.isNaN(d.getTime())) return ''
-    const now = new Date()
-    const diff = now.getTime() - d.getTime()
-    const day = 86400000
-    if (diff < day) {
-      return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
-    }
-    if (diff < 7 * day) {
-      return d.toLocaleDateString(undefined, { weekday: 'short', hour: '2-digit', minute: '2-digit' })
-    }
-    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
-  } catch {
-    return ''
-  }
-}
-</script>
diff --git a/apps/web/src/pages/chat/index.vue b/apps/web/src/pages/chat/index.vue
deleted file mode 100644
index 9fae8da4..00000000
--- a/apps/web/src/pages/chat/index.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <div class="flex h-full">
-    <MasterDetailSidebarLayout>
-      <template #sidebar-header>
-        <div class="p-4 border-b">
-          <p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
-            {{ $t('sidebar.bots') }}
-          </p>
-        </div>
-      </template>
-      <template #sidebar-content>
-        <BotSidebar />
-
-        <template v-if="currentBotId">
-          <div class="px-4 pt-4 pb-2 flex items-center justify-between">
-            <p class="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
-              {{ $t('chat.sessions') }}
-            </p>
-            <button
-              class="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
-              :aria-label="$t('chat.newSession')"
-              @click="chatStore.createNewSession()"
-            >
-              <FontAwesomeIcon
-                :icon="['fas', 'plus']"
-                class="size-3.5"
-              />
-            </button>
-          </div>
-          <SessionSidebar />
-        </template>
-      </template>
-      <template #detail>
-        <ChatArea />
-      </template>
-    </MasterDetailSidebarLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { watch } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useRoute, useRouter } from 'vue-router'
-import { useChatStore } from '@/store/chat-list'
-import BotSidebar from './components/bot-sidebar.vue'
-import SessionSidebar from './components/session-sidebar.vue'
-import ChatArea from './components/chat-area.vue'
-import MasterDetailSidebarLayout from '@/components/master-detail-sidebar-layout/index.vue'
-
-const route = useRoute()
-const router = useRouter()
-const chatStore = useChatStore()
-const { currentBotId, sessionId } = storeToRefs(chatStore)
-
-const urlSessionId = ((route.params.sessionId as string) ?? '').trim()
-if (urlSessionId) {
-  sessionId.value = urlSessionId
-} else {
-  currentBotId.value = null
-  sessionId.value = null
-}
-
-let suppressUrlSync = false
-
-watch(sessionId, (newId) => {
-  if (suppressUrlSync) return
-  const urlId = ((route.params.sessionId as string) ?? '').trim()
-  const storeId = (newId ?? '').trim()
-  if (storeId === urlId) return
-  router.replace({ name: 'chat', params: { sessionId: storeId || undefined } })
-})
-
-watch(() => route.params.sessionId, async (paramId) => {
-  const urlId = ((paramId as string) ?? '').trim()
-  const storeId = (sessionId.value ?? '').trim()
-  if (!urlId || urlId === storeId) return
-  suppressUrlSync = true
-  try {
-    await chatStore.selectSession(urlId)
-  } finally {
-    suppressUrlSync = false
-  }
-})
-</script>
diff --git a/apps/web/src/pages/email-providers/components/provider-setting.vue b/apps/web/src/pages/email-providers/components/provider-setting.vue
index f4dbee53..a3bb8a36 100644
--- a/apps/web/src/pages/email-providers/components/provider-setting.vue
+++ b/apps/web/src/pages/email-providers/components/provider-setting.vue
@@ -7,7 +7,7 @@
           class="size-5"
         />
         <div>
-          <h2 class="text-base font-semibold">
+          <h2 class="text-sm font-semibold">
             {{ curProvider?.name }}
           </h2>
           <p class="text-xs text-muted-foreground">
@@ -135,7 +135,7 @@
       >
         <div class="flex flex-wrap items-start justify-between gap-4">
           <div class="flex-1 min-w-[220px]">
-            <p class="text-sm font-medium">
+            <p class="text-xs font-medium">
               {{ $t('emailProvider.oauth.title') }}
             </p>
             <p class="text-xs text-muted-foreground mt-0.5">
diff --git a/apps/web/src/pages/email-providers/index.vue b/apps/web/src/pages/email-providers/index.vue
index 44bde54c..8f58aadc 100644
--- a/apps/web/src/pages/email-providers/index.vue
+++ b/apps/web/src/pages/email-providers/index.vue
@@ -7,7 +7,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   Toggle,
   Empty,
   EmptyContent,
@@ -36,16 +35,9 @@ const selectProvider = (name: string) => computed(() => {
   return curProvider.value?.name === name
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const filteredProviders = computed(() => {
   if (!Array.isArray(providerData.value)) return []
-  if (!searchText.value) return providerData.value
-  const keyword = searchText.value.toLowerCase()
-  return providerData.value.filter((p: EmailProviderResponse) =>
-    (p.name ?? '').toLowerCase().includes(keyword),
-  )
+  return providerData.value
 })
 
 watch(filteredProviders, (list) => {
@@ -69,26 +61,6 @@ const openStatus = reactive({ addOpen: false })
 
 <template>
   <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('emailProvider.searchPlaceholder')"
-          aria-label="Search email providers"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template #sidebar-content>
       <SidebarMenu
         v-for="item in filteredProviders"
diff --git a/apps/web/src/pages/chat/components/attachment-block.vue b/apps/web/src/pages/home/components/attachment-block.vue
similarity index 96%
rename from apps/web/src/pages/chat/components/attachment-block.vue
rename to apps/web/src/pages/home/components/attachment-block.vue
index 85215015..01612f66 100644
--- a/apps/web/src/pages/chat/components/attachment-block.vue
+++ b/apps/web/src/pages/home/components/attachment-block.vue
@@ -47,7 +47,7 @@
       <button
         v-else-if="getContainerPath(att)"
         type="button"
-        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/60 transition-colors text-sm cursor-pointer"
+        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/60 transition-colors text-xs cursor-pointer"
         :title="getContainerPath(att)"
         @click="handleOpenContainerFile(att)"
       >
@@ -70,7 +70,7 @@
         :href="getUrl(att)"
         target="_blank"
         rel="noopener noreferrer"
-        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/60 transition-colors text-sm"
+        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 hover:bg-muted/60 transition-colors text-xs"
       >
         <FontAwesomeIcon
           :icon="['fas', fileIcon(att)]"
@@ -84,7 +84,7 @@
       <!-- Non-accessible attachment -->
       <div
         v-else
-        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 text-sm text-muted-foreground"
+        class="flex items-center gap-2 px-3 py-2 rounded-lg border bg-muted/30 text-xs text-muted-foreground"
       >
         <FontAwesomeIcon
           :icon="['fas', fileIcon(att)]"
diff --git a/apps/web/src/pages/home/components/bot-item.vue b/apps/web/src/pages/home/components/bot-item.vue
new file mode 100755
index 00000000..8bdaf3d4
--- /dev/null
+++ b/apps/web/src/pages/home/components/bot-item.vue
@@ -0,0 +1,153 @@
+<template>
+  <section>
+    <SidebarMenuButton
+      as-child
+      class="justify-start py-5! px-4"
+      :disabled="bot.status === 'error'"
+    >
+      <Toggle
+        :class="`p-2.75! border hover:border-border hover:bg-(--bot-item)!  ${isActive ? 'border-border bg-(--bot-item)!' : 'border-transparent bg-transparent!'} h-[initial]!  ${currentBotId === bot.id ? 'border-inherit' : ''}`"
+        :model-value="isActive"
+        @click="handleSelect(bot)"
+      >
+        <section
+          v-if="bot.status === 'loading'"
+          class="flex gap-2 overflow-hidden w-full items-center "
+        >
+          <ChatStatus />
+          <section class="flex flex-col gap-0.5 flex-1">
+            <h5 class="text-xs flex ">
+              <span class="truncate flex-1 max-w-30">
+                {{ bot.display_name || bot.id }}
+              </span>
+
+              <time
+                class="ml-auto flex-none"
+                :datetime="create_date"
+              >{{ create_date }}</time>
+            </h5>
+
+            <p class="text-xs text-muted-foreground min-w-0 ">
+              <i class="w-1.25 aspect-square bg-blue-500 rounded-full inline-block" />
+              推理中
+            </p>
+          </section>
+        </section>
+        <section
+          v-if="bot.status === 'ready'"
+          class="flex gap-2 overflow-hidden w-full"
+        >
+          <ChatStatus :is-loading="false" />
+          <section class="flex flex-col gap-0.5  flex-1">
+            <section>
+              <h5 class="text-xs flex flex-1">
+                <span class="truncate flex-1 max-w-30">
+                  {{ bot.display_name || bot.id }}
+                </span>
+                <time
+                  class="ml-auto "
+                  :datetime="create_date"
+                >{{ create_date }}</time>
+              </h5>
+            </section>
+
+            <p class="text-xs text-muted-foreground min-w-0 ">
+              fewfwefewfewfewfwf
+            </p>
+          </section>
+        </section>
+        <section
+          v-if="bot.status === 'error'"
+          class="flex gap-2 overflow-hidden w-full"
+        >
+          <ChatStatus
+            :is-loading="false"
+            :error="bot.status === 'error'"
+          />
+          <section class="flex flex-col gap-0.5 flex-1">
+            <h5 class="text-xs flex">
+              <span class="truncate flex-1 max-w-30">
+                {{ bot.display_name || bot.id }}
+              </span>
+              <time
+                class="ml-auto"
+                :datetime="create_date"
+              >{{ create_date }}</time>
+            </h5>
+            <p class="text-xs text-muted-foreground min-w-0 ">
+              fewfwefewfewfewfwf
+            </p>
+          </section>
+        </section>
+        <section
+          v-if="bot.status === 'no-setting'"
+          class="flex gap-2 overflow-hidden w-full "
+        >
+          <ChatStatus :is-loading="false" />
+          <section class="self-center flex-1">
+            <h5 class="text-xs flex">
+              <span class="truncate flex-1 max-w-30">
+                {{ bot.display_name || bot.id }}
+              </span>
+
+              <time
+                class="ml-auto"
+                :datetime="create_date"
+              >{{ create_date }}</time>
+            </h5>
+          </section>
+        </section>
+      </Toggle>
+      <!-- <Toggle
+        v-if="bot.status === 'ready'"
+        :class="`p-2.75! border  border-border h-[initial]! bg-(--bot-item)! ${currentBotId === bot.id ? 'border-inherit' : ''}`"
+        :model-value="isActive(bot.id as string).value"
+        @click="handleSelect(bot)"
+      >
+        <section class="flex gap-2 overflow-hidden w-full">
+          <ChatStatus />
+          <section class="flex flex-col gap-0.5">
+            <h5 class="text-xs">
+              {{ bot.display_name || bot.id }}
+            </h5>
+            <p class="text-xs text-muted-foreground min-w-0 ">
+              <i class="w-1.25 aspect-square bg-blue-500 rounded-full inline-block" />
+              推理中
+            </p>
+          </section>
+        </section>
+      </Toggle> -->
+    </SidebarMenuButton>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { BotsBot } from '@memohai/sdk'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useChatStore } from '@/store/chat-list'
+import ChatStatus from '@/components/chat/chat-status/index.vue'
+import {
+  Toggle,
+  SidebarMenuButton,
+} from '@memohai/ui'
+import moment from 'moment'
+
+const { bot } = defineProps<{ bot: BotsBot }>()
+const chatStore = useChatStore()
+
+const create_date = computed(() => {
+  return moment(bot?.updated_at ?? Date.now()).format('hh:ss')
+})
+
+const { currentBotId } = storeToRefs(chatStore)
+
+const isActive = computed(() => {
+  return currentBotId.value === bot.id
+})
+
+function handleSelect(bot: BotsBot) {
+  chatStore.selectBot(bot.id)
+}
+
+</script>
\ No newline at end of file
diff --git a/apps/web/src/pages/home/components/bot-sidebar.vue b/apps/web/src/pages/home/components/bot-sidebar.vue
new file mode 100644
index 00000000..dfd8f761
--- /dev/null
+++ b/apps/web/src/pages/home/components/bot-sidebar.vue
@@ -0,0 +1,192 @@
+<template>
+  <section :class="mountNode.id">
+    <Teleport :to="mountNode.leftDefault">
+      <SidebarProvider
+        :open="sidebarOpen"
+      >
+        <SidebarInset>
+          <Sidebar
+            class="absolute! "
+            collapsible="icon"
+          >
+            <SidebarHeader
+              class="h-12 flex flex-rows justify-center"            
+            >
+              <section class="flex items-center gap-2">
+                <img
+                  src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNSA5QzEuNSA2LjE4NzcgMS41IDQuNzgxNTUgMi4yMTYxOSAzLjc5NTgxQzIuNDQ3NDggMy40Nzc0NSAyLjcyNzQ1IDMuMTk3NDggMy4wNDU4MSAyLjk2NjE5QzQuMDMxNTUgMi4yNSA1LjQzNzcgMi4yNSA4LjI1IDIuMjVIOS43NUMxMi41NjIzIDIuMjUgMTMuOTY4NCAyLjI1IDE0Ljk1NDIgMi45NjYxOUMxNS4yNzI2IDMuMTk3NDggMTUuNTUyNSAzLjQ3NzQ1IDE1Ljc4MzggMy43OTU4MUMxNi41IDQuNzgxNTUgMTYuNSA2LjE4NzcgMTYuNSA5QzE2LjUgMTEuODEyMyAxNi41IDEzLjIxODQgMTUuNzgzOCAxNC4yMDQyQzE1LjU1MjUgMTQuNTIyNSAxNS4yNzI2IDE0LjgwMjUgMTQuOTU0MiAxNS4wMzM4QzEzLjk2ODQgMTUuNzUgMTIuNTYyMyAxNS43NSA5Ljc1IDE1Ljc1SDguMjVDNS40Mzc3IDE1Ljc1IDQuMDMxNTUgMTUuNzUgMy4wNDU4MSAxNS4wMzM4QzIuNzI3NDUgMTQuODAyNSAyLjQ0NzQ4IDE0LjUyMjUgMi4yMTYxOSAxNC4yMDQyQzEuNSAxMy4yMTg0IDEuNSAxMS44MTIzIDEuNSA5WiIgc3Ryb2tlPSIjMEEwQTBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNNy4xMjUgMi42MjVMNy4xMjUgMTUuMzc1IiBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1IDUuMjVDMy43NSA1LjI1IDQuNDM1NjYgNS4yNSA0Ljg3NSA1LjI1IiBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMuNzUgOC4yNUg0Ljg3NSIgc3Ryb2tlPSIjMEEwQTBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xMi43NSA3LjVMMTEuODMwMSA4LjI5Mjg5QzExLjQ0MzQgOC42MjYyMyAxMS4yNSA4Ljc5Mjg5IDExLjI1IDlDMTEuMjUgOS4yMDcxMSAxMS40NDM0IDkuMzczNzcgMTEuODMwMSA5LjcwNzExTDEyLjc1IDEwLjUiIHN0cm9rZT0iIzBBMEEwQSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K"
+                  alt="折叠"
+                  class="group-data-[collapsible=icon]:m-auto"
+                  @click="sidebarOpen = !sidebarOpen"
+                >
+
+                <h3 class="font-medium text-xs group-data-[collapsible=icon]:hidden">
+                  {{ $t('sidebar.session') }}
+                </h3>
+              </section>
+            </SidebarHeader>
+            <Separator />
+            <section
+              class="not-group-data-[collapsible=icon]:hidden flex justify-center"
+              style="writing-mode:sideways-rl"
+            >
+              <span class="flex-none w-[1em] mr-2.5 mt-4 text-muted-foreground text-xs">
+                {{ $t('sidebar.session') }}
+              </span>
+            </section>
+            <SidebarContent>
+              <SidebarGroup class="group-data-[collapsible=icon]:invisible">
+                <SidebarGroupContent>
+                  <SidebarMenu class="my-4">
+                    <InputGroup>
+                      <InputGroupInput placeholder="Search..." />
+                      <InputGroupAddon>
+                        <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
+                      </InputGroupAddon>
+                    </InputGroup>
+                  </SidebarMenu>
+                  <h4 class="text-xs uppercase text-muted-foreground tracking-wide mb-2">
+                    我的SESSION
+                  </h4>
+                  <SidebarMenu ref="session-item">
+                    <SidebarMenuItem
+                      v-for="bot in bots"
+                      :key="bot.id"
+                      class="relative hover:[&_svg]:visible"
+                    >
+                      <!-- <SidebarMenuButton
+                        tooltip="afwef"
+                        class="py-5 text-muted-foreground relative before:absolute before:w-0.5! before:top-2 before:bottom-2 data-[active=true]:before:bg-[#8B56E3] hover:before:bg-[#8B56E3] before:left-0.5!"
+                      >
+                        <FontAwesomeIcon :icon="['fas', 'grip-vertical']" />
+                        <span>fwefwef</span>
+                      </SidebarMenuButton> -->
+                      <FontAwesomeIcon
+                        :icon="['fas', 'grip-vertical']"
+                        class="can-dragable  cursor-pointer absolute top-0 bottom-0 m-auto w-1.5! left-1! invisible z-100 text-[#C7C7C7]!"
+                      />
+
+                      <BotItem :bot="bot" />
+                    </SidebarMenuItem>
+                  </SidebarMenu>
+                  
+                  <SidebarMenu>
+                    <div
+                      v-if="isLoading"
+                      class="flex justify-center py-4"
+                    >
+                      <FontAwesomeIcon
+                        :icon="['fas', 'spinner']"
+                        class="size-4 animate-spin text-muted-foreground"
+                      />
+                    </div>
+                    <div
+                      v-if="!isLoading && bots.length === 0"
+                      class="px-3 py-6 text-center text-xs text-muted-foreground"
+                    >
+                      {{ $t('bots.emptyTitle') }}
+                    </div>
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            </SidebarContent>
+            <SidebarFooter class="group-data-[collapsible=icon]:invisible">
+              <Button class="mb-4 justify-start gap-4">
+                <FontAwesomeIcon :icon="['fas', 'plus']" />
+                Session
+              </Button>
+            </SidebarFooter>
+          </Sidebar>
+        </SidebarInset>
+      </SidebarProvider>
+    </Teleport>
+    <section class="hidden-clip-section" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef, watch,ref } from 'vue'
+import { useQuery } from '@pinia/colada'
+import { getBotsQuery } from '@memohai/sdk/colada'
+import type { BotsBot } from '@memohai/sdk'
+import Sortable from 'sortablejs'
+import {
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarContent,
+  Sidebar,
+  SidebarInset,
+  Separator,
+  SidebarFooter,
+  Button,
+  InputGroup,
+  InputGroupInput,
+  InputGroupAddon,
+  SidebarGroup,
+  SidebarGroupContent
+} from '@memohai/ui'
+import BotItem from './bot-item.vue'
+import useControlVisibleStatus from '@/utils/useControlVisibleStatus'
+const sidebarOpen = ref(true)
+
+
+const sessionItem = useTemplateRef('session-item')
+
+watch(sessionItem, () => {
+  const el = sessionItem.value?.$el
+  if (sessionItem.value?.$el) {
+    new Sortable(el, {
+      animation: 150,
+      handle: '.can-dragable'
+    })
+  }
+}, {
+  immediate: true
+})
+
+console.log(Sortable)
+
+const { data: botData, isLoading } = useQuery(getBotsQuery())
+const bots = computed<BotsBot[]>(() => botData.value?.items?.concat({
+  'id': '991cd528-0c10-41a0-93e6-a6a7006a433cd',
+  'owner_user_id': '9b7390f6-a336-4c76-bf58-df616942c9a6',
+  'type': 'personal',
+  'display_name': 'feafew',
+  'is_active': true,
+  'allow_guest': false,
+  'status': 'loading',
+  'check_state': 'ok',
+  'check_issue_count': 0,
+  'created_at': '2026-03-23T10:14:13.269928+08:00',
+  'updated_at': '2026-03-23T10:14:13.435601+08:00'
+} as BotsBot, {
+  'id': '991cd528-0c10-41a0-93e6-a6a754006ac3cd',
+  'owner_user_id': '9b7390f6-a336-4c76-bf58-df616942c9a6',
+  'type': 'personal',
+  'display_name': 'feafew',
+  'is_active': true,
+  'allow_guest': false,
+  'status': 'error',
+  'check_state': 'ok',
+  'check_issue_count': 0,
+  'created_at': '2026-03-23T10:14:13.269928+08:00',
+  'updated_at': '2026-03-23T10:14:13.435601+08:00'
+} as BotsBot, {
+  'id': '991cd528-0c10-41a0fewf-93e6-a6a754006ac3cd',
+  'owner_user_id': '9b7390f6-a336-4c76-bf58-df616942c9a6',
+  'type': 'personal',
+  'display_name': 'feafew',
+  'is_active': true,
+  'allow_guest': false,
+  'status': 'no-setting',
+  'check_state': 'ok',
+  'check_issue_count': 0,
+  'created_at': '2026-03-23T10:14:13.269928+08:00',
+  'updated_at': '2026-03-23T10:14:13.435601+08:00'
+} as BotsBot) ?? [])
+
+
+const mountNode = useControlVisibleStatus()
+</script>
\ No newline at end of file
diff --git a/apps/web/src/pages/chat/components/chat-area.vue b/apps/web/src/pages/home/components/chat-area.vue
similarity index 90%
rename from apps/web/src/pages/chat/components/chat-area.vue
rename to apps/web/src/pages/home/components/chat-area.vue
index 7cc10067..dea193b1 100644
--- a/apps/web/src/pages/chat/components/chat-area.vue
+++ b/apps/web/src/pages/home/components/chat-area.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex-1 flex flex-col h-full min-w-0">
+  <div class="flex-1 flex flex-col h-full">
     <!-- No bot selected -->
     <div
       v-if="!currentBotId"
       class="flex-1 flex items-center justify-center"
     >
       <div class="text-center">
-        <p class="text-xl font-semibold tracking-tight text-foreground">
+        <p class="text-xs font-medium text-foreground">
           {{ $t('chat.selectBot') }}
         </p>
-        <p class="mt-1 text-sm text-muted-foreground">
+        <p class="mt-1 text-xs text-muted-foreground">
           {{ $t('chat.selectBotHint') }}
         </p>
       </div>
@@ -17,9 +17,9 @@
 
     <template v-else>
       <!-- Session header -->
-      <div class="border-b px-4 py-2 flex items-center justify-between min-h-12">
+      <!-- <div class="border-b px-4 py-2 flex items-center justify-between min-h-12">
         <div class="flex items-center gap-2 min-w-0">
-          <h2 class="text-sm font-medium truncate">
+          <h2 class="text-xs font-medium truncate">
             {{ activeSession?.title || $t('chat.untitledSession') }}
           </h2>
         </div>
@@ -37,16 +37,16 @@
             />
           </Button>
         </div>
-      </div>
+      </div> -->
 
       <!-- Messages -->
-      <section class="flex-1 relative w-full">
+      <section class="flex-1 relative w-full px-3 sm:px-5 lg:px-8">
         <section class="absolute inset-0">
           <ScrollArea
             ref="scrollContainer"
             class="h-full"
           >
-            <div class="max-w-3xl mx-auto px-4 py-6 space-y-6">
+            <div class="w-full max-w-4xl mx-auto px-1 sm:px-2 py-6 space-y-6">
               <!-- Load older indicator -->
               <div
                 v-if="loadingOlder"
@@ -63,7 +63,7 @@
                 v-if="messages.length === 0 && !loadingChats"
                 class="flex items-center justify-center min-h-[300px]"
               >
-                <p class="text-muted-foreground text-lg">
+                <p class="text-muted-foreground text-xs">
                   {{ $t('chat.greeting') }}
                 </p>
               </div>
@@ -89,8 +89,8 @@
       />
 
       <!-- Input -->
-      <div class="border-t p-4">
-        <div class="max-w-3xl mx-auto">
+      <div class="px-3 sm:px-5 lg:px-8 py-2.5">
+        <div class="w-full max-w-4xl mx-auto">
           <!-- Pending attachment previews -->
           <div
             v-if="pendingFiles.length"
@@ -121,26 +121,26 @@
           </div>
 
           <section>
-            <InputGroup>
+            <InputGroup class="bg-transparent overflow-hidden">
               <InputGroupTextarea
                 v-model="inputText"
-                class=" max-h-15 resize-none break-all!"
+                class="min-h-14 max-h-14 text-xs resize-none break-all!"                
                 :placeholder="activeChatReadOnly ? $t('chat.readonlyHint') : $t('chat.inputPlaceholder')"
                 :disabled="!currentBotId || activeChatReadOnly"
                 style="scrollbar-width: none;"
                 @keydown.enter.exact="handleKeydown"
                 @paste="handlePaste"
               />
+              <Separator />
               <InputGroupAddon
                 align="block-end"
-                class="justify-end"
+                class="bg-[#FAFAFA] dark:bg-background items-center py-1.5"
               >
                 <Button
-                  v-if="!streaming"
                   type="button"
                   size="sm"
                   variant="ghost"
-                  :disabled="!currentBotId || activeChatReadOnly"
+                  :disabled="!currentBotId || activeChatReadOnly || streaming"
                   aria-label="Attach files"
                   @click="fileInput?.click()"
                 >
@@ -168,18 +168,21 @@
                   size="sm"
                   :disabled="(!inputText.trim() && !pendingFiles.length) || !currentBotId || activeChatReadOnly"
                   aria-label="Send message"
+                  class="ml-auto bg-[#8B56E3]"
                   @click="handleSend"
                 >
                   <FontAwesomeIcon
                     :icon="['fas', 'paper-plane']"
-                    class="size-3.5"
+                    class="size-2"
                   />
+                  {{ $t('chat.send') }}
                 </Button>
                 <Button
                   v-else
                   type="button"
                   size="sm"
                   variant="destructive"
+                  class="ml-auto"
                   aria-label="Stop generating response"
                   @click="chatStore.abort()"
                 >
@@ -222,7 +225,7 @@
 
 <script setup lang="ts">
 import { ref, computed, nextTick, onMounted, provide, useTemplateRef, watchEffect} from 'vue'
-import { ScrollArea, Button, InputGroup, InputGroupAddon, InputGroupTextarea, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@memohai/ui'
+import { ScrollArea, Button, InputGroup, InputGroupAddon, InputGroupTextarea, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription,Separator } from '@memohai/ui'
 import { useChatStore } from '@/store/chat-list'
 import { storeToRefs } from 'pinia'
 import MessageItem from './message-item.vue'
@@ -270,7 +273,6 @@ const {
   messages,
   streaming,
   currentBotId,
-  activeSession,
   activeChatReadOnly,
   loadingOlder,
   loadingChats,
@@ -352,7 +354,7 @@ function handleKeydown(e: KeyboardEvent) {
 function handlePaste(e: ClipboardEvent) {
   const items = e.clipboardData?.items
   if (!items) return
-  for (const item of items) {
+  for (const item of Array.from(items)) {
     if (item.kind === 'file') {
       const file = item.getAsFile()
       if (file) pendingFiles.value.push(file)
diff --git a/apps/web/src/pages/home/components/chat-header.vue b/apps/web/src/pages/home/components/chat-header.vue
new file mode 100644
index 00000000..95375f49
--- /dev/null
+++ b/apps/web/src/pages/home/components/chat-header.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="h-[53px] shrink-0 flex items-center px-4 border-b border-border">
+    <ChatStatus />
+    <div class="ml-2 flex flex-col gap-0.5">
+      <h4 class="text-xs font-medium">
+        Memoh
+        <ChatStep />
+      </h4>
+      <span class="text-xs text-muted-foreground">
+        Memoh Bot (GPT-5.2)
+      </span>
+    </div>
+    <div class="ml-auto">
+      <Button
+        variant="ghost"
+        size="icon"
+      >
+        <FontAwesomeIcon :icon="['fas', 'arrow-rotate-right']" />
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ChatStatus from '@/components/chat/chat-status/index.vue'
+import ChatStep from '@/components/chat/chat-step/index.vue'
+import { Button } from '@memohai/ui'
+</script>
diff --git a/apps/web/src/pages/chat/components/media-gallery-lightbox.vue b/apps/web/src/pages/home/components/media-gallery-lightbox.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/media-gallery-lightbox.vue
rename to apps/web/src/pages/home/components/media-gallery-lightbox.vue
index f47aafd2..1eee777d 100644
--- a/apps/web/src/pages/chat/components/media-gallery-lightbox.vue
+++ b/apps/web/src/pages/home/components/media-gallery-lightbox.vue
@@ -75,7 +75,7 @@
         <!-- Counter -->
         <div
           v-if="items.length > 1"
-          class="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-black/50 text-white/90 text-sm"
+          class="absolute bottom-4 left-1/2 -translate-x-1/2 px-3 py-1 rounded-full bg-black/50 text-white/90 text-xs"
         >
           {{ (openIndex ?? 0) + 1 }} / {{ items.length }}
         </div>
diff --git a/apps/web/src/pages/chat/components/message-item.vue b/apps/web/src/pages/home/components/message-item.vue
similarity index 73%
rename from apps/web/src/pages/chat/components/message-item.vue
rename to apps/web/src/pages/home/components/message-item.vue
index 097a0cf8..34944fb5 100644
--- a/apps/web/src/pages/chat/components/message-item.vue
+++ b/apps/web/src/pages/home/components/message-item.vue
@@ -3,7 +3,7 @@
     class="flex gap-3 items-start"
     :class="message.role === 'user' && isSelf ? 'justify-end' : ''"
   >
-    <!-- Assistant avatar -->
+    <!-- Assistant avatar
     <div
       v-if="message.role === 'assistant'"
       class="relative shrink-0"
@@ -25,7 +25,7 @@
         v-if="message.platform"
         :platform="message.platform"
       />
-    </div>
+    </div> -->
 
     <!-- User avatar (other sender, left-aligned) -->
     <div
@@ -54,13 +54,13 @@
       :class="contentClass"
       data-chat-content
     >
-      <!-- Sender name for non-self user messages -->
+      <!-- Sender name for non-self user messages
       <p
         v-if="message.role === 'user' && !isSelf"
         class="text-xs text-muted-foreground mb-1"
       >
         {{ message.senderDisplayName || senderFallbackName }}
-      </p>
+      </p> -->
 
       <!-- User message -->
       <div
@@ -73,10 +73,10 @@
         >
           <div
             v-if="block.type === 'text' && cleanUserText(block.content)"
-            class="rounded-2xl px-4 py-2.5 text-sm whitespace-pre-wrap"
+            class="rounded-2xl px-3 py-2 text-xs whitespace-pre-wrap break-all"
             :class="isSelf
-              ? 'rounded-tr-sm bg-primary text-primary-foreground'
-              : 'rounded-tl-sm bg-accent/60 text-foreground'"
+              ? 'rounded-tr-sm bg-foreground text-background'
+              : 'rounded-tl-sm bg-accent text-foreground'"
           >
             {{ cleanUserText(block.content) }}
           </div>
@@ -100,12 +100,12 @@
         class="space-y-3"
       >
         <!-- Bot name label -->
-        <p
+        <!-- <p
           v-if="botName"
           class="text-xs text-muted-foreground"
         >
           {{ botName }}
-        </p>
+        </p> -->
 
         <template
           v-for="(block, i) in message.blocks"
@@ -146,7 +146,7 @@
         <!-- Streaming indicator -->
         <div
           v-if="message.streaming && message.blocks.length === 0"
-          class="flex items-center gap-2 text-sm text-muted-foreground h-8"
+          class="flex items-center gap-2 text-xs text-muted-foreground h-6"
         >
           <FontAwesomeIcon
             :icon="['fas', 'spinner']"
@@ -162,27 +162,6 @@
         </p>
       </div>
     </div>
-
-    <!-- Self user avatar (right side) -->
-    <div
-      v-if="message.role === 'user' && isSelf"
-      class="relative shrink-0"
-    >
-      <Avatar class="size-8">
-        <AvatarImage
-          v-if="selfAvatarUrl"
-          :src="selfAvatarUrl"
-          alt=""
-        />
-        <AvatarFallback class="text-xs">
-          {{ selfFallback }}
-        </AvatarFallback>
-      </Avatar>
-      <ChannelBadge
-        v-if="message.platform"
-        :platform="message.platform"
-      />
-    </div>
   </div>
 </template>
 
@@ -195,10 +174,10 @@ import ThinkingBlock from './thinking-block.vue'
 import ToolCallBlock from './tool-call-block.vue'
 import AttachmentBlock from './attachment-block.vue'
 import ChannelBadge from '@/components/chat-list/channel-badge/index.vue'
-import { useUserStore } from '@/store/user'
-import { useChatStore } from '@/store/chat-list'
-import { storeToRefs } from 'pinia'
-import { useI18n } from 'vue-i18n'
+// import { useUserStore } from '@/store/user'
+// import { useChatStore } from '@/store/chat-list'
+// import { storeToRefs } from 'pinia'
+// import { useI18n } from 'vue-i18n'
 import type {
   ChatMessage,
   ThinkingBlock as ThinkingBlockType,
@@ -214,39 +193,27 @@ const props = defineProps<{
   onOpenMedia?: (src: string) => void
 }>()
 
-const userStore = useUserStore()
-const chatStore = useChatStore()
-const { currentBotId, bots } = storeToRefs(chatStore)
+// const chatStore = useChatStore()
+// const { currentBotId, bots } = storeToRefs(chatStore)
 
 const isSelf = computed(() => props.message.isSelf !== false)
 
-const currentBot = computed(() =>
-  bots.value.find((b) => b.id === currentBotId.value) ?? null,
-)
+// const currentBot = computed(() =>
+//   bots.value.find((b) => b.id === currentBotId.value) ?? null,
+// )
 
-const botAvatarUrl = computed(() => currentBot.value?.avatar_url ?? '')
-const botName = computed(() => currentBot.value?.display_name ?? '')
+// const botAvatarUrl = computed(() => currentBot.value?.avatar_url ?? '')
+// const botName = computed(() => currentBot.value?.display_name ?? '')
 
-const selfAvatarUrl = computed(() =>
-  props.message.senderAvatarUrl || userStore.userInfo.avatarUrl || '',
-)
-const selfFallback = computed(() => {
-  const name = props.message.senderDisplayName
-    || userStore.userInfo.displayName
-    || userStore.userInfo.username
-    || ''
-  return name.slice(0, 2).toUpperCase() || 'U'
-})
+// const { t } = useI18n()
 
-const { t } = useI18n()
-
-const senderFallbackName = computed(() => {
-  const p = (props.message.platform ?? '').trim()
-  const platformLabel = p
-    ? t(`bots.channels.types.${p}`, p.charAt(0).toUpperCase() + p.slice(1))
-    : ''
-  return t('chat.unknownUser', { platform: platformLabel })
-})
+// const senderFallbackName = computed(() => {
+//   const p = (props.message.platform ?? '').trim()
+//   const platformLabel = p
+//     ? t(`bots.channels.types.${p}`, p.charAt(0).toUpperCase() + p.slice(1))
+//     : ''
+//   return t('chat.unknownUser', { platform: platformLabel })
+// })
 
 const senderFallback = computed(() => {
   const name = props.message.senderDisplayName ?? ''
diff --git a/apps/web/src/pages/home/components/session-item.vue b/apps/web/src/pages/home/components/session-item.vue
new file mode 100644
index 00000000..3ef3903a
--- /dev/null
+++ b/apps/web/src/pages/home/components/session-item.vue
@@ -0,0 +1,171 @@
+<template>
+  <button
+    class="group flex items-center h-12 w-full rounded-lg px-2.5 text-left transition-colors"
+    :class="isActive ? 'bg-background' : 'hover:bg-background/60'"
+    @click="$emit('select', session)"
+  >
+    <div class="relative shrink-0 mr-2.5">
+      <Avatar
+        v-if="isIMSession"
+        class="size-[26px] border border-border bg-accent"
+      >
+        <AvatarImage
+          v-if="avatarUrl"
+          :src="avatarUrl"
+          :alt="displayLabel"
+        />
+        <AvatarFallback class="text-[9px] bg-accent text-muted-foreground">
+          {{ avatarFallback }}
+        </AvatarFallback>
+      </Avatar>
+      <div
+        v-else
+        class="flex items-center justify-center size-[26px] rounded-full bg-accent border border-border"
+      >
+        <FontAwesomeIcon
+          :icon="iconDef"
+          class="size-2.5"
+          :class="iconClass"
+        />
+      </div>
+      <div
+        v-if="isIMSession && session.channel_type"
+        class="absolute -bottom-px -right-px flex items-center justify-center size-3 rounded-full bg-background border border-border"
+      >
+        <ChannelBadge
+          :platform="session.channel_type"
+          class="size-2"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col flex-1 min-w-0">
+      <div class="flex items-center">
+        <span class="truncate text-xs font-medium text-foreground leading-[18px] flex-1">
+          {{ session.title || t('chat.untitledSession') }}
+        </span>
+        <span
+          v-if="session.updated_at"
+          class="text-[8px] text-muted-foreground ml-1 shrink-0"
+        >
+          {{ formatTime(session.updated_at) }}
+        </span>
+      </div>
+      <div
+        v-if="subLabel"
+        class="text-[11px] font-medium text-muted-foreground truncate leading-[16.5px]"
+      >
+        {{ subLabel }}
+      </div>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { SessionSummary } from '@/composables/api/useChat'
+import { Avatar, AvatarImage, AvatarFallback } from '@memohai/ui'
+import ChannelBadge from '@/components/chat-list/channel-badge/index.vue'
+
+const props = defineProps<{
+  session: SessionSummary
+  isActive: boolean
+}>()
+
+defineEmits<{
+  select: [session: SessionSummary]
+}>()
+
+const { t } = useI18n()
+
+const WEB_CHANNELS = new Set(['web', ''])
+
+const isIMSession = computed(() => {
+  const ct = (props.session.channel_type ?? '').trim().toLowerCase()
+  return ct !== '' && !WEB_CHANNELS.has(ct)
+})
+
+const iconDef = computed<string[]>(() => {
+  switch (props.session.type) {
+    case 'heartbeat': return ['fas', 'heart-pulse']
+    case 'schedule': return ['fas', 'clock']
+    case 'subagent': return ['fas', 'code-branch']
+    default: return ['fas', 'message']
+  }
+})
+
+const iconClass = computed(() => {
+  switch (props.session.type) {
+    case 'heartbeat': return 'text-rose-400'
+    case 'schedule': return 'text-amber-400'
+    case 'subagent': return 'text-violet-400'
+    default: return 'text-muted-foreground'
+  }
+})
+
+function routeMeta(): Record<string, unknown> {
+  return props.session.route_metadata ?? {}
+}
+
+function isGroupConversation(): boolean {
+  const ct = (props.session.route_conversation_type ?? '').trim().toLowerCase()
+  return ct === 'group' || ct === 'supergroup' || ct === 'channel'
+}
+
+const avatarUrl = computed<string | null>(() => {
+  const meta = routeMeta()
+  if (isGroupConversation()) {
+    const convAvatar = (meta.conversation_avatar_url as string ?? '').trim()
+    if (convAvatar) return convAvatar
+  }
+  const url = (meta.sender_avatar_url as string ?? '').trim()
+  return url || null
+})
+
+const displayLabel = computed(() => {
+  const meta = routeMeta()
+  return (meta.conversation_name as string ?? '').trim()
+    || (meta.sender_display_name as string ?? '').trim()
+    || (meta.sender_username as string ?? '').trim()
+    || ''
+})
+
+const avatarFallback = computed(() => {
+  return displayLabel.value ? displayLabel.value.charAt(0).toUpperCase() : '?'
+})
+
+const subLabel = computed(() => {
+  if (props.session.type === 'heartbeat') return t('chat.sessionTypeHeartbeat')
+  if (props.session.type === 'schedule') return t('chat.sessionTypeSchedule')
+  if (props.session.type === 'subagent') return t('chat.sessionTypeSubagent')
+  if (!isIMSession.value) return ''
+  const meta = routeMeta()
+  if (isGroupConversation()) {
+    const handle = (meta.conversation_handle as string ?? '').trim()
+    if (handle) return handle.startsWith('@') ? handle : `@${handle}`
+    const name = (meta.conversation_name as string ?? '').trim()
+    if (name) return `@${name}`
+  }
+  const username = (meta.sender_username as string ?? '').trim()
+  if (username) return `@${username}`
+  const name = (meta.sender_display_name as string ?? '').trim()
+  if (name) return name
+  return ''
+})
+
+function formatTime(dateStr: string): string {
+  try {
+    const d = new Date(dateStr)
+    if (Number.isNaN(d.getTime())) return ''
+    const now = new Date()
+    const diff = now.getTime() - d.getTime()
+    const day = 86400000
+    if (diff < day) return d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+    if (diff < 7 * day) return d.toLocaleDateString(undefined, { weekday: 'short' })
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  } catch {
+    return ''
+  }
+}
+</script>
diff --git a/apps/web/src/pages/home/components/session-metadata.vue b/apps/web/src/pages/home/components/session-metadata.vue
new file mode 100644
index 00000000..4aec4f1f
--- /dev/null
+++ b/apps/web/src/pages/home/components/session-metadata.vue
@@ -0,0 +1,194 @@
+<template>
+  <div
+    class="flex flex-col h-full shrink-0 border-l border-border bg-sidebar transition-[width] duration-200"
+    :class="sidebarOpen ? 'w-[240px]' : 'w-10'"
+  >
+    <div class="h-12 flex items-center shrink-0 px-3">
+      <button
+        class="shrink-0"
+        @click="sidebarOpen = !sidebarOpen"
+      >
+        <img
+          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjUgOUMxNi41IDYuMTg3NyAxNi41IDQuNzgxNTUgMTUuNzgzOCAzLjc5NTgxQzE1LjU1MjUgMy40Nzc0NSAxNS4yNzI2IDMuMTk3NDggMTQuOTU0MiAyLjk2NjE5QzEzLjk2ODQgMi4yNSAxMi41NjIzIDIuMjUgOS43NSAyLjI1SDguMjVDNS40Mzc3IDIuMjUgNC4wMzE1NSAyLjI1IDMuMDQ1ODEgMi45NjYxOUMyLjcyNzQ1IDMuMTk3NDggMi40NDc0OCAzLjQ3NzQ1IDIuMjE2MTkgMy43OTU4MUMxLjUgNC43ODE1NSAxLjUgNi4xODc3IDEuNSA5QzEuNSAxMS44MTIzIDEuNSAxMy4yMTg0IDIuMjE2MTkgMTQuMjA0MkMyLjQ0NzQ4IDE0LjUyMjUgMi43Mjc0NSAxNC44MDI1IDMuMDQ1ODEgMTUuMDMzOEM0LjAzMTU1IDE1Ljc1IDUuNDM3NyAxNS43NSA4LjI1IDE1Ljc1SDkuNzVDMTIuNTYyMyAxNS43NSAxMy45Njg0IDE1Ljc1IDE0Ljk1NDIgMTUuMDMzOEMxNS4yNzI2IDE0LjgwMjUgMTUuNTUyNSAxNC41MjI1IDE1Ljc4MzggMTQuMjA0MkMxNi41IDEzLjIxODQgMTYuNSAxMS44MTIzIDE2LjUgOVoiIHN0cm9rZT0iIzBBMEEwQSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEwLjg3NSAyLjYyNUwxMC44NzUgMTUuMzc1IiBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNC4yNSA1LjI1SDEzLjEyNSIgc3Ryb2tlPSIjMEEwQTBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0xNC4yNSA4LjI1SDEzLjEyNSIgc3Ryb2tlPSIjMEEwQTBBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02IDcuNUw2LjkxOTkxIDguMjkyODlDNy4zMDY2MyA4LjYyNjIzIDcuNSA4Ljc5Mjg5IDcuNSA5QzcuNSA5LjIwNzExIDcuMzA2NjQgOS4zNzM3NyA2LjkxOTkxIDkuNzA3MTFMNiAxMC41IiBzdHJva2U9IiMwQTBBMEEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="
+          alt="toggle"
+          class="size-[18px] dark:invert"
+        >
+      </button>
+      <h3
+        v-if="sidebarOpen"
+        class="font-medium text-xs ml-2"
+      >
+        Session 源数据
+      </h3>
+    </div>
+    <Separator />
+
+    <template v-if="sidebarOpen">
+      <ScrollArea class="flex-1">
+        <form
+          class="p-3 **:[label]:text-xs **:[label]:uppercase **:[label]:text-muted-foreground **:[label]:tracking-wide"
+        >
+          <section class="flex flex-col gap-6">
+            <FormField
+              v-slot="{ componentField }"
+              name="bot"
+            >
+              <FormItem>
+                <FormLabel>Bot</FormLabel>
+                <FormControl>
+                  <InputGroup>
+                    <InputGroupInput v-bind="componentField" />
+                    <InputGroupAddon>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'wand-magic-sparkles']"
+                        class="size-3.5 text-muted-foreground"
+                      />
+                    </InputGroupAddon>
+                  </InputGroup>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            </FormField>
+
+            <FormField
+              v-slot="{ componentField }"
+              name="skills"
+            >
+              <FormItem>
+                <FormLabel>Top Skills</FormLabel>
+                <FormControl>
+                  <InputGroup>
+                    <InputGroupInput v-bind="componentField" />
+                    <InputGroupAddon>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'circle']"
+                        class="size-1.5 text-muted-foreground"
+                      />
+                    </InputGroupAddon>
+                  </InputGroup>
+                  <InputGroup>
+                    <InputGroupInput v-bind="componentField" />
+                    <InputGroupAddon>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'circle']"
+                        class="size-1.5 text-muted-foreground"
+                      />
+                    </InputGroupAddon>
+                  </InputGroup>
+                  <InputGroup>
+                    <InputGroupInput v-bind="componentField" />
+                    <InputGroupAddon>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'circle']"
+                        class="size-1.5 text-muted-foreground"
+                      />
+                    </InputGroupAddon>
+                  </InputGroup>
+                </FormControl>
+                <p class="text-xs text-muted-foreground mt-4">
+                  <FontAwesomeIcon
+                    :icon="['fas', 'sliders']"
+                    class="size-3 mr-1"
+                  />
+                  管理全部 Skills(5)
+                </p>
+              </FormItem>
+            </FormField>
+
+            <section>
+              <h5 class="text-xs text-muted-foreground mb-2 uppercase tracking-wide">
+                用量统计
+              </h5>
+              <Card class="p-4!">
+                <CardContent class="p-0 flex flex-col gap-3 text-xs text-muted-foreground">
+                  <div class="flex justify-between">
+                    <span>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'arrow-up']"
+                        class="size-2.5 mr-1"
+                      />输入Token
+                    </span>
+                    <data>4,281</data>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'arrow-down']"
+                        class="size-2.5 mr-1"
+                      />输出Token
+                    </span>
+                    <data>2,104</data>
+                  </div>
+                  <div class="flex justify-between">
+                    <span>
+                      <FontAwesomeIcon
+                        :icon="['fas', 'coins']"
+                        class="size-2.5 mr-1"
+                      />总成本
+                    </span>
+                    <data>$12.00</data>
+                  </div>
+                </CardContent>
+              </Card>
+            </section>
+
+            <Separator />
+
+            <section class="flex flex-col items-start gap-1">
+              <Button
+                variant="link"
+                class="text-muted-foreground text-xs p-0! h-auto"
+              >
+                <FontAwesomeIcon
+                  :icon="['fas', 'book']"
+                  class="size-3 mr-1"
+                />
+                帮助文档
+              </Button>
+              <Button
+                variant="link"
+                class="text-destructive text-xs p-0! h-auto"
+              >
+                <FontAwesomeIcon
+                  :icon="['fas', 'trash']"
+                  class="size-3 mr-1"
+                />
+                删除 Session
+              </Button>
+            </section>
+          </section>
+        </form>
+      </ScrollArea>
+    </template>
+
+    <template v-else>
+      <div
+        class="flex-1 flex justify-center pt-4"
+        style="writing-mode: sideways-rl"
+      >
+        <span class="text-xs text-muted-foreground">
+          Session 源数据
+        </span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  ScrollArea,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  Card,
+  CardContent,
+  Button,
+} from '@memohai/ui'
+const sidebarOpen = ref(true)
+</script>
diff --git a/apps/web/src/pages/home/components/session-sidebar.vue b/apps/web/src/pages/home/components/session-sidebar.vue
new file mode 100644
index 00000000..99cd227d
--- /dev/null
+++ b/apps/web/src/pages/home/components/session-sidebar.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="flex flex-col h-full w-[223px] shrink-0 bg-sidebar border-r border-border">
+    <!-- <div class="h-[53px] flex items-center px-2 shrink-0">
+      <FontAwesomeIcon
+        :icon="['fas', 'comment-dots']"
+        class="size-6 text-foreground ml-1.5"
+      />
+      <span class="text-xs font-semibold text-foreground ml-2 flex-1">
+        {{ t('sidebar.chat') }}
+      </span>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="ghost"
+            size="icon"
+            class="size-6 text-muted-foreground hover:text-foreground"
+          >
+            <FontAwesomeIcon
+              :icon="['fas', 'ellipsis']"
+              class="size-4"
+            />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem @click="handleNewSession">
+            <FontAwesomeIcon
+              :icon="['fas', 'plus']"
+              class="size-3 mr-2"
+            />
+            {{ t('chat.newSession') }}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div> -->
+
+    <div class="p-2 shrink-0">
+      <InputGroup class="h-[30px]">
+        <InputGroupAddon class="pl-2.5">
+          <FontAwesomeIcon
+            :icon="['fas', 'magnifying-glass']"
+            class="size-[11px] text-muted-foreground"
+          />
+        </InputGroupAddon>
+        <InputGroupInput
+          v-model="searchQuery"
+          :placeholder="t('chat.searchSessionPlaceholder')"
+          class="text-xs h-[30px]"
+        />
+      </InputGroup>
+    </div>
+
+    <div class="px-1.5 shrink-0">
+      <Button
+        variant="ghost"
+        class="w-full h-12 justify-start gap-4.5 text-xs font-medium"
+        :disabled="!currentBotId"
+        @click="handleNewSession"
+      >
+        <FontAwesomeIcon
+          :icon="['fas', 'plus']"
+          class="size-3"
+        />
+        {{ t('chat.newSession') }}
+      </Button>
+    </div>
+
+    <div class="px-3.5 h-[38px] flex items-center shrink-0">
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <button class="flex items-center gap-1">
+            <FontAwesomeIcon
+              :icon="['fas', 'browser']"
+              class="size-2.5 text-muted-foreground"
+            />
+            <span class="text-[10px] font-medium text-muted-foreground uppercase tracking-[0.7px]">
+              {{ t('chat.sessionSourcePrefix') }}{{ filterLabel }}
+            </span>
+            <FontAwesomeIcon
+              :icon="['fas', 'chevron-down']"
+              class="size-2.5 text-muted-foreground"
+            />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem
+            v-for="opt in filterOptions"
+            :key="opt.value ?? 'all'"
+            @click="filterType = opt.value"
+          >
+            <FontAwesomeIcon
+              v-if="filterType === opt.value"
+              :icon="['fas', 'check']"
+              class="size-3 mr-2"
+            />
+            <span :class="filterType !== opt.value ? 'ml-5' : ''">
+              {{ opt.label }}
+            </span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+
+    <ScrollArea class="flex-1">
+      <div class="flex flex-col gap-1 px-1.5 overflow-hidden">
+        <SessionItem
+          v-for="session in filteredSessions"
+          :key="session.id"
+          :session="session"
+          :is-active="sessionId === session.id"
+          @select="handleSelect"
+        />
+      </div>
+
+      <div
+        v-if="currentBotId && !loadingChats && filteredSessions.length === 0"
+        class="px-3 py-6 text-center text-xs text-muted-foreground"
+      >
+        {{ t('chat.noSessions') }}
+      </div>
+
+      <div
+        v-if="loadingChats"
+        class="flex justify-center py-4"
+      >
+        <FontAwesomeIcon
+          :icon="['fas', 'spinner']"
+          class="size-4 animate-spin text-muted-foreground"
+        />
+      </div>
+    </ScrollArea>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useChatStore } from '@/store/chat-list'
+import type { SessionSummary } from '@/composables/api/useChat'
+import {
+  Button,
+  ScrollArea,
+  InputGroup,
+  InputGroupInput,
+  InputGroupAddon,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '@memohai/ui'
+import SessionItem from './session-item.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const chatStore = useChatStore()
+const { sessions, sessionId, currentBotId, loadingChats } = storeToRefs(chatStore)
+
+const searchQuery = ref('')
+const filterType = ref<string>('chat')
+
+const filterOptions = computed(() => [
+  { value: 'chat', label: t('chat.sessionTypeChat') },
+  { value: 'heartbeat', label: t('chat.sessionTypeHeartbeat') },
+  { value: 'schedule', label: t('chat.sessionTypeSchedule') },
+  { value: 'subagent', label: t('chat.sessionTypeSubagent') },
+])
+
+const filterLabel = computed(() => {
+  const opt = filterOptions.value.find(o => o.value === filterType.value)
+  return opt?.label ?? t('chat.sessionTypeChat')
+})
+
+const filteredSessions = computed(() => {
+  let list = sessions.value
+  list = list.filter(s => s.type === filterType.value)
+  const q = searchQuery.value.trim().toLowerCase()
+  if (q) {
+    list = list.filter(s =>
+      (s.title ?? '').toLowerCase().includes(q)
+      || (s.id ?? '').toLowerCase().includes(q),
+    )
+  }
+  return list
+})
+
+function handleSelect(session: SessionSummary) {
+  chatStore.selectSession(session.id)
+  if (currentBotId.value) {
+    router.replace({
+      name: 'chat',
+      params: {
+        botId: currentBotId.value,
+        sessionId: session.id,
+      },
+    })
+  }
+}
+
+function handleNewSession() {
+  chatStore.createNewSession()
+}
+</script>
diff --git a/apps/web/src/pages/chat/components/thinking-block.vue b/apps/web/src/pages/home/components/thinking-block.vue
similarity index 90%
rename from apps/web/src/pages/chat/components/thinking-block.vue
rename to apps/web/src/pages/home/components/thinking-block.vue
index 9b8a6a8c..5f4ba4af 100644
--- a/apps/web/src/pages/chat/components/thinking-block.vue
+++ b/apps/web/src/pages/home/components/thinking-block.vue
@@ -1,6 +1,6 @@
 <template>
   <Collapsible v-model:open="isOpen">
-    <CollapsibleTrigger class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer group">
+    <CollapsibleTrigger class="flex items-center gap-2 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer group">
       <FontAwesomeIcon
         :icon="['fas', 'chevron-right']"
         class="size-3 transition-transform"
@@ -20,7 +20,7 @@
       </span>
     </CollapsibleTrigger>
     <CollapsibleContent>
-      <div class="mt-2 ml-5 pl-3 border-l-2 border-muted text-sm text-muted-foreground">
+      <div class="mt-2 ml-5 pl-3 border-l-2 border-muted text-xs text-muted-foreground">
         <div
           class="whitespace-pre-wrap leading-relaxed"
           v-text="block.content"
diff --git a/apps/web/src/pages/chat/components/tool-call-block.vue b/apps/web/src/pages/home/components/tool-call-block.vue
similarity index 100%
rename from apps/web/src/pages/chat/components/tool-call-block.vue
rename to apps/web/src/pages/home/components/tool-call-block.vue
diff --git a/apps/web/src/pages/chat/components/tool-call-browser.vue b/apps/web/src/pages/home/components/tool-call-browser.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-browser.vue
rename to apps/web/src/pages/home/components/tool-call-browser.vue
index 30fba9b7..b6daec39 100644
--- a/apps/web/src/pages/chat/components/tool-call-browser.vue
+++ b/apps/web/src/pages/home/components/tool-call-browser.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-contacts.vue b/apps/web/src/pages/home/components/tool-call-contacts.vue
similarity index 97%
rename from apps/web/src/pages/chat/components/tool-call-contacts.vue
rename to apps/web/src/pages/home/components/tool-call-contacts.vue
index b694073f..03e46ec9 100644
--- a/apps/web/src/pages/chat/components/tool-call-contacts.vue
+++ b/apps/web/src/pages/home/components/tool-call-contacts.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-edit.vue b/apps/web/src/pages/home/components/tool-call-edit.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-edit.vue
rename to apps/web/src/pages/home/components/tool-call-edit.vue
index 853e4e69..0b614b8b 100644
--- a/apps/web/src/pages/chat/components/tool-call-edit.vue
+++ b/apps/web/src/pages/home/components/tool-call-edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-email.vue b/apps/web/src/pages/home/components/tool-call-email.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-email.vue
rename to apps/web/src/pages/home/components/tool-call-email.vue
index f278e1d7..14ae3daf 100644
--- a/apps/web/src/pages/chat/components/tool-call-email.vue
+++ b/apps/web/src/pages/home/components/tool-call-email.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-exec.vue b/apps/web/src/pages/home/components/tool-call-exec.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-exec.vue
rename to apps/web/src/pages/home/components/tool-call-exec.vue
index 4f4cb837..bd9cd7d2 100644
--- a/apps/web/src/pages/chat/components/tool-call-exec.vue
+++ b/apps/web/src/pages/home/components/tool-call-exec.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-generic.vue b/apps/web/src/pages/home/components/tool-call-generic.vue
similarity index 97%
rename from apps/web/src/pages/chat/components/tool-call-generic.vue
rename to apps/web/src/pages/home/components/tool-call-generic.vue
index ed751adb..d702d4d3 100644
--- a/apps/web/src/pages/chat/components/tool-call-generic.vue
+++ b/apps/web/src/pages/home/components/tool-call-generic.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-list.vue b/apps/web/src/pages/home/components/tool-call-list.vue
similarity index 96%
rename from apps/web/src/pages/chat/components/tool-call-list.vue
rename to apps/web/src/pages/home/components/tool-call-list.vue
index a0789488..5ae113b4 100644
--- a/apps/web/src/pages/chat/components/tool-call-list.vue
+++ b/apps/web/src/pages/home/components/tool-call-list.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-memory.vue b/apps/web/src/pages/home/components/tool-call-memory.vue
similarity index 97%
rename from apps/web/src/pages/chat/components/tool-call-memory.vue
rename to apps/web/src/pages/home/components/tool-call-memory.vue
index 28dca197..926c1a8d 100644
--- a/apps/web/src/pages/chat/components/tool-call-memory.vue
+++ b/apps/web/src/pages/home/components/tool-call-memory.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-message.vue b/apps/web/src/pages/home/components/tool-call-message.vue
similarity index 97%
rename from apps/web/src/pages/chat/components/tool-call-message.vue
rename to apps/web/src/pages/home/components/tool-call-message.vue
index 21cb6d49..f60965f7 100644
--- a/apps/web/src/pages/chat/components/tool-call-message.vue
+++ b/apps/web/src/pages/home/components/tool-call-message.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
@@ -42,7 +42,7 @@
         />
         <span
           v-if="emoji"
-          class="text-sm"
+          class="text-xs"
         >
           {{ emoji }}
         </span>
diff --git a/apps/web/src/pages/chat/components/tool-call-read.vue b/apps/web/src/pages/home/components/tool-call-read.vue
similarity index 96%
rename from apps/web/src/pages/chat/components/tool-call-read.vue
rename to apps/web/src/pages/home/components/tool-call-read.vue
index 36fcce35..7677b525 100644
--- a/apps/web/src/pages/chat/components/tool-call-read.vue
+++ b/apps/web/src/pages/home/components/tool-call-read.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-schedule.vue b/apps/web/src/pages/home/components/tool-call-schedule.vue
similarity index 97%
rename from apps/web/src/pages/chat/components/tool-call-schedule.vue
rename to apps/web/src/pages/home/components/tool-call-schedule.vue
index 9fb620d1..779fd936 100644
--- a/apps/web/src/pages/chat/components/tool-call-schedule.vue
+++ b/apps/web/src/pages/home/components/tool-call-schedule.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-skill.vue b/apps/web/src/pages/home/components/tool-call-skill.vue
similarity index 95%
rename from apps/web/src/pages/chat/components/tool-call-skill.vue
rename to apps/web/src/pages/home/components/tool-call-skill.vue
index 08854265..677e3bd7 100644
--- a/apps/web/src/pages/chat/components/tool-call-skill.vue
+++ b/apps/web/src/pages/home/components/tool-call-skill.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-subagent.vue b/apps/web/src/pages/home/components/tool-call-subagent.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-subagent.vue
rename to apps/web/src/pages/home/components/tool-call-subagent.vue
index 504dc447..126a14e5 100644
--- a/apps/web/src/pages/chat/components/tool-call-subagent.vue
+++ b/apps/web/src/pages/home/components/tool-call-subagent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-web-fetch.vue b/apps/web/src/pages/home/components/tool-call-web-fetch.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-web-fetch.vue
rename to apps/web/src/pages/home/components/tool-call-web-fetch.vue
index 1b5bd679..eab17c16 100644
--- a/apps/web/src/pages/chat/components/tool-call-web-fetch.vue
+++ b/apps/web/src/pages/home/components/tool-call-web-fetch.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-web-search.vue b/apps/web/src/pages/home/components/tool-call-web-search.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-web-search.vue
rename to apps/web/src/pages/home/components/tool-call-web-search.vue
index bce66641..6858573f 100644
--- a/apps/web/src/pages/chat/components/tool-call-web-search.vue
+++ b/apps/web/src/pages/home/components/tool-call-web-search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/components/tool-call-write.vue b/apps/web/src/pages/home/components/tool-call-write.vue
similarity index 98%
rename from apps/web/src/pages/chat/components/tool-call-write.vue
rename to apps/web/src/pages/home/components/tool-call-write.vue
index 94124933..d4ea6250 100644
--- a/apps/web/src/pages/chat/components/tool-call-write.vue
+++ b/apps/web/src/pages/home/components/tool-call-write.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg border bg-muted/30 text-sm overflow-hidden">
+  <div class="rounded-lg border bg-muted/30 text-xs overflow-hidden">
     <div class="flex items-center gap-2 px-3 py-2 bg-muted/50">
       <FontAwesomeIcon
         :icon="['fas', block.done ? 'check' : 'spinner']"
diff --git a/apps/web/src/pages/chat/composables/useFileManagerProvider.ts b/apps/web/src/pages/home/composables/useFileManagerProvider.ts
similarity index 100%
rename from apps/web/src/pages/chat/composables/useFileManagerProvider.ts
rename to apps/web/src/pages/home/composables/useFileManagerProvider.ts
diff --git a/apps/web/src/pages/chat/composables/useMediaGallery.ts b/apps/web/src/pages/home/composables/useMediaGallery.ts
similarity index 100%
rename from apps/web/src/pages/chat/composables/useMediaGallery.ts
rename to apps/web/src/pages/home/composables/useMediaGallery.ts
diff --git a/apps/web/src/pages/home/index.vue b/apps/web/src/pages/home/index.vue
index 8dad412c..1b5c3581 100644
--- a/apps/web/src/pages/home/index.vue
+++ b/apps/web/src/pages/home/index.vue
@@ -1,5 +1,80 @@
 <template>
-  <section class="p-4">
-    <h1>{{ $t('home.title') }}</h1>
-  </section>
-</template>
\ No newline at end of file
+  <div class="flex h-full">
+    <template v-if="currentBotId">
+      <SessionSidebar />
+      <div class="flex-1 flex flex-col min-w-0">
+        <ChatArea />
+      </div>
+      <!-- <SessionMetadata /> -->
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'vue-router'
+import { useChatStore } from '@/store/chat-list'
+import SessionSidebar from './components/session-sidebar.vue'
+// import SessionMetadata from './components/session-metadata.vue'
+import ChatArea from './components/chat-area.vue'
+
+const route = useRoute()
+const router = useRouter()
+const chatStore = useChatStore()
+const { currentBotId, sessionId } = storeToRefs(chatStore)
+
+const urlBotId = ((route.params.botId as string) ?? '').trim()
+const urlSessionId = ((route.params.sessionId as string) ?? '').trim()
+
+if (urlBotId) {
+  chatStore.selectBot(urlBotId)
+  if (urlSessionId) {
+    sessionId.value = urlSessionId
+  }
+}
+
+let suppressUrlSync = false
+
+watch([currentBotId, sessionId], ([newBotId, newSessionId]) => {
+  if (suppressUrlSync) return
+  const urlBot = ((route.params.botId as string) ?? '').trim()
+  const urlSession = ((route.params.sessionId as string) ?? '').trim()
+  const storeBot = (newBotId ?? '').trim()
+  const storeSession = (newSessionId ?? '').trim()
+  if (storeBot === urlBot && storeSession === urlSession) return
+  if (storeBot) {
+    router.replace({
+      name: 'chat',
+      params: {
+        botId: storeBot,
+        sessionId: storeSession || undefined,
+      },
+    })
+  } else if (route.name !== 'home') {
+    router.replace({ name: 'home' })
+  }
+})
+
+watch(
+  () => [route.params.botId, route.params.sessionId],
+  async ([paramBotId, paramSessionId]) => {
+    const urlBot = ((paramBotId as string) ?? '').trim()
+    const urlSession = ((paramSessionId as string) ?? '').trim()
+    const storeBot = (currentBotId.value ?? '').trim()
+    const storeSession = (sessionId.value ?? '').trim()
+
+    suppressUrlSync = true
+    try {
+      if (urlBot && urlBot !== storeBot) {
+        await chatStore.selectBot(urlBot)
+      }
+      if (urlSession && urlSession !== storeSession) {
+        await chatStore.selectSession(urlSession)
+      }
+    } finally {
+      suppressUrlSync = false
+    }
+  },
+)
+</script>
diff --git a/apps/web/src/pages/login/index.vue b/apps/web/src/pages/login/index.vue
index 1bb373e6..fd03c232 100644
--- a/apps/web/src/pages/login/index.vue
+++ b/apps/web/src/pages/login/index.vue
@@ -99,7 +99,7 @@
             <div class="flex">
               <a
                 href="#"
-                class="ml-auto inline-block text-sm underline mt-2"
+                class="ml-auto inline-block text-xs underline mt-2"
               >
                 {{ $t('auth.forgotPassword') }}
               </a>
@@ -192,7 +192,7 @@ const login = form.handleSubmit(async (values) => {
     } else {
       throw new Error(t('auth.loginFailed'))
     }
-    router.replace({ path: '/chat' })
+    router.replace({ path: '/' })
   } catch {
     toast.error(t('auth.invalidCredentials'), {
       description: t('auth.retryHint'),
diff --git a/apps/web/src/pages/memory-providers/components/provider-setting.vue b/apps/web/src/pages/memory-providers/components/provider-setting.vue
index 02965fc8..9a1c354d 100644
--- a/apps/web/src/pages/memory-providers/components/provider-setting.vue
+++ b/apps/web/src/pages/memory-providers/components/provider-setting.vue
@@ -5,10 +5,10 @@
   >
     <div class="flex items-center justify-between">
       <div>
-        <h3 class="text-lg font-semibold">
+        <h3 class="text-sm font-semibold">
           {{ curProvider.name }}
         </h3>
-        <p class="text-sm text-muted-foreground mt-0.5">
+        <p class="text-xs text-muted-foreground mt-0.5">
           {{ $t(`memoryProvider.providerNames.${curProvider.provider}`, curProvider.provider) }}
         </p>
       </div>
@@ -58,7 +58,7 @@
             />
             <button
               type="button"
-              class="relative z-10 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200"
+              class="relative z-10 rounded-lg px-4 py-2 text-xs font-medium transition-colors duration-200"
               :class="builtinModeButtonClass('off')"
               @click="handleBuiltinModeChange('off')"
             >
@@ -66,7 +66,7 @@
             </button>
             <button
               type="button"
-              class="relative z-10 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200"
+              class="relative z-10 rounded-lg px-4 py-2 text-xs font-medium transition-colors duration-200"
               :class="builtinModeButtonClass('sparse')"
               @click="handleBuiltinModeChange('sparse')"
             >
@@ -74,7 +74,7 @@
             </button>
             <button
               type="button"
-              class="relative z-10 rounded-lg px-4 py-2 text-sm font-medium transition-colors duration-200"
+              class="relative z-10 rounded-lg px-4 py-2 text-xs font-medium transition-colors duration-200"
               :class="builtinModeButtonClass('dense')"
               @click="handleBuiltinModeChange('dense')"
             >
@@ -88,10 +88,10 @@
         v-if="builtinMode === 'off'"
         class="rounded-lg border border-border bg-card p-4 space-y-2"
       >
-        <h4 class="text-sm font-medium">
+        <h4 class="text-xs font-medium">
           {{ $t('memoryProvider.modeNames.off') }}
         </h4>
-        <p class="text-sm text-muted-foreground">
+        <p class="text-xs text-muted-foreground">
           {{ $t('memoryProvider.modeDescriptions.off') }}
         </p>
       </div>
@@ -101,15 +101,15 @@
         class="rounded-lg border border-border bg-card p-4 space-y-4"
       >
         <div class="space-y-1">
-          <h4 class="text-sm font-medium">
+          <h4 class="text-xs font-medium">
             {{ $t('memoryProvider.sparseSectionTitle') }}
           </h4>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('memoryProvider.modeDescriptions.sparse') }}
           </p>
         </div>
 
-        <div class="rounded-md border border-border bg-background px-3 py-2 text-sm text-muted-foreground">
+        <div class="rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
           {{ $t('memoryProvider.sparseInstallHint') }}
         </div>
       </div>
@@ -119,10 +119,10 @@
         class="rounded-lg border border-border bg-card p-4 space-y-4"
       >
         <div class="space-y-1">
-          <h4 class="text-sm font-medium">
+          <h4 class="text-xs font-medium">
             {{ $t('memoryProvider.denseSectionTitle') }}
           </h4>
-          <p class="text-sm text-muted-foreground">
+          <p class="text-xs text-muted-foreground">
             {{ $t('memoryProvider.modeDescriptions.dense') }}
           </p>
         </div>
@@ -141,7 +141,7 @@
           />
         </div>
 
-        <div class="rounded-md border border-border bg-background px-3 py-2 text-sm text-muted-foreground">
+        <div class="rounded-md border border-border bg-background px-3 py-2 text-xs text-muted-foreground">
           {{ $t('memoryProvider.denseQdrantHint') }}
         </div>
       </div>
@@ -156,7 +156,7 @@
           class="rounded-lg border border-border bg-background/70 p-4 space-y-2"
         >
           <div class="flex items-center justify-between gap-3">
-            <p class="text-sm font-medium text-foreground break-all">
+            <p class="text-xs font-medium text-foreground break-all">
               {{ collection.name }}
             </p>
             <span
diff --git a/apps/web/src/pages/memory-providers/index.vue b/apps/web/src/pages/memory-providers/index.vue
index 97e427f2..80ec7eeb 100644
--- a/apps/web/src/pages/memory-providers/index.vue
+++ b/apps/web/src/pages/memory-providers/index.vue
@@ -6,7 +6,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   Toggle,
   Empty,
   EmptyContent,
@@ -37,14 +36,9 @@ const selectProvider = (value: string) => computed(() => {
   return curProvider.value?.name === value
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const curFilterProvider = computed(() => {
   if (!Array.isArray(providerData.value)) return []
-  if (!searchText.value) return providerData.value
-  const keyword = searchText.value.toLowerCase()
-  return providerData.value.filter((p) => p.name.toLowerCase().includes(keyword))
+  return providerData.value
 })
 
 watch(curFilterProvider, () => {
@@ -60,26 +54,6 @@ const openStatus = reactive({ addOpen: false })
 
 <template>
   <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('memoryProvider.searchPlaceholder')"
-          aria-label="Search memory providers"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search memory providers"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template #sidebar-content>
       <SidebarMenu
         v-for="item in curFilterProvider"
diff --git a/apps/web/src/pages/models/components/provider-form.vue b/apps/web/src/pages/models/components/provider-form.vue
index c19b9cc0..12901301 100644
--- a/apps/web/src/pages/models/components/provider-form.vue
+++ b/apps/web/src/pages/models/components/provider-form.vue
@@ -1,37 +1,13 @@
 <template>
   <form @submit="editProvider">
     <div class="space-y-4">
-      <FormField
-        v-slot="{ value, handleChange }"
-        name="enable"
-      >
-        <FormItem class="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <div class="space-y-0.5">
-            <Label class="text-base">
-              {{ $t('provider.enable') }}
-            </Label>
-            <p class="text-[0.8rem] text-muted-foreground">
-              {{ $t('provider.enableHint') }}
-            </p>
-          </div>
-          <FormControl>
-            <Switch
-              :model-value="value"
-              @update:model-value="handleChange"
-            />
-          </FormControl>
-        </FormItem>
-      </FormField>
-
       <section class="space-y-2">
-        <h4 class="scroll-m-20 font-semibold tracking-tight">
-          {{ $t('common.name') }}
-        </h4>
         <FormField
           v-slot="{ componentField }"
           name="name"
         >
           <FormItem>
+            <FormLabel>{{ $t('common.name') }}</FormLabel>
             <FormControl>
               <Input
                 type="text"
@@ -48,14 +24,12 @@
         v-if="form.values.client_type !== 'openai-codex'"
         class="space-y-2"
       >
-        <h4 class="scroll-m-20 font-semibold tracking-tight">
-          {{ $t('provider.apiKey') }}
-        </h4>
         <FormField
           v-slot="{ componentField }"
           name="api_key"
         >
           <FormItem>
+            <FormLabel>{{ $t('provider.apiKey') }}</FormLabel>
             <FormControl>
               <Input
                 type="password"
@@ -69,14 +43,12 @@
       </section>
 
       <section class="space-y-2">
-        <h4 class="scroll-m-20 font-semibold tracking-tight">
-          {{ $t('provider.url') }}
-        </h4>
         <FormField
           v-slot="{ componentField }"
           name="base_url"
         >
           <FormItem>
+            <FormLabel>{{ $t('provider.url') }}</FormLabel>
             <FormControl>
               <Input
                 type="text"
@@ -90,14 +62,12 @@
       </section>
 
       <section class="space-y-2">
-        <h4 class="scroll-m-20 font-semibold tracking-tight">
-          {{ $t('provider.clientType') }}
-        </h4>
         <FormField
           v-slot="{ value, handleChange }"
           name="client_type"
         >
           <FormItem>
+            <FormLabel>{{ $t('provider.clientType') }}</FormLabel>
             <FormControl>
               <SearchableSelectPopover
                 :model-value="value"
@@ -112,7 +82,7 @@
 
       <section
         v-if="form.values.client_type === 'openai-codex'"
-        class="rounded-lg border p-4 space-y-3 text-sm"
+        class="rounded-lg border p-4 space-y-3 text-xs"
       >
         <div class="space-y-1">
           <div class="font-medium">
@@ -216,7 +186,7 @@
 
     <section
       v-if="testResult"
-      class="mt-4 rounded-lg border p-4 space-y-3 text-sm"
+      class="mt-4 rounded-lg border p-4 space-y-3 text-xs"
     >
       <div class="flex items-center gap-2">
         <StatusDot :status="testResult.reachable ? 'success' : 'error'" />
@@ -254,9 +224,8 @@ import {
   Button,
   FormControl,
   FormField,
+  FormLabel,
   FormItem,
-  Label,
-  Switch,
 } from '@memohai/ui'
 import ConfirmPopover from '@/components/confirm-popover/index.vue'
 import StatusDot from '@/components/status-dot/index.vue'
diff --git a/apps/web/src/pages/models/index.vue b/apps/web/src/pages/models/index.vue
index d4759eff..7d38b75b 100644
--- a/apps/web/src/pages/models/index.vue
+++ b/apps/web/src/pages/models/index.vue
@@ -4,7 +4,6 @@ import modelSetting from './model-setting.vue'
 import { useQuery } from '@pinia/colada'
 import {
   ScrollArea,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
@@ -42,21 +41,14 @@ const curProvider = ref<ProvidersGetResponse>()
 provide('curProvider', curProvider)
 
 const selectProvider = (value: string) => computed(() => {
-  return curProvider.value?.name === value
+  return curProvider.value?.id === value
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const curFilterProvider = computed(() => {
   if (!Array.isArray(providerData.value)) {
     return []
   }
   let list = providerData.value as ProvidersGetResponse[]
-  if (searchText.value) {
-    const keyword = searchText.value.toLowerCase()
-    list = list.filter((p) => (p.name ?? '').toLowerCase().includes(keyword))
-  }
   return [...list].sort((a, b) => {
     const ae = a.enable !== false ? 1 : 0
     const be = b.enable !== false ? 1 : 0
@@ -64,12 +56,20 @@ const curFilterProvider = computed(() => {
   })
 })
 
-watch(curFilterProvider, () => {
-  if (curFilterProvider.value.length > 0) {
-    curProvider.value = curFilterProvider.value[0]
-  } else {
+watch(curFilterProvider, (providers) => {
+  if (providers.length === 0) {
     curProvider.value = { id: '' }
+    return
   }
+  const currentId = curProvider.value?.id
+  if (currentId) {
+    const stillExists = providers.find((p) => p.id === currentId)
+    if (stillExists) {
+      curProvider.value = stillExists
+      return
+    }
+  }
+  curProvider.value = providers[0]
 }, {
   immediate: true
 })
@@ -82,28 +82,6 @@ const openStatus = reactive({
 
 <template>
   <MasterDetailSidebarLayout class="[&_td:last-child]:w-45">
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('models.searchPlaceholder')"
-          aria-label="Search models"
-        />
-        <InputGroupAddon
-          align="inline-end"
-        >
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search models"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template
       #sidebar-content
     >
@@ -119,9 +97,9 @@ const openStatus = reactive({
             <Toggle
               :class="[
                 'py-4 border',
-                curProvider?.name === providerItem.name ? 'border-border' : 'border-transparent',
+                curProvider?.id === providerItem.id ? 'border-border' : 'border-transparent',
               ]"
-              :model-value="selectProvider(providerItem.name ?? '').value"
+              :model-value="selectProvider(providerItem.id ?? '').value"
               @update:model-value="(isSelect) => {
                 if (isSelect) {
                   curProvider = providerItem
diff --git a/apps/web/src/pages/models/model-setting.vue b/apps/web/src/pages/models/model-setting.vue
index 5b5411cd..cbcf050b 100644
--- a/apps/web/src/pages/models/model-setting.vue
+++ b/apps/web/src/pages/models/model-setting.vue
@@ -9,14 +9,24 @@
         />
         <span
           v-else
-          class="text-sm font-medium text-muted-foreground"
+          class="text-xs font-medium text-muted-foreground"
         >
           {{ getInitials(curProvider?.name) }}
         </span>
       </span>
-      <h4 class="scroll-m-20 tracking-tight">
+      <h4 class="scroll-m-20 tracking-tight min-w-0 truncate">
         {{ curProvider?.name }}
       </h4>
+      <div class="ml-auto flex items-center gap-2">
+        <span class="text-xs text-muted-foreground">
+          {{ $t('provider.enable') }}
+        </span>
+        <Switch
+          :model-value="curProvider?.enable ?? true"
+          :disabled="!curProvider?.id || enableLoading"
+          @update:model-value="handleToggleEnable"
+        />
+      </div>
     </section>
     <Separator class="mt-4 mb-6" />
 
@@ -41,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { Separator } from '@memohai/ui'
+import { Separator, Switch } from '@memohai/ui'
 import ProviderIcon from '@/components/provider-icon/index.vue'
 
 function getInitials(name: string | undefined) {
@@ -54,6 +64,8 @@ import { computed, inject, provide, reactive, ref, toRef, watch } from 'vue'
 import { useQuery, useMutation, useQueryCache } from '@pinia/colada'
 import { putProvidersById, deleteProvidersById, getProvidersByIdModels, deleteModelsById } from '@memohai/sdk'
 import type { ModelsGetResponse, ProvidersGetResponse, ProvidersUpdateRequest } from '@memohai/sdk'
+import { useI18n } from 'vue-i18n'
+import { toast } from 'vue-sonner'
 
 // ---- Model 编辑状态（provide 给 CreateModel） ----
 const openModel = reactive<{
@@ -79,6 +91,8 @@ function handleEditModel(model: ModelsGetResponse) {
 // ---- 当前 Provider ----
 const curProvider = inject('curProvider', ref<ProvidersGetResponse>())
 const curProviderId = computed(() => curProvider.value?.id)
+const enableLoading = ref(false)
+const { t } = useI18n()
 
 // ---- API Hooks ----
 const queryCache = useQueryCache()
@@ -104,6 +118,34 @@ const { mutate: changeProvider, isLoading: editLoading } = useMutation({
   onSettled: () => queryCache.invalidateQueries({ key: ['providers'] }),
 })
 
+async function handleToggleEnable(value: boolean) {
+  if (!curProviderId.value || !curProvider.value) return
+
+  const prev = curProvider.value.enable ?? true
+  curProvider.value = {
+    ...curProvider.value,
+    enable: value,
+  }
+
+  enableLoading.value = true
+  try {
+    await putProvidersById({
+      path: { id: curProviderId.value },
+      body: { enable: value },
+      throwOnError: true,
+    })
+    queryCache.invalidateQueries({ key: ['providers'] })
+  } catch {
+    curProvider.value = {
+      ...curProvider.value,
+      enable: prev,
+    }
+    toast.error(t('common.saveFailed'))
+  } finally {
+    enableLoading.value = false
+  }
+}
+
 const { mutate: deleteModel, isLoading: deleteModelLoading } = useMutation({
   mutation: async (modelID: string) => {
     if (!modelID) return
diff --git a/apps/web/src/pages/oauth/mcp-callback.vue b/apps/web/src/pages/oauth/mcp-callback.vue
index abd31360..152fbb38 100644
--- a/apps/web/src/pages/oauth/mcp-callback.vue
+++ b/apps/web/src/pages/oauth/mcp-callback.vue
@@ -15,7 +15,7 @@
         :icon="['fas', 'circle-xmark']"
         class="size-8 text-destructive"
       />
-      <p class="text-sm text-muted-foreground">
+      <p class="text-xs text-muted-foreground">
         {{ message }}
       </p>
     </div>
diff --git a/apps/web/src/pages/platform/components/platform-card.vue b/apps/web/src/pages/platform/components/platform-card.vue
index 5c641864..cd5ec2f3 100644
--- a/apps/web/src/pages/platform/components/platform-card.vue
+++ b/apps/web/src/pages/platform/components/platform-card.vue
@@ -11,7 +11,7 @@
         </Badge>
       </CardTitle>
       <CardContent class="px-0 pb-0">
-        <ol class="space-y-2 text-sm">
+        <ol class="space-y-2 text-xs">
           <li
             v-for="(value, key) in platform.config"
             :key="key"
diff --git a/apps/web/src/pages/search-providers/components/provider-setting.vue b/apps/web/src/pages/search-providers/components/provider-setting.vue
index b1496dbb..5cee41ee 100644
--- a/apps/web/src/pages/search-providers/components/provider-setting.vue
+++ b/apps/web/src/pages/search-providers/components/provider-setting.vue
@@ -6,7 +6,7 @@
           :provider="curProvider?.provider || ''"
           size="lg"
         />
-        <h2 class="scroll-m-20 text-base font-semibold tracking-tight">
+        <h2 class="scroll-m-20 text-sm font-semibold tracking-tight">
           {{ curProvider?.name }}
         </h2>
       </div>
@@ -80,7 +80,7 @@
         </template>
         <div
           v-else-if="form.values.provider"
-          class="text-sm text-muted-foreground"
+          class="text-xs text-muted-foreground"
         >
           {{ $t('searchProvider.unsupportedProvider') }}
         </div>
diff --git a/apps/web/src/pages/search-providers/index.vue b/apps/web/src/pages/search-providers/index.vue
index 7c3b42cf..b4c38564 100644
--- a/apps/web/src/pages/search-providers/index.vue
+++ b/apps/web/src/pages/search-providers/index.vue
@@ -6,7 +6,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   Toggle,
   Empty,
   EmptyContent,
@@ -40,20 +39,11 @@ const selectProvider = (value: string) => computed(() => {
   return curProvider.value?.name === value
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const curFilterProvider = computed(() => {
   if (!Array.isArray(providerData.value)) {
     return []
   }
-  if (!searchText.value) {
-    return providerData.value
-  }
-  const keyword = searchText.value.toLowerCase()
-  return providerData.value.filter((p: SearchprovidersGetResponse) => {
-    return (p.name ?? '').toLowerCase().includes(keyword)
-  })
+  return providerData.value
 })
 
 watch(curFilterProvider, () => {
@@ -73,28 +63,6 @@ const openStatus = reactive({
 
 <template>
   <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('searchProvider.searchPlaceholder')"
-          aria-label="Search providers"
-        />
-        <InputGroupAddon
-          align="inline-end"
-        >
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search providers"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template #sidebar-content>
       <SidebarMenu
         v-for="item in curFilterProvider"
diff --git a/apps/web/src/pages/settings-section/index.vue b/apps/web/src/pages/settings-section/index.vue
new file mode 100644
index 00000000..577df9a5
--- /dev/null
+++ b/apps/web/src/pages/settings-section/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <section>
+    <MainLayout>
+      <template #sidebar>
+        <SettingsSidebar />
+      </template>
+      <template #main>
+        <SidebarInset class="flex flex-col overflow-hidden">
+          <section class="flex-1 overflow-y-auto">
+            <router-view v-slot="{ Component }">
+              <KeepAlive>
+                <component :is="Component" />
+              </KeepAlive>
+            </router-view>
+          </section>
+        </SidebarInset>
+      </template>
+    </MainLayout>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { SidebarInset } from '@memohai/ui'
+import MainLayout from '@/layout/main-layout/index.vue'
+import SettingsSidebar from '@/components/settings-sidebar/index.vue'
+</script>
diff --git a/apps/web/src/pages/settings/components/bind-code-section.vue b/apps/web/src/pages/settings/components/bind-code-section.vue
index 74ba73f6..63c1c29d 100644
--- a/apps/web/src/pages/settings/components/bind-code-section.vue
+++ b/apps/web/src/pages/settings/components/bind-code-section.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <h2 class="mb-2 flex items-center text-base font-semibold">
+    <h2 class="mb-2 flex items-center text-xs font-medium">
       <FontAwesomeIcon
         :icon="['fas', 'plug']"
-        class="mr-2"
+        class="mr-2 size-3.5"
       />
       {{ $t('settings.bindCode') }}
     </h2>
diff --git a/apps/web/src/pages/settings/components/password-section.vue b/apps/web/src/pages/settings/components/password-section.vue
index ebc200e4..36f36841 100644
--- a/apps/web/src/pages/settings/components/password-section.vue
+++ b/apps/web/src/pages/settings/components/password-section.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <h2 class="mb-2 flex items-center text-base font-semibold">
+    <h2 class="mb-2 flex items-center text-xs font-medium">
       <FontAwesomeIcon
         :icon="['fas', 'gear']"
-        class="mr-2"
+        class="mr-2 size-3.5"
       />
       {{ $t('settings.changePassword') }}
     </h2>
diff --git a/apps/web/src/pages/settings/components/profile-section.vue b/apps/web/src/pages/settings/components/profile-section.vue
index ed7b41ee..8b5dd6f6 100644
--- a/apps/web/src/pages/settings/components/profile-section.vue
+++ b/apps/web/src/pages/settings/components/profile-section.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <h2 class="mb-2 flex items-center text-base font-semibold">
+    <h2 class="mb-2 flex items-center text-xs font-medium">
       <FontAwesomeIcon
         :icon="['fas', 'user']"
-        class="mr-2"
+        class="mr-2 size-3.5"
       />
       {{ $t('settings.userProfile') }}
     </h2>
diff --git a/apps/web/src/pages/settings/index.vue b/apps/web/src/pages/settings/index.vue
index cc627093..9eb2a86b 100644
--- a/apps/web/src/pages/settings/index.vue
+++ b/apps/web/src/pages/settings/index.vue
@@ -14,10 +14,10 @@
           </AvatarFallback>
         </Avatar>
         <div class="min-w-0">
-          <p class="font-semibold truncate">
+          <p class="text-xs font-medium truncate">
             {{ displayTitle }}
           </p>
-          <p class="text-sm text-muted-foreground truncate">
+          <p class="text-xs text-muted-foreground truncate">
             {{ displayUserID }}
           </p>
         </div>
@@ -25,10 +25,10 @@
 
       <!-- Display Settings -->
       <section>
-        <h2 class="mb-2 flex items-center text-base font-semibold">
+        <h2 class="mb-2 flex items-center text-xs font-medium">
           <FontAwesomeIcon
             :icon="['fas', 'gear']"
-            class="mr-2"
+            class="mr-2 size-3.5"
           />
           {{ $t('settings.display') }}
         </h2>
@@ -129,10 +129,10 @@
 
       <!-- Linked Channels -->
       <section>
-        <h2 class="mb-2 flex items-center text-base font-semibold">
+        <h2 class="mb-2 flex items-center text-xs font-medium">
           <FontAwesomeIcon
             :icon="['fas', 'network-wired']"
-            class="mr-2"
+            class="mr-2 size-3.5"
           />
           {{ $t('settings.linkedChannels') }}
         </h2>
@@ -140,13 +140,13 @@
         <div class="mt-4 space-y-3">
           <p
             v-if="loadingIdentities"
-            class="text-sm text-muted-foreground"
+            class="text-xs text-muted-foreground"
           >
             {{ $t('common.loading') }}
           </p>
           <p
             v-else-if="identities.length === 0"
-            class="text-sm text-muted-foreground"
+            class="text-xs text-muted-foreground"
           >
             {{ $t('settings.noLinkedChannels') }}
           </p>
@@ -157,7 +157,7 @@
               class="border rounded-md p-3 space-y-1"
             >
               <div class="flex items-center justify-between gap-3">
-                <p class="font-medium truncate">
+                <p class="text-xs font-medium truncate">
                   {{ identity.display_name || identity.channel_subject_id }}
                 </p>
                 <Badge variant="secondary">
diff --git a/apps/web/src/pages/tts-providers/components/model-config-editor.vue b/apps/web/src/pages/tts-providers/components/model-config-editor.vue
index e322ddbf..3d56349c 100644
--- a/apps/web/src/pages/tts-providers/components/model-config-editor.vue
+++ b/apps/web/src/pages/tts-providers/components/model-config-editor.vue
@@ -119,7 +119,7 @@
             class="flex-1"
             @update:model-value="(val) => configData.speed = val[0]"
           />
-          <span class="text-sm text-muted-foreground w-12 text-right">
+          <span class="text-xs text-muted-foreground w-12 text-right">
             {{ Number(configData.speed ?? caps.speed.default ?? 1).toFixed(1) }}x
           </span>
         </div>
@@ -167,7 +167,7 @@
             class="flex-1"
             @update:model-value="(val) => configData.pitch = val[0]"
           />
-          <span class="text-sm text-muted-foreground w-16 text-right">
+          <span class="text-xs text-muted-foreground w-16 text-right">
             {{ Number(configData.pitch ?? caps.pitch.default ?? 0).toFixed(0) }} Hz
           </span>
         </div>
@@ -176,7 +176,7 @@
 
     <div
       v-else
-      class="text-sm text-muted-foreground"
+      class="text-xs text-muted-foreground"
     >
       {{ $t('ttsProvider.noCapabilities') }}
     </div>
@@ -185,7 +185,7 @@
 
     <!-- Test Synthesis -->
     <div class="space-y-3">
-      <h4 class="text-sm font-medium">
+      <h4 class="text-xs font-medium">
         {{ $t('ttsProvider.test.title') }}
       </h4>
       <div class="relative">
diff --git a/apps/web/src/pages/tts-providers/components/provider-setting.vue b/apps/web/src/pages/tts-providers/components/provider-setting.vue
index ddce8081..6fea9c0d 100644
--- a/apps/web/src/pages/tts-providers/components/provider-setting.vue
+++ b/apps/web/src/pages/tts-providers/components/provider-setting.vue
@@ -7,7 +7,7 @@
           class="size-5"
         />
         <div>
-          <h2 class="text-base font-semibold">
+          <h2 class="text-sm font-semibold">
             {{ curProvider?.name }}
           </h2>
           <p class="text-xs text-muted-foreground">
@@ -46,7 +46,7 @@
         <!-- Models -->
         <section>
           <div class="flex justify-between items-center mb-4">
-            <h3 class="text-sm font-medium">
+            <h3 class="text-xs font-medium">
               {{ $t('ttsProvider.models') }}
             </h3>
             <div
@@ -72,7 +72,7 @@
 
           <div
             v-if="providerModels.length === 0"
-            class="text-sm text-muted-foreground py-4 text-center"
+            class="text-xs text-muted-foreground py-4 text-center"
           >
             {{ $t('ttsProvider.noModels') }}
           </div>
@@ -88,7 +88,7 @@
               @click="toggleModel(model.id)"
             >
               <div>
-                <span class="text-sm font-medium">{{ model.name || model.model_id }}</span>
+                <span class="text-xs font-medium">{{ model.name || model.model_id }}</span>
                 <span
                   v-if="model.name"
                   class="text-xs text-muted-foreground ml-2"
diff --git a/apps/web/src/pages/tts-providers/index.vue b/apps/web/src/pages/tts-providers/index.vue
index 81d27920..24cf4fed 100644
--- a/apps/web/src/pages/tts-providers/index.vue
+++ b/apps/web/src/pages/tts-providers/index.vue
@@ -7,7 +7,6 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-  InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput,
   Toggle,
   Empty,
   EmptyContent,
@@ -36,16 +35,9 @@ const selectProvider = (name: string) => computed(() => {
   return curProvider.value?.name === name
 })
 
-const searchText = ref('')
-const searchInput = ref('')
-
 const filteredProviders = computed(() => {
   if (!Array.isArray(providerData.value)) return []
-  if (!searchText.value) return providerData.value
-  const keyword = searchText.value.toLowerCase()
-  return providerData.value.filter((p: TtsProviderResponse) =>
-    (p.name ?? '').toLowerCase().includes(keyword),
-  )
+  return providerData.value
 })
 
 watch(filteredProviders, (list) => {
@@ -69,26 +61,6 @@ const openStatus = reactive({ addOpen: false })
 
 <template>
   <MasterDetailSidebarLayout>
-    <template #sidebar-header>
-      <InputGroup class="shadow-none">
-        <InputGroupInput
-          v-model="searchInput"
-          :placeholder="$t('ttsProvider.searchPlaceholder')"
-          aria-label="Search TTS providers"
-        />
-        <InputGroupAddon align="inline-end">
-          <InputGroupButton
-            type="button"
-            size="icon-xs"
-            aria-label="Search"
-            @click="searchText = searchInput"
-          >
-            <FontAwesomeIcon :icon="['fas', 'magnifying-glass']" />
-          </InputGroupButton>
-        </InputGroupAddon>
-      </InputGroup>
-    </template>
-
     <template #sidebar-content>
       <SidebarMenu
         v-for="item in filteredProviders"
diff --git a/apps/web/src/pages/usage/index.vue b/apps/web/src/pages/usage/index.vue
index 1d416028..91037cbb 100644
--- a/apps/web/src/pages/usage/index.vue
+++ b/apps/web/src/pages/usage/index.vue
@@ -187,7 +187,7 @@
         <!-- Chart: Model distribution -->
         <Card v-if="byModelData.length > 0">
           <CardHeader class="pb-2 flex flex-row items-center justify-between">
-            <CardTitle class="text-base">
+            <CardTitle class="text-sm">
               {{ $t('usage.modelDistribution') }}
             </CardTitle>
             <Select
@@ -220,7 +220,7 @@
         <!-- Chart: Daily token usage -->
         <Card>
           <CardHeader class="pb-2">
-            <CardTitle class="text-base">
+            <CardTitle class="text-sm">
               {{ $t('usage.dailyTokens') }}
             </CardTitle>
           </CardHeader>
@@ -236,7 +236,7 @@
         <!-- Chart: Cache breakdown -->
         <Card>
           <CardHeader class="pb-2">
-            <CardTitle class="text-base">
+            <CardTitle class="text-sm">
               {{ $t('usage.cacheBreakdown') }}
             </CardTitle>
           </CardHeader>
@@ -252,7 +252,7 @@
         <!-- Chart: Cache hit rate -->
         <Card>
           <CardHeader class="pb-2">
-            <CardTitle class="text-base">
+            <CardTitle class="text-sm">
               {{ $t('usage.cacheHitRate') }}
             </CardTitle>
           </CardHeader>
diff --git a/apps/web/src/router.ts b/apps/web/src/router.ts
index 25215e4e..d2120604 100644
--- a/apps/web/src/router.ts
+++ b/apps/web/src/router.ts
@@ -10,27 +10,33 @@ import { i18nRef } from './i18n'
 const routes = [
   {
     path: '/',
-    redirect: '/login',
     component: () => import('@/pages/main-section/index.vue'),
     children: [
       {
-        name: 'chat',
-        path: '/chat/:sessionId?',
-        component: () => import('@/pages/chat/index.vue'),
+        name: 'home',
+        path: '',
+        component: () => import('@/pages/home/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.chat'),
         },
       },
       {
-        name: 'home',
-        path: '/home',
+        name: 'chat',
+        path: '/chat/:botId?/:sessionId?',
         component: () => import('@/pages/home/index.vue'),
         meta: {
-          breadcrumb: i18nRef('home.title'),
+          breadcrumb: i18nRef('sidebar.chat'),
         },
       },
+    ],
+  },
+  {
+    path: '/settings',
+    component: () => import('@/pages/settings-section/index.vue'),
+    redirect: '/settings/bots',
+    children: [
       {
-        path: '/bots',
+        path: 'bots',
         component: { render: () => h(RouterView) },
         meta: {
           breadcrumb: i18nRef('sidebar.bots'),
@@ -53,7 +59,7 @@ const routes = [
       },
       {
         name: 'models',
-        path: '/models',
+        path: 'models',
         component: () => import('@/pages/models/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.models'),
@@ -61,7 +67,7 @@ const routes = [
       },
       {
         name: 'search-providers',
-        path: '/search-providers',
+        path: 'search-providers',
         component: () => import('@/pages/search-providers/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.searchProvider'),
@@ -69,7 +75,7 @@ const routes = [
       },
       {
         name: 'memory-providers',
-        path: '/memory-providers',
+        path: 'memory-providers',
         component: () => import('@/pages/memory-providers/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.memoryProvider'),
@@ -77,7 +83,7 @@ const routes = [
       },
       {
         name: 'tts-providers',
-        path: '/tts-providers',
+        path: 'tts-providers',
         component: () => import('@/pages/tts-providers/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.ttsProvider'),
@@ -85,7 +91,7 @@ const routes = [
       },
       {
         name: 'email-providers',
-        path: '/email-providers',
+        path: 'email-providers',
         component: () => import('@/pages/email-providers/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.emailProvider'),
@@ -93,7 +99,7 @@ const routes = [
       },
       {
         name: 'browser-contexts',
-        path: '/browser-contexts',
+        path: 'browser-contexts',
         component: () => import('@/pages/browser-contexts/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.browserContexts'),
@@ -101,7 +107,7 @@ const routes = [
       },
       {
         name: 'usage',
-        path: '/usage',
+        path: 'usage',
         component: () => import('@/pages/usage/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.usage'),
@@ -109,7 +115,7 @@ const routes = [
       },
       {
         name: 'settings',
-        path: '/settings',
+        path: 'profile',
         component: () => import('@/pages/settings/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.settings'),
@@ -117,7 +123,7 @@ const routes = [
       },
       {
         name: 'platform',
-        path: '/platform',
+        path: 'platform',
         component: () => import('@/pages/platform/index.vue'),
         meta: {
           breadcrumb: i18nRef('sidebar.platform'),
@@ -160,7 +166,7 @@ router.beforeEach((to) => {
   const token = localStorage.getItem('token')
 
   if (to.fullPath === '/login') {
-    return token ? { path: '/chat' } : true
+    return token ? { path: '/' } : true
   }
   if (to.path.startsWith('/oauth/')) {
     return true
diff --git a/apps/web/src/store/chat-list.ts b/apps/web/src/store/chat-list.ts
index 7dc04571..7a5629d3 100644
--- a/apps/web/src/store/chat-list.ts
+++ b/apps/web/src/store/chat-list.ts
@@ -1,8 +1,8 @@
-import { defineStore } from 'pinia'
+import { defineStore, storeToRefs } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
-import { useLocalStorage } from '@vueuse/core'
 import { useRetryingStream } from '@/composables/useRetryingStream'
 import { useUserStore } from '@/store/user'
+import { useChatSelectionStore } from '@/store/chat-selection'
 import {
   createSession,
   deleteSession as requestDeleteSession,
@@ -93,6 +93,9 @@ interface PendingAssistantStream {
 // ---- Store ----
 
 export const useChatStore = defineStore('chat', () => {
+  const selectionStore = useChatSelectionStore()
+  const { currentBotId, sessionId } = storeToRefs(selectionStore)
+
   const messages = reactive<ChatMessage[]>([])
   const streaming = ref(false)
   const sessions = ref<SessionSummary[]>([])
@@ -101,10 +104,10 @@ export const useChatStore = defineStore('chat', () => {
   const loadingOlder = ref(false)
   const hasMoreOlder = ref(true)
   const initializing = ref(false)
-  const currentBotId = useLocalStorage<string | null>('chat-bot-id', null)
-  const sessionId = useLocalStorage<string | null>('chat-session-id', null)
   const bots = ref<Bot[]>([])
 
+
+ 
   let abortFn: (() => void) | null = null
   let messageEventsSince = ''
   let pendingAssistantStream: PendingAssistantStream | null = null
@@ -770,17 +773,11 @@ export const useChatStore = defineStore('chat', () => {
   }
 
   async function createNewSession() {
-    loadingChats.value = true
-    try {
-      const bid = await ensureBot()
-      if (!bid) return
-      const created = await createSession(bid)
-      sessions.value = [created, ...sessions.value.filter((s) => s.id !== created.id)]
-      sessionId.value = created.id
-      replaceMessages([])
-    } finally {
-      loadingChats.value = false
-    }
+    const bid = await ensureBot()
+    if (!bid) return
+    // Enter draft state first. Session will be created lazily on first send.
+    sessionId.value = null
+    replaceMessages([])
   }
 
   async function removeSession(targetSessionId: string) {
diff --git a/apps/web/src/store/chat-selection.ts b/apps/web/src/store/chat-selection.ts
new file mode 100644
index 00000000..38dad1e9
--- /dev/null
+++ b/apps/web/src/store/chat-selection.ts
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+import { useStorage } from '@vueuse/core'
+
+export const useChatSelectionStore = defineStore('chat-selection', () => {
+  const currentBotId = useStorage<string | null>('chat-bot-id', null)
+  const sessionId = useStorage<string | null>('chat-session-id', null)
+
+  function setBot(botId: string | null) {
+    currentBotId.value = (botId ?? '').trim() || null
+  }
+
+  function setSession(targetSessionId: string | null) {
+    sessionId.value = (targetSessionId ?? '').trim() || null
+  }
+
+  function clear() {
+    currentBotId.value = null
+    sessionId.value = null
+  }
+
+  return {
+    currentBotId,
+    sessionId,
+    setBot,
+    setSession,
+    clear,
+  }
+})
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 20ca85a9..3b6aa08c 100644
--- a/apps/web/src/style.css
+++ b/apps/web/src/style.css
@@ -1,147 +1,12 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@custom-variant dark (&:is(.dark *));
-
-@layer components {
-  @import 'markstream-vue/index.css';
-  .scrollbar-none {
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .dark .shiki,
-  .dark .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-  }
-}
-
-@layer utilities{
-  .shadow-sm{
-    box-shadow: none;
-  }
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(0.965 0.004 285);
-  --foreground: oklch(0.25 0.005 285);
-  --card: oklch(0.99 0.003 285);
-  --card-foreground: oklch(0.25 0.005 285);
-  --popover: oklch(0.99 0.003 285);
-  --popover-foreground: oklch(0.25 0.005 285);
-  --primary: oklch(0.37 0.015 285);
-  --primary-foreground: oklch(0.98 0 0);
-  --secondary: oklch(0.94 0.006 285);
-  --secondary-foreground: oklch(0.32 0.005 285);
-  --muted: oklch(0.94 0.006 285);
-  --muted-foreground: oklch(0.50 0.005 285);
-  --accent: oklch(0.94 0.006 285);
-  --accent-foreground: oklch(0.32 0.005 285);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(0.905 0.006 285);
-  --input: oklch(0.905 0.006 285);
-  --ring: oklch(0.64 0.015 285);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.955 0.004 285);
-  --sidebar-foreground: oklch(0.25 0.005 285);
-  --sidebar-primary: oklch(0.37 0.015 285);
-  --sidebar-primary-foreground: oklch(0.98 0 0);
-  --sidebar-accent: oklch(0.94 0.006 285);
-  --sidebar-accent-foreground: oklch(0.32 0.005 285);
-  --sidebar-border: oklch(0.905 0.006 285);
-  --sidebar-ring: oklch(0.64 0.015 285);
-}
-
-.dark {
-  --background: oklch(0.205 0.006 285);
-  --foreground: oklch(0.88 0.005 285);
-  --card: oklch(0.245 0.006 285);
-  --card-foreground: oklch(0.88 0.005 285);
-  --popover: oklch(0.245 0.006 285);
-  --popover-foreground: oklch(0.88 0.005 285);
-  --primary: oklch(0.84 0.006 285);
-  --primary-foreground: oklch(0.22 0.005 285);
-  --secondary: oklch(0.29 0.006 285);
-  --secondary-foreground: oklch(0.85 0.005 285);
-  --muted: oklch(0.29 0.006 285);
-  --muted-foreground: oklch(0.58 0.006 285);
-  --accent: oklch(0.29 0.006 285);
-  --accent-foreground: oklch(0.85 0.005 285);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.98 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 14%);
-  --ring: oklch(0.48 0.012 285);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.225 0.006 285);
-  --sidebar-foreground: oklch(0.88 0.005 285);
-  --sidebar-primary: oklch(0.52 0.20 270);
-  --sidebar-primary-foreground: oklch(0.95 0 0);
-  --sidebar-accent: oklch(0.29 0.006 285);
-  --sidebar-accent-foreground: oklch(0.85 0.005 285);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.48 0.012 285);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-  
-}
+@import "@memohai/ui/style.css";
 
 @source "../../../packages/ui/src";
+
+@layer components {
+  [data-chat-content] .prose {
+    font-size: 0.875rem;
+    line-height: 1.625;
+  }
+}
diff --git a/apps/web/src/utils/useControlVisibleStatus.ts b/apps/web/src/utils/useControlVisibleStatus.ts
new file mode 100644
index 00000000..d8dd9f51
--- /dev/null
+++ b/apps/web/src/utils/useControlVisibleStatus.ts
@@ -0,0 +1,22 @@
+import {onActivated, reactive, useId } from 'vue'
+import { onBeforeRouteLeave } from 'vue-router'
+
+export default () => {
+  const visibleStatus = reactive({
+    leftDefault: '.main-left-section',
+    rightDefault:'.main-right-section',
+    id:useId()
+  })
+  
+  onBeforeRouteLeave(() => {
+    visibleStatus.leftDefault = `.${visibleStatus.id}`
+    visibleStatus.rightDefault=`.${visibleStatus.id}`
+  })
+
+  onActivated(() => {
+    visibleStatus.leftDefault = '.main-left-section'
+    visibleStatus.rightDefault='.main-right-section'
+  })
+
+  return visibleStatus
+}
\ No newline at end of file
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index 2498f59b..2d107393 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -41,7 +41,10 @@ export default defineConfig(({ command }) => {
   }
 
   return {
-    plugins: [vue(), tailwindcss()],
+    plugins: [
+      vue(),
+      tailwindcss(),
+    ],
     optimizeDeps: {
       // Pre-bundle deps for route pages to avoid slow first load / navigation
       entries: ['src/main.ts', 'src/pages/**/*.vue'],
diff --git a/internal/channel/adapters/telegram/telegram_test.go b/internal/channel/adapters/telegram/telegram_test.go
index bc5714fe..772fc099 100644
--- a/internal/channel/adapters/telegram/telegram_test.go
+++ b/internal/channel/adapters/telegram/telegram_test.go
@@ -172,6 +172,7 @@ func TestBuildTelegramReplyRef(t *testing.T) {
 	ref := buildTelegramReplyRef(msg, "  -100  ")
 	if ref == nil {
 		t.Fatal("expected non-nil ref")
+		return
 	}
 	if ref.MessageID != "42" || ref.Target != "-100" {
 		t.Fatalf("unexpected ref: %+v", ref)
diff --git a/internal/channel/inbound/channel_test.go b/internal/channel/inbound/channel_test.go
index 13b45312..4ea30828 100644
--- a/internal/channel/inbound/channel_test.go
+++ b/internal/channel/inbound/channel_test.go
@@ -1517,6 +1517,7 @@ func TestMapStreamChunkToChannelEvents_ToolCallFields(t *testing.T) {
 	tc := events[0].ToolCall
 	if tc == nil {
 		t.Fatal("expected non-nil ToolCall")
+		return
 	}
 	if tc.Name != "calc" || tc.CallID != "c1" {
 		t.Fatalf("unexpected name/callID: %q / %q", tc.Name, tc.CallID)
diff --git a/internal/channel/outbound_test.go b/internal/channel/outbound_test.go
index 9dad455c..9c1b0e2e 100644
--- a/internal/channel/outbound_test.go
+++ b/internal/channel/outbound_test.go
@@ -455,6 +455,7 @@ func TestPushFinalWithChunking_ActionsOnAttachmentMsg(t *testing.T) {
 	}
 	if attachmentMsg == nil {
 		t.Fatal("expected attachment message in overflow")
+		return
 	}
 	if len(attachmentMsg.Message.Actions) != 1 || attachmentMsg.Message.Actions[0].Label != "OK" {
 		t.Fatal("actions should be on the attachment (last) message")
diff --git a/internal/conversation/service_integration_test.go b/internal/conversation/service_integration_test.go
index 4b5be29f..d67f2232 100644
--- a/internal/conversation/service_integration_test.go
+++ b/internal/conversation/service_integration_test.go
@@ -182,6 +182,7 @@ func TestObservedChatVisibleAfterBindWithoutBackfill(t *testing.T) {
 	}
 	if target == nil {
 		t.Fatalf("expected chat %s in visible list after bind", chatID)
+		return
 	}
 	if target.AccessMode != conversation.AccessModeChannelIdentityObserved {
 		t.Fatalf("expected access_mode=%s, got %s", conversation.AccessModeChannelIdentityObserved, target.AccessMode)
diff --git a/internal/memory/adapters/builtin/builtin_test.go b/internal/memory/adapters/builtin/builtin_test.go
index 88660dbd..240992fd 100644
--- a/internal/memory/adapters/builtin/builtin_test.go
+++ b/internal/memory/adapters/builtin/builtin_test.go
@@ -76,6 +76,7 @@ func TestBuiltinProviderContextPackingProducesMemoryContextTags(t *testing.T) {
 	}
 	if result == nil {
 		t.Fatal("expected non-nil result")
+		return
 	}
 	if !strings.Contains(result.ContextText, "<memory-context>") {
 		t.Fatalf("expected memory-context tags, got: %s", result.ContextText)
diff --git a/internal/memory/adapters/builtin/formation_test.go b/internal/memory/adapters/builtin/formation_test.go
index c4b759a3..3cd4ec9e 100644
--- a/internal/memory/adapters/builtin/formation_test.go
+++ b/internal/memory/adapters/builtin/formation_test.go
@@ -426,6 +426,7 @@ func TestOnBeforeChatRecallsFactMemory(t *testing.T) {
 	}
 	if result == nil {
 		t.Fatal("expected non-nil context result")
+		return
 	}
 	lower := strings.ToLower(result.ContextText)
 	if !strings.Contains(lower, "oolong tea") {
diff --git a/packages/icons/icons/discord.svg b/packages/icons/icons/discord.svg
index df041cc0..c8cbce66 100644
--- a/packages/icons/icons/discord.svg
+++ b/packages/icons/icons/discord.svg
@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0.02 57.8 511.92 396.3"><path d="M433.7 91a416.5 416.5 0 0 0-105.6-33.2c-4.6 8.2-9.9 19.3-13.5 28.1-39.4-5.9-78.4-5.9-117.1 0-3.7-8.8-9.1-19.9-13.7-28.1-37.1 6.4-72.6 17.7-105.7 33.3-66.8 101-85 199.5-75.9 296.6 44.3 33.1 87.3 53.2 129.6 66.4 10.4-14.4 19.7-29.6 27.7-45.7-15.3-5.8-29.9-13-43.7-21.3 3.7-2.7 7.2-5.6 10.7-8.5 84.2 39.4 175.8 39.4 259 0 3.5 2.9 7.1 5.8 10.7 8.5-13.9 8.3-28.5 15.5-43.8 21.3 8 16 17.3 31.3 27.7 45.7 42.3-13.2 85.3-33.3 129.6-66.4 10.8-112.5-18-210.1-76-296.7M170.9 328c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c.1 28.8-20.2 52.4-46 52.4m170.2 0c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c0 28.8-20.3 52.4-46 52.4" style="fill:#5865f2"/></svg>
\ No newline at end of file
diff --git a/packages/icons/icons/feishu.svg b/packages/icons/icons/feishu.svg
index 10bd60c4..5bb586b2 100644
--- a/packages/icons/icons/feishu.svg
+++ b/packages/icons/icons/feishu.svg
@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M2.616 4.29c-.395-.377-.998.07-.763.565l3.601 7.594a.75.75 0 0 0 .467.399l5.729 1.682c.362.107.362.62 0 .726l-5.729 1.683a.75.75 0 0 0-.467.399l-3.601 7.593c-.235.496.368.942.763.565L22.082 6.812a.75.75 0 0 0-.034-1.1L18.67 2.544a.75.75 0 0 0-.83-.103L2.616 4.29z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="62.16 94.5 407.87 324.19"><path d="M274.18 264.785q.515-.517 1.03-1.027c.685-.688 1.372-1.258 2.056-1.945l1.37-1.372 4.118-4.113 5.598-5.601 4.8-4.797 4.575-4.457 4.796-4.688 4.344-4.344 6.059-6.054c1.14-1.145 2.285-2.29 3.543-3.317 2.168-2.054 4.457-4 6.855-5.828 2.172-1.715 4.344-3.312 6.516-4.914 3.082-2.172 6.398-4.344 9.71-6.285 3.204-1.941 6.63-3.656 10.06-5.371 3.199-1.602 6.515-2.973 9.827-4.23 1.829-.684 3.774-1.372 5.602-2.055.914-.344 1.941-.688 2.856-.914-8.57-33.715-24.227-64.575-45.258-90.86-4.114-5.14-10.399-8.113-17.028-8.113H130.754c-3.203 0-4.457 4-1.945 5.941 59.543 43.66 109.144 99.887 145.03 164.801 0-.226.227-.34.34-.457m0 0" style="stroke:none;fill-rule:nonzero;fill:#00d6b9;fill-opacity:1"/><path d="M204.79 418.691c90.288 0 169.03-49.828 210.058-123.543 1.488-2.628 2.859-5.257 4.23-7.882q-3.087 6-6.86 11.312l-2.741 3.77c-1.141 1.488-2.399 2.972-3.657 4.457-1.03 1.144-2.058 2.285-3.086 3.316-2.058 2.172-4.343 4.227-6.629 6.172a53 53 0 0 1-3.886 3.2c-1.598 1.144-3.086 2.284-4.684 3.429-1.031.683-2.058 1.371-3.086 1.941-1.144.684-2.172 1.258-3.316 1.942a131 131 0 0 1-6.969 3.543c-2.059.918-4.117 1.828-6.289 2.515-2.285.801-4.57 1.602-6.969 2.285-3.543.914-7.086 1.715-10.742 2.286-2.629.457-5.258.687-8 .914-2.86.23-5.601.23-8.457.23-3.086 0-6.289-.23-9.488-.57a83 83 0 0 1-7.086-1.031c-2.055-.34-4.113-.801-6.168-1.258-1.031-.227-2.176-.57-3.203-.797-2.973-.8-6.055-1.602-9.028-2.516-1.488-.457-2.972-.914-4.457-1.258-2.172-.683-4.457-1.37-6.629-2.058-1.828-.57-3.656-1.14-5.37-1.711q-2.573-.86-5.145-1.715c-1.14-.344-2.285-.8-3.543-1.144-1.371-.457-2.856-1.028-4.227-1.485-1.027-.344-2.058-.687-2.972-1.027-1.942-.688-4-1.488-5.942-2.172-1.144-.457-2.285-.914-3.43-1.258-1.484-.57-3.085-1.144-4.57-1.828-1.601-.687-3.203-1.258-4.8-1.945-1.028-.457-2.06-.797-3.087-1.258-1.257-.57-2.628-1.027-3.886-1.598-1.028-.457-1.942-.8-2.969-1.258l-3.086-1.37c-.914-.344-1.832-.801-2.746-1.145a44 44 0 0 1-2.512-1.14c-.8-.345-1.715-.802-2.515-1.145-.914-.344-1.715-.801-2.512-1.141-1.031-.457-2.172-1.031-3.203-1.484-1.14-.575-2.285-1.032-3.426-1.602-1.258-.574-2.402-1.144-3.66-1.715-1.027-.457-2.055-1.027-3.082-1.484-54.172-26.973-102.172-63.086-143.09-106.746-2.055-2.172-5.71-.684-5.71 2.289l.112 154.398v12.57c0 7.317 3.543 14.06 9.598 18.172 38.172 24.801 83.773 39.543 132.914 39.543m0 0" style="stroke:none;fill-rule:nonzero;fill:#3370ff;fill-opacity:1"/><path d="M414.84 295.188c0 .113-.113.113-.113.226zl.8-1.489c-.343.457-.574 1.028-.8 1.488m3.793-7.05.226-.457.114-.23q-.17.513-.34.687m0 0" style="stroke:none;fill-rule:nonzero;fill:#133c9a;fill-opacity:1"/><path d="M470.035 201.121c-18.285-9.031-38.86-14.059-60.687-14.059-12.914 0-25.485 1.829-37.371 5.141-1.372.344-2.743.8-4.114 1.258-.914.344-1.941.574-2.855.914-1.945.688-3.774 1.375-5.602 2.059-3.316 1.257-6.629 2.742-9.828 4.23-3.43 1.598-6.742 3.426-10.058 5.371a128 128 0 0 0-9.715 6.285c-2.285 1.602-4.457 3.2-6.512 4.914a154 154 0 0 0-6.86 5.828c-1.14 1.141-2.398 2.172-3.542 3.313l-6.055 6.059-4.344 4.343-4.8 4.684-4.57 4.46-4.802 4.798-11.086 11.086c-.687.687-1.37 1.37-2.058 1.945l-1.028 1.027c-.457.457-1.027 1.028-1.601 1.485-.57.57-1.14 1.031-1.711 1.601a244.4 244.4 0 0 1-49.828 35.313c1.027.457 2.168 1.027 3.199 1.488.8.34 1.715.797 2.512 1.14.8.344 1.715.801 2.515 1.145.801.344 1.602.684 2.516 1.14.914.345 1.828.802 2.742 1.145l3.086 1.371c1.027.457 1.942.801 2.969 1.258 1.258.57 2.629 1.028 3.887 1.598 1.03.46 2.058.8 3.086 1.258 1.601.687 3.199 1.258 4.8 1.945 1.485.57 3.086 1.14 4.57 1.828 1.145.457 2.286.914 3.43 1.258 1.946.684 4 1.484 5.946 2.172a81 81 0 0 1 2.968 1.027c1.371.457 2.856 1.028 4.23 1.485 1.141.343 2.286.8 3.544 1.14q2.567.86 5.14 1.719c1.829.57 3.657 1.14 5.372 1.71 2.171.688 4.457 1.376 6.628 2.06 1.489.457 2.973.914 4.457 1.257 2.973.914 5.942 1.715 9.032 2.512 1.027.344 2.168.574 3.199.8 2.055.458 4.113.915 6.172 1.259 2.398.457 4.683.8 7.082 1.03 3.203.34 6.402.571 9.488.571 2.856 0 5.715 0 8.457-.23 2.63-.227 5.371-.457 8-.914 3.656-.57 7.2-1.371 10.742-2.286 2.399-.683 4.688-1.37 6.973-2.285 2.172-.8 4.227-1.601 6.285-2.515 2.399-1.028 4.684-2.285 6.973-3.543 1.14-.57 2.168-1.258 3.312-1.942 1.028-.687 2.059-1.257 3.086-1.945 1.602-1.027 3.2-2.168 4.684-3.426a52 52 0 0 0 3.887-3.203c2.289-1.941 4.457-4 6.628-6.168 1.032-1.031 2.06-2.172 3.086-3.316 1.258-1.485 2.516-2.969 3.657-4.457.918-1.258 1.828-2.512 2.742-3.77 2.515-3.543 4.8-7.316 6.86-11.199l2.284-4.688 21.145-42.171v.113c6.742-14.742 16.226-28.113 27.656-39.426m0 0" style="stroke:none;fill-rule:nonzero;fill:#133c9a;fill-opacity:1"/></svg>
\ No newline at end of file
diff --git a/packages/icons/icons/qq.svg b/packages/icons/icons/qq.svg
index cbc61ae7..c9c9ff6d 100644
--- a/packages/icons/icons/qq.svg
+++ b/packages/icons/icons/qq.svg
@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 121 144"><path fill="#faab07" d="M60.503 142.237c-12.533 0-24.038-4.195-31.445-10.46-3.762 1.124-8.574 2.932-11.61 5.175-2.6 1.918-2.275 3.874-1.807 4.663 2.056 3.47 35.273 2.216 44.862 1.136zm0 0c12.535 0 24.039-4.195 31.447-10.46 3.76 1.124 8.573 2.932 11.61 5.175 2.598 1.918 2.274 3.874 1.805 4.663-2.056 3.47-35.272 2.216-44.862 1.136zm0 0"/><path d="M60.576 67.119c20.698-.14 37.286-4.147 42.907-5.683 1.34-.367 2.056-1.024 2.056-1.024.005-.189.085-3.37.085-5.01C105.624 27.768 92.58.001 60.5 0 28.42.001 15.375 27.769 15.375 55.401c0 1.642.08 4.822.086 5.01 0 0 .583.615 1.65.913 5.19 1.444 22.09 5.65 43.312 5.795zm56.245 23.02c-1.283-4.129-3.034-8.944-4.808-13.568 0 0-1.02-.126-1.537.023-15.913 4.623-35.202 7.57-49.9 7.392h-.153c-14.616.175-33.774-2.737-49.634-7.315-.606-.175-1.802-.1-1.802-.1-1.774 4.624-3.525 9.44-4.808 13.568-6.119 19.69-4.136 27.838-2.627 28.02 3.239.392 12.606-14.821 12.606-14.821 0 15.459 13.957 39.195 45.918 39.413h.848c31.96-.218 45.917-23.954 45.917-39.413 0 0 9.368 15.213 12.607 14.822 1.508-.183 3.491-8.332-2.627-28.021"/><path fill="#fff" d="M49.085 40.824c-4.352.197-8.07-4.76-8.304-11.063-.236-6.305 3.098-11.576 7.45-11.773 4.347-.195 8.064 4.76 8.3 11.065.238 6.306-3.097 11.577-7.446 11.771m31.133-11.063c-.233 6.302-3.951 11.26-8.303 11.063-4.35-.195-7.684-5.465-7.446-11.77.236-6.305 3.952-11.26 8.3-11.066 4.352.197 7.686 5.468 7.449 11.773"/><path fill="#faab07" d="M87.952 49.725C86.79 47.15 75.077 44.28 60.578 44.28h-.156c-14.5 0-26.212 2.87-27.375 5.446a.863.863 0 00-.085.367.88.88 0 00.16.496c.98 1.427 13.985 8.487 27.3 8.487h.156c13.314 0 26.319-7.058 27.299-8.487a.873.873 0 00.16-.498.856.856 0 00-.085-.365"/><path d="M54.434 29.854c.199 2.49-1.167 4.702-3.046 4.943-1.883.242-3.568-1.58-3.768-4.07-.197-2.492 1.167-4.704 3.043-4.944 1.886-.244 3.574 1.58 3.771 4.07m11.956.833c.385-.689 3.004-4.312 8.427-2.993 1.425.347 2.084.857 2.223 1.057.205.296.262.718.053 1.286-.412 1.126-1.263 1.095-1.734.875-.305-.142-4.082-2.66-7.562 1.097-.24.257-.668.346-1.073.04-.407-.308-.574-.93-.334-1.362"/><path fill="#fff" d="M60.576 83.08h-.153c-9.996.12-22.116-1.204-33.854-3.518-1.004 5.818-1.61 13.132-1.09 21.853 1.316 22.043 14.407 35.9 34.614 36.1h.82c20.208-.2 33.298-14.057 34.616-36.1.52-8.723-.087-16.035-1.092-21.854-11.739 2.315-23.862 3.64-33.86 3.518"/><path fill="#eb1923" d="M32.102 81.235v21.693s9.937 2.004 19.893.616V83.535c-6.307-.357-13.109-1.152-19.893-2.3"/><path fill="#eb1923" d="M105.539 60.412s-19.33 6.102-44.963 6.275h-.153c-25.591-.172-44.896-6.255-44.962-6.275L8.987 76.57c16.193 4.882 36.261 8.028 51.436 7.845h.153c15.175.183 35.242-2.963 51.437-7.845zm0 0"/></svg>
\ No newline at end of file
diff --git a/packages/icons/icons/telegram.svg b/packages/icons/icons/telegram.svg
index 867e6c54..e8eba0c4 100644
--- a/packages/icons/icons/telegram.svg
+++ b/packages/icons/icons/telegram.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM435 240.7C431.3 279.9 415.1 375.1 406.9 419C403.4 437.6 396.6 443.8 390 444.4C375.6 445.7 364.7 434.9 350.7 425.7C328.9 411.4 316.5 402.5 295.4 388.5C270.9 372.4 286.8 363.5 300.7 349C304.4 345.2 367.8 287.5 369 282.3C369.2 281.6 369.3 279.2 367.8 277.9C366.3 276.6 364.2 277.1 362.7 277.4C360.5 277.9 325.6 300.9 258.1 346.5C248.2 353.3 239.2 356.6 231.2 356.4C222.3 356.2 205.3 351.4 192.6 347.3C177.1 342.3 164.7 339.6 165.8 331C166.4 326.5 172.5 322 184.2 317.3C256.5 285.8 304.7 265 328.8 255C397.7 226.4 412 221.4 421.3 221.2C423.4 221.2 427.9 221.7 430.9 224.1C432.9 225.8 434.1 228.2 434.4 230.8C434.9 234 435 237.3 434.8 240.6z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><linearGradient id="a" x1="256" x2="256" y1="2" y2="514" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#1d93d2"/><stop offset="1" style="stop-color:#38b0e3"/></linearGradient><circle cx="256" cy="256" r="256" style="fill:url(#a)"/><path d="m173.3 274.7 30.4 84.1s3.8 7.9 7.9 7.9 64.5-62.9 64.5-62.9l67.3-129.9-169 79.1z" style="fill:#c8daea"/><path d="m213.6 296.3-5.8 62s-2.4 19 16.5 0c19-19 37.2-33.6 37.2-33.6" style="fill:#a9c6d8"/><path d="m173.8 277.7-62.5-20.4s-7.5-3-5.1-9.9c.5-1.4 1.5-2.6 4.5-4.7C124.6 233.1 367 146 367 146s6.8-2.3 10.9-.8c2 .6 3.6 2.3 4 4.4.4 1.8.6 3.7.5 5.5 0 1.6-.2 3.1-.4 5.4-1.5 23.8-45.7 201.6-45.7 201.6s-2.6 10.4-12.1 10.8c-4.7.2-9.3-1.6-12.6-4.9-18.6-16-82.8-59.2-97-68.6-.6-.4-1.1-1.1-1.2-1.9-.2-1 .9-2.2.9-2.2s111.8-99.4 114.8-109.8c.2-.8-.6-1.2-1.8-.9-7.4 2.7-136.2 84.1-150.4 93-.9.2-2 .3-3.1.1" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/packages/icons/icons/wechat.svg b/packages/icons/icons/wechat.svg
index 580149bb..417a59c9 100644
--- a/packages/icons/icons/wechat.svg
+++ b/packages/icons/icons/wechat.svg
@@ -1 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M417.2 231.6C423.6 231.6 429.8 231.9 436 232.7C419.4 154.3 335.3 96 239.7 96C132.5 96 45 168.8 45 261.4C45 314.8 74.3 358.9 122.9 393L103.6 451.6L171.6 417.5C196 422.3 215.4 427.2 239.8 427.2C246 427.2 251.9 426.9 258.1 426.4C254.1 413.5 251.9 399.8 251.9 385.6C251.8 300.7 324.8 231.6 417.2 231.6zM312.7 178.7C327.2 178.7 336.9 188.4 336.9 203.1C336.9 217.6 327.2 227.3 312.7 227.3C297.9 227.3 283.4 217.6 283.4 203.1C283.5 188.4 298 178.7 312.7 178.7zM176.3 227.3C161.8 227.3 147 217.6 147 203.1C147 188.3 161.8 178.7 176.3 178.7C191.1 178.7 200.7 188.4 200.7 203.1C200.7 217.7 191.1 227.3 176.3 227.3zM595 383.4C595 305.5 517.1 242.1 429.6 242.1C336.9 242.1 264.2 305.5 264.2 383.4C264.2 461.3 337 524.7 429.6 524.7C448.9 524.7 468.5 519.6 488.2 514.8L541.6 544.1L526.8 495.5C566 466.1 595 427.2 595 383.4zM375.9 358.9C366.2 358.9 356.6 349.2 356.6 339.3C356.6 329.6 366.3 320 375.9 320C390.7 320 400.3 329.7 400.3 339.3C400.3 349.3 390.6 358.9 375.9 358.9zM483 358.9C473.3 358.9 463.7 349.2 463.7 339.3C463.7 329.6 473.4 320 483 320C497.5 320 507.4 329.7 507.4 339.3C507.5 349.3 497.5 358.9 483 358.9z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+
<path fill="#2DC100" d="M300 255c0 24.854-20.147 45-45 45H45c-24.854 0-45-20.146-45-45V45C0 20.147 20.147 0 45 0h210c24.853 0 45 20.147 45 45v210z"/>
+
<g fill="#FFF">
+
<path d="M200.803 111.88c-24.213 1.265-45.268 8.605-62.362 25.188-17.271 16.754-25.155 37.284-23 62.734-9.464-1.172-18.084-2.462-26.753-3.192-2.994-.252-6.547.106-9.083 1.537-8.418 4.75-16.488 10.113-26.053 16.092 1.755-7.938 2.891-14.889 4.902-21.575 1.479-4.914.794-7.649-3.733-10.849-29.066-20.521-41.318-51.232-32.149-82.85 8.483-29.25 29.315-46.989 57.621-56.236 38.635-12.62 82.054.253 105.547 30.927 8.485 11.08 13.688 23.516 15.063 38.224zm-111.437-9.852c.223-5.783-4.788-10.993-10.74-11.167-6.094-.179-11.106 4.478-11.284 10.483-.18 6.086 4.475 10.963 10.613 11.119 6.085.154 11.186-4.509 11.411-10.435zm58.141-11.171c-5.974.11-11.022 5.198-10.916 11.004.109 6.018 5.061 10.726 11.204 10.652 6.159-.074 10.83-4.832 10.772-10.977-.051-6.032-4.981-10.79-11.06-10.679z"/>
+
<path d="M255.201 262.83c-7.667-3.414-14.7-8.536-22.188-9.318-7.459-.779-15.3 3.524-23.104 4.322-23.771 2.432-45.067-4.193-62.627-20.432-33.397-30.89-28.625-78.254 10.014-103.568 34.341-22.498 84.704-14.998 108.916 16.219 21.129 27.24 18.646 63.4-7.148 86.284-7.464 6.623-10.15 12.073-5.361 20.804.884 1.612.985 3.653 1.498 5.689zm-87.274-84.499c4.881.005 8.9-3.815 9.085-8.636.195-5.104-3.91-9.385-9.021-9.406-5.06-.023-9.299 4.318-9.123 9.346.166 4.804 4.213 8.69 9.059 8.696zm56.261-18.022c-4.736-.033-8.76 3.844-8.953 8.629-.205 5.117 3.772 9.319 8.836 9.332 4.898.016 8.768-3.688 8.946-8.562.19-5.129-3.789-9.364-8.829-9.399z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/packages/icons/src/icons/BedrockColor.vue b/packages/icons/src/icons/BedrockColor.vue
index 8d66271c..1269e492 100644
--- a/packages/icons/src/icons/BedrockColor.vue
+++ b/packages/icons/src/icons/BedrockColor.vue
@@ -30,4 +30,4 @@
 <script setup lang="ts">
 withDefaults(defineProps<{ size?: string | number }>(), { size: '1em' })
 defineOptions({ inheritAttrs: false })
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/icons/src/icons/Discord.vue b/packages/icons/src/icons/Discord.vue
index 9fe5e229..c84c659c 100644
--- a/packages/icons/src/icons/Discord.vue
+++ b/packages/icons/src/icons/Discord.vue
@@ -3,10 +3,12 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
-    fill="currentColor"
+    viewBox="0.02 57.8 511.92 396.3"
     v-bind="$attrs"
-  ><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path></svg>
+  ><path
+    d="M433.7 91a416.5 416.5 0 0 0-105.6-33.2c-4.6 8.2-9.9 19.3-13.5 28.1-39.4-5.9-78.4-5.9-117.1 0-3.7-8.8-9.1-19.9-13.7-28.1-37.1 6.4-72.6 17.7-105.7 33.3-66.8 101-85 199.5-75.9 296.6 44.3 33.1 87.3 53.2 129.6 66.4 10.4-14.4 19.7-29.6 27.7-45.7-15.3-5.8-29.9-13-43.7-21.3 3.7-2.7 7.2-5.6 10.7-8.5 84.2 39.4 175.8 39.4 259 0 3.5 2.9 7.1 5.8 10.7 8.5-13.9 8.3-28.5 15.5-43.8 21.3 8 16 17.3 31.3 27.7 45.7 42.3-13.2 85.3-33.3 129.6-66.4 10.8-112.5-18-210.1-76-296.7M170.9 328c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c.1 28.8-20.2 52.4-46 52.4m170.2 0c-25.3 0-46-23.6-46-52.4s20.3-52.4 46-52.4 46.5 23.6 46 52.4c0 28.8-20.3 52.4-46 52.4"
+    style="fill:#5865f2"
+  /></svg>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/icons/src/icons/Feishu.vue b/packages/icons/src/icons/Feishu.vue
index fc8e5655..78737342 100644
--- a/packages/icons/src/icons/Feishu.vue
+++ b/packages/icons/src/icons/Feishu.vue
@@ -3,10 +3,21 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
-    fill="currentColor"
+    viewBox="62.16 94.5 407.87 324.19"
     v-bind="$attrs"
-  ><path d="M2.616 4.29c-.395-.377-.998.07-.763.565l3.601 7.594a.75.75 0 0 0 .467.399l5.729 1.682c.362.107.362.62 0 .726l-5.729 1.683a.75.75 0 0 0-.467.399l-3.601 7.593c-.235.496.368.942.763.565L22.082 6.812a.75.75 0 0 0-.034-1.1L18.67 2.544a.75.75 0 0 0-.83-.103L2.616 4.29z"></path></svg>
+  ><path
+    d="M274.18 264.785q.515-.517 1.03-1.027c.685-.688 1.372-1.258 2.056-1.945l1.37-1.372 4.118-4.113 5.598-5.601 4.8-4.797 4.575-4.457 4.796-4.688 4.344-4.344 6.059-6.054c1.14-1.145 2.285-2.29 3.543-3.317 2.168-2.054 4.457-4 6.855-5.828 2.172-1.715 4.344-3.312 6.516-4.914 3.082-2.172 6.398-4.344 9.71-6.285 3.204-1.941 6.63-3.656 10.06-5.371 3.199-1.602 6.515-2.973 9.827-4.23 1.829-.684 3.774-1.372 5.602-2.055.914-.344 1.941-.688 2.856-.914-8.57-33.715-24.227-64.575-45.258-90.86-4.114-5.14-10.399-8.113-17.028-8.113H130.754c-3.203 0-4.457 4-1.945 5.941 59.543 43.66 109.144 99.887 145.03 164.801 0-.226.227-.34.34-.457m0 0"
+    style="stroke:none;fill-rule:nonzero;fill:#00d6b9;fill-opacity:1"
+  /><path
+    d="M204.79 418.691c90.288 0 169.03-49.828 210.058-123.543 1.488-2.628 2.859-5.257 4.23-7.882q-3.087 6-6.86 11.312l-2.741 3.77c-1.141 1.488-2.399 2.972-3.657 4.457-1.03 1.144-2.058 2.285-3.086 3.316-2.058 2.172-4.343 4.227-6.629 6.172a53 53 0 0 1-3.886 3.2c-1.598 1.144-3.086 2.284-4.684 3.429-1.031.683-2.058 1.371-3.086 1.941-1.144.684-2.172 1.258-3.316 1.942a131 131 0 0 1-6.969 3.543c-2.059.918-4.117 1.828-6.289 2.515-2.285.801-4.57 1.602-6.969 2.285-3.543.914-7.086 1.715-10.742 2.286-2.629.457-5.258.687-8 .914-2.86.23-5.601.23-8.457.23-3.086 0-6.289-.23-9.488-.57a83 83 0 0 1-7.086-1.031c-2.055-.34-4.113-.801-6.168-1.258-1.031-.227-2.176-.57-3.203-.797-2.973-.8-6.055-1.602-9.028-2.516-1.488-.457-2.972-.914-4.457-1.258-2.172-.683-4.457-1.37-6.629-2.058-1.828-.57-3.656-1.14-5.37-1.711q-2.573-.86-5.145-1.715c-1.14-.344-2.285-.8-3.543-1.144-1.371-.457-2.856-1.028-4.227-1.485-1.027-.344-2.058-.687-2.972-1.027-1.942-.688-4-1.488-5.942-2.172-1.144-.457-2.285-.914-3.43-1.258-1.484-.57-3.085-1.144-4.57-1.828-1.601-.687-3.203-1.258-4.8-1.945-1.028-.457-2.06-.797-3.087-1.258-1.257-.57-2.628-1.027-3.886-1.598-1.028-.457-1.942-.8-2.969-1.258l-3.086-1.37c-.914-.344-1.832-.801-2.746-1.145a44 44 0 0 1-2.512-1.14c-.8-.345-1.715-.802-2.515-1.145-.914-.344-1.715-.801-2.512-1.141-1.031-.457-2.172-1.031-3.203-1.484-1.14-.575-2.285-1.032-3.426-1.602-1.258-.574-2.402-1.144-3.66-1.715-1.027-.457-2.055-1.027-3.082-1.484-54.172-26.973-102.172-63.086-143.09-106.746-2.055-2.172-5.71-.684-5.71 2.289l.112 154.398v12.57c0 7.317 3.543 14.06 9.598 18.172 38.172 24.801 83.773 39.543 132.914 39.543m0 0"
+    style="stroke:none;fill-rule:nonzero;fill:#3370ff;fill-opacity:1"
+  /><path
+    d="M414.84 295.188c0 .113-.113.113-.113.226zl.8-1.489c-.343.457-.574 1.028-.8 1.488m3.793-7.05.226-.457.114-.23q-.17.513-.34.687m0 0"
+    style="stroke:none;fill-rule:nonzero;fill:#133c9a;fill-opacity:1"
+  /><path
+    d="M470.035 201.121c-18.285-9.031-38.86-14.059-60.687-14.059-12.914 0-25.485 1.829-37.371 5.141-1.372.344-2.743.8-4.114 1.258-.914.344-1.941.574-2.855.914-1.945.688-3.774 1.375-5.602 2.059-3.316 1.257-6.629 2.742-9.828 4.23-3.43 1.598-6.742 3.426-10.058 5.371a128 128 0 0 0-9.715 6.285c-2.285 1.602-4.457 3.2-6.512 4.914a154 154 0 0 0-6.86 5.828c-1.14 1.141-2.398 2.172-3.542 3.313l-6.055 6.059-4.344 4.343-4.8 4.684-4.57 4.46-4.802 4.798-11.086 11.086c-.687.687-1.37 1.37-2.058 1.945l-1.028 1.027c-.457.457-1.027 1.028-1.601 1.485-.57.57-1.14 1.031-1.711 1.601a244.4 244.4 0 0 1-49.828 35.313c1.027.457 2.168 1.027 3.199 1.488.8.34 1.715.797 2.512 1.14.8.344 1.715.801 2.515 1.145.801.344 1.602.684 2.516 1.14.914.345 1.828.802 2.742 1.145l3.086 1.371c1.027.457 1.942.801 2.969 1.258 1.258.57 2.629 1.028 3.887 1.598 1.03.46 2.058.8 3.086 1.258 1.601.687 3.199 1.258 4.8 1.945 1.485.57 3.086 1.14 4.57 1.828 1.145.457 2.286.914 3.43 1.258 1.946.684 4 1.484 5.946 2.172a81 81 0 0 1 2.968 1.027c1.371.457 2.856 1.028 4.23 1.485 1.141.343 2.286.8 3.544 1.14q2.567.86 5.14 1.719c1.829.57 3.657 1.14 5.372 1.71 2.171.688 4.457 1.376 6.628 2.06 1.489.457 2.973.914 4.457 1.257 2.973.914 5.942 1.715 9.032 2.512 1.027.344 2.168.574 3.199.8 2.055.458 4.113.915 6.172 1.259 2.398.457 4.683.8 7.082 1.03 3.203.34 6.402.571 9.488.571 2.856 0 5.715 0 8.457-.23 2.63-.227 5.371-.457 8-.914 3.656-.57 7.2-1.371 10.742-2.286 2.399-.683 4.688-1.37 6.973-2.285 2.172-.8 4.227-1.601 6.285-2.515 2.399-1.028 4.684-2.285 6.973-3.543 1.14-.57 2.168-1.258 3.312-1.942 1.028-.687 2.059-1.257 3.086-1.945 1.602-1.027 3.2-2.168 4.684-3.426a52 52 0 0 0 3.887-3.203c2.289-1.941 4.457-4 6.628-6.168 1.032-1.031 2.06-2.172 3.086-3.316 1.258-1.485 2.516-2.969 3.657-4.457.918-1.258 1.828-2.512 2.742-3.77 2.515-3.543 4.8-7.316 6.86-11.199l2.284-4.688 21.145-42.171v.113c6.742-14.742 16.226-28.113 27.656-39.426m0 0"
+    style="stroke:none;fill-rule:nonzero;fill:#133c9a;fill-opacity:1"
+  /></svg>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/icons/src/icons/Qq.vue b/packages/icons/src/icons/Qq.vue
index cf17b46b..0da835d8 100644
--- a/packages/icons/src/icons/Qq.vue
+++ b/packages/icons/src/icons/Qq.vue
@@ -3,10 +3,27 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 24 24"
-    fill="currentColor"
+    viewBox="0 0 121 144"
     v-bind="$attrs"
-  ><path d="M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673"></path></svg>
+  ><path
+    fill="#faab07"
+    d="M60.503 142.237c-12.533 0-24.038-4.195-31.445-10.46-3.762 1.124-8.574 2.932-11.61 5.175-2.6 1.918-2.275 3.874-1.807 4.663 2.056 3.47 35.273 2.216 44.862 1.136zm0 0c12.535 0 24.039-4.195 31.447-10.46 3.76 1.124 8.573 2.932 11.61 5.175 2.598 1.918 2.274 3.874 1.805 4.663-2.056 3.47-35.272 2.216-44.862 1.136zm0 0"
+  /><path d="M60.576 67.119c20.698-.14 37.286-4.147 42.907-5.683 1.34-.367 2.056-1.024 2.056-1.024.005-.189.085-3.37.085-5.01C105.624 27.768 92.58.001 60.5 0 28.42.001 15.375 27.769 15.375 55.401c0 1.642.08 4.822.086 5.01 0 0 .583.615 1.65.913 5.19 1.444 22.09 5.65 43.312 5.795zm56.245 23.02c-1.283-4.129-3.034-8.944-4.808-13.568 0 0-1.02-.126-1.537.023-15.913 4.623-35.202 7.57-49.9 7.392h-.153c-14.616.175-33.774-2.737-49.634-7.315-.606-.175-1.802-.1-1.802-.1-1.774 4.624-3.525 9.44-4.808 13.568-6.119 19.69-4.136 27.838-2.627 28.02 3.239.392 12.606-14.821 12.606-14.821 0 15.459 13.957 39.195 45.918 39.413h.848c31.96-.218 45.917-23.954 45.917-39.413 0 0 9.368 15.213 12.607 14.822 1.508-.183 3.491-8.332-2.627-28.021" /><path
+    fill="#fff"
+    d="M49.085 40.824c-4.352.197-8.07-4.76-8.304-11.063-.236-6.305 3.098-11.576 7.45-11.773 4.347-.195 8.064 4.76 8.3 11.065.238 6.306-3.097 11.577-7.446 11.771m31.133-11.063c-.233 6.302-3.951 11.26-8.303 11.063-4.35-.195-7.684-5.465-7.446-11.77.236-6.305 3.952-11.26 8.3-11.066 4.352.197 7.686 5.468 7.449 11.773"
+  /><path
+    fill="#faab07"
+    d="M87.952 49.725C86.79 47.15 75.077 44.28 60.578 44.28h-.156c-14.5 0-26.212 2.87-27.375 5.446a.863.863 0 00-.085.367.88.88 0 00.16.496c.98 1.427 13.985 8.487 27.3 8.487h.156c13.314 0 26.319-7.058 27.299-8.487a.873.873 0 00.16-.498.856.856 0 00-.085-.365"
+  /><path d="M54.434 29.854c.199 2.49-1.167 4.702-3.046 4.943-1.883.242-3.568-1.58-3.768-4.07-.197-2.492 1.167-4.704 3.043-4.944 1.886-.244 3.574 1.58 3.771 4.07m11.956.833c.385-.689 3.004-4.312 8.427-2.993 1.425.347 2.084.857 2.223 1.057.205.296.262.718.053 1.286-.412 1.126-1.263 1.095-1.734.875-.305-.142-4.082-2.66-7.562 1.097-.24.257-.668.346-1.073.04-.407-.308-.574-.93-.334-1.362" /><path
+    fill="#fff"
+    d="M60.576 83.08h-.153c-9.996.12-22.116-1.204-33.854-3.518-1.004 5.818-1.61 13.132-1.09 21.853 1.316 22.043 14.407 35.9 34.614 36.1h.82c20.208-.2 33.298-14.057 34.616-36.1.52-8.723-.087-16.035-1.092-21.854-11.739 2.315-23.862 3.64-33.86 3.518"
+  /><path
+    fill="#eb1923"
+    d="M32.102 81.235v21.693s9.937 2.004 19.893.616V83.535c-6.307-.357-13.109-1.152-19.893-2.3"
+  /><path
+    fill="#eb1923"
+    d="M105.539 60.412s-19.33 6.102-44.963 6.275h-.153c-25.591-.172-44.896-6.255-44.962-6.275L8.987 76.57c16.193 4.882 36.261 8.028 51.436 7.845h.153c15.175.183 35.242-2.963 51.437-7.845zm0 0"
+  /></svg>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/icons/src/icons/Telegram.vue b/packages/icons/src/icons/Telegram.vue
index ad93bba5..1774df47 100644
--- a/packages/icons/src/icons/Telegram.vue
+++ b/packages/icons/src/icons/Telegram.vue
@@ -3,9 +3,37 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 640 640"
+    viewBox="0 0 512 512"
     v-bind="$attrs"
-  ><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM435 240.7C431.3 279.9 415.1 375.1 406.9 419C403.4 437.6 396.6 443.8 390 444.4C375.6 445.7 364.7 434.9 350.7 425.7C328.9 411.4 316.5 402.5 295.4 388.5C270.9 372.4 286.8 363.5 300.7 349C304.4 345.2 367.8 287.5 369 282.3C369.2 281.6 369.3 279.2 367.8 277.9C366.3 276.6 364.2 277.1 362.7 277.4C360.5 277.9 325.6 300.9 258.1 346.5C248.2 353.3 239.2 356.6 231.2 356.4C222.3 356.2 205.3 351.4 192.6 347.3C177.1 342.3 164.7 339.6 165.8 331C166.4 326.5 172.5 322 184.2 317.3C256.5 285.8 304.7 265 328.8 255C397.7 226.4 412 221.4 421.3 221.2C423.4 221.2 427.9 221.7 430.9 224.1C432.9 225.8 434.1 228.2 434.4 230.8C434.9 234 435 237.3 434.8 240.6z"/></svg>
+  ><linearGradient
+    id="a"
+    x1="256"
+    x2="256"
+    y1="2"
+    y2="514"
+    gradientTransform="matrix(1 0 0 -1 0 514)"
+    gradientUnits="userSpaceOnUse"
+  ><stop
+    offset="0"
+    style="stop-color:#1d93d2"
+  /><stop
+    offset="1"
+    style="stop-color:#38b0e3"
+  /></linearGradient><circle
+    cx="256"
+    cy="256"
+    r="256"
+    style="fill:url(#a)"
+  /><path
+    d="m173.3 274.7 30.4 84.1s3.8 7.9 7.9 7.9 64.5-62.9 64.5-62.9l67.3-129.9-169 79.1z"
+    style="fill:#c8daea"
+  /><path
+    d="m213.6 296.3-5.8 62s-2.4 19 16.5 0c19-19 37.2-33.6 37.2-33.6"
+    style="fill:#a9c6d8"
+  /><path
+    d="m173.8 277.7-62.5-20.4s-7.5-3-5.1-9.9c.5-1.4 1.5-2.6 4.5-4.7C124.6 233.1 367 146 367 146s6.8-2.3 10.9-.8c2 .6 3.6 2.3 4 4.4.4 1.8.6 3.7.5 5.5 0 1.6-.2 3.1-.4 5.4-1.5 23.8-45.7 201.6-45.7 201.6s-2.6 10.4-12.1 10.8c-4.7.2-9.3-1.6-12.6-4.9-18.6-16-82.8-59.2-97-68.6-.6-.4-1.1-1.1-1.2-1.9-.2-1 .9-2.2.9-2.2s111.8-99.4 114.8-109.8c.2-.8-.6-1.2-1.8-.9-7.4 2.7-136.2 84.1-150.4 93-.9.2-2 .3-3.1.1"
+    style="fill:#fff"
+  /></svg>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/icons/src/icons/Wechat.vue b/packages/icons/src/icons/Wechat.vue
index 6279eaad..2112d6e9 100644
--- a/packages/icons/src/icons/Wechat.vue
+++ b/packages/icons/src/icons/Wechat.vue
@@ -3,9 +3,16 @@
     xmlns="http://www.w3.org/2000/svg"
     :width="size"
     :height="size"
-    viewBox="0 0 640 640"
+    viewBox="0 0 300 300"
     v-bind="$attrs"
-  ><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M417.2 231.6C423.6 231.6 429.8 231.9 436 232.7C419.4 154.3 335.3 96 239.7 96C132.5 96 45 168.8 45 261.4C45 314.8 74.3 358.9 122.9 393L103.6 451.6L171.6 417.5C196 422.3 215.4 427.2 239.8 427.2C246 427.2 251.9 426.9 258.1 426.4C254.1 413.5 251.9 399.8 251.9 385.6C251.8 300.7 324.8 231.6 417.2 231.6zM312.7 178.7C327.2 178.7 336.9 188.4 336.9 203.1C336.9 217.6 327.2 227.3 312.7 227.3C297.9 227.3 283.4 217.6 283.4 203.1C283.5 188.4 298 178.7 312.7 178.7zM176.3 227.3C161.8 227.3 147 217.6 147 203.1C147 188.3 161.8 178.7 176.3 178.7C191.1 178.7 200.7 188.4 200.7 203.1C200.7 217.7 191.1 227.3 176.3 227.3zM595 383.4C595 305.5 517.1 242.1 429.6 242.1C336.9 242.1 264.2 305.5 264.2 383.4C264.2 461.3 337 524.7 429.6 524.7C448.9 524.7 468.5 519.6 488.2 514.8L541.6 544.1L526.8 495.5C566 466.1 595 427.2 595 383.4zM375.9 358.9C366.2 358.9 356.6 349.2 356.6 339.3C356.6 329.6 366.3 320 375.9 320C390.7 320 400.3 329.7 400.3 339.3C400.3 349.3 390.6 358.9 375.9 358.9zM483 358.9C473.3 358.9 463.7 349.2 463.7 339.3C463.7 329.6 473.4 320 483 320C497.5 320 507.4 329.7 507.4 339.3C507.5 349.3 497.5 358.9 483 358.9z"/></svg>
+  ><path
+     fill="#2DC100"
+     d="M300 255c0 24.854-20.147 45-45 45H45c-24.854 0-45-20.146-45-45V45C0 20.147 20.147 0 45 0h210c24.853 0 45 20.147 45 45v210z"
+   />
+    <g fill="#FFF">
+      <path d="M200.803 111.88c-24.213 1.265-45.268 8.605-62.362 25.188-17.271 16.754-25.155 37.284-23 62.734-9.464-1.172-18.084-2.462-26.753-3.192-2.994-.252-6.547.106-9.083 1.537-8.418 4.75-16.488 10.113-26.053 16.092 1.755-7.938 2.891-14.889 4.902-21.575 1.479-4.914.794-7.649-3.733-10.849-29.066-20.521-41.318-51.232-32.149-82.85 8.483-29.25 29.315-46.989 57.621-56.236 38.635-12.62 82.054.253 105.547 30.927 8.485 11.08 13.688 23.516 15.063 38.224zm-111.437-9.852c.223-5.783-4.788-10.993-10.74-11.167-6.094-.179-11.106 4.478-11.284 10.483-.18 6.086 4.475 10.963 10.613 11.119 6.085.154 11.186-4.509 11.411-10.435zm58.141-11.171c-5.974.11-11.022 5.198-10.916 11.004.109 6.018 5.061 10.726 11.204 10.652 6.159-.074 10.83-4.832 10.772-10.977-.051-6.032-4.981-10.79-11.06-10.679z" />
+      <path d="M255.201 262.83c-7.667-3.414-14.7-8.536-22.188-9.318-7.459-.779-15.3 3.524-23.104 4.322-23.771 2.432-45.067-4.193-62.627-20.432-33.397-30.89-28.625-78.254 10.014-103.568 34.341-22.498 84.704-14.998 108.916 16.219 21.129 27.24 18.646 63.4-7.148 86.284-7.464 6.623-10.15 12.073-5.361 20.804.884 1.612.985 3.653 1.498 5.689zm-87.274-84.499c4.881.005 8.9-3.815 9.085-8.636.195-5.104-3.91-9.385-9.021-9.406-5.06-.023-9.299 4.318-9.123 9.346.166 4.804 4.213 8.69 9.059 8.696zm56.261-18.022c-4.736-.033-8.76 3.844-8.953 8.629-.205 5.117 3.772 9.319 8.836 9.332 4.898.016 8.768-3.688 8.946-8.562.19-5.129-3.789-9.364-8.829-9.399z" />
+    </g></svg>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/ui/DESIGN.md b/packages/ui/DESIGN.md
new file mode 100644
index 00000000..ff006a7c
--- /dev/null
+++ b/packages/ui/DESIGN.md
@@ -0,0 +1,115 @@
+# Design System
+
+## Overview
+
+A modern, clean, and highly functional interface designed for the Memoh AI Agent platform. The design emphasizes a "high-contrast, flat" aesthetic. It moves away from mushy, ubiquitous soft shadows (`shadow-sm`) and brand-colored primary buttons, favoring a starker monochrome foundation with pure whites, light greys, and pure blacks. Brand colors are used extremely sparingly for distinct active states and primary conversion actions (like the chat "Send" button).
+
+## Colors
+
+- **Primary** (`#8b56e3`): Brand purple. Its usage is heavily restricted to specific active indicators (sidebar selection, "Send" action, status dots). It is **not** used for generic primary buttons.
+- **Primary Foreground** (`#fafafa`): Used heavily as the background for sidebars (Navigation, Session List, Metadata) to separate them from the main content area.
+- **Background** (`#ffffff`): Pure white, used for the central chat area, cards, alerts, and major input fields.
+- **Foreground** (`#171717` or `#0a0a0a`): Near black. Now acts as the default visual weight for **Primary Buttons** and **Default Badges**.
+- **Muted Foreground** (`#737373`): Mid-grey, extensively used for timestamps, secondary labels, placeholders, and inactive icons.
+- **Accent** (`#f5f5f5`): Light grey, used for hover states, secondary buttons, code/badge backgrounds, and model selectors.
+- **Border** (`#e5e5e5`): Very light grey, used uniformly for all structural dividers and component borders.
+- **Destructive** (`#dc2626`): Pure red. Used exclusively for text or icons in critical actions (e.g., delete). It does not use colored backgrounds (e.g., no `bg-red-50`).
+
+## Typography
+
+- **Headline Font**: Inter / Noto Sans SC / Noto Sans JP
+- **Body Font**: Inter / Noto Sans SC / Noto Sans JP
+- **Mono Font**: Geist Mono / Menlo (used for code blocks, component names in collapsibles, and tags like `thinking`, `tool_call`)
+
+Headlines and key labels use medium/semibold weights. Body text uses regular weight at 14px. Inputs use 16px to prevent iOS zoom. Secondary information uses 11px or 12px.
+
+## Elevation
+
+The system employs a **bimodal elevation strategy**:
+
+1. **Absolutely Flat (Zero Elevation):** Interactive and atomic elements like Buttons, Inputs, Alerts, Badges, and Collapsibles have **zero shadows**. The default `shadow-sm` from Shadcn must be stripped out. Hierarchy is defined purely by 1px borders and background contrast.
+2. **High Floating (Shadow-lg/md):**
+   - Large layout containers that sit above the main canvas (like a central Login `Card`) use a pronounced `shadow-lg` to starkly differentiate themselves from the flat UI underneath.
+   - Popovers, Dropdowns, and Combobox menus use a tightly controlled `shadow-md` without thick borders.
+
+## Components
+
+### Base Atoms
+
+- **Avatars**: 26px rounded full. Default fallback uses `accent`. Status badges require a 2px knockout border matching the background.
+- **Badges**: 4px radius (`rounded-sm`). Default is pure black (`bg-foreground text-background`). Secondary is `bg-accent text-foreground`. Destructive is pure red background. Warning is `bg-amber-500 text-white`. Outline is `bg-background border-border text-foreground`. Supports `size="sm"` (`text-[11px] px-2`) alongside default.
+- **BadgeCount**: Circular numeric counter. `rounded-full`, `h-[18px] min-w-[18px] px-1`, `text-[11px] font-medium`. Variants: default (`bg-foreground text-background`), destructive (`bg-destructive text-destructive-foreground`), secondary (`bg-accent text-foreground`). Values above 99 display as "99+".
+- **Buttons**:
+  - Primary (Default): 8px radius, **`foreground` (black) background**, white text. Flat.
+  - Secondary / Outline: 8px radius, `accent` background, 1px `border`. Flat.
+  - Ghost: Icon buttons use `muted-foreground` defaulting to `foreground` on hover.
+  - Grouped (`ButtonGroup`): Unified outer border (`border-border`, 8px radius). Internal items divided by `border-r` or `border-b`, no individual borders or radiuses.
+  - Brand Primary: Use `variant="primary"` explicitly for Send button or active CTA. This is the **only** case where `bg-primary` is used.
+- **Inputs**: Flat design. 1px `border`, pure `background` fill, 8px/10px outer radius. Text must be `text-[16px]`. Focus state uses a stark black/grey ring, **not** primary purple.
+- **Checkboxes/Radios**: Flat, pure white background (`bg-background`). 1px `border`. The checked state marker (tick/dot) is `foreground` (black), avoiding brand colors.
+- **Separators**: Uniformly use the 1px `border` color. Do not use padding/margins that detach them from the container edges (e.g., use full width `border-b` in menus instead of `<Separator mx-1>`).
+
+### Containers & Layouts
+
+- **Cards**: The exception to the flat rule. 12px radius (`rounded-xl`), pure `background`, 1px `border`, and strong `shadow-lg`. Content spacing is tight (`p-6`, with 6px gap between title and description).
+- **Alerts**: Flat (`bg-background`), 1px `border`, 10px radius (`rounded-[10px]`). No variant-specific colored backgrounds; errors use red text/icons but keep the white background.
+- **Collapsible**: Flat sub-panels. `bg-background` inside a `border-border` container, items divided by `border-b` (no bottom border on last child). Uses `font-mono` for code-related items.
+- **Dropdowns / Popovers / Comboboxes**:
+  - `bg-background` with `border-border` and `shadow-md`.
+  - 8px outer radius.
+  - Items use 4px inner radius and `text-sm font-normal text-foreground`.
+  - Hover states use `bg-accent` and `text-foreground` (no brand color tints).
+  - Group separators must be full-bleed `border-b`.
+- **Breadcrumb**: Minimalist. 14px icons, 4px-6px gaps. Active page is `text-foreground font-normal`, inactive is `text-muted-foreground`.
+- **Sidebar**:
+  - Container uses `primary-foreground` background.
+  - Active items use `accent` background with a 2px `primary` left border indicator.
+
+### Items
+
+- Global: `rounded-lg` (8px), `p-4`, `shadow-none`, `gap-4`.
+- Variants:
+  - Default: `bg-background`, no border.
+  - Outline: `bg-background` + `border border-border`.
+  - Muted: `bg-accent`, no border.
+
+### Pagination
+
+- Default page buttons: `bg-background border border-border text-foreground`, `rounded-lg`, `size-9`.
+- Active/current page: `bg-foreground text-background border-foreground` (black bg, white text — no brand purple).
+- Hover: `hover:bg-accent`.
+- Disabled: `opacity-50 text-muted-foreground`.
+- Previous/Next: ghost style, transparent bg, hover `bg-accent`.
+
+### Complex / Domain Specific
+
+- **Sonner (Toast Notifications)**: Uses `bg-background` with `border border-border` and `shadow-md`. Border radius is `var(--radius-lg)` (10px). Title: `text-sm font-medium text-foreground`. Description: `text-xs text-muted-foreground`. Status icons are `size-4`. Action buttons use `bg-foreground text-background rounded-sm text-xs font-medium`. Supports 6 states: default (with action button), loading (spinner), success, info, warning, error.
+- **Table**: Wrapped in a container with `border border-border rounded-sm` (6px). Header row height 41px with `py-[10px]`, data rows 38px with `py-[8.5px]`. Footer uses `bg-muted/50`. Empty state centers an icon + `text-muted-foreground` message in `h-[204px]`. Caption is centered `text-sm text-muted-foreground`.
+- **TagsInput**: Flat design. `rounded-lg` (no shadow). Focus state uses `ring-ring/20 ring-2` (not `ring-[3px]`).
+- **Chat Input (Main Area)**:
+  - Flat container (`shadow-none`), `border-border`, 10px radius.
+  - Divided horizontally by top/bottom 1px borders (`border-t`, `border-b`).
+  - Send button uniquely retains `bg-primary` for high conversion focus.
+  - Model selector (Badge style) floats inside the top border area, using `bg-accent` or `bg-background` depending on state.
+- **OTP Input (PinInput)**: Flat group built on reka-ui `PinInput`. Each cell is `size-9 bg-background text-sm shadow-none`. The first cell gets `border border-border rounded-l-lg`, middle cells use `border-y border-r border-border` (no left border to avoid doubling), and the last cell adds `rounded-r-lg`. Focus state applies `border-2 border-ring` (dark ring, not primary purple). Supports an optional `PinInputSeparator` between groups.
+
+## AI Image Generation & Component Reuse Rules
+
+To ensure visual consistency when generating images or extrapolating designs via AI based on this system, strictly adhere to the following composition rules:
+
+1. **The "Flat Atom" Law:** If it's a basic interactive element (button, badge, input, toggle, checkbox), it **cannot** have a shadow. It must rely on `#e5e5e5` borders and background contrast (`#ffffff` vs `#f5f5f5` vs `#0a0a0a`).
+2. **The "Menu Underline" Law:** Whenever rendering a list of items inside a container (Dropdowns, Comboboxes, Sidebar Sub-menus, Collapsibles), items must be divided by a full-width, 1px horizontal line (`border-b`), terminating cleanly on the last item. Do not leave floating separators with margins.
+3. **The "Monochrome Hover" Law:** Focus and hover states for secondary items must always snap to `bg-[#f5f5f5]` and `text-[#0a0a0a]`. Never apply the brand purple (`#8b56e3`) as a background highlight for menus.
+4. **The "Bimodal Elevation" Trigger:** Only use heavy, soft shadows (like `shadow-lg`) when rendering a standalone focal piece (like a login modal or a central dashboard card) that sits distinctly above a complex, flat background layer.
+5. **The "Purple Scarcity" Law:** The brand purple (`#8b56e3`) is the most expensive pixel on the screen. It can only be used for:
+   - The absolute primary completion action on a screen (e.g., the Chat "Send" button).
+   - Micro-indicators of "current active state" (e.g., a 2px vertical bar next to an active sidebar menu item, or a 5px status dot).
+
+## Do's and Don'ts
+
+- **Do** use `bg-foreground` (black) for standard primary actions like "Login" or "Register" instead of the brand purple.
+- **Don't** use `shadow-sm` on buttons, inputs, or alerts. Keep atomic components strictly flat.
+- **Do** use `shadow-lg` for large focal cards to make them pop against the flat UI.
+- **Don't** use colored backgrounds for Alert or Badge variants (like `bg-red-50`). Keep them white and use text/icon color to convey meaning (or solid red for destructive badges).
+- **Do** maintain the 1px `#e5e5e5` (`--border`) across all structural dividing lines, ensuring they connect edge-to-edge (no floating separators).
+- **Don't** use primary colors for hover or active states in standard dropdowns and menus; stick to `bg-accent` and `text-foreground`.
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 354bf85f..dcdf4b7a 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1 +1,31 @@
 # @memohai/ui
+
+UI components for Memoh.
+
+## Installation
+
+```bash
+npm install @memohai/ui
+```
+
+## Usage
+
+Import the CSS file in your `style.css` file.
+
+```css
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@memohai/ui/style.css";
+```
+
+And then you can use the components in your Vue components.
+
+```vue
+<script setup>
+import { Button } from '@memohai/ui';
+</script>
+
+<template>
+  <Button>Click me</Button>
+</template>
+```
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 58558d5c..6daf6ba9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,6 +30,7 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.2.2",
     "vee-validate": "^4.15.1",
+    "vue-input-otp": "^0.3.2",
     "vue-sonner": "^2.0.9",
     "zod": "3.25.76"
   },
diff --git a/packages/ui/src/components/alert/AlertDescription.vue b/packages/ui/src/components/alert/AlertDescription.vue
index 2fe52c26..c99ce433 100644
--- a/packages/ui/src/components/alert/AlertDescription.vue
+++ b/packages/ui/src/components/alert/AlertDescription.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
+    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-xs [&_p]:leading-relaxed', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/ui/src/components/alert/index.ts b/packages/ui/src/components/alert/index.ts
index c3e896bd..dfda7b0f 100644
--- a/packages/ui/src/components/alert/index.ts
+++ b/packages/ui/src/components/alert/index.ts
@@ -6,13 +6,13 @@ export { default as AlertDescription } from './AlertDescription.vue'
 export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
-  'relative w-full rounded-xl border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current shadow-sm',
+  'relative w-full rounded-[10px] border px-4 py-3 text-xs grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {
     variants: {
       variant: {
-        default: 'bg-card text-card-foreground border-border',
+        default: 'bg-background text-foreground border-border',
         destructive:
-          'text-destructive bg-red-50 dark:bg-red-950/20 border-red-200 dark:border-red-900 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'text-destructive bg-background border-border [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/badge/Badge.vue b/packages/ui/src/components/badge/Badge.vue
index 00e982a4..c1422e3e 100644
--- a/packages/ui/src/components/badge/Badge.vue
+++ b/packages/ui/src/components/badge/Badge.vue
@@ -9,6 +9,7 @@ import { badgeVariants } from '.'
 
 const props = defineProps<PrimitiveProps & {
   variant?: BadgeVariants['variant']
+  size?: BadgeVariants['size']
   class?: HTMLAttributes['class']
 }>()
 
@@ -18,7 +19,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
   <Primitive
     data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
+    :class="cn(badgeVariants({ variant, size }), props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/packages/ui/src/components/badge/BadgeCount.vue b/packages/ui/src/components/badge/BadgeCount.vue
new file mode 100644
index 00000000..4e4cc9ea
--- /dev/null
+++ b/packages/ui/src/components/badge/BadgeCount.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+import { computed } from 'vue'
+import { cn } from '#/lib/utils'
+
+const badgeCountVariants = cva(
+  'inline-flex items-center justify-center rounded-full h-[18px] min-w-[18px] px-1 text-[11px] font-medium font-sans tabular-nums',
+  {
+    variants: {
+      variant: {
+        default: 'bg-foreground text-background',
+        destructive: 'bg-destructive text-destructive-foreground',
+        secondary: 'bg-accent text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type BadgeCountVariants = VariantProps<typeof badgeCountVariants>
+
+const props = defineProps<{
+  count: number
+  max?: number
+  variant?: BadgeCountVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+
+const displayCount = computed(() => {
+  const max = props.max ?? 99
+  return props.count > max ? `${max}+` : `${props.count}`
+})
+</script>
+
+<template>
+  <span
+    data-slot="badge-count"
+    :class="cn(badgeCountVariants({ variant }), props.class)"
+  >
+    {{ displayCount }}
+  </span>
+</template>
diff --git a/packages/ui/src/components/badge/index.ts b/packages/ui/src/components/badge/index.ts
index 89117ea6..8a92e887 100644
--- a/packages/ui/src/components/badge/index.ts
+++ b/packages/ui/src/components/badge/index.ts
@@ -2,24 +2,32 @@ import type { VariantProps } from 'class-variance-authority'
 import { cva } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
+export { default as BadgeCount } from './BadgeCount.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-full border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-all overflow-hidden',
+  'inline-flex items-center justify-center rounded-sm border px-2.5 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none transition-all overflow-hidden',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground shadow-sm [a&]:hover:bg-primary/90',
+          'border-transparent bg-foreground text-background [a&]:hover:bg-foreground/90',
         secondary:
-          'border-transparent bg-secondary text-secondary-foreground shadow-sm [a&]:hover:bg-secondary/80',
+          'border-transparent bg-accent text-foreground [a&]:hover:bg-accent/80',
         destructive:
-         'border-transparent bg-destructive text-destructive-foreground shadow-sm [a&]:hover:bg-destructive/90',
+          'border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90',
+        warning:
+          'border-transparent bg-amber-500 text-white [a&]:hover:bg-amber-500/90',
         outline:
-          'text-foreground border-border [a&]:hover:bg-accent',
+          'text-foreground border-border bg-background [a&]:hover:bg-accent',
+      },
+      size: {
+        default: 'px-2.5 py-0.5 text-xs',
+        sm: 'px-2 py-0 text-[11px]',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
   },
 )
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
index 4279d841..f7d4126b 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbEllipsis.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="breadcrumb-ellipsis"
     role="presentation"
     aria-hidden="true"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
+    :class="cn('flex [&>svg]:size-3.5 size-9 items-center justify-center', props.class)"
   >
     <slot>
       <MoreHorizontal class="size-4" />
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
index d5984a44..276bc426 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbLink.vue
@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
     data-slot="breadcrumb-link"
     :as="as"
     :as-child="asChild"
-    :class="cn('hover:text-foreground transition-colors', props.class)"
+    :class="cn('hover:text-foreground transition-colors text-muted-foreground', props.class)"
   >
     <slot />
   </Primitive>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
index e5c03320..95764e7b 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbList.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <ol
     data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs break-words sm:gap-2.5', props.class)"
   >
     <slot />
   </ol>
diff --git a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
index 7e0b0062..8bcfc287 100644
--- a/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
+++ b/packages/ui/src/components/breadcrumb/BreadcrumbSeparator.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="breadcrumb-separator"
     role="presentation"
     aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
+    :class="cn('[&>svg]:size-3.5 text-muted-foreground', props.class)"
   >
     <slot>
       <ChevronRight />
diff --git a/packages/ui/src/components/button-group/ButtonGroupText.vue b/packages/ui/src/components/button-group/ButtonGroupText.vue
index dd965a45..de6e2fff 100644
--- a/packages/ui/src/components/button-group/ButtonGroupText.vue
+++ b/packages/ui/src/components/button-group/ButtonGroupText.vue
@@ -22,7 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
     :data-orientation="props.orientation"
     :as="as"
     :as-child="asChild"
-    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    :class="cn('bg-muted flex items-center gap-2 rounded-md border px-4 text-xs font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
   >
     <slot />
   </Primitive>
diff --git a/packages/ui/src/components/button-group/index.ts b/packages/ui/src/components/button-group/index.ts
index c9e791a4..8de70999 100644
--- a/packages/ui/src/components/button-group/index.ts
+++ b/packages/ui/src/components/button-group/index.ts
@@ -6,7 +6,7 @@ export { default as ButtonGroupSeparator } from './ButtonGroupSeparator.vue'
 export { default as ButtonGroupText } from './ButtonGroupText.vue'
 
 export const buttonGroupVariants = cva(
-  'flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*=\'w-\'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2',
+  'bg-inherit border border-border shadow-sm rounded-lg [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-border flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*=\'w-\'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2',
   {
     variants: {
       orientation: {
@@ -15,6 +15,11 @@ export const buttonGroupVariants = cva(
         vertical:
           'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
       },
+      size: {
+        sm: 'h-8',
+        default: 'h-9',
+        lg:'h-10'
+      }
     },
     defaultVariants: {
       orientation: 'horizontal',
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/button/index.ts
index 167f02ff..e36be55f 100644
--- a/packages/ui/src/components/button/index.ts
+++ b/packages/ui/src/components/button/index.ts
@@ -4,20 +4,21 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-xs font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/30 cursor-pointer',
   {
     variants: {
       variant: {
         default:
-          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground shadow hover:bg-destructive/90',
+          'bg-foreground text-background hover:bg-foreground/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-border bg-card shadow-sm hover:bg-accent',
+          'border border-border bg-background hover:bg-accent',
         secondary:
-          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+          'bg-accent text-foreground border border-border hover:bg-accent/80',
         ghost:
-          'hover:bg-accent hover:text-accent-foreground',
+          'hover:bg-accent hover:text-accent-foreground bg-transparent text-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
+        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',
diff --git a/packages/ui/src/components/card/Card.vue b/packages/ui/src/components/card/Card.vue
index 28c569a1..0825ef1a 100644
--- a/packages/ui/src/components/card/Card.vue
+++ b/packages/ui/src/components/card/Card.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="card"
     :class="
       cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-2xl border border-border py-6 transition-all',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border border-border py-6 transition-all',
         props.class,
       )
     "
diff --git a/packages/ui/src/components/card/CardDescription.vue b/packages/ui/src/components/card/CardDescription.vue
index cfc262a0..c47572c0 100644
--- a/packages/ui/src/components/card/CardDescription.vue
+++ b/packages/ui/src/components/card/CardDescription.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <p
     data-slot="card-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
   >
     <slot />
   </p>
diff --git a/packages/ui/src/components/checkbox/Checkbox.vue b/packages/ui/src/components/checkbox/Checkbox.vue
index 33e2ce89..49a2ffe9 100644
--- a/packages/ui/src/components/checkbox/Checkbox.vue
+++ b/packages/ui/src/components/checkbox/Checkbox.vue
@@ -21,9 +21,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'peer size-4 shrink-0 rounded border border-border shadow-sm transition-all outline-none',
-        'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary',
-        'focus-visible:ring-2 focus-visible:ring-primary/20',
+        'peer size-4 shrink-0 rounded border border-border bg-background transition-all outline-none',
+        'data-[state=checked]:bg-background data-[state=checked]:text-text-foreground data-[state=checked]:border-border',
+        'focus-visible:ring-2 focus-visible:ring-ring/20',
         'disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )"
diff --git a/packages/ui/src/components/collapsible/CollapsibleContent.vue b/packages/ui/src/components/collapsible/CollapsibleContent.vue
index 918f8b5b..7761d170 100644
--- a/packages/ui/src/components/collapsible/CollapsibleContent.vue
+++ b/packages/ui/src/components/collapsible/CollapsibleContent.vue
@@ -9,6 +9,7 @@ const props = defineProps<CollapsibleContentProps>()
   <CollapsibleContent
     data-slot="collapsible-content"
     v-bind="props"
+    class="*:border-b *:border-x *:first-of-type:border-t *:first-of-type:rounded-t-md *:last-of-type:rounded-b-md"
   >
     <slot />
   </CollapsibleContent>
diff --git a/packages/ui/src/components/combobox/ComboboxEmpty.vue b/packages/ui/src/components/combobox/ComboboxEmpty.vue
index 74334285..138f7e6f 100644
--- a/packages/ui/src/components/combobox/ComboboxEmpty.vue
+++ b/packages/ui/src/components/combobox/ComboboxEmpty.vue
@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, 'class')
   <ComboboxEmpty
     data-slot="combobox-empty"
     v-bind="delegatedProps"
-    :class="cn('py-6 text-center text-sm text-muted-foreground', props.class)"
+    :class="cn('py-6 text-center text-xs text-muted-foreground', props.class)"
   >
     <slot />
   </ComboboxEmpty>
diff --git a/packages/ui/src/components/combobox/ComboboxInput.vue b/packages/ui/src/components/combobox/ComboboxInput.vue
index d89881a2..bd2e5536 100644
--- a/packages/ui/src/components/combobox/ComboboxInput.vue
+++ b/packages/ui/src/components/combobox/ComboboxInput.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ComboboxInput
       data-slot="command-input"
       :class="cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden',
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-xs outline-hidden',
         'placeholder:text-muted-foreground',
         'disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
diff --git a/packages/ui/src/components/combobox/ComboboxItem.vue b/packages/ui/src/components/combobox/ComboboxItem.vue
index c2840d42..211b54a3 100644
--- a/packages/ui/src/components/combobox/ComboboxItem.vue
+++ b/packages/ui/src/components/combobox/ComboboxItem.vue
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="combobox-item"
     v-bind="forwarded"
     :class="cn(
-      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors',
+      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-hidden select-none transition-colors',
       'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground',
       '[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/packages/ui/src/components/combobox/ComboboxList.vue b/packages/ui/src/components/combobox/ComboboxList.vue
index 9f5dd148..090670c3 100644
--- a/packages/ui/src/components/combobox/ComboboxList.vue
+++ b/packages/ui/src/components/combobox/ComboboxList.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
         'z-50 w-[200px] rounded-lg border border-border bg-popover text-popover-foreground',
-        'origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-lg outline-none',
+        'origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class
diff --git a/packages/ui/src/components/command/Command.vue b/packages/ui/src/components/command/Command.vue
new file mode 100644
index 00000000..0eb2f334
--- /dev/null
+++ b/packages/ui/src/components/command/Command.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { reactive, ref, watch } from 'vue'
+import { cn } from '#/lib/utils'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+  search: '',
+  filtered: {
+    /** The count of all visible items. */
+    count: 0,
+    /** Map from visible item id to its search score. */
+    items: new Map() as Map<string, number>,
+    /** Set of groups with at least one visible item. */
+    groups: new Set() as Set<string>,
+  },
+})
+
+function filterItems() {
+  if (!filterState.search) {
+    filterState.filtered.count = allItems.value.size
+    // Do nothing, each item will know to show itself because search is empty
+    return
+  }
+
+  // Reset the groups
+  filterState.filtered.groups = new Set()
+  let itemCount = 0
+
+  // Check which items should be included
+  for (const [id, value] of allItems.value) {
+    const score = contains(value, filterState.search)
+    filterState.filtered.items.set(id, score ? 1 : 0)
+    if (score)
+      itemCount++
+  }
+
+  // Check which groups have at least 1 item shown
+  for (const [groupId, group] of allGroups.value) {
+    for (const itemId of group) {
+      if (filterState.filtered.items.get(itemId)! > 0) {
+        filterState.filtered.groups.add(groupId)
+        break
+      }
+    }
+  }
+
+  filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+  filterItems()
+})
+
+provideCommandContext({
+  allItems,
+  allGroups,
+  filterState,
+})
+</script>
+
+<template>
+  <ListboxRoot
+    data-slot="command"
+    v-bind="forwarded"
+    :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+  >
+    <slot />
+  </ListboxRoot>
+</template>
diff --git a/packages/ui/src/components/command/CommandDialog.vue b/packages/ui/src/components/command/CommandDialog.vue
new file mode 100644
index 00000000..f43e12c5
--- /dev/null
+++ b/packages/ui/src/components/command/CommandDialog.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '#/components/dialog'
+import Command from './Command.vue'
+
+const props = withDefaults(defineProps<DialogRootProps & {
+  title?: string
+  description?: string
+}>(), {
+  title: 'Command Palette',
+  description: 'Search for a command to run...',
+})
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog
+    v-slot="slotProps"
+    v-bind="forwarded"
+  >
+    <DialogContent class="overflow-hidden p-0 ">
+      <DialogHeader class="sr-only">
+        <DialogTitle>{{ title }}</DialogTitle>
+        <DialogDescription>{{ description }}</DialogDescription>
+      </DialogHeader>
+      <Command>
+        <slot v-bind="slotProps" />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/packages/ui/src/components/command/CommandEmpty.vue b/packages/ui/src/components/command/CommandEmpty.vue
new file mode 100644
index 00000000..babefcc2
--- /dev/null
+++ b/packages/ui/src/components/command/CommandEmpty.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '#/lib/utils'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+  <Primitive
+    v-if="isRender"
+    data-slot="command-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-xs', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/packages/ui/src/components/command/CommandGroup.vue b/packages/ui/src/components/command/CommandGroup.vue
new file mode 100644
index 00000000..ecd9444d
--- /dev/null
+++ b/packages/ui/src/components/command/CommandGroup.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { cn } from '#/lib/utils'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<ListboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+  if (!allGroups.value.has(id))
+    allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+  allGroups.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxGroup
+    v-bind="delegatedProps"
+    :id="id"
+    data-slot="command-group"
+    :class="cn('text-foreground overflow-hidden p-1', props.class)"
+    :hidden="isRender ? undefined : true"
+  >
+    <ListboxGroupLabel
+      v-if="heading"
+      data-slot="command-group-heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ListboxGroupLabel>
+    <slot />
+  </ListboxGroup>
+</template>
diff --git a/packages/ui/src/components/command/CommandInput.vue b/packages/ui/src/components/command/CommandInput.vue
new file mode 100644
index 00000000..6d0ebf5c
--- /dev/null
+++ b/packages/ui/src/components/command/CommandInput.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
+import { cn } from '#/lib/utils'
+import { useCommand } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <Search class="size-4 shrink-0 opacity-50" />
+    <ListboxFilter
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      v-model="filterState.search"
+      data-slot="command-input"
+      auto-focus
+      :class="cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/packages/ui/src/components/command/CommandItem.vue b/packages/ui/src/components/command/CommandItem.vue
new file mode 100644
index 00000000..abd2108b
--- /dev/null
+++ b/packages/ui/src/components/command/CommandItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit, useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { cn } from '#/lib/utils'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+  if (!filterState.search) {
+    return true
+  }
+  else {
+    const filteredCurrentItem = filterState.filtered.items.get(id)
+    // If the filtered items is undefined means not in the all times map yet
+    // Do the first render to add into the map
+    if (filteredCurrentItem === undefined) {
+      return true
+    }
+
+    // Check with filter
+    return filteredCurrentItem > 0
+  }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+  if (!(currentElement.value instanceof HTMLElement))
+    return
+
+  // textValue to perform filter
+  allItems.value.set(id, currentElement.value.textContent ?? (props.value?.toString() ?? ''))
+
+  const groupId = groupContext?.id
+  if (groupId) {
+    if (!allGroups.value.has(groupId)) {
+      allGroups.value.set(groupId, new Set([id]))
+    }
+    else {
+      allGroups.value.get(groupId)?.add(id)
+    }
+  }
+})
+onUnmounted(() => {
+  allItems.value.delete(id)
+})
+</script>
+
+<template>
+  <ListboxItem
+    v-if="isRender"
+    v-bind="forwarded"
+    :id="id"
+    ref="itemRef"
+    data-slot="command-item"
+    :class="cn('data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4', props.class)"
+    @select="() => {
+      filterState.search = ''
+    }"
+  >
+    <slot />
+  </ListboxItem>
+</template>
diff --git a/packages/ui/src/components/command/CommandList.vue b/packages/ui/src/components/command/CommandList.vue
new file mode 100644
index 00000000..7f05cd9a
--- /dev/null
+++ b/packages/ui/src/components/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ListboxContent
+    data-slot="command-list"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ListboxContent>
+</template>
diff --git a/packages/ui/src/components/command/CommandSeparator.vue b/packages/ui/src/components/command/CommandSeparator.vue
new file mode 100644
index 00000000..73247f53
--- /dev/null
+++ b/packages/ui/src/components/command/CommandSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="command-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </Separator>
+</template>
diff --git a/packages/ui/src/components/command/CommandShortcut.vue b/packages/ui/src/components/command/CommandShortcut.vue
new file mode 100644
index 00000000..4513d817
--- /dev/null
+++ b/packages/ui/src/components/command/CommandShortcut.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="command-shortcut"
+    :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/packages/ui/src/components/command/index.ts b/packages/ui/src/components/command/index.ts
new file mode 100644
index 00000000..cb48e1eb
--- /dev/null
+++ b/packages/ui/src/components/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+  allItems: Ref<Map<string, string>>
+  allGroups: Ref<Map<string, Set<string>>>
+  filterState: {
+    search: string
+    filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+  }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+  id?: string
+}>('CommandGroup')
diff --git a/packages/ui/src/components/context-menu/ContextMenuCheckboxItem.vue b/packages/ui/src/components/context-menu/ContextMenuCheckboxItem.vue
index 7dc8794e..05b9ae3f 100644
--- a/packages/ui/src/components/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuCheckboxItem.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/context-menu/ContextMenuContent.vue b/packages/ui/src/components/context-menu/ContextMenuContent.vue
index 9e788d14..c6a6fc9b 100644
--- a/packages/ui/src/components/context-menu/ContextMenuContent.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuContent.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         'bg-popover text-popover-foreground border border-border',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        'z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg',
+        'z-50 max-h-(--reka-context-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md',
         props.class,
       )"
     >
diff --git a/packages/ui/src/components/context-menu/ContextMenuItem.vue b/packages/ui/src/components/context-menu/ContextMenuItem.vue
index b126a949..6847b981 100644
--- a/packages/ui/src/components/context-menu/ContextMenuItem.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuItem.vue
@@ -29,9 +29,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     :data-variant="variant"
     v-bind="forwarded"
     :class="cn(
-      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors',
+      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-hidden select-none transition-colors',
       'focus:bg-accent focus:text-accent-foreground',
-      'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive',
+      'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-accent data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive',
       '[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       'data-[inset]:pl-8',
diff --git a/packages/ui/src/components/context-menu/ContextMenuLabel.vue b/packages/ui/src/components/context-menu/ContextMenuLabel.vue
index 8e017140..0343b12b 100644
--- a/packages/ui/src/components/context-menu/ContextMenuLabel.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuLabel.vue
@@ -15,7 +15,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     data-slot="context-menu-label"
     :data-inset="inset ? '' : undefined"
     v-bind="delegatedProps"
-    :class="cn('text-muted-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', props.class)"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8', props.class)"
   >
     <slot />
   </ContextMenuLabel>
diff --git a/packages/ui/src/components/context-menu/ContextMenuRadioItem.vue b/packages/ui/src/components/context-menu/ContextMenuRadioItem.vue
index c0269269..89c7faa2 100644
--- a/packages/ui/src/components/context-menu/ContextMenuRadioItem.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuRadioItem.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="context-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/context-menu/ContextMenuSubTrigger.vue b/packages/ui/src/components/context-menu/ContextMenuSubTrigger.vue
index 270cd6b7..01a6a848 100644
--- a/packages/ui/src/components/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/ui/src/components/context-menu/ContextMenuSubTrigger.vue
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/dialog/DialogContent.vue b/packages/ui/src/components/dialog/DialogContent.vue
index cb7cc8a1..b5ae6601 100644
--- a/packages/ui/src/components/dialog/DialogContent.vue
+++ b/packages/ui/src/components/dialog/DialogContent.vue
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         cn(
           'bg-card border border-border',
           'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 shadow-2xl duration-200 sm:max-w-lg',
+          'fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl p-6 shadow-2xl duration-200 sm:max-w-lg',
           props.class,
         )"
     >
@@ -45,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         v-if="showCloseButton"
         data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        class="ring-offset-background focus:ring-ring/20 data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
       >
         <X />
         <span class="sr-only">Close</span>
diff --git a/packages/ui/src/components/dialog/DialogDescription.vue b/packages/ui/src/components/dialog/DialogDescription.vue
index 4cc9e5f3..5ea37bd7 100644
--- a/packages/ui/src/components/dialog/DialogDescription.vue
+++ b/packages/ui/src/components/dialog/DialogDescription.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogDescription
     data-slot="dialog-description"
     v-bind="forwardedProps"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/packages/ui/src/components/dialog/DialogTitle.vue b/packages/ui/src/components/dialog/DialogTitle.vue
index 09d4382c..6ec4de33 100644
--- a/packages/ui/src/components/dialog/DialogTitle.vue
+++ b/packages/ui/src/components/dialog/DialogTitle.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <DialogTitle
     data-slot="dialog-title"
     v-bind="forwardedProps"
-    :class="cn('text-lg leading-none font-semibold', props.class)"
+    :class="cn('text-sm leading-none font-semibold', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
index 42fd488d..ef561f02 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
     :class=" cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
index 13ec3eed..82432ab5 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         'bg-popover text-popover-foreground border border-border',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        'z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg',
+        'z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md',
         props.class
       )"
     >
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
index 1547d090..eac5d72e 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuItem.vue
@@ -25,9 +25,9 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-variant="variant"
     v-bind="forwardedProps"
     :class="cn(
-      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors',
+      'relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs outline-hidden select-none transition-colors',
       'focus:bg-accent focus:text-accent-foreground',
-      'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-red-50 dark:data-[variant=destructive]:focus:bg-red-950/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive',
+      'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-accent data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive',
       '[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       'data-[inset]:pl-8',
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
index 304a1d41..83faef2a 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuLabel.vue
@@ -16,7 +16,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-label"
     :data-inset="inset ? '' : undefined"
     v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-medium text-muted-foreground data-[inset]:pl-8', props.class)"
+    :class="cn('px-2 py-1.5 text-xs font-medium text-muted-foreground data-[inset]:pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
index 1e161d2a..490927c5 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuRadioItem.vue
@@ -24,7 +24,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-xs outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
index 9581117b..8f9178b0 100644
--- a/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/ui/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     data-slot="dropdown-menu-sub-trigger"
     v-bind="forwardedProps"
     :class="cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-xs outline-hidden select-none data-[inset]:pl-8',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/empty/EmptyContent.vue b/packages/ui/src/components/empty/EmptyContent.vue
index 7528baa9..d7464036 100644
--- a/packages/ui/src/components/empty/EmptyContent.vue
+++ b/packages/ui/src/components/empty/EmptyContent.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="empty-content"
     :class="cn(
-      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-xs',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/empty/EmptyDescription.vue b/packages/ui/src/components/empty/EmptyDescription.vue
index 6e8a206e..7ea96037 100644
--- a/packages/ui/src/components/empty/EmptyDescription.vue
+++ b/packages/ui/src/components/empty/EmptyDescription.vue
@@ -11,7 +11,7 @@ defineProps<{
   <p
     data-slot="empty-description"
     :class="cn(
-      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      'text-muted-foreground [&>a:hover]:text-primary text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4',
       $attrs.class ?? '',
     )"
   >
diff --git a/packages/ui/src/components/empty/EmptyTitle.vue b/packages/ui/src/components/empty/EmptyTitle.vue
index 73b5640b..2c402ff1 100644
--- a/packages/ui/src/components/empty/EmptyTitle.vue
+++ b/packages/ui/src/components/empty/EmptyTitle.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="empty-title"
-    :class="cn('text-lg font-medium tracking-tight', props.class)"
+    :class="cn('text-sm font-medium tracking-tight', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/ui/src/components/form/FormDescription.vue b/packages/ui/src/components/form/FormDescription.vue
index 1052e5a7..01de3c04 100644
--- a/packages/ui/src/components/form/FormDescription.vue
+++ b/packages/ui/src/components/form/FormDescription.vue
@@ -14,7 +14,7 @@ const { formDescriptionId } = useFormField()
   <p
     :id="formDescriptionId"
     data-slot="form-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
   >
     <slot />
   </p>
diff --git a/packages/ui/src/components/form/FormMessage.vue b/packages/ui/src/components/form/FormMessage.vue
index 6bedf6e2..30ad4cae 100644
--- a/packages/ui/src/components/form/FormMessage.vue
+++ b/packages/ui/src/components/form/FormMessage.vue
@@ -18,6 +18,6 @@ const { name, formMessageId } = useFormField()
     data-slot="form-message"
     as="p"
     :name="toValue(name)"
-    :class="cn('text-destructive text-sm', props.class)"
+    :class="cn('text-destructive text-xs', props.class)"
   />
 </template>
diff --git a/packages/ui/src/components/input-group/InputGroupText.vue b/packages/ui/src/components/input-group/InputGroupText.vue
index a4a03cc8..683063c0 100644
--- a/packages/ui/src/components/input-group/InputGroupText.vue
+++ b/packages/ui/src/components/input-group/InputGroupText.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <span
     :class="cn(
-      'text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
+      'text-muted-foreground flex items-center gap-2 text-xs [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/input-group/index.ts b/packages/ui/src/components/input-group/index.ts
index 28948667..993ae0d0 100644
--- a/packages/ui/src/components/input-group/index.ts
+++ b/packages/ui/src/components/input-group/index.ts
@@ -11,7 +11,7 @@ export { default as InputGroupText } from './InputGroupText.vue'
 export { default as InputGroupTextarea } from './InputGroupTextarea.vue'
 
 export const inputGroupAddonVariants = cva(
-  'text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*=\'size-\'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50',
+  'text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-xs font-medium select-none [&>svg:not([class*=\'size-\'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50',
   {
     variants: {
       align: {
@@ -34,7 +34,7 @@ export const inputGroupAddonVariants = cva(
 export type InputGroupVariants = VariantProps<typeof inputGroupAddonVariants>
 
 export const inputGroupButtonVariants = cva(
-  'text-sm shadow-none flex gap-2 items-center',
+  'text-xs shadow-none flex gap-2 items-center',
   {
     variants: {
       size: {
diff --git a/packages/ui/src/components/input-otp/InputOTP.vue b/packages/ui/src/components/input-otp/InputOTP.vue
new file mode 100644
index 00000000..c659c8cc
--- /dev/null
+++ b/packages/ui/src/components/input-otp/InputOTP.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { OTPInputEmits, OTPInputProps } from 'vue-input-otp'
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardPropsEmits } from 'reka-ui'
+import { OTPInput } from 'vue-input-otp'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<OTPInputProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<OTPInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <OTPInput
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :container-class="cn('flex items-center gap-2 has-disabled:opacity-50', props.class)"
+    data-slot="input-otp"
+    class="disabled:cursor-not-allowed"
+  >
+    <slot v-bind="slotProps" />
+  </OTPInput>
+</template>
diff --git a/packages/ui/src/components/input-otp/InputOTPGroup.vue b/packages/ui/src/components/input-otp/InputOTPGroup.vue
new file mode 100644
index 00000000..42adf0f4
--- /dev/null
+++ b/packages/ui/src/components/input-otp/InputOTPGroup.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardProps } from 'reka-ui'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-group"
+    v-bind="forwarded"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/src/components/input-otp/InputOTPSeparator.vue b/packages/ui/src/components/input-otp/InputOTPSeparator.vue
new file mode 100644
index 00000000..a8a83f60
--- /dev/null
+++ b/packages/ui/src/components/input-otp/InputOTPSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { MinusIcon } from 'lucide-vue-next'
+import { useForwardProps } from 'reka-ui'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+
+const forwarded = useForwardProps(props)
+</script>
+
+<template>
+  <div
+    data-slot="input-otp-separator"
+    role="separator"
+    v-bind="forwarded"
+  >
+    <slot>
+      <MinusIcon />
+    </slot>
+  </div>
+</template>
diff --git a/packages/ui/src/components/input-otp/InputOTPSlot.vue b/packages/ui/src/components/input-otp/InputOTPSlot.vue
new file mode 100644
index 00000000..702b3c6c
--- /dev/null
+++ b/packages/ui/src/components/input-otp/InputOTPSlot.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardProps } from 'reka-ui'
+import { computed } from 'vue'
+import { useVueOTPContext } from 'vue-input-otp'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{ index: number, class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+
+const context = useVueOTPContext()
+
+const slot = computed(() => context?.value.slots[props.index])
+</script>
+
+<template>
+  <div
+    v-bind="forwarded"
+    data-slot="input-otp-slot"
+    :data-active="slot?.isActive"
+    :class="cn('data-[active=true]:border-ring [&:has(+_[data-active=true])]:border-r-ring data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y-2 border-r-2 text-xs shadow-xs transition-all outline-none first:rounded-l-md first:border-l-2 last:rounded-r-md data-[active=true]:z-10', props.class)"
+  >
+    {{ slot?.char }}
+    <div
+      v-if="slot?.hasFakeCaret"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      <div class="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+    </div>
+  </div>
+</template>
diff --git a/packages/ui/src/components/input-otp/index.ts b/packages/ui/src/components/input-otp/index.ts
new file mode 100644
index 00000000..d9e735b4
--- /dev/null
+++ b/packages/ui/src/components/input-otp/index.ts
@@ -0,0 +1,4 @@
+export { default as InputOTP } from './InputOTP.vue'
+export { default as InputOTPGroup } from './InputOTPGroup.vue'
+export { default as InputOTPSeparator } from './InputOTPSeparator.vue'
+export { default as InputOTPSlot } from './InputOTPSlot.vue'
diff --git a/packages/ui/src/components/input/Input.vue b/packages/ui/src/components/input/Input.vue
index 0666805d..ca26a538 100644
--- a/packages/ui/src/components/input/Input.vue
+++ b/packages/ui/src/components/input/Input.vue
@@ -24,13 +24,13 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     data-slot="input"
     :class="cn(
-      'h-9 w-full min-w-0 rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+      'h-9 w-full min-w-0 rounded-lg border border-border bg-background text-xs px-3 py-2 text-foreground shadow-sm!',
       'placeholder:text-muted-foreground',
-      'shadow-sm transition-all outline-none',
-      'focus:border-primary focus:ring-2 focus:ring-primary/20',
+      'transition-all outline-none',
+      'focus:border-ring focus:ring-2 focus:ring-ring/20',
       'read-only:bg-muted read-only:text-muted-foreground read-only:cursor-not-allowed',
       'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-      'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium',
+      'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-xs file:font-medium',
       props.class,
     )"
   >
diff --git a/packages/ui/src/components/item/ItemDescription.vue b/packages/ui/src/components/item/ItemDescription.vue
index 153b2d16..b6919076 100644
--- a/packages/ui/src/components/item/ItemDescription.vue
+++ b/packages/ui/src/components/item/ItemDescription.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <p
     data-slot="item-description"
     :class="cn(
-      'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
+      'text-muted-foreground line-clamp-2 text-xs leading-normal font-normal text-balance',
       '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
       props.class,
     )"
diff --git a/packages/ui/src/components/item/ItemTitle.vue b/packages/ui/src/components/item/ItemTitle.vue
index 60ddf43a..4fc5ea7d 100644
--- a/packages/ui/src/components/item/ItemTitle.vue
+++ b/packages/ui/src/components/item/ItemTitle.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <div
     data-slot="item-title"
-    :class="cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', props.class)"
+    :class="cn('flex w-fit items-center gap-2 text-xs leading-snug font-medium', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/ui/src/components/item/index.ts b/packages/ui/src/components/item/index.ts
index 70605f11..acfa2955 100644
--- a/packages/ui/src/components/item/index.ts
+++ b/packages/ui/src/components/item/index.ts
@@ -13,13 +13,13 @@ export { default as ItemSeparator } from './ItemSeparator.vue'
 export { default as ItemTitle } from './ItemTitle.vue'
 
 export const itemVariants = cva(
-  'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+  'group/item flex items-center border border-transparent text-xs rounded-lg transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] shadow-none',
   {
     variants: {
       variant: {
-        default: 'bg-transparent',
-        outline: 'border-border',
-        muted: 'bg-muted/50',
+        default: 'bg-background',
+        outline: 'bg-background border-border border',
+        muted: 'bg-accent',
       },
       size: {
         default: 'p-4 gap-4 ',
diff --git a/packages/ui/src/components/label/Label.vue b/packages/ui/src/components/label/Label.vue
index 0baea456..69cd41fb 100644
--- a/packages/ui/src/components/label/Label.vue
+++ b/packages/ui/src/components/label/Label.vue
@@ -16,7 +16,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'flex items-center gap-2 text-xs leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/ui/src/components/native-select/NativeSelect.vue b/packages/ui/src/components/native-select/NativeSelect.vue
index 869cd17b..8cb1ebe3 100644
--- a/packages/ui/src/components/native-select/NativeSelect.vue
+++ b/packages/ui/src/components/native-select/NativeSelect.vue
@@ -33,8 +33,8 @@ const delegatedProps = reactiveOmit(props, 'class')
       v-model="modelValue"
       data-slot="native-select"
       :class="cn(
-        'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+        'shadow-xs! border-border placeholder:text-muted-foreground selection:bg-foreground selection:text-background h-9 w-full min-w-0 appearance-none rounded-lg border bg-background px-3 py-2 pr-9 text-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-2',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         props.class,
       )"
diff --git a/packages/ui/src/components/pagination/PaginationItem.vue b/packages/ui/src/components/pagination/PaginationItem.vue
index 5598d34b..de74340f 100644
--- a/packages/ui/src/components/pagination/PaginationItem.vue
+++ b/packages/ui/src/components/pagination/PaginationItem.vue
@@ -23,10 +23,9 @@ const delegatedProps = reactiveOmit(props, 'class', 'size', 'isActive')
     data-slot="pagination-item"
     v-bind="delegatedProps"
     :class="cn(
-      buttonVariants({
-        variant: isActive ? 'outline' : 'ghost',
-        size,
-      }),
+      buttonVariants({ variant: 'outline', size }),
+      isActive ? 'border-foreground ' : '',
+     
       props.class)"
   >
     <slot />
diff --git a/packages/ui/src/components/pin-input/PinInput.vue b/packages/ui/src/components/pin-input/PinInput.vue
new file mode 100644
index 00000000..a98cf4ba
--- /dev/null
+++ b/packages/ui/src/components/pin-input/PinInput.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    data-slot="pin-input"
+    :class="cn('flex items-center gap-2', props.class)"
+  >
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/packages/ui/src/components/pin-input/PinInputGroup.vue b/packages/ui/src/components/pin-input/PinInputGroup.vue
new file mode 100644
index 00000000..0316caa8
--- /dev/null
+++ b/packages/ui/src/components/pin-input/PinInputGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="pin-input-group"
+    :class="cn('flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/ui/src/components/pin-input/PinInputSeparator.vue b/packages/ui/src/components/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..a5f46dd2
--- /dev/null
+++ b/packages/ui/src/components/pin-input/PinInputSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { MinusIcon } from 'lucide-vue-next'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    role="separator"
+    data-slot="pin-input-separator"
+    :class="cn('flex items-center justify-center text-muted-foreground', props.class)"
+  >
+    <slot>
+      <MinusIcon class="size-4" />
+    </slot>
+  </div>
+</template>
diff --git a/packages/ui/src/components/pin-input/PinInputSlot.vue b/packages/ui/src/components/pin-input/PinInputSlot.vue
new file mode 100644
index 00000000..cb89ecb9
--- /dev/null
+++ b/packages/ui/src/components/pin-input/PinInputSlot.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PinInputInput } from 'reka-ui'
+import { cn } from '#/lib/utils'
+
+const props = defineProps<PinInputInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <PinInputInput
+    v-bind="delegatedProps"
+    data-slot="pin-input-slot"
+    :class="cn(
+      'size-9 bg-background text-center text-xs text-foreground shadow-none',
+      'border-y border-r border-border',
+      'transition-all outline-none',
+      'focus:relative focus:z-10 focus:border-2 focus:border-ring',
+      'first:rounded-l-lg first:border-l',
+      'last:rounded-r-lg',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'placeholder:text-muted-foreground',
+      props.class,
+    )"
+  />
+</template>
diff --git a/packages/ui/src/components/pin-input/index.ts b/packages/ui/src/components/pin-input/index.ts
new file mode 100644
index 00000000..e2952334
--- /dev/null
+++ b/packages/ui/src/components/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
+export { default as PinInputSlot } from './PinInputSlot.vue'
diff --git a/packages/ui/src/components/popover/PopoverContent.vue b/packages/ui/src/components/popover/PopoverContent.vue
index a4c57fb2..5e1c6656 100644
--- a/packages/ui/src/components/popover/PopoverContent.vue
+++ b/packages/ui/src/components/popover/PopoverContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-lg border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
           props.class,
         )
       "
diff --git a/packages/ui/src/components/radio-group/RadioGroupItem.vue b/packages/ui/src/components/radio-group/RadioGroupItem.vue
index ca957558..73f1ead8 100644
--- a/packages/ui/src/components/radio-group/RadioGroupItem.vue
+++ b/packages/ui/src/components/radio-group/RadioGroupItem.vue
@@ -23,8 +23,8 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'aspect-square size-4 shrink-0 rounded-full border border-border shadow-sm transition-all outline-none text-primary',
-        'focus-visible:ring-2 focus-visible:ring-primary/20',
+        'aspect-square size-4 shrink-0 rounded-full border border-border bg-background transition-all outline-none text-foreground',
+        'focus-visible:ring-2 focus-visible:ring-ring/20',
         'disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
@@ -35,7 +35,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       class="relative flex items-center justify-center"
     >
       <slot>
-        <CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        <CircleIcon class="fill-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </slot>
     </RadioGroupIndicator>
   </RadioGroupItem>
diff --git a/packages/ui/src/components/select/SelectContent.vue b/packages/ui/src/components/select/SelectContent.vue
index 33d2d874..548606f4 100644
--- a/packages/ui/src/components/select/SelectContent.vue
+++ b/packages/ui/src/components/select/SelectContent.vue
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         'bg-popover text-popover-foreground border border-border',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        'relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg shadow-lg',
+        'relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-lg shadow-md',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
diff --git a/packages/ui/src/components/select/SelectItem.vue b/packages/ui/src/components/select/SelectItem.vue
index 400e3e0f..297d46aa 100644
--- a/packages/ui/src/components/select/SelectItem.vue
+++ b/packages/ui/src/components/select/SelectItem.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none transition-colors',
+        'relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none transition-colors',
         'focus:bg-accent focus:text-accent-foreground',
         '[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
diff --git a/packages/ui/src/components/select/SelectTrigger.vue b/packages/ui/src/components/select/SelectTrigger.vue
index 91b114c6..6173268a 100644
--- a/packages/ui/src/components/select/SelectTrigger.vue
+++ b/packages/ui/src/components/select/SelectTrigger.vue
@@ -21,10 +21,10 @@ const forwardedProps = useForwardProps(delegatedProps)
     :data-size="size"
     v-bind="forwardedProps"
     :class="cn(
-      'flex w-fit items-center justify-between gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm whitespace-nowrap shadow-sm transition-all outline-none',
+      'flex w-fit items-center justify-between gap-2 rounded-lg border border-border bg-background px-3 py-2 text-xs whitespace-nowrap transition-all outline-none',
       'data-[placeholder]:text-muted-foreground',
       '[&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-      'focus:border-primary focus:ring-2 focus:ring-primary/20',
+      'focus:border-ring focus:ring-2 focus:ring-ring/20',
       'hover:bg-accent',
       'disabled:cursor-not-allowed disabled:opacity-50',
       'data-[size=default]:h-9 data-[size=sm]:h-8',
diff --git a/packages/ui/src/components/sheet/SheetContent.vue b/packages/ui/src/components/sheet/SheetContent.vue
index cc82ee84..6d4efce3 100644
--- a/packages/ui/src/components/sheet/SheetContent.vue
+++ b/packages/ui/src/components/sheet/SheetContent.vue
@@ -33,28 +33,28 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 <template>
   <DialogPortal>
-    <SheetOverlay />
+    <SheetOverlay class="bg-black/30 " />
     <DialogContent
       data-slot="sheet-content"
       :class="cn(
-        'fixed z-50 flex flex-col gap-4 shadow-2xl transition ease-in-out',
+        'fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
         'bg-card border-border',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
         side === 'right'
-          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+          && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm',
         side === 'left'
-          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+          && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm',
         side === 'top'
-          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+          && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto',
         side === 'bottom'
-          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+          && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto',
         props.class)"
       v-bind="{ ...$attrs, ...forwarded }"
     >
       <slot />
 
       <DialogClose
-        class="absolute top-4 right-4 rounded-sm opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary/20 focus:outline-hidden disabled:pointer-events-none"
+        class="absolute top-4 right-4 rounded-sm opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-ring/20 focus:outline-hidden disabled:pointer-events-none"
       >
         <X class="size-4" />
         <span class="sr-only">Close</span>
diff --git a/packages/ui/src/components/sheet/SheetDescription.vue b/packages/ui/src/components/sheet/SheetDescription.vue
index 0af6ec89..98267126 100644
--- a/packages/ui/src/components/sheet/SheetDescription.vue
+++ b/packages/ui/src/components/sheet/SheetDescription.vue
@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 <template>
   <DialogDescription
     data-slot="sheet-description"
-    :class="cn('text-muted-foreground text-sm', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
     v-bind="delegatedProps"
   >
     <slot />
diff --git a/packages/ui/src/components/sidebar/SidebarGroupContent.vue b/packages/ui/src/components/sidebar/SidebarGroupContent.vue
index 5475a667..2bd41877 100644
--- a/packages/ui/src/components/sidebar/SidebarGroupContent.vue
+++ b/packages/ui/src/components/sidebar/SidebarGroupContent.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-group-content"
     data-sidebar="group-content"
-    :class="cn('w-full text-sm', props.class)"
+    :class="cn('w-full text-xs', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/ui/src/components/sidebar/SidebarHeader.vue b/packages/ui/src/components/sidebar/SidebarHeader.vue
index af7ad5ad..ed00fc0d 100644
--- a/packages/ui/src/components/sidebar/SidebarHeader.vue
+++ b/packages/ui/src/components/sidebar/SidebarHeader.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     data-slot="sidebar-header"
     data-sidebar="header"
-    :class="cn('flex flex-col gap-2 p-2', props.class)"
+    :class="cn('flex flex-col gap-2 border-b border-sidebar-border p-2', props.class)"
   >
     <slot />
   </div>
diff --git a/packages/ui/src/components/sidebar/SidebarMenuSubButton.vue b/packages/ui/src/components/sidebar/SidebarMenuSubButton.vue
index df6c54ee..2320a42c 100644
--- a/packages/ui/src/components/sidebar/SidebarMenuSubButton.vue
+++ b/packages/ui/src/components/sidebar/SidebarMenuSubButton.vue
@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<PrimitiveProps & {
       'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
       'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
       size === 'sm' && 'text-xs',
-      size === 'md' && 'text-sm',
+      size === 'md' && 'text-xs',
       'group-data-[collapsible=icon]:hidden',
       props.class,
     )"
diff --git a/packages/ui/src/components/sidebar/index.ts b/packages/ui/src/components/sidebar/index.ts
index 844557d9..05a1dad5 100644
--- a/packages/ui/src/components/sidebar/index.ts
+++ b/packages/ui/src/components/sidebar/index.ts
@@ -36,7 +36,17 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue'
 export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer',
+  [
+    'peer/menu-button relative flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left outline-hidden ring-sidebar-ring text-muted-foreground',
+    'transition-[width,height,padding] focus-visible:ring-2',
+    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',
+    'data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground',
+    'data-[active=true]:before:absolute data-[active=true]:before:left-0 data-[active=true]:before:top-1/2 data-[active=true]:before:-translate-y-1/2 data-[active=true]:before:h-6 data-[active=true]:before:w-0.5 data-[active=true]:before:rounded-full data-[active=true]:before:bg-sidebar-primary',
+    'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',
+    'group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:data-[active=true]:before:hidden',
+    '[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 cursor-pointer',
+  ].join(' '),
   {
     variants: {
       variant: {
@@ -45,9 +55,9 @@ export const sidebarMenuButtonVariants = cva(
           'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: 'h-8 text-sm',
+        default: 'h-9 text-xs',
         sm: 'h-7 text-xs',
-        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+        lg: 'h-12 text-xs group-data-[collapsible=icon]:p-0!',
       },
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/sidebar/utils.ts b/packages/ui/src/components/sidebar/utils.ts
index 6edb1409..8b972dd8 100644
--- a/packages/ui/src/components/sidebar/utils.ts
+++ b/packages/ui/src/components/sidebar/utils.ts
@@ -3,7 +3,7 @@ import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '14rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
 export const SIDEBAR_WIDTH_ICON = '3rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
diff --git a/packages/ui/src/components/slider/Slider.vue b/packages/ui/src/components/slider/Slider.vue
index dac1e350..4759b307 100644
--- a/packages/ui/src/components/slider/Slider.vue
+++ b/packages/ui/src/components/slider/Slider.vue
@@ -25,11 +25,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <SliderTrack
       data-slot="slider-track"
-      class="relative grow overflow-hidden rounded-full bg-secondary data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+      class="relative grow overflow-hidden rounded-full bg-accent data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
     >
       <SliderRange
         data-slot="slider-range"
-        class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+        class="absolute bg-foreground data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
       />
     </SliderTrack>
 
@@ -37,7 +37,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-for="(_, key) in modelValue"
       :key="key"
       data-slot="slider-thumb"
-      class="block size-4 shrink-0 rounded-full border-2 border-primary bg-white shadow-sm transition-all hover:ring-4 hover:ring-primary/20 focus-visible:ring-4 focus-visible:ring-primary/20 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+      class="block shadow-sm size-4 shrink-0 rounded-full border border-foreground bg-white hover:ring-4 hover:ring-ring/20  hover:border-2 focus-visible:ring-4 focus-visible:ring-ring/20 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
     />
   </SliderRoot>
 </template>
diff --git a/packages/ui/src/components/sonner/Sonner.vue b/packages/ui/src/components/sonner/Sonner.vue
index 62a62223..2658bd3b 100644
--- a/packages/ui/src/components/sonner/Sonner.vue
+++ b/packages/ui/src/components/sonner/Sonner.vue
@@ -14,7 +14,7 @@ const props = defineProps<ToasterProps>()
       '--normal-bg': 'var(--card)',
       '--normal-text': 'var(--foreground)',
       '--normal-border': 'var(--border)',
-      '--border-radius': '1rem',
+      '--border-radius': 'var(--radius-lg)',
     }"
     v-bind="props"
   >
diff --git a/packages/ui/src/components/switch/Switch.vue b/packages/ui/src/components/switch/Switch.vue
index 11ae34f2..6d2443f5 100644
--- a/packages/ui/src/components/switch/Switch.vue
+++ b/packages/ui/src/components/switch/Switch.vue
@@ -24,9 +24,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="switch"
     v-bind="forwarded"
     :class="cn(
-      'peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-sm transition-all outline-none',
-      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-border',
-      'focus-visible:ring-2 focus-visible:ring-primary/20',
+      'peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border border-transparent transition-all outline-none',
+      'data-[state=checked]:bg-foreground data-[state=unchecked]:bg-border',
+      'focus-visible:ring-2 focus-visible:ring-ring/20',
       'disabled:cursor-not-allowed disabled:opacity-50',
       props.class,
     )"
@@ -34,9 +34,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SwitchThumb
       data-slot="switch-thumb"
       :class="cn(
-        'pointer-events-none block size-4 rounded-full ring-0 transition-transform',
-        'bg-white',
-        'data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+        'pointer-events-none block size-4 rounded-full w-5 h-5 ring-0 transition-transform',
+        'bg-background ',
+        'data-[state=checked]:translate-x-[calc(100%+2px)] data-[state=unchecked]:translate-x-0'
       )"
     >
       <slot
diff --git a/packages/ui/src/components/table/Table.vue b/packages/ui/src/components/table/Table.vue
index 347aaa1a..7c022803 100644
--- a/packages/ui/src/components/table/Table.vue
+++ b/packages/ui/src/components/table/Table.vue
@@ -10,11 +10,11 @@ const props = defineProps<{
 <template>
   <div
     data-slot="table-container"
-    class="relative w-full overflow-auto"
+    class="relative w-full overflow-auto border border-border rounded-sm"
   >
     <table
       data-slot="table"
-      :class="cn('w-full caption-bottom text-sm', props.class)"
+      :class="cn('w-full caption-bottom text-xs', props.class)"
     >
       <slot />
     </table>
diff --git a/packages/ui/src/components/table/TableCaption.vue b/packages/ui/src/components/table/TableCaption.vue
index 69c799e4..0dd6f721 100644
--- a/packages/ui/src/components/table/TableCaption.vue
+++ b/packages/ui/src/components/table/TableCaption.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <caption
     data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+    :class="cn('text-muted-foreground py-4 text-xs', props.class)"
   >
     <slot />
   </caption>
diff --git a/packages/ui/src/components/table/TableCell.vue b/packages/ui/src/components/table/TableCell.vue
index 906e331f..02e1130e 100644
--- a/packages/ui/src/components/table/TableCell.vue
+++ b/packages/ui/src/components/table/TableCell.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="table-cell"
     :class="
       cn(
-        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] font-normal',
         props.class,
       )
     "
diff --git a/packages/ui/src/components/table/TableEmpty.vue b/packages/ui/src/components/table/TableEmpty.vue
index 127d0cba..e1146de5 100644
--- a/packages/ui/src/components/table/TableEmpty.vue
+++ b/packages/ui/src/components/table/TableEmpty.vue
@@ -20,7 +20,7 @@ const delegatedProps = reactiveOmit(props, 'class')
     <TableCell
       :class="
         cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          'p-4 whitespace-nowrap align-middle text-xs text-foreground',
           props.class,
         )
       "
diff --git a/packages/ui/src/components/table/TableFooter.vue b/packages/ui/src/components/table/TableFooter.vue
index f9dddfd9..0c9adf6c 100644
--- a/packages/ui/src/components/table/TableFooter.vue
+++ b/packages/ui/src/components/table/TableFooter.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <tfoot
     data-slot="table-footer"
-    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+    :class="cn('bg-accent border-t font-medium [&>tr]:last:border-b-0', props.class)"
   >
     <slot />
   </tfoot>
diff --git a/packages/ui/src/components/table/TableHead.vue b/packages/ui/src/components/table/TableHead.vue
index cd32bc75..270caf80 100644
--- a/packages/ui/src/components/table/TableHead.vue
+++ b/packages/ui/src/components/table/TableHead.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <th
     data-slot="table-head"
-    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
+    :class="cn('text-foreground  h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
   >
     <slot />
   </th>
diff --git a/packages/ui/src/components/table/TableHeader.vue b/packages/ui/src/components/table/TableHeader.vue
index 1f3ee6be..243a2aac 100644
--- a/packages/ui/src/components/table/TableHeader.vue
+++ b/packages/ui/src/components/table/TableHeader.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <thead
     data-slot="table-header"
-    :class="cn('[&_tr]:border-b', props.class)"
+    :class="cn('[&_tr]:border-b h-10.25', props.class)"
   >
     <slot />
   </thead>
diff --git a/packages/ui/src/components/table/TableRow.vue b/packages/ui/src/components/table/TableRow.vue
index 1d4bf11e..102b446b 100644
--- a/packages/ui/src/components/table/TableRow.vue
+++ b/packages/ui/src/components/table/TableRow.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 <template>
   <tr
     data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
+    :class="cn('hover:bg-accent h-9.5 data-[state=selected]:bg-muted border-b transition-colors', props.class)"
   >
     <slot />
   </tr>
diff --git a/packages/ui/src/components/tabs/TabsTrigger.vue b/packages/ui/src/components/tabs/TabsTrigger.vue
index 161f3aea..2861fb45 100644
--- a/packages/ui/src/components/tabs/TabsTrigger.vue
+++ b/packages/ui/src/components/tabs/TabsTrigger.vue
@@ -16,10 +16,10 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     data-slot="tabs-trigger"
     :class="cn(
-      'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all',
+      'inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-xs font-medium whitespace-nowrap transition-all',
       'text-muted-foreground',
-      'data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      'focus-visible:ring-2 focus-visible:ring-primary/20',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:border-border',
+      'focus-visible:ring-2 focus-visible:ring-ring/20',
       'disabled:pointer-events-none disabled:opacity-50',
       '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       props.class,
diff --git a/packages/ui/src/components/tags-input/TagsInput.vue b/packages/ui/src/components/tags-input/TagsInput.vue
index 65eaff81..c6db6420 100644
--- a/packages/ui/src/components/tags-input/TagsInput.vue
+++ b/packages/ui/src/components/tags-input/TagsInput.vue
@@ -18,8 +18,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-slot="slotProps"
     v-bind="forwarded"
     :class="cn(
-      'flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none',
-      'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+      'flex flex-wrap gap-2 items-center rounded-lg border border-input bg-background px-2 py-1 text-xs transition-[color,box-shadow] outline-none',
+      'focus-within:border-ring focus-within:ring-ring/20 focus-within:ring-2',
       'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       props.class)"
   >
diff --git a/packages/ui/src/components/tags-input/TagsInputInput.vue b/packages/ui/src/components/tags-input/TagsInputInput.vue
index fcf18a4c..1b8e68e6 100644
--- a/packages/ui/src/components/tags-input/TagsInputInput.vue
+++ b/packages/ui/src/components/tags-input/TagsInputInput.vue
@@ -15,6 +15,6 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <TagsInputInput
     v-bind="forwardedProps"
-    :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)"
+    :class="cn('text-xs min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)"
   />
 </template>
diff --git a/packages/ui/src/components/tags-input/TagsInputItemText.vue b/packages/ui/src/components/tags-input/TagsInputItemText.vue
index 40cbfcbc..391f5ff7 100644
--- a/packages/ui/src/components/tags-input/TagsInputItemText.vue
+++ b/packages/ui/src/components/tags-input/TagsInputItemText.vue
@@ -15,6 +15,6 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <TagsInputItemText
     v-bind="forwardedProps"
-    :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)"
+    :class="cn('py-0.5 px-2 text-xs rounded bg-transparent', props.class)"
   />
 </template>
diff --git a/packages/ui/src/components/textarea/Textarea.vue b/packages/ui/src/components/textarea/Textarea.vue
index b0f15e13..878b1190 100644
--- a/packages/ui/src/components/textarea/Textarea.vue
+++ b/packages/ui/src/components/textarea/Textarea.vue
@@ -24,10 +24,10 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     data-slot="textarea"
     :class="cn(
-      'flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+      'flex field-sizing-content min-h-16 w-full rounded-lg border border-border bg-background px-3 py-2 text-[16px] text-foreground',
       'placeholder:text-muted-foreground',
-      'shadow-sm transition-all outline-none resize-none',
-      'focus:border-primary focus:ring-2 focus:ring-primary/20',
+      'transition-all outline-none resize-none',
+      'focus:border-ring focus:ring-2 focus:ring-ring/20',
       'disabled:cursor-not-allowed disabled:opacity-50',
       props.class
     )"
diff --git a/packages/ui/src/components/toggle/index.ts b/packages/ui/src/components/toggle/index.ts
index a72b056f..da5292c1 100644
--- a/packages/ui/src/components/toggle/index.ts
+++ b/packages/ui/src/components/toggle/index.ts
@@ -4,13 +4,13 @@ import { cva } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
+  'inline-flex items-center justify-center gap-2 rounded-lg text-xs font-medium hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/20 focus-visible:ring-2 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap',
   {
     variants: {
       variant: {
         default: 'bg-transparent',
         outline:
-          'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+          'border border-border bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
         default: 'h-9 px-2 min-w-9',
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 1920d05b..aaf1a228 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -8,6 +8,7 @@ export * from './components/card/index'
 export * from './components/checkbox/index'
 export * from './components/collapsible/index'
 export * from './components/combobox/index'
+export * from './components/command/index'
 export * from './components/context-menu/index'
 export * from './components/dialog/index'
 export * from './components/dropdown-menu/index'
@@ -15,11 +16,13 @@ export * from './components/empty/index'
 export * from './components/form/index'
 export * from './components/input/index'
 export * from './components/input-group/index'
+export * from './components/input-otp/index'
 export * from './components/item/index'
 export * from './components/kbd/index'
 export * from './components/label/index'
 export * from './components/native-select/index'
 export * from './components/pagination/index'
+export * from './components/pin-input/index'
 export * from './components/popover/index'
 export * from './components/radio-group/index'
 export * from './components/scroll-area/index'
@@ -35,6 +38,7 @@ export * from './components/switch/index'
 export * from './components/table/index'
 export * from './components/tabs/index'
 export * from './components/tags-input/index'
+export * from './components/text-generate-effect/index'
 export * from './components/textarea/index'
 export * from './components/toggle/index'
 export * from './components/tooltip/index'
\ No newline at end of file
diff --git a/packages/ui/src/style.css b/packages/ui/src/style.css
index 5a7873ab..5d73d50f 100644
--- a/packages/ui/src/style.css
+++ b/packages/ui/src/style.css
@@ -1,2 +1,145 @@
-@import "tailwindcss";
-@import "tw-animate-css";
+@custom-variant dark (&:is(.dark *));
+
+@layer components {
+  .scrollbar-none {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .dark .shiki,
+  .dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+  }
+}
+
+@layer utilities {
+  .shadow-sm {
+    box-shadow: none;
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 286.375);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 286.375);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 286.375);
+  --primary: oklch(0.37 0.015 285);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.141 0.005 286.375);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: #737373;
+  --accent: oklch(97.1% 0 0deg);
+  --accent-foreground: oklch(0.141 0.005 286.375);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(57.5% 0 0deg / 1);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 286.375);
+  --sidebar-primary: oklch(0.55 0.22 290);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.141 0.005 286.375);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.55 0.22 290);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 286.375);
+   --foreground: oklch(0.88 0.005 285);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.84 0.006 285);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.985 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.18 0.005 286);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.62 0.22 290);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.62 0.22 290);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e14ce9b1..9bb04e1f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,6 +167,9 @@ importers:
       modern-css-reset:
         specifier: ^1.4.0
         version: 1.4.0
+      moment:
+        specifier: ^2.30.1
+        version: 2.30.1
       monaco-editor:
         specifier: ^0.52.2
         version: 0.52.2
@@ -222,12 +225,18 @@ importers:
       '@memohai/config':
         specifier: workspace:*
         version: link:../../packages/config
+      '@types/moment':
+        specifier: ^2.13.0
+        version: 2.13.0
       '@types/node':
         specifier: ^24.10.1
         version: 24.10.4
       '@types/qrcode':
         specifier: ^1.5.6
         version: 1.5.6
+      '@types/sortablejs':
+        specifier: ^1.15.9
+        version: 1.15.9
       '@vitejs/plugin-vue':
         specifier: ^6.0.5
         version: 6.0.5(vite@8.0.1(@types/node@24.10.4)(esbuild@0.27.2)(jiti@2.6.1)(tsx@4.21.0)(yaml@2.8.2))(vue@3.5.26(typescript@5.9.3))
@@ -320,6 +329,9 @@ importers:
       vue:
         specifier: ^3.5.26
         version: 3.5.26(typescript@5.9.3)
+      vue-input-otp:
+        specifier: ^0.3.2
+        version: 0.3.2(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
       vue-sonner:
         specifier: ^2.0.9
         version: 2.0.9
@@ -2170,6 +2182,10 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
+  '@types/moment@2.13.0':
+    resolution: {integrity: sha512-DyuyYGpV6r+4Z1bUznLi/Y7HpGn4iQ4IVcGn8zrr1P4KotKLdH0sbK1TFR6RGyX6B+G8u83wCzL+bpawKU/hdQ==}
+    deprecated: This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!
+
   '@types/node@24.10.4':
     resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}
 
@@ -2179,6 +2195,9 @@ packages:
   '@types/qrcode@1.5.6':
     resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
 
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -3855,6 +3874,9 @@ packages:
   modern-css-reset@1.4.0:
     resolution: {integrity: sha512-0crZmSFmrxkI7159rvQWjpDhy0u4+Awg/iOycJdlVn0RSeft/a+6BrQHR3IqvmdK25sqt0o6Z5Ap7cWgUee2rw==}
 
+  moment@2.30.1:
+    resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
+
   monaco-editor@0.52.2:
     resolution: {integrity: sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==}
 
@@ -4785,6 +4807,11 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vue-input-otp@0.3.2:
+    resolution: {integrity: sha512-QMl1842WB6uNAsK4+mZXIskb00TOfahH3AQt8rpRecbtQnOp+oHSUbL/Z3wekfy6pAl+hyN3e1rCUSkCMzbDLQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
   vue-router@4.6.4:
     resolution: {integrity: sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==}
     peerDependencies:
@@ -6515,6 +6542,10 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
+  '@types/moment@2.13.0':
+    dependencies:
+      moment: 2.30.1
+
   '@types/node@24.10.4':
     dependencies:
       undici-types: 7.16.0
@@ -6527,6 +6558,8 @@ snapshots:
     dependencies:
       '@types/node': 24.10.4
 
+  '@types/sortablejs@1.15.9': {}
+
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -8362,6 +8395,8 @@ snapshots:
 
   modern-css-reset@1.4.0: {}
 
+  moment@2.30.1: {}
+
   monaco-editor@0.52.2: {}
 
   mrmime@2.0.1: {}
@@ -9290,6 +9325,15 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.26(typescript@5.9.3)
 
+  vue-input-otp@0.3.2(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3)):
+    dependencies:
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      reka-ui: 2.7.0(typescript@5.9.3)(vue@3.5.26(typescript@5.9.3))
+      vue: 3.5.26(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   vue-router@4.6.4(vue@3.5.26(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4