diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index d754a7452f..6f1d97d75d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -75,6 +75,9 @@ jobs:
       - name: Run verification-code countdown lifecycle contract
         run: yarn run test:verification-code-countdown
 
+      - name: Run settings layout contract
+        run: yarn run test:settings-layout
+
       - name: Build Community web client
         run: yarn run build:web:community --app_version=5.3.0
 
diff --git a/chat2db-community-client/package.json b/chat2db-community-client/package.json
index ad599ee9f6..b79cc0bfa6 100644
--- a/chat2db-community-client/package.json
+++ b/chat2db-community-client/package.json
@@ -41,6 +41,7 @@
     "test:search-result-tab-selection": "tsx src/blocks/SearchResult/tabSelection.test.ts",
     "test:saved-console-tree-refresh": "tsx src/store/tree/savedConsoleTreeRefresh.test.ts",
     "test:saved-console-lifecycle": "tsx src/store/workspace/utils/savedConsoleLifecycle.test.ts",
+    "test:settings-layout": "tsx src/blocks/Setting/navigation.test.ts && tsx src/blocks/Setting/search.test.ts && tsx src/blocks/Setting/BaseSetting/model.test.ts && tsx src/blocks/Setting/settingsLayout.test.ts",
     "test:sql-execution-log": "tsx src/service/sqlExecutionLog.test.ts",
     "test:sql-in-clipboard": "tsx src/utils/sqlInClipboard.test.ts && tsx src/components/SQLEditor/helper/sqlInsertValueDefaults.test.ts",
     "test:tree-title-highlight": "tsx src/blocks/NewTree/components/TitleRender/highlightSearchText.test.ts",
diff --git a/chat2db-community-client/scripts/i18n-source-hashes.json b/chat2db-community-client/scripts/i18n-source-hashes.json
index 70e67c8641..cfa1f1fb35 100644
--- a/chat2db-community-client/scripts/i18n-source-hashes.json
+++ b/chat2db-community-client/scripts/i18n-source-hashes.json
@@ -16,12 +16,12 @@
       "license.ts": "6aff8c38b1a7475264aa1e16e88d9b9731ecef112af70fe53edab449788ea788",
       "login.ts": "d6b15f2b4db713711c093108372027ad65899aec6dd963d3f954231a9ce5b890",
       "menu.ts": "1f9adabb7465ed545bdaa57fd2a0c10913e04979e710f65c6822f295c4d3e6ed",
-      "monaco.ts": "0c7f14a176a65e1e534d68bead392907430b943b80edd1ce173a1ddfcc50ab4f",
+      "monaco.ts": "da4d9ea1a29de505f94ca9c49d125805fbef1c3132c7aa0f49f1c278b8cb1e93",
       "notification.ts": "500751da2f02391622f074448eb46611fd41da2e5530d6c7d65f17a1382bd236",
       "plugin.ts": "01f15b6342cc5b29899ee4144d67b04bb4bc02c6bb10779806be322dc5e9a2bc",
       "price.ts": "26e35cb96368585f83a29adbb14e300da9b7f5278a4320063e81a1d1dd0adee9",
       "redis.ts": "a73e4fca6d783031370060e20bb1bbba13f663a0773cd031e1744be1cb4e93af",
-      "setting.ts": "0cbee33ef6464e82b35af4fc22bbe15fceb34a5b395fc582bac50ee77424f38c",
+      "setting.ts": "447e759e9842d790e80e6d5680032bf150ec259c6d48daa87458277a78a9ba1f",
       "spaceSetting.ts": "defdf3138e5e1782f0282760bcef4ce1b8550cc80b03052fea468d97165cb980",
       "sqlEditor.ts": "5c41e5f24d5ba78909795bcc681cabb8460cca075233b665dc4940afe82ce0c9",
       "stream.ts": "8418dd25b0fd54b2ef2b15a2573edf0a4876efb4e69936ff82a157ea5cf42be4",
@@ -43,12 +43,12 @@
       "license.ts": "6aff8c38b1a7475264aa1e16e88d9b9731ecef112af70fe53edab449788ea788",
       "login.ts": "d6b15f2b4db713711c093108372027ad65899aec6dd963d3f954231a9ce5b890",
       "menu.ts": "1f9adabb7465ed545bdaa57fd2a0c10913e04979e710f65c6822f295c4d3e6ed",
-      "monaco.ts": "0c7f14a176a65e1e534d68bead392907430b943b80edd1ce173a1ddfcc50ab4f",
+      "monaco.ts": "da4d9ea1a29de505f94ca9c49d125805fbef1c3132c7aa0f49f1c278b8cb1e93",
       "notification.ts": "500751da2f02391622f074448eb46611fd41da2e5530d6c7d65f17a1382bd236",
       "plugin.ts": "01f15b6342cc5b29899ee4144d67b04bb4bc02c6bb10779806be322dc5e9a2bc",
       "price.ts": "26e35cb96368585f83a29adbb14e300da9b7f5278a4320063e81a1d1dd0adee9",
       "redis.ts": "a73e4fca6d783031370060e20bb1bbba13f663a0773cd031e1744be1cb4e93af",
-      "setting.ts": "0cbee33ef6464e82b35af4fc22bbe15fceb34a5b395fc582bac50ee77424f38c",
+      "setting.ts": "447e759e9842d790e80e6d5680032bf150ec259c6d48daa87458277a78a9ba1f",
       "spaceSetting.ts": "defdf3138e5e1782f0282760bcef4ce1b8550cc80b03052fea468d97165cb980",
       "sqlEditor.ts": "5c41e5f24d5ba78909795bcc681cabb8460cca075233b665dc4940afe82ce0c9",
       "stream.ts": "8418dd25b0fd54b2ef2b15a2573edf0a4876efb4e69936ff82a157ea5cf42be4",
diff --git a/chat2db-community-client/src/blocks/Setting/BaseSetting/index.tsx b/chat2db-community-client/src/blocks/Setting/BaseSetting/index.tsx
index 9abd7d7c82..c0e1581307 100644
--- a/chat2db-community-client/src/blocks/Setting/BaseSetting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/BaseSetting/index.tsx
@@ -3,26 +3,18 @@ import themeDarkDimmedImg from '@/assets/img/theme-dark-dimmed.png';
 import themeDarkImg from '@/assets/img/theme-dark.png';
 import themeLightImg from '@/assets/img/theme-light.png';
 import { runtimeEditionConfig } from '@/constants/runtimeEdition';
-import { LangType } from '@/constants/settings';
+import type { LangType } from '@/constants/settings';
 import i18n from '@/i18n';
 import { useGlobalStore } from '@/store/global';
 import { settingSelectors } from '@/store/global/selectors';
 import { refreshPage } from '@/utils';
-import { PrimaryColors, primaryColorsScales, PrimaryGradient, Swatches, ThemeAppearance } from '@chat2db/ui';
-import { Form, Input, Select } from 'antd';
-import { ChevronDown } from 'lucide-react';
+import { PrimaryColors, primaryColorsScales, PrimaryGradient, ThemeAppearance } from '@chat2db/ui';
+import { Input, Select } from 'antd';
+import { Check, ChevronDown, Globe, Palette, Type } from 'lucide-react';
 import { useMemo } from 'react';
-import SettingSubsection from '../SettingSubsection';
+import { getAvailableLanguageOptions, resolveCurrentLanguage } from './model';
 import { useStyles } from './style';
 
