diff --git a/eslint.config.mjs b/eslint.config.mjs
index 19b4efcd31..546c6d377f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -48,6 +48,27 @@ export default defineConfig([
       '@eslint-react/no-children-to-array': 'off'
     }
   },
+  {
+    ignores: [
+      'node_modules/**',
+      'build/**',
+      'dist/**',
+      'out/**',
+      'local/**',
+      '.yarn/**',
+      '.gitignore',
+      'scripts/cloudflare-worker.js',
+      'src/main/integration/nutstore/sso/lib/**',
+      'src/main/integration/cherryin/index.js',
+      'src/main/integration/nutstore/sso/lib/**',
+      'src/renderer/src/ui/**',
+      'packages/**/dist'
+    ]
+  },
+  // turn off oxlint supported rules.
+  ...oxlint.configs['flat/eslint'],
+  ...oxlint.configs['flat/typescript'],
+  ...oxlint.configs['flat/unicorn'],
   {
     // LoggerService Custom Rules - only apply to src directory
     files: ['src/**/*.{ts,tsx,js,jsx}'],
@@ -121,34 +142,18 @@ export default defineConfig([
             {
               name: 'antd',
               // TODO: migrate message again
-              importNames: ['Flex'],
+              importNames: ['Flex', 'Switch'],
               message:
-                '❌ Do not import Flex from antd. Use our custom Layout components instead: import { Flex } from "@cherrystudio/ui"'
-            }
+                '❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
+            },
+            // {
+            //   name: '@heroui/react',
+            //   message:
+            //     '❌ Do not import components from heroui directly. Use our wrapped components instead: import { ... } from "@cherrystudio/ui"'
+            // }
           ]
         }
       ]
     }
-  },
-  {
-    ignores: [
-      'node_modules/**',
-      'build/**',
-      'dist/**',
-      'out/**',
-      'local/**',
-      '.yarn/**',
-      '.gitignore',
-      'scripts/cloudflare-worker.js',
-      'src/main/integration/nutstore/sso/lib/**',
-      'src/main/integration/cherryin/index.js',
-      'src/main/integration/nutstore/sso/lib/**',
-      'src/renderer/src/ui/**',
-      'packages/**/dist'
-    ]
-  },
-  // turn off oxlint supported rules.
-  ...oxlint.configs['flat/eslint'],
-  ...oxlint.configs['flat/typescript'],
-  ...oxlint.configs['flat/unicorn']
+  }
 ])
diff --git a/packages/ui/src/components/base/Switch/index.tsx b/packages/ui/src/components/base/Switch/index.tsx
new file mode 100644
index 0000000000..b3fdf7b989
--- /dev/null
+++ b/packages/ui/src/components/base/Switch/index.tsx
@@ -0,0 +1,27 @@
+import type { SwitchProps } from '@heroui/react'
+import { Spinner, Switch } from '@heroui/react'
+
+// Enhanced Switch component with loading state support
+interface CustomSwitchProps extends SwitchProps {
+  isLoading?: boolean
+}
+
+/**
+ * A customized Switch component based on HeroUI Switch
+ * @see https://www.heroui.com/docs/components/switch#api
+ * @param isLoading When true, displays a loading spinner in the switch thumb
+ */
+const CustomizedSwitch = ({ isLoading, children, ref, thumbIcon, ...props }: CustomSwitchProps) => {
+  const finalThumbIcon = isLoading ? <Spinner size="sm" /> : thumbIcon
+
+  return (
+    <Switch ref={ref} {...props} thumbIcon={finalThumbIcon}>
+      {children}
+    </Switch>
+  )
+}
+
+CustomizedSwitch.displayName = 'Switch'
+
+export { CustomizedSwitch as Switch }
+export type { CustomSwitchProps as SwitchProps }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index c5f3727e34..8e83e2ea82 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -10,6 +10,7 @@ export { default as IndicatorLight } from './base/IndicatorLight'
 export { default as Spinner } from './base/Spinner'
 export type { StatusTagProps, StatusType } from './base/StatusTag'
 export { ErrorTag, InfoTag, StatusTag, SuccessTag, WarnTag } from './base/StatusTag'
+export { Switch } from './base/Switch'
 export { default as TextBadge } from './base/TextBadge'
 
 // Display Components
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 9eb12d4de3..6f3e963d06 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -1,9 +1 @@
-import { type ClassValue, clsx } from 'clsx'
-
-/**
- * 合并CSS类名的工具函数
- * 基于clsx，支持条件类名和Tailwind CSS
- */
-export function cn(...inputs: ClassValue[]) {
-  return clsx(inputs)
-}
+export { cn } from '@heroui/react'
diff --git a/src/renderer/src/components/Buttons/ActionIconButton.tsx b/src/renderer/src/components/Buttons/ActionIconButton.tsx
index 9f5c98abf0..d571f7ff17 100644
--- a/src/renderer/src/components/Buttons/ActionIconButton.tsx
+++ b/src/renderer/src/components/Buttons/ActionIconButton.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@heroui/react'
+import { cn } from '@cherrystudio/ui'
 import type { ButtonProps } from 'antd'
 import { Button } from 'antd'
 import React, { memo } from 'react'
diff --git a/src/renderer/src/components/ObsidianExportDialog.tsx b/src/renderer/src/components/ObsidianExportDialog.tsx
index 9cad3986e7..5ccac03d3c 100644
--- a/src/renderer/src/components/ObsidianExportDialog.tsx
+++ b/src/renderer/src/components/ObsidianExportDialog.tsx
@@ -1,3 +1,4 @@
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import i18n from '@renderer/i18n'
@@ -10,7 +11,7 @@ import {
   messageToMarkdownWithReasoning,
   topicToMarkdown
 } from '@renderer/utils/export'
-import { Alert, Empty, Form, Input, Modal, Select, Spin, Switch, TreeSelect } from 'antd'
+import { Alert, Empty, Form, Input, Modal, Select, Spin, TreeSelect } from 'antd'
 import React, { useEffect, useState } from 'react'
 const logger = loggerService.withContext('ObsidianExportDialog')
 
