diff --git a/eslint.config.mjs b/eslint.config.mjs
index 47745b0f1..efbc13b0d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -145,7 +145,7 @@ export default defineConfig([
           paths: [
             {
               name: 'antd',
-              importNames: ['Flex', 'Switch', 'message',],
+              importNames: ['Flex', 'Switch', 'message', 'Button'],
               message:
                 '❌ Do not import this component from antd. Use our custom components instead: import { ... } from "@cherrystudio/ui"'
             },
diff --git a/packages/ui/src/components/base/Button/index.tsx b/packages/ui/src/components/base/Button/index.tsx
new file mode 100644
index 000000000..88815307a
--- /dev/null
+++ b/packages/ui/src/components/base/Button/index.tsx
@@ -0,0 +1,12 @@
+import type { ButtonProps as HeroUIButtonProps } from '@heroui/react'
+import { Button as HeroUIButton } from '@heroui/react'
+
+export interface ButtonProps extends HeroUIButtonProps {}
+
+const Button = ({ ...props }: ButtonProps) => {
+  return <HeroUIButton {...props} />
+}
+
+Button.displayName = 'Button'
+
+export default Button
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 4c6f97649..8add0fbfd 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -1,4 +1,5 @@
 // Base Components
+export { default as Button, type ButtonProps } from './base/Button'
 export { default as CopyButton } from './base/CopyButton'
 export { default as CustomCollapse } from './base/CustomCollapse'
 export { default as CustomTag } from './base/CustomTag'
diff --git a/packages/ui/src/components/interactive/ImageToolButton/index.tsx b/packages/ui/src/components/interactive/ImageToolButton/index.tsx
index b8defb32b..97a5eeaeb 100644
--- a/packages/ui/src/components/interactive/ImageToolButton/index.tsx
+++ b/packages/ui/src/components/interactive/ImageToolButton/index.tsx
@@ -1,17 +1,20 @@
 // Original path: src/renderer/src/components/Preview/ImageToolButton.tsx
-import { Button, Tooltip } from 'antd'
+import { Button } from '@cherrystudio/ui'
+import { Tooltip } from 'antd'
 import { memo } from 'react'
 
 interface ImageToolButtonProps {
   tooltip: string
   icon: React.ReactNode
-  onClick: () => void
+  onPress: () => void
 }
 
-const ImageToolButton = ({ tooltip, icon, onClick }: ImageToolButtonProps) => {
+const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => {
   return (
     <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
-      <Button shape="circle" icon={icon} onClick={onClick} role="button" aria-label={tooltip} />
+      <Button radius="full" isIconOnly onPress={onPress} aria-label={tooltip}>
+        {icon}
+      </Button>
     </Tooltip>
   )
 }
diff --git a/packages/ui/stories/components/base/Button.stories.tsx b/packages/ui/stories/components/base/Button.stories.tsx
new file mode 100644
index 000000000..b69aca5d3
--- /dev/null
+++ b/packages/ui/stories/components/base/Button.stories.tsx
@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from '../../../src/components'
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Base/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['solid', 'bordered', 'light', 'flat', 'faded', 'shadow', 'ghost']
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['default', 'primary', 'secondary', 'success', 'warning', 'danger']
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'md', 'lg']
+    },
+    radius: {
+      control: { type: 'select' },
+      options: ['none', 'sm', 'md', 'lg', 'full']
+    },
+    isDisabled: {
+      control: { type: 'boolean' }
+    },
+    isLoading: {
+      control: { type: 'boolean' }
+    },
+    fullWidth: {
+      control: { type: 'boolean' }
+    },
+    isIconOnly: {
+      control: { type: 'boolean' }
+    }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// 基础按钮
+export const Default: Story = {
+  args: {
+    children: 'Button'
+  }
+}
+
+// 不同变体
+export const Variants: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button variant="solid">Solid</Button>
+      <Button variant="bordered">Bordered</Button>
+      <Button variant="light">Light</Button>
+      <Button variant="flat">Flat</Button>
+      <Button variant="faded">Faded</Button>
+      <Button variant="shadow">Shadow</Button>
+      <Button variant="ghost">Ghost</Button>
+    </div>
+  )
+}
+
+// 不同颜色
+export const Colors: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button color="default">Default</Button>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="danger">Danger</Button>
+    </div>
+  )
+}
+
+// 不同尺寸
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-2 items-center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  )
+}
+
+// 不同圆角
+export const Radius: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button radius="none">None</Button>
+      <Button radius="sm">Small</Button>
+      <Button radius="md">Medium</Button>
+      <Button radius="lg">Large</Button>
+      <Button radius="full">Full</Button>
+    </div>
+  )
+}
+
+// 状态
+export const States: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button>Normal</Button>
+      <Button isDisabled>Disabled</Button>
+      <Button isLoading>Loading</Button>
+    </div>
+  )
+}
+
+// 带图标
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button startContent={<span>📧</span>}>Email</Button>
+      <Button endContent={<span>→</span>}>Next</Button>
+      <Button isIconOnly>🔍</Button>
+    </div>
+  )
+}
+
+// 全宽按钮
+export const FullWidth: Story = {
+  render: () => (
+    <div className="w-96">
+      <Button fullWidth color="primary">
+        Full Width Button
+      </Button>
+    </div>
+  )
+}
+
+// 交互示例
+export const Interactive: Story = {
+  render: () => (
+    <div className="flex gap-2 flex-wrap">
+      <Button onPress={() => alert('Button pressed!')}>Click Me</Button>
+      <Button onPress={() => console.log('Primary action')} color="primary" variant="solid">
+        Primary Action
+      </Button>
+    </div>
+  )
+}
diff --git a/src/renderer/src/assets/styles/index.css b/src/renderer/src/assets/styles/index.css
index d48eb615d..828342a06 100644
--- a/src/renderer/src/assets/styles/index.css
+++ b/src/renderer/src/assets/styles/index.css
@@ -170,10 +170,6 @@ ul {
   display: flow-root;
 }
 