-const languageOptions = [
-  { value: LangType.ZH_CN, label: '简体中文' },
-  { value: LangType.EN_US, label: 'English' },
-  { value: LangType.JA_JP, label: '日本語' },
-  { value: LangType.ES_ES, label: 'Español' },
-  { value: LangType.KO_KR, label: '한국어' },
-];
-
 const customFontSizeOptions = [
   { value: 12, label: '12px' },
   { value: 13, label: '13px' },
@@ -74,7 +66,6 @@ export default function BaseSetting() {
       setAppearance: state.setAppearance,
       isCN: state.appConfig.isCN,
       setPrimaryColor: state.setPrimaryColor,
-      setNeutralColor: state.setNeutralColor,
       setLanguage: state.setLanguage,
       setCustomFont: state.setCustomFont,
       setCustomFontSize: state.setCustomFontSize,
@@ -83,18 +74,12 @@ export default function BaseSetting() {
 
   // If it is not a domestic version, Chinese will not be displayed.
   const curLanguageOptions = useMemo(() => {
-    if (runtimeEditionConfig.languageRegionRestricted && !isCN) {
-      return languageOptions.filter((item) => item.value !== LangType.ZH_CN);
-    }
-    return languageOptions;
+    return getAvailableLanguageOptions(runtimeEditionConfig.languageRegionRestricted, isCN);
   }, [isCN]);
 
   // If it is not a domestic version, Chinese will not be displayed.
   const curLanguage = useMemo(() => {
-    if (runtimeEditionConfig.languageRegionRestricted && !isCN && language === LangType.ZH_CN) {
-      return LangType.EN_US;
-    }
-    return language;
+    return resolveCurrentLanguage(language, runtimeEditionConfig.languageRegionRestricted, isCN);
   }, [language, isCN]);
 
   const isDark = appearance.includes('dark');
@@ -113,108 +98,138 @@ export default function BaseSetting() {
     window.setTimeout(refreshPage, 0);
   }
 
-  function changeThemeMode(item: any) {
-    setAppearance(item.code);
+  function changeThemeMode(code: ThemeAppearance) {
+    setAppearance(code);
   }
 
   function changePrimaryColor(item: any) {
     setPrimaryColor(item);
   }
 
-  // function changeNeutralColor(item: any) {
-  //   setNeutralColor(item);
-  // }
-
   return (
-    <div className={styles.baseSettingBox}>
-      <div>
-        <SettingSubsection
-          title={i18n('setting.title.backgroundColor')}
-          describe={i18n('setting.text.backgroundColorDescribe')}
-        />
-        <div className={styles.backgroundList}>
-          {themeList.map((t) => {
-            return (
-              <div key={t.code} className={styles.themeItemBox}>
-                <div
-                  className={cx(styles.themeBox, { [styles.activeThemeBox]: appearance == t.code })}
-                  onClick={changeThemeMode.bind(null, t)}
-                  style={{ backgroundImage: `url(${t.img})` }}
-                />
-                <div className={styles.themeName}>{t.name}</div>
-              </div>
-            );
-          })}
+    <div className={styles.settingsList}>
+      <div className={styles.settingRow} data-setting-group="appearance" data-setting-search-id="basic.appearance">
+        <div className={styles.settingMeta}>
+          <Palette aria-hidden="true" className={styles.settingGroupIcon} size={18} strokeWidth={1.8} />
+          <div className={styles.settingMetaContent}>
+            <div className={styles.settingTitle} data-setting-search-title="true">
+              {i18n('setting.title.appearance')}
+            </div>
+            <div className={styles.settingDescription}>{i18n('setting.text.appearanceDescribe')}</div>
+          </div>
+        </div>
+        <div className={styles.settingStack}>
+          <div className={styles.controlBlock}>
+            <div className={styles.fieldLabel}>{i18n('setting.title.backgroundColor')}</div>
+            <div aria-label={i18n('setting.title.backgroundColor')} className={styles.backgroundList} role="group">
+              {themeList.map((t) => {
+                const isActive = appearance === t.code;
+                return (
+                  <button
+                    aria-pressed={isActive}
+                    className={cx(styles.themeItemBox, { [styles.activeThemeItemBox]: isActive })}
+                    key={t.code}
+                    onClick={() => changeThemeMode(t.code)}
+                    type="button"
+                  >
+                    <span
+                      className={cx(styles.themeBox, { [styles.activeThemeBox]: isActive })}
+                      style={{ backgroundImage: `url(${t.img})` }}
+                    >
+                      {isActive ? (
+                        <span className={styles.themeCheck}>
+                          <Check aria-hidden="true" size={13} strokeWidth={2.2} />
+                        </span>
+                      ) : null}
+                    </span>
+                    <span className={styles.themeName}>{t.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+          <div aria-label={i18n('setting.title.themeColor')} className={styles.controlBlock} role="group">
+            <div className={styles.fieldLabel}>{i18n('setting.title.themeColor')}</div>
+            <div className={styles.swatchesBox}>
+              {primaryColorsSwatches.map((color) => {
+                const isActive = primaryColor?.label === color.label;
+                return (
+                  <button
+                    aria-label={color.label}
+                    aria-pressed={isActive}
+                    className={cx(styles.colorSwatch, { [styles.activeColorSwatch]: isActive })}
+                    key={color.label}
+                    onClick={() => changePrimaryColor(color)}
+                    style={{ backgroundColor: color.value }}
+                    title={color.label}
+                    type="button"
+                  >
+                    {isActive ? <Check aria-hidden="true" size={14} strokeWidth={2.5} /> : null}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
         </div>
       </div>
-      <div>
-        <SettingSubsection title={i18n('setting.title.language')} describe={i18n('setting.title.languageDescribe')} />
-        <Select
-          value={curLanguage}
-          style={{ width: 140 }}
-          onChange={changeLang}
-          options={curLanguageOptions}
-          suffixIcon={<ChevronDown size={14} />}
-        />
-      </div>
-      <div>
-        <SettingSubsection
-          title={i18n('setting.title.customFont')}
-          describe={i18n('setting.title.customFontDescribe')}
-        />
-        <Form className={styles.customFontBox}>
-          {/* <Form.Item label={i18n('setting.title.customFont')} name="customFont"> */}
-          <Input
-            value={customFont}
-            style={{ width: 300 }}
-            onChange={(e) => {
-              setCustomFont(e.target.value);
-            }}
-            placeholder={i18n('setting.placeholder.customFont')}
-          />
-          {/* </Form.Item>
-          <Form.Item label={i18n('setting.title.customFontSize')} name="customFontSize"> */}
+      <div className={styles.settingRow} data-setting-group="language" data-setting-search-id="basic.language">
+        <div className={styles.settingMeta}>
+          <Globe aria-hidden="true" className={styles.settingGroupIcon} size={18} strokeWidth={1.8} />
+          <div className={styles.settingMetaContent}>
+            <div className={styles.settingTitle} data-setting-search-title="true">
+              {i18n('setting.title.language')}
+            </div>
+            <div className={styles.settingDescription}>{i18n('setting.title.languageDescribe')}</div>
+          </div>
+        </div>
+        <div className={styles.settingControl}>
           <Select
-            value={customFontSize}
-            placeholder={i18n('setting.title.customFontSizeDescribe')}
-            style={{ width: 200 }}
-            onChange={(e) => {
-              setCustomFontSize(e);
-            }}
-            options={customFontSizeOptions}
+            aria-label={i18n('setting.title.language')}
+            className={styles.languageSelect}
+            value={curLanguage}
+            onChange={changeLang}
+            options={curLanguageOptions}
             suffixIcon={<ChevronDown size={14} />}
           />
-          {/* </Form.Item> */}
-        </Form>
-      </div>
-      <div>
-        <SettingSubsection
-          title={i18n('setting.title.themeColor')}
-          describe={i18n('setting.title.themeColorDescribe')}
-        />
-        <Swatches
-          size={28}
-          gap={12}
-          activeColor={primaryColor?.label}
-          colors={primaryColorsSwatches}
-          onSelect={changePrimaryColor}
-        />
+        </div>
       </div>
-      {/* <div>
-        <SettingSubsection
-          title={i18n('setting.title.neutralColor')}
-          describe={i18n('setting.title.neutralColorDescribe')}
-        />
-        <div className={styles.primaryColorList}>
-          <Swatches
-            size={28}
-            gap={12}
-            activeColor={neutralColor}
-            colors={neutralColorsSwatches}
-            onSelect={changeNeutralColor}
-          />
+      <div className={styles.settingRow} data-setting-group="typography" data-setting-search-id="basic.typography">
+        <div className={styles.settingMeta}>
+          <Type aria-hidden="true" className={styles.settingGroupIcon} size={18} strokeWidth={1.8} />
+          <div className={styles.settingMetaContent}>
+            <div className={styles.settingTitle} data-setting-search-title="true">
+              {i18n('setting.title.interfaceFont')}
+            </div>
+            <div className={styles.settingDescription}>{i18n('setting.text.interfaceFontDescribe')}</div>
+          </div>
+        </div>
+        <div className={styles.fontControls}>
+          <label className={styles.fieldControl}>
+            <span className={styles.fieldLabel}>{i18n('setting.title.customFont')}</span>
+            <Input
+              aria-label={i18n('setting.title.customFont')}
+              value={customFont}
+              onChange={(e) => {
+                setCustomFont(e.target.value);
+              }}
+              placeholder={i18n('setting.placeholder.customFont')}
+            />
+          </label>
+          <label className={styles.fieldControl}>
+            <span className={styles.fieldLabel}>{i18n('setting.title.customFontSize')}</span>
+            <Select
+              aria-label={i18n('setting.title.customFontSize')}
+              value={customFontSize}
+              placeholder={i18n('setting.title.customFontSizeDescribe')}
+              onChange={(value) => {
+                setCustomFontSize(value);
+              }}
+              options={customFontSizeOptions}
+              suffixIcon={<ChevronDown size={14} />}
+            />
+          </label>
         </div>
-      </div> */}
+      </div>
     </div>
   );
 }
diff --git a/chat2db-community-client/src/blocks/Setting/BaseSetting/model.test.ts b/chat2db-community-client/src/blocks/Setting/BaseSetting/model.test.ts
new file mode 100644
index 0000000000..f26c897f8d
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/BaseSetting/model.test.ts
@@ -0,0 +1,31 @@
+import assert from 'node:assert/strict';
+import type { LangType } from '@/constants/settings';
+import { getAvailableLanguageOptions, languageOptions, resolveCurrentLanguage } from './model';
+
+assert.equal(
+  getAvailableLanguageOptions(false, false).length,
+  languageOptions.length,
+  'unrestricted editions expose every supported language',
+);
+assert.equal(
+  getAvailableLanguageOptions(true, false).some((item) => item.value === 'zh-CN'),
+  false,
+  'region-restricted non-CN editions hide Simplified Chinese',
+);
+assert.equal(
+  getAvailableLanguageOptions(true, true).some((item) => item.value === 'zh-CN'),
+  true,
+  'region-restricted CN editions keep Simplified Chinese available',
+);
+assert.equal(
+  resolveCurrentLanguage('zh-CN' as LangType, true, false),
+  'en-US',
+  'a persisted Simplified Chinese preference falls back to English when it is unavailable',
+);
+assert.equal(
+  resolveCurrentLanguage('ja-JP' as LangType, true, false),
+  'ja-JP',
+  'available persisted languages remain unchanged',
+);
+
+console.log('Base settings model tests passed.');
diff --git a/chat2db-community-client/src/blocks/Setting/BaseSetting/model.ts b/chat2db-community-client/src/blocks/Setting/BaseSetting/model.ts
new file mode 100644
index 0000000000..67b5afbe05
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/BaseSetting/model.ts
@@ -0,0 +1,29 @@
+import type { LangType } from '@/constants/settings';
+
+const EN_US = 'en-US' as LangType;
+const ZH_CN = 'zh-CN' as LangType;
+const JA_JP = 'ja-JP' as LangType;
+const ES_ES = 'es-ES' as LangType;
+const KO_KR = 'ko-KR' as LangType;
+
+export const languageOptions = [
+  { value: ZH_CN, label: '简体中文' },
+  { value: EN_US, label: 'English' },
+  { value: JA_JP, label: '日本語' },
+  { value: ES_ES, label: 'Español' },
+  { value: KO_KR, label: '한국어' },
+];
+
+export function getAvailableLanguageOptions(languageRegionRestricted: boolean, isCN: boolean) {
+  if (languageRegionRestricted && !isCN) {
+    return languageOptions.filter((item) => item.value !== ZH_CN);
+  }
+  return languageOptions;
+}
+
+export function resolveCurrentLanguage(language: LangType, languageRegionRestricted: boolean, isCN: boolean) {
+  if (languageRegionRestricted && !isCN && language === ZH_CN) {
+    return EN_US;
+  }
+  return language;
+}
diff --git a/chat2db-community-client/src/blocks/Setting/BaseSetting/style.ts b/chat2db-community-client/src/blocks/Setting/BaseSetting/style.ts
index 6b2eb5d689..1632b79f7d 100644
--- a/chat2db-community-client/src/blocks/Setting/BaseSetting/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/BaseSetting/style.ts
@@ -1,55 +1,205 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token }) => {
-  return {
-    title: css`
-      font-size: 14px;
-      margin-bottom: 10px;
-      i {
-        margin-left: 10px;
-        color: ${token.colorPrimary};
-      }
-    `,
-    baseSettingBox: css`
-      display: flex;
-      flex-direction: column;
-      gap: 30px;
-    `,
-    backgroundList: css`
-      display: flex;
-      gap: 20px;
-    `,
-    themeItemBox: css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    `,
-    themeBox: css`
-      width: 80px;
-      height: 52px;
-      margin-bottom: 6px;
-      overflow: hidden;
-      border-radius: 4px;
-      background-size: cover;
-      background-repeat: no-repeat;
-      cursor: pointer;
-    `,
-    activeThemeBox: css`
-      box-shadow: inset 0 0 0 2px ${token.colorPrimary};
-      border-radius: 4px;
-    `,
-    themeName: css`
-      text-align: center;
-      font-size: 12px;
-    `,
-    primaryColorList: css`
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 20px;
-    `,
-    customFontBox: css`
-      display: flex;
-      gap: 20px;
-    `,
-  };
-});
+export const useStyles = createStyles(({ css, token }) => ({
+  baseSettingBox: css`
+    width: 100%;
+    padding-top: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  `,
+  customFontBox: css`
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+  `,
+  settingsList: css`
+    width: 100%;
+    container-type: inline-size;
+  `,
+  settingRow: css`
+    padding: 24px 0;
+    border-bottom: 1px solid ${token.colorSplit};
+    display: grid;
+    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
+    align-items: start;
+    gap: 32px;
+
+    @container (max-width: 720px) {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 16px;
+    }
+  `,
+  settingMeta: css`
+    min-width: 0;
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    align-items: start;
+    gap: 10px;
+  `,
+  settingMetaContent: css`
+    min-width: 0;
+  `,
+  settingGroupIcon: css`
+    margin-top: 2px;
+    color: ${token.colorPrimary};
+  `,
+  settingTitle: css`
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+  `,
+  settingDescription: css`
+    max-width: 280px;
+    margin-top: 4px;
+    color: ${token.colorTextSecondary};
+    font-size: 13px;
+    line-height: 20px;
+  `,
+  settingControl: css`
+    min-width: 0;
+  `,
+  settingStack: css`
+    width: 100%;
+    max-width: 640px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  `,
+  controlBlock: css`
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  `,
+  backgroundList: css`
+    width: 100%;
+    max-width: 640px;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(96px, 1fr));
+    gap: 14px;
+
+    @container (max-width: 480px) {
+      grid-template-columns: repeat(2, minmax(96px, 1fr));
+    }
+  `,
+  themeItemBox: css`
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: transparent;
+    color: ${token.colorTextSecondary};
+    font: inherit;
+    cursor: pointer;
+
+    &:hover {
+      color: ${token.colorText};
+    }
+
+    &:focus-visible {
+      border-radius: 6px;
+      outline: 2px solid ${token.colorPrimary};
+      outline-offset: 3px;
+    }
+  `,
+  activeThemeItemBox: css`
+    color: ${token.colorText};
+    font-weight: 500;
+  `,
+  themeBox: css`
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    aspect-ratio: 8 / 5;
+    overflow: hidden;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 6px;
+    display: block;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  `,
+  activeThemeBox: css`
+    border-color: ${token.colorPrimary};
+    box-shadow: 0 0 0 1px ${token.colorPrimary};
+  `,
+  themeCheck: css`
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${token.colorPrimary};
+    color: ${token.colorTextLightSolid};
+  `,
+  themeName: css`
+    min-height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    text-align: center;
+  `,
+  swatchesBox: css`
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+  `,
+  colorSwatch: css`
+    box-sizing: border-box;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: ${token.colorTextLightSolid};
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid ${token.colorPrimary};
+      outline-offset: 3px;
+    }
+  `,
+  activeColorSwatch: css`
+    box-shadow: 0 0 0 2px ${token.colorBgBase}, 0 0 0 4px ${token.colorPrimary};
+  `,
+  languageSelect: css`
+    width: min(220px, 100%);
+  `,
+  fontControls: css`
+    width: 100%;
+    max-width: 640px;
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) 160px;
+    gap: 16px;
+
+    @container (max-width: 480px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  `,
+  fieldControl: css`
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+
+    .ant-select {
+      width: 100%;
+    }
+  `,
+  fieldLabel: css`
+    color: ${token.colorTextSecondary};
+    font-size: 12px;
+    line-height: 18px;
+  `,
+}));
diff --git a/chat2db-community-client/src/blocks/Setting/CommunitySetting.tsx b/chat2db-community-client/src/blocks/Setting/CommunitySetting.tsx
index 6eb8c9366a..4d9a758f77 100644
--- a/chat2db-community-client/src/blocks/Setting/CommunitySetting.tsx
+++ b/chat2db-community-client/src/blocks/Setting/CommunitySetting.tsx
@@ -1,16 +1,14 @@
 import i18n from '@/i18n';
+import { ClipboardPen, Info, Keyboard, SlidersHorizontal } from 'lucide-react';
 import { useEffect, useMemo } from 'react';
-import { history } from 'umi';
 import About from './About';
 import BaseSetting from './BaseSetting';
 import EditorSetting from './EditorSetting';
 import McpSetting from './McpSetting';
 import NetworkProxySetting from './NetworkProxySetting';
+import SettingLayout, { type SettingMenuItem } from './SettingLayout';
 import ShortcutSetting from './ShortcutSetting';
 
-import { IconButton, ListItem } from '@chat2db/ui';
-import { useStyles } from './style';
-
 import { runtimeEditionConfig } from '@/constants/runtimeEdition';
 import { useGlobalStore } from '@/store/global';
 
@@ -25,65 +23,67 @@ function CommunitySetting() {
     language: state.baseSetting.language,
   }));
 
-  const { styles } = useStyles();
-
-  function changeMenu(tab: string) {
-    setSettingPageActiveTab(tab);
-  }
-
   const menusList = useMemo(
-    () => [
-      {
-        title: i18n('setting.nav.basic'),
-        describe: i18n('setting.nav.basicDescribe'),
-        iconCode: 'icon-setting',
-        body: <BaseSetting />,
-        code: 'basic',
-      },
-      {
-        title: i18n('setting.nav.editSetting'),
-        describe: i18n('setting.nav.editSettingDescribe'),
-        iconCode: 'icon-clipboard1',
-        body: <EditorSetting />,
-        code: 'editSetting',
-      },
-      ...(runtimeEditionConfig.mcpSetting
-        ? [
-            {
-              title: i18n('setting.nav.mcp'),
-              describe: i18n('setting.nav.mcpDescribe'),
-              iconCode: 'icon-mcp',
-              body: <McpSetting />,
-              code: 'mcp',
-            },
-          ]
-        : []),
-      ...(runtimeEditionConfig.networkProxySetting
-        ? [
-            {
-              title: i18n('setting.nav.networkProxy'),
-              describe: i18n('setting.nav.networkProxyDescribe'),
-              iconCode: 'icon-wangluo',
-              body: <NetworkProxySetting />,
-              code: 'networkProxy',
-            },
-          ]
-        : []),
-      {
-        title: i18n('setting.nav.shortcut'),
-        describe: '',
-        iconCode: 'icon-a-kuaijiejian1',
-        body: <ShortcutSetting />,
-        code: 'shortcut',
-      },
-      {
-        title: i18n('setting.nav.aboutUs'),
-        describe: i18n('setting.nav.aboutUsDescribe'),
-        iconCode: 'icon-exclamation-circle',
-        body: <About />,
-        code: 'about',
-      },
-    ],
+    () =>
+      [
+        {
+          title: i18n('setting.nav.basic'),
+          describe: i18n('setting.nav.basicDescribe'),
+          group: 'general' as const,
+          icon: SlidersHorizontal,
+          body: <BaseSetting />,
+          code: 'basic',
+        },
+        {
+          title: i18n('setting.nav.editSetting'),
+          describe: i18n('setting.nav.editSettingDescribe'),
+          group: 'general' as const,
+          icon: ClipboardPen,
+          body: <EditorSetting />,
+          code: 'editSetting',
+        },
+        ...(runtimeEditionConfig.mcpSetting
+          ? [
+              {
+                title: i18n('setting.nav.mcp'),
+                describe: i18n('setting.text.mcpDescribe'),
+                group: 'services' as const,
+                iconCode: 'icon-mcp',
+                body: <McpSetting />,
+                code: 'mcp',
+              },
+            ]
+          : []),
+        ...(runtimeEditionConfig.networkProxySetting
+          ? [
+              {
+                title: i18n('setting.nav.networkProxy'),
+                describe: i18n('setting.text.networkProxyDescribe'),
+                group: 'services' as const,
+                iconCode: 'icon-wangluo',
+                body: <NetworkProxySetting />,
+                code: 'networkProxy',
+              },
+            ]
+          : []),
+        {
+          title: i18n('setting.nav.shortcut'),
+          describe: i18n('setting.nav.shortcutDescribe'),
+          group: 'general' as const,
+          icon: Keyboard,
+          body: <ShortcutSetting />,
+          code: 'shortcut',
+        },
+        {
+          title: i18n('setting.nav.aboutUs'),
+          describe: i18n('setting.nav.aboutUsDescribe'),
+          group: 'information' as const,
+          hidePageHeader: true,
+          icon: Info,
+          body: <About />,
+          code: 'about',
+        },
+      ] satisfies SettingMenuItem[],
     [language],
   );
 
@@ -94,39 +94,7 @@ function CommunitySetting() {
   }, [menusList, settingPageActiveTab, setSettingPageActiveTab]);
 
   return (
-    <div className={styles.settingBox}>
-      <div className={styles.header}>
-        <div className={styles.headerTitle}>{i18n('setting.title.setting')}</div>
-        <IconButton
-          className={styles.headerClose}
-          onClick={() => {
-            const pathName = window.location.pathname.split('/')[1];
-            setSettingPageActiveTab(false);
-            if (pathName === 'settings') {
-              history.push('/');
-            }
-          }}
-          size="lg"
-          code="icon-close"
-        />
-      </div>
-      <div className={styles.content}>
-        <div className={styles.left}>
-          {menusList.map((item) => (
-            <ListItem
-              key={item.code}
-              isActive={settingPageActiveTab === item.code}
-              code={item.iconCode}
-              title={item.title}
-              onClick={changeMenu.bind(null, item.code)}
-            />
-          ))}
-        </div>
-        <div className={styles.menuContent}>
-          {menusList.map((item) => (settingPageActiveTab === item.code ? item.body : null))}
-        </div>
-      </div>
-    </div>
+    <SettingLayout activeTab={settingPageActiveTab} menus={menusList} onActiveTabChange={setSettingPageActiveTab} />
   );
 }
 
diff --git a/chat2db-community-client/src/blocks/Setting/DeviceCer/index.tsx b/chat2db-community-client/src/blocks/Setting/DeviceCer/index.tsx
index 5c6d68f00d..e5c109fac2 100644
--- a/chat2db-community-client/src/blocks/Setting/DeviceCer/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/DeviceCer/index.tsx
@@ -77,8 +77,6 @@ const DeviceCer = () => {
 
   return (
     <div className={styles.wrapper}>
-      <div className={styles.mainTitle}>{i18n('license.deviceCertificateTitle')}</div>
-
       <SettingSubsection
         title={i18n('license.getDeviceCertificateTitle')}
         describe={
diff --git a/chat2db-community-client/src/blocks/Setting/DeviceCer/style.ts b/chat2db-community-client/src/blocks/Setting/DeviceCer/style.ts
index 318cc119e1..8021a78cc2 100644
--- a/chat2db-community-client/src/blocks/Setting/DeviceCer/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/DeviceCer/style.ts
@@ -3,12 +3,9 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => {
   return {
     wrapper: css`
-      min-width: 480px;
-    `,
-    mainTitle: css`
-      font-size: 28px;
-      font-weight: 700;
-      margin-bottom: 48px;
+      width: 100%;
+      min-width: 0;
+      padding-top: 24px;
     `,
 
     title: css``,
diff --git a/chat2db-community-client/src/blocks/Setting/EditorSetting/index.tsx b/chat2db-community-client/src/blocks/Setting/EditorSetting/index.tsx
index f4a99fe20a..bfee576530 100644
--- a/chat2db-community-client/src/blocks/Setting/EditorSetting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/EditorSetting/index.tsx
@@ -1,9 +1,7 @@
 import { useMemo } from 'react';
 import i18n from '@/i18n';
 import { useStyles } from './style';
-import SettingSubsection from '../SettingSubsection';
-import { useCommonStyle } from '../commonStyle';
-import { Form, InputNumber, Radio, Col, Row, Input, Select, Switch } from 'antd';
+import { Form, Input, InputNumber, Radio, Select, Switch } from 'antd';
 import { useGlobalStore } from '@/store/global';
 
 import { DEFAULT_EDITOR_SETTINGS, MonacoEditor, editorFontFamily, editorThemes } from '@/components/SQLEditor';
@@ -13,7 +11,8 @@ import { osNow } from '@/utils';
 import { v4 as uuid } from 'uuid';
 import { databaseMap } from '@/constants';
 import { useUpdateEffect } from 'ahooks';
-import { ChevronDown } from 'lucide-react';
+import { Braces, ChevronDown, Monitor, Palette, Play } from 'lucide-react';
+import SearchTargetLabel from '../SearchTargetLabel';
 
 const THEMES = Object.entries(editorThemes).map(([key]) => ({ label: key, value: key }));
 const FONT_FAMILIES = Object.entries(editorFontFamily).map(([key, value]) => ({ label: key, value }));
@@ -25,7 +24,6 @@ const { isMac, isWin } = osNow();
 function EditorSettings() {
   const { styles, theme } = useStyles();
   const { appearance } = theme;
-  const { styles: commonStyles } = useCommonStyle();
   const [form] = Form.useForm();
   const { updateEditorSettings, _editorSettings, getEditorTheme } = useGlobalStore((s) => ({
     _editorSettings: s.editorSettings,
@@ -73,120 +71,192 @@ function EditorSettings() {
   const monacoEditorId = useMemo(() => uuid(), []);
 
   return (
-    <div className={commonStyles.containerBlock}>
-      <SettingSubsection title={i18n('setting.nav.editSetting')} describe={i18n('setting.nav.editSettingDescribe')} />
-
-      <div className={styles.container}>
-        <Form
-          form={form}
-          layout="vertical"
-          name="login"
-          initialValues={{ ...DEFAULT_EDITOR_SETTINGS, ...editorSettings }}
-          onValuesChange={handleValuesChange}
-          className={styles.formWrapper}
-        >
-          <Form.Item
-            name="theme"
-            label={i18n('monaco.theme')}
-            style={{ width: '50%', minWidth: '160px' }}
-            tooltip={{
-              title: i18n('monaco.theme.tooltip'),
-            }}
-          >
-            <InteractiveSelect
-              onChange={(value) => {
-                form.setFieldsValue({ theme: value });
+    <div className={styles.container}>
+      <Form
+        form={form}
+        layout="vertical"
+        name="login"
+        initialValues={{ ...DEFAULT_EDITOR_SETTINGS, ...editorSettings }}
+        onValuesChange={handleValuesChange}
+        className={styles.formWrapper}
+      >
+        <section className={styles.settingSection} data-editor-setting-group="appearance">
+          <h2 className={styles.sectionTitle}>
+            <Palette aria-hidden="true" className={styles.sectionIcon} size={17} strokeWidth={1.8} />
+            <span>{i18n('monaco.group.appearance')}</span>
+          </h2>
+          <div className={styles.fieldGrid}>
+            <Form.Item
+              className={styles.fullWidthField}
+              name="theme"
+              label={<SearchTargetLabel targetId="editor.theme">{i18n('monaco.theme')}</SearchTargetLabel>}
+              tooltip={{
+                title: i18n('monaco.theme.tooltip'),
               }}
-              options={THEMES}
-              popupMatchSelectWidth
-            />
-          </Form.Item>
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item
-                name="fontFamily"
-                label={i18n('monaco.fontFamily')}
-                style={{ width: '50%', minWidth: '160px' }}
-              >
-                <InteractiveSelect
-                  onChange={(value) => {
-                    form.setFieldsValue({ fontFamily: value });
-                  }}
-                  options={fontFamilies}
-                />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item
-                tooltip={{
-                  title: i18n('monaco.customFontFamily.tooltip'),
+            >
+              <InteractiveSelect
+                onChange={(value) => {
+                  form.setFieldsValue({ theme: value });
                 }}
-                name="customFontFamily"
-                label={i18n('setting.title.customFont')}
-                style={{ width: '50%', minWidth: '160px' }}
-              >
-                <Input />
-              </Form.Item>
-            </Col>
-          </Row>
-
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item name="fontSize" label={i18n('monaco.fontSize')}>
-                <InputNumber min={12} max={24} step={1} addonAfter="px" />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              <Form.Item name="lineHeight" label={i18n('monaco.lineHeight')}>
-                <InputNumber min={1} max={3} step={0.1} precision={1} />
-              </Form.Item>
-            </Col>
-          </Row>
-
-          <Form.Item name="lineNumbers" label={i18n('monaco.lineNumbers')}>
-            <Radio.Group>
-              <Radio value="on">{i18n('monaco.lineNumbers.on')}</Radio>
-              <Radio value="off">{i18n('monaco.lineNumbers.off')}</Radio>
-            </Radio.Group>
-          </Form.Item>
+                options={THEMES}
+                popupMatchSelectWidth
+              />
+            </Form.Item>
+            <Form.Item
+              name="fontFamily"
+              label={<SearchTargetLabel targetId="editor.fontFamily">{i18n('monaco.fontFamily')}</SearchTargetLabel>}
+            >
+              <InteractiveSelect
+                onChange={(value) => {
+                  form.setFieldsValue({ fontFamily: value });
+                }}
+                options={fontFamilies}
+              />
+            </Form.Item>
+            <Form.Item
+              tooltip={{
+                title: i18n('monaco.customFontFamily.tooltip'),
+              }}
+              name="customFontFamily"
+              label={
+                <SearchTargetLabel targetId="editor.customFontFamily">
+                  {i18n('setting.title.customFont')}
+                </SearchTargetLabel>
+              }
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="fontSize"
+              label={<SearchTargetLabel targetId="editor.fontSize">{i18n('monaco.fontSize')}</SearchTargetLabel>}
+            >
+              <InputNumber min={12} max={24} step={1} addonAfter="px" />
+            </Form.Item>
+            <Form.Item
+              name="lineHeight"
+              label={<SearchTargetLabel targetId="editor.lineHeight">{i18n('monaco.lineHeight')}</SearchTargetLabel>}
+              tooltip={i18n('monaco.lineHeight.tooltip')}
+            >
+              <InputNumber min={1} max={3} step={0.1} precision={1} />
+            </Form.Item>
+          </div>
+        </section>
 
-          <Form.Item name={['minimap', 'enabled']} label={i18n('monaco.minimap')}>
-            <Radio.Group>
-              <Radio value={true}>{i18n('monaco.minimap.on')}</Radio>
-              <Radio value={false}>{i18n('monaco.minimap.off')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name="wordWrap" label={i18n('monaco.wordWrap')}>
-            <Radio.Group>
-              <Radio value={'on'}>{i18n('monaco.wordWrap.on')}</Radio>
-              <Radio value={'off'}>{i18n('monaco.wordWrap.off')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name="folding" label={i18n('monaco.folding')}>
-            <Radio.Group>
-              <Radio value={true}>{i18n('monaco.minimap.on')}</Radio>
-              <Radio value={false}>{i18n('monaco.minimap.off')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Col span={12}>
-            <Form.Item name="renderLineHighlight" label={i18n('monaco.renderLineHighlight')}>
+        <section className={styles.settingSection} data-editor-setting-group="display">
+          <h2 className={styles.sectionTitle}>
+            <Monitor aria-hidden="true" className={styles.sectionIcon} size={17} strokeWidth={1.8} />
+            <span>{i18n('monaco.group.display')}</span>
+          </h2>
+          <div className={styles.fieldGrid}>
+            <Form.Item
+              name="lineNumbers"
+              label={<SearchTargetLabel targetId="editor.lineNumbers">{i18n('monaco.lineNumbers')}</SearchTargetLabel>}
+            >
+              <Radio.Group>
+                <Radio value="on">{i18n('monaco.lineNumbers.on')}</Radio>
+                <Radio value="off">{i18n('monaco.lineNumbers.off')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name={['minimap', 'enabled']}
+              label={<SearchTargetLabel targetId="editor.minimap">{i18n('monaco.minimap')}</SearchTargetLabel>}
+              tooltip={i18n('monaco.minimap.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value={true}>{i18n('monaco.minimap.on')}</Radio>
+                <Radio value={false}>{i18n('monaco.minimap.off')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="wordWrap"
+              label={<SearchTargetLabel targetId="editor.wordWrap">{i18n('monaco.wordWrap')}</SearchTargetLabel>}
+              tooltip={i18n('monaco.wordWrap.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value="on">{i18n('monaco.wordWrap.on')}</Radio>
+                <Radio value="off">{i18n('monaco.wordWrap.off')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="folding"
+              label={<SearchTargetLabel targetId="editor.folding">{i18n('monaco.folding')}</SearchTargetLabel>}
+              tooltip={i18n('monaco.folding.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value={true}>{i18n('monaco.minimap.on')}</Radio>
+                <Radio value={false}>{i18n('monaco.minimap.off')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="renderLineHighlight"
+              label={
+                <SearchTargetLabel targetId="editor.renderLineHighlight">
+                  {i18n('monaco.renderLineHighlight')}
+                </SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.renderLineHighlight.tooltip')}
+            >
               <Select
                 suffixIcon={<ChevronDown size={14} />}
-                options={['line', 'none', 'gutter', 'all'].map((value) => ({
-                  label: value.toUpperCase(),
-                  value,
-                }))}
+                options={[
+                  { label: i18n('monaco.renderLineHighlight.line'), value: 'line' },
+                  { label: i18n('monaco.renderLineHighlight.none'), value: 'none' },
+                  { label: i18n('monaco.renderLineHighlight.gutter'), value: 'gutter' },
+                  { label: i18n('monaco.renderLineHighlight.all'), value: 'all' },
+                ]}
               />
             </Form.Item>
-          </Col>
-          <Form.Item name="keywordCase" label={i18n('monaco.keywordCase')}>
-            <Radio.Group>
-              <Radio value={true}>{i18n('monaco.keywordCase.upper')}</Radio>
-              <Radio value={false}>{i18n('monaco.keywordCase.lower')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Col span={12}>
-            <Form.Item name="completion" label={i18n('monaco.completion.all')}>
+            <Form.Item
+              name={['stickyScroll', 'enabled']}
+              label={
+                <SearchTargetLabel targetId="editor.stickyScroll">{i18n('monaco.stickyScroll')}</SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.stickyScroll.tooltip')}
+              valuePropName="checked"
+            >
+              <Switch />
+            </Form.Item>
+          </div>
+        </section>
+
+        <section className={styles.settingSection} data-editor-setting-group="completion">
+          <h2 className={styles.sectionTitle}>
+            <Braces aria-hidden="true" className={styles.sectionIcon} size={17} strokeWidth={1.8} />
+            <span>{i18n('monaco.group.completion')}</span>
+          </h2>
+          <div className={styles.fieldGrid}>
+            <Form.Item
+              name="keywordCase"
+              label={<SearchTargetLabel targetId="editor.keywordCase">{i18n('monaco.keywordCase')}</SearchTargetLabel>}
+              tooltip={i18n('monaco.keywordCase.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value={true}>{i18n('monaco.keywordCase.upper')}</Radio>
+                <Radio value={false}>{i18n('monaco.keywordCase.lower')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              name="completionAcceptKey"
+              label={
+                <SearchTargetLabel targetId="editor.completionAcceptKey">
+                  {i18n('monaco.completionAcceptKey')}
+                </SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.completionAcceptKey.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value="enter">{i18n('monaco.completionAcceptKey.enter')}</Radio>
+                <Radio value="tab">{i18n('monaco.completionAcceptKey.tab')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item
+              className={styles.fullWidthField}
+              name="completion"
+              label={
+                <SearchTargetLabel targetId="editor.completion">{i18n('monaco.completion.all')}</SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.completion.all.tooltip')}
+            >
               <Select
                 mode="multiple"
                 suffixIcon={<ChevronDown size={14} />}
@@ -196,40 +266,55 @@ function EditorSettings() {
                 }))}
               />
             </Form.Item>
-          </Col>
-          <Form.Item name="errorContinue" label={i18n('monaco.errorContinue')}>
-            <Radio.Group>
-              <Radio value={true}>{i18n('monaco.errorContinue.true')}</Radio>
-              <Radio value={false}>{i18n('monaco.errorContinue.false')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name="tableDDLTriggerMode" label={i18n('monaco.tableDDLTriggerMode')}>
-            <Radio.Group>
-              {ddlTriggerOptions.map((option) => (
-                <Radio key={option.value} value={option.value}>
-                  {option.label}
-                </Radio>
-              ))}
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name="completionAcceptKey" label={i18n('monaco.completionAcceptKey')}>
-            <Radio.Group>
-              <Radio value="enter">{i18n('monaco.completionAcceptKey.enter')}</Radio>
-              <Radio value="tab">{i18n('monaco.completionAcceptKey.tab')}</Radio>
-            </Radio.Group>
-          </Form.Item>
-          <Form.Item name={['stickyScroll', 'enabled']} label={i18n('monaco.stickyScroll')}>
-            <Switch />
-          </Form.Item>
-        </Form>
-        <div className={styles.editorWrapper}>
-          <MonacoEditor
-            id={monacoEditorId}
-            options={{
-              value: exampleSQL,
-            }}
-          />
-        </div>
+            <Form.Item
+              className={styles.fullWidthField}
+              name="tableDDLTriggerMode"
+              label={
+                <SearchTargetLabel targetId="editor.tableDDLTriggerMode">
+                  {i18n('monaco.tableDDLTriggerMode')}
+                </SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.tableDDLTriggerMode.tooltip', ddlClickModifierKey)}
+            >
+              <Radio.Group>
+                {ddlTriggerOptions.map((option) => (
+                  <Radio key={option.value} value={option.value}>
+                    {option.label}
+                  </Radio>
+                ))}
+              </Radio.Group>
+            </Form.Item>
+          </div>
+        </section>
+
+        <section className={styles.settingSection} data-editor-setting-group="execution">
+          <h2 className={styles.sectionTitle}>
+            <Play aria-hidden="true" className={styles.sectionIcon} size={17} strokeWidth={1.8} />
+            <span>{i18n('monaco.group.execution')}</span>
+          </h2>
+          <div className={styles.fieldGrid}>
+            <Form.Item
+              name="errorContinue"
+              label={
+                <SearchTargetLabel targetId="editor.errorContinue">{i18n('monaco.errorContinue')}</SearchTargetLabel>
+              }
+              tooltip={i18n('monaco.errorContinue.tooltip')}
+            >
+              <Radio.Group>
+                <Radio value={true}>{i18n('monaco.errorContinue.true')}</Radio>
+                <Radio value={false}>{i18n('monaco.errorContinue.false')}</Radio>
+              </Radio.Group>
+            </Form.Item>
+          </div>
+        </section>
+      </Form>
+      <div className={styles.editorWrapper}>
+        <MonacoEditor
+          id={monacoEditorId}
+          options={{
+            value: exampleSQL,
+          }}
+        />
       </div>
     </div>
   );
diff --git a/chat2db-community-client/src/blocks/Setting/EditorSetting/style.ts b/chat2db-community-client/src/blocks/Setting/EditorSetting/style.ts
index 519da8c409..179f60eb13 100644
--- a/chat2db-community-client/src/blocks/Setting/EditorSetting/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/EditorSetting/style.ts
@@ -3,20 +3,88 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
-      display: flex;
-      gap: 20px;
       width: 100%;
+      padding-top: 24px;
+      display: flex;
+      gap: 32px;
+
+      @container (max-width: 960px) {
+        flex-direction: column;
+      }
     `,
     formWrapper: css`
       flex: 1;
-      min-width: 240px;
+      min-width: 0;
+    `,
+    settingSection: css`
+      width: 100%;
+      padding-bottom: 24px;
+
+      & + & {
+        padding-top: 24px;
+        border-top: 1px solid ${token.colorSplit};
+      }
+
+      &:last-child {
+        padding-bottom: 0;
+      }
+    `,
+    sectionTitle: css`
+      margin: 0 0 18px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 22px;
+    `,
+    sectionIcon: css`
+      flex: 0 0 auto;
+      color: ${token.colorPrimary};
+    `,
+    fieldGrid: css`
+      width: 100%;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      column-gap: 18px;
+
+      :global(.ant-form-item) {
+        min-width: 0;
+        margin-bottom: 18px;
+      }
+
+      :global(.ant-select),
+      :global(.ant-input-number-group-wrapper),
+      :global(.ant-input-number) {
+        width: 100%;
+      }
+
+      @container (max-width: 520px) {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    `,
+    fullWidthField: css`
+      grid-column: 1 / -1;
     `,
     editorWrapper: css`
       /* max-height: calc(100vh - 120px); */
       /* max-height: calc(100vh - 60px); */
       /* border: 1px solid ${token.colorBorderSecondary}; */
       /* padding-top: 8px; */
+      position: sticky;
+      top: 24px;
       flex: 1;
+      min-width: 0;
+      height: clamp(420px, calc(100vh - 190px), 720px);
+      overflow: hidden;
+
+      @container (max-width: 960px) {
+        position: static;
+        width: 100%;
+        height: 420px;
+        min-height: 320px;
+        flex: none;
+      }
     `,
   };
 });
diff --git a/chat2db-community-client/src/blocks/Setting/License/index.tsx b/chat2db-community-client/src/blocks/Setting/License/index.tsx
index de12a59fbe..d9c62f145e 100644
--- a/chat2db-community-client/src/blocks/Setting/License/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/License/index.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useStyles } from './style';
 import i18n from '@/i18n';
-import SettingSubsection from '../SettingSubsection';
 import { Flex, Button } from 'antd';
 import { useUserStore } from '@/store/user';
 import { useGlobalStore } from '@/store/global';
@@ -150,7 +149,6 @@ const License = () => {
   return (
     <div className={styles.wrapper}>
       <Flex vertical gap={8}>
-        <SettingSubsection title={i18n('setting.license.title')} describe={i18n('setting.license.titleDes')} />
         <div className={styles.colWrapper}>
           <Flex align="center" gap={12}>
             <div className={styles.colTitle}>{i18n('setting.license.title')}</div>
diff --git a/chat2db-community-client/src/blocks/Setting/License/style.ts b/chat2db-community-client/src/blocks/Setting/License/style.ts
index dd7c7594b7..81b29cf5be 100644
--- a/chat2db-community-client/src/blocks/Setting/License/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/License/style.ts
@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => {
   return {
     wrapper: css`
+      padding-top: 24px;
       display: flex;
       flex-direction: column;
       gap: 16px;
diff --git a/chat2db-community-client/src/blocks/Setting/McpSetting/index.tsx b/chat2db-community-client/src/blocks/Setting/McpSetting/index.tsx
index a1cdba0231..2c33bcb5b1 100644
--- a/chat2db-community-client/src/blocks/Setting/McpSetting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/McpSetting/index.tsx
@@ -55,17 +55,19 @@ export default function McpSetting() {
 
   return (
     <div className={styles.baseSettingBox}>
-      <div>
-        <SettingSubsection title={i18n('setting.title.mcp')} describe={i18n('setting.text.mcpDescribe')} />
+      <div data-setting-search-id="mcp.service">
         <Form className={styles.customFontBox}>
-          <Switch checked={!!enableMcp} onChange={changeMcpEnabled} />
+          <Switch aria-label={i18n('setting.title.mcp')} checked={!!enableMcp} onChange={changeMcpEnabled} />
           <Button onClick={restartApp}>{i18n('setting.button.restartApp')}</Button>
         </Form>
       </div>
-      <div>
-        <SettingSubsection title={i18n('setting.title.mcpToken')} describe={i18n('setting.text.mcpTokenDescribe')} />
+      <div data-setting-search-id="mcp.token">
+        <SettingSubsection
+          title={<span data-setting-search-title="true">{i18n('setting.title.mcpToken')}</span>}
+          describe={i18n('setting.text.mcpTokenDescribe')}
+        />
         <Form className={styles.customFontBox}>
-          <Input.Password readOnly value={token} style={{ width: 420 }} />
+          <Input.Password readOnly value={token} style={{ flex: '1 1 280px', maxWidth: 420, minWidth: 0 }} />
           <Button onClick={copyToken}>{i18n('common.button.copy')}</Button>
           <Popconfirm
             title={i18n('setting.text.mcpTokenResetConfirm')}
diff --git a/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/index.tsx b/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/index.tsx
index 45d6650dac..6097b15885 100644
--- a/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/index.tsx
@@ -4,15 +4,11 @@ import { CircleHelp } from 'lucide-react';
 import { staticMessage } from '@chat2db/ui';
 import i18n from '@/i18n';
 import jcefApi from '@/jcef';
-import networkProxyService, {
-  INetworkProxySettings,
-  NetworkProxyMode,
-  NetworkProxyType,
-} from '@/service/networkProxy';
-import SettingSubsection from '../SettingSubsection';
+import networkProxyService, { INetworkProxySettings, NetworkProxyMode, NetworkProxyType } from '@/service/networkProxy';
 import { useStyles as useBaseStyles } from '../BaseSetting/style';
 import { useStyles } from './style';
 import { beginLatestRequest, invalidateLatestRequest, isLatestRequest } from '@/utils/latestRequest';
+import SearchTargetLabel from '../SearchTargetLabel';
 
 const defaultProxySettings: INetworkProxySettings = {
   mode: NetworkProxyMode.NO_PROXY,
@@ -85,16 +81,6 @@ export default function NetworkProxySetting() {
   return (
     <div className={baseStyles.baseSettingBox}>
       <div>
-        <SettingSubsection
-          className={styles.subsection}
-          title={
-            <span className={styles.titleWithHelp}>
-              {i18n('setting.title.networkProxy')}
-              <HelpTooltip title={i18n('setting.networkProxy.modeTip')} />
-            </span>
-          }
-          describe={i18n('setting.text.networkProxyDescribe')}
-        />
         <Form
           form={form}
           className={styles.form}
@@ -104,7 +90,16 @@ export default function NetworkProxySetting() {
             testUrl: 'https://www.google.com',
           }}
         >
-          <Form.Item name="mode" label={i18n('setting.networkProxy.mode')} className={styles.modeItem}>
+          <Form.Item
+            name="mode"
+            label={
+              <SearchTargetLabel className={styles.titleWithHelp} targetId="networkProxy.mode">
+                {i18n('setting.networkProxy.mode')}
+                <HelpTooltip title={i18n('setting.networkProxy.modeTip')} />
+              </SearchTargetLabel>
+            }
+            className={styles.modeItem}
+          >
             <Radio.Group className={styles.modeGroup}>
               <ModeRadio
                 value={NetworkProxyMode.NO_PROXY}
@@ -156,7 +151,12 @@ export default function NetworkProxySetting() {
             </>
           )}
 
-          <Form.Item name="testUrl" label={i18n('setting.networkProxy.testUrl')}>
+          <Form.Item
+            name="testUrl"
+            label={
+              <SearchTargetLabel targetId="networkProxy.test">{i18n('setting.networkProxy.testUrl')}</SearchTargetLabel>
+            }
+          >
             <Input placeholder="https://www.google.com" autoComplete="off" />
           </Form.Item>
 
diff --git a/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/style.ts b/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/style.ts
index 4cb3b1a383..f82b59fb70 100644
--- a/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/NetworkProxySetting/style.ts
@@ -1,11 +1,6 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(({ css, token }) => ({
-  subsection: css`
-    :global(.ant-divider) {
-      display: none;
-    }
-  `,
   titleWithHelp: css`
     display: inline-flex;
     align-items: center;
@@ -25,6 +20,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   modeGroup: css`
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
     gap: 30px;
 
     :global(.ant-radio-wrapper) {
@@ -41,9 +37,14 @@ export const useStyles = createStyles(({ css, token }) => ({
     display: grid;
     grid-template-columns: minmax(0, 1fr) 160px;
     gap: 16px;
+
+    @container (max-width: 480px) {
+      grid-template-columns: minmax(0, 1fr);
+    }
   `,
   actions: css`
     display: flex;
+    flex-wrap: wrap;
     gap: 12px;
     align-items: center;
   `,
diff --git a/chat2db-community-client/src/blocks/Setting/Personal/index.tsx b/chat2db-community-client/src/blocks/Setting/Personal/index.tsx
index 2d6db9e840..2789557e93 100644
--- a/chat2db-community-client/src/blocks/Setting/Personal/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/Personal/index.tsx
@@ -28,7 +28,7 @@ export default function Personal() {
       <PlanBox openActivationCodeModal={modal === 'activationCode'} activationCode={activationCode} />
       <div className={commonStyles.containerBlock}>
         <SettingSubsection
-          title={i18n('setting.nav.personal')}
+          title={i18n('setting.nav.personalInformation')}
           describe={i18n('setting.nav.personalInformationDescribe')}
         />
         <ChangePersonal curUser={curUser} updateUser={updateUser} />
diff --git a/chat2db-community-client/src/blocks/Setting/Personal/style.ts b/chat2db-community-client/src/blocks/Setting/Personal/style.ts
index b21f758a1b..286d141ea3 100644
--- a/chat2db-community-client/src/blocks/Setting/Personal/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/Personal/style.ts
@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => {
   return {
     personalBox: css`
+      padding-top: 24px;
       display: flex;
       flex-direction: column;
       gap: 30px;
diff --git a/chat2db-community-client/src/blocks/Setting/SearchTargetLabel.tsx b/chat2db-community-client/src/blocks/Setting/SearchTargetLabel.tsx
new file mode 100644
index 0000000000..50d06635f1
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/SearchTargetLabel.tsx
@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+interface SearchTargetLabelProps {
+  children: ReactNode;
+  className?: string;
+  targetId: string;
+}
+
+export default function SearchTargetLabel({ children, className, targetId }: SearchTargetLabelProps) {
+  return (
+    <span className={className} data-setting-search-id={targetId}>
+      {children}
+    </span>
+  );
+}
diff --git a/chat2db-community-client/src/blocks/Setting/SettingLayout.tsx b/chat2db-community-client/src/blocks/Setting/SettingLayout.tsx
new file mode 100644
index 0000000000..86fe0be676
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/SettingLayout.tsx
@@ -0,0 +1,294 @@
+import i18n from '@/i18n';
+import { IconfontSvg, SearchBar } from '@chat2db/ui';
+import { X, type LucideIcon } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { history } from 'umi';
+import { groupSettingMenuItems, type SettingNavigationGroupCode } from './navigation';
+import {
+  getSettingTargetScrollTop,
+  isSettingsSearchShortcut,
+  searchSettings,
+  type SettingSearchResult,
+} from './search';
+import { getSettingSearchItems } from './searchCatalog';
+import { useStyles } from './style';
+
+interface SettingMenuItemBase {
+  body: ReactNode;
+  code: string;
+  describe: string;
+  group: SettingNavigationGroupCode;
+  hidePageHeader?: boolean;
+  title: string;
+}
+
+type SettingMenuIcon =
+  | { icon: LucideIcon; iconCode?: never }
+  | { icon?: never; iconCode: string };
+
+export type SettingMenuItem = SettingMenuItemBase & SettingMenuIcon;
+
+interface SettingLayoutProps {
+  activeTab: string | false;
+  menus: SettingMenuItem[];
+  onActiveTabChange: (tab: string | false) => void;
+}
+
+type I18nKey = Parameters<typeof i18n>[0];
+
+interface SearchBarHandle {
+  blur: () => void;
+  focus: () => void;
+}
+
+const groupTitleKeys: Record<SettingNavigationGroupCode, I18nKey> = {
+  general: 'setting.nav.group.general',
+  services: 'setting.nav.group.services',
+  account: 'setting.nav.group.account',
+  information: 'setting.nav.group.information',
+};
+
+export default function SettingLayout({ activeTab, menus, onActiveTabChange }: SettingLayoutProps) {
+  const { styles, cx } = useStyles();
+  const settingBoxRef = useRef<HTMLDivElement>(null);
+  const menuContentRef = useRef<HTMLElement>(null);
+  const searchBarRef = useRef<SearchBarHandle>(null);
+  const highlightedSearchTargetRef = useRef<HTMLElement | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSearchResultKey, setSelectedSearchResultKey] = useState<string | null>(null);
+  const [pendingSearchTarget, setPendingSearchTarget] = useState<{
+    menuCode: string;
+    targetId: string;
+  } | null>(null);
+  const menuGroups = groupSettingMenuItems(menus);
+  const activeMenu = menus.find((item) => item.code === activeTab) ?? menus[0];
+  const searchableMenus = useMemo(
+    () => menus.map((menu) => ({ ...menu, searchItems: getSettingSearchItems(menu.code) })),
+    [menus],
+  );
+  const searchResults = useMemo(() => searchSettings(searchableMenus, searchQuery), [searchQuery, searchableMenus]);
+  const isSearching = !!searchQuery.trim();
+
+  useEffect(() => {
+    const focusSettingsSearch = (event: KeyboardEvent) => {
+      if (!isSettingsSearchShortcut(event)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      searchBarRef.current?.focus();
+    };
+
+    document.addEventListener('keydown', focusSettingsSearch, true);
+    return () => document.removeEventListener('keydown', focusSettingsSearch, true);
+  }, []);
+
+  useEffect(
+    () => () => {
+      highlightedSearchTargetRef.current?.removeAttribute('data-setting-search-highlighted');
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!pendingSearchTarget || activeTab !== pendingSearchTarget.menuCode) {
+      return;
+    }
+
+    let targetFrame = 0;
+    const pageFrame = window.requestAnimationFrame(() => {
+      targetFrame = window.requestAnimationFrame(() => {
+        const target = settingBoxRef.current?.querySelector<HTMLElement>(
+          `[data-setting-search-id="${pendingSearchTarget.targetId}"]`,
+        );
+        if (target) {
+          if (target.dataset.settingSearchExpandable === 'true' && target.getAttribute('aria-expanded') === 'false') {
+            target.click();
+          }
+          highlightedSearchTargetRef.current?.removeAttribute('data-setting-search-highlighted');
+          target.setAttribute('data-setting-search-highlighted', 'true');
+          highlightedSearchTargetRef.current = target;
+          const menuContent = menuContentRef.current;
+          if (menuContent) {
+            const menuContentRect = menuContent.getBoundingClientRect();
+            const targetRect = target.getBoundingClientRect();
+            menuContent.scrollTo({
+              behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+              top: getSettingTargetScrollTop({
+                containerHeight: menuContent.clientHeight,
+                containerTop: menuContentRect.top,
+                scrollTop: menuContent.scrollTop,
+                targetHeight: targetRect.height,
+                targetTop: targetRect.top,
+              }),
+            });
+          }
+        }
+        setPendingSearchTarget(null);
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(pageFrame);
+      if (targetFrame) {
+        window.cancelAnimationFrame(targetFrame);
+      }
+    };
+  }, [activeTab, pendingSearchTarget]);
+
+  function closeSettings() {
+    const pathName = window.location.pathname.split('/')[1];
+    onActiveTabChange(false);
+    if (pathName === 'settings') {
+      history.push('/');
+    }
+  }
+
+  function openSearchResult(result: SettingSearchResult) {
+    highlightedSearchTargetRef.current?.removeAttribute('data-setting-search-highlighted');
+    highlightedSearchTargetRef.current = null;
+    setSelectedSearchResultKey(result.key);
+    onActiveTabChange(result.menuCode);
+    setPendingSearchTarget(
+      result.targetId
+        ? {
+            menuCode: result.menuCode,
+            targetId: result.targetId,
+          }
+        : null,
+    );
+  }
+
+  function updateSearchQuery(value: string) {
+    highlightedSearchTargetRef.current?.removeAttribute('data-setting-search-highlighted');
+    highlightedSearchTargetRef.current = null;
+    setPendingSearchTarget(null);
+    setSelectedSearchResultKey(null);
+    setSearchQuery(value);
+  }
+
+  return (
+    <div className={styles.settingBox} ref={settingBoxRef}>
+      <header className={styles.header}>
+        <div className={styles.headerTitle}>{i18n('setting.title.setting')}</div>
+        <button
+          aria-label={i18n('common.button.close')}
+          className={styles.headerClose}
+          onClick={closeSettings}
+          title={i18n('common.button.close')}
+          type="button"
+        >
+          <X aria-hidden="true" size={18} strokeWidth={1.8} />
+        </button>
+      </header>
+      <div className={styles.content}>
+        <nav aria-label={i18n('setting.title.setting')} className={styles.left}>
+          <div className={styles.searchWrap}>
+            <SearchBar
+              aria-label={i18n('common.text.search')}
+              className={styles.searchBar}
+              onChange={(event) => updateSearchQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  updateSearchQuery('');
+                }
+              }}
+              placeholder={i18n('common.text.search')}
+              ref={searchBarRef}
+              value={searchQuery}
+            />
+          </div>
+          <div className={cx(styles.navContent, { [styles.navContentSearch]: isSearching })}>
+            {isSearching ? (
+              searchResults.length ? (
+                searchResults.map((result) => {
+                  const menu = menus.find((item) => item.code === result.menuCode);
+                  if (!menu) {
+                    return null;
+                  }
+                  const isSelected = selectedSearchResultKey === result.key;
+                  return (
+                    <button
+                      aria-current={isSelected ? 'location' : undefined}
+                      className={cx(styles.searchResult, { [styles.searchResultActive]: isSelected })}
+                      key={result.key}
+                      onClick={() => openSearchResult(result)}
+                      type="button"
+                    >
+                      <SettingMenuIcon className={styles.navItemIcon} item={menu} />
+                      <span className={styles.searchResultText}>
+                        <span className={styles.searchResultTitle} data-setting-search-result-title="true">
+                          {result.title}
+                        </span>
+                        {result.title !== result.menuTitle ? (
+                          <span className={styles.searchResultPage}>{result.menuTitle}</span>
+                        ) : null}
+                      </span>
+                    </button>
+                  );
+                })
+              ) : (
+                <div className={styles.searchEmpty}>{i18n('common.text.noData')}</div>
+              )
+            ) : (
+              menuGroups.map((group) => {
+                const groupLabelId = `setting-navigation-${group.code}`;
+                return (
+                  <div aria-labelledby={groupLabelId} className={styles.navGroup} key={group.code} role="group">
+                    <div className={styles.navGroupLabel} id={groupLabelId}>
+                      {i18n(groupTitleKeys[group.code])}
+                    </div>
+                    <div className={styles.navGroupItems}>
+                      {group.items.map((item) => {
+                        const isActive = activeTab === item.code;
+                        return (
+                          <button
+                            aria-current={isActive ? 'page' : undefined}
+                            className={cx(styles.navItem, { [styles.navItemActive]: isActive })}
+                            key={item.code}
+                            onClick={() => onActiveTabChange(item.code)}
+                            type="button"
+                          >
+                            <SettingMenuIcon className={styles.navItemIcon} item={item} />
+                            <span>{item.title}</span>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </nav>
+        <main
+          aria-label={activeMenu?.hidePageHeader ? activeMenu.title : undefined}
+          aria-labelledby={activeMenu?.hidePageHeader ? undefined : 'setting-page-title'}
+          className={styles.menuContent}
+          ref={menuContentRef}
+        >
+          <div className={styles.menuContentInner}>
+            {activeMenu?.hidePageHeader ? null : (
+              <div className={styles.pageHeader}>
+                <h1 className={styles.pageTitle} id="setting-page-title">
+                  {activeMenu?.title}
+                </h1>
+                {activeMenu?.describe ? <p className={styles.pageDescription}>{activeMenu.describe}</p> : null}
+              </div>
+            )}
+            <div className={styles.pageBody}>{activeMenu?.body}</div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+function SettingMenuIcon({ className, item }: { className: string; item: SettingMenuItem }) {
+  if (item.iconCode) {
+    return <IconfontSvg aria-hidden="true" className={className} code={item.iconCode} size={18} />;
+  }
+
+  const MenuIcon = item.icon;
+  return <MenuIcon aria-hidden="true" className={className} size={18} strokeWidth={1.8} />;
+}
diff --git a/chat2db-community-client/src/blocks/Setting/ShortcutSetting/index.tsx b/chat2db-community-client/src/blocks/Setting/ShortcutSetting/index.tsx
index 884e82bb42..03ea02c7f7 100644
--- a/chat2db-community-client/src/blocks/Setting/ShortcutSetting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/ShortcutSetting/index.tsx
@@ -4,7 +4,6 @@ import { ChevronDown, ChevronRight } from 'lucide-react';
 import { staticMessage } from '@chat2db/ui';
 import { useStyles } from './style';
 import { useGlobalStore } from '@/store/global';
-import SettingSubsection from '../SettingSubsection';
 import ShortcutInput from './ShortcutInput';
 import { i18n } from '@/i18n';
 import {
@@ -24,30 +23,37 @@ type I18nKey = Parameters<typeof i18n>[0];
 
 const SHORTCUT_SCOPE_GROUPS: Array<{
   scope: ShortcutScope;
+  targetId: string;
   title: I18nKey;
 }> = [
   {
     scope: ShortcutScope.Global,
+    targetId: 'shortcut.global',
     title: 'setting.shortcut.group.global',
   },
   {
     scope: ShortcutScope.Workspace,
+    targetId: 'shortcut.workspace',
     title: 'setting.shortcut.group.workspace',
   },
   {
     scope: ShortcutScope.LocalSqlFileTree,
+    targetId: 'shortcut.localSqlFileTree',
     title: 'setting.shortcut.group.localSqlFileTree',
   },
   {
     scope: ShortcutScope.SqlEditor,
+    targetId: 'shortcut.sqlEditor',
     title: 'setting.shortcut.group.sqlEditor',
   },
   {
     scope: ShortcutScope.ResultSet,
+    targetId: 'shortcut.resultSet',
     title: 'setting.shortcut.group.resultSet',
   },
   {
     scope: ShortcutScope.Table,
+    targetId: 'shortcut.table',
     title: 'setting.shortcut.group.table',
   },
 ];
@@ -175,11 +181,6 @@ export default function ShortcutSetting() {
 
   return (
     <div className={styles.container}>
-      <SettingSubsection
-        className={styles.subsectionWithoutDivider}
-        title={i18n('setting.nav.shortcut')}
-        describe={i18n('setting.nav.shortcutDescribe')}
-      />
       <div className={styles.toolbar}>
         <Button onClick={resetAllShortcutConfig}>{i18n('setting.shortcut.table.resetAll')}</Button>
       </div>
@@ -193,11 +194,20 @@ export default function ShortcutSetting() {
 
           return (
             <section key={group.scope} className={styles.groupSection}>
-              <Button type="text" className={styles.groupHeader} onClick={() => toggleGroup(group.scope)}>
+              <Button
+                aria-expanded={!collapsed}
+                className={styles.groupHeader}
+                data-setting-search-expandable="true"
+                data-setting-search-id={group.targetId}
+                onClick={() => toggleGroup(group.scope)}
+                type="text"
+              >
                 <span className={styles.groupArrow}>
                   {collapsed ? <ChevronRight size={14} /> : <ChevronDown size={14} />}
                 </span>
-                <span className={styles.groupTitle}>{i18n(group.title)}</span>
+                <span className={styles.groupTitle} data-setting-search-title="true">
+                  {i18n(group.title)}
+                </span>
               </Button>
               {!collapsed && (
                 <Table
diff --git a/chat2db-community-client/src/blocks/Setting/ShortcutSetting/style.ts b/chat2db-community-client/src/blocks/Setting/ShortcutSetting/style.ts
index 28454bf655..8595879d16 100644
--- a/chat2db-community-client/src/blocks/Setting/ShortcutSetting/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/ShortcutSetting/style.ts
@@ -3,6 +3,7 @@ import { createStyles } from 'antd-style';
 export const useStyles = createStyles(({ css, token }) => {
   return {
     container: css`
+      padding-top: 24px;
       display: flex;
       flex-direction: column;
       gap: 20px;
@@ -12,11 +13,6 @@ export const useStyles = createStyles(({ css, token }) => {
         background: ${token.colorBgContainer};
       }
     `,
-    subsectionWithoutDivider: css`
-      .ant-divider {
-        display: none;
-      }
-    `,
     toolbar: css`
       display: flex;
       justify-content: flex-end;
diff --git a/chat2db-community-client/src/blocks/Setting/index.tsx b/chat2db-community-client/src/blocks/Setting/index.tsx
index 22b05eec6b..ed1e82c02a 100644
--- a/chat2db-community-client/src/blocks/Setting/index.tsx
+++ b/chat2db-community-client/src/blocks/Setting/index.tsx
@@ -1,7 +1,17 @@
 import PurchaseDetails from '@/components/PurchaseDetails';
 import i18n from '@/i18n';
+import {
+  BadgePlus,
+  ClipboardPen,
+  Info,
+  Keyboard,
+  MonitorCheck,
+  ReceiptText,
+  ShieldCheck,
+  SlidersHorizontal,
+  UserRound,
+} from 'lucide-react';
 import { useEffect, useMemo } from 'react';
-import { history } from 'umi';
 import About from './About';
 import BaseSetting from './BaseSetting';
 import EditorSetting from './EditorSetting';
@@ -10,9 +20,7 @@ import License from './License';
 import McpSetting from './McpSetting';
 import NetworkProxySetting from './NetworkProxySetting';
 import Personal from './Personal';
-
-import { IconButton, ListItem } from '@chat2db/ui';
-import { useStyles } from './style';
+import SettingLayout, { type SettingMenuItem } from './SettingLayout';
 
 // ---- store -----
 import { runtimeEditionConfig } from '@/constants/runtimeEdition';
@@ -35,26 +43,22 @@ function Setting() {
     };
   });
 
-  const { styles } = useStyles();
-
-  function changeMenu(t: any) {
-    setSettingPageActiveTab(t);
-  }
-
   const menusList = useMemo(() => {
     if (runtimeEditionConfig.settingMenuProfile === 'community') {
       return [
         {
           title: i18n('setting.nav.basic'),
           describe: i18n('setting.nav.basicDescribe'),
-          iconCode: 'icon-setting',
+          group: 'general' as const,
+          icon: SlidersHorizontal,
           body: <BaseSetting />,
           code: 'basic',
         },
         {
           title: i18n('setting.nav.editSetting'),
           describe: i18n('setting.nav.editSettingDescribe'),
-          iconCode: 'icon-clipboard1',
+          group: 'general' as const,
+          icon: ClipboardPen,
           body: <EditorSetting />,
           code: 'editSetting',
         },
@@ -62,7 +66,8 @@ function Setting() {
           ? [
               {
                 title: i18n('setting.nav.mcp'),
-                describe: i18n('setting.nav.mcpDescribe'),
+                describe: i18n('setting.text.mcpDescribe'),
+                group: 'services' as const,
                 iconCode: 'icon-mcp',
                 body: <McpSetting />,
                 code: 'mcp',
@@ -73,7 +78,8 @@ function Setting() {
           ? [
               {
                 title: i18n('setting.nav.networkProxy'),
-                describe: i18n('setting.nav.networkProxyDescribe'),
+                describe: i18n('setting.text.networkProxyDescribe'),
+                group: 'services' as const,
                 iconCode: 'icon-wangluo',
                 body: <NetworkProxySetting />,
                 code: 'networkProxy',
@@ -82,19 +88,22 @@ function Setting() {
           : []),
         {
           title: i18n('setting.nav.shortcut'),
-          describe: '',
-          iconCode: 'icon-a-kuaijiejian1',
+          describe: i18n('setting.nav.shortcutDescribe'),
+          group: 'general' as const,
+          icon: Keyboard,
           body: <ShortcutSetting />,
           code: 'shortcut',
         },
         {
           title: i18n('setting.nav.aboutUs'),
           describe: i18n('setting.nav.aboutUsDescribe'),
-          iconCode: 'icon-exclamation-circle',
+          group: 'information' as const,
+          hidePageHeader: true,
+          icon: Info,
           body: <About />,
           code: 'about',
         },
-      ];
+      ] satisfies SettingMenuItem[];
     }
 
     if (runtimeEditionConfig.settingMenuProfile === 'local') {
@@ -102,14 +111,16 @@ function Setting() {
         {
           title: i18n('setting.nav.basic'),
           describe: i18n('setting.nav.basicDescribe'),
-          iconCode: 'icon-setting',
+          group: 'general' as const,
+          icon: SlidersHorizontal,
           body: <BaseSetting />,
           code: 'basic',
         },
         {
           title: i18n('setting.nav.editSetting'),
           describe: i18n('setting.nav.editSettingDescribe'),
-          iconCode: 'icon-clipboard1',
+          group: 'general' as const,
+          icon: ClipboardPen,
           body: <EditorSetting />,
           code: 'editSetting',
         },
@@ -117,7 +128,8 @@ function Setting() {
           ? [
               {
                 title: i18n('setting.nav.mcp'),
-                describe: i18n('setting.nav.mcpDescribe'),
+                describe: i18n('setting.text.mcpDescribe'),
+                group: 'services' as const,
                 iconCode: 'icon-mcp',
                 body: <McpSetting />,
                 code: 'mcp',
@@ -128,7 +140,8 @@ function Setting() {
           ? [
               {
                 title: i18n('setting.nav.networkProxy'),
-                describe: i18n('setting.nav.networkProxyDescribe'),
+                describe: i18n('setting.text.networkProxyDescribe'),
+                group: 'services' as const,
                 iconCode: 'icon-wangluo',
                 body: <NetworkProxySetting />,
                 code: 'networkProxy',
@@ -137,8 +150,9 @@ function Setting() {
           : []),
         {
           title: i18n('setting.nav.shortcut'),
-          describe: '',
-          iconCode: 'icon-a-kuaijiejian1',
+          describe: i18n('setting.nav.shortcutDescribe'),
+          group: 'general' as const,
+          icon: Keyboard,
           body: <ShortcutSetting />,
           code: 'shortcut',
         },
@@ -147,7 +161,8 @@ function Setting() {
               {
                 title: i18n('setting.license.title'),
                 describe: i18n('setting.license.titleDes'),
-                iconCode: 'icon-plus-1',
+                group: 'account' as const,
+                icon: ShieldCheck,
                 body: <License />,
                 code: 'license',
               },
@@ -156,32 +171,37 @@ function Setting() {
         {
           title: i18n('setting.nav.aboutUs'),
           describe: i18n('setting.nav.aboutUsDescribe'),
-          iconCode: 'icon-exclamation-circle',
+          group: 'information' as const,
+          hidePageHeader: true,
+          icon: Info,
           body: <About />,
           code: 'about',
         },
-      ];
+      ] satisfies SettingMenuItem[];
     }
 
     const list = [
       {
         title: i18n('setting.nav.basic'),
         describe: i18n('setting.nav.basicDescribe'),
-        iconCode: 'icon-setting',
+        group: 'general' as const,
+        icon: SlidersHorizontal,
         body: <BaseSetting />,
         code: 'basic',
       },
       {
         title: i18n('setting.nav.personal'),
         describe: i18n('setting.nav.personalDescribe'),
-        iconCode: 'icon-user-circle',
+        group: 'account' as const,
+        icon: UserRound,
         body: <Personal />,
         code: 'personal',
       },
       {
         title: i18n('setting.nav.editSetting'),
         describe: i18n('setting.nav.editSettingDescribe'),
-        iconCode: 'icon-clipboard1',
+        group: 'general' as const,
+        icon: ClipboardPen,
         body: <EditorSetting />,
         code: 'editSetting',
       },
@@ -189,7 +209,8 @@ function Setting() {
         ? [
             {
               title: i18n('setting.nav.mcp'),
-              describe: i18n('setting.nav.mcpDescribe'),
+              describe: i18n('setting.text.mcpDescribe'),
+              group: 'services' as const,
               iconCode: 'icon-mcp',
               body: <McpSetting />,
               code: 'mcp',
@@ -200,7 +221,8 @@ function Setting() {
         ? [
             {
               title: i18n('setting.nav.networkProxy'),
-              describe: i18n('setting.nav.networkProxyDescribe'),
+              describe: i18n('setting.text.networkProxyDescribe'),
+              group: 'services' as const,
               iconCode: 'icon-wangluo',
               body: <NetworkProxySetting />,
               code: 'networkProxy',
@@ -209,8 +231,9 @@ function Setting() {
         : []),
       {
         title: i18n('setting.nav.shortcut'),
-        describe: '',
-        iconCode: 'icon-a-kuaijiejian1',
+        describe: i18n('setting.nav.shortcutDescribe'),
+        group: 'general' as const,
+        icon: Keyboard,
         body: <ShortcutSetting />,
         code: 'shortcut',
       },
@@ -224,32 +247,37 @@ function Setting() {
       {
         title: i18n('invite.setting.nav.title'),
         describe: '',
-        iconCode: 'icon-plus-1',
+        group: 'account' as const,
+        icon: BadgePlus,
         body: <Invite />,
         code: 'invite',
       },
       {
         title: i18n('setting.purchaseDetails.title'),
         describe: '',
-        iconCode: 'icon-purchase-details',
-        body: <PurchaseDetails />,
+        group: 'account' as const,
+        icon: ReceiptText,
+        body: <PurchaseDetails hideTitle />,
         code: 'purchase',
       },
       {
         title: i18n('license.deviceCertificateTitle'),
         describe: '',
-        iconCode: 'icon-xingzhuang',
+        group: 'account' as const,
+        icon: MonitorCheck,
         body: <DeviceCer />,
         code: 'deviceCer',
       },
       {
         title: i18n('setting.nav.aboutUs'),
         describe: i18n('setting.nav.aboutUsDescribe'),
-        iconCode: 'icon-exclamation-circle',
+        group: 'information' as const,
+        hidePageHeader: true,
+        icon: Info,
         body: <About />,
         code: 'about',
       },
-    ];
+    ] satisfies SettingMenuItem[];
 
     return list;
   }, [language, isCN]);
@@ -261,43 +289,7 @@ function Setting() {
   }, [menusList, settingPageActiveTab, setSettingPageActiveTab]);
 
   return (
-    <div className={styles.settingBox}>
-      <div className={styles.header}>
-        <div className={styles.headerTitle}>{i18n('setting.title.setting')}</div>
-        <IconButton
-          className={styles.headerClose}
-          onClick={() => {
-            const pathName = window.location.pathname.split('/')[1];
-            setSettingPageActiveTab(false);
-            if (pathName === 'settings') {
-              history.push('/');
-            }
-          }}
-          size="lg"
-          code="icon-close"
-        />
-      </div>
-      <div className={styles.content}>
-        <div className={styles.left}>
-          {menusList.map((t) => {
-            return (
-              <ListItem
-                key={t.code}
-                isActive={settingPageActiveTab === t.code}
-                code={t.iconCode}
-                title={t.title}
-                onClick={changeMenu.bind(null, t.code)}
-              />
-            );
-          })}
-        </div>
-        <div className={styles.menuContent}>
-          {menusList.map((t) => {
-            return settingPageActiveTab === t.code ? t.body : null;
-          })}
-        </div>
-      </div>
-    </div>
+    <SettingLayout activeTab={settingPageActiveTab} menus={menusList} onActiveTabChange={setSettingPageActiveTab} />
   );
 }
 
diff --git a/chat2db-community-client/src/blocks/Setting/navigation.test.ts b/chat2db-community-client/src/blocks/Setting/navigation.test.ts
new file mode 100644
index 0000000000..a1788ef9f0
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/navigation.test.ts
@@ -0,0 +1,22 @@
+import assert from 'node:assert/strict';
+import { groupSettingMenuItems } from './navigation';
+
+const groups = groupSettingMenuItems([
+  { code: 'about', group: 'information' as const },
+  { code: 'basic', group: 'general' as const },
+  { code: 'networkProxy', group: 'services' as const },
+  { code: 'shortcut', group: 'general' as const },
+]);
+
+assert.deepEqual(
+  groups.map((group) => group.code),
+  ['general', 'services', 'information'],
+  'navigation groups follow the stable settings hierarchy and omit empty groups',
+);
+assert.deepEqual(
+  groups[0].items.map((item) => item.code),
+  ['basic', 'shortcut'],
+  'items keep their original order inside a navigation group',
+);
+
+console.log('Settings navigation grouping tests passed.');
diff --git a/chat2db-community-client/src/blocks/Setting/navigation.ts b/chat2db-community-client/src/blocks/Setting/navigation.ts
new file mode 100644
index 0000000000..deeee98d8e
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/navigation.ts
@@ -0,0 +1,19 @@
+export const SETTING_NAVIGATION_GROUPS = ['general', 'services', 'account', 'information'] as const;
+
+export type SettingNavigationGroupCode = (typeof SETTING_NAVIGATION_GROUPS)[number];
+
+export interface GroupableSettingMenuItem {
+  group: SettingNavigationGroupCode;
+}
+
+export interface SettingNavigationGroup<T> {
+  code: SettingNavigationGroupCode;
+  items: T[];
+}
+
+export function groupSettingMenuItems<T extends GroupableSettingMenuItem>(items: T[]): SettingNavigationGroup<T>[] {
+  return SETTING_NAVIGATION_GROUPS.map((code) => ({
+    code,
+    items: items.filter((item) => item.group === code),
+  })).filter((group) => group.items.length > 0);
+}
diff --git a/chat2db-community-client/src/blocks/Setting/search.test.ts b/chat2db-community-client/src/blocks/Setting/search.test.ts
new file mode 100644
index 0000000000..f74deb5e96
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/search.test.ts
@@ -0,0 +1,88 @@
+import assert from 'node:assert/strict';
+import {
+  getSettingTargetScrollTop,
+  isSettingsSearchShortcut,
+  searchSettings,
+  type SearchableSettingMenu,
+} from './search';
+
+const menus: SearchableSettingMenu[] = [
+  {
+    code: 'basic',
+    title: '基础设置',
+    describe: '',
+    searchItems: [
+      { targetId: 'basic.appearance', title: '外观', keywords: ['theme', '主题色'] },
+      { targetId: 'basic.language', title: '语言', keywords: ['locale'] },
+    ],
+  },
+  {
+    code: 'editSetting',
+    title: '编辑器设置',
+    describe: '配置 SQL 编辑体验',
+    searchItems: [
+      { targetId: 'editor.stickyScroll', title: '粘性滚动', keywords: ['sticky scroll'] },
+      { targetId: 'editor.completionAcceptKey', title: '补全接受键', keywords: ['completion key', 'enter', 'tab'] },
+    ],
+  },
+];
+
+assert.deepEqual(searchSettings(menus, ''), [], 'blank queries do not enter search mode');
+assert.equal(searchSettings(menus, '编辑器')[0]?.key, 'editSetting:page', 'page names are searchable');
+assert.equal(searchSettings(menus, '编辑体验')[0]?.key, 'editSetting:page', 'page descriptions are searchable');
+assert.equal(
+  searchSettings(menus, '粘性')[0]?.targetId,
+  'editor.stickyScroll',
+  'localized setting names are searchable',
+);
+assert.equal(
+  searchSettings(menus, 'sticky scroll')[0]?.targetId,
+  'editor.stickyScroll',
+  'multi-word aliases are searchable',
+);
+assert.equal(searchSettings(menus, 'locale')[0]?.targetId, 'basic.language', 'technical aliases are searchable');
+assert.equal(searchSettings(menus, 'missing').length, 0, 'unknown terms return no results');
+assert.equal(
+  isSettingsSearchShortcut({ altKey: false, code: 'KeyF', ctrlKey: false, metaKey: true, shiftKey: false }),
+  true,
+  'Cmd+F focuses settings search',
+);
+assert.equal(
+  isSettingsSearchShortcut({ altKey: false, code: 'KeyF', ctrlKey: true, metaKey: false, shiftKey: false }),
+  true,
+  'Ctrl+F focuses settings search',
+);
+assert.equal(
+  isSettingsSearchShortcut({ altKey: false, code: 'KeyF', ctrlKey: false, metaKey: false, shiftKey: false }),
+  false,
+  'plain F remains available to controls',
+);
+assert.equal(
+  isSettingsSearchShortcut({ altKey: false, code: 'KeyF', ctrlKey: true, metaKey: true, shiftKey: false }),
+  false,
+  'combined system modifiers are not treated as settings search',
+);
+assert.equal(
+  getSettingTargetScrollTop({
+    containerHeight: 600,
+    containerTop: 100,
+    scrollTop: 200,
+    targetHeight: 40,
+    targetTop: 700,
+  }),
+  520,
+  'the exact setting is centered in the settings content scroller',
+);
+assert.equal(
+  getSettingTargetScrollTop({
+    containerHeight: 600,
+    containerTop: 100,
+    scrollTop: 0,
+    targetHeight: 40,
+    targetTop: 120,
+  }),
+  0,
+  'centering never requests a negative scroll position',
+);
+
+console.log('Settings search tests passed.');
diff --git a/chat2db-community-client/src/blocks/Setting/search.ts b/chat2db-community-client/src/blocks/Setting/search.ts
new file mode 100644
index 0000000000..4f2c7de0f4
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/search.ts
@@ -0,0 +1,96 @@
+export interface SettingSearchItem {
+  keywords?: readonly string[];
+  targetId?: string;
+  title: string;
+}
+
+export interface SearchableSettingMenu {
+  code: string;
+  describe: string;
+  searchItems?: readonly SettingSearchItem[];
+  title: string;
+}
+
+export interface SettingSearchResult {
+  key: string;
+  menuCode: string;
+  menuTitle: string;
+  targetId?: string;
+  title: string;
+}
+
+interface SettingTargetScrollMetrics {
+  containerHeight: number;
+  containerTop: number;
+  scrollTop: number;
+  targetHeight: number;
+  targetTop: number;
+}
+
+function normalizeSearchText(value: string) {
+  return value
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLocaleLowerCase()
+    .trim();
+}
+
+function matchesSearch(values: readonly string[], terms: readonly string[]) {
+  const haystack = normalizeSearchText(values.filter(Boolean).join(' '));
+  return terms.every((term) => haystack.includes(term));
+}
+
+export function searchSettings(menus: readonly SearchableSettingMenu[], query: string): SettingSearchResult[] {
+  const terms = normalizeSearchText(query)
+    .split(/\s+/)
+    .filter(Boolean);
+  if (!terms.length) {
+    return [];
+  }
+
+  const results: SettingSearchResult[] = [];
+
+  for (const menu of menus) {
+    if (matchesSearch([menu.title, menu.describe, menu.code], terms)) {
+      results.push({
+        key: `${menu.code}:page`,
+        menuCode: menu.code,
+        menuTitle: menu.title,
+        title: menu.title,
+      });
+    }
+
+    for (const [itemIndex, item] of (menu.searchItems ?? []).entries()) {
+      if (!matchesSearch([item.title, ...(item.keywords ?? [])], terms)) {
+        continue;
+      }
+      results.push({
+        key: `${menu.code}:${item.targetId ?? 'item'}:${itemIndex}`,
+        menuCode: menu.code,
+        menuTitle: menu.title,
+        targetId: item.targetId,
+        title: item.title,
+      });
+    }
+  }
+
+  return results;
+}
+
+type SettingsSearchShortcutEvent = Pick<KeyboardEvent, 'altKey' | 'code' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
+
+export function isSettingsSearchShortcut(event: SettingsSearchShortcutEvent) {
+  const hasSingleCommandModifier = (event.metaKey || event.ctrlKey) && !(event.metaKey && event.ctrlKey);
+  return event.code === 'KeyF' && hasSingleCommandModifier && !event.altKey && !event.shiftKey;
+}
+
+export function getSettingTargetScrollTop({
+  containerHeight,
+  containerTop,
+  scrollTop,
+  targetHeight,
+  targetTop,
+}: SettingTargetScrollMetrics) {
+  const targetOffset = scrollTop + targetTop - containerTop;
+  return Math.max(0, targetOffset - (containerHeight - targetHeight) / 2);
+}
diff --git a/chat2db-community-client/src/blocks/Setting/searchCatalog.ts b/chat2db-community-client/src/blocks/Setting/searchCatalog.ts
new file mode 100644
index 0000000000..0450f568fc
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/searchCatalog.ts
@@ -0,0 +1,96 @@
+import i18n from '@/i18n';
+import type { SettingSearchItem } from './search';
+
+export function getSettingSearchItems(menuCode: string): SettingSearchItem[] {
+  switch (menuCode) {
+    case 'basic':
+      return [
+        {
+          targetId: 'basic.appearance',
+          title: i18n('setting.title.appearance'),
+          keywords: [
+            i18n('setting.title.backgroundColor'),
+            i18n('setting.title.themeColor'),
+            i18n('setting.text.light'),
+            i18n('setting.text.dark'),
+            'appearance',
+            'theme',
+            'color',
+          ],
+        },
+        {
+          targetId: 'basic.language',
+          title: i18n('setting.title.language'),
+          keywords: ['language', 'locale'],
+        },
+        {
+          targetId: 'basic.typography',
+          title: i18n('setting.title.interfaceFont'),
+          keywords: [i18n('setting.title.customFont'), i18n('setting.title.customFontSize'), 'font', 'typography'],
+        },
+      ];
+    case 'editSetting':
+      return [
+        settingItem('editor.theme', 'monaco.theme', ['theme']),
+        settingItem('editor.fontFamily', 'monaco.fontFamily', ['font']),
+        settingItem('editor.customFontFamily', 'setting.title.customFont', ['custom font']),
+        settingItem('editor.fontSize', 'monaco.fontSize', ['font size']),
+        settingItem('editor.lineHeight', 'monaco.lineHeight', ['line height']),
+        settingItem('editor.lineNumbers', 'monaco.lineNumbers', ['line number']),
+        settingItem('editor.minimap', 'monaco.minimap', ['minimap']),
+        settingItem('editor.wordWrap', 'monaco.wordWrap', ['word wrap']),
+        settingItem('editor.folding', 'monaco.folding', ['folding']),
+        settingItem('editor.renderLineHighlight', 'monaco.renderLineHighlight', ['line highlight', 'gutter']),
+        settingItem('editor.stickyScroll', 'monaco.stickyScroll', ['sticky scroll']),
+        settingItem('editor.keywordCase', 'monaco.keywordCase', ['keyword case', 'upper', 'lower']),
+        settingItem('editor.completionAcceptKey', 'monaco.completionAcceptKey', ['completion key', 'enter', 'tab']),
+        settingItem('editor.completion', 'monaco.completion.all', ['qualified completion', 'autocomplete']),
+        settingItem('editor.tableDDLTriggerMode', 'monaco.tableDDLTriggerMode', ['ddl', 'hover', 'click']),
+        settingItem('editor.errorContinue', 'monaco.errorContinue', ['continue on error', 'execution']),
+      ];
+    case 'shortcut':
+      return [
+        settingItem('shortcut.global', 'setting.shortcut.group.global', ['application', 'app']),
+        settingItem('shortcut.workspace', 'setting.shortcut.group.workspace', ['workspace']),
+        settingItem('shortcut.localSqlFileTree', 'setting.shortcut.group.localSqlFileTree', [
+          'text file',
+          'sql file',
+          'file tree',
+        ]),
+        settingItem('shortcut.sqlEditor', 'setting.shortcut.group.sqlEditor', ['sql editor', 'query editor']),
+        settingItem('shortcut.resultSet', 'setting.shortcut.group.resultSet', ['result', 'result set']),
+        settingItem('shortcut.table', 'setting.shortcut.group.table', ['table', 'grid']),
+      ];
+    case 'mcp':
+      return [
+        {
+          targetId: 'mcp.token',
+          title: i18n('setting.title.mcpToken'),
+          keywords: ['mcp token', 'authentication', 'reset token'],
+        },
+      ];
+    case 'networkProxy':
+      return [
+        {
+          targetId: 'networkProxy.mode',
+          title: i18n('setting.networkProxy.mode'),
+          keywords: ['proxy mode', 'direct', 'system proxy', 'manual proxy'],
+        },
+        {
+          targetId: 'networkProxy.test',
+          title: i18n('setting.networkProxy.testUrl'),
+          keywords: [i18n('setting.networkProxy.testConnection'), 'test url', 'connection test'],
+        },
+      ];
+    default:
+      return [];
+  }
+}
+
+function settingItem(targetId: string, titleKey: Parameters<typeof i18n>[0], keywords: string[]): SettingSearchItem {
+  return {
+    targetId,
+    title: i18n(titleKey),
+    keywords,
+  };
+}
diff --git a/chat2db-community-client/src/blocks/Setting/settingsLayout.test.ts b/chat2db-community-client/src/blocks/Setting/settingsLayout.test.ts
new file mode 100644
index 0000000000..f14daefb24
--- /dev/null
+++ b/chat2db-community-client/src/blocks/Setting/settingsLayout.test.ts
@@ -0,0 +1,200 @@
+import assert from 'node:assert/strict';
+import { readFileSync } from 'node:fs';
+
+const settingLayoutSource = readFileSync('src/blocks/Setting/SettingLayout.tsx', 'utf8');
+const communitySettingSource = readFileSync('src/blocks/Setting/CommunitySetting.tsx', 'utf8');
+const settingSource = readFileSync('src/blocks/Setting/index.tsx', 'utf8');
+const baseSettingSource = readFileSync('src/blocks/Setting/BaseSetting/index.tsx', 'utf8');
+const editorSettingSource = readFileSync('src/blocks/Setting/EditorSetting/index.tsx', 'utf8');
+const mcpSettingSource = readFileSync('src/blocks/Setting/McpSetting/index.tsx', 'utf8');
+const networkProxySettingSource = readFileSync('src/blocks/Setting/NetworkProxySetting/index.tsx', 'utf8');
+const shortcutSettingSource = readFileSync('src/blocks/Setting/ShortcutSetting/index.tsx', 'utf8');
+const searchCatalogSource = readFileSync('src/blocks/Setting/searchCatalog.ts', 'utf8');
+const searchTargetLabelSource = readFileSync('src/blocks/Setting/SearchTargetLabel.tsx', 'utf8');
+const searchModelSource = readFileSync('src/blocks/Setting/search.ts', 'utf8');
+const shellStyleSource = readFileSync('src/blocks/Setting/style.ts', 'utf8');
+const baseStyleSource = readFileSync('src/blocks/Setting/BaseSetting/style.ts', 'utf8');
+const editorStyleSource = readFileSync('src/blocks/Setting/EditorSetting/style.ts', 'utf8');
+
+const appearanceGroupIndex = baseSettingSource.indexOf('data-setting-group="appearance"');
+const languageGroupIndex = baseSettingSource.indexOf('data-setting-group="language"');
+const typographyGroupIndex = baseSettingSource.indexOf('data-setting-group="typography"');
+const editorAppearanceGroupIndex = editorSettingSource.indexOf('data-editor-setting-group="appearance"');
+const editorDisplayGroupIndex = editorSettingSource.indexOf('data-editor-setting-group="display"');
+const editorCompletionGroupIndex = editorSettingSource.indexOf('data-editor-setting-group="completion"');
+const editorExecutionGroupIndex = editorSettingSource.indexOf('data-editor-setting-group="execution"');
+const editorTooltipKeys = [
+  'monaco.lineHeight.tooltip',
+  'monaco.minimap.tooltip',
+  'monaco.wordWrap.tooltip',
+  'monaco.folding.tooltip',
+  'monaco.renderLineHighlight.tooltip',
+  'monaco.stickyScroll.tooltip',
+  'monaco.keywordCase.tooltip',
+  'monaco.completionAcceptKey.tooltip',
+  'monaco.completion.all.tooltip',
+  'monaco.tableDDLTriggerMode.tooltip',
+  'monaco.errorContinue.tooltip',
+];
+const settingSearchTargetIds = [
+  'basic.appearance',
+  'basic.language',
+  'basic.typography',
+  'editor.theme',
+  'editor.fontFamily',
+  'editor.customFontFamily',
+  'editor.fontSize',
+  'editor.lineHeight',
+  'editor.lineNumbers',
+  'editor.minimap',
+  'editor.wordWrap',
+  'editor.folding',
+  'editor.renderLineHighlight',
+  'editor.stickyScroll',
+  'editor.keywordCase',
+  'editor.completionAcceptKey',
+  'editor.completion',
+  'editor.tableDDLTriggerMode',
+  'editor.errorContinue',
+  'shortcut.global',
+  'shortcut.workspace',
+  'shortcut.localSqlFileTree',
+  'shortcut.sqlEditor',
+  'shortcut.resultSet',
+  'shortcut.table',
+  'mcp.token',
+  'networkProxy.mode',
+  'networkProxy.test',
+];
+const searchableSettingSources = [
+  baseSettingSource,
+  editorSettingSource,
+  mcpSettingSource,
+  networkProxySettingSource,
+  shortcutSettingSource,
+].join('\n');
+const hiddenNetworkProxyTargetIds = [
+  'networkProxy.type',
+  'networkProxy.host',
+  'networkProxy.port',
+  'networkProxy.noProxyHosts',
+];
+
+assert.match(settingLayoutSource, /<nav\b/, 'the settings shell exposes navigation semantics');
+assert.match(settingLayoutSource, /<main\b/, 'the settings shell exposes a main content landmark');
+assert.match(settingLayoutSource, /<SearchBar\b/, 'settings reuse the data browser search component');
+assert.match(settingLayoutSource, /searchSettings\(/, 'settings search uses the shared matching model');
+assert.match(settingLayoutSource, /menuContent\.scrollTo/, 'search results scroll the settings content directly');
+assert.match(
+  settingLayoutSource,
+  /getSettingTargetScrollTop/,
+  'search results center the exact setting in the viewport',
+);
+assert.match(settingLayoutSource, /isSettingsSearchShortcut/, 'settings search handles Cmd/Ctrl+F');
+assert.match(settingLayoutSource, /ref=\{searchBarRef\}/, 'the settings shortcut focuses the shared search bar');
+assert.match(settingLayoutSource, /selectedSearchResultKey/, 'the selected search result remains visible');
+assert.match(
+  settingLayoutSource,
+  /data-setting-search-highlighted/,
+  'the selected setting receives a highlight target',
+);
+assert.match(
+  settingLayoutSource,
+  /dataset\.settingSearchExpandable[\s\S]*?target\.click\(\)/,
+  'searching a collapsed settings group expands it before navigation',
+);
+assert.match(shellStyleSource, /searchResultActive/, 'selected search results use an active style');
+assert.match(
+  shellStyleSource,
+  /\[data-setting-search-highlighted='true'\]/,
+  'the exact setting title uses a highlighted style',
+);
+assert.match(searchModelSource, /normalize\('NFKD'\)/, 'settings search is accent insensitive');
+assert.match(
+  searchTargetLabelSource,
+  /data-setting-search-id=\{targetId\}/,
+  'field search targets render on a real label element',
+);
+assert.match(settingLayoutSource, /aria-current=\{isActive \? 'page'/, 'the active settings destination is announced');
+assert.match(communitySettingSource, /<SettingLayout\b/, 'the Community entry uses the shared settings shell');
+assert.match(settingLayoutSource, /<IconfontSvg\b/, 'settings navigation supports retained product icons');
+assert.match(communitySettingSource, /iconCode: 'icon-mcp'/, 'Community MCP retains its product icon');
+assert.match(settingSource, /iconCode: 'icon-mcp'/, 'other editions retain the MCP product icon');
+assert.match(communitySettingSource, /iconCode: 'icon-wangluo'/, 'Community proxy retains its product icon');
+assert.match(settingSource, /iconCode: 'icon-wangluo'/, 'other editions retain the proxy product icon');
+assert.match(communitySettingSource, /icon: ClipboardPen/, 'Community editor settings use ClipboardPen');
+assert.match(settingSource, /icon: ClipboardPen/, 'other editions use ClipboardPen for editor settings');
+assert.match(baseSettingSource, /<Palette\b/, 'the appearance group uses the Lucide palette icon');
+assert.match(baseSettingSource, /<Globe\b/, 'the language group uses the Lucide globe icon');
+assert.match(baseSettingSource, /<button[\s\S]*?aria-pressed=\{isActive\}/, 'theme choices are native buttons');
+assert.match(baseSettingSource, /type="button"/, 'theme buttons do not submit surrounding forms');
+assert.match(baseSettingSource, /styles\.colorSwatch/, 'theme colors use keyboard-accessible swatch buttons');
+assert.ok(appearanceGroupIndex >= 0, 'basic settings expose an appearance group');
+assert.ok(languageGroupIndex > appearanceGroupIndex, 'language follows appearance');
+assert.ok(typographyGroupIndex > languageGroupIndex, 'interface typography follows language');
+assert.ok(editorAppearanceGroupIndex >= 0, 'editor settings expose an appearance group');
+assert.ok(editorDisplayGroupIndex > editorAppearanceGroupIndex, 'editor display follows appearance');
+assert.ok(editorCompletionGroupIndex > editorDisplayGroupIndex, 'completion follows editor display');
+assert.ok(editorExecutionGroupIndex > editorCompletionGroupIndex, 'SQL execution follows completion');
+assert.match(editorSettingSource, /<Palette\b/, 'editor appearance uses a Lucide icon');
+assert.match(editorSettingSource, /<Monitor\b/, 'editor display uses a Lucide icon');
+assert.match(editorSettingSource, /<Braces\b/, 'editor completion uses a Lucide icon');
+assert.match(editorSettingSource, /<Play\b/, 'editor execution uses a Lucide icon');
+for (const tooltipKey of editorTooltipKeys) {
+  assert.ok(editorSettingSource.includes(`i18n('${tooltipKey}'`), `${tooltipKey} is exposed as contextual help`);
+}
+for (const targetId of settingSearchTargetIds) {
+  assert.ok(searchCatalogSource.includes(`'${targetId}'`), `${targetId} is indexed for settings search`);
+  assert.ok(
+    searchableSettingSources.includes(`data-setting-search-id="${targetId}"`) ||
+      searchableSettingSources.includes(`targetId="${targetId}"`) ||
+      searchableSettingSources.includes(`'${targetId}'`),
+    `${targetId} has a navigable page target`,
+  );
+}
+for (const targetId of hiddenNetworkProxyTargetIds) {
+  assert.ok(
+    !searchCatalogSource.includes(`'${targetId}'`),
+    `${targetId} is omitted because the control only exists in manual proxy mode`,
+  );
+}
+assert.match(
+  editorSettingSource,
+  /monaco\.renderLineHighlight\.line/,
+  'line highlight choices use readable localized labels',
+);
+assert.match(shellStyleSource, /@media \(max-width: 760px\)/, 'the settings shell defines a narrow layout');
+assert.match(
+  baseStyleSource,
+  /container-type:\s*inline-size/,
+  'basic settings respond to their available content width',
+);
+assert.match(baseStyleSource, /@container \(max-width:/, 'setting rows stack before controls become cramped');
+assert.match(editorStyleSource, /@container \(max-width:/, 'editor settings stack within a narrow content area');
+assert.match(editorStyleSource, /height:\s*clamp\(420px/, 'the Monaco preview has a stable parent height');
+assert.doesNotMatch(editorSettingSource, /SettingSubsection/, 'the shared page header owns the editor title');
+assert.doesNotMatch(networkProxySettingSource, /SettingSubsection/, 'the shared page header owns the proxy title');
+assert.doesNotMatch(shortcutSettingSource, /SettingSubsection/, 'the shared page header owns the shortcut title');
+assert.doesNotMatch(
+  mcpSettingSource,
+  /SettingSubsection title=\{i18n\('setting\.title\.mcp'\)\}/,
+  'the shared page header owns the MCP title',
+);
+assert.match(shortcutSettingSource, /aria-expanded=\{!collapsed\}/, 'shortcut groups expose their expanded state');
+assert.match(
+  shortcutSettingSource,
+  /data-setting-search-expandable="true"/,
+  'shortcut search results can expand collapsed groups',
+);
+assert.match(
+  communitySettingSource,
+  /hidePageHeader: true,[\s\S]*?body: <About \/>/,
+  'Community About renders its product information without a duplicate shared header',
+);
+assert.match(
+  settingSource,
+  /hidePageHeader: true,[\s\S]*?body: <About \/>/,
+  'other editions render About without a duplicate shared header',
+);
+
+console.log('Settings layout contract tests passed.');
diff --git a/chat2db-community-client/src/blocks/Setting/style.ts b/chat2db-community-client/src/blocks/Setting/style.ts
index 19132ef4c2..99a9e475fa 100644
--- a/chat2db-community-client/src/blocks/Setting/style.ts
+++ b/chat2db-community-client/src/blocks/Setting/style.ts
@@ -1,77 +1,309 @@
-import { createStyles, keyframes } from 'antd-style';
-
-export const useStyles = createStyles(({ css, token }) => {
-  // makes an animation for settingBox, which changes to full screen in 0.2s.
-  const settingBoxAnimation = keyframes`
-    from {
-      top: 10px;
-      left: 10px;
-      right: 10px;
-      bottom: 10px;
-    }
-    to {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-  `
-  return {
-    settingBox: css`
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: ${token.colorBgBase};
-      /* animation: ${settingBoxAnimation} 0.5s forwards; */
-    `,
-    header: css`
-      height: 50px;
-      border-bottom: 1px solid ${token.colorBorderLayout};
-      padding: 0 20px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    `,
-    headerTitle: css`
-      line-height: 50px;
-      font-size: 28px;
-      font-weight: 500;
-    `,
-    headerClose: css`
-    `,
-    content: css`
-      display: flex;
-      height: calc(100% - 50px);
-    `,
-    left: css`
-      width: 200px;
-      background-color: ${token.colorBgBase};
-      padding: 10px 6px;
-      position: sticky;
-      top: 0;
-      display: flex;
+import { createStyles } from 'antd-style';
+
+export const useStyles = createStyles(({ css, token }) => ({
+  settingBox: css`
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    background-color: ${token.colorBgBase};
+    color: ${token.colorText};
+  `,
+  header: css`
+    box-sizing: border-box;
+    height: 56px;
+    padding: 0 18px 0 22px;
+    border-bottom: 1px solid ${token.colorSplit};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: ${token.colorBgContainer};
+  `,
+  headerTitle: css`
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+  `,
+  headerClose: css`
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: ${token.colorTextSecondary};
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${token.colorFillSecondary};
+      color: ${token.colorText};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${token.colorPrimary};
+      outline-offset: 2px;
+    }
+  `,
+  content: css`
+    height: calc(100% - 56px);
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 236px minmax(0, 1fr);
+
+    @media (max-width: 760px) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-rows: auto minmax(0, 1fr);
+    }
+  `,
+  left: css`
+    min-height: 0;
+    border-right: 1px solid ${token.colorSplit};
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-color: ${token.colorBgContainer};
+
+    @media (max-width: 760px) {
+      border-right: 0;
+      border-bottom: 1px solid ${token.colorSplit};
+    }
+  `,
+  searchWrap: css`
+    box-sizing: border-box;
+    height: 42px;
+    padding: 0 10px;
+    border-bottom: 1px solid ${token.colorSplit};
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  `,
+  searchBar: css`
+    width: 100%;
+    max-width: 100%;
+    height: 25px;
+    background-color: ${token.colorFillTertiary};
+  `,
+  navContent: css`
+    min-height: 0;
+    padding: 18px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+
+    @media (max-width: 760px) {
+      padding: 8px 12px;
+      flex-direction: row;
+      gap: 4px;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+  `,
+  navContentSearch: css`
+    gap: 3px;
+
+    @media (max-width: 760px) {
+      max-height: min(240px, 35vh);
       flex-direction: column;
-      gap: 6px;
-    `,
-    rightSlot: css`
-      flex: 1;
-      display: flex;
-      justify-content: flex-end;
-    `,
-    rightSlotAbout: css`
-      i {
-        font-size: 18px;
-        color: var(--color-error);
-      }
-    `,
-    menuContent: css`
-      min-height: 400px;
-      box-sizing: border-box;
+      overflow-x: hidden;
       overflow-y: auto;
-      padding: 20px 30px;
-      flex: 1;
-    `,
-  };
-});
+    }
+  `,
+  navGroup: css`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    @media (max-width: 760px) {
+      display: contents;
+    }
+  `,
+  navGroupLabel: css`
+    padding: 0 10px;
+    color: ${token.colorTextSecondary};
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 22px;
+
+    @media (max-width: 760px) {
+      display: none;
+    }
+  `,
+  navGroupItems: css`
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+
+    @media (max-width: 760px) {
+      display: contents;
+    }
+  `,
+  navItem: css`
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 38px;
+    padding: 8px 10px;
+    border: 0;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: transparent;
+    color: ${token.colorTextSecondary};
+    font: inherit;
+    line-height: 22px;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${token.colorFillSecondary};
+      color: ${token.colorText};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${token.colorPrimary};
+      outline-offset: 1px;
+    }
+
+    @media (max-width: 760px) {
+      width: auto;
+      min-width: max-content;
+      flex: 0 0 auto;
+    }
+  `,
+  navItemActive: css`
+    background-color: ${token.colorPrimaryBg};
+    color: ${token.colorPrimary};
+    font-weight: 500;
+
+    &:hover {
+      background-color: ${token.colorPrimaryBg};
+      color: ${token.colorPrimary};
+    }
+  `,
+  navItemIcon: css`
+    flex: 0 0 auto;
+  `,
+  searchResult: css`
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 48px;
+    padding: 7px 10px;
+    border: 0;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    background: transparent;
+    color: ${token.colorTextSecondary};
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+
+    &:hover {
+      background-color: ${token.colorFillSecondary};
+      color: ${token.colorText};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${token.colorPrimary};
+      outline-offset: 1px;
+    }
+  `,
+  searchResultActive: css`
+    background-color: ${token.colorPrimaryBg};
+    color: ${token.colorPrimary};
+
+    [data-setting-search-result-title='true'] {
+      color: ${token.colorPrimary};
+      font-weight: 500;
+    }
+
+    &:hover {
+      background-color: ${token.colorPrimaryBg};
+      color: ${token.colorPrimary};
+    }
+  `,
+  searchResultText: css`
+    min-width: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1px;
+  `,
+  searchResultTitle: css`
+    overflow: hidden;
+    color: ${token.colorText};
+    font-size: 13px;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  searchResultPage: css`
+    overflow: hidden;
+    color: ${token.colorTextTertiary};
+    font-size: 12px;
+    line-height: 18px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+  searchEmpty: css`
+    padding: 28px 10px;
+    color: ${token.colorTextTertiary};
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+  `,
+  menuContent: css`
+    min-width: 0;
+    min-height: 0;
+    overflow-y: auto;
+    background-color: ${token.colorBgBase};
+  `,
+  menuContentInner: css`
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 100%;
+    margin: 0;
+    padding: 30px 40px 48px;
+
+    @media (max-width: 760px) {
+      padding: 22px 18px 36px;
+    }
+  `,
+  pageHeader: css`
+    padding-bottom: 22px;
+    border-bottom: 1px solid ${token.colorSplit};
+
+    @media (max-width: 760px) {
+      padding-bottom: 18px;
+    }
+  `,
+  pageTitle: css`
+    margin: 0;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+  `,
+  pageDescription: css`
+    max-width: 720px;
+    margin: 6px 0 0;
+    color: ${token.colorTextSecondary};
+    font-size: 13px;
+    line-height: 20px;
+  `,
+  pageBody: css`
+    min-width: 0;
+    container-type: inline-size;
+
+    [data-setting-search-highlighted='true'] {
+      color: ${token.colorPrimary} !important;
+
+      [data-setting-search-title='true'] {
+        color: ${token.colorPrimary} !important;
+      }
+    }
+  `,
+}));
diff --git a/chat2db-community-client/src/components/PurchaseDetails/index.tsx b/chat2db-community-client/src/components/PurchaseDetails/index.tsx
index 644a73ac44..1430bc57b3 100644
--- a/chat2db-community-client/src/components/PurchaseDetails/index.tsx
+++ b/chat2db-community-client/src/components/PurchaseDetails/index.tsx
@@ -17,6 +17,7 @@ import feedback from '@/utils/feedback';
 
 interface IProps {
   className?: string;
+  hideTitle?: boolean;
 }
 
 const SUBOTIZ_INVOICE_PORTAL_URL = 'https://checkout.subotiz.com/m/2821768/portal/login';
@@ -54,7 +55,7 @@ const unsubscribeReason = [
 ];
 
 export default memo<IProps>((props) => {
-  const { className } = props;
+  const { className, hideTitle = false } = props;
   const { styles, cx } = useStyles();
   const [data, setData] = useState<any[]>([]);
   const [showFeedbackModal, setShowFeedbackModal] = useState(false);
@@ -209,8 +210,8 @@ export default memo<IProps>((props) => {
   };
 
   return (
-    <div className={cx(styles.purchaseDetails, className)}>
-      <div className={styles.title}>{i18n('setting.purchaseDetails.title')}</div>
+    <div className={cx(styles.purchaseDetails, { [styles.withoutTitle]: hideTitle }, className)}>
+      {!hideTitle && <div className={styles.title}>{i18n('setting.purchaseDetails.title')}</div>}
       <AntdTable
         className={styles.antdTableBox}
         dataSource={data}
@@ -288,27 +289,24 @@ export default memo<IProps>((props) => {
           },
         }}
       />
-      {!isCN && (() => {
-        const hasActive = data.some((d) => d.status === 'ACTIVE' || d.status === 'TRIAL_CREATE');
-        const isCancelled = data.some((d) => d.cancelled);
-        return (
-          <div className={styles.footerActions}>
-            <Button
-              onClick={() => window.open(SUBOTIZ_INVOICE_PORTAL_URL, '_blank', 'noopener,noreferrer')}
-            >
-              {i18n('setting.purchaseDetails.getInvoice')}
-            </Button>
-            {isCancelled && (
-              <Button disabled>{i18n('setting.purchaseDetails.alreadyCancelled')}</Button>
-            )}
-            {!isCancelled && hasActive && (
-              <Button onClick={() => setShowFeedbackModal(true)}>
-                {i18n('setting.purchaseDetails.unsubscribe')}
+      {!isCN &&
+        (() => {
+          const hasActive = data.some((d) => d.status === 'ACTIVE' || d.status === 'TRIAL_CREATE');
+          const isCancelled = data.some((d) => d.cancelled);
+          return (
+            <div className={styles.footerActions}>
+              <Button onClick={() => window.open(SUBOTIZ_INVOICE_PORTAL_URL, '_blank', 'noopener,noreferrer')}>
+                {i18n('setting.purchaseDetails.getInvoice')}
               </Button>
-            )}
-          </div>
-        );
-      })()}
+              {isCancelled && <Button disabled>{i18n('setting.purchaseDetails.alreadyCancelled')}</Button>}
+              {!isCancelled && hasActive && (
+                <Button onClick={() => setShowFeedbackModal(true)}>
+                  {i18n('setting.purchaseDetails.unsubscribe')}
+                </Button>
+              )}
+            </div>
+          );
+        })()}
       <Modal
         open={showFeedbackModal}
         onCancel={() => setShowFeedbackModal(false)}
diff --git a/chat2db-community-client/src/components/PurchaseDetails/style.ts b/chat2db-community-client/src/components/PurchaseDetails/style.ts
index 963eb9c022..0b2bf73ee6 100644
--- a/chat2db-community-client/src/components/PurchaseDetails/style.ts
+++ b/chat2db-community-client/src/components/PurchaseDetails/style.ts
@@ -9,6 +9,9 @@ export const useStyles = createStyles(({ css, token }) => {
       gap: 36px;
       box-sizing: border-box;
     `,
+    withoutTitle: css`
+      padding-top: 24px;
+    `,
     title: css`
       font-size: 28px;
       line-height: 34px;
diff --git a/chat2db-community-client/src/i18n/en-US/monaco.ts b/chat2db-community-client/src/i18n/en-US/monaco.ts
index b032f2129a..f7bef5f9ac 100644
--- a/chat2db-community-client/src/i18n/en-US/monaco.ts
+++ b/chat2db-community-client/src/i18n/en-US/monaco.ts
@@ -1,4 +1,8 @@
 export default {
+  'monaco.group.appearance': 'Appearance and font',
+  'monaco.group.display': 'Editor display',
+  'monaco.group.completion': 'Completion and interaction',
+  'monaco.group.execution': 'SQL execution',
   'monaco.theme': 'Editor Theme',
   'monaco.theme.tooltip':
     'The editor theme will be saved in the background for the current application, and the editor theme will be synchronized when the APP theme is switched',
@@ -6,16 +10,20 @@ export default {
   'monaco.customFontFamily.tooltip': 'The editor prioritizes the custom font',
   'monaco.fontSize': 'Font Size',
   'monaco.lineHeight': 'Line Height',
+  'monaco.lineHeight.tooltip': 'Adjust the vertical spacing between editor lines. Larger values add more space.',
   'monaco.lineNumbers': 'Show Line Numbers',
   'monaco.lineNumbers.on': 'Show',
   'monaco.lineNumbers.off': 'Hide',
   'monaco.minimap': 'Show Minimap',
+  'monaco.minimap.tooltip': 'Show a compact SQL overview on the right for quick navigation through long scripts.',
   'monaco.minimap.on': 'Show',
   'monaco.minimap.off': 'Hide',
   'monaco.wordWrap': 'Word Wrap',
+  'monaco.wordWrap.tooltip': 'Wrap SQL that exceeds the editor width. When disabled, use horizontal scrolling.',
   'monaco.wordWrap.on': 'Enable',
   'monaco.wordWrap.off': 'Disable',
   'monaco.folding': 'Code Folding',
+  'monaco.folding.tooltip': 'Show folding controls in the line-number gutter to collapse or expand SQL blocks.',
   'monaco.text.nl2sql': 'NL2SQL',
   'monaco.text.sqlExplain': 'SQL Explain',
   'monaco.text.sqlOptimizer': 'SQL Optimizer',
@@ -49,18 +57,34 @@ export default {
   'monaco.completion.joinClause': 'Join Clause',
 
   'monaco.renderLineHighlight': 'Line Highlight',
+  'monaco.renderLineHighlight.tooltip': 'Choose which part of the current cursor line is highlighted.',
+  'monaco.renderLineHighlight.line': 'Whole line',
+  'monaco.renderLineHighlight.none': 'No highlight',
+  'monaco.renderLineHighlight.gutter': 'Gutter only',
+  'monaco.renderLineHighlight.all': 'Line and gutter',
   'monaco.keywordCase': 'Keyword Case',
+  'monaco.keywordCase.tooltip':
+    'Control keyword case in completion suggestions and inserted SQL templates without changing existing text.',
   'monaco.keywordCase.upper': 'Upper',
   'monaco.keywordCase.lower': 'Lower',
   'monaco.completion.all': 'All Qualified Completion',
+  'monaco.completion.all.tooltip':
+    'Select database types whose completion suggestions should use fully qualified names. Unselected types use shorter names.',
   'monaco.errorContinue': 'Error Continue',
+  'monaco.errorContinue.tooltip':
+    'When running multiple SQL statements, continue with the remaining statements after one fails.',
   'monaco.errorContinue.true': 'Yes',
   'monaco.errorContinue.false': 'No',
   'monaco.tableDDLTriggerMode': 'Show Table DDL',
+  'monaco.tableDDLTriggerMode.tooltip':
+    'Show table DDL either when hovering a table name or when holding {1} and clicking it.',
   'monaco.tableDDLTriggerMode.hover': 'Hover',
   'monaco.tableDDLTriggerMode.click': '{1} + Click',
   'monaco.completionAcceptKey': 'Completion Accept Key',
+  'monaco.completionAcceptKey.tooltip': 'Choose the key used to accept the active completion suggestion.',
   'monaco.completionAcceptKey.enter': 'Enter',
   'monaco.completionAcceptKey.tab': 'Tab',
   'monaco.stickyScroll': 'Sticky Scroll',
+  'monaco.stickyScroll.tooltip':
+    'Keep the starting lines of the current code block visible at the top while scrolling through long SQL.',
 };
diff --git a/chat2db-community-client/src/i18n/en-US/setting.ts b/chat2db-community-client/src/i18n/en-US/setting.ts
index 226ce71a71..136f6c7775 100644
--- a/chat2db-community-client/src/i18n/en-US/setting.ts
+++ b/chat2db-community-client/src/i18n/en-US/setting.ts
@@ -1,7 +1,11 @@
 export default {
   'setting.title.setting': 'Settings',
+  'setting.nav.group.general': 'General',
+  'setting.nav.group.services': 'Connections and services',
+  'setting.nav.group.account': 'Account and license',
+  'setting.nav.group.information': 'Information',
   'setting.nav.basic': 'Basic',
-  'setting.nav.basicDescribe': 'Including theme, language and other basic Settings',
+  'setting.nav.basicDescribe': 'Theme, language, font, and interface preferences',
   'setting.nav.personal': 'Your Profile',
   'setting.nav.personalDescribe': 'Personal settings',
   'setting.nav.account': 'Account',
@@ -16,6 +20,10 @@ export default {
   'setting.nav.mcpDescribe': 'Manage local MCP startup',
   'setting.nav.networkProxy': 'Network Proxy',
   'setting.nav.networkProxyDescribe': 'Configure desktop outbound network proxy',
+  'setting.title.appearance': 'Appearance',
+  'setting.text.appearanceDescribe': 'Theme mode and interface accent color',
+  'setting.title.interfaceFont': 'Interface Font',
+  'setting.text.interfaceFontDescribe': 'Font family and size used across Chat2DB',
   'setting.nav.switchOrg': 'Switch to Teams',
   'setting.nav.createOrgJoinOrg': 'Create or join a team',
   'setting.nav.switchPersonal': 'Back to Personal',
diff --git a/chat2db-community-client/src/i18n/es-ES/monaco.ts b/chat2db-community-client/src/i18n/es-ES/monaco.ts
index 761f989a3f..e363c7f1a0 100644
--- a/chat2db-community-client/src/i18n/es-ES/monaco.ts
+++ b/chat2db-community-client/src/i18n/es-ES/monaco.ts
@@ -1,4 +1,8 @@
 export default {
+  'monaco.group.appearance': 'Apariencia y fuente',
+  'monaco.group.display': 'Visualización del editor',
+  'monaco.group.completion': 'Autocompletado e interacción',
+  'monaco.group.execution': 'Ejecución de SQL',
   'monaco.theme': 'Tema del editor',
   'monaco.theme.tooltip':
     'El tema del editor se guardará en segundo plano para la aplicación actual y se sincronizará al cambiar el tema de la aplicación',
@@ -6,16 +10,23 @@ export default {
   'monaco.customFontFamily.tooltip': 'El editor prioriza la fuente personalizada',
   'monaco.fontSize': 'Tamaño de fuente',
   'monaco.lineHeight': 'Altura de línea',
+  'monaco.lineHeight.tooltip':
+    'Ajusta el espacio vertical entre las líneas del editor. Los valores mayores añaden más espacio.',
   'monaco.lineNumbers': 'Mostrar números de línea',
   'monaco.lineNumbers.on': 'Mostrar',
   'monaco.lineNumbers.off': 'Ocultar',
   'monaco.minimap': 'Mostrar minimapa',
+  'monaco.minimap.tooltip':
+    'Muestra una vista compacta del SQL a la derecha para navegar rápidamente por scripts largos.',
   'monaco.minimap.on': 'Mostrar',
   'monaco.minimap.off': 'Ocultar',
   'monaco.wordWrap': 'Ajuste de línea',
+  'monaco.wordWrap.tooltip':
+    'Ajusta el SQL que supera el ancho del editor. Si se desactiva, se usa el desplazamiento horizontal.',
   'monaco.wordWrap.on': 'Activar',
   'monaco.wordWrap.off': 'Desactivar',
   'monaco.folding': 'Plegado de código',
+  'monaco.folding.tooltip': 'Muestra controles en el margen de números de línea para contraer o expandir bloques SQL.',
   'monaco.text.nl2sql': 'NL2SQL',
   'monaco.text.sqlExplain': 'Explicar SQL',
   'monaco.text.sqlOptimizer': 'Optimizar SQL',
@@ -49,18 +60,34 @@ export default {
   'monaco.completion.joinClause': 'Cláusula JOIN',
 
   'monaco.renderLineHighlight': 'Resaltado de línea',
+  'monaco.renderLineHighlight.tooltip': 'Elige qué parte de la línea actual del cursor se resalta.',
+  'monaco.renderLineHighlight.line': 'Línea completa',
+  'monaco.renderLineHighlight.none': 'Sin resaltado',
+  'monaco.renderLineHighlight.gutter': 'Solo margen',
+  'monaco.renderLineHighlight.all': 'Línea y margen',
   'monaco.keywordCase': 'Mayúsculas/minúsculas de palabras clave',
+  'monaco.keywordCase.tooltip':
+    'Controla las mayúsculas de las sugerencias y plantillas SQL insertadas sin modificar el texto existente.',
   'monaco.keywordCase.upper': 'Mayúsculas',
   'monaco.keywordCase.lower': 'Minúsculas',
   'monaco.completion.all': 'Autocompletado con todos los calificadores',
+  'monaco.completion.all.tooltip':
+    'Selecciona los tipos de base de datos cuyas sugerencias deben usar nombres completamente calificados. Los demás usan nombres más cortos.',
   'monaco.errorContinue': 'Continuar tras un error',
+  'monaco.errorContinue.tooltip':
+    'Al ejecutar varias sentencias SQL, continúa con las restantes cuando una de ellas falla.',
   'monaco.errorContinue.true': 'Sí',
   'monaco.errorContinue.false': 'No',
   'monaco.tableDDLTriggerMode': 'Mostrar DDL de la tabla',
+  'monaco.tableDDLTriggerMode.tooltip':
+    'Muestra el DDL al pasar el cursor sobre una tabla o al mantener {1} y hacer clic en ella.',
   'monaco.tableDDLTriggerMode.hover': 'Al pasar el cursor',
   'monaco.tableDDLTriggerMode.click': '{1} + clic',
   'monaco.completionAcceptKey': 'Tecla para aceptar el autocompletado',
+  'monaco.completionAcceptKey.tooltip': 'Elige la tecla que acepta la sugerencia de autocompletado activa.',
   'monaco.completionAcceptKey.enter': 'Intro',
   'monaco.completionAcceptKey.tab': 'Tabulador',
   'monaco.stickyScroll': 'Desplazamiento fijo',
+  'monaco.stickyScroll.tooltip':
+    'Mantiene visibles arriba las líneas iniciales del bloque actual al desplazarse por SQL largo.',
 };
diff --git a/chat2db-community-client/src/i18n/es-ES/setting.ts b/chat2db-community-client/src/i18n/es-ES/setting.ts
index 5d4edaaae7..c7da260d96 100644
--- a/chat2db-community-client/src/i18n/es-ES/setting.ts
+++ b/chat2db-community-client/src/i18n/es-ES/setting.ts
@@ -1,7 +1,11 @@
 export default {
   'setting.title.setting': 'Configuración',
+  'setting.nav.group.general': 'General',
+  'setting.nav.group.services': 'Conexiones y servicios',
+  'setting.nav.group.account': 'Cuenta y licencia',
+  'setting.nav.group.information': 'Información',
   'setting.nav.basic': 'General',
-  'setting.nav.basicDescribe': 'Incluye el tema, el idioma y otros ajustes generales',
+  'setting.nav.basicDescribe': 'Tema, idioma, fuente y preferencias de la interfaz',
   'setting.nav.personal': 'Su perfil',
   'setting.nav.personalDescribe': 'Configuración personal',
   'setting.nav.account': 'Cuenta',
@@ -16,6 +20,10 @@ export default {
   'setting.nav.mcpDescribe': 'Gestionar el inicio del MCP local',
   'setting.nav.networkProxy': 'Proxy de red',
   'setting.nav.networkProxyDescribe': 'Configurar el proxy de salida de la aplicación de escritorio',
+  'setting.title.appearance': 'Apariencia',
+  'setting.text.appearanceDescribe': 'Modo de tema y color de acento de la interfaz',
+  'setting.title.interfaceFont': 'Fuente de la interfaz',
+  'setting.text.interfaceFontDescribe': 'Familia y tamaño de fuente usados en la interfaz de Chat2DB',
   'setting.nav.switchOrg': 'Cambiar a equipos',
   'setting.nav.createOrgJoinOrg': 'Crear un equipo o unirse a uno',
   'setting.nav.switchPersonal': 'Volver al espacio personal',
@@ -69,7 +77,8 @@ export default {
   'setting.networkProxy.testUrl': 'URL de prueba',
   'setting.networkProxy.testConnection': 'Probar conexión',
   'setting.networkProxy.testSuccess': 'La prueba de conexión del proxy se completó correctamente',
-  'setting.networkProxy.restartRequired': 'La configuración del proxy se ha guardado. Reinicie la aplicación para aplicarla por completo',
+  'setting.networkProxy.restartRequired':
+    'La configuración del proxy se ha guardado. Reinicie la aplicación para aplicarla por completo',
   'setting.networkProxy.hostRequired': 'Introduzca el host del proxy',
   'setting.networkProxy.portRequired': 'Introduzca el puerto del proxy',
   'setting.title.globalMcpConfig': 'Configuración global de MCP',
@@ -101,7 +110,8 @@ export default {
   'setting.placeholder.azureEndpoint': 'Obtenga el endpoint de Azure OpenAI en Azure Portal',
   'setting.placeholder.azureDeployment': 'ID de implementación del modelo desplegado',
   'setting.ai.tips': 'Inicie sesión y seleccione la configuración de IA',
-  'setting.ai.user.hidden': 'Póngase en contacto con el administrador para configurar la ApiKey en «Configuración -> IA personalizada»',
+  'setting.ai.user.hidden':
+    'Póngase en contacto con el administrador para configurar la ApiKey en «Configuración -> IA personalizada»',
   'setting.button.startDownloading': 'Iniciar descarga',
   'setting.button.beDownloading': 'Descargando',
   'setting.button.redownload': 'Volver a descargar',
@@ -228,7 +238,8 @@ export default {
   'setting.apiKeys.deleteTips': 'Después de eliminarla, la clave dejará de estar disponible. Proceda con cuidado.',
 
   'setting.license.title': 'Licencia',
-  'setting.license.titleDes': 'Guarde el código de activación de forma segura. Cada código solo puede activar 2 dispositivos',
+  'setting.license.titleDes':
+    'Guarde el código de activación de forma segura. Cada código solo puede activar 2 dispositivos',
   'setting.license.status.unused': 'Sin activar; visite el sitio web oficial para comprar',
   'setting.license.status.trial': 'Prueba en curso; el periodo de prueba es de 14 días',
   'setting.license.status.expired': 'Expirada; visite el sitio web oficial para comprar',
@@ -241,15 +252,18 @@ export default {
   'setting.license.unbindDesc':
     'Después de desvincular el código de activación, ya no podrá utilizar las funciones sin conexión',
   'setting.license.activationTitle': 'Verificación del código de activación',
-  'setting.license.activationDesc': 'Introduzca su código de activación para mejorar de inmediato la eficiencia de su trabajo',
+  'setting.license.activationDesc':
+    'Introduzca su código de activación para mejorar de inmediato la eficiencia de su trabajo',
   'setting.license.enterLicenseKey': 'Introduzca su código de activación',
-  'setting.license.enterLicenseKey.desc': 'Después de la activación sin conexión, se necesita el certificado del dispositivo para desvincularlo',
+  'setting.license.enterLicenseKey.desc':
+    'Después de la activación sin conexión, se necesita el certificado del dispositivo para desvincularlo',
   'setting.license.deactivate': 'Desactivar',
   'setting.license.activate': 'Activar',
   'setting.license.offlineUsageNotes': 'Notas',
 
   'setting.license.deviceLimit': 'Cada código de activación solo puede activar 2 dispositivos a la vez',
-  'setting.license.changeDeviceInstruction': 'Si desea cambiar de dispositivo, desvincule primero el dispositivo activado,',
+  'setting.license.changeDeviceInstruction':
+    'Si desea cambiar de dispositivo, desvincule primero el dispositivo activado,',
   'setting.license.howToUnbind': 'Haga clic para ver cómo desvincular un dispositivo',
   'setting.license.noLicenseInstruction': 'Si todavía no tiene un código de activación,',
   'setting.license.buyLicense': 'Haga clic aquí para comprar un código de activación',
diff --git a/chat2db-community-client/src/i18n/ja-JP/monaco.ts b/chat2db-community-client/src/i18n/ja-JP/monaco.ts
index 838be6aecc..73eb4a5723 100644
--- a/chat2db-community-client/src/i18n/ja-JP/monaco.ts
+++ b/chat2db-community-client/src/i18n/ja-JP/monaco.ts
@@ -1,4 +1,8 @@
 export default {
+  'monaco.group.appearance': '外観とフォント',
+  'monaco.group.display': 'エディタ表示',
+  'monaco.group.completion': '補完と操作',
+  'monaco.group.execution': 'SQL 実行',
   'monaco.theme': 'エディターテーマ',
   'monaco.theme.tooltip':
     'バックグラウンドは、現在のアプリケーションのテーマにこのエディターテーマを保存し、アプリケーションのテーマが切り替わるとエディターテーマが同期されます',
@@ -6,16 +10,20 @@ export default {
   'monaco.customFontFamily.tooltip': 'エディターではカスタムフォントが優先されます',
   'monaco.fontSize': 'フォントサイズ',
   'monaco.lineHeight': '行高',
+  'monaco.lineHeight.tooltip': 'エディターの行間を調整します。値を大きくすると行間が広がります。',
   'monaco.lineNumbers': '行番号を表示',
   'monaco.lineNumbers.on': '表示',
   'monaco.lineNumbers.off': '非表示',
   'monaco.minimap': '縮小図を表示',
+  'monaco.minimap.tooltip': '長い SQL 内をすばやく移動できる縮小プレビューをエディター右側に表示します。',
   'monaco.minimap.on': '表示',
   'monaco.minimap.off': '非表示',
   'monaco.wordWrap': '自動改行',
+  'monaco.wordWrap.tooltip': 'エディター幅を超える SQL を折り返します。無効にすると横スクロールで表示します。',
   'monaco.wordWrap.on': '有効',
   'monaco.wordWrap.off': '無効',
   'monaco.folding': 'コード折りたたみ',
+  'monaco.folding.tooltip': '行番号領域に折りたたみ操作を表示し、SQL ブロックを開閉できるようにします。',
   'monaco.text.nl2sql': '自然言語からSQLへ',
   'monaco.text.sqlExplain': 'SQLの説明',
   'monaco.text.sqlOptimizer': 'SQLの最適化',
@@ -49,18 +57,33 @@ export default {
   'monaco.completion.joinClause': 'join句',
 
   'monaco.renderLineHighlight': '行高亮',
+  'monaco.renderLineHighlight.tooltip': 'カーソルがある行のどの範囲を強調表示するかを選択します。',
+  'monaco.renderLineHighlight.line': '行全体',
+  'monaco.renderLineHighlight.none': '強調表示なし',
+  'monaco.renderLineHighlight.gutter': 'ガターのみ',
+  'monaco.renderLineHighlight.all': '行とガター',
   'monaco.keywordCase': 'キーワードケース',
+  'monaco.keywordCase.tooltip':
+    '補完候補と挿入される SQL テンプレートのキーワード大小文字を制御し、入力済みの文字は変更しません。',
   'monaco.keywordCase.upper': '大文字',
   'monaco.keywordCase.lower': '小文字',
   'monaco.completion.all': '全限定補完',
+  'monaco.completion.all.tooltip':
+    '補完候補で完全修飾名を使用するデータベース種別を選択します。未選択の種別では短い名前を使用します。',
   'monaco.errorContinue': 'エラー継続実行',
+  'monaco.errorContinue.tooltip': '複数の SQL 文を実行するとき、1 つが失敗しても残りの文を続けて実行します。',
   'monaco.errorContinue.true': 'はい',
   'monaco.errorContinue.false': 'いいえ',
   'monaco.tableDDLTriggerMode': 'テーブルDDLを表示',
+  'monaco.tableDDLTriggerMode.tooltip':
+    'テーブル名へのホバー時、または {1} を押しながらクリックしたときに DDL を表示します。',
   'monaco.tableDDLTriggerMode.hover': 'ホバー',
   'monaco.tableDDLTriggerMode.click': '{1} + クリック',
   'monaco.completionAcceptKey': '補完確定キー',
+  'monaco.completionAcceptKey.tooltip': '選択中の補完候補を確定するキーを選択します。',
   'monaco.completionAcceptKey.enter': 'Enter',
   'monaco.completionAcceptKey.tab': 'Tab',
   'monaco.stickyScroll': 'スティッキースクロール',
+  'monaco.stickyScroll.tooltip':
+    '長い SQL をスクロールするとき、現在のコードブロックの開始行をエディター上部に固定します。',
 };
diff --git a/chat2db-community-client/src/i18n/ja-JP/setting.ts b/chat2db-community-client/src/i18n/ja-JP/setting.ts
index e6eb91e63c..75696f5ec2 100644
--- a/chat2db-community-client/src/i18n/ja-JP/setting.ts
+++ b/chat2db-community-client/src/i18n/ja-JP/setting.ts
@@ -1,7 +1,11 @@
 export default {
   'setting.title.setting': '設定',
+  'setting.nav.group.general': '一般',
+  'setting.nav.group.services': '接続とサービス',
+  'setting.nav.group.account': 'アカウントとライセンス',
+  'setting.nav.group.information': '情報',
   'setting.nav.basic': '基本',
-  'setting.nav.basicDescribe': 'テーマ、言語などの基本設定を含む',
+  'setting.nav.basicDescribe': 'テーマ、言語、フォント、インターフェースの設定',
   'setting.nav.personal': '個人',
   'setting.nav.personalDescribe': '個人設定',
   'setting.nav.account': 'アカウント',
@@ -16,6 +20,10 @@ export default {
   'setting.nav.mcpDescribe': 'ローカル MCP 起動設定',
   'setting.nav.networkProxy': 'ネットワークプロキシ',
   'setting.nav.networkProxyDescribe': 'デスクトップ版の送信プロキシを設定します',
+  'setting.title.appearance': '外観',
+  'setting.text.appearanceDescribe': 'テーマモードとインターフェースのテーマカラー',
+  'setting.title.interfaceFont': 'インターフェースフォント',
+  'setting.text.interfaceFontDescribe': 'Chat2DB インターフェースで使用するフォントとサイズ',
   'setting.nav.switchOrg': 'チームに切り替える',
   'setting.nav.createOrgJoinOrg': 'チームを作成または参加する',
   'setting.nav.switchPersonal': '個人版に戻る',
diff --git a/chat2db-community-client/src/i18n/ko-KR/monaco.ts b/chat2db-community-client/src/i18n/ko-KR/monaco.ts
index bc1d79fb78..525e2ffde0 100644
--- a/chat2db-community-client/src/i18n/ko-KR/monaco.ts
+++ b/chat2db-community-client/src/i18n/ko-KR/monaco.ts
@@ -1,4 +1,8 @@
 export default {
+  'monaco.group.appearance': '모양 및 글꼴',
+  'monaco.group.display': '편집기 표시',
+  'monaco.group.completion': '자동 완성 및 상호 작용',
+  'monaco.group.execution': 'SQL 실행',
   'monaco.theme': '편집기 테마',
   'monaco.theme.tooltip':
     '편집기 테마는 현재 애플리케이션의 백그라운드에 저장되며, 앱 테마를 전환하면 편집기 테마도 동기화됩니다',
@@ -6,16 +10,20 @@ export default {
   'monaco.customFontFamily.tooltip': '편집기는 사용자 지정 글꼴을 우선 사용합니다',
   'monaco.fontSize': '글꼴 크기',
   'monaco.lineHeight': '줄 높이',
+  'monaco.lineHeight.tooltip': '편집기 줄 사이의 세로 간격을 조정합니다. 값이 클수록 간격이 넓어집니다.',
   'monaco.lineNumbers': '줄 번호 표시',
   'monaco.lineNumbers.on': '표시',
   'monaco.lineNumbers.off': '숨기기',
   'monaco.minimap': '미니맵 표시',
+  'monaco.minimap.tooltip': '긴 SQL에서 빠르게 이동할 수 있도록 오른쪽에 축소된 미리 보기를 표시합니다.',
   'monaco.minimap.on': '표시',
   'monaco.minimap.off': '숨기기',
   'monaco.wordWrap': '자동 줄 바꿈',
+  'monaco.wordWrap.tooltip': '편집기 너비를 넘는 SQL을 자동으로 줄 바꿈합니다. 끄면 가로 스크롤로 확인합니다.',
   'monaco.wordWrap.on': '사용',
   'monaco.wordWrap.off': '사용 안 함',
   'monaco.folding': '코드 접기',
+  'monaco.folding.tooltip': '줄 번호 영역에 접기 컨트롤을 표시하여 SQL 블록을 접거나 펼칩니다.',
   'monaco.text.nl2sql': 'NL2SQL',
   'monaco.text.sqlExplain': 'SQL 설명',
   'monaco.text.sqlOptimizer': 'SQL 최적화',
@@ -49,18 +57,31 @@ export default {
   'monaco.completion.joinClause': 'JOIN 절',
 
   'monaco.renderLineHighlight': '현재 줄 강조',
+  'monaco.renderLineHighlight.tooltip': '커서가 있는 현재 줄의 어느 범위를 강조할지 선택합니다.',
+  'monaco.renderLineHighlight.line': '전체 줄',
+  'monaco.renderLineHighlight.none': '강조 안 함',
+  'monaco.renderLineHighlight.gutter': '여백만',
+  'monaco.renderLineHighlight.all': '줄과 여백',
   'monaco.keywordCase': '키워드 대소문자',
+  'monaco.keywordCase.tooltip':
+    '자동 완성 제안과 삽입되는 SQL 템플릿의 키워드 대소문자만 제어하며 기존 텍스트는 변경하지 않습니다.',
   'monaco.keywordCase.upper': '대문자',
   'monaco.keywordCase.lower': '소문자',
   'monaco.completion.all': '정규화된 이름 전체 자동 완성',
+  'monaco.completion.all.tooltip':
+    '자동 완성 제안에 완전히 정규화된 이름을 사용할 데이터베이스 유형을 선택합니다. 선택하지 않은 유형은 짧은 이름을 사용합니다.',
   'monaco.errorContinue': '오류 발생 후 계속',
+  'monaco.errorContinue.tooltip': '여러 SQL 문을 실행할 때 한 문장이 실패해도 나머지 문장을 계속 실행합니다.',
   'monaco.errorContinue.true': '예',
   'monaco.errorContinue.false': '아니요',
   'monaco.tableDDLTriggerMode': '테이블 DDL 표시',
+  'monaco.tableDDLTriggerMode.tooltip': '테이블 이름에 마우스를 올리거나 {1} 키를 누른 채 클릭할 때 DDL을 표시합니다.',
   'monaco.tableDDLTriggerMode.hover': '마우스 올리기',
   'monaco.tableDDLTriggerMode.click': '{1} + 클릭',
   'monaco.completionAcceptKey': '자동 완성 적용 키',
+  'monaco.completionAcceptKey.tooltip': '현재 자동 완성 제안을 적용할 키를 선택합니다.',
   'monaco.completionAcceptKey.enter': 'Enter',
   'monaco.completionAcceptKey.tab': 'Tab',
   'monaco.stickyScroll': '고정 스크롤',
+  'monaco.stickyScroll.tooltip': '긴 SQL을 스크롤할 때 현재 코드 블록의 시작 줄을 편집기 위쪽에 고정합니다.',
 };
diff --git a/chat2db-community-client/src/i18n/ko-KR/setting.ts b/chat2db-community-client/src/i18n/ko-KR/setting.ts
index d706d495df..c34f62a888 100644
--- a/chat2db-community-client/src/i18n/ko-KR/setting.ts
+++ b/chat2db-community-client/src/i18n/ko-KR/setting.ts
@@ -1,7 +1,11 @@
 export default {
   'setting.title.setting': '설정',
+  'setting.nav.group.general': '일반',
+  'setting.nav.group.services': '연결 및 서비스',
+  'setting.nav.group.account': '계정 및 라이선스',
+  'setting.nav.group.information': '정보',
   'setting.nav.basic': '기본',
-  'setting.nav.basicDescribe': '테마, 언어 및 기타 기본 설정',
+  'setting.nav.basicDescribe': '테마, 언어, 글꼴 및 인터페이스 설정',
   'setting.nav.personal': '내 프로필',
   'setting.nav.personalDescribe': '개인 설정',
   'setting.nav.account': '계정',
@@ -16,6 +20,10 @@ export default {
   'setting.nav.mcpDescribe': '로컬 MCP 시작 관리',
   'setting.nav.networkProxy': '네트워크 프록시',
   'setting.nav.networkProxyDescribe': '데스크톱의 외부 네트워크 프록시 구성',
+  'setting.title.appearance': '화면 모양',
+  'setting.text.appearanceDescribe': '테마 모드 및 인터페이스 테마 색상',
+  'setting.title.interfaceFont': '인터페이스 글꼴',
+  'setting.text.interfaceFontDescribe': 'Chat2DB 인터페이스에 사용할 글꼴 및 크기',
   'setting.nav.switchOrg': '팀으로 전환',
   'setting.nav.createOrgJoinOrg': '팀 생성 또는 참여',
   'setting.nav.switchPersonal': '개인으로 돌아가기',
diff --git a/chat2db-community-client/src/i18n/zh-CN/monaco.ts b/chat2db-community-client/src/i18n/zh-CN/monaco.ts
index c868a49010..280b039a57 100644
--- a/chat2db-community-client/src/i18n/zh-CN/monaco.ts
+++ b/chat2db-community-client/src/i18n/zh-CN/monaco.ts
@@ -1,20 +1,28 @@
 export default {
+  'monaco.group.appearance': '外观与字体',
+  'monaco.group.display': '编辑器显示',
+  'monaco.group.completion': '补全与交互',
+  'monaco.group.execution': 'SQL 执行',
   'monaco.theme': '编辑器主题',
   'monaco.theme.tooltip': '后台会为当前应用主题保存此编辑器主题，切换应用主题时会同步更新编辑器主题',
   'monaco.fontFamily': '编辑器字体',
   'monaco.customFontFamily.tooltip': '编辑器会优先使用自定义字体',
   'monaco.fontSize': '字体大小',
   'monaco.lineHeight': '行高',
+  'monaco.lineHeight.tooltip': '调整编辑器每行文字的垂直间距，数值越大行距越宽。',
   'monaco.lineNumbers': '显示行号',
   'monaco.lineNumbers.on': '显示',
   'monaco.lineNumbers.off': '隐藏',
   'monaco.minimap': '显示缩略图',
+  'monaco.minimap.tooltip': '在编辑器右侧显示 SQL 缩略预览，便于在长脚本中快速定位。',
   'monaco.minimap.on': '显示',
   'monaco.minimap.off': '隐藏',
   'monaco.wordWrap': '自动换行',
+  'monaco.wordWrap.tooltip': 'SQL 超出编辑器宽度时自动换行；关闭后可横向滚动查看。',
   'monaco.wordWrap.on': '启用',
   'monaco.wordWrap.off': '禁用',
   'monaco.folding': '代码折叠',
+  'monaco.folding.tooltip': '在行号区域显示折叠控件，可收起或展开 SQL 代码块。',
   'monaco.text.nl2sql': '自然语言转SQL',
   'monaco.text.sqlExplain': 'SQL解释',
   'monaco.text.sqlOptimizer': 'SQL优化',
@@ -48,18 +56,29 @@ export default {
   'monaco.completion.joinClause': 'join子句',
 
   'monaco.renderLineHighlight': '行高亮',
+  'monaco.renderLineHighlight.tooltip': '设置光标所在行的高亮范围。',
+  'monaco.renderLineHighlight.line': '整行',
+  'monaco.renderLineHighlight.none': '不高亮',
+  'monaco.renderLineHighlight.gutter': '仅边栏',
+  'monaco.renderLineHighlight.all': '整行与边栏',
   'monaco.keywordCase': '关键字大小写',
+  'monaco.keywordCase.tooltip': '控制自动补全和 SQL 模板插入的关键字大小写，不会修改已输入内容。',
   'monaco.keywordCase.upper': '大写',
   'monaco.keywordCase.lower': '小写',
   'monaco.completion.all': '全限定补全',
+  'monaco.completion.all.tooltip': '选择需要使用全限定名称进行补全的数据库类型；未选择的类型使用简短名称。',
   'monaco.errorContinue': '错误继续执行',
+  'monaco.errorContinue.tooltip': '一次执行多条 SQL 时，某条语句失败后是否继续执行后续语句。',
   'monaco.errorContinue.true': '是',
   'monaco.errorContinue.false': '否',
   'monaco.tableDDLTriggerMode': '展示表 DDL',
+  'monaco.tableDDLTriggerMode.tooltip': '选择悬浮表名时显示 DDL，或按住 {1} 点击表名时显示 DDL。',
   'monaco.tableDDLTriggerMode.hover': '悬浮',
   'monaco.tableDDLTriggerMode.click': '{1} + 左键',
   'monaco.completionAcceptKey': '补全接受键',
+  'monaco.completionAcceptKey.tooltip': '选择用于接受当前补全建议的按键。',
   'monaco.completionAcceptKey.enter': 'Enter',
   'monaco.completionAcceptKey.tab': 'Tab',
   'monaco.stickyScroll': '粘性滚动',
+  'monaco.stickyScroll.tooltip': '滚动长 SQL 时，将当前代码块的起始行固定在编辑器顶部。',
 };
diff --git a/chat2db-community-client/src/i18n/zh-CN/setting.ts b/chat2db-community-client/src/i18n/zh-CN/setting.ts
index f1d3e9ffeb..b08117d813 100644
--- a/chat2db-community-client/src/i18n/zh-CN/setting.ts
+++ b/chat2db-community-client/src/i18n/zh-CN/setting.ts
@@ -1,7 +1,11 @@
 export default {
   'setting.title.setting': '设置',
+  'setting.nav.group.general': '通用',
+  'setting.nav.group.services': '连接与服务',
+  'setting.nav.group.account': '账户与许可',
+  'setting.nav.group.information': '信息',
   'setting.nav.basic': '基础设置',
-  'setting.nav.basicDescribe': '包括主题、语言等基础设置',
+  'setting.nav.basicDescribe': '主题、语言、字体与界面偏好',
   'setting.nav.personal': '个人信息',
   'setting.nav.personalDescribe': '个人信息设置',
   'setting.nav.account': '账号设置',
@@ -19,6 +23,10 @@ export default {
   'setting.nav.mcpDescribe': '管理本地 MCP 启动',
   'setting.nav.networkProxy': '网络代理',
   'setting.nav.networkProxyDescribe': '配置桌面端出站网络代理',
+  'setting.title.appearance': '外观',
+  'setting.text.appearanceDescribe': '主题模式与界面主题色',
+  'setting.title.interfaceFont': '界面字体',
+  'setting.text.interfaceFontDescribe': 'Chat2DB 界面使用的字体与字号',
   'setting.title.backgroundColor': '主题',
   'setting.text.backgroundColorDescribe': '设置界面的背景色',
   'setting.title.themeColor': '主题色',