@@ -410,7 +411,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({
           </Select>
         </Form.Item>
         <Form.Item label={i18n.t('chat.topics.export.obsidian_reasoning')}>
-          <Switch checked={exportReasoning} onChange={setExportReasoning} />
+          <Switch isSelected={exportReasoning} onValueChange={setExportReasoning} />
         </Form.Item>
       </Form>
     </Modal>
diff --git a/src/renderer/src/context/HeroUIProvider.tsx b/src/renderer/src/context/HeroUIProvider.tsx
index 1a0f31a89b..d6f9780660 100644
--- a/src/renderer/src/context/HeroUIProvider.tsx
+++ b/src/renderer/src/context/HeroUIProvider.tsx
@@ -1,6 +1,7 @@
 import { HeroUIProvider } from '@heroui/react'
 import { useSettings } from '@renderer/hooks/useSettings'
 
+// TODO: migrate to ui package
 const AppHeroUIProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { language } = useSettings()
   return (
diff --git a/src/renderer/src/hero.ts b/src/renderer/src/hero.ts
index 93a081c30b..a93a523a01 100644
--- a/src/renderer/src/hero.ts
+++ b/src/renderer/src/hero.ts
@@ -1,2 +1,5 @@
 import { heroui } from '@heroui/react'
-export default heroui()
+
+const hero: ReturnType<typeof heroui> = heroui()
+
+export default hero
diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
index 4c61f497fe..e405e79f9d 100644
--- a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
+++ b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
 import EditableNumber from '@renderer/components/EditableNumber'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -21,7 +22,7 @@ import { modalConfirm } from '@renderer/utils'
 import { getSendMessageShortcutLabel } from '@renderer/utils/input'
 import type { SendMessageShortcut } from '@shared/data/preference/preferenceTypes'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Button, Col, InputNumber, Row, Slider, Switch } from 'antd'
+import { Button, Col, InputNumber, Row, Slider } from 'antd'
 import { Settings2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -188,10 +189,10 @@ const SettingsTab: FC<Props> = (props) => {
               <HelpTooltip title={t('chat.settings.temperature.tip')} />
             </SettingRowTitleSmall>
             <Switch
-              size="small"
-              style={{ marginLeft: 'auto' }}
-              checked={enableTemperature}
-              onChange={(enabled) => {
+              size="sm"
+              className="ml-auto"
+              isSelected={enableTemperature}
+              onValueChange={(enabled) => {
                 setEnableTemperature(enabled)
                 onUpdateAssistantSettings({ enableTemperature: enabled })
               }}
@@ -235,9 +236,9 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingRow>
             <SettingRowTitleSmall>{t('models.stream_output')}</SettingRowTitleSmall>
             <Switch
-              size="small"
-              checked={streamOutput}
-              onChange={(checked) => {
+              size="sm"
+              isSelected={streamOutput}
+              onValueChange={(checked) => {
                 setStreamOutput(checked)
                 onUpdateAssistantSettings({ streamOutput: checked })
               }}
@@ -252,9 +253,9 @@ const SettingsTab: FC<Props> = (props) => {
               </SettingRowTitleSmall>
             </Row>
             <Switch
-              size="small"
-              checked={enableMaxTokens}
-              onChange={async (enabled) => {
+              size="sm"
+              isSelected={enableMaxTokens}
+              onValueChange={async (enabled) => {
                 if (enabled) {
                   const confirmed = await modalConfirm({
                     title: t('chat.settings.max_tokens.confirm'),
@@ -302,15 +303,15 @@ const SettingsTab: FC<Props> = (props) => {
         <SettingGroup>
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.prompt')}</SettingRowTitleSmall>
-            <Switch size="small" checked={showPrompt} onChange={(checked) => setShowPrompt(checked)} />
+            <Switch size="sm" isSelected={showPrompt} onValueChange={setShowPrompt} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.use_serif_font')}</SettingRowTitleSmall>
             <Switch
-              size="small"
-              checked={messageFont === 'serif'}
-              onChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
+              size="sm"
+              isSelected={messageFont === 'serif'}
+              onValueChange={(checked) => setMessageFont(checked ? 'serif' : 'system')}
             />
           </SettingRow>
           <SettingDivider />
@@ -319,16 +320,12 @@ const SettingsTab: FC<Props> = (props) => {
               {t('chat.settings.thought_auto_collapse.label')}
               <HelpTooltip title={t('chat.settings.thought_auto_collapse.tip')} />
             </SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={thoughtAutoCollapse}
-              onChange={(checked) => setThoughtAutoCollapse(checked)}
-            />
+            <Switch size="sm" isSelected={thoughtAutoCollapse} onValueChange={setThoughtAutoCollapse} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.show_message_outline')}</SettingRowTitleSmall>
-            <Switch size="small" checked={showMessageOutline} onChange={(checked) => setShowMessageOutline(checked)} />
+            <Switch size="sm" isSelected={showMessageOutline} onValueChange={setShowMessageOutline} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
@@ -413,11 +410,7 @@ const SettingsTab: FC<Props> = (props) => {
               {t('settings.math.single_dollar.label')}
               <HelpTooltip title={t('settings.math.single_dollar.tip')} />
             </SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={mathEnableSingleDollar}
-              onChange={(checked) => setMathEnableSingleDollar(checked)}
-            />
+            <Switch size="sm" isSelected={mathEnableSingleDollar} onValueChange={setMathEnableSingleDollar} />
           </SettingRow>
           <SettingDivider />
         </SettingGroup>
@@ -441,7 +434,7 @@ const SettingsTab: FC<Props> = (props) => {
               {t('chat.settings.code_fancy_block.label')}
               <HelpTooltip title={t('chat.settings.code_fancy_block.tip')} />
             </SettingRowTitleSmall>
-            <Switch size="small" checked={codeFancyBlock} onChange={(checked) => setCodeFancyBlock(checked)} />
+            <Switch size="sm" isSelected={codeFancyBlock} onValueChange={setCodeFancyBlock} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
@@ -450,9 +443,9 @@ const SettingsTab: FC<Props> = (props) => {
               <HelpTooltip title={t('chat.settings.code_execution.tip')} />
             </SettingRowTitleSmall>
             <Switch
-              size="small"
-              checked={codeExecution.enabled}
-              onChange={(checked) => setCodeExecution({ enabled: checked })}
+              size="sm"
+              isSelected={codeExecution.enabled}
+              onValueChange={(checked) => setCodeExecution({ enabled: checked })}
             />
           </SettingRow>
           {codeExecution.enabled && (
@@ -479,9 +472,9 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingRow>
             <SettingRowTitleSmall>{t('chat.settings.code_editor.title')}</SettingRowTitleSmall>
             <Switch
-              size="small"
-              checked={codeEditor.enabled}
-              onChange={(checked) => setCodeEditor({ enabled: checked })}
+              size="sm"
+              isSelected={codeEditor.enabled}
+              onValueChange={(checked) => setCodeEditor({ enabled: checked })}
             />
           </SettingRow>
           {codeEditor.enabled && (
@@ -490,36 +483,36 @@ const SettingsTab: FC<Props> = (props) => {
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.highlight_active_line')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
-                  checked={codeEditor.highlightActiveLine}
-                  onChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
+                  size="sm"
+                  isSelected={codeEditor.highlightActiveLine}
+                  onValueChange={(checked) => setCodeEditor({ highlightActiveLine: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.fold_gutter')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
-                  checked={codeEditor.foldGutter}
-                  onChange={(checked) => setCodeEditor({ foldGutter: checked })}
+                  size="sm"
+                  isSelected={codeEditor.foldGutter}
+                  onValueChange={(checked) => setCodeEditor({ foldGutter: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.autocompletion')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
-                  checked={codeEditor.autocompletion}
-                  onChange={(checked) => setCodeEditor({ autocompletion: checked })}
+                  size="sm"
+                  isSelected={codeEditor.autocompletion}
+                  onValueChange={(checked) => setCodeEditor({ autocompletion: checked })}
                 />
               </SettingRow>
               <SettingDivider />
               <SettingRow style={{ paddingLeft: 8 }}>
                 <SettingRowTitleSmall>{t('chat.settings.code_editor.keymap')}</SettingRowTitleSmall>
                 <Switch
-                  size="small"
-                  checked={codeEditor.keymap}
-                  onChange={(checked) => setCodeEditor({ keymap: checked })}
+                  size="sm"
+                  isSelected={codeEditor.keymap}
+                  onValueChange={(checked) => setCodeEditor({ keymap: checked })}
                 />
               </SettingRow>
             </>
@@ -527,21 +520,17 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('chat.settings.show_line_numbers')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={codeShowLineNumbers}
-              onChange={(checked) => setCodeShowLineNumbers(checked)}
-            />
+            <Switch size="sm" isSelected={codeShowLineNumbers} onValueChange={setCodeShowLineNumbers} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('chat.settings.code_collapsible')}</SettingRowTitleSmall>
-            <Switch size="small" checked={codeCollapsible} onChange={(checked) => setCodeCollapsible(checked)} />
+            <Switch size="sm" isSelected={codeCollapsible} onValueChange={setCodeCollapsible} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('chat.settings.code_wrappable')}</SettingRowTitleSmall>
-            <Switch size="small" checked={codeWrappable} onChange={(checked) => setCodeWrappable(checked)} />
+            <Switch size="sm" isSelected={codeWrappable} onValueChange={setCodeWrappable} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
@@ -549,7 +538,7 @@ const SettingsTab: FC<Props> = (props) => {
               {t('chat.settings.code_image_tools.label')}
               <HelpTooltip title={t('chat.settings.code_image_tools.tip')} />
             </SettingRowTitleSmall>
-            <Switch size="small" checked={codeImageTools} onChange={(checked) => setCodeImageTools(checked)} />
+            <Switch size="sm" isSelected={codeImageTools} onValueChange={setCodeImageTools} />
           </SettingRow>
         </SettingGroup>
         <SettingDivider />
@@ -558,20 +547,12 @@ const SettingsTab: FC<Props> = (props) => {
         <SettingGroup>
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.show_estimated_tokens')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={showInputEstimatedTokens}
-              onChange={(checked) => setShowInputEstimatedTokens(checked)}
-            />
+            <Switch size="sm" isSelected={showInputEstimatedTokens} onValueChange={setShowInputEstimatedTokens} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.paste_long_text_as_file')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={pasteLongTextAsFile}
-              onChange={(checked) => setPasteLongTextAsFile(checked)}
-            />
+            <Switch size="sm" isSelected={pasteLongTextAsFile} onValueChange={setPasteLongTextAsFile} />
           </SettingRow>
           {pasteLongTextAsFile && (
             <>
@@ -594,9 +575,9 @@ const SettingsTab: FC<Props> = (props) => {
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.markdown_rendering_input_message')}</SettingRowTitleSmall>
             <Switch
-              size="small"
-              checked={renderInputMessageAsMarkdown}
-              onChange={(checked) => setRenderInputMessageAsMarkdown(checked)}
+              size="sm"
+              isSelected={renderInputMessageAsMarkdown}
+              onValueChange={setRenderInputMessageAsMarkdown}
             />
           </SettingRow>
           <SettingDivider />
@@ -604,49 +585,29 @@ const SettingsTab: FC<Props> = (props) => {
             <>
               <SettingRow>
                 <SettingRowTitleSmall>{t('settings.input.auto_translate_with_space')}</SettingRowTitleSmall>
-                <Switch
-                  size="small"
-                  checked={autoTranslateWithSpace}
-                  onChange={(checked) => setAutoTranslateWithSpace(checked)}
-                />
+                <Switch size="sm" isSelected={autoTranslateWithSpace} onValueChange={setAutoTranslateWithSpace} />
               </SettingRow>
               <SettingDivider />
             </>
           )}
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.input.show_translate_confirm')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={showTranslateConfirm}
-              onChange={(checked) => setShowTranslateConfirm(checked)}
-            />
+            <Switch size="sm" isSelected={showTranslateConfirm} onValueChange={setShowTranslateConfirm} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.enable_quick_triggers')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={enableQuickPanelTriggers}
-              onChange={(checked) => setEnableQuickPanelTriggers(checked)}
-            />
+            <Switch size="sm" isSelected={enableQuickPanelTriggers} onValueChange={setEnableQuickPanelTriggers} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.confirm_delete_message')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={confirmDeleteMessage}
-              onChange={(checked) => setConfirmDeleteMessage(checked)}
-            />
+            <Switch size="sm" isSelected={confirmDeleteMessage} onValueChange={setConfirmDeleteMessage} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitleSmall>{t('settings.messages.input.confirm_regenerate_message')}</SettingRowTitleSmall>
-            <Switch
-              size="small"
-              checked={confirmRegenerateMessage}
-              onChange={(checked) => setConfirmRegenerateMessage(checked)}
-            />
+            <Switch size="sm" isSelected={confirmRegenerateMessage} onValueChange={setConfirmRegenerateMessage} />
           </SettingRow>
           <SettingDivider />
           <SettingRow>
diff --git a/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx b/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
index da1e6e61ff..7b3925d5b8 100644
--- a/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
+++ b/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
@@ -1,9 +1,10 @@
 import { UndoOutlined } from '@ant-design/icons' // 导入重置图标
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { DEFAULT_MIN_APPS } from '@renderer/config/minapps'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { SettingDescription, SettingDivider, SettingRowTitle, SettingTitle } from '@renderer/pages/settings'
-import { Button, message, Slider, Switch, Tooltip } from 'antd'
+import { Button, message, Slider, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -97,7 +98,7 @@ const MiniAppSettings: FC = () => {
         <SettingLabelGroup>
           <SettingRowTitle>{t('settings.miniapps.open_link_external.title')}</SettingRowTitle>
         </SettingLabelGroup>
-        <Switch checked={minappsOpenLinkExternal} onChange={(checked) => setMinappsOpenLinkExternal(checked)} />
+        <Switch isSelected={minappsOpenLinkExternal} onValueChange={(checked) => setMinappsOpenLinkExternal(checked)} />
       </SettingRow>
       <SettingDivider />
       {/* 缓存小程序数量设置 */}
@@ -134,7 +135,10 @@ const MiniAppSettings: FC = () => {
           <SettingRowTitle>{t('settings.miniapps.sidebar_title')}</SettingRowTitle>
           <SettingDescription>{t('settings.miniapps.sidebar_description')}</SettingDescription>
         </SettingLabelGroup>
-        <Switch checked={showOpenedMinappsInSidebar} onChange={(checked) => setShowOpenedMinappsInSidebar(checked)} />
+        <Switch
+          isSelected={showOpenedMinappsInSidebar}
+          onValueChange={(checked) => setShowOpenedMinappsInSidebar(checked)}
+        />
       </SettingRow>
     </Container>
   )
diff --git a/src/renderer/src/pages/paintings/AihubmixPage.tsx b/src/renderer/src/pages/paintings/AihubmixPage.tsx
index e5f06b8e52..38d9045ee4 100644
--- a/src/renderer/src/pages/paintings/AihubmixPage.tsx
+++ b/src/renderer/src/pages/paintings/AihubmixPage.tsx
@@ -1,5 +1,6 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -20,7 +21,7 @@ import { translateText } from '@renderer/services/TranslateService'
 import type { FileMetadata } from '@renderer/types'
 import type { PaintingAction, PaintingsState } from '@renderer/types'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Switch, Tooltip, Upload } from 'antd'
+import { Avatar, Button, Input, InputNumber, Radio, Segmented, Select, Slider, Tooltip, Upload } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -747,8 +748,8 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
         return (
           <RowFlex>
             <Switch
-              checked={(painting[item.key!] || item.initialValue) as boolean}
-              onChange={(checked) => updatePaintingState({ [item.key!]: checked })}
+              isSelected={(painting[item.key!] || item.initialValue) as boolean}
+              onValueChange={(checked) => updatePaintingState({ [item.key!]: checked })}
             />
           </RowFlex>
         )
diff --git a/src/renderer/src/pages/paintings/DmxapiPage.tsx b/src/renderer/src/pages/paintings/DmxapiPage.tsx
index df2c833d56..0d47a9263f 100644
--- a/src/renderer/src/pages/paintings/DmxapiPage.tsx
+++ b/src/renderer/src/pages/paintings/DmxapiPage.tsx
@@ -1,5 +1,6 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import DMXAPIToImg from '@renderer/assets/images/providers/DMXAPI-to-img.webp'
 import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
@@ -13,7 +14,7 @@ import FileManager from '@renderer/services/FileManager'
 import type { FileMetadata } from '@renderer/types'
 import { convertToBase64, uuid } from '@renderer/utils'
 import type { DmxapiPainting } from '@types'
-import { Avatar, Button, Input, InputNumber, Segmented, Select, Switch, Tooltip } from 'antd'
+import { Avatar, Button, Input, InputNumber, Segmented, Select, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -960,7 +961,7 @@ const DmxapiPage: FC<{ Options: string[] }> = ({ Options }) => {
             </Tooltip>
           </SettingTitle>
           <RowFlex>
-            <Switch checked={painting.autoCreate} onChange={(checked) => onChangeAutoCreate(checked)} />
+            <Switch isSelected={painting.autoCreate} onValueChange={(checked) => onChangeAutoCreate(checked)} />
           </RowFlex>
         </LeftContainer>
         <MainContainer>
diff --git a/src/renderer/src/pages/paintings/SiliconPage.tsx b/src/renderer/src/pages/paintings/SiliconPage.tsx
index 173c8ab5b6..0b54f4e2db 100644
--- a/src/renderer/src/pages/paintings/SiliconPage.tsx
+++ b/src/renderer/src/pages/paintings/SiliconPage.tsx
@@ -1,5 +1,6 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import { ColFlex, RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -24,7 +25,7 @@ import FileManager from '@renderer/services/FileManager'
 import { translateText } from '@renderer/services/TranslateService'
 import type { FileMetadata, Painting } from '@renderer/types'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Button, Input, InputNumber, Radio, Select, Slider, Switch, Tooltip } from 'antd'
+import { Button, Input, InputNumber, Radio, Select, Slider, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -485,8 +486,8 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => {
           </SettingTitle>
           <RowFlex>
             <Switch
-              checked={painting.promptEnhancement}
-              onChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
+              isSelected={painting.promptEnhancement}
+              onValueChange={(checked) => updatePaintingState({ promptEnhancement: checked })}
             />
           </RowFlex>
         </LeftContainer>
diff --git a/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx b/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
index 7495ad1a59..dab3e27b6d 100644
--- a/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
+++ b/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
@@ -1,7 +1,8 @@
 import { CloseOutlined, LinkOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons'
+import { Switch } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { convertToBase64 } from '@renderer/utils'
-import { Button, Input, InputNumber, Select, Switch, Upload } from 'antd'
+import { Button, Input, InputNumber, Select, Upload } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { useCallback } from 'react'
 
@@ -205,8 +206,8 @@ export const DynamicFormRender: React.FC<DynamicFormRenderProps> = ({
   if (type === 'boolean') {
     return (
       <Switch
-        checked={value !== undefined ? value : defaultValue}
-        onChange={(checked) => onChange(propertyName, checked)}
+        isSelected={value !== undefined ? value : defaultValue}
+        onValueChange={(checked) => onChange(propertyName, checked)}
         style={{ width: '2px' }}
       />
     )
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index 1751c5d949..2dfb7ddeb0 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -1,5 +1,6 @@
 import { GithubOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import IndicatorLight from '@renderer/components/IndicatorLight'
 import { APP_NAME, AppLogo } from '@renderer/config/env'
@@ -13,7 +14,7 @@ import { handleSaveData } from '@renderer/store'
 import { runAsyncFunction } from '@renderer/utils'
 import { UpgradeChannel } from '@shared/data/preference/preferenceTypes'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Avatar, Button, Progress, Radio, Row, Switch, Tag, Tooltip } from 'antd'
+import { Avatar, Button, Progress, Radio, Row, Tag, Tooltip } from 'antd'
 import { debounce } from 'lodash'
 import { Bug, FileCheck, Github, Globe, Mail, Rss } from 'lucide-react'
 import { BadgeQuestionMark } from 'lucide-react'
@@ -237,13 +238,13 @@ const AboutSettings: FC = () => {
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.general.auto_check_update.title')}</SettingRowTitle>
-              <Switch value={autoCheckUpdate} onChange={(v) => setAutoCheckUpdate(v)} />
+              <Switch isSelected={autoCheckUpdate} onValueChange={(v) => setAutoCheckUpdate(v)} />
             </SettingRow>
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.general.test_plan.title')}</SettingRowTitle>
               <Tooltip title={t('settings.general.test_plan.tooltip')} trigger={['hover', 'focus']}>
-                <Switch value={testPlan} onChange={(v) => handleSetTestPlan(v)} />
+                <Switch isSelected={testPlan} onValueChange={(v) => handleSetTestPlan(v)} />
               </Tooltip>
             </SettingRow>
             {testPlan && (
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
index 13c4974e45..addff65dd3 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantMCPSettings.tsx
@@ -1,8 +1,9 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Box } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { Assistant, AssistantSettings } from '@renderer/types'
-import { Empty, Switch, Tooltip } from 'antd'
+import { Empty, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -84,10 +85,10 @@ const AssistantMCPSettings: React.FC<Props> = ({ assistant, updateAssistant }) =
                       : undefined
                   }>
                   <Switch
-                    checked={isEnabled}
+                    isSelected={isEnabled}
                     disabled={!server.isActive}
-                    onChange={() => handleServerToggle(server.id)}
-                    size="small"
+                    onValueChange={() => handleServerToggle(server.id)}
+                    size="sm"
                   />
                 </Tooltip>
               </ServerItem>
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
index d414108d3b..8c5ec1538f 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
@@ -1,11 +1,12 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Box } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import MemoriesSettingsModal from '@renderer/pages/memory/settings-modal'
 import MemoryService from '@renderer/services/MemoryService'
 import { selectGlobalMemoryEnabled, selectMemoryConfig } from '@renderer/store/memory'
 import type { Assistant, AssistantSettings } from '@renderer/types'
-import { Alert, Button, Card, Space, Switch, Tooltip, Typography } from 'antd'
+import { Alert, Button, Card, Space, Tooltip, Typography } from 'antd'
 import { useForm } from 'antd/es/form/Form'
 import { Settings2 } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
@@ -91,8 +92,8 @@ const AssistantMemorySettings: React.FC<Props> = ({ assistant, updateAssistant,
                   : ''
             }>
             <Switch
-              checked={assistant.enableMemory || false}
-              onChange={handleMemoryToggle}
+              isSelected={assistant.enableMemory || false}
+              onValueChange={handleMemoryToggle}
               disabled={!isMemoryEnabled}
             />
           </Tooltip>
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
index c797e4d600..af6e89c316 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
@@ -1,5 +1,6 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import EditableNumber from '@renderer/components/EditableNumber'
 import { DeleteIcon, ResetIcon } from '@renderer/components/Icons'
@@ -11,7 +12,7 @@ import { useTimer } from '@renderer/hooks/useTimer'
 import { SettingRow } from '@renderer/pages/settings'
 import type { Assistant, AssistantSettingCustomParameters, AssistantSettings, Model } from '@renderer/types'
 import { modalConfirm } from '@renderer/utils'
-import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Switch, Tooltip } from 'antd'
+import { Button, Col, Divider, Input, InputNumber, Row, Select, Slider, Tooltip } from 'antd'
 import { isNull } from 'lodash'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -250,8 +251,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           </Label>
         </RowFlex>
         <Switch
-          checked={enableTemperature}
-          onChange={(enabled) => {
+          isSelected={enableTemperature}
+          onValueChange={(enabled) => {
             setEnableTemperature(enabled)
             updateAssistantSettings({ enableTemperature: enabled })
           }}
@@ -298,8 +299,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           </Tooltip>
         </RowFlex>
         <Switch
-          checked={enableTopP}
-          onChange={(enabled) => {
+          isSelected={enableTopP}
+          onValueChange={(enabled) => {
             setEnableTopP(enabled)
             updateAssistantSettings({ enableTopP: enabled })
           }}
@@ -387,8 +388,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           </Tooltip>
         </RowFlex>
         <Switch
-          checked={enableMaxTokens}
-          onChange={async (enabled) => {
+          isSelected={enableMaxTokens}
+          onValueChange={async (enabled) => {
             if (enabled) {
               const confirmed = await modalConfirm({
                 title: t('chat.settings.max_tokens.confirm'),
@@ -430,8 +431,8 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
       <SettingRow style={{ minHeight: 30 }}>
         <Label>{t('models.stream_output')}</Label>
         <Switch
-          checked={streamOutput}
-          onChange={(checked) => {
+          isSelected={streamOutput}
+          onValueChange={(checked) => {
             setStreamOutput(checked)
             updateAssistantSettings({ streamOutput: checked })
           }}
diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
index 253675a1e1..508c67952b 100644
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -6,6 +6,7 @@ import {
   YuqueOutlined
 } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import DividerWithText from '@renderer/components/DividerWithText'
 import { NutstoreIcon } from '@renderer/components/Icons/NutstoreIcons'
@@ -19,7 +20,7 @@ import { reset } from '@renderer/services/BackupService'
 import type { AppInfo } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
 import { occupiedDirs } from '@shared/config/constant'
-import { Button, Progress, Switch, Typography } from 'antd'
+import { Button, Progress, Typography } from 'antd'
 import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon, Sparkle } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -287,11 +288,11 @@ const DataSettings: FC = () => {
       <div>
         <MigrationPathRow style={{ marginTop: '20px', flexDirection: 'row', alignItems: 'center' }}>
           <Switch
-            defaultChecked={shouldCopyData}
-            onChange={(checked) => {
+            defaultSelected={shouldCopyData}
+            onValueChange={(checked) => {
               shouldCopyData = checked
             }}
-            style={{ marginRight: '8px' }}
+            className="mr-2"
           />
           <MigrationPathLabel style={{ fontWeight: 'normal', fontSize: '14px' }}>
             {t('settings.data.app_data.copy_data_option')}
@@ -612,7 +613,7 @@ const DataSettings: FC = () => {
               <SettingDivider />
               <SettingRow>
                 <SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
-                <Switch checked={skipBackupFile} onChange={onSkipBackupFilesChange} />
+                <Switch isSelected={skipBackupFile} onValueChange={onSkipBackupFilesChange} />
               </SettingRow>
               <SettingRow>
                 <SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx b/src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx
index 4276b55ee0..974f760239 100644
--- a/src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/ExportMenuSettings.tsx
@@ -1,6 +1,6 @@
+import { Switch } from '@cherrystudio/ui'
 import { useMultiplePreferences } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Switch } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -35,66 +35,87 @@ const ExportMenuOptions: FC = () => {
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.image')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.image} onChange={(checked) => handleToggleOption('image', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.image}
+          onValueChange={(checked) => handleToggleOption('image', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.markdown')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.markdown} onChange={(checked) => handleToggleOption('markdown', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.markdown}
+          onValueChange={(checked) => handleToggleOption('markdown', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.markdown_reason')}</SettingRowTitle>
         <Switch
-          checked={exportMenuOptions.markdown_reason}
-          onChange={(checked) => handleToggleOption('markdown_reason', checked)}
+          isSelected={exportMenuOptions.markdown_reason}
+          onValueChange={(checked) => handleToggleOption('markdown_reason', checked)}
         />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.notion')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.notion} onChange={(checked) => handleToggleOption('notion', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.notion}
+          onValueChange={(checked) => handleToggleOption('notion', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.yuque')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.yuque} onChange={(checked) => handleToggleOption('yuque', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.yuque}
+          onValueChange={(checked) => handleToggleOption('yuque', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.joplin')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.joplin} onChange={(checked) => handleToggleOption('joplin', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.joplin}
+          onValueChange={(checked) => handleToggleOption('joplin', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.obsidian')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.obsidian} onChange={(checked) => handleToggleOption('obsidian', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.obsidian}
+          onValueChange={(checked) => handleToggleOption('obsidian', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.siyuan')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.siyuan} onChange={(checked) => handleToggleOption('siyuan', checked)} />
+        <Switch
+          isSelected={exportMenuOptions.siyuan}
+          onValueChange={(checked) => handleToggleOption('siyuan', checked)}
+        />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.docx')}</SettingRowTitle>
-        <Switch checked={exportMenuOptions.docx} onChange={(checked) => handleToggleOption('docx', checked)} />
+        <Switch isSelected={exportMenuOptions.docx} onValueChange={(checked) => handleToggleOption('docx', checked)} />
       </SettingRow>
       <SettingDivider />
 
       <SettingRow>
         <SettingRowTitle>{t('settings.data.export_menu.plain_text')}</SettingRowTitle>
         <Switch
-          checked={exportMenuOptions.plain_text}
-          onChange={(checked) => handleToggleOption('plain_text', checked)}
+          isSelected={exportMenuOptions.plain_text}
+          onValueChange={(checked) => handleToggleOption('plain_text', checked)}
         />
       </SettingRow>
     </SettingGroup>
diff --git a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
index 2aaf86e249..c3379514cf 100644
--- a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
@@ -1,9 +1,10 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Switch, Tooltip } from 'antd'
+import { Button, Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -118,7 +119,7 @@ const JoplinSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.joplin.export_reasoning.title')}</SettingRowTitle>
-        <Switch checked={joplinExportReasoning} onChange={handleToggleJoplinExportReasoning} />
+        <Switch isSelected={joplinExportReasoning} onValueChange={handleToggleJoplinExportReasoning} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.joplin.export_reasoning.help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
index 1b369e2dc2..c67a453b59 100644
--- a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
@@ -1,5 +1,6 @@
 import { DeleteOutlined, FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { LocalBackupManager } from '@renderer/components/LocalBackupManager'
@@ -9,7 +10,7 @@ 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 { Button, Input, Switch, Tooltip } from 'antd'
+import { Button, Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -256,7 +257,7 @@ const LocalBackupSettings: React.FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
-        <Switch checked={localBackupSkipBackupFile} onChange={onSkipBackupFilesChange} />
+        <Switch isSelected={localBackupSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
index ed1dff4f1b..f7a23b8867 100644
--- a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
@@ -1,8 +1,9 @@
 import { DeleteOutlined, FolderOpenOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button, Switch } from 'antd'
+import { Button } from 'antd'
 import Input from 'antd/es/input/Input'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -96,7 +97,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.force_dollar_math.title')}</SettingRowTitle>
-        <Switch checked={forceDollarMathInMarkdown} onChange={handleToggleForceDollarMath} />
+        <Switch isSelected={forceDollarMathInMarkdown} onValueChange={handleToggleForceDollarMath} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.markdown_export.force_dollar_math.help')}</SettingHelpText>
@@ -104,7 +105,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.message_title.use_topic_naming.title')}</SettingRowTitle>
-        <Switch checked={useTopicNamingForMessageTitle} onChange={handleToggleTopicNaming} />
+        <Switch isSelected={useTopicNamingForMessageTitle} onValueChange={handleToggleTopicNaming} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.message_title.use_topic_naming.help')}</SettingHelpText>
@@ -112,7 +113,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.show_model_name.title')}</SettingRowTitle>
-        <Switch checked={showModelNameInExport} onChange={handleToggleShowModelName} />
+        <Switch isSelected={showModelNameInExport} onValueChange={handleToggleShowModelName} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.markdown_export.show_model_name.help')}</SettingHelpText>
@@ -120,7 +121,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.show_model_provider.title')}</SettingRowTitle>
-        <Switch checked={showModelProviderInMarkdown} onChange={handleToggleShowModelProvider} />
+        <Switch isSelected={showModelProviderInMarkdown} onValueChange={handleToggleShowModelProvider} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.markdown_export.show_model_provider.help')}</SettingHelpText>
@@ -128,7 +129,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.exclude_citations.title')}</SettingRowTitle>
-        <Switch checked={excludeCitationsInExport} onChange={handleToggleExcludeCitations} />
+        <Switch isSelected={excludeCitationsInExport} onValueChange={handleToggleExcludeCitations} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.markdown_export.exclude_citations.help')}</SettingHelpText>
@@ -136,7 +137,7 @@ const MarkdownExportSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.markdown_export.standardize_citations.title')}</SettingRowTitle>
-        <Switch checked={standardizeCitationsInExport} onChange={handleToggleStandardizeCitations} />
+        <Switch isSelected={standardizeCitationsInExport} onValueChange={handleToggleStandardizeCitations} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.markdown_export.standardize_citations.help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
index 6139372eb1..d8b3c78be9 100644
--- a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
@@ -1,10 +1,11 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { Client } from '@notionhq/client'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Switch, Tooltip } from 'antd'
+import { Button, Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -126,7 +127,7 @@ const NotionSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.notion.export_reasoning.title')}</SettingRowTitle>
-        <Switch checked={notionExportReasoning} onChange={handleNotionExportReasoningChange} />
+        <Switch isSelected={notionExportReasoning} onValueChange={handleNotionExportReasoningChange} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.notion.export_reasoning.help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
index 99891f728f..3b169a7592 100644
--- a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
@@ -1,5 +1,6 @@
 import { CheckOutlined, FolderOutlined, LoadingOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import NutstorePathPopup from '@renderer/components/Popups/NutsorePathPopup'
 import Selector from '@renderer/components/Selector'
@@ -19,7 +20,7 @@ import {
 import { useAppSelector } from '@renderer/store'
 import { modalConfirm } from '@renderer/utils'
 import { NUTSTORE_HOST } from '@shared/config/nutstore'
-import { Button, Input, Switch, Tooltip, Typography } from 'antd'
+import { Button, Input, Tooltip, Typography } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -319,7 +320,7 @@ const NutstoreSettings: FC = () => {
           <SettingDivider />
           <SettingRow>
             <SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
-            <Switch checked={nutstoreSkipBackupFile} onChange={onSkipBackupFilesChange} />
+            <Switch isSelected={nutstoreSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
           </SettingRow>
           <SettingRow>
             <SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
index ba314751c1..f5f74b4429 100644
--- a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
@@ -1,5 +1,6 @@
 import { FolderOpenOutlined, InfoCircleOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { S3BackupManager } from '@renderer/components/S3BackupManager'
 import { S3BackupModal, useS3BackupModal } from '@renderer/components/S3Modals'
@@ -8,7 +9,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
 import { startAutoSync, stopAutoSync } from '@renderer/services/BackupService'
 import { useAppSelector } from '@renderer/store'
-import { Button, Input, Switch, Tooltip } from 'antd'
+import { Button, Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -237,7 +238,7 @@ const S3Settings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.s3.skipBackupFile.label')}</SettingRowTitle>
-        <Switch checked={s3SkipBackupFile} onChange={onSkipBackupFilesChange} />
+        <Switch isSelected={s3SkipBackupFile} onValueChange={onSkipBackupFilesChange} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.s3.skipBackupFile.help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
index c9db62dac6..d3cf5963fe 100644
--- a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
@@ -1,5 +1,6 @@
 import { FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import Selector from '@renderer/components/Selector'
 import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager'
@@ -7,7 +8,7 @@ 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 { Button, Input, Switch, Tooltip } from 'antd'
+import { Button, Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -198,7 +199,7 @@ const WebDavSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.backup.skip_file_data_title')}</SettingRowTitle>
-        <Switch checked={webdavSkipBackupFile} onChange={onSkipBackupFilesChange} />
+        <Switch isSelected={webdavSkipBackupFile} onValueChange={onSkipBackupFilesChange} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.backup.skip_file_data_help')}</SettingHelpText>
@@ -206,7 +207,7 @@ const WebDavSettings: FC = () => {
       <SettingDivider />
       <SettingRow>
         <SettingRowTitle>{t('settings.data.webdav.disableStream.title')}</SettingRowTitle>
-        <Switch checked={webdavDisableStream} onChange={onDisableStreamChange} />
+        <Switch isSelected={webdavDisableStream} onValueChange={onDisableStreamChange} />
       </SettingRow>
       <SettingRow>
         <SettingHelpText>{t('settings.data.webdav.disableStream.help')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 24abdcc8a2..98e0f6e922 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -1,5 +1,6 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { CodeEditor } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { ResetIcon } from '@renderer/components/Icons'
 import TextBadge from '@renderer/components/TextBadge'
@@ -11,7 +12,7 @@ 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 { Button, ColorPicker, Segmented, Select, Switch } from 'antd'
+import { Button, ColorPicker, Segmented, Select } from 'antd'
 import { Minus, Monitor, Moon, Plus, Sun } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -229,7 +230,7 @@ const DisplaySettings: FC = () => {
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.theme.window.style.transparent')}</SettingRowTitle>
-              <Switch checked={windowStyle === 'transparent'} onChange={handleWindowStyleChange} />
+              <Switch isSelected={windowStyle === 'transparent'} onValueChange={handleWindowStyleChange} />
             </SettingRow>
           </>
         )}
@@ -361,8 +362,8 @@ const DisplaySettings: FC = () => {
             <SettingRow>
               <SettingRowTitle>{t('settings.advanced.auto_switch_to_topics')}</SettingRowTitle>
               <Switch
-                checked={clickAssistantToShowTopic}
-                onChange={(checked) => setClickAssistantToShowTopic(checked)}
+                isSelected={clickAssistantToShowTopic}
+                onValueChange={(checked) => setClickAssistantToShowTopic(checked)}
               />
             </SettingRow>
             <SettingDivider />
@@ -370,12 +371,12 @@ const DisplaySettings: FC = () => {
         )}
         <SettingRow>
           <SettingRowTitle>{t('settings.topic.show.time')}</SettingRowTitle>
-          <Switch checked={showTopicTime} onChange={(checked) => setShowTopicTime(checked)} />
+          <Switch isSelected={showTopicTime} onValueChange={(checked) => setShowTopicTime(checked)} />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.topic.pin_to_top')}</SettingRowTitle>
-          <Switch checked={pinTopicsToTop} onChange={(checked) => setPinTopicsToTop(checked)} />
+          <Switch isSelected={pinTopicsToTop} onValueChange={(checked) => setPinTopicsToTop(checked)} />
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx
index 20abd11b4b..fab07d15c8 100644
--- a/src/renderer/src/pages/settings/GeneralSettings.tsx
+++ b/src/renderer/src/pages/settings/GeneralSettings.tsx
@@ -1,6 +1,7 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { 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 { InfoTooltip } from '@renderer/components/TooltipIcons'
@@ -12,7 +13,7 @@ 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, Switch, Tooltip } from 'antd'
+import { Input, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -260,12 +261,12 @@ const GeneralSettings: FC = () => {
               />
             )}
           </RowFlex>
-          <Switch checked={enableSpellCheck} onChange={handleSpellCheckChange} />
+          <Switch isSelected={enableSpellCheck} onValueChange={handleSpellCheckChange} />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.hardware_acceleration.title')}</SettingRowTitle>
-          <Switch checked={disableHardwareAcceleration} onChange={handleHardwareAccelerationChange} />
+          <Switch isSelected={disableHardwareAcceleration} onValueChange={handleHardwareAccelerationChange} />
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
@@ -278,17 +279,26 @@ const GeneralSettings: FC = () => {
               <InfoCircleOutlined style={{ cursor: 'pointer' }} />
             </Tooltip>
           </SettingRowTitle>
-          <Switch checked={notificationSettings.assistant} onChange={(v) => handleNotificationChange('assistant', v)} />
+          <Switch
+            isSelected={notificationSettings.assistant}
+            onValueChange={(v) => handleNotificationChange('assistant', v)}
+          />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.notification.backup')}</SettingRowTitle>
-          <Switch checked={notificationSettings.backup} onChange={(v) => handleNotificationChange('backup', v)} />
+          <Switch
+            isSelected={notificationSettings.backup}
+            onValueChange={(v) => handleNotificationChange('backup', v)}
+          />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.notification.knowledge_embed')}</SettingRowTitle>
-          <Switch checked={notificationSettings.knowledge} onChange={(v) => handleNotificationChange('knowledge', v)} />
+          <Switch
+            isSelected={notificationSettings.knowledge}
+            onValueChange={(v) => handleNotificationChange('knowledge', v)}
+          />
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
@@ -296,12 +306,12 @@ const GeneralSettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.launch.onboot')}</SettingRowTitle>
-          <Switch checked={launchOnBoot} onChange={(checked) => updateLaunchOnBoot(checked)} />
+          <Switch isSelected={launchOnBoot} onValueChange={(checked) => updateLaunchOnBoot(checked)} />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.launch.totray')}</SettingRowTitle>
-          <Switch checked={launchToTray} onChange={(checked) => updateLaunchToTray(checked)} />
+          <Switch isSelected={launchToTray} onValueChange={(checked) => updateLaunchToTray(checked)} />
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
@@ -309,12 +319,12 @@ const GeneralSettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.tray.show')}</SettingRowTitle>
-          <Switch checked={tray} onChange={(checked) => updateTray(checked)} />
+          <Switch isSelected={tray} onValueChange={(checked) => updateTray(checked)} />
         </SettingRow>
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.tray.onclose')}</SettingRowTitle>
-          <Switch checked={trayOnClose} onChange={(checked) => updateTrayOnClose(checked)} />
+          <Switch isSelected={trayOnClose} onValueChange={(checked) => updateTrayOnClose(checked)} />
         </SettingRow>
       </SettingGroup>
       <SettingGroup theme={theme}>
@@ -323,8 +333,8 @@ const GeneralSettings: FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('settings.privacy.enable_privacy_mode')}</SettingRowTitle>
           <Switch
-            value={enableDataCollection}
-            onChange={(v) => {
+            isSelected={enableDataCollection}
+            onValueChange={(v) => {
               setEnableDataCollection(v)
               window.api.config.set('enableDataCollection', v)
             }}
@@ -339,7 +349,7 @@ const GeneralSettings: FC = () => {
             <SettingRowTitle>{t('settings.developer.enable_developer_mode')}</SettingRowTitle>
             <InfoTooltip title={t('settings.developer.help')} />
           </Flex>
-          <Switch checked={enableDeveloperMode} onChange={setEnableDeveloperMode} />
+          <Switch isSelected={enableDeveloperMode} onValueChange={setEnableDeveloperMode} />
         </SettingRow>
       </SettingGroup>
     </SettingContainer>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
index f7bc4fae2e..046a830d34 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
@@ -1,3 +1,4 @@
+import { Switch } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { DeleteIcon } from '@renderer/components/Icons'
 import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
@@ -5,7 +6,7 @@ import Scrollbar from '@renderer/components/Scrollbar'
 import { getMcpTypeLabel } from '@renderer/i18n/label'
 import type { MCPServer } from '@renderer/types'
 import { formatErrorMessage } from '@renderer/utils/error'
-import { Alert, Button, Space, Switch, Tag, Tooltip, Typography } from 'antd'
+import { Alert, Button, Space, Tag, Tooltip, Typography } from 'antd'
 import { CircleXIcon, Settings2, SquareArrowOutUpRight } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback } from 'react'
@@ -132,11 +133,11 @@ const McpServerCard: FC<McpServerCardProps> = ({
           </ServerNameWrapper>
           <ToolbarWrapper onClick={(e) => e.stopPropagation()}>
             <Switch
-              value={server.isActive}
+              isSelected={server.isActive}
               key={server.id}
-              loading={isLoading}
-              onChange={onToggle}
-              size="small"
+              isLoading={isLoading}
+              onValueChange={onToggle}
+              size="sm"
               data-no-dnd
             />
             <Button
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
index 050f9b2425..6ed72546c6 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
@@ -1,4 +1,4 @@
-import { Flex } from '@cherrystudio/ui'
+import { Flex, Switch } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import type { McpError } from '@modelcontextprotocol/sdk/types.js'
 import { DeleteIcon } from '@renderer/components/Icons'
@@ -8,7 +8,7 @@ import MCPDescription from '@renderer/pages/settings/MCPSettings/McpDescription'
 import type { MCPPrompt, MCPResource, MCPServer, MCPTool } from '@renderer/types'
 import { formatMcpError } from '@renderer/utils/error'
 import type { TabsProps } from 'antd'
-import { Badge, Button, Form, Input, Radio, Select, Switch, Tabs } from 'antd'
+import { Badge, Button, Form, Input, Radio, Select, Tabs } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { ChevronDown, SaveIcon } from 'lucide-react'
 import React, { useCallback, useEffect, useState } from 'react'
@@ -639,7 +639,7 @@ const McpSettings: React.FC = () => {
             tooltip={t('settings.mcp.longRunningTooltip')}
             layout="horizontal"
             valuePropName="checked">
-            <Switch size="small" style={{ marginLeft: 10 }} />
+            <Switch size="sm" className="ml-2.5" />
           </Form.Item>
           <Form.Item
             name="timeout"
@@ -746,10 +746,10 @@ const McpSettings: React.FC = () => {
           </Flex>
           <Flex className="items-center gap-4">
             <Switch
-              value={server.isActive}
+              isSelected={server.isActive}
               key={server.id}
-              loading={loadingServer === server.id}
-              onChange={onToggleActive}
+              isLoading={loadingServer === server.id}
+              onValueChange={onToggleActive}
             />
             <Button
               type="primary"
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx b/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
index 190b324502..750028f42e 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpTool.tsx
@@ -1,7 +1,8 @@
 import { ColFlex, Flex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import type { MCPServer, MCPTool } from '@renderer/types'
 import { isToolAutoApproved } from '@renderer/utils/mcp-tools'
-import { Badge, Descriptions, Empty, Switch, Table, Tag, Tooltip, Typography } from 'antd'
+import { Badge, Descriptions, Empty, Table, Tag, Tooltip, Typography } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { Hammer, Info, Zap } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -145,7 +146,7 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
       width: 150, // Fixed width might be good for alignment
       align: 'center',
       render: (_, tool) => (
-        <Switch checked={isToolEnabled(tool)} onChange={(checked) => handleToggle(tool, checked)} size="small" />
+        <Switch isSelected={isToolEnabled(tool)} onValueChange={(checked) => handleToggle(tool, checked)} size="sm" />
       )
     },
     {
@@ -169,10 +170,10 @@ const MCPToolsSection = ({ tools, server, onToggleTool, onToggleAutoApprove }: M
           }
           placement="top">
           <Switch
-            checked={isToolAutoApproved(tool, server)}
-            disabled={!isToolEnabled(tool)}
-            onChange={(checked) => handleAutoApproveToggle(tool, checked)}
-            size="small"
+            isSelected={isToolAutoApproved(tool, server)}
+            isDisabled={!isToolEnabled(tool)}
+            onValueChange={(checked) => handleAutoApproveToggle(tool, checked)}
+            size="sm"
           />
         </Tooltip>
       )
diff --git a/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx b/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
index 8784e5cec8..86548fa637 100644
--- a/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
+++ b/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
@@ -1,6 +1,7 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { DeleteIcon, EditIcon, LoadingIcon, RefreshIcon } from '@renderer/components/Icons'
 import TextBadge from '@renderer/components/TextBadge'
@@ -16,7 +17,7 @@ import {
   setGlobalMemoryEnabled
 } from '@renderer/store/memory'
 import type { MemoryItem } from '@types'
-import { Badge, Button, Dropdown, Empty, Form, Input, Modal, Pagination, Space, Spin, Switch } from 'antd'
+import { Badge, Button, Dropdown, Empty, Form, Input, Modal, Pagination, Space, Spin } from 'antd'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { Brain, Calendar, MenuIcon, PlusIcon, Settings2, UserRound, UserRoundMinus, UserRoundPlus } from 'lucide-react'
@@ -588,7 +589,7 @@ const MemorySettings = () => {
             <TextBadge text="Beta" />
           </RowFlex>
           <RowFlex className="items-center gap-2.5">
-            <Switch checked={globalMemoryEnabled} onChange={handleGlobalMemoryToggle} />
+            <Switch isSelected={globalMemoryEnabled} onValueChange={handleGlobalMemoryToggle} />
             <Button type="text" icon={<Settings2 size={16} />} onClick={() => setSettingsModalVisible(true)} />
           </RowFlex>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
index 004b78ce48..42cb768637 100644
--- a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
@@ -1,6 +1,7 @@
 import { CloseCircleFilled, QuestionCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { ResetIcon } from '@renderer/components/Icons'
 import { TopView } from '@renderer/components/TopView'
@@ -9,7 +10,7 @@ import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import type { AssistantSettings as AssistantSettingsType } from '@renderer/types'
 import { getLeadingEmoji, modalConfirm } from '@renderer/utils'
-import { Button, Col, Input, InputNumber, Modal, Popover, Row, Slider, Switch, Tooltip } from 'antd'
+import { Button, Col, Input, InputNumber, Modal, Popover, Row, Slider, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import type { Dispatch, FC, SetStateAction } from 'react'
 import { useState } from 'react'
@@ -171,8 +172,8 @@ const AssistantSettings: FC = () => {
         </RowFlex>
         <Switch
           style={{ marginLeft: 10 }}
-          checked={enableTemperature}
-          onChange={(enabled) => {
+          isSelected={enableTemperature}
+          onValueChange={(enabled) => {
             setEnableTemperature(enabled)
             onUpdateAssistantSettings({ enableTemperature: enabled })
           }}
@@ -212,8 +213,8 @@ const AssistantSettings: FC = () => {
         </RowFlex>
         <Switch
           style={{ marginLeft: 10 }}
-          checked={enableTopP}
-          onChange={(enabled) => {
+          isSelected={enableTopP}
+          onValueChange={(enabled) => {
             setEnableTopP(enabled)
             onUpdateAssistantSettings({ enableTopP: enabled })
           }}
@@ -275,8 +276,8 @@ const AssistantSettings: FC = () => {
         </RowFlex>
         <Switch
           style={{ marginLeft: 10 }}
-          checked={enableMaxTokens}
-          onChange={async (enabled) => {
+          isSelected={enableMaxTokens}
+          onValueChange={async (enabled) => {
             if (enabled) {
               const confirmed = await modalConfirm({
                 title: t('chat.settings.max_tokens.confirm'),
diff --git a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
index a1a69cebec..7c3a517bfa 100644
--- a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
@@ -1,8 +1,9 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { ColFlex, Flex, RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { ResetIcon } from '@renderer/components/Icons'
-import { Button, Divider, Input, Modal, Popover, Switch } from 'antd'
+import { Button, Divider, Input, Modal, Popover } from 'antd'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -57,7 +58,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       <ColFlex className="items-stretch gap-2">
         <RowFlex className="items-center gap-4">
           <div>{t('settings.models.topic_naming.auto')}</div>
-          <Switch checked={enableTopicNaming} onChange={(v) => setEnableTopicNaming(v)} />
+          <Switch isSelected={enableTopicNaming} onValueChange={setEnableTopicNaming} />
         </RowFlex>
         <Divider style={{ margin: 0 }} />
         <div>
diff --git a/src/renderer/src/pages/settings/NotesSettings.tsx b/src/renderer/src/pages/settings/NotesSettings.tsx
index 1ccac26415..01b375f5da 100644
--- a/src/renderer/src/pages/settings/NotesSettings.tsx
+++ b/src/renderer/src/pages/settings/NotesSettings.tsx
@@ -1,10 +1,11 @@
+import { Switch } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import Selector from '@renderer/components/Selector'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useNotesSettings } from '@renderer/hooks/useNotesSettings'
 import { initWorkSpace } from '@renderer/services/NotesService'
 import type { EditorView } from '@renderer/types'
-import { Button, Input, message, Slider, Switch } from 'antd'
+import { Button, Input, message, Slider } from 'antd'
 import { FolderOpen } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -168,7 +169,10 @@ const NotesSettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('notes.settings.display.compress_content')}</SettingRowTitle>
-          <Switch checked={!settings.isFullWidth} onChange={(checked) => updateSettings({ isFullWidth: !checked })} />
+          <Switch
+            isSelected={!settings.isFullWidth}
+            onValueChange={(checked) => updateSettings({ isFullWidth: !checked })}
+          />
         </SettingRow>
         <SettingHelpText>{t('notes.settings.display.compress_content_description')}</SettingHelpText>
         <SettingDivider />
@@ -190,8 +194,8 @@ const NotesSettings: FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('notes.settings.display.show_table_of_contents')}</SettingRowTitle>
           <Switch
-            checked={settings.showTableOfContents}
-            onChange={(checked) => updateSettings({ showTableOfContents: checked })}
+            isSelected={settings.showTableOfContents}
+            onValueChange={(checked) => updateSettings({ showTableOfContents: checked })}
           />
         </SettingRow>
         <SettingHelpText>{t('notes.settings.display.show_table_of_contents_description')}</SettingHelpText>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
index 8ddc5fb960..8dd3d87d3b 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ApiOptionsSettings/ApiOptionsSettings.tsx
@@ -1,8 +1,8 @@
 import { ColFlex, RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { InfoTooltip } from '@renderer/components/TooltipIcons'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { Provider } from '@renderer/types'
-import { Switch } from 'antd'
 import { startTransition, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -113,7 +113,7 @@ const ApiOptionsSettings = ({ providerId }: Props) => {
             </label>
             <InfoTooltip title={item.tip}></InfoTooltip>
           </RowFlex>
-          <Switch id={item.key} checked={item.checked} onChange={item.onChange} />
+          <Switch id={item.key} isSelected={item.checked} onValueChange={item.onChange} />
         </RowFlex>
       ))}
     </ColFlex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
index 6c2ffe9067..0c40aa3e18 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import {
   EmbeddingTag,
@@ -22,7 +23,7 @@ import { useDynamicLabelWidth } from '@renderer/hooks/useDynamicLabelWidth'
 import type { Model, ModelCapability, ModelType, Provider } from '@renderer/types'
 import { getDefaultGroupName, getDifference, getUnion, uniqueObjectArray } from '@renderer/utils'
 import type { ModalProps } from 'antd'
-import { Button, Divider, Form, Input, InputNumber, message, Modal, Select, Switch, Tooltip } from 'antd'
+import { Button, Divider, Form, Input, InputNumber, message, Modal, Select, Tooltip } from 'antd'
 import { cloneDeep } from 'lodash'
 import { ChevronDown, ChevronUp, RotateCcw, SaveIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -342,10 +343,10 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
               label={t('settings.models.add.supported_text_delta.label')}
               tooltip={t('settings.models.add.supported_text_delta.tooltip')}>
               <Switch
-                checked={supportedTextDelta}
-                style={{ marginLeft: 'auto' }}
-                size="small"
-                onChange={(checked) => {
+                isSelected={supportedTextDelta}
+                className="ml-auto"
+                size="sm"
+                onValueChange={(checked) => {
                   setSupportedTextDelta(checked)
                   // 直接传递新值给autoSave
                   autoSave({ supported_text_delta: checked })
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index 4135fb029e..6e8536e590 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -1,5 +1,6 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import OpenAIAlert from '@renderer/components/Alert/OpenAIAlert'
 import { LoadingIcon } from '@renderer/components/Icons'
 import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
@@ -26,7 +27,7 @@ import {
   isOpenAIProvider
 } from '@renderer/utils'
 import { formatErrorMessage } from '@renderer/utils/error'
-import { Button, Divider, Input, Select, Space, Switch, Tooltip } from 'antd'
+import { Button, Divider, Input, Select, Space, Tooltip } from 'antd'
 import Link from 'antd/es/typography/Link'
 import { debounce, isEmpty } from 'lodash'
 import { Bolt, Check, Settings2, SquareArrowOutUpRight, TriangleAlert } from 'lucide-react'
@@ -272,9 +273,9 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
           )}
         </Flex>
         <Switch
-          value={provider.enabled}
+          isSelected={provider.enabled}
           key={provider.id}
-          onChange={(enabled) => {
+          onValueChange={(enabled) => {
             updateProvider({ apiHost, enabled })
             if (enabled) {
               moveProviderToTop(provider.id)
diff --git a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
index 32da91d9e1..820bdc03f9 100644
--- a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
@@ -1,5 +1,6 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import { useTheme } from '@renderer/context/ThemeProvider'
@@ -7,7 +8,7 @@ import { useAssistants, useDefaultAssistant, useDefaultModel } from '@renderer/h
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setQuickAssistantId } from '@renderer/store/llm'
 import HomeWindow from '@renderer/windows/mini/home/HomeWindow'
-import { Button, Select, Switch, Tooltip } from 'antd'
+import { Button, Select, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -72,14 +73,14 @@ const QuickAssistantSettings: FC = () => {
               <InfoCircleOutlined style={{ cursor: 'pointer' }} />
             </Tooltip>
           </SettingRowTitle>
-          <Switch checked={enableQuickAssistant} onChange={handleEnableQuickAssistant} />
+          <Switch isSelected={enableQuickAssistant} onValueChange={handleEnableQuickAssistant} />
         </SettingRow>
         {enableQuickAssistant && (
           <>
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.quickAssistant.click_tray_to_show')}</SettingRowTitle>
-              <Switch checked={clickTrayToShowQuickAssistant} onChange={handleClickTrayToShowQuickAssistant} />
+              <Switch isSelected={clickTrayToShowQuickAssistant} onValueChange={handleClickTrayToShowQuickAssistant} />
             </SettingRow>
           </>
         )}
@@ -88,7 +89,7 @@ const QuickAssistantSettings: FC = () => {
             <SettingDivider />
             <SettingRow>
               <SettingRowTitle>{t('settings.quickAssistant.read_clipboard_at_startup')}</SettingRowTitle>
-              <Switch checked={readClipboardAtStartup} onChange={handleClickReadClipboardAtStartup} />
+              <Switch isSelected={readClipboardAtStartup} onValueChange={handleClickReadClipboardAtStartup} />
             </SettingRow>
           </>
         )}
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
index ce6ce7b9bc..1a998bf33e 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
@@ -1,10 +1,11 @@
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { isMac, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { getSelectionDescriptionLabel } from '@renderer/i18n/label'
 import SelectionToolbar from '@renderer/windows/selection/toolbar/SelectionToolbar'
 import type { SelectionFilterMode, SelectionTriggerMode } from '@shared/data/preference/preferenceTypes'
-import { Button, Radio, Row, Slider, Switch, Tooltip } from 'antd'
+import { Button, Radio, Row, Slider, Tooltip } from 'antd'
 import { CircleHelp, Edit2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -99,9 +100,9 @@ const SelectionAssistantSettings: FC = () => {
             {!isSupportedOS && <SettingDescription>{t('selection.settings.enable.description')}</SettingDescription>}
           </SettingLabel>
           <Switch
-            checked={isSupportedOS && selectionEnabled}
-            onChange={(checked) => handleEnableCheckboxChange(checked)}
-            disabled={!isSupportedOS}
+            isSelected={isSupportedOS && selectionEnabled}
+            onValueChange={handleEnableCheckboxChange}
+            isDisabled={!isSupportedOS}
           />
         </SettingRow>
 
@@ -160,7 +161,7 @@ const SelectionAssistantSettings: FC = () => {
                 <SettingRowTitle>{t('selection.settings.toolbar.compact_mode.title')}</SettingRowTitle>
                 <SettingDescription>{t('selection.settings.toolbar.compact_mode.description')}</SettingDescription>
               </SettingLabel>
-              <Switch checked={isCompact} onChange={(checked) => setIsCompact(checked)} />
+              <Switch isSelected={isCompact} onValueChange={setIsCompact} />
             </SettingRow>
           </SettingGroup>
 
@@ -172,7 +173,7 @@ const SelectionAssistantSettings: FC = () => {
                 <SettingRowTitle>{t('selection.settings.window.follow_toolbar.title')}</SettingRowTitle>
                 <SettingDescription>{t('selection.settings.window.follow_toolbar.description')}</SettingDescription>
               </SettingLabel>
-              <Switch checked={isFollowToolbar} onChange={(checked) => setIsFollowToolbar(checked)} />
+              <Switch isSelected={isFollowToolbar} onValueChange={setIsFollowToolbar} />
             </SettingRow>
             <SettingDivider />
             <SettingRow>
@@ -180,7 +181,7 @@ const SelectionAssistantSettings: FC = () => {
                 <SettingRowTitle>{t('selection.settings.window.remember_size.title')}</SettingRowTitle>
                 <SettingDescription>{t('selection.settings.window.remember_size.description')}</SettingDescription>
               </SettingLabel>
-              <Switch checked={isRemeberWinSize} onChange={(checked) => setIsRemeberWinSize(checked)} />
+              <Switch isSelected={isRemeberWinSize} onValueChange={setIsRemeberWinSize} />
             </SettingRow>
             <SettingDivider />
             <SettingRow>
@@ -188,7 +189,7 @@ const SelectionAssistantSettings: FC = () => {
                 <SettingRowTitle>{t('selection.settings.window.auto_close.title')}</SettingRowTitle>
                 <SettingDescription>{t('selection.settings.window.auto_close.description')}</SettingDescription>
               </SettingLabel>
-              <Switch checked={isAutoClose} onChange={(checked) => setIsAutoClose(checked)} />
+              <Switch isSelected={isAutoClose} onValueChange={setIsAutoClose} />
             </SettingRow>
             <SettingDivider />
             <SettingRow>
@@ -196,7 +197,7 @@ const SelectionAssistantSettings: FC = () => {
                 <SettingRowTitle>{t('selection.settings.window.auto_pin.title')}</SettingRowTitle>
                 <SettingDescription>{t('selection.settings.window.auto_pin.description')}</SettingDescription>
               </SettingLabel>
-              <Switch checked={isAutoPin} onChange={(checked) => setIsAutoPin(checked)} />
+              <Switch isSelected={isAutoPin} onValueChange={setIsAutoPin} />
             </SettingRow>
             <SettingDivider />
             <SettingRow>
diff --git a/src/renderer/src/pages/settings/ShortcutSettings.tsx b/src/renderer/src/pages/settings/ShortcutSettings.tsx
index c4c08cad53..20b95aa957 100644
--- a/src/renderer/src/pages/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/pages/settings/ShortcutSettings.tsx
@@ -1,5 +1,6 @@
 import { ClearOutlined, UndoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Switch } from '@cherrystudio/ui'
 import { isMac, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useShortcuts } from '@renderer/hooks/useShortcuts'
@@ -9,7 +10,7 @@ import { useAppDispatch } from '@renderer/store'
 import { initialState, resetShortcuts, toggleShortcut, updateShortcut } from '@renderer/store/shortcuts'
 import type { Shortcut } from '@renderer/types'
 import type { InputRef } from 'antd'
-import { Button, Input, Switch, Table as AntTable, Tooltip } from 'antd'
+import { Button, Input, Table as AntTable, Tooltip } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import type { FC } from 'react'
 import React, { useRef, useState } from 'react'
@@ -397,7 +398,7 @@ const ShortcutSettings: FC = () => {
       align: 'right',
       width: '50px',
       render: (record: Shortcut) => (
-        <Switch size="small" checked={record.enabled} onChange={() => dispatch(toggleShortcut(record.key))} />
+        <Switch size="sm" isSelected={record.enabled} onValueChange={() => dispatch(toggleShortcut(record.key))} />
       )
     }
   ]
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
index 95c0749126..804ee2b630 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/BasicSettings.tsx
@@ -1,8 +1,9 @@
+import { Switch } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useWebSearchSettings } from '@renderer/hooks/useWebSearchProviders'
 import { useAppDispatch } from '@renderer/store'
 import { setMaxResult, setSearchWithTime } from '@renderer/store/websearch'
-import { Slider, Switch, Tooltip } from 'antd'
+import { Slider, Tooltip } from 'antd'
 import { t } from 'i18next'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -22,7 +23,7 @@ const BasicSettings: FC = () => {
         <SettingDivider />
         <SettingRow>
           <SettingRowTitle>{t('settings.tool.websearch.search_with_time')}</SettingRowTitle>
-          <Switch checked={searchWithTime} onChange={(checked) => dispatch(setSearchWithTime(checked))} />
+          <Switch isSelected={searchWithTime} onValueChange={(checked) => dispatch(setSearchWithTime(checked))} />
         </SettingRow>
         <SettingDivider style={{ marginTop: 15, marginBottom: 10 }} />
         <SettingRow style={{ height: 40 }}>
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index 31dbb74947..e5c88f83e1 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@heroui/react'
+import { cn } from '@cherrystudio/ui'
 import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
 import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'
diff --git a/src/renderer/src/pages/translate/TranslateSettings.tsx b/src/renderer/src/pages/translate/TranslateSettings.tsx
index b85179f165..176c2edab0 100644
--- a/src/renderer/src/pages/translate/TranslateSettings.tsx
+++ b/src/renderer/src/pages/translate/TranslateSettings.tsx
@@ -1,6 +1,5 @@
-import { ColFlex, RowFlex } from '@cherrystudio/ui'
+import { ColFlex, RowFlex, Switch } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
-import { Switch } from '@heroui/react'
 import LanguageSelect from '@renderer/components/LanguageSelect'
 import db from '@renderer/databases'
 import useTranslate from '@renderer/hooks/useTranslate'
diff --git a/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx b/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
index 4981aa6d1b..9744d3c8de 100644
--- a/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
+++ b/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
@@ -1,6 +1,7 @@
+import { Switch } from '@cherrystudio/ui'
 import { usePreference } from '@renderer/data/hooks/usePreference'
 import { type PreferenceKeyType, ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Button, Input, message, Select, Slider, Space, Switch, Typography } from 'antd'
+import { Button, Input, message, Select, Slider, Space, Typography } from 'antd'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
@@ -144,12 +145,7 @@ const PreferenceBasicTests: React.FC = () => {
 
             {/* Boolean Toggle */}
             {selectedKey === 'app.spell_check.enabled' && (
-              <Switch
-                checked={value === true}
-                onChange={(checked) => setValue(checked)}
-                checkedChildren="启用"
-                unCheckedChildren="禁用"
-              />
+              <Switch isSelected={value === true} onValueChange={(checked) => setValue(checked)} />
             )}
 
             {/* Language Switch */}