From dee3bb09281f113c6ec26fd1afdedf69978025ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=A2=E5=A5=8B=E7=8C=AB?= <kangfenmao@qq.com>
Date: Fri, 8 May 2026 18:09:26 +0800
Subject: [PATCH] feat(settings): refactor settings UI and add settings window
 (#14567)

Signed-off-by: kangfenmao <kangfenmao@qq.com>
Signed-off-by: jdzhang <625013594@qq.com>
Co-authored-by: jdzhang <625013594@qq.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: fullex <106392080+0xfullex@users.noreply.github.com>
---
 electron.vite.config.ts                       |    1 +
 package.json                                  |    2 +
 packages/shared/IpcChannel.ts                 |    1 +
 .../data/preference/preferenceSchemas.ts      |    2 +-
 packages/shared/data/types/settingsPath.ts    |   11 +
 packages/ui/README.md                         |    8 +-
 packages/ui/package.json                      |   11 +
 .../scripts/__tests__/build-theme-css.test.ts |    6 +
 packages/ui/scripts/build-theme-css.ts        |   10 +-
 packages/ui/scripts/codegen.ts                |    4 +-
 .../composites/CodeEditor/CodeEditor.tsx      |   12 +
 .../composites/ConfirmDialog/index.tsx        |    7 +-
 .../DataTable/__tests__/DataTable.test.tsx    |  295 +++++
 .../components/composites/DataTable/index.tsx |  482 +++++++
 .../__tests__/DateTimePicker.test.tsx         |   74 ++
 .../composites/DateTimePicker/index.tsx       |  289 ++++
 .../__tests__/EditableNumber.test.tsx         |   52 +
 .../composites/EditableNumber/index.tsx       |   76 +-
 .../composites/Form/__tests__/Form.test.tsx   |   54 +
 .../src/components/composites/Form/index.tsx  |  141 ++
 .../composites/IconTooltips/IconTooltip.tsx   |    2 +-
 .../composites/IconTooltips/types.ts          |    3 +-
 .../composites/ImageToolButton/index.tsx      |    5 +-
 .../src/components/composites/Input/input.tsx |   28 +-
 .../composites/MenuList/MenuItem.tsx          |    2 +-
 .../composites/PageSidePanel/index.tsx        |    2 +-
 .../composites/SelectDropdown/index.tsx       |   12 +-
 packages/ui/src/components/index.ts           |   31 +-
 .../primitives/__tests__/alert.test.tsx       |   56 +
 .../primitives/__tests__/combobox.test.tsx    |  149 +++
 .../__tests__/segmented-control.test.tsx      |   43 +
 .../primitives/__tests__/switch.test.tsx      |   36 +
 .../ui/src/components/primitives/alert.tsx    |  127 ++
 .../components/primitives/button-group.tsx    |  111 +-
 .../ui/src/components/primitives/button.tsx   |   21 +-
 .../ui/src/components/primitives/calendar.tsx |  149 +++
 .../ui/src/components/primitives/combobox.tsx |  324 ++++-
 .../components/primitives/context-menu.tsx    |  205 +++
 .../ui/src/components/primitives/dialog.tsx   |    4 +-
 .../ui/src/components/primitives/item.tsx     |  157 +++
 packages/ui/src/components/primitives/kbd.tsx |    2 +-
 .../src/components/primitives/pagination.tsx  |    2 +-
 .../{radioGroup.tsx => radio-group.tsx}       |   25 +-
 .../primitives/segmented-control.tsx          |   81 ++
 .../ui/src/components/primitives/select.tsx   |    4 +-
 .../src/components/primitives/separator.tsx   |    4 +-
 .../ui/src/components/primitives/slider.tsx   |    8 +-
 .../ui/src/components/primitives/switch.tsx   |   15 +-
 .../ui/src/components/primitives/table.tsx    |   60 +
 .../ui/src/components/primitives/tabs.tsx     |    2 +-
 .../ui/src/components/primitives/textarea.tsx |    2 +-
 .../ui/src/components/primitives/tooltip.tsx  |   27 +-
 packages/ui/src/styles/theme.css              |    6 +-
 .../ui/src/styles/tokens/colors/semantic.css  |    4 +-
 packages/ui/src/styles/tokens/radius.css      |   22 +-
 .../composites/DataTable.stories.tsx          |  198 +++
 .../composites/DateTimePicker.stories.tsx     |  114 ++
 .../composites/EntitySelector.stories.tsx     |    4 +-
 .../composites/Sortable.stories.tsx           |    6 +-
 .../primitives/ButtonGroup.stories.tsx        |   23 +-
 .../primitives/Combobox.stories.tsx           |  216 +++
 .../primitives/ContextMenu.stories.tsx        |  130 ++
 .../primitives/DescriptionSwitch.stories.tsx  |    3 +-
 .../primitives/InputGroup.stories.tsx         |   17 +-
 .../components/primitives/Item.stories.tsx    |  212 +++
 .../components/primitives/Kbd.stories.tsx     |    2 +-
 .../primitives/SegmentedControl.stories.tsx   |  210 +++
 .../components/primitives/Slider.stories.tsx  |    3 +-
 .../components/primitives/Switch.stories.tsx  |   41 +-
 .../primitives/Textarea.stories.tsx           |    3 +-
 packages/ui/vitest.config.ts                  |    7 +
 pnpm-lock.yaml                                |  709 +++++++++-
 resources/cherry-studio/releases.html         |  344 +++--
 scripts/cloudflare-worker.js                  |    2 +-
 src/main/core/application/serviceRegistry.ts  |    2 +
 src/main/core/window/types.ts                 |    1 +
 src/main/core/window/windowRegistry.ts        |   30 +
 .../__tests__/preferenceSeeder.test.ts        |   18 +
 .../db/seeding/seeders/preferenceSeeder.ts    |    9 +
 src/main/services/AppMenuService.ts           |   15 +-
 src/main/services/MainWindowService.ts        |   27 +-
 src/main/services/SettingsWindowService.ts    |  117 ++
 src/main/services/ShortcutService.ts          |   11 +-
 .../services/__tests__/AppMenuService.test.ts |  137 ++
 .../__tests__/MainWindowService.test.ts       |   86 +-
 .../__tests__/SettingsWindowService.test.ts   |  236 ++++
 .../__tests__/ShortcutService.test.ts         |  115 +-
 src/main/services/protocol/ProtocolService.ts |   40 +-
 .../__tests__/ProtocolService.test.ts         |  106 ++
 .../handlers/__tests__/navigate.test.ts       |   91 ++
 .../__tests__/providersImport.test.ts         |   81 ++
 .../services/protocol/handlers/navigate.ts    |   68 +-
 .../protocol/handlers/providersImport.ts      |   29 +-
 src/preload/index.ts                          |    4 +
 src/renderer/settings.html                    |   23 +
 src/renderer/src/assets/styles/font.css       |    8 +-
 src/renderer/src/components/AddButton.tsx     |    4 +-
 .../__tests__/AppModal.integration.test.tsx   |   70 +
 .../AppModal/__tests__/AppModal.test.tsx      |  268 ++++
 .../src/components/AppModal/index.tsx         |  393 ++++++
 .../src/components/CollapsibleSearchBar.tsx   |   46 +-
 .../src/components/ListItem/index.tsx         |    2 +-
 .../ModelSelector/ModelSelector.tsx           |    8 +-
 .../__tests__/ModelSelector.test.tsx          |   49 +-
 .../src/components/ModelSelector/types.ts     |    1 +
 .../src/components/ModelSelectorLegacy.tsx    |   10 +-
 .../src/components/S3BackupManager.tsx        |   32 +-
 .../src/components/Sidebar/Sidebar.tsx        |   34 +-
 .../src/components/Sidebar/SidebarDocked.tsx  |    4 +-
 .../src/components/Sidebar/SidebarFooter.tsx  |    6 +-
 .../src/components/Sidebar/SidebarMenu.tsx    |   16 +-
 src/renderer/src/components/TextBadge.tsx     |   22 -
 src/renderer/src/components/TopView/index.tsx |   13 +-
 .../src/components/WebdavBackupManager.tsx    |   32 +-
 .../src/components/layout/AppShellTabBar.tsx  |    6 +-
 .../components/layout/ShellTabBarActions.tsx  |   50 +-
 .../__tests__/ShellTabBarActions.test.tsx     |   95 ++
 src/renderer/src/config/constant.ts           |   12 +-
 src/renderer/src/context/TabsContext.tsx      |   20 +-
 src/renderer/src/context/ThemeProvider.tsx    |   27 +-
 src/renderer/src/env.d.ts                     |    4 +-
 .../hooks/__tests__/useMiniAppPopup.test.ts   |  120 +-
 src/renderer/src/hooks/useMiniAppPopup.ts     |   62 +-
 src/renderer/src/i18n/locales/en-us.json      |   70 +-
 src/renderer/src/i18n/locales/zh-cn.json      |   62 +-
 src/renderer/src/i18n/locales/zh-tw.json      |   60 +-
 src/renderer/src/i18n/translate/de-de.json    |  252 ++--
 src/renderer/src/i18n/translate/el-gr.json    |  252 ++--
 src/renderer/src/i18n/translate/es-es.json    |  252 ++--
 src/renderer/src/i18n/translate/fr-fr.json    |  252 ++--
 src/renderer/src/i18n/translate/ja-jp.json    |  252 ++--
 src/renderer/src/i18n/translate/pt-pt.json    |  252 ++--
 src/renderer/src/i18n/translate/ro-ro.json    |  252 ++--
 src/renderer/src/i18n/translate/ru-ru.json    |  252 ++--
 src/renderer/src/i18n/translate/vi-vn.json    |  314 +++--
 .../AgentSettings/AgentSettingsPopup.tsx      |    0
 .../AgentSettings/BaseSettingsPopup.tsx       |   37 +-
 .../AgentSettings/SessionSettingsPopup.tsx    |    0
 .../components/AccessibleDirsSetting.tsx      |   13 +-
 .../components/AdvancedSettings.tsx           |    3 +-
 .../components/DescriptionSetting.tsx         |    4 +-
 .../components/EssentialSettings.tsx          |    0
 .../components/HeartbeatSetting.tsx           |    8 +-
 .../AgentSettings/components/ModelSetting.tsx |    0
 .../AgentSettings/components/NameSetting.tsx  |    4 +-
 .../components/PermissionModeSettings.tsx     |    6 +-
 .../components/PromptSettings.tsx             |   67 +-
 .../SkillsSettings/SkillsSettings.tsx         |   32 +-
 .../components/SoulModeSetting.tsx            |    2 +-
 .../AgentSettings/components/TaskListItem.tsx |    5 +-
 .../components/TaskLogsModal.tsx              |    5 +-
 .../components/ToolsSettings.tsx              |    7 +-
 .../AgentSettings/index.tsx                   |    0
 .../AgentSettings/shared.tsx                  |   69 +-
 .../AgentChatNavbar/AgentContent.tsx          |    4 +-
 .../src/pages/agents/components/AgentItem.tsx |    4 +-
 .../components/AgentSessionInputbar.tsx       |    2 +-
 .../pages/agents/components/SessionItem.tsx   |    4 +-
 .../AssistantKnowledgeBaseSettings.tsx        |   26 +-
 .../AssistantMCPSettings.tsx                  |  174 +--
 .../AssistantModelSettings.tsx                |   71 +-
 .../AssistantPromptSettings.tsx               |   89 +-
 .../AssistantSettings/index.tsx               |   90 +-
 .../Inputbar/tools/permissionModeTool.tsx     |    2 +-
 .../home/Messages/PermissionModeDisplay.tsx   |    2 +-
 .../src/pages/home/Messages/Prompt.tsx        |    2 +-
 .../Tools/MessageAgentTools/NavigateTool.tsx  |    3 +-
 .../home/Tabs/components/AssistantItem.tsx    |    2 +-
 .../ChatNavbarContent/TopicContent.tsx        |    2 +-
 .../home/components/ChatNavBar/index.tsx      |    2 +-
 .../home/components/SelectModelButton.tsx     |   27 +-
 .../src/pages/settings/AboutSettings.tsx      |  158 +--
 .../ChannelsSettings/ChannelDetail.tsx        |  261 ++--
 .../ChannelsSettings/ChannelForms.tsx         |  129 +-
 .../pages/settings/ChannelsSettings/index.tsx |    7 +-
 .../components/ThemeColorPicker.tsx           |  105 ++
 .../__tests__/ThemeColorPicker.test.tsx       |   34 +
 .../pages/settings/CommonSettings/index.tsx   |  851 ++++++++++++
 .../ComponentLabAgentSelectorSettings.tsx     |    2 +-
 .../ComponentLabAssistantSelectorSettings.tsx |    2 +-
 .../ComponentLabModelSelectorSettings.tsx     |    2 +-
 .../ComponentLabSettings.tsx                  |    9 +-
 .../settings/ComponentLabSettings/index.ts    |    4 +
 .../DataSettings/BasicDataSettings.tsx        |  185 +--
 .../settings/DataSettings/DataSettings.tsx    |  120 +-
 .../DataSettings/ImportMenuSettings.tsx       |    9 +-
 .../DataSettings/LocalBackupSettings.tsx      |   19 +-
 .../DataSettings/MarkdownExportSettings.tsx   |   47 +-
 .../DataSettings/NutstoreSettings.tsx         |   27 +-
 .../settings/DataSettings/S3Settings.tsx      |   18 +-
 .../settings/DataSettings/WebDavSettings.tsx  |   18 +-
 .../DisplaySettings/DisplaySettings.tsx       |  517 --------
 .../DisplaySettings/SidebarIconsManager.tsx   |  274 ----
 .../DocProcessSettings/OcrImageSettings.tsx   |   19 +-
 .../DocProcessSettings/OcrOVSettings.tsx      |   11 +-
 .../DocProcessSettings/OcrPpocrSettings.tsx   |    5 +-
 .../OcrProviderSettings.tsx                   |   22 +-
 .../DocProcessSettings/OcrSettings.tsx        |   24 +-
 .../DocProcessSettings/OcrSystemSettings.tsx  |   60 +-
 .../OcrTesseractSettings.tsx                  |   71 +-
 .../PreprocessProviderSettings.tsx            |   62 +-
 .../DocProcessSettings/PreprocessSettings.tsx |   24 +-
 .../settings/DocProcessSettings/index.tsx     |  284 +++-
 .../src/pages/settings/GeneralSettings.tsx    |  392 ------
 .../JoplinSettings.tsx                        |   42 +-
 .../NotionSettings.tsx                        |   68 +-
 .../ObsidianSettings.tsx                      |   60 +-
 .../SiyuanSettings.tsx                        |   33 +-
 .../YuqueSettings.tsx                         |   89 +-
 .../settings/IntegrationSettings/index.tsx    |   72 +
 .../MCPSettings/AddMcpServerModal.tsx         |  224 ++--
 .../MCPSettings/BuiltinMCPServerList.tsx      |  180 ++-
 .../settings/MCPSettings/EditMcpJsonPopup.tsx |  108 +-
 .../MCPSettings/EnvironmentDependencies.tsx   |  234 ++++
 .../settings/MCPSettings/InstallNpxUv.tsx     |  179 ---
 .../settings/MCPSettings/McpDescription.tsx   |   28 +-
 .../settings/MCPSettings/McpDetailList.tsx    |   53 +
 .../settings/MCPSettings/McpMarketList.tsx    |  118 +-
 .../pages/settings/MCPSettings/McpPrompt.tsx  |  102 +-
 .../MCPSettings/McpProviderSettings.tsx       |  182 +--
 .../settings/MCPSettings/McpResource.tsx      |  112 +-
 .../settings/MCPSettings/McpServerCard.tsx    |  338 +++--
 .../settings/MCPSettings/McpServersList.tsx   |  258 ++--
 .../settings/MCPSettings/McpSettings.tsx      | 1171 +++++++++++------
 .../pages/settings/MCPSettings/McpTool.tsx    |  221 ++--
 .../pages/settings/MCPSettings/NpxSearch.tsx  |  110 +-
 .../MCPSettings/ProtocolInstallWarning.tsx    |    4 +-
 .../settings/MCPSettings/SyncServersPopup.tsx |  483 ++++---
 .../src/pages/settings/MCPSettings/index.tsx  |  114 +-
 .../DefaultAssistantSettings.tsx              |  506 ++++---
 .../settings/ModelSettings/ModelSettings.tsx  |  404 ++++--
 .../ModelSettings/ParameterSlider.tsx         |   72 +
 .../ModelSettings/QuickModelPopup.tsx         |  139 +-
 .../ProviderSettings/AddProviderPopup.tsx     |  213 ++-
 .../ProviderSettings/AnthropicSettings.tsx    |   31 +-
 .../ApiOptionsSettings/ApiOptionsSettings.tsx |   11 +-
 .../ProviderSettings/AwsBedrockSettings.tsx   |   25 +-
 .../ProviderSettings/CherryINOAuth.tsx        |  172 +--
 .../ProviderSettings/CherryINSettings.tsx     |   39 +-
 .../ProviderSettings/CustomHeaderPopup.tsx    |    6 +-
 .../ProviderSettings/DMXAPISettings.tsx       |   29 +-
 .../EditModelPopup/ModelEditContent.tsx       |   36 +-
 .../EditModelPopup/ModelTypeSelector.tsx      |   98 +-
 .../ProviderSettings/GPUStackSettings.tsx     |   15 +-
 .../GithubCopilotSettings.tsx                 |  136 +-
 .../ProviderSettings/LMStudioSettings.tsx     |   15 +-
 .../ModelList/AddModelPopup.tsx               |    6 +-
 .../ModelList/DownloadOVMSModelPopup.tsx      |    2 +-
 .../ModelList/HealthCheckPopup.tsx            |   14 +-
 .../ModelList/ManageModelsList.tsx            |   45 +-
 .../ModelList/ManageModelsPopup.tsx           |  139 +-
 .../ProviderSettings/ModelList/ModelList.tsx  |   22 +-
 .../ModelList/ModelListGroup.tsx              |   27 +-
 .../ModelList/ModelListItem.tsx               |   15 +-
 .../ModelList/NewApiAddModelPopup.tsx         |    6 +-
 .../ModelList/NewApiBatchAddModelPopup.tsx    |    2 +-
 .../ProviderSettings/ModelNotesPopup.tsx      |   10 +-
 .../ProviderSettings/OVMSSettings.tsx         |    8 +-
 .../ProviderSettings/ProviderList.tsx         |  167 ++-
 .../ProviderSettings/ProviderOAuth.tsx        |   58 +-
 .../ProviderSettings/ProviderSetting.tsx      |  105 +-
 .../ProviderSettings/UrlSchemaInfoPopup.tsx   |   21 +-
 .../ProviderSettings/VertexAISettings.tsx     |  104 +-
 .../pages/settings/QuickAssistantSettings.tsx |  249 ++--
 .../SelectionAssistantSettings.tsx            |  146 +-
 .../components/ActionsList.tsx                |   20 +-
 .../components/ActionsListDivider.tsx         |   32 +-
 .../components/ActionsListItem.tsx            |  131 +-
 .../components/MacProcessTrustHintModal.tsx   |   60 +-
 .../components/SelectionActionSearchModal.tsx |  300 +++--
 .../components/SelectionActionUserModal.tsx   |  458 +++----
 .../components/SelectionActionsList.tsx       |   30 +-
 .../components/SelectionFilterListModal.tsx   |   98 +-
 .../components/SettingsActionsListHeader.tsx  |   26 +-
 .../src/pages/settings/SettingGroup.tsx       |   67 +-
 .../src/pages/settings/SettingsPage.tsx       |  326 +++--
 .../src/pages/settings/ShortcutSettings.tsx   |  261 +++-
 .../SkillsSettings/SkillsSettings.tsx         |  705 +++-------
 .../src/pages/settings/TasksSettings.tsx      | 1026 ++++++++-------
 .../ApiServerSettings/ApiServerSettings.tsx   |  462 +++----
 .../CustomLanguageModal.tsx                   |  186 ---
 .../CustomLanguageSettings.tsx                |  165 ---
 .../TranslatePromptSettings.tsx               |   66 -
 .../WebSearchSettings/AddSubscribePopup.tsx   |  186 ++-
 .../WebSearchSettings/BasicSettings.tsx       |   79 +-
 .../WebSearchSettings/BlacklistSettings.tsx   |  217 +--
 .../CompressionSettings/CutoffSettings.tsx    |   31 +-
 .../CompressionSettings/index.tsx             |   44 +-
 .../WebSearchGeneralSettings.tsx              |   10 +-
 .../WebSearchProviderSetting.tsx              |   99 +-
 .../settings/WebSearchSettings/index.tsx      |   31 +-
 src/renderer/src/pages/settings/index.tsx     |  142 +-
 .../presets/AssistantPresetsPage.tsx          |    8 +-
 .../components/AssistantPresetCard.tsx        |    2 +-
 .../src/pages/translate/TranslatePage.tsx     |    2 +-
 .../src/pages/translate/TranslateSettings.tsx |    2 +-
 .../{ => components}/TranslateHistory.tsx     |   14 +-
 .../CustomLanguageModal.tsx                   |  205 +++
 .../CustomLanguageSettings.tsx                |  189 +++
 .../TranslatePromptSettings.tsx               |   47 +
 .../TranslateSettingsPopup.tsx                |   54 +-
 src/renderer/src/routeTree.gen.ts             |   76 +-
 src/renderer/src/routes/settings/display.tsx  |    6 -
 src/renderer/src/routes/settings/general.tsx  |    4 +-
 .../src/routes/settings/integrations.tsx      |    6 +
 .../src/routes/settings/mcp/mcp-install.tsx   |    4 +-
 src/renderer/src/routes/settings/notes.tsx    |    6 -
 src/renderer/src/routes/settings/plugins.tsx  |   15 +
 src/renderer/src/services/BackupService.ts    |    4 +
 .../src/services/SettingsWindowService.ts     |    5 +
 src/renderer/src/utils/index.ts               |   12 +-
 .../selection/toolbar/SelectionToolbar.tsx    |    2 +
 .../src/windows/settings/entryPoint.tsx       |  158 +++
 tests/renderer.setup.ts                       |   33 +-
 314 files changed, 18475 insertions(+), 10548 deletions(-)
 create mode 100644 packages/shared/data/types/settingsPath.ts
 create mode 100644 packages/ui/src/components/composites/DataTable/__tests__/DataTable.test.tsx
 create mode 100644 packages/ui/src/components/composites/DataTable/index.tsx
 create mode 100644 packages/ui/src/components/composites/DateTimePicker/__tests__/DateTimePicker.test.tsx
 create mode 100644 packages/ui/src/components/composites/DateTimePicker/index.tsx
 create mode 100644 packages/ui/src/components/composites/EditableNumber/__tests__/EditableNumber.test.tsx
 create mode 100644 packages/ui/src/components/composites/Form/__tests__/Form.test.tsx
 create mode 100644 packages/ui/src/components/composites/Form/index.tsx
 create mode 100644 packages/ui/src/components/primitives/__tests__/alert.test.tsx
 create mode 100644 packages/ui/src/components/primitives/__tests__/combobox.test.tsx
 create mode 100644 packages/ui/src/components/primitives/__tests__/segmented-control.test.tsx
 create mode 100644 packages/ui/src/components/primitives/__tests__/switch.test.tsx
 create mode 100644 packages/ui/src/components/primitives/alert.tsx
 create mode 100644 packages/ui/src/components/primitives/calendar.tsx
 create mode 100644 packages/ui/src/components/primitives/context-menu.tsx
 create mode 100644 packages/ui/src/components/primitives/item.tsx
 rename packages/ui/src/components/primitives/{radioGroup.tsx => radio-group.tsx} (60%)
 create mode 100644 packages/ui/src/components/primitives/segmented-control.tsx
 create mode 100644 packages/ui/src/components/primitives/table.tsx
 create mode 100644 packages/ui/stories/components/composites/DataTable.stories.tsx
 create mode 100644 packages/ui/stories/components/composites/DateTimePicker.stories.tsx
 create mode 100644 packages/ui/stories/components/primitives/ContextMenu.stories.tsx
 create mode 100644 packages/ui/stories/components/primitives/Item.stories.tsx
 create mode 100644 packages/ui/stories/components/primitives/SegmentedControl.stories.tsx
 create mode 100644 src/main/services/SettingsWindowService.ts
 create mode 100644 src/main/services/__tests__/AppMenuService.test.ts
 create mode 100644 src/main/services/__tests__/SettingsWindowService.test.ts
 create mode 100644 src/main/services/protocol/__tests__/ProtocolService.test.ts
 create mode 100644 src/main/services/protocol/handlers/__tests__/navigate.test.ts
 create mode 100644 src/main/services/protocol/handlers/__tests__/providersImport.test.ts
 create mode 100644 src/renderer/settings.html
 create mode 100644 src/renderer/src/components/AppModal/__tests__/AppModal.integration.test.tsx
 create mode 100644 src/renderer/src/components/AppModal/__tests__/AppModal.test.tsx
 create mode 100644 src/renderer/src/components/AppModal/index.tsx
 delete mode 100644 src/renderer/src/components/TextBadge.tsx
 create mode 100644 src/renderer/src/components/layout/__tests__/ShellTabBarActions.test.tsx
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/AgentSettingsPopup.tsx (100%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/BaseSettingsPopup.tsx (68%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/SessionSettingsPopup.tsx (100%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/AccessibleDirsSetting.tsx (88%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/AdvancedSettings.tsx (98%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/DescriptionSetting.tsx (94%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/EssentialSettings.tsx (100%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/HeartbeatSetting.tsx (93%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/ModelSetting.tsx (100%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/NameSetting.tsx (96%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/PermissionModeSettings.tsx (97%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/PromptSettings.tsx (76%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/SkillsSettings/SkillsSettings.tsx (90%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/SoulModeSetting.tsx (97%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/TaskListItem.tsx (95%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/TaskLogsModal.tsx (94%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/components/ToolsSettings.tsx (98%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/index.tsx (100%)
 rename src/renderer/src/pages/{settings => agents}/AgentSettings/shared.tsx (77%)
 rename src/renderer/src/pages/{settings => home}/AssistantSettings/AssistantKnowledgeBaseSettings.tsx (84%)
 rename src/renderer/src/pages/{settings => home}/AssistantSettings/AssistantMCPSettings.tsx (58%)
 rename src/renderer/src/pages/{settings => home}/AssistantSettings/AssistantModelSettings.tsx (93%)
 rename src/renderer/src/pages/{settings => home}/AssistantSettings/AssistantPromptSettings.tsx (79%)
 rename src/renderer/src/pages/{settings => home}/AssistantSettings/index.tsx (73%)
 create mode 100644 src/renderer/src/pages/settings/CommonSettings/components/ThemeColorPicker.tsx
 create mode 100644 src/renderer/src/pages/settings/CommonSettings/components/__tests__/ThemeColorPicker.test.tsx
 create mode 100644 src/renderer/src/pages/settings/CommonSettings/index.tsx
 rename src/renderer/src/pages/settings/{ => ComponentLabSettings}/ComponentLabAgentSelectorSettings.tsx (99%)
 rename src/renderer/src/pages/settings/{ => ComponentLabSettings}/ComponentLabAssistantSelectorSettings.tsx (99%)
 rename src/renderer/src/pages/settings/{ => ComponentLabSettings}/ComponentLabModelSelectorSettings.tsx (99%)
 rename src/renderer/src/pages/settings/{ => ComponentLabSettings}/ComponentLabSettings.tsx (87%)
 create mode 100644 src/renderer/src/pages/settings/ComponentLabSettings/index.ts
 delete mode 100644 src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
 delete mode 100644 src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
 delete mode 100644 src/renderer/src/pages/settings/GeneralSettings.tsx
 rename src/renderer/src/pages/settings/{DataSettings => IntegrationSettings}/JoplinSettings.tsx (78%)
 rename src/renderer/src/pages/settings/{DataSettings => IntegrationSettings}/NotionSettings.tsx (72%)
 rename src/renderer/src/pages/settings/{DataSettings => IntegrationSettings}/ObsidianSettings.tsx (64%)
 rename src/renderer/src/pages/settings/{DataSettings => IntegrationSettings}/SiyuanSettings.tsx (82%)
 rename src/renderer/src/pages/settings/{DataSettings => IntegrationSettings}/YuqueSettings.tsx (53%)
 create mode 100644 src/renderer/src/pages/settings/IntegrationSettings/index.tsx
 create mode 100644 src/renderer/src/pages/settings/MCPSettings/EnvironmentDependencies.tsx
 delete mode 100644 src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
 create mode 100644 src/renderer/src/pages/settings/MCPSettings/McpDetailList.tsx
 create mode 100644 src/renderer/src/pages/settings/ModelSettings/ParameterSlider.tsx
 delete mode 100644 src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
 delete mode 100644 src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
 delete mode 100644 src/renderer/src/pages/settings/TranslateSettingsPopup/TranslatePromptSettings.tsx
 rename src/renderer/src/pages/translate/{ => components}/TranslateHistory.tsx (96%)
 create mode 100644 src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageModal.tsx
 create mode 100644 src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageSettings.tsx
 create mode 100644 src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslatePromptSettings.tsx
 rename src/renderer/src/pages/{settings => translate/components}/TranslateSettingsPopup/TranslateSettingsPopup.tsx (53%)
 delete mode 100644 src/renderer/src/routes/settings/display.tsx
 create mode 100644 src/renderer/src/routes/settings/integrations.tsx
 delete mode 100644 src/renderer/src/routes/settings/notes.tsx
 create mode 100644 src/renderer/src/routes/settings/plugins.tsx
 create mode 100644 src/renderer/src/services/SettingsWindowService.ts
 create mode 100644 src/renderer/src/windows/settings/entryPoint.tsx

diff --git a/electron.vite.config.ts b/electron.vite.config.ts
index a9a45976d5..b5ae848e54 100644
--- a/electron.vite.config.ts
+++ b/electron.vite.config.ts
@@ -146,6 +146,7 @@ export default defineConfig({
       rollupOptions: {
         input: {
           index: resolve(__dirname, 'src/renderer/index.html'),
+          settings: resolve(__dirname, 'src/renderer/settings.html'),
           quickAssistant: resolve(__dirname, 'src/renderer/quickAssistant.html'),
           selectionToolbar: resolve(__dirname, 'src/renderer/selectionToolbar.html'),
           selectionAction: resolve(__dirname, 'src/renderer/selectionAction.html'),
diff --git a/package.json b/package.json
index daab1b1fef..88d23b673d 100644
--- a/package.json
+++ b/package.json
@@ -185,6 +185,7 @@
     "@floating-ui/dom": "1.7.3",
     "@google/genai": "^1.46.0",
     "@hello-pangea/dnd": "^18.0.1",
+    "@hookform/resolvers": "^5.0.1",
     "@iconify-json/material-icon-theme": "^1.2.56",
     "@iconify/react": "^6.0.2",
     "@j178/prek": "^0.3.4",
@@ -399,6 +400,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.55.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-i18next": "^14.1.2",
     "react-infinite-scroll-component": "^6.1.0",
diff --git a/packages/shared/IpcChannel.ts b/packages/shared/IpcChannel.ts
index 416f0c490c..473bf85590 100644
--- a/packages/shared/IpcChannel.ts
+++ b/packages/shared/IpcChannel.ts
@@ -468,6 +468,7 @@ export enum IpcChannel {
   Analytics_TrackTokenUsage = 'analytics:track-token-usage',
 
   // WindowManager
+  SettingsWindow_Open = 'settings-window:open',
   WindowManager_Open = 'window-manager:open',
   WindowManager_Close = 'window-manager:close',
   WindowManager_Minimize = 'window-manager:minimize',
diff --git a/packages/shared/data/preference/preferenceSchemas.ts b/packages/shared/data/preference/preferenceSchemas.ts
index 02708c3309..9a56d66459 100644
--- a/packages/shared/data/preference/preferenceSchemas.ts
+++ b/packages/shared/data/preference/preferenceSchemas.ts
@@ -1,6 +1,6 @@
 /**
  * Auto-generated preferences configuration
- * Generated at: 2026-05-07T06:53:51.724Z
+ * Generated at: 2026-05-08T08:23:28.551Z
  *
  * This file is automatically generated from classification.json
  * To update this file, modify classification.json and run:
diff --git a/packages/shared/data/types/settingsPath.ts b/packages/shared/data/types/settingsPath.ts
new file mode 100644
index 0000000000..6a317ffb99
--- /dev/null
+++ b/packages/shared/data/types/settingsPath.ts
@@ -0,0 +1,11 @@
+export type SettingsPath = '/settings/provider' | `/settings/${string}`
+
+export const DEFAULT_SETTINGS_PATH: SettingsPath = '/settings/provider'
+
+export function isSettingsPath(value: unknown): value is SettingsPath {
+  return typeof value === 'string' && (value === '/settings/provider' || value.startsWith('/settings/'))
+}
+
+export function normalizeSettingsPath(value: unknown): SettingsPath {
+  return isSettingsPath(value) ? value : DEFAULT_SETTINGS_PATH
+}
diff --git a/packages/ui/README.md b/packages/ui/README.md
index d6afcb263f..11db30e39f 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -68,10 +68,10 @@ Use the full Cherry Studio design system so Tailwind theme tokens resolve to Che
 <div className="p-xl">Extra large spacing (5rem)</div>
 <div className="p-8xl">Maximum spacing (15rem)</div>
 
-<div className="rounded-4xs">Tiny radius (0.25rem)</div>
-<div className="rounded-xs">Small radius (1rem)</div>
-<div className="rounded-md">Medium radius (2rem)</div>
-<div className="rounded-xl">Large radius (3rem)</div>
+<div className="rounded-4xs">Tiny radius (0.03125rem)</div>
+<div className="rounded-xs">Small radius (0.125rem)</div>
+<div className="rounded-md">Medium radius (0.5rem)</div>
+<div className="rounded-xl">Large radius (0.875rem)</div>
 <div className="rounded-round">Full radius (999px)</div>
 ```
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e51ddd5485..ab09b3377d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -52,11 +52,18 @@
   },
   "homepage": "https://github.com/CherryHQ/cherry-studio#readme",
   "peerDependencies": {
+    "@hookform/resolvers": "^5.0.0",
     "framer-motion": "^11.0.0 || ^12.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.55.0",
     "tailwindcss": "^4.1.13"
   },
+  "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -78,10 +85,14 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-callback-ref": "^1.1.1",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.545.0",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
     "react-dropzone": "^14.3.8",
     "tailwind-merge": "^2.5.5",
     "vaul": "^1.1.2"
diff --git a/packages/ui/scripts/__tests__/build-theme-css.test.ts b/packages/ui/scripts/__tests__/build-theme-css.test.ts
index b6c1c03626..d82b104ff3 100644
--- a/packages/ui/scripts/__tests__/build-theme-css.test.ts
+++ b/packages/ui/scripts/__tests__/build-theme-css.test.ts
@@ -12,12 +12,18 @@ describe('buildThemeContractCss', () => {
     expect(css).toContain("@import './tokens.css';")
     expect(css).toContain('/* Runtime Theme Inputs */')
     expect(css).toContain('--cs-theme-primary: var(--cs-primary);')
+    expect(css).toContain('--cs-theme-ring: color-mix(in srgb, var(--cs-theme-primary) 40%, transparent);')
+    expect(css).not.toContain('--cs-user-font-family:')
+    expect(css).not.toContain('--cs-user-code-font-family:')
     expect(css).toContain('/* Compatibility Aliases */')
     expect(css).toContain('--primary: var(--color-primary);')
+    expect(css).toContain('--ring: var(--color-ring);')
     expect(css).toContain('--color-neutral-50: var(--cs-neutral-50);')
     expect(css).toContain('--color-brand-500: var(--cs-brand-500);')
     expect(css).toContain('/* Semantic Colors */')
     expect(css).toContain('--color-primary: var(--cs-theme-primary);')
+    expect(css).toContain('--color-ring: var(--cs-theme-ring);')
+    expect(css).not.toContain('--color-ring: var(--cs-ring);')
     expect(css).toContain('--color-destructive: var(--cs-destructive);')
     expect(css).toContain('--color-error-base: var(--cs-error-base);')
     expect(css).toContain('--radius-md: var(--cs-radius-md);')
diff --git a/packages/ui/scripts/build-theme-css.ts b/packages/ui/scripts/build-theme-css.ts
index 64a9e8dd7f..c52c07986c 100644
--- a/packages/ui/scripts/build-theme-css.ts
+++ b/packages/ui/scripts/build-theme-css.ts
@@ -10,17 +10,17 @@ const THEME_OUTPUT_PATH = path.join(STYLES_DIR, 'theme.css')
 
 const RUNTIME_THEME_INPUT_LINES = [
   '--cs-theme-primary: var(--cs-primary);',
-  '--cs-user-font-family: initial;',
-  '--cs-user-code-font-family: initial;'
+  '--cs-theme-ring: color-mix(in srgb, var(--cs-theme-primary) 40%, transparent);'
 ]
 
-const COMPATIBILITY_ALIAS_LINES = ['--primary: var(--color-primary);']
+const COMPATIBILITY_ALIAS_LINES = ['--primary: var(--color-primary);', '--ring: var(--color-ring);']
 
 const PRIMARY_SEMANTIC_LINES = [
   '--color-primary: var(--cs-theme-primary);',
   '--color-primary-hover: var(--cs-primary-hover);',
   '--color-primary-soft: color-mix(in srgb, var(--color-primary) 60%, transparent);',
-  '--color-primary-mute: color-mix(in srgb, var(--color-primary) 30%, transparent);'
+  '--color-primary-mute: color-mix(in srgb, var(--color-primary) 30%, transparent);',
+  '--color-ring: var(--cs-theme-ring);'
 ]
 
 const SPACING_COMMENT_LINES = [
@@ -75,7 +75,7 @@ function buildSection(title: string, lines: string[]): string {
 
 export function buildThemeContractCss(inputs: ThemeContractInputs): string {
   const semanticContractTokens = inputs.semanticColors.filter(
-    (token) => token !== 'primary' && token !== 'primary-hover'
+    (token) => !['primary', 'primary-hover', 'ring'].includes(token)
   )
 
   const sections = [
diff --git a/packages/ui/scripts/codegen.ts b/packages/ui/scripts/codegen.ts
index 449f3121b2..13740a8edf 100644
--- a/packages/ui/scripts/codegen.ts
+++ b/packages/ui/scripts/codegen.ts
@@ -100,12 +100,12 @@ export function generateAvatar(opts: { outPath: string; colorName: string; varia
   const sf = project.createSourceFile('avatar.tsx', '', { overwrite: true })
 
   sf.addImportDeclaration({
-    moduleSpecifier: '../../../../lib/utils',
+    moduleSpecifier: '@cherrystudio/ui/lib/utils',
     namedImports: ['cn']
   })
 
   sf.addImportDeclaration({
-    moduleSpecifier: '../../../primitives/avatar',
+    moduleSpecifier: '@cherrystudio/ui/components/primitives/avatar',
     namedImports: ['Avatar', 'AvatarFallback']
   })
 
diff --git a/packages/ui/src/components/composites/CodeEditor/CodeEditor.tsx b/packages/ui/src/components/composites/CodeEditor/CodeEditor.tsx
index da05922ea3..4e463d5c69 100644
--- a/packages/ui/src/components/composites/CodeEditor/CodeEditor.tsx
+++ b/packages/ui/src/components/composites/CodeEditor/CodeEditor.tsx
@@ -7,6 +7,17 @@ import { useBlurHandler, useHeightListener, useLanguageExtensions, useSaveKeymap
 import type { CodeEditorProps } from './types'
 import { prepareCodeChanges } from './utils'
 
+const codeEditorGutterTheme = EditorView.theme({
+  '.cm-gutters': {
+    backgroundColor: 'transparent',
+    borderRight: 'none',
+    color: 'var(--color-muted-foreground)'
+  },
+  '.cm-activeLineGutter': {
+    backgroundColor: 'transparent'
+  }
+})
+
 /**
  * A code editor component based on CodeMirror.
  * This is a wrapper of ReactCodeMirror.
@@ -92,6 +103,7 @@ const CodeEditor = ({
       ...(extensions ?? []),
       ...langExtensions,
       ...(wrapped ? [EditorView.lineWrapping] : []),
+      codeEditorGutterTheme,
       saveKeymapExtension,
       blurExtension,
       heightListenerExtension
diff --git a/packages/ui/src/components/composites/ConfirmDialog/index.tsx b/packages/ui/src/components/composites/ConfirmDialog/index.tsx
index c0d8d8ee32..72100c24a3 100644
--- a/packages/ui/src/components/composites/ConfirmDialog/index.tsx
+++ b/packages/ui/src/components/composites/ConfirmDialog/index.tsx
@@ -1,6 +1,4 @@
-import * as React from 'react'
-
-import { Button } from '../../primitives/button'
+import { Button } from '@cherrystudio/ui/components/primitives/button'
 import {
   Dialog,
   DialogClose,
@@ -9,7 +7,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle
-} from '../../primitives/dialog'
+} from '@cherrystudio/ui/components/primitives/dialog'
+import * as React from 'react'
 
 interface ConfirmDialogProps {
   /** Controls the open state of the dialog */
diff --git a/packages/ui/src/components/composites/DataTable/__tests__/DataTable.test.tsx b/packages/ui/src/components/composites/DataTable/__tests__/DataTable.test.tsx
new file mode 100644
index 0000000000..8e9469afab
--- /dev/null
+++ b/packages/ui/src/components/composites/DataTable/__tests__/DataTable.test.tsx
@@ -0,0 +1,295 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import type { ColumnDef } from '@tanstack/react-table'
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react'
+import type * as React from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../../primitives/checkbox', () => ({
+  Checkbox: ({
+    checked,
+    disabled,
+    onCheckedChange,
+    ...props
+  }: React.ComponentProps<'button'> & {
+    checked?: boolean | 'indeterminate'
+    onCheckedChange?: (checked: boolean) => void
+  }) => (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={checked === 'indeterminate' ? 'mixed' : Boolean(checked)}
+      disabled={disabled}
+      onClick={() => onCheckedChange?.(!checked)}
+      {...props}
+    />
+  )
+}))
+
+vi.mock('../../../primitives/radio-group', async () => {
+  const React = await import('react')
+  const RadioContext = React.createContext<{
+    value?: string
+    onValueChange?: (value: string) => void
+  }>({})
+
+  return {
+    RadioGroup: ({
+      value,
+      onValueChange,
+      children,
+      ...props
+    }: React.ComponentProps<'div'> & {
+      value?: string
+      onValueChange?: (value: string) => void
+    }) => (
+      <RadioContext value={{ value, onValueChange }}>
+        <div role="radiogroup" {...props}>
+          {children}
+        </div>
+      </RadioContext>
+    ),
+    RadioGroupItem: ({
+      value,
+      disabled,
+      ...props
+    }: Omit<React.ComponentProps<'button'>, 'value'> & {
+      value: string
+    }) => {
+      const context = React.use(RadioContext)
+
+      return (
+        <button
+          type="button"
+          role="radio"
+          aria-checked={context.value === value}
+          disabled={disabled}
+          onClick={() => context.onValueChange?.(value)}
+          {...props}
+        />
+      )
+    }
+  }
+})
+
+import { DataTable } from '../index'
+
+type Person = {
+  id: string
+  name: string
+  role: string
+  locked?: boolean
+}
+
+const people: Person[] = [
+  { id: '1', name: 'Ada', role: 'Engineer' },
+  { id: '2', name: 'Grace', role: 'Scientist' },
+  { id: '3', name: 'Linus', role: 'Maintainer', locked: true }
+]
+
+const columns: ColumnDef<Person>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    meta: { width: 180, maxWidth: 180 }
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    cell: ({ row }) => <span>{row.original.role}</span>
+  }
+]
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('DataTable', () => {
+  it('renders dynamic columns and cells', () => {
+    render(<DataTable data={people} columns={columns} rowKey="id" />)
+
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument()
+    expect(screen.getByRole('columnheader', { name: 'Role' })).toBeInTheDocument()
+    expect(screen.getByText('Ada')).toBeInTheDocument()
+    expect(screen.getByText('Scientist')).toBeInTheDocument()
+  })
+
+  it('renders header slots', () => {
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        headerLeft={<button type="button">Left action</button>}
+        headerRight={<button type="button">Right action</button>}
+      />
+    )
+
+    expect(screen.getByRole('button', { name: 'Left action' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Right action' })).toBeInTheDocument()
+  })
+
+  it('uses full parent width with an optional max width', () => {
+    render(<DataTable data={people} columns={columns} rowKey="id" maxWidth={480} />)
+
+    const root = screen.getByRole('table').closest('[data-slot="data-table"]')
+    expect(root).toHaveClass('w-full', 'max-w-full')
+    expect(root).toHaveStyle({ maxWidth: '480px' })
+  })
+
+  it('applies explicit column widths and leaves unspecified columns fluid', () => {
+    render(<DataTable data={people} columns={columns} rowKey="id" />)
+
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveStyle({ width: '180px' })
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toHaveStyle({ maxWidth: '180px' })
+    expect(screen.getByRole('cell', { name: 'Ada' })).toHaveStyle({ width: '180px' })
+    expect(screen.getByRole('cell', { name: 'Ada' })).toHaveStyle({ maxWidth: '180px' })
+    expect(screen.getByRole('columnheader', { name: 'Role' })).not.toHaveStyle({ width: '180px' })
+    expect(screen.getByRole('columnheader', { name: 'Role' }).style.width).toBe('')
+  })
+
+  it('bounds long cell and expanded row content to the table width', () => {
+    const longCellText = 'Navigate to a URL and optionally fetch page content. '.repeat(4).trim()
+    const longExpandedText = 'Expanded schema description '.repeat(8).trim()
+
+    render(
+      <DataTable
+        data={[{ id: 'long-row', name: 'open', role: longCellText }]}
+        columns={columns}
+        rowKey="id"
+        expandedRowKeys={['long-row']}
+        renderExpandedRow={() => <div>{longExpandedText}</div>}
+      />
+    )
+
+    const longCell = screen.getByText(longCellText).closest('td')
+    expect(longCell).toHaveClass('min-w-0', 'max-w-full', 'whitespace-normal', 'break-words')
+    expect(longCell?.className).toContain('[overflow-wrap:anywhere]')
+
+    const expandedCell = screen.getByText(longExpandedText).closest('td')
+    expect(expandedCell).toHaveClass('max-w-full', 'whitespace-normal', 'break-words')
+
+    const expandedContent = expandedCell?.querySelector('div[class*="overflow-hidden"]')
+    expect(expandedContent).toHaveClass('w-full', 'max-w-full', 'overflow-hidden', 'whitespace-normal', 'break-words')
+    expect(expandedContent?.className).toContain('[overflow-wrap:anywhere]')
+    expect(expandedContent?.className).toContain('[&_table]:table-fixed')
+  })
+
+  it('supports multiple row selection and disabled rows', () => {
+    const onChange = vi.fn()
+
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'multiple',
+          selectedRowKeys: ['1'],
+          onChange,
+          getCheckboxProps: (person) => ({ disabled: person.locked })
+        }}
+      />
+    )
+
+    const graceRow = screen.getByText('Grace').closest('tr')
+    expect(graceRow).not.toBeNull()
+    fireEvent.click(within(graceRow as HTMLTableRowElement).getByRole('checkbox'))
+    expect(onChange).toHaveBeenCalledWith(['1', '2'], [people[0], people[1]])
+
+    const lockedRow = screen.getByText('Linus').closest('tr')
+    expect(lockedRow).not.toBeNull()
+    expect(within(lockedRow as HTMLTableRowElement).getByRole('checkbox')).toBeDisabled()
+  })
+
+  it('supports select all for multiple selection', () => {
+    const onChange = vi.fn()
+
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'multiple',
+          selectedRowKeys: [],
+          onChange,
+          getCheckboxProps: (person) => ({ disabled: person.locked })
+        }}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Select all rows' }))
+    expect(onChange).toHaveBeenCalledWith(['1', '2'], [people[0], people[1]])
+  })
+
+  it('supports single row selection', () => {
+    const onChange = vi.fn()
+
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'single',
+          selectedRowKey: null,
+          onChange
+        }}
+      />
+    )
+
+    const graceRow = screen.getByText('Grace').closest('tr')
+    expect(graceRow).not.toBeNull()
+    fireEvent.click(within(graceRow as HTMLTableRowElement).getByRole('radio'))
+    expect(onChange).toHaveBeenCalledWith('2', people[1])
+  })
+
+  it('tracks one selected row for single selection', () => {
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'single',
+          selectedRowKey: '1',
+          onChange: vi.fn()
+        }}
+      />
+    )
+
+    const radios = screen.getAllByRole('radio')
+    expect(radios[0]).toHaveAttribute('aria-checked', 'true')
+    expect(radios[1]).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('renders empty text', () => {
+    render(<DataTable data={[]} columns={columns} rowKey="id" emptyText="No people" />)
+    expect(screen.getByText('No people')).toBeInTheDocument()
+  })
+
+  it('supports controlled expanded rows', () => {
+    const onExpandedRowChange = vi.fn()
+
+    render(
+      <DataTable
+        data={people}
+        columns={columns}
+        rowKey="id"
+        expandedRowKeys={['1']}
+        onExpandedRowChange={onExpandedRowChange}
+        renderExpandedRow={(person) => <div>Details for {person.name}</div>}
+      />
+    )
+
+    expect(screen.getByText('Details for Ada')).toBeInTheDocument()
+
+    const graceRow = screen.getByText('Grace').closest('tr')
+    expect(graceRow).not.toBeNull()
+    fireEvent.click(within(graceRow as HTMLTableRowElement).getByRole('button', { name: 'Expand row' }))
+    expect(onExpandedRowChange).toHaveBeenCalledWith(['1', '2'])
+  })
+})
diff --git a/packages/ui/src/components/composites/DataTable/index.tsx b/packages/ui/src/components/composites/DataTable/index.tsx
new file mode 100644
index 0000000000..023b97029d
--- /dev/null
+++ b/packages/ui/src/components/composites/DataTable/index.tsx
@@ -0,0 +1,482 @@
+import { Checkbox } from '@cherrystudio/ui/components/primitives/checkbox'
+import { RadioGroup, RadioGroupItem } from '@cherrystudio/ui/components/primitives/radio-group'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@cherrystudio/ui/components/primitives/table'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import {
+  type Cell,
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  type RowSelectionState,
+  type Updater,
+  useReactTable
+} from '@tanstack/react-table'
+import { ChevronRight } from 'lucide-react'
+import * as React from 'react'
+
+export type DataTableKey = React.Key
+
+export type DataTableColumnMeta = {
+  className?: string
+  headerClassName?: string
+  width?: number | string
+  maxWidth?: number | string
+  align?: 'left' | 'center' | 'right'
+}
+
+type DataTableSelectionBase<TData> = {
+  getCheckboxProps?: (record: TData) => {
+    disabled?: boolean
+    ariaLabel?: string
+  }
+  columnWidth?: number | string
+}
+
+export type DataTableSelection<TData> =
+  | (DataTableSelectionBase<TData> & {
+      type: 'single'
+      selectedRowKey: DataTableKey | null
+      onChange: (selectedRowKey: DataTableKey | null, selectedRow: TData | null) => void
+    })
+  | (DataTableSelectionBase<TData> & {
+      type: 'multiple'
+      selectedRowKeys: DataTableKey[]
+      onChange: (selectedRowKeys: DataTableKey[], selectedRows: TData[]) => void
+    })
+
+export type DataTableProps<TData> = {
+  data: TData[]
+  columns: ColumnDef<TData, unknown>[]
+  rowKey: keyof TData | ((record: TData) => DataTableKey)
+  selection?: DataTableSelection<TData>
+  headerLeft?: React.ReactNode
+  headerRight?: React.ReactNode
+  emptyText?: React.ReactNode
+  maxHeight?: number | string
+  maxWidth?: number | string
+  tableLayout?: 'auto' | 'fixed'
+  rowClassName?: string | ((record: TData, index: number) => string)
+  onRowClick?: (record: TData, index: number) => void
+  renderExpandedRow?: (record: TData, index: number) => React.ReactNode
+  getCanExpand?: (record: TData) => boolean
+  expandedRowKeys?: DataTableKey[]
+  onExpandedRowChange?: (expandedRowKeys: DataTableKey[]) => void
+  className?: string
+}
+
+const normalizeKey = (key: DataTableKey) => String(key)
+
+const toCssSize = (value: number | string | undefined) => (typeof value === 'number' ? `${value}px` : value)
+
+const contentContainmentClassName = 'min-w-0 max-w-full whitespace-normal break-words [overflow-wrap:anywhere]'
+const tableShellClassName =
+  'w-full max-w-full overflow-hidden rounded-lg border border-border/70 bg-background-subtle shadow-xs'
+const tableScrollAreaClassName = 'w-full max-w-full overflow-x-auto'
+const tableHeaderClassName = 'sticky top-0 z-1 bg-background-subtle/70'
+const tableHeaderRowClassName = 'border-border/70 bg-background-subtle/70 hover:bg-transparent'
+const tableHeaderCellClassName =
+  'h-10 bg-background-subtle/70 px-3 py-2 font-semibold text-muted-foreground text-xs leading-4'
+const tableBodyRowClassName =
+  'border-border/60 bg-background-subtle hover:bg-muted/40 data-[state=selected]:bg-muted/60'
+const tableBodyCellClassName = 'px-3 py-2.5 text-sm font-medium leading-5 text-foreground'
+const tableExpandedCellClassName = 'bg-muted/20 px-3 py-2.5 text-sm font-medium leading-5 text-foreground'
+const tableEmptyCellClassName = 'h-24 px-3 py-6 text-center text-sm font-medium text-foreground-muted'
+const tableExpandButtonClassName =
+  'flex size-6 items-center justify-center rounded-md text-foreground-muted transition-colors hover:bg-accent/70 hover:text-foreground'
+
+function getColumnMeta<TData>(cell: Cell<TData, unknown>): DataTableColumnMeta | undefined {
+  return cell.column.columnDef.meta as DataTableColumnMeta | undefined
+}
+
+function getHeaderMeta<TData>(columnDef: ColumnDef<TData, unknown>): DataTableColumnMeta | undefined {
+  return columnDef.meta as DataTableColumnMeta | undefined
+}
+
+function getAlignClass(align?: DataTableColumnMeta['align']) {
+  if (align === 'center') return 'text-center'
+  if (align === 'right') return 'text-right'
+  return undefined
+}
+
+function getColumnStyle(meta?: DataTableColumnMeta): React.CSSProperties | undefined {
+  if (!meta?.width && !meta?.maxWidth) {
+    return undefined
+  }
+
+  return {
+    width: toCssSize(meta.width),
+    maxWidth: toCssSize(meta.maxWidth)
+  }
+}
+
+function DataTable<TData>({
+  data,
+  columns,
+  rowKey,
+  selection,
+  headerLeft,
+  headerRight,
+  emptyText = 'No results.',
+  maxHeight,
+  maxWidth,
+  tableLayout = 'auto',
+  rowClassName,
+  onRowClick,
+  renderExpandedRow,
+  getCanExpand,
+  expandedRowKeys = [],
+  onExpandedRowChange,
+  className
+}: DataTableProps<TData>) {
+  const getRecordKey = React.useCallback(
+    (record: TData): DataTableKey => {
+      if (typeof rowKey === 'function') {
+        return rowKey(record)
+      }
+      return record[rowKey] as DataTableKey
+    },
+    [rowKey]
+  )
+
+  const rowById = React.useMemo(() => {
+    const map = new Map<string, { key: DataTableKey; record: TData }>()
+    data.forEach((record) => {
+      const key = getRecordKey(record)
+      map.set(normalizeKey(key), { key, record })
+    })
+    return map
+  }, [data, getRecordKey])
+
+  const selectedRowIds = React.useMemo<RowSelectionState>(() => {
+    if (!selection) {
+      return {}
+    }
+
+    const selectedRowKeys =
+      selection.type === 'single'
+        ? selection.selectedRowKey === null
+          ? []
+          : [selection.selectedRowKey]
+        : selection.selectedRowKeys
+
+    return selectedRowKeys.reduce<RowSelectionState>((acc, key) => {
+      acc[normalizeKey(key)] = true
+      return acc
+    }, {})
+  }, [selection])
+
+  const emitSelectionChange = React.useCallback(
+    (nextSelection: RowSelectionState) => {
+      if (!selection) {
+        return
+      }
+
+      const selected = Object.keys(nextSelection)
+        .filter((id) => nextSelection[id])
+        .map((id) => rowById.get(id))
+        .filter((entry): entry is { key: DataTableKey; record: TData } => Boolean(entry))
+
+      const normalizedSelected = selection.type === 'single' ? selected.slice(-1) : selected
+
+      if (selection.type === 'single') {
+        const selectedEntry = normalizedSelected[0]
+        selection.onChange(selectedEntry?.key ?? null, selectedEntry?.record ?? null)
+        return
+      }
+
+      selection.onChange(
+        normalizedSelected.map((entry) => entry.key),
+        normalizedSelected.map((entry) => entry.record)
+      )
+    },
+    [rowById, selection]
+  )
+
+  const handleRowSelectionChange = React.useCallback(
+    (updater: Updater<RowSelectionState>) => {
+      const next = typeof updater === 'function' ? updater(selectedRowIds) : updater
+      emitSelectionChange(next)
+    },
+    [emitSelectionChange, selectedRowIds]
+  )
+
+  const selectionColumn = React.useMemo<ColumnDef<TData> | null>(() => {
+    if (!selection) {
+      return null
+    }
+
+    const width = selection.columnWidth ?? 44
+
+    if (selection.type === 'single') {
+      return {
+        id: '__selection',
+        size: typeof width === 'number' ? width : undefined,
+        header: '',
+        cell: ({ row }) => {
+          const checkboxProps = selection.getCheckboxProps?.(row.original)
+          return (
+            <div className="flex items-center justify-center">
+              <RadioGroupItem
+                value={row.id}
+                disabled={!row.getCanSelect() || checkboxProps?.disabled}
+                aria-label={checkboxProps?.ariaLabel ?? 'Select row'}
+                size="sm"
+              />
+            </div>
+          )
+        },
+        enableSorting: false,
+        enableHiding: false,
+        meta: { width, maxWidth: width, align: 'center' } satisfies DataTableColumnMeta
+      }
+    }
+
+    return {
+      id: '__selection',
+      size: typeof width === 'number' ? width : undefined,
+      header: ({ table }) => (
+        <div className="flex items-center justify-center">
+          <Checkbox
+            size="sm"
+            checked={table.getIsAllRowsSelected() ? true : table.getIsSomeRowsSelected() ? 'indeterminate' : false}
+            onCheckedChange={(checked) => table.toggleAllRowsSelected(Boolean(checked))}
+            aria-label="Select all rows"
+          />
+        </div>
+      ),
+      cell: ({ row }) => {
+        const checkboxProps = selection.getCheckboxProps?.(row.original)
+        return (
+          <div className="flex items-center justify-center">
+            <Checkbox
+              size="sm"
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect() || checkboxProps?.disabled}
+              onCheckedChange={(checked) => row.toggleSelected(Boolean(checked))}
+              aria-label={checkboxProps?.ariaLabel ?? 'Select row'}
+            />
+          </div>
+        )
+      },
+      enableSorting: false,
+      enableHiding: false,
+      meta: { width, maxWidth: width, align: 'center' } satisfies DataTableColumnMeta
+    }
+  }, [selection])
+
+  const expandedRowIdSet = React.useMemo(
+    () => new Set(expandedRowKeys.map((key) => normalizeKey(key))),
+    [expandedRowKeys]
+  )
+
+  const toggleExpandedRow = React.useCallback(
+    (record: TData) => {
+      if (!onExpandedRowChange) {
+        return
+      }
+
+      const key = getRecordKey(record)
+      const id = normalizeKey(key)
+      const next = new Set(expandedRowIdSet)
+
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+
+      const orderedKeys = data.map((item) => getRecordKey(item)).filter((itemKey) => next.has(normalizeKey(itemKey)))
+
+      onExpandedRowChange(orderedKeys)
+    },
+    [data, expandedRowIdSet, getRecordKey, onExpandedRowChange]
+  )
+
+  const expandColumn = React.useMemo<ColumnDef<TData> | null>(() => {
+    if (!renderExpandedRow) {
+      return null
+    }
+
+    return {
+      id: '__expand',
+      size: 36,
+      header: '',
+      cell: ({ row }) => {
+        const canExpand = getCanExpand ? getCanExpand(row.original) : true
+        const isExpanded = expandedRowIdSet.has(row.id)
+
+        if (!canExpand) {
+          return null
+        }
+
+        return (
+          <button
+            type="button"
+            className={tableExpandButtonClassName}
+            aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+            aria-expanded={isExpanded}
+            onClick={(event) => {
+              event.stopPropagation()
+              toggleExpandedRow(row.original)
+            }}>
+            <ChevronRight className={cn('size-4 transition-transform', isExpanded && 'rotate-90')} />
+          </button>
+        )
+      },
+      enableSorting: false,
+      enableHiding: false,
+      meta: { width: 36, maxWidth: 36, align: 'center' } satisfies DataTableColumnMeta
+    }
+  }, [expandedRowIdSet, getCanExpand, renderExpandedRow, toggleExpandedRow])
+
+  const tableColumns = React.useMemo<ColumnDef<TData>[]>(
+    () => [selectionColumn, expandColumn, ...columns].filter((column): column is ColumnDef<TData> => Boolean(column)),
+    [columns, expandColumn, selectionColumn]
+  )
+
+  const table = useReactTable({
+    data,
+    columns: tableColumns,
+    getRowId: (record) => normalizeKey(getRecordKey(record)),
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      rowSelection: selectedRowIds
+    },
+    enableRowSelection: (row) => !selection?.getCheckboxProps?.(row.original)?.disabled,
+    enableMultiRowSelection: selection?.type === 'multiple',
+    onRowSelectionChange: handleRowSelectionChange
+  })
+
+  const visibleColumnCount = table.getVisibleFlatColumns().length
+  const hasToolbar = Boolean(headerLeft || headerRight)
+  const tableElement = (
+    <div data-slot="data-table-shell" className={cn(tableShellClassName, className)}>
+      <div
+        style={{ maxHeight: toCssSize(maxHeight) }}
+        className={cn(tableScrollAreaClassName, maxHeight && 'overflow-y-auto')}>
+        <Table className="max-w-full" style={{ tableLayout }}>
+          <TableHeader className={tableHeaderClassName}>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id} className={tableHeaderRowClassName}>
+                {headerGroup.headers.map((header) => {
+                  const meta = getHeaderMeta(header.column.columnDef)
+
+                  return (
+                    <TableHead
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      className={cn(
+                        contentContainmentClassName,
+                        tableHeaderCellClassName,
+                        getAlignClass(meta?.align),
+                        meta?.headerClassName
+                      )}
+                      style={getColumnStyle(meta)}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row, index) => {
+                const key = getRecordKey(row.original)
+                const isExpanded = expandedRowIdSet.has(normalizeKey(key))
+                const customRowClassName =
+                  typeof rowClassName === 'function' ? rowClassName(row.original, index) : rowClassName
+
+                return (
+                  <React.Fragment key={row.id}>
+                    <TableRow
+                      data-state={row.getIsSelected() ? 'selected' : undefined}
+                      className={cn(tableBodyRowClassName, onRowClick && 'cursor-pointer', customRowClassName)}
+                      onClick={() => onRowClick?.(row.original, index)}>
+                      {row.getVisibleCells().map((cell) => {
+                        const meta = getColumnMeta(cell)
+
+                        return (
+                          <TableCell
+                            key={cell.id}
+                            className={cn(
+                              contentContainmentClassName,
+                              tableBodyCellClassName,
+                              getAlignClass(meta?.align),
+                              meta?.className
+                            )}
+                            style={getColumnStyle(meta)}>
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </TableCell>
+                        )
+                      })}
+                    </TableRow>
+                    {renderExpandedRow && isExpanded && (
+                      <TableRow className="hover:bg-transparent">
+                        <TableCell
+                          colSpan={visibleColumnCount}
+                          className={cn(tableExpandedCellClassName, contentContainmentClassName)}>
+                          <div
+                            className={cn(
+                              'w-full overflow-hidden',
+                              contentContainmentClassName,
+                              '[&_table]:w-full [&_table]:table-fixed [&_td]:whitespace-normal [&_th]:whitespace-normal'
+                            )}>
+                            {renderExpandedRow(row.original, index)}
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    )}
+                  </React.Fragment>
+                )
+              })
+            ) : (
+              <TableRow className="hover:bg-transparent">
+                <TableCell colSpan={visibleColumnCount || 1} className={tableEmptyCellClassName}>
+                  {emptyText}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+
+  return (
+    <div
+      data-slot="data-table"
+      className="flex w-full max-w-full flex-col gap-2"
+      style={{ maxWidth: toCssSize(maxWidth) }}>
+      {hasToolbar && (
+        <div className="flex min-h-8 items-center justify-between gap-3">
+          <div className="flex min-w-0 items-center gap-2">{headerLeft}</div>
+          <div className="flex min-w-0 items-center justify-end gap-2">{headerRight}</div>
+        </div>
+      )}
+      {selection?.type === 'single' ? (
+        <RadioGroup
+          value={selection.selectedRowKey === null ? '' : normalizeKey(selection.selectedRowKey)}
+          onValueChange={(value) => {
+            const selected = rowById.get(value)
+            selection.onChange(selected?.key ?? null, selected?.record ?? null)
+          }}
+          className="block">
+          {tableElement}
+        </RadioGroup>
+      ) : (
+        tableElement
+      )}
+    </div>
+  )
+}
+
+export { DataTable }
+export type { ColumnDef }
diff --git a/packages/ui/src/components/composites/DateTimePicker/__tests__/DateTimePicker.test.tsx b/packages/ui/src/components/composites/DateTimePicker/__tests__/DateTimePicker.test.tsx
new file mode 100644
index 0000000000..e210144501
--- /dev/null
+++ b/packages/ui/src/components/composites/DateTimePicker/__tests__/DateTimePicker.test.tsx
@@ -0,0 +1,74 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { DateTimePicker } from '../index'
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('DateTimePicker', () => {
+  it('formats the selected value in the trigger', () => {
+    render(
+      <DateTimePicker
+        defaultValue={new Date(2026, 3, 29, 14, 5, 9)}
+        format="yyyy-MM-dd HH:mm:ss"
+        placeholder="Pick date"
+      />
+    )
+
+    expect(screen.getByRole('button')).toHaveTextContent('2026-04-29 14:05:09')
+  })
+
+  it('updates hour, minute and second when granularity is second', () => {
+    const onChange = vi.fn()
+
+    function ControlledPicker() {
+      const [value, setValue] = useState(new Date(2026, 3, 29, 14, 5, 9))
+      return (
+        <DateTimePicker
+          value={value}
+          granularity="second"
+          open
+          onOpenChange={() => {}}
+          onChange={(date) => {
+            if (date) setValue(date)
+            onChange(date)
+          }}
+        />
+      )
+    }
+
+    render(<ControlledPicker />)
+
+    fireEvent.change(screen.getByLabelText('Hour'), { target: { value: '08' } })
+    fireEvent.change(screen.getByLabelText('Minute'), { target: { value: '30' } })
+    fireEvent.change(screen.getByLabelText('Second'), { target: { value: '45' } })
+
+    const lastCall = onChange.mock.calls.at(-1)?.[0] as Date
+    expect(lastCall.getHours()).toBe(8)
+    expect(lastCall.getMinutes()).toBe(30)
+    expect(lastCall.getSeconds()).toBe(45)
+  })
+
+  it('hides time controls when granularity is day', () => {
+    render(<DateTimePicker defaultValue={new Date(2026, 3, 29)} granularity="day" open onOpenChange={() => {}} />)
+
+    expect(screen.queryByLabelText('Hour')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Minute')).not.toBeInTheDocument()
+    expect(screen.queryByLabelText('Second')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/ui/src/components/composites/DateTimePicker/index.tsx b/packages/ui/src/components/composites/DateTimePicker/index.tsx
new file mode 100644
index 0000000000..a09824d4f1
--- /dev/null
+++ b/packages/ui/src/components/composites/DateTimePicker/index.tsx
@@ -0,0 +1,289 @@
+import { Button } from '@cherrystudio/ui/components/primitives/button'
+import { Calendar, type CalendarProps } from '@cherrystudio/ui/components/primitives/calendar'
+import { Input } from '@cherrystudio/ui/components/primitives/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@cherrystudio/ui/components/primitives/popover'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { format as formatDate } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import * as React from 'react'
+
+export type DateTimeGranularity = 'day' | 'hour' | 'minute' | 'second'
+
+export type DateTimePickerLabels = {
+  hour?: string
+  minute?: string
+  second?: string
+}
+
+type DateTimePickerValueProps =
+  | {
+      value: Date | null | undefined
+      onChange: (date: Date | undefined) => void
+      defaultValue?: never
+    }
+  | {
+      value?: never
+      defaultValue?: Date | null
+      onChange?: (date: Date | undefined) => void
+    }
+
+type DateTimePickerOpenProps =
+  | {
+      open: boolean | undefined
+      onOpenChange: (open: boolean) => void
+      defaultOpen?: never
+    }
+  | {
+      open?: never
+      defaultOpen?: boolean
+      onOpenChange?: (open: boolean) => void
+    }
+
+type DateTimePickerBaseProps = {
+  granularity?: DateTimeGranularity
+  format?: string
+  placeholder?: React.ReactNode
+  disabled?: boolean
+  className?: string
+  triggerClassName?: string
+  popoverClassName?: string
+  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange'>
+  labels?: DateTimePickerLabels
+}
+
+export type DateTimePickerProps = DateTimePickerBaseProps & DateTimePickerValueProps & DateTimePickerOpenProps
+
+const defaultLabels = {
+  hour: 'Hour',
+  minute: 'Minute',
+  second: 'Second'
+} satisfies Required<DateTimePickerLabels>
+
+const defaultFormatByGranularity: Record<DateTimeGranularity, string> = {
+  day: 'yyyy-MM-dd',
+  hour: 'yyyy-MM-dd HH',
+  minute: 'yyyy-MM-dd HH:mm',
+  second: 'yyyy-MM-dd HH:mm:ss'
+}
+
+function DateTimePicker({
+  value,
+  defaultValue,
+  onChange,
+  open,
+  defaultOpen,
+  onOpenChange,
+  granularity = 'day',
+  format,
+  placeholder = 'Pick a date',
+  disabled,
+  className,
+  triggerClassName,
+  popoverClassName,
+  calendarProps,
+  labels
+}: DateTimePickerProps) {
+  const isValueControlled = value !== undefined
+  const [internalValue, setInternalValue] = React.useState<Date | undefined>(() => normalizeDate(defaultValue))
+  const selectedDate = isValueControlled ? normalizeDate(value) : internalValue
+  const [month, setMonth] = React.useState<Date>(() => {
+    const initialDate = normalizeDate(value) ?? normalizeDate(defaultValue) ?? new Date()
+    return getMonthDate(initialDate)
+  })
+
+  const isOpenControlled = open !== undefined
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)
+  const pickerOpen = isOpenControlled ? open : internalOpen
+  const mergedLabels = { ...defaultLabels, ...labels }
+  const selectedYear = selectedDate?.getFullYear()
+  const selectedMonth = selectedDate?.getMonth()
+
+  React.useEffect(() => {
+    if (selectedYear === undefined || selectedMonth === undefined) return
+    setMonth(new Date(selectedYear, selectedMonth))
+  }, [selectedMonth, selectedYear])
+
+  const setPickerOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isOpenControlled) setInternalOpen(nextOpen)
+      onOpenChange?.(nextOpen)
+    },
+    [isOpenControlled, onOpenChange]
+  )
+
+  const commitDate = React.useCallback(
+    (nextDate: Date | undefined) => {
+      if (!isValueControlled) setInternalValue(nextDate)
+      onChange?.(nextDate)
+    },
+    [isValueControlled, onChange]
+  )
+
+  const handleSelectDate = React.useCallback(
+    (date: Date | undefined) => {
+      if (!date) {
+        commitDate(undefined)
+        return
+      }
+
+      const nextDate = mergeDatePart(date, selectedDate)
+      setMonth(getMonthDate(nextDate))
+      commitDate(nextDate)
+      if (granularity === 'day') setPickerOpen(false)
+    },
+    [commitDate, granularity, selectedDate, setPickerOpen]
+  )
+
+  const handleTimePartChange = React.useCallback(
+    (part: 'hours' | 'minutes' | 'seconds', rawValue: string) => {
+      const nextDate = selectedDate ? new Date(selectedDate) : new Date()
+      const max = part === 'hours' ? 23 : 59
+      const nextValue = clampTimeValue(rawValue, max)
+
+      if (part === 'hours') nextDate.setHours(nextValue)
+      if (part === 'minutes') nextDate.setMinutes(nextValue)
+      if (part === 'seconds') nextDate.setSeconds(nextValue)
+
+      commitDate(nextDate)
+    },
+    [commitDate, selectedDate]
+  )
+
+  const formattedValue = selectedDate
+    ? safeFormatDate(selectedDate, format ?? defaultFormatByGranularity[granularity])
+    : null
+
+  return (
+    <Popover open={pickerOpen} onOpenChange={setPickerOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          disabled={disabled}
+          data-empty={!formattedValue}
+          className={cn(
+            'h-9 w-[240px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+            triggerClassName
+          )}>
+          <CalendarIcon className="size-4" />
+          <span className="truncate">{formattedValue ?? placeholder}</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={cn('w-auto p-0', popoverClassName)}>
+        <div className={cn('flex flex-col', className)}>
+          <Calendar
+            {...calendarProps}
+            mode="single"
+            selected={selectedDate}
+            onSelect={handleSelectDate}
+            month={month}
+            onMonthChange={setMonth}
+            disabled={disabled || calendarProps?.disabled}
+            captionLayout={calendarProps?.captionLayout ?? 'dropdown'}
+            hideNavigation={calendarProps?.hideNavigation ?? true}
+            startMonth={calendarProps?.startMonth ?? new Date(1900, 0)}
+            endMonth={calendarProps?.endMonth ?? new Date(2100, 11)}
+          />
+          {granularity !== 'day' && (
+            <div className="grid grid-cols-3 gap-2 border-border border-t p-3">
+              <TimeInput
+                label={mergedLabels.hour}
+                value={selectedDate?.getHours() ?? 0}
+                max={23}
+                disabled={disabled}
+                onChange={(nextValue) => handleTimePartChange('hours', nextValue)}
+              />
+              {(granularity === 'minute' || granularity === 'second') && (
+                <TimeInput
+                  label={mergedLabels.minute}
+                  value={selectedDate?.getMinutes() ?? 0}
+                  max={59}
+                  disabled={disabled}
+                  onChange={(nextValue) => handleTimePartChange('minutes', nextValue)}
+                />
+              )}
+              {granularity === 'second' && (
+                <TimeInput
+                  label={mergedLabels.second}
+                  value={selectedDate?.getSeconds() ?? 0}
+                  max={59}
+                  disabled={disabled}
+                  onChange={(nextValue) => handleTimePartChange('seconds', nextValue)}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function TimeInput({
+  label,
+  value,
+  max,
+  disabled,
+  onChange
+}: {
+  label: string
+  value: number
+  max: number
+  disabled?: boolean
+  onChange: (value: string) => void
+}) {
+  return (
+    <label className="grid gap-1">
+      <span className="sr-only">{label}</span>
+      <Input
+        aria-label={label}
+        type="number"
+        inputMode="numeric"
+        min={0}
+        max={max}
+        value={padTimeValue(value)}
+        disabled={disabled}
+        onChange={(event) => onChange(event.target.value)}
+        className="h-8 px-2 text-center font-mono text-sm"
+      />
+    </label>
+  )
+}
+
+function normalizeDate(date: Date | null | undefined) {
+  return date instanceof Date && !Number.isNaN(date.getTime()) ? date : undefined
+}
+
+function getMonthDate(date: Date) {
+  return new Date(date.getFullYear(), date.getMonth())
+}
+
+function mergeDatePart(date: Date, current: Date | undefined) {
+  const nextDate = new Date(date)
+
+  if (current) {
+    nextDate.setHours(current.getHours(), current.getMinutes(), current.getSeconds(), current.getMilliseconds())
+  }
+
+  return nextDate
+}
+
+function clampTimeValue(value: string, max: number) {
+  const parsed = Number.parseInt(value, 10)
+  if (Number.isNaN(parsed)) return 0
+  return Math.min(Math.max(parsed, 0), max)
+}
+
+function padTimeValue(value: number) {
+  return String(value).padStart(2, '0')
+}
+
+function safeFormatDate(date: Date, format: string) {
+  try {
+    return formatDate(date, format)
+  } catch {
+    return date.toLocaleString()
+  }
+}
+
+export { DateTimePicker }
diff --git a/packages/ui/src/components/composites/EditableNumber/__tests__/EditableNumber.test.tsx b/packages/ui/src/components/composites/EditableNumber/__tests__/EditableNumber.test.tsx
new file mode 100644
index 0000000000..6c585296da
--- /dev/null
+++ b/packages/ui/src/components/composites/EditableNumber/__tests__/EditableNumber.test.tsx
@@ -0,0 +1,52 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import EditableNumber from '../index'
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('EditableNumber', () => {
+  it('clamps and rounds committed values', () => {
+    const onChange = vi.fn()
+
+    render(<EditableNumber value={1} min={0} max={10} precision={1} onChange={onChange} />)
+
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '20.24' } })
+
+    expect(onChange).toHaveBeenCalledWith(10)
+  })
+
+  it('defers changes until blur when changeOnBlur is enabled', () => {
+    const onChange = vi.fn()
+
+    render(<EditableNumber value={1} precision={1} changeOnBlur onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton')
+    fireEvent.change(input, { target: { value: '2.26' } })
+
+    expect(onChange).not.toHaveBeenCalled()
+
+    fireEvent.blur(input)
+
+    expect(onChange).toHaveBeenCalledWith(2.3)
+  })
+
+  it('reverts the draft value with Escape', () => {
+    const onChange = vi.fn()
+
+    render(<EditableNumber value={4} changeOnBlur onChange={onChange} />)
+
+    const input = screen.getByRole('spinbutton')
+    fireEvent.change(input, { target: { value: '9' } })
+    fireEvent.keyDown(input, { key: 'Escape' })
+
+    expect(input).toHaveValue(4)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/ui/src/components/composites/EditableNumber/index.tsx b/packages/ui/src/components/composites/EditableNumber/index.tsx
index 0d98fa7f26..d0aa409726 100644
--- a/packages/ui/src/components/composites/EditableNumber/index.tsx
+++ b/packages/ui/src/components/composites/EditableNumber/index.tsx
@@ -91,6 +91,7 @@ const EditableNumber: React.FC<EditableNumberProps> = ({
 }) => {
   const [isEditing, setIsEditing] = React.useState(false)
   const [inputValue, setInputValue] = React.useState(() => toInputValue(value, precision))
+  const inputRef = React.useRef<HTMLInputElement>(null)
 
   React.useEffect(() => {
     if (!isEditing) {
@@ -114,6 +115,12 @@ const EditableNumber: React.FC<EditableNumberProps> = ({
     setIsEditing(true)
   }
 
+  React.useEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+    }
+  }, [isEditing])
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const nextValue = event.target.value
     setInputValue(nextValue)
@@ -145,10 +152,29 @@ const EditableNumber: React.FC<EditableNumberProps> = ({
   }
 
   const displayValue = formatter ? formatter(value ?? null) : (value ?? placeholder)
+  const shouldRenderDisplayValue = Boolean(formatter || prefix || suffix)
+  const inputAlignClass = align === 'start' ? 'text-left' : align === 'center' ? 'text-center' : 'text-right'
+  const inputClassName = cn(
+    'border-input bg-background w-full rounded-md border px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+    sizeClasses[size],
+    inputAlignClass,
+    shouldRenderDisplayValue && !isEditing && 'hidden',
+    className
+  )
+
+  const handleDisplayKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      handleFocus()
+    }
+  }
 
   return (
     <div className="relative inline-block">
       <input
+        ref={inputRef}
         type="number"
         value={inputValue}
         min={min}
@@ -159,34 +185,30 @@ const EditableNumber: React.FC<EditableNumberProps> = ({
         onBlur={handleBlur}
         onFocus={handleFocus}
         onKeyDown={handleKeyDown}
-        className={cn(
-          'border-input bg-background w-full rounded-md border px-3 text-sm shadow-xs outline-none transition-[color,box-shadow] [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-          sizeClasses[size],
-          align === 'start' ? 'text-left' : align === 'center' ? 'text-center' : 'text-right',
-          className
-        )}
-        style={{
-          ...style,
-          opacity: isEditing ? 1 : 0
-        }}
+        className={inputClassName}
+        style={style}
       />
-      <div
-        className={cn(
-          'pointer-events-none absolute inset-0 flex items-center px-3',
-          !isEditing ? 'flex' : 'hidden',
-          alignClasses[align],
-          sizeClasses[size],
-          className
-        )}
-        style={style}>
-        <span className="truncate">
-          {prefix}
-          {displayValue}
-          {suffix}
-        </span>
-      </div>
+      {shouldRenderDisplayValue && !isEditing && (
+        <div
+          className={cn(
+            'border-input bg-background flex w-full cursor-text items-center rounded-md border px-3 text-sm shadow-xs outline-none transition-[color,box-shadow]',
+            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+            disabled && 'pointer-events-none cursor-not-allowed opacity-50',
+            alignClasses[align],
+            sizeClasses[size],
+            className
+          )}
+          onClick={handleFocus}
+          onKeyDown={handleDisplayKeyDown}
+          tabIndex={disabled ? -1 : 0}
+          style={style}>
+          <span className="truncate">
+            {prefix}
+            {displayValue}
+            {suffix}
+          </span>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/packages/ui/src/components/composites/Form/__tests__/Form.test.tsx b/packages/ui/src/components/composites/Form/__tests__/Form.test.tsx
new file mode 100644
index 0000000000..ddc83f70a2
--- /dev/null
+++ b/packages/ui/src/components/composites/Form/__tests__/Form.test.tsx
@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../index'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Form', () => {
+  it('wires aria-invalid and message ids when a field has an error', async () => {
+    function FormFixture() {
+      const form = useForm({ defaultValues: { name: '' } })
+
+      useEffect(() => {
+        form.setError('name', { message: 'Name is required' })
+      }, [form])
+
+      return (
+        <Form {...form}>
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <input {...field} />
+                </FormControl>
+                <FormDescription>Visible to teammates.</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </Form>
+      )
+    }
+
+    render(<FormFixture />)
+
+    const input = await screen.findByLabelText('Name')
+    const description = screen.getByText('Visible to teammates.')
+    const message = screen.getByText('Name is required')
+
+    expect(input).toHaveAttribute('aria-invalid', 'true')
+    expect(input.getAttribute('aria-describedby')).toContain(description.id)
+    expect(input.getAttribute('aria-describedby')).toContain(message.id)
+  })
+})
diff --git a/packages/ui/src/components/composites/Form/index.tsx b/packages/ui/src/components/composites/Form/index.tsx
new file mode 100644
index 0000000000..e29b2602b4
--- /dev/null
+++ b/packages/ui/src/components/composites/Form/index.tsx
@@ -0,0 +1,141 @@
+'use client'
+
+import { Label } from '@cherrystudio/ui/components/primitives/label'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import type * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+import {
+  Controller,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from 'react-hook-form'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TTransformedValues = TFieldValues
+>({ ...props }: ControllerProps<TFieldValues, TName, TTransformedValues>) {
+  return (
+    <FormFieldContext value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.use(FormFieldContext)
+  const itemContext = React.use(FormItemContext)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  if (!itemContext) {
+    throw new Error('useFormField should be used within <FormItem>')
+  }
+
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext value={{ id }}>
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
+    </FormItemContext>
+  )
+}
+
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? '') : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
+      {body}
+    </p>
+  )
+}
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField }
diff --git a/packages/ui/src/components/composites/IconTooltips/IconTooltip.tsx b/packages/ui/src/components/composites/IconTooltips/IconTooltip.tsx
index 6d96e51609..32db55545e 100644
--- a/packages/ui/src/components/composites/IconTooltips/IconTooltip.tsx
+++ b/packages/ui/src/components/composites/IconTooltips/IconTooltip.tsx
@@ -1,6 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui/components/primitives/tooltip'
 import type { LucideIcon } from 'lucide-react'
 
-import { Tooltip } from '../../primitives/tooltip'
 import type { IconTooltipProps } from './types'
 
 export interface BaseIconTooltipProps extends IconTooltipProps {
diff --git a/packages/ui/src/components/composites/IconTooltips/types.ts b/packages/ui/src/components/composites/IconTooltips/types.ts
index 7a8a722b26..e774dd3b68 100644
--- a/packages/ui/src/components/composites/IconTooltips/types.ts
+++ b/packages/ui/src/components/composites/IconTooltips/types.ts
@@ -1,7 +1,6 @@
+import type { TooltipProps } from '@cherrystudio/ui/components/primitives/tooltip'
 import type { LucideProps } from 'lucide-react'
 
-import type { TooltipProps } from '../../primitives/tooltip'
-
 export interface IconTooltipProps extends TooltipProps {
   iconProps?: LucideProps
 }
diff --git a/packages/ui/src/components/composites/ImageToolButton/index.tsx b/packages/ui/src/components/composites/ImageToolButton/index.tsx
index 42f7c05354..bd808c3fc7 100644
--- a/packages/ui/src/components/composites/ImageToolButton/index.tsx
+++ b/packages/ui/src/components/composites/ImageToolButton/index.tsx
@@ -1,9 +1,8 @@
 // Original path: src/renderer/src/components/Preview/ImageToolButton.tsx
+import { Button } from '@cherrystudio/ui/components/primitives/button'
+import { Tooltip } from '@cherrystudio/ui/components/primitives/tooltip'
 import { memo } from 'react'
 
-import { Button } from '../../primitives/button'
-import { Tooltip } from '../../primitives/tooltip'
-
 interface ImageToolButtonProps {
   tooltip: string
   icon: React.ReactNode
diff --git a/packages/ui/src/components/composites/Input/input.tsx b/packages/ui/src/components/composites/Input/input.tsx
index 1d792f2039..8f062cc0bd 100644
--- a/packages/ui/src/components/composites/Input/input.tsx
+++ b/packages/ui/src/components/composites/Input/input.tsx
@@ -1,13 +1,10 @@
-import { cn } from '@cherrystudio/ui/lib/utils'
-import { toUndefinedIfNull } from '@cherrystudio/ui/utils/index'
-import type { VariantProps } from 'class-variance-authority'
-import { cva } from 'class-variance-authority'
-import { Edit2Icon, EyeIcon, EyeOffIcon } from 'lucide-react'
-import type { ReactNode } from 'react'
-import { useCallback, useMemo, useState } from 'react'
-
-import type { InputProps } from '../../primitives/input'
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '../../primitives/input-group'
+import type { InputProps } from '@cherrystudio/ui/components/primitives/input'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@cherrystudio/ui/components/primitives/input-group'
 import {
   Select,
   SelectContent,
@@ -16,12 +13,19 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue
-} from '../../primitives/select'
+} from '@cherrystudio/ui/components/primitives/select'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { toUndefinedIfNull } from '@cherrystudio/ui/utils/index'
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import { Edit2Icon, EyeIcon, EyeOffIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 
 const inputGroupVariants = cva(
   [
     'h-auto',
-    'rounded-xs',
+    'rounded-md',
     'has-[[data-slot=input-group-control]:focus-visible]:ring-ring/40',
     'has-[[data-slot=input-group-control]:focus-visible]:border-[#3CD45A]'
   ],
diff --git a/packages/ui/src/components/composites/MenuList/MenuItem.tsx b/packages/ui/src/components/composites/MenuList/MenuItem.tsx
index 7248ee34e7..8514b3277b 100644
--- a/packages/ui/src/components/composites/MenuList/MenuItem.tsx
+++ b/packages/ui/src/components/composites/MenuList/MenuItem.tsx
@@ -24,7 +24,7 @@ const menuItemVariants = cva(
           'text-foreground-secondary',
           'hover:bg-accent hover:text-foreground',
           'data-[active=true]:bg-accent data-[active=true]:text-foreground',
-          'data-[active=true]:border-border'
+          'data-[active=true]:border-transparent'
         ),
         ghost: cn(
           'text-foreground-secondary',
diff --git a/packages/ui/src/components/composites/PageSidePanel/index.tsx b/packages/ui/src/components/composites/PageSidePanel/index.tsx
index 54b09cc306..1370d9f8e8 100644
--- a/packages/ui/src/components/composites/PageSidePanel/index.tsx
+++ b/packages/ui/src/components/composites/PageSidePanel/index.tsx
@@ -93,7 +93,7 @@ function PageSidePanel({
             transition={{ type: 'spring', damping: 30, stiffness: 350 }}
             data-slot="page-side-panel"
             className={cn(
-              'absolute top-2 bottom-2 z-50 flex w-100 flex-col overflow-hidden rounded-xs border border-border/30 bg-card text-card-foreground shadow-2xl outline-none',
+              'absolute top-2 bottom-2 z-50 flex w-100 flex-col overflow-hidden rounded-md border border-border/30 bg-card text-card-foreground shadow-2xl outline-none',
               side === 'right' ? 'right-2' : 'left-2',
               contentClassName
             )}>
diff --git a/packages/ui/src/components/composites/SelectDropdown/index.tsx b/packages/ui/src/components/composites/SelectDropdown/index.tsx
index b67e4a8ee0..2d04bb51b0 100644
--- a/packages/ui/src/components/composites/SelectDropdown/index.tsx
+++ b/packages/ui/src/components/composites/SelectDropdown/index.tsx
@@ -91,7 +91,7 @@ export function SelectDropdown<T extends { id: string }>({
       return (
         <div
           className={cn(
-            'flex items-center gap-1 rounded-3xs pr-1 transition-colors',
+            'flex items-center gap-1 rounded-md pr-1 transition-colors',
             isSelected && 'bg-primary/10 text-primary'
           )}>
           <button
@@ -100,14 +100,14 @@ export function SelectDropdown<T extends { id: string }>({
               onSelect(item.id)
               setOpen(false)
             }}
-            className="flex min-w-0 flex-1 items-center gap-2 rounded-3xs px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent/60">
+            className="flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent/60">
             {renderItem(item, isSelected)}
           </button>
           <button
             type="button"
             aria-label={removeLabel}
             onClick={() => onRemove(item.id)}
-            className="shrink-0 rounded-3xs p-1 text-muted-foreground/30 transition-colors hover:bg-accent/60 hover:text-foreground">
+            className="shrink-0 rounded-md p-1 text-muted-foreground/30 transition-colors hover:bg-accent/60 hover:text-foreground">
             <X size={10} />
           </button>
         </div>
@@ -121,7 +121,7 @@ export function SelectDropdown<T extends { id: string }>({
           setOpen(false)
         }}
         className={cn(
-          'w-full rounded-3xs px-2.5 py-1.5 text-left text-xs transition-colors',
+          'w-full rounded-md px-2.5 py-1.5 text-left text-xs transition-colors',
           isSelected ? 'bg-primary/10 text-primary' : 'text-foreground hover:bg-accent/60'
         )}>
         {renderItem(item, isSelected)}
@@ -135,7 +135,7 @@ export function SelectDropdown<T extends { id: string }>({
         <button
           type="button"
           className={cn(
-            'flex w-full items-center justify-between rounded-3xs border bg-transparent px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/30',
+            'flex w-full items-center justify-between rounded-md border bg-transparent px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/30',
             open ? 'border-primary/40 ring-1 ring-primary/15' : 'border-border/40'
           )}>
           <div className="flex min-w-0 flex-1 items-center gap-2 text-left">
@@ -155,7 +155,7 @@ export function SelectDropdown<T extends { id: string }>({
       <PopoverContent
         align="start"
         sideOffset={4}
-        className="w-(--radix-popover-trigger-width) rounded-3xs border border-border/40 bg-popover p-1 shadow-lg">
+        className="w-(--radix-popover-trigger-width) rounded-md border border-border/40 bg-popover p-1 shadow-lg">
         {items.length === 0 && emptyText ? (
           <div className="px-2.5 py-3 text-muted-foreground/45 text-xs">{emptyText}</div>
         ) : virtualize ? (
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 90c3489dd8..7ab3c62df6 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -23,6 +23,19 @@ export {
 
 // Composite Components
 export { ConfirmDialog, type ConfirmDialogProps } from './composites/ConfirmDialog'
+export {
+  type ColumnDef,
+  DataTable,
+  type DataTableColumnMeta,
+  type DataTableProps,
+  type DataTableSelection
+} from './composites/DataTable'
+export {
+  type DateTimeGranularity,
+  DateTimePicker,
+  type DateTimePickerLabels,
+  type DateTimePickerProps
+} from './composites/DateTimePicker'
 export { default as Ellipsis } from './composites/Ellipsis'
 export { default as EmojiAvatar } from './composites/EmojiAvatar'
 export { EmptyState, type EmptyStatePreset, type EmptyStateProps } from './composites/EmptyState'
@@ -61,6 +74,16 @@ export { DraggableList, useDraggableReorder } from './composites/DraggableList'
 // EditableNumber
 export type { EditableNumberProps } from './composites/EditableNumber'
 export { default as EditableNumber } from './composites/EditableNumber'
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+} from './composites/Form'
 // Tooltip variants
 export { HelpTooltip, type IconTooltipProps, InfoTooltip, WarnTooltip } from './composites/IconTooltips'
 // ImageToolButton
@@ -79,27 +102,33 @@ export { Sortable } from './composites/Sortable'
 
 /* Shadcn Primitive Components */
 export * from './primitives/accordion'
+export * from './primitives/alert'
 export * from './primitives/badge'
 export * from './primitives/breadcrumb'
 export * from './primitives/button'
 export * from './primitives/button-group'
+export * from './primitives/calendar'
 export * from './primitives/checkbox'
 export * from './primitives/combobox'
 export * from './primitives/command'
+export * from './primitives/context-menu'
 export * from './primitives/dialog'
 export * from './primitives/drawer'
 export * from './primitives/field'
 export * from './primitives/input'
 export * from './primitives/input-group'
+export * from './primitives/item'
 export * from './primitives/kbd'
 export * from './primitives/label'
 export * from './primitives/pagination'
 export * from './primitives/popover'
-export * from './primitives/radioGroup'
+export * from './primitives/radio-group'
+export * from './primitives/segmented-control'
 export * from './primitives/select'
 export * from './primitives/separator'
 export * from './primitives/shadcn-io/dropzone'
 export * from './primitives/skeleton'
 export * from './primitives/slider'
+export * from './primitives/table'
 export * from './primitives/tabs'
 export * as Textarea from './primitives/textarea'
diff --git a/packages/ui/src/components/primitives/__tests__/alert.test.tsx b/packages/ui/src/components/primitives/__tests__/alert.test.tsx
new file mode 100644
index 0000000000..f84b17a70c
--- /dev/null
+++ b/packages/ui/src/components/primitives/__tests__/alert.test.tsx
@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import { Info } from 'lucide-react'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { Alert } from '../alert'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Alert', () => {
+  it('renders message and description', () => {
+    render(<Alert type="error" message="Failed" description="Something went wrong" />)
+
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByText('Failed')).toBeInTheDocument()
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument()
+  })
+
+  it('renders the status role for non-error alerts', () => {
+    render(<Alert type="warning" message="Heads up" />)
+
+    expect(screen.getByRole('status')).toBeInTheDocument()
+  })
+
+  it('renders optional icon and action', () => {
+    render(<Alert type="info" message="Info" showIcon action={<button type="button">Open</button>} />)
+
+    expect(screen.getByText('Open')).toBeInTheDocument()
+    expect(document.querySelector('[data-slot="alert-icon"] svg')).toBeInTheDocument()
+  })
+
+  it.each(['info', 'success', 'warning', 'error'] as const)(
+    'marks the default %s icon with its semantic type',
+    (type) => {
+      render(<Alert type={type} message="Message" showIcon />)
+
+      expect(screen.getByRole(type === 'error' ? 'alert' : 'status')).toHaveAttribute('data-type', type)
+      const icon = document.querySelector('[data-slot="alert-icon"] svg')
+      expect(icon).toHaveClass('lucide-custom')
+      expect(icon?.closest('[data-slot="alert-icon"]')).toHaveAttribute('data-type', type)
+    }
+  )
+
+  it('applies semantic color to custom lucide icons', () => {
+    render(<Alert type="warning" message="Custom icon" showIcon icon={<Info className="custom-class" />} />)
+
+    const iconSlot = document.querySelector('[data-slot="alert-icon"]')
+    const icon = document.querySelector('[data-slot="alert-icon"] svg')
+    expect(iconSlot).toHaveAttribute('data-type', 'warning')
+    expect(icon).toHaveClass('custom-class')
+  })
+})
diff --git a/packages/ui/src/components/primitives/__tests__/combobox.test.tsx b/packages/ui/src/components/primitives/__tests__/combobox.test.tsx
new file mode 100644
index 0000000000..60d04d9648
--- /dev/null
+++ b/packages/ui/src/components/primitives/__tests__/combobox.test.tsx
@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+import { Combobox, type ComboboxOption } from '../combobox'
+
+const options: ComboboxOption[] = [
+  { value: 'alpha', label: 'Alpha' },
+  { value: 'beta', label: 'Beta' },
+  { value: 'gamma', label: 'Gamma' }
+]
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any
+  Element.prototype.scrollIntoView = vi.fn()
+})
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('Combobox', () => {
+  it('maps the selected value to the trigger placeholder when opened', async () => {
+    render(
+      <Combobox
+        options={options}
+        value="beta"
+        searchPlacement="trigger"
+        placeholder="Pick one"
+        emptyText="No results"
+      />
+    )
+
+    const input = screen.getByRole<HTMLInputElement>('combobox')
+    expect(input).toHaveValue('Beta')
+
+    fireEvent.click(input)
+
+    await waitFor(() => {
+      expect(input).toHaveFocus()
+      expect(input).toHaveValue('')
+      expect(input).toHaveAttribute('placeholder', 'Beta')
+    })
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(screen.getByText('Beta')).toBeInTheDocument()
+    expect(screen.getByText('Gamma')).toBeInTheDocument()
+  })
+
+  it('filters options from the trigger input when searchPlacement is trigger', () => {
+    render(<Combobox options={options} searchPlacement="trigger" placeholder="Pick one" emptyText="No results" />)
+
+    const input = screen.getByRole('combobox')
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'gam' } })
+
+    expect(screen.getByText('Gamma')).toBeInTheDocument()
+    expect(screen.queryByText('Alpha')).not.toBeInTheDocument()
+    expect(screen.queryByText('Beta')).not.toBeInTheDocument()
+  })
+
+  it('selects the first filtered option with Enter in trigger search mode', () => {
+    const onChange = vi.fn()
+    render(
+      <Combobox
+        options={options}
+        searchPlacement="trigger"
+        placeholder="Pick one"
+        emptyText="No results"
+        onChange={onChange}
+      />
+    )
+
+    const input = screen.getByRole('combobox')
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'bet' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(onChange).toHaveBeenCalledWith('beta')
+  })
+
+  it('keeps trigger search open when the trigger input is clicked while open', async () => {
+    render(<Combobox options={options} searchPlacement="trigger" placeholder="Pick one" emptyText="No results" />)
+
+    const input = screen.getByRole('combobox')
+    fireEvent.click(input)
+
+    await waitFor(() => {
+      expect(screen.getByText('Alpha')).toBeInTheDocument()
+    })
+
+    fireEvent.click(input)
+
+    expect(screen.getByText('Alpha')).toBeInTheDocument()
+    expect(input).toHaveAttribute('aria-expanded', 'true')
+  })
+
+  it('does not clear a single value when the selected option is selected again', () => {
+    const onChange = vi.fn()
+    render(
+      <Combobox
+        options={options}
+        value="beta"
+        searchPlacement="trigger"
+        placeholder="Pick one"
+        emptyText="No results"
+        onChange={onChange}
+      />
+    )
+
+    const input = screen.getByRole('combobox')
+    fireEvent.focus(input)
+    fireEvent.change(input, { target: { value: 'bet' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+
+    expect(onChange).not.toHaveBeenCalled()
+    expect(onChange).not.toHaveBeenCalledWith('')
+  })
+
+  it('applies filterOption in content search mode', async () => {
+    render(
+      <Combobox
+        options={options.map((option) => ({
+          ...option,
+          description: option.value === 'gamma' ? 'Third item' : 'Regular item'
+        }))}
+        placeholder="Pick one"
+        searchPlaceholder="Search descriptions"
+        emptyText="No results"
+        filterOption={(option, search) => option.description?.toLowerCase().includes(search.toLowerCase()) ?? false}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button'))
+    fireEvent.change(screen.getByPlaceholderText('Search descriptions'), { target: { value: 'third' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('Gamma')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Alpha')).not.toBeInTheDocument()
+    expect(screen.queryByText('Beta')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/ui/src/components/primitives/__tests__/segmented-control.test.tsx b/packages/ui/src/components/primitives/__tests__/segmented-control.test.tsx
new file mode 100644
index 0000000000..f697c00a5e
--- /dev/null
+++ b/packages/ui/src/components/primitives/__tests__/segmented-control.test.tsx
@@ -0,0 +1,43 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { SegmentedControl } from '../segmented-control'
+
+const options = [
+  { value: 'app', label: 'App' },
+  { value: 'window', label: 'Window' },
+  { value: 'disabled', label: 'Disabled', disabled: true }
+] as const
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('SegmentedControl', () => {
+  it('keeps controlled selection until the value prop changes', () => {
+    const onValueChange = vi.fn()
+
+    render(<SegmentedControl value="app" options={options} onValueChange={onValueChange} />)
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Window' }))
+
+    expect(onValueChange).toHaveBeenCalledWith('window')
+    expect(screen.getByRole('radio', { name: 'App' })).toHaveAttribute('aria-checked', 'true')
+    expect(screen.getByRole('radio', { name: 'Window' })).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('does not emit changes for disabled options', () => {
+    const onValueChange = vi.fn()
+
+    render(<SegmentedControl defaultValue="app" options={options} onValueChange={onValueChange} />)
+
+    fireEvent.click(screen.getByRole('radio', { name: 'Disabled' }))
+
+    expect(onValueChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('radio', { name: 'App' })).toHaveAttribute('aria-checked', 'true')
+  })
+})
diff --git a/packages/ui/src/components/primitives/__tests__/switch.test.tsx b/packages/ui/src/components/primitives/__tests__/switch.test.tsx
new file mode 100644
index 0000000000..f51056f1e3
--- /dev/null
+++ b/packages/ui/src/components/primitives/__tests__/switch.test.tsx
@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { Switch } from '../switch'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('Switch', () => {
+  it('toggles aria-checked when clicked', async () => {
+    const user = userEvent.setup()
+    render(<Switch />)
+
+    const root = screen.getByRole('switch')
+
+    expect(root).toHaveAttribute('aria-checked', 'false')
+    await user.click(root)
+    expect(root).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('does not toggle when disabled', async () => {
+    const user = userEvent.setup()
+    render(<Switch disabled />)
+
+    const root = screen.getByRole('switch')
+
+    expect(root).toHaveAttribute('aria-checked', 'false')
+    await user.click(root)
+    expect(root).toHaveAttribute('aria-checked', 'false')
+  })
+})
diff --git a/packages/ui/src/components/primitives/alert.tsx b/packages/ui/src/components/primitives/alert.tsx
new file mode 100644
index 0000000000..b3b84a760d
--- /dev/null
+++ b/packages/ui/src/components/primitives/alert.tsx
@@ -0,0 +1,127 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { CheckCircle2, Info, TriangleAlert, XCircle } from 'lucide-react'
+import * as React from 'react'
+
+const alertVariants = cva(
+  cn(
+    'relative flex w-full items-start gap-3 rounded-md border px-3 py-2.5 text-sm leading-5 shadow-xs',
+    '[&_svg]:pointer-events-none [&_svg]:shrink-0'
+  ),
+  {
+    variants: {
+      type: {
+        info: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/30 dark:text-blue-300',
+        success: 'border-[var(--color-success-base)] bg-[var(--color-success-bg)] text-[var(--color-success-base)]',
+        warning: 'border-[var(--color-warning-base)] bg-[var(--color-warning-bg)] text-[var(--color-warning-base)]',
+        error: 'border-[var(--color-error-border)] bg-[var(--color-error-bg)] text-[var(--color-error-base)]'
+      }
+    },
+    defaultVariants: {
+      type: 'info'
+    }
+  }
+)
+
+const alertIconVariants = cva('', {
+  variants: {
+    type: {
+      info: 'text-blue-600 dark:text-blue-300',
+      success: 'text-[var(--color-success-base)]',
+      warning: 'text-[var(--color-warning-base)]',
+      error: 'text-[var(--color-error-base)]'
+    }
+  },
+  defaultVariants: {
+    type: 'info'
+  }
+})
+
+const alertIconContainerVariants = cva('mt-0.5 flex shrink-0 items-center', {
+  variants: {
+    type: {
+      info: 'text-blue-600 dark:text-blue-300 [&_.lucide:not(.lucide-custom)]:!text-blue-600 dark:[&_.lucide:not(.lucide-custom)]:!text-blue-300',
+      success: 'text-[var(--color-success-base)] [&_.lucide:not(.lucide-custom)]:!text-[var(--color-success-base)]',
+      warning: 'text-[var(--color-warning-base)] [&_.lucide:not(.lucide-custom)]:!text-[var(--color-warning-base)]',
+      error: 'text-[var(--color-error-base)] [&_.lucide:not(.lucide-custom)]:!text-[var(--color-error-base)]'
+    }
+  },
+  defaultVariants: {
+    type: 'info'
+  }
+})
+
+const alertIcons = {
+  info: Info,
+  success: CheckCircle2,
+  warning: TriangleAlert,
+  error: XCircle
+} satisfies Record<NonNullable<AlertProps['type']>, React.ComponentType<{ className?: string; size?: number }>>
+
+type AlertProps = Omit<React.ComponentProps<'div'>, 'title'> &
+  VariantProps<typeof alertVariants> & {
+    message?: React.ReactNode
+    description?: React.ReactNode
+    action?: React.ReactNode
+    icon?: React.ReactNode
+    showIcon?: boolean
+  }
+
+function Alert({
+  className,
+  type = 'info',
+  message,
+  description,
+  action,
+  icon,
+  showIcon = false,
+  children,
+  role,
+  ref,
+  ...props
+}: AlertProps) {
+  const Icon = alertIcons[type ?? 'info']
+  const alertRole = role ?? (type === 'error' ? 'alert' : 'status')
+
+  return (
+    <div
+      ref={ref}
+      role={alertRole}
+      data-slot="alert"
+      data-type={type}
+      className={cn(alertVariants({ type }), className)}
+      {...props}>
+      {showIcon && (
+        <span data-slot="alert-icon" data-type={type} className={alertIconContainerVariants({ type })}>
+          {icon ?? <Icon size={16} className={cn('lucide-custom', alertIconVariants({ type }))} />}
+        </span>
+      )}
+      <div data-slot="alert-content" className="min-w-0 flex-1">
+        {children ?? (
+          <>
+            {message && (
+              <div data-slot="alert-message" className="font-medium">
+                {message}
+              </div>
+            )}
+            {description && (
+              <div data-slot="alert-description" className="mt-1 text-xs leading-5 opacity-90">
+                {description}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+      {action && (
+        <div data-slot="alert-action" className="ml-2 flex shrink-0 items-center">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}
+
+Alert.displayName = 'Alert'
+
+export { Alert, alertVariants }
+export type { AlertProps }
diff --git a/packages/ui/src/components/primitives/button-group.tsx b/packages/ui/src/components/primitives/button-group.tsx
index 095de50d75..b9cad2ef8e 100644
--- a/packages/ui/src/components/primitives/button-group.tsx
+++ b/packages/ui/src/components/primitives/button-group.tsx
@@ -1,45 +1,41 @@
+import { Separator } from '@cherrystudio/ui/components/primitives/separator'
 import { cn } from '@cherrystudio/ui/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
 
-const buttonGroupVariants = cva('inline-flex', {
-  variants: {
-    orientation: {
-      horizontal: 'flex-row',
-      vertical: 'flex-col'
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 *:focus-visible:relative *:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 [&>[data-slot=button-group-item]>[data-slot=button][data-variant=default]]:bg-primary/10 [&>[data-slot=button-group-item]>[data-slot=button][data-variant=default]]:text-primary [&>[data-slot=button-group-item]>[data-slot=button][data-variant=default]]:shadow-[inset_0_0_0_1px_var(--color-primary)]/20 [&>[data-slot=button-group-item]>[data-slot=button][data-variant=default]]:hover:bg-primary/15 [&>[data-slot=button][data-variant=default]]:bg-primary/10 [&>[data-slot=button][data-variant=default]]:text-primary [&>[data-slot=button][data-variant=default]]:shadow-[inset_0_0_0_1px_var(--color-primary)]/20 [&>[data-slot=button][data-variant=default]]:hover:bg-primary/15",
+  {
+    variants: {
+      orientation: {
+        horizontal: '',
+        vertical: 'flex-col'
+      },
+      attached: {
+        true: '',
+        false: 'gap-2'
+      }
     },
-    attached: {
-      true: '',
-      false: 'gap-2'
-    }
-  },
-  compoundVariants: [
-    {
+    compoundVariants: [
+      {
+        orientation: 'horizontal',
+        attached: true,
+        className:
+          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot=button-group-item]:not(:first-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:rounded-l-none [&>[data-slot=button-group-item]:not(:first-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:border-l-0 [&>[data-slot=button-group-item]:not(:last-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:rounded-r-none'
+      },
+      {
+        orientation: 'vertical',
+        attached: true,
+        className:
+          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot=button-group-item]:not(:first-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:rounded-t-none [&>[data-slot=button-group-item]:not(:first-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:border-t-0 [&>[data-slot=button-group-item]:not(:last-child)>:is([data-slot=button],[data-slot=input],[data-slot=select-trigger])]:rounded-b-none'
+      }
+    ],
+    defaultVariants: {
       orientation: 'horizontal',
-      attached: true,
-      className: cn(
-        'items-center',
-        '[&>[data-slot=button]:not(:first-child)]:-ml-px',
-        '[&>[data-slot=button]:not(:first-child)]:rounded-l-none',
-        '[&>[data-slot=button]:not(:last-child)]:rounded-r-none'
-      )
-    },
-    {
-      orientation: 'vertical',
-      attached: true,
-      className: cn(
-        'items-stretch',
-        '[&>[data-slot=button]:not(:first-child)]:-mt-px',
-        '[&>[data-slot=button]:not(:first-child)]:rounded-t-none',
-        '[&>[data-slot=button]:not(:last-child)]:rounded-b-none'
-      )
+      attached: true
     }
-  ],
-  defaultVariants: {
-    orientation: 'horizontal',
-    attached: true
   }
-})
+)
 
 function ButtonGroup({
   className,
@@ -49,12 +45,53 @@ function ButtonGroup({
 }: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
   return (
     <div
-      data-slot="button-group"
       role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      data-attached={attached}
       className={cn(buttonGroupVariants({ orientation, attached }), className)}
       {...props}
     />
   )
 }
 
-export { ButtonGroup, buttonGroupVariants }
+function ButtonGroupItem({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="button-group-item" className={cn('relative flex min-w-0', className)} {...props} />
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      className={cn(
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn('relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto', className)}
+      {...props}
+    />
+  )
+}
+
+export { ButtonGroup, ButtonGroupItem, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }
diff --git a/packages/ui/src/components/primitives/button.tsx b/packages/ui/src/components/primitives/button.tsx
index 972d4a4009..604c18e7d3 100644
--- a/packages/ui/src/components/primitives/button.tsx
+++ b/packages/ui/src/components/primitives/button.tsx
@@ -7,28 +7,29 @@ import * as React from 'react'
 const buttonVariants = cva(
   cn(
     'inline-flex items-center justify-center gap-2 whitespace-nowrap',
-    'rounded-xs font-medium transition-all',
+    'rounded-md font-medium transition-all',
     'disabled:pointer-events-none disabled:opacity-40',
-    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 [&_.lucide:not(.lucide-custom)]:text-current outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
     'aria-loading:cursor-progress aria-loading:opacity-40',
     'shadow-xs'
   ),
   {
     variants: {
       variant: {
-        default: 'bg-primary hover:bg-primary-hover text-white',
+        default:
+          'bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200',
         destructive: 'bg-destructive text-white hover:bg-destructive-hover focus-visible:ring-destructive/20',
-        outline: cn('border border-primary/40 bg-primary/10 text-primary', 'hover:bg-primary/5'),
+        outline: 'border border-border bg-transparent text-foreground hover:bg-accent',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:text-primary-hover text-primary',
-        link: 'text-primary underline-offset-4 hover:underline hover:text-primary-hover'
+        ghost: 'text-neutral-900 shadow-none hover:bg-accent hover:text-accent-foreground dark:text-neutral-100',
+        link: 'text-neutral-900 underline-offset-4 hover:text-neutral-700 hover:underline dark:text-neutral-100 dark:hover:text-neutral-300'
       },
       size: {
-        default: 'min-h-8 px-3 text-[13px]',
+        default: 'min-h-7.5 gap-1.5 px-2.5 text-[13px]',
         sm: 'min-h-7 rounded-md gap-1.5 px-2.5 text-xs',
         lg: 'min-h-9 rounded-md px-4 text-sm',
         icon: 'size-9',
-        'icon-sm': 'size-8',
+        'icon-sm': 'size-7',
         'icon-lg': 'size-10'
       }
     },
@@ -61,7 +62,8 @@ function Button({
 
   // Determine spinner size based on button size
   const getSpinnerSize = () => {
-    if (size === 'sm' || size === 'icon-sm') return 14
+    if (size === 'icon-sm') return 13
+    if (size === 'sm') return 14
     if (size === 'lg' || size === 'icon-lg') return 18
     return 16
   }
@@ -75,6 +77,7 @@ function Button({
   return (
     <Comp
       data-slot="button"
+      data-variant={variant ?? 'default'}
       className={cn(buttonVariants({ variant, size, className }))}
       disabled={disabled || loading}
       aria-loading={loading}
diff --git a/packages/ui/src/components/primitives/calendar.tsx b/packages/ui/src/components/primitives/calendar.tsx
new file mode 100644
index 0000000000..c95df3aca8
--- /dev/null
+++ b/packages/ui/src/components/primitives/calendar.tsx
@@ -0,0 +1,149 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react'
+import * as React from 'react'
+import {
+  type ChevronProps,
+  DayPicker,
+  type DropdownNavProps,
+  type DropdownProps,
+  getDefaultClassNames,
+  type MonthCaptionProps
+} from 'react-day-picker'
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  components,
+  showOutsideDays = true,
+  captionLayout = 'dropdown',
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      className={cn('p-3', className)}
+      classNames={{
+        ...defaultClassNames,
+        root: cn(defaultClassNames.root, 'w-fit'),
+        months: cn(defaultClassNames.months, 'relative flex flex-col gap-4 sm:flex-row'),
+        month: cn(defaultClassNames.month, 'space-y-3'),
+        month_caption: cn(defaultClassNames.month_caption, 'flex h-8 items-center justify-center'),
+        caption_label: cn(defaultClassNames.caption_label, 'font-medium text-sm'),
+        dropdowns: cn(defaultClassNames.dropdowns, 'flex w-full items-center justify-center gap-2'),
+        dropdown_root: cn(defaultClassNames.dropdown_root, 'relative'),
+        dropdown: cn(
+          defaultClassNames.dropdown,
+          'h-8 rounded-md border border-border bg-background px-2 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/50'
+        ),
+        nav: cn(defaultClassNames.nav, 'absolute inset-x-0 top-3 flex items-center justify-between px-3'),
+        button_previous: cn(
+          defaultClassNames.button_previous,
+          'inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40'
+        ),
+        button_next: cn(
+          defaultClassNames.button_next,
+          'inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-40'
+        ),
+        month_grid: cn(defaultClassNames.month_grid, 'w-full border-collapse space-y-1'),
+        weekdays: cn(defaultClassNames.weekdays, 'flex'),
+        weekday: cn(defaultClassNames.weekday, 'w-8 rounded-md text-center font-normal text-muted-foreground text-xs'),
+        week: cn(defaultClassNames.week, 'mt-1 flex w-full'),
+        day: cn(defaultClassNames.day, 'size-8 p-0 text-center text-sm'),
+        day_button: cn(
+          defaultClassNames.day_button,
+          'inline-flex size-8 items-center justify-center rounded-md font-normal text-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-40'
+        ),
+        selected: cn(
+          defaultClassNames.selected,
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground'
+        ),
+        today: cn(defaultClassNames.today, 'bg-accent text-accent-foreground'),
+        outside: cn(defaultClassNames.outside, 'text-muted-foreground opacity-50'),
+        disabled: cn(defaultClassNames.disabled, 'text-muted-foreground opacity-40'),
+        range_middle: cn(defaultClassNames.range_middle, 'rounded-none bg-accent text-accent-foreground'),
+        range_start: cn(defaultClassNames.range_start, 'rounded-l-md bg-primary text-primary-foreground'),
+        range_end: cn(defaultClassNames.range_end, 'rounded-r-md bg-primary text-primary-foreground'),
+        hidden: cn(defaultClassNames.hidden, 'invisible'),
+        ...classNames
+      }}
+      components={{
+        MonthCaption: CalendarMonthCaption,
+        DropdownNav: CalendarDropdownNav,
+        Dropdown: CalendarDropdown,
+        Chevron: CalendarChevron,
+        ...components
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarMonthCaption({ children }: MonthCaptionProps) {
+  return <>{children}</>
+}
+
+function CalendarDropdownNav({ className, ...props }: DropdownNavProps) {
+  return <div className={cn('flex w-full items-center gap-2', className)} {...props} />
+}
+
+function CalendarDropdown({
+  value,
+  onChange,
+  options,
+  disabled,
+  className,
+  style,
+  'aria-label': ariaLabel
+}: DropdownProps) {
+  return (
+    <Select
+      value={value?.toString()}
+      disabled={disabled}
+      onValueChange={(nextValue) => handleCalendarDropdownChange(nextValue, onChange)}>
+      <SelectTrigger
+        aria-label={ariaLabel}
+        size="sm"
+        style={style}
+        className={cn('min-w-0 first:flex-1 last:shrink-0', className)}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent align="center" className="max-h-64">
+        {options?.map((option) => (
+          <SelectItem key={option.value} value={String(option.value)} disabled={option.disabled}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+function handleCalendarDropdownChange(value: string | number, onChange: DropdownProps['onChange']) {
+  if (!onChange) return
+
+  const event = {
+    target: {
+      value: String(value)
+    }
+  } as React.ChangeEvent<HTMLSelectElement>
+
+  onChange(event)
+}
+
+function CalendarChevron({ className, orientation, disabled, ...props }: ChevronProps) {
+  const iconClassName = cn('size-4', disabled && 'opacity-40', className)
+
+  if (orientation === 'left') return <ChevronLeft className={iconClassName} {...props} />
+  if (orientation === 'right') return <ChevronRight className={iconClassName} {...props} />
+  if (orientation === 'up') return <ChevronUp className={iconClassName} {...props} />
+  return <ChevronDown className={iconClassName} {...props} />
+}
+
+export { Calendar }
diff --git a/packages/ui/src/components/primitives/combobox.tsx b/packages/ui/src/components/primitives/combobox.tsx
index 2e11809351..d649ad31b9 100644
--- a/packages/ui/src/components/primitives/combobox.tsx
+++ b/packages/ui/src/components/primitives/combobox.tsx
@@ -9,7 +9,8 @@ import {
   CommandItem,
   CommandList
 } from '@cherrystudio/ui/components/primitives/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@cherrystudio/ui/components/primitives/popover'
+import { Input } from '@cherrystudio/ui/components/primitives/input'
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@cherrystudio/ui/components/primitives/popover'
 import { cn } from '@cherrystudio/ui/lib/utils'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { Check, ChevronDown, X } from 'lucide-react'
@@ -19,7 +20,7 @@ import * as React from 'react'
 
 const comboboxTriggerVariants = cva(
   cn(
-    'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal',
+    'inline-flex items-center justify-between rounded-md border-1 text-sm transition-colors outline-none font-normal',
     'bg-zinc-50 dark:bg-zinc-900',
     'text-foreground'
   ),
@@ -44,7 +45,7 @@ const comboboxTriggerVariants = cva(
 )
 
 const comboboxItemVariants = cva(
-  'relative flex items-center gap-2 px-2 py-1.5 text-sm rounded-2xs cursor-pointer transition-colors outline-none select-none',
+  'relative flex items-center gap-2 px-2 py-1.5 text-sm rounded-md cursor-pointer transition-colors outline-none select-none',
   {
     variants: {
       state: {
@@ -59,20 +60,28 @@ const comboboxItemVariants = cva(
   }
 )
 
+const comboboxInputSizeClasses = {
+  sm: 'h-8 px-2 text-xs',
+  default: 'h-9 px-3 text-sm',
+  lg: 'h-10 px-4 text-sm'
+}
+
 // ==================== Types ====================
 
-export interface ComboboxOption {
+export type ComboboxOption<TExtra extends object = Record<never, never>> = {
   value: string
   label: string
   disabled?: boolean
   icon?: React.ReactNode
   description?: string
-  [key: string]: any
-}
+} & TExtra
 
-export interface ComboboxProps extends Omit<VariantProps<typeof comboboxTriggerVariants>, 'state'> {
+export type ComboboxSearchPlacement = 'content' | 'trigger'
+
+export interface ComboboxProps<TExtra extends object = Record<never, never>>
+  extends Omit<VariantProps<typeof comboboxTriggerVariants>, 'state'> {
   // Data source
-  options: ComboboxOption[]
+  options: ComboboxOption<TExtra>[]
   value?: string | string[]
   defaultValue?: string | string[]
   onChange?: (value: string | string[]) => void
@@ -81,14 +90,16 @@ export interface ComboboxProps extends Omit<VariantProps<typeof comboboxTriggerV
   multiple?: boolean
 
   // Custom rendering
-  renderOption?: (option: ComboboxOption) => React.ReactNode
-  renderValue?: (value: string | string[], options: ComboboxOption[]) => React.ReactNode
+  renderOption?: (option: ComboboxOption<TExtra>) => React.ReactNode
+  renderValue?: (value: string | string[], options: ComboboxOption<TExtra>[]) => React.ReactNode
 
   // Search
   searchable?: boolean
+  searchPlacement?: ComboboxSearchPlacement
   searchPlaceholder?: string
   emptyText?: string
   onSearch?: (search: string) => void
+  filterOption?: (option: ComboboxOption<TExtra>, search: string) => boolean
 
   // State
   error?: boolean
@@ -100,6 +111,7 @@ export interface ComboboxProps extends Omit<VariantProps<typeof comboboxTriggerV
   placeholder?: string
   className?: string
   popoverClassName?: string
+  triggerStyle?: React.CSSProperties
   width?: string | number
 
   // Other
@@ -108,7 +120,7 @@ export interface ComboboxProps extends Omit<VariantProps<typeof comboboxTriggerV
 
 // ==================== Component ====================
 
-export function Combobox({
+export function Combobox<TExtra extends object = Record<never, never>>({
   options,
   value: controlledValue,
   defaultValue,
@@ -117,9 +129,11 @@ export function Combobox({
   renderOption,
   renderValue,
   searchable = true,
+  searchPlacement = 'content',
   searchPlaceholder = 'Search...',
   emptyText = 'No results found.',
   onSearch,
+  filterOption,
   error = false,
   disabled = false,
   open: controlledOpen,
@@ -127,16 +141,29 @@ export function Combobox({
   placeholder = 'Please Select',
   className,
   popoverClassName,
+  triggerStyle,
   width,
   size,
   name
-}: ComboboxProps) {
+}: ComboboxProps<TExtra>) {
   // ==================== State ====================
   const [internalOpen, setInternalOpen] = React.useState(false)
   const [internalValue, setInternalValue] = React.useState<string | string[]>(defaultValue ?? (multiple ? [] : ''))
+  const [triggerSearch, setTriggerSearch] = React.useState('')
+  const [contentSearch, setContentSearch] = React.useState('')
+  const triggerInputRef = React.useRef<HTMLInputElement>(null)
 
   const open = controlledOpen ?? internalOpen
-  const setOpen = onOpenChange ?? setInternalOpen
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (onOpenChange) {
+        onOpenChange(nextOpen)
+      } else {
+        setInternalOpen(nextOpen)
+      }
+    },
+    [onOpenChange]
+  )
 
   const value = controlledValue ?? internalValue
   const setValue = (newValue: string | string[]) => {
@@ -146,8 +173,45 @@ export function Combobox({
     onChange?.(newValue)
   }
 
+  const selectedOption = !multiple ? options.find((opt) => opt.value === value) : undefined
+  const triggerSearchEnabled = searchable && searchPlacement === 'trigger' && !multiple
+  const contentSearchEnabled = searchable && !triggerSearchEnabled
+  const manualFilterEnabled = triggerSearchEnabled || (contentSearchEnabled && Boolean(filterOption))
+  const activeSearch = triggerSearchEnabled ? triggerSearch : contentSearch
+  const normalizedSearch = activeSearch.trim().toLowerCase()
+  const visibleOptions = React.useMemo(() => {
+    if (!manualFilterEnabled || !normalizedSearch) {
+      return options
+    }
+
+    return options.filter((option) => {
+      if (filterOption) {
+        return filterOption(option, activeSearch)
+      }
+
+      return [option.label, option.value, option.description]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase()
+        .includes(normalizedSearch)
+    })
+  }, [activeSearch, filterOption, manualFilterEnabled, normalizedSearch, options])
+
   // ==================== Handlers ====================
 
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+    if (!nextOpen) {
+      setTriggerSearch('')
+      setContentSearch('')
+      return
+    }
+
+    if (triggerSearchEnabled) {
+      setTriggerSearch('')
+    }
+  }
+
   const handleSelect = (selectedValue: string) => {
     if (multiple) {
       const currentValues = (value as string[]) || []
@@ -156,8 +220,10 @@ export function Combobox({
         : [...currentValues, selectedValue]
       setValue(newValues)
     } else {
-      setValue(selectedValue === value ? '' : selectedValue)
-      setOpen(false)
+      if (selectedValue !== value) {
+        setValue(selectedValue)
+      }
+      handleOpenChange(false)
     }
   }
 
@@ -176,6 +242,84 @@ export function Combobox({
     return value === optionValue
   }
 
+  const handleTriggerInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    if (!triggerSearchEnabled) {
+      return
+    }
+
+    if (!open) {
+      handleOpenChange(true)
+    }
+    event.currentTarget.select()
+  }
+
+  const handleTriggerInputMouseDown = () => {
+    if (!triggerSearchEnabled || open) {
+      return
+    }
+
+    handleOpenChange(true)
+  }
+
+  const handleTriggerInputClick = (event: React.MouseEvent<HTMLInputElement>) => {
+    if (!triggerSearchEnabled) {
+      return
+    }
+
+    event.preventDefault()
+    event.currentTarget.focus()
+    if (!open) {
+      handleOpenChange(true)
+    }
+  }
+
+  const handleTriggerInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextSearch = event.target.value
+    setTriggerSearch(nextSearch)
+    onSearch?.(nextSearch)
+    if (!open) {
+      setOpen(true)
+    }
+  }
+
+  const handleTriggerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!triggerSearchEnabled) {
+      return
+    }
+
+    if (event.key === 'Escape') {
+      handleOpenChange(false)
+      return
+    }
+
+    if (event.key === 'Enter') {
+      if (!normalizedSearch) {
+        event.preventDefault()
+        handleOpenChange(false)
+        return
+      }
+
+      const firstEnabledOption = visibleOptions.find((option) => !option.disabled)
+      if (firstEnabledOption) {
+        event.preventDefault()
+        handleSelect(firstEnabledOption.value)
+      }
+      return
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (!open) {
+        handleOpenChange(true)
+      }
+    }
+  }
+
+  const handleContentSearchChange = (nextSearch: string) => {
+    setContentSearch(nextSearch)
+    onSearch?.(nextSearch)
+  }
+
   // ==================== Render Helpers ====================
 
   const renderTriggerContent = () => {
@@ -226,7 +370,54 @@ export function Combobox({
     return <span className="text-muted-foreground">{placeholder}</span>
   }
 
-  const renderOptionContent = (option: ComboboxOption) => {
+  const renderTriggerInput = () => {
+    const triggerInputValue = open ? triggerSearch : (selectedOption?.label ?? '')
+    const triggerInputPlaceholder = open ? (selectedOption?.label ?? placeholder) : placeholder
+    const inputSize = size ?? 'default'
+
+    return (
+      <PopoverAnchor asChild>
+        <div className="relative" style={{ width: triggerWidth }}>
+          <PopoverTrigger asChild>
+            <Input
+              ref={triggerInputRef}
+              type="text"
+              value={triggerInputValue}
+              placeholder={triggerInputPlaceholder}
+              disabled={disabled}
+              aria-expanded={open}
+              aria-invalid={error}
+              role="combobox"
+              autoComplete="off"
+              spellCheck={false}
+              onFocus={handleTriggerInputFocus}
+              onMouseDown={handleTriggerInputMouseDown}
+              onClick={handleTriggerInputClick}
+              onChange={handleTriggerInputChange}
+              onKeyDown={handleTriggerInputKeyDown}
+              style={triggerStyle}
+              className={cn(
+                'w-full rounded-md border-1 bg-zinc-50 pr-8 shadow-none transition-colors dark:bg-zinc-900',
+                'focus-visible:border-primary focus-visible:ring-3 focus-visible:ring-primary/20',
+                error && 'border-destructive! focus-visible:ring-red-600/20',
+                disabled && 'cursor-not-allowed opacity-50',
+                comboboxInputSizeClasses[inputSize],
+                className
+              )}
+            />
+          </PopoverTrigger>
+          <ChevronDown
+            className={cn(
+              'pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 shrink-0 opacity-50 transition-transform',
+              open && 'rotate-180'
+            )}
+          />
+        </div>
+      </PopoverAnchor>
+    )
+  }
+
+  const renderOptionContent = (option: ComboboxOption<TExtra>) => {
     if (renderOption) {
       return renderOption(option)
     }
@@ -249,39 +440,78 @@ export function Combobox({
   const triggerWidth = width ? (typeof width === 'number' ? `${width}px` : width) : undefined
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          size={size}
-          disabled={disabled}
-          style={{ width: triggerWidth }}
-          className={cn(comboboxTriggerVariants({ state, size }), className)}
-          aria-expanded={open}
-          aria-invalid={error}>
-          {renderTriggerContent()}
-          <ChevronDown className="size-4 opacity-50 shrink-0" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className={cn('p-0 rounded-2xs', popoverClassName)} style={{ width: triggerWidth }}>
-        <Command>
-          {searchable && (
-            <CommandInput placeholder={searchPlaceholder} className="h-9 rounded-none" onValueChange={onSearch} />
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      {triggerSearchEnabled ? (
+        renderTriggerInput()
+      ) : (
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size={size}
+            disabled={disabled}
+            style={{ width: triggerWidth, ...triggerStyle }}
+            className={cn(comboboxTriggerVariants({ state, size }), className)}
+            aria-expanded={open}
+            aria-invalid={error}>
+            {renderTriggerContent()}
+            <ChevronDown className="size-4 opacity-50 shrink-0" />
+          </Button>
+        </PopoverTrigger>
+      )}
+      <PopoverContent
+        className={cn('p-0 rounded-md', popoverClassName)}
+        style={{ width: triggerWidth }}
+        onOpenAutoFocus={(event) => {
+          if (!triggerSearchEnabled) {
+            return
+          }
+
+          event.preventDefault()
+          triggerInputRef.current?.focus()
+        }}>
+        <Command shouldFilter={!manualFilterEnabled}>
+          {contentSearchEnabled && (
+            <CommandInput
+              placeholder={searchPlaceholder}
+              className="h-9 rounded-none"
+              onValueChange={handleContentSearchChange}
+            />
           )}
           <CommandList>
-            <CommandEmpty>{emptyText}</CommandEmpty>
-            <CommandGroup>
-              {options.map((option) => (
-                <CommandItem
-                  key={option.value}
-                  value={option.value}
-                  disabled={option.disabled}
-                  onSelect={() => handleSelect(option.value)}
-                  className={cn(comboboxItemVariants({ state: option.disabled ? 'disabled' : 'default' }))}>
-                  {renderOptionContent(option)}
-                </CommandItem>
-              ))}
-            </CommandGroup>
+            {manualFilterEnabled ? (
+              visibleOptions.length === 0 ? (
+                <div className="py-6 text-center text-muted-foreground text-sm">{emptyText}</div>
+              ) : (
+                <CommandGroup>
+                  {visibleOptions.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value || option.label}
+                      disabled={option.disabled}
+                      onSelect={() => handleSelect(option.value)}
+                      className={cn(comboboxItemVariants({ state: option.disabled ? 'disabled' : 'default' }))}>
+                      {renderOptionContent(option)}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )
+            ) : (
+              <>
+                <CommandEmpty>{emptyText}</CommandEmpty>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      disabled={option.disabled}
+                      onSelect={() => handleSelect(option.value)}
+                      className={cn(comboboxItemVariants({ state: option.disabled ? 'disabled' : 'default' }))}>
+                      {renderOptionContent(option)}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
           </CommandList>
         </Command>
       </PopoverContent>
diff --git a/packages/ui/src/components/primitives/context-menu.tsx b/packages/ui/src/components/primitives/context-menu.tsx
new file mode 100644
index 0000000000..8ebfd6bd5c
--- /dev/null
+++ b/packages/ui/src/components/primitives/context-menu.tsx
@@ -0,0 +1,205 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+import * as React from 'react'
+
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+}
+
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        className
+      )}
+      {...props}>
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  )
+}
+
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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',
+          className
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        className
+      )}
+      checked={checked}
+      {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-4 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        'relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        className
+      )}
+      {...props}>
+      <span className="pointer-events-none absolute left-2 flex size-4 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn('px-2 py-1.5 font-medium text-sm data-[inset]:pl-8', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn('ml-auto text-muted-foreground text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+}
diff --git a/packages/ui/src/components/primitives/dialog.tsx b/packages/ui/src/components/primitives/dialog.tsx
index 62a063eea4..dfe282c217 100644
--- a/packages/ui/src/components/primitives/dialog.tsx
+++ b/packages/ui/src/components/primitives/dialog.tsx
@@ -46,7 +46,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          'bg-background 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-xs border border-border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-card text-card-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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-md border border-border p-6 shadow-lg duration-200 sm:max-w-lg',
           className
         )}
         {...props}>
@@ -54,7 +54,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="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">
+            className="ring-offset-background focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-md opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
             <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
diff --git a/packages/ui/src/components/primitives/item.tsx b/packages/ui/src/components/primitives/item.tsx
new file mode 100644
index 0000000000..98a1dc14a8
--- /dev/null
+++ b/packages/ui/src/components/primitives/item.tsx
@@ -0,0 +1,157 @@
+import { Separator } from '@cherrystudio/ui/components/primitives/separator'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+function ItemGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div role="list" data-slot="item-group" className={cn('group/item-group flex flex-col', className)} {...props} />
+  )
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" orientation="horizontal" className={cn('my-0', className)} {...props} />
+}
+
+const itemVariants = cva(
+  'group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border-border',
+        muted: 'bg-muted/50'
+      },
+      size: {
+        default: 'gap-4 p-4',
+        sm: 'gap-2.5 px-4 py-3'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+function Item({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div'
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover'
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn('flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn('flex w-fit items-center gap-2 text-sm leading-snug font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        'line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground',
+        '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="item-actions" className={cn('flex items-center gap-2', className)} {...props} />
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn('flex basis-full items-center justify-between gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+}
diff --git a/packages/ui/src/components/primitives/kbd.tsx b/packages/ui/src/components/primitives/kbd.tsx
index 21c4b06b7b..b3f23237c8 100644
--- a/packages/ui/src/components/primitives/kbd.tsx
+++ b/packages/ui/src/components/primitives/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
     <kbd
       data-slot="kbd"
       className={cn(
-        'bg-primary/10 text-primary pointer-events-none inline-flex w-fit min-w-5 items-center justify-center gap-1 rounded-3xs p-1 font-sans text-xs font-medium select-none',
+        'bg-primary/10 text-primary pointer-events-none inline-flex w-fit min-w-5 items-center justify-center gap-1 rounded-md p-1 font-sans text-xs font-medium select-none',
         "[&_svg:not([class*='size-'])]:size-3",
         '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
         className
diff --git a/packages/ui/src/components/primitives/pagination.tsx b/packages/ui/src/components/primitives/pagination.tsx
index 4e5a407c07..ae3ee6a652 100644
--- a/packages/ui/src/components/primitives/pagination.tsx
+++ b/packages/ui/src/components/primitives/pagination.tsx
@@ -40,7 +40,7 @@ function PaginationLink({ className, isActive, size = 'icon', ...props }: Pagina
           variant: isActive ? 'outline' : 'ghost',
           size
         }),
-        'text-foreground hover:text-primary hover:shadow-none hover:bg-primary/10 rounded-3xs',
+        'text-foreground hover:text-primary hover:shadow-none hover:bg-primary/10 rounded-md',
         isActive && 'bg-background text-primary',
         className
       )}
diff --git a/packages/ui/src/components/primitives/radioGroup.tsx b/packages/ui/src/components/primitives/radio-group.tsx
similarity index 60%
rename from packages/ui/src/components/primitives/radioGroup.tsx
rename to packages/ui/src/components/primitives/radio-group.tsx
index 2dd4ece391..b44ebbbdd3 100644
--- a/packages/ui/src/components/primitives/radioGroup.tsx
+++ b/packages/ui/src/components/primitives/radio-group.tsx
@@ -1,25 +1,22 @@
 import { cn } from '@cherrystudio/ui/lib/utils'
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { CircleIcon } from 'lucide-react'
 import * as React from 'react'
 
 const radioGroupItemVariants = cva(
   cn(
-    'aspect-square shrink-0 rounded-full border transition-all outline-none',
-    'border-primary text-primary',
-    'hover:bg-primary/10',
-    'aria-checked:ring-3 aria-checked:ring-primary/20',
+    'aspect-square shrink-0 rounded-full border border-input bg-transparent text-primary shadow-none transition-[color,border-color,box-shadow] outline-none',
+    'data-[state=checked]:border-2 data-[state=checked]:border-primary',
+    'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
     'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-    'disabled:cursor-not-allowed disabled:border-gray-500/10 disabled:bg-background-subtle',
-    'dark:bg-input/30 shadow-xs'
+    'disabled:cursor-not-allowed disabled:opacity-50'
   ),
   {
     variants: {
       size: {
-        sm: 'size-4',
-        md: 'size-5',
-        lg: 'size-6'
+        sm: 'size-3.5',
+        md: 'size-4',
+        lg: 'size-5'
       }
     },
     defaultVariants: {
@@ -43,13 +40,7 @@ function RadioGroupItem({
       data-size={size}
       className={cn(radioGroupItemVariants({ size }), className)}
       {...props}>
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center">
-        <CircleIcon
-          className={cn('fill-primary absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-2.5')}
-        />
-      </RadioGroupPrimitive.Indicator>
+      <RadioGroupPrimitive.Indicator data-slot="radio-group-indicator" />
     </RadioGroupPrimitive.Item>
   )
 }
diff --git a/packages/ui/src/components/primitives/segmented-control.tsx b/packages/ui/src/components/primitives/segmented-control.tsx
new file mode 100644
index 0000000000..e3d4e30173
--- /dev/null
+++ b/packages/ui/src/components/primitives/segmented-control.tsx
@@ -0,0 +1,81 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
+import * as React from 'react'
+
+export interface SegmentedControlOption<TValue extends string = string> {
+  value: TValue
+  label: React.ReactNode
+  disabled?: boolean
+}
+
+export interface SegmentedControlProps<TValue extends string = string>
+  extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
+  options: readonly SegmentedControlOption<TValue>[]
+  value?: TValue
+  defaultValue?: TValue
+  onValueChange?: (value: TValue) => void
+  disabled?: boolean
+  size?: 'sm' | 'default'
+}
+
+function SegmentedControl<TValue extends string = string>({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  size = 'default',
+  className,
+  ...props
+}: SegmentedControlProps<TValue>) {
+  const [internalValue, setInternalValue] = React.useState<TValue | undefined>(defaultValue ?? options[0]?.value)
+  const selectedValue = value ?? internalValue
+
+  const handleSelect = (option: SegmentedControlOption<TValue>) => {
+    if (disabled || option.disabled || option.value === selectedValue) {
+      return
+    }
+
+    if (value === undefined) {
+      setInternalValue(option.value)
+    }
+    onValueChange?.(option.value)
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      data-slot="segmented-control"
+      data-size={size}
+      aria-disabled={disabled}
+      className={cn(
+        'inline-flex items-center rounded-full border border-border/60 bg-muted/60 p-0.5',
+        disabled && 'pointer-events-none opacity-50',
+        className
+      )}
+      {...props}>
+      {options.map((option) => {
+        const selected = option.value === selectedValue
+
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={selected}
+            disabled={disabled || option.disabled}
+            onClick={() => handleSelect(option)}
+            className={cn(
+              'inline-flex min-w-0 items-center justify-center rounded-full font-medium text-foreground-muted outline-none transition-[background-color,color,box-shadow]',
+              'hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
+              size === 'sm' ? 'h-7 gap-1.5 px-2.5 text-xs' : 'h-8 gap-2 px-3 text-sm',
+              selected && 'bg-background text-foreground shadow-xs'
+            )}>
+            {option.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export { SegmentedControl }
diff --git a/packages/ui/src/components/primitives/select.tsx b/packages/ui/src/components/primitives/select.tsx
index 9b1fa1bba5..6ad131d713 100644
--- a/packages/ui/src/components/primitives/select.tsx
+++ b/packages/ui/src/components/primitives/select.tsx
@@ -6,7 +6,7 @@ import * as React from 'react'
 
 const selectTriggerVariants = cva(
   cn(
-    'inline-flex items-center justify-between rounded-2xs border-1 text-sm transition-colors outline-none font-normal',
+    'inline-flex items-center justify-between rounded-md border-1 text-sm transition-colors outline-none font-normal',
     'bg-zinc-50 dark:bg-zinc-900',
     'text-foreground'
   ),
@@ -82,7 +82,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xs border shadow-md',
+          '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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border 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',
           className
diff --git a/packages/ui/src/components/primitives/separator.tsx b/packages/ui/src/components/primitives/separator.tsx
index bdd26240ae..c12a4a9dfe 100644
--- a/packages/ui/src/components/primitives/separator.tsx
+++ b/packages/ui/src/components/primitives/separator.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { cn } from '@cherrystudio/ui/lib/utils'
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
 import * as React from 'react'
@@ -16,7 +14,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/primitives/slider.tsx b/packages/ui/src/components/primitives/slider.tsx
index 7174473ae2..ca360abb4e 100644
--- a/packages/ui/src/components/primitives/slider.tsx
+++ b/packages/ui/src/components/primitives/slider.tsx
@@ -47,7 +47,7 @@ const sliderThumbVariants = cva(
   }
 )
 
-const sliderMarkLabelVariants = cva('absolute text-muted-foreground', {
+const sliderMarkLabelVariants = cva('absolute top-0 whitespace-nowrap text-muted-foreground leading-none', {
   variants: {
     size: {
       sm: 'text-[10px]',
@@ -161,11 +161,13 @@ function Slider({
       {sliderElement}
       <div
         data-slot="slider-marks"
-        className={cn('relative', isVertical ? 'ml-2 flex h-full flex-col justify-between' : 'mt-1.5 w-full')}>
+        className={cn('relative', isVertical ? 'ml-2 flex h-full flex-col justify-between' : 'mt-1.5 h-4 w-full')}>
         {marks.map((mark) => {
           const range = max - min
           if (range === 0) return null
           const percentage = ((mark.value - min) / range) * 100
+          const transform =
+            percentage <= 0 ? 'translateX(0)' : percentage >= 100 ? 'translateX(-100%)' : 'translateX(-50%)'
           return (
             <span
               key={mark.value}
@@ -174,7 +176,7 @@ function Slider({
               style={
                 isVertical
                   ? { top: `${100 - percentage}%`, transform: 'translateY(-50%)' }
-                  : { left: `${percentage}%`, transform: 'translateX(-50%)' }
+                  : { left: `${percentage}%`, transform }
               }>
               {mark.label}
             </span>
diff --git a/packages/ui/src/components/primitives/switch.tsx b/packages/ui/src/components/primitives/switch.tsx
index 2e9b2c12eb..f7047c369f 100644
--- a/packages/ui/src/components/primitives/switch.tsx
+++ b/packages/ui/src/components/primitives/switch.tsx
@@ -8,20 +8,21 @@ const switchRootVariants = cva(
   [
     'cs-switch cs-switch-root',
     'group relative cursor-pointer peer inline-flex shrink-0 items-center rounded-full shadow-xs outline-none transition-all',
-    'data-[state=unchecked]:bg-gray-500/20 data-[state=checked]:bg-primary',
+    'data-[state=unchecked]:bg-gray-500/20 data-[state=checked]:bg-brand-600',
     'disabled:cursor-not-allowed disabled:opacity-40',
     'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
   ],
   {
     variants: {
       size: {
+        xs: ['h-4.5 w-8'],
         sm: ['w-9 h-5'],
         md: ['w-11 h-5.5'],
         lg: ['w-11 h-6']
       },
       loading: {
         false: null,
-        true: ['bg-primary-hover!']
+        true: ['bg-brand-300!']
       }
     },
     defaultVariants: {
@@ -39,16 +40,22 @@ const switchThumbVariants = cva(
   {
     variants: {
       size: {
+        xs: ['ml-[1px] size-4 data-[state=checked]:translate-x-3.5'],
         sm: ['size-4.5 ml-[1px] data-[state=checked]:translate-x-4'],
         md: ['size-[19px] ml-0.5 data-[state=checked]:translate-x-[21px]'],
         lg: ['size-5 ml-[3px] data-[state=checked]:translate-x-4.5']
       },
       loading: {
         false: null,
-        true: ['bg-primary-hover!']
+        true: ['bg-brand-300!']
       }
     },
     compoundVariants: [
+      {
+        size: 'xs',
+        loading: true,
+        className: 'ml-0.5 size-3.5 data-[state=checked]:translate-x-3.5'
+      },
       {
         size: 'sm',
         loading: true,
@@ -84,7 +91,7 @@ const switchThumbSvgVariants = cva(['transition-all'], {
 interface SwitchProps extends Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, 'children'> {
   /** When true, displays a loading animation in the switch thumb. Defaults to false when undefined. */
   loading?: boolean
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   classNames?: {
     root?: string
     thumb?: string
diff --git a/packages/ui/src/components/primitives/table.tsx b/packages/ui/src/components/primitives/table.tsx
new file mode 100644
index 0000000000..28d8f1ec42
--- /dev/null
+++ b/packages/ui/src/components/primitives/table.tsx
@@ -0,0 +1,60 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
+import * as React from 'react'
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div data-slot="table-container" className="relative w-full overflow-auto">
+      <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className)}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn('h-9 px-3 text-left align-middle font-medium text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return <td data-slot="table-cell" className={cn('px-3 py-2 align-middle', className)} {...props} />
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+  return (
+    <caption data-slot="table-caption" className={cn('mt-4 text-muted-foreground text-sm', className)} {...props} />
+  )
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }
diff --git a/packages/ui/src/components/primitives/tabs.tsx b/packages/ui/src/components/primitives/tabs.tsx
index 95c8ec90e2..887d6b9df7 100644
--- a/packages/ui/src/components/primitives/tabs.tsx
+++ b/packages/ui/src/components/primitives/tabs.tsx
@@ -94,7 +94,7 @@ const tabsTriggerVariants = cva(
           'font-normal text-muted-foreground hover:text-foreground',
           'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'data-[state=active]:text-primary',
-          'after:absolute after:bg-primary/10 after:rounded-full',
+          'after:absolute after:rounded-full after:bg-transparent',
           'data-[state=active]:after:bg-primary'
         ]
       },
diff --git a/packages/ui/src/components/primitives/textarea.tsx b/packages/ui/src/components/primitives/textarea.tsx
index 1444e8c9ed..07659c553d 100644
--- a/packages/ui/src/components/primitives/textarea.tsx
+++ b/packages/ui/src/components/primitives/textarea.tsx
@@ -12,7 +12,7 @@ import * as React from 'react'
 const textareaVariants = cva(
   cn(
     'flex field-sizing-content min-h-16 w-full border bg-transparent px-4 py-3 text-lg shadow-xs transition-[color,box-shadow] outline-none resize-y',
-    'rounded-xs',
+    'rounded-md',
     'border-input text-foreground placeholder:text-foreground-secondary',
     'focus-visible:border-primary focus-visible:ring-ring focus-visible:ring-[3px]',
     'disabled:cursor-not-allowed disabled:opacity-50',
diff --git a/packages/ui/src/components/primitives/tooltip.tsx b/packages/ui/src/components/primitives/tooltip.tsx
index 216d725a6a..4800ba625f 100644
--- a/packages/ui/src/components/primitives/tooltip.tsx
+++ b/packages/ui/src/components/primitives/tooltip.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@cherrystudio/ui/lib/utils'
 import {
   Arrow as RadixArrow,
   Content as RadixContent,
@@ -8,8 +9,6 @@ import {
 } from '@radix-ui/react-tooltip'
 import * as React from 'react'
 
-import { cn } from '../../lib/utils'
-
 type Side = 'top' | 'bottom' | 'left' | 'right'
 type Align = 'start' | 'center' | 'end'
 
@@ -32,8 +31,6 @@ function parsePlacement(placement?: string): { side: Side; align: Align } {
   return mapping[placement ?? 'top'] ?? { side: 'top', align: 'center' }
 }
 
-// --- Compound component exports (for advanced usage) ---
-
 export type TooltipProviderProps = React.ComponentProps<typeof RadixProvider>
 export type TooltipRootProps = React.ComponentProps<typeof RadixRoot>
 export type TooltipTriggerProps = React.ComponentProps<typeof RadixTrigger>
@@ -56,9 +53,11 @@ function TooltipTrigger({ ...props }: TooltipTriggerProps) {
 }
 
 const contentStyles =
-  'z-50 max-w-60 rounded-3xs border border-border bg-background px-4 py-3 text-sm leading-4 text-foreground shadow-[0px_6px_12px_0px_rgba(0,0,0,0.2)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit max-w-80 origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-neutral-900 px-3 py-1.5 text-neutral-50 text-xs leading-relaxed whitespace-normal break-words fade-in-0 zoom-in-95 dark:bg-neutral-100 dark:text-neutral-900 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95'
 
-function TooltipContent({ className, sideOffset = 4, children, ...props }: TooltipContentProps) {
+const arrowStyles = 'z-50 fill-neutral-900 dark:fill-neutral-100'
+
+function TooltipContent({ className, sideOffset = 0, children, ...props }: TooltipContentProps) {
   return (
     <RadixPortal>
       <RadixContent
@@ -67,14 +66,12 @@ function TooltipContent({ className, sideOffset = 4, children, ...props }: Toolt
         className={cn(contentStyles, className)}
         {...props}>
         {children}
-        <RadixArrow className="fill-background [&>path:first-child]:fill-border" />
+        <RadixArrow className={arrowStyles} />
       </RadixContent>
     </RadixPortal>
   )
 }
 
-// --- Backward-compatible flat API (drop-in replacement for HeroUI Tooltip) ---
-
 export interface TooltipProps {
   children?: React.ReactNode
   content?: React.ReactNode
@@ -118,7 +115,7 @@ export const Tooltip = ({
 
   const { side, align } = parsePlacement(placement)
 
-  const controlledProps: Partial<React.ComponentProps<typeof RadixRoot>> = {}
+  const controlledProps: Partial<TooltipRootProps> = {}
   if (isOpen != null) {
     controlledProps.open = isOpen
     controlledProps.onOpenChange = onOpenChange
@@ -127,7 +124,7 @@ export const Tooltip = ({
   }
 
   return (
-    <RadixProvider delayDuration={delay}>
+    <TooltipProvider delayDuration={delay}>
       <RadixRoot delayDuration={delay} {...controlledProps}>
         <RadixTrigger asChild>
           <div className={cn('relative z-10 inline-block', classNames?.placeholder)} onClick={onClick}>
@@ -139,19 +136,17 @@ export const Tooltip = ({
             data-slot="tooltip-content"
             side={side}
             align={align}
-            sideOffset={4}
+            sideOffset={0}
             className={cn(contentStyles, classNames?.content, className)}>
             {tooltipContent}
-            {showArrow && <RadixArrow className="fill-background [&>path:first-child]:fill-border" />}
+            {showArrow && <RadixArrow className={arrowStyles} />}
           </RadixContent>
         </RadixPortal>
       </RadixRoot>
-    </RadixProvider>
+    </TooltipProvider>
   )
 }
 
-// --- NormalTooltip (convenience wrapper using compound components) ---
-
 interface NormalTooltipProps extends TooltipRootProps {
   content: React.ReactNode
   side?: TooltipContentProps['side']
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 084c15777b..464858d0bb 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -272,13 +272,13 @@
   /* Runtime Theme Inputs */
   /* ==================== */
   --cs-theme-primary: var(--cs-primary);
-  --cs-user-font-family: initial;
-  --cs-user-code-font-family: initial;
+  --cs-theme-ring: color-mix(in srgb, var(--cs-theme-primary) 40%, transparent);
 
   /* ==================== */
   /* Compatibility Aliases */
   /* ==================== */
   --primary: var(--color-primary);
+  --ring: var(--color-ring);
 
   /* ==================== */
   /* Semantic Colors */
@@ -287,6 +287,7 @@
   --color-primary-hover: var(--cs-primary-hover);
   --color-primary-soft: color-mix(in srgb, var(--color-primary) 60%, transparent);
   --color-primary-mute: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  --color-ring: var(--cs-theme-ring);
   --color-destructive: var(--cs-destructive);
   --color-destructive-hover: var(--cs-destructive-hover);
   --color-success: var(--cs-success);
@@ -301,7 +302,6 @@
   --color-border: var(--cs-border);
   --color-border-hover: var(--cs-border-hover);
   --color-border-active: var(--cs-border-active);
-  --color-ring: var(--cs-ring);
   --color-secondary: var(--cs-secondary);
   --color-secondary-hover: var(--cs-secondary-hover);
   --color-secondary-active: var(--cs-secondary-active);
diff --git a/packages/ui/src/styles/tokens/colors/semantic.css b/packages/ui/src/styles/tokens/colors/semantic.css
index ff04ae0f85..26c1510064 100644
--- a/packages/ui/src/styles/tokens/colors/semantic.css
+++ b/packages/ui/src/styles/tokens/colors/semantic.css
@@ -13,7 +13,7 @@
   --cs-warning: var(--cs-amber-500);
 
   /* Background & Foreground */
-  --cs-background: var(--cs-zinc-50);
+  --cs-background: var(--cs-white);
   --cs-background-subtle: oklch(0 0 0 / 0.02);
   --cs-foreground: oklch(0 0 0 / 0.9);
   --cs-foreground-secondary: oklch(0 0 0 / 0.6);
@@ -48,7 +48,7 @@
 /* Dark Mode */
 .dark {
   /* Background & Foreground */
-  --cs-background: var(--cs-zinc-900);
+  --cs-background: oklch(0.191 0 0 / 0.55);
   --cs-background-subtle: oklch(1 0 0 / 0.02);
   --cs-foreground: oklch(1 0 0 / 0.9);
   --cs-foreground-secondary: oklch(1 0 0 / 0.6);
diff --git a/packages/ui/src/styles/tokens/radius.css b/packages/ui/src/styles/tokens/radius.css
index 4683f7b667..70640065df 100644
--- a/packages/ui/src/styles/tokens/radius.css
+++ b/packages/ui/src/styles/tokens/radius.css
@@ -4,15 +4,15 @@
  */
 
 :root {
-  --cs-radius-4xs: 0.25rem; /* 4px */
-  --cs-radius-3xs: 0.5rem; /* 8px */
-  --cs-radius-2xs: 0.75rem; /* 12px */
-  --cs-radius-xs: 1rem; /* 16px */
-  --cs-radius-sm: 1.5rem; /* 24px */
-  --cs-radius-md: 2rem; /* 32px */
-  --cs-radius-lg: 2.5rem; /* 40px */
-  --cs-radius-xl: 3rem; /* 48px */
-  --cs-radius-2xl: 3.5rem; /* 56px */
-  --cs-radius-3xl: 4rem; /* 64px */
-  --cs-radius-round: 999px; /* 完全圆角，保持 px */
+  --cs-radius-4xs: 0.03125rem; /* 0.5px */
+  --cs-radius-3xs: 0.0625rem; /* 1px */
+  --cs-radius-2xs: 0.09375rem; /* 1.5px */
+  --cs-radius-xs: 0.125rem; /* 2px */
+  --cs-radius-sm: 0.375rem; /* 6px */
+  --cs-radius-md: 0.5rem; /* 8px */
+  --cs-radius-lg: 0.625rem; /* 10px */
+  --cs-radius-xl: 0.875rem; /* 14px */
+  --cs-radius-2xl: 1.125rem; /* 18px */
+  --cs-radius-3xl: 1.375rem; /* 22px */
+  --cs-radius-round: 9999px; /* fully rounded, keep px */
 }
diff --git a/packages/ui/stories/components/composites/DataTable.stories.tsx b/packages/ui/stories/components/composites/DataTable.stories.tsx
new file mode 100644
index 0000000000..c18a8c1d1b
--- /dev/null
+++ b/packages/ui/stories/components/composites/DataTable.stories.tsx
@@ -0,0 +1,198 @@
+import type { ColumnDef } from '@cherrystudio/ui'
+import { Badge, Button, DataTable, Input } from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Pencil, Trash2 } from 'lucide-react'
+import type { Key } from 'react'
+import { useMemo, useState } from 'react'
+
+type Task = {
+  id: string
+  name: string
+  status: 'active' | 'paused' | 'completed'
+  owner: string
+  locked?: boolean
+}
+
+const tasks: Task[] = [
+  { id: '1', name: 'Refresh index', status: 'active', owner: 'Ada' },
+  { id: '2', name: 'Sync providers', status: 'paused', owner: 'Grace' },
+  { id: '3', name: 'Archive logs', status: 'completed', owner: 'Linus', locked: true }
+]
+
+const columns: ColumnDef<Task>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    meta: { width: 220 }
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    meta: { width: 120 },
+    cell: ({ row }) => <Badge variant="outline">{row.original.status}</Badge>
+  },
+  {
+    accessorKey: 'owner',
+    header: 'Owner'
+  }
+]
+
+const columnsWithActions: ColumnDef<Task>[] = [
+  ...columns,
+  {
+    id: 'actions',
+    header: 'Actions',
+    meta: { width: 96, maxWidth: 96, align: 'center' },
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center gap-1">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="text-foreground-muted hover:bg-accent/70 hover:text-foreground"
+          aria-label={`Edit ${row.original.name}`}>
+          <Pencil className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+          aria-label={`Delete ${row.original.name}`}>
+          <Trash2 className="size-4" />
+        </Button>
+      </div>
+    )
+  }
+]
+
+const meta: Meta<typeof DataTable<Task>> = {
+  title: 'Components/Composites/DataTable',
+  component: DataTable<Task>,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A shadcn/TanStack-powered data table with Cherry Studio styling, optional max width, selection, header slots, empty state, scrolling, and controlled expanded rows.'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => <DataTable className="w-[640px]" data={tasks} columns={columns} rowKey="id" />
+}
+
+export const WithActions: Story = {
+  render: () => <DataTable className="w-[720px]" data={tasks} columns={columnsWithActions} rowKey="id" />
+}
+
+export const WithMaxWidth: Story = {
+  render: () => (
+    <div className="w-[800px] max-w-full">
+      <DataTable data={tasks} columns={columns} rowKey="id" maxWidth={640} />
+    </div>
+  )
+}
+
+export const WithToolbar: Story = {
+  render: function WithToolbarExample() {
+    const [query, setQuery] = useState('')
+    const filtered = useMemo(
+      () => tasks.filter((task) => task.name.toLowerCase().includes(query.toLowerCase())),
+      [query]
+    )
+
+    return (
+      <DataTable
+        className="w-[640px]"
+        data={filtered}
+        columns={columns}
+        rowKey="id"
+        headerLeft={<span className="text-muted-foreground text-sm">{filtered.length} tasks</span>}
+        headerRight={
+          <Input className="w-48" placeholder="Search tasks" value={query} onChange={(e) => setQuery(e.target.value)} />
+        }
+      />
+    )
+  }
+}
+
+export const MultipleSelection: Story = {
+  render: function MultipleSelectionExample() {
+    const [selectedRowKeys, setSelectedRowKeys] = useState<Key[]>(['1'])
+
+    return (
+      <DataTable
+        className="w-[640px]"
+        data={tasks}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'multiple',
+          selectedRowKeys,
+          onChange: setSelectedRowKeys,
+          getCheckboxProps: (task) => ({ disabled: task.locked })
+        }}
+        headerLeft={<span className="text-muted-foreground text-sm">{selectedRowKeys.length} selected</span>}
+      />
+    )
+  }
+}
+
+export const SingleSelection: Story = {
+  render: function SingleSelectionExample() {
+    const [selectedRowKey, setSelectedRowKey] = useState<Key | null>(null)
+
+    return (
+      <DataTable
+        className="w-[640px]"
+        data={tasks}
+        columns={columns}
+        rowKey="id"
+        selection={{
+          type: 'single',
+          selectedRowKey,
+          onChange: setSelectedRowKey
+        }}
+      />
+    )
+  }
+}
+
+export const Empty: Story = {
+  render: () => <DataTable className="w-[640px]" data={[]} columns={columns} rowKey="id" emptyText="No tasks" />
+}
+
+export const ScrollAndExpand: Story = {
+  render: function ScrollAndExpandExample() {
+    const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>(['1'])
+
+    return (
+      <DataTable
+        className="w-[640px]"
+        data={[...tasks, ...tasks.map((task) => ({ ...task, id: `${task.id}-copy`, name: `${task.name} copy` }))]}
+        columns={columns}
+        rowKey="id"
+        maxHeight={240}
+        expandedRowKeys={expandedRowKeys}
+        onExpandedRowChange={setExpandedRowKeys}
+        renderExpandedRow={(task) => (
+          <div className="flex items-center justify-between text-sm">
+            <span>
+              {task.name} is owned by {task.owner}.
+            </span>
+            <Button size="sm" variant="outline">
+              Open
+            </Button>
+          </div>
+        )}
+      />
+    )
+  }
+}
diff --git a/packages/ui/stories/components/composites/DateTimePicker.stories.tsx b/packages/ui/stories/components/composites/DateTimePicker.stories.tsx
new file mode 100644
index 0000000000..0d2bf3599b
--- /dev/null
+++ b/packages/ui/stories/components/composites/DateTimePicker.stories.tsx
@@ -0,0 +1,114 @@
+import type { DateTimeGranularity } from '@cherrystudio/ui'
+import { DateTimePicker } from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+
+const meta: Meta<typeof DateTimePicker> = {
+  title: 'Components/Composites/DateTimePicker',
+  component: DateTimePicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A shadcn-style date and time picker built from Popover, DayPicker dropdown navigation, Select, and compact time inputs. Supports configurable time granularity and date-fns format strings.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    granularity: {
+      control: 'select',
+      options: ['day', 'hour', 'minute', 'second'] satisfies DateTimeGranularity[]
+    },
+    format: {
+      control: 'text'
+    },
+    disabled: {
+      control: 'boolean'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const DateOnly: Story = {
+  render: function DateOnlyExample() {
+    const [value, setValue] = useState<Date | undefined>(new Date(2026, 3, 29))
+
+    return (
+      <DateTimePicker
+        value={value}
+        onChange={setValue}
+        granularity="day"
+        format="yyyy-MM-dd"
+        placeholder="Pick a date"
+      />
+    )
+  }
+}
+
+export const WithMinutes: Story = {
+  render: function WithMinutesExample() {
+    const [value, setValue] = useState<Date | undefined>(new Date(2026, 3, 29, 14, 30))
+
+    return (
+      <DateTimePicker
+        value={value}
+        onChange={setValue}
+        granularity="minute"
+        format="yyyy-MM-dd HH:mm"
+        placeholder="Pick date and time"
+      />
+    )
+  }
+}
+
+export const WithSeconds: Story = {
+  render: function WithSecondsExample() {
+    const [value, setValue] = useState<Date | undefined>(new Date(2026, 3, 29, 14, 30, 45))
+
+    return (
+      <DateTimePicker
+        value={value}
+        onChange={setValue}
+        granularity="second"
+        format="yyyy-MM-dd HH:mm:ss"
+        placeholder="Pick date and time"
+      />
+    )
+  }
+}
+
+export const CustomYearRange: Story = {
+  render: function CustomYearRangeExample() {
+    const [value, setValue] = useState<Date | undefined>(new Date(2026, 3, 29, 9, 0))
+
+    return (
+      <DateTimePicker
+        value={value}
+        onChange={setValue}
+        granularity="hour"
+        format="PPP HH':00'"
+        calendarProps={{
+          startMonth: new Date(2020, 0),
+          endMonth: new Date(2035, 11)
+        }}
+      />
+    )
+  }
+}
+
+export const Disabled: Story = {
+  render: function DisabledExample() {
+    return (
+      <DateTimePicker
+        defaultValue={new Date(2026, 3, 29, 14, 30)}
+        granularity="minute"
+        format="yyyy-MM-dd HH:mm"
+        disabled
+      />
+    )
+  }
+}
diff --git a/packages/ui/stories/components/composites/EntitySelector.stories.tsx b/packages/ui/stories/components/composites/EntitySelector.stories.tsx
index 40e57e2344..02e808941e 100644
--- a/packages/ui/stories/components/composites/EntitySelector.stories.tsx
+++ b/packages/ui/stories/components/composites/EntitySelector.stories.tsx
@@ -1,10 +1,10 @@
+import { Button } from '@cherrystudio/ui/components/primitives/button'
+import { Checkbox } from '@cherrystudio/ui/components/primitives/checkbox'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ArrowDown, ArrowUp, Check, ChevronRight, Pencil, Pin, PinOff, Plus } from 'lucide-react'
 import { useMemo, useState } from 'react'
 
 import { EntitySelector } from '../../../src/components/composites/EntitySelector'
-import { Button } from '../../../src/components/primitives/button'
-import { Checkbox } from '../../../src/components/primitives/checkbox'
 
 type ExampleItem = { id: string; name: string; description?: string; emoji?: string }
 
diff --git a/packages/ui/stories/components/composites/Sortable.stories.tsx b/packages/ui/stories/components/composites/Sortable.stories.tsx
index e3a1744ca8..16d7a5596e 100644
--- a/packages/ui/stories/components/composites/Sortable.stories.tsx
+++ b/packages/ui/stories/components/composites/Sortable.stories.tsx
@@ -73,15 +73,15 @@ function ItemCard({ item, dragging }: { item: ExampleItem; dragging: boolean })
 }
 
 export const Vertical: Story = {
-  render: (args) => <VerticalDemo {...(args as any)} />
+  render: (args) => <VerticalDemo {...args} />
 }
 
 export const Horizontal: Story = {
-  render: (args) => <HorizontalDemo {...(args as any)} />
+  render: (args) => <HorizontalDemo {...args} />
 }
 
 export const Grid: Story = {
-  render: (args) => <GridDemo {...(args as any)} />
+  render: (args) => <GridDemo {...args} />
 }
 
 function VerticalDemo(args: any) {
diff --git a/packages/ui/stories/components/primitives/ButtonGroup.stories.tsx b/packages/ui/stories/components/primitives/ButtonGroup.stories.tsx
index bfd7d38f8f..b19e18060b 100644
--- a/packages/ui/stories/components/primitives/ButtonGroup.stories.tsx
+++ b/packages/ui/stories/components/primitives/ButtonGroup.stories.tsx
@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from '@cherrystudio/ui'
+import { Button, ButtonGroup, ButtonGroupItem, Input } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChevronLeft, ChevronRight, LayoutGrid, List } from 'lucide-react'
 
@@ -76,3 +76,24 @@ export const IconToggleStyle: Story = {
     </ButtonGroup>
   )
 }
+
+export const InputWithButton: Story = {
+  render: () => (
+    <ButtonGroup className="w-80">
+      <Input placeholder="Type to search..." className="flex-1" />
+      <Button>Search</Button>
+    </ButtonGroup>
+  )
+}
+
+export const WrappedInputWithButton: Story = {
+  render: () => (
+    <ButtonGroup className="w-80">
+      <ButtonGroupItem className="flex-1">
+        <Input placeholder="Wrapped input..." className="pr-14" />
+        <span className="-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground text-xs">Ctrl K</span>
+      </ButtonGroupItem>
+      <Button>Search</Button>
+    </ButtonGroup>
+  )
+}
diff --git a/packages/ui/stories/components/primitives/Combobox.stories.tsx b/packages/ui/stories/components/primitives/Combobox.stories.tsx
index 79d2f0eba0..53f8cdce42 100644
--- a/packages/ui/stories/components/primitives/Combobox.stories.tsx
+++ b/packages/ui/stories/components/primitives/Combobox.stories.tsx
@@ -36,6 +36,11 @@ const meta: Meta<typeof Combobox> = {
     searchable: {
       control: { type: 'boolean' },
       description: 'Enable search functionality'
+    },
+    searchPlacement: {
+      control: { type: 'select' },
+      options: ['content', 'trigger'],
+      description: 'Where the search input is rendered'
     }
   }
 }
@@ -114,6 +119,145 @@ const iconOptions = [
   }
 ]
 
+const fontOptions = [
+  {
+    value: 'inter',
+    label: 'Inter',
+    description: 'Neutral UI sans serif',
+    category: 'Sans',
+    fontFamily: 'Inter, sans-serif'
+  },
+  {
+    value: 'nunito-sans',
+    label: 'Nunito Sans',
+    description: 'Friendly rounded sans serif',
+    category: 'Sans',
+    fontFamily: '"Nunito Sans", sans-serif'
+  },
+  {
+    value: 'geist',
+    label: 'Geist',
+    description: 'Modern app interface font',
+    category: 'Sans',
+    fontFamily: 'Geist, sans-serif'
+  },
+  {
+    value: 'system-ui',
+    label: 'System UI',
+    description: 'Native operating system font',
+    category: 'Sans',
+    fontFamily: 'system-ui, sans-serif'
+  },
+  {
+    value: 'sf-pro',
+    label: 'SF Pro',
+    description: 'Apple platform interface font',
+    category: 'Sans',
+    fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  {
+    value: 'roboto',
+    label: 'Roboto',
+    description: 'Android and Material UI font',
+    category: 'Sans',
+    fontFamily: 'Roboto, sans-serif'
+  },
+  {
+    value: 'source-sans',
+    label: 'Source Sans 3',
+    description: 'Readable product copy font',
+    category: 'Sans',
+    fontFamily: '"Source Sans 3", sans-serif'
+  },
+  {
+    value: 'ibm-plex-sans',
+    label: 'IBM Plex Sans',
+    description: 'Technical and enterprise UI font',
+    category: 'Sans',
+    fontFamily: '"IBM Plex Sans", sans-serif'
+  },
+  {
+    value: 'geist-mono',
+    label: 'Geist Mono',
+    description: 'Technical mono for code',
+    category: 'Mono',
+    fontFamily: '"Geist Mono", monospace'
+  },
+  {
+    value: 'jetbrains-mono',
+    label: 'JetBrains Mono',
+    description: 'Programming-focused mono font',
+    category: 'Mono',
+    fontFamily: '"JetBrains Mono", monospace'
+  },
+  {
+    value: 'fira-code',
+    label: 'Fira Code',
+    description: 'Ligature-friendly code font',
+    category: 'Mono',
+    fontFamily: '"Fira Code", monospace'
+  },
+  {
+    value: 'source-code-pro',
+    label: 'Source Code Pro',
+    description: 'Adobe monospace family',
+    category: 'Mono',
+    fontFamily: '"Source Code Pro", monospace'
+  },
+  {
+    value: 'berkeley-mono',
+    label: 'Berkeley Mono',
+    description: 'Dense terminal and editor font',
+    category: 'Mono',
+    fontFamily: '"Berkeley Mono", monospace'
+  },
+  {
+    value: 'ui-monospace',
+    label: 'UI Monospace',
+    description: 'Native system monospace stack',
+    category: 'Mono',
+    fontFamily: 'ui-monospace, monospace'
+  }
+]
+
+const searchableToolOptions = [
+  {
+    value: 'claude-code',
+    label: 'Claude Code',
+    description: 'Agentic coding assistant',
+    category: 'AI',
+    keywords: 'anthropic sonnet terminal'
+  },
+  {
+    value: 'cursor',
+    label: 'Cursor',
+    description: 'AI-native code editor',
+    category: 'Editor',
+    keywords: 'autocomplete composer workspace'
+  },
+  {
+    value: 'github-copilot',
+    label: 'GitHub Copilot',
+    description: 'Inline code completion',
+    category: 'AI',
+    keywords: 'github suggestion pair programming'
+  },
+  {
+    value: 'raycast',
+    label: 'Raycast',
+    description: 'Command launcher and extensions',
+    category: 'Productivity',
+    keywords: 'launcher snippets automation'
+  },
+  {
+    value: 'linear',
+    label: 'Linear',
+    description: 'Issue tracking and planning',
+    category: 'Planning',
+    keywords: 'tickets roadmap triage'
+  }
+]
+
 // ==================== Stories ====================
 
 // Default - 占位符状态
@@ -349,6 +493,78 @@ export const WithoutSearch: Story = {
   }
 }
 
+export const TriggerSearchFontList: Story = {
+  render: function TriggerSearchFontListExample() {
+    const [font, setFont] = useState('inter')
+    const selectedFont = fontOptions.find((option) => option.value === font)
+
+    return (
+      <div className="flex w-[360px] flex-col gap-4">
+        <Combobox
+          options={fontOptions}
+          value={font}
+          onChange={(val) => setFont(val as string)}
+          searchPlacement="trigger"
+          placeholder="Select font"
+          emptyText="No fonts found"
+          width={360}
+          renderOption={(option) => (
+            <div className="flex w-full items-center justify-between gap-3">
+              <div className="min-w-0">
+                <div className="truncate" style={{ fontFamily: option.fontFamily }}>
+                  {option.label}
+                </div>
+                <div className="truncate text-muted-foreground text-xs">{option.description}</div>
+              </div>
+              <span className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">{option.category}</span>
+            </div>
+          )}
+        />
+        <div className="rounded-md border bg-muted/40 px-3 py-2">
+          <div className="text-muted-foreground text-xs">Selected font</div>
+          <div className="mt-1 truncate text-sm" style={{ fontFamily: selectedFont?.fontFamily }}>
+            {selectedFont?.label}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export const CustomFilterOption: Story = {
+  render: function CustomFilterOptionExample() {
+    const [tool, setTool] = useState('')
+
+    return (
+      <Combobox
+        options={searchableToolOptions}
+        value={tool}
+        onChange={(val) => setTool(val as string)}
+        placeholder="Search tools"
+        searchPlaceholder="Search label, category, or keyword"
+        emptyText="No tools found"
+        width={320}
+        filterOption={(option, search) =>
+          [option.label, option.description, option.category, option.keywords]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase()
+            .includes(search.trim().toLowerCase())
+        }
+        renderOption={(option) => (
+          <div className="flex w-full items-center justify-between gap-3">
+            <div className="min-w-0">
+              <div className="truncate">{option.label}</div>
+              <div className="truncate text-muted-foreground text-xs">{option.description}</div>
+            </div>
+            <span className="rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">{option.category}</span>
+          </div>
+        )}
+      />
+    )
+  }
+}
+
 // 实际使用场景 - 综合展示
 export const RealWorldExamples: Story = {
   render: function RealWorldExample() {
diff --git a/packages/ui/stories/components/primitives/ContextMenu.stories.tsx b/packages/ui/stories/components/primitives/ContextMenu.stories.tsx
new file mode 100644
index 0000000000..87c18bcf44
--- /dev/null
+++ b/packages/ui/stories/components/primitives/ContextMenu.stories.tsx
@@ -0,0 +1,130 @@
+import {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Copy, Download, Pencil, Settings, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+
+const meta: Meta<typeof ContextMenu> = {
+  title: 'Components/Primitives/ContextMenu',
+  component: ContextMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Displays a menu when right-clicking a trigger area. Built on Radix UI Context Menu and styled with shadcn tokens.'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed bg-background-subtle text-sm text-muted-foreground">
+          Right click this area
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-48">
+        <ContextMenuItem>
+          <Pencil />
+          Rename
+          <ContextMenuShortcut>F2</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Copy />
+          Duplicate
+          <ContextMenuShortcut>⌘D</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>
+          <Download />
+          Export
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">
+          <Trash2 />
+          Delete
+          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+
+export const WithSubMenu: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed bg-background-subtle text-sm text-muted-foreground">
+          Right click for nested actions
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        <ContextMenuLabel>Provider</ContextMenuLabel>
+        <ContextMenuItem>
+          <Pencil />
+          Edit
+        </ContextMenuItem>
+        <ContextMenuSub>
+          <ContextMenuSubTrigger>
+            <Settings />
+            More actions
+          </ContextMenuSubTrigger>
+          <ContextMenuSubContent className="w-40">
+            <ContextMenuItem>Open settings</ContextMenuItem>
+            <ContextMenuItem>View logs</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem variant="destructive">Reset</ContextMenuItem>
+          </ContextMenuSubContent>
+        </ContextMenuSub>
+      </ContextMenuContent>
+    </ContextMenu>
+  )
+}
+
+export const CheckboxAndRadioItems: Story = {
+  render: function CheckboxAndRadioItemsExample() {
+    const [showBadge, setShowBadge] = useState(true)
+    const [density, setDensity] = useState('comfortable')
+
+    return (
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed bg-background-subtle text-sm text-muted-foreground">
+            Right click for selectable items
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-56">
+          <ContextMenuCheckboxItem checked={showBadge} onCheckedChange={setShowBadge}>
+            Show status badge
+          </ContextMenuCheckboxItem>
+          <ContextMenuSeparator />
+          <ContextMenuLabel inset>Density</ContextMenuLabel>
+          <ContextMenuRadioGroup value={density} onValueChange={setDensity}>
+            <ContextMenuRadioItem value="compact">Compact</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="comfortable">Comfortable</ContextMenuRadioItem>
+            <ContextMenuRadioItem value="spacious">Spacious</ContextMenuRadioItem>
+          </ContextMenuRadioGroup>
+        </ContextMenuContent>
+      </ContextMenu>
+    )
+  }
+}
diff --git a/packages/ui/stories/components/primitives/DescriptionSwitch.stories.tsx b/packages/ui/stories/components/primitives/DescriptionSwitch.stories.tsx
index 9587870e27..2709a6ab80 100644
--- a/packages/ui/stories/components/primitives/DescriptionSwitch.stories.tsx
+++ b/packages/ui/stories/components/primitives/DescriptionSwitch.stories.tsx
@@ -1,9 +1,8 @@
+import { DescriptionSwitch } from '@cherrystudio/ui/components/primitives/switch'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Eye, Lock, Moon, Shield, Wifi, Zap } from 'lucide-react'
 import { useState } from 'react'
 
-import { DescriptionSwitch } from '../../../src/components/primitives/switch'
-
 const meta: Meta<typeof DescriptionSwitch> = {
   title: 'Components/Primitives/DescriptionSwitch',
   component: DescriptionSwitch,
diff --git a/packages/ui/stories/components/primitives/InputGroup.stories.tsx b/packages/ui/stories/components/primitives/InputGroup.stories.tsx
index dd3c8d807e..049fea1181 100644
--- a/packages/ui/stories/components/primitives/InputGroup.stories.tsx
+++ b/packages/ui/stories/components/primitives/InputGroup.stories.tsx
@@ -1,3 +1,11 @@
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea
+} from '@cherrystudio/ui/components/primitives/input-group'
 import type { Meta, StoryObj } from '@storybook/react'
 import {
   AtSign,
@@ -19,15 +27,6 @@ import {
 } from 'lucide-react'
 import { useState } from 'react'
 
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea
-} from '../../../src/components/primitives/input-group'
-
 const meta: Meta<typeof InputGroup> = {
   title: 'Components/Primitives/InputGroup',
   component: InputGroup,
diff --git a/packages/ui/stories/components/primitives/Item.stories.tsx b/packages/ui/stories/components/primitives/Item.stories.tsx
new file mode 100644
index 0000000000..71fef56082
--- /dev/null
+++ b/packages/ui/stories/components/primitives/Item.stories.tsx
@@ -0,0 +1,212 @@
+import {
+  Badge,
+  Button,
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Bell, Check, ChevronRight, Cloud, Database, FileText, Settings, Shield } from 'lucide-react'
+
+const meta: Meta<typeof Item> = {
+  title: 'Components/Primitives/Item',
+  component: Item,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Displays structured list items with media, content, actions, headers, and footers. Based on shadcn/ui.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'outline', 'muted'],
+      description: 'The visual style variant of the item'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['default', 'sm'],
+      description: 'The size of the item'
+    },
+    asChild: {
+      control: { type: 'boolean' },
+      description: 'Render as a child element'
+    },
+    className: {
+      control: { type: 'text' },
+      description: 'Additional CSS classes'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Item className="w-[360px]">
+      <ItemMedia variant="icon">
+        <Settings />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>General Settings</ItemTitle>
+        <ItemDescription>Configure the default behavior and appearance of the application.</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button variant="ghost" size="icon-sm" aria-label="Open settings">
+          <ChevronRight />
+        </Button>
+      </ItemActions>
+    </Item>
+  )
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="grid w-[420px] gap-3">
+      <Item>
+        <ItemMedia variant="icon">
+          <FileText />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Default</ItemTitle>
+          <ItemDescription>A transparent item for subtle list layouts.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <Database />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Outline</ItemTitle>
+          <ItemDescription>A bordered item for grouped settings or selectable rows.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <Cloud />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Muted</ItemTitle>
+          <ItemDescription>A softened item for secondary cards or inactive states.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </div>
+  )
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="grid w-[420px] gap-3">
+      <Item size="sm" variant="outline">
+        <ItemMedia variant="icon">
+          <Bell />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Small item</ItemTitle>
+          <ItemDescription>Compact spacing for dense settings lists.</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <Bell />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Default item</ItemTitle>
+          <ItemDescription>Comfortable spacing for explanatory list rows.</ItemDescription>
+        </ItemContent>
+      </Item>
+    </div>
+  )
+}
+
+export const WithHeaderAndFooter: Story = {
+  render: () => (
+    <Item variant="outline" className="w-[420px]">
+      <ItemHeader>
+        <Badge variant="outline">Security</Badge>
+        <span className="text-muted-foreground text-xs">Updated today</span>
+      </ItemHeader>
+      <ItemMedia variant="icon">
+        <Shield />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Device verification</ItemTitle>
+        <ItemDescription>Require trusted devices before syncing sensitive data.</ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button variant="outline" size="sm">
+          Manage
+        </Button>
+      </ItemActions>
+      <ItemFooter>
+        <span className="text-muted-foreground text-xs">2 devices trusted</span>
+        <span className="flex items-center gap-1 text-success text-xs">
+          <Check size={12} />
+          Enabled
+        </span>
+      </ItemFooter>
+    </Item>
+  )
+}
+
+export const GroupedSettings: Story = {
+  render: () => (
+    <ItemGroup className="w-[420px] rounded-lg border border-border bg-background">
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <Cloud />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Cloud sync</ItemTitle>
+          <ItemDescription>Keep settings available across devices.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Badge>On</Badge>
+        </ItemActions>
+      </Item>
+      <ItemSeparator />
+      <Item size="sm">
+        <ItemMedia variant="icon">
+          <Database />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Local data</ItemTitle>
+          <ItemDescription>Manage caches, exports, and local backups.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="ghost" size="icon-sm" aria-label="Open local data">
+            <ChevronRight />
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  )
+}
+
+export const AsChild: Story = {
+  render: () => (
+    <Item asChild variant="outline" className="w-[360px] hover:bg-accent">
+      <a href="#" aria-label="Open documentation">
+        <ItemMedia variant="icon">
+          <FileText />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Documentation</ItemTitle>
+          <ItemDescription>Use asChild to render an item as a link.</ItemDescription>
+        </ItemContent>
+      </a>
+    </Item>
+  )
+}
diff --git a/packages/ui/stories/components/primitives/Kbd.stories.tsx b/packages/ui/stories/components/primitives/Kbd.stories.tsx
index 39d6d452bd..2256f0c90c 100644
--- a/packages/ui/stories/components/primitives/Kbd.stories.tsx
+++ b/packages/ui/stories/components/primitives/Kbd.stories.tsx
@@ -1,7 +1,7 @@
 import { Kbd, KbdGroup } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Command, Copy, Save, Search } from 'lucide-react'
-// import { Tooltip, TooltipContent, TooltipTrigger } from '../../../src/components/primitives/tooltip'
+// import { Tooltip, TooltipContent, TooltipTrigger } from '@cherrystudio/ui/components/primitives/tooltip'
 
 const meta: Meta<typeof Kbd> = {
   title: 'Components/Primitives/Kbd',
diff --git a/packages/ui/stories/components/primitives/SegmentedControl.stories.tsx b/packages/ui/stories/components/primitives/SegmentedControl.stories.tsx
new file mode 100644
index 0000000000..89bb7146db
--- /dev/null
+++ b/packages/ui/stories/components/primitives/SegmentedControl.stories.tsx
@@ -0,0 +1,210 @@
+import { SegmentedControl } from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Code, FileText, LayoutGrid, List, Monitor, Moon, Sun } from 'lucide-react'
+import { useState } from 'react'
+
+const meta: Meta<typeof SegmentedControl> = {
+  title: 'Components/Primitives/SegmentedControl',
+  component: SegmentedControl,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A pill-shaped segmented control for choosing exactly one option from a compact set. Useful for settings rows, view modes, and short enum choices.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: { type: 'text' },
+      description: 'The selected option value in controlled mode'
+    },
+    defaultValue: {
+      control: { type: 'text' },
+      description: 'The initially selected option value in uncontrolled mode'
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Whether the whole control is disabled'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'default'],
+      description: 'The visual size of each segment'
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'system',
+    options: [
+      { value: 'light', label: 'Light' },
+      { value: 'dark', label: 'Dark' },
+      { value: 'system', label: 'System' }
+    ]
+  }
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-5">
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">Small</p>
+        <SegmentedControl
+          size="sm"
+          defaultValue="left"
+          options={[
+            { value: 'left', label: 'Left' },
+            { value: 'right', label: 'Right' }
+          ]}
+        />
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">Default</p>
+        <SegmentedControl
+          defaultValue="grid"
+          options={[
+            { value: 'grid', label: 'Grid' },
+            { value: 'list', label: 'List' },
+            { value: 'compact', label: 'Compact' }
+          ]}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <SegmentedControl
+      defaultValue="system"
+      options={[
+        {
+          value: 'light',
+          label: (
+            <>
+              <Sun className="size-4" />
+              Light
+            </>
+          )
+        },
+        {
+          value: 'dark',
+          label: (
+            <>
+              <Moon className="size-4" />
+              Dark
+            </>
+          )
+        },
+        {
+          value: 'system',
+          label: (
+            <>
+              <Monitor className="size-4" />
+              System
+            </>
+          )
+        }
+      ]}
+    />
+  )
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-5">
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">Entire control disabled</p>
+        <SegmentedControl
+          disabled
+          defaultValue="grid"
+          options={[
+            { value: 'grid', label: 'Grid' },
+            { value: 'list', label: 'List' }
+          ]}
+        />
+      </div>
+      <div>
+        <p className="mb-2 text-sm text-muted-foreground">One option disabled</p>
+        <SegmentedControl
+          defaultValue="read"
+          options={[
+            { value: 'read', label: 'Read' },
+            { value: 'write', label: 'Write', disabled: true },
+            { value: 'admin', label: 'Admin' }
+          ]}
+        />
+      </div>
+    </div>
+  )
+}
+
+export const ViewMode: Story = {
+  render: () => (
+    <SegmentedControl
+      size="sm"
+      defaultValue="grid"
+      aria-label="View mode"
+      options={[
+        {
+          value: 'grid',
+          label: (
+            <>
+              <LayoutGrid className="size-4" />
+              Grid
+            </>
+          )
+        },
+        {
+          value: 'list',
+          label: (
+            <>
+              <List className="size-4" />
+              List
+            </>
+          )
+        },
+        {
+          value: 'details',
+          label: (
+            <>
+              <FileText className="size-4" />
+              Details
+            </>
+          )
+        }
+      ]}
+    />
+  )
+}
+
+export const Controlled: Story = {
+  render: function ControlledExample() {
+    const [value, setValue] = useState('preview')
+
+    return (
+      <div className="flex flex-col items-center gap-3">
+        <SegmentedControl
+          value={value}
+          onValueChange={setValue}
+          options={[
+            { value: 'preview', label: 'Preview' },
+            { value: 'code', label: 'Code' },
+            { value: 'split', label: 'Split' }
+          ]}
+        />
+        <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+          <Code className="size-4" />
+          Selected: {value}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/packages/ui/stories/components/primitives/Slider.stories.tsx b/packages/ui/stories/components/primitives/Slider.stories.tsx
index 5480f757e3..46ecf84301 100644
--- a/packages/ui/stories/components/primitives/Slider.stories.tsx
+++ b/packages/ui/stories/components/primitives/Slider.stories.tsx
@@ -1,8 +1,7 @@
+import { Slider } from '@cherrystudio/ui/components/primitives/slider'
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
-import { Slider } from '../../../src/components/primitives/slider'
-
 const meta: Meta<typeof Slider> = {
   title: 'Components/Primitives/Slider',
   component: Slider,
diff --git a/packages/ui/stories/components/primitives/Switch.stories.tsx b/packages/ui/stories/components/primitives/Switch.stories.tsx
index 86866ccb1f..8151fc0619 100644
--- a/packages/ui/stories/components/primitives/Switch.stories.tsx
+++ b/packages/ui/stories/components/primitives/Switch.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta<typeof Switch> = {
     docs: {
       description: {
         component:
-          'A switch component based on Radix UI Switch, allowing users to toggle between on/off states. Supports three sizes (sm, md, lg), loading states, and an enhanced DescriptionSwitch variant with label and description. Built with accessibility in mind.'
+          'A switch component based on Radix UI Switch, allowing users to toggle between on/off states. Supports four sizes (xs, sm, md, lg), loading states, and an enhanced DescriptionSwitch variant with label and description. Built with accessibility in mind.'
       }
     }
   },
@@ -27,7 +27,7 @@ const meta: Meta<typeof Switch> = {
     },
     size: {
       control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
       description: 'The size of the switch'
     },
     defaultChecked: {
@@ -171,6 +171,30 @@ export const Controlled: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="flex flex-col gap-6">
+      <div>
+        <p className="mb-3 text-sm text-muted-foreground">Extra small (xs)</p>
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <Switch id="size-xs-1" size="xs" />
+            <label htmlFor="size-xs-1" className="cursor-pointer text-sm">
+              Extra small switch
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch id="size-xs-2" size="xs" defaultChecked />
+            <label htmlFor="size-xs-2" className="cursor-pointer text-sm">
+              Extra small switch (on)
+            </label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch id="size-xs-3" size="xs" loading defaultChecked />
+            <label htmlFor="size-xs-3" className="cursor-pointer text-sm">
+              Extra small switch (loading)
+            </label>
+          </div>
+        </div>
+      </div>
+
       <div>
         <p className="mb-3 text-sm text-muted-foreground">Small (sm)</p>
         <div className="flex flex-col gap-2">
@@ -292,6 +316,7 @@ export const DescriptionSwitchPositions: Story = {
 export const DescriptionSwitchSizes: Story = {
   render: () => (
     <div className="flex w-96 flex-col gap-6">
+      <DescriptionSwitch label="Extra small switch" description="Dense table rows and compact controls" size="xs" />
       <DescriptionSwitch label="Small switch" description="Compact size for dense layouts" size="sm" />
       <DescriptionSwitch label="Medium switch" description="Default size for most use cases" size="md" defaultChecked />
       <DescriptionSwitch label="Large switch" description="Larger size for emphasis" size="lg" />
@@ -319,6 +344,10 @@ export const SizeComparison: Story = {
       <div className="flex flex-col gap-4">
         <p className="text-xs font-medium text-muted-foreground">Off</p>
         <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Switch id="compare-xs-1" size="xs" />
+            <span className="text-xs text-muted-foreground">xs</span>
+          </div>
           <div className="flex flex-col items-center gap-2">
             <Switch id="compare-sm-1" size="sm" />
             <span className="text-xs text-muted-foreground">sm</span>
@@ -337,6 +366,10 @@ export const SizeComparison: Story = {
       <div className="flex flex-col gap-4">
         <p className="text-xs font-medium text-muted-foreground">On</p>
         <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Switch id="compare-xs-2" size="xs" defaultChecked />
+            <span className="text-xs text-muted-foreground">xs</span>
+          </div>
           <div className="flex flex-col items-center gap-2">
             <Switch id="compare-sm-2" size="sm" defaultChecked />
             <span className="text-xs text-muted-foreground">sm</span>
@@ -355,6 +388,10 @@ export const SizeComparison: Story = {
       <div className="flex flex-col gap-4">
         <p className="text-xs font-medium text-muted-foreground">Loading</p>
         <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Switch id="compare-xs-3" size="xs" loading defaultChecked />
+            <span className="text-xs text-muted-foreground">xs</span>
+          </div>
           <div className="flex flex-col items-center gap-2">
             <Switch id="compare-sm-3" size="sm" loading defaultChecked />
             <span className="text-xs text-muted-foreground">sm</span>
diff --git a/packages/ui/stories/components/primitives/Textarea.stories.tsx b/packages/ui/stories/components/primitives/Textarea.stories.tsx
index d8110e0830..70554613cd 100644
--- a/packages/ui/stories/components/primitives/Textarea.stories.tsx
+++ b/packages/ui/stories/components/primitives/Textarea.stories.tsx
@@ -1,8 +1,7 @@
+import * as Textarea from '@cherrystudio/ui/components/primitives/textarea'
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
-import * as Textarea from '../../../src/components/primitives/textarea'
-
 const meta: Meta<typeof Textarea.Input> = {
   title: 'Components/Primitives/Textarea',
   component: Textarea.Input,
diff --git a/packages/ui/vitest.config.ts b/packages/ui/vitest.config.ts
index 9c13efaf00..10eb46e357 100644
--- a/packages/ui/vitest.config.ts
+++ b/packages/ui/vitest.config.ts
@@ -1,6 +1,13 @@
+import { resolve } from 'node:path'
+
 import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      '@cherrystudio/ui': resolve(__dirname, 'src')
+    }
+  },
   test: {
     globals: true,
     environment: 'node',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 999145839c..2e1faebcbc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -255,7 +255,7 @@ importers:
         version: 5.6.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@ant-design/v5-patch-for-react-19':
         specifier: ^1.0.3
-        version: 1.0.3(antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 1.0.3(antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(date-fns@4.1.0)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@anthropic-ai/sdk':
         specifier: ^0.41.0
         version: 0.41.0(encoding@0.1.13)
@@ -388,6 +388,9 @@ importers:
       '@hello-pangea/dnd':
         specifier: ^18.0.1
         version: 18.0.1(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@hookform/resolvers':
+        specifier: ^5.0.1
+        version: 5.2.2(react-hook-form@7.75.0(react@19.2.3))
       '@iconify-json/material-icon-theme':
         specifier: ^1.2.56
         version: 1.2.57
@@ -711,7 +714,7 @@ importers:
         version: 6.2.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       antd:
         specifier: 5.27.0
-        version: 5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(date-fns@4.1.0)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       archiver:
         specifier: ^7.0.1
         version: 7.0.1
@@ -1030,6 +1033,9 @@ importers:
       react-error-boundary:
         specifier: ^6.0.0
         version: 6.0.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.55.0
+        version: 7.75.0(react@19.2.3)
       react-hotkeys-hook:
         specifier: ^4.6.1
         version: 4.6.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -1487,6 +1493,9 @@ importers:
       '@dnd-kit/utilities':
         specifier: ^3.2.2
         version: 3.2.2(react@19.2.3)
+      '@hookform/resolvers':
+        specifier: ^5.0.0
+        version: 5.2.2(react-hook-form@7.75.0(react@19.2.3))
       '@radix-ui/primitive':
         specifier: ^1.1.3
         version: 1.1.3
@@ -1535,6 +1544,9 @@ importers:
       '@radix-ui/react-use-controllable-state':
         specifier: ^1.2.2
         version: 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@tanstack/react-table':
+        specifier: ^8.21.3
+        version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -1544,12 +1556,24 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       lucide-react:
         specifier: ^0.545.0
         version: 0.545.0(react@19.2.3)
+      radix-ui:
+        specifier: ^1.4.3
+        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-day-picker:
+        specifier: ^9.14.0
+        version: 9.14.0(react@19.2.3)
       react-dropzone:
         specifier: ^14.3.8
         version: 14.4.1(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.55.0
+        version: 7.75.0(react@19.2.3)
       tailwind-merge:
         specifier: ^2.5.5
         version: 2.6.1
@@ -2544,6 +2568,9 @@ packages:
   '@dabh/diagnostics@2.0.8':
     resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}
 
+  '@date-fns/tz@1.4.1':
+    resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
+
   '@develar/schema-utils@2.6.5':
     resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==}
     engines: {node: '>= 8.9.0'}
@@ -2977,6 +3004,11 @@ packages:
     peerDependencies:
       hono: ^4
 
+  '@hookform/resolvers@5.2.2':
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -4487,6 +4519,19 @@ packages:
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/react-accessible-icon@1.1.7':
+    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-accordion@1.2.12':
     resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
     peerDependencies:
@@ -4500,6 +4545,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-alert-dialog@1.1.15':
+    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -4513,6 +4571,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-avatar@1.1.11':
     resolution: {integrity: sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q==}
     peerDependencies:
@@ -4640,6 +4724,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-guards@1.1.3':
     resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
     peerDependencies:
@@ -4662,6 +4759,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-form@0.1.8':
+    resolution: {integrity: sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.15':
+    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -4671,6 +4794,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-label@2.1.8':
     resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
     peerDependencies:
@@ -4697,6 +4833,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menubar@1.1.16':
+    resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.14':
+    resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.8':
+    resolution: {integrity: sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.3':
+    resolution: {integrity: sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.15':
     resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
     peerDependencies:
@@ -4775,6 +4963,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.7':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-radio-group@1.3.8':
     resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
     peerDependencies:
@@ -4801,6 +5002,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-select@2.2.6':
     resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
     peerDependencies:
@@ -4814,6 +5028,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-separator@1.1.8':
     resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
     peerDependencies:
@@ -4884,6 +5111,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toast@1.2.15':
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.11':
+    resolution: {integrity: sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.2.8':
     resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
     peerDependencies:
@@ -6200,6 +6479,10 @@ packages:
     resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
     engines: {node: '>=14.16'}
 
+  '@tabby_ai/hijri-converter@1.0.5':
+    resolution: {integrity: sha512-r5bClKrcIusDoo049dSL8CawnHR6mRdDwhlQuIgZRNty68q0x8k3Lf1BtPAMxRf/GgnHBnIO4ujd3+GQdLWzxQ==}
+    engines: {node: '>=16.0.0'}
+
   '@tailwindcss/node@4.1.18':
     resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
 
@@ -6315,6 +6598,13 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
   '@tanstack/react-virtual@3.13.14':
     resolution: {integrity: sha512-WG0d7mBD54eA7dgA3+sO5csS0B49QKqM6Gy5Rf31+Oq/LTKROQSao9m2N/vz1IqVragOKU5t5k1LAcqh/DfTxw==}
     peerDependencies:
@@ -6359,6 +6649,10 @@ packages:
   '@tanstack/store@0.9.3':
     resolution: {integrity: sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==}
 
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@tanstack/virtual-core@3.13.14':
     resolution: {integrity: sha512-b5Uvd8J2dc7ICeX9SRb/wkCxWk7pUwN214eEPAQsqrsktSKTCmyLxOQWSMgogBByXclZeAdgZ3k4o0fIYUIBqQ==}
 
@@ -8603,6 +8897,12 @@ packages:
   dataloader@1.4.0:
     resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==}
 
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   dayjs@1.11.19:
     resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
@@ -12427,6 +12727,19 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
+  radix-ui@1.4.3:
+    resolution: {integrity: sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   raf-schd@4.0.3:
     resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
 
@@ -12680,6 +12993,12 @@ packages:
   react-base16-styling@0.6.0:
     resolution: {integrity: sha512-yvh/7CArceR/jNATXOKDlvTnPKPmGZz7zsenQ3jUwLzHkNUR0CvY3yGYJbWJ/nnxsL8Sgmt5cO3/SILVuPO6TQ==}
 
+  react-day-picker@9.14.0:
+    resolution: {integrity: sha512-tBaoDWjPwe0M5pGrum4H0SR6Lyk+BO9oHnp9JbKpGKW2mlraNPgP9BMfsg5pWpwrssARmeqk7YBl2oXutZTaHA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
   react-docgen-typescript@2.4.0:
     resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
     peerDependencies:
@@ -12706,6 +13025,12 @@ packages:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
 
+  react-hook-form@7.75.0:
+    resolution: {integrity: sha512-Ovv94H+0p3sJ7B9B5QxPuCP1u8V/cHuVGyH55cSwodYDtoJwK+fqk3vjfIgSX59I2U/bU4z0nRJ9HMLpNiWEmw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-hotkeys-hook@4.6.2:
     resolution: {integrity: sha512-FmP+ZriY3EG59Ug/lxNfrObCnW9xQShgk7Nb83+CkpfkcCpfS95ydv+E9JuXA5cp8KtskU7LGlIARpkc92X22Q==}
     peerDependencies:
@@ -15250,9 +15575,9 @@ snapshots:
       resize-observer-polyfill: 1.5.1
       throttle-debounce: 5.0.2
 
-  '@ant-design/v5-patch-for-react-19@1.0.3(antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  '@ant-design/v5-patch-for-react-19@1.0.3(antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(date-fns@4.1.0)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      antd: 5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      antd: 5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(date-fns@4.1.0)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
@@ -16713,6 +17038,8 @@ snapshots:
       enabled: 2.0.0
       kuler: 2.0.0
 
+  '@date-fns/tz@1.4.1': {}
+
   '@develar/schema-utils@2.6.5':
     dependencies:
       ajv: 6.12.6
@@ -17229,6 +17556,11 @@ snapshots:
     dependencies:
       hono: 4.12.2
 
+  '@hookform/resolvers@5.2.2(react-hook-form@7.75.0(react@19.2.3))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.75.0(react@19.2.3)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -18422,6 +18754,15 @@ snapshots:
 
   '@radix-ui/primitive@1.1.3': {}
 
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -18439,6 +18780,20 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -18448,6 +18803,28 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-avatar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-context': 1.1.3(@types/react@19.2.7)(react@19.2.3)
@@ -18578,6 +18955,21 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       react: 19.2.3
@@ -18595,6 +18987,37 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-id@1.1.1(@types/react@19.2.7)(react@19.2.3)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
@@ -18602,6 +19025,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.7
 
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -18637,6 +19069,82 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -18716,6 +19224,16 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -18751,6 +19269,23 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/number': 1.1.1
@@ -18780,6 +19315,15 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -18853,6 +19397,67 @@ snapshots:
       '@types/react': 19.2.7
       '@types/react-dom': 19.2.3(@types/react@19.2.7)
 
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -20055,6 +20660,8 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
+  '@tabby_ai/hijri-converter@1.0.5': {}
+
   '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
@@ -20148,6 +20755,12 @@ snapshots:
       react-dom: 19.2.3(react@19.2.3)
       use-sync-external-store: 1.6.0(react@19.2.3)
 
+  '@tanstack/react-table@8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   '@tanstack/react-virtual@3.13.14(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@tanstack/virtual-core': 3.13.14
@@ -20211,6 +20824,8 @@ snapshots:
 
   '@tanstack/store@0.9.3': {}
 
+  '@tanstack/table-core@8.21.3': {}
+
   '@tanstack/virtual-core@3.13.14': {}
 
   '@tanstack/virtual-file-routes@1.161.7': {}
@@ -21910,7 +22525,7 @@ snapshots:
 
   ansis@4.2.0: {}
 
-  antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  antd@5.27.0(patch_hash=cdc383bd0d9b9fe0df2ce7b1f1d4ead200012b7f9517d9257b4ea0a5b324e243)(date-fns@4.1.0)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@ant-design/colors': 7.2.1
       '@ant-design/cssinjs': 1.23.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -21942,7 +22557,7 @@ snapshots:
       rc-motion: 2.9.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rc-notification: 5.6.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rc-pagination: 5.1.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      rc-picker: 4.11.3(dayjs@1.11.19)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      rc-picker: 4.11.3(date-fns@4.1.0)(dayjs@1.11.19)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rc-progress: 4.0.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rc-rate: 2.13.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       rc-resize-observer: 1.4.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -23222,6 +23837,10 @@ snapshots:
 
   dataloader@1.4.0: {}
 
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
   dayjs@1.11.19: {}
 
   debounce-fn@4.0.0:
@@ -27726,6 +28345,69 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
+  radix-ui@1.4.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.7)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.7
+      '@types/react-dom': 19.2.3(@types/react@19.2.7)
+
   raf-schd@4.0.3: {}
 
   range-parser@1.2.1: {}
@@ -27887,7 +28569,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  rc-picker@4.11.3(dayjs@1.11.19)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  rc-picker@4.11.3(date-fns@4.1.0)(dayjs@1.11.19)(luxon@3.7.2)(moment@2.30.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.28.4
       '@rc-component/trigger': 2.3.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -27898,6 +28580,7 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
     optionalDependencies:
+      date-fns: 4.1.0
       dayjs: 1.11.19
       luxon: 3.7.2
       moment: 2.30.1
@@ -28084,6 +28767,14 @@ snapshots:
       lodash.flow: 3.5.0
       pure-color: 1.3.0
 
+  react-day-picker@9.14.0(react@19.2.3):
+    dependencies:
+      '@date-fns/tz': 1.4.1
+      '@tabby_ai/hijri-converter': 1.0.5
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 19.2.3
+
   react-docgen-typescript@2.4.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -28120,6 +28811,10 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  react-hook-form@7.75.0(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+
   react-hotkeys-hook@4.6.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       react: 19.2.3
diff --git a/resources/cherry-studio/releases.html b/resources/cherry-studio/releases.html
index 13edca06f9..3e31d9ebf5 100644
--- a/resources/cherry-studio/releases.html
+++ b/resources/cherry-studio/releases.html
@@ -1,208 +1,202 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Github Releases Timeline</title>
-    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
-    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.5.10/dist/typography.min.css"></script>
-  </head>
 
-  <body id="app">
-    <div :class="isDark ? 'dark-bg' : 'bg'" class="min-h-screen">
-      <div class="mx-auto max-w-3xl px-4 py-12">
-        <h1 class="mb-8 text-3xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900'">Release Timeline</h1>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Github Releases Timeline</title>
+  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
+  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/typography@0.5.10/dist/typography.min.css"></script>
+</head>
 
-        <!-- Loading状态 -->
-        <div v-if="loading" class="py-8 text-center">
-          <div
-            class="inline-block h-8 w-8 animate-spin rounded-full border-4"
-            :class="isDark ? 'border-gray-700 border-t-blue-500' : 'border-gray-300 border-t-blue-500'"></div>
-        </div>
+<body id="app">
+  <div :class="isDark ? 'dark-bg' : 'bg'" class="min-h-screen">
+    <div class="mx-auto max-w-3xl px-4 py-12">
+      <h1 class="mb-8 text-3xl font-bold" :class="isDark ? 'text-white' : 'text-gray-900'">Release Timeline</h1>
 
-        <!-- Error 状态 -->
-        <div v-else-if="error" class="py-8 text-center text-red-500">{{ error }}</div>
+      <!-- Loading状态 -->
+      <div v-if="loading" class="py-8 text-center">
+        <div class="inline-block h-8 w-8 animate-spin rounded-full border-4"
+          :class="isDark ? 'border-gray-700 border-t-blue-500' : 'border-gray-300 border-t-blue-500'"></div>
+      </div>
 
-        <!-- Release 列表 -->
-        <div v-else class="space-y-8">
-          <div
-            v-for="release in releases"
-            :key="release.id"
-            class="relative pl-8"
-            :class="isDark ? 'border-l-2 border-gray-700' : 'border-l-2 border-gray-200'">
-            <div class="absolute top-0 -left-2 h-4 w-4 rounded-full bg-green-500"></div>
-            <div
-              class="rounded-lg p-6 shadow-sm transition-shadow"
-              :class="isDark ? 'bg-black hover:shadow-md hover:shadow-black' : 'bg-white hover:shadow-md'">
-              <div class="mb-4 flex items-start justify-between">
-                <div>
-                  <h2 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900'">
-                    {{ release.name || release.tag_name }}
-                  </h2>
-                  <p class="mt-1 text-sm" :class="isDark ? 'text-gray-400' : 'text-gray-500'">
-                    {{ formatDate(release.published_at) }}
-                  </p>
-                </div>
-                <span
-                  class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium"
-                  :class="isDark ? 'bg-green-900 text-green-200' : 'bg-green-100 text-green-800'">
-                  {{ release.tag_name }}
-                </span>
+      <!-- Error 状态 -->
+      <div v-else-if="error" class="py-8 text-center text-red-500">{{ error }}</div>
+
+      <!-- Release 列表 -->
+      <div v-else class="space-y-8">
+        <div v-for="release in releases" :key="release.id" class="relative pl-8"
+          :class="isDark ? 'border-l-2 border-gray-700' : 'border-l-2 border-gray-200'">
+          <div class="absolute top-0 -left-2 h-4 w-4 rounded-full bg-green-500"></div>
+          <div class="rounded-lg p-6 shadow-sm transition-shadow"
+            :class="isDark ? 'bg-black hover:shadow-md hover:shadow-black' : 'bg-white hover:shadow-md'">
+            <div class="mb-4 flex items-start justify-between">
+              <div>
+                <h2 class="text-xl font-semibold" :class="isDark ? 'text-white' : 'text-gray-900'">
+                  {{ release.name || release.tag_name }}
+                </h2>
+                <p class="mt-1 text-sm" :class="isDark ? 'text-gray-400' : 'text-gray-500'">
+                  {{ formatDate(release.published_at) }}
+                </p>
               </div>
-              <div
-                class="prose"
-                :class="isDark ? 'text-gray-300 dark-prose' : 'text-gray-600'"
-                v-html="renderMarkdown(release.body)"></div>
+              <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-medium"
+                :class="isDark ? 'bg-green-900 text-green-200' : 'bg-green-100 text-green-800'">
+                {{ release.tag_name }}
+              </span>
             </div>
+            <div class="prose" :class="isDark ? 'text-gray-300 dark-prose' : 'text-gray-600'"
+              v-html="renderMarkdown(release.body)"></div>
           </div>
         </div>
       </div>
     </div>
+  </div>
 
-    <script>
-      const md = window.markdownit({
-        breaks: true,
-        linkify: true
-      })
+  <script>
+    const md = window.markdownit({
+      breaks: true,
+      linkify: true
+    })
 
-      const { createApp } = Vue
+    const { createApp } = Vue
 
-      createApp({
-        data() {
-          return {
-            releases: [],
-            loading: true,
-            error: null,
-            isDark: false
-          }
-        },
-        methods: {
-          async fetchReleases() {
-            try {
-              this.loading = true
-              this.error = null
-              const response = await fetch('https://api.github.com/repos/kangfenmao/cherry-studio/releases')
-              if (!response.ok) {
-                throw new Error('Failed to fetch releases')
-              }
-              this.releases = await response.json()
-            } catch (err) {
-              this.error = 'Error loading releases: ' + err.message
-            } finally {
-              this.loading = false
-            }
-          },
-          formatDate(dateString) {
-            return new Date(dateString).toLocaleDateString('en-US', {
-              year: 'numeric',
-              month: 'long',
-              day: 'numeric'
-            })
-          },
-          renderMarkdown(content) {
-            if (!content) return ''
-            return md.render(content)
-          },
-          initTheme() {
-            // 从 URL 参数获取主题设置
-            const url = new URL(window.location.href)
-            const theme = url.searchParams.get('theme')
-            this.isDark = theme === 'dark'
-          }
-        },
-        mounted() {
-          this.initTheme()
-          this.fetchReleases()
+    createApp({
+      data() {
+        return {
+          releases: [],
+          loading: true,
+          error: null,
+          isDark: false
         }
-      }).mount('#app')
-    </script>
-
-    <style>
-      /* 基础的 Markdown 样式 */
-      .prose {
-        line-height: 1.6;
+      },
+      methods: {
+        async fetchReleases() {
+          try {
+            this.loading = true
+            this.error = null
+            const response = await fetch('https://api.github.com/repos/CherryHQ/cherry-studio/releases')
+            if (!response.ok) {
+              throw new Error('Failed to fetch releases')
+            }
+            this.releases = await response.json()
+          } catch (err) {
+            this.error = 'Error loading releases: ' + err.message
+          } finally {
+            this.loading = false
+          }
+        },
+        formatDate(dateString) {
+          return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+          })
+        },
+        renderMarkdown(content) {
+          if (!content) return ''
+          return md.render(content)
+        },
+        initTheme() {
+          // 从 URL 参数获取主题设置
+          const url = new URL(window.location.href)
+          const theme = url.searchParams.get('theme')
+          this.isDark = theme === 'dark'
+        }
+      },
+      mounted() {
+        this.initTheme()
+        this.fetchReleases()
       }
+    }).mount('#app')
+  </script>
 
-      .prose h1 {
-        font-size: 1.5em;
-        margin: 1em 0;
-      }
+  <style>
+    /* 基础的 Markdown 样式 */
+    .prose {
+      line-height: 1.6;
+    }
 
-      .prose h2 {
-        font-size: 1.3em;
-        margin: 0.8em 0;
-      }
+    .prose h1 {
+      font-size: 1.5em;
+      margin: 1em 0;
+    }
 
-      .prose h3 {
-        font-size: 1.1em;
-        margin: 0.6em 0;
-      }
+    .prose h2 {
+      font-size: 1.3em;
+      margin: 0.8em 0;
+    }
 
-      .prose ul {
-        list-style-type: disc;
-        margin-left: 1.5em;
-        margin-bottom: 1em;
-      }
+    .prose h3 {
+      font-size: 1.1em;
+      margin: 0.6em 0;
+    }
 
-      .prose ol {
-        list-style-type: decimal;
-        margin-left: 1.5em;
-        margin-bottom: 1em;
-      }
+    .prose ul {
+      list-style-type: disc;
+      margin-left: 1.5em;
+      margin-bottom: 1em;
+    }
 
-      .prose code {
-        padding: 0.2em 0.4em;
-        border-radius: 0.2em;
-        font-size: 0.9em;
-      }
+    .prose ol {
+      list-style-type: decimal;
+      margin-left: 1.5em;
+      margin-bottom: 1em;
+    }
 
-      .dark .prose code {
-        background-color: #1f2937;
-      }
+    .prose code {
+      padding: 0.2em 0.4em;
+      border-radius: 0.2em;
+      font-size: 0.9em;
+    }
 
-      .prose code {
-        background-color: #f3f4f6;
-      }
+    .dark .prose code {
+      background-color: #1f2937;
+    }
 
-      .prose pre code {
-        display: block;
-        padding: 1em;
-        overflow-x: auto;
-      }
+    .prose code {
+      background-color: #f3f4f6;
+    }
 
-      .prose a {
-        color: #3b82f6;
-        text-decoration: underline;
-      }
+    .prose pre code {
+      display: block;
+      padding: 1em;
+      overflow-x: auto;
+    }
 
-      .dark .prose a {
-        color: #60a5fa;
-      }
+    .prose a {
+      color: #3b82f6;
+      text-decoration: underline;
+    }
 
-      .prose blockquote {
-        border-left: 4px solid #e5e7eb;
-        padding-left: 1em;
-        margin: 1em 0;
-      }
+    .dark .prose a {
+      color: #60a5fa;
+    }
 
-      .dark .prose blockquote {
-        border-left-color: #374151;
-        color: #9ca3af;
-      }
+    .prose blockquote {
+      border-left: 4px solid #e5e7eb;
+      padding-left: 1em;
+      margin: 1em 0;
+    }
 
-      .dark .prose {
-        color: #e5e7eb;
-      }
+    .dark .prose blockquote {
+      border-left-color: #374151;
+      color: #9ca3af;
+    }
 
-      .dark-bg {
-        background-color: #151515;
-      }
+    .dark .prose {
+      color: #e5e7eb;
+    }
 
-      .bg {
-        background-color: #f2f2f2;
-      }
-    </style>
-  </body>
-</html>
+    .dark-bg {
+      background-color: #151515;
+    }
+
+    .bg {
+      background-color: #f2f2f2;
+    }
+  </style>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/scripts/cloudflare-worker.js b/scripts/cloudflare-worker.js
index 1dc259c2f0..fc36cc5fc7 100644
--- a/scripts/cloudflare-worker.js
+++ b/scripts/cloudflare-worker.js
@@ -349,7 +349,7 @@ async function getCachedRelease(env) {
 async function checkNewRelease(env) {
   try {
     // 获取 GitHub 最新版本
-    const githubResponse = await fetch('https://api.github.com/repos/kangfenmao/cherry-studio/releases/latest', {
+    const githubResponse = await fetch('https://api.github.com/repos/CherryHQ/cherry-studio/releases/latest', {
       headers: { 'User-Agent': 'CloudflareWorker' }
     })
 
diff --git a/src/main/core/application/serviceRegistry.ts b/src/main/core/application/serviceRegistry.ts
index 38c4a0068f..22c8669d26 100644
--- a/src/main/core/application/serviceRegistry.ts
+++ b/src/main/core/application/serviceRegistry.ts
@@ -25,6 +25,7 @@ import { PythonService } from '@main/services/PythonService'
 import { QuickAssistantService } from '@main/services/QuickAssistantService'
 import { SearchService } from '@main/services/SearchService'
 import { SelectionService } from '@main/services/selection/SelectionService'
+import { SettingsWindowService } from '@main/services/SettingsWindowService'
 import { ShortcutService } from '@main/services/ShortcutService'
 import { SpanCacheService } from '@main/services/SpanCacheService'
 import { SubWindowService } from '@main/services/SubWindowService'
@@ -71,6 +72,7 @@ export const services = {
   LanTransferService,
   PowerMonitorService,
   SelectionService,
+  SettingsWindowService,
   ShortcutService,
   ThemeService,
   SpanCacheService,
diff --git a/src/main/core/window/types.ts b/src/main/core/window/types.ts
index fc4996c84e..579ca8df91 100644
--- a/src/main/core/window/types.ts
+++ b/src/main/core/window/types.ts
@@ -7,6 +7,7 @@ import type { BrowserWindow, BrowserWindowConstructorOptions, VisibleOnAllWorksp
  */
 export enum WindowType {
   Main = 'main',
+  Settings = 'settings',
   QuickAssistant = 'quickAssistant',
   SubWindow = 'subWindow',
   SelectionToolbar = 'selectionToolbar',
diff --git a/src/main/core/window/windowRegistry.ts b/src/main/core/window/windowRegistry.ts
index 43d9e83fc6..ccf86ea537 100644
--- a/src/main/core/window/windowRegistry.ts
+++ b/src/main/core/window/windowRegistry.ts
@@ -93,6 +93,36 @@ export const WINDOW_TYPE_REGISTRY: Partial<Record<WindowType, WindowTypeMetadata
     }
   },
 
+  // Settings window — singleton popup surface for application settings.
+  // The renderer consumes initData as the target /settings/* route, so open()
+  // can focus an existing settings window and navigate it in-place.
+  [WindowType.Settings]: {
+    type: WindowType.Settings,
+    lifecycle: 'singleton',
+    singletonConfig: {
+      retentionTime: 300
+    },
+    htmlPath: 'settings.html',
+    windowOptions: {
+      ...DEFAULT_WINDOW_CONFIG,
+      width: 960,
+      height: 680,
+      minWidth: 760,
+      minHeight: 520,
+      autoHideMenuBar: true,
+      transparent: false,
+      vibrancy: 'sidebar',
+      visualEffectState: 'active',
+      webPreferences: {
+        contextIsolation: true,
+        nodeIntegration: false,
+        sandbox: false,
+        webSecurity: false,
+        webviewTag: true
+      }
+    }
+  },
+
   // Detached tab window — multi-instance, one per user-detached Tab.
   // Placed adjacent to Main because a SubWindow is logically a Main spin-off
   // (a Tab dragged out of Main becomes its own BrowserWindow here; drag back
diff --git a/src/main/data/db/seeding/seeders/__tests__/preferenceSeeder.test.ts b/src/main/data/db/seeding/seeders/__tests__/preferenceSeeder.test.ts
index e715bc3f83..dee0120d52 100644
--- a/src/main/data/db/seeding/seeders/__tests__/preferenceSeeder.test.ts
+++ b/src/main/data/db/seeding/seeders/__tests__/preferenceSeeder.test.ts
@@ -65,4 +65,22 @@ describe('PreferenceSeeder', () => {
     const after = (await dbh.db.select().from(preferenceTable)).length
     expect(after).toBe(before)
   })
+
+  it('should delete obsolete default preferences', async () => {
+    await dbh.db.insert(preferenceTable).values({
+      scope: 'default',
+      key: 'app.settings.open_target',
+      value: 'app'
+    })
+
+    const seed = new PreferenceSeeder()
+    await seed.run(dbh.db)
+
+    const rows = await dbh.db
+      .select()
+      .from(preferenceTable)
+      .where(and(eq(preferenceTable.scope, 'default'), eq(preferenceTable.key, 'app.settings.open_target')))
+
+    expect(rows).toHaveLength(0)
+  })
 })
diff --git a/src/main/data/db/seeding/seeders/preferenceSeeder.ts b/src/main/data/db/seeding/seeders/preferenceSeeder.ts
index 9cb3f5bd98..2d4a60f0a7 100644
--- a/src/main/data/db/seeding/seeders/preferenceSeeder.ts
+++ b/src/main/data/db/seeding/seeders/preferenceSeeder.ts
@@ -1,9 +1,12 @@
 import { preferenceTable } from '@data/db/schemas/preference'
 import { DefaultPreferences } from '@shared/data/preference/preferenceSchemas'
+import { and, eq } from 'drizzle-orm'
 
 import type { DbType, ISeeder } from '../../types'
 import { hashObject } from '../hashObject'
 
+const OBSOLETE_DEFAULT_PREFERENCE_KEYS = ['app.settings.open_target'] as const
+
 export class PreferenceSeeder implements ISeeder {
   readonly name = 'preference'
   readonly description = 'Insert default preference values'
@@ -14,6 +17,12 @@ export class PreferenceSeeder implements ISeeder {
   }
 
   async run(db: DbType): Promise<void> {
+    for (const obsoleteKey of OBSOLETE_DEFAULT_PREFERENCE_KEYS) {
+      await db
+        .delete(preferenceTable)
+        .where(and(eq(preferenceTable.scope, 'default'), eq(preferenceTable.key, obsoleteKey)))
+    }
+
     const preferences = await db.select().from(preferenceTable)
 
     // Convert existing preferences to a Map for quick lookup
diff --git a/src/main/services/AppMenuService.ts b/src/main/services/AppMenuService.ts
index f97aa182a3..673e42a7b6 100644
--- a/src/main/services/AppMenuService.ts
+++ b/src/main/services/AppMenuService.ts
@@ -4,7 +4,6 @@ import { WindowType } from '@main/core/window/types'
 import { getAppLanguage, locales } from '@main/utils/language'
 import { handleZoomFactor } from '@main/utils/zoom'
 import type { PreferenceShortcutType } from '@shared/data/preference/preferenceTypes'
-import { IpcChannel } from '@shared/IpcChannel'
 import { findShortcutDefinition } from '@shared/shortcuts/definitions'
 import type { ShortcutPreferenceKey } from '@shared/shortcuts/types'
 import { resolveShortcutPreference } from '@shared/shortcuts/utils'
@@ -16,6 +15,7 @@ const zoomShortcutKeys: ShortcutPreferenceKey[] = [
   'shortcut.general.zoom_out',
   'shortcut.general.zoom_reset'
 ]
+const menuShortcutKeys: ShortcutPreferenceKey[] = ['shortcut.general.show_settings', ...zoomShortcutKeys]
 
 const getShortcutAccelerator = (key: ShortcutPreferenceKey): string | undefined => {
   const definition = findShortcutDefinition(key)
@@ -44,7 +44,7 @@ export class AppMenuService extends BaseService {
     const preferenceService = application.get('PreferenceService')
     this.registerDisposable(preferenceService.subscribeChange('app.language', () => this.setupApplicationMenu()))
 
-    for (const key of zoomShortcutKeys) {
+    for (const key of menuShortcutKeys) {
       this.registerDisposable(preferenceService.subscribeChange(key, () => this.setupApplicationMenu()))
     }
 
@@ -55,6 +55,7 @@ export class AppMenuService extends BaseService {
     const locale = locales[getAppLanguage()]
     const { appMenu } = locale.translation
 
+    const settingsAccelerator = getShortcutAccelerator('shortcut.general.show_settings')
     const zoomInAccelerator = getShortcutAccelerator('shortcut.general.zoom_in')
     const zoomOutAccelerator = getShortcutAccelerator('shortcut.general.zoom_out')
     const zoomResetAccelerator = getShortcutAccelerator('shortcut.general.zoom_reset')
@@ -66,8 +67,14 @@ export class AppMenuService extends BaseService {
           {
             label: appMenu.about + ' ' + app.name,
             click: () => {
-              application.get('MainWindowService').showMainWindow()
-              application.get('WindowManager').broadcastToType(WindowType.Main, IpcChannel.MainWindow_NavigateToAbout)
+              application.get('SettingsWindowService').open('/settings/about')
+            }
+          },
+          {
+            label: locale.translation.settings.title,
+            accelerator: settingsAccelerator,
+            click: () => {
+              application.get('SettingsWindowService').open('/settings/provider')
             }
           },
           { type: 'separator' },
diff --git a/src/main/services/MainWindowService.ts b/src/main/services/MainWindowService.ts
index 52b683201d..7032bdf309 100644
--- a/src/main/services/MainWindowService.ts
+++ b/src/main/services/MainWindowService.ts
@@ -41,7 +41,18 @@ export class MainWindowService extends BaseService {
   constructor() {
     super()
     this._onMainWindowCreated = this.registerDisposable(new Emitter<BrowserWindow>())
-    this.onMainWindowCreated = this._onMainWindowCreated.event
+    this.onMainWindowCreated = (listener) => {
+      const disposable = this._onMainWindowCreated.event(listener)
+      if (this.mainWindow && !this.mainWindow.isDestroyed()) {
+        try {
+          listener(this.mainWindow)
+        } catch (error) {
+          // Keep replay semantics aligned with Emitter.fire(): one listener must not break service init.
+          logger.error('Failed to replay main window listener', error as Error)
+        }
+      }
+      return disposable
+    }
   }
 
   protected async onInit() {
@@ -588,16 +599,12 @@ export class MainWindowService extends BaseService {
 
     if (mainWindow && !mainWindow.isDestroyed() && mainWindow.isVisible()) {
       if (mainWindow.isFocused()) {
-        // if tray is enabled, hide the main window, else do nothing
-        if (application.get('PreferenceService').get('app.tray.on_close')) {
-          // Same pattern as the close handler: tell WM to stop counting Main
-          // toward Dock visibility BEFORE hiding, so the Dock coordinates with
-          // whatever else is alive (e.g. a SubWindow) rather than blindly hiding.
-          if (isMac) {
-            application.get('WindowManager').behavior.setMacShowInDockByType(WindowType.Main, false)
-          }
-          mainWindow.hide()
+        // Same pattern as the close handler when the user opted into tray-close:
+        // tell WM to stop counting Main toward Dock visibility BEFORE hiding.
+        if (isMac && application.get('PreferenceService').get('app.tray.on_close')) {
+          application.get('WindowManager').behavior.setMacShowInDockByType(WindowType.Main, false)
         }
+        mainWindow.hide()
       } else {
         mainWindow.focus()
       }
diff --git a/src/main/services/SettingsWindowService.ts b/src/main/services/SettingsWindowService.ts
new file mode 100644
index 0000000000..06adfa626f
--- /dev/null
+++ b/src/main/services/SettingsWindowService.ts
@@ -0,0 +1,117 @@
+import { application } from '@application'
+import { isMac } from '@main/constant'
+import { BaseService, DependsOn, Injectable, Phase, ServicePhase } from '@main/core/lifecycle'
+import { type WindowOptions, WindowType } from '@main/core/window/types'
+import type { SettingsPath } from '@shared/data/types/settingsPath'
+import { normalizeSettingsPath } from '@shared/data/types/settingsPath'
+import { IpcChannel } from '@shared/IpcChannel'
+import type { BrowserWindow } from 'electron'
+import { nativeTheme } from 'electron'
+
+export function createSettingsWindowOptions(isMacPlatform: boolean, dark: boolean): Partial<WindowOptions> {
+  return {
+    darkTheme: dark,
+    ...(!isMacPlatform && { backgroundColor: dark ? '#181818' : '#FFFFFF' })
+  }
+}
+
+@Injectable('SettingsWindowService')
+@ServicePhase(Phase.WhenReady)
+@DependsOn(['WindowManager'])
+export class SettingsWindowService extends BaseService {
+  private readonly settingsWindowCleanups = new Map<string, () => void>()
+
+  protected async onInit() {
+    const wm = application.get('WindowManager')
+
+    this.registerDisposable(
+      wm.onWindowCreatedByType(WindowType.Settings, ({ id, window }) => {
+        this.setupSettingsWindow(id, window)
+      })
+    )
+    this.registerDisposable(() => {
+      for (const cleanup of this.settingsWindowCleanups.values()) {
+        cleanup()
+      }
+      this.settingsWindowCleanups.clear()
+    })
+
+    this.registerIpcHandlers()
+  }
+
+  private registerIpcHandlers(): void {
+    this.ipcHandle(IpcChannel.SettingsWindow_Open, (_event, path?: unknown) => {
+      return this.open(this.normalizePath(path))
+    })
+  }
+
+  public open(path?: SettingsPath): string {
+    const wm = application.get('WindowManager')
+    const options = this.getWindowOptions()
+    const windowId = wm.open(WindowType.Settings, {
+      initData: this.normalizePath(path),
+      options
+    })
+    this.syncSettingsWindowBounds(windowId, options)
+    return windowId
+  }
+
+  private setupSettingsWindow(windowId: string, window: BrowserWindow): void {
+    window.setTitle('')
+    const webContents = window.webContents
+
+    const onPageTitleUpdated = (event: Electron.Event) => {
+      event.preventDefault()
+      window.setTitle('')
+    }
+    let cleaned = false
+    const cleanup = () => {
+      if (cleaned) return
+      cleaned = true
+      window.off('closed', cleanup)
+      if (!webContents.isDestroyed()) {
+        webContents.off('page-title-updated', onPageTitleUpdated)
+      }
+      this.settingsWindowCleanups.delete(windowId)
+    }
+
+    window.once('closed', cleanup)
+    webContents.on('page-title-updated', onPageTitleUpdated)
+    this.settingsWindowCleanups.set(windowId, cleanup)
+  }
+
+  private getWindowOptions(): Partial<WindowOptions> {
+    return {
+      ...createSettingsWindowOptions(isMac, nativeTheme.shouldUseDarkColors),
+      ...this.getMainWindowBoundsOptions()
+    }
+  }
+
+  private getMainWindowBoundsOptions(): Pick<WindowOptions, 'x' | 'y' | 'width' | 'height'> | undefined {
+    const wm = application.get('WindowManager')
+    const mainWindowInfo = wm.getWindowsByType(WindowType.Main)[0]
+    if (!mainWindowInfo) return undefined
+
+    const mainWindow = wm.getWindow(mainWindowInfo.id)
+    if (!mainWindow || mainWindow.isDestroyed()) return undefined
+
+    const { x, y, width, height } = mainWindow.getBounds()
+    if (width <= 0 || height <= 0) return undefined
+
+    return { x, y, width, height }
+  }
+
+  private syncSettingsWindowBounds(windowId: string, options: Partial<WindowOptions>): void {
+    const { x, y, width, height } = options
+    if (x === undefined || y === undefined || !width || !height) return
+
+    const window = application.get('WindowManager').getWindow(windowId)
+    if (!window || window.isDestroyed()) return
+
+    window.setBounds({ x, y, width, height })
+  }
+
+  private normalizePath(path: unknown): SettingsPath {
+    return normalizeSettingsPath(path)
+  }
+}
diff --git a/src/main/services/ShortcutService.ts b/src/main/services/ShortcutService.ts
index d85599aaab..b9b668e8d4 100644
--- a/src/main/services/ShortcutService.ts
+++ b/src/main/services/ShortcutService.ts
@@ -1,5 +1,6 @@
 import { application } from '@application'
 import { loggerService } from '@logger'
+import { isMac } from '@main/constant'
 import { BaseService, DependsOn, Injectable, Phase, ServicePhase } from '@main/core/lifecycle'
 import { WindowType } from '@main/core/window/types'
 import { handleZoomFactor } from '@main/utils/zoom'
@@ -20,12 +21,13 @@ const toAccelerator = (keys: string[]): string => keys.join('+')
 const relevantDefinitions = SHORTCUT_DEFINITIONS.filter(
   (d) =>
     d.scope !== 'renderer' &&
+    !(isMac && d.key === 'shortcut.general.show_settings') &&
     (!d.supportedPlatforms || d.supportedPlatforms.includes(process.platform as SupportedPlatform))
 )
 
 @Injectable('ShortcutService')
 @ServicePhase(Phase.WhenReady)
-@DependsOn(['MainWindowService', 'SelectionService'])
+@DependsOn(['MainWindowService', 'SelectionService', 'SettingsWindowService'])
 export class ShortcutService extends BaseService {
   private mainWindow: BrowserWindow | null = null
   private handlers = new Map<ShortcutPreferenceKey, ShortcutHandler>()
@@ -53,8 +55,7 @@ export class ShortcutService extends BaseService {
     })
 
     this.handlers.set('shortcut.general.show_settings', () => {
-      application.get('MainWindowService').showMainWindow()
-      application.get('WindowManager').broadcastToType(WindowType.Main, IpcChannel.MainWindow_NavigateToSettings)
+      application.get('SettingsWindowService').open('/settings/provider')
     })
 
     this.handlers.set('shortcut.feature.quick_assistant.toggle_window', () => {
@@ -153,8 +154,8 @@ export class ShortcutService extends BaseService {
       this.registerDisposable(() => window.off('closed', onClosed))
     }
 
-    if (!window.isDestroyed() && window.isFocused()) {
-      this.registerShortcuts(window, false)
+    if (!window.isDestroyed()) {
+      this.registerShortcuts(window, !window.isFocused())
     }
   }
 
diff --git a/src/main/services/__tests__/AppMenuService.test.ts b/src/main/services/__tests__/AppMenuService.test.ts
new file mode 100644
index 0000000000..df9baa4805
--- /dev/null
+++ b/src/main/services/__tests__/AppMenuService.test.ts
@@ -0,0 +1,137 @@
+import type { MenuItemConstructorOptions } from 'electron'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { applicationMock, menuMock, shellMock, appMock, preferenceServiceMock, settingsWindowServiceMock } = vi.hoisted(
+  () => {
+    const preferenceServiceMock = {
+      get: vi.fn(),
+      subscribeChange: vi.fn(() => ({ dispose: vi.fn() }))
+    }
+    const settingsWindowServiceMock = {
+      open: vi.fn()
+    }
+
+    return {
+      preferenceServiceMock,
+      settingsWindowServiceMock,
+      applicationMock: {
+        get: vi.fn((name: string) => {
+          if (name === 'PreferenceService') return preferenceServiceMock
+          if (name === 'SettingsWindowService') return settingsWindowServiceMock
+          if (name === 'WindowManager') {
+            return { getAllWindows: vi.fn(() => []) }
+          }
+          return undefined
+        })
+      },
+      menuMock: {
+        buildFromTemplate: vi.fn((template: MenuItemConstructorOptions[]) => ({ template })),
+        setApplicationMenu: vi.fn()
+      },
+      shellMock: {
+        openExternal: vi.fn()
+      },
+      appMock: {
+        name: 'Cherry Studio',
+        getLocale: vi.fn(() => 'en-US')
+      }
+    }
+  }
+)
+
+vi.mock('@application', () => ({
+  application: applicationMock
+}))
+
+vi.mock('@main/core/lifecycle', () => {
+  class MockBaseService {
+    protected readonly _disposables: Array<{ dispose: () => void } | (() => void)> = []
+
+    protected registerDisposable<T extends { dispose: () => void } | (() => void)>(disposable: T): T {
+      this._disposables.push(disposable)
+      return disposable
+    }
+  }
+
+  return {
+    BaseService: MockBaseService,
+    Conditional: () => (target: unknown) => target,
+    Injectable: () => (target: unknown) => target,
+    onPlatform: () => () => true,
+    ServicePhase: () => (target: unknown) => target,
+    Phase: { WhenReady: 'whenReady' }
+  }
+})
+
+vi.mock('@main/utils/zoom', () => ({
+  handleZoomFactor: vi.fn()
+}))
+
+vi.mock('electron', () => ({
+  app: appMock,
+  Menu: menuMock,
+  shell: shellMock
+}))
+
+import { handleZoomFactor } from '@main/utils/zoom'
+
+import { AppMenuService } from '../AppMenuService'
+
+const latestTemplate = () => menuMock.buildFromTemplate.mock.calls.at(-1)?.[0] as MenuItemConstructorOptions[]
+
+describe('AppMenuService', () => {
+  let service: AppMenuService
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    preferenceServiceMock.get.mockReturnValue(undefined)
+    service = new AppMenuService()
+  })
+
+  it('registers the settings menu accelerator through the native app menu', async () => {
+    await (service as any).onInit()
+
+    const appSubmenu = latestTemplate()[0].submenu as MenuItemConstructorOptions[]
+    const settingsItem = appSubmenu.find((item) => item.label === 'Settings')
+
+    expect(settingsItem).toMatchObject({
+      accelerator: 'CommandOrControl+,'
+    })
+
+    settingsItem?.click?.(undefined as never, undefined as never, undefined as never)
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith('/settings/provider')
+  })
+
+  it('opens the About settings route from the native app menu', async () => {
+    await (service as any).onInit()
+
+    const appSubmenu = latestTemplate()[0].submenu as MenuItemConstructorOptions[]
+    const aboutItem = appSubmenu.find((item) => String(item.label).startsWith('About '))
+
+    aboutItem?.click?.(undefined as never, undefined as never, undefined as never)
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith('/settings/about')
+  })
+
+  it('uses default zoom accelerators and wires them to zoom handling', async () => {
+    await (service as any).onInit()
+
+    const viewSubmenu = latestTemplate()[3].submenu as MenuItemConstructorOptions[]
+    const zoomInItem = viewSubmenu.find((item) => item.accelerator === 'CommandOrControl+=')
+    const zoomOutItem = viewSubmenu.find((item) => item.accelerator === 'CommandOrControl+-')
+    const zoomResetItem = viewSubmenu.find((item) => item.accelerator === 'CommandOrControl+0')
+
+    expect(zoomInItem).toBeTruthy()
+    expect(zoomOutItem).toBeTruthy()
+    expect(zoomResetItem).toBeTruthy()
+
+    zoomInItem?.click?.(undefined as never, undefined as never, undefined as never)
+    zoomOutItem?.click?.(undefined as never, undefined as never, undefined as never)
+    zoomResetItem?.click?.(undefined as never, undefined as never, undefined as never)
+
+    expect(handleZoomFactor).toHaveBeenCalledWith([], 0.1)
+    expect(handleZoomFactor).toHaveBeenCalledWith([], -0.1)
+    expect(handleZoomFactor).toHaveBeenCalledWith([], 0, true)
+  })
+})
diff --git a/src/main/services/__tests__/MainWindowService.test.ts b/src/main/services/__tests__/MainWindowService.test.ts
index 278ff291ed..6ee6408108 100644
--- a/src/main/services/__tests__/MainWindowService.test.ts
+++ b/src/main/services/__tests__/MainWindowService.test.ts
@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 // Hoisted state lets individual tests mutate platform flags / preferences without
 // re-mocking modules. The mock factories below read these via getters, preserving
 // live-binding semantics so each test sees the current value.
-const { platformState, prefValues, applicationMock, windowManagerMock } = vi.hoisted(() => {
+const { platformState, prefValues, applicationMock, windowManagerMock, loggerMock } = vi.hoisted(() => {
   const platformState = { isMac: false, isWin: false, isLinux: false, isDev: false }
   const prefValues: Record<string, unknown> = {
     'app.tray.enabled': false,
@@ -26,6 +26,11 @@ const { platformState, prefValues, applicationMock, windowManagerMock } = vi.hoi
     onWindowDestroyedByType: vi.fn(() => vi.fn()),
     open: vi.fn(() => 'mock-window-id')
   }
+  const loggerMock = {
+    error: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn()
+  }
   const applicationMock = {
     isQuitting: false,
     quit: vi.fn(),
@@ -41,7 +46,7 @@ const { platformState, prefValues, applicationMock, windowManagerMock } = vi.hoi
     }),
     getPath: vi.fn((key: string, filename?: string) => (filename ? `/mock/${key}/${filename}` : `/mock/${key}`))
   }
-  return { platformState, prefValues, applicationMock, windowManagerMock }
+  return { platformState, prefValues, applicationMock, windowManagerMock, loggerMock }
 })
 
 vi.mock('@main/constant', () => ({
@@ -61,7 +66,7 @@ vi.mock('@main/constant', () => ({
 
 vi.mock('@logger', () => ({
   loggerService: {
-    withContext: () => ({ info: vi.fn(), warn: vi.fn(), error: vi.fn() })
+    withContext: () => loggerMock
   }
 }))
 
@@ -107,19 +112,36 @@ vi.mock('@main/core/lifecycle', async () => {
   return { ...actual, BaseService: StubBase }
 })
 
-// Import after mocks
 import { MainWindowService } from '../MainWindowService'
 
 interface MockBrowserWindow extends EventEmitter {
+  isDestroyed: ReturnType<typeof vi.fn>
   isFullScreen: ReturnType<typeof vi.fn>
+  isMinimized: ReturnType<typeof vi.fn>
+  isVisible: ReturnType<typeof vi.fn>
+  isFocused: ReturnType<typeof vi.fn>
   hide: ReturnType<typeof vi.fn>
+  show: ReturnType<typeof vi.fn>
+  focus: ReturnType<typeof vi.fn>
+  restore: ReturnType<typeof vi.fn>
+  setVisibleOnAllWorkspaces: ReturnType<typeof vi.fn>
+  setFullScreen: ReturnType<typeof vi.fn>
   webContents: { reload: ReturnType<typeof vi.fn>; on: ReturnType<typeof vi.fn> }
 }
 
 function createMockWindow(): MockBrowserWindow {
   const win = new EventEmitter() as MockBrowserWindow
+  win.isDestroyed = vi.fn(() => false)
   win.isFullScreen = vi.fn(() => false)
+  win.isMinimized = vi.fn(() => false)
+  win.isVisible = vi.fn(() => true)
+  win.isFocused = vi.fn(() => true)
   win.hide = vi.fn()
+  win.show = vi.fn()
+  win.focus = vi.fn()
+  win.restore = vi.fn()
+  win.setVisibleOnAllWorkspaces = vi.fn()
+  win.setFullScreen = vi.fn()
   win.webContents = {
     reload: vi.fn(),
     // capture render-process-gone listener for crash-recovery tests
@@ -164,6 +186,7 @@ describe('MainWindowService', () => {
     applicationMock.quit.mockReset()
     applicationMock.forceExit.mockReset()
     windowManagerMock.behavior.setMacShowInDockByType.mockReset()
+    loggerMock.error.mockReset()
 
     svc = new MainWindowService()
     win = createMockWindow()
@@ -173,6 +196,28 @@ describe('MainWindowService', () => {
     vi.clearAllMocks()
   })
 
+  it('replays the existing main window to late subscribers', () => {
+    ;(svc as any).mainWindow = win
+    const listener = vi.fn()
+
+    svc.onMainWindowCreated(listener)
+
+    expect(listener).toHaveBeenCalledWith(win)
+  })
+
+  it('logs late subscriber replay failures without throwing', () => {
+    ;(svc as any).mainWindow = win
+    const error = new Error('listener failed')
+    const listener = vi.fn(() => {
+      throw error
+    })
+
+    expect(() => svc.onMainWindowCreated(listener)).not.toThrow()
+
+    expect(listener).toHaveBeenCalledWith(win)
+    expect(loggerMock.error).toHaveBeenCalledWith('Failed to replay main window listener', error)
+  })
+
   describe('close handler', () => {
     it('does nothing when application.isQuitting is true (lets native close proceed)', () => {
       applicationMock.isQuitting = true
@@ -289,6 +334,39 @@ describe('MainWindowService', () => {
     })
   })
 
+  describe('toggleMainWindow', () => {
+    it('hides a focused visible main window even when tray-close is disabled', () => {
+      ;(svc as any).mainWindow = win
+      prefValues['app.tray.on_close'] = false
+
+      svc.toggleMainWindow()
+
+      expect(win.hide).toHaveBeenCalledTimes(1)
+      expect(windowManagerMock.behavior.setMacShowInDockByType).not.toHaveBeenCalled()
+    })
+
+    it('focuses a visible unfocused main window instead of hiding it', () => {
+      ;(svc as any).mainWindow = win
+      win.isFocused.mockReturnValue(false)
+
+      svc.toggleMainWindow()
+
+      expect(win.focus).toHaveBeenCalledTimes(1)
+      expect(win.hide).not.toHaveBeenCalled()
+    })
+
+    it('keeps Dock suppression when hiding on macOS with tray-close enabled', () => {
+      platformState.isMac = true
+      prefValues['app.tray.on_close'] = true
+      ;(svc as any).mainWindow = win
+
+      svc.toggleMainWindow()
+
+      expect(windowManagerMock.behavior.setMacShowInDockByType).toHaveBeenCalledWith('main', false)
+      expect(win.hide).toHaveBeenCalledTimes(1)
+    })
+  })
+
   describe('crash recovery', () => {
     it('reloads webContents on first crash', () => {
       attachCrashMonitor(svc, win)
diff --git a/src/main/services/__tests__/SettingsWindowService.test.ts b/src/main/services/__tests__/SettingsWindowService.test.ts
new file mode 100644
index 0000000000..ffe7b7dd8c
--- /dev/null
+++ b/src/main/services/__tests__/SettingsWindowService.test.ts
@@ -0,0 +1,236 @@
+import { EventEmitter } from 'events'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { applicationMock, windowManagerMock } = vi.hoisted(() => {
+  const windowManagerMock = {
+    open: vi.fn<(type: string, args?: { initData?: unknown; options?: unknown }) => string>(() => 'settings-window-id'),
+    getWindow: vi.fn<(id: string) => unknown>(() => undefined),
+    getWindowsByType: vi.fn<(type: string) => unknown[]>(() => []),
+    getWindowIdByWebContents: vi.fn<(sender: unknown) => string | null>(() => null),
+    close: vi.fn<(id: string) => void>(),
+    onWindowCreatedByType: vi.fn(() => ({ dispose: vi.fn() })),
+    onWindowDestroyedByType: vi.fn(() => ({ dispose: vi.fn() }))
+  }
+  const applicationMock = {
+    get: vi.fn((name: string) => {
+      if (name === 'WindowManager') return windowManagerMock
+      throw new Error(`unexpected service: ${name}`)
+    })
+  }
+  return { applicationMock, windowManagerMock }
+})
+
+vi.mock('@application', () => ({ application: applicationMock }))
+
+vi.mock('electron', () => ({
+  nativeTheme: {
+    shouldUseDarkColors: false
+  }
+}))
+
+vi.mock('@main/core/lifecycle', async () => {
+  const actual = (await vi.importActual('@main/core/lifecycle')) as Record<string, unknown>
+  class StubBase {
+    protected ipcHandle = vi.fn()
+    protected registerDisposable = vi.fn(<T>(disposable: T) => disposable)
+  }
+  return { ...actual, BaseService: StubBase }
+})
+
+import { WindowType } from '@main/core/window/types'
+import { IpcChannel } from '@shared/IpcChannel'
+
+import { createSettingsWindowOptions, SettingsWindowService } from '../SettingsWindowService'
+
+interface MockWebContents extends EventEmitter {
+  send: ReturnType<typeof vi.fn>
+  isDestroyed: ReturnType<typeof vi.fn>
+}
+
+interface MockBrowserWindow extends EventEmitter {
+  webContents: MockWebContents
+  setTitle: ReturnType<typeof vi.fn>
+  getBounds: ReturnType<typeof vi.fn>
+  setBounds: ReturnType<typeof vi.fn>
+  isDestroyed: ReturnType<typeof vi.fn>
+  isMinimized: ReturnType<typeof vi.fn>
+  isVisible: ReturnType<typeof vi.fn>
+  restore: ReturnType<typeof vi.fn>
+  show: ReturnType<typeof vi.fn>
+  focus: ReturnType<typeof vi.fn>
+}
+
+function createMockWindow(): MockBrowserWindow {
+  const window = new EventEmitter() as MockBrowserWindow
+  window.webContents = new EventEmitter() as MockWebContents
+  window.webContents.send = vi.fn()
+  window.webContents.isDestroyed = vi.fn(() => false)
+  window.setTitle = vi.fn()
+  window.getBounds = vi.fn(() => ({ x: 0, y: 0, width: 1280, height: 800 }))
+  window.setBounds = vi.fn()
+  window.isDestroyed = vi.fn(() => false)
+  window.isMinimized = vi.fn(() => false)
+  window.isVisible = vi.fn(() => false)
+  window.restore = vi.fn()
+  window.show = vi.fn()
+  window.focus = vi.fn()
+  return window
+}
+
+function getCreatedListener() {
+  const call = windowManagerMock.onWindowCreatedByType.mock.calls.at(-1)
+  if (!call) throw new Error('onWindowCreatedByType was not registered')
+  return (call as unknown as [WindowType, (managed: { id: string; window: MockBrowserWindow }) => void])[1]
+}
+
+function getIpcHandleHandler(service: SettingsWindowService, channel: string) {
+  const call = (service as any).ipcHandle.mock.calls.find(
+    ([registeredChannel]: [string]) => registeredChannel === channel
+  )
+  if (!call) throw new Error(`ipcHandle handler not registered for channel: ${channel}`)
+  return call[1]
+}
+
+function mockManagedWindows({
+  mainWindow,
+  settingsWindow
+}: {
+  mainWindow: MockBrowserWindow
+  settingsWindow?: MockBrowserWindow
+}) {
+  windowManagerMock.getWindowsByType.mockImplementation((type: string) => {
+    if (type === WindowType.Main) return [{ id: 'main-window-id' }]
+    if (type === WindowType.Settings && settingsWindow) return [{ id: 'settings-window-id' }]
+    return []
+  })
+  windowManagerMock.getWindow.mockImplementation((id: string) => {
+    if (id === 'main-window-id') return mainWindow
+    if (id === 'settings-window-id') return settingsWindow
+    return undefined
+  })
+}
+
+describe('SettingsWindowService', () => {
+  let service: SettingsWindowService
+
+  beforeEach(async () => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+
+    windowManagerMock.open.mockReset().mockReturnValue('settings-window-id')
+    windowManagerMock.getWindow.mockReset().mockReturnValue(undefined)
+    windowManagerMock.getWindowsByType.mockReset().mockReturnValue([])
+    windowManagerMock.getWindowIdByWebContents.mockReset().mockReturnValue(null)
+    windowManagerMock.close.mockReset()
+    windowManagerMock.onWindowCreatedByType.mockReset().mockReturnValue({ dispose: vi.fn() })
+    windowManagerMock.onWindowDestroyedByType.mockReset().mockReturnValue({ dispose: vi.fn() })
+
+    service = new SettingsWindowService()
+    await (service as any).onInit()
+  })
+
+  it('registers settings IPC and opens the settings window through the service', () => {
+    const handler = getIpcHandleHandler(service, IpcChannel.SettingsWindow_Open)
+    handler({}, '/settings/about')
+
+    expect(windowManagerMock.open).toHaveBeenCalledWith(
+      WindowType.Settings,
+      expect.objectContaining({ initData: '/settings/about' })
+    )
+    expect(windowManagerMock.getWindow).not.toHaveBeenCalled()
+  })
+
+  it('tracks lifecycle disposables for window subscriptions and settings window cleanup', () => {
+    expect((service as any).registerDisposable).toHaveBeenCalledWith(
+      windowManagerMock.onWindowCreatedByType.mock.results[0].value
+    )
+    expect((service as any).registerDisposable).toHaveBeenCalledWith(expect.any(Function))
+  })
+
+  it('normalizes non-settings paths to the provider settings page', () => {
+    const handler = getIpcHandleHandler(service, IpcChannel.SettingsWindow_Open)
+    handler({}, '/agents')
+
+    expect(windowManagerMock.open).toHaveBeenCalledWith(
+      WindowType.Settings,
+      expect.objectContaining({ initData: '/settings/provider' })
+    )
+  })
+
+  it('opens the standalone settings window over the current main window bounds', () => {
+    const mainWindow = createMockWindow()
+    const settingsWindow = createMockWindow()
+    mainWindow.getBounds.mockReturnValue({ x: 20, y: 40, width: 1440, height: 900 })
+    mockManagedWindows({ mainWindow, settingsWindow })
+
+    service.open('/settings/about')
+
+    expect(windowManagerMock.open).toHaveBeenCalledWith(
+      WindowType.Settings,
+      expect.objectContaining({
+        options: expect.objectContaining({
+          x: 20,
+          y: 40,
+          width: 1440,
+          height: 900
+        })
+      })
+    )
+    expect(settingsWindow.setBounds).toHaveBeenCalledWith({ x: 20, y: 40, width: 1440, height: 900 })
+  })
+
+  it('keeps the native title empty even when the page title changes', () => {
+    const window = createMockWindow()
+    const event = { preventDefault: vi.fn() }
+
+    getCreatedListener()({ id: 'settings-window-id', window })
+    window.webContents.emit('page-title-updated', event)
+
+    expect(window.setTitle).toHaveBeenCalledWith('')
+    expect(event.preventDefault).toHaveBeenCalledOnce()
+  })
+
+  it('removes settings window listeners when the window closes', () => {
+    const window = createMockWindow()
+    const webContents = window.webContents
+    const event = { preventDefault: vi.fn() }
+
+    getCreatedListener()({ id: 'settings-window-id', window })
+    window.emit('closed')
+    webContents.emit('page-title-updated', event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(window.setTitle).toHaveBeenCalledOnce()
+  })
+
+  it('does not read BrowserWindow.webContents during closed cleanup', () => {
+    const window = createMockWindow()
+    const webContents = window.webContents
+
+    getCreatedListener()({ id: 'settings-window-id', window })
+    Object.defineProperty(window, 'webContents', {
+      configurable: true,
+      get: () => {
+        throw new TypeError('Object has been destroyed')
+      }
+    })
+
+    expect(() => window.emit('closed')).not.toThrow()
+    webContents.emit('page-title-updated', { preventDefault: vi.fn() })
+
+    expect(window.setTitle).toHaveBeenCalledOnce()
+  })
+
+  it('uses platform-specific settings window options', () => {
+    expect(createSettingsWindowOptions(true, true)).toEqual({ darkTheme: true })
+    expect(createSettingsWindowOptions(true, false)).toEqual({ darkTheme: false })
+    expect(createSettingsWindowOptions(false, true)).toEqual({
+      darkTheme: true,
+      backgroundColor: '#181818'
+    })
+    expect(createSettingsWindowOptions(false, false)).toEqual({
+      darkTheme: false,
+      backgroundColor: '#FFFFFF'
+    })
+  })
+})
diff --git a/src/main/services/__tests__/ShortcutService.test.ts b/src/main/services/__tests__/ShortcutService.test.ts
index e1e980a111..dadafb0fc9 100644
--- a/src/main/services/__tests__/ShortcutService.test.ts
+++ b/src/main/services/__tests__/ShortcutService.test.ts
@@ -16,28 +16,38 @@ vi.mock('@data/PreferenceService', async () => {
   return MockMainPreferenceServiceExport
 })
 
-const { windowServiceMock, windowManagerMock, selectionServiceMock, quickAssistantServiceMock, globalShortcutMock } =
-  vi.hoisted(() => ({
-    windowServiceMock: {
-      onMainWindowCreated: vi.fn(),
-      showMainWindow: vi.fn(),
-      toggleMainWindow: vi.fn()
-    },
-    windowManagerMock: {
-      broadcastToType: vi.fn()
-    },
-    selectionServiceMock: {
-      toggleEnabled: vi.fn(),
-      processSelectTextByShortcut: vi.fn()
-    },
-    quickAssistantServiceMock: {
-      toggleQuickAssistant: vi.fn()
-    },
-    globalShortcutMock: {
-      register: vi.fn(),
-      unregister: vi.fn()
-    }
-  }))
+const {
+  windowServiceMock,
+  windowManagerMock,
+  selectionServiceMock,
+  settingsWindowServiceMock,
+  quickAssistantServiceMock,
+  globalShortcutMock
+} = vi.hoisted(() => ({
+  windowServiceMock: {
+    onMainWindowCreated: vi.fn(),
+    showMainWindow: vi.fn(),
+    toggleMainWindow: vi.fn()
+  },
+  windowManagerMock: {
+    open: vi.fn(),
+    broadcastToType: vi.fn()
+  },
+  selectionServiceMock: {
+    toggleEnabled: vi.fn(),
+    processSelectTextByShortcut: vi.fn()
+  },
+  settingsWindowServiceMock: {
+    open: vi.fn()
+  },
+  quickAssistantServiceMock: {
+    toggleQuickAssistant: vi.fn()
+  },
+  globalShortcutMock: {
+    register: vi.fn(),
+    unregister: vi.fn()
+  }
+}))
 
 vi.mock('@application', async () => {
   const { mockApplicationFactory } = await import('@test-mocks/main/application')
@@ -45,6 +55,7 @@ vi.mock('@application', async () => {
     MainWindowService: windowServiceMock,
     WindowManager: windowManagerMock,
     SelectionService: selectionServiceMock,
+    SettingsWindowService: settingsWindowServiceMock,
     QuickAssistantService: quickAssistantServiceMock
   } as any)
 })
@@ -84,6 +95,7 @@ import { MockMainPreferenceServiceUtils } from '@test-mocks/main/PreferenceServi
 import { ShortcutService } from '../ShortcutService'
 
 const supportsSelectionShortcuts = ['darwin', 'win32'].includes(process.platform)
+const settingsShortcutHandledByNativeMenu = process.platform === 'darwin'
 
 class MockBrowserWindow {
   private readonly events = new EventEmitter()
@@ -163,23 +175,62 @@ describe('ShortcutService', () => {
   it('registers focused window shortcuts including shortcut variants', async () => {
     await (service as any).onInit()
 
-    expect(globalShortcutMock.register).toHaveBeenCalledWith('CommandOrControl+,', expect.any(Function))
+    if (settingsShortcutHandledByNativeMenu) {
+      expect(globalShortcutMock.register).not.toHaveBeenCalledWith('CommandOrControl+,', expect.any(Function))
+    } else {
+      expect(globalShortcutMock.register).toHaveBeenCalledWith('CommandOrControl+,', expect.any(Function))
+    }
     expect(globalShortcutMock.register).toHaveBeenCalledWith('CommandOrControl+=', expect.any(Function))
     expect(globalShortcutMock.register).toHaveBeenCalledWith('CommandOrControl+numadd', expect.any(Function))
   })
 
+  it('registers global shortcuts immediately for an unfocused main window', async () => {
+    MockMainPreferenceServiceUtils.setPreferenceValue('shortcut.general.show_main_window', {
+      binding: ['CommandOrControl', 'M'],
+      enabled: true
+    })
+    mainWindow.setFocused(false)
+
+    await (service as any).onInit()
+
+    expect(globalShortcutMock.register).toHaveBeenCalledWith('CommandOrControl+M', expect.any(Function))
+    expect(globalShortcutMock.register).not.toHaveBeenCalledWith('CommandOrControl+=', expect.any(Function))
+
+    const showMainRegistration = globalShortcutMock.register.mock.calls.find(
+      ([accelerator]) => accelerator === 'CommandOrControl+M'
+    )
+    const showMainHandler = showMainRegistration?.[1] as (() => void) | undefined
+    showMainHandler?.()
+
+    expect(windowServiceMock.toggleMainWindow).toHaveBeenCalledTimes(1)
+  })
+
+  it('opens the settings window through SettingsWindowService', async () => {
+    await (service as any).onInit()
+
+    const handler = (service as any).handlers.get('shortcut.general.show_settings') as (() => void) | undefined
+    handler?.()
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith('/settings/provider')
+    expect(windowServiceMock.showMainWindow).not.toHaveBeenCalled()
+    expect(windowManagerMock.broadcastToType).not.toHaveBeenCalledWith(
+      WindowType.Main,
+      IpcChannel.MainWindow_NavigateToSettings
+    )
+  })
+
   it('re-registers only the changed accelerator when shortcut binding changes', async () => {
     await (service as any).onInit()
     globalShortcutMock.register.mockClear()
     globalShortcutMock.unregister.mockClear()
 
-    MockMainPreferenceServiceUtils.setPreferenceValue('shortcut.general.show_settings', {
-      binding: ['Alt', ','],
+    MockMainPreferenceServiceUtils.setPreferenceValue('shortcut.general.zoom_in', {
+      binding: ['Alt', '='],
       enabled: true
     })
 
-    expect(globalShortcutMock.unregister).toHaveBeenCalledWith('CommandOrControl+,')
-    expect(globalShortcutMock.register).toHaveBeenCalledWith('Alt+,', expect.any(Function))
+    expect(globalShortcutMock.unregister).toHaveBeenCalledWith('CommandOrControl+=')
+    expect(globalShortcutMock.register).toHaveBeenCalledWith('Alt+=', expect.any(Function))
     expect(globalShortcutMock.register).not.toHaveBeenCalledWith('CommandOrControl+=', expect.any(Function))
   })
 
@@ -256,7 +307,7 @@ describe('ShortcutService', () => {
   })
 
   it('notifies the renderer when a shortcut cannot be registered', async () => {
-    globalShortcutMock.register.mockImplementation((accelerator: string) => accelerator !== 'CommandOrControl+,')
+    globalShortcutMock.register.mockImplementation((accelerator: string) => accelerator !== 'CommandOrControl+0')
 
     await (service as any).onInit()
 
@@ -264,15 +315,15 @@ describe('ShortcutService', () => {
       WindowType.Main,
       IpcChannel.Shortcut_RegistrationConflict,
       {
-        key: 'shortcut.general.show_settings',
-        accelerator: 'CommandOrControl+,',
+        key: 'shortcut.general.zoom_reset',
+        accelerator: 'CommandOrControl+0',
         hasConflict: true
       }
     )
   })
 
   it('does not notify repeatedly for the same shortcut conflict', async () => {
-    globalShortcutMock.register.mockImplementation((accelerator: string) => accelerator !== 'CommandOrControl+,')
+    globalShortcutMock.register.mockImplementation((accelerator: string) => accelerator !== 'CommandOrControl+0')
 
     await (service as any).onInit()
     windowManagerMock.broadcastToType.mockClear()
@@ -283,7 +334,7 @@ describe('ShortcutService', () => {
       WindowType.Main,
       IpcChannel.Shortcut_RegistrationConflict,
       expect.objectContaining({
-        key: 'shortcut.general.show_settings',
+        key: 'shortcut.general.zoom_reset',
         hasConflict: true
       })
     )
diff --git a/src/main/services/protocol/ProtocolService.ts b/src/main/services/protocol/ProtocolService.ts
index 1f30c0157c..dadb61cb88 100644
--- a/src/main/services/protocol/ProtocolService.ts
+++ b/src/main/services/protocol/ProtocolService.ts
@@ -72,25 +72,31 @@ export class ProtocolService extends BaseService {
   private handleProtocolUrl(url: string) {
     if (!url) return
 
-    const urlObj = new URL(url)
-    const params = new URLSearchParams(urlObj.search)
+    try {
+      const urlObj = new URL(url)
+      const params = new URLSearchParams(urlObj.search)
 
-    switch (urlObj.hostname.toLowerCase()) {
-      case 'mcp':
-        handleMcpProtocolUrl(urlObj)
-        return
-      case 'providers':
-        void handleProvidersProtocolUrl(urlObj)
-        return
-      case 'navigate':
-        handleNavigateProtocolUrl(urlObj)
-        return
+      switch (urlObj.hostname.toLowerCase()) {
+        case 'mcp':
+          handleMcpProtocolUrl(urlObj)
+          return
+        case 'providers':
+          handleProvidersProtocolUrl(urlObj).catch((error) =>
+            logger.error('Failed to handle providers protocol URL', error as Error)
+          )
+          return
+        case 'navigate':
+          handleNavigateProtocolUrl(urlObj)
+          return
+      }
+
+      application.get('WindowManager').broadcastToType(WindowType.Main, 'protocol-data', {
+        url,
+        params: Object.fromEntries(params.entries())
+      })
+    } catch (error) {
+      logger.error('Failed to handle protocol URL', error as Error)
     }
-
-    application.get('WindowManager').broadcastToType(WindowType.Main, 'protocol-data', {
-      url,
-      params: Object.fromEntries(params.entries())
-    })
   }
 
   private handleArgvForUrl(args: string[]) {
diff --git a/src/main/services/protocol/__tests__/ProtocolService.test.ts b/src/main/services/protocol/__tests__/ProtocolService.test.ts
new file mode 100644
index 0000000000..122d5c85c2
--- /dev/null
+++ b/src/main/services/protocol/__tests__/ProtocolService.test.ts
@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { appMock, loggerMock, handlersMock, windowManagerMock } = vi.hoisted(() => {
+  const appMock = {
+    on: vi.fn(),
+    removeListener: vi.fn(),
+    setAsDefaultProtocolClient: vi.fn()
+  }
+  const loggerMock = {
+    debug: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn()
+  }
+  const handlersMock = {
+    handleMcpProtocolUrl: vi.fn(),
+    handleNavigateProtocolUrl: vi.fn(),
+    handleProvidersProtocolUrl: vi.fn()
+  }
+  const windowManagerMock = {
+    broadcastToType: vi.fn()
+  }
+  return { appMock, loggerMock, handlersMock, windowManagerMock }
+})
+
+vi.mock('electron', () => ({ app: appMock }))
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => loggerMock
+  }
+}))
+
+vi.mock('@application', () => ({
+  application: {
+    get: (name: string) => {
+      if (name === 'WindowManager') return windowManagerMock
+      throw new Error(`unexpected service: ${name}`)
+    },
+    getPath: (key: string, filename?: string) => (filename ? `/mock/${key}/${filename}` : `/mock/${key}`)
+  }
+}))
+
+vi.mock('@main/core/lifecycle', () => {
+  class MockBaseService {
+    protected registerDisposable<T>(disposable: T): T {
+      return disposable
+    }
+  }
+  return {
+    BaseService: MockBaseService,
+    Injectable: () => (target: unknown) => target,
+    ServicePhase: () => (target: unknown) => target,
+    Phase: { Background: 'background' }
+  }
+})
+
+vi.mock('../handlers/mcpInstall', () => ({
+  handleMcpProtocolUrl: handlersMock.handleMcpProtocolUrl
+}))
+
+vi.mock('../handlers/navigate', () => ({
+  handleNavigateProtocolUrl: handlersMock.handleNavigateProtocolUrl
+}))
+
+vi.mock('../handlers/providersImport', () => ({
+  handleProvidersProtocolUrl: handlersMock.handleProvidersProtocolUrl
+}))
+
+import { WindowType } from '@main/core/window/types'
+
+import { ProtocolService } from '../ProtocolService'
+
+describe('ProtocolService', () => {
+  let service: ProtocolService
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    service = new ProtocolService()
+  })
+
+  it('logs malformed protocol URLs instead of throwing', () => {
+    expect(() => (service as any).handleProtocolUrl('not a url')).not.toThrow()
+
+    expect(loggerMock.error).toHaveBeenCalledWith('Failed to handle protocol URL', expect.any(TypeError))
+  })
+
+  it('logs asynchronous providers handler failures', async () => {
+    const error = new Error('failed')
+    handlersMock.handleProvidersProtocolUrl.mockRejectedValueOnce(error)
+
+    ;(service as any).handleProtocolUrl('cherrystudio://providers/api-keys?v=1&data=abc')
+
+    await vi.waitFor(() => {
+      expect(loggerMock.error).toHaveBeenCalledWith('Failed to handle providers protocol URL', error)
+    })
+  })
+
+  it('broadcasts unknown protocol hosts to main windows', () => {
+    ;(service as any).handleProtocolUrl('cherrystudio://unknown/path?foo=bar')
+
+    expect(windowManagerMock.broadcastToType).toHaveBeenCalledWith(WindowType.Main, 'protocol-data', {
+      url: 'cherrystudio://unknown/path?foo=bar',
+      params: { foo: 'bar' }
+    })
+  })
+})
diff --git a/src/main/services/protocol/handlers/__tests__/navigate.test.ts b/src/main/services/protocol/handlers/__tests__/navigate.test.ts
new file mode 100644
index 0000000000..1a2ebac630
--- /dev/null
+++ b/src/main/services/protocol/handlers/__tests__/navigate.test.ts
@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { applicationMock, loggerMock, mainWindowServiceMock, settingsWindowServiceMock } = vi.hoisted(() => {
+  const mainWindowServiceMock = {
+    getMainWindow: vi.fn(),
+    showMainWindow: vi.fn()
+  }
+  const settingsWindowServiceMock = {
+    open: vi.fn()
+  }
+  const loggerMock = {
+    debug: vi.fn(),
+    error: vi.fn(),
+    warn: vi.fn()
+  }
+  const applicationMock = {
+    get: vi.fn((name: string) => {
+      if (name === 'MainWindowService') return mainWindowServiceMock
+      if (name === 'SettingsWindowService') return settingsWindowServiceMock
+      throw new Error(`unexpected service: ${name}`)
+    })
+  }
+  return { applicationMock, loggerMock, mainWindowServiceMock, settingsWindowServiceMock }
+})
+
+vi.mock('@application', () => ({ application: applicationMock }))
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => loggerMock
+  }
+}))
+
+vi.mock('@main/constant', () => ({
+  isMac: false
+}))
+
+import { handleNavigateProtocolUrl } from '../navigate'
+
+describe('navigate protocol handler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.useRealTimers()
+  })
+
+  it('blocks paths outside the route allowlist', () => {
+    handleNavigateProtocolUrl(new URL('cherrystudio://navigate/agents-legacy'))
+
+    expect(loggerMock.warn).toHaveBeenCalledWith('Blocked navigation to disallowed route: /agents-legacy')
+    expect(mainWindowServiceMock.getMainWindow).not.toHaveBeenCalled()
+  })
+
+  it('opens settings routes through SettingsWindowService', () => {
+    handleNavigateProtocolUrl(new URL('cherrystudio://navigate/settings/provider?id=openai'))
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith('/settings/provider?id=openai')
+    expect(mainWindowServiceMock.getMainWindow).not.toHaveBeenCalled()
+  })
+
+  it('passes query strings to window.navigate without string interpolation injection', async () => {
+    const executeJavaScript = vi.fn().mockResolvedValueOnce(true).mockResolvedValueOnce(undefined)
+    mainWindowServiceMock.getMainWindow.mockReturnValue({
+      isDestroyed: () => false,
+      webContents: { executeJavaScript }
+    })
+
+    handleNavigateProtocolUrl(new URL("cherrystudio://navigate/agents?x=');attackerCode();//"))
+    await vi.waitFor(() => {
+      expect(executeJavaScript).toHaveBeenCalledTimes(2)
+    })
+
+    expect(executeJavaScript).toHaveBeenNthCalledWith(1, `typeof window.navigate === 'function'`)
+    expect(executeJavaScript).toHaveBeenNthCalledWith(
+      2,
+      `window.navigate({ to: ${JSON.stringify("/agents?x=');attackerCode();//")} })`
+    )
+  })
+
+  it('retries when the main window is not available yet', () => {
+    vi.useFakeTimers()
+    mainWindowServiceMock.getMainWindow.mockReturnValue(null)
+
+    handleNavigateProtocolUrl(new URL('cherrystudio://navigate/agents'))
+
+    expect(mainWindowServiceMock.getMainWindow).toHaveBeenCalledTimes(1)
+
+    vi.advanceTimersByTime(1000)
+
+    expect(mainWindowServiceMock.getMainWindow).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/src/main/services/protocol/handlers/__tests__/providersImport.test.ts b/src/main/services/protocol/handlers/__tests__/providersImport.test.ts
new file mode 100644
index 0000000000..e02bdec744
--- /dev/null
+++ b/src/main/services/protocol/handlers/__tests__/providersImport.test.ts
@@ -0,0 +1,81 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { applicationMock, loggerMock, settingsWindowServiceMock } = vi.hoisted(() => {
+  const settingsWindowServiceMock = {
+    open: vi.fn()
+  }
+  const loggerMock = {
+    debug: vi.fn(),
+    error: vi.fn()
+  }
+  const applicationMock = {
+    get: vi.fn((name: string) => {
+      if (name === 'SettingsWindowService') return settingsWindowServiceMock
+      throw new Error(`unexpected service: ${name}`)
+    })
+  }
+  return { applicationMock, loggerMock, settingsWindowServiceMock }
+})
+
+vi.mock('@application', () => ({ application: applicationMock }))
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => loggerMock
+  }
+}))
+
+import { handleProvidersProtocolUrl, parseProvidersImportData } from '../providersImport'
+
+const toUrlSafeBase64 = (value: unknown) =>
+  Buffer.from(JSON.stringify(value), 'utf-8').toString('base64').replaceAll('+', '_').replaceAll('/', '-')
+
+describe('providersImport protocol handler', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('opens provider settings with decoded provider import data', async () => {
+    const config = {
+      id: 'tokenflux',
+      baseUrl: 'https://tokenflux.ai/v1',
+      apiKey: 'sk-test',
+      name: 'TokenFlux',
+      type: 'openai'
+    }
+    const data = toUrlSafeBase64(config)
+
+    await handleProvidersProtocolUrl(new URL(`cherrystudio://providers/api-keys?v=1&data=${data}`))
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith(
+      `/settings/provider?addProviderData=${encodeURIComponent(JSON.stringify(config))}`
+    )
+  })
+
+  it('does not open settings when provider import data is invalid', async () => {
+    await handleProvidersProtocolUrl(new URL('cherrystudio://providers/api-keys?v=1&data=not-json'))
+
+    expect(settingsWindowServiceMock.open).not.toHaveBeenCalled()
+    expect(loggerMock.error).toHaveBeenCalled()
+  })
+
+  it('preserves standard base64 plus and slash characters through URL parsing', async () => {
+    const config = { id: 'tokenflux', apiKey: 'sk-10895-Ͽ' }
+    const data = Buffer.from(JSON.stringify(config), 'utf-8').toString('base64')
+
+    expect(data).toContain('+')
+    expect(data).toContain('/')
+
+    await handleProvidersProtocolUrl(new URL(`cherrystudio://providers/api-keys?v=1&data=${data}`))
+
+    expect(settingsWindowServiceMock.open).toHaveBeenCalledWith(
+      `/settings/provider?addProviderData=${encodeURIComponent(JSON.stringify(config))}`
+    )
+  })
+
+  it('parses wrapped legacy provider import payloads', () => {
+    const payload = Buffer.from("({'id':'tokenflux'})", 'utf-8').toString('base64')
+
+    expect(parseProvidersImportData(payload)).toBe(JSON.stringify({ id: 'tokenflux' }))
+  })
+})
diff --git a/src/main/services/protocol/handlers/navigate.ts b/src/main/services/protocol/handlers/navigate.ts
index 2abc80f3e0..35da69ca99 100644
--- a/src/main/services/protocol/handlers/navigate.ts
+++ b/src/main/services/protocol/handlers/navigate.ts
@@ -1,12 +1,12 @@
 import { application } from '@application'
 import { loggerService } from '@logger'
 import { isMac } from '@main/constant'
+import { normalizeSettingsPath } from '@shared/data/types/settingsPath'
 
 const logger = loggerService.withContext('ProtocolService:navigate')
 
-// Allowed route prefixes to prevent arbitrary navigation
-const ALLOWED_ROUTES = [
-  '/settings/',
+const ALLOWED_ROUTE_PREFIXES = [
+  '/settings',
   '/agents',
   '/knowledge',
   '/openclaw',
@@ -17,10 +17,12 @@ const ALLOWED_ROUTES = [
   '/apps',
   '/code',
   '/store',
-  '/launchpad',
-  '/'
+  '/launchpad'
 ]
 
+const isAllowedRoute = (path: string): boolean =>
+  ALLOWED_ROUTE_PREFIXES.some((route) => path === route || path.startsWith(`${route}/`))
+
 /**
  * Handle cherrystudio://navigate/<path> deep links.
  *
@@ -33,7 +35,7 @@ export function handleNavigateProtocolUrl(url: URL) {
   const targetPath = url.pathname || '/'
   const normalizedPath = targetPath.startsWith('/') ? targetPath : `/${targetPath}`
 
-  if (!ALLOWED_ROUTES.some((route) => normalizedPath === route || normalizedPath.startsWith(route))) {
+  if (!isAllowedRoute(normalizedPath)) {
     logger.warn(`Blocked navigation to disallowed route: ${normalizedPath}`)
     return
   }
@@ -44,27 +46,37 @@ export function handleNavigateProtocolUrl(url: URL) {
 
   logger.debug('handleNavigateProtocolUrl', { path: fullPath })
 
-  const mainWindow = application.get('MainWindowService').getMainWindow()
-
-  if (mainWindow && !mainWindow.isDestroyed()) {
-    mainWindow.webContents
-      .executeJavaScript(`typeof window.navigate === 'function'`)
-      .then((hasNavigate) => {
-        if (hasNavigate) {
-          void mainWindow.webContents.executeJavaScript(`window.navigate('${fullPath}')`)
-          if (isMac) {
-            application.get('MainWindowService').showMainWindow()
-          }
-        } else {
-          logger.warn('window.navigate not available yet, retrying in 1s')
-          setTimeout(() => handleNavigateProtocolUrl(url), 1000)
-        }
-      })
-      .catch((error) => {
-        logger.error('Failed to navigate:', error as Error)
-      })
-  } else {
-    logger.warn('Main window not available, retrying in 1s')
-    setTimeout(() => handleNavigateProtocolUrl(url), 1000)
+  if (fullPath.startsWith('/settings/')) {
+    application.get('SettingsWindowService').open(normalizeSettingsPath(fullPath))
+    return
   }
+
+  const navigateMainWindow = async () => {
+    const mainWindow = application.get('MainWindowService').getMainWindow()
+
+    if (!mainWindow || mainWindow.isDestroyed()) {
+      logger.warn('Main window not available, retrying in 1s')
+      setTimeout(() => handleNavigateProtocolUrl(url), 1000)
+      return
+    }
+
+    try {
+      const hasNavigate = await mainWindow.webContents.executeJavaScript(`typeof window.navigate === 'function'`)
+
+      if (!hasNavigate) {
+        logger.warn('window.navigate not available yet, retrying in 1s')
+        setTimeout(() => handleNavigateProtocolUrl(url), 1000)
+        return
+      }
+
+      await mainWindow.webContents.executeJavaScript(`window.navigate({ to: ${JSON.stringify(fullPath)} })`)
+      if (isMac) {
+        application.get('MainWindowService').showMainWindow()
+      }
+    } catch (error) {
+      logger.error('Failed to navigate:', error as Error)
+    }
+  }
+
+  void navigateMainWindow()
 }
diff --git a/src/main/services/protocol/handlers/providersImport.ts b/src/main/services/protocol/handlers/providersImport.ts
index 2fc2a60a70..1e98041d3b 100644
--- a/src/main/services/protocol/handlers/providersImport.ts
+++ b/src/main/services/protocol/handlers/providersImport.ts
@@ -1,9 +1,9 @@
 import { application } from '@application'
 import { loggerService } from '@logger'
-import { isMac } from '@main/constant'
+
 const logger = loggerService.withContext('ProtocolService:providersImport')
 
-function ParseData(data: string) {
+export function parseProvidersImportData(data: string) {
   try {
     const result = JSON.parse(
       Buffer.from(data, 'base64').toString('utf-8').replaceAll("'", '"').replaceAll('(', '').replaceAll(')', '')
@@ -11,7 +11,7 @@ function ParseData(data: string) {
 
     return JSON.stringify(result)
   } catch (error) {
-    logger.error('ParseData error:', error as Error)
+    logger.error('parseProvidersImportData error:', error as Error)
     return null
   }
 }
@@ -32,39 +32,20 @@ export async function handleProvidersProtocolUrl(url: URL) {
       // replace + and / to _ and - because + and / are processed by URLSearchParams
       const processedSearch = url.search.replaceAll('+', '_').replaceAll('/', '-')
       const params = new URLSearchParams(processedSearch)
-      const data = ParseData(params.get('data')?.replaceAll('_', '+').replaceAll('-', '/') || '')
+      const data = parseProvidersImportData(params.get('data')?.replaceAll('_', '+').replaceAll('-', '/') || '')
 
       if (!data) {
         logger.error('handleProvidersProtocolUrl data is null or invalid')
         return
       }
 
-      const mainWindow = application.get('MainWindowService').getMainWindow()
       const version = params.get('v')
       if (version == '1') {
         // TODO: handle different version
         logger.debug('handleProvidersProtocolUrl', { data, version })
       }
 
-      // add check there is window.navigate function in mainWindow
-      if (
-        mainWindow &&
-        !mainWindow.isDestroyed() &&
-        (await mainWindow.webContents.executeJavaScript(`typeof window.navigate === 'function'`))
-      ) {
-        void mainWindow.webContents.executeJavaScript(
-          `window.navigate('/settings/provider?addProviderData=${encodeURIComponent(data)}')`
-        )
-
-        if (isMac) {
-          application.get('MainWindowService').showMainWindow()
-        }
-      } else {
-        setTimeout(() => {
-          logger.debug('handleProvidersProtocolUrl timeout', { data, version })
-          void handleProvidersProtocolUrl(url)
-        }, 1000)
-      }
+      application.get('SettingsWindowService').open(`/settings/provider?addProviderData=${encodeURIComponent(data)}`)
       break
     }
     default:
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 7776bffc74..d83d7dacd9 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -33,6 +33,7 @@ import type {
   KnowledgeSearchResult as KnowledgeVectorSearchResult,
   RestoreKnowledgeBaseDto
 } from '@shared/data/types/knowledge'
+import type { SettingsPath } from '@shared/data/types/settingsPath'
 import type {
   WebSearchFetchUrlsRequest,
   WebSearchResponse,
@@ -560,6 +561,9 @@ const api = {
     }
   },
   windowManager: {
+    openSettings: (path: SettingsPath = '/settings/provider'): Promise<string> =>
+      ipcRenderer.invoke(IpcChannel.SettingsWindow_Open, path),
+
     // Retrieve init data that the main process stored for this window via
     // wm.setInitData() or wm.open({ initData }). Returns null when no data was set or when
     // the sender window is not managed by WindowManager (e.g., detached devtools).
diff --git a/src/renderer/settings.html b/src/renderer/settings.html
new file mode 100644
index 0000000000..2548cfe4d2
--- /dev/null
+++ b/src/renderer/settings.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="initial-scale=1, width=device-width" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; connect-src blob: *; script-src 'self' 'unsafe-eval' 'unsafe-inline' *; worker-src 'self' blob:; style-src 'self' 'unsafe-inline' *; font-src 'self' data: *; img-src 'self' data: file: * blob:; media-src 'self' file:; frame-src * file:" />
+    <title>Cherry Studio - Settings</title>
+
+    <style>
+      html,
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/windows/settings/entryPoint.tsx"></script>
+  </body>
+</html>
diff --git a/src/renderer/src/assets/styles/font.css b/src/renderer/src/assets/styles/font.css
index 257337c64a..aab25f671f 100644
--- a/src/renderer/src/assets/styles/font.css
+++ b/src/renderer/src/assets/styles/font.css
@@ -1,6 +1,6 @@
 :root {
   --font-family:
-    var(--cs-user-font-family, var(--user-font-family)), Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    var(--cs-user-font-family, var(--user-font-family, Ubuntu)), -apple-system, BlinkMacSystemFont, 'Segoe UI',
     system-ui, Roboto, Oxygen,
     Cantarell, 'Open Sans', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol', 'Noto Color Emoji';
@@ -10,18 +10,18 @@
     'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --code-font-family:
-    var(--cs-user-code-font-family, var(--user-code-font-family)), 'Cascadia Code', 'Fira Code', 'Consolas', Menlo,
+    var(--cs-user-code-font-family, var(--user-code-font-family, 'Cascadia Code')), 'Fira Code', 'Consolas', Menlo,
     Courier, monospace;
 }
 
 /* Windows系统专用字体配置 */
 body[os='windows'] {
   --font-family:
-    var(--cs-user-font-family, var(--user-font-family)), 'Twemoji Country Flags', Ubuntu, -apple-system,
+    var(--cs-user-font-family, var(--user-font-family, 'Twemoji Country Flags')), Ubuntu, -apple-system,
     BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Oxygen, Cantarell, 'Open Sans', 'Helvetica Neue', Arial,
     'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --code-font-family:
-    var(--cs-user-code-font-family, var(--user-code-font-family)), 'Cascadia Code', 'Fira Code', 'Consolas',
+    var(--cs-user-code-font-family, var(--user-code-font-family, 'Cascadia Code')), 'Fira Code', 'Consolas',
     'Sarasa Mono SC', 'Microsoft YaHei UI', Courier, monospace;
 }
diff --git a/src/renderer/src/components/AddButton.tsx b/src/renderer/src/components/AddButton.tsx
index 786fd22042..3fb7df46bb 100644
--- a/src/renderer/src/components/AddButton.tsx
+++ b/src/renderer/src/components/AddButton.tsx
@@ -15,9 +15,9 @@ const AddButton = ({
   return (
     <Button
       {...props}
-      onClick={props.onClick}
+      variant="ghost"
       className={cn(
-        'h-9 w-[calc(var(--assistants-width)-20px)] justify-start rounded-lg bg-transparent px-3 text-[13px] text-[var(--color-text-2)] hover:bg-[var(--color-list-item)]',
+        'h-9 w-[calc(var(--assistants-width)-20px)] justify-start rounded-lg bg-transparent px-3 text-[13px] text-muted-foreground shadow-none hover:bg-muted hover:text-foreground dark:bg-transparent dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-foreground',
         className
       )}>
       <PlusIcon size={16} className="shrink-0" />
diff --git a/src/renderer/src/components/AppModal/__tests__/AppModal.integration.test.tsx b/src/renderer/src/components/AppModal/__tests__/AppModal.integration.test.tsx
new file mode 100644
index 0000000000..0e52d86ebe
--- /dev/null
+++ b/src/renderer/src/components/AppModal/__tests__/AppModal.integration.test.tsx
@@ -0,0 +1,70 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import i18n from '@renderer/i18n'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => ({
+      error: vi.fn()
+    })
+  }
+}))
+
+vi.mock('@cherrystudio/ui', async (importOriginal) => {
+  return await importOriginal()
+})
+
+import AppModalProvider, { type AppModalApi } from '..'
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as any
+
+  if (!globalThis.PointerEvent) {
+    globalThis.PointerEvent = MouseEvent as any
+  }
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+async function renderModalProvider() {
+  let modal: AppModalApi | undefined
+
+  render(<AppModalProvider onReady={(api) => (modal = api)} />)
+
+  await waitFor(() => {
+    expect(modal).toBeDefined()
+  })
+
+  return modal!
+}
+
+describe('AppModalProvider Dialog integration', () => {
+  it('mounts the real Dialog primitive and resolves on confirm', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+
+    let confirmed: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      confirmed = modal.confirm({
+        title: 'Real dialog',
+        content: 'Mounted through the package dialog.'
+      })
+    })
+
+    expect(await screen.findByRole('dialog')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: i18n.t('common.confirm') }))
+
+    await expect(confirmed!).resolves.toBe(true)
+  })
+})
diff --git a/src/renderer/src/components/AppModal/__tests__/AppModal.test.tsx b/src/renderer/src/components/AppModal/__tests__/AppModal.test.tsx
new file mode 100644
index 0000000000..d0abe5ebc7
--- /dev/null
+++ b/src/renderer/src/components/AppModal/__tests__/AppModal.test.tsx
@@ -0,0 +1,268 @@
+import i18n from '@renderer/i18n'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const toastError = vi.fn()
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => ({
+      error: vi.fn()
+    })
+  }
+}))
+
+vi.mock('@cherrystudio/ui', () => {
+  const React = require('react')
+
+  return {
+    Button: ({ children, loadingIcon, loading, ...props }) =>
+      React.createElement('button', props, loading ? loadingIcon : null, children),
+    Dialog: ({ children, open }) => (open ? React.createElement(React.Fragment, null, children) : null),
+    DialogContent: ({ children, ...props }) => {
+      delete props.showCloseButton
+      delete props.onInteractOutside
+
+      return React.createElement('div', { role: 'dialog', ...props }, children)
+    },
+    DialogDescription: ({ children }) => React.createElement('div', null, children),
+    DialogFooter: ({ children, ...props }) => React.createElement('div', props, children),
+    DialogHeader: ({ children, ...props }) => React.createElement('div', props, children),
+    DialogTitle: ({ children, ...props }) => React.createElement('h2', props, children)
+  }
+})
+
+import AppModalProvider, { type AppModalApi } from '..'
+
+beforeEach(() => {
+  toastError.mockClear()
+  Object.defineProperty(window, 'toast', {
+    configurable: true,
+    value: { error: toastError }
+  })
+})
+
+async function renderModalProvider() {
+  let modal: AppModalApi | undefined
+
+  render(<AppModalProvider onReady={(api) => (modal = api)} />)
+
+  await waitFor(() => {
+    expect(modal).toBeDefined()
+  })
+
+  return modal!
+}
+
+describe('AppModalProvider', () => {
+  it('keeps window.modal.confirm compatible with promise-style confirmation', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+
+    let confirmed: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      confirmed = modal.confirm({
+        title: 'Delete item',
+        content: 'This cannot be undone.',
+        okText: 'Delete',
+        cancelText: 'Cancel'
+      })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Delete item')).toBeInTheDocument()
+    })
+    expect(screen.getByText('This cannot be undone.')).toBeInTheDocument()
+    expect(typeof confirmed!.catch).toBe('function')
+    expect(typeof confirmed!.finally).toBe('function')
+
+    await user.click(screen.getByRole('button', { name: 'Delete' }))
+
+    await expect(confirmed!).resolves.toBe(true)
+  })
+
+  it('keeps the modal open when onOk rejects so it can still be cancelled', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+    const onOk = vi.fn().mockRejectedValue(new Error('failed'))
+
+    let confirmed: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      confirmed = modal.confirm({
+        title: 'Retry action',
+        content: 'The first attempt fails.',
+        okText: 'Run',
+        cancelText: 'Cancel',
+        onOk
+      })
+    })
+
+    await user.click(await screen.findByRole('button', { name: 'Run' }))
+
+    await waitFor(() => {
+      expect(onOk).toHaveBeenCalledOnce()
+    })
+    expect(toastError).toHaveBeenCalledWith({ title: i18n.t('common.error'), description: 'failed' })
+    expect(screen.getByText('Retry action')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Cancel' }))
+
+    await expect(confirmed!).resolves.toBe(false)
+  })
+
+  it('resolves confirm as false when cancelled', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+
+    let confirmed: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      confirmed = modal.confirm({
+        title: 'Leave page',
+        content: 'Unsaved changes will be lost.',
+        okText: 'Leave',
+        cancelText: 'Stay'
+      })
+    })
+
+    await user.click(await screen.findByRole('button', { name: 'Stay' }))
+
+    await expect(confirmed!).resolves.toBe(false)
+  })
+
+  it('renders feedback modals without a cancel button', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+
+    let confirmed: ReturnType<AppModalApi['error']>
+    act(() => {
+      confirmed = modal.error({
+        title: 'Backup failed',
+        content: 'Disk is full.'
+      })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Backup failed')).toBeInTheDocument()
+    })
+    expect(screen.queryByRole('button', { name: i18n.t('common.cancel') })).not.toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: i18n.t('common.confirm') }))
+
+    await expect(confirmed!).resolves.toBe(true)
+  })
+
+  it('uses translated default text for destructive confirmations', async () => {
+    const user = userEvent.setup()
+    const modal = await renderModalProvider()
+
+    let confirmed: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      confirmed = modal.confirm({
+        title: 'Delete item',
+        content: 'This cannot be undone.',
+        okButtonProps: { danger: true }
+      })
+    })
+
+    await user.click(await screen.findByRole('button', { name: i18n.t('common.delete') }))
+
+    await expect(confirmed!).resolves.toBe(true)
+  })
+
+  it('supports update and destroy handles for loading-style modals', async () => {
+    const modal = await renderModalProvider()
+
+    let loadingModal: ReturnType<AppModalApi['info']>
+    act(() => {
+      loadingModal = modal.info({
+        title: 'Migrating data',
+        content: 'Starting...',
+        okButtonProps: { style: { display: 'none' } }
+      })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Starting...')).toBeInTheDocument()
+    })
+    expect(screen.queryByRole('button', { name: i18n.t('common.confirm') })).not.toBeInTheDocument()
+
+    act(() => {
+      loadingModal!.update({ content: 'Almost done.' })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Almost done.')).toBeInTheDocument()
+    })
+
+    act(() => {
+      loadingModal!.destroy()
+    })
+
+    await expect(loadingModal!).resolves.toBe(false)
+
+    await waitFor(() => {
+      expect(screen.queryByText('Almost done.')).not.toBeInTheDocument()
+    })
+  })
+
+  it('destroyAll resolves every open modal as cancelled', async () => {
+    const modal = await renderModalProvider()
+
+    let first: ReturnType<AppModalApi['info']>
+    let second: ReturnType<AppModalApi['confirm']>
+    act(() => {
+      first = modal.info({ title: 'First modal' })
+      second = modal.confirm({ title: 'Second modal' })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('First modal')).toBeInTheDocument()
+      expect(screen.getByText('Second modal')).toBeInTheDocument()
+    })
+
+    act(() => {
+      modal.destroyAll()
+    })
+
+    await expect(first!).resolves.toBe(false)
+    await expect(second!).resolves.toBe(false)
+  })
+
+  it('keeps the modal mounted until the close animation finishes', async () => {
+    const modal = await renderModalProvider()
+    vi.useFakeTimers()
+    try {
+      const afterClose = vi.fn()
+
+      let loadingModal: ReturnType<AppModalApi['info']>
+      act(() => {
+        loadingModal = modal.info({
+          title: 'Closing soon',
+          content: 'Waiting for animation.',
+          afterClose
+        })
+      })
+
+      expect(screen.getByText('Closing soon')).toBeInTheDocument()
+
+      act(() => {
+        loadingModal!.destroy()
+      })
+
+      expect(afterClose).not.toHaveBeenCalled()
+
+      act(() => {
+        vi.advanceTimersByTime(199)
+      })
+      expect(afterClose).not.toHaveBeenCalled()
+
+      act(() => {
+        vi.advanceTimersByTime(1)
+      })
+      expect(afterClose).toHaveBeenCalledTimes(1)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
diff --git a/src/renderer/src/components/AppModal/index.tsx b/src/renderer/src/components/AppModal/index.tsx
new file mode 100644
index 0000000000..d80a6f359c
--- /dev/null
+++ b/src/renderer/src/components/AppModal/index.tsx
@@ -0,0 +1,393 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@cherrystudio/ui'
+import { cn } from '@cherrystudio/ui/lib/utils'
+import { loggerService } from '@logger'
+import i18n from '@renderer/i18n'
+import { formatErrorMessage } from '@renderer/utils/error'
+import { AlertCircle, CheckCircle2, Info, Loader2, TriangleAlert, XCircle } from 'lucide-react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { v4 as uuidv4 } from 'uuid'
+
+type ModalType = 'confirm' | 'error' | 'info' | 'success' | 'warning'
+type ModalAction = () => unknown | Promise<unknown>
+type ModalButtonProps = {
+  danger?: boolean
+  disabled?: boolean
+  style?: React.CSSProperties
+  className?: string
+}
+
+const logger = loggerService.withContext('AppModal')
+
+export interface AppModalFuncProps {
+  title?: React.ReactNode
+  content?: React.ReactNode
+  okText?: React.ReactNode
+  cancelText?: React.ReactNode
+  onOk?: ModalAction
+  onCancel?: ModalAction
+  afterClose?: () => void
+  okButtonProps?: ModalButtonProps
+  cancelButtonProps?: Omit<ModalButtonProps, 'danger'>
+  centered?: boolean
+  width?: string | number
+  icon?: React.ReactNode
+  maskClosable?: boolean
+  closable?: boolean
+  className?: string
+  rootClassName?: string
+  style?: React.CSSProperties
+  okCancel?: boolean
+}
+
+export interface AppModalReturn extends PromiseLike<boolean> {
+  catch: Promise<boolean>['catch']
+  finally: Promise<boolean>['finally']
+  destroy: () => void
+  update: (config: AppModalFuncProps) => void
+}
+
+export interface AppModalApi {
+  confirm: (config: AppModalFuncProps) => AppModalReturn
+  error: (config: AppModalFuncProps) => AppModalReturn
+  info: (config: AppModalFuncProps) => AppModalReturn
+  success: (config: AppModalFuncProps) => AppModalReturn
+  warning: (config: AppModalFuncProps) => AppModalReturn
+  warn: (config: AppModalFuncProps) => AppModalReturn
+  destroyAll: () => void
+}
+
+interface ModalItem {
+  id: string
+  type: ModalType
+  props: AppModalFuncProps
+  open: boolean
+  loading: boolean
+  resolve: (confirmed: boolean) => void
+}
+
+interface Props {
+  onReady: (api: AppModalApi) => void
+}
+
+const CLOSE_ANIMATION_MS = 200
+
+function createId() {
+  return uuidv4()
+}
+
+function getIcon(type: ModalType, icon: React.ReactNode) {
+  if (icon === null) return null
+  if (icon !== undefined) return icon
+
+  const className = 'mt-0.5 size-5 shrink-0'
+
+  switch (type) {
+    case 'error':
+      return <XCircle className={cn(className, 'text-destructive')} />
+    case 'warning':
+      return <TriangleAlert className={cn(className, 'text-warning')} />
+    case 'success':
+      return <CheckCircle2 className={cn(className, 'text-success')} />
+    case 'info':
+      return <Info className={cn(className, 'text-info')} />
+    case 'confirm':
+      return <AlertCircle className={cn(className, 'text-warning')} />
+  }
+}
+
+function getContentStyle(props: AppModalFuncProps): React.CSSProperties | undefined {
+  const style = { ...props.style }
+
+  if (props.width !== undefined) {
+    style.width = props.width
+    style.maxWidth = 'calc(100vw - 2rem)'
+  }
+
+  return Object.keys(style).length > 0 ? style : undefined
+}
+
+function shouldShowOkButton(props: AppModalFuncProps) {
+  return props.okButtonProps?.style?.display !== 'none'
+}
+
+function shouldShowCancelButton(type: ModalType, props: AppModalFuncProps) {
+  if (props.okCancel === false) return false
+  if (type !== 'confirm') return false
+
+  return props.cancelButtonProps?.style?.display !== 'none'
+}
+
+function getOkText(type: ModalType, props: AppModalFuncProps) {
+  if (props.okText !== undefined) return props.okText
+
+  if (type === 'confirm' && props.okButtonProps?.danger) {
+    return i18n.t('common.delete')
+  }
+
+  return i18n.t('common.confirm')
+}
+
+function getCancelText(props: AppModalFuncProps) {
+  return props.cancelText ?? i18n.t('common.cancel')
+}
+
+function AppModalItem({
+  item,
+  close,
+  updateLoading
+}: {
+  item: ModalItem
+  close: (id: string, confirmed: boolean, callback?: ModalAction) => void
+  updateLoading: (id: string, loading: boolean) => void
+}) {
+  const { props, type } = item
+  const icon = getIcon(type, props.icon)
+  const showOkButton = shouldShowOkButton(props)
+  const showCancelButton = shouldShowCancelButton(type, props)
+
+  const handleCancel = useCallback(() => {
+    close(item.id, false, props.onCancel)
+  }, [close, item.id, props.onCancel])
+
+  const handleConfirm = useCallback(async () => {
+    updateLoading(item.id, true)
+    try {
+      await props.onOk?.()
+      close(item.id, true)
+    } catch (error) {
+      logger.error('Modal onOk failed', error as Error)
+      window.toast.error({ title: i18n.t('common.error'), description: formatErrorMessage(error) })
+      updateLoading(item.id, false)
+    }
+  }, [close, item.id, props, updateLoading])
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        handleCancel()
+      }
+    },
+    [handleCancel]
+  )
+
+  return (
+    <Dialog open={item.open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        data-app-modal="true"
+        showCloseButton={props.closable === true}
+        className={cn('app-modal gap-5 sm:max-w-lg', props.rootClassName, props.className)}
+        style={getContentStyle(props)}
+        onInteractOutside={(event) => {
+          if (props.maskClosable === false) {
+            event.preventDefault()
+          }
+        }}>
+        <DialogHeader className="gap-3">
+          <div className="flex items-start gap-3">
+            {icon}
+            <div className="min-w-0 flex-1">
+              {props.title ? <DialogTitle className="text-base leading-6">{props.title}</DialogTitle> : null}
+              {props.content ? (
+                <DialogDescription asChild>
+                  <div className={cn('mt-2 text-muted-foreground text-sm leading-5', props.title ? '' : 'mt-0')}>
+                    {props.content}
+                  </div>
+                </DialogDescription>
+              ) : null}
+            </div>
+          </div>
+        </DialogHeader>
+
+        {(showOkButton || showCancelButton) && (
+          <DialogFooter>
+            {showCancelButton && (
+              <Button
+                variant="outline"
+                onClick={handleCancel}
+                disabled={props.cancelButtonProps?.disabled || item.loading}
+                className={props.cancelButtonProps?.className}
+                style={props.cancelButtonProps?.style}>
+                {getCancelText(props)}
+              </Button>
+            )}
+            {showOkButton && (
+              <Button
+                variant={props.okButtonProps?.danger ? 'destructive' : 'default'}
+                onClick={handleConfirm}
+                disabled={props.okButtonProps?.disabled}
+                loading={item.loading}
+                loadingIcon={<Loader2 className="size-4 animate-spin" />}
+                className={props.okButtonProps?.className}
+                style={props.okButtonProps?.style}>
+                {getOkText(type, props)}
+              </Button>
+            )}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default function AppModalProvider({ onReady }: Props) {
+  const [items, setItems] = useState<ModalItem[]>([])
+  const itemsRef = useRef<ModalItem[]>([])
+  const closeTimersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>())
+
+  useEffect(() => {
+    itemsRef.current = items
+  }, [items])
+
+  const remove = useCallback((id: string) => {
+    const item = itemsRef.current.find((current) => current.id === id)
+    const closeTimer = closeTimersRef.current.get(id)
+
+    if (closeTimer) {
+      clearTimeout(closeTimer)
+      closeTimersRef.current.delete(id)
+    }
+
+    setItems((current) => {
+      const nextItems = current.filter((modal) => modal.id !== id)
+      itemsRef.current = nextItems
+      return nextItems
+    })
+    item?.props.afterClose?.()
+  }, [])
+
+  const scheduleRemove = useCallback(
+    (id: string) => {
+      const existingTimer = closeTimersRef.current.get(id)
+
+      if (existingTimer) {
+        clearTimeout(existingTimer)
+      }
+
+      closeTimersRef.current.set(
+        id,
+        setTimeout(() => {
+          remove(id)
+        }, CLOSE_ANIMATION_MS)
+      )
+    },
+    [remove]
+  )
+
+  const closeItem = useCallback(
+    (id: string, confirmed: boolean, callback?: ModalAction) => {
+      const item = itemsRef.current.find((current) => current.id === id)
+      if (!item || !item.open) return
+
+      void Promise.resolve(callback?.()).catch((error) => {
+        logger.error('Modal onCancel failed', error as Error)
+      })
+      item.resolve(confirmed)
+
+      setItems((current) => {
+        const nextItems = current.map((modal) => (modal.id === id ? { ...modal, loading: false, open: false } : modal))
+        itemsRef.current = nextItems
+        return nextItems
+      })
+      scheduleRemove(id)
+    },
+    [scheduleRemove]
+  )
+
+  const close = useCallback(
+    (id: string, confirmed: boolean, callback?: ModalAction) => {
+      closeItem(id, confirmed, callback)
+    },
+    [closeItem]
+  )
+
+  const update = useCallback((id: string, props: AppModalFuncProps) => {
+    setItems((current) => {
+      const nextItems = current.map((item) => (item.id === id ? { ...item, props: { ...item.props, ...props } } : item))
+      itemsRef.current = nextItems
+      return nextItems
+    })
+  }, [])
+
+  const updateLoading = useCallback((id: string, loading: boolean) => {
+    setItems((current) => {
+      const nextItems = current.map((item) => (item.id === id ? { ...item, loading } : item))
+      itemsRef.current = nextItems
+      return nextItems
+    })
+  }, [])
+
+  const show = useCallback(
+    (type: ModalType, props: AppModalFuncProps): AppModalReturn => {
+      const id = createId()
+      let resolvePromise: (confirmed: boolean) => void = () => {}
+      const promise = new Promise<boolean>((resolve) => {
+        resolvePromise = resolve
+      })
+
+      const item: ModalItem = {
+        id,
+        type,
+        props,
+        open: true,
+        loading: false,
+        resolve: resolvePromise
+      }
+
+      setItems((current) => {
+        const nextItems = current.concat(item)
+        itemsRef.current = nextItems
+        return nextItems
+      })
+
+      return Object.assign(promise, {
+        destroy: () => closeItem(id, false),
+        update: (config: AppModalFuncProps) => update(id, config)
+      })
+    },
+    [closeItem, update]
+  )
+
+  const api = useMemo<AppModalApi>(
+    () => ({
+      confirm: (config) => show('confirm', config),
+      error: (config) => show('error', config),
+      info: (config) => show('info', config),
+      success: (config) => show('success', config),
+      warning: (config) => show('warning', config),
+      warn: (config) => show('warning', config),
+      destroyAll: () => {
+        itemsRef.current.forEach((item) => closeItem(item.id, false))
+      }
+    }),
+    [closeItem, show]
+  )
+
+  useEffect(() => {
+    onReady(api)
+  }, [api, onReady])
+
+  useEffect(() => {
+    const closeTimers = closeTimersRef.current
+
+    return () => {
+      closeTimers.forEach((timer) => clearTimeout(timer))
+      closeTimers.clear()
+    }
+  }, [])
+
+  return (
+    <>
+      {items.map((item) => (
+        <AppModalItem key={item.id} item={item} close={close} updateLoading={updateLoading} />
+      ))}
+    </>
+  )
+}
diff --git a/src/renderer/src/components/CollapsibleSearchBar.tsx b/src/renderer/src/components/CollapsibleSearchBar.tsx
index 8b2dc73e05..b17464de3b 100644
--- a/src/renderer/src/components/CollapsibleSearchBar.tsx
+++ b/src/renderer/src/components/CollapsibleSearchBar.tsx
@@ -30,6 +30,7 @@ const CollapsibleSearchBar = ({
   const [searchVisible, setSearchVisible] = useState(false)
   const [searchText, setSearchText] = useState('')
   const inputRef = useRef<InputRef>(null)
+  const collapsedWidth = 32
 
   const handleTextChange = useCallback(
     (text: string) => {
@@ -52,15 +53,31 @@ const CollapsibleSearchBar = ({
   }, [searchVisible])
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
+    <motion.div
+      initial={false}
+      animate={searchVisible ? 'expanded' : 'collapsed'}
+      variants={{
+        expanded: { width: maxWidth, transition: { duration: 0.3, ease: 'easeInOut' } },
+        collapsed: { width: collapsedWidth, transition: { duration: 0.3, ease: 'easeInOut' } }
+      }}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        position: 'relative',
+        height: collapsedWidth,
+        minWidth: 0,
+        overflow: 'hidden',
+        flexShrink: searchVisible ? 1 : 0
+      }}>
       <motion.div
-        initial="collapsed"
+        initial={false}
         animate={searchVisible ? 'expanded' : 'collapsed'}
         variants={{
-          expanded: { maxWidth: maxWidth, opacity: 1, transition: { duration: 0.3, ease: 'easeInOut' } },
-          collapsed: { maxWidth: 0, opacity: 0, transition: { duration: 0.3, ease: 'easeInOut' } }
+          expanded: { width: '100%', opacity: 1, transition: { duration: 0.3, ease: 'easeInOut' } },
+          collapsed: { width: 0, opacity: 0, transition: { duration: 0.3, ease: 'easeInOut' } }
         }}
-        style={{ overflow: 'hidden', flex: 1 }}>
+        style={{ overflow: 'hidden', flexShrink: 1 }}>
         <Input
           ref={inputRef}
           type="text"
@@ -82,23 +99,34 @@ const CollapsibleSearchBar = ({
             if (!searchText) setSearchVisible(false)
           }}
           onClear={handleClear}
-          style={{ width: '100%', ...style }}
+          style={{ width: '100%', height: collapsedWidth, ...style }}
         />
       </motion.div>
       <motion.div
-        initial="visible"
+        initial={false}
         animate={searchVisible ? 'hidden' : 'visible'}
+        className="rounded-lg transition-colors hover:bg-accent"
         variants={{
           visible: { opacity: 1, transition: { duration: 0.1, delay: 0.3, ease: 'easeInOut' } },
           hidden: { opacity: 0, transition: { duration: 0.1, ease: 'easeInOut' } }
         }}
-        style={{ cursor: 'pointer', display: 'flex' }}
+        style={{
+          position: 'absolute',
+          right: 0,
+          width: collapsedWidth,
+          height: collapsedWidth,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          pointerEvents: searchVisible ? 'none' : 'auto'
+        }}
         onClick={() => setSearchVisible(true)}>
         <Tooltip content={tooltip} delay={500}>
           {icon}
         </Tooltip>
       </motion.div>
-    </div>
+    </motion.div>
   )
 }
 
diff --git a/src/renderer/src/components/ListItem/index.tsx b/src/renderer/src/components/ListItem/index.tsx
index 3ab38bcb41..65df55291e 100644
--- a/src/renderer/src/components/ListItem/index.tsx
+++ b/src/renderer/src/components/ListItem/index.tsx
@@ -47,7 +47,7 @@ const ListItemContainer = styled.div`
 
   &.active {
     background-color: var(--color-background-soft);
-    border: 1px solid var(--color-border-soft);
+    border-color: transparent;
   }
 `
 
diff --git a/src/renderer/src/components/ModelSelector/ModelSelector.tsx b/src/renderer/src/components/ModelSelector/ModelSelector.tsx
index cf387be384..e18df87ce0 100644
--- a/src/renderer/src/components/ModelSelector/ModelSelector.tsx
+++ b/src/renderer/src/components/ModelSelector/ModelSelector.tsx
@@ -265,6 +265,7 @@ export function ModelSelector(props: ModelSelectorProps) {
     align = 'start',
     sideOffset = 4,
     contentClassName,
+    listVisibleCount = PAGE_SIZE,
     multiSelectMode: multiSelectModeProp,
     defaultMultiSelectMode = false,
     onMultiSelectModeChange
@@ -376,7 +377,10 @@ export function ModelSelector(props: ModelSelectorProps) {
   listItemsRef.current = listItems
   modelItemsRef.current = modelItems
 
-  const listHeight = useMemo(() => Math.min(PAGE_SIZE, listItems.length || 1) * ITEM_HEIGHT, [listItems.length])
+  const listHeight = useMemo(
+    () => Math.min(listVisibleCount, listItems.length || 1) * ITEM_HEIGHT,
+    [listItems.length, listVisibleCount]
+  )
   const selectedTagsKey = useMemo(() => selectedTags.join('|'), [selectedTags])
 
   const emitSelection = useCallback(
@@ -495,7 +499,7 @@ export function ModelSelector(props: ModelSelectorProps) {
     onClose: handleClose,
     onFocusItem: focusItem,
     onSelectItem: handleSelectItem,
-    pageSize: PAGE_SIZE
+    pageSize: listVisibleCount
   })
 
   useEffect(() => {
diff --git a/src/renderer/src/components/ModelSelector/__tests__/ModelSelector.test.tsx b/src/renderer/src/components/ModelSelector/__tests__/ModelSelector.test.tsx
index f66618f6d9..295b0613a4 100644
--- a/src/renderer/src/components/ModelSelector/__tests__/ModelSelector.test.tsx
+++ b/src/renderer/src/components/ModelSelector/__tests__/ModelSelector.test.tsx
@@ -7,12 +7,15 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ModelSelector } from '../ModelSelector'
 import type { FlatListItem, ModelSelectorModelItem, UseModelSelectorDataResult } from '../types'
 
-const { mockUseModelSelectorData, mockNavigate, mockScrollToIndex, mockLoggerError } = vi.hoisted(() => ({
-  mockUseModelSelectorData: vi.fn(),
-  mockNavigate: vi.fn(),
-  mockScrollToIndex: vi.fn(),
-  mockLoggerError: vi.fn()
-}))
+const { mockUseModelSelectorData, mockNavigate, mockScrollToIndex, mockLoggerError, mockVirtualListSizes } = vi.hoisted(
+  () => ({
+    mockUseModelSelectorData: vi.fn(),
+    mockNavigate: vi.fn(),
+    mockScrollToIndex: vi.fn(),
+    mockLoggerError: vi.fn(),
+    mockVirtualListSizes: [] as number[]
+  })
+)
 
 vi.mock('@logger', () => ({
   loggerService: {
@@ -48,11 +51,15 @@ vi.mock('@cherrystudio/ui', () => {
     Avatar: ({ children }: { children: ReactNode }) => <div>{children}</div>,
     AvatarFallback: ({ children }: { children: ReactNode }) => <span>{children}</span>,
     Button: ({ children, ...props }: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: string; size?: string }) => {
-      const { variant, size, ...buttonProps } = props
+      const { variant, size, type = 'button', ...buttonProps } = props
       void variant
       void size
 
-      return <button {...buttonProps}>{children}</button>
+      return (
+        <button type={type} {...buttonProps}>
+          {children}
+        </button>
+      )
     },
     Checkbox: ({ checked, ...props }: InputHTMLAttributes<HTMLInputElement>) => (
       <input type="checkbox" checked={Boolean(checked)} readOnly {...props} />
@@ -100,7 +107,8 @@ vi.mock('@renderer/components/VirtualList', async () => {
   const React = await import('react')
 
   return {
-    DynamicVirtualList: ({ ref, list, children }) => {
+    DynamicVirtualList: ({ ref, list, children, size }) => {
+      mockVirtualListSizes.push(size)
       React.useImperativeHandle(ref, () => ({
         measure: vi.fn(),
         scrollElement: vi.fn(() => null),
@@ -214,6 +222,7 @@ describe('ModelSelector', () => {
     mockNavigate.mockReset()
     mockScrollToIndex.mockReset()
     mockLoggerError.mockReset()
+    mockVirtualListSizes.length = 0
     mockNavigate.mockResolvedValue(undefined)
     vi.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
       callback(0)
@@ -306,4 +315,26 @@ describe('ModelSelector', () => {
     )
     expect(onSelect).not.toHaveBeenCalled()
   })
+
+  it('uses listVisibleCount to size the visible model list', () => {
+    const items = Array.from({ length: 10 }, (_, index) => makeModelItem(`openai::model-${index}` as UniqueModelId))
+    mockUseModelSelectorData.mockReturnValue(
+      makeData({
+        listItems: items,
+        modelItems: items
+      })
+    )
+
+    render(
+      <ModelSelector
+        open
+        multiple={false}
+        listVisibleCount={8}
+        trigger={<button type="button">open</button>}
+        onSelect={vi.fn()}
+      />
+    )
+
+    expect(mockVirtualListSizes.at(-1)).toBe(8 * 36)
+  })
 })
diff --git a/src/renderer/src/components/ModelSelector/types.ts b/src/renderer/src/components/ModelSelector/types.ts
index 9e16bef034..8e3a321224 100644
--- a/src/renderer/src/components/ModelSelector/types.ts
+++ b/src/renderer/src/components/ModelSelector/types.ts
@@ -20,6 +20,7 @@ interface ModelSelectorCommonProps {
   align?: ModelSelectorAlign
   sideOffset?: number
   contentClassName?: string
+  listVisibleCount?: number
   multiSelectMode?: boolean
   defaultMultiSelectMode?: boolean
   onMultiSelectModeChange?: (enabled: boolean) => void
diff --git a/src/renderer/src/components/ModelSelectorLegacy.tsx b/src/renderer/src/components/ModelSelectorLegacy.tsx
index b9231b76eb..c2b43b31f4 100644
--- a/src/renderer/src/components/ModelSelectorLegacy.tsx
+++ b/src/renderer/src/components/ModelSelectorLegacy.tsx
@@ -63,9 +63,9 @@ const ModelSelector = ({
         .filter((model) => predicate?.(model) ?? true)
         .map((m) => ({
           label: (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
               {showAvatar && <ModelAvatar model={m} size={18} />}
-              <span>
+              <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                 {m.name}
                 {suffix}
               </span>
@@ -107,13 +107,15 @@ const ModelSelector = ({
         return label
       } else {
         return (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
             {showAvatar && (
               <Avatar className="h-[18px] w-[18px]">
                 <AvatarFallback />
               </Avatar>
             )}
-            <span>{t('knowledge.error.model_invalid')}</span>
+            <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {t('knowledge.error.model_invalid')}
+            </span>
           </div>
         )
       }
diff --git a/src/renderer/src/components/S3BackupManager.tsx b/src/renderer/src/components/S3BackupManager.tsx
index 4352728267..2153a734f0 100644
--- a/src/renderer/src/components/S3BackupManager.tsx
+++ b/src/renderer/src/components/S3BackupManager.tsx
@@ -258,23 +258,21 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
       width={800}
       centered
       transitionName="animation-move-down"
-      footer={[
-        <Button key="refresh" onClick={fetchBackupFiles} disabled={loading}>
-          <ReloadOutlined />
-          {t('settings.data.s3.manager.refresh')}
-        </Button>,
-        <Button
-          key="delete"
-          variant="destructive"
-          onClick={handleDeleteSelected}
-          disabled={selectedRowKeys.length === 0 || deleting}>
-          <DeleteOutlined />
-          {t('settings.data.s3.manager.delete.selected', { count: selectedRowKeys.length })}
-        </Button>,
-        <Button key="close" onClick={onClose}>
-          {t('settings.data.s3.manager.close')}
-        </Button>
-      ]}>
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={fetchBackupFiles} disabled={loading}>
+            <ReloadOutlined />
+            {t('settings.data.s3.manager.refresh')}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDeleteSelected}
+            disabled={selectedRowKeys.length === 0 || deleting}>
+            <DeleteOutlined />
+            {t('settings.data.s3.manager.delete.selected', { count: selectedRowKeys.length })}
+          </Button>
+        </div>
+      }>
       <Table
         rowKey="fileName"
         columns={columns}
diff --git a/src/renderer/src/components/Sidebar/Sidebar.tsx b/src/renderer/src/components/Sidebar/Sidebar.tsx
index 7f502f3d39..7be84ea917 100644
--- a/src/renderer/src/components/Sidebar/Sidebar.tsx
+++ b/src/renderer/src/components/Sidebar/Sidebar.tsx
@@ -68,6 +68,16 @@ export function Sidebar({
   const showSearch = Boolean(onSearchClick)
   const logoNode = logo ?? <DefaultLogo title={title} />
 
+  const renderLogo = (size: 'sm' | 'default' = 'default') => (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-center overflow-hidden *:h-full *:w-full',
+        size === 'sm' ? 'size-8 rounded-lg' : 'size-9 rounded-lg'
+      )}>
+      {logoNode}
+    </div>
+  )
+
   useEffect(() => {
     return () => {
       if (hoverTimeout.current) clearTimeout(hoverTimeout.current)
@@ -88,7 +98,7 @@ export function Sidebar({
       <div className="fixed inset-0 z-40" onClick={handleDismiss}>
         <div
           className={cn(
-            'slide-in-from-left-2 fixed top-0 bottom-0 left-0 flex w-[174px] animate-in select-none flex-col rounded-r-[4px] rounded-br-[16px] bg-sidebar/70 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 duration-200 [-webkit-app-region:drag]',
+            'slide-in-from-left-2 fixed top-0 bottom-0 left-0 flex w-43.5 animate-in select-none flex-col rounded-r-sm rounded-br-2xl bg-sidebar/70 shadow-2xl backdrop-blur-2xl backdrop-saturate-150 duration-200 [-webkit-app-region:drag]',
             isMac && 'pt-[env(titlebar-area-height)]'
           )}
           onClick={(event) => event.stopPropagation()}
@@ -99,8 +109,8 @@ export function Sidebar({
           onMouseEnter={() => {
             if (hoverTimeout.current) clearTimeout(hoverTimeout.current)
           }}>
-          <div className="flex h-14 flex-shrink-0 items-center gap-2.5 px-4 [-webkit-app-region:drag]">
-            {logoNode}
+          <div className="flex h-14 shrink-0 items-center gap-2.5 px-4 [-webkit-app-region:drag]">
+            {renderLogo()}
             <span className="truncate text-sidebar-foreground text-sm">{title}</span>
           </div>
 
@@ -124,7 +134,7 @@ export function Sidebar({
           </div>
 
           {showFooter && (
-            <div className="flex-shrink-0">
+            <div className="shrink-0">
               <SidebarFooter layout="full" {...footerProps} />
             </div>
           )}
@@ -136,9 +146,9 @@ export function Sidebar({
   // --- Hidden sidebar (hover zone + resize handle) ---
   if (layout === 'hidden') {
     return (
-      <div ref={sidebarRef} className="relative h-full w-2 flex-shrink-0">
+      <div ref={sidebarRef} className="relative h-full w-2 shrink-0">
         <div
-          className="absolute top-0 bottom-0 left-0 z-50 w-[16px]"
+          className="absolute top-0 bottom-0 left-0 z-50 w-4"
           onMouseEnter={() => {
             if (hoverTimeout.current) clearTimeout(hoverTimeout.current)
             hoverTimeout.current = setTimeout(() => onHoverChange?.(true), 200)
@@ -152,7 +162,7 @@ export function Sidebar({
               startResizing(event)
             }}
             className="group/handle h-full w-full cursor-col-resize">
-            <div className="ml-[2px] h-full w-[2px] rounded-full bg-primary/30 opacity-0 transition-opacity group-hover/handle:opacity-100" />
+            <div className="ml-0.5 h-full w-0.5 rounded-full bg-primary/30 opacity-0 transition-opacity group-hover/handle:opacity-100" />
           </div>
         </div>
       </div>
@@ -168,13 +178,13 @@ export function Sidebar({
       ref={sidebarRef}
       style={{ width: actualWidth }}
       className={cn(
-        'group/sidebar relative z-20 flex h-full flex-shrink-0 select-none flex-col [-webkit-app-region:drag]',
+        'group/sidebar relative z-20 flex h-full shrink-0 select-none flex-col [-webkit-app-region:drag]',
         isMacTransparentWindow ? 'bg-transparent' : 'bg-sidebar'
       )}>
       {/* Header */}
       <div
-        className={`flex flex-shrink-0 items-center [-webkit-app-region:drag] ${layout === 'full' ? 'h-14 gap-2.5 px-4' : 'h-14 justify-center'}`}>
-        {logoNode}
+        className={`flex shrink-0 items-center [-webkit-app-region:drag] ${layout === 'full' ? 'h-14 gap-2.5 px-4' : 'h-14 justify-center'}`}>
+        {renderLogo(layout === 'icon' ? 'sm' : 'default')}
         {layout === 'full' && <span className="truncate text-sidebar-foreground text-sm">{title}</span>}
       </div>
 
@@ -210,7 +220,7 @@ export function Sidebar({
 
       {/* Footer */}
       {showFooter && (
-        <div className="flex-shrink-0">
+        <div className="shrink-0">
           <SidebarFooter layout={layout} {...footerProps} />
         </div>
       )}
@@ -218,7 +228,7 @@ export function Sidebar({
       {/* Resize handle */}
       <div
         onMouseDown={startResizing}
-        className="group/handle absolute top-0 right-0 bottom-0 z-50 w-[3px] cursor-col-resize">
+        className="group/handle absolute top-0 right-0 bottom-0 z-50 w-0.75 cursor-col-resize">
         <div className="h-full w-full bg-primary/20 opacity-0 transition-opacity group-hover/handle:opacity-100" />
       </div>
     </div>
diff --git a/src/renderer/src/components/Sidebar/SidebarDocked.tsx b/src/renderer/src/components/Sidebar/SidebarDocked.tsx
index d89c5be5c7..71eb086124 100644
--- a/src/renderer/src/components/Sidebar/SidebarDocked.tsx
+++ b/src/renderer/src/components/Sidebar/SidebarDocked.tsx
@@ -46,10 +46,10 @@ function IconDockedTabs({
                   event.stopPropagation()
                   onStartSidebarDrag?.(event, dockedTab.id)
                 }}
-                className={`relative flex h-7 w-7 cursor-grab items-center justify-center rounded-md transition-all duration-150 active:cursor-grabbing ${
+                className={`relative flex h-7 w-7 cursor-grab items-center justify-center rounded-full transition-all duration-150 active:cursor-grabbing ${
                   isActive ? 'bg-sidebar-active-bg' : 'hover:bg-accent/50'
                 }`}>
-                {isActive && <ActiveIndicator className="rounded-md" />}
+                {isActive && <ActiveIndicator className="rounded-full" />}
                 <SidebarTabIcon tab={dockedTab} size={14} strokeWidth={1.6} miniAppSize="md" />
               </button>
             </SidebarTooltip>
diff --git a/src/renderer/src/components/Sidebar/SidebarFooter.tsx b/src/renderer/src/components/Sidebar/SidebarFooter.tsx
index 6832898829..5a17ceb5f0 100644
--- a/src/renderer/src/components/Sidebar/SidebarFooter.tsx
+++ b/src/renderer/src/components/Sidebar/SidebarFooter.tsx
@@ -23,13 +23,13 @@ type FooterProps = Omit<SidebarFooterProps, 'layout'>
 
 function IconFooter({ user, actions, extensionsLabel, onExtensionsClick }: FooterProps) {
   return (
-    <div className="flex flex-col items-center gap-1 px-1.5 pt-2 pb-2.5 [-webkit-app-region:no-drag]">
+    <div className="flex flex-col items-center gap-1 px-1.5 pt-2 pb-5 [-webkit-app-region:no-drag]">
       {extensionsLabel && (
         <SidebarTooltip content={extensionsLabel}>
           <button
             type="button"
             onClick={onExtensionsClick}
-            className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground">
+            className="flex h-9 w-9 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground">
             <Columns2 size={18} strokeWidth={1.6} />
           </button>
         </SidebarTooltip>
@@ -46,7 +46,7 @@ function IconFooter({ user, actions, extensionsLabel, onExtensionsClick }: Foote
 
 function VerticalCardFooter({ user, actions, extensionsLabel, onExtensionsClick }: FooterProps) {
   return (
-    <div className="flex flex-col items-center gap-0 px-1 pt-1 pb-3 [-webkit-app-region:no-drag]">
+    <div className="flex flex-col items-center gap-0 px-1 pt-1 pb-5 [-webkit-app-region:no-drag]">
       {extensionsLabel && (
         <button
           type="button"
diff --git a/src/renderer/src/components/Sidebar/SidebarMenu.tsx b/src/renderer/src/components/Sidebar/SidebarMenu.tsx
index f785fffa9c..5fbda0001c 100644
--- a/src/renderer/src/components/Sidebar/SidebarMenu.tsx
+++ b/src/renderer/src/components/Sidebar/SidebarMenu.tsx
@@ -35,12 +35,12 @@ function IconMenuItems({ items, activeItem, activeTabId, onItemClick, onMiniAppT
               <button
                 type="button"
                 onClick={() => void onItemClick(item.id)}
-                className={`relative flex h-9 w-9 items-center justify-center rounded-md transition-all duration-150 ${
+                className={`relative flex h-9 w-9 items-center justify-center rounded-full transition-all duration-150 ${
                   isActive
                     ? 'bg-sidebar-active-bg text-foreground'
                     : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground'
                 }`}>
-                {isActive && <ActiveIndicator className="rounded-md" />}
+                {isActive && <ActiveIndicator className="rounded-full" />}
                 <Icon size={18} strokeWidth={1.6} />
               </button>
             </SidebarTooltip>
@@ -50,10 +50,10 @@ function IconMenuItems({ items, activeItem, activeTabId, onItemClick, onMiniAppT
                 <button
                   type="button"
                   onClick={() => onMiniAppTabClick?.(miniTab.id)}
-                  className={`relative flex h-7 w-7 items-center justify-center rounded-md transition-all duration-150 ${
+                  className={`relative flex h-7 w-7 items-center justify-center rounded-full transition-all duration-150 ${
                     activeTabId === miniTab.id ? 'bg-sidebar-active-bg' : 'hover:bg-accent/50'
                   }`}>
-                  {activeTabId === miniTab.id && <ActiveIndicator className="rounded-md" />}
+                  {activeTabId === miniTab.id && <ActiveIndicator className="rounded-full" />}
                   <MiniAppIcon tab={miniTab} size="md" />
                 </button>
               </SidebarTooltip>
@@ -78,12 +78,12 @@ function VerticalCardMenuItems({ items, activeItem, activeTabId, onItemClick, on
             <button
               type="button"
               onClick={() => void onItemClick(item.id)}
-              className={`relative flex w-full flex-col items-center gap-0.5 rounded-[16px] py-2.5 transition-all duration-150 ${
+              className={`relative flex w-full flex-col items-center gap-0.5 rounded-lg py-2.5 transition-all duration-150 ${
                 isActive
                   ? 'bg-sidebar-active-bg text-foreground'
                   : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
               }`}>
-              {isActive && <ActiveIndicator className="rounded-[16px]" />}
+              {isActive && <ActiveIndicator className="rounded-lg" />}
               <Icon size={18} strokeWidth={1.6} />
               <span className="text-[9px] leading-tight">{item.label}</span>
             </button>
@@ -93,12 +93,12 @@ function VerticalCardMenuItems({ items, activeItem, activeTabId, onItemClick, on
                 type="button"
                 key={miniTab.id}
                 onClick={() => onMiniAppTabClick?.(miniTab.id)}
-                className={`relative flex w-full flex-col items-center gap-0.5 rounded-[16px] py-2 transition-all duration-150 ${
+                className={`relative flex w-full flex-col items-center gap-0.5 rounded-lg py-2 transition-all duration-150 ${
                   activeTabId === miniTab.id
                     ? 'bg-sidebar-active-bg text-foreground'
                     : 'text-muted-foreground hover:bg-accent/40 hover:text-foreground'
                 }`}>
-                {activeTabId === miniTab.id && <ActiveIndicator className="rounded-[16px]" />}
+                {activeTabId === miniTab.id && <ActiveIndicator className="rounded-lg" />}
                 <MiniAppIcon tab={miniTab} size="md" />
                 <span className="max-w-[50px] truncate text-[8px] leading-tight">{miniTab.title}</span>
               </button>
diff --git a/src/renderer/src/components/TextBadge.tsx b/src/renderer/src/components/TextBadge.tsx
deleted file mode 100644
index d531d425e4..0000000000
--- a/src/renderer/src/components/TextBadge.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { FC } from 'react'
-import styled from 'styled-components'
-
-interface Props {
-  text: string
-  style?: React.CSSProperties
-}
-
-const TextBadge: FC<Props> = ({ text, style }) => {
-  return <Container style={style}>{text}</Container>
-}
-
-const Container = styled.span`
-  font-size: 12px;
-  color: var(--color-primary);
-  background: var(--color-primary-bg);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-weight: 500;
-`
-
-export default TextBadge
diff --git a/src/renderer/src/components/TopView/index.tsx b/src/renderer/src/components/TopView/index.tsx
index e9acaa3d88..e9c0a28210 100644
--- a/src/renderer/src/components/TopView/index.tsx
+++ b/src/renderer/src/components/TopView/index.tsx
@@ -1,8 +1,9 @@
 // import { loggerService } from '@logger'
 import { Box } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
+import AppModalProvider from '@renderer/components/AppModal'
 import { useAppInit } from '@renderer/hooks/useAppInit'
-import { message, Modal } from 'antd'
+import { message } from 'antd'
 import type { PropsWithChildren } from 'react'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
@@ -34,7 +35,6 @@ const TopViewContainer: React.FC<Props> = ({ children }) => {
   const elementsRef = useRef<ElementItem[]>([])
   elementsRef.current = elements
 
-  const [modal, modalContextHolder] = Modal.useModal()
   const [messageApi, messageContextHolder] = message.useMessage()
   const [exitFullscreenPref] = usePreference('shortcut.general.exit_fullscreen')
   const enableQuitFullScreen = exitFullscreenPref?.enabled !== false
@@ -42,10 +42,9 @@ const TopViewContainer: React.FC<Props> = ({ children }) => {
   useAppInit()
 
   useEffect(() => {
-    window.modal = modal
     initMessageApi(messageApi)
     window.toast = getToastUtilities()
-  }, [messageApi, modal])
+  }, [messageApi])
 
   onPop = () => {
     const views = [...elementsRef.current]
@@ -99,7 +98,11 @@ const TopViewContainer: React.FC<Props> = ({ children }) => {
     <>
       {children}
       {messageContextHolder}
-      {modalContextHolder}
+      <AppModalProvider
+        onReady={(modal) => {
+          window.modal = modal
+        }}
+      />
       {elements.map(({ element: Element, id }) => (
         <FullScreenContainer key={`TOPVIEW_${id}`}>
           {typeof Element === 'function' ? <Element /> : Element}
diff --git a/src/renderer/src/components/WebdavBackupManager.tsx b/src/renderer/src/components/WebdavBackupManager.tsx
index 7b93363a04..9e05064b92 100644
--- a/src/renderer/src/components/WebdavBackupManager.tsx
+++ b/src/renderer/src/components/WebdavBackupManager.tsx
@@ -265,23 +265,21 @@ export function WebdavBackupManager({
       width={800}
       centered
       transitionName="animation-move-down"
-      footer={[
-        <Button key="refresh" onClick={fetchBackupFiles} disabled={loading}>
-          <ReloadOutlined />
-          {t('settings.data.webdav.backup.manager.refresh')}
-        </Button>,
-        <Button
-          key="delete"
-          variant="destructive"
-          onClick={handleDeleteSelected}
-          disabled={selectedRowKeys.length === 0 || deleting}>
-          <DeleteOutlined />
-          {t('settings.data.webdav.backup.manager.delete.selected')} ({selectedRowKeys.length})
-        </Button>,
-        <Button key="close" onClick={onClose}>
-          {t('common.close')}
-        </Button>
-      ]}>
+      footer={
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={fetchBackupFiles} disabled={loading}>
+            <ReloadOutlined />
+            {t('settings.data.webdav.backup.manager.refresh')}
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDeleteSelected}
+            disabled={selectedRowKeys.length === 0 || deleting}>
+            <DeleteOutlined />
+            {t('settings.data.webdav.backup.manager.delete.selected')} ({selectedRowKeys.length})
+          </Button>
+        </div>
+      }>
       <Table
         rowKey="fileName"
         columns={columns}
diff --git a/src/renderer/src/components/layout/AppShellTabBar.tsx b/src/renderer/src/components/layout/AppShellTabBar.tsx
index 3f91c91779..680ddae172 100644
--- a/src/renderer/src/components/layout/AppShellTabBar.tsx
+++ b/src/renderer/src/components/layout/AppShellTabBar.tsx
@@ -291,7 +291,7 @@ export const AppShellTabBar = ({
       isMacTransparentWindow
         ? {
             activeClass:
-              'border border-black/8 bg-white/78 text-sidebar-foreground backdrop-blur-sm dark:border-white/14 dark:bg-white/16 dark:text-sidebar-foreground',
+              'border border-black/8 bg-white/78 text-sidebar-foreground backdrop-blur-sm dark:border-0 dark:bg-white/6 dark:text-sidebar-foreground dark:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]',
             hoverClass:
               'text-muted-foreground hover:bg-black/6 hover:text-sidebar-foreground hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.28)] dark:hover:bg-white/6 dark:hover:text-sidebar-foreground dark:hover:shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04)]'
           }
@@ -478,8 +478,8 @@ export const AppShellTabBar = ({
               type="button"
               onClick={handleAddTab}
               className={cn(
-                'sticky right-0 ml-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors [-webkit-app-region:no-drag] hover:bg-sidebar-accent hover:text-sidebar-foreground',
-                isMacTransparentWindow ? 'bg-white/60 backdrop-blur-sm dark:bg-black/40' : 'bg-sidebar'
+                'sticky right-0 ml-0.5 flex h-7 w-7 shrink-0 appearance-none items-center justify-center rounded-[10px] border-0 bg-transparent p-0 text-muted-foreground shadow-none transition-colors [-webkit-app-region:no-drag] hover:text-sidebar-foreground',
+                isMacTransparentWindow ? 'hover:bg-white/50 dark:hover:bg-white/8' : 'hover:bg-sidebar-accent'
               )}
               title={t('tab.new')}>
               <Plus size={14} />
diff --git a/src/renderer/src/components/layout/ShellTabBarActions.tsx b/src/renderer/src/components/layout/ShellTabBarActions.tsx
index 46b6637331..772506b364 100644
--- a/src/renderer/src/components/layout/ShellTabBarActions.tsx
+++ b/src/renderer/src/components/layout/ShellTabBarActions.tsx
@@ -1,15 +1,18 @@
 import { Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
+import { loggerService } from '@logger'
 import { isLinux, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { getThemeModeLabel } from '@renderer/i18n/label'
-import { getDefaultRouteTitle } from '@renderer/utils/routeTitle'
+import { openSettingsWindow } from '@renderer/services/SettingsWindowService'
+import { formatErrorMessage } from '@renderer/utils/error'
 import { Monitor, Moon, Settings, Sun } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
-import { useTabs } from '../../hooks/useTabs'
 import WindowControls from '../WindowControls'
 
+const logger = loggerService.withContext('ShellTabBarActions')
+
 export function useShellTabBarLayout(isDetached: boolean) {
   const [useSystemTitleBar] = usePreference('app.use_system_title_bar')
   const hasWindowControls = isWin || (isLinux && !useSystemTitleBar)
@@ -31,33 +34,18 @@ export function useShellTabBarLayout(isDetached: boolean) {
 export function ShellTabBarActions({ isDetached = false }: { isDetached?: boolean }) {
   const { t } = useTranslation()
   const { settedTheme, toggleTheme } = useTheme()
-  const { tabs, activeTabId, openTab, updateTab } = useTabs()
   const { hasWindowControls } = useShellTabBarLayout(isDetached)
 
   const ThemeIcon = settedTheme === 'dark' ? Moon : settedTheme === 'light' ? Sun : Monitor
 
-  const handleSettingsClick = () => {
+  const handleSettingsClick = async () => {
     const settingsPath = '/settings/provider'
-    const hasUserTabsInTabBar = tabs.some((tab) => tab.id !== 'home')
 
-    if (!hasUserTabsInTabBar) {
-      openTab(settingsPath, {
-        forceNew: true,
-        title: getDefaultRouteTitle(settingsPath)
-      })
-      return
-    }
-
-    if (activeTabId) {
-      // Clear any per-entity icon (e.g. a mini-app logo carried over from
-      // /app/mini-app/<id>) so the settings tab falls back to its default
-      // route icon. Same pattern as AppShell.handleUrlChange and
-      // Sidebar.handleNavigate.
-      updateTab(activeTabId, {
-        url: settingsPath,
-        title: getDefaultRouteTitle(settingsPath),
-        icon: undefined
-      })
+    try {
+      await openSettingsWindow(settingsPath)
+    } catch (error) {
+      logger.error('Failed to open settings', error as Error)
+      window.toast.error({ title: t('common.error'), description: formatErrorMessage(error) })
     }
   }
 
@@ -69,19 +57,19 @@ export function ShellTabBarActions({ isDetached = false }: { isDetached?: boolea
             <Tooltip placement="bottom" content={getThemeModeLabel(settedTheme)} delay={800}>
               <button
                 type="button"
+                aria-label={getThemeModeLabel(settedTheme)}
                 onClick={toggleTheme}
                 className="flex h-8 w-8 items-center justify-center rounded-[8px] text-foreground/80 transition-colors hover:bg-[rgba(107,114,128,0.12)] hover:text-foreground">
                 <ThemeIcon size={16} strokeWidth={1.8} />
               </button>
             </Tooltip>
-            <Tooltip placement="bottom" content={t('settings.title')} delay={800}>
-              <button
-                type="button"
-                onClick={handleSettingsClick}
-                className="flex h-8 w-8 items-center justify-center rounded-[8px] text-foreground/80 transition-colors hover:bg-[rgba(107,114,128,0.12)] hover:text-foreground">
-                <Settings size={16} strokeWidth={1.8} />
-              </button>
-            </Tooltip>
+            <button
+              type="button"
+              aria-label={t('settings.title')}
+              onClick={handleSettingsClick}
+              className="flex h-8 w-8 items-center justify-center rounded-[8px] text-foreground/80 transition-colors hover:bg-[rgba(107,114,128,0.12)] hover:text-foreground">
+              <Settings size={16} strokeWidth={1.8} />
+            </button>
           </div>
         </div>
       )}
diff --git a/src/renderer/src/components/layout/__tests__/ShellTabBarActions.test.tsx b/src/renderer/src/components/layout/__tests__/ShellTabBarActions.test.tsx
new file mode 100644
index 0000000000..3f249f8dc5
--- /dev/null
+++ b/src/renderer/src/components/layout/__tests__/ShellTabBarActions.test.tsx
@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mocks } = vi.hoisted(() => ({
+  mocks: {
+    openSettingsWindow: vi.fn(),
+    toastError: vi.fn()
+  }
+}))
+
+vi.mock('@logger', () => ({
+  loggerService: {
+    withContext: () => ({
+      error: vi.fn()
+    })
+  }
+}))
+
+vi.mock('@cherrystudio/ui', () => ({
+  Tooltip: ({ children }: { children: React.ReactNode }) => children
+}))
+
+vi.mock('@data/hooks/usePreference', () => ({
+  usePreference: (key: string) => {
+    if (key === 'app.use_system_title_bar') return [false]
+    return [undefined]
+  }
+}))
+
+vi.mock('@renderer/context/ThemeProvider', () => ({
+  useTheme: () => ({ settedTheme: 'light', toggleTheme: vi.fn() })
+}))
+
+vi.mock('@renderer/i18n/label', () => ({
+  getThemeModeLabel: () => 'Light'
+}))
+
+vi.mock('@renderer/services/SettingsWindowService', () => ({
+  openSettingsWindow: mocks.openSettingsWindow
+}))
+
+vi.mock('@renderer/utils/error', () => ({
+  formatErrorMessage: (error: unknown) => (error instanceof Error ? error.message : String(error))
+}))
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => (key === 'settings.title' ? 'Settings' : key) })
+}))
+
+vi.mock('../../WindowControls', () => ({
+  default: () => null
+}))
+
+import { ShellTabBarActions } from '../ShellTabBarActions'
+
+afterEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe('ShellTabBarActions', () => {
+  beforeEach(() => {
+    Object.defineProperty(window, 'toast', {
+      configurable: true,
+      value: { error: mocks.toastError }
+    })
+  })
+
+  it('opens the standalone settings window', async () => {
+    const user = userEvent.setup()
+
+    render(<ShellTabBarActions />)
+
+    await user.click(screen.getByRole('button', { name: /settings/i }))
+
+    expect(mocks.openSettingsWindow).toHaveBeenCalledWith('/settings/provider')
+  })
+
+  it('shows a toast when opening the settings window fails', async () => {
+    const user = userEvent.setup()
+    mocks.openSettingsWindow.mockRejectedValueOnce(new Error('IPC failed'))
+
+    render(<ShellTabBarActions />)
+
+    await user.click(screen.getByRole('button', { name: /settings/i }))
+
+    await waitFor(() => {
+      expect(mocks.toastError).toHaveBeenCalledWith({ title: 'common.error', description: 'IPC failed' })
+    })
+  })
+})
diff --git a/src/renderer/src/config/constant.ts b/src/renderer/src/config/constant.ts
index 5774d95534..405bc70aaf 100644
--- a/src/renderer/src/config/constant.ts
+++ b/src/renderer/src/config/constant.ts
@@ -29,16 +29,10 @@ export const LOAD_MORE_COUNT = 20
 export const DEFAULT_COLOR_PRIMARY = '#00b96b'
 export const THEME_COLOR_PRESETS = [
   DEFAULT_COLOR_PRIMARY,
-  '#FF5470', // Coral Pink
-  '#14B8A6', // Teal
-  '#6366F1', // Indigo
-  '#8B5CF6', // Purple
-  '#EC4899', // Pink
-  '#3B82F6', // Blue
+  '#EF4444', // Red
   '#F59E0B', // Amber
-  '#6D28D9', // Violet
-  '#0EA5E9', // Sky Blue
-  '#0284C7' // Light Blue
+  '#3B82F6', // Blue
+  '#8B5CF6' // Purple
 ]
 
 export const MAX_CONTEXT_COUNT = 100
diff --git a/src/renderer/src/context/TabsContext.tsx b/src/renderer/src/context/TabsContext.tsx
index 324258b739..f85aa47356 100644
--- a/src/renderer/src/context/TabsContext.tsx
+++ b/src/renderer/src/context/TabsContext.tsx
@@ -21,13 +21,17 @@ const DEFAULT_TAB: Tab = {
 
 function withLocalizedRouteTitle(tab: Tab): Tab {
   if (tab.type !== 'route') return tab
-  // Only auto-localize titles for top-level routes. Parameterized routes
-  // (e.g. /app/mini-app/<id>) preserve the title supplied at openTab time so
-  // callers can pass per-entity names like a mini-app's display name.
-  if (!isTopLevelRoute(tab.url)) return tab
+  // Only auto-localize titles for top-level and settings routes. Parameterized
+  // routes (e.g. /app/mini-app/<id>) preserve the title supplied at openTab
+  // time so callers can pass per-entity names like a mini-app's display name.
+  if (!isTopLevelRoute(tab.url) && !isSettingsRouteTab(tab)) return tab
   return { ...tab, title: getDefaultRouteTitle(tab.url) }
 }
 
+function isSettingsRouteTab(tab: Tab): boolean {
+  return tab.type === 'route' && tab.url.startsWith('/settings')
+}
+
 /**
  * Options for opening a tab
  */
@@ -433,7 +437,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       attachTab(tabData)
     }
 
-    return window.electron.ipcRenderer.on(IpcChannel.Tab_Attach, handleAttachRequest)
+    const removeAttachRequest = window.electron.ipcRenderer.on(IpcChannel.Tab_Attach, handleAttachRequest)
+
+    return removeAttachRequest
   }, [attachTab])
 
   /**
@@ -484,3 +490,7 @@ export function useTabsContext() {
   }
   return context
 }
+
+export function useOptionalTabsContext() {
+  return use(TabsContext)
+}
diff --git a/src/renderer/src/context/ThemeProvider.tsx b/src/renderer/src/context/ThemeProvider.tsx
index ce12ef6cd9..974d00c325 100644
--- a/src/renderer/src/context/ThemeProvider.tsx
+++ b/src/renderer/src/context/ThemeProvider.tsx
@@ -30,6 +30,9 @@ const tailwindThemeChange = (theme: ThemeMode) => {
   root.classList.add(theme)
 }
 
+const getSystemTheme = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.dark : ThemeMode.light
+
 export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   // 用户设置的主题
   // const { theme: settedTheme, setTheme: setSettedTheme, language } = useSettings()
@@ -37,9 +40,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   const [settedTheme, setSettedTheme] = usePreference('ui.theme_mode')
   const [language] = usePreference('app.language')
 
-  const [actualTheme, setActualTheme] = useState<ThemeMode>(
-    window.matchMedia('(prefers-color-scheme: dark)').matches ? ThemeMode.dark : ThemeMode.light
-  )
+  const [actualTheme, setActualTheme] = useState<ThemeMode>(getSystemTheme)
   const { initUserTheme } = useUserTheme()
   const { navbarPosition } = useNavbarPosition()
 
@@ -83,6 +84,26 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     tailwindThemeChange(actualTheme)
   }, [actualTheme])
 
+  useEffect(() => {
+    if (settedTheme === ThemeMode.light || settedTheme === ThemeMode.dark) {
+      setActualTheme(settedTheme)
+      return
+    }
+
+    if (settedTheme !== ThemeMode.system) {
+      return
+    }
+
+    const media = window.matchMedia('(prefers-color-scheme: dark)')
+    const updateSystemTheme = () => {
+      setActualTheme(media.matches ? ThemeMode.dark : ThemeMode.light)
+    }
+
+    updateSystemTheme()
+    media.addEventListener('change', updateSystemTheme)
+    return () => media.removeEventListener('change', updateSystemTheme)
+  }, [settedTheme])
+
   return (
     <ThemeContext value={{ theme: actualTheme, settedTheme: settedTheme, toggleTheme, setTheme: setSettedTheme }}>
       {children}
diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts
index 8ff317bf1b..93c27d1f39 100644
--- a/src/renderer/src/env.d.ts
+++ b/src/renderer/src/env.d.ts
@@ -2,8 +2,8 @@
 
 import type { PermissionUpdate } from '@anthropic-ai/claude-agent-sdk'
 import type { ToastUtilities } from '@cherrystudio/ui'
+import type { AppModalApi } from '@renderer/components/AppModal'
 import type { UseNavigateResult } from '@tanstack/react-router'
-import type { HookAPI } from 'antd/es/modal/useModal'
 
 interface ImportMetaEnv {
   VITE_RENDERER_INTEGRATED_MODEL: string
@@ -16,7 +16,7 @@ interface ImportMeta {
 declare global {
   interface Window {
     root: HTMLElement
-    modal: HookAPI
+    modal: AppModalApi
     store: any
     navigate: UseNavigateResult<string>
     toast: ToastUtilities
diff --git a/src/renderer/src/hooks/__tests__/useMiniAppPopup.test.ts b/src/renderer/src/hooks/__tests__/useMiniAppPopup.test.ts
index 2fff4820d8..e8bd10cd9d 100644
--- a/src/renderer/src/hooks/__tests__/useMiniAppPopup.test.ts
+++ b/src/renderer/src/hooks/__tests__/useMiniAppPopup.test.ts
@@ -10,29 +10,27 @@ vi.mock('@renderer/utils/webviewStateManager', () => ({
   clearWebviewState: vi.fn()
 }))
 
-vi.mock('@renderer/services/NavigationService', () => ({
-  default: {
-    navigate: vi.fn()
-  }
+const mockWindowApi = vi.hoisted(() => ({
+  openWebsite: vi.fn(),
+  openPath: vi.fn()
 }))
 
-// useTabs is consumed by useMiniAppPopup to find AppShell tabs that pin a
-// miniapp route — pinned tabs are exempt from keep-alive eviction. The test
-// surface here doesn't exercise the AppShell tab system, so default to "no
-// pinned tabs"; the pinned-exemption test below overrides this per-test.
+// TabsContext is consumed by useMiniAppPopup to open AppShell tabs and to find
+// pinned miniapp route tabs that are exempt from keep-alive eviction. The test
+// surface here defaults to "no pinned tabs"; individual tests override this.
 const mockTabs = vi.hoisted(() => ({
-  tabs: [] as Array<{ id: string; url: string; isPinned?: boolean; type: 'route' }>
+  tabs: [] as Array<{ id: string; url: string; isPinned?: boolean; type: 'route' }>,
+  hasContext: true,
+  openTab: vi.fn()
 }))
-vi.mock('@renderer/hooks/useTabs', () => ({
-  useTabs: () => ({ tabs: mockTabs.tabs })
+vi.mock('@renderer/context/TabsContext', () => ({
+  useOptionalTabsContext: () => (mockTabs.hasContext ? { tabs: mockTabs.tabs, openTab: mockTabs.openTab } : null)
 }))
 
 // Import mocked modules
-import NavigationService from '@renderer/services/NavigationService'
 import { clearWebviewState } from '@renderer/utils/webviewStateManager'
 
 const mockClearWebviewState = vi.mocked(clearWebviewState)
-const mockNavigate = vi.mocked(NavigationService.navigate)
 
 // Import hooks AFTER mocks
 import { useMiniAppPopup } from '../useMiniAppPopup'
@@ -71,8 +69,21 @@ describe('useMiniAppPopup', () => {
     MockUseDataApiUtils.resetMocks()
     MockUseDataApiUtils.mockQueryData('/mini-apps', miniAppList([]))
     mockClearWebviewState.mockClear()
-    mockNavigate!.mockClear()
     mockTabs.tabs = []
+    mockTabs.hasContext = true
+    mockTabs.openTab.mockClear()
+    mockWindowApi.openWebsite.mockReset()
+    mockWindowApi.openPath.mockReset()
+    mockWindowApi.openWebsite.mockResolvedValue(undefined)
+    mockWindowApi.openPath.mockResolvedValue(undefined)
+    Object.defineProperty(window, 'api', {
+      configurable: true,
+      value: {
+        ...window.api,
+        openWebsite: mockWindowApi.openWebsite,
+        openPath: mockWindowApi.openPath
+      }
+    })
   })
 
   // === Basic Return Values ===
@@ -88,6 +99,13 @@ describe('useMiniAppPopup', () => {
       expect(typeof result.current.closeAllMiniApps).toBe('function')
       expect(typeof result.current.openSmartMiniApp).toBe('function')
     })
+
+    it('should work without TabsProvider', () => {
+      mockTabs.hasContext = false
+      const { result } = renderHook(() => useMiniAppPopup())
+
+      expect(typeof result.current.openSmartMiniApp).toBe('function')
+    })
   })
 
   // === openMiniApp ===
@@ -384,10 +402,9 @@ describe('useMiniAppPopup', () => {
   // === openSmartMiniApp ===
 
   describe('openSmartMiniApp', () => {
-    it('should add to keep-alive + navigate for a new app', async () => {
+    it('should add to keep-alive + open a tab for a new app', async () => {
       MockUseCacheUtils.setCacheValue(KEEP_ALIVE_KEY, [])
       MockUseCacheUtils.setCacheValue('mini_app.show', false)
-      mockNavigate!.mockResolvedValue(undefined)
       const { result } = renderHook(() => useTestMiniAppPopup())
 
       await act(async () => {
@@ -402,20 +419,22 @@ describe('useMiniAppPopup', () => {
       expect(isInKeepAlive('top-nav-app')).toBe(true)
       expect(MockUseCacheUtils.getCacheValue('mini_app.show')).toBe(true)
       expect(MockUseCacheUtils.getCacheValue('mini_app.current_id')).toBe('top-nav-app')
-      expect(mockNavigate).toHaveBeenCalledWith({ to: '/app/mini-app/top-nav-app' })
+      expect(mockTabs.openTab).toHaveBeenCalledWith('/app/mini-app/top-nav-app', {
+        title: 'Top Nav App',
+        icon: 'icon'
+      })
     })
 
-    it('should still route to the app when the keep-alive entry already exists', async () => {
+    it('should still activate the app tab when the keep-alive entry already exists', async () => {
       // `MiniAppTabsPool.shouldShow` keys off the active tab URL, not pool
-      // membership. Every caller of `openSmartMiniApp` (AboutSettings, Notion,
-      // OpenClaw, etc.) sits on a non-mini-app route, so skipping `navigate`
+      // membership. Every caller of `openSmartMiniApp` (AboutSettings, S3,
+      // OpenClaw, etc.) sits on a non-mini-app route, so skipping `openTab`
       // when cached would leave the pool hidden and the user looking at a
       // settings page. Webview re-use stays correct: we don't recreate the
       // keep-alive entry or reset `src`, only the route activates.
       const existing = createMiniApp('cached-app')
       MockUseCacheUtils.setCacheValue(KEEP_ALIVE_KEY, [existing])
       MockUseCacheUtils.setCacheValue('mini_app.show', false)
-      mockNavigate!.mockResolvedValue(undefined)
       const { result } = renderHook(() => useTestMiniAppPopup())
 
       await act(async () => {
@@ -429,7 +448,50 @@ describe('useMiniAppPopup', () => {
 
       expect(MockUseCacheUtils.getCacheValue('mini_app.show')).toBe(true)
       expect(MockUseCacheUtils.getCacheValue('mini_app.current_id')).toBe('cached-app')
-      expect(mockNavigate).toHaveBeenCalledWith({ to: '/app/mini-app/cached-app' })
+      expect(mockTabs.openTab).toHaveBeenCalledWith('/app/mini-app/cached-app', {
+        title: 'Cached App',
+        icon: 'icon'
+      })
+    })
+
+    it('should open http URLs externally without TabsProvider', async () => {
+      mockTabs.hasContext = false
+      MockUseCacheUtils.setCacheValue(KEEP_ALIVE_KEY, [])
+      const { result } = renderHook(() => useTestMiniAppPopup())
+
+      await act(async () => {
+        result.current.openSmartMiniApp({
+          appId: 'external-help',
+          name: 'External Help',
+          url: 'https://example.com/help',
+          logo: 'icon'
+        })
+      })
+
+      expect(mockWindowApi.openWebsite).toHaveBeenCalledWith('https://example.com/help')
+      expect(mockWindowApi.openPath).not.toHaveBeenCalled()
+      expect(mockTabs.openTab).not.toHaveBeenCalled()
+      expect(getKeepAlive()).toEqual([])
+    })
+
+    it('should open file URLs externally with openPath without TabsProvider', async () => {
+      mockTabs.hasContext = false
+      MockUseCacheUtils.setCacheValue(KEEP_ALIVE_KEY, [])
+      const { result } = renderHook(() => useTestMiniAppPopup())
+
+      await act(async () => {
+        result.current.openSmartMiniApp({
+          appId: 'releases',
+          name: 'Releases',
+          url: 'file:///Applications/Cherry%20Studio/resources/releases.html?theme=dark',
+          logo: 'icon'
+        })
+      })
+
+      expect(mockWindowApi.openPath).toHaveBeenCalledWith('/Applications/Cherry Studio/resources/releases.html')
+      expect(mockWindowApi.openWebsite).not.toHaveBeenCalled()
+      expect(mockTabs.openTab).not.toHaveBeenCalled()
+      expect(getKeepAlive()).toEqual([])
     })
   })
 
@@ -466,6 +528,20 @@ describe('useMiniAppPopup', () => {
       expect(list[0].appId).toBe('state-sync-app')
     })
 
+    it('should not evict keep-alive apps without TabsProvider', async () => {
+      mockTabs.hasContext = false
+      MockUsePreferenceUtils.setPreferenceValue('feature.mini_app.max_keep_alive', 1)
+      MockUseCacheUtils.setCacheValue(KEEP_ALIVE_KEY, [createMiniApp('existing')])
+      const { result } = renderHook(() => useTestMiniAppPopup())
+
+      await act(async () => {
+        result.current.openMiniApp(createMiniApp('newcomer'), true)
+      })
+
+      expect(getKeepAlive().map((app) => app.appId)).toEqual(['existing', 'newcomer'])
+      expect(mockClearWebviewState).not.toHaveBeenCalledWith('existing')
+    })
+
     it('should trim the keep-alive list when max keep alive is decreased', async () => {
       MockUsePreferenceUtils.setPreferenceValue('feature.mini_app.max_keep_alive', 1)
       // Seed list larger than the cap and mount a fresh hook — the trim
diff --git a/src/renderer/src/hooks/useMiniAppPopup.ts b/src/renderer/src/hooks/useMiniAppPopup.ts
index 769df4b5df..06b1f80b1a 100644
--- a/src/renderer/src/hooks/useMiniAppPopup.ts
+++ b/src/renderer/src/hooks/useMiniAppPopup.ts
@@ -1,8 +1,7 @@
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
+import { useOptionalTabsContext } from '@renderer/context/TabsContext'
 import { useMiniApps } from '@renderer/hooks/useMiniApps'
-import { useTabs } from '@renderer/hooks/useTabs'
-import NavigationService from '@renderer/services/NavigationService'
 import { clearWebviewState } from '@renderer/utils/webviewStateManager'
 import { DataApiErrorFactory } from '@shared/data/api'
 import type { MiniApp, MiniAppId } from '@shared/data/types/miniApp'
@@ -60,10 +59,10 @@ function evictMiniApp(appId: string) {
 function evictWithPinExemption(
   list: MiniApp[],
   cap: number,
-  pinnedAppIds: ReadonlySet<string>
+  pinnedAppIds: ReadonlySet<string> | null
 ): { keep: MiniApp[]; evicted: MiniApp[] } {
   let toDrop = list.length - cap
-  if (toDrop <= 0) return { keep: list, evicted: [] }
+  if (toDrop <= 0 || pinnedAppIds === null) return { keep: list, evicted: [] }
   const keep: MiniApp[] = []
   const evicted: MiniApp[] = []
   for (const app of list) {
@@ -86,6 +85,27 @@ function miniAppIdFromTabUrl(url: string): string | null {
   return id ? id : null
 }
 
+function fileUrlToPath(url: URL): string {
+  const pathname = decodeURIComponent(url.pathname)
+  if (url.hostname) return `//${url.hostname}${pathname}`
+  if (/^\/[A-Za-z]:\//.test(pathname)) return pathname.slice(1)
+  return pathname
+}
+
+function openExternalMiniAppUrl(url: string) {
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol === 'file:') {
+      void window.api.openPath(fileUrlToPath(parsed))
+      return
+    }
+  } catch {
+    // Fall through to openWebsite so the existing main-process URL guard handles it.
+  }
+
+  void window.api.openWebsite(url)
+}
+
 /**
  * Usage:
  *
@@ -124,8 +144,13 @@ export const useMiniAppPopup = () => {
   // Pinned AppShell tabs are exempt from keep-alive eviction. The user pins a
   // tab to say "keep this state alive across switches"; honoring that here
   // prevents the cap from quietly throwing away webviews behind a pinned tab.
-  const { tabs } = useTabs()
+  // Detached settings windows can open mini-app content without AppShell tabs;
+  // in that case skip eviction because pin state is not observable there.
+  const tabsContext = useOptionalTabsContext()
+  const tabs = tabsContext?.tabs ?? []
+  const openTab = tabsContext?.openTab
   const pinnedMiniAppIds = useMemo(() => {
+    if (!tabsContext) return null
     const ids = new Set<string>()
     for (const tab of tabs) {
       if (!tab.isPinned) continue
@@ -133,7 +158,7 @@ export const useMiniAppPopup = () => {
       if (id) ids.add(id)
     }
     return ids
-  }, [tabs])
+  }, [tabs, tabsContext])
   const pinnedMiniAppIdsRef = useRef(pinnedMiniAppIds)
   pinnedMiniAppIdsRef.current = pinnedMiniAppIds
 
@@ -251,11 +276,16 @@ export const useMiniAppPopup = () => {
 
   /**
    * Open a miniapp from a transient config (e.g., a shared link). Adds to the
-   * keep-alive list and navigates to the detail route — the global pool then
+   * keep-alive list and opens the detail route in a tab — the global pool then
    * renders the webview. Same path for sidebar and top-navbar layouts.
    */
   const openSmartMiniApp = useCallback(
     (config: MiniAppInput) => {
+      if (!openTab) {
+        openExternalMiniAppUrl(config.url)
+        return
+      }
+
       const app = toMiniApp(config)
       const list = keepAliveRef.current
       const wasCached = list.some((item: MiniApp) => item.appId === app.appId)
@@ -270,19 +300,13 @@ export const useMiniAppPopup = () => {
       setCurrentMiniAppId(app.appId)
       setMiniAppShow(true)
 
-      // Always route to the mini-app even when the keep-alive entry already
-      // exists. `MiniAppTabsPool.shouldShow` keys off the active tab URL, not
-      // pool membership — if the user clicked from a non-mini-app route (the
-      // realistic case for every caller of `openSmartMiniApp`: AboutSettings,
-      // NotionSettings, OpenClawPage, etc.), skipping navigation leaves the
-      // pool hidden and the user sees nothing. Webview re-use stays correct:
-      // when cached we don't recreate the entry or reset `src`, only the
-      // route activates.
-      if (NavigationService.navigate) {
-        void NavigationService.navigate({ to: `/app/mini-app/${app.appId}` })
-      }
+      // Always activate the mini-app tab even when the keep-alive entry
+      // already exists. `MiniAppTabsPool.shouldShow` keys off the active tab
+      // URL, not pool membership. Webview re-use stays correct: when cached we
+      // don't recreate the entry or reset `src`, only the tab route activates.
+      openTab(`/app/mini-app/${app.appId}`, { title: app.name, icon: app.logo })
     },
-    [cap, setOpenedKeepAliveMiniApps, setCurrentMiniAppId, setMiniAppShow]
+    [cap, openTab, setOpenedKeepAliveMiniApps, setCurrentMiniAppId, setMiniAppShow]
   )
 
   return {
diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 316a09ebe0..63f8e0eeab 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -834,7 +834,7 @@
       "running": "Running",
       "stopped": "Stopped"
     },
-    "title": "API Server"
+    "title": "API Gateway"
   },
   "appMenu": {
     "about": "About",
@@ -3745,7 +3745,7 @@
         "r_regenerate": "R: Regenerate"
       }
     },
-    "name": "Selection Assistant",
+    "name": "Selection",
     "settings": {
       "actions": {
         "add_tooltip": {
@@ -4780,6 +4780,15 @@
         "button": "Backup",
         "title": "Data Backup and Recovery"
       },
+      "common": {
+        "sections": {
+          "custom_css": "Custom CSS",
+          "display_language": "Display & Language",
+          "privacy_advanced": "Privacy & Advanced",
+          "system_startup": "System & Startup"
+        },
+        "title": "General"
+      },
       "display": {
         "title": "Display Settings"
       },
@@ -4841,6 +4850,12 @@
         "russian": "Russian"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Notes"
+      },
+      "title": "Integrations"
+    },
     "launch": {
       "onboot": "Start Automatically on Boot",
       "title": "Launch",
@@ -5110,6 +5125,13 @@
       "url": "URL",
       "user": "User"
     },
+    "menuGroups": {
+      "appSettings": "App Settings",
+      "integrations": "Models",
+      "productivity": "Productivity",
+      "services": "Plugins",
+      "system": "System"
+    },
     "messages": {
       "divider": {
         "label": "Show divider between messages",
@@ -5261,7 +5283,7 @@
         "use_all_keys": "Key(s)"
       },
       "default_assistant_model": "Default Assistant Model",
-      "default_assistant_model_description": "Model used when creating a new assistant, if the assistant is not set, this model will be used",
+      "default_assistant_model_description": "Used when an assistant has no model",
       "empty": "No models found",
       "manage": {
         "add_listed": {
@@ -5355,6 +5377,14 @@
         "title": "Verbosity"
       }
     },
+    "plugins": {
+      "bunDescription": "JavaScript runtime used by MCP services and related toolchains.",
+      "description": "Manage binary tools and runtime dependencies required by the app.",
+      "installing": "Installing...",
+      "notInstalled": "Not installed",
+      "title": "Dependencies",
+      "uvDescription": "Python package manager for MCP services and dependency installation."
+    },
     "privacy": {
       "enable_privacy_mode": "Anonymous reporting of errors and statistics",
       "title": "Privacy Settings"
@@ -5681,12 +5711,22 @@
     "shortcuts": {
       "action": "Action",
       "actions": "operation",
+      "all_disable": "Disable All",
+      "all_enable": "Enable All",
       "bind_first_to_enable": "Bind a shortcut first to change its enabled state",
+      "categories": {
+        "assistant": "AI Assistant Tools",
+        "chat": "Message Interaction",
+        "general": "Global and Window",
+        "title": "Shortcut Groups",
+        "topic": "Conversation and Topics"
+      },
       "clear_shortcut": "Clear Shortcut",
       "clear_topic": "Clear Messages",
       "conflict_with": "Already used by \"{{name}}\"",
       "copy_last_message": "Copy Last Message",
       "edit_last_user_message": "Edit Last User Message",
+      "empty": "No shortcuts are available in this group",
       "enabled": "Enable",
       "exit_fullscreen": "Exit Fullscreen",
       "label": "Key",
@@ -5695,6 +5735,7 @@
       "press_shortcut": "Press Shortcut",
       "quick_assistant": "Quick Assistant",
       "rename_topic": "Rename Topic",
+      "reset": "Reset",
       "reset_defaults": "Reset Defaults",
       "reset_defaults_confirm": "Are you sure you want to reset all shortcuts?",
       "reset_defaults_failed": "Failed to reset shortcuts to defaults",
@@ -5709,7 +5750,7 @@
       "selection_assistant_toggle": "Toggle Selection Assistant",
       "show_app": "Show/Hide App",
       "show_settings": "Open Settings",
-      "title": "Keyboard Shortcuts",
+      "title": "Shortcuts",
       "toggle_new_context": "Clear Context",
       "toggle_show_topics": "Toggle Topics",
       "toggle_sidebar": "Toggle Sidebar",
@@ -5775,6 +5816,14 @@
         "error": {
           "not_system": "System OCR only supports Windows and MacOS"
         },
+        "features": {
+          "paddleocr": "Stronger for Chinese text and better suited for receipts, scans, and images with more complex layouts.",
+          "system": {
+            "macos": "Uses the built-in macOS OCR engine with zero setup, ideal for screenshots and lightweight text extraction.",
+            "windows": "Uses the native Windows OCR engine with strong OS integration for basic local recognition tasks."
+          },
+          "tesseract": "A classic local OCR option with customizable language packs, well suited for offline and multilingual workflows."
+        },
         "image": {
           "error": {
             "provider_not_found": "The provider does not exist"
@@ -5801,15 +5850,22 @@
         "title": "OCR service"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Well suited for converting PDFs into cleaner Markdown or editable text for downstream retrieval and editing.",
+          "mineru": "Optimized for higher-fidelity layout recovery, especially useful for academic PDFs, tables, and formulas.",
+          "mistral": "Strong cloud-based document understanding, suitable for structured extraction, multi-page files, and complex layouts.",
+          "open_mineru": "An open deployment option that fits teams wanting self-hosting or tighter control over the processing pipeline.",
+          "paddleocr": "A lighter integration choice that works well for Chinese documents, scans, and common receipt-style content."
+        },
         "paddleocr": {
           "aistudio_access_token": "Access token of AI Studio Community",
           "api_url": "API URL",
           "api_url_label": "Obtain Access Token and API URL",
           "paddleocr_url_label": "PaddleOCR Official Website"
         },
-        "provider": "Document Processing Provider",
-        "provider_placeholder": "Choose a document processing provider",
-        "title": "Document Processing",
+        "provider": "Doc Provider",
+        "provider_placeholder": "Choose a doc provider",
+        "title": "Doc Process",
         "tooltip": "In Settings -> Tools, set a document processing service provider. Document processing can effectively improve the retrieval performance of complex format documents and scanned documents."
       },
       "title": "Other Settings",
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 1e191cd696..efdc1649c5 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -834,7 +834,7 @@
       "running": "运行中",
       "stopped": "已停止"
     },
-    "title": "API 服务器"
+    "title": "API 网关"
   },
   "appMenu": {
     "about": "关于",
@@ -4163,7 +4163,7 @@
         },
         "content": "导出部分数据，包括聊天记录、设置。请注意，备份过程可能需要一些时间，感谢您的耐心等待。",
         "file": {
-          "button": "导出到文件",
+          "button": "导出文件",
           "content": "将数据导出为备份文件，可在手机上通过文件方式导入。",
           "export_failed": "导出失败",
           "export_success": "导出成功",
@@ -4780,6 +4780,15 @@
         "button": "备份",
         "title": "数据备份与恢复"
       },
+      "common": {
+        "sections": {
+          "custom_css": "自定义 CSS",
+          "display_language": "显示与语言",
+          "privacy_advanced": "隐私与高级",
+          "system_startup": "系统与启动"
+        },
+        "title": "通用设置"
+      },
       "display": {
         "title": "显示设置"
       },
@@ -4841,6 +4850,12 @@
         "russian": "俄文"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "笔记"
+      },
+      "title": "集成"
+    },
     "launch": {
       "onboot": "开机自动启动",
       "title": "启动",
@@ -5110,6 +5125,13 @@
       "url": "URL",
       "user": "用户"
     },
+    "menuGroups": {
+      "appSettings": "应用设置",
+      "integrations": "模型",
+      "productivity": "效率",
+      "services": "插件",
+      "system": "系统"
+    },
     "messages": {
       "divider": {
         "label": "消息分割线",
@@ -5261,7 +5283,7 @@
         "use_all_keys": "使用密钥"
       },
       "default_assistant_model": "默认助手模型",
-      "default_assistant_model_description": "创建新助手时使用的模型，如果助手未设置模型，则使用此模型",
+      "default_assistant_model_description": "助手未指定模型时使用",
       "empty": "没有模型",
       "manage": {
         "add_listed": {
@@ -5355,6 +5377,14 @@
         "title": "详细程度"
       }
     },
+    "plugins": {
+      "bunDescription": "用于 MCP 服务和相关工具链的 JavaScript 运行时。",
+      "description": "管理应用运行所需的二进制工具和运行时依赖。",
+      "installing": "安装中...",
+      "notInstalled": "未安装",
+      "title": "环境依赖",
+      "uvDescription": "用于 MCP 服务与依赖安装的 Python 包管理工具。"
+    },
     "privacy": {
       "enable_privacy_mode": "匿名发送错误报告和数据统计",
       "title": "隐私设置"
@@ -5681,12 +5711,22 @@
     "shortcuts": {
       "action": "操作",
       "actions": "操作",
+      "all_disable": "全部禁用",
+      "all_enable": "全部启用",
       "bind_first_to_enable": "请先绑定快捷键，再调整启用状态",
+      "categories": {
+        "assistant": "AI 助手工具",
+        "chat": "消息交互",
+        "general": "全局与窗口",
+        "title": "快捷键分组",
+        "topic": "会话与话题"
+      },
       "clear_shortcut": "清除快捷键",
       "clear_topic": "清空消息",
       "conflict_with": "已被「{{name}}」使用",
       "copy_last_message": "复制上一条消息",
       "edit_last_user_message": "编辑最后一条用户消息",
+      "empty": "当前分组下没有可显示的快捷键",
       "enabled": "启用",
       "exit_fullscreen": "退出全屏",
       "label": "按键",
@@ -5695,6 +5735,7 @@
       "press_shortcut": "按下快捷键",
       "quick_assistant": "快捷助手",
       "rename_topic": "重命名话题",
+      "reset": "重置",
       "reset_defaults": "重置默认快捷键",
       "reset_defaults_confirm": "确定要重置所有快捷键吗？",
       "reset_defaults_failed": "重置快捷键失败",
@@ -5775,6 +5816,14 @@
         "error": {
           "not_system": "系统 OCR 仅支持 Windows 与 MacOS"
         },
+        "features": {
+          "paddleocr": "中文识别能力更强，适合票据、扫描件和复杂版式图片的文本提取。",
+          "system": {
+            "macos": "使用 macOS 原生 OCR 引擎，开箱即用，适合截图识别和轻量文本提取。",
+            "windows": "使用 Windows 系统 OCR，引擎集成度高，适合本地基础识别场景。"
+          },
+          "tesseract": "经典本地 OCR 方案，支持自定义语言包，适合离线处理和多语言扩展。"
+        },
         "image": {
           "error": {
             "provider_not_found": "该提供商不存在"
@@ -5801,6 +5850,13 @@
         "title": "OCR 服务"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "适合把 PDF 转成更规整的 Markdown 或可编辑文本，方便后续检索与整理。",
+          "mineru": "偏向高质量版面恢复，适合学术论文、表格和公式较多的 PDF 文档。",
+          "mistral": "云端文档理解能力较强，适合结构化提取、多页文档和复杂版式解析。",
+          "open_mineru": "开源部署方案，更适合希望自建服务并自行控制处理链路的场景。",
+          "paddleocr": "轻量且易接入，适合中文文档、扫描件和常见票据类内容的文本提取。"
+        },
         "paddleocr": {
           "aistudio_access_token": "星河社区访问令牌",
           "api_url": "API URL",
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index 16ce9b0e37..9f6b50243f 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -834,7 +834,7 @@
       "running": "執行中",
       "stopped": "已停止"
     },
-    "title": "API 伺服器"
+    "title": "API 閘道"
   },
   "appMenu": {
     "about": "關於",
@@ -4780,6 +4780,15 @@
         "button": "備份",
         "title": "資料備份與復原"
       },
+      "common": {
+        "sections": {
+          "custom_css": "自訂 CSS",
+          "display_language": "顯示與語言",
+          "privacy_advanced": "隱私與進階",
+          "system_startup": "系統與啟動"
+        },
+        "title": "通用設定"
+      },
       "display": {
         "title": "顯示設定"
       },
@@ -4841,6 +4850,12 @@
         "russian": "俄文"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "筆記"
+      },
+      "title": "集成"
+    },
     "launch": {
       "onboot": "開機自動啟動",
       "title": "啟動",
@@ -5110,6 +5125,13 @@
       "url": "URL",
       "user": "使用者"
     },
+    "menuGroups": {
+      "appSettings": "應用設定",
+      "integrations": "模型",
+      "productivity": "效率",
+      "services": "插件",
+      "system": "系統"
+    },
     "messages": {
       "divider": {
         "label": "訊息間顯示分隔線",
@@ -5261,7 +5283,7 @@
         "use_all_keys": "使用金鑰"
       },
       "default_assistant_model": "預設助手模型",
-      "default_assistant_model_description": "建立新助手時使用的模型，如果助手未設定模型，則使用此模型",
+      "default_assistant_model_description": "助手未指定模型時使用",
       "empty": "找不到模型",
       "manage": {
         "add_listed": {
@@ -5355,6 +5377,14 @@
         "title": "詳細程度"
       }
     },
+    "plugins": {
+      "bunDescription": "用於 MCP 服務和相關工具鏈的 JavaScript 執行階段。",
+      "description": "管理應用程式執行所需的二進位工具和執行階段依賴。",
+      "installing": "安裝中...",
+      "notInstalled": "未安裝",
+      "title": "環境依賴",
+      "uvDescription": "用於 MCP 服務與依賴安裝的 Python 套件管理工具。"
+    },
     "privacy": {
       "enable_privacy_mode": "匿名傳送錯誤報告和資料統計",
       "title": "隱私設定"
@@ -5681,12 +5711,22 @@
     "shortcuts": {
       "action": "操作",
       "actions": "操作",
+      "all_disable": "全部停用",
+      "all_enable": "全部啟用",
       "bind_first_to_enable": "請先綁定快捷鍵，再調整啟用狀態",
+      "categories": {
+        "assistant": "AI 助手工具",
+        "chat": "訊息互動",
+        "general": "全域與視窗",
+        "title": "快捷鍵分組",
+        "topic": "會話與話題"
+      },
       "clear_shortcut": "清除快捷鍵",
       "clear_topic": "清除所有訊息",
       "conflict_with": "已被「{{name}}」使用",
       "copy_last_message": "複製上一則訊息",
       "edit_last_user_message": "編輯最後一則使用者訊息",
+      "empty": "目前分組下沒有可顯示的快捷鍵",
       "enabled": "啟用",
       "exit_fullscreen": "離開全螢幕",
       "label": "按鍵",
@@ -5695,6 +5735,7 @@
       "press_shortcut": "按下快捷鍵",
       "quick_assistant": "快捷助手",
       "rename_topic": "重新命名話題",
+      "reset": "重設",
       "reset_defaults": "重設預設快捷鍵",
       "reset_defaults_confirm": "確定要重設所有快捷鍵嗎？",
       "reset_defaults_failed": "重設快捷鍵失敗",
@@ -5775,6 +5816,14 @@
         "error": {
           "not_system": "系統 OCR 僅支援 Windows 與 MacOS"
         },
+        "features": {
+          "paddleocr": "更適合中文文字，並更適用於收據、掃描檔案以及版面較複雜的圖片。",
+          "system": {
+            "macos": "使用內建 macOS OCR 引擎，無需設定，適合截圖與輕量文字擷取。",
+            "windows": "使用原生 Windows OCR 引擎，具備強大的作業系統整合能力，適用於基本的本機辨識工作。"
+          },
+          "tesseract": "一款經典的本地 OCR 選項，具備可自訂的語言套件，非常適合離線與多語言工作流程。"
+        },
         "image": {
           "error": {
             "provider_not_found": "該供應商不存在"
@@ -5801,6 +5850,13 @@
         "title": "OCR 服務"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "非常適合將 PDF 轉換為更乾淨的 Markdown 或可編輯文字，以便後續檢索與編輯。",
+          "mineru": "針對更高保真度的版面復原進行最佳化，特別適用於學術 PDF、表格與公式。",
+          "mistral": "強大的雲端文件理解能力，適用於結構化擷取、多頁檔案及複雜版面。",
+          "open_mineru": "一個開放的部署選項，適合希望自行託管或對處理流程有更高控制權的團隊。",
+          "paddleocr": "更輕量的整合選擇，非常適合中文文件、掃描檔及常見收據格式的內容。"
+        },
         "paddleocr": {
           "aistudio_access_token": "星河社區訪問令牌",
           "api_url": "API 網址",
diff --git a/src/renderer/src/i18n/translate/de-de.json b/src/renderer/src/i18n/translate/de-de.json
index c4e43c48ee..ea77ee9357 100644
--- a/src/renderer/src/i18n/translate/de-de.json
+++ b/src/renderer/src/i18n/translate/de-de.json
@@ -36,9 +36,9 @@
         "comingSoon": "Demnächst verfügbar",
         "connected": "Verbunden",
         "connecting": "Verbinden",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Fehler beim Erstellen des Kanals",
         "deleteConfirm": "Kanal „{{name}}“ löschen?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Fehler beim Löschen des Kanals",
         "description": "Verbinden Sie Ihren Agenten mit Messaging-Plattformen.",
         "disconnected": "Getrennt",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Kanäle",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Fehler beim Aktualisieren des Kanals",
         "wechat": {
           "addAccount": "WeChat-Konto hinzufügen",
           "chatIds": "Erlaubte Benutzer-IDs",
@@ -215,7 +215,7 @@
         "edit": "Bearbeiten",
         "empty": "Keine geplanten Aufgaben. Fügen Sie eine hinzu, um zu beginnen.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Aufgaben konnten nicht geladen werden"
         },
         "intervalPlaceholder": "Intervall in Minuten",
         "intervalUnit": "Minuten",
@@ -226,7 +226,7 @@
           "error": "Fehler",
           "justNow": "soeben",
           "label": "Ausführungshistorie",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Fehler beim Laden des Laufverlaufs",
           "result": "Ergebnis",
           "runAt": "Ausgeführt am",
           "running": "Läuft...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Bun-Umgebung erforderlich zum Ausführen von CLI-Tools",
     "cli_tool": "CLI-Tool",
     "cli_tool_placeholder": "CLI-Tool auswählen",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} Artikel",
+    "count_other": "{{count}} Artikel",
     "custom_path": "Benutzerdefinierter Pfad",
     "custom_path_error": "Benutzerdefinierten Terminalpfad festlegen fehlgeschlagen",
     "custom_path_required": "Dieses Terminal erfordert einen benutzerdefinierten Pfad",
@@ -1508,12 +1508,12 @@
     "description": "Starten Sie schnell mehrere Code-CLI-Tools, um die Entwicklungseffizienz zu steigern",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Versuchen Sie, Ihre Suchbegriffe anzupassen",
+        "title": "Keine passenden Werkzeuge gefunden"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Fügen Sie ein CLI-Tool oder einen Code-Assistenten hinzu, um loszulegen",
+        "title": "Noch keine Code-Tools"
       }
     },
     "env_vars_help": "Benutzerdefinierte Umgebungsvariablen eingeben (eine pro Zeile, Format: KEY=value)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Bitte installieren Sie zuerst die Bun-Umgebung, bevor Sie CLI-Tools starten",
       "error": "Start fehlgeschlagen, bitte versuchen Sie es erneut",
       "label": "Starten",
-      "launched": "[to be translated]:Launched",
+      "launched": "Gestartet",
       "success": "Erfolgreich gestartet",
       "validation_error": "Bitte füllen Sie alle Pflichtfelder aus: CLI-Tool, Modell und Arbeitsverzeichnis"
     },
     "launching": "Wird gestartet...",
     "model": "Modell",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Wählen Sie, welches KI-Modell das CLI-Tool verwenden soll",
     "model_placeholder": "Zu verwendendes Modell auswählen",
     "model_required": "Bitte Modell auswählen",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Offiziell",
+    "official_tools": "Offiziell",
+    "search_placeholder": "CLI-Tools suchen…",
     "select_folder": "Ordner auswählen",
     "set_custom_path": "Benutzerdefinierten Terminalpfad festlegen",
     "supported_providers": "Unterstützte Anbieter",
     "terminal": "Terminal",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Wählen Sie, in welchem Terminal die CLI ausgeführt werden soll",
     "terminal_placeholder": "Terminal-Anwendung auswählen",
     "title": "Code-Tools",
     "update_options": "Update-Optionen",
     "working_directory": "Arbeitsverzeichnis",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Das Arbeitsverzeichnis, in dem das CLI-Tool gestartet wird"
   },
   "code_block": {
     "collapse": "Einklappen",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Dieses Modell anheften",
+      "unpin": "Modell lösen"
     },
     "add_parameter": "Parameter hinzufügen",
     "all": "Alle",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Ungültiges Modell",
     "json_parse_error": "Ungültiges JSON-Format",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Multi-Modell-Parallelität (schließt sich gegenseitig mit Multi-Assistent aus)"
     },
     "no_matches": "Keine verfügbaren Modelle",
     "parameter_name": "Parametername",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Neuer Agent",
+      "empty_text": "Noch keine Agenten",
+      "search_placeholder": "Suchagenten…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Neuer Assistent",
+      "empty_text": "Noch keine Assistenten",
+      "multi_hint": "(gegenseitig ausschließend mit Multi-Modell)",
+      "multi_label": "Multi-Assistent-Parallel",
+      "search_placeholder": "Suchassistenten…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Bearbeiten",
+      "pin": "Stift",
+      "pinned_title": "Angepinnt",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Ältester",
+        "desc": "Kürzlich"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Sortieren",
+      "unpin": "Lösen"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Klar",
+        "configDescription": "Schalten Sie Props um, um das Verhalten der Komponente in der Vorschau anzuzeigen",
+        "configTitle": "Konfig",
+        "currentProps": "Aktuelle Requisiten",
+        "description": "AgentSelector liest jetzt echte /agents-Daten der DataApi, um die Auswahl der ID/des Elements, das Anheften, Sortieren und Suchverhalten zu überprüfen.",
+        "emptyShellNotice": "Diese Vorschau verwendet die echte Agentenliste, die von der /agents DataApi zurückgegeben wird.",
+        "lastOnChange": "Neuestes onChange",
+        "previewDescription": "Klicken Sie auf den Auslöser, um den Selektor zu öffnen",
+        "previewTitle": "Vorschau",
+        "title": "Agenten-Auswahl",
+        "triggerPlaceholder": "Wählen Sie einen Agenten",
+        "valueProp": "Aktueller Wert"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Klar",
+        "configDescription": "Schalten Sie Props um, um das Verhalten der Komponente in der Vorschau anzuzeigen",
+        "configTitle": "Konfig",
+        "currentProps": "Aktuelle Requisiten",
+        "description": "Bindet die AssistantSelector-Business-Komponente direkt ein, um das Verhalten bei Multi-/Single-Auswahl, ID/Element, Anheften, Sortierung und Suche zu überprüfen.",
+        "lastOnChange": "Neuestes onChange",
+        "previewDescription": "Klicken Sie auf den Auslöser, um den Selektor zu öffnen",
+        "previewTitle": "Vorschau",
+        "title": "Assistentenauswahl",
+        "triggerPlaceholder": "Wählen Sie einen Assistenten",
+        "triggerSelectedCount": "{{count}} Assistenten ausgewählt",
+        "valueProp": "Aktueller Wert"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Nur in der Entwicklung sichtbar, um die neue Modellauswahl direkt in der App zu testen.",
+      "label": "Komponentenlabor",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Verhalten & Anzeige-Konfiguration",
+        "callbackEmpty": "Noch kein Komponenten-Callback erhalten",
+        "clearSelection": "Auswahl aufheben",
+        "configDescription": "Schalten Sie die oben genannten ModelSelector-Schlüsseleigenschaften um und untersuchen Sie den Eingabewert sowie die Callback-Nutzlasten unten.",
+        "configTitle": "Requisiten-Spielplatz",
+        "controlMultiSelectMode": "Gesteuerte Mehrfachauswahl-Modus",
+        "currentProps": "Aktuelle Props",
+        "defaultMultiSelectMode": "Standard-Mehrfachauswahlmodus",
+        "description": "Diese Seite bindet die aktuelle ModelSelector-Businesskomponente direkt ein, sodass wir Auswahl, Filterung, Suche und Anheftverhalten überprüfen können.",
+        "empty": "Derzeit sind keine Modelle verfügbar, daher kann die Auswahl noch nicht angezeigt werden.",
+        "lastModeChangeReturn": "Neuestes zu onMultiSelectModeChange Rückgabe",
+        "lastSelectReturn": "Neuestes onSelect Return",
+        "loading": "Modelle werden geladen...",
+        "modelId": "Modell-ID",
+        "multiSelectMode": "Mehrfachauswahlmodus",
+        "multiple": "mehrere",
+        "normalizedIds": "Normalisierte ausgewählte IDs",
+        "outputEmpty": "Noch keine Daten anzuzeigen",
+        "provider": "Anbieter",
+        "resetOutputs": "Ausgaben zurücksetzen",
+        "resultsDescription": "Dies zeigt die aktuelle Value-Prop, die normalisierten ausgewählten IDs und die neueste Callback-Ausgabe der Komponente.",
+        "resultsTitle": "Ausgaben & Zustand",
+        "selected": "Aktuelle Auswahl",
+        "selectedEmpty": "Noch kein Modell ausgewählt",
+        "selectionConfig": "Auswahlwert-Konfiguration",
+        "selectionType": "Auswahltyp",
+        "selectionTypeId": "Modell-IDs zurückgeben",
+        "selectionTypeModel": "Modellobjekte zurückgeben",
+        "showPinnedModels": "angeheftete Modelle anzeigen",
+        "showTagFilter": "showTagFilter",
+        "title": "Modell-Auswahl",
+        "triggerPlaceholder": "Wählen Sie ein Modell",
+        "triggerSelectedCount": "{{count}} Modelle ausgewählt",
+        "valueProp": "Aktueller Wertvorschlag"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Entwicklungskomponentenlabor"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Backup",
         "title": "Datensicherung und -wiederherstellung"
       },
+      "common": {
+        "sections": {
+          "custom_css": "Benutzerdefiniertes CSS",
+          "display_language": "Anzeige & Sprache",
+          "privacy_advanced": "Privatsphäre & Erweitert",
+          "system_startup": "System & Start"
+        },
+        "title": "Allgemeine Einstellungen"
+      },
       "display": {
         "title": "Anzeigeeinstellungen"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Russisch"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Notizen"
+      },
+      "title": "Integrationen"
+    },
     "launch": {
       "onboot": "Beim Systemstart automatisch starten",
       "title": "Starten",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Benutzer"
     },
+    "menuGroups": {
+      "appSettings": "App-Einstellungen",
+      "integrations": "Modelle",
+      "productivity": "Produktivität",
+      "services": "Plugins",
+      "system": "System"
+    },
     "messages": {
       "divider": {
         "label": "Nachrichtentrennlinie",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Schlüssel verwenden"
       },
       "default_assistant_model": "Standard-Assistent-Modell",
-      "default_assistant_model_description": "Modell für neue Assistenten. Wird verwendet, wenn Assistent kein Modell hat.",
+      "default_assistant_model_description": "Wird verwendet, wenn ein Assistent kein Modell hat.",
       "empty": "Kein Modell",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "Detailgrad"
       }
     },
+    "plugins": {
+      "bunDescription": "JavaScript-Laufzeitumgebung, die von MCP-Diensten und zugehörigen Toolchains verwendet wird.",
+      "description": "Verwalten Sie binäre Tools und Laufzeitabhängigkeiten, die von der App benötigt werden.",
+      "installing": "Installiere...",
+      "notInstalled": "Nicht installiert",
+      "title": "Umgebungsabhängigkeiten",
+      "uvDescription": "Python-Paketmanager für MCP-Dienste und Abhängigkeitsinstallation."
+    },
     "privacy": {
       "enable_privacy_mode": "Fehlerberichte und Statistiken anonym senden",
       "title": "Datenschutzeinstellungen"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Aktionen",
       "actions": "Aktionen",
+      "all_disable": "Alle deaktivieren",
+      "all_enable": "Alle aktivieren",
       "bind_first_to_enable": "Weisen Sie zunächst eine Tastenkombination zu, um ihren aktivierten Zustand zu ändern.",
+      "categories": {
+        "assistant": "KI-Assistenten-Tools",
+        "chat": "Nachrichteninteraktion",
+        "general": "Global und Fenster",
+        "title": "Tastenkürzelgruppen",
+        "topic": "Gespräch und Themen"
+      },
       "clear_shortcut": "Shortcut löschen",
       "clear_topic": "Nachricht leeren",
       "conflict_with": "Bereits von \"{{name}}\" verwendet",
       "copy_last_message": "Letzte Nachricht kopieren",
       "edit_last_user_message": "Letzte Benutzernachricht bearbeiten",
+      "empty": "In dieser Gruppe sind keine Verknüpfungen verfügbar.",
       "enabled": "Aktivieren",
       "exit_fullscreen": "Vollbildmodus beenden",
       "label": "Taste",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Shortcut drücken",
       "quick_assistant": "Schnellassistent",
       "rename_topic": "Thema umbenennen",
+      "reset": "Zurücksetzen",
       "reset_defaults": "Standard-Shortcuts zurücksetzen",
       "reset_defaults_confirm": "Alle Shortcuts wirklich zurücksetzen?",
       "reset_defaults_failed": "Verknüpfungen konnten nicht auf Standard zurückgesetzt werden",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "System OCR unterstützt nur Windows und MacOS"
         },
+        "features": {
+          "paddleocr": "Stärker für chinesische Texte und besser geeignet für Quittungen, Scans und Bilder mit komplexeren Layouts.",
+          "system": {
+            "macos": "Verwendet die integrierte macOS-OCR-Engine ohne jegliche Einrichtung – ideal für Screenshots und einfache Textextraktion.",
+            "windows": "Verwendet die native Windows-OCR-Engine mit starker OS-Integration für grundlegende lokale Erkennungsaufgaben."
+          },
+          "tesseract": "Eine klassische lokale OCR-Option mit anpassbaren Sprachpaketen, gut geeignet für Offline- und mehrsprachige Workflows."
+        },
         "image": {
           "error": {
             "provider_not_found": "Der Anbieter wurde nicht gefunden"
@@ -5706,6 +5755,13 @@
         "title": "OCR-Dienst"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Gut geeignet zur Konvertierung von PDFs in sauberes Markdown oder bearbeitbaren Text für die nachgelagerte Wiederverwendung und Bearbeitung.",
+          "mineru": "Optimiert für hochwertigere Layout-Wiederherstellung, besonders nützlich für akademische PDFs, Tabellen und Formeln.",
+          "mistral": "Starke cloudbasierte Dokumentenverständnis, geeignet für strukturierte Extraktion, mehrseitige Dateien und komplexe Layouts.",
+          "open_mineru": "Eine offene Bereitstellungsoption, die Teams passt, die Self-Hosting oder eine engere Kontrolle über die Verarbeitungspipeline wünschen.",
+          "paddleocr": "Eine leichtere Integrationsoption, die gut für chinesische Dokumente, Scans und gängige Belegformate funktioniert."
+        },
         "paddleocr": {
           "aistudio_access_token": "Zugriffstoken der AI Studio Community",
           "api_url": "API-URL",
diff --git a/src/renderer/src/i18n/translate/el-gr.json b/src/renderer/src/i18n/translate/el-gr.json
index 2b4e1ee6b9..73e928e08e 100644
--- a/src/renderer/src/i18n/translate/el-gr.json
+++ b/src/renderer/src/i18n/translate/el-gr.json
@@ -36,9 +36,9 @@
         "comingSoon": "Σύντομα διαθέσιμο",
         "connected": "Συνδεδεμένος",
         "connecting": "Σύνδεση",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Αποτυχία δημιουργίας καναλιού",
         "deleteConfirm": "Διαγραφή καναλιού \"{{name}}\";",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Αποτυχία διαγραφής καναλιού",
         "description": "Συνδέστε τον πράκτορά σας σε πλατφόρμες μηνυμάτων.",
         "disconnected": "Αποσυνδέθηκε",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Κανάλια",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Αποτυχία ενημέρωσης καναλιού",
         "wechat": {
           "addAccount": "Προσθέστε λογαριασμό WeChat",
           "chatIds": "Επιτρεπόμενα Αναγνωριστικά Χρηστών",
@@ -215,7 +215,7 @@
         "edit": "Επεξεργασία",
         "empty": "Δεν υπάρχουν προγραμματισμένες εργασίες. Προσθέστε μία για να ξεκινήσετε.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Αποτυχία φόρτωσης εργασιών"
         },
         "intervalPlaceholder": "Διάστημα σε λεπτά",
         "intervalUnit": "λεπτά",
@@ -226,7 +226,7 @@
           "error": "Σφάλμα",
           "justNow": "μόλις τώρα",
           "label": "Ιστορικό εκτελέσεων",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Αποτυχία φόρτωσης ιστορικού εκτέλεσης",
           "result": "Αποτέλεσμα",
           "runAt": "Εκτελέστηκε στις",
           "running": "Τρέχει...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Για τη λειτουργία του εργαλείου CLI πρέπει να εγκαταστήσετε το περιβάλλον Bun",
     "cli_tool": "Εργαλείο CLI",
     "cli_tool_placeholder": "Επιλέξτε το CLI εργαλείο που θέλετε να χρησιμοποιήσετε",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} αντικείμενο",
+    "count_other": "{{count}} αντικείμενα",
     "custom_path": "Προσαρμοσμένη διαδρομή",
     "custom_path_error": "Η ρύθμιση της προσαρμοσμένης διαδρομής τερματικού απέτυχε",
     "custom_path_required": "Αυτό το τερματικό απαιτεί τη ρύθμιση προσαρμοσμένης διαδρομής",
@@ -1508,12 +1508,12 @@
     "description": "Εκκίνηση γρήγορα πολλών εργαλείων CLI κώδικα, για αύξηση της αποδοτικότητας ανάπτυξης",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Δοκιμάστε να προσαρμόσετε τους όρους αναζήτησής σας",
+        "title": "Δεν βρέθηκαν αντιστοιχιζόμενα εργαλεία"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Προσθέστε ένα εργαλείο CLI ή βοηθό κώδικα για να ξεκινήσετε",
+        "title": "Κανένα εργαλείο κώδικα ακόμα"
       }
     },
     "env_vars_help": "Εισαγάγετε προσαρμοσμένες μεταβλητές περιβάλλοντος (μία ανά γραμμή, με τη μορφή: KEY=value)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Παρακαλώ εγκαταστήστε πρώτα το περιβάλλον Bun πριν εκκινήσετε το εργαλείο CLI",
       "error": "Η εκκίνηση απέτυχε, παρακαλώ δοκιμάστε ξανά",
       "label": "Εκκίνηση",
-      "launched": "[to be translated]:Launched",
+      "launched": "Ξεκίνησε",
       "success": "Επιτυχής εκκίνηση",
       "validation_error": "Συμπληρώστε όλα τα υποχρεωτικά πεδία: εργαλείο CLI, μοντέλο και κατάλογος εργασίας"
     },
     "launching": "Εκκίνηση...",
     "model": "μοντέλο",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Επέλεξε ποιο μοντέλο AI θα χρησιμοποιήσει το εργαλείο CLI",
     "model_placeholder": "Επιλέξτε το μοντέλο που θα χρησιμοποιήσετε",
     "model_required": "Επιλέξτε μοντέλο",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Επίσημος",
+    "official_tools": "Επίσημος",
+    "search_placeholder": "Αναζήτηση εργαλείων CLI…",
     "select_folder": "Επιλογή φακέλου",
     "set_custom_path": "Ρύθμιση προσαρμοσμένης διαδρομής τερματικού",
     "supported_providers": "υποστηριζόμενοι πάροχοι",
     "terminal": "τερματικό",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Επιλέξτε σε ποιο τερματικό θα εκτελέσετε τη γραμμή εντολών",
     "terminal_placeholder": "Επιλέξτε εφαρμογή τερματικού",
     "title": "Εργαλεία κώδικα",
     "update_options": "Ενημέρωση επιλογών",
     "working_directory": "κατάλογος εργασίας",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Ο κατάλογος εργασίας στον οποίο εκκινεί το εργαλείο CLI"
   },
   "code_block": {
     "collapse": "συμπεριληφθείς",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Καρφίτσωσε αυτό το μοντέλο",
+      "unpin": "Ξεκαρφίτσωμα μοντέλου"
     },
     "add_parameter": "Προσθήκη παραμέτρων",
     "all": "Όλα",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Μη έγκυρο μοντέλο",
     "json_parse_error": "Μη έγκυρη μορφή JSON",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Παράλληλη λειτουργία πολλών μοντέλων (αμοιβαία αποκλειόμενη με πολλούς βοηθούς)"
     },
     "no_matches": "Δεν υπάρχουν διαθέσιμα μοντέλα",
     "parameter_name": "Όνομα παραμέτρου",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Νέος Πράκτορας",
+      "empty_text": "Κανένας πράκτορας ακόμα",
+      "search_placeholder": "Αναζήτηση πρακτόρων…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Νέος Βοηθός",
+      "empty_text": "Κανένας βοηθός ακόμα",
+      "multi_hint": "(αμοιβαία αποκλειόμενο με πολλαπλά μοντέλα)",
+      "multi_label": "Παράλληλος πολλαπλών βοηθών",
+      "search_placeholder": "Αναζήτηση βοηθών…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Επεξεργασία",
+      "pin": "Καρφίτσα",
+      "pinned_title": "Καρφιτσωμένο",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Παλαιότερος",
+        "desc": "Πρόσφατα"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Ταξινόμηση",
+      "unpin": "Ξεκαρφίτσωμα"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Καθαρό",
+        "configDescription": "Εναλλαγή ιδιοτήτων για προεπισκόπηση της συμπεριφοράς του στοιχείου",
+        "configTitle": "Διαμόρφωση",
+        "currentProps": "Τρέχοντα props",
+        "description": "Το AgentSelector διαβάζει πλέον πραγματικά δεδομένα από το /agents του DataApi για να επαληθεύει τη συμπεριφορά επιλογής id/item, καρφιτσώματος, ταξινόμησης και αναζήτησης.",
+        "emptyShellNotice": "Αυτή η προεπισκόπηση χρησιμοποιει την πραγματική λίστα πρακτόρων που επιστρέφεται από το /agents DataApi.",
+        "lastOnChange": "Τελευταίο onChange",
+        "previewDescription": "Κάντε κλικ στον διακόπτη για να ανοίξετε τον επιλογέα",
+        "previewTitle": "Προεπισκόπηση",
+        "title": "Επιλογέας Πράκτορα",
+        "triggerPlaceholder": "Επιλέξτε έναν πράκτορα",
+        "valueProp": "Τρέχουσα τιμή"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Καθαρό",
+        "configDescription": "Εναλλαγή ιδιοτήτων για προεπισκόπηση της συμπεριφοράς του στοιχείου",
+        "configTitle": "Διαμόρφωση",
+        "currentProps": "Τρέχοντα props",
+        "description": "Τοποθετεί το επιχειρησιακό στοιχείο AssistantSelector απευθείας για να επαληθεύσει τη συμπεριφορά πολλαπλού/μονού, αναγνωριστικού/αντικειμένου, καρφίτσας, ταξινόμησης και αναζήτησης.",
+        "lastOnChange": "Τελευταίο onChange",
+        "previewDescription": "Κάντε κλικ στον διακόπτη για να ανοίξετε τον επιλογέα",
+        "previewTitle": "Προεπισκόπηση",
+        "title": "Επιλογέας Βοηθού",
+        "triggerPlaceholder": "Επιλέξτε βοηθό",
+        "triggerSelectedCount": "{{count}} βοηθοί επιλέχθηκαν",
+        "valueProp": "Τρέχουσα τιμή"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Ορατό μόνο κατά την ανάπτυξη για τη δοκιμή του νέου επιλογέα μοντέλου απευθείας μέσα στην εφαρμογή.",
+      "label": "Εργαστήριο Συστατικών",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Ρύθμιση Συμπεριφοράς και Εμφάνισης",
+        "callbackEmpty": "Δεν έχει ληφθεί ακόμη κλήση συστατικού",
+        "clearSelection": "Καθαρισμός Επιλογής",
+        "configDescription": "Εναλλάξτε τα βασικά props του ModelSelector παραπάνω και επιθεωρήστε την τιμή εισόδου καθώς και τα payloads των callbacks παρακάτω.",
+        "configTitle": "Παιχνίδι με Αξεσουάρ",
+        "controlMultiSelectMode": "Ελεγχόμενη λειτουργία πολλαπλής επιλογής",
+        "currentProps": "Τρέχοντα Props",
+        "defaultMultiSelectMode": "προεπιλεγμένηΛειτουργίαΠολλαπλήςΕπιλογής",
+        "description": "Αυτή η σελίδα τοποθετεί απευθείας το τρέχον επιχειρησιακό στοιχείο ModelSelector, ώστε να μπορούμε να επαληθεύσουμε τη συμπεριφορά επιλογής, φιλτραρίσματος, αναζήτησης και καρφιτσώματος.",
+        "empty": "Δεν είναι διαθέσιμα μοντέλα αυτή τη στιγμή, επομένως ο επιλογέας δεν μπορεί ακόμα να εμφανιστεί.",
+        "lastModeChangeReturn": "Τελευταία επιστροφή onMultiSelectModeChange",
+        "lastSelectReturn": "Τελευταίο onSelect Return",
+        "loading": "Φόρτωση μοντέλων...",
+        "modelId": "Αναγνωριστικό μοντέλου",
+        "multiSelectMode": "πολλαπλήΛειτουργίαΕπιλογής",
+        "multiple": "πολλαπλές",
+        "normalizedIds": "Κανονικοποιημένα Επιλεγμένα Αναγνωριστικά",
+        "outputEmpty": "Δεν υπάρχουν ακόμα δεδομένα για εμφάνιση",
+        "provider": "Πάροχος",
+        "resetOutputs": "Επαναφορά Εξόδων",
+        "resultsDescription": "Αυτό δείχνει την τρέχουσα πρόταση αξίας, τα κανονικοποιημένα επιλεγμένα αναγνωριστικά και το τελευταίο αποτέλεσμα callback από το στοιχείο.",
+        "resultsTitle": "Έξοδοι & Κατάσταση",
+        "selected": "Τρέχουσα Επιλογή",
+        "selectedEmpty": "Δεν έχει επιλεγεί ακόμα μοντέλο",
+        "selectionConfig": "Διαμόρφωση τιμής επιλογής",
+        "selectionType": "τύπος επιλογής",
+        "selectionTypeId": "Επιστροφή Αναγνωριστικών Μοντέλου",
+        "selectionTypeModel": "Επιστροφή Αντικειμένων Μοντέλου",
+        "showPinnedModels": "εμφάνιση καρφιτσωμένων μοντέλων",
+        "showTagFilter": "showTagFilter",
+        "title": "Επιλογέας Μοντέλου",
+        "triggerPlaceholder": "Επιλέξτε ένα μοντέλο",
+        "triggerSelectedCount": "{{count}} μοντέλα επιλέχθηκαν",
+        "valueProp": "Τρέχουσα Πρόταση Αξίας"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Εργαστήριο Ανάπτυξης Συστατικών"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Αντιγραφή ασφαλείας",
         "title": "Αντιγραφή ασφαλείας και αποκατάσταση δεδομένων"
       },
+      "common": {
+        "sections": {
+          "custom_css": "Προσαρμοσμένη CSS",
+          "display_language": "Εμφάνιση & Γλώσσα",
+          "privacy_advanced": "Ιδιωτικότητα & Προηγμένα",
+          "system_startup": "Σύστημα & Εκκίνηση"
+        },
+        "title": "Κοινές Ρυθμίσεις"
+      },
       "display": {
         "title": "Ρυθμίσεις εμφάνισης"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Ρωσικά"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Σημειώσεις"
+      },
+      "title": "Ενσωματώσεις"
+    },
     "launch": {
       "onboot": "Αυτόματη εκκίνηση κατά την εκκίνηση του συστήματος",
       "title": "Εκκίνηση",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Χρήστης"
     },
+    "menuGroups": {
+      "appSettings": "Ρυθμίσεις Εφαρμογής",
+      "integrations": "Μοντέλα",
+      "productivity": "Παραγωγικότητα",
+      "services": "Πρόσθετα",
+      "system": "Σύστημα"
+    },
     "messages": {
       "divider": {
         "label": "Διαχωριστική γραμμή μηνυμάτων",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Χρήση όλων των κλειδιών"
       },
       "default_assistant_model": "Πρόεδρος Υπηρεσίας προεπιλεγμένου μοντέλου",
-      "default_assistant_model_description": "Το μοντέλο που χρησιμοποιείται όταν δημιουργείτε νέο υπάλληλο. Αν το υπάλληλο δεν έχει επιλεγμένο ένα μοντέλο, τότε θα χρησιμοποιεί αυτό το μοντέλο.",
+      "default_assistant_model_description": "Χρησιμοποιείται όταν ένας βοηθός δεν έχει μοντέλο.",
       "empty": "Δεν υπάρχουν μοντέλα",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "λεπτομέρεια"
       }
     },
+    "plugins": {
+      "bunDescription": "JavaScript runtime που χρησιμοποιείται από υπηρεσίες MCP και σχετικά εργαλειοθέματα.",
+      "description": "Διαχειριστείτε τα δυαδικά εργαλεία και τις εξαρτήσεις χρόνου εκτέλεσης που απαιτούνται από την εφαρμογή.",
+      "installing": "Εγκατάσταση...",
+      "notInstalled": "Δεν έχει εγκατασταθεί",
+      "title": "Εξαρτήσεις Περιβάλλοντος",
+      "uvDescription": "Διαχειριστής πακέτων Python για υπηρεσίες MCP και εγκατάσταση εξαρτήσεων."
+    },
     "privacy": {
       "enable_privacy_mode": "Αποστολή ανώνυμων αναφορών σφαλμάτων και στατιστικών δεδομένων",
       "title": "Ρυθμίσεις Απορρήτου"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Ενέργεια",
       "actions": "Λειτουργία",
+      "all_disable": "Απενεργοποίηση Όλων",
+      "all_enable": "Ενεργοποίηση Όλων",
       "bind_first_to_enable": "Δέστε πρώτα μια συντόμευση για να αλλάξετε την κατάσταση ενεργοποίησής της",
+      "categories": {
+        "assistant": "Εργαλεία Βοηθού Τεχνητής Νοημοσύνης",
+        "chat": "Αλληλεπίδραση Μηνυμάτων",
+        "general": "Καθολικό και Παράθυρο",
+        "title": "Ομάδες Συντομεύσεων",
+        "topic": "Συζήτηση και Θέματα"
+      },
       "clear_shortcut": "Καθαρισμός συντομού πλήκτρου",
       "clear_topic": "Άδειασμα μηνυμάτων",
       "conflict_with": "Ήδη χρησιμοποιείται από τον \"{{name}}\"",
       "copy_last_message": "Αντιγραφή του τελευταίου μηνύματος",
       "edit_last_user_message": "Επεξεργασία του τελευταίου μηνύματος χρήστη",
+      "empty": "Δεν υπάρχουν διαθέσιμες συντομεύσεις σε αυτήν την ομάδα",
       "enabled": "ενεργοποίηση",
       "exit_fullscreen": "Έξοδος από πλήρη οθόνη",
       "label": "Πλήκτρο",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Πάτησε το συντομού πλήκτρου",
       "quick_assistant": "Συντομεύστε επιχειρηματικά",
       "rename_topic": "Μετονομασία θέματος",
+      "reset": "Επαναφορά",
       "reset_defaults": "Επαναφορά στα προεπιλεγμένα συντομού πλήκτρα",
       "reset_defaults_confirm": "Θέλετε να επαναφέρετε όλα τα συντομού πλήκτρα στις προεπιλεγμένες τιμές;",
       "reset_defaults_failed": "Αποτυχία επαναφοράς των συντομεύσεων στις προεπιλογές",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "Το σύστημα OCR υποστηρίζει μόνο Windows και MacOS"
         },
+        "features": {
+          "paddleocr": "Ισχυρότερο για κινέζικο κείμενο και πιο κατάλληλο για αποδείξεις, σαρωμένα έγγραφα και εικόνες με πιο πολύπλοκες διατάξεις.",
+          "system": {
+            "macos": "Χρησιμοποιεί την ενσωματωμένη μηχανή OCR του macOS χωρίς καμία ρύθμιση, ιδανική για στιγμιότυπα οθόνης και ελαφριά εξαγωγή κειμένου.",
+            "windows": "Χρησιμοποιεί τη γηγενή μηχανή OCR των Windows με ισχυρή ενσωμάτωση στο λειτουργικό σύστημα για βασικές τοπικές εργασίες αναγνώρισης."
+          },
+          "tesseract": "Μια κλασική τοπική επιλογή OCR με προσαρμόσιμα πακέτα γλωσσών, ιδανική για χρήση εκτός σύνδεσης και πολύγλωσσες ροές εργασίας."
+        },
         "image": {
           "error": {
             "provider_not_found": "Ο πάροχος δεν υπάρχει"
@@ -5706,6 +5755,13 @@
         "title": "Υπηρεσία OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Κατάλληλο για τη μετατροπή αρχείων PDF σε καθαρότερη μορφή Markdown ή επεξεργάσιμο κείμενο για περαιτέρω ανάκτηση και επεξεργασία.",
+          "mineru": "Βελτιστοποιημένο για ανάκτηση διάταξης υψηλότερης πιστότητας, ιδιαίτερα χρήσιμο για ακαδημαϊκά PDF, πίνακες και τύπους.",
+          "mistral": "Ισχυρή κατανόηση εγγράφων μέσω cloud, κατάλληλη για δομημένη εξαγωγή, πολυσέλιδα αρχεία και πολύπλοκες διατάξεις.",
+          "open_mineru": "Μια ανοιχτή επιλογή ανάπτυξης που ταιριάζει σε ομάδες που επιθυμούν αυτο-φιλοξενία ή μεγαλύτερο έλεγχο στη διαδικασία επεξεργασίας.",
+          "paddleocr": "Μια ελαφρύτερη επιλογή ενσωμάτωσης που λειτουργεί καλά για κινέζικα έγγραφα, σκαναρίσματα και κοινό περιεχόμενο σε στυλ αποδείξεων."
+        },
         "paddleocr": {
           "aistudio_access_token": "Δείκτης πρόσβασης της κοινότητας AI Studio",
           "api_url": "Διεύθυνση URL του API",
diff --git a/src/renderer/src/i18n/translate/es-es.json b/src/renderer/src/i18n/translate/es-es.json
index 9273c8b441..e70e5619e5 100644
--- a/src/renderer/src/i18n/translate/es-es.json
+++ b/src/renderer/src/i18n/translate/es-es.json
@@ -36,9 +36,9 @@
         "comingSoon": "Próximamente",
         "connected": "Conectado",
         "connecting": "Conectando",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Error al crear el canal",
         "deleteConfirm": "¿Eliminar canal \"{{name}}\"?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Error al eliminar el canal",
         "description": "Conecte su agente a plataformas de mensajería.",
         "disconnected": "Desconectado",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Canales",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Error al actualizar el canal",
         "wechat": {
           "addAccount": "Agregar cuenta de WeChat",
           "chatIds": "IDs de Usuario Permitidos",
@@ -215,7 +215,7 @@
         "edit": "Editar",
         "empty": "No hay tareas programadas. Agregue una para comenzar.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Error al cargar las tareas"
         },
         "intervalPlaceholder": "Intervalo en minutos",
         "intervalUnit": "minutos",
@@ -226,7 +226,7 @@
           "error": "Error",
           "justNow": "ahora mismo",
           "label": "Historial de ejecución",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Error al cargar el historial de ejecución",
           "result": "Resultado",
           "runAt": "Ejecutado en",
           "running": "Corriendo...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Se requiere instalar el entorno Bun para ejecutar la herramienta de línea de comandos",
     "cli_tool": "Herramienta de línea de comandos",
     "cli_tool_placeholder": "Seleccione la herramienta de línea de comandos que desea utilizar",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} artículo",
+    "count_other": "{{count}} artículos",
     "custom_path": "Ruta personalizada",
     "custom_path_error": "Error al establecer la ruta de terminal personalizada",
     "custom_path_required": "此终端需要设置自定义路径",
@@ -1508,12 +1508,12 @@
     "description": "Inicia rápidamente múltiples herramientas de línea de comandos para código, aumentando la eficiencia del desarrollo",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Intenta ajustar los términos de búsqueda",
+        "title": "No se encontraron herramientas coincidentes"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Agrega una herramienta CLI o un asistente de código para comenzar.",
+        "title": "Aún no hay herramientas de código."
       }
     },
     "env_vars_help": "Introduzca variables de entorno personalizadas (una por línea, formato: CLAVE=valor)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Instale el entorno Bun antes de iniciar la herramienta de línea de comandos",
       "error": "Error al iniciar, intente nuevamente",
       "label": "Iniciar",
-      "launched": "[to be translated]:Launched",
+      "launched": "Lanzado",
       "success": "Inicio exitoso",
       "validation_error": "Complete all required fields: CLI tool, model, and working directory"
     },
     "launching": "Iniciando...",
     "model": "modelo",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Elige qué modelo de IA debe usar la herramienta CLI",
     "model_placeholder": "Seleccionar el modelo que se va a utilizar",
     "model_required": "Seleccione el modelo",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Oficial",
+    "official_tools": "Oficial",
+    "search_placeholder": "Buscar herramientas de CLI…",
     "select_folder": "Seleccionar carpeta",
     "set_custom_path": "Establecer ruta de terminal personalizada",
     "supported_providers": "Proveedores de servicios compatibles",
     "terminal": "terminal",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Elige qué aplicación de terminal utilizar para ejecutar la CLI",
     "terminal_placeholder": "Seleccionar aplicación de terminal",
     "title": "Herramientas de código",
     "update_options": "Opciones de actualización",
     "working_directory": "directorio de trabajo",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "El directorio de trabajo en el que se ejecuta la herramienta CLI"
   },
   "code_block": {
     "collapse": "Replegar",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Anclar este modelo",
+      "unpin": "Desanclar modelo"
     },
     "add_parameter": "Agregar parámetro",
     "all": "Todo",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Modelo inválido",
     "json_parse_error": "Formato JSON no válido",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Paralelismo multi-modelo (mutuamente excluyente con multi-asistente)"
     },
     "no_matches": "No hay modelos disponibles",
     "parameter_name": "Nombre del parámetro",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Nuevo Agente",
+      "empty_text": "Aún no hay agentes",
+      "search_placeholder": "Buscar agentes…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Nuevo Asistente",
+      "empty_text": "Aún no hay asistentes",
+      "multi_hint": "(mutualmente excluyente con multi-modelo)",
+      "multi_label": "Asistente múltiple en paralelo",
+      "search_placeholder": "Asistentes de búsqueda…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Editar",
+      "pin": "Alfiler",
+      "pinned_title": "Fijado",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Más antiguo",
+        "desc": "Reciente"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Ordenar",
+      "unpin": "Desanclar"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Claro",
+        "configDescription": "Alternar props para previsualizar el comportamiento del componente",
+        "configTitle": "Configuración",
+        "currentProps": "Accesorios actuales",
+        "description": "AgentSelector ahora lee datos reales de /agents del DataApi para verificar la selección de id/ítems, el fijado, la ordenación y el comportamiento de búsqueda.",
+        "emptyShellNotice": "Esta vista previa utiliza la lista real de agentes devuelta por /agents DataApi.",
+        "lastOnChange": "Último onChange",
+        "previewDescription": "Haz clic en el activador para abrir el selector",
+        "previewTitle": "Vista previa",
+        "title": "Selector de agente",
+        "triggerPlaceholder": "Selecciona un agente",
+        "valueProp": "Valor actual"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Claro",
+        "configDescription": "Alternar las props para previsualizar el comportamiento del componente",
+        "configTitle": "Configuración",
+        "currentProps": "Accesorios actuales",
+        "description": "Monta el componente de negocio AssistantSelector directamente para verificar el comportamiento de multi/único, id/elemento, pin, ordenación y búsqueda.",
+        "lastOnChange": "Último onChange",
+        "previewDescription": "Haz clic en el disparador para abrir el selector",
+        "previewTitle": "Vista previa",
+        "title": "Selector de Asistente",
+        "triggerPlaceholder": "Seleccionar un asistente",
+        "triggerSelectedCount": "{{count}} asistentes seleccionados",
+        "valueProp": "Valor actual"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Visible solo en desarrollo para probar el nuevo selector de modelos directamente dentro de la aplicación.",
+      "label": "Laboratorio de Componentes",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Configuración de Comportamiento y Visualización",
+        "callbackEmpty": "Aún no se ha recibido ninguna devolución de componente.",
+        "clearSelection": "Borrar selección",
+        "configDescription": "Alterna las props clave de ModelSelector arriba e inspecciona el valor de entrada más las cargas útiles de devolución de llamada abajo.",
+        "configTitle": "Área de juego de accesorios",
+        "controlMultiSelectMode": "Modo de selección múltiple controlada",
+        "currentProps": "Accesorios Actuales",
+        "defaultMultiSelectMode": "modoMultiSelecciónPredeterminado",
+        "description": "Esta página monta directamente el componente comercial ModelSelector actual para que podamos verificar el comportamiento de selección, filtrado, búsqueda y fijación.",
+        "empty": "No hay modelos disponibles actualmente, por lo que el selector aún no se puede mostrar.",
+        "lastModeChangeReturn": "Último en Return de MultiSelectModeChange",
+        "lastSelectReturn": "Última devolución onSelect",
+        "loading": "Cargando modelos...",
+        "modelId": "ID del modelo",
+        "multiSelectMode": "modoMultiSelección",
+        "multiple": "múltiple",
+        "normalizedIds": "IDs Seleccionados Normalizados",
+        "outputEmpty": "Aún no hay datos para mostrar",
+        "provider": "Proveedor",
+        "resetOutputs": "Restablecer Salidas",
+        "resultsDescription": "Esto muestra el valor actual de prop, los ids seleccionados normalizados y la última salida de devolución de llamada del componente.",
+        "resultsTitle": "Salidas y Estado",
+        "selected": "Selección actual",
+        "selectedEmpty": "Ningún modelo seleccionado aún",
+        "selectionConfig": "Configuración del Valor de Selección",
+        "selectionType": "tipoDeSelección",
+        "selectionTypeId": "Devolver identificadores de modelo",
+        "selectionTypeModel": "Devolver Objetos del Modelo",
+        "showPinnedModels": "mostrarModelosFijados",
+        "showTagFilter": "mostrarFiltroDeEtiquetas",
+        "title": "Selector de Modelo",
+        "triggerPlaceholder": "Selecciona un modelo",
+        "triggerSelectedCount": "{{count}} modelos seleccionados",
+        "valueProp": "Propuesta de Valor Actual"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Componente de Desarrollo Lab"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Hacer copia de seguridad",
         "title": "Copia de seguridad y restauración de datos"
       },
+      "common": {
+        "sections": {
+          "custom_css": "CSS personalizado",
+          "display_language": "Pantalla e idioma",
+          "privacy_advanced": "Privacidad y Avanzado",
+          "system_startup": "Sistema e Inicio"
+        },
+        "title": "Configuración común"
+      },
       "display": {
         "title": "Configuración de visualización"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Ruso"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Notas"
+      },
+      "title": "Integraciones"
+    },
     "launch": {
       "onboot": "Iniciar automáticamente al encender",
       "title": "Inicio",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Usuario"
     },
+    "menuGroups": {
+      "appSettings": "Configuración de la aplicación",
+      "integrations": "Modelos",
+      "productivity": "Productividad",
+      "services": "Complementos",
+      "system": "Sistema"
+    },
     "messages": {
       "divider": {
         "label": "Separador de mensajes",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Usar todas las claves"
       },
       "default_assistant_model": "Modelo predeterminado del asistente",
-      "default_assistant_model_description": "Modelo utilizado al crear nuevos asistentes, si el asistente no tiene un modelo asignado, se utiliza este modelo",
+      "default_assistant_model_description": "Se usa cuando un asistente no tiene modelo.",
       "empty": "Sin modelos",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "nivel de detalle"
       }
     },
+    "plugins": {
+      "bunDescription": "Entorno de ejecución de JavaScript utilizado por los servicios MCP y las cadenas de herramientas relacionadas.",
+      "description": "Administrar herramientas binarias y dependencias de tiempo de ejecución requeridas por la aplicación.",
+      "installing": "Instalando...",
+      "notInstalled": "No instalado",
+      "title": "Dependencias del entorno",
+      "uvDescription": "Gestor de paquetes Python para servicios MCP e instalación de dependencias."
+    },
     "privacy": {
       "enable_privacy_mode": "Enviar informes de errores y estadísticas de forma anónima",
       "title": "Configuración de privacidad"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Acción",
       "actions": "operación",
+      "all_disable": "Desactivar todo",
+      "all_enable": "Habilitar todo",
       "bind_first_to_enable": "Primero vincula un atajo para cambiar su estado de activación",
+      "categories": {
+        "assistant": "Herramientas de asistente de IA",
+        "chat": "Interacción de mensajes",
+        "general": "Global y Ventana",
+        "title": "Grupos de acceso directo",
+        "topic": "Conversación y Temas"
+      },
       "clear_shortcut": "Borrar atajo",
       "clear_topic": "Vaciar mensaje",
       "conflict_with": "Ya utilizado por \"{{name}}\"",
       "copy_last_message": "Copiar el último mensaje",
       "edit_last_user_message": "Editar último mensaje de usuario",
+      "empty": "No hay accesos directos disponibles en este grupo",
       "enabled": "habilitar",
       "exit_fullscreen": "Salir de pantalla completa",
       "label": "Tecla",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Presionar atajo",
       "quick_assistant": "Asistente rápido",
       "rename_topic": "Renombrar tema",
+      "reset": "Restablecer",
       "reset_defaults": "Restablecer atajos predeterminados",
       "reset_defaults_confirm": "¿Está seguro de querer restablecer todos los atajos?",
       "reset_defaults_failed": "Error al restablecer los atajos a los valores predeterminados",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "El OCR del sistema solo admite Windows y MacOS"
         },
+        "features": {
+          "paddleocr": "Más fuerte para texto chino y más adecuado para recibos, escaneos e imágenes con diseños más complejos.",
+          "system": {
+            "macos": "Utiliza el motor OCR integrado de macOS sin configuración, ideal para capturas de pantalla y extracción ligera de texto.",
+            "windows": "Utiliza el motor OCR nativo de Windows con una fuerte integración en el sistema operativo para tareas básicas de reconocimiento local."
+          },
+          "tesseract": "Una opción OCR local clásica con paquetes de idioma personalizables, ideal para flujos de trabajo sin conexión y multilingües."
+        },
         "image": {
           "error": {
             "provider_not_found": "El proveedor no existe"
@@ -5706,6 +5755,13 @@
         "title": "Servicio OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Muy adecuado para convertir archivos PDF en Markdown más limpio o texto editable para su recuperación y edición posteriores.",
+          "mineru": "Optimizado para una recuperación de diseño de mayor fidelidad, especialmente útil para PDFs académicos, tablas y fórmulas.",
+          "mistral": "Potente comprensión de documentos en la nube, adecuada para la extracción estructurada, archivos de varias páginas y diseños complejos.",
+          "open_mineru": "Una opción de implementación abierta que se adapta a equipos que desean alojamiento propio o un control más estricto sobre el flujo de procesamiento.",
+          "paddleocr": "Una opción de integración más ligera que funciona bien con documentos chinos, escaneos y contenido común de estilo recibo."
+        },
         "paddleocr": {
           "aistudio_access_token": "Token de acceso de la Comunidad AI Studio",
           "api_url": "URL de la API",
diff --git a/src/renderer/src/i18n/translate/fr-fr.json b/src/renderer/src/i18n/translate/fr-fr.json
index 3ca06b5249..5209fa6c16 100644
--- a/src/renderer/src/i18n/translate/fr-fr.json
+++ b/src/renderer/src/i18n/translate/fr-fr.json
@@ -36,9 +36,9 @@
         "comingSoon": "Bientôt disponible",
         "connected": "Connecté",
         "connecting": "Connexion",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Échec de la création du canal",
         "deleteConfirm": "Supprimer le canal \"{{name}}\" ?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Échec de la suppression du canal",
         "description": "Connectez votre agent aux plateformes de messagerie.",
         "disconnected": "Déconnecté",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Canaux",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Échec de la mise à jour du canal",
         "wechat": {
           "addAccount": "Ajouter un compte WeChat",
           "chatIds": "Identifiants d'utilisateurs autorisés",
@@ -215,7 +215,7 @@
         "edit": "Modifier",
         "empty": "Aucune tâche planifiée. Ajoutez-en une pour commencer.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Échec du chargement des tâches"
         },
         "intervalPlaceholder": "Intervalle en minutes",
         "intervalUnit": "minutes",
@@ -226,7 +226,7 @@
           "error": "Erreur",
           "justNow": "à l'instant",
           "label": "Historique d'exécution",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Échec du chargement de l'historique des exécutions",
           "result": "Résultat",
           "runAt": "Exécuté le",
           "running": "En cours d'exécution...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "L'exécution de l'outil en ligne de commande nécessite l'installation de l'environnement Bun",
     "cli_tool": "Outil CLI",
     "cli_tool_placeholder": "Sélectionnez l'outil CLI à utiliser",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} article",
+    "count_other": "{{count}} articles",
     "custom_path": "Chemin personnalisé",
     "custom_path_error": "Échec de la définition du chemin de terminal personnalisé",
     "custom_path_required": "Ce terminal nécessite la configuration d’un chemin personnalisé",
@@ -1508,12 +1508,12 @@
     "description": "Lancer rapidement plusieurs outils CLI de code pour améliorer l'efficacité du développement",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Essayez d’ajuster vos termes de recherche",
+        "title": "Aucun outil correspondant trouvé"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Ajoutez un outil CLI ou un assistant de code pour commencer",
+        "title": "Pas encore d'outils de code"
       }
     },
     "env_vars_help": "Saisissez les variables d'environnement personnalisées (une par ligne, format : KEY=value)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Veuillez d'abord installer l'environnement Bun avant de lancer l'outil en ligne de commande",
       "error": "Échec du démarrage, veuillez réessayer",
       "label": "Démarrer",
-      "launched": "[to be translated]:Launched",
+      "launched": "Lancé",
       "success": "Démarrage réussi",
       "validation_error": "Veuillez remplir tous les champs obligatoires : outil CLI, modèle et répertoire de travail"
     },
     "launching": "En cours de démarrage...",
     "model": "modèle",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Choisis quel modèle d’IA l’outil CLI doit utiliser",
     "model_placeholder": "Sélectionnez le modèle à utiliser",
     "model_required": "Veuillez sélectionner le modèle",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Officiel",
+    "official_tools": "Officiel",
+    "search_placeholder": "Rechercher des outils CLI…",
     "select_folder": "Sélectionner le dossier",
     "set_custom_path": "Définir un chemin de terminal personnalisé",
     "supported_providers": "fournisseurs pris en charge",
     "terminal": "Terminal",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Choisissez l'application de terminal dans laquelle exécuter le CLI",
     "terminal_placeholder": "Choisir une application de terminal",
     "title": "Outils de code",
     "update_options": "Options de mise à jour",
     "working_directory": "répertoire de travail",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Le répertoire de travail dans lequel l'outil CLI se lance"
   },
   "code_block": {
     "collapse": "Réduire",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Épingler ce modèle",
+      "unpin": "Détacher le modèle"
     },
     "add_parameter": "Ajouter un paramètre",
     "all": "Tout",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Modèle invalide",
     "json_parse_error": "Format JSON invalide",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Parallélisme multi-modèle (exclusif mutuel avec assistant multiple)"
     },
     "no_matches": "Aucun modèle disponible",
     "parameter_name": "Nom du paramètre",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Nouvel Agent",
+      "empty_text": "Pas encore d'agents",
+      "search_placeholder": "Agents de recherche…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Nouvel Assistant",
+      "empty_text": "Pas encore d'assistants",
+      "multi_hint": "(mutuellement exclusif avec multi-modèle)",
+      "multi_label": "Multi-assistant parallèle",
+      "search_placeholder": "Assistant de recherche…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Modifier",
+      "pin": "Épingle",
+      "pinned_title": "Épinglé",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Le plus ancien",
+        "desc": "Récent"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Trier",
+      "unpin": "Détacher"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Clair",
+        "configDescription": "Basculer les props pour prévisualiser le comportement du composant",
+        "configTitle": "Configuration",
+        "currentProps": "Accessoires actuels",
+        "description": "AgentSelector lit désormais les données réelles de l’API DataApi /agents pour vérifier la sélection d’identifiant/d’élément, l’épinglage, le tri et le comportement de recherche.",
+        "emptyShellNotice": "Cet aperçu utilise la vraie liste d’agents renvoyée par l’API de données /agents.",
+        "lastOnChange": "Dernier onChange",
+        "previewDescription": "Cliquez sur le déclencheur pour ouvrir le sélecteur",
+        "previewTitle": "Aperçu",
+        "title": "Sélecteur d'agent",
+        "triggerPlaceholder": "Sélectionnez un agent",
+        "valueProp": "Valeur actuelle"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Clair",
+        "configDescription": "Basculer les props pour prévisualiser le comportement du composant",
+        "configTitle": "Configuration",
+        "currentProps": "Propriétés actuelles",
+        "description": "Monte le composant métier AssistantSelector directement pour vérifier les comportements multi/simple, id/élément, épinglage, tri et recherche.",
+        "lastOnChange": "Dernier onChange",
+        "previewDescription": "Cliquez sur le déclencheur pour ouvrir le sélecteur",
+        "previewTitle": "Aperçu",
+        "title": "Sélecteur d'Assistant",
+        "triggerPlaceholder": "Sélectionnez un assistant",
+        "triggerSelectedCount": "{{count}} assistants sélectionnés",
+        "valueProp": "Valeur actuelle"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Visible uniquement en développement pour tester le nouveau sélecteur de modèle directement dans l'application.",
+      "label": "Laboratoire de Composants",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Configuration du comportement et de l'affichage",
+        "callbackEmpty": "Aucun rappel de composant reçu pour l'instant",
+        "clearSelection": "Effacer la sélection",
+        "configDescription": "Activez les props clés de ModelSelector ci-dessus et inspectez la valeur d'entrée ainsi que les payloads de rappel ci-dessous.",
+        "configTitle": "Terrain de jeu des accessoires",
+        "controlMultiSelectMode": "Mode multi-sélection contrôlée",
+        "currentProps": "Accessoires actuels",
+        "defaultMultiSelectMode": "modeSélectionMultipleParDéfaut",
+        "description": "Cette page monte directement le composant métier ModelSelector actuel afin que nous puissions vérifier les comportements de sélection, de filtrage, de recherche et d'épinglage.",
+        "empty": "Aucun modèle n’est actuellement disponible, donc le sélecteur ne peut pas encore être affiché.",
+        "lastModeChangeReturn": "Dernier retour de onMultiSelectModeChange",
+        "lastSelectReturn": "Dernier retour onSelect",
+        "loading": "Chargement des modèles...",
+        "modelId": "ID du modèle",
+        "multiSelectMode": "modeSélectionMultiple",
+        "multiple": "multiple",
+        "normalizedIds": "IDs sélectionnés normalisés",
+        "outputEmpty": "Aucune donnée à afficher pour le moment",
+        "provider": "Fournisseur",
+        "resetOutputs": "Réinitialiser les sorties",
+        "resultsDescription": "Ceci montre la proposition de valeur actuelle, les identifiants sélectionnés normalisés et la dernière sortie de rappel du composant.",
+        "resultsTitle": "Sorties et état",
+        "selected": "Sélection actuelle",
+        "selectedEmpty": "Aucun modèle sélectionné pour l'instant",
+        "selectionConfig": "Configuration de la valeur de sélection",
+        "selectionType": "typeDeSélection",
+        "selectionTypeId": "Retourner les ID de modèle",
+        "selectionTypeModel": "Retourner les objets du modèle",
+        "showPinnedModels": "afficherModèlesÉpinglés",
+        "showTagFilter": "afficherFiltreTag",
+        "title": "Sélecteur de modèle",
+        "triggerPlaceholder": "Sélectionner un modèle",
+        "triggerSelectedCount": "{{count}} modèles sélectionnés",
+        "valueProp": "Valeur actuelle proposée"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Composant de développement Laboratoire"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Sauvegarder",
         "title": "Sauvegarde et restauration des données"
       },
+      "common": {
+        "sections": {
+          "custom_css": "CSS personnalisé",
+          "display_language": "Affichage et langue",
+          "privacy_advanced": "Confidentialité et avancé",
+          "system_startup": "Système et démarrage"
+        },
+        "title": "Paramètres communs"
+      },
       "display": {
         "title": "Paramètres d'affichage"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Russe"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Notes"
+      },
+      "title": "Intégrations"
+    },
     "launch": {
       "onboot": "Démarrer automatiquement au démarrage",
       "title": "Démarrage",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Пользователь"
     },
+    "menuGroups": {
+      "appSettings": "Paramètres de l'application",
+      "integrations": "Modèles",
+      "productivity": "Productivité",
+      "services": "Modules complémentaires",
+      "system": "Système"
+    },
     "messages": {
       "divider": {
         "label": "Séparateur de messages",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Utiliser toutes les clés"
       },
       "default_assistant_model": "Modèle d'assistant par défaut",
-      "default_assistant_model_description": "Modèle utilisé pour créer de nouveaux assistants, si aucun modèle n'est défini pour l'assistant, ce modèle sera utilisé",
+      "default_assistant_model_description": "Utilisé lorsqu'un assistant n'a pas de modèle.",
       "empty": "Aucun modèle",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "niveau de détail"
       }
     },
+    "plugins": {
+      "bunDescription": "Runtime JavaScript utilisé par les services MCP et les chaînes d'outils associées.",
+      "description": "Gérez les outils binaires et les dépendances d'exécution requises par l'application.",
+      "installing": "Installation en cours...",
+      "notInstalled": "Non installé",
+      "title": "Dépendances de l'environnement",
+      "uvDescription": "Gestionnaire de packages Python pour les services MCP et l’installation des dépendances."
+    },
     "privacy": {
       "enable_privacy_mode": "Отправлять анонимные сообщения об ошибках и статистику",
       "title": "Настройки конфиденциальности"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Action",
       "actions": "操作",
+      "all_disable": "Désactiver tout",
+      "all_enable": "Tout activer",
       "bind_first_to_enable": "Liez d'abord un raccourci pour modifier son état activé",
+      "categories": {
+        "assistant": "Outils d'assistance IA",
+        "chat": "Interaction des messages",
+        "general": "Global et Fenêtre",
+        "title": "Groupes de raccourcis",
+        "topic": "Conversation et Sujets"
+      },
       "clear_shortcut": "Effacer raccourci clavier",
       "clear_topic": "Vider les messages",
       "conflict_with": "Déjà utilisé par \"{{name}}\"",
       "copy_last_message": "Copier le dernier message",
       "edit_last_user_message": "Éditer le dernier message utilisateur",
+      "empty": "Aucun raccourci n’est disponible dans ce groupe",
       "enabled": "activer",
       "exit_fullscreen": "Quitter le plein écran",
       "label": "Touche",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Appuyer sur raccourci clavier",
       "quick_assistant": "Assistant rapide",
       "rename_topic": "Renommer le sujet",
+      "reset": "Réinitialiser",
       "reset_defaults": "Réinitialiser raccourcis par défaut",
       "reset_defaults_confirm": "Êtes-vous sûr de vouloir réinitialiser tous les raccourcis clavier ?",
       "reset_defaults_failed": "Échec de la réinitialisation des raccourcis aux valeurs par défaut",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "L'OCR système prend uniquement en charge Windows et MacOS"
         },
+        "features": {
+          "paddleocr": "Plus robuste pour le texte chinois et mieux adapté aux reçus, aux scans et aux images avec des mises en page plus complexes.",
+          "system": {
+            "macos": "Utilise le moteur OCR intégré de macOS sans configuration, idéal pour les captures d’écran et l’extraction légère de texte.",
+            "windows": "Utilise le moteur OCR natif de Windows avec une forte intégration au système d'exploitation pour des tâches de reconnaissance locales de base."
+          },
+          "tesseract": "Une option OCR locale classique avec des packs linguistiques personnalisables, bien adaptée aux workflows hors ligne et multilingues."
+        },
         "image": {
           "error": {
             "provider_not_found": "Ce fournisseur n'existe pas"
@@ -5706,6 +5755,13 @@
         "title": "Service OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Parfait pour convertir des PDF en Markdown plus propre ou en texte éditable pour une récupération et un édition ultérieures.",
+          "mineru": "Optimisé pour une récupération de mise en page de haute fidélité, particulièrement utile pour les PDF académiques, les tableaux et les formules.",
+          "mistral": "Forte compréhension de documents basée sur le cloud, adaptée à l'extraction structurée, aux fichiers multipages et aux mises en page complexes.",
+          "open_mineru": "Une option de déploiement ouverte qui convient aux équipes souhaitant l’auto-hébergement ou un contrôle plus étroit sur la chaîne de traitement.",
+          "paddleocr": "Un choix d'intégration plus léger qui fonctionne bien pour les documents chinois, les scans et le contenu courant de type reçu."
+        },
         "paddleocr": {
           "aistudio_access_token": "Jeton d’accès à la communauté AI Studio",
           "api_url": "URL de l’API",
diff --git a/src/renderer/src/i18n/translate/ja-jp.json b/src/renderer/src/i18n/translate/ja-jp.json
index 09a071fc50..266b1d730c 100644
--- a/src/renderer/src/i18n/translate/ja-jp.json
+++ b/src/renderer/src/i18n/translate/ja-jp.json
@@ -36,9 +36,9 @@
         "comingSoon": "近日公開",
         "connected": "接続済み",
         "connecting": "接続",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "チャンネルの作成に失敗しました",
         "deleteConfirm": "チャンネル「{{name}}」を削除しますか？",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "チャンネルの削除に失敗しました",
         "description": "エージェントをメッセージングプラットフォームに接続します。",
         "disconnected": "切断済み",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "チャンネル",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "チャンネルの更新に失敗しました",
         "wechat": {
           "addAccount": "WeChatアカウントを追加",
           "chatIds": "許可されたユーザーID",
@@ -215,7 +215,7 @@
         "edit": "編集",
         "empty": "スケジュールタスクがありません。追加して開始しましょう。",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "タスクの読み込みに失敗しました"
         },
         "intervalPlaceholder": "間隔（分）",
         "intervalUnit": "議事録",
@@ -226,7 +226,7 @@
           "error": "エラー",
           "justNow": "さっき",
           "label": "実行履歴",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "実行履歴の読み込みに失敗しました",
           "result": "結果",
           "runAt": "実行時刻",
           "running": "走っている…",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "CLI ツールを実行するには Bun 環境が必要です",
     "cli_tool": "CLI ツール",
     "cli_tool_placeholder": "使用する CLI ツールを選択してください",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}}個のアイテム",
+    "count_other": "{{count}}個のアイテム",
     "custom_path": "カスタムパス",
     "custom_path_error": "カスタムターミナルパスの設定に失敗しました",
     "custom_path_required": "この端末にはカスタムパスを設定する必要があります",
@@ -1508,12 +1508,12 @@
     "description": "開発効率を向上させるために、複数のコード CLI ツールを迅速に起動します",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "検索語を調整してみてください",
+        "title": "一致するツールが見つかりません"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "CLIツールまたはコードアシスタントを追加して始めましょう",
+        "title": "コードツールはまだありません"
       }
     },
     "env_vars_help": "環境変数を設定して、CLI ツールの実行時に使用します。各変数は 1 行ごとに設定してください。",
@@ -1525,28 +1525,28 @@
       "bun_required": "CLI ツールを実行するには Bun 環境が必要です。まず Bun をインストールしてください",
       "error": "起動に失敗しました。もう一度試してください",
       "label": "起動",
-      "launched": "[to be translated]:Launched",
+      "launched": "開始されました",
       "success": "起動成功",
       "validation_error": "必須項目を入力してください：CLI ツール、モデル、作業ディレクトリ"
     },
     "launching": "起動中...",
     "model": "モデル",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "CLIツールが使用するAIモデルを選択してください",
     "model_placeholder": "使用するモデルを選択してください",
     "model_required": "モデルを選択してください",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "公式",
+    "official_tools": "公式",
+    "search_placeholder": "CLIツールを検索…",
     "select_folder": "フォルダを選択",
     "set_custom_path": "カスタムターミナルパスを設定",
     "supported_providers": "サポートされているプロバイダー",
     "terminal": "端末",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "CLIを実行するターミナルアプリケーションを選択してください",
     "terminal_placeholder": "ターミナルアプリを選択",
     "title": "コードツール",
     "update_options": "更新オプション",
     "working_directory": "作業ディレクトリ",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "CLIツールが起動する作業ディレクトリ"
   },
   "code_block": {
     "collapse": "折りたたむ",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "このモデルをピン留め",
+      "unpin": "モデルのピン留めを解除"
     },
     "add_parameter": "パラメータを追加",
     "all": "すべて",
@@ -2585,7 +2585,7 @@
     "invalid_model": "無効なモデル",
     "json_parse_error": "無効なJSON形式",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "マルチモデル並列（マルチアシスタントとは相互排他）"
     },
     "no_matches": "利用可能なモデルがありません",
     "parameter_name": "パラメータ名",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "新しいエージェント",
+      "empty_text": "エージェントはまだいません",
+      "search_placeholder": "検索エージェント…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "新しいアシスタント",
+      "empty_text": "まだアシスタントはいません",
+      "multi_hint": "（マルチモデルとは相互に排他的）",
+      "multi_label": "マルチアシスタント並列",
+      "search_placeholder": "検索アシスタント…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "編集",
+      "pin": "ピン",
+      "pinned_title": "ピン留め",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "最古",
+        "desc": "最近"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "並び替え",
+      "unpin": "ピン留めを解除"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "クリア",
+        "configDescription": "プロップを切り替えてコンポーネントの動作をプレビューする",
+        "configTitle": "設定",
+        "currentProps": "現在のプロップ",
+        "description": "AgentSelectorは、ID/アイテムの選択、ピン留め、ソート、検索動作を検証するために、リアルな/agents DataApiデータを読み込むようになりました。",
+        "emptyShellNotice": "このプレビューは、/agents DataApi から返される実際のエージェントリストを使用しています。",
+        "lastOnChange": "最新のonChange",
+        "previewDescription": "トリガーをクリックしてセレクタを開きます",
+        "previewTitle": "プレビュー",
+        "title": "エージェントセレクター",
+        "triggerPlaceholder": "エージェントを選択してください",
+        "valueProp": "現在値"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "クリア",
+        "configDescription": "プロパティを切り替えてコンポーネントの動作をプレビューする",
+        "configTitle": "設定",
+        "currentProps": "現在のプロップ",
+        "description": "AssistantSelectorのビジネスコンポーネントを直接マウントし、複数/単一、ID/項目、ピン留め、ソート、検索の動作を検証します。",
+        "lastOnChange": "最新のonChange",
+        "previewDescription": "トリガーをクリックしてセレクターを開きます",
+        "previewTitle": "プレビュー",
+        "title": "アシスタントセレクター",
+        "triggerPlaceholder": "アシスタントを選択してください",
+        "triggerSelectedCount": "{{count}}人のアシスタントが選択されました",
+        "valueProp": "現在の値"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "開発環境でのみ表示され、アプリ内で直接新しいモデルセレクタをテストするためのものです。",
+      "label": "コンポーネントラボ",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "動作と表示設定",
+        "callbackEmpty": "まだコンポーネントコールバックを受信していません",
+        "clearSelection": "選択をクリア",
+        "configDescription": "上記のキー ModelSelector プロパティを切り替え、下記の入力値とコールバックのペイロードを確認してください。",
+        "configTitle": "プロップス プレイグラウンド",
+        "controlMultiSelectMode": "制御された複数選択モード",
+        "currentProps": "現在のプロップ",
+        "defaultMultiSelectMode": "デフォルトマルチセレクトモード",
+        "description": "このページでは、現在の ModelSelector ビジネスコンポーネントを直接マウントして、選択、フィルタリング、検索、ピン留めの動作を確認できます。",
+        "empty": "現在利用可能なモデルがないため、セレクターはまだ表示できません。",
+        "lastModeChangeReturn": "最新の onMultiSelectModeChange 戻り値",
+        "lastSelectReturn": "最新のonSelect戻り値",
+        "loading": "モデルを読み込んでいます...",
+        "modelId": "モデルID",
+        "multiSelectMode": "マルチセレクトモード",
+        "multiple": "複数",
+        "normalizedIds": "正規化された選択されたID",
+        "outputEmpty": "まだ表示するデータがありません",
+        "provider": "プロバイダー",
+        "resetOutputs": "出力をリセット",
+        "resultsDescription": "これは現在の値のプロップ、正規化された選択されたID、およびコンポーネントからの最新のコールバック出力を示しています。",
+        "resultsTitle": "出力と状態",
+        "selected": "現在の選択",
+        "selectedEmpty": "モデルがまだ選択されていません",
+        "selectionConfig": "選択値設定",
+        "selectionType": "選択タイプ",
+        "selectionTypeId": "モデルIDを返す",
+        "selectionTypeModel": "モデルオブジェクトを返す",
+        "showPinnedModels": "固定されたモデルを表示",
+        "showTagFilter": "タグフィルターを表示",
+        "title": "モデルセレクター",
+        "triggerPlaceholder": "モデルを選択してください",
+        "triggerSelectedCount": "{{count}}件のモデルが選択されています",
+        "valueProp": "現在のバリュープロポジション"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "開発コンポーネントラボ"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "バックアップ",
         "title": "データのバックアップと復元"
       },
+      "common": {
+        "sections": {
+          "custom_css": "カスタムCSS",
+          "display_language": "表示と言語",
+          "privacy_advanced": "プライバシーと高度な設定",
+          "system_startup": "システム＆スタートアップ"
+        },
+        "title": "共通設定"
+      },
       "display": {
         "title": "表示設定"
       },
@@ -4746,6 +4755,12 @@
         "russian": "ロシア語"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "ノート"
+      },
+      "title": "連携"
+    },
     "launch": {
       "onboot": "起動時に自動で開始",
       "title": "起動",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "ユーザー"
     },
+    "menuGroups": {
+      "appSettings": "アプリ設定",
+      "integrations": "モデル",
+      "productivity": "生産性",
+      "services": "プラグイン",
+      "system": "システム"
+    },
     "messages": {
       "divider": {
         "label": "メッセージ間に区切り線を表示",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "キー"
       },
       "default_assistant_model": "デフォルトアシスタントモデル",
-      "default_assistant_model_description": "新しいアシスタントを作成する際に使用されるモデル。アシスタントがモデルを設定していない場合、このモデルが使用されます",
+      "default_assistant_model_description": "アシスタントにモデルがない場合に使用されます",
       "empty": "モデルが見つかりません",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "詳細度"
       }
     },
+    "plugins": {
+      "bunDescription": "MCPサービスおよび関連ツールチェーンで使用されるJavaScriptランタイム。",
+      "description": "アプリに必要なバイナリツールとランタイム依存関係を管理します。",
+      "installing": "インストール中...",
+      "notInstalled": "インストールされていません",
+      "title": "環境依存",
+      "uvDescription": "MCPサービスおよび依存関係インストール用のPythonパッケージマネージャー。"
+    },
     "privacy": {
       "enable_privacy_mode": "匿名エラーレポートとデータ統計の送信",
       "title": "プライバシー設定"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "操作",
       "actions": "操作",
+      "all_disable": "すべて無効にする",
+      "all_enable": "すべて有効にする",
       "bind_first_to_enable": "ショートカットを最初に割り当てて、その有効状態を変更してください",
+      "categories": {
+        "assistant": "AIアシスタントツール",
+        "chat": "メッセージインタラクション",
+        "general": "グローバルとウィンドウ",
+        "title": "ショートカットグループ",
+        "topic": "会話と話題"
+      },
       "clear_shortcut": "ショートカットをクリア",
       "clear_topic": "メッセージを消去",
       "conflict_with": "すでに「{{name}}」によって使用されています",
       "copy_last_message": "最後のメッセージをコピー",
       "edit_last_user_message": "最後のユーザーメッセージを編集",
+      "empty": "このグループには利用可能なショートカットはありません",
       "enabled": "有効化",
       "exit_fullscreen": "フルスクリーンを終了",
       "label": "キー",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "ショートカットを押す",
       "quick_assistant": "クイックアシスタント",
       "rename_topic": "トピックの名前を変更",
+      "reset": "リセット",
       "reset_defaults": "デフォルトのショートカットをリセット",
       "reset_defaults_confirm": "すべてのショートカットをリセットしてもよろしいですか？",
       "reset_defaults_failed": "ショートカットをデフォルトにリセットできませんでした",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "システムOCRはWindowsとMacOSのみをサポートしています"
         },
+        "features": {
+          "paddleocr": "中国語のテキストに対してより強力で、レシート、スキャン、より複雑なレイアウトの画像に適しています。",
+          "system": {
+            "macos": "macOSに内蔵されたOCRエンジンを使用し、セットアップ不要でスクリーンショットや軽量なテキスト抽出に最適です。",
+            "windows": "ネイティブな Windows OCR エンジンを使用し、OS と強く統合され、基本的なローカル認識タスクに対応します。"
+          },
+          "tesseract": "カスタマイズ可能な言語パックを備えたクラシックなローカルOCRオプションで、オフラインおよび多言語ワークフローに最適です。"
+        },
         "image": {
           "error": {
             "provider_not_found": "該提供者は存在しません"
@@ -5706,6 +5755,13 @@
         "title": "OCRサービス"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "PDFをよりクリーンなMarkdownや編集可能なテキストに変換し、後続の検索や編集に適した形式にするのに最適です。",
+          "mineru": "より高品位なレイアウト復元に最適化されており、学術PDF、表、数式に特に有用です。",
+          "mistral": "強力なクラウドベースのドキュメント理解機能で、構造化された抽出、複数ページのファイル、複雑なレイアウトに対応します。",
+          "open_mineru": "セルフホスティングや処理パイプラインをより厳密に制御したいチームに適した、オープンな展開オプション。",
+          "paddleocr": "中国語の文書、スキャン、一般的なレシート形式のコンテンツに適した、より軽い統合オプション。"
+        },
         "paddleocr": {
           "aistudio_access_token": "AI Studioコミュニティのアクセストークン",
           "api_url": "API URL",
diff --git a/src/renderer/src/i18n/translate/pt-pt.json b/src/renderer/src/i18n/translate/pt-pt.json
index e7fda33e04..d4eecfb437 100644
--- a/src/renderer/src/i18n/translate/pt-pt.json
+++ b/src/renderer/src/i18n/translate/pt-pt.json
@@ -36,9 +36,9 @@
         "comingSoon": "Em breve",
         "connected": "Conectado",
         "connecting": "Conectando",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Falha ao criar canal",
         "deleteConfirm": "Excluir canal \"{{name}}\"?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Falha ao excluir canal",
         "description": "Conecte o seu agente a plataformas de mensagens.",
         "disconnected": "Desconectado",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Canais",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Falha ao atualizar o canal",
         "wechat": {
           "addAccount": "Adicionar Conta WeChat",
           "chatIds": "IDs de Usuários Permitidos",
@@ -215,7 +215,7 @@
         "edit": "Editar",
         "empty": "Sem tarefas agendadas. Adicione uma para começar.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Falha ao carregar tarefas"
         },
         "intervalPlaceholder": "Intervalo em minutos",
         "intervalUnit": "minutos",
@@ -226,7 +226,7 @@
           "error": "Erro",
           "justNow": "agora mesmo",
           "label": "Histórico de execução",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Falha ao carregar o histórico de execução",
           "result": "Resultado",
           "runAt": "Executado em",
           "running": "Correndo...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Executar a ferramenta CLI requer a instalação do ambiente Bun",
     "cli_tool": "Ferramenta de linha de comando",
     "cli_tool_placeholder": "Selecione a ferramenta de linha de comando a ser utilizada",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} item",
+    "count_other": "{{count}} itens",
     "custom_path": "Caminho personalizado",
     "custom_path_error": "Falha ao definir caminho de terminal personalizado",
     "custom_path_required": "Este terminal requer a definição de um caminho personalizado",
@@ -1508,12 +1508,12 @@
     "description": "Inicie rapidamente várias ferramentas de linha de comando de código, aumentando a eficiência do desenvolvimento",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Tente ajustar os termos da sua pesquisa",
+        "title": "Nenhuma ferramenta correspondente encontrada"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Adicione uma ferramenta de CLI ou um assistente de código para começar",
+        "title": "Ainda sem ferramentas de código"
       }
     },
     "env_vars_help": "Insira variáveis de ambiente personalizadas (uma por linha, formato: CHAVE=valor)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Instale o ambiente Bun antes de iniciar a ferramenta de linha de comando",
       "error": "Falha ao iniciar, tente novamente",
       "label": "iniciar",
-      "launched": "[to be translated]:Launched",
+      "launched": "Lançado",
       "success": "Início bem-sucedido",
       "validation_error": "Preencha todos os campos obrigatórios: ferramenta CLI, modelo e diretório de trabalho"
     },
     "launching": "Iniciando...",
     "model": "modelo",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Escolha qual modelo de IA a ferramenta CLI deve usar",
     "model_placeholder": "Selecione o modelo a ser utilizado",
     "model_required": "Selecione o modelo",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Oficial",
+    "official_tools": "Oficial",
+    "search_placeholder": "Pesquisar ferramentas de CLI…",
     "select_folder": "Selecionar pasta",
     "set_custom_path": "Definir caminho personalizado do terminal",
     "supported_providers": "Provedores de serviço suportados",
     "terminal": "terminal",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Escolha em qual aplicativo de terminal executar a CLI",
     "terminal_placeholder": "Selecionar aplicativo de terminal",
     "title": "Ferramenta de código",
     "update_options": "Opções de atualização",
     "working_directory": "diretório de trabalho",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "O diretório de trabalho em que a ferramenta CLI é iniciada"
   },
   "code_block": {
     "collapse": "Recolher",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Fixar este modelo",
+      "unpin": "Desafixar modelo"
     },
     "add_parameter": "Adicionar parâmetro",
     "all": "Todos",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Modelo inválido",
     "json_parse_error": "Formato JSON inválido",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Paralelismo multi-modelo (mutuamente exclusivo com multi-assistente)"
     },
     "no_matches": "Nenhum modelo disponível",
     "parameter_name": "Nome do parâmetro",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Novo Agente",
+      "empty_text": "Ainda não há agentes",
+      "search_placeholder": "Procurar agentes…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Novo Assistente",
+      "empty_text": "Nenhum assistente ainda",
+      "multi_hint": "(mutualmente exclusivo com multi-modelo)",
+      "multi_label": "Multi-assistente paralelo",
+      "search_placeholder": "Assistentes de pesquisa…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Editar",
+      "pin": "Pino",
+      "pinned_title": "Fixado",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Mais antigo",
+        "desc": "Recent"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Ordenar",
+      "unpin": "Desafixar"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Claro",
+        "configDescription": "Alternar propriedades para visualizar o comportamento do componente",
+        "configTitle": "Configuração",
+        "currentProps": "Propriedades atuais",
+        "description": "AgentSelector agora lê dados reais da DataApi de /agents para verificar a seleção de id/item, fixação, ordenação e comportamento de busca.",
+        "emptyShellNotice": "Esta pré-visualização utiliza a lista real de agentes devolvida pela DataApi /agents.",
+        "lastOnChange": "Mais recente onChange",
+        "previewDescription": "Clique no gatilho para abrir o seletor",
+        "previewTitle": "Pré-visualização",
+        "title": "Seletor de Agente",
+        "triggerPlaceholder": "Selecione um agente",
+        "valueProp": "Valor atual"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Limpo",
+        "configDescription": "Alterne as props para visualizar o comportamento do componente",
+        "configTitle": "Configuração",
+        "currentProps": "Propriedades atuais",
+        "description": "Monta o componente de negócios AssistantSelector diretamente para verificar o comportamento de múltiplo/único, id/item, pin, ordenação e pesquisa.",
+        "lastOnChange": "Mais recente onChange",
+        "previewDescription": "Clique no gatilho para abrir o seletor",
+        "previewTitle": "Pré-visualização",
+        "title": "Seletor de Assistente",
+        "triggerPlaceholder": "Selecione um assistente",
+        "triggerSelectedCount": "{{count}} assistentes selecionados",
+        "valueProp": "Valor atual"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Visível apenas em desenvolvimento para testar o novo seletor de modelos diretamente dentro do aplicativo.",
+      "label": "Laboratório de Componentes",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Configuração de Comportamento e Exibição",
+        "callbackEmpty": "Nenhuma chamada de retorno de componente recebida ainda",
+        "clearSelection": "Limpar Seleção",
+        "configDescription": "Alterne as principais props do ModelSelector acima e inspecione o valor de entrada mais os payloads de retorno de chamada abaixo.",
+        "configTitle": "Parque de Props",
+        "controlMultiSelectMode": "Modo de multiseleção controlado",
+        "currentProps": "Atuais Adereços",
+        "defaultMultiSelectMode": "modoMultiSeleçãoPadrão",
+        "description": "Esta página monta diretamente o componente de negócio ModelSelector atual para que possamos verificar o comportamento de seleção, filtragem, pesquisa e fixação.",
+        "empty": "Nenhum modelo está disponível no momento, portanto o seletor ainda não pode ser exibido.",
+        "lastModeChangeReturn": "Último em MultiSelectModeChange Return",
+        "lastSelectReturn": "Último retorno onSelect",
+        "loading": "Carregando modelos...",
+        "modelId": "ID do Modelo",
+        "multiSelectMode": "modo de seleção múltipla",
+        "multiple": "múltiplo",
+        "normalizedIds": "IDs Selecionados Normalizados",
+        "outputEmpty": "Ainda não há dados para exibir",
+        "provider": "Fornecedor",
+        "resetOutputs": "Redefinir Saídas",
+        "resultsDescription": "Isto mostra o valor atual da propriedade, os ids normalizados selecionados e a última saída de retorno de chamada do componente.",
+        "resultsTitle": "Saídas e Estado",
+        "selected": "Seleção Atual",
+        "selectedEmpty": "Nenhum modelo selecionado ainda",
+        "selectionConfig": "Configuração do Valor de Seleção",
+        "selectionType": "tipoDeSeleção",
+        "selectionTypeId": "Retornar IDs do Modelo",
+        "selectionTypeModel": "Retornar Objetos do Modelo",
+        "showPinnedModels": "mostrarModelosFixados",
+        "showTagFilter": "mostrarFiltroDeEtiqueta",
+        "title": "Seletor de Modelos",
+        "triggerPlaceholder": "Selecione um modelo",
+        "triggerSelectedCount": "{{count}} modelos selecionados",
+        "valueProp": "Proposta de Valor Atual"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Laboratório de Componentes de Desenvolvimento"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Backup",
         "title": "Backup e restauração de dados"
       },
+      "common": {
+        "sections": {
+          "custom_css": "CSS Personalizado",
+          "display_language": "Exibição e Idioma",
+          "privacy_advanced": "Privacidade & Avançado",
+          "system_startup": "Sistema & Inicialização"
+        },
+        "title": "Configurações Comuns"
+      },
       "display": {
         "title": "Configurações de exibição"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Russo"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Notas"
+      },
+      "title": "Integrações"
+    },
     "launch": {
       "onboot": "Iniciar automaticamente ao ligar",
       "title": "Inicialização",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Usuário"
     },
+    "menuGroups": {
+      "appSettings": "Configurações do Aplicativo",
+      "integrations": "Modelos",
+      "productivity": "Produtividade",
+      "services": "Plugins",
+      "system": "Sistema"
+    },
     "messages": {
       "divider": {
         "label": "Divisor de mensagens",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Use chaves"
       },
       "default_assistant_model": "Modelo de assistente padrão",
-      "default_assistant_model_description": "Modelo usado ao criar um novo assistente, se o assistente não tiver um modelo definido, este será usado",
+      "default_assistant_model_description": "Usado quando um assistente não tem modelo.",
       "empty": "Sem modelos",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "nível de detalhe"
       }
     },
+    "plugins": {
+      "bunDescription": "Runtime JavaScript usado pelos serviços MCP e pelas respectivas cadeias de ferramentas.",
+      "description": "Gerencie ferramentas binárias e dependências de runtime necessárias para o aplicativo.",
+      "installing": "Instalando...",
+      "notInstalled": "Não instalado",
+      "title": "Dependências do Ambiente",
+      "uvDescription": "Gerenciador de pacotes Python para serviços MCP e instalação de dependências."
+    },
     "privacy": {
       "enable_privacy_mode": "Enviar relatórios de erro e estatísticas de forma anônima",
       "title": "Configurações de Privacidade"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Ação",
       "actions": "operação",
+      "all_disable": "Desativar Todos",
+      "all_enable": "Ativar Todos",
       "bind_first_to_enable": "Primeiro, vincule um atalho para alterar o seu estado ativado",
+      "categories": {
+        "assistant": "Ferramentas de Assistente de IA",
+        "chat": "Interação de Mensagem",
+        "general": "Global e Janela",
+        "title": "Grupos de Atalhos",
+        "topic": "Conversa e Tópicos"
+      },
       "clear_shortcut": "Limpar atalho",
       "clear_topic": "Limpar mensagem",
       "conflict_with": "Já usado por \"{{name}}\"",
       "copy_last_message": "Copiar a última mensagem",
       "edit_last_user_message": "Editar última mensagem do usuário",
+      "empty": "Nenhum atalho está disponível neste grupo",
       "enabled": "ativar",
       "exit_fullscreen": "Sair da tela cheia",
       "label": "Tecla",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Pressionar atalho",
       "quick_assistant": "Atalho de assistente",
       "rename_topic": "Renomear tópico",
+      "reset": "Redefinir",
       "reset_defaults": "Redefinir atalhos padrão",
       "reset_defaults_confirm": "Tem certeza de que deseja redefinir todos os atalhos?",
       "reset_defaults_failed": "Falha ao redefinir atalhos para os padrões",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "O OCR do sistema suporta apenas Windows e MacOS"
         },
+        "features": {
+          "paddleocr": "Mais forte para texto em chinês e mais adequado para recibos, digitalizações e imagens com layouts mais complexos.",
+          "system": {
+            "macos": "Usa o motor OCR integrado do macOS sem configuração, ideal para capturas de tela e extração leve de texto.",
+            "windows": "Usa o motor OCR nativo do Windows com forte integração ao SO para tarefas básicas de reconhecimento local."
+          },
+          "tesseract": "Uma opção clássica de OCR local com pacotes de idioma personalizáveis, bem adequada para fluxos de trabalho offline e multilíngues."
+        },
         "image": {
           "error": {
             "provider_not_found": "O provedor não existe"
@@ -5706,6 +5755,13 @@
         "title": "Serviço OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Bem adequado para converter PDFs em Markdown mais limpo ou texto editável para recuperação e edição posteriores.",
+          "mineru": "Otimizado para recuperação de layout de alta fidelidade, especialmente útil para PDFs acadêmicos, tabelas e fórmulas.",
+          "mistral": "Forte compreensão de documentos baseada em nuvem, adequada para extração estruturada, arquivos de várias páginas e layouts complexos.",
+          "open_mineru": "Uma opção de implantação aberta adequada para equipes que desejam hospedar por conta própria ou ter maior controle sobre o pipeline de processamento.",
+          "paddleocr": "Uma opção de integração mais leve que funciona bem para documentos em chinês, digitalizações e conteúdo comum no estilo de recibos."
+        },
         "paddleocr": {
           "aistudio_access_token": "Token de acesso da Comunidade AI Studio",
           "api_url": "URL da API",
diff --git a/src/renderer/src/i18n/translate/ro-ro.json b/src/renderer/src/i18n/translate/ro-ro.json
index 324fc49097..563b7b076d 100644
--- a/src/renderer/src/i18n/translate/ro-ro.json
+++ b/src/renderer/src/i18n/translate/ro-ro.json
@@ -36,9 +36,9 @@
         "comingSoon": "În curând",
         "connected": "Conectat",
         "connecting": "Conectare",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Nu s-a reușit crearea canalului",
         "deleteConfirm": "Șterge canalul „{{name}}”?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Nu s-a putut șterge canalul",
         "description": "Conectați agentul la platforme de mesagerie.",
         "disconnected": "Deconectat",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Canale",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Nu s-a putut actualiza canalul",
         "wechat": {
           "addAccount": "Adaugă cont WeChat",
           "chatIds": "ID-uri de utilizator permise",
@@ -215,7 +215,7 @@
         "edit": "Editează",
         "empty": "Nu există sarcini programate. Adăugați una pentru a începe.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Nu s-au putut încărca sarcinile"
         },
         "intervalPlaceholder": "Interval în minute",
         "intervalUnit": "minute",
@@ -226,7 +226,7 @@
           "error": "Eroare",
           "justNow": "chiar acum",
           "label": "Istoric rulări",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Nu s-a reușit încărcarea istoricului de execuție",
           "result": "Rezultat",
           "runAt": "Rulat la",
           "running": "Alergând...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Mediul Bun este necesar pentru a rula instrumente CLI",
     "cli_tool": "Instrument CLI",
     "cli_tool_placeholder": "Selectează instrumentul CLI de utilizat",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} element",
+    "count_other": "{{count}} articole",
     "custom_path": "Cale personalizată",
     "custom_path_error": "Nu s-a putut seta calea personalizată a terminalului",
     "custom_path_required": "Calea personalizată este necesară pentru acest terminal",
@@ -1508,12 +1508,12 @@
     "description": "Lansează rapid mai multe instrumente CLI de cod pentru a îmbunătăți eficiența dezvoltării",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Încearcă să îți ajustezi termenii de căutare",
+        "title": "Nu au fost găsite unelte potrivite"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Adaugă un instrument CLI sau un asistent de cod pentru a începe",
+        "title": "Nu există încă instrumente de cod."
       }
     },
     "env_vars_help": "Introdu variabile de mediu personalizate (una pe rând, format: CHEIE=valoare)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Te rugăm să instalezi mai întâi mediul Bun înainte de a lansa instrumentele CLI",
       "error": "Lansarea a eșuat, te rugăm să încerci din nou",
       "label": "Lansează",
-      "launched": "[to be translated]:Launched",
+      "launched": "Lansat",
       "success": "Lansare reușită",
       "validation_error": "Te rugăm să completezi toate câmpurile obligatorii: instrument CLI, model și director de lucru"
     },
     "launching": "Se lansează...",
     "model": "Model",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Alegeți ce model AI să folosească instrumentul CLI",
     "model_placeholder": "Selectează modelul de utilizat",
     "model_required": "Te rugăm să selectezi un model",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Oficial",
+    "official_tools": "Oficial",
+    "search_placeholder": "Caută instrumente CLI…",
     "select_folder": "Selectează dosarul",
     "set_custom_path": "Setează calea personalizată a terminalului",
     "supported_providers": "Furnizori acceptați",
     "terminal": "Terminal",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Alege în ce aplicație terminal să rulezi CLI-ul",
     "terminal_placeholder": "Selectează aplicația terminal",
     "title": "Instrumente de cod",
     "update_options": "Opțiuni de actualizare",
     "working_directory": "Director de lucru",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Directorul de lucru în care pornește instrumentul CLI"
   },
   "code_block": {
     "collapse": "Restrânge",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Fixează acest model",
+      "unpin": "Dezactivează modelul"
     },
     "add_parameter": "Adaugă parametru",
     "all": "Toate",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Model invalid",
     "json_parse_error": "Format JSON invalid",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Multi-model paralel (mutu exclusiv cu multi-asistent)"
     },
     "no_matches": "Nu există modele disponibile",
     "parameter_name": "Nume parametru",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Agent nou",
+      "empty_text": "Niciun agent încă",
+      "search_placeholder": "Caută agenți…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Asistent Nou",
+      "empty_text": "Niciun asistent încă",
+      "multi_hint": "(exclusiv în mod reciproc cu multi-model)",
+      "multi_label": "Asistenți multipli în paralel",
+      "search_placeholder": "Asistenți de căutare…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Editează",
+      "pin": "Pin",
+      "pinned_title": "Fixat",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Cel mai vechi",
+        "desc": "Recent"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Sortează",
+      "unpin": "Anulați fixarea"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Clar",
+        "configDescription": "Comută proprietățile pentru a previzualiza comportamentul componentei",
+        "configTitle": "Configurare",
+        "currentProps": "Proprietăți curente",
+        "description": "AgentSelector citește acum date reale din DataApi /agents pentru a verifica selecția id/item, fixarea, sortarea și comportamentul căutării.",
+        "emptyShellNotice": "Această previzualizare utilizează lista reală de agenți returnată de DataApi /agents.",
+        "lastOnChange": "Cel mai recent onChange",
+        "previewDescription": "Faceți clic pe declanșator pentru a deschide selectorul",
+        "previewTitle": "Previzualizare",
+        "title": "Selector Agent",
+        "triggerPlaceholder": "Selectați un agent",
+        "valueProp": "Valoare curentă"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Clar",
+        "configDescription": "Comută proprietățile pentru a previzualiza comportamentul componentei",
+        "configTitle": "Configurare",
+        "currentProps": "Proprietățile curente",
+        "description": "Montează componenta business AssistantSelector direct pentru a verifica comportamentul multi/single, id/item, pin, sortare și căutare.",
+        "lastOnChange": "Cel mai recent onChange",
+        "previewDescription": "Faceți clic pe declanșator pentru a deschide selectorul",
+        "previewTitle": "Previzualizare",
+        "title": "Selector de asistent",
+        "triggerPlaceholder": "Selectați un asistent",
+        "triggerSelectedCount": "{{count}} asistenți selectați",
+        "valueProp": "Valoare curentă"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Vizibil doar în dezvoltare pentru testarea noului selector de model direct în aplicație.",
+      "label": "Laborator de Componente",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Configurare comportament și afișare",
+        "callbackEmpty": "Niciun apel de întoarcere al componentei nu a fost încă primit",
+        "clearSelection": "Șterge selecția",
+        "configDescription": "Comută proprietățile cheie ale selectorului de model de mai sus și inspectează valoarea de intrare plus încărcăturile de apel invers de mai jos.",
+        "configTitle": "Teren de joacă pentru recuzită",
+        "controlMultiSelectMode": "Mod multiSelect controlat",
+        "currentProps": "Proprietăți actuale",
+        "defaultMultiSelectMode": "modImplicitSelectareMultiplă",
+        "description": "Această pagină montează direct componenta de business ModelSelector curentă, astfel încât să putem verifica comportamentul de selecție, filtrare, căutare și fixare.",
+        "empty": "Niciun model nu este disponibil în prezent, așa că selectorul nu poate fi încă afișat.",
+        "lastModeChangeReturn": "Ultimul Return privind schimbarea modului de selecție multiplă",
+        "lastSelectReturn": "Cel mai recent Return onSelect",
+        "loading": "Se încarcă modelele...",
+        "modelId": "ID model",
+        "multiSelectMode": "modSelectareMultiplă",
+        "multiple": "multiple",
+        "normalizedIds": "ID-uri selectate normalizate",
+        "outputEmpty": "Nu există încă date de afișat",
+        "provider": "Furnizor",
+        "resetOutputs": "Resetare ieșiri",
+        "resultsDescription": "Acesta arată propoziția de valoare curentă, ID-urile selectate normalizate și cea mai recentă ieșire de callback de la componentă.",
+        "resultsTitle": "Ieșiri și Stare",
+        "selected": "Selecție curentă",
+        "selectedEmpty": "Niciun model selectat încă",
+        "selectionConfig": "Configurare Valoare Selecție",
+        "selectionType": "tipSelecție",
+        "selectionTypeId": "Returnează ID-urile modelului",
+        "selectionTypeModel": "Returnează Obiectele Modelului",
+        "showPinnedModels": "aratăModeleFixate",
+        "showTagFilter": "aratăFiltrulEtichete",
+        "title": "Selector de modele",
+        "triggerPlaceholder": "Selectați un model",
+        "triggerSelectedCount": "{{count}} modele selectate",
+        "valueProp": "Propunerea de valoare actuală"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Componenta Laborator Dezvoltare"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Backup",
         "title": "Backup și recuperare date"
       },
+      "common": {
+        "sections": {
+          "custom_css": "CSS personalizat",
+          "display_language": "Afișare și limbă",
+          "privacy_advanced": "Confidențialitate și avansat",
+          "system_startup": "Sistem și Pornire"
+        },
+        "title": "Setări comune"
+      },
       "display": {
         "title": "Setări afișare"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Rusă"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Note"
+      },
+      "title": "Integrări"
+    },
     "launch": {
       "onboot": "Pornește automat la pornirea sistemului",
       "title": "Lansare",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Utilizator"
     },
+    "menuGroups": {
+      "appSettings": "Setări aplicație",
+      "integrations": "Modele",
+      "productivity": "Productivitate",
+      "services": "Module suplimentare",
+      "system": "Sistem"
+    },
     "messages": {
       "divider": {
         "label": "Afișează divizor între mesaje",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Cheie(i)"
       },
       "default_assistant_model": "Model asistent implicit",
-      "default_assistant_model_description": "Model folosit la crearea unui nou asistent; dacă asistentul nu este setat, va fi folosit acest model",
+      "default_assistant_model_description": "Folosit când un asistent nu are model.",
       "empty": "Nu s-au găsit modele",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "Verbozitate"
       }
     },
+    "plugins": {
+      "bunDescription": "Runtime JavaScript folosit de serviciile MCP și de toolchain-urile aferente.",
+      "description": "Gestionați instrumentele binare și dependențele de runtime necesare aplicației.",
+      "installing": "Se instalează...",
+      "notInstalled": "Neinstalat",
+      "title": "Dependențe de mediu",
+      "uvDescription": "Manager de pachete Python pentru serviciile MCP și instalarea dependențelor."
+    },
     "privacy": {
       "enable_privacy_mode": "Raportare anonimă a erorilor și statisticilor",
       "title": "Setări confidențialitate"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Acțiune",
       "actions": "Comandă",
+      "all_disable": "Dezactivați tot",
+      "all_enable": "Activează tot",
       "bind_first_to_enable": "Asociază mai întâi o comandă rapidă pentru a-i schimba starea de activare",
+      "categories": {
+        "assistant": "Instrumente AI Assistant",
+        "chat": "Interacțiune cu mesajul",
+        "general": "Global și Fereastră",
+        "title": "Grupuri de comenzi rapide",
+        "topic": "Conversație și Subiecte"
+      },
       "clear_shortcut": "Șterge comanda rapidă",
       "clear_topic": "Șterge mesajele",
       "conflict_with": "Deja folosit de \"{{name}}\"",
       "copy_last_message": "Copiază ultimul mesaj",
       "edit_last_user_message": "Editează ultimul mesaj al utilizatorului",
+      "empty": "Nu există comenzi rapide disponibile în acest grup",
       "enabled": "Activează",
       "exit_fullscreen": "Ieși din ecran complet",
       "label": "Tastă",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Apasă comanda rapidă",
       "quick_assistant": "Asistent rapid",
       "rename_topic": "Redenumește subiectul",
+      "reset": "Resetare",
       "reset_defaults": "Resetează la implicite",
       "reset_defaults_confirm": "Ești sigur că vrei să resetezi toate comenzile rapide?",
       "reset_defaults_failed": "Nu s-a reușit resetarea comenzilor rapide la valorile implicite",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "OCR-ul de sistem acceptă doar Windows și MacOS"
         },
+        "features": {
+          "paddleocr": "Mai puternic pentru textul chinezesc și mai potrivit pentru bonuri, scanări și imagini cu layout-uri mai complexe.",
+          "system": {
+            "macos": "Folosește motorul OCR integrat în macOS fără nicio configurare, ideal pentru capturi de ecran și extragere ușoară de text.",
+            "windows": "Utilizează motorul nativ OCR Windows, cu integrare puternică în sistemul de operare, pentru sarcini locale de recunoaștere de bază."
+          },
+          "tesseract": "O opțiune clasică locală OCR cu pachete de limbi personalizabile, ideală pentru fluxuri de lucru offline și multilingve."
+        },
         "image": {
           "error": {
             "provider_not_found": "Furnizorul nu există"
@@ -5706,6 +5755,13 @@
         "title": "Serviciu OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Perfect potrivit pentru conversia PDF-urilor în Markdown mai curat sau text editabil pentru recuperare și editare ulterioară.",
+          "mineru": "Optimizat pentru o recuperare a aspectului de înaltă fidelitate, deosebit de util pentru PDF-uri academice, tabele și formule.",
+          "mistral": "Puternică înțelegere a documentelor bazată pe cloud, potrivită pentru extragerea structurată, fișiere multi-pagină și layout-uri complexe.",
+          "open_mineru": "O opțiune de implementare deschisă, potrivită pentru echipele care doresc auto-găzduire sau un control mai strâns asupra fluxului de procesare.",
+          "paddleocr": "O opțiune de integrare mai ușoară, care funcționează bine pentru documente chinezești, scanări și conținut obișnuit de tip bon fiscal."
+        },
         "paddleocr": {
           "aistudio_access_token": "Token de acces al Comunității AI Studio",
           "api_url": "URL API",
diff --git a/src/renderer/src/i18n/translate/ru-ru.json b/src/renderer/src/i18n/translate/ru-ru.json
index 63e088a1d6..b2461dda43 100644
--- a/src/renderer/src/i18n/translate/ru-ru.json
+++ b/src/renderer/src/i18n/translate/ru-ru.json
@@ -36,9 +36,9 @@
         "comingSoon": "Скоро",
         "connected": "Подключено",
         "connecting": "Подключение",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Не удалось создать канал",
         "deleteConfirm": "Удалить канал \"{{name}}\"?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Не удалось удалить канал",
         "description": "Подключите вашего агента к платформам обмена сообщениями.",
         "disconnected": "Отключено",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Каналы",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Не удалось обновить канал",
         "wechat": {
           "addAccount": "Добавить аккаунт WeChat",
           "chatIds": "Разрешённые идентификаторы пользователей",
@@ -215,7 +215,7 @@
         "edit": "Редактировать",
         "empty": "Нет запланированных задач. Добавьте одну, чтобы начать.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Не удалось загрузить задачи"
         },
         "intervalPlaceholder": "Интервал в минутах",
         "intervalUnit": "минуты",
@@ -226,7 +226,7 @@
           "error": "Ошибка",
           "justNow": "только что",
           "label": "История запусков",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Не удалось загрузить историю запусков",
           "result": "Результат",
           "runAt": "Запущено в",
           "running": "Бежит...",
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Запуск CLI-инструментов требует установки среды Bun",
     "cli_tool": "Инструмент",
     "cli_tool_placeholder": "Выберите CLI-инструмент для использования",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} элемент",
+    "count_other": "{{count}} предметов",
     "custom_path": "Пользовательский путь",
     "custom_path_error": "Не удалось задать пользовательский путь терминала",
     "custom_path_required": "Этот терминал требует установки пользовательского пути",
@@ -1508,12 +1508,12 @@
     "description": "Быстро запускает несколько CLI-инструментов для кода, повышая эффективность разработки",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Попробуйте изменить поисковые запросы",
+        "title": "Подходящие инструменты не найдены"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Добавьте инструмент CLI или помощник по коду, чтобы начать работу",
+        "title": "Инструментов для кода пока нет"
       }
     },
     "env_vars_help": "Установите переменные окружения для использования при запуске CLI-инструментов. Каждая переменная должна быть на отдельной строке в формате KEY=value",
@@ -1525,28 +1525,28 @@
       "bun_required": "Пожалуйста, установите среду Bun перед запуском CLI-инструментов",
       "error": "Не удалось запустить. Пожалуйста, попробуйте снова",
       "label": "Запуск",
-      "launched": "[to be translated]:Launched",
+      "launched": "Запущено",
       "success": "Запуск успешно завершен",
       "validation_error": "Пожалуйста, заполните все обязательные поля: CLI-инструмент, модель и рабочая директория"
     },
     "launching": "Запуск...",
     "model": "Модель",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Выберите, какую модель ИИ должен использовать инструмент CLI",
     "model_placeholder": "Выберите модель для использования",
     "model_required": "Пожалуйста, выберите модель",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Официальный",
+    "official_tools": "Официальный",
+    "search_placeholder": "Поиск инструментов CLI…",
     "select_folder": "Выберите папку",
     "set_custom_path": "Настройка пользовательского пути терминала",
     "supported_providers": "Поддерживаемые поставщики",
     "terminal": "терминал",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Выберите, в каком терминале запускать интерфейс командной строки",
     "terminal_placeholder": "Выбор приложения терминала",
     "title": "Инструменты кода",
     "update_options": "Параметры обновления",
     "working_directory": "Рабочая директория",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Рабочий каталог, в котором запускается инструмент CLI"
   },
   "code_block": {
     "collapse": "Свернуть",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Закрепить эту модель",
+      "unpin": "Открепить модель"
     },
     "add_parameter": "Добавить параметр",
     "all": "Все",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Недействительная модель",
     "json_parse_error": "Неверный формат JSON",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Многомодельный параллелизм (взаимоисключающий с мульти-ассистентом)"
     },
     "no_matches": "Нет доступных моделей",
     "parameter_name": "Имя параметра",
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Новый агент",
+      "empty_text": "Агентов пока нет",
+      "search_placeholder": "Поиск агентов…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Новый ассистент",
+      "empty_text": "Пока нет ассистентов",
+      "multi_hint": "(взаимоисключающий с многомодельным)",
+      "multi_label": "Многопомощниковый параллелизм",
+      "search_placeholder": "Поиск ассистентов…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Редактировать",
+      "pin": "Пин",
+      "pinned_title": "Закреплено",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Старейший",
+        "desc": "Недавний"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Сортировать",
+      "unpin": "Открепить"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Прозрачный",
+        "configDescription": "Переключите props, чтобы предварительно просмотреть поведение компонента",
+        "configTitle": "Конфиг",
+        "currentProps": "Текущие реквизиты",
+        "description": "AgentSelector теперь считывает реальные данные DataApi из /agents, чтобы проверять выбор id/элемента, закрепление, сортировку и поведение поиска.",
+        "emptyShellNotice": "Этот предварительный просмотр использует реальный список агентов, возвращаемый DataApi /agents.",
+        "lastOnChange": "Последнее onChange",
+        "previewDescription": "Нажмите на триггер, чтобы открыть селектор",
+        "previewTitle": "Предварительный просмотр",
+        "title": "Селектор агентов",
+        "triggerPlaceholder": "Выберите агента",
+        "valueProp": "Текущее значение"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Прозрачный",
+        "configDescription": "Переключайте свойства, чтобы просмотреть поведение компонента",
+        "configTitle": "Конфиг",
+        "currentProps": "Текущие реквизиты",
+        "description": "Монтирует бизнес-компонент AssistantSelector напрямую для проверки поведения множественного/одиночного выбора, идентификатора/элемента, закрепления, сортировки и поиска.",
+        "lastOnChange": "Последнее onChange",
+        "previewDescription": "Нажмите на триггер, чтобы открыть селектор",
+        "previewTitle": "Предварительный просмотр",
+        "title": "Селектор ассистента",
+        "triggerPlaceholder": "Выберите ассистента",
+        "triggerSelectedCount": "{{count}} ассистентов выбрано",
+        "valueProp": "Текущее значение"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Видно только в режиме разработки для тестирования нового селектора моделей прямо в приложении.",
+      "label": "Компонентная лаборатория",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Конфигурация поведения и отображения",
+        "callbackEmpty": "Компонентный обратный вызов еще не получен",
+        "clearSelection": "Очистить выбор",
+        "configDescription": "Переключите ключевые свойства ModelSelector выше и изучите значение поля ввода и полезные нагрузки обратного вызова ниже.",
+        "configTitle": "Площадка реквизита",
+        "controlMultiSelectMode": "Контролируемый multiSelectMode",
+        "currentProps": "Текущие реквизиты",
+        "defaultMultiSelectMode": "режимМножественногоВыбораПоУмолчанию",
+        "description": "Эта страница напрямую монтирует текущий бизнес-компонент ModelSelector, чтобы мы могли проверить поведение выбора, фильтрации, поиска и закрепления.",
+        "empty": "В настоящее время модели недоступны, поэтому селектор пока не может быть отображён.",
+        "lastModeChangeReturn": "Последний onMultiSelectModeChange Return",
+        "lastSelectReturn": "Последний onSelect Return",
+        "loading": "Загрузка моделей...",
+        "modelId": "Идентификатор модели",
+        "multiSelectMode": "множественныйРежимВыбора",
+        "multiple": "множественный",
+        "normalizedIds": "Нормализованные выбранные идентификаторы",
+        "outputEmpty": "Нет данных для отображения",
+        "provider": "Поставщик",
+        "resetOutputs": "Сбросить выходы",
+        "resultsDescription": "Это показывает текущее значение prop, нормализованные выбранные идентификаторы и последний вывод обратного вызова из компонента.",
+        "resultsTitle": "Выходные данные и состояние",
+        "selected": "Текущий выбор",
+        "selectedEmpty": "Модель ещё не выбрана",
+        "selectionConfig": "Конфигурация значения выбора",
+        "selectionType": "типВыбора",
+        "selectionTypeId": "Вернуть идентификаторы моделей",
+        "selectionTypeModel": "Вернуть объекты модели",
+        "showPinnedModels": "показать закреплённые модели",
+        "showTagFilter": "показатьФильтрТегов",
+        "title": "Селектор моделей",
+        "triggerPlaceholder": "Выберите модель",
+        "triggerSelectedCount": "{{count}} моделей выбрано",
+        "valueProp": "Текущее ценностное предложение"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Лаборатория компонентов разработки"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Резервное копирование",
         "title": "Резервное копирование и восстановление данных"
       },
+      "common": {
+        "sections": {
+          "custom_css": "Пользовательский CSS",
+          "display_language": "Отображение и язык",
+          "privacy_advanced": "Конфиденциальность и расширенные",
+          "system_startup": "Система и запуск"
+        },
+        "title": "Общие настройки"
+      },
       "display": {
         "title": "Настройки отображения"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Русский"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Заметки"
+      },
+      "title": "Интеграции"
+    },
     "launch": {
       "onboot": "Автозапуск при включении",
       "title": "Запуск",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Пользователь"
     },
+    "menuGroups": {
+      "appSettings": "Настройки приложения",
+      "integrations": "Модели",
+      "productivity": "Производительность",
+      "services": "Плагины",
+      "system": "Система"
+    },
     "messages": {
       "divider": {
         "label": "Показывать разделитель между сообщениями",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Использовать все ключи"
       },
       "default_assistant_model": "Модель ассистента по умолчанию",
-      "default_assistant_model_description": "Модель, используемая при создании нового ассистента, если ассистент не имеет настроенной модели, будет использоваться эта модель",
+      "default_assistant_model_description": "Используется, если у ассистента нет модели.",
       "empty": "Модели не найдены",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "подробность"
       }
     },
+    "plugins": {
+      "bunDescription": "Среда выполнения JavaScript, используемая службами MCP и связанными с ними инструментальными цепочками.",
+      "description": "Управляйте бинарными инструментами и зависимостями среды выполнения, необходимыми приложению.",
+      "installing": "Установка...",
+      "notInstalled": "Не установлено",
+      "title": "Зависимости окружения",
+      "uvDescription": "Менеджер пакетов Python для сервисов MCP и установки зависимостей."
+    },
     "privacy": {
       "enable_privacy_mode": "Анонимная отчетность об ошибках и статистике",
       "title": "Настройки конфиденциальности"
@@ -5586,12 +5616,22 @@
     "shortcuts": {
       "action": "Действие",
       "actions": "操作",
+      "all_disable": "Отключить все",
+      "all_enable": "Включить все",
       "bind_first_to_enable": "Сначала назначьте сочетание клавиш, чтобы изменить его состояние включения.",
+      "categories": {
+        "assistant": "Инструменты ИИ-ассистента",
+        "chat": "Взаимодействие с сообщениями",
+        "general": "Глобальное и Окно",
+        "title": "Группы ярлыков",
+        "topic": "Разговор и темы"
+      },
       "clear_shortcut": "Очистить сочетание клавиш",
       "clear_topic": "Очистить все сообщения",
       "conflict_with": "Уже используется \"{{name}}\"",
       "copy_last_message": "Копировать последнее сообщение",
       "edit_last_user_message": "Редактировать последнее сообщение пользователя",
+      "empty": "В этой группе нет доступных ярлыков",
       "enabled": "Включить",
       "exit_fullscreen": "Выйти из полноэкранного режима",
       "label": "Клавиша",
@@ -5600,6 +5640,7 @@
       "press_shortcut": "Нажмите сочетание клавиш",
       "quick_assistant": "Быстрый помощник",
       "rename_topic": "Переименовать топик",
+      "reset": "Сброс",
       "reset_defaults": "Сбросить настройки по умолчанию",
       "reset_defaults_confirm": "Вы уверены, что хотите сбросить все горячие клавиши?",
       "reset_defaults_failed": "Не удалось сбросить сочетания клавиш к значениям по умолчанию",
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "Системный OCR поддерживается только в Windows и MacOS"
         },
+        "features": {
+          "paddleocr": "Более подходящий для китайского текста и лучше адаптированный для чеков, сканов и изображений со сложным макетом.",
+          "system": {
+            "macos": "Использует встроенный механизм OCR macOS без необходимости настройки, идеально подходит для скриншотов и лёгкого извлечения текста.",
+            "windows": "Использует встроенный механизм OCR Windows с глубокой интеграцией в ОС для выполнения базовых локальных задач распознавания."
+          },
+          "tesseract": "Классический локальный вариант OCR с настраиваемыми языковыми пакетами, хорошо подходящий для автономной и многоязычной работы."
+        },
         "image": {
           "error": {
             "provider_not_found": "Поставщик не существует"
@@ -5706,6 +5755,13 @@
         "title": "OCR-сервис"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Идеально подходит для преобразования PDF в более чистый Markdown или редактируемый текст для последующего извлечения и редактирования.",
+          "mineru": "Оптимизировано для более точного восстановления макета, особенно полезно для академических PDF-документов, таблиц и формул.",
+          "mistral": "Мощное облачное понимание документов, подходящее для структурированного извлечения, многостраничных файлов и сложных макетов.",
+          "open_mineru": "Открытая опция развертывания, подходящая для команд, предпочитающих самостоятельное размещение или более строгий контроль над конвейером обработки.",
+          "paddleocr": "Более лёгкий вариант интеграции, хорошо подходящий для китайских документов, сканов и обычных чеков."
+        },
         "paddleocr": {
           "aistudio_access_token": "Токен доступа к сообществу AI Studio",
           "api_url": "URL API",
diff --git a/src/renderer/src/i18n/translate/vi-vn.json b/src/renderer/src/i18n/translate/vi-vn.json
index 06029b321f..98b5ea04f2 100644
--- a/src/renderer/src/i18n/translate/vi-vn.json
+++ b/src/renderer/src/i18n/translate/vi-vn.json
@@ -36,9 +36,9 @@
         "comingSoon": "Sắp ra mắt",
         "connected": "Đã kết nối",
         "connecting": "Kết nối",
-        "createError": "[to be translated]:Failed to create channel",
+        "createError": "Không tạo được kênh",
         "deleteConfirm": "Xóa kênh \"{{name}}\"?",
-        "deleteError": "[to be translated]:Failed to delete channel",
+        "deleteError": "Không xóa được kênh",
         "description": "Kết nối tác nhân của bạn với các nền tảng nhắn tin.",
         "disconnected": "Ngắt kết nối",
         "discord": {
@@ -123,7 +123,7 @@
           "title": "Telegram"
         },
         "title": "Kênh",
-        "updateError": "[to be translated]:Failed to update channel",
+        "updateError": "Không thể cập nhật kênh",
         "wechat": {
           "addAccount": "Thêm Tài khoản WeChat",
           "chatIds": "ID Người Dùng Được Phép",
@@ -215,7 +215,7 @@
         "edit": "Chỉnh sửa",
         "empty": "Không có tác vụ nào được lên lịch. Thêm một tác vụ để bắt đầu.",
         "error": {
-          "loadFailed": "[to be translated]:Failed to load tasks"
+          "loadFailed": "Không tải được nhiệm vụ"
         },
         "intervalPlaceholder": "Khoảng thời gian tính bằng phút",
         "intervalUnit": "phút",
@@ -226,7 +226,7 @@
           "error": "Lỗi",
           "justNow": "vừa mới đây",
           "label": "Lịch sử chạy",
-          "loadError": "[to be translated]:Failed to load run history",
+          "loadError": "Không tải được lịch sử chạy",
           "result": "Kết quả",
           "runAt": "Chạy tại",
           "running": "Đang chạy...",
@@ -1487,7 +1487,7 @@
       "unpin": "Bỏ ghim chủ đề"
     },
     "translate": "Dịch",
-    "user": "[to be translated]:User",
+    "user": "Người dùng",
     "web_search": {
       "warning": {
         "openai": "Mô hình GPT-5 với nỗ lực suy luận tối thiểu không hỗ trợ tìm kiếm web."
@@ -1499,8 +1499,8 @@
     "bun_required_message": "Môi trường Bun là bắt buộc để chạy các công cụ CLI",
     "cli_tool": "Công cụ CLI",
     "cli_tool_placeholder": "Chọn công cụ CLI để sử dụng",
-    "count_one": "[to be translated]:{{count}} item",
-    "count_other": "[to be translated]:{{count}} items",
+    "count_one": "{{count}} mục",
+    "count_other": "{{count}} mục",
     "custom_path": "Đường dẫn tùy chỉnh",
     "custom_path_error": "Falha ao definir caminho personalizado do terminal",
     "custom_path_required": "Chemin personnalisé requis pour ce terminal",
@@ -1508,12 +1508,12 @@
     "description": "Khởi chạy nhanh nhiều công cụ CLI mã để nâng cao hiệu suất phát triển",
     "empty": {
       "no_match": {
-        "description": "[to be translated]:Try adjusting your search terms",
-        "title": "[to be translated]:No matching tools found"
+        "description": "Hãy thử điều chỉnh các từ khóa tìm kiếm của bạn",
+        "title": "Không tìm thấy công cụ phù hợp"
       },
       "no_tool": {
-        "description": "[to be translated]:Add a CLI tool or code assistant to get started",
-        "title": "[to be translated]:No code tools yet"
+        "description": "Thêm một công cụ CLI hoặc trợ lý mã để bắt đầu",
+        "title": "Chưa có công cụ lập trình nào"
       }
     },
     "env_vars_help": "Nhập các biến môi trường tùy chỉnh (mỗi dòng một biến, định dạng: KEY=value)",
@@ -1525,28 +1525,28 @@
       "bun_required": "Vui lòng cài đặt môi trường Bun trước khi khởi chạy các công cụ CLI",
       "error": "Lancement échoué, veuillez réessayer",
       "label": "Lanzamiento",
-      "launched": "[to be translated]:Launched",
+      "launched": "Đã ra mắt",
       "success": "Khởi chạy thành công",
       "validation_error": "Vui lòng hoàn thành tất cả các trường bắt buộc: công cụ CLI, mô hình và thư mục làm việc"
     },
     "launching": "Lanzando...",
     "model": "Modelo",
-    "model_hint": "[to be translated]:Choose which AI model the CLI tool should use",
+    "model_hint": "Chọn mô hình AI mà công cụ CLI nên sử dụng",
     "model_placeholder": "Chọn mô hình cần sử dụng",
     "model_required": "Vui lòng chọn một mô hình",
-    "official_tag": "[to be translated]:Official",
-    "official_tools": "[to be translated]:Official",
-    "search_placeholder": "[to be translated]:Search CLI tools…",
+    "official_tag": "Chính thức",
+    "official_tools": "Chính thức",
+    "search_placeholder": "Tìm kiếm công cụ CLI…",
     "select_folder": "Pilih Folder",
     "set_custom_path": "Đặt đường dẫn terminal tùy chỉnh",
     "supported_providers": "Nhà cung cấp được hỗ trợ",
     "terminal": "Thiết bị đầu cuối",
-    "terminal_hint": "[to be translated]:Choose which terminal application to run the CLI in",
+    "terminal_hint": "Chọn ứng dụng terminal để chạy CLI",
     "terminal_placeholder": "Chọn ứng dụng thiết bị đầu cuối",
     "title": "Công cụ mã",
     "update_options": "Tùy chọn Cập nhật",
     "working_directory": "Thư mục làm việc",
-    "working_directory_hint": "[to be translated]:The working directory that the CLI tool launches in"
+    "working_directory_hint": "Thư mục làm việc mà công cụ CLI khởi chạy trong"
   },
   "code_block": {
     "collapse": "Colapso",
@@ -2564,8 +2564,8 @@
   },
   "models": {
     "action": {
-      "pin": "[to be translated]:Pin this model",
-      "unpin": "[to be translated]:Unpin model"
+      "pin": "Ghim mô hình này",
+      "unpin": "Gỡ ghim mô hình"
     },
     "add_parameter": "Thêm tham số",
     "all": "Tất cả",
@@ -2585,7 +2585,7 @@
     "invalid_model": "Mô hình không hợp lệ",
     "json_parse_error": "Định dạng JSON không hợp lệ",
     "multi_select": {
-      "label": "[to be translated]:Multi-model parallel (mutually exclusive with multi-assistant)"
+      "label": "Đa mô hình song song (loại trừ lẫn nhau với đa trợ lý)"
     },
     "no_matches": "Không có mô hình nào khả dụng",
     "parameter_name": "Tên tham số",
@@ -3357,33 +3357,33 @@
   },
   "quickAssistant": {
     "alert": {
-      "google_login": "[to be translated]:Tip: If you see a 'browser not trusted' message when logging into Google, please first login through the Google mini app in the mini app list, then use Google login in other mini apps"
+      "google_login": "Mẹo: Nếu bạn thấy thông báo 'trình duyệt không được tin cậy' khi đăng nhập vào Google, vui lòng đầu tiên đăng nhập qua ứng dụng nhỏ Google trong danh sách ứng dụng nhỏ, sau đó sử dụng đăng nhập Google trong các ứng dụng nhỏ khác"
     },
     "clipboard": {
-      "empty": "[to be translated]:Clipboard is empty"
+      "empty": "Khay nhớp trống"
     },
     "feature": {
-      "chat": "[to be translated]:Answer this question",
-      "explanation": "[to be translated]:Explanation",
-      "summary": "[to be translated]:Content summary",
-      "translate": "[to be translated]:Text translation"
+      "chat": "Trả lời câu hỏi này",
+      "explanation": "Giải thích",
+      "summary": "Tóm tắt nội dung",
+      "translate": "Dịch văn bản"
     },
     "footer": {
-      "backspace_clear": "[to be translated]:Backspace to clear",
-      "copy_last_message": "[to be translated]:Press C to copy",
-      "esc": "[to be translated]:ESC to {{action}}",
-      "esc_back": "[to be translated]:return",
-      "esc_close": "[to be translated]:close",
-      "esc_pause": "[to be translated]:pause"
+      "backspace_clear": "Nhấn Backspace để xóa",
+      "copy_last_message": "Nhấn C để sao chép",
+      "esc": "ESC để {{action}}",
+      "esc_back": "trả về",
+      "esc_close": "đóng",
+      "esc_pause": "tạm dừng"
     },
     "input": {
       "placeholder": {
-        "empty": "[to be translated]:Ask {{model}} for help...",
-        "title": "[to be translated]:What do you want to do with this text?"
+        "empty": "Hỏi {{model}} để được giúp đỡ...",
+        "title": "Bạn muốn làm gì với văn bản này?"
       }
     },
     "tooltip": {
-      "pin": "[to be translated]:Keep Window on Top"
+      "pin": "Giữ cửa sổ ở trên cùng"
     }
   },
   "restore": {
@@ -3828,27 +3828,27 @@
   },
   "selector": {
     "agent": {
-      "create_new": "[to be translated]:New Agent",
-      "empty_text": "[to be translated]:No agents yet",
-      "search_placeholder": "[to be translated]:Search agents…"
+      "create_new": "Tác nhân mới",
+      "empty_text": "Chưa có tác nhân nào",
+      "search_placeholder": "Tìm kiếm đại lý…"
     },
     "assistant": {
-      "create_new": "[to be translated]:New Assistant",
-      "empty_text": "[to be translated]:No assistants yet",
-      "multi_hint": "[to be translated]:(mutually exclusive with multi-model)",
-      "multi_label": "[to be translated]:Multi-assistant parallel",
-      "search_placeholder": "[to be translated]:Search assistants…"
+      "create_new": "Trợ lý mới",
+      "empty_text": "Chưa có trợ lý nào",
+      "multi_hint": "(loại trừ lẫn nhau với đa mô hình)",
+      "multi_label": "Trợ lý song song đa nhiệm",
+      "search_placeholder": "Trợ lý tìm kiếm…"
     },
     "common": {
-      "edit": "[to be translated]:Edit",
-      "pin": "[to be translated]:Pin",
-      "pinned_title": "[to be translated]:Pinned",
+      "edit": "Chỉnh sửa",
+      "pin": "Ghim",
+      "pinned_title": "Đã ghim",
       "sort": {
-        "asc": "[to be translated]:Oldest",
-        "desc": "[to be translated]:Recent"
+        "asc": "Lâu đời nhất",
+        "desc": "Gần đây"
       },
-      "sort_label": "[to be translated]:Sort",
-      "unpin": "[to be translated]:Unpin"
+      "sort_label": "Sắp xếp",
+      "unpin": "Bỏ ghim"
     }
   },
   "settings": {
@@ -3919,72 +3919,72 @@
     },
     "componentLab": {
       "agentSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:AgentSelector now reads real /agents DataApi data to verify id/item selection, pinning, sorting, and search behavior.",
-        "emptyShellNotice": "[to be translated]:This preview uses the real agent list returned by /agents DataApi.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Agent Selector",
-        "triggerPlaceholder": "[to be translated]:Select an agent",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Rõ ràng",
+        "configDescription": "Chuyển đổi props để xem trước hành vi của thành phần",
+        "configTitle": "Cấu hình",
+        "currentProps": "Props hiện tại",
+        "description": "AgentSelector hiện đọc dữ liệu DataApi /agents thực tế để xác minh hành vi chọn id/mục, ghim, sắp xếp và tìm kiếm.",
+        "emptyShellNotice": "Bản xem trước này sử dụng danh sách tác nhân thực được trả về bởi /agents DataApi.",
+        "lastOnChange": "Cập nhật mới nhất về onChange",
+        "previewDescription": "Nhấp vào công tắc để mở bộ chọn",
+        "previewTitle": "Xem trước",
+        "title": "Bộ chọn tác nhân",
+        "triggerPlaceholder": "Chọn một đại lý",
+        "valueProp": "Giá trị hiện tại"
       },
       "assistantSelector": {
-        "clearSelection": "[to be translated]:Clear",
-        "configDescription": "[to be translated]:Toggle props to preview component behavior",
-        "configTitle": "[to be translated]:Config",
-        "currentProps": "[to be translated]:Current props",
-        "description": "[to be translated]:Mounts the AssistantSelector business component directly to verify multi/single, id/item, pin, sort, and search behavior.",
-        "lastOnChange": "[to be translated]:Latest onChange",
-        "previewDescription": "[to be translated]:Click the trigger to open the selector",
-        "previewTitle": "[to be translated]:Preview",
-        "title": "[to be translated]:Assistant Selector",
-        "triggerPlaceholder": "[to be translated]:Select an assistant",
-        "triggerSelectedCount": "[to be translated]:{{count}} assistants selected",
-        "valueProp": "[to be translated]:Current value"
+        "clearSelection": "Rõ ràng",
+        "configDescription": "Chuyển đổi props để xem trước hành vi của component",
+        "configTitle": "Cấu hình",
+        "currentProps": "Props hiện tại",
+        "description": "Gắn trực tiếp thành phần kinh doanh AssistantSelector để xác minh hành vi đa/đơn, id/mục, ghim, sắp xếp và tìm kiếm.",
+        "lastOnChange": "Cập nhật mới nhất về onChange",
+        "previewDescription": "Nhấp vào kích hoạt để mở bộ chọn",
+        "previewTitle": "Xem trước",
+        "title": "Trình chọn Trợ lý",
+        "triggerPlaceholder": "Chọn một trợ lý",
+        "triggerSelectedCount": "{{count}} trợ lý đã được chọn",
+        "valueProp": "Giá trị hiện tại"
       },
-      "description": "[to be translated]:Visible only in development for testing the new model selector directly inside the app.",
-      "label": "[to be translated]:Component Lab",
+      "description": "Chỉ hiển thị trong quá trình phát triển để thử nghiệm trình chọn mô hình mới trực tiếp trong ứng dụng.",
+      "label": "Phòng thí nghiệm linh kiện",
       "modelSelector": {
-        "behaviorConfig": "[to be translated]:Behavior & Display Config",
-        "callbackEmpty": "[to be translated]:No component callback received yet",
-        "clearSelection": "[to be translated]:Clear Selection",
-        "configDescription": "[to be translated]:Toggle the key ModelSelector props above and inspect the input value plus callback payloads below.",
-        "configTitle": "[to be translated]:Props Playground",
-        "controlMultiSelectMode": "[to be translated]:Controlled multiSelectMode",
-        "currentProps": "[to be translated]:Current Props",
-        "defaultMultiSelectMode": "[to be translated]:defaultMultiSelectMode",
-        "description": "[to be translated]:This page mounts the current ModelSelector business component directly so we can verify selection, filtering, search, and pinning behavior.",
-        "empty": "[to be translated]:No models are currently available, so the selector cannot be displayed yet.",
-        "lastModeChangeReturn": "[to be translated]:Latest onMultiSelectModeChange Return",
-        "lastSelectReturn": "[to be translated]:Latest onSelect Return",
-        "loading": "[to be translated]:Loading models...",
-        "modelId": "[to be translated]:Model ID",
-        "multiSelectMode": "[to be translated]:multiSelectMode",
-        "multiple": "[to be translated]:multiple",
-        "normalizedIds": "[to be translated]:Normalized Selected IDs",
-        "outputEmpty": "[to be translated]:No data to display yet",
-        "provider": "[to be translated]:Provider",
-        "resetOutputs": "[to be translated]:Reset Outputs",
-        "resultsDescription": "[to be translated]:This shows the current value prop, the normalized selected ids, and the latest callback output from the component.",
-        "resultsTitle": "[to be translated]:Outputs & State",
-        "selected": "[to be translated]:Current Selection",
-        "selectedEmpty": "[to be translated]:No model selected yet",
-        "selectionConfig": "[to be translated]:Selection Value Config",
-        "selectionType": "[to be translated]:selectionType",
-        "selectionTypeId": "[to be translated]:Return Model IDs",
-        "selectionTypeModel": "[to be translated]:Return Model Objects",
-        "showPinnedModels": "[to be translated]:showPinnedModels",
-        "showTagFilter": "[to be translated]:showTagFilter",
-        "title": "[to be translated]:Model Selector",
-        "triggerPlaceholder": "[to be translated]:Select a model",
-        "triggerSelectedCount": "[to be translated]:{{count}} models selected",
-        "valueProp": "[to be translated]:Current Value Prop"
+        "behaviorConfig": "Cấu hình Hành vi & Hiển thị",
+        "callbackEmpty": "Chưa nhận được bất kỳ callback thành phần nào",
+        "clearSelection": "Xóa lựa chọn",
+        "configDescription": "Chuyển đổi các thuộc tính ModelSelector chính ở trên và kiểm tra giá trị đầu vào cùng với các payload callback bên dưới.",
+        "configTitle": "Sân chơi Đạo cụ",
+        "controlMultiSelectMode": "Chế độ chọn nhiều được kiểm soát",
+        "currentProps": "Props Hiện Tại",
+        "defaultMultiSelectMode": "chế độ chọn nhiều mặc định",
+        "description": "Trang này gắn trực tiếp thành phần kinh doanh ModelSelector hiện tại để chúng ta có thể xác minh hành vi lựa chọn, lọc, tìm kiếm và ghim.",
+        "empty": "Hiện không có mô hình nào khả dụng nên bộ chọn chưa thể hiển thị.",
+        "lastModeChangeReturn": "Cập nhật mới nhất về Return onMultiSelectModeChange",
+        "lastSelectReturn": "Mới nhất vềSelect Return",
+        "loading": "Đang tải mô hình...",
+        "modelId": "ID mô hình",
+        "multiSelectMode": "chế độ chọn nhiều",
+        "multiple": "nhiều",
+        "normalizedIds": "ID Đã Chọn Được Chuẩn Hóa",
+        "outputEmpty": "Chưa có dữ liệu để hiển thị",
+        "provider": "Nhà cung cấp",
+        "resetOutputs": "Đặt lại đầu ra",
+        "resultsDescription": "Điều này hiển thị giá trị đề xuất hiện tại, các id đã chọn được chuẩn hóa và đầu ra gọi lại mới nhất từ thành phần.",
+        "resultsTitle": "Đầu ra & Trạng thái",
+        "selected": "Lựa chọn hiện tại",
+        "selectedEmpty": "Chưa chọn mô hình nào",
+        "selectionConfig": "Cấu hình Giá trị Lựa chọn",
+        "selectionType": "loại lựa chọn",
+        "selectionTypeId": "Trả về ID mô hình",
+        "selectionTypeModel": "Trả về các đối tượng mô hình",
+        "showPinnedModels": "hiển thị các mô hình được ghim",
+        "showTagFilter": "hiển thịBộLọcThẻ",
+        "title": "Bộ chọn mô hình",
+        "triggerPlaceholder": "Chọn một mô hình",
+        "triggerSelectedCount": "{{count}} mô hình đã được chọn",
+        "valueProp": "Giá trị đề xuất hiện tại"
       },
-      "title": "[to be translated]:Development Component Lab"
+      "title": "Phòng thí nghiệm Thành phần Phát triển"
     },
     "data": {
       "app_data": {
@@ -4685,6 +4685,15 @@
         "button": "Sao lưu",
         "title": "Sao lưu và Khôi phục Dữ liệu"
       },
+      "common": {
+        "sections": {
+          "custom_css": "CSS Tùy chỉnh",
+          "display_language": "Hiển thị & Ngôn ngữ",
+          "privacy_advanced": "Quyền riêng tư & Nâng cao",
+          "system_startup": "Hệ thống & Khởi động"
+        },
+        "title": "Cài đặt chung"
+      },
       "display": {
         "title": "Cài đặt hiển thị"
       },
@@ -4746,6 +4755,12 @@
         "russian": "Tiếng Nga"
       }
     },
+    "integrations": {
+      "groups": {
+        "notes": "Ghi chú"
+      },
+      "title": "Tích hợp"
+    },
     "launch": {
       "onboot": "Tự động khởi động khi bật máy",
       "title": "Khởi chạy",
@@ -5015,6 +5030,13 @@
       "url": "URL",
       "user": "Người dùng"
     },
+    "menuGroups": {
+      "appSettings": "Cài đặt ứng dụng",
+      "integrations": "Tích hợp",
+      "productivity": "Năng suất",
+      "services": "Dịch vụ",
+      "system": "Hệ thống"
+    },
     "messages": {
       "divider": {
         "label": "Hiển thị đường phân cách giữa các tin nhắn",
@@ -5166,7 +5188,7 @@
         "use_all_keys": "Clave(s)"
       },
       "default_assistant_model": "Mô hình Trợ lý Mặc định",
-      "default_assistant_model_description": "Mô hình được sử dụng khi tạo trợ lý mới, nếu trợ lý chưa được thiết lập, mô hình này sẽ được sử dụng",
+      "default_assistant_model_description": "Dùng khi trợ lý chưa có mô hình",
       "empty": "Không tìm thấy mô hình nào",
       "manage": {
         "add_listed": {
@@ -5260,6 +5282,14 @@
         "title": "Tính dài dòng"
       }
     },
+    "plugins": {
+      "bunDescription": "Trình thực thi JavaScript được sử dụng bởi các dịch vụ MCP và các công cụ liên quan.",
+      "description": "Quản lý các công cụ nhị phân và phụ thuộc runtime cần thiết cho ứng dụng.",
+      "installing": "Đang cài đặt...",
+      "notInstalled": "Chưa cài đặt",
+      "title": "Phần bổ trợ",
+      "uvDescription": "Trình quản lý gói Python cho các dịch vụ MCP và cài đặt phụ thuộc."
+    },
     "privacy": {
       "enable_privacy_mode": "Báo cáo lỗi và thống kê ẩn danh",
       "title": "Cài đặt quyền riêng tư"
@@ -5586,29 +5616,40 @@
     "shortcuts": {
       "action": "Hành động",
       "actions": "hoạt động",
-      "bind_first_to_enable": "[to be translated]:Bind a shortcut first to change its enabled state",
+      "all_disable": "Tắt Tất Cả",
+      "all_enable": "Kích hoạt Tất cả",
+      "bind_first_to_enable": "Trước tiên hãy gán một phím tắt để thay đổi trạng thái kích hoạt của nó",
+      "categories": {
+        "assistant": "Công cụ Trợ lý AI",
+        "chat": "Tương tác tin nhắn",
+        "general": "Toàn cầu và Cửa sổ",
+        "title": "Nhóm Phím Tắt",
+        "topic": "Cuộc trò chuyện và Chủ đề"
+      },
       "clear_shortcut": "Phím tắt rõ ràng",
       "clear_topic": "Tin nhắn rõ ràng",
-      "conflict_with": "[to be translated]:Already used by \"{{name}}\"",
+      "conflict_with": "Đã được \"{{name}}\" sử dụng",
       "copy_last_message": "Sao tin nhắn cuối cùng",
       "edit_last_user_message": "Chỉnh sửa tin nhắn cuối cùng của người dùng",
+      "empty": "Không có phím tắt nào khả dụng trong nhóm này",
       "enabled": "Kích hoạt",
       "exit_fullscreen": "Thoát toàn màn hình",
       "label": "Khóa",
       "new_topic": "Chủ đề mới",
-      "occupied_by_other_application": "[to be translated]:This shortcut is already used by the system or another application",
+      "occupied_by_other_application": "Phím tắt này đã được hệ thống hoặc một ứng dụng khác sử dụng",
       "press_shortcut": "Nhấn Phím tắt",
-      "quick_assistant": "[to be translated]:Quick Assistant",
+      "quick_assistant": "Trợ lý nhanh",
       "rename_topic": "Đổi tên chủ đề",
+      "reset": "Đặt lại",
       "reset_defaults": "Đặt lại mặc định",
       "reset_defaults_confirm": "Bạn có chắc chắn muốn đặt lại tất cả phím tắt không?",
-      "reset_defaults_failed": "[to be translated]:Failed to reset shortcuts to defaults",
+      "reset_defaults_failed": "Không thể đặt lại phím tắt về mặc định",
       "reset_to_default": "Đặt lại về mặc định",
-      "save_failed": "[to be translated]:Failed to save shortcut",
-      "save_failed_with_name": "[to be translated]:Failed to save shortcut: {{name}}",
+      "save_failed": "Không thể lưu phím tắt",
+      "save_failed_with_name": "Không thể lưu phím tắt: {{name}}",
       "search_message": "Tin nhắn tìm kiếm",
       "search_message_in_chat": "Tìm Tin nhắn trong Cuộc trò chuyện Hiện tại",
-      "search_placeholder": "[to be translated]:Search shortcuts...",
+      "search_placeholder": "Tìm kiếm phím tắt...",
       "select_model": "Chọn Mô hình",
       "selection_assistant_select_text": "Trợ lý Lựa chọn: Chọn Văn bản",
       "selection_assistant_toggle": "Bật Trợ lý Chọn",
@@ -5617,7 +5658,7 @@
       "title": "Phím tắt",
       "toggle_new_context": "Ngữ cảnh rõ ràng",
       "toggle_show_topics": "Chuyển đổi chủ đề",
-      "toggle_sidebar": "[to be translated]:Toggle Sidebar",
+      "toggle_sidebar": "Chuyển đổi thanh bên",
       "zoom_in": "Phóng to",
       "zoom_out": "Thu nhỏ",
       "zoom_reset": "Đặt lại thu phóng"
@@ -5680,6 +5721,14 @@
         "error": {
           "not_system": "Hệ thống OCR chỉ hỗ trợ Windows và MacOS"
         },
+        "features": {
+          "paddleocr": "Mạnh hơn đối với văn bản tiếng Trung và phù hợp hơn cho các hóa đơn, bản quét và hình ảnh có bố cục phức tạp hơn.",
+          "system": {
+            "macos": "Sử dụng công cụ OCR tích hợp sẵn của macOS mà không cần thiết lập, lý tưởng cho việc chụp ảnh màn hình và trích xuất văn bản nhẹ.",
+            "windows": "Sử dụng công cụ OCR gốc của Windows với khả năng tích hợp mạnh mẽ vào hệ điều hành cho các tác vụ nhận dạng cơ bản tại chỗ."
+          },
+          "tesseract": "Một tùy chọn OCR cục bộ cổ điển với các gói ngôn ngữ có thể tùy chỉnh, rất phù hợp cho quy trình làm việc ngoại tuyến và đa ngôn ngữ."
+        },
         "image": {
           "error": {
             "provider_not_found": "Nhà cung cấp không tồn tại"
@@ -5706,6 +5755,13 @@
         "title": "Dịch vụ OCR"
       },
       "preprocess": {
+        "features": {
+          "doc2x": "Rất phù hợp để chuyển đổi PDF thành Markdown sạch hơn hoặc văn bản có thể chỉnh sửa cho việc truy xuất và chỉnh sửa sau đó.",
+          "mineru": "Được tối ưu hóa để khôi phục bố cục với độ chính xác cao hơn, đặc biệt hữu ích cho các tệp PDF học thuật, bảng biểu và công thức.",
+          "mistral": "Khả năng hiểu tài liệu dựa trên đám mây mạnh mẽ, phù hợp cho việc trích xuất có cấu trúc, tệp nhiều trang và bố cục phức tạp.",
+          "open_mineru": "Một tùy chọn triển khai mở phù hợp với các nhóm muốn tự lưu trữ hoặc kiểm soát chặt chẽ hơn đối với quy trình xử lý.",
+          "paddleocr": "Một lựa chọn tích hợp nhẹ phù hợp với tài liệu tiếng Trung, bản quét và nội dung dạng hóa đơn thông thường."
+        },
         "paddleocr": {
           "aistudio_access_token": "Mã truy cập của Cộng đồng AI Studio",
           "api_url": "URL API",
@@ -5873,11 +5929,11 @@
     }
   },
   "tab": {
-    "close": "[to be translated]:Close Tab",
-    "moveToFirst": "[to be translated]:Move to First",
-    "new": "[to be translated]:New Tab",
-    "pin": "[to be translated]:Pin Tab",
-    "unpin": "[to be translated]:Unpin Tab"
+    "close": "Đóng Tab",
+    "moveToFirst": "Di chuyển lên đầu",
+    "new": "Thẻ Mới",
+    "pin": "Ghim Tab",
+    "unpin": "Gỡ ghim thẻ"
   },
   "title": {
     "apps": "Ứng dụng",
@@ -6044,7 +6100,7 @@
   },
   "tray": {
     "quit": "Thôi",
-    "show_quick_assistant": "[to be translated]:Quick Assistant",
+    "show_quick_assistant": "Trợ lý Nhanh",
     "show_window": "Hiển thị cửa sổ"
   },
   "update": {
diff --git a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx b/src/renderer/src/pages/agents/AgentSettings/AgentSettingsPopup.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
rename to src/renderer/src/pages/agents/AgentSettings/AgentSettingsPopup.tsx
diff --git a/src/renderer/src/pages/settings/AgentSettings/BaseSettingsPopup.tsx b/src/renderer/src/pages/agents/AgentSettings/BaseSettingsPopup.tsx
similarity index 68%
rename from src/renderer/src/pages/settings/AgentSettings/BaseSettingsPopup.tsx
rename to src/renderer/src/pages/agents/AgentSettings/BaseSettingsPopup.tsx
index b6d839a4de..32712933b1 100644
--- a/src/renderer/src/pages/settings/AgentSettings/BaseSettingsPopup.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/BaseSettingsPopup.tsx
@@ -1,11 +1,10 @@
-import { Center } from '@cherrystudio/ui'
-import type { MenuProps } from 'antd'
-import { Alert, Spin } from 'antd'
+import { Center, MenuItem, MenuList, Spinner } from '@cherrystudio/ui'
+import { Alert, Modal } from 'antd'
 import type { ReactNode } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { LeftMenu, Settings, settingsModalStyles, StyledMenu, StyledModal } from './shared'
+import { LeftMenu, Settings, settingsModalStyles } from './shared'
 
 export type SettingsPopupTab =
   | 'essential'
@@ -17,8 +16,10 @@ export type SettingsPopupTab =
   | 'plugins'
   | 'installed'
 
-export type SettingsMenuItem = NonNullable<MenuProps['items']>[number] & {
+export type SettingsMenuItem = {
   key: SettingsPopupTab
+  label: string
+  icon?: ReactNode
 }
 
 interface BaseSettingsPopupProps {
@@ -56,7 +57,7 @@ export const BaseSettingsPopup: React.FC<BaseSettingsPopupProps> = ({
     if (isLoading) {
       return (
         <Center className="flex-1">
-          <Spin />
+          <Spinner text={t('common.loading')} />
         </Center>
       )
     }
@@ -72,13 +73,18 @@ export const BaseSettingsPopup: React.FC<BaseSettingsPopupProps> = ({
     return (
       <div className="flex w-full flex-1">
         <LeftMenu>
-          <StyledMenu
-            defaultSelectedKeys={[initialTab]}
-            mode="vertical"
-            selectedKeys={[menu]}
-            items={menuItems}
-            onSelect={({ key }) => setMenu(key as SettingsPopupTab)}
-          />
+          <MenuList className="w-[220px] p-1.25 pt-1.75">
+            {menuItems.map((item) => (
+              <MenuItem
+                key={item.key}
+                label={item.label}
+                icon={item.icon}
+                active={menu === item.key}
+                className="mb-1.75 font-medium last:mb-0"
+                onClick={() => setMenu(item.key)}
+              />
+            ))}
+          </MenuList>
         </LeftMenu>
         <Settings>{renderTabContent(menu)}</Settings>
       </div>
@@ -86,7 +92,7 @@ export const BaseSettingsPopup: React.FC<BaseSettingsPopupProps> = ({
   }
 
   return (
-    <StyledModal
+    <Modal
       open={open}
       onOk={handleClose}
       onCancel={handleClose}
@@ -96,9 +102,10 @@ export const BaseSettingsPopup: React.FC<BaseSettingsPopupProps> = ({
       title={titleContent}
       transitionName="animation-move-down"
       styles={settingsModalStyles}
+      rootClassName="[&_.ant-modal-title]:text-sm [&_.ant-modal-close]:top-1 [&_.ant-modal-close]:right-1"
       width="min(900px, 70vw)"
       centered>
       {renderContent()}
-    </StyledModal>
+    </Modal>
   )
 }
diff --git a/src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx b/src/renderer/src/pages/agents/AgentSettings/SessionSettingsPopup.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/AgentSettings/SessionSettingsPopup.tsx
rename to src/renderer/src/pages/agents/AgentSettings/SessionSettingsPopup.tsx
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/AccessibleDirsSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/AccessibleDirsSetting.tsx
similarity index 88%
rename from src/renderer/src/pages/settings/AgentSettings/components/AccessibleDirsSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/AccessibleDirsSetting.tsx
index 2ee9f52ecc..a8e6da9b88 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/AccessibleDirsSetting.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/AccessibleDirsSetting.tsx
@@ -1,6 +1,6 @@
+import { Button, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import type { AgentBaseWithId, UpdateAgentBaseForm, UpdateAgentFunctionUnion } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
 import { Plus } from 'lucide-react'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -62,7 +62,9 @@ export const AccessibleDirsSetting = ({ base, update }: AccessibleDirsSettingPro
       <SettingsTitle
         contentAfter={
           <Tooltip title={t('agent.session.accessible_paths.add')}>
-            <Button type="text" icon={<Plus size={16} />} shape="circle" onClick={addAccessiblePath} />
+            <Button variant="ghost" size="icon-sm" className="rounded-full" onClick={addAccessiblePath}>
+              <Plus size={16} />
+            </Button>
           </Tooltip>
         }>
         {t('agent.session.accessible_paths.label')}
@@ -71,7 +73,7 @@ export const AccessibleDirsSetting = ({ base, update }: AccessibleDirsSettingPro
         {base.accessiblePaths.map((path) => (
           <li key={path} className="flex items-center justify-between gap-2 py-1">
             <span
-              className="w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[var(--color-text-2)] text-sm"
+              className="w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-[var(--color-foreground-secondary)] text-sm"
               title={path}>
               {path}
             </span>
@@ -80,9 +82,8 @@ export const AccessibleDirsSetting = ({ base, update }: AccessibleDirsSettingPro
                 base.accessiblePaths.length <= 1 ? t('agent.session.accessible_paths.error.at_least_one') : undefined
               }>
               <Button
-                size="small"
-                type="text"
-                danger
+                size="sm"
+                variant="destructive"
                 disabled={base.accessiblePaths.length <= 1}
                 onClick={() => removeAccessiblePath(path)}>
                 {t('common.delete')}
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/AdvancedSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/AdvancedSettings.tsx
similarity index 98%
rename from src/renderer/src/pages/settings/AgentSettings/components/AdvancedSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/AdvancedSettings.tsx
index 4611467ecd..23426393a3 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/AdvancedSettings.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/AdvancedSettings.tsx
@@ -1,7 +1,8 @@
+import { Tooltip } from '@cherrystudio/ui'
 import type { UpdateAgentBaseForm } from '@renderer/types'
 import { AgentConfigurationSchema } from '@renderer/types'
 import { parseKeyValueString, serializeKeyValueString } from '@renderer/utils/env'
-import { Input, InputNumber, Tooltip } from 'antd'
+import { Input, InputNumber } from 'antd'
 import { Info } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/DescriptionSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/DescriptionSetting.tsx
similarity index 94%
rename from src/renderer/src/pages/settings/AgentSettings/components/DescriptionSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/DescriptionSetting.tsx
index 3b7a5a9962..68245b5590 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/DescriptionSetting.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/DescriptionSetting.tsx
@@ -1,5 +1,5 @@
+import { Textarea } from '@cherrystudio/ui'
 import type { AgentBaseWithId, UpdateAgentBaseForm, UpdateAgentFunctionUnion } from '@renderer/types'
-import TextArea from 'antd/es/input/TextArea'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -26,7 +26,7 @@ export const DescriptionSetting = ({ base, update }: DescriptionSettingProps) =>
   return (
     <SettingsItem divider={false}>
       <SettingsTitle>{t('common.description')}</SettingsTitle>
-      <TextArea
+      <Textarea.Input
         value={description}
         onChange={(e) => setDescription(e.target.value)}
         rows={4}
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/EssentialSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/EssentialSettings.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/AgentSettings/components/EssentialSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/EssentialSettings.tsx
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/HeartbeatSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/HeartbeatSetting.tsx
similarity index 93%
rename from src/renderer/src/pages/settings/AgentSettings/components/HeartbeatSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/HeartbeatSetting.tsx
index 19ef4ba494..fe1e7ac27a 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/HeartbeatSetting.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/HeartbeatSetting.tsx
@@ -1,11 +1,11 @@
-import { Switch } from '@cherrystudio/ui'
+import { EditableNumber, Switch } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import type {
   AgentBaseWithId,
   AgentConfiguration,
   UpdateAgentBaseForm,
   UpdateAgentFunctionUnion
 } from '@renderer/types'
-import { InputNumber, Tooltip } from 'antd'
 import { Info } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -64,13 +64,13 @@ export const HeartbeatSetting = ({ base: agentBase, update }: HeartbeatSettingPr
             }>
             {t('agent.cherryClaw.heartbeat.interval')}
           </SettingsTitle>
-          <InputNumber
+          <EditableNumber
             size="small"
             min={1}
             max={1440}
             value={interval}
             onChange={(val) => val && updateConfig({ heartbeat_interval: val })}
-            style={{ width: 100 }}
+            className="w-[100px]"
             suffix="min"
           />
         </SettingsItem>
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/ModelSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/ModelSetting.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/AgentSettings/components/ModelSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/ModelSetting.tsx
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/NameSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/NameSetting.tsx
similarity index 96%
rename from src/renderer/src/pages/settings/AgentSettings/components/NameSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/NameSetting.tsx
index fc833e63e2..027b677d73 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/NameSetting.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/NameSetting.tsx
@@ -1,7 +1,7 @@
+import { Input } from '@cherrystudio/ui'
 import { EmojiAvatarWithPicker } from '@renderer/components/Avatar/EmojiAvatarWithPicker'
 import type { AgentBaseWithId, UpdateAgentBaseForm, UpdateAgentFunctionUnion } from '@renderer/types'
 import { AgentConfigurationSchema, isAgentEntity, isAgentType } from '@renderer/types'
-import { Input } from 'antd'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -62,7 +62,7 @@ export const NameSetting = ({ base, update }: NameSettingsProps) => {
       <SettingsItem inline>
         <SettingsTitle>{t('common.name')}</SettingsTitle>
         <div className="relative flex flex-1 justify-end">
-          <span className="invisible whitespace-pre px-[11px] py-1">
+          <span className="invisible whitespace-pre px-2.75 py-1">
             {name || t('common.agent_one') + t('common.name')}
           </span>
           <Input
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/PermissionModeSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/PermissionModeSettings.tsx
similarity index 97%
rename from src/renderer/src/pages/settings/AgentSettings/components/PermissionModeSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/PermissionModeSettings.tsx
index 604c5b1ec6..fd4910fe74 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/PermissionModeSettings.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/PermissionModeSettings.tsx
@@ -132,7 +132,7 @@ export const PermissionModeSettings: FC<AgentOrSessionSettingsProps> = ({ agentB
                     <span className="whitespace-normal break-words text-left font-semibold text-sm">
                       {t(card.titleKey, card.titleFallback)}
                     </span>
-                    <span className="whitespace-normal break-words text-left text-[var(--color-text-2)] text-xs">
+                    <span className="whitespace-normal break-words text-left text-[var(--color-foreground-secondary)] text-xs">
                       {t(card.descriptionKey, card.descriptionFallback)}
                     </span>
                   </div>
@@ -144,8 +144,8 @@ export const PermissionModeSettings: FC<AgentOrSessionSettingsProps> = ({ agentB
                 {showCaution && (
                   <div className="flex flex-col gap-2">
                     <div className="flex items-start gap-2 rounded-md bg-[var(--color-error-bg)]">
-                      <ShieldAlert className="flex-shrink-0 text-[var(--color-error)]" size={16} />
-                      <span className="text-[var(--color-error)] text-xs">
+                      <ShieldAlert className="flex-shrink-0 text-[var(--color-error-base)]" size={16} />
+                      <span className="text-[var(--color-error-base)] text-xs">
                         {t(
                           'agent.settings.tooling.permissionMode.bypassPermissions.warning',
                           'Use with caution — all tools will run without asking for approval.'
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/PromptSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/PromptSettings.tsx
similarity index 76%
rename from src/renderer/src/pages/settings/AgentSettings/components/PromptSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/PromptSettings.tsx
index 0270f40c7d..d35d61cc29 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/PromptSettings.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/PromptSettings.tsx
@@ -9,7 +9,6 @@ import { Edit, HelpCircle, Save } from 'lucide-react'
 import { type FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
-import styled from 'styled-components'
 
 import { type AgentOrSessionSettingsProps, SettingsContainer, SettingsItem, SettingsTitle } from '../shared'
 
@@ -49,20 +48,21 @@ const PromptSettings: FC<AgentOrSessionSettingsProps> = ({ agentBase, update })
         <SettingsTitle>
           {t('common.prompt')}
           <Popover title={t('assistants.presets.add.prompt.variables.tip.title')} content={promptVarsContent}>
-            <HelpCircle size={14} color="var(--color-text-2)" />
+            <HelpCircle size={14} color="var(--color-foreground-secondary)" />
           </Popover>
         </SettingsTitle>
-        <TextAreaContainer>
-          <RichEditorContainer>
+        <div className="relative mt-1.25 min-h-0 w-full flex-1 overflow-hidden">
+          <div className="h-full flex-1 overflow-hidden rounded-[5px] border-[0.5px] border-border">
             {showPreview ? (
-              <MarkdownContainer
+              <div
+                className="markdown h-full overflow-auto p-[0.5em]"
                 onDoubleClick={() => {
                   const currentScrollTop = editorRef.current?.getScrollTop?.() || 0
                   setShowPreview(false)
                   requestAnimationFrame(() => editorRef.current?.setScrollTop?.(currentScrollTop))
                 }}>
                 <ReactMarkdown>{processedPrompt || instructions}</ReactMarkdown>
-              </MarkdownContainer>
+              </div>
             ) : (
               <CodeEditor
                 value={instructions}
@@ -73,10 +73,12 @@ const PromptSettings: FC<AgentOrSessionSettingsProps> = ({ agentBase, update })
                 className="h-full"
               />
             )}
-          </RichEditorContainer>
-        </TextAreaContainer>
+          </div>
+        </div>
         <SpaceBetweenRowFlex className="mt-2.5 w-full justify-end">
-          <TokenCount>Tokens: {tokenCount}</TokenCount>
+          <div className="select-none rounded px-0.5 py-0.5 text-foreground-secondary text-sm">
+            Tokens: {tokenCount}
+          </div>
           <Button
             variant="default"
             onClick={() => {
@@ -101,51 +103,4 @@ const PromptSettings: FC<AgentOrSessionSettingsProps> = ({ agentBase, update })
   )
 }
 
-const TextAreaContainer = styled.div`
-  position: relative;
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  margin-top: 5px;
-`
-
-const TokenCount = styled.div`
-  padding: 2px 2px;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--color-text-2);
-  user-select: none;
-`
-
-const RichEditorContainer = styled.div`
-  height: 100%;
-  flex: 1;
-  border: 0.5px solid var(--color-border);
-  border-radius: 5px;
-  overflow: hidden;
-
-  .prompt-rich-editor {
-    border: none;
-    height: 100%;
-
-    .rich-editor-wrapper {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .rich-editor-content {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-`
-
-const MarkdownContainer = styled.div.attrs({ className: 'markdown' })`
-  height: 100%;
-  padding: 0.5em;
-  overflow: auto;
-`
-
 export default PromptSettings
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/SkillsSettings/SkillsSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/SkillsSettings/SkillsSettings.tsx
similarity index 90%
rename from src/renderer/src/pages/settings/AgentSettings/components/SkillsSettings/SkillsSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/SkillsSettings/SkillsSettings.tsx
index 20caf76b79..3fed83dd40 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/SkillsSettings/SkillsSettings.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/SkillsSettings/SkillsSettings.tsx
@@ -1,11 +1,11 @@
-import { Switch } from '@cherrystudio/ui'
+import { Button, EmptyState, Spinner, Switch } from '@cherrystudio/ui'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { TopView } from '@renderer/components/TopView'
 import { useInstalledSkills } from '@renderer/hooks/useSkills'
 import { useNavigate } from '@tanstack/react-router'
 import type { InstalledSkill, LocalSkill } from '@types'
 import type { CardProps } from 'antd'
-import { Button, Card, Empty, Spin, Tag } from 'antd'
+import { Card, Tag } from 'antd'
 import { Plus, Puzzle } from 'lucide-react'
 import { type FC, memo, useCallback, useEffect, useEffectEvent, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -27,8 +27,6 @@ const cardStyles: CardProps['styles'] = {
 }
 
 const searchBarStyle = { borderRadius: 20 }
-const emptyIconStyle = { opacity: 0.3 }
-
 // rerender-memo: Extract card into memo component so toggling one skill
 // doesn't re-render every other skill card in the list.
 const SkillCard = memo<{
@@ -165,12 +163,12 @@ export const InstalledSkillsSettings: FC<AgentOrSessionSettingsProps> = ({ agent
                 style={searchBarStyle}
               />
               <Button
-                icon={<Plus size={18} />}
-                style={{ marginLeft: 'auto' }}
+                className="ml-auto"
                 onClick={() => {
                   TopView.hide('AgentSettingsPopup')
                   void navigate({ to: '/settings/skills' })
                 }}>
+                <Plus size={18} />
                 {t('agent.settings.skills.addMore', 'Add More Skills')}
               </Button>
             </>
@@ -184,19 +182,19 @@ export const InstalledSkillsSettings: FC<AgentOrSessionSettingsProps> = ({ agent
             </div>
           ) : loading ? (
             <div className="flex flex-1 items-center justify-center py-10">
-              <Spin />
+              <Spinner text={t('common.loading')} />
             </div>
           ) : hasNoResults ? (
-            <div className="flex flex-1 items-center justify-center py-10">
-              <Empty
-                image={<Puzzle size={40} strokeWidth={1} style={emptyIconStyle} />}
-                description={
-                  filter
-                    ? t('agent.settings.skills.noFilterResults', 'No matching skills')
-                    : t('agent.settings.skills.noSkills', 'No skills installed. Install skills from Settings > Skills.')
-                }
-              />
-            </div>
+            <EmptyState
+              compact
+              icon={Puzzle}
+              description={
+                filter
+                  ? t('agent.settings.skills.noFilterResults', 'No matching skills')
+                  : t('agent.settings.skills.noSkills', 'No skills installed. Install skills from Settings > Skills.')
+              }
+              className="py-10"
+            />
           ) : (
             <>
               {filteredSkills.map((skill) => (
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/SoulModeSetting.tsx b/src/renderer/src/pages/agents/AgentSettings/components/SoulModeSetting.tsx
similarity index 97%
rename from src/renderer/src/pages/settings/AgentSettings/components/SoulModeSetting.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/SoulModeSetting.tsx
index badcbead97..d185557abe 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/SoulModeSetting.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/SoulModeSetting.tsx
@@ -1,11 +1,11 @@
 import { Switch } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import type {
   AgentBaseWithId,
   AgentConfiguration,
   UpdateAgentBaseForm,
   UpdateAgentFunctionUnion
 } from '@renderer/types'
-import { Tooltip } from 'antd'
 import { Info } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/TaskListItem.tsx b/src/renderer/src/pages/agents/AgentSettings/components/TaskListItem.tsx
similarity index 95%
rename from src/renderer/src/pages/settings/AgentSettings/components/TaskListItem.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/TaskListItem.tsx
index 7daef1144d..a3518b58c5 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/TaskListItem.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/TaskListItem.tsx
@@ -1,5 +1,6 @@
+import { Tooltip } from '@cherrystudio/ui'
 import type { ScheduledTaskEntity } from '@renderer/types'
-import { Popconfirm, Tag, Tooltip } from 'antd'
+import { Popconfirm, Tag } from 'antd'
 import { Clock, Edit2, History, Pause, Play, Trash2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,7 +35,7 @@ const IconButton: FC<{
   <Tooltip title={tooltip}>
     <button
       type="button"
-      className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-[var(--color-fill-secondary)] ${danger ? 'text-red-500 hover:text-red-600' : 'text-foreground-400 hover:text-foreground'}`}
+      className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-[var(--color-muted)] ${danger ? 'text-red-500 hover:text-red-600' : 'text-foreground-400 hover:text-foreground'}`}
       onClick={onClick}>
       {icon}
     </button>
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/TaskLogsModal.tsx b/src/renderer/src/pages/agents/AgentSettings/components/TaskLogsModal.tsx
similarity index 94%
rename from src/renderer/src/pages/settings/AgentSettings/components/TaskLogsModal.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/TaskLogsModal.tsx
index dad77c9dc9..c5d509fdd5 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/TaskLogsModal.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/TaskLogsModal.tsx
@@ -1,5 +1,6 @@
+import { Spinner } from '@cherrystudio/ui'
 import { useTaskLogs } from '@renderer/hooks/agents/useTasks'
-import { Modal, Spin, Table, Tag } from 'antd'
+import { Modal, Table, Tag } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -63,7 +64,7 @@ const TaskLogsModal: FC<TaskLogsModalProps> = ({ open, agentId, taskId, taskName
       destroyOnClose>
       {isLoading ? (
         <div className="flex justify-center py-8">
-          <Spin />
+          <Spinner text={t('common.loading')} />
         </div>
       ) : error ? (
         <div className="py-8 text-center text-red-400">{t('agent.cherryClaw.tasks.logs.loadError')}</div>
diff --git a/src/renderer/src/pages/settings/AgentSettings/components/ToolsSettings.tsx b/src/renderer/src/pages/agents/AgentSettings/components/ToolsSettings.tsx
similarity index 98%
rename from src/renderer/src/pages/settings/AgentSettings/components/ToolsSettings.tsx
rename to src/renderer/src/pages/agents/AgentSettings/components/ToolsSettings.tsx
index 20ba9eba7a..1c49ab55df 100644
--- a/src/renderer/src/pages/settings/AgentSettings/components/ToolsSettings.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/components/ToolsSettings.tsx
@@ -1,11 +1,12 @@
 import { Switch } from '@cherrystudio/ui'
+import { Tooltip } from '@cherrystudio/ui'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { permissionModeCards } from '@renderer/config/agent'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { UpdateAgentBaseForm } from '@renderer/types'
 import { GLOBALLY_DISALLOWED_TOOLS, SOUL_MODE_DISALLOWED_TOOLS } from '@shared/agents/claudecode/constants'
 import type { CardProps } from 'antd'
-import { Card, Tag, Tooltip } from 'antd'
+import { Card, Tag } from 'antd'
 import { uniq } from 'lodash'
 import { Wrench } from 'lucide-react'
 import type { FC } from 'react'
@@ -214,7 +215,7 @@ export const ToolsSettings: FC<AgentOrSessionSettingsProps> = ({ agentBase, upda
                               })
                             : undefined
                         }
-                        open={isAuto ? undefined : false}>
+                        isOpen={isAuto ? undefined : false}>
                         <Switch
                           aria-label={t('agent.settings.tooling.preapproved.toggle', {
                             defaultValue: `Toggle ${tool.name}`,
@@ -278,7 +279,7 @@ export const ToolsSettings: FC<AgentOrSessionSettingsProps> = ({ agentBase, upda
                         </div>
                         <Tooltip
                           title={!server.isActive ? t('agent.settings.tooling.mcp.inactiveTooltip') : undefined}
-                          open={!server.isActive ? undefined : false}>
+                          isOpen={!server.isActive ? undefined : false}>
                           <Switch
                             aria-label={t('agent.settings.tooling.mcp.toggle', {
                               defaultValue: `Toggle ${server.name}`,
diff --git a/src/renderer/src/pages/settings/AgentSettings/index.tsx b/src/renderer/src/pages/agents/AgentSettings/index.tsx
similarity index 100%
rename from src/renderer/src/pages/settings/AgentSettings/index.tsx
rename to src/renderer/src/pages/agents/AgentSettings/index.tsx
diff --git a/src/renderer/src/pages/settings/AgentSettings/shared.tsx b/src/renderer/src/pages/agents/AgentSettings/shared.tsx
similarity index 77%
rename from src/renderer/src/pages/settings/AgentSettings/shared.tsx
rename to src/renderer/src/pages/agents/AgentSettings/shared.tsx
index c01f3b80f2..eb5563df26 100644
--- a/src/renderer/src/pages/settings/AgentSettings/shared.tsx
+++ b/src/renderer/src/pages/agents/AgentSettings/shared.tsx
@@ -1,6 +1,7 @@
 import EmojiIcon from '@renderer/components/EmojiIcon'
 import type { ScrollbarProps } from '@renderer/components/Scrollbar'
 import Scrollbar from '@renderer/components/Scrollbar'
+import { SettingDivider } from '@renderer/pages/settings'
 import type {
   AgentConfiguration,
   AgentEntity,
@@ -14,11 +15,7 @@ import type {
 } from '@renderer/types'
 import { cn } from '@renderer/utils'
 import type { ModalProps } from 'antd'
-import { Menu, Modal } from 'antd'
 import React, { type ReactNode } from 'react'
-import styled from 'styled-components'
-
-import { SettingDivider } from '..'
 
 // Shared types and constants for agent settings
 export type AgentConfigurationState = AgentConfiguration & Record<string, unknown>
@@ -109,7 +106,7 @@ export const AgentLabel = ({ agent, classNames, hideIcon }: AgentLabelProps) =>
   return (
     <div className={cn('flex w-full items-center gap-2 truncate', classNames?.container)}>
       {!hideIcon && <EmojiIcon emoji={emoji} className={classNames?.avatar} size={24} />}
-      <span className={cn('truncate', 'text-(--color-text)', classNames?.name)}>{agent?.name ?? ''}</span>
+      <span className={cn('truncate', 'text-(--color-foreground)', classNames?.name)}>{agent?.name ?? ''}</span>
     </div>
   )
 }
@@ -123,7 +120,7 @@ export const SessionLabel = ({ session, className }: SessionLabelProps) => {
   const displayName = session?.name ?? session?.id
   return (
     <>
-      <span className={cn('truncate text-(--color-text) text-sm', className)}>{displayName}</span>
+      <span className={cn('truncate text-(--color-foreground) text-sm', className)}>{displayName}</span>
     </>
   )
 }
@@ -166,61 +163,13 @@ export const SettingsContainer: React.FC<React.ComponentPropsWithRef<'div'> & Sc
   )
 }
 
-export const LeftMenu = styled.div`
-  height: 100%;
-  border-right: 0.5px solid var(--color-border);
-`
+export const LeftMenu = ({ className, ...props }: React.ComponentPropsWithRef<'div'>) => (
+  <div className={cn('h-full border-border border-r-[0.5px]', className)} {...props} />
+)
 
-export const Settings = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-`
-
-export const StyledModal = styled(Modal)`
-  .ant-modal-title {
-    font-size: 14px;
-  }
-  .ant-modal-close {
-    top: 4px;
-    right: 4px;
-  }
-  .ant-menu-item {
-    height: 36px;
-    color: var(--color-text-2);
-    display: flex;
-    align-items: center;
-    border: 0.5px solid transparent;
-    border-radius: 6px;
-    .ant-menu-title-content {
-      line-height: 36px;
-    }
-  }
-  .ant-menu-item-active {
-    background-color: var(--color-background-soft) !important;
-    transition: none;
-  }
-  .ant-menu-item-selected {
-    background-color: var(--color-background-soft);
-    border: 0.5px solid var(--color-border);
-    .ant-menu-title-content {
-      color: var(--color-text-1);
-      font-weight: 500;
-    }
-  }
-`
-
-export const StyledMenu = styled(Menu)`
-  width: 220px;
-  padding: 5px;
-  background: transparent;
-  margin-top: 2px;
-  .ant-menu-item {
-    margin-bottom: 7px;
-  }
-`
+export const Settings = ({ className, ...props }: React.ComponentPropsWithRef<'div'>) => (
+  <div className={cn('flex min-h-0 flex-1 flex-col overflow-hidden', className)} {...props} />
+)
 
 /**
  * Shared modal styles configuration for settings popups
diff --git a/src/renderer/src/pages/agents/components/AgentChatNavbar/AgentContent.tsx b/src/renderer/src/pages/agents/components/AgentChatNavbar/AgentContent.tsx
index bfeaf1f791..90af3f02c0 100644
--- a/src/renderer/src/pages/agents/components/AgentChatNavbar/AgentContent.tsx
+++ b/src/renderer/src/pages/agents/components/AgentChatNavbar/AgentContent.tsx
@@ -4,8 +4,8 @@ import { useActiveSession } from '@renderer/hooks/agents/useActiveSession'
 import { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
 import { useNavbarPosition } from '@renderer/hooks/useNavbar'
 import { useShowAssistants } from '@renderer/hooks/useStore'
-import { AgentSettingsPopup, SessionSettingsPopup } from '@renderer/pages/settings/AgentSettings'
-import { AgentLabel, SessionLabel } from '@renderer/pages/settings/AgentSettings/shared'
+import { AgentSettingsPopup, SessionSettingsPopup } from '@renderer/pages/agents/AgentSettings'
+import { AgentLabel, SessionLabel } from '@renderer/pages/agents/AgentSettings/shared'
 import type { AgentEntity, ApiModel } from '@renderer/types'
 import { Tooltip } from 'antd'
 import { t } from 'i18next'
diff --git a/src/renderer/src/pages/agents/components/AgentItem.tsx b/src/renderer/src/pages/agents/components/AgentItem.tsx
index c84f960088..d394f65db6 100644
--- a/src/renderer/src/pages/agents/components/AgentItem.tsx
+++ b/src/renderer/src/pages/agents/components/AgentItem.tsx
@@ -1,8 +1,8 @@
 import { usePreference } from '@data/hooks/usePreference'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import MarqueeText from '@renderer/components/MarqueeText'
-import AgentSettingsPopup from '@renderer/pages/settings/AgentSettings/AgentSettingsPopup'
-import { AgentLabel } from '@renderer/pages/settings/AgentSettings/shared'
+import AgentSettingsPopup from '@renderer/pages/agents/AgentSettings/AgentSettingsPopup'
+import { AgentLabel } from '@renderer/pages/agents/AgentSettings/shared'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { AgentEntity } from '@renderer/types'
 import { cn } from '@renderer/utils'
diff --git a/src/renderer/src/pages/agents/components/AgentSessionInputbar.tsx b/src/renderer/src/pages/agents/components/AgentSessionInputbar.tsx
index b88a6c22a3..acdd03e8b9 100644
--- a/src/renderer/src/pages/agents/components/AgentSessionInputbar.tsx
+++ b/src/renderer/src/pages/agents/components/AgentSessionInputbar.tsx
@@ -13,6 +13,7 @@ import { selectNewTopicLoading } from '@renderer/hooks/useMessageOperations'
 import { getModel } from '@renderer/hooks/useModel'
 import { useTextareaResize } from '@renderer/hooks/useTextareaResize'
 import { useTimer } from '@renderer/hooks/useTimer'
+import { isSoulModeEnabled } from '@renderer/pages/agents/AgentSettings/shared'
 import { InputbarCore } from '@renderer/pages/home/Inputbar/components/InputbarCore'
 import {
   InputbarToolsProvider,
@@ -24,7 +25,6 @@ import InputbarTools from '@renderer/pages/home/Inputbar/InputbarTools'
 import { getInputbarConfig } from '@renderer/pages/home/Inputbar/registry'
 import type { ToolContext } from '@renderer/pages/home/Inputbar/types'
 import { TopicType } from '@renderer/pages/home/Inputbar/types'
-import { isSoulModeEnabled } from '@renderer/pages/settings/AgentSettings/shared'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import { pauseTrace } from '@renderer/services/SpanManagerService'
 import { estimateUserPromptUsage } from '@renderer/services/TokenService'
diff --git a/src/renderer/src/pages/agents/components/SessionItem.tsx b/src/renderer/src/pages/agents/components/SessionItem.tsx
index 8dd12f704c..0245c4324c 100644
--- a/src/renderer/src/pages/agents/components/SessionItem.tsx
+++ b/src/renderer/src/pages/agents/components/SessionItem.tsx
@@ -8,8 +8,8 @@ import { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
 import { useInPlaceEdit } from '@renderer/hooks/useInPlaceEdit'
 import { useTimer } from '@renderer/hooks/useTimer'
 import { finishTopicRenaming, startTopicRenaming } from '@renderer/hooks/useTopic'
-import { SessionSettingsPopup } from '@renderer/pages/settings/AgentSettings'
-import { SessionLabel } from '@renderer/pages/settings/AgentSettings/shared'
+import { SessionSettingsPopup } from '@renderer/pages/agents/AgentSettings'
+import { SessionLabel } from '@renderer/pages/agents/AgentSettings/shared'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { newMessagesActions } from '@renderer/store/newMessage'
 import { loadTopicMessagesThunk, renameAgentSessionIfNeeded } from '@renderer/store/thunk/messageThunk'
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx b/src/renderer/src/pages/home/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
similarity index 84%
rename from src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
rename to src/renderer/src/pages/home/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
index b302e43a8b..2105cfca6d 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
+++ b/src/renderer/src/pages/home/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
@@ -7,7 +7,6 @@ import type { SelectProps } from 'antd'
 import { Row, Segmented, Select } from 'antd'
 import { CircleHelp } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   assistant: Assistant
@@ -31,7 +30,7 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
   }
 
   return (
-    <Container>
+    <div className="flex flex-1 flex-col overflow-hidden p-1.25">
       <Box className="mb-2 font-bold">{t('common.knowledge_base')}</Box>
       <Select
         mode="multiple"
@@ -48,7 +47,7 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
         }
       />
       <Row align="middle" style={{ marginTop: 10 }}>
-        <Label>{t('assistants.settings.knowledge_base.recognition.label')}</Label>
+        <p className="mr-1.25 font-medium">{t('assistants.settings.knowledge_base.recognition.label')}</p>
       </Row>
       <Row align="middle" style={{ marginTop: 10 }}>
         <Segmented
@@ -60,7 +59,7 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
                 <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                   {t('assistants.settings.knowledge_base.recognition.on')}
                   <Tooltip content={t('assistants.settings.knowledge_base.recognition.tip')}>
-                    <QuestionIcon size={15} />
+                    <CircleHelp className="cursor-pointer text-foreground-muted" size={15} />
                   </Tooltip>
                 </div>
               ),
@@ -75,24 +74,7 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
           }
         />
       </Row>
-    </Container>
+    </div>
   )
 }
-
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-  padding: 5px;
-`
-const Label = styled.p`
-  margin-right: 5px;
-  font-weight: 500;
-`
-
-const QuestionIcon = styled(CircleHelp)`
-  cursor: pointer;
-  color: var(--color-text-3);
-`
 export default AssistantKnowledgeBaseSettings
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx b/src/renderer/src/pages/home/AssistantSettings/AssistantMCPSettings.tsx
similarity index 58%
rename from src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
rename to src/renderer/src/pages/home/AssistantSettings/AssistantMCPSettings.tsx
index 1b83a4b323..33e2a14b22 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
+++ b/src/renderer/src/pages/home/AssistantSettings/AssistantMCPSettings.tsx
@@ -1,11 +1,12 @@
-import { Box, InfoTooltip, Switch, Tooltip } from '@cherrystudio/ui'
+import { Box, EmptyState, InfoTooltip, Switch, Tooltip } from '@cherrystudio/ui'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { Assistant, McpMode } from '@renderer/types'
 import { getEffectiveMcpMode } from '@renderer/types'
+import { cn } from '@renderer/utils'
 import type { MCPServer } from '@shared/data/types/mcpServer'
-import { Empty, Radio } from 'antd'
+import { Radio } from 'antd'
+import type React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   assistant: Assistant
@@ -115,9 +116,10 @@ const AssistantMCPSettings: React.FC<Props> = ({ assistant, updateAssistant }) =
             </ServerList>
           ) : (
             <EmptyContainer>
-              <Empty
+              <EmptyState
+                compact
+                preset="no-resource"
                 description={t('assistants.settings.mcp.noServersAvailable', 'No MCP servers available')}
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
               />
             </EmptyContainer>
           )}
@@ -127,121 +129,77 @@ const AssistantMCPSettings: React.FC<Props> = ({ assistant, updateAssistant }) =
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex min-h-0 flex-1 flex-col', className)} {...props} />
+)
 
-const HeaderContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-`
+const HeaderContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-4 flex items-center justify-between', className)} {...props} />
+)
 
-const ModeSelector = styled.div`
-  margin-bottom: 16px;
+const ModeSelector = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'mb-4 [&_.ant-radio-button-wrapper:not(:first-child)::before]:hidden [&_.ant-radio-button-wrapper]:h-auto [&_.ant-radio-button-wrapper]:rounded-lg [&_.ant-radio-button-wrapper]:border [&_.ant-radio-button-wrapper]:border-border [&_.ant-radio-button-wrapper]:px-4 [&_.ant-radio-button-wrapper]:py-3 [&_.ant-radio-group]:flex [&_.ant-radio-group]:flex-col [&_.ant-radio-group]:gap-2',
+      className
+    )}
+    {...props}
+  />
+)
 
-  .ant-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+const ModeOption = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col gap-0.5', className)} {...props} />
+)
 
-  .ant-radio-button-wrapper {
-    height: auto;
-    padding: 12px 16px;
-    border-radius: 8px;
-    border: 1px solid var(--color-border);
+const ModeLabel = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('font-semibold', className)} {...props} />
+)
 
-    &:not(:first-child)::before {
-      display: none;
-    }
+const ModeDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('text-foreground-secondary text-xs', className)} {...props} />
+)
 
-    &:first-child {
-      border-radius: 8px;
-    }
+const EnabledCount = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('mb-2 text-foreground-secondary text-xs', className)} {...props} />
+)
 
-    &:last-child {
-      border-radius: 8px;
-    }
-  }
-`
+const EmptyContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-1 items-center justify-center py-10', className)} {...props} />
+)
 
-const ModeOption = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`
+const ServerList = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col gap-2 overflow-y-auto', className)} {...props} />
+)
 
-const ModeLabel = styled.span`
-  font-weight: 600;
-`
+const ServerItem = ({
+  className,
+  isEnabled,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { isEnabled: boolean }) => (
+  <div
+    className={cn(
+      'flex items-center justify-between rounded-lg border border-border bg-card px-4 py-3 transition-all',
+      isEnabled ? 'opacity-100' : 'opacity-70',
+      className
+    )}
+    {...props}
+  />
+)
 
-const ModeDescription = styled.span`
-  font-size: 12px;
-  color: var(--color-text-2);
-`
+const ServerInfo = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-1 flex-col overflow-hidden', className)} {...props} />
+)
 
-const EnabledCount = styled.span`
-  font-size: 12px;
-  color: var(--color-text-2);
-  margin-bottom: 8px;
-`
+const ServerName = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-1 font-semibold', className)} {...props} />
+)
 
-const EmptyContainer = styled.div`
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  padding: 40px 0;
-`
+const ServerDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-0.75 text-[0.85rem] text-foreground-secondary', className)} {...props} />
+)
 
-const ServerList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-`
-
-const ServerItem = styled.div<{ isEnabled: boolean }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-  border-radius: 8px;
-  background-color: var(--color-background-mute);
-  border: 1px solid var(--color-border);
-  transition: all 0.2s ease;
-  opacity: ${(props) => (props.isEnabled ? 1 : 0.7)};
-`
-
-const ServerInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-`
-
-const ServerName = styled.div`
-  font-weight: 600;
-  margin-bottom: 4px;
-`
-
-const ServerDescription = styled.div`
-  font-size: 0.85rem;
-  color: var(--color-text-2);
-  margin-bottom: 3px;
-`
-
-const ServerUrl = styled.div`
-  font-size: 0.8rem;
-  color: var(--color-text-3);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
+const ServerUrl = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('truncate text-[0.8rem] text-foreground-muted', className)} {...props} />
+)
 
 export default AssistantMCPSettings
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx b/src/renderer/src/pages/home/AssistantSettings/AssistantModelSettings.tsx
similarity index 93%
rename from src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
rename to src/renderer/src/pages/home/AssistantSettings/AssistantModelSettings.tsx
index f31962e2aa..55c67c341a 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
+++ b/src/renderer/src/pages/home/AssistantSettings/AssistantModelSettings.tsx
@@ -1,4 +1,4 @@
-import { Button, HelpTooltip, RowFlex, Switch } from '@cherrystudio/ui'
+import { Button, Divider, HelpTooltip, RowFlex, Switch } from '@cherrystudio/ui'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import CodeEditor from '@renderer/components/CodeEditor'
 import EditableNumber from '@renderer/components/EditableNumber'
@@ -17,14 +17,14 @@ import { useTimer } from '@renderer/hooks/useTimer'
 import { SettingRow } from '@renderer/pages/settings'
 import { DEFAULT_ASSISTANT_SETTINGS } from '@renderer/services/AssistantService'
 import type { Assistant, AssistantSettingCustomParameters, AssistantSettings, Model } from '@renderer/types'
-import { modalConfirm } from '@renderer/utils'
-import { Col, Divider, Input, InputNumber, Row, Select, Slider } from 'antd'
+import { cn, modalConfirm } from '@renderer/utils'
+import { Col, Input, InputNumber, Row, Select, Slider } from 'antd'
 import { isNull } from 'lodash'
 import { PlusIcon } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   assistant: Assistant
@@ -181,11 +181,11 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
               style={{
                 borderRadius: 6,
                 overflow: 'hidden',
-                border: `1px solid ${hasJsonError ? 'var(--color-error)' : 'var(--color-border)'}`
+                border: `1px solid ${hasJsonError ? 'var(--color-error-base)' : 'var(--color-border)'}`
               }}
             />
             {hasJsonError && (
-              <div style={{ color: 'var(--color-error)', fontSize: 12, marginTop: 4 }}>
+              <div style={{ color: 'var(--color-error-base)', fontSize: 12, marginTop: 4 }}>
                 {t('models.json_parse_error')}
               </div>
             )}
@@ -253,7 +253,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
     <Container>
       <RowFlex className="mb-2.5 items-center justify-between">
         <Label>{t('assistants.settings.default_model')}</Label>
-        <RowFlex className="items-center gap-[5px]">
+        <RowFlex className="items-center gap-1.25">
           <ModelSelectButton onClick={onSelectModel}>
             {defaultModel ? <ModelAvatar model={defaultModel} size={20} /> : <PlusIcon size={18} />}
             <ModelName>{defaultModel ? defaultModel.name : t('assistants.presets.edit.model.select.title')}</ModelName>
@@ -278,7 +278,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
             {t('chat.settings.temperature.label')}
             <HelpTooltip
               content={t('chat.settings.temperature.tip')}
-              iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
+              iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
             />
           </Label>
         </RowFlex>
@@ -327,7 +327,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           <Label>{t('chat.settings.top_p.label')}</Label>
           <HelpTooltip
             content={t('chat.settings.top_p.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
+            iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
           />
         </RowFlex>
         <Switch
@@ -376,7 +376,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
             {t('chat.settings.context_count.label')}{' '}
             <HelpTooltip
               content={t('chat.settings.context_count.tip')}
-              iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
+              iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
             />
           </Label>
         </Col>
@@ -426,7 +426,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           <Label>{t('chat.settings.max_tokens.label')}</Label>
           <HelpTooltip
             content={t('chat.settings.max_tokens.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
+            iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
           />
         </RowFlex>
         <Switch
@@ -498,7 +498,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           <Label>{t('assistants.settings.max_tool_calls.label')}</Label>
           <HelpTooltip
             content={t('assistants.settings.max_tool_calls.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
+            iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
           />
         </RowFlex>
         <Switch
@@ -577,41 +577,24 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  padding: 5px;
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-1 flex-col p-1.25', className)} {...props} />
+)
 
-const Label = styled.p`
-  margin-right: 5px;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex-shrink: 0;
-`
+const Label = ({ className, ...props }: React.ComponentPropsWithoutRef<'p'>) => (
+  <p className={cn('mr-1.25 flex shrink-0 items-center gap-1.25 font-medium', className)} {...props} />
+)
 
-const ModelSelectButton = styled(Button)`
-  max-width: 300px;
-  justify-content: flex-start;
+const ModelSelectButton = ({ className, ...props }: React.ComponentProps<typeof Button>) => (
+  <Button className={cn('max-w-[300px] justify-start [&_.ant-btn-icon]:shrink-0', className)} {...props} />
+)
 
-  .ant-btn-icon {
-    flex-shrink: 0;
-  }
-`
+const ModelName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('inline-block max-w-full truncate', className)} {...props} />
+)
 
-const ModelName = styled.span`
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-`
-
-const ContextSliderWrapper = styled.div`
-  padding-bottom: 5px;
-`
+const ContextSliderWrapper = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('pb-1.25', className)} {...props} />
+)
 
 export default AssistantModelSettings
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx b/src/renderer/src/pages/home/AssistantSettings/AssistantPromptSettings.tsx
similarity index 79%
rename from src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
rename to src/renderer/src/pages/home/AssistantSettings/AssistantPromptSettings.tsx
index df92c4b406..de33a62041 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
+++ b/src/renderer/src/pages/home/AssistantSettings/AssistantPromptSettings.tsx
@@ -17,6 +17,7 @@ import EmojiPicker from '@renderer/components/EmojiPicker'
 import type { RichEditorRef } from '@renderer/components/RichEditor/types'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
 import { usePromptProcessor } from '@renderer/hooks/usePromptProcessor'
+import { SettingDivider } from '@renderer/pages/settings'
 import { estimateTextTokens } from '@renderer/services/TokenService'
 import type { Assistant, AssistantSettings } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
@@ -25,9 +26,6 @@ import { Edit, HelpCircle, Save } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactMarkdown from 'react-markdown'
-import styled from 'styled-components'
-
-import { SettingDivider } from '..'
 
 interface Props {
   assistant: Assistant
@@ -77,10 +75,10 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
   const promptVarsContent = <pre>{t('assistants.presets.add.prompt.variables.tip.content')}</pre>
 
   return (
-    <Container>
+    <div className="flex flex-1 flex-col overflow-hidden">
       <Box className="mb-2 font-bold">{t('common.name')}</Box>
       <RowFlex className="items-center gap-2">
-        <EmojiDeleteButtonWrapper>
+        <div className="group/emoji relative inline-block">
           <Popover>
             <PopoverTrigger>
               <Button className="h-7 min-w-7 p-1 text-lg">{emoji}</Button>
@@ -91,7 +89,7 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
           </Popover>
           {emoji && (
             <CloseCircleFilled
-              className="delete-icon z-50"
+              className="group-hover/emoji:block! absolute top-[-8px] right-[-8px] z-50 hidden cursor-pointer text-[#ff4d4f] text-base"
               onClick={(e) => {
                 e.stopPropagation()
                 handleEmojiDelete()
@@ -107,7 +105,7 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
               }}
             />
           )}
-        </EmojiDeleteButtonWrapper>
+        </div>
         <Input
           placeholder={t('common.assistant') + t('common.name')}
           value={name}
@@ -127,20 +125,21 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
             </>
           }
           showArrow>
-          <HelpCircle size={14} color="var(--color-text-2)" />
+          <HelpCircle size={14} color="var(--color-foreground-secondary)" />
         </Tooltip>
       </RowFlex>
-      <TextAreaContainer>
-        <RichEditorContainer>
+      <div className="relative w-full">
+        <div className="h-[calc(80vh-202px)] overflow-hidden rounded-[5px] border-[0.5px] border-border">
           {showPreview ? (
-            <MarkdownContainer
+            <div
+              className="markdown h-full overflow-auto p-[0.5em]"
               onDoubleClick={() => {
                 const currentScrollTop = editorRef.current?.getScrollTop?.() || 0
                 setShowPreview(false)
                 requestAnimationFrame(() => editorRef.current?.setScrollTop?.(currentScrollTop))
               }}>
               <ReactMarkdown>{processedPrompt || prompt}</ReactMarkdown>
-            </MarkdownContainer>
+            </div>
           ) : (
             <CodeEditor
               theme={activeCmTheme}
@@ -155,10 +154,10 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
               }}
             />
           )}
-        </RichEditorContainer>
-      </TextAreaContainer>
+        </div>
+      </div>
       <SpaceBetweenRowFlex className="mt-2.5 w-full justify-end">
-        <TokenCount>Tokens: {tokenCount}</TokenCount>
+        <div className="select-none rounded px-0.5 py-0.5 text-foreground-secondary text-sm">Tokens: {tokenCount}</div>
         <Button
           variant="default"
           onClick={() => {
@@ -178,66 +177,8 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
           {showPreview ? t('common.edit') : t('common.save')}
         </Button>
       </SpaceBetweenRowFlex>
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  overflow: hidden;
-`
-
-const EmojiDeleteButtonWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-
-  &:hover .delete-icon {
-    display: block !important;
-  }
-`
-
-const TextAreaContainer = styled.div`
-  position: relative;
-  width: 100%;
-`
-
-const TokenCount = styled.div`
-  padding: 2px 2px;
-  border-radius: 4px;
-  font-size: 14px;
-  color: var(--color-text-2);
-  user-select: none;
-`
-
-const RichEditorContainer = styled.div`
-  height: calc(80vh - 202px);
-  border: 0.5px solid var(--color-border);
-  border-radius: 5px;
-  overflow: hidden;
-
-  .prompt-rich-editor {
-    border: none;
-    height: 100%;
-
-    .rich-editor-wrapper {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .rich-editor-content {
-      flex: 1;
-      overflow: auto;
-    }
-  }
-`
-
-const MarkdownContainer = styled.div.attrs({ className: 'markdown' })`
-  height: 100%;
-  padding: 0.5em;
-  overflow: auto;
-`
-
 export default AssistantPromptSettings
diff --git a/src/renderer/src/pages/settings/AssistantSettings/index.tsx b/src/renderer/src/pages/home/AssistantSettings/index.tsx
similarity index 73%
rename from src/renderer/src/pages/settings/AssistantSettings/index.tsx
rename to src/renderer/src/pages/home/AssistantSettings/index.tsx
index 40f4334846..994776ea37 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/index.tsx
+++ b/src/renderer/src/pages/home/AssistantSettings/index.tsx
@@ -1,13 +1,12 @@
-import { RowFlex } from '@cherrystudio/ui'
+import { MenuItem, MenuList, RowFlex } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useAssistantPreset } from '@renderer/hooks/useAssistantPresets'
 import { useSidebarIconShow } from '@renderer/hooks/useSidebarIcon'
 import type { Assistant } from '@renderer/types'
-import { Menu, Modal } from 'antd'
+import { Modal } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import AssistantKnowledgeBaseSettings from './AssistantKnowledgeBaseSettings'
 import AssistantMCPSettings from './AssistantMCPSettings'
@@ -74,7 +73,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
   ].filter(Boolean) as { key: string; label: string }[]
 
   return (
-    <StyledModal
+    <Modal
       open={open}
       onOk={onOk}
       onCancel={onCancel}
@@ -93,19 +92,25 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
           padding: 0
         }
       }}
+      rootClassName="[&_.ant-modal-title]:text-sm [&_.ant-modal-close]:top-1 [&_.ant-modal-close]:right-1"
       width="min(900px, 70vw)"
       height="80vh"
       centered>
       <RowFlex>
-        <LeftMenu>
-          <StyledMenu
-            defaultSelectedKeys={[tab || 'model']}
-            mode="vertical"
-            items={items}
-            onSelect={({ key }) => setMenu(key as AssistantSettingPopupTab)}
-          />
-        </LeftMenu>
-        <Settings>
+        <div className="h-[calc(80vh-20px)] border-border border-r-[0.5px]">
+          <MenuList className="mt-0.5 w-[220px] p-1.25">
+            {items.map((item) => (
+              <MenuItem
+                key={item.key}
+                label={item.label}
+                active={menu === item.key}
+                className="mb-1.75 font-medium last:mb-0"
+                onClick={() => setMenu(item.key as AssistantSettingPopupTab)}
+              />
+            ))}
+          </MenuList>
+        </div>
+        <div className="h-[calc(80vh-16px)] flex-1 overflow-y-scroll p-4">
           {menu === 'model' && (
             <AssistantModelSettings
               assistant={assistant}
@@ -128,67 +133,12 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
             />
           )}
           {menu === 'mcp' && <AssistantMCPSettings assistant={assistant} updateAssistant={updateAssistant} />}
-        </Settings>
+        </div>
       </RowFlex>
-    </StyledModal>
+    </Modal>
   )
 }
 
-const LeftMenu = styled.div`
-  height: calc(80vh - 20px);
-  border-right: 0.5px solid var(--color-border);
-`
-
-const Settings = styled.div`
-  flex: 1;
-  padding: 16px 16px;
-  height: calc(80vh - 16px);
-  overflow-y: scroll;
-`
-
-const StyledModal = styled(Modal)`
-  .ant-modal-title {
-    font-size: 14px;
-  }
-  .ant-modal-close {
-    top: 4px;
-    right: 4px;
-  }
-  .ant-menu-item {
-    height: 36px;
-    color: var(--color-text-2);
-    display: flex;
-    align-items: center;
-    border: 0.5px solid transparent;
-    border-radius: 6px;
-    .ant-menu-title-content {
-      line-height: 36px;
-    }
-  }
-  .ant-menu-item-active {
-    background-color: var(--color-background-soft) !important;
-    transition: none;
-  }
-  .ant-menu-item-selected {
-    background-color: var(--color-background-soft);
-    border: 0.5px solid var(--color-border);
-    .ant-menu-title-content {
-      color: var(--color-text-1);
-      font-weight: 500;
-    }
-  }
-`
-
-const StyledMenu = styled(Menu)`
-  width: 220px;
-  padding: 5px;
-  background: transparent;
-  margin-top: 2px;
-  .ant-menu-item {
-    margin-bottom: 7px;
-  }
-`
-
 export default class AssistantSettingsPopup {
   static show(props: AssistantSettingPopupShowParams) {
     return new Promise<Assistant>((resolve) => {
diff --git a/src/renderer/src/pages/home/Inputbar/tools/permissionModeTool.tsx b/src/renderer/src/pages/home/Inputbar/tools/permissionModeTool.tsx
index 318b571d02..4cd3908506 100644
--- a/src/renderer/src/pages/home/Inputbar/tools/permissionModeTool.tsx
+++ b/src/renderer/src/pages/home/Inputbar/tools/permissionModeTool.tsx
@@ -4,7 +4,7 @@ import { useActiveSession } from '@renderer/hooks/agents/useActiveSession'
 import { useAgent } from '@renderer/hooks/agents/useAgent'
 import { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
 import { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
-import { computeModeDefaults, defaultConfiguration } from '@renderer/pages/settings/AgentSettings/shared'
+import { computeModeDefaults, defaultConfiguration } from '@renderer/pages/agents/AgentSettings/shared'
 import type { PermissionMode } from '@renderer/types'
 import { Tooltip } from 'antd'
 import { uniq } from 'lodash'
diff --git a/src/renderer/src/pages/home/Messages/PermissionModeDisplay.tsx b/src/renderer/src/pages/home/Messages/PermissionModeDisplay.tsx
index a285dfe034..dcac832037 100644
--- a/src/renderer/src/pages/home/Messages/PermissionModeDisplay.tsx
+++ b/src/renderer/src/pages/home/Messages/PermissionModeDisplay.tsx
@@ -1,5 +1,5 @@
 import { permissionModeCards } from '@renderer/config/agent'
-import SessionSettingsPopup from '@renderer/pages/settings/AgentSettings/SessionSettingsPopup'
+import SessionSettingsPopup from '@renderer/pages/agents/AgentSettings/SessionSettingsPopup'
 import type { GetAgentSessionResponse, PermissionMode } from '@renderer/types'
 import { FileEdit, Lightbulb, Shield, ShieldOff } from 'lucide-react'
 import type { FC } from 'react'
diff --git a/src/renderer/src/pages/home/Messages/Prompt.tsx b/src/renderer/src/pages/home/Messages/Prompt.tsx
index 0f48d03c20..f4ac086a09 100644
--- a/src/renderer/src/pages/home/Messages/Prompt.tsx
+++ b/src/renderer/src/pages/home/Messages/Prompt.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { usePromptProcessor } from '@renderer/hooks/usePromptProcessor'
-import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
+import AssistantSettingsPopup from '@renderer/pages/home/AssistantSettings'
 import type { Assistant, Topic } from '@renderer/types'
 import { containsSupportedVariables } from '@renderer/utils/prompt'
 import type { FC } from 'react'
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NavigateTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NavigateTool.tsx
index 22bbdd4afb..3d6467ac13 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NavigateTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageAgentTools/NavigateTool.tsx
@@ -24,8 +24,7 @@ const ROUTE_LABELS: Record<string, { icon: string; label: string }> = {
   // Settings pages
   '/settings/provider': { icon: '🔑', label: 'Provider' },
   '/settings/model': { icon: '🤖', label: 'Models' },
-  '/settings/general': { icon: '⚙️', label: 'General' },
-  '/settings/display': { icon: '🖥️', label: 'Display' },
+  '/settings/general': { icon: '⚙️', label: 'Common Settings' },
   '/settings/data': { icon: '💾', label: 'Data' },
   '/settings/mcp': { icon: '🔌', label: 'MCP' },
   '/settings/websearch': { icon: '🔍', label: 'Web Search' },
diff --git a/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
index a4c32a6676..30b9e5bd2c 100644
--- a/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/AssistantItem.tsx
@@ -4,7 +4,7 @@ import { CopyIcon, DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
 import { useAssistant, useAssistants } from '@renderer/hooks/useAssistant'
 import { useTags } from '@renderer/hooks/useTags'
-import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
+import AssistantSettingsPopup from '@renderer/pages/home/AssistantSettings'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { Assistant } from '@renderer/types'
 import { cn, uuid } from '@renderer/utils'
diff --git a/src/renderer/src/pages/home/components/ChatNavBar/ChatNavbarContent/TopicContent.tsx b/src/renderer/src/pages/home/components/ChatNavBar/ChatNavbarContent/TopicContent.tsx
index a8223d846a..892e278a70 100644
--- a/src/renderer/src/pages/home/components/ChatNavBar/ChatNavbarContent/TopicContent.tsx
+++ b/src/renderer/src/pages/home/components/ChatNavBar/ChatNavbarContent/TopicContent.tsx
@@ -1,6 +1,6 @@
 import EmojiIcon from '@renderer/components/EmojiIcon'
 import HorizontalScrollContainer from '@renderer/components/HorizontalScrollContainer'
-import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
+import AssistantSettingsPopup from '@renderer/pages/home/AssistantSettings'
 import type { Assistant } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
 import { ChevronRight } from 'lucide-react'
diff --git a/src/renderer/src/pages/home/components/ChatNavBar/index.tsx b/src/renderer/src/pages/home/components/ChatNavBar/index.tsx
index 081b168910..7e25f1b0a7 100644
--- a/src/renderer/src/pages/home/components/ChatNavBar/index.tsx
+++ b/src/renderer/src/pages/home/components/ChatNavBar/index.tsx
@@ -44,7 +44,7 @@ const HeaderNavbar: FC<Props> = ({ activeAssistant, setActiveAssistant, activeTo
 
   return (
     <NavbarHeader className="home-navbar" style={{ height: 'var(--navbar-height)' }}>
-      <div className="flex h-full min-w-0 flex-1 shrink items-center overflow-auto">
+      <div className="flex h-full min-w-0 flex-1 shrink items-center overflow-x-auto overflow-y-hidden">
         {isTopNavbar && showAssistants && (
           <Tooltip placement="bottom" content={t('navbar.hide_sidebar')} delay={800}>
             <NavbarIcon onClick={toggleShowAssistants}>
diff --git a/src/renderer/src/pages/home/components/SelectModelButton.tsx b/src/renderer/src/pages/home/components/SelectModelButton.tsx
index b92ebe204c..5f86e4fa81 100644
--- a/src/renderer/src/pages/home/components/SelectModelButton.tsx
+++ b/src/renderer/src/pages/home/components/SelectModelButton.tsx
@@ -12,7 +12,6 @@ import { ChevronsUpDown } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   assistant: Assistant
@@ -58,29 +57,17 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
       size="sm"
       variant="ghost"
       onClick={onSelectModel}
-      className="mt-0.5 rounded-2xl border border-transparent border-solid bg-transparent px-1 py-3 text-xs shadow-none">
-      <ButtonContent>
-        <ModelAvatar model={model} size={20} />
-        <ModelName>
+      className="h-7 max-w-[min(360px,45vw)] rounded-md border border-transparent border-solid bg-transparent px-2 py-0 text-xs shadow-none">
+      <div className="flex min-w-0 items-center gap-1.5">
+        <ModelAvatar model={model} size={18} />
+        <span className="min-w-0 truncate font-medium text-xs leading-none">
           {model ? model.name : t('button.select_model')} {providerName ? ' | ' + providerName : ''}
-        </ModelName>
-      </ButtonContent>
-      <ChevronsUpDown size={14} color="var(--color-icon)" />
+        </span>
+      </div>
+      <ChevronsUpDown size={13} className="text-muted-foreground" />
       {!provider && <Tag color="error">{t('models.invalid_model')}</Tag>}
     </Button>
   )
 }
 
-const ButtonContent = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-`
-
-const ModelName = styled.span`
-  font-weight: 500;
-  margin-right: -2px;
-  font-size: 12px;
-`
-
 export default SelectModelButton
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index 20a5a0928a..b579b7070b 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -1,4 +1,4 @@
-import { Badge, Button, CircularProgress, Divider, RadioGroup, RadioGroupItem, Switch, Tooltip } from '@cherrystudio/ui'
+import { Badge, Button, CircularProgress, Divider, SegmentedControl, Switch, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import LogoAvatar from '@renderer/components/Icons/LogoAvatar'
 import IndicatorLight from '@renderer/components/IndicatorLight'
@@ -17,6 +17,8 @@ import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Markdown from 'react-markdown'
 
+import { SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '.'
+
 const AboutSettings: FC = () => {
   const [autoCheckUpdate, setAutoCheckUpdate] = usePreference('app.dist.auto_update.enabled')
   const [testPlan, setTestPlan] = usePreference('app.dist.test_plan.enabled')
@@ -163,26 +165,22 @@ const AboutSettings: FC = () => {
   const testChannels = getAvailableTestChannels()
 
   return (
-    <div
-      className={cn(
-        'flex flex-1 flex-col overflow-y-auto px-4.5 py-3.75 [&::-webkit-scrollbar]:hidden',
-        theme === ThemeMode.dark ? 'bg-transparent' : 'bg-(--color-background-soft)'
-      )}>
-      <AboutGroup theme={theme}>
-        <div className="flex select-none items-center justify-between gap-3 font-bold text-sm">
-          <div>{t('settings.about.title')}</div>
+    <div className={cn('flex w-full flex-1 flex-col overflow-y-auto px-5 py-4 [&::-webkit-scrollbar]:hidden')}>
+      <SettingGroup theme={theme}>
+        <SettingTitle className="gap-2">
+          <span className="font-semibold text-[15px]">{t('settings.about.title')}</span>
           <button
             type="button"
             onClick={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio')}
-            className="inline-flex items-center justify-center rounded-md p-1 text-(--color-text) transition-colors hover:bg-(--color-background-mute)">
+            className="inline-flex items-center justify-center rounded-md p-1 text-(--color-foreground) transition-colors hover:bg-(--color-muted)">
             <Github className="size-5" />
           </button>
-        </div>
+        </SettingTitle>
 
-        <Divider className="my-2" />
+        <Divider className="my-1.5" />
 
-        <div className="flex flex-wrap items-center justify-between gap-4 py-1.25">
-          <div className="flex min-w-0 flex-1 items-center gap-4">
+        <div className="flex flex-wrap items-center justify-between gap-3 py-1">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
             <button
               type="button"
               onClick={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio')}
@@ -191,7 +189,7 @@ const AboutSettings: FC = () => {
                 <div className="-top-0.5 -left-0.5 pointer-events-none absolute">
                   <CircularProgress
                     value={appUpdateState.downloadProgress}
-                    size={84}
+                    size={76}
                     strokeWidth={4}
                     shape="square"
                     className="stroke-transparent"
@@ -199,17 +197,17 @@ const AboutSettings: FC = () => {
                   />
                 </div>
               )}
-              <LogoAvatar logo={AppLogo} size={80} className="rounded-2xl" />
+              <LogoAvatar logo={AppLogo} size={72} className="rounded-full" />
             </button>
 
-            <div className="flex min-h-20 flex-col items-start justify-center">
-              <div className="mb-1.25 font-bold text-(--color-text-1) text-xl">{APP_NAME}</div>
-              <div className="text-(--color-text-2) text-sm">{t('settings.about.description')}</div>
+            <div className="flex min-h-[72px] flex-col items-start justify-center">
+              <div className="mb-1 font-bold text-(--color-foreground) text-lg">{APP_NAME}</div>
+              <div className="text-(--color-foreground-secondary) text-sm">{t('settings.about.description')}</div>
               <button
                 type="button"
                 onClick={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio/releases')}
-                className="mt-2">
-                <Badge className="cursor-pointer rounded-[10px] border border-cyan-500/40 bg-cyan-500/10 px-3 py-1 font-medium text-cyan-500 text-sm transition-colors hover:bg-cyan-500/15">
+                className="mt-1.5">
+                <Badge className="cursor-pointer rounded-md border-primary/20 bg-primary/10 px-1.5 py-0 font-medium text-[11px] text-primary leading-4 transition-colors hover:bg-primary/15">
                   v{version}
                 </Badge>
               </button>
@@ -220,6 +218,7 @@ const AboutSettings: FC = () => {
             <div className="flex shrink-0 items-center justify-end">
               <Button
                 size="sm"
+                variant="outline"
                 loading={appUpdateState.checking}
                 onClick={onCheckUpdate}
                 disabled={appUpdateState.downloading}
@@ -236,149 +235,120 @@ const AboutSettings: FC = () => {
 
         {!isPortable && (
           <>
-            <Divider className="my-4" />
-            <AboutRow>
-              <AboutRowTitle>{t('settings.general.auto_check_update.title')}</AboutRowTitle>
+            <Divider className="my-3" />
+            <SettingRow className="gap-3">
+              <SettingRowTitle>{t('settings.general.auto_check_update.title')}</SettingRowTitle>
               <Switch checked={autoCheckUpdate} onCheckedChange={(v) => setAutoCheckUpdate(v)} />
-            </AboutRow>
+            </SettingRow>
 
-            <Divider className="my-4" />
-            <AboutRow>
-              <AboutRowTitle>{t('settings.general.test_plan.title')}</AboutRowTitle>
+            <Divider className="my-3" />
+            <SettingRow className="gap-3">
+              <SettingRowTitle>{t('settings.general.test_plan.title')}</SettingRowTitle>
               <Tooltip content={t('settings.general.test_plan.tooltip')}>
                 <Switch checked={testPlan} onCheckedChange={(v) => handleSetTestPlan(v)} />
               </Tooltip>
-            </AboutRow>
+            </SettingRow>
 
             {testPlan && (
               <>
-                <Divider className="my-2" />
-                <AboutRow className="items-start">
-                  <AboutRowTitle className="pt-1">{t('settings.general.test_plan.version_options')}</AboutRowTitle>
-                  <RadioGroup
-                    className="flex flex-wrap justify-end gap-3"
+                <Divider className="my-1.5" />
+                <SettingRow className="items-center gap-3">
+                  <SettingRowTitle>{t('settings.general.test_plan.version_options')}</SettingRowTitle>
+                  <SegmentedControl<UpgradeChannel>
                     value={getTestChannel()}
-                    onValueChange={(value) => handleTestChannelChange(value as UpgradeChannel)}>
-                    {testChannels.map((option) => {
-                      const id = `about-test-channel-${option.value}`
-                      return (
-                        <Tooltip key={option.value} content={option.tooltip}>
-                          <label
-                            htmlFor={id}
-                            className="flex cursor-pointer items-center gap-2 rounded-lg border border-(--color-border) px-3 py-2 text-(--color-text-1) text-sm transition-colors hover:bg-(--color-background-soft)">
-                            <RadioGroupItem id={id} value={option.value} />
-                            <span>{option.label}</span>
-                          </label>
+                    onValueChange={handleTestChannelChange}
+                    options={testChannels.map((option) => ({
+                      value: option.value,
+                      label: (
+                        <Tooltip content={option.tooltip}>
+                          <span>{option.label}</span>
                         </Tooltip>
                       )
-                    })}
-                  </RadioGroup>
-                </AboutRow>
+                    }))}
+                    size="sm"
+                  />
+                </SettingRow>
               </>
             )}
           </>
         )}
-      </AboutGroup>
+      </SettingGroup>
 
       {appUpdateState.info && appUpdateState.available && (
-        <AboutGroup theme={theme}>
-          <AboutRow>
-            <AboutRowTitle>
+        <SettingGroup theme={theme}>
+          <SettingRow className="gap-3">
+            <SettingRowTitle className="gap-2.5">
               {t('settings.about.updateAvailable', { version: appUpdateState.info.version })}
               <IndicatorLight color="green" />
-            </AboutRowTitle>
-          </AboutRow>
-          <div className="markdown my-2 rounded-md bg-(--color-bg-2) px-0 py-3 text-(--color-text-2) text-sm [&_p]:m-0">
+            </SettingRowTitle>
+          </SettingRow>
+          <div className="markdown my-2 rounded-md bg-muted px-0 py-3 text-(--color-foreground-secondary) text-sm [&_p]:m-0">
             <Markdown>
               {typeof appUpdateState.info.releaseNotes === 'string'
                 ? appUpdateState.info.releaseNotes.replace(/\n/g, '\n\n')
                 : appUpdateState.info.releaseNotes?.map((note) => note.note).join('\n')}
             </Markdown>
           </div>
-        </AboutGroup>
+        </SettingGroup>
       )}
 
-      <AboutGroup theme={theme}>
+      <SettingGroup theme={theme}>
         <AboutActionRow
           icon={<BadgeQuestionMark className="size-4.5" />}
           title={t('docs.title')}
           actionLabel={t('settings.about.website.button')}
           onAction={onOpenDocs}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Rss className="size-4.5" />}
           title={t('settings.about.releases.title')}
           actionLabel={t('settings.about.releases.button')}
           onAction={showReleases}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Globe className="size-4.5" />}
           title={t('settings.about.website.title')}
           actionLabel={t('settings.about.website.button')}
           onAction={() => onOpenWebsite('https://cherry-ai.com')}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Github className="size-4.5" />}
           title={t('settings.about.feedback.title')}
           actionLabel={t('settings.about.feedback.button')}
           onAction={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio/issues/new/choose')}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Building2 className="size-4.5" />}
           title={t('settings.about.enterprise.title')}
           actionLabel={t('settings.about.website.button')}
           onAction={showEnterprise}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Mail className="size-4.5" />}
           title={t('settings.about.contact.title')}
           actionLabel={t('settings.about.contact.button')}
           onAction={mailto}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Briefcase className="size-4.5" />}
           title={t('settings.about.careers.title')}
           actionLabel={t('settings.about.careers.button')}
           onAction={() => onOpenWebsite('https://www.cherry-ai.com/careers')}
         />
-        <Divider className="my-4" />
+        <Divider className="my-3" />
         <AboutActionRow
           icon={<Bug className="size-4.5" />}
           title={t('settings.about.debug.title')}
           actionLabel={t('settings.about.debug.open')}
           onAction={debug}
         />
-      </AboutGroup>
-    </div>
-  )
-}
-
-function AboutGroup({ children, theme }: { children: ReactNode; theme: ThemeMode }) {
-  return (
-    <div
-      className={cn(
-        'mb-5 rounded-2xs border border-(--color-border) p-4',
-        theme === ThemeMode.dark ? 'bg-black/5' : 'bg-(--color-background)'
-      )}>
-      {children}
-    </div>
-  )
-}
-
-function AboutRow({ children, className }: { children: ReactNode; className?: string }) {
-  return <div className={cn('flex min-h-6 items-center justify-between gap-4', className)}>{children}</div>
-}
-
-function AboutRowTitle({ children, className }: { children: ReactNode; className?: string }) {
-  return (
-    <div className={cn('flex items-center gap-2.5 text-(--color-text-1) text-sm leading-4.5', className)}>
-      {children}
+      </SettingGroup>
     </div>
   )
 }
@@ -395,15 +365,15 @@ function AboutActionRow({
   title: string
 }) {
   return (
-    <AboutRow>
-      <AboutRowTitle>
+    <SettingRow className="gap-3">
+      <SettingRowTitle className="gap-2.5">
         {icon}
         {title}
-      </AboutRowTitle>
-      <Button size="sm" onClick={() => void onAction()}>
+      </SettingRowTitle>
+      <Button size="sm" onClick={() => void onAction()} variant="outline">
         {actionLabel}
       </Button>
-    </AboutRow>
+    </SettingRow>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/ChannelsSettings/ChannelDetail.tsx b/src/renderer/src/pages/settings/ChannelsSettings/ChannelDetail.tsx
index 4a2c39153d..6f4e57d139 100644
--- a/src/renderer/src/pages/settings/ChannelsSettings/ChannelDetail.tsx
+++ b/src/renderer/src/pages/settings/ChannelsSettings/ChannelDetail.tsx
@@ -1,14 +1,32 @@
-import { DeleteOutlined, EditOutlined, FileTextOutlined, PlusOutlined } from '@ant-design/icons'
-import { Switch } from '@cherrystudio/ui'
+import {
+  Alert,
+  Badge,
+  Button,
+  ConfirmDialog,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Spinner,
+  Switch,
+  Tooltip
+} from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import CopyButton from '@renderer/components/CopyButton'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useAgents } from '@renderer/hooks/agents/useAgents'
 import { useChannels } from '@renderer/hooks/agents/useChannels'
-import { isSoulModeEnabled } from '@renderer/pages/settings/AgentSettings/shared'
+import { isSoulModeEnabled } from '@renderer/pages/agents/AgentSettings/shared'
 import type { AgentConfiguration } from '@renderer/types'
 import { getChannelTypeIcon } from '@renderer/utils/agentSession'
-import { Alert, Button, Empty, Input, Modal, Popconfirm, Select, Spin, Tag, Tooltip } from 'antd'
+import { FileText, Pencil, Plus, Trash2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -80,6 +98,8 @@ const LOG_LEVEL_COLORS: Record<string, string> = {
   debug: '#8c8c8c'
 }
 
+const NO_AGENT_VALUE = '__none'
+
 // --------------- Log Modal ---------------
 
 const ChannelLogModal: FC<{
@@ -126,36 +146,33 @@ const ChannelLogModal: FC<{
   )
 
   return (
-    <Modal
-      open={open}
-      title={
-        <div className="flex items-center gap-2">
-          <span>{`${channelName} — ${t('agent.cherryClaw.channels.logs')}`}</span>
-          {logs.length > 0 && <CopyButton textToCopy={logsText} size={14} />}
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <span>{`${channelName} — ${t('agent.cherryClaw.channels.logs')}`}</span>
+            {logs.length > 0 && <CopyButton textToCopy={logsText} size={14} />}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="max-h-100 overflow-y-auto rounded-md bg-background-subtle p-2 font-mono text-[11px] leading-[1.6]">
+          {logs.length === 0 && (
+            <div className="py-8 text-center text-muted-foreground text-xs">
+              {t('agent.cherryClaw.channels.noLogs')}
+            </div>
+          )}
+          {logs.map((entry, i) => (
+            <div key={i} className="flex gap-2 whitespace-pre-wrap py-px">
+              <span className="shrink-0 text-muted-foreground">{formatTime(entry.timestamp)}</span>
+              <span style={{ color: LOG_LEVEL_COLORS[entry.level] ?? '#8c8c8c', fontWeight: 500 }}>
+                [{entry.level.toUpperCase()}]
+              </span>
+              <span className="break-all">{entry.message}</span>
+            </div>
+          ))}
+          <div ref={logEndRef} />
         </div>
-      }
-      footer={null}
-      onCancel={onClose}
-      width={600}
-      destroyOnHidden
-      transitionName="animation-move-down"
-      centered>
-      <div className="max-h-100 overflow-y-auto rounded-[6px] bg-(--color-background-soft) p-2 font-mono text-[11px] leading-[1.6]">
-        {logs.length === 0 && (
-          <div className="py-8 text-center text-foreground-400 text-xs">{t('agent.cherryClaw.channels.noLogs')}</div>
-        )}
-        {logs.map((entry, i) => (
-          <div key={i} className="flex gap-2 whitespace-pre-wrap py-px">
-            <span className="shrink-0 text-foreground-400">{formatTime(entry.timestamp)}</span>
-            <span style={{ color: LOG_LEVEL_COLORS[entry.level] ?? '#8c8c8c', fontWeight: 500 }}>
-              [{entry.level.toUpperCase()}]
-            </span>
-            <span className="break-all">{entry.message}</span>
-          </div>
-        ))}
-        <div ref={logEndRef} />
-      </div>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
@@ -194,10 +211,11 @@ const ChannelEditModal: FC<
   }, [channel, name, onSave])
 
   const handleAgentChange = useCallback(
-    (value: string | null) => {
-      setAgentId(value)
+    (value: string) => {
+      const nextAgentId = value === NO_AGENT_VALUE ? null : value
+      setAgentId(nextAgentId)
       if (channel) {
-        onSave(channel.id, { agentId: value })
+        onSave(channel.id, { agentId: nextAgentId })
       }
     },
     [channel, onSave]
@@ -213,48 +231,55 @@ const ChannelEditModal: FC<
   const FormComponent = channel ? getFormForType(channel.type) : null
 
   return (
-    <Modal
-      open={open}
-      title={channel?.name}
-      footer={null}
-      onCancel={onClose}
-      width={500}
-      destroyOnHidden
-      centered
-      transitionName="animation-move-down">
-      {channel && (
-        <div className="flex flex-col gap-4 py-2">
-          <div>
-            <label className="mb-1 block font-medium text-xs">{t('common.name')}</label>
-            <Input value={name} onChange={(e) => setName(e.target.value)} onBlur={handleNameBlur} size="small" />
-          </div>
-          <div>
-            <label className="mb-1 block font-medium text-xs">{t('agent.cherryClaw.channels.bindAgent')}</label>
-            <Select
-              value={agentId}
-              onChange={handleAgentChange}
-              size="small"
-              className="w-full"
-              allowClear
-              placeholder={t('agent.cherryClaw.channels.selectAgent')}
-              options={agents.map((a) => ({ value: a.id, label: a.name }))}
-            />
-            {showSoulModeWarning && (
-              <Alert
-                type="warning"
-                showIcon
-                message={t('agent.cherryClaw.channels.soulModeRequired')}
-                className="mt-2"
-                style={{ fontSize: 12 }}
-              />
-            )}
-          </div>
-          {FormComponent && (
-            <FormComponent channel={channel} onConfigChange={handleUpdate} onRemove={() => onDelete(channel.id)} />
-          )}
-        </div>
-      )}
-    </Modal>
+    <Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
+      <DialogContent className="max-w-[500px]">
+        {channel && (
+          <>
+            <DialogHeader>
+              <DialogTitle>{channel.name}</DialogTitle>
+            </DialogHeader>
+            <div className="flex flex-col gap-4">
+              <div>
+                <label className="mb-1 block font-medium text-xs">{t('common.name')}</label>
+                <Input
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onBlur={handleNameBlur}
+                  className="h-8 text-sm"
+                />
+              </div>
+              <div>
+                <label className="mb-1 block font-medium text-xs">{t('agent.cherryClaw.channels.bindAgent')}</label>
+                <Select value={agentId ?? NO_AGENT_VALUE} onValueChange={handleAgentChange}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue placeholder={t('agent.cherryClaw.channels.selectAgent')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value={NO_AGENT_VALUE}>{t('common.none')}</SelectItem>
+                    {agents.map((agent) => (
+                      <SelectItem key={agent.id} value={agent.id}>
+                        {agent.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                {showSoulModeWarning && (
+                  <Alert
+                    type="warning"
+                    showIcon
+                    message={t('agent.cherryClaw.channels.soulModeRequired')}
+                    className="mt-2 text-xs"
+                  />
+                )}
+              </div>
+              {FormComponent && (
+                <FormComponent channel={channel} onConfigChange={handleUpdate} onRemove={() => onDelete(channel.id)} />
+              )}
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
   )
 }
 
@@ -272,6 +297,7 @@ const ChannelInstanceRow: FC<{
   const { t } = useTranslation()
   const summary = getChannelSummary(channel)
   const agentName = agents.find((a) => a.id === channel.agentId)?.name
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
 
   const isConnected = connectionStatus?.connected ?? false
   const hasError = connectionStatus?.error
@@ -282,17 +308,17 @@ const ChannelInstanceRow: FC<{
     if (isConnected) {
       statusColor = 'bg-green-500'
       statusTag = (
-        <Tag color="success" className="text-[10px] leading-3.5">
+        <Badge className="border-success/30 bg-success/10 px-1.5 py-0 text-[10px] text-success leading-3.5">
           {t('agent.cherryClaw.channels.connected')}
-        </Tag>
+        </Badge>
       )
     } else if (hasError) {
       statusColor = 'bg-red-500'
       statusTag = (
         <Tooltip title={hasError}>
-          <Tag color="error" className="text-[10px] leading-3.5">
+          <Badge className="border-destructive/30 bg-destructive/10 px-1.5 py-0 text-[10px] text-destructive leading-3.5">
             {t('agent.cherryClaw.channels.error')}
-          </Tag>
+          </Badge>
         </Tooltip>
       )
     }
@@ -312,20 +338,33 @@ const ChannelInstanceRow: FC<{
         </div>
       </div>
       <Tooltip title={t('agent.cherryClaw.channels.logs')}>
-        <Button type="text" size="small" icon={<FileTextOutlined />} onClick={onShowLogs} />
+        <Button variant="ghost" size="icon-sm" onClick={onShowLogs}>
+          <FileText className="size-4" />
+        </Button>
       </Tooltip>
       <Tooltip title={t('common.edit')}>
-        <Button type="text" size="small" icon={<EditOutlined />} onClick={onEdit} />
+        <Button variant="ghost" size="icon-sm" onClick={onEdit}>
+          <Pencil className="size-4" />
+        </Button>
       </Tooltip>
-      <Popconfirm
+      <Tooltip title={t('common.delete')}>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="hover:!text-destructive"
+          onClick={() => setDeleteConfirmOpen(true)}>
+          <Trash2 className="size-4" />
+        </Button>
+      </Tooltip>
+      <ConfirmDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
         title={t('agent.cherryClaw.channels.deleteConfirm', { name: channel.name })}
+        confirmText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        destructive
         onConfirm={onDelete}
-        okText={t('common.confirm')}
-        cancelText={t('common.cancel')}>
-        <Tooltip title={t('common.delete')}>
-          <Button type="text" size="small" icon={<DeleteOutlined />} danger />
-        </Tooltip>
-      </Popconfirm>
+      />
       <Switch checked={channel.isActive} size="sm" onCheckedChange={onToggle} />
     </div>
   )
@@ -452,7 +491,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channelDef }) => {
       <Scrollbar
         className="flex flex-1 flex-col items-center justify-center px-5 py-4"
         style={{ height: 'calc(100vh - var(--navbar-height))' }}>
-        <Spin />
+        <Spinner text={t('common.loading')} />
       </Scrollbar>
     )
   }
@@ -461,31 +500,29 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channelDef }) => {
 
   return (
     <Scrollbar className="flex flex-1 flex-col px-5 py-4" style={{ height: 'calc(100vh - var(--navbar-height))' }}>
-      <div className="mb-1">
-        <SettingTitle>
-          <div className="flex items-center gap-2">
+      <div className="flex items-center justify-between gap-4 pb-1">
+        <div className="min-w-0">
+          <SettingTitle className="justify-start gap-2">
             {icon && <img src={icon} className="h-5 w-5 rounded-sm object-contain" />}
-            <span>{channelDef.name}</span>
-          </div>
-          <Button
-            type="primary"
-            size="small"
-            icon={<PlusOutlined />}
-            disabled={!channelDef.available}
-            onClick={handleAdd}>
-            {t('agent.cherryClaw.channels.add')}
-          </Button>
-        </SettingTitle>
-        <p className="mt-1.5 mb-0 text-(--color-text-3) text-xs">
-          {channelDef.available ? t(channelDef.description) : t('agent.cherryClaw.channels.comingSoon')}
-        </p>
+            <span className="truncate">{channelDef.name}</span>
+          </SettingTitle>
+          <p className="mt-1.5 mb-0 text-(--color-foreground-muted) text-xs">
+            {channelDef.available ? t(channelDef.description) : t('agent.cherryClaw.channels.comingSoon')}
+          </p>
+        </div>
+        <Button size="sm" disabled={!channelDef.available} variant="outline" onClick={handleAdd}>
+          <Plus className="size-4" />
+          {t('agent.cherryClaw.channels.add')}
+        </Button>
       </div>
-      <SettingDivider style={{ margin: '0 0 4px 0' }} />
+      <SettingDivider className="m-0 mt-2" />
       <div className="flex flex-col">
         {channelList.length === 0 && (
-          <Empty
-            image={Empty.PRESENTED_IMAGE_SIMPLE}
+          <EmptyState
+            compact
+            preset="no-resource"
             description={t('agent.cherryClaw.channels.noInstances', { type: channelDef.name })}
+            className="py-8"
           />
         )}
         {channelList.map((ch) => (
diff --git a/src/renderer/src/pages/settings/ChannelsSettings/ChannelForms.tsx b/src/renderer/src/pages/settings/ChannelsSettings/ChannelForms.tsx
index 23b2f1e235..07228cbca1 100644
--- a/src/renderer/src/pages/settings/ChannelsSettings/ChannelForms.tsx
+++ b/src/renderer/src/pages/settings/ChannelsSettings/ChannelForms.tsx
@@ -1,5 +1,16 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@cherrystudio/ui'
 import type { FeishuChannelConfig, FeishuDomain, PermissionMode } from '@renderer/types'
-import { Input, Modal, Select } from 'antd'
 import { QRCodeSVG } from 'qrcode.react'
 import type { ReactNode } from 'react'
 import { type FC, useCallback, useEffect, useState } from 'react'
@@ -17,6 +28,8 @@ const PERMISSION_MODE_OPTIONS: Array<{ value: PermissionMode | ''; labelKey: str
   { value: 'plan', labelKey: 'agent.settings.tooling.permissionMode.plan.title' }
 ]
 
+const INHERIT_PERMISSION_MODE_VALUE = '__inherit'
+
 // --------------- Form types ---------------
 
 type FieldDef = {
@@ -55,15 +68,23 @@ const ChannelPermissionMode: FC<ChannelFormProps> = ({ channel, onConfigChange }
     <div className="flex flex-col gap-1">
       <label className="font-medium text-xs">{t('agent.cherryClaw.channels.security.permissionMode')}</label>
       <Select
-        value={channel.permissionMode ?? ''}
-        onChange={(value) => onConfigChange({ permissionMode: value === '' ? undefined : value })}
-        size="small"
-        className="w-full"
-        options={PERMISSION_MODE_OPTIONS.map((opt) => ({
-          value: opt.value,
-          label: t(opt.labelKey)
-        }))}
-      />
+        value={channel.permissionMode ?? INHERIT_PERMISSION_MODE_VALUE}
+        onValueChange={(value) =>
+          onConfigChange({
+            permissionMode: value === INHERIT_PERMISSION_MODE_VALUE ? undefined : (value as PermissionMode)
+          })
+        }>
+        <SelectTrigger size="sm" className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {PERMISSION_MODE_OPTIONS.map((opt) => (
+            <SelectItem key={opt.value || 'inherit'} value={opt.value || INHERIT_PERMISSION_MODE_VALUE}>
+              {t(opt.labelKey)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   )
 }
@@ -117,12 +138,13 @@ const ChannelFieldsForm: FC<ChannelFieldsFormProps> = ({
           <div key={field.key} className={field.span === 2 ? 'col-span-2' : ''}>
             <label className="mb-1 block font-medium text-xs">{field.label}</label>
             {field.secret ? (
-              <Input.Password
+              <Input
+                type="password"
                 value={fieldValues[field.key] ?? ''}
                 onChange={(e) => setFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
                 onBlur={() => saveField(field.key, fieldValues[field.key] ?? '')}
                 placeholder={field.placeholder}
-                size="small"
+                className="h-8 text-sm"
               />
             ) : (
               <Input
@@ -130,7 +152,7 @@ const ChannelFieldsForm: FC<ChannelFieldsFormProps> = ({
                 onChange={(e) => setFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
                 onBlur={() => saveField(field.key, fieldValues[field.key] ?? '')}
                 placeholder={field.placeholder}
-                size="small"
+                className="h-8 text-sm"
               />
             )}
           </div>
@@ -143,7 +165,7 @@ const ChannelFieldsForm: FC<ChannelFieldsFormProps> = ({
             onChange={(e) => setChatIds(e.target.value)}
             onBlur={saveChatIds}
             placeholder={chatIdsConfig.placeholder}
-            size="small"
+            className="h-8 text-sm"
           />
           <span className="mt-1 block text-gray-400 text-xs">{chatIdsConfig.hint}</span>
           {!chatIds.trim() && idsKey === 'allowed_chat_ids' && (
@@ -192,16 +214,17 @@ const FeishuDomainSelector: FC<ChannelFormProps> = ({ channel, onConfigChange })
   return (
     <div>
       <label className="mb-1 block font-medium text-xs">{t('agent.cherryClaw.channels.feishu.domain')}</label>
-      <Select<FeishuDomain>
+      <Select
         value={(cfg.domain as FeishuDomain) ?? 'feishu'}
-        onChange={(value) => onConfigChange({ config: { ...cfg, domain: value } })}
-        size="small"
-        className="w-full"
-        options={[
-          { value: 'feishu', label: t('agent.cherryClaw.channels.feishu.domainFeishu') },
-          { value: 'lark', label: t('agent.cherryClaw.channels.feishu.domainLark') }
-        ]}
-      />
+        onValueChange={(value) => onConfigChange({ config: { ...cfg, domain: value as FeishuDomain } })}>
+        <SelectTrigger size="sm" className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="feishu">{t('agent.cherryClaw.channels.feishu.domainFeishu')}</SelectItem>
+          <SelectItem value="lark">{t('agent.cherryClaw.channels.feishu.domainLark')}</SelectItem>
+        </SelectContent>
+      </Select>
     </div>
   )
 }
@@ -294,23 +317,25 @@ export const FeishuForm: FC<ChannelFormProps> = ({ channel, onConfigChange }) =>
         }}
       />
 
-      <Modal
+      <Dialog
         open={!!qrUrl}
-        title={t('agent.cherryClaw.channels.feishu.qrTitle')}
-        footer={null}
-        onCancel={() => {
+        onOpenChange={(open) => {
+          if (open) return
           setQrUrl(null)
           if (status === 'pending') setStatus('idle')
-        }}
-        centered
-        width={360}>
-        <div className="flex flex-col items-center gap-4 py-4">
-          {qrUrl && <QRCodeSVG value={qrUrl} size={240} level="M" />}
-          <span className="text-center text-foreground-500 text-xs">
-            {t('agent.cherryClaw.channels.feishu.qrScanHint')}
-          </span>
-        </div>
-      </Modal>
+        }}>
+        <DialogContent className="max-w-[360px]">
+          <DialogHeader>
+            <DialogTitle>{t('agent.cherryClaw.channels.feishu.qrTitle')}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center gap-4 py-4">
+            {qrUrl && <QRCodeSVG value={qrUrl} size={240} level="M" />}
+            <span className="text-center text-muted-foreground text-xs">
+              {t('agent.cherryClaw.channels.feishu.qrScanHint')}
+            </span>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }
@@ -438,23 +463,25 @@ export const WeChatForm: FC<ChannelFormProps & { onRemove?: () => void }> = ({ c
 
       <ChannelPermissionMode channel={channel} onConfigChange={onConfigChange} />
 
-      <Modal
+      <Dialog
         open={!!qrUrl}
-        title={t('agent.cherryClaw.channels.wechat.qrTitle')}
-        footer={null}
-        onCancel={() => {
+        onOpenChange={(open) => {
+          if (open) return
           setQrUrl(null)
           if (status !== 'confirmed' && onRemove) onRemove()
-        }}
-        centered
-        width={360}>
-        <div className="flex flex-col items-center gap-4 py-4">
-          {qrUrl && <QRCodeSVG value={qrUrl} size={240} level="M" />}
-          <span className="text-center text-foreground-500 text-xs">
-            {t('agent.cherryClaw.channels.wechat.qrHint')}
-          </span>
-        </div>
-      </Modal>
+        }}>
+        <DialogContent className="max-w-[360px]">
+          <DialogHeader>
+            <DialogTitle>{t('agent.cherryClaw.channels.wechat.qrTitle')}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center gap-4 py-4">
+            {qrUrl && <QRCodeSVG value={qrUrl} size={240} level="M" />}
+            <span className="text-center text-muted-foreground text-xs">
+              {t('agent.cherryClaw.channels.wechat.qrHint')}
+            </span>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }
diff --git a/src/renderer/src/pages/settings/ChannelsSettings/index.tsx b/src/renderer/src/pages/settings/ChannelsSettings/index.tsx
index 0533ddf6c3..f5d6292e44 100644
--- a/src/renderer/src/pages/settings/ChannelsSettings/index.tsx
+++ b/src/renderer/src/pages/settings/ChannelsSettings/index.tsx
@@ -26,15 +26,12 @@ const ChannelsSettings: FC = () => {
                 <MenuItem
                   key={ch.type}
                   label={t(ch.titleKey)}
-                  description={ch.available ? t(ch.description) : t('agent.cherryClaw.channels.comingSoon')}
                   active={selectedType.type === ch.type}
                   onClick={() => setSelectedType(ch)}
                   icon={
-                    iconSrc ? (
-                      <img src={iconSrc} alt={ch.name} className="h-5.5 w-5.5 rounded object-contain" />
-                    ) : undefined
+                    iconSrc ? <img src={iconSrc} alt={ch.name} className="h-5 w-5 rounded object-contain" /> : undefined
                   }
-                  className="rounded-xs font-medium"
+                  className="rounded-lg font-medium"
                 />
               )
             })}
diff --git a/src/renderer/src/pages/settings/CommonSettings/components/ThemeColorPicker.tsx b/src/renderer/src/pages/settings/CommonSettings/components/ThemeColorPicker.tsx
new file mode 100644
index 0000000000..473a8dd9d6
--- /dev/null
+++ b/src/renderer/src/pages/settings/CommonSettings/components/ThemeColorPicker.tsx
@@ -0,0 +1,105 @@
+import { Input, RowFlex } from '@cherrystudio/ui'
+import { cn } from '@renderer/utils/style'
+import { useEffect, useState } from 'react'
+
+const HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{6}$/
+const SHORT_HEX_COLOR_PATTERN = /^#[0-9a-fA-F]{3}$/
+
+export const normalizeHexColor = (value: string) => {
+  let normalized = value.trim()
+
+  if (!normalized) {
+    return null
+  }
+
+  if (!normalized.startsWith('#')) {
+    normalized = `#${normalized}`
+  }
+
+  if (SHORT_HEX_COLOR_PATTERN.test(normalized)) {
+    normalized = `#${normalized
+      .slice(1)
+      .split('')
+      .map((char) => `${char}${char}`)
+      .join('')}`
+  }
+
+  if (!HEX_COLOR_PATTERN.test(normalized)) {
+    return null
+  }
+
+  return normalized.toUpperCase()
+}
+
+interface ThemeColorPickerProps {
+  value: string
+  presets: readonly string[]
+  onChange: (value: string) => void
+  ariaLabel: string
+  className?: string
+}
+
+const ThemeColorPicker = ({ value, presets, onChange, ariaLabel, className }: ThemeColorPickerProps) => {
+  const normalizedValue = normalizeHexColor(value) ?? '#000000'
+  const [draftValue, setDraftValue] = useState(normalizedValue)
+
+  useEffect(() => {
+    setDraftValue(normalizedValue)
+  }, [normalizedValue])
+
+  const commitColor = (nextValue: string) => {
+    setDraftValue(nextValue)
+
+    const nextColor = normalizeHexColor(nextValue)
+    if (nextColor) {
+      onChange(nextColor)
+    }
+  }
+
+  return (
+    <RowFlex className={cn('items-center gap-3', className)}>
+      <RowFlex className="gap-3">
+        {presets.map((color) => {
+          const normalizedPreset = normalizeHexColor(color) ?? color
+          const selected = normalizedPreset === normalizedValue
+
+          return (
+            <button
+              key={color}
+              type="button"
+              aria-label={normalizedPreset}
+              aria-pressed={selected}
+              className={cn(
+                'relative flex h-6 w-6 items-center justify-center rounded-full outline-none transition-opacity hover:opacity-80 focus-visible:ring-3 focus-visible:ring-ring/50'
+              )}
+              onClick={() => commitColor(normalizedPreset)}>
+              <span
+                className={cn('h-5 w-5 rounded-full border-2', selected ? 'border-border' : 'border-transparent')}
+                style={{ backgroundColor: normalizedPreset }}
+              />
+            </button>
+          )
+        })}
+      </RowFlex>
+      <label className="relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-background shadow-xs outline-none focus-within:ring-3 focus-within:ring-ring/50">
+        <input
+          type="color"
+          value={normalizedValue}
+          aria-label={ariaLabel}
+          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+          onChange={(event) => commitColor(event.target.value)}
+        />
+        <span className="h-5 w-5 rounded-sm border border-border" style={{ backgroundColor: normalizedValue }} />
+      </label>
+      <Input
+        value={draftValue}
+        onChange={(event) => commitColor(event.target.value)}
+        onBlur={() => setDraftValue(normalizedValue)}
+        className="h-8 w-24 font-mono text-xs uppercase"
+        spellCheck={false}
+      />
+    </RowFlex>
+  )
+}
+
+export default ThemeColorPicker
diff --git a/src/renderer/src/pages/settings/CommonSettings/components/__tests__/ThemeColorPicker.test.tsx b/src/renderer/src/pages/settings/CommonSettings/components/__tests__/ThemeColorPicker.test.tsx
new file mode 100644
index 0000000000..b0d519a365
--- /dev/null
+++ b/src/renderer/src/pages/settings/CommonSettings/components/__tests__/ThemeColorPicker.test.tsx
@@ -0,0 +1,34 @@
+// @vitest-environment jsdom
+import '@testing-library/jest-dom/vitest'
+
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import ThemeColorPicker, { normalizeHexColor } from '../ThemeColorPicker'
+
+afterEach(() => {
+  cleanup()
+})
+
+describe('ThemeColorPicker', () => {
+  it('normalizes shorthand hex colors', () => {
+    expect(normalizeHexColor('#abc')).toBe('#AABBCC')
+    expect(normalizeHexColor('09f')).toBe('#0099FF')
+  })
+
+  it('reverts an invalid draft color on blur', () => {
+    const onChange = vi.fn()
+
+    render(<ThemeColorPicker value="#112233" presets={[]} onChange={onChange} ariaLabel="Theme color" />)
+
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'not-a-color' } })
+
+    expect(onChange).not.toHaveBeenCalled()
+    expect(input).toHaveValue('not-a-color')
+
+    fireEvent.blur(input)
+
+    expect(input).toHaveValue('#112233')
+  })
+})
diff --git a/src/renderer/src/pages/settings/CommonSettings/index.tsx b/src/renderer/src/pages/settings/CommonSettings/index.tsx
new file mode 100644
index 0000000000..f534c64557
--- /dev/null
+++ b/src/renderer/src/pages/settings/CommonSettings/index.tsx
@@ -0,0 +1,851 @@
+import {
+  Badge,
+  Button,
+  CodeEditor,
+  Combobox,
+  type ComboboxOption,
+  InfoTooltip,
+  Input,
+  MenuItem,
+  MenuList,
+  RowFlex,
+  SegmentedControl,
+  Switch,
+  Tooltip
+} from '@cherrystudio/ui'
+import { Flex } from '@cherrystudio/ui'
+import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
+import { loggerService } from '@logger'
+import { ResetIcon } from '@renderer/components/Icons'
+import Scrollbar from '@renderer/components/Scrollbar'
+import Selector from '@renderer/components/Selector'
+import { isLinux, isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
+import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { useTimer } from '@renderer/hooks/useTimer'
+import useUserTheme from '@renderer/hooks/useUserTheme'
+import i18n from '@renderer/i18n'
+import type { NotificationSource } from '@renderer/types/notification'
+import { isValidProxyUrl } from '@renderer/utils'
+import { formatErrorMessage } from '@renderer/utils/error'
+import { cn } from '@renderer/utils/style'
+import { defaultByPassRules, defaultLanguage } from '@shared/config/constant'
+import type { LanguageVarious } from '@shared/data/preference/preferenceTypes'
+import { ThemeMode } from '@shared/data/preference/preferenceTypes'
+import { Code, Minus, Monitor, Moon, Palette, Plus, Shield, Sun } from 'lucide-react'
+import type React from 'react'
+import type { FC } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  SettingDescription,
+  SettingDivider,
+  SettingGroup,
+  SettingRow,
+  SettingRowTitle,
+  settingsContentBodyClassName,
+  settingsContentScrollClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  SettingTitle
+} from '..'
+import ThemeColorPicker from './components/ThemeColorPicker'
+
+type SpellCheckOption = { readonly value: string; readonly label: string; readonly flag: string }
+type CommonSettingsSection = 'display-language' | 'system-startup' | 'privacy-advanced' | 'custom-css'
+
+const defaultFontPreviewFamily = 'Ubuntu, -apple-system, system-ui, Arial, sans-serif'
+const logger = loggerService.withContext('CommonSettings')
+
+const spellCheckLanguageOptions: readonly SpellCheckOption[] = [
+  { value: 'en-US', label: 'English (US)', flag: '🇺🇸' },
+  { value: 'es', label: 'Español', flag: '🇪🇸' },
+  { value: 'fr', label: 'Français', flag: '🇫🇷' },
+  { value: 'de', label: 'Deutsch', flag: '🇩🇪' },
+  { value: 'it', label: 'Italiano', flag: '🇮🇹' },
+  { value: 'pt', label: 'Português', flag: '🇵🇹' },
+  { value: 'ru', label: 'Русский', flag: '🇷🇺' },
+  { value: 'nl', label: 'Nederlands', flag: '🇳🇱' },
+  { value: 'pl', label: 'Polski', flag: '🇵🇱' },
+  { value: 'sk', label: 'Slovenčina', flag: '🇸🇰' },
+  { value: 'el', label: 'Ελληνικά', flag: '🇬🇷' }
+]
+
+const CommonSettings: FC = () => {
+  const { t } = useTranslation()
+  const { theme, settedTheme, setTheme } = useTheme()
+  const { setTimeoutTimer } = useTimer()
+  const { userTheme, setUserTheme } = useUserTheme()
+  const { activeCmTheme } = useCodeStyle()
+
+  const [activeSection, setActiveSection] = useState<CommonSettingsSection>('display-language')
+  const [language, setLanguage] = usePreference('app.language')
+  const [disableHardwareAcceleration, setDisableHardwareAcceleration] = usePreference(
+    'BootConfig.app.disable_hardware_acceleration'
+  )
+  const [enableDeveloperMode, setEnableDeveloperMode] = usePreference('app.developer_mode.enabled')
+  const [launchOnBoot, setLaunchOnBoot] = usePreference('app.launch_on_boot')
+  const [launchToTray, setLaunchToTray] = usePreference('app.tray.on_launch')
+  const [trayOnClose, setTrayOnClose] = usePreference('app.tray.on_close')
+  const [tray, setTray] = usePreference('app.tray.enabled')
+  const [enableDataCollection, setEnableDataCollection] = usePreference('app.privacy.data_collection.enabled')
+  const [storeProxyMode, setProxyMode] = usePreference('app.proxy.mode')
+  const [storeProxyBypassRules, _setProxyBypassRules] = usePreference('app.proxy.bypass_rules')
+  const [storeProxyUrl, _setProxyUrl] = usePreference('app.proxy.url')
+  const [enableSpellCheck, setEnableSpellCheck] = usePreference('app.spell_check.enabled')
+  const [spellCheckLanguages, setSpellCheckLanguages] = usePreference('app.spell_check.languages')
+  const [windowStyle, setWindowStyle] = usePreference('ui.window_style')
+  const [customCss, setCustomCss] = usePreference('ui.custom_css')
+  const [topicPosition, setTopicPosition] = usePreference('topic.position')
+  const [clickAssistantToShowTopic, setClickAssistantToShowTopic] = usePreference('assistant.click_to_show_topic')
+  const [pinTopicsToTop, setPinTopicsToTop] = usePreference('topic.tab.pin_to_top')
+  const [showTopicTime, setShowTopicTime] = usePreference('topic.tab.show_time')
+  const [fontSize] = usePreference('chat.message.font_size')
+  const [useSystemTitleBar, setUseSystemTitleBar] = usePreference('app.use_system_title_bar')
+  const [notificationSettings, setNotificationSettings] = useMultiplePreferences({
+    assistant: 'app.notification.assistant.enabled',
+    backup: 'app.notification.backup.enabled',
+    knowledge: 'app.notification.knowledge.enabled'
+  })
+
+  const [proxyUrl, setProxyUrl] = useState<string>(storeProxyUrl)
+  const [proxyBypassRules, setProxyBypassRules] = useState<string>(storeProxyBypassRules)
+  const [currentZoom, setCurrentZoom] = useState(1.0)
+  const [fontList, setFontList] = useState<string[]>([])
+
+  const sectionItems = useMemo(
+    () => [
+      {
+        key: 'display-language' as const,
+        label: t('settings.general.common.sections.display_language'),
+        icon: <Palette />
+      },
+      {
+        key: 'system-startup' as const,
+        label: t('settings.general.common.sections.system_startup'),
+        icon: <Monitor />
+      },
+      {
+        key: 'privacy-advanced' as const,
+        label: t('settings.general.common.sections.privacy_advanced'),
+        icon: <Shield />
+      },
+      {
+        key: 'custom-css' as const,
+        label: t('settings.general.common.sections.custom_css'),
+        icon: <Code />
+      }
+    ],
+    [t]
+  )
+
+  const languagesOptions: { value: LanguageVarious; label: string; flag: string }[] = [
+    { value: 'zh-CN', label: '中文', flag: '🇨🇳' },
+    { value: 'zh-TW', label: '中文（繁体）', flag: '🇭🇰' },
+    { value: 'en-US', label: 'English', flag: '🇺🇸' },
+    { value: 'de-DE', label: 'Deutsch', flag: '🇩🇪' },
+    { value: 'ja-JP', label: '日本語', flag: '🇯🇵' },
+    { value: 'ru-RU', label: 'Русский', flag: '🇷🇺' },
+    { value: 'el-GR', label: 'Ελληνικά', flag: '🇬🇷' },
+    { value: 'es-ES', label: 'Español', flag: '🇪🇸' },
+    { value: 'fr-FR', label: 'Français', flag: '🇫🇷' },
+    { value: 'pt-PT', label: 'Português', flag: '🇵🇹' },
+    { value: 'ro-RO', label: 'Română', flag: '🇷🇴' },
+    { value: 'vi-VN', label: 'Tiếng Việt', flag: '🇻🇳' }
+  ]
+
+  const proxyModeOptions: { value: 'system' | 'custom' | 'none'; label: string }[] = [
+    { value: 'system', label: t('settings.proxy.mode.system') },
+    { value: 'custom', label: t('settings.proxy.mode.custom') },
+    { value: 'none', label: t('settings.proxy.mode.none') }
+  ]
+
+  const themeOptions = useMemo(
+    () => [
+      {
+        value: ThemeMode.light,
+        label: (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <Sun size={16} />
+            <span>{t('settings.theme.light')}</span>
+          </div>
+        )
+      },
+      {
+        value: ThemeMode.dark,
+        label: (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <Moon size={16} />
+            <span>{t('settings.theme.dark')}</span>
+          </div>
+        )
+      },
+      {
+        value: ThemeMode.system,
+        label: (
+          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <Monitor size={16} />
+            <span>{t('settings.theme.system')}</span>
+          </div>
+        )
+      }
+    ],
+    [t]
+  )
+
+  useEffect(() => {
+    const loadSystemFonts = async () => {
+      try {
+        const fonts = await window.api.getSystemFonts()
+        setFontList(fonts)
+      } catch (error) {
+        logger.error('Failed to get system fonts', error as Error)
+      }
+    }
+
+    const updateCurrentZoom = async () => {
+      try {
+        const factor = await window.api.handleZoomFactor(0)
+        setCurrentZoom(factor)
+      } catch (error) {
+        logger.error('Failed to get current zoom factor', error as Error)
+      }
+    }
+
+    void loadSystemFonts()
+    void updateCurrentZoom()
+
+    const handleResize = () => {
+      void updateCurrentZoom()
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  const onSelectLanguage = (value: LanguageVarious) => {
+    void i18n.changeLanguage(value)
+    void setLanguage(value)
+  }
+
+  const handleNotificationChange = (type: NotificationSource, value: boolean) => {
+    void setNotificationSettings({ [type]: value })
+  }
+
+  const handleSpellCheckChange = (checked: boolean) => {
+    void setEnableSpellCheck(checked)
+    void window.api.setEnableSpellCheck(checked)
+  }
+
+  const handleSpellCheckLanguagesChange = (selectedLanguages: string[]) => {
+    void setSpellCheckLanguages(selectedLanguages)
+  }
+
+  const handleWindowStyleChange = useCallback(
+    (checked: boolean) => {
+      void setWindowStyle(checked ? 'transparent' : 'opaque')
+    },
+    [setWindowStyle]
+  )
+
+  const handleUseSystemTitleBarChange = (checked: boolean) => {
+    void window.modal.confirm({
+      title: t('settings.use_system_title_bar.confirm.title'),
+      content: t('settings.use_system_title_bar.confirm.content'),
+      okText: t('common.confirm'),
+      cancelText: t('common.cancel'),
+      centered: true,
+      async onOk() {
+        try {
+          await setUseSystemTitleBar(checked)
+        } catch (error) {
+          window.toast.error(formatErrorMessage(error))
+          throw error
+        }
+
+        setTimeoutTimer(
+          'handleUseSystemTitleBarChange',
+          () => {
+            void window.api.application.relaunch()
+          },
+          500
+        )
+      }
+    })
+  }
+
+  const handleHardwareAccelerationChange = (checked: boolean) => {
+    void window.modal.confirm({
+      title: t('settings.hardware_acceleration.confirm.title'),
+      content: t('settings.hardware_acceleration.confirm.content'),
+      okText: t('common.confirm'),
+      cancelText: t('common.cancel'),
+      centered: true,
+      async onOk() {
+        try {
+          await setDisableHardwareAcceleration(checked)
+        } catch (error) {
+          window.toast.error(formatErrorMessage(error))
+          throw error
+        }
+
+        setTimeoutTimer(
+          'handleHardwareAccelerationChange',
+          () => {
+            void window.api.application.relaunch()
+          },
+          500
+        )
+      }
+    })
+  }
+
+  const updateTray = (isShowTray: boolean) => {
+    void setTray(isShowTray)
+    if (!isShowTray) {
+      updateTrayOnClose(false)
+      updateLaunchToTray(false)
+    }
+  }
+
+  const updateTrayOnClose = (isTrayOnClose: boolean) => {
+    void setTrayOnClose(isTrayOnClose)
+    if (isTrayOnClose && !tray) {
+      updateTray(true)
+    }
+  }
+
+  const updateLaunchToTray = (isLaunchToTray: boolean) => {
+    void setLaunchToTray(isLaunchToTray)
+    if (isLaunchToTray && !tray) {
+      updateTray(true)
+    }
+  }
+
+  const onSetProxyUrl = () => {
+    if (proxyUrl && !isValidProxyUrl(proxyUrl)) {
+      window.toast.error(t('message.error.invalid.proxy.url'))
+      return
+    }
+
+    void _setProxyUrl(proxyUrl)
+  }
+
+  const onSetProxyBypassRules = () => {
+    void _setProxyBypassRules(proxyBypassRules)
+  }
+
+  const handleZoomFactor = async (delta: number, reset: boolean = false) => {
+    const zoomFactor = await window.api.handleZoomFactor(delta, reset)
+    setCurrentZoom(zoomFactor)
+  }
+
+  const handleColorPrimaryChange = useCallback(
+    (colorHex: string) => {
+      setUserTheme({
+        ...userTheme,
+        colorPrimary: colorHex
+      })
+    },
+    [setUserTheme, userTheme]
+  )
+
+  const handleUserFontChange = useCallback(
+    (value: string) => {
+      setUserTheme({
+        ...userTheme,
+        userFontFamily: value
+      })
+    },
+    [setUserTheme, userTheme]
+  )
+
+  const handleUserCodeFontChange = useCallback(
+    (value: string) => {
+      setUserTheme({
+        ...userTheme,
+        userCodeFontFamily: value
+      })
+    },
+    [setUserTheme, userTheme]
+  )
+
+  const fontOptions = useMemo<ComboboxOption[]>(
+    () => [
+      {
+        label: t('settings.display.font.default'),
+        value: ''
+      },
+      ...fontList.map((font) => ({ label: font, value: font }))
+    ],
+    [fontList, t]
+  )
+
+  const renderFontOption = useCallback((option: ComboboxOption) => {
+    const fontFamily = option.value || defaultFontPreviewFamily
+
+    return (
+      <Tooltip title={option.label} placement="left" delay={500}>
+        <div className="truncate" style={{ fontFamily }}>
+          {option.label}
+        </div>
+      </Tooltip>
+    )
+  }, [])
+
+  const handleFontComboboxChange = useCallback((value: string | string[], onChange: (font: string) => void) => {
+    onChange(Array.isArray(value) ? '' : value)
+  }, [])
+
+  const handleUserFontComboboxChange = useCallback(
+    (value: string | string[]) => {
+      handleFontComboboxChange(value, handleUserFontChange)
+    },
+    [handleFontComboboxChange, handleUserFontChange]
+  )
+
+  const handleUserCodeFontComboboxChange = useCallback(
+    (value: string | string[]) => {
+      handleFontComboboxChange(value, handleUserCodeFontChange)
+    },
+    [handleFontComboboxChange, handleUserCodeFontChange]
+  )
+
+  const renderDisplayLanguageSection = () => (
+    <>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.general.common.sections.display_language')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('common.language')}</SettingRowTitle>
+          <Selector
+            size={14}
+            value={language || defaultLanguage}
+            onChange={onSelectLanguage}
+            options={languagesOptions.map((lang) => ({
+              label: (
+                <Flex className="items-center gap-2">
+                  <span role="img" aria-label={lang.flag}>
+                    {lang.flag}
+                  </span>
+                  {lang.label}
+                </Flex>
+              ),
+              value: lang.value
+            }))}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
+          <Selector<ThemeMode> size={14} value={settedTheme} onChange={setTheme} options={themeOptions} />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.theme.color_primary')}</SettingRowTitle>
+          <ThemeColorPicker
+            value={userTheme.colorPrimary}
+            presets={THEME_COLOR_PRESETS}
+            onChange={handleColorPrimaryChange}
+            ariaLabel={t('settings.theme.color_primary')}
+          />
+        </SettingRow>
+        {isMac && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
+              <Switch checked={windowStyle === 'transparent'} onCheckedChange={handleWindowStyleChange} />
+            </SettingRow>
+          </>
+        )}
+        {isLinux && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.use_system_title_bar.title')}</SettingRowTitle>
+              <Switch checked={useSystemTitleBar} onCheckedChange={handleUseSystemTitleBarChange} />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.zoom.title')}</SettingRowTitle>
+          <ZoomButtonGroup>
+            <Button onClick={() => handleZoomFactor(-0.1)} variant="ghost" size="icon">
+              <Minus size="14" />
+            </Button>
+            <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
+            <Button onClick={() => handleZoomFactor(0.1)} variant="ghost" size="icon">
+              <Plus size="14" />
+            </Button>
+            <Button onClick={() => handleZoomFactor(0, true)} className="ml-2" variant="ghost" size="icon">
+              <ResetIcon size="14" />
+            </Button>
+          </ZoomButtonGroup>
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle style={{ justifyContent: 'flex-start', gap: 5 }}>
+          {t('settings.display.font.title')} <Badge className="border-primary/20 bg-primary/10 text-primary">New</Badge>
+        </SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.display.font.global')}</SettingRowTitle>
+          <SelectRow>
+            <Combobox
+              width={280}
+              placeholder={t('settings.display.font.select')}
+              emptyText={t('common.no_results')}
+              options={fontOptions}
+              value={userTheme.userFontFamily || ''}
+              onChange={handleUserFontComboboxChange}
+              renderOption={renderFontOption}
+              searchPlacement="trigger"
+              triggerStyle={{ fontFamily: userTheme.userFontFamily || defaultFontPreviewFamily }}
+              popoverClassName="max-h-[320px] overflow-y-auto"
+            />
+            <Button onClick={() => handleUserFontChange('')} className="ml-2" variant="ghost" size="icon">
+              <ResetIcon size="14" />
+            </Button>
+          </SelectRow>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.display.font.code')}</SettingRowTitle>
+          <SelectRow>
+            <Combobox
+              width={280}
+              placeholder={t('settings.display.font.select')}
+              emptyText={t('common.no_results')}
+              options={fontOptions}
+              value={userTheme.userCodeFontFamily || ''}
+              onChange={handleUserCodeFontComboboxChange}
+              renderOption={renderFontOption}
+              searchPlacement="trigger"
+              triggerStyle={{ fontFamily: userTheme.userCodeFontFamily || defaultFontPreviewFamily }}
+              popoverClassName="max-h-[320px] overflow-y-auto"
+            />
+            <Button onClick={() => handleUserCodeFontChange('')} className="ml-2" variant="ghost" size="icon">
+              <ResetIcon size="14" />
+            </Button>
+          </SelectRow>
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.display.topic.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.topic.position.label')}</SettingRowTitle>
+          <SegmentedControl
+            value={topicPosition || 'right'}
+            onValueChange={setTopicPosition}
+            options={[
+              { value: 'left', label: t('settings.topic.position.left') },
+              { value: 'right', label: t('settings.topic.position.right') }
+            ]}
+            size="sm"
+          />
+        </SettingRow>
+        {topicPosition === 'left' && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.advanced.auto_switch_to_topics')}</SettingRowTitle>
+              <Switch
+                checked={clickAssistantToShowTopic}
+                onCheckedChange={(checked) => setClickAssistantToShowTopic(checked)}
+              />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
+          <Switch checked={showTopicTime} onCheckedChange={(checked) => setShowTopicTime(checked)} />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.topic.pin_to_top')}</SettingRowTitle>
+          <Switch checked={pinTopicsToTop} onCheckedChange={(checked) => setPinTopicsToTop(checked)} />
+        </SettingRow>
+      </SettingGroup>
+    </>
+  )
+
+  const renderSystemStartupSection = () => (
+    <>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.launch.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.launch.onboot')}</SettingRowTitle>
+          <Switch checked={launchOnBoot} onCheckedChange={(checked) => void setLaunchOnBoot(checked)} />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.launch.totray')}</SettingRowTitle>
+          <Switch checked={launchToTray} onCheckedChange={(checked) => updateLaunchToTray(checked)} />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.tray.show')}</SettingRowTitle>
+          <Switch checked={tray} onCheckedChange={(checked) => updateTray(checked)} />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.tray.onclose')}</SettingRowTitle>
+          <Switch checked={trayOnClose} onCheckedChange={(checked) => updateTrayOnClose(checked)} />
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.proxy.mode.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.proxy.mode.title')}</SettingRowTitle>
+          <Selector value={storeProxyMode} onChange={(mode) => void setProxyMode(mode)} options={proxyModeOptions} />
+        </SettingRow>
+        {storeProxyMode === 'custom' && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.proxy.address')}</SettingRowTitle>
+              <Input
+                spellCheck={false}
+                placeholder="socks5://127.0.0.1:6153"
+                value={proxyUrl}
+                onChange={(e) => setProxyUrl(e.target.value)}
+                style={{ width: 220 }}
+                onBlur={onSetProxyUrl}
+                type="url"
+              />
+            </SettingRow>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <span>{t('settings.proxy.bypass')}</span>
+                <InfoTooltip
+                  content={t('settings.proxy.tip')}
+                  placement="right"
+                  iconProps={{ className: 'cursor-pointer' }}
+                />
+              </SettingRowTitle>
+              <Input
+                spellCheck={false}
+                placeholder={defaultByPassRules}
+                value={proxyBypassRules}
+                onChange={(e) => setProxyBypassRules(e.target.value)}
+                style={{ width: 220 }}
+                onBlur={onSetProxyBypassRules}
+              />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.hardware_acceleration.title')}</SettingRowTitle>
+          <Switch checked={disableHardwareAcceleration} onCheckedChange={handleHardwareAccelerationChange} />
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.general.spell_check.label')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <RowFlex className="mr-4 flex-1 items-center justify-between">
+            <SettingRowTitle>{t('settings.general.spell_check.label')}</SettingRowTitle>
+            {enableSpellCheck && !isMac && (
+              <Selector<string>
+                size={14}
+                multiple
+                value={spellCheckLanguages}
+                placeholder={t('settings.general.spell_check.languages')}
+                onChange={handleSpellCheckLanguagesChange}
+                options={spellCheckLanguageOptions.map((lang) => ({
+                  value: lang.value,
+                  label: (
+                    <Flex className="items-center gap-2">
+                      <span role="img" aria-label={lang.flag}>
+                        {lang.flag}
+                      </span>
+                      {lang.label}
+                    </Flex>
+                  )
+                }))}
+              />
+            )}
+          </RowFlex>
+          <Switch checked={enableSpellCheck} onCheckedChange={handleSpellCheckChange} />
+        </SettingRow>
+      </SettingGroup>
+    </>
+  )
+
+  const renderPrivacyAdvancedSection = () => (
+    <>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.notification.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span>{t('settings.notification.assistant')}</span>
+            <InfoTooltip
+              content={t('notification.tip')}
+              placement="right"
+              iconProps={{ className: 'cursor-pointer' }}
+            />
+          </SettingRowTitle>
+          <Switch
+            checked={notificationSettings.assistant}
+            onCheckedChange={(v) => handleNotificationChange('assistant', v)}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.notification.backup')}</SettingRowTitle>
+          <Switch
+            checked={notificationSettings.backup}
+            onCheckedChange={(v) => handleNotificationChange('backup', v)}
+          />
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.notification.knowledge_embed')}</SettingRowTitle>
+          <Switch
+            checked={notificationSettings.knowledge}
+            onCheckedChange={(v) => handleNotificationChange('knowledge', v)}
+          />
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.privacy.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.privacy.enable_privacy_mode')}</SettingRowTitle>
+          <Switch
+            checked={enableDataCollection}
+            onCheckedChange={(v) => {
+              void setEnableDataCollection(v)
+              void window.api.config.set('enableDataCollection', v)
+            }}
+          />
+        </SettingRow>
+      </SettingGroup>
+
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.developer.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <Flex className="items-center gap-1">
+            <SettingRowTitle>{t('settings.developer.enable_developer_mode')}</SettingRowTitle>
+            <InfoTooltip content={t('settings.developer.help')} />
+          </Flex>
+          <Switch checked={enableDeveloperMode} onCheckedChange={setEnableDeveloperMode} />
+        </SettingRow>
+      </SettingGroup>
+    </>
+  )
+
+  const renderCustomCssSection = () => (
+    <>
+      <SettingGroup theme={theme}>
+        <SettingTitle>
+          {t('settings.display.custom.css.label')}
+          <TitleExtra onClick={() => window.api.openWebsite('https://cherrycss.com/')}>
+            {t('settings.display.custom.css.cherrycss')}
+          </TitleExtra>
+        </SettingTitle>
+        <SettingDescription>{t('settings.display.custom.css.placeholder')}</SettingDescription>
+        <div className="mt-4 overflow-hidden rounded-lg border border-border/60">
+          <CodeEditor
+            theme={activeCmTheme}
+            fontSize={fontSize - 1}
+            value={customCss}
+            language="css"
+            placeholder={t('settings.display.custom.css.placeholder')}
+            onChange={(value) => setCustomCss(value)}
+            height="56vh"
+            expanded={false}
+            wrapped
+            options={{
+              autocompletion: true,
+              lineNumbers: true,
+              foldGutter: true,
+              keymap: true
+            }}
+          />
+        </div>
+      </SettingGroup>
+    </>
+  )
+
+  const renderSectionContent = () => {
+    switch (activeSection) {
+      case 'display-language':
+        return renderDisplayLanguageSection()
+      case 'system-startup':
+        return renderSystemStartupSection()
+      case 'privacy-advanced':
+        return renderPrivacyAdvancedSection()
+      case 'custom-css':
+        return renderCustomCssSection()
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="flex flex-1" data-theme-mode={theme}>
+      <div className="flex h-[calc(100vh-var(--navbar-height)-6px)] w-full flex-1 flex-row overflow-hidden">
+        <Scrollbar className={settingsSubmenuScrollClassName}>
+          <MenuList className={settingsSubmenuListClassName}>
+            <div className="px-2.5 pt-1 pb-2 font-medium text-foreground-muted text-xs">
+              {t('settings.general.common.title')}
+            </div>
+            {sectionItems.map((item) => (
+              <MenuItem
+                key={item.key}
+                label={item.label}
+                icon={item.icon}
+                active={activeSection === item.key}
+                onClick={() => setActiveSection(item.key)}
+                className={settingsSubmenuItemClassName}
+              />
+            ))}
+          </MenuList>
+        </Scrollbar>
+
+        <Scrollbar className={settingsContentScrollClassName}>
+          <div className={settingsContentBodyClassName}>{renderSectionContent()}</div>
+        </Scrollbar>
+      </div>
+    </div>
+  )
+}
+
+const TitleExtra = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('cursor-pointer text-xs underline opacity-70', className)} {...props} />
+)
+
+const ZoomButtonGroup = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex w-[210px] items-center justify-end', className)} {...props} />
+)
+
+const ZoomValue = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('mx-1.25 w-10 text-center', className)} {...props} />
+)
+
+const SelectRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex w-[380px] items-center justify-end', className)} {...props} />
+)
+
+export default CommonSettings
diff --git a/src/renderer/src/pages/settings/ComponentLabAgentSelectorSettings.tsx b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAgentSelectorSettings.tsx
similarity index 99%
rename from src/renderer/src/pages/settings/ComponentLabAgentSelectorSettings.tsx
rename to src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAgentSelectorSettings.tsx
index cd4786fd2f..4ffe0a0d09 100644
--- a/src/renderer/src/pages/settings/ComponentLabAgentSelectorSettings.tsx
+++ b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAgentSelectorSettings.tsx
@@ -5,7 +5,7 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingRow, SettingRowTitle } from '.'
+import { SettingRow, SettingRowTitle } from '..'
 
 type SelectionType = 'id' | 'item'
 
diff --git a/src/renderer/src/pages/settings/ComponentLabAssistantSelectorSettings.tsx b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAssistantSelectorSettings.tsx
similarity index 99%
rename from src/renderer/src/pages/settings/ComponentLabAssistantSelectorSettings.tsx
rename to src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAssistantSelectorSettings.tsx
index c997e84034..116a5e5f39 100644
--- a/src/renderer/src/pages/settings/ComponentLabAssistantSelectorSettings.tsx
+++ b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabAssistantSelectorSettings.tsx
@@ -5,7 +5,7 @@ import type { FC, ReactNode } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingRow, SettingRowTitle } from '.'
+import { SettingRow, SettingRowTitle } from '..'
 
 type SelectionType = 'id' | 'item'
 
diff --git a/src/renderer/src/pages/settings/ComponentLabModelSelectorSettings.tsx b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabModelSelectorSettings.tsx
similarity index 99%
rename from src/renderer/src/pages/settings/ComponentLabModelSelectorSettings.tsx
rename to src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabModelSelectorSettings.tsx
index 4e4eb749b9..de67bfaeff 100644
--- a/src/renderer/src/pages/settings/ComponentLabModelSelectorSettings.tsx
+++ b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabModelSelectorSettings.tsx
@@ -6,7 +6,7 @@ import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingDivider, SettingRow, SettingRowTitle } from '.'
+import { SettingDivider, SettingRow, SettingRowTitle } from '..'
 
 type DebugSelection = Model | Model[] | UniqueModelId | UniqueModelId[] | undefined
 
diff --git a/src/renderer/src/pages/settings/ComponentLabSettings.tsx b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabSettings.tsx
similarity index 87%
rename from src/renderer/src/pages/settings/ComponentLabSettings.tsx
rename to src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabSettings.tsx
index e0da92c0de..7c31a30873 100644
--- a/src/renderer/src/pages/settings/ComponentLabSettings.tsx
+++ b/src/renderer/src/pages/settings/ComponentLabSettings/ComponentLabSettings.tsx
@@ -4,7 +4,7 @@ import AgentTodoListPanel from '@renderer/pages/agents/components/AgentTodoListP
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingGroup, SettingTitle } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '..'
 import ComponentLabAgentSelectorSettings from './ComponentLabAgentSelectorSettings'
 import ComponentLabAssistantSelectorSettings from './ComponentLabAssistantSelectorSettings'
 import ComponentLabModelSelectorSettings from './ComponentLabModelSelectorSettings'
@@ -16,8 +16,11 @@ const ComponentLabSettings: FC = () => {
   return (
     <SettingContainer theme={theme}>
       <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.componentLab.title')}</SettingTitle>
-        <Tabs defaultValue="assistant-selector" variant="line" className="mt-4 gap-4">
+        <SettingTitle>
+          <span className="font-semibold text-[15px]">{t('settings.componentLab.title')}</span>
+        </SettingTitle>
+        <SettingDivider className="mt-3 mb-2" />
+        <Tabs defaultValue="assistant-selector" variant="line" className="gap-4">
           <TabsList>
             <TabsTrigger value="assistant-selector">{t('settings.componentLab.assistantSelector.title')}</TabsTrigger>
             <TabsTrigger value="agent-selector">{t('settings.componentLab.agentSelector.title')}</TabsTrigger>
diff --git a/src/renderer/src/pages/settings/ComponentLabSettings/index.ts b/src/renderer/src/pages/settings/ComponentLabSettings/index.ts
new file mode 100644
index 0000000000..522d711706
--- /dev/null
+++ b/src/renderer/src/pages/settings/ComponentLabSettings/index.ts
@@ -0,0 +1,4 @@
+export { default as ComponentLabAgentSelectorSettings } from './ComponentLabAgentSelectorSettings'
+export { default as ComponentLabAssistantSelectorSettings } from './ComponentLabAssistantSelectorSettings'
+export { default as ComponentLabModelSelectorSettings } from './ComponentLabModelSelectorSettings'
+export { default } from './ComponentLabSettings'
diff --git a/src/renderer/src/pages/settings/DataSettings/BasicDataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/BasicDataSettings.tsx
index 133464c4de..9ca1a1bfd7 100644
--- a/src/renderer/src/pages/settings/DataSettings/BasicDataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/BasicDataSettings.tsx
@@ -1,6 +1,5 @@
 import { LoadingOutlined, WifiOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
+import { Button, RowFlex, Switch, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import BackupPopup from '@renderer/components/Popups/BackupPopup'
 import LanTransferPopup from '@renderer/components/Popups/LanTransferPopup'
@@ -11,12 +10,12 @@ import { useTimer } from '@renderer/hooks/useTimer'
 import { reset } from '@renderer/services/BackupService'
 import type { AppInfo } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
+import { cn } from '@renderer/utils/style'
 import { occupiedDirs } from '@shared/config/constant'
-import { Button, Progress, Tooltip, Typography } from 'antd'
 import { FolderInput, FolderOpen, FolderOutput, SaveIcon } from 'lucide-react'
+import type React from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingDivider, SettingGroup, SettingHelpText, SettingRow, SettingRowTitle, SettingTitle } from '..'
 
@@ -156,7 +155,7 @@ const BasicDataSettings: React.FC = () => {
           <CopyDataContent />
           <MigrationNotice>
             <p style={{ color: 'var(--color-warning)' }}>{t('settings.data.app_data.restart_notice')}</p>
-            <p style={{ color: 'var(--color-text-3)', marginTop: '8px' }}>
+            <p style={{ color: 'var(--color-foreground-muted)', marginTop: '8px' }}>
               {t('settings.data.app_data.copy_time_notice')}
             </p>
           </MigrationNotice>
@@ -231,7 +230,7 @@ const BasicDataSettings: React.FC = () => {
           <MigrationNotice>
             <p>{t('settings.data.app_data.copying')}</p>
             <div style={{ marginTop: '12px' }}>
-              <Progress percent={currentProgress} status="active" strokeWidth={8} />
+              <MigrationProgressBar percent={currentProgress} status="active" strokeWidth={8} />
             </div>
             <p style={{ color: 'var(--color-warning)', marginTop: '12px', fontSize: '13px' }}>
               {t('settings.data.app_data.copying_warning')}
@@ -254,7 +253,7 @@ const BasicDataSettings: React.FC = () => {
             <MigrationNotice>
               <p>{t('settings.data.app_data.copying')}</p>
               <div style={{ marginTop: '12px' }}>
-                <Progress percent={Math.round(progress)} status={status} strokeWidth={8} />
+                <MigrationProgressBar percent={Math.round(progress)} status={status} strokeWidth={8} />
               </div>
               <p style={{ color: 'var(--color-warning)', marginTop: '12px', fontSize: '13px' }}>
                 {t('settings.data.app_data.copying_warning')}
@@ -452,11 +451,13 @@ const BasicDataSettings: React.FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-          <RowFlex className="justify-between gap-[5px]">
-            <Button onClick={() => BackupPopup.show()} icon={<SaveIcon size={14} />}>
+          <RowFlex className="justify-between gap-1.25">
+            <Button onClick={() => BackupPopup.show()} variant="outline">
+              <SaveIcon size={14} />
               {t('settings.general.backup.button')}
             </Button>
-            <Button onClick={RestorePopup.show} icon={<FolderOpen size={14} />}>
+            <Button onClick={RestorePopup.show} variant="outline">
+              <FolderOpen size={14} />
               {t('settings.general.restore.button')}
             </Button>
           </RowFlex>
@@ -475,8 +476,9 @@ const BasicDataSettings: React.FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.data.export_to_phone.lan.title')}</SettingRowTitle>
-          <RowFlex className="justify-between gap-[5px]">
-            <Button onClick={LanTransferPopup.show} icon={<WifiOutlined size={14} />}>
+          <RowFlex className="justify-between gap-1.25">
+            <Button onClick={LanTransferPopup.show} variant="outline">
+              <WifiOutlined size={14} />
               {t('settings.data.export_to_phone.lan.button')}
             </Button>
           </RowFlex>
@@ -484,8 +486,9 @@ const BasicDataSettings: React.FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.data.export_to_phone.file.title')}</SettingRowTitle>
-          <RowFlex className="justify-between gap-[5px]">
-            <Button onClick={() => BackupPopup.show('lan-transfer')} icon={<FolderInput size={14} />}>
+          <RowFlex className="justify-between gap-1.25">
+            <Button onClick={() => BackupPopup.show('lan-transfer')} variant="outline">
+              <FolderInput size={14} />
               {t('settings.data.export_to_phone.file.button')}
             </Button>
           </RowFlex>
@@ -497,14 +500,18 @@ const BasicDataSettings: React.FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('settings.data.app_data.label')}</SettingRowTitle>
           <PathRow>
-            <PathText style={{ color: 'var(--color-text-3)' }} onClick={() => handleOpenPath(appInfo?.appDataPath)}>
+            <PathText
+              style={{ color: 'var(--color-foreground-muted)' }}
+              onClick={() => handleOpenPath(appInfo?.appDataPath)}>
               {appInfo?.appDataPath}
             </PathText>
             <Tooltip title={t('settings.data.app_data.select')}>
               <FolderOutput onClick={handleSelectAppDataPath} style={{ cursor: 'pointer' }} size={16} />
             </Tooltip>
-            <RowFlex className="ml-2 gap-[5px]">
-              <Button onClick={() => handleOpenPath(appInfo?.appDataPath)}>{t('settings.data.app_data.open')}</Button>
+            <RowFlex className="ml-2 gap-1.25">
+              <Button onClick={() => handleOpenPath(appInfo?.appDataPath)} variant="outline">
+                {t('settings.data.app_data.open')}
+              </Button>
             </RowFlex>
           </PathRow>
         </SettingRow>
@@ -512,19 +519,25 @@ const BasicDataSettings: React.FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('settings.data.app_logs.label')}</SettingRowTitle>
           <PathRow>
-            <PathText style={{ color: 'var(--color-text-3)' }} onClick={() => handleOpenPath(appInfo?.logsPath)}>
+            <PathText
+              style={{ color: 'var(--color-foreground-muted)' }}
+              onClick={() => handleOpenPath(appInfo?.logsPath)}>
               {appInfo?.logsPath}
             </PathText>
-            <RowFlex className="ml-2 gap-[5px]">
-              <Button onClick={() => handleOpenPath(appInfo?.logsPath)}>{t('settings.data.app_logs.button')}</Button>
+            <RowFlex className="ml-2 gap-1.25">
+              <Button onClick={() => handleOpenPath(appInfo?.logsPath)} variant="outline">
+                {t('settings.data.app_logs.button')}
+              </Button>
             </RowFlex>
           </PathRow>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.data.app_knowledge.label')}</SettingRowTitle>
-          <RowFlex className="items-center gap-[5px]">
-            <Button onClick={handleRemoveAllFiles}>{t('settings.data.app_knowledge.button.delete')}</Button>
+          <RowFlex className="items-center gap-1.25">
+            <Button onClick={handleRemoveAllFiles} variant="outline">
+              {t('settings.data.app_knowledge.button.delete')}
+            </Button>
           </RowFlex>
         </SettingRow>
         <SettingDivider />
@@ -533,15 +546,17 @@ const BasicDataSettings: React.FC = () => {
             {t('settings.data.clear_cache.title')}
             {cacheSize && <CacheText>({cacheSize}MB)</CacheText>}
           </SettingRowTitle>
-          <RowFlex className="gap-[5px]">
-            <Button onClick={handleClearCache}>{t('settings.data.clear_cache.button')}</Button>
+          <RowFlex className="gap-1.25">
+            <Button onClick={handleClearCache} variant="outline">
+              {t('settings.data.clear_cache.button')}
+            </Button>
           </RowFlex>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.general.reset.title')}</SettingRowTitle>
-          <RowFlex className="gap-[5px]">
-            <Button onClick={reset} danger>
+          <RowFlex className="gap-1.25">
+            <Button onClick={reset} variant="destructive">
               {t('settings.general.reset.title')}
             </Button>
           </RowFlex>
@@ -551,69 +566,73 @@ const BasicDataSettings: React.FC = () => {
   )
 }
 
-const CacheText = styled(Typography.Text)`
-  color: var(--color-text-3);
-  font-size: 12px;
-  margin-left: 5px;
-  line-height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  text-align: left;
-`
+const CacheText = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span
+    className={cn('ml-1.25 inline-block text-left align-middle text-foreground-muted text-xs leading-4', className)}
+    {...props}
+  />
+)
 
-const PathText = styled(Typography.Text)`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  vertical-align: middle;
-  text-align: right;
-  margin-left: 5px;
-  cursor: pointer
-`
+const PathText = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span
+    className={cn('ml-1.25 inline-block min-w-0 flex-1 cursor-pointer truncate text-right align-middle', className)}
+    {...props}
+  />
+)
 
-const PathRow = styled(RowFlex)`
-  min-width: 0;
-  flex: 1;
-  width: 0;
-  align-items: center;
-  gap: 5px;
-`
+interface MigrationProgressBarProps {
+  percent: number
+  status: 'active' | 'success'
+  strokeWidth: number
+}
 
-// Add styled components for migration modal
-const MigrationModalContent = styled.div`
-  padding: 20px 0 10px;
-  display: flex;
-  flex-direction: column;
-`
+const MigrationProgressBar = ({ percent, status, strokeWidth }: MigrationProgressBarProps) => {
+  const normalizedPercent = Math.min(100, Math.max(0, Math.round(percent)))
 
-const MigrationNotice = styled.div`
-  margin-top: 24px;
-  font-size: 14px;
-`
+  return (
+    <div className="flex w-full items-center gap-2">
+      <div className="w-full overflow-hidden rounded-full bg-border" style={{ height: strokeWidth }}>
+        <div
+          className={cn(
+            'h-full rounded-full transition-[width] duration-300',
+            status === 'success' ? 'bg-success' : 'bg-primary'
+          )}
+          style={{ width: `${normalizedPercent}%` }}
+        />
+      </div>
+      <span className="min-w-10 text-right text-foreground-muted text-xs">{normalizedPercent}%</span>
+    </div>
+  )
+}
 
-const MigrationPathRow = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-`
+const PathRow = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof RowFlex>) => (
+  <RowFlex className={cn('w-0 min-w-0 flex-1 items-center gap-1.25', className)} {...props} />
+)
 
-const MigrationPathLabel = styled.div`
-  font-weight: 600;
-  font-size: 15px;
-  color: var(--color-text-1);
-`
+const MigrationModalContent = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col py-5 pb-2.5', className)} {...props} />
+)
 
-const MigrationPathValue = styled.div`
-  font-size: 14px;
-  color: var(--color-text-2);
-  background-color: var(--color-background-soft);
-  padding: 8px 12px;
-  border-radius: 4px;
-  word-break: break-all;
-  border: 1px solid var(--color-border);
-`
+const MigrationNotice = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-6 text-sm', className)} {...props} />
+)
+
+const MigrationPathRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col gap-1.25', className)} {...props} />
+)
+
+const MigrationPathLabel = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('font-semibold text-[15px] text-foreground', className)} {...props} />
+)
+
+const MigrationPathValue = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'break-all rounded border border-border bg-background-subtle px-3 py-2 text-foreground-secondary text-sm',
+      className
+    )}
+    {...props}
+  />
+)
 
 export default BasicDataSettings
diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
index 308d9dbea0..0d0d8c46e4 100644
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -1,29 +1,29 @@
-import { CloudServerOutlined, CloudSyncOutlined, YuqueOutlined } from '@ant-design/icons'
-import { MenuItem, MenuList, RowFlex } from '@cherrystudio/ui'
-import DividerWithText from '@renderer/components/DividerWithText'
-import { JoplinIcon, SiyuanIcon } from '@renderer/components/Icons'
+import { CloudServerOutlined, CloudSyncOutlined } from '@ant-design/icons'
+import { MenuDivider, MenuItem, MenuList, RowFlex } from '@cherrystudio/ui'
 import { NutstoreIcon } from '@renderer/components/Icons/NutstoreIcons'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import ImportMenuOptions from '@renderer/pages/settings/DataSettings/ImportMenuSettings'
 import { FileText, FolderCog, FolderInput, FolderOpen } from 'lucide-react'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
-import { SettingContainer } from '..'
+import {
+  SettingContainer,
+  settingsSubmenuDividerClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  settingsSubmenuSectionTitleClassName
+} from '..'
 import BasicDataSettings from './BasicDataSettings'
 import ExportMenuOptions from './ExportMenuSettings'
-import JoplinSettings from './JoplinSettings'
 import LocalBackupSettings from './LocalBackupSettings'
 import MarkdownExportSettings from './MarkdownExportSettings'
-import NotionSettings from './NotionSettings'
 import NutstoreSettings from './NutstoreSettings'
-import ObsidianSettings from './ObsidianSettings'
 import S3Settings from './S3Settings'
-import SiyuanSettings from './SiyuanSettings'
 import WebDavSettings from './WebDavSettings'
-import YuqueSettings from './YuqueSettings'
 
 const DataSettings: FC = () => {
   const { t } = useTranslation()
@@ -54,50 +54,39 @@ const DataSettings: FC = () => {
       key: 'markdown_export',
       title: t('settings.data.markdown_export.title'),
       icon: <FileText size={16} />
-    },
-
-    { key: 'divider_4', isDivider: true, text: t('settings.data.divider.third_party') },
-    { key: 'notion', title: t('settings.data.notion.title'), icon: <i className="iconfont icon-notion" /> },
-    {
-      key: 'yuque',
-      title: t('settings.data.yuque.title'),
-      icon: <YuqueOutlined style={{ fontSize: 16 }} />
-    },
-    {
-      key: 'joplin',
-      title: t('settings.data.joplin.title'),
-      icon: <JoplinIcon />
-    },
-    {
-      key: 'obsidian',
-      title: t('settings.data.obsidian.title'),
-      icon: <i className="iconfont icon-obsidian" />
-    },
-    {
-      key: 'siyuan',
-      title: t('settings.data.siyuan.title'),
-      icon: <SiyuanIcon />
     }
   ]
 
   return (
-    <Container>
-      <DataMenuList>
-        {menuItems.map((item) =>
-          item.isDivider ? (
-            <DividerWithText key={item.key} text={item.text || ''} style={{ margin: '8px 0' }} />
-          ) : (
-            <MenuItem
-              key={item.key}
-              label={item.title || ''}
-              active={menu === item.key}
-              onClick={() => setMenu(item.key)}
-              icon={item.icon}
-              className="font-medium"
-            />
-          )
-        )}
-      </DataMenuList>
+    <RowFlex className="flex-1">
+      <Scrollbar className={`${settingsSubmenuScrollClassName} [&_.iconfont]:text-current [&_.iconfont]:leading-4`}>
+        <MenuList className={settingsSubmenuListClassName}>
+          {menuItems.map((item, index) =>
+            item.isDivider ? (
+              <div key={item.key}>
+                {index > 0 && <MenuDivider className={settingsSubmenuDividerClassName} />}
+                <div
+                  className={
+                    index === 0
+                      ? 'px-2.5 pt-1 pb-2 font-medium text-foreground-muted text-xs'
+                      : settingsSubmenuSectionTitleClassName
+                  }>
+                  {item.text || ''}
+                </div>
+              </div>
+            ) : (
+              <MenuItem
+                key={item.key}
+                label={item.title || ''}
+                active={menu === item.key}
+                onClick={() => setMenu(item.key)}
+                icon={item.icon}
+                className={settingsSubmenuItemClassName}
+              />
+            )
+          )}
+        </MenuList>
+      </Scrollbar>
       <SettingContainer theme={theme} style={{ display: 'flex', flex: 1, height: '100%' }}>
         {menu === 'data' && <BasicDataSettings />}
         {menu === 'webdav' && <WebDavSettings />}
@@ -106,37 +95,10 @@ const DataSettings: FC = () => {
         {menu === 'import_settings' && <ImportMenuOptions />}
         {menu === 'export_menu' && <ExportMenuOptions />}
         {menu === 'markdown_export' && <MarkdownExportSettings />}
-        {menu === 'notion' && <NotionSettings />}
-        {menu === 'yuque' && <YuqueSettings />}
-        {menu === 'joplin' && <JoplinSettings />}
-        {menu === 'obsidian' && <ObsidianSettings />}
-        {menu === 'siyuan' && <SiyuanSettings />}
         {menu === 'local_backup' && <LocalBackupSettings />}
       </SettingContainer>
-    </Container>
+    </RowFlex>
   )
 }
 
-const Container = styled(RowFlex)`
-  flex: 1;
-`
-
-const DataMenuList = styled(MenuList)`
-  display: flex;
-  flex-direction: column;
-  width: var(--settings-width);
-  padding: 12px;
-  padding-bottom: 48px;
-  border-right: 0.5px solid var(--color-border);
-  height: 100vh;
-  overflow: auto;
-  box-sizing: border-box;
-  min-height: 0;
-
-  .iconfont {
-    color: currentColor;
-    line-height: 16px;
-  }
-`
-
 export default DataSettings
diff --git a/src/renderer/src/pages/settings/DataSettings/ImportMenuSettings.tsx b/src/renderer/src/pages/settings/DataSettings/ImportMenuSettings.tsx
index 35495d1130..963ffef15a 100644
--- a/src/renderer/src/pages/settings/DataSettings/ImportMenuSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/ImportMenuSettings.tsx
@@ -1,7 +1,6 @@
-import { RowFlex } from '@cherrystudio/ui'
+import { Button, RowFlex } from '@cherrystudio/ui'
 import ImportPopup from '@renderer/components/Popups/ImportPopup'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -18,8 +17,10 @@ const ImportMenuOptions: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.import_settings.chatgpt')}</SettingRowTitle>
-        <RowFlex className="justify-between gap-[5px]">
-          <Button onClick={ImportPopup.show}>{t('settings.data.import_settings.button')}</Button>
+        <RowFlex className="justify-between gap-1.25">
+          <Button onClick={ImportPopup.show} variant="outline">
+            {t('settings.data.import_settings.button')}
+          </Button>
         </RowFlex>
       </SettingRow>
     </SettingGroup>
diff --git a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
index aca5561568..3b0862dbbf 100644
--- a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
@@ -1,5 +1,5 @@
 import { DeleteOutlined, FolderOpenOutlined, SaveOutlined, SyncOutlined } from '@ant-design/icons'
-import { Button, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
+import { Button, Input, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { LocalBackupManager } from '@renderer/components/LocalBackupManager'
@@ -9,7 +9,6 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
 import { useAppSelector } from '@renderer/store'
 import type { AppInfo } from '@renderer/types'
-import { Input } from 'antd'
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -147,11 +146,11 @@ const LocalBackupSettings: React.FC = () => {
     if (!localBackupDir) return null
 
     if (!localBackupSync.lastSyncTime && !localBackupSync.syncing && !localBackupSync.lastSyncError) {
-      return <span style={{ color: 'var(--text-secondary)' }}>{t('settings.data.local.noSync')}</span>
+      return <span style={{ color: 'var(--color-foreground-secondary)' }}>{t('settings.data.local.noSync')}</span>
     }
 
     return (
-      <RowFlex className="items-center gap-[5px]">
+      <RowFlex className="items-center gap-1.25">
         {localBackupSync.syncing && <SyncOutlined spin />}
         {!localBackupSync.syncing && localBackupSync.lastSyncError && (
           <WarnTooltip
@@ -160,7 +159,7 @@ const LocalBackupSettings: React.FC = () => {
           />
         )}
         {localBackupSync.lastSyncTime && (
-          <span style={{ color: 'var(--text-secondary)' }}>
+          <span style={{ color: 'var(--color-foreground-secondary)' }}>
             {t('settings.data.local.lastSync')}: {dayjs(localBackupSync.lastSyncTime).format('HH:mm:ss')}
           </span>
         )}
@@ -185,7 +184,7 @@ const LocalBackupSettings: React.FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.local.directory.label')}</SettingRowTitle>
-        <RowFlex className="gap-[5px]">
+        <RowFlex className="gap-1.25">
           <Input
             value={localBackupDir}
             onChange={(e) => setLocalBackupDir(e.target.value)}
@@ -193,7 +192,7 @@ const LocalBackupSettings: React.FC = () => {
             placeholder={t('settings.data.local.directory.placeholder')}
             style={{ minWidth: 200, maxWidth: 400, flex: 1 }}
           />
-          <Button onClick={handleBrowseDirectory}>
+          <Button onClick={handleBrowseDirectory} variant="outline">
             <FolderOpenOutlined />
             {t('common.browse')}
           </Button>
@@ -206,12 +205,12 @@ const LocalBackupSettings: React.FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-        <RowFlex className="justify-between gap-[5px]">
-          <Button onClick={showBackupModal} disabled={!localBackupDir || backuping}>
+        <RowFlex className="justify-between gap-1.25">
+          <Button onClick={showBackupModal} disabled={!localBackupDir || backuping} variant="outline">
             <SaveOutlined />
             {t('settings.data.local.backup.button')}
           </Button>
-          <Button onClick={showBackupManager} disabled={!localBackupDir}>
+          <Button onClick={showBackupManager} disabled={!localBackupDir} variant="outline">
             <FolderOpenOutlined />
             {t('settings.data.local.restore.button')}
           </Button>
diff --git a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
index fbf37cb295..e4e929b6cc 100644
--- a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
@@ -1,10 +1,15 @@
 import { DeleteOutlined, FolderOpenOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  RowFlex,
+  Switch
+} from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import Input from 'antd/es/input/Input'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -73,20 +78,26 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.path')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
-          <Input
-            type="text"
-            value={markdownExportPath || ''}
-            readOnly
-            style={{ width: 250 }}
-            placeholder={t('settings.data.markdown_export.path_placeholder')}
-            suffix={
-              markdownExportPath ? (
-                <DeleteOutlined onClick={handleClearPath} style={{ color: 'var(--color-error)', cursor: 'pointer' }} />
-              ) : null
-            }
-          />
-          <Button onClick={handleSelectFolder}>
+        <RowFlex className="w-[315px] items-center gap-1.25">
+          <InputGroup className="h-8 w-[250px]">
+            <InputGroupInput
+              type="text"
+              value={markdownExportPath || ''}
+              readOnly
+              placeholder={t('settings.data.markdown_export.path_placeholder')}
+            />
+            {markdownExportPath && (
+              <InputGroupAddon align="inline-end">
+                <InputGroupButton
+                  onClick={handleClearPath}
+                  size="icon-sm"
+                  className="text-destructive hover:text-destructive">
+                  <DeleteOutlined />
+                </InputGroupButton>
+              </InputGroupAddon>
+            )}
+          </InputGroup>
+          <Button onClick={handleSelectFolder} variant="outline" className="h-8">
             <FolderOpenOutlined />
             {t('settings.data.markdown_export.select')}
           </Button>
diff --git a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
index 4d4e06726c..af27cbc23f 100644
--- a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
@@ -1,5 +1,5 @@
 import { CheckOutlined, FolderOutlined, LoadingOutlined, SyncOutlined } from '@ant-design/icons'
-import { Button, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
+import { Button, Input, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import NutstorePathPopup from '@renderer/components/Popups/NutsorePathPopup'
 import Selector from '@renderer/components/Selector'
@@ -19,7 +19,6 @@ import {
 import { useAppSelector } from '@renderer/store'
 import { modalConfirm } from '@renderer/utils'
 import { NUTSTORE_HOST } from '@shared/config/nutstore'
-import { Input, Typography } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -169,11 +168,11 @@ const NutstoreSettings: FC = () => {
     if (!nutstoreToken) return null
 
     if (!nutstoreSyncState.lastSyncTime && !nutstoreSyncState.syncing && !nutstoreSyncState.lastSyncError) {
-      return <span style={{ color: 'var(--text-secondary)' }}>{t('settings.data.webdav.noSync')}</span>
+      return <span style={{ color: 'var(--color-foreground-secondary)' }}>{t('settings.data.webdav.noSync')}</span>
     }
 
     return (
-      <RowFlex className="items-center gap-[5px]">
+      <RowFlex className="items-center gap-1.25">
         {nutstoreSyncState.syncing && <SyncOutlined spin />}
         {!nutstoreSyncState.syncing && nutstoreSyncState.lastSyncError && (
           <WarnTooltip
@@ -182,7 +181,7 @@ const NutstoreSettings: FC = () => {
           />
         )}
         {nutstoreSyncState.lastSyncTime && (
-          <span style={{ color: 'var(--text-secondary)' }}>
+          <span style={{ color: 'var(--color-foreground-secondary)' }}>
             {t('settings.data.webdav.lastSync')}: {dayjs(nutstoreSyncState.lastSyncTime).format('HH:mm:ss')}
           </span>
         )}
@@ -209,9 +208,9 @@ const NutstoreSettings: FC = () => {
           {isLogin ? t('settings.data.nutstore.isLogin') : t('settings.data.nutstore.notLogin')}
         </SettingRowTitle>
         {isLogin ? (
-          <RowFlex className="items-center justify-between gap-[5px]">
+          <RowFlex className="items-center justify-between gap-1.25">
             <Button
-              variant={nsConnected ? 'ghost' : 'default'}
+              variant={nsConnected ? 'ghost' : 'outline'}
               onClick={handleCheckConnection}
               disabled={checkConnectionLoading}>
               {checkConnectionLoading ? (
@@ -227,7 +226,9 @@ const NutstoreSettings: FC = () => {
             </Button>
           </RowFlex>
         ) : (
-          <Button onClick={handleClickNutstoreSSO}>{t('settings.data.nutstore.login.button')}</Button>
+          <Button onClick={handleClickNutstoreSSO} variant="outline">
+            {t('settings.data.nutstore.login.button')}
+          </Button>
         )}
       </SettingRow>
       <SettingDivider />
@@ -235,7 +236,7 @@ const NutstoreSettings: FC = () => {
         <>
           <SettingRow>
             <SettingRowTitle>{t('settings.data.nutstore.username')}</SettingRowTitle>
-            <Typography.Text style={{ color: 'var(--color-text-3)' }}>{nutstoreUsername}</Typography.Text>
+            <span className="text-foreground-muted">{nutstoreUsername}</span>
           </SettingRow>
 
           <SettingDivider />
@@ -250,7 +251,7 @@ const NutstoreSettings: FC = () => {
                   void setNutstorePath(e.target.value)
                 }}
               />
-              <Button variant="default" onClick={handleClickPathChange} size="icon">
+              <Button variant="outline" onClick={handleClickPathChange} size="icon">
                 <FolderOutlined />
               </Button>
             </RowFlex>
@@ -258,11 +259,11 @@ const NutstoreSettings: FC = () => {
           <SettingDivider />
           <SettingRow>
             <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-            <RowFlex className="justify-between gap-[5px]">
-              <Button onClick={showBackupModal} disabled={backuping}>
+            <RowFlex className="justify-between gap-1.25">
+              <Button onClick={showBackupModal} disabled={backuping} variant="outline">
                 {t('settings.data.nutstore.backup.button')}
               </Button>
-              <Button onClick={showBackupManager} disabled={!nutstoreToken}>
+              <Button onClick={showBackupManager} disabled={!nutstoreToken} variant="outline">
                 {t('settings.data.nutstore.restore.button')}
               </Button>
             </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
index 6d5be02a10..b768c91626 100644
--- a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
@@ -1,5 +1,5 @@
 import { FolderOpenOutlined, SaveOutlined, SyncOutlined } from '@ant-design/icons'
-import { Button, InfoTooltip, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
+import { Button, InfoTooltip, Input, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { S3BackupManager } from '@renderer/components/S3BackupManager'
 import { S3BackupModal, useS3BackupModal } from '@renderer/components/S3Modals'
@@ -9,7 +9,6 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMiniAppPopup } from '@renderer/hooks/useMiniAppPopup'
 import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
 import { useAppSelector } from '@renderer/store'
-import { Input } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -70,11 +69,13 @@ const S3Settings: FC = () => {
     if (!s3Endpoint) return null
 
     if (!s3Sync?.lastSyncTime && !s3Sync?.syncing && !s3Sync?.lastSyncError) {
-      return <span style={{ color: 'var(--text-secondary)' }}>{t('settings.data.s3.syncStatus.noSync')}</span>
+      return (
+        <span style={{ color: 'var(--color-foreground-secondary)' }}>{t('settings.data.s3.syncStatus.noSync')}</span>
+      )
     }
 
     return (
-      <RowFlex className="items-center gap-[5px]">
+      <RowFlex className="items-center gap-1.25">
         {s3Sync?.syncing && <SyncOutlined spin />}
         {!s3Sync?.syncing && s3Sync?.lastSyncError && (
           <WarnTooltip
@@ -83,7 +84,7 @@ const S3Settings: FC = () => {
           />
         )}
         {s3Sync?.lastSyncTime && (
-          <span style={{ color: 'var(--text-secondary)' }}>
+          <span style={{ color: 'var(--color-foreground-secondary)' }}>
             {t('settings.data.s3.syncStatus.lastSync', { time: dayjs(s3Sync.lastSyncTime).format('HH:mm:ss') })}
           </span>
         )}
@@ -162,7 +163,8 @@ const S3Settings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.s3.secretAccessKey.label')}</SettingRowTitle>
-        <Input.Password
+        <Input
+          type="password"
           placeholder={t('settings.data.s3.secretAccessKey.placeholder')}
           value={s3SecretAccessKey}
           onChange={(e) => setS3SecretAccessKey(e.target.value)}
@@ -184,15 +186,17 @@ const S3Settings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.s3.backup.operation')}</SettingRowTitle>
-        <RowFlex className="justify-between gap-[5px]">
+        <RowFlex className="justify-between gap-1.25">
           <Button
             onClick={showBackupModal}
+            variant="outline"
             disabled={backuping || !s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
             <SaveOutlined />
             {t('settings.data.s3.backup.button')}
           </Button>
           <Button
             onClick={showBackupManager}
+            variant="outline"
             disabled={!s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
             <FolderOpenOutlined />
             {t('settings.data.s3.backup.manager.button')}
diff --git a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
index fe67edd32b..a2432f5345 100644
--- a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
@@ -1,5 +1,5 @@
 import { FolderOpenOutlined, SaveOutlined, SyncOutlined } from '@ant-design/icons'
-import { Button, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
+import { Button, Input, RowFlex, Switch, WarnTooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import Selector from '@renderer/components/Selector'
 import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager'
@@ -7,7 +7,6 @@ import { useWebdavBackupModal, WebdavBackupModal } from '@renderer/components/We
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
 import { useAppSelector } from '@renderer/store'
-import { Input } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -63,11 +62,11 @@ const WebDavSettings: FC = () => {
     if (!webdavHost) return null
 
     if (!webdavSync.lastSyncTime && !webdavSync.syncing && !webdavSync.lastSyncError) {
-      return <span style={{ color: 'var(--text-secondary)' }}>{t('settings.data.webdav.noSync')}</span>
+      return <span style={{ color: 'var(--color-foreground-secondary)' }}>{t('settings.data.webdav.noSync')}</span>
     }
 
     return (
-      <RowFlex className="items-center gap-[5px]">
+      <RowFlex className="items-center gap-1.25">
         {webdavSync.syncing && <SyncOutlined spin />}
         {!webdavSync.syncing && webdavSync.lastSyncError && (
           <WarnTooltip
@@ -76,7 +75,7 @@ const WebDavSettings: FC = () => {
           />
         )}
         {webdavSync.lastSyncTime && (
-          <span style={{ color: 'var(--text-secondary)' }}>
+          <span style={{ color: 'var(--color-foreground-secondary)' }}>
             {t('settings.data.webdav.lastSync')}: {dayjs(webdavSync.lastSyncTime).format('HH:mm:ss')}
           </span>
         )}
@@ -124,7 +123,8 @@ const WebDavSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.webdav.password')}</SettingRowTitle>
-        <Input.Password
+        <Input
+          type="password"
           placeholder={t('settings.data.webdav.password')}
           value={webdavPass}
           onChange={(e) => setWebdavPass(e.target.value)}
@@ -146,12 +146,12 @@ const WebDavSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
-        <RowFlex className="justify-between gap-[5px]">
-          <Button onClick={showBackupModal} disabled={backuping}>
+        <RowFlex className="justify-between gap-1.25">
+          <Button onClick={showBackupModal} disabled={backuping} variant="outline">
             <SaveOutlined />
             {t('settings.data.webdav.backup.button')}
           </Button>
-          <Button onClick={showBackupManager} disabled={!webdavHost}>
+          <Button onClick={showBackupManager} disabled={!webdavHost} variant="outline">
             <FolderOpenOutlined />
             {t('settings.data.webdav.restore.button')}
           </Button>
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
deleted file mode 100644
index 5bb03c93ac..0000000000
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ /dev/null
@@ -1,517 +0,0 @@
-import { RowFlex } from '@cherrystudio/ui'
-import { CodeEditor } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
-import { usePreference } from '@data/hooks/usePreference'
-import { ResetIcon } from '@renderer/components/Icons'
-import TextBadge from '@renderer/components/TextBadge'
-import { isLinux, isMac, THEME_COLOR_PRESETS } from '@renderer/config/constant'
-import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
-import { useTheme } from '@renderer/context/ThemeProvider'
-import { useNavbarPosition } from '@renderer/hooks/useNavbar'
-import { useTimer } from '@renderer/hooks/useTimer'
-import useUserTheme from '@renderer/hooks/useUserTheme'
-import { DefaultPreferences } from '@shared/data/preference/preferenceSchemas'
-import type { AssistantIconType } from '@shared/data/preference/preferenceTypes'
-import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { ColorPicker, Segmented, Select, Tooltip } from 'antd'
-import { Minus, Monitor, Moon, Plus, Sun } from 'lucide-react'
-import type { FC } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
-import SidebarIconsManager from './SidebarIconsManager'
-
-const ColorCircleWrapper = styled.div`
-  width: 24px;
-  height: 24px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const ColorCircle = styled.div<{ color: string; isActive?: boolean }>`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: ${(props) => props.color};
-  cursor: pointer;
-  transform: translate(-50%, -50%);
-  border: 2px solid ${(props) => (props.isActive ? 'var(--color-border)' : 'transparent')};
-  transition: opacity 0.2s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-`
-
-const DisplaySettings: FC = () => {
-  const [windowStyle, setWindowStyle] = usePreference('ui.window_style')
-  const [customCss, setCustomCss] = usePreference('ui.custom_css')
-  const [visibleIcons, setVisibleIcons] = usePreference('ui.sidebar.icons.visible')
-  const [invisibleIcons, setInvisibleIcons] = usePreference('ui.sidebar.icons.invisible')
-  const [topicPosition, setTopicPosition] = usePreference('topic.position')
-  const [clickAssistantToShowTopic, setClickAssistantToShowTopic] = usePreference('assistant.click_to_show_topic')
-  const [pinTopicsToTop, setPinTopicsToTop] = usePreference('topic.tab.pin_to_top')
-  const [showTopicTime, setShowTopicTime] = usePreference('topic.tab.show_time')
-  const [assistantIconType, setAssistantIconType] = usePreference('assistant.icon_type')
-  const [fontSize] = usePreference('chat.message.font_size')
-  const [useSystemTitleBar, setUseSystemTitleBar] = usePreference('app.use_system_title_bar')
-
-  const { navbarPosition, setNavbarPosition } = useNavbarPosition()
-  const { theme, settedTheme, setTheme } = useTheme()
-  const { t } = useTranslation()
-  const { setTimeoutTimer } = useTimer()
-  const [currentZoom, setCurrentZoom] = useState(1.0)
-  const { userTheme, setUserTheme } = useUserTheme()
-  const { activeCmTheme } = useCodeStyle()
-  // const [visibleIcons, setVisibleIcons] = useState(sidebarIcons?.visible || DEFAULT_SIDEBAR_ICONS)
-  // const [disabledIcons, setDisabledIcons] = useState(sidebarIcons?.disabled || [])
-  const [fontList, setFontList] = useState<string[]>([])
-
-  const handleWindowStyleChange = useCallback(
-    (checked: boolean) => {
-      void setWindowStyle(checked ? 'transparent' : 'opaque')
-    },
-    [setWindowStyle]
-  )
-
-  const handleUseSystemTitleBarChange = (checked: boolean) => {
-    window.modal.confirm({
-      title: t('settings.use_system_title_bar.confirm.title'),
-      content: t('settings.use_system_title_bar.confirm.content'),
-      okText: t('common.confirm'),
-      cancelText: t('common.cancel'),
-      centered: true,
-      onOk() {
-        void setUseSystemTitleBar(checked)
-        setTimeoutTimer(
-          'handleUseSystemTitleBarChange',
-          () => {
-            void window.api.application.relaunch()
-          },
-          500
-        )
-      }
-    })
-  }
-
-  const handleColorPrimaryChange = useCallback(
-    (colorHex: string) => {
-      setUserTheme({
-        ...userTheme,
-        colorPrimary: colorHex
-      })
-    },
-    [setUserTheme, userTheme]
-  )
-
-  const handleReset = useCallback(() => {
-    void setVisibleIcons(DefaultPreferences.default['ui.sidebar.icons.visible'])
-    void setInvisibleIcons(DefaultPreferences.default['ui.sidebar.icons.invisible'])
-  }, [setVisibleIcons, setInvisibleIcons])
-
-  const themeOptions = useMemo(
-    () => [
-      {
-        value: ThemeMode.light,
-        label: (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-            <Sun size={16} />
-            <span>{t('settings.theme.light')}</span>
-          </div>
-        )
-      },
-      {
-        value: ThemeMode.dark,
-        label: (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-            <Moon size={16} />
-            <span>{t('settings.theme.dark')}</span>
-          </div>
-        )
-      },
-      {
-        value: ThemeMode.system,
-        label: (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-            <Monitor size={16} />
-            <span>{t('settings.theme.system')}</span>
-          </div>
-        )
-      }
-    ],
-    [t]
-  )
-
-  useEffect(() => {
-    // 初始化获取所有系统字体
-    void window.api.getSystemFonts().then((fonts: string[]) => {
-      setFontList(fonts)
-    })
-
-    // 初始化获取当前缩放值
-    void window.api.handleZoomFactor(0).then((factor) => {
-      setCurrentZoom(factor)
-    })
-
-    const handleResize = () => {
-      void window.api.handleZoomFactor(0).then((factor) => {
-        setCurrentZoom(factor)
-      })
-    }
-    // 添加resize事件监听
-    window.addEventListener('resize', handleResize)
-
-    // 清理事件监听，防止内存泄漏
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [])
-
-  const handleZoomFactor = async (delta: number, reset: boolean = false) => {
-    const zoomFactor = await window.api.handleZoomFactor(delta, reset)
-    setCurrentZoom(zoomFactor)
-  }
-
-  const handleUserFontChange = useCallback(
-    (value: string) => {
-      setUserTheme({
-        ...userTheme,
-        userFontFamily: value
-      })
-    },
-    [setUserTheme, userTheme]
-  )
-
-  const handleUserCodeFontChange = useCallback(
-    (value: string) => {
-      setUserTheme({
-        ...userTheme,
-        userCodeFontFamily: value
-      })
-    },
-    [setUserTheme, userTheme]
-  )
-
-  const assistantIconTypeOptions = useMemo(
-    () => [
-      { value: 'model', label: t('settings.assistant.icon.type.model') },
-      { value: 'emoji', label: t('settings.assistant.icon.type.emoji') },
-      { value: 'none', label: t('settings.assistant.icon.type.none') }
-    ],
-    [t]
-  )
-
-  const renderFontOption = useCallback(
-    (font: string) => (
-      <Tooltip title={font} placement="left" mouseEnterDelay={0.5}>
-        <div
-          className="truncate"
-          style={{
-            fontFamily: font
-          }}>
-          {font}
-        </div>
-      </Tooltip>
-    ),
-    []
-  )
-
-  return (
-    <SettingContainer theme={theme}>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.display.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
-          <Segmented value={settedTheme} shape="round" onChange={setTheme} options={themeOptions} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.theme.color_primary')}</SettingRowTitle>
-          <RowFlex className="items-center gap-3">
-            <RowFlex className="gap-3">
-              {THEME_COLOR_PRESETS.map((color) => (
-                <ColorCircleWrapper key={color}>
-                  <ColorCircle
-                    color={color}
-                    isActive={userTheme.colorPrimary === color}
-                    onClick={() => handleColorPrimaryChange(color)}
-                  />
-                </ColorCircleWrapper>
-              ))}
-            </RowFlex>
-            <ColorPicker
-              style={{ fontFamily: 'inherit' }}
-              className="color-picker"
-              value={userTheme.colorPrimary}
-              onChange={(color) => handleColorPrimaryChange(color.toHexString())}
-              showText
-              size="small"
-              presets={[
-                {
-                  label: 'Presets',
-                  colors: THEME_COLOR_PRESETS
-                }
-              ]}
-            />
-          </RowFlex>
-        </SettingRow>
-        {isMac && (
-          <>
-            <SettingDivider />
-            <SettingRow>
-              <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
-              <Switch checked={windowStyle === 'transparent'} onCheckedChange={handleWindowStyleChange} />
-            </SettingRow>
-          </>
-        )}
-        {isLinux && (
-          <>
-            <SettingDivider />
-            <SettingRow>
-              <SettingRowTitle>{t('settings.use_system_title_bar.title')}</SettingRowTitle>
-              <Switch checked={useSystemTitleBar} onCheckedChange={handleUseSystemTitleBarChange} />
-            </SettingRow>
-          </>
-        )}
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle style={{ justifyContent: 'flex-start', gap: 5 }}>
-          {t('settings.display.navbar.title')} <TextBadge text="New" />
-        </SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.navbar.position.label')}</SettingRowTitle>
-          <Segmented
-            value={navbarPosition}
-            shape="round"
-            onChange={setNavbarPosition}
-            options={[
-              { label: t('settings.display.navbar.position.left'), value: 'left' },
-              { label: t('settings.display.navbar.position.top'), value: 'top' }
-            ]}
-          />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.display.zoom.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.zoom.title')}</SettingRowTitle>
-          <ZoomButtonGroup>
-            <Button onClick={() => handleZoomFactor(-0.1)} variant="ghost" size="icon">
-              <Minus size="14" />
-            </Button>
-            <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
-            <Button onClick={() => handleZoomFactor(0.1)} variant="ghost" size="icon">
-              <Plus size="14" />
-            </Button>
-            <Button onClick={() => handleZoomFactor(0, true)} className="ml-2" variant="ghost" size="icon">
-              <ResetIcon size="14" />
-            </Button>
-          </ZoomButtonGroup>
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle style={{ justifyContent: 'flex-start', gap: 5 }}>
-          {t('settings.display.font.title')} <TextBadge text="New" />
-        </SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.font.global')}</SettingRowTitle>
-          <SelectRow>
-            <Select
-              style={{ width: 280 }}
-              placeholder={t('settings.display.font.select')}
-              options={[
-                {
-                  label: (
-                    <span style={{ fontFamily: 'Ubuntu, -apple-system, system-ui, Arial, sans-serif' }}>
-                      {t('settings.display.font.default')}
-                    </span>
-                  ),
-                  value: ''
-                },
-                ...fontList.map((font) => ({ label: renderFontOption(font), value: font }))
-              ]}
-              value={userTheme.userFontFamily || ''}
-              onChange={(font) => handleUserFontChange(font)}
-              showSearch
-              getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
-            />
-            <Button onClick={() => handleUserFontChange('')} className="ml-2" variant="ghost" size="icon">
-              <ResetIcon size="14" />
-            </Button>
-          </SelectRow>
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.display.font.code')}</SettingRowTitle>
-          <SelectRow>
-            <Select
-              style={{ width: 280 }}
-              placeholder={t('settings.display.font.select')}
-              options={[
-                {
-                  label: (
-                    <span style={{ fontFamily: 'Ubuntu, -apple-system, system-ui, Arial, sans-serif' }}>
-                      {t('settings.display.font.default')}
-                    </span>
-                  ),
-                  value: ''
-                },
-                ...fontList.map((font) => ({ label: renderFontOption(font), value: font }))
-              ]}
-              value={userTheme.userCodeFontFamily || ''}
-              onChange={(font) => handleUserCodeFontChange(font)}
-              showSearch
-              getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
-            />
-            <Button onClick={() => handleUserCodeFontChange('')} className="ml-2" variant="ghost" size="icon">
-              <ResetIcon size="14" />
-            </Button>
-          </SelectRow>
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.display.topic.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.topic.position.label')}</SettingRowTitle>
-          <Segmented
-            value={topicPosition || 'right'}
-            shape="round"
-            onChange={setTopicPosition}
-            options={[
-              { value: 'left', label: t('settings.topic.position.left') },
-              { value: 'right', label: t('settings.topic.position.right') }
-            ]}
-          />
-        </SettingRow>
-        <SettingDivider />
-        {topicPosition === 'left' && (
-          <>
-            <SettingRow>
-              <SettingRowTitle>{t('settings.advanced.auto_switch_to_topics')}</SettingRowTitle>
-              <Switch
-                checked={clickAssistantToShowTopic}
-                onCheckedChange={(checked) => setClickAssistantToShowTopic(checked)}
-              />
-            </SettingRow>
-            <SettingDivider />
-          </>
-        )}
-        <SettingRow>
-          <SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
-          <Switch checked={showTopicTime} onCheckedChange={(checked) => setShowTopicTime(checked)} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.topic.pin_to_top')}</SettingRowTitle>
-          <Switch checked={pinTopicsToTop} onCheckedChange={(checked) => setPinTopicsToTop(checked)} />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.display.assistant.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.assistant.icon.type.label')}</SettingRowTitle>
-          <Segmented
-            value={assistantIconType}
-            shape="round"
-            onChange={(value) => setAssistantIconType(value as AssistantIconType)}
-            options={assistantIconTypeOptions}
-          />
-        </SettingRow>
-      </SettingGroup>
-      {navbarPosition === 'left' && (
-        <SettingGroup theme={theme}>
-          <SettingTitle
-            style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
-            <span>{t('settings.display.sidebar.title')}</span>
-            <ResetButtonWrapper>
-              <Button onClick={handleReset}>{t('common.reset')}</Button>
-            </ResetButtonWrapper>
-          </SettingTitle>
-          <SettingDivider />
-          <SidebarIconsManager
-            visibleIcons={visibleIcons}
-            invisibleIcons={invisibleIcons}
-            setVisibleIcons={setVisibleIcons}
-            setInvisibleIcons={setInvisibleIcons}
-          />
-        </SettingGroup>
-      )}
-      <SettingGroup theme={theme}>
-        <SettingTitle>
-          {t('settings.display.custom.css.label')}
-          <TitleExtra onClick={() => window.api.openWebsite('https://cherrycss.com/')}>
-            {t('settings.display.custom.css.cherrycss')}
-          </TitleExtra>
-        </SettingTitle>
-        <SettingDivider />
-        <CodeEditor
-          theme={activeCmTheme}
-          fontSize={fontSize - 1}
-          value={customCss}
-          language="css"
-          placeholder={t('settings.display.custom.css.placeholder')}
-          onChange={(value) => setCustomCss(value)}
-          height="60vh"
-          expanded={false}
-          wrapped
-          options={{
-            autocompletion: true,
-            lineNumbers: true,
-            foldGutter: true,
-            keymap: true
-          }}
-          style={{
-            outline: '0.5px solid var(--color-border)',
-            borderRadius: '5px'
-          }}
-        />
-      </SettingGroup>
-    </SettingContainer>
-  )
-}
-
-const TitleExtra = styled.div`
-  font-size: 12px;
-  cursor: pointer;
-  text-decoration: underline;
-  opacity: 0.7;
-`
-const ResetButtonWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-const ZoomButtonGroup = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 210px;
-`
-const ZoomValue = styled.span`
-  width: 40px;
-  text-align: center;
-  margin: 0 5px;
-`
-
-const SelectRow = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 380px;
-`
-
-export default DisplaySettings
diff --git a/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx b/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
deleted file mode 100644
index 9ca3b3e414..0000000000
--- a/src/renderer/src/pages/settings/DisplaySettings/SidebarIconsManager.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import { CloseOutlined } from '@ant-design/icons'
-import type { DraggableProvided, DroppableProvided, DropResult } from '@hello-pangea/dnd'
-import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
-import { OpenClawSidebarIcon } from '@renderer/components/Icons/SVGIcon'
-import { getSidebarIconLabel } from '@renderer/i18n/label'
-import type { SidebarIcon } from '@shared/data/preference/preferenceTypes'
-import {
-  Code,
-  FileSearch,
-  Folder,
-  Languages,
-  LayoutGrid,
-  MessageSquareQuote,
-  MousePointerClick,
-  NotepadText,
-  Palette,
-  Sparkle
-} from 'lucide-react'
-import type { FC, ReactNode } from 'react'
-import { useCallback, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-interface SidebarIconsManagerProps {
-  visibleIcons: SidebarIcon[]
-  invisibleIcons: SidebarIcon[]
-  setVisibleIcons: (icons: SidebarIcon[]) => void
-  setInvisibleIcons: (icons: SidebarIcon[]) => void
-}
-
-const SidebarIconsManager: FC<SidebarIconsManagerProps> = ({
-  visibleIcons,
-  invisibleIcons,
-  setVisibleIcons,
-  setInvisibleIcons
-}) => {
-  const { t } = useTranslation()
-
-  const onDragEnd = useCallback(
-    (result: DropResult) => {
-      if (!result.destination) return
-
-      const { source, destination } = result
-
-      // 如果是chat图标且目标是disabled区域,则不允许移动并提示
-      const draggedItem = source.droppableId === 'visible' ? visibleIcons[source.index] : invisibleIcons[source.index]
-      if (draggedItem === 'assistants' && destination.droppableId === 'disabled') {
-        window.toast.warning(t('settings.display.sidebar.chat.hiddenMessage'))
-        return
-      }
-
-      if (source.droppableId === destination.droppableId) {
-        const list = source.droppableId === 'visible' ? [...visibleIcons] : [...invisibleIcons]
-        const [removed] = list.splice(source.index, 1)
-        list.splice(destination.index, 0, removed)
-
-        if (source.droppableId === 'visible') {
-          setVisibleIcons(list)
-        } else {
-          setInvisibleIcons(list)
-        }
-        return
-      }
-
-      const sourceList = source.droppableId === 'visible' ? [...visibleIcons] : [...invisibleIcons]
-      const destList = destination.droppableId === 'visible' ? [...visibleIcons] : [...invisibleIcons]
-
-      const [removed] = sourceList.splice(source.index, 1)
-      const targetList = destList.filter((icon) => icon !== removed)
-      targetList.splice(destination.index, 0, removed)
-
-      const newVisibleIcons = destination.droppableId === 'visible' ? targetList : sourceList
-      const newInvisibleIcons = destination.droppableId === 'disabled' ? targetList : sourceList
-
-      setVisibleIcons(newVisibleIcons)
-      setInvisibleIcons(newInvisibleIcons)
-    },
-    [visibleIcons, invisibleIcons, setVisibleIcons, setInvisibleIcons, t]
-  )
-
-  const onMoveIcon = useCallback(
-    (icon: SidebarIcon, fromList: 'visible' | 'disabled') => {
-      // 如果是chat图标且要移动到disabled列表,则不允许并提示
-      if (icon === 'assistants' && fromList === 'visible') {
-        window.toast.warning(t('settings.display.sidebar.chat.hiddenMessage'))
-        return
-      }
-
-      if (fromList === 'visible') {
-        const newVisibleIcons = visibleIcons.filter((i) => i !== icon)
-        const newInvisibleIcons = invisibleIcons.some((i) => i === icon) ? invisibleIcons : [...invisibleIcons, icon]
-
-        setVisibleIcons(newVisibleIcons)
-        setInvisibleIcons(newInvisibleIcons)
-      } else {
-        const newInvisibleIcons = invisibleIcons.filter((i) => i !== icon)
-        const newVisibleIcons = visibleIcons.some((i) => i === icon) ? visibleIcons : [...visibleIcons, icon]
-
-        setInvisibleIcons(newInvisibleIcons)
-        setVisibleIcons(newVisibleIcons)
-      }
-    },
-    [t, visibleIcons, invisibleIcons, setVisibleIcons, setInvisibleIcons]
-  )
-
-  // 使用useMemo缓存图标映射
-  const iconMap = useMemo(
-    () =>
-      ({
-        assistants: <MessageSquareQuote size={16} />,
-        agents: <MousePointerClick size={16} />,
-        store: <Sparkle size={16} />,
-        paintings: <Palette size={16} />,
-        translate: <Languages size={16} />,
-        mini_app: <LayoutGrid size={16} />,
-        knowledge: <FileSearch size={16} />,
-        files: <Folder size={16} />,
-        notes: <NotepadText size={16} />,
-        code_tools: <Code size={16} />,
-        openclaw: <OpenClawSidebarIcon size={16} />
-      }) satisfies Record<SidebarIcon, ReactNode>,
-    []
-  )
-
-  const renderIcon = (icon: SidebarIcon) => iconMap[icon] || <i className={`iconfont ${icon}`} />
-
-  return (
-    <DragDropContext onDragEnd={onDragEnd}>
-      <IconSection>
-        <IconColumn>
-          <h4>{t('settings.display.sidebar.visible')}</h4>
-          <Droppable droppableId="visible">
-            {(provided: DroppableProvided) => (
-              <IconList ref={provided.innerRef} {...provided.droppableProps}>
-                {visibleIcons.map((icon, index) => (
-                  <Draggable key={icon} draggableId={icon} index={index}>
-                    {(provided: DraggableProvided) => (
-                      <IconItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                        <IconContent>
-                          {renderIcon(icon)}
-                          <span>{getSidebarIconLabel(icon)}</span>
-                        </IconContent>
-                        {icon !== 'assistants' && (
-                          <CloseButton onClick={() => onMoveIcon(icon, 'visible')}>
-                            <CloseOutlined />
-                          </CloseButton>
-                        )}
-                      </IconItem>
-                    )}
-                  </Draggable>
-                ))}
-                {provided.placeholder}
-              </IconList>
-            )}
-          </Droppable>
-        </IconColumn>
-        <IconColumn>
-          <h4>{t('settings.display.sidebar.disabled')}</h4>
-          <Droppable droppableId="disabled">
-            {(provided: DroppableProvided) => (
-              <IconList ref={provided.innerRef} {...provided.droppableProps}>
-                {invisibleIcons.length === 0 ? (
-                  <EmptyPlaceholder>{t('settings.display.sidebar.empty')}</EmptyPlaceholder>
-                ) : (
-                  invisibleIcons.map((icon, index) => (
-                    <Draggable key={icon} draggableId={icon} index={index}>
-                      {(provided: DraggableProvided) => (
-                        <IconItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
-                          <IconContent>
-                            {renderIcon(icon)}
-                            <span>{getSidebarIconLabel(icon)}</span>
-                          </IconContent>
-                          <CloseButton onClick={() => onMoveIcon(icon, 'disabled')}>
-                            <CloseOutlined />
-                          </CloseButton>
-                        </IconItem>
-                      )}
-                    </Draggable>
-                  ))
-                )}
-                {provided.placeholder}
-              </IconList>
-            )}
-          </Droppable>
-        </IconColumn>
-      </IconSection>
-    </DragDropContext>
-  )
-}
-
-// Styled components remain the same
-const IconSection = styled.div`
-  display: flex;
-  gap: 20px;
-  padding: 10px;
-  background: var(--color-background);
-`
-
-const IconColumn = styled.div`
-  flex: 1;
-
-  h4 {
-    margin-bottom: 10px;
-    color: var(--color-text);
-    font-weight: normal;
-  }
-`
-
-const IconList = styled.div`
-  height: 400px;
-  min-height: 400px;
-  padding: 10px;
-  background: var(--color-background-soft);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-`
-
-const IconItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  margin-bottom: 8px;
-  background: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  cursor: move;
-`
-
-const IconContent = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-
-  .iconfont {
-    font-size: 16px;
-    color: var(--color-text);
-  }
-
-  span {
-    color: var(--color-text);
-  }
-`
-
-const CloseButton = styled.div`
-  cursor: pointer;
-  color: var(--color-text-2);
-  opacity: 0;
-  transition: all 0.2s;
-
-  &:hover {
-    color: var(--color-text);
-  }
-
-  ${IconItem}:hover & {
-    opacity: 1;
-  }
-`
-
-const EmptyPlaceholder = styled.div`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-2);
-  text-align: center;
-  padding: 20px;
-  font-size: 14px;
-`
-
-export default SidebarIconsManager
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrImageSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrImageSettings.tsx
index e26edc2568..c36c6aaa89 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrImageSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrImageSettings.tsx
@@ -1,3 +1,4 @@
+import { Alert, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { ErrorTag } from '@renderer/components/Tags/ErrorTag'
 import { isMac, isWin } from '@renderer/config/constant'
@@ -5,7 +6,6 @@ import { useOcrProviders } from '@renderer/hooks/useOcrProvider'
 import type { ImageOcrProvider, OcrProvider } from '@renderer/types'
 import { BuiltinOcrProviderIds, isImageOcrProvider } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils'
-import { Alert, Select, Skeleton } from 'antd'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWRImmutable from 'swr/immutable'
@@ -94,14 +94,27 @@ const OcrProviderSelector = ({ isLoading, error, value, options, onChange }: Ocr
   const { t } = useTranslation()
 
   if (isLoading) {
-    return <Skeleton.Input active style={{ width: '200px', height: '32px' }} />
+    return <Skeleton className="h-8 w-[200px]" />
   }
 
   if (error) {
     return <Alert type="error" message={t('ocr.error.provider.get_providers')} description={getErrorMessage(error)} />
   }
 
-  return <Select value={value} style={{ width: '200px' }} onChange={onChange} options={options} />
+  return (
+    <Select value={value} onValueChange={onChange}>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
 }
 
 export default OcrImageSettings
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrOVSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrOVSettings.tsx
index 8fe676361c..68a5c7ac99 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrOVSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrOVSettings.tsx
@@ -1,7 +1,6 @@
-import { Flex } from '@cherrystudio/ui'
+import { Badge, Flex } from '@cherrystudio/ui'
 import { useOcrProvider } from '@renderer/hooks/useOcrProvider'
 import { BuiltinOcrProviderIds, isOcrOVProvider } from '@renderer/types'
-import { Tag } from 'antd'
 import { useTranslation } from 'react-i18next'
 
 import { SettingRow, SettingRowTitle } from '..'
@@ -20,10 +19,10 @@ export const OcrOVSettings = () => {
         <SettingRowTitle>
           <Flex className="items-center gap-4">{t('settings.tool.ocr.common.langs')}</Flex>
         </SettingRowTitle>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <Tag>🇬🇧 {t('languages.english')}</Tag>
-          <Tag>🇨🇳 {t('languages.chinese')}</Tag>
-          <Tag>🇭🇰 {t('languages.chinese-traditional')}</Tag>
+        <div className="flex gap-2">
+          <Badge variant="secondary">🇬🇧 {t('languages.english')}</Badge>
+          <Badge variant="secondary">🇨🇳 {t('languages.chinese')}</Badge>
+          <Badge variant="secondary">🇭🇰 {t('languages.chinese-traditional')}</Badge>
         </div>
       </SettingRow>
     </>
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrPpocrSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrPpocrSettings.tsx
index 0dbf1f3d1e..542fbac673 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrPpocrSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrPpocrSettings.tsx
@@ -1,7 +1,7 @@
+import { Input } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { useOcrProvider } from '@renderer/hooks/useOcrProvider'
 import { BuiltinOcrProviderIds, isOcrPpocrProvider } from '@renderer/types'
-import { Input } from 'antd'
 import { startTransition, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -56,7 +56,8 @@ export const OcrPpocrSettings = () => {
         <SettingRowTitle style={{ width: 150 }}>
           {t('settings.tool.ocr.paddleocr.aistudio_access_token')}
         </SettingRowTitle>
-        <Input.Password
+        <Input
+          type="password"
           value={accessToken}
           onChange={onAccessTokenChange}
           onBlur={onBlur}
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrProviderSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrProviderSettings.tsx
index a99f91d096..4e9b445935 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrProviderSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrProviderSettings.tsx
@@ -1,13 +1,11 @@
 // import { loggerService } from '@logger'
-import { Flex } from '@cherrystudio/ui'
+import { Divider, Flex } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { isMac, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useOcrProviders } from '@renderer/hooks/useOcrProvider'
 import type { OcrProvider } from '@renderer/types'
 import { isBuiltinOcrProvider, isOcrSystemProvider } from '@renderer/types'
-import { Divider } from 'antd'
-import styled from 'styled-components'
 
 import { SettingGroup, SettingTitle } from '..'
 import { OcrOVSettings } from './OcrOVSettings'
@@ -19,9 +17,10 @@ import { OcrTesseractSettings } from './OcrTesseractSettings'
 
 type Props = {
   provider: OcrProvider
+  embedded?: boolean
 }
 
-const OcrProviderSettings = ({ provider }: Props) => {
+const OcrProviderSettings = ({ provider, embedded = false }: Props) => {
   const { theme: themeMode } = useTheme()
   const { OcrProviderLogo, getOcrProviderName } = useOcrProviders()
 
@@ -48,12 +47,20 @@ const OcrProviderSettings = ({ provider }: Props) => {
     }
   }
 
+  if (embedded) {
+    return (
+      <ErrorBoundary>
+        <ProviderSettings />
+      </ErrorBoundary>
+    )
+  }
+
   return (
     <SettingGroup theme={themeMode}>
       <SettingTitle>
         <Flex className="items-center gap-2">
           <OcrProviderLogo provider={provider} />
-          <ProviderName> {getOcrProviderName(provider)}</ProviderName>
+          <span className="font-medium text-sm">{getOcrProviderName(provider)}</span>
         </Flex>
       </SettingTitle>
       <Divider style={{ width: '100%', margin: '10px 0' }} />
@@ -64,9 +71,4 @@ const OcrProviderSettings = ({ provider }: Props) => {
   )
 }
 
-const ProviderName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-`
-
 export default OcrProviderSettings
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrSettings.tsx
index 077451dd4d..2e37de9f06 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrSettings.tsx
@@ -1,10 +1,9 @@
 import { PictureOutlined } from '@ant-design/icons'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useOcrProviders } from '@renderer/hooks/useOcrProvider'
 import type { OcrProvider } from '@renderer/types'
-import type { TabsProps } from 'antd'
-import { Tabs } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -19,21 +18,22 @@ const OcrSettings: FC = () => {
   const { imageProvider } = useOcrProviders()
   const [provider, setProvider] = useState<OcrProvider>(imageProvider) // since default to image provider
 
-  const tabs: TabsProps['items'] = [
-    {
-      key: 'image',
-      label: t('settings.tool.ocr.image.title'),
-      icon: <PictureOutlined />,
-      children: <OcrImageSettings setProvider={setProvider} />
-    }
-  ]
-
   return (
     <ErrorBoundary>
       <SettingGroup theme={themeMode}>
         <SettingTitle>{t('settings.tool.ocr.title')}</SettingTitle>
         <SettingDivider />
-        <Tabs defaultActiveKey="image" items={tabs} />
+        <Tabs defaultValue="image">
+          <TabsList>
+            <TabsTrigger value="image">
+              <PictureOutlined />
+              {t('settings.tool.ocr.image.title')}
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="image">
+            <OcrImageSettings setProvider={setProvider} />
+          </TabsContent>
+        </Tabs>
       </SettingGroup>
       <ErrorBoundary>
         <OcrProviderSettings provider={provider} />
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx
index dff948bfbb..aaf3c1efb6 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrSystemSettings.tsx
@@ -1,20 +1,15 @@
-// import { loggerService } from '@logger'
-import { Flex } from '@cherrystudio/ui'
-import { InfoTooltip } from '@cherrystudio/ui'
+import { Combobox, type ComboboxOption, Flex, InfoTooltip } from '@cherrystudio/ui'
 import { SuccessTag } from '@renderer/components/Tags/SuccessTag'
 import { isMac, isWin } from '@renderer/config/constant'
 import { useOcrProvider } from '@renderer/hooks/useOcrProvider'
 import useTranslate from '@renderer/hooks/useTranslate'
 import type { TranslateLanguageCode } from '@renderer/types'
 import { BuiltinOcrProviderIds, isOcrSystemProvider } from '@renderer/types'
-import { Select } from 'antd'
 import { startTransition, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingRow, SettingRowTitle } from '..'
 
-// const logger = loggerService.withContext('OcrSystemSettings')
-
 export const OcrSystemSettings = () => {
   const { t } = useTranslation()
   // 和翻译自定义语言耦合了，应该还ok
@@ -41,15 +36,40 @@ export const OcrSystemSettings = () => {
     [translateLanguages]
   )
 
-  const onChange = useCallback((value: TranslateLanguageCode[]) => {
-    startTransition(() => {
-      setLangs(value)
-    })
-  }, [])
+  const renderSelectedLanguages = useCallback(
+    (selectedValue: string | string[], availableOptions: ComboboxOption[]) => {
+      const selectedValues = Array.isArray(selectedValue) ? selectedValue : []
+      if (selectedValues.length === 0) return <span className="text-muted-foreground">{t('common.select')}</span>
 
-  const onBlur = useCallback(() => {
-    updateConfig({ langs })
-  }, [langs, updateConfig])
+      const firstValue = selectedValues[0]
+      const firstOption = availableOptions.find((option) => option.value === firstValue)
+
+      return (
+        <div className="flex min-w-0 items-center gap-1">
+          <span className="truncate rounded bg-primary/10 px-2 py-0.5 text-primary text-xs">
+            {firstOption?.label ?? firstValue}
+          </span>
+          {selectedValues.length > 1 && (
+            <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+              +{selectedValues.length - 1}
+            </span>
+          )}
+        </div>
+      )
+    },
+    [t]
+  )
+
+  const onChange = useCallback(
+    (value: string | string[]) => {
+      const nextLangs = Array.isArray(value) ? value : []
+      startTransition(() => {
+        setLangs(nextLangs)
+      })
+      updateConfig({ langs: nextLangs })
+    },
+    [updateConfig]
+  )
 
   return (
     <>
@@ -63,14 +83,16 @@ export const OcrSystemSettings = () => {
         <div style={{ display: 'flex', gap: '8px' }}>
           {isMac && <SuccessTag message={t('settings.tool.ocr.image.system.no_need_configure')} />}
           {isWin && (
-            <Select
-              mode="multiple"
-              style={{ width: '100%', minWidth: 200 }}
+            <Combobox
+              multiple
+              width={220}
               value={langs}
               options={options}
               onChange={onChange}
-              onBlur={onBlur}
-              maxTagCount={1}
+              renderValue={renderSelectedLanguages}
+              searchable={false}
+              placeholder={t('common.select')}
+              emptyText={t('common.no_results')}
             />
           )}
         </div>
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx
index 0cf8ef9eb9..2e9c93243f 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/OcrTesseractSettings.tsx
@@ -1,20 +1,14 @@
-// import { loggerService } from '@logger'
-import { Flex } from '@cherrystudio/ui'
-import { InfoTooltip } from '@cherrystudio/ui'
-import CustomTag from '@renderer/components/Tags/CustomTag'
+import { Combobox, type ComboboxOption, Flex, InfoTooltip } from '@cherrystudio/ui'
 import { TESSERACT_LANG_MAP } from '@renderer/config/ocr'
 import { useOcrProvider } from '@renderer/hooks/useOcrProvider'
 import useTranslate from '@renderer/hooks/useTranslate'
 import type { TesseractLangCode } from '@renderer/types'
 import { BuiltinOcrProviderIds, isOcrTesseractProvider } from '@renderer/types'
-import { Select } from 'antd'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingRow, SettingRowTitle } from '..'
 
-// const logger = loggerService.withContext('OcrTesseractSettings')
-
 export const OcrTesseractSettings = () => {
   const { t } = useTranslation()
   const { provider, updateConfig } = useOcrProvider(BuiltinOcrProviderIds.tesseract)
@@ -46,19 +40,43 @@ export const OcrTesseractSettings = () => {
     [langs]
   )
 
-  const onChange = useCallback((values: TesseractLangCode[]) => {
-    setLangs(() => {
-      const newLangs = {}
-      values.forEach((v) => {
-        newLangs[v] = true
-      })
-      return newLangs
-    })
-  }, [])
+  const renderSelectedLanguages = useCallback(
+    (selectedValue: string | string[], availableOptions: ComboboxOption[]) => {
+      const selectedValues = Array.isArray(selectedValue) ? selectedValue : []
+      if (selectedValues.length === 0) return <span className="text-muted-foreground">{t('common.select')}</span>
 
-  const onBlur = useCallback(() => {
-    updateConfig({ langs })
-  }, [langs, updateConfig])
+      const firstValue = selectedValues[0]
+      const firstOption = availableOptions.find((option) => option.value === firstValue)
+
+      return (
+        <div className="flex min-w-0 items-center gap-1">
+          <span className="truncate rounded bg-primary/10 px-2 py-0.5 text-primary text-xs">
+            {firstOption?.label ?? firstValue}
+          </span>
+          {selectedValues.length > 1 && (
+            <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-muted-foreground text-xs">
+              +{selectedValues.length - 1}
+            </span>
+          )}
+        </div>
+      )
+    },
+    [t]
+  )
+
+  const onChange = useCallback(
+    (selectedValue: string | string[]) => {
+      const values = (Array.isArray(selectedValue) ? selectedValue : []) as TesseractLangCode[]
+      const nextLangs = values.reduce<Partial<Record<TesseractLangCode, boolean>>>((acc, lang) => {
+        acc[lang] = true
+        return acc
+      }, {})
+
+      setLangs(nextLangs)
+      updateConfig({ langs: nextLangs })
+    },
+    [updateConfig]
+  )
 
   return (
     <>
@@ -70,17 +88,16 @@ export const OcrTesseractSettings = () => {
           </Flex>
         </SettingRowTitle>
         <div style={{ display: 'flex', gap: '8px' }}>
-          <Select
-            mode="multiple"
-            style={{ minWidth: 200 }}
+          <Combobox
+            multiple
+            width={220}
             value={value}
             options={options}
-            maxTagCount={1}
             onChange={onChange}
-            onBlur={onBlur}
-            // use tag render to disable default close action
-            // don't modify this, because close action won't trigger onBlur to update state
-            tagRender={(props) => <CustomTag color="var(--color-text)">{props.label}</CustomTag>}
+            renderValue={renderSelectedLanguages}
+            searchable={false}
+            placeholder={t('common.select')}
+            emptyText={t('common.no_results')}
           />
         </div>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
index 828d25dfbb..e345b7f55d 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
@@ -1,26 +1,31 @@
 import { ExportOutlined } from '@ant-design/icons'
-import { Button, Flex, Tooltip } from '@cherrystudio/ui'
+import { Button, Divider, Flex, Input, Tooltip } from '@cherrystudio/ui'
 import { LogoAvatar } from '@renderer/components/Icons'
 import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
 import { getPreprocessProviderLogo, PREPROCESS_PROVIDER_CONFIG } from '@renderer/config/preprocessProviders'
 import { usePreprocessProvider } from '@renderer/hooks/usePreprocess'
 import type { PreprocessProvider } from '@renderer/types'
 import { formatApiKeys, hasObjectKey } from '@renderer/utils'
-import { Divider, Input } from 'antd'
-import Link from 'antd/es/typography/Link'
 import { List } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
-import { SettingHelpLink, SettingHelpText, SettingHelpTextRow, SettingSubtitle, SettingTitle } from '..'
+import {
+  SettingHelpLink,
+  SettingHelpText,
+  SettingHelpTextRow,
+  SettingSubtitle,
+  SettingTitle,
+  SettingTitleExternalLink
+} from '..'
 
 interface Props {
   provider: PreprocessProvider
+  hideHeader?: boolean
 }
 
-const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
+const PreprocessProviderSettings: FC<Props> = ({ provider: _provider, hideHeader = false }) => {
   const { provider: preprocessProvider, updateProvider } = usePreprocessProvider(_provider.id)
   const { t } = useTranslation()
   const [apiKey, setApiKey] = useState(preprocessProvider.apiKey || '')
@@ -71,21 +76,25 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
 
   return (
     <>
-      <SettingTitle>
-        <Flex className="items-center gap-2">
-          <LogoAvatar logo={getPreprocessProviderLogo(preprocessProvider.id)} size={16} />
-          <ProviderName> {preprocessProvider.name}</ProviderName>
-          {officialWebsite && preprocessProviderConfig?.websites && (
-            <Link target="_blank" href={preprocessProviderConfig.websites.official}>
-              <ExportOutlined className="text-[--color-text] text-[12px]" />
-            </Link>
-          )}
-        </Flex>
-      </SettingTitle>
-      <Divider className="my-[10px] w-full" />
+      {!hideHeader && (
+        <>
+          <SettingTitle>
+            <Flex className="items-center gap-2">
+              <LogoAvatar logo={getPreprocessProviderLogo(preprocessProvider.id)} size={16} />
+              <span className="font-medium text-sm">{preprocessProvider.name}</span>
+              {officialWebsite && preprocessProviderConfig?.websites && (
+                <SettingTitleExternalLink href={preprocessProviderConfig.websites.official}>
+                  <ExportOutlined className="text-[--color-foreground] text-[12px]" />
+                </SettingTitleExternalLink>
+              )}
+            </Flex>
+          </SettingTitle>
+          <Divider className="my-2.5 w-full" />
+        </>
+      )}
       {hasObjectKey(preprocessProvider, 'apiKey') && (
         <>
-          <SettingSubtitle className="mt-[5px] mb-[10px] flex items-center justify-between">
+          <SettingSubtitle className="mt-1.25 mb-2.5 flex items-center justify-between">
             {preprocessProvider.id === 'paddleocr'
               ? t('settings.tool.preprocess.paddleocr.aistudio_access_token')
               : t('settings.provider.api_key.label')}
@@ -98,7 +107,8 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
             )}
           </SettingSubtitle>
           <Flex className="gap-2">
-            <Input.Password
+            <Input
+              type="password"
               value={apiKey}
               placeholder={
                 preprocessProvider.id === 'paddleocr'
@@ -108,12 +118,11 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
               onChange={(e) => setApiKey(formatApiKeys(e.target.value))}
               onBlur={onUpdateApiKey}
               spellCheck={false}
-              type="password"
               autoFocus={apiKey === ''}
             />
           </Flex>
           {preprocessProvider.id !== 'paddleocr' && (
-            <SettingHelpTextRow className="mt-[5px] justify-between">
+            <SettingHelpTextRow className="mt-1.25 justify-between">
               <SettingHelpLink target="_blank" href={apiKeyWebsite}>
                 {t('settings.provider.get_api_key')}
               </SettingHelpLink>
@@ -125,7 +134,7 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
 
       {hasObjectKey(preprocessProvider, 'apiHost') && (
         <>
-          <SettingSubtitle className="mt-[5px] mb-[10px]">
+          <SettingSubtitle className="mt-1.25 mb-2.5">
             {preprocessProvider.id === 'paddleocr'
               ? t('settings.tool.preprocess.paddleocr.api_url')
               : t('settings.provider.api_host')}
@@ -184,7 +193,7 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
           <SettingDivider style={{ marginTop: 15, marginBottom: 12 }} />
           <SettingRow>
             <SettingRowTitle>{t('settings.tool.preprocess.mac_system_ocr_options.min_confidence')}</SettingRowTitle>
-            <InputNumber
+            <EditableNumber
               value={options.minConfidence}
               onChange={(value) => onUpdateOptions('minConfidence', value)}
               min={0}
@@ -198,9 +207,4 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
   )
 }
 
-const ProviderName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-`
-
 export default PreprocessProviderSettings
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessSettings.tsx
index 5172c68922..97d4e3268a 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessSettings.tsx
@@ -1,7 +1,7 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultPreprocessProvider, usePreprocessProviders } from '@renderer/hooks/usePreprocess'
 import type { PreprocessProvider } from '@renderer/types'
-import { Select } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -35,16 +35,18 @@ const PreprocessSettings: FC = () => {
           <div style={{ display: 'flex', gap: '8px' }}>
             <Select
               value={selectedProvider?.id}
-              style={{ width: '200px' }}
-              onChange={(value: string) => updateSelectedPreprocessProvider(value)}
-              placeholder={t('settings.tool.preprocess.provider_placeholder')}
-              options={preprocessProviders.map((p) => ({
-                value: p.id,
-                label: p.name
-                // 由于system字段实际未使用，先注释掉
-                // disabled: !isMac && p.id === 'system' // 在非 Mac 系统下禁用 system 选项
-              }))}
-            />
+              onValueChange={(value: string) => updateSelectedPreprocessProvider(value)}>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder={t('settings.tool.preprocess.provider_placeholder')} />
+              </SelectTrigger>
+              <SelectContent>
+                {preprocessProviders.map((p) => (
+                  <SelectItem key={p.id} value={p.id}>
+                    {p.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </SettingRow>
       </SettingGroup>
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/index.tsx b/src/renderer/src/pages/settings/DocProcessSettings/index.tsx
index 3553bdc26c..4f547b59d6 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/index.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/index.tsx
@@ -1,18 +1,288 @@
+import { Badge, Button, MenuDivider, MenuItem, MenuList } from '@cherrystudio/ui'
+import { LogoAvatar } from '@renderer/components/Icons'
+import Scrollbar from '@renderer/components/Scrollbar'
+import { isMac } from '@renderer/config/constant'
+import { getPreprocessProviderLogo, PREPROCESS_PROVIDER_CONFIG } from '@renderer/config/preprocessProviders'
 import { useTheme } from '@renderer/context/ThemeProvider'
+import { useOcrProviders } from '@renderer/hooks/useOcrProvider'
+import { useDefaultPreprocessProvider, usePreprocessProviders } from '@renderer/hooks/usePreprocess'
+import type { OcrProvider, PreprocessProvider } from '@renderer/types'
+import { isBuiltinOcrProvider, isImageOcrProvider } from '@renderer/types'
+import { ExternalLink } from 'lucide-react'
 import type { FC } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
-import { SettingContainer } from '..'
-import OcrSettings from './OcrSettings'
-import PreprocessSettings from './PreprocessSettings'
+import {
+  settingsContentBodyClassName,
+  settingsContentScrollClassName,
+  settingsSubmenuDividerClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  settingsSubmenuSectionTitleClassName,
+  SettingTitleExternalLink
+} from '..'
+import OcrProviderSettings from './OcrProviderSettings'
+import PreprocessProviderSettings from './PreprocessProviderSettings'
+
+type DocProcessMenuEntry =
+  | {
+      key: string
+      kind: 'ocr'
+      provider: OcrProvider
+    }
+  | {
+      key: string
+      kind: 'preprocess'
+      provider: PreprocessProvider
+    }
+
+const OCR_PROVIDER_ORDER = ['system', 'tesseract', 'paddleocr', 'ovocr']
+const PREPROCESS_PROVIDER_ORDER = ['mistral', 'mineru', 'doc2x', 'open-mineru', 'paddleocr']
+
+const sortByConfiguredOrder = <T extends { id: string }>(items: T[], order: string[]) =>
+  [...items].sort((a, b) => {
+    const aIndex = order.indexOf(a.id)
+    const bIndex = order.indexOf(b.id)
+
+    if (aIndex === -1 && bIndex === -1) {
+      return a.id.localeCompare(b.id)
+    }
+    if (aIndex === -1) {
+      return 1
+    }
+    if (bIndex === -1) {
+      return -1
+    }
+
+    return aIndex - bIndex
+  })
 
 const DocProcessSettings: FC = () => {
+  const { t } = useTranslation()
   const { theme: themeMode } = useTheme()
+  const {
+    providers: ocrProviders,
+    imageProvider,
+    setImageProviderId,
+    getOcrProviderName,
+    OcrProviderLogo
+  } = useOcrProviders()
+  const { preprocessProviders } = usePreprocessProviders()
+  const { provider: defaultPreprocessProvider, setDefaultPreprocessProvider } = useDefaultPreprocessProvider()
+
+  const visibleOcrProviders = useMemo(
+    () =>
+      sortByConfiguredOrder(
+        ocrProviders.filter((provider) => isImageOcrProvider(provider) && provider.id !== 'ovocr'),
+        OCR_PROVIDER_ORDER
+      ),
+    [ocrProviders]
+  )
+
+  const visiblePreprocessProviders = useMemo(
+    () => sortByConfiguredOrder(preprocessProviders, PREPROCESS_PROVIDER_ORDER),
+    [preprocessProviders]
+  )
+
+  const menuEntries = useMemo<DocProcessMenuEntry[]>(
+    () => [
+      ...visibleOcrProviders.map((provider) => ({
+        key: `ocr:${provider.id}`,
+        kind: 'ocr' as const,
+        provider
+      })),
+      ...visiblePreprocessProviders.map((provider) => ({
+        key: `preprocess:${provider.id}`,
+        kind: 'preprocess' as const,
+        provider
+      }))
+    ],
+    [visibleOcrProviders, visiblePreprocessProviders]
+  )
+
+  const [activeKey, setActiveKey] = useState(() => menuEntries[0]?.key ?? '')
+
+  useEffect(() => {
+    if (!menuEntries.some((entry) => entry.key === activeKey)) {
+      setActiveKey(menuEntries[0]?.key ?? '')
+    }
+  }, [activeKey, menuEntries])
+
+  const activeEntry = menuEntries.find((entry) => entry.key === activeKey)
+
+  const isActiveDefault =
+    activeEntry?.kind === 'ocr'
+      ? imageProvider?.id === activeEntry.provider.id
+      : defaultPreprocessProvider?.id === activeEntry?.provider.id
+
+  const providerDescription = useMemo(() => {
+    if (!activeEntry) {
+      return ''
+    }
+
+    if (activeEntry.kind === 'ocr') {
+      if (!isBuiltinOcrProvider(activeEntry.provider)) {
+        return t('settings.tool.ocr.title')
+      }
+
+      switch (activeEntry.provider.id) {
+        case 'system':
+          return isMac ? t('settings.tool.ocr.features.system.macos') : t('settings.tool.ocr.features.system.windows')
+        case 'tesseract':
+          return t('settings.tool.ocr.features.tesseract')
+        case 'paddleocr':
+          return t('settings.tool.ocr.features.paddleocr')
+        default:
+          return t('settings.tool.ocr.title')
+      }
+    }
+
+    switch (activeEntry.provider.id) {
+      case 'mistral':
+        return t('settings.tool.preprocess.features.mistral')
+      case 'mineru':
+        return t('settings.tool.preprocess.features.mineru')
+      case 'doc2x':
+        return t('settings.tool.preprocess.features.doc2x')
+      case 'open-mineru':
+        return t('settings.tool.preprocess.features.open_mineru')
+      case 'paddleocr':
+        return t('settings.tool.preprocess.features.paddleocr')
+      default:
+        return t('settings.tool.preprocess.tooltip')
+    }
+  }, [activeEntry, t])
+
+  const handleSetDefault = () => {
+    if (isActiveDefault || !activeEntry) {
+      return
+    }
+
+    if (activeEntry.kind === 'ocr') {
+      setImageProviderId(activeEntry.provider.id)
+      return
+    }
+
+    setDefaultPreprocessProvider(activeEntry.provider)
+  }
+
+  const renderMenuIcon = (entry: DocProcessMenuEntry) => {
+    if (entry.kind === 'ocr') {
+      return <OcrProviderLogo provider={entry.provider} size={18} />
+    }
+
+    return <LogoAvatar logo={getPreprocessProviderLogo(entry.provider.id)} size={18} className="h-[18px] w-[18px]" />
+  }
+
+  const renderProviderPanel = () => {
+    if (!activeEntry) {
+      return null
+    }
+
+    if (activeEntry.kind === 'ocr') {
+      return <OcrProviderSettings provider={activeEntry.provider} embedded />
+    }
+
+    return <PreprocessProviderSettings provider={activeEntry.provider} hideHeader />
+  }
 
   return (
-    <SettingContainer theme={themeMode}>
-      <OcrSettings />
-      <PreprocessSettings />
-    </SettingContainer>
+    <div className="flex flex-1" data-theme-mode={themeMode}>
+      <div className="flex h-[calc(100vh-var(--navbar-height)-6px)] w-full flex-1 flex-row overflow-hidden">
+        <Scrollbar className={settingsSubmenuScrollClassName}>
+          <MenuList className={settingsSubmenuListClassName}>
+            <div className={settingsSubmenuSectionTitleClassName}>{t('settings.tool.ocr.title')}</div>
+            {visibleOcrProviders.map((provider) => (
+              <MenuItem
+                key={`ocr:${provider.id}`}
+                label={getOcrProviderName(provider)}
+                active={activeKey === `ocr:${provider.id}`}
+                onClick={() => setActiveKey(`ocr:${provider.id}`)}
+                icon={renderMenuIcon({ key: `ocr:${provider.id}`, kind: 'ocr', provider })}
+                className={settingsSubmenuItemClassName}
+                suffix={
+                  imageProvider?.id === provider.id ? (
+                    <Badge className="rounded-full border border-green-500/30 bg-green-500/10 px-2 py-0.5 font-medium text-green-600 text-xs dark:text-green-400">
+                      {t('common.default')}
+                    </Badge>
+                  ) : undefined
+                }
+              />
+            ))}
+
+            <MenuDivider className={settingsSubmenuDividerClassName} />
+            <div className={settingsSubmenuSectionTitleClassName}>{t('settings.tool.preprocess.title')}</div>
+            {visiblePreprocessProviders.map((provider) => (
+              <MenuItem
+                key={`preprocess:${provider.id}`}
+                label={provider.name}
+                active={activeKey === `preprocess:${provider.id}`}
+                onClick={() => setActiveKey(`preprocess:${provider.id}`)}
+                icon={renderMenuIcon({ key: `preprocess:${provider.id}`, kind: 'preprocess', provider })}
+                className={settingsSubmenuItemClassName}
+                suffix={
+                  defaultPreprocessProvider?.id === provider.id ? (
+                    <Badge className="rounded-full border border-green-500/30 bg-green-500/10 px-2 py-0.5 font-medium text-green-600 text-xs dark:text-green-400">
+                      {t('common.default')}
+                    </Badge>
+                  ) : undefined
+                }
+              />
+            ))}
+          </MenuList>
+        </Scrollbar>
+
+        <Scrollbar className={settingsContentScrollClassName}>
+          <div className={settingsContentBodyClassName}>
+            {activeEntry ? (
+              <div className="flex w-full flex-col gap-3">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="flex min-w-0 items-center">
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className="truncate font-semibold text-[15px] text-foreground leading-5">
+                          {activeEntry.kind === 'ocr'
+                            ? getOcrProviderName(activeEntry.provider)
+                            : activeEntry.provider.name}
+                        </span>
+                        {activeEntry.kind === 'preprocess' &&
+                          PREPROCESS_PROVIDER_CONFIG[activeEntry.provider.id]?.websites?.official && (
+                            <SettingTitleExternalLink
+                              href={PREPROCESS_PROVIDER_CONFIG[activeEntry.provider.id].websites.official}
+                              className="shrink-0">
+                              <ExternalLink size={14} className="lucide-custom" />
+                            </SettingTitleExternalLink>
+                          )}
+                      </div>
+                      {providerDescription && (
+                        <p className="mt-1 text-[13px] text-foreground-muted leading-5">{providerDescription}</p>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex shrink-0 items-center">
+                    <Button variant="outline" disabled={Boolean(isActiveDefault)} onClick={handleSetDefault}>
+                      {isActiveDefault ? t('common.default') : t('settings.tool.websearch.set_as_default')}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="h-px bg-border/60" />
+
+                <div className="min-h-0 px-1">{renderProviderPanel()}</div>
+              </div>
+            ) : (
+              <div className="flex h-full items-center justify-center">
+                <div className="text-center text-foreground-muted text-sm">{t('common.no_results')}</div>
+              </div>
+            )}
+          </div>
+        </Scrollbar>
+      </div>
+    </div>
   )
 }
+
 export default DocProcessSettings
diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx
deleted file mode 100644
index 567a006c92..0000000000
--- a/src/renderer/src/pages/settings/GeneralSettings.tsx
+++ /dev/null
@@ -1,392 +0,0 @@
-import { InfoTooltip, RowFlex } from '@cherrystudio/ui'
-import { Flex } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
-import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
-import Selector from '@renderer/components/Selector'
-import { isMac } from '@renderer/config/constant'
-import { useTheme } from '@renderer/context/ThemeProvider'
-import { useTimer } from '@renderer/hooks/useTimer'
-import i18n from '@renderer/i18n'
-import type { RootState } from '@renderer/store'
-import { useAppDispatch } from '@renderer/store'
-import { updateAssistant, updateDefaultAssistant } from '@renderer/store/assistants'
-import type { NotificationSource } from '@renderer/types/notification'
-import { isValidProxyUrl } from '@renderer/utils'
-import { formatErrorMessage } from '@renderer/utils/error'
-import { defaultByPassRules, defaultLanguage } from '@shared/config/constant'
-import type { LanguageVarious } from '@shared/data/preference/preferenceTypes'
-import { Input } from 'antd'
-import type { FC } from 'react'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
-
-import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '.'
-
-type SpellCheckOption = { readonly value: string; readonly label: string; readonly flag: string }
-
-// Define available spell check languages with display names (only commonly supported languages)
-const spellCheckLanguageOptions: readonly SpellCheckOption[] = [
-  { value: 'en-US', label: 'English (US)', flag: '🇺🇸' },
-  { value: 'es', label: 'Español', flag: '🇪🇸' },
-  { value: 'fr', label: 'Français', flag: '🇫🇷' },
-  { value: 'de', label: 'Deutsch', flag: '🇩🇪' },
-  { value: 'it', label: 'Italiano', flag: '🇮🇹' },
-  { value: 'pt', label: 'Português', flag: '🇵🇹' },
-  { value: 'ru', label: 'Русский', flag: '🇷🇺' },
-  { value: 'nl', label: 'Nederlands', flag: '🇳🇱' },
-  { value: 'pl', label: 'Polski', flag: '🇵🇱' },
-  { value: 'sk', label: 'Slovenčina', flag: '🇸🇰' },
-  { value: 'el', label: 'Ελληνικά', flag: '🇬🇷' }
-]
-
-const getDefaultNamesForKey = (key: string): Set<string> =>
-  new Set(Object.keys(i18n.store.data).map((locale) => i18n.getFixedT(locale)(key)))
-
-const GeneralSettings: FC = () => {
-  const [language, setLanguage] = usePreference('app.language')
-  const [disableHardwareAcceleration, setDisableHardwareAcceleration] = usePreference(
-    'BootConfig.app.disable_hardware_acceleration'
-  )
-  const [enableDeveloperMode, setEnableDeveloperMode] = usePreference('app.developer_mode.enabled')
-  const [launchOnBoot, setLaunchOnBoot] = usePreference('app.launch_on_boot')
-  const [launchToTray, setLaunchToTray] = usePreference('app.tray.on_launch')
-  const [trayOnClose, setTrayOnClose] = usePreference('app.tray.on_close')
-  const [tray, setTray] = usePreference('app.tray.enabled')
-  const [enableDataCollection, setEnableDataCollection] = usePreference('app.privacy.data_collection.enabled')
-  const [storeProxyMode, setProxyMode] = usePreference('app.proxy.mode')
-  const [storeProxyBypassRules, _setProxyBypassRules] = usePreference('app.proxy.bypass_rules')
-  const [storeProxyUrl, _setProxyUrl] = usePreference('app.proxy.url')
-  const [enableSpellCheck, setEnableSpellCheck] = usePreference('app.spell_check.enabled')
-  const [spellCheckLanguages, setSpellCheckLanguages] = usePreference('app.spell_check.languages')
-  const [notificationSettings, setNotificationSettings] = useMultiplePreferences({
-    assistant: 'app.notification.assistant.enabled',
-    backup: 'app.notification.backup.enabled',
-    knowledge: 'app.notification.knowledge.enabled'
-  })
-
-  const [proxyUrl, setProxyUrl] = useState<string>(storeProxyUrl)
-  const [proxyBypassRules, setProxyBypassRules] = useState<string>(storeProxyBypassRules)
-  const { theme } = useTheme()
-  const { setTimeoutTimer } = useTimer()
-
-  const updateTray = (isShowTray: boolean) => {
-    void setTray(isShowTray)
-    //only set tray on close/launch to tray when tray is enabled
-    if (!isShowTray) {
-      updateTrayOnClose(false)
-      updateLaunchToTray(false)
-    }
-  }
-
-  const updateTrayOnClose = (isTrayOnClose: boolean) => {
-    void setTrayOnClose(isTrayOnClose)
-    //in case tray is not enabled, enable it
-    if (isTrayOnClose && !tray) {
-      updateTray(true)
-    }
-  }
-
-  const updateLaunchOnBoot = (isLaunchOnBoot: boolean) => {
-    void setLaunchOnBoot(isLaunchOnBoot)
-  }
-
-  const updateLaunchToTray = (isLaunchToTray: boolean) => {
-    void setLaunchToTray(isLaunchToTray)
-    if (isLaunchToTray && !tray) {
-      updateTray(true)
-    }
-  }
-
-  const dispatch = useAppDispatch()
-  const { t } = useTranslation()
-  const defaultAssistant = useSelector((state: RootState) => state.assistants.defaultAssistant)
-
-  const onSelectLanguage = async (value: LanguageVarious) => {
-    // dispatch(setLanguage(value))
-    // localStorage.setItem('language', value)
-    // void window.api.setLanguage(value)
-    await i18n.changeLanguage(value)
-    void setLanguage(value)
-
-    if (getDefaultNamesForKey('chat.default.name').has(defaultAssistant.name)) {
-      const newName = i18n.t('chat.default.name')
-      const knownTopicNames = getDefaultNamesForKey('chat.default.topic.name')
-      const updatedTopics = defaultAssistant.topics.map((topic) =>
-        knownTopicNames.has(topic.name) ? { ...topic, name: i18n.t('chat.default.topic.name') } : topic
-      )
-      dispatch(updateDefaultAssistant({ assistant: { ...defaultAssistant, name: newName, topics: updatedTopics } }))
-      dispatch(updateAssistant({ id: defaultAssistant.id, name: newName, topics: updatedTopics }))
-    }
-  }
-
-  const handleSpellCheckChange = (checked: boolean) => {
-    void setEnableSpellCheck(checked)
-    void window.api.setEnableSpellCheck(checked)
-  }
-
-  const onSetProxyUrl = () => {
-    if (proxyUrl && !isValidProxyUrl(proxyUrl)) {
-      window.toast.error(t('message.error.invalid.proxy.url'))
-      return
-    }
-
-    void _setProxyUrl(proxyUrl)
-  }
-
-  const onSetProxyBypassRules = () => {
-    void _setProxyBypassRules(proxyBypassRules)
-  }
-
-  const proxyModeOptions: { value: 'system' | 'custom' | 'none'; label: string }[] = [
-    { value: 'system', label: t('settings.proxy.mode.system') },
-    { value: 'custom', label: t('settings.proxy.mode.custom') },
-    { value: 'none', label: t('settings.proxy.mode.none') }
-  ]
-
-  const onProxyModeChange = (mode: 'system' | 'custom' | 'none') => {
-    void setProxyMode(mode)
-  }
-
-  const languagesOptions: { value: LanguageVarious; label: string; flag: string }[] = [
-    { value: 'zh-CN', label: '中文', flag: '🇨🇳' },
-    { value: 'zh-TW', label: '中文（繁体）', flag: '🇭🇰' },
-    { value: 'en-US', label: 'English', flag: '🇺🇸' },
-    { value: 'de-DE', label: 'Deutsch', flag: '🇩🇪' },
-    { value: 'ja-JP', label: '日本語', flag: '🇯🇵' },
-    { value: 'ru-RU', label: 'Русский', flag: '🇷🇺' },
-    { value: 'el-GR', label: 'Ελληνικά', flag: '🇬🇷' },
-    { value: 'es-ES', label: 'Español', flag: '🇪🇸' },
-    { value: 'fr-FR', label: 'Français', flag: '🇫🇷' },
-    { value: 'pt-PT', label: 'Português', flag: '🇵🇹' },
-    { value: 'ro-RO', label: 'Română', flag: '🇷🇴' },
-    { value: 'vi-VN', label: 'Tiếng Việt', flag: '🇻🇳' }
-  ]
-
-  const handleNotificationChange = (type: NotificationSource, value: boolean) => {
-    void setNotificationSettings({ [type]: value })
-  }
-
-  const handleSpellCheckLanguagesChange = (selectedLanguages: string[]) => {
-    void setSpellCheckLanguages(selectedLanguages)
-  }
-
-  const handleHardwareAccelerationChange = (checked: boolean) => {
-    window.modal.confirm({
-      title: t('settings.hardware_acceleration.confirm.title'),
-      content: t('settings.hardware_acceleration.confirm.content'),
-      okText: t('common.confirm'),
-      cancelText: t('common.cancel'),
-      centered: true,
-      onOk() {
-        try {
-          void setDisableHardwareAcceleration(checked)
-        } catch (error) {
-          window.toast.error(formatErrorMessage(error))
-          return
-        }
-
-        // 重启应用
-        setTimeoutTimer(
-          'handleHardwareAccelerationChange',
-          () => {
-            void window.api.application.relaunch()
-          },
-          500
-        )
-      }
-    })
-  }
-
-  return (
-    <SettingContainer theme={theme}>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.general.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('common.language')}</SettingRowTitle>
-          <Selector
-            size={14}
-            value={language || defaultLanguage}
-            onChange={onSelectLanguage}
-            options={languagesOptions.map((lang) => ({
-              label: (
-                <Flex className="items-center gap-2">
-                  <span role="img" aria-label={lang.flag}>
-                    {lang.flag}
-                  </span>
-                  {lang.label}
-                </Flex>
-              ),
-              value: lang.value
-            }))}
-          />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.proxy.mode.title')}</SettingRowTitle>
-          <Selector value={storeProxyMode} onChange={onProxyModeChange} options={proxyModeOptions} />
-        </SettingRow>
-        {storeProxyMode === 'custom' && (
-          <>
-            <SettingDivider />
-            <SettingRow>
-              <SettingRowTitle>{t('settings.proxy.address')}</SettingRowTitle>
-              <Input
-                spellCheck={false}
-                placeholder="socks5://127.0.0.1:6153"
-                value={proxyUrl}
-                onChange={(e) => setProxyUrl(e.target.value)}
-                style={{ width: 180 }}
-                onBlur={() => onSetProxyUrl()}
-                type="url"
-              />
-            </SettingRow>
-          </>
-        )}
-        {storeProxyMode === 'custom' && (
-          <>
-            <SettingDivider />
-            <SettingRow>
-              <SettingRowTitle style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                <span>{t('settings.proxy.bypass')}</span>
-                <InfoTooltip
-                  content={t('settings.proxy.tip')}
-                  placement="right"
-                  iconProps={{ className: 'cursor-pointer' }}
-                />
-              </SettingRowTitle>
-              <Input
-                spellCheck={false}
-                placeholder={defaultByPassRules}
-                value={proxyBypassRules}
-                onChange={(e) => setProxyBypassRules(e.target.value)}
-                style={{ width: 180 }}
-                onBlur={() => onSetProxyBypassRules()}
-              />
-            </SettingRow>
-          </>
-        )}
-        <SettingDivider />
-        <SettingRow>
-          <RowFlex className="mr-4 flex-1 items-center justify-between">
-            <SettingRowTitle>{t('settings.general.spell_check.label')}</SettingRowTitle>
-            {enableSpellCheck && !isMac && (
-              <Selector<string>
-                size={14}
-                multiple
-                value={spellCheckLanguages}
-                placeholder={t('settings.general.spell_check.languages')}
-                onChange={handleSpellCheckLanguagesChange}
-                options={spellCheckLanguageOptions.map((lang) => ({
-                  value: lang.value,
-                  label: (
-                    <Flex className="items-center gap-2">
-                      <span role="img" aria-label={lang.flag}>
-                        {lang.flag}
-                      </span>
-                      {lang.label}
-                    </Flex>
-                  )
-                }))}
-              />
-            )}
-          </RowFlex>
-          <Switch checked={enableSpellCheck} onCheckedChange={handleSpellCheckChange} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.hardware_acceleration.title')}</SettingRowTitle>
-          <Switch checked={disableHardwareAcceleration} onCheckedChange={handleHardwareAccelerationChange} />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.notification.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span>{t('settings.notification.assistant')}</span>
-            <InfoTooltip
-              content={t('notification.tip')}
-              placement="right"
-              iconProps={{ className: 'cursor-pointer' }}
-            />
-          </SettingRowTitle>
-          <Switch
-            checked={notificationSettings.assistant}
-            onCheckedChange={(v) => handleNotificationChange('assistant', v)}
-          />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.notification.backup')}</SettingRowTitle>
-          <Switch
-            checked={notificationSettings.backup}
-            onCheckedChange={(v) => handleNotificationChange('backup', v)}
-          />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.notification.knowledge_embed')}</SettingRowTitle>
-          <Switch
-            checked={notificationSettings.knowledge}
-            onCheckedChange={(v) => handleNotificationChange('knowledge', v)}
-          />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.launch.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.launch.onboot')}</SettingRowTitle>
-          <Switch checked={launchOnBoot} onCheckedChange={(checked) => updateLaunchOnBoot(checked)} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.launch.totray')}</SettingRowTitle>
-          <Switch checked={launchToTray} onCheckedChange={(checked) => updateLaunchToTray(checked)} />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.tray.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.tray.show')}</SettingRowTitle>
-          <Switch checked={tray} onCheckedChange={(checked) => updateTray(checked)} />
-        </SettingRow>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.tray.onclose')}</SettingRowTitle>
-          <Switch checked={trayOnClose} onCheckedChange={(checked) => updateTrayOnClose(checked)} />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.privacy.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.privacy.enable_privacy_mode')}</SettingRowTitle>
-          <Switch
-            checked={enableDataCollection}
-            onCheckedChange={(v) => {
-              void setEnableDataCollection(v)
-              void window.api.config.set('enableDataCollection', v)
-            }}
-          />
-        </SettingRow>
-      </SettingGroup>
-      <SettingGroup theme={theme}>
-        <SettingTitle>{t('settings.developer.title')}</SettingTitle>
-        <SettingDivider />
-        <SettingRow>
-          <Flex className="items-center gap-1">
-            <SettingRowTitle>{t('settings.developer.enable_developer_mode')}</SettingRowTitle>
-            <InfoTooltip content={t('settings.developer.help')} />
-          </Flex>
-          <Switch checked={enableDeveloperMode} onCheckedChange={setEnableDeveloperMode} />
-        </SettingRow>
-      </SettingGroup>
-    </SettingContainer>
-  )
-}
-
-export default GeneralSettings
diff --git a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx b/src/renderer/src/pages/settings/IntegrationSettings/JoplinSettings.tsx
similarity index 78%
rename from src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
rename to src/renderer/src/pages/settings/IntegrationSettings/JoplinSettings.tsx
index 90e49e561e..b82ab77bba 100644
--- a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
+++ b/src/renderer/src/pages/settings/IntegrationSettings/JoplinSettings.tsx
@@ -1,17 +1,15 @@
-import { InfoTooltip, RowFlex } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import { Button, InfoTooltip, Input, RowFlex, Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
-import { AppLogo } from '@renderer/config/env'
+import { loggerService } from '@logger'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useMiniAppPopup } from '@renderer/hooks/useMiniAppPopup'
-import { Space } from 'antd'
-import { Input } from 'antd'
+import { formatErrorMessage } from '@renderer/utils/error'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingDivider, SettingGroup, SettingHelpText, SettingRow, SettingRowTitle, SettingTitle } from '..'
 
+const logger = loggerService.withContext('JoplinSettings')
+
 const JoplinSettings: FC = () => {
   const [joplinToken, setJoplinToken] = usePreference('data.integration.joplin.token')
   const [joplinUrl, setJoplinUrl] = usePreference('data.integration.joplin.url')
@@ -24,15 +22,12 @@ const JoplinSettings: FC = () => {
     void setJoplinToken(e.target.value)
   }
 
-  const { openSmartMiniApp } = useMiniAppPopup()
-
   const handleJoplinUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     void setJoplinUrl(e.target.value)
   }
 
   const handleJoplinUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
     let url = e.target.value
-    // 确保URL以/结尾，但只在失去焦点时执行
     if (url && !url.endsWith('/')) {
       url = `${url}/`
       void setJoplinUrl(url)
@@ -60,8 +55,9 @@ const JoplinSettings: FC = () => {
       }
 
       window.toast.success(t('settings.data.joplin.check.success'))
-    } catch (e) {
-      window.toast.error(t('settings.data.joplin.check.fail'))
+    } catch (error) {
+      logger.error('Failed to check Joplin connection', error as Error)
+      window.toast.error(`${t('settings.data.joplin.check.fail')}: ${formatErrorMessage(error)}`)
     }
   }
 
@@ -70,12 +66,7 @@ const JoplinSettings: FC = () => {
   }
 
   const handleJoplinHelpClick = () => {
-    openSmartMiniApp({
-      appId: 'joplin-help',
-      name: 'Joplin Help',
-      url: 'https://joplinapp.org/help/apps/clipper',
-      logo: AppLogo
-    })
+    void window.api.openWebsite('https://joplinapp.org/help/apps/clipper')
   }
 
   return (
@@ -84,7 +75,7 @@ const JoplinSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.joplin.url')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={joplinUrl || ''}
@@ -106,17 +97,20 @@ const JoplinSettings: FC = () => {
             onClick={handleJoplinHelpClick}
           />
         </SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
-          <Space.Compact style={{ width: '100%' }}>
-            <Input.Password
+        <RowFlex className="w-[315px] items-center gap-1.25">
+          <RowFlex className="w-full items-center gap-1.25">
+            <Input
+              type="password"
               value={joplinToken || ''}
               onChange={handleJoplinTokenChange}
               onBlur={handleJoplinTokenChange}
               placeholder={t('settings.data.joplin.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleJoplinConnectionCheck}>{t('settings.data.joplin.check.button')}</Button>
-          </Space.Compact>
+            <Button onClick={handleJoplinConnectionCheck} variant="outline" className="h-9 shrink-0">
+              {t('settings.data.joplin.check.button')}
+            </Button>
+          </RowFlex>
         </RowFlex>
       </SettingRow>
       <SettingDivider />
diff --git a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx b/src/renderer/src/pages/settings/IntegrationSettings/NotionSettings.tsx
similarity index 72%
rename from src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
rename to src/renderer/src/pages/settings/IntegrationSettings/NotionSettings.tsx
index 3dcfaec0ae..3df183d728 100644
--- a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
+++ b/src/renderer/src/pages/settings/IntegrationSettings/NotionSettings.tsx
@@ -1,16 +1,16 @@
-import { Button, InfoTooltip, RowFlex, Switch } from '@cherrystudio/ui'
+import { Button, InfoTooltip, Input, RowFlex, Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
+import { loggerService } from '@logger'
 import { Client } from '@notionhq/client'
-import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useMiniAppPopup } from '@renderer/hooks/useMiniAppPopup'
-import { Space } from 'antd'
-import { Input } from 'antd'
+import { formatErrorMessage } from '@renderer/utils/error'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingDivider, SettingGroup, SettingHelpText, SettingRow, SettingRowTitle, SettingTitle } from '..'
 
+const logger = loggerService.withContext('NotionSettings')
+
 const NotionSettings: FC = () => {
   const [notionApiKey, setNotionApiKey] = usePreference('data.integration.notion.api_key')
   const [notionDatabaseID, setNotionDatabaseID] = usePreference('data.integration.notion.database_id')
@@ -19,7 +19,6 @@ const NotionSettings: FC = () => {
 
   const { t } = useTranslation()
   const { theme } = useTheme()
-  const { openSmartMiniApp } = useMiniAppPopup()
 
   const handleNotionTokenChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     void setNotionApiKey(e.target.value)
@@ -33,30 +32,31 @@ const NotionSettings: FC = () => {
     void setNotionPageNameKey(e.target.value)
   }
 
-  const handleNotionConnectionCheck = () => {
-    if (notionApiKey === null) {
+  const handleNotionConnectionCheck = async () => {
+    if (!notionApiKey?.trim()) {
       window.toast.error(t('settings.data.notion.check.empty_api_key'))
       return
     }
-    if (notionDatabaseID === null) {
+    if (!notionDatabaseID?.trim()) {
       window.toast.error(t('settings.data.notion.check.empty_database_id'))
       return
     }
-    const notion = new Client({ auth: notionApiKey })
-    notion.databases
-      .retrieve({
+
+    try {
+      const notion = new Client({ auth: notionApiKey })
+      const result = await notion.databases.retrieve({
         database_id: notionDatabaseID
       })
-      .then((result) => {
-        if (result) {
-          window.toast.success(t('settings.data.notion.check.success'))
-        } else {
-          window.toast.error(t('settings.data.notion.check.fail'))
-        }
-      })
-      .catch(() => {
-        window.toast.error(t('settings.data.notion.check.error'))
-      })
+
+      if (result) {
+        window.toast.success(t('settings.data.notion.check.success'))
+      } else {
+        window.toast.error(t('settings.data.notion.check.fail'))
+      }
+    } catch (error) {
+      logger.error('Failed to check Notion connection', error as Error)
+      window.toast.error(formatErrorMessage(error) || t('settings.data.notion.check.error'))
+    }
   }
 
   const handleNotionExportReasoningChange = (checked: boolean) => {
@@ -64,12 +64,7 @@ const NotionSettings: FC = () => {
   }
 
   const handleNotionTitleClick = () => {
-    openSmartMiniApp({
-      appId: 'notion-help',
-      name: 'Notion Help',
-      url: 'https://docs.cherry-ai.com/advanced-basic/notion',
-      logo: AppLogo
-    })
+    void window.api.openWebsite('https://docs.cherry-ai.com/advanced-basic/notion')
   }
 
   return (
@@ -86,7 +81,7 @@ const NotionSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.notion.database_id')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={notionDatabaseID || ''}
@@ -99,7 +94,7 @@ const NotionSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.notion.page_name_key')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={notionPageNameKey || ''}
@@ -112,17 +107,20 @@ const NotionSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.notion.api_key')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
-          <Space.Compact style={{ width: '100%' }}>
-            <Input.Password
+        <RowFlex className="w-[315px] items-center gap-1.25">
+          <RowFlex className="w-full items-center gap-1.25">
+            <Input
+              type="password"
               value={notionApiKey || ''}
               onChange={handleNotionTokenChange}
               onBlur={handleNotionTokenChange}
               placeholder={t('settings.data.notion.api_key_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleNotionConnectionCheck}>{t('settings.data.notion.check.button')}</Button>
-          </Space.Compact>
+            <Button onClick={handleNotionConnectionCheck} variant="outline" className="h-9 shrink-0">
+              {t('settings.data.notion.check.button')}
+            </Button>
+          </RowFlex>
         </RowFlex>
       </SettingRow>
       <SettingDivider />
diff --git a/src/renderer/src/pages/settings/DataSettings/ObsidianSettings.tsx b/src/renderer/src/pages/settings/IntegrationSettings/ObsidianSettings.tsx
similarity index 64%
rename from src/renderer/src/pages/settings/DataSettings/ObsidianSettings.tsx
rename to src/renderer/src/pages/settings/IntegrationSettings/ObsidianSettings.tsx
index c103df5e68..5e58f4df55 100644
--- a/src/renderer/src/pages/settings/DataSettings/ObsidianSettings.tsx
+++ b/src/renderer/src/pages/settings/IntegrationSettings/ObsidianSettings.tsx
@@ -1,7 +1,15 @@
-import { RowFlex } from '@cherrystudio/ui'
+import {
+  EmptyState,
+  RowFlex,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Spinner
+} from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
-import { Empty, Select, Spin } from 'antd'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -10,8 +18,6 @@ import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle
 
 const logger = loggerService.withContext('ObsidianSettings')
 
-const { Option } = Select
-
 const ObsidianSettings: FC = () => {
   const { t } = useTranslation()
 
@@ -21,7 +27,6 @@ const ObsidianSettings: FC = () => {
   const [loading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null)
 
-  // 组件加载时获取Vault列表
   useEffect(() => {
     const fetchVaults = async () => {
       try {
@@ -37,12 +42,11 @@ const ObsidianSettings: FC = () => {
 
         setVaults(vaultsData)
 
-        // 如果没有设置默认vault，则选择第一个
         if (!defaultObsidianVault && vaultsData.length > 0) {
           void setDefaultObsidianVault(vaultsData[0].name)
         }
       } catch (error) {
-        logger.error('获取Obsidian Vault失败:', error as Error)
+        logger.error('Failed to fetch Obsidian vaults', error as Error)
         setError(t('settings.data.obsidian.default_vault_fetch_error'))
       } finally {
         setLoading(false)
@@ -62,31 +66,29 @@ const ObsidianSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.obsidian.default_vault')}</SettingRowTitle>
-        <RowFlex className="gap-[5px]">
-          <Spin spinning={loading} size="small">
-            {vaults.length > 0 ? (
-              <Select
-                value={defaultObsidianVault || undefined}
-                onChange={handleChange}
-                placeholder={t('settings.data.obsidian.default_vault_placeholder')}
-                style={{ width: 300 }}>
+        <RowFlex className="gap-1.25">
+          {loading ? (
+            <Spinner text={t('common.loading')} />
+          ) : vaults.length > 0 ? (
+            <Select value={defaultObsidianVault || undefined} onValueChange={handleChange}>
+              <SelectTrigger className="w-[300px]">
+                <SelectValue placeholder={t('settings.data.obsidian.default_vault_placeholder')} />
+              </SelectTrigger>
+              <SelectContent>
                 {vaults.map((vault) => (
-                  <Option key={vault.name} value={vault.name}>
+                  <SelectItem key={vault.name} value={vault.name}>
                     {vault.name}
-                  </Option>
+                  </SelectItem>
                 ))}
-              </Select>
-            ) : (
-              <Empty
-                description={
-                  loading
-                    ? t('settings.data.obsidian.default_vault_loading')
-                    : error || t('settings.data.obsidian.default_vault_no_vaults')
-                }
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-              />
-            )}
-          </Spin>
+              </SelectContent>
+            </Select>
+          ) : (
+            <EmptyState
+              compact
+              preset="no-resource"
+              description={error || t('settings.data.obsidian.default_vault_no_vaults')}
+            />
+          )}
         </RowFlex>
       </SettingRow>
     </SettingGroup>
diff --git a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx b/src/renderer/src/pages/settings/IntegrationSettings/SiyuanSettings.tsx
similarity index 82%
rename from src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
rename to src/renderer/src/pages/settings/IntegrationSettings/SiyuanSettings.tsx
index b971768b9d..420a0b4c75 100644
--- a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
+++ b/src/renderer/src/pages/settings/IntegrationSettings/SiyuanSettings.tsx
@@ -1,11 +1,7 @@
-import { Button, InfoTooltip, RowFlex } from '@cherrystudio/ui'
+import { Button, InfoTooltip, Input, RowFlex } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
-import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useMiniAppPopup } from '@renderer/hooks/useMiniAppPopup'
-import { Space } from 'antd'
-import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -19,7 +15,6 @@ const SiyuanSettings: FC = () => {
   const [siyuanBoxId, setSiyuanBoxId] = usePreference('data.integration.siyuan.box_id')
   const [siyuanRootPath, setSiyuanRootPath] = usePreference('data.integration.siyuan.root_path')
 
-  const { openSmartMiniApp } = useMiniAppPopup()
   const { t } = useTranslation()
   const { theme } = useTheme()
 
@@ -40,12 +35,7 @@ const SiyuanSettings: FC = () => {
   }
 
   const handleSiyuanHelpClick = () => {
-    openSmartMiniApp({
-      appId: 'siyuan-help',
-      name: 'Siyuan Help',
-      url: 'https://docs.cherry-ai.com/advanced-basic/siyuan',
-      logo: AppLogo
-    })
+    void window.api.openWebsite('https://docs.cherry-ai.com/advanced-basic/siyuan')
   }
 
   const handleCheckConnection = async () => {
@@ -87,7 +77,7 @@ const SiyuanSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.siyuan.api_url')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={siyuanApiUrl || ''}
@@ -107,23 +97,26 @@ const SiyuanSettings: FC = () => {
             onClick={handleSiyuanHelpClick}
           />
         </SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
-          <Space.Compact style={{ width: '100%' }}>
-            <Input.Password
+        <RowFlex className="w-[315px] items-center gap-1.25">
+          <RowFlex className="w-full items-center gap-1.25">
+            <Input
+              type="password"
               value={siyuanToken || ''}
               onChange={handleTokenChange}
               onBlur={handleTokenChange}
               placeholder={t('settings.data.siyuan.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleCheckConnection}>{t('settings.data.siyuan.check.button')}</Button>
-          </Space.Compact>
+            <Button onClick={handleCheckConnection} variant="outline" className="h-9 shrink-0">
+              {t('settings.data.siyuan.check.button')}
+            </Button>
+          </RowFlex>
         </RowFlex>
       </SettingRow>
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.siyuan.box_id')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={siyuanBoxId || ''}
@@ -135,7 +128,7 @@ const SiyuanSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.siyuan.root_path')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={siyuanRootPath || ''}
diff --git a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx b/src/renderer/src/pages/settings/IntegrationSettings/YuqueSettings.tsx
similarity index 53%
rename from src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
rename to src/renderer/src/pages/settings/IntegrationSettings/YuqueSettings.tsx
index e6f3925b32..164d9e0793 100644
--- a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
+++ b/src/renderer/src/pages/settings/IntegrationSettings/YuqueSettings.tsx
@@ -1,19 +1,24 @@
-import { Button, InfoTooltip, RowFlex } from '@cherrystudio/ui'
+import { Button, InfoTooltip, Input, RowFlex } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
-import { AppLogo } from '@renderer/config/env'
+import { loggerService } from '@logger'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useMiniAppPopup } from '@renderer/hooks/useMiniAppPopup'
-import { Space } from 'antd'
-import { Input } from 'antd'
+import { formatErrorMessage } from '@renderer/utils/error'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
 
+const logger = loggerService.withContext('YuqueSettings')
+
+const isYuqueRepoResponse = (value: unknown): value is { data: { id: string | number } } => {
+  if (!value || typeof value !== 'object') return false
+  const data = (value as { data?: unknown }).data
+  return Boolean(data && typeof data === 'object' && 'id' in data)
+}
+
 const YuqueSettings: FC = () => {
   const { t } = useTranslation()
   const { theme } = useTheme()
-  const { openSmartMiniApp } = useMiniAppPopup()
 
   const [yuqueToken, setYuqueToken] = usePreference('data.integration.yuque.token')
   const [yuqueUrl, setYuqueUrl] = usePreference('data.integration.yuque.url')
@@ -37,38 +42,43 @@ const YuqueSettings: FC = () => {
       return
     }
 
-    const response = await fetch('https://www.yuque.com/api/v2/hello', {
-      headers: {
-        'X-Auth-Token': yuqueToken
-      }
-    })
+    try {
+      const response = await fetch('https://www.yuque.com/api/v2/hello', {
+        headers: {
+          'X-Auth-Token': yuqueToken
+        }
+      })
 
-    if (!response.ok) {
-      window.toast.error(t('settings.data.yuque.check.fail'))
-      return
-    }
-    const yuqueSlug = yuqueUrl.replace('https://www.yuque.com/', '')
-    const repoIDResponse = await fetch(`https://www.yuque.com/api/v2/repos/${yuqueSlug}`, {
-      headers: {
-        'X-Auth-Token': yuqueToken
+      if (!response.ok) {
+        window.toast.error(t('settings.data.yuque.check.fail'))
+        return
       }
-    })
-    if (!repoIDResponse.ok) {
-      window.toast.error(t('settings.data.yuque.check.fail'))
-      return
+      const yuqueSlug = yuqueUrl.replace('https://www.yuque.com/', '')
+      const repoIDResponse = await fetch(`https://www.yuque.com/api/v2/repos/${yuqueSlug}`, {
+        headers: {
+          'X-Auth-Token': yuqueToken
+        }
+      })
+      if (!repoIDResponse.ok) {
+        window.toast.error(t('settings.data.yuque.check.fail'))
+        return
+      }
+      const data = (await repoIDResponse.json()) as unknown
+      if (!isYuqueRepoResponse(data)) {
+        logger.error('Invalid Yuque repo response')
+        window.toast.error(t('settings.data.yuque.check.fail'))
+        return
+      }
+      await setYuqueRepoId(String(data.data.id))
+      window.toast.success(t('settings.data.yuque.check.success'))
+    } catch (error) {
+      logger.error('Failed to check Yuque connection', error as Error)
+      window.toast.error(formatErrorMessage(error) || t('settings.data.yuque.check.fail'))
     }
-    const data = await repoIDResponse.json()
-    void setYuqueRepoId(data.data.id)
-    window.toast.success(t('settings.data.yuque.check.success'))
   }
 
   const handleYuqueHelpClick = () => {
-    openSmartMiniApp({
-      appId: 'yuque-help',
-      name: 'Yuque Help',
-      url: 'https://www.yuque.com/settings/tokens',
-      logo: AppLogo
-    })
+    void window.api.openWebsite('https://www.yuque.com/settings/tokens')
   }
 
   return (
@@ -77,7 +87,7 @@ const YuqueSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.yuque.repo_url')}</SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
+        <RowFlex className="w-[315px] items-center gap-1.25">
           <Input
             type="text"
             value={yuqueUrl || ''}
@@ -99,17 +109,20 @@ const YuqueSettings: FC = () => {
             onClick={handleYuqueHelpClick}
           />
         </SettingRowTitle>
-        <RowFlex className="w-[315px] items-center gap-[5px]">
-          <Space.Compact style={{ width: '100%' }}>
-            <Input.Password
+        <RowFlex className="w-[315px] items-center gap-1.25">
+          <RowFlex className="w-full items-center gap-1.25">
+            <Input
+              type="password"
               value={yuqueToken || ''}
               onChange={handleYuqueTokenChange}
               onBlur={handleYuqueTokenChange}
               placeholder={t('settings.data.yuque.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleYuqueConnectionCheck}>{t('settings.data.yuque.check.button')}</Button>
-          </Space.Compact>
+            <Button onClick={handleYuqueConnectionCheck} variant="outline" className="h-9 shrink-0">
+              {t('settings.data.yuque.check.button')}
+            </Button>
+          </RowFlex>
         </RowFlex>
       </SettingRow>
     </SettingGroup>
diff --git a/src/renderer/src/pages/settings/IntegrationSettings/index.tsx b/src/renderer/src/pages/settings/IntegrationSettings/index.tsx
new file mode 100644
index 0000000000..9964322f7e
--- /dev/null
+++ b/src/renderer/src/pages/settings/IntegrationSettings/index.tsx
@@ -0,0 +1,72 @@
+import { YuqueOutlined } from '@ant-design/icons'
+import { MenuItem, MenuList, RowFlex } from '@cherrystudio/ui'
+import { JoplinIcon, SiyuanIcon } from '@renderer/components/Icons'
+import Scrollbar from '@renderer/components/Scrollbar'
+import { useTheme } from '@renderer/context/ThemeProvider'
+import type { FC, ReactNode } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  SettingContainer,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  settingsSubmenuSectionTitleClassName
+} from '..'
+import JoplinSettings from './JoplinSettings'
+import NotionSettings from './NotionSettings'
+import ObsidianSettings from './ObsidianSettings'
+import SiyuanSettings from './SiyuanSettings'
+import YuqueSettings from './YuqueSettings'
+
+type IntegrationMenuKey = 'notion' | 'yuque' | 'joplin' | 'obsidian' | 'siyuan'
+
+type IntegrationMenuItem = {
+  key: IntegrationMenuKey
+  title: string
+  icon: ReactNode
+}
+
+const IntegrationSettings: FC = () => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  const [menu, setMenu] = useState<IntegrationMenuKey>('notion')
+
+  const menuItems: IntegrationMenuItem[] = [
+    { key: 'notion', title: t('settings.data.notion.title'), icon: <i className="iconfont icon-notion" /> },
+    { key: 'yuque', title: t('settings.data.yuque.title'), icon: <YuqueOutlined style={{ fontSize: 16 }} /> },
+    { key: 'joplin', title: t('settings.data.joplin.title'), icon: <JoplinIcon /> },
+    { key: 'obsidian', title: t('settings.data.obsidian.title'), icon: <i className="iconfont icon-obsidian" /> },
+    { key: 'siyuan', title: t('settings.data.siyuan.title'), icon: <SiyuanIcon /> }
+  ]
+
+  return (
+    <RowFlex className="flex-1">
+      <Scrollbar className={`${settingsSubmenuScrollClassName} [&_.iconfont]:text-current [&_.iconfont]:leading-4`}>
+        <MenuList className={settingsSubmenuListClassName}>
+          <div className={settingsSubmenuSectionTitleClassName}>{t('settings.integrations.groups.notes')}</div>
+          {menuItems.map((item) => (
+            <MenuItem
+              key={item.key}
+              label={item.title}
+              active={menu === item.key}
+              onClick={() => setMenu(item.key)}
+              icon={item.icon}
+              className={settingsSubmenuItemClassName}
+            />
+          ))}
+        </MenuList>
+      </Scrollbar>
+      <SettingContainer theme={theme} style={{ display: 'flex', flex: 1, height: '100%' }}>
+        {menu === 'notion' && <NotionSettings />}
+        {menu === 'yuque' && <YuqueSettings />}
+        {menu === 'joplin' && <JoplinSettings />}
+        {menu === 'obsidian' && <ObsidianSettings />}
+        {menu === 'siyuan' && <SiyuanSettings />}
+      </SettingContainer>
+    </RowFlex>
+  )
+}
+
+export default IntegrationSettings
diff --git a/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx b/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
index b50c03e6a6..e335fd13aa 100644
--- a/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
@@ -1,8 +1,23 @@
-import { UploadOutlined } from '@ant-design/icons'
-import { CodeEditor } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  CodeEditor,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Dropzone,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Label
+} from '@cherrystudio/ui'
 import { dataApiService } from '@data/DataApiService'
 import { usePreference } from '@data/hooks/usePreference'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { loggerService } from '@logger'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
 import { useTimer } from '@renderer/hooks/useTimer'
@@ -11,10 +26,12 @@ import { objectKeys, safeValidateMcpConfig } from '@renderer/types'
 import { parseJSON } from '@renderer/utils'
 import { formatZodError } from '@renderer/utils/error'
 import type { CreateMCPServerDto } from '@shared/data/api/schemas/mcpServers'
-import { Form, Modal, Upload } from 'antd'
+import { UploadIcon } from 'lucide-react'
 import type { FC } from 'react'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import * as z from 'zod'
 
 const logger = loggerService.withContext('AddMcpServerModal')
 
@@ -66,6 +83,11 @@ const initialJsonExample = `// Example JSON (stdio):
 // }
 `
 
+const jsonSchema = z.object({
+  serverConfig: z.string().min(1)
+})
+type JsonFieldType = z.infer<typeof jsonSchema>
+
 const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
   visible,
   onClose,
@@ -76,12 +98,20 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
   const { t } = useTranslation()
   const [fontSize] = usePreference('chat.message.font_size')
   const { activeCmTheme } = useCodeStyle()
-  const [form] = Form.useForm()
   const [loading, setLoading] = useState(false)
   const [importMethod, setImportMethod] = useState<'json' | 'dxt'>(initialImportMethod)
   const [dxtFile, setDxtFile] = useState<File | null>(null)
   const { setTimeoutTimer } = useTimer()
 
+  const form = useForm<JsonFieldType>({
+    resolver: zodResolver(
+      z.object({
+        serverConfig: z.string().min(1, t('settings.mcp.addServer.importFrom.placeholder'))
+      })
+    ),
+    defaultValues: { serverConfig: '' }
+  })
+
   // Update import method when initialImportMethod changes
   useEffect(() => {
     setImportMethod(initialImportMethod)
@@ -130,7 +160,7 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
     return { serverToAdd, error: null }
   }
 
-  const handleOk = async () => {
+  const handleOk = async (jsonValues?: JsonFieldType) => {
     try {
       setLoading(true)
 
@@ -201,7 +231,7 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
           }
 
           const createdServer = await onSuccess(serverDto)
-          form.resetFields()
+          form.reset({ serverConfig: '' })
           setDxtFile(null)
           onClose()
 
@@ -235,30 +265,22 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
         }
       } else {
         // Original JSON import logic
-        const values = await form.validateFields()
-        const inputValue = values.serverConfig.trim()
+        const inputValue = (jsonValues?.serverConfig ?? form.getValues('serverConfig')).trim()
 
         const { serverToAdd, error } = getServerFromJson(inputValue)
 
         if (error !== null) {
-          form.setFields([
-            {
-              name: 'serverConfig',
-              errors: [error]
-            }
-          ])
+          form.setError('serverConfig', { type: 'manual', message: error })
           setLoading(false)
           return
         }
 
         // 檢查重複名稱
         if (existingServers && existingServers.some((server) => server.name === serverToAdd.name)) {
-          form.setFields([
-            {
-              name: 'serverConfig',
-              errors: [t('settings.mcp.addServer.importFrom.nameExists', { name: serverToAdd.name })]
-            }
-          ])
+          form.setError('serverConfig', {
+            type: 'manual',
+            message: t('settings.mcp.addServer.importFrom.nameExists', { name: serverToAdd.name })
+          })
           setLoading(false)
           return
         }
@@ -277,7 +299,7 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
         }
 
         const createdServer = await onSuccess(serverDto)
-        form.resetFields()
+        form.reset({ serverConfig: '' })
         onClose()
 
         // 在背景非同步檢查伺服器可用性並更新狀態
@@ -299,85 +321,93 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
     }
   }
 
-  // CodeEditor 內容變更時的回呼函式
-  const handleEditorChange = useCallback(
-    (newContent: string) => {
-      form.setFieldsValue({ serverConfig: newContent })
-      // 可選：如果希望即時驗證，可以取消註解下一行
-      // form.validateFields(['serverConfig']);
-    },
-    [form]
-  )
-
-  const serverConfigValue = form.getFieldValue('serverConfig')
+  const handleClose = () => {
+    form.reset({ serverConfig: '' })
+    setDxtFile(null)
+    setImportMethod(initialImportMethod)
+    onClose()
+  }
 
   return (
-    <Modal
-      title={
-        importMethod === 'dxt'
-          ? t('settings.mcp.addServer.importFrom.dxt')
-          : t('settings.mcp.addServer.importFrom.json')
-      }
-      open={visible}
-      onOk={handleOk}
-      onCancel={() => {
-        form.resetFields()
-        setDxtFile(null)
-        setImportMethod(initialImportMethod)
-        onClose()
-      }}
-      confirmLoading={loading}
-      destroyOnHidden
-      centered
-      transitionName="animation-move-down"
-      width={600}>
-      <Form form={form} layout="vertical" name="add_mcp_server_form">
+    <Dialog open={visible} onOpenChange={(next) => !next && handleClose()}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>
+            {importMethod === 'dxt'
+              ? t('settings.mcp.addServer.importFrom.dxt')
+              : t('settings.mcp.addServer.importFrom.json')}
+          </DialogTitle>
+        </DialogHeader>
         {importMethod === 'json' ? (
-          <Form.Item
-            name="serverConfig"
-            label={t('settings.mcp.addServer.importFrom.tooltip')}
-            rules={[{ required: true, message: t('settings.mcp.addServer.importFrom.placeholder') }]}>
-            <CodeEditor
-              theme={activeCmTheme}
-              fontSize={fontSize - 1}
-              value={serverConfigValue}
-              placeholder={initialJsonExample}
-              language="json"
-              onChange={handleEditorChange}
-              height="60vh"
-              expanded={false}
-              wrapped
-              options={{
-                lint: true,
-                lineNumbers: true,
-                foldGutter: true,
-                highlightActiveLine: true,
-                keymap: true
-              }}
-            />
-          </Form.Item>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit((values) => handleOk(values))}
+              className="flex flex-col gap-4"
+              id="add-mcp-server-form">
+              <FormField
+                control={form.control}
+                name="serverConfig"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('settings.mcp.addServer.importFrom.tooltip')}</FormLabel>
+                    <FormControl>
+                      <CodeEditor
+                        theme={activeCmTheme}
+                        fontSize={fontSize - 1}
+                        value={field.value}
+                        placeholder={initialJsonExample}
+                        language="json"
+                        onChange={(newContent) => field.onChange(newContent)}
+                        height="60vh"
+                        expanded={false}
+                        wrapped
+                        options={{
+                          lint: true,
+                          lineNumbers: true,
+                          foldGutter: true,
+                          highlightActiveLine: true,
+                          keymap: true
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </form>
+          </Form>
         ) : (
-          <Form.Item
-            label={t('settings.mcp.addServer.importFrom.dxtFile')}
-            help={t('settings.mcp.addServer.importFrom.dxtHelp')}>
-            <Upload
-              accept=".dxt"
-              maxCount={1}
-              beforeUpload={(file) => {
-                setDxtFile(file)
-                return false // Prevent automatic upload
-              }}
-              onRemove={() => setDxtFile(null)}
-              fileList={dxtFile ? [{ uid: '-1', name: dxtFile.name, status: 'done' } as any] : []}>
-              <Button>
-                <UploadOutlined />
-                {t('settings.mcp.addServer.importFrom.selectDxtFile')}
-              </Button>
-            </Upload>
-          </Form.Item>
+          <div className="flex flex-col gap-2">
+            <Label>{t('settings.mcp.addServer.importFrom.dxtFile')}</Label>
+            <Dropzone
+              accept={{ 'application/octet-stream': ['.dxt'] }}
+              maxFiles={1}
+              src={dxtFile ? [dxtFile] : undefined}
+              onDrop={(files) => setDxtFile(files[0] ?? null)}>
+              <div className="flex flex-col items-center gap-1 text-sm">
+                <UploadIcon className="size-5 text-muted-foreground" />
+                <span>{dxtFile?.name ?? t('settings.mcp.addServer.importFrom.selectDxtFile')}</span>
+              </div>
+            </Dropzone>
+            <p className="text-muted-foreground text-sm">{t('settings.mcp.addServer.importFrom.dxtHelp')}</p>
+          </div>
         )}
-      </Form>
-    </Modal>
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            {t('common.cancel')}
+          </Button>
+          {importMethod === 'json' ? (
+            <Button type="submit" form="add-mcp-server-form" disabled={loading}>
+              {t('common.confirm')}
+            </Button>
+          ) : (
+            <Button onClick={() => handleOk()} disabled={loading || !dxtFile}>
+              {t('common.confirm')}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx b/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
index 2996bda361..9a36056842 100644
--- a/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
@@ -1,9 +1,12 @@
+import { Badge, Button, Popover, PopoverContent, PopoverTrigger, Tabs, TabsList, TabsTrigger } from '@cherrystudio/ui'
+import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
-import { getBuiltInMcpServerDescriptionLabel, getMcpTypeLabel } from '@renderer/i18n/label'
+import { getBuiltInMcpServerDescriptionLabel } from '@renderer/i18n/label'
 import { builtinMCPServers } from '@renderer/store/mcp'
-import { Button, Popover, Tag } from 'antd'
+import { cn } from '@renderer/utils/style'
 import { Check, Plus } from 'lucide-react'
 import type { FC } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingTitle } from '..'
@@ -11,86 +14,143 @@ import { SettingTitle } from '..'
 const BuiltinMCPServerList: FC = () => {
   const { t } = useTranslation()
   const { addMCPServer, mcpServers } = useMCPServers()
+  const [searchText, setSearchText] = useState('')
+  const [filter, setFilter] = useState<'all' | 'installed' | 'available'>('all')
+
+  const installedCount = useMemo(
+    () =>
+      builtinMCPServers.filter((server) => mcpServers.some((existingServer) => existingServer.name === server.name))
+        .length,
+    [mcpServers]
+  )
+
+  const filteredServers = useMemo(() => {
+    const keyword = searchText.trim().toLowerCase()
+
+    return builtinMCPServers.filter((server) => {
+      const isInstalled = mcpServers.some((existingServer) => existingServer.name === server.name)
+
+      if (filter === 'installed' && !isInstalled) return false
+      if (filter === 'available' && isInstalled) return false
+
+      if (!keyword) return true
+
+      const description = getBuiltInMcpServerDescriptionLabel(server.name).toLowerCase()
+      return server.name.toLowerCase().includes(keyword) || description.includes(keyword)
+    })
+  }, [filter, mcpServers, searchText])
 
   return (
-    <>
-      <SettingTitle style={{ gap: 3, marginBottom: 10 }}>{t('settings.mcp.builtinServers')}</SettingTitle>
-      <div className="mb-5 grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3">
-        {builtinMCPServers.map((server) => {
+    <div className="mb-5">
+      <div className="mb-3 flex items-center gap-2">
+        <SettingTitle className="m-0">{t('settings.mcp.builtinServers')}</SettingTitle>
+        <span className="text-muted-foreground text-sm">
+          {installedCount}/{builtinMCPServers.length}
+        </span>
+      </div>
+
+      <div className="mb-3 flex w-full min-w-0 flex-wrap items-center justify-between gap-3">
+        <Tabs value={filter} onValueChange={(value) => setFilter(value as typeof filter)} className="min-w-0">
+          <TabsList className="h-8 rounded-full bg-muted/70 p-0.5">
+            <TabsTrigger value="all" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('models.all')}
+            </TabsTrigger>
+            <TabsTrigger value="installed" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('settings.skills.installed')}
+            </TabsTrigger>
+            <TabsTrigger value="available" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('settings.skills.install')}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <div className="min-w-0">
+          <CollapsibleSearchBar
+            onSearch={setSearchText}
+            placeholder={t('settings.mcp.search.placeholder')}
+            tooltip={t('settings.mcp.search.tooltip')}
+            maxWidth={200}
+            style={{ borderRadius: 16 }}
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        {filteredServers.map((server) => {
           const isInstalled = mcpServers.some((existingServer) => existingServer.name === server.name)
 
           return (
             <div
               key={server.id}
-              className="flex h-31.25 cursor-default flex-col rounded-2xs border border-(--color-border) bg-(--color-background) px-4 py-2.5 transition-all duration-200 ease-in-out hover:border-(--color-primary)">
-              <div className="mb-1.25 flex items-center">
-                <div className="flex flex-1 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap">
-                  <span className="font-medium text-[15px]">{server.name}</span>
+              className={cn(
+                'group flex min-h-16 items-center gap-3 rounded-lg border border-border/60 px-3.5 py-2 transition-colors duration-200 ease-in-out hover:border-border hover:bg-muted/35',
+                isInstalled && 'bg-muted/25'
+              )}>
+              <div className="min-w-0 flex-1">
+                <div className="mb-1 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 overflow-hidden">
+                  <span className="truncate font-semibold text-[14px] leading-5">{server.name}</span>
+                  {server?.shouldConfig && (
+                    <a
+                      href="https://docs.cherry-ai.com/advanced-basic/mcp/buildin"
+                      target="_blank"
+                      rel="noopener noreferrer">
+                      <Badge
+                        variant="outline"
+                        className="h-5 rounded-md border-destructive/25 bg-destructive/10 px-1.5 font-medium text-[11px] text-destructive leading-none">
+                        {t('settings.mcp.requiresConfig')}
+                      </Badge>
+                    </a>
+                  )}
                 </div>
-                <div className="ml-2 flex items-center gap-2">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <div className="line-clamp-2 cursor-pointer text-[13px] text-muted-foreground leading-5 transition-colors hover:text-foreground">
+                      {getBuiltInMcpServerDescriptionLabel(server.name)}
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent align="start" side="top" className="w-auto max-w-100">
+                    <div className="mb-2 font-semibold text-foreground text-sm">{server.name}</div>
+                    <div className="wrap-break-word whitespace-pre-wrap text-[14px] text-foreground leading-normal">
+                      {getBuiltInMcpServerDescriptionLabel(server.name)}
+                      {server.reference && (
+                        <a
+                          href={server.reference}
+                          className="wrap-break-word mt-2 inline-block text-primary hover:underline">
+                          {server.reference}
+                        </a>
+                      )}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </div>
+              <div className="ml-3 flex min-w-[86px] shrink-0 items-center justify-end self-center">
+                {isInstalled ? (
+                  <div className="inline-flex h-7 items-center gap-1.5 rounded-lg px-2 text-muted-foreground text-xs">
+                    <Check size={13} className="text-success/75" />
+                    {t('settings.skills.installed')}
+                  </div>
+                ) : (
                   <Button
-                    type="text"
-                    icon={
-                      isInstalled ? <Check size={16} style={{ color: 'var(--color-primary)' }} /> : <Plus size={16} />
-                    }
-                    size="small"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 rounded-lg px-2 text-muted-foreground text-xs shadow-none hover:bg-muted hover:text-foreground hover:shadow-none"
                     onClick={async () => {
-                      if (isInstalled) {
-                        return
-                      }
-
                       try {
                         await addMCPServer(server)
                         window.toast.success(t('settings.mcp.addSuccess'))
                       } catch {
                         window.toast.error(t('settings.mcp.addError'))
                       }
-                    }}
-                    disabled={isInstalled}
-                  />
-                </div>
-              </div>
-              <Popover
-                content={
-                  <div className="wrap-break-word max-w-87.5 whitespace-pre-wrap text-(--color-text-1) text-[14px] leading-normal">
-                    {getBuiltInMcpServerDescriptionLabel(server.name)}
-                    {server.reference && (
-                      <a
-                        href={server.reference}
-                        className="wrap-break-word mt-2 inline-block max-w-87.5 text-(--color-primary) no-underline hover:text-(--color-primary-hover) hover:underline">
-                        {server.reference}
-                      </a>
-                    )}
-                  </div>
-                }
-                title={server.name}
-                trigger="hover"
-                placement="topLeft"
-                overlayStyle={{ maxWidth: 400 }}>
-                <div className="wrap-break-word relative line-clamp-2 w-full cursor-pointer text-(--color-text-2) text-[12px] hover:text-(--color-text-1)">
-                  {getBuiltInMcpServerDescriptionLabel(server.name)}
-                </div>
-              </Popover>
-              <div className="mt-2.5 flex items-center justify-start gap-1">
-                <Tag color="processing" style={{ borderRadius: 20, margin: 0, fontWeight: 500 }}>
-                  {getMcpTypeLabel(server.type ?? 'stdio')}
-                </Tag>
-                {server?.shouldConfig && (
-                  <a
-                    href="https://docs.cherry-ai.com/advanced-basic/mcp/buildin"
-                    target="_blank"
-                    rel="noopener noreferrer">
-                    <Tag color="warning" style={{ borderRadius: 20, margin: 0, fontWeight: 500 }}>
-                      {t('settings.mcp.requiresConfig')}
-                    </Tag>
-                  </a>
+                    }}>
+                    <Plus size={13} />
+                    {t('settings.skills.install')}
+                  </Button>
                 )}
               </div>
             </div>
           )
         })}
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
index 11421b9cdd..7738033a6e 100644
--- a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
@@ -1,4 +1,13 @@
-import { CodeEditor } from '@cherrystudio/ui'
+import {
+  Button,
+  CodeEditor,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Spinner
+} from '@cherrystudio/ui'
 import { dataApiService } from '@data/DataApiService'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -9,7 +18,6 @@ import type { MCPServer } from '@renderer/types'
 import { safeValidateMcpConfig } from '@renderer/types'
 import { parseJSON } from '@renderer/utils'
 import { formatErrorMessage, formatZodError } from '@renderer/utils/error'
-import { Modal, Spin, Typography } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -55,6 +63,11 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     }
   }, [mcpServers, t])
 
+  const closePopup = () => {
+    setOpen(false)
+    resolve({})
+  }
+
   const onOk = async () => {
     setJsonSaving(true)
 
@@ -114,7 +127,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
 
       window.toast.success(t('settings.mcp.jsonSaveSuccess'))
       setJsonError('')
-      setOpen(false)
+      closePopup()
     } catch (error: unknown) {
       setJsonError(formatErrorMessage(error) || t('settings.mcp.jsonSaveError'))
       window.toast.error(t('settings.mcp.jsonSaveError'))
@@ -123,56 +136,49 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     }
   }
 
-  const onCancel = () => {
-    setOpen(false)
-  }
-
-  const onClose = () => {
-    resolve({})
-  }
-
-  EditMcpJsonPopup.hide = onCancel
+  EditMcpJsonPopup.hide = closePopup
 
   return (
-    <Modal
-      title={t('settings.mcp.editJson')}
-      open={open}
-      onOk={onOk}
-      onCancel={onCancel}
-      afterClose={onClose}
-      maskClosable={false}
-      width={800}
-      loading={jsonSaving}
-      transitionName="animation-move-down"
-      centered>
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
-        <Typography.Text style={{ width: '100%' }} type="danger">
-          {jsonError ? <pre>{jsonError}</pre> : ''}
-        </Typography.Text>
-      </div>
-      {isLoading ? (
-        <Spin size="large" />
-      ) : (
-        <CodeEditor
-          theme={activeCmTheme}
-          fontSize={fontSize - 1}
-          value={jsonConfig}
-          language="json"
-          onChange={(value) => setJsonConfig(value)}
-          height="60vh"
-          expanded={false}
-          wrapped
-          options={{
-            lint: true,
-            lineNumbers: true,
-            foldGutter: true,
-            highlightActiveLine: true,
-            keymap: true
-          }}
-        />
-      )}
-      <Typography.Text type="secondary">{t('settings.mcp.jsonModeHint')}</Typography.Text>
-    </Modal>
+    <Dialog open={open} onOpenChange={(next) => !next && closePopup()}>
+      <DialogContent className="max-w-[800px]" onPointerDownOutside={(event) => event.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{t('settings.mcp.editJson')}</DialogTitle>
+        </DialogHeader>
+        <div className="mb-4 flex justify-between">
+          <div className="w-full text-destructive text-sm">{jsonError ? <pre>{jsonError}</pre> : ''}</div>
+        </div>
+        {isLoading ? (
+          <Spinner text={t('common.loading')} />
+        ) : (
+          <CodeEditor
+            theme={activeCmTheme}
+            fontSize={fontSize - 1}
+            value={jsonConfig}
+            language="json"
+            onChange={(value) => setJsonConfig(value)}
+            height="60vh"
+            expanded={false}
+            wrapped
+            options={{
+              lint: true,
+              lineNumbers: true,
+              foldGutter: true,
+              highlightActiveLine: true,
+              keymap: true
+            }}
+          />
+        )}
+        <div className="text-muted-foreground text-sm">{t('settings.mcp.jsonModeHint')}</div>
+        <DialogFooter>
+          <Button variant="outline" onClick={closePopup}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={onOk} loading={jsonSaving}>
+            {t('common.confirm')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/MCPSettings/EnvironmentDependencies.tsx b/src/renderer/src/pages/settings/MCPSettings/EnvironmentDependencies.tsx
new file mode 100644
index 0000000000..d471ded658
--- /dev/null
+++ b/src/renderer/src/pages/settings/MCPSettings/EnvironmentDependencies.tsx
@@ -0,0 +1,234 @@
+import { Badge, Button } from '@cherrystudio/ui'
+import { loggerService } from '@logger'
+import { usePersistCache } from '@renderer/data/hooks/useCache'
+import { cn } from '@renderer/utils'
+import { formatErrorMessage } from '@renderer/utils/error'
+import { useNavigate } from '@tanstack/react-router'
+import { Download, FolderOpen, PackageCheck, TriangleAlert } from 'lucide-react'
+import type { FC } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+interface EnvironmentDependenciesProps {
+  mini?: boolean
+}
+
+interface EnvironmentDependencyItemProps {
+  actionLabel: string
+  description: string
+  installed: boolean
+  installing: boolean
+  name: string
+  path: string | null
+  onInstall: () => void
+  onOpenPath: () => void
+  t: (key: string) => string
+}
+
+const logger = loggerService.withContext('EnvironmentDependencies')
+
+const EnvironmentDependencyItem: FC<EnvironmentDependencyItemProps> = ({
+  actionLabel,
+  description,
+  installed,
+  installing,
+  name,
+  path,
+  onInstall,
+  onOpenPath,
+  t
+}) => (
+  <div className="group flex min-h-13 w-full items-center gap-2.5 rounded-lg border border-border/60 bg-transparent px-2.5 py-2 transition-colors duration-200 ease-in-out hover:border-border hover:bg-muted/55">
+    <div
+      className={cn(
+        'flex size-9 shrink-0 items-center justify-center rounded-xl',
+        installed ? 'bg-primary/10 text-primary' : 'bg-blue-500/10 text-blue-500'
+      )}>
+      <PackageCheck className="size-4" />
+    </div>
+
+    <div className="min-w-0 flex-1">
+      <div className="flex min-w-0 items-baseline gap-2">
+        <div className="truncate font-medium text-foreground text-sm leading-5">{name}</div>
+      </div>
+
+      <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-muted-foreground text-xs leading-4">
+        <span className="truncate">{description}</span>
+        <button
+          type="button"
+          onClick={onOpenPath}
+          disabled={!path}
+          aria-label={t('settings.skills.directory')}
+          className={cn(
+            'inline-flex size-4.5 shrink-0 items-center justify-center rounded-md transition-colors',
+            path ? 'text-muted-foreground/55 hover:bg-background hover:text-foreground' : 'hidden'
+          )}>
+          <FolderOpen className="size-3" />
+        </button>
+      </div>
+    </div>
+
+    <div className="flex min-w-[92px] shrink-0 items-center justify-end gap-2">
+      {installed ? (
+        <Badge className="border-transparent bg-success/10 px-1.5 py-0 font-medium text-[11px] text-success leading-4">
+          {t('settings.skills.installed')}
+        </Badge>
+      ) : (
+        <>
+          <Badge className="border-transparent bg-muted px-1.5 py-0 font-medium text-[11px] text-muted-foreground leading-4">
+            {t('settings.plugins.notInstalled')}
+          </Badge>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 shrink-0 gap-1 px-2 font-medium text-xs shadow-none"
+            onClick={onInstall}
+            disabled={installing}
+            loading={installing}>
+            {!installing && <Download className="size-3.5" />}
+            {installing ? t('settings.plugins.installing') : actionLabel}
+          </Button>
+        </>
+      )}
+    </div>
+  </div>
+)
+
+const EnvironmentDependencies: FC<EnvironmentDependenciesProps> = ({ mini = false }) => {
+  const [isUvInstalled, setIsUvInstalled] = usePersistCache('feature.mcp.is_uv_installed')
+  const [isBunInstalled, setIsBunInstalled] = usePersistCache('feature.mcp.is_bun_installed')
+
+  const [isInstallingUv, setIsInstallingUv] = useState(false)
+  const [isInstallingBun, setIsInstallingBun] = useState(false)
+  const [uvPath, setUvPath] = useState<string | null>(null)
+  const [bunPath, setBunPath] = useState<string | null>(null)
+  const [binariesDir, setBinariesDir] = useState<string | null>(null)
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+  const checkBinariesTimerRef = useRef<NodeJS.Timeout>(undefined)
+  const hasShownCheckBinariesErrorRef = useRef(false)
+
+  useEffect(() => {
+    return () => {
+      clearTimeout(checkBinariesTimerRef.current)
+    }
+  }, [])
+
+  const checkBinaries = useCallback(async () => {
+    try {
+      const uvExists = await window.api.isBinaryExist('uv')
+      const bunExists = await window.api.isBinaryExist('bun')
+      const { uvPath, bunPath, dir } = await window.api.mcp.getInstallInfo()
+
+      setIsUvInstalled(uvExists)
+      setIsBunInstalled(bunExists)
+      setUvPath(uvPath)
+      setBunPath(bunPath)
+      setBinariesDir(dir)
+      hasShownCheckBinariesErrorRef.current = false
+    } catch (error) {
+      logger.error('Failed to check MCP environment dependencies', error as Error)
+      if (!hasShownCheckBinariesErrorRef.current) {
+        hasShownCheckBinariesErrorRef.current = true
+        window.toast.error(`${t('settings.mcp.installError')}: ${formatErrorMessage(error)}`)
+      }
+    }
+  }, [setIsUvInstalled, setIsBunInstalled, t])
+
+  const installUV = async () => {
+    try {
+      setIsInstallingUv(true)
+      await window.api.installUVBinary()
+      setIsInstallingUv(false)
+      setIsUvInstalled(true)
+    } catch (error) {
+      logger.error('Failed to install UV binary', error as Error)
+      window.toast.error(`${t('settings.mcp.installError')}: ${formatErrorMessage(error)}`)
+      setIsInstallingUv(false)
+    }
+    clearTimeout(checkBinariesTimerRef.current)
+    checkBinariesTimerRef.current = setTimeout(checkBinaries, 1000)
+  }
+
+  const installBun = async () => {
+    try {
+      setIsInstallingBun(true)
+      await window.api.installBunBinary()
+      setIsInstallingBun(false)
+      setIsBunInstalled(true)
+    } catch (error) {
+      logger.error('Failed to install Bun binary', error as Error)
+      window.toast.error(`${t('settings.mcp.installError')}: ${formatErrorMessage(error)}`)
+      setIsInstallingBun(false)
+    }
+    clearTimeout(checkBinariesTimerRef.current)
+    checkBinariesTimerRef.current = setTimeout(checkBinaries, 1000)
+  }
+
+  useEffect(() => {
+    void checkBinaries()
+  }, [checkBinaries])
+
+  if (mini) {
+    const installed = isUvInstalled && isBunInstalled
+    if (installed) {
+      return null
+    }
+
+    return (
+      <Button
+        className="nodrag h-8 rounded-lg px-2 text-destructive shadow-none hover:text-destructive"
+        variant="ghost"
+        onClick={() => navigate({ to: '/settings/plugins' })}>
+        <TriangleAlert size={14} />
+      </Button>
+    )
+  }
+
+  const openBinariesDir = () => {
+    if (binariesDir) {
+      void window.api.openPath(binariesDir)
+    }
+  }
+
+  const dependenciesCount = 2
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="min-w-0">
+        <div className="flex min-w-0 items-center gap-2">
+          <h1 className="font-semibold text-[15px] text-foreground leading-6">{t('settings.plugins.title')}</h1>
+          <span className="text-muted-foreground/50 text-xs">{dependenciesCount}</span>
+        </div>
+        <p className="mt-1 text-muted-foreground text-xs leading-5">{t('settings.plugins.description')}</p>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <EnvironmentDependencyItem
+          actionLabel={t('settings.mcp.install')}
+          description={t('settings.plugins.uvDescription')}
+          installed={!!isUvInstalled}
+          installing={isInstallingUv}
+          name="UV"
+          path={uvPath}
+          onInstall={installUV}
+          onOpenPath={openBinariesDir}
+          t={t}
+        />
+        <EnvironmentDependencyItem
+          actionLabel={t('settings.mcp.install')}
+          description={t('settings.plugins.bunDescription')}
+          installed={!!isBunInstalled}
+          installing={isInstallingBun}
+          name="Bun"
+          path={bunPath}
+          onInstall={installBun}
+          onOpenPath={openBinariesDir}
+          t={t}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default EnvironmentDependencies
diff --git a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx b/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
deleted file mode 100644
index df289606da..0000000000
--- a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { CheckCircleOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'
-import { Center, ColFlex } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
-import { usePersistCache } from '@renderer/data/hooks/useCache'
-import { useNavigate } from '@tanstack/react-router'
-import { Alert } from 'antd'
-import type { FC } from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import { SettingDescription, SettingRow, SettingSubtitle } from '..'
-
-interface Props {
-  mini?: boolean
-}
-
-const InstallNpxUv: FC<Props> = ({ mini = false }) => {
-  const [isUvInstalled, setIsUvInstalled] = usePersistCache('feature.mcp.is_uv_installed')
-  const [isBunInstalled, setIsBunInstalled] = usePersistCache('feature.mcp.is_bun_installed')
-
-  const [isInstallingUv, setIsInstallingUv] = useState(false)
-  const [isInstallingBun, setIsInstallingBun] = useState(false)
-  const [uvPath, setUvPath] = useState<string | null>(null)
-  const [bunPath, setBunPath] = useState<string | null>(null)
-  const [binariesDir, setBinariesDir] = useState<string | null>(null)
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const checkBinariesTimerRef = useRef<NodeJS.Timeout>(undefined)
-
-  // 清理定时器
-  useEffect(() => {
-    return () => {
-      clearTimeout(checkBinariesTimerRef.current)
-    }
-  }, [])
-
-  const checkBinaries = useCallback(async () => {
-    try {
-      const uvExists = await window.api.isBinaryExist('uv')
-      const bunExists = await window.api.isBinaryExist('bun')
-      const { uvPath, bunPath, dir } = await window.api.mcp.getInstallInfo()
-
-      setIsUvInstalled(uvExists)
-      setIsBunInstalled(bunExists)
-      setUvPath(uvPath)
-      setBunPath(bunPath)
-      setBinariesDir(dir)
-    } catch {
-      // IPC failure — leave previous values unchanged
-    }
-  }, [setIsUvInstalled, setIsBunInstalled])
-
-  const installUV = async () => {
-    try {
-      setIsInstallingUv(true)
-      await window.api.installUVBinary()
-      setIsInstallingUv(false)
-      setIsUvInstalled(true)
-    } catch (error: any) {
-      window.toast.error(`${t('settings.mcp.installError')}: ${error.message}`)
-      setIsInstallingUv(false)
-    }
-    clearTimeout(checkBinariesTimerRef.current)
-    checkBinariesTimerRef.current = setTimeout(checkBinaries, 1000)
-  }
-
-  const installBun = async () => {
-    try {
-      setIsInstallingBun(true)
-      await window.api.installBunBinary()
-      setIsInstallingBun(false)
-      setIsBunInstalled(true)
-    } catch (error: any) {
-      window.toast.error(`${t('settings.mcp.installError')}: ${error.message}`)
-      setIsInstallingBun(false)
-    }
-    clearTimeout(checkBinariesTimerRef.current)
-    checkBinariesTimerRef.current = setTimeout(checkBinaries, 1000)
-  }
-
-  useEffect(() => {
-    void checkBinaries()
-  }, [checkBinaries])
-
-  if (mini) {
-    const installed = isUvInstalled && isBunInstalled
-    return (
-      <Button
-        className="nodrag rounded-full"
-        variant={installed ? 'default' : 'destructive'}
-        onClick={() => navigate({ to: '/settings/mcp/mcp-install' })}
-        size="icon">
-        {installed ? <CheckCircleOutlined /> : <WarningOutlined />}
-      </Button>
-    )
-  }
-
-  const openBinariesDir = () => {
-    if (binariesDir) {
-      void window.api.openPath(binariesDir)
-    }
-  }
-
-  const onHelp = () => {
-    window.open('https://docs.cherry-ai.com/advanced-basic/mcp', '_blank')
-  }
-
-  return (
-    <Container>
-      <Alert
-        type={isUvInstalled ? 'success' : 'warning'}
-        style={{ borderRadius: 'var(--cs-radius-2xs)' }}
-        description={
-          <ColFlex>
-            <SettingRow style={{ width: '100%' }}>
-              <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
-                {isUvInstalled ? 'UV Installed' : `UV ${t('settings.mcp.missingDependencies')}`}
-              </SettingSubtitle>
-              {!isUvInstalled && (
-                <Button onClick={installUV} disabled={isInstallingUv} size="sm">
-                  {isInstallingUv ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
-                </Button>
-              )}
-            </SettingRow>
-            <SettingRow style={{ width: '100%' }}>
-              <SettingDescription
-                onClick={openBinariesDir}
-                style={{ margin: 0, fontWeight: 'normal', cursor: 'pointer' }}>
-                {uvPath}
-              </SettingDescription>
-            </SettingRow>
-          </ColFlex>
-        }
-      />
-      <Alert
-        type={isBunInstalled ? 'success' : 'warning'}
-        style={{ borderRadius: 'var(--cs-radius-2xs)' }}
-        description={
-          <ColFlex>
-            <SettingRow style={{ width: '100%' }}>
-              <SettingSubtitle style={{ margin: 0, fontWeight: 'normal' }}>
-                {isBunInstalled ? 'Bun Installed' : `Bun ${t('settings.mcp.missingDependencies')}`}
-              </SettingSubtitle>
-              {!isBunInstalled && (
-                <Button onClick={installBun} disabled={isInstallingBun} size="sm">
-                  {isInstallingBun ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
-                </Button>
-              )}
-            </SettingRow>
-            <SettingRow style={{ width: '100%' }}>
-              <SettingDescription
-                onClick={openBinariesDir}
-                style={{ margin: 0, fontWeight: 'normal', cursor: 'pointer' }}>
-                {bunPath}
-              </SettingDescription>
-            </SettingRow>
-          </ColFlex>
-        }
-      />
-      <Center>
-        <Button variant="ghost" onClick={onHelp}>
-          <QuestionCircleOutlined />
-          {t('settings.mcp.installHelp')}
-        </Button>
-      </Center>
-    </Container>
-  )
-}
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 20px;
-  gap: 12px;
-  padding-top: 50px;
-`
-
-export default InstallNpxUv
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpDescription.tsx b/src/renderer/src/pages/settings/MCPSettings/McpDescription.tsx
index 8d69cb0ed3..1c83ec3233 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpDescription.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpDescription.tsx
@@ -1,11 +1,11 @@
+import { Spinner } from '@cherrystudio/ui'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
-import { Card } from 'antd'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import DOMPurify from 'dompurify'
 import { npxFinder } from 'npx-scope-finder'
 import type { FC } from 'react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface McpDescriptionProps {
   searchKey: string
@@ -13,6 +13,7 @@ interface McpDescriptionProps {
 
 const MCPDescription: FC<McpDescriptionProps> = ({ searchKey }) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const { shikiMarkdownIt } = useCodeStyle()
   const [loading, setLoading] = useState(false)
   const [mcpInfo, setMcpInfo] = useState<string>('')
@@ -36,16 +37,21 @@ const MCPDescription: FC<McpDescriptionProps> = ({ searchKey }) => {
   }, [shikiMarkdownIt, searchKey, t])
 
   return (
-    <Section>
-      <Card loading={loading}>
-        <div className="markdown" dangerouslySetInnerHTML={{ __html: mcpInfo }} />
-      </Card>
-    </Section>
+    <div className="w-full min-w-0 pt-2">
+      <div
+        className="rounded-lg border border-border bg-card p-6"
+        style={{
+          backgroundColor: theme === 'dark' ? 'rgba(255,255,255,0.06)' : 'var(--card)',
+          borderColor: 'var(--border)'
+        }}>
+        {loading ? (
+          <Spinner text={t('common.loading')} />
+        ) : (
+          <div className="markdown" dangerouslySetInnerHTML={{ __html: mcpInfo }} />
+        )}
+      </div>
+    </div>
   )
 }
-const Section = styled.div`
-  padding-top: 8px;
-  max-width: calc(100vw - var(--sidebar-width) - var(--settings-width) - 75px);
-`
 
 export default memo(MCPDescription)
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpDetailList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpDetailList.tsx
new file mode 100644
index 0000000000..52199062bf
--- /dev/null
+++ b/src/renderer/src/pages/settings/MCPSettings/McpDetailList.tsx
@@ -0,0 +1,53 @@
+import { cn } from '@renderer/utils/style'
+import type React from 'react'
+
+type McpDetailListProps = React.ComponentPropsWithoutRef<'dl'>
+
+interface McpDetailItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  label: React.ReactNode
+  labelClassName?: string
+  contentClassName?: string
+}
+
+export const McpDetailList = ({ className, ...props }: McpDetailListProps) => (
+  <dl className={cn('overflow-hidden rounded-md border border-border bg-background text-sm', className)} {...props} />
+)
+
+export const McpDetailItem = ({
+  label,
+  className,
+  labelClassName,
+  contentClassName,
+  children,
+  ...props
+}: McpDetailItemProps) => (
+  <div
+    className={cn(
+      'grid grid-cols-[minmax(120px,0.32fr)_minmax(0,1fr)] border-border border-b last:border-b-0',
+      className
+    )}
+    {...props}>
+    <dt
+      className={cn(
+        'min-w-0 bg-muted/35 px-3 py-2 font-medium text-foreground/80 text-sm leading-5',
+        'whitespace-normal break-words [overflow-wrap:anywhere]',
+        labelClassName
+      )}>
+      {label}
+    </dt>
+    <dd
+      className={cn(
+        'min-w-0 px-3 py-2 text-foreground text-sm leading-5',
+        'whitespace-normal break-words [overflow-wrap:anywhere]',
+        contentClassName
+      )}>
+      {children}
+    </dd>
+  </div>
+)
+
+export const RequiredMark = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('text-destructive', className)} {...props}>
+    *
+  </span>
+)
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpMarketList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpMarketList.tsx
index 201dfe62b6..959b021d78 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpMarketList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpMarketList.tsx
@@ -1,8 +1,9 @@
 import { Composio, Glama, Higress, Mcp, Mcpso, Modelscope, Pulse, Smithery, Zhipu } from '@cherrystudio/ui/icons'
+import { cn } from '@renderer/utils/style'
 import { ExternalLink } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingTitle } from '..'
 
@@ -84,18 +85,22 @@ const McpMarketList: FC = () => {
       <MarketGrid>
         {mcpMarkets.map((resource) => (
           <MarketCard key={resource.name} onClick={() => window.open(resource.url, '_blank', 'noopener,noreferrer')}>
-            <MarketHeader>
+            <MarketIconWrap>
               {typeof resource.logo !== 'string' ? (
-                <resource.logo.Avatar size={24} shape="rounded" className="mr-2" />
+                <resource.logo.Avatar size={18} shape="rounded" />
               ) : (
                 <MarketLogo src={resource.logo} alt={`${resource.name} logo`} />
               )}
-              <MarketName>{resource.name}</MarketName>
-              <ExternalLinkIcon>
-                <ExternalLink size={14} />
-              </ExternalLinkIcon>
-            </MarketHeader>
-            <MarketDescription>{t(resource.descriptionKey)}</MarketDescription>
+            </MarketIconWrap>
+            <MarketContent>
+              <MarketHeader>
+                <MarketName>{resource.name}</MarketName>
+                <ExternalLinkIcon>
+                  <ExternalLink size={13} />
+                </ExternalLinkIcon>
+              </MarketHeader>
+              <MarketDescription>{t(resource.descriptionKey)}</MarketDescription>
+            </MarketContent>
           </MarketCard>
         ))}
       </MarketGrid>
@@ -103,67 +108,52 @@ const McpMarketList: FC = () => {
   )
 }
 
-const MarketGrid = styled.div`
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
-`
+const MarketGrid = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-5 flex flex-col gap-2', className)} {...props} />
+)
 
-const MarketCard = styled.div`
-  display: flex;
-  flex-direction: column;
-  border: 0.5px solid var(--color-border);
-  border-radius: var(--cs-radius-2xs);
-  padding: 12px 16px;
-  transition: all 0.2s ease;
-  background-color: var(--color-background);
-  cursor: pointer;
-  height: 80px;
+const MarketCard = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'flex min-h-15 cursor-pointer items-center gap-3 rounded-lg border border-border/60 bg-transparent px-3 py-2.5 transition-colors hover:bg-accent',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:hover {
-    border-color: var(--color-primary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-`
+const MarketIconWrap = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex h-5 w-5 shrink-0 items-center justify-center', className)} {...props} />
+)
 
-const MarketHeader = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-`
+const MarketContent = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('min-w-0 flex-1', className)} {...props} />
+)
 
-const MarketLogo = styled.img`
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  object-fit: cover;
-  margin-right: 8px;
-`
+const MarketHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center gap-2', className)} {...props} />
+)
 
-const MarketName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
+const MarketLogo = ({ className, ...props }: React.ComponentPropsWithoutRef<'img'>) => (
+  <img className={cn('h-[18px] w-[18px] rounded object-cover', className)} {...props} />
+)
 
-const ExternalLinkIcon = styled.div`
-  color: var(--color-text-3);
-  display: flex;
-  align-items: center;
-`
+const MarketName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('flex-1 truncate font-medium text-sm', className)} {...props} />
+)
 
-const MarketDescription = styled.div`
-  font-size: 12px;
-  color: var(--color-text-2);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-height: 1.4;
-`
+const ExternalLinkIcon = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex shrink-0 items-center text-foreground-muted', className)} {...props} />
+)
+
+const MarketDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'mt-0.5 line-clamp-1 overflow-hidden text-[13px] text-foreground-secondary leading-[1.35]',
+      className
+    )}
+    {...props}
+  />
+)
 
 export default McpMarketList
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpPrompt.tsx b/src/renderer/src/pages/settings/MCPSettings/McpPrompt.tsx
index 3bf2724d3f..9c3d771303 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpPrompt.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpPrompt.tsx
@@ -1,9 +1,17 @@
-import { ColFlex, Flex } from '@cherrystudio/ui'
-import { Tooltip } from '@cherrystudio/ui'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  ColFlex,
+  EmptyState,
+  Flex,
+  Tooltip
+} from '@cherrystudio/ui'
 import type { MCPPrompt } from '@renderer/types'
-import { Collapse, Descriptions, Empty, Typography } from 'antd'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+
+import { McpDetailItem, McpDetailList, RequiredMark } from './McpDetailList'
 
 interface MCPPromptsSectionProps {
   prompts: MCPPrompt[]
@@ -17,82 +25,64 @@ const MCPPromptsSection = ({ prompts }: MCPPromptsSectionProps) => {
     if (!prompt.arguments || prompt.arguments.length === 0) return null
 
     return (
-      <div style={{ marginTop: 12 }}>
-        <Typography.Title level={5}>{t('settings.mcp.tools.inputSchema.label')}:</Typography.Title>
-        <Descriptions bordered size="small" column={1} style={{ marginTop: 8 }}>
+      <div className="mt-3">
+        <h4 className="mb-2 font-medium text-foreground text-sm">{t('settings.mcp.tools.inputSchema.label')}:</h4>
+        <McpDetailList>
           {prompt.arguments.map((arg, index) => (
-            <Descriptions.Item
+            <McpDetailItem
               key={index}
               label={
                 <Flex className="gap-1">
-                  <Typography.Text strong>{arg.name}</Typography.Text>
+                  <span className="font-medium">{arg.name}</span>
                   {arg.required && (
                     <Tooltip content={t('common.required_field')}>
-                      <span style={{ color: '#f5222d' }}>*</span>
+                      <RequiredMark />
                     </Tooltip>
                   )}
                 </Flex>
               }>
               <ColFlex className="gap-1">
                 {arg.description && (
-                  <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
-                    {arg.description}
-                  </Typography.Paragraph>
+                  <p className="m-0 text-foreground-secondary text-sm leading-5">{arg.description}</p>
                 )}
               </ColFlex>
-            </Descriptions.Item>
+            </McpDetailItem>
           ))}
-        </Descriptions>
+        </McpDetailList>
       </div>
     )
   }
 
   return (
-    <Section>
-      <SectionTitle>{t('settings.mcp.prompts.availablePrompts')}</SectionTitle>
+    <div className="mt-2 pt-2">
       {prompts.length > 0 ? (
-        <Collapse bordered={false} ghost>
-          {prompts.map((prompt) => (
-            <Collapse.Panel
-              key={prompt.id || prompt.name}
-              header={
-                <ColFlex className="items-start">
-                  <Flex className="w-full items-center">
-                    <Typography.Text strong>{prompt.name}</Typography.Text>
-                  </Flex>
-                  {prompt.description && (
-                    <Typography.Text type="secondary" style={{ fontSize: '13px', marginTop: 4 }}>
-                      {prompt.description}
-                    </Typography.Text>
-                  )}
-                </ColFlex>
-              }>
-              <SelectableContent>{renderPromptArguments(prompt)}</SelectableContent>
-            </Collapse.Panel>
-          ))}
-        </Collapse>
+        <>
+          <h3 className="mb-2 font-medium text-foreground-secondary text-sm">
+            {t('settings.mcp.prompts.availablePrompts')}
+          </h3>
+          <Accordion type="multiple">
+            {prompts.map((prompt) => (
+              <AccordionItem key={prompt.id || prompt.name} value={prompt.id || prompt.name}>
+                <AccordionTrigger className="py-3">
+                  <ColFlex className="min-w-0 items-start">
+                    <Flex className="w-full min-w-0 items-center">
+                      <span className="truncate font-medium text-foreground text-sm">{prompt.name}</span>
+                    </Flex>
+                    {prompt.description && (
+                      <span className="mt-1 text-[13px] text-foreground-secondary leading-5">{prompt.description}</span>
+                    )}
+                  </ColFlex>
+                </AccordionTrigger>
+                <AccordionContent className="select-text px-3">{renderPromptArguments(prompt)}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </>
       ) : (
-        <Empty description={t('settings.mcp.prompts.noPromptsAvailable')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        <EmptyState compact preset="no-result" description={t('settings.mcp.prompts.noPromptsAvailable')} />
       )}
-    </Section>
+    </div>
   )
 }
 
-const Section = styled.div`
-  margin-top: 8px;
-  padding-top: 8px;
-`
-
-const SectionTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: var(--color-text-secondary);
-`
-
-const SelectableContent = styled.div`
-  user-select: text;
-  padding: 0 12px;
-`
-
 export default MCPPromptsSection
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx
index 7c4a3c776f..a497d2d7fb 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpProviderSettings.tsx
@@ -1,18 +1,17 @@
+import { Button, Input } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import Scrollbar from '@renderer/components/Scrollbar'
 import db from '@renderer/databases'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
-import { Button, Divider, Flex, Input, Space } from 'antd'
-import Link from 'antd/es/typography/Link'
+import { cn } from '@renderer/utils/style'
 import { Check, Plus, SquareArrowOutUpRight } from 'lucide-react'
+import type React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
-import { SettingHelpLink, SettingHelpTextRow, SettingSubtitle } from '..'
-import { getProviderDisplayName, type ProviderConfig } from './providers/config'
+import { getMCPProviderLogo, getProviderDisplayName, type ProviderConfig } from './providers/config'
 
 const logger = loggerService.withContext('McpProviderSettings')
 
@@ -118,50 +117,67 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
   }, [existingServers, provider, t, token])
 
   const isFetchDisabled = !token
+  const ProviderLogo = getMCPProviderLogo(provider.key)
 
   return (
     <DetailContainer>
       <ProviderHeader>
-        <Flex className="items-center">
-          <ProviderName>{getProviderDisplayName(provider, t)}</ProviderName>
-          {provider.discoverUrl && (
-            <Link target="_blank" href={provider.discoverUrl} style={{ display: 'flex' }}>
-              <Button type="text" size="small">
-                <SquareArrowOutUpRight size={14} />
-              </Button>
-            </Link>
-          )}
-        </Flex>
-        <Button type="primary" onClick={handleFetch} disabled={isFetching || isFetchDisabled}>
+        <div className="flex min-w-0 items-center gap-3">
+          {ProviderLogo && <ProviderLogo.Avatar size={36} shape="circle" />}
+          <div className="min-w-0">
+            <div className="flex min-w-0 items-center gap-1.5">
+              <ProviderName>{getProviderDisplayName(provider, t)}</ProviderName>
+              {provider.discoverUrl && (
+                <Button
+                  asChild
+                  variant="ghost"
+                  size="icon-sm"
+                  className="size-6 rounded-md text-muted-foreground shadow-none hover:text-blue-600 dark:hover:text-blue-400">
+                  <a target="_blank" rel="noreferrer" href={provider.discoverUrl}>
+                    <SquareArrowOutUpRight size={13} />
+                  </a>
+                </Button>
+              )}
+            </div>
+            <ProviderDescription>{t(provider.descriptionKey)}</ProviderDescription>
+          </div>
+        </div>
+        <Button
+          onClick={handleFetch}
+          disabled={isFetching || isFetchDisabled}
+          className="h-8 shrink-0 rounded-lg px-3 text-xs shadow-none">
           {t('settings.mcp.fetch.button', 'Fetch Servers')}
         </Button>
       </ProviderHeader>
-      <Divider style={{ width: '100%', margin: '10px 0' }} />
-      <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.api_key.label')}</SettingSubtitle>
-      <Space.Compact style={{ width: '100%', marginTop: 5 }}>
-        <Input.Password
+
+      <SettingsPanel>
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <PanelTitle>{t('settings.provider.api_key.label')}</PanelTitle>
+        </div>
+        <Input
+          type="password"
           value={token}
           placeholder={t('settings.mcp.sync.tokenPlaceholder', 'Enter API token here')}
           onChange={(e) => handleTokenChange(e.target.value)}
           spellCheck={false}
+          className="h-9 rounded-lg bg-background shadow-none"
         />
-      </Space.Compact>
-      <SettingHelpTextRow>
-        <Flex dir="row">
-          {provider.apiKeyUrl && (
-            <SettingHelpLink target="_blank" href={provider.apiKeyUrl}>
-              {t('settings.provider.get_api_key')}
-            </SettingHelpLink>
-          )}
-        </Flex>
-      </SettingHelpTextRow>
+        {provider.apiKeyUrl && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={provider.apiKeyUrl}
+            className="mt-3.5 inline-flex items-center font-medium text-xs hover:underline"
+            style={{ color: 'var(--color-blue-600)' }}>
+            {t('settings.provider.get_api_key')}
+          </a>
+        )}
+      </SettingsPanel>
 
       {sortedServers.length > 0 && (
-        <>
-          <Flex justify="space-between" align="center" style={{ marginTop: 20 }}>
-            <SettingSubtitle style={{ margin: 0 }}>
-              {t('settings.mcp.servers', 'Available MCP Servers')}
-            </SettingSubtitle>
+        <SettingsPanel>
+          <div className="flex items-center justify-between">
+            <PanelTitle>{t('settings.mcp.servers', 'Available MCP Servers')}</PanelTitle>
             <CollapsibleSearchBar
               onSearch={setSearchText}
               placeholder={t('settings.mcp.search.placeholder', 'Search servers...')}
@@ -169,7 +185,7 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
               maxWidth={200}
               style={{ borderRadius: 20 }}
             />
-          </Flex>
+          </div>
           <ServerList>
             {filteredServers.map((server) => (
               <ServerItem key={server.id}>
@@ -189,7 +205,9 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
                   return (
                     <Button
                       disabled={isAlreadyAdded}
-                      style={{ marginLeft: 10 }}
+                      variant="ghost"
+                      size="icon-sm"
+                      className="ml-2.5 size-7 min-h-7 shadow-none"
                       onClick={async () => {
                         if (!isAlreadyAdded) {
                           try {
@@ -199,68 +217,64 @@ const McpProviderSettings: React.FC<Props> = ({ provider, existingServers }) =>
                             window.toast.error(t('settings.mcp.addError'))
                           }
                         }
-                      }}
-                      icon={isAlreadyAdded ? <Check size={14} /> : <Plus size={14} />}
-                    />
+                      }}>
+                      {isAlreadyAdded ? <Check size={12} /> : <Plus size={12} />}
+                    </Button>
                   )
                 })()}
               </ServerItem>
             ))}
           </ServerList>
-        </>
+        </SettingsPanel>
       )}
     </DetailContainer>
   )
 }
 
-const DetailContainer = styled(Scrollbar)`
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-`
+const DetailContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Scrollbar>) => (
+  <Scrollbar className={cn('flex h-[calc(100vh-var(--navbar-height))] flex-col px-5 py-4', className)} {...props} />
+)
 
-const ProviderHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`
+const ProviderHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center justify-between gap-3 border-border/70 border-b pb-2', className)} {...props} />
+)
 
-const ProviderName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-  margin-right: -2px;
-`
+const ProviderName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('min-w-0 truncate font-semibold text-base leading-6', className)} {...props} />
+)
 
-const ServerList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 8px;
-`
+const ProviderDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-0.5 text-muted-foreground text-xs leading-5', className)} {...props} />
+)
 
-const ServerItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  background-color: var(--color-background);
-  &:hover {
-    border-color: var(--color-primary);
-  }
-`
+const SettingsPanel = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-4', className)} {...props} />
+)
 
-const ServerName = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  margin-bottom: 4px;
-`
+const PanelTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('font-semibold text-foreground text-sm', className)} {...props} />
+)
 
-const ServerDescription = styled.div`
-  color: var(--color-text-secondary);
-  font-size: 12px;
-`
+const ServerList = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-2 flex flex-col gap-2', className)} {...props} />
+)
+
+const ServerItem = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'flex items-center justify-between rounded-lg border border-border/60 px-3 py-2 transition-colors duration-200 ease-in-out hover:border-border hover:bg-muted/35',
+      className
+    )}
+    {...props}
+  />
+)
+
+const ServerName = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-0.5 font-medium text-sm leading-5', className)} {...props} />
+)
+
+const ServerDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('line-clamp-2 text-muted-foreground text-xs leading-5', className)} {...props} />
+)
 
 export default McpProviderSettings
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpResource.tsx b/src/renderer/src/pages/settings/MCPSettings/McpResource.tsx
index 42566da37d..aafc1b4f07 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpResource.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpResource.tsx
@@ -1,8 +1,17 @@
-import { ColFlex, Flex } from '@cherrystudio/ui'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  ColFlex,
+  EmptyState,
+  Flex
+} from '@cherrystudio/ui'
 import type { MCPResource } from '@renderer/types'
-import { Collapse, Descriptions, Empty, Tag, Typography } from 'antd'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+
+import { McpDetailItem, McpDetailList } from './McpDetailList'
 
 interface MCPResourcesSectionProps {
   resources: MCPResource[]
@@ -30,80 +39,65 @@ const MCPResourcesSection = ({ resources }: MCPResourcesSectionProps) => {
   // Render resource properties
   const renderResourceProperties = (resource: MCPResource) => {
     return (
-      <Descriptions column={1} size="small" bordered>
+      <McpDetailList>
         {resource.mimeType && (
-          <Descriptions.Item label={t('settings.mcp.resources.mimeType') || 'MIME Type'}>
-            <Tag color="blue">{resource.mimeType}</Tag>
-          </Descriptions.Item>
+          <McpDetailItem label={t('settings.mcp.resources.mimeType') || 'MIME Type'}>
+            <Badge className="border-primary/30 bg-primary/10 text-primary">{resource.mimeType}</Badge>
+          </McpDetailItem>
         )}
         {resource.size !== undefined && (
-          <Descriptions.Item label={t('settings.mcp.resources.size') || 'Size'}>
+          <McpDetailItem label={t('settings.mcp.resources.size') || 'Size'}>
             {formatFileSize(resource.size)}
-          </Descriptions.Item>
+          </McpDetailItem>
         )}
         {resource.text && (
-          <Descriptions.Item label={t('settings.mcp.resources.text') || 'Text'}>{resource.text}</Descriptions.Item>
+          <McpDetailItem label={t('settings.mcp.resources.text') || 'Text'}>
+            <p className="m-0 whitespace-pre-wrap">{resource.text}</p>
+          </McpDetailItem>
         )}
         {resource.blob && (
-          <Descriptions.Item label={t('settings.mcp.resources.blob') || 'Binary Data'}>
+          <McpDetailItem label={t('settings.mcp.resources.blob') || 'Binary Data'}>
             {t('settings.mcp.resources.blobInvisible') || 'Binary data is not visible here.'}
-          </Descriptions.Item>
+          </McpDetailItem>
         )}
-      </Descriptions>
+      </McpDetailList>
     )
   }
 
   return (
-    <Section>
-      <SectionTitle>{t('settings.mcp.resources.availableResources') || 'Available Resources'}</SectionTitle>
+    <div className="mt-2 pt-2">
       {resources.length > 0 ? (
-        <Collapse bordered={false} ghost>
-          {resources.map((resource) => (
-            <Collapse.Panel
-              key={resource.uri}
-              header={
-                <ColFlex className="w-full items-start">
-                  <Flex className="w-full items-center">
-                    <Typography.Text strong>{`${resource.name} (${resource.uri})`}</Typography.Text>
-                  </Flex>
-                  {resource.description && (
-                    <Typography.Text type="secondary" style={{ fontSize: '13px', marginTop: 4 }}>
-                      {resource.description.length > 100
-                        ? `${resource.description.substring(0, 100)}...`
-                        : resource.description}
-                    </Typography.Text>
-                  )}
-                </ColFlex>
-              }>
-              <SelectableContent>{renderResourceProperties(resource)}</SelectableContent>
-            </Collapse.Panel>
-          ))}
-        </Collapse>
+        <>
+          <h3 className="mb-2 font-medium text-foreground-secondary text-sm">
+            {t('settings.mcp.resources.availableResources') || 'Available Resources'}
+          </h3>
+          <Accordion type="multiple">
+            {resources.map((resource) => (
+              <AccordionItem key={resource.uri} value={resource.uri}>
+                <AccordionTrigger className="py-3">
+                  <ColFlex className="w-full min-w-0 items-start">
+                    <Flex className="w-full min-w-0 items-center">
+                      <span className="truncate font-medium text-foreground text-sm">{`${resource.name} (${resource.uri})`}</span>
+                    </Flex>
+                    {resource.description && (
+                      <span className="mt-1 text-[13px] text-foreground-secondary leading-5">
+                        {resource.description.length > 100
+                          ? `${resource.description.substring(0, 100)}...`
+                          : resource.description}
+                      </span>
+                    )}
+                  </ColFlex>
+                </AccordionTrigger>
+                <AccordionContent className="select-text px-3">{renderResourceProperties(resource)}</AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </>
       ) : (
-        <Empty
-          description={t('settings.mcp.resources.noResourcesAvailable') || 'No resources available'}
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
+        <EmptyState compact preset="no-result" description={t('settings.mcp.resources.noResourcesAvailable')} />
       )}
-    </Section>
+    </div>
   )
 }
 
-const Section = styled.div`
-  margin-top: 8px;
-  padding-top: 8px;
-`
-
-const SectionTitle = styled.h3`
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 8px;
-  color: var(--color-text-secondary);
-`
-
-const SelectableContent = styled.div`
-  user-select: text;
-  padding: 0 12px;
-`
-
 export default MCPResourcesSection
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
index 0d190e0470..7711848b6b 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
@@ -1,31 +1,30 @@
-import { Button, Switch, Tooltip } from '@cherrystudio/ui'
+import { Alert, Badge, Button, Switch, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { DeleteIcon } from '@renderer/components/Icons'
 import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
-import Scrollbar from '@renderer/components/Scrollbar'
 import { useMCPServerMutations } from '@renderer/hooks/useMCPServers'
 import { useMCPServerTrust } from '@renderer/hooks/useMCPServerTrust'
-import { getMcpTypeLabel } from '@renderer/i18n/label'
 import { formatMcpError } from '@renderer/utils/error'
 import { formatErrorMessage } from '@renderer/utils/error'
+import { cn } from '@renderer/utils/style'
 import type { MCPServer } from '@shared/data/types/mcpServer'
-import { Alert, Space, Tag, Typography } from 'antd'
-import { CircleXIcon, Settings2, SquareArrowOutUpRight } from 'lucide-react'
+import { CircleXIcon, SquareArrowOutUpRight } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import type { FallbackProps } from 'react-error-boundary'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const logger = loggerService.withContext('McpServerCard')
 
 interface McpServerCardProps {
   server: MCPServer
+  isEditing?: boolean
   onEdit: () => void
 }
 
-const McpServerCard: FC<McpServerCardProps> = ({ server, onEdit }) => {
+const McpServerCard: FC<McpServerCardProps> = ({ server, isEditing = false, onEdit }) => {
   const { updateMCPServer, deleteMCPServer } = useMCPServerMutations(server.id)
   const [loading, setLoading] = useState(false)
   const [version, setVersion] = useState<string | null>(null)
@@ -106,12 +105,47 @@ const McpServerCard: FC<McpServerCardProps> = ({ server, onEdit }) => {
     }
   }, [server, deleteMCPServer, t])
 
-  const handleOpenUrl = () => {
-    if (server.providerUrl) {
-      window.open(server.providerUrl, '_blank')
+  const handleOpenUrl = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+
+      if (server.providerUrl) {
+        window.open(server.providerUrl, '_blank')
+      }
+    },
+    [server.providerUrl]
+  )
+
+  const sourceLabel = server.provider || (server.installSource === 'builtin' ? t('settings.mcp.builtinServers') : '')
+  const typeLabel = (server.type ?? 'stdio').toUpperCase()
+
+  const getTypeBadgeClass = () => {
+    switch (server.type) {
+      case 'sse':
+        return 'bg-success/10 text-success'
+      case 'streamableHttp':
+        return 'bg-info/10 text-info'
+      default:
+        return 'bg-muted text-muted-foreground'
     }
   }
 
+  const handleRowClick = useCallback(() => {
+    onEdit()
+  }, [onEdit])
+
+  const handleToolbarClick = useCallback((event: React.MouseEvent) => {
+    event.stopPropagation()
+  }, [])
+
+  const handleDeleteClick = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      handleDelete()
+    },
+    [handleDelete]
+  )
+
   const isLoading = loading
 
   const Fallback = useCallback(
@@ -119,212 +153,170 @@ const McpServerCard: FC<McpServerCardProps> = ({ server, onEdit }) => {
       const { error } = props
       const errorDetails = formatErrorMessage(error)
 
-      const ErrorDetails = () => {
-        return (
-          <div
-            style={{
-              padding: 8,
-              textWrap: 'pretty',
-              fontFamily: 'monospace',
-              userSelect: 'text',
-              marginRight: 20,
-              color: 'var(--color-status-error)'
-            }}>
-            {errorDetails}
-          </div>
-        )
+      const onClickDetails = () => {
+        void GeneralPopup.show({
+          content: (
+            <div
+              style={{
+                padding: 8,
+                textWrap: 'pretty',
+                fontFamily: 'monospace',
+                userSelect: 'text',
+                marginRight: 20,
+                color: 'var(--color-error-base)'
+              }}>
+              {errorDetails}
+            </div>
+          )
+        })
       }
 
-      const onClickDetails = () => {
-        void GeneralPopup.show({ content: <ErrorDetails /> })
-      }
       return (
         <Alert
           message={t('error.boundary.mcp.invalid')}
           showIcon
           type="error"
-          style={{ height: 125, alignItems: 'flex-start', padding: 12 }}
+          style={{ height: 125, alignItems: 'flex-start', padding: 12, borderRadius: 'var(--radius-lg)' }}
           description={
-            <Typography.Paragraph style={{ color: 'var(--color-status-error)' }} ellipsis={{ rows: 3 }}>
-              {errorDetails}
-            </Typography.Paragraph>
+            <div className="line-clamp-3 text-[var(--color-error-base)] text-xs leading-5">{errorDetails}</div>
           }
           onClick={onClickDetails}
           action={
-            <Space.Compact>
+            <div className="flex items-center gap-1">
               <Button variant="destructive" size="sm" onClick={onClickDetails}>
                 <Tooltip content={t('error.boundary.details')}>
                   <CircleXIcon size={16} />
                 </Tooltip>
               </Button>
-              <Button
-                variant="destructive"
-                size="sm"
-                onClick={() => {
-                  handleDelete()
-                }}>
+              <Button variant="destructive" size="sm" onClick={handleDeleteClick}>
                 <Tooltip content={t('common.delete')}>
                   <DeleteIcon size={16} />
                 </Tooltip>
               </Button>
-            </Space.Compact>
+            </div>
           }
         />
       )
     },
-    [handleDelete, t]
+    [handleDeleteClick, t]
   )
 
   return (
     <ErrorBoundary fallbackComponent={Fallback}>
-      <CardContainer $isActive={server.isActive} onClick={onEdit}>
-        <ServerHeader>
-          <ServerNameWrapper>
-            {server.logoUrl && <ServerLogo src={server.logoUrl} alt={`${server.name} logo`} />}
-            <ServerNameText ellipsis={{ tooltip: true }}>{server.name}</ServerNameText>
-            {server.providerUrl && (
-              <Button variant="ghost" size="sm" className="rounded-full" onClick={handleOpenUrl} data-no-dnd>
-                <SquareArrowOutUpRight size={14} />
-              </Button>
-            )}
-          </ServerNameWrapper>
-          <ToolbarWrapper onClick={(e) => e.stopPropagation()}>
-            <Switch
-              checked={server.isActive}
-              key={server.id}
-              disabled={isLoading}
-              onCheckedChange={handleToggleActive}
-              data-no-dnd
-            />
-            <Button size="sm" variant="destructive" className="rounded-full" onClick={handleDelete}>
+      <CardContainer onClick={handleRowClick} data-slot="mcp-server-row">
+        <ServerNameCell>
+          <ActiveDot $active={server.isActive} />
+          {server.logoUrl && <ServerLogo src={server.logoUrl} alt={`${server.name} logo`} />}
+          <ServerNameText title={server.name} className={server.isActive ? 'text-foreground' : 'text-muted-foreground'}>
+            {server.name}
+          </ServerNameText>
+        </ServerNameCell>
+
+        <MutedCell>{version || '—'}</MutedCell>
+
+        <div className="min-w-0 shrink-0">
+          <MetaBadge className={getTypeBadgeClass()}>{typeLabel}</MetaBadge>
+        </div>
+
+        <SourceCell>
+          {sourceLabel ? (
+            <MetaBadge className={server.provider ? 'bg-success/10 text-success' : 'bg-muted text-muted-foreground'}>
+              {sourceLabel}
+            </MetaBadge>
+          ) : (
+            <span className="text-muted-foreground/70">—</span>
+          )}
+          {server.providerUrl && (
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="size-7 rounded-md text-muted-foreground shadow-none hover:text-foreground"
+              onClick={handleOpenUrl}
+              data-no-dnd>
+              <SquareArrowOutUpRight size={13} />
+            </Button>
+          )}
+        </SourceCell>
+
+        <ToolbarWrapper onClick={handleToolbarClick}>
+          {isEditing && (
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="size-7 rounded-md text-muted-foreground shadow-none hover:text-destructive"
+              onClick={handleDeleteClick}>
               <DeleteIcon size={14} className="lucide-custom" />
             </Button>
-            <Button size="sm" variant="ghost" className="rounded-full" onClick={onEdit} data-no-dnd>
-              <Settings2 size={14} />
-            </Button>
-          </ToolbarWrapper>
-        </ServerHeader>
-        <ServerDescription>{server.description}</ServerDescription>
-        <ServerFooter>
-          {version && (
-            <VersionBadge color="#108ee9">
-              <VersionText ellipsis={{ tooltip: true }}>{version}</VersionText>
-            </VersionBadge>
           )}
-          <ServerTag color="processing">{getMcpTypeLabel(server.type ?? 'stdio')}</ServerTag>
-          {server.provider && <ServerTag color="success">{server.provider}</ServerTag>}
-          {server.tags
-            ?.filter((tag): tag is string => typeof tag === 'string') // Avoid existing non-string tags crash the UI
-            .map((tag) => (
-              <ServerTag key={tag} color="default">
-                {tag}
-              </ServerTag>
-            ))}
-        </ServerFooter>
+          <Switch
+            checked={server.isActive}
+            key={server.id}
+            disabled={isLoading}
+            size="xs"
+            className="shadow-none data-[state=checked]:bg-success/85"
+            onCheckedChange={handleToggleActive}
+            data-no-dnd
+          />
+        </ToolbarWrapper>
       </CardContainer>
     </ErrorBoundary>
   )
 }
 
-// Styled components
-const CardContainer = styled.div<{ $isActive: boolean }>`
-  display: flex;
-  flex-direction: column;
-  border: 0.5px solid var(--color-border);
-  border-radius: var(--cs-radius-2xs);
-  padding: 10px 10px 10px 16px;
-  transition: all 0.2s ease;
-  background-color: var(--color-background);
-  margin-bottom: 5px;
-  height: 125px;
-  opacity: ${(props) => (props.$isActive ? 1 : 0.6)};
-  width: 100%;
+const CardContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'flex min-h-12 w-full min-w-0 cursor-pointer items-center gap-3 border-border/60 border-b px-3 py-1.5 text-sm transition-colors hover:bg-muted/35',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:hover {
-    opacity: 1;
-    border-color: var(--color-primary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  }
-`
+const ServerNameCell = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex min-w-0 flex-1 items-center gap-2.5', className)} {...props} />
+)
 
-const ServerHeader = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-`
+const ServerNameText = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('min-w-0 truncate font-bold text-[14px] leading-5', className)} {...props} />
+)
 
-const ServerNameWrapper = styled.div`
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`
+const ServerLogo = ({ className, ...props }: React.ComponentPropsWithoutRef<'img'>) => (
+  <img className={cn('size-5 shrink-0 rounded object-cover', className)} {...props} />
+)
 
-const ServerNameText = styled(Typography.Text)`
-  font-size: 15px;
-  font-weight: 500;
-`
+const MutedCell = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn('hidden w-14 shrink-0 truncate text-muted-foreground text-sm min-[1180px]:block', className)}
+    {...props}
+  />
+)
 
-const ServerLogo = styled.img`
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  object-fit: cover;
-  margin-right: 8px;
-`
+const SourceCell = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('hidden min-w-0 shrink-0 items-center gap-1.5 min-[1320px]:flex', className)} {...props} />
+)
 
-const ToolbarWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: 8px;
+const ToolbarWrapper = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('ml-auto flex shrink-0 items-center justify-end gap-2', className)} {...props} />
+)
 
-  > :first-child {
-    margin-right: 4px;
-  }
-`
+const ActiveDot = ({ $active, className, ...props }: React.ComponentPropsWithoutRef<'div'> & { $active: boolean }) => (
+  <div
+    className={cn(
+      'size-2 shrink-0 rounded-full',
+      $active ? 'bg-success/85 ring-2 ring-success/15' : 'bg-muted-foreground/30',
+      className
+    )}
+    {...props}
+  />
+)
 
-const ServerDescription = styled.div`
-  font-size: 12px;
-  color: var(--color-text-2);
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  width: 100%;
-  word-break: break-word;
-  height: 50px;
-`
-
-const ServerFooter = styled(Scrollbar)`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: row;
-  overflow-x: auto;
-  min-height: 22px;
-  gap: 4px;
-  margin-top: 10px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-const ServerTag = styled(Tag)`
-  border-radius: 20px;
-  margin: 0;
-`
-
-const VersionBadge = styled(ServerTag)`
-  font-weight: 500;
-  max-width: 6rem !important;
-`
-
-const VersionText = styled(Typography.Text)`
-  font-size: inherit;
-  color: white;
-`
+const MetaBadge = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Badge>) => (
+  <Badge
+    variant="secondary"
+    className={cn('h-5 max-w-full rounded-md border-transparent px-2 font-medium text-[11px] leading-none', className)}
+    {...props}
+  />
+)
 
 export default McpServerCard
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
index 635b650e36..0079b5bbfd 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
@@ -1,4 +1,17 @@
-import { Sortable, useDndReorder } from '@cherrystudio/ui'
+import {
+  Button,
+  EmptyState,
+  MenuItem,
+  MenuList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Sortable,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  useDndReorder
+} from '@cherrystudio/ui'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { EditIcon } from '@renderer/components/Icons'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -7,17 +20,14 @@ import { matchKeywordsInString } from '@renderer/utils/match'
 import type { CreateMCPServerDto } from '@shared/data/api/schemas/mcpServers'
 import type { MCPServer } from '@shared/data/types/mcpServer'
 import { useNavigate } from '@tanstack/react-router'
-import { Button, Dropdown, Empty } from 'antd'
-import { Plus } from 'lucide-react'
+import { Plus, Search } from 'lucide-react'
 import type { FC } from 'react'
 import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingTitle } from '..'
 import AddMcpServerModal from './AddMcpServerModal'
-import EditMcpJsonPopup from './EditMcpJsonPopup'
-import InstallNpxUv from './InstallNpxUv'
+import EnvironmentDependencies from './EnvironmentDependencies'
 import McpServerCard from './McpServerCard'
 
 const McpServersList: FC = () => {
@@ -25,7 +35,10 @@ const McpServersList: FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const [isAddModalVisible, setIsAddModalVisible] = useState(false)
+  const [isAddMenuOpen, setIsAddMenuOpen] = useState(false)
   const [modalType, setModalType] = useState<'json' | 'dxt'>('json')
+  const [isEditing, setIsEditing] = useState(false)
+  const [filter, setFilter] = useState<'all' | 'enabled' | 'disabled' | 'stdio' | 'sse' | 'builtin'>('all')
 
   const [searchText, _setSearchText] = useState('')
 
@@ -36,15 +49,23 @@ const McpServersList: FC = () => {
   }, [])
 
   const filteredMcpServers = useMemo(() => {
-    if (!searchText.trim()) return mcpServers
-
     const keywords = searchText.toLowerCase().split(/\s+/).filter(Boolean)
 
     return mcpServers.filter((server) => {
-      const searchTarget = `${server.name} ${server.description} ${server.tags?.join(' ')}`
+      if (filter === 'enabled' && !server.isActive) return false
+      if (filter === 'disabled' && server.isActive) return false
+      if (filter === 'stdio' && server.type !== 'stdio') return false
+      if (filter === 'sse' && server.type !== 'sse') return false
+      if (filter === 'builtin' && server.installSource !== 'builtin') return false
+
+      if (keywords.length === 0) return true
+
+      const searchTarget = `${server.name} ${server.description} ${server.tags?.join(' ')} ${server.provider ?? ''}`
       return matchKeywordsInString(keywords, searchTarget)
     })
-  }, [mcpServers, searchText])
+  }, [filter, mcpServers, searchText])
+
+  const activeServerCount = useMemo(() => mcpServers.filter((server) => server.isActive).length, [mcpServers])
 
   const { onSortEnd } = useDndReorder({
     originalList: mcpServers,
@@ -99,82 +120,130 @@ const McpServersList: FC = () => {
     [addMCPServer, t]
   )
 
-  const menuItems = useMemo(
-    () => [
-      {
-        key: 'manual',
-        label: t('settings.mcp.addServer.create'),
-        onClick: () => {
-          void onAddMcpServer()
-        }
-      },
-      {
-        key: 'json',
-        label: t('settings.mcp.addServer.importFrom.json'),
-        onClick: () => {
-          setModalType('json')
-          setIsAddModalVisible(true)
-        }
-      },
-      {
-        key: 'dxt',
-        label: t('settings.mcp.addServer.importFrom.dxt'),
-        onClick: () => {
-          setModalType('dxt')
-          setIsAddModalVisible(true)
-        }
-      }
-    ],
-    [onAddMcpServer, t]
-  )
+  const handleManualAdd = useCallback(() => {
+    setIsAddMenuOpen(false)
+    void onAddMcpServer()
+  }, [onAddMcpServer])
+
+  const handleImportJson = useCallback(() => {
+    setIsAddMenuOpen(false)
+    setModalType('json')
+    setIsAddModalVisible(true)
+  }, [])
+
+  const handleImportDxt = useCallback(() => {
+    setIsAddMenuOpen(false)
+    setModalType('dxt')
+    setIsAddModalVisible(true)
+  }, [])
 
   return (
-    <Container ref={scrollRef}>
-      <ListHeader>
-        <SettingTitle style={{ gap: 6 }}>
-          <span>{t('settings.mcp.newServer')}</span>
+    <div className="flex h-[calc(100vh-var(--navbar-height))] w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden px-5 py-4">
+      <div className="flex w-full flex-wrap items-center justify-between gap-3">
+        <div className="flex min-w-0 flex-wrap items-center gap-3">
+          <div className="flex min-w-0 items-center gap-3">
+            <SettingTitle>{t('settings.mcp.newServer')}</SettingTitle>
+            <span className="shrink-0 text-muted-foreground text-sm">
+              {activeServerCount}/{mcpServers.length}
+            </span>
+          </div>
           <CollapsibleSearchBar
             onSearch={setSearchText}
             placeholder={t('settings.mcp.search.placeholder')}
             tooltip={t('settings.mcp.search.tooltip')}
-            style={{ borderRadius: 20 }}
+            icon={<Search size={15} className="text-muted-foreground" />}
+            maxWidth={200}
+            style={{ borderRadius: 16 }}
           />
-        </SettingTitle>
-        <ButtonGroup>
-          <InstallNpxUv mini />
-          <Button icon={<EditIcon size={14} />} type="default" shape="round" onClick={() => EditMcpJsonPopup.show()}>
-            {t('common.edit')}
+        </div>
+        <div className="flex min-w-0 flex-wrap items-center justify-end gap-2">
+          <EnvironmentDependencies mini />
+          <Button
+            variant="ghost"
+            className="h-8 rounded-lg px-2.5 text-xs shadow-none"
+            onClick={() => setIsEditing((value) => !value)}>
+            <EditIcon size={14} />
+            {isEditing ? t('common.completed') : t('common.edit')}
           </Button>
-          <Dropdown menu={{ items: menuItems }} trigger={['click']} placement="bottomRight">
-            <Button icon={<Plus size={16} />} type="default" shape="round">
-              {t('common.add')}
-            </Button>
-          </Dropdown>
-        </ButtonGroup>
-      </ListHeader>
-      <Sortable
-        items={filteredMcpServers}
-        itemKey="id"
-        onSortEnd={onSortEnd}
-        layout="list"
-        horizontal={false}
-        listStyle={{ display: 'flex', flexDirection: 'column', width: '100%' }}
-        itemStyle={{ width: '100%' }}
-        gap="12px"
-        restrictions={{ scrollableAncestor: true }}
-        useDragOverlay
-        showGhost
-        renderItem={(server) => (
-          <McpServerCard server={server} onEdit={() => navigate({ to: `/settings/mcp/settings/${server.id}` })} />
-        )}
-      />
-      {(mcpServers.length === 0 || filteredMcpServers.length === 0) && (
-        <Empty
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-          description={mcpServers.length === 0 ? t('settings.mcp.noServers') : t('common.no_results')}
-          style={{ marginTop: 20 }}
-        />
-      )}
+          <Popover open={isAddMenuOpen} onOpenChange={setIsAddMenuOpen}>
+            <PopoverTrigger asChild>
+              <Button variant="secondary" className="h-8 rounded-lg px-2.5 text-xs shadow-none">
+                <Plus size={15} />
+                {t('common.add')}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" side="bottom" className="w-auto p-1">
+              <MenuList className="gap-1">
+                <MenuItem label={t('settings.mcp.addServer.create')} onClick={handleManualAdd} />
+                <MenuItem label={t('settings.mcp.addServer.importFrom.json')} onClick={handleImportJson} />
+                <MenuItem label={t('settings.mcp.addServer.importFrom.dxt')} onClick={handleImportDxt} />
+              </MenuList>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+      <div className="flex w-full min-w-0 flex-wrap items-center gap-3">
+        <Tabs value={filter} onValueChange={(value) => setFilter(value as typeof filter)} className="hidden xl:block">
+          <TabsList className="h-8 rounded-full bg-muted/70 p-0.5">
+            <TabsTrigger value="all" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('models.all')}
+            </TabsTrigger>
+            <TabsTrigger value="enabled" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('common.enabled')}
+            </TabsTrigger>
+            <TabsTrigger value="disabled" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('common.disabled')}
+            </TabsTrigger>
+            <TabsTrigger value="stdio" className="h-7 rounded-[14px] px-2.5 text-xs">
+              STDIO
+            </TabsTrigger>
+            <TabsTrigger value="sse" className="h-7 rounded-[14px] px-2.5 text-xs">
+              SSE
+            </TabsTrigger>
+            <TabsTrigger value="builtin" className="h-7 rounded-[14px] px-2.5 text-xs">
+              {t('settings.mcp.builtinServers')}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+      <div className="flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-xl border border-border/70">
+        <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+          <div className="flex min-h-0 w-full min-w-0 flex-1 flex-col">
+            <Scrollbar ref={scrollRef} className="min-h-0 flex-1">
+              {filteredMcpServers.length > 0 ? (
+                <Sortable
+                  className="[&>div:last-child_[data-slot=mcp-server-row]]:border-b-0"
+                  items={filteredMcpServers}
+                  itemKey="id"
+                  onSortEnd={onSortEnd}
+                  layout="list"
+                  horizontal={false}
+                  listStyle={{ display: 'flex', flexDirection: 'column', width: '100%', gap: 0 }}
+                  itemStyle={{ width: '100%' }}
+                  gap={0}
+                  restrictions={{ scrollableAncestor: true }}
+                  useDragOverlay
+                  showGhost
+                  renderItem={(server) => (
+                    <McpServerCard
+                      server={server}
+                      isEditing={isEditing}
+                      onEdit={() => navigate({ to: `/settings/mcp/settings/${server.id}` })}
+                    />
+                  )}
+                />
+              ) : (
+                <EmptyState
+                  compact
+                  preset="no-resource"
+                  description={mcpServers.length === 0 ? t('settings.mcp.noServers') : t('common.no_results')}
+                  className="py-12"
+                />
+              )}
+            </Scrollbar>
+          </div>
+        </div>
+      </div>
 
       <AddMcpServerModal
         visible={isAddModalVisible}
@@ -183,39 +252,8 @@ const McpServersList: FC = () => {
         existingServers={mcpServers} // 傳遞現有的伺服器列表
         initialImportMethod={modalType}
       />
-    </Container>
+    </div>
   )
 }
 
-const Container = styled(Scrollbar)`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - var(--navbar-height));
-  overflow: hidden;
-  padding: 20px;
-  padding-top: 15px;
-  gap: 15px;
-  overflow-y: auto;
-`
-
-const ListHeader = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  h2 {
-    font-size: 22px;
-    margin: 0;
-  }
-`
-
-const ButtonGroup = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-
 export default McpServersList
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
index a5ea439454..94d3dad5e7 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
@@ -1,7 +1,37 @@
-import { Flex, Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Flex,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  InfoTooltip,
+  Input,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea
+} from '@cherrystudio/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { loggerService } from '@logger'
 import type { McpError } from '@modelcontextprotocol/sdk/types.js'
+import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { DeleteIcon } from '@renderer/components/Icons'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useTheme } from '@renderer/context/ThemeProvider'
@@ -10,44 +40,54 @@ import { useMCPServerTrust } from '@renderer/hooks/useMCPServerTrust'
 import MCPDescription from '@renderer/pages/settings/MCPSettings/McpDescription'
 import type { MCPPrompt, MCPResource, MCPTool } from '@renderer/types'
 import { parseKeyValueString } from '@renderer/utils/env'
-import { formatMcpError } from '@renderer/utils/error'
+import { formatErrorMessage, formatMcpError } from '@renderer/utils/error'
+import { cn } from '@renderer/utils/style'
 import type { MCPServerLogEntry } from '@shared/config/types'
 import type { MCPServer } from '@shared/data/types/mcpServer'
 import { useNavigate, useParams } from '@tanstack/react-router'
-import type { TabsProps } from 'antd'
-import { Badge, Form, Input, Modal, Radio, Select, Tabs, Tag, Typography } from 'antd'
-import TextArea from 'antd/es/input/TextArea'
-import { ChevronDown, SaveIcon } from 'lucide-react'
+import { ArrowLeft, ChevronDown, SaveIcon, X } from 'lucide-react'
 import React, { useCallback, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import * as z from 'zod'
 
-import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '..'
+import { SettingContainer, SettingDivider, SettingTitle } from '..'
 import MCPPromptsSection from './McpPrompt'
 import MCPResourcesSection from './McpResource'
 import MCPToolsSection from './McpTool'
 
 const logger = loggerService.withContext('McpSettings')
 
-interface MCPFormValues {
-  name: string
-  description?: string
-  serverType: MCPServer['type']
-  baseUrl?: string
-  command?: string
-  registryUrl?: string
-  args?: string
-  env?: string
-  isActive: boolean
-  headers?: string
-  longRunning?: boolean
-  timeout?: number
+const buildMcpSchema = (t: (key: string) => string) =>
+  z
+    .object({
+      name: z.string().min(1, t('common.name')),
+      description: z.string().optional(),
+      serverType: z.enum(['stdio', 'sse', 'streamableHttp', 'inMemory']),
+      baseUrl: z.string().optional(),
+      command: z.string().optional(),
+      registryUrl: z.string().optional(),
+      args: z.string().optional(),
+      env: z.string().optional(),
+      isActive: z.boolean().optional(),
+      headers: z.string().optional(),
+      longRunning: z.boolean().optional(),
+      timeout: z.coerce.number().optional(),
+      provider: z.string().optional(),
+      providerUrl: z.string().optional(),
+      logoUrl: z.string().optional(),
+      tags: z.array(z.string()).optional()
+    })
+    .superRefine((value, ctx) => {
+      if ((value.serverType === 'sse' || value.serverType === 'streamableHttp') && !value.baseUrl?.trim()) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ['baseUrl'], message: t('settings.mcp.url') })
+      }
+      if (value.serverType === 'stdio' && !value.command?.trim()) {
+        ctx.addIssue({ code: z.ZodIssueCode.custom, path: ['command'], message: t('settings.mcp.command') })
+      }
+    })
 
-  provider?: string
-  providerUrl?: string
-  logoUrl?: string
-  tags?: string[]
-}
+type MCPFormValues = z.infer<ReturnType<typeof buildMcpSchema>>
 
 interface Registry {
   name: string
@@ -67,6 +107,11 @@ const PipRegistry: Registry[] = [
 ]
 
 type TabKey = 'settings' | 'description' | 'tools' | 'prompts' | 'resources'
+type McpTabItem = {
+  key: TabKey
+  label: React.ReactNode
+  children: React.ReactNode
+}
 
 const McpSettings: React.FC = () => {
   const { t } = useTranslation()
@@ -78,11 +123,32 @@ const McpSettings: React.FC = () => {
 
   const { ensureServerTrusted } = useMCPServerTrust(updateServerBody)
   const [serverType, setServerType] = useState<MCPServer['type']>('stdio')
-  const [form] = Form.useForm<MCPFormValues>()
+  const form = useForm<MCPFormValues>({
+    resolver: zodResolver(buildMcpSchema(t)) as any,
+    defaultValues: {
+      name: '',
+      description: '',
+      serverType: 'stdio',
+      baseUrl: '',
+      command: '',
+      registryUrl: '',
+      args: '',
+      env: '',
+      isActive: false,
+      headers: '',
+      longRunning: false,
+      timeout: undefined,
+      provider: '',
+      providerUrl: '',
+      logoUrl: '',
+      tags: []
+    }
+  })
   const [loading, setLoading] = useState(false)
   const [isFormChanged, setIsFormChanged] = useState(false)
   const [loadingServer, setLoadingServer] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<TabKey>('settings')
+  const [toolSearchText, setToolSearchText] = useState('')
 
   const [tools, setTools] = useState<MCPTool[]>([])
   const [prompts, setPrompts] = useState<MCPPrompt[]>([])
@@ -98,7 +164,6 @@ const McpSettings: React.FC = () => {
   const [logs, setLogs] = useState<(MCPServerLogEntry & { serverId?: string })[]>([])
 
   const { theme } = useTheme()
-  const { Text } = Typography
 
   const navigate = useNavigate()
 
@@ -148,10 +213,9 @@ const McpSettings: React.FC = () => {
       }
     }
 
-    // Initialize basic fields
-    form.setFieldsValue({
+    form.reset({
       name: server.name,
-      description: server.description,
+      description: server.description ?? '',
       serverType: serverType,
       baseUrl: server.baseUrl || '',
       command: server.command || '',
@@ -169,12 +233,7 @@ const McpSettings: React.FC = () => {
         ? Object.entries(server.headers)
             .map(([key, value]) => `${key}=${value}`)
             .join('\n')
-        : ''
-    })
-
-    // Initialize advanced fields separately to ensure they're captured
-    // even if the Collapse panel is closed
-    form.setFieldsValue({
+        : '',
       provider: server.provider || '',
       providerUrl: server.providerUrl || '',
       logoUrl: server.logoUrl || '',
@@ -183,13 +242,12 @@ const McpSettings: React.FC = () => {
   }, [server, form])
 
   // Watch for serverType changes
+  const watchedServerType = form.watch('serverType')
   useEffect(() => {
-    const currentServerType = form.getFieldValue('serverType')
-    if (currentServerType) {
-      setServerType(currentServerType)
+    if (watchedServerType) {
+      setServerType(watchedServerType)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [form.getFieldValue('serverType')])
+  }, [watchedServerType])
 
   const fetchTools = async () => {
     if (server?.isActive) {
@@ -198,7 +256,8 @@ const McpSettings: React.FC = () => {
         const localTools = await window.api.mcp.listTools(server)
         setTools(localTools)
       } catch (error) {
-        setLoadingServer(server.id)
+        logger.error('Failed to list MCP tools', error as Error)
+        setTools([])
       } finally {
         setLoadingServer(null)
       }
@@ -212,6 +271,7 @@ const McpSettings: React.FC = () => {
         const localPrompts = await window.api.mcp.listPrompts(server)
         setPrompts(localPrompts)
       } catch (error) {
+        logger.error('Failed to list MCP prompts', error as Error)
         setPrompts([])
       } finally {
         setLoadingServer(null)
@@ -226,6 +286,7 @@ const McpSettings: React.FC = () => {
         const localResources = await window.api.mcp.listResources(server)
         setResources(localResources)
       } catch (error) {
+        logger.error('Failed to list MCP resources', error as Error)
         setResources([])
       } finally {
         setLoadingServer(null)
@@ -239,6 +300,7 @@ const McpSettings: React.FC = () => {
         const version = await window.api.mcp.getServerVersion(server)
         setServerVersion(version)
       } catch (error) {
+        logger.error('Failed to get MCP server version', error as Error)
         setServerVersion(null)
       }
     }
@@ -295,7 +357,12 @@ const McpSettings: React.FC = () => {
     if (!server) return
     setLoading(true)
     try {
-      const values = await form.validateFields()
+      const isValid = await form.trigger()
+      if (!isValid) {
+        setLoading(false)
+        return
+      }
+      const values = form.getValues()
 
       // set basic fields
       const mcpServer: MCPServer = {
@@ -304,7 +371,7 @@ const McpSettings: React.FC = () => {
         name: values.name,
         type: values.serverType || server.type,
         description: values.description,
-        isActive: values.isActive,
+        isActive: values.isActive ?? server.isActive,
         registryUrl: values.registryUrl,
         searchKey: server.searchKey,
         timeout: values.timeout || server.timeout,
@@ -340,7 +407,12 @@ const McpSettings: React.FC = () => {
           window.toast.success(t('settings.mcp.updateSuccess'))
           setIsFormChanged(false)
         } catch (error: any) {
-          await updateMCPServer({ body: { ...mcpServer, isActive: false } }).catch(() => {})
+          try {
+            await updateMCPServer({ body: { ...mcpServer, isActive: false } })
+          } catch (rollbackError) {
+            logger.error('Failed to rollback MCP server active state after restart failure:', rollbackError as Error)
+            window.toast.error(`${t('settings.mcp.updateError')}: ${formatErrorMessage(rollbackError)}`)
+          }
           window.modal.error({
             title: t('settings.mcp.updateError'),
             content: error.message,
@@ -374,7 +446,7 @@ const McpSettings: React.FC = () => {
   }
 
   const onSelectRegistry = (url: string) => {
-    const command = form.getFieldValue('command') || ''
+    const command = form.getValues('command') || ''
 
     // If custom registry is selected
     if (url === 'custom') {
@@ -388,12 +460,9 @@ const McpSettings: React.FC = () => {
 
     // Add new registry env variables
     if (command.includes('uv') || command.includes('uvx')) {
-      // envs['PIP_INDEX_URL'] = url
-      // envs['UV_DEFAULT_INDEX'] = url
-      form.setFieldsValue({ registryUrl: url })
+      form.setValue('registryUrl', url)
     } else if (command.includes('npx') || command.includes('bun') || command.includes('bunx')) {
-      // envs['NPM_CONFIG_REGISTRY'] = url
-      form.setFieldsValue({ registryUrl: url })
+      form.setValue('registryUrl', url)
     }
 
     // Mark form as changed
@@ -402,7 +471,7 @@ const McpSettings: React.FC = () => {
 
   const onCustomRegistryChange = (url: string) => {
     setCustomRegistryUrl(url)
-    form.setFieldsValue({ registryUrl: url })
+    form.setValue('registryUrl', url)
     setIsFormChanged(true)
   }
 
@@ -413,6 +482,7 @@ const McpSettings: React.FC = () => {
           title: t('settings.mcp.deleteServer'),
           content: t('settings.mcp.deleteServerConfirm'),
           centered: true,
+          okButtonProps: { danger: true },
           onOk: async () => {
             await window.api.mcp.removeServer(serverToDelete)
             await deleteMCPServer({})
@@ -435,7 +505,11 @@ const McpSettings: React.FC = () => {
       return
     }
 
-    await form.validateFields()
+    const isValid = await form.trigger()
+    if (!isValid) {
+      return
+    }
+
     let serverForUpdate = server
     if (active) {
       const trustedServer = await ensureServerTrusted(server)
@@ -472,7 +546,9 @@ const McpSettings: React.FC = () => {
         content: formatMcpError(error as McpError),
         centered: true
       })
-      void updateMCPServer({ body: { isActive: oldActiveState } })
+      void updateMCPServer({ body: { isActive: oldActiveState } }).catch((rollbackError) => {
+        logger.error('Failed to rollback MCP server active state after toggle failure:', rollbackError as Error)
+      })
     } finally {
       setLoadingServer(null)
     }
@@ -526,202 +602,397 @@ const McpSettings: React.FC = () => {
     return null
   }
 
-  const tabs: TabsProps['items'] = [
+  const tabs: McpTabItem[] = [
     {
       key: 'settings',
       label: t('settings.mcp.tabs.general'),
       children: (
-        <Form
-          form={form}
-          layout="vertical"
-          onValuesChange={() => setIsFormChanged(true)}
-          style={{
-            overflowY: 'auto',
-            width: 'calc(100% + 10px)',
-            paddingRight: '10px'
-          }}>
-          <Form.Item name="name" label={t('settings.mcp.name')} rules={[{ required: true, message: '' }]}>
-            <Input placeholder={t('common.name')} disabled={server.type === 'inMemory'} />
-          </Form.Item>
-          <Form.Item name="description" label={t('settings.mcp.description')}>
-            <TextArea rows={2} placeholder={t('common.description')} />
-          </Form.Item>
-          {server.type !== 'inMemory' && (
-            <Form.Item
-              name="serverType"
-              label={t('settings.mcp.type')}
-              rules={[{ required: true }]}
-              initialValue="stdio">
-              <Select
-                onChange={(value) => setServerType(value)}
-                options={[
-                  { label: t('settings.mcp.stdio'), value: 'stdio' },
-                  { label: t('settings.mcp.sse'), value: 'sse' },
-                  { label: t('settings.mcp.streamableHttp'), value: 'streamableHttp' }
-                ]}
-              />
-            </Form.Item>
-          )}
-          {serverType === 'sse' && (
-            <>
-              <Form.Item
-                name="baseUrl"
-                label={t('settings.mcp.url')}
-                rules={[{ required: serverType === 'sse', message: '' }]}
-                tooltip={t('settings.mcp.baseUrlTooltip')}>
-                <Input placeholder="http://localhost:3000/sse" />
-              </Form.Item>
-              <Form.Item name="headers" label={t('settings.mcp.headers')} tooltip={t('settings.mcp.headersTooltip')}>
-                <TextArea
-                  rows={3}
-                  placeholder={`Content-Type=application/json\nAuthorization=Bearer token`}
-                  style={{ fontFamily: 'monospace' }}
+        <Form {...form}>
+          <form
+            onChange={() => setIsFormChanged(true)}
+            className="flex w-full min-w-0 flex-col gap-5 pb-6"
+            id="mcp-settings-form">
+            <McpFormSection>
+              <McpFormGrid>
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem className="min-w-0">
+                      <FormLabel>{t('settings.mcp.name')}</FormLabel>
+                      <FormControl>
+                        <Input placeholder={t('common.name')} disabled={server.type === 'inMemory'} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
                 />
-              </Form.Item>
-            </>
-          )}
-          {serverType === 'streamableHttp' && (
-            <>
-              <Form.Item
-                name="baseUrl"
-                label={t('settings.mcp.url')}
-                rules={[{ required: serverType === 'streamableHttp', message: '' }]}
-                tooltip={t('settings.mcp.baseUrlTooltip')}>
-                <Input placeholder="http://localhost:3000/mcp" />
-              </Form.Item>
-              <Form.Item name="headers" label={t('settings.mcp.headers')} tooltip={t('settings.mcp.headersTooltip')}>
-                <TextArea
-                  rows={3}
-                  placeholder={`Content-Type=application/json\nAuthorization=Bearer token`}
-                  style={{ fontFamily: 'monospace' }}
+                {server.type !== 'inMemory' && (
+                  <FormField
+                    control={form.control}
+                    name="serverType"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel>{t('settings.mcp.type')}</FormLabel>
+                        <FormControl>
+                          <Select
+                            value={field.value}
+                            onValueChange={(value) => {
+                              field.onChange(value)
+                              setServerType(value as MCPServer['type'])
+                            }}>
+                            <SelectTrigger className="w-full">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="stdio">{t('settings.mcp.stdio')}</SelectItem>
+                              <SelectItem value="sse">{t('settings.mcp.sse')}</SelectItem>
+                              <SelectItem value="streamableHttp">{t('settings.mcp.streamableHttp')}</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                )}
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem className="min-w-0 xl:col-span-2">
+                      <FormLabel>{t('settings.mcp.description')}</FormLabel>
+                      <FormControl>
+                        <Textarea.Input
+                          rows={2}
+                          placeholder={t('common.description')}
+                          className="min-h-[64px] px-3 py-2 text-sm leading-5"
+                          {...field}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
                 />
-              </Form.Item>
-            </>
-          )}
-          {serverType === 'stdio' && (
-            <>
-              <Form.Item
-                name="command"
-                label={t('settings.mcp.command')}
-                rules={[{ required: serverType === 'stdio', message: '' }]}>
-                <Input placeholder="uvx or npx" onChange={(e) => handleCommandChange(e.target.value)} />
-              </Form.Item>
+              </McpFormGrid>
+            </McpFormSection>
 
-              {isShowRegistry && registry && (
-                <Form.Item
-                  name="registryUrl"
-                  label={t('settings.mcp.registry')}
-                  tooltip={t('settings.mcp.registryTooltip')}>
-                  <Radio.Group
-                    value={selectedRegistryType === 'custom' ? 'custom' : form.getFieldValue('registryUrl') || ''}>
-                    <Radio
-                      key="no-proxy"
-                      value=""
-                      onChange={(e) => {
-                        onSelectRegistry(e.target.value)
-                      }}>
-                      {t('settings.mcp.registryDefault')}
-                    </Radio>
-                    {registry.map((reg) => (
-                      <Radio
-                        key={reg.url}
-                        value={reg.url}
-                        onChange={(e) => {
-                          onSelectRegistry(e.target.value)
-                        }}>
-                        {reg.name}
-                      </Radio>
-                    ))}
-                  </Radio.Group>
-                  {selectedRegistryType === 'custom' && (
-                    <Input
-                      placeholder={t(
-                        'settings.mcp.customRegistryPlaceholder',
-                        '请输入私有仓库地址，如: https://npm.company.com'
+            <McpFormSection>
+              {(serverType === 'sse' || serverType === 'streamableHttp') && (
+                <McpFormGrid>
+                  <FormField
+                    control={form.control}
+                    name="baseUrl"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.url')}
+                          <InfoTooltip content={t('settings.mcp.baseUrlTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder={
+                              serverType === 'sse' ? 'http://localhost:3000/sse' : 'http://localhost:3000/mcp'
+                            }
+                            {...field}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="headers"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.headers')}
+                          <InfoTooltip content={t('settings.mcp.headersTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea.Input
+                            rows={3}
+                            placeholder={`Content-Type=application/json\nAuthorization=Bearer token`}
+                            className="max-h-[160px] min-h-[84px] px-3 py-2 font-mono text-sm leading-5"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </McpFormGrid>
+              )}
+              {serverType === 'stdio' && (
+                <McpFormGrid>
+                  <FormField
+                    control={form.control}
+                    name="command"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel>{t('settings.mcp.command')}</FormLabel>
+                        <FormControl>
+                          <Input
+                            placeholder="uvx or npx"
+                            {...field}
+                            onChange={(e) => {
+                              field.onChange(e)
+                              handleCommandChange(e.target.value)
+                            }}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                  {isShowRegistry && registry && (
+                    <FormField
+                      control={form.control}
+                      name="registryUrl"
+                      render={({ field }) => (
+                        <FormItem className="min-w-0">
+                          <FormLabel className="flex items-center gap-1">
+                            {t('settings.mcp.registry')}
+                            <InfoTooltip content={t('settings.mcp.registryTooltip')} />
+                          </FormLabel>
+                          <FormControl>
+                            <RadioGroup
+                              value={selectedRegistryType === 'custom' ? 'custom' : field.value || ''}
+                              onValueChange={onSelectRegistry}
+                              className="flex flex-row flex-wrap gap-x-4 gap-y-2">
+                              <label className="flex items-center gap-2 text-sm">
+                                <RadioGroupItem value="" />
+                                {t('settings.mcp.registryDefault')}
+                              </label>
+                              {registry.map((reg) => (
+                                <label key={reg.url} className="flex items-center gap-2 text-sm">
+                                  <RadioGroupItem value={reg.url} />
+                                  {reg.name}
+                                </label>
+                              ))}
+                            </RadioGroup>
+                          </FormControl>
+                          {selectedRegistryType === 'custom' && (
+                            <Input
+                              className="mt-2"
+                              placeholder={t(
+                                'settings.mcp.customRegistryPlaceholder',
+                                'Enter private registry URL, for example: https://npm.company.com'
+                              )}
+                              value={customRegistryUrl}
+                              onChange={(e) => onCustomRegistryChange(e.target.value)}
+                            />
+                          )}
+                        </FormItem>
                       )}
-                      value={customRegistryUrl}
-                      onChange={(e) => onCustomRegistryChange(e.target.value)}
-                      style={{ marginTop: 8 }}
                     />
                   )}
-                </Form.Item>
+                  <FormField
+                    control={form.control}
+                    name="args"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.args')}
+                          <InfoTooltip content={t('settings.mcp.argsTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea.Input
+                            rows={3}
+                            placeholder={`arg1\narg2`}
+                            className="max-h-[160px] min-h-[84px] px-3 py-2 font-mono text-sm leading-5"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="env"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.env')}
+                          <InfoTooltip content={t('settings.mcp.envTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea.Input
+                            rows={3}
+                            placeholder={`KEY1=value1\nKEY2=value2`}
+                            className="max-h-[160px] min-h-[84px] px-3 py-2 font-mono text-sm leading-5"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </McpFormGrid>
               )}
+              {serverType === 'inMemory' && (
+                <McpFormGrid>
+                  <FormField
+                    control={form.control}
+                    name="args"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.args')}
+                          <InfoTooltip content={t('settings.mcp.argsTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea.Input
+                            rows={3}
+                            placeholder={`arg1\narg2`}
+                            className="max-h-[160px] min-h-[84px] px-3 py-2 font-mono text-sm leading-5"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="env"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel className="flex items-center gap-1">
+                          {t('settings.mcp.env')}
+                          <InfoTooltip content={t('settings.mcp.envTooltip')} />
+                        </FormLabel>
+                        <FormControl>
+                          <Textarea.Input
+                            rows={3}
+                            placeholder={`KEY1=value1\nKEY2=value2`}
+                            className="max-h-[160px] min-h-[84px] px-3 py-2 font-mono text-sm leading-5"
+                            {...field}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </McpFormGrid>
+              )}
+            </McpFormSection>
 
-              <Form.Item name="args" label={t('settings.mcp.args')} tooltip={t('settings.mcp.argsTooltip')}>
-                <TextArea rows={3} placeholder={`arg1\narg2`} style={{ fontFamily: 'monospace' }} />
-              </Form.Item>
-
-              <Form.Item name="env" label={t('settings.mcp.env')} tooltip={t('settings.mcp.envTooltip')}>
-                <TextArea rows={3} placeholder={`KEY1=value1\nKEY2=value2`} style={{ fontFamily: 'monospace' }} />
-              </Form.Item>
-            </>
-          )}
-          {serverType === 'inMemory' && (
-            <>
-              <Form.Item name="args" label={t('settings.mcp.args')} tooltip={t('settings.mcp.argsTooltip')}>
-                <TextArea rows={3} placeholder={`arg1\narg2`} style={{ fontFamily: 'monospace' }} />
-              </Form.Item>
-
-              <Form.Item name="env" label={t('settings.mcp.env')} tooltip={t('settings.mcp.envTooltip')}>
-                <TextArea rows={3} placeholder={`KEY1=value1\nKEY2=value2`} style={{ fontFamily: 'monospace' }} />
-              </Form.Item>
-            </>
-          )}
-          <Form.Item
-            name="longRunning"
-            label={t('settings.mcp.longRunning', 'Long Running')}
-            tooltip={t('settings.mcp.longRunningTooltip')}
-            layout="horizontal"
-            valuePropName="checked">
-            <Switch className="ml-2.5" />
-          </Form.Item>
-          <Form.Item
-            name="timeout"
-            label={t('settings.mcp.timeout', 'Timeout')}
-            tooltip={t(
-              'settings.mcp.timeoutTooltip',
-              'Timeout in seconds for requests to this server, default is 60 seconds'
-            )}>
-            <Input type="number" min={1} placeholder="60" addonAfter="s" />
-          </Form.Item>
-
-          <AdvancedSettingsButton onClick={() => setShowAdvanced(!showAdvanced)}>
-            <ChevronDown
-              size={18}
-              style={{
-                transform: showAdvanced ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.3s',
-                marginRight: 8,
-                stroke: 'var(--color-primary)'
-              }}
-            />
-            {t('common.advanced_settings')}
-          </AdvancedSettingsButton>
-
-          {showAdvanced && (
-            <>
-              <Form.Item name="provider" label={t('settings.mcp.provider', 'Provider')}>
-                <Input placeholder={t('settings.mcp.providerPlaceholder', 'Provider name')} />
-              </Form.Item>
-
-              <Form.Item name="providerUrl" label={t('settings.mcp.providerUrl', 'Provider URL')}>
-                <Input placeholder="https://provider-website.com" />
-              </Form.Item>
-
-              <Form.Item name="logoUrl" label={t('settings.mcp.logoUrl', 'Logo URL')}>
-                <Input placeholder="https://example.com/logo.png" />
-              </Form.Item>
-
-              <Form.Item name="tags" label={t('settings.mcp.tags', 'Tags')}>
-                <Select
-                  mode="tags"
-                  style={{ width: '100%' }}
-                  placeholder={t('settings.mcp.tagsPlaceholder', 'Enter tags')}
-                  tokenSeparators={[',']}
+            <McpFormSection>
+              <McpFormGrid>
+                <FormField
+                  control={form.control}
+                  name="longRunning"
+                  render={({ field }) => (
+                    <FormItem className={mcpInlineSettingItemClassName}>
+                      <FormLabel className="flex items-center gap-1">
+                        {t('settings.mcp.longRunning', 'Long Running')}
+                        <InfoTooltip content={t('settings.mcp.longRunningTooltip')} />
+                      </FormLabel>
+                      <FormControl>
+                        <Switch size="sm" checked={!!field.value} onCheckedChange={field.onChange} />
+                      </FormControl>
+                    </FormItem>
+                  )}
                 />
-              </Form.Item>
-            </>
-          )}
+                <FormField
+                  control={form.control}
+                  name="timeout"
+                  render={({ field }) => (
+                    <FormItem className={mcpInlineSettingItemClassName}>
+                      <FormLabel className="flex items-center gap-1">
+                        {t('settings.mcp.timeout', 'Timeout')}
+                        <InfoTooltip
+                          content={t(
+                            'settings.mcp.timeoutTooltip',
+                            'Timeout in seconds for requests to this server, default is 60 seconds'
+                          )}
+                        />
+                      </FormLabel>
+                      <FormControl>
+                        <div className="flex items-center gap-2">
+                          <Input
+                            type="number"
+                            min={1}
+                            placeholder="60"
+                            value={field.value ?? ''}
+                            onChange={(e) => field.onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+                            className="h-8 w-24 py-0"
+                          />
+                          <span className="text-foreground-muted text-xs">s</span>
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              </McpFormGrid>
+            </McpFormSection>
+
+            <AdvancedSettingsButton onClick={() => setShowAdvanced(!showAdvanced)}>
+              <ChevronDown
+                size={16}
+                className={cn('transition-transform duration-200', showAdvanced && 'rotate-180')}
+              />
+              {t('common.advanced_settings')}
+            </AdvancedSettingsButton>
+
+            {showAdvanced && (
+              <McpFormSection>
+                <McpFormGrid>
+                  <FormField
+                    control={form.control}
+                    name="provider"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel>{t('settings.mcp.provider', 'Provider')}</FormLabel>
+                        <FormControl>
+                          <Input placeholder={t('settings.mcp.providerPlaceholder', 'Provider name')} {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="providerUrl"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel>{t('settings.mcp.providerUrl', 'Provider URL')}</FormLabel>
+                        <FormControl>
+                          <Input placeholder="https://provider-website.com" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="logoUrl"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0">
+                        <FormLabel>{t('settings.mcp.logoUrl', 'Logo URL')}</FormLabel>
+                        <FormControl>
+                          <Input placeholder="https://example.com/logo.png" {...field} />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                  <FormField
+                    control={form.control}
+                    name="tags"
+                    render={({ field }) => (
+                      <FormItem className="min-w-0 xl:col-span-2">
+                        <FormLabel>{t('settings.mcp.tags', 'Tags')}</FormLabel>
+                        <FormControl>
+                          <TagsInput
+                            value={field.value ?? []}
+                            onChange={(next) => {
+                              field.onChange(next)
+                              setIsFormChanged(true)
+                            }}
+                          />
+                        </FormControl>
+                      </FormItem>
+                    )}
+                  />
+                </McpFormGrid>
+              </McpFormSection>
+            )}
+          </form>
         </Form>
       )
     }
@@ -736,19 +1007,21 @@ const McpSettings: React.FC = () => {
   }
 
   if (server.isActive) {
+    tabs.push({
+      key: 'tools',
+      label: t('settings.mcp.tabs.tools') + (tools.length > 0 ? ` (${tools.length})` : ''),
+      children: (
+        <MCPToolsSection
+          tools={tools}
+          server={server}
+          searchText={toolSearchText}
+          onToggleTool={handleToggleTool}
+          onToggleAutoApprove={handleToggleAutoApprove}
+        />
+      )
+    })
+
     tabs.push(
-      {
-        key: 'tools',
-        label: t('settings.mcp.tabs.tools') + (tools.length > 0 ? ` (${tools.length})` : ''),
-        children: (
-          <MCPToolsSection
-            tools={tools}
-            server={server}
-            onToggleTool={handleToggleTool}
-            onToggleAutoApprove={handleToggleAutoApprove}
-          />
-        )
-      },
       {
         key: 'prompts',
         label: t('settings.mcp.tabs.prompts') + (prompts.length > 0 ? ` (${prompts.length})` : ''),
@@ -762,178 +1035,290 @@ const McpSettings: React.FC = () => {
     )
   }
 
+  const activeTabValue = tabs.some((tab) => tab.key === activeTab) ? activeTab : 'settings'
+
   return (
     <Container>
-      <SettingContainer theme={theme} style={{ width: '100%', paddingTop: 55, backgroundColor: 'transparent' }}>
-        <SettingGroup style={{ marginBottom: 0, borderRadius: 'var(--cs-radius-2xs)' }}>
-          <SettingTitle>
-            <Flex className="mr-10 items-center justify-between gap-5">
-              <Flex className="items-center gap-2">
-                <ServerName className="text-nowrap">{server?.name}</ServerName>
-                {serverVersion && <VersionBadge count={serverVersion} color="blue" />}
+      <SettingContainer
+        theme={theme}
+        className="min-w-0 overflow-hidden p-0"
+        style={{ width: '100%', backgroundColor: 'transparent' }}>
+        <Tabs
+          value={activeTabValue}
+          onValueChange={(value) => setActiveTab(value as TabKey)}
+          variant="line"
+          className="flex min-h-0 flex-1 flex-col bg-transparent">
+          <div className="shrink-0 px-4 pt-4">
+            <SettingTitle className="min-w-0 flex-wrap gap-2">
+              <Flex className="min-w-0 flex-1 flex-wrap items-center gap-2">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon-sm"
+                  className="shrink-0 rounded-full"
+                  aria-label={t('common.back')}
+                  title={t('common.back')}
+                  onClick={() => void navigate({ to: '/settings/mcp/servers' })}>
+                  <ArrowLeft size={16} />
+                </Button>
+                <Flex className="min-w-0 flex-1 items-center gap-2">
+                  <ServerName className="truncate">{server?.name}</ServerName>
+                  {serverVersion && <VersionBadge count={serverVersion} color="blue" />}
+                  <Button size="sm" variant="ghost" className="shrink-0" onClick={() => setLogModalOpen(true)}>
+                    {t('settings.mcp.logs', 'View Logs')}
+                  </Button>
+                  <Button
+                    size="icon-sm"
+                    variant="ghost"
+                    className="shrink-0"
+                    aria-label={t('common.delete')}
+                    title={t('common.delete')}
+                    onClick={() => onDeleteMcpServer(server)}>
+                    <DeleteIcon size={14} className="lucide-custom text-destructive" />
+                  </Button>
+                </Flex>
               </Flex>
-              <Button size="sm" variant="ghost" onClick={() => setLogModalOpen(true)}>
-                {t('settings.mcp.logs', 'View Logs')}
-              </Button>
-              <Button size="sm" variant="ghost" onClick={() => onDeleteMcpServer(server)}>
-                <DeleteIcon size={14} className="lucide-custom text-destructive" />
-              </Button>
-            </Flex>
-            <Flex className="items-center gap-4">
-              <Switch
-                checked={server.isActive}
-                key={server.id}
-                loading={loadingServer === server.id}
-                onCheckedChange={onToggleActive}
-              />
-              <Button
-                size="sm"
-                variant="default"
-                onClick={onSave}
-                disabled={loading || !isFormChanged || activeTab !== 'settings'}
-                className="rounded-full">
-                <SaveIcon size={14} />
-                {t('common.save')}
-              </Button>
-            </Flex>
-          </SettingTitle>
-          <SettingDivider />
-          <Tabs
-            defaultActiveKey="settings"
-            items={tabs}
-            onChange={(key) => setActiveTab(key as TabKey)}
-            style={{ marginTop: 8, backgroundColor: 'transparent' }}
-          />
-        </SettingGroup>
+              <Flex className="shrink-0 items-center gap-3">
+                <Switch
+                  checked={server.isActive}
+                  key={server.id}
+                  loading={loadingServer === server.id}
+                  onCheckedChange={onToggleActive}
+                />
+                <Button
+                  size="sm"
+                  variant="default"
+                  onClick={onSave}
+                  disabled={loading || !isFormChanged || activeTabValue !== 'settings'}
+                  className="rounded-full">
+                  <SaveIcon size={14} />
+                  {t('common.save')}
+                </Button>
+              </Flex>
+            </SettingTitle>
+            <SettingDivider className="mb-0" />
+            <div className="mt-1 flex min-w-0 items-center justify-between gap-2">
+              <TabsList className="min-w-0 max-w-full overflow-x-auto">
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.key} value={tab.key}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+              {activeTabValue === 'tools' && tools.length > 0 && (
+                <div className="shrink-0 pt-1">
+                  <CollapsibleSearchBar
+                    onSearch={setToolSearchText}
+                    placeholder={t('common.search')}
+                    tooltip={t('common.search')}
+                    maxWidth={220}
+                    style={{ borderRadius: 20 }}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          <Scrollbar className="min-h-0 flex-1 px-4 pt-2 pb-4">
+            {tabs.map((tab) => (
+              <TabsContent key={tab.key} value={tab.key} className="mt-0 min-h-0">
+                {tab.children}
+              </TabsContent>
+            ))}
+          </Scrollbar>
+        </Tabs>
       </SettingContainer>
 
-      <Modal
-        title={t('settings.mcp.logs', 'Server Logs')}
+      <Dialog
         open={logModalOpen}
-        onCancel={() => setLogModalOpen(false)}
-        footer={null}
-        width={720}
-        centered
-        transitionName="animation-move-down"
-        bodyStyle={{ maxHeight: '70vh', minHeight: '40vh', overflowY: 'auto' }}
-        afterOpenChange={(open) => {
-          if (open) {
-            void fetchServerLogs()
-          }
+        onOpenChange={(next) => {
+          setLogModalOpen(next)
+          if (next) void fetchServerLogs()
         }}>
-        <LogList>
-          {logs.length === 0 && <Text type="secondary">{t('settings.mcp.noLogs', 'No logs yet')}</Text>}
-          {logs.map((log, idx) => (
-            <LogItem key={`${log.timestamp}-${idx}`}>
-              <LogHeader>
-                <Timestamp>{new Date(log.timestamp).toLocaleTimeString()}</Timestamp>
-                <Tag color={mapLogLevelColor(log.level)}>{log.level}</Tag>
-                <LogMessage>{log.message}</LogMessage>
-              </LogHeader>
-              {log.data && (
-                <PreBlock>{typeof log.data === 'string' ? log.data : JSON.stringify(log.data, null, 2)}</PreBlock>
-              )}
-            </LogItem>
-          ))}
-        </LogList>
-      </Modal>
+        <DialogContent className="max-h-[70vh] sm:max-w-[720px]">
+          <DialogHeader>
+            <DialogTitle>{t('settings.mcp.logs', 'Server Logs')}</DialogTitle>
+          </DialogHeader>
+          <LogList>
+            {logs.length === 0 && (
+              <span className="text-foreground-muted text-sm">{t('settings.mcp.noLogs', 'No logs yet')}</span>
+            )}
+            {logs.map((log, idx) => (
+              <LogItem key={`${log.timestamp}-${idx}`}>
+                <LogHeader>
+                  <Timestamp>{new Date(log.timestamp).toLocaleTimeString()}</Timestamp>
+                  <Badge variant="outline" className={mapLogLevelClass(log.level)}>
+                    {log.level}
+                  </Badge>
+                  <LogMessage>{log.message}</LogMessage>
+                </LogHeader>
+                {log.data && (
+                  <PreBlock>{typeof log.data === 'string' ? log.data : JSON.stringify(log.data, null, 2)}</PreBlock>
+                )}
+              </LogItem>
+            ))}
+          </LogList>
+        </DialogContent>
+      </Dialog>
     </Container>
   )
 }
 
-const Container = styled(Scrollbar)`
-  height: calc(100vh - var(--navbar-height));
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex h-full min-w-0 flex-col overflow-hidden', className)} {...props} />
+)
 
-const ServerName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-`
+const ServerName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('block min-w-0 font-medium text-sm', className)} {...props} />
+)
 
-const AdvancedSettingsButton = styled.div`
-  cursor: pointer;
-  margin-bottom: 16px;
-  margin-top: -10px;
-  color: var(--color-primary);
-  display: flex;
-  align-items: center;
-`
+const McpFormSection = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('border-border/60 border-t pt-5 first:border-t-0 first:pt-0', className)} {...props} />
+)
 
-const LogList = styled(Scrollbar)`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding-bottom: 15px;
-  padding-top: 5px;
-`
+const McpFormGrid = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('grid grid-cols-1 items-start gap-x-4 gap-y-4 xl:grid-cols-2', className)} {...props} />
+)
 
-const LogItem = styled.div`
-  background: var(--color-background-mute, #1f1f1f);
-  color: var(--color-text-1, #e6e6e6);
-  border-radius: 8px;
-  padding: 10px 12px;
-  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
-`
+const mcpInlineSettingItemClassName =
+  'flex h-14 min-w-0 flex-row items-center justify-between gap-4 rounded-md border border-border/70 px-3'
 
-const LogHeader = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 8px;
-`
+const AdvancedSettingsButton = ({
+  className,
+  type = 'button',
+  variant = 'ghost',
+  size = 'sm',
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Button>) => (
+  <Button
+    type={type}
+    variant={variant}
+    size={size}
+    className={cn('h-8 w-fit gap-1.5 px-2 text-primary hover:text-primary', className)}
+    {...props}
+  />
+)
 
-const Timestamp = styled.span`
-  color: var(--color-text-3, #9aa2b1);
-  font-size: 12px;
-  flex-shrink: 0;
-`
+const LogList = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Scrollbar>) => (
+  <Scrollbar className={cn('flex flex-col gap-3 pt-1.25 pb-3.75', className)} {...props} />
+)
 
-const LogMessage = styled.span`
-  font-size: 13px;
-  line-height: 1.5;
-  word-break: break-word;
-`
+const LogItem = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('rounded-lg border border-border bg-card px-3 py-2.5 text-foreground', className)} {...props} />
+)
 
-const PreBlock = styled.pre`
-  margin: 6px 0 0;
-  padding: 8px;
-  background: var(--color-bg-3, #111418);
-  color: var(--color-text-1, #e6e6e6);
-  border-radius: 6px;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
-`
+const LogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-wrap items-baseline gap-2', className)} {...props} />
+)
 
-function mapLogLevelColor(level: MCPServerLogEntry['level']) {
+const Timestamp = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('shrink-0 text-foreground-muted text-xs', className)} {...props} />
+)
+
+const LogMessage = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('break-words text-[13px] leading-normal', className)} {...props} />
+)
+
+const PreBlock = ({ className, ...props }: React.ComponentPropsWithoutRef<'pre'>) => (
+  <pre
+    className={cn(
+      'mt-1.5 whitespace-pre-wrap break-words rounded-md border border-border bg-background px-2 py-2 text-foreground text-xs',
+      className
+    )}
+    {...props}
+  />
+)
+
+function mapLogLevelClass(level: MCPServerLogEntry['level']) {
   switch (level) {
     case 'error':
     case 'stderr':
-      return 'red'
+      return 'border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400'
     case 'warn':
-      return 'orange'
+      return 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400'
     case 'info':
     case 'stdout':
-      return 'blue'
+      return 'border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400'
     default:
-      return 'default'
+      return 'border-border/60 bg-muted text-muted-foreground'
   }
 }
 
-const VersionBadge = styled(Badge)`
-  .ant-badge-count {
-    background-color: var(--color-primary);
-    color: white;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 0 6px;
-    height: 18px;
-    line-height: 18px;
-    border-radius: 9px;
-    min-width: 18px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+const VersionBadge = ({ count, className, ...props }: { count: string } & React.ComponentProps<'span'>) => (
+  <span
+    className={cn(
+      'inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-[9px] bg-primary px-1.5 font-medium text-[11px] text-white leading-[18px] shadow-sm',
+      className
+    )}
+    {...props}>
+    {count}
+  </span>
+)
+
+interface TagsInputProps {
+  value: string[]
+  onChange: (next: string[]) => void
+}
+
+const TagsInput = ({ value, onChange }: TagsInputProps) => {
+  const { t } = useTranslation()
+  const [draft, setDraft] = useState('')
+
+  const commit = (raw: string) => {
+    const parts = raw
+      .split(',')
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0 && !value.includes(s))
+    if (parts.length > 0) {
+      onChange([...value, ...parts])
+    }
+    setDraft('')
   }
-`
+
+  const removeAt = (index: number) => {
+    onChange(value.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div className="flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent px-2 py-1 shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50">
+      {value.map((tag, index) => (
+        <span
+          key={`${tag}-${index}`}
+          className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-foreground text-xs">
+          {tag}
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-destructive"
+            onClick={() => removeAt(index)}>
+            <X size={12} className="lucide-custom" />
+          </button>
+        </span>
+      ))}
+      <input
+        className="min-w-[120px] flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+        value={draft}
+        placeholder={t('settings.mcp.tagsPlaceholder', 'Enter tags')}
+        onChange={(e) => {
+          const next = e.target.value
+          if (next.endsWith(',')) {
+            commit(next)
+          } else {
+            setDraft(next)
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && draft.trim()) {
+            e.preventDefault()
+            commit(draft)
+          } else if (e.key === 'Backspace' && draft === '' && value.length > 0) {
+            removeAt(value.length - 1)
+          }
+        }}
+        onBlur={() => {
+          if (draft.trim()) commit(draft)
+        }}
+      />
+    </div>
+  )
+}
 
 export default McpSettings
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx b/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
index 20f34fd103..a66ec3cdc0 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
@@ -1,21 +1,26 @@
-import { ColFlex, Flex, InfoTooltip, Switch, Tooltip } from '@cherrystudio/ui'
+import type { ColumnDef } from '@cherrystudio/ui'
+import { Badge, ColFlex, DataTable, Flex, InfoTooltip, Switch, Tooltip } from '@cherrystudio/ui'
 import { McpLogo } from '@renderer/components/Icons'
 import type { MCPServer, MCPTool } from '@renderer/types'
 import { isToolAutoApproved } from '@renderer/utils/mcp-tools'
-import { Badge, Descriptions, Empty, Table, Tag, Typography } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
 import { Zap } from 'lucide-react'
+import type { Key } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { McpDetailItem, McpDetailList, RequiredMark } from './McpDetailList'
+
 interface MCPToolsSectionProps {
   tools: MCPTool[]
   server: MCPServer
+  searchText: string
   onToggleTool: (tool: MCPTool, enabled: boolean) => void
   onToggleAutoApprove: (tool: MCPTool, autoApprove: boolean) => void
 }
 
-const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: MCPToolsSectionProps) => {
+const MCPToolsSection = ({ tools, server, searchText, onToggleTool, onToggleAutoApprove }: MCPToolsSectionProps) => {
   const { t } = useTranslation()
+  const [expandedRowKeys, setExpandedRowKeys] = useState<Key[]>([])
 
   // Check if a tool is enabled (not in the disabledTools array)
   const isToolEnabled = (tool: MCPTool) => {
@@ -32,20 +37,20 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
     onToggleAutoApprove(tool, checked)
   }
 
-  const getTypeColor = (type: string) => {
+  const getTypeBadgeClass = (type: string) => {
     switch (type) {
       case 'string':
-        return 'blue'
+        return 'border-primary/30 bg-primary/10 text-primary'
       case 'number':
-        return 'green'
+        return 'border-success/30 bg-success/10 text-success'
       case 'boolean':
-        return 'purple'
+        return 'border-purple-500/30 bg-purple-500/10 text-purple-600 dark:text-purple-400'
       case 'object':
-        return 'orange'
+        return 'border-warning/30 bg-warning/10 text-warning'
       case 'array':
-        return 'cyan'
+        return 'border-cyan-500/30 bg-cyan-500/10 text-cyan-600 dark:text-cyan-400'
       default:
-        return 'default'
+        return 'border-border bg-background-subtle text-foreground'
     }
   }
 
@@ -58,24 +63,19 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
     return (
       <ColFlex className="gap-1">
         <Flex className="items-center gap-2">
-          {itemType && (
-            <Badge
-              color={getTypeColor(prop.type)}
-              text={<Typography.Text type="secondary">{itemType}</Typography.Text>}
-            />
-          )}
+          {itemType && <Badge className={getTypeBadgeClass(prop.type)}>{itemType}</Badge>}
         </Flex>
-        {prop.description && (
-          <Typography.Paragraph type="secondary" style={{ marginBottom: 0, marginTop: 4 }}>
-            {prop.description}
-          </Typography.Paragraph>
-        )}
+        {prop.description && <p className="m-0 text-foreground-secondary text-sm leading-5">{prop.description}</p>}
         {prop.enum && (
-          <div style={{ marginTop: 4 }}>
-            <Typography.Text type="secondary">{t('settings.mcp.tools.inputSchema.enum.allowedValues')}</Typography.Text>
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 4 }}>
+          <div className="mt-1">
+            <span className="text-foreground-secondary text-sm">
+              {t('settings.mcp.tools.inputSchema.enum.allowedValues')}
+            </span>
+            <div className="mt-1 flex flex-wrap gap-1">
               {prop.enum.map((value: string, idx: number) => (
-                <Tag key={idx}>{value}</Tag>
+                <Badge key={idx} variant="outline">
+                  {value}
+                </Badge>
               ))}
             </div>
           </div>
@@ -88,10 +88,8 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
           prop.type === 'array' &&
           prop.items?.type === 'object' &&
           prop.items.properties && (
-            <div style={{ marginTop: 4 }}>
-              <Typography.Text type="secondary" italic>
-                items:
-              </Typography.Text>
+            <div className="mt-1">
+              <span className="text-foreground-secondary text-sm italic">items:</span>
               {renderSchemaProperties(prop.items.properties, prop.items.required, depth + 1)}
             </div>
           )}
@@ -99,121 +97,132 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
     )
   }
 
-  // Render a set of schema properties as a Descriptions list
   const renderSchemaProperties = (properties: Record<string, any>, required?: string[], depth: number = 0) => {
     return (
-      <Descriptions bordered size="small" column={1} style={{ userSelect: 'text', marginTop: 4 }}>
+      <McpDetailList className="mt-1 select-text">
         {Object.entries(properties).map(([key, prop]: [string, any]) => (
-          <Descriptions.Item
+          <McpDetailItem
             key={key}
             label={
               <Flex className="gap-1">
-                <Typography.Text strong>{key}</Typography.Text>
+                <span className="font-medium">{key}</span>
                 {required?.includes(key) && (
-                  <Tooltip title={t('common.required_field')}>
-                    <span style={{ color: '#f5222d' }}>*</span>
+                  <Tooltip content={t('common.required_field')}>
+                    <RequiredMark />
                   </Tooltip>
                 )}
               </Flex>
             }>
             {renderPropertyValue(prop, depth)}
-          </Descriptions.Item>
+          </McpDetailItem>
         ))}
-      </Descriptions>
+      </McpDetailList>
     )
   }
 
-  // Render tool properties from the input schema
   const renderToolProperties = (tool: MCPTool) => {
     if (!tool.inputSchema?.properties) return null
     return renderSchemaProperties(tool.inputSchema.properties, tool.inputSchema.required)
   }
 
-  const columns: ColumnsType<MCPTool> = [
+  const filteredTools = useMemo(() => {
+    const query = searchText.trim().toLowerCase()
+
+    if (!query) {
+      return tools
+    }
+
+    return tools.filter((tool) =>
+      [tool.name, tool.id, tool.description].some((value) => value?.toLowerCase().includes(query))
+    )
+  }, [searchText, tools])
+
+  const columns: ColumnDef<MCPTool>[] = [
     {
-      title: <Typography.Text strong>{t('settings.mcp.tools.availableTools')}</Typography.Text>,
-      dataIndex: 'name',
-      key: 'name',
-      filters: tools.map((tool) => ({
-        text: tool.name,
-        value: tool.name
-      })),
-      onFilter: (value, record) => record.name === value,
-      filterSearch: true,
-      render: (_, tool) => (
-        <ColFlex className="gap-1">
-          <Flex className="items-center gap-1">
-            <Typography.Text strong ellipsis={{ tooltip: tool.name }}>
-              {tool.name}
-            </Typography.Text>
-            <InfoTooltip content={`ID: ${tool.id}`} />
-          </Flex>
-          {tool.description && (
-            <Typography.Paragraph
-              type="secondary"
-              style={{ fontSize: '13px' }}
-              ellipsis={{ rows: 1, expandable: true }}>
-              {tool.description}
-            </Typography.Paragraph>
-          )}
-        </ColFlex>
-      )
+      id: 'name',
+      header: () => <span className="font-medium">{t('settings.mcp.tools.availableTools')}</span>,
+      meta: { width: 400, maxWidth: 400 },
+      cell: ({ row }) => {
+        const tool = row.original
+
+        return (
+          <ColFlex className="gap-1">
+            <Flex className="items-center gap-1">
+              <span className="truncate font-medium text-foreground text-sm" title={tool.name}>
+                {tool.name}
+              </span>
+              <InfoTooltip content={`ID: ${tool.id}`} />
+            </Flex>
+            {tool.description && (
+              <Tooltip content={tool.description}>
+                <p className="m-0 line-clamp-1 text-[13px] text-foreground-secondary leading-5">{tool.description}</p>
+              </Tooltip>
+            )}
+          </ColFlex>
+        )
+      }
     },
     {
-      title: (
+      id: 'enable',
+      header: () => (
         <Flex className="items-center justify-center gap-1">
           <McpLogo width={14} height={14} style={{ opacity: 0.8 }} />
-          <Typography.Text strong>{t('settings.mcp.tools.enable')}</Typography.Text>
+          <span className="font-medium">{t('settings.mcp.tools.enable')}</span>
         </Flex>
       ),
-      key: 'enable',
-      width: 150, // Fixed width might be good for alignment
-      align: 'center',
-      render: (_, tool) => (
-        <Switch checked={isToolEnabled(tool)} onCheckedChange={(checked) => handleToggle(tool, checked)} />
-      )
+      meta: { width: 150, maxWidth: 150, align: 'center' },
+      cell: ({ row }) => {
+        const tool = row.original
+
+        return (
+          <Switch size="xs" checked={isToolEnabled(tool)} onCheckedChange={(checked) => handleToggle(tool, checked)} />
+        )
+      }
     },
     {
-      title: (
+      id: 'autoApprove',
+      header: () => (
         <Flex className="items-center justify-center gap-1">
           <Zap size={14} color="red" />
-          <Typography.Text strong>{t('settings.mcp.tools.autoApprove.label')}</Typography.Text>
+          <span className="font-medium">{t('settings.mcp.tools.autoApprove.label')}</span>
         </Flex>
       ),
-      key: 'autoApprove',
-      width: 150, // Fixed width
-      align: 'center',
-      render: (_, tool) => (
-        <Tooltip
-          content={
-            !isToolEnabled(tool)
-              ? t('settings.mcp.tools.autoApprove.tooltip.howToEnable')
-              : isToolAutoApproved(tool, server)
-                ? t('settings.mcp.tools.autoApprove.tooltip.enabled')
-                : t('settings.mcp.tools.autoApprove.tooltip.disabled')
-          }>
-          <Switch
-            checked={isToolAutoApproved(tool, server)}
-            disabled={!isToolEnabled(tool)}
-            onCheckedChange={(checked) => handleAutoApproveToggle(tool, checked)}
-          />
-        </Tooltip>
-      )
+      meta: { width: 150, maxWidth: 150, align: 'center' },
+      cell: ({ row }) => {
+        const tool = row.original
+
+        return (
+          <Tooltip
+            content={
+              !isToolEnabled(tool)
+                ? t('settings.mcp.tools.autoApprove.tooltip.howToEnable')
+                : isToolAutoApproved(tool, server)
+                  ? t('settings.mcp.tools.autoApprove.tooltip.enabled')
+                  : t('settings.mcp.tools.autoApprove.tooltip.disabled')
+            }>
+            <Switch
+              size="xs"
+              checked={isToolAutoApproved(tool, server)}
+              disabled={!isToolEnabled(tool)}
+              onCheckedChange={(checked) => handleAutoApproveToggle(tool, checked)}
+            />
+          </Tooltip>
+        )
+      }
     }
   ]
 
-  return tools.length > 0 ? (
-    <Table
-      rowKey="id"
+  return (
+    <DataTable
+      data={filteredTools}
       columns={columns}
-      dataSource={tools}
-      pagination={false}
-      expandable={{
-        expandedRowRender: (tool) => renderToolProperties(tool)
-      }}
+      rowKey="id"
+      emptyText={searchText ? t('common.no_results') : t('settings.mcp.tools.noToolsAvailable')}
+      expandedRowKeys={expandedRowKeys}
+      onExpandedRowChange={setExpandedRowKeys}
+      renderExpandedRow={(tool) => renderToolProperties(tool)}
+      getCanExpand={(tool) => Boolean(tool.inputSchema?.properties)}
     />
-  ) : (
-    <Empty description={t('settings.mcp.tools.noToolsAvailable')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
   )
 }
 
diff --git a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
index da11224713..4069b78dff 100644
--- a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
@@ -1,16 +1,12 @@
-import { CheckOutlined, PlusOutlined } from '@ant-design/icons'
-import { Center, RowFlex } from '@cherrystudio/ui'
-import { Flex } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import { Badge, Button, Center, Flex, Input, RowFlex, Spinner } from '@cherrystudio/ui'
 import logo from '@renderer/assets/images/cherry-text-logo.svg'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
 import { getMcpConfigSampleFromReadme } from '@renderer/utils'
-import { Card, Input, Space, Spin, Tag, Typography } from 'antd'
+import { Check, Plus } from 'lucide-react'
 import { npxFinder } from 'npx-scope-finder'
 import { type FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface SearchResult {
   name: string
@@ -29,7 +25,6 @@ let _searchResults: SearchResult[] = []
 
 const NpxSearch: FC = () => {
   const { t } = useTranslation()
-  const { Text, Link } = Typography
 
   // Add new state variables for npm scope search
   const [npmScope, setNpmScope] = useState('@modelcontextprotocol')
@@ -101,65 +96,58 @@ const NpxSearch: FC = () => {
   }, [])
 
   return (
-    <Container>
+    <div className="flex min-w-0 flex-1 flex-col gap-2 pt-5">
       <Center>
-        <Space direction="vertical" style={{ marginBottom: 25, width: 500 }}>
+        <div className="mb-[25px] flex w-full max-w-[500px] flex-col px-4">
           <Center className="mb-3.75">
             <img src={logo} alt="npm" width={120} />
           </Center>
-          <Space.Compact style={{ width: '100%' }}>
+          <div className="w-full">
             <Input
               placeholder={t('settings.mcp.npx_list.scope_placeholder')}
               value={npmScope}
               onChange={(e) => setNpmScope(e.target.value)}
-              onPressEnter={() => handleNpmSearch(npmScope)}
-              size="large"
-              styles={{ input: { borderRadius: 100 } }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  void handleNpmSearch(npmScope)
+                }
+              }}
+              className="h-10 rounded-full"
             />
-          </Space.Compact>
+          </div>
           <RowFlex className="items-center justify-center">
             {npmScopes.map((scope) => (
-              <Tag
+              <Badge
                 key={scope}
                 onClick={() => {
                   setNpmScope(scope)
                   void handleNpmSearch(scope)
                 }}
-                style={{
-                  cursor: searchLoading ? 'not-allowed' : 'pointer',
-                  borderRadius: 100,
-                  backgroundColor: 'var(--color-background-mute)'
-                }}>
+                className="cursor-pointer border-border bg-background-subtle text-foreground hover:bg-accent data-[disabled=true]:cursor-not-allowed"
+                data-disabled={searchLoading}>
                 {scope}
-              </Tag>
+              </Badge>
             ))}
           </RowFlex>
-        </Space>
+        </div>
       </Center>
       {searchLoading && (
         <Center>
-          <Spin />
+          <Spinner text={t('common.loading')} />
         </Center>
       )}
       {!searchLoading && (
-        <ResultList>
+        <div className="mx-auto flex w-full max-w-[1200px] flex-1 flex-col gap-2 overflow-y-auto pr-1">
           {searchResults?.map((record) => {
             const isInstalled = mcpServers.some((server) => server.name === record.name)
             return (
-              <Card
-                size="small"
+              <div
                 key={record.name}
-                style={{ borderRadius: 'var(--cs-radius-2xs)' }}
-                title={
-                  <Typography.Title level={5} style={{ margin: 0 }} className="selectable">
-                    {record.name}
-                  </Typography.Title>
-                }
-                extra={
-                  <Flex>
-                    <Tag color="success" style={{ borderRadius: 100 }}>
-                      v{record.version}
-                    </Tag>
+                className="rounded-lg border border-transparent bg-transparent px-3 py-2 transition-colors hover:bg-accent">
+                <div className="mb-1.5 flex items-start justify-between gap-3">
+                  <h3 className="selectable m-0 min-w-0 truncate font-semibold text-sm leading-6">{record.name}</h3>
+                  <Flex className="shrink-0 items-center gap-1">
+                    <Badge className="border-success/30 bg-success/10 text-success">v{record.version}</Badge>
                     <Button
                       variant="ghost"
                       size="icon-sm"
@@ -187,46 +175,30 @@ const NpxSearch: FC = () => {
                         }
                       }}
                       disabled={isInstalled}>
-                      {isInstalled ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <PlusOutlined />}
+                      {isInstalled ? <Check size={14} className="text-primary" /> : <Plus size={14} />}
                     </Button>
                   </Flex>
-                }>
-                <Space direction="vertical" size="small">
-                  <Text className="selectable">{record.description}</Text>
-                  <Text type="secondary" className="selectable">
+                </div>
+                <div className="flex flex-col gap-1">
+                  <p className="selectable m-0 text-sm">{record.description}</p>
+                  <p className="selectable m-0 text-muted-foreground text-sm">
                     {t('settings.mcp.npx_list.usage')}: {record.usage}
-                  </Text>
-                  <Link href={record.npmLink} target="_blank" rel="noopener noreferrer">
+                  </p>
+                  <a
+                    href={record.npmLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="selectable text-link text-sm hover:text-link-hover">
                     {record.npmLink}
-                  </Link>
-                </Space>
-              </Card>
+                  </a>
+                </div>
+              </div>
             )
           })}
-        </ResultList>
+        </div>
       )}
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 8px;
-  padding-top: 20px;
-`
-
-const ResultList = styled.div`
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  width: 100%;
-  padding-right: 4px;
-  overflow-y: auto;
-  max-width: 1200px;
-  margin: 0 auto;
-`
-
 export default NpxSearch
diff --git a/src/renderer/src/pages/settings/MCPSettings/ProtocolInstallWarning.tsx b/src/renderer/src/pages/settings/MCPSettings/ProtocolInstallWarning.tsx
index a05391a2e0..1281dd7ee8 100644
--- a/src/renderer/src/pages/settings/MCPSettings/ProtocolInstallWarning.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/ProtocolInstallWarning.tsx
@@ -21,9 +21,7 @@ const ProtocolInstallWarningContent: React.FC<ProtocolInstallWarningContentProps
       {commandPreview && (
         <div className="space-y-1">
           <div className="font-semibold">{commandLabel}</div>
-          <pre className="whitespace-pre-wrap break-all rounded-md bg-[var(--color-fill-secondary)] p-2">
-            {commandPreview}
-          </pre>
+          <pre className="whitespace-pre-wrap break-all rounded-md bg-[var(--color-muted)] p-2">{commandPreview}</pre>
         </div>
       )}
     </div>
diff --git a/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
index 1e82e913bc..a393153eb1 100644
--- a/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
@@ -1,12 +1,33 @@
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@cherrystudio/ui'
 import { dataApiService } from '@data/DataApiService'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { TopView } from '@renderer/components/TopView'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
+import { cn } from '@renderer/utils/style'
 import type { MCPServer } from '@shared/data/types/mcpServer'
-import { Form, Input, Modal, Select } from 'antd'
-import { useCallback, useEffect, useState } from 'react'
+import type React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import * as z from 'zod'
 
 import { getAI302Token, saveAI302Token, syncAi302Servers } from './providers/302ai'
 import { getBailianToken, saveBailianToken, syncBailianServers } from './providers/bailian'
@@ -101,307 +122,247 @@ interface Props {
   existingServers: MCPServer[]
 }
 
+const schema = z.object({
+  token: z.string().min(1)
+})
+type FieldType = z.infer<typeof schema>
+
 const PopupContainer: React.FC<Props> = ({ resolve, existingServers }) => {
   const { addMCPServer, refetch } = useMCPServers()
   const [open, setOpen] = useState(true)
   const [isSyncing, setIsSyncing] = useState(false)
   const [selectedProviderKey, setSelectedProviderKey] = useState(providers[0].key)
-  const [tokens, setTokens] = useState<Record<string, string>>({})
+  const didResolveRef = useRef(false)
   const { t } = useTranslation()
-  const [form] = Form.useForm()
 
-  // Get the currently selected provider config
   const selectedProvider = providers.find((p) => p.key === selectedProviderKey) || providers[0]
 
+  const form = useForm<FieldType>({
+    resolver: zodResolver(schema),
+    defaultValues: { token: selectedProvider.getToken() ?? '' }
+  })
+
   useEffect(() => {
-    // Initialize tokens for all providers
-    const initialTokens: Record<string, string> = {}
+    form.reset({ token: selectedProvider.getToken() ?? '' })
+  }, [selectedProvider, form])
 
-    providers.forEach((provider) => {
-      const token = provider.getToken()
-      if (token) {
-        initialTokens[provider.tokenFieldName] = token
-        form.setFieldsValue({ [provider.tokenFieldName]: token })
-      }
-    })
-
-    setTokens(initialTokens)
-  }, [form])
-
-  const handleSync = useCallback(async () => {
-    try {
-      await form.validateFields()
-    } catch (error) {
+  const closeAndResolve = useCallback(() => {
+    if (didResolveRef.current) {
       return
     }
+    didResolveRef.current = true
+    setOpen(false)
+    resolve({})
+  }, [resolve])
 
-    setIsSyncing(true)
-
-    try {
-      const token = form.getFieldValue(selectedProvider.tokenFieldName)
-
-      // Save token if present
-      if (token) {
-        selectedProvider.saveToken(token)
-        setTokens((prev) => ({
-          ...prev,
-          [selectedProvider.tokenFieldName]: token
-        }))
-      }
-
-      // Sync servers
-      const result = await selectedProvider.syncServers(token, existingServers)
-
-      if (result.success && (result.addedServers?.length > 0 || result.updatedServers?.length > 0)) {
-        // Add new servers to the store
-        for (const server of result.addedServers) {
-          await addMCPServer(server)
+  const handleSync = useCallback(
+    async (values: FieldType) => {
+      setIsSyncing(true)
+      try {
+        const token = values.token.trim()
+        if (token) {
+          selectedProvider.saveToken(token)
         }
-        // Update existing servers with latest info
-        const updatedServers = result.updatedServers
-        if (updatedServers?.length > 0) {
-          for (const server of updatedServers) {
-            const { id, ...updates } = server
-            await dataApiService.patch(`/mcp-servers/${id}`, { body: updates })
+
+        const result = await selectedProvider.syncServers(token, existingServers)
+
+        if (result.success && (result.addedServers?.length > 0 || result.updatedServers?.length > 0)) {
+          for (const server of result.addedServers) {
+            await addMCPServer(server)
           }
-          await refetch()
-        }
-        window.toast.success(result.message)
-        setOpen(false)
-      } else {
-        // Show message but keep dialog open
-        if (result.success) {
+          const updatedServers = result.updatedServers
+          if (updatedServers?.length > 0) {
+            for (const server of updatedServers) {
+              const { id, ...updates } = server
+              await dataApiService.patch(`/mcp-servers/${id}`, { body: updates })
+            }
+            await refetch()
+          }
+          window.toast.success(result.message)
+          closeAndResolve()
+        } else if (result.success) {
           window.toast.info(result.message)
         } else {
           window.toast.error(result.message)
         }
+      } catch (error: any) {
+        window.toast.error(`${t('settings.mcp.sync.error')}: ${error.message}`)
+      } finally {
+        setIsSyncing(false)
       }
-    } catch (error: any) {
-      window.toast.error(`${t('settings.mcp.sync.error')}: ${error.message}`)
-    } finally {
-      setIsSyncing(false)
-    }
-  }, [addMCPServer, refetch, existingServers, form, selectedProvider, t])
+    },
+    [addMCPServer, refetch, existingServers, selectedProvider, t, closeAndResolve]
+  )
 
-  const onCancel = () => {
-    setOpen(false)
-  }
+  SyncServersPopup.hide = closeAndResolve
 
-  const onClose = () => {
-    resolve({})
-  }
-
-  SyncServersPopup.hide = onCancel
-
-  // Check if sync button should be disabled
-  const isSyncDisabled = () => {
-    const token = tokens[selectedProvider.tokenFieldName]
-    return !token
-  }
+  const tokenValue = form.watch('token')
+  const isSyncDisabled = !tokenValue?.trim()
 
   return (
-    <Modal
-      title={t('settings.mcp.sync.title', 'Sync Servers')}
+    <Dialog
       open={open}
-      onCancel={onCancel}
-      afterClose={onClose}
-      width={550}
-      footer={null}
-      transitionName="animation-move-down"
-      centered>
-      <ContentContainer>
-        {/* Only show provider selector if there are multiple providers */}
+      onOpenChange={(next) => {
+        if (!next) closeAndResolve()
+      }}>
+      <DialogContent className="sm:max-w-[550px]">
+        <DialogHeader>
+          <DialogTitle>{t('settings.mcp.sync.title', 'Sync Servers')}</DialogTitle>
+        </DialogHeader>
+        <ContentContainer>
+          <ProviderSelector>
+            <Label>{t('settings.mcp.sync.selectProvider', 'Select Provider:')}</Label>
+            <Select value={selectedProviderKey} onValueChange={setSelectedProviderKey}>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {providers.map((provider) => (
+                  <SelectItem key={provider.key} value={provider.key}>
+                    {getProviderDisplayName(provider, t)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </ProviderSelector>
 
-        <ProviderSelector>
-          <SelectorLabel>{t('settings.mcp.sync.selectProvider', 'Select Provider:')}</SelectorLabel>
-          <Select
-            value={selectedProviderKey}
-            onChange={setSelectedProviderKey}
-            style={{ width: 200 }}
-            options={providers.map((provider) => ({
-              value: provider.key,
-              label: getProviderDisplayName(provider, t)
-            }))}
-          />
-        </ProviderSelector>
+          <ProviderContent>
+            <Form {...form}>
+              <form onSubmit={form.handleSubmit(handleSync)} className="w-full">
+                <StepSection>
+                  <StepNumber>1</StepNumber>
+                  <StepContent>
+                    <StepTitle>{t('settings.mcp.sync.discoverMcpServers', 'Discover MCP Servers')}</StepTitle>
+                    <StepDescription>
+                      {t(
+                        'settings.mcp.sync.discoverMcpServersDescription',
+                        'Visit the platform to discover available MCP servers'
+                      )}
+                    </StepDescription>
+                    <LinkContainer>
+                      <ExternalLink href={selectedProvider.discoverUrl} target="_blank">
+                        <LinkIcon>🌐</LinkIcon>
+                        <span>{t('settings.mcp.sync.discoverMcpServers', 'Discover MCP Servers')}</span>
+                      </ExternalLink>
+                    </LinkContainer>
+                  </StepContent>
+                </StepSection>
 
-        <ProviderContent>
-          <Form form={form} layout="vertical" style={{ width: '100%' }}>
-            <StepSection>
-              <StepNumber>1</StepNumber>
-              <StepContent>
-                <StepTitle>{t('settings.mcp.sync.discoverMcpServers', 'Discover MCP Servers')}</StepTitle>
-                <StepDescription>
-                  {t(
-                    'settings.mcp.sync.discoverMcpServersDescription',
-                    'Visit the platform to discover available MCP servers'
-                  )}
-                </StepDescription>
-                <LinkContainer>
-                  <ExternalLink href={selectedProvider.discoverUrl} target="_blank">
-                    <LinkIcon>🌐</LinkIcon>
-                    <span>{t('settings.mcp.sync.discoverMcpServers', 'Discover MCP Servers')}</span>
-                  </ExternalLink>
-                </LinkContainer>
-              </StepContent>
-            </StepSection>
+                <StepSection>
+                  <StepNumber>2</StepNumber>
+                  <StepContent>
+                    <StepTitle>{t('settings.mcp.sync.getToken', 'Get API Token')}</StepTitle>
+                    <StepDescription>
+                      {t('settings.mcp.sync.getTokenDescription', 'Retrieve your personal API token from your account')}
+                    </StepDescription>
+                    <LinkContainer>
+                      <ExternalLink href={selectedProvider.apiKeyUrl} target="_blank">
+                        <LinkIcon>🔑</LinkIcon>
+                        <span>{t('settings.mcp.sync.getToken', 'Get API Token')}</span>
+                      </ExternalLink>
+                    </LinkContainer>
+                  </StepContent>
+                </StepSection>
 
-            <StepSection>
-              <StepNumber>2</StepNumber>
-              <StepContent>
-                <StepTitle>{t('settings.mcp.sync.getToken', 'Get API Token')}</StepTitle>
-                <StepDescription>
-                  {t('settings.mcp.sync.getTokenDescription', 'Retrieve your personal API token from your account')}
-                </StepDescription>
-                <LinkContainer>
-                  <ExternalLink href={selectedProvider.apiKeyUrl} target="_blank">
-                    <LinkIcon>🔑</LinkIcon>
-                    <span>{t('settings.mcp.sync.getToken', 'Get API Token')}</span>
-                  </ExternalLink>
-                </LinkContainer>
-              </StepContent>
-            </StepSection>
+                <StepSection>
+                  <StepNumber>3</StepNumber>
+                  <StepContent>
+                    <StepTitle>{t('settings.mcp.sync.setToken', 'Enter Your Token')}</StepTitle>
+                    <FormField
+                      control={form.control}
+                      name="token"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormControl>
+                            <Input
+                              type="password"
+                              placeholder={t('settings.mcp.sync.tokenPlaceholder', 'Enter API token here')}
+                              {...field}
+                            />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </StepContent>
+                </StepSection>
 
-            <StepSection>
-              <StepNumber>3</StepNumber>
-              <StepContent>
-                <StepTitle>{t('settings.mcp.sync.setToken', 'Enter Your Token')}</StepTitle>
-                <Form.Item
-                  name={selectedProvider.tokenFieldName}
-                  rules={[
-                    {
-                      required: true,
-                      message: t('settings.mcp.sync.tokenRequired', 'API Token is required')
-                    }
-                  ]}>
-                  <Input.Password
-                    placeholder={t('settings.mcp.sync.tokenPlaceholder', 'Enter API token here')}
-                    onChange={(e) => {
-                      setTokens((prev) => ({
-                        ...prev,
-                        [selectedProvider.tokenFieldName]: e.target.value
-                      }))
-                    }}
-                  />
-                </Form.Item>
-              </StepContent>
-            </StepSection>
-          </Form>
-        </ProviderContent>
-
-        <ButtonContainer>
-          <Button variant="default" onClick={onCancel}>
-            {t('common.cancel')}
-          </Button>
-          <Button variant="default" onClick={handleSync} disabled={isSyncing || isSyncDisabled()}>
-            {t('settings.mcp.sync.button', 'Sync')}
-          </Button>
-        </ButtonContainer>
-      </ContentContainer>
-    </Modal>
+                <ButtonContainer>
+                  <Button type="button" variant="outline" onClick={closeAndResolve}>
+                    {t('common.cancel')}
+                  </Button>
+                  <Button type="submit" disabled={isSyncing || isSyncDisabled}>
+                    {t('settings.mcp.sync.button', 'Sync')}
+                  </Button>
+                </ButtonContainer>
+              </form>
+            </Form>
+          </ProviderContent>
+        </ContentContainer>
+      </DialogContent>
+    </Dialog>
   )
 }
 
-const ContentContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`
+const ContentContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col gap-2.5', className)} {...props} />
+)
 
-const ProviderSelector = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 15px;
-`
+const ProviderSelector = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-3.75 flex items-center gap-3', className)} {...props} />
+)
 
-const SelectorLabel = styled.div`
-  font-weight: 500;
-  white-space: nowrap;
-`
+const ProviderContent = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('border-border border-t pt-5', className)} {...props} />
+)
 
-const ProviderContent = styled.div`
-  border-top: 1px solid var(--color-border);
-  padding-top: 20px;
+const StepSection = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-5 flex items-start gap-3.75', className)} {...props} />
+)
 
-  &.no-border {
-    border-top: none;
-    padding-top: 0;
-  }
-`
+const StepNumber = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary font-semibold text-sm text-white',
+      className
+    )}
+    {...props}
+  />
+)
 
-const StepSection = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 15px;
-  margin-bottom: 20px;
-`
+const StepContent = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex grow flex-col', className)} {...props} />
+)
 
-const StepNumber = styled.div`
-  background-color: var(--color-primary);
-  color: white;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  font-size: 14px;
-  flex-shrink: 0;
-  margin-top: 2px;
-`
+const StepTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-1 font-semibold text-[15px]', className)} {...props} />
+)
 
-const StepContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`
+const StepDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-2 text-[13px] text-foreground-secondary', className)} {...props} />
+)
 
-const StepTitle = styled.div`
-  font-weight: 600;
-  font-size: 15px;
-  margin-bottom: 4px;
-`
+const LinkContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-1', className)} {...props} />
+)
 
-const StepDescription = styled.div`
-  color: var(--color-text-secondary);
-  font-size: 13px;
-  margin-bottom: 8px;
-`
+const ExternalLink = ({ className, ...props }: React.ComponentPropsWithoutRef<'a'>) => (
+  <a
+    className={cn(
+      'flex items-center gap-2 rounded-md bg-background-subtle px-2.5 py-2 text-primary text-sm transition-all hover:bg-muted hover:no-underline',
+      className
+    )}
+    {...props}
+  />
+)
 
-const LinkContainer = styled.div`
-  margin-top: 4px;
-`
+const LinkIcon = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('text-base', className)} {...props} />
+)
 
-const ExternalLink = styled.a`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border-radius: 6px;
-  background-color: var(--color-background-2);
-  font-size: 14px;
-  color: var(--color-primary);
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: var(--color-background-3);
-    text-decoration: none;
-  }
-`
-
-const LinkIcon = styled.span`
-  font-size: 16px;
-`
-
-const ButtonContainer = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-top: 15px;
-  border-top: 1px solid var(--color-border);
-`
+const ButtonContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex justify-end gap-2 border-border border-t pt-3.75', className)} {...props} />
+)
 
 const TopViewKey = 'SyncServersPopup'
 
diff --git a/src/renderer/src/pages/settings/MCPSettings/index.tsx b/src/renderer/src/pages/settings/MCPSettings/index.tsx
index 8dfe7bc59e..e391d2316e 100644
--- a/src/renderer/src/pages/settings/MCPSettings/index.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/index.tsx
@@ -1,15 +1,18 @@
-import { ArrowLeftOutlined } from '@ant-design/icons'
-import { MenuItem, MenuList } from '@cherrystudio/ui'
-import DividerWithText from '@renderer/components/DividerWithText'
+import { Flex, MenuDivider, MenuItem, MenuList } from '@cherrystudio/ui'
 import { McpLogo } from '@renderer/components/Icons'
 import Scrollbar from '@renderer/components/Scrollbar'
-import { Link, Outlet, useLocation, useNavigate } from '@tanstack/react-router'
-import { Button, Flex } from 'antd'
+import { Outlet, useLocation, useNavigate } from '@tanstack/react-router'
 import { FolderCog, Package, ShoppingBag } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
+import {
+  settingsSubmenuDividerClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  settingsSubmenuSectionTitleClassName
+} from '..'
 import { getMCPProviderLogo, getProviderDisplayName, providers } from './providers/config'
 
 const MCPSettings: FC = () => {
@@ -38,45 +41,36 @@ const MCPSettings: FC = () => {
 
   const activeView = getActiveView()
 
-  // 判断是否为主页面（是否显示返回按钮）
-  const isHomePage = () => {
-    const path = location.pathname
-    // 主页面不显示返回按钮
-    if (path === '/settings/mcp' || path === '/settings/mcp/servers') return true
-    if (path === '/settings/mcp/builtin' || path === '/settings/mcp/marketplaces') return true
-
-    // 服务商页面也是主页面
-    return providers.some((p) => path === `/settings/mcp/${p.key}`)
-  }
-
   return (
-    <Container>
-      <MainContainer>
-        <McpMenuScroll>
-          <McpMenuList>
+    <Flex className="min-w-0 flex-1">
+      <div className="flex h-[calc(100vh-var(--navbar-height)-6px)] w-full min-w-0 flex-1 flex-row overflow-hidden">
+        <Scrollbar className={settingsSubmenuScrollClassName}>
+          <MenuList className={settingsSubmenuListClassName}>
             <MenuItem
               label={t('settings.mcp.servers', 'MCP Servers')}
               active={activeView === 'servers'}
               onClick={() => navigate({ to: '/settings/mcp/servers' })}
               icon={<McpLogo width={18} height={18} style={{ opacity: 0.8 }} />}
-              className="font-medium"
+              className={settingsSubmenuItemClassName}
             />
-            <DividerWithText text={t('settings.mcp.discover', 'Discover')} style={{ margin: '10px 0 8px 0' }} />
+            <MenuDivider className={settingsSubmenuDividerClassName} />
+            <div className={settingsSubmenuSectionTitleClassName}>{t('settings.mcp.discover', 'Discover')}</div>
             <MenuItem
               label={t('settings.mcp.builtinServers', 'Built-in Servers')}
               active={activeView === 'builtin'}
               onClick={() => navigate({ to: '/settings/mcp/builtin' })}
               icon={<Package size={18} />}
-              className="font-medium"
+              className={settingsSubmenuItemClassName}
             />
             <MenuItem
               label={t('settings.mcp.marketplaces', 'Marketplaces')}
               active={activeView === 'marketplaces'}
               onClick={() => navigate({ to: '/settings/mcp/marketplaces' })}
               icon={<ShoppingBag size={18} />}
-              className="font-medium"
+              className={settingsSubmenuItemClassName}
             />
-            <DividerWithText text={t('settings.mcp.providers', 'Providers')} style={{ margin: '10px 0 8px 0' }} />
+            <MenuDivider className={settingsSubmenuDividerClassName} />
+            <div className={settingsSubmenuSectionTitleClassName}>{t('settings.mcp.providers', 'Providers')}</div>
             {providers.map((provider) => (
               <MenuItem
                 key={provider.key}
@@ -87,71 +81,17 @@ const MCPSettings: FC = () => {
                   const logo = getMCPProviderLogo(provider.key)
                   return logo ? <logo.Avatar size={24} shape="circle" /> : <FolderCog size={16} />
                 })()}
-                className="font-medium"
+                className={settingsSubmenuItemClassName}
               />
             ))}
-          </McpMenuList>
-        </McpMenuScroll>
-        <RightContainer>
-          {!isHomePage() && (
-            <BackButtonContainer>
-              <Link to="/settings/mcp/servers">
-                <Button type="default" shape="circle" size="small">
-                  <ArrowLeftOutlined />
-                </Button>
-              </Link>
-            </BackButtonContainer>
-          )}
+          </MenuList>
+        </Scrollbar>
+        <div className="relative min-w-0 flex-1 overflow-hidden">
           <Outlet />
-        </RightContainer>
-      </MainContainer>
-    </Container>
+        </div>
+      </div>
+    </Flex>
   )
 }
 
-const Container = styled(Flex)`
-  flex: 1;
-`
-
-const MainContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  width: 100%;
-  height: calc(100vh - var(--navbar-height) - 6px);
-  overflow: hidden;
-`
-
-const McpMenuScroll = styled(Scrollbar)`
-  width: var(--settings-width);
-  height: calc(100vh - var(--navbar-height));
-  border-right: 0.5px solid var(--color-border);
-`
-
-const McpMenuList = styled(MenuList)`
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  padding-bottom: 48px;
-  min-height: 100%;
-  box-sizing: border-box;
-`
-
-const RightContainer = styled.div`
-  flex: 1;
-  position: relative;
-`
-
-const BackButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: transparent;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-`
-
 export default MCPSettings
diff --git a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
index 6cb24ee1d5..7f140f43f4 100644
--- a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
@@ -1,5 +1,21 @@
-import { CloseCircleFilled } from '@ant-design/icons'
-import { Button, Flex, HelpTooltip, RowFlex, Switch, Tooltip } from '@cherrystudio/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  EditableNumber,
+  Flex,
+  HelpTooltip,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RowFlex,
+  Switch,
+  Textarea,
+  Tooltip
+} from '@cherrystudio/ui'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { ResetIcon } from '@renderer/components/Icons'
 import Selector from '@renderer/components/Selector'
@@ -10,16 +26,18 @@ import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { DEFAULT_ASSISTANT_SETTINGS } from '@renderer/services/AssistantService'
 import type { AssistantSettings as AssistantSettingsType } from '@renderer/types'
 import { getLeadingEmoji, modalConfirm } from '@renderer/utils'
-import { Col, Divider, Input, InputNumber, Modal, Popover, Row, Slider } from 'antd'
-import TextArea from 'antd/es/input/TextArea'
+import { CircleX } from 'lucide-react'
 import type { Dispatch, FC, SetStateAction } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingContainer, SettingRow, SettingSubtitle } from '..'
+import ParameterSlider from './ParameterSlider'
 
-const AssistantSettings: FC = () => {
+const PARAMETER_ROW_CLASS = 'border-border/60 border-b py-4 last:border-b-0'
+const PARAMETER_SLIDER_CLASS = 'mt-3 grid grid-cols-[minmax(0,1fr)_96px] items-center gap-4'
+
+export const AssistantSettings: FC = () => {
   const { defaultAssistant, updateDefaultAssistant } = useDefaultAssistant()
   const [temperature, setTemperature] = useState(defaultAssistant.settings?.temperature ?? DEFAULT_TEMPERATURE)
   const [enableTemperature, setEnableTemperature] = useState(defaultAssistant.settings?.enableTemperature ?? false)
@@ -103,233 +121,211 @@ const AssistantSettings: FC = () => {
   }
 
   return (
-    <SettingContainer
-      style={{ height: 'auto', background: 'transparent', padding: `0 0 12px 0`, gap: 10 }}
-      theme={theme}>
-      <RowFlex className="items-center gap-2" style={{ marginTop: 10 }}>
-        <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow trigger="click">
-          <EmojiButtonWrapper>
-            <Button className="h-[30px] min-w-[30px] p-1 text-xl">{emoji}</Button>
-            {emoji && (
-              <CloseCircleFilled
-                className="delete-icon"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  handleEmojiDelete()
-                }}
-                style={{
-                  display: 'none',
-                  position: 'absolute',
-                  top: '-8px',
-                  right: '-8px',
-                  fontSize: '16px',
-                  color: '#ff4d4f',
-                  cursor: 'pointer'
+    <SettingContainer className="gap-6" style={{ height: 'auto', background: 'transparent', padding: 0 }} theme={theme}>
+      <section className="space-y-4">
+        <RowFlex className="items-center gap-3">
+          <Popover>
+            <div className="group/emoji relative inline-block">
+              <PopoverTrigger asChild>
+                <Button className="h-[30px] min-w-[30px] p-1 text-xl">{emoji}</Button>
+              </PopoverTrigger>
+              {emoji && (
+                <CircleX
+                  className="group-hover/emoji:block! absolute top-[-8px] right-[-8px] hidden size-4 cursor-pointer text-destructive"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleEmojiDelete()
+                  }}
+                />
+              )}
+            </div>
+            <PopoverContent className="w-auto p-0">
+              <EmojiPicker onEmojiClick={handleEmojiSelect} />
+            </PopoverContent>
+          </Popover>
+          <Input
+            placeholder={t('common.assistant') + t('common.name')}
+            value={name}
+            onChange={handleNameChange}
+            className="flex-1"
+          />
+        </RowFlex>
+
+        <div className="space-y-2">
+          <SettingSubtitle className="mt-0">{t('common.prompt')}</SettingSubtitle>
+          <Textarea.Input
+            rows={4}
+            placeholder={t('common.assistant') + t('common.prompt')}
+            value={defaultAssistant.prompt}
+            onChange={(e) => updateDefaultAssistant({ ...defaultAssistant, prompt: e.target.value })}
+            spellCheck={false}
+          />
+        </div>
+      </section>
+
+      <section className="space-y-3">
+        <SettingSubtitle className="mt-0 flex items-center justify-between">
+          {t('settings.assistant.model_params')}
+          <Tooltip content={t('common.reset')}>
+            <Button variant="ghost" onClick={onReset} size="icon">
+              <ResetIcon size={16} />
+            </Button>
+          </Tooltip>
+        </SettingSubtitle>
+
+        <div className="rounded-md border border-border/60 bg-muted/20 px-4">
+          <div className={PARAMETER_ROW_CLASS}>
+            <SettingRow>
+              <RowFlex className="items-center">
+                <p className="m-0 mr-1.25 text-sm">{t('chat.settings.temperature.label')}</p>
+                <HelpTooltip
+                  content={t('chat.settings.temperature.tip')}
+                  iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
+                />
+              </RowFlex>
+              <Switch
+                style={{ marginLeft: 10 }}
+                checked={enableTemperature}
+                onCheckedChange={(enabled) => {
+                  setEnableTemperature(enabled)
+                  onUpdateAssistantSettings({ enableTemperature: enabled })
                 }}
               />
+            </SettingRow>
+            {enableTemperature && (
+              <div className={PARAMETER_SLIDER_CLASS}>
+                <ParameterSlider
+                  min={0}
+                  max={2}
+                  value={typeof temperature === 'number' ? temperature : 0}
+                  marks={{ 0: '0', 0.7: '0.7', 2: '2' }}
+                  step={0.01}
+                  onChange={setTemperature}
+                  onCommit={onTemperatureChange}
+                />
+              </div>
             )}
-          </EmojiButtonWrapper>
-        </Popover>
-        <Input
-          placeholder={t('common.assistant') + t('common.name')}
-          value={name}
-          onChange={handleNameChange}
-          style={{ flex: 1 }}
-        />
-      </RowFlex>
-      <SettingSubtitle style={{ marginTop: 0 }}>{t('common.prompt')}</SettingSubtitle>
-      <TextArea
-        rows={4}
-        placeholder={t('common.assistant') + t('common.prompt')}
-        value={defaultAssistant.prompt}
-        onChange={(e) => updateDefaultAssistant({ ...defaultAssistant, prompt: e.target.value })}
-        spellCheck={false}
-      />
-      <SettingSubtitle
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          marginTop: 0
-        }}>
-        {t('settings.assistant.model_params')}
-        <Tooltip content={t('common.reset')}>
-          <Button variant="ghost" onClick={onReset} size="icon">
-            <ResetIcon size={16} />
-          </Button>
-        </Tooltip>
-      </SettingSubtitle>
-      <Divider style={{ margin: '2px 0' }} />
-      <SettingRow>
-        <RowFlex className="items-center">
-          <Label>{t('chat.settings.temperature.label')}</Label>
-          <HelpTooltip
-            content={t('chat.settings.temperature.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
-          />
-        </RowFlex>
-        <Switch
-          style={{ marginLeft: 10 }}
-          checked={enableTemperature}
-          onCheckedChange={(enabled) => {
-            setEnableTemperature(enabled)
-            onUpdateAssistantSettings({ enableTemperature: enabled })
-          }}
-        />
-      </SettingRow>
-      {enableTemperature && (
-        <Row align="middle" gutter={12} style={{ marginTop: -5, marginBottom: -10 }}>
-          <Col span={20}>
-            <Slider
-              min={0}
-              max={2}
-              onChange={setTemperature}
-              onChangeComplete={onTemperatureChange}
-              value={typeof temperature === 'number' ? temperature : 0}
-              marks={{ 0: '0', 0.7: '0.7', 2: '2' }}
-              step={0.01}
-            />
-          </Col>
-          <Col span={4}>
-            <InputNumber
-              min={0}
-              max={2}
-              step={0.01}
-              value={temperature}
-              onChange={onTemperatureChange}
-              style={{ width: '100%' }}
-            />
-          </Col>
-        </Row>
-      )}
-      <Divider style={{ margin: '2px 0' }} />
-      <SettingRow>
-        <RowFlex className="items-center">
-          <Label>{t('chat.settings.top_p.label')}</Label>
-          <HelpTooltip
-            content={t('chat.settings.top_p.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
-          />
-        </RowFlex>
-        <Switch
-          style={{ marginLeft: 10 }}
-          checked={enableTopP}
-          onCheckedChange={(enabled) => {
-            setEnableTopP(enabled)
-            onUpdateAssistantSettings({ enableTopP: enabled })
-          }}
-        />
-      </SettingRow>
-      {enableTopP && (
-        <Row align="middle" gutter={12} style={{ marginTop: -5, marginBottom: -10 }}>
-          <Col span={20}>
-            <Slider
-              min={0}
-              max={1}
-              onChange={setTopP}
-              onChangeComplete={onTopPChange}
-              value={typeof topP === 'number' ? topP : 1}
-              marks={{ 0: '0', 0.5: '0.5', 1: '1' }}
-              step={0.01}
-            />
-          </Col>
-          <Col span={4}>
-            <InputNumber min={0} max={1} step={0.01} value={topP} onChange={onTopPChange} style={{ width: '100%' }} />
-          </Col>
-        </Row>
-      )}
-      <Divider style={{ margin: '2px 0' }} />
-      <Row align="middle">
-        <Label>{t('chat.settings.context_count.label')}</Label>
-        <HelpTooltip
-          content={t('chat.settings.context_count.tip')}
-          iconProps={{ className: 'cursor-pointer text-color-text-3' }}
-        />
-      </Row>
-      <Row align="middle" gutter={20} style={{ marginTop: -5, marginBottom: -10 }}>
-        <Col span={19}>
-          <Slider
-            min={0}
-            max={20}
-            marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('chat.settings.max') }}
-            onChange={setContextCount}
-            onChangeComplete={onContextCountChange}
-            value={typeof contextCount === 'number' ? contextCount : 0}
-            step={1}
-          />
-        </Col>
-        <Col span={5}>
-          <InputNumber
-            min={0}
-            max={20}
-            step={1}
-            value={contextCount}
-            onChange={onContextCountChange}
-            style={{ width: '100%' }}
-          />
-        </Col>
-      </Row>
-      <Divider style={{ margin: '2px 0' }} />
-      <Flex className="items-center justify-between">
-        <RowFlex className="items-center">
-          <Label>{t('chat.settings.max_tokens.label')}</Label>
-          <HelpTooltip
-            content={t('chat.settings.max_tokens.tip')}
-            iconProps={{ className: 'cursor-pointer text-[var(--color-text-3)]' }}
-          />
-        </RowFlex>
-        <Switch
-          style={{ marginLeft: 10 }}
-          checked={enableMaxTokens}
-          onCheckedChange={async (enabled) => {
-            if (enabled) {
-              const confirmed = await modalConfirm({
-                title: t('chat.settings.max_tokens.confirm'),
-                content: t('chat.settings.max_tokens.confirm_content'),
-                okButtonProps: {
-                  danger: true
-                }
-              })
-              if (!confirmed) return
-            }
+          </div>
 
-            setEnableMaxTokens(enabled)
-            onUpdateAssistantSettings({ enableMaxTokens: enabled })
-          }}
-        />
-      </Flex>
-      {enableMaxTokens && (
-        <Row align="middle" gutter={20}>
-          <Col span={24}>
-            <InputNumber
-              disabled={!enableMaxTokens}
-              min={0}
-              max={10000000}
-              step={100}
-              value={maxTokens}
-              changeOnBlur
-              onChange={onMaxTokensChange}
-              style={{ width: '100%' }}
-            />
-          </Col>
-        </Row>
-      )}
-      <Divider style={{ margin: '2px 0' }} />
-      <SettingRow>
-        <Label>{t('assistants.settings.tool_use_mode.label')}</Label>
-        <Selector
-          value={toolUseMode}
-          options={[
-            { label: t('assistants.settings.tool_use_mode.prompt'), value: 'prompt' },
-            { label: t('assistants.settings.tool_use_mode.function'), value: 'function' }
-          ]}
-          onChange={(value) => {
-            setToolUseMode(value)
-            onUpdateAssistantSettings({ toolUseMode: value })
-          }}
-          size={14}
-        />
-      </SettingRow>
+          <div className={PARAMETER_ROW_CLASS}>
+            <SettingRow>
+              <RowFlex className="items-center">
+                <p className="m-0 mr-1.25 text-sm">{t('chat.settings.top_p.label')}</p>
+                <HelpTooltip
+                  content={t('chat.settings.top_p.tip')}
+                  iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
+                />
+              </RowFlex>
+              <Switch
+                style={{ marginLeft: 10 }}
+                checked={enableTopP}
+                onCheckedChange={(enabled) => {
+                  setEnableTopP(enabled)
+                  onUpdateAssistantSettings({ enableTopP: enabled })
+                }}
+              />
+            </SettingRow>
+            {enableTopP && (
+              <div className={PARAMETER_SLIDER_CLASS}>
+                <ParameterSlider
+                  min={0}
+                  max={1}
+                  value={typeof topP === 'number' ? topP : 1}
+                  marks={{ 0: '0', 0.5: '0.5', 1: '1' }}
+                  step={0.01}
+                  onChange={setTopP}
+                  onCommit={onTopPChange}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className={PARAMETER_ROW_CLASS}>
+            <div className="flex items-center">
+              <p className="m-0 mr-1.25 text-sm">{t('chat.settings.context_count.label')}</p>
+              <HelpTooltip
+                content={t('chat.settings.context_count.tip')}
+                iconProps={{ className: 'cursor-pointer text-color-text-3' }}
+              />
+            </div>
+            <div className={PARAMETER_SLIDER_CLASS}>
+              <ParameterSlider
+                min={0}
+                max={20}
+                marks={{ 0: '0', 5: '5', 10: '10', 15: '15', 20: t('chat.settings.max') }}
+                value={typeof contextCount === 'number' ? contextCount : 0}
+                step={1}
+                onChange={setContextCount}
+                onCommit={onContextCountChange}
+              />
+            </div>
+          </div>
+
+          <div className={PARAMETER_ROW_CLASS}>
+            <Flex className="items-center justify-between">
+              <RowFlex className="items-center">
+                <p className="m-0 mr-1.25 text-sm">{t('chat.settings.max_tokens.label')}</p>
+                <HelpTooltip
+                  content={t('chat.settings.max_tokens.tip')}
+                  iconProps={{ className: 'cursor-pointer text-[var(--color-foreground-muted)]' }}
+                />
+              </RowFlex>
+              <Switch
+                style={{ marginLeft: 10 }}
+                checked={enableMaxTokens}
+                onCheckedChange={async (enabled) => {
+                  if (enabled) {
+                    const confirmed = await modalConfirm({
+                      title: t('chat.settings.max_tokens.confirm'),
+                      content: t('chat.settings.max_tokens.confirm_content'),
+                      okText: t('common.confirm'),
+                      cancelText: t('common.cancel')
+                    })
+                    if (!confirmed) return
+                  }
+
+                  setEnableMaxTokens(enabled)
+                  onUpdateAssistantSettings({ enableMaxTokens: enabled })
+                }}
+              />
+            </Flex>
+            {enableMaxTokens && (
+              <div className="mt-3">
+                <EditableNumber
+                  disabled={!enableMaxTokens}
+                  min={0}
+                  max={10000000}
+                  step={100}
+                  value={maxTokens}
+                  changeOnBlur
+                  onChange={onMaxTokensChange}
+                  size="small"
+                  align="start"
+                  className="w-full"
+                />
+              </div>
+            )}
+          </div>
+
+          <div className={PARAMETER_ROW_CLASS}>
+            <SettingRow>
+              <p className="m-0 mr-1.25 text-sm">{t('assistants.settings.tool_use_mode.label')}</p>
+              <Selector
+                value={toolUseMode}
+                options={[
+                  { label: t('assistants.settings.tool_use_mode.prompt'), value: 'prompt' },
+                  { label: t('assistants.settings.tool_use_mode.function'), value: 'function' }
+                ]}
+                onChange={(value) => {
+                  setToolUseMode(value)
+                  onUpdateAssistantSettings({ toolUseMode: value })
+                }}
+                size={14}
+              />
+            </SettingRow>
+          </div>
+        </div>
+      </section>
     </SettingContainer>
   )
 }
@@ -342,33 +338,30 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [open, setOpen] = useState(true)
   const { t } = useTranslation()
 
-  const onOk = () => {
-    setOpen(false)
-  }
-
-  const onCancel = () => {
-    setOpen(false)
-  }
-
   const onClose = () => {
+    setOpen(false)
     resolve({})
   }
 
-  DefaultAssistantSettingsPopup.hide = onCancel
+  DefaultAssistantSettingsPopup.hide = onClose
 
   return (
-    <Modal
-      title={t('settings.assistant.title')}
+    <Dialog
       open={open}
-      onOk={onOk}
-      onCancel={onCancel}
-      afterClose={onClose}
-      transitionName="animation-move-down"
-      centered
-      width={500}
-      footer={null}>
-      <AssistantSettings />
-    </Modal>
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onClose()
+        } else {
+          setOpen(true)
+        }
+      }}>
+      <DialogContent className="w-[500px]">
+        <DialogHeader>
+          <DialogTitle>{t('settings.assistant.title')}</DialogTitle>
+        </DialogHeader>
+        <AssistantSettings />
+      </DialogContent>
+    </Dialog>
   )
 }
 
@@ -393,18 +386,3 @@ export default class DefaultAssistantSettingsPopup {
     })
   }
 }
-
-const EmojiButtonWrapper = styled.div`
-  position: relative;
-  display: inline-block;
-
-  &:hover .delete-icon {
-    display: block !important;
-  }
-`
-
-const Label = styled.p`
-  margin: 0;
-  font-size: 14px;
-  margin-right: 5px;
-`
diff --git a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
index 165d198fb6..63570d2987 100644
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@@ -1,24 +1,31 @@
 import { RedoOutlined } from '@ant-design/icons'
-import { Button, InfoTooltip, RowFlex, Tooltip } from '@cherrystudio/ui'
+import { Avatar, AvatarFallback, Button, InfoTooltip, PageSidePanel, Tooltip } from '@cherrystudio/ui'
+import { resolveIcon } from '@cherrystudio/ui/icons'
 import { usePreference } from '@data/hooks/usePreference'
-import ModelSelector from '@renderer/components/ModelSelectorLegacy'
-import { isEmbeddingModel, isRerankModel, isTextToImageModel } from '@renderer/config/models'
+import { ModelSelector } from '@renderer/components/ModelSelector'
+import { getProviderDisplayName } from '@renderer/components/ModelSelector/utils'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useDefaultModel } from '@renderer/hooks/useAssistant'
-import { useProviders } from '@renderer/hooks/useProvider'
-import { getModelUniqId, hasModel } from '@renderer/services/ModelService'
-import type { Model } from '@renderer/types'
+import { useModels } from '@renderer/hooks/useModels'
+import { useProviders } from '@renderer/hooks/useProviders'
+import { TranslateSettingsPanelContent } from '@renderer/pages/translate/components/TranslateSettingsPopup/TranslateSettingsPopup'
+import { cn } from '@renderer/utils'
 import { TRANSLATE_PROMPT } from '@shared/config/prompts'
-import { find } from 'lodash'
-import { Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
-import type { FC } from 'react'
-import { useCallback, useMemo } from 'react'
+import {
+  isUniqueModelId,
+  type Model,
+  MODEL_CAPABILITY,
+  parseUniqueModelId,
+  type UniqueModelId
+} from '@shared/data/types/model'
+import type { Provider } from '@shared/data/types/provider'
+import { ChevronDown, Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
+import type { FC, ReactNode } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingDescription, SettingGroup, SettingTitle } from '..'
-import TranslateSettingsPopup from '../TranslateSettingsPopup/TranslateSettingsPopup'
-import DefaultAssistantSettings from './DefaultAssistantSettings'
-import TopicNamingModalPopup from './QuickModelPopup'
+import { SettingContainer, SettingDescription, SettingDivider, SettingGroup, SettingRow, SettingRowTitle } from '..'
+import { AssistantSettings } from './DefaultAssistantSettings'
+import { TopicNamingSettings } from './QuickModelPopup'
 
 interface ModelSettingsProps {
   showSettingsButton?: boolean
@@ -26,131 +33,306 @@ interface ModelSettingsProps {
   compact?: boolean
 }
 
+interface ModelSettingRowProps {
+  icon: ReactNode
+  title: ReactNode
+  description?: ReactNode
+  compact?: boolean
+  children: ReactNode
+}
+
+const ModelSettingRow: FC<ModelSettingRowProps> = ({ icon, title, description, compact, children }) => (
+  <SettingRow className={cn(compact ? 'flex-col items-stretch gap-3 py-1' : 'items-start gap-6 py-1.5')}>
+    <div className="min-w-0 flex-1">
+      <SettingRowTitle className="gap-2 font-semibold">
+        {icon}
+        {title}
+      </SettingRowTitle>
+      {description && <SettingDescription className="mt-1.5 leading-5">{description}</SettingDescription>}
+    </div>
+    <div className={compact ? 'flex w-full items-center gap-2' : 'flex w-[340px] shrink-0 items-center gap-2'}>
+      {children}
+    </div>
+  </SettingRow>
+)
+
+interface ModelSelectorTriggerProps {
+  model?: Model
+  providers: Provider[]
+  placeholder: string
+  compact?: boolean
+}
+
+interface DefaultModelSelectorProps extends ModelSelectorTriggerProps {
+  value?: UniqueModelId
+  filter: (model: Model) => boolean
+  onSelect: (modelId: UniqueModelId | undefined) => void
+}
+
+type ModelSettingsPanel = 'default-assistant' | 'quick-model' | 'translate' | null
+
+const excludedDefaultModelCapabilities = new Set<string>([
+  MODEL_CAPABILITY.EMBEDDING,
+  MODEL_CAPABILITY.RERANK,
+  MODEL_CAPABILITY.IMAGE_GENERATION
+])
+
+const ASSISTANT_SETTINGS_DRAWER_WIDTH_CLASS = '!w-[min(500px,calc(100%-1rem))]'
+const MODEL_SETTINGS_DRAWER_WIDTH_CLASS = '!w-[min(500px,calc(100%-1rem))]'
+const TRANSLATE_DRAWER_WIDTH_CLASS = '!w-[min(500px,calc(100%-1rem))]'
+const SETTINGS_DRAWER_BODY_CLASS = 'space-y-0 px-6 py-5'
+const SETTINGS_DRAWER_HEADER_CLASS = 'h-14 px-6'
+const MODEL_SELECTOR_VISIBLE_COUNT = 8
+
+const toModelSelectorValue = (modelId: string | null): UniqueModelId | undefined =>
+  modelId && isUniqueModelId(modelId) ? modelId : undefined
+
+const getModelIdentifier = (model: Model) => model.apiModelId ?? parseUniqueModelId(model.id).modelId
+
+const getModelInitial = (model: Model) => model.name.trim().charAt(0) || 'M'
+
+const renderModelSelectorTrigger = ({ model, providers, placeholder, compact }: ModelSelectorTriggerProps) => {
+  const provider = model ? providers.find((item) => item.id === model.providerId) : undefined
+  const providerName = provider ? getProviderDisplayName(provider) : undefined
+  const icon = model ? resolveIcon(getModelIdentifier(model), model.providerId) : undefined
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size={compact ? 'lg' : 'default'}
+      className={cn('min-w-0 flex-1 justify-between px-2.5 text-left font-normal', compact ? 'h-9' : 'h-7.5')}>
+      <span className="flex min-w-0 flex-1 items-center gap-2">
+        {model && icon ? (
+          <icon.Avatar size={20} />
+        ) : model ? (
+          <Avatar size="sm">
+            <AvatarFallback>{getModelInitial(model)}</AvatarFallback>
+          </Avatar>
+        ) : null}
+        <span className="min-w-0 flex-1 truncate">{model?.name ?? placeholder}</span>
+        {providerName && <span className="max-w-[32%] truncate text-muted-foreground text-xs">{providerName}</span>}
+      </span>
+      <ChevronDown size={14} className="shrink-0 text-muted-foreground" />
+    </Button>
+  )
+}
+
+const DefaultModelSelector: FC<DefaultModelSelectorProps> = ({
+  value,
+  model,
+  providers,
+  placeholder,
+  compact,
+  filter,
+  onSelect
+}) => (
+  <ModelSelector
+    multiple={false}
+    selectionType="id"
+    value={value}
+    onSelect={onSelect}
+    filter={filter}
+    listVisibleCount={MODEL_SELECTOR_VISIBLE_COUNT}
+    trigger={renderModelSelectorTrigger({ model, providers, placeholder, compact })}
+  />
+)
+
 const ModelSettings: FC<ModelSettingsProps> = ({
   showSettingsButton = true,
   showDescription = true,
   compact = false
 }) => {
-  const { defaultModel, quickModel, translateModel, setDefaultModel, setQuickModel, setTranslateModel } =
-    useDefaultModel()
-  const { providers } = useProviders()
-  const allModels = providers.map((p) => p.models).flat()
+  const [defaultModelId, setDefaultModelId] = usePreference('chat.default_model_id')
+  const [quickModelId, setQuickModelId] = usePreference('feature.quick_assistant.model_id')
+  const [translateModelId, setTranslateModelId] = usePreference('feature.translate.model_id')
+  const [activePanel, setActivePanel] = useState<ModelSettingsPanel>(null)
+  const { models } = useModels({ enabled: true })
+  const { providers } = useProviders({ enabled: true })
   const { theme } = useTheme()
   const { t } = useTranslation()
 
   const [translateModelPrompt, setTranslateModelPrompt] = usePreference('feature.translate.model_prompt')
 
   const modelPredicate = useCallback(
-    (m: Model) => !isEmbeddingModel(m) && !isRerankModel(m) && !isTextToImageModel(m),
+    (model: Model) => !model.capabilities.some((capability) => excludedDefaultModelCapabilities.has(capability)),
     []
   )
 
-  const defaultModelValue = useMemo(
-    () => (hasModel(defaultModel) ? getModelUniqId(defaultModel) : undefined),
-    [defaultModel]
+  const modelsById = useMemo(() => new Map(models.map((model) => [model.id, model])), [models])
+
+  const defaultModelValue = toModelSelectorValue(defaultModelId)
+  const quickModelValue = toModelSelectorValue(quickModelId)
+  const translateModelValue = toModelSelectorValue(translateModelId)
+
+  const defaultModel = defaultModelValue ? modelsById.get(defaultModelValue) : undefined
+  const quickModel = quickModelValue ? modelsById.get(quickModelValue) : undefined
+  const translateModel = translateModelValue ? modelsById.get(translateModelValue) : undefined
+
+  const onSelectDefaultModel = useCallback(
+    (modelId: UniqueModelId | undefined) => {
+      void setDefaultModelId(modelId ?? null)
+    },
+    [setDefaultModelId]
   )
 
-  const defaultQuickModel = useMemo(() => (hasModel(quickModel) ? getModelUniqId(quickModel) : undefined), [quickModel])
+  const onSelectQuickModel = useCallback(
+    (modelId: UniqueModelId | undefined) => {
+      void setQuickModelId(modelId ?? null)
+    },
+    [setQuickModelId]
+  )
 
-  const defaultTranslateModel = useMemo(
-    () => (hasModel(translateModel) ? getModelUniqId(translateModel) : undefined),
-    [translateModel]
+  const onSelectTranslateModel = useCallback(
+    (modelId: UniqueModelId | undefined) => {
+      void setTranslateModelId(modelId ?? null)
+    },
+    [setTranslateModelId]
   )
 
   const onResetTranslatePrompt = () => {
     void setTranslateModelPrompt(TRANSLATE_PROMPT)
   }
 
+  const closePanel = useCallback(() => {
+    setActivePanel(null)
+  }, [])
+
   const containerStyle = compact ? { padding: 0, background: 'transparent' } : undefined
   const groupStyle = compact ? { padding: 0, border: 'none', background: 'transparent' } : undefined
 
   return (
-    <SettingContainer theme={theme} style={containerStyle}>
-      <SettingGroup theme={theme} style={groupStyle}>
-        <SettingTitle style={{ justifyContent: 'flex-start', gap: 10, marginBottom: 12 }}>
-          <MessageSquareMore size={18} className="lucide-custom shrink-0 text-(--color-text-1)" />
-          {t('settings.models.default_assistant_model')}
-        </SettingTitle>
-        <RowFlex className="items-center">
-          <ModelSelector
-            providers={providers}
-            predicate={modelPredicate}
-            value={defaultModelValue}
-            defaultValue={defaultModelValue}
-            style={{ width: compact ? '100%' : 360 }}
-            size={compact ? 'large' : 'middle'}
-            onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
-            placeholder={t('settings.models.empty')}
-          />
-          {showSettingsButton && (
-            <Button className="ml-2" onClick={DefaultAssistantSettings.show} size="icon">
-              <Settings2 size={16} />
-            </Button>
-          )}
-        </RowFlex>
-        {showDescription && (
-          <SettingDescription>{t('settings.models.default_assistant_model_description')}</SettingDescription>
-        )}
-      </SettingGroup>
-      <SettingGroup theme={theme} style={groupStyle}>
-        <SettingTitle style={{ justifyContent: 'flex-start', gap: 10, marginBottom: 12 }}>
-          <Rocket size={18} className="lucide-custom shrink-0 text-(--color-text-1)" />
-          {t('settings.models.quick_model.label')}
-          <InfoTooltip content={t('settings.models.quick_model.tooltip')} />
-        </SettingTitle>
-        <RowFlex className="items-center">
-          <ModelSelector
-            providers={providers}
-            predicate={modelPredicate}
-            value={defaultQuickModel}
-            defaultValue={defaultQuickModel}
-            style={{ width: compact ? '100%' : 360 }}
-            size={compact ? 'large' : 'middle'}
-            onChange={(value) => setQuickModel(find(allModels, JSON.parse(value)) as Model)}
-            placeholder={t('settings.models.empty')}
-          />
-          {showSettingsButton && (
-            <Button className="ml-2" onClick={TopicNamingModalPopup.show} size="icon">
-              <Settings2 size={16} />
-            </Button>
-          )}
-        </RowFlex>
-        {showDescription && <SettingDescription>{t('settings.models.quick_model.description')}</SettingDescription>}
-      </SettingGroup>
-      <SettingGroup theme={theme} style={groupStyle}>
-        <SettingTitle style={{ justifyContent: 'flex-start', gap: 10, marginBottom: 12 }}>
-          <Languages size={18} className="lucide-custom shrink-0 text-(--color-text-1)" />
-          {t('settings.models.translate_model')}
-        </SettingTitle>
-        <RowFlex className="items-center">
-          <ModelSelector
-            providers={providers}
-            predicate={modelPredicate}
-            value={defaultTranslateModel}
-            defaultValue={defaultTranslateModel}
-            style={{ width: compact ? '100%' : 360 }}
-            size={compact ? 'large' : 'middle'}
-            onChange={(value) => setTranslateModel(find(allModels, JSON.parse(value)) as Model)}
-            placeholder={t('settings.models.empty')}
-          />
-          {showSettingsButton && (
-            <>
-              <Button className="ml-2" onClick={TranslateSettingsPopup.show} size="icon">
+    <div className="relative flex min-h-0 flex-1">
+      <SettingContainer theme={theme} style={containerStyle}>
+        <SettingGroup theme={theme} style={groupStyle}>
+          <ModelSettingRow
+            compact={compact}
+            icon={<MessageSquareMore size={16} className="lucide-custom shrink-0 text-(--color-foreground)" />}
+            title={t('settings.models.default_assistant_model')}
+            description={showDescription ? t('settings.models.default_assistant_model_description') : undefined}>
+            <DefaultModelSelector
+              value={defaultModelValue}
+              model={defaultModel}
+              providers={providers}
+              filter={modelPredicate}
+              compact={compact}
+              onSelect={onSelectDefaultModel}
+              placeholder={t('settings.models.empty')}
+            />
+            {showSettingsButton && (
+              <Button
+                aria-label={t('settings.assistant.title')}
+                className="shrink-0"
+                onClick={() => setActivePanel('default-assistant')}
+                size="icon-sm"
+                variant="outline">
                 <Settings2 size={16} />
               </Button>
-              {translateModelPrompt !== TRANSLATE_PROMPT && (
-                <Tooltip title={t('common.reset')}>
-                  <Button className="ml-2" onClick={onResetTranslatePrompt} size="icon">
-                    <RedoOutlined size={16} />
-                  </Button>
-                </Tooltip>
-              )}
-            </>
-          )}
-        </RowFlex>
-        <SettingDescription>{t('settings.models.translate_model_description')}</SettingDescription>
-      </SettingGroup>
-    </SettingContainer>
+            )}
+          </ModelSettingRow>
+          <SettingDivider />
+          <ModelSettingRow
+            compact={compact}
+            icon={<Rocket size={16} className="lucide-custom shrink-0 text-(--color-foreground)" />}
+            title={
+              <>
+                {t('settings.models.quick_model.label')}
+                <InfoTooltip content={t('settings.models.quick_model.tooltip')} />
+              </>
+            }
+            description={showDescription ? t('settings.models.quick_model.description') : undefined}>
+            <DefaultModelSelector
+              value={quickModelValue}
+              model={quickModel}
+              providers={providers}
+              filter={modelPredicate}
+              compact={compact}
+              onSelect={onSelectQuickModel}
+              placeholder={t('settings.models.empty')}
+            />
+            {showSettingsButton && (
+              <Button
+                aria-label={t('settings.models.quick_model.setting_title')}
+                className="shrink-0"
+                onClick={() => setActivePanel('quick-model')}
+                size="icon-sm"
+                variant="outline">
+                <Settings2 size={16} />
+              </Button>
+            )}
+          </ModelSettingRow>
+          <SettingDivider />
+          <ModelSettingRow
+            compact={compact}
+            icon={<Languages size={16} className="lucide-custom shrink-0 text-(--color-foreground)" />}
+            title={t('settings.models.translate_model')}
+            description={showDescription ? t('settings.models.translate_model_description') : undefined}>
+            <DefaultModelSelector
+              value={translateModelValue}
+              model={translateModel}
+              providers={providers}
+              filter={modelPredicate}
+              compact={compact}
+              onSelect={onSelectTranslateModel}
+              placeholder={t('settings.models.empty')}
+            />
+            {showSettingsButton && (
+              <>
+                <Button
+                  aria-label={t('settings.translate.title')}
+                  className="shrink-0"
+                  onClick={() => setActivePanel('translate')}
+                  size="icon-sm"
+                  variant="outline">
+                  <Settings2 size={16} />
+                </Button>
+                {translateModelPrompt !== TRANSLATE_PROMPT && (
+                  <Tooltip title={t('common.reset')}>
+                    <Button className="shrink-0" onClick={onResetTranslatePrompt} size="icon-sm" variant="outline">
+                      <RedoOutlined size={16} />
+                    </Button>
+                  </Tooltip>
+                )}
+              </>
+            )}
+          </ModelSettingRow>
+        </SettingGroup>
+      </SettingContainer>
+      {showSettingsButton && (
+        <>
+          <PageSidePanel
+            open={activePanel === 'default-assistant'}
+            onClose={closePanel}
+            closeLabel={t('common.close')}
+            header={<span className="font-semibold text-sm">{t('settings.assistant.title')}</span>}
+            contentClassName={ASSISTANT_SETTINGS_DRAWER_WIDTH_CLASS}
+            headerClassName={SETTINGS_DRAWER_HEADER_CLASS}
+            bodyClassName={SETTINGS_DRAWER_BODY_CLASS}>
+            <AssistantSettings />
+          </PageSidePanel>
+          <PageSidePanel
+            open={activePanel === 'quick-model'}
+            onClose={closePanel}
+            closeLabel={t('common.close')}
+            header={<span className="font-semibold text-sm">{t('settings.models.quick_model.setting_title')}</span>}
+            contentClassName={MODEL_SETTINGS_DRAWER_WIDTH_CLASS}
+            headerClassName={SETTINGS_DRAWER_HEADER_CLASS}
+            bodyClassName={SETTINGS_DRAWER_BODY_CLASS}>
+            <TopicNamingSettings />
+          </PageSidePanel>
+          <PageSidePanel
+            open={activePanel === 'translate'}
+            onClose={closePanel}
+            closeLabel={t('common.close')}
+            header={<span className="font-semibold text-sm">{t('settings.translate.title')}</span>}
+            contentClassName={TRANSLATE_DRAWER_WIDTH_CLASS}
+            headerClassName={SETTINGS_DRAWER_HEADER_CLASS}
+            bodyClassName={SETTINGS_DRAWER_BODY_CLASS}>
+            <TranslateSettingsPanelContent />
+          </PageSidePanel>
+        </>
+      )}
+    </div>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/ModelSettings/ParameterSlider.tsx b/src/renderer/src/pages/settings/ModelSettings/ParameterSlider.tsx
new file mode 100644
index 0000000000..0e3a1fc9a1
--- /dev/null
+++ b/src/renderer/src/pages/settings/ModelSettings/ParameterSlider.tsx
@@ -0,0 +1,72 @@
+import { EditableNumber, Slider, type SliderMark } from '@cherrystudio/ui'
+import type React from 'react'
+
+type ParameterSliderProps = {
+  value: number
+  min: number
+  max: number
+  step: number
+  marks: Record<number, React.ReactNode>
+  onChange: (value: number) => void
+  onCommit: (value: number | null) => void
+  inputWidthClassName?: string
+}
+
+const toSliderMarks = (marks: Record<number, React.ReactNode>): SliderMark[] =>
+  Object.entries(marks)
+    .map(([value, label]) => ({ value: Number(value), label }))
+    .sort((a, b) => a.value - b.value)
+
+const ParameterSlider = ({
+  value,
+  min,
+  max,
+  step,
+  marks,
+  onChange,
+  onCommit,
+  inputWidthClassName = 'w-full'
+}: ParameterSliderProps) => {
+  const handleSliderChange = ([nextValue]: number[]) => {
+    onChange(nextValue ?? min)
+  }
+
+  const handleSliderCommit = ([nextValue]: number[]) => {
+    onCommit(nextValue ?? min)
+  }
+
+  const handleNumberChange = (nextValue: number | null) => {
+    if (nextValue === null) {
+      return
+    }
+
+    onChange(nextValue)
+    onCommit(nextValue)
+  }
+
+  return (
+    <>
+      <Slider
+        min={min}
+        max={max}
+        value={[value]}
+        marks={toSliderMarks(marks)}
+        step={step}
+        onValueChange={handleSliderChange}
+        onValueCommit={handleSliderCommit}
+      />
+      <EditableNumber
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleNumberChange}
+        size="small"
+        align="start"
+        className={inputWidthClassName}
+      />
+    </>
+  )
+}
+
+export default ParameterSlider
diff --git a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
index 032efea79a..7fc22fdd96 100644
--- a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
@@ -1,11 +1,24 @@
-import { QuestionCircleOutlined } from '@ant-design/icons'
-import { ColFlex, Flex, RowFlex } from '@cherrystudio/ui'
-import { Switch } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  ColFlex,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Divider,
+  Flex,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RowFlex,
+  Switch,
+  Textarea
+} from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { ResetIcon } from '@renderer/components/Icons'
-import { Divider, Input, Modal, Popover } from 'antd'
-import { useCallback, useMemo, useState } from 'react'
+import { CircleHelp } from 'lucide-react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { TopView } from '../../../components/TopView'
@@ -15,75 +28,95 @@ interface Props {
   resolve: (data: any) => void
 }
 
-const PopupContainer: React.FC<Props> = ({ resolve }) => {
+export const TopicNamingSettings = () => {
   const [enableTopicNaming, setEnableTopicNaming] = usePreference('topic.naming.enabled')
   const [topicNamingPrompt, setTopicNamingPrompt] = usePreference('topic.naming_prompt')
-
-  const [open, setOpen] = useState(true)
   const { t } = useTranslation()
 
-  const onOk = () => {
-    setOpen(false)
-  }
-
-  const onCancel = () => {
-    setOpen(false)
-  }
-
-  const onClose = () => {
-    resolve({})
-  }
-
   const handleReset = useCallback(() => {
     void setTopicNamingPrompt('')
   }, [setTopicNamingPrompt])
 
-  TopicNamingModalPopup.hide = onCancel
-
-  const promptVarsContent = useMemo(() => <pre>{t('assistants.presets.add.prompt.variables.tip.content')}</pre>, [t])
-
   return (
-    <Modal
-      title={t('settings.models.quick_model.setting_title')}
-      open={open}
-      onOk={onOk}
-      onCancel={onCancel}
-      afterClose={onClose}
-      maskClosable={false}
-      transitionName="animation-move-down"
-      centered
-      style={{ padding: '24px' }}>
-      <SettingSubtitle style={{ marginTop: 0, marginBottom: 8 }}>
-        {t('settings.models.topic_naming.label')}
-      </SettingSubtitle>
-      <ColFlex className="items-stretch gap-2">
-        <RowFlex className="items-center gap-4">
-          <div>{t('settings.models.topic_naming.auto')}</div>
+    <section>
+      <SettingSubtitle className="mt-0 mb-3">{t('settings.models.topic_naming.label')}</SettingSubtitle>
+
+      <ColFlex className="items-stretch rounded-md border border-border/60 bg-muted/20">
+        <RowFlex className="min-h-11 items-center justify-between gap-4 px-3 py-2.5">
+          <div className="font-medium text-foreground text-sm">{t('settings.models.topic_naming.auto')}</div>
           <Switch checked={enableTopicNaming} onCheckedChange={setEnableTopicNaming} />
         </RowFlex>
+
         <Divider style={{ margin: 0 }} />
-        <div>
-          <Flex className="mb-1 h-[30px] items-center gap-1">
-            <div>{t('settings.models.topic_naming.prompt')}</div>
-            <Popover title={t('assistants.presets.add.prompt.variables.tip.title')} content={promptVarsContent}>
-              <QuestionCircleOutlined size={14} style={{ color: 'var(--color-text-2)' }} />
-            </Popover>
+
+        <div className="space-y-2 px-3 pt-3 pb-3.5">
+          <Flex className="min-h-7 items-center justify-between gap-2">
+            <RowFlex className="min-w-0 flex-1 items-center gap-1.5">
+              <div className="truncate font-medium text-foreground text-sm">
+                {t('settings.models.topic_naming.prompt')}
+              </div>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="ghost" size="icon-sm" className="size-6 shrink-0 text-foreground-muted">
+                    <CircleHelp size={14} />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align="start" className="w-80">
+                  <div className="mb-2 font-medium text-sm">
+                    {t('assistants.presets.add.prompt.variables.tip.title')}
+                  </div>
+                  <pre className="whitespace-pre-wrap text-muted-foreground text-xs leading-5">
+                    {t('assistants.presets.add.prompt.variables.tip.content')}
+                  </pre>
+                </PopoverContent>
+              </Popover>
+            </RowFlex>
+
             {topicNamingPrompt && (
-              <Button onClick={handleReset} variant="ghost" size="icon">
+              <Button onClick={handleReset} variant="ghost" size="icon-sm" className="size-7 shrink-0">
                 <ResetIcon size={14} />
               </Button>
             )}
           </Flex>
-          <Input.TextArea
-            autoSize={{ minRows: 3, maxRows: 10 }}
+          <Textarea.Input
+            rows={3}
+            className="max-h-60 min-h-28 w-full resize-y text-sm leading-5"
             value={topicNamingPrompt || t('prompts.title')}
-            onChange={(e) => setTopicNamingPrompt(e.target.value)}
+            onChange={(e) => void setTopicNamingPrompt(e.target.value)}
             placeholder={t('prompts.title')}
-            style={{ width: '100%' }}
           />
         </div>
       </ColFlex>
-    </Modal>
+    </section>
+  )
+}
+
+const PopupContainer: React.FC<Props> = ({ resolve }) => {
+  const [open, setOpen] = useState(true)
+  const { t } = useTranslation()
+
+  const closePopup = () => {
+    setOpen(false)
+    resolve({})
+  }
+
+  TopicNamingModalPopup.hide = closePopup
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && closePopup()}>
+      <DialogContent className="p-6" onPointerDownOutside={(event) => event.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{t('settings.models.quick_model.setting_title')}</DialogTitle>
+        </DialogHeader>
+        <TopicNamingSettings />
+        <DialogFooter>
+          <Button variant="outline" onClick={closePopup}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={closePopup}>{t('common.confirm')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
index f51830abc5..e906d88753 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AddProviderPopup.tsx
@@ -1,4 +1,4 @@
-import { Center, ColFlex } from '@cherrystudio/ui'
+import { Center, ColFlex, Divider, Popover, PopoverContent, PopoverTrigger } from '@cherrystudio/ui'
 import { resolveProviderIcon } from '@cherrystudio/ui/icons'
 import { loggerService } from '@logger'
 import { ProviderAvatarPrimitive } from '@renderer/components/ProviderAvatar'
@@ -7,11 +7,9 @@ import { TopView } from '@renderer/components/TopView'
 import ImageStorage from '@renderer/services/ImageStorage'
 import type { Provider, ProviderType } from '@renderer/types'
 import { compressImage, generateColorFromChar, getForegroundColor } from '@renderer/utils'
-import { Divider, Dropdown, Form, Input, Modal, Popover, Select, Upload } from 'antd'
-import type { ItemType } from 'antd/es/menu/interface'
-import React, { useEffect, useRef, useState } from 'react'
+import { Form, Input, Modal, Select, Upload } from 'antd'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const logger = loggerService.withContext('AddProviderPopup')
 
@@ -29,7 +27,6 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
   const [logoPickerOpen, setLogoPickerOpen] = useState(false)
   const [dropdownOpen, setDropdownOpen] = useState(false)
   const { t } = useTranslation()
-  const uploadRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     if (provider?.id) {
@@ -87,6 +84,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
       }
 
       setLogoPickerOpen(false)
+      setDropdownOpen(false)
     } catch (error: any) {
       window.toast.error(error.message)
     }
@@ -110,72 +108,6 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
     return name.charAt(0) || 'P'
   }
 
-  const items = [
-    {
-      key: 'upload',
-      label: (
-        <Upload
-          customRequest={() => {}}
-          accept="image/png, image/jpeg, image/gif"
-          itemRender={() => null}
-          maxCount={1}
-          onChange={async ({ file }) => {
-            try {
-              const _file = file.originFileObj as File
-              let logoData: string | Blob
-
-              if (_file.type === 'image/gif') {
-                logoData = _file
-              } else {
-                logoData = await compressImage(_file)
-              }
-
-              if (provider?.id) {
-                if (logoData instanceof Blob && !(logoData instanceof File)) {
-                  const fileFromBlob = new File([logoData], 'logo.png', { type: logoData.type })
-                  await ImageStorage.set(`provider-${provider.id}`, fileFromBlob)
-                } else {
-                  await ImageStorage.set(`provider-${provider.id}`, logoData)
-                }
-                const savedLogo = await ImageStorage.get(`provider-${provider.id}`)
-                setLogo(savedLogo)
-              } else {
-                // 临时保存在内存中，等创建 provider 后会在调用方保存
-                const tempUrl = await new Promise<string>((resolve) => {
-                  const reader = new FileReader()
-                  reader.onload = () => resolve(reader.result as string)
-                  reader.readAsDataURL(logoData)
-                })
-                setLogo(tempUrl)
-              }
-              setDropdownOpen(false)
-            } catch (error: any) {
-              window.toast.error(error.message)
-            }
-          }}>
-          <MenuItem ref={uploadRef}>{t('settings.general.image_upload')}</MenuItem>
-        </Upload>
-      ),
-      onClick: (e: any) => {
-        e.stopPropagation()
-        uploadRef.current?.click()
-      }
-    },
-    {
-      key: 'builtin',
-      label: <MenuItem>{t('settings.general.avatar.builtin')}</MenuItem>,
-      onClick: () => {
-        setDropdownOpen(false)
-        setLogoPickerOpen(true)
-      }
-    },
-    {
-      key: 'reset',
-      label: <MenuItem>{t('settings.general.avatar.reset')}</MenuItem>,
-      onClick: handleReset
-    }
-  ] satisfies ItemType[]
-
   // for logo
   const backgroundColor = generateColorFromChar(name)
   const color = name ? getForegroundColor(backgroundColor) : 'white'
@@ -196,40 +128,92 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
 
       <Center className="mt-2.5">
         <ColFlex className="items-center gap-2.5">
-          <Dropdown
-            menu={{ items }}
-            trigger={['click']}
+          <Popover
             open={dropdownOpen}
-            align={{ offset: [0, 4] }}
-            placement="bottom"
             onOpenChange={(visible) => {
               setDropdownOpen(visible)
-              if (visible) {
+              if (!visible) {
                 setLogoPickerOpen(false)
               }
             }}>
-            <Popover
-              content={<ProviderLogoPicker onProviderClick={handleProviderLogoClick} />}
-              trigger="click"
-              open={logoPickerOpen}
-              onOpenChange={(visible) => {
-                setLogoPickerOpen(visible)
-                if (visible) {
-                  setDropdownOpen(false)
-                }
-              }}
-              placement="bottom">
+            <PopoverTrigger asChild>
               {logo ? (
-                <ProviderLogo>
+                <div className="flex h-[60px] w-[60px] cursor-pointer items-center justify-center overflow-hidden rounded-full transition-opacity hover:opacity-80">
                   <ProviderAvatarPrimitive providerId={logo} providerName={name} logoSrc={logo} size={60} />
-                </ProviderLogo>
+                </div>
               ) : (
-                <ProviderInitialsLogo style={name ? { backgroundColor, color } : undefined}>
+                <div
+                  className="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-full border-[0.5px] border-border bg-background-subtle font-medium text-[30px] transition-opacity hover:opacity-80"
+                  style={name ? { backgroundColor, color } : undefined}>
                   {getInitials()}
-                </ProviderInitialsLogo>
+                </div>
               )}
-            </Popover>
-          </Dropdown>
+            </PopoverTrigger>
+            <PopoverContent align="center" className={logoPickerOpen ? 'w-auto p-0' : 'w-36 p-1'}>
+              {logoPickerOpen ? (
+                <ProviderLogoPicker onProviderClick={handleProviderLogoClick} />
+              ) : (
+                <div className="flex flex-col">
+                  <Upload
+                    customRequest={() => {}}
+                    accept="image/png, image/jpeg, image/gif"
+                    itemRender={() => null}
+                    maxCount={1}
+                    showUploadList={false}
+                    onChange={async ({ file }) => {
+                      try {
+                        const _file = file.originFileObj as File
+                        let logoData: string | Blob
+
+                        if (_file.type === 'image/gif') {
+                          logoData = _file
+                        } else {
+                          logoData = await compressImage(_file)
+                        }
+
+                        if (provider?.id) {
+                          if (logoData instanceof Blob && !(logoData instanceof File)) {
+                            const fileFromBlob = new File([logoData], 'logo.png', { type: logoData.type })
+                            await ImageStorage.set(`provider-${provider.id}`, fileFromBlob)
+                          } else {
+                            await ImageStorage.set(`provider-${provider.id}`, logoData)
+                          }
+                          const savedLogo = await ImageStorage.get(`provider-${provider.id}`)
+                          setLogo(savedLogo)
+                        } else {
+                          // Keep it in memory; caller persists it after the provider is created.
+                          const tempUrl = await new Promise<string>((resolve) => {
+                            const reader = new FileReader()
+                            reader.onload = () => resolve(reader.result as string)
+                            reader.readAsDataURL(logoData)
+                          })
+                          setLogo(tempUrl)
+                        }
+                        setDropdownOpen(false)
+                      } catch (error: any) {
+                        window.toast.error(error.message)
+                      }
+                    }}>
+                    <button type="button" className="w-full rounded-sm px-2 py-1.5 text-center text-sm hover:bg-accent">
+                      {t('settings.general.image_upload')}
+                    </button>
+                  </Upload>
+                  <button
+                    type="button"
+                    className="w-full rounded-sm px-2 py-1.5 text-center text-sm hover:bg-accent"
+                    onClick={() => setLogoPickerOpen(true)}>
+                    {t('settings.general.avatar.builtin')}
+                  </button>
+                  <button
+                    type="button"
+                    className="w-full rounded-sm px-2 py-1.5 text-center text-sm hover:bg-accent"
+                    onClick={handleReset}>
+                    {t('settings.general.avatar.reset')}
+                  </button>
+                </div>
+              )}
+            </PopoverContent>
+          </Popover>
         </ColFlex>
       </Center>
 
@@ -272,45 +256,6 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
   )
 }
 
-const ProviderLogo = styled.div`
-  cursor: pointer;
-  width: 60px;
-  height: 60px;
-  border-radius: 100%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  transition: opacity 0.3s ease;
-  &:hover {
-    opacity: 0.8;
-  }
-`
-
-const ProviderInitialsLogo = styled.div`
-  cursor: pointer;
-  width: 60px;
-  height: 60px;
-  border-radius: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 30px;
-  font-weight: 500;
-  transition: opacity 0.3s ease;
-  background-color: var(--color-background-soft);
-  border: 0.5px solid var(--color-border);
-  &:hover {
-    opacity: 0.8;
-  }
-`
-
-const MenuItem = styled.div`
-  width: 100%;
-  text-align: center;
-`
-
 export default class AddProviderPopup {
   static topviewId = 0
   static hide() {
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
index 256943aef6..b24cd941b4 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
@@ -1,10 +1,9 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import { Alert, Button, Input } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
-import { Alert, Input, Modal } from 'antd'
+import { Modal } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const logger = loggerService.withContext('AnthropicSettings')
 
@@ -95,7 +94,7 @@ const AnthropicSettings = () => {
     switch (authStatus) {
       case AuthStatus.AUTHENTICATED:
         return (
-          <StartContainer>
+          <div className="mb-2.5">
             <Alert
               type="success"
               message={t('settings.provider.anthropic.authenticated')}
@@ -103,11 +102,11 @@ const AnthropicSettings = () => {
               showIcon
               icon={<ExclamationCircleOutlined />}
             />
-          </StartContainer>
+          </div>
         )
       case AuthStatus.AUTHENTICATING:
         return (
-          <StartContainer>
+          <div className="mb-2.5">
             <Alert
               type="info"
               message={t('settings.provider.anthropic.authenticating')}
@@ -129,11 +128,11 @@ const AnthropicSettings = () => {
                 placeholder={t('settings.provider.anthropic.code_placeholder')}
               />
             </Modal>
-          </StartContainer>
+          </div>
         )
       default:
         return (
-          <StartContainer>
+          <div className="mb-2.5">
             <Alert
               type="info"
               message={t('settings.provider.anthropic.description')}
@@ -146,30 +145,22 @@ const AnthropicSettings = () => {
               showIcon
               icon={<ExclamationCircleOutlined />}
             />
-          </StartContainer>
+          </div>
         )
     }
   }
 
   return (
-    <Container>
+    <div className="pt-2.5">
       <Alert
         type="warning"
         message={t('settings.provider.anthropic.oauth_disabled_warning')}
         showIcon
-        style={{ marginBottom: 10 }}
+        className="mb-2.5"
       />
       {renderAuthContent()}
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div`
-  padding-top: 10px;
-`
-
-const StartContainer = styled.div`
-  margin-bottom: 10px;
-`
-
 export default AnthropicSettings
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
index 9fb02ec65c..06c2cd6882 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
@@ -1,9 +1,8 @@
-import { ColFlex, RowFlex, Switch } from '@cherrystudio/ui'
+import { ColFlex, Divider, EditableNumber, RowFlex, Switch } from '@cherrystudio/ui'
 import { InfoTooltip } from '@cherrystudio/ui'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { type AnthropicCacheControlSettings, type Provider } from '@renderer/types'
 import { isSupportAnthropicPromptCacheProvider } from '@renderer/utils/provider'
-import { Divider, InputNumber } from 'antd'
 import { startTransition, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -158,12 +157,12 @@ const ApiOptionsSettings = ({ providerId }: Props) => {
               <span>{t('settings.provider.api.options.anthropic_cache.token_threshold')}</span>
               <InfoTooltip title={t('settings.provider.api.options.anthropic_cache.token_threshold_help')} />
             </RowFlex>
-            <InputNumber
+            <EditableNumber
               min={0}
               max={100000}
               value={cacheSettings.tokenThreshold}
               onChange={(v) => updateCacheSettings({ tokenThreshold: v ?? 0 })}
-              style={{ width: 100 }}
+              className="w-[100px]"
             />
           </RowFlex>
           {cacheSettings.tokenThreshold > 0 && (
@@ -183,12 +182,12 @@ const ApiOptionsSettings = ({ providerId }: Props) => {
                   <span>{t('settings.provider.api.options.anthropic_cache.cache_last_n')}</span>
                   <InfoTooltip title={t('settings.provider.api.options.anthropic_cache.cache_last_n_help')} />
                 </RowFlex>
-                <InputNumber
+                <EditableNumber
                   min={0}
                   max={10}
                   value={cacheSettings.cacheLastNMessages}
                   onChange={(v) => updateCacheSettings({ cacheLastNMessages: v ?? 0 })}
-                  style={{ width: 100 }}
+                  className="w-[100px]"
                 />
               </RowFlex>
             </>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AwsBedrockSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/AwsBedrockSettings.tsx
index 218979e6dc..42e57864b9 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AwsBedrockSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AwsBedrockSettings.tsx
@@ -1,7 +1,6 @@
-import { RowFlex } from '@cherrystudio/ui'
+import { Alert, Input, RadioGroup, RadioGroupItem, RowFlex } from '@cherrystudio/ui'
 import { PROVIDER_URLS } from '@renderer/config/providers'
 import { useAwsBedrockSettings } from '@renderer/hooks/useAwsBedrock'
-import { Alert, Input, Radio } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -34,14 +33,20 @@ const AwsBedrockSettings: FC = () => {
   return (
     <>
       <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.aws-bedrock.title')}</SettingSubtitle>
-      <Alert type="info" style={{ marginTop: 5 }} message={t('settings.provider.aws-bedrock.description')} showIcon />
+      <Alert type="info" className="mt-1.25" message={t('settings.provider.aws-bedrock.description')} showIcon />
 
       {/* Authentication Type Selector */}
       <SettingSubtitle style={{ marginTop: 15 }}>{t('settings.provider.aws-bedrock.auth_type')}</SettingSubtitle>
-      <Radio.Group value={authType} onChange={(e) => setAuthType(e.target.value)} style={{ marginTop: 5 }}>
-        <Radio value="iam">{t('settings.provider.aws-bedrock.auth_type_iam')}</Radio>
-        <Radio value="apiKey">{t('settings.provider.aws-bedrock.auth_type_api_key')}</Radio>
-      </Radio.Group>
+      <RadioGroup value={authType} onValueChange={setAuthType} className="mt-1.25 flex gap-4">
+        <label className="flex cursor-pointer items-center gap-2 text-sm">
+          <RadioGroupItem size="sm" value="iam" />
+          <span>{t('settings.provider.aws-bedrock.auth_type_iam')}</span>
+        </label>
+        <label className="flex cursor-pointer items-center gap-2 text-sm">
+          <RadioGroupItem size="sm" value="apiKey" />
+          <span>{t('settings.provider.aws-bedrock.auth_type_api_key')}</span>
+        </label>
+      </RadioGroup>
       <SettingHelpTextRow>
         <SettingHelpText>{t('settings.provider.aws-bedrock.auth_type_help')}</SettingHelpText>
       </SettingHelpTextRow>
@@ -66,7 +71,8 @@ const AwsBedrockSettings: FC = () => {
           <SettingSubtitle style={{ marginTop: 15 }}>
             {t('settings.provider.aws-bedrock.secret_access_key')}
           </SettingSubtitle>
-          <Input.Password
+          <Input
+            type="password"
             value={localSecretAccessKey}
             placeholder={t('settings.provider.aws-bedrock.secret_access_key')}
             onChange={(e) => setLocalSecretAccessKey(e.target.value)}
@@ -90,7 +96,8 @@ const AwsBedrockSettings: FC = () => {
       {authType === 'apiKey' && (
         <>
           <SettingSubtitle style={{ marginTop: 15 }}>{t('settings.provider.aws-bedrock.api_key')}</SettingSubtitle>
-          <Input.Password
+          <Input
+            type="password"
             value={localApiKey}
             placeholder={t('settings.provider.aws-bedrock.api_key')}
             onChange={(e) => setLocalApiKey(e.target.value)}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/CherryINOAuth.tsx b/src/renderer/src/pages/settings/ProviderSettings/CherryINOAuth.tsx
index ceab42aa10..771d527ef1 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/CherryINOAuth.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/CherryINOAuth.tsx
@@ -1,14 +1,15 @@
+import { Button, Skeleton } from '@cherrystudio/ui'
 import { Cherryin } from '@cherrystudio/ui/icons'
 import { loggerService } from '@logger'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { oauthWithCherryIn } from '@renderer/utils/oauth'
-import { Button, Skeleton } from 'antd'
+import { cn } from '@renderer/utils/style'
 import { isEmpty } from 'lodash'
 import { CreditCard, LogIn, LogOut, RefreshCw } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const logger = loggerService.withContext('CherryINOAuth')
 
@@ -138,7 +139,8 @@ const CherryINOAuth: FC<CherryINOAuthProps> = ({ providerId }) => {
     if (!hasApiKey) {
       // Case 1: No API key - show login button
       return (
-        <Button type="primary" shape="round" icon={<LogIn size={16} />} onClick={handleOAuthLogin}>
+        <Button className="rounded-full" onClick={handleOAuthLogin}>
+          <LogIn size={16} />
           {t('auth.login')}
         </Button>
       )
@@ -146,14 +148,15 @@ const CherryINOAuth: FC<CherryINOAuthProps> = ({ providerId }) => {
 
     if (hasOAuthToken === null) {
       // Still checking OAuth token status
-      return <Skeleton.Input active size="small" style={{ width: 120, height: 32 }} />
+      return <Skeleton className="h-8 w-[120px]" />
     }
 
     if (!hasOAuthToken) {
       // Case 3: Has API key but no OAuth token (legacy manual key)
       // Show button to connect OAuth for better experience
       return (
-        <Button type="primary" shape="round" icon={<LogIn size={16} />} onClick={handleOAuthLogin}>
+        <Button className="rounded-full" onClick={handleOAuthLogin}>
+          <LogIn size={16} />
           {t('auth.login')}
         </Button>
       )
@@ -165,15 +168,16 @@ const CherryINOAuth: FC<CherryINOAuthProps> = ({ providerId }) => {
         <BalanceCapsule onClick={fetchData} disabled={isLoadingData}>
           <BalanceLabel>{t('settings.provider.oauth.balance')}</BalanceLabel>
           {isLoadingData && !balanceInfo ? (
-            <Skeleton.Input active size="small" style={{ width: 50, height: 16, minWidth: 50 }} />
+            <Skeleton className="h-4 min-w-[50px]" />
           ) : (
             <BalanceValue>
               ${balanceInfo?.balance.toFixed(2) ?? '--'}
-              <RefreshCw size={12} className={isLoadingData ? 'spinning' : ''} />
+              <RefreshCw size={12} className={isLoadingData ? 'animate-spin' : ''} />
             </BalanceValue>
           )}
         </BalanceCapsule>
-        <TopupButton type="primary" shape="round" icon={<CreditCard size={16} />} onClick={handleTopup}>
+        <TopupButton className="rounded-full" onClick={handleTopup}>
+          <CreditCard size={16} />
           {t('settings.provider.oauth.topup')}
         </TopupButton>
       </ButtonRow>
@@ -202,124 +206,56 @@ const CherryINOAuth: FC<CherryINOAuthProps> = ({ providerId }) => {
   )
 }
 
-const Container = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
-  padding: 20px;
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('relative flex flex-col items-center justify-center gap-3.75 p-5', className)} {...props} />
+)
 
-const LogoutCorner = styled.button`
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--color-text-3);
-  cursor: pointer;
-  transition: all 0.2s;
+const LogoutCorner = ({ className, ...props }: React.ComponentPropsWithoutRef<'button'>) => (
+  <button
+    className={cn(
+      'absolute top-2 right-2 flex h-7 w-7 cursor-pointer items-center justify-center rounded-full border-none bg-transparent text-foreground-muted transition-all hover:bg-background-subtle hover:text-destructive disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:hover {
-    background: var(--color-background-soft);
-    color: var(--color-error);
-  }
+const ProviderLogoWrapper = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('cursor-pointer transition-opacity hover:opacity-80', className)} {...props} />
+)
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`
+const ButtonRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center gap-3', className)} {...props} />
+)
 
-const ProviderLogoWrapper = styled.div`
-  cursor: pointer;
-  transition: opacity 0.2s;
+const BalanceCapsule = ({ className, ...props }: React.ComponentPropsWithoutRef<'button'>) => (
+  <button
+    className={cn(
+      'flex h-8 min-w-[110px] cursor-pointer items-center justify-center gap-2 rounded-2xl border border-border bg-background-subtle px-3.75 transition-all hover:border-primary disabled:cursor-not-allowed disabled:opacity-70',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:hover {
-    opacity: 0.8;
-  }
-`
+const TopupButton = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof Button>) => (
+  <Button className={cn('min-w-[110px]', className)} {...props} />
+)
 
-const ButtonRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`
+const BalanceLabel = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('text-[13px] text-foreground-muted', className)} {...props} />
+)
 
-const BalanceCapsule = styled.button`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 0 15px;
-  min-width: 110px;
-  height: 32px;
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  background: var(--color-background-soft);
-  cursor: pointer;
-  transition: all 0.2s;
+const BalanceValue = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('flex items-center gap-1 font-semibold text-[13px] text-foreground', className)} {...props} />
+)
 
-  &:hover {
-    border-color: var(--color-primary);
-  }
+const Description = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center gap-1.25 text-[11px] text-foreground-secondary', className)} {...props} />
+)
 
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-
-  .spinning {
-    animation: spin 1s linear infinite;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`
-
-const TopupButton = styled(Button)`
-  min-width: 110px;
-`
-
-const BalanceLabel = styled.span`
-  font-size: 13px;
-  color: var(--color-text-3);
-`
-
-const BalanceValue = styled.span`
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-text-1);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`
-
-const Description = styled.div`
-  font-size: 11px;
-  color: var(--color-text-2);
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`
-
-const OfficialWebsite = styled.a`
-  text-decoration: none;
-  color: var(--color-text-2);
-`
+const OfficialWebsite = ({ className, ...props }: React.ComponentPropsWithoutRef<'a'>) => (
+  <a className={cn('text-foreground-secondary no-underline', className)} {...props} />
+)
 
 export default CherryINOAuth
diff --git a/src/renderer/src/pages/settings/ProviderSettings/CherryINSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/CherryINSettings.tsx
index fe438c4120..79c300a5f7 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/CherryINSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/CherryINSettings.tsx
@@ -1,5 +1,5 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cherrystudio/ui'
 import { useProvider } from '@renderer/hooks/useProvider'
-import { Select } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useMemo } from 'react'
 
@@ -43,29 +43,24 @@ const CherryINSettings: FC<CherryINSettingsProps> = ({ providerId, apiHost, setA
     [setApiHost, updateProvider]
   )
 
-  const options = useMemo(
-    () =>
-      API_HOST_OPTIONS.map((option) => ({
-        value: option.value,
-        label: (
-          <div className="flex flex-col gap-0.5">
-            <span>{option.labelKey}</span>
-            <span className="text-[var(--color-text-3)] text-xs">{option.description}</span>
-          </div>
-        )
-      })),
-    []
-  )
+  const currentHostLabel = API_HOST_OPTIONS.find((option) => option.value === getCurrentHost)?.value ?? getCurrentHost
 
   return (
-    <Select
-      value={getCurrentHost}
-      onChange={handleHostChange}
-      options={options}
-      style={{ width: '100%', marginTop: 5 }}
-      optionLabelProp="label"
-      labelRender={(option) => option.value}
-    />
+    <Select value={getCurrentHost} onValueChange={handleHostChange}>
+      <SelectTrigger className="mt-1.25 h-9 min-h-9 w-full">
+        <SelectValue>{currentHostLabel}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {API_HOST_OPTIONS.map((option) => (
+          <SelectItem key={option.value} value={option.value} className="py-2">
+            <div className="flex flex-col gap-0.5">
+              <span>{option.labelKey}</span>
+              <span className="text-muted-foreground text-xs">{option.description}</span>
+            </div>
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/ProviderSettings/CustomHeaderPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/CustomHeaderPopup.tsx
index 8fe01ea776..2e726bc81f 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/CustomHeaderPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/CustomHeaderPopup.tsx
@@ -5,7 +5,7 @@ import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
 import { useCopilot } from '@renderer/hooks/useCopilot'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { Provider } from '@renderer/types'
-import { Modal, Space } from 'antd'
+import { Modal } from 'antd'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -75,7 +75,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
       maskClosable={false}
       transitionName="animation-move-down"
       centered>
-      <Space.Compact direction="vertical" style={{ width: '100%', marginTop: 5 }}>
+      <div className="mt-1.25 flex w-full flex-col">
         <SettingHelpText>{t('settings.provider.copilot.headers_description')}</SettingHelpText>
         <CodeEditor
           theme={activeCmTheme}
@@ -95,7 +95,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve }) => {
             keymap: true
           }}
         />
-      </Space.Compact>
+      </div>
     </Modal>
   )
 }
diff --git a/src/renderer/src/pages/settings/ProviderSettings/DMXAPISettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/DMXAPISettings.tsx
index e3064b9378..06ad0df85e 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/DMXAPISettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/DMXAPISettings.tsx
@@ -1,11 +1,10 @@
 import { Dmxapi } from '@cherrystudio/ui/icons'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { RadioChangeEvent } from 'antd'
-import { Radio, Space } from 'antd'
+import { Radio } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingSubtitle } from '..'
 
@@ -68,11 +67,11 @@ const DMXAPISettings: FC<DMXAPISettingsProps> = ({ providerId }) => {
   )
 
   return (
-    <Container>
-      <Space direction="vertical" style={{ width: '100%' }}>
-        <LogoContainer>
+    <div className="mt-4 mb-7.5">
+      <div className="flex w-full flex-col">
+        <div className="mb-7.5 flex flex-col items-center justify-center">
           <Dmxapi.Color height={70} width="auto" />
-        </LogoContainer>
+        </div>
 
         <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.dmxapi.select_platform')}</SettingSubtitle>
         <Radio.Group
@@ -94,23 +93,9 @@ const DMXAPISettings: FC<DMXAPISettingsProps> = ({ providerId }) => {
               </span>
             )
           }))}></Radio.Group>
-      </Space>
-    </Container>
+      </div>
+    </div>
   )
 }
 
-// 样式组件
-const Container = styled.div`
-  margin-top: 16px;
-  margin-bottom: 30px;
-`
-
-const LogoContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 30px;
-`
-
 export default DMXAPISettings
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
index 5880207b4d..edef935739 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
@@ -1,4 +1,4 @@
-import { Button, Flex, Switch, Tooltip, WarnTooltip } from '@cherrystudio/ui'
+import { Button, Divider, EditableNumber, Flex, Switch, Tooltip, WarnTooltip } from '@cherrystudio/ui'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import {
   EmbeddingTag,
@@ -22,13 +22,12 @@ import type { Model, ModelCapability, ModelType, Provider } from '@renderer/type
 import { getDefaultGroupName, getDifference, getUnion, uniqueObjectArray } from '@renderer/utils'
 import { isNewApiProvider } from '@renderer/utils/provider'
 import type { ModalProps } from 'antd'
-import { Divider, Form, Input, InputNumber, Modal, Select } from 'antd'
+import { Form, Input, Modal, Select } from 'antd'
 import { cloneDeep } from 'lodash'
 import { ChevronDown, ChevronUp, RotateCcw, SaveIcon } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface ModelEditContentProps {
   provider: Provider
@@ -181,7 +180,7 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
 
     return (
       <>
-        <TypeTitle>
+        <div className="my-3 flex items-center justify-between font-semibold text-sm">
           <Flex className="h-6 items-center gap-1">
             {t('models.type.select')}
             <WarnTooltip content={t('settings.moresetting.check.warn')} />
@@ -194,7 +193,7 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
               </Button>
             </Tooltip>
           )}
-        </TypeTitle>
+        </div>
         <Flex className="mb-2 flex-wrap items-center justify-start gap-1">
           <VisionTag
             showLabel
@@ -263,7 +262,7 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
           label={t('settings.models.add.model_id.label')}
           tooltip={t('settings.models.add.model_id.tooltip')}
           rules={[{ required: true }]}>
-          <Flex className="justify-between gap-[5px]">
+          <Flex className="justify-between gap-1.25">
             <Input
               placeholder={t('settings.models.add.model_id.placeholder')}
               spellCheck={false}
@@ -321,7 +320,7 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
             <Button
               variant="default"
               onClick={() => setShowMoreSettings(!showMoreSettings)}
-              style={{ color: 'var(--color-text-3)' }}>
+              style={{ color: 'var(--color-foreground-muted)' }}>
               {t('settings.moresetting.label')}
               {showMoreSettings ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
             </Button>
@@ -406,14 +405,13 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
             )}
 
             <Form.Item label={t('models.price.input')} style={{ marginBottom: 10 }} name="input_per_million_tokens">
-              <InputNumber
+              <EditableNumber
                 placeholder="0.00"
-                defaultValue={model.pricing?.input_per_million_tokens}
                 min={0}
                 step={0.01}
                 precision={2}
-                style={{ width: '240px' }}
-                addonAfter={`${currencySymbol} / ${t('models.price.million_tokens')}`}
+                className="w-[240px]"
+                suffix={`${currencySymbol} / ${t('models.price.million_tokens')}`}
                 onChange={() => {
                   // 自动保存
                   autoSave()
@@ -421,14 +419,13 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
               />
             </Form.Item>
             <Form.Item label={t('models.price.output')} style={{ marginBottom: 10 }} name="output_per_million_tokens">
-              <InputNumber
+              <EditableNumber
                 placeholder="0.00"
-                defaultValue={model.pricing?.output_per_million_tokens}
                 min={0}
                 step={0.01}
                 precision={2}
-                style={{ width: '240px' }}
-                addonAfter={`${currencySymbol} / ${t('models.price.million_tokens')}`}
+                className="w-[240px]"
+                suffix={`${currencySymbol} / ${t('models.price.million_tokens')}`}
                 onChange={() => {
                   // 自动保存
                   autoSave()
@@ -442,13 +439,4 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
   )
 }
 
-const TypeTitle = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin: 12px 0;
-  font-size: 14px;
-  font-weight: 600;
-`
-
 export default ModelEditContent
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
index 66b24c1772..2382dcf040 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
@@ -1,8 +1,7 @@
-import { Flex } from '@cherrystudio/ui'
+import { Checkbox, Flex } from '@cherrystudio/ui'
 import { Button } from '@cherrystudio/ui'
 import type { ModelCapability, ModelType } from '@renderer/types'
 import { getDifference, uniqueObjectArray } from '@renderer/utils'
-import { Checkbox } from 'antd'
 import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -38,7 +37,6 @@ const ModelTypeSelector: FC<ModelTypeSelectorProps> = ({
       okText: t('settings.moresetting.check.confirm'),
       cancelText: t('common.cancel'),
       okButtonProps: { danger: true },
-      cancelButtonProps: { type: 'primary' },
       onOk: () => {
         if (onUpdateType) {
           const updatedModelCapabilities = modelCapabilities?.map((t) => {
@@ -133,45 +131,67 @@ const ModelTypeSelector: FC<ModelTypeSelectorProps> = ({
     onUserModified(false)
   }
 
+  const handleCheckedChange = (type: ModelType, checked: boolean) => {
+    if (checked) {
+      handleTypeChange(selectedTypes.includes(type) ? selectedTypes : [...selectedTypes, type])
+      return
+    }
+    handleTypeChange(selectedTypes.filter((selectedType) => selectedType !== type))
+  }
+
+  const typeOptions: Array<{ label: string; value: ModelType; disabled: boolean }> = [
+    {
+      label: t('models.type.vision'),
+      value: 'vision',
+      disabled: isDisabled
+    },
+    {
+      label: t('models.type.websearch'),
+      value: 'web_search',
+      disabled: isDisabled
+    },
+    {
+      label: t('models.type.rerank'),
+      value: 'rerank',
+      disabled: isRerankDisabled
+    },
+    {
+      label: t('models.type.embedding'),
+      value: 'embedding',
+      disabled: isEmbeddingDisabled
+    },
+    {
+      label: t('models.type.reasoning'),
+      value: 'reasoning',
+      disabled: isDisabled
+    },
+    {
+      label: t('models.type.function_calling'),
+      value: 'function_calling',
+      disabled: isDisabled
+    }
+  ]
+
   return (
     <div>
       <Flex className="mb-2 items-center justify-between">
-        <Checkbox.Group
-          value={selectedTypes}
-          onChange={handleTypeChange}
-          options={[
-            {
-              label: t('models.type.vision'),
-              value: 'vision',
-              disabled: isDisabled
-            },
-            {
-              label: t('models.type.websearch'),
-              value: 'web_search',
-              disabled: isDisabled
-            },
-            {
-              label: t('models.type.rerank'),
-              value: 'rerank',
-              disabled: isRerankDisabled
-            },
-            {
-              label: t('models.type.embedding'),
-              value: 'embedding',
-              disabled: isEmbeddingDisabled
-            },
-            {
-              label: t('models.type.reasoning'),
-              value: 'reasoning',
-              disabled: isDisabled
-            },
-            {
-              label: t('models.type.function_calling'),
-              value: 'function_calling',
-              disabled: isDisabled
-            }
-          ]}
-        />
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
+          {typeOptions.map((option) => (
+            <label
+              key={option.value}
+              className={`flex items-center gap-2 text-sm ${
+                option.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              }`}>
+              <Checkbox
+                size="sm"
+                checked={selectedTypes.includes(option.value)}
+                disabled={option.disabled}
+                onCheckedChange={(checked) => handleCheckedChange(option.value, checked === true)}
+              />
+              <span>{option.label}</span>
+            </label>
+          ))}
+        </div>
         {hasUserModified && (
           <Button size="sm" onClick={handleResetTypes}>
             {t('common.reset')}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/GPUStackSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/GPUStackSettings.tsx
index 5928537e06..913adcfc7f 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/GPUStackSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/GPUStackSettings.tsx
@@ -1,9 +1,8 @@
+import { EditableNumber } from '@cherrystudio/ui'
 import { useGPUStackSettings } from '@renderer/hooks/useGPUStack'
-import { InputNumber } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingHelpText, SettingHelpTextRow, SettingSubtitle } from '..'
 
@@ -13,12 +12,12 @@ const GPUStackSettings: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Container>
+    <div>
       <SettingSubtitle style={{ marginBottom: 5 }}>{t('gpustack.keep_alive_time.title')}</SettingSubtitle>
-      <InputNumber
-        style={{ width: '100%' }}
+      <EditableNumber
+        className="w-full"
         value={keepAliveMinutes}
-        onChange={(e) => setKeepAliveMinutes(Number(e))}
+        onChange={(value) => setKeepAliveMinutes(Number(value))}
         onBlur={() => setKeepAliveTime(keepAliveMinutes)}
         suffix={t('gpustack.keep_alive_time.placeholder')}
         step={5}
@@ -26,10 +25,8 @@ const GPUStackSettings: FC = () => {
       <SettingHelpTextRow>
         <SettingHelpText>{t('gpustack.keep_alive_time.description')}</SettingHelpText>
       </SettingHelpTextRow>
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div``
-
 export default GPUStackSettings
diff --git a/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
index fa19e0a997..3af53844f1 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
@@ -1,13 +1,14 @@
 import { CheckCircleOutlined, CopyOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
-import { Button, Tooltip } from '@cherrystudio/ui'
+import { Alert, Button, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { useCopilot } from '@renderer/hooks/useCopilot'
 import { useProvider } from '@renderer/hooks/useProvider'
-import { Alert, Input, Slider, Steps, Typography } from 'antd'
+import { cn } from '@renderer/utils/style'
+import { Input, Slider, Steps, Typography } from 'antd'
+import type React from 'react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingRow, SettingSubtitle } from '..'
 
@@ -342,91 +343,68 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
   )
 }
 
-const Container = styled.div`
-  padding-top: 15px;
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('pt-3.75', className)} {...props} />
+)
 
-const StartContainer = styled.div`
-  margin-bottom: 20px;
-`
+const StartContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-5', className)} {...props} />
+)
 
-const AuthSuccessContainer = styled.div`
-  margin-bottom: 20px;
-`
+const AuthSuccessContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-5', className)} {...props} />
+)
 
-const AuthFlowContainer = styled.div`
-  display: flex;
-  gap: 24px;
-  margin-bottom: 20px;
+const AuthFlowContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-5 flex gap-6 max-md:flex-col max-md:gap-4', className)} {...props} />
+)
 
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 16px;
-  }
-`
+const StepsContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'min-w-[200px] flex-1 [&_.ant-steps-item-description]:mt-1 [&_.ant-steps-item-description]:text-foreground-secondary [&_.ant-steps-item-description]:text-xs',
+      className
+    )}
+    {...props}
+  />
+)
 
-const StepsContainer = styled.div`
-  flex: 1;
-  min-width: 200px;
+const AuthActionsContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-[2] flex-col gap-4', className)} {...props} />
+)
 
-  .ant-steps-item-description {
-    margin-top: 4px;
-    font-size: 12px;
-    color: var(--color-text-secondary);
-  }
-`
+const StepCard = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn('rounded-lg border border-border bg-card p-4 transition-all hover:border-border-subtle', className)}
+    {...props}
+  />
+)
 
-const AuthActionsContainer = styled.div`
-  flex: 2;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`
+const StepHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-3 flex items-start gap-3', className)} {...props} />
+)
 
-const StepCard = styled.div`
-  padding: 16px;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  background: var(--color-background-soft);
-  transition: all 0.2s ease;
+const StepNumber = ({
+  completed,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { completed?: boolean }) => (
+  <div
+    className={cn(
+      'flex h-6 w-6 shrink-0 items-center justify-center rounded-full font-bold text-white text-xs transition-all',
+      completed ? 'bg-success' : 'bg-primary',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:hover {
-    border-color: var(--color-border-soft);
-  }
-`
+const StepTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('font-medium text-foreground text-sm', className)} {...props} />
+)
 
-const StepHeader = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 12px;
-`
-
-const StepNumber = styled.div<{ completed?: boolean }>`
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: bold;
-  background: ${(props) => (props.completed ? 'var(--color-status-success)' : 'var(--color-primary)')};
-  color: white;
-  flex-shrink: 0;
-  transition: all 0.2s ease;
-`
-
-const StepTitle = styled.div`
-  font-weight: 500;
-  font-size: 14px;
-  color: var(--color-text);
-`
-
-const StepDesc = styled.div`
-  font-size: 12px;
-  color: var(--color-text-secondary);
-  margin-top: 2px;
-`
+const StepDesc = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-0.5 text-foreground-secondary text-xs', className)} {...props} />
+)
 
 export default GithubCopilotSettings
diff --git a/src/renderer/src/pages/settings/ProviderSettings/LMStudioSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/LMStudioSettings.tsx
index 821afa6158..420631e090 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/LMStudioSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/LMStudioSettings.tsx
@@ -1,9 +1,8 @@
+import { EditableNumber } from '@cherrystudio/ui'
 import { useLMStudioSettings } from '@renderer/hooks/useLMStudio'
-import { InputNumber } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingHelpText, SettingHelpTextRow, SettingSubtitle } from '..'
 
@@ -13,13 +12,13 @@ const LMStudioSettings: FC = () => {
   const { t } = useTranslation()
 
   return (
-    <Container>
+    <div>
       <SettingSubtitle style={{ marginBottom: 5 }}>{t('lmstudio.keep_alive_time.title')}</SettingSubtitle>
-      <InputNumber
-        style={{ width: '100%' }}
+      <EditableNumber
+        className="w-full"
         value={keepAliveMinutes}
         min={0}
-        onChange={(e) => setKeepAliveMinutes(Math.floor(Number(e)))}
+        onChange={(value) => setKeepAliveMinutes(Math.floor(Number(value)))}
         onBlur={() => setKeepAliveTime(keepAliveMinutes)}
         suffix={t('lmstudio.keep_alive_time.placeholder')}
         step={5}
@@ -27,10 +26,8 @@ const LMStudioSettings: FC = () => {
       <SettingHelpTextRow>
         <SettingHelpText>{t('lmstudio.keep_alive_time.description')}</SettingHelpText>
       </SettingHelpTextRow>
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div``
-
 export default LMStudioSettings
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
index c03255c60d..bcaf6da10b 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@cherrystudio/ui'
+import { Flex, Input } from '@cherrystudio/ui'
 import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { isNotSupportTextDeltaModel } from '@renderer/config/models'
@@ -6,7 +6,7 @@ import { useProvider } from '@renderer/hooks/useProvider'
 import type { Model, Provider } from '@renderer/types'
 import { getDefaultGroupName } from '@renderer/utils'
 import type { FormProps } from 'antd'
-import { Form, Input, Modal } from 'antd'
+import { Form, Modal } from 'antd'
 import { find } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -96,7 +96,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
         labelCol={{ flex: '110px' }}
         labelAlign="left"
         colon={false}
-        className="mt-[25px]"
+        className="mt-6.25"
         onFinish={onFinish}>
         <Form.Item
           name="id"
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/DownloadOVMSModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/DownloadOVMSModelPopup.tsx
index 9f94cd1683..96df26246a 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/DownloadOVMSModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/DownloadOVMSModelPopup.tsx
@@ -240,7 +240,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
         labelCol={{ flex: '110px' }}
         labelAlign="left"
         colon={false}
-        className="mt-[25px]"
+        className="mt-6.25"
         onFinish={onFinish}
         disabled={false}>
         <Form.Item
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/HealthCheckPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/HealthCheckPopup.tsx
index 14ce2243fe..734bd43dd7 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/HealthCheckPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/HealthCheckPopup.tsx
@@ -1,10 +1,9 @@
-import { Box, ColFlex } from '@cherrystudio/ui'
+import { Alert, Box, ColFlex, Divider, EditableNumber } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import type { Provider } from '@renderer/types'
 import { maskApiKey } from '@renderer/utils/api'
-import { Divider, InputNumber, Modal, Radio, Segmented, Typography } from 'antd'
-import { Alert } from 'antd'
+import { Modal, Radio, Segmented, Typography } from 'antd'
 import { useCallback, useMemo, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -161,13 +160,14 @@ const PopupContainer: React.FC<Props> = ({ title, apiKeys, resolve }) => {
         </Flex>
         <Flex className="w-full items-center justify-between">
           <Typography.Text strong>{t('settings.models.check.timeout')}:</Typography.Text>
-          <InputNumber
+          <EditableNumber
             value={timeoutSeconds}
             onChange={(value) => dispatch({ type: 'SET_TIMEOUT_SECONDS', payload: value || 15 })}
             min={5}
             max={60}
-            style={{ width: 110 }}
-            addonAfter="s"
+            step={1}
+            className="w-[110px]"
+            suffix="s"
           />
         </Flex>
       </ColFlex>
@@ -204,7 +204,7 @@ const PopupContainer: React.FC<Props> = ({ title, apiKeys, resolve }) => {
         description={t('settings.models.check.disclaimer')}
         type="warning"
         showIcon
-        style={{ fontSize: 12, padding: 10, marginTop: 10 }}
+        className="mt-2.5 px-2.5 py-2.5 text-xs"
       />
 
       {/* API key selection section - only shown for 'single' mode and multiple keys */}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
index 8cd27e5d56..f8a7976f78 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
@@ -11,7 +11,6 @@ import { isNewApiProvider } from '@renderer/utils/provider'
 import { ChevronRight, Minus, Plus } from 'lucide-react'
 import React, { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { isModelInProvider, isValidNewApiModel } from './utils'
 
@@ -149,12 +148,16 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({
         if (row.type === 'group') {
           const isCollapsed = collapsedGroups.has(row.groupName)
           return (
-            <GroupHeaderContainer isCollapsed={isCollapsed}>
-              <GroupHeader isCollapsed={isCollapsed} onClick={() => handleGroupToggle(row.groupName)}>
+            <div className={isCollapsed ? 'pb-2' : undefined}>
+              <div
+                className={`flex min-h-[38px] cursor-pointer items-center justify-between bg-muted px-3.25 text-foreground ${
+                  isCollapsed ? 'rounded-lg' : 'rounded-t-lg'
+                }`}
+                onClick={() => handleGroupToggle(row.groupName)}>
                 <Flex className="flex-1 items-center gap-2.5">
                   <ChevronRight
                     size={16}
-                    color="var(--color-text-3)"
+                    color="var(--color-foreground-muted)"
                     strokeWidth={1.5}
                     className={isCollapsed ? '' : 'rotate-90'}
                   />
@@ -164,8 +167,8 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({
                   </CustomTag>
                 </Flex>
                 {renderGroupTools(row.models)}
-              </GroupHeader>
-            </GroupHeaderContainer>
+              </div>
+            </div>
           )
         }
 
@@ -198,7 +201,8 @@ const ModelListItem: React.FC<ModelListItemProps> = memo(
   ({ model, showIdentifier, provider, onAddModel, onRemoveModel, last }) => {
     const isAdded = useMemo(() => isModelInProvider(provider, model.id), [provider, model.id])
     return (
-      <ModelListItemContainer last={last}>
+      <div
+        className={`border border-border p-1 ${last ? 'mb-2 rounded-b-lg border-b' : 'rounded-none border-b-0'} border-t-0`}>
         <FileItem
           style={{
             backgroundColor: isAdded ? 'rgba(0, 126, 0, 0.06)' : '',
@@ -230,34 +234,9 @@ const ModelListItem: React.FC<ModelListItemProps> = memo(
             )
           }}
         />
-      </ModelListItemContainer>
+      </div>
     )
   }
 )
 
-const GroupHeader = styled.div<{ isCollapsed: boolean }>`
-  display: flex;
-  background-color: var(--color-background-mute);
-  border-radius: ${(props) => (props.isCollapsed ? '8px' : '8px 8px 0 0')};
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 13px;
-  min-height: 38px;
-  color: var(--color-text);
-  cursor: pointer;
-`
-
-const GroupHeaderContainer = styled.div<{ isCollapsed: boolean }>`
-  padding-bottom: ${(props) => (props.isCollapsed ? '8px' : '0')};
-`
-
-const ModelListItemContainer = styled.div<{ last?: boolean }>`
-  border: 1px solid var(--color-border);
-  padding: 4px;
-  border-top: none;
-  border-radius: ${(props) => (props.last ? '0 0 8px 8px' : '0')};
-  border-bottom: ${(props) => (props.last ? '1px solid var(--color-border)' : 'none')};
-  margin-bottom: ${(props) => (props.last ? '8px' : '0')};
-`
-
 export default memo(ManageModelsList)
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
index 7b119a5909..c5b54eaefb 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
@@ -1,6 +1,5 @@
-import { Button, Flex, RowFlex, Tooltip } from '@cherrystudio/ui'
+import { Button, EmptyState, Flex, Input, RowFlex, Spinner, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
-import { LoadingIcon } from '@renderer/components/Icons'
 import { TopView } from '@renderer/components/TopView'
 import {
   groupQwenModels,
@@ -20,14 +19,14 @@ import type { Model, Provider } from '@renderer/types'
 import { filterModelsByKeywords, getFancyProviderName } from '@renderer/utils'
 import { getDuplicateModelNames, isFreeModel } from '@renderer/utils/model'
 import { isNewApiProvider } from '@renderer/utils/provider'
-import { Empty, Modal, Spin, Tabs } from 'antd'
-import Input from 'antd/es/input/Input'
+import { cn } from '@renderer/utils/style'
+import { Modal, Tabs } from 'antd'
 import { groupBy, isEmpty, uniqBy } from 'lodash'
 import { debounce } from 'lodash'
-import { ListMinus, ListPlus, RefreshCcw, Search } from 'lucide-react'
+import { ListMinus, ListPlus, RefreshCcw, Search, X } from 'lucide-react'
+import type React from 'react'
 import { useCallback, useEffect, useMemo, useOptimistic, useRef, useState, useTransition } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import ManageModelsList from './ManageModelsList'
 import { isModelInProvider, isValidNewApiModel } from './utils'
@@ -267,20 +266,32 @@ const PopupContainer: React.FC<Props> = ({ providerId, resolve }) => {
       centered>
       <SearchContainer>
         <TopToolsWrapper>
-          <Input
-            prefix={<Search size={16} style={{ marginRight: 4 }} />}
-            size="large"
-            ref={searchInputRef}
-            placeholder={t('settings.provider.search_placeholder')}
-            allowClear
-            value={searchText}
-            onChange={(e) => {
-              const newSearchValue = e.target.value
-              setSearchText(newSearchValue) // Update input field immediately
-              debouncedSetFilterText(newSearchValue)
-            }}
-            disabled={loadingModels}
-          />
+          <div className="relative flex-1">
+            <Search className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 size-4 text-muted-foreground" />
+            <Input
+              ref={searchInputRef}
+              placeholder={t('settings.provider.search_placeholder')}
+              value={searchText}
+              onChange={(e) => {
+                const newSearchValue = e.target.value
+                setSearchText(newSearchValue)
+                debouncedSetFilterText(newSearchValue)
+              }}
+              disabled={loadingModels}
+              className="h-10 pr-8 pl-9"
+            />
+            {searchText && (
+              <button
+                type="button"
+                className="-translate-y-1/2 absolute top-1/2 right-2 flex size-5 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground"
+                onClick={() => {
+                  setSearchText('')
+                  debouncedSetFilterText('')
+                }}>
+                <X className="size-3.5" />
+              </button>
+            )}
+          </div>
           {renderTopTools()}
         </TopToolsWrapper>
         <Tabs
@@ -305,67 +316,47 @@ const PopupContainer: React.FC<Props> = ({ providerId, resolve }) => {
           }}
         />
       </SearchContainer>
-      <Spin
-        spinning={isLoading}
-        indicator={<LoadingIcon color="var(--color-text-2)" style={{ opacity: loadingModels ? 1 : 0 }} />}>
-        <ListContainer>
-          {loadingModels || isEmpty(list) ? (
-            <Empty
-              image={Empty.PRESENTED_IMAGE_SIMPLE}
-              description={t('settings.models.empty')}
-              style={{
-                visibility: loadingModels ? 'hidden' : 'visible',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                height: '100%',
-                margin: '0'
-              }}
-            />
-          ) : (
-            <ManageModelsList
-              modelGroups={modelGroups}
-              duplicateModelNames={duplicateModelNames}
-              provider={provider}
-              onAddModel={onAddModel}
-              onRemoveModel={onRemoveModel}
-            />
-          )}
-        </ListContainer>
-      </Spin>
+      <ListContainer>
+        {isLoading ? (
+          <Flex className="h-full items-center justify-center">
+            <Spinner text={t('common.loading')} />
+          </Flex>
+        ) : isEmpty(list) ? (
+          <Flex className="h-full items-center justify-center">
+            <EmptyState compact preset="no-result" description={t('settings.models.empty')} />
+          </Flex>
+        ) : (
+          <ManageModelsList
+            modelGroups={modelGroups}
+            duplicateModelNames={duplicateModelNames}
+            provider={provider}
+            onAddModel={onAddModel}
+            onRemoveModel={onRemoveModel}
+          />
+        )}
+      </ListContainer>
     </Modal>
   )
 }
 
-const SearchContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
+const SearchContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn('flex flex-col gap-1.25 [&_.ant-radio-group]:flex [&_.ant-radio-group]:flex-wrap', className)}
+    {...props}
+  />
+)
 
-  .ant-radio-group {
-    display: flex;
-    flex-wrap: wrap;
-  }
-`
+const TopToolsWrapper = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-2.5 mb-0 flex items-center gap-2', className)} {...props} />
+)
 
-const TopToolsWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 10px;
-  margin-bottom: 0;
-`
+const ListContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('h-[calc(90vh-300px)]', className)} {...props} />
+)
 
-const ListContainer = styled.div`
-  height: calc(90vh - 300px);
-`
-
-const ModelHeaderTitle = styled.div`
-  color: var(--color-text);
-  font-size: 18px;
-  font-weight: 600;
-  margin-right: 10px;
-`
+const ModelHeaderTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mr-2.5 font-semibold text-foreground text-lg', className)} {...props} />
+)
 
 const TopViewKey = 'ManageModelsPopup'
 
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
index 32fca1cde9..ef3c8af32e 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
@@ -1,6 +1,6 @@
-import { Button, ButtonGroup, ColFlex, Flex, RowFlex, Tooltip } from '@cherrystudio/ui'
+import { Button, ButtonGroup, ColFlex, Flex, RowFlex, Spinner, Tooltip } from '@cherrystudio/ui'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
-import { LoadingIcon, StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons'
+import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { PROVIDER_URLS } from '@renderer/config/providers'
 import { useProvider } from '@renderer/hooks/useProvider'
@@ -15,7 +15,6 @@ import type { Model } from '@renderer/types'
 import { filterModelsByKeywords } from '@renderer/utils'
 import { getDuplicateModelNames } from '@renderer/utils/model'
 import { isNewApiProvider } from '@renderer/utils/provider'
-import { Spin } from 'antd'
 import { groupBy, isEmpty, sortBy, toPairs } from 'lodash'
 import { Plus, RefreshCw } from 'lucide-react'
 import React, { memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
@@ -156,8 +155,8 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
             {!hasNoModels && (
               <>
                 <Tooltip title={t('settings.models.check.button_caption')}>
-                  <Button size="icon" onClick={runHealthCheck}>
-                    <StreamlineGoodHealthAndWellBeing size={16} isActive={isHealthChecking} color="var(--color-icon)" />
+                  <Button size="icon" variant="ghost" onClick={runHealthCheck}>
+                    <StreamlineGoodHealthAndWellBeing size={16} isActive={isHealthChecking} />
                   </Button>
                 </Tooltip>
                 <CollapsibleSearchBar
@@ -172,8 +171,13 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
         </RowFlex>
       </SettingSubtitle>
       {hasNoModels && <div style={{ marginBottom: 12 }}>{actionButtons}</div>}
-      <Spin spinning={isLoading} indicator={<LoadingIcon color="var(--color-text-2)" />}>
-        {displayedModelGroups && !isEmpty(displayedModelGroups) && (
+      {isLoading ? (
+        <Flex className="justify-center py-5">
+          <Spinner text={t('common.loading')} />
+        </Flex>
+      ) : (
+        displayedModelGroups &&
+        !isEmpty(displayedModelGroups) && (
           <ColFlex className="gap-3">
             {Object.keys(displayedModelGroups).map((group, i) => (
               <ModelListGroup
@@ -189,8 +193,8 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
               />
             ))}
           </ColFlex>
-        )}
-      </Spin>
+        )
+      )}
       <Flex className="items-center justify-between">
         {docsWebsite || modelsWebsite ? (
           <SettingHelpTextRow>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
index d2af1d73a0..57866222d7 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
@@ -6,7 +6,6 @@ import type { ModelWithStatus } from '@renderer/types/healthCheck'
 import { Minus } from 'lucide-react'
 import React, { memo, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import ModelListItem from './ModelListItem'
 
@@ -48,12 +47,12 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
   }, [])
 
   return (
-    <CustomCollapseWrapper>
+    <div className="group/model-list [&_.ant-collapse-content-box]:p-0!">
       <CustomCollapse
         defaultActiveKey={defaultOpen ? ['1'] : []}
         onChange={handleCollapseChange}
         label={
-          <Flex className="items-center gap-[10px]">
+          <Flex className="items-center gap-2.5">
             <span style={{ fontWeight: 'bold' }}>{groupName}</span>
           </Flex>
         }
@@ -61,7 +60,7 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
           <Tooltip content={t('settings.models.manage.remove_whole_group')}>
             <Button
               variant="ghost"
-              className="toolbar-item"
+              className="translate-z-0 opacity-0 transition-opacity will-change-[opacity] group-hover/model-list:opacity-100"
               onClick={(e) => {
                 e.stopPropagation()
                 onRemoveGroup()
@@ -101,26 +100,8 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
           )}
         </DynamicVirtualList>
       </CustomCollapse>
-    </CustomCollapseWrapper>
+    </div>
   )
 }
 
-const CustomCollapseWrapper = styled.div`
-  .toolbar-item {
-    transform: translateZ(0);
-    will-change: opacity;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-  &:hover .toolbar-item {
-    opacity: 1;
-  }
-
-  /* 移除 collapse 的 padding，转而在 scroller 内部调整 */
-  .ant-collapse-content-box {
-    padding: 0 !important;
-  }
-
-`
-
 export default memo(ModelListGroup)
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
index 0992c69542..2feb9f1889 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
@@ -11,7 +11,6 @@ import { maskApiKey } from '@renderer/utils/api'
 import { Bolt, Minus } from 'lucide-react'
 import React, { memo, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface ModelListItemProps {
   ref?: React.RefObject<HTMLDivElement>
@@ -67,7 +66,7 @@ const ModelListItem: React.FC<ModelListItemProps> = ({
 
   return (
     <>
-      <ListItem ref={ref}>
+      <div ref={ref} className="flex flex-row items-center gap-2.5 text-foreground text-sm leading-none">
         <RowFlex className="flex-1 items-center gap-2.5">
           {(() => {
             const Icon = getModelLogo(model)
@@ -110,19 +109,9 @@ const ModelListItem: React.FC<ModelListItemProps> = ({
             </Tooltip>
           </RowFlex>
         </RowFlex>
-      </ListItem>
+      </div>
     </>
   )
 }
 
-const ListItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-  color: var(--color-text);
-  font-size: 14px;
-  line-height: 1;
-`
-
 export default memo(ModelListItem)
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
index e577c4e8ed..91628b7f00 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@cherrystudio/ui'
+import { Flex, Input } from '@cherrystudio/ui'
 import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { endpointTypeOptions } from '@renderer/config/endpointTypes'
@@ -9,7 +9,7 @@ import type { EndpointType, Model, Provider } from '@renderer/types'
 import { getDefaultGroupName } from '@renderer/utils'
 import { isNewApiProvider } from '@renderer/utils/provider'
 import type { FormProps } from 'antd'
-import { Form, Input, Modal, Select } from 'antd'
+import { Form, Modal, Select } from 'antd'
 import { find } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -103,7 +103,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve, model, endp
         labelCol={{ style: { width: useDynamicLabelWidth([t('settings.models.add.endpoint_type.label')]) } }}
         labelAlign="left"
         colon={false}
-        className="mt-[25px]"
+        className="mt-6.25"
         onFinish={onFinish}
         initialValues={
           model
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
index 5cb19c03bf..a6bca3296f 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
@@ -78,7 +78,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve, batchModels
         labelCol={{ style: { width: useDynamicLabelWidth([t('settings.models.add.endpoint_type.label')]) } }}
         labelAlign="left"
         colon={false}
-        className="mt-[25px]"
+        className="mt-6.25"
         onFinish={onFinish}
         initialValues={{
           endpointType: 'openai'
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
index dd0417612f..b49ff41ac6 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelNotesPopup.tsx
@@ -6,7 +6,6 @@ import { Modal } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface ShowParams {
   provider: Provider
@@ -48,23 +47,18 @@ const PopupContainer: FC<Props> = ({ provider: _provider, resolve }) => {
       width={800}
       transitionName="animation-move-down"
       centered>
-      <EditorContainer>
+      <div className="mt-4 h-[400px]">
         <MarkdownEditor
           value={notes}
           onChange={setNotes}
           placeholder={t('settings.provider.notes.placeholder')}
           height="400px"
         />
-      </EditorContainer>
+      </div>
     </Modal>
   )
 }
 
-const EditorContainer = styled.div`
-  margin-top: 16px;
-  height: 400px;
-`
-
 export default class ModelNotesPopup {
   static hide() {
     TopView.hide('ModelNotesPopup')
diff --git a/src/renderer/src/pages/settings/ProviderSettings/OVMSSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/OVMSSettings.tsx
index e72c9ee6f7..d5e80f4622 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/OVMSSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/OVMSSettings.tsx
@@ -1,5 +1,4 @@
-import { Button, ColFlex } from '@cherrystudio/ui'
-import { Alert } from 'antd'
+import { Alert, Button, ColFlex } from '@cherrystudio/ui'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -110,8 +109,7 @@ const OVMSSettings: FC = () => {
     <>
       <Alert
         type={getAlertType()}
-        banner
-        style={{ borderRadius: 'var(--cs-radius-2xs)' }}
+        className="rounded-sm"
         description={
           <ColFlex>
             <SettingRow style={{ width: '100%' }}>
@@ -142,7 +140,7 @@ const OVMSSettings: FC = () => {
       />
       <Alert
         type="info"
-        style={{ marginTop: 5 }}
+        className="mt-1.25"
         message={'Intel OVMS Guide:'}
         description={<div dangerouslySetInnerHTML={{ __html: t('ovms.description') }}></div>}
         showIcon
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
index 14862b0459..da5ef5518e 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
@@ -1,4 +1,15 @@
-import { Button, MenuItem } from '@cherrystudio/ui'
+import {
+  Badge,
+  Button,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+  MenuItem,
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@cherrystudio/ui'
 import type { DropResult } from '@hello-pangea/dnd'
 import { loggerService } from '@logger'
 import {
@@ -15,11 +26,11 @@ import type { Provider, ProviderType } from '@renderer/types'
 import { isSystemProvider } from '@renderer/types'
 import { getFancyProviderName, matchKeywordsInModel, matchKeywordsInProvider, uuid } from '@renderer/utils'
 import { isAnthropicSupportedProvider } from '@renderer/utils/provider'
+import { cn } from '@renderer/utils/style'
 import { useNavigate, useSearch } from '@tanstack/react-router'
-import type { MenuProps } from 'antd'
-import { Dropdown, Input, Tag } from 'antd'
+import { Input } from 'antd'
 import { Check, Filter, GripVertical, PlusIcon, Search, UserPen } from 'lucide-react'
-import type { FC } from 'react'
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react'
 import { startTransition, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWRImmutable from 'swr/immutable'
@@ -33,6 +44,14 @@ const logger = loggerService.withContext('ProviderList')
 
 const BUTTON_WRAPPER_HEIGHT = 50
 
+type ProviderMenuItem = {
+  key: string
+  label: string
+  icon: ReactNode
+  variant?: 'default' | 'destructive'
+  onSelect: () => void | Promise<void>
+}
+
 const getIsOvmsSupported = async (): Promise<boolean> => {
   try {
     const result = await window.api.ovms.isSupported()
@@ -215,19 +234,19 @@ const ProviderList: FC<ProviderListProps> = ({ isOnboarding = false }) => {
     setSelectedProvider(provider)
   }
 
-  const getDropdownMenus = (provider: Provider): MenuProps['items'] => {
+  const getProviderMenuItems = (provider: Provider): ProviderMenuItem[] => {
     const noteMenu = {
       label: t('settings.provider.notes.title'),
       key: 'notes',
       icon: <UserPen size={14} />,
-      onClick: () => ModelNotesPopup.show({ provider })
+      onSelect: () => ModelNotesPopup.show({ provider })
     }
 
     const editMenu = {
       label: t('common.edit'),
       key: 'edit',
       icon: <EditIcon size={14} />,
-      async onClick() {
+      async onSelect() {
         const { name, type, logoFile, logo } = await AddProviderPopup.show(provider)
 
         if (name) {
@@ -265,8 +284,8 @@ const ProviderList: FC<ProviderListProps> = ({ isOnboarding = false }) => {
       label: t('common.delete'),
       key: 'delete',
       icon: <DeleteIcon size={14} className="lucide-custom" />,
-      danger: true,
-      async onClick() {
+      variant: 'destructive' as const,
+      async onSelect() {
         window.modal.confirm({
           title: t('settings.provider.delete.title'),
           content: t('settings.provider.delete.content'),
@@ -359,31 +378,26 @@ const ProviderList: FC<ProviderListProps> = ({ isOnboarding = false }) => {
             style={{ borderRadius: 10, height: 35 }}
             prefix={<Search size={14} />}
             suffix={
-              <Dropdown
-                menu={{
-                  items: [
-                    {
-                      label: t('settings.provider.filter.all'),
-                      key: 'all',
-                      icon: agentFilterEnabled ? <CheckPlaceholder /> : <Check size={14} />,
-                      onClick: () => setAgentFilterEnabled(false)
-                    },
-                    {
-                      label: t('settings.provider.filter.agent'),
-                      key: 'agent',
-                      icon: agentFilterEnabled ? <Check size={14} /> : <CheckPlaceholder />,
-                      onClick: () => setAgentFilterEnabled(true)
-                    }
-                  ]
-                }}
-                trigger={['click']}>
-                <div className="flex h-5.5 w-5.5 cursor-pointer items-center justify-center rounded-sm">
-                  <Filter
-                    size={14}
-                    className={agentFilterEnabled ? 'text-(--color-primary)' : 'text-(--color-text-3)'}
-                  />
-                </div>
-              </Dropdown>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="flex h-5.5 w-5.5 cursor-pointer items-center justify-center rounded-sm">
+                    <Filter
+                      size={14}
+                      className={agentFilterEnabled ? 'text-(--color-primary)' : 'text-(--color-foreground-muted)'}
+                    />
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent align="end" className="w-36 p-1">
+                  <ProviderFilterMenuItem active={!agentFilterEnabled} onClick={() => setAgentFilterEnabled(false)}>
+                    {t('settings.provider.filter.all')}
+                  </ProviderFilterMenuItem>
+                  <ProviderFilterMenuItem active={agentFilterEnabled} onClick={() => setAgentFilterEnabled(true)}>
+                    {t('settings.provider.filter.agent')}
+                  </ProviderFilterMenuItem>
+                </PopoverContent>
+              </Popover>
             }
             onChange={(e) => setSearchText(e.target.value)}
             onKeyDown={(e) => {
@@ -414,41 +428,49 @@ const ProviderList: FC<ProviderListProps> = ({ isOnboarding = false }) => {
           }}
           itemContainerStyle={{ paddingBottom: 5 }}>
           {(provider) => (
-            <Dropdown menu={{ items: getDropdownMenus(provider) }} trigger={['contextMenu']}>
-              <MenuItem
-                key={provider.id}
-                className="w-full cursor-pointer select-none overflow-hidden rounded-[10px] text-[14px] data-[active=true]:font-semibold"
-                label={getFancyProviderName(provider)}
-                active={provider.id === selectedProvider?.id}
-                onClick={() => setSelectedProvider(provider)}
-                icon={
-                  <div className="flex items-center">
-                    <div className="mr-0.5 flex w-3 cursor-grab items-center justify-center text-(--color-text-3) opacity-0 transition-opacity duration-200 ease-in-out active:cursor-grabbing group-hover:opacity-100">
-                      <GripVertical size={12} />
+            <ContextMenu>
+              <ContextMenuTrigger asChild>
+                <MenuItem
+                  key={provider.id}
+                  className="w-full cursor-pointer select-none overflow-hidden rounded-[10px] text-[14px] data-[active=true]:font-semibold"
+                  label={getFancyProviderName(provider)}
+                  active={provider.id === selectedProvider?.id}
+                  onClick={() => setSelectedProvider(provider)}
+                  icon={
+                    <div className="flex items-center">
+                      <div className="mr-0.5 flex w-3 cursor-grab items-center justify-center text-(--color-foreground-muted) opacity-0 transition-opacity duration-200 ease-in-out active:cursor-grabbing group-hover:opacity-100">
+                        <GripVertical size={12} />
+                      </div>
+                      <ProviderAvatar
+                        style={{
+                          width: 24,
+                          height: 24
+                        }}
+                        provider={provider}
+                        customLogos={providerLogos}
+                      />
                     </div>
-                    <ProviderAvatar
-                      style={{
-                        width: 24,
-                        height: 24
-                      }}
-                      provider={provider}
-                      customLogos={providerLogos}
-                    />
-                  </div>
-                }
-                suffix={
-                  provider.enabled ? (
-                    <Tag color="green" style={{ marginLeft: 'auto', marginRight: 0, borderRadius: 16 }}>
-                      ON
-                    </Tag>
-                  ) : undefined
-                }
-              />
-            </Dropdown>
+                  }
+                  suffix={
+                    provider.enabled ? (
+                      <Badge className="mr-0 ml-auto border-success/30 bg-success/10 text-success">ON</Badge>
+                    ) : undefined
+                  }
+                />
+              </ContextMenuTrigger>
+              <ContextMenuContent>
+                {getProviderMenuItems(provider).map((item) => (
+                  <ContextMenuItem key={item.key} variant={item.variant} onSelect={item.onSelect}>
+                    {item.icon}
+                    {item.label}
+                  </ContextMenuItem>
+                ))}
+              </ContextMenuContent>
+            </ContextMenu>
           )}
         </DraggableVirtualList>
         <div className="flex h-12.5 flex-row items-center justify-center px-2 py-2.5">
-          <Button size="sm" style={{ width: '100%', borderRadius: 10 }} onClick={onAddProvider} disabled={dragging}>
+          <Button size="sm" variant="outline" className="h-8 w-full" onClick={onAddProvider} disabled={dragging}>
             <PlusIcon size={16} />
             {t('button.add')}
           </Button>
@@ -459,6 +481,19 @@ const ProviderList: FC<ProviderListProps> = ({ isOnboarding = false }) => {
   )
 }
 
-const CheckPlaceholder = () => <span className="inline-block h-3.5 w-3.5" />
+const ProviderFilterMenuItem: FC<ComponentPropsWithoutRef<'button'> & { active: boolean }> = ({
+  active,
+  className,
+  children,
+  ...props
+}) => (
+  <button
+    type="button"
+    className={cn('flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent', className)}
+    {...props}>
+    {active ? <Check size={14} /> : <span className="inline-block h-3.5 w-3.5" />}
+    <span className="truncate">{children}</span>
+  </button>
+)
 
 export default ProviderList
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
index 61bc158fee..6fe6af3aa9 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
@@ -10,7 +10,6 @@ import { isEmpty } from 'lodash'
 import { CircleDollarSign, ReceiptText } from 'lucide-react'
 import type { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   providerId: string
@@ -33,8 +32,14 @@ const ProviderOAuth: FC<Props> = ({ providerId }) => {
   const Icon = resolveProviderIcon(provider.id)
 
   return (
-    <Container>
-      {Icon ? <Icon.Avatar size={60} /> : <ProviderLogoFallback>{provider.name[0]}</ProviderLogoFallback>}
+    <div className="flex flex-col items-center justify-center gap-3.75 p-5">
+      {Icon ? (
+        <Icon.Avatar size={60} />
+      ) : (
+        <div className="flex h-[60px] w-[60px] items-center justify-center rounded-full bg-background-subtle font-bold text-2xl">
+          {provider.name[0]}
+        </div>
+      )}
       {isEmpty(provider.apiKey) ? (
         <OAuthButton provider={provider} onSuccess={setApiKey}>
           {t('settings.provider.oauth.button', { provider: getProviderLabel(provider.id) })}
@@ -51,53 +56,24 @@ const ProviderOAuth: FC<Props> = ({ providerId }) => {
           </Button>
         </RowFlex>
       )}
-      <Description>
+      <div className="flex items-center gap-1.25 text-[11px] text-foreground-secondary">
         <Trans
           i18nKey="settings.provider.oauth.description"
           components={{
             website: (
-              <OfficialWebsite href={PROVIDER_URLS[provider.id].websites.official} target="_blank" rel="noreferrer" />
+              <a
+                className="text-foreground-secondary no-underline"
+                href={PROVIDER_URLS[provider.id].websites.official}
+                target="_blank"
+                rel="noreferrer"
+              />
             )
           }}
           values={{ provider: providerWebsite }}
         />
-      </Description>
-    </Container>
+      </div>
+    </div>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
-  padding: 20px;
-`
-
-const ProviderLogoFallback = styled.div`
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-background-soft);
-  font-size: 24px;
-  font-weight: bold;
-`
-
-const Description = styled.div`
-  font-size: 11px;
-  color: var(--color-text-2);
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`
-
-const OfficialWebsite = styled.a`
-  text-decoration: none;
-  color: var(--color-text-2);
-`
-
 export default ProviderOAuth
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index 063cdea90f..4027fec84d 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -1,5 +1,16 @@
-import { Button, Flex, RowFlex, Switch, Tooltip, WarnTooltip } from '@cherrystudio/ui'
-import { HelpTooltip } from '@cherrystudio/ui'
+import {
+  Button,
+  ButtonGroup,
+  ButtonGroupItem,
+  Divider,
+  Flex,
+  HelpTooltip,
+  Input,
+  RowFlex,
+  Switch,
+  Tooltip,
+  WarnTooltip
+} from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { adaptProvider } from '@renderer/aiCore/provider/providerConfig'
 import OpenAIAlert from '@renderer/components/Alert/OpenAIAlert'
@@ -35,14 +46,13 @@ import {
   isSupportAnthropicPromptCacheProvider,
   isVertexProvider
 } from '@renderer/utils/provider'
-import { Divider, Input, Select, Space } from 'antd'
+import { Input as AntdInput, Select } from 'antd'
 import Link from 'antd/es/typography/Link'
 import { debounce, isEmpty } from 'lodash'
-import { Bolt, Check, Settings2, SquareArrowOutUpRight } from 'lucide-react'
+import { Bolt, Check, Eye, EyeOff, Settings2, SquareArrowOutUpRight } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import {
   SettingContainer,
@@ -130,6 +140,7 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
   const fancyProviderName = getFancyProviderName(provider)
 
   const [localApiKey, setLocalApiKey] = useState(provider.apiKey)
+  const [isApiKeyVisible, setIsApiKeyVisible] = useState(false)
   const [apiKeyConnectivity, setApiKeyConnectivity] = useState<ApiKeyConnectivity>({
     status: HealthStatus.NOT_CHECKED,
     checking: false
@@ -382,9 +393,11 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
       <>
         <WarnTooltip
           content={
-            <ErrorOverlay>{apiKeyConnectivity.error?.message || t('settings.models.check.failed')}</ErrorOverlay>
+            <div className="max-h-[200px] max-w-[300px] select-text overflow-y-auto break-words">
+              {apiKeyConnectivity.error?.message || t('settings.models.check.failed')}
+            </div>
           }
-          iconProps={{ size: 16, color: 'var(--color-status-warning)' }}
+          iconProps={{ size: 16, color: 'var(--color-warning-base)' }}
           onClick={() => showErrorDetailPopup({ error: apiKeyConnectivity.error })}
         />
       </>
@@ -448,10 +461,10 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
   const isAnthropicOAuth = () => provider.id === 'anthropic' && provider.authType === 'oauth'
 
   return (
-    <SettingContainer theme={theme} style={{ background: 'var(--color-background)' }}>
+    <SettingContainer theme={theme}>
       <SettingTitle>
         <Flex className="items-center gap-2">
-          <ProviderName>{fancyProviderName}</ProviderName>
+          <span className="mr-[-2px] font-medium text-sm">{fancyProviderName}</span>
           {officialWebsite && (
             <Link target="_blank" href={providerConfig.websites.official} style={{ display: 'flex' }}>
               <Button variant="ghost" size="sm">
@@ -522,20 +535,35 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
                   </Tooltip>
                 )}
               </SettingSubtitle>
-              <Space.Compact style={{ width: '100%', marginTop: 5 }}>
-                <Input.Password
-                  value={localApiKey}
-                  placeholder={t('settings.provider.api_key.label')}
-                  onChange={(e) => setLocalApiKey(e.target.value)}
-                  spellCheck={false}
-                  autoFocus={provider.enabled && provider.apiKey === '' && !isProviderSupportAuth(provider)}
-                  disabled={provider.id === 'copilot'}
-                  suffix={renderStatusIndicator()}
-                />
+              <ButtonGroup className="mt-1.25 w-full">
+                <ButtonGroupItem className="flex-1">
+                  <Input
+                    type={isApiKeyVisible ? 'text' : 'password'}
+                    value={localApiKey}
+                    placeholder={t('settings.provider.api_key.label')}
+                    onChange={(e) => setLocalApiKey(e.target.value)}
+                    spellCheck={false}
+                    autoFocus={provider.enabled && provider.apiKey === '' && !isProviderSupportAuth(provider)}
+                    disabled={provider.id === 'copilot'}
+                    className="pr-16"
+                  />
+                  <div className="-translate-y-1/2 absolute top-1/2 right-1.5 flex items-center gap-1">
+                    {renderStatusIndicator()}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={() => setIsApiKeyVisible((visible) => !visible)}
+                      className="size-7 text-muted-foreground shadow-none hover:text-foreground">
+                      {isApiKeyVisible ? <Eye size={16} /> : <EyeOff size={16} />}
+                    </Button>
+                  </div>
+                </ButtonGroupItem>
                 <Button
                   variant={isApiKeyConnectable ? 'ghost' : undefined}
                   onClick={onCheckApi}
-                  disabled={!apiHost || apiKeyConnectivity.checking}>
+                  disabled={!apiHost || apiKeyConnectivity.checking}
+                  className="h-9 shrink-0">
                   {apiKeyConnectivity.checking ? (
                     <LoadingIcon />
                   ) : apiKeyConnectivity.status === HealthStatus.SUCCESS ? (
@@ -544,7 +572,7 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
                     t('settings.provider.check')
                   )}
                 </Button>
-              </Space.Compact>
+              </ButtonGroup>
               <SettingHelpTextRow style={{ justifyContent: 'space-between' }}>
                 <RowFlex>
                   {apiKeyWebsite && !isDmxapi && (
@@ -584,19 +612,20 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
                   {isCherryIN && isChineseUser ? (
                     <CherryINSettings providerId={provider.id} apiHost={apiHost} setApiHost={setApiHost} />
                   ) : (
-                    <Space.Compact style={{ width: '100%', marginTop: 5 }}>
+                    <ButtonGroup className="mt-1.25 w-full">
                       <Input
                         value={apiHost}
                         placeholder={t('settings.provider.api_host')}
                         onChange={(e) => setApiHost(e.target.value)}
                         onBlur={onUpdateApiHost}
+                        className="flex-1"
                       />
                       {isApiHostResettable && (
-                        <Button variant="destructive" onClick={onReset}>
+                        <Button variant="destructive" onClick={onReset} className="shrink-0">
                           {t('settings.provider.api.url.reset')}
                         </Button>
                       )}
-                    </Space.Compact>
+                    </ButtonGroup>
                   )}
                   {isVertexProvider(provider) && (
                     <SettingHelpTextRow>
@@ -619,15 +648,16 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
 
               {activeHostField === 'anthropicApiHost' && canConfigureAnthropicHost && (
                 <>
-                  <Space.Compact style={{ width: '100%', marginTop: 5 }}>
-                    <Input
+                  <div className="mt-1.25 flex w-full">
+                    <AntdInput
                       value={anthropicApiHost ?? ''}
                       placeholder={t('settings.provider.anthropic_api_host')}
                       onChange={(e) => setAnthropicHost(e.target.value)}
                       onBlur={onUpdateAnthropicHost}
+                      className="flex-1"
                     />
                     {/* TODO: Add a reset button here. */}
-                  </Space.Compact>
+                  </div>
                   <SettingHelpTextRow style={{ flexDirection: 'column', alignItems: 'flex-start', gap: '4px' }}>
                     <SettingHelpText style={{ marginLeft: 6, whiteSpace: 'break-spaces', wordBreak: 'break-all' }}>
                       {t('settings.provider.anthropic_api_host_preview', {
@@ -644,14 +674,15 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
       {isAzureOpenAI && (
         <>
           <SettingSubtitle>{t('settings.provider.api_version')}</SettingSubtitle>
-          <Space.Compact style={{ width: '100%', marginTop: 5 }}>
-            <Input
+          <div className="mt-1.25 flex w-full">
+            <AntdInput
               value={apiVersion}
               placeholder="2024-xx-xx-preview"
               onChange={(e) => setApiVersion(e.target.value)}
               onBlur={onUpdateApiVersion}
+              className="flex-1"
             />
-          </Space.Compact>
+          </div>
           <SettingHelpTextRow style={{ justifyContent: 'space-between' }}>
             <SettingHelpText style={{ minWidth: 'fit-content' }}>
               {t('settings.provider.azure.apiversion.tip')}
@@ -669,18 +700,4 @@ const ProviderSetting: FC<Props> = ({ providerId, isOnboarding = false }) => {
   )
 }
 
-const ProviderName = styled.span`
-  font-size: 14px;
-  font-weight: 500;
-  margin-right: -2px;
-`
-
-const ErrorOverlay = styled.div`
-  max-height: 200px;
-  overflow-y: auto;
-  max-width: 300px;
-  word-wrap: break-word;
-  user-select: text;
-`
-
 export default ProviderSetting
diff --git a/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
index 4c71c5812a..d3eaccbbbb 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
@@ -8,7 +8,6 @@ import { Descriptions, Modal } from 'antd'
 import { Eye, EyeOff } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface ShowParams {
   id: string
@@ -104,7 +103,7 @@ const PopupContainer = ({ id, apiKey: newApiKey, baseUrl, type, name, resolve }:
       width={500}
       transitionName="animation-move-down"
       centered>
-      <Container>
+      <div className="my-3">
         <Descriptions column={1} size="small" bordered>
           <Descriptions.Item label={t('settings.models.provider_name')}>{displayName}</Descriptions.Item>
           <Descriptions.Item label={t('settings.models.provider_id')}>{baseProvider.id}</Descriptions.Item>
@@ -114,30 +113,20 @@ const PopupContainer = ({ id, apiKey: newApiKey, baseUrl, type, name, resolve }:
               {showFullKey ? newApiKey : maskApiKey(newApiKey)}
               <Button variant="ghost" size="icon-sm" onClick={() => setShowFullKey((prev) => !prev)}>
                 {showFullKey ? (
-                  <Eye size={16} color="var(--color-text-3)" />
+                  <Eye size={16} color="var(--color-foreground-muted)" />
                 ) : (
-                  <EyeOff size={16} color="var(--color-text-3)" />
+                  <EyeOff size={16} color="var(--color-foreground-muted)" />
                 )}
               </Button>
             </Flex>
           </Descriptions.Item>
         </Descriptions>
-        <ConfirmMessage>{confirmMessage}</ConfirmMessage>
-      </Container>
+        <div className="mt-4 text-foreground">{confirmMessage}</div>
+      </div>
     </Modal>
   )
 }
 
-const Container = styled.div`
-  margin-top: 12px;
-  margin-bottom: 12px;
-`
-
-const ConfirmMessage = styled.div`
-  color: var(--color-text);
-  margin-top: 16px;
-`
-
 const TopViewKey = 'UrlSchemaInfoPopup'
 
 export default class UrlSchemaInfoPopup {
diff --git a/src/renderer/src/pages/settings/ProviderSettings/VertexAISettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/VertexAISettings.tsx
index 2daa9d3b57..d621c6fa24 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/VertexAISettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/VertexAISettings.tsx
@@ -1,4 +1,4 @@
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'
+import { Alert, Button, Input, Textarea } from '@cherrystudio/ui'
 import { PROVIDER_URLS } from '@renderer/config/providers'
 import { useVertexAISettings } from '@renderer/hooks/useVertexAI'
 import {
@@ -6,24 +6,13 @@ import {
   mergeVertexAILocationOptions,
   parseVertexAIServiceAccountJson
 } from '@renderer/utils/vertexAI'
-import { Alert, AutoComplete, Button, Input } from 'antd'
+import { Eye, EyeOff } from 'lucide-react'
+import type React from 'react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingHelpLink, SettingHelpText, SettingHelpTextRow, SettingSubtitle } from '..'
 
-const visibilityToggleStyle: React.CSSProperties = {
-  position: 'absolute',
-  top: '50%',
-  right: 8,
-  transform: 'translateY(-50%)',
-  zIndex: 1
-}
-
-const visibilityIconStyle: React.CSSProperties = {
-  color: 'var(--color-text-3)'
-}
-
 const VertexAISettings = () => {
   const { t } = useTranslation()
   const {
@@ -70,7 +59,6 @@ const VertexAISettings = () => {
   const secretTextAreaStyle = useMemo(
     () =>
       ({
-        paddingRight: 40,
         WebkitTextSecurity: privateKeyVisible ? 'none' : 'disc'
       }) as React.CSSProperties,
     [privateKeyVisible]
@@ -78,7 +66,6 @@ const VertexAISettings = () => {
   const jsonTextAreaStyle = useMemo(
     () =>
       ({
-        paddingRight: 40,
         WebkitTextSecurity: serviceAccountJsonVisible ? 'none' : 'disc'
       }) as React.CSSProperties,
     [serviceAccountJsonVisible]
@@ -175,7 +162,7 @@ const VertexAISettings = () => {
       </SettingSubtitle>
       <Alert
         type="info"
-        style={{ marginTop: 5 }}
+        className="mt-1.25"
         message={t('settings.provider.vertex_ai.service_account.description')}
         showIcon
       />
@@ -189,35 +176,31 @@ const VertexAISettings = () => {
         </SettingHelpTextRow>
       )}
       <div style={{ position: 'relative', marginTop: 5 }}>
-        <Input.TextArea
+        <Textarea.Input
           value={serviceAccountJson}
-          status={serviceAccountJsonError ? 'error' : undefined}
+          hasError={serviceAccountJsonError}
           placeholder={t('settings.provider.vertex_ai.service_account.json_input_placeholder')}
           onChange={handleServiceAccountJsonChange}
           onBlur={handleServiceAccountJsonBlur}
           style={jsonTextAreaStyle}
+          className="min-h-9 resize-none pr-10"
           spellCheck={false}
           autoComplete="off"
-          autoSize={serviceAccountJsonError ? { minRows: 2, maxRows: 2 } : { minRows: 1, maxRows: 1 }}
+          rows={serviceAccountJsonError ? 2 : 1}
         />
         <Button
-          type="text"
-          size="small"
+          type="button"
+          variant="ghost"
+          size="icon-sm"
           aria-label={jsonInputLabel}
-          icon={
-            serviceAccountJsonVisible ? (
-              <EyeOutlined style={visibilityIconStyle} />
-            ) : (
-              <EyeInvisibleOutlined style={visibilityIconStyle} />
-            )
-          }
           onClick={() => setServiceAccountJsonVisible((visible) => !visible)}
           onMouseDown={(event) => event.preventDefault()}
-          style={visibilityToggleStyle}
-        />
+          className="-translate-y-1/2 absolute top-1/2 right-1.5 z-1 size-7 text-muted-foreground shadow-none">
+          {serviceAccountJsonVisible ? <Eye size={14} /> : <EyeOff size={14} />}
+        </Button>
       </div>
       <SettingHelpTextRow>
-        <SettingHelpText style={serviceAccountJsonError ? { color: 'var(--color-error)' } : undefined}>
+        <SettingHelpText className={serviceAccountJsonError ? 'text-destructive' : undefined}>
           {serviceAccountJsonError
             ? t('settings.provider.vertex_ai.service_account.json_parse_error')
             : t('settings.provider.vertex_ai.service_account.json_input_help')}
@@ -227,13 +210,14 @@ const VertexAISettings = () => {
       <SettingSubtitle style={{ marginTop: 5 }}>
         {t('settings.provider.vertex_ai.service_account.client_email')}
       </SettingSubtitle>
-      <Input.Password
+      <Input
+        type="password"
         value={serviceAccount.clientEmail}
-        status={isClientEmailMissing ? 'error' : undefined}
+        aria-invalid={isClientEmailMissing}
         placeholder={t('settings.provider.vertex_ai.service_account.client_email_placeholder')}
         onChange={handleServiceAccountClientEmailChange}
         onBlur={handleServiceAccountClientEmailBlur}
-        style={{ marginTop: 5 }}
+        className="mt-1.25"
       />
       <SettingHelpTextRow>
         <SettingHelpText>{t('settings.provider.vertex_ai.service_account.client_email_help')}</SettingHelpText>
@@ -241,61 +225,65 @@ const VertexAISettings = () => {
 
       <SettingSubtitle style={{ marginTop: 5 }}>{privateKeyLabel}</SettingSubtitle>
       <div style={{ position: 'relative', marginTop: 5 }}>
-        <Input.TextArea
+        <Textarea.Input
           value={serviceAccount.privateKey}
-          status={isPrivateKeyMissing ? 'error' : undefined}
+          hasError={isPrivateKeyMissing}
           placeholder={t('settings.provider.vertex_ai.service_account.private_key_placeholder')}
           onChange={handleServiceAccountPrivateKeyChange}
           onBlur={handleServiceAccountPrivateKeyBlur}
           style={secretTextAreaStyle}
+          className="max-h-24 min-h-16 pr-10"
           spellCheck={false}
           autoComplete="off"
-          autoSize={{ minRows: 2, maxRows: 2 }}
+          rows={2}
         />
         <Button
-          type="text"
-          size="small"
+          type="button"
+          variant="ghost"
+          size="icon-sm"
           aria-label={privateKeyLabel}
-          icon={
-            privateKeyVisible ? (
-              <EyeOutlined style={visibilityIconStyle} />
-            ) : (
-              <EyeInvisibleOutlined style={visibilityIconStyle} />
-            )
-          }
           onClick={() => setPrivateKeyVisible((visible) => !visible)}
           onMouseDown={(event) => event.preventDefault()}
-          style={visibilityToggleStyle}
-        />
+          className="-translate-y-1/2 absolute top-1/2 right-1.5 z-1 size-7 text-muted-foreground shadow-none">
+          {privateKeyVisible ? <Eye size={14} /> : <EyeOff size={14} />}
+        </Button>
       </div>
       <SettingHelpTextRow>
         <SettingHelpText>{t('settings.provider.vertex_ai.service_account.private_key_help')}</SettingHelpText>
       </SettingHelpTextRow>
       <>
         <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.vertex_ai.project_id')}</SettingSubtitle>
-        <Input.Password
+        <Input
+          type="password"
           value={localProjectId}
-          status={isProjectIdMissing ? 'error' : undefined}
+          aria-invalid={isProjectIdMissing}
           placeholder={t('settings.provider.vertex_ai.project_id_placeholder')}
           onChange={handleProjectIdChange}
           onBlur={handleProjectIdBlur}
-          style={{ marginTop: 5 }}
+          className="mt-1.25"
         />
         <SettingHelpTextRow>
           <SettingHelpText>{t('settings.provider.vertex_ai.project_id_help')}</SettingHelpText>
         </SettingHelpTextRow>
 
         <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.vertex_ai.location')}</SettingSubtitle>
-        <AutoComplete
+        <Input
           value={localLocation}
-          status={isLocationMissing ? 'error' : undefined}
           placeholder={t('settings.provider.vertex_ai.location_placeholder')}
-          onChange={handleLocationChange}
-          onSelect={handleLocationSelect}
+          onChange={(event) => handleLocationChange(event.target.value)}
           onBlur={handleLocationBlur}
-          options={locationOptions}
-          style={{ marginTop: 5, width: '100%' }}
+          onSelect={(event) => handleLocationSelect(event.currentTarget.value)}
+          aria-invalid={isLocationMissing}
+          className="mt-1.25"
+          list="vertex-ai-location-options"
         />
+        <datalist id="vertex-ai-location-options">
+          {locationOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </datalist>
         <SettingHelpTextRow>
           <SettingHelpText>{t('settings.provider.vertex_ai.location_help')}</SettingHelpText>
         </SettingHelpTextRow>
diff --git a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
index ce9e2d0e63..0ec515eb34 100644
--- a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
@@ -1,18 +1,33 @@
-import { InfoCircleOutlined } from '@ant-design/icons'
-import { Button, InfoTooltip, RowFlex, Switch } from '@cherrystudio/ui'
+import {
+  Button,
+  ButtonGroup,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  InfoTooltip,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  RowFlex,
+  Switch
+} from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useAssistants, useDefaultAssistant, useDefaultModel } from '@renderer/hooks/useAssistant'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setQuickAssistantId } from '@renderer/store/llm'
-import { matchKeywordsInString } from '@renderer/utils'
+import type { Assistant } from '@renderer/types'
+import { cn } from '@renderer/utils/style'
 import HomeWindow from '@renderer/windows/quickAssistant/home/HomeWindow'
-import { Select } from 'antd'
+import { Check, ChevronDown, Info } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '.'
 
@@ -33,12 +48,21 @@ const QuickAssistantSettings: FC = () => {
   const { quickAssistantId } = useAppSelector((state) => state.llm)
   const { defaultAssistant: _defaultAssistant } = useDefaultAssistant()
   const { defaultModel } = useDefaultModel()
+  const [assistantSelectOpen, setAssistantSelectOpen] = useState(false)
 
   // Take the "default assistant" from the assistant list first.
   const defaultAssistant = useMemo(
     () => assistants.find((a) => a.id === _defaultAssistant.id) || _defaultAssistant,
     [assistants, _defaultAssistant]
   )
+  const assistantOptions = useMemo(
+    () => [defaultAssistant, ...assistants.filter((assistant) => assistant.id !== defaultAssistant.id)],
+    [assistants, defaultAssistant]
+  )
+  const selectedAssistant = assistantOptions.find((assistant) => assistant.id === quickAssistantId) || defaultAssistant
+  const handleAssistantSelect = (assistantId: string) => {
+    dispatch(setQuickAssistantId(assistantId))
+  }
 
   const handleEnableQuickAssistant = async (enable: boolean) => {
     await setEnableQuickAssistant(enable)
@@ -49,7 +73,7 @@ const QuickAssistantSettings: FC = () => {
       window.toast.info({
         title: t('settings.quickAssistant.use_shortcut_to_show'),
         timeout: 4000,
-        icon: <InfoCircleOutlined />
+        icon: <Info size={16} />
       })
     }
 
@@ -118,136 +142,129 @@ const QuickAssistantSettings: FC = () => {
             <RowFlex className="items-center gap-2.5">
               {!quickAssistantId ? null : (
                 <RowFlex className="items-center">
-                  <Select
-                    value={quickAssistantId || defaultAssistant.id}
-                    style={{ width: 300, height: 34 }}
-                    onChange={(value) => dispatch(setQuickAssistantId(value))}
-                    placeholder={t('settings.models.quick_assistant_selection')}
-                    showSearch
-                    options={[
-                      {
-                        key: defaultAssistant.id,
-                        value: defaultAssistant.id,
-                        title: defaultAssistant.name,
-                        label: (
-                          <AssistantItem>
-                            <ModelAvatar model={defaultAssistant.model || defaultModel} size={18} />
-                            <AssistantName>{defaultAssistant.name}</AssistantName>
-                            <Spacer />
-                            <DefaultTag isCurrent={true}>{t('settings.models.quick_assistant_default_tag')}</DefaultTag>
-                          </AssistantItem>
-                        )
-                      },
-                      ...assistants
-                        .filter((a) => a.id !== defaultAssistant.id)
-                        .map((a) => ({
-                          key: a.id,
-                          value: a.id,
-                          title: a.name,
-                          label: (
-                            <AssistantItem>
-                              <ModelAvatar model={a.model || defaultModel} size={18} />
-                              <AssistantName>{a.name}</AssistantName>
-                              <Spacer />
-                            </AssistantItem>
-                          )
-                        }))
-                    ]}
-                    filterOption={(input, option) => matchKeywordsInString(input, option?.title || '')}
-                  />
+                  <Popover open={assistantSelectOpen} onOpenChange={setAssistantSelectOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="h-[34px] w-[300px] justify-between px-2 shadow-none"
+                        aria-expanded={assistantSelectOpen}>
+                        <AssistantOption
+                          assistant={selectedAssistant}
+                          defaultAssistantId={defaultAssistant.id}
+                          defaultModel={defaultModel}
+                        />
+                        <ChevronDown size={16} className="shrink-0 opacity-50" />
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      className="w-[300px] p-0"
+                      align="end"
+                      onFocusOutside={(event) => {
+                        // The embedded quick assistant preview auto-focuses its input on render.
+                        event.preventDefault()
+                      }}>
+                      <Command>
+                        <CommandInput placeholder={t('settings.models.quick_assistant_selection')} />
+                        <CommandList>
+                          <CommandEmpty>{t('common.no_results')}</CommandEmpty>
+                          <CommandGroup>
+                            {assistantOptions.map((assistant) => (
+                              <CommandItem
+                                key={assistant.id}
+                                value={`${assistant.name} ${assistant.id}`}
+                                keywords={[assistant.name, assistant.id]}
+                                onSelect={() => {
+                                  handleAssistantSelect(assistant.id)
+                                }}>
+                                <AssistantOption
+                                  assistant={assistant}
+                                  defaultAssistantId={defaultAssistant.id}
+                                  defaultModel={defaultModel}
+                                />
+                                {assistant.id === quickAssistantId && (
+                                  <Check size={14} className="ml-auto text-primary" />
+                                )}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </PopoverContent>
+                  </Popover>
                 </RowFlex>
               )}
-              <RowFlex className="items-center gap-0">
-                <StyledButton
-                  color={quickAssistantId ? 'primary' : 'default'}
+              <ButtonGroup>
+                <Button
+                  className="min-w-20"
+                  variant={quickAssistantId ? 'default' : 'outline'}
                   onClick={() => {
                     dispatch(setQuickAssistantId(defaultAssistant.id))
-                  }}
-                  selected={!!quickAssistantId}>
+                  }}>
                   {t('settings.models.use_assistant')}
-                </StyledButton>
-                <StyledButton
-                  color={!quickAssistantId ? 'primary' : 'default'}
-                  onClick={() => dispatch(setQuickAssistantId(''))}
-                  selected={!quickAssistantId}>
+                </Button>
+                <Button
+                  className="min-w-20"
+                  variant={!quickAssistantId ? 'default' : 'outline'}
+                  onClick={() => dispatch(setQuickAssistantId(''))}>
                   {t('settings.models.use_model')}
-                </StyledButton>
-              </RowFlex>
+                </Button>
+              </ButtonGroup>
             </RowFlex>
           </RowFlex>
         </SettingGroup>
       )}
       {enableQuickAssistant && (
-        <AssistantContainer>
+        <div className="mx-auto mt-5 h-[460px] w-full overflow-hidden rounded-[10px] border-[0.5px] border-border bg-background">
           <HomeWindow draggable={false} />
-        </AssistantContainer>
+        </div>
       )}
     </SettingContainer>
   )
 }
 
-const AssistantContainer = styled.div`
-  width: 100%;
-  height: 460px;
-  background-color: var(--color-background);
-  border-radius: 10px;
-  border: 0.5px solid var(--color-border);
-  margin: 0 auto;
-  overflow: hidden;
-`
+const AssistantOption = ({
+  assistant,
+  defaultAssistantId,
+  defaultModel
+}: {
+  assistant: Assistant
+  defaultAssistantId: string
+  defaultModel: Assistant['model']
+}) => {
+  const { t } = useTranslation()
+  const isDefault = assistant.id === defaultAssistantId
 
-const AssistantItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  height: 28px;
-`
+  return (
+    <AssistantItem>
+      <ModelAvatar model={assistant.model || defaultModel} size={18} />
+      <AssistantName>{assistant.name}</AssistantName>
+      <Spacer />
+      {isDefault && <DefaultTag isCurrent={true}>{t('settings.models.quick_assistant_default_tag')}</DefaultTag>}
+    </AssistantItem>
+  )
+}
 
-const AssistantName = styled.span`
-  max-width: calc(100% - 60px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
+const AssistantItem = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex h-7 min-w-0 flex-1 flex-row items-center gap-2', className)} {...props} />
+)
 
-const Spacer = styled.div`
-  flex: 1;
-`
+const AssistantName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('max-w-[calc(100%-60px)] truncate', className)} {...props} />
+)
 
-const DefaultTag = styled.span<{ isCurrent: boolean }>`
-  color: ${(props) => (props.isCurrent ? 'var(--color-primary)' : 'var(--color-text-3)')};
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 4px;
-`
+const Spacer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex-1', className)} {...props} />
+)
 
-const StyledButton = styled(Button)<{ selected: boolean }>`
-  border-radius: ${(props) => (props.selected ? '6px' : '6px')};
-  z-index: ${(props) => (props.selected ? 1 : 0)};
-  min-width: 80px;
-
-  &:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right-width: 0; // No right border for the first button when not selected
-  }
-
-  &:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left-width: 1px; // Ensure left border for the last button
-  }
-
-  // Override Ant Design's default hover and focus styles for a cleaner look
-
-  &:hover,
-  &:focus {
-    z-index: 1;
-    border-color: ${(props) => (props.selected ? 'var(--ant-primary-color)' : 'var(--ant-primary-color-hover)')};
-    box-shadow: ${(props) =>
-      props.selected ? '0 0 0 2px var(--ant-primary-color-outline)' : '0 0 0 2px var(--ant-primary-color-outline)'};
-  }
-`
+const DefaultTag = ({
+  className,
+  isCurrent,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'> & { isCurrent: boolean }) => (
+  <span
+    className={cn('rounded px-1 py-0.5 text-xs', isCurrent ? 'text-primary' : 'text-foreground-muted', className)}
+    {...props}
+  />
+)
 
 export default QuickAssistantSettings
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
index 9af68c4027..4d477f201d 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
@@ -1,17 +1,17 @@
-import { Button, Switch, Tooltip } from '@cherrystudio/ui'
+import { Button, RadioGroup, RadioGroupItem, Slider, Switch, Tooltip } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { isLinux, isMac, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { getSelectionDescriptionLabel } from '@renderer/i18n/label'
+import { cn } from '@renderer/utils/style'
 import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar'
 import type { SelectionFilterMode, SelectionTriggerMode } from '@shared/data/preference/preferenceTypes'
 import { Link } from '@tanstack/react-router'
-import { Radio, Row, Slider } from 'antd'
 import { CircleCheck, CircleHelp, CircleX, Edit2, TriangleAlert } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import {
   SettingContainer,
@@ -94,17 +94,17 @@ const SelectionAssistantSettings: FC = () => {
   return (
     <SettingContainer theme={theme}>
       <SettingGroup theme={theme}>
-        <Row align="middle">
-          <SettingTitle>{t('selection.name')}</SettingTitle>
-          <Spacer />
-          <Button
-            variant="ghost"
-            onClick={() => window.api.openWebsite('https://github.com/CherryHQ/cherry-studio/issues/6505')}
-            style={{ fontSize: 12 }}>
-            {'FAQ & ' + t('settings.about.feedback.button')}
-          </Button>
-          {isMac && <ExperimentalText>{t('selection.settings.experimental')}</ExperimentalText>}
-        </Row>
+        <SettingTitle>
+          <span className="font-semibold text-[15px]">{t('selection.name')}</span>
+          <div className="flex items-center">
+            <button
+              type="button"
+              className="cursor-pointer border-0 bg-transparent p-0 font-normal text-link text-xs hover:text-link-hover hover:underline"
+              onClick={() => window.api.openWebsite('https://github.com/CherryHQ/cherry-studio/issues/6505')}>
+              {'FAQ & ' + t('settings.about.feedback.button')}
+            </button>
+          </div>
+        </SettingTitle>
         <SettingDivider />
         <SettingRow>
           <SettingLabel>
@@ -129,7 +129,7 @@ const SelectionAssistantSettings: FC = () => {
             <SettingDivider />
             <SettingLabel>
               <SettingRowTitle>
-                <TriangleAlert size={14} style={{ marginRight: 4, color: 'var(--color-error)' }} />
+                <TriangleAlert size={14} style={{ marginRight: 4, color: 'var(--color-error-base)' }} />
                 {t('selection.settings.linux.wayland_title')}
               </SettingRowTitle>
               {linuxEnvInfo.isLinuxCompositorCompatible ? (
@@ -142,13 +142,10 @@ const SelectionAssistantSettings: FC = () => {
                     {linuxEnvInfo.isLinuxXWaylandMode ? (
                       <CircleCheck
                         size={13}
-                        style={{ color: 'var(--color-status-success)', marginRight: 6, flexShrink: 0 }}
+                        style={{ color: 'var(--color-success-base)', marginRight: 6, flexShrink: 0 }}
                       />
                     ) : (
-                      <CircleX
-                        size={13}
-                        style={{ color: 'var(--color-status-error)', marginRight: 6, flexShrink: 0 }}
-                      />
+                      <CircleX size={13} style={{ color: 'var(--color-error-base)', marginRight: 6, flexShrink: 0 }} />
                     )}
                     <span>
                       {t('selection.settings.linux.xwayland_label')}
@@ -161,13 +158,10 @@ const SelectionAssistantSettings: FC = () => {
                     {linuxEnvInfo.hasLinuxInputDeviceAccess ? (
                       <CircleCheck
                         size={13}
-                        style={{ color: 'var(--color-status-success)', marginRight: 6, flexShrink: 0 }}
+                        style={{ color: 'var(--color-success-base)', marginRight: 6, flexShrink: 0 }}
                       />
                     ) : (
-                      <CircleX
-                        size={13}
-                        style={{ color: 'var(--color-status-error)', marginRight: 6, flexShrink: 0 }}
-                      />
+                      <CircleX size={13} style={{ color: 'var(--color-error-base)', marginRight: 6, flexShrink: 0 }} />
                     )}
                     <span>
                       {t('selection.settings.linux.input_group_label')}
@@ -201,13 +195,22 @@ const SelectionAssistantSettings: FC = () => {
                 </SettingRowTitle>
                 <SettingDescription>{t('selection.settings.toolbar.trigger_mode.description')}</SettingDescription>
               </SettingLabel>
-              <Radio.Group value={triggerMode} onChange={(e) => setTriggerMode(e.target.value as SelectionTriggerMode)}>
+              <RadioGroup
+                value={triggerMode}
+                onValueChange={(value) => setTriggerMode(value as SelectionTriggerMode)}
+                className="flex flex-wrap gap-3">
                 <Tooltip content={t('selection.settings.toolbar.trigger_mode.selected_note')}>
-                  <Radio value="selected">{t('selection.settings.toolbar.trigger_mode.selected')}</Radio>
+                  <label className="flex cursor-pointer items-center gap-2 text-sm">
+                    <RadioGroupItem size="sm" value="selected" />
+                    <span>{t('selection.settings.toolbar.trigger_mode.selected')}</span>
+                  </label>
                 </Tooltip>
                 {isWin && (
                   <Tooltip content={t('selection.settings.toolbar.trigger_mode.ctrlkey_note')}>
-                    <Radio value="ctrlkey">{t('selection.settings.toolbar.trigger_mode.ctrlkey')}</Radio>
+                    <label className="flex cursor-pointer items-center gap-2 text-sm">
+                      <RadioGroupItem size="sm" value="ctrlkey" />
+                      <span>{t('selection.settings.toolbar.trigger_mode.ctrlkey')}</span>
+                    </label>
                   </Tooltip>
                 )}
                 <Tooltip
@@ -220,9 +223,12 @@ const SelectionAssistantSettings: FC = () => {
                       </Link>
                     </div>
                   }>
-                  <Radio value="shortcut">{t('selection.settings.toolbar.trigger_mode.shortcut')}</Radio>
+                  <label className="flex cursor-pointer items-center gap-2 text-sm">
+                    <RadioGroupItem size="sm" value="shortcut" />
+                    <span>{t('selection.settings.toolbar.trigger_mode.shortcut')}</span>
+                  </label>
                 </Tooltip>
-              </Radio.Group>
+              </RadioGroup>
             </SettingRow>
             <SettingDivider />
             <SettingRow>
@@ -276,14 +282,13 @@ const SelectionAssistantSettings: FC = () => {
               </SettingLabel>
               <div style={{ marginRight: '16px' }}>{opacityValue}%</div>
               <Slider
-                style={{ width: 100 }}
+                className="w-[100px]"
                 min={20}
                 max={100}
-                reverse
-                value={opacityValue}
-                onChange={setOpacityValue}
-                onChangeComplete={setActionWindowOpacity}
-                tooltip={{ open: false }}
+                inverted
+                value={[opacityValue]}
+                onValueChange={(value) => setOpacityValue(value[0])}
+                onValueCommit={(value) => setActionWindowOpacity(value[0])}
               />
             </SettingRow>
           </SettingGroup>
@@ -299,20 +304,30 @@ const SelectionAssistantSettings: FC = () => {
                   {t('selection.settings.advanced.filter_mode.title')}
                   {isLinux && linuxEnvInfo?.isLinuxWaylandDisplay && (
                     <span style={{ marginLeft: 6, display: 'inline-flex', alignItems: 'center' }}>
-                      （<TriangleAlert size={13} style={{ margin: '0 3px', color: 'var(--color-error)' }} />
+                      （<TriangleAlert size={13} style={{ margin: '0 3px', color: 'var(--color-error-base)' }} />
                       {t('selection.settings.linux.filter_warning_text')}）
                     </span>
                   )}
                 </SettingRowTitle>
                 <SettingDescription>{t('selection.settings.advanced.filter_mode.description')}</SettingDescription>
               </SettingLabel>
-              <Radio.Group
+              <RadioGroup
                 value={filterMode ?? 'default'}
-                onChange={(e) => setFilterMode(e.target.value as SelectionFilterMode)}>
-                <Radio value="default">{t('selection.settings.advanced.filter_mode.default')}</Radio>
-                <Radio value="whitelist">{t('selection.settings.advanced.filter_mode.whitelist')}</Radio>
-                <Radio value="blacklist">{t('selection.settings.advanced.filter_mode.blacklist')}</Radio>
-              </Radio.Group>
+                onValueChange={(value) => setFilterMode(value as SelectionFilterMode)}
+                className="flex flex-wrap gap-3">
+                <label className="flex cursor-pointer items-center gap-2 text-sm">
+                  <RadioGroupItem size="sm" value="default" />
+                  <span>{t('selection.settings.advanced.filter_mode.default')}</span>
+                </label>
+                <label className="flex cursor-pointer items-center gap-2 text-sm">
+                  <RadioGroupItem size="sm" value="whitelist" />
+                  <span>{t('selection.settings.advanced.filter_mode.whitelist')}</span>
+                </label>
+                <label className="flex cursor-pointer items-center gap-2 text-sm">
+                  <RadioGroupItem size="sm" value="blacklist" />
+                  <span>{t('selection.settings.advanced.filter_mode.blacklist')}</span>
+                </label>
+              </RadioGroup>
             </SettingRow>
 
             {filterMode && filterMode !== 'default' && (
@@ -345,37 +360,18 @@ const SelectionAssistantSettings: FC = () => {
   )
 }
 
-const Spacer = styled.div`
-  flex: 1;
-`
-const SettingLabel = styled.div`
-  flex: 1;
-`
-
-const ExperimentalText = styled.div`
-  color: var(--color-text-3);
-  font-size: 12px;
-`
-
-const DemoContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 15px;
-  margin-bottom: 5px;
-`
-
-const QuestionIcon = styled(CircleHelp)`
-  cursor: pointer;
-  color: var(--color-text-3);
-`
-
-const ChecklistItem = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: 2px;
-  font-size: 12px;
-  color: var(--color-text-3);
-`
+const Spacer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex-1', className)} {...props} />
+)
+const SettingLabel = Spacer
+const DemoContainer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-3.75 mb-1.25 flex items-center justify-center', className)} {...props} />
+)
+const QuestionIcon = ({ className, ...props }: React.ComponentProps<typeof CircleHelp>) => (
+  <CircleHelp className={cn('cursor-pointer text-foreground-muted', className)} {...props} />
+)
+const ChecklistItem = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-0.5 flex items-center text-foreground-muted text-xs', className)} {...props} />
+)
 
 export default SelectionAssistantSettings
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx
index fa494a67be..949cee56a6 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsList.tsx
@@ -2,7 +2,6 @@ import type { DroppableProvided } from '@hello-pangea/dnd'
 import { Draggable, Droppable } from '@hello-pangea/dnd'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
 import { memo } from 'react'
-import styled from 'styled-components'
 
 import ActionsListItemComponent from './ActionsListItem'
 
@@ -20,8 +19,8 @@ const ActionsList = memo(
     return (
       <Droppable droppableId={droppableId}>
         {(provided: DroppableProvided) => (
-          <List ref={provided.innerRef} {...provided.droppableProps}>
-            <ActionsListContent>
+          <div ref={provided.innerRef} className="mb-4 rounded pb-px" {...provided.droppableProps}>
+            <div>
               {items.map((item, index) => (
                 <Draggable key={item.id} draggableId={item.id} index={index}>
                   {(provided) => (
@@ -38,23 +37,12 @@ const ActionsList = memo(
                 </Draggable>
               ))}
               {provided.placeholder}
-            </ActionsListContent>
-          </List>
+            </div>
+          </div>
         )}
       </Droppable>
     )
   }
 )
 
-const List = styled.div`
-  background: var(--color-bg-1);
-  border-radius: 4px;
-  margin-bottom: 16px;
-  padding-bottom: 1px;
-`
-
-const ActionsListContent = styled.div`
-  padding: 10px;
-`
-
 export default ActionsList
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx
index 4940f2c3fb..2b13c5910f 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListDivider.tsx
@@ -1,6 +1,5 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface DividerProps {
   enabledCount: number
@@ -11,31 +10,14 @@ const ActionsListDivider = memo(({ enabledCount, maxEnabled }: DividerProps) =>
   const { t } = useTranslation()
 
   return (
-    <DividerContainer>
-      <DividerLine />
-      <DividerText>{t('selection.settings.actions.drag_hint', { enabled: enabledCount, max: maxEnabled })}</DividerText>
-      <DividerLine />
-    </DividerContainer>
+    <div className="my-4 flex items-center justify-center text-foreground-muted text-xs">
+      <div className="h-0.5 flex-1 bg-border" />
+      <span className="mx-4">
+        {t('selection.settings.actions.drag_hint', { enabled: enabledCount, max: maxEnabled })}
+      </span>
+      <div className="h-0.5 flex-1 bg-border" />
+    </div>
   )
 })
 
-const DividerContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin: 16px 12px;
-`
-
-const DividerLine = styled.div`
-  flex: 1;
-  height: 2px;
-  background: var(--color-border);
-`
-
-const DividerText = styled.span`
-  margin: 0 16px;
-`
-
 export default ActionsListDivider
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
index 67f11a474b..75e0765e0b 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
@@ -1,11 +1,12 @@
 import { Button } from '@cherrystudio/ui'
 import type { DraggableProvided } from '@hello-pangea/dnd'
+import { cn } from '@renderer/utils/style'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
 import { Pencil, Settings2, Trash } from 'lucide-react'
 import { DynamicIcon } from 'lucide-react/dynamic'
+import type React from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface ActionItemProps {
   item: SelectionActionItem
@@ -81,83 +82,65 @@ const ActionOperations = memo(({ item, onEdit, onDelete }: ActionOperationsProps
   return null
 })
 
-const Item = styled.div<{ disabled: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  margin-bottom: 8px;
-  background-color: var(--color-bg-1);
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  cursor: move;
-  opacity: ${(props) => (props.disabled ? 0.8 : 1)};
-  transition: background-color 0.2s ease;
+const Item = ({
+  ref,
+  className,
+  disabled,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { disabled: boolean; ref?: React.Ref<HTMLElement> }) => (
+  <div
+    ref={ref as React.Ref<HTMLDivElement>}
+    className={cn(
+      'group/action-item mb-2 flex min-h-11 cursor-move items-center justify-between rounded-md border border-border/60 bg-transparent px-4 py-2 transition-colors last:mb-0 hover:border-border hover:bg-muted/50',
+      disabled && 'opacity-70 hover:bg-muted/30',
+      className === 'non-draggable' && 'relative cursor-default border-border/80 bg-muted/50 hover:bg-muted/50',
+      className
+    )}
+    {...props}
+  />
+)
 
-  &:last-child {
-    margin-bottom: 0;
-  }
+const ItemLeft = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex min-w-0 flex-1 items-center', className)} {...props} />
+)
 
-  &:hover {
-    background-color: var(--color-bg-2);
-  }
+const ItemName = ({
+  className,
+  disabled,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'> & { disabled: boolean }) => (
+  <span className={cn('ml-2 truncate', disabled ? 'text-foreground-muted' : 'text-foreground', className)} {...props} />
+)
 
-  &.non-draggable {
-    cursor: default;
-    background-color: var(--color-bg-2);
-    position: relative;
-  }
-`
+const ItemIcon = ({ className, disabled, ...props }: React.ComponentPropsWithoutRef<'div'> & { disabled: boolean }) => (
+  <div
+    className={cn(
+      'mx-2 flex items-center justify-center',
+      disabled ? 'text-muted-foreground/70' : 'text-muted-foreground group-hover/action-item:text-foreground',
+      className
+    )}
+    {...props}
+  />
+)
 
-const ItemLeft = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-`
+const ItemDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'ml-4 flex h-5 shrink-0 items-center gap-1 rounded-sm bg-muted/50 px-1.5 text-muted-foreground text-xs leading-none',
+      className
+    )}
+    {...props}
+  />
+)
 
-const ItemName = styled.span<{ disabled: boolean }>`
-  margin-left: 8px;
-  color: ${(props) => (props.disabled ? 'var(--color-text-3)' : 'var(--color-text-1)')};
-`
-
-const ItemIcon = styled.div<{ disabled: boolean }>`
-  margin: 0 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(props) => (props.disabled ? 'var(--color-text-3)' : 'var(--color-primary)')};
-`
-
-const ItemDescription = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 16px;
-  font-size: 12px;
-  color: var(--color-text-2);
-  opacity: 0.8;
-`
-
-const UserActionOpSection = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-
-  .btn-icon-edit {
-    color: var(--color-text-3);
-
-    &:hover {
-      color: var(--color-primary);
-    }
-  }
-  .btn-icon-delete {
-    color: var(--color-text-3);
-
-    &:hover {
-      color: var(--color-error);
-    }
-  }
-`
+const UserActionOpSection = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'flex flex-row items-center gap-2 [&_.btn-icon-delete:hover]:text-destructive [&_.btn-icon-delete]:text-muted-foreground [&_.btn-icon-edit:hover]:text-foreground [&_.btn-icon-edit]:text-muted-foreground',
+      className
+    )}
+    {...props}
+  />
+)
 
 export default ActionsListItem
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
index 55d29feb7c..91a6e1a129 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
@@ -1,10 +1,6 @@
-import { Button } from '@cherrystudio/ui'
-import { Modal, Typography } from 'antd'
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from '@cherrystudio/ui'
 import type { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-const { Text, Paragraph } = Typography
 
 interface MacProcessTrustHintModalProps {
   open: boolean
@@ -25,48 +21,36 @@ const MacProcessTrustHintModal: FC<MacProcessTrustHintModalProps> = ({ open, onC
   }
 
   return (
-    <Modal
-      title={t('selection.settings.enable.mac_process_trust_hint.title')}
-      open={open}
-      onCancel={onClose}
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t('selection.settings.enable.mac_process_trust_hint.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-3 py-4 text-foreground text-sm">
+          <p className="m-0">
+            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.0" />
+          </p>
+          <p className="m-0">
+            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.1" />
+          </p>
+          <p className="m-0">
+            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.2" />
+          </p>
+        </div>
+        <div className="flex w-full items-center justify-between">
           <Button
             variant="ghost"
-            style={{ color: 'var(--color-text-3)', fontSize: 12 }}
+            className="text-[var(--color-foreground-muted)] text-xs"
             onClick={handleOpenAccessibility}>
             {t('selection.settings.enable.mac_process_trust_hint.button.open_accessibility_settings')}
           </Button>
-          <Button color="primary" onClick={handleConfirm}>
+          <Button onClick={handleConfirm}>
             {t('selection.settings.enable.mac_process_trust_hint.button.go_to_settings')}
           </Button>
         </div>
-      }
-      centered
-      destroyOnHidden>
-      <ContentContainer>
-        <Paragraph>
-          <Text>
-            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.0" />
-          </Text>
-        </Paragraph>
-        <Paragraph>
-          <Text>
-            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.1" />
-          </Text>
-        </Paragraph>
-        <Paragraph>
-          <Text>
-            <Trans i18nKey="selection.settings.enable.mac_process_trust_hint.description.2" />
-          </Text>
-        </Paragraph>
-      </ContentContainer>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   )
 }
 
-const ContentContainer = styled.div`
-  padding: 16px 0;
-`
-
 export default MacProcessTrustHintModal
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
index bc6888174d..51c6d99229 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
@@ -1,11 +1,32 @@
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@cherrystudio/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { loggerService } from '@logger'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
-import { Form, Input, Modal, Select } from 'antd'
 import { Globe } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect } from 'react'
+import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import * as z from 'zod'
 
 const logger = loggerService.withContext('SelectionActionSearchModal')
 
@@ -53,25 +74,25 @@ export const DEFAULT_SEARCH_ENGINES: SearchEngineOption[] = [
     label: 'Google',
     value: 'Google',
     searchEngine: 'Google|https://www.google.com/search?q={{queryString}}',
-    icon: <LogoGoogle style={{ fontSize: '14px', color: 'var(--color-text-2)' }} />
+    icon: <LogoGoogle style={{ fontSize: '14px', color: 'var(--color-foreground-secondary)' }} />
   },
   {
     label: 'Baidu',
     value: 'Baidu',
     searchEngine: 'Baidu|https://www.baidu.com/s?wd={{queryString}}',
-    icon: <LogoBaidu style={{ fontSize: '14px', color: 'var(--color-text-2)' }} />
+    icon: <LogoBaidu style={{ fontSize: '14px', color: 'var(--color-foreground-secondary)' }} />
   },
   {
     label: 'Bing',
     value: 'Bing',
     searchEngine: 'Bing|https://www.bing.com/search?q={{queryString}}',
-    icon: <LogoBing style={{ fontSize: '14px', color: 'var(--color-text-2)' }} />
+    icon: <LogoBing style={{ fontSize: '14px', color: 'var(--color-foreground-secondary)' }} />
   },
   {
     label: '',
     value: 'custom',
     searchEngine: '',
-    icon: <Globe size={14} color="var(--color-text-2)" />
+    icon: <Globe size={14} color="var(--color-foreground-secondary)" />
   }
 ]
 
@@ -91,146 +112,183 @@ const SelectionActionSearchModal: FC<SelectionActionSearchModalProps> = ({
   currentAction
 }) => {
   const { t } = useTranslation()
-  const [form] = Form.useForm()
 
-  useEffect(() => {
-    if (isModalOpen && currentAction?.searchEngine) {
-      form.resetFields()
-
-      const [engine, url] = currentAction.searchEngine.split('|')
-      const defaultEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === engine)
-
-      if (defaultEngine) {
-        form.setFieldsValue({
-          engine: defaultEngine.value,
-          customName: '',
-          customUrl: ''
+  const schema = z
+    .object({
+      engine: z.string(),
+      customName: z.string().optional(),
+      customUrl: z.string().optional()
+    })
+    .superRefine((value, ctx) => {
+      if (value.engine !== 'custom') return
+      if (!value.customName || value.customName.trim().length === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['customName'],
+          message: t('selection.settings.search_modal.custom.name.hint')
         })
-      } else {
-        // Handle custom search engine
-        form.setFieldsValue({
-          engine: 'custom',
-          customName: engine,
-          customUrl: url
+      } else if (value.customName.length > 16) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['customName'],
+          message: t('selection.settings.search_modal.custom.name.max_length')
         })
       }
+      const url = value.customUrl ?? ''
+      if (!url || url.trim().length === 0) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['customUrl'],
+          message: t('selection.settings.search_modal.custom.url.required')
+        })
+      } else if (!/^https?:\/\/.+$/.test(url)) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['customUrl'],
+          message: t('selection.settings.search_modal.custom.url.invalid_format')
+        })
+      } else if (!url.includes('{{queryString}}')) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['customUrl'],
+          message: t('selection.settings.search_modal.custom.url.missing_placeholder')
+        })
+      }
+    })
+
+  type FieldType = z.infer<typeof schema>
+
+  const form = useForm<FieldType>({
+    resolver: zodResolver(schema),
+    defaultValues: { engine: 'Google', customName: '', customUrl: '' }
+  })
+
+  useEffect(() => {
+    if (!isModalOpen) return
+    if (currentAction?.searchEngine) {
+      const [engine, url] = currentAction.searchEngine.split('|')
+      const defaultEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === engine)
+      if (defaultEngine) {
+        form.reset({ engine: defaultEngine.value, customName: '', customUrl: '' })
+      } else {
+        form.reset({ engine: 'custom', customName: engine, customUrl: url })
+      }
+    } else {
+      form.reset({ engine: 'Google', customName: '', customUrl: '' })
     }
   }, [isModalOpen, currentAction, form])
 
-  const handleOk = async () => {
-    try {
-      const values = await form.validateFields()
-      const selectedEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === values.engine)
+  const engine = form.watch('engine')
 
+  const handleSubmit = (values: FieldType) => {
+    try {
+      const selectedEngine = DEFAULT_SEARCH_ENGINES.find((e) => e.value === values.engine)
       const searchEngine =
         selectedEngine?.value === 'custom'
           ? `${values.customName}|${values.customUrl}`
           : selectedEngine?.searchEngine || ''
-
       onOk(searchEngine)
     } catch (error) {
-      logger.debug('Validation failed:', error as Error)
+      logger.debug('Submit failed:', error as Error)
     }
   }
 
-  const handleCancel = () => {
-    onCancel()
-  }
-
   const handleTest = () => {
-    const values = form.getFieldsValue()
-    if (values.customUrl) {
-      const testUrl = values.customUrl.replace('{{queryString}}', 'cherry studio')
+    const customUrl = form.getValues('customUrl')
+    if (customUrl) {
+      const testUrl = customUrl.replace('{{queryString}}', 'cherry studio')
       void window.api.openWebsite(testUrl)
     }
   }
 
   return (
-    <Modal
-      title={t('selection.settings.search_modal.title')}
-      open={isModalOpen}
-      onOk={handleOk}
-      onCancel={handleCancel}
-      destroyOnHidden
-      centered>
-      <Form
-        form={form}
-        layout="vertical"
-        initialValues={{
-          engine: 'Google',
-          customName: '',
-          customUrl: ''
-        }}>
-        <Form.Item name="engine" label={t('selection.settings.search_modal.engine.label')}>
-          <Select
-            options={DEFAULT_SEARCH_ENGINES.map((engine) => ({
-              label: (
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  {engine.icon}
-                  <span>{engine.label || t('selection.settings.search_modal.engine.custom')}</span>
-                </div>
-              ),
-              value: engine.value
-            }))}
-            onChange={(value) => {
-              if (value === 'custom') {
-                form.setFieldsValue({
-                  customName: '',
-                  customUrl: EXAMPLE_URL
-                })
-              }
-            }}
-          />
-        </Form.Item>
-
-        <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => prevValues.engine !== currentValues.engine}>
-          {({ getFieldValue }) =>
-            getFieldValue('engine') === 'custom' ? (
-              <>
-                <Form.Item
-                  name="customName"
-                  label={t('selection.settings.search_modal.custom.name.label')}
-                  rules={[
-                    { required: true, message: t('selection.settings.search_modal.custom.name.hint') },
-                    { max: 16, message: t('selection.settings.search_modal.custom.name.max_length') }
-                  ]}>
-                  <Input placeholder={t('selection.settings.search_modal.custom.name.hint')} />
-                </Form.Item>
-
-                <Form.Item
-                  name="customUrl"
-                  label={t('selection.settings.search_modal.custom.url.label')}
-                  tooltip={t('selection.settings.search_modal.custom.url.hint')}
-                  rules={[
-                    { required: true, message: t('selection.settings.search_modal.custom.url.required') },
-                    {
-                      pattern: /^https?:\/\/.+$/,
-                      message: t('selection.settings.search_modal.custom.url.invalid_format')
-                    },
-                    {
-                      validator: (_, value) => {
-                        if (value && !value.includes('{{queryString}}')) {
-                          return Promise.reject(t('selection.settings.search_modal.custom.url.missing_placeholder'))
+    <Dialog open={isModalOpen} onOpenChange={(next) => !next && onCancel()}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>{t('selection.settings.search_modal.title')}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="engine"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('selection.settings.search_modal.engine.label')}</FormLabel>
+                  <FormControl>
+                    <Select
+                      value={field.value}
+                      onValueChange={(value) => {
+                        field.onChange(value)
+                        if (value === 'custom') {
+                          form.setValue('customName', '')
+                          form.setValue('customUrl', EXAMPLE_URL)
                         }
-                        return Promise.resolve()
-                      }
-                    }
-                  ]}>
-                  <Input
-                    placeholder={EXAMPLE_URL}
-                    suffix={
-                      <Button variant="ghost" size="sm" onClick={handleTest} style={{ padding: 0, height: 'auto' }}>
-                        {t('selection.settings.search_modal.custom.test')}
-                      </Button>
-                    }
-                  />
-                </Form.Item>
+                      }}>
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {DEFAULT_SEARCH_ENGINES.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            <div className="flex items-center gap-2">
+                              {option.icon}
+                              <span>{option.label || t('selection.settings.search_modal.engine.custom')}</span>
+                            </div>
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {engine === 'custom' && (
+              <>
+                <FormField
+                  control={form.control}
+                  name="customName"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('selection.settings.search_modal.custom.name.label')}</FormLabel>
+                      <FormControl>
+                        <Input placeholder={t('selection.settings.search_modal.custom.name.hint')} {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="customUrl"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('selection.settings.search_modal.custom.url.label')}</FormLabel>
+                      <FormControl>
+                        <div className="flex gap-2">
+                          <Input placeholder={EXAMPLE_URL} {...field} />
+                          <Button type="button" variant="outline" size="sm" onClick={handleTest}>
+                            {t('selection.settings.search_modal.custom.test')}
+                          </Button>
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </>
-            ) : null
-          }
-        </Form.Item>
-      </Form>
-    </Modal>
+            )}
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={onCancel}>
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit">{t('common.confirm')}</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionUserModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionUserModal.tsx
index 9fba788492..ac67617fa2 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionUserModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionUserModal.tsx
@@ -1,16 +1,33 @@
-import { Tooltip } from '@cherrystudio/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  Tooltip
+} from '@cherrystudio/ui'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import CopyButton from '@renderer/components/CopyButton'
 import { useAssistants, useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { getDefaultModel } from '@renderer/services/AssistantService'
+import { cn } from '@renderer/utils/style'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
-import { Col, Input, Modal, Radio, Row, Select, Space } from 'antd'
 import { CircleHelp, Dices, OctagonX } from 'lucide-react'
 import { DynamicIcon, iconNames } from 'lucide-react/dynamic'
+import type React from 'react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface SelectionActionUserModalProps {
   isModalOpen: boolean
@@ -90,250 +107,235 @@ const SelectionActionUserModal: FC<SelectionActionUserModalProps> = ({
   }
 
   return (
-    <Modal
-      title={
-        editingAction ? t('selection.settings.user_modal.title.edit') : t('selection.settings.user_modal.title.add')
-      }
-      open={isModalOpen}
-      onOk={handleOk}
-      onCancel={onCancel}
-      width={520}>
-      <Space direction="vertical" style={{ width: '100%' }} size="middle">
-        <ModalSection>
-          <div style={{ display: 'flex', flexDirection: 'row' }}>
-            <Col flex="auto" style={{ paddingRight: '16px', width: '70%' }}>
-              <ModalSectionTitle>
-                <ModalSectionTitleLabel>{t('selection.settings.user_modal.name.label')}</ModalSectionTitleLabel>
-              </ModalSectionTitle>
-              <Input
-                placeholder={t('selection.settings.user_modal.name.hint')}
-                value={formData.name || ''}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-                maxLength={16}
-                status={errors.name ? 'error' : ''}
-              />
-              {errors.name && <ErrorText>{errors.name}</ErrorText>}
-            </Col>
-            <Col>
-              <ModalSectionTitle>
-                <ModalSectionTitleLabel>{t('selection.settings.user_modal.icon.label')}</ModalSectionTitleLabel>
-                <Tooltip content={t('selection.settings.user_modal.icon.tooltip')}>
-                  <QuestionIcon size={14} />
-                </Tooltip>
-                <Spacer />
-                <a
-                  href="https://lucide.dev/icons/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ fontSize: '12px', color: 'var(--color-primary)' }}>
-                  {t('selection.settings.user_modal.icon.view_all')}
-                </a>
-                <Tooltip content={t('selection.settings.user_modal.icon.random')}>
-                  <DiceButton
-                    onClick={() => {
-                      const randomIcon = iconNames[Math.floor(Math.random() * iconNames.length)]
-                      handleInputChange('icon', randomIcon)
-                    }}>
-                    <Dices size={14} className="btn-icon" />
-                  </DiceButton>
-                </Tooltip>
-              </ModalSectionTitle>
-              <Space>
+    <Dialog open={isModalOpen} onOpenChange={(next) => !next && onCancel()}>
+      <DialogContent className="sm:max-w-[520px]">
+        <DialogHeader>
+          <DialogTitle>
+            {editingAction
+              ? t('selection.settings.user_modal.title.edit')
+              : t('selection.settings.user_modal.title.add')}
+          </DialogTitle>
+        </DialogHeader>
+        <div className="flex w-full flex-col gap-4">
+          <ModalSection>
+            <div className="flex flex-row">
+              <div className="w-[70%] flex-auto pr-4">
+                <ModalSectionTitle>
+                  <ModalSectionTitleLabel>{t('selection.settings.user_modal.name.label')}</ModalSectionTitleLabel>
+                </ModalSectionTitle>
                 <Input
-                  placeholder={t('selection.settings.user_modal.icon.placeholder')}
-                  value={formData.icon || ''}
-                  onChange={(e) => handleInputChange('icon', e.target.value)}
-                  style={{ width: '100%' }}
-                  status={errors.icon ? 'error' : ''}
+                  placeholder={t('selection.settings.user_modal.name.hint')}
+                  value={formData.name || ''}
+                  onChange={(e) => handleInputChange('name', e.target.value)}
+                  maxLength={16}
+                  aria-invalid={!!errors.name}
                 />
-                <IconPreview>
-                  {formData.icon &&
-                    (iconNames.includes(formData.icon as any) ? (
-                      <DynamicIcon name={formData.icon as any} size={18} />
-                    ) : (
-                      <OctagonX size={18} color="var(--color-error)" />
-                    ))}
-                </IconPreview>
-              </Space>
-              {errors.icon && <ErrorText>{errors.icon}</ErrorText>}
-            </Col>
-          </div>
-        </ModalSection>
-        <ModalSection>
-          <Row>
-            <Col flex="auto" style={{ paddingRight: '16px' }}>
-              <ModalSectionTitle>
-                <ModalSectionTitleLabel>{t('selection.settings.user_modal.model.label')}</ModalSectionTitleLabel>
-                <Tooltip content={t('selection.settings.user_modal.model.tooltip')}>
-                  <QuestionIcon size={14} />
-                </Tooltip>
-              </ModalSectionTitle>
-            </Col>
-            <Radio.Group
-              value={formData.assistantId ? 'assistant' : 'default'}
-              onChange={(e) =>
-                handleInputChange('assistantId', e.target.value === 'default' ? '' : defaultAssistant.id)
-              }
-              buttonStyle="solid">
-              <Radio.Button value="default">{t('selection.settings.user_modal.model.default')}</Radio.Button>
-              <Radio.Button value="assistant">{t('selection.settings.user_modal.model.assistant')}</Radio.Button>
-            </Radio.Group>
-          </Row>
-        </ModalSection>
+                {errors.name && <ErrorText>{errors.name}</ErrorText>}
+              </div>
+              <div>
+                <ModalSectionTitle>
+                  <ModalSectionTitleLabel>{t('selection.settings.user_modal.icon.label')}</ModalSectionTitleLabel>
+                  <Tooltip content={t('selection.settings.user_modal.icon.tooltip')}>
+                    <QuestionIcon size={14} />
+                  </Tooltip>
+                  <Spacer />
+                  <a
+                    href="https://lucide.dev/icons/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-[var(--color-primary)] text-xs">
+                    {t('selection.settings.user_modal.icon.view_all')}
+                  </a>
+                  <Tooltip content={t('selection.settings.user_modal.icon.random')}>
+                    <DiceButton
+                      onClick={() => {
+                        const randomIcon = iconNames[Math.floor(Math.random() * iconNames.length)]
+                        handleInputChange('icon', randomIcon)
+                      }}>
+                      <Dices size={14} className="btn-icon" />
+                    </DiceButton>
+                  </Tooltip>
+                </ModalSectionTitle>
+                <div className="flex gap-2">
+                  <Input
+                    placeholder={t('selection.settings.user_modal.icon.placeholder')}
+                    value={formData.icon || ''}
+                    onChange={(e) => handleInputChange('icon', e.target.value)}
+                    className="w-full"
+                    aria-invalid={!!errors.icon}
+                  />
+                  <IconPreview>
+                    {formData.icon &&
+                      (iconNames.includes(formData.icon as any) ? (
+                        <DynamicIcon name={formData.icon as any} size={18} />
+                      ) : (
+                        <OctagonX size={18} color="var(--color-error-base)" />
+                      ))}
+                  </IconPreview>
+                </div>
+                {errors.icon && <ErrorText>{errors.icon}</ErrorText>}
+              </div>
+            </div>
+          </ModalSection>
+          <ModalSection>
+            <div className="flex">
+              <div className="flex-auto pr-4">
+                <ModalSectionTitle>
+                  <ModalSectionTitleLabel>{t('selection.settings.user_modal.model.label')}</ModalSectionTitleLabel>
+                  <Tooltip content={t('selection.settings.user_modal.model.tooltip')}>
+                    <QuestionIcon size={14} />
+                  </Tooltip>
+                </ModalSectionTitle>
+              </div>
+              <RadioGroup
+                value={formData.assistantId ? 'assistant' : 'default'}
+                onValueChange={(value) =>
+                  handleInputChange('assistantId', value === 'default' ? '' : defaultAssistant.id)
+                }
+                className="flex flex-row gap-4">
+                <label className="flex items-center gap-2 text-sm">
+                  <RadioGroupItem value="default" />
+                  {t('selection.settings.user_modal.model.default')}
+                </label>
+                <label className="flex items-center gap-2 text-sm">
+                  <RadioGroupItem value="assistant" />
+                  {t('selection.settings.user_modal.model.assistant')}
+                </label>
+              </RadioGroup>
+            </div>
+          </ModalSection>
 
-        {formData.assistantId && (
+          {formData.assistantId && (
+            <ModalSection>
+              <ModalSectionTitle>
+                <ModalSectionTitleLabel>{t('selection.settings.user_modal.assistant.label')}</ModalSectionTitleLabel>
+              </ModalSectionTitle>
+              <Select
+                value={formData.assistantId || defaultAssistant.id}
+                onValueChange={(value) => handleInputChange('assistantId', value)}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem key={defaultAssistant.id} value={defaultAssistant.id}>
+                    <AssistantItem>
+                      <ModelAvatar model={defaultAssistant.model || getDefaultModel()} size={18} />
+                      <AssistantName>{defaultAssistant.name}</AssistantName>
+                      <Spacer />
+                      <CurrentTag isCurrent={true}>{t('selection.settings.user_modal.assistant.default')}</CurrentTag>
+                    </AssistantItem>
+                  </SelectItem>
+                  {userPredefinedAssistants
+                    .filter((a) => a.id !== defaultAssistant.id)
+                    .map((a) => (
+                      <SelectItem key={a.id} value={a.id}>
+                        <AssistantItem>
+                          <ModelAvatar model={a.model || getDefaultModel()} size={18} />
+                          <AssistantName>{a.name}</AssistantName>
+                          <Spacer />
+                        </AssistantItem>
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </ModalSection>
+          )}
           <ModalSection>
             <ModalSectionTitle>
-              <ModalSectionTitleLabel>{t('selection.settings.user_modal.assistant.label')}</ModalSectionTitleLabel>
+              <ModalSectionTitleLabel>{t('selection.settings.user_modal.prompt.label')}</ModalSectionTitleLabel>
+              <Tooltip content={t('selection.settings.user_modal.prompt.tooltip')}>
+                <QuestionIcon size={14} />
+              </Tooltip>
+              <Spacer />
+              <div className="flex select-text items-center gap-1 text-[var(--color-foreground-secondary)] text-xs">
+                {t('selection.settings.user_modal.prompt.placeholder_text')} {'{{text}}'}
+                <CopyButton
+                  tooltip={t('selection.settings.user_modal.prompt.copy_placeholder')}
+                  textToCopy="{{text}}"
+                />
+              </div>
             </ModalSectionTitle>
-            <Select
-              value={formData.assistantId || defaultAssistant.id}
-              onChange={(value) => handleInputChange('assistantId', value)}
-              style={{ width: '100%' }}
-              dropdownRender={(menu) => menu}>
-              <Select.Option key={defaultAssistant.id} value={defaultAssistant.id}>
-                <AssistantItem>
-                  <ModelAvatar model={defaultAssistant.model || getDefaultModel()} size={18} />
-                  <AssistantName>{defaultAssistant.name}</AssistantName>
-                  <Spacer />
-                  <CurrentTag isCurrent={true}>{t('selection.settings.user_modal.assistant.default')}</CurrentTag>
-                </AssistantItem>
-              </Select.Option>
-              {userPredefinedAssistants
-                .filter((a) => a.id !== defaultAssistant.id)
-                .map((a) => (
-                  <Select.Option key={a.id} value={a.id}>
-                    <AssistantItem>
-                      <ModelAvatar model={a.model || getDefaultModel()} size={18} />
-                      <AssistantName>{a.name}</AssistantName>
-                      <Spacer />
-                    </AssistantItem>
-                  </Select.Option>
-                ))}
-            </Select>
+            <Textarea.Input
+              placeholder={t('selection.settings.user_modal.prompt.placeholder')}
+              value={formData.prompt || ''}
+              onChange={(e) => handleInputChange('prompt', e.target.value)}
+              rows={4}
+              className="resize-none"
+            />
           </ModalSection>
-        )}
-        <ModalSection>
-          <ModalSectionTitle>
-            <ModalSectionTitleLabel>{t('selection.settings.user_modal.prompt.label')}</ModalSectionTitleLabel>
-            <Tooltip content={t('selection.settings.user_modal.prompt.tooltip')}>
-              <QuestionIcon size={14} />
-            </Tooltip>
-            <Spacer />
-            <div
-              style={{
-                fontSize: '12px',
-                userSelect: 'text',
-                color: 'var(--color-text-2)',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '4px'
-              }}>
-              {t('selection.settings.user_modal.prompt.placeholder_text')} {'{{text}}'}
-              <CopyButton tooltip={t('selection.settings.user_modal.prompt.copy_placeholder')} textToCopy="{{text}}" />
-            </div>
-          </ModalSectionTitle>
-          <Input.TextArea
-            placeholder={t('selection.settings.user_modal.prompt.placeholder')}
-            value={formData.prompt || ''}
-            onChange={(e) => handleInputChange('prompt', e.target.value)}
-            rows={4}
-            style={{ resize: 'none' }}
-          />
-        </ModalSection>
-      </Space>
-    </Modal>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleOk}>{t('common.confirm')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
-const ModalSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 16px;
-`
+const ModalSection = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-4 flex flex-col', className)} {...props} />
+)
 
-const ModalSectionTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-weight: 500;
-  margin-bottom: 8px;
-`
+const ModalSectionTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mb-2 flex items-center gap-1 font-medium', className)} {...props} />
+)
 
-const ModalSectionTitleLabel = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text);
-`
+const ModalSectionTitleLabel = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('font-medium text-foreground text-sm', className)} {...props} />
+)
 
-const QuestionIcon = styled(CircleHelp)`
-  cursor: pointer;
-  color: var(--color-text-3);
-`
+const QuestionIcon = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CircleHelp>) => (
+  <CircleHelp className={cn('cursor-pointer text-foreground-muted', className)} {...props} />
+)
 
-const ErrorText = styled.div`
-  color: var(--color-error);
-  font-size: 12px;
-`
+const ErrorText = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('text-destructive text-xs', className)} {...props} />
+)
 
-const Spacer = styled.div`
-  flex: 1;
-`
+const Spacer = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex-1', className)} {...props} />
+)
 
-const IconPreview = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--color-bg-2);
-  border-radius: 4px;
-  border: 1px solid var(--color-border);
-`
+const IconPreview = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'flex h-8 w-8 items-center justify-center rounded border border-border bg-background-subtle',
+      className
+    )}
+    {...props}
+  />
+)
 
-const AssistantItem = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  height: 28px;
-`
+const AssistantItem = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex h-7 flex-row items-center gap-2', className)} {...props} />
+)
 
-const AssistantName = styled.span`
-  max-width: calc(100% - 60px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
+const AssistantName = ({ className, ...props }: React.ComponentPropsWithoutRef<'span'>) => (
+  <span className={cn('max-w-[calc(100%-60px)] truncate', className)} {...props} />
+)
 
-const CurrentTag = styled.span<{ isCurrent: boolean }>`
-  color: ${(props) => (props.isCurrent ? 'var(--color-primary)' : 'var(--color-text-3)')};
-  font-size: 12px;
-  padding: 2px 4px;
-  border-radius: 4px;
-`
+const CurrentTag = ({
+  isCurrent,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'> & { isCurrent: boolean }) => (
+  <span
+    className={cn('rounded px-1 py-0.5 text-xs', isCurrent ? 'text-primary' : 'text-foreground-muted', className)}
+    {...props}
+  />
+)
 
-const DiceButton = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-left: 4px;
-
-  .btn-icon {
-    color: var(--color-text-2);
-  }
-
-  &:hover {
-    .btn-icon {
-      color: var(--color-primary);
-    }
-  }
-
-  &:active {
-    transform: rotate(720deg);
-  }
-`
+const DiceButton = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'ml-1 flex cursor-pointer items-center justify-center transition-all active:rotate-[720deg] [&_.btn-icon]:text-foreground-secondary hover:[&_.btn-icon]:text-primary',
+      className
+    )}
+    {...props}
+  />
+)
 
 export default SelectionActionUserModal
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionsList.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionsList.tsx
index 5e3e68333c..cac2c4316d 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionsList.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionsList.tsx
@@ -3,9 +3,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar'
 import { DefaultPreferences } from '@shared/data/preference/preferenceSchemas'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
-import { Row } from 'antd'
 import type { FC } from 'react'
-import styled from 'styled-components'
 
 import { SettingDivider, SettingGroup } from '../..'
 import { useActionItems } from '../hooks/useSettingsActionsList'
@@ -63,13 +61,13 @@ const SelectionActionsList: FC<SelectionActionsListProps> = ({ actionItems, setA
 
       <SettingDivider />
 
-      <DemoSection>
+      <div className="my-6 flex items-center justify-center">
         <SelectionToolbar demo />
-      </DemoSection>
+      </div>
 
       <DragDropContext onDragEnd={onDragEnd}>
-        <ActionsListSection>
-          <ActionColumn>
+        <div className="flex flex-col gap-4">
+          <div className="w-full">
             <ActionsList
               droppableId="enabled"
               items={enabledItems}
@@ -89,8 +87,8 @@ const SelectionActionsList: FC<SelectionActionsListProps> = ({ actionItems, setA
               onDelete={handleDeleteActionItem}
               getSearchEngineInfo={getSearchEngineInfo}
             />
-          </ActionColumn>
-        </ActionsListSection>
+          </div>
+        </div>
       </DragDropContext>
 
       <SelectionActionUserModal
@@ -110,20 +108,4 @@ const SelectionActionsList: FC<SelectionActionsListProps> = ({ actionItems, setA
   )
 }
 
-const ActionsListSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`
-
-const ActionColumn = styled.div`
-  width: 100%;
-`
-
-const DemoSection = styled(Row)`
-  align-items: center;
-  justify-content: center;
-  margin: 24px 0;
-`
-
 export default SelectionActionsList
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
index f9cb353c83..745a13e4b8 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
@@ -1,10 +1,8 @@
-import { Button } from '@cherrystudio/ui'
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Textarea } from '@cherrystudio/ui'
 import { isWin } from '@renderer/config/constant'
-import { Form, Input, Modal } from 'antd'
 import type { FC } from 'react'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface SelectionFilterListModalProps {
   open: boolean
@@ -15,69 +13,53 @@ interface SelectionFilterListModalProps {
 
 const SelectionFilterListModal: FC<SelectionFilterListModalProps> = ({ open, onClose, filterList = [], onSave }) => {
   const { t } = useTranslation()
-  const [form] = Form.useForm()
+  const [value, setValue] = useState('')
 
   useEffect(() => {
     if (open) {
-      form.setFieldsValue({
-        filterList: (filterList || []).join('\n')
-      })
+      setValue((filterList || []).join('\n'))
     }
-  }, [open, filterList, form])
+  }, [open, filterList])
 
-  const handleSave = async () => {
-    try {
-      const values = await form.validateFields()
-      const newList = (values.filterList as string)
-        .trim()
-        .toLowerCase()
-        .split('\n')
-        .map((line: string) => line.trim())
-        .filter((line: string) => line.length > 0)
-      onSave([...new Set(newList)])
-      onClose()
-    } catch (error) {
-      // validation failed
-    }
+  const handleSave = () => {
+    const newList = value
+      .trim()
+      .toLowerCase()
+      .split('\n')
+      .map((line) => line.trim())
+      .filter((line) => line.length > 0)
+    onSave([...new Set(newList)])
+    onClose()
   }
 
   return (
-    <Modal
-      title={t('selection.settings.filter_modal.title')}
-      open={open}
-      onCancel={onClose}
-      maskClosable={false}
-      keyboard={true}
-      destroyOnHidden
-      footer={[
-        <Button key="modal-cancel" onClick={onClose}>
-          {t('common.cancel')}
-        </Button>,
-        <Button key="modal-save" color="primary" onClick={handleSave}>
-          {t('common.save')}
-        </Button>
-      ]}>
-      <UserTip>
-        {isWin
-          ? t('selection.settings.filter_modal.user_tips.windows')
-          : t('selection.settings.filter_modal.user_tips.mac')}
-      </UserTip>
-      <Form form={form} layout="vertical" initialValues={{ filterList: '' }}>
-        <Form.Item name="filterList" noStyle>
-          <StyledTextArea autoSize={{ minRows: 6, maxRows: 16 }} spellCheck={false} autoFocus />
-        </Form.Item>
-      </Form>
-    </Modal>
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="sm:max-w-[520px]" onPointerDownOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{t('selection.settings.filter_modal.title')}</DialogTitle>
+        </DialogHeader>
+        <div className="text-sm">
+          {isWin
+            ? t('selection.settings.filter_modal.user_tips.windows')
+            : t('selection.settings.filter_modal.user_tips.mac')}
+        </div>
+        <Textarea.Input
+          className="mt-4 w-full [field-sizing:content]"
+          rows={6}
+          spellCheck={false}
+          autoFocus
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t('common.cancel')}
+          </Button>
+          <Button onClick={handleSave}>{t('common.save')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }
 
-const StyledTextArea = styled(Input.TextArea)`
-  margin-top: 16px;
-  width: 100%;
-`
-
-const UserTip = styled.div`
-  font-size: 14px;
-`
-
 export default SelectionFilterListModal
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
index 83eb73dff9..65cf5e88ba 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
@@ -1,9 +1,7 @@
 import { Button, Tooltip } from '@cherrystudio/ui'
-import { Row } from 'antd'
 import { Plus } from 'lucide-react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 import { SettingTitle } from '../..'
 
@@ -19,13 +17,13 @@ const SettingsActionsListHeader = memo(({ customItemsCount, maxCustomItems, onRe
   const isCustomItemLimitReached = customItemsCount >= maxCustomItems
 
   return (
-    <Row>
+    <div className="flex w-full items-center">
       <SettingTitle>{t('selection.settings.actions.title')}</SettingTitle>
-      <Spacer />
+      <div className="flex-1" />
       <Tooltip content={t('selection.settings.actions.reset.tooltip')}>
-        <ResetButton variant="ghost" onClick={onReset}>
+        <Button variant="ghost" className="mx-2 text-foreground-muted hover:text-primary" onClick={onReset}>
           {t('selection.settings.actions.reset.button')}
-        </ResetButton>
+        </Button>
       </Tooltip>
       <Tooltip
         content={
@@ -33,25 +31,13 @@ const SettingsActionsListHeader = memo(({ customItemsCount, maxCustomItems, onRe
             ? t('selection.settings.actions.add_tooltip.disabled', { max: maxCustomItems })
             : t('selection.settings.actions.add_tooltip.enabled')
         }>
-        <Button onClick={onAdd} disabled={isCustomItemLimitReached} style={{ paddingInline: '8px' }}>
+        <Button variant="outline" onClick={onAdd} disabled={isCustomItemLimitReached} style={{ paddingInline: '8px' }}>
           <Plus size={16} />
           {t('selection.settings.actions.custom')}
         </Button>
       </Tooltip>
-    </Row>
+    </div>
   )
 })
 
-const Spacer = styled.div`
-  flex: 1;
-`
-
-const ResetButton = styled(Button)`
-  margin: 0 8px;
-  color: var(--color-text-3);
-  &:hover {
-    color: var(--color-primary);
-  }
-`
-
 export default SettingsActionsListHeader
diff --git a/src/renderer/src/pages/settings/SettingGroup.tsx b/src/renderer/src/pages/settings/SettingGroup.tsx
index e80024a7b6..cec4cd16d6 100644
--- a/src/renderer/src/pages/settings/SettingGroup.tsx
+++ b/src/renderer/src/pages/settings/SettingGroup.tsx
@@ -1,64 +1,45 @@
+import { cn } from '@renderer/utils'
 import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 import { AnimatePresence, motion } from 'motion/react'
 import { useState } from 'react'
-import styled from 'styled-components'
 
-export const CollapsibleSettingGroup = styled(({ title, children, defaultExpanded = true, extra, ...rest }) => {
+export const CollapsibleSettingGroup = ({
+  title,
+  children,
+  defaultExpanded = true,
+  extra,
+  className,
+  ...rest
+}: React.ComponentPropsWithoutRef<'div'> & {
+  title: React.ReactNode
+  defaultExpanded?: boolean
+  extra?: React.ReactNode
+  theme?: ThemeMode
+}) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded)
 
   return (
-    <SettingGroup {...rest}>
-      <GroupHeader>
-        <div
-          onClick={() => setIsExpanded(!isExpanded)}
-          style={{ display: 'flex', alignItems: 'center', flex: 1, cursor: 'pointer' }}>
+    <div className={cn('mt-0 mb-1 w-full rounded-lg px-1.25', className)} {...rest}>
+      <div className="mb-2.5 flex cursor-pointer select-none items-center border-border border-b-[0.5px] pb-3">
+        <div onClick={() => setIsExpanded(!isExpanded)} className="flex flex-1 cursor-pointer items-center">
           {isExpanded ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
-          <GroupTitle>{title}</GroupTitle>
+          <div className="ml-1 font-medium text-sm">{title}</div>
         </div>
         {extra && <div>{extra}</div>}
-      </GroupHeader>
+      </div>
       <AnimatePresence initial={false}>
         {isExpanded && (
-          <ContentContainer
+          <motion.div
+            className="overflow-hidden"
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
             transition={{ duration: 0.2 }}>
             <div>{children}</div>
-          </ContentContainer>
+          </motion.div>
         )}
       </AnimatePresence>
-    </SettingGroup>
+    </div>
   )
-})`
-  margin-bottom: 4px;
-`
-
-const SettingGroup = styled.div<{ theme?: ThemeMode }>`
-  padding: 0 5px;
-  width: 100%;
-  margin-top: 0;
-  border-radius: 8px;
-`
-
-const GroupHeader = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 8px 0;
-  padding-bottom: 12px;
-  user-select: none;
-  margin-bottom: 10px;
-  border-bottom: 0.5px solid var(--color-border);
-`
-
-const GroupTitle = styled.div`
-  font-weight: 500;
-  margin-left: 4px;
-  font-size: 14px;
-`
-
-const ContentContainer = styled(motion.div)`
-  overflow: hidden;
-`
+}
diff --git a/src/renderer/src/pages/settings/SettingsPage.tsx b/src/renderer/src/pages/settings/SettingsPage.tsx
index 29a2d719b6..c467823cce 100644
--- a/src/renderer/src/pages/settings/SettingsPage.tsx
+++ b/src/renderer/src/pages/settings/SettingsPage.tsx
@@ -1,10 +1,12 @@
 import { MenuDivider, MenuItem, MenuList } from '@cherrystudio/ui'
-import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { McpLogo } from '@renderer/components/Icons'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { isDev } from '@renderer/config/constant'
+import useMacTransparentWindow from '@renderer/hooks/useMacTransparentWindow'
+import { cn } from '@renderer/utils/style'
 import { Outlet, useLocation, useNavigate } from '@tanstack/react-router'
 import {
+  Blocks,
   CalendarClock,
   Cloud,
   Command,
@@ -12,193 +14,187 @@ import {
   FlaskConical,
   HardDrive,
   Info,
-  MonitorCog,
   Package,
+  PackageCheck,
   PictureInPicture2,
   Radio,
   Search,
   Server,
   Settings2,
-  Sparkles,
-  TextCursorInput,
-  Zap
+  TextCursorInput
 } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const SettingsPage: FC = () => {
   const location = useLocation()
   const navigate = useNavigate()
   const { pathname } = location
   const { t } = useTranslation()
+  const isMacTransparentWindow = useMacTransparentWindow()
 
   const isActive = (path: string) => pathname.startsWith(path)
   const go = (path: string) => navigate({ to: path })
+  const menuItemClassName =
+    'h-8 rounded-lg border-transparent px-2.5 font-semibold text-foreground/85 text-sm hover:!bg-muted data-[active=true]:!border-transparent data-[active=true]:!bg-muted data-[active=true]:!text-foreground [&_svg]:size-4 [&_svg]:text-foreground/70'
+  const sectionTitleClassName = 'px-2.5 pt-1.5 pb-1 font-medium text-foreground-muted text-xs first:pt-0'
+  const sectionDividerClassName = 'my-1 bg-transparent'
 
   return (
-    <Container>
-      <Navbar>
-        <NavbarCenter style={{ borderRight: 'none' }}>{t('settings.title')}</NavbarCenter>
-      </Navbar>
-      <ContentContainer id="content-container">
-        <SettingMenus>
-          <MenuList>
-            <MenuItem
-              icon={<Cloud size={18} />}
-              label={t('settings.provider.title')}
-              active={isActive('/settings/provider')}
-              onClick={() => go('/settings/provider')}
-            />
-            <MenuItem
-              icon={<Package size={18} />}
-              label={t('settings.model')}
-              active={isActive('/settings/model')}
-              onClick={() => go('/settings/model')}
-            />
-            <MenuDivider />
-            <MenuItem
-              icon={<Settings2 size={18} />}
-              label={t('settings.general.label')}
-              active={isActive('/settings/general')}
-              onClick={() => go('/settings/general')}
-            />
-            <MenuItem
-              icon={<MonitorCog size={18} />}
-              label={t('settings.display.title')}
-              active={isActive('/settings/display')}
-              onClick={() => go('/settings/display')}
-            />
-            <MenuItem
-              icon={<HardDrive size={18} />}
-              label={t('settings.data.title')}
-              active={isActive('/settings/data')}
-              onClick={() => go('/settings/data')}
-            />
-            <MenuDivider />
-            <MenuItem
-              icon={<McpLogo width={18} height={18} style={{ opacity: 0.8 }} />}
-              label={t('settings.mcp.title')}
-              active={isActive('/settings/mcp')}
-              onClick={() => go('/settings/mcp')}
-            />
-            <MenuItem
-              icon={<Sparkles size={18} />}
-              label={t('settings.skills.title')}
-              active={isActive('/settings/skills')}
-              onClick={() => go('/settings/skills')}
-            />
-            <MenuItem
-              icon={<Search size={18} />}
-              label={t('settings.tool.websearch.title')}
-              active={isActive('/settings/websearch')}
-              onClick={() => go('/settings/websearch')}
-            />
-            <MenuItem
-              icon={<Server size={18} />}
-              label={t('apiServer.title')}
-              active={isActive('/settings/api-server')}
-              onClick={() => go('/settings/api-server')}
-            />
-            <MenuItem
-              icon={<Radio size={18} />}
-              label={t('settings.channels.title')}
-              active={isActive('/settings/channels')}
-              onClick={() => go('/settings/channels')}
-            />
-            <MenuItem
-              icon={<CalendarClock size={18} />}
-              label={t('settings.scheduledTasks.title')}
-              active={isActive('/settings/scheduled-tasks')}
-              onClick={() => go('/settings/scheduled-tasks')}
-            />
-            <MenuItem
-              icon={<FileCode size={18} />}
-              label={t('settings.tool.preprocess.title')}
-              active={isActive('/settings/docprocess')}
-              onClick={() => go('/settings/docprocess')}
-            />
-            <MenuItem
-              icon={<Zap size={18} />}
-              label={t('settings.prompts.title')}
-              active={isActive('/settings/prompts')}
-              onClick={() => go('/settings/prompts')}
-            />
-            <MenuItem
-              icon={<Command size={18} />}
-              label={t('settings.shortcuts.title')}
-              active={isActive('/settings/shortcut')}
-              onClick={() => go('/settings/shortcut')}
-            />
-            <MenuDivider />
-            <MenuItem
-              icon={<PictureInPicture2 size={18} />}
-              label={t('settings.quickAssistant.title')}
-              active={isActive('/settings/quickAssistant')}
-              onClick={() => go('/settings/quickAssistant')}
-            />
-            <MenuItem
-              icon={<TextCursorInput size={18} />}
-              label={t('selection.name')}
-              active={isActive('/settings/selectionAssistant')}
-              onClick={() => go('/settings/selectionAssistant')}
-            />
-            <MenuDivider />
-            <MenuItem
-              icon={<Info size={18} />}
-              label={t('settings.about.label')}
-              active={isActive('/settings/about')}
-              onClick={() => go('/settings/about')}
-            />
-            {isDev && (
+    <div
+      className={cn(
+        'flex min-h-0 flex-1 flex-col',
+        isMacTransparentWindow ? 'bg-transparent' : 'bg-white dark:bg-background'
+      )}>
+      <div className="flex min-h-0 flex-1 flex-row">
+        <div
+          className={cn(
+            'flex min-h-0 w-[200px] min-w-[200px]',
+            isMacTransparentWindow ? 'bg-transparent' : 'bg-white dark:bg-background'
+          )}>
+          <Scrollbar className="flex min-h-0 flex-1 select-none flex-col px-2.5 pt-2.5 pb-2.5">
+            <MenuList className="gap-1">
+              <div className={sectionTitleClassName}>{t('settings.menuGroups.integrations')}</div>
               <MenuItem
-                icon={<FlaskConical size={18} />}
-                label={t('settings.componentLab.label')}
-                active={isActive('/settings/component-lab')}
-                onClick={() => go('/settings/component-lab')}
+                className={menuItemClassName}
+                icon={<Cloud />}
+                label={t('settings.provider.title')}
+                active={isActive('/settings/provider')}
+                onClick={() => go('/settings/provider')}
               />
-            )}
-          </MenuList>
-        </SettingMenus>
-        <SettingContent>
-          <Outlet />
-        </SettingContent>
-      </ContentContainer>
-    </Container>
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Package />}
+                label={t('settings.model')}
+                active={isActive('/settings/model')}
+                onClick={() => go('/settings/model')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Server />}
+                label={t('apiServer.title')}
+                active={isActive('/settings/api-server')}
+                onClick={() => go('/settings/api-server')}
+              />
+              <MenuDivider className={sectionDividerClassName} />
+              <div className={sectionTitleClassName}>{t('settings.menuGroups.services')}</div>
+              <MenuItem
+                className={menuItemClassName}
+                icon={<McpLogo width={16} height={16} className="text-foreground/70" />}
+                label={t('settings.mcp.title')}
+                active={isActive('/settings/mcp')}
+                onClick={() => go('/settings/mcp')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Search />}
+                label={t('settings.tool.websearch.title')}
+                active={isActive('/settings/websearch')}
+                onClick={() => go('/settings/websearch')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<FileCode />}
+                label={t('settings.tool.preprocess.title')}
+                active={isActive('/settings/docprocess')}
+                onClick={() => go('/settings/docprocess')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Blocks />}
+                label={t('settings.integrations.title')}
+                active={isActive('/settings/integrations')}
+                onClick={() => go('/settings/integrations')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<PackageCheck />}
+                label={t('settings.plugins.title')}
+                active={isActive('/settings/plugins')}
+                onClick={() => go('/settings/plugins')}
+              />
+              <MenuDivider className={sectionDividerClassName} />
+              <div className={sectionTitleClassName}>{t('settings.menuGroups.appSettings')}</div>
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Settings2 />}
+                label={t('settings.general.common.title')}
+                active={isActive('/settings/general')}
+                onClick={() => go('/settings/general')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<HardDrive />}
+                label={t('settings.data.title')}
+                active={isActive('/settings/data')}
+                onClick={() => go('/settings/data')}
+              />
+              <MenuDivider className={sectionDividerClassName} />
+              <div className={sectionTitleClassName}>{t('settings.menuGroups.productivity')}</div>
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Radio />}
+                label={t('settings.channels.title')}
+                active={isActive('/settings/channels')}
+                onClick={() => go('/settings/channels')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<CalendarClock />}
+                label={t('settings.scheduledTasks.title')}
+                active={isActive('/settings/scheduled-tasks')}
+                onClick={() => go('/settings/scheduled-tasks')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Command />}
+                label={t('settings.shortcuts.title')}
+                active={isActive('/settings/shortcut')}
+                onClick={() => go('/settings/shortcut')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<PictureInPicture2 />}
+                label={t('settings.quickAssistant.title')}
+                active={isActive('/settings/quickAssistant')}
+                onClick={() => go('/settings/quickAssistant')}
+              />
+              <MenuItem
+                className={menuItemClassName}
+                icon={<TextCursorInput />}
+                label={t('selection.name')}
+                active={isActive('/settings/selectionAssistant')}
+                onClick={() => go('/settings/selectionAssistant')}
+              />
+              <MenuDivider className={sectionDividerClassName} />
+              <div className={sectionTitleClassName}>{t('settings.menuGroups.system')}</div>
+              <MenuItem
+                className={menuItemClassName}
+                icon={<Info />}
+                label={t('settings.about.label')}
+                active={isActive('/settings/about')}
+                onClick={() => go('/settings/about')}
+              />
+              {isDev && (
+                <MenuItem
+                  className={menuItemClassName}
+                  icon={<FlaskConical />}
+                  label={t('settings.componentLab.label')}
+                  active={isActive('/settings/component-lab')}
+                  onClick={() => go('/settings/component-lab')}
+                />
+              )}
+            </MenuList>
+          </Scrollbar>
+        </div>
+        <div className="flex h-full min-h-0 flex-1">
+          <div className="flex min-h-0 flex-1 overflow-hidden border-border/40 border-l bg-white text-foreground dark:bg-background">
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-`
-
-const ContentContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  min-height: 0;
-  height: calc(100vh - var(--navbar-height));
-  padding: 1px 0;
-`
-
-const SettingMenus = styled(Scrollbar)`
-  display: flex;
-  flex-direction: column;
-  min-width: var(--settings-width);
-  min-height: 0;
-  border-right: 0.5px solid var(--color-border);
-  padding: 10px;
-  user-select: none;
-`
-
-const SettingContent = styled.div`
-  display: flex;
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-`
-
 export default SettingsPage
diff --git a/src/renderer/src/pages/settings/ShortcutSettings.tsx b/src/renderer/src/pages/settings/ShortcutSettings.tsx
index 24a3b46bc1..dfee9461c1 100644
--- a/src/renderer/src/pages/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/pages/settings/ShortcutSettings.tsx
@@ -1,11 +1,13 @@
 import { UndoOutlined } from '@ant-design/icons'
-import { Button, Input, RowFlex, Switch, Tooltip } from '@cherrystudio/ui'
+import { Button, Input, Kbd, MenuItem, MenuList, RowFlex, Switch, Tooltip } from '@cherrystudio/ui'
 import { preferenceService } from '@data/PreferenceService'
 import { loggerService } from '@logger'
+import Scrollbar from '@renderer/components/Scrollbar'
 import { isMac } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { getAllShortcutDefaultPreferences, useAllShortcuts } from '@renderer/hooks/useShortcuts'
 import { useTimer } from '@renderer/hooks/useTimer'
+import { cn } from '@renderer/utils/style'
 import type { PreferenceShortcutType } from '@shared/data/preference/preferenceTypes'
 import type { ShortcutPreferenceKey } from '@shared/shortcuts/types'
 import {
@@ -14,11 +16,20 @@ import {
   formatShortcutDisplay,
   isValidShortcut
 } from '@shared/shortcuts/utils'
-import type { FC, KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { Keyboard, MessageSquareText, Search, Sparkles, Tags, Undo2 } from 'lucide-react'
+import type { FC, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '.'
+import {
+  settingsContentBodyClassName,
+  settingsContentHeaderClassName,
+  settingsContentHeaderTitleClassName,
+  settingsContentScrollClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName
+} from '.'
 
 const logger = loggerService.withContext('ShortcutSettings')
 
@@ -46,6 +57,22 @@ const usableEndKeys = (code: string): string | null => {
   return null
 }
 
+type ShortcutCategoryKey = 'general' | 'chat' | 'topic' | 'assistant'
+
+const categoryIconMap: Record<ShortcutCategoryKey, ReactNode> = {
+  general: <Keyboard size={16} />,
+  chat: <MessageSquareText size={16} />,
+  topic: <Tags size={16} />,
+  assistant: <Sparkles size={16} />
+}
+
+const definitionCategoryToCategoryKey = (category: string): ShortcutCategoryKey => {
+  if (category === 'general') return 'general'
+  if (category === 'chat') return 'chat'
+  if (category === 'topic') return 'topic'
+  return 'assistant'
+}
+
 const ShortcutSettings: FC = () => {
   const { t } = useTranslation()
   const { theme } = useTheme()
@@ -56,11 +83,34 @@ const ShortcutSettings: FC = () => {
   const [conflictLabel, setConflictLabel] = useState<string | null>(null)
   const [systemConflictKey, setSystemConflictKey] = useState<ShortcutPreferenceKey | null>(null)
   const [searchQuery, setSearchQuery] = useState('')
+  const [activeCategory, setActiveCategory] = useState<ShortcutCategoryKey>('general')
   const { setTimeoutTimer, clearTimeoutTimer } = useTimer()
 
+  const categoryMeta = useMemo(
+    () => [
+      { key: 'general' as const, label: t('settings.shortcuts.categories.general') },
+      { key: 'chat' as const, label: t('settings.shortcuts.categories.chat') },
+      { key: 'topic' as const, label: t('settings.shortcuts.categories.topic') },
+      { key: 'assistant' as const, label: t('settings.shortcuts.categories.assistant') }
+    ],
+    [t]
+  )
+
+  const shortcutsByCategory = useMemo(() => {
+    return shortcuts.reduce<Record<ShortcutCategoryKey, typeof shortcuts>>(
+      (acc, shortcut) => {
+        acc[definitionCategoryToCategoryKey(shortcut.definition.category)].push(shortcut)
+        return acc
+      },
+      { general: [], chat: [], topic: [], assistant: [] }
+    )
+  }, [shortcuts])
+
+  const currentCategoryShortcuts = shortcutsByCategory[activeCategory]
+
   const visibleShortcuts = useMemo(() => {
-    const query = searchQuery.toLowerCase()
-    return shortcuts.filter((record) => {
+    const query = searchQuery.toLowerCase().trim()
+    return currentCategoryShortcuts.filter((record) => {
       if (!query) return true
       const display =
         record.preference.binding.length > 0
@@ -68,7 +118,7 @@ const ShortcutSettings: FC = () => {
           : ''
       return record.label.toLowerCase().includes(query) || display.includes(query)
     })
-  }, [searchQuery, shortcuts])
+  }, [currentCategoryShortcuts, searchQuery])
 
   const duplicateBindingLabels = useMemo(() => {
     const lookup = new Map<string, { key: ShortcutPreferenceKey; label: string }>()
@@ -115,6 +165,15 @@ const ShortcutSettings: FC = () => {
     })
   }, [t])
 
+  useEffect(() => {
+    if (currentCategoryShortcuts.length === 0) {
+      const firstAvailable = categoryMeta.find((category) => shortcutsByCategory[category.key].length > 0)
+      if (firstAvailable && firstAvailable.key !== activeCategory) {
+        setActiveCategory(firstAvailable.key)
+      }
+    }
+  }, [activeCategory, categoryMeta, currentCategoryShortcuts.length, shortcutsByCategory])
+
   const handleAddShortcut = (key: ShortcutPreferenceKey) => {
     clearEditingState()
     setEditingKey(key)
@@ -170,11 +229,9 @@ const ShortcutSettings: FC = () => {
       keys.push(convertKeyToAccelerator(endKey))
     }
 
-    // Always show real-time preview of pressed keys
     setPendingKeys(keys)
 
     if (!isValidShortcut(keys)) {
-      // Clear conflict when user is still pressing modifier keys
       setConflictLabel(null)
       return
     }
@@ -182,7 +239,6 @@ const ShortcutSettings: FC = () => {
     const duplicate = findDuplicateLabel(keys, record.key)
     if (duplicate) {
       setConflictLabel(duplicate)
-      // Clear conflict hint after 2 seconds
       clearTimeoutTimer('conflict-clear')
       setTimeoutTimer('conflict-clear', () => setConflictLabel(null), 2000)
       return
@@ -216,6 +272,30 @@ const ShortcutSettings: FC = () => {
     })
   }
 
+  const handleToggleVisibleShortcuts = async (enabled: boolean) => {
+    const updates = visibleShortcuts.reduce(
+      (acc, record) => {
+        if (!record.preference.binding.length) return acc
+        acc[record.key] = {
+          binding: record.preference.binding,
+          enabled
+        }
+        return acc
+      },
+      {} as Record<string, PreferenceShortcutType>
+    )
+
+    if (Object.keys(updates).length === 0) return
+
+    try {
+      clearSystemConflict()
+      await preferenceService.setMultiple(updates)
+    } catch (error) {
+      logger.error(`Failed to toggle shortcuts for category ${activeCategory}`, error as Error)
+      window.toast.error(t('settings.shortcuts.save_failed'))
+    }
+  }
+
   const renderShortcutCell = (record: (typeof shortcuts)[number]) => {
     const isEditing = editingKey === record.key
     const displayKeys = record.preference.binding
@@ -236,7 +316,10 @@ const ShortcutSettings: FC = () => {
             ref={(el) => {
               if (el) inputRefs.current[record.key] = el
             }}
-            className={`h-7 w-36 text-center text-xs ${hasConflict ? 'border-red-500 focus-visible:ring-red-500/50' : ''}`}
+            className={cn(
+              'h-8 w-36 rounded-lg border-border/60 bg-background text-center text-sm',
+              hasConflict && 'border-red-500 focus-visible:ring-red-500/50'
+            )}
             value={pendingDisplay}
             placeholder={t('settings.shortcuts.press_shortcut')}
             onKeyDown={(event) => void handleKeyDown(event, record)}
@@ -248,7 +331,7 @@ const ShortcutSettings: FC = () => {
             }}
           />
           {hasConflict && (
-            <span className="absolute top-full right-0 mt-0.5 whitespace-nowrap text-red-500 text-xs">
+            <span className="absolute top-full right-0 mt-1 whitespace-nowrap text-red-500 text-xs">
               {conflictLabel ? t('settings.shortcuts.conflict_with', { name: conflictLabel }) : conflictMessage}
             </span>
           )}
@@ -259,11 +342,11 @@ const ShortcutSettings: FC = () => {
     if (displayShortcut) {
       return (
         <div className="relative flex flex-col items-end">
-          <RowFlex className="items-center justify-end gap-1.5">
+          <RowFlex className="items-center justify-end gap-2">
             {isBindingModified && (
               <Tooltip content={t('settings.shortcuts.reset_to_default')}>
                 <UndoOutlined
-                  className="mr-1 cursor-pointer opacity-50 hover:opacity-100"
+                  className="shortcut-undo-icon cursor-pointer text-muted-foreground opacity-70 transition-opacity hover:opacity-100"
                   onClick={() => {
                     void handleResetShortcut(record)
                   }}
@@ -271,19 +354,26 @@ const ShortcutSettings: FC = () => {
               </Tooltip>
             )}
             <RowFlex
-              className={`items-center gap-1 rounded-lg bg-white/5 px-2 py-1 ${hasSystemConflict ? 'border border-red-500' : ''} ${isEditable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'}`}
+              className={cn(
+                'min-h-9 items-center gap-1 rounded-lg border border-transparent bg-transparent px-2 py-1 transition-colors hover:border-border/60 hover:bg-muted/35',
+                hasSystemConflict && 'border-red-500',
+                isEditable ? 'cursor-pointer hover:bg-accent/60' : 'cursor-not-allowed opacity-50'
+              )}
               onClick={() => isEditable && handleAddShortcut(record.key)}>
               {displayKeys.map((key) => (
-                <kbd
+                <Kbd
                   key={key}
-                  className="flex min-w-6 items-center justify-center rounded-md bg-white/10 px-1.5 py-0.5 text-xs">
+                  className={cn(
+                    'min-w-6 rounded-md border border-border/60 bg-card px-1.5 py-0.75 text-foreground text-xs shadow-none',
+                    hasSystemConflict && 'border-red-500/60 text-red-500'
+                  )}>
                   {formatKeyDisplay(key, isMac)}
-                </kbd>
+                </Kbd>
               ))}
             </RowFlex>
           </RowFlex>
           {hasSystemConflict && (
-            <span className="absolute top-full right-0 mt-0.5 whitespace-nowrap text-red-500 text-xs">
+            <span className="absolute top-full right-0 mt-1 whitespace-nowrap text-red-500 text-xs">
               {conflictMessage}
             </span>
           )}
@@ -294,12 +384,16 @@ const ShortcutSettings: FC = () => {
     return (
       <div className="relative flex flex-col items-end">
         <span
-          className={`rounded-lg bg-white/5 px-3 py-1 text-sm text-white/30 ${hasSystemConflict ? 'border border-red-500' : ''} ${isEditable ? 'cursor-pointer' : 'cursor-not-allowed opacity-50'}`}
+          className={cn(
+            'rounded-lg border border-transparent border-dashed bg-transparent px-2.5 py-1.5 text-muted-foreground text-sm transition-colors hover:border-border/60 hover:bg-muted/30',
+            hasSystemConflict && 'border-red-500 text-red-500',
+            isEditable ? 'cursor-pointer hover:bg-accent/50' : 'cursor-not-allowed opacity-50'
+          )}
           onClick={() => isEditable && handleAddShortcut(record.key)}>
           {t('settings.shortcuts.press_shortcut')}
         </span>
         {hasSystemConflict && (
-          <span className="absolute top-full right-0 mt-0.5 whitespace-nowrap text-red-500 text-xs">
+          <span className="absolute top-full right-0 mt-1 whitespace-nowrap text-red-500 text-xs">
             {conflictMessage}
           </span>
         )}
@@ -325,44 +419,115 @@ const ShortcutSettings: FC = () => {
     return (
       <div
         key={record.key}
-        className={`grid grid-cols-[minmax(0,1fr)_14rem_2.5rem] items-center gap-3 py-3.5 ${isLast ? '' : 'border-white/10 border-b'}`}>
-        <span className="text-sm">{record.label}</span>
-        <div className="flex min-h-8 items-center justify-end">{renderShortcutCell(record)}</div>
-        <span className="flex w-10 justify-end">
+        className={cn(
+          'grid grid-cols-[minmax(0,1fr)_14rem_2.5rem] items-center gap-3 py-2.5',
+          !record.preference.enabled && 'opacity-60',
+          !isLast && 'border-border/50 border-b'
+        )}>
+        <div className="min-w-0 pr-2">
+          <div className="truncate font-medium text-[14px] text-foreground">{record.label}</div>
+        </div>
+        <div className="flex min-h-9 items-center justify-end">{renderShortcutCell(record)}</div>
+        <div className="flex justify-end">
           {!record.preference.binding.length ? (
             <Tooltip content={t('settings.shortcuts.bind_first_to_enable')}>
-              <span className="flex justify-end">{switchNode}</span>
+              <span>{switchNode}</span>
             </Tooltip>
           ) : (
-            <span className="flex justify-end">{switchNode}</span>
+            switchNode
           )}
-        </span>
+        </div>
       </div>
     )
   }
 
   return (
-    <SettingContainer theme={theme}>
-      <SettingGroup theme={theme} style={{ paddingBottom: 0 }}>
-        <SettingTitle>{t('settings.shortcuts.title')}</SettingTitle>
-        <SettingDivider style={{ marginBottom: 0 }} />
-        <div className="py-2">
-          <Input
-            className="max-w-65"
-            placeholder={t('settings.shortcuts.search_placeholder')}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-        </div>
-        <div className="flex flex-col">
-          {visibleShortcuts.map((record, index) => renderShortcutRow(record, index === visibleShortcuts.length - 1))}
-        </div>
-        <SettingDivider style={{ marginBottom: 0 }} />
-        <RowFlex className="justify-end p-4">
-          <Button onClick={handleResetAllShortcuts}>{t('settings.shortcuts.reset_defaults')}</Button>
-        </RowFlex>
-      </SettingGroup>
-    </SettingContainer>
+    <div className="flex flex-1" data-theme-mode={theme}>
+      <div className="flex h-[calc(100vh-var(--navbar-height)-6px)] w-full flex-1 flex-row overflow-hidden">
+        <Scrollbar className={settingsSubmenuScrollClassName}>
+          <MenuList className={settingsSubmenuListClassName}>
+            <div className="px-2.5 pt-1 pb-2 font-medium text-foreground-muted text-xs">
+              {t('settings.shortcuts.title')}
+            </div>
+            {categoryMeta.map((category) => {
+              const count = shortcutsByCategory[category.key].length
+              const isActive = activeCategory === category.key
+
+              return (
+                <MenuItem
+                  key={category.key}
+                  className={settingsSubmenuItemClassName}
+                  icon={categoryIconMap[category.key]}
+                  active={isActive}
+                  label={category.label}
+                  suffix={<span className="shrink-0 text-[11px] text-muted-foreground">{count}</span>}
+                  onClick={() => {
+                    setActiveCategory(category.key)
+                    setSearchQuery('')
+                  }}
+                />
+              )
+            })}
+          </MenuList>
+        </Scrollbar>
+
+        <Scrollbar className={settingsContentScrollClassName}>
+          <div className={settingsContentBodyClassName}>
+            <div className={cn(settingsContentHeaderClassName, 'mb-3 flex items-center justify-between gap-2')}>
+              <h1 className={settingsContentHeaderTitleClassName}>
+                {categoryMeta.find((item) => item.key === activeCategory)?.label}
+              </h1>
+              <div className="flex items-center gap-1">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2.5 text-xs shadow-none"
+                  onClick={() => void handleToggleVisibleShortcuts(true)}>
+                  {t('settings.shortcuts.all_enable')}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 px-2.5 text-xs shadow-none"
+                  onClick={() => void handleToggleVisibleShortcuts(false)}>
+                  {t('settings.shortcuts.all_disable')}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 gap-1.5 px-2.5 text-destructive text-xs shadow-none hover:text-destructive"
+                  onClick={handleResetAllShortcuts}>
+                  <Undo2 size={13} />
+                  {t('settings.shortcuts.reset')}
+                </Button>
+              </div>
+            </div>
+
+            <div className="mb-3">
+              <div className="relative w-full">
+                <Search className="-translate-y-1/2 pointer-events-none absolute top-1/2 left-3 size-4 text-muted-foreground" />
+                <Input
+                  className="h-9 w-full rounded-lg border-border/60 bg-background pr-3 pl-9"
+                  placeholder={t('settings.shortcuts.search_placeholder')}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {visibleShortcuts.length > 0 ? (
+              <div>
+                {visibleShortcuts.map((record, index) =>
+                  renderShortcutRow(record, index === visibleShortcuts.length - 1)
+                )}
+              </div>
+            ) : (
+              <div className="py-10 text-center text-muted-foreground text-sm">{t('settings.shortcuts.empty')}</div>
+            )}
+          </div>
+        </Scrollbar>
+      </div>
+    </div>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/SkillsSettings/SkillsSettings.tsx b/src/renderer/src/pages/settings/SkillsSettings/SkillsSettings.tsx
index 2d81bba245..84251c7ed6 100644
--- a/src/renderer/src/pages/settings/SkillsSettings/SkillsSettings.tsx
+++ b/src/renderer/src/pages/settings/SkillsSettings/SkillsSettings.tsx
@@ -1,26 +1,27 @@
-import { MenuItem, MenuList } from '@cherrystudio/ui'
+import {
+  Badge,
+  Checkbox,
+  ConfirmDialog,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  EmptyState,
+  MenuItem,
+  MenuList,
+  Spinner,
+  Tooltip
+} from '@cherrystudio/ui'
 import { Icon } from '@iconify/react'
 import CodeViewer from '@renderer/components/CodeViewer'
 import RichEditor from '@renderer/components/RichEditor'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useInstalledSkills, useSkillInstall, useSkillSearch } from '@renderer/hooks/useSkills'
 import { getFileIconName } from '@renderer/utils/fileIconName'
+import { cn } from '@renderer/utils/style'
 import type { InstalledSkill, SkillFileNode, SkillSearchResult, SkillSearchSource } from '@types'
-import {
-  Button,
-  Checkbox,
-  Dropdown,
-  Empty,
-  Input,
-  message,
-  Modal,
-  Popconfirm,
-  Spin,
-  Tag,
-  Tooltip,
-  Typography,
-  Upload
-} from 'antd'
+import { Button, Input, message, Modal, Typography, Upload } from 'antd'
 import {
   ArrowLeft,
   ChevronRight,
@@ -34,9 +35,9 @@ import {
   Upload as UploadIcon,
   X
 } from 'lucide-react'
+import type React from 'react'
 import { type FC, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const { Dragger } = Upload
 
@@ -236,6 +237,7 @@ const SkillsSettings: FC = () => {
   // Multi-select state
   const [multiSelectMode, setMultiSelectMode] = useState(false)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set())
+  const [pendingUninstallSkill, setPendingUninstallSkill] = useState<InstalledSkill | null>(null)
 
   // Search tab state
   const [searchTab, setSearchTab] = useState<SkillSearchSource>('claude-plugins.dev')
@@ -389,17 +391,10 @@ const SkillsSettings: FC = () => {
     setSelectedIds(new Set())
   }, [])
 
-  const handleContextMenuUninstall = useCallback(
-    (skill: InstalledSkill) => {
-      if (skill.source === 'builtin') return
-      window.modal.confirm({
-        title: t('settings.skills.confirmUninstall'),
-        centered: true,
-        onOk: () => handleUninstall(skill)
-      })
-    },
-    [handleUninstall, t]
-  )
+  const handleContextMenuUninstall = useCallback((skill: InstalledSkill) => {
+    if (skill.source === 'builtin') return
+    setPendingUninstallSkill(skill)
+  }, [])
 
   const handleDrop = useCallback(
     async (file: File) => {
@@ -559,7 +554,7 @@ const SkillsSettings: FC = () => {
 
                 {loading ? (
                   <SpinContainer>
-                    <Spin size="small" />
+                    <Spinner text={t('common.loading')} />
                   </SpinContainer>
                 ) : filteredSkills.length === 0 ? (
                   <EmptyHint>
@@ -592,31 +587,8 @@ const SkillsSettings: FC = () => {
                       )
                     }
                     return (
-                      <Dropdown
-                        key={skill.id}
-                        trigger={['contextMenu']}
-                        menu={{
-                          items: [
-                            {
-                              key: 'multiSelect',
-                              label: t('settings.skills.multiSelect'),
-                              onClick: () => setMultiSelectMode(true)
-                            },
-                            ...(!isBuiltin
-                              ? [
-                                  { type: 'divider' as const, key: 'div' },
-                                  {
-                                    key: 'uninstall',
-                                    label: t('settings.skills.uninstall'),
-                                    danger: true,
-                                    icon: <Trash2 size={14} />,
-                                    onClick: () => handleContextMenuUninstall(skill)
-                                  }
-                                ]
-                              : [])
-                          ]
-                        }}>
-                        <div>
+                      <ContextMenu key={skill.id}>
+                        <ContextMenuTrigger asChild>
                           <MenuItem
                             label={skill.name}
                             description={skill.description ?? undefined}
@@ -624,10 +596,24 @@ const SkillsSettings: FC = () => {
                             active={selectedSkillId === skill.id}
                             onClick={() => setSelectedSkill(skill)}
                             icon={<Puzzle size={16} />}
-                            className="rounded-xs font-medium"
+                            className="rounded-lg font-medium"
                           />
-                        </div>
-                      </Dropdown>
+                        </ContextMenuTrigger>
+                        <ContextMenuContent>
+                          <ContextMenuItem onSelect={() => setMultiSelectMode(true)}>
+                            {t('settings.skills.multiSelect')}
+                          </ContextMenuItem>
+                          {!isBuiltin ? (
+                            <>
+                              <ContextMenuSeparator />
+                              <ContextMenuItem variant="destructive" onSelect={() => handleContextMenuUninstall(skill)}>
+                                <Trash2 size={14} />
+                                {t('settings.skills.uninstall')}
+                              </ContextMenuItem>
+                            </>
+                          ) : null}
+                        </ContextMenuContent>
+                      </ContextMenu>
                     )
                   })
                 )}
@@ -645,16 +631,20 @@ const SkillsSettings: FC = () => {
             <TopBarRight ref={searchContainerRef}>
               {selectedSkill ? (
                 <DetailMeta>
-                  {selectedSkill.author ? <Tag color="blue">{selectedSkill.author}</Tag> : null}
-                  <Tag>{selectedSkill.source === 'builtin' ? t('settings.skills.builtin') : selectedSkill.source}</Tag>
+                  {selectedSkill.author ? (
+                    <Badge className="border-primary/30 bg-primary/10 text-primary">{selectedSkill.author}</Badge>
+                  ) : null}
+                  <Badge variant="outline">
+                    {selectedSkill.source === 'builtin' ? t('settings.skills.builtin') : selectedSkill.source}
+                  </Badge>
                   {selectedSkill.source !== 'builtin' ? (
-                    <Popconfirm
-                      title={t('settings.skills.confirmUninstall')}
-                      onConfirm={() => handleUninstall(selectedSkill)}
-                      okText={t('common.confirm')}
-                      cancelText={t('common.cancel')}>
-                      <Button type="text" size="small" danger icon={<Trash2 size={14} />} />
-                    </Popconfirm>
+                    <Button
+                      type="text"
+                      size="small"
+                      danger
+                      icon={<Trash2 size={14} />}
+                      onClick={() => setPendingUninstallSkill(selectedSkill)}
+                    />
                   ) : null}
                 </DetailMeta>
               ) : null}
@@ -683,7 +673,7 @@ const SkillsSettings: FC = () => {
                     <SearchResultsScroll>
                       {searching ? (
                         <DropdownLoading>
-                          <Spin size="small" />
+                          <Spinner text={t('common.loading')} className="text-xs" />
                         </DropdownLoading>
                       ) : null}
                       {!searching && searchQuery && filteredResults.length === 0 ? (
@@ -710,7 +700,7 @@ const SkillsSettings: FC = () => {
             {selectedSkill ? (
               loadingContent ? (
                 <SpinContainer>
-                  <Spin />
+                  <Spinner text={t('common.loading')} />
                 </SpinContainer>
               ) : selectedFile && fileContent !== null ? (
                 isMarkdownFile(selectedFile) ? (
@@ -731,7 +721,9 @@ const SkillsSettings: FC = () => {
                 )
               ) : (
                 <EmptyStateContainer>
-                  <Empty
+                  <EmptyState
+                    compact
+                    preset="no-file"
                     description={selectedFile ? t('settings.skills.noSkillFile') : t('settings.skills.selectFile')}
                   />
                 </EmptyStateContainer>
@@ -803,7 +795,7 @@ const SkillsSettings: FC = () => {
                 </MetaItem>
               ) : null}
               <MetaItem>
-                <Tag color="blue">{previewResult.sourceRegistry}</Tag>
+                <Badge className="border-primary/30 bg-primary/10 text-primary">{previewResult.sourceRegistry}</Badge>
               </MetaItem>
               {previewResult.sourceUrl ? (
                 <MetaItem>
@@ -821,452 +813,147 @@ const SkillsSettings: FC = () => {
           </PreviewContent>
         ) : null}
       </Modal>
+      <ConfirmDialog
+        open={pendingUninstallSkill !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setPendingUninstallSkill(null)
+          }
+        }}
+        title={t('settings.skills.confirmUninstall')}
+        confirmText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        destructive
+        onConfirm={async () => {
+          if (pendingUninstallSkill) {
+            await handleUninstall(pendingUninstallSkill)
+            setPendingUninstallSkill(null)
+          }
+        }}
+      />
     </Container>
   )
 }
 
-// ─── Styled Components ───────────────────────────────────────
+type DivProps = React.ComponentPropsWithoutRef<'div'>
+type SpanProps = React.ComponentPropsWithoutRef<'span'>
 
-const Container = styled.div`
-  display: flex;
-  flex: 1;
-`
+const divWithClass =
+  (classes: string) =>
+  ({ ref, className, ...props }: DivProps & { ref?: React.RefObject<HTMLDivElement | null> }) => (
+    <div ref={ref} className={cn(classes, className)} {...props} />
+  )
 
-const MainContainer = styled.div`
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  width: 100%;
-  height: calc(100vh - var(--navbar-height) - 6px);
-  overflow: hidden;
-`
+const spanWithClass =
+  (classes: string) =>
+  ({ className, ...props }: SpanProps) => <span className={cn(classes, className)} {...props} />
 
-const SkillsMenuList = styled(MenuList)`
-  display: flex;
-  flex-direction: column;
-  width: var(--settings-width);
-  min-height: 100%;
-  gap: 5px;
-  padding: 12px;
-  padding-bottom: 48px;
-  box-sizing: border-box;
-`
+const Container = divWithClass('flex flex-1')
+const MainContainer = divWithClass('flex w-full flex-1 flex-row overflow-hidden')
+const SkillsMenuList = ({ className, ...props }: React.ComponentProps<typeof MenuList>) => (
+  <MenuList
+    className={cn(
+      'flex min-h-full w-(--settings-width) flex-col gap-1.25 p-3 pb-12 [box-sizing:border-box]',
+      className
+    )}
+    {...props}
+  />
+)
+const MenuScroll = ({ className, ...props }: React.ComponentProps<typeof Scrollbar>) => (
+  <Scrollbar
+    className={cn(
+      'h-[calc(100vh-var(--navbar-height))] w-(--settings-width) border-border border-r-[0.5px]',
+      className
+    )}
+    {...props}
+  />
+)
+const ListHeader = divWithClass('flex items-center gap-2 pt-1 pb-2')
+const FilterContainer = divWithClass('pb-2')
+const RightContainer = divWithClass('relative flex flex-1 flex-col')
+const TopBar = divWithClass('flex min-h-11 items-center gap-2 border-border border-b-[0.5px] px-4 py-2.5')
+const BackButton = divWithClass(
+  'flex cursor-pointer items-center rounded p-1 text-foreground-secondary hover:bg-accent'
+)
+const TopBarTitle = divWithClass('flex-1 truncate font-medium text-sm')
+const TopBarRight = divWithClass('relative flex items-center gap-2')
+const DetailMeta = divWithClass('flex items-center gap-1.5')
+const SearchInputWrapper = divWithClass('relative w-[280px]')
+const SearchDropdown = divWithClass(
+  'absolute top-full right-0 z-100 mt-1 flex max-h-[400px] w-full flex-col rounded-lg border-border border-[0.5px] bg-background shadow-[0_4px_12px_rgba(0,0,0,0.1)]'
+)
+const SearchTabs = divWithClass('flex shrink-0 border-border border-b-[0.5px]')
+const SearchTab = ({ className, $active, ...props }: DivProps & { $active: boolean }) => (
+  <div
+    className={cn(
+      'flex flex-1 cursor-pointer items-center justify-center gap-1 whitespace-nowrap border-b-2 px-2 py-1.5 text-[11px] transition-all',
+      $active
+        ? 'border-primary text-primary'
+        : 'border-transparent text-foreground-muted hover:text-foreground-secondary',
+      className
+    )}
+    {...props}
+  />
+)
+const TabCount = spanWithClass('min-w-4 rounded-sm bg-accent px-1 text-center text-[10px]')
+const SearchResultsScroll = divWithClass('flex-1 overflow-y-auto')
+const DropdownLoading = divWithClass('flex justify-center p-4')
+const DropdownEmpty = divWithClass('p-4 text-center text-foreground-muted text-xs')
+const SearchResultItem = divWithClass(
+  'flex items-center justify-between gap-2 border-border border-t-[0.5px] px-3 py-2 first:border-t-0 hover:bg-accent'
+)
+const ResultActions = divWithClass('flex shrink-0 items-center gap-1')
+const ExternalLinkButton = divWithClass(
+  'flex cursor-pointer items-center rounded p-1 text-foreground-muted hover:bg-accent hover:text-foreground'
+)
+const ResultInfo = divWithClass('min-w-0 flex-1 cursor-pointer')
+const ResultName = divWithClass('truncate font-medium text-[13px]')
+const ResultMeta = divWithClass('mt-0.5 flex items-center gap-1.5')
+const MetaBadge = spanWithClass('inline-flex items-center gap-0.5 text-[11px] text-foreground-muted')
+const ContentArea = divWithClass('flex-1 overflow-hidden')
+const EmptyStateContainer = divWithClass('flex h-full items-center justify-center')
+const EmptyStateTitle = divWithClass('font-medium text-base text-foreground')
+const EmptyStateDesc = divWithClass('text-[13px] text-foreground-muted leading-1.5')
+const EmptyStateActions = divWithClass('mt-2 flex gap-2')
+const EmptyStateTip = divWithClass('mt-1 text-[11px] text-foreground-muted opacity-70')
+const DropHint = divWithClass('mt-2 text-foreground-muted text-xs')
+const SpinContainer = divWithClass('flex justify-center p-5')
+const EmptyHint = divWithClass('flex flex-col items-center gap-2 px-4 py-10')
+const CheckboxItem = divWithClass('flex cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 hover:bg-accent')
+const CheckboxLabel = ({ className, $disabled, ...props }: SpanProps & { $disabled: boolean }) => (
+  <span className={cn('truncate text-[13px]', $disabled && 'opacity-40', className)} {...props} />
+)
+const EmptyText = divWithClass('text-foreground-muted text-xs')
 
-const MenuScroll = styled(Scrollbar)`
-  width: var(--settings-width);
-  height: calc(100vh - var(--navbar-height));
-  border-right: 0.5px solid var(--color-border);
-`
-
-const ListHeader = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 0 8px;
-`
-
-const FilterContainer = styled.div`
-  padding: 0 0 8px;
-`
-
-const RightContainer = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`
-
-const TopBar = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  border-bottom: 0.5px solid var(--color-border);
-  gap: 8px;
-  min-height: 44px;
-`
-
-const BackButton = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  color: var(--color-text-2);
-  &:hover {
-    background: var(--color-background-soft);
-  }
-`
-
-const TopBarTitle = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const TopBarRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  position: relative;
-`
-
-const DetailMeta = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-`
-
-const SearchInputWrapper = styled.div`
-  position: relative;
-  width: 280px;
-`
-
-const SearchDropdown = styled.div`
-  position: absolute;
-  top: 100%;
-  right: 0;
-  width: 100%;
-  max-height: 400px;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-background);
-  border: 0.5px solid var(--color-border);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 4px;
-  z-index: 100;
-`
-
-const SearchTabs = styled.div`
-  display: flex;
-  border-bottom: 0.5px solid var(--color-border);
-  flex-shrink: 0;
-`
-
-const SearchTab = styled.div<{ $active: boolean }>`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 6px 8px;
-  font-size: 11px;
-  cursor: pointer;
-  color: ${(p) => (p.$active ? 'var(--color-primary)' : 'var(--color-text-3)')};
-  border-bottom: 2px solid ${(p) => (p.$active ? 'var(--color-primary)' : 'transparent')};
-  transition: all 0.15s;
-  white-space: nowrap;
-
-  &:hover {
-    color: ${(p) => (p.$active ? 'var(--color-primary)' : 'var(--color-text-2)')};
-  }
-`
-
-const TabCount = styled.span`
-  font-size: 10px;
-  background: var(--color-background-soft);
-  padding: 0 4px;
-  border-radius: 8px;
-  min-width: 16px;
-  text-align: center;
-`
-
-const SearchResultsScroll = styled.div`
-  flex: 1;
-  overflow-y: auto;
-`
-
-const DropdownLoading = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 16px;
-`
-
-const DropdownEmpty = styled.div`
-  padding: 16px;
-  text-align: center;
-  color: var(--color-text-3);
-  font-size: 12px;
-`
-
-const SearchResultItem = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  gap: 8px;
-  &:hover {
-    background: var(--color-background-soft);
-  }
-  & + & {
-    border-top: 0.5px solid var(--color-border);
-  }
-`
-
-const ResultActions = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-`
-
-const ExternalLinkButton = styled.div`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  color: var(--color-text-3);
-  &:hover {
-    color: var(--color-text);
-    background: var(--color-background-soft);
-  }
-`
-
-const ResultInfo = styled.div`
-  flex: 1;
-  min-width: 0;
-  cursor: pointer;
-`
-
-const ResultName = styled.div`
-  font-size: 13px;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const ResultMeta = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 2px;
-`
-
-const MetaBadge = styled.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  font-size: 11px;
-  color: var(--color-text-3);
-`
-
-const ContentArea = styled.div`
-  flex: 1;
-  overflow: hidden;
-`
-
-const EmptyStateContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-`
-
-const EmptyStateTitle = styled.div`
-  font-size: 16px;
-  font-weight: 500;
-  color: var(--color-text-1);
-`
-
-const EmptyStateDesc = styled.div`
-  font-size: 13px;
-  color: var(--color-text-3);
-  line-height: 1.5;
-`
-
-const EmptyStateActions = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-top: 8px;
-`
-
-const EmptyStateTip = styled.div`
-  font-size: 11px;
-  color: var(--color-text-3);
-  opacity: 0.7;
-  margin-top: 4px;
-`
-
-const DropHint = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin-top: 8px;
-`
-
-const SpinContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding: 20px;
-`
-
-const EmptyHint = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 40px 16px;
-`
-
-const CheckboxItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--color-background-soft);
-  }
-`
-
-const CheckboxLabel = styled.span<{ $disabled: boolean }>`
-  font-size: 13px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  opacity: ${(p) => (p.$disabled ? 0.4 : 1)};
-`
-
-const EmptyText = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-`
-
-// ─── File Tree ──────────────────────────────────────────────
-
-const FileTreeContainer = styled.div`
-  flex: 1;
-  overflow-y: auto;
-`
-
-const FileTreeItem = styled.div<{ $depth: number; $active: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  padding-left: ${(p) => 8 + p.$depth * 16}px;
-  border-radius: 6px;
-  font-size: 12px;
-  cursor: pointer;
-  color: ${(p) => (p.$active ? 'var(--color-text)' : 'var(--color-text-2)')};
-  background: ${(p) => (p.$active ? 'var(--color-background-soft)' : 'transparent')};
-
-  &:hover {
-    background: var(--color-background-soft);
-  }
-`
-
-const FileTreeName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-`
-
-// ─── Content Viewers ────────────────────────────────────────
-
-const MarkdownContainer = styled.div`
-  height: 100%;
-  overflow-y: auto;
-  padding: 0;
-
-  /* Override RichEditor wrapper styles for full-width fit */
-  > div {
-    border: none;
-    border-radius: 0;
-  }
-
-  /* Hide TipTap drag handle and plus button in readonly mode */
-  .drag-handle,
-  .plus-button {
-    display: none !important;
-  }
-`
-
-const CodeViewerContainer = styled.div`
-  height: 100%;
-  overflow-y: auto;
-
-  /* Ensure text is selectable for copy */
-  user-select: text;
-  -webkit-user-select: text;
-`
-
-// ─── Drop Zone ──────────────────────────────────────────────
-
-const DropZoneContainer = styled.div`
-  height: 100%;
-  display: flex;
-  padding-bottom: 2px;
-
-  .ant-upload-wrapper,
-  .ant-upload-drag {
-    height: 100%;
-    display: flex;
-  }
-
-  .ant-upload-wrapper {
-    flex: 1;
-  }
-
-  .ant-upload-drag {
-    flex: 1;
-    background: transparent;
-    border-radius: 0;
-    border: 2px dashed transparent;
-    border-bottom-right-radius: 6px;
-    transition: border-color 0.2s;
-
-    &.ant-upload-drag-hover {
-      border-color: var(--color-primary);
-    }
-  }
-
-  .ant-upload-btn {
-    height: 100% !important;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-  }
-`
-
-const DropZoneContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  max-width: 360px;
-  text-align: center;
-`
-
-// ─── Preview Modal ──────────────────────────────────────────
-
-const PreviewContent = styled.div`
-  p {
-    margin-bottom: 12px;
-    color: var(--color-text-2);
-  }
-`
-
-const PreviewMeta = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-`
-
-const MetaItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 13px;
-  color: var(--color-text-2);
-`
+const FileTreeContainer = divWithClass('flex-1 overflow-y-auto')
+const FileTreeItem = ({
+  className,
+  $depth,
+  $active,
+  style,
+  ...props
+}: DivProps & { $depth: number; $active: boolean }) => (
+  <div
+    className={cn(
+      'flex cursor-pointer items-center gap-1.5 rounded-md py-1 pr-2 text-xs hover:bg-accent',
+      $active ? 'bg-accent text-foreground' : 'text-foreground-secondary',
+      className
+    )}
+    style={{ paddingLeft: 8 + $depth * 16, ...style }}
+    {...props}
+  />
+)
+const FileTreeName = spanWithClass('flex-1 truncate')
+const MarkdownContainer = divWithClass(
+  'h-full overflow-y-auto px-4 pt-4 pb-0 [&_.drag-handle]:hidden! [&_.plus-button]:hidden! [&>div]:rounded-none [&>div]:border-none'
+)
+const CodeViewerContainer = divWithClass('h-full select-text overflow-y-auto px-4 pt-4 pb-0')
+const DropZoneContainer = divWithClass(
+  'flex h-full pb-0.5 [&_.ant-upload-btn]:flex! [&_.ant-upload-btn]:h-full! [&_.ant-upload-btn]:items-center [&_.ant-upload-btn]:justify-center [&_.ant-upload-drag.ant-upload-drag-hover]:border-primary [&_.ant-upload-drag]:flex [&_.ant-upload-drag]:flex-1 [&_.ant-upload-drag]:rounded-none [&_.ant-upload-drag]:rounded-br-md [&_.ant-upload-drag]:border-2 [&_.ant-upload-drag]:border-dashed [&_.ant-upload-drag]:border-transparent [&_.ant-upload-drag]:bg-transparent [&_.ant-upload-drag]:transition-colors [&_.ant-upload-wrapper]:flex [&_.ant-upload-wrapper]:h-full [&_.ant-upload-wrapper]:flex-1'
+)
+const DropZoneContent = divWithClass('flex max-w-[360px] flex-col items-center gap-3 text-center')
+const PreviewContent = divWithClass('[&_p]:mb-3 [&_p]:text-foreground-secondary')
+const PreviewMeta = divWithClass('flex flex-wrap items-center gap-3')
+const MetaItem = divWithClass('flex items-center gap-1 text-[13px] text-foreground-secondary')
 
 export default SkillsSettings
diff --git a/src/renderer/src/pages/settings/TasksSettings.tsx b/src/renderer/src/pages/settings/TasksSettings.tsx
index 3977820d6c..f19c773bdc 100644
--- a/src/renderer/src/pages/settings/TasksSettings.tsx
+++ b/src/renderer/src/pages/settings/TasksSettings.tsx
@@ -1,4 +1,26 @@
-import { PlusOutlined } from '@ant-design/icons'
+import type { ColumnDef } from '@cherrystudio/ui'
+import {
+  Badge,
+  Button,
+  Combobox,
+  ConfirmDialog,
+  DataTable,
+  DateTimePicker,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  Input as UIInput,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Spinner,
+  Textarea,
+  Tooltip
+} from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import ListItem from '@renderer/components/ListItem'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -10,9 +32,20 @@ import { useCreateTask, useDeleteTask, useRunTask, useTaskLogs, useUpdateTask }
 import type { CreateTaskRequest, ScheduledTaskEntity, TaskRunLogEntity, UpdateTaskRequest } from '@renderer/types'
 import type { AgentEntity } from '@renderer/types/agent'
 import { useNavigate } from '@tanstack/react-router'
-import { Alert, Button, DatePicker, Empty, Input, Modal, Popconfirm, Select, Spin, Table, Tag, Tooltip } from 'antd'
-import dayjs from 'dayjs'
-import { CalendarClock, Clock, ExternalLink, History, Maximize2, Pause, Play, Search, Trash2 } from 'lucide-react'
+import {
+  AlertTriangle,
+  CalendarClock,
+  Clock,
+  ExternalLink,
+  History,
+  Maximize2,
+  Pause,
+  Play,
+  Plus,
+  Search,
+  Trash2,
+  X
+} from 'lucide-react'
 import { type FC, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -25,6 +58,12 @@ const logger = loggerService.withContext('TasksSettings')
 type AgentInfo = { id: string; name: string }
 type ChannelInfo = { id: string; name: string; isActive?: boolean; hasActiveChatIds?: boolean }
 
+const parseScheduleDate = (value: string) => {
+  if (!value) return undefined
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? undefined : date
+}
+
 // --------------- Shared channel selector with warnings ---------------
 
 const TaskChannelSelector: FC<{
@@ -41,37 +80,42 @@ const TaskChannelSelector: FC<{
 
   return (
     <>
-      <SettingDivider />
-      <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+      <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
         <SettingRowTitle>{t('agent.cherryClaw.tasks.channels.label')}</SettingRowTitle>
-        <Select
-          mode="multiple"
-          size="small"
+        <Combobox
+          multiple
+          size="default"
           className="w-full"
+          width="100%"
           value={channelIds}
           disabled={disabled}
-          onChange={onChange}
+          onChange={(value) => {
+            if (Array.isArray(value)) {
+              onChange(value)
+            }
+          }}
           placeholder={t('agent.cherryClaw.tasks.channels.placeholder')}
+          searchPlaceholder={t('agent.cherryClaw.tasks.channels.placeholder')}
+          emptyText={t('common.no_results')}
           options={channels.map((ch) => ({
             value: ch.id,
-            label: (
-              <span className="flex items-center gap-1.5">
-                <span
-                  className={`inline-block h-1.5 w-1.5 rounded-full ${ch.isActive ? 'bg-green-500' : 'bg-gray-400'}`}
-                />
-                {ch.name}
-              </span>
-            )
+            label: ch.name,
+            isActive: ch.isActive
           }))}
+          renderOption={(option) => (
+            <span className="flex min-w-0 items-center gap-2">
+              <span
+                className={`inline-block h-1.5 w-1.5 rounded-full ${option.isActive ? 'bg-green-500' : 'bg-gray-400'}`}
+              />
+              <span className="truncate">{option.label}</span>
+            </span>
+          )}
         />
         {hasNoChatIds && (
-          <Alert
-            type="warning"
-            showIcon
-            message={t('agent.cherryClaw.tasks.channels.noActiveChatIds')}
-            className="mt-2"
-            style={{ fontSize: 12 }}
-          />
+          <div className="mt-2 inline-flex items-start gap-2 rounded-lg border border-warning/25 bg-warning/8 px-3 py-2 text-warning text-xs">
+            <AlertTriangle className="mt-0.5 size-3.5 shrink-0" />
+            <span>{t('agent.cherryClaw.tasks.channels.noActiveChatIds')}</span>
+          </div>
         )}
       </SettingRow>
     </>
@@ -93,7 +137,6 @@ const TaskDetail: FC<{
   const { theme } = useTheme()
 
   const isCompleted = task.status === 'completed'
-  const statusColors: Record<string, string> = { active: 'green', paused: 'orange', completed: 'blue' }
   const statusLabels: Record<string, string> = {
     active: t('agent.cherryClaw.tasks.status.active'),
     paused: t('agent.cherryClaw.tasks.status.paused'),
@@ -109,6 +152,7 @@ const TaskDetail: FC<{
   const [name, setName] = useState(task.name)
   const [prompt, setPrompt] = useState(task.prompt)
   const [promptModalOpen, setPromptModalOpen] = useState(false)
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false)
   const [agentId, setAgentId] = useState(task.agentId)
   const [scheduleType, setScheduleType] = useState(task.scheduleType)
   const [scheduleValue, setScheduleValue] = useState(task.scheduleValue)
@@ -132,6 +176,16 @@ const TaskDetail: FC<{
     [task.id, onUpdate]
   )
 
+  const handlePromptModalOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open && prompt.trim() && prompt !== task.prompt) {
+        saveField({ prompt: prompt.trim() })
+      }
+      setPromptModalOpen(open)
+    },
+    [prompt, saveField, task.prompt]
+  )
+
   const formatDateTime = (iso: string | null | undefined) => {
     if (!iso) return '-'
     const d = new Date(iso)
@@ -163,54 +217,47 @@ const TaskDetail: FC<{
       <SettingGroup theme={theme}>
         <SettingTitle>
           <div className="flex items-center gap-2">
-            <Tag color={statusColors[task.status] ?? 'default'}>{statusLabels[task.status] ?? task.status}</Tag>
-            <span className="text-(--color-text-3) text-xs">{agentName}</span>
+            <Badge className={badgeColorClass(task.status)}>{statusLabels[task.status] ?? task.status}</Badge>
+            <span className="text-(--color-foreground-muted) text-xs">{agentName}</span>
           </div>
           <div className="flex items-center gap-1">
             {!isCompleted && (
-              <Button
-                size="small"
-                icon={<Play size={14} />}
-                onClick={() => onRun(task.id)}
-                title={t('agent.cherryClaw.tasks.run')}
-              />
+              <Button size="icon-sm" onClick={() => onRun(task.id)} title={t('agent.cherryClaw.tasks.run')}>
+                <Play size={14} />
+              </Button>
             )}
             {!isCompleted && (
               <Button
-                size="small"
-                icon={<Pause size={14} />}
+                size="icon-sm"
                 onClick={() => onToggleStatus(task.id, task.status === 'active' ? 'paused' : 'active')}
                 title={
                   task.status === 'active' ? t('agent.cherryClaw.tasks.pause') : t('agent.cherryClaw.tasks.resume')
-                }
-              />
+                }>
+                <Pause size={14} />
+              </Button>
             )}
-            <Popconfirm
-              title={t('agent.cherryClaw.tasks.delete.confirm')}
-              onConfirm={() => onDelete(task.id)}
-              okText={t('agent.cherryClaw.tasks.delete.label')}
-              cancelText={t('agent.cherryClaw.tasks.cancel')}>
-              <Button size="small" danger icon={<Trash2 size={14} />} />
-            </Popconfirm>
+            <Button size="icon-sm" variant="destructive" onClick={() => setDeleteConfirmOpen(true)}>
+              <Trash2 size={14} />
+            </Button>
           </div>
         </SettingTitle>
         <SettingDivider />
         <div className="flex flex-wrap items-center gap-3 text-xs">
-          <Tag color={scheduleTypeColors[task.scheduleType] ?? 'default'}>
+          <Badge className={badgeColorClass(task.scheduleType)}>
             {scheduleTypeLabels[task.scheduleType] ?? task.scheduleType}
-          </Tag>
-          <span className="inline-flex items-center gap-1 text-(--color-text-3)">
+          </Badge>
+          <span className="inline-flex items-center gap-1 text-(--color-foreground-muted)">
             <Clock size={12} />
             {formatScheduleValue()}
           </span>
           {task.lastRun && (
-            <span className="inline-flex items-center gap-1 text-(--color-text-3)">
+            <span className="inline-flex items-center gap-1 text-(--color-foreground-muted)">
               <History size={12} />
               {t('agent.cherryClaw.tasks.lastRun')}: {formatDateTime(task.lastRun)}
             </span>
           )}
           {task.nextRun && (
-            <span className="inline-flex items-center gap-1 text-(--color-text-3)">
+            <span className="inline-flex items-center gap-1 text-(--color-foreground-muted)">
               <CalendarClock size={12} />
               {t('agent.cherryClaw.tasks.nextRun')}: {formatDateTime(task.nextRun)}
             </span>
@@ -222,158 +269,172 @@ const TaskDetail: FC<{
       <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.general.title')}</SettingTitle>
         <SettingDivider />
-        <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-          <SettingRowTitle>{t('agent.cherryClaw.tasks.name.label')}</SettingRowTitle>
-          <Input
-            size="small"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            onBlur={() => name.trim() && name !== task.name && saveField({ name: name.trim() })}
-            disabled={isCompleted}
-          />
-        </SettingRow>
-        <SettingDivider />
-        {agents.length > 1 && (
-          <>
-            <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-              <SettingRowTitle>{t('agent.cherryClaw.channels.bindAgent')}</SettingRowTitle>
-              <Select
-                size="small"
-                className="w-full"
-                value={agentId}
-                disabled={isCompleted}
-                onChange={(value) => {
-                  setAgentId(value)
-                  saveField({ agentId: value })
-                }}
-                options={agents.map((a) => ({ value: a.id, label: a.name }))}
-              />
-            </SettingRow>
-            <SettingDivider />
-          </>
-        )}
-        <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-          <div className="flex items-center justify-between">
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.prompt.label')}</SettingRowTitle>
-            {!isCompleted && (
-              <Tooltip title={t('agent.cherryClaw.tasks.prompt.expand')}>
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<Maximize2 size={13} />}
-                  onClick={() => setPromptModalOpen(true)}
-                />
-              </Tooltip>
-            )}
-          </div>
-          <Input.TextArea
-            size="small"
-            autoSize={{ minRows: 3, maxRows: 8 }}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            onBlur={() => prompt.trim() && prompt !== task.prompt && saveField({ prompt: prompt.trim() })}
-            disabled={isCompleted}
-          />
-        </SettingRow>
-        <SettingDivider />
-        <div className="grid grid-cols-3 gap-3">
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleType.label')}</SettingRowTitle>
-            <Select
-              size="small"
-              className="w-full"
-              value={scheduleType}
+        <div className="space-y-5">
+          <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+            <SettingRowTitle>{t('agent.cherryClaw.tasks.name.label')}</SettingRowTitle>
+            <UIInput
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onBlur={() => name.trim() && name !== task.name && saveField({ name: name.trim() })}
               disabled={isCompleted}
-              onChange={(value) => {
-                setScheduleType(value)
-                setScheduleValue('')
-                saveField({ scheduleType: value, scheduleValue: '' })
-              }}
-              options={[
-                { value: 'cron', label: t('agent.cherryClaw.tasks.scheduleType.cron') },
-                { value: 'interval', label: t('agent.cherryClaw.tasks.scheduleType.interval') },
-                { value: 'once', label: t('agent.cherryClaw.tasks.scheduleType.once') }
-              ]}
             />
-          </div>
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleValue')}</SettingRowTitle>
-            {scheduleType === 'cron' && (
-              <Input
-                size="small"
-                value={scheduleValue}
-                onChange={(e) => setScheduleValue(e.target.value)}
-                onBlur={() =>
-                  scheduleValue.trim() &&
-                  scheduleValue !== task.scheduleValue &&
-                  saveField({ scheduleValue: scheduleValue.trim() })
-                }
-                placeholder={t('agent.cherryClaw.tasks.cronPlaceholder')}
+          </SettingRow>
+          {agents.length > 1 && (
+            <>
+              <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+                <SettingRowTitle>{t('agent.cherryClaw.channels.bindAgent')}</SettingRowTitle>
+                <Select
+                  value={agentId}
+                  disabled={isCompleted}
+                  onValueChange={(value) => {
+                    setAgentId(value)
+                    saveField({ agentId: value })
+                  }}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {agents.map((a) => (
+                      <SelectItem key={a.id} value={a.id}>
+                        {a.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </SettingRow>
+            </>
+          )}
+          <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+            <div className="flex items-center justify-between">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.prompt.label')}</SettingRowTitle>
+              {!isCompleted && (
+                <Tooltip title={t('agent.cherryClaw.tasks.prompt.expand')}>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    className="shadow-none"
+                    onClick={() => setPromptModalOpen(true)}>
+                    <Maximize2 size={13} />
+                  </Button>
+                </Tooltip>
+              )}
+            </div>
+            <Textarea.Input
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onBlur={() => prompt.trim() && prompt !== task.prompt && saveField({ prompt: prompt.trim() })}
+              disabled={isCompleted}
+              rows={4}
+              className="min-h-[88px] resize-y px-3 py-2"
+            />
+          </SettingRow>
+          <div className="grid grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleType.label')}</SettingRowTitle>
+              <Select
+                value={scheduleType}
                 disabled={isCompleted}
-              />
-            )}
-            {scheduleType === 'interval' && (
-              <Input
-                size="small"
-                type="number"
-                min={1}
-                value={scheduleValue}
-                onChange={(e) => setScheduleValue(e.target.value)}
-                onBlur={() =>
-                  scheduleValue.trim() &&
-                  scheduleValue !== task.scheduleValue &&
-                  saveField({ scheduleValue: scheduleValue.trim() })
-                }
-                placeholder={t('agent.cherryClaw.tasks.intervalPlaceholder')}
-                suffix={t('agent.cherryClaw.tasks.intervalUnit')}
-                disabled={isCompleted}
-              />
-            )}
-            {scheduleType === 'once' && (
-              <DatePicker
-                size="small"
-                showTime
-                className="w-full"
-                value={scheduleValue ? dayjs(scheduleValue) : null}
-                onChange={(val) => {
-                  if (val) {
-                    const iso = val.toISOString()
+                onValueChange={(value: 'cron' | 'interval' | 'once') => {
+                  setScheduleType(value)
+                  setScheduleValue('')
+                  saveField({ scheduleType: value, scheduleValue: '' })
+                }}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="cron">{t('agent.cherryClaw.tasks.scheduleType.cron')}</SelectItem>
+                  <SelectItem value="interval">{t('agent.cherryClaw.tasks.scheduleType.interval')}</SelectItem>
+                  <SelectItem value="once">{t('agent.cherryClaw.tasks.scheduleType.once')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleValue')}</SettingRowTitle>
+              {scheduleType === 'cron' && (
+                <UIInput
+                  value={scheduleValue}
+                  onChange={(e) => setScheduleValue(e.target.value)}
+                  onBlur={() =>
+                    scheduleValue.trim() &&
+                    scheduleValue !== task.scheduleValue &&
+                    saveField({ scheduleValue: scheduleValue.trim() })
+                  }
+                  placeholder={t('agent.cherryClaw.tasks.cronPlaceholder')}
+                  disabled={isCompleted}
+                />
+              )}
+              {scheduleType === 'interval' && (
+                <div className="relative">
+                  <UIInput
+                    type="number"
+                    min={1}
+                    value={scheduleValue}
+                    onChange={(e) => setScheduleValue(e.target.value)}
+                    onBlur={() =>
+                      scheduleValue.trim() &&
+                      scheduleValue !== task.scheduleValue &&
+                      saveField({ scheduleValue: scheduleValue.trim() })
+                    }
+                    placeholder={t('agent.cherryClaw.tasks.intervalPlaceholder')}
+                    disabled={isCompleted}
+                    className="pr-10"
+                  />
+                  <span className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-muted-foreground text-xs">
+                    {t('agent.cherryClaw.tasks.intervalUnit')}
+                  </span>
+                </div>
+              )}
+              {scheduleType === 'once' && (
+                <DateTimePicker
+                  value={parseScheduleDate(scheduleValue)}
+                  granularity="second"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  placeholder={t('agent.cherryClaw.tasks.oncePlaceholder')}
+                  triggerClassName="w-full"
+                  onChange={(date) => {
+                    if (!date) return
+                    const iso = date.toISOString()
                     setScheduleValue(iso)
                     saveField({ scheduleValue: iso })
-                  }
-                }}
-                disabled={isCompleted}
-              />
-            )}
-          </div>
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.timeout.label')}</SettingRowTitle>
-            <Input
-              size="small"
-              type="number"
-              min={1}
-              value={timeoutMinutes}
-              onChange={(e) => setTimeoutMinutes(e.target.value)}
-              onBlur={() => {
-                const val = timeoutMinutes.trim() ? parseInt(timeoutMinutes, 10) : null
-                const prev = task.timeoutMinutes ?? null
-                if (val !== prev) saveField({ timeoutMinutes: val })
-              }}
-              placeholder={t('agent.cherryClaw.tasks.timeout.placeholder')}
-              suffix={t('agent.cherryClaw.tasks.intervalUnit')}
-              disabled={isCompleted}
-            />
+                  }}
+                  disabled={isCompleted}
+                />
+              )}
+            </div>
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.timeout.label')}</SettingRowTitle>
+              <div className="relative">
+                <UIInput
+                  type="number"
+                  min={1}
+                  value={timeoutMinutes}
+                  onChange={(e) => setTimeoutMinutes(e.target.value)}
+                  onBlur={() => {
+                    const val = timeoutMinutes.trim() ? parseInt(timeoutMinutes, 10) : null
+                    const prev = task.timeoutMinutes ?? null
+                    if (val !== prev) saveField({ timeoutMinutes: val })
+                  }}
+                  placeholder={t('agent.cherryClaw.tasks.timeout.placeholder')}
+                  disabled={isCompleted}
+                  className="pr-10"
+                />
+                <span className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-muted-foreground text-xs">
+                  {t('agent.cherryClaw.tasks.intervalUnit')}
+                </span>
+              </div>
+            </div>
           </div>
+          <TaskChannelSelector
+            channels={channels}
+            channelIds={channelIds}
+            onChange={(value) => {
+              setChannelIds(value)
+              saveField({ channelIds: value })
+            }}
+            disabled={isCompleted}
+          />
         </div>
-        <TaskChannelSelector
-          channels={channels}
-          channelIds={channelIds}
-          onChange={(value) => {
-            setChannelIds(value)
-            saveField({ channelIds: value })
-          }}
-          disabled={isCompleted}
-        />
       </SettingGroup>
 
       {/* Logs card */}
@@ -383,25 +444,30 @@ const TaskDetail: FC<{
         <TaskLogsInline taskId={task.id} agentId={task.agentId} />
       </SettingGroup>
 
-      <Modal
-        title={t('agent.cherryClaw.tasks.prompt.label')}
-        open={promptModalOpen}
-        onCancel={() => {
-          if (prompt.trim() && prompt !== task.prompt) {
-            saveField({ prompt: prompt.trim() })
-          }
-          setPromptModalOpen(false)
-        }}
-        footer={null}
-        width={640}>
-        <Input.TextArea
-          autoSize={{ minRows: 12, maxRows: 30 }}
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
-          disabled={isCompleted}
-          style={{ marginTop: 8 }}
-        />
-      </Modal>
+      <Dialog open={promptModalOpen} onOpenChange={handlePromptModalOpenChange}>
+        <DialogContent className="sm:max-w-[640px]">
+          <DialogHeader>
+            <DialogTitle>{t('agent.cherryClaw.tasks.prompt.label')}</DialogTitle>
+          </DialogHeader>
+          <Textarea.Input
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            disabled={isCompleted}
+            rows={14}
+            className="min-h-[280px] resize-y px-3 py-2"
+          />
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        title={t('agent.cherryClaw.tasks.delete.confirm')}
+        confirmText={t('agent.cherryClaw.tasks.delete.label')}
+        cancelText={t('agent.cherryClaw.tasks.cancel')}
+        destructive
+        onConfirm={() => onDelete(task.id)}
+      />
     </SettingContainer>
   )
 }
@@ -437,119 +503,131 @@ const TaskLogsInline: FC<{ taskId: string; agentId: string }> = ({ taskId, agent
     [agentId, navigate]
   )
 
-  const columns = [
-    {
-      title: t('agent.cherryClaw.tasks.logs.runAt'),
-      dataIndex: 'runAt',
-      key: 'runAt',
-      width: 160,
-      render: (val: string) =>
-        new Date(val).toLocaleString(undefined, {
-          month: 'numeric',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false
-        })
-    },
-    {
-      title: t('agent.cherryClaw.tasks.logs.duration'),
-      dataIndex: 'durationMs',
-      key: 'durationMs',
-      width: 80,
-      render: (val: number, record: TaskRunLogEntity) => {
-        if (record.status === 'running') return '-'
-        if (val < 1000) return `${val}ms`
-        if (val < 60_000) return `${(val / 1000).toFixed(1)}s`
-        return `${(val / 60_000).toFixed(1)}m`
-      }
-    },
-    {
-      title: t('agent.cherryClaw.tasks.logs.status'),
-      dataIndex: 'status',
-      key: 'status',
-      width: 70,
-      render: (val: string) => {
-        const color = val === 'success' ? 'green' : val === 'running' ? 'processing' : 'red'
-        const logStatusLabels: Record<string, string> = {
-          success: t('agent.cherryClaw.tasks.logs.success'),
-          running: t('agent.cherryClaw.tasks.logs.running'),
-          error: t('agent.cherryClaw.tasks.logs.error')
-        }
-        return <Tag color={color}>{logStatusLabels[val] ?? val}</Tag>
-      }
-    },
-    {
-      title: t('agent.cherryClaw.tasks.logs.result'),
-      dataIndex: 'result',
-      key: 'result',
-      ellipsis: true,
-      render: (val: string | null, record: TaskRunLogEntity) => {
-        const text =
-          record.status === 'running'
-            ? t('agent.cherryClaw.tasks.logs.running', 'Running...')
-            : record.status === 'error'
-              ? record.error
-              : (val ?? '-')
-        const hasSession = !!record.sessionId
+  const columns = useMemo<ColumnDef<TaskRunLogEntity>[]>(
+    () => [
+      {
+        accessorKey: 'runAt',
+        header: t('agent.cherryClaw.tasks.logs.runAt'),
+        meta: { width: 160 },
+        cell: ({ getValue }) =>
+          new Date(getValue() as string).toLocaleString(undefined, {
+            month: 'numeric',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false
+          })
+      },
+      {
+        accessorKey: 'durationMs',
+        header: t('agent.cherryClaw.tasks.logs.duration'),
+        meta: { width: 80 },
+        cell: ({ getValue, row }) => {
+          const val = getValue() as number
 
-        return (
-          <div className="flex items-center gap-1">
-            <span
-              className={record.status === 'error' ? 'text-red-500' : ''}
-              style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {text}
-            </span>
-            {hasSession && (
-              <Tooltip title={t('agent.cherryClaw.tasks.logs.viewSession', 'View session')}>
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<ExternalLink size={12} />}
-                  style={{ flexShrink: 0 }}
-                  onClick={() => navigateToSession(record.sessionId!)}
-                />
-              </Tooltip>
-            )}
-          </div>
-        )
+          if (row.original.status === 'running') return '-'
+          if (val < 1000) return `${val}ms`
+          if (val < 60_000) return `${(val / 1000).toFixed(1)}s`
+          return `${(val / 60_000).toFixed(1)}m`
+        }
+      },
+      {
+        accessorKey: 'status',
+        header: t('agent.cherryClaw.tasks.logs.status'),
+        meta: { width: 80 },
+        cell: ({ getValue }) => {
+          const val = getValue() as string
+          const logStatusLabels: Record<string, string> = {
+            success: t('agent.cherryClaw.tasks.logs.success'),
+            running: t('agent.cherryClaw.tasks.logs.running'),
+            error: t('agent.cherryClaw.tasks.logs.error')
+          }
+          return <Badge className={badgeColorClass(val)}>{logStatusLabels[val] ?? val}</Badge>
+        }
+      },
+      {
+        id: 'result',
+        header: t('agent.cherryClaw.tasks.logs.result'),
+        meta: { width: 'calc(100% - 320px)', className: 'min-w-0' },
+        cell: ({ row }) => {
+          const record = row.original
+          const val = record.result
+          const text =
+            record.status === 'running'
+              ? t('agent.cherryClaw.tasks.logs.running', 'Running...')
+              : record.status === 'error'
+                ? record.error
+                : (val ?? '-')
+          const sessionId = record.sessionId
+
+          return (
+            <div className="flex items-center gap-1">
+              <span
+                className={record.status === 'error' ? 'text-red-500' : ''}
+                style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {text}
+              </span>
+              {sessionId && (
+                <Tooltip title={t('agent.cherryClaw.tasks.logs.viewSession', 'View session')}>
+                  <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    className="shrink-0"
+                    onClick={() => navigateToSession(sessionId)}>
+                    <ExternalLink size={12} />
+                  </Button>
+                </Tooltip>
+              )}
+            </div>
+          )
+        }
       }
-    }
-  ]
+    ],
+    [navigateToSession, t]
+  )
 
   if (isLoading) {
     return (
       <div className="flex justify-center py-4">
-        <Spin size="small" />
+        <Spinner text={t('common.loading')} />
       </div>
     )
   }
 
   if (logsError) {
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('agent.cherryClaw.tasks.logs.loadError')} />
+    return <EmptyState compact preset="no-result" description={t('agent.cherryClaw.tasks.logs.loadError')} />
   }
 
   if (logs.length === 0) {
-    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={t('agent.cherryClaw.tasks.logs.empty')} />
+    return <EmptyState compact preset="no-result" description={t('agent.cherryClaw.tasks.logs.empty')} />
   }
 
   return (
     <div className="flex flex-col gap-2">
-      <Input
-        size="small"
-        prefix={<Search size={12} className="text-(--color-text-3)" />}
-        placeholder={t('agent.cherryClaw.tasks.logs.search', 'Search logs...')}
-        value={searchText}
-        onChange={(e) => setSearchText(e.target.value)}
-        allowClear
-      />
-      <Table
-        dataSource={filteredLogs}
+      <div className="relative">
+        <Search className="-translate-y-1/2 absolute top-1/2 left-2.5 size-3 text-muted-foreground" />
+        <UIInput
+          placeholder={t('agent.cherryClaw.tasks.logs.search', 'Search logs...')}
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          className="h-8 pr-8 pl-7 text-xs"
+        />
+        {searchText && (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="-translate-y-1/2 absolute top-1/2 right-1 size-6 text-muted-foreground shadow-none"
+            onClick={() => setSearchText('')}>
+            <X size={12} />
+          </Button>
+        )}
+      </div>
+      <DataTable
+        data={filteredLogs}
         columns={columns}
         rowKey="id"
-        size="small"
-        pagination={false}
-        scroll={{ y: 300 }}
+        maxHeight={300}
+        emptyText={t('agent.cherryClaw.tasks.logs.empty')}
       />
     </div>
   )
@@ -563,6 +641,30 @@ const scheduleTypeColors: Record<string, string> = {
   once: 'orange'
 }
 
+const badgeColorClass = (value: string) => {
+  const color = scheduleTypeColors[value] ?? value
+  switch (color) {
+    case 'active':
+    case 'success':
+    case 'green':
+      return 'border-success/30 bg-success/10 text-success'
+    case 'paused':
+    case 'running':
+    case 'orange':
+      return 'border-warning/30 bg-warning/10 text-warning'
+    case 'completed':
+    case 'blue':
+      return 'border-primary/30 bg-primary/10 text-primary'
+    case 'purple':
+      return 'border-purple-500/30 bg-purple-500/10 text-purple-600 dark:text-purple-400'
+    case 'error':
+    case 'red':
+      return 'border-destructive/30 bg-destructive/10 text-destructive'
+    default:
+      return 'border-border bg-background-subtle text-foreground'
+  }
+}
+
 const statusDotColors: Record<string, string> = {
   active: 'bg-green-500',
   paused: 'bg-yellow-500',
@@ -615,148 +717,152 @@ const CreateForm: FC<{
       <SettingGroup theme={theme}>
         <SettingTitle>{t('agent.cherryClaw.tasks.add')}</SettingTitle>
         <SettingDivider />
+        <div className="space-y-5">
+          {agents.length > 1 && (
+            <>
+              <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+                <SettingRowTitle>{t('agent.cherryClaw.channels.bindAgent')}</SettingRowTitle>
+                <Select value={agentId ?? undefined} onValueChange={setAgentId}>
+                  <SelectTrigger size="sm" className="w-full">
+                    <SelectValue placeholder={t('agent.cherryClaw.channels.selectAgent')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {agents.map((a) => (
+                      <SelectItem key={a.id} value={a.id}>
+                        {a.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </SettingRow>
+            </>
+          )}
 
-        {agents.length > 1 && (
-          <>
-            <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-              <SettingRowTitle>{t('agent.cherryClaw.channels.bindAgent')}</SettingRowTitle>
+          <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+            <SettingRowTitle>{t('agent.cherryClaw.tasks.name.label')}</SettingRowTitle>
+            <UIInput
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder={t('agent.cherryClaw.tasks.name.placeholder')}
+            />
+          </SettingRow>
+
+          <SettingRow className="gap-2" style={{ flexDirection: 'column', alignItems: 'stretch' }}>
+            <div className="flex items-center justify-between">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.prompt.label')}</SettingRowTitle>
+              <Tooltip title={t('agent.cherryClaw.tasks.prompt.expand')}>
+                <Button variant="ghost" size="icon-sm" className="shadow-none" onClick={() => setPromptModalOpen(true)}>
+                  <Maximize2 size={13} />
+                </Button>
+              </Tooltip>
+            </div>
+            <Textarea.Input
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder={t('agent.cherryClaw.tasks.prompt.placeholder')}
+              rows={4}
+              className="min-h-[88px] resize-y px-3 py-2"
+            />
+          </SettingRow>
+
+          <Dialog open={promptModalOpen} onOpenChange={setPromptModalOpen}>
+            <DialogContent className="sm:max-w-[640px]">
+              <DialogHeader>
+                <DialogTitle>{t('agent.cherryClaw.tasks.prompt.label')}</DialogTitle>
+              </DialogHeader>
+              <Textarea.Input
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder={t('agent.cherryClaw.tasks.prompt.placeholder')}
+                rows={14}
+                className="min-h-[280px] resize-y px-3 py-2"
+              />
+            </DialogContent>
+          </Dialog>
+
+          <div className="grid grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleType.label')}</SettingRowTitle>
               <Select
-                size="small"
-                className="w-full"
-                value={agentId}
-                onChange={setAgentId}
-                placeholder={t('agent.cherryClaw.channels.selectAgent')}
-                options={agents.map((a) => ({ value: a.id, label: a.name }))}
-              />
-            </SettingRow>
-            <SettingDivider />
-          </>
-        )}
-
-        <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-          <SettingRowTitle>{t('agent.cherryClaw.tasks.name.label')}</SettingRowTitle>
-          <Input
-            size="small"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            placeholder={t('agent.cherryClaw.tasks.name.placeholder')}
-          />
-        </SettingRow>
-        <SettingDivider />
-
-        <SettingRow style={{ flexDirection: 'column', alignItems: 'stretch' }}>
-          <div className="flex items-center justify-between">
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.prompt.label')}</SettingRowTitle>
-            <Tooltip title={t('agent.cherryClaw.tasks.prompt.expand')}>
-              <Button
-                type="text"
-                size="small"
-                icon={<Maximize2 size={13} />}
-                onClick={() => setPromptModalOpen(true)}
-              />
-            </Tooltip>
+                value={scheduleType}
+                onValueChange={(v: 'cron' | 'interval' | 'once') => {
+                  setScheduleType(v)
+                  setScheduleValue('')
+                }}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="cron">{t('agent.cherryClaw.tasks.scheduleType.cron')}</SelectItem>
+                  <SelectItem value="interval">{t('agent.cherryClaw.tasks.scheduleType.interval')}</SelectItem>
+                  <SelectItem value="once">{t('agent.cherryClaw.tasks.scheduleType.once')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleValue')}</SettingRowTitle>
+              {scheduleType === 'cron' && (
+                <UIInput
+                  value={scheduleValue}
+                  onChange={(e) => setScheduleValue(e.target.value)}
+                  placeholder={t('agent.cherryClaw.tasks.cronPlaceholder')}
+                />
+              )}
+              {scheduleType === 'interval' && (
+                <div className="relative">
+                  <UIInput
+                    type="number"
+                    min={1}
+                    value={scheduleValue}
+                    onChange={(e) => setScheduleValue(e.target.value)}
+                    placeholder={t('agent.cherryClaw.tasks.intervalPlaceholder')}
+                    className="pr-10"
+                  />
+                  <span className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-muted-foreground text-xs">
+                    {t('agent.cherryClaw.tasks.intervalUnit')}
+                  </span>
+                </div>
+              )}
+              {scheduleType === 'once' && (
+                <DateTimePicker
+                  value={parseScheduleDate(scheduleValue)}
+                  granularity="second"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  placeholder={t('agent.cherryClaw.tasks.oncePlaceholder')}
+                  triggerClassName="w-full"
+                  onChange={(date) => {
+                    if (date) setScheduleValue(date.toISOString())
+                  }}
+                />
+              )}
+            </div>
+            <div className="space-y-2">
+              <SettingRowTitle>{t('agent.cherryClaw.tasks.timeout.label')}</SettingRowTitle>
+              <div className="relative">
+                <UIInput
+                  type="number"
+                  min={1}
+                  value={timeoutMinutes}
+                  onChange={(e) => setTimeoutMinutes(e.target.value)}
+                  placeholder={t('agent.cherryClaw.tasks.timeout.placeholder')}
+                  className="pr-10"
+                />
+                <span className="-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-muted-foreground text-xs">
+                  {t('agent.cherryClaw.tasks.intervalUnit')}
+                </span>
+              </div>
+            </div>
           </div>
-          <Input.TextArea
-            size="small"
-            autoSize={{ minRows: 3, maxRows: 8 }}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder={t('agent.cherryClaw.tasks.prompt.placeholder')}
-          />
-        </SettingRow>
-        <SettingDivider />
+          <TaskChannelSelector channels={channels} channelIds={channelIds} onChange={setChannelIds} />
 
-        <Modal
-          title={t('agent.cherryClaw.tasks.prompt.label')}
-          open={promptModalOpen}
-          onCancel={() => setPromptModalOpen(false)}
-          footer={null}
-          width={640}>
-          <Input.TextArea
-            autoSize={{ minRows: 12, maxRows: 30 }}
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder={t('agent.cherryClaw.tasks.prompt.placeholder')}
-            style={{ marginTop: 8 }}
-          />
-        </Modal>
-
-        <div className="grid grid-cols-3 gap-3">
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleType.label')}</SettingRowTitle>
-            <Select
-              size="small"
-              className="w-full"
-              value={scheduleType}
-              onChange={(v) => {
-                setScheduleType(v)
-                setScheduleValue('')
-              }}
-              options={[
-                { value: 'cron', label: t('agent.cherryClaw.tasks.scheduleType.cron') },
-                { value: 'interval', label: t('agent.cherryClaw.tasks.scheduleType.interval') },
-                { value: 'once', label: t('agent.cherryClaw.tasks.scheduleType.once') }
-              ]}
-            />
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={onCancel}>
+              {t('agent.cherryClaw.tasks.cancel')}
+            </Button>
+            <Button size="sm" disabled={!isValid} loading={saving} onClick={handleCreate}>
+              {t('agent.cherryClaw.tasks.save')}
+            </Button>
           </div>
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.scheduleValue')}</SettingRowTitle>
-            {scheduleType === 'cron' && (
-              <Input
-                size="small"
-                value={scheduleValue}
-                onChange={(e) => setScheduleValue(e.target.value)}
-                placeholder={t('agent.cherryClaw.tasks.cronPlaceholder')}
-              />
-            )}
-            {scheduleType === 'interval' && (
-              <Input
-                size="small"
-                type="number"
-                min={1}
-                value={scheduleValue}
-                onChange={(e) => setScheduleValue(e.target.value)}
-                placeholder={t('agent.cherryClaw.tasks.intervalPlaceholder')}
-                suffix="min"
-              />
-            )}
-            {scheduleType === 'once' && (
-              <DatePicker
-                size="small"
-                showTime
-                className="w-full"
-                value={scheduleValue ? dayjs(scheduleValue) : null}
-                onChange={(val) => {
-                  if (val) {
-                    setScheduleValue(val.toISOString())
-                  }
-                }}
-              />
-            )}
-          </div>
-          <div>
-            <SettingRowTitle>{t('agent.cherryClaw.tasks.timeout.label')}</SettingRowTitle>
-            <Input
-              size="small"
-              type="number"
-              min={1}
-              value={timeoutMinutes}
-              onChange={(e) => setTimeoutMinutes(e.target.value)}
-              placeholder={t('agent.cherryClaw.tasks.timeout.placeholder')}
-              suffix="min"
-            />
-          </div>
-        </div>
-        <TaskChannelSelector channels={channels} channelIds={channelIds} onChange={setChannelIds} />
-        <SettingDivider />
-
-        <div className="flex gap-2">
-          <Button size="small" onClick={onCancel}>
-            {t('agent.cherryClaw.tasks.cancel')}
-          </Button>
-          <Button type="primary" size="small" disabled={!isValid} loading={saving} onClick={handleCreate}>
-            {t('agent.cherryClaw.tasks.save')}
-          </Button>
         </div>
       </SettingGroup>
     </SettingContainer>
@@ -909,7 +1015,7 @@ const TasksSettings: FC = () => {
     return (
       <div className="flex flex-1">
         <div className="flex flex-1 items-center justify-center">
-          <Spin />
+          <Spinner text={t('common.loading')} />
         </div>
       </div>
     )
@@ -926,31 +1032,19 @@ const TasksSettings: FC = () => {
           style={{ width: 'var(--settings-width)', height: 'calc(100vh - var(--navbar-height))' }}>
           <div className="flex items-center justify-between">
             <SettingTitle>{t('settings.scheduledTasks.title')}</SettingTitle>
-            <Button
-              type="text"
-              size="small"
-              icon={<PlusOutlined />}
-              disabled={agents.length === 0}
-              onClick={handleStartCreate}
-            />
+            <Button variant="ghost" size="icon-sm" disabled={agents.length === 0} onClick={handleStartCreate}>
+              <Plus size={14} />
+            </Button>
           </div>
           <div className="flex flex-col gap-1">
             {tasks.length === 0 && !creating ? (
-              <Empty
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
+              <EmptyState
+                compact
+                preset="no-agent"
                 description={
-                  <div className="flex flex-col gap-2">
-                    <span>
-                      {agents.length === 0
-                        ? t('settings.scheduledTasks.noAgents')
-                        : t('settings.scheduledTasks.noTasks')}
-                    </span>
-                    {agents.length === 0 && (
-                      <span className="text-(--color-text-3) text-xs">{t('settings.scheduledTasks.noAgentsTip')}</span>
-                    )}
-                  </div>
+                  agents.length === 0 ? t('settings.scheduledTasks.noAgents') : t('settings.scheduledTasks.noTasks')
                 }
-                style={{ marginTop: 20 }}
+                className="mt-5 py-8"
               />
             ) : (
               tasks.map((task) => (
@@ -995,7 +1089,7 @@ const TasksSettings: FC = () => {
               onToggleStatus={handleToggleStatus}
             />
           ) : (
-            <div className="flex flex-1 items-center justify-center text-(--color-text-3) text-sm">
+            <div className="flex flex-1 items-center justify-center text-(--color-foreground-muted) text-sm">
               {tasks.length > 0
                 ? t('settings.scheduledTasks.selectTask', 'Select a task to view details')
                 : t('settings.scheduledTasks.noTasks')}
diff --git a/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx b/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
index bedd416ec9..ed6402b229 100644
--- a/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
+++ b/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
@@ -1,18 +1,16 @@
-import { IndicatorLight } from '@cherrystudio/ui'
+import { Button, ButtonGroup, IndicatorLight, Input, Tooltip } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useApiServer } from '@renderer/hooks/useApiServer'
 import { formatErrorMessage } from '@renderer/utils/error'
+import { cn } from '@renderer/utils/style'
 import { API_SERVER_DEFAULTS } from '@shared/config/constant'
-import { Alert, Button, Input, InputNumber, Tooltip, Typography } from 'antd'
-import { Copy, ExternalLink, Play, RotateCcw, Square } from 'lucide-react'
+import { Copy, ExternalLink, Play, RotateCcw, Server, Square, TriangleAlert } from 'lucide-react'
+import type React from 'react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 import { v4 as uuidv4 } from 'uuid'
 
-import { SettingContainer } from '../..'
-
-const { Text, Title } = Typography
+import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '../..'
 
 const ApiServerSettings: FC = () => {
   const { theme } = useTheme()
@@ -30,6 +28,11 @@ const ApiServerSettings: FC = () => {
     setApiServerConfig
   } = useApiServer()
 
+  const serverHost = apiServerConfig.host || API_SERVER_DEFAULTS.HOST
+  const serverPort = apiServerConfig.port || API_SERVER_DEFAULTS.PORT
+  const serverUrl = `http://${serverHost}:${serverPort}`
+  const apiKey = apiServerConfig.apiKey || ''
+
   const handleApiServerToggle = async (enabled: boolean) => {
     try {
       if (enabled) {
@@ -49,8 +52,8 @@ const ApiServerSettings: FC = () => {
   }
 
   const copyApiKey = () => {
-    if (apiServerConfig.apiKey) {
-      void navigator.clipboard.writeText(apiServerConfig.apiKey)
+    if (apiKey) {
+      void navigator.clipboard.writeText(apiKey)
     }
     window.toast.success(t('apiServer.messages.apiKeyCopied'))
   }
@@ -65,7 +68,7 @@ const ApiServerSettings: FC = () => {
   }
 
   const handlePortChange = (value: string) => {
-    const port = parseInt(value) || API_SERVER_DEFAULTS.PORT
+    const port = Number.parseInt(value, 10) || API_SERVER_DEFAULTS.PORT
     if (port >= 1000 && port <= 65535) {
       void setApiServerConfig({ port })
     }
@@ -73,300 +76,215 @@ const ApiServerSettings: FC = () => {
 
   const openApiDocs = () => {
     if (apiServerRunning) {
-      const host = apiServerConfig.host || API_SERVER_DEFAULTS.HOST
-      const port = apiServerConfig.port || API_SERVER_DEFAULTS.PORT
-      window.open(`http://${host}:${port}/api-docs`, '_blank')
+      window.open(`${serverUrl}/api-docs`, '_blank')
     }
   }
 
   return (
     <Container theme={theme}>
-      {/* Header Section */}
-      <HeaderSection>
-        <HeaderContent>
-          <Title level={3} style={{ margin: 0, marginBottom: 8 }}>
-            {t('apiServer.title')}
-          </Title>
-          <Text type="secondary">{t('apiServer.description')}</Text>
-        </HeaderContent>
-        {apiServerRunning && (
-          <Button type="primary" icon={<ExternalLink size={14} />} onClick={openApiDocs}>
-            {t('apiServer.documentation.title')}
-          </Button>
-        )}
-      </HeaderSection>
-
-      {!apiServerRunning && (
-        <Alert type="warning" message={t('agent.warning.enable_server')} style={{ marginBottom: 10 }} showIcon />
-      )}
-
-      {/* Server Control Panel with integrated configuration */}
-      <ServerControlPanel $status={apiServerRunning}>
-        <StatusSection>
-          <IndicatorLight
-            color={apiServerRunning ? 'green' : '#ef4444'}
-            size={10}
-            animation={apiServerRunning}
-            shadow={apiServerRunning}
-          />
-          <StatusContent>
-            <StatusText $status={apiServerRunning}>
-              {apiServerRunning ? t('apiServer.status.running') : t('apiServer.status.stopped')}
-            </StatusText>
-            <StatusSubtext>
-              {apiServerRunning
-                ? `http://${apiServerConfig.host || API_SERVER_DEFAULTS.HOST}:${apiServerConfig.port || API_SERVER_DEFAULTS.PORT}`
-                : t('apiServer.fields.port.description')}
-            </StatusSubtext>
-          </StatusContent>
-        </StatusSection>
-
-        <ControlSection>
+      <SettingGroup theme={theme}>
+        <HeaderRow>
+          <div className="min-w-0">
+            <SettingTitle className="justify-start gap-2">
+              <Server size={16} />
+              {t('apiServer.title')}
+            </SettingTitle>
+            <PageDescription>{t('apiServer.description')}</PageDescription>
+          </div>
           {apiServerRunning && (
-            <Tooltip title={t('apiServer.actions.restart.tooltip')}>
-              <RestartButton
-                $loading={apiServerLoading}
-                onClick={apiServerLoading ? undefined : handleApiServerRestart}>
-                <RotateCcw size={14} />
-                <span>{t('apiServer.actions.restart.button')}</span>
-              </RestartButton>
-            </Tooltip>
+            <Button variant="outline" onClick={openApiDocs}>
+              <ExternalLink size={14} />
+              {t('apiServer.documentation.title')}
+            </Button>
           )}
+        </HeaderRow>
 
-          {/* Port input when server is stopped */}
-          {!apiServerRunning && (
-            <StyledInputNumber
-              value={apiServerConfig.port}
-              onChange={(value) => handlePortChange(String(value || API_SERVER_DEFAULTS.PORT))}
-              min={1000}
-              max={65535}
-              disabled={apiServerRunning}
-              placeholder={String(API_SERVER_DEFAULTS.PORT)}
-              size="middle"
+        <SettingDivider />
+        {!apiServerRunning && (
+          <WarningBanner>
+            <TriangleAlert className="size-4 shrink-0 text-warning" />
+            <span>{t('agent.warning.enable_server')}</span>
+          </WarningBanner>
+        )}
+        <StatusCard $running={apiServerRunning}>
+          <StatusSection>
+            <IndicatorLight
+              color={apiServerRunning ? 'green' : '#ef4444'}
+              size={10}
+              animation={apiServerRunning}
+              shadow={apiServerRunning}
             />
-          )}
+            <StatusContent>
+              <StatusText $running={apiServerRunning}>
+                {apiServerRunning ? t('apiServer.status.running') : t('apiServer.status.stopped')}
+              </StatusText>
+              <StatusSubtext>{apiServerRunning ? serverUrl : t('apiServer.fields.port.description')}</StatusSubtext>
+            </StatusContent>
+          </StatusSection>
 
-          <Tooltip title={apiServerRunning ? t('apiServer.actions.stop') : t('apiServer.actions.start')}>
-            {apiServerRunning ? (
-              <StopButton
-                $loading={apiServerLoading}
-                onClick={apiServerLoading ? undefined : () => handleApiServerToggle(false)}>
-                <Square size={20} style={{ color: 'var(--cs-error-base)' }} />
-              </StopButton>
-            ) : (
-              <StartButton
-                $loading={apiServerLoading}
-                onClick={apiServerLoading ? undefined : () => handleApiServerToggle(true)}>
-                <Play size={20} style={{ color: 'var(--cs-success-base)' }} />
-              </StartButton>
+          <ButtonGroup attached={false}>
+            {apiServerRunning && (
+              <Tooltip title={t('apiServer.actions.restart.tooltip')}>
+                <Button variant="outline" loading={apiServerLoading} onClick={handleApiServerRestart}>
+                  <RotateCcw size={14} />
+                  {t('apiServer.actions.restart.button')}
+                </Button>
+              </Tooltip>
             )}
-          </Tooltip>
-        </ControlSection>
-      </ServerControlPanel>
-
-      {/* API Key Configuration */}
-      <ConfigurationField>
-        <FieldLabel>{t('apiServer.fields.apiKey.label')}</FieldLabel>
-        <FieldDescription>{t('apiServer.fields.apiKey.description')}</FieldDescription>
-
-        <StyledInput
-          value={apiServerConfig.apiKey || ''}
-          readOnly
-          placeholder={t('apiServer.fields.apiKey.placeholder')}
-          size="middle"
-          suffix={
-            <InputButtonContainer>
+            {apiServerRunning ? (
+              <Button variant="outline" loading={apiServerLoading} onClick={() => handleApiServerToggle(false)}>
+                <Square size={14} />
+                {t('apiServer.actions.stop')}
+              </Button>
+            ) : (
+              <Button loading={apiServerLoading} onClick={() => handleApiServerToggle(true)}>
+                <Play size={14} />
+                {t('apiServer.actions.start')}
+              </Button>
+            )}
+          </ButtonGroup>
+        </StatusCard>
+        {!apiServerRunning && (
+          <>
+            <SettingDivider />
+            <SettingRow className="items-start gap-6">
+              <FieldText>
+                <SettingRowTitle>{t('apiServer.fields.port.label')}</SettingRowTitle>
+                <FieldDescription>{t('apiServer.fields.port.description')}</FieldDescription>
+              </FieldText>
+              <Input
+                className="w-24 text-center"
+                type="number"
+                min={1000}
+                max={65535}
+                value={serverPort}
+                onChange={(event) => handlePortChange(event.target.value)}
+              />
+            </SettingRow>
+            <SettingDivider />
+            <SettingRow className="items-start gap-6">
+              <FieldText>
+                <SettingRowTitle>{t('apiServer.fields.url.label')}</SettingRowTitle>
+                <FieldDescription>{t('apiServer.messages.notEnabled')}</FieldDescription>
+              </FieldText>
+              <Input className="w-[420px] font-mono text-xs" value={serverUrl} readOnly disabled />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow className="items-start gap-6">
+          <FieldText>
+            <SettingRowTitle>{t('apiServer.fields.apiKey.label')}</SettingRowTitle>
+            <FieldDescription>{t('apiServer.fields.apiKey.description')}</FieldDescription>
+          </FieldText>
+          <InlineInputGroup>
+            <Input
+              className="font-mono text-xs"
+              value={apiKey}
+              readOnly
+              placeholder={t('apiServer.fields.apiKey.placeholder')}
+            />
+            <ButtonGroup attached={false}>
               {!apiServerRunning && (
-                <RegenerateButton onClick={regenerateApiKey} disabled={apiServerRunning} type="link">
+                <Button variant="outline" onClick={regenerateApiKey}>
                   {t('apiServer.actions.regenerate')}
-                </RegenerateButton>
+                </Button>
               )}
               <Tooltip title={t('apiServer.fields.apiKey.copyTooltip')}>
-                <InputButton icon={<Copy size={14} />} onClick={copyApiKey} disabled={!apiServerConfig.apiKey} />
+                <Button size="icon-sm" variant="outline" onClick={copyApiKey} disabled={!apiKey}>
+                  <Copy size={14} />
+                </Button>
               </Tooltip>
-            </InputButtonContainer>
-          }
-        />
-
-        {/* Authorization header info */}
-        <AuthHeaderSection>
-          <FieldLabel>{t('apiServer.authHeader.title')}</FieldLabel>
-          <StyledInput
-            style={{ height: 38 }}
-            value={`Authorization: Bearer ${apiServerConfig.apiKey || 'your-api-key'}`}
+            </ButtonGroup>
+          </InlineInputGroup>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow className="items-start gap-6">
+          <FieldText>
+            <SettingRowTitle>{t('apiServer.authHeader.title')}</SettingRowTitle>
+            <FieldDescription>{t('apiServer.authHeaderText')}</FieldDescription>
+          </FieldText>
+          <Input
+            className="w-[420px] font-mono text-xs"
+            value={`Authorization: Bearer ${apiKey || 'your-api-key'}`}
             readOnly
-            size="middle"
           />
-        </AuthHeaderSection>
-      </ConfigurationField>
+        </SettingRow>
+      </SettingGroup>
     </Container>
   )
 }
 
-// Styled Components
-const Container = styled(SettingContainer)`
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--navbar-height));
-`
+const Container = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof SettingContainer>) => (
+  <SettingContainer className={cn('flex h-[calc(100vh-var(--navbar-height))] flex-col', className)} {...props} />
+)
 
-const HeaderSection = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 24px;
-`
+const HeaderRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center justify-between gap-4', className)} {...props} />
+)
 
-const HeaderContent = styled.div`
-  flex: 1;
-`
+const PageDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-2 max-w-[560px] text-foreground-muted text-xs leading-5', className)} {...props} />
+)
 
-const ServerControlPanel = styled.div<{ $status: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  border-radius: 8px;
-  border: 1px solid ${(props) => (props.$status ? 'var(--color-success-base)' : 'var(--color-border)')};
-  transition: all 0.3s ease;
-  margin-bottom: 16px;
-`
+const WarningBanner = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn(
+      'mb-2 flex items-center gap-2 rounded-md border border-warning/20 bg-warning/10 px-3 py-2 text-sm text-warning',
+      className
+    )}
+    {...props}
+  />
+)
 
-const StatusSection = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`
+const StatusCard = ({
+  $running,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { $running: boolean }) => (
+  <div
+    className={cn(
+      'flex items-center justify-between gap-4 rounded-lg border p-3',
+      $running ? 'border-success/20 bg-success/5' : 'border-border bg-card',
+      className
+    )}
+    {...props}
+  />
+)
 
-const StatusContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-`
+const StatusSection = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center gap-2.5', className)} {...props} />
+)
 
-const StatusText = styled.div<{ $status: boolean }>`
-  font-weight: 600;
-  font-size: 14px;
-  color: ${(props) => (props.$status ? 'var(--cs-success-base)' : 'var(--color-text-1)')};
-  margin: 0;
-`
+const StatusContent = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex flex-col gap-0.5', className)} {...props} />
+)
 
-const StatusSubtext = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin: 0;
-`
+const StatusText = ({
+  $running,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { $running: boolean }) => (
+  <div
+    className={cn('m-0 font-semibold text-sm', $running ? 'text-success' : 'text-foreground', className)}
+    {...props}
+  />
+)
 
-const ControlSection = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-`
+const StatusSubtext = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('m-0 text-foreground-muted text-xs', className)} {...props} />
+)
 
-const RestartButton = styled.div<{ $loading: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--color-text-2);
-  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
-  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
-  font-size: 12px;
-  transition: all 0.2s ease;
+const FieldDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-1 text-foreground-muted text-xs leading-5', className)} {...props} />
+)
 
-  &:hover {
-    color: ${(props) => (props.$loading ? 'var(--color-text-2)' : 'var(--color-primary)')};
-  }
-`
+const FieldText = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('min-w-0 flex-1', className)} {...props} />
+)
 
-const StyledInputNumber = styled(InputNumber)`
-  width: 80px;
-  border-radius: 6px;
-  border: 1.5px solid var(--color-border);
-  margin-right: 5px;
-`
-
-const StartButton = styled.div<{ $loading: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
-  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: ${(props) => (props.$loading ? 'scale(1)' : 'scale(1.1)')};
-  }
-`
-
-const StopButton = styled.div<{ $loading: boolean }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
-  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
-  transition: all 0.2s ease;
-
-  &:hover {
-    transform: ${(props) => (props.$loading ? 'scale(1)' : 'scale(1.1)')};
-  }
-`
-
-const ConfigurationField = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 16px;
-  background: var(--card);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-`
-
-const FieldLabel = styled.div`
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--color-text-1);
-  margin: 0;
-`
-
-const FieldDescription = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin: 0;
-`
-
-const StyledInput = styled(Input)`
-  width: 100%;
-  border-radius: 6px;
-  border: 1.5px solid var(--color-border);
-`
-
-const InputButtonContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`
-
-const InputButton = styled(Button)`
-  border: none;
-  padding: 0 4px;
-  background: transparent;
-`
-
-const RegenerateButton = styled(Button)`
-  padding: 0 4px;
-  font-size: 12px;
-  height: auto;
-  line-height: 1;
-  border: none;
-  background: transparent;
-`
-
-const AuthHeaderSection = styled.div`
-  margin-top: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
+const InlineInputGroup = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex w-[420px] items-center gap-2', className)} {...props} />
+)
 
 export default ApiServerSettings
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
deleted file mode 100644
index 60eefd647d..0000000000
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { Button, InfoTooltip } from '@cherrystudio/ui'
-import { loggerService } from '@logger'
-import EmojiPicker from '@renderer/components/EmojiPicker'
-import useTranslate from '@renderer/hooks/useTranslate'
-import { addCustomLanguage, updateCustomLanguage } from '@renderer/services/TranslateService'
-import type { CustomTranslateLanguage } from '@renderer/types'
-import { Form, Input, Modal, Popover, Space } from 'antd'
-import type { FC } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-type Props = {
-  isOpen: boolean
-  editingCustomLanguage?: CustomTranslateLanguage
-  onAdd: (item: CustomTranslateLanguage) => void
-  onEdit: (item: CustomTranslateLanguage) => void
-  onCancel: () => void
-}
-
-const logger = loggerService.withContext('CustomLanguageModal')
-
-const CustomLanguageModal = ({ isOpen, editingCustomLanguage, onAdd, onEdit, onCancel }: Props) => {
-  const { t } = useTranslation()
-  const [form] = Form.useForm()
-  // antd表单的getFieldValue方法在首次渲染时无法获取到值，但emoji需要获取表单值来显示，所以单独管理状态
-  const defaultEmoji = '🏳️'
-  const [emoji, setEmoji] = useState(defaultEmoji)
-  const { translateLanguages } = useTranslate()
-
-  const langCodeList = useMemo(() => {
-    return translateLanguages.map((item) => item.langCode)
-  }, [translateLanguages])
-
-  useEffect(() => {
-    if (editingCustomLanguage) {
-      form.setFieldsValue({
-        emoji: editingCustomLanguage.emoji,
-        value: editingCustomLanguage.value,
-        langCode: editingCustomLanguage.langCode
-      })
-      setEmoji(editingCustomLanguage.emoji)
-    } else {
-      form.resetFields()
-      setEmoji(defaultEmoji)
-    }
-  }, [editingCustomLanguage, isOpen, form])
-
-  const title = useMemo(
-    () => (editingCustomLanguage ? t('common.edit') : t('common.add')) + t('translate.custom.label'),
-    [editingCustomLanguage, t]
-  )
-
-  const formItemLayout = {
-    labelCol: { span: 8 },
-    wrapperCol: { span: 16 }
-  }
-
-  const handleSubmit = useCallback(
-    async (values: any) => {
-      const { emoji, value, langCode } = values
-
-      if (editingCustomLanguage) {
-        try {
-          await updateCustomLanguage(editingCustomLanguage, value, emoji, langCode)
-          onEdit({ ...editingCustomLanguage, emoji, value, langCode })
-          window.toast.success(t('settings.translate.custom.success.update'))
-        } catch (e) {
-          window.toast.error(t('settings.translate.custom.error.update') + ': ' + (e as Error).message)
-        }
-      } else {
-        try {
-          const added = await addCustomLanguage(value, emoji, langCode)
-          onAdd(added)
-          window.toast.success(t('settings.translate.custom.success.add'))
-        } catch (e) {
-          window.toast.error(t('settings.translate.custom.error.add') + ': ' + (e as Error).message)
-        }
-      }
-      onCancel()
-    },
-    [editingCustomLanguage, onCancel, t, onEdit, onAdd]
-  )
-
-  const footer = useMemo(() => {
-    return [
-      <Button key="modal-cancel" onClick={onCancel}>
-        {t('common.cancel')}
-      </Button>,
-      <Button key="modal-save" onClick={form.submit}>
-        {editingCustomLanguage ? t('common.save') : t('common.add')}
-      </Button>
-    ]
-  }, [onCancel, t, form.submit, editingCustomLanguage])
-
-  return (
-    <Modal
-      open={isOpen}
-      title={title}
-      footer={footer}
-      onCancel={onCancel}
-      maskClosable={false}
-      transitionName="animation-move-down"
-      forceRender
-      centered
-      styles={{
-        body: {
-          padding: '20px'
-        }
-      }}>
-      <Form form={form} onFinish={handleSubmit} validateTrigger="onBlur" colon={false}>
-        <Form.Item name="emoji" label="Emoji" {...formItemLayout} style={{ height: 32 }} initialValue={defaultEmoji}>
-          <Popover
-            content={
-              <EmojiPicker
-                onEmojiClick={(emoji) => {
-                  form.setFieldsValue({ emoji })
-                  setEmoji(emoji)
-                }}
-              />
-            }
-            arrow
-            trigger="click">
-            <Button style={{ aspectRatio: '1/1' }} size="icon">
-              <Emoji emoji={emoji} />
-            </Button>
-          </Popover>
-        </Form.Item>
-        <Form.Item
-          name="value"
-          label={Label(t('settings.translate.custom.value.label'), t('settings.translate.custom.value.help'))}
-          {...formItemLayout}
-          initialValue={''}
-          rules={[
-            { required: true, message: t('settings.translate.custom.error.value.empty') },
-            { max: 32, message: t('settings.translate.custom.error.value.too_long') }
-          ]}>
-          <Input placeholder={t('settings.translate.custom.value.placeholder')} />
-        </Form.Item>
-        <Form.Item
-          name="langCode"
-          label={Label(t('settings.translate.custom.langCode.label'), t('settings.translate.custom.langCode.help'))}
-          {...formItemLayout}
-          initialValue={''}
-          rules={[
-            { required: true, message: t('settings.translate.custom.error.langCode.empty') },
-            {
-              pattern: /^[a-zA-Z]{2,3}(-[a-zA-Z]{2,3})?$/,
-              message: t('settings.translate.custom.error.langCode.invalid')
-            },
-            {
-              validator: async (_, value: string) => {
-                logger.silly('validate langCode', { value, langCodeList, editingCustomLanguage })
-                if (editingCustomLanguage) {
-                  if (langCodeList.includes(value) && value !== editingCustomLanguage.langCode) {
-                    throw new Error(t('settings.translate.custom.error.langCode.exists'))
-                  }
-                } else {
-                  const langCode = value.toLowerCase()
-                  if (langCodeList.includes(langCode)) {
-                    throw new Error(t('settings.translate.custom.error.langCode.exists'))
-                  }
-                }
-              }
-            }
-          ]}>
-          <Input placeholder={t('settings.translate.custom.langCode.placeholder')} />
-        </Form.Item>
-      </Form>
-    </Modal>
-  )
-}
-
-const Label = (label: string, help: string) => {
-  return (
-    <Space>
-      <span>{label}</span>
-      <InfoTooltip content={help} />
-    </Space>
-  )
-}
-
-const Emoji: FC<{ emoji: string; size?: number }> = ({ emoji, size = 18 }) => {
-  return <div style={{ lineHeight: 0, fontSize: size }}>{emoji}</div>
-}
-
-export default CustomLanguageModal
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
deleted file mode 100644
index 7b08df68c8..0000000000
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
-import { loggerService } from '@logger'
-import { deleteCustomLanguage, getAllCustomLanguages } from '@renderer/services/TranslateService'
-import type { CustomTranslateLanguage } from '@renderer/types'
-import type { TableProps } from 'antd'
-import { Popconfirm, Space, Table } from 'antd'
-import { memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import { SettingRowTitle } from '..'
-import CustomLanguageModal from './CustomLanguageModal'
-
-const logger = loggerService.withContext('CustomLanguageSettings')
-
-const CustomLanguageSettings = () => {
-  const { t } = useTranslation()
-  const [displayedItems, setDisplayedItems] = useState<CustomTranslateLanguage[]>([])
-  const [isModalOpen, setIsModalOpen] = useState(false)
-  const [editingCustomLanguage, setEditingCustomLanguage] = useState<CustomTranslateLanguage>()
-
-  const onDelete = useCallback(
-    async (id: string) => {
-      try {
-        await deleteCustomLanguage(id)
-        setDisplayedItems((prev) => prev.filter((item) => item.id !== id))
-        window.toast.success(t('settings.translate.custom.success.delete'))
-      } catch (e) {
-        window.toast.error(t('settings.translate.custom.error.delete'))
-      }
-    },
-    [t]
-  )
-
-  const onClickAdd = () => {
-    startTransition(async () => {
-      setEditingCustomLanguage(undefined)
-      setIsModalOpen(true)
-    })
-  }
-
-  const onClickEdit = (target: CustomTranslateLanguage) => {
-    startTransition(async () => {
-      setEditingCustomLanguage(target)
-      setIsModalOpen(true)
-    })
-  }
-
-  const onCancel = () => {
-    startTransition(async () => {
-      setIsModalOpen(false)
-    })
-  }
-
-  const onItemAdd = (target: CustomTranslateLanguage) => {
-    startTransition(async () => {
-      setDisplayedItems((prev) => [...prev, target])
-    })
-  }
-
-  const onItemEdit = (target: CustomTranslateLanguage) => {
-    startTransition(async () => {
-      setDisplayedItems((prev) => prev.map((item) => (item.id === target.id ? target : item)))
-    })
-  }
-
-  const columns: TableProps<CustomTranslateLanguage>['columns'] = useMemo(
-    () => [
-      {
-        title: 'Emoji',
-        dataIndex: 'emoji'
-      },
-      {
-        title: t('settings.translate.custom.value.label'),
-        dataIndex: 'value'
-      },
-      {
-        title: t('settings.translate.custom.langCode.label'),
-        dataIndex: 'langCode'
-      },
-      {
-        title: t('settings.translate.custom.table.action.title'),
-        key: 'action',
-        render: (_, record) => {
-          return (
-            <Space>
-              <Button onClick={() => onClickEdit(record)}>
-                <EditOutlined />
-                {t('common.edit')}
-              </Button>
-              <Popconfirm
-                title={t('settings.translate.custom.delete.title')}
-                description={t('settings.translate.custom.delete.description')}
-                onConfirm={() => onDelete(record.id)}>
-                <Button variant="destructive">
-                  <DeleteOutlined />
-                  {t('common.delete')}
-                </Button>
-              </Popconfirm>
-            </Space>
-          )
-        }
-      }
-    ],
-    [onDelete, t]
-  )
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const data = await getAllCustomLanguages()
-        setDisplayedItems(data)
-      } catch (error) {
-        logger.error('Failed to load custom languages:', error as Error)
-      }
-    }
-    void loadData()
-  }, [])
-
-  return (
-    <>
-      <CustomLanguageSettingsContainer>
-        <RowFlex className="justify-between py-1">
-          <SettingRowTitle>{t('translate.custom.label')}</SettingRowTitle>
-          <Button onClick={onClickAdd} style={{ marginBottom: 5, marginTop: -5 }}>
-            <PlusOutlined size={16} />
-            {t('common.add')}
-          </Button>
-        </RowFlex>
-        <TableContainer>
-          <Table<CustomTranslateLanguage>
-            columns={columns}
-            pagination={{ position: ['bottomCenter'], defaultPageSize: 10 }}
-            dataSource={displayedItems}
-          />
-        </TableContainer>
-      </CustomLanguageSettingsContainer>
-      <CustomLanguageModal
-        isOpen={isModalOpen}
-        editingCustomLanguage={editingCustomLanguage}
-        onAdd={onItemAdd}
-        onEdit={onItemEdit}
-        onCancel={onCancel}
-      />
-    </>
-  )
-}
-
-const CustomLanguageSettingsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-`
-
-const TableContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-`
-
-export default memo(CustomLanguageSettings)
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/TranslatePromptSettings.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/TranslatePromptSettings.tsx
deleted file mode 100644
index 403f5318f4..0000000000
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/TranslatePromptSettings.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { RedoOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
-import { Tooltip } from '@cherrystudio/ui'
-import { usePreference } from '@data/hooks/usePreference'
-import { useTheme } from '@renderer/context/ThemeProvider'
-import { TRANSLATE_PROMPT } from '@shared/config/prompts'
-import { Input } from 'antd'
-import { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
-import { SettingGroup, SettingTitle } from '..'
-
-const TranslatePromptSettings = () => {
-  const { t } = useTranslation()
-  const { theme } = useTheme()
-  const [translateModelPrompt, setTranslateModelPrompt] = usePreference('feature.translate.model_prompt')
-
-  const [localPrompt, setLocalPrompt] = useState(translateModelPrompt)
-
-  const onResetTranslatePrompt = () => {
-    setLocalPrompt(TRANSLATE_PROMPT)
-    void setTranslateModelPrompt(TRANSLATE_PROMPT)
-  }
-
-  return (
-    <SettingGroup theme={theme}>
-      <SettingTitle style={{ marginBottom: 12 }}>
-        <RowFlex className="h-[30px] items-center gap-2.5">
-          {t('settings.translate.prompt')}
-          {localPrompt !== TRANSLATE_PROMPT && (
-            <Tooltip content={t('common.reset')}>
-              <ResetButton type="reset" onClick={onResetTranslatePrompt}>
-                <RedoOutlined size={16} />
-              </ResetButton>
-            </Tooltip>
-          )}
-        </RowFlex>
-      </SettingTitle>
-      <Input.TextArea
-        value={localPrompt}
-        onChange={(e) => setLocalPrompt(e.target.value)}
-        onBlur={(e) => setTranslateModelPrompt(e.target.value)}
-        autoSize={{ minRows: 4, maxRows: 10 }}
-        placeholder={t('settings.models.translate_model_prompt_message')}
-      />
-    </SettingGroup>
-  )
-}
-
-const ResetButton = styled.button`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--color-text);
-  padding: 0;
-  width: 30px;
-  height: 30px;
-
-  &:hover {
-    background: var(--color-list-item);
-    border-radius: 8px;
-  }
-`
-
-export default TranslatePromptSettings
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
index aa0347c673..99a07b4f9c 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
@@ -1,10 +1,24 @@
-import { Flex } from '@cherrystudio/ui'
-import { Button } from '@cherrystudio/ui'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Flex,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input
+} from '@cherrystudio/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
 import { TopView } from '@renderer/components/TopView'
-import type { FormProps } from 'antd'
-import { Form, Input, Modal } from 'antd'
 import { useState } from 'react'
+import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
+import * as z from 'zod'
 
 interface ShowParams {
   title: string
@@ -14,91 +28,117 @@ interface Props extends ShowParams {
   resolve: (data: any) => void
 }
 
-type FieldType = {
-  url: string
-  name?: string
-}
-
 const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
   const [open, setOpen] = useState(true)
-  const [form] = Form.useForm()
   const { t } = useTranslation()
 
-  const onOk = () => {
-    setOpen(false)
-  }
+  const schema = z.object({
+    url: z
+      .string()
+      .min(1, t('settings.tool.websearch.url_required'))
+      .refine(
+        (value) => {
+          try {
+            new URL(value.trim())
+            return true
+          } catch {
+            return false
+          }
+        },
+        { message: t('settings.tool.websearch.url_invalid') }
+      ),
+    name: z.string().optional()
+  })
 
-  const onCancel = () => {
-    setOpen(false)
-  }
+  type FieldType = z.infer<typeof schema>
+
+  const form = useForm<FieldType>({
+    resolver: zodResolver(schema),
+    defaultValues: { url: '', name: '' }
+  })
 
   const onClose = () => {
     resolve({})
   }
 
-  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
+  const handleOpenChange = (next: boolean) => {
+    if (!next) {
+      setOpen(false)
+      onClose()
+    }
+  }
+
+  const onSubmit = (values: FieldType) => {
     const url = values.url.trim()
     const name = values.name?.trim() || url
-
-    if (!url) {
-      window.toast.error(t('settings.tool.websearch.url_required'))
-      return
-    }
-
-    // 验证URL格式
-    try {
-      new URL(url)
-    } catch (e) {
-      window.toast.error(t('settings.tool.websearch.url_invalid'))
-      return
-    }
-
     resolve({ url, name })
+    setOpen(false)
   }
 
   return (
-    <Modal
-      title={title}
-      open={open}
-      onOk={onOk}
-      onCancel={onCancel}
-      maskClosable={false}
-      afterClose={onClose}
-      footer={null}
-      transitionName="animation-move-down"
-      centered>
-      <Form
-        form={form}
-        labelCol={{ flex: '110px' }}
-        labelAlign="right"
-        colon={false}
-        className="mt-[25px]"
-        onFinish={onFinish}>
-        <Form.Item name="url" label={t('settings.tool.websearch.subscribe_url')} rules={[{ required: true }]}>
-          <Input
-            placeholder="https://git.io/ublacklist"
-            spellCheck={false}
-            maxLength={500}
-            onChange={(e) => {
-              try {
-                const url = new URL(e.target.value)
-                form.setFieldValue('name', url.hostname)
-              } catch (e) {
-                // URL不合法，忽略
-              }
-            }}
-          />
-        </Form.Item>
-        <Form.Item name="name" label={t('settings.tool.websearch.subscribe_name.label')}>
-          <Input placeholder={t('settings.tool.websearch.subscribe_name.placeholder')} spellCheck={false} />
-        </Form.Item>
-        <Flex className="mb-2 justify-end">
-          <Button color="primary" type="submit">
-            {t('settings.tool.websearch.subscribe_add')}
-          </Button>
-        </Flex>
-      </Form>
-    </Modal>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        className="sm:max-w-[480px]"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('settings.tool.websearch.subscribe_url')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="https://git.io/ublacklist"
+                      spellCheck={false}
+                      maxLength={500}
+                      {...field}
+                      onChange={(e) => {
+                        field.onChange(e)
+                        try {
+                          const url = new URL(e.target.value)
+                          form.setValue('name', url.hostname)
+                        } catch {
+                          // ignore invalid URL
+                        }
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('settings.tool.websearch.subscribe_name.label')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={t('settings.tool.websearch.subscribe_name.placeholder')}
+                      spellCheck={false}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Flex className="mt-2 justify-end">
+              <Button type="submit" variant="outline">
+                {t('settings.tool.websearch.subscribe_add')}
+              </Button>
+            </Flex>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
index cea1a7a25e..792c1f19c3 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
@@ -1,5 +1,13 @@
-import { InfoTooltip, Switch } from '@cherrystudio/ui'
-import Selector from '@renderer/components/Selector'
+import {
+  InfoTooltip,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Switch
+} from '@cherrystudio/ui'
 import { getWebSearchProviderLogo, webSearchProviderRequiresApiKey } from '@renderer/config/webSearchProviders'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import {
@@ -10,7 +18,6 @@ import {
 import { webSearchService } from '@renderer/services/WebSearchService'
 import type { WebSearchProvider } from '@renderer/types'
 import { useNavigate } from '@tanstack/react-router'
-import { Slider } from 'antd'
 import type { TFunction } from 'i18next'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -81,7 +88,7 @@ const BasicSettings: FC = () => {
         {logo ? (
           <logo.Avatar size={16} shape="rounded" />
         ) : (
-          <div className="h-4 w-4 rounded-sm bg-[var(--color-background-soft)]" />
+          <div className="h-4 w-4 rounded-sm bg-(--color-background-subtle)" />
         )}
         <span>
           {provider.name}
@@ -96,30 +103,32 @@ const BasicSettings: FC = () => {
       <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.tool.websearch.search_provider')}</SettingTitle>
         <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.tool.websearch.default_provider')}</SettingRowTitle>
-          <Selector
-            size={14}
-            value={defaultProvider?.id}
-            onChange={(value: string) => updateSelectedWebSearchProvider(value)}
-            placeholder={t('settings.tool.websearch.search_provider_placeholder')}
-            options={providers.map((p) => ({
-              value: p.id,
-              label: renderProviderLabel(p)
-            }))}
-          />
+        <SettingRow className="gap-8 py-2">
+          <SettingRowTitle className="shrink-0">{t('settings.tool.websearch.default_provider')}</SettingRowTitle>
+          <Select value={defaultProvider?.id} onValueChange={updateSelectedWebSearchProvider}>
+            <SelectTrigger style={{ width: '200px' }}>
+              <SelectValue placeholder={t('settings.tool.websearch.search_provider_placeholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {providers.map((provider) => (
+                <SelectItem key={provider.id} value={provider.id}>
+                  {renderProviderLabel(provider)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme} style={{ paddingBottom: 8 }}>
         <SettingTitle>{t('settings.general.title')}</SettingTitle>
         <SettingDivider />
-        <SettingRow>
-          <SettingRowTitle>{t('settings.tool.websearch.search_with_time')}</SettingRowTitle>
+        <SettingRow className="gap-8 py-2">
+          <SettingRowTitle className="shrink-0">{t('settings.tool.websearch.search_with_time')}</SettingRowTitle>
           <Switch checked={searchWithTime} onCheckedChange={(checked) => void setSearchWithTime(checked)} />
         </SettingRow>
-        <SettingDivider style={{ marginTop: 15, marginBottom: 10 }} />
-        <SettingRow style={{ height: 40 }}>
-          <SettingRowTitle style={{ minWidth: 120 }}>
+        <SettingDivider />
+        <SettingRow className="items-start gap-8">
+          <SettingRowTitle className="mt-2 min-w-32 shrink-0">
             {t('settings.tool.websearch.search_max_result.label')}
             {maxResults > 20 && compressionConfig?.method === 'none' && (
               <InfoTooltip
@@ -128,16 +137,24 @@ const BasicSettings: FC = () => {
               />
             )}
           </SettingRowTitle>
-          <Slider
-            value={draftMaxResults}
-            style={{ width: '100%' }}
-            min={1}
-            max={100}
-            step={1}
-            marks={{ 1: '1', 5: '5', 20: '20', 50: '50', 100: '100' }}
-            onChange={(value) => setDraftMaxResults(value)}
-            onChangeComplete={(value) => void setMaxResults(value)}
-          />
+          <div className="-mb-2 mt-3 w-full max-w-xl">
+            <Slider
+              value={[draftMaxResults]}
+              className="w-full"
+              min={1}
+              max={100}
+              step={1}
+              marks={[
+                { value: 1, label: '1' },
+                { value: 5, label: '5' },
+                { value: 20, label: '20' },
+                { value: 50, label: '50' },
+                { value: 100, label: '100' }
+              ]}
+              onValueChange={(value) => setDraftMaxResults(value[0])}
+              onValueCommit={(value) => void setMaxResults(value[0])}
+            />
+          </div>
         </SettingRow>
       </SettingGroup>
     </>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
index bf494c676a..3e74e1fdd6 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
@@ -1,21 +1,19 @@
-import { CheckOutlined, LoadingOutlined } from '@ant-design/icons'
-import { Button } from '@cherrystudio/ui'
+import type { ColumnDef } from '@cherrystudio/ui'
+import { Alert, Button, DataTable, Textarea } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useTimer } from '@renderer/hooks/useTimer'
 import { useBlacklist } from '@renderer/hooks/useWebSearchProviders'
 import { parseMatchPattern, parseSubscribeContent } from '@renderer/utils/blacklistMatchPattern'
-import type { TableProps } from 'antd'
-import { Alert, Table } from 'antd'
-import TextArea from 'antd/es/input/TextArea'
+import { formatErrorMessage } from '@renderer/utils/error'
 import { t } from 'i18next'
+import { Check, Info, Plus, RefreshCw, Trash2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 
 import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '..'
 import AddSubscribePopup from './AddSubscribePopup'
 
-type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection']
 interface DataType {
   key: React.Key
   url: string
@@ -24,12 +22,16 @@ interface DataType {
 
 const logger = loggerService.withContext('BlacklistSettings')
 
-const columns: TableProps<DataType>['columns'] = [
-  { title: t('common.name'), dataIndex: 'name', key: 'name' },
+const columns: ColumnDef<DataType>[] = [
   {
-    title: 'URL',
-    dataIndex: 'url',
-    key: 'url'
+    accessorKey: 'name',
+    header: t('common.name'),
+    meta: { width: 200 }
+  },
+  {
+    accessorKey: 'url',
+    header: 'URL',
+    meta: { width: 'calc(100% - 244px)' }
   }
 ]
 
@@ -39,7 +41,7 @@ const BlacklistSettings: FC = () => {
   const { subscribeSources, excludeDomains, setExcludeDomains, setSubscribeSources, addSubscribeSource } =
     useBlacklist()
   const { theme } = useTheme()
-  const [subscribeChecking, setSubscribeChecking] = useState(false)
+  const [subscribeAction, setSubscribeAction] = useState<'add' | 'update' | null>(null)
   const [subscribeValid, setSubscribeValid] = useState(false)
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
   const [dataSource, setDataSource] = useState<DataType[]>(
@@ -50,6 +52,9 @@ const BlacklistSettings: FC = () => {
     }))
   )
   const { setTimeoutTimer } = useTimer()
+
+  const subscribeChecking = subscribeAction !== null
+
   useEffect(() => {
     setDataSource(
       subscribeSources.map((source) => ({
@@ -72,14 +77,13 @@ const BlacklistSettings: FC = () => {
     const validDomains: string[] = []
     const hasError = blacklistDomains.some((domain) => {
       const trimmedDomain = domain.trim()
-      // 正则表达式
       if (trimmedDomain.startsWith('/') && trimmedDomain.endsWith('/')) {
         try {
           const regexPattern = trimmedDomain.slice(1, -1)
           new RegExp(regexPattern, 'i')
           validDomains.push(trimmedDomain)
           return false
-        } catch (error) {
+        } catch {
           return true
         }
       } else {
@@ -98,26 +102,22 @@ const BlacklistSettings: FC = () => {
     await setExcludeDomains(validDomains)
     window.toast.info({
       title: t('message.save.success.title'),
-      timeout: 4000
+      timeout: 4000,
+      icon: <Info className="size-4" />
     })
   }
+
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     logger.info('selectedRowKeys changed: ', newSelectedRowKeys)
     setSelectedRowKeys(newSelectedRowKeys)
   }
 
-  const rowSelection: TableRowSelection<DataType> = {
-    selectedRowKeys,
-    onChange: onSelectChange
-  }
   async function updateSubscribe() {
-    setSubscribeChecking(true)
+    setSubscribeAction('update')
 
     try {
-      // 获取选中的订阅源
       const selectedSources = dataSource.filter((item) => selectedRowKeys.includes(item.key))
 
-      // 用于存储所有成功解析的订阅源数据
       const updatedSources: {
         key: number
         url: string
@@ -125,10 +125,8 @@ const BlacklistSettings: FC = () => {
         blacklist: string[]
       }[] = []
 
-      // 为每个选中的订阅源获取并解析内容
       for (const source of selectedSources) {
         try {
-          // 获取并解析订阅源内容
           const blacklist = await parseSubscribeContent(source.url)
 
           if (blacklist.length > 0) {
@@ -141,7 +139,6 @@ const BlacklistSettings: FC = () => {
           }
         } catch (error) {
           logger.error(`Error updating subscribe source ${source.url}:`, error as Error)
-          // 显示具体源更新失败的消息
           window.toast.warning({
             title: t('settings.tool.websearch.subscribe_update_failed', { url: source.url }),
             timeout: 3000
@@ -150,10 +147,8 @@ const BlacklistSettings: FC = () => {
       }
 
       if (updatedSources.length > 0) {
-        const updatedSourceMap = new Map(updatedSources.map((source) => [source.key, source]))
-        await setSubscribeSources(subscribeSources.map((source) => updatedSourceMap.get(source.key) ?? source))
+        await setSubscribeSources(updatedSources)
         setSubscribeValid(true)
-        // 显示成功消息
         window.toast.success({
           title: t('settings.tool.websearch.subscribe_update_success'),
           timeout: 2000
@@ -169,58 +164,59 @@ const BlacklistSettings: FC = () => {
         title: t('settings.tool.websearch.subscribe_update_failed'),
         timeout: 2000
       })
+    } finally {
+      setSubscribeAction(null)
     }
-    setSubscribeChecking(false)
   }
 
-  // 修改 handleAddSubscribe 函数
   async function handleAddSubscribe() {
-    setSubscribeChecking(true)
     const result = await AddSubscribePopup.show({
       title: t('settings.tool.websearch.subscribe_add')
     })
 
-    if (result && result.url) {
-      try {
-        // 获取并解析订阅源内容
-        const blacklist = await parseSubscribeContent(result.url)
-
-        if (blacklist.length === 0) {
-          throw new Error('No valid patterns found in subscribe content')
-        }
-        await addSubscribeSource({
-          url: result.url,
-          name: result.name || result.url,
-          blacklist
-        })
-        setSubscribeValid(true)
-        // 显示成功消息
-        window.toast.success({
-          title: t('settings.tool.websearch.subscribe_add_success'),
-          timeout: 2000
-        })
-        setTimeoutTimer('handleAddSubscribe', () => setSubscribeValid(false), 3000)
-      } catch (error) {
-        setSubscribeValid(false)
-        window.toast.error({
-          title: t('settings.tool.websearch.subscribe_add_failed'),
-          timeout: 2000
-        })
-      }
+    if (!result?.url) {
+      return
+    }
+
+    setSubscribeAction('add')
+    try {
+      const blacklist = await parseSubscribeContent(result.url)
+
+      if (blacklist.length === 0) {
+        throw new Error('No valid patterns found in subscribe content')
+      }
+      await addSubscribeSource({
+        url: result.url,
+        name: result.name || result.url,
+        blacklist
+      })
+      setSubscribeValid(true)
+      window.toast.success({
+        title: t('settings.tool.websearch.subscribe_add_success'),
+        timeout: 2000
+      })
+      setTimeoutTimer('handleAddSubscribe', () => setSubscribeValid(false), 3000)
+    } catch (error) {
+      logger.error('Error adding subscribe source:', error as Error)
+      setSubscribeValid(false)
+      window.toast.error({
+        title: `${t('settings.tool.websearch.subscribe_add_failed')}: ${formatErrorMessage(error)}`,
+        timeout: 2000
+      })
+    } finally {
+      setSubscribeAction(null)
     }
-    setSubscribeChecking(false)
   }
+
   async function handleDeleteSubscribe() {
     try {
       const remainingSources = subscribeSources.filter((source) => !selectedRowKeys.includes(source.key))
-
       await setSubscribeSources(remainingSources)
-
       setSelectedRowKeys([])
     } catch (error) {
       logger.error('Error deleting subscribes:', error as Error)
       window.toast.error({
-        title: t('error.diagnosis.unknown'),
+        title: `${t('common.delete_failed')}: ${formatErrorMessage(error)}`,
         timeout: 2000
       })
     }
@@ -231,60 +227,77 @@ const BlacklistSettings: FC = () => {
       <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.tool.websearch.blacklist')}</SettingTitle>
         <SettingDivider />
-        <SettingRow style={{ marginBottom: 10 }}>
-          <SettingRowTitle>{t('settings.tool.websearch.blacklist_description')}</SettingRowTitle>
+        <SettingRow className="pt-2 pb-3">
+          <SettingRowTitle className="text-foreground-muted leading-5">
+            {t('settings.tool.websearch.blacklist_description')}
+          </SettingRowTitle>
         </SettingRow>
-        <TextArea
+        <Textarea.Input
           value={blacklistInput}
           onChange={(e) => setBlacklistInput(e.target.value)}
           placeholder={t('settings.tool.websearch.blacklist_tooltip')}
-          autoSize={{ minRows: 4, maxRows: 8 }}
+          className="max-h-48 min-h-28 rounded-lg text-sm leading-5 shadow-none"
           rows={4}
         />
-        <Button onClick={() => updateManualBlacklist(blacklistInput)} style={{ marginTop: 10 }}>
-          {t('common.save')}
-        </Button>
+        <div className="mt-2.5 flex justify-end">
+          <Button type="button" size="sm" variant="outline" onClick={() => void updateManualBlacklist(blacklistInput)}>
+            {t('common.save')}
+          </Button>
+        </div>
         {errFormat && (
-          <Alert style={{ marginTop: 10 }} message={t('settings.tool.websearch.blacklist_tooltip')} type="error" />
+          <Alert className="mt-2.5" message={t('settings.tool.websearch.blacklist_tooltip')} type="error" />
         )}
       </SettingGroup>
       <SettingGroup theme={theme}>
-        <SettingTitle>
-          {t('settings.tool.websearch.subscribe')}
-          <Button
-            variant={subscribeValid ? 'ghost' : 'default'}
-            disabled={subscribeChecking}
-            onClick={handleAddSubscribe}>
-            {t('settings.tool.websearch.subscribe_add')}
-          </Button>
-        </SettingTitle>
+        <SettingTitle>{t('settings.tool.websearch.subscribe')}</SettingTitle>
         <SettingDivider />
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-          <Table<DataType>
-            rowSelection={{ type: 'checkbox', ...rowSelection }}
+        <div className="mt-3">
+          <DataTable
+            data={dataSource}
             columns={columns}
-            dataSource={dataSource}
-            pagination={{ position: ['none'] }}
+            rowKey="key"
+            emptyText={t('common.no_results')}
+            selection={{
+              type: 'multiple',
+              selectedRowKeys,
+              onChange: onSelectChange
+            }}
             tableLayout="fixed"
+            headerRight={
+              <div className="flex flex-wrap items-center justify-end gap-2">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  loading={subscribeAction === 'update'}
+                  disabled={subscribeChecking || selectedRowKeys.length === 0}
+                  onClick={() => void updateSubscribe()}>
+                  {subscribeValid ? <Check className="size-3.5" /> : <RefreshCw className="size-3.5" />}
+                  {t('settings.tool.websearch.subscribe_update')}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                  disabled={subscribeChecking || selectedRowKeys.length === 0}
+                  onClick={() => void handleDeleteSubscribe()}>
+                  <Trash2 className="size-3.5" />
+                  {t('settings.tool.websearch.subscribe_delete')}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  loading={subscribeAction === 'add'}
+                  disabled={subscribeChecking}
+                  onClick={() => void handleAddSubscribe()}>
+                  <Plus className="size-3.5" />
+                  {t('settings.tool.websearch.subscribe_add')}
+                </Button>
+              </div>
+            }
           />
-          <SettingRow style={{ height: 50 }}>
-            <Button
-              variant={subscribeValid ? 'ghost' : 'default'}
-              disabled={subscribeChecking || selectedRowKeys.length === 0}
-              style={{ width: 100 }}
-              onClick={updateSubscribe}>
-              {subscribeChecking ? (
-                <LoadingOutlined spin />
-              ) : subscribeValid ? (
-                <CheckOutlined />
-              ) : (
-                t('settings.tool.websearch.subscribe_update')
-              )}
-            </Button>
-            <Button style={{ width: 100 }} disabled={selectedRowKeys.length === 0} onClick={handleDeleteSubscribe}>
-              {t('settings.tool.websearch.subscribe_delete')}
-            </Button>
-          </SettingRow>
         </div>
       </SettingGroup>
     </>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx
index 6afc45e293..b27d8e65f6 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/CutoffSettings.tsx
@@ -1,9 +1,7 @@
-import { InfoTooltip } from '@cherrystudio/ui'
+import { InfoTooltip, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cherrystudio/ui'
 import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
 import { SettingRow, SettingRowTitle } from '@renderer/pages/settings'
 import { DEFAULT_WEB_SEARCH_CUTOFF_LIMIT } from '@shared/data/types/webSearch'
-import { Input, Select, Space } from 'antd'
-import { ChevronDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 const INPUT_BOX_WIDTH = '200px'
@@ -26,7 +24,7 @@ const CutoffSettings = () => {
   ]
 
   return (
-    <SettingRow>
+    <SettingRow className="py-2">
       <SettingRowTitle>
         {t('settings.tool.websearch.compression.cutoff.limit.label')}
         <InfoTooltip
@@ -39,28 +37,35 @@ const CutoffSettings = () => {
           }}
         />
       </SettingRowTitle>
-      <Space.Compact style={{ width: INPUT_BOX_WIDTH }}>
+      <div className="flex" style={{ width: INPUT_BOX_WIDTH }}>
         <Input
-          style={{ maxWidth: '60%' }}
+          className="max-w-[60%] rounded-r-none border-r-0 focus-visible:z-10"
           placeholder={t('settings.tool.websearch.compression.cutoff.limit.placeholder')}
           value={compressionConfig?.cutoffLimit === undefined ? '' : compressionConfig.cutoffLimit}
           onChange={(e) => {
             const value = e.target.value
             if (value === '') {
               handleCutoffLimitChange(DEFAULT_WEB_SEARCH_CUTOFF_LIMIT)
-            } else if (!isNaN(Number(value)) && Number(value) > 0) {
+            } else if (!Number.isNaN(Number(value)) && Number(value) > 0) {
               handleCutoffLimitChange(Number(value))
             }
           }}
         />
         <Select
           value={compressionConfig?.cutoffUnit || 'char'}
-          style={{ minWidth: '40%' }}
-          onChange={handleCutoffUnitChange}
-          options={unitOptions}
-          suffixIcon={<ChevronDown size={16} color="var(--color-border)" />}
-        />
-      </Space.Compact>
+          onValueChange={(value) => handleCutoffUnitChange(value as 'char' | 'token')}>
+          <SelectTrigger className="min-w-[40%] rounded-l-none">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {unitOptions.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
     </SettingRow>
   )
 }
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx b/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx
index 0491b5f27c..72ed23100d 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/CompressionSettings/index.tsx
@@ -1,7 +1,8 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@cherrystudio/ui'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
 import { SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
 import { DEFAULT_WEB_SEARCH_CUTOFF_LIMIT } from '@shared/data/types/webSearch'
-import { Select } from 'antd'
 import { useTranslation } from 'react-i18next'
 
 import CutoffSettings from './CutoffSettings'
@@ -9,37 +10,42 @@ import CutoffSettings from './CutoffSettings'
 const INPUT_BOX_WIDTH_CUTOFF = '200px'
 
 const CompressionSettings = () => {
+  const { theme } = useTheme()
   const { t } = useTranslation()
   const { compressionConfig, updateCompressionConfig } = useWebSearchSettings()
 
+  const handleCompressionMethodChange = (value: 'none' | 'cutoff') => {
+    void updateCompressionConfig({
+      method: value,
+      cutoffLimit: value === 'cutoff' ? compressionConfig?.cutoffLimit || DEFAULT_WEB_SEARCH_CUTOFF_LIMIT : undefined
+    })
+  }
+
   const compressionMethodOptions = [
     { value: 'none', label: t('settings.tool.websearch.compression.method.none') },
     { value: 'cutoff', label: t('settings.tool.websearch.compression.method.cutoff') }
   ]
 
-  const handleCompressionMethodChange = (method: 'none' | 'cutoff') => {
-    void updateCompressionConfig({
-      method,
-      cutoffLimit: method === 'cutoff' ? compressionConfig.cutoffLimit || DEFAULT_WEB_SEARCH_CUTOFF_LIMIT : undefined
-    })
-  }
-
   return (
-    <SettingGroup>
+    <SettingGroup theme={theme}>
       <SettingTitle>{t('settings.tool.websearch.compression.title')}</SettingTitle>
       <SettingDivider />
 
-      <SettingRow>
-        <SettingRowTitle>{t('settings.tool.websearch.compression.method.label')}</SettingRowTitle>
-        <Select
-          value={compressionConfig?.method || 'none'}
-          style={{ width: INPUT_BOX_WIDTH_CUTOFF }}
-          onChange={handleCompressionMethodChange}
-          options={compressionMethodOptions}
-        />
+      <SettingRow className="gap-8 py-2">
+        <SettingRowTitle className="shrink-0">{t('settings.tool.websearch.compression.method.label')}</SettingRowTitle>
+        <Select value={compressionConfig?.method || 'none'} onValueChange={handleCompressionMethodChange}>
+          <SelectTrigger style={{ width: INPUT_BOX_WIDTH_CUTOFF }}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {compressionMethodOptions.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </SettingRow>
-      <SettingDivider />
-
       {compressionConfig?.method === 'cutoff' && <CutoffSettings />}
     </SettingGroup>
   )
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchGeneralSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchGeneralSettings.tsx
index 0af3fb4332..c81a7de7ed 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchGeneralSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchGeneralSettings.tsx
@@ -10,10 +10,12 @@ const WebSearchGeneralSettings: FC = () => {
   const { theme } = useTheme()
 
   return (
-    <SettingContainer theme={theme}>
-      <BasicSettings />
-      <CompressionSettings />
-      <BlacklistSettings />
+    <SettingContainer theme={theme} className="px-5 py-4">
+      <div className="flex w-full flex-col">
+        <BasicSettings />
+        <CompressionSettings />
+        <BlacklistSettings />
+      </div>
     </SettingContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
index 67eba01a0e..77c198caad 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
@@ -1,5 +1,5 @@
 import { CheckOutlined, ExportOutlined, LoadingOutlined } from '@ant-design/icons'
-import { Button, Flex, InfoTooltip, RowFlex, Tooltip } from '@cherrystudio/ui'
+import { Button, ButtonGroup, Divider, Flex, InfoTooltip, Input, Label, RowFlex, Tooltip } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import ApiKeyListPopup from '@renderer/components/Popups/ApiKeyListPopup/popup'
 import {
@@ -13,14 +13,20 @@ import { useDefaultWebSearchProvider, useWebSearchProvider } from '@renderer/hoo
 import { webSearchService } from '@renderer/services/WebSearchService'
 import type { WebSearchProviderId } from '@renderer/types'
 import { formatApiKeys } from '@renderer/utils'
-import { Divider, Form, Input } from 'antd'
-import Link from 'antd/es/typography/Link'
 import { List } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingDivider, SettingHelpLink, SettingHelpText, SettingHelpTextRow, SettingSubtitle, SettingTitle } from '..'
+import {
+  SettingDivider,
+  SettingHelpLink,
+  SettingHelpText,
+  SettingHelpTextRow,
+  SettingSubtitle,
+  SettingTitle,
+  SettingTitleExternalLink
+} from '..'
 
 const logger = loggerService.withContext('WebSearchProviderSetting')
 interface Props {
@@ -142,7 +148,6 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
   const providerLogo = getWebSearchProviderLogo(providerId)
 
   const isDefault = defaultProvider?.id === provider.id
-
   const needsApiKey = webSearchProviderRequiresApiKey(provider.id)
   const supportsBasicAuth = webSearchProviderSupportsBasicAuth(provider.id)
   const hasApiKey = apiKey.split(',').some((key) => key.trim() !== '')
@@ -163,16 +168,16 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
             {providerLogo ? (
               <providerLogo.Avatar size={20} shape="rounded" />
             ) : (
-              <div className="h-5 w-5 rounded bg-[var(--color-background-soft)]" />
+              <div className="h-5 w-5 rounded bg-(--color-background-subtle)" />
             )}
             <span className="font-medium text-sm">{provider.name}</span>
             {officialWebsite && webSearchProviderConfig?.websites && (
-              <Link target="_blank" href={webSearchProviderConfig.websites.official}>
-                <ExportOutlined style={{ color: 'var(--color-text)', fontSize: '12px' }} />
-              </Link>
+              <SettingTitleExternalLink href={webSearchProviderConfig.websites.official}>
+                <ExportOutlined style={{ fontSize: '12px' }} />
+              </SettingTitleExternalLink>
             )}
           </Flex>
-          <Button variant="default" disabled={!canSetAsDefault} onClick={handleSetAsDefault}>
+          <Button variant="outline" disabled={!canSetAsDefault} onClick={handleSetAsDefault}>
             {isDefault ? t('settings.tool.websearch.is_default') : t('settings.tool.websearch.set_as_default')}
           </Button>
         </Flex>
@@ -190,22 +195,27 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
             }}>
             {t('settings.provider.api_key.label')}
             <Tooltip content={t('settings.provider.api.key.list.open')} delay={500}>
-              <Button variant="ghost" size="icon-sm" onClick={openApiKeyList}>
+              <Button variant="outline" size="icon-sm" onClick={openApiKeyList}>
                 <List size={14} />
               </Button>
             </Tooltip>
           </SettingSubtitle>
-          <Flex className="gap-2">
-            <Input.Password
+          <ButtonGroup className="w-full">
+            <Input
+              type="password"
               value={apiKey}
               placeholder={t('settings.provider.api_key.label')}
               onChange={(e) => setApiKey(formatApiKeys(e.target.value))}
               onBlur={onUpdateApiKey}
               spellCheck={false}
-              type="password"
               autoFocus={apiKey === ''}
+              className="min-w-0 flex-1"
             />
-            <Button variant={apiValid ? 'ghost' : 'default'} onClick={checkSearch} disabled={!canCheckSearch}>
+            <Button
+              variant="outline"
+              className="h-9 shrink-0 px-3 shadow-none"
+              onClick={checkSearch}
+              disabled={!canCheckSearch}>
               {apiChecking ? (
                 <LoadingOutlined spin />
               ) : apiValid ? (
@@ -214,7 +224,7 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
                 t('settings.tool.websearch.check')
               )}
             </Button>
-          </Flex>
+          </ButtonGroup>
           <SettingHelpTextRow style={{ justifyContent: 'space-between', marginTop: 5 }}>
             <RowFlex>
               {apiKeyWebsite && (
@@ -258,44 +268,33 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
               }}
             />
           </SettingSubtitle>
-          <Flex>
-            <Form
-              layout="vertical"
-              style={{ width: '100%' }}
-              initialValues={{
-                username: basicAuthUsername,
-                password: basicAuthPassword
-              }}
-              onValuesChange={(changedValues) => {
-                // Update local state when form values change
-                if ('username' in changedValues) {
-                  setBasicAuthUsername(changedValues.username || '')
-                }
-                if ('password' in changedValues) {
-                  setBasicAuthPassword(changedValues.password || '')
-                }
-              }}>
-              <Form.Item label={t('settings.provider.basic_auth.user_name.label')} name="username">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="websearch-basic-auth-username">{t('settings.provider.basic_auth.user_name.label')}</Label>
+              <Input
+                id="websearch-basic-auth-username"
+                value={basicAuthUsername}
+                placeholder={t('settings.provider.basic_auth.user_name.tip')}
+                onChange={(e) => setBasicAuthUsername(e.target.value)}
+                onBlur={onUpdateBasicAuthUsername}
+              />
+            </div>
+            {basicAuthUsername && (
+              <div className="flex flex-col gap-2">
+                <Label htmlFor="websearch-basic-auth-password">
+                  {t('settings.provider.basic_auth.password.label')}
+                </Label>
                 <Input
-                  placeholder={t('settings.provider.basic_auth.user_name.tip')}
-                  onBlur={onUpdateBasicAuthUsername}
-                />
-              </Form.Item>
-              <Form.Item
-                label={t('settings.provider.basic_auth.password.label')}
-                name="password"
-                rules={[{ required: !!basicAuthUsername, validateTrigger: ['onBlur', 'onChange'] }]}
-                help=""
-                hidden={!basicAuthUsername}>
-                <Input.Password
+                  id="websearch-basic-auth-password"
+                  type="password"
+                  value={basicAuthPassword}
                   placeholder={t('settings.provider.basic_auth.password.tip')}
+                  onChange={(e) => setBasicAuthPassword(e.target.value)}
                   onBlur={onUpdateBasicAuthPassword}
-                  disabled={!basicAuthUsername}
-                  visibilityToggle={true}
                 />
-              </Form.Item>
-            </Form>
-          </Flex>
+              </div>
+            )}
+          </div>
         </>
       )}
     </>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
index d5e68c1be0..922b60beec 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/index.tsx
@@ -1,5 +1,4 @@
-import { Badge, MenuItem, MenuList } from '@cherrystudio/ui'
-import DividerWithText from '@renderer/components/DividerWithText'
+import { Badge, MenuDivider, MenuItem, MenuList } from '@cherrystudio/ui'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { getWebSearchProviderLogo } from '@renderer/config/webSearchProviders'
 import { useDefaultWebSearchProvider, useWebSearchProviders } from '@renderer/hooks/useWebSearchProviders'
@@ -8,6 +7,15 @@ import { Search } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import {
+  settingsContentScrollClassName,
+  settingsSubmenuDividerClassName,
+  settingsSubmenuItemClassName,
+  settingsSubmenuListClassName,
+  settingsSubmenuScrollClassName,
+  settingsSubmenuSectionTitleClassName
+} from '..'
+
 const WebSearchSettings: FC = () => {
   const { t } = useTranslation()
   const { providers } = useWebSearchProviders()
@@ -15,7 +23,6 @@ const WebSearchSettings: FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
 
-  // Get the currently active view
   const getActiveView = () => {
     const path = location.pathname
 
@@ -23,7 +30,6 @@ const WebSearchSettings: FC = () => {
       return 'general'
     }
 
-    // Check if it's a provider page
     for (const provider of providers) {
       if (path === `/settings/websearch/provider/${provider.id}`) {
         return provider.id
@@ -38,18 +44,17 @@ const WebSearchSettings: FC = () => {
   return (
     <div className="flex flex-1">
       <div className="flex h-[calc(100vh-var(--navbar-height)-6px)] w-full flex-1 flex-row overflow-hidden">
-        <Scrollbar
-          className="w-(--settings-width) border-(--color-border) border-r-[0.5px]"
-          style={{ height: 'calc(100vh - var(--navbar-height))' }}>
-          <MenuList className="box-border flex min-h-full flex-col p-3 pb-12">
+        <Scrollbar className={settingsSubmenuScrollClassName}>
+          <MenuList className={settingsSubmenuListClassName}>
             <MenuItem
               label={t('settings.tool.websearch.title')}
               active={activeView === 'general'}
               onClick={() => navigate({ to: '/settings/websearch/general' })}
               icon={<Search size={18} />}
-              className="font-medium"
+              className={settingsSubmenuItemClassName}
             />
-            <DividerWithText text={t('settings.tool.websearch.api_providers')} style={{ margin: '10px 0 8px 0' }} />
+            <MenuDivider className={settingsSubmenuDividerClassName} />
+            <div className={settingsSubmenuSectionTitleClassName}>{t('settings.tool.websearch.api_providers')}</div>
             {providers.map((provider) => {
               const logo = getWebSearchProviderLogo(provider.id)
               const isDefault = defaultProvider?.id === provider.id
@@ -65,10 +70,10 @@ const WebSearchSettings: FC = () => {
                     logo ? (
                       <logo.Avatar size={20} shape="rounded" />
                     ) : (
-                      <div className="h-5 w-5 rounded bg-(--color-background-soft)" />
+                      <div className="h-5 w-5 rounded bg-(--color-background-subtle)" />
                     )
                   }
-                  className="font-medium"
+                  className={settingsSubmenuItemClassName}
                   suffix={
                     isDefault ? (
                       <Badge className="mr-0 ml-auto rounded-full border border-green-500/30 bg-green-500/10 px-2.5 py-0.5 font-medium text-green-600 text-xs dark:text-green-400">
@@ -81,7 +86,7 @@ const WebSearchSettings: FC = () => {
             })}
           </MenuList>
         </Scrollbar>
-        <div className="relative flex flex-1">
+        <div className={`${settingsContentScrollClassName} relative flex`}>
           <Outlet />
         </div>
       </div>
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index 76ff872a61..47a95413e7 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -1,89 +1,105 @@
 import { cn } from '@renderer/utils'
 import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
 import React from 'react'
-import type { CSSProp } from 'styled-components'
-import styled from 'styled-components'
 
 export { Divider as SettingDivider } from '@cherrystudio/ui'
 
-export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 15px 18px;
-  overflow-y: scroll;
-  background: ${(props) => (props.theme === 'dark' ? 'transparent' : 'var(--color-background-soft)')};
+export const SettingContainer = ({
+  className,
+  theme,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { theme?: ThemeMode }) => (
+  <div
+    data-theme-mode={theme}
+    className={cn('flex min-h-0 flex-1 flex-col overflow-y-auto p-4 [&::-webkit-scrollbar]:hidden', className)}
+    {...props}
+  />
+)
 
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`
-
-export const SettingTitle = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-  font-size: 14px;
-  font-weight: bold;
-`
+export const SettingTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={cn('flex select-none items-center justify-between font-semibold text-[15px]', className)}
+    {...props}
+  />
+)
 
 export const SettingSubtitle = ({
   ref,
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement> & { ref?: React.RefObject<HTMLDivElement | null> }) => (
-  <div ref={ref} className={cn('mt-4 select-none font-bold text-(--color-text-1) text-sm', className)} {...props} />
+  <div ref={ref} className={cn('mt-4 select-none font-bold text-(--color-foreground) text-sm', className)} {...props} />
 )
 
-export const SettingDescription = styled.div`
-  font-size: 12px;
-  color: var(--color-text-3);
-  margin-top: 10px;
-`
+export const SettingDescription = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('mt-2.5 text-foreground-muted text-xs', className)} {...props} />
+)
 
-export const SettingRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  min-height: 24px;
-`
+export const SettingRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex min-h-6 items-center justify-between', className)} {...props} />
+)
 
-export const SettingRowTitle = styled.div`
-  font-size: 14px;
-  line-height: 18px;
-  color: var(--color-text-1);
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`
+export const SettingRowTitle = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center text-foreground text-sm leading-4.5', className)} {...props} />
+)
 
-export const SettingHelpTextRow = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 0;
-`
+export const SettingHelpTextRow = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('flex items-center py-1.25', className)} {...props} />
+)
 
-export const SettingHelpText = styled.div`
-  font-size: 11px;
-  color: var(--color-text);
-  opacity: 0.4;
-`
+export const SettingHelpText = ({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) => (
+  <div className={cn('text-[11px] text-foreground/40', className)} {...props} />
+)
 
 export const SettingHelpLink = ({ className, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+  <a className={cn('cursor-pointer text-(--color-primary) text-[11px] hover:underline', className)} {...props} />
+)
+
+export const SettingTitleExternalLink = ({
+  className,
+  target = '_blank',
+  rel = 'noreferrer',
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
   <a
-    className={cn('mx-1.25 cursor-pointer text-(--color-primary) text-[11px] hover:underline', className)}
+    target={target}
+    rel={rel}
+    className={cn('inline-flex items-center text-(--color-primary) hover:underline', className)}
     {...props}
   />
 )
 
-export const SettingGroup = styled.div<{ theme?: ThemeMode; css?: CSSProp }>`
-  margin-bottom: 20px;
-  border-radius: var(--radius-2xs);
-  border: 0.5px solid var(--color-border);
-  padding: 16px;
-  background: ${(props) => (props.theme === 'dark' ? '#00000010' : 'var(--color-background)')};
-`
+export const SettingGroup = ({
+  className,
+  theme,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'> & { theme?: ThemeMode }) => (
+  <div
+    data-theme-mode={theme}
+    className={cn('mt-2 border-border/60 border-t pt-3 first:mt-0 first:border-t-0 first:pt-0', className)}
+    {...props}
+  />
+)
+
+export const settingsSubmenuScrollClassName =
+  'h-[calc(100vh-var(--navbar-height))] w-(--settings-width) border-border border-r-[0.5px]'
+
+export const settingsSubmenuListClassName = 'flex min-h-full flex-col gap-0.5 p-2.5 pb-12 [box-sizing:border-box]'
+
+export const settingsSubmenuItemClassName =
+  'h-8 rounded-lg border-transparent px-2.5 my-[1px] font-semibold text-foreground/85 text-sm hover:!bg-muted data-[active=true]:!border-transparent data-[active=true]:!bg-muted data-[active=true]:!text-foreground [&_svg]:size-4 [&_svg]:text-foreground/70'
+
+export const settingsSubmenuSectionTitleClassName =
+  'px-2.5 pt-1.5 pb-1 font-medium text-foreground-muted text-xs first:pt-0'
+
+export const settingsSubmenuDividerClassName = 'my-1 bg-transparent'
+
+export const settingsContentScrollClassName = 'flex-1 min-h-0'
+
+export const settingsContentBodyClassName = 'flex min-h-full w-full flex-col px-5 py-4'
+
+export const settingsContentHeaderClassName = 'mb-5'
+
+export const settingsContentHeaderTitleClassName = 'font-semibold text-foreground text-[15px]'
+
+export const settingsContentHeaderDescriptionClassName = 'mt-1 text-foreground-muted text-sm'
diff --git a/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx b/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx
index 74dbc36ec8..6824430e81 100644
--- a/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx
+++ b/src/renderer/src/pages/store/assistants/presets/AssistantPresetsPage.tsx
@@ -86,7 +86,6 @@ const AssistantPresetsPage: FC = () => {
         closable: true,
         maskClosable: true,
         centered: true,
-        okButtonProps: { type: 'primary' },
         okText: t('assistants.presets.add.button'),
         onOk: () => createAssistantFromAgent(preset)
       })
@@ -161,10 +160,9 @@ const AssistantPresetsPage: FC = () => {
     setActiveGroup(group)
   }
 
-  const handleAddAgent = () => {
-    void AddAssistantPresetPopup.show().then(() => {
-      handleSearchClear()
-    })
+  const handleAddAgent = async () => {
+    await AddAssistantPresetPopup.show()
+    handleSearchClear()
   }
 
   const handleImportAgent = async () => {
diff --git a/src/renderer/src/pages/store/assistants/presets/components/AssistantPresetCard.tsx b/src/renderer/src/pages/store/assistants/presets/components/AssistantPresetCard.tsx
index d9bc3e94e1..96c29ae735 100644
--- a/src/renderer/src/pages/store/assistants/presets/components/AssistantPresetCard.tsx
+++ b/src/renderer/src/pages/store/assistants/presets/components/AssistantPresetCard.tsx
@@ -2,7 +2,7 @@ import { Button } from '@cherrystudio/ui'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { useAssistantPresets } from '@renderer/hooks/useAssistantPresets'
-import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
+import AssistantSettingsPopup from '@renderer/pages/home/AssistantSettings'
 import { createAssistantFromAgent } from '@renderer/services/AssistantService'
 import type { AssistantPreset } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
diff --git a/src/renderer/src/pages/translate/TranslatePage.tsx b/src/renderer/src/pages/translate/TranslatePage.tsx
index 769f910c40..32f3925a97 100644
--- a/src/renderer/src/pages/translate/TranslatePage.tsx
+++ b/src/renderer/src/pages/translate/TranslatePage.tsx
@@ -51,7 +51,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import TranslateHistoryList from './TranslateHistory'
+import TranslateHistoryList from './components/TranslateHistory'
 import TranslateSettings from './TranslateSettings'
 
 const logger = loggerService.withContext('TranslatePage')
diff --git a/src/renderer/src/pages/translate/TranslateSettings.tsx b/src/renderer/src/pages/translate/TranslateSettings.tsx
index db6169c32c..322643cf78 100644
--- a/src/renderer/src/pages/translate/TranslateSettings.tsx
+++ b/src/renderer/src/pages/translate/TranslateSettings.tsx
@@ -8,7 +8,7 @@ import type { FC } from 'react'
 import { memo, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import TranslateSettingsPopup from '../settings/TranslateSettingsPopup/TranslateSettingsPopup'
+import TranslateSettingsPopup from './components/TranslateSettingsPopup/TranslateSettingsPopup'
 
 // TODO: Just don't send so many props. Migrate them to redux.
 const TranslateSettings: FC<{
diff --git a/src/renderer/src/pages/translate/TranslateHistory.tsx b/src/renderer/src/pages/translate/components/TranslateHistory.tsx
similarity index 96%
rename from src/renderer/src/pages/translate/TranslateHistory.tsx
rename to src/renderer/src/pages/translate/components/TranslateHistory.tsx
index 9464b8b5c2..2d3712798f 100644
--- a/src/renderer/src/pages/translate/TranslateHistory.tsx
+++ b/src/renderer/src/pages/translate/components/TranslateHistory.tsx
@@ -210,7 +210,7 @@ const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItem
                         </Flex>
                         <HistoryListItemTextContainer>
                           <HistoryListItemTitle>{item.sourceText}</HistoryListItemTitle>
-                          <HistoryListItemTitle style={{ color: 'var(--color-text-2)' }}>
+                          <HistoryListItemTitle style={{ color: 'var(--color-foreground-secondary)' }}>
                             {item.targetText}
                           </HistoryListItemTitle>
                         </HistoryListItemTextContainer>
@@ -259,16 +259,16 @@ const HistoryListItemContainer = styled.div`
   position: relative;
   cursor: pointer;
   &:hover {
-    background-color: var(--color-background-mute);
+    background-color: var(--color-muted);
     button {
       opacity: 1;
     }
   }
 
-  border-top: 1px dashed var(--color-border-soft);
+  border-top: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
 
   &:last-child {
-    border-bottom: 1px dashed var(--color-border-soft);
+    border-bottom: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
   }
 `
 
@@ -294,12 +294,12 @@ const HistoryListItemTitle = styled.div`
 
 const HistoryListItemDate = styled.div`
   font-size: 12px;
-  color: var(--color-text-3);
+  color: var(--color-foreground-muted);
 `
 
 const HistoryListItemLanguage = styled.div`
   font-size: 12px;
-  color: var(--color-text-3);
+  color: var(--color-foreground-muted);
 `
 
 const HistoryListItemTextContainer = styled.div`
@@ -315,7 +315,7 @@ const IconWrapper = styled.div`
   height: 30px;
   width: 30px;
   border-radius: 15px;
-  background-color: var(--color-background-soft);
+  background-color: var(--color-secondary);
 `
 
 export default TranslateHistoryList
diff --git a/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageModal.tsx b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageModal.tsx
new file mode 100644
index 0000000000..c648d9b95a
--- /dev/null
+++ b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageModal.tsx
@@ -0,0 +1,205 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  InfoTooltip,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from '@cherrystudio/ui'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { loggerService } from '@logger'
+import EmojiPicker from '@renderer/components/EmojiPicker'
+import useTranslate from '@renderer/hooks/useTranslate'
+import { addCustomLanguage, updateCustomLanguage } from '@renderer/services/TranslateService'
+import type { CustomTranslateLanguage } from '@renderer/types'
+import type { FC } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
+import { useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import * as z from 'zod'
+
+type Props = {
+  isOpen: boolean
+  editingCustomLanguage?: CustomTranslateLanguage
+  onAdd: (item: CustomTranslateLanguage) => void
+  onEdit: (item: CustomTranslateLanguage) => void
+  onCancel: () => void
+}
+
+const logger = loggerService.withContext('CustomLanguageModal')
+const DEFAULT_EMOJI = '🏳️'
+
+const CustomLanguageModal = ({ isOpen, editingCustomLanguage, onAdd, onEdit, onCancel }: Props) => {
+  const { t } = useTranslation()
+  const { translateLanguages } = useTranslate()
+
+  const langCodeList = useMemo(() => translateLanguages.map((item) => item.langCode), [translateLanguages])
+
+  const schema = useMemo(
+    () =>
+      z.object({
+        emoji: z.string().min(1),
+        value: z
+          .string()
+          .min(1, t('settings.translate.custom.error.value.empty'))
+          .max(32, t('settings.translate.custom.error.value.too_long')),
+        langCode: z
+          .string()
+          .min(1, t('settings.translate.custom.error.langCode.empty'))
+          .regex(/^[a-zA-Z]{2,3}(-[a-zA-Z]{2,3})?$/, t('settings.translate.custom.error.langCode.invalid'))
+          .refine(
+            (value) => {
+              logger.silly('validate langCode', { value, langCodeList, editingCustomLanguage })
+              const normalized = value.toLowerCase()
+              if (editingCustomLanguage) {
+                return !langCodeList.includes(value) || value === editingCustomLanguage.langCode
+              }
+              return !langCodeList.includes(normalized)
+            },
+            { message: t('settings.translate.custom.error.langCode.exists') }
+          )
+      }),
+    [t, langCodeList, editingCustomLanguage]
+  )
+
+  type FieldType = z.infer<typeof schema>
+
+  const form = useForm<FieldType>({
+    resolver: zodResolver(schema) as any,
+    defaultValues: { emoji: DEFAULT_EMOJI, value: '', langCode: '' }
+  })
+
+  useEffect(() => {
+    if (!isOpen) return
+    if (editingCustomLanguage) {
+      form.reset({
+        emoji: editingCustomLanguage.emoji,
+        value: editingCustomLanguage.value,
+        langCode: editingCustomLanguage.langCode
+      })
+    } else {
+      form.reset({ emoji: DEFAULT_EMOJI, value: '', langCode: '' })
+    }
+  }, [editingCustomLanguage, isOpen, form])
+
+  const title = useMemo(
+    () => (editingCustomLanguage ? t('common.edit') : t('common.add')) + t('translate.custom.label'),
+    [editingCustomLanguage, t]
+  )
+
+  const handleSubmit = useCallback(
+    async (values: FieldType) => {
+      const { emoji, value, langCode } = values
+
+      if (editingCustomLanguage) {
+        try {
+          await updateCustomLanguage(editingCustomLanguage, value, emoji, langCode)
+          onEdit({ ...editingCustomLanguage, emoji, value, langCode })
+          window.toast.success(t('settings.translate.custom.success.update'))
+        } catch (e) {
+          window.toast.error(t('settings.translate.custom.error.update') + ': ' + (e as Error).message)
+        }
+      } else {
+        try {
+          const added = await addCustomLanguage(value, emoji, langCode)
+          onAdd(added)
+          window.toast.success(t('settings.translate.custom.success.add'))
+        } catch (e) {
+          window.toast.error(t('settings.translate.custom.error.add') + ': ' + (e as Error).message)
+        }
+      }
+      onCancel()
+    },
+    [editingCustomLanguage, onCancel, t, onEdit, onAdd]
+  )
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(next) => !next && onCancel()}>
+      <DialogContent className="sm:max-w-[480px]" onPointerDownOutside={(e) => e.preventDefault()}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="flex flex-col gap-4">
+            <FormField
+              control={form.control}
+              name="emoji"
+              render={({ field }) => (
+                <FormItem className="flex flex-row items-center gap-3 [&>label]:w-20">
+                  <FormLabel>Emoji</FormLabel>
+                  <FormControl>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button type="button" size="icon" variant="outline" className="aspect-square">
+                          <Emoji emoji={field.value} />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0" align="start">
+                        <EmojiPicker onEmojiClick={(emoji) => field.onChange(emoji)} />
+                      </PopoverContent>
+                    </Popover>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="value"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center gap-2">
+                    <span>{t('settings.translate.custom.value.label')}</span>
+                    <InfoTooltip content={t('settings.translate.custom.value.help')} />
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('settings.translate.custom.value.placeholder')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="langCode"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel className="flex items-center gap-2">
+                    <span>{t('settings.translate.custom.langCode.label')}</span>
+                    <InfoTooltip content={t('settings.translate.custom.langCode.help')} />
+                  </FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('settings.translate.custom.langCode.placeholder')} {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={onCancel}>
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit">{editingCustomLanguage ? t('common.save') : t('common.add')}</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const Emoji: FC<{ emoji: string; size?: number }> = ({ emoji, size = 18 }) => {
+  return <div style={{ lineHeight: 0, fontSize: size }}>{emoji}</div>
+}
+
+export default CustomLanguageModal
diff --git a/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageSettings.tsx b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageSettings.tsx
new file mode 100644
index 0000000000..3609c6c179
--- /dev/null
+++ b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/CustomLanguageSettings.tsx
@@ -0,0 +1,189 @@
+import { Button, type ColumnDef, ConfirmDialog, DataTable, EmptyState, RowFlex } from '@cherrystudio/ui'
+import { loggerService } from '@logger'
+import { SettingSubtitle } from '@renderer/pages/settings'
+import { deleteCustomLanguage, getAllCustomLanguages } from '@renderer/services/TranslateService'
+import type { CustomTranslateLanguage } from '@renderer/types'
+import { Pencil, Plus, Trash2 } from 'lucide-react'
+import { memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import CustomLanguageModal from './CustomLanguageModal'
+
+const logger = loggerService.withContext('CustomLanguageSettings')
+
+const CustomLanguageSettings = () => {
+  const { t } = useTranslation()
+  const [displayedItems, setDisplayedItems] = useState<CustomTranslateLanguage[]>([])
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingCustomLanguage, setEditingCustomLanguage] = useState<CustomTranslateLanguage>()
+  const [deletingCustomLanguage, setDeletingCustomLanguage] = useState<CustomTranslateLanguage | null>(null)
+
+  const onDelete = useCallback(
+    async (id: string) => {
+      try {
+        await deleteCustomLanguage(id)
+        setDisplayedItems((prev) => prev.filter((item) => item.id !== id))
+        window.toast.success(t('settings.translate.custom.success.delete'))
+      } catch (e) {
+        window.toast.error(t('settings.translate.custom.error.delete'))
+      }
+    },
+    [t]
+  )
+
+  const onClickAdd = () => {
+    startTransition(async () => {
+      setEditingCustomLanguage(undefined)
+      setIsModalOpen(true)
+    })
+  }
+
+  const onClickEdit = useCallback((target: CustomTranslateLanguage) => {
+    startTransition(async () => {
+      setEditingCustomLanguage(target)
+      setIsModalOpen(true)
+    })
+  }, [])
+
+  const onCancel = () => {
+    startTransition(async () => {
+      setIsModalOpen(false)
+    })
+  }
+
+  const onItemAdd = (target: CustomTranslateLanguage) => {
+    startTransition(async () => {
+      setDisplayedItems((prev) => [...prev, target])
+    })
+  }
+
+  const onItemEdit = (target: CustomTranslateLanguage) => {
+    startTransition(async () => {
+      setDisplayedItems((prev) => prev.map((item) => (item.id === target.id ? target : item)))
+    })
+  }
+
+  const onConfirmDelete = useCallback(async () => {
+    if (!deletingCustomLanguage) {
+      return
+    }
+
+    await onDelete(deletingCustomLanguage.id)
+    setDeletingCustomLanguage(null)
+  }, [deletingCustomLanguage, onDelete])
+
+  const columns = useMemo<ColumnDef<CustomTranslateLanguage>[]>(
+    () => [
+      {
+        accessorKey: 'emoji',
+        header: 'Emoji',
+        meta: { width: 72, align: 'center' },
+        cell: ({ getValue }) => <span className="text-base">{getValue<string>()}</span>
+      },
+      {
+        accessorKey: 'value',
+        header: t('settings.translate.custom.value.label'),
+        meta: { width: '34%' }
+      },
+      {
+        accessorKey: 'langCode',
+        header: t('settings.translate.custom.langCode.label'),
+        meta: { width: '28%' }
+      },
+      {
+        id: 'action',
+        header: t('settings.translate.custom.table.action.title'),
+        meta: { width: 84, align: 'center' },
+        cell: ({ row }) => {
+          const record = row.original
+
+          return (
+            <div className="flex items-center gap-1.5">
+              <Button
+                aria-label={t('common.edit')}
+                className="text-muted-foreground hover:text-foreground"
+                onClick={() => onClickEdit(record)}
+                size="icon-sm"
+                title={t('common.edit')}
+                variant="ghost">
+                <Pencil size={14} />
+              </Button>
+              <Button
+                aria-label={t('common.delete')}
+                className="text-destructive hover:text-destructive"
+                onClick={() => setDeletingCustomLanguage(record)}
+                size="icon-sm"
+                title={t('common.delete')}
+                variant="ghost">
+                <Trash2 size={14} />
+              </Button>
+            </div>
+          )
+        }
+      }
+    ],
+    [onClickEdit, t]
+  )
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const data = await getAllCustomLanguages()
+        setDisplayedItems(data)
+      } catch (error) {
+        logger.error('Failed to load custom languages:', error as Error)
+      }
+    }
+    void loadData()
+  }, [])
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col justify-between">
+        <RowFlex className="justify-between">
+          <SettingSubtitle className="mt-0">{t('translate.custom.label')}</SettingSubtitle>
+          <Button
+            aria-label={t('common.add')}
+            onClick={onClickAdd}
+            size="icon-sm"
+            title={t('common.add')}
+            variant="ghost">
+            <Plus size={16} />
+          </Button>
+        </RowFlex>
+        <div className="flex flex-1 flex-col">
+          <DataTable
+            data={displayedItems}
+            columns={columns}
+            rowKey="id"
+            emptyText={<EmptyState compact preset="no-translate" description={t('common.no_results')} />}
+            tableLayout="fixed"
+          />
+        </div>
+      </div>
+      <ConfirmDialog
+        open={deletingCustomLanguage !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDeletingCustomLanguage(null)
+          }
+        }}
+        title={t('settings.translate.custom.delete.title')}
+        description={t('settings.translate.custom.delete.description')}
+        confirmText={t('common.delete')}
+        cancelText={t('common.cancel')}
+        destructive
+        onConfirm={onConfirmDelete}
+      />
+      <CustomLanguageModal
+        isOpen={isModalOpen}
+        editingCustomLanguage={editingCustomLanguage}
+        onAdd={onItemAdd}
+        onEdit={onItemEdit}
+        onCancel={onCancel}
+      />
+    </>
+  )
+}
+
+export default memo(CustomLanguageSettings)
diff --git a/src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslatePromptSettings.tsx b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslatePromptSettings.tsx
new file mode 100644
index 0000000000..978d98006c
--- /dev/null
+++ b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslatePromptSettings.tsx
@@ -0,0 +1,47 @@
+import { RedoOutlined } from '@ant-design/icons'
+import { Textarea, Tooltip } from '@cherrystudio/ui'
+import { usePreference } from '@data/hooks/usePreference'
+import { SettingSubtitle } from '@renderer/pages/settings'
+import { TRANSLATE_PROMPT } from '@shared/config/prompts'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const TranslatePromptSettings = () => {
+  const { t } = useTranslation()
+  const [translateModelPrompt, setTranslateModelPrompt] = usePreference('feature.translate.model_prompt')
+
+  const [localPrompt, setLocalPrompt] = useState(translateModelPrompt)
+
+  const onResetTranslatePrompt = () => {
+    setLocalPrompt(TRANSLATE_PROMPT)
+    void setTranslateModelPrompt(TRANSLATE_PROMPT)
+  }
+
+  return (
+    <section className="space-y-2">
+      <SettingSubtitle className="mt-0 flex h-[30px] items-center justify-between text-(--color-foreground)">
+        <span className="font-bold text-(--color-foreground)">{t('settings.translate.prompt')}</span>
+        {localPrompt !== TRANSLATE_PROMPT && (
+          <Tooltip content={t('common.reset')}>
+            <button
+              type="reset"
+              className="flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-lg border-none bg-transparent p-0 text-foreground transition-colors hover:bg-accent"
+              onClick={onResetTranslatePrompt}>
+              <RedoOutlined size={16} />
+            </button>
+          </Tooltip>
+        )}
+      </SettingSubtitle>
+      <Textarea.Input
+        value={localPrompt}
+        onChange={(e) => setLocalPrompt(e.target.value)}
+        onBlur={(e) => void setTranslateModelPrompt(e.target.value)}
+        rows={4}
+        className="max-h-60 min-h-24 text-foreground text-sm leading-5"
+        placeholder={t('settings.models.translate_model_prompt_message')}
+      />
+    </section>
+  )
+}
+
+export default TranslatePromptSettings
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/TranslateSettingsPopup.tsx b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslateSettingsPopup.tsx
similarity index 53%
rename from src/renderer/src/pages/settings/TranslateSettingsPopup/TranslateSettingsPopup.tsx
rename to src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslateSettingsPopup.tsx
index 7c6ff0f78e..7ef4129250 100644
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/TranslateSettingsPopup.tsx
+++ b/src/renderer/src/pages/translate/components/TranslateSettingsPopup/TranslateSettingsPopup.tsx
@@ -1,10 +1,10 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Modal } from 'antd'
+import { SettingContainer, SettingGroup } from '@renderer/pages/settings'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingGroup } from '..'
 import CustomLanguageSettings from './CustomLanguageSettings'
 import TranslatePromptSettings from './TranslatePromptSettings'
 
@@ -12,43 +12,39 @@ interface Props {
   resolve: (data: any) => void
 }
 
+export const TranslateSettingsPanelContent = () => {
+  const { theme } = useTheme()
+
+  return (
+    <SettingContainer theme={theme} style={{ padding: 0, background: 'transparent' }}>
+      <TranslatePromptSettings />
+      <SettingGroup theme={theme} style={{ flex: 1 }}>
+        <CustomLanguageSettings />
+      </SettingGroup>
+    </SettingContainer>
+  )
+}
+
 const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [open, setOpen] = useState(true)
-  const { theme } = useTheme()
   const { t } = useTranslation()
 
-  const onOk = () => {
+  const closePopup = () => {
     setOpen(false)
-  }
-
-  const onCancel = () => {
-    setOpen(false)
-  }
-
-  const onClose = () => {
     resolve({})
   }
 
-  TranslateSettingsPopup.hide = onCancel
+  TranslateSettingsPopup.hide = closePopup
 
   return (
-    <Modal
-      title={t('settings.translate.title')}
-      open={open}
-      onOk={onOk}
-      onCancel={onCancel}
-      afterClose={onClose}
-      transitionName="animation-move-down"
-      width="80vw"
-      footer={null}
-      centered>
-      <SettingContainer theme={theme} style={{ padding: '10px 0', background: 'transparent' }}>
-        <TranslatePromptSettings />
-        <SettingGroup theme={theme} style={{ flex: 1 }}>
-          <CustomLanguageSettings />
-        </SettingGroup>
-      </SettingContainer>
-    </Modal>
+    <Dialog open={open} onOpenChange={(next) => !next && closePopup()}>
+      <DialogContent className="max-h-[90vh] max-w-[80vw] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t('settings.translate.title')}</DialogTitle>
+        </DialogHeader>
+        <TranslateSettingsPanelContent />
+      </DialogContent>
+    </Dialog>
   )
 }
 
diff --git a/src/renderer/src/routeTree.gen.ts b/src/renderer/src/routeTree.gen.ts
index 0b8cc784ca..ceb715a77b 100644
--- a/src/renderer/src/routeTree.gen.ts
+++ b/src/renderer/src/routeTree.gen.ts
@@ -22,12 +22,12 @@ import { Route as SettingsScheduledTasksRouteImport } from './routes/settings/sc
 import { Route as SettingsQuickAssistantRouteImport } from './routes/settings/quickAssistant'
 import { Route as SettingsProviderRouteImport } from './routes/settings/provider'
 import { Route as SettingsPromptsRouteImport } from './routes/settings/prompts'
-import { Route as SettingsNotesRouteImport } from './routes/settings/notes'
+import { Route as SettingsPluginsRouteImport } from './routes/settings/plugins'
 import { Route as SettingsModelRouteImport } from './routes/settings/model'
 import { Route as SettingsMcpRouteImport } from './routes/settings/mcp'
+import { Route as SettingsIntegrationsRouteImport } from './routes/settings/integrations'
 import { Route as SettingsGeneralRouteImport } from './routes/settings/general'
 import { Route as SettingsDocprocessRouteImport } from './routes/settings/docprocess'
-import { Route as SettingsDisplayRouteImport } from './routes/settings/display'
 import { Route as SettingsDataRouteImport } from './routes/settings/data'
 import { Route as SettingsComponentLabRouteImport } from './routes/settings/component-lab'
 import { Route as SettingsChannelsRouteImport } from './routes/settings/channels'
@@ -124,9 +124,9 @@ const SettingsPromptsRoute = SettingsPromptsRouteImport.update({
   path: '/prompts',
   getParentRoute: () => SettingsRoute,
 } as any)
-const SettingsNotesRoute = SettingsNotesRouteImport.update({
-  id: '/notes',
-  path: '/notes',
+const SettingsPluginsRoute = SettingsPluginsRouteImport.update({
+  id: '/plugins',
+  path: '/plugins',
   getParentRoute: () => SettingsRoute,
 } as any)
 const SettingsModelRoute = SettingsModelRouteImport.update({
@@ -139,6 +139,11 @@ const SettingsMcpRoute = SettingsMcpRouteImport.update({
   path: '/mcp',
   getParentRoute: () => SettingsRoute,
 } as any)
+const SettingsIntegrationsRoute = SettingsIntegrationsRouteImport.update({
+  id: '/integrations',
+  path: '/integrations',
+  getParentRoute: () => SettingsRoute,
+} as any)
 const SettingsGeneralRoute = SettingsGeneralRouteImport.update({
   id: '/general',
   path: '/general',
@@ -149,11 +154,6 @@ const SettingsDocprocessRoute = SettingsDocprocessRouteImport.update({
   path: '/docprocess',
   getParentRoute: () => SettingsRoute,
 } as any)
-const SettingsDisplayRoute = SettingsDisplayRouteImport.update({
-  id: '/display',
-  path: '/display',
-  getParentRoute: () => SettingsRoute,
-} as any)
 const SettingsDataRoute = SettingsDataRouteImport.update({
   id: '/data',
   path: '/data',
@@ -322,12 +322,12 @@ export interface FileRoutesByFullPath {
   '/settings/channels': typeof SettingsChannelsRoute
   '/settings/component-lab': typeof SettingsComponentLabRoute
   '/settings/data': typeof SettingsDataRoute
-  '/settings/display': typeof SettingsDisplayRoute
   '/settings/docprocess': typeof SettingsDocprocessRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/integrations': typeof SettingsIntegrationsRoute
   '/settings/mcp': typeof SettingsMcpRouteWithChildren
   '/settings/model': typeof SettingsModelRoute
-  '/settings/notes': typeof SettingsNotesRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
   '/settings/prompts': typeof SettingsPromptsRoute
   '/settings/provider': typeof SettingsProviderRoute
   '/settings/quickAssistant': typeof SettingsQuickAssistantRoute
@@ -371,11 +371,11 @@ export interface FileRoutesByTo {
   '/settings/channels': typeof SettingsChannelsRoute
   '/settings/component-lab': typeof SettingsComponentLabRoute
   '/settings/data': typeof SettingsDataRoute
-  '/settings/display': typeof SettingsDisplayRoute
   '/settings/docprocess': typeof SettingsDocprocessRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/integrations': typeof SettingsIntegrationsRoute
   '/settings/model': typeof SettingsModelRoute
-  '/settings/notes': typeof SettingsNotesRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
   '/settings/prompts': typeof SettingsPromptsRoute
   '/settings/provider': typeof SettingsProviderRoute
   '/settings/quickAssistant': typeof SettingsQuickAssistantRoute
@@ -420,12 +420,12 @@ export interface FileRoutesById {
   '/settings/channels': typeof SettingsChannelsRoute
   '/settings/component-lab': typeof SettingsComponentLabRoute
   '/settings/data': typeof SettingsDataRoute
-  '/settings/display': typeof SettingsDisplayRoute
   '/settings/docprocess': typeof SettingsDocprocessRoute
   '/settings/general': typeof SettingsGeneralRoute
+  '/settings/integrations': typeof SettingsIntegrationsRoute
   '/settings/mcp': typeof SettingsMcpRouteWithChildren
   '/settings/model': typeof SettingsModelRoute
-  '/settings/notes': typeof SettingsNotesRoute
+  '/settings/plugins': typeof SettingsPluginsRoute
   '/settings/prompts': typeof SettingsPromptsRoute
   '/settings/provider': typeof SettingsProviderRoute
   '/settings/quickAssistant': typeof SettingsQuickAssistantRoute
@@ -472,12 +472,12 @@ export interface FileRouteTypes {
     | '/settings/channels'
     | '/settings/component-lab'
     | '/settings/data'
-    | '/settings/display'
     | '/settings/docprocess'
     | '/settings/general'
+    | '/settings/integrations'
     | '/settings/mcp'
     | '/settings/model'
-    | '/settings/notes'
+    | '/settings/plugins'
     | '/settings/prompts'
     | '/settings/provider'
     | '/settings/quickAssistant'
@@ -521,11 +521,11 @@ export interface FileRouteTypes {
     | '/settings/channels'
     | '/settings/component-lab'
     | '/settings/data'
-    | '/settings/display'
     | '/settings/docprocess'
     | '/settings/general'
+    | '/settings/integrations'
     | '/settings/model'
-    | '/settings/notes'
+    | '/settings/plugins'
     | '/settings/prompts'
     | '/settings/provider'
     | '/settings/quickAssistant'
@@ -569,12 +569,12 @@ export interface FileRouteTypes {
     | '/settings/channels'
     | '/settings/component-lab'
     | '/settings/data'
-    | '/settings/display'
     | '/settings/docprocess'
     | '/settings/general'
+    | '/settings/integrations'
     | '/settings/mcp'
     | '/settings/model'
-    | '/settings/notes'
+    | '/settings/plugins'
     | '/settings/prompts'
     | '/settings/provider'
     | '/settings/quickAssistant'
@@ -701,11 +701,11 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsPromptsRouteImport
       parentRoute: typeof SettingsRoute
     }
-    '/settings/notes': {
-      id: '/settings/notes'
-      path: '/notes'
-      fullPath: '/settings/notes'
-      preLoaderRoute: typeof SettingsNotesRouteImport
+    '/settings/plugins': {
+      id: '/settings/plugins'
+      path: '/plugins'
+      fullPath: '/settings/plugins'
+      preLoaderRoute: typeof SettingsPluginsRouteImport
       parentRoute: typeof SettingsRoute
     }
     '/settings/model': {
@@ -722,6 +722,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsMcpRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/settings/integrations': {
+      id: '/settings/integrations'
+      path: '/integrations'
+      fullPath: '/settings/integrations'
+      preLoaderRoute: typeof SettingsIntegrationsRouteImport
+      parentRoute: typeof SettingsRoute
+    }
     '/settings/general': {
       id: '/settings/general'
       path: '/general'
@@ -736,13 +743,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsDocprocessRouteImport
       parentRoute: typeof SettingsRoute
     }
-    '/settings/display': {
-      id: '/settings/display'
-      path: '/display'
-      fullPath: '/settings/display'
-      preLoaderRoute: typeof SettingsDisplayRouteImport
-      parentRoute: typeof SettingsRoute
-    }
     '/settings/data': {
       id: '/settings/data'
       path: '/data'
@@ -1031,12 +1031,12 @@ interface SettingsRouteChildren {
   SettingsChannelsRoute: typeof SettingsChannelsRoute
   SettingsComponentLabRoute: typeof SettingsComponentLabRoute
   SettingsDataRoute: typeof SettingsDataRoute
-  SettingsDisplayRoute: typeof SettingsDisplayRoute
   SettingsDocprocessRoute: typeof SettingsDocprocessRoute
   SettingsGeneralRoute: typeof SettingsGeneralRoute
+  SettingsIntegrationsRoute: typeof SettingsIntegrationsRoute
   SettingsMcpRoute: typeof SettingsMcpRouteWithChildren
   SettingsModelRoute: typeof SettingsModelRoute
-  SettingsNotesRoute: typeof SettingsNotesRoute
+  SettingsPluginsRoute: typeof SettingsPluginsRoute
   SettingsPromptsRoute: typeof SettingsPromptsRoute
   SettingsProviderRoute: typeof SettingsProviderRoute
   SettingsQuickAssistantRoute: typeof SettingsQuickAssistantRoute
@@ -1054,12 +1054,12 @@ const SettingsRouteChildren: SettingsRouteChildren = {
   SettingsChannelsRoute: SettingsChannelsRoute,
   SettingsComponentLabRoute: SettingsComponentLabRoute,
   SettingsDataRoute: SettingsDataRoute,
-  SettingsDisplayRoute: SettingsDisplayRoute,
   SettingsDocprocessRoute: SettingsDocprocessRoute,
   SettingsGeneralRoute: SettingsGeneralRoute,
+  SettingsIntegrationsRoute: SettingsIntegrationsRoute,
   SettingsMcpRoute: SettingsMcpRouteWithChildren,
   SettingsModelRoute: SettingsModelRoute,
-  SettingsNotesRoute: SettingsNotesRoute,
+  SettingsPluginsRoute: SettingsPluginsRoute,
   SettingsPromptsRoute: SettingsPromptsRoute,
   SettingsProviderRoute: SettingsProviderRoute,
   SettingsQuickAssistantRoute: SettingsQuickAssistantRoute,
diff --git a/src/renderer/src/routes/settings/display.tsx b/src/renderer/src/routes/settings/display.tsx
deleted file mode 100644
index ef53cb8fec..0000000000
--- a/src/renderer/src/routes/settings/display.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import DisplaySettings from '@renderer/pages/settings/DisplaySettings/DisplaySettings'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/settings/display')({
-  component: DisplaySettings
-})
diff --git a/src/renderer/src/routes/settings/general.tsx b/src/renderer/src/routes/settings/general.tsx
index 788de1139f..45d869fc83 100644
--- a/src/renderer/src/routes/settings/general.tsx
+++ b/src/renderer/src/routes/settings/general.tsx
@@ -1,6 +1,6 @@
-import GeneralSettings from '@renderer/pages/settings/GeneralSettings'
+import CommonSettings from '@renderer/pages/settings/CommonSettings'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/settings/general')({
-  component: GeneralSettings
+  component: CommonSettings
 })
diff --git a/src/renderer/src/routes/settings/integrations.tsx b/src/renderer/src/routes/settings/integrations.tsx
new file mode 100644
index 0000000000..744528bad4
--- /dev/null
+++ b/src/renderer/src/routes/settings/integrations.tsx
@@ -0,0 +1,6 @@
+import IntegrationSettings from '@renderer/pages/settings/IntegrationSettings'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/settings/integrations')({
+  component: IntegrationSettings
+})
diff --git a/src/renderer/src/routes/settings/mcp/mcp-install.tsx b/src/renderer/src/routes/settings/mcp/mcp-install.tsx
index d91dd5389a..31671b07e7 100644
--- a/src/renderer/src/routes/settings/mcp/mcp-install.tsx
+++ b/src/renderer/src/routes/settings/mcp/mcp-install.tsx
@@ -1,10 +1,10 @@
 import { SettingContainer } from '@renderer/pages/settings'
-import InstallNpxUv from '@renderer/pages/settings/MCPSettings/InstallNpxUv'
+import EnvironmentDependencies from '@renderer/pages/settings/MCPSettings/EnvironmentDependencies'
 import { createFileRoute } from '@tanstack/react-router'
 
 const McpInstallWrapper = () => (
   <SettingContainer style={{ backgroundColor: 'inherit' }}>
-    <InstallNpxUv />
+    <EnvironmentDependencies />
   </SettingContainer>
 )
 
diff --git a/src/renderer/src/routes/settings/notes.tsx b/src/renderer/src/routes/settings/notes.tsx
deleted file mode 100644
index bff74d3d99..0000000000
--- a/src/renderer/src/routes/settings/notes.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import NotesSettings from '@renderer/pages/notes/NotesSettings'
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/settings/notes')({
-  component: NotesSettings
-})
diff --git a/src/renderer/src/routes/settings/plugins.tsx b/src/renderer/src/routes/settings/plugins.tsx
new file mode 100644
index 0000000000..55b1c319b3
--- /dev/null
+++ b/src/renderer/src/routes/settings/plugins.tsx
@@ -0,0 +1,15 @@
+import { SettingContainer } from '@renderer/pages/settings'
+import EnvironmentDependencies from '@renderer/pages/settings/MCPSettings/EnvironmentDependencies'
+import { createFileRoute } from '@tanstack/react-router'
+
+const PluginsWrapper = () => (
+  <SettingContainer className="bg-transparent">
+    <div className="flex w-full flex-col">
+      <EnvironmentDependencies />
+    </div>
+  </SettingContainer>
+)
+
+export const Route = createFileRoute('/settings/plugins')({
+  component: PluginsWrapper
+})
diff --git a/src/renderer/src/services/BackupService.ts b/src/renderer/src/services/BackupService.ts
index f25aed82d3..066f156738 100644
--- a/src/renderer/src/services/BackupService.ts
+++ b/src/renderer/src/services/BackupService.ts
@@ -153,6 +153,8 @@ export async function reset() {
     title: i18n.t('common.warning'),
     content: i18n.t('message.reset.confirm.content'),
     centered: true,
+    okText: i18n.t('common.confirm'),
+    cancelText: i18n.t('common.cancel'),
     okButtonProps: {
       danger: true
     },
@@ -161,6 +163,8 @@ export async function reset() {
         title: i18n.t('message.reset.double.confirm.title'),
         content: i18n.t('message.reset.double.confirm.content'),
         centered: true,
+        okText: i18n.t('common.confirm'),
+        cancelText: i18n.t('common.cancel'),
         onOk: async () => {
           localStorage.clear()
           await clearDatabase()
diff --git a/src/renderer/src/services/SettingsWindowService.ts b/src/renderer/src/services/SettingsWindowService.ts
new file mode 100644
index 0000000000..9337488f92
--- /dev/null
+++ b/src/renderer/src/services/SettingsWindowService.ts
@@ -0,0 +1,5 @@
+import { DEFAULT_SETTINGS_PATH, type SettingsPath } from '@shared/data/types/settingsPath'
+
+export function openSettingsWindow(path: SettingsPath = DEFAULT_SETTINGS_PATH): Promise<string> {
+  return window.api.windowManager.openSettings(path)
+}
diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts
index 1e9e6c88fd..ed2f0c05c9 100644
--- a/src/renderer/src/utils/index.ts
+++ b/src/renderer/src/utils/index.ts
@@ -1,6 +1,6 @@
 import { loggerService } from '@logger'
+import type { AppModalFuncProps } from '@renderer/components/AppModal'
 import type { Model, ModelType } from '@renderer/types'
-import type { ModalFuncProps } from 'antd'
 import { isEqual } from 'lodash'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -137,7 +137,7 @@ export function loadScript(url: string) {
 /**
  * 检查 URL 是否包含路径部分。
  * @param {string} url 输入 URL 字符串
- * @returns {boolean} 如果 URL 包含路径则返回 true，否则返回 false
+ * @returns {boolean} true when the URL contains a path.
  */
 export function hasPath(url: string): boolean {
   try {
@@ -150,11 +150,11 @@ export function hasPath(url: string): boolean {
 }
 
 /**
- * 显示确认模态框。
- * @param {ModalFuncProps} params 模态框参数
- * @returns {Promise<boolean>} 用户确认返回 true，取消返回 false
+ * Shows a confirmation modal.
+ * @param {AppModalFuncProps} params Modal options.
+ * @returns {Promise<boolean>} true when confirmed, false when cancelled.
  */
-export function modalConfirm(params: ModalFuncProps): Promise<boolean> {
+export function modalConfirm(params: AppModalFuncProps): Promise<boolean> {
   return new Promise((resolve) => {
     window.modal.confirm({
       centered: true,
diff --git a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
index 2869ba77b9..f9dda63b86 100644
--- a/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
+++ b/src/renderer/src/windows/selection/toolbar/SelectionToolbar.tsx
@@ -356,6 +356,8 @@ const LogoWrapper = styled.div<{ $draggable: boolean }>`
 const Logo = styled.img`
   height: var(--selection-toolbar-logo-size);
   width: var(--selection-toolbar-logo-size);
+  border-radius: 50%;
+  object-fit: cover;
   &.animate {
     animation: rotate 1s ease;
   }
diff --git a/src/renderer/src/windows/settings/entryPoint.tsx b/src/renderer/src/windows/settings/entryPoint.tsx
new file mode 100644
index 0000000000..c48ed9af83
--- /dev/null
+++ b/src/renderer/src/windows/settings/entryPoint.tsx
@@ -0,0 +1,158 @@
+import '@renderer/assets/styles/index.css'
+import '@renderer/assets/styles/tailwind.css'
+import '@ant-design/v5-patch-for-react-19'
+import '@renderer/databases'
+
+import { Alert, Button } from '@cherrystudio/ui'
+import { preferenceService } from '@data/PreferenceService'
+import { loggerService } from '@logger'
+import TopViewContainer from '@renderer/components/TopView'
+import AntdProvider from '@renderer/context/AntdProvider'
+import { CodeStyleProvider } from '@renderer/context/CodeStyleProvider'
+import { NotificationProvider } from '@renderer/context/NotificationProvider'
+import StyleSheetManager from '@renderer/context/StyleSheetManager'
+import { ThemeProvider } from '@renderer/context/ThemeProvider'
+import { useWindowInitData } from '@renderer/core/hooks/useWindowInitData'
+import useMacTransparentWindow from '@renderer/hooks/useMacTransparentWindow'
+import i18n from '@renderer/i18n'
+import { routeTree } from '@renderer/routeTree.gen'
+import NavigationService from '@renderer/services/NavigationService'
+import store, { persistor } from '@renderer/store'
+import { formatErrorMessage } from '@renderer/utils/error'
+import { cn } from '@renderer/utils/style'
+import type { UnifiedPreferenceKeyType } from '@shared/data/preference/preferenceTypes'
+import { DEFAULT_SETTINGS_PATH, normalizeSettingsPath } from '@shared/data/types/settingsPath'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/react-router'
+import { type CSSProperties, useEffect, useMemo } from 'react'
+import { createRoot } from 'react-dom/client'
+import { Provider } from 'react-redux'
+import { PersistGate } from 'redux-persist/integration/react'
+
+loggerService.initWindowSource('SettingsWindow')
+
+const SETTINGS_SHELL_PREFERENCE_KEYS: UnifiedPreferenceKeyType[] = [
+  'app.language',
+  'ui.theme_mode',
+  'ui.window_style',
+  'ui.theme_user.color_primary',
+  'chat.code.editor.enabled',
+  'chat.code.editor.theme_light',
+  'chat.code.editor.theme_dark',
+  'chat.code.viewer.theme_light',
+  'chat.code.viewer.theme_dark'
+]
+
+const logger = loggerService.withContext('SettingsWindowEntry')
+
+async function preloadSettingsPreferences() {
+  try {
+    await preferenceService.preload(SETTINGS_SHELL_PREFERENCE_KEYS)
+    return null
+  } catch (error) {
+    logger.error('Failed to preload settings preferences', error as Error)
+    return error
+  }
+}
+
+async function getInitialSettingsPath() {
+  try {
+    return normalizeSettingsPath(await window.api.windowManager.getInitData<unknown>())
+  } catch (error) {
+    logger.error('Failed to get settings window init data', error as Error)
+    return DEFAULT_SETTINGS_PATH
+  }
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      refetchOnWindowFocus: false
+    }
+  }
+})
+
+function SettingsWindowFatalError({ error }: { error: unknown }) {
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-background p-4 text-foreground">
+      <Alert
+        type="error"
+        showIcon
+        message={i18n.t('error.boundary.default.message')}
+        description={formatErrorMessage(error)}
+        action={
+          <Button size="sm" onClick={() => void window.api.reload()}>
+            {i18n.t('error.boundary.default.reload')}
+          </Button>
+        }
+        className="max-w-xl"
+      />
+    </div>
+  )
+}
+
+function SettingsWindowRouter({ initialPath }: { initialPath: string }) {
+  const router = useMemo(() => {
+    const history = createMemoryHistory({ initialEntries: [normalizeSettingsPath(initialPath)] })
+    return createRouter({ routeTree, history })
+  }, [initialPath])
+  const targetPath = useWindowInitData<string>()
+
+  useEffect(() => {
+    NavigationService.setNavigate(router.navigate)
+  }, [router])
+
+  useEffect(() => {
+    if (!targetPath) return
+    void router.navigate({ to: normalizeSettingsPath(targetPath) })
+  }, [router, targetPath])
+
+  return <RouterProvider router={router} />
+}
+
+function SettingsWindowApp({ initialPath }: { initialPath: string }): React.ReactElement {
+  const shellStyle = { '--navbar-height': '0px' } as CSSProperties
+  const isMacTransparentWindow = useMacTransparentWindow()
+
+  return (
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <StyleSheetManager>
+          <ThemeProvider>
+            <AntdProvider>
+              <NotificationProvider>
+                <CodeStyleProvider>
+                  <PersistGate loading={null} persistor={persistor}>
+                    <TopViewContainer>
+                      <div
+                        className={cn(
+                          'flex h-screen w-screen overflow-hidden text-foreground',
+                          isMacTransparentWindow ? 'bg-transparent' : 'bg-background'
+                        )}
+                        style={shellStyle}>
+                        <SettingsWindowRouter initialPath={initialPath} />
+                      </div>
+                    </TopViewContainer>
+                  </PersistGate>
+                </CodeStyleProvider>
+              </NotificationProvider>
+            </AntdProvider>
+          </ThemeProvider>
+        </StyleSheetManager>
+      </QueryClientProvider>
+    </Provider>
+  )
+}
+
+const root = createRoot(document.getElementById('root') as HTMLElement)
+const preloadError = await preloadSettingsPreferences()
+const initialSettingsPath = preloadError ? DEFAULT_SETTINGS_PATH : await getInitialSettingsPath()
+
+root.render(
+  preloadError ? (
+    <SettingsWindowFatalError error={preloadError} />
+  ) : (
+    <SettingsWindowApp initialPath={initialSettingsPath} />
+  )
+)
diff --git a/tests/renderer.setup.ts b/tests/renderer.setup.ts
index 17252ff579..2a3bd01e05 100644
--- a/tests/renderer.setup.ts
+++ b/tests/renderer.setup.ts
@@ -154,10 +154,33 @@ vi.mock('@cherrystudio/ui', () => {
     Button: ({ children, onPress, disabled, isDisabled, startContent, ...props }) =>
       React.createElement(
         'button',
-        { ...props, onClick: onPress, disabled: disabled || isDisabled },
+        { ...props, onClick: onPress ?? props.onClick, disabled: disabled || isDisabled },
         startContent,
         children
       ),
+    Input: ({ hasError, 'aria-invalid': ariaInvalid, className, list, ...props }) =>
+      React.createElement('input', {
+        ...props,
+        list,
+        'aria-invalid': ariaInvalid,
+        className: [
+          className,
+          hasError || ariaInvalid ? 'ant-input-status-error' : undefined,
+          list && ariaInvalid ? 'ant-select-status-error' : undefined
+        ]
+          .filter(Boolean)
+          .join(' ')
+      }),
+    Textarea: {
+      Input: ({ hasError, 'aria-invalid': ariaInvalid, className, ...props }) =>
+        React.createElement('textarea', {
+          ...props,
+          'aria-invalid': ariaInvalid,
+          className: [className, hasError || ariaInvalid ? 'ant-input-status-error' : undefined]
+            .filter(Boolean)
+            .join(' ')
+        })
+    },
     Tooltip: ({ children, title, content, mouseEnterDelay, ...props }) => {
       // Support both old (title) and new (content) API
       const tooltipText = content || title
@@ -188,6 +211,14 @@ vi.mock('@cherrystudio/ui', () => {
     Ellipsis: ({ children, ...props }) => React.createElement('div', { ...props, 'data-testid': 'ellipsis' }, children),
     TextBadge: ({ children, ...props }) =>
       React.createElement('div', { ...props, 'data-testid': 'text-badge' }, children),
+    Alert: ({ children, message, description, type, ...props }) =>
+      React.createElement(
+        'div',
+        { ...props, role: 'alert', 'data-testid': 'alert', 'data-type': type },
+        message,
+        description,
+        children
+      ),
     HelpTooltip: ({ children, ...props }) =>
       React.createElement('div', { ...props, 'data-testid': 'help-tooltip' }, children),
     InfoTooltip: ({ children, ...props }) =>