-.lucide:not(.lucide-custom) {
-  color: var(--color-icon);
-}
-
 ::highlight(search-matches) {
   background-color: var(--color-background-highlight);
   color: var(--color-highlight);
diff --git a/src/renderer/src/components/Buttons/ActionIconButton.tsx b/src/renderer/src/components/Buttons/ActionIconButton.tsx
index d571f7ff1..a492a4857 100644
--- a/src/renderer/src/components/Buttons/ActionIconButton.tsx
+++ b/src/renderer/src/components/Buttons/ActionIconButton.tsx
@@ -1,31 +1,34 @@
 import { cn } from '@cherrystudio/ui'
-import type { ButtonProps } from 'antd'
-import { Button } from 'antd'
+import { Button, type ButtonProps } from '@cherrystudio/ui'
 import React, { memo } from 'react'
 
-interface ActionIconButtonProps extends ButtonProps {
-  children: React.ReactNode
+interface ActionIconButtonProps extends Omit<ButtonProps, 'ref'> {
+  icon: React.ReactNode
   active?: boolean
 }
 
 /**
  * A simple action button rendered as an icon
  */
-const ActionIconButton: React.FC<ActionIconButtonProps> = ({ children, active = false, className, ...props }) => {
+const ActionIconButton: React.FC<ActionIconButtonProps> = ({ icon, active = false, className, ...props }) => {
   return (
     <Button
-      type="text"
-      shape="circle"
+      size="sm"
+      variant="light"
+      radius="full"
+      isIconOnly
+      startContent={icon}
       className={cn(
-        'flex h-[30px] w-[30px] cursor-pointer flex-row items-center justify-center border-none p-0 text-base transition-all duration-300 ease-in-out [&_.anticon]:text-icon [&_.icon-a-addchat]:mb-[-2px] [&_.icon-a-addchat]:text-lg [&_.icon]:text-icon [&_.iconfont]:text-icon [&_.lucide]:text-icon',
+        'flex cursor-pointer flex-row items-center justify-center border-none p-0 text-base transition-all duration-300 ease-in-out [&_.anticon]:text-icon [&_.icon-a-addchat]:mb-[-2px] [&_.icon-a-addchat]:text-lg [&_.icon]:text-icon [&_.iconfont]:text-icon [&_.lucide]:text-icon',
         active &&
           '[&_.anticon]:text-primary! [&_.icon]:text-primary! [&_.iconfont]:text-primary! [&_.lucide]:text-primary!',
         className
       )}
-      {...props}>
-      {children}
-    </Button>
+      {...props}
+    />
   )
 }
 
+ActionIconButton.displayName = 'ActionIconButton'
+
 export default memo(ActionIconButton)
diff --git a/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx b/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
index c6feb2b48..77e46137e 100644
--- a/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
+++ b/src/renderer/src/components/CodeBlockView/HtmlArtifactsCard.tsx
@@ -1,9 +1,9 @@
 import { CodeOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { extractHtmlTitle, getFileNameFromHtmlTitle } from '@renderer/utils/formats'
 import type { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Button } from 'antd'
 import { Code, DownloadIcon, Globe, LinkIcon, Sparkles } from 'lucide-react'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -89,20 +89,32 @@ const HtmlArtifactsCard: FC<Props> = ({ html, onSave, isStreaming = false }) =>
                 </TerminalContent>
               </TerminalPreview>
               <ButtonContainer>
-                <Button icon={<CodeOutlined />} onClick={() => setIsPopupOpen(true)} type="primary">
+                <Button startContent={<CodeOutlined />} onPress={() => setIsPopupOpen(true)} color="primary">
                   {t('chat.artifacts.button.preview')}
                 </Button>
               </ButtonContainer>
             </>
           ) : (
             <ButtonContainer>
-              <Button icon={<CodeOutlined />} onClick={() => setIsPopupOpen(true)} type="text" disabled={!hasContent}>
+              <Button
+                startContent={<CodeOutlined />}
+                onPress={() => setIsPopupOpen(true)}
+                variant="light"
+                isDisabled={!hasContent}>
                 {t('chat.artifacts.button.preview')}
               </Button>
-              <Button icon={<LinkIcon size={14} />} onClick={handleOpenExternal} type="text" disabled={!hasContent}>
+              <Button
+                startContent={<LinkIcon size={14} />}
+                onPress={handleOpenExternal}
+                variant="light"
+                isDisabled={!hasContent}>
                 {t('chat.artifacts.button.openExternal')}
               </Button>
-              <Button icon={<DownloadIcon size={14} />} onClick={handleDownload} type="text" disabled={!hasContent}>
+              <Button
+                startContent={<DownloadIcon size={14} />}
+                onPress={handleDownload}
+                variant="light"
+                isDisabled={!hasContent}>
                 {t('code_block.download.label')}
               </Button>
             </ButtonContainer>
diff --git a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
index e176d227e..82e3a5849 100644
--- a/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
+++ b/src/renderer/src/components/CodeBlockView/HtmlArtifactsPopup.tsx
@@ -1,4 +1,5 @@
 import { CodeEditor, type CodeEditorHandles } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { CopyIcon, FilePngIcon } from '@renderer/components/Icons'
 import { isMac } from '@renderer/config/constant'
@@ -7,7 +8,7 @@ import { useTemporaryValue } from '@renderer/hooks/useTemporaryValue'
 import { classNames } from '@renderer/utils'
 import { extractHtmlTitle, getFileNameFromHtmlTitle } from '@renderer/utils/formats'
 import { captureScrollableIframeAsBlob, captureScrollableIframeAsDataURL } from '@renderer/utils/image'
-import { Button, Dropdown, Modal, Splitter, Tooltip, Typography } from 'antd'
+import { Dropdown, Modal, Splitter, Tooltip, Typography } from 'antd'
 import { Camera, Check, Code, Eye, Maximize2, Minimize2, SaveIcon, SquareSplitHorizontal, X } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -83,24 +84,24 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
       <HeaderCenter>
         <ViewControls onDoubleClick={(e) => e.stopPropagation()}>
           <ViewButton
-            size="small"
-            type={viewMode === 'split' ? 'primary' : 'default'}
-            icon={<SquareSplitHorizontal size={14} />}
-            onClick={() => setViewMode('split')}>
+            size="sm"
+            color={viewMode === 'split' ? 'primary' : 'default'}
+            startContent={<SquareSplitHorizontal size={14} />}
+            onPress={() => setViewMode('split')}>
             {t('html_artifacts.split')}
           </ViewButton>
           <ViewButton
-            size="small"
-            type={viewMode === 'code' ? 'primary' : 'default'}
-            icon={<Code size={14} />}
-            onClick={() => setViewMode('code')}>
+            size="sm"
+            color={viewMode === 'code' ? 'primary' : 'default'}
+            startContent={<Code size={14} />}
+            onPress={() => setViewMode('code')}>
             {t('html_artifacts.code')}
           </ViewButton>
           <ViewButton
-            size="small"
-            type={viewMode === 'preview' ? 'primary' : 'default'}
-            icon={<Eye size={14} />}
-            onClick={() => setViewMode('preview')}>
+            size="sm"
+            color={viewMode === 'preview' ? 'primary' : 'default'}
+            startContent={<Eye size={14} />}
+            onPress={() => setViewMode('preview')}>
             {t('html_artifacts.preview')}
           </ViewButton>
         </ViewControls>
@@ -126,16 +127,17 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
             ]
           }}>
           <Tooltip title={t('html_artifacts.capture.label')} mouseLeaveDelay={0}>
-            <Button type="text" icon={<Camera size={16} />} className="nodrag" />
+            <Button variant="light" startContent={<Camera size={16} />} isIconOnly className="nodrag" />
           </Tooltip>
         </Dropdown>
         <Button
-          onClick={() => setIsFullscreen(!isFullscreen)}
-          type="text"
-          icon={isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
+          onPress={() => setIsFullscreen(!isFullscreen)}
+          variant="light"
+          startContent={isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
+          isIconOnly
           className="nodrag"
         />
-        <Button onClick={onClose} type="text" icon={<X size={16} />} className="nodrag" />
+        <Button onPress={onClose} variant="light" startContent={<X size={16} />} isIconOnly className="nodrag" />
       </HeaderRight>
     </ModalHeader>
   )
@@ -163,18 +165,13 @@ const HtmlArtifactsPopup: React.FC<HtmlArtifactsPopupProps> = ({ open, title, ht
         />
         <ToolbarWrapper>
           <Tooltip title={t('code_block.edit.save.label')} mouseLeaveDelay={0}>
-            <ToolbarButton
-              shape="circle"
-              size="large"
-              icon={
-                saved ? (
-                  <Check size={16} color="var(--color-status-success)" />
-                ) : (
-                  <SaveIcon size={16} className="custom-lucide" />
-                )
-              }
-              onClick={handleSave}
-            />
+            <ToolbarButton radius="full" size="lg" isIconOnly onPress={handleSave}>
+              {saved ? (
+                <Check size={16} color="var(--color-status-success)" />
+              ) : (
+                <SaveIcon size={16} className="custom-lucide" />
+              )}
+            </ToolbarButton>
           </Tooltip>
         </ToolbarWrapper>
       </CodeSection>
diff --git a/src/renderer/src/components/ContentSearch.tsx b/src/renderer/src/components/ContentSearch.tsx
index d322f4161..53b60333f 100644
--- a/src/renderer/src/components/ContentSearch.tsx
+++ b/src/renderer/src/components/ContentSearch.tsx
@@ -364,23 +364,33 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
               <ToolBar>
                 {showUserToggle && (
                   <Tooltip title={t('button.includes_user_questions')} mouseEnterDelay={0.8} placement="bottom">
-                    <ActionIconButton onClick={userOutlinedButtonOnClick}>
-                      <User size={18} style={{ color: includeUser ? 'var(--color-link)' : 'var(--color-icon)' }} />
-                    </ActionIconButton>
+                    <ActionIconButton
+                      onPress={userOutlinedButtonOnClick}
+                      isIconOnly
+                      icon={
+                        <User size={18} style={{ color: includeUser ? 'var(--color-link)' : 'var(--color-icon)' }} />
+                      }
+                    />
                   </Tooltip>
                 )}
                 <Tooltip title={t('button.case_sensitive')} mouseEnterDelay={0.8} placement="bottom">
-                  <ActionIconButton onClick={caseSensitiveButtonOnClick}>
-                    <CaseSensitive
-                      size={18}
-                      style={{ color: isCaseSensitive ? 'var(--color-link)' : 'var(--color-icon)' }}
-                    />
-                  </ActionIconButton>
+                  <ActionIconButton
+                    onPress={caseSensitiveButtonOnClick}
+                    icon={
+                      <CaseSensitive
+                        size={18}
+                        style={{ color: isCaseSensitive ? 'var(--color-link)' : 'var(--color-icon)' }}
+                      />
+                    }
+                  />
                 </Tooltip>
                 <Tooltip title={t('button.whole_word')} mouseEnterDelay={0.8} placement="bottom">
-                  <ActionIconButton onClick={wholeWordButtonOnClick}>
-                    <WholeWord size={18} style={{ color: isWholeWord ? 'var(--color-link)' : 'var(--color-icon)' }} />
-                  </ActionIconButton>
+                  <ActionIconButton
+                    onPress={wholeWordButtonOnClick}
+                    icon={
+                      <WholeWord size={18} style={{ color: isWholeWord ? 'var(--color-link)' : 'var(--color-icon)' }} />
+                    }
+                  />
                 </Tooltip>
               </ToolBar>
             </InputWrapper>
@@ -397,15 +407,17 @@ export const ContentSearch = React.forwardRef<ContentSearchRef, Props>(
               )}
             </SearchResults>
             <ToolBar>
-              <ActionIconButton onClick={prevButtonOnClick} disabled={allRanges.length === 0}>
-                <ChevronUp size={18} />
-              </ActionIconButton>
-              <ActionIconButton onClick={nextButtonOnClick} disabled={allRanges.length === 0}>
-                <ChevronDown size={18} />
-              </ActionIconButton>
-              <ActionIconButton onClick={closeButtonOnClick}>
-                <X size={18} />
-              </ActionIconButton>
+              <ActionIconButton
+                onPress={prevButtonOnClick}
+                isDisabled={allRanges.length === 0}
+                icon={<ChevronUp size={18} />}
+              />
+              <ActionIconButton
+                onPress={nextButtonOnClick}
+                isDisabled={allRanges.length === 0}
+                icon={<ChevronDown size={18} />}
+              />
+              <ActionIconButton onPress={closeButtonOnClick} icon={<X size={18} />} />
             </ToolBar>
           </SearchBarContainer>
         </NarrowLayout>
diff --git a/src/renderer/src/components/ExpandableText.tsx b/src/renderer/src/components/ExpandableText.tsx
index 5df32bb9c..fc28d73ba 100644
--- a/src/renderer/src/components/ExpandableText.tsx
+++ b/src/renderer/src/components/ExpandableText.tsx
@@ -1,4 +1,4 @@
-import { Button } from 'antd'
+import { Button } from '@cherrystudio/ui'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -22,7 +22,7 @@ const ExpandableText = ({
 
   const button = useMemo(() => {
     return (
-      <Button type="link" onClick={toggleExpand} style={{ alignSelf: 'flex-end' }}>
+      <Button variant="light" onPress={toggleExpand} className="self-end">
         {isExpanded ? t('common.collapse') : t('common.expand')}
       </Button>
     )
diff --git a/src/renderer/src/components/InputEmbeddingDimension.tsx b/src/renderer/src/components/InputEmbeddingDimension.tsx
index 8e6357a91..db2c79d87 100644
--- a/src/renderer/src/components/InputEmbeddingDimension.tsx
+++ b/src/renderer/src/components/InputEmbeddingDimension.tsx
@@ -1,10 +1,11 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import AiProvider from '@renderer/aiCore'
 import { RefreshIcon } from '@renderer/components/Icons'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { Model } from '@renderer/types'
 import { getErrorMessage } from '@renderer/utils'
-import { Button, InputNumber, Space, Tooltip } from 'antd'
+import { InputNumber, Space, Tooltip } from 'antd'
 import { memo, useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -77,9 +78,11 @@ const InputEmbeddingDimension = ({
         <Button
           role="button"
           aria-label="Get embedding dimension"
-          disabled={disabled || loading}
-          onClick={handleFetchDimension}
-          icon={<RefreshIcon size={16} className={loading ? 'animation-rotate' : ''} />}
+          isDisabled={disabled || loading}
+          onPress={handleFetchDimension}
+          size="sm"
+          startContent={<RefreshIcon size={16} className={loading ? 'animation-rotate' : ''} />}
+          isIconOnly
         />
       </Tooltip>
     </Space.Compact>
diff --git a/src/renderer/src/components/LocalBackupManager.tsx b/src/renderer/src/components/LocalBackupManager.tsx
index 13dbcf329..8086add91 100644
--- a/src/renderer/src/components/LocalBackupManager.tsx
+++ b/src/renderer/src/components/LocalBackupManager.tsx
@@ -1,7 +1,8 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Button, Flex } from '@cherrystudio/ui'
 import { restoreFromLocal } from '@renderer/services/BackupService'
 import { formatFileSize } from '@renderer/utils'
-import { Button, Modal, Table, Tooltip } from 'antd'
+import { Modal, Table, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -191,18 +192,25 @@ export function LocalBackupManager({ visible, onClose, localBackupDir, restoreMe
       key: 'action',
       width: 160,
       render: (_: any, record: BackupFile) => (
-        <>
-          <Button type="link" onClick={() => handleRestore(record.fileName)} disabled={restoring || deleting}>
+        <Flex>
+          <Button
+            className="inline-flex"
+            size="sm"
+            variant="light"
+            onPress={() => handleRestore(record.fileName)}
+            isDisabled={restoring || deleting}>
             {t('settings.data.local.backup.manager.restore.text')}
           </Button>
           <Button
-            type="link"
-            danger
-            onClick={() => handleDeleteSingle(record.fileName)}
-            disabled={deleting || restoring}>
+            className="inline-flex"
+            size="sm"
+            variant="light"
+            color="danger"
+            onPress={() => handleDeleteSingle(record.fileName)}
+            isDisabled={deleting || restoring}>
             {t('settings.data.local.backup.manager.delete.text')}
           </Button>
-        </>
+        </Flex>
       )
     }
   ]
@@ -222,20 +230,21 @@ export function LocalBackupManager({ visible, onClose, localBackupDir, restoreMe
       width={800}
       centered
       transitionName="animation-move-down"
+      classNames={{ footer: 'flex justify-end gap-1' }}
       footer={[
-        <Button key="refresh" icon={<ReloadOutlined />} onClick={fetchBackupFiles} disabled={loading}>
+        <Button key="refresh" startContent={<ReloadOutlined />} onPress={fetchBackupFiles} isDisabled={loading}>
           {t('settings.data.local.backup.manager.refresh')}
         </Button>,
         <Button
           key="delete"
-          danger
-          icon={<DeleteOutlined />}
-          onClick={handleDeleteSelected}
-          disabled={selectedRowKeys.length === 0 || deleting}
-          loading={deleting}>
+          color="danger"
+          startContent={<DeleteOutlined />}
+          onPress={handleDeleteSelected}
+          isDisabled={selectedRowKeys.length === 0 || deleting}
+          isLoading={deleting}>
           {t('settings.data.local.backup.manager.delete.selected')} ({selectedRowKeys.length})
         </Button>,
-        <Button key="close" onClick={onClose}>
+        <Button key="close" onPress={onClose}>
           {t('common.close')}
         </Button>
       ]}>
diff --git a/src/renderer/src/components/LocalBackupModals.tsx b/src/renderer/src/components/LocalBackupModals.tsx
index d5c7972a1..ab0160ff2 100644
--- a/src/renderer/src/components/LocalBackupModals.tsx
+++ b/src/renderer/src/components/LocalBackupModals.tsx
@@ -1,6 +1,7 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { backupToLocal } from '@renderer/services/BackupService'
-import { Button, Input, Modal } from 'antd'
+import { Input, Modal } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -32,11 +33,12 @@ export function LocalBackupModal({
       open={isModalVisible}
       onOk={handleBackup}
       onCancel={handleCancel}
+      classNames={{ footer: 'flex justify-end gap-1' }}
       footer={[
-        <Button key="back" onClick={handleCancel}>
+        <Button key="back" onPress={handleCancel}>
           {t('common.cancel')}
         </Button>,
-        <Button key="submit" type="primary" loading={backuping} onClick={handleBackup}>
+        <Button key="submit" color="primary" isLoading={backuping} onPress={handleBackup}>
           {t('common.confirm')}
         </Button>
       ]}>
diff --git a/src/renderer/src/components/MinApp/MinappPopupContainer.tsx b/src/renderer/src/components/MinApp/MinappPopupContainer.tsx
index 01c0517e8..10df610f8 100644
--- a/src/renderer/src/components/MinApp/MinappPopupContainer.tsx
+++ b/src/renderer/src/components/MinApp/MinappPopupContainer.tsx
@@ -10,6 +10,7 @@ import {
   PushpinOutlined,
   ReloadOutlined
 } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import WindowControls from '@renderer/components/WindowControls'
@@ -24,7 +25,7 @@ import { useTimer } from '@renderer/hooks/useTimer'
 import type { MinAppType } from '@renderer/types'
 import { delay } from '@renderer/utils'
 import { clearWebviewState, getWebviewLoaded, setWebviewLoaded } from '@renderer/utils/webviewStateManager'
-import { Alert, Avatar, Button, Drawer, Tooltip } from 'antd'
+import { Alert, Avatar, Drawer, Tooltip } from 'antd'
 import type { WebviewTag } from 'electron'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -129,7 +130,7 @@ const GoogleLoginTip = ({
       banner
       onClose={handleClose}
       action={
-        <Button type="primary" size="small" onClick={openGoogleMinApp}>
+        <Button color="primary" size="sm" onPress={openGoogleMinApp}>
           {t('common.open')} Google
         </Button>
       }
diff --git a/src/renderer/src/components/ModelSelectButton.tsx b/src/renderer/src/components/ModelSelectButton.tsx
index 959461389..1f69fba9f 100644
--- a/src/renderer/src/components/ModelSelectButton.tsx
+++ b/src/renderer/src/components/ModelSelectButton.tsx
@@ -1,6 +1,7 @@
+import { Button } from '@cherrystudio/ui'
 import type { Model } from '@renderer/types'
 import type { TooltipProps } from 'antd'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { useCallback, useMemo } from 'react'
 
 import ModelAvatar from './Avatar/ModelAvatar'
@@ -23,7 +24,15 @@ const ModelSelectButton = ({ model, onSelectModel, modelFilter, noTooltip, toolt
   }, [model, modelFilter, onSelectModel])
 
   const button = useMemo(() => {
-    return <Button icon={<ModelAvatar model={model} size={22} />} type="text" shape="circle" onClick={onClick} />
+    return (
+      <Button
+        startContent={<ModelAvatar model={model} size={22} />}
+        variant="light"
+        radius="full"
+        isIconOnly
+        onPress={onClick}
+      />
+    )
   }, [model, onClick])
 
   if (noTooltip) {
diff --git a/src/renderer/src/components/NutstorePathSelector.tsx b/src/renderer/src/components/NutstorePathSelector.tsx
index 531dc086b..ffd9fb828 100644
--- a/src/renderer/src/components/NutstorePathSelector.tsx
+++ b/src/renderer/src/components/NutstorePathSelector.tsx
@@ -1,7 +1,8 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { FolderIcon as NutstoreFolderIcon } from '@renderer/components/Icons/NutstoreIcons'
-import { Button, Input } from 'antd'
+import { Input } from 'antd'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -35,10 +36,10 @@ function NewFolder(props: NewFolderProps) {
     <NewFolderContainer>
       <FolderIcon className={props.className}></FolderIcon>
       <Input type="text" style={{ flex: 1 }} autoFocus value={name} onChange={(e) => setName(e.target.value)} />
-      <Button type="primary" size="small" onClick={() => onConfirm(name)}>
+      <Button color="primary" size="sm" onPress={() => onConfirm(name)}>
         {t('settings.data.nutstore.new_folder.button.confirm')}
       </Button>
-      <Button type="default" size="small" onClick={() => onCancel()}>
+      <Button size="sm" onPress={() => onCancel()}>
         {t('settings.data.nutstore.new_folder.button.cancel')}
       </Button>
     </NewFolderContainer>
@@ -234,16 +235,14 @@ export function NustorePathSelectorFooter(props: FooterProps) {
   return (
     <FooterContainer className="justify-between">
       <RowFlex className="items-center gap-2">
-        <Button onClick={props.returnPrev}>{t('settings.data.nutstore.pathSelector.return')}</Button>
-        <Button size="small" type="link" onClick={props.mkdir}>
+        <Button onPress={props.returnPrev}>{t('settings.data.nutstore.pathSelector.return')}</Button>
+        <Button size="sm" variant="light" onPress={props.mkdir}>
           {t('settings.data.nutstore.new_folder.button.label')}
         </Button>
       </RowFlex>
       <RowFlex className="items-center gap-2">
-        <Button type="default" onClick={props.cancel}>
-          {t('settings.data.nutstore.new_folder.button.cancel')}
-        </Button>
-        <Button type="primary" onClick={props.confirm}>
+        <Button onPress={props.cancel}>{t('settings.data.nutstore.new_folder.button.cancel')}</Button>
+        <Button color="primary" onPress={props.confirm}>
           {t('backup.confirm.button')}
         </Button>
       </RowFlex>
diff --git a/src/renderer/src/components/OAuth/OAuthButton.tsx b/src/renderer/src/components/OAuth/OAuthButton.tsx
index b8e485a8e..5584adc32 100644
--- a/src/renderer/src/components/OAuth/OAuthButton.tsx
+++ b/src/renderer/src/components/OAuth/OAuthButton.tsx
@@ -1,3 +1,4 @@
+import { Button, type ButtonProps } from '@cherrystudio/ui'
 import { getProviderLabel } from '@renderer/i18n/label'
 import type { Provider } from '@renderer/types'
 import {
@@ -8,8 +9,6 @@ import {
   oauthWithSiliconFlow,
   oauthWithTokenFlux
 } from '@renderer/utils/oauth'
-import type { ButtonProps } from 'antd'
-import { Button } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -55,7 +54,7 @@ const OAuthButton: FC<Props> = ({ provider, onSuccess, ...buttonProps }) => {
   }
 
   return (
-    <Button type="primary" onClick={onAuth} shape="round" {...buttonProps}>
+    <Button color="primary" onPress={onAuth} radius="full" {...buttonProps}>
       {t('settings.provider.oauth.button', { provider: getProviderLabel(provider.id) })}
     </Button>
   )
diff --git a/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx b/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
index e85d8093e..9d5dfbd39 100644
--- a/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
+++ b/src/renderer/src/components/Popups/ApiKeyListPopup/item.tsx
@@ -1,11 +1,12 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import { EditIcon } from '@renderer/components/Icons'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
 import type { InputRef } from 'antd'
-import { Button, Input, List, Popconfirm, Tooltip, Typography } from 'antd'
+import { Input, List, Popconfirm, Tooltip, Typography } from 'antd'
 import { Check, Minus, X } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useEffect, useRef, useState } from 'react'
@@ -93,79 +94,96 @@ const ApiKeyItem: FC<ApiKeyItemProps> = ({
 
   return (
     <List.Item>
-      {isEditing ? (
-        <ItemInnerContainer style={{ gap: '10px' }}>
-          <Input.Password
-            ref={inputRef}
-            value={editValue}
-            onChange={(e) => setEditValue(e.target.value)}
-            onPressEnter={handleSave}
-            placeholder={t('settings.provider.api.key.new_key.placeholder')}
-            style={{ flex: 1, fontSize: '14px', marginLeft: '-10px' }}
-            spellCheck={false}
-            disabled={disabled}
-          />
-          <Flex className="items-center gap-0">
-            <Tooltip title={t('common.save')}>
-              <Button
-                type={hasUnsavedChanges ? 'primary' : 'text'}
-                icon={<Check size={16} />}
-                onClick={handleSave}
-                disabled={disabled}
-              />
-            </Tooltip>
-            <Tooltip title={t('common.cancel')}>
-              <Button type="text" icon={<X size={16} />} onClick={handleCancelEdit} disabled={disabled} />
-            </Tooltip>
-          </Flex>
-        </ItemInnerContainer>
-      ) : (
-        <ItemInnerContainer style={{ gap: '10px' }}>
-          <Tooltip
-            title={
-              <Typography.Text style={{ color: 'white' }} copyable={{ text: keyStatus.key }}>
-                {keyStatus.key}
-              </Typography.Text>
-            }
-            mouseEnterDelay={0.5}
-            placement="top"
-            // 确保不留下明文
-            destroyOnHidden>
-            <span style={{ cursor: 'help' }}>{maskApiKey(keyStatus.key)}</span>
-          </Tooltip>
-
-          <Flex className="items-center gap-2.5">
-            <HealthStatusIndicator results={healthResults} loading={false} />
-
+      <ItemInnerContainer className="gap-2 px-3">
+        {isEditing ? (
+          <>
+            <Input.Password
+              ref={inputRef}
+              value={editValue}
+              onChange={(e) => setEditValue(e.target.value)}
+              onPressEnter={handleSave}
+              placeholder={t('settings.provider.api.key.new_key.placeholder')}
+              style={{ flex: 1, fontSize: '14px' }}
+              spellCheck={false}
+              disabled={disabled}
+            />
             <Flex className="items-center gap-0">
-              {showHealthCheck && (
-                <Tooltip title={t('settings.provider.check')} mouseLeaveDelay={0}>
+              <Tooltip title={t('common.save')}>
+                <Button
+                  color={hasUnsavedChanges ? 'primary' : 'default'}
+                  variant={hasUnsavedChanges ? 'solid' : 'light'}
+                  startContent={<Check size={16} />}
+                  onPress={handleSave}
+                  isDisabled={disabled}
+                  isIconOnly
+                />
+              </Tooltip>
+              <Tooltip title={t('common.cancel')}>
+                <Button
+                  variant="light"
+                  startContent={<X size={16} />}
+                  onPress={handleCancelEdit}
+                  isDisabled={disabled}
+                  isIconOnly
+                />
+              </Tooltip>
+            </Flex>
+          </>
+        ) : (
+          <>
+            <Tooltip
+              title={
+                <Typography.Text style={{ color: 'white' }} copyable={{ text: keyStatus.key }}>
+                  {keyStatus.key}
+                </Typography.Text>
+              }
+              mouseEnterDelay={0.5}
+              placement="top"
+              // 确保不留下明文
+              destroyOnHidden>
+              <span style={{ cursor: 'help' }}>{maskApiKey(keyStatus.key)}</span>
+            </Tooltip>
+
+            <Flex className="items-center gap-2.5">
+              <HealthStatusIndicator results={healthResults} loading={false} />
+
+              <Flex className="items-center gap-0">
+                {showHealthCheck && (
+                  <Tooltip title={t('settings.provider.check')} mouseLeaveDelay={0}>
+                    <Button
+                      variant="light"
+                      startContent={<StreamlineGoodHealthAndWellBeing size={18} isActive={keyStatus.checking} />}
+                      onPress={onCheck}
+                      isDisabled={disabled}
+                      isIconOnly
+                    />
+                  </Tooltip>
+                )}
+                <Tooltip title={t('common.edit')} mouseLeaveDelay={0}>
                   <Button
-                    type="text"
-                    icon={<StreamlineGoodHealthAndWellBeing size={18} isActive={keyStatus.checking} />}
-                    onClick={onCheck}
-                    disabled={disabled}
+                    variant="light"
+                    startContent={<EditIcon size={16} />}
+                    onPress={handleEdit}
+                    isDisabled={disabled}
+                    isIconOnly
                   />
                 </Tooltip>
-              )}
-              <Tooltip title={t('common.edit')} mouseLeaveDelay={0}>
-                <Button type="text" icon={<EditIcon size={16} />} onClick={handleEdit} disabled={disabled} />
-              </Tooltip>
-              <Popconfirm
-                title={t('common.delete_confirm')}
-                onConfirm={onRemove}
-                disabled={disabled}
-                okText={t('common.confirm')}
-                cancelText={t('common.cancel')}
-                okButtonProps={{ danger: true }}>
-                <Tooltip title={t('common.delete')} mouseLeaveDelay={0}>
-                  <Button type="text" icon={<Minus size={16} />} disabled={disabled} />
-                </Tooltip>
-              </Popconfirm>
+                <Popconfirm
+                  title={t('common.delete_confirm')}
+                  onConfirm={onRemove}
+                  disabled={disabled}
+                  okText={t('common.confirm')}
+                  cancelText={t('common.cancel')}
+                  okButtonProps={{ color: 'danger' }}>
+                  <Tooltip title={t('common.delete')} mouseLeaveDelay={0}>
+                    <Button variant="light" startContent={<Minus size={16} />} isDisabled={disabled} isIconOnly />
+                  </Tooltip>
+                </Popconfirm>
+              </Flex>
             </Flex>
-          </Flex>
-        </ItemInnerContainer>
-      )}
+          </>
+        )}
+      </ItemInnerContainer>
     </List.Item>
   )
 }
diff --git a/src/renderer/src/components/Popups/ApiKeyListPopup/list.tsx b/src/renderer/src/components/Popups/ApiKeyListPopup/list.tsx
index a76ff464e..58449354c 100644
--- a/src/renderer/src/components/Popups/ApiKeyListPopup/list.tsx
+++ b/src/renderer/src/components/Popups/ApiKeyListPopup/list.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DeleteIcon } from '@renderer/components/Icons'
 import { StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons/SVGIcon'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -10,7 +11,7 @@ import { isProviderSupportAuth } from '@renderer/services/ProviderService'
 import type { PreprocessProviderId, WebSearchProviderId } from '@renderer/types'
 import type { ApiKeyWithStatus } from '@renderer/types/healthCheck'
 import { HealthStatus } from '@renderer/types/healthCheck'
-import { Button, Card, List, Popconfirm, Space, Tooltip, Typography } from 'antd'
+import { Card, List, Popconfirm, Space, Tooltip, Typography } from 'antd'
 import { Plus } from 'lucide-react'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -141,13 +142,14 @@ export const ApiKeyList: FC<ApiKeyListProps> = ({ provider, updateProvider, show
                 onConfirm={removeInvalidKeys}
                 okText={t('common.confirm')}
                 cancelText={t('common.cancel')}
-                okButtonProps={{ danger: true }}>
+                okButtonProps={{ color: 'danger' }}>
                 <Tooltip title={t('settings.provider.remove_invalid_keys')} placement="top" mouseLeaveDelay={0}>
                   <Button
-                    type="text"
-                    icon={<DeleteIcon size={16} className="lucide-custom" />}
-                    disabled={isChecking || !!pendingNewKey}
-                    danger
+                    variant="light"
+                    startContent={<DeleteIcon size={16} className="lucide-custom" />}
+                    isDisabled={isChecking || !!pendingNewKey}
+                    color="danger"
+                    isIconOnly
                   />
                 </Tooltip>
               </Popconfirm>
@@ -155,10 +157,11 @@ export const ApiKeyList: FC<ApiKeyListProps> = ({ provider, updateProvider, show
               {/* 批量检查 */}
               <Tooltip title={t('settings.provider.check_all_keys')} placement="top" mouseLeaveDelay={0}>
                 <Button
-                  type="text"
-                  icon={<StreamlineGoodHealthAndWellBeing size={'1.2em'} />}
-                  onClick={checkAllKeysConnectivity}
-                  disabled={isChecking || !!pendingNewKey}
+                  variant="light"
+                  startContent={<StreamlineGoodHealthAndWellBeing size={'1.2em'} />}
+                  onPress={checkAllKeysConnectivity}
+                  isDisabled={isChecking || !!pendingNewKey}
+                  isIconOnly
                 />
               </Tooltip>
             </Space>
@@ -167,11 +170,11 @@ export const ApiKeyList: FC<ApiKeyListProps> = ({ provider, updateProvider, show
           {/* 添加新 key */}
           <Button
             key="add"
-            type="primary"
-            onClick={handleAddNew}
-            icon={<Plus size={16} />}
+            color="primary"
+            onPress={handleAddNew}
+            startContent={<Plus size={16} />}
             autoFocus={shouldAutoFocus()}
-            disabled={isChecking || !!pendingNewKey}>
+            isDisabled={isChecking || !!pendingNewKey}>
             {t('common.add')}
           </Button>
         </Space>
diff --git a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx
index 7594d6a20..930c57311 100644
--- a/src/renderer/src/components/Popups/MultiSelectionPopup.tsx
+++ b/src/renderer/src/components/Popups/MultiSelectionPopup.tsx
@@ -1,7 +1,8 @@
+import { Button } from '@cherrystudio/ui'
 import { CopyIcon, DeleteIcon } from '@renderer/components/Icons'
 import { useChatContext } from '@renderer/hooks/useChatContext'
 import type { Topic } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { Save, X } from 'lucide-react'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -37,37 +38,37 @@ const MultiSelectActionPopup: FC<Props> = ({ topic }) => {
         <ActionButtons>
           <Tooltip title={t('common.save')}>
             <Button
-              shape="circle"
-              color="default"
-              variant="text"
-              icon={<Save size={16} />}
-              disabled={isActionDisabled}
-              onClick={() => handleAction('save')}
+              radius="full"
+              variant="light"
+              startContent={<Save size={16} />}
+              isDisabled={isActionDisabled}
+              onPress={() => handleAction('save')}
+              isIconOnly
             />
           </Tooltip>
           <Tooltip title={t('common.copy')}>
             <Button
-              shape="circle"
-              color="default"
-              variant="text"
-              icon={<CopyIcon size={16} />}
-              disabled={isActionDisabled}
-              onClick={() => handleAction('copy')}
+              radius="full"
+              variant="light"
+              startContent={<CopyIcon size={16} />}
+              isDisabled={isActionDisabled}
+              onPress={() => handleAction('copy')}
+              isIconOnly
             />
           </Tooltip>
           <Tooltip title={t('common.delete')}>
             <Button
-              shape="circle"
+              radius="full"
               color="danger"
-              variant="text"
-              danger
-              icon={<DeleteIcon size={16} className="lucide-custom" />}
-              onClick={() => handleAction('delete')}
+              variant="light"
+              startContent={<DeleteIcon size={16} className="lucide-custom" />}
+              onPress={() => handleAction('delete')}
+              isIconOnly
             />
           </Tooltip>
         </ActionButtons>
         <Tooltip title={t('chat.navigation.close')}>
-          <Button shape="circle" color="default" variant="text" icon={<X size={16} />} onClick={handleClose} />
+          <Button radius="full" variant="light" startContent={<X size={16} />} onPress={handleClose} isIconOnly />
         </Tooltip>
       </ActionBar>
     </Container>
diff --git a/src/renderer/src/components/Popups/PrivacyPopup.tsx b/src/renderer/src/components/Popups/PrivacyPopup.tsx
index f35812606..0cc80a427 100644
--- a/src/renderer/src/components/Popups/PrivacyPopup.tsx
+++ b/src/renderer/src/components/Popups/PrivacyPopup.tsx
@@ -1,8 +1,9 @@
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { runAsyncFunction } from '@renderer/utils'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Button, Modal } from 'antd'
+import { Modal } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -92,11 +93,11 @@ const PopupContainer: React.FC<Props> = ({ title, showDeclineButton = true, reso
       width={900}
       footer={[
         showDeclineButton && (
-          <Button key="decline" onClick={handleDecline}>
+          <Button key="decline" onPress={handleDecline}>
             {i18n.language.startsWith('zh') ? '拒绝' : 'Decline'}
           </Button>
         ),
-        <Button key="accept" type="primary" onClick={handleAccept}>
+        <Button key="accept" variant="solid" color="primary" onPress={handleAccept}>
           {i18n.language.startsWith('zh') ? '同意并继续' : 'Accept and Continue'}
         </Button>
       ].filter(Boolean)}>
diff --git a/src/renderer/src/components/Preview/ImageToolButton.tsx b/src/renderer/src/components/Preview/ImageToolButton.tsx
index e14ae8fee..8577b0a67 100644
--- a/src/renderer/src/components/Preview/ImageToolButton.tsx
+++ b/src/renderer/src/components/Preview/ImageToolButton.tsx
@@ -1,16 +1,17 @@
-import { Button, Tooltip } from 'antd'
+import { Button } from '@cherrystudio/ui'
+import { Tooltip } from 'antd'
 import { memo } from 'react'
 
 interface ImageToolButtonProps {
   tooltip: string
   icon: React.ReactNode
-  onClick: () => void
+  onPress: () => void
 }
 
-const ImageToolButton = ({ tooltip, icon, onClick }: ImageToolButtonProps) => {
+const ImageToolButton = ({ tooltip, icon, onPress }: ImageToolButtonProps) => {
   return (
     <Tooltip title={tooltip} mouseEnterDelay={0.5} mouseLeaveDelay={0}>
-      <Button shape="circle" icon={icon} onClick={onClick} role="button" aria-label={tooltip} />
+      <Button radius="full" startContent={icon} onPress={onPress} isIconOnly aria-label={tooltip} />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/components/Preview/ImageToolbar.tsx b/src/renderer/src/components/Preview/ImageToolbar.tsx
index 11d9695c2..ffd4dff15 100644
--- a/src/renderer/src/components/Preview/ImageToolbar.tsx
+++ b/src/renderer/src/components/Preview/ImageToolbar.tsx
@@ -36,9 +36,9 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
         <ImageToolButton
           tooltip={t('preview.pan_up')}
           icon={<ChevronUp size={'1rem'} />}
-          onClick={() => pan(0, -panDistance)}
+          onPress={() => pan(0, -panDistance)}
         />
-        <ImageToolButton tooltip={t('preview.dialog')} icon={<Scan size={'1rem'} />} onClick={dialog} />
+        <ImageToolButton tooltip={t('preview.dialog')} icon={<Scan size={'1rem'} />} onPress={dialog} />
       </ActionButtonRow>
 
       {/* Left, Reset, Right */}
@@ -46,13 +46,13 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
         <ImageToolButton
           tooltip={t('preview.pan_left')}
           icon={<ChevronLeft size={'1rem'} />}
-          onClick={() => pan(-panDistance, 0)}
+          onPress={() => pan(-panDistance, 0)}
         />
-        <ImageToolButton tooltip={t('preview.reset')} icon={<ResetIcon size={'1rem'} />} onClick={handleReset} />
+        <ImageToolButton tooltip={t('preview.reset')} icon={<ResetIcon size={'1rem'} />} onPress={handleReset} />
         <ImageToolButton
           tooltip={t('preview.pan_right')}
           icon={<ChevronRight size={'1rem'} />}
-          onClick={() => pan(panDistance, 0)}
+          onPress={() => pan(panDistance, 0)}
         />
       </ActionButtonRow>
 
@@ -61,17 +61,17 @@ const ImageToolbar = ({ pan, zoom, dialog, className }: ImageToolbarProps) => {
         <ImageToolButton
           tooltip={t('preview.zoom_out')}
           icon={<ZoomOut size={'1rem'} />}
-          onClick={() => zoom(-zoomDelta)}
+          onPress={() => zoom(-zoomDelta)}
         />
         <ImageToolButton
           tooltip={t('preview.pan_down')}
           icon={<ChevronDown size={'1rem'} />}
-          onClick={() => pan(0, panDistance)}
+          onPress={() => pan(0, panDistance)}
         />
         <ImageToolButton
           tooltip={t('preview.zoom_in')}
           icon={<ZoomIn size={'1rem'} />}
-          onClick={() => zoom(zoomDelta)}
+          onPress={() => zoom(zoomDelta)}
         />
       </ActionButtonRow>
     </ToolbarWrapper>
diff --git a/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx b/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
index d5a9a266b..b772b288f 100644
--- a/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
+++ b/src/renderer/src/components/Preview/__tests__/ImageToolButton.test.tsx
@@ -21,7 +21,7 @@ describe('ImageToolButton', () => {
   const defaultProps = {
     tooltip: 'Test tooltip',
     icon: <span data-testid="test-icon">Icon</span>,
-    onClick: vi.fn()
+    onPress: vi.fn()
   }
 
   it('should match snapshot', () => {
diff --git a/src/renderer/src/components/Preview/__tests__/ImageToolbar.test.tsx b/src/renderer/src/components/Preview/__tests__/ImageToolbar.test.tsx
index a64076e3a..102bd10c6 100644
--- a/src/renderer/src/components/Preview/__tests__/ImageToolbar.test.tsx
+++ b/src/renderer/src/components/Preview/__tests__/ImageToolbar.test.tsx
@@ -12,8 +12,8 @@ vi.mock('react-i18next', () => ({
 
 // Mock ImageToolButton
 vi.mock('../ImageToolButton', () => ({
-  default: vi.fn(({ tooltip, onClick, icon }) => (
-    <button type="button" onClick={onClick} role="button" aria-label={tooltip}>
+  default: vi.fn(({ tooltip, onPress, icon }) => (
+    <button type="button" onClick={onPress} role="button" aria-label={tooltip}>
       {icon}
     </button>
   ))
diff --git a/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap b/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap
index 0f155f1ff..fe1074ed7 100644
--- a/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap
+++ b/src/renderer/src/components/Preview/__tests__/__snapshots__/ImageToolButton.test.tsx.snap
@@ -7,12 +7,19 @@ exports[`ImageToolButton > should match snapshot 1`] = `
   >
     <button
       aria-label="Test tooltip"
-      data-testid="custom-button"
-      icon="[object Object]"
-      role="button"
-      shape="circle"
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-small gap-2 rounded-full px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-10 w-10 h-10 data-[hover=true]:opacity-hover"
+      data-react-aria-pressable="true"
+      tabindex="0"
       type="button"
-    />
+    >
+      <span
+        aria-hidden="true"
+        data-testid="test-icon"
+        focusable="false"
+      >
+        Icon
+      </span>
+    </button>
   </div>
 </DocumentFragment>
 `;
diff --git a/src/renderer/src/components/RichEditor/components/ImageUploader.tsx b/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
index 631fc6bd1..4ff13843d 100644
--- a/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
+++ b/src/renderer/src/components/RichEditor/components/ImageUploader.tsx
@@ -1,6 +1,7 @@
 import { InboxOutlined, LinkOutlined, LoadingOutlined, UploadOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
-import { Button, Input, Modal, Spin, Tabs, Upload } from 'antd'
+import { Button } from '@cherrystudio/ui'
+import { Input, Modal, Spin, Tabs, Upload } from 'antd'
 
 const { Dragger } = Upload
 import type { RcFile } from 'antd/es/upload'
@@ -174,17 +175,10 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ onImageSelect, vis
               prefix={<LinkOutlined style={{ color: '#999' }} />}
               style={{ flex: 1 }}
             />
-            <Button
-              onClick={() => setUrlInput('')}
-              style={{
-                border: '1px solid #dadce0',
-                borderRadius: '4px',
-                color: '#3c4043',
-                background: '#ffffff'
-              }}>
+            <Button onPress={() => setUrlInput('')} className="border border-gray-300 bg-white text-gray-700">
               {t('common.clear')}
             </Button>
-            <Button type="primary" onClick={handleUrlSubmit} disabled={!urlInput.trim()}>
+            <Button color="primary" onPress={handleUrlSubmit} isDisabled={!urlInput.trim()}>
               {t('richEditor.imageUploader.embedImage')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/components/RichEditor/components/LinkEditor.tsx b/src/renderer/src/components/RichEditor/components/LinkEditor.tsx
index 31ef91a43..12cd8aad6 100644
--- a/src/renderer/src/components/RichEditor/components/LinkEditor.tsx
+++ b/src/renderer/src/components/RichEditor/components/LinkEditor.tsx
@@ -1,6 +1,7 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button, Input } from 'antd'
+import { Input } from 'antd'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -146,16 +147,16 @@ const LinkEditor: React.FC<LinkEditorProps> = ({
       <Flex className="items-center justify-between">
         <div>
           {showRemove && (
-            <Button size="small" danger type="text" onClick={onRemove} style={{ padding: '0 8px' }}>
+            <Button size="sm" color="danger" variant="light" onPress={onRemove} className="px-2">
               {t('richEditor.link.remove')}
             </Button>
           )}
         </div>
         <Flex className="gap-1.5">
-          <Button size="small" onClick={onCancel}>
+          <Button size="sm" onPress={onCancel}>
             {t('common.cancel')}
           </Button>
-          <Button type="primary" size="small" onClick={handleSave} disabled={!href.trim() || !text.trim()}>
+          <Button color="primary" size="sm" onPress={handleSave} isDisabled={!href.trim() || !text.trim()}>
             {t('common.save')}
           </Button>
         </Flex>
diff --git a/src/renderer/src/components/RichEditor/components/MathInputDialog.tsx b/src/renderer/src/components/RichEditor/components/MathInputDialog.tsx
index 9f6c402cf..241e1a523 100644
--- a/src/renderer/src/components/RichEditor/components/MathInputDialog.tsx
+++ b/src/renderer/src/components/RichEditor/components/MathInputDialog.tsx
@@ -1,6 +1,7 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button, Input } from 'antd'
+import { Input } from 'antd'
 import React, { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -148,10 +149,10 @@ const MathInputDialog: React.FC<MathInputDialogProps> = ({
         style={{ marginBottom: 12, fontFamily: 'monospace' }}
       />
       <Flex className="justify-end gap-2">
-        <Button size="small" onClick={onCancel}>
+        <Button size="sm" onPress={onCancel}>
           {t('common.cancel')}
         </Button>
-        <Button type="primary" size="small" onClick={handleSubmit}>
+        <Button color="primary" size="sm" onPress={handleSubmit}>
           {t('common.confirm')}
         </Button>
       </Flex>
diff --git a/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx b/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx
index fafd1e447..7b6853a7b 100644
--- a/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx
+++ b/src/renderer/src/components/RichEditor/extensions/code-block-shiki/CodeBlockNodeView.tsx
@@ -1,7 +1,8 @@
 import { CopyOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { DEFAULT_LANGUAGES, getHighlighter, getShiki } from '@renderer/utils/shiki'
 import { NodeViewContent, NodeViewWrapper, type ReactNodeViewProps, ReactNodeViewRenderer } from '@tiptap/react'
-import { Button, Select, Tooltip } from 'antd'
+import { Select, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 
@@ -67,11 +68,12 @@ const CodeBlockNodeView: FC<ReactNodeViewProps> = (props) => {
         />
         <Tooltip title="Copy">
           <Button
-            size="small"
-            type="text"
-            icon={<CopyOutlined />}
+            size="sm"
+            variant="light"
+            startContent={<CopyOutlined />}
+            isIconOnly
             className="code-block-copy-btn"
-            onClick={handleCopy}
+            onPress={handleCopy}
           />
         </Tooltip>
       </div>
diff --git a/src/renderer/src/components/S3BackupManager.tsx b/src/renderer/src/components/S3BackupManager.tsx
index 4327a6c21..b55616078 100644
--- a/src/renderer/src/components/S3BackupManager.tsx
+++ b/src/renderer/src/components/S3BackupManager.tsx
@@ -1,8 +1,9 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { restoreFromS3 } from '@renderer/services/BackupService'
 import type { S3Config } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
-import { Button, Modal, Table, Tooltip } from 'antd'
+import { Modal, Table, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -231,14 +232,14 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
       width: 160,
       render: (_: any, record: BackupFile) => (
         <>
-          <Button type="link" onClick={() => handleRestore(record.fileName)} disabled={restoring || deleting}>
+          <Button variant="light" onPress={() => handleRestore(record.fileName)} isDisabled={restoring || deleting}>
             {t('settings.data.s3.manager.restore')}
           </Button>
           <Button
-            type="link"
-            danger
-            onClick={() => handleDeleteSingle(record.fileName)}
-            disabled={deleting || restoring}>
+            variant="light"
+            color="danger"
+            onPress={() => handleDeleteSingle(record.fileName)}
+            isDisabled={deleting || restoring}>
             {t('settings.data.s3.manager.delete.label')}
           </Button>
         </>
@@ -262,19 +263,19 @@ export function S3BackupManager({ visible, onClose, s3Config, restoreMethod }: S
       centered
       transitionName="animation-move-down"
       footer={[
-        <Button key="refresh" icon={<ReloadOutlined />} onClick={fetchBackupFiles} disabled={loading}>
+        <Button key="refresh" startContent={<ReloadOutlined />} onPress={fetchBackupFiles} isDisabled={loading}>
           {t('settings.data.s3.manager.refresh')}
         </Button>,
         <Button
           key="delete"
-          danger
-          icon={<DeleteOutlined />}
-          onClick={handleDeleteSelected}
-          disabled={selectedRowKeys.length === 0 || deleting}
-          loading={deleting}>
+          color="danger"
+          startContent={<DeleteOutlined />}
+          onPress={handleDeleteSelected}
+          isDisabled={selectedRowKeys.length === 0 || deleting}
+          isLoading={deleting}>
           {t('settings.data.s3.manager.delete.selected', { count: selectedRowKeys.length })}
         </Button>,
-        <Button key="close" onClick={onClose}>
+        <Button key="close" onPress={onClose}>
           {t('settings.data.s3.manager.close')}
         </Button>
       ]}>
diff --git a/src/renderer/src/components/TranslateButton.tsx b/src/renderer/src/components/TranslateButton.tsx
index 996b07526..ba811a0ab 100644
--- a/src/renderer/src/components/TranslateButton.tsx
+++ b/src/renderer/src/components/TranslateButton.tsx
@@ -1,14 +1,14 @@
 import { LoadingOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import useTranslate from '@renderer/hooks/useTranslate'
 import { translateText } from '@renderer/services/TranslateService'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { Languages } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 interface Props {
   text?: string
@@ -70,47 +70,18 @@ const TranslateButton: FC<Props> = ({ text, onTranslated, disabled, style, isLoa
       title={t('chat.input.translate', { target_language: getLanguageByLangcode(targetLanguage).label() })}
       mouseLeaveDelay={0}
       arrow>
-      <ToolbarButton onClick={handleTranslate} disabled={disabled || isTranslating} style={style} type="text">
+      <Button
+        onPress={handleTranslate}
+        isDisabled={disabled || isTranslating}
+        style={style}
+        variant="light"
+        isIconOnly
+        size="sm"
+        radius="full">
         {isTranslating ? <LoadingOutlined spin /> : <Languages size={18} />}
-      </ToolbarButton>
+      </Button>
     </Tooltip>
   )
 }
 
-const ToolbarButton = styled(Button)`
-  min-width: 30px;
-  height: 30px;
-  font-size: 16px;
-  border-radius: 50%;
-  transition: all 0.3s ease;
-  color: var(--color-icon);
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0;
-  &.anticon,
-  &.iconfont {
-    transition: all 0.3s ease;
-    color: var(--color-icon);
-  }
-  &:hover {
-    background-color: var(--color-background-soft);
-    .anticon,
-    .iconfont {
-      color: var(--color-text-1);
-    }
-  }
-  &.active {
-    background-color: var(--color-primary) !important;
-    .anticon,
-    .iconfont {
-      color: var(--color-white-soft);
-    }
-    &:hover {
-      background-color: var(--color-primary);
-    }
-  }
-`
-
 export default TranslateButton
diff --git a/src/renderer/src/components/WebdavBackupManager.tsx b/src/renderer/src/components/WebdavBackupManager.tsx
index a77987141..b72da3ea8 100644
--- a/src/renderer/src/components/WebdavBackupManager.tsx
+++ b/src/renderer/src/components/WebdavBackupManager.tsx
@@ -1,7 +1,8 @@
 import { DeleteOutlined, ExclamationCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { restoreFromWebdav } from '@renderer/services/BackupService'
 import { formatFileSize } from '@renderer/utils'
-import { Button, Modal, Table, Tooltip } from 'antd'
+import { Modal, Table, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -238,14 +239,14 @@ export function WebdavBackupManager({
       width: 160,
       render: (_: any, record: BackupFile) => (
         <>
-          <Button type="link" onClick={() => handleRestore(record.fileName)} disabled={restoring || deleting}>
+          <Button variant="light" onPress={() => handleRestore(record.fileName)} isDisabled={restoring || deleting}>
             {t('settings.data.webdav.backup.manager.restore.text')}
           </Button>
           <Button
-            type="link"
-            danger
-            onClick={() => handleDeleteSingle(record.fileName)}
-            disabled={deleting || restoring}>
+            variant="light"
+            color="danger"
+            onPress={() => handleDeleteSingle(record.fileName)}
+            isDisabled={deleting || restoring}>
             {t('settings.data.webdav.backup.manager.delete.text')}
           </Button>
         </>
@@ -269,19 +270,19 @@ export function WebdavBackupManager({
       centered
       transitionName="animation-move-down"
       footer={[
-        <Button key="refresh" icon={<ReloadOutlined />} onClick={fetchBackupFiles} disabled={loading}>
+        <Button key="refresh" startContent={<ReloadOutlined />} onPress={fetchBackupFiles} isDisabled={loading}>
           {t('settings.data.webdav.backup.manager.refresh')}
         </Button>,
         <Button
           key="delete"
-          danger
-          icon={<DeleteOutlined />}
-          onClick={handleDeleteSelected}
-          disabled={selectedRowKeys.length === 0 || deleting}
-          loading={deleting}>
+          color="danger"
+          startContent={<DeleteOutlined />}
+          onPress={handleDeleteSelected}
+          isDisabled={selectedRowKeys.length === 0 || deleting}
+          isLoading={deleting}>
           {t('settings.data.webdav.backup.manager.delete.selected')} ({selectedRowKeys.length})
         </Button>,
-        <Button key="close" onClick={onClose}>
+        <Button key="close" onPress={onClose}>
           {t('common.close')}
         </Button>
       ]}>
diff --git a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
index f05613003..609d3df38 100644
--- a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
+++ b/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
@@ -18,13 +18,18 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   >
     <button
       aria-label="Get embedding dimension"
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-tiny gap-2 rounded-small px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-8 w-8 h-8 data-[hover=true]:opacity-hover"
+      data-react-aria-pressable="true"
       role="button"
+      tabindex="0"
       type="button"
     >
       <svg
+        aria-hidden="true"
         aria-label="refresh"
         class=""
         data-testid="refresh-icon"
+        focusable="false"
         role="img"
         size="16"
       >
@@ -53,19 +58,28 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
   >
     <button
       aria-label="Get embedding dimension"
+      class="z-0 group relative inline-flex items-center justify-center box-border appearance-none select-none whitespace-nowrap font-normal subpixel-antialiased overflow-hidden tap-highlight-transparent transform-gpu data-[pressed=true]:scale-[0.97] cursor-pointer outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-tiny gap-2 rounded-small opacity-disabled pointer-events-none px-0 !gap-0 transition-transform-colors-opacity motion-reduce:transition-none bg-default text-default-foreground min-w-8 w-8 h-8 data-[hover=true]:opacity-hover"
+      data-disabled="true"
+      data-react-aria-pressable="true"
       disabled=""
       role="button"
       type="button"
     >
       <svg
+        aria-hidden="true"
         aria-label="refresh"
         class="animation-rotate"
         data-testid="refresh-icon"
+        focusable="false"
         role="img"
         size="16"
       >
         RefreshIcon
       </svg>
+      <span
+        class="heroui-ripple"
+        style="position: absolute; background-color: currentColor; border-radius: 100%; transform-origin: center; pointer-events: none; overflow: hidden; inset: 0; z-index: 0; top: 0px; left: 0px; width: 0px; height: 0px; transform: scale(0); opacity: 0.35;"
+      />
     </button>
   </div>
 </div>
diff --git a/src/renderer/src/hooks/useUserTheme.ts b/src/renderer/src/hooks/useUserTheme.ts
index d2897eae5..99244db0d 100644
--- a/src/renderer/src/hooks/useUserTheme.ts
+++ b/src/renderer/src/hooks/useUserTheme.ts
@@ -2,6 +2,7 @@
 // import { setUserTheme, UserTheme } from '@renderer/store/settings'
 
 import { usePreference } from '@data/hooks/usePreference'
+import { getForegroundColor } from '@renderer/utils'
 import Color from 'color'
 
 export default function useUserTheme() {
@@ -15,6 +16,7 @@ export default function useUserTheme() {
     document.body.style.setProperty('--color-primary', colorPrimary.toString())
     // overwrite hero UI primary color.
     document.body.style.setProperty('--primary', colorPrimary.toString())
+    document.body.style.setProperty('--primary-foreground', getForegroundColor(colorPrimary.hex()))
     document.body.style.setProperty('--color-primary-soft', colorPrimary.alpha(0.6).toString())
     document.body.style.setProperty('--color-primary-mute', colorPrimary.alpha(0.3).toString())
 
diff --git a/src/renderer/src/pages/agents/AgentsPage.tsx b/src/renderer/src/pages/agents/AgentsPage.tsx
index ca73650b2..9ae98a19e 100644
--- a/src/renderer/src/pages/agents/AgentsPage.tsx
+++ b/src/renderer/src/pages/agents/AgentsPage.tsx
@@ -1,5 +1,6 @@
 import { ImportOutlined, PlusOutlined } from '@ant-design/icons'
 import { ColFlex, Flex, RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import ListItem from '@renderer/components/ListItem'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -9,7 +10,7 @@ import { useNavbarPosition } from '@renderer/hooks/useNavbar'
 import { createAssistantFromAgent } from '@renderer/services/AssistantService'
 import type { Agent } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Button, Empty, Input } from 'antd'
+import { Empty, Input } from 'antd'
 import { omit } from 'lodash'
 import { Search } from 'lucide-react'
 import type { FC } from 'react'
@@ -267,17 +268,17 @@ const AgentsPage: FC = () => {
               ) : (
                 isTopNavbar && (
                   <Button
-                    type="text"
-                    onClick={handleSearchIconClick}
-                    icon={<Search size={18} color="var(--color-icon)" />}>
+                    variant="light"
+                    onPress={handleSearchIconClick}
+                    startContent={<Search size={18} color="var(--color-icon)" />}>
                     {t('common.search')}
                   </Button>
                 )
               )}
-              <Button type="text" onClick={handleImportAgent} icon={<ImportOutlined />}>
+              <Button variant="light" onPress={handleImportAgent} startContent={<ImportOutlined />}>
                 {t('agents.import.title')}
               </Button>
-              <Button type="text" onClick={handleAddAgent} icon={<PlusOutlined />}>
+              <Button variant="light" onPress={handleAddAgent} startContent={<PlusOutlined />}>
                 {t('agents.add.title')}
               </Button>
             </Flex>
diff --git a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
index 973b88aaa..2526559d3 100644
--- a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -1,6 +1,7 @@
 import 'emoji-picker-element'
 
 import { CheckOutlined, LoadingOutlined, RollbackOutlined, ThunderboltOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { TopView } from '@renderer/components/TopView'
@@ -14,7 +15,7 @@ import type { Agent, KnowledgeBase } from '@renderer/types'
 import { getLeadingEmoji, uuid } from '@renderer/utils'
 import { AGENT_PROMPT } from '@shared/config/prompts'
 import type { FormInstance, SelectProps } from 'antd'
-import { Button, Form, Input, Modal, Popover, Select } from 'antd'
+import { Form, Input, Modal, Popover, Select } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -202,7 +203,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             }
             arrow
             trigger="click">
-            <Button icon={emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}>{t('common.select')}</Button>
+            <Button startContent={emoji && <span style={{ fontSize: 20 }}>{emoji}</span>}>{t('common.select')}</Button>
           </Popover>
         </Form.Item>
         <Form.Item name="name" label={t('agents.add.name.label')} rules={[{ required: true }]}>
@@ -218,15 +219,19 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
           </Form.Item>
           <TokenCount>Tokens: {tokenCount}</TokenCount>
           <Button
-            icon={loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
-            onClick={handleGenerateButtonClick}
+            startContent={loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
+            isIconOnly
+            size="sm"
+            onPress={handleGenerateButtonClick}
             style={{ position: 'absolute', top: 8, right: 8 }}
-            disabled={loading}
+            isDisabled={loading}
           />
           {showUndoButton && (
             <Button
-              icon={<RollbackOutlined />}
-              onClick={handleUndoButtonClick}
+              startContent={<RollbackOutlined />}
+              isIconOnly
+              size="sm"
+              onPress={handleUndoButtonClick}
               style={{ position: 'absolute', top: 8, right: 48 }}
             />
           )}
diff --git a/src/renderer/src/pages/agents/components/AgentCard.tsx b/src/renderer/src/pages/agents/components/AgentCard.tsx
index 020bd35c7..8d28077ef 100644
--- a/src/renderer/src/pages/agents/components/AgentCard.tsx
+++ b/src/renderer/src/pages/agents/components/AgentCard.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { useAgents } from '@renderer/hooks/useAgents'
@@ -5,7 +6,7 @@ import AssistantSettingsPopup from '@renderer/pages/settings/AssistantSettings'
 import { createAssistantFromAgent } from '@renderer/services/AssistantService'
 import type { Agent } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
-import { Button, Dropdown } from 'antd'
+import { Dropdown } from 'antd'
 import { t } from 'i18next'
 import { ArrowDownAZ, Ellipsis, PlusIcon, SquareArrowOutUpRight } from 'lucide-react'
 import { type FC, memo, useCallback, useEffect, useRef, useState } from 'react'
@@ -159,16 +160,9 @@ const AgentCard: FC<Props> = ({ agent, onClick, activegroup, getLocalizedGroupNa
                   }}
                   trigger={['click']}
                   placement="bottomRight">
-                  <MenuButton
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      e.preventDefault()
-                    }}
-                    color="default"
-                    variant="filled"
-                    shape="circle"
-                    icon={<Ellipsis size={14} color="var(--color-text-3)" />}
-                  />
+                  <MenuButton color="default" variant="light" radius="full" isIconOnly={true}>
+                    <Ellipsis size={14} color="var(--color-text-3)" />
+                  </MenuButton>
                 </Dropdown>
               </AgentCardHeaderInfoAction>
             ) : (
diff --git a/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx b/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
index c80d2a47b..95410085f 100644
--- a/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/ImportAgentPopup.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useAgents } from '@renderer/hooks/useAgents'
 import { useTimer } from '@renderer/hooks/useTimer'
@@ -6,7 +7,7 @@ import { getDefaultModel } from '@renderer/services/AssistantService'
 import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
 import type { Agent } from '@renderer/types'
 import { uuid } from '@renderer/utils'
-import { Button, Form, Input, Modal, Radio } from 'antd'
+import { Form, Input, Modal, Radio } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -100,8 +101,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       maskClosable={false}
       footer={
         <Flex className="justify-end gap-2">
-          <Button onClick={onCancel}>{t('common.cancel')}</Button>
-          <Button type="primary" onClick={() => form.submit()} loading={loading}>
+          <Button onPress={onCancel}>{t('common.cancel')}</Button>
+          <Button color="primary" onPress={() => form.submit()} isLoading={loading}>
             {t('agents.import.button')}
           </Button>
         </Flex>
@@ -124,7 +125,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
 
         {importType === 'file' && (
           <Form.Item>
-            <Button onClick={() => form.submit()}>{t('agents.import.select_file')}</Button>
+            <Button onPress={() => form.submit()}>{t('agents.import.select_file')}</Button>
           </Form.Item>
         )}
       </Form>
diff --git a/src/renderer/src/pages/code/CodeToolsPage.tsx b/src/renderer/src/pages/code/CodeToolsPage.tsx
index b902870ed..8243884b8 100644
--- a/src/renderer/src/pages/code/CodeToolsPage.tsx
+++ b/src/renderer/src/pages/code/CodeToolsPage.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import AiProvider from '@renderer/aiCore'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import ModelSelector from '@renderer/components/ModelSelector'
@@ -16,7 +17,7 @@ import { setIsBunInstalled } from '@renderer/store/mcp'
 import type { EndpointType, Model } from '@renderer/types'
 import type { TerminalConfig } from '@shared/config/constant'
 import { codeTools, terminalApps } from '@shared/config/constant'
-import { Alert, Avatar, Button, Checkbox, Input, Popover, Select, Space, Tooltip } from 'antd'
+import { Alert, Avatar, Checkbox, Input, Popover, Select, Space, Tooltip } from 'antd'
 import { ArrowUpRight, Download, FolderOpen, HelpCircle, Terminal, X } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -321,12 +322,12 @@ const CodeToolsPage: FC = () => {
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <span>{t('code.bun_required_message')}</span>
                     <Button
-                      type="primary"
-                      size="small"
-                      icon={<Download size={14} />}
-                      onClick={handleInstallBun}
-                      loading={isInstallingBun}
-                      disabled={isInstallingBun}>
+                      color="primary"
+                      size="sm"
+                      startContent={<Download size={14} />}
+                      onPress={handleInstallBun}
+                      isLoading={isInstallingBun}
+                      isDisabled={isInstallingBun}>
                       {isInstallingBun ? t('code.installing_bun') : t('code.install_bun')}
                     </Button>
                   </div>
@@ -457,7 +458,11 @@ const CodeToolsPage: FC = () => {
                     selectedTerminal !== terminalApps.powershell &&
                     selectedTerminal !== terminalApps.windowsTerminal && (
                       <Tooltip title={terminalCustomPaths[selectedTerminal] || t('code.set_custom_path')}>
-                        <Button icon={<FolderOpen size={16} />} onClick={() => handleSetCustomPath(selectedTerminal)} />
+                        <Button
+                          startContent={<FolderOpen size={16} />}
+                          isIconOnly
+                          onPress={() => handleSetCustomPath(selectedTerminal)}
+                        />
                       </Tooltip>
                     )}
                 </Space.Compact>
@@ -484,13 +489,13 @@ const CodeToolsPage: FC = () => {
           </SettingsPanel>
 
           <Button
-            type="primary"
-            icon={<Terminal size={16} />}
-            size="large"
-            onClick={handleLaunch}
-            loading={isLaunching}
-            disabled={!canLaunch || !isBunInstalled}
-            block>
+            color="primary"
+            startContent={<Terminal size={16} />}
+            size="lg"
+            onPress={handleLaunch}
+            isLoading={isLaunching}
+            isDisabled={!canLaunch || !isBunInstalled}
+            fullWidth={true}>
             {isLaunching ? t('code.launching') : t('code.launch.label')}
           </Button>
         </MainContent>
diff --git a/src/renderer/src/pages/files/FilesPage.tsx b/src/renderer/src/pages/files/FilesPage.tsx
index 4754a6b8b..3265b2047 100644
--- a/src/renderer/src/pages/files/FilesPage.tsx
+++ b/src/renderer/src/pages/files/FilesPage.tsx
@@ -1,5 +1,6 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
@@ -12,7 +13,7 @@ import store from '@renderer/store'
 import type { FileMetadata } from '@renderer/types'
 import { FileTypes } from '@renderer/types'
 import { formatFileSize } from '@renderer/utils'
-import { Button, Checkbox, Dropdown, Empty, Popconfirm } from 'antd'
+import { Checkbox, Dropdown, Empty, Popconfirm } from 'antd'
 import dayjs from 'dayjs'
 import { useLiveQuery } from 'dexie-react-hooks'
 import {
@@ -114,7 +115,7 @@ const FilesPage: FC = () => {
       created_at_unix: dayjs(file.created_at).unix(),
       actions: (
         <Flex className="items-center gap-0 opacity-70">
-          <Button type="text" icon={<EditIcon size={14} />} onClick={() => handleRename(file.id)} />
+          <Button variant="light" startContent={<EditIcon size={14} />} onPress={() => handleRename(file.id)} />
           <Popconfirm
             title={t('files.delete.title')}
             description={t('files.delete.content')}
@@ -123,7 +124,7 @@ const FilesPage: FC = () => {
             onConfirm={() => handleDelete(file.id, t)}
             placement="left"
             icon={<ExclamationCircleOutlined style={{ color: 'red' }} />}>
-            <Button type="text" danger icon={<DeleteIcon size={14} className="lucide-custom" />} />
+            <Button variant="light" color="danger" startContent={<DeleteIcon size={14} className="lucide-custom" />} />
           </Popconfirm>
           {fileType !== 'image' && (
             <Checkbox
@@ -168,7 +169,7 @@ const FilesPage: FC = () => {
                 <SortButton
                   key={field}
                   active={sortField === field}
-                  onClick={() => {
+                  onPress={() => {
                     if (sortField === field) {
                       setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')
                     } else {
diff --git a/src/renderer/src/pages/history/components/SearchMessage.tsx b/src/renderer/src/pages/history/components/SearchMessage.tsx
index a119b3fc1..7f60c0c08 100644
--- a/src/renderer/src/pages/history/components/SearchMessage.tsx
+++ b/src/renderer/src/pages/history/components/SearchMessage.tsx
@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
 import { getTopicById } from '@renderer/hooks/useTopic'
 import { default as MessageItem } from '@renderer/pages/home/Messages/Message'
@@ -7,7 +8,6 @@ import NavigationService from '@renderer/services/NavigationService'
 import type { Topic } from '@renderer/types'
 import type { Message } from '@renderer/types/newMessage'
 import { runAsyncFunction } from '@renderer/utils'
-import { Button } from 'antd'
 import { Forward } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -46,14 +46,14 @@ const SearchMessage: FC<Props> = ({ message, ...props }) => {
         <ContainerWrapper>
           <MessageItem message={message} topic={topic} hideMenuBar={true} />
           <Button
-            type="text"
-            size="middle"
-            style={{ color: 'var(--color-text-3)', position: 'absolute', right: 16, top: 16 }}
-            onClick={() => locateToMessage(navigate, message)}
-            icon={<Forward size={16} />}
+            variant="light"
+            size="md"
+            className="absolute top-4 right-4 text-[var(--color-text-3)]"
+            onPress={() => locateToMessage(navigate, message)}
+            startContent={<Forward size={16} />}
           />
           <RowFlex className="mt-[10px] justify-center">
-            <Button onClick={() => locateToMessage(navigate, message)} icon={<Forward size={16} />}>
+            <Button onPress={() => locateToMessage(navigate, message)} startContent={<Forward size={16} />}>
               {t('history.locate.message')}
             </Button>
           </RowFlex>
diff --git a/src/renderer/src/pages/history/components/TopicMessages.tsx b/src/renderer/src/pages/history/components/TopicMessages.tsx
index 69cb365f9..139015998 100644
--- a/src/renderer/src/pages/history/components/TopicMessages.tsx
+++ b/src/renderer/src/pages/history/components/TopicMessages.tsx
@@ -1,5 +1,6 @@
 import { MessageOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import SearchPopup from '@renderer/components/Popups/SearchPopup'
 import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
@@ -13,7 +14,7 @@ import { locateToMessage } from '@renderer/services/MessagesService'
 import NavigationService from '@renderer/services/NavigationService'
 import type { Topic } from '@renderer/types'
 import { classNames, runAsyncFunction } from '@renderer/utils'
-import { Button, Divider, Empty } from 'antd'
+import { Divider, Empty } from 'antd'
 import { t } from 'i18next'
 import { Forward } from 'lucide-react'
 import type { FC } from 'react'
@@ -64,11 +65,11 @@ const TopicMessages: FC<Props> = ({ topic: _topic, ...props }) => {
             <MessageWrapper key={message.id} className={classNames([messageStyle, message.role])}>
               <MessageItem message={message} topic={topic} hideMenuBar={true} />
               <Button
-                type="text"
-                size="middle"
-                style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 5 }}
-                onClick={() => locateToMessage(navigate, message)}
-                icon={<Forward size={16} />}
+                variant="light"
+                size="md"
+                className="absolute top-[5px] right-0 text-[var(--color-text-3)]"
+                onPress={() => locateToMessage(navigate, message)}
+                startContent={<Forward size={16} />}
               />
               <Divider style={{ margin: '8px auto 15px' }} variant="dashed" />
             </MessageWrapper>
@@ -76,7 +77,7 @@ const TopicMessages: FC<Props> = ({ topic: _topic, ...props }) => {
           {isEmpty && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
           {!isEmpty && (
             <RowFlex className="justify-center">
-              <Button onClick={() => onContinueChat(topic)} icon={<MessageOutlined />}>
+              <Button onPress={() => onContinueChat(topic)} startContent={<MessageOutlined />}>
                 {t('history.continue_chat')}
               </Button>
             </RowFlex>
diff --git a/src/renderer/src/pages/history/components/TopicsHistory.tsx b/src/renderer/src/pages/history/components/TopicsHistory.tsx
index d13cd7094..cbf6092a6 100644
--- a/src/renderer/src/pages/history/components/TopicsHistory.tsx
+++ b/src/renderer/src/pages/history/components/TopicsHistory.tsx
@@ -1,9 +1,10 @@
 import { SearchOutlined } from '@ant-design/icons'
 import { ColFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import useScrollPosition from '@renderer/hooks/useScrollPosition'
 import { selectAllTopics } from '@renderer/store/assistants'
 import type { Topic } from '@renderer/types'
-import { Button, Divider, Empty, Segmented } from 'antd'
+import { Divider, Empty, Segmented } from 'antd'
 import dayjs from 'dayjs'
 import { groupBy, isEmpty, orderBy } from 'lodash'
 import { useState } from 'react'
@@ -40,7 +41,7 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, onSearch, ...props
       <ListContainer {...props}>
         <ColFlex className="items-center">
           <Empty description={t('history.search.topics.empty')} />
-          <Button style={{ width: 200, marginTop: 20 }} type="primary" onClick={onSearch} icon={<SearchOutlined />}>
+          <Button className="mt-5 w-[200px]" color="primary" onPress={onSearch} startContent={<SearchOutlined />}>
             {t('history.search.messages')}
           </Button>
         </ColFlex>
@@ -75,7 +76,7 @@ const TopicsHistory: React.FC<Props> = ({ keywords, onClick, onSearch, ...props
         ))}
         {keywords && (
           <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
-            <Button style={{ width: 200, marginTop: 20 }} type="primary" onClick={onSearch} icon={<SearchOutlined />}>
+            <Button className="mt-5 w-[200px]" color="primary" onPress={onSearch} startContent={<SearchOutlined />}>
               {t('history.search.messages')}
             </Button>
           </div>
diff --git a/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx b/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
index a2ccd40e4..7f81f8f9f 100644
--- a/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/AttachmentButton.tsx
@@ -148,9 +148,12 @@ const AttachmentButton: FC<Props> = ({ ref, couldAddImageFile, extensions, files
       title={couldAddImageFile ? t('chat.input.upload.image_or_document') : t('chat.input.upload.document')}
       mouseLeaveDelay={0}
       arrow>
-      <ActionIconButton onClick={openFileSelectDialog} active={files.length > 0} disabled={disabled}>
-        <Paperclip size={18} />
-      </ActionIconButton>
+      <ActionIconButton
+        onPress={openFileSelectDialog}
+        active={files.length > 0}
+        isDisabled={disabled}
+        icon={<Paperclip size={18} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx b/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
index 683c1fef6..f94114805 100644
--- a/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/GenerateImageButton.tsx
@@ -24,11 +24,11 @@ const GenerateImageButton: FC<Props> = ({ model, assistant, onEnableGenerateImag
       mouseLeaveDelay={0}
       arrow>
       <ActionIconButton
-        onClick={onEnableGenerateImage}
+        onPress={onEnableGenerateImage}
         active={assistant.enableGenerateImage}
-        disabled={!isGenerateImageModel(model)}>
-        <Image size={18} />
-      </ActionIconButton>
+        isDisabled={!isGenerateImageModel(model)}
+        icon={<Image size={18} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
index 6d3fc4732..977dde9a1 100644
--- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
+++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx
@@ -912,9 +912,11 @@ const Inputbar: FC<Props> = ({ assistant: _assistant, setActiveTopic, topic }) =
               <SendMessageButton sendMessage={sendMessage} disabled={inputEmpty} />
               {loading && (
                 <Tooltip placement="top" title={t('chat.input.pause')} mouseLeaveDelay={0} arrow>
-                  <ActionIconButton onClick={onPause} style={{ marginRight: -2 }}>
-                    <CirclePause size={20} color="var(--color-error)" />
-                  </ActionIconButton>
+                  <ActionIconButton
+                    onClick={onPause}
+                    className="mr-[-2px]"
+                    icon={<CirclePause size={20} color="var(--color-error)" />}
+                  />
                 </Tooltip>
               )}
             </ToolbarMenu>
diff --git a/src/renderer/src/pages/home/Inputbar/InputbarTools.tsx b/src/renderer/src/pages/home/Inputbar/InputbarTools.tsx
index 9e4f56b1a..7dec21977 100644
--- a/src/renderer/src/pages/home/Inputbar/InputbarTools.tsx
+++ b/src/renderer/src/pages/home/Inputbar/InputbarTools.tsx
@@ -359,9 +359,7 @@ const InputbarTools = ({
             title={t('chat.input.new_topic', { Command: newTopicShortcut })}
             mouseLeaveDelay={0}
             arrow>
-            <ActionIconButton onClick={addNewTopic}>
-              <MessageSquareDiff size={19} />
-            </ActionIconButton>
+            <ActionIconButton onPress={addNewTopic} icon={<MessageSquareDiff size={19} />} />
           </Tooltip>
         )
       },
@@ -466,9 +464,7 @@ const InputbarTools = ({
             title={t('chat.input.clear.label', { Command: clearTopicShortcut })}
             mouseLeaveDelay={0}
             arrow>
-            <ActionIconButton onClick={clearTopic}>
-              <PaintbrushVertical size={18} />
-            </ActionIconButton>
+            <ActionIconButton onPress={clearTopic} icon={<PaintbrushVertical size={18} />} />
           </Tooltip>
         )
       },
@@ -481,9 +477,10 @@ const InputbarTools = ({
             title={isExpended ? t('chat.input.collapse') : t('chat.input.expand')}
             mouseLeaveDelay={0}
             arrow>
-            <ActionIconButton onClick={onToggleExpended}>
-              {isExpended ? <Minimize size={18} /> : <Maximize size={18} />}
-            </ActionIconButton>
+            <ActionIconButton
+              onPress={onToggleExpended}
+              icon={isExpended ? <Minimize size={18} /> : <Maximize size={18} />}
+            />
           </Tooltip>
         )
       },
@@ -662,14 +659,17 @@ const InputbarTools = ({
             placement="top"
             title={isCollapse ? t('chat.input.tools.expand') : t('chat.input.tools.collapse')}
             arrow>
-            <ActionIconButton onClick={() => dispatch(setIsCollapsed(!isCollapse))}>
-              <CircleChevronRight
-                size={18}
-                style={{
-                  transform: isCollapse ? 'scaleX(1)' : 'scaleX(-1)'
-                }}
-              />
-            </ActionIconButton>
+            <ActionIconButton
+              onPress={() => dispatch(setIsCollapsed(!isCollapse))}
+              icon={
+                <CircleChevronRight
+                  size={18}
+                  style={{
+                    transform: isCollapse ? 'scaleX(1)' : 'scaleX(-1)'
+                  }}
+                />
+              }
+            />
           </Tooltip>
         )}
       </ToolsContainer>
diff --git a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
index daa2df9c7..69dd57e44 100644
--- a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
@@ -110,11 +110,11 @@ const KnowledgeBaseButton: FC<Props> = ({ ref, selectedBases, onSelect, disabled
   return (
     <Tooltip placement="top" title={t('chat.input.knowledge_base')} mouseLeaveDelay={0} arrow>
       <ActionIconButton
-        onClick={handleOpenQuickPanel}
+        onPress={handleOpenQuickPanel}
         active={selectedBases && selectedBases.length > 0}
-        disabled={disabled}>
-        <FileSearch size={18} />
-      </ActionIconButton>
+        isDisabled={disabled}
+        icon={<FileSearch size={18} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx
index 4d28b4824..6264094bf 100644
--- a/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/MCPToolsButton.tsx
@@ -488,9 +488,11 @@ const MCPToolsButton: FC<Props> = ({ ref, setInputValue, resizeTextArea, assista
 
   return (
     <Tooltip placement="top" title={t('settings.mcp.title')} mouseLeaveDelay={0} arrow>
-      <ActionIconButton onClick={handleOpenQuickPanel} active={assistant.mcpServers && assistant.mcpServers.length > 0}>
-        <Hammer size={18} />
-      </ActionIconButton>
+      <ActionIconButton
+        onPress={handleOpenQuickPanel}
+        active={assistant.mcpServers && assistant.mcpServers.length > 0}
+        icon={<Hammer size={18} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx
index 646ac8df8..a383d72c8 100644
--- a/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/MentionModelsButton.tsx
@@ -304,9 +304,11 @@ const MentionModelsButton: FC<Props> = ({
 
   return (
     <Tooltip placement="top" title={t('agents.edit.model.select.title')} mouseLeaveDelay={0} arrow>
-      <ActionIconButton onClick={handleOpenQuickPanel} active={mentionedModels.length > 0}>
-        <AtSign size={18} />
-      </ActionIconButton>
+      <ActionIconButton
+        onPress={handleOpenQuickPanel}
+        active={mentionedModels.length > 0}
+        icon={<AtSign size={18} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
index f4dd1886a..990de921c 100644
--- a/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/NewContextButton.tsx
@@ -20,9 +20,7 @@ const NewContextButton: FC<Props> = ({ onNewContext }) => {
       title={t('chat.input.new.context', { Command: newContextShortcut })}
       mouseLeaveDelay={0}
       arrow>
-      <ActionIconButton onClick={onNewContext}>
-        <Eraser size={18} />
-      </ActionIconButton>
+      <ActionIconButton onPress={onNewContext} icon={<Eraser size={18} />} />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
index 17d54ce24..78cd1e3f1 100644
--- a/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/QuickPhrasesButton.tsx
@@ -157,9 +157,7 @@ const QuickPhrasesButton = ({ ref, setInputValue, resizeTextArea, assistantId }:
   return (
     <>
       <Tooltip placement="top" title={t('settings.quickPhrase.title')} mouseLeaveDelay={0} arrow>
-        <ActionIconButton onClick={handleOpenQuickPanel}>
-          <Zap size={18} />
-        </ActionIconButton>
+        <ActionIconButton onPress={handleOpenQuickPanel} icon={<Zap size={18} />} />
       </Tooltip>
 
       <Modal
diff --git a/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx b/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
index e5d31a116..44acf6a89 100644
--- a/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/ThinkingButton.tsx
@@ -140,9 +140,11 @@ const ThinkingButton: FC<Props> = ({ ref, model, assistantId }): ReactElement =>
       }
       mouseLeaveDelay={0}
       arrow>
-      <ActionIconButton onClick={handleOpenQuickPanel} active={currentReasoningEffort !== 'off'}>
-        {ThinkingIcon(currentReasoningEffort)}
-      </ActionIconButton>
+      <ActionIconButton
+        onPress={handleOpenQuickPanel}
+        active={currentReasoningEffort !== 'off'}
+        icon={ThinkingIcon(currentReasoningEffort)}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/UrlContextbutton.tsx b/src/renderer/src/pages/home/Inputbar/UrlContextbutton.tsx
index 8cdc568fc..2b6e54601 100644
--- a/src/renderer/src/pages/home/Inputbar/UrlContextbutton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/UrlContextbutton.tsx
@@ -48,9 +48,7 @@ const UrlContextButton: FC<Props> = ({ assistantId }) => {
 
   return (
     <Tooltip placement="top" title={t('chat.input.url_context')} arrow>
-      <ActionIconButton onClick={handleToggle} active={assistant.enableUrlContext}>
-        <Link size={18} />
-      </ActionIconButton>
+      <ActionIconButton onPress={handleToggle} active={assistant.enableUrlContext} icon={<Link size={18} />} />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx b/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
index b4107d7de..e465dee7b 100644
--- a/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/WebSearchButton.tsx
@@ -212,9 +212,11 @@ const WebSearchButton: FC<Props> = ({ ref, assistantId }) => {
       title={enableWebSearch ? t('common.close') : t('chat.input.web_search.label')}
       mouseLeaveDelay={0}
       arrow>
-      <ActionIconButton onClick={onClick} active={!!enableWebSearch}>
-        <WebSearchIcon pid={assistant.webSearchProviderId} />
-      </ActionIconButton>
+      <ActionIconButton
+        onPress={onClick}
+        active={!!enableWebSearch}
+        icon={<WebSearchIcon pid={assistant.webSearchProviderId} />}
+      />
     </Tooltip>
   )
 }
diff --git a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
index c14296c39..9801c392d 100644
--- a/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
+++ b/src/renderer/src/pages/home/Messages/ChatNavigation.tsx
@@ -6,10 +6,11 @@ import {
   VerticalAlignBottomOutlined,
   VerticalAlignTopOutlined
 } from '@ant-design/icons'
+// import { selectCurrentTopicId } from '@renderer/store/newMessage'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import type { RootState } from '@renderer/store'
-// import { selectCurrentTopicId } from '@renderer/store/newMessage'
-import { Button, Drawer, Tooltip } from 'antd'
+import { Drawer, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -338,54 +339,54 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
         <ButtonGroup>
           <Tooltip title={t('chat.navigation.close')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<CloseOutlined />}
-              onClick={handleCloseChatNavigation}
+              variant="light"
+              startContent={<CloseOutlined />}
+              onPress={handleCloseChatNavigation}
               aria-label={t('chat.navigation.close')}
             />
           </Tooltip>
           <Divider />
           <Tooltip title={t('chat.navigation.top')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<VerticalAlignTopOutlined />}
-              onClick={handleScrollToTop}
+              variant="light"
+              startContent={<VerticalAlignTopOutlined />}
+              onPress={handleScrollToTop}
               aria-label={t('chat.navigation.top')}
             />
           </Tooltip>
           <Divider />
           <Tooltip title={t('chat.navigation.prev')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<ArrowUpOutlined />}
-              onClick={handlePrevMessage}
+              variant="light"
+              startContent={<ArrowUpOutlined />}
+              onPress={handlePrevMessage}
               aria-label={t('chat.navigation.prev')}
             />
           </Tooltip>
           <Divider />
           <Tooltip title={t('chat.navigation.next')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<ArrowDownOutlined />}
-              onClick={handleNextMessage}
+              variant="light"
+              startContent={<ArrowDownOutlined />}
+              onPress={handleNextMessage}
               aria-label={t('chat.navigation.next')}
             />
           </Tooltip>
           <Divider />
           <Tooltip title={t('chat.navigation.bottom')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<VerticalAlignBottomOutlined />}
-              onClick={handleScrollToBottom}
+              variant="light"
+              startContent={<VerticalAlignBottomOutlined />}
+              onPress={handleScrollToBottom}
               aria-label={t('chat.navigation.bottom')}
             />
           </Tooltip>
           <Divider />
           <Tooltip title={t('chat.navigation.history')} placement="left" mouseEnterDelay={0.5}>
             <NavigationButton
-              type="text"
-              icon={<HistoryOutlined />}
-              onClick={handleChatHistoryClick}
+              variant="light"
+              startContent={<HistoryOutlined />}
+              onPress={handleChatHistoryClick}
               aria-label={t('chat.navigation.history')}
             />
           </Tooltip>
diff --git a/src/renderer/src/pages/home/Messages/CitationsList.tsx b/src/renderer/src/pages/home/Messages/CitationsList.tsx
index 0e9ca2265..1a3777cf3 100644
--- a/src/renderer/src/pages/home/Messages/CitationsList.tsx
+++ b/src/renderer/src/pages/home/Messages/CitationsList.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import ContextMenu from '@renderer/components/ContextMenu'
 import Favicon from '@renderer/components/Icons/FallbackFavicon'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -6,7 +7,7 @@ import type { Citation } from '@renderer/types'
 import { fetchWebContent } from '@renderer/utils/fetch'
 import { cleanMarkdownContent } from '@renderer/utils/formats'
 import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
-import { Button, Popover, Skeleton } from 'antd'
+import { Popover, Skeleton } from 'antd'
 import { Check, Copy, FileSearch } from 'lucide-react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -91,7 +92,7 @@ const CitationsList: React.FC<CitationsListProps> = ({ citations }) => {
             padding: '0 0 8px 0'
           }
         }}>
-        <OpenButton type="text">
+        <OpenButton variant="light">
           <PreviewIcons>
             {previewItems.map((c, i) => (
               <PreviewIcon key={i} style={{ zIndex: previewItems.length - i }}>
diff --git a/src/renderer/src/pages/home/Messages/MessageEditor.tsx b/src/renderer/src/pages/home/Messages/MessageEditor.tsx
index fcd212520..cd28271ba 100644
--- a/src/renderer/src/pages/home/Messages/MessageEditor.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageEditor.tsx
@@ -360,20 +360,14 @@ const MessageBlockEditor: FC<Props> = ({ message, topicId, onSave, onResend, onC
         <ActionBarMiddle />
         <ActionBarRight>
           <Tooltip title={t('common.cancel')}>
-            <ActionIconButton onClick={onCancel}>
-              <X size={16} />
-            </ActionIconButton>
+            <ActionIconButton onPress={onCancel} icon={<X size={16} />} />
           </Tooltip>
           <Tooltip title={t('common.save')}>
-            <ActionIconButton onClick={handleSave}>
-              <Save size={16} />
-            </ActionIconButton>
+            <ActionIconButton onPress={handleSave} icon={<Save size={16} />} />
           </Tooltip>
           {message.role === 'user' && (
             <Tooltip title={t('chat.resend')}>
-              <ActionIconButton onClick={handleResend}>
-                <Send size={16} />
-              </ActionIconButton>
+              <ActionIconButton onPress={handleResend} icon={<Send size={16} />} />
             </Tooltip>
           )}
         </ActionBarRight>
diff --git a/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx b/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx
index e93418715..212c8a327 100644
--- a/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx
+++ b/src/renderer/src/pages/home/Messages/MessageGroupMenuBar.tsx
@@ -7,6 +7,7 @@ import {
   ReloadOutlined
 } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useMessageOperations } from '@renderer/hooks/useMessageOperations'
 import type { Topic } from '@renderer/types'
@@ -14,7 +15,7 @@ import type { Message } from '@renderer/types/newMessage'
 import { AssistantMessageStatus } from '@renderer/types/newMessage'
 import { getMainTextContent } from '@renderer/utils/messageUtils/find'
 import type { MultiModelMessageStyle } from '@shared/data/preference/preferenceTypes'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -137,19 +138,19 @@ const MessageGroupMenuBar: FC<Props> = ({
       {hasFailedMessages && (
         <Tooltip title={t('message.group.retry_failed')} mouseEnterDelay={0.6}>
           <Button
-            type="text"
-            size="small"
-            icon={<ReloadOutlined />}
-            onClick={handleRetryAll}
-            style={{ marginRight: 4 }}
+            variant="light"
+            size="sm"
+            startContent={<ReloadOutlined />}
+            onPress={handleRetryAll}
+            className="mr-1"
           />
         </Tooltip>
       )}
       <Button
-        type="text"
-        size="small"
-        icon={<DeleteOutlined style={{ color: 'var(--color-error)' }} />}
-        onClick={handleDeleteGroup}
+        variant="light"
+        size="sm"
+        startContent={<DeleteOutlined style={{ color: 'var(--color-error)' }} />}
+        onPress={handleDeleteGroup}
       />
     </GroupMenuBar>
   )
diff --git a/src/renderer/src/pages/home/Messages/NewTopicButton.tsx b/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
index 7b3b29964..e15c1b967 100644
--- a/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
+++ b/src/renderer/src/pages/home/Messages/NewTopicButton.tsx
@@ -1,12 +1,11 @@
 import { FormOutlined } from '@ant-design/icons'
+import { Button, cn } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { EventEmitter } from '@renderer/services/EventService'
 import { EVENT_NAMES } from '@renderer/services/EventService'
 import { ThemeMode } from '@shared/data/preference/preferenceTypes'
-import { Button as AntdButton } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 
 const NewTopicButton: FC = () => {
   const { t } = useTranslation()
@@ -17,39 +16,29 @@ const NewTopicButton: FC = () => {
   }
 
   return (
-    <Container>
-      <Button size="small" color="primary" icon={<FormOutlined />} onClick={addNewTopic} $theme={theme}>
+    <div className="-mt-2.5 mb-2.5 flex min-h-auto items-center justify-center p-0">
+      <Button
+        size="sm"
+        variant="light"
+        color="primary"
+        radius="full"
+        startContent={<FormOutlined />}
+        onPress={addNewTopic}
+        className={cn(
+          'h-[34px]! px-3 text-xs opacity-80 transition-all duration-300',
+          'hover:border-[var(--color-border-mute)] hover:text-[var(--color-text-1)]! hover:opacity-90',
+          theme === ThemeMode.dark
+            ? 'bg-[var(--color-background-soft)] hover:bg-[var(--color-background-mute)]!'
+            : undefined
+        )}
+        style={{
+          backgroundColor: theme === ThemeMode.dark ? '' : undefined,
+          color: 'var(--color-text-2)'
+        }}>
         {t('chat.topics.new')}
       </Button>
-    </Container>
+    </div>
   )
 }
 
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 10px;
-  margin-top: -10px;
-  padding: 0;
-  min-height: auto;
-`
-
-const Button = styled(AntdButton)<{ $theme: ThemeMode }>`
-  border-radius: 20px;
-  padding: 0 12px;
-  height: 34px !important;
-  font-size: 12px;
-  opacity: 0.8;
-  transition: all 0.3s ease;
-  background-color: ${(props) => (props.$theme === ThemeMode.dark ? 'var(--color-background-soft)' : '')};
-  color: var(--color-text-2);
-  &:hover {
-    opacity: 0.9;
-    background-color: ${(props) => (props.$theme === ThemeMode.dark ? 'var(--color-background-mute)' : '')} !important;
-    color: var(--color-text-1) !important;
-    border-color: var(--color-border-mute) !important;
-  }
-`
-
 export default NewTopicButton
diff --git a/src/renderer/src/pages/home/Messages/Tools/MessageMcpTool.tsx b/src/renderer/src/pages/home/Messages/Tools/MessageMcpTool.tsx
index 23ef52d5b..4e9fa5f69 100644
--- a/src/renderer/src/pages/home/Messages/Tools/MessageMcpTool.tsx
+++ b/src/renderer/src/pages/home/Messages/Tools/MessageMcpTool.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { CopyIcon, LoadingIcon } from '@renderer/components/Icons'
@@ -11,7 +12,7 @@ import { isToolAutoApproved } from '@renderer/utils/mcp-tools'
 import { cancelToolAction, confirmToolAction } from '@renderer/utils/userConfirmation'
 import type { MCPProgressEvent } from '@shared/config/types'
 import { IpcChannel } from '@shared/IpcChannel'
-import { Button, Collapse, ConfigProvider, Dropdown, Modal, Progress, Tabs, Tooltip } from 'antd'
+import { Collapse, ConfigProvider, Dropdown, Modal, Progress, Tabs, Tooltip } from 'antd'
 import {
   Check,
   ChevronDown,
@@ -400,26 +401,25 @@ const MessageMcpTool: FC<Props> = ({ block }) => {
                   {isWaitingConfirmation && (
                     <Button
                       color="danger"
-                      variant="filled"
-                      size="small"
-                      onClick={() => {
+                      variant="solid"
+                      size="sm"
+                      onPress={() => {
                         handleCancelTool()
-                      }}>
-                      <CircleX size={15} className="lucide-custom" />
+                      }}
+                      startContent={<CircleX size={15} className="lucide-custom" />}>
                       {t('common.cancel')}
                     </Button>
                   )}
                   {isExecuting && toolResponse?.id ? (
                     <Button
-                      size="small"
+                      size="sm"
                       color="danger"
                       variant="solid"
                       className="abort-button"
-                      onClick={(e) => {
-                        e.stopPropagation()
+                      onPress={() => {
                         handleAbortTool()
-                      }}>
-                      <PauseCircle size={14} className="lucide-custom" />
+                      }}
+                      startContent={<PauseCircle size={14} className="lucide-custom" />}>
                       {t('chat.input.pause')}
                     </Button>
                   ) : (
diff --git a/src/renderer/src/pages/home/Tabs/SettingsTab.tsx b/src/renderer/src/pages/home/Tabs/SettingsTab.tsx
index 5a54a852b..c8d086279 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, Selector, Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useMultiplePreferences, usePreference } from '@data/hooks/usePreference'
 import EditableNumber from '@renderer/components/EditableNumber'
 import Scrollbar from '@renderer/components/Scrollbar'
@@ -20,7 +21,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 } from 'antd'
+import { Col, InputNumber, Row, Slider } from 'antd'
 import { Settings2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -173,11 +174,12 @@ const SettingsTab: FC<Props> = (props) => {
         extra={
           <RowFlex className="items-center gap-0.5">
             <Button
-              type="text"
-              size="small"
-              icon={<Settings2 size={16} />}
-              onClick={() => AssistantSettingsPopup.show({ assistant, tab: 'model' })}
-            />
+              variant="light"
+              size="sm"
+              isIconOnly
+              onPress={() => AssistantSettingsPopup.show({ assistant, tab: 'model' })}>
+              <Settings2 size={16} />
+            </Button>
           </RowFlex>
         }>
         <SettingGroup style={{ marginTop: 5 }}>
diff --git a/src/renderer/src/pages/home/Tabs/components/AssistantTagsPopup.tsx b/src/renderer/src/pages/home/Tabs/components/AssistantTagsPopup.tsx
index 9aa0723a4..e5c95779e 100644
--- a/src/renderer/src/pages/home/Tabs/components/AssistantTagsPopup.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/AssistantTagsPopup.tsx
@@ -1,10 +1,11 @@
 import { Box } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'
 import { DeleteIcon } from '@renderer/components/Icons'
 import { TopView } from '@renderer/components/TopView'
 import { useAssistants } from '@renderer/hooks/useAssistant'
 import { useTags } from '@renderer/hooks/useTags'
-import { Button, Empty, Modal } from 'antd'
+import { Empty, Modal } from 'antd'
 import { isEmpty } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -93,14 +94,14 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
                         <TagItem ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                           <Box className="mr-2">{tag}</Box>
                           <Button
-                            type="text"
-                            icon={<DeleteIcon size={16} className="lucide-custom" />}
-                            danger
-                            onClick={(e) => {
-                              e.stopPropagation()
+                            variant="light"
+                            color="danger"
+                            isIconOnly
+                            onPress={() => {
                               onDelete(tag)
-                            }}
-                          />
+                            }}>
+                            <DeleteIcon size={16} className="lucide-custom" />
+                          </Button>
                         </TagItem>
                       )}
                     </Draggable>
diff --git a/src/renderer/src/pages/home/components/SelectModelButton.tsx b/src/renderer/src/pages/home/components/SelectModelButton.tsx
index 466857a83..382ba8dcd 100644
--- a/src/renderer/src/pages/home/components/SelectModelButton.tsx
+++ b/src/renderer/src/pages/home/components/SelectModelButton.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import SelectModelPopup from '@renderer/components/Popups/SelectModelPopup'
 import { isLocalAi } from '@renderer/config/env'
@@ -6,7 +7,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { Assistant, Model } from '@renderer/types'
-import { Button, Tag } from 'antd'
+import { Tag } from 'antd'
 import { ChevronsUpDown } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useRef } from 'react'
@@ -25,8 +26,7 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
 
   const modelFilter = (model: Model) => !isEmbeddingModel(model) && !isRerankModel(model)
 
-  const onSelectModel = async (event: React.MouseEvent<HTMLElement>) => {
-    event.currentTarget.blur()
+  const onSelectModel = async () => {
     const selectedModel = await SelectModelPopup.show({ model, filter: modelFilter })
     if (selectedModel) {
       // 避免更新数据造成关闭弹框的卡顿
@@ -55,7 +55,11 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
   const providerName = getProviderName(model)
 
   return (
-    <DropdownButton size="small" type="text" onClick={onSelectModel}>
+    <Button
+      size="sm"
+      variant="light"
+      onPress={onSelectModel}
+      className="mt-0.5 rounded-2xl border border-transparent border-solid bg-transparent px-1 py-3 text-xs shadow-none">
       <ButtonContent>
         <ModelAvatar model={model} size={20} />
         <ModelName>
@@ -64,21 +68,10 @@ const SelectModelButton: FC<Props> = ({ assistant }) => {
       </ButtonContent>
       <ChevronsUpDown size={14} color="var(--color-icon)" />
       {!provider && <Tag color="error">{t('models.invalid_model')}</Tag>}
-    </DropdownButton>
+    </Button>
   )
 }
 
-const DropdownButton = styled(Button)`
-  font-size: 11px;
-  border-radius: 15px;
-  padding: 13px 5px;
-  -webkit-app-region: none;
-  box-shadow: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  margin-top: 1px;
-`
-
 const ButtonContent = styled.div`
   display: flex;
   align-items: center;
diff --git a/src/renderer/src/pages/home/components/UpdateAppButton.tsx b/src/renderer/src/pages/home/components/UpdateAppButton.tsx
index 8eac14d3f..db82c3265 100644
--- a/src/renderer/src/pages/home/components/UpdateAppButton.tsx
+++ b/src/renderer/src/pages/home/components/UpdateAppButton.tsx
@@ -1,7 +1,7 @@
 import { SyncOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useAppUpdateState } from '@renderer/hooks/useAppUpdate'
-import { Button } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -23,11 +23,11 @@ const UpdateAppButton: FC = () => {
     <Container>
       <UpdateButton
         className="nodrag"
-        onClick={() => window.api.showUpdateDialog()}
-        icon={<SyncOutlined />}
-        color="orange"
-        variant="outlined"
-        size="small">
+        onPress={() => window.api.showUpdateDialog()}
+        startContent={<SyncOutlined />}
+        color="warning"
+        variant="bordered"
+        size="sm">
         {t('button.update_available')}
       </UpdateButton>
     </Container>
diff --git a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
index fe882bb3c..a3dd9d50a 100644
--- a/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
+++ b/src/renderer/src/pages/knowledge/KnowledgeContent.tsx
@@ -1,12 +1,13 @@
 import { RedoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import CustomTag from '@renderer/components/Tags/CustomTag'
 import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import { NavbarIcon } from '@renderer/pages/home/ChatNavbar'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase } from '@renderer/types'
-import { Button, Empty, Tabs, Tag, Tooltip } from 'antd'
+import { Empty, Tabs, Tag, Tooltip } from 'antd'
 import { Book, Folder, Globe, Link, Notebook, Search, Settings, Video } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -145,10 +146,11 @@ const KnowledgeContent: FC<KnowledgeContentProps> = ({ selectedBase }) => {
       <HeaderContainer>
         <ModelInfo>
           <Button
-            type="text"
-            icon={<Settings size={18} color="var(--color-icon)" />}
-            onClick={() => EditKnowledgeBasePopup.show({ base })}
-            size="small"
+            variant="light"
+            startContent={<Settings size={18} color="var(--color-icon)" />}
+            isIconOnly
+            onPress={() => EditKnowledgeBasePopup.show({ base })}
+            size="sm"
           />
           <div className="model-row">
             <div className="label-column">
@@ -339,7 +341,7 @@ export const FlexAlignCenter = styled.div`
 
 export const ResponsiveButton = styled(Button)`
   @media (max-width: 1080px) {
-    .ant-btn-icon + span {
+    [data-slot="icon"] + [data-slot="label"] {
       display: none;
     }
   }
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeDirectories.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeDirectories.tsx
index 3610ce397..5a97622c1 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeDirectories.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeDirectories.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import Ellipsis from '@renderer/components/Ellipsis'
 import { DeleteIcon } from '@renderer/components/Icons'
@@ -6,7 +7,7 @@ import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import FileItem from '@renderer/pages/files/FileItem'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase, KnowledgeItem } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -69,13 +70,11 @@ const KnowledgeDirectories: FC<KnowledgeContentProps> = ({ selectedBase, progres
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<PlusIcon size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddDirectory()
-          }}
-          disabled={disabled}>
+          variant="solid"
+          color="primary"
+          startContent={<PlusIcon size={16} />}
+          onPress={handleAddDirectory}
+          isDisabled={disabled}>
           {t('knowledge.add_directory')}
         </ResponsiveButton>
       </ItemHeader>
@@ -103,7 +102,11 @@ const KnowledgeDirectories: FC<KnowledgeContentProps> = ({ selectedBase, progres
                 extra: getDisplayTime(item),
                 actions: (
                   <FlexAlignCenter>
-                    {item.uniqueId && <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />}
+                    {item.uniqueId && (
+                      <Button variant="light" isIconOnly onPress={() => refreshItem(item)}>
+                        <RefreshIcon />
+                      </Button>
+                    )}
                     <StatusIconWrapper>
                       <StatusIcon
                         sourceId={item.id}
@@ -113,12 +116,9 @@ const KnowledgeDirectories: FC<KnowledgeContentProps> = ({ selectedBase, progres
                         type="directory"
                       />
                     </StatusIconWrapper>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => removeItem(item)}
-                      icon={<DeleteIcon size={14} className="lucide-custom" />}
-                    />
+                    <Button variant="light" color="danger" isIconOnly onPress={() => removeItem(item)}>
+                      <DeleteIcon size={14} className="lucide-custom" />
+                    </Button>
                   </FlexAlignCenter>
                 )
               }}
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeFiles.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeFiles.tsx
index 800a6f565..b995f77b3 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeFiles.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeFiles.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import Ellipsis from '@renderer/components/Ellipsis'
 import { useFiles } from '@renderer/hooks/useFiles'
@@ -10,7 +11,7 @@ import type { FileMetadata, FileTypes, KnowledgeBase, KnowledgeItem } from '@ren
 import { isKnowledgeFileItem } from '@renderer/types'
 import { formatFileSize, uuid } from '@renderer/utils'
 import { bookExts, documentExts, textExts, thirdPartyApplicationExts } from '@shared/config/constant'
-import { Button, Tooltip, Upload } from 'antd'
+import { Tooltip, Upload } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -142,13 +143,12 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<PlusIcon size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddFile()
-          }}
-          disabled={disabled}>
+          size="sm"
+          variant="solid"
+          color="primary"
+          startContent={<PlusIcon size={16} />}
+          onPress={handleAddFile}
+          isDisabled={disabled}>
           {t('knowledge.add_file')}
         </ResponsiveButton>
       </ItemHeader>
@@ -202,7 +202,9 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
                       actions: (
                         <FlexAlignCenter>
                           {item.uniqueId && (
-                            <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />
+                            <Button variant="light" isIconOnly onPress={() => refreshItem(item)}>
+                              <RefreshIcon />
+                            </Button>
                           )}
                           {showPreprocessIcon(item) && (
                             <StatusIconWrapper>
@@ -224,12 +226,9 @@ const KnowledgeFiles: FC<KnowledgeContentProps> = ({ selectedBase, progressMap,
                               type="file"
                             />
                           </StatusIconWrapper>
-                          <Button
-                            type="text"
-                            danger
-                            onClick={() => removeItem(item)}
-                            icon={<DeleteIcon size={14} className="lucide-custom" />}
-                          />
+                          <Button variant="light" color="danger" isIconOnly onPress={() => removeItem(item)}>
+                            <DeleteIcon size={14} className="lucide-custom" />
+                          </Button>
                         </FlexAlignCenter>
                       )
                     }}
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeNotes.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeNotes.tsx
index 322467111..f02a697b3 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeNotes.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeNotes.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import RichEditPopup from '@renderer/components/Popups/RichEditPopup'
 import { DynamicVirtualList } from '@renderer/components/VirtualList'
@@ -6,7 +7,6 @@ import FileItem from '@renderer/pages/files/FileItem'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase, KnowledgeItem } from '@renderer/types'
 import { isMarkdownContent, markdownToPreviewText } from '@renderer/utils/markdownConverter'
-import { Button } from 'antd'
 import dayjs from 'dayjs'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -82,13 +82,11 @@ const KnowledgeNotes: FC<KnowledgeContentProps> = ({ selectedBase }) => {
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<PlusIcon size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddNote()
-          }}
-          disabled={disabled}>
+          variant="solid"
+          color="primary"
+          startContent={<PlusIcon size={16} />}
+          onPress={handleAddNote}
+          isDisabled={disabled}>
           {t('knowledge.add_note')}
         </ResponsiveButton>
       </ItemHeader>
@@ -114,7 +112,9 @@ const KnowledgeNotes: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                 extra: getDisplayTime(note),
                 actions: (
                   <FlexAlignCenter>
-                    <Button type="text" onClick={() => handleEditNote(note)} icon={<EditIcon size={14} />} />
+                    <Button variant="light" isIconOnly onPress={() => handleEditNote(note)}>
+                      <EditIcon size={14} />
+                    </Button>
                     <StatusIconWrapper>
                       <StatusIcon
                         sourceId={note.id}
@@ -123,12 +123,9 @@ const KnowledgeNotes: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                         type="note"
                       />
                     </StatusIconWrapper>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => removeItem(note)}
-                      icon={<DeleteIcon size={14} className="lucide-custom" />}
-                    />
+                    <Button variant="light" color="danger" isIconOnly onPress={() => removeItem(note)}>
+                      <DeleteIcon size={14} className="lucide-custom" />
+                    </Button>
                   </FlexAlignCenter>
                 )
               }}
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeSitemaps.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeSitemaps.tsx
index e81a1beb9..a6fcb96ff 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeSitemaps.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeSitemaps.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import Ellipsis from '@renderer/components/Ellipsis'
 import { DeleteIcon } from '@renderer/components/Icons'
@@ -7,7 +8,7 @@ import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import FileItem from '@renderer/pages/files/FileItem'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase, KnowledgeItem } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -88,13 +89,11 @@ const KnowledgeSitemaps: FC<KnowledgeContentProps> = ({ selectedBase }) => {
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<PlusIcon size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddSitemap()
-          }}
-          disabled={disabled}>
+          variant="solid"
+          color="primary"
+          startContent={<PlusIcon size={16} />}
+          onPress={handleAddSitemap}
+          isDisabled={disabled}>
           {t('knowledge.add_sitemap')}
         </ResponsiveButton>
       </ItemHeader>
@@ -126,7 +125,11 @@ const KnowledgeSitemaps: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                 extra: getDisplayTime(item),
                 actions: (
                   <FlexAlignCenter>
-                    {item.uniqueId && <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />}
+                    {item.uniqueId && (
+                      <Button variant="light" isIconOnly onPress={() => refreshItem(item)}>
+                        <RefreshIcon />
+                      </Button>
+                    )}
                     <StatusIconWrapper>
                       <StatusIcon
                         sourceId={item.id}
@@ -135,12 +138,9 @@ const KnowledgeSitemaps: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                         type="sitemap"
                       />
                     </StatusIconWrapper>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => removeItem(item)}
-                      icon={<DeleteIcon size={14} className="lucide-custom" />}
-                    />
+                    <Button variant="light" color="danger" isIconOnly onPress={() => removeItem(item)}>
+                      <DeleteIcon size={14} className="lucide-custom" />
+                    </Button>
                   </FlexAlignCenter>
                 )
               }}
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeUrls.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeUrls.tsx
index 68bd13544..a4210b22b 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeUrls.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeUrls.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import Ellipsis from '@renderer/components/Ellipsis'
 import { CopyIcon, DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import PromptPopup from '@renderer/components/Popups/PromptPopup'
@@ -6,7 +7,7 @@ import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import FileItem from '@renderer/pages/files/FileItem'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase, KnowledgeItem } from '@renderer/types'
-import { Button, Dropdown, Tooltip } from 'antd'
+import { Dropdown, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -116,13 +117,11 @@ const KnowledgeUrls: FC<KnowledgeContentProps> = ({ selectedBase }) => {
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<PlusIcon size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddUrl()
-          }}
-          disabled={disabled}>
+          variant="solid"
+          color="primary"
+          startContent={<PlusIcon size={16} />}
+          onPress={handleAddUrl}
+          isDisabled={disabled}>
           {t('knowledge.add_url')}
         </ResponsiveButton>
       </ItemHeader>
@@ -176,16 +175,17 @@ const KnowledgeUrls: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                 extra: getDisplayTime(item),
                 actions: (
                   <FlexAlignCenter>
-                    {item.uniqueId && <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />}
+                    {item.uniqueId && (
+                      <Button variant="light" isIconOnly onPress={() => refreshItem(item)}>
+                        <RefreshIcon />
+                      </Button>
+                    )}
                     <StatusIconWrapper>
                       <StatusIcon sourceId={item.id} base={base} getProcessingStatus={getProcessingStatus} type="url" />
                     </StatusIconWrapper>
-                    <Button
-                      type="text"
-                      danger
-                      onClick={() => removeItem(item)}
-                      icon={<DeleteIcon size={14} className="lucide-custom" />}
-                    />
+                    <Button variant="light" color="danger" isIconOnly onPress={() => removeItem(item)}>
+                      <DeleteIcon size={14} className="lucide-custom" />
+                    </Button>
                   </FlexAlignCenter>
                 )
               }}
diff --git a/src/renderer/src/pages/knowledge/items/KnowledgeVideos.tsx b/src/renderer/src/pages/knowledge/items/KnowledgeVideos.tsx
index fe8f0c17a..2e7fd3fa9 100644
--- a/src/renderer/src/pages/knowledge/items/KnowledgeVideos.tsx
+++ b/src/renderer/src/pages/knowledge/items/KnowledgeVideos.tsx
@@ -1,4 +1,5 @@
 import { DeleteOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import Ellipsis from '@renderer/components/Ellipsis'
 import VideoPopup from '@renderer/components/Popups/VideoPopup'
@@ -7,7 +8,7 @@ import { useKnowledge } from '@renderer/hooks/useKnowledge'
 import { getProviderName } from '@renderer/services/ProviderService'
 import type { KnowledgeBase, KnowledgeItem } from '@renderer/types'
 import { FileTypes, isKnowledgeVideoItem } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { Plus } from 'lucide-react'
 import VirtualList from 'rc-virtual-list'
@@ -87,13 +88,11 @@ const KnowledgeVideos: FC<KnowledgeContentProps> = ({ selectedBase }) => {
     <ItemContainer>
       <ItemHeader>
         <ResponsiveButton
-          type="primary"
-          icon={<Plus size={16} />}
-          onClick={(e) => {
-            e.stopPropagation()
-            handleAddVideo()
-          }}
-          disabled={disabled}>
+          variant="solid"
+          color="primary"
+          startContent={<Plus size={16} />}
+          onPress={handleAddVideo}
+          isDisabled={disabled}>
           {t('knowledge.add_video')}
         </ResponsiveButton>
       </ItemHeader>
@@ -139,7 +138,12 @@ const KnowledgeVideos: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                       actions: (
                         <FlexAlignCenter>
                           {item.uniqueId && (
-                            <Button type="text" icon={<RefreshIcon />} onClick={() => refreshItem(item)} />
+                            <Button
+                              variant="light"
+                              startContent={<RefreshIcon />}
+                              isIconOnly
+                              onPress={() => refreshItem(item)}
+                            />
                           )}
 
                           <StatusIconWrapper>
@@ -150,7 +154,13 @@ const KnowledgeVideos: FC<KnowledgeContentProps> = ({ selectedBase }) => {
                               type="file"
                             />
                           </StatusIconWrapper>
-                          <Button type="text" danger onClick={() => removeItem(item)} icon={<DeleteOutlined />} />
+                          <Button
+                            variant="light"
+                            color="danger"
+                            startContent={<DeleteOutlined />}
+                            isIconOnly
+                            onPress={() => removeItem(item)}
+                          />
                         </FlexAlignCenter>
                       )
                     }}
diff --git a/src/renderer/src/pages/minapps/MinAppsPage.tsx b/src/renderer/src/pages/minapps/MinAppsPage.tsx
index 2736f3931..2b3903206 100644
--- a/src/renderer/src/pages/minapps/MinAppsPage.tsx
+++ b/src/renderer/src/pages/minapps/MinAppsPage.tsx
@@ -1,9 +1,10 @@
+import { Button } from '@cherrystudio/ui'
 import { Navbar, NavbarMain } from '@renderer/components/app/Navbar'
 import App from '@renderer/components/MinApp/MinApp'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import { useNavbarPosition } from '@renderer/hooks/useNavbar'
-import { Button, Input } from 'antd'
+import { Input } from 'antd'
 import { Search, SettingsIcon } from 'lucide-react'
 import type { FC } from 'react'
 import React, { useState } from 'react'
@@ -56,10 +57,11 @@ const AppsPage: FC = () => {
             onChange={(e) => setSearch(e.target.value)}
           />
           <Button
-            type="text"
+            variant="light"
             className="nodrag"
-            icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
-            onClick={MinappSettingsPopup.show}
+            startContent={<SettingsIcon size={18} color="var(--color-text-2)" />}
+            isIconOnly
+            onPress={MinappSettingsPopup.show}
           />
         </NavbarMain>
       </Navbar>
@@ -78,10 +80,11 @@ const AppsPage: FC = () => {
                   onChange={(e) => setSearch(e.target.value)}
                 />
                 <Button
-                  type="text"
+                  variant="light"
                   className="nodrag"
-                  icon={<SettingsIcon size={18} color="var(--color-text-2)" />}
-                  onClick={() => MinappSettingsPopup.show()}
+                  startContent={<SettingsIcon size={18} color="var(--color-text-2)" />}
+                  isIconOnly
+                  onPress={() => MinappSettingsPopup.show()}
                 />
               </HeaderContainer>
             )}
diff --git a/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx b/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
index d3ed1181e..df9139519 100644
--- a/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
+++ b/src/renderer/src/pages/minapps/MiniappSettings/MiniAppSettings.tsx
@@ -1,10 +1,11 @@
 import { UndoOutlined } from '@ant-design/icons' // 导入重置图标
 import { Switch } from '@cherrystudio/ui'
+import { Button } 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, Slider, Tooltip } from 'antd'
+import { Slider, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -79,8 +80,8 @@ const MiniAppSettings: FC = () => {
     <Container>
       <SettingTitle style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
         <ButtonWrapper>
-          <Button onClick={handleSwapMinApps}>{t('common.swap')}</Button>
-          <Button onClick={handleResetMinApps}>{t('common.reset')}</Button>
+          <Button onPress={handleSwapMinApps}>{t('common.swap')}</Button>
+          <Button onPress={handleResetMinApps}>{t('common.reset')}</Button>
         </ButtonWrapper>
       </SettingTitle>
       <BorderedContainer>
diff --git a/src/renderer/src/pages/minapps/NewAppButton.tsx b/src/renderer/src/pages/minapps/NewAppButton.tsx
index 22d9f9345..7d4507cf4 100644
--- a/src/renderer/src/pages/minapps/NewAppButton.tsx
+++ b/src/renderer/src/pages/minapps/NewAppButton.tsx
@@ -1,9 +1,10 @@
 import { PlusOutlined, UploadOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { loadCustomMiniApp, ORIGIN_DEFAULT_MIN_APPS, updateDefaultMinApps } from '@renderer/config/minapps'
 import { useMinapps } from '@renderer/hooks/useMinapps'
 import type { MinAppType } from '@renderer/types'
-import { Button, Form, Input, Modal, Radio, Upload } from 'antd'
+import { Form, Input, Modal, Radio, Upload } from 'antd'
 import type { UploadFile } from 'antd/es/upload/interface'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -146,12 +147,12 @@ const NewAppButton: FC<Props> = ({ size = 60 }) => {
                 fileList={fileList}
                 onChange={handleFileChange}
                 beforeUpload={() => false}>
-                <Button icon={<UploadOutlined />}>{t('settings.miniapps.custom.logo_upload_button')}</Button>
+                <Button startContent={<UploadOutlined />}>{t('settings.miniapps.custom.logo_upload_button')}</Button>
               </Upload>
             </Form.Item>
           )}
           <Form.Item>
-            <Button type="primary" htmlType="submit">
+            <Button variant="solid" color="primary" type="submit">
               {t('settings.miniapps.custom.save')}
             </Button>
           </Form.Item>
diff --git a/src/renderer/src/pages/paintings/AihubmixPage.tsx b/src/renderer/src/pages/paintings/AihubmixPage.tsx
index 38d9045ee..13961c30f 100644
--- a/src/renderer/src/pages/paintings/AihubmixPage.tsx
+++ b/src/renderer/src/pages/paintings/AihubmixPage.tsx
@@ -1,5 +1,5 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
+import { Button, RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
@@ -21,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, Tooltip, Upload } from 'antd'
+import { Avatar, 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'
@@ -827,7 +827,7 @@ const AihubmixPage: FC<{ Options: string[] }> = ({ Options }) => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
-            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={handleAddPainting}>
+            <Button size="sm" className="nodrag" startContent={<PlusOutlined />} onPress={handleAddPainting}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
diff --git a/src/renderer/src/pages/paintings/DmxapiPage.tsx b/src/renderer/src/pages/paintings/DmxapiPage.tsx
index 0d47a9263..e9d244c85 100644
--- a/src/renderer/src/pages/paintings/DmxapiPage.tsx
+++ b/src/renderer/src/pages/paintings/DmxapiPage.tsx
@@ -1,5 +1,5 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
-import { RowFlex } from '@cherrystudio/ui'
+import { Button, 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'
@@ -14,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, Tooltip } from 'antd'
+import { Avatar, Input, InputNumber, Segmented, Select, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -787,7 +787,7 @@ const DmxapiPage: FC<{ Options: string[] }> = ({ Options }) => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
-            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={createNewPainting}>
+            <Button size="sm" className="nodrag" startContent={<PlusOutlined />} onPress={createNewPainting}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
diff --git a/src/renderer/src/pages/paintings/NewApiPage.tsx b/src/renderer/src/pages/paintings/NewApiPage.tsx
index 1f6e21f56..a5bd667e6 100644
--- a/src/renderer/src/pages/paintings/NewApiPage.tsx
+++ b/src/renderer/src/pages/paintings/NewApiPage.tsx
@@ -1,4 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -27,7 +28,7 @@ import { translateText } from '@renderer/services/TranslateService'
 import type { PaintingAction, PaintingsState } from '@renderer/types'
 import type { FileMetadata } from '@renderer/types'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Avatar, Button, Empty, InputNumber, Segmented, Select, Upload } from 'antd'
+import { Avatar, Empty, InputNumber, Segmented, Select, Upload } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import type { FC } from 'react'
 import React from 'react'
@@ -489,7 +490,7 @@ const NewApiPage: FC<{ Options: string[] }> = ({ Options }) => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
-            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={handleAddPainting}>
+            <Button size="sm" className="nodrag" startContent={<PlusOutlined />} onPress={handleAddPainting}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
@@ -531,7 +532,7 @@ const NewApiPage: FC<{ Options: string[] }> = ({ Options }) => {
               description={t('paintings.no_image_generation_model', {
                 endpoint_type: t('endpoint_type.image-generation')
               })}>
-              <Button type="primary" onClick={handleShowAddModelPopup}>
+              <Button variant="solid" color="primary" onPress={handleShowAddModelPopup}>
                 {t('paintings.go_to_settings')}
               </Button>
             </Empty>
diff --git a/src/renderer/src/pages/paintings/SiliconPage.tsx b/src/renderer/src/pages/paintings/SiliconPage.tsx
index 84241f659..442f7b310 100644
--- a/src/renderer/src/pages/paintings/SiliconPage.tsx
+++ b/src/renderer/src/pages/paintings/SiliconPage.tsx
@@ -1,6 +1,7 @@
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons'
 import { ColFlex, RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -25,7 +26,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, Tooltip } from 'antd'
+import { 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'
@@ -374,10 +375,10 @@ const SiliconPage: FC<{ Options: string[] }> = ({ Options }) => {
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
             <Button
-              size="small"
+              size="sm"
               className="nodrag"
-              icon={<PlusOutlined />}
-              onClick={() => setPainting(addPainting('siliconflow_paintings', getNewPainting()))}>
+              startContent={<PlusOutlined />}
+              onPress={() => setPainting(addPainting('siliconflow_paintings', getNewPainting()))}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
diff --git a/src/renderer/src/pages/paintings/TokenFluxPage.tsx b/src/renderer/src/pages/paintings/TokenFluxPage.tsx
index 72ef5c683..1d0cd6835 100644
--- a/src/renderer/src/pages/paintings/TokenFluxPage.tsx
+++ b/src/renderer/src/pages/paintings/TokenFluxPage.tsx
@@ -1,4 +1,5 @@
 import { PlusOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
@@ -15,7 +16,7 @@ import FileManager from '@renderer/services/FileManager'
 import { translateText } from '@renderer/services/TranslateService'
 import type { TokenFluxPainting } from '@renderer/types'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Avatar, Button, Select, Tooltip } from 'antd'
+import { Avatar, Select, Tooltip } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { Info } from 'lucide-react'
 import type { FC } from 'react'
@@ -367,7 +368,7 @@ const TokenFluxPage: FC<{ Options: string[] }> = ({ Options }) => {
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
           <NavbarRight style={{ justifyContent: 'flex-end' }}>
-            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={handleAddPainting}>
+            <Button size="sm" className="nodrag" startContent={<PlusOutlined />} onPress={handleAddPainting}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
diff --git a/src/renderer/src/pages/paintings/ZhipuPage.tsx b/src/renderer/src/pages/paintings/ZhipuPage.tsx
index 7ac16a6eb..0fcd00861 100644
--- a/src/renderer/src/pages/paintings/ZhipuPage.tsx
+++ b/src/renderer/src/pages/paintings/ZhipuPage.tsx
@@ -1,5 +1,6 @@
 import { PlusOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useCache } from '@data/hooks/useCache'
 import AiProvider from '@renderer/aiCore'
 import { Navbar, NavbarCenter, NavbarRight } from '@renderer/components/app/Navbar'
@@ -11,7 +12,7 @@ import { useAllProviders } from '@renderer/hooks/useProvider'
 import { getProviderLabel } from '@renderer/i18n/label'
 import FileManager from '@renderer/services/FileManager'
 import { getErrorMessage, uuid } from '@renderer/utils'
-import { Avatar, Button, InputNumber, Radio, Select } from 'antd'
+import { Avatar, InputNumber, Radio, Select } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -342,8 +343,13 @@ const ZhipuPage: FC<{ Options: string[] }> = ({ Options }) => {
       <Navbar>
         <NavbarCenter style={{ borderRight: 'none' }}>{t('paintings.title')}</NavbarCenter>
         {isMac && (
-          <NavbarRight style={{ justifyContent: 'flex-end' }}>
-            <Button size="small" className="nodrag" icon={<PlusOutlined />} onClick={handleAddPainting}>
+          <NavbarRight>
+            <Button
+              size="sm"
+              className="nodrag"
+              variant="light"
+              startContent={<PlusOutlined />}
+              onPress={handleAddPainting}>
               {t('paintings.button.new.image')}
             </Button>
           </NavbarRight>
diff --git a/src/renderer/src/pages/paintings/components/Artboard.tsx b/src/renderer/src/pages/paintings/components/Artboard.tsx
index 7e915450b..2a988fba5 100644
--- a/src/renderer/src/pages/paintings/components/Artboard.tsx
+++ b/src/renderer/src/pages/paintings/components/Artboard.tsx
@@ -1,7 +1,8 @@
+import { Button } from '@cherrystudio/ui'
 import ImageViewer from '@renderer/components/ImageViewer'
 import FileManager from '@renderer/services/FileManager'
 import type { Painting } from '@renderer/types'
-import { Button, Spin } from 'antd'
+import { Spin } from 'antd'
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
@@ -43,7 +44,7 @@ const Artboard: FC<ArtboardProps> = ({
         {painting.files.length > 0 ? (
           <ImageContainer>
             {painting.files.length > 1 && (
-              <NavigationButton onClick={onPrevImage} style={{ left: 10 }}>
+              <NavigationButton onPress={onPrevImage} className="left-2.5">
                 ←
               </NavigationButton>
             )}
@@ -59,7 +60,7 @@ const Artboard: FC<ArtboardProps> = ({
               }}
             />
             {painting.files.length > 1 && (
-              <NavigationButton onClick={onNextImage} style={{ right: 10 }}>
+              <NavigationButton onPress={onNextImage} className="right-2.5">
                 →
               </NavigationButton>
             )}
@@ -78,7 +79,7 @@ const Artboard: FC<ArtboardProps> = ({
                 </ImageList>
                 <div>
                   {t('paintings.proxy_required')}
-                  <Button type="link" onClick={() => retry?.(painting)}>
+                  <Button variant="light" onPress={() => retry?.(painting)}>
                     {t('paintings.image_retry')}
                   </Button>
                 </div>
@@ -96,7 +97,7 @@ const Artboard: FC<ArtboardProps> = ({
           <LoadingOverlay>
             <Spin size="large" />
             {loadText ? loadText : ''}
-            <CancelButton onClick={onCancel}>{t('common.cancel')}</CancelButton>
+            <CancelButton onPress={onCancel}>{t('common.cancel')}</CancelButton>
           </LoadingOverlay>
         )}
       </LoadingContainer>
diff --git a/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx b/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
index dab3e27b6..08db7a9db 100644
--- a/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
+++ b/src/renderer/src/pages/paintings/components/DynamicFormRender.tsx
@@ -1,8 +1,9 @@
 import { CloseOutlined, LinkOutlined, RedoOutlined, UploadOutlined } from '@ant-design/icons'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { convertToBase64 } from '@renderer/utils'
-import { Button, Input, InputNumber, Select, Upload } from 'antd'
+import { Input, InputNumber, Select, Upload } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { useCallback } from 'react'
 
@@ -75,15 +76,7 @@ export const DynamicFormRender: React.FC<DynamicFormRenderProps> = ({
               handleImageUpload(propertyName, file, onChange)
               return false
             }}>
-            <Button
-              icon={<UploadOutlined />}
-              title="Upload image file"
-              style={{
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                height: '32px'
-              }}
-            />
+            <Button startContent={<UploadOutlined />} title="Upload image file" className="h-8 rounded-l-none" />
           </Upload>
         </div>
 
@@ -123,12 +116,12 @@ export const DynamicFormRender: React.FC<DynamicFormRenderProps> = ({
               {value.startsWith('data:') ? 'Uploaded image' : 'Image URL'}
             </div>
             <Button
-              size="small"
-              danger
-              icon={<CloseOutlined />}
-              onClick={() => onChange(propertyName, '')}
+              size="sm"
+              color="danger"
+              startContent={<CloseOutlined />}
+              onPress={() => onChange(propertyName, '')}
               title="Remove image"
-              style={{ flexShrink: 0, minWidth: 'auto', padding: '0 8px' }}
+              className="min-w-0 shrink-0 px-2"
             />
           </div>
         )}
@@ -180,9 +173,9 @@ export const DynamicFormRender: React.FC<DynamicFormRenderProps> = ({
           max={schemaProperty.maximum}
         />
         <Button
-          size="small"
-          icon={<RedoOutlined />}
-          onClick={() => onChange(propertyName, generateRandomSeed())}
+          size="sm"
+          startContent={<RedoOutlined />}
+          onPress={() => onChange(propertyName, generateRandomSeed())}
           title="Generate random seed"
         />
       </div>
diff --git a/src/renderer/src/pages/paintings/components/ImageUploader.tsx b/src/renderer/src/pages/paintings/components/ImageUploader.tsx
index b1559c4ff..bb4a9f471 100644
--- a/src/renderer/src/pages/paintings/components/ImageUploader.tsx
+++ b/src/renderer/src/pages/paintings/components/ImageUploader.tsx
@@ -1,9 +1,9 @@
 import { DeleteOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import IcImageUp from '@renderer/assets/images/paintings/ic_ImageUp.svg'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import type { FileMetadata } from '@renderer/types'
 import { Popconfirm, Upload } from 'antd'
-import { Button } from 'antd'
 import type { RcFile, UploadProps } from 'antd/es/upload'
 import React from 'react'
 import styled from 'styled-components'
@@ -45,7 +45,7 @@ const ImageUploader: React.FC<ImageUploaderProps> = ({
     <>
       <HeaderContainer>
         {fileMap.imageFiles && fileMap.imageFiles.length > 0 && (
-          <Button size="small" onClick={onClearImages}>
+          <Button size="sm" onPress={onClearImages}>
             清除全部
           </Button>
         )}
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index 4cf0ad0d6..3dbf8211e 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -1,6 +1,7 @@
 import { GithubOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import IndicatorLight from '@renderer/components/IndicatorLight'
 import { APP_NAME, AppLogo } from '@renderer/config/env'
@@ -14,7 +15,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, Tag, Tooltip } from 'antd'
+import { Avatar, Progress, Radio, Row, Tag, Tooltip } from 'antd'
 import { debounce } from 'lodash'
 import { Bug, FileCheck, Globe, Mail, Rss } from 'lucide-react'
 import { BadgeQuestionMark } from 'lucide-react'
@@ -222,9 +223,9 @@ const AboutSettings: FC = () => {
           </Row>
           {!isPortable && (
             <CheckUpdateButton
-              onClick={onCheckUpdate}
-              loading={appUpdateState.checking}
-              disabled={appUpdateState.downloading || appUpdateState.checking}>
+              onPress={onCheckUpdate}
+              isLoading={appUpdateState.checking}
+              isDisabled={appUpdateState.downloading || appUpdateState.checking}>
               {appUpdateState.downloading
                 ? t('settings.about.downloading')
                 : appUpdateState.available
@@ -292,7 +293,7 @@ const AboutSettings: FC = () => {
             <BadgeQuestionMark size={18} />
             {t('docs.title')}
           </SettingRowTitle>
-          <Button onClick={onOpenDocs}>{t('settings.about.website.button')}</Button>
+          <Button onPress={onOpenDocs}>{t('settings.about.website.button')}</Button>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -300,7 +301,7 @@ const AboutSettings: FC = () => {
             <Rss size={18} />
             {t('settings.about.releases.title')}
           </SettingRowTitle>
-          <Button onClick={showReleases}>{t('settings.about.releases.button')}</Button>
+          <Button onPress={showReleases}>{t('settings.about.releases.button')}</Button>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -308,7 +309,7 @@ const AboutSettings: FC = () => {
             <Globe size={18} />
             {t('settings.about.website.title')}
           </SettingRowTitle>
-          <Button onClick={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
+          <Button onPress={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -316,7 +317,7 @@ const AboutSettings: FC = () => {
             <GithubOutlined size={18} />
             {t('settings.about.feedback.title')}
           </SettingRowTitle>
-          <Button onClick={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio/issues/new/choose')}>
+          <Button onPress={() => onOpenWebsite('https://github.com/CherryHQ/cherry-studio/issues/new/choose')}>
             {t('settings.about.feedback.button')}
           </Button>
         </SettingRow>
@@ -326,7 +327,7 @@ const AboutSettings: FC = () => {
             <FileCheck size={18} />
             {t('settings.about.license.title')}
           </SettingRowTitle>
-          <Button onClick={showLicense}>{t('settings.about.license.button')}</Button>
+          <Button onPress={showLicense}>{t('settings.about.license.button')}</Button>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -334,7 +335,7 @@ const AboutSettings: FC = () => {
             <Mail size={18} />
             {t('settings.about.contact.title')}
           </SettingRowTitle>
-          <Button onClick={mailto}>{t('settings.about.contact.button')}</Button>
+          <Button onPress={mailto}>{t('settings.about.contact.button')}</Button>
         </SettingRow>
         <SettingDivider />
         <SettingRow>
@@ -342,7 +343,7 @@ const AboutSettings: FC = () => {
             <Bug size={18} />
             {t('settings.about.debug.title')}
           </SettingRowTitle>
-          <Button onClick={debug}>{t('settings.about.debug.open')}</Button>
+          <Button onPress={debug}>{t('settings.about.debug.open')}</Button>
         </SettingRow>
       </SettingGroup>
     </SettingContainer>
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
index 8c5ec1538..b8a9f7e6b 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantMemorySettings.tsx
@@ -1,12 +1,13 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { Box } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } 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, Tooltip, Typography } from 'antd'
+import { Alert, Card, Space, Tooltip, Typography } from 'antd'
 import { useForm } from 'antd/es/form/Form'
 import { Settings2 } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
@@ -82,7 +83,7 @@ const AssistantMemorySettings: React.FC<Props> = ({ assistant, updateAssistant,
           </Tooltip>
         </Box>
         <Space>
-          <Button type="text" icon={<Settings2 size={15} />} onClick={handleNavigateToMemory} />
+          <Button variant="light" isIconOnly startContent={<Settings2 size={15} />} onPress={handleNavigateToMemory} />
           <Tooltip
             title={
               !globalMemoryEnabled
@@ -108,7 +109,7 @@ const AssistantMemorySettings: React.FC<Props> = ({ assistant, updateAssistant,
           showIcon
           style={{ marginBottom: 16 }}
           action={
-            <Button size="small" onClick={handleNavigateToMemory}>
+            <Button size="sm" onPress={handleNavigateToMemory}>
               {t('memory.go_to_memory_page')}
             </Button>
           }
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
index af6e89c31..524bfd96e 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantModelSettings.tsx
@@ -1,6 +1,7 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import EditableNumber from '@renderer/components/EditableNumber'
 import { DeleteIcon, ResetIcon } from '@renderer/components/Icons'
@@ -12,7 +13,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, Tooltip } from 'antd'
+import { Col, Divider, Input, InputNumber, Row, Select, Slider, Tooltip } from 'antd'
 import { isNull } from 'lodash'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -221,20 +222,20 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
         <Label>{t('assistants.settings.default_model')}</Label>
         <RowFlex className="items-center gap-[5px]">
           <ModelSelectButton
-            icon={defaultModel ? <ModelAvatar model={defaultModel} size={20} /> : <PlusIcon size={18} />}
-            onClick={onSelectModel}>
+            startContent={defaultModel ? <ModelAvatar model={defaultModel} size={20} /> : <PlusIcon size={18} />}
+            onPress={onSelectModel}>
             <ModelName>{defaultModel ? defaultModel.name : t('agents.edit.model.select.title')}</ModelName>
           </ModelSelectButton>
           {defaultModel && (
             <Button
               color="danger"
-              variant="filled"
-              icon={<DeleteIcon size={14} className="lucide-custom" />}
-              onClick={() => {
+              variant="solid"
+              isIconOnly
+              startContent={<DeleteIcon size={14} className="lucide-custom" />}
+              onPress={() => {
                 setDefaultModel(undefined)
                 updateAssistant({ ...assistant, defaultModel: undefined })
               }}
-              danger
             />
           )}
         </RowFlex>
@@ -457,7 +458,7 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
       <Divider style={{ margin: '10px 0' }} />
       <SettingRow style={{ minHeight: 30 }}>
         <Label>{t('models.custom_parameters')}</Label>
-        <Button icon={<PlusIcon size={18} />} onClick={onAddCustomParameter}>
+        <Button startContent={<PlusIcon size={18} />} onPress={onAddCustomParameter}>
           {t('models.add_parameter')}
         </Button>
       </SettingRow>
@@ -484,17 +485,19 @@ const AssistantModelSettings: FC<Props> = ({ assistant, updateAssistant, updateA
           <Col span={10}>{renderParameterValueInput(param, index)}</Col>
           <Col span={2} style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Button
+              size="sm"
               color="danger"
-              variant="filled"
-              icon={<DeleteIcon size={14} className="lucide-custom" />}
-              onClick={() => onDeleteCustomParameter(index)}
+              variant="solid"
+              isIconOnly
+              startContent={<DeleteIcon size={14} className="lucide-custom" />}
+              onPress={() => onDeleteCustomParameter(index)}
             />
           </Col>
         </Row>
       ))}
       <Divider style={{ margin: '15px 0' }} />
       <RowFlex className="justify-end">
-        <Button onClick={onReset} danger type="primary" icon={<ResetIcon size={16} />}>
+        <Button onPress={onReset} color="danger" variant="solid" startContent={<ResetIcon size={16} />}>
           {t('chat.settings.reset')}
         </Button>
       </RowFlex>
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
index fbbefae78..dec4869b8 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx
@@ -1,9 +1,11 @@
 import 'emoji-picker-element'
 
-import { CloseCircleFilled } from '@ant-design/icons'
+import CloseCircleFilled from '@ant-design/icons/lib/icons/CloseCircleFilled'
 import { Box, RowFlex, SpaceBetweenRowFlex } from '@cherrystudio/ui'
 import { CodeEditor } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
+import { Popover, PopoverContent, PopoverTrigger, Tooltip } from '@heroui/react'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import type { RichEditorRef } from '@renderer/components/RichEditor/types'
 import { useCodeStyle } from '@renderer/context/CodeStyleProvider'
@@ -11,7 +13,7 @@ import { usePromptProcessor } from '@renderer/hooks/usePromptProcessor'
 import { estimateTextTokens } from '@renderer/services/TokenService'
 import type { Assistant, AssistantSettings } from '@renderer/types'
 import { getLeadingEmoji } from '@renderer/utils'
-import { Button, Input, Popover } from 'antd'
+import { Input } from 'antd'
 import { Edit, HelpCircle, Save } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -75,37 +77,34 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
     <Container>
       <Box className="mb-2 font-bold">{t('common.name')}</Box>
       <RowFlex className="items-center gap-2">
-        <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow trigger="click">
-          <EmojiButtonWrapper>
-            <Button
+        <EmojiDeleteButtonWrapper>
+          <Popover>
+            <PopoverTrigger>
+              <Button className="h-7 min-w-7 p-1 text-lg">{emoji}</Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <EmojiPicker onEmojiClick={handleEmojiSelect} />
+            </PopoverContent>
+          </Popover>
+          {emoji && (
+            <CloseCircleFilled
+              className="delete-icon z-50"
+              onClick={(e) => {
+                e.stopPropagation()
+                handleEmojiDelete()
+              }}
               style={{
-                fontSize: 18,
-                padding: '4px',
-                minWidth: '28px',
-                height: '28px'
-              }}>
-              {emoji}
-            </Button>
-            {emoji && (
-              <CloseCircleFilled
-                className="delete-icon"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  handleEmojiDelete()
-                }}
-                style={{
-                  display: 'none',
-                  position: 'absolute',
-                  top: '-8px',
-                  right: '-8px',
-                  fontSize: '16px',
-                  color: '#ff4d4f',
-                  cursor: 'pointer'
-                }}
-              />
-            )}
-          </EmojiButtonWrapper>
-        </Popover>
+                display: 'none',
+                position: 'absolute',
+                top: '-8px',
+                right: '-8px',
+                fontSize: '16px',
+                color: '#ff4d4f',
+                cursor: 'pointer'
+              }}
+            />
+          )}
+        </EmojiDeleteButtonWrapper>
         <Input
           placeholder={t('common.assistant') + t('common.name')}
           value={name}
@@ -117,9 +116,16 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
       <SettingDivider />
       <RowFlex className="mb-2 items-center gap-1">
         <Box style={{ fontWeight: 'bold' }}>{t('common.prompt')}</Box>
-        <Popover title={t('agents.add.prompt.variables.tip.title')} content={promptVarsContent}>
+        <Tooltip
+          content={
+            <>
+              <h1 className="text-lg">{t('agents.add.prompt.variables.tip.title')}</h1>
+              {promptVarsContent}
+            </>
+          }
+          showArrow>
           <HelpCircle size={14} color="var(--color-text-2)" />
-        </Popover>
+        </Tooltip>
       </RowFlex>
       <TextAreaContainer>
         <RichEditorContainer>
@@ -151,9 +157,10 @@ const AssistantPromptSettings: React.FC<Props> = ({ assistant, updateAssistant }
       <SpaceBetweenRowFlex className="mt-2.5 w-full justify-end">
         <TokenCount>Tokens: {tokenCount}</TokenCount>
         <Button
-          type="primary"
-          icon={showPreview ? <Edit size={14} /> : <Save size={14} />}
-          onClick={() => {
+          variant="solid"
+          color="primary"
+          startContent={showPreview ? <Edit size={14} /> : <Save size={14} />}
+          onPress={() => {
             const currentScrollTop = editorRef.current?.getScrollTop?.() || 0
             if (showPreview) {
               setShowPreview(false)
@@ -180,7 +187,7 @@ const Container = styled.div`
   overflow: hidden;
 `
 
-const EmojiButtonWrapper = styled.div`
+const EmojiDeleteButtonWrapper = styled.div`
   position: relative;
   display: inline-block;
 
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
index 546ef9571..4e3eb9f49 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantRegularPromptsSettings.tsx
@@ -1,10 +1,11 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DraggableList } from '@renderer/components/DraggableList'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import FileItem from '@renderer/pages/files/FileItem'
 import type { Assistant, QuickPhrase } from '@renderer/types'
-import { Button, Input, Modal, Popconfirm, Space } from 'antd'
+import { Input, Modal, Popconfirm, Space } from 'antd'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -86,7 +87,7 @@ const AssistantRegularPromptsSettings: FC<AssistantRegularPromptsSettingsProps>
     <Container>
       <SettingTitle>
         {t('assistants.settings.regular_phrases.title', 'Regular Prompts')}
-        <Button type="text" icon={<PlusIcon size={18} />} onClick={handleAdd} />
+        <Button variant="light" isIconOnly startContent={<PlusIcon size={18} />} onPress={handleAdd} />
       </SettingTitle>
       <SettingDivider />
       <SettingRow>
@@ -106,7 +107,13 @@ const AssistantRegularPromptsSettings: FC<AssistantRegularPromptsSettingsProps>
                   extra: prompt.content,
                   actions: (
                     <Flex className="gap-1 opacity-60">
-                      <Button key="edit" type="text" icon={<EditIcon size={14} />} onClick={() => handleEdit(prompt)} />
+                      <Button
+                        key="edit"
+                        variant="light"
+                        isIconOnly
+                        startContent={<EditIcon size={14} />}
+                        onPress={() => handleEdit(prompt)}
+                      />
                       <Popconfirm
                         title={t('assistants.settings.regular_phrases.delete', 'Delete Prompt')}
                         description={t(
@@ -119,9 +126,10 @@ const AssistantRegularPromptsSettings: FC<AssistantRegularPromptsSettingsProps>
                         icon={<ExclamationCircleOutlined style={{ color: 'red' }} />}>
                         <Button
                           key="delete"
-                          type="text"
-                          danger
-                          icon={<DeleteIcon size={14} className="lucide-custom" />}
+                          variant="light"
+                          color="danger"
+                          isIconOnly
+                          startContent={<DeleteIcon size={14} className="lucide-custom" />}
                         />
                       </Popconfirm>
                     </Flex>
diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
index 508c67952..ff1a4a822 100644
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -7,6 +7,7 @@ import {
 } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import DividerWithText from '@renderer/components/DividerWithText'
 import { NutstoreIcon } from '@renderer/components/Icons/NutstoreIcons'
@@ -20,7 +21,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, Typography } from 'antd'
+import { Progress, Typography } from 'antd'
 import { FileText, FolderCog, FolderInput, FolderOpen, SaveIcon, Sparkle } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -602,10 +603,10 @@ const DataSettings: FC = () => {
               <SettingRow>
                 <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
                 <RowFlex className="justify-between gap-[5px]">
-                  <Button onClick={BackupPopup.show} icon={<SaveIcon size={14} />}>
+                  <Button onPress={BackupPopup.show} startContent={<SaveIcon size={14} />}>
                     {t('settings.general.backup.button')}
                   </Button>
-                  <Button onClick={RestorePopup.show} icon={<FolderOpen size={14} />}>
+                  <Button onPress={RestorePopup.show} startContent={<FolderOpen size={14} />}>
                     {t('settings.general.restore.button')}
                   </Button>
                 </RowFlex>
@@ -632,7 +633,7 @@ const DataSettings: FC = () => {
                   </PathText>
                   <StyledIcon onClick={() => handleOpenPath(appInfo?.appDataPath)} style={{ flexShrink: 0 }} />
                   <RowFlex className="ml-2 gap-[5px]">
-                    <Button onClick={handleSelectAppDataPath}>{t('settings.data.app_data.select')}</Button>
+                    <Button onPress={handleSelectAppDataPath}>{t('settings.data.app_data.select')}</Button>
                   </RowFlex>
                 </PathRow>
               </SettingRow>
@@ -645,7 +646,7 @@ const DataSettings: FC = () => {
                   </PathText>
                   <StyledIcon onClick={() => handleOpenPath(appInfo?.logsPath)} style={{ flexShrink: 0 }} />
                   <RowFlex className="ml-2 gap-[5px]">
-                    <Button onClick={() => handleOpenPath(appInfo?.logsPath)}>
+                    <Button onPress={() => handleOpenPath(appInfo?.logsPath)}>
                       {t('settings.data.app_logs.button')}
                     </Button>
                   </RowFlex>
@@ -655,7 +656,7 @@ const DataSettings: FC = () => {
               <SettingRow>
                 <SettingRowTitle>{t('settings.data.app_knowledge.label')}</SettingRowTitle>
                 <RowFlex className="items-center gap-[5px]">
-                  <Button onClick={handleRemoveAllFiles}>{t('settings.data.app_knowledge.button.delete')}</Button>
+                  <Button onPress={handleRemoveAllFiles}>{t('settings.data.app_knowledge.button.delete')}</Button>
                 </RowFlex>
               </SettingRow>
               <SettingDivider />
@@ -665,14 +666,14 @@ const DataSettings: FC = () => {
                   {cacheSize && <CacheText>({cacheSize}MB)</CacheText>}
                 </SettingRowTitle>
                 <RowFlex className="gap-[5px]">
-                  <Button onClick={handleClearCache}>{t('settings.data.clear_cache.button')}</Button>
+                  <Button onPress={handleClearCache}>{t('settings.data.clear_cache.button')}</Button>
                 </RowFlex>
               </SettingRow>
               <SettingDivider />
               <SettingRow>
                 <SettingRowTitle>{t('settings.general.reset.title')}</SettingRowTitle>
                 <RowFlex className="gap-[5px]">
-                  <Button onClick={reset} danger>
+                  <Button onPress={reset} color="danger">
                     {t('settings.general.reset.title')}
                   </Button>
                 </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
index 794749bd0..5aa89ba63 100644
--- a/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/JoplinSettings.tsx
@@ -1,11 +1,12 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Tooltip } from 'antd'
+import { Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -114,7 +115,7 @@ const JoplinSettings: FC = () => {
               placeholder={t('settings.data.joplin.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleJoplinConnectionCheck}>{t('settings.data.joplin.check.button')}</Button>
+            <Button onPress={handleJoplinConnectionCheck}>{t('settings.data.joplin.check.button')}</Button>
           </Space.Compact>
         </RowFlex>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
index c67a453b5..d1006cffd 100644
--- a/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/LocalBackupSettings.tsx
@@ -1,6 +1,7 @@
 import { DeleteOutlined, FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { LocalBackupManager } from '@renderer/components/LocalBackupManager'
@@ -10,7 +11,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, Tooltip } from 'antd'
+import { Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -193,10 +194,14 @@ const LocalBackupSettings: React.FC = () => {
             placeholder={t('settings.data.local.directory.placeholder')}
             style={{ minWidth: 200, maxWidth: 400, flex: 1 }}
           />
-          <Button icon={<FolderOpenOutlined />} onClick={handleBrowseDirectory}>
+          <Button startContent={<FolderOpenOutlined />} onPress={handleBrowseDirectory}>
             {t('common.browse')}
           </Button>
-          <Button icon={<DeleteOutlined />} onClick={handleClearDirectory} disabled={!localBackupDir} danger>
+          <Button
+            startContent={<DeleteOutlined />}
+            onPress={handleClearDirectory}
+            isDisabled={!localBackupDir}
+            color="danger">
             {t('common.clear')}
           </Button>
         </RowFlex>
@@ -205,10 +210,14 @@ const LocalBackupSettings: React.FC = () => {
       <SettingRow>
         <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
         <RowFlex className="justify-between gap-[5px]">
-          <Button onClick={showBackupModal} icon={<SaveOutlined />} loading={backuping} disabled={!localBackupDir}>
+          <Button
+            onPress={showBackupModal}
+            startContent={<SaveOutlined />}
+            isLoading={backuping}
+            isDisabled={!localBackupDir}>
             {t('settings.data.local.backup.button')}
           </Button>
-          <Button onClick={showBackupManager} icon={<FolderOpenOutlined />} disabled={!localBackupDir}>
+          <Button onPress={showBackupManager} startContent={<FolderOpenOutlined />} isDisabled={!localBackupDir}>
             {t('settings.data.local.restore.button')}
           </Button>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
index f7a23b886..9d8802145 100644
--- a/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/MarkdownExportSettings.tsx
@@ -1,9 +1,9 @@
 import { DeleteOutlined, FolderOpenOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button } from 'antd'
 import Input from 'antd/es/input/Input'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -86,7 +86,7 @@ const MarkdownExportSettings: FC = () => {
               ) : null
             }
           />
-          <Button onClick={handleSelectFolder} icon={<FolderOpenOutlined />}>
+          <Button onPress={handleSelectFolder} startContent={<FolderOpenOutlined />}>
             {t('settings.data.markdown_export.select')}
           </Button>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
index dad25c7a2..3ad06f35b 100644
--- a/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NotionSettings.tsx
@@ -1,12 +1,13 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { Client } from '@notionhq/client'
 import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Tooltip } from 'antd'
+import { Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -122,7 +123,7 @@ const NotionSettings: FC = () => {
               placeholder={t('settings.data.notion.api_key_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleNotionConnectionCheck}>{t('settings.data.notion.check.button')}</Button>
+            <Button onPress={handleNotionConnectionCheck}>{t('settings.data.notion.check.button')}</Button>
           </Space.Compact>
         </RowFlex>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
index 3b169a759..3d55b509b 100644
--- a/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/NutstoreSettings.tsx
@@ -1,6 +1,7 @@
 import { CheckOutlined, FolderOutlined, LoadingOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import NutstorePathPopup from '@renderer/components/Popups/NutsorePathPopup'
 import Selector from '@renderer/components/Selector'
@@ -20,7 +21,7 @@ import {
 import { useAppSelector } from '@renderer/store'
 import { modalConfirm } from '@renderer/utils'
 import { NUTSTORE_HOST } from '@shared/config/nutstore'
-import { Button, Input, Tooltip, Typography } from 'antd'
+import { Input, Tooltip, Typography } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
@@ -211,10 +212,10 @@ const NutstoreSettings: FC = () => {
         {isLogin ? (
           <RowFlex className="items-center justify-between gap-[5px]">
             <Button
-              type={nsConnected ? 'primary' : 'default'}
-              ghost={nsConnected}
-              onClick={handleCheckConnection}
-              loading={checkConnectionLoading}>
+              variant={nsConnected ? 'ghost' : 'solid'}
+              color={nsConnected ? 'primary' : 'default'}
+              onPress={handleCheckConnection}
+              isLoading={checkConnectionLoading}>
               {checkConnectionLoading ? (
                 <LoadingOutlined spin />
               ) : nsConnected ? (
@@ -223,12 +224,12 @@ const NutstoreSettings: FC = () => {
                 t('settings.data.nutstore.checkConnection.name')
               )}
             </Button>
-            <Button type="primary" danger onClick={handleLayout}>
+            <Button variant="solid" color="danger" onPress={handleLayout}>
               {t('settings.data.nutstore.logout.button')}
             </Button>
           </RowFlex>
         ) : (
-          <Button onClick={handleClickNutstoreSSO}>{t('settings.data.nutstore.login.button')}</Button>
+          <Button onPress={handleClickNutstoreSSO}>{t('settings.data.nutstore.login.button')}</Button>
         )}
       </SettingRow>
       <SettingDivider />
@@ -251,19 +252,17 @@ const NutstoreSettings: FC = () => {
                   setNutstorePath(e.target.value)
                 }}
               />
-              <Button type="default" onClick={handleClickPathChange}>
-                <FolderOutlined />
-              </Button>
+              <Button variant="solid" onPress={handleClickPathChange} startContent={<FolderOutlined />} isIconOnly />
             </RowFlex>
           </SettingRow>
           <SettingDivider />
           <SettingRow>
             <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
             <RowFlex className="justify-between gap-[5px]">
-              <Button onClick={showBackupModal} loading={backuping}>
+              <Button onPress={showBackupModal} isLoading={backuping}>
                 {t('settings.data.nutstore.backup.button')}
               </Button>
-              <Button onClick={showBackupManager} disabled={!nutstoreToken}>
+              <Button onPress={showBackupManager} isDisabled={!nutstoreToken}>
                 {t('settings.data.nutstore.restore.button')}
               </Button>
             </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
index 3e2516584..ab285d15e 100644
--- a/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/S3Settings.tsx
@@ -1,6 +1,7 @@
 import { FolderOpenOutlined, InfoCircleOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { S3BackupManager } from '@renderer/components/S3BackupManager'
 import { S3BackupModal, useS3BackupModal } from '@renderer/components/S3Modals'
@@ -10,7 +11,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, Tooltip } from 'antd'
+import { Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -182,16 +183,16 @@ const S3Settings: FC = () => {
         <SettingRowTitle>{t('settings.data.s3.backup.operation')}</SettingRowTitle>
         <RowFlex className="justify-between gap-[5px]">
           <Button
-            onClick={showBackupModal}
-            icon={<SaveOutlined />}
-            loading={backuping}
-            disabled={!s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
+            onPress={showBackupModal}
+            startContent={<SaveOutlined />}
+            isLoading={backuping}
+            isDisabled={!s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
             {t('settings.data.s3.backup.button')}
           </Button>
           <Button
-            onClick={showBackupManager}
-            icon={<FolderOpenOutlined />}
-            disabled={!s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
+            onPress={showBackupManager}
+            startContent={<FolderOpenOutlined />}
+            isDisabled={!s3Endpoint || !s3Region || !s3Bucket || !s3AccessKeyId || !s3SecretAccessKey}>
             {t('settings.data.s3.backup.manager.button')}
           </Button>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
index 995352861..f16e8cc83 100644
--- a/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/SiyuanSettings.tsx
@@ -1,11 +1,12 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Tooltip } from 'antd'
+import { Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -117,7 +118,7 @@ const SiyuanSettings: FC = () => {
               placeholder={t('settings.data.siyuan.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleCheckConnection}>{t('settings.data.siyuan.check.button')}</Button>
+            <Button onPress={handleCheckConnection}>{t('settings.data.siyuan.check.button')}</Button>
           </Space.Compact>
         </RowFlex>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
index d3cf5963f..3b39e5fca 100644
--- a/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/WebDavSettings.tsx
@@ -1,6 +1,7 @@
 import { FolderOpenOutlined, SaveOutlined, SyncOutlined, WarningOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import Selector from '@renderer/components/Selector'
 import { WebdavBackupManager } from '@renderer/components/WebdavBackupManager'
@@ -8,7 +9,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, Tooltip } from 'antd'
+import { Input, Tooltip } from 'antd'
 import dayjs from 'dayjs'
 import type { FC } from 'react'
 import { useState } from 'react'
@@ -147,10 +148,10 @@ const WebDavSettings: FC = () => {
       <SettingRow>
         <SettingRowTitle>{t('settings.general.backup.title')}</SettingRowTitle>
         <RowFlex className="justify-between gap-[5px]">
-          <Button onClick={showBackupModal} icon={<SaveOutlined />} loading={backuping}>
+          <Button onPress={showBackupModal} startContent={<SaveOutlined />} isLoading={backuping}>
             {t('settings.data.webdav.backup.button')}
           </Button>
-          <Button onClick={showBackupManager} icon={<FolderOpenOutlined />} disabled={!webdavHost}>
+          <Button onPress={showBackupManager} startContent={<FolderOpenOutlined />} isDisabled={!webdavHost}>
             {t('settings.data.webdav.restore.button')}
           </Button>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
index 583a9a2ac..7617a346b 100644
--- a/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/YuqueSettings.tsx
@@ -1,10 +1,11 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { AppLogo } from '@renderer/config/env'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useMinappPopup } from '@renderer/hooks/useMinappPopup'
-import { Button, Space, Tooltip } from 'antd'
+import { Space, Tooltip } from 'antd'
 import { Input } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -107,7 +108,7 @@ const YuqueSettings: FC = () => {
               placeholder={t('settings.data.yuque.token_placeholder')}
               style={{ width: '100%' }}
             />
-            <Button onClick={handleYuqueConnectionCheck}>{t('settings.data.yuque.check.button')}</Button>
+            <Button onPress={handleYuqueConnectionCheck}>{t('settings.data.yuque.check.button')}</Button>
           </Space.Compact>
         </RowFlex>
       </SettingRow>
diff --git a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
index 98e0f6e92..8985a4385 100644
--- a/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
+++ b/src/renderer/src/pages/settings/DisplaySettings/DisplaySettings.tsx
@@ -1,6 +1,7 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { CodeEditor } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { ResetIcon } from '@renderer/components/Icons'
 import TextBadge from '@renderer/components/TextBadge'
@@ -12,7 +13,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 } from 'antd'
+import { 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'
@@ -259,15 +260,28 @@ const DisplaySettings: FC = () => {
         <SettingRow>
           <SettingRowTitle>{t('settings.zoom.title')}</SettingRowTitle>
           <ZoomButtonGroup>
-            <Button onClick={() => handleZoomFactor(-0.1)} icon={<Minus size="14" />} color="default" variant="text" />
-            <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
-            <Button onClick={() => handleZoomFactor(0.1)} icon={<Plus size="14" />} color="default" variant="text" />
             <Button
-              onClick={() => handleZoomFactor(0, true)}
-              style={{ marginLeft: 8 }}
-              icon={<ResetIcon size="14" />}
+              onPress={() => handleZoomFactor(-0.1)}
+              startContent={<Minus size="14" />}
               color="default"
-              variant="text"
+              variant="light"
+              isIconOnly
+            />
+            <ZoomValue>{Math.round(currentZoom * 100)}%</ZoomValue>
+            <Button
+              onPress={() => handleZoomFactor(0.1)}
+              startContent={<Plus size="14" />}
+              color="default"
+              variant="light"
+              isIconOnly
+            />
+            <Button
+              onPress={() => handleZoomFactor(0, true)}
+              className="ml-2"
+              startContent={<ResetIcon size="14" />}
+              color="default"
+              variant="light"
+              isIconOnly
             />
           </ZoomButtonGroup>
         </SettingRow>
@@ -300,11 +314,12 @@ const DisplaySettings: FC = () => {
               getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
             />
             <Button
-              onClick={() => handleUserFontChange('')}
-              style={{ marginLeft: 8 }}
-              icon={<ResetIcon size="14" />}
+              onPress={() => handleUserFontChange('')}
+              className="ml-2"
+              startContent={<ResetIcon size="14" />}
               color="default"
-              variant="text"
+              variant="light"
+              isIconOnly
             />
           </SelectRow>
         </SettingRow>
@@ -332,11 +347,12 @@ const DisplaySettings: FC = () => {
               getPopupContainer={(triggerNode) => triggerNode.parentElement || document.body}
             />
             <Button
-              onClick={() => handleUserCodeFontChange('')}
-              style={{ marginLeft: 8 }}
-              icon={<ResetIcon size="14" />}
+              onPress={() => handleUserCodeFontChange('')}
+              className="ml-2"
+              startContent={<ResetIcon size="14" />}
               color="default"
-              variant="text"
+              variant="light"
+              isIconOnly
             />
           </SelectRow>
         </SettingRow>
@@ -398,7 +414,7 @@ const DisplaySettings: FC = () => {
             style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
             <span>{t('settings.display.sidebar.title')}</span>
             <ResetButtonWrapper>
-              <Button onClick={handleReset}>{t('common.reset')}</Button>
+              <Button onPress={handleReset}>{t('common.reset')}</Button>
             </ResetButtonWrapper>
           </SettingTitle>
           <SettingDivider />
diff --git a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
index 75cab3f20..002e4e3ce 100644
--- a/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
+++ b/src/renderer/src/pages/settings/DocProcessSettings/PreprocessProviderSettings.tsx
@@ -1,11 +1,12 @@
 import { ExportOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
 import { getPreprocessProviderLogo, PREPROCESS_PROVIDER_CONFIG } from '@renderer/config/preprocessProviders'
 import { usePreprocessProvider } from '@renderer/hooks/usePreprocess'
 import type { PreprocessProvider } from '@renderer/types'
 import { formatApiKeys, hasObjectKey } from '@renderer/utils'
-import { Avatar, Button, Divider, Input, Tooltip } from 'antd'
+import { Avatar, Divider, Input, Tooltip } from 'antd'
 import Link from 'antd/es/typography/Link'
 import { List } from 'lucide-react'
 import type { FC } from 'react'
@@ -95,7 +96,7 @@ const PreprocessProviderSettings: FC<Props> = ({ provider: _provider }) => {
             }}>
             {t('settings.provider.api_key.label')}
             <Tooltip title={t('settings.provider.api.key.list.open')} mouseEnterDelay={0.5}>
-              <Button type="text" size="small" onClick={openApiKeyList} icon={<List size={14} />} />
+              <Button variant="light" size="sm" onPress={openApiKeyList} startContent={<List size={14} />} isIconOnly />
             </Tooltip>
           </SettingSubtitle>
           <Flex className="gap-2">
diff --git a/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx b/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
index 0588f1195..105a23b5a 100644
--- a/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/AddMcpServerModal.tsx
@@ -1,5 +1,6 @@
 import { UploadOutlined } from '@ant-design/icons'
 import { CodeEditor } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { loggerService } from '@logger'
 import { nanoid } from '@reduxjs/toolkit'
@@ -11,7 +12,7 @@ import type { MCPServer } from '@renderer/types'
 import { objectKeys, safeValidateMcpConfig } from '@renderer/types'
 import { parseJSON } from '@renderer/utils'
 import { formatZodError } from '@renderer/utils/error'
-import { Button, Form, Modal, Upload } from 'antd'
+import { Form, Modal, Upload } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -358,7 +359,7 @@ const AddMcpServerModal: FC<AddMcpServerModalProps> = ({
               }}
               onRemove={() => setDxtFile(null)}
               fileList={dxtFile ? [{ uid: '-1', name: dxtFile.name, status: 'done' } as any] : []}>
-              <Button icon={<UploadOutlined />}>{t('settings.mcp.addServer.importFrom.selectDxtFile')}</Button>
+              <Button startContent={<UploadOutlined />}>{t('settings.mcp.addServer.importFrom.selectDxtFile')}</Button>
             </Upload>
           </Form.Item>
         )}
diff --git a/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx b/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
index 617688fb2..d7d5e9b5c 100644
--- a/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/BuiltinMCPServerList.tsx
@@ -1,8 +1,9 @@
 import { CheckOutlined, PlusOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import { getBuiltInMcpServerDescriptionLabel, getMcpTypeLabel } from '@renderer/i18n/label'
 import { builtinMCPServers } from '@renderer/store/mcp'
-import { Button, Popover, Tag } from 'antd'
+import { Popover, Tag } from 'antd'
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -28,10 +29,12 @@ const BuiltinMCPServerList: FC = () => {
                 </ServerName>
                 <StatusIndicator>
                   <Button
-                    type="text"
-                    icon={isInstalled ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <PlusOutlined />}
-                    size="small"
-                    onClick={() => {
+                    variant="light"
+                    startContent={
+                      isInstalled ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <PlusOutlined />
+                    }
+                    size="sm"
+                    onPress={() => {
                       if (isInstalled) {
                         return
                       }
@@ -39,7 +42,8 @@ const BuiltinMCPServerList: FC = () => {
                       addMCPServer(server)
                       window.toast.success(t('settings.mcp.addSuccess'))
                     }}
-                    disabled={isInstalled}
+                    isDisabled={isInstalled}
+                    isIconOnly
                   />
                 </StatusIndicator>
               </ServerHeader>
diff --git a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx b/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
index 96bef8bae..98b20df19 100644
--- a/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx
@@ -1,8 +1,9 @@
 import { CheckCircleOutlined, QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'
 import { Center, ColFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setIsBunInstalled, setIsUvInstalled } from '@renderer/store/mcp'
-import { Alert, Button } from 'antd'
+import { Alert } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -84,13 +85,13 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
     const installed = isUvInstalled && isBunInstalled
     return (
       <Button
-        type="primary"
-        variant="filled"
-        shape="circle"
-        icon={installed ? <CheckCircleOutlined /> : <WarningOutlined />}
+        variant="solid"
+        radius="full"
+        startContent={installed ? <CheckCircleOutlined /> : <WarningOutlined />}
         className="nodrag"
-        color={installed ? 'green' : 'danger'}
-        onClick={() => navigate('/settings/mcp/mcp-install')}
+        color={installed ? 'success' : 'danger'}
+        onPress={() => navigate('/settings/mcp/mcp-install')}
+        isIconOnly
       />
     )
   }
@@ -119,11 +120,12 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
               </SettingSubtitle>
               {!isUvInstalled && (
                 <Button
-                  type="primary"
-                  onClick={installUV}
-                  loading={isInstallingUv}
-                  disabled={isInstallingUv}
-                  size="small">
+                  variant="solid"
+                  color="primary"
+                  onPress={installUV}
+                  isLoading={isInstallingUv}
+                  isDisabled={isInstallingUv}
+                  size="sm">
                   {isInstallingUv ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
                 </Button>
               )}
@@ -150,11 +152,12 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
               </SettingSubtitle>
               {!isBunInstalled && (
                 <Button
-                  type="primary"
-                  onClick={installBun}
-                  loading={isInstallingBun}
-                  disabled={isInstallingBun}
-                  size="small">
+                  variant="solid"
+                  color="primary"
+                  onPress={installBun}
+                  isLoading={isInstallingBun}
+                  isDisabled={isInstallingBun}
+                  size="sm">
                   {isInstallingBun ? t('settings.mcp.dependenciesInstalling') : t('settings.mcp.install')}
                 </Button>
               )}
@@ -170,7 +173,7 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
         }
       />
       <Center>
-        <Button type="link" onClick={onHelp} icon={<QuestionCircleOutlined />}>
+        <Button variant="light" onPress={onHelp} startContent={<QuestionCircleOutlined />}>
           {t('settings.mcp.installHelp')}
         </Button>
       </Center>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
index f32f72ea3..56134445b 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServerCard.tsx
@@ -1,4 +1,5 @@
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { DeleteIcon } from '@renderer/components/Icons'
 import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
@@ -6,7 +7,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, Tag, Tooltip, Typography } from 'antd'
+import { Alert, Space, Tag, Tooltip, Typography } from 'antd'
 import { CircleXIcon, Settings2, SquareArrowOutUpRight } from 'lucide-react'
 import type { FC } from 'react'
 import { useCallback } from 'react'
@@ -34,8 +35,7 @@ const McpServerCard: FC<McpServerCardProps> = ({
   onOpenUrl
 }) => {
   const { t } = useTranslation()
-  const handleOpenUrl = (e: React.MouseEvent) => {
-    e.stopPropagation()
+  const handleOpenUrl = () => {
     if (server.providerUrl) {
       onOpenUrl(server.providerUrl)
     }
@@ -62,8 +62,7 @@ const McpServerCard: FC<McpServerCardProps> = ({
         )
       }
 
-      const onClickDetails = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
+      const onClickDetails = () => {
         GeneralPopup.show({ content: <ErrorDetails /> })
       }
       return (
@@ -81,29 +80,30 @@ const McpServerCard: FC<McpServerCardProps> = ({
           action={
             <Space.Compact>
               <Button
-                danger
-                type="text"
-                icon={
+                color="danger"
+                variant="light"
+                startContent={
                   <Tooltip title={t('error.boundary.details')}>
                     <CircleXIcon size={16} />
                   </Tooltip>
                 }
-                size="small"
-                onClick={onClickDetails}
+                size="sm"
+                onPress={onClickDetails}
+                isIconOnly
               />
               <Button
-                danger
-                type="text"
-                icon={
+                color="danger"
+                variant="light"
+                startContent={
                   <Tooltip title={t('common.delete')}>
                     <DeleteIcon size={16} />
                   </Tooltip>
                 }
-                size="small"
-                onClick={(e) => {
-                  e.stopPropagation()
+                size="sm"
+                onPress={() => {
                   onDelete()
                 }}
+                isIconOnly
               />
             </Space.Compact>
           }
@@ -122,12 +122,13 @@ const McpServerCard: FC<McpServerCardProps> = ({
             <ServerNameText ellipsis={{ tooltip: true }}>{server.name}</ServerNameText>
             {server.providerUrl && (
               <Button
-                type="text"
-                size="small"
-                shape="circle"
-                icon={<SquareArrowOutUpRight size={14} />}
-                onClick={handleOpenUrl}
+                variant="light"
+                size="sm"
+                radius="full"
+                startContent={<SquareArrowOutUpRight size={14} />}
+                onPress={handleOpenUrl}
                 data-no-dnd
+                isIconOnly
               />
             )}
           </ServerNameWrapper>
@@ -141,14 +142,23 @@ const McpServerCard: FC<McpServerCardProps> = ({
               data-no-dnd
             />
             <Button
-              type="text"
-              shape="circle"
-              icon={<DeleteIcon size={14} className="lucide-custom" />}
-              danger
-              onClick={onDelete}
-              data-no-dnd
+              size="sm"
+              variant="light"
+              radius="full"
+              startContent={<DeleteIcon size={14} className="lucide-custom" />}
+              color="danger"
+              onPress={onDelete}
+              isIconOnly
+            />
+            <Button
+              size="sm"
+              variant="light"
+              radius="full"
+              startContent={<Settings2 size={14} />}
+              onPress={onEdit}
+              data-no-dnd
+              isIconOnly
             />
-            <Button type="text" shape="circle" icon={<Settings2 size={14} />} onClick={onEdit} data-no-dnd />
           </ToolbarWrapper>
         </ServerHeader>
         <ServerDescription>{server.description}</ServerDescription>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
index b91a79ee8..94d962099 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpServersList.tsx
@@ -1,4 +1,5 @@
 import { Sortable, useDndReorder } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { nanoid } from '@reduxjs/toolkit'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
@@ -8,7 +9,7 @@ import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
 import { formatMcpError } from '@renderer/utils/error'
 import { matchKeywordsInString } from '@renderer/utils/match'
-import { Button, Dropdown, Empty } from 'antd'
+import { Dropdown, Empty } from 'antd'
 import { Plus } from 'lucide-react'
 import type { FC } from 'react'
 import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from 'react'
@@ -229,7 +230,11 @@ const McpServersList: FC = () => {
         </SettingTitle>
         <ButtonGroup>
           <InstallNpxUv mini />
-          <Button icon={<EditIcon size={14} />} type="default" shape="round" onClick={() => EditMcpJsonPopup.show()}>
+          <Button
+            startContent={<EditIcon size={14} />}
+            variant="solid"
+            radius="full"
+            onPress={() => EditMcpJsonPopup.show()}>
             {t('common.edit')}
           </Button>
           <Dropdown
@@ -237,11 +242,11 @@ const McpServersList: FC = () => {
               items: menuItems
             }}
             trigger={['click']}>
-            <Button icon={<Plus size={16} />} type="default" shape="round">
+            <Button startContent={<Plus size={16} />} variant="solid" radius="full">
               {t('common.add')}
             </Button>
           </Dropdown>
-          <Button icon={<RefreshIcon size={14} />} type="default" onClick={onSyncServers} shape="round">
+          <Button startContent={<RefreshIcon size={14} />} variant="solid" onPress={onSyncServers} radius="full">
             {t('settings.mcp.sync.button')}
           </Button>
         </ButtonGroup>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
index 6ed72546c..0b2886fb1 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettings.tsx
@@ -1,4 +1,5 @@
 import { Flex, Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import type { McpError } from '@modelcontextprotocol/sdk/types.js'
 import { DeleteIcon } from '@renderer/components/Icons'
@@ -8,7 +9,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, Tabs } from 'antd'
+import { Badge, 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'
@@ -738,10 +739,12 @@ const McpSettings: React.FC = () => {
               {serverVersion && <VersionBadge count={serverVersion} color="blue" />}
             </Flex>
             <Button
-              danger
-              icon={<DeleteIcon size={14} className="lucide-custom" />}
-              type="text"
-              onClick={() => onDeleteMcpServer(server)}
+              size="sm"
+              color="danger"
+              startContent={<DeleteIcon size={14} className="lucide-custom" />}
+              variant="light"
+              onPress={() => onDeleteMcpServer(server)}
+              isIconOnly
             />
           </Flex>
           <Flex className="items-center gap-4">
@@ -752,12 +755,14 @@ const McpSettings: React.FC = () => {
               onValueChange={onToggleActive}
             />
             <Button
-              type="primary"
-              icon={<SaveIcon size={14} />}
-              onClick={onSave}
-              loading={loading}
-              shape="round"
-              disabled={!isFormChanged || activeTab !== 'settings'}>
+              size="sm"
+              variant="solid"
+              color="primary"
+              startContent={<SaveIcon size={14} />}
+              onPress={onSave}
+              isLoading={loading}
+              radius="full"
+              isDisabled={!isFormChanged || activeTab !== 'settings'}>
               {t('common.save')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
index 0c9679f59..23e39c30a 100644
--- a/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/McpSettingsNavbar.tsx
@@ -1,8 +1,8 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { NavbarRight } from '@renderer/components/app/Navbar'
 import { isLinux, isWin } from '@renderer/config/constant'
 import { useFullscreen } from '@renderer/hooks/useFullscreen'
-import { Button } from 'antd'
 import { Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router'
@@ -17,12 +17,11 @@ export const McpSettingsNavbar = () => {
     <NavbarRight style={{ paddingRight: useFullscreen() ? '12px' : isWin ? 150 : isLinux ? 120 : 12 }}>
       <RowFlex className="items-center gap-[5px]">
         <Button
-          size="small"
-          type="text"
-          onClick={() => navigate('/settings/mcp/npx-search')}
-          icon={<Search size={14} />}
-          className="nodrag"
-          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+          size="sm"
+          variant="light"
+          onPress={() => navigate('/settings/mcp/npx-search')}
+          startContent={<Search size={14} />}
+          className="nodrag h-7 rounded-[20px] text-[13px]">
           {t('settings.mcp.searchNpx')}
         </Button>
         <InstallNpxUv mini />
diff --git a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
index 70187c807..1a7adf68d 100644
--- a/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/NpxSearch.tsx
@@ -1,12 +1,13 @@
 import { CheckOutlined, PlusOutlined } from '@ant-design/icons'
 import { Center, RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { nanoid } from '@reduxjs/toolkit'
 import logo from '@renderer/assets/images/cherry-text-logo.svg'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
 import { getMcpConfigSampleFromReadme } from '@renderer/utils'
-import { Button, Card, Input, Space, Spin, Tag, Typography } from 'antd'
+import { Card, Input, Space, Spin, Tag, Typography } from 'antd'
 import { npxFinder } from 'npx-scope-finder'
 import { type FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -161,12 +162,12 @@ const NpxSearch: FC = () => {
                       v{record.version}
                     </Tag>
                     <Button
-                      type="text"
-                      icon={
+                      variant="light"
+                      startContent={
                         isInstalled ? <CheckOutlined style={{ color: 'var(--color-primary)' }} /> : <PlusOutlined />
                       }
-                      size="small"
-                      onClick={() => {
+                      size="sm"
+                      onPress={() => {
                         if (isInstalled) {
                           return
                         }
@@ -186,6 +187,7 @@ const NpxSearch: FC = () => {
                         addMCPServer(newServer)
                         window.toast.success(t('settings.mcp.addSuccess'))
                       }}
+                      isIconOnly
                     />
                   </Flex>
                 }>
diff --git a/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx b/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
index ea6d6dfe0..fa5e72121 100644
--- a/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/SyncServersPopup.tsx
@@ -1,7 +1,8 @@
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useMCPServers } from '@renderer/hooks/useMCPServers'
 import type { MCPServer } from '@renderer/types'
-import { Button, Form, Input, Modal, Select } from 'antd'
+import { Form, Input, Modal, Select } from 'antd'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -276,10 +277,15 @@ const PopupContainer: React.FC<Props> = ({ resolve, existingServers }) => {
         </ProviderContent>
 
         <ButtonContainer>
-          <Button type="default" onClick={onCancel}>
+          <Button variant="solid" onPress={onCancel}>
             {t('common.cancel')}
           </Button>
-          <Button type="primary" onClick={handleSync} loading={isSyncing} disabled={isSyncDisabled()}>
+          <Button
+            variant="solid"
+            color="primary"
+            onPress={handleSync}
+            isLoading={isSyncing}
+            isDisabled={isSyncDisabled()}>
             {t('settings.mcp.sync.button', 'Sync')}
           </Button>
         </ButtonContainer>
diff --git a/src/renderer/src/pages/settings/MCPSettings/index.tsx b/src/renderer/src/pages/settings/MCPSettings/index.tsx
index 9fe0a1cc6..886db1499 100644
--- a/src/renderer/src/pages/settings/MCPSettings/index.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/index.tsx
@@ -1,7 +1,7 @@
 import { ArrowLeftOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { Button } from 'antd'
 import type { FC } from 'react'
 import { Route, Routes, useLocation } from 'react-router'
 import { Link } from 'react-router-dom'
@@ -26,7 +26,7 @@ const MCPSettings: FC = () => {
       {!isHome && (
         <BackButtonContainer>
           <Link to="/settings/mcp">
-            <Button type="default" icon={<ArrowLeftOutlined />} shape="circle" />
+            <Button variant="solid" startContent={<ArrowLeftOutlined />} radius="full" isIconOnly />
           </Link>
         </BackButtonContainer>
       )}
diff --git a/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx b/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
index c24f65cfb..85b113a26 100644
--- a/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
+++ b/src/renderer/src/pages/settings/MemorySettings/MemorySettings.tsx
@@ -2,6 +2,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { cacheService } from '@data/CacheService'
 import { loggerService } from '@logger'
 import { DeleteIcon, EditIcon, LoadingIcon, RefreshIcon } from '@renderer/components/Icons'
@@ -18,7 +19,7 @@ import {
   setGlobalMemoryEnabled
 } from '@renderer/store/memory'
 import type { MemoryItem } from '@types'
-import { Badge, Button, Dropdown, Empty, Form, Input, Modal, Pagination, Space, Spin } from 'antd'
+import { Badge, 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'
@@ -167,10 +168,16 @@ const EditMemoryModal: React.FC<EditMemoryModalProps> = ({ visible, memory, onCa
         }
       }}
       footer={[
-        <Button key="cancel" size="large" onClick={onCancel}>
+        <Button key="cancel" size="lg" onPress={onCancel}>
           {t('common.cancel')}
         </Button>,
-        <Button key="submit" type="primary" size="large" loading={loading} onClick={() => form.submit()}>
+        <Button
+          key="submit"
+          variant="solid"
+          color="primary"
+          size="lg"
+          isLoading={loading}
+          onPress={() => form.submit()}>
           {t('common.save')}
         </Button>
       ]}>
@@ -591,7 +598,12 @@ const MemorySettings = () => {
           </RowFlex>
           <RowFlex className="items-center gap-2.5">
             <Switch isSelected={globalMemoryEnabled} onValueChange={handleGlobalMemoryToggle} />
-            <Button type="text" icon={<Settings2 size={16} />} onClick={() => setSettingsModalVisible(true)} />
+            <Button
+              variant="light"
+              startContent={<Settings2 size={16} />}
+              onPress={() => setSettingsModalVisible(true)}
+              isIconOnly
+            />
           </RowFlex>
         </RowFlex>
       </SettingGroup>
@@ -638,7 +650,11 @@ const MemorySettings = () => {
               allowClear
               style={{ width: 240 }}
             />
-            <Button type="primary" icon={<PlusIcon size={18} />} onClick={() => setAddMemoryModalVisible(true)}>
+            <Button
+              variant="solid"
+              color="primary"
+              startContent={<PlusIcon size={18} />}
+              onPress={() => setAddMemoryModalVisible(true)}>
               {t('memory.add_memory')}
             </Button>
             <Dropdown
@@ -680,7 +696,7 @@ const MemorySettings = () => {
               }}
               trigger={['click']}
               placement="bottomRight">
-              <Button icon={<MenuIcon size={16} />}>{t('common.more')}</Button>
+              <Button startContent={<MenuIcon size={16} />}>{t('common.more')}</Button>
             </Dropdown>
           </Space>
         </div>
@@ -699,10 +715,11 @@ const MemorySettings = () => {
                     {t('memory.no_memories_description')}
                   </div>
                   <Button
-                    type="primary"
-                    icon={<PlusIcon size={18} />}
-                    onClick={() => setAddMemoryModalVisible(true)}
-                    size="large">
+                    variant="solid"
+                    color="primary"
+                    startContent={<PlusIcon size={18} />}
+                    onPress={() => setAddMemoryModalVisible(true)}
+                    size="lg">
                     {t('memory.add_first_memory')}
                   </Button>
                 </div>
@@ -732,17 +749,18 @@ const MemorySettings = () => {
                           </div>
                           <Space size="small">
                             <Button
-                              type="text"
-                              size="small"
-                              icon={<EditIcon size={14} />}
-                              onClick={() => handleEditMemory(memory)}
+                              variant="light"
+                              size="sm"
+                              startContent={<EditIcon size={14} />}
+                              onPress={() => handleEditMemory(memory)}
+                              isIconOnly
                             />
                             <Button
-                              type="text"
-                              size="small"
-                              danger
-                              icon={<DeleteIcon size={14} className="lucide-custom" />}
-                              onClick={() => {
+                              variant="light"
+                              size="sm"
+                              color="danger"
+                              startContent={<DeleteIcon size={14} className="lucide-custom" />}
+                              onPress={() => {
                                 window.modal.confirm({
                                   centered: true,
                                   title: t('memory.delete_confirm'),
@@ -752,6 +770,7 @@ const MemorySettings = () => {
                                   cancelText: t('common.cancel')
                                 })
                               }}
+                              isIconOnly
                             />
                           </Space>
                         </div>
diff --git a/src/renderer/src/pages/settings/MemorySettings/UserSelector.tsx b/src/renderer/src/pages/settings/MemorySettings/UserSelector.tsx
index e41a16e86..4a574b0b9 100644
--- a/src/renderer/src/pages/settings/MemorySettings/UserSelector.tsx
+++ b/src/renderer/src/pages/settings/MemorySettings/UserSelector.tsx
@@ -1,5 +1,6 @@
-import { RowFlex } from '@cherrystudio/ui'
-import { Avatar, Button, Select, Space, Tooltip } from 'antd'
+import { Flex, RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
+import { Avatar, Select, Tooltip } from 'antd'
 import { UserRoundPlus } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -51,12 +52,12 @@ const UserSelector: React.FC<UserSelectorProps> = ({ currentUser, uniqueUsers, o
   }, [renderLabel, t, uniqueUsers])
 
   return (
-    <Space.Compact>
+    <Flex className="gap-2">
       <Select value={currentUser} onChange={onUserSwitch} style={{ width: 200 }} options={options} />
       <Tooltip title={t('memory.add_new_user')}>
-        <Button type="default" onClick={onAddUser} icon={<UserRoundPlus size={16} />} />
+        <Button size="sm" variant="solid" onPress={onAddUser} startContent={<UserRoundPlus size={16} />} isIconOnly />
       </Tooltip>
-    </Space.Compact>
+    </Flex>
   )
 }
 
diff --git a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
index 42cb76863..82e3771ab 100644
--- a/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/DefaultAssistantSettings.tsx
@@ -2,6 +2,7 @@ import { CloseCircleFilled, QuestionCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { ResetIcon } from '@renderer/components/Icons'
 import { TopView } from '@renderer/components/TopView'
@@ -10,7 +11,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, Tooltip } from 'antd'
+import { 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'
@@ -115,7 +116,7 @@ const AssistantSettings: FC = () => {
       <RowFlex className="items-center gap-2">
         <Popover content={<EmojiPicker onEmojiClick={handleEmojiSelect} />} arrow trigger="click">
           <EmojiButtonWrapper>
-            <Button style={{ fontSize: 20, padding: '4px', minWidth: '30px', height: '30px' }}>{emoji}</Button>
+            <Button className="h-[30px] min-w-[30px] p-1 text-xl">{emoji}</Button>
             {emoji && (
               <CloseCircleFilled
                 className="delete-icon"
@@ -160,7 +161,7 @@ const AssistantSettings: FC = () => {
         }}>
         {t('settings.assistant.model_params')}
         <Tooltip title={t('common.reset')} mouseLeaveDelay={0}>
-          <Button type="text" onClick={onReset} icon={<ResetIcon size={16} />} />
+          <Button variant="light" onPress={onReset} startContent={<ResetIcon size={16} />} isIconOnly />
         </Tooltip>
       </SettingSubtitle>
       <SettingRow>
diff --git a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
index 102490470..85682575d 100644
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@@ -1,5 +1,6 @@
 import { RedoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import ModelSelector from '@renderer/components/ModelSelector'
 import { InfoTooltip } from '@renderer/components/TooltipIcons'
@@ -10,7 +11,7 @@ import { useProviders } from '@renderer/hooks/useProvider'
 import { getModelUniqId, hasModel } from '@renderer/services/ModelService'
 import type { Model } from '@renderer/types'
 import { TRANSLATE_PROMPT } from '@shared/config/prompts'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { find } from 'lodash'
 import { Languages, MessageSquareMore, Rocket, Settings2 } from 'lucide-react'
 import type { FC } from 'react'
@@ -72,7 +73,12 @@ const ModelSettings: FC = () => {
             onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
             placeholder={t('settings.models.empty')}
           />
-          <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={DefaultAssistantSettings.show} />
+          <Button
+            startContent={<Settings2 size={16} />}
+            className="ml-2"
+            onPress={DefaultAssistantSettings.show}
+            isIconOnly
+          />
         </RowFlex>
         <SettingDescription>{t('settings.models.default_assistant_model_description')}</SettingDescription>
       </SettingGroup>
@@ -94,7 +100,12 @@ const ModelSettings: FC = () => {
             onChange={(value) => setQuickModel(find(allModels, JSON.parse(value)) as Model)}
             placeholder={t('settings.models.empty')}
           />
-          <Button icon={<Settings2 size={16} />} style={{ marginLeft: 8 }} onClick={TopicNamingModalPopup.show} />
+          <Button
+            startContent={<Settings2 size={16} />}
+            className="ml-2"
+            onPress={TopicNamingModalPopup.show}
+            isIconOnly
+          />
         </RowFlex>
         <SettingDescription>{t('settings.models.quick_model.description')}</SettingDescription>
       </SettingGroup>
@@ -116,13 +127,14 @@ const ModelSettings: FC = () => {
             placeholder={t('settings.models.empty')}
           />
           <Button
-            icon={<Settings2 size={16} />}
-            style={{ marginLeft: 8 }}
-            onClick={() => TranslateSettingsPopup.show()}
+            startContent={<Settings2 size={16} />}
+            isIconOnly
+            className="ml-2"
+            onPress={() => TranslateSettingsPopup.show()}
           />
           {translateModelPrompt !== TRANSLATE_PROMPT && (
             <Tooltip title={t('common.reset')}>
-              <Button icon={<RedoOutlined />} style={{ marginLeft: 8 }} onClick={onResetTranslatePrompt}></Button>
+              <Button startContent={<RedoOutlined />} className="ml-2" onPress={onResetTranslatePrompt} isIconOnly />
             </Tooltip>
           )}
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
index 7c3a517bf..e1d6c11a7 100644
--- a/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/QuickModelPopup.tsx
@@ -1,9 +1,10 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
 import { ColFlex, Flex, RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { ResetIcon } from '@renderer/components/Icons'
-import { Button, Divider, Input, Modal, Popover } from 'antd'
+import { Divider, Input, Modal, Popover } from 'antd'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -67,7 +68,9 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
             <Popover title={t('agents.add.prompt.variables.tip.title')} content={promptVarsContent}>
               <QuestionCircleOutlined size={14} style={{ color: 'var(--color-text-2)' }} />
             </Popover>
-            {topicNamingPrompt && <Button icon={<ResetIcon size={14} />} onClick={handleReset} type="text" />}
+            {topicNamingPrompt && (
+              <Button startContent={<ResetIcon size={14} />} onPress={handleReset} variant="light" isIconOnly />
+            )}
           </Flex>
           <Input.TextArea
             autoSize={{ minRows: 3, maxRows: 10 }}
diff --git a/src/renderer/src/pages/settings/NotesSettings.tsx b/src/renderer/src/pages/settings/NotesSettings.tsx
index f652a4c04..d62627568 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 { Button } 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 type { EditorView } from '@renderer/types'
-import { Button, Input, Slider } from 'antd'
+import { Input, Slider } from 'antd'
 import { FolderOpen } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -109,19 +110,19 @@ const NotesSettings: FC = () => {
               readOnly
             />
             <Button
-              type="default"
-              icon={<FolderOpen size={16} />}
-              onClick={handleSelectWorkDirectory}
-              loading={isSelecting}
-              style={{ marginLeft: 8 }}>
+              variant="solid"
+              startContent={<FolderOpen size={16} />}
+              onPress={handleSelectWorkDirectory}
+              isLoading={isSelecting}
+              className="ml-2">
               {t('notes.settings.data.select')}
             </Button>
           </PathInputContainer>
           <ActionButtons>
-            <Button type="primary" onClick={handleApplyPath} disabled={!isPathChanged}>
+            <Button color="primary" onPress={handleApplyPath} isDisabled={!isPathChanged}>
               {t('notes.settings.data.apply')}
             </Button>
-            <Button onClick={handleResetToDefault}>{t('notes.settings.data.reset_to_default')}</Button>
+            <Button onPress={handleResetToDefault}>{t('notes.settings.data.reset_to_default')}</Button>
           </ActionButtons>
         </WorkDirectorySection>
         <SettingRow>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
index 46ee7e0a7..9ceb7f6df 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/AnthropicSettings.tsx
@@ -1,6 +1,7 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
-import { Alert, Button, Input, Modal } from 'antd'
+import { Alert, Input, Modal } from 'antd'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -99,7 +100,7 @@ const AnthropicSettings = () => {
               type="success"
               message={t('settings.provider.anthropic.authenticated')}
               action={
-                <Button type="primary" onClick={handleLogout}>
+                <Button color="primary" onPress={handleLogout}>
                   {t('settings.provider.anthropic.logout')}
                 </Button>
               }
@@ -142,7 +143,7 @@ const AnthropicSettings = () => {
               message={t('settings.provider.anthropic.description')}
               description={t('settings.provider.anthropic.description_detail')}
               action={
-                <Button type="primary" loading={loading} onClick={handleRedirectOAuth}>
+                <Button color="primary" isLoading={loading} onPress={handleRedirectOAuth}>
                   {t('settings.provider.anthropic.start_auth')}
                 </Button>
               }
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
index c56a957cb..11a355d4f 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelEditContent.tsx
@@ -1,5 +1,6 @@
 import { Flex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import CopyIcon from '@renderer/components/Icons/CopyIcon'
 import {
   EmbeddingTag,
@@ -24,7 +25,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, Modal, Select, Tooltip } from 'antd'
+import { Divider, Form, Input, InputNumber, Modal, Select, Tooltip } from 'antd'
 import { cloneDeep } from 'lodash'
 import { ChevronDown, ChevronUp, RotateCcw, SaveIcon } from 'lucide-react'
 import type { FC } from 'react'
@@ -191,7 +192,13 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
 
           {hasUserModified && (
             <Tooltip title={t('common.reset')}>
-              <Button size="small" icon={<RotateCcw size={14} />} onClick={handleResetTypes} type="text" />
+              <Button
+                size="sm"
+                startContent={<RotateCcw size={14} />}
+                onPress={handleResetTypes}
+                variant="light"
+                isIconOnly
+              />
             </Tooltip>
           )}
         </TypeTitle>
@@ -320,14 +327,13 @@ const ModelEditContent: FC<ModelEditContentProps & ModalProps> = ({ provider, mo
           <Flex className="relative items-center justify-between">
             <Button
               color="default"
-              variant="filled"
-              icon={showMoreSettings ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-              iconPosition="end"
-              onClick={() => setShowMoreSettings(!showMoreSettings)}
+              variant="solid"
+              endContent={showMoreSettings ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              onPress={() => setShowMoreSettings(!showMoreSettings)}
               style={{ color: 'var(--color-text-3)' }}>
               {t('settings.moresetting.label')}
             </Button>
-            <Button type="primary" htmlType="submit" icon={<SaveIcon size={16} />}>
+            <Button color="primary" type="submit" startContent={<SaveIcon size={16} />}>
               {t('common.save')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
index 4bc986c0f..334a416bc 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/EditModelPopup/ModelTypeSelector.tsx
@@ -1,7 +1,8 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import type { ModelCapability, ModelType } from '@renderer/types'
 import { getDifference, uniqueObjectArray } from '@renderer/utils'
-import { Button, Checkbox } from 'antd'
+import { Checkbox } from 'antd'
 import type { FC } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -172,7 +173,7 @@ const ModelTypeSelector: FC<ModelTypeSelectorProps> = ({
           ]}
         />
         {hasUserModified && (
-          <Button size="small" onClick={handleResetTypes}>
+          <Button size="sm" onPress={handleResetTypes}>
             {t('common.reset')}
           </Button>
         )}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx b/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
index 826bc1ea7..c40e8bbe6 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/GithubCopilotSettings.tsx
@@ -1,8 +1,9 @@
 import { CheckCircleOutlined, CopyOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { useCopilot } from '@renderer/hooks/useCopilot'
 import { useProvider } from '@renderer/hooks/useProvider'
-import { Alert, Button, Input, Slider, Steps, Tooltip, Typography } from 'antd'
+import { Alert, Input, Slider, Steps, Tooltip, Typography } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -214,7 +215,7 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
                     )}
                     <span>{username || t('settings.provider.copilot.auth_success_title')}</span>
                   </div>
-                  <Button type="primary" danger size="small" loading={loading} onClick={handleLogout}>
+                  <Button color="danger" size="sm" isLoading={loading} onPress={handleLogout}>
                     {t('settings.provider.copilot.logout')}
                   </Button>
                 </div>
@@ -249,7 +250,7 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
                       readOnly
                       style={{ fontFamily: 'monospace', fontSize: '14px', fontWeight: 'bold', marginRight: 8 }}
                     />
-                    <Button icon={<CopyOutlined />} onClick={handleCopyUserCode}>
+                    <Button startContent={<CopyOutlined />} onPress={handleCopyUserCode}>
                       {t('common.copy')}
                     </Button>
                   </SettingRow>
@@ -266,7 +267,7 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
                       <StepDesc>{t('settings.provider.copilot.step_authorize_detail')}</StepDesc>
                     </div>
                   </StepHeader>
-                  <Button type="primary" onClick={handleOpenVerificationPage} style={{ marginBottom: 8 }}>
+                  <Button color="primary" onPress={handleOpenVerificationPage} style={{ marginBottom: 8 }}>
                     {t('settings.provider.copilot.open_verification_page')}
                   </Button>
                   {verificationUri && (
@@ -290,10 +291,10 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
                   <Tooltip
                     title={!verificationPageOpened ? t('settings.provider.copilot.open_verification_first') : ''}>
                     <Button
-                      type="primary"
-                      loading={loading}
-                      disabled={!verificationPageOpened}
-                      onClick={handleGetToken}>
+                      color="primary"
+                      isLoading={loading}
+                      isDisabled={!verificationPageOpened}
+                      onPress={handleGetToken}>
                       {t('settings.provider.copilot.connect')}
                     </Button>
                   </Tooltip>
@@ -311,7 +312,7 @@ const GithubCopilotSettings: FC<GithubCopilotSettingsProps> = ({ providerId }) =
               message={t('settings.provider.copilot.description')}
               description={t('settings.provider.copilot.description_detail')}
               action={
-                <Button type="primary" loading={loading} onClick={handleGetDeviceCode}>
+                <Button color="primary" isLoading={loading} onPress={handleGetDeviceCode}>
                   {t('settings.provider.copilot.start_auth')}
                 </Button>
               }
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
index 1e0ccc8f6..a1889788d 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/AddModelPopup.tsx
@@ -1,11 +1,12 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { isNotSupportedTextDelta } from '@renderer/config/models'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { Model, Provider } from '@renderer/types'
 import { getDefaultGroupName } from '@renderer/utils'
 import type { FormProps } from 'antd'
-import { Button, Form, Input, Modal } from 'antd'
+import { Form, Input, Modal } from 'antd'
 import { find } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -126,7 +127,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve }) => {
         </Form.Item>
         <Form.Item className="mb-2 text-center">
           <Flex className="relative items-center justify-end">
-            <Button type="primary" htmlType="submit" size="middle">
+            <Button color="primary" type="submit" size="md">
               {t('settings.models.add.add_model')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
index 77a609850..7b23d3a9b 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsList.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import ExpandableText from '@renderer/components/ExpandableText'
 import ModelIdWithTags from '@renderer/components/ModelIdWithTags'
 import CustomTag from '@renderer/components/Tags/CustomTag'
@@ -8,7 +9,7 @@ import { isNewApiProvider } from '@renderer/config/providers'
 import FileItem from '@renderer/pages/files/FileItem'
 import NewApiBatchAddModelPopup from '@renderer/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup'
 import type { Model, Provider } from '@renderer/types'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { Avatar } from 'antd'
 import { ChevronRight, Minus, Plus } from 'lucide-react'
 import React, { memo, useCallback, useMemo, useState } from 'react'
@@ -120,10 +121,10 @@ const ManageModelsList: React.FC<ManageModelsListProps> = ({ modelGroups, provid
           mouseLeaveDelay={0}
           placement="top">
           <Button
-            type="text"
-            icon={isAllInProvider ? <Minus size={16} /> : <Plus size={16} />}
-            onClick={(e) => {
-              e.stopPropagation()
+            variant="light"
+            startContent={isAllInProvider ? <Minus size={16} /> : <Plus size={16} />}
+            isIconOnly
+            onPress={() => {
               handleGroupAction()
             }}
           />
@@ -206,9 +207,14 @@ const ModelListItem: React.FC<ModelListItemProps> = memo(({ model, provider, onA
           extra: model.description && <ExpandableText text={model.description} />,
           ext: '.model',
           actions: isAdded ? (
-            <Button type="text" onClick={() => onRemoveModel(model)} icon={<Minus size={16} />} />
+            <Button
+              variant="light"
+              onPress={() => onRemoveModel(model)}
+              startContent={<Minus size={16} />}
+              isIconOnly
+            />
           ) : (
-            <Button type="text" onClick={() => onAddModel(model)} icon={<Plus size={16} />} />
+            <Button variant="light" onPress={() => onAddModel(model)} startContent={<Plus size={16} />} isIconOnly />
           )
         }}
       />
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
index 49c3e6f2c..b4ec3d5f2 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ManageModelsPopup.tsx
@@ -1,5 +1,6 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { LoadingIcon } from '@renderer/components/Icons'
 import { TopView } from '@renderer/components/TopView'
@@ -22,7 +23,7 @@ import { fetchModels } from '@renderer/services/ApiService'
 import type { Model, Provider } from '@renderer/types'
 import { filterModelsByKeywords, getDefaultGroupName, getFancyProviderName } from '@renderer/utils'
 import { isFreeModel } from '@renderer/utils/model'
-import { Button, Empty, Modal, Spin, Tabs, Tooltip } from 'antd'
+import { Empty, Modal, Spin, Tabs, Tooltip } from 'antd'
 import Input from 'antd/es/input/Input'
 import { groupBy, isEmpty, uniqBy } from 'lodash'
 import { debounce } from 'lodash'
@@ -252,23 +253,24 @@ const PopupContainer: React.FC<Props> = ({ providerId, resolve }) => {
           }
           mouseLeaveDelay={0}>
           <Button
-            type="default"
-            icon={isAllFilteredInProvider ? <ListMinus size={18} /> : <ListPlus size={18} />}
-            size="large"
-            onClick={(e) => {
-              e.stopPropagation()
+            variant="ghost"
+            startContent={isAllFilteredInProvider ? <ListMinus size={18} /> : <ListPlus size={18} />}
+            isIconOnly
+            size="lg"
+            onPress={() => {
               isAllFilteredInProvider ? onRemoveAll() : onAddAll()
             }}
-            disabled={loadingModels || list.length === 0}
+            isDisabled={loadingModels || list.length === 0}
           />
         </Tooltip>
         <Tooltip title={t('settings.models.manage.refetch_list')} mouseLeaveDelay={0}>
           <Button
-            type="default"
-            icon={<RefreshCcw size={16} />}
-            size="large"
-            onClick={() => loadModels(provider)}
-            disabled={loadingModels}
+            variant="ghost"
+            startContent={<RefreshCcw size={16} />}
+            isIconOnly
+            size="lg"
+            onPress={() => loadModels(provider)}
+            isDisabled={loadingModels}
           />
         </Tooltip>
       </RowFlex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
index 8d7ba0243..7923a9955 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelList.tsx
@@ -1,5 +1,6 @@
 import { ColFlex, RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import CollapsibleSearchBar from '@renderer/components/CollapsibleSearchBar'
 import { LoadingIcon, StreamlineGoodHealthAndWellBeing } from '@renderer/components/Icons'
 import CustomTag from '@renderer/components/Tags/CustomTag'
@@ -13,7 +14,7 @@ import ManageModelsPopup from '@renderer/pages/settings/ProviderSettings/ModelLi
 import NewApiAddModelPopup from '@renderer/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup'
 import type { Model } from '@renderer/types'
 import { filterModelsByKeywords } from '@renderer/utils'
-import { Button, Spin, Tooltip } from 'antd'
+import { Spin, Tooltip } from 'antd'
 import { groupBy, isEmpty, sortBy, toPairs } from 'lodash'
 import { ListCheck, Plus } from 'lucide-react'
 import React, { memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
@@ -116,9 +117,10 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
           <RowFlex>
             <Tooltip title={t('settings.models.check.button_caption')} mouseLeaveDelay={0}>
               <Button
-                type="text"
-                onClick={runHealthCheck}
-                icon={<StreamlineGoodHealthAndWellBeing size={16} isActive={isHealthChecking} />}
+                variant="light"
+                onPress={runHealthCheck}
+                startContent={<StreamlineGoodHealthAndWellBeing size={16} isActive={isHealthChecking} />}
+                isIconOnly
               />
             </Tooltip>
           </RowFlex>
@@ -165,10 +167,14 @@ const ModelList: React.FC<ModelListProps> = ({ providerId }) => {
         )}
       </Flex>
       <Flex className="mt-3 gap-2.5">
-        <Button type="primary" onClick={onManageModel} icon={<ListCheck size={16} />} disabled={isHealthChecking}>
+        <Button
+          color="primary"
+          onPress={onManageModel}
+          startContent={<ListCheck fill="currentColor" size={16} />}
+          isDisabled={isHealthChecking}>
           {t('button.manage')}
         </Button>
-        <Button type="default" onClick={onAddModel} icon={<Plus size={16} />} disabled={isHealthChecking}>
+        <Button variant="solid" onPress={onAddModel} startContent={<Plus size={16} />} isDisabled={isHealthChecking}>
           {t('button.add')}
         </Button>
       </Flex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
index 25077f722..0bde50f11 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListGroup.tsx
@@ -1,9 +1,10 @@
 import { Flex } from '@cherrystudio/ui'
 import { CustomCollapse } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DynamicVirtualList, type DynamicVirtualListRef } from '@renderer/components/VirtualList'
 import type { Model } from '@renderer/types'
 import type { ModelWithStatus } from '@renderer/types/healthCheck'
-import { Button, Tooltip } from 'antd'
+import { Tooltip } from 'antd'
 import { Minus } from 'lucide-react'
 import React, { memo, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -62,14 +63,12 @@ const ModelListGroup: React.FC<ModelListGroupProps> = ({
           startContent: (
             <Tooltip title={t('settings.models.manage.remove_whole_group')} mouseLeaveDelay={0}>
               <Button
-                type="text"
+                variant="light"
                 className="toolbar-item"
-                icon={<Minus size={14} />}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  onRemoveGroup()
-                }}
-                disabled={disabled}
+                startContent={<Minus size={14} />}
+                onPress={onRemoveGroup}
+                isDisabled={disabled}
+                isIconOnly
               />
             </Tooltip>
           ),
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
index bf909e054..b60f9d50c 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/ModelListItem.tsx
@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { FreeTrialModelTag } from '@renderer/components/FreeTrialModelTag'
 import { type HealthResult, HealthStatusIndicator } from '@renderer/components/HealthStatusIndicator'
 import ModelIdWithTags from '@renderer/components/ModelIdWithTags'
@@ -6,7 +7,7 @@ import { getModelLogo } from '@renderer/config/models'
 import type { Model } from '@renderer/types'
 import type { ModelWithStatus } from '@renderer/types/healthCheck'
 import { maskApiKey } from '@renderer/utils/api'
-import { Avatar, Button, Tooltip } from 'antd'
+import { Avatar, Tooltip } from 'antd'
 import { Bolt, Minus } from 'lucide-react'
 import React, { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -53,10 +54,22 @@ const ModelListItem: React.FC<ModelListItemProps> = ({ ref, model, modelStatus,
         <HealthStatusIndicator results={healthResults} loading={isChecking} showLatency />
         <RowFlex className="items-center">
           <Tooltip title={t('models.edit')} mouseLeaveDelay={0}>
-            <Button type="text" onClick={() => onEdit(model)} disabled={disabled} icon={<Bolt size={14} />} />
+            <Button
+              variant="light"
+              onPress={() => onEdit(model)}
+              isDisabled={disabled}
+              startContent={<Bolt size={14} />}
+              isIconOnly
+            />
           </Tooltip>
           <Tooltip title={t('settings.models.manage.remove_model')} mouseLeaveDelay={0}>
-            <Button type="text" onClick={() => onRemove(model)} disabled={disabled} icon={<Minus size={14} />} />
+            <Button
+              variant="light"
+              onPress={() => onRemove(model)}
+              isDisabled={disabled}
+              startContent={<Minus size={14} />}
+              isIconOnly
+            />
           </Tooltip>
         </RowFlex>
       </RowFlex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
index 48e1ad308..1d6ece7f4 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiAddModelPopup.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { endpointTypeOptions } from '@renderer/config/endpointTypes'
 import { isNotSupportedTextDelta } from '@renderer/config/models'
@@ -8,7 +9,7 @@ import { useProvider } from '@renderer/hooks/useProvider'
 import type { EndpointType, Model, Provider } from '@renderer/types'
 import { getDefaultGroupName } from '@renderer/utils'
 import type { FormProps } from 'antd'
-import { Button, Form, Input, Modal, Select } from 'antd'
+import { Form, Input, Modal, Select } from 'antd'
 import { find } from 'lodash'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -158,7 +159,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve, model, endp
         </Form.Item>
         <Form.Item className="mb-2 text-center">
           <Flex className="relative items-center justify-end">
-            <Button type="primary" htmlType="submit" size="middle">
+            <Button color="primary" type="submit" size="md">
               {t('settings.models.add.add_model')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
index 80657f904..27665b16d 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ModelList/NewApiBatchAddModelPopup.tsx
@@ -1,4 +1,5 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { endpointTypeOptions } from '@renderer/config/endpointTypes'
 import { isNotSupportedTextDelta } from '@renderer/config/models'
@@ -6,7 +7,7 @@ import { useDynamicLabelWidth } from '@renderer/hooks/useDynamicLabelWidth'
 import { useProvider } from '@renderer/hooks/useProvider'
 import type { EndpointType, Model, Provider } from '@renderer/types'
 import type { FormProps } from 'antd'
-import { Button, Form, Modal, Select } from 'antd'
+import { Form, Modal, Select } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -97,7 +98,7 @@ const PopupContainer: React.FC<Props> = ({ title, provider, resolve, batchModels
         </Form.Item>
         <Form.Item className="mb-2 text-center">
           <Flex className="relative items-center justify-end">
-            <Button type="primary" htmlType="submit" size="middle">
+            <Button color="primary" type="submit" size="md">
               {t('settings.models.add.add_model')}
             </Button>
           </Flex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
index c57d8db93..0e1286405 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderList.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@cherrystudio/ui'
 import type { DropResult } from '@hello-pangea/dnd'
 import { loggerService } from '@logger'
 import {
@@ -14,7 +15,7 @@ import type { Provider, ProviderType } from '@renderer/types'
 import { isSystemProvider } from '@renderer/types'
 import { getFancyProviderName, matchKeywordsInModel, matchKeywordsInProvider, uuid } from '@renderer/utils'
 import type { MenuProps } from 'antd'
-import { Button, Dropdown, Input, Tag } from 'antd'
+import { Dropdown, Input, Tag } from 'antd'
 import { GripVertical, PlusIcon, Search, UserPen } from 'lucide-react'
 import type { FC } from 'react'
 import { startTransition, useCallback, useEffect, useRef, useState } from 'react'
@@ -367,10 +368,11 @@ const ProviderList: FC = () => {
         </DraggableVirtualList>
         <AddButtonWrapper>
           <Button
+            size="sm"
             style={{ width: '100%', borderRadius: 'var(--list-item-border-radius)' }}
-            icon={<PlusIcon size={16} />}
-            onClick={onAddProvider}
-            disabled={dragging}>
+            startContent={<PlusIcon size={16} />}
+            onPress={onAddProvider}
+            isDisabled={dragging}>
             {t('button.add')}
           </Button>
         </AddButtonWrapper>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
index 82b2e8072..ddd72bb16 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderOAuth.tsx
@@ -1,4 +1,5 @@
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import AI302ProviderLogo from '@renderer/assets/images/providers/302ai.webp'
 import AiHubMixProviderLogo from '@renderer/assets/images/providers/aihubmix.webp'
 import AiOnlyProviderLogo from '@renderer/assets/images/providers/aiOnly.webp'
@@ -10,7 +11,6 @@ import { PROVIDER_URLS } from '@renderer/config/providers'
 import { useProvider } from '@renderer/hooks/useProvider'
 import { getProviderLabel } from '@renderer/i18n/label'
 import { providerBills, providerCharge } from '@renderer/utils/oauth'
-import { Button } from 'antd'
 import { isEmpty } from 'lodash'
 import { CircleDollarSign, ReceiptText } from 'lucide-react'
 import type { FC } from 'react'
@@ -53,10 +53,13 @@ const ProviderOAuth: FC<Props> = ({ providerId }) => {
         </OAuthButton>
       ) : (
         <RowFlex className="gap-2.5">
-          <Button shape="round" icon={<CircleDollarSign size={16} />} onClick={() => providerCharge(provider.id)}>
+          <Button
+            radius="full"
+            startContent={<CircleDollarSign size={16} />}
+            onPress={() => providerCharge(provider.id)}>
             {t('settings.provider.charge')}
           </Button>
-          <Button shape="round" icon={<ReceiptText size={16} />} onClick={() => providerBills(provider.id)}>
+          <Button radius="full" startContent={<ReceiptText size={16} />} onPress={() => providerBills(provider.id)}>
             {t('settings.provider.bills')}
           </Button>
         </RowFlex>
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index 56fff877d..9a0dd32e4 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -1,6 +1,7 @@
 import { RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import OpenAIAlert from '@renderer/components/Alert/OpenAIAlert'
 import { LoadingIcon } from '@renderer/components/Icons'
 import { ApiKeyListPopup } from '@renderer/components/Popups/ApiKeyListPopup'
@@ -27,7 +28,7 @@ import {
   isOpenAIProvider
 } from '@renderer/utils'
 import { formatErrorMessage } from '@renderer/utils/error'
-import { Button, Divider, Input, Select, Space, Tooltip } from 'antd'
+import { 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'
@@ -258,16 +259,17 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
           <ProviderName>{fancyProviderName}</ProviderName>
           {officialWebsite && (
             <Link target="_blank" href={providerConfig.websites.official} style={{ display: 'flex' }}>
-              <Button type="text" size="small" icon={<SquareArrowOutUpRight size={14} />} />
+              <Button variant="light" size="sm" startContent={<SquareArrowOutUpRight size={14} />} isIconOnly />
             </Link>
           )}
           {!isSystemProvider(provider) && (
             <Tooltip title={t('settings.provider.api.options.label')}>
               <Button
-                type="text"
-                icon={<Bolt size={14} />}
-                size="small"
-                onClick={() => ApiOptionsSettingsPopup.show({ providerId: provider.id })}
+                variant="light"
+                startContent={<Bolt size={14} />}
+                isIconOnly
+                size="sm"
+                onPress={() => ApiOptionsSettingsPopup.show({ providerId: provider.id })}
               />
             </Tooltip>
           )}
@@ -314,7 +316,7 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
             {t('settings.provider.api_key.label')}
             {provider.id !== 'copilot' && (
               <Tooltip title={t('settings.provider.api.key.list.open')} mouseEnterDelay={0.5}>
-                <Button type="text" onClick={openApiKeyList} icon={<Settings2 size={16} />} />
+                <Button variant="light" onPress={openApiKeyList} startContent={<Settings2 size={16} />} isIconOnly />
               </Tooltip>
             )}
           </SettingSubtitle>
@@ -329,17 +331,20 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
               suffix={renderStatusIndicator()}
             />
             <Button
-              type={isApiKeyConnectable ? 'primary' : 'default'}
-              ghost={isApiKeyConnectable}
-              onClick={onCheckApi}
-              disabled={!apiHost || apiKeyConnectivity.checking}>
-              {apiKeyConnectivity.checking ? (
-                <LoadingIcon />
-              ) : apiKeyConnectivity.status === 'success' ? (
-                <Check size={16} className="lucide-custom" />
-              ) : (
-                t('settings.provider.check')
-              )}
+              color={isApiKeyConnectable ? 'primary' : undefined}
+              variant={isApiKeyConnectable ? 'ghost' : undefined}
+              onPress={onCheckApi}
+              startContent={
+                apiKeyConnectivity.checking ? (
+                  <LoadingIcon />
+                ) : apiKeyConnectivity.status === HealthStatus.SUCCESS ? (
+                  <Check size={16} className="lucide-custom" />
+                ) : undefined
+              }
+              isDisabled={!apiHost || apiKeyConnectivity.checking}>
+              {!apiKeyConnectivity.checking &&
+                !(apiKeyConnectivity.status === HealthStatus.SUCCESS) &&
+                t('settings.provider.check')}
             </Button>
           </Space.Compact>
           <SettingHelpTextRow style={{ justifyContent: 'space-between' }}>
@@ -357,9 +362,10 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
               <SettingSubtitle style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 {t('settings.provider.api_host')}
                 <Button
-                  type="text"
-                  onClick={() => CustomHeaderPopup.show({ provider })}
-                  icon={<Settings2 size={16} />}
+                  variant="light"
+                  onPress={() => CustomHeaderPopup.show({ provider })}
+                  startContent={<Settings2 size={16} />}
+                  isIconOnly
                 />
               </SettingSubtitle>
               <Space.Compact style={{ width: '100%', marginTop: 5 }}>
@@ -370,7 +376,7 @@ const ProviderSetting: FC<Props> = ({ providerId }) => {
                   onBlur={onUpdateApiHost}
                 />
                 {!isEmpty(configedApiHost) && apiHost !== configedApiHost && (
-                  <Button danger onClick={onReset}>
+                  <Button color="danger" onPress={onReset}>
                     {t('settings.provider.api.url.reset')}
                   </Button>
                 )}
diff --git a/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx b/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
index 41da0d84e..52861f52a 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/UrlSchemaInfoPopup.tsx
@@ -1,9 +1,10 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import { useAllProviders } from '@renderer/hooks/useProvider'
 import type { Provider, ProviderType } from '@renderer/types'
 import { getFancyProviderName, maskApiKey } from '@renderer/utils'
-import { Button, Descriptions, Modal } from 'antd'
+import { Descriptions, Modal } from 'antd'
 import { Eye, EyeOff } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -112,16 +113,17 @@ const PopupContainer = ({ id, apiKey: newApiKey, baseUrl, type, name, resolve }:
             <Flex className="justify-between">
               {showFullKey ? newApiKey : maskApiKey(newApiKey)}
               <Button
-                type="link"
-                size="small"
-                icon={
+                variant="light"
+                size="sm"
+                startContent={
                   showFullKey ? (
                     <Eye size={16} color="var(--color-text-3)" />
                   ) : (
                     <EyeOff size={16} color="var(--color-text-3)" />
                   )
                 }
-                onClick={() => setShowFullKey((prev) => !prev)}
+                onPress={() => setShowFullKey((prev) => !prev)}
+                isIconOnly
               />
             </Flex>
           </Descriptions.Item>
diff --git a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
index 2e00f7f74..f4c4461f4 100644
--- a/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/QuickAssistantSettings.tsx
@@ -1,6 +1,7 @@
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
 import { useTheme } from '@renderer/context/ThemeProvider'
@@ -9,7 +10,7 @@ import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setQuickAssistantId } from '@renderer/store/llm'
 import { matchKeywordsInString } from '@renderer/utils'
 import HomeWindow from '@renderer/windows/mini/home/HomeWindow'
-import { Button, Select, Tooltip } from 'antd'
+import { Select, Tooltip } from 'antd'
 import type { FC } from 'react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -156,16 +157,16 @@ const QuickAssistantSettings: FC = () => {
               )}
               <RowFlex className="items-center gap-0">
                 <StyledButton
-                  type={quickAssistantId ? 'primary' : 'default'}
-                  onClick={() => {
+                  color={quickAssistantId ? 'primary' : 'default'}
+                  onPress={() => {
                     dispatch(setQuickAssistantId(defaultAssistant.id))
                   }}
                   selected={!!quickAssistantId}>
                   {t('settings.models.use_assistant')}
                 </StyledButton>
                 <StyledButton
-                  type={!quickAssistantId ? 'primary' : 'default'}
-                  onClick={() => dispatch(setQuickAssistantId(''))}
+                  color={!quickAssistantId ? 'primary' : 'default'}
+                  onPress={() => dispatch(setQuickAssistantId(''))}
                   selected={!quickAssistantId}>
                   {t('settings.models.use_model')}
                 </StyledButton>
diff --git a/src/renderer/src/pages/settings/QuickPhraseSettings.tsx b/src/renderer/src/pages/settings/QuickPhraseSettings.tsx
index 99a5fadda..e88ce5feb 100644
--- a/src/renderer/src/pages/settings/QuickPhraseSettings.tsx
+++ b/src/renderer/src/pages/settings/QuickPhraseSettings.tsx
@@ -1,12 +1,13 @@
 import { ExclamationCircleOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DraggableList } from '@renderer/components/DraggableList'
 import { DeleteIcon, EditIcon } from '@renderer/components/Icons'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import FileItem from '@renderer/pages/files/FileItem'
 import QuickPhraseService from '@renderer/services/QuickPhraseService'
 import type { QuickPhrase } from '@renderer/types'
-import { Button, Input, Modal, Popconfirm, Space } from 'antd'
+import { Input, Modal, Popconfirm, Space } from 'antd'
 import { PlusIcon } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -78,7 +79,7 @@ const QuickPhraseSettings: FC = () => {
       <SettingGroup style={{ marginBottom: 0 }} theme={theme}>
         <SettingTitle>
           {t('settings.quickPhrase.title')}
-          <Button type="text" icon={<PlusIcon size={18} />} onClick={handleAdd} />
+          <Button variant="light" startContent={<PlusIcon size={18} />} onPress={handleAdd} isIconOnly />
         </SettingTitle>
         <SettingDivider />
         <SettingRow>
@@ -100,9 +101,10 @@ const QuickPhraseSettings: FC = () => {
                       <Flex className="gap-1 opacity-60">
                         <Button
                           key="edit"
-                          type="text"
-                          icon={<EditIcon size={14} />}
-                          onClick={() => handleEdit(phrase)}
+                          variant="light"
+                          startContent={<EditIcon size={14} />}
+                          onPress={() => handleEdit(phrase)}
+                          isIconOnly
                         />
                         <Popconfirm
                           title={t('settings.quickPhrase.delete')}
@@ -113,9 +115,10 @@ const QuickPhraseSettings: FC = () => {
                           icon={<ExclamationCircleOutlined style={{ color: 'red' }} />}>
                           <Button
                             key="delete"
-                            type="text"
-                            danger
-                            icon={<DeleteIcon size={14} className="lucide-custom" />}
+                            variant="light"
+                            color="danger"
+                            startContent={<DeleteIcon size={14} className="lucide-custom" />}
+                            isIconOnly
                           />
                         </Popconfirm>
                       </Flex>
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
index 1a998bf33..5d604f178 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/SelectionAssistantSettings.tsx
@@ -1,11 +1,12 @@
 import { Switch } from '@cherrystudio/ui'
+import { Button } 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, Tooltip } from 'antd'
+import { Radio, Row, Slider, Tooltip } from 'antd'
 import { CircleHelp, Edit2 } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -86,8 +87,8 @@ const SelectionAssistantSettings: FC = () => {
           <SettingTitle>{t('selection.name')}</SettingTitle>
           <Spacer />
           <Button
-            type="link"
-            onClick={() => window.api.openWebsite('https://github.com/CherryHQ/cherry-studio/issues/6505')}
+            variant="light"
+            onPress={() => window.api.openWebsite('https://github.com/CherryHQ/cherry-studio/issues/6505')}
             style={{ fontSize: 12 }}>
             {'FAQ & ' + t('settings.about.feedback.button')}
           </Button>
@@ -247,7 +248,7 @@ const SelectionAssistantSettings: FC = () => {
                     <SettingRowTitle>{t('selection.settings.advanced.filter_list.title')}</SettingRowTitle>
                     <SettingDescription>{t('selection.settings.advanced.filter_list.description')}</SettingDescription>
                   </SettingLabel>
-                  <Button icon={<Edit2 size={14} />} onClick={() => setIsFilterListModalOpen(true)}>
+                  <Button startContent={<Edit2 size={14} />} onPress={() => setIsFilterListModalOpen(true)}>
                     {t('common.edit')}
                   </Button>
                 </SettingRow>
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
index 87d56a6b3..b822a6a0a 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/ActionsListItem.tsx
@@ -1,6 +1,6 @@
+import { Button } from '@cherrystudio/ui'
 import type { DraggableProvided } from '@hello-pangea/dnd'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
-import { Button } from 'antd'
 import { Pencil, Settings2, Trash } from 'lucide-react'
 import { DynamicIcon } from 'lucide-react/dynamic'
 import { memo } from 'react'
@@ -58,10 +58,10 @@ const ActionOperations = memo(({ item, onEdit, onDelete }: ActionOperationsProps
   if (!item.isBuiltIn) {
     return (
       <UserActionOpSection>
-        <Button type="link" size="small" onClick={() => onEdit(item)}>
+        <Button variant="light" size="sm" onPress={() => onEdit(item)} isIconOnly>
           <Pencil size={16} className="btn-icon-edit" />
         </Button>
-        <Button type="link" size="small" danger onClick={() => onDelete(item.id)}>
+        <Button variant="light" size="sm" color="danger" onPress={() => onDelete(item.id)} isIconOnly>
           <Trash size={16} className="btn-icon-delete" />
         </Button>
       </UserActionOpSection>
@@ -71,7 +71,7 @@ const ActionOperations = memo(({ item, onEdit, onDelete }: ActionOperationsProps
   if (item.isBuiltIn && item.id === 'search') {
     return (
       <UserActionOpSection>
-        <Button type="link" size="small" onClick={() => onEdit(item)}>
+        <Button variant="light" size="sm" onPress={() => onEdit(item)} isIconOnly>
           <Settings2 size={16} className="btn-icon-edit" />
         </Button>
       </UserActionOpSection>
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
index f07ffd165..025a26552 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/MacProcessTrustHintModal.tsx
@@ -1,4 +1,5 @@
-import { Button, Modal, Typography } from 'antd'
+import { Button } from '@cherrystudio/ui'
+import { Modal, Typography } from 'antd'
 import type { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -30,10 +31,13 @@ const MacProcessTrustHintModal: FC<MacProcessTrustHintModalProps> = ({ open, onC
       onCancel={onClose}
       footer={
         <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-          <Button type="link" style={{ color: 'var(--color-text-3)', fontSize: 12 }} onClick={handleOpenAccessibility}>
+          <Button
+            variant="light"
+            style={{ color: 'var(--color-text-3)', fontSize: 12 }}
+            onPress={handleOpenAccessibility}>
             {t('selection.settings.enable.mac_process_trust_hint.button.open_accessibility_settings')}
           </Button>
-          <Button type="primary" onClick={handleConfirm}>
+          <Button color="primary" onPress={handleConfirm}>
             {t('selection.settings.enable.mac_process_trust_hint.button.go_to_settings')}
           </Button>
         </div>
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
index eb0e623a4..4893161c0 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionActionSearchModal.tsx
@@ -1,6 +1,7 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
-import { Button, Form, Input, Modal, Select } from 'antd'
+import { Form, Input, Modal, Select } from 'antd'
 import { Globe } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect } from 'react'
@@ -218,7 +219,7 @@ const SelectionActionSearchModal: FC<SelectionActionSearchModalProps> = ({
                   <Input
                     placeholder={EXAMPLE_URL}
                     suffix={
-                      <Button type="link" size="small" onClick={handleTest} style={{ padding: 0, height: 'auto' }}>
+                      <Button variant="light" size="sm" onPress={handleTest} style={{ padding: 0, height: 'auto' }}>
                         {t('selection.settings.search_modal.custom.test')}
                       </Button>
                     }
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
index ccab63b8d..429aef441 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SelectionFilterListModal.tsx
@@ -1,5 +1,6 @@
+import { Button } from '@cherrystudio/ui'
 import { isWin } from '@renderer/config/constant'
-import { Button, Form, Input, Modal } from 'antd'
+import { Form, Input, Modal } from 'antd'
 import type { FC } from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -49,10 +50,10 @@ const SelectionFilterListModal: FC<SelectionFilterListModalProps> = ({ open, onC
       keyboard={true}
       destroyOnHidden
       footer={[
-        <Button key="modal-cancel" onClick={onClose}>
+        <Button key="modal-cancel" onPress={onClose}>
           {t('common.cancel')}
         </Button>,
-        <Button key="modal-save" type="primary" onClick={handleSave}>
+        <Button key="modal-save" color="primary" onPress={handleSave}>
           {t('common.save')}
         </Button>
       ]}>
diff --git a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
index 01d721baf..a8461fb4b 100644
--- a/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
+++ b/src/renderer/src/pages/settings/SelectionAssistantSettings/components/SettingsActionsListHeader.tsx
@@ -1,4 +1,5 @@
-import { Button, Row, Tooltip } from 'antd'
+import { Button } from '@cherrystudio/ui'
+import { Row, Tooltip } from 'antd'
 import { Plus } from 'lucide-react'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -22,7 +23,7 @@ const SettingsActionsListHeader = memo(({ customItemsCount, maxCustomItems, onRe
       <SettingTitle>{t('selection.settings.actions.title')}</SettingTitle>
       <Spacer />
       <Tooltip title={t('selection.settings.actions.reset.tooltip')}>
-        <ResetButton type="text" onClick={onReset}>
+        <ResetButton variant="light" onPress={onReset}>
           {t('selection.settings.actions.reset.button')}
         </ResetButton>
       </Tooltip>
@@ -33,10 +34,10 @@ const SettingsActionsListHeader = memo(({ customItemsCount, maxCustomItems, onRe
             : t('selection.settings.actions.add_tooltip.enabled')
         }>
         <Button
-          type="primary"
-          icon={<Plus size={16} />}
-          onClick={onAdd}
-          disabled={isCustomItemLimitReached}
+          color="primary"
+          startContent={<Plus size={16} />}
+          onPress={onAdd}
+          isDisabled={isCustomItemLimitReached}
           style={{ paddingInline: '8px' }}>
           {t('selection.settings.actions.custom')}
         </Button>
diff --git a/src/renderer/src/pages/settings/ShortcutSettings.tsx b/src/renderer/src/pages/settings/ShortcutSettings.tsx
index 20b95aa95..dcf707ffd 100644
--- a/src/renderer/src/pages/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/pages/settings/ShortcutSettings.tsx
@@ -1,6 +1,7 @@
 import { ClearOutlined, UndoOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
 import { Switch } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { isMac, isWin } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useShortcuts } from '@renderer/hooks/useShortcuts'
@@ -10,7 +11,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, Table as AntTable, Tooltip } from 'antd'
+import { 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'
@@ -373,20 +374,20 @@ const ShortcutSettings: FC = () => {
         <RowFlex className="items-center justify-end gap-2">
           <Tooltip title={t('settings.shortcuts.reset_to_default')}>
             <Button
-              icon={<UndoOutlined />}
-              size="small"
-              shape="circle"
-              onClick={() => handleResetShortcut(record)}
-              disabled={!isShortcutModified(record)}
+              startContent={<UndoOutlined />}
+              size="sm"
+              isIconOnly
+              onPress={() => handleResetShortcut(record)}
+              isDisabled={!isShortcutModified(record)}
             />
           </Tooltip>
           <Tooltip title={t('settings.shortcuts.clear_shortcut')}>
             <Button
-              icon={<ClearOutlined />}
-              size="small"
-              shape="circle"
-              onClick={() => handleClear(record)}
-              disabled={record.shortcut.length === 0 || !record.editable}
+              startContent={<ClearOutlined />}
+              size="sm"
+              isIconOnly
+              onPress={() => handleClear(record)}
+              isDisabled={record.shortcut.length === 0 || !record.editable}
             />
           </Tooltip>
         </RowFlex>
@@ -417,7 +418,7 @@ const ShortcutSettings: FC = () => {
         />
         <SettingDivider style={{ marginBottom: 0 }} />
         <RowFlex className="justify-end p-4">
-          <Button onClick={handleResetAllShortcuts}>{t('settings.shortcuts.reset_defaults')}</Button>
+          <Button onPress={handleResetAllShortcuts}>{t('settings.shortcuts.reset_defaults')}</Button>
         </RowFlex>
       </SettingGroup>
     </SettingContainer>
diff --git a/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx b/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
index 8b7e46d9e..d4d402f26 100644
--- a/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
+++ b/src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx
@@ -1,4 +1,5 @@
 // TODO: Refactor this component to use HeroUI
+import { Button } from '@cherrystudio/ui'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { loggerService } from '@renderer/services/LoggerService'
 import type { RootState } from '@renderer/store'
@@ -6,7 +7,7 @@ import { useAppDispatch } from '@renderer/store'
 import { setApiServerApiKey, setApiServerEnabled, setApiServerPort } from '@renderer/store/settings'
 import { formatErrorMessage } from '@renderer/utils/error'
 import { IpcChannel } from '@shared/IpcChannel'
-import { Button, Input, InputNumber, Tooltip, Typography } from 'antd'
+import { Input, InputNumber, Tooltip, Typography } from 'antd'
 import { Copy, ExternalLink, Play, RotateCcw, Square } from 'lucide-react'
 import type { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -125,7 +126,7 @@ const ApiServerSettings: FC = () => {
           <Text type="secondary">{t('apiServer.description')}</Text>
         </HeaderContent>
         {apiServerRunning && (
-          <Button type="primary" icon={<ExternalLink size={14} />} onClick={openApiDocs}>
+          <Button color="primary" startContent={<ExternalLink size={14} />} onPress={openApiDocs}>
             {t('apiServer.documentation.title')}
           </Button>
         )}
@@ -201,12 +202,18 @@ const ApiServerSettings: FC = () => {
           suffix={
             <InputButtonContainer>
               {!apiServerRunning && (
-                <RegenerateButton onClick={regenerateApiKey} disabled={apiServerRunning} type="link">
+                <Button color="primary" onPress={regenerateApiKey} isDisabled={apiServerRunning} variant="light">
                   {t('apiServer.actions.regenerate')}
-                </RegenerateButton>
+                </Button>
               )}
               <Tooltip title={t('apiServer.fields.apiKey.copyTooltip')}>
-                <InputButton icon={<Copy size={14} />} onClick={copyApiKey} disabled={!apiServerConfig.apiKey} />
+                <Button
+                  variant="light"
+                  isIconOnly
+                  startContent={<Copy size={14} />}
+                  onPress={copyApiKey}
+                  isDisabled={!apiServerConfig.apiKey}
+                />
               </Tooltip>
             </InputButtonContainer>
           }
@@ -402,21 +409,6 @@ const InputButtonContainer = styled.div`
   gap: 4px;
 `
 
-const InputButton = styled(Button)`
-  border: none;
-  padding: 0 4px;
-  background: transparent;
-`
-
-const RegenerateButton = styled(Button)`
-  padding: 0 4px;
-  font-size: 12px;
-  height: auto;
-  line-height: 1;
-  border: none;
-  background: transparent;
-`
-
 const AuthHeaderSection = styled.div`
   margin-top: 12px;
   display: flex;
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
index 3d298c43a..62ccb0827 100644
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
+++ b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageModal.tsx
@@ -1,10 +1,11 @@
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import EmojiPicker from '@renderer/components/EmojiPicker'
 import { InfoTooltip } from '@renderer/components/TooltipIcons'
 import useTranslate from '@renderer/hooks/useTranslate'
 import { addCustomLanguage, updateCustomLanguage } from '@renderer/services/TranslateService'
 import type { CustomTranslateLanguage } from '@renderer/types'
-import { Button, Form, Input, Modal, Popover, Space } from 'antd'
+import { Form, Input, Modal, Popover, Space } from 'antd'
 import type { FC } from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -83,10 +84,10 @@ const CustomLanguageModal = ({ isOpen, editingCustomLanguage, onAdd, onEdit, onC
 
   const footer = useMemo(() => {
     return [
-      <Button key="modal-cancel" onClick={onCancel}>
+      <Button key="modal-cancel" onPress={onCancel}>
         {t('common.cancel')}
       </Button>,
-      <Button key="modal-save" type="primary" onClick={form.submit}>
+      <Button key="modal-save" color="primary" onPress={form.submit}>
         {editingCustomLanguage ? t('common.save') : t('common.add')}
       </Button>
     ]
@@ -120,7 +121,7 @@ const CustomLanguageModal = ({ isOpen, editingCustomLanguage, onAdd, onEdit, onC
             }
             arrow
             trigger="click">
-            <Button style={{ aspectRatio: '1/1' }} icon={<Emoji emoji={emoji} />} />
+            <Button style={{ aspectRatio: '1/1' }} startContent={<Emoji emoji={emoji} />} isIconOnly />
           </Popover>
         </Form.Item>
         <Form.Item
diff --git a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
index 121ec9532..f48b51931 100644
--- a/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
+++ b/src/renderer/src/pages/settings/TranslateSettingsPopup/CustomLanguageSettings.tsx
@@ -1,10 +1,11 @@
 import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'
 import { RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { deleteCustomLanguage, getAllCustomLanguages } from '@renderer/services/TranslateService'
 import type { CustomTranslateLanguage } from '@renderer/types'
 import type { TableProps } from 'antd'
-import { Button, Popconfirm, Space, Table } from 'antd'
+import { Popconfirm, Space, Table } from 'antd'
 import { memo, startTransition, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
@@ -85,14 +86,14 @@ const CustomLanguageSettings = () => {
         render: (_, record) => {
           return (
             <Space>
-              <Button icon={<EditOutlined />} onClick={() => onClickEdit(record)}>
+              <Button startContent={<EditOutlined />} onPress={() => onClickEdit(record)}>
                 {t('common.edit')}
               </Button>
               <Popconfirm
                 title={t('settings.translate.custom.delete.title')}
                 description={t('settings.translate.custom.delete.description')}
                 onConfirm={() => onDelete(record.id)}>
-                <Button icon={<DeleteOutlined />} danger>
+                <Button startContent={<DeleteOutlined />} color="danger">
                   {t('common.delete')}
                 </Button>
               </Popconfirm>
@@ -122,9 +123,9 @@ const CustomLanguageSettings = () => {
         <RowFlex className="justify-between py-1">
           <SettingRowTitle>{t('translate.custom.label')}</SettingRowTitle>
           <Button
-            type="primary"
-            icon={<PlusOutlined size={16} />}
-            onClick={onClickAdd}
+            color="primary"
+            startContent={<PlusOutlined size={16} />}
+            onPress={onClickAdd}
             style={{ marginBottom: 5, marginTop: -5 }}>
             {t('common.add')}
           </Button>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
index b4e8b74f7..aa0347c67 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/AddSubscribePopup.tsx
@@ -1,7 +1,8 @@
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { TopView } from '@renderer/components/TopView'
 import type { FormProps } from 'antd'
-import { Button, Form, Input, Modal } from 'antd'
+import { Form, Input, Modal } from 'antd'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -92,7 +93,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
           <Input placeholder={t('settings.tool.websearch.subscribe_name.placeholder')} spellCheck={false} />
         </Form.Item>
         <Flex className="mb-2 justify-end">
-          <Button type="primary" htmlType="submit">
+          <Button color="primary" type="submit">
             {t('settings.tool.websearch.subscribe_add')}
           </Button>
         </Flex>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx b/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
index b3304b03d..40e0b61db 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/BlacklistSettings.tsx
@@ -1,4 +1,5 @@
 import { CheckOutlined, InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useTimer } from '@renderer/hooks/useTimer'
@@ -7,7 +8,7 @@ import { useAppDispatch, useAppSelector } from '@renderer/store'
 import { setExcludeDomains } from '@renderer/store/websearch'
 import { parseMatchPattern, parseSubscribeContent } from '@renderer/utils/blacklistMatchPattern'
 import type { TableProps } from 'antd'
-import { Alert, Button, Table } from 'antd'
+import { Alert, Table } from 'antd'
 import TextArea from 'antd/es/input/TextArea'
 import { t } from 'i18next'
 import type { FC } from 'react'
@@ -247,7 +248,7 @@ const BlacklistSettings: FC = () => {
           autoSize={{ minRows: 4, maxRows: 8 }}
           rows={4}
         />
-        <Button onClick={() => updateManualBlacklist(blacklistInput)} style={{ marginTop: 10 }}>
+        <Button onPress={() => updateManualBlacklist(blacklistInput)} style={{ marginTop: 10 }}>
           {t('common.save')}
         </Button>
         {errFormat && (
@@ -258,10 +259,10 @@ const BlacklistSettings: FC = () => {
         <SettingTitle>
           {t('settings.tool.websearch.subscribe')}
           <Button
-            type={subscribeValid ? 'primary' : 'default'}
-            ghost={subscribeValid}
-            disabled={subscribeChecking}
-            onClick={handleAddSubscribe}>
+            color={subscribeValid ? 'primary' : 'default'}
+            variant={subscribeValid ? 'ghost' : 'solid'}
+            isDisabled={subscribeChecking}
+            onPress={handleAddSubscribe}>
             {t('settings.tool.websearch.subscribe_add')}
           </Button>
         </SettingTitle>
@@ -276,11 +277,11 @@ const BlacklistSettings: FC = () => {
           />
           <SettingRow style={{ height: 50 }}>
             <Button
-              type={subscribeValid ? 'primary' : 'default'}
-              ghost={subscribeValid}
-              disabled={subscribeChecking || selectedRowKeys.length === 0}
+              color={subscribeValid ? 'primary' : 'default'}
+              variant={subscribeValid ? 'ghost' : 'solid'}
+              isDisabled={subscribeChecking || selectedRowKeys.length === 0}
               style={{ width: 100 }}
-              onClick={updateSubscribe}>
+              onPress={updateSubscribe}>
               {subscribeChecking ? (
                 <LoadingOutlined spin />
               ) : subscribeValid ? (
@@ -289,7 +290,7 @@ const BlacklistSettings: FC = () => {
                 t('settings.tool.websearch.subscribe_update')
               )}
             </Button>
-            <Button style={{ width: 100 }} disabled={selectedRowKeys.length === 0} onClick={handleDeleteSubscribe}>
+            <Button style={{ width: 100 }} isDisabled={selectedRowKeys.length === 0} onPress={handleDeleteSubscribe}>
               {t('settings.tool.websearch.subscribe_delete')}
             </Button>
           </SettingRow>
diff --git a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
index 38c11481d..cdd80506e 100644
--- a/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/WebSearchSettings/WebSearchProviderSetting.tsx
@@ -1,5 +1,6 @@
 import { CheckOutlined, ExportOutlined, LoadingOutlined } from '@ant-design/icons'
 import { Flex, RowFlex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import BochaLogo from '@renderer/assets/images/search/bocha.webp'
 import ExaLogo from '@renderer/assets/images/search/exa.png'
@@ -13,7 +14,7 @@ import { useWebSearchProvider } from '@renderer/hooks/useWebSearchProviders'
 import WebSearchService from '@renderer/services/WebSearchService'
 import type { WebSearchProviderId } from '@renderer/types'
 import { formatApiKeys, hasObjectKey } from '@renderer/utils'
-import { Button, Divider, Form, Input, Space, Tooltip } from 'antd'
+import { Divider, Form, Input, Tooltip } from 'antd'
 import Link from 'antd/es/typography/Link'
 import { Info, List } from 'lucide-react'
 import type { FC } from 'react'
@@ -179,10 +180,10 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
             }}>
             {t('settings.provider.api_key.label')}
             <Tooltip title={t('settings.provider.api.key.list.open')} mouseEnterDelay={0.5}>
-              <Button type="text" size="small" onClick={openApiKeyList} icon={<List size={14} />} />
+              <Button variant="light" size="sm" onPress={openApiKeyList} startContent={<List size={14} />} isIconOnly />
             </Tooltip>
           </SettingSubtitle>
-          <Space.Compact style={{ width: '100%' }}>
+          <Flex className="gap-2">
             <Input.Password
               value={apiKey}
               placeholder={t('settings.provider.api_key.label')}
@@ -193,10 +194,10 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
               autoFocus={apiKey === ''}
             />
             <Button
-              ghost={apiValid}
-              type={apiValid ? 'primary' : 'default'}
-              onClick={checkSearch}
-              disabled={apiChecking}>
+              variant={apiValid ? 'ghost' : 'solid'}
+              color={apiValid ? 'primary' : 'default'}
+              onPress={checkSearch}
+              isDisabled={apiChecking}>
               {apiChecking ? (
                 <LoadingOutlined spin />
               ) : apiValid ? (
@@ -205,7 +206,7 @@ const WebSearchProviderSetting: FC<Props> = ({ providerId }) => {
                 t('settings.tool.websearch.check')
               )}
             </Button>
-          </Space.Compact>
+          </Flex>
           <SettingHelpTextRow style={{ justifyContent: 'space-between', marginTop: 5 }}>
             <RowFlex>
               {apiKeyWebsite && (
diff --git a/src/renderer/src/pages/translate/TranslateHistory.tsx b/src/renderer/src/pages/translate/TranslateHistory.tsx
index 0190dacaf..690d17bfe 100644
--- a/src/renderer/src/pages/translate/TranslateHistory.tsx
+++ b/src/renderer/src/pages/translate/TranslateHistory.tsx
@@ -1,12 +1,13 @@
 import { DeleteOutlined, StarFilled, StarOutlined } from '@ant-design/icons'
 import { ColFlex, RowFlex } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { DynamicVirtualList } from '@renderer/components/VirtualList'
 import db from '@renderer/databases'
 import useTranslate from '@renderer/hooks/useTranslate'
 import { clearHistory, deleteHistory, updateTranslateHistory } from '@renderer/services/TranslateService'
 import type { TranslateHistory, TranslateLanguage } from '@renderer/types'
-import { Button, Drawer, Empty, Input, Popconfirm } from 'antd'
+import { Drawer, Empty, Input, Popconfirm } from 'antd'
 import dayjs from 'dayjs'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { isEmpty } from 'lodash'
@@ -101,11 +102,11 @@ const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItem
       <Flex className="items-center">
         {t('translate.history.title')}
         <Button
-          icon={showStared ? <StarFilled /> : <StarOutlined />}
-          color="yellow"
-          variant="text"
-          onClick={(e) => {
-            e.stopPropagation()
+          startContent={showStared ? <StarFilled /> : <StarOutlined />}
+          isIconOnly
+          className="text-yellow-300"
+          variant="light"
+          onPress={() => {
             setShowStared(!showStared)
           }}
         />
@@ -129,7 +130,7 @@ const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItem
             title={t('translate.history.clear')}
             description={t('translate.history.clear_description')}
             onConfirm={clearHistory}>
-            <Button type="text" size="small" danger icon={<DeleteOutlined />}>
+            <Button variant="light" size="sm" color="danger" startContent={<DeleteOutlined />}>
               {t('translate.history.clear')}
             </Button>
           </Popconfirm>
@@ -182,13 +183,13 @@ const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItem
                             <HistoryListItemLanguage>{item._targetLanguage.label()}</HistoryListItemLanguage>
                           </Flex>
                           {/* tool bar */}
-                          <Flex className="items-center justify-end">
+                          <Flex className="mt-2 items-center justify-end">
                             <Button
-                              icon={item.star ? <StarFilled /> : <StarOutlined />}
-                              color="yellow"
-                              variant="text"
-                              onClick={(e) => {
-                                e.stopPropagation()
+                              startContent={item.star ? <StarFilled /> : <StarOutlined />}
+                              isIconOnly
+                              className="text-yellow-300"
+                              variant="light"
+                              onPress={() => {
                                 handleStar(item.id)
                               }}
                             />
@@ -200,14 +201,7 @@ const TranslateHistoryList: FC<TranslateHistoryProps> = ({ isOpen, onHistoryItem
                               onPopupClick={(e) => {
                                 e.stopPropagation()
                               }}>
-                              <Button
-                                icon={<DeleteOutlined />}
-                                danger
-                                type="text"
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                }}
-                              />
+                              <Button startContent={<DeleteOutlined />} isIconOnly color="danger" variant="light" />
                             </Popconfirm>
                           </Flex>
                         </Flex>
diff --git a/src/renderer/src/pages/translate/TranslatePage.tsx b/src/renderer/src/pages/translate/TranslatePage.tsx
index 4b085ef23..b3d81ad31 100644
--- a/src/renderer/src/pages/translate/TranslatePage.tsx
+++ b/src/renderer/src/pages/translate/TranslatePage.tsx
@@ -1,5 +1,6 @@
 import { PlusOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { loggerService } from '@logger'
 import { Navbar, NavbarCenter } from '@renderer/components/app/Navbar'
 import { CopyIcon } from '@renderer/components/Icons'
@@ -41,7 +42,7 @@ import {
   determineTargetLanguage
 } from '@renderer/utils/translate'
 import { imageExts, MB, textExts } from '@shared/config/constant'
-import { Button, FloatButton, Popover, Tooltip, Typography } from 'antd'
+import { FloatButton, Popover, Tooltip, Typography } from 'antd'
 import type { TextAreaRef } from 'antd/es/input/TextArea'
 import TextArea from 'antd/es/input/TextArea'
 import { isEmpty, throttle } from 'lodash'
@@ -693,10 +694,10 @@ const TranslatePage: FC = () => {
             <Button
               className="nodrag"
               color="default"
-              variant={historyDrawerVisible ? 'filled' : 'text'}
-              type="text"
-              icon={<FolderClock size={18} />}
-              onClick={() => setHistoryDrawerVisible(!historyDrawerVisible)}
+              variant="light"
+              startContent={<FolderClock size={18} />}
+              isIconOnly
+              onPress={() => setHistoryDrawerVisible(!historyDrawerVisible)}
             />
             <LanguageSelect
               showSearch
@@ -719,11 +720,12 @@ const TranslatePage: FC = () => {
             />
             <Tooltip title={t('translate.exchange.label')} placement="bottom">
               <Button
-                type="text"
-                icon={<SwapOutlined />}
+                variant="light"
+                startContent={<SwapOutlined />}
+                isIconOnly
                 style={{ margin: '0 -2px' }}
-                onClick={handleExchange}
-                disabled={!couldExchange}
+                onPress={handleExchange}
+                isDisabled={!couldExchange}
               />
             </Tooltip>
             {getLanguageDisplay()}
@@ -741,7 +743,12 @@ const TranslatePage: FC = () => {
               modelFilter={modelPredicate}
               tooltipProps={{ placement: 'bottom' }}
             />
-            <Button type="text" icon={<Settings2 size={18} />} onClick={() => setSettingsVisible(true)} />
+            <Button
+              variant="light"
+              startContent={<Settings2 size={18} />}
+              isIconOnly
+              onPress={() => setSettingsVisible(true)}
+            />
           </InnerOperationBar>
         </OperationBar>
         <AreaContainer>
@@ -790,12 +797,13 @@ const TranslatePage: FC = () => {
 
           <OutputContainer>
             <CopyButton
-              type="text"
-              size="small"
+              variant="light"
+              size="sm"
               className="copy-button"
-              onClick={onCopy}
-              disabled={!translatedContent}
-              icon={copied ? <Check size={16} color="var(--color-primary)" /> : <CopyIcon size={16} />}
+              onPress={onCopy}
+              isDisabled={!translatedContent}
+              startContent={copied ? <Check size={16} color="var(--color-primary)" /> : <CopyIcon size={16} />}
+              isIconOnly
             />
             <OutputText ref={outputTextRef} onScroll={handleOutputScroll} className={'selectable'}>
               {!translatedContent ? (
@@ -991,12 +999,12 @@ const TranslateButton = ({
         </div>
       }>
       {!translating && (
-        <Button type="primary" onClick={onTranslate} disabled={!couldTranslate} icon={<SendOutlined />}>
+        <Button color="primary" onPress={onTranslate} isDisabled={!couldTranslate} startContent={<SendOutlined />}>
           {t('translate.button.translate')}
         </Button>
       )}
       {translating && (
-        <Button danger type="primary" onClick={onAbort} icon={<CirclePause size={14} />}>
+        <Button color="danger" onPress={onAbort} startContent={<CirclePause size={14} />}>
           {t('common.stop')}
         </Button>
       )}
diff --git a/src/renderer/src/pages/translate/TranslateSettings.tsx b/src/renderer/src/pages/translate/TranslateSettings.tsx
index 176c2edab..207e91af4 100644
--- a/src/renderer/src/pages/translate/TranslateSettings.tsx
+++ b/src/renderer/src/pages/translate/TranslateSettings.tsx
@@ -1,10 +1,11 @@
 import { ColFlex, RowFlex, Switch } from '@cherrystudio/ui'
 import { Flex } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import LanguageSelect from '@renderer/components/LanguageSelect'
 import db from '@renderer/databases'
 import useTranslate from '@renderer/hooks/useTranslate'
 import type { AutoDetectionMethod, Model, TranslateLanguage } from '@renderer/types'
-import { Button, Modal, Radio, Space, Tooltip } from 'antd'
+import { Modal, Radio, Space, Tooltip } from 'antd'
 import { HelpCircle } from 'lucide-react'
 import type { FC } from 'react'
 import { memo, useEffect, useState } from 'react'
@@ -199,7 +200,7 @@ const TranslateSettings: FC<{
             </Space>
           )}
         </div>
-        <Button onClick={onMoreSetting}>{t('settings.moresetting.label')}</Button>
+        <Button onPress={onMoreSetting}>{t('settings.moresetting.label')}</Button>
       </ColFlex>
     </Modal>
   )
diff --git a/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx b/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
index 0c91ef382..56ec5c679 100644
--- a/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
+++ b/src/renderer/src/windows/dataRefactorMigrate/MigrateApp.tsx
@@ -1,8 +1,9 @@
 import { getToastUtilities } from '@cherrystudio/ui'
+import { Button } from '@cherrystudio/ui'
 import { AppLogo } from '@renderer/config/env'
 import { loggerService } from '@renderer/services/LoggerService'
 import { IpcChannel } from '@shared/IpcChannel'
-import { Button, Progress, Space, Steps } from 'antd'
+import { Progress, Space, Steps } from 'antd'
 import { AlertTriangle, CheckCircle, Database, Loader2, Rocket } from 'lucide-react'
 import React, { useEffect, useMemo, useState } from 'react'
 import styled from 'styled-components'
@@ -218,9 +219,9 @@ const MigrateApp: React.FC = () => {
       case 'introduction':
         return (
           <>
-            <Button onClick={handleCancel}>取消</Button>
+            <Button onPress={handleCancel}>取消</Button>
             <Spacer />
-            <Button type="primary" onClick={handleProceedToBackup}>
+            <Button color="primary" onPress={handleProceedToBackup}>
               下一步
             </Button>
           </>
@@ -228,10 +229,10 @@ const MigrateApp: React.FC = () => {
       case 'backup_required':
         return (
           <>
-            <Button onClick={handleCancel}>取消</Button>
+            <Button onPress={handleCancel}>取消</Button>
             <Spacer />
-            <Button onClick={handleBackupCompleted}>我已备份，开始迁移</Button>
-            <Button type="primary" onClick={handleShowBackupDialog}>
+            <Button onPress={handleBackupCompleted}>我已备份，开始迁移</Button>
+            <Button color="primary" onPress={handleShowBackupDialog}>
               创建备份
             </Button>
           </>
@@ -239,9 +240,9 @@ const MigrateApp: React.FC = () => {
       case 'backup_confirmed':
         return (
           <ButtonRow>
-            <Button onClick={handleCancel}>取消</Button>
+            <Button onPress={handleCancel}>取消</Button>
             <Space>
-              <Button type="primary" onClick={handleStartMigration}>
+              <Button color="primary" onPress={handleStartMigration}>
                 开始迁移
               </Button>
             </Space>
@@ -251,14 +252,14 @@ const MigrateApp: React.FC = () => {
         return (
           <ButtonRow>
             <div></div>
-            <Button disabled>迁移进行中...</Button>
+            <Button isDisabled>迁移进行中...</Button>
           </ButtonRow>
         )
       case 'completed':
         return (
           <ButtonRow>
             <div></div>
-            <Button type="primary" onClick={handleRestartApp}>
+            <Button color="primary" onPress={handleRestartApp}>
               重启应用
             </Button>
           </ButtonRow>
@@ -266,9 +267,9 @@ const MigrateApp: React.FC = () => {
       case 'error':
         return (
           <ButtonRow>
-            <Button onClick={handleCloseWindow}>关闭应用</Button>
+            <Button onPress={handleCloseWindow}>关闭应用</Button>
             <Space>
-              <Button type="primary" onClick={handleRetryMigration}>
+              <Button color="primary" onPress={handleRetryMigration}>
                 重新尝试
               </Button>
             </Space>
@@ -323,9 +324,9 @@ const MigrateApp: React.FC = () => {
                 {/* Debug button to test Redux data extraction */}
                 <div style={{ marginTop: '24px', textAlign: 'center' }}>
                   <Button
-                    size="small"
-                    type="dashed"
-                    onClick={async () => {
+                    size="sm"
+                    variant="bordered"
+                    onPress={async () => {
                       try {
                         await extractAndSendReduxData()
                         alert('Redux数据提取成功！请查看应用日志。')
diff --git a/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx b/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
index 9744d3c8d..7d32cd7d7 100644
--- a/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
+++ b/src/renderer/src/windows/dataRefactorTest/components/PreferenceBasicTests.tsx
@@ -1,7 +1,7 @@
-import { Switch } from '@cherrystudio/ui'
+import { Button, 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, Typography } from 'antd'
+import { Input, message, Select, Slider, Space, Typography } from 'antd'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
@@ -122,7 +122,7 @@ const PreferenceBasicTests: React.FC = () => {
               placeholder="输入新值 (JSON格式用于对象/数组)"
               onPressEnter={handleSetValue}
             />
-            <Button type="primary" onClick={handleSetValue}>
+            <Button color="primary" onPress={handleSetValue}>
               设置
             </Button>
           </Space.Compact>
@@ -135,10 +135,10 @@ const PreferenceBasicTests: React.FC = () => {
             {/* Theme Toggle with Visual Feedback */}
             {selectedKey === 'ui.theme_mode' && (
               <Button
-                size="small"
-                type={isDarkTheme ? 'default' : 'primary'}
-                icon={isDarkTheme ? '🌙' : '☀️'}
-                onClick={() => setValue(value === 'ThemeMode.dark' ? 'ThemeMode.light' : 'ThemeMode.dark')}>
+                size="sm"
+                color={isDarkTheme ? 'default' : 'primary'}
+                startContent={isDarkTheme ? '🌙' : '☀️'}
+                onPress={() => setValue(value === 'ThemeMode.dark' ? 'ThemeMode.light' : 'ThemeMode.dark')}>
                 切换主题 ({value === 'ThemeMode.dark' ? '→ Light' : '→ Dark'})
               </Button>
             )}
@@ -151,10 +151,10 @@ const PreferenceBasicTests: React.FC = () => {
             {/* Language Switch */}
             {selectedKey === 'app.language' && (
               <>
-                <Button size="small" onClick={() => setValue('zh-CN')}>
+                <Button size="sm" onPress={() => setValue('zh-CN')}>
                   中文
                 </Button>
-                <Button size="small" onClick={() => setValue('en-US')}>
+                <Button size="sm" onPress={() => setValue('en-US')}>
                   English
                 </Button>
               </>
@@ -245,39 +245,39 @@ const PreferenceBasicTests: React.FC = () => {
                       />
                       {selectedKey === 'app.zoom_factor' && (
                         <Space>
-                          <Button size="small" onClick={() => setValue(0.8)}>
+                          <Button size="sm" onPress={() => setValue(0.8)}>
                             80%
                           </Button>
-                          <Button size="small" onClick={() => setValue(1.0)}>
+                          <Button size="sm" onPress={() => setValue(1.0)}>
                             100%
                           </Button>
-                          <Button size="small" onClick={() => setValue(1.2)}>
+                          <Button size="sm" onPress={() => setValue(1.2)}>
                             120%
                           </Button>
                         </Space>
                       )}
                       {selectedKey === 'chat.message.font_size' && (
                         <Space>
-                          <Button size="small" onClick={() => setValue(12)}>
+                          <Button size="sm" onPress={() => setValue(12)}>
                             Small
                           </Button>
-                          <Button size="small" onClick={() => setValue(14)}>
+                          <Button size="sm" onPress={() => setValue(14)}>
                             Normal
                           </Button>
-                          <Button size="small" onClick={() => setValue(16)}>
+                          <Button size="sm" onPress={() => setValue(16)}>
                             Large
                           </Button>
                         </Space>
                       )}
                       {selectedKey === 'feature.selection.action_window_opacity' && (
                         <Space>
-                          <Button size="small" onClick={() => setValue(50)}>
+                          <Button size="sm" onPress={() => setValue(50)}>
                             50%
                           </Button>
-                          <Button size="small" onClick={() => setValue(80)}>
+                          <Button size="sm" onPress={() => setValue(80)}>
                             80%
                           </Button>
-                          <Button size="small" onClick={() => setValue(100)}>
+                          <Button size="sm" onPress={() => setValue(100)}>
                             100%
                           </Button>
                         </Space>
@@ -291,9 +291,9 @@ const PreferenceBasicTests: React.FC = () => {
 
             {/* Sample Values */}
             <Button
-              size="small"
-              type="dashed"
-              onClick={() => {
+              size="sm"
+              variant="bordered"
+              onPress={() => {
                 const testCase = testCases.find((tc) => tc.key === selectedKey)
                 if (testCase) {
                   setInputValue(testCase.sampleValue)
diff --git a/src/renderer/src/windows/selection/action/SelectionActionApp.tsx b/src/renderer/src/windows/selection/action/SelectionActionApp.tsx
index 94ac46d0a..4ef8be39e 100644
--- a/src/renderer/src/windows/selection/action/SelectionActionApp.tsx
+++ b/src/renderer/src/windows/selection/action/SelectionActionApp.tsx
@@ -1,10 +1,11 @@
+import { Button } from '@cherrystudio/ui'
 import { usePreference } from '@data/hooks/usePreference'
 import { isMac } from '@renderer/config/constant'
 import i18n from '@renderer/i18n'
 import { defaultLanguage } from '@shared/config/constant'
 import type { SelectionActionItem } from '@shared/data/preference/preferenceTypes'
 import { IpcChannel } from '@shared/IpcChannel'
-import { Button, Slider, Tooltip } from 'antd'
+import { Slider, Tooltip } from 'antd'
 import { Droplet, Minus, Pin, X } from 'lucide-react'
 import { DynamicIcon } from 'lucide-react/dynamic'
 import type { FC } from 'react'
@@ -209,10 +210,11 @@ const SelectionActionApp: FC = () => {
             title={isPinned ? t('selection.action.window.pinned') : t('selection.action.window.pin')}
             placement="bottom">
             <WinButton
-              type="text"
-              icon={<Pin size={14} className={isPinned ? 'pinned' : ''} />}
-              onClick={togglePin}
+              variant="light"
+              startContent={<Pin size={14} className={isPinned ? 'pinned' : ''} />}
+              onPress={togglePin}
               className={isPinned ? 'pinned' : ''}
+              isIconOnly
             />
           </Tooltip>
           <Tooltip
@@ -220,11 +222,12 @@ const SelectionActionApp: FC = () => {
             placement="bottom"
             {...(showOpacitySlider ? { open: false } : {})}>
             <WinButton
-              type="text"
-              icon={<Droplet size={14} />}
-              onClick={() => setShowOpacitySlider(!showOpacitySlider)}
+              variant="light"
+              startContent={<Droplet size={14} />}
+              onPress={() => setShowOpacitySlider(!showOpacitySlider)}
               className={showOpacitySlider ? 'active' : ''}
               style={{ paddingBottom: '2px' }}
+              isIconOnly
             />
           </Tooltip>
           {showOpacitySlider && (
@@ -242,8 +245,14 @@ const SelectionActionApp: FC = () => {
           )}
           {!isMac && (
             <>
-              <WinButton type="text" icon={<Minus size={16} />} onClick={handleMinimize} />
-              <WinButton type="text" icon={<X size={16} />} onClick={handleClose} className="close" />
+              <WinButton variant="light" startContent={<Minus size={16} />} onPress={handleMinimize} isIconOnly />
+              <WinButton
+                variant="light"
+                startContent={<X size={16} />}
+                onPress={handleClose}
+                className="close"
+                isIconOnly
+              />
             </>
           )}
         </TitleBarButtons>