diff --git a/src/extension/webview-api/controllers/settings-controller.ts b/src/extension/webview-api/controllers/settings-controller.ts
index ebddce6..fcbc410 100644
--- a/src/extension/webview-api/controllers/settings-controller.ts
+++ b/src/extension/webview-api/controllers/settings-controller.ts
@@ -1,4 +1,9 @@
-import type { SettingKey, SettingValue } from '@shared/entities'
+import { settingKeyItemConfigMap } from '@shared/entities'
+import type {
+  SettingKey,
+  SettingsSaveType,
+  SettingValue
+} from '@shared/entities'
 
 import { globalSettingsDB, workspaceSettingsDB } from '../lowdb/settings-db'
 import { Controller } from '../types'
@@ -58,6 +63,33 @@ export class SettingsController extends Controller {
     }
   }
 
+  private async getSaveType(key: SettingKey): Promise<SettingsSaveType> {
+    return settingKeyItemConfigMap[key].saveType
+  }
+
+  async getSetting(req: {
+    key: SettingKey
+  }): Promise<SettingValue<SettingKey> | null> {
+    const saveType = await this.getSaveType(req.key)
+    return saveType === 'global'
+      ? await globalSettingsDB.getSetting(req.key)
+      : await workspaceSettingsDB.getSetting(req.key)
+  }
+
+  async setSettings(req: {
+    settings: Partial<Record<SettingKey, SettingValue<SettingKey>>>
+  }): Promise<void> {
+    const { settings } = req
+    for (const [key, value] of Object.entries(settings)) {
+      const saveType = await this.getSaveType(key as SettingKey)
+      if (saveType === 'global') {
+        await globalSettingsDB.setSetting(key as SettingKey, value)
+      } else {
+        await workspaceSettingsDB.setSetting(key as SettingKey, value)
+      }
+    }
+  }
+
   async getMergedSettings(): Promise<Record<string, any>> {
     const globalSettings = await globalSettingsDB.getAllSettings()
     const workspaceSettings = await workspaceSettingsDB.getAllSettings()
diff --git a/src/extension/webview-api/lowdb/settings-db.ts b/src/extension/webview-api/lowdb/settings-db.ts
index 7cbf8cd..ea14eaa 100644
--- a/src/extension/webview-api/lowdb/settings-db.ts
+++ b/src/extension/webview-api/lowdb/settings-db.ts
@@ -1,13 +1,13 @@
 import path from 'path'
 import { aidePaths } from '@extension/file-utils/paths'
 import {
+  settingKeyItemConfigMap,
   settingsConfig,
   SettingsEntity,
-  type SettingCategory,
   type SettingKey,
   type Settings,
   type SettingValue
-} from '@shared/entities/settings-entity'
+} from '@shared/entities'
 
 import { BaseDB } from './base-db'
 
