diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx
index e77944525e..e7007d8188 100644
--- a/src/renderer/src/components/app/Sidebar.tsx
+++ b/src/renderer/src/components/app/Sidebar.tsx
@@ -51,42 +51,42 @@ const Sidebar: FC = () => {
       <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" onClick={onEditUser} />
       <MainMenus>
         <Menus onClick={MinApp.onClose}>
-          <Tooltip title={t('assistants.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('assistants.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/')}>
               <Icon className={isRoute('/')}>
                 <i className="iconfont icon-chat" />
               </Icon>
             </StyledLink>
           </Tooltip>
-          <Tooltip title={t('agents.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('agents.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/agents')}>
               <Icon className={isRoutes('/agents')}>
                 <i className="iconfont icon-business-smart-assistant" />
               </Icon>
             </StyledLink>
           </Tooltip>
-          <Tooltip title={t('paintings.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('paintings.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/paintings')}>
               <Icon className={isRoute('/paintings')}>
                 <PictureOutlined style={{ fontSize: 16 }} />
               </Icon>
             </StyledLink>
           </Tooltip>
-          <Tooltip title={t('translate.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('translate.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/translate')}>
               <Icon className={isRoute('/translate')}>
                 <TranslationOutlined />
               </Icon>
             </StyledLink>
           </Tooltip>
-          <Tooltip title={t('minapp.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('minapp.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/apps')}>
               <Icon className={isRoute('/apps')}>
                 <i className="iconfont icon-appstore" />
               </Icon>
             </StyledLink>
           </Tooltip>
-          <Tooltip title={t('files.title')} mouseEnterDelay={0.5} placement="right">
+          <Tooltip title={t('files.title')} mouseEnterDelay={0.8} placement="right">
             <StyledLink onClick={() => to('/files')}>
               <Icon className={isRoute('/files')}>
                 <FolderOutlined />
@@ -96,7 +96,7 @@ const Sidebar: FC = () => {
         </Menus>
       </MainMenus>
       <Menus onClick={MinApp.onClose}>
-        <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.5} placement="right">
+        <Tooltip title={t('settings.theme.title')} mouseEnterDelay={0.8} placement="right">
           <Icon onClick={() => toggleTheme()}>
             {theme === 'dark' ? (
               <i className="iconfont icon-theme icon-dark1" />
@@ -105,7 +105,7 @@ const Sidebar: FC = () => {
             )}
           </Icon>
         </Tooltip>
-        <Tooltip title={t('settings.title')} mouseEnterDelay={0.5} placement="right">
+        <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
           <StyledLink onClick={() => to(isLocalAi ? '/settings/assistant' : '/settings/provider')}>
             <Icon className={pathname.startsWith('/settings') ? 'active' : ''}>
               <i className="iconfont icon-setting" />
@@ -183,7 +183,8 @@ const Icon = styled.div`
     background-color: var(--color-active);
     .iconfont,
     .anticon {
-      color: var(--color-icon-white);
+      color: var(--color-primary);
+      font-weight: bold;
     }
   }
 `
diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 9c335bc912..5ffea3c99d 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -302,8 +302,11 @@
       "provider.api.url.preview": "Preview: {{url}}",
       "provider.api.url.tip": "Ending with / ignores v1, ending with # forces use of input address",
       "models.default_assistant_model": "Default Assistant Model",
+      "models.default_assistant_model_description": "Model used when creating a new assistant, if the assistant is not set, this model will be used",
       "models.topic_naming_model": "Topic Naming Model",
+      "models.topic_naming_model_description": "Model used when automatically naming a new topic",
       "models.translate_model": "Translate Model",
+      "models.translate_model_description": "Model used for translation service",
       "models.add.add_model": "Add Model",
       "models.add.model_id.placeholder": "Required e.g. gpt-3.5-turbo",
       "models.add.model_id": "Model ID",
diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json
index e453a314f5..c7854735ce 100644
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@@ -302,8 +302,11 @@
       "provider.api.url.preview": "Предпросмотр: {{url}}",
       "provider.api.url.tip": "Заканчивая на / игнорирует v1, заканчивая на # принудительно использует введенный адрес",
       "models.default_assistant_model": "Модель ассистента по умолчанию",
+      "models.default_assistant_model_description": "Модель, используемая при создании нового ассистента, если ассистент не имеет настроенной модели, будет использоваться эта модель",
       "models.topic_naming_model": "Модель именования топика",
+      "models.topic_naming_model_description": "Модель, используемая при автоматическом именовании нового топика",
       "models.translate_model": "Модель перевода",
+      "models.translate_model_description": "Модель, используемая для сервиса перевода",
       "models.add.add_model": "Добавить модель",
       "models.add.model_id.placeholder": "Обязательно, например, gpt-3.5-turbo",
       "models.add.model_id": "ID модели",
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index 6fcf318d0a..11d8ec9a84 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -290,8 +290,11 @@
       "advanced.title": "高级设置",
       "advanced.auto_switch_to_topics": "自动切换到话题",
       "models.default_assistant_model": "默认助手模型",
+      "models.default_assistant_model_description": "创建新助手时使用的模型，如果助手未设置模型，则使用此模型",
       "models.topic_naming_model": "话题命名模型",
+      "models.topic_naming_model_description": "自动命名新话题时使用的模型",
       "models.translate_model": "翻译模型",
+      "models.translate_model_description": "翻译服务使用的模型",
       "models.add.add_model": "添加模型",
       "models.add.model_id.placeholder": "必填 例如 gpt-3.5-turbo",
       "models.add.model_id": "模型 ID",
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index b740a90f8a..441aa3874c 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -290,8 +290,11 @@
       "advanced.title": "進階設定",
       "advanced.auto_switch_to_topics": "自動切換到話題",
       "models.default_assistant_model": "預設助手模型",
+      "models.default_assistant_model_description": "創建新助手時使用的模型，如果助手未設置模型，則使用此模型",
       "models.topic_naming_model": "話題命名模型",
+      "models.topic_naming_model_description": "自動命名新話題時使用的模型",
       "models.translate_model": "翻譯模型",
+      "models.translate_model_description": "翻譯服務使用的模型",
       "models.add.add_model": "添加模型",
       "models.add.model_id.placeholder": "必填，例如 gpt-3.5-turbo",
       "models.add.model_id": "模型 ID",
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index fb66142e07..dccbfdab96 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -3,6 +3,7 @@ import { FileProtectOutlined, GlobalOutlined, MailOutlined, SoundOutlined } from
 import { HStack } from '@renderer/components/Layout'
 import MinApp from '@renderer/components/MinApp'
 import { APP_NAME, AppLogo } from '@renderer/config/env'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import { useAppDispatch } from '@renderer/store'
 import { setManualUpdateCheck } from '@renderer/store/settings'
@@ -15,7 +16,7 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingDivider, SettingRow, SettingTitle } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingTitle } from '.'
 
 const AboutSettings: FC = () => {
   const [version, setVersion] = useState('')
@@ -24,6 +25,7 @@ const AboutSettings: FC = () => {
   const [checkUpdateLoading, setCheckUpdateLoading] = useState(false)
   const [downloading, setDownloading] = useState(false)
   const { manualUpdateCheck } = useSettings()
+  const { theme } = useTheme()
   const dispatch = useAppDispatch()
 
   const onCheckUpdate = debounce(
@@ -104,102 +106,104 @@ const AboutSettings: FC = () => {
   }, [t])
 
   return (
-    <SettingContainer>
-      <SettingTitle>
-        {t('settings.about.title')}
-        <HStack alignItems="center">
-          <Link to="https://github.com/kangfenmao/cherry-studio">
-            <GithubOutlined style={{ marginRight: 4, color: 'var(--color-text)', fontSize: 20 }} />
-          </Link>
-        </HStack>
-      </SettingTitle>
-      <SettingDivider />
-      <AboutHeader>
-        <Row align="middle">
-          <AvatarWrapper onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio')}>
-            {percent > 0 && (
-              <ProgressCircle
-                type="circle"
-                size={84}
-                percent={percent}
-                showInfo={false}
-                strokeLinecap="butt"
-                strokeColor="#67ad5b"
-              />
-            )}
-            <Avatar src={AppLogo} size={80} style={{ minHeight: 80 }} />
-          </AvatarWrapper>
-          <VersionWrapper>
-            <Title>{APP_NAME}</Title>
-            <Description>{t('settings.about.description')}</Description>
-            <Tag
-              onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio/releases')}
-              color="cyan"
-              style={{ marginTop: 8, cursor: 'pointer' }}>
-              v{version}
-            </Tag>
-          </VersionWrapper>
-        </Row>
-        <CheckUpdateButton onClick={onCheckUpdate} loading={checkUpdateLoading}>
-          {downloading ? t('settings.about.downloading') : t('settings.about.checkUpdate')}
-        </CheckUpdateButton>
-      </AboutHeader>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>{t('settings.general.manually_check_update.title')}</SettingRowTitle>
-        <Switch value={manualUpdateCheck} onChange={(v) => dispatch(setManualUpdateCheck(v))} />
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>
-          <SoundOutlined />
-          {t('settings.about.releases.title')}
-        </SettingRowTitle>
-        <Button
-          onClick={() =>
-            MinApp.start({
-              name: t('settings.about.releases.title'),
-              url: 'https://github.com/kangfenmao/cherry-studio/releases',
-              logo: AppLogo
-            })
-          }>
-          {t('settings.about.releases.button')}
-        </Button>
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>
-          <GlobalOutlined />
-          {t('settings.about.website.title')}
-        </SettingRowTitle>
-        <Button onClick={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>
-          <GithubOutlined />
-          {t('settings.about.feedback.title')}
-        </SettingRowTitle>
-        <Button onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio/issues/new')}>
-          {t('settings.about.feedback.button')}
-        </Button>
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>
-          <FileProtectOutlined />
-          {t('settings.about.license.title')}
-        </SettingRowTitle>
-        <Button onClick={showLicense}>{t('settings.about.license.button')}</Button>
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>
-          <MailOutlined /> {t('settings.about.contact.title')}
-        </SettingRowTitle>
-        <Button onClick={mailto}>{t('settings.about.contact.button')}</Button>
-      </SettingRow>
-      <SettingDivider />
+    <SettingContainer theme={theme}>
+      <SettingGroup theme={theme}>
+        <SettingTitle>
+          {t('settings.about.title')}
+          <HStack alignItems="center">
+            <Link to="https://github.com/kangfenmao/cherry-studio">
+              <GithubOutlined style={{ marginRight: 4, color: 'var(--color-text)', fontSize: 20 }} />
+            </Link>
+          </HStack>
+        </SettingTitle>
+        <SettingDivider />
+        <AboutHeader>
+          <Row align="middle">
+            <AvatarWrapper onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio')}>
+              {percent > 0 && (
+                <ProgressCircle
+                  type="circle"
+                  size={84}
+                  percent={percent}
+                  showInfo={false}
+                  strokeLinecap="butt"
+                  strokeColor="#67ad5b"
+                />
+              )}
+              <Avatar src={AppLogo} size={80} style={{ minHeight: 80 }} />
+            </AvatarWrapper>
+            <VersionWrapper>
+              <Title>{APP_NAME}</Title>
+              <Description>{t('settings.about.description')}</Description>
+              <Tag
+                onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio/releases')}
+                color="cyan"
+                style={{ marginTop: 8, cursor: 'pointer' }}>
+                v{version}
+              </Tag>
+            </VersionWrapper>
+          </Row>
+          <CheckUpdateButton onClick={onCheckUpdate} loading={checkUpdateLoading}>
+            {downloading ? t('settings.about.downloading') : t('settings.about.checkUpdate')}
+          </CheckUpdateButton>
+        </AboutHeader>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.general.manually_check_update.title')}</SettingRowTitle>
+          <Switch value={manualUpdateCheck} onChange={(v) => dispatch(setManualUpdateCheck(v))} />
+        </SettingRow>
+      </SettingGroup>
+      <SettingGroup theme={theme}>
+        <SettingRow>
+          <SettingRowTitle>
+            <SoundOutlined />
+            {t('settings.about.releases.title')}
+          </SettingRowTitle>
+          <Button
+            onClick={() =>
+              MinApp.start({
+                name: t('settings.about.releases.title'),
+                url: 'https://github.com/kangfenmao/cherry-studio/releases',
+                logo: AppLogo
+              })
+            }>
+            {t('settings.about.releases.button')}
+          </Button>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>
+            <GlobalOutlined />
+            {t('settings.about.website.title')}
+          </SettingRowTitle>
+          <Button onClick={() => onOpenWebsite('https://cherry-ai.com')}>{t('settings.about.website.button')}</Button>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>
+            <GithubOutlined />
+            {t('settings.about.feedback.title')}
+          </SettingRowTitle>
+          <Button onClick={() => onOpenWebsite('https://github.com/kangfenmao/cherry-studio/issues/new')}>
+            {t('settings.about.feedback.button')}
+          </Button>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>
+            <FileProtectOutlined />
+            {t('settings.about.license.title')}
+          </SettingRowTitle>
+          <Button onClick={showLicense}>{t('settings.about.license.button')}</Button>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>
+            <MailOutlined /> {t('settings.about.contact.title')}
+          </SettingRowTitle>
+          <Button onClick={mailto}>{t('settings.about.contact.button')}</Button>
+        </SettingRow>
+      </SettingGroup>
     </SettingContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/AssistantSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings.tsx
index 6e4325bd2a..a36c0230cf 100644
--- a/src/renderer/src/pages/settings/AssistantSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings.tsx
@@ -2,6 +2,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
 import { TopView } from '@renderer/components/TopView'
 import { DEFAULT_CONTEXTCOUNT, DEFAULT_MAX_TOKENS, DEFAULT_TEMPERATURE } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultAssistant } from '@renderer/hooks/useAssistant'
 import { AssistantSettings as AssistantSettingsType } from '@renderer/types'
 import { Button, Col, Input, InputNumber, Modal, Row, Slider, Switch, Tooltip } from 'antd'
@@ -18,6 +19,7 @@ const AssistantSettings: FC = () => {
   const [contextCount, setContextCount] = useState(defaultAssistant.settings?.contextCount ?? DEFAULT_CONTEXTCOUNT)
   const [enableMaxTokens, setEnableMaxTokens] = useState(defaultAssistant?.settings?.enableMaxTokens ?? false)
   const [maxTokens, setMaxTokens] = useState(defaultAssistant?.settings?.maxTokens ?? 0)
+  const { theme } = useTheme()
 
   const { t } = useTranslation()
 
@@ -67,7 +69,7 @@ const AssistantSettings: FC = () => {
   }
 
   return (
-    <SettingContainer style={{ height: 'auto' }}>
+    <SettingContainer style={{ height: 'auto', background: 'transparent', padding: 0 }} theme={theme}>
       <SettingSubtitle style={{ marginTop: 0 }}>{t('common.name')}</SettingSubtitle>
       <Input
         placeholder={t('common.assistant') + t('common.name')}
diff --git a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
index 09792801d1..c2b2393741 100644
--- a/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
+++ b/src/renderer/src/pages/settings/DataSettings/DataSettings.tsx
@@ -1,5 +1,6 @@
 import { FileSearchOutlined, FolderOpenOutlined, SaveOutlined } from '@ant-design/icons'
 import { HStack, VStack } from '@renderer/components/Layout'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { backup, reset, restore } from '@renderer/services/BackupService'
 import { AppInfo } from '@renderer/types'
 import { Button, Typography } from 'antd'
@@ -14,12 +15,14 @@ import WebDavSettings from './WebDavSettings'
 const DataSettings: FC = () => {
   const { t } = useTranslation()
   const [appInfo, setAppInfo] = useState<AppInfo>()
+  const { theme } = useTheme()
 
   useEffect(() => {
     window.api.getAppInfo().then(setAppInfo)
   }, [])
 
-  const handleOpenPath = (path: string) => {
+  const handleOpenPath = (path?: string) => {
+    if (!path) return
     if (path?.endsWith('log')) {
       const dirPath = path.split(/[/\\]/).slice(0, -1).join('/')
       window.api.openPath(dirPath)
@@ -29,8 +32,8 @@ const DataSettings: FC = () => {
   }
 
   return (
-    <SettingContainer>
-      <SettingGroup>
+    <SettingContainer theme={theme}>
+      <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.data')}</SettingTitle>
         <SettingDivider />
         <SettingRow>
@@ -63,10 +66,10 @@ const DataSettings: FC = () => {
           </HStack>
         </SettingRow>
       </SettingGroup>
-      <SettingGroup>
+      <SettingGroup theme={theme}>
         <WebDavSettings />
       </SettingGroup>
-      <SettingGroup>
+      <SettingGroup theme={theme}>
         <SettingTitle>{t('settings.data.title')}</SettingTitle>
         <SettingDivider />
         <SettingRow>
diff --git a/src/renderer/src/pages/settings/GeneralSettings.tsx b/src/renderer/src/pages/settings/GeneralSettings.tsx
index 9e73ec2073..d0ff8e93a0 100644
--- a/src/renderer/src/pages/settings/GeneralSettings.tsx
+++ b/src/renderer/src/pages/settings/GeneralSettings.tsx
@@ -1,4 +1,5 @@
 import { isMac } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useSettings } from '@renderer/hooks/useSettings'
 import i18n from '@renderer/i18n'
 import { useAppDispatch } from '@renderer/store'
@@ -10,7 +11,7 @@ import { Input, Select, Space, Switch } from 'antd'
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingDivider, SettingRow, SettingRowTitle, SettingTitle } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingRow, SettingRowTitle, SettingTitle } from '.'
 
 const GeneralSettings: FC = () => {
   const {
@@ -25,6 +26,7 @@ const GeneralSettings: FC = () => {
     proxyMode: storeProxyMode
   } = useSettings()
   const [proxyUrl, setProxyUrl] = useState<string | undefined>(storeProxyUrl)
+  const { theme: themeMode } = useTheme()
 
   const updateTray = (value: boolean) => {
     setTray(value)
@@ -76,82 +78,88 @@ const GeneralSettings: FC = () => {
   ]
 
   return (
-    <SettingContainer>
-      <SettingTitle>{t('settings.general.title')}</SettingTitle>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>{t('common.language')}</SettingRowTitle>
-        <Select defaultValue={language || 'en-US'} style={{ width: 180 }} onChange={onSelectLanguage}>
-          {languagesOptions.map((lang) => (
-            <Select.Option key={lang.value} value={lang.value}>
-              <Space.Compact direction="horizontal" block>
-                <Space.Compact block>{lang.label}</Space.Compact>
-                <span role="img" aria-label={lang.flag}>
-                  {lang.flag}
-                </span>
-              </Space.Compact>
-            </Select.Option>
-          ))}
-        </Select>
-      </SettingRow>
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
-        <Select
-          defaultValue={theme}
-          style={{ width: 180 }}
-          onChange={setTheme}
-          options={[
-            { value: ThemeMode.light, label: t('settings.theme.light') },
-            { value: ThemeMode.dark, label: t('settings.theme.dark') },
-            { value: ThemeMode.auto, label: t('settings.theme.auto') }
-          ]}
-        />
-      </SettingRow>
-      {isMac && (
-        <>
-          <SettingDivider />
-          <SettingRow>
-            <SettingRowTitle>{t('settings.theme.window.style.title')}</SettingRowTitle>
-            <Select
-              defaultValue={windowStyle || 'opaque'}
-              style={{ width: 180 }}
-              onChange={setWindowStyle}
-              options={[
-                { value: 'transparent', label: t('settings.theme.window.style.transparent') },
-                { value: 'opaque', label: t('settings.theme.window.style.opaque') }
-              ]}
-            />
-          </SettingRow>
-        </>
-      )}
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>{t('settings.proxy.mode.title')}</SettingRowTitle>
-        <Select value={storeProxyMode} style={{ width: 180 }} onChange={onProxyModeChange} options={proxyModeOptions} />
-      </SettingRow>
-      {storeProxyMode === 'custom' && (
-        <>
-          <SettingDivider />
-          <SettingRow>
-            <SettingRowTitle>{t('settings.proxy.title')}</SettingRowTitle>
-            <Input
-              placeholder="socks5://127.0.0.1:6153"
-              value={proxyUrl}
-              onChange={(e) => setProxyUrl(e.target.value)}
-              style={{ width: 180 }}
-              onBlur={() => onSetProxyUrl()}
-              type="url"
-            />
-          </SettingRow>
-        </>
-      )}
-      <SettingDivider />
-      <SettingRow>
-        <SettingRowTitle>{t('settings.tray.title')}</SettingRowTitle>
-        <Switch checked={tray} onChange={(checked) => updateTray(checked)} />
-      </SettingRow>
-      <SettingDivider />
+    <SettingContainer theme={themeMode}>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.general.title')}</SettingTitle>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('common.language')}</SettingRowTitle>
+          <Select defaultValue={language || 'en-US'} style={{ width: 180 }} onChange={onSelectLanguage}>
+            {languagesOptions.map((lang) => (
+              <Select.Option key={lang.value} value={lang.value}>
+                <Space.Compact direction="horizontal" block>
+                  <Space.Compact block>{lang.label}</Space.Compact>
+                  <span role="img" aria-label={lang.flag}>
+                    {lang.flag}
+                  </span>
+                </Space.Compact>
+              </Select.Option>
+            ))}
+          </Select>
+        </SettingRow>
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.theme.title')}</SettingRowTitle>
+          <Select
+            defaultValue={theme}
+            style={{ width: 180 }}
+            onChange={setTheme}
+            options={[
+              { value: ThemeMode.light, label: t('settings.theme.light') },
+              { value: ThemeMode.dark, label: t('settings.theme.dark') },
+              { value: ThemeMode.auto, label: t('settings.theme.auto') }
+            ]}
+          />
+        </SettingRow>
+        {isMac && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.theme.window.style.title')}</SettingRowTitle>
+              <Select
+                defaultValue={windowStyle || 'opaque'}
+                style={{ width: 180 }}
+                onChange={setWindowStyle}
+                options={[
+                  { value: 'transparent', label: t('settings.theme.window.style.transparent') },
+                  { value: 'opaque', label: t('settings.theme.window.style.opaque') }
+                ]}
+              />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.proxy.mode.title')}</SettingRowTitle>
+          <Select
+            value={storeProxyMode}
+            style={{ width: 180 }}
+            onChange={onProxyModeChange}
+            options={proxyModeOptions}
+          />
+        </SettingRow>
+        {storeProxyMode === 'custom' && (
+          <>
+            <SettingDivider />
+            <SettingRow>
+              <SettingRowTitle>{t('settings.proxy.title')}</SettingRowTitle>
+              <Input
+                placeholder="socks5://127.0.0.1:6153"
+                value={proxyUrl}
+                onChange={(e) => setProxyUrl(e.target.value)}
+                style={{ width: 180 }}
+                onBlur={() => onSetProxyUrl()}
+                type="url"
+              />
+            </SettingRow>
+          </>
+        )}
+        <SettingDivider />
+        <SettingRow>
+          <SettingRowTitle>{t('settings.tray.title')}</SettingRowTitle>
+          <Switch checked={tray} onChange={(checked) => updateTray(checked)} />
+        </SettingRow>
+      </SettingGroup>
     </SettingContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/ModelSettings.tsx b/src/renderer/src/pages/settings/ModelSettings.tsx
index 413c34082d..4d32d1ae4d 100644
--- a/src/renderer/src/pages/settings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings.tsx
@@ -1,5 +1,6 @@
 import { EditOutlined, MessageOutlined, SettingOutlined, TranslationOutlined } from '@ant-design/icons'
 import { HStack } from '@renderer/components/Layout'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { useDefaultModel } from '@renderer/hooks/useAssistant'
 import { useProviders } from '@renderer/hooks/useProvider'
 import { getModelUniqId, hasModel } from '@renderer/services/ModelService'
@@ -9,7 +10,7 @@ import { find, sortBy } from 'lodash'
 import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { SettingContainer, SettingDivider, SettingTitle } from '.'
+import { SettingContainer, SettingDescription, SettingDivider, SettingGroup, SettingTitle } from '.'
 import AssistantSettingsPopup from './AssistantSettings'
 
 const ModelSettings: FC = () => {
@@ -17,6 +18,7 @@ const ModelSettings: FC = () => {
     useDefaultModel()
   const { providers } = useProviders()
   const allModels = providers.map((p) => p.models).flat()
+  const { theme } = useTheme()
   const { t } = useTranslation()
 
   const selectOptions = providers
@@ -46,57 +48,64 @@ const ModelSettings: FC = () => {
   )
 
   return (
-    <SettingContainer>
-      <SettingTitle>
-        <div>
-          <MessageOutlined style={iconStyle} />
-          {t('settings.models.default_assistant_model')}
-        </div>
-      </SettingTitle>
-      <SettingDivider />
-      <HStack alignItems="center">
+    <SettingContainer theme={theme}>
+      <SettingGroup theme={theme}>
+        <SettingTitle>
+          <div>
+            <MessageOutlined style={iconStyle} />
+            {t('settings.models.default_assistant_model')}
+          </div>
+        </SettingTitle>
+        <SettingDivider />
+        <HStack alignItems="center">
+          <Select
+            value={defaultModelValue}
+            defaultValue={defaultModelValue}
+            style={{ width: 360 }}
+            onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
+            options={selectOptions}
+            placeholder={t('settings.models.empty')}
+          />
+          <Button icon={<SettingOutlined />} style={{ marginLeft: 8 }} onClick={() => AssistantSettingsPopup.show()} />
+        </HStack>
+        <SettingDescription>{t('settings.models.default_assistant_model_description')}</SettingDescription>
+      </SettingGroup>
+      <SettingGroup theme={theme}>
+        <SettingTitle>
+          <div>
+            <EditOutlined style={iconStyle} />
+            {t('settings.models.topic_naming_model')}
+          </div>
+        </SettingTitle>
+        <SettingDivider />
         <Select
-          value={defaultModelValue}
-          defaultValue={defaultModelValue}
+          value={defaultTopicNamingModel}
+          defaultValue={defaultTopicNamingModel}
           style={{ width: 360 }}
-          onChange={(value) => setDefaultModel(find(allModels, JSON.parse(value)) as Model)}
+          onChange={(value) => setTopicNamingModel(find(allModels, JSON.parse(value)) as Model)}
           options={selectOptions}
           placeholder={t('settings.models.empty')}
         />
-        <Button icon={<SettingOutlined />} style={{ marginLeft: 8 }} onClick={() => AssistantSettingsPopup.show()} />
-      </HStack>
-      <div style={{ height: 30 }} />
-      <SettingTitle>
-        <div>
-          <EditOutlined style={iconStyle} />
-          {t('settings.models.topic_naming_model')}
-        </div>
-      </SettingTitle>
-      <SettingDivider />
-      <Select
-        value={defaultTopicNamingModel}
-        defaultValue={defaultTopicNamingModel}
-        style={{ width: 360 }}
-        onChange={(value) => setTopicNamingModel(find(allModels, JSON.parse(value)) as Model)}
-        options={selectOptions}
-        placeholder={t('settings.models.empty')}
-      />
-      <div style={{ height: 30 }} />
-      <SettingTitle>
-        <div>
-          <TranslationOutlined style={iconStyle} />
-          {t('settings.models.translate_model')}
-        </div>
-      </SettingTitle>
-      <SettingDivider />
-      <Select
-        value={defaultTranslateModel}
-        defaultValue={defaultTranslateModel}
-        style={{ width: 360 }}
-        onChange={(value) => setTranslateModel(find(allModels, JSON.parse(value)) as Model)}
-        options={selectOptions}
-        placeholder={t('settings.models.empty')}
-      />
+        <SettingDescription>{t('settings.models.topic_naming_model_description')}</SettingDescription>
+      </SettingGroup>
+      <SettingGroup theme={theme}>
+        <SettingTitle>
+          <div>
+            <TranslationOutlined style={iconStyle} />
+            {t('settings.models.translate_model')}
+          </div>
+        </SettingTitle>
+        <SettingDivider />
+        <Select
+          value={defaultTranslateModel}
+          defaultValue={defaultTranslateModel}
+          style={{ width: 360 }}
+          onChange={(value) => setTranslateModel(find(allModels, JSON.parse(value)) as Model)}
+          options={selectOptions}
+          placeholder={t('settings.models.empty')}
+        />
+        <SettingDescription>{t('settings.models.translate_model_description')}</SettingDescription>
+      </SettingGroup>
     </SettingContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
index bf717dc9f9..5d0f032741 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx
@@ -126,12 +126,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   }
 
   return (
-    <SettingContainer
-      style={
-        theme === 'dark'
-          ? { backgroundColor: 'var(--color-background)' }
-          : { backgroundColor: 'var(--color-background-mute)' }
-      }>
+    <SettingContainer theme={theme}>
       <SettingTitle>
         <Flex align="center">
           <span>{provider.isSystem ? t(`provider.${provider.id}`) : provider.name}</span>
diff --git a/src/renderer/src/pages/settings/ShortcutSettings.tsx b/src/renderer/src/pages/settings/ShortcutSettings.tsx
index 44727eabcb..70ac614988 100644
--- a/src/renderer/src/pages/settings/ShortcutSettings.tsx
+++ b/src/renderer/src/pages/settings/ShortcutSettings.tsx
@@ -1,11 +1,12 @@
 import { isMac } from '@renderer/config/constant'
+import { useTheme } from '@renderer/context/ThemeProvider'
 import { Switch, Table as AntTable, Tag } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
-import { SettingContainer, SettingDivider, SettingTitle } from '.'
+import { SettingContainer, SettingDivider, SettingGroup, SettingTitle } from '.'
 
 interface ShortcutItem {
   key: string
@@ -16,6 +17,7 @@ interface ShortcutItem {
 
 const ShortcutSettings: FC = () => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
 
   const commandKey = isMac ? '⌘' : 'Ctrl'
 
@@ -81,16 +83,18 @@ const ShortcutSettings: FC = () => {
   ]
 
   return (
-    <SettingContainer>
-      <SettingTitle>{t('settings.shortcuts.title')}</SettingTitle>
-      <SettingDivider style={{ marginBottom: 0 }} />
-      <Table
-        columns={columns as ColumnsType<unknown>}
-        dataSource={shortcuts}
-        pagination={false}
-        size="middle"
-        showHeader={false}
-      />
+    <SettingContainer theme={theme}>
+      <SettingGroup theme={theme}>
+        <SettingTitle>{t('settings.shortcuts.title')}</SettingTitle>
+        <SettingDivider style={{ marginBottom: 0 }} />
+        <Table
+          columns={columns as ColumnsType<unknown>}
+          dataSource={shortcuts}
+          pagination={false}
+          size="middle"
+          showHeader={false}
+        />
+      </SettingGroup>
     </SettingContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/index.tsx b/src/renderer/src/pages/settings/index.tsx
index 9c5de650cb..2e85b795ef 100644
--- a/src/renderer/src/pages/settings/index.tsx
+++ b/src/renderer/src/pages/settings/index.tsx
@@ -1,15 +1,17 @@
+import { ThemeMode } from '@renderer/types'
 import { Divider } from 'antd'
 import Link from 'antd/es/typography/Link'
 import styled from 'styled-components'
 
-export const SettingContainer = styled.div`
+export const SettingContainer = styled.div<{ theme?: ThemeMode }>`
   display: flex;
   flex-direction: column;
   flex: 1;
   height: calc(100vh - var(--navbar-height));
-  padding: 15px;
+  padding: 20px;
   overflow-y: scroll;
   font-family: Ubuntu;
+  background: ${(props) => (props.theme === 'dark' ? 'transparent' : 'var(--color-background-soft)')};
 
   &::-webkit-scrollbar {
     display: none;
@@ -22,7 +24,7 @@ export const SettingTitle = styled.div`
   justify-content: space-between;
   align-items: center;
   user-select: none;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: bold;
 `
 
@@ -34,6 +36,12 @@ export const SettingSubtitle = styled.div`
   font-weight: bold;
 `
 
+export const SettingDescription = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
+  margin-top: 10px;
+`
+
 export const SettingDivider = styled(Divider)`
   margin: 10px 0;
 `
@@ -70,9 +78,10 @@ export const SettingHelpLink = styled(Link)`
   padding: 0 5px;
 `
 
-export const SettingGroup = styled.div`
-  margin-bottom: 16px;
+export const SettingGroup = styled.div<{ theme?: ThemeMode }>`
+  margin-bottom: 20px;
   border-radius: 8px;
   border: 0.5px solid var(--color-border);
   padding: 16px;
+  background: ${(props) => (props.theme === 'dark' ? 'var(--color-background-soft)' : 'var(--color-background)')};
 `