diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6be5a72e..86e73fd4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,275 @@
 # Changelog
 
+## v1.10.1
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.1-beta.2...v1.10.1)
+
+## v1.10.1-beta.2
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.1-beta.1...v1.10.1-beta.2)
+
+### 🩹 Fixes
+
+- **model-selector:** Always update model list for Ollama and LMStudio backends ([4fcf092](https://github.com/NativeMindBrowser/NativeMindExtension/commit/4fcf092))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.1-beta.1
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.1-beta.0...v1.10.1-beta.1)
+
+### 🩹 Fixes
+
+- **model-selector:** Prevent infinite loops by refining model selection logic ([20697cc](https://github.com/NativeMindBrowser/NativeMindExtension/commit/20697cc))
+- **darkmode:** Use correct text color for ollama configuration btn ([2017524](https://github.com/NativeMindBrowser/NativeMindExtension/commit/2017524))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.1-beta.0
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0...v1.10.1-beta.0)
+
+### 🩹 Fixes
+
+- **model-list:** Improve model list update logic for web-llm endpoint, prevent extension crash ([a85bf9a](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a85bf9a))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.16...v1.10.0)
+
+## v1.10.0-beta.16
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.15...v1.10.0-beta.16)
+
+### 🩹 Fixes
+
+- **loading:** Update loading track color to improve visibility in dark mode ([567b4c3](https://github.com/NativeMindBrowser/NativeMindExtension/commit/567b4c3))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.15
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.14...v1.10.0-beta.15)
+
+### 🩹 Fixes
+
+- **chat:** Refactor autoGenerateChatTitleIfNeeded to use createRetryWrapper for improved error handling ([8db739d](https://github.com/NativeMindBrowser/NativeMindExtension/commit/8db739d))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.14
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.13...v1.10.0-beta.14)
+
+### 🩹 Fixes
+
+- **darkmode:** Update icon dimensions and color adjustments across components for onboarding page ([fff91dd](https://github.com/NativeMindBrowser/NativeMindExtension/commit/fff91dd))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.13
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.12...v1.10.0-beta.13)
+
+### 🩹 Fixes
+
+- **config:** Enhance reactive default value handling and storage synchronization ([e9ca17d](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e9ca17d))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.12
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.11...v1.10.0-beta.12)
+
+### 🩹 Fixes
+
+- **selector:** Update dropdown class to include text color ([a9c60c0](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a9c60c0))
+- **style:** Fix text-accent-blue for darkmode ([dc2e4fd](https://github.com/NativeMindBrowser/NativeMindExtension/commit/dc2e4fd))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.11
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.10...v1.10.0-beta.11)
+
+### 🚀 Enhancements
+
+- **gmail-tools:** Replace logo SVG with new design and update text color ([57626ba](https://github.com/NativeMindBrowser/NativeMindExtension/commit/57626ba))
+
+### 🩹 Fixes
+
+- Remove duplicated ollama redirect svg and update color schema. ([3f159b0](https://github.com/NativeMindBrowser/NativeMindExtension/commit/3f159b0))
+
+### ❤️ Contributors
+
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.10
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.9...v1.10.0-beta.10)
+
+### 🩹 Fixes
+
+- **settings:** Update connection status handling for Ollama model list retrieval ([7c0dc5a](https://github.com/NativeMindBrowser/NativeMindExtension/commit/7c0dc5a))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.9
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.8...v1.10.0-beta.9)
+
+### 🩹 Fixes
+
+- **settings:** Update connection error messages for Ollama across multiple languages ([15e4706](https://github.com/NativeMindBrowser/NativeMindExtension/commit/15e4706))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.8
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.7...v1.10.0-beta.8)
+
+### 🚀 Enhancements
+
+- **Darkmode:** Introduce darkmode theme with color variables ([c0150fd](https://github.com/NativeMindBrowser/NativeMindExtension/commit/c0150fd))
+- **theme:** Refactor theme management to use composables and improve type definitions ([097d35c](https://github.com/NativeMindBrowser/NativeMindExtension/commit/097d35c))
+- **theme:** Refactor&fix styles and class names across components for consistency and clarity ([5c34142](https://github.com/NativeMindBrowser/NativeMindExtension/commit/5c34142))
+
+### 🩹 Fixes
+
+- Revert unnecessary darkmode changes ([6034697](https://github.com/NativeMindBrowser/NativeMindExtension/commit/6034697))
+- **theme:** Update theme handling to use data attributes instead of directly adding a class to the document to avoid affecting the original page, and use useEventListener to handle event listener unmounting. ([0a4dc45](https://github.com/NativeMindBrowser/NativeMindExtension/commit/0a4dc45))
+- **Input:** Correct shadow styles for error state in input component ([54ab5a1](https://github.com/NativeMindBrowser/NativeMindExtension/commit/54ab5a1))
+- **ui:** Improve agent-task ui style on fetching pages ([eaa6f1d](https://github.com/NativeMindBrowser/NativeMindExtension/commit/eaa6f1d))
+- **theme:** Consolidate color variables and remove unused colors. ([e64b99d](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e64b99d))
+
+### 🏡 Chore
+
+- **cross-env:** Update package.json to use cross-env for better environment variable management ([43c3e2e](https://github.com/NativeMindBrowser/NativeMindExtension/commit/43c3e2e))
+
+### ❤️ Contributors
+
+- Neko Liu ([@NekoWings](http://github.com/NekoWings))
+- Nekowings ([@NekoWings](http://github.com/NekoWings))
+- NekoWings ([@NekoWings](http://github.com/NekoWings))
+
+## v1.10.0-beta.7
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.6...v1.10.0-beta.7)
+
+### 🩹 Fixes
+
+- **chat:** Trim m studio error message length to improve readability ([57967fe](https://github.com/NativeMindBrowser/NativeMindExtension/commit/57967fe))
+- **AttachmentSelector:** Enhance model support checks for vision capabilities based on endpoint type ([e6d9954](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e6d9954))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.6
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.5...v1.10.0-beta.6)
+
+### 🏡 Chore
+
+- **chat:** Simplify error messages by removing endpoint type references ([3e1f5d1](https://github.com/NativeMindBrowser/NativeMindExtension/commit/3e1f5d1))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.5
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.4...v1.10.0-beta.5)
+
+### 🩹 Fixes
+
+- **web-llm:** Fix infinite loading when local model cache is invalid ([3b6a8e0](https://github.com/NativeMindBrowser/NativeMindExtension/commit/3b6a8e0))
+- **settings:** Update connection message for LM Studio in multiple language files ([130bdd7](https://github.com/NativeMindBrowser/NativeMindExtension/commit/130bdd7))
+
+### 🏡 Chore
+
+- **onboarding:** Adjust help section visibility based on selected endpoint type ([72515e8](https://github.com/NativeMindBrowser/NativeMindExtension/commit/72515e8))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.4
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.9.4...v1.10.0-beta.4)
+
+### 🚀 Enhancements
+
+- **lm-studio:** Initial support for LM Studio ([0f318d9](https://github.com/NativeMindBrowser/NativeMindExtension/commit/0f318d9))
+- **tests:** Add onboarding and settings tests, enhance mock responses ([e8793b7](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e8793b7))
+- **chat:** Add toggle to enable online search and its settings ([a60f489](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a60f489))
+- **tests:** Add LLM API tests and mock responses for Ollama ([16a1f8d](https://github.com/NativeMindBrowser/NativeMindExtension/commit/16a1f8d))
+
+### 🩹 Fixes
+
+- **lm-studio:** Return consistent structured response format ([24d9636](https://github.com/NativeMindBrowser/NativeMindExtension/commit/24d9636))
+- **pattern-extractor:** Ensure extracted values are strings and handle undefined keys ([b95e17f](https://github.com/NativeMindBrowser/NativeMindExtension/commit/b95e17f))
+
+### 🏡 Chore
+
+- **package:** Update version to 1.10.0 ([d933b93](https://github.com/NativeMindBrowser/NativeMindExtension/commit/d933b93))
+- **release:** V1.10.0-beta.1 ([67c8c4f](https://github.com/NativeMindBrowser/NativeMindExtension/commit/67c8c4f))
+- **release:** V1.10.0-beta.2 ([170af85](https://github.com/NativeMindBrowser/NativeMindExtension/commit/170af85))
+- **release:** V1.10.0-beta.3 ([0581a4f](https://github.com/NativeMindBrowser/NativeMindExtension/commit/0581a4f))
+- **browser-use:** Set default for browser use to true ([374a849](https://github.com/NativeMindBrowser/NativeMindExtension/commit/374a849))
+- **chat:** Improve assistant message expanded class ([4847c2c](https://github.com/NativeMindBrowser/NativeMindExtension/commit/4847c2c))
+- **logging:** Enhance rawLoggingMiddleware to log stream and generate results ([a6ee1f9](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a6ee1f9))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.3
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.2...v1.10.0-beta.3)
+
+### 🚀 Enhancements
+
+- **tests:** Add onboarding and settings tests, enhance mock responses ([e8793b7](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e8793b7))
+- **chat:** Add toggle to enable online search and its settings ([a60f489](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a60f489))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.10.0-beta.2
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.10.0-beta.1...v1.10.0-beta.2)
+
+### 🩹 Fixes
+
+- **lm-studio:** Return consistent structured response format ([24d9636](https://github.com/NativeMindBrowser/NativeMindExtension/commit/24d9636))
+
+## v1.10.0-beta.1
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.9.0-beta.2...v1.10.0-beta.1)
 
 ## v1.9.5
 
@@ -352,10 +622,12 @@
 ### 🚀 Enhancements
 
 - **agent:** Add task-click-page icon and update related references ([fef0052](https://github.com/NativeMindBrowser/NativeMindExtension/commit/fef0052))
+- **lm-studio:** Initial support for LM Studio ([0f318d9](https://github.com/NativeMindBrowser/NativeMindExtension/commit/0f318d9))
 
 ### 🏡 Chore
 
 - **logo:** Update extension logo in toolbar ([7335374](https://github.com/NativeMindBrowser/NativeMindExtension/commit/7335374))
+- **package:** Update version to 1.10.0 ([d933b93](https://github.com/NativeMindBrowser/NativeMindExtension/commit/d933b93))
 
 ### ❤️ Contributors
 
@@ -1020,6 +1292,7 @@
 ### 🚀 Enhancements
 
 - **agent:** Add methods to persist and check current tab in AgentStorage ([510c90a](https://github.com/NativeMindBrowser/NativeMindExtension/commit/510c90a))
+
 ## v1.6.5
 
 [compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.6.4...v1.6.5)
@@ -1135,6 +1408,7 @@
 ### 🏡 Chore
 
 - **package:** Update version to 1.7.0-beta.0 ([1947b6b](https://github.com/NativeMindBrowser/NativeMindExtension/commit/1947b6b))
+
 ## v1.6.1
 
 [compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.6.0...v1.6.1)
@@ -1302,6 +1576,7 @@
 ### 🩹 Fixes
 
 - **pdf:** Implement PDF file parsing from URL and enhance file handling for Firefox ([bc9ebf6](https://github.com/NativeMindBrowser/NativeMindExtension/commit/bc9ebf6))
+
 ## v1.6.0-beta.2
 
 [compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.6.0-beta.1...v1.6.0-beta.2)
@@ -1321,6 +1596,7 @@
 ### 🩹 Fixes
 
 - **pdf:** Add Firefox support for PDF text extraction and page count ([a621ca8](https://github.com/NativeMindBrowser/NativeMindExtension/commit/a621ca8))
+
 ## v1.6.0-beta.1
 
 [compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.6.0-beta.0...v1.6.0-beta.1)
@@ -1344,6 +1620,7 @@
 ### 📖 Documentation
 
 - **browser-llm-api:** Add feature detection section for API availability check ([716657e](https://github.com/NativeMindBrowser/NativeMindExtension/commit/716657e))
+
 ## v1.6.0-beta.0
 
 [compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.5.0...v1.6.0-beta.0)
@@ -2158,7 +2435,6 @@
 
 ## v1.2.0-beta.1
 
-
 ### 🚀 Enhancements
 
 - Welcome to NativeMind ([e6f9f30](https://github.com/NativeMindBrowser/NativeMindExtension/commit/e6f9f30))
diff --git a/app.config.ts b/app.config.ts
index f93afc06..0c9b0137 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -3,10 +3,10 @@ import { defineAppConfig } from 'wxt/utils/define-app-config'
 // Define types for your config
 declare module 'wxt/utils/define-app-config' {
   export interface WxtAppConfig {
-    theme?: 'light' | 'dark'
+    theme?: 'light' | 'dark' | 'system'
   }
 }
 
 export default defineAppConfig({
-  theme: 'light',
+  theme: 'system',
 })
diff --git a/assets/icons/delete.svg b/assets/icons/delete.svg
index 188293af..8e2fc4d0 100644
--- a/assets/icons/delete.svg
+++ b/assets/icons/delete.svg
@@ -1,5 +1,11 @@
-<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <path fill="currentColor"
-    d="M366.016161 793.417391 366.016161 334.810439c0-11.524474-9.346879-20.846794-20.847817-20.846794-11.502985 0-20.846794 9.322319-20.846794 20.846794l0 458.606952c0 11.502985 9.342786 20.847817 20.846794 20.847817C356.668259 814.265208 366.016161 804.920376 366.016161 793.417391L366.016161 793.417391zM532.791535 793.417391 532.791535 334.810439c0-11.524474-9.346879-20.846794-20.850887-20.846794-11.498892 0-20.843724 9.322319-20.843724 20.846794l0 458.606952c0 11.502985 9.344832 20.847817 20.843724 20.847817C523.44261 814.265208 532.791535 804.920376 532.791535 793.417391L532.791535 793.417391zM866.334097 293.116851c-11.498892 0-20.841677 9.324366-20.841677 20.846794l0 562.835805c0 23.003923-18.671245 41.692564-41.695634 41.692564L220.089627 918.492014c-23.026436 0-41.694611-18.688641-41.694611-41.692564L178.395016 313.965691c0-11.523451-9.344832-20.845771-20.846794-20.845771-9.694803 0-17.835204 6.635117-20.160155 15.618723-0.228197-0.125867-0.462534-0.239454-0.687662-0.369414L136.700405 876.80252c0 46.047756 37.31793 83.383082 83.387175 83.383082l583.707159 0c46.050826 0 83.387175-37.335327 83.387175-83.383082L887.181915 313.965691C887.183961 302.441217 877.838106 293.116851 866.334097 293.116851L866.334097 293.116851zM928.996253 147.196457 688.912245 147.196457l-76.911694-76.908624c-4.451382-4.452405-10.330276-6.588045-16.165168-6.449899-0.170892-0.00307-0.335644-0.024559-0.506537-0.024559L428.556543 63.813375c-0.150426 0-0.297782 0.019443-0.447185 0.023536-5.816472-0.12382-11.669784 2.015913-16.104793 6.450922l-76.911694 76.908624L95.007841 147.196457c-11.501962 0-20.846794 9.325389-20.846794 20.846794 0 11.502985 9.344832 20.847817 20.846794 20.847817l250.160503 0c0.26299 0 0.51984-0.030699 0.779759-0.039909 5.933129 0.222057 11.936867-1.907443 16.463973-6.433526l76.911694-76.909647L584.680323 105.507986l76.911694 76.909647c4.52506 4.527107 10.530844 6.655584 16.461927 6.433526 0.260943 0.00921 0.51677 0.039909 0.779759 0.039909L928.992159 188.891068c11.501962 0 20.846794-9.344832 20.846794-20.847817C949.842023 156.521846 940.498214 147.196457 928.996253 147.196457L928.996253 147.196457zM699.561793 793.417391 699.561793 334.810439c0-11.524474-9.341762-20.846794-20.844747-20.846794-11.501962 0-20.847817 9.322319-20.847817 20.846794l0 458.606952c0 11.502985 9.345856 20.847817 20.847817 20.847817C690.220031 814.265208 699.561793 804.920376 699.561793 793.417391L699.561793 793.417391z" />
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 3.33398V14.6673H13.5V3.33398H3.5Z" stroke="currentColor" stroke-width="1.33333" stroke-linejoin="round" />
+  <path d="M7.16666 6.66602V10.9993" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path d="M9.83334 6.66602V10.9993" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path d="M1.83334 3.33398H15.1667" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round"
+    stroke-linejoin="round" />
+  <path d="M5.83334 3.33398L6.92968 1.33398H10.0924L11.1667 3.33398H5.83334Z" stroke="currentColor" stroke-width="1.33333"
+    stroke-linejoin="round" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/logo-for-gmail-tools.svg b/assets/icons/logo-for-gmail-tools.svg
new file mode 100644
index 00000000..401f08de
--- /dev/null
+++ b/assets/icons/logo-for-gmail-tools.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="16" height="16" rx="3" fill="#1F2326" />
+  <path d="M7.86333 6.01758L10.19 9.44001H8.99942L7.28671 7.10684H5.08926V11.9108H6.8628L7.67276 13H4V6.01758H7.86333Z"
+    fill="#FBF8F4" />
+  <path
+    d="M8.26362 12.998L5.937 9.57562H7.18339L8.84025 11.9088H11.0377V7.10487H9.29209L8.45419 6.01561H12.127V12.998H8.26362Z"
+    fill="#FBF8F4" />
+  <path
+    d="M10.3259 6.03959L10.3259 5.36412C10.3259 4.05845 9.26745 3 7.96178 3V3C6.65611 3 5.59766 4.05845 5.59766 5.36412L5.59766 6.03959"
+    stroke="#FBF8F4" stroke-width="1.12577" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/logo-lm-studio.png b/assets/icons/logo-lm-studio.png
new file mode 100644
index 00000000..2749b4c6
Binary files /dev/null and b/assets/icons/logo-lm-studio.png differ
diff --git a/assets/icons/logo-ollama.svg b/assets/icons/logo-ollama.svg
index b522b7bc..9afd954a 100644
--- a/assets/icons/logo-ollama.svg
+++ b/assets/icons/logo-ollama.svg
@@ -1,17 +1,17 @@
 <svg viewBox="0 0 646 854" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M140.629 0.239929C132.66 1.52725 123.097 5.69568 116.354 10.845C95.941 26.3541 80.1253 59.2728 73.4435 100.283C70.9302 115.792 69.2138 137.309 69.2138 153.738C69.2138 173.109 71.4819 197.874 74.7309 214.977C75.4665 218.778 75.8343 222.15 75.5278 222.395C75.2826 222.64 72.2788 225.092 68.9072 227.789C57.3827 236.984 44.2029 251.145 35.1304 264.08C17.7209 288.784 6.44151 316.86 1.72133 347.265C-0.117698 359.28 -0.608106 383.555 0.863118 395.57C4.11207 423.278 12.449 446.695 26.7321 468.151L31.391 475.078L30.0424 477.346C20.4794 493.407 12.3264 516.64 8.52575 538.953C5.522 556.608 5.15419 561.328 5.15419 584.99C5.15419 608.837 5.4607 613.557 8.28054 630.047C11.6521 649.786 18.5178 670.689 26.1804 684.605C28.6938 689.141 34.8239 698.581 35.5595 699.072C35.8047 699.194 35.0691 701.462 33.9044 704.098C25.077 723.408 17.537 749.093 14.4106 770.733C12.2038 785.567 11.8973 790.349 11.8973 805.981C11.8973 825.903 13.0007 835.589 17.1692 851.466L17.7822 853.795H44.019H70.3172L68.6007 850.546C57.9957 830.93 57.0149 794.517 66.1487 758.166C70.3172 741.369 75.0374 729.048 83.8647 712.067L89.1366 701.769V695.455C89.1366 689.57 89.014 688.896 87.1137 685.034C85.6424 682.091 83.6808 679.578 80.1866 676.145C74.2404 670.383 69.9494 664.314 66.5165 656.835C51.4365 624.1 48.494 575.489 59.0991 534.049C63.5128 516.762 70.8076 501.376 78.4702 492.978C83.6808 487.215 86.378 480.779 86.378 474.097C86.378 467.17 83.926 461.469 78.4089 455.523C62.5932 438.604 52.8464 418.006 49.3522 394.038C44.3868 359.893 53.3981 322.683 73.8726 293.198C93.9181 264.263 122.055 245.689 153.503 240.724C160.552 239.559 173.732 239.743 181.088 241.092C189.119 242.502 194.145 242.072 199.295 239.62C205.67 236.617 208.858 232.877 212.597 224.295C215.907 216.633 218.482 212.464 225.409 203.821C233.746 193.461 241.776 186.411 254.649 177.89C269.362 168.266 286.097 161.278 302.771 157.906C308.839 156.68 311.659 156.496 323 156.496C334.341 156.496 337.161 156.68 343.229 157.906C367.688 162.872 391.964 175.5 411.335 193.399C415.503 197.261 425.495 209.644 428.683 214.794C429.909 216.816 432.055 221.108 433.403 224.295C437.142 232.877 440.33 236.617 446.705 239.62C451.671 242.011 456.881 242.502 464.605 241.214C476.804 239.13 486.183 239.314 498.137 241.766C538.841 249.98 574.273 283.512 589.966 328.446C603.636 367.862 599.774 409.118 579.422 440.626C575.989 445.96 572.556 450.251 567.591 455.523C556.863 466.986 556.863 481.208 567.53 492.978C585.062 512.165 596.035 559.367 592.724 600.99C590.518 628.453 583.468 653.035 573.782 666.95C572.066 669.402 568.511 673.57 565.813 676.145C562.319 679.578 560.358 682.091 558.886 685.034C556.986 688.896 556.863 689.57 556.863 695.455V701.769L562.135 712.067C570.963 729.048 575.683 741.369 579.851 758.166C588.863 794.027 588.066 829.704 577.767 849.995C576.909 851.711 576.173 853.305 576.173 853.489C576.173 853.673 587.882 853.795 602.226 853.795H628.218L628.892 851.159C629.26 849.75 629.873 847.604 630.179 846.378C630.854 843.681 632.202 835.712 633.306 828.049C634.348 820.325 634.348 791.881 633.306 783.299C629.383 752.158 622.823 727.454 612.096 704.098C610.931 701.462 610.195 699.194 610.44 699.072C610.747 698.888 612.463 696.436 614.302 693.677C627.666 673.448 635.88 648.008 640.049 614.415C641.152 605.158 641.152 565.374 640.049 556.485C637.106 533.559 633.551 517.988 627.666 502.234C625.214 495.675 618.716 481.821 615.958 477.346L614.609 475.078L619.268 468.151C633.551 446.695 641.888 423.278 645.137 395.57C646.608 383.555 646.118 359.28 644.279 347.265C639.497 316.798 628.279 288.845 610.87 264.08C601.797 251.145 588.617 236.984 577.093 227.789C573.721 225.092 570.717 222.64 570.472 222.395C570.166 222.15 570.534 218.778 571.269 214.977C578.687 176.296 578.441 128.053 570.656 90.3524C563.913 57.4951 551.653 31.3808 535.837 16.3008C523.209 4.28578 510.336 -0.863507 494.888 0.11731C459.456 2.20154 430.89 42.9667 419.61 107.21C417.771 117.57 416.178 129.708 416.178 133.018C416.178 134.305 415.932 135.347 415.626 135.347C415.319 135.347 412.929 134.121 410.354 132.589C383.014 116.405 352.608 107.762 323 107.762C293.392 107.762 262.986 116.405 235.646 132.589C233.071 134.121 230.681 135.347 230.374 135.347C230.068 135.347 229.822 134.305 229.822 133.018C229.822 129.585 228.167 117.08 226.39 107.21C216.152 49.5259 192.674 11.3354 161.472 1.71112C157.181 0.423799 144.982 -0.434382 140.629 0.239929ZM151.051 50.139C159.878 57.1273 169.686 77.1114 175.326 99.4863C176.368 103.532 177.471 108.191 177.778 109.907C178.023 111.563 178.697 115.302 179.249 118.183C181.64 131.179 182.743 145.217 182.866 162.32L182.927 179.178L178.697 185.43L174.468 191.744H164.598C153.074 191.744 141.61 193.216 130.637 196.158C126.714 197.139 122.913 198.12 122.178 198.304C121.013 198.549 120.829 198.181 120.155 193.154C116.538 165.875 116.722 135.654 120.707 110.52C125.12 82.5059 135.419 57.1273 145.472 49.6486C147.863 47.8708 148.292 47.9321 151.051 50.139ZM500.589 49.7098C506.658 54.1848 513.34 66.0772 518.305 81.2798C528.297 111.685 531.117 153.431 525.845 193.154C525.171 198.181 524.987 198.549 523.822 198.304C523.087 198.12 519.286 197.139 515.363 196.158C504.39 193.216 492.926 191.744 481.402 191.744H471.532L467.303 185.43L463.073 179.178L463.134 162.32C463.257 138.535 465.464 119.961 470.735 99.3024C476.314 77.1114 486.183 57.1273 494.949 50.139C497.708 47.9321 498.137 47.8708 500.589 49.7098Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M313.498 358.237C300.195 359.525 296.579 360.015 290.203 361.303C279.843 363.448 265.989 368.23 256.365 372.95C222.895 389.317 199.846 416.596 192.796 448.166C191.386 454.419 191.202 456.503 191.202 467.047C191.202 477.468 191.386 479.736 192.735 485.682C202.114 526.938 240.12 557.405 289.284 562.983C299.95 564.148 346.049 564.148 356.715 562.983C396.193 558.508 430.154 537.114 445.418 507.076C449.463 499.046 451.425 493.835 453.264 485.682C454.613 479.736 454.797 477.468 454.797 467.047C454.797 456.503 454.613 454.419 453.203 448.166C442.965 402.313 398.461 366.207 343.903 359.341C336.792 358.483 318.157 357.747 313.498 358.237ZM336.424 391.585C354.631 393.547 372.96 400.045 387.672 409.853C395.58 415.125 406.737 426.159 411.518 433.393C417.403 442.342 420.774 451.476 422.307 462.572C422.981 467.66 422.614 471.522 420.774 479.736C417.893 491.996 408.943 504.808 396.867 513.758C391.227 517.865 379.519 523.812 372.347 526.141C358.738 530.493 349.849 531.29 318.095 531.045C297.376 530.861 293.697 530.677 287.751 529.574C267.461 525.773 251.4 517.681 239.753 505.36C230.312 495.429 226.021 486.357 223.692 471.706C222.65 464.901 224.611 453.622 228.596 444.12C233.439 432.534 245.944 418.129 258.327 409.853C272.671 400.29 291.552 393.486 308.9 391.647C315.582 390.911 329.742 390.911 336.424 391.585Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M299.584 436.336C294.925 438.849 291.676 445.224 292.657 449.944C293.76 455.032 298.235 460.182 305.223 464.412C308.963 466.68 309.208 466.986 309.392 469.254C309.514 470.603 309.024 474.465 308.35 477.898C307.614 481.269 307.062 484.825 307.062 485.806C307.124 488.442 309.576 492.733 312.15 494.817C314.419 496.656 314.848 496.717 321.223 496.901C327.047 497.085 328.273 496.962 330.602 495.859C336.61 492.916 338.142 487.522 335.935 477.162C334.096 468.519 334.464 467.17 339.062 464.534C343.904 461.714 349.054 456.749 350.586 453.377C353.529 446.941 350.831 439.646 344.333 436.274C342.74 435.477 340.778 435.11 337.897 435.11C333.422 435.11 330.541 436.152 325.269 439.523L322.265 441.424L320.365 440.259C312.58 435.661 311.17 435.11 306.449 435.171C303.078 435.171 301.239 435.477 299.584 436.336Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M150.744 365.165C139.894 368.598 131.802 376.567 127.634 387.908C125.611 393.303 124.63 401.824 125.488 406.421C127.511 417.394 136.522 427.386 146.76 430.145C159.633 433.516 169.257 431.309 177.778 422.85C182.743 418.007 185.441 413.777 188.138 406.911C190.099 402.069 190.222 401.211 190.222 394.345L190.283 386.989L187.709 381.717C183.601 373.38 176.184 367.188 167.602 364.92C162.759 363.694 154.974 363.756 150.744 365.165Z"
-    fill="black" />
+    fill="currentColor" />
   <path
     d="M478.153 364.982C469.755 367.25 462.276 373.502 458.291 381.717L455.717 386.989L455.778 394.345C455.778 401.211 455.901 402.069 457.862 406.911C460.56 413.777 463.257 418.007 468.222 422.85C476.743 431.309 486.367 433.516 499.241 430.145C506.658 428.183 514.075 421.93 517.631 414.635C520.696 408.444 521.431 403.969 520.451 396.919C518.183 380.797 508.742 369.089 494.704 364.982C490.597 363.756 482.628 363.756 478.153 364.982Z"
-    fill="black" />
+    fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/md-highlight-action.svg b/assets/icons/md-highlight-action.svg
new file mode 100644
index 00000000..29cc63e3
--- /dev/null
+++ b/assets/icons/md-highlight-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.16211 5.50586C2.09961 5.55664 2.03711 5.57617 1.97461 5.56445C1.91602 5.55273 1.86914 5.52148 1.83398 5.4707C1.80273 5.41602 1.80078 5.34961 1.82812 5.27148L2.01562 4.69141L1.5293 4.32812C1.4707 4.28516 1.4375 4.23242 1.42969 4.16992C1.42578 4.10742 1.44336 4.05469 1.48242 4.01172C1.52148 3.96484 1.57617 3.94141 1.64648 3.94141H2.25586L2.45508 3.31445C2.47461 3.24805 2.51172 3.20508 2.56641 3.18555C2.625 3.16211 2.68164 3.16211 2.73633 3.18555C2.79102 3.20898 2.82812 3.25195 2.84766 3.31445L3.04688 3.94141H3.65039C3.7207 3.94141 3.77539 3.96484 3.81445 4.01172C3.85352 4.05469 3.86914 4.10742 3.86133 4.16992C3.85742 4.23242 3.82617 4.28516 3.76758 4.32812L3.28711 4.69141L3.47461 5.27148C3.50195 5.34961 3.49805 5.41602 3.46289 5.4707C3.43164 5.52148 3.38477 5.55273 3.32227 5.56445C3.25977 5.57617 3.19531 5.55664 3.12891 5.50586L2.6543 5.14844L2.16211 5.50586ZM2.16211 9.09766C2.09961 9.14844 2.03711 9.16797 1.97461 9.15625C1.91602 9.14062 1.86914 9.10742 1.83398 9.05664C1.80273 9.00586 1.80078 8.94141 1.82812 8.86328L2.01562 8.2832L1.5293 7.91992C1.4707 7.87695 1.4375 7.82617 1.42969 7.76758C1.42578 7.70508 1.44336 7.65234 1.48242 7.60938C1.52148 7.5625 1.57617 7.53906 1.64648 7.53906H2.25586L2.45508 6.90625C2.47461 6.84375 2.51172 6.80078 2.56641 6.77734C2.625 6.75391 2.68164 6.75391 2.73633 6.77734C2.79102 6.79688 2.82812 6.83984 2.84766 6.90625L3.04688 7.53906H3.65039C3.7207 7.53906 3.77539 7.5625 3.81445 7.60938C3.85352 7.65234 3.86914 7.70508 3.86133 7.76758C3.85742 7.82617 3.82617 7.87695 3.76758 7.91992L3.28711 8.27734L3.47461 8.86328C3.50195 8.94141 3.49805 9.00586 3.46289 9.05664C3.43164 9.10742 3.38477 9.14062 3.32227 9.15625C3.25977 9.16797 3.19531 9.14844 3.12891 9.09766L2.6543 8.74023L2.16211 9.09766ZM2.16211 12.7012C2.09961 12.752 2.03711 12.7715 1.97461 12.7598C1.91602 12.748 1.86914 12.7148 1.83398 12.6602C1.80273 12.6094 1.80078 12.5469 1.82812 12.4727L2.01562 11.8867L1.5293 11.5234C1.4707 11.4805 1.4375 11.4297 1.42969 11.3711C1.42578 11.3086 1.44336 11.2559 1.48242 11.2129C1.52148 11.166 1.57617 11.1426 1.64648 11.1426H2.25586L2.45508 10.5098C2.47461 10.4473 2.51172 10.4043 2.56641 10.3809C2.625 10.3574 2.68164 10.3574 2.73633 10.3809C2.79102 10.4043 2.82812 10.4473 2.84766 10.5098L3.04688 11.1426H3.65039C3.7207 11.1426 3.77539 11.166 3.81445 11.2129C3.85352 11.2559 3.86914 11.3086 3.86133 11.3711C3.85742 11.4297 3.82617 11.4805 3.76758 11.5234L3.28711 11.8867L3.47461 12.4727C3.50195 12.5469 3.49805 12.6094 3.46289 12.6602C3.43164 12.7148 3.38477 12.748 3.32227 12.7598C3.25977 12.7715 3.19531 12.752 3.12891 12.7012L2.6543 12.3438L2.16211 12.7012ZM5.60156 5.04297C5.44531 5.04297 5.3125 4.98828 5.20312 4.87891C5.09766 4.76953 5.04492 4.63867 5.04492 4.48633C5.04492 4.33398 5.09766 4.20312 5.20312 4.09375C5.3125 3.98437 5.44531 3.92969 5.60156 3.92969H13.0137C13.166 3.92969 13.2969 3.98437 13.4062 4.09375C13.5156 4.19922 13.5703 4.33008 13.5703 4.48633C13.5703 4.63867 13.5156 4.76953 13.4062 4.87891C13.2969 4.98828 13.166 5.04297 13.0137 5.04297H5.60156ZM5.60156 8.64062C5.44531 8.64062 5.3125 8.58594 5.20312 8.47656C5.09766 8.36719 5.04492 8.23633 5.04492 8.08398C5.04492 7.92773 5.09766 7.79688 5.20312 7.69141C5.3125 7.58203 5.44531 7.52734 5.60156 7.52734H13.0137C13.166 7.52734 13.2969 7.58203 13.4062 7.69141C13.5156 7.79688 13.5703 7.92773 13.5703 8.08398C13.5703 8.23633 13.5156 8.36719 13.4062 8.47656C13.2969 8.58594 13.166 8.64062 13.0137 8.64062H5.60156ZM5.60156 12.2383C5.44531 12.2383 5.3125 12.1836 5.20312 12.0742C5.09766 11.9648 5.04492 11.834 5.04492 11.6816C5.04492 11.5293 5.09766 11.3984 5.20312 11.2891C5.3125 11.1797 5.44531 11.125 5.60156 11.125H13.0137C13.166 11.125 13.2969 11.1797 13.4062 11.2891C13.5156 11.3945 13.5703 11.5254 13.5703 11.6816C13.5703 11.8379 13.5156 11.9707 13.4062 12.0801C13.2969 12.1855 13.166 12.2383 13.0137 12.2383H5.60156Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/md-search-action.svg b/assets/icons/md-search-action.svg
new file mode 100644
index 00000000..7580cf5f
--- /dev/null
+++ b/assets/icons/md-search-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.19336 7.45312C2.19336 6.85156 2.30615 6.2876 2.53174 5.76123C2.7609 5.23128 3.07601 4.76579 3.47705 4.36475C3.87809 3.96012 4.3418 3.64502 4.86816 3.41943C5.39811 3.19385 5.96387 3.08105 6.56543 3.08105C7.17057 3.08105 7.73633 3.19385 8.2627 3.41943C8.79264 3.64502 9.25814 3.96012 9.65918 4.36475C10.0602 4.76579 10.3735 5.23128 10.5991 5.76123C10.8283 6.2876 10.9429 6.85156 10.9429 7.45312C10.9429 7.92578 10.8695 8.37516 10.7227 8.80127C10.5794 9.22738 10.3807 9.61589 10.1265 9.9668L12.5757 12.4268C12.6509 12.4984 12.7064 12.5825 12.7422 12.6792C12.7816 12.7759 12.8013 12.8779 12.8013 12.9854C12.8013 13.1357 12.7673 13.2718 12.6992 13.3936C12.6312 13.5153 12.5381 13.6102 12.4199 13.6782C12.3018 13.7498 12.1657 13.7856 12.0117 13.7856C11.9043 13.7856 11.8005 13.766 11.7002 13.7266C11.6035 13.6908 11.5158 13.6335 11.437 13.5547L8.97168 11.0894C8.62793 11.3185 8.25195 11.4993 7.84375 11.6318C7.43913 11.7607 7.01302 11.8252 6.56543 11.8252C5.96387 11.8252 5.39811 11.7124 4.86816 11.4868C4.3418 11.2612 3.87809 10.9479 3.47705 10.5469C3.07601 10.1458 2.7609 9.68213 2.53174 9.15576C2.30615 8.62581 2.19336 8.05827 2.19336 7.45312ZM3.31592 7.45312C3.31592 7.9043 3.39827 8.32682 3.56299 8.7207C3.73128 9.111 3.96403 9.45475 4.26123 9.75195C4.56201 10.0492 4.90934 10.2837 5.30322 10.4556C5.6971 10.6239 6.11784 10.708 6.56543 10.708C7.0166 10.708 7.43734 10.6239 7.82764 10.4556C8.22152 10.2837 8.56706 10.0492 8.86426 9.75195C9.16146 9.45475 9.39421 9.111 9.5625 8.7207C9.73438 8.32682 9.82031 7.9043 9.82031 7.45312C9.82031 7.00553 9.73438 6.5848 9.5625 6.19092C9.39421 5.79704 9.16146 5.4515 8.86426 5.1543C8.56706 4.85352 8.22152 4.62077 7.82764 4.45605C7.43734 4.28776 7.0166 4.20361 6.56543 4.20361C6.11784 4.20361 5.6971 4.28776 5.30322 4.45605C4.90934 4.62077 4.56201 4.85352 4.26123 5.1543C3.96403 5.4515 3.73128 5.79704 3.56299 6.19092C3.39827 6.5848 3.31592 7.00553 3.31592 7.45312ZM4.72852 7.23828V5.98145C4.72852 5.86686 4.75716 5.77734 4.81445 5.71289C4.87174 5.64844 4.94873 5.61621 5.04541 5.61621H6.37207C6.52246 5.61621 6.61377 5.67708 6.646 5.79883C6.67822 5.92057 6.65137 6.0262 6.56543 6.11572L6.14648 6.52393L7.48389 7.87207L7.89209 7.46924C7.97803 7.38688 8.08187 7.36182 8.20361 7.39404C8.32536 7.42269 8.38623 7.51221 8.38623 7.6626V8.91943C8.38623 9.03402 8.35758 9.12174 8.30029 9.18262C8.243 9.24349 8.16602 9.27393 8.06934 9.27393H6.74268C6.59229 9.27393 6.49919 9.21484 6.46338 9.09668C6.43115 8.97493 6.4598 8.87109 6.54932 8.78516L6.97363 8.37158L5.62549 7.02881L5.22266 7.42627C5.13672 7.51221 5.03288 7.53906 4.91113 7.50684C4.78939 7.47461 4.72852 7.38509 4.72852 7.23828Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/md-summarize-action.svg b/assets/icons/md-summarize-action.svg
new file mode 100644
index 00000000..5e2d17ae
--- /dev/null
+++ b/assets/icons/md-summarize-action.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1.19727 12.5547V7.56836C1.19727 7.1582 1.31836 6.83789 1.56055 6.60742C1.80664 6.37695 2.14453 6.26172 2.57422 6.26172H3.86914V3.64258C3.86914 3.01367 4.03125 2.53906 4.35547 2.21875C4.68359 1.89844 5.16406 1.73828 5.79688 1.73828H12.875C13.5078 1.73828 13.9863 1.89844 14.3105 2.21875C14.6348 2.53906 14.7969 3.01367 14.7969 3.64258V12.5195C14.7969 13.1445 14.6348 13.6172 14.3105 13.9375C13.9863 14.2617 13.5078 14.4238 12.875 14.4238H3.11328C2.48828 14.4238 2.01172 14.2637 1.68359 13.9434C1.35938 13.623 1.19727 13.1602 1.19727 12.5547ZM2.35156 12.4961C2.35156 12.7188 2.42383 12.9023 2.56836 13.0469C2.71289 13.1953 2.89453 13.2695 3.11328 13.2695C3.32812 13.2695 3.50781 13.1973 3.65234 13.0527C3.79688 12.9082 3.86914 12.7227 3.86914 12.4961V7.41016H2.7207C2.60352 7.41016 2.51172 7.44336 2.44531 7.50977C2.38281 7.57617 2.35156 7.66602 2.35156 7.7793V12.4961ZM4.85352 13.2695H12.7988C13.0762 13.2695 13.2871 13.1973 13.4316 13.0527C13.5762 12.9121 13.6484 12.7012 13.6484 12.4199V3.74219C13.6484 3.46094 13.5762 3.24805 13.4316 3.10352C13.2871 2.95898 13.0762 2.88672 12.7988 2.88672H5.86719C5.59375 2.88672 5.38477 2.95898 5.24023 3.10352C5.0957 3.24805 5.02344 3.46094 5.02344 3.74219V12.5078C5.02344 12.793 4.9668 13.0469 4.85352 13.2695ZM6.51172 5.38867C6.39844 5.38867 6.30273 5.34961 6.22461 5.27148C6.15039 5.19336 6.11328 5.09961 6.11328 4.99023C6.11328 4.88477 6.15039 4.79492 6.22461 4.7207C6.30273 4.64648 6.39844 4.60938 6.51172 4.60938H12.166C12.2754 4.60938 12.3672 4.64648 12.4414 4.7207C12.5195 4.79492 12.5586 4.88477 12.5586 4.99023C12.5586 5.09961 12.5195 5.19336 12.4414 5.27148C12.3672 5.34961 12.2754 5.38867 12.166 5.38867H6.51172ZM6.51172 7.41016C6.39844 7.41016 6.30273 7.375 6.22461 7.30469C6.15039 7.23047 6.11328 7.13672 6.11328 7.02344C6.11328 6.91406 6.15039 6.82227 6.22461 6.74805C6.30273 6.66992 6.39844 6.63086 6.51172 6.63086H12.166C12.2754 6.63086 12.3672 6.66992 12.4414 6.74805C12.5195 6.82227 12.5586 6.91406 12.5586 7.02344C12.5586 7.13672 12.5195 7.23047 12.4414 7.30469C12.3672 7.375 12.2754 7.41016 12.166 7.41016H6.51172ZM6.8457 11.4883C6.61523 11.4883 6.43359 11.4238 6.30078 11.2949C6.17188 11.1621 6.10742 10.9824 6.10742 10.7559V9.39648C6.10742 9.16602 6.17188 8.98633 6.30078 8.85742C6.43359 8.72852 6.61523 8.66406 6.8457 8.66406H8.30469C8.53125 8.66406 8.70898 8.72852 8.83789 8.85742C8.9707 8.98633 9.03711 9.16602 9.03711 9.39648V10.7559C9.03711 10.9824 8.9707 11.1621 8.83789 11.2949C8.70898 11.4238 8.53125 11.4883 8.30469 11.4883H6.8457ZM10.0742 9.44336C9.96094 9.44336 9.86719 9.40625 9.79297 9.33203C9.71875 9.25781 9.68164 9.16797 9.68164 9.0625C9.68164 8.94531 9.71875 8.84961 9.79297 8.77539C9.86719 8.70117 9.96094 8.66406 10.0742 8.66406H12.1602C12.2734 8.66406 12.3672 8.70117 12.4414 8.77539C12.5156 8.84961 12.5527 8.94531 12.5527 9.0625C12.5527 9.16797 12.5156 9.25781 12.4414 9.33203C12.3672 9.40625 12.2734 9.44336 12.1602 9.44336H10.0742ZM10.0742 11.4883C9.96094 11.4883 9.86719 11.4512 9.79297 11.377C9.71875 11.3027 9.68164 11.2129 9.68164 11.1074C9.68164 10.9941 9.71875 10.9004 9.79297 10.8262C9.86719 10.748 9.96094 10.709 10.0742 10.709H12.1602C12.2734 10.709 12.3672 10.748 12.4414 10.8262C12.5156 10.9004 12.5527 10.9941 12.5527 11.1074C12.5527 11.2129 12.5156 11.3027 12.4414 11.377C12.3672 11.4512 12.2734 11.4883 12.1602 11.4883H10.0742Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/ollama-redirect.svg b/assets/icons/ollama-redirect.svg
index 57fe7088..08f0c3c0 100644
--- a/assets/icons/ollama-redirect.svg
+++ b/assets/icons/ollama-redirect.svg
@@ -1,20 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g clip-path="url(#clip0_1625_3151)">
-    <rect width="16" height="16" />
-    <rect x="3" width="9.89844" height="14" fill="url(#pattern0_1625_3151)" />
-    <path
-      d="M11.9062 10.0068C12.0184 10.0201 12.129 10.0542 12.2354 10.1094L12.2363 10.1074C12.3588 10.1689 12.4693 10.2547 12.5625 10.3379L12.5615 10.3389L14.7529 12.2656L14.8281 12.3369C14.8778 12.3888 14.9256 12.4491 14.9668 12.5186L15.0234 12.6299L15.0537 12.7129C15.0817 12.7997 15.0996 12.8964 15.0996 13C15.0995 13.1391 15.0666 13.2638 15.0234 13.3672C14.9583 13.5231 14.8546 13.6405 14.7559 13.7275L12.5605 15.6777C12.4656 15.7621 12.3535 15.8413 12.2246 15.8994L12.2256 15.9004C12.2228 15.9017 12.2196 15.9021 12.2168 15.9033C12.2131 15.905 12.2098 15.9076 12.2061 15.9092L12.2051 15.9082C12.0702 15.9683 11.9274 16 11.7812 16C11.5544 16 11.3255 15.9265 11.1396 15.7568L11.1338 15.75C10.9444 15.5719 10.8526 15.3372 10.8525 15.0938V14.7246C10.7471 14.738 10.6498 14.755 10.5605 14.7764C10.3605 14.8244 10.1941 14.9041 10.0537 15.0117L10.0508 15.0137C9.91805 15.1144 9.78179 15.2698 9.65137 15.501L9.64844 15.5059C9.56333 15.6534 9.41728 15.8343 9.17773 15.9248L9.17871 15.9258C9.05598 15.9727 8.9245 15.9999 8.78711 16C8.52662 16 8.31039 15.885 8.15625 15.7266L8.15527 15.7256C7.95418 15.5181 7.90039 15.259 7.90039 15.0488C7.9004 14.5203 7.96109 14.0285 8.09082 13.5791V13.5771C8.22458 13.1194 8.43414 12.7117 8.72656 12.3662L8.72852 12.3643C9.03038 12.0105 9.41025 11.7462 9.85449 11.5684H9.85547C10.1617 11.4464 10.4959 11.3703 10.8525 11.334V10.9189C10.8525 10.6743 10.9455 10.4496 11.1152 10.2754L11.1211 10.2686C11.3089 10.0816 11.5483 10 11.7871 10L11.9062 10.0068Z"
-      fill="black" stroke="white" stroke-width="1.2" />
-  </g>
-  <defs>
-    <pattern id="pattern0_1625_3151" patternContentUnits="objectBoundingBox" width="1" height="1">
-      <use xlink:href="#image0_1625_3151" transform="scale(0.00552486 0.00390625)" />
-    </pattern>
-    <clipPath id="clip0_1625_3151">
-      <rect width="16" height="16" />
-    </clipPath>
-    <image id="image0_1625_3151" width="181" height="256" preserveAspectRatio="none"
-      xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALUAAAEACAYAAAD1IzfbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABzUSURBVHgB7Z0JtGRVdYZ/bTUMDiiKMnYLhKFVJCBOKDxdIM4oEiUaYiNxJRpFkhVwjLTLKVFwiONSGWIaUIFAUNAElUYDRkQFFRAE+8nUzDLP0N7v3aruetU1nLPPuVX3Vu1vrU033f3O+Netc8/ZZ2/JcRzHcRzHcRzHcRzHcRzHcRzHcRzHcRzHcRzHcRzHcRzHcRzHcerIw1RPaNdWhT279euC1p/fV9hvC/tJYSvlVM3GhT2vsO0Ke1Trzx4s7PLCzm39ukrOQDYo7JDCLlQ5WP3sIZXC/tvC1pGTE8aTcWV8GedB88A8MV8byFkLnsQHFXaTBg9iL5st7A2q77dOU2D8GMdZxc8B88b8LZAzx2aFnaX4gey2E+RPDCuMG+OXOgfM42aacnYs7GqlD2bbLi7sqXJiYLwYt1xzwHzuqCll58JuVr7BbNtVhW0jJwTGifHKPQfM686aMrYu7DrlH8y2/b6wTeQMgvFhnKqaA+Z3a00J6xf2K1U3mG37/8L+TE4vGBfGp+o5YJ7X1xTwFVU/mG37rJxeMC6jmoOvaMLZS8P3PnMaBwV7yOmE8WBcRjUHzPdemlDY1L9MoxvMtlHnunKAcRjXHEzkIdmhGv1gtu2DcoBxGNccHKoJg819y2lhLrutsCdruqH/jMO45oD5H8nh2MM1Gt5R2BM0Ph6jCXxSREL/H6Pxwfy/QxMCa6lrZf+E31nYWwp7d2H3J5RzR2FP0nRCv+m/dewYd8afebgzoRx0MBFr6zfLPggPFPaKjrL2V9ruyb9oOqHf1jFjvPfvKIv5eCChvDdrAjhb9gH4SI/yDk8oD7+ER2q6oL8p/jWH9yjzIwnlna2Gg2+B9cnKZYBeJ4L82UXGMrHXarqgv9axYpz7zcFvjWWih0b75iyVfUD3GVDuXgnlnqLpgv5ax2rQock+CeUuVYP5tWydxmdg2M7MD41l31vYhpoO6Cf9tYzTD4eUzfxYfXh+rYaCh5b1k/yWgPL3qLj8SYB+WscoxL0gpfxGevBxvcfS2VsU5tnF9SPrN8G3NR3QT+uTNOR6HPN0i7GOg9RArAP6NYXzTmMddxW2niYb+kc/LePzzvBq5uZrKh4sjyjsVtk6u6fC4VDBumZ8qSYb+mcZF8Yz5pBqT2M96OMRahBc5bF0lGtAsfvIpxvr+qQmG/pnGZfTFQfzZb2WV8mVr6p8P54vG2eoPJKN4WTZmNFkMyMbsePJfJ0hG1adDKQqUe8iG99XPKep/NTHwo3nx2oyoV+WG92M42mKxzJvYNXJWBgWYamfWU+arPulL9JkQr8s4/Er2djGWN+FqoAqntR4YVnEeWNhv5ONH8hGo54UEVj7ZR1H5u1GxYNOsnvtVSFqggla3mp/JtsyAv5PNp6lycTaL+s4Mm8/UzzoZDtlpootFesS4heyc45sPF3pcEixuco3+cUq+8//EzGUO4Ebac0dSSb/BpX7x/xKbAxib+AcdIHKr/87lI61X9ZxBObvZYqH8TpfGalC1H8uGxfIDmF9ryhsC8XBUS0eZ/fG/Zi2VOns8+LCXlDYUwJ/jg/ARq3fL+rx9/gpc5q3XOXLF7/epTjoj+UImvFLCY9snT+rXkbKkbK9NOygNKwnmIsDy9++sA/JfjRvMW6Z/Fdhbyzs0QpjsbGu1BO+HYz1HqkGwJ5lbMfwsU0NY/BR2QZ17wFlcqfv71QGGF81Zru9sKNUBkEf5Jext7H8jyoN5s/iO2/d4+5LFS+Klhh2rC3vVhrW7aEte/zZwsI+VdiVhX1Z9dgl4Ul9gMp1Lx8ynt69Tl+3lI3U7TXm7zrFkz3mYV1EPat0LpWNzTt+jyCObJX1j4U9TvWE3Y1jVb5gHqj54t5cNqzj18ms4ql9IE8iyVu++r6hdDYw1n2iSgeef5fdOWrcdklhr1O5LDnRWMYTlc43jHVnzUCQe/djY9m4Qeng14vnV+zT9YUqRfF4NRe2xRDzctnmgHGzHJ50Y51H2nyVMpFb1I+SjZuUh2sUL+qNNDnMyMY1yoN1Hq266UnuNXXofm031ysPnobORq5xs86jVTc9yS1q6ycu9oChH1fLsZBr3KzzWOsntZXblIdb5FjINW655jGJuoj6ZuUhVznTxkSNf6PuiAWQaxmTCttUvHzNqjzq5lCC0zZuX2/Ysq1Un3wodRm3LEyaqHNsDVrga/fMwn5U2E9VetvdPuRn2FPGAYvTSo6+cezfUePJ3DuucauESRP1Ko0OvmrZGyZTLGK+T3HQ1j+07MTWn22q0neDdMp4/41qeTjKcaucuqypmwRRO/G7QIA4O+EiGivofrAL8cXCdld5oPIJ5dvDnxrqIupcEe5TnaL6wZPsOypvP/MEPb6we1Qtl6sMdL6wsINV7XZlrnEbZ6aC1dRF1LkCNuY6xOmEK06I+VWF/USjhxdN8h7iTI/Iq9i2zDVutQi8mVvUD8pGrkDoOdeGnLK9qbDdVGaHHTc8TVmObFvYMcrb11xlWefRqpue5Ba19bjV6gjVzU7KwzKV9/yOU/1eoniq4lfNdbIrlYdc42adx1q7N+DLa3E9/LTSIYDLH431t42tuTeqOeBZSESlVYnGuOUI7PNpY/1WH/CRwBahpVPLlM57jXW3jdgVofcV6wT72u9Temrm9yqdZca6s24t596n5jY0hw6xb8Ghn1ReRJ6h8mtuM5Unckwqp3Vvlx3WzK9WMw8hEMXHVO6W/Id652gJgR0WHIse3iqTF1R8nFkacNk4ZGvR8sRFLw8oI1WcXnEtKPba+2xhT239nrt4nKxxzX9Rq6wdWr8PvVEdw1kqdzaGnQA2AdbZLEeqyMVOPJJZlaelv2v9npzj52tNrJIV6h36YRCUVfvERmcq/uuHTypPCsJepSSfjDWOtGuxt5qRVyotiWqs8R7y1Va9lvyKZ6oBWNdVo7ZZTW6+8n9QM+YAy/E+NY8qDl9WqP7wJMO/wnKlvwlw1J5dLBWRXS9ViPpy1Z8Pq1x6TCo8AcnbcoXqTxP0ol1V76+75Zo878R+cFMeZ6s6z8euagBss3GkW8cBpF2LNF2k5HIfxXzU5aLEUPBiq+MgHqHpgyA/qSetVdnxqoAq1tTE3cjly5ETgrV8TNMHXn0fVj1BK1WcPWSFE7/zVM+nwiGaXjhl5HSwjvPCC3ttc8UT6YjA23UcONZuMQkvJxFia9dxbjB0U7tIWU/QaIORx9qxcvCVqfNOyG9U6qgW8AlrJyGq62AtlAPvUL0ju6Kj5Cd2qkMTYvmuytQRVUFncXohUQ4CJfEPnmPtQO2kLCMWG0fexNIgxjShYTk15NvjGE2Gs1IuiG29r9a4CPAiyfiuULlL0j5lJbQva13mmNs2O7R+tuqY3RerTIj0B40BPKu4eVHFJxanpm8Vtr8yBw90kuBhQZySw1Tt+xO6GrnnHhVerfydwa2RsAN1jeDvrIFveVyEv6TS9TS3FtDXyITNHvQKKWsH2AbEddHjkDQTliokQmKZl1MX6KzyMw+eoOcrX6P5NP61XMyTAgI8RrYsXf0MvVX2zY3wvqM8DaXTOJZvIGcSIS4g3ne5hI3uKnnwfVx5GkgMutfImXS4nZ7zwsjHlZk9lecrhS02a54/p3nwMolfd47rZehvT2WC4+UcfgNkNvVdjenkpcrzEokOs7g7nJShMafIfnXfmQyIR5jDBfYkJTKToRGnKnOiGqexPFfl7fNUTc3ICEK8OLHyH6uaGBROc2FdnOpYhS5ND8q3J1bMlk6O1MDO5EE+9dSndXRELu6NXZdQIb4bz5Tj9Ifj9RRRo8+o+43vSazwrXKcweBdmXo6/Z7QylgD35BQES+G48gw5TQPgn2SZsSqteCc6inrHXxzN5XjhHOY7HrDn37oVjFP2J8nVHKwHCcOliFcUrBq7k3DKtg5ofBL5PvRjo19ZNfdmcMK/2xC4W+Q49hghUDge4vuyKDw1H4FE19upbHgC+U+0U4ar5D9gdp3F2QmodC3yHHS4GltDbPxs36FHmEskO0/Pwp3cvD3smkQt9TNehV4obHAHOniHAe4WGB1UT2wuzD2lq2XAP5CjpMP622Z47oL2s9YEJm4/PTQyQmp/yxaJFbInBbbOxbPk41TWwU6Ti6+X9hdioc19Vwex7aod5aN78lx8oKgfyQbczpG1Dyyd1A8BBo8R46Tn+WygYPUnKgJQGJJkMmeouVrwnGGcbZsPI3/IOrYlMttfi7HqQaCTz6keOa0jKgXysZv5DjVwF71rOLZgv8g6s1k4xI5TnVcqniIp70AJyZrgJkVcoAXbYK98+a9WOVX4KYte6TK4Ob8ygOEr1SiFV3X+vXqluFPfJHKJV07Bt20MysbmyBqazqCqzVa+PA9p7BNVE469ePIcqtGD/uhhB7eo7DdFH5rHmFzU2OL1v9v1ePfkBqPLS32awmMeKVGD2NNcHU+mHxouTZFFq1RjvW1ssEDREcr/vTmfo0OAnt/U73vst3T+runq3pIskPOFLYxc4aqHeaoc06r3lEk+WEch431jhoNb5VtzIgEZRL1KBK581T7SGEPBLSHAecqWRVH9mwTfU3l9uWqMdpdrXY8Tflh3Bi/kEuwzAfzUrX//BLZxmmGHz7a8IMrVD1fVHy7PqB8sD4+UeXNilU1sgdb7VqsfHzA0I4vqlqWyDY+M/zw0YYfrDpzktXBiq/rvZQGb9AEWgn5hhinPdBqZ2q2WMbLupzaT9WxRLY2zfDDRxt+8B5VBxmgLpOtQxi7CNavxr8q7PqEusdh17fabYFxuiihbuZpgarBuqZ+IT98tPGHq7rtssTYnk57keLgbf/4DPWO045X/PbsizLUu0TVcJixPVvzSb1ZNqoIWkN73qd09oj4t7zxszVY5VfpKKD99CNmJyhmnPrBfFXx0mjNn3k/+9Q3yQbX0i9TXtgbtfqidLJJ4L9jPUkS0scqHV7gcB0gPhxf6StU7rWyn95es7LLgAB4IDBpjCEvfGyTIcbUr3LGDmeg1xf2PwH/PnSchtXJvP1UeVkkGysRdXA8si5I3HiG8rKrRgdxSr6utAA8iJYsCacXdpbKgOIh/L7Hn/HB2r2wl6tM9GR9UlEOlzf+RuW+8ihg3nKL2vJw4wFN7Gu9WLa1y5eVn6XGtnTb4UPq4UlmTa7DrsPJKvNnV/WStKBV/smy78Lc3+rnIA43lt1tS5UXXKEtW6m/aBewqWwdOU/5WWpsS7ftO6AO1pH3GspEJEcVtrVGy9atei0fQvo5aN28r6HMUYh6d2M7vtUugHXeLYYCeMxbLhcM4lDZOtNp9OXRfcrfVrZkOvhhVHGSF8PTWu2IbTv93bZPmYyTZe677VDlxXIYhB3WWciPjYW8Snl5gbEdnfalPmWvp/gIQDjwEH2qLjfmaQftoV0x/aDf6/UpMzWiP/YC5WW5sR2v7SzkU8ZCcq+r2Rn4rbEtGP4R/YIFfj6yrF8pz05MFdAu2hfTn8/3KYvxSvFrYb5ybunhuGVNdDRvm9m6tuLt/xHKy97GtrBtdkCfMndT3FEwuxm5l1a5oX20M2Z8dutT1gGyH5XvrbwcYGzHiu6CyCJqddx5hfLzmcg2MCHv6lMWH7qYpxrOQk2Js007aW9o3xiHfg8hxi9W2J9Rfn4Q2Ya2HdOrsPOMhf238sPX2ccU9kFjy2tQBoOYdB/EMWla4HjaS7tD+3jggLIYx5AtROaF+cl9kriN7A/XN/YqcKmxMAahqm0uHL6/p/4DzQnezICf56l0ucL6QcLJpuZOp92hiVwZj0FLxhmV49pvrpmP56saYt972sYafLW3YudbPXkPz5cNnNerTDNHgwmNRtAdnkx4CZ7dskFX6XlXOEHDYT+Xq2IXqLkwf5zqheSA/0uVy5Z+8ATetWXkZEE0LF1+IrtbxTA4QeUDt57i4WT7Jb3+AoFbw/nS6W1UP/B/CGn/B5UHjqj/SaXn41dUuoR2L2cWqfxW5N/gaB/rUTgI+hHS3xC/kFHzOdm0N2xJpXcnFHyK6gWf/JD1IRce1lE6RLq6tEf5hJLAnwPBE8u7+zSTb5oPKQ/04w8KWzJafUuqYHvZt/Hu0JBlIx21HCG37dWqD6EviG9THgbFVUa41w/5+2cpD29ThqfbCGGpc6bsmjsqpJJjEyrAzTL1elEuQvrBEbFlDdcLy/F7p71XeaA/IUffx6oecFM+ZdyCIvbyj1JCALAMqUOmrpBdj6BPeSCxR9fdluNyRJujAuq7XOOHl9uU08wfKoKYk6pexs8/SeNjfYV9MPdVPo6Tfbxo6y7KR8gJMXWur/FBEKUUlwgs6ubOs5UesIW9zsdrPCxWWBtzviwRdela2cbqc8rLUwLrfabGAxGtUi78YstlcDT7ZmKl2Nc1HmY0vG1V7LfyFh+TZ5sHBzsiVVw2uCmg/hmNHoR4mtJ0xbg9VwYWFXZnYuVVnjYOYkbD21bVQQtbd6TDHubUz/3OKvxm2lygeor66Up/WP6nEnh/hga8S6NnRsPbtVzV8oYBdbNLVHVC1eWqp6jfpTQ9Ef1g40EVDNul+KTSn2jbqp7kuEk9iBsG/B054O9WtVTdPyupejhE5fj1ZZioOeV5c+tXK6s0ekJSKxCOt6qLszAo/sbiiuum7M0D/p0lBUUqKXr4pQK2YUP2k3EeSrnONI790KsC/g1HyjmDLHaz04C/Y+lRZfhh+hVy9B8yTrlJ0QNjlsXHKHX/dXuNHp5UIWFpD1Z1DLuYYI1/F8LBGt53xqfKb4t+oIeU7eLjlMh2Sov+OU4np3M1vH1V5oFcMaTuJaqOczS87+dqfJwiu6bQ43ZK4MiEyjk2XqTxcYTC2rmTquHUIfXOqBp2Uli/j9D4WKQ0t4IjZYRTqZCv8H52kMbLHgpr56mqBk7r+k0cDvpVhV0Y9mFqW47gkCkcJLu20KXpNDjU4byXsQ2Y+5Z5LNQfemxd1SEI21fE1fhflUmJvl3YO9VKtlMB9COkv1VEAYiF+kMOiPpZ9MUOXiCuSKjwJaoHn1BYewmSWSeneQu0n36E9PcTqgfoxKox9Bn1ovvyhMq44l6XiEYLFX6jgvuOuXyrRw3tpv0h/WQ8FqoeoBNrSATs5YogJar+bqoXX1V427kp3TRh096YEAlfVb1AL1atHR9aCUED7zBWwlZSXZ7SbTguJm50TB+erGZAO0O279rGONTt+By9xPSh09Dpo0Mqeb2xglUaHg95XIQcRnQaDkfj3h0YBu2jnTH9qvKwKYXKNbfMWDgvKXWNbmS53MmpF/uhdXtq0x78H2JP5eh/Ha7Z9QLdhL7kdtuyYYW3c8BYCv831Ru+di0Dd3th/6rxf21v0moH7bE8cOrqtdcG/Vh0h14Hbk8+11gwNor84KkQhcl68YFdAw5N9tHoXibXa9V3ouxxMejvc1R/Ui4PDLwFY70UwH3Eur0g9oNcKiknpRg3oAl1tbSwV6qM8Zza/4e1ynllq9wzlJ4P/Z5Wf5sA/e8Xw2+Yvb+zoO7HtnU7ru2g0gS+qzL71UmyP3FxHd1D818mWePyNc+TESd2xpYg4EwWx+XEBeEiMtGEGCte8nDO4RYHt7pZHuRc8/KBeJ3K7b4mwJigI0saEnT70V5/wYDGbH112vPUPPhKtr6c1N2uUTOWHN2gI0t/0W3PB0JoWIFu4wk0Dr/cHPAkJf9hnQSZamepmmzEowAdWSNdrb7w0aluqwsmSZAeVDNhCUAeSaIj3aNmQ/vpB/25Ws0EHf1YNlbrt1PUz5CNs9VsGMiPq3QVPV3NhHbTfvrR1AdMG6ueeuoXt0jLYz9nfOU6wJOuKUuSs1rtnSTQk2Usvt2rsEsNBfHGP67QYlXD3ienVanbarntrla7TBGKGgB6stxhvLS7ILadLJv7V2ry2UBlGjRulFgdvVLtjlb9B7TaM+mgq9gxQr/zzgo2lm2wo0KpTgDkU9ldZcYF9rlJHmQ96Rs0ORe3yn93q76QPC6TBLqyjN1c5Kb24Yv11sdlmi7IsnBWy9rwdGAwN1RawPmbWsbBzSpNN+jK8q6Gjle2Rf1E2RhHMJS6gQCvaZmTB6uu5nTc3tLbWDaauh/q1BurruZ03Ba11efgRjlOfqy6evjq/8h+zH2rHCc/Vl3N6bgtaqsD+b1ynPxYdTWn49Qn9bVynPxYdTXvSW2lqkhDznSTpKu2qO+UDeuuieMMwqqrOR23RZ30tuk4mUnajWv/sPUEqylBX5xmYdXVnI7bor5NNqwnkY4zCKuu5nScuvwISZbjOLFYdTWX8LUtaqvfwpZynPxYdTW3FdgW9UrZyJIpyXG6sOpqLUcoS7J4Lnv6XrWTE/RkCTa0+sCmc+vE4huN83oTwo05zQE9WS5FrNZvp6gvlI1JvSvnjAernlbrN4eo65Y5wGk2Vj311K815NP18pNFJw/oCD1ZdNgz9B1BD+/JWaDjRGJ9sKLbdduFdD5h7y7sF7KxjxwnHauO0O3d7f/pXjZYQx7sp+YGiXTqAfrZTzYG6jYl/VdVWWOd6SA0W28vG/hymZLzpanBFZ16gH4suhua8wWOMRZOtE1r5FRnukE36Meiu2NCKniZsXDsBDlOPOjGqrmgnDacva80VsCnrYlpGZzxgV6sT2l0Gux7ZM1ph50r3wlxwkAn6MWqtajcnfizPpBQ2T/LcYaDTqwaQ5/RftcnJ1RIYHBrDhlnOkAfKQHtT5aBlOy32OWFPUGOszboAn2k6MvsHfq9xIqPl+OsDbpI0VVSwtNdZH8zxcjd8Ro5zhrQgyWnS9vQ4y5KZFlCA7BL5ThrsCTM6rRlygDZU29NbMi2cpxSByk6QodDs/mGOPcT1f19SsPvMTqQqgN0mC17BeK3ZkzClshxSh1YNYT+gm5YhV7DYmG/QnbukuOk6QD9PaSMpPi6YgvlOGU4sRQdZfPZX6ew3yU05JdynDWgB6uW0OE6ysBBCY3AXi3HWQN6SNHTQUqESDlXJTTgbDnO2qALq6bQY1Ja6/0TKseeL8dZG3SRoqv9lUDKJ+okOU5/0MfIVwCc/ljP6O+Th/l1BoM+0IlFX+iy7yn1oH1qYjA8TDa+IPf5cAaDPr4gG+jSFCPkfNk+Rdwbe4wcZzjoxHof9nxFwia5delxiBwnHPRiXYJsoQgONFZEPLMN5TjhoBd0Y9Hbgb0K7LemnpGN09TKkOQ4gaCX02RjJuYfz8r2ybEG+HOmG3Rj0dtsaAUbGSu4v7DHy3HiQTfox6K7jboL67X8eJZsECP4j3KceNCNNTb6WnrtJWprkMcfyXHsWPWzll57iXqxbJwrx7Fj1c9aeu0l6u1l4zw5jh2rfoL0eqPiF+u3yTN0OWmgH3QUq70bexXUCRmOLIcnZBvNen/MmTrQjyXrMnpdt/MPukW9mWxcIsdJx6qjebrtFvXGsnGlHCcdq47m6bZb1I+VjavkOOlYdTRPt92ifqJs3CzHSceqo3m6zbVjcY0cJ50sOuoW9eNkw3c+nBxYdTRPt92itjok+fLDyYFVR/N0m2v5cZscJ50sOuoW9SrZ8NwuTg6sOpqn225R3ygb1q1Ax+nEqqN5uu0W9Z2y4bfHnRxYgz/O022u5ceT5TjpDE190YeBy4+VsrG5HCedqJAHHczTba419VZynHSsOhq4praevVuvgDlOJ1YdDdQtMcpuUbyjNsnP/Sa5kwL6QUex2kOv82I+9npRvFjxLChsTzmOHfSzQPGg14EvihAdeK+FB7JxUrDqJ0ivS2QLKnK7EtMWOFMLukE/Ft0tCalgkbFw7JlynHjQjVVzi7oL67X8mC3sQtlYV44Tj1U3F6lHPL1+XnonKJ4HZbsN7Djo5kHF861ef/gncq3kkB0tBUAAAAAASUVORK5CYII=" />
-  </defs>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.5311 15.3996C12.4365 15.3996 12.3576 15.3708 12.2945 15.3132C12.2333 15.2557 12.2027 15.1824 12.2027 15.0934V14.0936H12.122C11.7639 14.0936 11.4467 14.1268 11.1702 14.1931C10.8938 14.2594 10.6498 14.3737 10.4383 14.5359C10.2268 14.6964 10.0404 14.9198 9.87894 15.2059C9.8307 15.2897 9.77597 15.3429 9.71475 15.3656C9.65538 15.3883 9.59601 15.3996 9.53664 15.3996C9.46243 15.3996 9.39564 15.3691 9.33627 15.308C9.27876 15.2487 9.25 15.1623 9.25 15.0489C9.25 14.5656 9.30566 14.1311 9.41698 13.7455C9.53015 13.3582 9.70269 13.0275 9.9346 12.7536C10.1684 12.4797 10.4661 12.2703 10.8279 12.1255C11.1916 11.9806 11.6229 11.9082 12.122 11.9082H12.2027V10.9189C12.2027 10.8317 12.2333 10.7566 12.2945 10.6938C12.3576 10.631 12.4383 10.5996 12.5366 10.5996C12.6034 10.5996 12.6637 10.6144 12.7175 10.6441C12.7732 10.672 12.8381 10.7191 12.9123 10.7854L15.1081 12.7169C15.1619 12.7641 15.199 12.812 15.2194 12.8609C15.2398 12.9098 15.25 12.956 15.25 12.9996C15.25 13.0415 15.2398 13.0869 15.2194 13.1357C15.199 13.1846 15.1619 13.2325 15.1081 13.2797L12.9123 15.2295C12.8455 15.2888 12.7815 15.3316 12.7203 15.3577C12.6609 15.3857 12.5979 15.3996 12.5311 15.3996Z"
+    fill="currentColor" />
+  <path
+    d="M5.87242 1.02773C6.02889 0.982745 6.19034 0.993382 6.34152 1.05317C6.46854 1.10348 6.58358 1.18623 6.68767 1.29571C6.86111 1.47683 7.00756 1.73623 7.11928 2.04333C7.2316 2.35227 7.30439 2.69477 7.33203 3.03803C7.70229 2.82725 8.11325 2.69833 8.53704 2.66104L8.56756 2.65922C9.07925 2.61782 9.58517 2.70999 10.0263 2.93901C10.0856 2.97034 10.1437 3.00439 10.2007 3.03985C10.2301 2.70313 10.302 2.36876 10.4126 2.06695C10.5243 1.75914 10.6712 1.50014 10.8442 1.31842C10.9408 1.21334 11.0588 1.13051 11.1903 1.07588C11.3415 1.01668 11.5021 1.00636 11.6586 1.05135C11.8944 1.11881 12.0964 1.26907 12.2558 1.48738C12.4017 1.68686 12.5116 1.94292 12.5863 2.24953C12.7215 2.80235 12.7455 3.52994 12.6543 4.40699L12.6848 4.43061L12.7005 4.44151C13.1457 4.78237 13.4554 5.26838 13.6195 5.83228C13.8754 6.71241 13.7467 7.69997 13.3056 8.25227L13.2952 8.26498L13.296 8.2668C13.5413 8.71785 13.6906 9.19447 13.7224 9.68754L13.7233 9.7048C13.736 9.91712 13.7244 10.1298 13.6928 10.3425L13.5315 10.1944C13.4394 10.1092 13.3152 10.0081 13.1661 9.92464L13.167 9.92282C13.1621 9.92003 13.1562 9.91919 13.1513 9.91646C13.1441 9.91252 13.1377 9.90667 13.1304 9.90283L13.1286 9.90556C13.0727 9.87569 13.0156 9.85162 12.9586 9.83016C12.9579 9.80382 12.9593 9.77742 12.9577 9.75113C12.9307 9.29002 12.7663 8.83639 12.4869 8.40488C12.4327 8.32111 12.4131 8.21941 12.4328 8.12146C12.4526 8.0234 12.5099 7.93663 12.5924 7.88073L12.5976 7.87709C12.7406 7.78298 12.8729 7.54248 12.9394 7.21396C13.0127 6.82562 12.9936 6.42521 12.8836 6.04575C12.763 5.6314 12.542 5.28541 12.2332 5.04923C11.8833 4.7807 11.4198 4.6514 10.8337 4.6886C10.757 4.69362 10.6803 4.67506 10.614 4.63591C10.5477 4.59676 10.4944 4.53857 10.4614 4.46876C10.2767 4.07522 10.0073 3.79309 9.67142 3.6185C9.3491 3.45668 8.98814 3.38886 8.62946 3.42228C7.89711 3.48088 7.2506 3.89676 7.05824 4.42062C7.03101 4.49421 6.9819 4.55741 6.91786 4.6023C6.8538 4.64718 6.77794 4.67208 6.69988 4.67225C6.07223 4.67343 5.58597 4.82134 5.23068 5.0883C4.92376 5.31914 4.71432 5.64207 4.60376 6.02849C4.50383 6.39205 4.49001 6.77416 4.56365 7.14401C4.62952 7.47423 4.75871 7.74785 4.90632 7.89526L4.91068 7.8998C5.03528 8.02223 5.062 8.21312 4.9752 8.364C4.76348 8.7321 4.60528 9.28106 4.57934 9.80836C4.54993 10.4109 4.6887 10.9347 5.00223 11.31L5.01182 11.3209C5.05912 11.3763 5.08911 11.4446 5.09901 11.5171C5.10892 11.5895 5.09827 11.6634 5.06762 11.7296C4.7288 12.4613 4.62481 13.0629 4.73716 13.5364C4.7572 13.6347 4.73841 13.7371 4.68485 13.8217C4.63107 13.9064 4.54583 13.9668 4.44855 13.9897C4.35137 14.0126 4.24899 13.997 4.16343 13.9452C4.07781 13.8934 4.0154 13.8099 3.98992 13.7127C3.84698 13.1101 3.94482 12.4193 4.26894 11.6415L4.27678 11.6215L4.27242 11.6143C4.11314 11.3775 3.99374 11.1155 3.92016 10.8394L3.91755 10.8276C3.82833 10.4831 3.79262 10.1265 3.81292 9.77112C3.83883 9.23266 3.97688 8.68128 4.17913 8.23864L4.1861 8.2232L4.18523 8.22138C4.01298 7.97405 3.88525 7.65774 3.81466 7.30753L3.81117 7.29299C3.71394 6.80423 3.73289 6.29875 3.8661 5.81865C4.02023 5.27729 4.32318 4.81216 4.76942 4.47603C4.80472 4.44939 4.84223 4.42277 4.87929 4.39791C4.78578 3.51441 4.8089 2.78227 4.94468 2.22592C5.01939 1.9193 5.13013 1.66325 5.27602 1.46377C5.43475 1.24611 5.63673 1.09583 5.87242 1.02773ZM8.76287 6.43364C9.3134 6.43368 9.82159 6.61883 10.2016 6.93962C10.5721 7.25154 10.7927 7.67058 10.7927 8.08784C10.7927 8.61342 10.5541 9.02348 10.1266 9.28512C9.76186 9.50709 9.2723 9.61487 8.7123 9.61487C8.11898 9.6148 7.61238 9.46081 7.24658 9.17975C6.88364 8.90154 6.67983 8.51107 6.67983 8.08784C6.67987 7.66944 6.9137 7.24908 7.30064 6.93599C7.69358 6.61812 8.21287 6.43364 8.76287 6.43364ZM8.76287 6.96415C8.35477 6.96056 7.95715 7.09569 7.63546 7.3484C7.36428 7.56742 7.21083 7.8431 7.21083 8.08875C7.21089 8.34203 7.33483 8.57957 7.57007 8.76006C7.83763 8.96526 8.2309 9.0843 8.7123 9.08436C9.1823 9.08436 9.57929 8.99698 9.84929 8.83183C10.1215 8.66609 10.2608 8.42577 10.2608 8.08784C10.2608 7.83749 10.1159 7.56138 9.85889 7.34477C9.57422 7.1051 9.18866 6.96419 8.76287 6.96415ZM9.01398 7.60639C9.0677 7.61202 9.11711 7.63829 9.15175 7.67997L9.15437 7.6827C9.2249 7.77208 9.21003 7.90146 9.12123 7.97248L8.94946 8.10874V8.37308C8.94905 8.43166 8.92625 8.48804 8.88494 8.52933C8.84354 8.57065 8.78717 8.59391 8.72886 8.59383C8.67055 8.59398 8.61423 8.5706 8.57279 8.52933C8.53142 8.48803 8.50781 8.43171 8.50739 8.37308V8.10056L8.34783 7.97157C8.32682 7.95462 8.30931 7.93357 8.29639 7.9098C8.28345 7.88601 8.27569 7.85955 8.27284 7.83258C8.27003 7.80572 8.27219 7.77854 8.27982 7.75264C8.2875 7.72665 8.30029 7.7019 8.31731 7.68088C8.35203 7.63846 8.4025 7.61203 8.45682 7.60639C8.51101 7.60083 8.56516 7.61663 8.60767 7.6509L8.73409 7.75264L8.86401 7.64999C8.90646 7.61628 8.9602 7.60078 9.01398 7.60639ZM6.18718 6.54447C6.46828 6.54447 6.69713 6.77493 6.69726 7.05953C6.69742 7.19598 6.64386 7.32714 6.54816 7.4238C6.45252 7.52038 6.32268 7.57509 6.18718 7.5755C6.05177 7.57504 5.9218 7.52031 5.82621 7.4238C5.73063 7.32729 5.67712 7.19669 5.6771 7.06044C5.67679 6.92406 5.72983 6.79293 5.82533 6.69617C5.92091 6.59944 6.05163 6.54499 6.18718 6.54447ZM11.3089 6.54447C11.591 6.54463 11.8188 6.77503 11.819 7.05953C11.8191 7.196 11.7656 7.32713 11.6699 7.4238C11.5742 7.5204 11.4444 7.57511 11.3089 7.5755C11.1735 7.57503 11.0435 7.52033 10.9479 7.4238C10.8524 7.32729 10.7988 7.19669 10.7988 7.06044C10.7985 6.92407 10.8516 6.79293 10.9471 6.69617C11.0427 6.59939 11.1733 6.54494 11.3089 6.54447ZM6.06599 1.7699C5.99786 1.79972 5.93987 1.84947 5.89858 1.91161L5.89596 1.91433C5.81478 2.02621 5.744 2.19154 5.69106 2.4076C5.59114 2.81711 5.56375 3.37265 5.61781 4.05362C5.87066 3.97789 6.1466 3.93091 6.44353 3.91373L6.44964 3.91282L6.46097 3.89284C6.48801 3.84434 6.51701 3.79726 6.54816 3.75113C6.62042 3.29485 6.56076 2.74994 6.39906 2.30495C6.32029 2.08962 6.22484 1.92001 6.13312 1.82349C6.11418 1.80343 6.09236 1.78524 6.06947 1.7699L6.06773 1.76899L6.06599 1.7699ZM11.4632 1.79352C11.4404 1.80885 11.4194 1.82708 11.4005 1.84711C11.3087 1.94363 11.2118 2.11324 11.1336 2.32857C10.9631 2.79853 10.9062 3.37992 10.9985 3.85105L11.0325 3.90828L11.0377 3.91646H11.0552C11.3471 3.91654 11.6375 3.95867 11.9175 4.04182C11.9681 3.37685 11.9401 2.83303 11.8425 2.43122C11.7896 2.21532 11.7184 2.05073 11.6368 1.93886L11.6341 1.93523C11.5929 1.87285 11.5349 1.8235 11.4667 1.79352L11.4641 1.79261L11.4632 1.79352Z"
+    fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/online-search.svg b/assets/icons/online-search.svg
new file mode 100644
index 00000000..2bf93d80
--- /dev/null
+++ b/assets/icons/online-search.svg
@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_3782_698)">
+    <path
+      d="M7.99992 14.6654C11.6818 14.6654 14.6666 11.6806 14.6666 7.9987C14.6666 4.3168 11.6818 1.33203 7.99992 1.33203C4.31802 1.33203 1.33325 4.3168 1.33325 7.9987C1.33325 11.6806 4.31802 14.6654 7.99992 14.6654Z"
+      stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+      d="M7.99992 1.33203C6.28807 3.12947 5.33325 5.51652 5.33325 7.9987C5.33325 10.4809 6.28807 12.8679 7.99992 14.6654C9.71176 12.8679 10.6666 10.4809 10.6666 7.9987C10.6666 5.51652 9.71176 3.12947 7.99992 1.33203Z"
+      stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M1.33325 8H14.6666" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+  </g>
+  <defs>
+    <clipPath id="clip0_3782_698">
+      <rect width="16" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/assets/icons/quick-action-modified.svg b/assets/icons/quick-action-modified.svg
index 66406da4..254657dc 100644
--- a/assets/icons/quick-action-modified.svg
+++ b/assets/icons/quick-action-modified.svg
@@ -1,19 +1,17 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="24" height="24" rx="4" fill="#F5F6F7" />
-  <rect x="0.5" y="0.5" width="23" height="23" rx="3.5" stroke="black" stroke-opacity="0.12" />
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M11 11.5C11.2761 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.2761 12.5 11 12.5H8C7.72386 12.5 7.5 12.2761 7.5 12C7.5 11.7239 7.72386 11.5 8 11.5H11Z"
-    fill="#596066" />
+    d="M7 7.5C7.2761 7.5 7.5 7.7239 7.5 8C7.5 8.2761 7.2761 8.5 7 8.5H4C3.72386 8.5 3.5 8.2761 3.5 8C3.5 7.7239 3.72386 7.5 4 7.5H7Z"
+    fill="currentColor" />
   <path
-    d="M16 9C16.2761 9 16.5 9.22386 16.5 9.5C16.5 9.77614 16.2761 10 16 10H8C7.72386 10 7.5 9.77614 7.5 9.5C7.5 9.22386 7.72386 9 8 9H16Z"
-    fill="#596066" />
+    d="M12 5C12.2761 5 12.5 5.22386 12.5 5.5C12.5 5.77614 12.2761 6 12 6H4C3.72386 6 3.5 5.77614 3.5 5.5C3.5 5.22386 3.72386 5 4 5H12Z"
+    fill="currentColor" />
   <path
-    d="M17.0596 6.01172C18.2515 6.1326 19.1815 7.13954 19.1816 8.36328V12H17.8818V8.36328C17.8816 7.77608 17.4056 7.2999 16.8184 7.2998H7.36328C6.77614 7.30001 6.3 7.77615 6.2998 8.36328V15.4541C6.29988 16.0413 6.77607 16.5183 7.36328 16.5186H13V17.8184H7.36328L7.12207 17.8057C5.93019 17.6847 5.00007 16.6779 5 15.4541V8.36328C5.00019 7.05819 6.05816 6.00021 7.36328 6H16.8184L17.0596 6.01172Z"
-    fill="#596066" />
+    d="M13.0596 2.01172C14.2515 2.1326 15.1815 3.13954 15.1816 4.36328V8H13.8818V4.36328C13.8816 3.77608 13.4056 3.2999 12.8184 3.2998H3.36328C2.77614 3.30001 2.3 3.77615 2.2998 4.36328V11.4541C2.29988 12.0413 2.77607 12.5183 3.36328 12.5186H9V13.8184H3.36328L3.12207 13.8057C1.93019 13.6847 1.00007 12.6779 1 11.4541V4.36328C1.00019 3.05819 2.05816 2.00021 3.36328 2H12.8184L13.0596 2.01172Z"
+    fill="currentColor" />
   <path
-    d="M19.4596 17.5397L19.5431 17.6425C19.7095 17.8948 19.6816 18.2374 19.4596 18.4594C19.2376 18.6815 18.8949 18.7093 18.6427 18.543L18.5398 18.4594L15.5401 15.4598C15.2863 15.2059 15.2863 14.7938 15.5401 14.54C15.7939 14.2861 16.2061 14.2861 16.4599 14.54L19.4596 17.5397Z"
-    fill="#596066" />
+    d="M15.4595 13.5397L15.543 13.6425C15.7094 13.8948 15.6815 14.2374 15.4595 14.4594C15.2375 14.6815 14.8948 14.7093 14.6426 14.543L14.5397 14.4594L11.54 11.4598C11.2862 11.2059 11.2862 10.7938 11.54 10.54C11.7938 10.2861 12.206 10.2861 12.4598 10.54L15.4595 13.5397Z"
+    fill="currentColor" />
   <path
-    d="M14.3496 18V14.5C14.3496 13.8649 14.8649 13.3496 15.5 13.3496H19L19.1309 13.3633C19.4271 13.4238 19.6504 13.6858 19.6504 14C19.6504 14.3142 19.4271 14.5762 19.1309 14.6367L19 14.6504H15.6504V18C15.6504 18.359 15.359 18.6504 15 18.6504C14.641 18.6504 14.3496 18.359 14.3496 18Z"
-    fill="#596066" />
+    d="M10.3496 14V10.5C10.3496 9.86491 10.8649 9.34961 11.5 9.34961H15L15.1309 9.36331C15.4271 9.42381 15.6504 9.68581 15.6504 10C15.6504 10.3142 15.4271 10.5762 15.1309 10.6367L15 10.6504H11.6504V14C11.6504 14.359 11.359 14.6504 11 14.6504C10.641 14.6504 10.3496 14.359 10.3496 14Z"
+    fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/assets/icons/redirect-to-ollama.svg b/assets/icons/redirect-to-ollama.svg
deleted file mode 100644
index fe8ad058..00000000
--- a/assets/icons/redirect-to-ollama.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M12.5311 15.3996C12.4365 15.3996 12.3576 15.3708 12.2945 15.3132C12.2333 15.2557 12.2027 15.1824 12.2027 15.0934V14.0936H12.122C11.7639 14.0936 11.4467 14.1268 11.1702 14.1931C10.8938 14.2594 10.6498 14.3737 10.4383 14.5359C10.2268 14.6964 10.0404 14.9198 9.87894 15.2059C9.8307 15.2897 9.77597 15.3429 9.71475 15.3656C9.65538 15.3883 9.59601 15.3996 9.53664 15.3996C9.46243 15.3996 9.39564 15.3691 9.33627 15.308C9.27876 15.2487 9.25 15.1623 9.25 15.0489C9.25 14.5656 9.30566 14.1311 9.41698 13.7455C9.53015 13.3582 9.70269 13.0275 9.9346 12.7536C10.1684 12.4797 10.4661 12.2703 10.8279 12.1255C11.1916 11.9806 11.6229 11.9082 12.122 11.9082H12.2027V10.9189C12.2027 10.8317 12.2333 10.7566 12.2945 10.6938C12.3576 10.631 12.4383 10.5996 12.5366 10.5996C12.6034 10.5996 12.6637 10.6144 12.7175 10.6441C12.7732 10.672 12.8381 10.7191 12.9123 10.7854L15.1081 12.7169C15.1619 12.7641 15.199 12.812 15.2194 12.8609C15.2398 12.9098 15.25 12.956 15.25 12.9996C15.25 13.0415 15.2398 13.0869 15.2194 13.1357C15.199 13.1846 15.1619 13.2325 15.1081 13.2797L12.9123 15.2295C12.8455 15.2888 12.7815 15.3316 12.7203 15.3577C12.6609 15.3857 12.5979 15.3996 12.5311 15.3996Z"
-    fill="currentColor" />
-  <path
-    d="M5.87242 1.02773C6.02889 0.982745 6.19034 0.993382 6.34152 1.05317C6.46854 1.10348 6.58358 1.18623 6.68767 1.29571C6.86111 1.47683 7.00756 1.73623 7.11928 2.04333C7.2316 2.35227 7.30439 2.69477 7.33203 3.03803C7.70229 2.82725 8.11325 2.69833 8.53704 2.66104L8.56756 2.65922C9.07925 2.61782 9.58517 2.70999 10.0263 2.93901C10.0856 2.97034 10.1437 3.00439 10.2007 3.03985C10.2301 2.70313 10.302 2.36876 10.4126 2.06695C10.5243 1.75914 10.6712 1.50014 10.8442 1.31842C10.9408 1.21334 11.0588 1.13051 11.1903 1.07588C11.3415 1.01668 11.5021 1.00636 11.6586 1.05135C11.8944 1.11881 12.0964 1.26907 12.2558 1.48738C12.4017 1.68686 12.5116 1.94292 12.5863 2.24953C12.7215 2.80235 12.7455 3.52994 12.6543 4.40699L12.6848 4.43061L12.7005 4.44151C13.1457 4.78237 13.4554 5.26838 13.6195 5.83228C13.8754 6.71241 13.7467 7.69997 13.3056 8.25227L13.2952 8.26498L13.296 8.2668C13.5413 8.71785 13.6906 9.19447 13.7224 9.68754L13.7233 9.7048C13.736 9.91712 13.7244 10.1298 13.6928 10.3425L13.5315 10.1944C13.4394 10.1092 13.3152 10.0081 13.1661 9.92464L13.167 9.92282C13.1621 9.92003 13.1562 9.91919 13.1513 9.91646C13.1441 9.91252 13.1377 9.90667 13.1304 9.90283L13.1286 9.90556C13.0727 9.87569 13.0156 9.85162 12.9586 9.83016C12.9579 9.80382 12.9593 9.77742 12.9577 9.75113C12.9307 9.29002 12.7663 8.83639 12.4869 8.40488C12.4327 8.32111 12.4131 8.21941 12.4328 8.12146C12.4526 8.0234 12.5099 7.93663 12.5924 7.88073L12.5976 7.87709C12.7406 7.78298 12.8729 7.54248 12.9394 7.21396C13.0127 6.82562 12.9936 6.42521 12.8836 6.04575C12.763 5.6314 12.542 5.28541 12.2332 5.04923C11.8833 4.7807 11.4198 4.6514 10.8337 4.6886C10.757 4.69362 10.6803 4.67506 10.614 4.63591C10.5477 4.59676 10.4944 4.53857 10.4614 4.46876C10.2767 4.07522 10.0073 3.79309 9.67142 3.6185C9.3491 3.45668 8.98814 3.38886 8.62946 3.42228C7.89711 3.48088 7.2506 3.89676 7.05824 4.42062C7.03101 4.49421 6.9819 4.55741 6.91786 4.6023C6.8538 4.64718 6.77794 4.67208 6.69988 4.67225C6.07223 4.67343 5.58597 4.82134 5.23068 5.0883C4.92376 5.31914 4.71432 5.64207 4.60376 6.02849C4.50383 6.39205 4.49001 6.77416 4.56365 7.14401C4.62952 7.47423 4.75871 7.74785 4.90632 7.89526L4.91068 7.8998C5.03528 8.02223 5.062 8.21312 4.9752 8.364C4.76348 8.7321 4.60528 9.28106 4.57934 9.80836C4.54993 10.4109 4.6887 10.9347 5.00223 11.31L5.01182 11.3209C5.05912 11.3763 5.08911 11.4446 5.09901 11.5171C5.10892 11.5895 5.09827 11.6634 5.06762 11.7296C4.7288 12.4613 4.62481 13.0629 4.73716 13.5364C4.7572 13.6347 4.73841 13.7371 4.68485 13.8217C4.63107 13.9064 4.54583 13.9668 4.44855 13.9897C4.35137 14.0126 4.24899 13.997 4.16343 13.9452C4.07781 13.8934 4.0154 13.8099 3.98992 13.7127C3.84698 13.1101 3.94482 12.4193 4.26894 11.6415L4.27678 11.6215L4.27242 11.6143C4.11314 11.3775 3.99374 11.1155 3.92016 10.8394L3.91755 10.8276C3.82833 10.4831 3.79262 10.1265 3.81292 9.77112C3.83883 9.23266 3.97688 8.68128 4.17913 8.23864L4.1861 8.2232L4.18523 8.22138C4.01298 7.97405 3.88525 7.65774 3.81466 7.30753L3.81117 7.29299C3.71394 6.80423 3.73289 6.29875 3.8661 5.81865C4.02023 5.27729 4.32318 4.81216 4.76942 4.47603C4.80472 4.44939 4.84223 4.42277 4.87929 4.39791C4.78578 3.51441 4.8089 2.78227 4.94468 2.22592C5.01939 1.9193 5.13013 1.66325 5.27602 1.46377C5.43475 1.24611 5.63673 1.09583 5.87242 1.02773ZM8.76287 6.43364C9.3134 6.43368 9.82159 6.61883 10.2016 6.93962C10.5721 7.25154 10.7927 7.67058 10.7927 8.08784C10.7927 8.61342 10.5541 9.02348 10.1266 9.28512C9.76186 9.50709 9.2723 9.61487 8.7123 9.61487C8.11898 9.6148 7.61238 9.46081 7.24658 9.17975C6.88364 8.90154 6.67983 8.51107 6.67983 8.08784C6.67987 7.66944 6.9137 7.24908 7.30064 6.93599C7.69358 6.61812 8.21287 6.43364 8.76287 6.43364ZM8.76287 6.96415C8.35477 6.96056 7.95715 7.09569 7.63546 7.3484C7.36428 7.56742 7.21083 7.8431 7.21083 8.08875C7.21089 8.34203 7.33483 8.57957 7.57007 8.76006C7.83763 8.96526 8.2309 9.0843 8.7123 9.08436C9.1823 9.08436 9.57929 8.99698 9.84929 8.83183C10.1215 8.66609 10.2608 8.42577 10.2608 8.08784C10.2608 7.83749 10.1159 7.56138 9.85889 7.34477C9.57422 7.1051 9.18866 6.96419 8.76287 6.96415ZM9.01398 7.60639C9.0677 7.61202 9.11711 7.63829 9.15175 7.67997L9.15437 7.6827C9.2249 7.77208 9.21003 7.90146 9.12123 7.97248L8.94946 8.10874V8.37308C8.94905 8.43166 8.92625 8.48804 8.88494 8.52933C8.84354 8.57065 8.78717 8.59391 8.72886 8.59383C8.67055 8.59398 8.61423 8.5706 8.57279 8.52933C8.53142 8.48803 8.50781 8.43171 8.50739 8.37308V8.10056L8.34783 7.97157C8.32682 7.95462 8.30931 7.93357 8.29639 7.9098C8.28345 7.88601 8.27569 7.85955 8.27284 7.83258C8.27003 7.80572 8.27219 7.77854 8.27982 7.75264C8.2875 7.72665 8.30029 7.7019 8.31731 7.68088C8.35203 7.63846 8.4025 7.61203 8.45682 7.60639C8.51101 7.60083 8.56516 7.61663 8.60767 7.6509L8.73409 7.75264L8.86401 7.64999C8.90646 7.61628 8.9602 7.60078 9.01398 7.60639ZM6.18718 6.54447C6.46828 6.54447 6.69713 6.77493 6.69726 7.05953C6.69742 7.19598 6.64386 7.32714 6.54816 7.4238C6.45252 7.52038 6.32268 7.57509 6.18718 7.5755C6.05177 7.57504 5.9218 7.52031 5.82621 7.4238C5.73063 7.32729 5.67712 7.19669 5.6771 7.06044C5.67679 6.92406 5.72983 6.79293 5.82533 6.69617C5.92091 6.59944 6.05163 6.54499 6.18718 6.54447ZM11.3089 6.54447C11.591 6.54463 11.8188 6.77503 11.819 7.05953C11.8191 7.196 11.7656 7.32713 11.6699 7.4238C11.5742 7.5204 11.4444 7.57511 11.3089 7.5755C11.1735 7.57503 11.0435 7.52033 10.9479 7.4238C10.8524 7.32729 10.7988 7.19669 10.7988 7.06044C10.7985 6.92407 10.8516 6.79293 10.9471 6.69617C11.0427 6.59939 11.1733 6.54494 11.3089 6.54447ZM6.06599 1.7699C5.99786 1.79972 5.93987 1.84947 5.89858 1.91161L5.89596 1.91433C5.81478 2.02621 5.744 2.19154 5.69106 2.4076C5.59114 2.81711 5.56375 3.37265 5.61781 4.05362C5.87066 3.97789 6.1466 3.93091 6.44353 3.91373L6.44964 3.91282L6.46097 3.89284C6.48801 3.84434 6.51701 3.79726 6.54816 3.75113C6.62042 3.29485 6.56076 2.74994 6.39906 2.30495C6.32029 2.08962 6.22484 1.92001 6.13312 1.82349C6.11418 1.80343 6.09236 1.78524 6.06947 1.7699L6.06773 1.76899L6.06599 1.7699ZM11.4632 1.79352C11.4404 1.80885 11.4194 1.82708 11.4005 1.84711C11.3087 1.94363 11.2118 2.11324 11.1336 2.32857C10.9631 2.79853 10.9062 3.37992 10.9985 3.85105L11.0325 3.90828L11.0377 3.91646H11.0552C11.3471 3.91654 11.6375 3.95867 11.9175 4.04182C11.9681 3.37685 11.9401 2.83303 11.8425 2.43122C11.7896 2.21532 11.7184 2.05073 11.6368 1.93886L11.6341 1.93523C11.5929 1.87285 11.5349 1.8235 11.4667 1.79352L11.4641 1.79261L11.4632 1.79352Z"
-    fill="currentColor" />
-</svg>
\ No newline at end of file
diff --git a/assets/icons/unload.svg b/assets/icons/unload.svg
new file mode 100644
index 00000000..f1bd6540
--- /dev/null
+++ b/assets/icons/unload.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M3.12354 9.21729C2.80615 9.21729 2.55648 9.13477 2.37451 8.96973C2.19678 8.80469 2.10791 8.58252 2.10791 8.30322C2.10791 8.16781 2.13965 8.03239 2.20312 7.89697C2.27083 7.76156 2.36182 7.6346 2.47607 7.51611L7.14795 2.5332C7.32145 2.36393 7.48649 2.23275 7.64307 2.13965C7.80387 2.04655 7.98161 2 8.17627 2C8.37093 2 8.54867 2.04867 8.70947 2.146C8.87028 2.2391 9.0332 2.36816 9.19824 2.5332L13.8828 7.51611C13.9928 7.63037 14.0817 7.75732 14.1494 7.89697C14.2171 8.03239 14.2489 8.16781 14.2446 8.30322C14.2404 8.58252 14.1494 8.80469 13.9717 8.96973C13.7939 9.13477 13.5485 9.21729 13.2354 9.21729H3.12354ZM3.97412 8.08105H12.3848C12.4906 8.08105 12.5435 8.03662 12.5435 7.94775C12.5435 7.9139 12.5244 7.87793 12.4863 7.83984L8.3667 3.49805C8.30322 3.42611 8.23975 3.39014 8.17627 3.39014C8.13818 3.39014 8.10433 3.40072 8.07471 3.42188C8.04508 3.44303 8.01546 3.46842 7.98584 3.49805L3.85986 7.83984C3.83024 7.8737 3.81543 7.90967 3.81543 7.94775C3.81543 8.03662 3.86833 8.08105 3.97412 8.08105ZM3.39648 14.0542C2.95638 14.0542 2.61361 13.9378 2.36816 13.7051C2.12272 13.4766 2 13.1444 2 12.7085V11.7627C2 11.3311 2.12272 10.9989 2.36816 10.7661C2.61361 10.5334 2.95638 10.417 3.39648 10.417H12.9434C13.3877 10.417 13.7305 10.5334 13.9717 10.7661C14.2171 10.9989 14.3398 11.3311 14.3398 11.7627V12.7085C14.3398 13.1444 14.2171 13.4766 13.9717 13.7051C13.7305 13.9378 13.3877 14.0542 12.9434 14.0542H3.39648ZM3.63135 12.9434H12.7085C12.8354 12.9434 12.9307 12.9074 12.9941 12.8354C13.0576 12.7677 13.0894 12.6704 13.0894 12.5435V11.9214C13.0894 11.7987 13.0576 11.7035 12.9941 11.6357C12.9307 11.568 12.8354 11.5342 12.7085 11.5342H3.63135C3.50863 11.5342 3.41341 11.568 3.3457 11.6357C3.28223 11.7035 3.25049 11.7987 3.25049 11.9214V12.5435C3.25049 12.6704 3.28223 12.7677 3.3457 12.8354C3.41341 12.9074 3.50863 12.9434 3.63135 12.9434Z"
+    fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/assets/icons/web.svg b/assets/icons/web.svg
index 58701760..c1c14c9b 100644
--- a/assets/icons/web.svg
+++ b/assets/icons/web.svg
@@ -1,5 +1,5 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
-    d="M6.03957 10.6453C5.70092 10.6453 5.38161 10.5292 5.08166 10.297C4.78171 10.068 4.51885 9.74543 4.29308 9.32936C4.06731 8.9133 3.88992 8.42629 3.76091 7.86831C3.6319 7.31034 3.56739 6.70398 3.56739 6.04925C3.56739 5.39452 3.6319 4.78655 3.76091 4.22535C3.88992 3.66415 4.06731 3.17552 4.29308 2.75946C4.51885 2.3434 4.7801 2.02087 5.07683 1.79187C5.37678 1.55965 5.69769 1.44354 6.03957 1.44354C6.38468 1.44354 6.7056 1.55965 7.00232 1.79187C7.30227 2.02087 7.56513 2.3434 7.7909 2.75946C8.0199 3.17552 8.19729 3.66415 8.32308 4.22535C8.44886 4.78655 8.51175 5.39452 8.51175 6.04925C8.51175 6.70398 8.44725 7.31034 8.31824 7.86831C8.19245 8.42629 8.01506 8.9133 7.78607 9.32936C7.5603 9.74543 7.29743 10.068 6.99748 10.297C6.70076 10.5292 6.38145 10.6453 6.03957 10.6453ZM6.03957 2.07247C5.80735 2.07247 5.5832 2.17891 5.3671 2.39177C5.15423 2.60464 4.96394 2.89653 4.79623 3.26744C4.63174 3.63512 4.50111 4.05925 4.40435 4.53982C4.30759 5.01716 4.25922 5.5203 4.25922 6.04925C4.25922 6.57497 4.30759 7.07489 4.40435 7.54901C4.50111 8.02312 4.63174 8.44564 4.79623 8.81654C4.96394 9.18423 5.15423 9.4745 5.3671 9.68737C5.5832 9.90347 5.80735 10.0115 6.03957 10.0115C6.27179 10.0115 6.49434 9.90347 6.70721 9.68737C6.9233 9.4745 7.11521 9.18261 7.28292 8.81171C7.45064 8.4408 7.58287 8.01829 7.67963 7.54417C7.77639 7.07005 7.82477 6.57175 7.82477 6.04925C7.82477 5.5203 7.77639 5.01716 7.67963 4.53982C7.58287 4.05925 7.45064 3.63512 7.28292 3.26744C7.11521 2.89653 6.9233 2.60464 6.70721 2.39177C6.49434 2.17891 6.27179 2.07247 6.03957 2.07247ZM5.70576 1.50643H6.38307V10.5534H5.70576V1.50643ZM6.03957 7.73769C6.54594 7.73769 7.0249 7.77962 7.47644 7.86347C7.92798 7.9441 8.33275 8.06021 8.69076 8.2118C9.05199 8.36339 9.34388 8.5424 9.56642 8.74881L9.04877 9.17455C8.83912 9.01329 8.58271 8.87621 8.27953 8.76333C7.97958 8.64722 7.64093 8.56013 7.26357 8.50208C6.88621 8.4408 6.47821 8.41016 6.03957 8.41016C5.60416 8.41016 5.19616 8.4408 4.81558 8.50208C4.43822 8.56013 4.09795 8.64722 3.79477 8.76333C3.49482 8.87621 3.24164 9.01329 3.03522 9.17455L2.51756 8.74881C2.74011 8.5424 3.03038 8.36339 3.38839 8.2118C3.74639 8.06021 4.15117 7.9441 4.60271 7.86347C5.05747 7.77962 5.53643 7.73769 6.03957 7.73769ZM10.476 5.70092V6.37339H1.60803V5.70092H10.476ZM6.03957 4.36565C5.53643 4.36565 5.05747 4.32533 4.60271 4.2447C4.15117 4.16084 3.74639 4.04312 3.38839 3.89153C3.03038 3.73994 2.74011 3.56094 2.51756 3.35452L3.03522 2.92878C3.24486 3.09005 3.49966 3.22874 3.79961 3.34485C4.09956 3.45773 4.43822 3.54481 4.81558 3.60609C5.19616 3.66415 5.60416 3.69318 6.03957 3.69318C6.47821 3.69318 6.88621 3.66415 7.26357 3.60609C7.64093 3.54481 7.97958 3.45773 8.27953 3.34485C8.58271 3.22874 8.83912 3.09005 9.04877 2.92878L9.56642 3.35452C9.34388 3.56094 9.05199 3.73994 8.69076 3.89153C8.33275 4.04312 7.92798 4.16084 7.47644 4.2447C7.0249 4.32533 6.54594 4.36565 6.03957 4.36565ZM6.03957 11.0372C5.34936 11.0372 4.70269 10.9065 4.09956 10.6453C3.49643 10.3873 2.96588 10.0293 2.50788 9.57126C2.04989 9.1165 1.69027 8.58755 1.42903 7.98442C1.171 7.37807 1.04199 6.72978 1.04199 6.03957C1.04199 5.34936 1.171 4.70269 1.42903 4.09956C1.69027 3.49321 2.04989 2.96104 2.50788 2.50305C2.96588 2.04506 3.49643 1.68705 4.09956 1.42903C4.70269 1.171 5.34936 1.04199 6.03957 1.04199C6.72978 1.04199 7.37645 1.171 7.97958 1.42903C8.58594 1.68705 9.11811 2.04506 9.5761 2.50305C10.0341 2.96104 10.3921 3.49321 10.6501 4.09956C10.9114 4.70269 11.042 5.34936 11.042 6.03957C11.042 6.72978 10.9114 7.37807 10.6501 7.98442C10.3921 8.58755 10.0341 9.1165 9.5761 9.57126C9.11811 10.0293 8.58594 10.3873 7.97958 10.6453C7.37645 10.9065 6.72978 11.0372 6.03957 11.0372ZM6.03957 10.2631C6.62335 10.2631 7.17004 10.1518 7.67963 9.92927C8.18923 9.70995 8.63754 9.40838 9.02458 9.02458C9.41161 8.63754 9.71479 8.18923 9.93411 7.67963C10.1534 7.17004 10.2631 6.62335 10.2631 6.03957C10.2631 5.4558 10.1534 4.90911 9.93411 4.39952C9.71479 3.88992 9.41161 3.44161 9.02458 3.05457C8.63754 2.66754 8.18923 2.36436 7.67963 2.14504C7.17004 1.92572 6.62335 1.81606 6.03957 1.81606C5.45902 1.81606 4.91395 1.92572 4.40435 2.14504C3.89476 2.36436 3.44483 2.66754 3.05457 3.05457C2.66754 3.44161 2.36436 3.88992 2.14504 4.39952C1.92895 4.90911 1.8209 5.4558 1.8209 6.03957C1.8209 6.62335 1.92895 7.17004 2.14504 7.67963C2.36436 8.18923 2.66754 8.63754 3.05457 9.02458C3.44483 9.40838 3.89476 9.70995 4.40435 9.92927C4.91395 10.1518 5.45902 10.2631 6.03957 10.2631Z"
+    d="M8.05273 13.6309C7.64258 13.6309 7.25586 13.4902 6.89258 13.209C6.5293 12.9316 6.21094 12.541 5.9375 12.0371C5.66406 11.5332 5.44922 10.9434 5.29297 10.2676C5.13672 9.5918 5.05859 8.85742 5.05859 8.06445C5.05859 7.27148 5.13672 6.53516 5.29297 5.85547C5.44922 5.17578 5.66406 4.58398 5.9375 4.08008C6.21094 3.57617 6.52734 3.18555 6.88672 2.9082C7.25 2.62695 7.63867 2.48633 8.05273 2.48633C8.4707 2.48633 8.85938 2.62695 9.21875 2.9082C9.58203 3.18555 9.90039 3.57617 10.1738 4.08008C10.4512 4.58398 10.666 5.17578 10.8184 5.85547C10.9707 6.53516 11.0469 7.27148 11.0469 8.06445C11.0469 8.85742 10.9688 9.5918 10.8125 10.2676C10.6602 10.9434 10.4453 11.5332 10.168 12.0371C9.89453 12.541 9.57617 12.9316 9.21289 13.209C8.85352 13.4902 8.4668 13.6309 8.05273 13.6309ZM8.05273 3.24805C7.77148 3.24805 7.5 3.37695 7.23828 3.63477C6.98047 3.89258 6.75 4.24609 6.54688 4.69531C6.34766 5.14062 6.18945 5.6543 6.07227 6.23633C5.95508 6.81445 5.89648 7.42383 5.89648 8.06445C5.89648 8.70117 5.95508 9.30664 6.07227 9.88086C6.18945 10.4551 6.34766 10.9668 6.54688 11.416C6.75 11.8613 6.98047 12.2129 7.23828 12.4707C7.5 12.7324 7.77148 12.8633 8.05273 12.8633C8.33398 12.8633 8.60352 12.7324 8.86133 12.4707C9.12305 12.2129 9.35547 11.8594 9.55859 11.4102C9.76172 10.9609 9.92188 10.4492 10.0391 9.875C10.1562 9.30078 10.2148 8.69727 10.2148 8.06445C10.2148 7.42383 10.1562 6.81445 10.0391 6.23633C9.92188 5.6543 9.76172 5.14062 9.55859 4.69531C9.35547 4.24609 9.12305 3.89258 8.86133 3.63477C8.60352 3.37695 8.33398 3.24805 8.05273 3.24805ZM7.64844 2.5625H8.46875V13.5195H7.64844V2.5625ZM8.05273 10.1094C8.66602 10.1094 9.24609 10.1602 9.79297 10.2617C10.3398 10.3594 10.8301 10.5 11.2637 10.6836C11.7012 10.8672 12.0547 11.084 12.3242 11.334L11.6973 11.8496C11.4434 11.6543 11.1328 11.4883 10.7656 11.3516C10.4023 11.2109 9.99219 11.1055 9.53516 11.0352C9.07812 10.9609 8.58398 10.9238 8.05273 10.9238C7.52539 10.9238 7.03125 10.9609 6.57031 11.0352C6.11328 11.1055 5.70117 11.2109 5.33398 11.3516C4.9707 11.4883 4.66406 11.6543 4.41406 11.8496L3.78711 11.334C4.05664 11.084 4.4082 10.8672 4.8418 10.6836C5.27539 10.5 5.76562 10.3594 6.3125 10.2617C6.86328 10.1602 7.44336 10.1094 8.05273 10.1094ZM13.4258 7.64258V8.45703H2.68555V7.64258H13.4258ZM8.05273 6.02539C7.44336 6.02539 6.86328 5.97656 6.3125 5.87891C5.76562 5.77734 5.27539 5.63477 4.8418 5.45117C4.4082 5.26758 4.05664 5.05078 3.78711 4.80078L4.41406 4.28516C4.66797 4.48047 4.97656 4.64844 5.33984 4.78906C5.70312 4.92578 6.11328 5.03125 6.57031 5.10547C7.03125 5.17578 7.52539 5.21094 8.05273 5.21094C8.58398 5.21094 9.07812 5.17578 9.53516 5.10547C9.99219 5.03125 10.4023 4.92578 10.7656 4.78906C11.1328 4.64844 11.4434 4.48047 11.6973 4.28516L12.3242 4.80078C12.0547 5.05078 11.7012 5.26758 11.2637 5.45117C10.8301 5.63477 10.3398 5.77734 9.79297 5.87891C9.24609 5.97656 8.66602 6.02539 8.05273 6.02539ZM8.05273 14.1055C7.2168 14.1055 6.43359 13.9473 5.70312 13.6309C4.97266 13.3184 4.33008 12.8848 3.77539 12.3301C3.2207 11.7793 2.78516 11.1387 2.46875 10.4082C2.15625 9.67383 2 8.88867 2 8.05273C2 7.2168 2.15625 6.43359 2.46875 5.70312C2.78516 4.96875 3.2207 4.32422 3.77539 3.76953C4.33008 3.21484 4.97266 2.78125 5.70312 2.46875C6.43359 2.15625 7.2168 2 8.05273 2C8.88867 2 9.67188 2.15625 10.4023 2.46875C11.1367 2.78125 11.7812 3.21484 12.3359 3.76953C12.8906 4.32422 13.3242 4.96875 13.6367 5.70312C13.9531 6.43359 14.1113 7.2168 14.1113 8.05273C14.1113 8.88867 13.9531 9.67383 13.6367 10.4082C13.3242 11.1387 12.8906 11.7793 12.3359 12.3301C11.7812 12.8848 11.1367 13.3184 10.4023 13.6309C9.67188 13.9473 8.88867 14.1055 8.05273 14.1055ZM8.05273 13.168C8.75977 13.168 9.42188 13.0332 10.0391 12.7637C10.6562 12.498 11.1992 12.1328 11.668 11.668C12.1367 11.1992 12.5039 10.6562 12.7695 10.0391C13.0352 9.42188 13.168 8.75977 13.168 8.05273C13.168 7.3457 13.0352 6.68359 12.7695 6.06641C12.5039 5.44922 12.1367 4.90625 11.668 4.4375C11.1992 3.96875 10.6562 3.60156 10.0391 3.33594C9.42188 3.07031 8.75977 2.9375 8.05273 2.9375C7.34961 2.9375 6.68945 3.07031 6.07227 3.33594C5.45508 3.60156 4.91016 3.96875 4.4375 4.4375C3.96875 4.90625 3.60156 5.44922 3.33594 6.06641C3.07422 6.68359 2.94336 7.3457 2.94336 8.05273C2.94336 8.75977 3.07422 9.42188 3.33594 10.0391C3.60156 10.6562 3.96875 11.1992 4.4375 11.668C4.91016 12.1328 5.45508 12.498 6.07227 12.7637C6.68945 13.0332 7.34961 13.168 8.05273 13.168Z"
     fill="currentColor" />
 </svg>
\ No newline at end of file
diff --git a/components/AutoExpandTextArea.vue b/components/AutoExpandTextArea.vue
index 8c3afd73..894459cc 100644
--- a/components/AutoExpandTextArea.vue
+++ b/components/AutoExpandTextArea.vue
@@ -3,7 +3,7 @@
     ref="textareaRef"
     v-model="inputValue"
     rows="1"
-    :class="classNames(props.class, 'field-sizing-content scrollbar-hide wrap-anywhere')"
+    :class="classNames(props.class, 'field-sizing-content scrollbar-hide wrap-anywhere text-text-primary')"
     @input="onInput"
     @paste="emit('paste', $event)"
   />
diff --git a/components/Checkbox.vue b/components/Checkbox.vue
index 8272de46..cdbc6d0c 100644
--- a/components/Checkbox.vue
+++ b/components/Checkbox.vue
@@ -6,8 +6,8 @@
     <div
       class="h-[15px] w-[15px] rounded-[3px] cursor-pointer grow-0 shrink-0"
       :class="classNames({
-        'bg-[#24B960] shadow-[0px_1px_2px_0px_#0E6B33,0px_0px_0px_1px_#24B960]': checked,
-        'bg-bg-component shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]': !checked,
+        'bg-accent-primary shadow-[0px_1px_2px_0px_var(--color-accent-primary-shadow),0px_0px_0px_1px_var(--color-accent-primary)]': checked,
+        'bg-bg-component shadow-[0px_0px_0px_1px_var(--color-shadow-medium),0px_1px_2px_0px_var(--color-shadow-strong)]': !checked,
       }, props.class)"
     >
       <IconTick v-if="checked" />
diff --git a/components/ConfirmPanel.vue b/components/ConfirmPanel.vue
index abc151fe..2e297cbb 100644
--- a/components/ConfirmPanel.vue
+++ b/components/ConfirmPanel.vue
@@ -13,7 +13,7 @@ const emit = defineEmits(['cancel', 'ok'])
 </script>
 
 <template>
-  <div class="bg-white py-4 px-6 rounded-md w-[340px] max-w-full flex flex-col gap-2 text-black text-xs">
+  <div class="bg-bg-primary py-4 px-6 rounded-md w-[340px] max-w-full flex flex-col gap-2 text-text-primary text-xs">
     <div class="font-bold text-base">
       <slot name="title">
         {{ title }}
diff --git a/components/IconSelector.vue b/components/IconSelector.vue
index 91665855..b9a2dc40 100644
--- a/components/IconSelector.vue
+++ b/components/IconSelector.vue
@@ -61,8 +61,8 @@
           <div
             v-for="(option, index) in options"
             :key="index"
-            class="p-2 cursor-pointer hover:bg-[#EAECEF] transition-colors flex items-center gap-2 rounded-sm"
-            :class="{ 'bg-[#DFE1E5]': isSelected(option), 'opacity-50 pointer-events-none': option.disabled }"
+            class="p-2 cursor-pointer hover:bg-bg-hover transition-colors flex items-center gap-2 rounded-sm"
+            :class="{ 'bg-bg-selection': isSelected(option), 'opacity-50 pointer-events-none': option.disabled }"
             @click="selectOption(option)"
           >
             <!-- Option Icon -->
@@ -81,7 +81,7 @@
           </div>
           <div
             v-if="options.length === 0"
-            class="p-2 text-gray-500"
+            class="p-2 text-text-tertiary"
           >
             {{ props.emptyPlaceholder }}
           </div>
diff --git a/components/Input.vue b/components/Input.vue
index cd5d08b8..32830d96 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -7,16 +7,20 @@
       :type="type"
       :placeholder="placeholder"
       :class="classNames(
-        'relative focus:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)] p-2 outline-none w-full',
+        'relative rounded-[6px] shadow-02 p-2 outline-none w-full focus:shadow-[0px_0px_0px_1px_var(--color-border-accent)] bg-bg-component',
         props.class,
         props.disabled ? 'opacity-50' : '',
-        props.error ? 'shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48] focus:shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48]' : '',
-        isOverLimit ? 'shadow-[0px_0px_0px_1px_#E53232] focus:shadow-[0px_0px_0px_1px_#E53232]' : '',
+        props.error
+          ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+          : '',
+        isOverLimit
+          ? 'shadow-[0px_0px_0px_1px_var(--color-warning)] focus:shadow-[0px_0px_0px_1px_var(--color-warning)]'
+          : '',
       )"
     >
     <div
       v-if="isOverLimit"
-      class="mt-2 text-xs leading-4 text-[#E53232] self-start"
+      class="mt-2 text-xs leading-4 text-danger self-start"
     >
       {{ $t('errors.max_characters_error', { count: maxlength }) }}
     </div>
diff --git a/components/Loading.vue b/components/Loading.vue
index e093241b..8e0e3a39 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -16,7 +16,7 @@
     class="shrink-0 grow-0"
   >
     <IconLoadingDone
-      class="text-[#60C959]"
+      class="text-success"
       :style="{ width: size + 'px', height: size + 'px' }"
     />
   </div>
@@ -56,13 +56,13 @@ div.spinner div {
   --rotate: calc(360deg / 8 * -1);
   width: 10%;
   height: 26%;
-  background: var(--bar-color, #222);
+  background: var(--bar-color, var(--color-loading-track));
   position: absolute;
   left: 48%;
   top: 36%;
   opacity: 0;
   border-radius: 50px;
-  box-shadow: 0 0 1px rgba(0,0,0,0.2);
+  box-shadow: 0 0 1px var(--color-shadow-ambient);
   animation: fade var(--duration) linear infinite;
 }
 
diff --git a/components/Logo.vue b/components/Logo.vue
index f53cd090..10e1ae8f 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-1 text-[#1F2326]">
+  <div class="flex items-center gap-1 text-text-primary">
     <svg
       width="513"
       height="513"
diff --git a/components/MarkdownViewer.vue b/components/MarkdownViewer.vue
index 8f676205..d919525d 100644
--- a/components/MarkdownViewer.vue
+++ b/components/MarkdownViewer.vue
@@ -50,7 +50,7 @@ const inlineDirective: DirectiveConfig = {
       const url = token.attrs?.url
       const icon = token.attrs?.icon
       const iconHtml = icon ? `<span class="inline-block mr-1" style="vertical-align: -3px;">${IconMDLink}</span>` : ''
-      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-blue-600 hover:text-blue-500">${iconHtml}${text}</a>`
+      return `<a target="_blank" href="${url}" title="${text}" rel="noopener" class="text-text-link hover:text-link-hover">${iconHtml}${text}</a>`
     }
     else if (token.meta.name === 'icon') {
       const iconName = token.text as IconName
@@ -173,7 +173,7 @@ renderer.link = ({ href, title, text }) => {
   anchor.textContent = text
   anchor.target = '_blank'
   anchor.rel = 'noopener noreferrer'
-  anchor.className = 'text-black hover:text-gray-700 underline'
+  anchor.className = 'text-text-primary hover:text-text-primary/80 underline'
   return anchor.outerHTML
 }
 
@@ -246,7 +246,7 @@ watch(() => props.text, async () => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #e4e4e7;
+      background: var(--color-scroll-thumb);
       border-radius: 3px;
     }
   }
@@ -259,8 +259,8 @@ watch(() => props.text, async () => {
     font-weight: 600;
   }
   pre {
-    color: var(--color-gray-300);
-    background-color: black;
+    color: var(--color-text-tertiary);
+    background-color: var(--color-bg-overlay-contrast);
     margin-bottom: 8px;
     margin-top: 8px;
     padding: 8px;
@@ -296,7 +296,7 @@ watch(() => props.text, async () => {
   }
   hr {
     margin: 8px 0;
-    border-color: #a7a7a7;
+    border-color: var(--color-border-strong);
   }
   strong {
     font-weight: 600;
@@ -336,7 +336,7 @@ watch(() => props.text, async () => {
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #9e9e9e;
+      background: var(--color-scroll-thumb);
       border-radius: 5px;
     }
 
@@ -350,7 +350,7 @@ watch(() => props.text, async () => {
   table {
     td {
       padding: 4px;
-      border: 1px solid var(--color-gray-300);
+      border: 1px solid var(--color-border-strong);
     }
   }
 }
diff --git a/components/Modal.vue b/components/Modal.vue
index 1c159abb..cb339188 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -13,8 +13,8 @@
       <slot name="mask">
         <div
           v-if="!noMask"
-          class="mask absolute inset-0"
-          :class="classNames('bg-[#0000008b]', maskClass, fadeInOpacityAnimation)"
+          class="mask absolute inset-0 bg-overlay-scrim"
+          :class="classNames(maskClass, fadeInOpacityAnimation)"
         />
       </slot>
       <div
diff --git a/components/ModelLogo.vue b/components/ModelLogo.vue
index 7ea2d34e..53ad5dcb 100644
--- a/components/ModelLogo.vue
+++ b/components/ModelLogo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-[#0000000D] bg-white', props.class)">
+  <div :class="classNames('flex items-center justify-center w-4 h-4 rounded-full border border-border-hairline bg-white', props.class)">
     <component
       :is="iconComponent"
       class="max-w-3/4 max-h-3/4 w-3/4"
diff --git a/components/ModelSelector.vue b/components/ModelSelector.vue
index a9f67d76..b975fd7f 100644
--- a/components/ModelSelector.vue
+++ b/components/ModelSelector.vue
@@ -12,7 +12,7 @@
     >
       <Button
         variant="secondary"
-        class="flex justify-between gap-[6px] items-center cursor-pointer text-[13px] font-medium py-1 px-[10px] text-left leading-4 min-h-8"
+        class="flex justify-between gap-[6px] items-center cursor-pointer text-[13px] font-medium py-1 px-[10px] text-left leading-4 min-h-8 text-text-primary"
       >
         <IconOllamaRedirect class="w-4 h-4 shrink-0" />
         {{ t('settings.models.add_model_to_start') }}
@@ -25,7 +25,7 @@
       :placeholder="t('settings.models.no_model')"
       class="text-xs max-w-full"
       :disabled="modelList.length === 0"
-      :dropdownClass="classNames('text-xs text-black w-52', dropdownClass)"
+      :dropdownClass="classNames('text-xs text-text-primary w-52', dropdownClass)"
       :containerClass="classNames('max-w-full', containerClass)"
       :dropdownAlign="dropdownAlign"
       :triggerStyle="props.triggerStyle"
@@ -33,26 +33,35 @@
       <template #button="{ option }">
         <div v-if="!isGhostBtn">
           <div
-            v-if="option"
+            v-if="option && option.type === 'option'"
             class="flex items-center gap-[6px] min-w-0"
           >
             <ModelLogo
-              :modelId="option.model.model"
+              :modelId="option.model.id"
               class="shrink-0 grow-0"
             />
             <span class="text-ellipsis overflow-hidden whitespace-nowrap">
               {{ option.label }}
             </span>
           </div>
+          <div v-else-if="modelListUpdating">
+            <Loading :size="12" />
+          </div>
           <div v-else>
             ⚠️ No model
           </div>
         </div>
         <div v-else>
           <div
-            class="cursor-pointer text-[13px] text-[#5B5B5B] font-medium px-1 leading-5 flex flex-row gap-1 items-center justify-center"
+            class="cursor-pointer text-[13px] text-text-secondary font-medium px-1 leading-5 flex flex-row gap-1 items-center justify-center"
           >
-            <span class="text-ellipsis overflow-hidden whitespace-nowrap">
+            <div v-if="modelListUpdating">
+              <Loading :size="12" />
+            </div>
+            <span
+              v-else
+              class="text-ellipsis overflow-hidden whitespace-nowrap"
+            >
               {{ option?.label || t('settings.models.no_model') }}
             </span>
             <IconExpand class="shrink-0" />
@@ -62,45 +71,28 @@
       <template #option="{ option }">
         <div class="flex items-center gap-2 justify-between w-full">
           <div
-            v-if="showDetails"
+            v-if="option.type === 'option'"
             class="flex items-center gap-[6px]"
           >
             <ModelLogo
-              :modelId="option.model.model"
+              :modelId="option.model.id"
               class="shrink-0 grow-0"
             />
-            <div>
-              <div class="text-left wrap-anywhere">
-                {{ option.label }}
-              </div>
-              <div
-                v-if="option.model.size || option.model.size_vram"
-                class="text-gray-500 text-[8px] flex items-center font-light"
-              >
-                <div v-if="option.model.size_vram">
-                  {{ formatSize(option.model.size_vram) }} (vram)
-                </div>
-                <div v-else-if="option.model.size">
-                  {{ formatSize(option.model.size) }}
-                </div>
-              </div>
+            <div class="text-left wrap-anywhere">
+              {{ option.label }}
             </div>
           </div>
-          <div v-else>
-            <div class="flex items-center gap-[6px]">
-              <ModelLogo
-                :modelId="option.model.model"
-                class="shrink-0 grow-0"
-              />
-              <div class="text-left wrap-anywhere">
-                {{ option.label }}
-              </div>
+          <div
+            v-else-if="option.type === 'header'"
+            class="flex items-center gap-[6px]"
+          >
+            <div class="text-left wrap-anywhere font-medium">
+              {{ option.label }}
             </div>
           </div>
-          <IconDelete
-            v-if="allowDelete"
-            class="w-3 h-3 hover:text-red-400 cursor-pointer shrink-0 grow-0"
-            @click="onClickDelete(option.model.model)"
+          <ExhaustiveError
+            v-else
+            :value="option"
           />
         </div>
       </template>
@@ -108,13 +100,13 @@
         v-if="showDiscoverMore"
         #bottom
       >
-        <div class="text-gray-500 text-xs">
+        <div class="text-text-tertiary text-xs">
           <Divider />
           <a
             :href="OLLAMA_SEARCH_URL"
             target="_blank"
             rel="noopener noreferrer"
-            class="px-3 flex items-center gap-2 cursor-pointer text-black hover:bg-[#EAECEF] leading-4 py-1 min-h-8"
+            class="px-3 flex items-center gap-2 cursor-pointer text-text-primary hover:bg-bg-hover leading-4 py-1 min-h-8"
           >
             <IconRedirect class="shrink-0" />
             <Text
@@ -129,25 +121,26 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang="tsx">
 import { computed, onBeforeUnmount, onMounted, toRefs, watch } from 'vue'
 
-import IconDelete from '@/assets/icons/delete.svg?component'
 import IconExpand from '@/assets/icons/model-expand.svg?component'
 import IconOllamaRedirect from '@/assets/icons/ollama-redirect.svg?component'
 import IconRedirect from '@/assets/icons/redirect.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
 import { OLLAMA_SEARCH_URL } from '@/utils/constants'
-import { formatSize } from '@/utils/formatter'
 import { useI18n } from '@/utils/i18n'
+import { LLMEndpointType } from '@/utils/llm/models'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { registerSidepanelRpcEvent } from '@/utils/rpc/sidepanel-fns'
 import { only } from '@/utils/runtime'
 import { showSettings } from '@/utils/settings'
 import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
+import ExhaustiveError from './ExhaustiveError.vue'
+import Loading from './Loading.vue'
 import Selector from './Selector.vue'
 import Button from './ui/Button.vue'
 import Divider from './ui/Divider.vue'
@@ -155,9 +148,7 @@ import Text from './ui/Text.vue'
 
 const props = withDefaults(defineProps<{
   modelType?: 'chat' | 'translation'
-  showDetails?: boolean
   showDiscoverMore?: boolean
-  allowDelete?: boolean
   dropdownAlign?: 'left' | 'center' | 'right' | 'stretch' | undefined
   containerClass?: string
   dropdownClass?: string
@@ -169,67 +160,97 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useI18n()
-const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())
-const { updateModelList: updateOllamaModelList } = useOllamaStatusStore()
+const { modelList: composedModelList, modelListUpdating: storeModelListUpdating } = toRefs(useLLMBackendStatusStore())
+const { updateModelList } = useLLMBackendStatusStore()
 
 only(['sidepanel'], () => {
-  const removeListener = registerSidepanelRpcEvent('updateModelList', async () => await updateOllamaModelList())
+  const removeListener = registerSidepanelRpcEvent('updateModelList', async () => await updateModelList())
   onBeforeUnmount(() => removeListener())
 })
 
+defineExpose({
+  updateModelList,
+})
+
+const userConfig = await getUserConfig()
+const ollamaBaseUrl = userConfig.llm.backends.ollama.baseUrl.toRef()
+const lmStudioBaseUrl = userConfig.llm.backends.lmStudio.baseUrl.toRef()
+const commonModel = userConfig.llm.model.toRef()
+const translationModel = userConfig.translation.model.toRef()
+const endpointType = userConfig.llm.endpointType.toRef()
+const translationEndpointType = userConfig.translation.endpointType.toRef()
 const isGhostBtn = computed(() => props.triggerStyle === 'ghost')
 
 const modelList = computed(() => {
-  if (endpointType.value === 'ollama') {
-    return ollamaModelList.value
+  if (endpointType.value !== 'web-llm') {
+    return composedModelList.value
   }
   else {
     return SUPPORTED_MODELS.map((model) => ({
-      name: model.name,
-      model: model.modelId,
+      name: model.name as string,
+      model: model.modelId as string,
+      backend: 'web-llm' as LLMEndpointType,
     }))
   }
 })
 
-const updateModelList = async () => {
-  if (endpointType.value === 'ollama') {
-    await updateOllamaModelList()
+const modelListUpdating = computed(() => {
+  // Never show loading for web-llm as it uses static models
+  if (endpointType.value === 'web-llm') {
+    return false
   }
-}
-
-defineExpose({
-  updateModelList,
+  return storeModelListUpdating.value
 })
 
-const userConfig = await getUserConfig()
-const baseUrl = userConfig.llm.baseUrl.toRef()
-const commonModel = userConfig.llm.model.toRef()
-const translationModel = userConfig.translation.model.toRef()
+const modelOptions = computed(() => {
+  const ollamaModels = modelList.value.filter((model) => model.backend === 'ollama')
+  const lmStudioModels = modelList.value.filter((model) => model.backend === 'lm-studio')
+  const webllmModels = modelList.value.filter((model) => model.backend === 'web-llm')
+
+  const makeModelOptions = (model: typeof modelList.value[number]) => ({ type: 'option' as const, id: `${model.backend}#${model.model}`, label: model.name, model: { backend: model.backend, id: model.model } })
+  const makeHeader = (label: string) => ({ type: 'header' as const, id: `header-${label}`, label, selectable: false })
+
+  if (webllmModels.length > 0) {
+    return webllmModels.map((model) => makeModelOptions(model))
+  }
+  else {
+    const options = []
+    if (ollamaModels.length) {
+      options.push(
+        makeHeader(t('settings.models.ollama_models', { count: ollamaModels.length })),
+        ...ollamaModels.map((model) => makeModelOptions(model)))
+    }
+    if (lmStudioModels.length) {
+      options.push(
+        makeHeader(t('settings.models.lmstudio_models', { count: lmStudioModels.length })),
+        ...lmStudioModels.map((model) => makeModelOptions(model)),
+      )
+    }
+    return options
+  }
+})
 const selectedModel = computed({
   get() {
-    if (props.modelType === 'chat' || translationModel.value === undefined) return commonModel.value
-    else return translationModel.value
+    if (props.modelType === 'chat' || translationModel.value === undefined) {
+      return modelOptions.value.find((opt) => opt.type === 'option' && opt.model.backend === endpointType.value && opt.model.id === commonModel.value)?.id
+    }
+    else {
+      return modelOptions.value.find((opt) => opt.type === 'option' && opt.model.backend === translationEndpointType.value && opt.model.id === translationModel.value)?.id
+    }
   },
   set(value) {
-    if (props.modelType === 'chat') commonModel.value = value
-    else translationModel.value = value
+    const modelInfo = modelOptions.value.find((opt) => opt.id === value)
+    if (!modelInfo || modelInfo.type === 'header') return
+    if (props.modelType === 'chat') {
+      commonModel.value = modelInfo.model.id
+      endpointType.value = modelInfo.model.backend as LLMEndpointType
+    }
+    else {
+      translationModel.value = modelInfo.model.id
+      translationEndpointType.value = modelInfo.model.backend as LLMEndpointType
+    }
   },
 })
-const endpointType = userConfig.llm.endpointType.toRef()
-
-const modelOptions = computed(() => {
-  return modelList.value.map((model) => ({
-    id: model.model,
-    label: model.name,
-    value: model.model,
-    model: { size: undefined, size_vram: undefined, ...model },
-  }))
-})
-
-const onClickDelete = async (model: string) => {
-  await props.onDeleteModel?.(model)
-  await updateModelList()
-}
 
 const onClick = () => {
   if (modelList.value.length === 0) {
@@ -237,23 +258,42 @@ const onClick = () => {
   }
 }
 
-watch(modelList, (modelList) => {
+watch([modelList, modelListUpdating], ([modelList, updating]) => {
+  if (updating) return
   if (modelList.length === 0) {
     commonModel.value = undefined
     translationModel.value = undefined
     return
   }
-  const newTranslationModel = modelList.find((m) => m.model === translationModel.value) ?? modelList[0] ?? undefined
-  const newCommonModel = modelList.find((m) => m.model === commonModel.value) ?? modelList[0] ?? undefined
-  translationModel.value = newTranslationModel.model
-  commonModel.value = newCommonModel.model
+
+  // Only update models if current selection is not in the list
+  // Don't override endpointType to prevent infinite loops
+  const currentCommonModel = modelList.find((m) => m.model === commonModel.value)
+  const currentTranslationModel = modelList.find((m) => m.model === translationModel.value)
+
+  if (!currentTranslationModel && modelList.length > 0) {
+    const newTranslationModel = modelList[0]
+    translationModel.value = newTranslationModel.model
+    translationEndpointType.value = newTranslationModel.backend
+  }
+
+  if (!currentCommonModel && modelList.length > 0) {
+    const newCommonModel = modelList[0]
+    commonModel.value = newCommonModel.model
+    // Don't set endpointType here - it should be set explicitly by user actions
+    // Setting it here can cause infinite loops when switching between backends
+  }
 })
 
-watch([baseUrl, endpointType, selectedModel], async () => {
+watch([endpointType, selectedModel], async (newVal) => {
+  // Skip update for web-llm as it uses static SUPPORTED_MODELS
+  if (newVal[0] === 'web-llm') return
   updateModelList()
 })
 
-onMounted(async () => {
+watch([ollamaBaseUrl, lmStudioBaseUrl], async () => updateModelList())
+
+onMounted(() => {
   updateModelList()
 })
 </script>
diff --git a/components/ProgressBar.vue b/components/ProgressBar.vue
index c702ad08..80fe5d8c 100644
--- a/components/ProgressBar.vue
+++ b/components/ProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full h-2 bg-gray-200 rounded-md">
+  <div class="w-full h-2 bg-border-light rounded-md">
     <div
-      class="h-full bg-[#24B960] rounded-md transition-all"
+      class="h-full bg-accent-primary rounded-md transition-all"
       :style="{ width: `${(progress) * 100}%` }"
     />
   </div>
diff --git a/components/RadioGroup.vue b/components/RadioGroup.vue
index a86268b0..f97af031 100644
--- a/components/RadioGroup.vue
+++ b/components/RadioGroup.vue
@@ -10,13 +10,13 @@
         <div
           class="h-[15px] w-[15px] rounded-full cursor-pointer grow-0 shrink-0 flex items-center justify-center mt-0.5"
           :class="classNames({
-            'bg-[#24B960] shadow-[0px_1px_2px_0px_#0E6B33,0px_0px_0px_1px_#24B960]': selectedValue === option.value,
-            'bg-bg-component shadow-[0px_0px_0px_1px_#00000014,0px_1px_2px_0px_#0000001F]': selectedValue !== option.value,
+            'bg-accent-primary shadow-[0px_1px_2px_0px_var(--color-accent-primary-shadow),0px_0px_0px_1px_var(--color-accent-primary)]': selectedValue === option.value,
+            'bg-bg-component shadow-[0px_0px_0px_1px_var(--color-shadow-medium),0px_1px_2px_0px_var(--color-shadow-strong)]': selectedValue !== option.value,
           }, props.class)"
         >
           <div
             v-if="selectedValue === option.value"
-            class="h-[6px] w-[6px] rounded-full bg-white"
+            class="h-[6px] w-[6px] rounded-full bg-bg-primary"
           />
         </div>
         <div class="flex flex-col">
diff --git a/components/RootProvider.vue b/components/RootProvider.vue
index a7fe2dd2..18302747 100644
--- a/components/RootProvider.vue
+++ b/components/RootProvider.vue
@@ -3,12 +3,21 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
+import { useTheme } from '@/composables/theme'
 import { useInjectContext } from '@/composables/useInjectContext'
 
 const props = defineProps<{
   rootElement: HTMLElement
 }>()
 
+const { initializeTheme } = useTheme()
+
 useInjectContext('selectorScrollListenElement').provide([props.rootElement])
 useInjectContext('rootElement').provide(props.rootElement)
+
+onMounted(async () => {
+  await initializeTheme()
+})
 </script>
diff --git a/components/ScrollContainer.vue b/components/ScrollContainer.vue
index b2ff7651..66f3a160 100644
--- a/components/ScrollContainer.vue
+++ b/components/ScrollContainer.vue
@@ -60,7 +60,7 @@ type ArrivalShadowInfo = Color | boolean | {
 }
 
 const DEFAULT_SHADOW_SIZE = 16
-const DEFAULT_ARRIVAL_SHADOW_COLOR = '#92929225'
+const DEFAULT_ARRIVAL_SHADOW_COLOR = 'var(--color-arrival-shadow)'
 
 const props = withDefaults(
   defineProps<{
diff --git a/components/ScrollTarget.vue b/components/ScrollTarget.vue
index 9dfe254a..3878f5da 100644
--- a/components/ScrollTarget.vue
+++ b/components/ScrollTarget.vue
@@ -2,7 +2,7 @@
   <div
     ref="targetRef"
     :class="{
-      'outline-2 outline-gray-600 outline-offset-4 outline-dashed rounded-md': highlighting,
+      'outline-2 outline-border-strong outline-offset-4 outline-dashed rounded-md': highlighting,
     }"
   >
     <slot />
diff --git a/components/Selector.vue b/components/Selector.vue
index 2fbfc9dd..9aea8a5b 100644
--- a/components/Selector.vue
+++ b/components/Selector.vue
@@ -6,7 +6,7 @@
     <div
       v-if="isGhostBtn"
       ref="selectorRef"
-      :class="['flex justify-between items-center cursor-pointer text-[13px] font-medium py-0 h-8', containerClass]"
+      :class="classNames('flex justify-between items-center cursor-pointer text-[13px] font-medium py-0 h-8', containerClass)"
       :disabled="disabled"
       @click="toggleDropdown"
     >
@@ -86,7 +86,7 @@
         v-if="isOpen"
         ref="dropdownRef"
         data-nativemind-selector-dropdown
-        class="fixed overflow-hidden z-10 bg-bg-component rounded-lg shadow-01"
+        class="fixed overflow-hidden z-10 bg-bg-primary text-text-primary rounded-lg shadow-01"
         :style="{ top: `${dropdownPos.y}px`, left: `${dropdownPos.x}px`, width: dropdownPos.width ? `${dropdownPos.width}px` : undefined, zIndex: String(zIndex) }"
         :class="dropdownClass"
       >
@@ -100,9 +100,9 @@
           <div
             v-for="(option, index) in options"
             :key="index"
-            class="p-2 cursor-pointer hover:bg-[#EAECEF] transition-colors flex items-center rounded-sm"
-            :class="{ 'bg-[#DFE1E5]': isSelected(option), 'opacity-50 pointer-events-none': option.disabled }"
-            @click="selectOption(option)"
+            class="p-2 cursor-pointer transition-colors flex items-center rounded-sm"
+            :class="{ 'bg-bg-selection': isSelected(option), 'opacity-50 pointer-events-none': option.disabled,'hover:bg-bg-hover cursor-pointer': option.selectable !== false }"
+            @click="option.selectable !== false && selectOption(option)"
           >
             <slot
               name="option"
@@ -113,7 +113,7 @@
           </div>
           <div
             v-if="options.length === 0"
-            class="p-2 text-gray-500"
+            class="p-2 text-text-tertiary"
           >
             {{ props.emptyPlaceholder }}
           </div>
@@ -126,12 +126,13 @@
   </div>
 </template>
 
-<script setup lang="tsx" generic="Id extends string, OptionValue, Option extends { id: Id; value?: OptionValue; label: string | Component, textLabel?: string, disabled?: boolean }">
+<script setup lang="tsx" generic="Id extends string, OptionValue, Option extends { id: Id; value?: OptionValue; label: string | Component, textLabel?: string, disabled?: boolean, selectable?: boolean | undefined }">
 import { useElementBounding, useEventListener, useVModel } from '@vueuse/core'
 import { Component, computed, FunctionalComponent, Ref, ref, watch, watchEffect } from 'vue'
 
 import { useInjectContext } from '@/composables/useInjectContext'
 import { useZIndex } from '@/composables/useZIndex'
+import { classNames } from '@/utils/vue/utils'
 
 import ScrollContainer from './ScrollContainer.vue'
 import Button from './ui/Button.vue'
diff --git a/components/StatusBadge.vue b/components/StatusBadge.vue
index 562dc2e0..f00c7822 100644
--- a/components/StatusBadge.vue
+++ b/components/StatusBadge.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex items-center">
-    <div class="bg-[#FAFAFA] flex gap-[5px] border border-[#E4E4E7] h-5 items-center px-[6px] rounded-md">
+    <div class="bg-bg-tertiary flex gap-[5px] border border-border-strong h-5 items-center px-[6px] rounded-md">
       <div
         class="w-2 h-2 rounded-xs border"
         :class="{
-          'bg-[#10B981] border-[#18181B3D]': status === 'success',
-          'bg-yellow-500 border-[#18181B3D]': status === 'warning',
-          'bg-red-500 border-[#18181B3D]': status === 'error',
+          'bg-success border-border-overlay': status === 'success',
+          'bg-warning border-border-overlay': status === 'warning',
+          'bg-danger border-border-overlay': status === 'error',
         }"
       />
       <Text
diff --git a/components/Textarea.vue b/components/Textarea.vue
index f50b299a..41a389d8 100644
--- a/components/Textarea.vue
+++ b/components/Textarea.vue
@@ -1,8 +1,10 @@
 <template>
   <div
     :class="classNames(
-      'overflow-hidden relative focus-within:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)]',
-      props.error ? 'shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48] focus-within:shadow-[0px_0px_0px_3px_#E11D4826,0px_0px_0px_1px_#E11D48]' : '',
+      'overflow-hidden relative rounded-[6px] shadow-02 focus-within:shadow-[0px_0px_0px_1px_var(--color-border-accent)] bg-bg-component',
+      props.error
+        ? 'shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)] focus-within:shadow-[0px_0px_0px_3px_var(--color-border-critical-soft),0px_0px_0px_1px_var(--color-border-critical)]'
+        : '',
       props.outerClass,
     )"
   >
@@ -11,16 +13,16 @@
       v-model="inputValue"
       :maxlength="maxLength"
       :style="{ height: textareaHeight + 'px' }"
-      class="w-full text-xs leading-4 px-2 pt-1.5 pb-[28px] text-[#6E757C] focus:text-black resize-none"
+      class="w-full text-xs leading-4 px-2 pt-1.5 pb-[28px] text-text-tertiary focus:text-text-primary resize-none"
       :class="classNames('outline-none', props.class)"
     />
 
     <!-- Bottom controls -->
-    <div class="absolute bottom-0 left-0 right-0 px-2 py-1.5 flex items-center justify-end gap-1.5 bg-white">
+    <div class="absolute bottom-0 left-0 right-0 px-2 py-1.5 flex items-center justify-end gap-1.5">
       <!-- Reset to default button -->
       <button
         v-if="showResetButton"
-        class="text-[11px] leading-[16px] text-[#0D80F2] hover:text-[#0B6BBF] font-normal cursor-pointer flex items-center gap-1"
+        class="text-[11px] leading-[16px] text-text-link hover:text-text-link-hover font-normal cursor-pointer flex items-center gap-1"
         @click="resetToDefault"
       >
         {{ t('textarea.reset_to_default') }}
diff --git a/components/ThemeSelector.vue b/components/ThemeSelector.vue
new file mode 100644
index 00000000..7478975b
--- /dev/null
+++ b/components/ThemeSelector.vue
@@ -0,0 +1,29 @@
+<template>
+  <Selector
+    v-model="themeMode"
+    class="grow"
+    containerClass="w-full"
+    dropdownClass="text-xs text-text-primary w-52"
+    dropdownAlign="left"
+    :options="options"
+  />
+</template>
+
+<script setup lang="ts">
+
+import { computed } from 'vue'
+
+import { useTheme } from '@/composables/theme'
+import { useI18n } from '@/utils/i18n/index'
+
+import Selector from './Selector.vue'
+
+const { t } = useI18n()
+const { themeMode } = useTheme()
+
+const options = computed(() => [
+  { id: 'light' as const, label: t('settings.interface.theme_light') },
+  { id: 'dark' as const, label: t('settings.interface.theme_dark') },
+  { id: 'system' as const, label: t('settings.interface.theme_system') },
+])
+</script>
diff --git a/components/ToastGroup.vue b/components/ToastGroup.vue
index 59b02ab8..2e978c6f 100644
--- a/components/ToastGroup.vue
+++ b/components/ToastGroup.vue
@@ -7,14 +7,15 @@
     <div
       v-for="toast in toasts"
       :key="toast.id"
-      class="max-w-80 bg-white text-black shadow-md rounded-md p-3 transition-all duration-300 text-xs flex items-center gap-2 justify-between"
+      class="max-w-80 bg-bg-primary text-text-primary shadow-02 rounded-md p-3 transition-all duration-300 text-xs flex items-center gap-2 justify-between font-sans"
     >
       <div class="flex items-center gap-2">
         <div>
           <IconWarning
             v-if="toast.options.type === 'error'"
-            class="w-4 h-4 text-red-500"
+            class="w-4 h-4 text-danger"
           />
+          <Logo v-else />
         </div>
         <span v-if="!toast.options.isHTML">{{ toast.message }}</span>
         <div
@@ -26,7 +27,7 @@
         class="cursor-pointer"
         @click="toasts = toasts.filter(t => t.id !== toast.id)"
       >
-        <IconClose class="w-5 h-5 rounded-full hover:bg-gray-100 p-1 text-gray-700" />
+        <IconClose class="w-5 h-5 rounded-full hover:bg-bg-hover p-1 text-text-secondary" />
       </button>
     </div>
   </div>
@@ -38,6 +39,8 @@ import { ref } from 'vue'
 import IconClose from '@/assets/icons/close.svg?component'
 import IconWarning from '@/assets/icons/warning.svg?component'
 
+import Logo from './Logo.vue'
+
 export type ToastOptions = {
   duration?: number
   isHTML?: boolean
diff --git a/components/UILanguageSelector.vue b/components/UILanguageSelector.vue
index c42e9a00..8a541691 100644
--- a/components/UILanguageSelector.vue
+++ b/components/UILanguageSelector.vue
@@ -3,7 +3,7 @@
     v-model="locale"
     class="grow"
     containerClass="w-full"
-    dropdownClass="text-xs text-black w-52"
+    dropdownClass="text-xs text-text-primary w-52"
     dropdownAlign="left"
     :options="options"
   />
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index b9914438..f78670d0 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -29,13 +29,19 @@ const emit = defineEmits<{
 }>()
 
 const classMapping = {
-  primary: classNames('bg-[#24B960] text-white shadow-[0px_0px_0px_1px_#24B960,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset]', props.hoverStyle ? 'hover:bg-[#089641]' : ''),
-  secondary: classNames('bg-white shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)]', props.hoverStyle ? 'hover:bg-[#EAECEF]' : ''),
+  primary: classNames(
+    'bg-accent-primary text-white shadow-[0px_0px_0px_1px_var(--color-accent-primary),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset]',
+    props.hoverStyle ? 'hover:bg-accent-primary-hover' : '',
+  ),
+  secondary: classNames(
+    'bg-bg-clickable text-text-primary shadow-02',
+    props.hoverStyle ? 'hover:bg-bg-hover' : '',
+  ),
 }
 
 const disableClassMapping = {
-  primary: `shadow-[0px_0px_0px_1px_#A0A0A0,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset] pointer-event-none bg-[#8A8A8A] text-text-disabled`,
-  secondary: `shadow-[0px_0px_0px_1px_#A0A0A0,0px_1px_2px_0px_#00000066,0px_0.75px_0px_0px_#FFFFFF33_inset] pointer-event-none bg-[#CFD4D9] text-text-disabled`,
+  primary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-accent-primary-disabled text-text-disabled`,
+  secondary: `shadow-[0px_0px_0px_1px_var(--color-border-disabled),0px_1px_2px_0px_var(--color-shadow-contrast),0px_0.75px_0px_0px_var(--color-shadow-inset-highlight)_inset] pointer-event-none bg-color-surface-disabled text-text-disabled`,
 }
 
 const buttonClass = computed(() => `rounded-md cursor-pointer ${classMapping[props.variant]} ${props.disabled ? disableClassMapping[props.variant] : ''}`)
diff --git a/components/ui/Divider.vue b/components/ui/Divider.vue
index e8922073..186f1a55 100644
--- a/components/ui/Divider.vue
+++ b/components/ui/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('w-full h-px bg-[#0000001A]', props.class)" />
+  <div :class="classNames('w-full h-px bg-divider', props.class)" />
 </template>
 
 <script setup lang="ts">
diff --git a/components/ui/Text.vue b/components/ui/Text.vue
index 56704f02..1a34add7 100644
--- a/components/ui/Text.vue
+++ b/components/ui/Text.vue
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<{
 const colorMapping: Record<Color, string> = {
   primary: 'text-text-primary',
   secondary: 'text-text-secondary',
-  disabled: 'text-[#AEB5BD]',
+  disabled: 'text-text-disabled',
   tertiary: 'text-text-tertiary',
   placeholder: 'text-text-placeholder',
 }
diff --git a/components/ui/Tooltip.vue b/components/ui/Tooltip.vue
index e0c8ffa3..004e8323 100644
--- a/components/ui/Tooltip.vue
+++ b/components/ui/Tooltip.vue
@@ -27,7 +27,7 @@
         role="tooltip"
         :aria-hidden="!isVisible"
         :class="classNames(
-          'absolute z-50 rounded-[8px] border border-black/5 bg-white px-3 py-2 text-xs leading-[14px] text-balance text-black shadow-[0_0_2px_0_rgba(0,0,0,0.08),0_2px_16px_0_rgba(0,0,0,0.08)] whitespace-nowrap',
+          'absolute z-50 rounded-[8px] border border-border-hairline bg-bg-primary px-3 py-2 text-xs leading-[14px] text-balance text-text-primary shadow-[0_0_2px_0_var(--color-shadow-medium),0_2px_16px_0_var(--color-shadow-medium)] whitespace-nowrap',
           props.class
         )"
         :style="{
@@ -41,11 +41,11 @@
         <template v-if="props.showArrow">
           <div
             v-if="actualPosition === 'top'"
-            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b border-black/5 bg-white"
+            class="absolute left-1/2 -translate-x-1/2 bottom-[-4px] w-2 h-2 rotate-45 border-l border-b bg-bg-primary border-border-hairline"
           />
           <div
             v-else-if="actualPosition === 'bottom'"
-            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t border-black/5 bg-white"
+            class="absolute left-1/2 -translate-x-1/2 top-[-4px] w-2 h-2 rotate-45 border-l border-t bg-bg-primary border-border-hairline"
           />
         </template>
       </div>
diff --git a/components/web-components/reading-task.ts b/components/web-components/reading-task.ts
index 65759f6a..8cb00816 100644
--- a/components/web-components/reading-task.ts
+++ b/components/web-components/reading-task.ts
@@ -24,13 +24,13 @@ export function register() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        text-size: 14px;
+        font-size: 14px;
         line-height: 20px;
         gap: 6px;
       }
 
       .task-action{
-        color: #596066;
+        color: var(--color-text-secondary, #596066);
         white-space: nowrap;
       }
 
@@ -39,7 +39,7 @@ export function register() {
         flex-direction: row;
         align-items: center;
         padding: 2px 6px;
-        background: white;
+        background: var(--color-bg-clickable, #ffffff);
         border-radius: 4px;
         flex: 1;
         overflow: hidden;
@@ -50,14 +50,14 @@ export function register() {
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding: 2px 6px;
-        background: white;
+        padding: 0px 4px;
+        background: var(--color-bg-accent-green, #dcffea);
         border-radius: 4px;
         flex: 1;
         overflow: hidden;
         gap: 4px;
         cursor: pointer;
-        color: #24B960;
+        color: var(--color-accent-primary, #24B960);
         text-decoration: none;
         white-space: nowrap;
       }
@@ -67,6 +67,7 @@ export function register() {
         width: 16px;
         height: 16px;
         flex-shrink: 0;
+        display: flex;
       }
 
       .task-content {
@@ -102,7 +103,7 @@ export function register() {
     private getIconForType(type: string) {
       const iconMappings = {
         search: 'web',
-        page: 'taskFetchPage',
+        page: 'web',
         tab: 'link',
         pdf: 'pdf',
         image: 'taskReadFile',
@@ -121,7 +122,7 @@ export function register() {
         const partB = this.content.slice(-12)
 
         return html`
-        <div class="task-root" style="color: #9EA3A8;">
+        <div class="task-root" style="color: var(--color-text-quaternary, #9EA3A8);">
           <div class="task-action">
             <slot></slot>
           </div>
@@ -138,7 +139,7 @@ export function register() {
 
       if (this.type === 'tab' && this.content) {
         return html`
-          <div class="task-root" style="color: #9EA3A8;">
+          <div class="task-root" style="color: var(--color-text-quaternary, #9EA3A8);">
             <div class="task-action">
               <slot></slot>
             </div>
@@ -153,7 +154,7 @@ export function register() {
 
       if (this.type === 'page') {
         return html`
-          <div class="task-root" style="color: #24B960;">
+          <div class="task-root" style="color: var(--color-accent-primary, #24B960);">
             <div class="task-action">
               <slot></slot>
             </div>
@@ -169,7 +170,7 @@ export function register() {
       }
 
       return html`
-        <div class="task-root" style="color: #596066;">
+        <div class="task-root" style="color: var(--color-text-secondary, #596066);">
           <div class="task-action">
             <slot></slot>
           </div>
diff --git a/composables/theme/index.ts b/composables/theme/index.ts
new file mode 100644
index 00000000..e11fc1f7
--- /dev/null
+++ b/composables/theme/index.ts
@@ -0,0 +1 @@
+export { useTheme } from './useTheme'
diff --git a/composables/theme/useTheme.ts b/composables/theme/useTheme.ts
new file mode 100644
index 00000000..c36a666f
--- /dev/null
+++ b/composables/theme/useTheme.ts
@@ -0,0 +1,87 @@
+import { useEventListener } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+import { ThemeModeType } from '@/types/theme'
+
+import { getUserConfig } from '../../utils/user-config'
+
+const themeStore = ref<Awaited<ReturnType<typeof getUserConfig>>['ui']['theme'] | null>(null)
+const isInitialized = ref(false)
+
+async function initializeTheme() {
+  if (!themeStore.value) {
+    const config = await getUserConfig()
+    themeStore.value = config.ui.theme
+    isInitialized.value = true
+  }
+  return themeStore.value
+}
+
+export function useTheme() {
+  const systemTheme = ref<'light' | 'dark'>(
+    typeof window !== 'undefined' && window.matchMedia
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : 'light',
+  )
+
+  // Listen for system theme changes
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      systemTheme.value = e.matches ? 'dark' : 'light'
+    }
+    useEventListener(mediaQuery, 'change', handleChange)
+  }
+
+  const themeMode = computed({
+    get: () => themeStore.value?.mode.get() ?? 'system',
+    set: (mode: ThemeModeType) => {
+      if (themeStore.value) {
+        themeStore.value.mode.set(mode)
+      }
+    },
+  })
+
+  const currentTheme = computed(() => {
+    const mode = themeMode.value
+    if (mode === 'system') {
+      return systemTheme.value
+    }
+    return mode
+  })
+
+  const isDark = computed(() => currentTheme.value === 'dark')
+
+  const setTheme = (mode: ThemeModeType) => {
+    themeMode.value = mode
+  }
+
+  const toggleTheme = () => {
+    const current = themeMode.value
+    if (current === 'system') {
+      setTheme(systemTheme.value === 'dark' ? 'light' : 'dark')
+    }
+    else {
+      setTheme(current === 'dark' ? 'light' : 'dark')
+    }
+  }
+
+  // Apply theme data attribute to document
+  watch(currentTheme, (theme) => {
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement
+      root.setAttribute('data-nm-theme', theme)
+    }
+  }, { immediate: true })
+
+  return {
+    themeMode,
+    currentTheme,
+    isDark,
+    systemTheme,
+    isInitialized,
+    setTheme,
+    toggleTheme,
+    initializeTheme,
+  }
+}
diff --git a/composables/useConfirm.tsx b/composables/useConfirm.tsx
index fafa73e5..6ec417a9 100644
--- a/composables/useConfirm.tsx
+++ b/composables/useConfirm.tsx
@@ -65,15 +65,15 @@ export const initConfirmModal: (rootEl: HTMLElement) => Plugin = (rootEl) => {
             modelValue
             closeByMask
             noCloseButton
-            maskClass="bg-[#00000017]"
+            maskClass="bg-overlay-muted"
             onClose={cancel}
           >
             <div class="p-1">
-              <div class="p-8 bg-white rounded-2xl flex flex-col gap-8 w-[520px] max-w-full shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014]">
+              <div class="p-8 bg-bg-primary rounded-2xl flex flex-col gap-8 w-[520px] max-w-full shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]">
                 <div class="absolute right-4 top-4" onClick={cancel}>
-                  <IconClose class="text-[#9EA3A8] w-5 h-5" />
+                  <IconClose class="text-text-quaternary w-5 h-5" />
                 </div>
-                <div class="text-sm">{message}</div>
+                <div class="text-sm text-text-primary">{message}</div>
                 <div class="flex justify-end gap-2 flex-wrap">
                   <Button
                     disabled={loading.value}
diff --git a/entrypoints/background/database/types.ts b/entrypoints/background/database/types.ts
index 3143c102..8caef6cb 100644
--- a/entrypoints/background/database/types.ts
+++ b/entrypoints/background/database/types.ts
@@ -10,6 +10,7 @@ export interface ChatHistoryRecord {
   history: string // JSON serialized HistoryItemV1[]
   contextUpdateInfo?: string // JSON serialized contextUpdateInfo from ChatHistoryV1
   reasoningEnabled?: boolean // reasoning setting for this chat
+  onlineSearchEnabled?: boolean // online search setting for this chat, default is true
   createdAt: number
   updatedAt: number
 }
diff --git a/entrypoints/background/services/chat-history-service.ts b/entrypoints/background/services/chat-history-service.ts
index 9d82d636..70ee8faa 100644
--- a/entrypoints/background/services/chat-history-service.ts
+++ b/entrypoints/background/services/chat-history-service.ts
@@ -64,6 +64,18 @@ export class BackgroundChatHistoryService {
     }
   }
 
+  migrateFromOldHistoryRecord(record: ChatHistoryRecord): ChatHistoryV1 {
+    return {
+      id: record.id,
+      title: record.title,
+      lastInteractedAt: record.lastInteractedAt,
+      contextUpdateInfo: record.contextUpdateInfo ? JSON.parse(record.contextUpdateInfo) : undefined,
+      reasoningEnabled: record.reasoningEnabled,
+      onlineSearchEnabled: record.onlineSearchEnabled ?? true, // default to true if undefined for backward compatibility
+      history: JSON.parse(record.history) as HistoryItemV1[],
+    }
+  }
+
   /**
    * Get chat history by ID
    */
@@ -75,14 +87,7 @@ export class BackgroundChatHistoryService {
       const record = await db.get(CHAT_OBJECT_STORES.CHAT_HISTORY, chatId)
       if (!record) return null
 
-      return {
-        id: record.id,
-        title: record.title,
-        lastInteractedAt: record.lastInteractedAt,
-        contextUpdateInfo: record.contextUpdateInfo ? JSON.parse(record.contextUpdateInfo) : undefined,
-        reasoningEnabled: record.reasoningEnabled,
-        history: JSON.parse(record.history) as HistoryItemV1[],
-      }
+      return this.migrateFromOldHistoryRecord(record)
     }
     catch (error) {
       log.error('Failed to get chat history:', error)
@@ -108,6 +113,7 @@ export class BackgroundChatHistoryService {
         history: JSON.stringify(chatHistory.history),
         contextUpdateInfo: chatHistory.contextUpdateInfo ? JSON.stringify(chatHistory.contextUpdateInfo) : undefined,
         reasoningEnabled: chatHistory.reasoningEnabled,
+        onlineSearchEnabled: chatHistory.onlineSearchEnabled,
         createdAt: now, // Will be overwritten if record exists
         updatedAt: now,
       }
diff --git a/entrypoints/content/components/GmailTools/GmailComposeCard.vue b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
index 1313c1c0..e5ad6f12 100644
--- a/entrypoints/content/components/GmailTools/GmailComposeCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailComposeCard.vue
@@ -1,30 +1,30 @@
 <template>
   <div>
-    <div class="card min-w-80 max-w-110 text-xs">
+    <div class="card min-w-80 max-w-110 text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <div class="flex items-center gap-1 text-xs font-medium leading-4">
           <SettingsEmailIcon />
           {{ t('gmail_tools.cards.compose.title') }}
         </div>
         <button
-          class="text-[#71717A] cursor-pointer p-1 hover:bg-gray-100 rounded"
+          class="text-text-tertiary cursor-pointer p-1 hover:bg-bg-hover rounded"
           @click="emit('close')"
         >
           <IconClose
-            class="text-[#71717A] cursor-pointer"
+            class="text-text-tertiary cursor-pointer"
           />
         </button>
       </div>
       <Divider />
 
       <!-- Subject Section -->
-      <div class="subject-section p-3 border-b border-gray-100">
-        <div class="bg-[#E8F4FD] rounded-sm p-2 flex gap-2">
+      <div class="subject-section p-3 border-b border-border-light">
+        <div class="bg-bg-info-subtle rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus !== 'pending' && runningStatus !== 'streaming'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -46,17 +46,17 @@
               v-else
               class="relative"
             >
-              <div class="text-[#1565C0] text-sm mr-10">
+              <div class="text-text-accent-blue text-sm mr-10">
                 {{ optimizedSubject }}
               </div>
               <!-- Copy Button for Subject -->
               <button
                 v-if="optimizedSubject.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_subject_to_clipboard')"
                 @click="copySubjectToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#1565C0]" />
+                <CopyIcon class="w-4 h-4 text-text-accent-blue" />
               </button>
             </div>
           </div>
@@ -65,12 +65,12 @@
 
       <!-- Email Body Section -->
       <div class="body-section p-3">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus !== 'pending' && runningStatus !== 'streaming'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -93,17 +93,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-[#03943D] mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
+                class="text-text-accent-green mr-5 pr-5 max-h-[max(calc(100vh-350px),100px)] overflow-y-auto"
                 :text="optimizedBody"
               />
               <!-- Copy Button for Body -->
               <button
                 v-if="optimizedBody.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.compose.copy_body_to_clipboard')"
                 @click="copyBodyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#03943D]" />
+                <CopyIcon class="w-4 h-4 text-text-accent-green" />
               </button>
             </div>
           </div>
@@ -181,7 +181,7 @@ import { useI18n } from '@/utils/i18n'
 import { extractValueOfKeyByPattern } from '@/utils/json/parser/pattern-extractor'
 import type { LanguageCode } from '@/utils/language/detect'
 import { getLanguageName, SUPPORTED_LANGUAGES } from '@/utils/language/detect'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { showSettings } from '@/utils/settings'
 import { getUserConfig, processGmailTemplate } from '@/utils/user-config'
 import { DEFAULT_GMAIL_COMPOSE_SYSTEM_PROMPT, DEFAULT_GMAIL_COMPOSE_USER_PROMPT } from '@/utils/user-config/defaults'
@@ -202,7 +202,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const toast = useToast()
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const userConfig = await getUserConfig()
 
 // Compose Element
@@ -369,29 +369,27 @@ function applyCompose() {
   }
 }
 
-async function checkOllamaStatus() {
-  if (userConfig.llm.endpointType.get() !== 'ollama') return true
-  if (!(await ollamaStatusStore.updateConnectionStatus())) {
-    toast(t('errors.model_request_error'), { duration: 2000 })
-    showSettings({ scrollTarget: 'server-address-section' })
+async function checkLLMBackendStatus() {
+  if (userConfig.llm.endpointType.get() === 'web-llm') return true
+  const { status, endpointType } = await llmBackendStatusStore.checkCurrentBackendStatus()
+  if (status === 'no-model') {
+    toast(t('errors.model_not_found'), { duration: 2000 })
+    showSettings({ scrollTarget: 'model-download-section' })
     emit('close')
     return false
   }
-  else {
-    const { modelList } = await ollamaStatusStore.initDefaultModel()
-    if (modelList.length === 0) {
-      toast(t('errors.model_not_found'), { duration: 2000 })
-      showSettings({ scrollTarget: 'model-download-section' })
-      emit('close')
-      return false
-    }
+  else if (status === 'backend-unavailable') {
+    toast(t('errors.model_request_error'), { duration: 2000 })
+    endpointType === 'ollama' ? showSettings({ scrollTarget: 'ollama-server-address-section' }) : showSettings({ scrollTarget: 'lm-studio-server-address-section' })
+    emit('close')
+    return false
   }
   return true
 }
 
 const start = async () => {
   abortExistingStreams()
-  if (!(await checkOllamaStatus())) return
+  if (!(await checkLLMBackendStatus())) return
 
   const abortController = new AbortController()
   abortControllers.push(abortController)
diff --git a/entrypoints/content/components/GmailTools/GmailReplyCard.vue b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
index 7a251ca8..d09d8641 100644
--- a/entrypoints/content/components/GmailTools/GmailReplyCard.vue
+++ b/entrypoints/content/components/GmailTools/GmailReplyCard.vue
@@ -1,28 +1,28 @@
 <template>
   <div>
-    <div class="card min-w-80 max-w-110 text-xs">
+    <div class="card min-w-80 max-w-110 text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <div class="flex items-center gap-1 text-xs font-medium leading-4">
           <ReplySuggestionIcon />
           {{ t('gmail_tools.cards.reply.title') }}
         </div>
         <button
-          class="text-[#71717A] cursor-pointer p-1 hover:bg-gray-100 rounded"
+          class="text-text-tertiary cursor-pointer p-1 hover:bg-bg-hover rounded"
           @click="emit('close')"
         >
           <IconClose
-            class="text-[#71717A] cursor-pointer"
+            class="text-text-tertiary cursor-pointer"
           />
         </button>
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -36,17 +36,17 @@
               class="relative"
             >
               <MarkdownViewer
-                class="text-[#03943D] mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
+                class="text-text-accent-green mr-5 pr-5 max-h-[max(calc(100vh-250px),100px)] overflow-y-auto"
                 :text="output"
               />
               <!-- Copy Button -->
               <button
                 v-if="output.trim()"
-                class="absolute top-0 right-1 rounded hover:bg-white/30 transition cursor-pointer"
+                class="absolute top-0 right-1 rounded hover:bg-bg-primary/30 transition cursor-pointer"
                 :title="t('gmail_tools.cards.reply.copy_to_clipboard')"
                 @click="copyToClipboard"
               >
-                <CopyIcon class="w-4 h-4 text-[#03943D]" />
+                <CopyIcon class="w-4 h-4 text-text-accent-green" />
               </button>
             </div>
           </div>
@@ -122,7 +122,7 @@ import { fromError } from '@/utils/error'
 import { useI18n } from '@/utils/i18n'
 import type { LanguageCode } from '@/utils/language/detect'
 import { getLanguageName, SUPPORTED_LANGUAGES } from '@/utils/language/detect'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { showSettings } from '@/utils/settings'
 import { getUserConfig, processGmailTemplate } from '@/utils/user-config'
 import { DEFAULT_GMAIL_REPLY_SYSTEM_PROMPT, DEFAULT_GMAIL_REPLY_USER_PROMPT } from '@/utils/user-config/defaults'
@@ -144,7 +144,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n()
 const toast = useToast()
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const userConfig = await getUserConfig()
 const { currentThread } = useGmailDetector()
 
@@ -288,29 +288,27 @@ function applyReply() {
   }
 }
 
-async function checkOllamaStatus() {
-  if (userConfig.llm.endpointType.get() !== 'ollama') return true
-  if (!(await ollamaStatusStore.updateConnectionStatus())) {
-    toast(t('errors.model_request_error'), { duration: 2000 })
-    showSettings({ scrollTarget: 'server-address-section' })
+async function checkLLMBackendStatus() {
+  if (userConfig.llm.endpointType.get() === 'web-llm') return true
+  const { status, endpointType } = await llmBackendStatusStore.checkCurrentBackendStatus()
+  if (status === 'no-model') {
+    toast(t('errors.model_not_found'), { duration: 2000 })
+    showSettings({ scrollTarget: 'model-download-section' })
     emit('close')
     return false
   }
-  else {
-    const { modelList } = await ollamaStatusStore.initDefaultModel()
-    if (modelList.length === 0) {
-      toast(t('errors.model_not_found'), { duration: 2000 })
-      showSettings({ scrollTarget: 'model-download-section' })
-      emit('close')
-      return false
-    }
+  else if (status === 'backend-unavailable') {
+    toast(t('errors.model_request_error'), { duration: 2000 })
+    endpointType === 'ollama' ? showSettings({ scrollTarget: 'ollama-server-address-section' }) : showSettings({ scrollTarget: 'lm-studio-server-address-section' })
+    emit('close')
+    return false
   }
   return true
 }
 
 const start = async () => {
   abortExistingStreams()
-  if (!(await checkOllamaStatus())) return
+  if (!(await checkLLMBackendStatus())) return
 
   const abortController = new AbortController()
   abortControllers.push(abortController)
diff --git a/entrypoints/content/components/GmailTools/index.vue b/entrypoints/content/components/GmailTools/index.vue
index c702fd65..5c53eff0 100644
--- a/entrypoints/content/components/GmailTools/index.vue
+++ b/entrypoints/content/components/GmailTools/index.vue
@@ -9,11 +9,14 @@
         class="nativemind-gmail-tools nativemind-style-boundary"
         :style="{'all': 'initial', position: 'fixed', top: '0', left: '0', width: '0px', height: '0px'}"
       >
-        <div class="container bg-white text-black font-inter">
+        <div
+          class="container bg-bg-primary text-text-primary font-inter"
+          :data-nm-theme="currentTheme"
+        >
           <div
             v-if="showReplyCard"
             ref="popupRef"
-            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
             :class="!popupPos ? 'opacity-0' : ''"
             :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
           >
@@ -26,7 +29,7 @@
           <div
             v-if="showComposeCard"
             ref="composePopupRef"
-            class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+            class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
             :class="!composePopupPos ? 'opacity-0' : ''"
             :style="composePopupPos ? { top: composePopupPos.top + 'px', left: composePopupPos.left + 'px' } : {}"
           >
@@ -47,6 +50,7 @@ import { useElementBounding } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef, watchEffect } from 'vue'
 import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 
+import { useTheme } from '@/composables/theme'
 import { useDraggable } from '@/composables/useDraggable'
 import { useLogger } from '@/composables/useLogger'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
@@ -61,6 +65,10 @@ const rootElement = useRootElement()
 const styleSheet = shallowRef<CSSStyleSheet | null>(null)
 const shadowRootRef = ref<InstanceType<typeof ShadowRoot>>()
 const containerRef = ref<HTMLDivElement>()
+
+// Initialize theme
+const { initializeTheme, currentTheme } = useTheme()
+initializeTheme()
 const popupRef = ref<HTMLDivElement | null>(null)
 const composePopupRef = ref<HTMLDivElement | null>(null)
 const clickedReplyButtonRef = ref<HTMLElement | null>(null) // for navigating current polish button and finding its parent compose dialog
diff --git a/entrypoints/content/components/WritingTools/EditableEntry.vue b/entrypoints/content/components/WritingTools/EditableEntry.vue
index 571ab0ae..9f01b377 100644
--- a/entrypoints/content/components/WritingTools/EditableEntry.vue
+++ b/entrypoints/content/components/WritingTools/EditableEntry.vue
@@ -6,7 +6,7 @@
     <Button
       v-if="isShowToolBarDeferred"
       variant="secondary"
-      class="toolbar bg-white fixed rounded-md overflow-hidden text-xs transition-[width,top,left]"
+      class="toolbar bg-bg-primary fixed rounded-md overflow-hidden text-xs transition-[width,top,left]"
       :style="toolBarPos ? { top: toolBarPos.top + 'px', left: toolBarPos.left + 'px' } : {}"
       @mouseenter="onMouseEnterToolBar"
     >
@@ -17,7 +17,7 @@
         <Text size="small">
           <button
             v-if="props.tools.includes('rewrite')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('rewrite')"
           >
@@ -26,7 +26,7 @@
           </button>
           <button
             v-if="props.tools.includes('proofread')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('proofread')"
           >
@@ -35,7 +35,7 @@
           </button>
           <button
             v-if="props.tools.includes('list')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('list')"
           >
@@ -44,7 +44,7 @@
           </button>
           <button
             v-if="props.tools.includes('sparkle')"
-            class="bg-white border-0 cursor-pointer hover:bg-[#E4E4E7] h-7 flex items-center px-2 gap-[6px]"
+            class="bg-bg-primary border-0 cursor-pointer hover:bg-bg-hover h-7 flex items-center px-2 gap-[6px]"
             :class="{'opacity-50': !writingToolSelectedText}"
             @click.stop="onAction('sparkle')"
           >
@@ -52,7 +52,7 @@
             {{ t('writing_tools.sparkle') }}
           </button>
           <!-- <button
-            class="mr-1 text-gray-700 bg-gray-50 hover:bg-gray-100 border-0 cursor-pointer p-1 rounded-full"
+            class="mr-1 text-text-secondary bg-bg-neutral-subtle hover:bg-bg-hover border-0 cursor-pointer p-1 rounded-full"
             @click="onCloseToolBar"
           >
             <IconClose class="w-3 h-3" />
@@ -63,7 +63,7 @@
     <div
       v-if="writingToolType"
       ref="popupRef"
-      class="popup bg-white fixed rounded-md z-50 shadow-[0px_8px_16px_0px_#00000014,0px_4px_8px_0px_#00000014,0px_0px_0px_1px_#00000014]"
+      class="popup bg-bg-primary fixed rounded-md z-50 shadow-[0px_8px_16px_0px_var(--color-shadow-medium),0px_4px_8px_0px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)]"
       :class="!popupPos ? 'opacity-0' : ''"
       :style="popupPos ? { top: popupPos.top + 'px', left: popupPos.left + 'px' } : {}"
     >
diff --git a/entrypoints/content/components/WritingTools/SuggestionCard.vue b/entrypoints/content/components/WritingTools/SuggestionCard.vue
index dc5795e7..18a9893b 100644
--- a/entrypoints/content/components/WritingTools/SuggestionCard.vue
+++ b/entrypoints/content/components/WritingTools/SuggestionCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="card w-80 max-w-screen text-xs">
+    <div class="card w-80 max-w-screen text-xs bg-bg-component text-text-primary rounded-md shadow-01 border border-border-light">
       <div class="title flex items-center justify-between h-9 px-3">
         <Text
           size="small"
@@ -38,18 +38,18 @@
           <ExhaustiveError v-else />
         </Text>
         <IconClose
-          class="text-[#71717A] cursor-pointer"
+          class="text-text-tertiary cursor-pointer"
           @click="emit('close')"
         />
       </div>
       <Divider />
       <div class="output p-3 rounded-md">
-        <div class="bg-[#DCFFEA] rounded-sm p-2 flex gap-2">
+        <div class="bg-bg-accent-green rounded-sm p-2 flex gap-2">
           <div class="shrink-0 h-[18px] flex items-center">
             <Loading
               :done="runningStatus === 'idle'"
               :size="12"
-              strokeColor="#000000"
+              strokeColor="var(--color-foreground-base)"
             />
           </div>
           <div class="min-w-0 flex-1">
@@ -63,7 +63,7 @@
               class="max-h-[min(90vh,500px)] overflow-y-auto"
             >
               <MarkdownViewer
-                class="text-[#03943D]"
+                class="text-text-accent-green"
                 :text="output"
               />
             </div>
@@ -110,7 +110,7 @@ import { useToast } from '@/composables/useToast'
 import { fromError } from '@/utils/error'
 import { useI18n } from '@/utils/i18n'
 import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { writingToolList, writingToolProofread, writingToolRewrite, writingToolSparkle } from '@/utils/prompts'
 import { Prompt } from '@/utils/prompts/helpers'
 import { showSettings } from '@/utils/settings'
@@ -137,7 +137,7 @@ const output = ref<string>(``)
 const abortControllers: AbortController[] = []
 const runningStatus = ref<'pending' | 'streaming' | 'idle'>('idle')
 const toast = useToast()
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const userConfig = await getUserConfig()
 const abortExistingStreams = () => {
   abortControllers.forEach((controller) => controller.abort())
@@ -152,29 +152,27 @@ const prompts: Record<WritingToolType, (text: string) => PromiseLike<Prompt> | P
   sparkle: writingToolSparkle,
 }
 
-async function checkOllamaStatus() {
-  if (userConfig.llm.endpointType.get() !== 'ollama') return true
-  if (!(await ollamaStatusStore.updateConnectionStatus())) {
-    toast(t('errors.model_request_error'), { duration: 2000 })
-    showSettings({ scrollTarget: 'server-address-section' })
+async function checkLLMBackendStatus() {
+  if (userConfig.llm.endpointType.get() === 'web-llm') return true
+  const { status, endpointType } = await llmBackendStatusStore.checkCurrentBackendStatus()
+  if (status === 'no-model') {
+    toast(t('errors.model_not_found'), { duration: 2000 })
+    showSettings({ scrollTarget: 'model-download-section' })
     emit('close')
     return false
   }
-  else {
-    const { modelList } = await ollamaStatusStore.initDefaultModel()
-    if (modelList.length === 0) {
-      toast(t('errors.model_not_found'), { duration: 2000 })
-      showSettings({ scrollTarget: 'model-download-section' })
-      emit('close')
-      return false
-    }
+  else if (status === 'backend-unavailable') {
+    toast(t('errors.model_request_error'), { duration: 2000 })
+    endpointType === 'ollama' ? showSettings({ scrollTarget: 'ollama-server-address-section' }) : showSettings({ scrollTarget: 'lm-studio-server-address-section' })
+    emit('close')
+    return false
   }
   return true
 }
 
 const start = async () => {
   abortExistingStreams()
-  if (!(await checkOllamaStatus())) return
+  if (!(await checkLLMBackendStatus())) return
   const abortController = new AbortController()
   abortControllers.push(abortController)
   try {
diff --git a/entrypoints/content/components/WritingTools/index.vue b/entrypoints/content/components/WritingTools/index.vue
index 86a588bd..f65c31df 100644
--- a/entrypoints/content/components/WritingTools/index.vue
+++ b/entrypoints/content/components/WritingTools/index.vue
@@ -9,7 +9,10 @@
         class="nativemind-writing-tools nativemind-style-boundary"
         :style="{'all': 'initial', position: 'fixed', top: '0', left: '0', width: '0px', height: '0px'}"
       >
-        <div class="container bg-white text-black font-inter">
+        <div
+          class="container bg-bg-primary text-text-primary font-inter"
+          :data-nm-theme="currentTheme"
+        >
           <EditableEntry
             v-for="(el, idx) in elements"
             :key="idx"
@@ -26,6 +29,7 @@
 import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { ShadowRoot as ShadowRootComponent } from 'vue-shadow-dom'
 
+import { useTheme } from '@/composables/theme'
 import { useLogger } from '@/composables/useLogger'
 import { useFocusedElements } from '@/composables/useObserverElements'
 import { injectStyleSheetToDocument, loadContentScriptStyleSheet } from '@/utils/css'
@@ -41,6 +45,10 @@ const rootElement = useRootElement()
 const styleSheet = shallowRef<CSSStyleSheet | null>(null)
 const shadowRootRef = ref<InstanceType<typeof ShadowRoot>>()
 const userConfig = await getUserConfig()
+
+// Initialize theme
+const { initializeTheme, currentTheme } = useTheme()
+initializeTheme()
 const enabled = userConfig.writingTools.enable.toRef()
 const enableRewrite = userConfig.writingTools.rewrite.enable.toRef()
 const enableProofread = userConfig.writingTools.proofread.enable.toRef()
diff --git a/entrypoints/content/components/WritingTools/style.css b/entrypoints/content/components/WritingTools/style.css
index c6d2c07a..8b0e6854 100644
--- a/entrypoints/content/components/WritingTools/style.css
+++ b/entrypoints/content/components/WritingTools/style.css
@@ -39,7 +39,7 @@
 }
 
 .circle-transition {
-  stroke: #000;
+  stroke: var(--color-foreground-base);
   animation: color-transition 0.6s ease-out forwards;
 }
 
@@ -64,8 +64,8 @@
     font-weight: 600;
   }
   :deep(pre) {
-    color: var(--color-gray-300);
-    background-color: black;
+    color: var(--color-text-tertiary);
+    background-color: var(--color-bg-component);
     margin-bottom: 8px;
     margin-top: 8px;
     padding: 8px;
@@ -101,7 +101,7 @@
   }
   :deep(hr) {
     margin: 8px 0;
-    border-color: #a7a7a7;
+    border-color: var(--color-border-strong);
   }
   :deep(strong) {
     font-weight: 600;
@@ -136,7 +136,7 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: #9e9e9e;
+      background: var(--color-scroll-thumb);
       border-radius: 5px;
     }
 
@@ -150,7 +150,7 @@
   :deep(table) {
     td {
       padding: 4px;
-      border: 1px solid var(--color-gray-300);
+      border: 1px solid var(--color-border-strong);
     }
   }
 }
diff --git a/entrypoints/content/composables/useTranslator.ts b/entrypoints/content/composables/useTranslator.ts
index 68ee0ddc..8a6bac90 100644
--- a/entrypoints/content/composables/useTranslator.ts
+++ b/entrypoints/content/composables/useTranslator.ts
@@ -6,7 +6,7 @@ import { getTranslatorEnv, handleTranslatorEnvUpdated, init, setTranslatorEnv, t
 import { useI18n } from '@/utils/i18n'
 import { LanguageCode } from '@/utils/language/detect'
 import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { registerContentScriptRpcEvent } from '@/utils/rpc'
 import { getCommonAncestorElement } from '@/utils/selection'
 import { showSettings } from '@/utils/settings'
@@ -22,7 +22,7 @@ async function _useTranslator() {
   const isTranslating = ref(false)
   const userConfig = await getUserConfig()
   const targetLocale = userConfig.translation.targetLocale.toRef()
-  const ollamaStatusStore = useOllamaStatusStore()
+  const llmBackendStatusStore = useLLMBackendStatusStore()
   setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)
   watch(targetLocale, async (targetLocale) => {
     logger.debug('targetLocale changed', targetLocale)
@@ -69,19 +69,17 @@ async function _useTranslator() {
     if (isWaiting) return
     isWaiting = true
     try {
-      if (!enabled.value && userConfig.llm.endpointType.get() === 'ollama') {
-        if (!(await ollamaStatusStore.updateConnectionStatus())) {
+      if (!enabled.value) {
+        const { status, endpointType } = await llmBackendStatusStore.checkCurrentBackendStatus()
+        if (status === 'backend-unavailable') {
           toast('Failed to connect to Ollama server, please check your Ollama connection', { duration: 2000 })
-          showSettings({ scrollTarget: 'server-address-section' })
+          endpointType === 'ollama' ? showSettings({ scrollTarget: `ollama-server-address-section` }) : showSettings({ scrollTarget: `lm-studio-server-address-section` })
           return
         }
-        else {
-          const { modelList } = await ollamaStatusStore.initDefaultModel()
-          if (modelList.length === 0) {
-            toast('No model found, please download a model.', { duration: 2000 })
-            showSettings({ scrollTarget: 'model-download-section' })
-            return
-          }
+        else if (status === 'no-model') {
+          toast('No model found, please download a model.', { duration: 2000 })
+          showSettings({ scrollTarget: 'model-download-section' })
+          return
         }
       }
       if (e.menuItemId === 'native-mind-page-translate') {
diff --git a/entrypoints/content/utils/page-injection/gmail-tools.ts b/entrypoints/content/utils/page-injection/gmail-tools.ts
index 6b990710..f4676b59 100644
--- a/entrypoints/content/utils/page-injection/gmail-tools.ts
+++ b/entrypoints/content/utils/page-injection/gmail-tools.ts
@@ -1,12 +1,14 @@
 import { computed, onScopeDispose, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import LogoSvg from '@/assets/icons/logo-custom-color.svg?raw'
+import LogoSvg from '@/assets/icons/logo-for-gmail-tools.svg?raw'
 import { useDocumentLoaded } from '@/composables/useDocumentLoaded'
+import { ThemeType } from '@/types/theme'
 import Logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 import { toggleContainer } from '@/utils/rpc/content-main-world-fns'
 import { sleep } from '@/utils/sleep'
+import { getDocumentTheme } from '@/utils/theme'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useGmailDetector } from '../../composables/useGmailDetector'
@@ -19,84 +21,183 @@ const NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS = 'nativemind-gmail-compose-btn'
 
 const LogoIcon = LogoSvg.replace('<svg', '<svg width="14" height="14" style="display: block;"')
 
+type GmailButtonThemeColors = {
+  background: string
+  text: string
+  hoverBackground: string
+  disabledBackground: string
+  disabledText: string
+  baseShadow: string
+  hoverShadow: string
+  spinnerBar: string
+  spinnerShadow: string
+}
+
+const GMAIL_BUTTON_THEME_COLORS: Record<ThemeType, GmailButtonThemeColors> = {
+  light: {
+    background: '#FBF8F4',
+    text: '#1f2326',
+    hoverBackground: '#EAECEF',
+    disabledBackground: '#F2F2F2',
+    disabledText: '#9EA3A8',
+    baseShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    hoverShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    spinnerBar: '#18181B',
+    spinnerShadow: 'rgba(0, 0, 0, 0.2)',
+  },
+  dark: {
+    background: '#8E8C8C',
+    text: '#FFFFFF',
+    hoverBackground: '#7A7777',
+    disabledBackground: '#1F2326',
+    disabledText: '#7D8590',
+    baseShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    hoverShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.12)',
+    spinnerBar: '#F8F9FA',
+    spinnerShadow: 'rgba(0, 0, 0, 0.2)',
+  },
+}
+
+type GmailButtonStyleOptions = {
+  includeSpinner?: boolean
+  extraBaseRules?: string
+}
+
+function buildGmailButtonStyles(className: string, options: GmailButtonStyleOptions = {}) {
+  const lightColors = GMAIL_BUTTON_THEME_COLORS.light
+  const darkColors = GMAIL_BUTTON_THEME_COLORS.dark
+
+  const baseRules = `
+.${className} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 10px;
+  background: ${lightColors.background};
+  color: ${lightColors.text};
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: ${lightColors.baseShadow};
+  transition: all 0.2s ease;
+  font-family: 'Google Sans', Roboto, Arial, sans-serif;
+  white-space: nowrap;
+  ${options.extraBaseRules ?? ''}
+}
+
+.${className}:hover:not(:disabled) {
+  background: ${lightColors.hoverBackground};
+  box-shadow: ${lightColors.hoverShadow};
+}
+
+.${className}:disabled {
+  background: ${lightColors.disabledBackground};
+  color: ${lightColors.disabledText};
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.${className} svg {
+  color: ${lightColors.text};
+}
+
+/* Dark mode styles */
+.${className}[data-nm-theme="dark"] {
+  background: ${darkColors.background};
+  color: ${darkColors.text};
+  box-shadow: ${darkColors.baseShadow};
+}
+
+.${className}[data-nm-theme="dark"]:hover:not(:disabled) {
+  background: ${darkColors.hoverBackground};
+  box-shadow: ${darkColors.hoverShadow};
+}
+
+.${className}[data-nm-theme="dark"]:disabled {
+  background: ${darkColors.disabledBackground};
+  color: ${darkColors.disabledText};
+}
+
+.${className}[data-nm-theme="dark"] svg {
+  color: ${darkColors.text};
+}
+`
+
+  if (!options.includeSpinner) {
+    return baseRules
+  }
+
+  return `
+${baseRules}
+
+.nativemind-loading-spinner {
+  position: relative;
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+}
+
+.nativemind-loading-spinner .bar {
+  --duration: 1s;
+  --delay: calc(var(--duration) / 8 * -1);
+  --rotate: calc(360deg / 8 * -1);
+  width: 10%;
+  height: 26%;
+  background: ${lightColors.spinnerBar};
+  position: absolute;
+  left: 48%;
+  top: 36%;
+  opacity: 0;
+  border-radius: 50px;
+  box-shadow: 0 0 1px ${lightColors.spinnerShadow};
+  animation: nativemind-loading-fade var(--duration) linear infinite;
+  transform: rotate(calc(var(--rotate) * var(--bar-number))) translate(0, -130%);
+  animation-delay: calc(var(--delay) * var(--bar-number));
+}
+
+.${className}[data-nm-theme="dark"] .nativemind-loading-spinner .bar {
+  background: ${darkColors.spinnerBar};
+  box-shadow: 0 0 1px ${darkColors.spinnerShadow};
+}
+
+@keyframes nativemind-loading-fade {
+  from { opacity: 1; }
+  to { opacity: 0.25; }
+}
+`
+}
+
+function ensureGmailButtonStyle(styleId: string, className: string, options?: GmailButtonStyleOptions) {
+  const style = document.getElementById(styleId) as HTMLStyleElement | null
+  const cssText = buildGmailButtonStyles(className, options)
+  if (style) {
+    style.textContent = cssText
+    return
+  }
+  const styleEl = document.createElement('style')
+  styleEl.id = styleId
+  styleEl.textContent = cssText
+  document.head.appendChild(styleEl)
+}
+
 function makeSummaryButton(threadElement: HTMLElement, buttonText: string, externalStyle?: string) {
   const button = document.createElement('button')
   button.innerHTML = `
     ${LogoIcon}
     ${buttonText}
   `
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-summary-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-      }
-      
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-
-      .nativemind-loading-spinner {
-        position: relative;
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-      }
-
-      .nativemind-loading-spinner .bar {
-        --duration: 1s;
-        --delay: calc(var(--duration) / 8 * -1);
-        --rotate: calc(360deg / 8 * -1);
-        width: 10%;
-        height: 26%;
-        background: black;
-        position: absolute;
-        left: 48%;
-        top: 36%;
-        opacity: 0;
-        border-radius: 50px;
-        box-shadow: 0 0 1px rgba(0,0,0,0.2);
-        animation: nativemind-loading-fade var(--duration) linear infinite;
-        transform: rotate(calc(var(--rotate) * var(--bar-number))) translate(0, -130%);
-        animation-delay: calc(var(--delay) * var(--bar-number));
-      }
+  ensureGmailButtonStyle('nativemind-gmail-summary-btn-styles', NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS, { includeSpinner: true })
 
-      @keyframes nativemind-loading-fade {
-        from { opacity: 1; }
-        to { opacity: 0.25; }
-      }
-    `
-    document.head.appendChild(style)
+  if (externalStyle) {
+    button.style.cssText = externalStyle
   }
 
-  button.style.cssText = externalStyle || ''
+  const currentTheme = getDocumentTheme()
   button.className = NATIVEMIND_GMAIL_SUMMARY_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('mousedown', async (ev) => {
     // Return early if button is disabled
@@ -164,49 +265,13 @@ function makeReplyButton(buttonText: string) {
     ${buttonText}
   `
 
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-reply-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-        margin-left: 8px;
-        z-index: 1;
-      }
-      
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    `
-    document.head.appendChild(style)
-  }
+  ensureGmailButtonStyle('nativemind-gmail-reply-btn-styles', NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS, {
+    extraBaseRules: 'margin-left: 8px; z-index: 1;',
+  })
 
+  const currentTheme = getDocumentTheme()
   button.className = NATIVEMIND_GMAIL_REPLY_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
@@ -245,49 +310,13 @@ function makeComposeButton(buttonText: string) {
     ${buttonText}
   `
 
-  // Inject CSS styles for the button
-  const styleId = 'nativemind-gmail-compose-btn-styles'
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement('style')
-    style.id = styleId
-    style.textContent = `
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS} {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        padding: 8px 10px;
-        background: #FBF8F4;
-        color: #3c4043;
-        border: 1px solid #dadce0;
-        border-radius: 6px;
-        font-size: 12px;
-        font-weight: 500;
-        cursor: pointer;
-        box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.1);
-        transition: all 0.2s ease;
-        font-family: 'Google Sans', Roboto, Arial, sans-serif;
-        white-space: nowrap;
-        margin-left: 8px;
-        z-index: 1;
-      }
-      
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS}:hover:not(:disabled) {
-        background: #EAECEF;
-        box-shadow: 0 2px 6px 0 rgba(60, 64, 67, 0.15);
-      }
-      
-      .${NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS}:disabled {
-        background: #f1f3f4;
-        color: #5f6368;
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-    `
-    document.head.appendChild(style)
-  }
+  ensureGmailButtonStyle('nativemind-gmail-compose-btn-styles', NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS, {
+    extraBaseRules: 'margin-left: 8px; z-index: 1;',
+  })
 
+  const currentTheme = getDocumentTheme()
   button.className = NATIVEMIND_GMAIL_COMPOSE_BUTTON_CLASS
+  button.setAttribute('data-nm-theme', currentTheme)
 
   button.addEventListener('click', async (ev) => {
     ev.stopImmediatePropagation()
diff --git a/entrypoints/content/utils/translator/utils/dom-utils.ts b/entrypoints/content/utils/translator/utils/dom-utils.ts
index 2dd304ee..88bb1e5e 100644
--- a/entrypoints/content/utils/translator/utils/dom-utils.ts
+++ b/entrypoints/content/utils/translator/utils/dom-utils.ts
@@ -374,18 +374,24 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.tintedHighlight: {
-      element.style.color = isBGDark ? '#A8B4FF' : '#2724D8'
+      element.style.color = isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #2724D8)'
       break
     }
     case TranslationDisplayStyle.overlay: {
-      element.style.backgroundColor = isBGDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0,0,0,0.08)'
+      element.style.backgroundColor = isBGDark
+        ? 'var(--color-overlay-subtle-on-dark, rgba(255, 255, 255, 0.16))'
+        : 'var(--color-overlay-subtle-on-light, rgba(0, 0, 0, 0.08))'
       element.style.borderRadius = '8px'
       element.style.padding = '8px 12px'
       break
     }
     case TranslationDisplayStyle.tintedOverlay: {
       const innerElement = document.createElement('span')
-      innerElement.style.backgroundColor = isBGDark ? 'rgba(200, 200, 200, 0.3)' : 'rgba(74, 101, 243, 0.1)'
+      innerElement.style.backgroundColor = isBGDark
+        ? 'var(--color-translation-overlay-dark, rgba(200, 200, 200, 0.3))'
+        : 'var(--color-translation-overlay-light, rgba(74, 101, 243, 0.1))'
       innerElement.innerHTML = element.innerHTML
       innerElement.classList.add(translationTargetInnerClass)
       element.innerHTML = ''
@@ -393,11 +399,15 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.wavyLine: {
-      applyUnderlineStyle(element, 'wavy', isBGDark ? '#A8B4FF' : '#322EE5')
+      applyUnderlineStyle(element, 'wavy', isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #322EE5)')
       break
     }
     case TranslationDisplayStyle.dashedLine: {
-      applyUnderlineStyle(element, 'dashed', isBGDark ? 'rgba(255, 255, 255, 0.56)' : 'rgba(0,0,0,0.32)')
+      applyUnderlineStyle(element, 'dashed', isBGDark
+        ? 'var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : 'var(--color-translation-underline-light, rgba(0,0,0,0.32))')
       break
     }
     case TranslationDisplayStyle.divider: {
@@ -406,7 +416,9 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       divider.classList.add(translationTargetDividerClass)
       divider.style.width = '48px'
       divider.style.marginTop = '8px'
-      divider.style.borderBottom = isBGDark ? '1px dashed rgba(255, 255, 255, 0.56)' : '1px dashed rgba(0, 0, 0, 0.32)'
+      divider.style.borderBottom = isBGDark
+        ? '1px dashed var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : '1px dashed var(--color-translation-underline-light, rgba(0, 0, 0, 0.32))'
 
       element.before(divider)
       break
diff --git a/entrypoints/settings/components/Block.vue b/entrypoints/settings/components/Block.vue
index 9cab9935..469f1a92 100644
--- a/entrypoints/settings/components/Block.vue
+++ b/entrypoints/settings/components/Block.vue
@@ -1,35 +1,57 @@
 <template>
-  <div class="p-4 bg-white rounded-lg relative overflow-hidden">
+  <div class="p-4 bg-bg-primary rounded-lg relative overflow-hidden">
     <div
       v-if="disabled"
-      class="disable mask z-10 absolute inset-0 bg-[#ffffffaf]"
+      class="disable mask z-10 absolute inset-0 bg-mask-disabled"
     />
-    <div class="mb-3 flex justify-between items-center">
+    <div
+      class="flex justify-between items-center"
+      :class="{ 'cursor-pointer': collapsible }"
+      @click="collapsible ? (open = !open) : null"
+    >
       <div>
-        <Text
-          size="medium"
-          class="font-semibold"
-        >
-          {{ title }}
-        </Text>
+        <slot name="title">
+          <Text
+            size="medium"
+            class="font-semibold"
+          >
+            {{ title }}
+          </Text>
+        </slot>
       </div>
       <div>
         <slot name="action" />
+        <IconArrowDown
+          v-if="collapsible"
+          class="size-[15px] transition-transform"
+          :class="open ? 'rotate-180' : ''"
+        />
       </div>
     </div>
-    <Divider />
-    <div class="mt-3">
+    <div
+      class="transition-all duration-300 p-px [interpolate-size:allow-keywords]"
+      :class="[open ? 'h-auto opacity-100' : 'h-0 opacity-0 overflow-hidden']"
+    >
+      <Divider class="my-3" />
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import IconArrowDown from '@/assets/icons/arrow-down.svg?component'
 import Divider from '@/components/ui/Divider.vue'
 import Text from '@/components/ui/Text.vue'
+
 defineProps<{
   title: string
   disabled?: boolean
+  collapsible?: boolean
 }>()
 
+const open = defineModel<boolean>('open', {
+  default: () => true,
+  required: false,
+})
+
 </script>
diff --git a/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue b/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
index 939efe81..9b070bcf 100644
--- a/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
+++ b/entrypoints/settings/components/ChatSettings/QuickAction/EditCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-lg shadow-[0px_0px_0px_1px_#24B96080] p-4">
+  <div class="rounded-lg shadow-[0px_0px_0px_1px_var(--color-border-selection)] p-4">
     <div
       class="flex flex-col gap-2"
     >
diff --git a/entrypoints/settings/components/CollapsibleSection.vue b/entrypoints/settings/components/CollapsibleSection.vue
new file mode 100644
index 00000000..2aa7802c
--- /dev/null
+++ b/entrypoints/settings/components/CollapsibleSection.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="bg-transparent rounded-lg relative">
+    <div
+      class="flex justify-between items-center cursor-pointer text-text-primary hover:text-text-secondary"
+      @click="open = !open"
+    >
+      <div>
+        <Text
+          size="xs"
+          class="font-medium"
+        >
+          {{ title }}
+        </Text>
+      </div>
+      <IconArrowDown
+        class="size-[15px] transition-transform"
+        :class="open ? 'rotate-180' : ''"
+      />
+    </div>
+    <Divider class="mt-3" />
+    <div
+      class="p-px transition-all duration-300 [interpolate-size:allow-keywords]"
+      :class="[open ? 'h-auto opacity-100 mt-3' : 'h-0 opacity-0 overflow-hidden']"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconArrowDown from '@/assets/icons/arrow-down.svg?component'
+import Divider from '@/components/ui/Divider.vue'
+import Text from '@/components/ui/Text.vue'
+
+defineProps<{
+  title: string
+  defaultOpen?: boolean
+}>()
+
+const open = defineModel<boolean>('open', {
+  default: (props) => props.defaultOpen,
+  required: false,
+})
+
+</script>
diff --git a/entrypoints/settings/components/DebugSettings/Block.vue b/entrypoints/settings/components/DebugSettings/Block.vue
index f0d21e78..1bd35262 100644
--- a/entrypoints/settings/components/DebugSettings/Block.vue
+++ b/entrypoints/settings/components/DebugSettings/Block.vue
@@ -3,7 +3,7 @@
     <div class="font-bold">
       {{ title }}
     </div>
-    <div class="pt-2 border-l border-gray-200 pl-2">
+    <div class="pt-2 border-l border-border pl-2">
       <slot />
     </div>
   </div>
diff --git a/entrypoints/settings/components/DebugSettings/index.vue b/entrypoints/settings/components/DebugSettings/index.vue
index 79436eb7..e652a166 100644
--- a/entrypoints/settings/components/DebugSettings/index.vue
+++ b/entrypoints/settings/components/DebugSettings/index.vue
@@ -6,7 +6,7 @@
       title="Debug"
       description="Debug settings"
     />
-    <div class="p-4 flex flex-col gap-4 bg-white rounded-lg">
+    <div class="p-4 flex flex-col gap-4 bg-bg-primary rounded-lg">
       <div class="flex flex-col gap-4">
         <Block title="UI Language">
           <div class="flex gap-2 flex-col justify-start items-start">
@@ -20,7 +20,7 @@
             </Button>
             <div>Local value: {{ localeInConfig ?? 'not set' }}</div>
             <div
-              class="text-[10px] text-gray-400 font-light"
+              class="text-[10px] text-text-tertiary font-light"
             >
               clear locale setting will reset the UI language to automatically detected language in next page load
               (if local value is set, it will override the auto-detected language)
@@ -31,7 +31,7 @@
           <div class="flex gap-2 flex-col justify-start items-start">
             <div>Reset onboarding</div>
             <button
-              class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+              class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
               @click="resetOnboarding"
             >
               Reset
@@ -43,7 +43,7 @@
             <div>WebLLM model cache status</div>
             <div class="text-xs font-normal">
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                 @click="checkWebLLMCacheStatus"
               >
                 Refresh
@@ -55,7 +55,7 @@
               >
                 <div>{{ s.modelId }}</div>
                 <button
-                  class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                  class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                   @click="deleteWebLLMModelCache(s.modelId)"
                 >
                   <IconDelete class="w-3 h-3" />
@@ -71,58 +71,27 @@
               <Selector
                 v-model="endpointType"
                 :options="modelProviderOptions"
-                dropdownClass="text-xs text-black w-52"
+                dropdownClass="text-xs text-text-primary w-52"
                 containerClass="py-0"
                 dropdownAlign="left"
               />
             </div>
-            <div class="flex flex-col gap-3 justify-start items-start">
-              Enable Context Window Size (Num ctx)
-              <Switch
-                v-model="enableNumCtx"
-                slotClass="rounded-lg border-gray-200 border bg-white"
-                itemClass="h-6 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
-                activeItemClass="text-white"
-                :items="[
-                  {
-                    label: 'Enable',
-                    key: true,
-                  },
-                  {
-                    label: 'Disable',
-                    key: false,
-                    activeThumbClass: 'bg-gray-200',
-                  }
-                ]"
-              />
-            </div>
-            <div class="flex gap-3 justify-start items-center">
-              <div>Num ctx</div>
-              <Input
-                v-model.number="numCtx"
-                type="number"
-                min="0"
-                class="border-b border-gray-200 py-1 disabled:opacity-50"
-                :disabled="!enableNumCtx"
-              />
-            </div>
             <div class="flex gap-3 justify-start items-center">
               <div>Default first token timeout (ms)</div>
               <Input
                 v-model.number="defaultFirstTokenTimeout"
                 type="number"
                 min="0"
-                class="border-b border-gray-200 py-1 disabled:opacity-50"
+                class="border-b border-border py-1 disabled:opacity-50"
               />
             </div>
             <div class="flex gap-3 justify-start items-center">
               Reasoning
               <Switch
                 v-model="enableReasoning"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border border-border bg-bg-primary"
                 itemClass="h-6 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[
                   {
@@ -132,7 +101,7 @@
                   {
                     label: 'Disable',
                     key: false,
-                    activeThumbClass: 'bg-gray-200',
+                    activeThumbClass: 'bg-border-light',
                   }
                 ]"
               />
@@ -144,7 +113,7 @@
                 class="font-light py-1"
               />
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3"
                 :class="!newModelId.trim() && 'opacity-50 pointer-events-none'"
                 @click="onPullModel"
               >
@@ -162,7 +131,7 @@
                   </span>
                   <span class="font-light"> ({{ pullingModel.status }}) </span>
                   <button
-                    class="text-blue-400 hover:text-blue-600 font-normal text-xs ml-2 cursor-pointer"
+                    class="text-text-link hover:text-text-link-hover font-normal text-xs ml-2 cursor-pointer"
                     @click="pullingModel.abort"
                   >
                     {{ pullingModel.status !== 'success' ? 'stop' : 'clear' }}
@@ -170,7 +139,7 @@
                 </div>
                 <div
                   v-if="pullingModel.error"
-                  class="font-light text-[8px] text-red-500"
+                  class="font-light text-[8px] text-danger"
                 >
                   {{ pullingModel.error }}
                 </div>
@@ -196,7 +165,7 @@
                 <div>translator system prompt</div>
                 <div
                   v-if="translationSystemPromptError"
-                  class="text-red-500 text-[8px]"
+                  class="text-danger text-[8px]"
                 >
                   ({{ translationSystemPromptError }})
                 </div>
@@ -271,7 +240,7 @@
                 v-model.number="maxAgentIterations"
                 type="number"
                 min="0"
-                class="border-b border-gray-200 h-5 w-20"
+                class="border-b border-border h-5 w-20"
               />
             </div>
             <div class="flex gap-3 justify-start items-center">
@@ -281,7 +250,7 @@
                     v-model.number="updateEnvironmentDetailsFrequency"
                     type="number"
                     min="0"
-                    class="border-b border-gray-200 w-12 h-5"
+                    class="border-b border-border w-12 h-5"
                   /> messages (including user and assistant messages)
                 </div>
               </Block>
@@ -289,14 +258,14 @@
           </div>
         </Block>
         <Block title="Chrome AI Polyfill">
-          <div class="text-[8px] text-gray-400 mb-1">
+          <div class="text-[8px] text-text-tertiary mb-1">
             needs to refresh the page to take effect
           </div>
           <div class="flex gap-3 justify-start items-stretch">
             <Switch
               v-model="enabledChromeAIPolyfill"
-              slotClass="rounded-lg border-gray-200 border bg-white"
-              thumbClass="bg-blue-500 w-4 h-4 rounded-md"
+              slotClass="rounded-lg border-border border bg-bg-primary"
+              thumbClass="bg-accent-primary w-4 h-4 rounded-md"
               activeItemClass="text-white"
               :items="[
                 {
@@ -306,7 +275,7 @@
                 {
                   label: 'Disable',
                   key: false,
-                  activeThumbClass: 'bg-gray-200',
+                  activeThumbClass: 'bg-border-light',
                 },
               ]"
             >
@@ -327,9 +296,9 @@
               </div>
               <Switch
                 v-model="enableBrowserUse"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'Enable',key: true},{label: 'Disable',key: false}]"
               />
@@ -341,9 +310,9 @@
               </div>
               <Switch
                 v-model="highlightInteractiveElements"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -355,9 +324,9 @@
               </div>
               <Switch
                 v-model="simulateClickOnLink"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -369,9 +338,9 @@
               </div>
               <Switch
                 v-model="closeTabOpenedByAgent"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-5 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[{label: 'True',key: true},{label: 'False',key: false}]"
               />
@@ -384,24 +353,24 @@
               <Input
                 v-model.number="contentFilterThreshold"
                 type="number"
-                class="border-b border-gray-200 w-20 h-6"
+                class="border-b border-border w-20 h-6"
               />
             </div>
             <div class="flex gap-3 items-center">
               <Input
                 v-model="browserUseOpenUrl"
                 placeholder="Enter URL"
-                class="border-b border-gray-200 py-1 disabled:opacity-50 w-80"
+                class="border-b border-border py-1 disabled:opacity-50 w-80"
               />
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
                 @click="getAccessibleContent"
               >
                 Get accessible content
               </button>
               <button
                 v-if="browserUseParsedResults.length > 0"
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3 whitespace-nowrap"
                 @click="downloadBrowserUseParsedResults"
               >
                 Download
@@ -412,7 +381,7 @@
               :key="idx"
               class="mt-2 text-[8px] overflow-auto max-w-full max-h-96 font-light"
             >
-              <pre class="border border-gray-200 p-2 whitespace-pre-wrap">
+              <pre class="border border-border p-2 whitespace-pre-wrap">
                   {{ item?.content ?? 'N/A' }}
                 </pre>
             </div>
@@ -424,7 +393,7 @@
               <div class="flex gap-3 justify-start items-center">
                 document parser
                 <button
-                  class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-1 px-3"
+                  class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-1 px-3"
                   @click="parseAllDocuments"
                 >
                   parse
@@ -434,7 +403,7 @@
             <details
               v-for="(article, idx) of articles"
               :key="idx"
-              class="border border-gray-200 rounded-md p-2 &[open]:bg-gray-50 hover:bg-gray-100 open:hover:bg-transparent transition-all"
+              class="border border-border rounded-md p-2 &[open]:bg-bg-neutral-subtle hover:bg-bg-hover open:hover:bg-transparent transition-all"
             >
               <summary
                 class="flex justify-start items-stretch text-xs cursor-pointer wrap-anywhere"
@@ -444,17 +413,17 @@
               </summary>
               <div class="flex flex-col gap-3 mt-2">
                 <div class="flex flex-col gap-3 justify-start items-stretch">
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap">{{ article?.title ?? 'N/A' }}</pre>
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap">{{ article?.title ?? 'N/A' }}</pre>
                   <div class="text-[10px]">
                     URL
                   </div>
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap">{{ article?.url ?? 'N/A' }}</pre>
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap">{{ article?.url ?? 'N/A' }}</pre>
                 </div>
                 <div class="flex flex-col gap-3 justify-start items-stretch">
                   <div class="text-[10px]">
                     Text
                   </div>
-                  <pre class="text-[8px] font-light border border-gray-200 min-h-4 p-2 whitespace-pre-wrap max-h-72 overflow-auto">{{
+                  <pre class="text-[8px] font-light border border-border min-h-4 p-2 whitespace-pre-wrap max-h-72 overflow-auto">{{
                     article?.content ?? 'N/A'
                   }}</pre>
                 </div>
@@ -465,7 +434,7 @@
                   <div class="text-[10px]">
                     HTML
                   </div>
-                  <div class="text-[8px] font-light border border-gray-200 min-h-4 p-2 max-h-72 overflow-auto [&_img]:max-w-14! [&_svg]:max-w-14!">
+                  <div class="text-[8px] font-light border border-border min-h-4 p-2 max-h-72 overflow-auto [&_img]:max-w-14! [&_svg]:max-w-14!">
                     <div v-html="article?.html ?? 'N/A'" />
                   </div>
                 </div>
@@ -482,9 +451,9 @@
               Enable
               <Switch
                 v-model="enableTranslationCache"
-                slotClass="rounded-lg border-gray-200 border bg-white"
+                slotClass="rounded-lg border-border border bg-bg-primary"
                 itemClass="h-6 flex items-center justify-center text-xs px-2"
-                thumbClass="bg-blue-500 rounded-md"
+                thumbClass="bg-accent-primary rounded-md"
                 activeItemClass="text-white"
                 :items="[
                   {
@@ -494,7 +463,7 @@
                   {
                     label: 'Disable',
                     key: false,
-                    activeThumbClass: 'bg-gray-200',
+                    activeThumbClass: 'bg-border-light',
                   }
                 ]"
               />
@@ -506,7 +475,7 @@
                   v-model.number="cacheRetentionDays"
                   type="number"
                   min="1"
-                  class="border-b border-gray-200 py-1 disabled:opacity-50 w-20"
+                  class="border-b border-border py-1 disabled:opacity-50 w-20"
                 />
               </div>
             </div>
@@ -521,7 +490,7 @@
               <div>
                 Total Entries
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.totalEntries ?? 'N/A' }}
               </div>
             </div>
@@ -529,7 +498,7 @@
               <div>
                 Total Size (MB)
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.totalSizeMB.toFixed(2) ?? 'N/A' }}
               </div>
             </div>
@@ -537,14 +506,14 @@
               <div>
                 Model Namespaces
               </div>
-              <div class="font-normal text-gray-600">
+              <div class="font-normal text-text-secondary">
                 {{ cacheStats?.modelNamespaces.join(', ') ?? 'N/A' }}
               </div>
             </div>
             <div class="flex flex-col gap-2 justify-start items-start">
               <span class="text-xs">Clear Cache</span>
               <button
-                class="bg-blue-400 hover:bg-blue-500 text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
+                class="bg-accent-primary hover:bg-accent-primary-hover text-white rounded-md cursor-pointer text-xs py-[2px] px-2"
                 @click="handleClearCache"
               >
                 Clear
@@ -569,13 +538,13 @@
               <div
                 v-if="clearChatHistoryResult"
                 class="text-xs"
-                :class="clearChatHistoryResult.success ? 'text-green-600' : 'text-red-500'"
+                :class="clearChatHistoryResult.success ? 'text-success' : 'text-danger'"
               >
                 {{ clearChatHistoryResult.success
                   ? `Successfully deleted ${clearChatHistoryResult.deletedCount} chat${clearChatHistoryResult.deletedCount !== 1 ? 's' : ''}`
                   : `Error: ${clearChatHistoryResult.error}` }}
               </div>
-              <div class="text-[10px] text-gray-400 font-light">
+              <div class="text-[10px] text-text-tertiary font-light">
                 This will permanently delete all chat history, context attachments, and metadata. This action cannot be undone.
               </div>
             </div>
@@ -615,8 +584,6 @@ defineProps<{
 }>()
 
 const userConfig = await getUserConfig()
-const numCtx = userConfig.llm.numCtx.toRef()
-const enableNumCtx = userConfig.llm.enableNumCtx.toRef()
 const translationSystemPrompt = userConfig.translation.systemPrompt.toRef()
 const chatSystemPrompt = userConfig.chat.systemPrompt.toRef()
 const enableReasoning = userConfig.llm.reasoning.toRef()
@@ -653,6 +620,7 @@ const simulateClickOnLink = userConfig.browserUse.simulateClickOnLink.toRef()
 const articles = ref<{ type: 'html' | 'pdf', url: string, title: string, content: string, html?: string, fileName?: string, parser: string }[]>()
 const modelProviderOptions = [
   { id: 'ollama' as const, label: 'Ollama' },
+  { id: 'lm-studio' as const, label: 'LM Studio' },
   { id: 'web-llm' as const, label: 'Web LLM' },
 ]
 
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
new file mode 100644
index 00000000..33743ab6
--- /dev/null
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/LMStudioConfiguration.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { useCountdown } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
+
+import IconLMStudioLogo from '@/assets/icons/logo-lm-studio.png?url'
+import Checkbox from '@/components/Checkbox.vue'
+import Input from '@/components/Input.vue'
+import Loading from '@/components/Loading.vue'
+import ScrollTarget from '@/components/ScrollTarget.vue'
+import Button from '@/components/ui/Button.vue'
+import Text from '@/components/ui/Text.vue'
+import WarningMessage from '@/components/WarningMessage.vue'
+import { useLogger } from '@/composables/useLogger'
+import { useValueGuard } from '@/composables/useValueGuard'
+import { SettingsScrollTarget } from '@/types/scroll-targets'
+import { LM_STUDIO_HOMEPAGE_URL, LM_STUDIO_SEARCH_URL, MIN_CONTEXT_WINDOW_SIZE } from '@/utils/constants'
+import { useI18n } from '@/utils/i18n'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+import { settings2bRpc } from '@/utils/rpc'
+import { getUserConfig } from '@/utils/user-config'
+
+import Block from '../../Block.vue'
+import SavedMessage from '../../SavedMessage.vue'
+import Section from '../../Section.vue'
+import ModelManagement from './ModelManagement/LMStudio.vue'
+
+defineProps<{
+  scrollTarget?: SettingsScrollTarget
+}>()
+
+const logger = useLogger()
+const { t } = useI18n()
+const llmBackendStatusStore = useLLMBackendStatusStore()
+const userConfig = await getUserConfig()
+const baseUrl = userConfig.llm.backends.lmStudio.baseUrl.toRef()
+const endpointType = userConfig.llm.endpointType.toRef()
+const open = userConfig.settings.blocks.lmStudioConfig.open.toRef()
+const loading = ref(false)
+
+const { value: numCtx, guardedValue: guardedNumCtx, errorMessage: numCtxError } = useValueGuard(userConfig.llm.backends.lmStudio.numCtx.toRef(), (value) => {
+  return {
+    isValid: value >= MIN_CONTEXT_WINDOW_SIZE,
+    errorMessage: t('settings.ollama.context_window_size_error', { min: MIN_CONTEXT_WINDOW_SIZE }),
+  }
+})
+const enableNumCtx = userConfig.llm.backends.lmStudio.enableNumCtx.toRef()
+
+const onClickInstall = () => {
+  startCheckConnection()
+}
+
+const setupLMStudio = async () => {
+  endpointType.value = 'lm-studio'
+  const success = await llmBackendStatusStore.updateLMStudioConnectionStatus()
+  await llmBackendStatusStore.updateLMStudioModelList()
+  if (success) {
+    stopCheckConnection()
+  }
+}
+
+const testConnection = async () => {
+  loading.value = true
+  try {
+    await reScanLMStudio()
+    const success = await llmBackendStatusStore.updateLMStudioConnectionStatus()
+    success ? (await llmBackendStatusStore.updateLMStudioModelList()) : llmBackendStatusStore.clearLMStudioModelList()
+    settings2bRpc.updateSidepanelModelList()
+    return success
+  }
+  catch (error) {
+    logger.error('Error testing connection:', error)
+    return false
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const reScanLMStudio = async () => {
+  const success = await llmBackendStatusStore.updateLMStudioConnectionStatus()
+  logger.info('LMStudio connection test result:', success)
+  if (success && endpointType.value === 'web-llm') {
+    endpointType.value = 'lm-studio'
+    stopCheckConnection()
+  }
+}
+
+watch(baseUrl, (newValue) => {
+  try {
+    // if using server, reset numCtx to 8k and enableNumCtx to true
+    const url = new URL(newValue)
+    const isLocalhost = url.hostname === 'localhost' || url.hostname === '127.0.0.1'
+    if (!isLocalhost) {
+      userConfig.llm.backends.lmStudio.numCtx.resetDefault()
+      userConfig.llm.backends.lmStudio.enableNumCtx.set(true)
+    }
+  }
+  catch {
+    // avoid error when baseUrl is not a valid url
+  }
+})
+
+const { start: startCheckConnection, stop: stopCheckConnection, remaining: checkSignal } = useCountdown(600, { interval: 2000 })
+
+watch(checkSignal, (val) => {
+  if (val) reScanLMStudio()
+})
+
+onMounted(async () => {
+  testConnection()
+})
+</script>
+
+<template>
+  <Block
+    v-model:open="open"
+    :title="t('settings.providers.lm_studio.title')"
+    collapsible
+  >
+    <template #title>
+      <div class="flex items-center gap-3">
+        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-02">
+          <img
+            :src="IconLMStudioLogo"
+            class="size-6"
+          >
+        </div>
+        <span class="font-medium text-base">
+          {{ t('settings.providers.lm_studio.title') }}
+        </span>
+      </div>
+    </template>
+    <div class="flex flex-col gap-4">
+      <Section v-if="endpointType === 'web-llm'">
+        <span
+          class="block mt-2"
+        >
+          <Text
+            color="secondary"
+            size="xs"
+            class="leading-4"
+          >
+            {{ t('settings.webllm_desc_lm_studio') }}
+          </Text>
+        </span>
+      </Section>
+      <Section>
+        <div class="flex flex-col gap-6 items-stretch">
+          <a
+            v-if="endpointType === 'web-llm'"
+            :href="LM_STUDIO_HOMEPAGE_URL"
+            target="_blank"
+            @click="onClickInstall"
+          >
+            <Button
+              class="h-8 px-[10px] font-medium text-xs"
+              variant="primary"
+            >
+              {{ t('settings.get_lm_studio') }}
+            </Button>
+          </a>
+          <ScrollTarget
+            v-if="endpointType !== 'web-llm'"
+            :autoScrollIntoView="scrollTarget === 'lm-studio-server-address-section'"
+            showHighlight
+            class="w-full"
+          >
+            <Section
+              :title="t('settings.lm_studio.server_address')"
+              class="w-full"
+            >
+              <div class="flex flex-col gap-1">
+                <div class="flex gap-3 items-stretch">
+                  <Input
+                    v-model="baseUrl"
+                    class="rounded-md py-2 px-4 grow"
+                    wrapperClass="w-full"
+                  />
+                </div>
+                <Text
+                  color="secondary"
+                  size="xs"
+                  display="block"
+                >
+                  {{ t('settings.lm_studio.server_address_desc') }}
+                </Text>
+                <SavedMessage :watch="baseUrl" />
+              </div>
+            </Section>
+          </ScrollTarget>
+          <Section
+            v-if="endpointType !== 'web-llm'"
+            class="w-full"
+          >
+            <template #title>
+              <div class="flex justify-between">
+                <Text
+                  class="font-medium text-sm"
+                  display="block"
+                >
+                  {{ t('settings.ollama.context_window_size') }}
+                </Text>
+                <div class="flex gap-2 items-center">
+                  <Checkbox v-model="enableNumCtx">
+                    <template #label>
+                      <Text
+                        class="font-medium text-xs"
+                        display="block"
+                      >
+                        {{ t('settings.ollama.custom_context_window_size') }}
+                      </Text>
+                    </template>
+                  </Checkbox>
+                </div>
+              </div>
+            </template>
+            <div class="flex flex-col gap-1">
+              <div class="flex gap-3 items-stretch">
+                <Input
+                  v-model="numCtx"
+                  min="512"
+                  :error="!!numCtxError"
+                  type="number"
+                  :disabled="!enableNumCtx"
+                  class="rounded-md py-2 px-4 grow"
+                  wrapperClass="w-full"
+                />
+              </div>
+              <div>
+                <Text
+                  color="secondary"
+                  size="xs"
+                  display="block"
+                >
+                  {{ t('settings.ollama.context_window_size_desc') }}
+                </Text>
+                <SavedMessage
+                  v-if="!numCtxError"
+                  :watch="[guardedNumCtx, enableNumCtx]"
+                />
+              </div>
+              <WarningMessage
+                v-if="numCtxError"
+                class="text-xs"
+                :message="numCtxError"
+              />
+            </div>
+          </Section>
+          <ModelManagement v-if="endpointType !== 'web-llm'" />
+          <Text
+            v-if="endpointType === 'web-llm'"
+            display="block"
+            color="secondary"
+            size="xs"
+            class="font-normal leading-4"
+          >
+            <div
+              class="flex gap-1"
+            >
+              <span>{{ t('settings.providers.lm_studio.already_installed') }}</span>
+              <button
+                class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
+                @click="setupLMStudio"
+              >
+                {{ t('settings.ollama.setup') }}
+              </button>
+            </div>
+          </Text>
+          <div>
+            <div class="flex items-center justify-center flex-wrap gap-2 w-full font-medium">
+              <Button
+                variant="secondary"
+                class="flex items-center justify-center min-h-8 min-w-40 py-1"
+                @click="testConnection"
+              >
+                <Loading
+                  v-if="loading"
+                  :size="12"
+                />
+                <span v-else>
+                  {{ t('settings.general.refresh_status') }}
+                </span>
+              </Button>
+              <a
+                :href="LM_STUDIO_SEARCH_URL"
+                target="_blank"
+              >
+                <Button class="flex items-center gap-[2px] justify-center min-h-8 min-w-40 py-1">
+                  {{ t('settings.general.discover_more_models') }}
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </div>
+  </Block>
+</template>
diff --git a/entrypoints/settings/components/GeneralSettings/RunningModels/Card.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
similarity index 58%
rename from entrypoints/settings/components/GeneralSettings/RunningModels/Card.vue
rename to entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
index 958c7f9d..622c13f2 100644
--- a/entrypoints/settings/components/GeneralSettings/RunningModels/Card.vue
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Card.vue
@@ -1,15 +1,36 @@
 <template>
-  <div class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex flex-col gap-[6px]">
-    <div class="flex justify-between items-start">
+  <div class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex flex-col gap-[6px]">
+    <div class="flex justify-between items-start gap-1">
       <div class="flex flex-col">
-        <div class="flex gap-2 py-[2px] items-center">
+        <div class="flex gap-2 items-center">
           <ModelLogo
             class="w-9 h-9 rounded-full shrink-0"
             :modelId="model"
           />
           <div class="flex flex-col gap-1">
-            <div>{{ model }}</div>
-            <StatusBadge status="success">
+            <div class="flex gap-2 items-center">
+              <div class="wrap-anywhere">
+                {{ name || model }}
+              </div>
+              <div v-if="sizeTag">
+                <Tag
+                  class="rounded-full bg-bg-tag border border-border-strong text-text-secondary flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
+                >
+                  <template #icon>
+                    <IconVRam />
+                  </template>
+                  <template #text>
+                    <Text class="font-medium whitespace-nowrap">
+                      {{ sizeTag }}
+                    </Text>
+                  </template>
+                </Tag>
+              </div>
+            </div>
+            <StatusBadge
+              v-if="showStatus"
+              status="success"
+            >
               <template #text>
                 {{ t('settings.ollama.running') }}
               </template>
@@ -18,18 +39,32 @@
         </div>
       </div>
       <Button
+        v-if="allowUnload"
         variant="secondary"
-        class="px-[10px] py-[6px] whitespace-nowrap"
+        class="px-[10px] py-1 min-h-8 whitespace-nowrap text-[13px] font-medium flex items-center gap-[6px]"
         @click="$emit('unload', model)"
       >
+        <IconUnload class="size-4" />
         {{ t('settings.ollama.unload') }}
       </Button>
+      <Button
+        v-if="allowDelete"
+        variant="secondary"
+        class="px-[10px] py-1 min-h-8 whitespace-nowrap text-[13px] font-medium flex items-center gap-[6px]"
+        @click="$emit('delete', model)"
+      >
+        <IconDelete class="size-4" />
+        {{ t('settings.delete') }}
+      </Button>
     </div>
-    <div class="flex flex-wrap items-center gap-[6px]">
+    <div
+      v-if="tags.length"
+      class="flex flex-wrap items-center gap-[6px]"
+    >
       <Tag
         v-for="tag of tags"
         :key="tag.key"
-        class="rounded-full bg-[#F4F4F5] border border-[#E4E4E7] text-[#52525B] flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
+        class="rounded-full bg-bg-tag border border-border text-text-secondary flex items-center gap-[3px] px-2 py-0 min-h-6 box-border"
       >
         <template #icon>
           <component :is="tag.icon" />
@@ -48,11 +83,13 @@
 
 import { computed } from 'vue'
 
+import IconDelete from '@/assets/icons/delete.svg?component'
 import IconExpires from '@/assets/icons/settings-model-expires.svg?component'
 import IconParams from '@/assets/icons/settings-model-parameter-size.svg?component'
 import IconQuant from '@/assets/icons/settings-model-quantization-level.svg?component'
 import IconVRam from '@/assets/icons/settings-model-vram.svg?component'
 import IconThinking from '@/assets/icons/thinking-capability.svg?component'
+import IconUnload from '@/assets/icons/unload.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
 import Tag from '@/components/Tag.vue'
@@ -63,16 +100,22 @@ import { useI18n } from '@/utils/i18n'
 import { ByteSize } from '@/utils/sizes'
 
 const props = defineProps<{
+  name?: string
   model: string
+  size?: number
   sizeVRam?: number
   parameterSize?: string
   quantLevel?: string
   expiresAt?: number
   supportsThinking?: boolean
+  allowUnload?: boolean
+  allowDelete?: boolean
+  showStatus?: boolean
 }>()
 
 defineEmits<{
   (e: 'unload', model: string): void
+  (e: 'delete', model: string): void
 }>()
 
 const { t, formatDuration } = useI18n()
@@ -85,6 +128,13 @@ const expireDuration = computed(() => {
   return t('settings.ollama.expires_in', { duration: formatDuration(duration) })
 })
 
+const sizeTag = computed(() => {
+  if (!props.size) {
+    return undefined
+  }
+  return ByteSize.fromBytes(props.size).format(2)
+})
+
 const tags = computed(() => {
   return [
     props.sizeVRam ? { key: 'vram', icon: IconVRam, text: t('settings.general.running_models.vram', { size: ByteSize.fromBytes(props.sizeVRam).format(2) }) } : undefined,
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
new file mode 100644
index 00000000..3d605330
--- /dev/null
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/LMStudio.vue
@@ -0,0 +1,84 @@
+<template>
+  <Section
+    class="w-full"
+    :title="t('settings.ollama.running_models')"
+  >
+    <div class="flex flex-col gap-3">
+      <div
+        v-if="runningModels.length"
+        class="flex flex-col gap-2"
+      >
+        <Card
+          v-for="model in runningModels"
+          :key="model.modelKey"
+          :name="model.displayName"
+          :model="model.modelKey"
+          :sizeVRam="model.sizeBytes"
+          :parameterSize="model.paramsString"
+          :quantLevel="model.quantization?.name"
+          allowUnload
+          @unload="onUnloadModel(model)"
+        />
+      </div>
+      <div
+        v-else-if="lmStudioConnectionStatus === 'connected'"
+        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+      >
+        <IconNoActiveModels class="h-4" />
+        {{ t('settings.general.running_models.lm_studio_no_active_models') }}
+      </div>
+      <div
+        v-else
+        class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+      >
+        <IconUnconnected class="h-4" />
+        {{ t('settings.general.running_models.not_connected_to_lm_studio') }}
+      </div>
+      <div class="rounded-md border border-border-strong bg-bg-component px-2 py-[3px]">
+        <Text
+          color="secondary"
+          size="xs"
+        >
+          {{ t('settings.providers.lm_studio.model_management_desc') }}
+        </Text>
+      </div>
+    </div>
+  </Section>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { onMounted } from 'vue'
+
+import IconNoActiveModels from '@/assets/icons/ollama-no-active-models.svg?component'
+import IconUnconnected from '@/assets/icons/ollama-unconnected.svg?component'
+import Text from '@/components/ui/Text.vue'
+import { useConfirm } from '@/composables/useConfirm'
+import { nonNullable } from '@/utils/array'
+import { useI18n } from '@/utils/i18n'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+
+import Section from '../../../Section.vue'
+import Card from './Card.vue'
+
+const confirm = useConfirm()
+const { lmStudioModelList, lmStudioConnectionStatus } = toRefs(useLLMBackendStatusStore())
+const { unloadLMStudioModel, updateLMStudioModelList } = useLLMBackendStatusStore()
+const { t } = useI18n()
+
+const onUnloadModel = (model: typeof runningModels.value[number]) => {
+  confirm({
+    message: t('settings.general.unload_model_confirm', { model: model.displayName || model.modelKey }),
+    async onConfirm() { await unloadLMStudioModel(model.identifier) },
+  })
+}
+
+const runningModels = computed(() => {
+  return lmStudioModelList.value.map((model) => model.instances).flat().filter(nonNullable)
+})
+
+onMounted(() => {
+  updateLMStudioModelList()
+})
+
+</script>
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue
new file mode 100644
index 00000000..e333353d
--- /dev/null
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/ModelManagement/Ollama.vue
@@ -0,0 +1,123 @@
+<template>
+  <Section
+    class="w-full"
+    :title="t('settings.ollama.model_management')"
+  >
+    <div class="flex flex-col gap-3">
+      <CollapsibleSection
+        :defaultOpen="true"
+        class="mt-3"
+        :title="`${t('settings.ollama.running_models')} ${ollamaConnectionStatus === 'connected' ? `(${runningModels.length})` : ''}`"
+      >
+        <div
+          v-if="runningModels.length"
+          class="flex flex-col gap-3"
+        >
+          <Card
+            v-for="model in runningModels"
+            :key="model.model"
+            :model="model.model"
+            :sizeVRam="model.sizeVRam"
+            :parameterSize="model.parameterSize"
+            :quantLevel="model.quantizationLevel"
+            :expiresAt="model.expiresAt"
+            :supportsThinking="model.supportsThinking"
+            allowUnload
+            showStatus
+            @unload="onUnloadModel(model.model)"
+          />
+        </div>
+        <div
+          v-else-if="ollamaConnectionStatus === 'connected'"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+        >
+          <IconNoActiveModels class="h-4" />
+          {{ t('settings.general.running_models.no_active_models') }}
+        </div>
+        <div
+          v-else
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+        >
+          <IconUnconnected class="h-4" />
+          {{ t('settings.general.running_models.not_connected_to_ollama') }}
+        </div>
+      </CollapsibleSection>
+      <CollapsibleSection
+        :defaultOpen="false"
+        class="mt-3"
+        :title="`${t('settings.ollama.downloaded_models')} ${ollamaConnectionStatus === 'connected' ? `(${ollamaModelList.length})` : ''}`"
+      >
+        <div
+          v-if="ollamaModelList.length"
+          class="flex flex-col gap-3"
+        >
+          <Card
+            v-for="model in ollamaModelList"
+            :key="model.model"
+            :model="model.model"
+            :size="model.size"
+            allowDelete
+            @delete="onDeleteModel(model)"
+          />
+        </div>
+        <div
+          v-else-if="ollamaConnectionStatus === 'connected'"
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+        >
+          <IconNoActiveModels class="h-4" />
+          {{ t('settings.general.running_models.no_active_models') }}
+        </div>
+        <div
+          v-else
+          class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+        >
+          <IconUnconnected class="h-4" />
+          {{ t('settings.general.running_models.not_connected_to_ollama') }}
+        </div>
+      </CollapsibleSection>
+    </div>
+  </Section>
+</template>
+
+<script setup lang="ts">
+import { computed, toRefs } from 'vue'
+import { onMounted } from 'vue'
+
+import IconNoActiveModels from '@/assets/icons/ollama-no-active-models.svg?component'
+import IconUnconnected from '@/assets/icons/ollama-unconnected.svg?component'
+import { useConfirm } from '@/composables/useConfirm'
+import { useI18n } from '@/utils/i18n'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+
+import CollapsibleSection from '../../../CollapsibleSection.vue'
+import Section from '../../../Section.vue'
+import Card from './Card.vue'
+
+const confirm = useConfirm()
+const { ollamaModelList, ollamaConnectionStatus } = toRefs(useLLMBackendStatusStore())
+const { unloadOllamaModel, deleteOllamaModel, updateOllamaModelList } = useLLMBackendStatusStore()
+const { t } = useI18n()
+
+const onUnloadModel = (model: string) => {
+  confirm({
+    message: t('settings.general.unload_model_confirm', { model }),
+    async onConfirm() { await unloadOllamaModel(model) },
+  })
+}
+
+const onDeleteModel = (model: typeof ollamaModelList.value[number]) => {
+  confirm({
+    message: t('settings.general.delete_model_confirm', { model: model.name || model.model }),
+    async onConfirm() { await deleteOllamaModel(model.model) },
+  })
+}
+
+const runningModels = computed(() => {
+  return ollamaModelList.value.filter((model) => model.expiresAt)
+})
+
+onMounted(() => {
+  updateOllamaModelList()
+})
+
+</script>
diff --git a/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
new file mode 100644
index 00000000..7fdcf235
--- /dev/null
+++ b/entrypoints/settings/components/GeneralSettings/Blocks/OllamaConfiguration.vue
@@ -0,0 +1,317 @@
+<script setup lang="ts">
+import { useCountdown } from '@vueuse/core'
+import { onMounted, ref, toRef, watch } from 'vue'
+
+import IconOllamaLogo from '@/assets/icons/logo-ollama.svg?component'
+import IconOllamaRedirect from '@/assets/icons/ollama-redirect.svg?component'
+import IconUnconnected from '@/assets/icons/ollama-unconnected.svg?component'
+import Checkbox from '@/components/Checkbox.vue'
+import Input from '@/components/Input.vue'
+import Loading from '@/components/Loading.vue'
+import ScrollTarget from '@/components/ScrollTarget.vue'
+import Button from '@/components/ui/Button.vue'
+import Text from '@/components/ui/Text.vue'
+import WarningMessage from '@/components/WarningMessage.vue'
+import { useLogger } from '@/composables/useLogger'
+import { useValueGuard } from '@/composables/useValueGuard'
+import { SettingsScrollTarget } from '@/types/scroll-targets'
+import { MIN_CONTEXT_WINDOW_SIZE, OLLAMA_HOMEPAGE_URL, OLLAMA_SEARCH_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
+import { useI18n } from '@/utils/i18n'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+import { settings2bRpc } from '@/utils/rpc'
+import { getUserConfig } from '@/utils/user-config'
+
+import Block from '../../Block.vue'
+import SavedMessage from '../../SavedMessage.vue'
+import Section from '../../Section.vue'
+import ModelManagement from './ModelManagement/Ollama.vue'
+
+defineProps<{
+  scrollTarget?: SettingsScrollTarget
+}>()
+
+const logger = useLogger()
+const { t } = useI18n()
+const llmBackendStatusStore = useLLMBackendStatusStore()
+const userConfig = await getUserConfig()
+const baseUrl = userConfig.llm.backends.ollama.baseUrl.toRef()
+const endpointType = userConfig.llm.endpointType.toRef()
+const loading = ref(false)
+const open = userConfig.settings.blocks.ollamaConfig.open.toRef()
+const ollamaConnectionStatus = toRef(llmBackendStatusStore, 'ollamaConnectionStatus')
+
+const { value: numCtx, guardedValue: guardedNumCtx, errorMessage: numCtxError } = useValueGuard(userConfig.llm.backends.ollama.numCtx.toRef(), (value) => {
+  return {
+    isValid: value >= MIN_CONTEXT_WINDOW_SIZE,
+    errorMessage: t('settings.ollama.context_window_size_error', { min: MIN_CONTEXT_WINDOW_SIZE }),
+  }
+})
+const enableNumCtx = userConfig.llm.backends.ollama.enableNumCtx.toRef()
+
+const onClickInstall = () => {
+  startCheckConnection()
+}
+
+const setupOllama = async () => {
+  endpointType.value = 'ollama'
+  const success = await llmBackendStatusStore.updateOllamaConnectionStatus()
+  await llmBackendStatusStore.updateOllamaModelList()
+  if (success) {
+    stopCheckConnection()
+  }
+}
+
+const testConnection = async () => {
+  loading.value = true
+  try {
+    await reScanOllama()
+    const success = await llmBackendStatusStore.updateOllamaConnectionStatus()
+    success ? (await llmBackendStatusStore.updateOllamaModelList()) : llmBackendStatusStore.clearOllamaModelList()
+    settings2bRpc.updateSidepanelModelList()
+    return success
+  }
+  catch (error) {
+    logger.error('Error testing connection:', error)
+    return false
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+const reScanOllama = async () => {
+  const success = await llmBackendStatusStore.updateOllamaConnectionStatus()
+  logger.info('Ollama connection test result:', success)
+  if (success && endpointType.value === 'web-llm') {
+    endpointType.value = 'ollama'
+    stopCheckConnection()
+  }
+}
+
+const { start: startCheckConnection, stop: stopCheckConnection, remaining: checkSignal } = useCountdown(600, { interval: 2000 })
+
+watch(checkSignal, (val) => {
+  if (val) reScanOllama()
+})
+
+watch(baseUrl, (newValue) => {
+  try {
+    // if using server, reset numCtx to 8k and enableNumCtx to true
+    const url = new URL(newValue)
+    const isLocalhost = url.hostname === 'localhost' || url.hostname === '127.0.0.1'
+    if (!isLocalhost) {
+      userConfig.llm.backends.ollama.numCtx.resetDefault()
+      userConfig.llm.backends.ollama.enableNumCtx.set(true)
+    }
+  }
+  catch {
+    // avoid error when baseUrl is not a valid url
+  }
+})
+
+onMounted(async () => {
+  testConnection()
+})
+</script>
+
+<template>
+  <Block
+    v-model:open="open"
+    :title="t('settings.providers.ollama.title')"
+    collapsible
+  >
+    <template #title>
+      <div class="flex items-center gap-3">
+        <div class="size-6 rounded-md flex items-center justify-center overflow-hidden shadow-02 text-text-primary">
+          <IconOllamaLogo class="size-5" />
+        </div>
+        <span class="font-medium text-base">
+          {{ t('settings.providers.ollama.title') }}
+        </span>
+      </div>
+    </template>
+    <div class="flex flex-col gap-4">
+      <Section v-if="endpointType === 'web-llm'">
+        <span
+          class="block mt-2"
+        >
+          <Text
+            color="secondary"
+            size="xs"
+            class="leading-4"
+          >
+            {{ t('settings.webllm-desc') }}
+          </Text>
+        </span>
+      </Section>
+      <Section>
+        <div class="flex flex-col gap-6 items-stretch">
+          <a
+            v-if="endpointType === 'web-llm'"
+            :href="OLLAMA_HOMEPAGE_URL"
+            target="_blank"
+            @click="onClickInstall"
+          >
+            <Button
+              class="h-8 px-[10px] font-medium text-xs"
+              variant="primary"
+            >
+              {{ t('settings.get_ollama') }}
+            </Button>
+          </a>
+          <ScrollTarget
+            v-if="endpointType !== 'web-llm'"
+            :autoScrollIntoView="scrollTarget === 'ollama-server-address-section'"
+            showHighlight
+            class="w-full"
+          >
+            <Section
+              :title="t('settings.ollama.server_address')"
+              class="w-full"
+            >
+              <div class="flex flex-col gap-1">
+                <div class="flex gap-3 items-stretch">
+                  <Input
+                    v-model="baseUrl"
+                    class="rounded-md py-2 px-4 grow"
+                    wrapperClass="w-full"
+                  />
+                </div>
+                <Text
+                  color="secondary"
+                  size="xs"
+                  display="block"
+                >
+                  {{ t('settings.ollama.server_address_desc') }}
+                </Text>
+                <SavedMessage :watch="baseUrl" />
+              </div>
+            </Section>
+          </ScrollTarget>
+          <Section
+            v-if="endpointType !== 'web-llm'"
+            class="w-full"
+          >
+            <template #title>
+              <div class="flex justify-between">
+                <Text
+                  class="font-medium text-sm"
+                  display="block"
+                >
+                  {{ t('settings.ollama.context_window_size') }}
+                </Text>
+                <div class="flex gap-2 items-center">
+                  <Checkbox v-model="enableNumCtx">
+                    <template #label>
+                      <Text
+                        class="font-medium text-xs"
+                        display="block"
+                      >
+                        {{ t('settings.ollama.custom_context_window_size') }}
+                      </Text>
+                    </template>
+                  </Checkbox>
+                </div>
+              </div>
+            </template>
+            <div class="flex flex-col gap-1">
+              <div class="flex gap-3 items-stretch">
+                <Input
+                  v-model="numCtx"
+                  min="512"
+                  :error="!!numCtxError"
+                  type="number"
+                  :disabled="!enableNumCtx"
+                  class="rounded-md py-2 px-4 grow"
+                  wrapperClass="w-full"
+                />
+              </div>
+              <div>
+                <Text
+                  color="secondary"
+                  size="xs"
+                  display="block"
+                >
+                  {{ t('settings.ollama.context_window_size_desc') }}
+                </Text>
+                <SavedMessage
+                  v-if="!numCtxError"
+                  :watch="[guardedNumCtx, enableNumCtx]"
+                />
+              </div>
+              <WarningMessage
+                v-if="numCtxError"
+                class="text-xs"
+                :message="numCtxError"
+              />
+            </div>
+          </Section>
+          <ModelManagement v-if="endpointType !== 'web-llm' && ollamaConnectionStatus === 'connected'" />
+          <div
+            v-if="endpointType !== 'web-llm' && ollamaConnectionStatus !== 'connected'"
+            class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_var(--color-shadow-soft),0px_1px_2px_-1px_var(--color-shadow-medium),0px_0px_0px_1px_var(--color-shadow-medium)] p-3 flex gap-2 text-text-tertiary font-medium text-xs"
+          >
+            <IconUnconnected class="h-4" />
+            {{ t('settings.general.running_models.not_connected_to_ollama') }}
+          </div>
+          <div v-if="ollamaConnectionStatus !== 'connected'">
+            <Text
+              color="secondary"
+              size="xs"
+              class="font-normal leading-4"
+            >
+              <div
+                v-if="endpointType === 'web-llm'"
+                class="flex gap-1"
+              >
+                <span>{{ t('settings.ollama.already_installed') }}</span>
+                <button
+                  class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
+                  @click="setupOllama"
+                >
+                  {{ t('settings.ollama.setup') }}
+                </button>
+              </div>
+              <div class="flex gap-1">
+                <span>{{ t('settings.ollama.need_help') }}</span>
+                <a
+                  :href="OLLAMA_TUTORIAL_URL"
+                  target="_blank"
+                  class="underline whitespace-nowrap hover:text-text-primary cursor-pointer text-text-link"
+                >
+                  {{ t('settings.ollama.follow_guide') }}
+                </a>
+              </div>
+            </Text>
+          </div>
+          <div>
+            <div class="flex items-center justify-center flex-wrap gap-2 w-full font-medium">
+              <Button
+                variant="secondary"
+                class="flex items-center justify-center min-h-8 min-w-40 py-1"
+                @click="testConnection"
+              >
+                <Loading
+                  v-if="loading"
+                  :size="12"
+                />
+                <span v-else>
+                  {{ t('settings.general.refresh_status') }}
+                </span>
+              </Button>
+              <a
+                :href="OLLAMA_SEARCH_URL"
+                target="_blank"
+              >
+                <Button class="flex items-center gap-[2px] justify-center min-h-8 min-w-40 py-1">
+                  <IconOllamaRedirect />
+                  {{ t('settings.general.discover_more_models') }}
+                </Button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </div>
+  </Block>
+</template>
diff --git a/entrypoints/settings/components/GeneralSettings/RunningModels/index.vue b/entrypoints/settings/components/GeneralSettings/RunningModels/index.vue
deleted file mode 100644
index 44cb7ed6..00000000
--- a/entrypoints/settings/components/GeneralSettings/RunningModels/index.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <Section
-    class="w-full"
-    :title="t('settings.ollama.running_models')"
-  >
-    <div
-      v-if="runningModels.length"
-      class="flex flex-col gap-2"
-    >
-      <Card
-        v-for="model in runningModels"
-        :key="model.model"
-        :model="model.model"
-        :sizeVRam="model.sizeVRam"
-        :parameterSize="model.parameterSize"
-        :quantLevel="model.quantizationLevel"
-        :expiresAt="model.expiresAt"
-        :supportsThinking="model.supportsThinking"
-        @unload="onUnloadModel(model.model)"
-      />
-    </div>
-    <div
-      v-else-if="connectionStatus === 'connected'"
-      class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
-    >
-      <IconNoActiveModels class="h-4" />
-      {{ t('settings.general.running_models.no_active_models') }}
-    </div>
-    <div
-      v-else
-      class="bg-bg-component rounded-xl shadow-[0px_2px_4px_0px_#0000000A,0px_1px_2px_-1px_#00000014,0px_0px_0px_1px_#00000014] p-3 flex gap-2 text-[#6E757C] font-medium text-xs"
-    >
-      <IconUnconnected class="h-4" />
-      {{ t('settings.general.running_models.not_connected_to_ollama') }}
-    </div>
-  </Section>
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs } from 'vue'
-import { onMounted } from 'vue'
-
-import IconNoActiveModels from '@/assets/icons/ollama-no-active-models.svg?component'
-import IconUnconnected from '@/assets/icons/ollama-unconnected.svg?component'
-import { useConfirm } from '@/composables/useConfirm'
-import { useI18n } from '@/utils/i18n'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
-
-import Section from '../../Section.vue'
-import Card from './Card.vue'
-
-const confirm = useConfirm()
-const { modelList, connectionStatus } = toRefs(useOllamaStatusStore())
-const { unloadModel, updateModelList } = useOllamaStatusStore()
-const { t } = useI18n()
-
-const onUnloadModel = (model: string) => {
-  confirm({
-    message: t('settings.general.unload_model_confirm', { model }),
-    async onConfirm() { await unloadModel(model) },
-  })
-}
-
-const runningModels = computed(() => {
-  return modelList.value.filter((model) => model.expiresAt)
-})
-
-onMounted(() => {
-  updateModelList()
-})
-
-</script>
diff --git a/entrypoints/settings/components/GeneralSettings/index.vue b/entrypoints/settings/components/GeneralSettings/index.vue
index c76a3307..2beaa682 100644
--- a/entrypoints/settings/components/GeneralSettings/index.vue
+++ b/entrypoints/settings/components/GeneralSettings/index.vue
@@ -26,181 +26,8 @@
       />
     </Modal>
     <div class="flex flex-col gap-4">
-      <Block :title="t('settings.provider_model.title')">
-        <div class="flex flex-col gap-4">
-          <Section v-if="endpointType === 'web-llm'">
-            <span
-              class="block w-80 mt-2"
-            >
-              <Text
-                color="secondary"
-                size="xs"
-                class="leading-4"
-              >
-                {{ t('settings.webllm-desc') }}
-              </Text>
-            </span>
-          </Section>
-          <Section>
-            <div class="flex flex-col gap-6 items-stretch">
-              <a
-                v-if="endpointType === 'web-llm'"
-                :href="OLLAMA_HOMEPAGE_URL"
-                target="_blank"
-                @click="onClickInstall"
-              >
-                <Button
-                  class="h-8 px-[10px] font-medium text-xs"
-                  variant="primary"
-                >
-                  {{ t('settings.get_ollama') }}
-                </Button>
-              </a>
-              <ScrollTarget
-                v-if="endpointType === 'ollama'"
-                :autoScrollIntoView="settingsQuery.scrollTarget.value === 'server-address-section'"
-                showHighlight
-                class="w-full"
-              >
-                <Section
-                  :title="t('settings.ollama.server_address')"
-                  class="w-full"
-                >
-                  <div class="flex flex-col gap-1">
-                    <div class="flex gap-3 items-stretch">
-                      <Input
-                        v-model="baseUrl"
-                        class="rounded-md py-2 px-4 grow"
-                        wrapperClass="w-full"
-                      />
-                    </div>
-                    <Text
-                      color="secondary"
-                      size="xs"
-                      display="block"
-                    >
-                      {{ t('settings.ollama.server_address_desc') }}
-                    </Text>
-                    <SavedMessage :watch="baseUrl" />
-                  </div>
-                </Section>
-              </ScrollTarget>
-              <Section class="w-full">
-                <template #title>
-                  <div class="flex justify-between">
-                    <Text
-                      class="font-medium text-sm"
-                      display="block"
-                    >
-                      {{ t('settings.ollama.context_window_size') }}
-                    </Text>
-                    <div class="flex gap-2 items-center">
-                      <Checkbox v-model="enableNumCtx">
-                        <template #label>
-                          <Text
-                            class="font-medium text-xs"
-                            display="block"
-                          >
-                            {{ t('settings.ollama.custom_context_window_size') }}
-                          </Text>
-                        </template>
-                      </Checkbox>
-                    </div>
-                  </div>
-                </template>
-                <div class="flex flex-col gap-1">
-                  <div class="flex gap-3 items-stretch">
-                    <Input
-                      v-model="numCtx"
-                      min="512"
-                      :error="!!numCtxError"
-                      type="number"
-                      :disabled="!enableNumCtx"
-                      class="rounded-md py-2 px-4 grow"
-                      wrapperClass="w-full"
-                    />
-                  </div>
-                  <div>
-                    <Text
-                      color="secondary"
-                      size="xs"
-                      display="block"
-                    >
-                      {{ t('settings.ollama.context_window_size_desc') }}
-                    </Text>
-                    <SavedMessage
-                      v-if="!numCtxError"
-                      :watch="[guardedNumCtx, enableNumCtx]"
-                    />
-                  </div>
-                  <WarningMessage
-                    v-if="numCtxError"
-                    class="text-xs"
-                    :message="numCtxError"
-                  />
-                </div>
-              </Section>
-              <RunningModels />
-              <div v-if="connectionStatus !== 'connected'">
-                <Text
-                  color="secondary"
-                  size="xs"
-                  class="font-normal leading-4"
-                >
-                  <div
-                    v-if="endpointType === 'web-llm'"
-                    class="flex gap-1"
-                  >
-                    <span>{{ t('settings.ollama.already_installed') }}</span>
-                    <button
-                      class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
-                      @click="setupOllama"
-                    >
-                      {{ t('settings.ollama.setup') }}
-                    </button>
-                  </div>
-                  <div class="flex gap-1">
-                    <span>{{ t('settings.ollama.need_help') }}</span>
-                    <a
-                      :href="OLLAMA_TUTORIAL_URL"
-                      target="_blank"
-                      class="underline whitespace-nowrap hover:text-gray-800 cursor-pointer"
-                    >
-                      {{ t('settings.ollama.follow_guide') }}
-                    </a>
-                  </div>
-                </Text>
-              </div>
-              <div class="-mt-2">
-                <div class="flex items-center justify-center flex-wrap gap-2 w-full font-medium">
-                  <Button
-                    variant="secondary"
-                    class="flex items-center justify-center min-h-8 min-w-40 py-1"
-                    @click="testConnection"
-                  >
-                    <Loading
-                      v-if="loading"
-                      :size="12"
-                    />
-                    <span v-else>
-                      {{ t('settings.general.refresh_status') }}
-                    </span>
-                  </Button>
-                  <a
-                    :href="OLLAMA_SEARCH_URL"
-                    target="_blank"
-                  >
-                    <Button class="flex items-center gap-[2px] justify-center min-h-8 min-w-40 py-1">
-                      <IconRedirectToOllama />
-                      {{ t('settings.general.discover_more_models') }}
-                    </Button>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </Section>
-        </div>
-      </Block>
+      <OllamaConfiguration :scrollTarget="settingsQuery.scrollTarget.value" />
+      <LMStudioConfiguration :scrollTarget="settingsQuery.scrollTarget.value" />
       <Block :title="t('settings.interface.title')">
         <div class="flex flex-col gap-4">
           <Section
@@ -210,13 +37,14 @@
               <div class="w-52">
                 <UILanguageSelector />
               </div>
-              <div>
-                <Text
-                  color="secondary"
-                  size="xs"
-                >
-                  {{ t('settings.interface.interface_language_desc') }}
-                </Text>
+            </div>
+          </Section>
+          <Section
+            :title="t('settings.interface.theme')"
+          >
+            <div class="flex flex-col gap-1">
+              <div class="w-52">
+                <ThemeSelector />
               </div>
             </div>
           </Section>
@@ -227,67 +55,44 @@
 </template>
 
 <script setup lang="tsx">
-import { useCountdown } from '@vueuse/core'
-import { onMounted, ref, toRef, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
-import IconRedirectToOllama from '@/assets/icons/redirect-to-ollama.svg?component'
-import Checkbox from '@/components/Checkbox.vue'
-import Input from '@/components/Input.vue'
-import Loading from '@/components/Loading.vue'
 import Modal from '@/components/Modal.vue'
-import ScrollTarget from '@/components/ScrollTarget.vue'
-import Button from '@/components/ui/Button.vue'
-import Text from '@/components/ui/Text.vue'
+import ThemeSelector from '@/components/ThemeSelector.vue'
 import UILanguageSelector from '@/components/UILanguageSelector.vue'
-import WarningMessage from '@/components/WarningMessage.vue'
-import { useValueGuard } from '@/composables/useValueGuard'
-import { MIN_CONTEXT_WINDOW_SIZE, OLLAMA_HOMEPAGE_URL, OLLAMA_SEARCH_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
+import { useTheme } from '@/composables/theme'
 import { useI18n } from '@/utils/i18n/index'
-import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
-import { settings2bRpc } from '@/utils/rpc'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { getUserConfig } from '@/utils/user-config'
 
 import { useSettingsInitialQuery } from '../../composables/useQuery'
 import Block from '../Block.vue'
 import BlockTitle from '../BlockTitle.vue'
 import DownloadConfirmModal from '../OllamaDownloadModal.vue'
-import SavedMessage from '../SavedMessage.vue'
 import Section from '../Section.vue'
 import DownloadWebLLMModel from '../WebLLMDownloadModal.vue'
-import RunningModels from './RunningModels/index.vue'
-
-const log = logger.child('Settings')
+import LMStudioConfiguration from './Blocks/LMStudioConfiguration.vue'
+import OllamaConfiguration from './Blocks/OllamaConfiguration.vue'
 
 const { t } = useI18n()
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
+const { initializeTheme } = useTheme()
 
 const settingsQuery = useSettingsInitialQuery()
 const settingsRef = ref<HTMLElement | null>(null)
 const userConfig = await getUserConfig()
-const baseUrl = userConfig.llm.baseUrl.toRef()
 const endpointType = userConfig.llm.endpointType.toRef()
-const loading = ref(false)
 const isShowDownloadWebLLMModal = ref(false)
-const connectionStatus = toRef(ollamaStatusStore, 'connectionStatus')
 const isShowDownloadOllamaModal = ref(settingsQuery.downloadModel.hasValue())
 // Prompt refs
 const translationSystemPrompt = userConfig.translation.systemPrompt.toRef()
 const translationSystemPromptError = ref('')
 
-const { value: numCtx, guardedValue: guardedNumCtx, errorMessage: numCtxError } = useValueGuard(userConfig.llm.numCtx.toRef(), (value) => {
-  return {
-    isValid: value >= MIN_CONTEXT_WINDOW_SIZE,
-    errorMessage: t('settings.ollama.context_window_size_error', { min: MIN_CONTEXT_WINDOW_SIZE }),
-  }
-})
-const enableNumCtx = userConfig.llm.enableNumCtx.toRef()
-
 watch(() => settingsQuery.downloadModel.value, (v) => {
   if (v) isShowDownloadOllamaModal.value = true
 })
 const onDownloadOllamaModelFinished = async () => {
-  const modelList = await ollamaStatusStore.updateModelList()
+  const modelList = await llmBackendStatusStore.updateOllamaModelList()
   if (modelList.length) endpointType.value = 'ollama'
   // remove the value to avoid open modal in next navigation
   settingsQuery.downloadModel.remove()
@@ -299,52 +104,6 @@ const onDownloadWebLLMModelFinished = async (_model: string) => {
   isShowDownloadWebLLMModal.value = false
 }
 
-const testConnection = async () => {
-  loading.value = true
-  try {
-    await reScanOllama()
-    const success = await ollamaStatusStore.updateConnectionStatus()
-    success ? (await ollamaStatusStore.updateModelList()) : ollamaStatusStore.clearModelList()
-    settings2bRpc.updateSidepanelModelList()
-    return success
-  }
-  catch (error) {
-    log.error('Error testing connection:', error)
-    return false
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-const { start: startCheckConnection, stop: stopCheckConnection, remaining: checkSignal } = useCountdown(600, { interval: 2000 })
-
-watch(checkSignal, (val) => {
-  if (val) reScanOllama()
-})
-
-const onClickInstall = () => {
-  startCheckConnection()
-}
-
-const setupOllama = async () => {
-  endpointType.value = 'ollama'
-  const success = await ollamaStatusStore.updateConnectionStatus()
-  await ollamaStatusStore.updateModelList()
-  if (success) {
-    stopCheckConnection()
-  }
-}
-
-const reScanOllama = async () => {
-  const success = await ollamaStatusStore.updateConnectionStatus()
-  log.info('Ollama connection test result:', success)
-  if (success) {
-    endpointType.value = 'ollama'
-    stopCheckConnection()
-  }
-}
-
 watch(translationSystemPrompt, (newValue) => {
   if (!/\{\{LANGUAGE\}\}/.test(newValue)) {
     translationSystemPromptError.value = 'system prompt must contain {{LANGUAGE}}'
@@ -354,22 +113,7 @@ watch(translationSystemPrompt, (newValue) => {
   }
 })
 
-watch(baseUrl, (newValue) => {
-  try {
-    // if using server, reset numCtx to 8k and enableNumCtx to true
-    const url = new URL(newValue)
-    const isLocalhost = url.hostname === 'localhost' || url.hostname === '127.0.0.1'
-    if (!isLocalhost) {
-      userConfig.llm.numCtx.resetDefault()
-      userConfig.llm.enableNumCtx.set(true)
-    }
-  }
-  catch {
-    // avoid error when baseUrl is not a valid url
-  }
-})
-
 onMounted(async () => {
-  testConnection()
+  await initializeTheme()
 })
 </script>
diff --git a/entrypoints/settings/components/Layout.vue b/entrypoints/settings/components/Layout.vue
index 6e8f5d33..bf9c07c6 100644
--- a/entrypoints/settings/components/Layout.vue
+++ b/entrypoints/settings/components/Layout.vue
@@ -38,8 +38,8 @@ const onClickTitle = () => {
 
 <template>
   <div>
-    <div class="items-center h-15 box-border border-b border-gray-200">
-      <div class="px-6 flex justify-between items-center h-full">
+    <div class="items-center h-15 box-border border-b border-border-light">
+      <div class="px-6 flex justify-between items-center h-full bg-bg-app">
         <div
           class="text-base"
           @click="onClickTitle"
@@ -78,17 +78,17 @@ const onClickTitle = () => {
       </div>
     </div>
     <div class="flex h-[calc(100vh-60px)] overflow-hidden">
-      <div class="w-60 shrink-0 grow-0">
+      <div class="w-60 shrink-0 grow-0 bg-bg-app">
         <Sidebar :debug="enabledDebug" />
       </div>
-      <div class="flex-1 flex justify-center bg-[#F5F6FB] overflow-auto h-full min-w-80 px-4">
+      <div class="flex-1 flex justify-center bg-bg-secondary overflow-auto h-full min-w-80 px-4 text-text-primary">
         <div class="max-w-[640px] min-w-0 grow-1 shrink-1">
           <RouterView v-slot="{ Component }">
             <Suspense>
               <component :is="Component" />
             </Suspense>
           </RouterView>
-          <div class="font-light text-xs text-gray-500 flex flex-col gap-1 py-4">
+          <div class="font-light text-xs text-text-tertiary flex flex-col gap-1 py-4">
             <i18n-t
               keypath="settings.feedback.contact_msg"
               tag="div"
diff --git a/entrypoints/settings/components/OllamaDownloadModal.vue b/entrypoints/settings/components/OllamaDownloadModal.vue
index 897ec98d..c7135b7f 100644
--- a/entrypoints/settings/components/OllamaDownloadModal.vue
+++ b/entrypoints/settings/components/OllamaDownloadModal.vue
@@ -6,7 +6,7 @@
     :fadeInAnimation="false"
   >
     <ConfirmPanel
-      v-if="ollamaStatusStore.connectionStatus === 'connected'"
+      v-if="llmBackendStatusStore.ollamaConnectionStatus === 'connected'"
       :okButtonText="!pulling ? t('settings.model_downloader.download') : undefined"
       :cancelButtonText="t('common.cancel')"
       @ok="installModel"
@@ -19,13 +19,13 @@
       <template #body>
         <div
           v-if="!pulling"
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.description') }}
         </div>
         <div
           v-else
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.downloading') }}
         </div>
@@ -34,13 +34,13 @@
           class="flex gap-2 items-stretch flex-col mt-1"
         >
           <ProgressBar :progress="pulling.completed / (pulling.total || 1)" />
-          <div class="text-xs text-gray-500 flex justify-between items-center">
+          <div class="text-xs text-text-tertiary flex justify-between items-center">
             <div>{{ formatSize(pulling.completed) }}</div>
             <div>{{ pulling.total ? formatSize(pulling.total) : '-' }}</div>
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-red-500 text-xs flex items-center gap-1">
+          <div class="text-danger text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
@@ -51,14 +51,14 @@
       v-else
       :okButtonText="t('settings.model_downloader.retry')"
       :cancelButtonText="t('common.cancel')"
-      @ok="ollamaStatusStore.updateConnectionStatus"
+      @ok="llmBackendStatusStore.updateOllamaConnectionStatus"
       @cancel="cancel"
     >
       <template #title>
         {{ t('settings.model_downloader.unable_to_download') }}
       </template>
       <template #body>
-        {{ t('settings.model_downloader.could_not_connect_ollama') }}
+        {{ t('settings.model_downloader.could_not_connect', { endpointType: 'Ollama' }) }}
       </template>
     </ConfirmPanel>
   </Modal>
@@ -75,7 +75,7 @@ import { formatSize } from '@/utils/formatter'
 import { useI18n } from '@/utils/i18n'
 import { PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
 import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { settings2bRpc } from '@/utils/rpc'
 import dayjs from '@/utils/time'
 import { getUserConfig } from '@/utils/user-config'
@@ -96,7 +96,7 @@ const modelInfo = PREDEFINED_OLLAMA_MODELS.find((model) => model.id === props.mo
   name: props.model,
   size: 0,
 }
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const userConfig = await getUserConfig()
 const currentModel = userConfig.llm.model.toRef()
 
@@ -111,7 +111,7 @@ const installModel = async () => {
   const abortController = new AbortController()
   pulling.value = {
     modelId: modelInfo.id,
-    total: modelInfo.size,
+    total: modelInfo.size ?? 0,
     completed: 0,
     abort: () => abortController.abort(),
     status: 'pulling',
@@ -148,7 +148,7 @@ const updateCurrentModel = async () => {
   await settings2bRpc.updateSidepanelModelList().catch((error) => {
     log.error('Failed to update model list:', error)
   })
-  const modelList = await ollamaStatusStore.updateModelList()
+  const modelList = await llmBackendStatusStore.updateOllamaModelList()
   const latestUpdatedModel = modelList.filter((model) => model.modifiedAt).sort((a, b) =>
     dayjs(b.modifiedAt).diff(dayjs(a.modifiedAt)),
   )[0]
@@ -163,6 +163,6 @@ onBeforeUnmount(() => {
 })
 
 onMounted(() => {
-  ollamaStatusStore.updateConnectionStatus()
+  llmBackendStatusStore.updateOllamaConnectionStatus()
 })
 </script>
diff --git a/entrypoints/settings/components/Sidebar.vue b/entrypoints/settings/components/Sidebar.vue
index d97c6979..9eb080c9 100644
--- a/entrypoints/settings/components/Sidebar.vue
+++ b/entrypoints/settings/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col">
+  <div class="h-full flex flex-col text-text-primary">
     <div
       class="font-bold text-[21px] cursor-default px-6 py-5 leading-[26px]"
     >
@@ -11,7 +11,7 @@
         v-for="menuItem of menu"
         :key="menuItem.to"
         class="rounded-md py-[6px] px-[10px] min-h-8 transition-all text-xs font-medium flex gap-2 items-center"
-        activeClass="bg-[#F5F6FB]"
+        activeClass="bg-bg-selection"
         :to="menuItem.to"
       >
         <div class="flex items-center w-4">
diff --git a/entrypoints/settings/components/TranslationSettings/index.vue b/entrypoints/settings/components/TranslationSettings/index.vue
index dc1b304a..c68fc5d4 100644
--- a/entrypoints/settings/components/TranslationSettings/index.vue
+++ b/entrypoints/settings/components/TranslationSettings/index.vue
@@ -17,7 +17,7 @@
             <Selector
               v-model="targetLocale"
               :options="translationLanguageOptions"
-              dropdownClass="text-xs text-black w-52"
+              dropdownClass="text-xs text-text-primary w-52"
               dropdownAlign="left"
             />
           </Section>
diff --git a/entrypoints/settings/components/WebLLMDownloadModal.vue b/entrypoints/settings/components/WebLLMDownloadModal.vue
index 480a4c81..639af863 100644
--- a/entrypoints/settings/components/WebLLMDownloadModal.vue
+++ b/entrypoints/settings/components/WebLLMDownloadModal.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="bg-white text-black py-4 px-6 rounded-md max-w-full flex flex-col w-[340px] text-xs">
+  <div class="bg-bg-primary text-text-primary py-4 px-6 rounded-md max-w-full flex flex-col w-[340px] text-xs">
     <div class="font-bold text-base">
       {{ webLLMInitializeProgress.started ? t('settings.model_downloader.downloading_model', {model: DEFAULT_MODEL.name}) :t('settings.model_downloader.download_model', {model: DEFAULT_MODEL.name}) }}
       ({{ formatSize(DEFAULT_MODEL.weightsBinSize) }})
     </div>
     <div
       v-if="!webLLMInitializeProgress.started"
-      class="text-gray-600 text-sm"
+      class="text-text-secondary text-sm"
     >
       {{ t('settings.webllm_downloader.description', {model: DEFAULT_MODEL.name, size: formatSize(DEFAULT_MODEL.weightsBinSize)}) }}
     </div>
     <div
       v-else
-      class="text-gray-600 text-sm"
+      class="text-text-secondary text-sm"
     >
       {{ t('settings.model_downloader.downloading') }}
     </div>
@@ -22,7 +22,7 @@
     >
       <ProgressBar :progress="webLLMInitializeProgress.downloaded / (webLLMInitializeProgress.total || 1)" />
       <div class="flex gap-2 items-stretch flex-col">
-        <div class="text-[10px] text-gray-500 flex justify-between items-center">
+        <div class="text-[10px] text-text-tertiary flex justify-between items-center">
           <div>{{ formatSize(webLLMInitializeProgress.downloaded) }}</div>
           <div>{{ formatSize(webLLMInitializeProgress.total) }}</div>
         </div>
@@ -49,7 +49,7 @@
     </div>
     <div
       v-if="!supportedWebLLM.supported"
-      class="text-red-500 text-[10px] flex items-center gap-2 justify-start"
+      class="text-danger text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('errors.webllm_not_supported') }}
diff --git a/entrypoints/sidepanel/components/AttachmentSelector.vue b/entrypoints/sidepanel/components/AttachmentSelector.vue
index 189c9e8a..17c35072 100644
--- a/entrypoints/sidepanel/components/AttachmentSelector.vue
+++ b/entrypoints/sidepanel/components/AttachmentSelector.vue
@@ -13,12 +13,12 @@
         ref="selectorListContainer"
         class="absolute top-0 h-0 w-full z-50"
       >
-        <div class="translate-y-[calc(-100%-16px)] bg-bg-component rounded-lg shadow-01 p-1 w-full">
+        <div class="translate-y-[calc(-100%-16px)] bg-bg-component rounded-lg shadow-01 p-1 w-full text-text-primary">
           <div class="flex flex-col">
             <div class="w-full mb-px">
               <div
                 class="w-full flex items-center gap-1 px-1 py-2 cursor-pointer rounded-sm"
-                :class="[isAllTabSelected ? 'bg-[#DFE1E5]' : 'hover:bg-[#EAECEF]']"
+                :class="[isAllTabSelected ? 'bg-bg-selection' : 'hover:bg-bg-hover']"
                 @click="selectAllTabs"
               >
                 <IconTab class="w-4 h-4" />
@@ -39,7 +39,7 @@
                   v-for="tab in allTabs"
                   :key="tab.tabId"
                   class="flex flex-col px-1 py-2 cursor-pointer rounded-sm"
-                  :class="[isTabSelected(tab) ? 'bg-[#DFE1E5]' : 'hover:bg-[#EAECEF]']"
+                  :class="[isTabSelected(tab) ? 'bg-bg-selection' : 'hover:bg-bg-hover']"
                   @click="toggleSelectTab(tab)"
                 >
                   <div
@@ -48,11 +48,11 @@
                     <ExternalImage
                       :src="tab.faviconUrl"
                       alt=""
-                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-gray-300"
+                      class="w-4 h-4 rounded-full grow-0 shrink-0 bg-border-light"
                       fallbackClass="bg-transparent"
                     >
                       <template #fallback>
-                        <IconWeb class="w-4 h-4 rounded-full grow-0 shrink-0 text-[#6E757C]" />
+                        <IconWeb class="w-4 h-4 rounded-full grow-0 shrink-0 text-text-tertiary" />
                       </template>
                     </ExternalImage>
                     <div
@@ -68,7 +68,7 @@
             <Divider class="w-auto -mx-1 my-1" />
             <div class="w-full mb-px">
               <div
-                class="w-full flex items-center gap-1 px-1 py-1 min-h-7 cursor-pointer rounded-sm hover:bg-[#EAECEF]"
+                class="w-full flex items-center gap-1 px-1 py-1 min-h-7 cursor-pointer rounded-sm hover:bg-bg-hover"
                 @click="selectFile()"
               >
                 <IconAttachmentUpload class="w-4 h-4" />
@@ -89,9 +89,9 @@
       <div
         v-for="(message, index) in errorMessages"
         :key="index"
-        class="p-2 rounded-lg bg-[#27272A] flex items-center gap-2 max-w-11/12"
+        class="p-2 rounded-lg bg-bg-overlay-contrast flex items-center gap-2 max-w-11/12"
       >
-        <IconWarningSolid class="w-5 h-5 shrink-0" />
+        <IconWarningSolid class="w-5 h-5 shrink-0 text-warning" />
         <Text
           size="small"
           class="font-medium text-white min-w-0 wrap-anywhere"
@@ -106,21 +106,21 @@
         class="shrink-0 grow-0 h-6 w-6 grid place-items-center"
         @click="showSelector"
       >
-        <IconAdd class="cursor-pointer text-black" />
+        <IconAdd class="cursor-pointer text-foreground-base" />
       </Button>
       <ScrollContainer
         ref="tabsContainerRef"
         class="shrink grow min-w-0"
         itemContainerClass="flex gap-2 w-max items-center"
         :redirect="{ vertical: 'horizontal', horizontal: 'horizontal' }"
-        :arrivalShadow="{ left: { color: '#F5F6FB', size: 60 }, right: { color: '#F5F6FB', size: 60 } }"
+        :arrivalShadow="{ left: { color: 'var(--color-bg-app)', size: 60 }, right: { color: 'var(--color-bg-app)', size: 60 } }"
       >
         <div
           v-for="(attachment, index) in attachmentsToShow"
           :key="index"
           class="items-center gap-2 grow-0 text-xs shrink-0"
         >
-          <Tag class="inline-flex bg-[#F4F4F5] border border-[#E4E4E7]">
+          <Tag class="inline-flex bg-bg-tertiary border border-border">
             <template #icon>
               <div
                 v-if="attachment.type === 'tab'"
@@ -129,11 +129,11 @@
                 <ExternalImage
                   :src="attachment.value.faviconUrl"
                   alt=""
-                  class="w-3 h-3 rounded-full bg-gray-300"
+                  class="w-3 h-3 rounded-full bg-border-light"
                   fallbackClass="bg-transparent"
                 >
                   <template #fallback>
-                    <IconWeb class="rounded-full text-[#6E757C]" />
+                    <IconWeb class="rounded-full text-text-tertiary" />
                   </template>
                 </ExternalImage>
               </div>
@@ -141,13 +141,13 @@
                 v-else-if="attachment.type === 'image'"
                 class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
               >
-                <IconAttachmentImage class="w-3 h-3 text-[#52525B]" />
+                <IconAttachmentImage class="w-3 h-3 text-text-secondary" />
               </div>
               <div
                 v-else-if="attachment.type === 'pdf'"
                 class="flex items-center justify-center w-3 h-4 shrink-0 grow-0 ml-[2px]"
               >
-                <IconAttachmentPDF class="w-3 h-3 text-[#52525B]" />
+                <IconAttachmentPDF class="w-3 h-3 text-text-secondary" />
               </div>
               <div
                 v-else-if="attachment.type === 'loading'"
@@ -155,7 +155,7 @@
               >
                 <Loading
                   :size="12"
-                  strokeColor="#52525B]"
+                  strokeColor="var(--color-text-secondary)"
                 />
               </div>
               <ExhaustiveError v-else />
@@ -163,14 +163,14 @@
             <template #text>
               <span
                 :title="attachment.type === 'tab' ? attachment.value.title : attachment.value.name"
-                class="text-xs text-[#52525B] whitespace-nowrap max-w-28 overflow-hidden text-ellipsis"
+                class="text-xs text-text-secondary whitespace-nowrap max-w-28 overflow-hidden text-ellipsis"
               >
                 {{ attachment.type === 'tab' ? attachment.value.title : attachment.value.name }}
               </span>
             </template>
             <template #button>
               <button
-                class="cursor-pointer hover:text-[#71717A] text-gray-400 shrink-0"
+                class="cursor-pointer hover:text-text-tertiary text-text-quaternary shrink-0"
                 @click="removeAttachment(attachment)"
               >
                 <IconClose class="w-4" />
@@ -216,7 +216,7 @@ import { useI18n } from '@/utils/i18n'
 import { generateRandomId } from '@/utils/id'
 import { convertImageFileToJpegBase64 } from '@/utils/image'
 import { checkReadableTextContent, extractPdfText } from '@/utils/pdf'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { s2bRpc } from '@/utils/rpc'
 import { ByteSize } from '@/utils/sizes'
 import { tabToTabInfo } from '@/utils/tab'
@@ -253,7 +253,7 @@ const emit = defineEmits<{
   (e: 'update:attachments', images: ContextAttachment[]): void
 }>()
 
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const attachmentStorage = useVModel(props, 'attachmentStorage', emit)
 const attachments = toRef(attachmentStorage.value, 'attachments')
 const attachmentsWithCurrentTab = computed(() => {
@@ -313,7 +313,7 @@ const SUPPORTED_ATTACHMENT_TYPES: AttachmentItem[] = [
     type: 'image',
     matchMimeType: (mimeType) => /image\/*/.test(mimeType),
     validateFile: async ({ attachments }, file: File) => {
-      if (!await ollamaStatusStore.checkCurrentModelSupportVision()) {
+      if (!await llmBackendStatusStore.checkCurrentModelSupportVision()) {
         showErrorMessage(t('chat.input.attachment_selector.unsupported_model'))
         return false
       }
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Action.vue b/entrypoints/sidepanel/components/Chat/Messages/Action.vue
index c86123f0..36d2e00c 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Action.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Action.vue
@@ -18,7 +18,7 @@
     >
       <Text
         size="medium"
-        class="wrap-anywhere"
+        class="wrap-anywhere text-text-primary"
       >
         {{ message.titleAction.content }}
       </Text>
@@ -33,7 +33,7 @@
       <div
         v-for="(action, idx) in message.actions"
         :key="idx"
-        class="mt-1 text-sm rounded-lg relative inline-block max-w-full bg-white p-2 text-text-primary cursor-pointer hover:bg-gray-100 transition-all"
+        class="mt-1 text-sm rounded-lg relative inline-block max-w-full bg-bg-clickable p-2 text-text-primary cursor-pointer hover:bg-bg-hover transition-all"
         :class="disabled ? 'opacity-50 pointer-events-none' : ''"
         @click="
           (ev) =>
@@ -45,7 +45,10 @@
             v-if="action.icon"
             class="shrink-0 grow-0"
           >
-            <div v-html="getIconSvg(action.icon)" />
+            <div
+              class="p-1 border border-border-quick-action bg-bg-quick-action rounded-[4px] text-icon-quick-action"
+              v-html="getIconSvg(action.icon)"
+            />
           </div>
           <MarkdownViewer
             class="shrink grow"
diff --git a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
index 36e06f8c..e4abdc0a 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/AgentTaskGroup.vue
@@ -55,7 +55,7 @@
         </div>
         <div
           v-if="task.details?.expanded"
-          class="bg-white text-[#596066] rounded-md py-2 px-3 mt-[6px]"
+          class="bg-bg-primary text-text-secondary rounded-md py-2 px-3 mt-[6px]"
         >
           <MarkdownViewer
             :fadeInAnimation="!task.done"
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
index 82a0611f..ccf66043 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Assistant.vue
@@ -12,7 +12,7 @@
         v-if="message.isError"
         class="grow-0 shrink-0"
       >
-        <IconWarning class="w-4 text-[#FDA58F]" />
+        <IconWarning class="w-4 text-text-caution" />
       </div>
       <div class="max-w-full flex-1 flex flex-col gap-1">
         <div
@@ -76,11 +76,10 @@
         <ScrollContainer
           v-if="showReasoning"
           ref="scrollContainerRef"
-          containerClass="overscroll-auto"
-          :class="['wrap-anywhere pl-6 border-[#AEB5BD] overflow-auto', showClampedReasoning ? 'h-[3.3em] leading-[1.5em]' : '']"
+          :containerClass="classNames('overscroll-auto overflow-auto transition-height duration-200 [interpolate-size:allow-keywords] wrap-anywhere pl-6', showClampedReasoning ? 'h-[3.3em] leading-[1.5em]' : 'h-auto')"
           :arrivalShadow="{
-            top: { color: '#F5F6FB', size: 12, offset: 8 },
-            bottom: { color: '#F5F6FB', size: 12, offset: 8 }
+            top: { color: 'var(--color-bg-app)', size: 12, offset: 8 },
+            bottom: { color: 'var(--color-bg-app)', size: 12, offset: 8 }
           }"
           :autoSnap="{bottom: (showClampedReasoning && !message.done) ? true : false}"
         >
@@ -137,6 +136,7 @@ import ScrollContainer from '@/components/ScrollContainer.vue'
 import Text from '@/components/ui/Text.vue'
 import { AgentMessageV1, AssistantMessageV1 } from '@/types/chat'
 import { getUserConfig } from '@/utils/user-config'
+import { classNames } from '@/utils/vue/utils'
 const props = defineProps<{
   message: AssistantMessageV1 | AgentMessageV1
 }>()
@@ -153,7 +153,7 @@ const { t } = useI18n()
 const userConfig = await getUserConfig()
 const thinkingVisibility = userConfig.chat.thinkingVisibility.toRef()
 const expanded = ref(false)
-const scrollContainerRef = ref()
+const scrollContainerRef = ref<InstanceType<typeof ScrollContainer>>()
 
 // Helper computed properties for cleaner logic
 const isThinking = computed(() => !message.value.content && !message.value.done)
diff --git a/entrypoints/sidepanel/components/Chat/Messages/Task.vue b/entrypoints/sidepanel/components/Chat/Messages/Task.vue
index 675d23c7..e68fa5de 100644
--- a/entrypoints/sidepanel/components/Chat/Messages/Task.vue
+++ b/entrypoints/sidepanel/components/Chat/Messages/Task.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classNames('text-sm rounded-md relative inline-block max-w-full bg-white p-2', props.class, level === 0 ? 'p-3' : 'p-0')">
+  <div :class="classNames('text-sm rounded-md relative inline-block max-w-full bg-bg-primary p-2', props.class, level === 0 ? 'p-3' : 'p-0')">
     <Text :color="level === 0 ? 'placeholder' : 'primary'">
       <div
         v-if="message.content"
diff --git a/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
new file mode 100644
index 00000000..8fcea4fa
--- /dev/null
+++ b/entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue
@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div
+      class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm cursor-pointer"
+      :class="[
+        isOnlineSearchEnabled ? 'bg-bg-accent-green text-text-secondary' : 'text-text-placeholder',
+      ]"
+      @click="toggleOnlineSearch"
+    >
+      <IconOnlineSearch
+        class="w-4 h-4"
+      />
+      <span class="text-xs font-medium select-none">
+        {{ t('chat.tools.online_search.title') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconOnlineSearch from '@/assets/icons/online-search.svg'
+import { useI18n } from '@/utils/i18n'
+import { getUserConfig } from '@/utils/user-config'
+
+import { Chat } from '../../utils/chat'
+
+const { t } = useI18n()
+
+const userConfig = await getUserConfig()
+const chat = await Chat.getInstance()
+
+// Use chat-specific reasoning setting with fallback to global setting
+const isOnlineSearchEnabled = computed({
+  get() {
+    return chat.historyManager.chatHistory.value.onlineSearchEnabled
+  },
+  set(value: boolean) {
+    // Update both chat-specific setting and global setting
+    chat.historyManager.chatHistory.value.onlineSearchEnabled = value
+    userConfig.chat.onlineSearch.enable.set(value)
+  },
+})
+
+const toggleOnlineSearch = () => {
+  isOnlineSearchEnabled.value = !isOnlineSearchEnabled.value
+}
+</script>
diff --git a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
index 17bd4fdb..4c0a923f 100644
--- a/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
+++ b/entrypoints/sidepanel/components/Chat/ThinkingModeSwitch.vue
@@ -1,38 +1,27 @@
 <template>
-  <div class="flex items-center gap-1">
-    <IconThinking
-      class="w-4 h-4 text-[#5B5B5B]"
-      :class="{ 'opacity-50': !isModelSupportsThinking }"
-    />
-    <span
-      class="text-xs text-[#5B5B5B] font-medium select-none"
-      :class="{ 'opacity-50': !isModelSupportsThinking }"
-    >
-      {{ t('chat.thinking_mode.label') }}
-    </span>
-    <button
-      :disabled="!isModelSupportsThinking || !isThinkingToggleable"
+  <div v-if="isModelSupportsThinking && isThinkingToggleable">
+    <div
+      class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm"
       :class="[
-        'relative inline-flex h-4 w-7 items-center rounded-full transition-colors',
         {
-          'bg-[#24B960]': isThinkingEnabled && isModelSupportsThinking,
-          'bg-gray-300': !isThinkingEnabled || !isModelSupportsThinking,
           'cursor-not-allowed opacity-50': !isModelSupportsThinking || !isThinkingToggleable,
-          'cursor-pointer': isModelSupportsThinking && isThinkingToggleable
-        }
+          'cursor-pointer': isModelSupportsThinking && isThinkingToggleable,
+        },
+        isThinkingEnabled ? 'bg-bg-accent-green text-text-secondary' : 'text-text-placeholder',
       ]"
       @click="toggleThinking"
     >
-      <span
-        :class="[
-          'inline-block h-3 w-3 transform rounded-full bg-white transition-transform',
-          {
-            'translate-x-3.5': isThinkingEnabled && isModelSupportsThinking,
-            'translate-x-0.5': !isThinkingEnabled || !isModelSupportsThinking
-          }
-        ]"
+      <IconThinking
+        class="w-4 h-4"
+        :class="{ 'opacity-50': !isModelSupportsThinking }"
       />
-    </button>
+      <span
+        class="text-xs font-medium select-none"
+        :class="{ 'opacity-50': !isModelSupportsThinking }"
+      >
+        {{ t('chat.thinking_mode.label') }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -42,7 +31,7 @@ import { computed, onBeforeUnmount, onMounted, toRefs, watch } from 'vue'
 import IconThinking from '@/assets/icons/thinking-capability.svg?component'
 import { useI18n } from '@/utils/i18n'
 import { isToggleableThinkingModel } from '@/utils/llm/thinking-models'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { registerSidepanelRpcEvent } from '@/utils/rpc/sidepanel-fns'
 import { only } from '@/utils/runtime'
 import { getUserConfig } from '@/utils/user-config'
@@ -50,8 +39,8 @@ import { getUserConfig } from '@/utils/user-config'
 import { Chat } from '../../utils/chat'
 
 const { t } = useI18n()
-const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())
-const { updateModelList: updateOllamaModelList } = useOllamaStatusStore()
+const { ollamaModelList } = toRefs(useLLMBackendStatusStore())
+const { updateOllamaModelList } = useLLMBackendStatusStore()
 
 // Register RPC event listener for model list updates (following ModelSelector pattern)
 only(['sidepanel'], () => {
@@ -102,7 +91,7 @@ const isModelSupportsThinking = computed(() => {
 // Check if model can toggle thinking on/off
 const isThinkingToggleable = computed(() => {
   if (!currentModel.value) return false
-  return isToggleableThinkingModel(currentModel.value)
+  return isToggleableThinkingModel(endpointType.value, currentModel.value)
 })
 
 const toggleThinking = () => {
@@ -153,18 +142,4 @@ watch([endpointType, currentModel], async () => {
 onMounted(async () => {
   await updateModelList()
 })
-
-// Debug logging for development, temporarily keep
-// watch([currentModel, endpointType, isModelSupportsThinking, isThinkingToggleable, isThinkingEnabled],
-//   ([model, endpoint, supportsThinking, toggleable, enabled]) => {
-//     logger.debug('ThinkingModeSwitch state:', {
-//       currentModel: model,
-//       endpointType: endpoint,
-//       isModelSupportsThinking: supportsThinking,
-//       isThinkingToggleable: toggleable,
-//       isThinkingEnabled: enabled,
-//     })
-//   },
-//   { immediate: true },
-// )
 </script>
diff --git a/entrypoints/sidepanel/components/Chat/index.vue b/entrypoints/sidepanel/components/Chat/index.vue
index 1f454f45..47cadcdf 100644
--- a/entrypoints/sidepanel/components/Chat/index.vue
+++ b/entrypoints/sidepanel/components/Chat/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-[#F5F6FB]"
+    class="bg-bg-app"
     @messageAction="actionEventHandler"
   >
     <ScrollContainer
@@ -8,8 +8,8 @@
       :autoSnap="{ bottom: true }"
       :style="{ height: `calc(100% - ${inputContainerHeight}px)` }"
       :arrivalShadow="{
-        top: { color: '#F5F6FB', size: 36 },
-        bottom: { color: '#F5F6FB', size: 36 }
+        top: { color: 'var(--color-bg-app)', size: 36 },
+        bottom: { color: 'var(--color-bg-app)', size: 36 }
       }"
     >
       <div class="flex flex-col gap-2 px-4 py-4 pt-2">
@@ -23,7 +23,7 @@
             v-if="item.role === 'user'"
             class="flex flex-col items-end"
           >
-            <div class="text-sm inline-block bg-[#24B960] rounded-md p-3 max-w-full">
+            <div class="text-sm inline-block bg-accent-primary rounded-md p-3 max-w-full">
               <div class="wrap-anywhere text-white">
                 <MarkdownViewer :text="item.displayContent ?? item.content" />
               </div>
@@ -59,66 +59,67 @@
           v-model:attachmentStorage="contextAttachmentStorage"
         />
       </div>
-      <div class="gap-1 flex relative shadow-02 bg-white rounded-md px-3 pt-2 pb-9 max-h-36">
-        <ScrollContainer
-          class="overflow-hidden w-full"
-          :arrivalShadow="{
-            top: { color: '#FFFFFF', size: 12, offset: 8 },
-            bottom: { color: '#FFFFFF', size: 12, offset: 8 }
-          }"
-        >
-          <div class="h-max min-h-[48px] place-items-center">
-            <AutoExpandTextArea
-              v-model="userInput"
-              maxlength="2000"
-              type="text"
-              :placeholder="chat.historyManager.onlyHasDefaultMessages() ||
-                chat.historyManager.isEmpty()
-                ? t('chat.input.placeholder.ask_anything')
-                : t('chat.input.placeholder.ask_follow_up')
-              "
-              class="w-full block outline-none border-none resize-none field-sizing-content leading-5 text-sm wrap-anywhere grow h-full"
-              @paste="onPaste"
-              @keydown="onKeydown"
-              @compositionstart="isComposing = true"
-              @compositionend="isComposing = false"
-            />
-          </div>
-        </ScrollContainer>
-        <!-- Toolbar -->
-        <div class="absolute bottom-0 left-0 right-0 flex flex-row justify-between w-full h-9 pl-3 pr-1.5 items-center">
-          <div class="flex grow items-center gap-2">
-            <ModelSelector
-              containerClass="h-7"
-              :class="classNames(isThinkingToggleable ? 'max-w-[33vw]' : 'max-w-[50vw]')"
-              dropdownAlign="left"
-              triggerStyle="ghost"
-            />
-            <div
-              v-if="isThinkingToggleable && isModelSupportsThinking"
-              class="h-4 w-px bg-[#E5E7EB]"
-            />
-            <ThinkingModeSwitch v-if="isThinkingToggleable && isModelSupportsThinking" />
-          </div>
-          <div
-            ref="sendButtonContainerRef"
+      <div class="border-border-chat-input border rounded-md bg-bg-secondary">
+        <div>
+          <ModelSelector
+            containerClass="h-[30px] pl-3"
+            class="max-w-[50vw]"
+            dropdownAlign="left"
+            triggerStyle="ghost"
+          />
+        </div>
+        <div class="gap-1 flex relative border border-border-chat-input bg-bg-chat-input rounded-md px-3 pt-2 pb-9 max-h-36">
+          <ScrollContainer
+            class="overflow-hidden w-full"
+            :arrivalShadow="{
+              top: { color: 'var(--color-bg-primary', size: 12, offset: 8 },
+              bottom: { color: 'var(--color-bg-primary', size: 12, offset: 8 }
+            }"
           >
-            <Button
-              v-if="chat.isAnswering()"
-              variant="secondary"
-              class="size-6 rounded-md flex items-center justify-center hover:bg-[#E4E7EB]/80 bg-[#E4E7EB] cursor-pointer shadow-none"
-              @click="onStop"
-            >
-              <IconStop class="size-[15px] text-white" />
-            </Button>
-            <button
-              v-else
-              :class="classNames('size-6 rounded-md flex items-center justify-center', allowAsk ? 'hover:bg-[#24B960]/80 bg-[#24B960] cursor-pointer' : 'cursor-not-allowed')"
-              :disabled="!allowAsk"
-              @click="onSubmit"
+            <div class="h-max min-h-[48px] place-items-center">
+              <AutoExpandTextArea
+                v-model="userInput"
+                maxlength="2000"
+                type="text"
+                :placeholder="chat.historyManager.onlyHasDefaultMessages() ||
+                  chat.historyManager.isEmpty()
+                  ? t('chat.input.placeholder.ask_anything')
+                  : t('chat.input.placeholder.ask_follow_up')
+                "
+                class="w-full block outline-none border-none resize-none field-sizing-content leading-5 text-sm wrap-anywhere grow h-full"
+                @paste="onPaste"
+                @keydown="onKeydown"
+                @compositionstart="isComposing = true"
+                @compositionend="isComposing = false"
+              />
+            </div>
+          </ScrollContainer>
+          <!-- Toolbar -->
+          <div class="absolute bottom-0 left-0 right-0 flex flex-row justify-between w-full h-9 pl-3 pr-1.5 items-center">
+            <div class="flex grow items-center gap-1">
+              <ThinkingModeSwitch />
+              <OnlineSearchSwitch />
+            </div>
+            <div
+              ref="sendButtonContainerRef"
             >
-              <IconSendFill :class="classNames('size-[15px]', allowAsk ? 'text-white' : 'text-[#9EA3A8]')" />
-            </button>
+              <Button
+                v-if="chat.isAnswering()"
+                variant="secondary"
+                class="size-6 rounded-md flex items-center justify-center hover:bg-border-strong/80 bg-border-strong cursor-pointer shadow-none"
+                @click="onStop"
+              >
+                <IconStop class="size-[15px] text-white" />
+              </Button>
+              <button
+                v-else
+                :class="classNames('size-6 rounded-md flex items-center justify-center', allowAsk ? 'hover:bg-accent-primary-hover bg-accent-primary cursor-pointer' : 'cursor-not-allowed')"
+                :disabled="!allowAsk"
+                @click="onSubmit"
+              >
+                <IconSendFill :class="classNames('size-[15px]', allowAsk ? 'text-white' : 'text-text-quaternary')" />
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -128,7 +129,7 @@
 
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { computed, onBeforeUnmount, onMounted, ref, toRefs, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import IconSendFill from '@/assets/icons/send-fill.svg?component'
 import IconStop from '@/assets/icons/stop.svg?component'
@@ -139,10 +140,7 @@ import ScrollContainer from '@/components/ScrollContainer.vue'
 import Button from '@/components/ui/Button.vue'
 import { FileGetter } from '@/utils/file'
 import { useI18n } from '@/utils/i18n'
-import { isToggleableThinkingModel } from '@/utils/llm/thinking-models'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
 import { setSidepanelStatus } from '@/utils/sidepanel-status'
-import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
 import MarkdownViewer from '../../../../components/MarkdownViewer.vue'
@@ -157,13 +155,12 @@ import MessageAction from './Messages/Action.vue'
 import MessageTaskGroup from './Messages/AgentTaskGroup.vue'
 import MessageAssistant from './Messages/Assistant.vue'
 import MessageTask from './Messages/Task.vue'
+import OnlineSearchSwitch from './OnlineSearchSwitch.vue'
 import ThinkingModeSwitch from './ThinkingModeSwitch.vue'
 
 const inputContainerRef = ref<HTMLDivElement>()
 const sendButtonContainerRef = ref<HTMLDivElement>()
 const { height: inputContainerHeight } = useElementBounding(inputContainerRef)
-const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())
-const { updateModelList: updateOllamaModelList } = useOllamaStatusStore()
 
 const { t } = useI18n()
 const userInput = ref('')
@@ -175,17 +172,8 @@ defineExpose({
   attachmentSelectorRef,
 })
 
-const updateModelList = async () => {
-  if (endpointType.value === 'ollama') {
-    await updateOllamaModelList()
-  }
-}
-
 const chat = await Chat.getInstance()
-const userConfig = await getUserConfig()
 const contextAttachmentStorage = chat.contextAttachmentStorage
-const currentModel = userConfig.llm.model.toRef()
-const endpointType = userConfig.llm.endpointType.toRef()
 
 initChatSideEffects()
 
@@ -202,32 +190,10 @@ const actionEventHandler = Chat.createActionEventHandler((actionEvent) => {
   }
 })
 
-const modelList = computed(() => {
-  if (endpointType.value === 'ollama') {
-    return ollamaModelList.value
-  }
-  return []
-})
-
-// Check if current model supports thinking
-const isModelSupportsThinking = computed(() => {
-  if (endpointType.value !== 'ollama') return false
-  if (!currentModel.value) return false
-  if (!modelList.value || !Array.isArray(modelList.value)) return false
-
-  const model = modelList.value.find((m) => m.model === currentModel.value)
-  return model?.supportsThinking ?? false
-})
-
 const allowAsk = computed(() => {
   return !chat.isAnswering() && userInput.value.trim().length > 0
 })
 
-const isThinkingToggleable = computed(() => {
-  if (!currentModel.value) return false
-  return isToggleableThinkingModel(currentModel.value)
-})
-
 const cleanUp = chat.historyManager.onMessageAdded(() => {
   scrollContainerRef.value?.snapToBottom()
 })
@@ -262,15 +228,9 @@ const ask = async () => {
   userInput.value = ''
 }
 
-// Watch for model list updates to refresh thinking capabilities (following ModelSelector pattern)
-watch([endpointType, currentModel], async () => {
-  await updateModelList()
-})
-
 onMounted(async () => {
   scrollContainerRef.value?.snapToBottom()
   setSidepanelStatus({ loaded: true })
-  updateModelList()
 })
 
 onBeforeUnmount(() => {
diff --git a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
index 26ef3734..90bb8902 100644
--- a/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
+++ b/entrypoints/sidepanel/components/ChatHistory/ChatItem.vue
@@ -3,8 +3,8 @@
     :class="[
       'flex items-center justify-between p-2 rounded-lg cursor-pointer transition-colors group',
       isCurrent
-        ? 'bg-white hover:bg-white/80'
-        : 'bg-transparent hover:bg-white/80'
+        ? 'bg-bg-clickable hover:bg-bg-hover'
+        : 'bg-transparent hover:bg-bg-hover'
     ]"
     @click="handleClick"
   >
@@ -14,14 +14,14 @@
         v-if="isPinned && !isEditing"
         class="flex-shrink-0"
       >
-        <IconStarFilled class="w-4 h-4 text-[#F7C103] fill-current" />
+        <IconStarFilled class="w-4 h-4 text-warning fill-current" />
       </div>
 
       <!-- Chat Title -->
       <div class="flex-1 min-w-0 px-1 py-0.5">
         <div
           v-if="!isEditing"
-          class="text-[13px] font-medium text-black truncate"
+          class="text-[13px] font-medium text-text-primary truncate"
         >
           {{ chat.title || t('chat_history.untitled_chat') }}
         </div>
@@ -34,7 +34,7 @@
             v-model="editTitle"
             :maxlength="MAX_TITLE_LENGTH"
             wrapperClass="w-full"
-            class="w-full rounded-md px-2 py-1.5 text-[13px]"
+            class="w-full rounded-md px-2 py-1.5 text-[13px] text-text-primary"
             @blur="handleSave"
             @keydown.enter="handleSave"
             @keydown.escape="handleCancel"
@@ -80,31 +80,31 @@
         <!-- Dropdown Menu -->
         <div
           v-if="props.isMenuOpen"
-          class="absolute right-0 mt-3 p-1 bg-white border border-gray-200 rounded-lg shadow-lg z-30"
+          class="absolute right-0 mt-3 p-1 bg-bg-primary border border-border-light rounded-lg shadow-01 z-30"
         >
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-foreground-base hover:bg-gray-100 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-primary hover:bg-bg-hover flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleRename"
           >
             <IconEditPencil class="w-4 h-4" />
             {{ t('chat_history.rename') }}
           </button>
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-foreground-base hover:bg-gray-100 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-primary hover:bg-bg-hover flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleToggleStar"
           >
             <IconStarFilled
               v-if="!isPinned"
-              class="w-4 h-4 text-[#F7C103] fill-current"
+              class="w-4 h-4 text-warning fill-current"
             />
             <IconStarOutline
               v-else
-              class="w-4 h-4 text-[#F7C103]"
+              class="w-4 h-4 text-warning"
             />
             {{ isPinned ? t('chat_history.unpin') : t('chat_history.pin') }}
           </button>
           <button
-            class="w-full px-2 py-1.5 text-left text-[13px] text-[#992121] hover:bg-red-50 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
+            class="w-full px-2 py-1.5 text-left text-[13px] text-text-critical hover:bg-danger/10 flex items-center gap-2 rounded cursor-pointer flex-nowrap whitespace-nowrap"
             @click.stop="handleDelete"
           >
             <IconTrash class="w-4 h-4" />
diff --git a/entrypoints/sidepanel/components/ChatHistory/index.vue b/entrypoints/sidepanel/components/ChatHistory/index.vue
index 060f020d..141ce62c 100644
--- a/entrypoints/sidepanel/components/ChatHistory/index.vue
+++ b/entrypoints/sidepanel/components/ChatHistory/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full flex flex-col bg-[#F5F6FB] relative">
+  <div class="h-full flex flex-col bg-bg-app relative">
     <!-- Transparent overlay when menu is open -->
     <div
       v-if="openMenuChatId"
@@ -11,8 +11,8 @@
     <ScrollContainer
       class="w-full h-full overflow-hidden"
       :arrivalShadow="{
-        top: { color: '#F5F6FB', size: 48 },
-        bottom: { color: '#F5F6FB', size: 48 }
+        top: { color: 'var(--color-bg-app)', size: 48 },
+        bottom: { color: 'var(--color-bg-app)', size: 48 }
       }"
     >
       <div class="px-4 py-2 space-y-2">
@@ -72,7 +72,7 @@
       <!-- Empty State -->
       <div
         v-if="recentChats.length === 0 && pinnedChats.length === 0"
-        class="text-center text-[#9EA3A8] mt-[30vh]"
+        class="text-center text-text-quaternary mt-[30vh]"
       >
         <div class="flex flex-col items-center h-full justify-center">
           <IconChatEmpty class="w-10 mb-6" />
diff --git a/entrypoints/sidepanel/components/Main.vue b/entrypoints/sidepanel/components/Main.vue
index 2cc69a76..9a311257 100644
--- a/entrypoints/sidepanel/components/Main.vue
+++ b/entrypoints/sidepanel/components/Main.vue
@@ -2,10 +2,10 @@
   <div>
     <div
       ref="topRef"
-      class="bg-[#F5F6FB]"
+      class="bg-bg-app"
     >
       <div class="h-12 px-4 flex items-center justify-between w-full">
-        <div class="flex items-center gap-2 grow overflow-hidden max-w-[70%]">
+        <div class="flex items-center gap-2 grow overflow-hidden max-w-[70%] text-text-primary">
           <div class="size-6 flex items-center justify-center">
             <Logo
               class="font-bold text-base"
@@ -15,7 +15,7 @@
           <!-- Show chat history button -->
           <Tooltip :content="t('tooltips.chat_history')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onOpenChatHistory"
             >
               <IconChatHistory
@@ -27,7 +27,7 @@
           <!-- Show new chat button -->
           <Tooltip :content="t('tooltips.new_chat')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onNewChat"
             >
               <IconNewChat
@@ -36,10 +36,10 @@
             </div>
           </Tooltip>
         </div>
-        <div class="flex items-center gap-2 shrink-0">
+        <div class="flex items-center gap-2 shrink-0 text-text-primary">
           <Tooltip :content="t('tooltips.settings')">
             <div
-              class="p-1 cursor-pointer hover:text-gray-500"
+              class="p-1 cursor-pointer hover:text-text-tertiary"
               @click="onClickSetting"
             >
               <IconSetting
@@ -77,10 +77,10 @@
       >
         <!-- Drawer content with header -->
         <Motion
-          class="absolute right-0 top-0 bottom-0 w-full bg-white shadow-xl"
+          class="absolute right-0 top-0 bottom-0 w-full bg-bg-primary shadow-01"
         >
           <!-- Header -->
-          <div class="bg-[#F5F6FB]">
+          <div class="bg-bg-app text-text-primary">
             <div class="h-12 px-4 flex items-center justify-between w-full">
               <div class="flex items-center gap-2 grow overflow-hidden">
                 <div
@@ -93,7 +93,7 @@
                   </div>
                   <Tooltip :content="t('tooltips.back')">
                     <div
-                      class="p-1 cursor-pointer hover:text-gray-500"
+                      class="p-1 cursor-pointer hover:text-text-tertiary"
                       @click="onCloseChatHistory"
                     >
                       <IconBack class="size-4 shrink-0" />
@@ -102,7 +102,7 @@
                   <!-- Show new chat button -->
                   <Tooltip :content="t('tooltips.new_chat')">
                     <div
-                      class="p-1 cursor-pointer hover:text-gray-500"
+                      class="p-1 cursor-pointer hover:text-text-tertiary"
                       @click="() => {
                         onNewChat()
                         onCloseChatHistory()
diff --git a/entrypoints/sidepanel/components/Onboarding/OllamaDownloadModal.vue b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
similarity index 54%
rename from entrypoints/sidepanel/components/Onboarding/OllamaDownloadModal.vue
rename to entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
index dcce9a60..7d1c7f0e 100644
--- a/entrypoints/sidepanel/components/Onboarding/OllamaDownloadModal.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendDownloadModal.vue
@@ -6,7 +6,7 @@
     :fadeInAnimation="false"
   >
     <ConfirmPanel
-      v-if="ollamaStatusStore.connectionStatus === 'connected'"
+      v-if="(endpointType === 'ollama' && llmBackendStatusStore.ollamaConnectionStatus === 'connected') || (endpointType === 'lm-studio' && llmBackendStatusStore.lmStudioConnectionStatus === 'connected')"
       :okButtonText="!pulling ? t('settings.model_downloader.download') : undefined"
       :cancelButtonText="t('common.cancel')"
       @ok="installModel"
@@ -19,13 +19,13 @@
       <template #body>
         <div
           v-if="!pulling"
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.description') }}
         </div>
         <div
           v-else
-          class="text-gray-600 text-sm"
+          class="text-text-secondary text-sm"
         >
           {{ t('settings.model_downloader.downloading') }}
         </div>
@@ -34,13 +34,13 @@
           class="flex gap-2 items-stretch flex-col mt-1"
         >
           <ProgressBar :progress="pulling.completed / (pulling.total || 1)" />
-          <div class="text-xs text-gray-500 flex justify-between items-center">
+          <div class="text-xs text-text-tertiary flex justify-between items-center">
             <div>{{ formatSize(pulling.completed) }}</div>
             <div>{{ pulling.total ? formatSize(pulling.total) : '-' }}</div>
           </div>
         </div>
         <div v-if="pulling?.error">
-          <div class="text-red-500 text-xs flex items-center gap-1">
+          <div class="text-danger text-xs flex items-center gap-1">
             <IconWarning class="w-3 h-3 shrink-0" />
             <span class="wrap-anywhere">{{ pulling.error }}</span>
           </div>
@@ -51,21 +51,21 @@
       v-else
       :okButtonText="t('settings.model_downloader.retry')"
       :cancelButtonText="t('common.cancel')"
-      @ok="ollamaStatusStore.updateConnectionStatus"
+      @ok="llmBackendStatusStore.updateOllamaConnectionStatus"
       @cancel="cancel"
     >
       <template #title>
         {{ t('settings.model_downloader.unable_to_download') }}
       </template>
       <template #body>
-        {{ t('settings.model_downloader.could_not_connect_ollama') }}
+        {{ t('settings.model_downloader.could_not_connect', { endpointType: props.endpointType === 'ollama' ? 'Ollama' : 'LM Studio' }) }}
       </template>
     </ConfirmPanel>
   </Modal>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import IconWarning from '@/assets/icons/warning.svg?component'
 import ConfirmPanel from '@/components/ConfirmPanel.vue'
@@ -73,32 +73,35 @@ import Modal from '@/components/Modal.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import { formatSize } from '@/utils/formatter'
 import { useI18n } from '@/utils/i18n'
-import { PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
+import { PREDEFINED_LM_STUDIO_MODELS, PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
 import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { s2bRpc } from '@/utils/rpc'
-import dayjs from '@/utils/time'
 import { getUserConfig } from '@/utils/user-config'
 
-import { pullOllamaModel } from '../../utils/llm'
+import { pullLMStudioModel, pullOllamaModel } from '../../utils/llm'
 
 const log = logger.child('OllamaDownloadConfirmModal')
 
 const props = defineProps<{
   model: string
+  endpointType: 'ollama' | 'lm-studio'
 }>()
 
 const emit = defineEmits(['cancel', 'finished'])
 const { t } = useI18n()
-const modelInfo = PREDEFINED_OLLAMA_MODELS.find((model) => model.id === props.model) || {
-  model: props.model,
-  id: props.model,
-  name: props.model,
-  size: 0,
-}
-const ollamaStatusStore = useOllamaStatusStore()
+const modelInfo = computed(() => {
+  return [...PREDEFINED_OLLAMA_MODELS, ...PREDEFINED_LM_STUDIO_MODELS].find((model) => model.id === props.model) || {
+    model: props.model,
+    id: props.model,
+    name: props.model,
+    size: 0,
+  }
+})
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const userConfig = await getUserConfig()
 const currentModel = userConfig.llm.model.toRef()
+const currentEndpointType = userConfig.llm.endpointType.toRef()
 
 const pulling = ref<{ modelId: string, total: number, completed: number, abort: () => void, status: string, error?: string }>()
 
@@ -110,8 +113,8 @@ const cancel = () => {
 const installModel = async () => {
   const abortController = new AbortController()
   pulling.value = {
-    modelId: modelInfo.id,
-    total: modelInfo.size,
+    modelId: modelInfo.value.id,
+    total: modelInfo.value.size ?? 0,
     completed: 0,
     abort: () => abortController.abort(),
     status: 'pulling',
@@ -119,18 +122,33 @@ const installModel = async () => {
   try {
     // if the total size of current model layer is less than 10MB, we don't show the progress
     const MIN_SIZE_DISPLAYED = 10 * 1024 * 1024 // 10 MB
-    const pullingIter = pullOllamaModel(modelInfo.id, abortController.signal)
-    for await (const progress of pullingIter) {
-      if (abortController.signal.aborted) {
-        pulling.value = undefined
-        return
+    if (props.endpointType === 'ollama') {
+      const pullingIter = pullOllamaModel(modelInfo.value.id, abortController.signal)
+      for await (const progress of pullingIter) {
+        if (abortController.signal.aborted) {
+          pulling.value = undefined
+          return
+        }
+        if (progress.total && progress.completed && progress.total >= MIN_SIZE_DISPLAYED) {
+          pulling.value.total = progress.total
+          pulling.value.completed = progress.completed
+        }
+        if (progress.status) {
+          pulling.value.status = progress.status
+        }
       }
-      if (progress.total && progress.completed && progress.total >= MIN_SIZE_DISPLAYED) {
-        pulling.value.total = progress.total
-        pulling.value.completed = progress.completed
-      }
-      if (progress.status) {
-        pulling.value.status = progress.status
+    }
+    else if (props.endpointType === 'lm-studio') {
+      const pullingIter = pullLMStudioModel(modelInfo.value.id, abortController.signal)
+      for await (const progress of pullingIter) {
+        if (abortController.signal.aborted) {
+          pulling.value = undefined
+          return
+        }
+        if (progress.totalBytes && progress.downloadedBytes && progress.totalBytes >= MIN_SIZE_DISPLAYED) {
+          pulling.value.total = progress.totalBytes
+          pulling.value.completed = progress.downloadedBytes
+        }
       }
     }
     await updateCurrentModel()
@@ -148,13 +166,12 @@ const updateCurrentModel = async () => {
   await s2bRpc.updateSidepanelModelList().catch((error) => {
     log.error('Failed to update model list:', error)
   })
-  const modelList = await ollamaStatusStore.updateModelList()
-  const latestUpdatedModel = modelList.filter((model) => model.modifiedAt).sort((a, b) =>
-    dayjs(b.modifiedAt).diff(dayjs(a.modifiedAt)),
-  )[0]
-  if (latestUpdatedModel?.model.startsWith(props.model)) {
-    log.debug('Updating current model to:', latestUpdatedModel.model)
-    currentModel.value = latestUpdatedModel.model
+  const modelList = await llmBackendStatusStore.updateModelList()
+  const model = modelList.find((m) => m.backend === props.endpointType)
+  if (model) {
+    log.debug('Updating current model to:', model)
+    currentModel.value = model.model
+    currentEndpointType.value = props.endpointType
   }
 }
 
@@ -163,6 +180,7 @@ onBeforeUnmount(() => {
 })
 
 onMounted(() => {
-  ollamaStatusStore.updateConnectionStatus()
+  llmBackendStatusStore.updateLMStudioConnectionStatus()
+  llmBackendStatusStore.updateOllamaConnectionStatus()
 })
 </script>
diff --git a/entrypoints/sidepanel/components/Onboarding/OllamaModelDownloader.vue b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
similarity index 70%
rename from entrypoints/sidepanel/components/Onboarding/OllamaModelDownloader.vue
rename to entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
index 1f4ff4e1..70dfa1de 100644
--- a/entrypoints/sidepanel/components/Onboarding/OllamaModelDownloader.vue
+++ b/entrypoints/sidepanel/components/Onboarding/BackendModelDownloader.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="px-3 py-3 flex flex-col gap-3 items-stretch rounded-lg bg-white"
+    class="px-3 py-3 flex flex-col gap-3 items-stretch rounded-lg bg-bg-primary"
   >
     <div class="text-xs font-bold flex items-center justify-center">
       <StatusBadge
         status="success"
-        :text="t('onboarding.ollama_is_running')"
+        :text="t('onboarding.backend_is_running', { endpointType: endpointType === 'ollama' ? 'Ollama' : 'LM Studio' })"
       />
     </div>
     <div class="flex flex-col gap-2">
@@ -27,7 +27,7 @@
         v-model="selectedModel"
         class="mt-2"
         containerClass="h-8 py-2"
-        dropdownClass="text-xs text-black w-60"
+        dropdownClass="text-xs text-text-primary w-60"
         dropdownAlign="left"
         :options="options"
       >
@@ -62,7 +62,7 @@
               </div>
               <span
                 v-if="option.value?.size"
-                class="text-gray-500 font-light whitespace-nowrap"
+                class="text-text-tertiary font-light whitespace-nowrap"
               >
                 ({{ formatSize(option.value.size) }})
               </span>
@@ -71,7 +71,7 @@
         </template>
       </Selector>
       <a
-        href="https://ollama.com/search"
+        :href="searchUrl"
         class="underline text-xs self-start"
         target="_blank"
       >
@@ -96,7 +96,7 @@
           <a
             :href="tutorialUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
           >
             {{ t('onboarding.guide.learn_about_models') }}
           </a>
@@ -104,9 +104,9 @@
         <div class="flex gap-1">
           <span>{{ t('onboarding.guide.looking_for_more_options') }}</span>
           <a
-            href="https://ollama.com/search"
+            :href="searchUrl"
             target="_blank"
-            class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
+            class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
           >
             {{ t('onboarding.guide.browse_more_models') }}
           </a>
@@ -115,6 +115,7 @@
     </div>
     <DownloadConfirmModal
       v-if="modelToDownload"
+      :endpointType="endpointType"
       :model="modelToDownload"
       @finished="emit('finished')"
       @cancel="modelToDownload = undefined"
@@ -124,7 +125,7 @@
 
 <script setup lang="ts">
 
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import ModelLogo from '@/components/ModelLogo.vue'
 import Selector from '@/components/Selector.vue'
@@ -132,23 +133,38 @@ import StatusBadge from '@/components/StatusBadge.vue'
 import Button from '@/components/ui/Button.vue'
 import Divider from '@/components/ui/Divider.vue'
 import Text from '@/components/ui/Text.vue'
-import { OLLAMA_TUTORIAL_URL } from '@/utils/constants'
+import { LM_STUDIO_SEARCH_URL, LM_STUDIO_TUTORIAL_URL, OLLAMA_SEARCH_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
 import { formatSize } from '@/utils/formatter'
 import { useI18n } from '@/utils/i18n'
-import { PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
+import { PREDEFINED_LM_STUDIO_MODELS, PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
 
-import DownloadConfirmModal from './OllamaDownloadModal.vue'
+import DownloadConfirmModal from './BackendDownloadModal.vue'
 
+const props = defineProps<{
+  endpointType: 'ollama' | 'lm-studio'
+}>()
 const emit = defineEmits(['finished'])
 const { t } = useI18n()
 
-const options = PREDEFINED_OLLAMA_MODELS.map((model) => ({
-  id: model.id,
-  label: model.name,
-  value: model,
-}))
+const options = computed(() => {
+  const models = props.endpointType === 'ollama' ? PREDEFINED_OLLAMA_MODELS : PREDEFINED_LM_STUDIO_MODELS
+  return models.map((model) => ({
+    id: model.id,
+    label: model.name,
+    value: model,
+  }))
+})
 
-const tutorialUrl = OLLAMA_TUTORIAL_URL
+const tutorialUrl = computed(() => {
+  if (props.endpointType === 'ollama') return OLLAMA_TUTORIAL_URL
+  else if (props.endpointType === 'lm-studio') return LM_STUDIO_TUTORIAL_URL
+  else return ''
+})
+const searchUrl = computed(() => {
+  if (props.endpointType === 'ollama') return OLLAMA_SEARCH_URL
+  else if (props.endpointType === 'lm-studio') return LM_STUDIO_SEARCH_URL
+  else return ''
+})
 const selectedModel = ref<string>()
 const modelToDownload = ref<string>()
 </script>
diff --git a/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
new file mode 100644
index 00000000..b4d97a6d
--- /dev/null
+++ b/entrypoints/sidepanel/components/Onboarding/BackendSelectionTutorialCard.vue
@@ -0,0 +1,209 @@
+<template>
+  <div
+    class="px-4 py-4 flex flex-col gap-3 items-stretch"
+  >
+    <div class="text-text-accent-green font-medium text-xs">
+      {{ t('onboarding.guide.step1') }}
+    </div>
+    <div class="shrink-0 grow-0 text-[15px] font-semibold flex flex-col gap-4 text-text-primary">
+      <div>
+        {{ t('onboarding.guide.install_desc') }}
+      </div>
+      <div
+        class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
+        :class="[selectedEndpointType === 'ollama' ? 'border-border-accent' : 'border-border-strong']"
+        @click="selectedEndpointType = 'ollama'"
+      >
+        <div class="whitespace-nowrap flex items-center gap-2">
+          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-02 text-black bg-white">
+            <IconOllamaLogo class="size-4" />
+          </div>
+          <span class="font-medium text-base">
+            Ollama
+          </span>
+        </div>
+        <div class="text-[13px] font-semibold text-text-secondary">
+          {{ t('onboarding.guide.ollama_select_desc') }}
+        </div>
+      </div>
+      <div
+        class="flex items-center justify-between gap-3 min-h-13 py-1 px-4 rounded-lg cursor-pointer border-2 text-[15px]"
+        :class="[selectedEndpointType === 'lm-studio' ? 'border-border-accent' : 'border-border-strong']"
+        @click="selectedEndpointType = 'lm-studio'"
+      >
+        <div class="whitespace-nowrap flex items-center gap-2">
+          <div class="size-5 rounded-md flex items-center justify-center overflow-hidden shadow-02">
+            <img
+              :src="IconLMStudioLogo"
+              class="size-5"
+            >
+          </div>
+          <span class="font-medium text-base">
+            LM Studio
+          </span>
+        </div>
+        <div class="text-[13px] font-semibold text-text-secondary">
+          {{ t('onboarding.guide.lm_studio_select_desc') }}
+        </div>
+      </div>
+      <div>
+        <Text
+          color="secondary"
+          class="text-[13px] font-semibold text-text-primary"
+        >
+          {{ t('onboarding.guide.unlock_full_power_with', { endpointType: selectedEndpointName }) }}
+        </Text>
+      </div>
+      <ul class="space-y-1 text-xs">
+        <li class="list-none flex items-center">
+          <Text
+            color="primary"
+            class="grow-0 shrink-0"
+          >
+            <IconTick class="size-4 shrink-0 inline-block mr-2" />
+          </Text>
+          <Text color="secondary">
+            {{ t('onboarding.guide.features.1') }}
+          </Text>
+        </li>
+        <li class="list-none flex items-center">
+          <Text
+            color="primary"
+            class="grow-0 shrink-0"
+          >
+            <IconTick class="size-4 shrink-0 inline-block mr-2" />
+          </Text>
+          <Text color="secondary">
+            {{ t('onboarding.guide.features.2') }}
+          </Text>
+        </li>
+        <li class="list-none flex items-center">
+          <Text
+            color="primary"
+            class="grow-0 shrink-0"
+          >
+            <IconTick class="size-4 shrink-0 inline-block mr-2" />
+          </Text>
+          <Text color="secondary">
+            {{ t('onboarding.guide.features.3') }}
+          </Text>
+        </li>
+      </ul>
+      <div class="mt-4">
+        <a
+          class="font-semibold text-sm"
+          :href="downloadUrl"
+          target="_blank"
+          @click="onClickInstall"
+        >
+          <Button
+            class="h-10 w-full"
+            variant="primary"
+          >
+            {{ t('onboarding.guide.get_endpoint', { endpointType: selectedEndpointName }) }}
+          </Button>
+        </a>
+        <div class="flex flex-col items-center justify-center mt-1">
+          <Text
+            color="tertiary"
+            class="font-normal text-[11px] leading-5"
+          >
+            <div class="flex gap-1">
+              <span>{{ t('onboarding.guide.already_installed', { endpointType: selectedEndpointName }) }}</span>
+              <button
+                class="whitespace-nowrap hover:text-text-primary text-text-link cursor-pointer"
+                @click="onClickOpenSettings"
+              >
+                {{ t('onboarding.guide.setup') }}
+              </button>
+            </div>
+            <div
+              v-if="selectedEndpointType === 'ollama'"
+              class="flex gap-1"
+            >
+              <span>{{ t('onboarding.guide.need_help') }}</span>
+              <a
+                :href="tutorialUrl"
+                target="_blank"
+                class="underline whitespace-nowrap hover:text-text-primary cursor-pointer"
+              >
+                {{ t('onboarding.guide.follow_our_tutorial') }}
+              </a>
+            </div>
+          </Text>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCountdown } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+import IconLMStudioLogo from '@/assets/icons/logo-lm-studio.png?url'
+import IconOllamaLogo from '@/assets/icons/logo-ollama.svg?component'
+import IconTick from '@/assets/icons/tick.svg?component'
+import Button from '@/components/ui/Button.vue'
+import Text from '@/components/ui/Text.vue'
+import { LM_STUDIO_HOMEPAGE_URL, LM_STUDIO_TUTORIAL_URL, OLLAMA_HOMEPAGE_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
+import { useI18n } from '@/utils/i18n'
+import logger from '@/utils/logger'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
+
+const log = logger.child('BackendSelectionTutorialCard')
+
+const emit = defineEmits<{
+  (event: 'installed', backend: 'ollama' | 'lm-studio'): void
+  (event: 'settings'): void
+}>()
+const llmBackendStatusStore = useLLMBackendStatusStore()
+const selectedEndpointType = ref<'ollama' | 'lm-studio'>('ollama')
+const { t } = useI18n()
+
+const selectedEndpointName = computed(() => {
+  if (selectedEndpointType.value === 'ollama') return 'Ollama'
+  else if (selectedEndpointType.value === 'lm-studio') return 'LM Studio'
+  else return ''
+})
+const tutorialUrl = computed(() => {
+  if (selectedEndpointType.value === 'ollama') return OLLAMA_TUTORIAL_URL
+  else if (selectedEndpointType.value === 'lm-studio') return LM_STUDIO_TUTORIAL_URL
+  else return ''
+})
+const downloadUrl = computed(() => {
+  if (selectedEndpointType.value === 'ollama') return OLLAMA_HOMEPAGE_URL
+  else if (selectedEndpointType.value === 'lm-studio') return LM_STUDIO_HOMEPAGE_URL
+  else return ''
+})
+
+const { start: startCheckConnection, stop: _stopCheckConnection, remaining: checkSignal } = useCountdown(600, { interval: 2000 })
+
+watch(checkSignal, (val) => {
+  if (val) reScanOllama()
+})
+
+const onClickInstall = () => {
+  startCheckConnection()
+}
+
+const reScanOllama = async () => {
+  if (selectedEndpointType.value === 'ollama') {
+    const success = await llmBackendStatusStore.updateOllamaConnectionStatus()
+    log.info('Ollama test result:', success)
+    if (success) emit('installed', 'ollama')
+  }
+  else if (selectedEndpointType.value === 'lm-studio') {
+    const success = await llmBackendStatusStore.updateLMStudioConnectionStatus()
+    log.info('LM Studio test result:', success)
+    if (success) emit('installed', 'lm-studio')
+  }
+  else {
+    throw new Error('Invalid endpoint type')
+  }
+}
+
+const onClickOpenSettings = () => {
+  emit('settings')
+}
+</script>
diff --git a/entrypoints/sidepanel/components/Onboarding/OllamaTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/OllamaTutorialCard.vue
deleted file mode 100644
index f63ade37..00000000
--- a/entrypoints/sidepanel/components/Onboarding/OllamaTutorialCard.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div
-    class="px-4 py-4 flex flex-col gap-3 items-stretch"
-  >
-    <div class="text-[#24B960] font-medium text-xs">
-      {{ t('onboarding.guide.step1') }}
-    </div>
-    <div class="shrink-0 grow-0 text-[15px] font-semibold">
-      {{ t('onboarding.guide.install_desc') }}
-    </div>
-    <Divider class="mb-2" />
-    <div>
-      <Text
-        color="secondary"
-        class="text-[13px] font-semibold"
-      >
-        {{ t('onboarding.guide.ollama_desc') }}
-      </Text>
-    </div>
-    <ul class="space-y-1 text-xs">
-      <li class="list-none flex items-center">
-        <Text
-          color="primary"
-          class="grow-0 shrink-0"
-        >
-          <IconTick class="size-4 shrink-0 inline-block mr-2" />
-        </Text>
-        <Text color="secondary">
-          {{ t('onboarding.guide.features.1') }}
-        </Text>
-      </li>
-      <li class="list-none flex items-center">
-        <Text
-          color="primary"
-          class="grow-0 shrink-0"
-        >
-          <IconTick class="size-4 shrink-0 inline-block mr-2" />
-        </Text>
-        <Text color="secondary">
-          {{ t('onboarding.guide.features.2') }}
-        </Text>
-      </li>
-      <li class="list-none flex items-center">
-        <Text
-          color="primary"
-          class="grow-0 shrink-0"
-        >
-          <IconTick class="size-4 shrink-0 inline-block mr-2" />
-        </Text>
-        <Text color="secondary">
-          {{ t('onboarding.guide.features.3') }}
-        </Text>
-      </li>
-    </ul>
-    <div class="mt-4">
-      <a
-        class="font-semibold text-sm"
-        :href="OLLAMA_HOMEPAGE_URL"
-        target="_blank"
-        @click="onClickInstall"
-      >
-        <Button
-          class="h-10 w-full"
-          variant="primary"
-        >
-          {{ t('onboarding.guide.get_ollama') }}
-        </Button>
-      </a>
-      <div class="flex flex-col items-center justify-center mt-1">
-        <Text
-          color="tertiary"
-          class="font-normal text-[11px] leading-5"
-        >
-          <div class="flex gap-1">
-            <span>{{ t('onboarding.guide.already_installed') }}</span>
-            <button
-              class="whitespace-nowrap hover:text-gray-800 text-blue-500 cursor-pointer"
-              @click="onClickOpenSettings"
-            >
-              {{ t('onboarding.guide.setup') }}
-            </button>
-          </div>
-          <div class="flex gap-1">
-            <span>{{ t('onboarding.guide.need_help') }}</span>
-            <a
-              :href="tutorialUrl"
-              target="_blank"
-              class="underline whitespace-nowrap hover:text-gray-800 cursor-pointer"
-            >
-              {{ t('onboarding.guide.follow_our_tutorial') }}
-            </a>
-          </div>
-        </Text>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useCountdown } from '@vueuse/core'
-import { watch } from 'vue'
-
-import IconTick from '@/assets/icons/tick.svg?component'
-import Button from '@/components/ui/Button.vue'
-import Divider from '@/components/ui/Divider.vue'
-import Text from '@/components/ui/Text.vue'
-import { OLLAMA_HOMEPAGE_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
-import { useI18n } from '@/utils/i18n'
-import logger from '@/utils/logger'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
-
-const log = logger.child('OllamaTutorialCard')
-const emit = defineEmits(['installed', 'settings'])
-const ollamaStatusStore = useOllamaStatusStore()
-const { t } = useI18n()
-
-const tutorialUrl = OLLAMA_TUTORIAL_URL
-
-const { start: startCheckConnection, stop: _stopCheckConnection, remaining: checkSignal } = useCountdown(600, { interval: 2000 })
-
-watch(checkSignal, (val) => {
-  if (val) reScanOllama()
-})
-
-const onClickInstall = () => {
-  startCheckConnection()
-}
-
-const reScanOllama = async () => {
-  const success = await ollamaStatusStore.updateConnectionStatus()
-  log.info('Ollama connection test result:', success)
-  if (success) emit('installed')
-}
-
-const onClickOpenSettings = () => {
-  emit('settings')
-}
-</script>
diff --git a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
index 6651747f..6d66cbf2 100644
--- a/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/SloganCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-[#D5F4E1] to-[#FFFFFF] to-40% rounded-lg overflow-hidden pb-4">
+  <div class="flex flex-col items-center justify-start bg-gradient-to-b from-gradient-onboarding-start to-gradient-onboarding-end to-40% rounded-lg overflow-hidden pb-4">
     <div class="text-center max-w-full">
       <ImageElements class="max-w-full h-auto" />
-      <div class="font-semibold text-sm mt-5">
+      <div class="font-semibold text-sm mt-5 text-text-primary">
         {{ t('onboarding.banner.title') }}
       </div>
       <div class="max-w-64 mt-1">
diff --git a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
index 4f50de41..f99ded2d 100644
--- a/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
+++ b/entrypoints/sidepanel/components/Onboarding/WebLLMTutorialCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="p-6 flex flex-col gap-[10px] items-stretch bg-[#F2F2F2] rounded-lg m-[11px]"
+    class="p-6 flex flex-col gap-[10px] items-stretch bg-bg-neutral-subtle rounded-lg m-[11px] text-text-primary"
   >
     <div class="text-[15px] font-semibold flex items-center gap-1">
       {{ t('onboarding.webllm_tutorial.title') }}
@@ -23,7 +23,7 @@
     </Modal>
     <Button
       variant="secondary"
-      class="shrink-0 grow-0 flex mt-1 items-center justify-center rounded-md gap-2 font-bold cursor-pointer min-h-7"
+      class="shrink-0 grow-0 flex mt-1 items-center justify-center rounded-md gap-2 font-bold cursor-pointer min-h-7 bg-bg-component"
       :disabled="!supportWebLLM.supported"
       @click="initWebLLM"
     >
@@ -36,7 +36,7 @@
     </Button>
     <div
       v-if="!supportWebLLM.supported"
-      class="text-red-500 text-[10px] flex items-center gap-2 justify-start"
+      class="text-danger text-[10px] flex items-center gap-2 justify-start"
     >
       <IconWarning class="w-3 h-3" />
       {{ t('onboarding.webllm_tutorial.not_support_webllm') }}
diff --git a/entrypoints/sidepanel/components/Onboarding/index.vue b/entrypoints/sidepanel/components/Onboarding/index.vue
index fcab1b73..a32f3478 100644
--- a/entrypoints/sidepanel/components/Onboarding/index.vue
+++ b/entrypoints/sidepanel/components/Onboarding/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     v-if="isShow"
-    class="bg-[#F5F6FB]"
+    class="bg-bg-app"
   >
     <div ref="topRef">
       <div class="h-11 px-3 flex items-center justify-start">
         <div class="text-center" />
         <div class="absolute right-4 h-full flex items-center gap-4">
           <IconClose
-            class="w-4 h-4 cursor-pointer hover:text-gray-500"
+            class="w-4 h-4 cursor-pointer hover:text-text-tertiary"
             @click="onModelDownloaderFinished"
           />
         </div>
@@ -30,10 +30,10 @@
         <SloganCard />
         <div
           v-if="panel === 'tutorial'"
-          class="bg-white rounded-lg overflow-hidden grow flex flex-col justify-between font"
+          class="bg-bg-primary rounded-lg overflow-hidden grow flex flex-col justify-between font"
         >
-          <OllamaTutorialCard
-            @installed="onOllamaInstalled"
+          <BackendSelectionTutorialCard
+            @installed="onBackendInstalled"
             @settings="onOpenSettings"
           />
           <WebLLMTutorialCard
@@ -45,7 +45,8 @@
           v-else-if="panel === 'model-downloader'"
           class="grow grid place-content-stretch"
         >
-          <OllamaModelDownloader
+          <BackendModelDownloader
+            :endpointType="downloadEndpointType"
             @finished="onModelDownloaderFinished"
           />
         </div>
@@ -63,14 +64,14 @@ import ExhaustiveError from '@/components/ExhaustiveError.vue'
 import Logo from '@/components/Logo.vue'
 import ScrollContainer from '@/components/ScrollContainer.vue'
 import { useI18n } from '@/utils/i18n'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { getUserConfig, TARGET_ONBOARDING_VERSION } from '@/utils/user-config'
 
 import { showSettings } from '../../../../utils/settings'
 import { Chat } from '../../utils/chat'
 import { welcomeMessage } from '../../utils/chat/texts'
-import OllamaModelDownloader from './OllamaModelDownloader.vue'
-import OllamaTutorialCard from './OllamaTutorialCard.vue'
+import BackendModelDownloader from './BackendModelDownloader.vue'
+import BackendSelectionTutorialCard from './BackendSelectionTutorialCard.vue'
 import SloganCard from './SloganCard.vue'
 import WebLLMTutorialCard from './WebLLMTutorialCard.vue'
 
@@ -78,17 +79,19 @@ const isFirefox = import.meta.env.FIREFOX
 const { t } = useI18n()
 const userConfig = await getUserConfig()
 const chat = await Chat.getInstance()
-const ollamaStatusStore = useOllamaStatusStore()
+const llmBackendStatusStore = useLLMBackendStatusStore()
 const endpointType = userConfig.llm.endpointType.toRef()
 const onboardingVersion = userConfig.ui.onboarding.version.toRef()
 const panel = ref<'tutorial' | 'model-downloader'>('tutorial')
+const downloadEndpointType = ref<'ollama' | 'lm-studio'>('ollama')
 const isShow = computed(() => {
   return onboardingVersion.value !== TARGET_ONBOARDING_VERSION
 })
 
-const onOllamaInstalled = async () => {
-  endpointType.value = 'ollama'
-  const modelList = await ollamaStatusStore.updateModelList()
+const onBackendInstalled = async (backend: 'ollama' | 'lm-studio') => {
+  endpointType.value = backend
+  downloadEndpointType.value = backend
+  const modelList = backend === 'ollama' ? await llmBackendStatusStore.updateOllamaModelList() : await llmBackendStatusStore.updateLMStudioModelList()
   if (modelList.length === 0) {
     panel.value = 'model-downloader'
   }
@@ -105,8 +108,8 @@ const onOpenSettings = async () => {
 
 const onModelDownloaderFinished = async () => {
   endpointType.value = 'ollama'
-  await ollamaStatusStore.updateConnectionStatus()
-  await ollamaStatusStore.updateModelList()
+  await llmBackendStatusStore.updateOllamaConnectionStatus()
+  await llmBackendStatusStore.updateOllamaModelList()
   close()
 }
 
@@ -135,10 +138,10 @@ const close = () => {
 
 onMounted(async () => {
   if (isShow.value) {
-    const success = await ollamaStatusStore.updateConnectionStatus()
-    if (success) {
-      onOllamaInstalled()
-    }
+    const ollamaSuccess = await llmBackendStatusStore.updateOllamaConnectionStatus()
+    if (ollamaSuccess) return onBackendInstalled('ollama')
+    const lmStudioSuccess = await llmBackendStatusStore.updateLMStudioConnectionStatus()
+    if (lmStudioSuccess) return onBackendInstalled('lm-studio')
   }
 })
 </script>
diff --git a/entrypoints/sidepanel/utils/agent/index.ts b/entrypoints/sidepanel/utils/agent/index.ts
index 52a8b9dd..9376d657 100644
--- a/entrypoints/sidepanel/utils/agent/index.ts
+++ b/entrypoints/sidepanel/utils/agent/index.ts
@@ -8,7 +8,7 @@ import { AssistantMessageV1 } from '@/types/chat'
 import { PromiseOr } from '@/types/common'
 import { Base64ImageData, ImageDataWithId } from '@/types/image'
 import { TagBuilderJSON } from '@/types/prompt'
-import { AbortError, AiSDKError, AppError, ErrorCode, fromError, ModelNotFoundError, ModelRequestError, ParseFunctionCallError, UnknownError } from '@/utils/error'
+import { AbortError, AiSDKError, AppError, ErrorCode, fromError, LMStudioLoadModelError, ModelNotFoundError, ModelRequestError, ParseFunctionCallError, UnknownError } from '@/utils/error'
 import { useGlobalI18n } from '@/utils/i18n'
 import { generateRandomId } from '@/utils/id'
 import { InferredParams } from '@/utils/llm/tools/prompt-based/helpers'
@@ -414,7 +414,7 @@ export class Agent<T extends PromptBasedToolName> {
       const { t } = await useGlobalI18n()
       const errorMsg = agentMessageManager.convertToAssistantMessage()
       errorMsg.isError = true
-      errorMsg.content = t('errors.model_not_found')
+      errorMsg.content = t('errors.model_not_found', { endpointType: error.endpointType === 'ollama' ? 'Ollama' : 'LM Studio' })
       // unresolvable error, break the loop
       return false
     }
@@ -422,14 +422,23 @@ export class Agent<T extends PromptBasedToolName> {
       const { t } = await useGlobalI18n()
       const errorMsg = agentMessageManager.convertToAssistantMessage()
       errorMsg.isError = true
-      errorMsg.content = t('errors.model_request_error')
+      errorMsg.content = t('errors.model_request_error', { endpointType: error.endpointType === 'ollama' ? 'Ollama' : 'LM Studio' })
       return false
     }
-    else if (error instanceof UnknownError) {
+    else if (error instanceof LMStudioLoadModelError) {
       const { t } = await useGlobalI18n()
       const errorMsg = agentMessageManager.convertToAssistantMessage()
       errorMsg.isError = true
-      errorMsg.content = t('errors.unknown_error', { error: error.message })
+      const msg = error.message.split('\n')[0]
+      const trimmedMsg = msg.length > 300 ? msg.slice(0, 300) + '...' : msg
+      errorMsg.content = t('errors.unknown_error', { message: trimmedMsg })
+      return false
+    }
+    else if (error instanceof AppError) {
+      const { t } = await useGlobalI18n()
+      const errorMsg = agentMessageManager.convertToAssistantMessage()
+      errorMsg.isError = true
+      errorMsg.content = t('errors.unknown_error', { message: error.message })
       return false
     }
     return true // continue loop if not fatal error
diff --git a/entrypoints/sidepanel/utils/chat/chat.ts b/entrypoints/sidepanel/utils/chat/chat.ts
index 9a2cbca7..a52bdf65 100644
--- a/entrypoints/sidepanel/utils/chat/chat.ts
+++ b/entrypoints/sidepanel/utils/chat/chat.ts
@@ -6,7 +6,6 @@ import type { ActionMessageV1, ActionTypeV1, ActionV1, AgentMessageV1, AgentTask
 import { ContextAttachmentStorage } from '@/types/chat'
 import { nonNullable } from '@/utils/array'
 import { debounce } from '@/utils/debounce'
-import { AbortError, AppError } from '@/utils/error'
 import { useGlobalI18n } from '@/utils/i18n'
 import { generateRandomId } from '@/utils/id'
 import { PromptBasedToolName } from '@/utils/llm/tools/prompt-based/tools'
@@ -314,12 +313,11 @@ export class Chat {
           title: defaultTitle,
           lastInteractedAt: Date.now(),
           reasoningEnabled: undefined, // Default to undefined for new chats
+          onlineSearchEnabled: true, // Default to true for new chats
         })
 
-        // If this is a new chat (no existing history), set global reasoning to true
-        if (!existingChatHistory) {
-          userConfig.llm.reasoning.set(true)
-        }
+        userConfig.llm.reasoning.set(chatHistory.value.reasoningEnabled ?? true)
+        userConfig.chat.onlineSearch.enable.set(chatHistory.value.onlineSearchEnabled ?? true)
         const contextAttachments = ref<ContextAttachmentStorage>(await s2bRpc.getContextAttachments(chatHistoryId.value) ?? { attachments: [], id: chatHistoryId.value, lastInteractedAt: Date.now() })
         const chatList = ref<ChatList>([])
         const updateChatList = async () => {
@@ -360,11 +358,12 @@ export class Chat {
         watch(chatHistoryId, async (newId, oldId) => {
           if (newId === oldId) return
 
-          log.debug('[Chat] Switching to chat:', newId)
+          log.debug('Switching to chat:', newId)
           instance.stop()
 
           // Load the new chat data
           const existingNewChatHistory = await s2bRpc.getChatHistory(newId)
+          log.debug('Loaded chat history for new chat ID:', newId, existingNewChatHistory)
           const newChatHistory: ChatHistoryV1 = existingNewChatHistory ?? {
             history: [],
             id: newId,
@@ -372,12 +371,9 @@ export class Chat {
             lastInteractedAt: Date.now(),
             contextUpdateInfo: undefined,
             reasoningEnabled: undefined, // Default to undefined for new chats
+            onlineSearchEnabled: true, // Default to true for new chats
           }
 
-          // If this is a new chat (no existing history), set global reasoning to true
-          if (!existingNewChatHistory) {
-            userConfig.llm.reasoning.set(true)
-          }
           const newContextAttachments: ContextAttachmentStorage = await s2bRpc.getContextAttachments(newId) ?? {
             attachments: [],
             id: newId,
@@ -388,10 +384,8 @@ export class Chat {
           Object.assign(chatHistory.value, newChatHistory)
           Object.assign(contextAttachments.value, newContextAttachments)
 
-          // Restore the reasoning setting for this chat
-          if (newChatHistory.reasoningEnabled !== undefined) {
-            userConfig.llm.reasoning.set(newChatHistory.reasoningEnabled)
-          }
+          userConfig.llm.reasoning.set(newChatHistory.reasoningEnabled ?? true)
+          userConfig.chat.onlineSearch.enable.set(newChatHistory.onlineSearchEnabled ?? true)
 
           // Clean up any loading messages
           instance.historyManager.cleanupLoadingMessages()
@@ -420,7 +414,7 @@ export class Chat {
   static createActionEventDispatcher<ActionType extends ActionTypeV1>(action: ActionType) {
     return function actionEvent(data: ActionV1[ActionType], el?: HTMLElement | EventTarget | null) {
       log.debug('Creating action event', action, data)
-      ;(el ?? window).dispatchEvent(new ActionEvent<ActionType>(action, data))
+      ; (el ?? window).dispatchEvent(new ActionEvent<ActionType>(action, data))
     }
   }
 
@@ -463,19 +457,6 @@ export class Chat {
     return this.status.value === 'pending' || this.status.value === 'streaming'
   }
 
-  private async errorHandler(e: unknown, msg?: AssistantMessageV1) {
-    log.error('Error in chat', e)
-    if (!(e instanceof AbortError)) {
-      const errorMsg = msg || this.historyManager.appendAssistantMessage()
-      errorMsg.isError = true
-      errorMsg.done = true
-      errorMsg.content = e instanceof AppError ? await e.toLocaleMessage() : 'Unexpected error occurred'
-    }
-    else if (msg) {
-      this.historyManager.deleteMessage(msg)
-    }
-  }
-
   statusScope(status: Exclude<ChatStatus, 'idle'>) {
     log.debug('statusScope', status)
     this.status.value = status
diff --git a/entrypoints/sidepanel/utils/chat/side-effects.ts b/entrypoints/sidepanel/utils/chat/side-effects.ts
index edaa1e70..e03b0980 100644
--- a/entrypoints/sidepanel/utils/chat/side-effects.ts
+++ b/entrypoints/sidepanel/utils/chat/side-effects.ts
@@ -12,7 +12,7 @@ async function appendOrUpdateQuickActionsIfNeeded(chat: Chat) {
   const { t } = await useGlobalI18n()
   const userConfig = await getUserConfig()
   const actionsRef = userConfig.chat.quickActions.actions.toRef()
-  const icons = ['summarizeBoxed', 'highlightBoxed', 'searchBoxed'] as const
+  const icons = ['summarizeAction', 'highlightAction', 'searchAction'] as const
   const actions: ActionMessageV1['actions'] = actionsRef.value.map((action, index) => {
     const defaultTitle = t(actionsRef.defaultValue[index]?.defaultTitleKey)
     return {
diff --git a/entrypoints/sidepanel/utils/chat/texts.ts b/entrypoints/sidepanel/utils/chat/texts.ts
index d403b01e..284a2a39 100644
--- a/entrypoints/sidepanel/utils/chat/texts.ts
+++ b/entrypoints/sidepanel/utils/chat/texts.ts
@@ -8,6 +8,6 @@ export const welcomeMessage = (t: ComposerTranslation) => {
   return `
 ${makeParagraph(t('onboarding.welcome_msg.title'), { class: 'text-base font-normal' })}
 
-${makeContainer(t('onboarding.welcome_msg.body'), { class: 'text-xs text-[#596066]' })}
+${makeContainer(t('onboarding.welcome_msg.body'), { class: 'text-xs text-text-secondary' })}
 `.trim()
 }
diff --git a/entrypoints/sidepanel/utils/chat/tool-calls/index.ts b/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
index 8c767ec4..1d4ffc3c 100644
--- a/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
+++ b/entrypoints/sidepanel/utils/chat/tool-calls/index.ts
@@ -6,7 +6,7 @@ import { markdownSectionDiff } from '@/utils/diff'
 import { useGlobalI18n } from '@/utils/i18n'
 import Logger from '@/utils/logger'
 import { makeIcon, makeRawHtmlTag } from '@/utils/markdown/content'
-import { useOllamaStatusStore } from '@/utils/pinia-store/store'
+import { useLLMBackendStatusStore } from '@/utils/pinia-store/store'
 import { Tab } from '@/utils/tab'
 import { timeout } from '@/utils/timeout'
 import { isUrlEqual } from '@/utils/url'
@@ -21,6 +21,18 @@ const logger = Logger.child('tool-calls-execute')
 
 export const executeSearchOnline: AgentToolCallExecute<'search_online'> = async ({ params, abortSignal, taskMessageModifier }) => {
   const { t } = await useGlobalI18n()
+  const userConfig = await getUserConfig()
+  const enableOnlineSearch = userConfig.chat.onlineSearch.enable.get()
+  if (!enableOnlineSearch) {
+    return [{
+      type: 'tool-result',
+      results: {
+        query: params.query,
+        status: 'failed',
+        error_message: 'Online search is disabled in settings',
+      },
+    }]
+  }
   const log = logger.child('tool:executeSearchOnline')
   const HARD_MAX_RESULTS = 10
   const { query, max_results } = params
@@ -50,8 +62,14 @@ export const executeSearchOnline: AgentToolCallExecute<'search_online'> = async
   taskMsg.details = {
     content: filteredLinks.map((link) => {
       const faviconUrl = link.favicon?.startsWith('data:') ? link.favicon : undefined
-      const faviconPart = faviconUrl ? makeRawHtmlTag('img', '', { src: faviconUrl, style: 'width: 16px; height: 16px;' }) : makeIcon('web', { color: '#596066' })
-      const linkPart = makeRawHtmlTag('a', link.title || link.url, { href: link.url, target: '_blank', style: 'color: #596066; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;' })
+      const faviconPart = faviconUrl
+        ? makeRawHtmlTag('img', '', { src: faviconUrl, style: 'width: 16px; height: 16px;' })
+        : makeIcon('web', { color: 'var(--color-text-secondary, #596066)' })
+      const linkPart = makeRawHtmlTag('a', link.title || link.url, {
+        href: link.url,
+        target: '_blank',
+        style: 'color: var(--color-text-secondary, #596066); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;',
+      })
       return makeRawHtmlTag('div', `${faviconPart} ${linkPart}`, { style: 'display: flex; align-items: center; gap: 8px;' })
     }).join('\n'),
     expanded: true,
@@ -265,7 +283,7 @@ export const executeViewImage: AgentToolCallExecute<'view_image'> = async ({ par
       },
     }]
   }
-  const supportVision = await useOllamaStatusStore().checkCurrentModelSupportVision()
+  const supportVision = await useLLMBackendStatusStore().checkCurrentModelSupportVision()
   if (!supportVision) {
     taskMsg.icon = 'warningColored'
     taskMsg.summary = `Current model does not support image processing`
diff --git a/entrypoints/sidepanel/utils/llm.ts b/entrypoints/sidepanel/utils/llm.ts
index eb6d4521..ed649ba1 100644
--- a/entrypoints/sidepanel/utils/llm.ts
+++ b/entrypoints/sidepanel/utils/llm.ts
@@ -1,3 +1,4 @@
+import { DownloadProgressUpdate } from '@lmstudio/sdk'
 import type { InitProgressReport } from '@mlc-ai/web-llm'
 import { TextStreamPart, ToolSet } from 'ai'
 import type { ProgressResponse } from 'ollama/browser'
@@ -92,6 +93,18 @@ export async function* pullOllamaModel(modelId: string, abortSignal?: AbortSigna
   yield* iter
 }
 
+export async function* pullLMStudioModel(modelName: string, abortSignal?: AbortSignal) {
+  const { portName } = await s2bRpc.pullLMStudioModel(modelName)
+  const aliveKeeper = new BackgroundAliveKeeper()
+  const port = browser.runtime.connect({ name: portName })
+  port.onDisconnect.addListener(() => aliveKeeper.dispose())
+  abortSignal?.addEventListener('abort', () => {
+    port.disconnect()
+  })
+  const iter = readPortMessageIntoIterator<DownloadProgressUpdate>(port, { abortSignal })
+  yield* iter
+}
+
 export async function* initWebLLMEngine(model: WebLLMSupportedModel) {
   const { portName } = await s2bRpc.initWebLLMEngine(model)
   const port = browser.runtime.connect({ name: portName })
diff --git a/entrypoints/sidepanel/utils/markdown/content.ts b/entrypoints/sidepanel/utils/markdown/content.ts
index 7bddba67..9412d1b1 100644
--- a/entrypoints/sidepanel/utils/markdown/content.ts
+++ b/entrypoints/sidepanel/utils/markdown/content.ts
@@ -2,13 +2,15 @@ import IconDownload from '@/assets/icons/md-download.svg?raw'
 import IconEdit from '@/assets/icons/md-edit.svg?raw'
 import IconFileSuccess from '@/assets/icons/md-file-success.svg?raw'
 import IconFind from '@/assets/icons/md-find.svg?raw'
+import IconHighlightAction from '@/assets/icons/md-highlight-action.svg?raw'
 import IconHighlightBoxed from '@/assets/icons/md-highlight-boxed.svg?raw'
 import IconLink from '@/assets/icons/md-link.svg?raw'
-import IconQuickModified from '@/assets/icons/md-quick-action-modified.svg?raw'
 import IconSearch from '@/assets/icons/md-search.svg?raw'
+import IconSearchAction from '@/assets/icons/md-search-action.svg?raw'
 import IconSearchBoxed from '@/assets/icons/md-search-boxed.svg?raw'
 import IconSearchColored from '@/assets/icons/md-search-colored.svg?raw'
 import IconStar from '@/assets/icons/md-star.svg?raw'
+import IconSummarizeAction from '@/assets/icons/md-summarize-action.svg?raw'
 import IconSummarizeBoxed from '@/assets/icons/md-summarize-boxed.svg?raw'
 import IconTick from '@/assets/icons/md-tick.svg?raw'
 import IconTickColored from '@/assets/icons/md-tick-colored.svg?raw'
@@ -16,6 +18,7 @@ import IconTranslationBoxed from '@/assets/icons/md-translation-boxed.svg?raw'
 import IconWarning from '@/assets/icons/md-warning.svg?raw'
 import IconWarningColored from '@/assets/icons/md-warning-colored.svg?raw'
 import IconWritingBoxed from '@/assets/icons/md-writing-boxed.svg?raw'
+import IconQuickModified from '@/assets/icons/quick-action-modified.svg?raw'
 
 const iconMap = {
   tick: IconTick,
@@ -33,6 +36,9 @@ const iconMap = {
   translationBoxed: IconTranslationBoxed,
   writingBoxed: IconWritingBoxed,
   highlightBoxed: IconHighlightBoxed,
+  summarizeAction: IconSummarizeAction,
+  highlightAction: IconHighlightAction,
+  searchAction: IconSearchAction,
   edit: IconEdit,
   quickActionModifiedBoxed: IconQuickModified,
   searchBoxed: IconSearchBoxed,
diff --git a/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts b/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
index fef1f7bb..8a3aa9cf 100644
--- a/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
+++ b/entrypoints/sidepanel/utils/translator/utils/dom-utils.ts
@@ -354,18 +354,24 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.tintedHighlight: {
-      element.style.color = isBGDark ? '#A8B4FF' : '#2724D8'
+      element.style.color = isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #2724D8)'
       break
     }
     case TranslationDisplayStyle.overlay: {
-      element.style.backgroundColor = isBGDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(0,0,0,0.08)'
+      element.style.backgroundColor = isBGDark
+        ? 'var(--color-overlay-subtle-on-dark, rgba(255, 255, 255, 0.16))'
+        : 'var(--color-overlay-subtle-on-light, rgba(0, 0, 0, 0.08))'
       element.style.borderRadius = '8px'
       element.style.padding = '8px 12px'
       break
     }
     case TranslationDisplayStyle.tintedOverlay: {
       const innerElement = document.createElement('span')
-      innerElement.style.backgroundColor = isBGDark ? 'rgba(200, 200, 200, 0.3)' : 'rgba(74, 101, 243, 0.1)'
+      innerElement.style.backgroundColor = isBGDark
+        ? 'var(--color-translation-overlay-dark, rgba(200, 200, 200, 0.3))'
+        : 'var(--color-translation-overlay-light, rgba(74, 101, 243, 0.1))'
       innerElement.innerHTML = element.innerHTML
       innerElement.classList.add(translationTargetInnerClass)
       element.innerHTML = ''
@@ -373,11 +379,15 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       break
     }
     case TranslationDisplayStyle.wavyLine: {
-      applyUnderlineStyle(element, 'wavy', isBGDark ? '#A8B4FF' : '#322EE5')
+      applyUnderlineStyle(element, 'wavy', isBGDark
+        ? 'var(--color-translation-highlight-contrast, #A8B4FF)'
+        : 'var(--color-translation-highlight, #322EE5)')
       break
     }
     case TranslationDisplayStyle.dashedLine: {
-      applyUnderlineStyle(element, 'dashed', isBGDark ? 'rgba(255, 255, 255, 0.56)' : 'rgba(0,0,0,0.32)')
+      applyUnderlineStyle(element, 'dashed', isBGDark
+        ? 'var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : 'var(--color-translation-underline-light, rgba(0,0,0,0.32))')
       break
     }
     case TranslationDisplayStyle.divider: {
@@ -386,7 +396,9 @@ export function updateTranslationTextStyle(element: HTMLElement, style: Translat
       divider.classList.add(translationTargetDividerClass)
       divider.style.width = '48px'
       divider.style.marginTop = '8px'
-      divider.style.borderBottom = isBGDark ? '1px dashed rgba(255, 255, 255, 0.56)' : '1px dashed rgba(0, 0, 0, 0.32)'
+      divider.style.borderBottom = isBGDark
+        ? '1px dashed var(--color-translation-underline-dark, rgba(255, 255, 255, 0.56))'
+        : '1px dashed var(--color-translation-underline-light, rgba(0, 0, 0, 0.32))'
 
       element.before(divider)
       break
diff --git a/locales/de.json b/locales/de.json
index 42c27104..9d761d29 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Versuchen Sie, auf einen Seitenlink zu klicken, bevor Sie Seiten anzeigen",
         "error_click_incorrect_link": "Versuchen Sie, auf den fehlerhaften Seitenlink zu klicken"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Suchen"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "KI direkt auf Ihrem Gerät – nur für Sie entwickelt"
     },
     "guide": {
-      "already_installed": "Haben Sie Ollama bereits installiert und gestartet?",
+      "already_installed": "Bereits installiert und {endpointType} ausgeführt?",
       "features": {
         "1": "Führen Sie erweiterte Modelle wie gpt-oss, DeepSeek, Qwen, Llama aus",
         "2": "Passen Sie die Modelle mit voller Steuerung an und wechseln Sie sie",
         "3": "Ihre Daten bleiben privat auf Ihrem Gerät"
       },
       "follow_our_tutorial": "Folgen Sie unserem Installationshandbuch",
-      "get_ollama": "Holen Sie sich Ollama",
-      "install_desc": "Installieren Sie Ollama, um Ihre lokale KI einzurichten.",
+      "install_desc": "Wie möchten Sie KI lokal ausführen?",
       "need_help": "Benötigen Sie Hilfe?",
-      "ollama_desc": "Mit Ollama die volle lokale KI -Macht freischalten.",
       "setup": "Aufstellen",
       "step1": "Schritt 1",
       "download_model_to_begin": "Laden Sie ein Modell herunter, um zu beginnen.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Nicht sicher, welches Sie wählen sollen?",
       "learn_about_models": "Erfahren Sie mehr über Modelle",
       "looking_for_more_options": "🔍 Suchen Sie nach weiteren Optionen?",
-      "browse_more_models": "Weitere Modelle durchsuchen"
+      "browse_more_models": "Weitere Modelle durchsuchen",
+      "get_endpoint": "Erhalte {endpointType}",
+      "lm_studio_select_desc": "Benutzerfreundliche Desktop-Anwendung",
+      "ollama_select_desc": "Professionelles Entwicklertool",
+      "unlock_full_power_with": "Entfesseln Sie die volle lokale KI-Leistung mit {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Verwenden Sie ein leichtes Modell (QWEN 0,6B) direkt in Ihrem Browser - kein Setup, kein Warten.",
@@ -132,7 +139,8 @@
       "title": "👋 Willkommen bei **NativeMind**",
       "body": "NATIVEMIND ist eine Datenschutz-AI-Browser-Erweiterung, die Ihnen hilft, zu chatten, zu suchen und zu übersetzen-alles mit Sprachmodellen für das Gerät.\n\n\nFolgendes können Sie mit Nativemind machen:\n\n\n\n- Chatten Sie über mehrere Registerkarten hinweg, um verschiedene Seiten im Auge zu behalten.\n\n- Durchsuchen Sie das Web direkt im Chat, um einen weiteren Kontext zu erhalten.\n\n- Klicken Sie mit der rechten Maustaste, um einen Teil der Seite sofort zu übersetzen.\n\n- Modelle jederzeit in Einstellungen wechseln oder herunterladen.\n\n\nSie können zunächst die schnellen Aktionen unten ausprobieren."
     },
-    "ollama_is_running": "Ollama läuft"
+    "ollama_is_running": "Ollama läuft",
+    "backend_is_running": "{endpointType} läuft"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Modelle",
       "discover_more": "Entdecken Sie weitere Modelle",
       "no_model": "⚠️ Kein Modell",
-      "add_model_to_start": "Fügen Sie ein Modell hinzu, um zu beginnen"
+      "add_model_to_start": "Fügen Sie ein Modell hinzu, um zu beginnen",
+      "ollama_models": "Ollama Modelle ({count})",
+      "lmstudio_models": "LM Studio Modelle ({count})"
     },
     "ollama": {
       "already_installed": "Haben Sie Ollama bereits installiert und gestartet?",
@@ -182,19 +192,15 @@
       "unload": "Entladen",
       "running": "Läuft",
       "expires_in": "Läuft ab in {duration}",
-      "running_models": "Laufende Modelle"
+      "running_models": "Laufende Modelle",
+      "model_management": "Modellverwaltung",
+      "downloaded_models": "Heruntergeladene Modelle"
     },
     "prompts": {
       "chat_system_prompt": "Chat -System Eingabeaufforderung",
       "title": "Prompt",
       "translation_system_prompt": "Übersetzungs-System-Prompt"
     },
-    "provider": {
-      "title": "Modellanbieter"
-    },
-    "provider_model": {
-      "title": "Anbieter"
-    },
     "quick_actions": {
       "description": "Richten Sie schnelle Aktionen ein, um Ihre bevorzugten Eingabeaufforderungen schneller auszuführen-aus dem neuen Chat oder dem Rechtsklickmenü.",
       "edit": {
@@ -236,19 +242,22 @@
         "quant": "{level} Quant",
         "thinking": "Denken",
         "no_active_models": "Ollama verbunden, aber keine aktiven Modelle",
-        "not_connected_to_ollama": "Nicht mit Ollama verbunden"
-      }
+        "not_connected_to_ollama": "Nicht mit Ollama verbunden",
+        "lm_studio_no_active_models": "LM Studio verbunden, aber keine aktiven Modelle",
+        "not_connected_to_lm_studio": "Nicht mit LM Studio verbunden"
+      },
+      "delete_model_confirm": "Sind Sie sicher, dass Sie das Modell \"{model}\" löschen möchten?"
     },
     "title": "Einstellungen",
     "model_downloader": {
-      "could_not_connect_ollama": "Wir konnten keine Verbindung zu Ollama herstellen. Bitte stellen Sie sicher, dass Ollama läuft und versuchen Sie es erneut.",
       "description": "Dieses Modell muss vor der Verwendung heruntergeladen werden. Der Download kann einige Minuten dauern.",
       "download": "Herunterladen",
       "download_model": "Lade \"{model}\" herunter",
       "downloading": "Ihr Modell wird heruntergeladen. Bitte warten…",
       "downloading_model": "Lade \"{model}\" herunter",
       "retry": "Wiederholen",
-      "unable_to_download": "Download kann nicht gestartet werden"
+      "unable_to_download": "Download kann nicht gestartet werden",
+      "could_not_connect": "Wir konnten keine Verbindung zu {endpointType} herstellen. Bitte stellen Sie sicher, dass {endpointType} läuft und versuchen Sie es erneut."
     },
     "webllm_downloader": {
       "description": "Um den lokalen Modus zu verwenden, müssen Sie das {model}-Modell ({size}) herunterladen. Möchten Sie es jetzt herunterladen?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Schnittstelle",
       "interface_language": "Schnittstellensprache",
-      "interface_language_desc": "Wählen Sie die Anzeigesprache für die NativeMind-Benutzeroberfläche"
+      "theme": "Design",
+      "theme_light": "Hell",
+      "theme_dark": "Dunkel",
+      "theme_system": "System"
     },
     "header": {
       "starts_on_github": "Sterne auf GitHub",
       "goto_website": "Gehen Sie zur Website"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "LM Studio konfigurieren",
+        "already_installed": "Bereits LM Studio installiert und ausgeführt?",
+        "model_management_desc": "Das Herunterladen, Laden und Löschen von Modellen muss in der LM Studio Desktop-App erfolgen. Dies zeigt nur den aktuellen Ausführungsstatus an."
+      },
+      "ollama": {
+        "title": "Ollama konfigurieren"
+      }
+    },
+    "get_lm_studio": "Holen Sie sich LM Studio",
+    "delete": "Löschen",
+    "lm_studio": {
+      "server_address": "Serveradresse",
+      "server_address_desc": "LM Studio Server-API-Endpunkt"
+    },
+    "webllm_desc_lm_studio": "Sie verwenden jetzt WebLLM: qwen3:0.6b für einen schnellen Test. Für vollständige Modellunterstützung und bessere Leistung installieren Sie bitte LM Studio.",
     "gmail_tools": {
       "title": "Gmail-Tools",
       "description": "Verschiedene Schreibassistenz-Funktionen konfigurieren",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "Ups! Etwas ist schiefgelaufen. Bitte überprüfen Sie Ihre Ollama-Verbindung in den Einstellungen und versuchen Sie es erneut.",
-    "model_request_error": "Ups! Etwas ist schiefgelaufen. Bitte überprüfen Sie Ihre Ollama-Verbindung in den Einstellungen und versuchen Sie es erneut.",
-    "model_request_timeout": "Anfrage-Timeout. Bitte überprüfen Sie Ihre Ollama-Verbindung oder starten Sie eine neue Sitzung, da lange Kontexte die Antwortzeiten beeinträchtigen können.",
+    "model_not_found": "Hoppla! Etwas ist schiefgelaufen. Bitte überprüfen Sie Ihre Verbindung in den Einstellungen und versuchen Sie es erneut.",
+    "model_request_error": "Hoppla! Etwas ist schiefgelaufen. Bitte überprüfen Sie Ihre Verbindung in den Einstellungen und versuchen Sie es erneut.",
+    "model_request_timeout": "Anfrage-Timeout, bitte überprüfen Sie Ihre Verbindung oder erwägen Sie, eine neue Sitzung zu starten, da lange Kontexte die Antwortzeiten beeinträchtigen können.",
     "timeout_error": "Zeitüberschreitung bei der Operation: {message}",
     "unknown_error": "Ein unerwarteter Fehler ist aufgetreten: {message}",
     "webllm_not_supported": "WebLLM wird auf Ihrem Gerät nicht unterstützt.",
diff --git a/locales/en.json b/locales/en.json
index 1c454f84..5b52d4c8 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -37,7 +37,9 @@
       "running_models": "Running Models",
       "unload": "Unload",
       "running": "Running",
-      "expires_in": "Expires in {duration}"
+      "expires_in": "Expires in {duration}",
+      "model_management": "Model Management",
+      "downloaded_models": "Downloaded Models"
     },
     "choose_model": "Choose Model",
     "download": "Download",
@@ -50,7 +52,9 @@
       "title": "Models",
       "discover_more": " Discover more models",
       "no_model": "⚠️ No model",
-      "add_model_to_start": "Add a model to start"
+      "add_model_to_start": "Add a model to start",
+      "ollama_models": "Ollama Models ({count})",
+      "lmstudio_models": "LM Studio Models ({count})"
     },
     "quick_actions": {
       "title": "Customize Quick Actions",
@@ -70,11 +74,15 @@
       "join_waitlist": "💼 Want to use it at work? {join_waitlist_link} for enterprise updates.",
       "join_waitlist_link": "Join the waitlist"
     },
-    "provider": {
-      "title": "Connection"
-    },
-    "provider_model": {
-      "title": "Configure Ollama"
+    "providers": {
+      "ollama": {
+        "title": "Configure Ollama"
+      },
+      "lm_studio": {
+        "title": "Configure LM Studio",
+        "model_management_desc": "Model download, loading, and deletion must be done in the LM Studio desktop app. This only shows current running status.",
+        "already_installed": "Already installed and run LM Studio?"
+      }
     },
     "cache": {
       "title": "Translation Cache",
@@ -101,8 +109,11 @@
         "quant": "{level} quant",
         "thinking": "Thinking",
         "not_connected_to_ollama": "Not connected to Ollama",
-        "no_active_models": "Ollama connected, but no active models"
-      }
+        "no_active_models": "Ollama connected, but no active models",
+        "lm_studio_no_active_models": "LM Studio connected, but no active models",
+        "not_connected_to_lm_studio": "Not connected to LM Studio"
+      },
+      "delete_model_confirm": "Are you sure you want to delete the model \"{model}\"?"
     },
     "title": "Settings",
     "model_downloader": {
@@ -113,7 +124,7 @@
       "download_model": "Download “{model}“\t",
       "unable_to_download": "Unable to Start Download",
       "retry": "Retry",
-      "could_not_connect_ollama": "We couldn’t connect to Ollama. Please make sure Ollama is running and try again."
+      "could_not_connect": "We couldn’t connect to {endpointType}. Please make sure {endpointType} is running and try again."
     },
     "webllm_downloader": {
       "description": "To use Local mode, you need to download the {model} model ({size}). Would you like to download it now?"
@@ -177,12 +188,22 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Interface Language",
-      "interface_language_desc": "Choose the display language for NativeMind interface"
+      "theme": "Theme",
+      "theme_light": "Light",
+      "theme_dark": "Dark",
+      "theme_system": "System"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
       "goto_website": "Go to the Website"
     },
+    "get_lm_studio": "Get LM Studio",
+    "lm_studio": {
+      "server_address": "Server Address",
+      "server_address_desc": "LM Studio server API endpoint"
+    },
+    "delete": "Delete",
+    "webllm_desc_lm_studio": "You are now using WebLLM: qwen3:0.6b for quick tryout. For full model support and better performance, please install LM Studio.",
     "gmail_tools": {
       "title": "Gmail Tools",
       "description": "Configure various writing assistance features",
@@ -296,6 +317,11 @@
         "error_click_before_view_tab": "Try clicking a page link before viewing any pages",
         "error_click_incorrect_link": "Try clicking on the incorrect page link"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Search"
+      }
     }
   },
   "chat_history": {
@@ -320,15 +346,14 @@
     },
     "guide": {
       "step1": "STEP 1",
-      "install_desc": "Install Ollama to set up your local AI.",
-      "ollama_desc": "Unlock full local AI power with Ollama.",
+      "install_desc": "How do you want to run AI locally?",
       "features": {
         "1": "Run advanced models like gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Customize and switch models with full control",
         "3": "Your data stays private, on your device"
       },
-      "get_ollama": "Get Ollama",
-      "already_installed": "Already installed and run Ollama?",
+      "get_endpoint": "Get {endpointType}",
+      "already_installed": "Already installed and run {endpointType}?",
       "setup": "Setup",
       "need_help": "Need help?",
       "follow_our_tutorial": "Follow our installation guide",
@@ -339,7 +364,10 @@
       "no_sure_which_one": "🤔 Not sure which one to choose?",
       "learn_about_models": "Learn about models",
       "looking_for_more_options": "🔍 Looking for more options?",
-      "browse_more_models": "Browse more models"
+      "browse_more_models": "Browse more models",
+      "ollama_select_desc": "Professional Developer Tool",
+      "lm_studio_select_desc": "Easy-to-use Desktop App",
+      "unlock_full_power_with": "Unlock full local AI power with {endpointType}."
     },
     "webllm_tutorial": {
       "title": "Not ready to install? Try it instantly.",
@@ -351,7 +379,8 @@
       "title": "👋 Welcome to **NativeMind**",
       "body": "NativeMind is a privacy-first AI browser extension that helps you chat, search, and translate — all powered by on-device language models.\n\nHere’s what you can do with NativeMind:\n\n\n- Chat across multiple tabs to keep track of different pages.\n- Search the web directly within the chat for more context.\n- Right-click to translate any part of the page instantly.\n- Switch or download models anytime in Settings.\n\nYou can start by trying out the quick actions below."
     },
-    "ollama_is_running": "Ollama is running"
+    "ollama_is_running": "Ollama is running",
+    "backend_is_running": "{endpointType} is running"
   },
   "context_menu": {
     "quick_actions": {
@@ -371,9 +400,9 @@
   },
   "errors": {
     "unknown_error": "An unexpected error occurred: {message}",
-    "model_request_error": "Oops! Something went wrong. Please check your Ollama connection in settings and try again.",
-    "model_not_found": "Oops! Something went wrong. Please check your Ollama connection in settings and try again.",
-    "model_request_timeout": "Request timeout, please check your Ollama connection or consider starting a new session as long contexts may affect response times.",
+    "model_request_error": "Oops! Something went wrong. Please check your connection in settings and try again.",
+    "model_not_found": "Oops! Something went wrong. Please check your connection in settings and try again.",
+    "model_request_timeout": "Request timeout, please check your connection or consider starting a new session as long contexts may affect response times.",
     "timeout_error": "Operation timed out: {message}",
     "webllm_not_supported": "WebLLM not supported on your device.",
     "max_characters_error": "Maximum {count} characters allowed"
diff --git a/locales/es.json b/locales/es.json
index 4b9bed18..f0db0018 100644
--- a/locales/es.json
+++ b/locales/es.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Intenta hacer clic en un enlace de página antes de ver cualquier página",
         "error_click_incorrect_link": "Intenta hacer clic en el enlace de página incorrecto"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Buscar"
+      }
     }
   },
   "chat_history": {
@@ -111,9 +116,9 @@
     }
   },
   "errors": {
-    "model_not_found": "¡Ups! Algo salió mal. Por favor, verifica tu conexión de Ollama en la configuración e inténtalo de nuevo.",
-    "model_request_error": "¡Ups! Algo salió mal. Por favor, verifica tu conexión de Ollama en la configuración e inténtalo de nuevo.",
-    "model_request_timeout": "Tiempo de espera agotado. Por favor verifica tu conexión de Ollama o considera iniciar una nueva sesión, ya que los contextos largos pueden afectar los tiempos de respuesta.",
+    "model_not_found": "¡Ups! Algo salió mal. Por favor revisa tu conexión en configuración e inténtalo de nuevo.",
+    "model_request_error": "¡Ups! Algo salió mal. Por favor revisa tu conexión en configuración e inténtalo de nuevo.",
+    "model_request_timeout": "Tiempo de espera agotado, por favor verifica tu conexión o considera iniciar una nueva sesión ya que los contextos largos pueden afectar los tiempos de respuesta.",
     "timeout_error": "La operación agotó el tiempo de espera: {message}",
     "unknown_error": "Se produjo un error inesperado: {message}",
     "webllm_not_supported": "WebLLM no es compatible con tu dispositivo.",
@@ -125,17 +130,15 @@
       "title": "IA en el dispositivo, creada solo para ti"
     },
     "guide": {
-      "already_installed": "¿Ya instalaste y ejecutaste Ollama?",
+      "already_installed": "¿Ya instalaste y ejecutaste {endpointType}?",
       "features": {
         "1": "Ejecuta modelos avanzados como gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Personaliza y cambia modelos con control total",
         "3": "Tus datos permanecen privados, en tu dispositivo"
       },
       "follow_our_tutorial": "Sigue nuestra guía de instalación",
-      "get_ollama": "Obtener Ollama",
-      "install_desc": "Instala Ollama para configurar tu IA local.",
+      "install_desc": "¿Cómo quieres ejecutar IA localmente?",
       "need_help": "¿Necesitas ayuda?",
-      "ollama_desc": "Desbloquea todo el poder de la IA local con Ollama.",
       "setup": "Configuración",
       "step1": "PASO 1",
       "download_model_to_begin": "Descarga un modelo para comenzar.",
@@ -145,7 +148,11 @@
       "no_sure_which_one": "🤔 ¿No estás seguro cuál elegir?",
       "learn_about_models": "Aprende sobre modelos",
       "looking_for_more_options": "🔍 ¿Buscas más opciones?",
-      "browse_more_models": "Explorar más modelos"
+      "browse_more_models": "Explorar más modelos",
+      "get_endpoint": "Obtener {endpointType}",
+      "lm_studio_select_desc": "Aplicación de Escritorio Fácil de Usar",
+      "ollama_select_desc": "Herramienta de Desarrollador Profesional",
+      "unlock_full_power_with": "Desbloquea todo el poder de la IA local con {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Usa un modelo ligero (Qwen 0.6b) directamente en tu navegador — sin configuración, sin espera.",
@@ -157,7 +164,8 @@
       "body": "NativeMind es una extensión de navegador con IA que prioriza la privacidad y te ayuda a chatear, buscar y traducir — todo impulsado por modelos de lenguaje en el dispositivo.\n\nEsto es lo que puedes hacer con NativeMind:\n\n- Chatear en múltiples pestañas para hacer seguimiento de diferentes páginas.\n- Buscar en la web directamente dentro del chat para más contexto.\n- Hacer clic derecho para traducir cualquier parte de la página al instante.\n- Cambiar o descargar modelos en cualquier momento en Configuración.\n\nPuedes empezar probando las acciones rápidas a continuación.",
       "title": "👋 Bienvenido a **NativeMind**"
     },
-    "ollama_is_running": "Ollama está ejecutándose"
+    "ollama_is_running": "Ollama está ejecutándose",
+    "backend_is_running": "{endpointType} está ejecutándose"
   },
   "settings": {
     "cache": {
@@ -193,15 +201,20 @@
         "quant": "{level} cuantitativo",
         "thinking": "Pensando",
         "no_active_models": "Ollama conectado, pero no hay modelos activos",
-        "not_connected_to_ollama": "No conectado a Ollama"
-      }
+        "not_connected_to_ollama": "No conectado a Ollama",
+        "lm_studio_no_active_models": "LM Studio conectado, pero no hay modelos activos",
+        "not_connected_to_lm_studio": "No conectado a LM Studio"
+      },
+      "delete_model_confirm": "¿Estás seguro de que quieres eliminar el modelo \"{model}\"?"
     },
     "get_ollama": "Obtener Ollama",
     "models": {
       "title": "Modelos",
       "discover_more": "Descubre más modelos",
       "no_model": "⚠️ Sin modelo",
-      "add_model_to_start": "Añadir un modelo para empezar"
+      "add_model_to_start": "Añadir un modelo para empezar",
+      "ollama_models": "Modelos de Ollama ({count})",
+      "lmstudio_models": "Modelos de LM Studio ({count})"
     },
     "ollama": {
       "already_installed": "¿Ya instalaste y ejecutaste Ollama?",
@@ -223,19 +236,15 @@
       "unload": "Descargar",
       "expires_in": "Expira en {duration}",
       "running": "Ejecutándose",
-      "running_models": "Modelos en Ejecución"
+      "running_models": "Modelos en Ejecución",
+      "model_management": "Gestión de Modelos",
+      "downloaded_models": "Modelos Descargados"
     },
     "prompts": {
       "chat_system_prompt": "Sistema de Indicaciones de Chat",
       "title": "Instrucciones",
       "translation_system_prompt": "Prompt del sistema de traducción"
     },
-    "provider": {
-      "title": "Conexión"
-    },
-    "provider_model": {
-      "title": "Configurar Ollama"
-    },
     "quick_actions": {
       "description": "Configura Acciones Rápidas para ejecutar tus instrucciones favoritas más rápido -- desde Nuevo Chat o el menú contextual.",
       "edit": {
@@ -273,7 +282,7 @@
       "download": "Descargar",
       "retry": "Reintentar",
       "unable_to_download": "No se puede iniciar la descarga",
-      "could_not_connect_ollama": "No pudimos conectar con Ollama. Por favor, asegúrate de que Ollama esté ejecutándose e inténtalo de nuevo."
+      "could_not_connect": "No pudimos conectar con {endpointType}. Por favor, asegúrate de que {endpointType} esté ejecutándose e inténtalo de nuevo."
     },
     "webllm_downloader": {
       "description": "Para usar el modo Local, necesitas descargar el modelo {model} ({size}). ¿Te gustaría descargarlo ahora?"
@@ -337,12 +346,32 @@
     "interface": {
       "title": "Interfaz",
       "interface_language": "Idioma de la Interfaz",
-      "interface_language_desc": "Elige el idioma de visualización para la interfaz de NativeMind"
+      "theme": "Tema",
+      "theme_light": "Claro",
+      "theme_dark": "Oscuro",
+      "theme_system": "Sistema"
     },
     "header": {
       "starts_on_github": "Estrellas en GitHub",
       "goto_website": "Ir al Sitio Web"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Configurar LM Studio",
+        "already_installed": "¿Ya instalaste y ejecutaste LM Studio?",
+        "model_management_desc": "La descarga, carga y eliminación de modelos debe realizarse en la aplicación de escritorio de LM Studio. Esto solo muestra el estado de ejecución actual."
+      },
+      "ollama": {
+        "title": "Configurar Ollama"
+      }
+    },
+    "get_lm_studio": "Obtener LM Studio",
+    "delete": "Eliminar",
+    "lm_studio": {
+      "server_address": "Dirección del Servidor",
+      "server_address_desc": "Punto final de la API del servidor LM Studio"
+    },
+    "webllm_desc_lm_studio": "Ahora estás usando WebLLM: qwen3:0.6b para una prueba rápida. Para soporte completo del modelo y mejor rendimiento, por favor instala LM Studio.",
     "gmail_tools": {
       "title": "Herramientas de Gmail",
       "description": "Configurar varias funciones de asistencia de escritura",
diff --git a/locales/fr.json b/locales/fr.json
index c5212c0b..57dc4615 100644
--- a/locales/fr.json
+++ b/locales/fr.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Essayez de cliquer sur un lien de page avant de consulter des pages",
         "error_click_incorrect_link": "Essayez de cliquer sur le lien de page incorrect"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Recherche"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "IA sur appareil, conçue spécialement pour vous"
     },
     "guide": {
-      "already_installed": "Ollama est déjà installé et en cours d'exécution ?",
+      "already_installed": "Déjà installé et exécuté {endpointType} ?",
       "features": {
         "1": "Exécutez des modèles avancés comme gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Personnalisez et changez de modèles avec un contrôle total",
         "3": "Vos données restent privées, sur votre appareil"
       },
       "follow_our_tutorial": "Suivez notre guide d'installation",
-      "get_ollama": "Obtenir Ollama",
-      "install_desc": "Installez Ollama pour configurer votre IA locale.",
+      "install_desc": "Comment voulez-vous exécuter l'IA localement ?",
       "need_help": "Besoin d'aide ?",
-      "ollama_desc": "Libérez toute la puissance de l'IA locale avec Ollama.",
       "setup": "Configuration",
       "step1": "ÉTAPE 1",
       "download_model_to_begin": "Téléchargez un modèle pour commencer.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Pas sûr lequel choisir ?",
       "learn_about_models": "En savoir plus sur les modèles",
       "looking_for_more_options": "🔍 Vous cherchez plus d'options ?",
-      "browse_more_models": "Parcourir plus de modèles"
+      "browse_more_models": "Parcourir plus de modèles",
+      "get_endpoint": "Obtenir {endpointType}",
+      "lm_studio_select_desc": "Application de bureau facile à utiliser",
+      "ollama_select_desc": "Outil de Développement Professionnel",
+      "unlock_full_power_with": "Débloquez toute la puissance de l'IA locale avec {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Utilisez un modèle léger (Qwen 0.6b) directement dans votre navigateur - sans configuration, sans attente.",
@@ -132,7 +139,8 @@
       "title": "👋 Bienvenue sur **NativeMind**",
       "body": "NativeMind est une extension de navigateur IA qui privilégie la confidentialité et vous aide à discuter, rechercher et traduire - le tout alimenté par des modèles de langage fonctionnant sur votre appareil.\n\n\nVoici ce que vous pouvez faire avec NativeMind :\n\n\n\n- Discuter à travers plusieurs onglets pour suivre différentes pages.\n\n- Rechercher sur le Web directement dans le chat pour plus de contexte.\n\n- Cliquer avec le bouton droit pour traduire instantanément n'importe quelle partie de la page.\n\n- Changer ou télécharger des modèles à tout moment dans les Paramètres.\n\n\nVous pouvez commencer par essayer les actions rapides ci-dessous."
     },
-    "ollama_is_running": "Ollama est en cours d'exécution"
+    "ollama_is_running": "Ollama est en cours d'exécution",
+    "backend_is_running": "{endpointType} est en cours d'exécution"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Modèles",
       "discover_more": "Découvrez plus de modèles",
       "no_model": "⚠️ Aucun modèle",
-      "add_model_to_start": "Ajouter un modèle pour commencer"
+      "add_model_to_start": "Ajouter un modèle pour commencer",
+      "ollama_models": "Modèles Ollama ({count})",
+      "lmstudio_models": "LM Studio Modèles ({count})"
     },
     "ollama": {
       "already_installed": "Ollama est déjà installé et en cours d'exécution ?",
@@ -182,19 +192,15 @@
       "unload": "Décharger",
       "expires_in": "Expire dans {duration}",
       "running": "En cours d'exécution",
-      "running_models": "Modèles en cours d'exécution"
+      "running_models": "Modèles en cours d'exécution",
+      "model_management": "Gestion des modèles",
+      "downloaded_models": "Modèles Téléchargés"
     },
     "prompts": {
       "chat_system_prompt": "Instruction système de chat",
       "title": "Instructions",
       "translation_system_prompt": "Prompt système de traduction"
     },
-    "provider": {
-      "title": "Connexion"
-    },
-    "provider_model": {
-      "title": "Configurer Ollama"
-    },
     "quick_actions": {
       "description": "Configurez des actions rapides pour exécuter vos instructions préférées plus rapidement - depuis le nouveau chat ou le menu contextuel.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} quant",
         "thinking": "Réflexion",
         "no_active_models": "Ollama connecté, mais aucun modèle actif",
-        "not_connected_to_ollama": "Pas connecté à Ollama"
-      }
+        "not_connected_to_ollama": "Pas connecté à Ollama",
+        "lm_studio_no_active_models": "LM Studio connecté, mais aucun modèle actif",
+        "not_connected_to_lm_studio": "Pas connecté à LM Studio"
+      },
+      "delete_model_confirm": "Êtes-vous sûr de vouloir supprimer le modèle \"{model}\" ?"
     },
     "title": "Paramètres",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "Télécharger",
       "retry": "Réessayer",
       "unable_to_download": "Impossible de démarrer le téléchargement",
-      "could_not_connect_ollama": "Nous n'avons pas pu nous connecter à Ollama. Veuillez vous assurer qu'Ollama est en cours d'exécution et réessayer."
+      "could_not_connect": "Nous n'avons pas pu nous connecter à {endpointType}. Veuillez vous assurer que {endpointType} est en cours d'exécution et réessayer."
     },
     "webllm_downloader": {
       "description": "Pour utiliser le mode Local, vous devez télécharger le modèle {model} ({size}). Souhaitez-vous le télécharger maintenant ?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Langue d'interface",
-      "interface_language_desc": "Choisissez la langue d'affichage pour l'interface NativeMind"
+      "theme": "Thème",
+      "theme_light": "Clair",
+      "theme_dark": "Sombre",
+      "theme_system": "Système"
     },
     "header": {
       "starts_on_github": "Étoiles sur GitHub",
       "goto_website": "Aller sur le site Web"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Configurer LM Studio",
+        "already_installed": "Déjà installé et exécuté LM Studio ?",
+        "model_management_desc": "Le téléchargement, le chargement et la suppression de modèles doivent être effectués dans l'application de bureau LM Studio. Ceci affiche uniquement l'état d'exécution actuel."
+      },
+      "ollama": {
+        "title": "Configurer Ollama"
+      }
+    },
+    "get_lm_studio": "Obtenez LM Studio",
+    "delete": "Supprimer",
+    "lm_studio": {
+      "server_address": "Adresse du serveur",
+      "server_address_desc": "Point de terminaison de l'API du serveur LM Studio"
+    },
+    "webllm_desc_lm_studio": "Vous utilisez maintenant WebLLM : qwen3:0.6b pour un essai rapide. Pour un support complet des modèles et de meilleures performances, veuillez installer LM Studio.",
     "gmail_tools": {
       "title": "Outils Gmail",
       "description": "Configurer diverses fonctionnalités d'assistance à la rédaction",
@@ -370,11 +399,11 @@
     }
   },
   "errors": {
-    "model_not_found": "Oups ! Quelque chose s'est mal passé. Veuillez vérifier votre connexion Ollama dans les paramètres et réessayer.",
-    "model_request_error": "Oups ! Quelque chose s'est mal passé. Veuillez vérifier votre connexion Ollama dans les paramètres et réessayer.",
+    "model_not_found": "Oups ! Quelque chose s'est mal passé. Veuillez vérifier votre connexion dans les paramètres et réessayer.",
+    "model_request_error": "Oups ! Quelque chose s'est mal passé. Veuillez vérifier votre connexion dans les paramètres et réessayer.",
     "timeout_error": "Opération expirée : {message}",
     "unknown_error": "Une erreur inattendue s'est produite : {message}",
-    "model_request_timeout": "Délai de requête expiré. Veuillez vérifier votre connexion Ollama ou envisager de démarrer une nouvelle session, car les contextes longs peuvent affecter les temps de réponse.",
+    "model_request_timeout": "Délai d'attente de la requête dépassé, veuillez vérifier votre connexion ou envisager de démarrer une nouvelle session car les contextes longs peuvent affecter les temps de réponse.",
     "webllm_not_supported": "WebLLM n'est pas pris en charge sur votre appareil.",
     "max_characters_error": "Maximum {count} caractères autorisés"
   },
diff --git a/locales/id.json b/locales/id.json
index f00882ae..c74f293f 100644
--- a/locales/id.json
+++ b/locales/id.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Coba klik tautan halaman sebelum melihat halaman apa pun",
         "error_click_incorrect_link": "Coba klik pada tautan halaman yang salah"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Cari"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "AI di perangkat, dibuat khusus untuk Anda"
     },
     "guide": {
-      "already_installed": "Sudah menginstal dan menjalankan Ollama?",
+      "already_installed": "Sudah terinstal dan menjalankan {endpointType}?",
       "features": {
         "1": "Jalankan model canggih seperti gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Sesuaikan dan beralih antar model dengan kontrol penuh",
         "3": "Data Anda tetap pribadi, tersimpan di perangkat Anda"
       },
       "follow_our_tutorial": "Ikuti panduan instalasi kami",
-      "get_ollama": "Dapatkan Ollama",
-      "install_desc": "Instal Ollama untuk mengatur AI lokal Anda.",
+      "install_desc": "Bagaimana Anda ingin menjalankan AI secara lokal?",
       "need_help": "Butuh bantuan?",
-      "ollama_desc": "Buka kekuatan penuh AI lokal dengan Ollama.",
       "setup": "Pengaturan",
       "step1": "LANGKAH 1",
       "download_model_to_begin": "Unduh model untuk memulai.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Tidak yakin yang mana yang dipilih?",
       "learn_about_models": "Pelajari tentang model",
       "looking_for_more_options": "🔍 Mencari lebih banyak opsi?",
-      "browse_more_models": "Jelajahi lebih banyak model"
+      "browse_more_models": "Jelajahi lebih banyak model",
+      "get_endpoint": "Dapatkan {endpointType}",
+      "lm_studio_select_desc": "Aplikasi Desktop yang Mudah Digunakan",
+      "ollama_select_desc": "Alat Pengembang Profesional",
+      "unlock_full_power_with": "Buka kekuatan AI lokal penuh dengan {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Gunakan model ringan (Qwen 0.6b) langsung di browser Anda — tanpa pengaturan, tanpa menunggu.",
@@ -132,7 +139,8 @@
       "title": "👋 Selamat datang di **NativeMind**",
       "body": "NativeMind adalah ekstensi browser AI yang mengutamakan privasi dan membantu Anda mengobrol, mencari, dan menerjemahkan — semuanya didukung oleh model bahasa yang berjalan di perangkat Anda.\n\nInilah yang dapat Anda lakukan dengan NativeMind:\n\n- Mengobrol di beberapa tab untuk melacak berbagai halaman.\n- Mencari di web secara langsung dalam obrolan untuk mendapatkan konteks lebih banyak.\n- Klik kanan untuk menerjemahkan bagian mana pun dari halaman secara instan.\n- Beralih atau mengunduh model kapan saja di Pengaturan.\n\nAnda dapat mulai dengan mencoba tindakan cepat di bawah ini."
     },
-    "ollama_is_running": "Ollama sedang berjalan"
+    "ollama_is_running": "Ollama sedang berjalan",
+    "backend_is_running": "{endpointType} sedang berjalan"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Model",
       "discover_more": "Temukan lebih banyak model",
       "no_model": "⚠️ Tidak ada model",
-      "add_model_to_start": "Tambahkan model untuk memulai"
+      "add_model_to_start": "Tambahkan model untuk memulai",
+      "ollama_models": "Model Ollama ({count})",
+      "lmstudio_models": "Model LM Studio ({count})"
     },
     "ollama": {
       "already_installed": "Sudah menginstal dan menjalankan Ollama?",
@@ -182,19 +192,15 @@
       "unload": "Bongkar",
       "expires_in": "Berakhir dalam {duration}",
       "running": "Berjalan",
-      "running_models": "Model yang Berjalan"
+      "running_models": "Model yang Berjalan",
+      "model_management": "Manajemen Model",
+      "downloaded_models": "Model yang Diunduh"
     },
     "prompts": {
       "chat_system_prompt": "Prompt sistem obrolan",
       "title": "Prompt",
       "translation_system_prompt": "Prompt sistem terjemahan"
     },
-    "provider": {
-      "title": "Koneksi"
-    },
-    "provider_model": {
-      "title": "Konfigurasi Ollama"
-    },
     "quick_actions": {
       "description": "Siapkan tindakan cepat untuk menjalankan prompt favorit Anda lebih cepat -- dari Obrolan Baru atau menu klik kanan.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} kuant",
         "thinking": "Berpikir",
         "no_active_models": "Ollama terhubung, tetapi tidak ada model yang aktif",
-        "not_connected_to_ollama": "Tidak terhubung ke Ollama"
-      }
+        "not_connected_to_ollama": "Tidak terhubung ke Ollama",
+        "lm_studio_no_active_models": "LM Studio terhubung, tetapi tidak ada model yang aktif",
+        "not_connected_to_lm_studio": "Tidak terhubung ke LM Studio"
+      },
+      "delete_model_confirm": "Apakah Anda yakin ingin menghapus model \"{model}\"?"
     },
     "title": "Pengaturan",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "Unduh",
       "retry": "Coba lagi",
       "unable_to_download": "Tidak Dapat Memulai Unduhan",
-      "could_not_connect_ollama": "Kami tidak dapat terhubung ke Ollama. Pastikan Ollama sedang berjalan dan coba lagi."
+      "could_not_connect": "Kami tidak dapat terhubung ke {endpointType}. Pastikan {endpointType} sedang berjalan dan coba lagi."
     },
     "webllm_downloader": {
       "description": "Untuk menggunakan mode Lokal, Anda perlu mengunduh model {model} ({size}). Apakah Anda ingin mengunduhnya sekarang?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Antarmuka",
       "interface_language": "Bahasa Antarmuka",
-      "interface_language_desc": "Pilih bahasa tampilan untuk antarmuka NativeMind"
+      "theme": "Tema",
+      "theme_light": "Terang",
+      "theme_dark": "Gelap",
+      "theme_system": "Sistem"
     },
     "header": {
       "starts_on_github": "Bintang di GitHub",
       "goto_website": "Kunjungi Situs Web"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Konfigurasi LM Studio",
+        "already_installed": "Sudah menginstal dan menjalankan LM Studio?",
+        "model_management_desc": "Unduhan, pemuatan, dan penghapusan model harus dilakukan di aplikasi desktop LM Studio. Ini hanya menampilkan status yang sedang berjalan saat ini."
+      },
+      "ollama": {
+        "title": "Konfigurasi Ollama"
+      }
+    },
+    "get_lm_studio": "Dapatkan LM Studio",
+    "delete": "Hapus",
+    "lm_studio": {
+      "server_address": "Alamat Server",
+      "server_address_desc": "Endpoint API server LM Studio"
+    },
+    "webllm_desc_lm_studio": "Anda sekarang menggunakan WebLLM: qwen3:0.6b untuk percobaan cepat. Untuk dukungan model lengkap dan performa yang lebih baik, silakan instal LM Studio.",
     "gmail_tools": {
       "title": "Alat Gmail",
       "description": "Konfigurasi berbagai fitur bantuan penulisan",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "Ups! Ada yang salah. Silakan periksa koneksi Ollama Anda di pengaturan dan coba lagi.",
-    "model_request_error": "Ups! Ada yang salah. Silakan periksa koneksi Ollama Anda di pengaturan dan coba lagi.",
-    "model_request_timeout": "Waktu permintaan habis. Silakan periksa koneksi Ollama Anda atau pertimbangkan untuk memulai sesi baru karena konteks yang panjang dapat memengaruhi waktu respons.",
+    "model_not_found": "Ups! Ada yang salah. Silakan periksa koneksi Anda di pengaturan dan coba lagi.",
+    "model_request_error": "Ups! Ada yang salah. Silakan periksa koneksi Anda di pengaturan dan coba lagi.",
+    "model_request_timeout": "Waktu permintaan habis, silakan periksa koneksi Anda atau pertimbangkan untuk memulai sesi baru karena konteks yang panjang dapat mempengaruhi waktu respons.",
     "timeout_error": "Operasi waktu habis: {message}",
     "unknown_error": "Terjadi kesalahan yang tidak terduga: {message}",
     "webllm_not_supported": "WebLLM tidak didukung pada perangkat Anda.",
diff --git a/locales/ja.json b/locales/ja.json
index 0a9b9e63..c20c5c26 100644
--- a/locales/ja.json
+++ b/locales/ja.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "ページを表示する前に、ページリンクをクリックしてみてください",
         "error_click_incorrect_link": "間違ったページリンクをクリックしてみてください"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "検索"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "あなたのために開発されたオンデバイスAI"
     },
     "guide": {
-      "already_installed": "すでにOllamaをインストールして実行していますか？",
+      "already_installed": "既に{endpointType}をインストールして実行していますか？",
       "features": {
         "1": "高度なモデル（gpt-oss、DeepSeek、Qwen、Llama）を実行する",
         "2": "完全な制御でモデルをカスタマイズし切り替えられます",
         "3": "あなたのデータはデバイス上でプライベートに保たれます"
       },
       "follow_our_tutorial": "インストールガイドを確認する",
-      "get_ollama": "Ollamaを入手する",
-      "install_desc": "Ollamaをインストールして、ローカルAI環境を構築しましょう。",
+      "install_desc": "AIをローカルで実行するにはどうしたいですか？",
       "need_help": "お困りですか？",
-      "ollama_desc": "Ollamaで完全なローカルAIのパワーを活用しましょう。",
       "setup": "セットアップ",
       "step1": "ステップ 1",
       "download_model_to_begin": "モデルをダウンロードして開始してください。",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 どれを選べばよいかわからない？",
       "learn_about_models": "モデルについて学ぶ",
       "looking_for_more_options": "🔍 より多くのオプションをお探しですか？",
-      "browse_more_models": "他のモデルを見る"
+      "browse_more_models": "他のモデルを見る",
+      "get_endpoint": "{endpointType}を取得",
+      "lm_studio_select_desc": "使いやすいデスクトップアプリ",
+      "ollama_select_desc": "プロフェッショナル開発者ツール",
+      "unlock_full_power_with": "{endpointType}でローカルAIの全機能を解放しましょう。"
     },
     "webllm_tutorial": {
       "desc": "ブラウザで直接軽量モデル（Qwen 0.6b）を使用できます。セットアップ不要、待ち時間なし。",
@@ -132,7 +139,8 @@
       "title": "👋 **NativeMind** へようこそ",
       "body": "NativeMindは、プライバシー重視のAIブラウザ拡張機能で、オンデバイス言語モデルを活用したチャット、検索、翻訳機能を提供します。\n\nNativeMindでできることは次のとおりです：\n\n- 複数のタブでチャットし、異なるページを管理できます。\n- チャット内で直接ウェブ検索を行い、より多くのコンテキストを得られます。\n- 右クリックでページの任意の部分を即座に翻訳できます。\n- 設定からいつでもモデルの切り替えやダウンロードが可能です。\n\n下記のクイックアクションを試してみましょう。"
     },
-    "ollama_is_running": "Ollamaが実行中です"
+    "ollama_is_running": "Ollamaが実行中です",
+    "backend_is_running": "{endpointType}が実行中です"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "モデル",
       "discover_more": "より多くのモデルを発見する",
       "no_model": "⚠️ モデルなし",
-      "add_model_to_start": "モデルを追加して開始"
+      "add_model_to_start": "モデルを追加して開始",
+      "ollama_models": "Ollama モデル ({count})",
+      "lmstudio_models": "LM Studio モデル ({count})"
     },
     "ollama": {
       "already_installed": "Ollamaをすでにインストールして実行していますか？",
@@ -182,19 +192,15 @@
       "unload": "アンロード",
       "expires_in": "{duration}で期限切れ",
       "running": "実行中",
-      "running_models": "実行中のモデル"
+      "running_models": "実行中のモデル",
+      "model_management": "モデル管理",
+      "downloaded_models": "ダウンロード済みモデル"
     },
     "prompts": {
       "chat_system_prompt": "チャットシステムプロンプト",
       "title": "プロンプト",
       "translation_system_prompt": "翻訳システムプロンプト"
     },
-    "provider": {
-      "title": "接続"
-    },
-    "provider_model": {
-      "title": "Ollamaを設定する"
-    },
     "quick_actions": {
       "description": "新規チャットや右クリックメニューから、お気に入りのプロンプトをより速く実行できるようクイックアクションを設定します。",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level}クオント",
         "thinking": "思考",
         "no_active_models": "Ollamaに接続されていますが、アクティブなモデルがありません",
-        "not_connected_to_ollama": "Ollamaに接続されていません"
-      }
+        "not_connected_to_ollama": "Ollamaに接続されていません",
+        "lm_studio_no_active_models": "LM Studio に接続されましたが、アクティブなモデルがありません",
+        "not_connected_to_lm_studio": "LM Studioに接続されていません"
+      },
+      "delete_model_confirm": "モデル「{model}」を削除してもよろしいですか？"
     },
     "title": "設定",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "ダウンロード",
       "retry": "リトライ",
       "unable_to_download": "ダウンロードを開始できません",
-      "could_not_connect_ollama": "Ollamaに接続できませんでした。Ollamaが実行されていることを確認して、もう一度お試しください。"
+      "could_not_connect": "{endpointType}に接続できませんでした。{endpointType}が実行されていることを確認して、もう一度お試しください。"
     },
     "webllm_downloader": {
       "description": "ローカルモードを使用するには、{model}モデル（{size}）をダウンロードする必要があります。今すぐダウンロードしますか？"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "インターフェース",
       "interface_language": "インターフェース言語",
-      "interface_language_desc": "NativeMindインターフェースの表示言語を選択してください"
+      "theme": "テーマ",
+      "theme_light": "ライト",
+      "theme_dark": "ダーク",
+      "theme_system": "システム"
     },
     "header": {
       "starts_on_github": "GitHubでスター",
       "goto_website": "ウェブサイトに移動"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "LM Studioを設定する",
+        "already_installed": "LM Studioはすでにインストールして実行していますか？",
+        "model_management_desc": "モデルのダウンロード、読み込み、削除はLM Studio デスクトップアプリで行う必要があります。これは現在の実行状態のみを表示します。"
+      },
+      "ollama": {
+        "title": "Ollamaを設定する"
+      }
+    },
+    "get_lm_studio": "LM Studioを入手",
+    "delete": "削除",
+    "lm_studio": {
+      "server_address": "サーバーアドレス",
+      "server_address_desc": "LM Studio サーバー API エンドポイント"
+    },
+    "webllm_desc_lm_studio": "WebLLMを使用中：クイック試用のためのqwen3:0.6b。フルモデルサポートとより良いパフォーマンスのために、LM Studioをインストールしてください。",
     "gmail_tools": {
       "title": "Gmail ツール",
       "description": "様々な執筆支援機能を設定",
@@ -370,11 +399,11 @@
     }
   },
   "errors": {
-    "model_not_found": "おっと！何か問題が発生しました。設定でOllama接続を確認し、再度お試しください。",
+    "model_not_found": "おっと！何かが間違いました。設定で接続を確認してもう一度お試しください。",
     "timeout_error": "操作がタイムアウトしました：{message}",
     "unknown_error": "予期しないエラーが発生しました：{message}",
-    "model_request_error": "おっと！何か問題が発生しました。設定でOllama接続を確認し、再度お試しください。",
-    "model_request_timeout": "リクエストがタイムアウトしました。Ollama接続を確認するか、長いコンテキストが応答時間に影響を与える可能性があるため、新しいセッションの開始をご検討ください。",
+    "model_request_error": "おっと！何かが間違いました。設定で接続を確認してもう一度お試しください。",
+    "model_request_timeout": "リクエストがタイムアウトしました。接続を確認するか、長いコンテキストが応答時間に影響する可能性があるため、新しいセッションを開始することを検討してください。",
     "webllm_not_supported": "WebLLMはお使いのデバイスではサポートされていません。",
     "max_characters_error": "最大 {count} 文字まで入力可能です"
   },
diff --git a/locales/ko.json b/locales/ko.json
index 1f18580f..fa2887de 100644
--- a/locales/ko.json
+++ b/locales/ko.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "페이지를 보기 전에 페이지 링크를 클릭해 보세요",
         "error_click_incorrect_link": "잘못된 페이지 링크를 클릭해 보세요"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "검색"
+      }
     }
   },
   "chat_history": {
@@ -107,10 +112,8 @@
         "3": "사용자의 데이터는 기기에서 안전하게 유지됩니다"
       },
       "follow_our_tutorial": "설치 가이드를 확인하세요",
-      "get_ollama": "Ollama 얻기",
       "install_desc": "Ollama를 설치하여 로컬 AI를 설정하세요.",
       "need_help": "도움이 필요하세요?",
-      "ollama_desc": "Ollama로 로컬 AI의 모든 기능을 활용하세요.",
       "setup": "설정",
       "step1": "1단계",
       "download_model_to_begin": "시작하려면 모델을 다운로드하세요.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 어떤 것을 선택해야 할지 확실하지 않나요?",
       "learn_about_models": "모델에 대해 알아보기",
       "looking_for_more_options": "🔍 더 많은 옵션을 찾고 계신가요?",
-      "browse_more_models": "더 많은 모델 둘러보기"
+      "browse_more_models": "더 많은 모델 둘러보기",
+      "get_endpoint": "{endpointType} 가져오기",
+      "ollama_select_desc": "전문 개발자 도구",
+      "lm_studio_select_desc": "사용하기 쉬운 데스크톱 앱",
+      "unlock_full_power_with": "{endpointType}로 완전한 로컬 AI 성능을 잠금 해제하세요."
     },
     "webllm_tutorial": {
       "desc": "브라우저에서 바로 경량 모델(Qwen 0.6B)을 사용해 보세요. 설정 없이 바로 시작할 수 있습니다.",
@@ -132,7 +139,8 @@
       "title": "👋 **NativeMind**에 오신 것을 환영합니다",
       "body": "NativeMind는 개인 정보 보호에 중점을 둔 AI 브라우저 확장 프로그램으로, 온디바이스 언어 모델을 통해 채팅, 검색 및 번역을 지원합니다.\n\n\nNativeMind로 할 수 있는 일은 다음과 같습니다.\n\n\n\n- 여러 탭에서 채팅하여 다양한 페이지의 내용을 파악할 수 있습니다.\n\n- 채팅 내에서 직접 웹을 검색하여 더 많은 정보를 얻을 수 있습니다.\n\n- 마우스 오른쪽 버튼을 클릭하여 페이지의 일부를 즉시 번역할 수 있습니다.\n\n- 설정에서 언제든지 모델을 변경하거나 새 모델을 다운로드할 수 있습니다.\n\n\n아래의 빠른 액션으로 지금 바로 시작해 보세요."
     },
-    "ollama_is_running": "Ollama가 실행 중입니다"
+    "ollama_is_running": "Ollama가 실행 중입니다",
+    "backend_is_running": "{endpointType}이(가) 실행 중입니다"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "모델",
       "discover_more": "더 많은 모델 살펴보기",
       "no_model": "⚠️ 모델 없음",
-      "add_model_to_start": "모델을 추가하여 시작하세요"
+      "add_model_to_start": "모델을 추가하여 시작하세요",
+      "lmstudio_models": "LM Studio 모델 ({count})",
+      "ollama_models": "Ollama 모델 ({count})"
     },
     "ollama": {
       "already_installed": "이미 Ollama를 설치하고 실행 중인가요?",
@@ -182,19 +192,15 @@
       "unload": "내리다",
       "expires_in": "{duration} 후 만료",
       "running": "실행 중",
-      "running_models": "실행 중인 모델"
+      "running_models": "실행 중인 모델",
+      "downloaded_models": "다운로드된 모델",
+      "model_management": "모델 관리"
     },
     "prompts": {
       "chat_system_prompt": "채팅 시스템 프롬프트",
       "title": "프롬프트",
       "translation_system_prompt": "번역 시스템 프롬프트"
     },
-    "provider": {
-      "title": "연결"
-    },
-    "provider_model": {
-      "title": "Ollama 구성"
-    },
     "quick_actions": {
       "description": "새 채팅이나 컨텍스트 메뉴에서 자주 사용하는 프롬프트를 더 빠르게 실행할 수 있도록 빠른 액션을 설정하세요.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} 퀀트",
         "thinking": "사고",
         "no_active_models": "Ollama가 연결되었지만 활성화된 모델이 없습니다",
-        "not_connected_to_ollama": "Ollama에 연결되지 않음"
-      }
+        "not_connected_to_ollama": "Ollama에 연결되지 않음",
+        "not_connected_to_lm_studio": "Ollama에 연결되지 않음",
+        "lm_studio_no_active_models": "LM Studio가 연결되었지만 활성화된 모델이 없습니다"
+      },
+      "delete_model_confirm": "모델 \"{model}\"을(를) 삭제하시겠습니까?"
     },
     "title": "설정",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "다운로드",
       "retry": "다시 시도",
       "unable_to_download": "다운로드를 시작할 수 없음",
-      "could_not_connect_ollama": "Ollama에 연결할 수 없습니다. Ollama가 실행 중인지 확인하고 다시 시도해 주세요."
+      "could_not_connect": "{endpointType}에 연결할 수 없습니다. {endpointType}이 실행 중인지 확인하고 다시 시도해 주세요."
     },
     "webllm_downloader": {
       "description": "로컬 모드를 사용하려면 {model} 모델({size})을 다운로드해야 합니다. 지금 다운로드하시겠습니까?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "인터페이스",
       "interface_language": "인터페이스 언어",
-      "interface_language_desc": "NativeMind 인터페이스의 표시 언어를 선택하세요"
+      "theme": "테마",
+      "theme_light": "라이트",
+      "theme_dark": "다크",
+      "theme_system": "시스템"
     },
     "header": {
       "starts_on_github": "GitHub에서 별점 주기",
       "goto_website": "웹사이트로 이동"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "LM Studio 구성",
+        "already_installed": "이미 LM Studio를 설치하고 실행했나요?",
+        "model_management_desc": "모델 다운로드, 로딩, 삭제는 LM Studio 데스크톱 앱에서 수행해야 합니다. 여기서는 현재 실행 상태만 표시됩니다."
+      },
+      "ollama": {
+        "title": "Ollama 구성"
+      }
+    },
+    "delete": "삭제",
+    "get_lm_studio": "LM Studio 다운로드",
+    "lm_studio": {
+      "server_address": "서버 주소",
+      "server_address_desc": "LM Studio 서버 API 엔드포인트"
+    },
+    "webllm_desc_lm_studio": "지금 빠른 체험을 위해 WebLLM: qwen3:0.6b를 사용하고 있습니다. 전체 모델 지원과 더 나은 성능을 위해서는 LM Studio를 설치해 주세요.",
     "gmail_tools": {
       "title": "Gmail 도구",
       "description": "다양한 작성 지원 기능을 설정",
diff --git a/locales/pt.json b/locales/pt.json
index ae1505f9..58e50a1d 100644
--- a/locales/pt.json
+++ b/locales/pt.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Tente clicar em um link de página antes de visualizar qualquer página",
         "error_click_incorrect_link": "Tente clicar no link da página incorreta"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Pesquisar"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "AI no dispositivo, construído apenas para você"
     },
     "guide": {
-      "already_installed": "Já instalou e está executando o Ollama?",
+      "already_installed": "Já instalou e executou {endpointType}?",
       "features": {
         "1": "Execute modelos avançados como gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Personalize e alterne entre modelos com controle total",
         "3": "Seus dados permanecem privados no seu dispositivo"
       },
       "follow_our_tutorial": "Siga nosso guia de instalação",
-      "get_ollama": "Obter Ollama",
-      "install_desc": "Instale o Ollama para configurar sua IA local.",
+      "install_desc": "Como você quer executar IA localmente?",
       "need_help": "Precisa de ajuda?",
-      "ollama_desc": "Desbloqueie todo o poder da IA local com Ollama.",
       "setup": "Configurar",
       "step1": "Etapa 1",
       "download_model_to_begin": "Baixe um modelo para começar.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Não tem certeza de qual escolher?",
       "learn_about_models": "Aprenda sobre modelos",
       "looking_for_more_options": "🔍 Procurando por mais opções?",
-      "browse_more_models": "Navegue por mais modelos"
+      "browse_more_models": "Navegue por mais modelos",
+      "get_endpoint": "Obter {endpointType}",
+      "lm_studio_select_desc": "Aplicativo de Desktop Fácil de Usar",
+      "ollama_select_desc": "Ferramenta de Desenvolvedor Profissional",
+      "unlock_full_power_with": "Desbloqueie todo o poder da IA local com {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Use um modelo leve (QWEN 0.6B) diretamente no seu navegador - sem configuração, sem espera.",
@@ -132,7 +139,8 @@
       "title": "👋 Bem-vindo ao **NativeMind**",
       "body": "O NativeMind é uma extensão de navegador com foco em privacidade que ajuda você a conversar, pesquisar e traduzir - tudo alimentado por modelos de linguagem no dispositivo.\n\n\nAqui está o que você pode fazer com o NativeMind:\n\n\n\n- Converse através de várias abas para acompanhar diferentes páginas.\n\n- Pesquise na web diretamente no chat para obter mais contexto.\n\n- Clique com o botão direito para traduzir instantaneamente qualquer parte da página.\n\n- Alterne ou baixe modelos a qualquer momento nas configurações.\n\n\nVocê pode começar experimentando as ações rápidas abaixo."
     },
-    "ollama_is_running": "Ollama está executando"
+    "ollama_is_running": "Ollama está executando",
+    "backend_is_running": "{endpointType} está em execução"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Modelos",
       "discover_more": "Descubra mais modelos",
       "no_model": "⚠️ Nenhum modelo",
-      "add_model_to_start": "Adicionar um modelo para começar"
+      "add_model_to_start": "Adicionar um modelo para começar",
+      "ollama_models": "Modelos Ollama ({count})",
+      "lmstudio_models": "LM Studio Modelos ({count})"
     },
     "ollama": {
       "already_installed": "Já instalou e está executando o Ollama?",
@@ -182,19 +192,15 @@
       "unload": "Descarregar",
       "expires_in": "Expira em {duration}",
       "running": "Executando",
-      "running_models": "Modelos em Execução"
+      "running_models": "Modelos em Execução",
+      "model_management": "Gestão de Modelos",
+      "downloaded_models": "Modelos Baixados"
     },
     "prompts": {
       "chat_system_prompt": "Prompt de sistema do chat",
       "title": "Prompts",
       "translation_system_prompt": "Prompt do sistema de tradução"
     },
-    "provider": {
-      "title": "Conexão"
-    },
-    "provider_model": {
-      "title": "Configurar Ollama"
-    },
     "quick_actions": {
       "description": "Configure ações rápidas para executar seus prompts favoritos mais rapidamente - em um novo chat ou no menu de contexto.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} quant",
         "thinking": "Pensando",
         "no_active_models": "Ollama conectado, mas nenhum modelo ativo",
-        "not_connected_to_ollama": "Não conectado ao Ollama"
-      }
+        "not_connected_to_ollama": "Não conectado ao Ollama",
+        "lm_studio_no_active_models": "LM Studio conectado, mas nenhum modelo ativo",
+        "not_connected_to_lm_studio": "Não conectado ao LM Studio"
+      },
+      "delete_model_confirm": "Tem certeza de que deseja excluir o modelo \"{model}\"?"
     },
     "title": "Configurações",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "Baixar",
       "retry": "Tentar novamente",
       "unable_to_download": "Não foi possível iniciar o download",
-      "could_not_connect_ollama": "Não foi possível conectar ao Ollama. Por favor, certifique-se de que o Ollama está em execução e tente novamente."
+      "could_not_connect": "Não foi possível conectar ao {endpointType}. Certifique-se de que o {endpointType} está em execução e tente novamente."
     },
     "webllm_downloader": {
       "description": "Para usar o modo Local, você precisa baixar o modelo {model} ({size}). Gostaria de baixá-lo agora?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Interface",
       "interface_language": "Idioma da Interface",
-      "interface_language_desc": "Escolha o idioma de exibição para a interface do NativeMind"
+      "theme": "Tema",
+      "theme_light": "Claro",
+      "theme_dark": "Escuro",
+      "theme_system": "Sistema"
     },
     "header": {
       "starts_on_github": "Estrelas no GitHub",
       "goto_website": "Ir para o Website"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Configurar LM Studio",
+        "already_installed": "Já instalou e executou o LM Studio?",
+        "model_management_desc": "O download, carregamento e exclusão do modelo devem ser feitos no aplicativo desktop do LM Studio. Isso mostra apenas o status de execução atual."
+      },
+      "ollama": {
+        "title": "Configurar Ollama"
+      }
+    },
+    "get_lm_studio": "Obter LM Studio",
+    "delete": "Excluir",
+    "lm_studio": {
+      "server_address": "Endereço do Servidor",
+      "server_address_desc": "endpoint da API do servidor LM Studio"
+    },
+    "webllm_desc_lm_studio": "Você está agora usando WebLLM: qwen3:0.6b para teste rápido. Para suporte completo de modelos e melhor desempenho, por favor instale o LM Studio.",
     "gmail_tools": {
       "title": "Ferramentas do Gmail",
       "description": "Configurar várias funcionalidades de assistência de escrita",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "Ops! Algo deu errado. Por favor, verifique sua conexão com o Ollama nas configurações e tente novamente.",
-    "model_request_error": "Ops! Algo deu errado. Por favor, verifique sua conexão com o Ollama nas configurações e tente novamente.",
-    "model_request_timeout": "Tempo limite da solicitação esgotado. Verifique sua conexão com o Ollama ou considere iniciar uma nova sessão, pois contextos longos podem afetar os tempos de resposta.",
+    "model_not_found": "Ops! Algo deu errado. Por favor, verifique sua conexão nas configurações e tente novamente.",
+    "model_request_error": "Ops! Algo deu errado. Por favor, verifique sua conexão nas configurações e tente novamente.",
+    "model_request_timeout": "Tempo limite da solicitação esgotado, verifique sua conexão ou considere iniciar uma nova sessão, pois contextos longos podem afetar os tempos de resposta.",
     "timeout_error": "Operação expirou: {message}",
     "unknown_error": "Ocorreu um erro inesperado: {message}",
     "webllm_not_supported": "WebLLM não é suportado no seu dispositivo.",
diff --git a/locales/ru.json b/locales/ru.json
index 1a625229..93beda36 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Попробуйте нажать на ссылку страницы перед просмотром любых страниц",
         "error_click_incorrect_link": "Попробуйте нажать на неправильную ссылку страницы"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Поиск"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "ИИ на устройстве, созданный специально для вас"
     },
     "guide": {
-      "already_installed": "Уже установлен и запущен Ollama?",
+      "already_installed": "Уже установлен и запущен {endpointType}?",
       "features": {
         "1": "Запускайте продвинутые модели, такие как gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Настраивайте и переключайте модели с полным контролем",
         "3": "Ваши данные остаются приватными на вашем устройстве"
       },
       "follow_our_tutorial": "Следуйте нашему руководству по установке",
-      "get_ollama": "Получить Ollama",
-      "install_desc": "Установите Ollama, чтобы настроить локальный ИИ.",
+      "install_desc": "Как вы хотите запустить ИИ локально?",
       "need_help": "Нужна помощь?",
-      "ollama_desc": "Раскройте полную мощь локального ИИ с Ollama.",
       "setup": "Настройка",
       "step1": "Шаг 1",
       "download_model_to_begin": "Загрузите модель, чтобы начать.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Не уверены, какую выбрать?",
       "learn_about_models": "Узнать о моделях",
       "looking_for_more_options": "🔍 Ищете больше вариантов?",
-      "browse_more_models": "Просмотреть больше моделей"
+      "browse_more_models": "Просмотреть больше моделей",
+      "get_endpoint": "Получить {endpointType}",
+      "lm_studio_select_desc": "Простое в использовании настольное приложение",
+      "ollama_select_desc": "Профессиональный инструмент разработчика",
+      "unlock_full_power_with": "Разблокируйте полную мощь локального ИИ с {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Используйте легкую модель (QWEN 0,6B) прямо в вашем браузере - без настройки, без ожидания.",
@@ -132,7 +139,8 @@
       "title": "👋 Добро пожаловать в **NativeMind**",
       "body": "NativeMind — это расширение браузера, ориентированное на приватность, которое помогает вам общаться, искать и переводить с помощью языковых моделей, работающих на вашем устройстве.\n\n\nВот что вы можете делать с NativeMind:\n\n\n\n- Общаться через несколько вкладок, чтобы отслеживать разные страницы.\n\n- Искать в интернете прямо в чате для получения дополнительного контекста.\n\n- Щёлкнуть правой кнопкой мыши, чтобы мгновенно перевести любую часть страницы.\n\n- Переключать или загружать модели в любое время в настройках.\n\n\nНачните с использования быстрых действий ниже."
     },
-    "ollama_is_running": "Ollama запущена"
+    "ollama_is_running": "Ollama запущена",
+    "backend_is_running": "{endpointType} запущен"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Модели",
       "discover_more": "Откройте для себя больше моделей",
       "no_model": "⚠️ Модель отсутствует",
-      "add_model_to_start": "Добавьте модель для начала"
+      "add_model_to_start": "Добавьте модель для начала",
+      "ollama_models": "Модели Ollama ({count})",
+      "lmstudio_models": "LM Studio Модели ({count})"
     },
     "ollama": {
       "already_installed": "Уже установлен и запущен Ollama?",
@@ -182,19 +192,15 @@
       "unload": "Выгрузить",
       "expires_in": "Истекает через {duration}",
       "running": "Выполняется",
-      "running_models": "Работающие модели"
+      "running_models": "Работающие модели",
+      "model_management": "Управление моделями",
+      "downloaded_models": "Загруженные модели"
     },
     "prompts": {
       "chat_system_prompt": "Системная подсказка для чата",
       "title": "Подсказки",
       "translation_system_prompt": "Системный промпт для перевода"
     },
-    "provider": {
-      "title": "Соединение"
-    },
-    "provider_model": {
-      "title": "Настроить Ollama"
-    },
     "quick_actions": {
       "description": "Настройте быстрые действия для запуска ваших любимых подсказок из нового чата или через контекстное меню.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} квант",
         "thinking": "Мышление",
         "no_active_models": "Ollama подключен, но нет активных моделей",
-        "not_connected_to_ollama": "Не подключено к Ollama"
-      }
+        "not_connected_to_ollama": "Не подключено к Ollama",
+        "lm_studio_no_active_models": "LM Studio подключена, но нет активных моделей",
+        "not_connected_to_lm_studio": "Не подключено к LM Studio"
+      },
+      "delete_model_confirm": "Вы уверены, что хотите удалить модель \"{model}\"?"
     },
     "title": "Настройки",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "Скачать",
       "retry": "Повторить",
       "unable_to_download": "Невозможно начать загрузку",
-      "could_not_connect_ollama": "Не удалось подключиться к Ollama. Пожалуйста, убедитесь, что Ollama запущена, и попробуйте снова."
+      "could_not_connect": "Не удалось подключиться к {endpointType}. Убедитесь, что {endpointType} запущен, и повторите попытку."
     },
     "webllm_downloader": {
       "description": "Для использования локального режима необходимо загрузить модель {model} ({size}). Хотите загрузить её сейчас?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Интерфейс",
       "interface_language": "Язык интерфейса",
-      "interface_language_desc": "Выберите язык отображения для интерфейса NativeMind"
+      "theme": "Тема",
+      "theme_light": "Светлая",
+      "theme_dark": "Темная",
+      "theme_system": "Системная"
     },
     "header": {
       "starts_on_github": "Звезды на GitHub",
       "goto_website": "Перейти на сайт"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Настроить LM Studio",
+        "already_installed": "Уже установили и запустили LM Studio?",
+        "model_management_desc": "Загрузка, загрузка и удаление модели должны выполняться в настольном приложении LM Studio. Здесь отображается только текущий статус работы."
+      },
+      "ollama": {
+        "title": "Настроить Ollama"
+      }
+    },
+    "get_lm_studio": "Получить LM Studio",
+    "delete": "Удалить",
+    "lm_studio": {
+      "server_address": "Адрес сервера",
+      "server_address_desc": "Конечная точка API сервера LM Studio"
+    },
+    "webllm_desc_lm_studio": "Вы сейчас используете WebLLM: qwen3:0.6b для быстрого ознакомления. Для полной поддержки модели и лучшей производительности, пожалуйста, установите LM Studio.",
     "gmail_tools": {
       "title": "Инструменты Gmail",
       "description": "Настройка различных функций помощи в написании",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "Упс! Что-то пошло не так. Пожалуйста, проверьте соединение с Ollama в настройках и попробуйте ещё раз.",
-    "model_request_error": "Упс! Что-то пошло не так. Пожалуйста, проверьте соединение с Ollama в настройках и попробуйте ещё раз.",
-    "model_request_timeout": "Время ожидания запроса истекло. Проверьте соединение с Ollama или рассмотрите возможность начала нового сеанса, так как большие контексты могут влиять на время отклика.",
+    "model_not_found": "Упс! Что-то пошло не так. Пожалуйста, проверьте ваше подключение в настройках и попробуйте снова.",
+    "model_request_error": "Упс! Что-то пошло не так. Пожалуйста, проверьте ваше подключение в настройках и попробуйте снова.",
+    "model_request_timeout": "Превышено время ожидания запроса, пожалуйста, проверьте ваше соединение или рассмотрите возможность начать новую сессию, поскольку длинные контексты могут влиять на время отклика.",
     "timeout_error": "Время операции истекло: {message}",
     "unknown_error": "Произошла неожиданная ошибка: {message}",
     "webllm_not_supported": "WebLLM не поддерживается на вашем устройстве.",
diff --git a/locales/th.json b/locales/th.json
index c6b09e66..7587af5d 100644
--- a/locales/th.json
+++ b/locales/th.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "ลองคลิกลิงก์หน้าเว็บก่อนดูหน้าใดๆ",
         "error_click_incorrect_link": "ลองคลิกที่ลิงก์หน้าที่ไม่ถูกต้อง"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "ค้นหา"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "AI บนอุปกรณ์ สร้างขึ้นเพื่อคุณ"
     },
     "guide": {
-      "already_installed": "ได้ติดตั้งและกำลังใช้งาน Ollama อยู่แล้ว?",
+      "already_installed": "ติดตั้งและเรียกใช้ {endpointType} แล้วหรือยัง?",
       "features": {
         "1": "เรียกใช้โมเดลขั้นสูงเช่น gpt-oss, DeepSeek, Qwen, Llama",
         "2": "ปรับแต่งและสลับโมเดลได้อย่างเต็มรูปแบบ",
         "3": "ข้อมูลของคุณปลอดภัยอยู่บนอุปกรณ์ของคุณเท่านั้น"
       },
       "follow_our_tutorial": "ทำตามคู่มือการติดตั้งของเรา",
-      "get_ollama": "รับ Ollama",
-      "install_desc": "ติดตั้ง Ollama เพื่อตั้งค่า AI ในพื้นที่ของคุณ",
+      "install_desc": "คุณต้องการรัน AI ในเครื่องอย่างไร?",
       "need_help": "ต้องการความช่วยเหลือ?",
-      "ollama_desc": "ปลดล็อกพลัง AI ท้องถิ่นเต็มรูปแบบด้วย Ollama",
       "setup": "การตั้งค่า",
       "step1": "ขั้นตอนที่ 1",
       "download_model_to_begin": "ดาวน์โหลดโมเดลเพื่อเริ่มต้น",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 ไม่แน่ใจว่าจะเลือกอันไหน?",
       "learn_about_models": "เรียนรู้เกี่ยวกับโมเดล",
       "looking_for_more_options": "🔍 หาตัวเลือกเพิ่มเติม?",
-      "browse_more_models": "เรียกดูโมเดลเพิ่มเติม"
+      "browse_more_models": "เรียกดูโมเดลเพิ่มเติม",
+      "get_endpoint": "รับ {endpointType}",
+      "lm_studio_select_desc": "แอปเดสก์ท็อปที่ใช้งานง่าย",
+      "ollama_select_desc": "เครื่องมือสำหรับนักพัฒนาระดับมืออาชีพ",
+      "unlock_full_power_with": "ปลดล็อกพลังเต็มของ AI ในเครื่องด้วย {endpointType}"
     },
     "webllm_tutorial": {
       "desc": "ใช้โมเดลขนาดเล็ก (QWEN 0.6B) ในเบราว์เซอร์ของคุณ - ไม่ต้องตั้งค่า ไม่ต้องรอ",
@@ -132,7 +139,8 @@
       "title": "👋 ยินดีต้อนรับสู่ **NativeMind**",
       "body": "NativeMind คือส่วนขยายเบราว์เซอร์ AI ที่เน้นความเป็นส่วนตัวรายแรกที่ช่วยให้คุณสามารถแชท ค้นหา และแปลภาษา ด้วยพลังของโมเดลภาษาที่ทำงานบนอุปกรณ์ของคุณ\n\n\nสิ่งที่คุณสามารถทำได้กับ NativeMind:\n\n\n\n- แชทข้ามหลายแท็บเพื่อติดตามเนื้อหาหลายหน้า\n\n- ค้นหาเว็บโดยตรงในการแชทเพื่อเพิ่มบริบท\n\n- คลิกขวาเพื่อแปลเนื้อหาส่วนใดก็ได้ของหน้าเว็บทันที\n\n- เปลี่ยนหรือดาวน์โหลดโมเดลใหม่ได้ตลอดเวลาในการตั้งค่า\n\n\nเริ่มต้นใช้งานได้ทันทีด้วยการลองใช้คำสั่งด่วนด้านล่าง"
     },
-    "ollama_is_running": "Ollama กำลังทำงานอยู่"
+    "ollama_is_running": "Ollama กำลังทำงานอยู่",
+    "backend_is_running": "{endpointType} กำลังทำงาน"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "โมเดล",
       "discover_more": "ค้นหาโมเดลเพิ่มเติม",
       "no_model": "⚠️ ไม่มีโมเดล",
-      "add_model_to_start": "เพิ่มโมเดลเพื่อเริ่มต้น"
+      "add_model_to_start": "เพิ่มโมเดลเพื่อเริ่มต้น",
+      "ollama_models": "โมเดล Ollama ({count})",
+      "lmstudio_models": "LM Studio โมเดล ({count})"
     },
     "ollama": {
       "already_installed": "ติดตั้งและใช้งาน Ollama อยู่แล้ว?",
@@ -182,19 +192,15 @@
       "unload": "ขนถ่าย",
       "expires_in": "หมดอายุใน {duration}",
       "running": "กำลังทำงาน",
-      "running_models": "โมเดลที่กำลังทำงาน"
+      "running_models": "โมเดลที่กำลังทำงาน",
+      "model_management": "การจัดการโมเดล",
+      "downloaded_models": "โมเดลที่ดาวน์โหลดแล้ว"
     },
     "prompts": {
       "chat_system_prompt": "ระบบแชท",
       "title": "แจ้ง",
       "translation_system_prompt": "พรอมต์ระบบการแปล"
     },
-    "provider": {
-      "title": "การเชื่อมต่อ"
-    },
-    "provider_model": {
-      "title": "กำหนดค่า Ollama"
-    },
     "quick_actions": {
       "description": "ตั้งค่าการกระทำที่รวดเร็วเพื่อเรียกใช้พรอมต์ที่คุณชื่นชอบเร็วขึ้น-จากการแชทใหม่หรือเมนูคลิกขวา",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} ควอนต์",
         "thinking": "กำลังคิด",
         "no_active_models": "Ollama เชื่อมต่อแล้ว แต่ไม่มีโมเดลที่ใช้งานอยู่",
-        "not_connected_to_ollama": "ไม่ได้เชื่อมต่อกับ Ollama"
-      }
+        "not_connected_to_ollama": "ไม่ได้เชื่อมต่อกับ Ollama",
+        "lm_studio_no_active_models": "LM Studio เชื่อมต่อแล้ว แต่ไม่มีโมเดลที่ใช้งานอยู่",
+        "not_connected_to_lm_studio": "ไม่ได้เชื่อมต่อกับ LM Studio"
+      },
+      "delete_model_confirm": "คุณแน่ใจหรือไม่ว่าต้องการลบโมเดล \"{model}\"?"
     },
     "title": "การตั้งค่า",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "ดาวน์โหลด",
       "retry": "ลองใหม่",
       "unable_to_download": "ไม่สามารถเริ่มการดาวน์โหลดได้",
-      "could_not_connect_ollama": "เราไม่สามารถเชื่อมต่อกับ Ollama ได้ กรุณาตรวจสอบให้แน่ใจว่า Ollama กำลังทำงานอยู่และลองใหม่อีกครั้ง"
+      "could_not_connect": "เราไม่สามารถเชื่อมต่อกับ {endpointType} ได้ โปรดตรวจสอบให้แน่ใจว่า {endpointType} กำลังทำงานอยู่และลองใหม่อีกครั้ง"
     },
     "webllm_downloader": {
       "description": "หากต้องการใช้โหมดท้องถิ่น คุณจำเป็นต้องดาวน์โหลดโมเดล {model} ({size}) คุณต้องการดาวน์โหลดตอนนี้หรือไม่?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "อินเทอร์เฟซ",
       "interface_language": "ภาษาของอินเทอร์เฟซ",
-      "interface_language_desc": "เลือกภาษาที่แสดงสำหรับส่วนติดต่อผู้ใช้ NativeMind"
+      "theme": "ธีม",
+      "theme_light": "สว่าง",
+      "theme_dark": "มืด",
+      "theme_system": "ระบบ"
     },
     "header": {
       "starts_on_github": "ให้ดาวบน GitHub",
       "goto_website": "ไปที่เว็บไซต์"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "กำหนดค่า LM Studio",
+        "already_installed": "ติดตั้งและรัน LM Studio แล้วหรือยัง?",
+        "model_management_desc": "การดาวน์โหลด การโหลด และการลบโมเดลต้องทำในแอป LM Studio บนเดสก์ท็อป หน้านี้แสดงเฉพาะสถานะการทำงานปัจจุบันเท่านั้น"
+      },
+      "ollama": {
+        "title": "กำหนดค่า Ollama"
+      }
+    },
+    "get_lm_studio": "ดาวน์โหลด LM Studio",
+    "delete": "ลบ",
+    "lm_studio": {
+      "server_address": "ที่อยู่เซิร์ฟเวอร์",
+      "server_address_desc": "จุดปลายทาง API ของเซิร์ฟเวอร์ LM Studio"
+    },
+    "webllm_desc_lm_studio": "คุณกำลังใช้ WebLLM: qwen3:0.6b สำหรับการทดลองใช้งานอย่างรวดเร็ว สำหรับการรองรับโมเดลแบบเต็มและประสิทธิภาพที่ดีกว่า กรุณาติดตั้ง LM Studio",
     "gmail_tools": {
       "title": "เครื่องมือ Gmail",
       "description": "กำหนดค่าฟีเจอร์ช่วยเขียนต่างๆ",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "อุปส์! มีบางอย่างผิดพลาด โปรดตรวจสอบการเชื่อมต่อ Ollama ของคุณในการตั้งค่าและลองอีกครั้ง",
-    "model_request_error": "อุปส์! มีบางอย่างผิดพลาด โปรดตรวจสอบการเชื่อมต่อ Ollama ของคุณในการตั้งค่าและลองอีกครั้ง",
-    "model_request_timeout": "หมดเวลาการตอบสนอง โปรดตรวจสอบการเชื่อมต่อ Ollama ของคุณ หรือพิจารณาเริ่มต้นเซสชั่นใหม่ เนื่องจากบริบทที่ยาวอาจส่งผลต่อเวลาการตอบสนอง",
+    "model_not_found": "อุ๊ปส์! มีบางอย่างผิดพลาด กรุณาตรวจสอบการเชื่อมต่อในการตั้งค่าและลองใหม่อีกครั้ง",
+    "model_request_error": "อุ๊ปส์! มีบางอย่างผิดพลาด กรุณาตรวจสอบการเชื่อมต่อในการตั้งค่าและลองใหม่อีกครั้ง",
+    "model_request_timeout": "คำขอหมดเวลา กรุณาตรวจสอบการเชื่อมต่อของคุณหรือพิจารณาเริ่มเซสชันใหม่ เนื่องจากบริบทที่ยาวอาจส่งผลต่อเวลาในการตอบสนอง",
     "timeout_error": "การดำเนินการหมดเวลา: {message}",
     "unknown_error": "เกิดข้อผิดพลาดที่ไม่คาดคิด: {message}",
     "webllm_not_supported": "WebLLM ไม่รองรับบนอุปกรณ์ของคุณ",
diff --git a/locales/vi.json b/locales/vi.json
index 1b1daf09..e8e4537f 100644
--- a/locales/vi.json
+++ b/locales/vi.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "Hãy thử nhấp vào một liên kết trang trước khi xem bất kỳ trang nào",
         "error_click_incorrect_link": "Hãy thử nhấp vào liên kết trang không chính xác"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "Tìm kiếm"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "AI trên thiết bị, được xây dựng chỉ dành cho bạn"
     },
     "guide": {
-      "already_installed": "Bạn đã cài đặt và chạy Ollama?",
+      "already_installed": "Đã cài đặt và chạy {endpointType}?",
       "features": {
         "1": "Chạy các mô hình tiên tiến như gpt-oss, DeepSeek, Qwen, Llama",
         "2": "Tùy chỉnh và chuyển đổi các mô hình với toàn bộ điều khiển",
         "3": "Dữ liệu của bạn vẫn riêng tư, trên thiết bị của bạn"
       },
       "follow_our_tutorial": "Thực hiện theo hướng dẫn cài đặt của chúng tôi",
-      "get_ollama": "Nhận Ollama",
-      "install_desc": "Cài đặt Ollama để thiết lập AI cục bộ của bạn.",
+      "install_desc": "Bạn muốn chạy AI cục bộ như thế nào?",
       "need_help": "Cần giúp đỡ?",
-      "ollama_desc": "Mở khóa toàn bộ sức mạnh của AI trên thiết bị với Ollama.",
       "setup": "Cài đặt",
       "step1": "Bước 1",
       "download_model_to_begin": "Tải xuống một mô hình để bắt đầu.",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 Không chắc chọn cái nào?",
       "learn_about_models": "Tìm hiểu về các mô hình",
       "looking_for_more_options": "🔍 Đang tìm kiếm thêm tùy chọn?",
-      "browse_more_models": "Duyệt qua các mô hình khác"
+      "browse_more_models": "Duyệt qua các mô hình khác",
+      "get_endpoint": "Lấy {endpointType}",
+      "lm_studio_select_desc": "Ứng dụng Desktop dễ sử dụng",
+      "ollama_select_desc": "Công cụ Phát triển Chuyên nghiệp",
+      "unlock_full_power_with": "Mở khóa toàn bộ sức mạnh AI cục bộ với {endpointType}."
     },
     "webllm_tutorial": {
       "desc": "Sử dụng mô hình nhẹ (QWEN 0,6B) ngay trong trình duyệt của bạn - không thiết lập, không chờ đợi.",
@@ -132,7 +139,8 @@
       "title": "👋 Chào mừng bạn đến với **NativeMind**",
       "body": "NativeMind là tiện ích mở rộng trình duyệt AI đầu tiên riêng tư giúp bạn trò chuyện, tìm kiếm và dịch - tất cả được cung cấp bởi các mô hình ngôn ngữ trên thiết bị.\n\nĐây là những gì bạn có thể làm với NativeMind:\n\n- Trò chuyện qua nhiều tab để theo dõi các trang khác nhau.\n- Tìm kiếm web trực tiếp trong trò chuyện để biết thêm bối cảnh.\n- Nhấp chuột phải để dịch bất kỳ phần nào của trang ngay lập tức.\n- Chuyển đổi hoặc tải xuống mô hình bất cứ lúc nào trong cài đặt.\n\nBạn có thể bắt đầu bằng cách thử các thao tác nhanh dưới đây."
     },
-    "ollama_is_running": "Ollama đang chạy"
+    "ollama_is_running": "Ollama đang chạy",
+    "backend_is_running": "{endpointType} đang chạy"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "Mô hình",
       "discover_more": "Khám phá thêm các mô hình",
       "no_model": "⚠️ Không có mô hình",
-      "add_model_to_start": "Thêm một mô hình để bắt đầu"
+      "add_model_to_start": "Thêm một mô hình để bắt đầu",
+      "ollama_models": "Các Mô hình Ollama ({count})",
+      "lmstudio_models": "LM Studio Models ({count}) → Các Mô hình LM Studio ({count})"
     },
     "ollama": {
       "already_installed": "Bạn đã cài đặt và chạy Ollama?",
@@ -182,19 +192,15 @@
       "unload": "Dỡ tải",
       "expires_in": "Hết hạn trong {duration}",
       "running": "Chạy",
-      "running_models": "Mô hình đang chạy"
+      "running_models": "Mô hình đang chạy",
+      "model_management": "Quản lý Mô hình",
+      "downloaded_models": "Các Mô hình Đã tải xuống"
     },
     "prompts": {
       "chat_system_prompt": "Nhắc hệ thống trò chuyện",
       "title": "Nhắc nhở",
       "translation_system_prompt": "Prompt hệ thống dịch thuật"
     },
-    "provider": {
-      "title": "Kết nối"
-    },
-    "provider_model": {
-      "title": "Cấu hình Ollama"
-    },
     "quick_actions": {
       "description": "Thiết lập các thao tác nhanh để chạy lời nhắc yêu thích của bạn nhanh hơn - từ trò chuyện mới hoặc menu chuột phải.",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} định lượng",
         "thinking": "Suy nghĩ",
         "no_active_models": "Ollama đã kết nối, nhưng không có mô hình nào đang hoạt động",
-        "not_connected_to_ollama": "Không kết nối với Ollama"
-      }
+        "not_connected_to_ollama": "Không kết nối với Ollama",
+        "lm_studio_no_active_models": "LM Studio đã kết nối, nhưng không có mô hình nào đang hoạt động",
+        "not_connected_to_lm_studio": "Không kết nối với LM Studio"
+      },
+      "delete_model_confirm": "Bạn có chắc chắn muốn xóa mô hình \"{model}\" không?"
     },
     "title": "Cài đặt",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "Tải xuống",
       "retry": "Thử lại",
       "unable_to_download": "Không thể bắt đầu tải xuống",
-      "could_not_connect_ollama": "Chúng tôi không thể kết nối với Ollama. Vui lòng đảm bảo Ollama đang chạy và thử lại."
+      "could_not_connect": "Chúng tôi không thể kết nối tới {endpointType}. Vui lòng đảm bảo {endpointType} đang chạy và thử lại."
     },
     "webllm_downloader": {
       "description": "Để sử dụng chế độ Cục bộ, bạn cần tải xuống mô hình {model} ({size}). Bạn có muốn tải xuống ngay bây giờ không?"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "Giao diện",
       "interface_language": "Ngôn ngữ giao diện",
-      "interface_language_desc": "Chọn ngôn ngữ hiển thị cho giao diện NativeMind"
+      "theme": "Giao diện",
+      "theme_light": "Sáng",
+      "theme_dark": "Tối",
+      "theme_system": "Hệ thống"
     },
     "header": {
       "starts_on_github": "Sao trên GitHub",
       "goto_website": "Đi đến Trang web"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "Cấu hình LM Studio",
+        "already_installed": "Đã cài đặt và chạy LM Studio chưa?",
+        "model_management_desc": "Việc tải xuống, tải và xóa mô hình phải được thực hiện trong ứng dụng desktop LM Studio. Đây chỉ hiển thị trạng thái đang chạy hiện tại."
+      },
+      "ollama": {
+        "title": "Cấu hình Ollama"
+      }
+    },
+    "get_lm_studio": "Tải LM Studio",
+    "delete": "Xóa",
+    "lm_studio": {
+      "server_address": "Địa chỉ máy chủ",
+      "server_address_desc": "Điểm cuối API máy chủ LM Studio"
+    },
+    "webllm_desc_lm_studio": "Bạn hiện đang sử dụng WebLLM: qwen3:0.6b để dùng thử nhanh. Để có hỗ trợ mô hình đầy đủ và hiệu suất tốt hơn, vui lòng cài đặt LM Studio.",
     "gmail_tools": {
       "title": "Công cụ Gmail",
       "description": "Cấu hình các tính năng hỗ trợ viết khác nhau",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "Ối! Đã xảy ra lỗi. Vui lòng kiểm tra kết nối Ollama của bạn trong cài đặt và thử lại.",
-    "model_request_error": "Ối! Đã xảy ra lỗi. Vui lòng kiểm tra kết nối Ollama của bạn trong cài đặt và thử lại.",
-    "model_request_timeout": "Yêu cầu đã hết thời gian. Vui lòng kiểm tra kết nối Ollama của bạn hoặc xem xét bắt đầu một phiên mới, vì bối cảnh dài có thể ảnh hưởng đến thời gian phản hồi.",
+    "model_not_found": "Ôi! Đã xảy ra lỗi. Vui lòng kiểm tra kết nối trong cài đặt và thử lại.",
+    "model_request_error": "Ôi! Đã xảy ra lỗi. Vui lòng kiểm tra kết nối trong cài đặt và thử lại.",
+    "model_request_timeout": "Hết thời gian chờ yêu cầu, vui lòng kiểm tra kết nối của bạn hoặc cân nhắc bắt đầu phiên mới vì ngữ cảnh dài có thể ảnh hưởng đến thời gian phản hồi.",
     "timeout_error": "Thao tác đã hết thời gian: {message}",
     "unknown_error": "Đã xảy ra lỗi không xác định: {message}",
     "webllm_not_supported": "WebLLM không được hỗ trợ trên thiết bị của bạn.",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 54fc6c9c..bee4d513 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -37,7 +37,9 @@
       "unload": "卸载",
       "expires_in": "在 {duration} 后过期",
       "running": "运行中",
-      "running_models": "运行中的模型"
+      "running_models": "运行中的模型",
+      "model_management": "模型管理",
+      "downloaded_models": "已下载的模型"
     },
     "choose_model": "选择模型",
     "download": "下载",
@@ -50,7 +52,9 @@
       "title": "模型",
       "discover_more": "发现更多模型",
       "no_model": "⚠️ 无模型",
-      "add_model_to_start": "添加模型以开始"
+      "add_model_to_start": "添加模型以开始",
+      "ollama_models": "Ollama 模型 ({count})",
+      "lmstudio_models": "LM Studio 模型 ({count})"
     },
     "quick_actions": {
       "title": "自定义快捷操作",
@@ -70,12 +74,6 @@
       "join_waitlist_link": "加入等待名单",
       "discord": "Discord"
     },
-    "provider": {
-      "title": "连接"
-    },
-    "provider_model": {
-      "title": "配置 Ollama"
-    },
     "cache": {
       "title": "翻译缓存",
       "enable": "启用缓存",
@@ -101,8 +99,11 @@
         "quant": "{level} 量化",
         "thinking": "推理",
         "no_active_models": "Ollama 已连接，但没有活跃的模型",
-        "not_connected_to_ollama": "未连接到 Ollama"
-      }
+        "not_connected_to_ollama": "未连接到 Ollama",
+        "lm_studio_no_active_models": "LM Studio 已连接，但没有活跃的模型",
+        "not_connected_to_lm_studio": "未连接到 LM Studio"
+      },
+      "delete_model_confirm": "您确定要删除模型\"{model}\"吗？"
     },
     "title": "设置",
     "model_downloader": {
@@ -113,7 +114,7 @@
       "download": "下载",
       "retry": "重试",
       "unable_to_download": "无法开始下载",
-      "could_not_connect_ollama": "我们无法连接到 Ollama。请确保 Ollama 正在运行，然后重试。"
+      "could_not_connect": "我们无法连接到 {endpointType}。请确保 {endpointType} 正在运行，然后重试。"
     },
     "webllm_downloader": {
       "description": "要使用本地模式，您需要下载 {model} 模型（{size}）。您现在想要下载吗？"
@@ -177,12 +178,32 @@
     "interface": {
       "title": "界面",
       "interface_language": "界面语言",
-      "interface_language_desc": "选择 NativeMind 界面的显示语言"
+      "theme": "主题",
+      "theme_light": "浅色",
+      "theme_dark": "深色",
+      "theme_system": "系统"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
       "goto_website": "前往网站"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "配置 LM Studio",
+        "already_installed": "已经安装并运行了 LM Studio？",
+        "model_management_desc": "模型下载、加载和删除必须在 LM Studio 桌面应用程序中完成。这里只显示当前运行状态。"
+      },
+      "ollama": {
+        "title": "配置 Ollama"
+      }
+    },
+    "get_lm_studio": "获取 LM Studio",
+    "delete": "删除",
+    "lm_studio": {
+      "server_address": "服务器地址",
+      "server_address_desc": "LM Studio 服务器 API 端点"
+    },
+    "webllm_desc_lm_studio": "您现在正在使用 WebLLM: qwen3:0.6b 进行快速试用。如需完整模型支持和更好的性能，请安装 LM Studio。",
     "gmail_tools": {
       "title": "Gmail 工具",
       "description": "配置各种写作辅助功能",
@@ -296,6 +317,11 @@
         "error_click_before_view_tab": "尝试在尚未查看任何页面时点击页面链接",
         "error_click_incorrect_link": "尝试点击错误的页面链接"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "搜索"
+      }
     }
   },
   "chat_history": {
@@ -319,17 +345,15 @@
       "title": "为您打造的本地AI助手"
     },
     "guide": {
-      "already_installed": "已安装并运行Ollama？",
+      "already_installed": "已安装并运行 {endpointType}？",
       "features": {
         "1": "运行高级模型，如 gpt-oss、DeepSeek、Qwen、Llama",
         "2": "完全掌控模型的自定义和切换",
         "3": "您的数据始终保持在本地设备上"
       },
       "follow_our_tutorial": "查看我们的安装指南",
-      "get_ollama": "获取Ollama",
-      "install_desc": "安装Ollama以设置您的本地AI助手。",
+      "install_desc": "您想如何在本地运行AI？",
       "need_help": "需要帮助？",
-      "ollama_desc": "借助Ollama释放AI的全部潜力。",
       "setup": "开始设置",
       "step1": "步骤1",
       "download_model_to_begin": "下载模型以开始。",
@@ -339,7 +363,11 @@
       "no_sure_which_one": "🤔 不确定选择哪一个？",
       "learn_about_models": "了解模型",
       "looking_for_more_options": "🔍 寻找更多选项？",
-      "browse_more_models": "浏览更多模型"
+      "browse_more_models": "浏览更多模型",
+      "get_endpoint": "获取 {endpointType}",
+      "lm_studio_select_desc": "易于使用的桌面应用程序",
+      "ollama_select_desc": "专业开发者工具",
+      "unlock_full_power_with": "使用 {endpointType} 释放本地 AI 的全部潜力。"
     },
     "webllm_tutorial": {
       "desc": "在浏览器中使用轻量级模型（Qwen 0.6B）- 无需设置，即刻体验。",
@@ -351,7 +379,8 @@
       "body": "NativeMind是一款注重隐私的AI浏览器扩展，可帮助您聊天、搜索和翻译 — 所有功能均由本地设备上的语言模型提供支持。\n\n通过NativeMind，您可以：\n- 在多个标签页之间聊天，轻松跟踪不同页面内容。\n- 直接在聊天中搜索网页获取更多信息。\n- 右键点击即可立即翻译页面任何部分。\n- 在设置中随时切换或下载新模型。\n\n您可以从下方的快捷操作开始体验。",
       "title": "👋欢迎使用 **NativeMind**"
     },
-    "ollama_is_running": "Ollama 正在运行"
+    "ollama_is_running": "Ollama 正在运行",
+    "backend_is_running": "{endpointType} 正在运行"
   },
   "context_menu": {
     "quick_actions": {
@@ -370,11 +399,11 @@
     }
   },
   "errors": {
-    "model_not_found": "哎呀！\n出了点问题。\n请在设置中检查您的Ollama连接，然后重试。",
-    "model_request_error": "哎呀！\n出了点问题。\n请在设置中检查您的Ollama连接，然后重试。",
+    "model_not_found": "哎呀！出了点问题。请在设置中检查您的连接并重试。",
+    "model_request_error": "哎呀！出了点问题。请在设置中检查您的连接并重试。",
     "timeout_error": "操作超时：{message}",
     "unknown_error": "发生意外错误：{message}",
-    "model_request_timeout": "请求超时，请检查您的Ollama连接或考虑启动新会话，因为长上下文可能会影响响应时间。",
+    "model_request_timeout": "请求超时，请检查您的连接或考虑开始新会话，因为长上下文可能会影响响应时间。",
     "webllm_not_supported": "WebLLM 在您的设备上不受支持。",
     "max_characters_error": "最多允许 {count} 个字符"
   },
diff --git a/locales/zh-TW.json b/locales/zh-TW.json
index a6b50576..47752408 100644
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@@ -77,6 +77,11 @@
         "error_click_before_view_tab": "在查看任何頁面之前，請先嘗試點擊頁面連結",
         "error_click_incorrect_link": "請嘗試點擊錯誤的頁面連結"
       }
+    },
+    "tools": {
+      "online_search": {
+        "title": "搜尋"
+      }
     }
   },
   "chat_history": {
@@ -100,17 +105,15 @@
       "title": "裝置AI，專為您打造"
     },
     "guide": {
-      "already_installed": "已經安裝並執行Ollama？",
+      "already_installed": "已安裝並執行 {endpointType}？",
       "features": {
         "1": "執行進階模型，如 gpt-oss、DeepSeek、Qwen、Llama",
         "2": "自訂和切換模型完全控制",
         "3": "您的資料在裝置上保持私密"
       },
       "follow_our_tutorial": "參照我們的安裝指南",
-      "get_ollama": "獲取Ollama",
-      "install_desc": "安裝Ollama來設置您的本地AI。",
+      "install_desc": "您想如何在本地運行 AI？",
       "need_help": "需要幫助嗎？",
-      "ollama_desc": "用Ollama解鎖AI的全部力量。",
       "setup": "設置",
       "step1": "步驟1",
       "download_model_to_begin": "下載模型以開始。",
@@ -120,7 +123,11 @@
       "no_sure_which_one": "🤔 不確定要選擇哪一個？",
       "learn_about_models": "了解模型",
       "looking_for_more_options": "🔍 尋找更多選項？",
-      "browse_more_models": "瀏覽更多模型"
+      "browse_more_models": "瀏覽更多模型",
+      "get_endpoint": "取得 {endpointType}",
+      "lm_studio_select_desc": "易於使用的桌面應用程式",
+      "ollama_select_desc": "專業開發者工具",
+      "unlock_full_power_with": "使用 {endpointType} 解鎖完整的本地 AI 功能。"
     },
     "webllm_tutorial": {
       "desc": "在瀏覽器中使用輕巧的模型（QWEN 0.6B） - 無需設置，無需等待。",
@@ -132,7 +139,8 @@
       "title": "👋歡迎來到 **NativeMind**",
       "body": "NativeMind是一個隱私優先的AI瀏覽器擴展程式，可協助您聊天、搜尋和翻譯 - 全部由裝置語言模型提供支援。\n\n這是您可以使用NativeMind來做的：\n- 跨多個分頁聊天以跟蹤不同頁面。\n- 直接在聊天中搜尋網路以獲取更多上下文。\n- 右鍵點擊​​以立即翻譯頁面的任何部分。\n- 在設置中隨時切換或下載模型。\n\n您可以從下面嘗試快捷操作開始。"
     },
-    "ollama_is_running": "Ollama 正在運行"
+    "ollama_is_running": "Ollama 正在運行",
+    "backend_is_running": "{endpointType} 正在執行中"
   },
   "settings": {
     "cache": {
@@ -160,7 +168,9 @@
       "title": "模型",
       "discover_more": "探索更多模型",
       "no_model": "⚠️ 沒有模型",
-      "add_model_to_start": "新增模型以開始"
+      "add_model_to_start": "新增模型以開始",
+      "ollama_models": "Ollama 模型 ({count})",
+      "lmstudio_models": "LM Studio 模型 ({count})"
     },
     "ollama": {
       "already_installed": "已經安裝並執行Ollama？",
@@ -182,19 +192,15 @@
       "unload": "卸載",
       "expires_in": "於 {duration} 後到期",
       "running": "運行中",
-      "running_models": "運行中的模型"
+      "running_models": "運行中的模型",
+      "model_management": "模型管理",
+      "downloaded_models": "已下載的模型"
     },
     "prompts": {
       "chat_system_prompt": "聊天系統提示詞",
       "title": "提示詞",
       "translation_system_prompt": "翻譯系統提示詞"
     },
-    "provider": {
-      "title": "連接"
-    },
-    "provider_model": {
-      "title": "配置 Ollama"
-    },
     "quick_actions": {
       "description": "設置快捷操作以更快地執行您喜歡的提示詞 - 從新建聊天或右鍵選單中。",
       "edit": {
@@ -236,8 +242,11 @@
         "quant": "{level} 量化",
         "thinking": "推理",
         "no_active_models": "Ollama 已連接，但沒有啟用的模型",
-        "not_connected_to_ollama": "未連接到 Ollama"
-      }
+        "not_connected_to_ollama": "未連接到 Ollama",
+        "lm_studio_no_active_models": "LM Studio 已連接，但沒有啟用的模型",
+        "not_connected_to_lm_studio": "未連接到 LM Studio"
+      },
+      "delete_model_confirm": "您確定要刪除模型「{model}」嗎？"
     },
     "title": "設定",
     "model_downloader": {
@@ -248,7 +257,7 @@
       "download": "下載",
       "retry": "重試",
       "unable_to_download": "無法開始下載",
-      "could_not_connect_ollama": "我們無法連接到 Ollama。請確保 Ollama 正在運行，然後再試一次。"
+      "could_not_connect": "我們無法連接到 {endpointType}。請確保 {endpointType} 正在運行，然後再試一次。"
     },
     "webllm_downloader": {
       "description": "要使用本機模式，您需要下載 {model} 模型（{size}）。您現在要下載嗎？"
@@ -312,12 +321,32 @@
     "interface": {
       "title": "介面",
       "interface_language": "介面語言",
-      "interface_language_desc": "選擇 NativeMind 介面的顯示語言"
+      "theme": "主題",
+      "theme_light": "淺色",
+      "theme_dark": "深色",
+      "theme_system": "系統"
     },
     "header": {
       "starts_on_github": "Stars on GitHub",
       "goto_website": "前往網站"
     },
+    "providers": {
+      "lm_studio": {
+        "title": "配置 LM Studio",
+        "already_installed": "已經安裝並執行 LM Studio 了嗎？",
+        "model_management_desc": "模型下載、載入和刪除必須在 LM Studio 桌面應用程式中完成。這裡只顯示目前的運行狀態。"
+      },
+      "ollama": {
+        "title": "配置 Ollama"
+      }
+    },
+    "get_lm_studio": "取得 LM Studio",
+    "delete": "刪除",
+    "lm_studio": {
+      "server_address": "伺服器位址",
+      "server_address_desc": "LM Studio 伺服器 API 端點"
+    },
+    "webllm_desc_lm_studio": "您現在正在使用 WebLLM: qwen3:0.6b 進行快速試用。如需完整模型支援和更佳效能，請安裝 LM Studio。",
     "gmail_tools": {
       "title": "Gmail 工具",
       "description": "配置各種寫作輔助功能",
@@ -370,9 +399,9 @@
     }
   },
   "errors": {
-    "model_not_found": "哎呀！出了點問題。請在設置中檢查您的Ollama連接，然後重試。",
-    "model_request_error": "哎呀！出了點問題。請在設置中檢查您的Ollama連接，然後重試。",
-    "model_request_timeout": "請求超時，請檢查您的Ollama連接或考慮啟動新會話，因為長上下文可能會影響響應時間。",
+    "model_not_found": "糟糕！發生錯誤。請檢查設定中的連線並重試。",
+    "model_request_error": "糟糕！發生錯誤。請檢查設定中的連線並重試。",
+    "model_request_timeout": "請求逾時，請檢查您的連線或考慮開始新的會話，因為長內容可能會影響回應時間。",
     "timeout_error": "操作計時：{message}",
     "unknown_error": "發生意外錯誤：{message}",
     "webllm_not_supported": "WebLLM 在您的裝置上不受支援。",
diff --git a/package.json b/package.json
index c6631c39..6292b070 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nativemind-extension",
-  "version": "1.9.5",
+  "version": "1.10.1",
   "private": false,
   "author": "NativeMind",
   "keywords": [
@@ -26,8 +26,8 @@
   ],
   "type": "module",
   "scripts": {
-    "build:beta": "NODE_ENV=beta wxt build -c wxt.config.beta.ts",
-    "build:beta:firefox": "NODE_ENV=beta wxt build -c wxt.config.beta.ts -b firefox --mv3",
+    "build:beta": "cross-env NODE_ENV=beta wxt build -c wxt.config.beta.ts",
+    "build:beta:firefox": "cross-env NODE_ENV=beta wxt build -c wxt.config.beta.ts -b firefox --mv3",
     "build:prod": "wxt build",
     "build:prod:firefox": "wxt build -b firefox --mv3",
     "build:analyze": "wxt build --analyze",
@@ -36,24 +36,24 @@
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "compile": "vue-tsc --noEmit",
-    "test:e2e": "playwright test --config=playwright.config.ts",
+    "test:e2e": "PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1 playwright test --config=playwright.config.ts",
     "test:unit": "vitest run",
-    "dev": "wxt",
-    "dev:edge": "wxt -b edge",
-    "dev:firefox": "wxt -b firefox --mv3",
+    "dev": "cross-env NODE_ENV=development wxt",
+    "dev:edge": "cross-env NODE_ENV=development wxt -b edge",
+    "dev:firefox": "cross-env NODE_ENV=development wxt -b firefox --mv3",
     "postinstall": "wxt prepare",
     "release:beta": "release-it --preRelease=beta --config .release-it.beta.json",
     "release:prod": "release-it",
     "release:patch": "release-it patch",
-    "zip:beta": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts",
-    "zip:beta:edge": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b edge",
-    "zip:beta:firefox": "NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b firefox --mv3",
+    "zip:beta": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts",
+    "zip:beta:edge": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b edge",
+    "zip:beta:firefox": "cross-env NODE_ENV=beta wxt zip -c wxt.config.beta.ts -b firefox --mv3",
     "zip:prod": "wxt zip",
     "zip:prod:firefox": "wxt zip -b firefox --mv3",
     "prepare": "husky"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^1.3.22",
+    "@ai-sdk/openai-compatible": "^0.2.5",
     "@ai-sdk/provider": "^1.1.3",
     "@ai-sdk/provider-utils": "^2.2.8",
     "@huggingface/transformers": "^3.5.2",
@@ -64,10 +64,12 @@
     "@jimp/js-png": "^1.6.0",
     "@jimp/js-tiff": "^1.6.0",
     "@jimp/plugin-resize": "^1.6.0",
+    "@lmstudio/sdk": "^1.5.0",
     "@mlc-ai/web-llm": "^0.2.79",
     "@mozilla/readability": "^0.6.0",
     "@tailwindcss/vite": "^4.1.7",
     "@vueuse/core": "^13.1.0",
+    "add": "^2.0.6",
     "ai": "^4.3.13",
     "base64-js": "^1.5.1",
     "best-effort-json-parser": "^1.1.3",
@@ -103,8 +105,10 @@
     "nanoid": "^5.1.5",
     "ollama": "^0.5.15",
     "openai": "^5.9.2",
+    "openai-harmony": "^0.4.0",
     "partial-json": "^0.1.7",
     "pinia": "^3.0.2",
+    "pnpm": "^10.15.1",
     "prettier-plugin-packagejson": "^2.5.11",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
@@ -142,6 +146,7 @@
     "@vue/test-utils": "^2.4.6",
     "@webgpu/types": "^0.1.60",
     "@wxt-dev/module-vue": "^1.0.2",
+    "cross-env": "^10.0.0",
     "defu": "^6.1.4",
     "eslint": "^9.26.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 51e364e5..cdcd534e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,9 @@ importers:
 
   .:
     dependencies:
-      '@ai-sdk/openai':
-        specifier: ^1.3.22
-        version: 1.3.22(zod@3.24.4)
+      '@ai-sdk/openai-compatible':
+        specifier: ^0.2.5
+        version: 0.2.16(zod@3.24.4)
       '@ai-sdk/provider':
         specifier: ^1.1.3
         version: 1.1.3
@@ -41,6 +41,9 @@ importers:
       '@jimp/plugin-resize':
         specifier: ^1.6.0
         version: 1.6.0
+      '@lmstudio/sdk':
+        specifier: ^1.5.0
+        version: 1.5.0
       '@mlc-ai/web-llm':
         specifier: ^0.2.79
         version: 0.2.79
@@ -53,6 +56,9 @@ importers:
       '@vueuse/core':
         specifier: ^13.1.0
         version: 13.1.0(vue@3.5.13(typescript@5.8.3))
+      add:
+        specifier: ^2.0.6
+        version: 2.0.6
       ai:
         specifier: ^4.3.13
         version: 4.3.13(react@19.1.0)(zod@3.24.4)
@@ -158,12 +164,18 @@ importers:
       openai:
         specifier: ^5.9.2
         version: 5.9.2(ws@8.18.1)(zod@3.24.4)
+      openai-harmony:
+        specifier: ^0.4.0
+        version: 0.4.0(typescript@5.8.3)
       partial-json:
         specifier: ^0.1.7
         version: 0.1.7
       pinia:
         specifier: ^3.0.2
         version: 3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
+      pnpm:
+        specifier: ^10.15.1
+        version: 10.15.1
       prettier-plugin-packagejson:
         specifier: ^2.5.11
         version: 2.5.11(prettier@3.5.3)
@@ -270,6 +282,9 @@ importers:
       '@wxt-dev/module-vue':
         specifier: ^1.0.2
         version: 1.0.2(vite@6.3.5(@types/node@24.0.4)(jiti@2.4.2)(lightningcss@1.30.1)(sass-embedded@1.87.0)(yaml@2.7.1))(vue@3.5.13(typescript@5.8.3))(wxt@0.20.6(@types/node@24.0.4)(jiti@2.4.2)(lightningcss@1.30.1)(rollup@4.40.1)(sass-embedded@1.87.0)(yaml@2.7.1))
+      cross-env:
+        specifier: ^10.0.0
+        version: 10.0.0
       defu:
         specifier: ^6.1.4
         version: 6.1.4
@@ -345,8 +360,8 @@ packages:
   '@1natsu/wait-element@4.1.2':
     resolution: {integrity: sha512-qWxSJD+Q5b8bKOvESFifvfZ92DuMsY+03SBNjTO34ipJLP6mZ9yK4bQz/vlh48aEQXoJfaZBqUwKL5BdI5iiWw==}
 
-  '@ai-sdk/openai@1.3.22':
-    resolution: {integrity: sha512-QwA+2EkG0QyjVR+7h6FE7iOu2ivNqAVMm9UJZkVxxTk5OIq5fFJDTEI/zICEMuHImTTXR2JjsL6EirJ28Jc4cw==}
+  '@ai-sdk/openai-compatible@0.2.16':
+    resolution: {integrity: sha512-LkvfcM8slJedRyJa/MiMiaOzcMjV1zNDwzTHEGz7aAsgsQV0maLfmJRi/nuSwf5jmp0EouC+JXXDUj2l94HgQw==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
@@ -548,6 +563,9 @@ packages:
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
+  '@epic-web/invariant@1.0.0':
+    resolution: {integrity: sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==}
+
   '@esbuild/aix-ppc64@0.25.4':
     resolution: {integrity: sha512-1VCICWypeQKhVbE9oW/sJaAmjLxhVqacdkvPLEjwlttjfwENRSClS8EjBz0KzRyFSCPDIkuXW34Je/vk7zdB7Q==}
     engines: {node: '>=18'}
@@ -1167,6 +1185,12 @@ packages:
   '@lit/reactive-element@2.1.1':
     resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
 
+  '@lmstudio/lms-isomorphic@0.4.6':
+    resolution: {integrity: sha512-v0LIjXKnDe3Ff3XZO5eQjlVxTjleUHXaom14MV7QU9bvwaoo3l5p71+xJ3mmSaqZq370CQ6pTKCn1Bb7Jf+VwQ==}
+
+  '@lmstudio/sdk@1.5.0':
+    resolution: {integrity: sha512-fdY12x4hb14PEjYijh7YeCqT1ZDY5Ok6VR4l4+E/dI+F6NW8oB+P83Sxed5vqE4XgTzbgyPuSR2ZbMNxxF+6jA==}
+
   '@mediapipe/tasks-genai@0.10.14':
     resolution: {integrity: sha512-2XYVRJl/ylWLmBRzm7TVrl2yF8tKK2HCWypBno1KIVGPwY2i4mFlzt05itqBsTEwZbVYS/rZ15gLE9ypc6Nw3w==}
 
@@ -1912,6 +1936,9 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  add@2.0.6:
+    resolution: {integrity: sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==}
+
   adm-zip@0.5.16:
     resolution: {integrity: sha512-TGw5yVi4saajsSEgz25grObGHEUaDrniwvA2qwSC060KfqGPdglhvPMA2lPIoxs3PQIItj2iag35fONcQqgUaQ==}
     engines: {node: '>=12.0'}
@@ -2452,6 +2479,11 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
+  cross-env@10.0.0:
+    resolution: {integrity: sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -3642,6 +3674,9 @@ packages:
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
+  jsonschema@1.5.0:
+    resolution: {integrity: sha512-K+A9hhqbn0f3pJX17Q/7H6yQfD/5OXgdrR5UE12gMXCiN9D5Xq2o5mddV2QEcX/bjla99ASsAAQUyMCCRWAEhw==}
+
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
@@ -4311,6 +4346,12 @@ packages:
     resolution: {integrity: sha512-OS+QTnw1/4vrf+9hh1jc1jnYjzSG4ttTBB8UxOwAnInG3Uo4ssetzC1ihqaIHjLJnA5GGlRl6QlZXOTQhRBUvg==}
     engines: {node: '>=14.16'}
 
+  openai-harmony@0.4.0:
+    resolution: {integrity: sha512-GYpw+5ye1iIZA/hrM9coY1LnC67eK/MeTw6qN8wx5O+UKsiZhD5JV6YCDPaUEmxBXbiKyPwDF9mU2aUlrz3JEA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      typescript: ^5
+
   openai@5.9.2:
     resolution: {integrity: sha512-d7t/lRkwZpSwIk7GW3EHRSGAlsuoi1WL6VhCO02raEzZO2ahEVAbWn3WmOcpeh9zF6xF9weJXoVeDkWJRz+SHA==}
     hasBin: true
@@ -4552,6 +4593,11 @@ packages:
     resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
     engines: {node: '>=14.19.0'}
 
+  pnpm@10.15.1:
+    resolution: {integrity: sha512-NOU4wym1VTAUyo6PRTWZf5YYCh0PYUM5NXRJk1NQ2STiL4YUaCGRJk7DPRRirCFWGv+X9rsYBlNRwWLH6PbeZw==}
+    engines: {node: '>=18.12'}
+    hasBin: true
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -5941,7 +5987,7 @@ snapshots:
       defu: 6.1.4
       many-keys-map: 2.0.1
 
-  '@ai-sdk/openai@1.3.22(zod@3.24.4)':
+  '@ai-sdk/openai-compatible@0.2.16(zod@3.24.4)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
       '@ai-sdk/provider-utils': 2.2.8(zod@3.24.4)
@@ -6201,6 +6247,8 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@epic-web/invariant@1.0.0': {}
+
   '@esbuild/aix-ppc64@0.25.4':
     optional: true
 
@@ -6786,6 +6834,24 @@ snapshots:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
 
+  '@lmstudio/lms-isomorphic@0.4.6':
+    dependencies:
+      ws: 8.18.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@lmstudio/sdk@1.5.0':
+    dependencies:
+      '@lmstudio/lms-isomorphic': 0.4.6
+      chalk: 4.1.2
+      jsonschema: 1.5.0
+      zod: 3.24.4
+      zod-to-json-schema: 3.24.5(zod@3.24.4)
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
   '@mediapipe/tasks-genai@0.10.14': {}
 
   '@mediapipe/tasks-text@0.10.14': {}
@@ -7591,6 +7657,8 @@ snapshots:
 
   acorn@8.14.1: {}
 
+  add@2.0.6: {}
+
   adm-zip@0.5.16: {}
 
   agent-base@7.1.3: {}
@@ -8223,6 +8291,11 @@ snapshots:
 
   create-require@1.1.1: {}
 
+  cross-env@10.0.0:
+    dependencies:
+      '@epic-web/invariant': 1.0.0
+      cross-spawn: 7.0.6
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -9457,6 +9530,8 @@ snapshots:
     optionalDependencies:
       graceful-fs: 4.2.11
 
+  jsonschema@1.5.0: {}
+
   jszip@3.10.1:
     dependencies:
       lie: 3.3.0
@@ -10213,6 +10288,10 @@ snapshots:
       is-inside-container: 1.0.0
       is-wsl: 2.2.0
 
+  openai-harmony@0.4.0(typescript@5.8.3):
+    dependencies:
+      typescript: 5.8.3
+
   openai@5.9.2(ws@8.18.1)(zod@3.24.4):
     optionalDependencies:
       ws: 8.18.1
@@ -10475,6 +10554,8 @@ snapshots:
 
   pngjs@7.0.0: {}
 
+  pnpm@10.15.1: {}
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-selector-parser@6.1.2:
diff --git a/styles/style.css b/styles/style.css
index bdeffc77..925978ed 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -71,26 +71,208 @@
 
   --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
 
-  /* Colors only used in UI component should not be used in business component */
+  /* Light mode colors */
   --color-text-primary: #1f2326;
-  --color-text-secondary: #596066;
+  --color-text-secondary: #52525b;
   --color-text-tertiary: #747a80;
   --color-text-placeholder: #aeb5bd;
   --color-text-disabled: #aeb5bd;
   --color-text-quaternary: #9ea3a8;
+  --color-text-critical: #bf2a2a;
+  --color-text-caution: #fda58f;
+
+  --color-text-link: #0d80f2;
+  --color-text-link-hover: #0b6bbf;
+
+  --color-text-accent-green: #03943d;
+  --color-text-accent-blue: #0082fb;
+
+  --color-icon-quick-action: #596066;
+
+  --color-bg-app: #f5f6fb;
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #e9e9ec;
   --color-bg-component: hsla(0, 0%, 98%, 1);
-  --color-icon-link: #0f62fe;
-  --color-danger: #bf2a2a;
+  --color-bg-tertiary: #fafafa;
+  --color-bg-tag: #f4f4f5;
+  --color-bg-selection: #dfe1e5;
+  --color-bg-hover: #eaecef;
+  --color-bg-divider: #747a80;
+
+  --color-bg-info-subtle: #e5f3ff;
+  --color-bg-overlay-contrast: #27272a;
+  --color-bg-neutral-subtle: #f2f2f2;
+
+  /* Specific colors */
+  --color-bg-clickable: #ffffff;
+  --color-bg-quick-action: #f5f6f7;
+  --color-bg-chat-input: #ffffff;
+
+  --color-bg-accent-green: #dcffea;
+
+  --color-foreground-base: #18181b;
+
+  --color-border: #e5e7eb;
+  --color-border-light: #0000001a;
+  --color-border-strong: #e4e4e7;
+  --color-border-selection: #24b96080;
+  --color-border-accent: #24b960;
+  --color-border-critical: #e11d48;
+  --color-border-critical-soft: #e11d4826;
+  --color-border-disabled: #a0a0a0;
+  --color-border-hairline: #0000000d;
+  --color-border-overlay: #18181b3d;
+  --color-border-quick-action: #0000001f;
+  --color-border-chat-input: #e4e4e7;
+  --color-divider: #0000001a;
+
+  --color-surface-disabled: #cfd4d9;
+
+  --color-overlay-scrim: #0000008b;
+  --color-overlay-muted: #00000017;
+  --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.08);
+  --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
+
+  --color-shadow-soft: #0000000a;
+  --color-shadow-medium: #00000014;
+  --color-shadow-strong: #0000001f;
+  --color-shadow-contrast: #00000066;
+  --color-shadow-inset-highlight: #ffffff33;
+  --color-shadow-ambient: rgba(0, 0, 0, 0.2);
+
+  --color-accent-primary: #24b960;
+  --color-accent-primary-hover: #089641;
+  --color-accent-primary-shadow: #0e6b33;
+  --color-accent-primary-disabled: #8a8a8a;
+
   --color-success: #60c959;
+  --color-warning: #f7c103;
+  --color-danger: #bf2a2a;
   --color-quaternary: #bdc2c7;
 
-  --color-bg-hover: #eaecef;
+  --color-gradient-onboarding-start: #d5f4e1;
+  --color-gradient-onboarding-end: #ffffff;
 
-  --color-foreground-base: #18181b;
+  --color-translation-highlight: #2724d8;
+  --color-translation-highlight-contrast: #a8b4ff;
+  --color-translation-underline-light: rgba(0, 0, 0, 0.32);
+  --color-translation-underline-dark: rgba(255, 255, 255, 0.56);
+  --color-translation-overlay-light: rgba(74, 101, 243, 0.1);
+  --color-translation-overlay-dark: rgba(200, 200, 200, 0.3);
+
+  --color-scroll-thumb: #e4e4e7;
+  --color-mask-disabled: #ffffffaf;
+  --color-arrival-shadow: #92929225;
+  --color-loading-track: #222;
+
+  --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
+    0px 4px 8px 0px var(--color-shadow-medium),
+    0px 0px 0px 1px var(--color-shadow-medium);
+  --shadow-02: 0px 0px 0px 1px var(--color-shadow-medium),
+    0px 1px 2px 0px var(--color-shadow-strong);
+}
+
+/* Dark mode colors */
+[data-nm-theme="dark"] {
+  --color-text-primary: #f8f9fa;
+  --color-text-secondary: #eaecef;
+  --color-text-tertiary: #878c92;
+  --color-text-placeholder: #6e7681;
+  --color-text-disabled: #6e7681;
+  --color-text-quaternary: #7d8590;
+  --color-text-success: #24b960;
+  --color-text-critical: #bf2a2a;
+  --color-text-caution: #fda58f;
+
+  --color-text-link: #58a6ff;
+  --color-text-link-hover: #78a6ff;
+
+  --color-text-accent-green: #56d364;
+  --color-text-accent-blue: #0082fb;
+
+  --color-icon-quick-action: #878c92;
+
+  --color-bg-app: #121212;
+  --color-bg-primary: #101010;
+  --color-bg-secondary: #212124;
+  --color-bg-component: #212124;
+  --color-bg-tertiary: #212124;
+  --color-bg-tag: #3f3f46;
+  --color-bg-selection: #212124;
+  --color-bg-hover: #2a2a2a;
+  --color-bg-divider: #878c92;
+
+  --color-bg-info-subtle: #033867;
+  --color-bg-overlay-contrast: #1f2326;
+  --color-bg-neutral-subtle: #1f2326;
+
+  /* Specific colors */
+  --color-bg-clickable: #212124;
+  --color-bg-quick-action: #212124;
+  --color-bg-chat-input: #212124;
+
+  --color-bg-accent-green: #1b3c2a;
+
+  --color-foreground-base: #f0f6fc;
+
+  --color-border: #2a2a2a;
+  --color-border-light: #212124;
+  --color-border-strong: #2a2a2a;
+  --color-border-selection: #24b96080;
+  --color-border-accent: #24b960;
+  --color-border-critical: #f85149;
+  --color-border-critical-soft: #f8514926;
+  --color-border-disabled: #3c434d;
+  --color-border-hairline: #262a31;
+  --color-border-overlay: #f8f9fa33;
+  --color-border-quick-action: #ffffff1f;
+  --color-border-chat-input: #2a2a2a;
+  --color-divider: #212124;
+
+  --color-surface-disabled: #2f363d;
+
+  --color-overlay-scrim: #000000bf;
+  --color-overlay-muted: rgba(255, 255, 255, 0.08);
+  --color-overlay-subtle-on-light: rgba(0, 0, 0, 0.24);
+  --color-overlay-subtle-on-dark: rgba(255, 255, 255, 0.16);
+
+  --color-shadow-soft: #0000001f;
+  --color-shadow-medium: #ffffff14;
+  --color-shadow-strong: #0000001f;
+  --color-shadow-contrast: #0000008a;
+  --color-shadow-inset-highlight: #ffffff1a;
+  --color-shadow-ambient: rgba(0, 0, 0, 0.4);
+
+  --color-accent-primary: #20a655;
+  --color-accent-primary-hover: #089641;
+  --color-accent-primary-shadow: #0e6b33;
+  --color-accent-primary-disabled: #3c434d;
+
+  --color-success: #56d364;
+  --color-warning: #ffb900;
+  --color-danger: #bf2a2a;
+  --color-quaternary: #30363d;
+
+  --color-gradient-onboarding-start: #344a3d;
+  --color-gradient-onboarding-end: #212124;
+
+  --color-translation-highlight: #a8b4ff;
+  --color-translation-highlight-contrast: #2724d8;
+  --color-translation-underline-light: rgba(255, 255, 255, 0.56);
+  --color-translation-underline-dark: rgba(0, 0, 0, 0.32);
+  --color-translation-overlay-light: rgba(200, 200, 200, 0.3);
+  --color-translation-overlay-dark: rgba(74, 101, 243, 0.1);
+
+  --color-scroll-thumb: #30363d;
+  --color-mask-disabled: rgba(13, 17, 23, 0.7);
+  --color-arrival-shadow: rgba(0, 0, 0, 0.32);
+  --color-loading-track: #fff;
 
-  --shadow-01: 0px 8px 16px 0px #00000014, 0px 4px 8px 0px #00000014,
-    0px 0px 0px 1px #00000014;
-  --shadow-02: 0px 0px 0px 1px #00000014, 0px 1px 2px 0px #0000001f;
+  --shadow-01: 0px 8px 16px 0px var(--color-shadow-medium),
+    0px 4px 8px 0px var(--color-shadow-medium),
+    0px 0px 0px 1px var(--color-shadow-medium);
+  --shadow-02: 0px 0px 0px 1px var(--color-shadow-medium),
+    0px 1px 2px 0px var(--color-shadow-strong);
 }
 
 .nativemind-style-boundary .scrollbar-hide {
diff --git a/tests/e2e/llm-api.test.ts b/tests/e2e/llm-api.test.ts
new file mode 100644
index 00000000..2ead36c5
--- /dev/null
+++ b/tests/e2e/llm-api.test.ts
@@ -0,0 +1,33 @@
+import { ollamaChatResponse } from './mock-responses/ollama/chat-response'
+import { ollamaPsResponse } from './mock-responses/ollama/ps'
+import { ollamaShowResponse } from './mock-responses/ollama/show'
+import { ollamaTagsResponse } from './mock-responses/ollama/tags'
+import { expect, test } from './utils'
+
+test('navigator llm api test', async ({ page, extension, context }) => {
+  context.route('http://localhost:11434/', async (route) => {
+    await route.fulfill({ body: 'Ollama is running', contentType: 'plain/text' })
+  })
+  context.route('http://localhost:11434/api/ps', async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaPsResponse), contentType: 'application/json' })
+  })
+  context.route('http://localhost:11434/api/tags', async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaTagsResponse), contentType: 'application/json' })
+  })
+  context.route('http://localhost:11434/api/show', async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaShowResponse), contentType: 'application/json' })
+  })
+  context.route('http://localhost:11434/api/chat', async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaChatResponse), contentType: 'application/json' })
+  })
+  await extension.setStorageItem('llm.model', 'qwen3:4b')
+  await page.goto('https://example.com')
+  const r = await page.evaluate<string>(async () => {
+    // @ts-expect-error - navigator.llm is injected by the extension
+    const response = await navigator.llm.responses.create({
+      prompt: 'Explain quantum computing in simple terms',
+    })
+    return response.text
+  })
+  expect(r).toBe(ollamaChatResponse.message.content)
+})
diff --git a/tests/e2e/mock-responses/ollama/chat-response.ts b/tests/e2e/mock-responses/ollama/chat-response.ts
new file mode 100644
index 00000000..a97cb065
--- /dev/null
+++ b/tests/e2e/mock-responses/ollama/chat-response.ts
@@ -0,0 +1,17 @@
+export const ollamaChatResponse = {
+  model: 'qwen3:latest',
+  created_at: '2025-09-17T05:21:21.503148Z',
+  message: {
+    role: 'assistant',
+    content: 'Hello! 😊 How can I assist you today? Let me know if you need help with anything!',
+    thinking: 'Okay, the user said "hello /think". Let me start by acknowledging their greeting. I should respond in a friendly and welcoming manner. Maybe add an emoji to keep it light. Then, I can ask how I can assist them today. Keep it simple and open-ended so they feel comfortable sharing their needs. Let me make sure the response is polite and approachable.\n',
+  },
+  done_reason: 'stop',
+  done: true,
+  total_duration: 2509131125,
+  load_duration: 55912542,
+  prompt_eval_count: 11,
+  prompt_eval_duration: 247918834,
+  eval_count: 101,
+  eval_duration: 2204852791,
+}
diff --git a/tests/e2e/mock-responses/ollama/chat-stream.ts b/tests/e2e/mock-responses/ollama/chat-stream-stream.ts
similarity index 100%
rename from tests/e2e/mock-responses/ollama/chat-stream.ts
rename to tests/e2e/mock-responses/ollama/chat-stream-stream.ts
diff --git a/tests/e2e/mock-responses/ollama/ps.ts b/tests/e2e/mock-responses/ollama/ps.ts
index a6ac2fda..69cdfb41 100644
--- a/tests/e2e/mock-responses/ollama/ps.ts
+++ b/tests/e2e/mock-responses/ollama/ps.ts
@@ -20,3 +20,7 @@ export const ollamaPsResponse = {
     },
   ],
 }
+
+export const ollamaPsEmptyResponse = {
+  models: [],
+}
diff --git a/tests/e2e/mock-responses/ollama/show.ts b/tests/e2e/mock-responses/ollama/show.ts
new file mode 100644
index 00000000..c0a03092
--- /dev/null
+++ b/tests/e2e/mock-responses/ollama/show.ts
@@ -0,0 +1,20 @@
+export const ollamaShowResponse = {
+  license: 'xxx',
+  modelfile: 'xxx',
+  parameters: 'xxx',
+  template: 'xxx',
+  details: {
+    parent_model: '',
+    format: 'gguf',
+    family: 'gemma3',
+    families: [
+      'gemma3',
+    ],
+    parameter_size: '12.2B',
+    quantization_level: 'Q4_K_M',
+  },
+  capabilities: [
+    'completion',
+  ],
+  modified_at: '2025-08-29T15:36:31.295987698+08:00',
+}
diff --git a/tests/e2e/mock-responses/ollama/tags.ts b/tests/e2e/mock-responses/ollama/tags.ts
index d75a3d82..808fe875 100644
--- a/tests/e2e/mock-responses/ollama/tags.ts
+++ b/tests/e2e/mock-responses/ollama/tags.ts
@@ -155,3 +155,7 @@ export const ollamaTagsResponse = {
     },
   ],
 }
+
+export const ollamaTagsEmptyResponse = {
+  models: [],
+}
diff --git a/tests/e2e/onboarding.test.ts b/tests/e2e/onboarding.test.ts
new file mode 100644
index 00000000..8f5c8684
--- /dev/null
+++ b/tests/e2e/onboarding.test.ts
@@ -0,0 +1,32 @@
+import { ollamaPsEmptyResponse } from './mock-responses/ollama/ps'
+import { ollamaShowResponse } from './mock-responses/ollama/show'
+import { ollamaTagsEmptyResponse } from './mock-responses/ollama/tags'
+import { expect, test } from './utils'
+
+test('show download model tutorial if ollama/lm studio is running', async ({ page, extensionId, context, extension }) => {
+  context.route('http://localhost:11434/', async (route) => {
+    await route.fulfill({ body: 'Ollama is running', contentType: 'plain/text' })
+  })
+  context.route(/\/api\/ps/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaPsEmptyResponse), contentType: 'application/json' })
+  })
+  context.route(/\/api\/tags/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaTagsEmptyResponse), contentType: 'application/json' })
+  })
+  context.route(/\/api\/show/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaShowResponse), contentType: 'application/json' })
+  })
+  await page.goto('chrome-extension://' + extensionId + '/sidepanel.html')
+  await extension.setStorageItem('locale.current', 'en')
+  await expect(page.getByText('Download a model to begin').first()).toBeVisible({ timeout: 15000 })
+})
+
+test('show startup tutorial if ollama is not running', async ({ page, extensionId, context, extension }) => {
+  context.route(/http:\/\/localhost:11434/, async (route) => {
+    await route.abort('connectionfailed')
+  })
+  await extension.setStorageItem('llm.backends.lmStudio.baseUrl', 'ws://localhost:12345') // set to a non-existing ws url to avoid lm studio connection
+  await page.goto('chrome-extension://' + extensionId + '/sidepanel.html')
+  await extension.setStorageItem('locale.current', 'en')
+  await expect(page.getByText('How do you want to run AI locally').first()).toBeVisible({ timeout: 15000 })
+})
diff --git a/tests/e2e/settings.test.ts b/tests/e2e/settings.test.ts
new file mode 100644
index 00000000..3b9d2052
--- /dev/null
+++ b/tests/e2e/settings.test.ts
@@ -0,0 +1,23 @@
+import { ollamaPsResponse } from './mock-responses/ollama/ps'
+import { ollamaShowResponse } from './mock-responses/ollama/show'
+import { ollamaTagsResponse } from './mock-responses/ollama/tags'
+import { expect, test } from './utils'
+
+test('should load extension settings', async ({ page, extensionId, context }) => {
+  context.route('http://localhost:11434/', async (route) => {
+    await route.fulfill({ body: 'Ollama is running', contentType: 'plain/text' })
+  })
+  context.route(/\/api\/ps/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaPsResponse), contentType: 'application/json' })
+  })
+  context.route(/\/api\/tags/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaTagsResponse), contentType: 'application/json' })
+  })
+  context.route(/\/api\/show/, async (route) => {
+    await route.fulfill({ body: JSON.stringify(ollamaShowResponse), contentType: 'application/json' })
+  })
+  await page.goto('chrome-extension://' + extensionId + '/settings.html')
+  // @ts-expect-error - chrome.storage is a Chrome extension API but not defined in types
+  await page.evaluate(() => chrome.storage.local.set({ 'locale.current': 'en' }))
+  await expect(page.getByText('Running Models (1)').first()).toBeVisible({ timeout: 15000 })
+})
diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts
index 9e3bb9cd..39677d53 100644
--- a/tests/e2e/utils.ts
+++ b/tests/e2e/utils.ts
@@ -1,7 +1,9 @@
-import { type BrowserContext, chromium, Page, test as base } from '@playwright/test'
+import { type BrowserContext, chromium, Page, test as base, Worker } from '@playwright/test'
 import fs from 'fs'
 import path from 'path'
 
+import { sleep } from '@/utils/sleep'
+
 import { ollamaPsResponse } from './mock-responses/ollama/ps'
 import { ollamaTagsResponse } from './mock-responses/ollama/tags'
 
@@ -10,7 +12,9 @@ type Extended = {
   extensionId: string
   extension: {
     activateActiveTab: (() => Promise<void>)
+    setStorageItem: (key: string, value: string | number | boolean) => Promise<void>
   }
+  extensionBackground: Worker
 }
 
 const ALLOWED_ENV = ['production', 'beta', 'development'] as const
@@ -29,10 +33,25 @@ if (fs.existsSync(pathToExtension) === false) {
   throw new Error(`Extension path does not exist: ${pathToExtension}. Please build the extension first.`)
 }
 
+async function waitForServiceWorker(context: BrowserContext): Promise<Worker> {
+  let [background] = context.serviceWorkers()
+  if (!background) {
+    background = await context.waitForEvent('serviceworker')
+  }
+
+  // @ts-expect-error - self.registration is not recognized in types
+  while (await background.evaluate(() => self.registration?.active?.state) !== 'activated') {
+    await sleep(300)
+  }
+
+  return background
+}
+
 export const test = base.extend<Extended>({
-  context: async ({ context: _ }, use) => {
+  context: async ({ context: _, locale }, use) => {
     const context = await chromium.launchPersistentContext('', {
       channel: 'chromium',
+      locale: locale || 'en-US',
       args: [
         `--disable-extensions-except=${pathToExtension}`,
         `--load-extension=${pathToExtension}`,
@@ -42,17 +61,13 @@ export const test = base.extend<Extended>({
     await context.close()
   },
   extensionId: async ({ context }, use) => {
-    let [background] = context.serviceWorkers()
-    if (!background)
-      background = await context.waitForEvent('serviceworker')
+    const background = await waitForServiceWorker(context)
 
     const extensionId = background.url().split('/')[2]
     await use(extensionId)
   },
   extension: async ({ context }, use) => {
-    let [background] = context.serviceWorkers()
-    if (!background)
-      background = await context.waitForEvent('serviceworker')
+    const background = await waitForServiceWorker(context)
     use({
       activateActiveTab: async () =>
         await background.evaluate(() => {
@@ -62,9 +77,18 @@ export const test = base.extend<Extended>({
             chrome.action.onClicked.dispatch(tabs[0])
           })
         }),
+      setStorageItem: async (key: string, value: string | number | boolean) =>
+        await background.evaluate(
+          ([k, v]) => {
+            // @ts-expect-error - this is a Chrome extension API
+            chrome.storage.local.set({ [k]: v })
+          },
+          [key, value],
+        ),
     })
   },
 })
+
 export const expect = test.expect
 
 interface OllamaMockOptions {
diff --git a/types/chat.ts b/types/chat.ts
index 693b69f7..60835840 100644
--- a/types/chat.ts
+++ b/types/chat.ts
@@ -181,6 +181,7 @@ export type ChatHistoryV1 = {
     lastAttachmentIds: string[]
   }
   reasoningEnabled?: boolean // reasoning setting for this chat
+  onlineSearchEnabled: boolean // online search setting for this chat, default is true
   history: HistoryItemV1[]
 }
 
diff --git a/types/lm-studio-models.ts b/types/lm-studio-models.ts
new file mode 100644
index 00000000..b24e6c93
--- /dev/null
+++ b/types/lm-studio-models.ts
@@ -0,0 +1,3 @@
+import { LLMAdditionalInfo, LLMInfo, LLMInstanceAdditionalInfo, ModelInstanceInfoBase } from '@lmstudio/sdk'
+
+export type LMStudioModelInfo = LLMInfo & { instances?: (ModelInstanceInfoBase & LLMAdditionalInfo & LLMInstanceAdditionalInfo)[] }
diff --git a/types/scroll-targets.ts b/types/scroll-targets.ts
index 7a8f30a7..1d052ffb 100644
--- a/types/scroll-targets.ts
+++ b/types/scroll-targets.ts
@@ -1 +1 @@
-export type SettingsScrollTarget = 'quick-actions-block' | 'model-download-section' | 'server-address-section'
+export type SettingsScrollTarget = 'quick-actions-block' | 'model-download-section' | 'ollama-server-address-section' | 'lm-studio-server-address-section'
diff --git a/types/theme/index.ts b/types/theme/index.ts
new file mode 100644
index 00000000..a7335240
--- /dev/null
+++ b/types/theme/index.ts
@@ -0,0 +1,2 @@
+export type ThemeModeType = 'light' | 'dark' | 'system'
+export type ThemeType = 'light' | 'dark'
diff --git a/utils/constants.ts b/utils/constants.ts
index 56d69dc5..32396f25 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -3,6 +3,10 @@ export const OLLAMA_TUTORIAL_URL = 'https://nativemind.app/blog/tutorial/ollama-
 export const OLLAMA_DOWNLOAD_URL = 'https://ollama.com/download'
 export const OLLAMA_HOMEPAGE_URL = 'https://ollama.com'
 export const OLLAMA_SEARCH_URL = 'https://ollama.com/search'
+export const LM_STUDIO_HOMEPAGE_URL = 'https://lmstudio.ai'
+export const LM_STUDIO_DOWNLOAD_URL = 'https://lmstudio.ai/download'
+export const LM_STUDIO_TUTORIAL_URL = 'https://nativemind.app/blog/tutorial/lm-studio-setup'
+export const LM_STUDIO_SEARCH_URL = 'https://lmstudio.ai/models'
 export const NATIVEMIND_HOMEPAGE_URL = 'https://nativemind.app'
 export const NATIVEMIND_REPOSITORY_URL = 'https://github.com/NativeMindBrowser/NativeMindExtension'
 export const OLLAMA_SITE_DOWNLOAD_BUTTON_CLASS = 'nativemind-ollama-download-button'
diff --git a/utils/error.ts b/utils/error.ts
index 545e2758..fd5b45f6 100644
--- a/utils/error.ts
+++ b/utils/error.ts
@@ -1,6 +1,6 @@
-import { useGlobalI18n } from './i18n'
+import { LLMEndpointType } from './llm/models'
 
-export type ErrorCode = 'unknown' | 'requestError' | 'requestTimeout' | 'abortError' | 'timeoutError' | 'modelNotFound' | 'createTabStreamCaptureError' | 'translateError' | 'unsupportedEndpointType' | 'fetchError' | 'parseFunctionCallError' | 'aiSDKError' | 'generateObjectSchemaError'
+export type ErrorCode = 'unknown' | 'requestError' | 'requestTimeout' | 'abortError' | 'timeoutError' | 'modelNotFound' | 'createTabStreamCaptureError' | 'translateError' | 'unsupportedEndpointType' | 'fetchError' | 'parseFunctionCallError' | 'aiSDKError' | 'generateObjectSchemaError' | 'lmStudioLoadModelError' | 'lmStudioDownloadModelError'
 
 // we use a base AppError class instead of extending the native Error class directly because of Firefox compatibility issues of error instance transform in postMessage
 export abstract class AppError<Code extends ErrorCode = ErrorCode> {
@@ -18,10 +18,6 @@ export abstract class AppError<Code extends ErrorCode = ErrorCode> {
     this.message = message ?? ''
   }
 
-  async toLocaleMessage(_locale?: string): Promise<string> {
-    return this.message
-  }
-
   get stack(): string | undefined {
     return this.nativeError.stack
   }
@@ -31,42 +27,32 @@ export class FetchError extends AppError<'fetchError'> {
   constructor(message: string) {
     super('fetchError', message)
   }
-
-  async toLocaleMessage() {
-    return this.message
-  }
 }
 
 export class UnknownError extends AppError<'unknown'> {
   constructor(message: string) {
     super('unknown', message)
   }
-
-  async toLocaleMessage() {
-    const { t } = await useGlobalI18n()
-    return t('errors.unknown_error', { message: this.message })
-  }
 }
 
 export class ModelRequestError extends AppError<'requestError'> {
-  constructor(message: string) {
+  constructor(message: string, public endpointType?: LLMEndpointType) {
     super('requestError', message)
   }
-
-  async toLocaleMessage() {
-    const { t } = await useGlobalI18n()
-    return t('errors.model_request_error')
+}
+export class LMStudioLoadModelError extends AppError<'lmStudioLoadModelError'> {
+  constructor(message: string) {
+    super('lmStudioLoadModelError', message)
   }
 }
-
-export class ModelNotFoundError extends AppError<'modelNotFound'> {
-  constructor(public model?: string) {
-    super('modelNotFound')
+export class LMStudioDownloadModelError extends AppError<'lmStudioDownloadModelError'> {
+  constructor(message: string) {
+    super('lmStudioDownloadModelError', message)
   }
-
-  async toLocaleMessage() {
-    const { t } = await useGlobalI18n()
-    return t('errors.model_not_found')
+}
+export class ModelNotFoundError extends AppError<'modelNotFound'> {
+  constructor(message: string | undefined, public endpointType?: LLMEndpointType) {
+    super('modelNotFound', message)
   }
 }
 
@@ -74,51 +60,30 @@ export class ModelRequestTimeoutError extends AppError<'requestTimeout'> {
   constructor() {
     super('requestTimeout')
   }
-
-  async toLocaleMessage() {
-    const { t } = await useGlobalI18n()
-    return t('errors.model_request_timeout')
-  }
 }
 
 export class UnsupportedEndpointType extends AppError<'unsupportedEndpointType'> {
   constructor(public endpointType: string) {
     super('unsupportedEndpointType')
   }
-
-  async toLocaleMessage() {
-    return 'Unsupported endpoint type: ' + this.endpointType
-  }
 }
 
 export class AbortError extends AppError<'abortError'> {
   constructor(message: string) {
     super('abortError', message)
   }
-
-  async toLocaleMessage() {
-    return 'Request aborted: ' + this.message
-  }
 }
 
 export class CreateTabStreamCaptureError extends AppError<'createTabStreamCaptureError'> {
   constructor(message?: string) {
     super('createTabStreamCaptureError', message)
   }
-
-  async toLocaleMessage() {
-    return 'Failed to create tab stream capture'
-  }
 }
 
 export class TranslateError extends AppError<'translateError'> {
   constructor(message?: string) {
     super('translateError', message)
   }
-
-  async toLocaleMessage() {
-    return 'Translation failed: ' + this.message
-  }
 }
 
 // common timeout error for various operations
@@ -126,41 +91,24 @@ export class TimeoutError extends AppError<'timeoutError'> {
   constructor(message: string) {
     super('timeoutError', message)
   }
-
-  async toLocaleMessage() {
-    const { t } = await useGlobalI18n()
-    return t('errors.timeout_error', { message: this.message })
-  }
 }
 
 export class ParseFunctionCallError extends AppError<'parseFunctionCallError'> {
   constructor(message: string, public type?: 'toolNotFound' | 'invalidFormat', public toolName?: string) {
     super('parseFunctionCallError', message)
   }
-
-  async toLocaleMessage() {
-    return this.message
-  }
 }
 
 export class GenerateObjectSchemaError extends AppError<'generateObjectSchemaError'> {
   constructor(message: string) {
     super('generateObjectSchemaError', message)
   }
-
-  async toLocaleMessage() {
-    return this.message
-  }
 }
 
 export class AiSDKError extends AppError<'aiSDKError'> {
   constructor(message: string) {
     super('aiSDKError', message)
   }
-
-  async toLocaleMessage() {
-    return this.message
-  }
 }
 
 const errors = {
@@ -177,10 +125,15 @@ const errors = {
   parseFunctionCallError: ParseFunctionCallError,
   aiSDKError: AiSDKError,
   generateObjectSchemaError: GenerateObjectSchemaError,
+  lmStudioLoadModelError: LMStudioLoadModelError,
+  lmStudioDownloadModelError: LMStudioDownloadModelError,
 } satisfies Record<ErrorCode, typeof AppError<ErrorCode>>
 
 export function fromError(error: unknown): AppError<ErrorCode> {
   if (!AppError.isAppError(error)) {
+    if (error instanceof Error) {
+      return new UnknownError(error.message)
+    }
     return new UnknownError('An unknown error occurred')
   }
   const ctor = errors[error.code] || UnknownError
diff --git a/utils/i18n/index.ts b/utils/i18n/index.ts
index b4448fa5..24d7d5db 100644
--- a/utils/i18n/index.ts
+++ b/utils/i18n/index.ts
@@ -1,3 +1,4 @@
+import { get as getValueOfPath } from 'es-toolkit/compat'
 import { watch } from 'vue'
 import type { ComposerTranslation as OriginComposerTranslation } from 'vue-i18n'
 import { createI18n, useI18n as _useI18n } from 'vue-i18n'
@@ -26,6 +27,7 @@ import { SUPPORTED_LOCALES, SupportedLocaleCode } from './constants'
 // Type-define 'en-US' as the master schema for the resource
 type MessageSchema = typeof en
 export type TranslationKey = JsonPaths<MessageSchema>
+export type ComposerTranslation = OriginComposerTranslation<MessageSchema, SupportedLocaleCode>
 
 const messages = {
   en,
@@ -97,6 +99,7 @@ export const useI18n = only(['content', 'popup', 'sidepanel', 'settings'], () =>
     return {
       ...i18n,
       formatDuration: (seconds: number) => formatDuration(i18n.t, seconds),
+      getAllLocaleValues: (key: TranslationKey) => getAllLocaleValues(i18n, key),
     }
   }
 })
@@ -104,27 +107,25 @@ export const useI18n = only(['content', 'popup', 'sidepanel', 'settings'], () =>
 // this i18n function can be used in any context, including outside Vue components and background scripts, but it's a async function
 export async function useGlobalI18n() {
   const i18n = await createI18nInstance()
-  const composer = i18n.global as unknown as ReturnType<typeof useI18n>
+  const composer = i18n.global as unknown as ReturnType<typeof _useI18n<MessageSchema, SupportedLocaleCode>>
   return {
     ...composer,
     formatDuration: (seconds: number) => formatDuration(composer.t, seconds),
+    getAllLocaleValues: (key: TranslationKey) => getAllLocaleValues(composer, key),
   }
 }
 
-export type ComposerTranslation = OriginComposerTranslation<MessageSchema, SupportedLocaleCode>
-
-export async function getAllLocaleValues(key: string) {
-  const i18n = await createI18nInstance()
-  const result: string[] = []
+async function getAllLocaleValues(instance: ReturnType<typeof _useI18n<MessageSchema, SupportedLocaleCode>>, key: TranslationKey) {
+  const result: { locale: SupportedLocaleCode, message: string }[] = []
 
-  for (const locale of i18n.global.availableLocales) {
-    const messages = i18n.global.getLocaleMessage(locale) // Get the complete message object for this locale
-    // Support nested keys, e.g., "home.title"
-    // FIXME
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const value = key.split('.').reduce((obj, k) => obj?.[k], messages as any)
-    if (value !== undefined) {
-      result.push(value)
+  for (const locale of instance.availableLocales) {
+    const messages = instance.getLocaleMessage(locale) // Get the complete message object for this locale
+    const value = getValueOfPath(messages, key)
+    if (typeof value === 'string') {
+      result.push({
+        locale,
+        message: value,
+      })
     }
   }
 
diff --git a/utils/icon.ts b/utils/icon.ts
index 07e175fc..19da7226 100644
--- a/utils/icon.ts
+++ b/utils/icon.ts
@@ -2,13 +2,15 @@ import IconDownload from '@/assets/icons/md-download.svg?raw'
 import IconEdit from '@/assets/icons/md-edit.svg?raw'
 import IconFileSuccess from '@/assets/icons/md-file-success.svg?raw'
 import IconFind from '@/assets/icons/md-find.svg?raw'
+import IconHighlightAction from '@/assets/icons/md-highlight-action.svg?raw'
 import IconHighlightBoxed from '@/assets/icons/md-highlight-boxed.svg?raw'
 import IconLink from '@/assets/icons/md-link.svg?raw'
-import IconQuickModified from '@/assets/icons/md-quick-action-modified.svg?raw'
 import IconSearch from '@/assets/icons/md-search.svg?raw'
+import IconSearchAction from '@/assets/icons/md-search-action.svg?raw'
 import IconSearchBoxed from '@/assets/icons/md-search-boxed.svg?raw'
 import IconSearchColored from '@/assets/icons/md-search-colored.svg?raw'
 import IconStar from '@/assets/icons/md-star.svg?raw'
+import IconSummarizeAction from '@/assets/icons/md-summarize-action.svg?raw'
 import IconSummarizeBoxed from '@/assets/icons/md-summarize-boxed.svg?raw'
 import IconTick from '@/assets/icons/md-tick.svg?raw'
 import IconTickColored from '@/assets/icons/md-tick-colored.svg?raw'
@@ -17,6 +19,7 @@ import IconWarning from '@/assets/icons/md-warning.svg?raw'
 import IconWarningColored from '@/assets/icons/md-warning-colored.svg?raw'
 import IconWritingBoxed from '@/assets/icons/md-writing-boxed.svg?raw'
 import IconPdf from '@/assets/icons/pdf-icon.svg?raw'
+import IconQuickModified from '@/assets/icons/quick-action-modified.svg?raw'
 import IconTaskClickPage from '@/assets/icons/task-click-page.svg?raw'
 import IconTaskFetchPage from '@/assets/icons/task-fetch-page.svg?raw'
 import IconTaskReadFile from '@/assets/icons/task-read-file.svg?raw'
@@ -39,6 +42,9 @@ export const iconMap = {
   translationBoxed: IconTranslationBoxed,
   writingBoxed: IconWritingBoxed,
   highlightBoxed: IconHighlightBoxed,
+  summarizeAction: IconSummarizeAction,
+  highlightAction: IconHighlightAction,
+  searchAction: IconSearchAction,
   edit: IconEdit,
   quickActionModifiedBoxed: IconQuickModified,
   searchBoxed: IconSearchBoxed,
diff --git a/utils/llm/lm-studio.ts b/utils/llm/lm-studio.ts
new file mode 100644
index 00000000..c215473b
--- /dev/null
+++ b/utils/llm/lm-studio.ts
@@ -0,0 +1,139 @@
+import { DownloadProgressUpdate, LLM, LLMLoadModelConfig, LMStudioClient, ModelSearchResultDownloadOption } from '@lmstudio/sdk'
+
+import Logger from '@/utils/logger'
+
+import { toAsyncIter } from '../async'
+import { LMStudioDownloadModelError, LMStudioLoadModelError } from '../error'
+import { memoFunction } from '../memo'
+import { getUserConfig } from '../user-config'
+
+const logger = Logger.child('lm-studio')
+
+const cachedGetLMStudioClient = memoFunction((baseUrl: string) => {
+  const baseUrlObj = new URL(baseUrl)
+  baseUrlObj.pathname = ''
+  baseUrlObj.protocol = 'ws'
+  const lmStudio = new LMStudioClient({ baseUrl: baseUrlObj.origin })
+  return lmStudio
+})
+
+async function getLMStudioClient() {
+  const userConfig = await getUserConfig()
+  const baseUrl = userConfig.llm.backends.lmStudio.baseUrl.get()
+  return cachedGetLMStudioClient(baseUrl)
+}
+
+export async function getLocalModelList() {
+  try {
+    const lmStudio = await getLMStudioClient()
+    const models = await lmStudio.system.listDownloadedModels()
+    return { models: models.filter((m) => m.type === 'llm') }
+  }
+  catch (error) {
+    logger.error('Error fetching local model list:', error)
+    return {
+      models: [],
+      error: 'Failed to fetch local model list',
+    }
+  }
+}
+
+export async function getRunningModelList() {
+  try {
+    const lmStudio = await getLMStudioClient()
+    const models = await lmStudio.llm.listLoaded()
+    const modelInstanceInfo = await Promise.all(models.map((m) => m.getModelInfo()))
+    return { models: modelInstanceInfo }
+  }
+  catch (error) {
+    logger.error('Error fetching running model list:', error)
+    return {
+      models: [],
+      error: 'Failed to fetch running model list',
+    }
+  }
+}
+
+async function rawLoadModel(modelId: string, config?: LLMLoadModelConfig) {
+  try {
+    const lmStudio = await getLMStudioClient()
+    const models = await lmStudio.llm.listLoaded()
+    let existing
+    for (const m of models) {
+      if (m.modelKey === modelId) {
+        const info = await m.getModelInfo()
+        if (info.contextLength === config?.contextLength || !config?.contextLength) {
+          existing = m
+          break
+        }
+      }
+    }
+    const model = existing ?? await lmStudio.llm.load(modelId, { config })
+    return { model, client: lmStudio }
+  }
+  catch (error) {
+    logger.error('Error loading model:', error)
+    throw new LMStudioLoadModelError(String(error))
+  }
+}
+
+let loadingPromise: Promise<{ model: LLM, client: LMStudioClient }> | undefined
+export async function loadModel(modelId: string, config?: LLMLoadModelConfig) {
+  if (loadingPromise) return loadingPromise
+  loadingPromise = rawLoadModel(modelId, config)
+  return loadingPromise.finally(() => loadingPromise = undefined)
+}
+
+export async function getModelInfo(modelId: string) {
+  const { models } = await getLocalModelList()
+  return models.find((m) => m.modelKey === modelId)
+}
+
+export async function unloadModel(identifier: string) {
+  const lmStudio = await getLMStudioClient()
+  await lmStudio.llm.unload(identifier)
+}
+
+export async function pullModel(options: { modelName: string, abortSignal?: AbortSignal, onProgress?: (progress: DownloadProgressUpdate) => void }) {
+  return toAsyncIter<DownloadProgressUpdate>(async (yieldData, done) => {
+    try {
+      const lmStudio = await getLMStudioClient()
+      const { modelName, abortSignal } = options
+      const models = await lmStudio.repository.searchModels({ searchTerm: modelName, limit: 20 })
+      let modelToDownload: ModelSearchResultDownloadOption | undefined
+      for (const model of models) {
+        const downloadOptions = await model.getDownloadOptions()
+        const recommendedModel = downloadOptions.find((opt) => opt.isRecommended())
+        if (recommendedModel) {
+          modelToDownload = recommendedModel
+          break
+        }
+      }
+      if (!modelToDownload) {
+        throw new LMStudioDownloadModelError(`Model "${modelName}" not found in LM Studio model repository for your device, please download it manually in LM Studio.`)
+      }
+      await modelToDownload.download({
+        signal: abortSignal,
+        onProgress: (progress) => {
+          yieldData(progress)
+        },
+      })
+      done()
+    }
+    catch (error) {
+      done(error)
+    }
+  })
+}
+
+export async function testConnection(): Promise<boolean> {
+  try {
+    const lmStudio = await getLMStudioClient()
+    const _ = await lmStudio.system.getLMStudioVersion()
+    return true
+  }
+  catch (error) {
+    logger.error('Error testing LM Studio connection:', error)
+    return false
+  }
+}
diff --git a/utils/llm/middlewares.test.ts b/utils/llm/middlewares.test.ts
new file mode 100644
index 00000000..7ddea057
--- /dev/null
+++ b/utils/llm/middlewares.test.ts
@@ -0,0 +1,116 @@
+import { LanguageModelV1, LanguageModelV1CallOptions, LanguageModelV1StreamPart } from 'ai'
+import { describe, expect, it } from 'vitest'
+
+import { lmStudioHarmonyEncodingMiddleware } from './middlewares'
+
+describe('llm middlewares', () => {
+  const fakeResponse = (input: string) => {
+    const splitWithSpecialTokens = (str: string) => {
+      return str.match(/<\|[^|]*\|>|./g) || []
+    }
+
+    return {
+      params: {} as LanguageModelV1CallOptions,
+      model: {} as LanguageModelV1,
+      doGenerate(): ReturnType<LanguageModelV1['doGenerate']> {
+        return Promise.resolve({
+          text: input,
+          finishReason: 'stop',
+          usage: { promptTokens: 0, completionTokens: 0 },
+          rawCall: { rawPrompt: '', rawSettings: {} },
+          rawResponse: {},
+          warnings: [],
+        })
+      },
+      doStream(): ReturnType<LanguageModelV1['doStream']> {
+        const chunks = splitWithSpecialTokens(input)
+        const stream = new ReadableStream<LanguageModelV1StreamPart>({
+          start(controller) {
+            for (const chunk of chunks) {
+              controller.enqueue({
+                type: 'text-delta',
+                textDelta: chunk,
+              })
+            }
+            controller.enqueue({
+              type: 'finish',
+              finishReason: 'stop',
+              usage: { promptTokens: 0, completionTokens: 0 },
+            })
+            controller.close()
+          },
+        })
+
+        return Promise.resolve({
+          stream,
+          finishReason: 'stop',
+          rawCall: { rawPrompt: '', rawSettings: {} },
+        })
+      },
+    }
+  }
+
+  const readStream = async (stream: ReadableStream<LanguageModelV1StreamPart>) => {
+    const reader = stream.getReader()
+    let content = ''
+    let reasoning = ''
+    const toolCalls: Array<{ name: string, arguments: string }> = []
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      if (value.type === 'text-delta') {
+        content += value.textDelta
+      }
+      else if (value.type === 'reasoning') {
+        reasoning += value.textDelta
+      }
+      else if (value.type === 'tool-call') {
+        toolCalls.push({ name: value.toolName, arguments: value.args })
+      }
+    }
+    return { content, reasoning, toolCalls }
+  }
+
+  it('should parse lm-studio gpt-oss harmony response', async () => {
+    const r = await lmStudioHarmonyEncodingMiddleware.wrapStream!(fakeResponse(
+      `<|channel|>commentary<|constrain|>response<|message|>Here is the final response.`,
+    ))
+    const { content } = await readStream(r.stream)
+    expect(content).toBe('Here is the final response.')
+  })
+
+  it('should parse lm-studio gpt-oss harmony function call', async () => {
+    const r = await lmStudioHarmonyEncodingMiddleware.wrapStream!(fakeResponse(
+      `Hello<|channel|>commentary to=view_tab<|constrain|>json<|message|>{"tab_id": "123"}`,
+    ))
+    const { content, toolCalls } = await readStream(r.stream)
+    expect(content).toBe('Hello')
+    expect(toolCalls).toEqual([{ name: 'view_tab', arguments: '{"tab_id": "123"}' }])
+  })
+
+  it('should parse lm-studio gpt-oss harmony function call (2)', async () => {
+    const r = await lmStudioHarmonyEncodingMiddleware.wrapStream!(fakeResponse(
+      `Let me click on the first model listed to see what additional information and related resources are available.<|channel|>commentary to=click>{"element_id":"14"}`,
+    ))
+    const { content, toolCalls } = await readStream(r.stream)
+    expect(content).toBe('Let me click on the first model listed to see what additional information and related resources are available.')
+    expect(toolCalls).toEqual([{ name: 'click', arguments: '{"element_id":"14"}' }])
+  })
+
+  it('should parse lm-studio gpt-oss harmony function call (3)', async () => {
+    const r = await lmStudioHarmonyEncodingMiddleware.wrapStream!(fakeResponse(
+      `Hello<|channel|>commentary to=tool_calls <|constrain|>json<|message|>{"name":"view_tab","arguments":{"tab_id":"we0sttv9j0"}} world.`,
+    ))
+    const { content, toolCalls } = await readStream(r.stream)
+    expect(content).toBe('Hello world.')
+    expect(toolCalls).toEqual([{ name: 'tool_calls', arguments: '{"name":"view_tab","arguments":{"tab_id":"we0sttv9j0"}}' }])
+  })
+
+  it('should parse lm-studio gpt-oss harmony json object (1)', async () => {
+    const r = await lmStudioHarmonyEncodingMiddleware.wrapStream!(fakeResponse(
+      `<|channel|>commentary<|constrain|>json<|message|>{"some": "json", "with": {"nested": "values"}}`,
+    ))
+    const { content } = await readStream(r.stream)
+    expect(content).toBe('{"some": "json", "with": {"nested": "values"}}')
+  })
+})
diff --git a/utils/llm/middlewares.ts b/utils/llm/middlewares.ts
index 54a70f36..052cb0b3 100644
--- a/utils/llm/middlewares.ts
+++ b/utils/llm/middlewares.ts
@@ -5,7 +5,6 @@ import { extractReasoningMiddleware } from 'ai'
 import { z } from 'zod'
 
 import { nonNullable } from '../array'
-import { debounce } from '../debounce'
 import { ParseFunctionCallError } from '../error'
 import { generateRandomId } from '../id'
 import Logger from '../logger'
@@ -98,7 +97,7 @@ function normalizeToolCall<T extends LanguageModelV1FunctionToolCall>(toolCall:
   // sometimes gpt-oss return tool named xxx.toolName, we should normalize it to toolName
     return toolName.split('.').pop()!
   }
-  if (toolCall.toolName === 'tool_calls' && toolCall.args) {
+  if ((toolCall.toolName === 'tool_calls' || toolCall.toolName === 'tool_result' || toolCall.toolName === 'tool_results') && toolCall.args) {
     // 1. {name: 'tool_calls', arguments: { name: <toolName>, arguments: { a: 1 } }}
     const newToolCall = safeParseJSON({ text: toolCall.args, schema: z.object({ name: z.string(), arguments: z.any() }) })
     if (newToolCall.success) {
@@ -190,14 +189,150 @@ export const normalizeToolCallsMiddleware: LanguageModelV1Middleware = {
 export const rawLoggingMiddleware: LanguageModelV1Middleware = {
   wrapStream: async ({ doStream, params }) => {
     const log = logger.child('rawLoggingMiddleware')
+    const text: string[] = []
+    const reasoning: string[] = []
+
+    const { stream, ...rest } = await doStream()
+
+    const transformStream = new TransformStream<
+      LanguageModelV1StreamPart,
+      LanguageModelV1StreamPart
+    >({
+      transform(chunk, controller) {
+        if (chunk.type === 'text-delta') {
+          text.push(chunk.textDelta)
+        }
+        else if (chunk.type === 'reasoning') {
+          reasoning.push(chunk.textDelta)
+        }
+        controller.enqueue(chunk)
+      },
+      flush() {
+        log.info('LLM Stream Result', {
+          params,
+          text: text.join(''),
+          reasoning: reasoning.join(''),
+        })
+      },
+    })
+
+    return {
+      stream: stream.pipeThrough(transformStream),
+      ...rest,
+    }
+  },
+  wrapGenerate: async ({ doGenerate, params }) => {
+    const log = logger.child('rawLoggingMiddleware')
+
+    const result = await doGenerate()
+
+    log.info('LLM Generate Result', {
+      params,
+      result,
+    })
+
+    return result
+  },
+}
+
+const errorResponse = /<\|channel\|>(?!\s*commentary\s+to=[a-z_.]+\s*>)[^<]+>(<\/assistant)?/gs
+const extractHarmonyResponse = /<\|channel\|>commentary\s*?<\|constrain\|>\s*(?!json\b)(.*?)<\|message\|>/s
+const extractHarmonyFunctionCall = /<\|channel\|>commentary(.+)?to=([a-z_.]+).+?\{/s
+const extractHarmonyJSONObject = /<\|channel\|>(.+)?<\|constrain\|>json<\|message\|>\{/s
+
+function sliceBalancedJson(str: string, startIdx: number) {
+  let i = startIdx
+  let depth = 0
+  let inString = false
+  let escape = false
+
+  for (; i < str.length; i++) {
+    const ch = str[i]
+
+    if (inString) {
+      if (escape) {
+        escape = false
+      }
+      else if (ch === '\\') {
+        escape = true
+      }
+      else if (ch === '"') {
+        inString = false
+      }
+      continue
+    }
+
+    // 不在字符串里
+    if (ch === '"') {
+      inString = true
+    }
+    else if (ch === '{') {
+      depth++
+    }
+    else if (ch === '}') {
+      depth--
+      if (depth === 0) {
+        return str.slice(startIdx, i + 1)
+      }
+    }
+  }
+  return null
+}
+
+export const lmStudioHarmonyEncodingMiddleware: LanguageModelV1Middleware = {
+  wrapGenerate: async ({ doGenerate }) => {
+    const log = logger.child('lmStudioHarmonyParserMiddleware')
+
+    const result = await doGenerate()
+
+    const originalText = result.text ?? ''
+    result.text = originalText?.replace(extractHarmonyResponse, '').replace(errorResponse, '')
+
+    const matchedFunctionCall = result.text?.match(extractHarmonyFunctionCall)
+
+    if (matchedFunctionCall) {
+      const matchStartIdx = matchedFunctionCall.index!
+      const jsonStartIdx = matchStartIdx + matchedFunctionCall[0].lastIndexOf('{')
+      const balancedJson = sliceBalancedJson(originalText, jsonStartIdx)
+      const jsonEndIdx = balancedJson ? (jsonStartIdx + balancedJson.length) : jsonStartIdx
+      if (balancedJson) {
+        result.text = originalText.slice(0, matchStartIdx) + originalText.slice(jsonEndIdx)
+        const [_, _1, functionName, parameters] = matchedFunctionCall
+        result.toolCalls = result.toolCalls ?? []
+        result.toolCalls.push({
+          toolCallId: generateRandomId(),
+          toolCallType: 'function',
+          toolName: functionName.trim(),
+          args: balancedJson.trim(),
+        })
+        log.debug('Harmony function call extracted', { functionName, parameters })
+      }
+    }
+    else {
+      const matchedJSONObject = result.text?.match(extractHarmonyJSONObject)
+      if (matchedJSONObject) {
+        const matchStartIdx = matchedJSONObject.index!
+        const jsonStartIdx = matchStartIdx + matchedJSONObject[0].lastIndexOf('{')
+        const balancedJson = sliceBalancedJson(originalText, jsonStartIdx)
+        const jsonEndIdx = balancedJson ? (jsonStartIdx + balancedJson.length) : jsonStartIdx
+        const [_raw, _channelName] = matchedJSONObject
+        result.text = originalText.slice(0, matchStartIdx) + originalText.slice(jsonEndIdx)
+        log.debug('Harmony json object extracted', { originalText, text: result.text })
+      }
+    }
+
+    return result
+  },
+  wrapStream: async ({ doStream, params }) => {
+    const log = logger.child('lmStudioHarmonyParserMiddleware')
 
     const { stream, ...rest } = await doStream()
 
     log.debug('Stream started', { params })
-    let text = ''
-    const printLog = debounce(() => {
-      log.debug('Stream progress', { text })
-    }, 2000)
+
+    let channelStarted = false
+    let channelContent = ''
+    const TOKEN_CHANNEL = '<|channel|>'
 
     const transformStream = new TransformStream<
       LanguageModelV1StreamPart,
@@ -205,10 +340,104 @@ export const rawLoggingMiddleware: LanguageModelV1Middleware = {
     >({
       transform(chunk, controller) {
         if (chunk.type === 'text-delta') {
-          text += chunk.textDelta
+          if (!channelStarted && chunk.textDelta.trim().startsWith(TOKEN_CHANNEL)) {
+            channelStarted = true
+          }
+          if (channelStarted) {
+            channelContent += chunk.textDelta
+            const matchedResponse = channelContent.match(extractHarmonyResponse)
+            if (matchedResponse) {
+              const restContent = channelContent.replace(extractHarmonyResponse, '')
+              log.debug('extract response or error from harmony response', { channelContent, restContent })
+              if (restContent.trim().startsWith(TOKEN_CHANNEL)) {
+                channelContent = restContent
+                channelStarted = true
+              }
+              else {
+                controller.enqueue({
+                  type: 'text-delta',
+                  textDelta: restContent,
+                })
+                channelStarted = false
+                channelContent = ''
+              }
+            }
+            if (channelStarted) {
+              const matchedFunctionCall = channelContent.match(extractHarmonyFunctionCall)
+              if (matchedFunctionCall) {
+                const matchStartIdx = matchedFunctionCall.index!
+                const jsonStartIdx = matchStartIdx + matchedFunctionCall[0].lastIndexOf('{')
+                const balancedJson = sliceBalancedJson(channelContent, jsonStartIdx)
+                const jsonEndIdx = balancedJson ? (jsonStartIdx + balancedJson.length) : jsonStartIdx
+                if (balancedJson) {
+                  const [_, _1, functionName] = matchedFunctionCall
+                  controller.enqueue({
+                    type: 'tool-call',
+                    toolCallId: generateRandomId(),
+                    toolCallType: 'function',
+                    toolName: functionName.trim(),
+                    args: balancedJson.trim(),
+                  })
+                  const restContent = channelContent.slice(0, matchStartIdx) + channelContent.slice(jsonEndIdx)
+                  if (restContent) {
+                    controller.enqueue({
+                      type: 'text-delta',
+                      textDelta: restContent,
+                    })
+                  }
+                  log.debug('extract function call from harmony response', { channelContent, functionName, parameters: balancedJson, restContent })
+                  channelStarted = false
+                  channelContent = ''
+                }
+              }
+              else {
+                const matchedJSONObject = channelContent.match(extractHarmonyJSONObject)
+                if (matchedJSONObject) {
+                  const matchStartIdx = matchedJSONObject.index!
+                  const jsonStartIdx = matchStartIdx + matchedJSONObject[0].lastIndexOf('{')
+                  const balancedJson = sliceBalancedJson(channelContent, jsonStartIdx)
+                  const jsonEndIdx = balancedJson ? (jsonStartIdx + balancedJson.length) : jsonStartIdx
+                  const [_raw, _channelName] = matchedJSONObject
+                  if (balancedJson) {
+                    controller.enqueue({
+                      type: 'text-delta',
+                      textDelta: balancedJson,
+                    })
+                    const restContent = channelContent.slice(0, matchStartIdx) + channelContent.slice(jsonEndIdx)
+                    if (restContent) {
+                      controller.enqueue({
+                        type: 'text-delta',
+                        textDelta: restContent,
+                      })
+                    }
+                    log.debug('extract json object from harmony response', { channelContent, balancedJson, restContent })
+                  }
+                }
+                else {
+                  const matchedError = channelContent.match(errorResponse)
+                  if (matchedError) {
+                    const restContent = channelContent.replace(errorResponse, '')
+                    if (restContent) {
+                      controller.enqueue({
+                        type: 'text-delta',
+                        textDelta: restContent,
+                      })
+                    }
+                    log.debug('extract error from harmony response', { channelContent, restContent })
+                    channelStarted = false
+                    channelContent = ''
+                  }
+                }
+              }
+            }
+          }
+          else {
+            controller.enqueue(chunk)
+          }
+        }
+        else {
+          controller.enqueue(chunk)
         }
-        printLog()
-        controller.enqueue(chunk)
       },
     })
 
@@ -222,6 +451,7 @@ export const rawLoggingMiddleware: LanguageModelV1Middleware = {
 export const middlewares = [
   normalizeToolCallsMiddleware,
   extractPromptBasedToolCallsMiddleware,
+  lmStudioHarmonyEncodingMiddleware,
   reasoningMiddleware,
-  // rawLoggingMiddleware,
+  rawLoggingMiddleware,
 ]
diff --git a/utils/llm/models.ts b/utils/llm/models.ts
index 91716d9b..f8f0d9cb 100644
--- a/utils/llm/models.ts
+++ b/utils/llm/models.ts
@@ -4,8 +4,10 @@ import { getUserConfig } from '@/utils/user-config'
 
 import { ModelNotFoundError } from '../error'
 import { makeCustomFetch } from '../fetch'
+import { loadModel as loadLMStudioModel } from './lm-studio'
 import { middlewares } from './middlewares'
 import { checkModelSupportThinking } from './ollama'
+import { LMStudioChatLanguageModel } from './providers/lm-studio/chat-language-model'
 import { createOllama } from './providers/ollama'
 import { WebLLMChatLanguageModel } from './providers/web-llm/openai-compatible-chat-language-model'
 import { isToggleableThinkingModel } from './thinking-models'
@@ -14,13 +16,14 @@ import { getWebLLMEngine, WebLLMSupportedModel } from './web-llm'
 export async function getModelUserConfig() {
   const userConfig = await getUserConfig()
   const model = userConfig.llm.model.get()
-  const baseUrl = userConfig.llm.baseUrl.get()
+  const endpointType = userConfig.llm.endpointType.get()
+  const baseUrl = userConfig.llm.backends[endpointType === 'lm-studio' ? 'lmStudio' : 'ollama'].baseUrl.get()
   const apiKey = userConfig.llm.apiKey.get()
-  const numCtx = userConfig.llm.numCtx.get()
-  const enableNumCtx = userConfig.llm.enableNumCtx.get()
+  const numCtx = userConfig.llm.backends[endpointType === 'lm-studio' ? 'lmStudio' : 'ollama'].numCtx.get()
+  const enableNumCtx = userConfig.llm.backends[endpointType === 'lm-studio' ? 'lmStudio' : 'ollama'].enableNumCtx.get()
   const reasoning = userConfig.llm.reasoning.get()
   if (!model) {
-    throw new ModelNotFoundError()
+    throw new ModelNotFoundError(undefined, endpointType)
   }
   return {
     baseUrl,
@@ -29,6 +32,7 @@ export async function getModelUserConfig() {
     numCtx,
     enableNumCtx,
     reasoning,
+    endpointType,
   }
 }
 
@@ -42,18 +46,18 @@ export async function getModel(options: {
   enableNumCtx: boolean
   reasoning: boolean
   autoThinking?: boolean
+  endpointType: LLMEndpointType
   onLoadingModel?: (prg: ModelLoadingProgressEvent) => void
 }) {
-  const userConfig = await getUserConfig()
+  const endpointType = options.endpointType
   let model: LanguageModelV1
-  const endpointType = userConfig.llm.endpointType.get()
   if (endpointType === 'ollama') {
     // Models have different thinking capabilities
     // Edge Case: Qwen3 Instruct does not support think argument even it is toggleable
     // add additional check to avoid api error
     const currentModel = options.model
     const supportsThinking = await checkModelSupportThinking(currentModel)
-    const supportsToggleThinking = isToggleableThinkingModel(currentModel)
+    const supportsToggleThinking = isToggleableThinkingModel(endpointType, currentModel)
     const customFetch = makeCustomFetch({
       bodyTransformer: (body) => {
         // process thinking capability by ollama itself, using on translation feature
@@ -76,6 +80,10 @@ export async function getModel(options: {
       structuredOutputs: true,
     })
   }
+  else if (endpointType === 'lm-studio') {
+    const lmStudioClientModel = await loadLMStudioModel(options.model, { contextLength: options.enableNumCtx ? options.numCtx : undefined })
+    model = new LMStudioChatLanguageModel(lmStudioClientModel.client, lmStudioClientModel.model)
+  }
   else if (endpointType === 'web-llm') {
     const engine = await getWebLLMEngine({
       model: options.model as WebLLMSupportedModel,
@@ -97,7 +105,7 @@ export async function getModel(options: {
   }
   return wrapLanguageModel({
     model,
-    middleware: middlewares,
+    middleware: middlewares.slice(),
   })
 }
 
diff --git a/utils/llm/ollama.ts b/utils/llm/ollama.ts
index f9eeb490..4631f49f 100644
--- a/utils/llm/ollama.ts
+++ b/utils/llm/ollama.ts
@@ -7,7 +7,7 @@ import { getUserConfig } from '../user-config'
 
 async function getOllamaClient() {
   const userConfig = await getUserConfig()
-  const baseUrl = userConfig.llm.baseUrl.get()
+  const baseUrl = userConfig.llm.backends.ollama.baseUrl.get()
   const origin = new URL(baseUrl).origin
   const ollama = new Ollama({ host: origin })
   return ollama
@@ -110,6 +110,22 @@ export async function showModelDetails(modelId: string) {
   }
 }
 
+export async function testConnection() {
+  const userConfig = await getUserConfig()
+  try {
+    const baseUrl = userConfig.llm.backends.ollama.baseUrl.get()
+    const origin = new URL(baseUrl).origin
+    const response = await fetch(origin)
+    if (!response.ok) return false
+    const text = await response.text()
+    if (text.includes('Ollama is running')) return true
+    else return false
+  }
+  catch (error: unknown) {
+    logger.error('error connecting to ollama api', error)
+    return false
+  }
+}
 export async function checkModelSupportThinking(modelId: string): Promise<boolean> {
   try {
     const modelDetails = await showModelDetails(modelId)
diff --git a/utils/llm/predefined-models.ts b/utils/llm/predefined-models.ts
index 5a123d29..6e7d54df 100644
--- a/utils/llm/predefined-models.ts
+++ b/utils/llm/predefined-models.ts
@@ -1,7 +1,7 @@
 export type PredefinedOllamaModel = {
   name: string
   id: string
-  size: number
+  size?: number
   description?: string
   url?: string
   tags?: string[]
@@ -71,3 +71,50 @@ export const PREDEFINED_OLLAMA_MODELS: PredefinedOllamaModel[] = [
     size: 12.83 * GB,
   },
 ]
+
+export const PREDEFINED_LM_STUDIO_MODELS: PredefinedOllamaModel[] = [
+  {
+    name: 'DeepSeek-R1 8B',
+    id: 'lmstudio-community/DeepSeek-R1-0528-Qwen3-8B',
+  },
+  {
+    name: 'DeepSeek-R1 14B',
+    id: 'lmstudio-community/DeepSeek-R1-Distill-Qwen-14B',
+  },
+  {
+    name: 'Qwen3 4B',
+    id: 'lmstudio-community/Qwen3-4B',
+  },
+  {
+    name: 'Qwen3 8B',
+    id: 'lmstudio-community/Qwen3-8B',
+  },
+  {
+    name: 'Qwen3 14B',
+    id: 'lmstudio-community/Qwen3-14B',
+  },
+  {
+    name: 'Llama3.2 3B',
+    id: 'lmstudio-community/Llama-3.2-3B',
+  },
+  {
+    name: 'Gemma3 4B',
+    id: 'lmstudio-community/Gemma-3-4B',
+  },
+  {
+    name: 'Gemma3 12B',
+    id: 'lmstudio-community/Gemma-3-12B',
+  },
+  {
+    name: 'Phi4-mini',
+    id: 'lmstudio-community/Phi-4-mini-reasoning',
+  },
+  {
+    name: 'Phi4',
+    id: 'lmstudio-community/Phi-4-reasoning',
+  },
+  {
+    name: 'gpt-oss 20B',
+    id: 'lmstudio-community/gpt-oss-20b',
+  },
+]
diff --git a/utils/llm/providers/lm-studio/chat-language-model.ts b/utils/llm/providers/lm-studio/chat-language-model.ts
new file mode 100644
index 00000000..d437ff9c
--- /dev/null
+++ b/utils/llm/providers/lm-studio/chat-language-model.ts
@@ -0,0 +1,206 @@
+import {
+  LanguageModelV1,
+  LanguageModelV1CallWarning,
+  LanguageModelV1ObjectGenerationMode,
+  LanguageModelV1StreamPart,
+} from '@ai-sdk/provider'
+import { LLM, LLMPredictionFragment, LMStudioClient, PredictionResult } from '@lmstudio/sdk'
+
+import { logger } from '@/utils/logger'
+
+import { convertToLMStudioMessages } from './convert-to-lm-studio-messages'
+import { mapStopReason } from './map-stop-reason'
+
+const log = logger.child('Agent').child('lm-studio-model-provider')
+
+export type OpenAICompatibleChatConfig = {
+  provider: string
+  includeUsage?: boolean
+
+  /**
+Default object generation mode that should be used with this model when
+no mode is specified. Should be the mode with the best results for this
+model. `undefined` can be specified if object generation is not supported.
+  */
+  defaultObjectGenerationMode?: LanguageModelV1ObjectGenerationMode
+
+  /**
+   * Whether the model supports structured outputs.
+   */
+  supportsStructuredOutputs?: boolean
+}
+
+export class LMStudioChatLanguageModel implements LanguageModelV1 {
+  readonly specificationVersion = 'v1'
+
+  private readonly model: LLM
+  readonly modelId: string
+  readonly provider = 'lm-studio'
+  readonly client: LMStudioClient
+
+  constructor(client: LMStudioClient, model: LLM) {
+    this.model = model
+    this.modelId = model.modelKey
+    this.client = client
+  }
+
+  get defaultObjectGenerationMode(): 'json' | 'tool' | undefined {
+    return 'json'
+  }
+
+  private async getArgs({
+    mode,
+    prompt,
+    maxTokens,
+    temperature,
+    topP,
+    topK,
+    frequencyPenalty,
+    presencePenalty,
+    stopSequences,
+    seed,
+    abortSignal,
+  }: Parameters<LanguageModelV1['doGenerate']>[0]) {
+    const warnings: LanguageModelV1CallWarning[] = []
+
+    if (mode?.type === 'object-tool') {
+      warnings.push({
+        type: 'unsupported-setting',
+        setting: 'responseFormat',
+        details: 'object-tool mode is not supported by LM Studio models, using object-json mode instead',
+      })
+    }
+
+    const baseArgs = {
+      signal: abortSignal,
+      // standardized settings:
+      maxTokens,
+      temperature,
+      topP,
+      topK,
+      frequencyPenalty,
+      presencePenalty,
+      structured:
+        mode?.type === 'object-json'
+          ? {
+              type: 'json' as const,
+              jsonSchema: mode.schema,
+            }
+          : undefined,
+
+      stop: stopSequences,
+      seed,
+      // messages:
+      messages: await convertToLMStudioMessages(this.client, prompt),
+    }
+
+    return {
+      args: { ...baseArgs },
+      warnings,
+    }
+  }
+
+  async doGenerate(options: Parameters<LanguageModelV1['doGenerate']>[0]): Promise<Awaited<ReturnType<LanguageModelV1['doGenerate']>>> {
+    const { args, warnings } = await this.getArgs({ ...options })
+
+    const body = args
+
+    log.debug('doGenerate called', { args, options })
+
+    const responseBody = await this.model.respond(args.messages, {
+      signal: body.signal,
+      maxTokens: body.maxTokens,
+      topPSampling: body.topP,
+      topKSampling: body.topK,
+      temperature: body.temperature,
+      stopStrings: body.stop,
+      contextOverflowPolicy: 'truncateMiddle',
+      structured: body.structured,
+    })
+
+    const { messages: rawPrompt, ...rawSettings } = args
+
+    return {
+      text: responseBody.nonReasoningContent,
+      reasoning: responseBody.reasoningContent,
+      finishReason: mapStopReason(responseBody.stats.stopReason),
+      usage: {
+        promptTokens: responseBody.stats.promptTokensCount ?? Number.NaN,
+        completionTokens: responseBody.stats.predictedTokensCount ?? Number.NaN,
+      },
+      rawCall: { rawPrompt, rawSettings },
+      rawResponse: {},
+      warnings,
+    }
+  }
+
+  async doStream(options: Parameters<LanguageModelV1['doStream']>[0]): Promise<Awaited<ReturnType<LanguageModelV1['doStream']>>> {
+    const { args, warnings } = await this.getArgs({ ...options })
+
+    const body = args
+    log.debug('doStream called', { args, options })
+    const resp = this.model.respond(args.messages, {
+      signal: body.signal,
+      maxTokens: body.maxTokens,
+      topPSampling: body.topP,
+      topKSampling: body.topK,
+      temperature: body.temperature,
+      stopStrings: body.stop,
+      contextOverflowPolicy: 'truncateMiddle',
+      structured: body.structured,
+    })
+
+    const { messages: rawPrompt, ...rawSettings } = args
+
+    const readable = new ReadableStream<{ type: 'chunk', data: LLMPredictionFragment } | { type: 'result', data: PredictionResult }>({
+      async start(controller) {
+        for await (const chunk of resp) {
+          controller.enqueue({ type: 'chunk', data: chunk })
+        }
+        const result = await resp
+        log.debug('stream finished', { result })
+        controller.enqueue({ type: 'result', data: result })
+        controller.close()
+      },
+    })
+
+    return {
+      stream: readable.pipeThrough(
+        new TransformStream<{ type: 'chunk', data: LLMPredictionFragment } | { type: 'result', data: PredictionResult }, LanguageModelV1StreamPart>({
+          transform(chunk, controller) {
+            if (chunk.type === 'result') {
+              controller.enqueue({
+                type: 'finish',
+                finishReason: mapStopReason(chunk.data.stats.stopReason),
+                usage: {
+                  promptTokens: chunk.data.stats.promptTokensCount ?? NaN,
+                  completionTokens: chunk.data.stats.predictedTokensCount ?? NaN,
+                },
+              })
+            }
+            else {
+              const delta = chunk.data
+
+              if (delta.reasoningType === 'reasoning') {
+                controller.enqueue({
+                  type: 'reasoning',
+                  textDelta: delta.content,
+                })
+              }
+              else if (delta.reasoningType === 'none' && !delta.isStructural) {
+                controller.enqueue({
+                  type: 'text-delta',
+                  textDelta: delta.content,
+                })
+              }
+            }
+          },
+        }),
+      ),
+      rawCall: { rawPrompt, rawSettings },
+      rawResponse: {},
+      warnings,
+      request: { body: JSON.stringify(body) },
+    }
+  }
+}
diff --git a/utils/llm/providers/lm-studio/chat-settings.ts b/utils/llm/providers/lm-studio/chat-settings.ts
new file mode 100644
index 00000000..9ade4f24
--- /dev/null
+++ b/utils/llm/providers/lm-studio/chat-settings.ts
@@ -0,0 +1,18 @@
+export type OpenAICompatibleChatModelId = string
+
+export interface OpenAICompatibleChatSettings {
+  /**
+A unique identifier representing your end-user, which can help the provider to
+monitor and detect abuse.
+  */
+  user?: string
+
+  /**
+Simulates streaming by using a normal generate call and returning it as a stream.
+Enable this if the model that you are using does not support streaming.
+
+Defaults to `false`.
+@deprecated Use `simulateStreamingMiddleware` instead.
+   */
+  simulateStreaming?: boolean
+}
diff --git a/utils/llm/providers/lm-studio/convert-to-lm-studio-messages.ts b/utils/llm/providers/lm-studio/convert-to-lm-studio-messages.ts
new file mode 100644
index 00000000..841a4d4d
--- /dev/null
+++ b/utils/llm/providers/lm-studio/convert-to-lm-studio-messages.ts
@@ -0,0 +1,59 @@
+import { LanguageModelV1Prompt, UnsupportedFunctionalityError } from '@ai-sdk/provider'
+import { convertUint8ArrayToBase64 } from '@ai-sdk/provider-utils'
+import { ChatMessageInput, LMStudioClient } from '@lmstudio/sdk'
+
+export async function convertToLMStudioMessages(client: LMStudioClient, prompt: LanguageModelV1Prompt): Promise<ChatMessageInput[]> {
+  const messages: ChatMessageInput[] = []
+  for (const { role, content } of prompt) {
+    switch (role) {
+      case 'system': {
+        messages.push({ role: 'system', content })
+        break
+      }
+
+      case 'user': {
+        if (content.length === 1 && content[0].type === 'text') {
+          messages.push({ role: 'user', content: content[0].text })
+          break
+        }
+
+        const images = await Promise.all(content.filter((part) => part.type === 'image').map(async (part) => {
+          if (part.image instanceof URL) {
+            throw new UnsupportedFunctionalityError({
+              functionality: 'Image URLs in user messages',
+            })
+          }
+          return await client.files.prepareImageBase64('image.png', convertUint8ArrayToBase64(part.image))
+        }))
+
+        messages.push({
+          role: 'user',
+          content: content.filter((part) => part.type === 'text').map((part) => part.text).join(''),
+          images: images.length > 0 ? images : undefined,
+        })
+
+        break
+      }
+
+      case 'assistant': {
+        messages.push({
+          role: 'assistant',
+          content: content.filter((part) => part.type === 'text').map((part) => part.text).join(''),
+        })
+
+        break
+      }
+
+      case 'tool': {
+        break
+      }
+
+      default: {
+        const _exhaustiveCheck: never = role
+        throw new Error(`Unsupported role: ${_exhaustiveCheck}`)
+      }
+    }
+  }
+
+  return messages
+}
diff --git a/utils/llm/providers/lm-studio/map-stop-reason.ts b/utils/llm/providers/lm-studio/map-stop-reason.ts
new file mode 100644
index 00000000..6282c093
--- /dev/null
+++ b/utils/llm/providers/lm-studio/map-stop-reason.ts
@@ -0,0 +1,17 @@
+import { LanguageModelV1FinishReason } from '@ai-sdk/provider'
+import { LLMPredictionStopReason } from '@lmstudio/sdk'
+
+const Mapping: Record<LLMPredictionStopReason, LanguageModelV1FinishReason> = {
+  contextLengthReached: 'length',
+  eosFound: 'stop',
+  failed: 'error',
+  maxPredictedTokensReached: 'length',
+  modelUnloaded: 'error',
+  stopStringFound: 'stop',
+  userStopped: 'stop',
+  toolCalls: 'tool-calls',
+}
+
+export function mapStopReason(stopReason: LLMPredictionStopReason): LanguageModelV1FinishReason {
+  return Mapping[stopReason]
+}
diff --git a/utils/llm/providers/lm-studio/openai-compatible-prepare-tools.ts b/utils/llm/providers/lm-studio/openai-compatible-prepare-tools.ts
new file mode 100644
index 00000000..8b586d0b
--- /dev/null
+++ b/utils/llm/providers/lm-studio/openai-compatible-prepare-tools.ts
@@ -0,0 +1,88 @@
+import { LanguageModelV1, LanguageModelV1CallWarning, UnsupportedFunctionalityError } from '@ai-sdk/provider'
+
+export function prepareTools({
+  mode,
+}: {
+  mode: Parameters<LanguageModelV1['doGenerate']>[0]['mode'] & {
+    type: 'regular'
+  }
+  structuredOutputs: boolean
+}): {
+    tools:
+      | undefined
+      | Array<{
+        type: 'function'
+        function: {
+          name: string
+          description: string | undefined
+          parameters: unknown
+        }
+      }>
+    tool_choice: { type: 'function', function: { name: string } } | 'auto' | 'none' | 'required' | undefined
+    toolWarnings: LanguageModelV1CallWarning[]
+  } {
+  // when the tools array is empty, change it to undefined to prevent errors:
+  const tools = mode.tools?.length ? mode.tools : undefined
+  const toolWarnings: LanguageModelV1CallWarning[] = []
+
+  if (tools == null) {
+    return { tools: undefined, tool_choice: undefined, toolWarnings }
+  }
+
+  const toolChoice = mode.toolChoice
+
+  const openaiCompatTools: Array<{
+    type: 'function'
+    function: {
+      name: string
+      description: string | undefined
+      parameters: unknown
+    }
+  }> = []
+
+  for (const tool of tools) {
+    if (tool.type === 'provider-defined') {
+      toolWarnings.push({ type: 'unsupported-tool', tool })
+    }
+    else {
+      openaiCompatTools.push({
+        type: 'function',
+        function: {
+          name: tool.name,
+          description: tool.description,
+          parameters: tool.parameters,
+        },
+      })
+    }
+  }
+
+  if (toolChoice == null) {
+    return { tools: openaiCompatTools, tool_choice: undefined, toolWarnings }
+  }
+
+  const type = toolChoice.type
+
+  switch (type) {
+    case 'auto':
+    case 'none':
+    case 'required':
+      return { tools: openaiCompatTools, tool_choice: type, toolWarnings }
+    case 'tool':
+      return {
+        tools: openaiCompatTools,
+        tool_choice: {
+          type: 'function',
+          function: {
+            name: toolChoice.toolName,
+          },
+        },
+        toolWarnings,
+      }
+    default: {
+      const _exhaustiveCheck: never = type
+      throw new UnsupportedFunctionalityError({
+        functionality: `Unsupported tool choice type: ${_exhaustiveCheck}`,
+      })
+    }
+  }
+}
diff --git a/utils/llm/thinking-models.ts b/utils/llm/thinking-models.ts
index 7356e8a2..898ef8b9 100644
--- a/utils/llm/thinking-models.ts
+++ b/utils/llm/thinking-models.ts
@@ -1,6 +1,9 @@
+import { LLMEndpointType } from './models'
+
 export const THINKING_OLLAMA_MODELS: string[] = ['deepseek-r1', 'qwen3', 'magistral']
 
-export const isToggleableThinkingModel = (model: string): boolean => {
+export const isToggleableThinkingModel = (endpointType: LLMEndpointType, model: string): boolean => {
+  if (endpointType !== 'ollama') return false
   // check if model is contains thinking model name
   return THINKING_OLLAMA_MODELS.some((thinkingModel) => model.includes(thinkingModel))
 }
diff --git a/utils/llm/tools/prompt-based/tools.ts b/utils/llm/tools/prompt-based/tools.ts
index 0c632eb0..536ff56b 100644
--- a/utils/llm/tools/prompt-based/tools.ts
+++ b/utils/llm/tools/prompt-based/tools.ts
@@ -2,7 +2,11 @@ import { z } from 'zod'
 
 import { InferredParams, PromptBasedTool } from './helpers'
 
-export const viewTabTool = new PromptBasedTool('view_tab', 'View complete content of a specific tab with interactive elements as clickable IDs', {
+export const viewTabTool = new PromptBasedTool('view_tab', 'View complete content of a specific tab', {
+  tab_id: z.string().min(1).describe(''),
+})
+
+export const viewTabForWithInteractiveElementsTool = new PromptBasedTool('view_tab', 'View complete content of a specific tab with interactive elements as clickable IDs', {
   tab_id: z.string().min(1).describe(''),
 })
 
@@ -19,7 +23,11 @@ export const searchOnlineTool = new PromptBasedTool('search_online', 'Search for
   max_results: z.coerce.number().min(1).max(20).default(5).describe('5'),
 })
 
-export const fetchPageTool = new PromptBasedTool('fetch_page', 'Get complete content from a specific web page with interactive elements as clickable IDs', {
+export const fetchPageTool = new PromptBasedTool('fetch_page', 'Get detailed content from specific web pages', {
+  url: z.string().url().describe(''),
+})
+
+export const fetchPageWithInteractiveElementsTool = new PromptBasedTool('fetch_page', 'Get complete content from a specific web page with interactive elements as clickable IDs', {
   url: z.string().url().describe(''),
 })
 
@@ -40,14 +48,16 @@ export const promptBasedTools = [
   pageClickTool,
 ]
 
-export const chatDefaultPromptBasedTools = [
-  viewTabTool,
-  viewPdfTool,
-  viewImageTool,
-  searchOnlineTool,
-  fetchPageTool,
-  pageClickTool,
-]
+export const promptBasedToolCollections = {
+  browserUse: {
+    onlineSearch: [viewTabForWithInteractiveElementsTool, viewPdfTool, viewImageTool, searchOnlineTool, fetchPageWithInteractiveElementsTool, pageClickTool],
+    nonOnlineSearch: [viewTabForWithInteractiveElementsTool, viewPdfTool, viewImageTool, fetchPageWithInteractiveElementsTool, pageClickTool],
+  },
+  nonBrowserUse: {
+    onlineSearch: [viewTabTool, viewPdfTool, viewImageTool, searchOnlineTool, fetchPageTool],
+    nonOnlineSearch: [viewTabTool, viewPdfTool, viewImageTool, fetchPageTool],
+  },
+}
 
 export type PromptBasedToolType = typeof promptBasedTools[number]
 export type ExtractToolWithParams<T extends PromptBasedToolType> = {
diff --git a/utils/pinia-store/store.ts b/utils/pinia-store/store.ts
index 328434d0..e7865a93 100644
--- a/utils/pinia-store/store.ts
+++ b/utils/pinia-store/store.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
+import { LMStudioModelInfo } from '@/types/lm-studio-models'
 import { OllamaModelInfo } from '@/types/ollama-models'
 import { logger } from '@/utils/logger'
 import { c2bRpc, s2bRpc, settings2bRpc } from '@/utils/rpc'
@@ -17,73 +18,229 @@ const rpc = forRuntimes({
   default: () => { throw new Error('Unsupported runtime') },
 })
 
-export const useOllamaStatusStore = defineStore('ollama-status', () => {
-  const modelList = ref<OllamaModelInfo[]>([])
-  const connectionStatus = ref<'connected' | 'error' | 'unconnected'>('unconnected')
-  const updateModelList = async (): Promise<OllamaModelInfo[]> => {
+export const useLLMBackendStatusStore = defineStore('llm-backend-status', () => {
+  // Ollama model list and connection status
+  const ollamaModelList = ref<OllamaModelInfo[]>([])
+  const ollamaModelListUpdating = ref(false)
+  const ollamaConnectionStatus = ref<'connected' | 'error' | 'unconnected'>('unconnected')
+  const updateOllamaModelList = async (): Promise<OllamaModelInfo[]> => {
     try {
-      const response = await rpc.getLocalModelListWithCapabilities()
-      connectionStatus.value = 'connected'
+      ollamaModelListUpdating.value = true
+      const response = await rpc.getOllamaLocalModelListWithCapabilities()
+      if (!response.error) {
+        ollamaConnectionStatus.value = 'connected'
+      }
+      else {
+        ollamaConnectionStatus.value = 'error'
+      }
       log.debug('Model list with capabilities fetched:', response)
 
-      modelList.value = response.models
-      return modelList.value
+      ollamaModelList.value = response.models
+      return ollamaModelList.value
     }
     catch (error) {
       log.error('Failed to fetch model list:', error)
-      connectionStatus.value = 'error'
+      ollamaConnectionStatus.value = 'error'
       return []
     }
+    finally {
+      ollamaModelListUpdating.value = false
+    }
+  }
+  const clearOllamaModelList = () => {
+    ollamaModelList.value = []
   }
-  const clearModelList = () => {
-    modelList.value = []
+  const deleteOllamaModel = async (model: string) => {
+    await rpc.deleteOllamaModel(model)
+    await updateOllamaModelList()
   }
 
-  const connectionStatusLoading = ref(false)
-  const updateConnectionStatus = async () => {
-    connectionStatusLoading.value = true
+  const ollamaConnectionStatusLoading = ref(false)
+  const updateOllamaConnectionStatus = async () => {
+    ollamaConnectionStatusLoading.value = true
     const success = await rpc.testOllamaConnection().catch(() => false)
-    connectionStatus.value = success ? 'connected' : 'error'
-    connectionStatusLoading.value = false
+    ollamaConnectionStatus.value = success ? 'connected' : 'error'
+    ollamaConnectionStatusLoading.value = false
     return success
   }
 
-  const unloadModel = async (model: string) => {
+  const unloadOllamaModel = async (model: string) => {
     await rpc.unloadOllamaModel(model)
-    await updateModelList()
+    await updateOllamaModelList()
+  }
+
+  // LMStudio model list and connection status
+  const lmStudioModelList = ref<LMStudioModelInfo[]>([])
+  const lmStudioModelListUpdating = ref(false)
+  const updateLMStudioModelList = async (): Promise<LMStudioModelInfo[]> => {
+    try {
+      lmStudioModelListUpdating.value = true
+      const response = await rpc.getLMStudioModelList()
+      const runningModels = await rpc.getLMStudioRunningModelList().catch(() => ({ models: [] }))
+      log.debug('LMStudio Model list fetched:', response, runningModels)
+      lmStudioModelList.value = response.models.map((model) => {
+        const instances = runningModels.models.filter((m) => m.modelKey === model.modelKey)
+        return {
+          ...model,
+          instances,
+        }
+      })
+      return lmStudioModelList.value
+    }
+    catch (error) {
+      log.error('Failed to fetch LMStudio model list:', error)
+      return []
+    }
+    finally {
+      lmStudioModelListUpdating.value = false
+    }
+  }
+
+  const unloadLMStudioModel = async (identifier: string) => {
+    await rpc.unloadLMStudioModel(identifier)
+    await updateLMStudioModelList()
+  }
+
+  const clearLMStudioModelList = () => {
+    lmStudioModelList.value = []
+  }
+
+  const lmStudioConnectionStatus = ref<'unconnected' | 'connected'>('unconnected')
+  const lmStudioConnectionStatusLoading = ref(false)
+  const updateLMStudioConnectionStatus = async () => {
+    lmStudioConnectionStatusLoading.value = true
+    const success = await rpc.testLMStudioConnection().catch(() => false)
+    lmStudioConnectionStatus.value = success ? 'connected' : 'unconnected'
+    lmStudioConnectionStatusLoading.value = false
+    return success
   }
 
   const checkCurrentModelSupportVision = async () => {
     const userConfig = await getUserConfig()
     const endpointType = userConfig.llm.endpointType.get()
     const currentModel = userConfig.llm.model.get()
-    if (endpointType !== 'ollama') return false
     if (!currentModel) return false
-    const modelDetails = await rpc.showOllamaModelDetails(currentModel)
-    const supported = !!modelDetails.capabilities?.includes('vision')
-    return supported
+    if (endpointType === 'ollama') {
+      const modelDetails = await rpc.showOllamaModelDetails(currentModel)
+      const supported = !!modelDetails.capabilities?.includes('vision')
+      return supported
+    }
+    else if (endpointType === 'lm-studio') {
+      let modelInfo = lmStudioModelList.value.find((m) => m.modelKey === currentModel)
+      if (!modelInfo) {
+        const list = await updateLMStudioModelList()
+        modelInfo = list.find((m) => m.modelKey === currentModel)
+      }
+      return !!modelInfo?.vision
+    }
+    else {
+      return false
+    }
   }
 
-  const initDefaultModel = async () => {
+  const checkModelSupportThinking = async (modelId: string) => {
+    try {
+      const modelDetails = await rpc.showOllamaModelDetails(modelId)
+      logger.debug('checkModelSupportThinking', modelDetails)
+      return !!modelDetails.capabilities?.includes('thinking')
+    }
+    catch (error) {
+      log.error('Failed to check thinking support for model:', modelId, error)
+      return false
+    }
+  }
+
+  const modelList = computed(() => {
+    return [
+      ...ollamaModelList.value.map((m) => ({
+        backend: 'ollama' as const,
+        model: m.model,
+        name: m.name,
+      })),
+      ...lmStudioModelList.value.map((m) => ({
+        backend: 'lm-studio' as const,
+        model: m.modelKey,
+        name: m.displayName ?? m.modelKey,
+      })),
+    ]
+  })
+
+  const modelListUpdating = computed(() => {
+    return ollamaModelListUpdating.value || lmStudioModelListUpdating.value
+  })
+
+  // this function has side effects: it may change the common model in user config
+  const checkCurrentBackendStatus = async () => {
     const userConfig = await getUserConfig()
     const endpointType = userConfig.llm.endpointType.get()
     const commonModelConfig = userConfig.llm.model
-    const modelList = await updateModelList()
-    if (endpointType === 'ollama' && !modelList.some((model) => model.model === commonModelConfig.get())) {
-      commonModelConfig.set(modelList[0]?.model)
+    let status: 'no-model' | 'ok' | 'backend-unavailable' = 'ok'
+    if (endpointType === 'ollama') {
+      const backendStatus = await updateOllamaConnectionStatus()
+      if (backendStatus) {
+        const ollamaModelList = await updateOllamaModelList()
+        if (!ollamaModelList.some((model) => model.model === commonModelConfig.get())) {
+          if (ollamaModelList.length) {
+            commonModelConfig.set(ollamaModelList[0]?.model)
+            status = 'ok'
+          }
+          else { status = 'no-model' }
+        }
+      }
+      else { status = 'backend-unavailable' }
+    }
+    else if (endpointType === 'lm-studio') {
+      const backendStatus = await updateLMStudioConnectionStatus()
+      if (backendStatus) {
+        const lmStudioModelList = await updateLMStudioModelList()
+        if (!lmStudioModelList.some((model) => model.modelKey === commonModelConfig.get())) {
+          if (lmStudioModelList.length) {
+            commonModelConfig.set(lmStudioModelList[0]?.modelKey)
+            status = 'ok'
+          }
+          else { status = 'no-model' }
+        }
+      }
+      else { status = 'backend-unavailable' }
     }
-    return { modelList, commonModel: commonModelConfig.get() }
+    return { modelList, commonModel: commonModelConfig.get(), status, endpointType }
+  }
+
+  const updateModelList = async () => {
+    logger.debug('Updating model list...')
+    // Always update both Ollama and LMStudio backends so users can see
+    // all available models when switching between backends in ModelSelector
+    // WebLLM doesn't need updating as it uses static SUPPORTED_MODELS
+    await Promise.allSettled([updateOllamaModelList(), updateLMStudioModelList()])
+    return modelList.value
   }
 
   return {
-    connectionStatusLoading,
-    connectionStatus,
-    modelList,
-    initDefaultModel,
-    unloadModel,
-    updateModelList,
-    clearModelList,
-    updateConnectionStatus,
+    // Ollama
+    ollamaConnectionStatusLoading,
+    ollamaConnectionStatus,
+    ollamaModelList,
+    ollamaModelListUpdating,
+    unloadOllamaModel,
+    updateOllamaModelList,
+    clearOllamaModelList,
+    updateOllamaConnectionStatus,
+    // LMStudio
+    lmStudioConnectionStatusLoading,
+    lmStudioConnectionStatus,
+    lmStudioModelList,
+    lmStudioModelListUpdating,
+    unloadLMStudioModel,
+    updateLMStudioModelList,
+    deleteOllamaModel,
+    clearLMStudioModelList,
+    updateLMStudioConnectionStatus,
+    // Common
     checkCurrentModelSupportVision,
+    checkModelSupportThinking,
+    checkCurrentBackendStatus,
+    updateModelList,
+    modelList,
+    modelListUpdating,
   }
 })
diff --git a/utils/rpc/background-fns.ts b/utils/rpc/background-fns.ts
index 25ebabc4..31621f0c 100644
--- a/utils/rpc/background-fns.ts
+++ b/utils/rpc/background-fns.ts
@@ -14,10 +14,11 @@ import { BackgroundChatHistoryServiceManager } from '../../entrypoints/backgroun
 import { BackgroundWindowManager } from '../../entrypoints/background/services/window-manager'
 import { MODELS_NOT_SUPPORTED_FOR_STRUCTURED_OUTPUT } from '../constants'
 import { ContextMenuManager } from '../context-menu'
-import { AiSDKError, AppError, CreateTabStreamCaptureError, FetchError, GenerateObjectSchemaError, ModelRequestError, UnknownError } from '../error'
+import { AiSDKError, AppError, CreateTabStreamCaptureError, FetchError, fromError, GenerateObjectSchemaError, ModelRequestError, UnknownError } from '../error'
 import { parsePartialJson } from '../json/parser/parse-partial-json'
-import { getModel, getModelUserConfig, ModelLoadingProgressEvent } from '../llm/models'
-import { deleteModel, getLocalModelList, getLocalModelListWithCapabilities, getRunningModelList, pullModel, showModelDetails, unloadModel } from '../llm/ollama'
+import * as lmStudioUtils from '../llm/lm-studio'
+import { getModel, getModelUserConfig, LLMEndpointType, ModelLoadingProgressEvent } from '../llm/models'
+import * as ollamaUtils from '../llm/ollama'
 import { SchemaName, Schemas, selectSchema } from '../llm/output-schema'
 import { PromptBasedTool } from '../llm/tools/prompt-based/helpers'
 import { getWebLLMEngine, WebLLMSupportedModel } from '../llm/web-llm'
@@ -37,9 +38,11 @@ type ExtraGenerateOptions = { modelId?: string, reasoning?: boolean, autoThinkin
 type ExtraGenerateOptionsWithTools = ExtraGenerateOptions
 type SchemaOptions<S extends SchemaName> = { schema: S } | { jsonSchema: JSONSchema }
 
+const MAX_RETRIES = 3
+
 // TODO
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createRetryWrapper = <T extends (...args: any[]) => Promise<any>>(fn: T, maxRetries: number = 3, delays: number[] = [200, 500, 1000]): T => {
+const createRetryWrapper = <T extends (...args: any[]) => Promise<any>>(fn: T, maxRetries: number = MAX_RETRIES, delays: number[] = [200, 500, 1000]): T => {
   return (async (...args: Parameters<T>): Promise<Awaited<ReturnType<T>>> => {
     let lastError: unknown
 
@@ -88,21 +91,21 @@ const makeLoadingModelListener = (port: Browser.runtime.Port) => (ev: ModelLoadi
   })
 }
 
-const normalizeError = (_error: unknown) => {
+const normalizeError = (_error: unknown, endpointType?: LLMEndpointType) => {
   const networkErrorMessages = ['NetworkError', 'Failed to fetch']
   let error
   if (_error instanceof AppError) {
     error = _error
   }
   else if (_error instanceof Error && networkErrorMessages.some((msg) => _error.message.includes(msg))) {
-    error = new ModelRequestError(_error.message)
+    error = new ModelRequestError(_error.message, endpointType)
   }
   else if (AISDKError.isInstance(_error)) {
     error = new AiSDKError(_error.message)
     error.name = _error.name
   }
   else {
-    error = new UnknownError(`Unexpected error occurred during request: ${_error}`)
+    error = new UnknownError(String(_error))
   }
   return error
 }
@@ -121,12 +124,14 @@ const streamText = async (options: Pick<StreamTextOptions, 'messages' | 'prompt'
     })
 
     try {
+      const userConfig = await getModelUserConfig()
+      const modelInfo = await getModel({
+        ...userConfig,
+        onLoadingModel: makeLoadingModelListener(port),
+        ...generateExtraModelOptions(options),
+      })
       const response = originalStreamText({
-        model: await getModel({
-          ...(await getModelUserConfig()),
-          onLoadingModel: makeLoadingModelListener(port),
-          ...generateExtraModelOptions(options),
-        }),
+        model: modelInfo,
         messages: options.messages,
         prompt: options.prompt,
         system: options.system,
@@ -139,7 +144,7 @@ const streamText = async (options: Pick<StreamTextOptions, 'messages' | 'prompt'
       for await (const chunk of response.fullStream) {
         if (chunk.type === 'error') {
           logger.error(chunk.error)
-          port.postMessage({ type: 'error', error: normalizeError(chunk.error) })
+          port.postMessage({ type: 'error', error: normalizeError(chunk.error, userConfig.endpointType) })
         }
         else {
           port.postMessage(chunk)
@@ -471,14 +476,14 @@ const fetchAsText = async (url: string, initOptions?: RequestInit) => {
 }
 
 const deleteOllamaModel = async (modelId: string) => {
-  await deleteModel(modelId)
+  await ollamaUtils.deleteModel(modelId)
 }
 
 const unloadOllamaModel = async (modelId: string) => {
-  await unloadModel(modelId)
+  await ollamaUtils.unloadModel(modelId)
   const start = Date.now()
   while (Date.now() - start < 10000) {
-    const modelList = await getRunningModelList()
+    const modelList = await ollamaUtils.getRunningModelList()
     if (!modelList.models.some((m) => m.model === modelId)) {
       break
     }
@@ -486,8 +491,56 @@ const unloadOllamaModel = async (modelId: string) => {
   }
 }
 
+const unloadLMStudioModel = async (identifier: string) => {
+  await lmStudioUtils.unloadModel(identifier)
+  const start = Date.now()
+  while (Date.now() - start < 10000) {
+    const modelList = await lmStudioUtils.getRunningModelList()
+    if (!modelList.models.some((m) => m.identifier === identifier)) {
+      break
+    }
+    await sleep(1000)
+  }
+}
+
+const pullLMStudioModel = async (modelName: string) => {
+  const portName = `pullLMStudioModel-${Date.now().toString(32)}`
+  const abortController = new AbortController()
+  preparePortConnection(portName).then(async (port) => {
+    if (port.name !== portName) {
+      return
+    }
+    port.onDisconnect.addListener(() => {
+      abortController.abort()
+      logger.debug('port disconnected from client')
+    })
+    logger.debug('Starting to pull LMStudio model', modelName)
+    const response = await lmStudioUtils.pullModel({ modelName, abortSignal: abortController.signal })
+    try {
+      for await (const chunk of response) {
+        port.postMessage(chunk)
+      }
+    }
+    catch (_error: unknown) {
+      const error = fromError(_error)
+      logger.debug('[pullLMStudioModel] error', error)
+      if (error instanceof Error) {
+        port.postMessage({ error: error.message })
+      }
+      else if (error instanceof AppError) {
+        port.postMessage({ error: error.message })
+      }
+      else {
+        port.postMessage({ error: 'Unknown error' })
+      }
+    }
+    port.disconnect()
+  })
+  return { portName }
+}
+
 const showOllamaModelDetails = async (modelId: string) => {
-  return showModelDetails(modelId)
+  return ollamaUtils.showModelDetails(modelId)
 }
 
 const pullOllamaModel = async (modelId: string) => {
@@ -502,7 +555,7 @@ const pullOllamaModel = async (modelId: string) => {
       logger.debug('port disconnected from client')
       abortController.abort()
     })
-    const response = await pullModel(modelId)
+    const response = await ollamaUtils.pullModel(modelId)
     abortController.signal.addEventListener('abort', () => {
       response.abort()
     })
@@ -533,23 +586,6 @@ const pullOllamaModel = async (modelId: string) => {
   return { portName }
 }
 
-async function testOllamaConnection() {
-  const userConfig = await getUserConfig()
-  try {
-    const baseUrl = userConfig.llm.baseUrl.get()
-    const origin = new URL(baseUrl).origin
-    const response = await fetch(origin)
-    if (!response.ok) return false
-    const text = await response.text()
-    if (text.includes('Ollama is running')) return true
-    else return false
-  }
-  catch (error: unknown) {
-    logger.error('error connecting to ollama api', error)
-    return false
-  }
-}
-
 function initWebLLMEngine(model: WebLLMSupportedModel) {
   try {
     const portName = `web-llm-${model}-${Date.now().toString(32)}`
@@ -952,7 +988,7 @@ async function updateChatTitle(chatId: string, newTitle: string) {
   }
 }
 
-async function autoGenerateChatTitleIfNeeded(chatHistory: ChatHistoryV1, currentChatId?: string) {
+const autoGenerateChatTitleIfNeeded = createRetryWrapper(async (chatHistory: ChatHistoryV1, currentChatId?: string) => {
   try {
     const shouldAutoGenerate = await shouldGenerateChatTitle(chatHistory)
 
@@ -997,7 +1033,7 @@ async function autoGenerateChatTitleIfNeeded(chatHistory: ChatHistoryV1, current
     logger.error('Chat history RPC autoGenerateChatTitle failed:', error)
     return { success: false, error: String(error) }
   }
-}
+})
 
 const getPinnedChats = createRetryWrapper(async () => {
   try {
@@ -1050,13 +1086,19 @@ export const backgroundFunctions = {
   generateTextAsync,
   streamText,
   getAllTabs,
-  getLocalModelList,
-  getLocalModelListWithCapabilities,
-  getRunningModelList,
+  getOllamaLocalModelList: ollamaUtils.getLocalModelList,
+  getOllamaRunningModelList: ollamaUtils.getRunningModelList,
+  getOllamaLocalModelListWithCapabilities: ollamaUtils.getLocalModelListWithCapabilities,
+  testOllamaConnection: ollamaUtils.testConnection,
+  unloadOllamaModel,
+  pullLMStudioModel,
+  getLMStudioModelList: lmStudioUtils.getLocalModelList,
+  getLMStudioRunningModelList: lmStudioUtils.getRunningModelList,
+  testLMStudioConnection: lmStudioUtils.testConnection,
+  unloadLMStudioModel,
   deleteOllamaModel,
   pullOllamaModel,
   showOllamaModelDetails,
-  unloadOllamaModel,
   openAndFetchUrlsContent,
   searchWebsites,
   generateObjectFromSchema,
@@ -1078,7 +1120,6 @@ export const backgroundFunctions = {
   initCurrentModel,
   checkSupportWebLLM,
   getSystemMemoryInfo,
-  testOllamaConnection,
   captureVisibleTab,
   // Translation cache functions
   cacheGetEntry,
@@ -1106,4 +1147,4 @@ export const backgroundFunctions = {
   updateSidepanelModelList,
   forwardGmailAction,
 }
-;(self as unknown as { backgroundFunctions: unknown }).backgroundFunctions = backgroundFunctions
+  ; (self as unknown as { backgroundFunctions: unknown }).backgroundFunctions = backgroundFunctions
diff --git a/utils/rpc/content-main-world-fns.ts b/utils/rpc/content-main-world-fns.ts
index e2d1c841..f814d947 100644
--- a/utils/rpc/content-main-world-fns.ts
+++ b/utils/rpc/content-main-world-fns.ts
@@ -78,7 +78,7 @@ export async function checkBackendModelReady(model?: string): Promise<{ backend:
   const userConfig = await getUserConfig()
   try {
     if (userConfig.llm.endpointType.get() === 'ollama') {
-      const modelList = await c2bRpc.getLocalModelList()
+      const modelList = await c2bRpc.getOllamaLocalModelList()
       if (model === undefined) {
         return { backend: true, model: modelList.models.length > 0 }
       }
@@ -86,6 +86,15 @@ export async function checkBackendModelReady(model?: string): Promise<{ backend:
         return { backend: true, model: modelList.models.some((m) => m.model === model) }
       }
     }
+    else if (userConfig.llm.endpointType.get() === 'lm-studio') {
+      const modelList = await c2bRpc.getLMStudioModelList()
+      if (model === undefined) {
+        return { backend: true, model: modelList.models.length > 0 }
+      }
+      else {
+        return { backend: true, model: modelList.models.some((m) => m.modelKey === model) }
+      }
+    }
     else if (userConfig.llm.endpointType.get() === 'web-llm') {
       return { backend: true, model: await c2bRpc.hasWebLLMModelInCache('Qwen3-0.6B-q4f16_1-MLC') }
     }
diff --git a/utils/rpc/utils.ts b/utils/rpc/utils.ts
index aa5f48c4..7c615764 100644
--- a/utils/rpc/utils.ts
+++ b/utils/rpc/utils.ts
@@ -2,7 +2,7 @@ import { Browser, browser } from 'wxt/browser'
 
 import { AssistantMessageV1, ChatHistoryV1, UserMessageV1 } from '@/types/chat'
 
-import { getAllLocaleValues } from '../i18n'
+import { useGlobalI18n } from '../i18n'
 
 export function preparePortConnection(portName: string) {
   return new Promise<Browser.runtime.Port>((resolve, reject) => {
@@ -83,8 +83,9 @@ export async function shouldGenerateChatTitle(chatHistory: ChatHistoryV1): Promi
   const assistantMessages = completedMessages.filter((item) => item.role === 'assistant')
 
   // Check if title is likely a default "New Chat" title in various languages
-  const defaultTitles = await getAllLocaleValues('chat_history.new_chat')
-  const isDefaultTitle = defaultTitles.some((title) => chatHistory.title === title)
+  const i18n = await useGlobalI18n()
+  const defaultTitles = await i18n.getAllLocaleValues('chat_history.new_chat')
+  const isDefaultTitle = defaultTitles.some((title) => chatHistory.title === title.message)
 
   // Should generate title when:
   // 1. Chat title is still the default "New Chat" title
diff --git a/utils/scroll-targets.ts b/utils/scroll-targets.ts
index 87dc2ee7..5e2a971d 100644
--- a/utils/scroll-targets.ts
+++ b/utils/scroll-targets.ts
@@ -3,5 +3,6 @@ import { SettingsScrollTarget } from '@/types/scroll-targets'
 export const settingsScrollTargets: SettingsScrollTarget[] = [
   'quick-actions-block',
   'model-download-section',
-  'server-address-section',
+  'ollama-server-address-section',
+  'lm-studio-server-address-section',
 ]
diff --git a/utils/theme/index.ts b/utils/theme/index.ts
new file mode 100644
index 00000000..a9bb6f72
--- /dev/null
+++ b/utils/theme/index.ts
@@ -0,0 +1,8 @@
+import { ThemeType } from '@/types/theme'
+
+export const getDocumentTheme = (): ThemeType => {
+  if (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) {
+    return 'dark'
+  }
+  return 'light'
+}
diff --git a/utils/user-config/defaults.ts b/utils/user-config/defaults.ts
index 21cb7df8..e9cf9a90 100644
--- a/utils/user-config/defaults.ts
+++ b/utils/user-config/defaults.ts
@@ -1,7 +1,7 @@
 import { PromptBasedToolType } from '../llm/tools/prompt-based/tools'
 import { PromptBasedToolBuilder, renderPrompt } from '../prompts/helpers'
 
-export const DEFAULT_CHAT_SYSTEM_PROMPT_WITH_TOOLS = `You are an intelligent AI assistant integrated into a browser extension called NativeMind. Your primary role is to help users understand web content, answer questions, and provide comprehensive assistance based on available resources.
+export const DEFAULT_CHAT_SYSTEM_PROMPT_WITH_TOOLS = (tools: PromptBasedToolType[]) => `You are an intelligent AI assistant integrated into a browser extension called NativeMind. Your primary role is to help users understand web content, answer questions, and provide comprehensive assistance based on available resources.
 
 # LANGUAGE POLICY
 1. Detect the primary human language of <user_message>
@@ -55,51 +55,7 @@ Required tool usage:
 
 # AVAILABLE TOOLS:
 
-## view_tab
-Purpose: View complete content of a specific tab
-Format:
-<tool_calls>
-<view_tab>
-<tab_id></tab_id>
-</view_tab>
-</tool_calls>
-
-## view_pdf
-Purpose: View content of a specific PDF
-Format:
-<tool_calls>
-<view_pdf>
-<pdf_id></pdf_id>
-</view_pdf>
-</tool_calls>
-
-## view_image
-Purpose: Analyze a specific image
-Format:
-<tool_calls>
-<view_image>
-<image_id></image_id>
-</view_image>
-</tool_calls>
-
-## search_online
-Purpose: Search for current and latest information
-Format:
-<tool_calls>
-<search_online>
-<query></query>
-<max_results></max_results>
-</search_online>
-</tool_calls>
-
-## fetch_page
-Purpose: Get detailed content from specific web pages
-Format:
-<tool_calls>
-<fetch_page>
-<url></url>
-</fetch_page>
-</tool_calls>
+${tools.map((tool) => renderPrompt`${new PromptBasedToolBuilder(tool)}`).join('\n\n')}
 
 # WORKFLOW:
 
diff --git a/utils/user-config/helpers.test.ts b/utils/user-config/helpers.test.ts
index bbd4e2b8..e4109be3 100644
--- a/utils/user-config/helpers.test.ts
+++ b/utils/user-config/helpers.test.ts
@@ -1,11 +1,13 @@
 import { afterEach } from 'node:test'
 
 import { beforeEach, describe, expect, it } from 'vitest'
+import { computed, ref } from 'vue'
 import { storage } from 'wxt/utils/storage'
 
 import { resetFakeBrowser, resetFakeEntrypoint } from '@/tests/utils/fake-browser'
 
 import { ByteSize } from '../sizes'
+import { sleep } from '../sleep'
 import { Config } from './helpers'
 
 describe('user config', () => {
@@ -40,7 +42,7 @@ describe('user config', () => {
     })
     const { _getUserConfig: getUserConfig } = await import('./index')
     const userConfig = await getUserConfig()
-    expect(userConfig.llm.enableNumCtx.get()).toBe(false)
+    expect(userConfig.llm.backends.ollama.enableNumCtx.get()).toBe(false)
   })
 
   it('enableNumCtx should be true when system memory is greater than 8GB', async () => {
@@ -53,7 +55,7 @@ describe('user config', () => {
     })
     const { _getUserConfig: getUserConfig } = await import('./index')
     const userConfig = await getUserConfig()
-    expect(userConfig.llm.enableNumCtx.get()).toBe(true)
+    expect(userConfig.llm.backends.ollama.enableNumCtx.get()).toBe(true)
   })
 
   it('should migrate from old value', async () => {
@@ -142,4 +144,66 @@ describe('user config', () => {
     config.resetDefault()
     expect(await storage.getItem(config.areaKey)).toBe(null)
   })
+
+  it('reactive default value', async () => {
+    resetFakeBrowser()
+
+    const enabled = ref(false)
+    const reactiveDefault = computed(() => (enabled.value ? true : false))
+    const config = await new Config('testKey').default(reactiveDefault).build()
+    const reactiveConfig = config.toRef()
+
+    expect(reactiveConfig.value).toBe(false)
+    enabled.value = true
+    await sleep(0)
+    expect(reactiveConfig.value).toBe(true)
+  })
+
+  it('reactive default value(nested)', async () => {
+    resetFakeBrowser()
+
+    const reactiveDefault = ref({ enabled: false })
+    const config = await new Config('testKey1').default(reactiveDefault).build()
+    const reactiveConfig = config.toRef()
+
+    expect(reactiveConfig.value.enabled).toBe(false)
+    reactiveDefault.value.enabled = true
+    await sleep(0)
+    expect(reactiveConfig.value.enabled).toBe(false) // not reactive currently TODO: make it reactive
+    reactiveDefault.value = { enabled: true }
+    await sleep(0)
+    expect(reactiveConfig.value.enabled).toBe(true)
+  })
+
+  it('reactive default value changes from user should be saved to storage', async () => {
+    resetFakeBrowser()
+
+    const reactiveDefault = ref({ enabled: false })
+    const config = await new Config('testKey2').default(reactiveDefault).build()
+    const reactiveConfig = config.toRef()
+    reactiveConfig.value.enabled = true
+    await sleep(0)
+    expect((await storage.getItem(config.areaKey) as { enabled: boolean }).enabled).toBe(true)
+
+    config.resetDefault()
+    expect((await storage.getItem(config.areaKey) as { enabled: boolean })).toBe(null)
+    expect(reactiveConfig.value.enabled).toBe(false)
+  })
+
+  it('default value changes from source should not be saved to storage', async () => {
+    resetFakeBrowser()
+
+    const reactiveDefault = ref({ enabled: false })
+    const config = await new Config('testKey2').default(reactiveDefault).build()
+    const reactiveConfig = config.toRef()
+    reactiveDefault.value = { enabled: true }
+    await sleep(100)
+    expect((await storage.getItem(config.areaKey) as { enabled: boolean })).toBe(null)
+    expect(reactiveConfig.value.enabled).toBe(true)
+
+    config.resetDefault()
+    await sleep(0)
+    expect((await storage.getItem(config.areaKey) as { enabled: boolean })).toBe(null)
+    expect(reactiveConfig.value.enabled).toBe(true)
+  })
 })
diff --git a/utils/user-config/helpers.ts b/utils/user-config/helpers.ts
index 31a249dc..44bbc290 100644
--- a/utils/user-config/helpers.ts
+++ b/utils/user-config/helpers.ts
@@ -1,4 +1,4 @@
-import { customRef, Ref, ref, toRaw, watch } from 'vue'
+import { customRef, isRef, MaybeRef, Ref, ref, toRaw, unref, UnwrapRef, watch, watchEffect } from 'vue'
 import { storage, StorageItemKey } from 'wxt/utils/storage'
 
 const getItem = async <T>(key: StorageItemKey) => {
@@ -18,11 +18,9 @@ export class ValidateError extends Error {
 
 export type ExtendedRef<T, D> = Ref<T> & { defaultValue: D }
 
-export class Config<Value, DefaultValue extends Value | undefined> {
-  defaultValue?: DefaultValue
+export class Config<Value, DefaultValue extends MaybeRef<Value | undefined>> {
+  defaultValue?: Ref<UnwrapRef<DefaultValue>>
   isSession = false
-  transformer?: (value: Value | DefaultValue) => Value | DefaultValue
-  validator?: (value: Value | DefaultValue) => { isValid: boolean, displayMessage?: string }
   migrations: {
     fromKey: string
     migrate: (value: Value | DefaultValue | undefined) => Value | DefaultValue | undefined
@@ -34,9 +32,9 @@ export class Config<Value, DefaultValue extends Value | undefined> {
     return `local:${this.key}` as const
   }
 
-  default<D extends DefaultValue>(defaultValue: D) {
-    this.defaultValue = defaultValue
-    return this as unknown as Config<D, D>
+  default<D extends DefaultValue>(defaultValue: MaybeRef<D>) {
+    this.defaultValue = (isRef<D>(defaultValue) ? defaultValue : ref(defaultValue)) as Ref<UnwrapRef<D>>
+    return this as unknown as Config<UnwrapRef<D>, UnwrapRef<D>>
   }
 
   migrateFrom(fromKey: string, migration: (value: Value | DefaultValue | undefined) => Value | DefaultValue | undefined) {
@@ -44,11 +42,6 @@ export class Config<Value, DefaultValue extends Value | undefined> {
     return this
   }
 
-  validate(validator: (value: Value | DefaultValue) => { isValid: boolean, displayMessage?: string }) {
-    this.validator = validator
-    return this
-  }
-
   private removeItem() {
     return storage.removeItem(this.areaKey)
   }
@@ -73,47 +66,54 @@ export class Config<Value, DefaultValue extends Value | undefined> {
     return lastValue
   }
 
-  async build() {
+  getClonedDefaultValue() {
     const defaultValue = this.defaultValue
-    const clonedDefaultValue = structuredClone(defaultValue)
+    return structuredClone(toRaw(unref(defaultValue))) as DefaultValue
+  }
+
+  async build() {
     const localValue = (await this.getItem()) ?? undefined
     const migratedValue = await this.execMigration() ?? localValue
     if (migratedValue) await this.setItem(migratedValue)
-    const v = migratedValue ?? clonedDefaultValue
-    const refValue = ref(v)
+    const v = migratedValue ?? localValue
+    const boundStorageValue = ref(v)
     let ignoreSetLocalStorage = false
-    watch(refValue, async (newValue) => {
+    const clonedDefaultValue = ref<DefaultValue>()
+    watchEffect(() => {
+      ignoreSetLocalStorage = true
+      clonedDefaultValue.value = this.getClonedDefaultValue()
+      ignoreSetLocalStorage = false
+    })
+    watch(boundStorageValue, async (newValue) => {
       if (ignoreSetLocalStorage) return
       this.setItem(toRaw(newValue))
     }, { deep: true, flush: 'sync' })
-    const r = customRef<Value | DefaultValue>((track, trigger) => {
+    watch(clonedDefaultValue, async (newValue) => {
+      // if default value is changed, it should be saved to storage when there is no user value
+      if (boundStorageValue.value || ignoreSetLocalStorage) return
+      boundStorageValue.value = newValue
+    }, { deep: true, flush: 'sync' })
+    const r = customRef<UnwrapRef<Value | DefaultValue>>((track, trigger) => {
       return {
-        get() {
+        get: () => {
           track()
-          return refValue.value
+          const defaultValue = clonedDefaultValue.value
+          const storageValue = boundStorageValue.value
+          return storageValue ?? defaultValue
         },
         set: (value) => {
-          if (this.transformer) {
-            value = this.transformer(value)
-          }
-          if (this.validator) {
-            const { isValid, displayMessage } = this.validator(value)
-            if (!isValid) {
-              throw new ValidateError(displayMessage || 'Invalid value')
-            }
-          }
-          refValue.value = value
+          boundStorageValue.value = value
           trigger()
         },
       }
     }) as ExtendedRef<Value | DefaultValue, DefaultValue>
-    r.defaultValue = structuredClone(defaultValue) as DefaultValue
+    r.defaultValue = this.getClonedDefaultValue()
 
     storage.watch(this.areaKey, async (newValue, oldValue) => {
       newValue = newValue ?? undefined
       if (newValue !== oldValue) {
         ignoreSetLocalStorage = true
-        refValue.value = (newValue === undefined || newValue === null) ? structuredClone(defaultValue) : newValue
+        boundStorageValue.value = newValue
         ignoreSetLocalStorage = false
       }
     })
@@ -125,15 +125,18 @@ export class Config<Value, DefaultValue extends Value | undefined> {
     return {
       get key() { return key },
       get areaKey() { return areaKey },
-      getDefault() {
-        return structuredClone(defaultValue) as DefaultValue
+      getDefault: () => {
+        return this.getClonedDefaultValue()
       },
-      resetDefault() {
-        r.value = structuredClone(defaultValue) as DefaultValue
+      resetDefault: () => {
+        clonedDefaultValue.value = this.getClonedDefaultValue()
+        boundStorageValue.value = undefined
         removeItem()
       },
       toRef: () => r,
-      get: () => r.value,
+      get: () => {
+        return r.value
+      },
       set: (value: Value | DefaultValue) => {
         r.value = value
       },
diff --git a/utils/user-config/index.ts b/utils/user-config/index.ts
index 1017b6c6..cc5fcb2f 100644
--- a/utils/user-config/index.ts
+++ b/utils/user-config/index.ts
@@ -1,17 +1,19 @@
+import { computed } from 'vue'
 import { browser } from 'wxt/browser'
 
+import { ThemeModeType } from '@/types/theme'
 import { c2bRpc } from '@/utils/rpc'
 
 import { SupportedLocaleCode } from '../i18n/constants'
 import { generateRandomId } from '../id'
 import { LanguageCode } from '../language/detect'
 import { LLMEndpointType } from '../llm/models'
-import { chatDefaultPromptBasedTools } from '../llm/tools/prompt-based/tools'
+import { promptBasedToolCollections } from '../llm/tools/prompt-based/tools'
 import logger from '../logger'
 import { lazyInitialize } from '../memo'
 import { forRuntimes } from '../runtime'
 import { ByteSize } from '../sizes'
-import { DEFAULT_CHAT_SYSTEM_PROMPT, DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE, DEFAULT_CHAT_SYSTEM_PROMPT_WITH_TOOLS, DEFAULT_CHAT_TITLE_GENERATION_SYSTEM_PROMPT, DEFAULT_GMAIL_COMPOSE_SYSTEM_PROMPT, DEFAULT_GMAIL_REPLY_SYSTEM_PROMPT, DEFAULT_GMAIL_SUMMARY_SYSTEM_PROMPT, DEFAULT_TRANSLATOR_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_LIST_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_PROOFREAD_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_REWRITE_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_SPARKLE_SYSTEM_PROMPT } from './defaults'
+import { DEFAULT_CHAT_SYSTEM_PROMPT, DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE, DEFAULT_CHAT_TITLE_GENERATION_SYSTEM_PROMPT, DEFAULT_GMAIL_COMPOSE_SYSTEM_PROMPT, DEFAULT_GMAIL_REPLY_SYSTEM_PROMPT, DEFAULT_GMAIL_SUMMARY_SYSTEM_PROMPT, DEFAULT_TRANSLATOR_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_LIST_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_PROOFREAD_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_REWRITE_SYSTEM_PROMPT, DEFAULT_WRITING_TOOLS_SPARKLE_SYSTEM_PROMPT } from './defaults'
 import { Config } from './helpers'
 
 const log = logger.child('user-config')
@@ -76,23 +78,43 @@ export async function _getUserConfig() {
   }
 
   const enableBrowserUse = await new Config('browserUse.enable').default(true).build()
+  const enableOnlineSearch = await new Config('chat.onlineSearch.enable').default(true).build()
+  const defaultChatSystemPrompt = computed(() => {
+    const enableBrowserUseStatus = enableBrowserUse.get()
+    const enableOnlineSearchStatus = enableOnlineSearch.get()
+    if (enableBrowserUseStatus) {
+      if (enableOnlineSearchStatus) return DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE(promptBasedToolCollections.browserUse.onlineSearch)
+      else return DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE(promptBasedToolCollections.browserUse.nonOnlineSearch)
+    }
+    else {
+      if (enableOnlineSearchStatus) return DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE(promptBasedToolCollections.nonBrowserUse.onlineSearch)
+      else return DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE(promptBasedToolCollections.nonBrowserUse.nonOnlineSearch)
+    }
+  })
 
   return {
     locale: {
-      current: await new Config<SupportedLocaleCode, undefined>(
-        'locale.current',
-      ).build(),
+      current: await new Config<SupportedLocaleCode, undefined>('locale.current').build(),
     },
     llm: {
       defaultFirstTokenTimeout: await new Config('llm.firstTokenTimeout').default(60 * 1000).build(), // 60 seconds
       endpointType: await new Config('llm.endpointType').default('ollama' as LLMEndpointType).build(),
-      baseUrl: await new Config('llm.baseUrl').default('http://localhost:11434/api').build(),
       model: await new Config<string, undefined>('llm.model').build(),
       apiKey: await new Config('llm.apiKey').default('ollama').build(),
-      numCtx: await new Config('llm.numCtx').default(1024 * 8).build(),
-      enableNumCtx: await new Config('llm.enableNumCtx').default(enableNumCtx).build(),
       reasoning: await new Config('llm.reasoning').default(true).build(),
       titleGenerationSystemPrompt: await new Config('llm.titleGenerationSystemPrompt').default(DEFAULT_CHAT_TITLE_GENERATION_SYSTEM_PROMPT).build(),
+      backends: {
+        ollama: {
+          numCtx: await new Config('llm.backends.ollama.numCtx').default(1024 * 8).build(),
+          enableNumCtx: await new Config('llm.backends.ollama.enableNumCtx').default(enableNumCtx).build(),
+          baseUrl: await new Config('llm.backends.ollama.baseUrl').default('http://localhost:11434/api').migrateFrom('llm.baseUrl', (v) => v).build(),
+        },
+        lmStudio: {
+          numCtx: await new Config('llm.backends.lmStudio.numCtx').default(1024 * 8).build(),
+          enableNumCtx: await new Config('llm.backends.lmStudio.enableNumCtx').default(enableNumCtx).build(),
+          baseUrl: await new Config('llm.backends.lmStudio.baseUrl').default('http://localhost:1234/api').build(),
+        },
+      },
     },
     browserAI: {
       polyfill: {
@@ -120,11 +142,12 @@ export async function _getUserConfig() {
       },
       systemPrompt: await new Config('chat.systemPrompt_1')
         .migrateFrom('chat.systemPrompt', (v) => v === DEFAULT_CHAT_SYSTEM_PROMPT ? undefined : v)
-        .default(enableBrowserUse.get() ? DEFAULT_CHAT_SYSTEM_PROMPT_WITH_BROWSER_USE(chatDefaultPromptBasedTools) : DEFAULT_CHAT_SYSTEM_PROMPT_WITH_TOOLS).build(),
+        .default(defaultChatSystemPrompt).build(),
       history: {
         currentChatId: await new Config('chat.history.currentChatId').default(generateRandomId()).build(),
       },
       onlineSearch: {
+        enable: enableOnlineSearch,
         pageReadCount: await new Config('chat.onlineSearch.pageReadCount').default(5).build(), // how many pages to read when online search is enabled
       },
       quickActions: {
@@ -133,6 +156,7 @@ export async function _getUserConfig() {
       thinkingVisibility: await new Config('chat.thinkingVisibility').default('preview' as 'hide' | 'preview' | 'full').build(),
     },
     translation: {
+      endpointType: await new Config('translation.endpointType').default('ollama' as LLMEndpointType).build(),
       model: await new Config<string, undefined>('translation.model').build(),
       targetLocale: await new Config('translation.targetLocale').default('zh' as LanguageCode).build(),
       systemPrompt: await new Config('translation.systemPrompt').default(DEFAULT_TRANSLATOR_SYSTEM_PROMPT).build(),
@@ -143,6 +167,9 @@ export async function _getUserConfig() {
       },
     },
     ui: {
+      theme: {
+        mode: await new Config('ui.theme.mode').default('system' as ThemeModeType).build(),
+      },
       pinSidebar: await new Config('ui.pinSidebar').default(false).build(),
       onboarding: {
         version: await new Config('ui.onboarding.version').default(0).build(),
@@ -170,6 +197,16 @@ export async function _getUserConfig() {
         systemPrompt: await new Config('writingTools.sparkle.systemPrompt').default(DEFAULT_WRITING_TOOLS_SPARKLE_SYSTEM_PROMPT).build(),
       },
     },
+    settings: {
+      blocks: {
+        ollamaConfig: {
+          open: await new Config('settings.blocks.ollamaConfig.open').default(true).build(),
+        },
+        lmStudioConfig: {
+          open: await new Config('settings.blocks.lmStudioConfig.open').default(true).build(),
+        },
+      },
+    },
     emailTools: {
       enable: await new Config('emailTools.enable').default(true).build(),
       outputLanguage: await new Config('emailTools.outputLanguage').default('auto' as LanguageCode | 'auto').build(),
diff --git a/utils/web-request.ts b/utils/web-request.ts
index 67bf065b..359dd672 100644
--- a/utils/web-request.ts
+++ b/utils/web-request.ts
@@ -4,28 +4,28 @@ import logger from '@/utils/logger'
 
 const log = logger.child('web-request')
 // a constants for removing old rules
-const RULE_ID_REMOVE_ORIGIN = 1
+const RULE_ID_REMOVE_ORIGIN_FOR_OLLAMA_REQUEST = 1
 const RULE_ID_REMOVE_DISPOSITION = 2
 
 export function registerDeclarativeNetRequestRule() {
   // firefox has some bugs with declarativeNetRequest API, we use rules.json instead
   if (import.meta.env.FIREFOX) return
-  const URL_FILTER = /https?:\/\/[^/]*:11434\/.*/
+  const OLLAMA_URL_FILTER = /https?:\/\/[^/]*:11434\/.*/
   const { resolve, promise } = Promise.withResolvers<void>()
 
   const timeout = setTimeout(() => {
     log.warn('Origin-rewrite rule timeout')
     resolve()
-  }, 1000)
+  }, 2000)
 
   browser.runtime.onInstalled.addListener(async () => {
     // reset the rules when the extension is installed or updated
     log.debug('Registering origin-rewrite rule', browser.runtime.id)
     await browser.declarativeNetRequest.updateDynamicRules({
-      removeRuleIds: [RULE_ID_REMOVE_ORIGIN],
+      removeRuleIds: [RULE_ID_REMOVE_ORIGIN_FOR_OLLAMA_REQUEST],
       addRules: [
         {
-          id: RULE_ID_REMOVE_ORIGIN,
+          id: RULE_ID_REMOVE_ORIGIN_FOR_OLLAMA_REQUEST,
           priority: 1,
           action: {
             type: browser.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
@@ -37,7 +37,7 @@ export function registerDeclarativeNetRequestRule() {
             ],
           },
           condition: {
-            regexFilter: URL_FILTER.source,
+            regexFilter: OLLAMA_URL_FILTER.source,
             initiatorDomains: [browser.runtime.id],
             resourceTypes: [browser.declarativeNetRequest.ResourceType.XMLHTTPREQUEST],
           },
diff --git a/wxt.config.ts b/wxt.config.ts
index 5c356539..5b182e46 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -4,19 +4,27 @@ import { analyzer } from 'vite-bundle-analyzer'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import svgLoader from 'vite-svg-loader'
 import { defineConfig } from 'wxt'
+import { Browser } from 'wxt/browser'
 
 import { version } from './package.json'
 import { EXTENSION_SHORT_NAME } from './utils/constants'
 
+type ManifestPermissions = Browser.runtime.ManifestPermissions | (string & Record<never, never>)
+
 export const VERSION = version.split('-')[0]
 
 const IS_FIREFOX = process.argv.includes('firefox')
+const IS_DEV = import.meta.env.NODE_ENV === 'development'
 const FIREFOX_EXTENSION_ID = '{48e0818d-6c94-43d4-9465-61ceb28080e3}'
 const ENABLE_BUNDLE_ANALYZER = process.argv.includes('--analyze') || process.env.ANALYZE === 'true'
 
-const permissionsForChrome = ['system.memory']
-const permissionsForFirefox = ['menus']
-const extraPermissions = IS_FIREFOX ? permissionsForFirefox : permissionsForChrome
+const permissionsForChrome: ManifestPermissions[] = ['system.memory']
+const permissionsForFirefox: ManifestPermissions[] = ['menus']
+const permissionsForDev: ManifestPermissions[] = ['declarativeNetRequestFeedback']
+const extraPermissions: ManifestPermissions[] = [
+  ...(IS_FIREFOX ? permissionsForFirefox : permissionsForChrome),
+  ...(IS_DEV ? permissionsForDev : []),
+]
 
 const svgLoaderPlugin = svgLoader({
   svgoConfig: {
@@ -101,6 +109,6 @@ export default defineConfig({
         world: 'MAIN',
       },
     ],
-    host_permissions: ['*://*/*'],
+    host_permissions: ['*://*/*', 'ws://*/*', 'wss://*/*'],
   },
 })