diff --git a/src/assets/locale/en/common.json b/src/assets/locale/en/common.json
index 03f0000..4626817 100644
--- a/src/assets/locale/en/common.json
+++ b/src/assets/locale/en/common.json
@@ -1,4 +1,6 @@
 {
+    "pageAssist": "Page Assist",
+    "selectAModel": "Select a Model",
     "save": "Save",
     "saved": "Saved",
     "cancel": "Cancel",
@@ -45,5 +47,6 @@
     },
     "submit": "Submit",
     "noData": "No data",
-    "noHistory": "No chat history"
+    "noHistory": "No chat history",
+    "chatWithCurrentPage": "Chat with current page"
 }
\ No newline at end of file
diff --git a/src/assets/locale/en/option.json b/src/assets/locale/en/option.json
index 523318d..5739b40 100644
--- a/src/assets/locale/en/option.json
+++ b/src/assets/locale/en/option.json
@@ -1,6 +1,5 @@
 {
     "newChat": "New Chat",
-    "selectAModel": "Select a Model",
     "selectAPrompt": "Select a Prompt",
     "githubRepository": "GitHub Repository",
     "settings": "Settings",
@@ -9,207 +8,5 @@
     "somethingWentWrong": "Something went wrong",
     "validationSelectModel": "Please select a model to continue",
     "deleteHistoryConfirmation": "Are you sure you want to delete this history?",
-    "editHistoryTitle": "Enter a new title",
-    "generalSettings": {
-        "title": "General Settings",
-        "heading": "Web UI Settings",
-        "settings": {
-            "speechRecognitionLang": {
-                "label": "Speech Recognition Language",
-                "placeholder": "Select a language"
-            },
-            "language": {
-                "label": "Language",
-                "placeholder": "Select a language"
-            },
-            "darkMode": {
-                "label": "Change Theme",
-                "options": {
-                    "light": "Light",
-                    "dark": "Dark"
-                }
-            },
-            "searchMode": {
-                "label": "Perform Simple Internet Search"
-            },
-            "deleteChatHistory": {
-                "label": "Delete Chat History",
-                "button": "Delete",
-                "confirm": "Are you sure you want to delete your chat history? This action cannot be undone."
-            }
-        }
-    },
-    "manageModels": {
-        "title": "Manage Models",
-        "addBtn": "Add New Model",
-        "columns": {
-            "name": "Name",
-            "digest": "Digest",
-            "modifiedAt": "Modified At",
-            "size": "Size",
-            "actions": "Actions"
-        },
-        "expandedColumns": {
-            "parentModel": "Parent Model",
-            "format": "Format",
-            "family": "Family",
-            "parameterSize": "Parameter Size",
-            "quantizationLevel": "Quantization Level"
-        },
-        "tooltip": {
-            "delete": "Delete Model",
-            "repull": "Re-Pull Model"
-        },
-        "confirm": {
-            "delete": "Are you sure you want to delete this model?",
-            "repull": "Are you sure you want to re-pull this model?"
-        },
-        "modal": {
-            "title": "Add New Model",
-            "placeholder": "Enter Model Name",
-            "pull": "Pull Model"
-        },
-        "notification": {
-            "pullModel": "Pulling Model",
-            "pullModelDescription": "Pulling {{modelName}} model. For more details, check the extension icon.",
-            "success": "Success",
-            "error": "Error",
-            "successDescription": "Successfully pulled the model",
-            "successDeleteDescription": "Successfully deleted the model",
-            "someError": "Something went wrong. Please try again later"
-        }
-    },
-    "managePrompts": {
-        "title": "Manage Prompts",
-        "addBtn": "Add New Prompt",
-        "columns": {
-            "title": "Title",
-            "prompt": "Prompt",
-            "type": "Prompt Type",
-            "actions": "Actions"
-        },
-        "systemPrompt": "System Prompt",
-        "quickPrompt": "Quick Prompt",
-        "tooltip": {
-            "delete": "Delete Prompt",
-            "edit": "Edit Prompt"
-        },
-        "confirm": {
-            "delete": "Are you sure you want to delete this prompt? This action cannot be undone."
-        },
-        "modal": {
-            "addTitle": "Add New Prompt",
-            "editTitle": "Edit Prompt"
-        },
-        "form": {
-            "title": {
-                "label": "Title",
-                "placeholder": "My Awesome Prompt",
-                "required": "Please enter a title"
-            },
-            "prompt": {
-                "label": "Prompt",
-                "placeholder": "Enter Prompt",
-                "required": "Please enter a prompt",
-                "help": "You can use {key} as variable in your prompt."
-            },
-            "isSystem": {
-                "label": "Is System Prompt"
-            },
-            "btnSave": {
-                "saving": "Adding Prompt...",
-                "save": "Add Prompt"
-            },
-            "btnEdit": {
-                "saving": "Updating Prompt...",
-                "save": "Update Prompt"
-            }
-        },
-        "notification": {
-            "addSuccess": "Prompt Added",
-            "addSuccessDesc": "Prompt has been added successfully",
-            "error": "Error",
-            "someError": "Something went wrong. Please try again later",
-            "updatedSuccess": "Prompt Updated",
-            "updatedSuccessDesc": "Prompt has been updated successfully",
-            "deletedSuccess": "Prompt Deleted",
-            "deletedSuccessDesc": "Prompt has been deleted successfully"
-        }
-    },
-    "manageShare": {
-        "title": "Manage Share",
-        "heading": "Configure Page Share URL",
-        "form": {
-            "url": {
-                "label": "Page Share URL",
-                "placeholder": "Enter Page Share URL",
-                "required": "Please input your Page Share URL!",
-                "help": "For privacy reasons, you can self-host the page share and provide the URL here. <anchor>Learn More</anchor>."
-            }
-        },
-        "webshare": {
-            "heading": "Web Share",
-            "columns": {
-                "title": "Title",
-                "url": "URL",
-                "actions": "Actions"
-            },
-            "tooltip": {
-                "delete": "Delete Share"
-            },
-            "confirm": {
-                "delete": "Are you sure you want to delete this share? This action cannot be undone."
-            }
-        },
-        "notification": {
-            "pageShareSuccess": "Page Share URL updated successfully",
-            "someError": "Something went wrong. Please try again later",
-            "webShareDeleteSuccess": "Web Share deleted successfully"
-        }
-    },
-    "ollamaSettings": {
-        "title": "Ollama Settings",
-        "heading": "Configure Ollama",
-        "settings": {
-            "ollamaUrl": {
-                "label": "Ollama URL",
-                "placeholder": "Enter Ollama URL"
-            },
-            "ragSettings": {
-                "label": "RAG Settings",
-                "model": {
-                    "label": "Embedding Model",
-                    "required": "Please select a model",
-                    "help": "Highly recommended to use embedding models like `nomic-embed-text`.",
-                    "placeholder": "Select a model"
-                },
-                "chunkSize": {
-                    "label": "Chunk Size",
-                    "placeholder": "Enter Chunk Size",
-                    "required": "Please enter a chunk size"
-                },
-                "chunkOverlap": {
-                    "label": "Chunk Overlap",
-                    "placeholder": "Enter Chunk Overlap",
-                    "required": "Please enter a chunk overlap"
-                }
-            },
-            "prompt": {
-                "label": "Configure RAG Prompt",
-                "option1": "Normal",
-                "option2": "Web",
-                "alert": "Configuring the system prompt here is deprecated. Please use the Manage Prompts section to add or edit prompts. This section will be removed in a future release",
-                "systemPrompt": "System Prompt",
-                "systemPromptPlaceholder": "Enter System Prompt",
-                "webSearchPrompt": "Web Search Prompt",
-                "webSearchPromptHelp": "Do not remove `{search_results}` from the prompt.",
-                "webSearchPromptError": "Please enter a web search prompt",
-                "webSearchPromptPlaceholder": "Enter Web Search Prompt",
-                "webSearchFollowUpPrompt": "Web Search Follow Up Prompt",
-                "webSearchFollowUpPromptHelp": "Do not remove `{chat_history}` and `{question}` from the prompt.",
-                "webSearchFollowUpPromptError": "Please input your Web Search Follow Up Prompt!",
-                "webSearchFollowUpPromptPlaceholder": "Your Web Search Follow Up Prompt"
-            }
-        }
-    }
+    "editHistoryTitle": "Enter a new title"
 }