@@ -28,7 +28,6 @@ class SettingsDB extends BaseDB<Settings> {
   ): Promise<Settings> {
     const existingSettings = await this.getAll()
     const existing = existingSettings.find(s => s.key === key)
-    const config = settingsConfig[key]
 
     if (existing) {
       return this.update(existing.id, {
@@ -40,7 +39,6 @@ class SettingsDB extends BaseDB<Settings> {
     const setting = new SettingsEntity({
       key,
       value,
-      category: config.category,
       updatedAt: Date.now()
     }).entity
 
@@ -54,7 +52,7 @@ class SettingsDB extends BaseDB<Settings> {
     const setting = settings.find(s => s.key === key)
     return setting
       ? (setting.value as SettingValue<K>)
-      : (settingsConfig[key].defaultValue as SettingValue<K>)
+      : settingKeyItemConfigMap[key].renderOptions.defaultValue
   }
 
   async getAllSettings(): Promise<Record<string, any>> {
@@ -78,13 +76,8 @@ class SettingsDB extends BaseDB<Settings> {
     return { ...defaults, ...userSettings }
   }
 
-  async getSettingsByCategory(category: SettingCategory): Promise<Settings[]> {
-    const settings = await this.getAll()
-    return settings.filter(setting => setting.category === category)
-  }
-
   getSettingConfig<K extends SettingKey>(key: K) {
-    return settingsConfig[key]
+    return settingKeyItemConfigMap[key]
   }
 
   getAllSettingConfigs() {
diff --git a/src/shared/entities/index.ts b/src/shared/entities/index.ts
index b60b32f..6ea9657 100644
--- a/src/shared/entities/index.ts
+++ b/src/shared/entities/index.ts
@@ -5,4 +5,4 @@ export * from './chat-context-entity'
 export * from './chat-session-entity'
 export * from './conversation-entity'
 export * from './doc-site-entity'
-export * from './settings-entity'
+export * from './setting-entity'
diff --git a/src/shared/entities/setting-entity/entity.ts b/src/shared/entities/setting-entity/entity.ts
new file mode 100644
index 0000000..eaa9e43
--- /dev/null
+++ b/src/shared/entities/setting-entity/entity.ts
@@ -0,0 +1,22 @@
+import { v4 as uuidv4 } from 'uuid'
+
+import { BaseEntity, type IBaseEntity } from '../base-entity'
+import type { SettingKey, SettingValue } from './setting-config'
+
+export interface Settings extends IBaseEntity {
+  key: SettingKey
+  value: SettingValue<SettingKey>
+  updatedAt: number
+}
+
+export class SettingsEntity extends BaseEntity<Settings> {
+  protected getDefaults(data?: Partial<Settings>): Settings {
+    return {
+      id: uuidv4(),
+      key: 'unknown' as SettingKey,
+      value: 'unknown',
+      updatedAt: Date.now(),
+      ...data
+    }
+  }
+}
diff --git a/src/shared/entities/setting-entity/index.ts b/src/shared/entities/setting-entity/index.ts
new file mode 100644
index 0000000..fcf2a30
--- /dev/null
+++ b/src/shared/entities/setting-entity/index.ts
@@ -0,0 +1,5 @@
+export * from './entity'
+export * from './render-options'
+export * from './setting-config'
+export * from './setting-items-config'
+export * from './types'
diff --git a/src/shared/entities/setting-entity/render-options.ts b/src/shared/entities/setting-entity/render-options.ts
new file mode 100644
index 0000000..ddf90c2
--- /dev/null
+++ b/src/shared/entities/setting-entity/render-options.ts
@@ -0,0 +1,51 @@
+export type SettingsSaveType = 'global' | 'workspace'
+
+interface BaseRenderOptions<FormType, ValueType> {
+  type: FormType
+  label: string
+  description: string
+  placeholder?: string
+  defaultValue: ValueType
+}
+
+export type InputRenderOptions = BaseRenderOptions<'input', string>
+export type TextareaRenderOptions = BaseRenderOptions<'textarea', string>
+export type SwitchRenderOptions = BaseRenderOptions<'switch', boolean>
+export type NumberInputRenderOptions = BaseRenderOptions<'numberInput', number>
+export type SelectInputRenderOptions = BaseRenderOptions<
+  'selectInput',
+  string
+> & {
+  options: Array<string | { label: string; value: string }>
+}
+export type ArrayInputRenderOptions = BaseRenderOptions<'arrayInput', any[]>
+export type ObjectInputRenderOptions = BaseRenderOptions<
+  'objectInput',
+  Record<string, any>
+>
+export type ModelManagementRenderOptions = BaseRenderOptions<
+  'modelManagement',
+  any
+>
+export type DocIndexingRenderOptions = BaseRenderOptions<'docManagement', any>
+export type CodebaseIndexingRenderOptions = BaseRenderOptions<
+  'codebaseIndexing',
+  any
+>
+
+export type RenderOptions =
+  | InputRenderOptions
+  | TextareaRenderOptions
+  | SwitchRenderOptions
+  | NumberInputRenderOptions
+  | SelectInputRenderOptions
+  | ArrayInputRenderOptions
+  | ObjectInputRenderOptions
+  | ModelManagementRenderOptions
+  | DocIndexingRenderOptions
+  | CodebaseIndexingRenderOptions
+
+export type RenderOptionsType = RenderOptions['type']
+export type RenderOptionsMap = {
+  [T in RenderOptionsType]: Extract<RenderOptions, { type: T }>
+}
diff --git a/src/shared/entities/setting-entity/setting-config.ts b/src/shared/entities/setting-entity/setting-config.ts
new file mode 100644
index 0000000..56effe8
--- /dev/null
+++ b/src/shared/entities/setting-entity/setting-config.ts
@@ -0,0 +1,126 @@
+import type { ValueUnion } from '@shared/types/common'
+
+import * as settingItemsConfig from './setting-items-config'
+import {
+  aiCommandAutoRunConfig,
+  aiCommandConfig,
+  aiCommandCopyBeforeRunConfig,
+  aiPromptConfig,
+  apiConcurrencyConfig,
+  autoRememberConvertLanguagePairsConfig,
+  codeViewerHelperPromptConfig,
+  convertLanguagePairsConfig,
+  docManagementConfig,
+  expertCodeEnhancerPromptListConfig,
+  ignorePatternsConfig,
+  modelsConfig,
+  openaiBaseUrlConfig,
+  openaiKeyConfig,
+  openaiModelConfig,
+  readClipboardImageConfig,
+  respectGitIgnoreConfig,
+  useSystemProxyConfig
+} from './setting-items-config'
+import type { SettingConfig, SettingConfigItem } from './types'
+
+// Setting groups and pages configuration
+export const settingsConfig: SettingConfig = {
+  pages: [
+    {
+      id: 'general',
+      label: 'General',
+      settings: [
+        openaiKeyConfig,
+        openaiModelConfig,
+        openaiBaseUrlConfig,
+        apiConcurrencyConfig,
+        useSystemProxyConfig,
+        ignorePatternsConfig,
+        respectGitIgnoreConfig
+      ]
+    }
+  ],
+  groups: [
+    {
+      id: 'chat',
+      label: 'Chat',
+      pages: [
+        {
+          id: 'chatModel',
+          label: 'AI Models',
+          settings: [modelsConfig]
+        },
+        {
+          id: 'chatDoc',
+          label: 'Doc Sites Indexing',
+          settings: [docManagementConfig]
+        }
+      ]
+    },
+    {
+      id: 'tools',
+      label: 'Tools',
+      pages: [
+        {
+          id: 'copyAsPrompt',
+          label: 'Copy As Prompt',
+          settings: [aiPromptConfig]
+        },
+        {
+          id: 'codeConvert',
+          label: 'Code Convert',
+          settings: [
+            convertLanguagePairsConfig,
+            autoRememberConvertLanguagePairsConfig
+          ]
+        },
+        {
+          id: 'codeViewerHelper',
+          label: 'Code Viewer Helper',
+          settings: [codeViewerHelperPromptConfig]
+        },
+        {
+          id: 'expertCodeEnhancer',
+          label: 'Expert Code Enhancer',
+          settings: [expertCodeEnhancerPromptListConfig]
+        },
+        {
+          id: 'smartPaste',
+          label: 'Smart Paste',
+          settings: [readClipboardImageConfig]
+        },
+        {
+          id: 'askAI',
+          label: 'Ask AI',
+          settings: [
+            aiCommandConfig,
+            aiCommandCopyBeforeRunConfig,
+            aiCommandAutoRunConfig
+          ]
+        }
+      ]
+    }
+  ]
+}
+
+type SettingItemsConfig = typeof settingItemsConfig
+export type SettingKey = ValueUnion<SettingItemsConfig>['key']
+
+type SettingItemConfigFromKey<K extends SettingKey> = SettingConfigItem<
+  Extract<ValueUnion<SettingItemsConfig>, { key: K }>['renderOptions']['type']
+>
+
+export type SettingValue<K extends SettingKey> =
+  SettingItemConfigFromKey<K>['renderOptions']['defaultValue']
+
+export const settingKeyItemConfigMap = Object.values(settingItemsConfig).reduce(
+  (acc, item) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    acc[item.key] = item
+    return acc
+  },
+  {} as {
+    [K in SettingKey]: SettingItemConfigFromKey<K>
+  }
+)
diff --git a/src/shared/entities/setting-entity/setting-items-config.ts b/src/shared/entities/setting-entity/setting-items-config.ts
new file mode 100644
index 0000000..3425c60
--- /dev/null
+++ b/src/shared/entities/setting-entity/setting-items-config.ts
@@ -0,0 +1,214 @@
+import type { SettingConfigItem } from './types'
+
+// General settings
+export const openaiKeyConfig = {
+  key: 'openaiKey',
+  saveType: 'global',
+  renderOptions: {
+    type: 'input',
+    label: 'OpenAI Key',
+    description:
+      "OpenAI Key, click to view online documentation or I Don't Have an OpenAI Key",
+    placeholder: 'Enter your OpenAI Key',
+    defaultValue: ''
+  }
+} as const satisfies SettingConfigItem<'input'>
+
+export const openaiModelConfig = {
+  key: 'openaiModel',
+  saveType: 'global',
+  renderOptions: {
+    type: 'selectInput',
+    label: 'OpenAI Model',
+    description: 'OpenAI Model, click to view online documentation',
+    options: ['claude-3.5-sonnet', 'gpt-4'],
+    defaultValue: 'claude-3.5-sonnet'
+  }
+} as const satisfies SettingConfigItem<'selectInput'>
+
+export const openaiBaseUrlConfig = {
+  key: 'openaiBaseUrl',
+  saveType: 'global',
+  renderOptions: {
+    type: 'input',
+    label: 'OpenAI Base URL',
+    description: 'OpenAI Base URL, click to view online documentation',
+    defaultValue: 'https://api.openai.com/v1'
+  }
+} as const satisfies SettingConfigItem<'input'>
+
+export const apiConcurrencyConfig = {
+  key: 'apiConcurrency',
+  saveType: 'global',
+  renderOptions: {
+    type: 'numberInput',
+    label: 'API Concurrency',
+    description: 'API request concurrency, click to view online documentation',
+    defaultValue: 3
+  }
+} as const satisfies SettingConfigItem<'numberInput'>
+
+export const useSystemProxyConfig = {
+  key: 'useSystemProxy',
+  saveType: 'global',
+  renderOptions: {
+    type: 'switch',
+    label: 'Use System Proxy',
+    description:
+      'Use global proxy (HTTP_PROXY, HTTPS_PROXY, ALL_PROXY), you need to restart VSCode to take effect after changing this setting',
+    defaultValue: false
+  }
+} as const satisfies SettingConfigItem<'switch'>
+
+export const ignorePatternsConfig = {
+  key: 'ignorePatterns',
+  saveType: 'workspace',
+  renderOptions: {
+    type: 'arrayInput',
+    label: 'Ignore Patterns',
+    description: 'Ignored file name patterns, supports glob syntax',
+    defaultValue: [
+      '**/node_modules/**',
+      '**/.git/**',
+      '**/dist/**',
+      '**/build/**'
+    ]
+  }
+} as const satisfies SettingConfigItem<'arrayInput'>
+
+export const respectGitIgnoreConfig = {
+  key: 'respectGitIgnore',
+  saveType: 'workspace',
+  renderOptions: {
+    type: 'switch',
+    label: 'Respect .gitignore',
+    description: 'Respect .gitignore file',
+    defaultValue: true
+  }
+} as const satisfies SettingConfigItem<'switch'>
+
+// Chat settings
+export const modelsConfig = {
+  key: 'models',
+  saveType: 'global',
+  renderOptions: {
+    type: 'modelManagement',
+    label: 'Models',
+    description: 'Models',
+    defaultValue: {}
+  }
+} as const satisfies SettingConfigItem<'modelManagement'>
+
+export const docManagementConfig = {
+  key: 'docManagement',
+  saveType: 'global',
+  renderOptions: {
+    type: 'docManagement',
+    label: 'Doc Sites Indexing',
+    description: 'Doc Sites Indexing',
+    defaultValue: {}
+  }
+} as const satisfies SettingConfigItem<'docManagement'>
+
+// Tool settings
+export const aiPromptConfig = {
+  key: 'aiPrompt',
+  saveType: 'global',
+  renderOptions: {
+    type: 'textarea',
+    label: 'AI Prompt Template',
+    description:
+      'Template for copied content, use #{content} as a variable for file content',
+    defaultValue: '#{content}'
+  }
+} as const satisfies SettingConfigItem<'textarea'>
+
+export const convertLanguagePairsConfig = {
+  key: 'convertLanguagePairs',
+  saveType: 'workspace',
+  renderOptions: {
+    type: 'objectInput',
+    label: 'Convert Language Pairs',
+    description: 'Default convert language pairs',
+    defaultValue: {}
+  }
+} as const satisfies SettingConfigItem<'objectInput'>
+
+export const autoRememberConvertLanguagePairsConfig = {
+  key: 'autoRememberConvertLanguagePairs',
+  saveType: 'global',
+  renderOptions: {
+    type: 'switch',
+    label: 'Auto Remember Convert Language Pairs',
+    description: 'Automatically remember convert language pairs',
+    defaultValue: true
+  }
+} as const satisfies SettingConfigItem<'switch'>
+
+export const codeViewerHelperPromptConfig = {
+  key: 'codeViewerHelperPrompt',
+  saveType: 'global',
+  renderOptions: {
+    type: 'textarea',
+    label: 'Code Viewer Helper Prompt',
+    description: 'Code viewer helper AI prompt template',
+    defaultValue: ''
+  }
+} as const satisfies SettingConfigItem<'textarea'>
+
+export const expertCodeEnhancerPromptListConfig = {
+  key: 'expertCodeEnhancerPromptList',
+  saveType: 'global',
+  renderOptions: {
+    type: 'arrayInput',
+    label: 'Expert Code Enhancer Prompt List',
+    description: 'Expert code enhancer AI prompt template list',
+    defaultValue: []
+  }
+} as const satisfies SettingConfigItem<'arrayInput'>
+
+export const readClipboardImageConfig = {
+  key: 'readClipboardImage',
+  saveType: 'global',
+  renderOptions: {
+    type: 'switch',
+    label: 'Read Clipboard Image',
+    description:
+      'Allow reading clipboard images as AI context in certain scenarios',
+    defaultValue: false
+  }
+} as const satisfies SettingConfigItem<'switch'>
+
+export const aiCommandConfig = {
+  key: 'aiCommand',
+  saveType: 'global',
+  renderOptions: {
+    type: 'textarea',
+    label: 'AI Command Template',
+    description:
+      'Custom ✨ Aide: Ask AI command template. Available variables: #{filesRelativePath}, #{filesFullPath}, #{content}',
+    defaultValue: ''
+  }
+} as const satisfies SettingConfigItem<'textarea'>
+
+export const aiCommandCopyBeforeRunConfig = {
+  key: 'aiCommandCopyBeforeRun',
+  saveType: 'global',
+  renderOptions: {
+    type: 'switch',
+    label: 'Copy AI Command Before Run',
+    description: 'Copy AI command to clipboard before ✨ Aide: Ask AI running',
+    defaultValue: false
+  }
+} as const satisfies SettingConfigItem<'switch'>
+
+export const aiCommandAutoRunConfig = {
+  key: 'aiCommandAutoRun',
+  saveType: 'global',
+  renderOptions: {
+    type: 'switch',
+    label: 'Auto Run AI Command',
+    description: 'Automatically run AI command when clicking ✨ Aide: Ask AI',
+    defaultValue: false
+  }
+} as const satisfies SettingConfigItem<'switch'>
diff --git a/src/shared/entities/setting-entity/types.ts b/src/shared/entities/setting-entity/types.ts
new file mode 100644
index 0000000..6b795a3
--- /dev/null
+++ b/src/shared/entities/setting-entity/types.ts
@@ -0,0 +1,31 @@
+import type {
+  RenderOptionsMap,
+  RenderOptionsType,
+  SettingsSaveType
+} from './render-options'
+
+export interface SettingGroup {
+  id: string
+  label: string
+  pages: SettingPage[]
+}
+
+export interface SettingPage {
+  id: string
+  label: string
+  settings: SettingConfigItem[]
+  relatedSettings?: SettingConfigItem[]
+}
+
+export interface SettingConfig {
+  pages?: SettingPage[] // general settings
+  groups: SettingGroup[]
+}
+
+export interface SettingConfigItem<
+  T extends RenderOptionsType = RenderOptionsType
+> {
+  key: string
+  saveType: SettingsSaveType
+  renderOptions: RenderOptionsMap[T]
+}
diff --git a/src/shared/entities/settings-entity.ts b/src/shared/entities/settings-entity.ts
deleted file mode 100644
index 3a1acd9..0000000
--- a/src/shared/entities/settings-entity.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { v4 as uuidv4 } from 'uuid'
-
-import { BaseEntity, type IBaseEntity } from './base-entity'
-
-export interface Settings extends IBaseEntity {
-  key: SettingKey
-  value: SettingValue<SettingKey>
-  category: SettingCategory
-  updatedAt: number
-}
-
-export class SettingsEntity extends BaseEntity<Settings> {
-  protected getDefaults(data?: Partial<Settings>): Settings {
-    return {
-      id: uuidv4(),
-      key: 'unknown' as SettingKey,
-      value: 'unknown',
-      category: 'appearance' as SettingCategory,
-      updatedAt: Date.now(),
-      ...data
-    }
-  }
-}
-
-export type SettingsSaveType = 'global' | 'workspace'
-export type SettingsOption = string | { label: string; value: string }
-
-export interface SettingsConfigItem {
-  saveType: SettingsSaveType
-  label: string
-  description: string
-  type: 'string' | 'boolean' | 'number' | 'array' | 'object' | 'select'
-  options?: SettingsOption[]
-  defaultValue: any
-  category: string
-  isCustomRender?: boolean
-}
-
-export const settingsConfig = {
-  // General Settings
-  models: {
-    saveType: 'global',
-    label: 'Models',
-    description: 'Models',
-    type: 'object',
-    defaultValue: {},
-    category: 'general',
-    isCustomRender: true
-  },
-  openaiKey: {
-    saveType: 'global',
-    label: 'OpenAI Key',
-    description:
-      "OpenAI Key, click to view online documentation or I Don't Have an OpenAI Key",
-    type: 'string',
-    defaultValue: '',
-    category: 'general'
-  },
-  openaiModel: {
-    saveType: 'global',
-    label: 'OpenAI Model',
-    description: 'OpenAI Model, click to view online documentation',
-    type: 'select',
-    options: ['claude-3.5-sonnet', 'gpt-4'],
-    defaultValue: 'claude-3.5-sonnet',
-    category: 'general'
-  },
-  openaiBaseUrl: {
-    saveType: 'global',
-    label: 'OpenAI Base URL',
-    description: 'OpenAI Base URL, click to view online documentation',
-    type: 'string',
-    defaultValue: 'https://api.openai.com/v1',
-    category: 'general'
-  },
-  apiConcurrency: {
-    saveType: 'global',
-    label: 'API Concurrency',
-    description: 'API request concurrency, click to view online documentation',
-    type: 'number',
-    defaultValue: 3,
-    category: 'general'
-  },
-  useSystemProxy: {
-    saveType: 'global',
-    label: 'Use System Proxy',
-    description:
-      'Use global proxy (HTTP_PROXY, HTTPS_PROXY, ALL_PROXY), you need to restart VSCode to take effect after changing this setting',
-    type: 'boolean',
-    defaultValue: false,
-    category: 'general'
-  },
-
-  // File Settings
-  ignorePatterns: {
-    saveType: 'workspace',
-    label: 'Ignore Patterns',
-    description: 'Ignored file name patterns, supports glob syntax',
-    type: 'array',
-    defaultValue: [
-      '**/node_modules/**',
-      '**/.git/**',
-      '**/dist/**',
-      '**/build/**'
-    ],
-    category: 'general'
-  },
-  respectGitIgnore: {
-    saveType: 'workspace',
-    label: 'Respect .gitignore',
-    description: 'Respect .gitignore file',
-    type: 'boolean',
-    defaultValue: true,
-    category: 'general'
-  },
-
-  // Tools Settings
-  aiPrompt: {
-    saveType: 'global',
-    label: 'AI Prompt Template',
-    description:
-      'Template for copied content, use #{content} as a variable for file content',
-    type: 'string',
-    defaultValue: '#{content}',
-    category: 'copyAsPrompt'
-  },
-  convertLanguagePairs: {
-    saveType: 'workspace',
-    label: 'Convert Language Pairs',
-    description: 'Default convert language pairs',
-    type: 'object',
-    defaultValue: {},
-    category: 'codeConvert'
-  },
-  autoRememberConvertLanguagePairs: {
-    saveType: 'global',
-    label: 'Auto Remember Convert Language Pairs',
-    description: 'Automatically remember convert language pairs',
-    type: 'boolean',
-    defaultValue: true,
-    category: 'codeConvert'
-  },
-  codeViewerHelperPrompt: {
-    saveType: 'global',
-    label: 'Code Viewer Helper Prompt',
-    description: 'Code viewer helper AI prompt template',
-    type: 'string',
-    defaultValue: '',
-    category: 'codeViewerHelper'
-  },
-  expertCodeEnhancerPromptList: {
-    saveType: 'global',
-    label: 'Expert Code Enhancer Prompt List',
-    description: 'Expert code enhancer AI prompt template list',
-    type: 'array',
-    defaultValue: [],
-    category: 'expertCodeEnhancer'
-  },
-  readClipboardImage: {
-    saveType: 'global',
-    label: 'Read Clipboard Image',
-    description:
-      'Allow reading clipboard images as AI context in certain scenarios',
-    type: 'boolean',
-    defaultValue: false,
-    category: 'smartPaste'
-  },
-
-  // AI Command Settings
-  aiCommand: {
-    saveType: 'global',
-    label: 'AI Command Template',
-    description:
-      'Custom ✨ Aide: Ask AI command template. Available variables: #{filesRelativePath}, #{filesFullPath}, #{content}',
-    type: 'string',
-    defaultValue: '',
-    category: 'askAI'
-  },
-  aiCommandCopyBeforeRun: {
-    saveType: 'global',
-    label: 'Copy AI Command Before Run',
-    description: 'Copy AI command to clipboard before ✨ Aide: Ask AI running',
-    type: 'boolean',
-    defaultValue: false,
-    category: 'askAI'
-  },
-  aiCommandAutoRun: {
-    saveType: 'global',
-    label: 'Auto Run AI Command',
-    description: 'Automatically run AI command when clicking ✨ Aide: Ask AI',
-    type: 'boolean',
-    defaultValue: false,
-    category: 'askAI'
-  }
-} as const satisfies Record<string, SettingsConfigItem>
-
-// Type helpers
-type SettingValueType = {
-  string: string
-  boolean: boolean
-  number: number
-  array: any[]
-  object: Record<string, any>
-  select: string
-}
-
-export type SettingKey = keyof typeof settingsConfig
-export type SettingCategory = (typeof settingsConfig)[SettingKey]['category']
-export type SettingValue<K extends SettingKey> =
-  SettingValueType[(typeof settingsConfig)[K]['type']]
diff --git a/src/shared/plugins/base/client/client-plugin-context.ts b/src/shared/plugins/base/client/client-plugin-context.ts
index a3712b2..711e3e7 100644
--- a/src/shared/plugins/base/client/client-plugin-context.ts
+++ b/src/shared/plugins/base/client/client-plugin-context.ts
@@ -53,7 +53,7 @@ export class ClientPluginContext<State extends PluginState = PluginState> {
   }
 
   getQueryClient() {
-    return this.registry.queryClient
+    return this?.registry?.queryClient
   }
 
   registerCommand(command: string, callback: (...args: any[]) => void): void {
diff --git a/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx b/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx
index 1dc5682..ee5a9bb 100644
--- a/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx
+++ b/src/shared/plugins/doc-plugin/client/doc-client-plugin.tsx
@@ -46,7 +46,11 @@ export class DocClientPlugin implements ClientPlugin<DocPluginState> {
   private async getMentionOptions(): Promise<MentionOption[]> {
     if (!this.context) return []
 
-    const docSites = await this.context.getQueryClient().fetchQuery({
+    const queryClient = this?.context?.getQueryClient?.()
+
+    if (!queryClient) return []
+
+    const docSites = await queryClient.fetchQuery({
       queryKey: ['realtime', 'docSites'],
       queryFn: () => api.doc.getDocSites({})
     })
diff --git a/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx b/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx
index 61c5856..55ec17b 100644
--- a/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx
+++ b/src/shared/plugins/fs-plugin/client/fs-client-plugin.tsx
@@ -117,22 +117,26 @@ export class FsClientPlugin implements ClientPlugin<FsPluginState> {
   private async getMentionOptions(): Promise<MentionOption[]> {
     if (!this.context) return []
 
-    const files = await this.context.getQueryClient().fetchQuery({
+    const queryClient = this?.context?.getQueryClient?.()
+
+    if (!queryClient) return []
+
+    const files = await queryClient.fetchQuery({
       queryKey: ['realtime', 'files'],
       queryFn: () => api.file.traverseWorkspaceFiles({ filesOrFolders: ['./'] })
     })
 
-    const folders = await this.context.getQueryClient().fetchQuery({
+    const folders = await queryClient.fetchQuery({
       queryKey: ['realtime', 'folders'],
       queryFn: () => api.file.traverseWorkspaceFolders({ folders: ['./'] })
     })
 
-    const editorErrors = await this.context.getQueryClient().fetchQuery({
+    const editorErrors = await queryClient.fetchQuery({
       queryKey: ['realtime', 'editorErrors'],
       queryFn: () => api.file.getCurrentEditorErrors({})
     })
 
-    const treesInfo = await this.context.getQueryClient().fetchQuery({
+    const treesInfo = await queryClient.fetchQuery({
       queryKey: ['realtime', 'treesInfo'],
       queryFn: () => api.file.getWorkspaceTreesInfo({ depth: 5 })
     })
diff --git a/src/shared/plugins/git-plugin/client/git-client-plugin.tsx b/src/shared/plugins/git-plugin/client/git-client-plugin.tsx
index cde8dc5..ae2189f 100644
--- a/src/shared/plugins/git-plugin/client/git-client-plugin.tsx
+++ b/src/shared/plugins/git-plugin/client/git-client-plugin.tsx
@@ -42,7 +42,11 @@ export class GitClientPlugin implements ClientPlugin<GitPluginState> {
   private async getMentionOptions(): Promise<MentionOption[]> {
     if (!this.context) return []
 
-    const gitCommits = await this.context.getQueryClient().fetchQuery({
+    const queryClient = this?.context?.getQueryClient?.()
+
+    if (!queryClient) return []
+
+    const gitCommits = await queryClient.fetchQuery({
       queryKey: ['realtime', 'git-commits'],
       queryFn: () =>
         api.git.getHistoryCommits({
diff --git a/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx b/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx
index 0a326c5..1f21a1e 100644
--- a/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx
+++ b/src/shared/plugins/terminal-plugin/client/terminal-client-plugin.tsx
@@ -44,7 +44,11 @@ export class TerminalClientPlugin implements ClientPlugin<TerminalPluginState> {
   private async getMentionOptions(): Promise<MentionOption[]> {
     if (!this.context) return []
 
-    const terminals = await this.context.getQueryClient().fetchQuery({
+    const queryClient = this?.context?.getQueryClient?.()
+
+    if (!queryClient) return []
+
+    const terminals = await queryClient.fetchQuery({
       queryKey: ['realtime', 'terminals'],
       queryFn: () => api.terminal.getTerminalsForMention({})
     })
diff --git a/src/shared/types/common.ts b/src/shared/types/common.ts
index bc6a974..784b8b0 100644
--- a/src/shared/types/common.ts
+++ b/src/shared/types/common.ts
@@ -1,2 +1,3 @@
 export type UnPromise<T> = T extends Promise<infer U> ? U : T
 export type MaybePromise<T> = T | Promise<T>
+export type ValueUnion<T> = T[keyof T]
diff --git a/src/webview/components/global-search/global-search.tsx b/src/webview/components/global-search/global-search.tsx
index e2206c5..14d685d 100644
--- a/src/webview/components/global-search/global-search.tsx
+++ b/src/webview/components/global-search/global-search.tsx
@@ -3,15 +3,11 @@ import {
   Command,
   CommandDialog,
   CommandEmpty,
+  CommandHook,
   CommandInput,
   CommandItem,
   CommandList
 } from '@webview/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from '@webview/components/ui/popover'
 import {
   Tabs,
   TabsContent,
@@ -47,7 +43,7 @@ export interface SearchItem extends Partial<SearchResultItemProps> {
 
 interface GlobalSearchProps {
   categories: SearchCategory[]
-  categoriesIsResult?: boolean
+  useInnerFilter?: boolean
   onOpenChange?: (open: boolean) => void
   open?: boolean
   activeCategory?: string
@@ -65,7 +61,7 @@ const keyboardShortcuts: ShortcutInfo[] = [
 
 export const GlobalSearch: React.FC<GlobalSearchProps> = ({
   categories,
-  categoriesIsResult,
+  useInnerFilter = true,
   onOpenChange,
   open: openProp,
   activeCategory: activeCategoryProp,
@@ -101,7 +97,7 @@ export const GlobalSearch: React.FC<GlobalSearchProps> = ({
         ? categories.flatMap(c => c.items)
         : categories.find(c => c.id === activeCategory)?.items || []
 
-    if (categoriesIsResult) {
+    if (useInnerFilter) {
       setFilteredItems(items)
     } else {
       setFilteredItems(
@@ -116,7 +112,7 @@ export const GlobalSearch: React.FC<GlobalSearchProps> = ({
         })
       )
     }
-  }, [activeCategory, searchQuery, categories, categoriesIsResult])
+  }, [activeCategory, searchQuery, categories, useInnerFilter])
 
   const handleOpenChange = (open: boolean) => {
     setIsOpen(open)
@@ -145,21 +141,29 @@ export const GlobalSearch: React.FC<GlobalSearchProps> = ({
   })
 
   return (
-    <CommandDialog open={isOpen} onOpenChange={handleOpenChange}>
+    <CommandDialog
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      dialogContentClassName="border-none bg-transparent rounded-none"
+      commandClassName="bg-transparent"
+    >
       <div className="flex flex-col" onKeyDown={handleKeyDown}>
         <Command
           loop
-          shouldFilter={!categoriesIsResult}
-          onValueChange={val => {
-            const target = filteredItems.find(item => item.id === val)
-            target && setFocusedItem(target)
-          }}
+          shouldFilter={useInnerFilter}
+          className="border rounded-md h-auto"
         >
           <CommandInput
             placeholder="Type to search..."
             value={searchQuery}
             onValueChange={setSearchQuery}
           />
+          <CommandHook
+            onFocus={val => {
+              const target = filteredItems.find(item => item.id === val)
+              target && setFocusedItem(target)
+            }}
+          />
           <Tabs
             className="h-[300px] flex flex-col overflow-hidden"
             value={activeCategory}
@@ -193,25 +197,16 @@ export const GlobalSearch: React.FC<GlobalSearchProps> = ({
               </TabsContent>
             ))}
           </Tabs>
+          <KeyboardShortcutsInfo shortcuts={keyboardShortcuts} />
         </Command>
-        <KeyboardShortcutsInfo shortcuts={keyboardShortcuts} />
 
-        <Popover open={isOpen && Boolean(focusedItem?.renderPreview)}>
-          <PopoverTrigger asChild>
-            <div />
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            align="start"
-            sideOffset={32}
-            className="min-w-[200px] max-w-[400px] w-screen p-0 z-10"
-            onOpenAutoFocus={e => e.preventDefault()}
-            onCloseAutoFocus={e => e.preventDefault()}
-            onKeyDown={e => e.stopPropagation()}
-          >
-            {focusedItem?.renderPreview?.()}
-          </PopoverContent>
-        </Popover>
+        <div className="w-full h-[250px] mt-4">
+          {isOpen && focusedItem?.renderPreview ? (
+            <div className="border border-primary rounded-md p-2 bg-popover text-popover-foreground w-full max-h-full overflow-auto">
+              {focusedItem.renderPreview()}
+            </div>
+          ) : null}
+        </div>
       </div>
     </CommandDialog>
   )
diff --git a/src/webview/components/settings/setting-item-renderer.tsx b/src/webview/components/settings/setting-item-renderer.tsx
new file mode 100644
index 0000000..35ada10
--- /dev/null
+++ b/src/webview/components/settings/setting-item-renderer.tsx
@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons'
+import type { SettingConfigItem } from '@shared/entities'
+import { Button } from '@webview/components/ui/button'
+import { Input } from '@webview/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@webview/components/ui/select'
+import { Switch } from '@webview/components/ui/switch'
+import { Textarea } from '@webview/components/ui/textarea'
+
+import { AIProviderManagement } from './custom-renders/ai-provider-management'
+import { CodebaseIndexing } from './custom-renders/codebase'
+import { DocManagement } from './custom-renders/doc-management'
+
+interface SettingItemRendererProps {
+  value: any
+  onChange: (value: any) => void
+  disabled?: boolean
+  config: SettingConfigItem
+}
+
+export const SettingItemRenderer = ({
+  value,
+  onChange,
+  disabled,
+  config
+}: SettingItemRendererProps) => {
+  const [showSecret, setShowSecret] = useState(false)
+
+  const val = value ?? config.renderOptions.defaultValue
+  const inputProps = {
+    disabled,
+    value: val,
+    onChange: (e: any) => onChange(e.target.value),
+    placeholder: config.renderOptions.placeholder ?? '',
+    className: 'text-sm'
+  }
+
+  switch (config.renderOptions.type) {
+    case 'input':
+      return (
+        <div className="flex gap-2">
+          <Input type={showSecret ? 'text' : 'password'} {...inputProps} />
+          <Button
+            variant="ghost"
+            size="icon"
+            type="button"
+            onClick={() => setShowSecret(!showSecret)}
+          >
+            {showSecret ? (
+              <EyeOpenIcon className="h-4 w-4" />
+            ) : (
+              <EyeClosedIcon className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      )
+
+    case 'textarea':
+      return <Textarea {...inputProps} />
+
+    case 'switch':
+      return (
+        <Switch checked={val} onCheckedChange={onChange} disabled={disabled} />
+      )
+
+    case 'numberInput':
+      return (
+        <Input
+          type="number"
+          {...inputProps}
+          onChange={e => onChange(Number(e.target.value))}
+        />
+      )
+
+    case 'selectInput':
+      return (
+        <Select value={val} onValueChange={onChange} disabled={disabled}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {config.renderOptions.options?.map(option => {
+              const { label, value } =
+                typeof option === 'string'
+                  ? { label: option, value: option }
+                  : option
+              return (
+                <SelectItem key={value} value={value}>
+                  {label}
+                </SelectItem>
+              )
+            })}
+          </SelectContent>
+        </Select>
+      )
+
+    case 'arrayInput':
+    case 'objectInput':
+      return (
+        <Button
+          variant="outline"
+          onClick={() => onChange(config.renderOptions.defaultValue)}
+          disabled={disabled}
+        >
+          Edit {config.renderOptions.type === 'arrayInput' ? 'Array' : 'Object'}
+        </Button>
+      )
+
+    case 'codebaseIndexing':
+      return <CodebaseIndexing />
+
+    case 'docManagement':
+      return <DocManagement />
+
+    case 'modelManagement':
+      return <AIProviderManagement />
+
+    default:
+      return null
+  }
+}
diff --git a/src/webview/components/settings/setting-item.tsx b/src/webview/components/settings/setting-item.tsx
new file mode 100644
index 0000000..c47d478
--- /dev/null
+++ b/src/webview/components/settings/setting-item.tsx
@@ -0,0 +1,59 @@
+import type {
+  SettingConfigItem,
+  SettingKey,
+  SettingsSaveType
+} from '@shared/entities'
+import { useSettings } from '@webview/hooks/api/use-settings'
+import { cn } from '@webview/utils/common'
+
+import { SettingItemRenderer } from './setting-item-renderer'
+
+export interface SettingItemProps {
+  config: SettingConfigItem
+  value?: any
+  onChange?: (event: {
+    key: string
+    value: any
+    saveType: SettingsSaveType
+  }) => Promise<void>
+  className?: string
+}
+
+export const SettingItem = ({
+  config,
+  value,
+  onChange,
+  className
+}: SettingItemProps) => {
+  const { getSetting, setSetting, loadingMap } = useSettings({
+    autoToastOnSuccess: false
+  })
+  const loading = loadingMap[config.key as SettingKey]
+
+  const handleChange = async (newValue: any) => {
+    setSetting(config.key, newValue)
+    onChange?.({ key: config.key, value: newValue, saveType: config.saveType })
+  }
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      <div className="flex justify-between items-center">
+        <label className="text-sm font-medium leading-none">
+          {config.renderOptions.label}
+        </label>
+        {loading && (
+          <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" />
+        )}
+      </div>
+      <SettingItemRenderer
+        value={value ?? getSetting(config.key as SettingKey)}
+        onChange={handleChange}
+        disabled={loading}
+        config={config}
+      />
+      <p className="text-sm text-muted-foreground">
+        {config.renderOptions.description}
+      </p>
+    </div>
+  )
+}
diff --git a/src/webview/components/settings/setting-items-page.tsx b/src/webview/components/settings/setting-items-page.tsx
new file mode 100644
index 0000000..da6208b
--- /dev/null
+++ b/src/webview/components/settings/setting-items-page.tsx
@@ -0,0 +1,33 @@
+import type { SettingPage, SettingsSaveType } from '@shared/entities'
+
+import { SettingItem } from './setting-item'
+
+export interface SettingItemsPageProps {
+  page: SettingPage
+  onChange?: (event: {
+    key: string
+    value: any
+    saveType: SettingsSaveType
+  }) => Promise<void>
+  className?: string
+}
+
+export const SettingItemsPage = ({
+  page,
+  onChange,
+  className
+}: SettingItemsPageProps) => {
+  if (!page?.settings?.length) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      <div className="space-y-6">
+        {page.settings.map(setting => (
+          <SettingItem key={setting.key} config={setting} onChange={onChange} />
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/webview/components/settings/settings-config.tsx b/src/webview/components/settings/settings-config.tsx
deleted file mode 100644
index f60ae74..0000000
--- a/src/webview/components/settings/settings-config.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import {
-  settingsConfig as sharedSettingsConfig,
-  type SettingCategory,
-  type SettingsConfigItem
-} from '@shared/entities'
-
-import { AIProviderManagement } from './custom-renders/ai-provider-management'
-import { CodebaseIndexing } from './custom-renders/codebase'
-import { DocManagement } from './custom-renders/doc-management'
-import type { SettingItem, SettingsConfig } from './types'
-
-const convertToUIConfig = () => {
-  const settingsByCategory = Object.entries(
-    sharedSettingsConfig as Record<string, SettingsConfigItem>
-  ).reduce(
-    (acc, [key, setting]) => {
-      const { category } = setting
-      if (!acc[category]) {
-        acc[category] = []
-      }
-
-      if (!setting.isCustomRender) {
-        acc[category]!.push({
-          saveType: setting.saveType,
-          key,
-          label: setting.label,
-          description: setting.description,
-          type: setting.type,
-          options: ((setting as SettingsConfigItem)?.options ?? []).map(
-            option =>
-              typeof option === 'string'
-                ? { label: option, value: option }
-                : option
-          ),
-          defaultValue: setting.defaultValue
-        })
-      }
-
-      return acc
-    },
-    {} as Record<string, SettingItem[]>
-  ) as Record<SettingCategory, SettingItem[]>
-
-  // Define standalone categories
-  const categories = [
-    {
-      id: 'general',
-      label: 'General',
-      settings: settingsByCategory.general || []
-    }
-  ]
-
-  // Define groups and their categories
-  const groups = [
-    {
-      id: 'chat',
-      label: 'Chat',
-      categories: [
-        {
-          id: 'chatModel',
-          label: 'AI Models',
-          settings: [
-            {
-              key: 'model',
-              label: 'AI Models',
-              description: 'Add, remove, and manage AI models',
-              type: 'custom',
-              customRenderer: () => <AIProviderManagement />
-            }
-          ]
-        },
-        {
-          id: 'chatDoc',
-          label: 'Doc Sites Indexing',
-          settings: [
-            {
-              key: 'doc',
-              label: 'Doc Sites Indexing',
-              description:
-                'Add, remove, and manage documentation sites for indexing',
-              type: 'custom',
-              customRenderer: () => <DocManagement />
-            }
-          ]
-        },
-        {
-          id: 'chatCodebase',
-          label: 'Codebase Indexing',
-          settings: [
-            {
-              key: 'codebase',
-              label: 'Codebase Indexing',
-              description: 'Manage codebase indexing for AI features',
-              type: 'custom',
-              customRenderer: () => <CodebaseIndexing />
-            }
-          ]
-        }
-      ]
-    },
-    {
-      id: 'tools',
-      label: 'Tools',
-      categories: [
-        {
-          id: 'copyAsPrompt',
-          label: 'Copy As Prompt',
-          settings: settingsByCategory.copyAsPrompt || []
-        },
-        {
-          id: 'codeConvert',
-          label: 'Code Convert',
-          settings: settingsByCategory.codeConvert || []
-        },
-        {
-          id: 'codeViewerHelper',
-          label: 'Code Viewer Helper',
-          settings: settingsByCategory.codeViewerHelper || []
-        },
-        {
-          id: 'expertCodeEnhancer',
-          label: 'Expert Code Enhancer',
-          settings: settingsByCategory.expertCodeEnhancer || []
-        },
-        {
-          id: 'smartPaste',
-          label: 'Smart Paste',
-          settings: settingsByCategory.smartPaste || []
-        },
-        {
-          id: 'askAI',
-          label: 'Ask AI',
-          settings: settingsByCategory.askAI || []
-        }
-      ]
-    }
-  ]
-
-  return {
-    title: 'Settings',
-    groups,
-    categories // Add standalone categories
-  } as SettingsConfig
-}
-
-export const settingsConfig = convertToUIConfig()
diff --git a/src/webview/components/settings/settings-page.tsx b/src/webview/components/settings/settings-page.tsx
deleted file mode 100644
index 6610c11..0000000
--- a/src/webview/components/settings/settings-page.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useEffect } from 'react'
-import type { SettingsSaveType } from '@shared/entities'
-import { api } from '@webview/services/api-client'
-import { useNavigate, useSearchParams } from 'react-router-dom'
-
-import { Settings } from './settings'
-import { settingsConfig } from './settings-config'
-
-export const SettingsPage = () => {
-  const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
-  const category = searchParams.get('category')
-
-  useEffect(() => {
-    // If category is provided in URL, ensure it exists in config
-    if (category && typeof category === 'string') {
-      const isValidCategory =
-        settingsConfig.categories.some(c => c.id === category) ||
-        settingsConfig.groups.some(group =>
-          group.categories.some(c => c.id === category)
-        )
-
-      if (!isValidCategory) {
-        navigate('/settings', { replace: true })
-      }
-    }
-  }, [category, navigate])
-
-  const handleRemoteChange = async (
-    key: string,
-    value: any,
-    saveType: SettingsSaveType
-  ) => {
-    const _key = key as any
-    if (saveType === 'global') {
-      await api.settings.setGlobalSetting({ key: _key, value })
-    } else {
-      await api.settings.setWorkspaceSetting({ key: _key, value })
-    }
-  }
-
-  return (
-    <Settings
-      config={settingsConfig}
-      onRemoteChange={handleRemoteChange}
-      initialCategory={category as string}
-    />
-  )
-}
diff --git a/src/webview/components/settings/settings.tsx b/src/webview/components/settings/settings.tsx
index 58e7b7a..a54173d 100644
--- a/src/webview/components/settings/settings.tsx
+++ b/src/webview/components/settings/settings.tsx
@@ -1,64 +1,49 @@
-import { useEffect, useState, type FC } from 'react'
+import { useEffect, useState } from 'react'
 import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons'
-import type { SettingsSaveType } from '@shared/entities'
+import { settingsConfig, type SettingsSaveType } from '@shared/entities'
 import { Button } from '@webview/components/ui/button'
 import { Input } from '@webview/components/ui/input'
 import { ScrollArea } from '@webview/components/ui/scroll-area'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from '@webview/components/ui/select'
-import { Switch } from '@webview/components/ui/switch'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger
 } from '@webview/components/ui/tabs'
-import { cn, logAndToastError } from '@webview/utils/common'
-import { logger } from '@webview/utils/logger'
 
 import { SidebarLayout } from '../sidebar-layout'
-import type { SettingCategory, SettingItem, SettingsConfig } from './types'
+import { SettingItemsPage } from './setting-items-page'
 
 export interface SettingsProps {
-  config: SettingsConfig
-  onChange?: (key: string, value: any) => void
-  onRemoteChange?: (
-    key: string,
-    value: any,
+  onChange?: (event: {
+    key: string
+    value: any
     saveType: SettingsSaveType
-  ) => Promise<void>
+  }) => Promise<void>
   className?: string
-  initialCategory?: string
+  initialPageId?: string | null
 }
 
-export const Settings: FC<SettingsProps> = ({
-  config,
+export const Settings = ({
   onChange,
-  onRemoteChange,
   className,
-  initialCategory
-}) => {
+  initialPageId
+}: SettingsProps) => {
   const [searchTerm, setSearchTerm] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState<string>(
-    initialCategory || config.categories[0]?.id || '' // Use initialCategory if provided
+  const [selectedPage, setSelectedPage] = useState<string>(
+    initialPageId || settingsConfig.pages?.[0]?.id || ''
   )
   const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>(
-    Object.fromEntries(config.groups.map(group => [group.id, true]))
+    Object.fromEntries(settingsConfig.groups.map(group => [group.id, true]))
   )
-  const [loading, setLoading] = useState<Record<string, boolean>>({})
 
   useEffect(() => {
-    if (initialCategory) {
-      setSelectedCategory(initialCategory)
+    if (initialPageId) {
+      setSelectedPage(initialPageId)
 
-      // If the category is in a group, ensure the group is expanded
-      config.groups.forEach(group => {
-        if (group.categories.some(cat => cat.id === initialCategory)) {
+      // If the page is in a group, ensure the group is expanded
+      settingsConfig.groups.forEach(group => {
+        if (group.pages.some(page => page.id === initialPageId)) {
           setExpandedGroups(prev => ({
             ...prev,
             [group.id]: true
@@ -66,23 +51,7 @@ export const Settings: FC<SettingsProps> = ({
         }
       })
     }
-  }, [initialCategory, config.groups])
-
-  const handleSettingChange = async (setting: SettingItem, value: any) => {
-    logger.log(`Setting ${setting.key} changed to:`, value)
-    onChange?.(setting.key, value)
-
-    if (onRemoteChange) {
-      setLoading(prev => ({ ...prev, [setting.key]: true }))
-      try {
-        await onRemoteChange(setting.key, value, setting.saveType)
-      } catch (error) {
-        logAndToastError('Failed to save setting', error)
-      } finally {
-        setLoading(prev => ({ ...prev, [setting.key]: false }))
-      }
-    }
-  }
+  }, [initialPageId])
 
   const toggleGroup = (groupId: string) => {
     setExpandedGroups(prev => ({
@@ -91,88 +60,23 @@ export const Settings: FC<SettingsProps> = ({
     }))
   }
 
-  const filterItems = (items: SettingCategory[]) =>
+  const filterItems = (
+    items: (typeof settingsConfig.groups)[number]['pages']
+  ) =>
     items.filter(
       item =>
         item.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
         item.settings?.some(
           setting =>
-            setting.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
-            setting.description.toLowerCase().includes(searchTerm.toLowerCase())
+            setting.renderOptions.label
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase()) ||
+            setting.renderOptions.description
+              .toLowerCase()
+              .includes(searchTerm.toLowerCase())
         )
     )
 
-  const renderSettingInput = (setting: SettingItem) => {
-    const isLoading = loading[setting.key]
-
-    const renderInput = () => {
-      switch (setting.type) {
-        case 'string':
-          return (
-            <Input
-              defaultValue={setting.defaultValue}
-              onChange={e => handleSettingChange(setting, e.target.value)}
-            />
-          )
-        case 'number':
-          return (
-            <Input
-              type="number"
-              defaultValue={setting.defaultValue}
-              onChange={e =>
-                handleSettingChange(setting, parseFloat(e.target.value))
-              }
-            />
-          )
-        case 'boolean':
-          return (
-            <Switch
-              defaultChecked={setting.defaultValue}
-              onCheckedChange={checked => handleSettingChange(setting, checked)}
-            />
-          )
-        case 'select':
-          return (
-            <Select
-              defaultValue={setting.defaultValue}
-              onValueChange={value => handleSettingChange(setting, value)}
-            >
-              <SelectTrigger>
-                <SelectValue>{setting.defaultValue}</SelectValue>
-              </SelectTrigger>
-              <SelectContent>
-                {setting.options?.map(option => (
-                  <SelectItem key={option.value} value={option.value}>
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          )
-        case 'custom':
-          return setting.customRenderer?.()
-        default:
-          return null
-      }
-    }
-
-    return (
-      <div
-        className={cn(
-          'relative',
-          isLoading && 'opacity-50 pointer-events-none'
-        )}
-      >
-        {isLoading && (
-          <div className="absolute inset-0 flex items-center justify-center">
-            <div className="animate-spin h-4 w-4 border-2 border-primary border-t-transparent rounded-full" />
-          </div>
-        )}
-        {renderInput()}
-      </div>
-    )
-  }
-
   const sidebar = () => (
     <div>
       <div className="space-y-1">
@@ -185,20 +89,21 @@ export const Settings: FC<SettingsProps> = ({
       </div>
       <ScrollArea className="h-[calc(100vh-150px)] mt-2">
         <div className="space-y-1 py-2">
-          {/* Render standalone categories */}
-          {filterItems(config.categories).map(category => (
-            <Button
-              key={category.id}
-              variant={selectedCategory === category.id ? 'secondary' : 'ghost'}
-              className="w-full justify-start px-2"
-              onClick={() => setSelectedCategory(category.id)}
-            >
-              {category.label}
-            </Button>
-          ))}
+          {/* Render standalone pages */}
+          {settingsConfig.pages &&
+            filterItems(settingsConfig.pages).map(page => (
+              <Button
+                key={page.id}
+                variant={selectedPage === page.id ? 'secondary' : 'ghost'}
+                className="w-full justify-start px-2"
+                onClick={() => setSelectedPage(page.id)}
+              >
+                {page.label}
+              </Button>
+            ))}
 
           {/* Render groups */}
-          {config.groups.map(group => (
+          {settingsConfig.groups.map(group => (
             <div key={group.id} className="space-y-1">
               <Button
                 variant="ghost"
@@ -214,16 +119,14 @@ export const Settings: FC<SettingsProps> = ({
               </Button>
               {expandedGroups[group.id] && (
                 <div className="ml-4 space-y-1">
-                  {filterItems(group.categories).map(category => (
+                  {filterItems(group.pages).map(page => (
                     <Button
-                      key={category.id}
-                      variant={
-                        selectedCategory === category.id ? 'secondary' : 'ghost'
-                      }
+                      key={page.id}
+                      variant={selectedPage === page.id ? 'secondary' : 'ghost'}
                       className="w-full justify-start pl-4"
-                      onClick={() => setSelectedCategory(category.id)}
+                      onClick={() => setSelectedPage(page.id)}
                     >
-                      {category.label}
+                      {page.label}
                     </Button>
                   ))}
                 </div>
@@ -236,66 +139,44 @@ export const Settings: FC<SettingsProps> = ({
   )
 
   const content = (
-    <Tabs value={selectedCategory} className="flex-1">
+    <Tabs value={selectedPage} className="flex-1">
       <TabsList className="hidden">
-        {/* Include standalone categories */}
-        {config.categories.map(category => (
-          <TabsTrigger key={category.id} value={category.id}>
-            {category.label}
+        {/* Include standalone pages */}
+        {settingsConfig.pages?.map(page => (
+          <TabsTrigger key={page.id} value={page.id}>
+            {page.label}
           </TabsTrigger>
         ))}
-        {/* Include group categories */}
-        {config.groups.flatMap(group =>
-          group.categories.map(category => (
-            <TabsTrigger key={category.id} value={category.id}>
-              {category.label}
+        {/* Include group pages */}
+        {settingsConfig.groups.flatMap(group =>
+          group.pages.map(page => (
+            <TabsTrigger key={page.id} value={page.id}>
+              {page.label}
             </TabsTrigger>
           ))
         )}
       </TabsList>
 
-      {/* Render standalone category content */}
-      {config.categories.map(category => (
+      {/* Render standalone page content */}
+      {settingsConfig.pages?.map(page => (
         <TabsContent
-          key={category.id}
-          value={category.id}
+          key={page.id}
+          value={page.id}
           className="flex-1 p-4 overflow-auto"
         >
-          <div className="space-y-6">
-            {category.settings?.map(setting => (
-              <div key={setting.key} className="flex flex-col space-y-2">
-                <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                  {setting.label}
-                </label>
-                {renderSettingInput(setting)}
-                <p className="text-sm text-gray-500">{setting.description}</p>
-              </div>
-            ))}
-            {category.customRenderer?.()}
-          </div>
+          <SettingItemsPage page={page} onChange={onChange} />
         </TabsContent>
       ))}
 
-      {/* Render group category content */}
-      {config.groups.flatMap(group =>
-        group.categories.map(category => (
+      {/* Render group page content */}
+      {settingsConfig.groups.flatMap(group =>
+        group.pages.map(page => (
           <TabsContent
-            key={category.id}
-            value={category.id}
+            key={page.id}
+            value={page.id}
             className="flex-1 p-4 overflow-auto"
           >
-            <div className="space-y-6">
-              {category.settings?.map(setting => (
-                <div key={setting.key} className="flex flex-col space-y-2">
-                  <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-                    {setting.label}
-                  </label>
-                  {renderSettingInput(setting)}
-                  <p className="text-sm text-gray-500">{setting.description}</p>
-                </div>
-              ))}
-              {category.customRenderer?.()}
-            </div>
+            <SettingItemsPage page={page} onChange={onChange} />
           </TabsContent>
         ))
       )}
@@ -303,11 +184,7 @@ export const Settings: FC<SettingsProps> = ({
   )
 
   return (
-    <SidebarLayout
-      title={config.title}
-      sidebar={sidebar()}
-      className={className}
-    >
+    <SidebarLayout title="Settings" sidebar={sidebar()} className={className}>
       {content}
     </SidebarLayout>
   )
diff --git a/src/webview/components/settings/types.ts b/src/webview/components/settings/types.ts
deleted file mode 100644
index 2fa620c..0000000
--- a/src/webview/components/settings/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { SettingsSaveType } from '@shared/entities'
-
-export interface SettingItem {
-  saveType: SettingsSaveType
-  key: string
-  label: string
-  description: string
-  type:
-    | 'string'
-    | 'number'
-    | 'boolean'
-    | 'array'
-    | 'object'
-    | 'select'
-    | 'custom'
-  options?: { label: string; value: any }[]
-  defaultValue?: any
-  customRenderer?: () => React.ReactNode
-}
-
-export interface SettingCategory {
-  id: string
-  label: string
-  settings?: SettingItem[]
-  customRenderer?: () => React.ReactNode
-}
-
-export interface SettingGroup {
-  id: string
-  label: string
-  categories: SettingCategory[]
-  expanded?: boolean
-}
-
-export interface SettingsConfig {
-  title: string
-  groups: SettingGroup[]
-  categories: SettingCategory[]
-}
diff --git a/src/webview/components/ui/command.tsx b/src/webview/components/ui/command.tsx
index 281f77e..7900099 100644
--- a/src/webview/components/ui/command.tsx
+++ b/src/webview/components/ui/command.tsx
@@ -10,7 +10,7 @@ import {
   DialogTitle
 } from '@webview/components/ui/dialog'
 import { cn } from '@webview/utils/common'
-import { Command as CommandPrimitive } from 'cmdk'
+import { Command as CommandPrimitive, useCommandState } from 'cmdk'
 
 const Command: React.FC<
   React.ComponentPropsWithRef<typeof CommandPrimitive>
@@ -26,13 +26,36 @@ const Command: React.FC<
 )
 Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
+export const CommandHook: React.FC<{ onFocus: (val: string) => void }> = ({
+  onFocus
+}) => {
+  const val = useCommandState(state => state.value)
 
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => (
+  React.useEffect(() => {
+    onFocus(val)
+  }, [val])
+
+  return null
+}
+
+interface CommandDialogProps extends DialogProps {
+  dialogContentClassName?: string
+  commandClassName?: string
+}
+
+const CommandDialog = ({
+  children,
+  dialogContentClassName,
+  commandClassName,
+  ...props
+}: CommandDialogProps) => (
   <Dialog {...props}>
     <DialogContent
       hideClose
-      className="overflow-hidden p-0 max-w-[400px] w-[calc(100vw-1rem)] rounded-md"
+      className={cn(
+        'overflow-hidden p-0 max-w-[400px] w-[calc(100vw-1rem)] rounded-md',
+        dialogContentClassName
+      )}
     >
       <VisuallyHidden>
         <DialogHeader>
@@ -41,7 +64,12 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => (
         </DialogHeader>
       </VisuallyHidden>
 
-      <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <Command
+        className={cn(
+          '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',
+          commandClassName
+        )}
+      >
         {children}
       </Command>
     </DialogContent>
diff --git a/src/webview/components/ui/popover.tsx b/src/webview/components/ui/popover.tsx
index e54fa4f..3dc223a 100644
--- a/src/webview/components/ui/popover.tsx
+++ b/src/webview/components/ui/popover.tsx
@@ -40,7 +40,7 @@ const PopoverContent: React.FC<PopoverContentProps> = ({
   return (
     <MotionConfig transition={TRANSITION}>
       <PopoverPrimitive.Portal>
-        <AnimatePresence>
+        <AnimatePresence mode="popLayout">
           {withBlur && (
             <motion.div
               key="blur"
diff --git a/src/webview/contexts/global-search-context/index.tsx b/src/webview/contexts/global-search-context/index.tsx
index e7bb39d..126e673 100644
--- a/src/webview/contexts/global-search-context/index.tsx
+++ b/src/webview/contexts/global-search-context/index.tsx
@@ -105,7 +105,7 @@ export const GlobalSearchProvider: React.FC<React.PropsWithChildren> = ({
   return (
     <GlobalSearchContext.Provider value={contextValue}>
       <GlobalSearch
-        categoriesIsResult
+        useInnerFilter={false}
         categories={searchCategories}
         open={isOpen}
         onOpenChange={setIsOpen}
diff --git a/src/webview/contexts/global-search-context/previews/setting-preview.tsx b/src/webview/contexts/global-search-context/previews/setting-preview.tsx
new file mode 100644
index 0000000..5bdf317
--- /dev/null
+++ b/src/webview/contexts/global-search-context/previews/setting-preview.tsx
@@ -0,0 +1,7 @@
+import { SettingItem } from '@webview/components/settings/setting-item'
+
+import type { SearchSettingItem } from '../types'
+
+export const SettingPreview: React.FC<{ setting: SearchSettingItem }> = ({
+  setting
+}) => <SettingItem key={setting.key} config={setting} />
diff --git a/src/webview/contexts/global-search-context/search-settings.ts b/src/webview/contexts/global-search-context/search-settings.ts
index 46b2ed1..d02a8c6 100644
--- a/src/webview/contexts/global-search-context/search-settings.ts
+++ b/src/webview/contexts/global-search-context/search-settings.ts
@@ -1,50 +1,57 @@
-import { settingsConfig } from '@webview/components/settings/settings-config'
+import { settingsConfig, type SettingPage } from '@shared/entities'
 
-import type { SearchResult } from './types'
+import type { SearchResult, SearchSettingItem } from './types'
+
+const getAllSettingsFromSettingsConfig = () => {
+  const result: SearchSettingItem[] = []
+
+  // Collect settings from root pages
+  const collectSettings = (
+    item: SettingPage,
+    groupInfo?: { id: string; label: string }
+  ) => {
+    if (item.settings) {
+      result.push(
+        ...item.settings.map(setting => ({
+          ...setting,
+          pageLabel: item.label,
+          pageId: item.id,
+          groupLabel: groupInfo?.label,
+          groupId: groupInfo?.id
+        }))
+      )
+    }
+  }
+
+  // Collect from root pages
+  settingsConfig.pages?.forEach(page => collectSettings(page))
+
+  // Collect from groups
+  settingsConfig.groups?.forEach(group => {
+    group.pages?.forEach(page =>
+      collectSettings(page, { id: group.id, label: group.label })
+    )
+  })
+
+  return result
+}
 
 export const searchSettings = (query: string): SearchResult[] => {
   const results: SearchResult[] = []
   const searchLower = query.toLowerCase()
 
-  // Search in standalone categories
-  settingsConfig.categories.forEach(category => {
-    category.settings?.forEach(setting => {
-      if (
-        setting.label.toLowerCase().includes(searchLower) ||
-        setting.description.toLowerCase().includes(searchLower)
-      ) {
-        results.push({
-          type: 'setting',
-          item: setting,
-          metadata: {
-            categoryName: category.label,
-            categoryId: category.id
-          }
-        })
-      }
-    })
-  })
+  const settingsWithMetadata = getAllSettingsFromSettingsConfig()
 
-  // Search in group categories
-  settingsConfig.groups.forEach(group => {
-    group.categories.forEach(category => {
-      category.settings?.forEach(setting => {
-        if (
-          setting.label.toLowerCase().includes(searchLower) ||
-          setting.description.toLowerCase().includes(searchLower)
-        ) {
-          results.push({
-            type: 'setting',
-            item: setting,
-            metadata: {
-              groupName: group.label,
-              categoryName: category.label,
-              categoryId: category.id
-            }
-          })
-        }
+  settingsWithMetadata.forEach(setting => {
+    if (
+      setting.renderOptions.label.toLowerCase().includes(searchLower) ||
+      setting.renderOptions.description.toLowerCase().includes(searchLower)
+    ) {
+      results.push({
+        type: 'setting',
+        item: setting
       })
-    })
+    }
   })
 
   return results
diff --git a/src/webview/contexts/global-search-context/types.ts b/src/webview/contexts/global-search-context/types.ts
index 4f809a3..40eb1b4 100644
--- a/src/webview/contexts/global-search-context/types.ts
+++ b/src/webview/contexts/global-search-context/types.ts
@@ -1,14 +1,15 @@
-import type { ChatSession } from '@shared/entities'
-import type { SettingItem } from '@webview/components/settings/types'
+import type { ChatSession, SettingConfigItem } from '@shared/entities'
+
+export type SearchSettingItem = SettingConfigItem & {
+  pageLabel: string
+  pageId: string
+  groupLabel?: string
+  groupId?: string
+}
 
 export interface SearchResult {
   type: 'chatSession' | 'setting'
-  item: ChatSession | SettingItem
-  metadata?: {
-    groupName?: string
-    categoryName: string
-    categoryId: string
-  }
+  item: ChatSession | SearchSettingItem
 }
 
 export interface GlobalSearchContextType {
diff --git a/src/webview/contexts/global-search-context/use-search-categories.tsx b/src/webview/contexts/global-search-context/use-search-categories.tsx
index 7571ac0..aa651b8 100644
--- a/src/webview/contexts/global-search-context/use-search-categories.tsx
+++ b/src/webview/contexts/global-search-context/use-search-categories.tsx
@@ -4,11 +4,11 @@ import type {
   SearchCategory,
   SearchItem
 } from '@webview/components/global-search/global-search'
-import type { SettingItem } from '@webview/components/settings/types'
 import { useNavigate } from 'react-router'
 
 import { useChatContext } from '../chat-context'
-import type { SearchResult } from './types'
+import { SettingPreview } from './previews/setting-preview'
+import type { SearchResult, SearchSettingItem } from './types'
 
 export const useSearchCategories = (
   searchResults: SearchResult[]
@@ -16,7 +16,7 @@ export const useSearchCategories = (
   const { switchSession } = useChatContext()
   const navigate = useNavigate()
 
-  const renderChatSessionResults = (results: SearchResult[]) =>
+  const getChatSessionResults = (results: SearchResult[]) =>
     results
       .filter(result => result.type === 'chatSession')
       .map(result => {
@@ -42,27 +42,27 @@ export const useSearchCategories = (
         } satisfies SearchItem
       })
 
-  const renderSettingResults = (results: SearchResult[]) =>
+  const getSettingResults = (results: SearchResult[]) =>
     results
       .filter(result => result.type === 'setting')
       .map(result => {
         if (result.type !== 'setting') return null
-        const setting = result.item as SettingItem
-        const metadata = result.metadata!
+        const setting = result.item as SearchSettingItem
 
-        const breadcrumbs = metadata.groupName
-          ? [metadata.groupName, metadata.categoryName]
-          : [metadata.categoryName]
+        const breadcrumbs = setting.groupLabel
+          ? [setting.groupLabel, setting.pageLabel]
+          : [setting.pageLabel]
 
         return {
           id: setting.key,
-          title: setting.label,
-          description: setting.description,
+          title: setting.renderOptions.label,
+          description: setting.renderOptions.description,
           breadcrumbs,
           icon: <GearIcon className="!size-3" />,
-          keywords: [setting.label],
+          keywords: [setting.renderOptions.label],
+          renderPreview: () => <SettingPreview setting={setting} />,
           onSelect: () => {
-            navigate(`/settings?category=${metadata.categoryId}`)
+            navigate(`/settings?pageId=${setting.pageId}`)
           }
         } satisfies SearchItem
       })
@@ -72,12 +72,12 @@ export const useSearchCategories = (
     {
       id: 'chatSessions',
       name: 'Chat History',
-      items: renderChatSessionResults(searchResults)
+      items: getChatSessionResults(searchResults)
     },
     {
       id: 'settings',
       name: 'Settings',
-      items: renderSettingResults(searchResults)
+      items: getSettingResults(searchResults)
     }
   ]
 }
diff --git a/src/webview/hooks/api/use-settings.ts b/src/webview/hooks/api/use-settings.ts
new file mode 100644
index 0000000..83407ce
--- /dev/null
+++ b/src/webview/hooks/api/use-settings.ts
@@ -0,0 +1,54 @@
+import { useState } from 'react'
+import type { SettingKey, SettingValue } from '@shared/entities'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { api } from '@webview/services/api-client'
+import { logAndToastError } from '@webview/utils/common'
+import { toast } from 'sonner'
+
+interface UseSettingsOptions {
+  autoToastOnSuccess?: boolean
+}
+
+export const useSettings = (options?: UseSettingsOptions) => {
+  const { autoToastOnSuccess = true } = options || {}
+  const queryClient = useQueryClient()
+  const [loadingMap, setLoadingMap] = useState<Record<SettingKey, boolean>>(
+    {} as Record<SettingKey, boolean>
+  )
+
+  const { data: settings = {} } = useQuery({
+    queryKey: ['settings'],
+    queryFn: () => api.settings.getMergedSettings({})
+  })
+
+  const updateSettingMutation = useMutation({
+    mutationFn: ({ key, value }: { key: string; value: any }) =>
+      api.settings.setSettings({ settings: { [key]: value } }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] })
+    }
+  })
+
+  const getSetting = <K extends SettingKey>(key: K): SettingValue<K> =>
+    settings[key]
+
+  const setSetting = async (key: string, value: any): Promise<void> => {
+    setLoadingMap(prev => ({ ...prev, [key]: true }))
+    try {
+      await updateSettingMutation.mutateAsync({ key, value })
+      autoToastOnSuccess && toast.success('Setting updated successfully')
+    } catch (error) {
+      logAndToastError('Failed to update setting', error)
+      throw error
+    } finally {
+      setLoadingMap(prev => ({ ...prev, [key]: false }))
+    }
+  }
+
+  return {
+    settings,
+    getSetting,
+    setSetting,
+    loadingMap
+  }
+}
diff --git a/src/webview/pages/settings/index.tsx b/src/webview/pages/settings/index.tsx
index 30acdc5..d5bc55a 100644
--- a/src/webview/pages/settings/index.tsx
+++ b/src/webview/pages/settings/index.tsx
@@ -1 +1,27 @@
-export { SettingsPage as default } from '@webview/components/settings/settings-page'
+import { useEffect } from 'react'
+import { settingsConfig } from '@shared/entities'
+import { Settings } from '@webview/components/settings/settings'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+export default function SettingsPage() {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const pageId = searchParams.get('pageId')
+
+  useEffect(() => {
+    // If page is provided in URL, ensure it exists in config
+    if (pageId && typeof pageId === 'string') {
+      const isValidPage =
+        settingsConfig.pages?.some(p => p.id === pageId) ||
+        settingsConfig.groups.some(group =>
+          group.pages.some(p => p.id === pageId)
+        )
+
+      if (!isValidPage) {
+        navigate('/settings', { replace: true })
+      }
+    }
+  }, [pageId, navigate])
+
+  return <Settings initialPageId={pageId} />
+}