\ No newline at end of file
diff --git a/src/assets/locale/en/settings.json b/src/assets/locale/en/settings.json
new file mode 100644
index 0000000..40e5c58
--- /dev/null
+++ b/src/assets/locale/en/settings.json
@@ -0,0 +1,207 @@
+{
+    "generalSettings": {
+        "title": "General Settings",
+        "heading": "Web UI Settings",
+        "settings": {
+            "speechRecognitionLang": {
+                "label": "Speech Recognition Language",
+                "placeholder": "Select a language"
+            },
+            "language": {
+                "label": "Language",
+                "placeholder": "Select a language"
+            },
+            "darkMode": {
+                "label": "Change Theme",
+                "options": {
+                    "light": "Light",
+                    "dark": "Dark"
+                }
+            },
+            "searchMode": {
+                "label": "Perform Simple Internet Search"
+            },
+            "deleteChatHistory": {
+                "label": "Delete Chat History",
+                "button": "Delete",
+                "confirm": "Are you sure you want to delete your chat history? This action cannot be undone."
+            }
+        }
+    },
+    "manageModels": {
+        "title": "Manage Models",
+        "addBtn": "Add New Model",
+        "columns": {
+            "name": "Name",
+            "digest": "Digest",
+            "modifiedAt": "Modified At",
+            "size": "Size",
+            "actions": "Actions"
+        },
+        "expandedColumns": {
+            "parentModel": "Parent Model",
+            "format": "Format",
+            "family": "Family",
+            "parameterSize": "Parameter Size",
+            "quantizationLevel": "Quantization Level"
+        },
+        "tooltip": {
+            "delete": "Delete Model",
+            "repull": "Re-Pull Model"
+        },
+        "confirm": {
+            "delete": "Are you sure you want to delete this model?",
+            "repull": "Are you sure you want to re-pull this model?"
+        },
+        "modal": {
+            "title": "Add New Model",
+            "placeholder": "Enter Model Name",
+            "pull": "Pull Model"
+        },
+        "notification": {
+            "pullModel": "Pulling Model",
+            "pullModelDescription": "Pulling {{modelName}} model. For more details, check the extension icon.",
+            "success": "Success",
+            "error": "Error",
+            "successDescription": "Successfully pulled the model",
+            "successDeleteDescription": "Successfully deleted the model",
+            "someError": "Something went wrong. Please try again later"
+        }
+    },
+    "managePrompts": {
+        "title": "Manage Prompts",
+        "addBtn": "Add New Prompt",
+        "option1": "Normal",
+        "option2": "RAG",
+        "questionPrompt": "Question Prompt",
+        "columns": {
+            "title": "Title",
+            "prompt": "Prompt",
+            "type": "Prompt Type",
+            "actions": "Actions"
+        },
+        "systemPrompt": "System Prompt",
+        "quickPrompt": "Quick Prompt",
+        "tooltip": {
+            "delete": "Delete Prompt",
+            "edit": "Edit Prompt"
+        },
+        "confirm": {
+            "delete": "Are you sure you want to delete this prompt? This action cannot be undone."
+        },
+        "modal": {
+            "addTitle": "Add New Prompt",
+            "editTitle": "Edit Prompt"
+        },
+        "form": {
+            "title": {
+                "label": "Title",
+                "placeholder": "My Awesome Prompt",
+                "required": "Please enter a title"
+            },
+            "prompt": {
+                "label": "Prompt",
+                "placeholder": "Enter Prompt",
+                "required": "Please enter a prompt",
+                "help": "You can use {key} as variable in your prompt."
+            },
+            "isSystem": {
+                "label": "Is System Prompt"
+            },
+            "btnSave": {
+                "saving": "Adding Prompt...",
+                "save": "Add Prompt"
+            },
+            "btnEdit": {
+                "saving": "Updating Prompt...",
+                "save": "Update Prompt"
+            }
+        },
+        "notification": {
+            "addSuccess": "Prompt Added",
+            "addSuccessDesc": "Prompt has been added successfully",
+            "error": "Error",
+            "someError": "Something went wrong. Please try again later",
+            "updatedSuccess": "Prompt Updated",
+            "updatedSuccessDesc": "Prompt has been updated successfully",
+            "deletedSuccess": "Prompt Deleted",
+            "deletedSuccessDesc": "Prompt has been deleted successfully"
+        }
+    },
+    "manageShare": {
+        "title": "Manage Share",
+        "heading": "Configure Page Share URL",
+        "form": {
+            "url": {
+                "label": "Page Share URL",
+                "placeholder": "Enter Page Share URL",
+                "required": "Please input your Page Share URL!",
+                "help": "For privacy reasons, you can self-host the page share and provide the URL here. <anchor>Learn More</anchor>."
+            }
+        },
+        "webshare": {
+            "heading": "Web Share",
+            "columns": {
+                "title": "Title",
+                "url": "URL",
+                "actions": "Actions"
+            },
+            "tooltip": {
+                "delete": "Delete Share"
+            },
+            "confirm": {
+                "delete": "Are you sure you want to delete this share? This action cannot be undone."
+            }
+        },
+        "notification": {
+            "pageShareSuccess": "Page Share URL updated successfully",
+            "someError": "Something went wrong. Please try again later",
+            "webShareDeleteSuccess": "Web Share deleted successfully"
+        }
+    },
+    "ollamaSettings": {
+        "title": "Ollama Settings",
+        "heading": "Configure Ollama",
+        "settings": {
+            "ollamaUrl": {
+                "label": "Ollama URL",
+                "placeholder": "Enter Ollama URL"
+            },
+            "ragSettings": {
+                "label": "RAG Settings",
+                "model": {
+                    "label": "Embedding Model",
+                    "required": "Please select a model",
+                    "help": "Highly recommended to use embedding models like `nomic-embed-text`.",
+                    "placeholder": "Select a model"
+                },
+                "chunkSize": {
+                    "label": "Chunk Size",
+                    "placeholder": "Enter Chunk Size",
+                    "required": "Please enter a chunk size"
+                },
+                "chunkOverlap": {
+                    "label": "Chunk Overlap",
+                    "placeholder": "Enter Chunk Overlap",
+                    "required": "Please enter a chunk overlap"
+                }
+            },
+            "prompt": {
+                "label": "Configure RAG Prompt",
+                "option1": "Normal",
+                "option2": "Web",
+                "alert": "Configuring the system prompt here is deprecated. Please use the Manage Prompts section to add or edit prompts. This section will be removed in a future release",
+                "systemPrompt": "System Prompt",
+                "systemPromptPlaceholder": "Enter System Prompt",
+                "webSearchPrompt": "Web Search Prompt",
+                "webSearchPromptHelp": "Do not remove `{search_results}` from the prompt.",
+                "webSearchPromptError": "Please enter a web search prompt",
+                "webSearchPromptPlaceholder": "Enter Web Search Prompt",
+                "webSearchFollowUpPrompt": "Web Search Follow Up Prompt",
+                "webSearchFollowUpPromptHelp": "Do not remove `{chat_history}` and `{question}` from the prompt.",
+                "webSearchFollowUpPromptError": "Please input your Web Search Follow Up Prompt!",
+                "webSearchFollowUpPromptPlaceholder": "Your Web Search Follow Up Prompt"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/locale/en/sidepanel.json b/src/assets/locale/en/sidepanel.json
new file mode 100644
index 0000000..d46e213
--- /dev/null
+++ b/src/assets/locale/en/sidepanel.json
@@ -0,0 +1,5 @@
+{
+    "tooltip": {
+        "embed": "It may take a few minutes to embed the page. Please wait..."
+    }
+}
\ No newline at end of file
diff --git a/src/assets/locale/ml/common.json b/src/assets/locale/ml/common.json
index 0b96d83..89f53c7 100644
--- a/src/assets/locale/ml/common.json
+++ b/src/assets/locale/ml/common.json
@@ -1,6 +1,8 @@
 {
+    "pageAssist": "പേജ് ആസിസ്റ്റ്",
+    "selectAModel": "ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
     "save": "സേവ് ചെയ്യുക",
-    "saved": "സംരക്ഷിച്ചു",
+    "saved": "സേവ് ചെയ്തു",
     "cancel": "റദ്ദാക്കുക",
     "retry": "വീണ്ടും ശ്രമിക്കുക",
     "share": {
@@ -45,5 +47,6 @@
     },
     "submit": "സമർപ്പിക്കുക",
     "noData": "ഡാറ്റ ലഭ്യമല്ല",
-    "noHistory": "ചാറ്റ് ചരിത്രം ലഭ്യമല്ല"
+    "noHistory": "ചാറ്റ് ചരിത്രം ലഭ്യമല്ല",
+    "chatWithCurrentPage": "നിലവിലെ പേജിനുമായി ചാറ്റ് ചെയ്യുക"
 }
\ No newline at end of file
diff --git a/src/assets/locale/ml/option.json b/src/assets/locale/ml/option.json
index 7e17e77..7a3523b 100644
--- a/src/assets/locale/ml/option.json
+++ b/src/assets/locale/ml/option.json
@@ -1,6 +1,5 @@
 {
     "newChat": "പുതിയ ചാറ്റ്",
-    "selectAModel": "ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
     "selectAPrompt": "ഒരു പ്രോംപ്റ്റ് തിരഞ്ഞെടുക്കുക",
     "githubRepository": "ഗിറ്റ്ഹബ് റെപ്പോസിറ്ററി",
     "settings": "ക്രമീകരണങ്ങള്‍",
@@ -9,207 +8,5 @@
     "somethingWentWrong": "എന്തോ തെറ്റായി",
     "deleteHistoryConfirmation": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ?",
     "editHistoryTitle": "ചാറ്റ് title എഡിറ്റുചെയ്യുക",
-    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
-    "generalSettings": {
-        "title": "പൊതുവായ ക്രമീകരണങ്ങള്‍",
-        "heading": "വെബ് UI ക്രമീകരണങ്ങള്‍",
-        "settings": {
-            "speechRecognitionLang": {
-                "label": "സംഭാഷണ തിരിച്ചറിയല്‍ ഭാഷ",
-                "placeholder": "ഒരു ഭാഷ തിരഞ്ഞെടുക്കുക"
-            },
-            "language": {
-                "label": "ഭാഷ",
-                "placeholder": "ഒരു ഭാഷ തിരഞ്ഞെടുക്കുക"
-            },
-            "darkMode": {
-                "label": "തീം മാറ്റുക",
-                "options": {
-                    "light": "ലൈറ്റ്",
-                    "dark": "ഡാര്‍ക്ക്"
-                }
-            },
-            "searchMode": {
-                "label": "സാധാരണ ഇന്റർനെറ്റ് അന്വേഷണം നടത്തുക"
-            },
-            "deleteChatHistory": {
-                "label": "ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കുക",
-                "button": "ഇല്ലാതാക്കുക",
-                "confirm": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
-            }
-        }
-    },
-    "manageModels": {
-        "title": "മോഡലുകള്‍ കൈകാര്യം ചെയ്യുക",
-        "addBtn": "പുതിയ മോഡല്‍ ചേര്‍ക്കുക",
-        "columns": {
-            "name": "പേര്",
-            "digest": "ഡൈജസ്റ്റ്",
-            "modifiedAt": "അവസാനമായി പരിഷ്‌കരിച്ചത്",
-            "size": "വലുപ്പം",
-            "actions": "പ്രവർത്തനങ്ങൾ"
-        },
-        "expandedColumns": {
-            "parentModel": "പാരന്റ് മോഡല്‍",
-            "format": "ഫോര്‍മാറ്റ്",
-            "family": "കുടുംബം",
-            "parameterSize": "പാരാമീറ്റര്‍ വലുപ്പം",
-            "quantizationLevel": "ക്വാണ്ടൈസേഷന്‍ ലെവല്‍"
-        },
-        "tooltip": {
-            "delete": "മോഡല്‍ ഇല്ലാതാക്കുക",
-            "repull": "മോഡല്‍ വീണ്ടും ലഭ്യമാക്കുക"
-        },
-        "confirm": {
-            "delete": "ഈ മോഡല്‍ ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ?",
-            "repull": "ഈ മോഡല്‍ വീണ്ടും ലഭ്യമാക്കണമെന്ന് തീർച്ചയാണോ?"
-        },
-        "modal": {
-            "title": "പുതിയ മോഡല്‍ ചേര്‍ക്കുക",
-            "placeholder": "മോഡല്‍ പേര് നല്‍കുക",
-            "pull": "മോഡല്‍ ലഭ്യമാക്കുക"
-        },
-        "notification": {
-            "pullModel": "മോഡല്‍ ലഭ്യമാക്കുന്നു",
-            "pullModelDescription": "{{modelName}} മോഡല്‍ ലഭ്യമാക്കുന്നു. കൂടുതല്‍ വിവരങ്ങള്‍ക്കായി എക്‌സ്റ്റെന്‍ഷന്‍ ഐക്കണ്‍ പരിശോധിക്കുക.",
-            "success": "വിജയം",
-            "error": "പിശക്",
-            "successDescription": "മോഡല്‍ വിജയകരമായി ലഭ്യമാക്കി",
-            "successDeleteDescription": "മോഡല്‍ വിജയകരമായി ഇല്ലാതാക്കി",
-            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക"
-        }
-    },
-    "managePrompts": {
-        "title": "പ്രോംപ്റ്റുകള്‍ കൈകാര്യം ചെയ്യുക",
-        "addBtn": "പുതിയ പ്രോംപ്റ്റ് ചേര്‍ക്കുക",
-        "columns": {
-            "title": "തലക്കെട്ട്",
-            "prompt": "പ്രോംപ്റ്റ്",
-            "type": "പ്രോംപ്റ്റ് തരം",
-            "actions": "പ്രവർത്തനങ്ങൾ"
-        },
-        "systemPrompt": "സിസ്റ്റം പ്രോംപ്റ്റ്",
-        "quickPrompt": "വേഗത്തിലുള്ള പ്രോംപ്റ്റ്",
-        "tooltip": {
-            "delete": "പ്രോംപ്റ്റ് ഇല്ലാതാക്കുക",
-            "edit": "പ്രോംപ്റ്റ് എഡിറ്റുചെയ്യുക"
-        },
-        "confirm": {
-            "delete": "ഈ പ്രോംപ്റ്റ് ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
-        },
-        "modal": {
-            "addTitle": "പുതിയ പ്രോംപ്റ്റ് ചേര്‍ക്കുക",
-            "editTitle": "പ്രോംപ്റ്റ് എഡിറ്റുചെയ്യുക"
-        },
-        "form": {
-            "title": {
-                "label": "തലക്കെട്ട്",
-                "placeholder": "എന്‍റെ അതുല്യമായ പ്രോംപ്റ്റ്",
-                "required": "ദയവായി ഒരു തലക്കെട്ട് നല്കുക"
-            },
-            "prompt": {
-                "label": "പ്രോംപ്റ്റ്",
-                "placeholder": "പ്രോംപ്റ്റ് നല്കുക",
-                "required": "ദയവായി ഒരു പ്രോംപ്റ്റ് നല്കുക",
-                "help": "നിങ്ങള്‍ക്ക് {key} എന്ന രീതിയില്‍ പ്രോംപ്റ്റില്‍ വേരിയബിളുകള്‍ ഉപയോഗിക്കാവുന്നതാണ്."
-            },
-            "isSystem": {
-                "label": "സിസ്റ്റം പ്രോംപ്റ്റ് ആണോ"
-            },
-            "btnSave": {
-                "saving": "പ്രോംപ്റ്റ് ചേര്‍ക്കുന്നു...",
-                "save": "പ്രോംപ്റ്റ് ചേര്‍ക്കുക"
-            },
-            "btnEdit": {
-                "saving": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നു...",
-                "save": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്യുക"
-            }
-        },
-        "notification": {
-            "addSuccess": "പ്രോംപ്റ്റ് ചേർത്തു",
-            "addSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി ചേർത്തു",
-            "error": "പിശക്",
-            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക",
-            "updatedSuccess": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്‌തു",
-            "updatedSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
-            "deletedSuccess": "പ്രോംപ്റ്റ് ഇല്ലാതാക്കി",
-            "deletedSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി ഇല്ലാതാക്കി"
-        }
-    },
-    "manageShare": {
-        "title": "പങ്കിടുന്നത് കൈകാര്യം ചെയ്യുക",
-        "heading": "പേജ് പങ്കിടാനുള്ള URL കോൺഫിഗർ ചെയ്യുക",
-        "form": {
-            "url": {
-                "label": "പേജ് പങ്കിടാനുള്ള URL",
-                "placeholder": "പേജ് പങ്കിടാനുള്ള URL നല്കുക",
-                "required": "ദയവായി നിങ്ങളുടെ പേജ് പങ്കിടാനുള്ള URL നല്കുക!",
-                "help": "സ്വകാര്യതക്കായി, നിങ്ങള്‍ക്ക് സ്വന്തമായി പേജ് പങ്കിടുന്ന സൗകര്യം ഹോസ്റ്റ് ചെയ്യാനും അവിടെയുള്ള URL ഇവിടെ നല്കാനും കഴിയും. <anchor>കൂടുതല്‍ അറിയുക</anchor>."
-            }
-        },
-        "webshare": {
-            "heading": "വെബ് പങ്കിടല്‍",
-            "columns": {
-                "title": "തലക്കെട്ട്",
-                "url": "URL",
-                "actions": "പ്രവർത്തനങ്ങൾ"
-            },
-            "tooltip": {
-                "delete": "പങ്കിടല്‍ ഇല്ലാതാക്കുക"
-            },
-            "confirm": {
-                "delete": "ഈ പങ്കിടല്‍ ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
-            }
-        },
-        "notification": {
-            "pageShareSuccess": "പേജ് പങ്കിടാനുള്ള URL വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
-            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക",
-            "webShareDeleteSuccess": "വെബ് പങ്കിടല്‍ വിജയകരമായി ഇല്ലാതാക്കി"
-        }
-    },
-    "ollamaSettings": {
-        "title": "ഒല്ലാമാ ക്രമീകരണങ്ങള്‍",
-        "heading": "ഒല്ലാമാ കോൺഫിഗർ ചെയ്യുക",
-        "settings": {
-            "ollamaUrl": {
-                "label": "ഒല്ലാമാ URL",
-                "placeholder": "ഒല്ലാമാ URL നല്കുക"
-            },
-            "ragSettings": {
-                "label": "RAG ക്രമീകരണങ്ങള്‍",
-                "model": {
-                    "label": "എംബെഡിംഗ് മോഡല്‍",
-                    "required": "ദയവായി ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
-                    "help": "`nomic-embed-text` പോലുള്ള എംബെഡിംഗ് മോഡലുകള്‍ ഉപയോഗിക്കുന്നത് വളരെ നന്നായിരിക്കും.",
-                    "placeholder": "ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക"
-                },
-                "chunkSize": {
-                    "label": "ചങ്ക് വലുപ്പം",
-                    "placeholder": "ചങ്ക് വലുപ്പം നല്കുക",
-                    "required": "ദയവായി ചങ്ക് വലുപ്പം നല്കുക"
-                },
-                "chunkOverlap": {
-                    "label": "ചങ്ക് ഓവര്‍ലാപ്പ്",
-                    "placeholder": "ചങ്ക് ഓവര്‍ലാപ്പ് നല്കുക",
-                    "required": "ദയവായി ചങ്ക് ഓവര്‍ലാപ്പ് നല്കുക"
-                }
-            },
-            "prompt": {
-                "label": "RAG പ്രോംപ്റ്റ് കോൺഫിഗർ ചെയ്യുക",
-                "option1": "സാധാരണ",
-                "option2": "വെബ്",
-                "alert": "സിസ്റ്റം പ്രോംപ്റ്റ് ഇവിടെ കോൺഫിഗർ ചെയ്യുന്നത് പഴയൗഖികമായി. ദയവായി പ്രോംപ്റ്റുകള്‍ ചേര്‍ക്കാനോ എഡിറ്റുചെയ്യാനോ മാനേജ് പ്രോംപ്റ്റ്‌സ് സെക്ഷന്‍ ഉപയോഗിക്കുക. ഈ സെക്ഷന്‍ ഭാവിയില്‍ നീക്കം ചെയ്യപ്പെടും.",
-                "systemPrompt": "സിസ്റ്റം പ്രോംപ്റ്റ്",
-                "systemPromptPlaceholder": "സിസ്റ്റം പ്രോംപ്റ്റ് നല്കുക",
-                "webSearchPrompt": "വെബ് തിരയല്‍ പ്രോംപ്റ്റ്",
-                "webSearchPromptHelp": "പ്രോംപ്റ്റില്‍ നിന്ന് `{search_results}` നീക്കം ചെയ്യരുത്.",
-                "webSearchPromptError": "ദയവായി ഒരു വെബ് തിരയല്‍ പ്രോംപ്റ്റ് നല്കുക",
-                "webSearchPromptPlaceholder": "വെബ് തിരയല്‍ പ്രോംപ്റ്റ് നല്കുക",
-                "webSearchFollowUpPrompt": "വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ്",
-                "webSearchFollowUpPromptHelp": "പ്രോംപ്റ്റില്‍ നിന്ന് `{chat_history}` യും `{question}` യും നീക്കം ചെയ്യരുത്.",
-                "webSearchFollowUpPromptError": "ദയവായി നിങ്ങളുടെ വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ് നല്കുക!",
-                "webSearchFollowUpPromptPlaceholder": "നിങ്ങളുടെ വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ്"
-            }
-        }
-    }
+    "validationSelectModel": "തുടരുന്നതിന് ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക"
 }
\ No newline at end of file
diff --git a/src/assets/locale/ml/settings.json b/src/assets/locale/ml/settings.json
new file mode 100644
index 0000000..94f06af
--- /dev/null
+++ b/src/assets/locale/ml/settings.json
@@ -0,0 +1,207 @@
+{
+    "generalSettings": {
+        "title": "പൊതുവായ ക്രമീകരണങ്ങള്‍",
+        "heading": "വെബ് UI ക്രമീകരണങ്ങള്‍",
+        "settings": {
+            "speechRecognitionLang": {
+                "label": "സംഭാഷണ തിരിച്ചറിയല്‍ ഭാഷ",
+                "placeholder": "ഒരു ഭാഷ തിരഞ്ഞെടുക്കുക"
+            },
+            "language": {
+                "label": "ഭാഷ",
+                "placeholder": "ഒരു ഭാഷ തിരഞ്ഞെടുക്കുക"
+            },
+            "darkMode": {
+                "label": "തീം മാറ്റുക",
+                "options": {
+                    "light": "ലൈറ്റ്",
+                    "dark": "ഡാര്‍ക്ക്"
+                }
+            },
+            "searchMode": {
+                "label": "സാധാരണ ഇന്റർനെറ്റ് അന്വേഷണം നടത്തുക"
+            },
+            "deleteChatHistory": {
+                "label": "ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കുക",
+                "button": "ഇല്ലാതാക്കുക",
+                "confirm": "നിങ്ങളുടെ ചാറ്റ് ചരിത്രം ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
+            }
+        }
+    },
+    "manageModels": {
+        "title": "മോഡലുകള്‍ കൈകാര്യം ചെയ്യുക",
+        "addBtn": "പുതിയ മോഡല്‍ ചേര്‍ക്കുക",
+        "columns": {
+            "name": "പേര്",
+            "digest": "ഡൈജസ്റ്റ്",
+            "modifiedAt": "അവസാനമായി പരിഷ്‌കരിച്ചത്",
+            "size": "വലുപ്പം",
+            "actions": "പ്രവർത്തനങ്ങൾ"
+        },
+        "expandedColumns": {
+            "parentModel": "പാരന്റ് മോഡല്‍",
+            "format": "ഫോര്‍മാറ്റ്",
+            "family": "കുടുംബം",
+            "parameterSize": "പാരാമീറ്റര്‍ വലുപ്പം",
+            "quantizationLevel": "ക്വാണ്ടൈസേഷന്‍ ലെവല്‍"
+        },
+        "tooltip": {
+            "delete": "മോഡല്‍ ഇല്ലാതാക്കുക",
+            "repull": "മോഡല്‍ വീണ്ടും ലഭ്യമാക്കുക"
+        },
+        "confirm": {
+            "delete": "ഈ മോഡല്‍ ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ?",
+            "repull": "ഈ മോഡല്‍ വീണ്ടും ലഭ്യമാക്കണമെന്ന് തീർച്ചയാണോ?"
+        },
+        "modal": {
+            "title": "പുതിയ മോഡല്‍ ചേര്‍ക്കുക",
+            "placeholder": "മോഡല്‍ പേര് നല്‍കുക",
+            "pull": "മോഡല്‍ ലഭ്യമാക്കുക"
+        },
+        "notification": {
+            "pullModel": "മോഡല്‍ ലഭ്യമാക്കുന്നു",
+            "pullModelDescription": "{{modelName}} മോഡല്‍ ലഭ്യമാക്കുന്നു. കൂടുതല്‍ വിവരങ്ങള്‍ക്കായി എക്‌സ്റ്റെന്‍ഷന്‍ ഐക്കണ്‍ പരിശോധിക്കുക.",
+            "success": "വിജയം",
+            "error": "പിശക്",
+            "successDescription": "മോഡല്‍ വിജയകരമായി ലഭ്യമാക്കി",
+            "successDeleteDescription": "മോഡല്‍ വിജയകരമായി ഇല്ലാതാക്കി",
+            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക"
+        }
+    },
+    "managePrompts": {
+        "title": "പ്രോംപ്റ്റുകള്‍ കൈകാര്യം ചെയ്യുക",
+        "addBtn": "പുതിയ പ്രോംപ്റ്റ് ചേര്‍ക്കുക",
+        "columns": {
+            "title": "തലക്കെട്ട്",
+            "prompt": "പ്രോംപ്റ്റ്",
+            "type": "പ്രോംപ്റ്റ് തരം",
+            "actions": "പ്രവർത്തനങ്ങൾ"
+        },
+        "option1": "സാധാരണ",
+        "option2": "RAG",
+        "questionPrompt": "ചോദ്യ പ്രോംപ്റ്റ്",
+        "systemPrompt": "സിസ്റ്റം പ്രോംപ്റ്റ്",
+        "quickPrompt": "വേഗത്തിലുള്ള പ്രോംപ്റ്റ്",
+        "tooltip": {
+            "delete": "പ്രോംപ്റ്റ് ഇല്ലാതാക്കുക",
+            "edit": "പ്രോംപ്റ്റ് എഡിറ്റുചെയ്യുക"
+        },
+        "confirm": {
+            "delete": "ഈ പ്രോംപ്റ്റ് ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
+        },
+        "modal": {
+            "addTitle": "പുതിയ പ്രോംപ്റ്റ് ചേര്‍ക്കുക",
+            "editTitle": "പ്രോംപ്റ്റ് എഡിറ്റുചെയ്യുക"
+        },
+        "form": {
+            "title": {
+                "label": "തലക്കെട്ട്",
+                "placeholder": "എന്‍റെ അതുല്യമായ പ്രോംപ്റ്റ്",
+                "required": "ദയവായി ഒരു തലക്കെട്ട് നല്കുക"
+            },
+            "prompt": {
+                "label": "പ്രോംപ്റ്റ്",
+                "placeholder": "പ്രോംപ്റ്റ് നല്കുക",
+                "required": "ദയവായി ഒരു പ്രോംപ്റ്റ് നല്കുക",
+                "help": "നിങ്ങള്‍ക്ക് {key} എന്ന രീതിയില്‍ പ്രോംപ്റ്റില്‍ വേരിയബിളുകള്‍ ഉപയോഗിക്കാവുന്നതാണ്."
+            },
+            "isSystem": {
+                "label": "സിസ്റ്റം പ്രോംപ്റ്റ് ആണോ"
+            },
+            "btnSave": {
+                "saving": "പ്രോംപ്റ്റ് ചേര്‍ക്കുന്നു...",
+                "save": "പ്രോംപ്റ്റ് ചേര്‍ക്കുക"
+            },
+            "btnEdit": {
+                "saving": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്യുന്നു...",
+                "save": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്യുക"
+            }
+        },
+        "notification": {
+            "addSuccess": "പ്രോംപ്റ്റ് ചേർത്തു",
+            "addSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി ചേർത്തു",
+            "error": "പിശക്",
+            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക",
+            "updatedSuccess": "പ്രോംപ്റ്റ് അപ്ഡേറ്റ് ചെയ്‌തു",
+            "updatedSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
+            "deletedSuccess": "പ്രോംപ്റ്റ് ഇല്ലാതാക്കി",
+            "deletedSuccessDesc": "പ്രോംപ്റ്റ് വിജയകരമായി ഇല്ലാതാക്കി"
+        }
+    },
+    "manageShare": {
+        "title": "പങ്കിടുന്നത് കൈകാര്യം ചെയ്യുക",
+        "heading": "പേജ് പങ്കിടാനുള്ള URL കോൺഫിഗർ ചെയ്യുക",
+        "form": {
+            "url": {
+                "label": "പേജ് പങ്കിടാനുള്ള URL",
+                "placeholder": "പേജ് പങ്കിടാനുള്ള URL നല്കുക",
+                "required": "ദയവായി നിങ്ങളുടെ പേജ് പങ്കിടാനുള്ള URL നല്കുക!",
+                "help": "സ്വകാര്യതക്കായി, നിങ്ങള്‍ക്ക് സ്വന്തമായി പേജ് പങ്കിടുന്ന സൗകര്യം ഹോസ്റ്റ് ചെയ്യാനും അവിടെയുള്ള URL ഇവിടെ നല്കാനും കഴിയും. <anchor>കൂടുതല്‍ അറിയുക</anchor>."
+            }
+        },
+        "webshare": {
+            "heading": "വെബ് പങ്കിടല്‍",
+            "columns": {
+                "title": "തലക്കെട്ട്",
+                "url": "URL",
+                "actions": "പ്രവർത്തനങ്ങൾ"
+            },
+            "tooltip": {
+                "delete": "പങ്കിടല്‍ ഇല്ലാതാക്കുക"
+            },
+            "confirm": {
+                "delete": "ഈ പങ്കിടല്‍ ഇല്ലാതാക്കണമെന്ന് തീർച്ചയാണോ? ഈ പ്രവർത്തനം പിന്നീട് പിൻവലിക്കാനാകില്ല."
+            }
+        },
+        "notification": {
+            "pageShareSuccess": "പേജ് പങ്കിടാനുള്ള URL വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
+            "someError": "എന്തോ തെറ്റായി. ദയവായി പിന്നീട് വീണ്ടും ശ്രമിക്കുക",
+            "webShareDeleteSuccess": "വെബ് പങ്കിടല്‍ വിജയകരമായി ഇല്ലാതാക്കി"
+        }
+    },
+    "ollamaSettings": {
+        "title": "ഒല്ലാമാ ക്രമീകരണങ്ങള്‍",
+        "heading": "ഒല്ലാമാ കോൺഫിഗർ ചെയ്യുക",
+        "settings": {
+            "ollamaUrl": {
+                "label": "ഒല്ലാമാ URL",
+                "placeholder": "ഒല്ലാമാ URL നല്കുക"
+            },
+            "ragSettings": {
+                "label": "RAG ക്രമീകരണങ്ങള്‍",
+                "model": {
+                    "label": "എംബെഡിംഗ് മോഡല്‍",
+                    "required": "ദയവായി ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക",
+                    "help": "`nomic-embed-text` പോലുള്ള എംബെഡിംഗ് മോഡലുകള്‍ ഉപയോഗിക്കുന്നത് വളരെ നന്നായിരിക്കും.",
+                    "placeholder": "ഒരു മോഡല്‍ തിരഞ്ഞെടുക്കുക"
+                },
+                "chunkSize": {
+                    "label": "ചങ്ക് വലുപ്പം",
+                    "placeholder": "ചങ്ക് വലുപ്പം നല്കുക",
+                    "required": "ദയവായി ചങ്ക് വലുപ്പം നല്കുക"
+                },
+                "chunkOverlap": {
+                    "label": "ചങ്ക് ഓവര്‍ലാപ്പ്",
+                    "placeholder": "ചങ്ക് ഓവര്‍ലാപ്പ് നല്കുക",
+                    "required": "ദയവായി ചങ്ക് ഓവര്‍ലാപ്പ് നല്കുക"
+                }
+            },
+            "prompt": {
+                "label": "RAG പ്രോംപ്റ്റ് കോൺഫിഗർ ചെയ്യുക",
+                "option1": "സാധാരണ",
+                "option2": "വെബ്",
+                "alert": "സിസ്റ്റം പ്രോംപ്റ്റ് ഇവിടെ കോൺഫിഗർ ചെയ്യുന്നത് പഴയൗഖികമായി. ദയവായി പ്രോംപ്റ്റുകള്‍ ചേര്‍ക്കാനോ എഡിറ്റുചെയ്യാനോ മാനേജ് പ്രോംപ്റ്റ്‌സ് സെക്ഷന്‍ ഉപയോഗിക്കുക. ഈ സെക്ഷന്‍ ഭാവിയില്‍ നീക്കം ചെയ്യപ്പെടും.",
+                "systemPrompt": "സിസ്റ്റം പ്രോംപ്റ്റ്",
+                "systemPromptPlaceholder": "സിസ്റ്റം പ്രോംപ്റ്റ് നല്കുക",
+                "webSearchPrompt": "വെബ് തിരയല്‍ പ്രോംപ്റ്റ്",
+                "webSearchPromptHelp": "പ്രോംപ്റ്റില്‍ നിന്ന് `{search_results}` നീക്കം ചെയ്യരുത്.",
+                "webSearchPromptError": "ദയവായി ഒരു വെബ് തിരയല്‍ പ്രോംപ്റ്റ് നല്കുക",
+                "webSearchPromptPlaceholder": "വെബ് തിരയല്‍ പ്രോംപ്റ്റ് നല്കുക",
+                "webSearchFollowUpPrompt": "വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ്",
+                "webSearchFollowUpPromptHelp": "പ്രോംപ്റ്റില്‍ നിന്ന് `{chat_history}` യും `{question}` യും നീക്കം ചെയ്യരുത്.",
+                "webSearchFollowUpPromptError": "ദയവായി നിങ്ങളുടെ വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ് നല്കുക!",
+                "webSearchFollowUpPromptPlaceholder": "നിങ്ങളുടെ വെബ് തിരയല്‍ തുടര്‍പ്രോംപ്റ്റ്"
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/assets/locale/ml/sidepanel.json b/src/assets/locale/ml/sidepanel.json
new file mode 100644
index 0000000..a94be53
--- /dev/null
+++ b/src/assets/locale/ml/sidepanel.json
@@ -0,0 +1,6 @@
+{
+    "tooltip": {
+        "embed": "പേജ് പ്രോസസ്സ് ചെയ്യുന്നതിന് കുറച്ച് മിനിറ്റുകൾ എടുത്തേക്കാം. കാത്തിരിക്കൂ.."
+    }
+    
+}
\ No newline at end of file
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index afe7412..26ac2a5 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -25,7 +25,7 @@ export default function OptionLayout({
   children: React.ReactNode
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { t } = useTranslation("option")
+  const { t } = useTranslation(["option", "common"])
 
   const {
     selectedModel,
@@ -115,7 +115,7 @@ export default function OptionLayout({
                       0
                   }
                   showSearch
-                  placeholder={t("selectAModel")}
+                  placeholder={t("common:selectAModel")}
                   className="w-64 "
                   options={models?.map((model) => ({
                     label: model.name,
diff --git a/src/components/Layouts/SettingsOptionLayout.tsx b/src/components/Layouts/SettingsOptionLayout.tsx
index d984fbc..3b50161 100644
--- a/src/components/Layouts/SettingsOptionLayout.tsx
+++ b/src/components/Layouts/SettingsOptionLayout.tsx
@@ -45,7 +45,7 @@ const LinkComponent = (item: {
 
 export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
   const location = useLocation()
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
 
   return (
     <>
diff --git a/src/components/Option/Models/index.tsx b/src/components/Option/Models/index.tsx
index 6f48cfa..88f4804 100644
--- a/src/components/Option/Models/index.tsx
+++ b/src/components/Option/Models/index.tsx
@@ -14,7 +14,7 @@ dayjs.extend(relativeTime)
 export const ModelsBody = () => {
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false)
-  const { t } = useTranslation(["option", "common"])
+  const { t } = useTranslation(["settings", "common"])
 
   const form = useForm({
     initialValues: {
diff --git a/src/components/Option/Playground/PlaygroundForm.tsx b/src/components/Option/Playground/PlaygroundForm.tsx
index d9e0158..6776732 100644
--- a/src/components/Option/Playground/PlaygroundForm.tsx
+++ b/src/components/Option/Playground/PlaygroundForm.tsx
@@ -284,7 +284,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                       }`}>
                       <ImageIcon className="h-5 w-5" />
                     </button>
-                  </Tooltip>
+                  </Tooltip> 
                   {!isSending ? (
                     <Dropdown.Button
                       htmlType="submit"
diff --git a/src/components/Option/Prompt/index.tsx b/src/components/Option/Prompt/index.tsx
index a74b6dc..9eac5d7 100644
--- a/src/components/Option/Prompt/index.tsx
+++ b/src/components/Option/Prompt/index.tsx
@@ -27,7 +27,7 @@ export const PromptBody = () => {
   const [editId, setEditId] = useState("")
   const [createForm] = Form.useForm()
   const [editForm] = Form.useForm()
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
 
   const { data, status } = useQuery({
     queryKey: ["fetchAllPrompts"],
diff --git a/src/components/Option/Settings/ollama.tsx b/src/components/Option/Settings/ollama.tsx
index af8ca63..e71045b 100644
--- a/src/components/Option/Settings/ollama.tsx
+++ b/src/components/Option/Settings/ollama.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from "react-i18next"
 
 export const SettingsOllama = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
 
   const { data: ollamaInfo, status } = useQuery({
     queryKey: ["fetchOllamURL"],
diff --git a/src/components/Option/Settings/other.tsx b/src/components/Option/Settings/other.tsx
index a5361bf..5a61adb 100644
--- a/src/components/Option/Settings/other.tsx
+++ b/src/components/Option/Settings/other.tsx
@@ -16,7 +16,7 @@ export const SettingOther = () => {
   const queryClient = useQueryClient()
 
   const { mode, toggleDarkMode } = useDarkMode()
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
   const {
     changeLocale,
     locale,
diff --git a/src/components/Option/Settings/prompt.tsx b/src/components/Option/Settings/prompt.tsx
index 4829b31..f0cbbc2 100644
--- a/src/components/Option/Settings/prompt.tsx
+++ b/src/components/Option/Settings/prompt.tsx
@@ -12,7 +12,7 @@ import {
 } from "~/services/ollama"
 
 export const SettingPrompt = () => {
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
 
   const [selectedValue, setSelectedValue] = React.useState<"normal" | "web">(
     "web"
diff --git a/src/components/Option/Settings/search-mode.tsx b/src/components/Option/Settings/search-mode.tsx
index 7cb70d4..ee83e7e 100644
--- a/src/components/Option/Settings/search-mode.tsx
+++ b/src/components/Option/Settings/search-mode.tsx
@@ -7,7 +7,7 @@ import {
 } from "~/services/ollama"
 
 export const SearchModeSettings = () => {
-  const { t } = useTranslation("option")
+  const { t } = useTranslation("settings")
   
   const { data, status } = useQuery({
     queryKey: ["fetchIsSimpleInternetSearch"],
diff --git a/src/components/Option/Share/index.tsx b/src/components/Option/Share/index.tsx
index c52f321..5b1c3cb 100644
--- a/src/components/Option/Share/index.tsx
+++ b/src/components/Option/Share/index.tsx
@@ -9,7 +9,7 @@ import { verifyPageShareURL } from "~/utils/verify-page-share"
 
 export const OptionShareBody = () => {
   const queryClient = useQueryClient()
-  const { t } = useTranslation("option")
+  const { t } = useTranslation(["settings"])
 
   const { status, data } = useQuery({
     queryKey: ["fetchShareInfo"],
@@ -72,16 +72,12 @@ export const OptionShareBody = () => {
     mutationFn: onDelete,
     onSuccess: () => {
       queryClient.invalidateQueries({
-        queryKey: ["fetchShareInfo"],
+        queryKey: ["fetchShareInfo"]
       })
-      message.success(
-        t("manageShare.notification.webShareDeleteSuccess")
-      )
+      message.success(t("manageShare.notification.webShareDeleteSuccess"))
     },
     onError: (error) => {
-      message.error(
-        error?.message || t("manageShare.notification.someError")
-      )
+      message.error(error?.message || t("manageShare.notification.someError"))
     }
   })
 
@@ -107,7 +103,7 @@ export const OptionShareBody = () => {
                 name="url"
                 help={
                   <Trans
-                    i18nKey="option:manageShare.form.url.help"
+                    i18nKey="settings:manageShare.form.url.help"
                     components={{
                       anchor: (
                         <a
diff --git a/src/components/Sidepanel/Chat/empty.tsx b/src/components/Sidepanel/Chat/empty.tsx
index 7d9aefc..d6c168c 100644
--- a/src/components/Sidepanel/Chat/empty.tsx
+++ b/src/components/Sidepanel/Chat/empty.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query"
 import { Select } from "antd"
 import { RotateCcw } from "lucide-react"
 import { useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
 import { useMessage } from "~/hooks/useMessage"
 import {
   getAllModels,
@@ -12,6 +13,7 @@ import {
 
 export const EmptySidePanel = () => {
   const [ollamaURL, setOllamaURL] = useState<string>("")
+  const { t } = useTranslation(["playground", "common"])
   const {
     data: ollamaInfo,
     status: ollamaStatus,
@@ -38,7 +40,7 @@ export const EmptySidePanel = () => {
     }
   }, [ollamaInfo])
 
-  const { setSelectedModel, selectedModel, chatMode, setChatMode,  } =
+  const { setSelectedModel, selectedModel, chatMode, setChatMode } =
     useMessage()
 
   return (
@@ -48,7 +50,7 @@ export const EmptySidePanel = () => {
           <div className="inline-flex items-center space-x-2">
             <div className="w-3 h-3 bg-blue-500 rounded-full animate-bounce"></div>
             <p className="dark:text-gray-400 text-gray-900">
-              Searching for your Ollama 🦙
+              {t("ollamaState.searching")}
             </p>
           </div>
         )}
@@ -57,7 +59,7 @@ export const EmptySidePanel = () => {
             <div className="inline-flex  items-center space-x-2">
               <div className="w-3 h-3 bg-green-500 rounded-full"></div>
               <p className="dark:text-gray-400 text-gray-900">
-                Ollama is running 🦙
+                {t("ollamaState.running")}
               </p>
             </div>
           ) : (
@@ -65,7 +67,7 @@ export const EmptySidePanel = () => {
               <div className="inline-flex  space-x-2">
                 <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                 <p className="dark:text-gray-400 text-gray-900">
-                  We couldn't find your Ollama 🦙
+                  {t("ollamaState.notRunning")}
                 </p>
               </div>
 
@@ -83,7 +85,7 @@ export const EmptySidePanel = () => {
                 }}
                 className="inline-flex mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
                 <RotateCcw className="h-4 w-4 mr-3" />
-                Retry
+                {t("common:retry")}
               </button>
             </div>
           )
@@ -91,8 +93,6 @@ export const EmptySidePanel = () => {
 
         {ollamaStatus === "success" && ollamaInfo.isOk && (
           <div className="mt-4">
-            <p className="dark:text-gray-400 text-gray-900">Models:</p>
-
             <Select
               onChange={(e) => {
                 setSelectedModel(e)
@@ -104,7 +104,7 @@ export const EmptySidePanel = () => {
                 option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
               }
               showSearch
-              placeholder="Select a model"
+              placeholder={t("common:selectAModel")}
               style={{ width: "100%" }}
               className="mt-4"
               options={ollamaInfo.models?.map((model) => ({
@@ -145,7 +145,7 @@ export const EmptySidePanel = () => {
                 <label
                   className="mt-px font-light  cursor-pointer select-none text-gray-900 dark:text-gray-400"
                   htmlFor="check">
-                  Chat with Current Page
+                  {t("common:chatWithCurrentPage")}
                 </label>
               </div>
             </div>
diff --git a/src/components/Sidepanel/Chat/form.tsx b/src/components/Sidepanel/Chat/form.tsx
index 8dadc87..70f5c34 100644
--- a/src/components/Sidepanel/Chat/form.tsx
+++ b/src/components/Sidepanel/Chat/form.tsx
@@ -9,6 +9,7 @@ import { useSpeechRecognition } from "~/hooks/useSpeechRecognition"
 import { useWebUI } from "~/store/webui"
 import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, X } from "lucide-react"
+import { useTranslation } from "react-i18next"
 
 type Props = {
   dropedFile: File | undefined
@@ -19,6 +20,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   const inputRef = React.useRef<HTMLInputElement>(null)
   const { sendWhenEnter, setSendWhenEnter } = useWebUI()
   const [typing, setTyping] = React.useState<boolean>(false)
+  const { t } = useTranslation(["playground", "common"])
 
   const textAreaFocus = () => {
     if (textareaRef.current) {
@@ -88,16 +90,13 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
           return
         }
         if (!selectedModel || selectedModel.length === 0) {
-          form.setFieldError("message", "Please select a model")
+          form.setFieldError("message", t("formError.noModel"))
           return
         }
         if (chatMode === "rag") {
           const defaultEM = await defaultEmbeddingModelForRag()
           if (!defaultEM) {
-            form.setFieldError(
-              "message",
-              "Please set an embedding model on the settings page"
-            )
+            form.setFieldError("message", t("formError.noEmbeddingModel"))
             return
           }
         }
@@ -139,16 +138,13 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
           <form
             onSubmit={form.onSubmit(async (value) => {
               if (!selectedModel || selectedModel.length === 0) {
-                form.setFieldError("message", "Please select a model")
+                form.setFieldError("message", t("formError.noModel"))
                 return
               }
               if (chatMode === "rag") {
                 const defaultEM = await defaultEmbeddingModelForRag()
                 if (!defaultEM) {
-                  form.setFieldError(
-                    "message",
-                    "Please set an embedding model on the settings page"
-                  )
+                  form.setFieldError("message", t("formError.noEmbeddingModel"))
                   return
                 }
               }
@@ -181,11 +177,11 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 tabIndex={0}
                 onCompositionStart={() => setTyping(true)}
                 onCompositionEnd={() => setTyping(false)}
-                placeholder="Type a message..."
+                placeholder={t("form.textarea.placeholder")}
                 {...form.getInputProps("message")}
               />
               <div className="flex mt-4 justify-end gap-3">
-                <Tooltip title="Voice Message">
+                <Tooltip title={t("tooltip.speechToText")}>
                   <button
                     type="button"
                     onClick={() => {
@@ -209,7 +205,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                     )}
                   </button>
                 </Tooltip>
-                <Tooltip title="Upload Image">
+                <Tooltip title={t("tooltip.uploadImage")}>
                   <button
                     type="button"
                     onClick={() => {
@@ -250,7 +246,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                             onChange={(e) =>
                               setSendWhenEnter(e.target.checked)
                             }>
-                            Send when Enter pressed
+                            {t("sendWhenEnter")}
                           </Checkbox>
                         )
                       }
@@ -271,7 +267,7 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                         <path d="M20 4v7a4 4 0 01-4 4H4"></path>
                       </svg>
                     ) : null}
-                    Submit
+                    {t("common:submit")}
                   </div>
                 </Dropdown.Button>
               </div>
diff --git a/src/components/Sidepanel/Chat/header.tsx b/src/components/Sidepanel/Chat/header.tsx
index d3c42a2..69ae12f 100644
--- a/src/components/Sidepanel/Chat/header.tsx
+++ b/src/components/Sidepanel/Chat/header.tsx
@@ -3,18 +3,25 @@ import { useMessage } from "~/hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
 import { BoxesIcon, CogIcon, RefreshCcw } from "lucide-react"
+import { useTranslation } from "react-i18next"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding } = useMessage()
+  const { t } = useTranslation(["sidepanel", "common"])
+
   return (
     <div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
-        <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
-        <span className="ml-1 text-sm ">Page Assist</span>
+        <img
+          className="h-6 w-auto"
+          src={logoImage}
+          alt={t("common:pageAssist")}
+        />
+        <span className="ml-1 text-sm ">{t("common:pageAssist")}</span>
       </div>
 
       <div className="flex items-center space-x-3">
         {isEmbedding ? (
-          <Tooltip title="It may take a few minutes to embed the page. Please wait...">
+          <Tooltip title={t("tooltip.embed")}>
             <BoxesIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
           </Tooltip>
         ) : null}
diff --git a/src/components/Sidepanel/Settings/body.tsx b/src/components/Sidepanel/Settings/body.tsx
index 9a215f8..77cfb97 100644
--- a/src/components/Sidepanel/Settings/body.tsx
+++ b/src/components/Sidepanel/Settings/body.tsx
@@ -20,8 +20,11 @@ import { SaveButton } from "~/components/Common/SaveButton"
 import { SUPPORTED_LANGUAGES } from "~/utils/supporetd-languages"
 import { useMessage } from "~/hooks/useMessage"
 import { MoonIcon, SunIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { useI18n } from "@/hooks/useI18n"
 
 export const SettingsBody = () => {
+  const { t } = useTranslation("settings")
   const [ollamaURL, setOllamaURL] = React.useState<string>("")
   const [systemPrompt, setSystemPrompt] = React.useState<string>("")
   const [ragPrompt, setRagPrompt] = React.useState<string>("")
@@ -33,6 +36,8 @@ export const SettingsBody = () => {
   const { speechToTextLanguage, setSpeechToTextLanguage } = useMessage()
   const { mode, toggleDarkMode } = useDarkMode()
 
+  const { changeLocale, locale, supportLanguage } = useI18n()
+
   const { data, status } = useQuery({
     queryKey: ["sidebarSettings"],
     queryFn: async () => {
@@ -104,20 +109,26 @@ export const SettingsBody = () => {
   return (
     <div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
-        <h2 className="text-md font-semibold dark:text-white">Prompt</h2>
+        <h2 className="text-md font-semibold dark:text-white">
+          {t("managePrompts.title")}
+        </h2>
         <div className="my-3 flex justify-end">
           <Radio.Group
             defaultValue={selectedValue}
             onChange={(e) => setSelectedValue(e.target.value)}>
-            <Radio.Button value="normal">Normal</Radio.Button>
-            <Radio.Button value="rag">Rag</Radio.Button>
+            <Radio.Button value="normal">
+              {t("managePrompts.option1")}
+            </Radio.Button>
+            <Radio.Button value="rag">
+              {t("managePrompts.option2")}
+            </Radio.Button>
           </Radio.Group>
         </div>
 
         {selectedValue === "normal" && (
           <div>
             <span className="text-md font-thin text-gray-500 dark:text-gray-400">
-              System Prompt
+              {t("managePrompts.systemPrompt")}
             </span>
             <textarea
               className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -138,7 +149,7 @@ export const SettingsBody = () => {
           <div>
             <div className="mb-3">
               <span className="text-md font-thin text-gray-500 dark:text-gray-400">
-                System Prompt
+                {t("managePrompts.systemPrompt")}
               </span>
               <textarea
                 className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -148,7 +159,7 @@ export const SettingsBody = () => {
             </div>
             <div className="mb-3">
               <span className="text-md  font-thin text-gray-500 dark:text-gray-400">
-                Question Prompt
+                {t("managePrompts.questionPrompt")}
               </span>
               <textarea
                 className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -170,14 +181,14 @@ export const SettingsBody = () => {
 
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
-          Ollama URL
+          {t("ollamaSettings.heading")}
         </h2>
         <input
           className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
           value={ollamaURL}
           type="url"
           onChange={(e) => setOllamaURL(e.target.value)}
-          placeholder="Enter Ollama URL here"
+          placeholder={t("ollamaSettings.settings.ollamaUrl.placeholder")}
         />
         <div className="flex justify-end">
           <SaveButton
@@ -190,7 +201,7 @@ export const SettingsBody = () => {
 
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
-          RAG Configuration
+          {t("ollamaSettings.settings.ragSettings.label")}
         </h2>
         <Form
           onFinish={(data) => {
@@ -207,9 +218,14 @@ export const SettingsBody = () => {
           }}>
           <Form.Item
             name="defaultEM"
-            label="Embedding Model"
-            help="Highly recommended to use embedding models like `nomic-embed-text`."
-            rules={[{ required: true, message: "Please select a model!" }]}>
+            label={t("ollamaSettings.settings.ragSettings.model.label")}
+            help={t("ollamaSettings.settings.ragSettings.model.help")}
+            rules={[
+              {
+                required: true,
+                message: t("ollamaSettings.settings.ragSettings.model.required")
+              }
+            ]}>
             <Select
               size="large"
               filterOption={(input, option) =>
@@ -229,21 +245,38 @@ export const SettingsBody = () => {
 
           <Form.Item
             name="chunkSize"
-            label="Chunk Size"
+            label={t("ollamaSettings.settings.ragSettings.chunkSize.label")}
             rules={[
-              { required: true, message: "Please input your chunk size!" }
-            ]}>
-            <InputNumber style={{ width: "100%" }} placeholder="Chunk Size" />
-          </Form.Item>
-          <Form.Item
-            name="chunkOverlap"
-            label="Chunk Overlap"
-            rules={[
-              { required: true, message: "Please input your chunk overlap!" }
+              {
+                required: true,
+                message: t(
+                  "ollamaSettings.settings.ragSettings.chunkSize.required"
+                )
+              }
             ]}>
             <InputNumber
               style={{ width: "100%" }}
-              placeholder="Chunk Overlap"
+              placeholder={t(
+                "ollamaSettings.settings.ragSettings.chunkSize.placeholder"
+              )}
+            />
+          </Form.Item>
+          <Form.Item
+            name="chunkOverlap"
+            label={t("ollamaSettings.settings.ragSettings.chunkOverlap.label")}
+            rules={[
+              {
+                required: true,
+                message: t(
+                  "ollamaSettings.settings.ragSettings.chunkOverlap.required"
+                )
+              }
+            ]}>
+            <InputNumber
+              style={{ width: "100%" }}
+              placeholder={t(
+                "ollamaSettings.settings.ragSettings.chunkOverlap.placeholder"
+              )}
             />
           </Form.Item>
 
@@ -254,10 +287,33 @@ export const SettingsBody = () => {
       </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
-          Speech Recognition Language
+          {t("generalSettings.settings.language.label")}{" "}
         </h2>
         <Select
-          placeholder="Select Language"
+          placeholder={t("generalSettings.settings.language.placeholder")}
+          showSearch
+          options={supportLanguage}
+          value={locale}
+          filterOption={(input, option) =>
+            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+          onChange={(value) => {
+            changeLocale(value)
+          }}
+          style={{
+            width: "100%"
+          }}
+        />
+      </div>
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
+        <h2 className="text-md mb-4 font-semibold dark:text-white">
+          {t("generalSettings.settings.speechRecognitionLang.label")}{" "}
+        </h2>
+        <Select
+          placeholder={t(
+            "generalSettings.settings.speechRecognitionLang.placeholder"
+          )}
           allowClear
           showSearch
           options={SUPPORTED_LANGUAGES}
@@ -275,20 +331,22 @@ export const SettingsBody = () => {
         />
       </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
-        <h2 className="text-md mb-4 font-semibold dark:text-white">Theme</h2>
+        <h2 className="text-md mb-4 font-semibold dark:text-white">
+          {t("generalSettings.settings.darkMode.label")}{" "}
+        </h2>
         {mode === "dark" ? (
           <button
             onClick={toggleDarkMode}
-            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
             <SunIcon className="h-4 w-4 mr-2" />
-            Light
+            {t("generalSettings.settings.darkMode.options.light")}
           </button>
         ) : (
           <button
             onClick={toggleDarkMode}
-            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
             <MoonIcon className="h-4 w-4 mr-2" />
-            Dark
+            {t("generalSettings.settings.darkMode.options.dark")}
           </button>
         )}
       </div>
diff --git a/src/components/Sidepanel/Settings/header.tsx b/src/components/Sidepanel/Settings/header.tsx
index 81f01a9..9f714d8 100644
--- a/src/components/Sidepanel/Settings/header.tsx
+++ b/src/components/Sidepanel/Settings/header.tsx
@@ -1,16 +1,18 @@
 import { ChevronLeft } from "lucide-react"
+import { useTranslation } from "react-i18next"
 import { Link } from "react-router-dom"
 import logoImage from "~/assets/icon.png"
 
 export const SidepanelSettingsHeader = () => {
+  const { t } = useTranslation("common")
   return (
     <div className="flex px-3 justify-start gap-3 bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700  py-4 items-center">
       <Link to="/">
         <ChevronLeft className="h-5 w-5 text-gray-500 dark:text-gray-400" />
       </Link>
       <div className="focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700 flex items-center dark:text-white">
-        <img className="h-6 w-auto" src={logoImage} alt="Page Assist" />
-        <span className="ml-1 text-sm ">Page Assist</span>
+        <img className="h-6 w-auto" src={logoImage} alt={t("pageAssist")} />
+        <span className="ml-1 text-sm ">{t("pageAssist")}</span>
       </div>
     </div>
   )
diff --git a/src/i18n/lang/en.ts b/src/i18n/lang/en.ts
index c0ba87d..182fc03 100644
--- a/src/i18n/lang/en.ts
+++ b/src/i18n/lang/en.ts
@@ -1,10 +1,14 @@
 import option from "@/assets/locale/en/option.json";
 import playground from "@/assets/locale/en/playground.json";
 import common from "@/assets/locale/en/common.json";
+import sidepanel from "@/assets/locale/en/sidepanel.json";
+import settings from "@/assets/locale/en/settings.json";
 
 
 export const en = {
     option,
     playground,
-    common
+    common,
+    sidepanel,
+    settings
 }
\ No newline at end of file
diff --git a/src/i18n/lang/ml.ts b/src/i18n/lang/ml.ts
index 344bd22..315e9c4 100644
--- a/src/i18n/lang/ml.ts
+++ b/src/i18n/lang/ml.ts
@@ -1,10 +1,14 @@
 import option from "@/assets/locale/ml/option.json";
 import playground from "@/assets/locale/ml/playground.json";
 import common from "@/assets/locale/ml/common.json";
+import sidepanel from "@/assets/locale/ml/sidepanel.json";
+import settings from "@/assets/locale/ml/settings.json";
 
 
 export const ml = {
     option,
     playground,
-    common
+    common,
+    sidepanel,
+    settings
 }
\ No newline at end of file