diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index 69b57d8..b56d064 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import {
   createAccount,
   checkCredentials,
-  getData
 } from '../backend/database';
 import Settings from './settings/Settings'; // Import the Settings component
 
@@ -55,10 +54,6 @@ const Login: React.FC = () => {
       const success = await checkCredentials(accountName, password);
       if (success) {
         setIsLoggedIn(true); // Successful login
-        var data = await getData(accountName, password)
-        if (data) {
-          localStorage.setItem("dataFromServer", data)
-        }
         setShowLoginPopup(false); // Close the login popup
       } else {
         alert('Incorrect credentials');
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 6ca8aeb..dee935e 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -137,11 +137,11 @@ const modelList = {
   }
 }
 
-// Define the available selectedAIFunction options
+// Define the available category options
 const modelDropdown = {
-  offlineNonFoss: ['Offline Fast', 'Offline Slow'],
+  offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
   offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
-  onlineNonFoss: [
+  onlineWithoutFoss: [
     'Online Cheap (OpenAI)',
     'Online Expensive (OpenAI)',
     'Online Cheap (Anthropic)',
@@ -153,7 +153,7 @@ const modelDropdown = {
   onlineFoss: ['Online (FOSS) (La Plateforme)'],
 };
 
-const selectedAIFunction = [
+const Category = [
   'Code', 
   'Math', 
   'Language', 
@@ -166,38 +166,25 @@ const selectedAIFunction = [
   'Custom2'
 ]
 
-const ModelSection: React.FC = () => {
+const Models: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
-  const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
+  const [selectedModel, setSelectedModel] = useState('');
   const [radioSelection, setRadioSelection] = useState<string | null>("")
-  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
-  const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
-  
+  const [activeCategory, setActiveCategory] = useState('');
+  const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
+
   useEffect(() => {
-    var temp = localStorage.getItem("activeSelectedAIFunction") || ""
-    setActiveSelectedAIFunction(temp)
-    if (!localStorage.getItem('selectedModelDropdown')) {
-      localStorage.setItem("selectedModelDropdown", "Offline Fast" )
-    }
-
-    if (!localStorage.getItem("activeSelectedAIFunction")) {
-      setActiveSelectedAIFunction('Code')
-      localStorage.setItem('activeSelectedAIFunction' ,'Code')
-    }
-
-    if (!localStorage.getItem("model")) {
-      localStorage.setItem("model" ,'starcoder2')
-    }
+    // Retrieve initial values from localStorage
+    setRadioSelection(localStorage.getItem('radioSelection') || '');
+    setSelectedModel(localStorage.getItem('selectedModel') || '');
 
     const handleStorageChange = () => {
-      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
+      setSelectedModel(localStorage.getItem('selectedModel') || '');
     };
 
     // Update immediately when localStorage changes
     window.addEventListener('storage', handleStorageChange);
 
-    setRadioSelection(localStorage.getItem('radioSelection') || '');
-    setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
     // Cleanup listener on component unmount
     return () => {
       window.removeEventListener('storage', handleStorageChange);
@@ -205,16 +192,16 @@ const ModelSection: React.FC = () => {
   }, []); // Dependency array can remain empty if you only want this to run on mount
 
   useEffect(() => {
-    var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
-    if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
-      setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
+    const storedCategory = localStorage.getItem("activeCategory");
+    if (storedCategory !== currentCategory) {
+      setCurrentCategory(storedCategory);
     }
-  }, [activeSelectedAIFunction]);
+  }, [activeCategory]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
-    setSelectedModelDropdown(newModel);
-    localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
+    setSelectedModel(newModel);
+    localStorage.setItem('selectedModel', newModel); // Update localStorage directly
   };
 
   // Determine the filtered models based on current radioSelection
@@ -223,7 +210,7 @@ const ModelSection: React.FC = () => {
     switch (radioSelection) {
       case 'Offline':
         models = [
-          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineWithoutFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show only offline models without FOSS
         break;
@@ -234,7 +221,7 @@ const ModelSection: React.FC = () => {
         break;
       case 'Online':
         models = [
-          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineWithoutFoss,
           ...modelDropdown.offlineFoss,
         ]; // Show only online models without FOSS
         break;
@@ -245,9 +232,9 @@ const ModelSection: React.FC = () => {
         break;
       case 'None':
         models = [
-          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineWithoutFoss,
           ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineWithoutFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show all models if nothing matches
         break;
@@ -259,9 +246,9 @@ const ModelSection: React.FC = () => {
         break;
       default:
         models = [
-          ...modelDropdown.offlineNonFoss,
+          ...modelDropdown.offlineWithoutFoss,
           ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineNonFoss,
+          ...modelDropdown.onlineWithoutFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show all models if nothing matches
         break;
@@ -270,14 +257,14 @@ const ModelSection: React.FC = () => {
   })();
 
   const isOfflineModel = (model: string) =>
-    modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
+    modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
-    localStorage.setItem('activeSelectedAIFunction' , model)
-    setActiveSelectedAIFunction(model)
-    const selectedAIFunction = selectedModelDropdown as keyof typeof modelList;
-    localStorage.setItem("model", modelList[selectedAIFunction][model as keyof typeof modelList[typeof selectedAIFunction]])
-    localStorage.setItem("type", modelList[selectedAIFunction]['model_type' as keyof typeof modelList[typeof selectedAIFunction]])
+    localStorage.setItem('activeCategory' , model)
+    setActiveCategory(model)
+    const category = selectedModel as keyof typeof modelList;
+    localStorage.setItem("model", modelList[category][model as keyof typeof modelList[typeof category]])
+    localStorage.setItem("type", modelList[category]['model_type' as keyof typeof modelList[typeof category]])
   }
 
   return (
@@ -290,7 +277,7 @@ const ModelSection: React.FC = () => {
         {/* Model Selection Dropdown */}
         <div className="model-dropdown">
           <label htmlFor="model-select">Select AI Model:</label>
-          <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
+          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
             {filteredModels.map((model) => (
               <option key={model} value={model}>
                 {model}
@@ -301,16 +288,16 @@ const ModelSection: React.FC = () => {
 
         {/* Model Grid with Cards */}
         <div className="grid">
-          {selectedAIFunction.map(
+          {Category.map(
             (displayedCategory) => (
               <button
                 key={displayedCategory}
-                className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} 
+                className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} 
                 onClick={() => modelClicked(displayedCategory)}
               >
                 <div className="overlay">
                   <h3>{displayedCategory}</h3>
-                  {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                  {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                 </div>
               </button>
             )
@@ -321,4 +308,4 @@ const ModelSection: React.FC = () => {
   );
 };
 
-export default ModelSection;
+export default Models;
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 38e7862..71cacda 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -174,8 +174,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   const colorSettings = [
-    { name: "Background Color", value: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" },
-    { name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-background-color" },
+    { name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
+    { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" },
     { name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
     { name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
     { name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },
@@ -278,7 +278,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-    localStorage.clear();
+    localStorage.removeItem('accountName');
+    localStorage.removeItem('accountEmail');
+    localStorage.removeItem('accountPassword');
     alert('Successfully logged out!');
     window.location.reload();
   };
@@ -365,7 +367,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     if (useName && usePassword) {
       const success = await deleteAccount(useName, usePassword);
       if (success) {
-        localStorage.clear();
         alert('Account deleted successfully!');
         window.location.reload()
         // Optionally, redirect or reset state here
@@ -656,4 +657,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   );
 };
 
-export default Settings;
\ No newline at end of file
+export default Settings;
diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index e88ca18..dcd8981 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -1,194 +1,172 @@
 export const applyIOMarketTheme = () => {
-  document.documentElement.style.setProperty('--header-background-color', '#7e7e7e');
-  document.documentElement.style.setProperty('--header-text-color', '#ffffff');
-  document.documentElement.style.setProperty('--background-color', '#8B9635');
-  document.documentElement.style.setProperty('--text-color', '#474D22');
-  document.documentElement.style.setProperty('--input-background-color', '#ffffff');
-  document.documentElement.style.setProperty('--input-button-color', '#8B9635');
-  document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b');
-  document.documentElement.style.setProperty('--user-message-background-color', '#8B9635');
-  document.documentElement.style.setProperty('--user-message-text-color', '#000');
-  document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB');
-  document.documentElement.style.setProperty('--ai-message-text-color', '#000');
-  document.documentElement.style.setProperty('--button-background-color', '#8B9635');
-  document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b');
-  document.documentElement.style.setProperty('--models-background-color', '#ffffff');
-  document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
-  document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
-  document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
-  document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
-  document.documentElement.style.setProperty('--close-button-color', 'red');
-  document.documentElement.style.setProperty('--close-button-hover-color', '#9e0101');
-  document.documentElement.style.setProperty('--apply-button-color', '#8B9635');
-  document.documentElement.style.setProperty('--apply-button-hover-color', '#6b7c2b');
-  document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
-  document.documentElement.style.setProperty('--overlay-text-color', 'white');
-  document.documentElement.style.setProperty('--faq-background-color', '#474D22');
-  document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
-  document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
-  document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
-  document.documentElement.style.setProperty('--faq-item-text-color', '#333');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
-  document.documentElement.style.setProperty('--popup-background-color', '#8B9635');
-  document.documentElement.style.setProperty('--pop-up-text', '#000');
-  document.documentElement.style.setProperty('--input-border-color', '#8B9635');
-  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
-  document.documentElement.style.setProperty('--font-size', '16px'); 
+    document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); 
+    document.documentElement.style.setProperty('--header-text-color', '#ffffff');
+    document.documentElement.style.setProperty('--background-color', '#8B9635');
+    document.documentElement.style.setProperty('--text-color', '#474D22');
+    document.documentElement.style.setProperty('--input-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--input-button-color', '#8B9635');
+    document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b');
+    document.documentElement.style.setProperty('--user-message-background-color', '#8B9635');
+    document.documentElement.style.setProperty('--user-message-text-color', '#000');
+    document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB');
+    document.documentElement.style.setProperty('--ai-message-text-color', '#000');
+    document.documentElement.style.setProperty('--button-background-color', '#8B9635');
+    document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b');
+    document.documentElement.style.setProperty('--models-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
+    document.documentElement.style.setProperty('--left-panel-background-color', '#79832e');
+    document.documentElement.style.setProperty('--conversation-background-color', '#79832e');
+    document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--faq-background-color', '#474D22');
+    document.documentElement.style.setProperty('--faq-heading-color', '#8B9635');
+    document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe');
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22');
+    document.documentElement.style.setProperty('--faq-item-text-color', '#333');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
+    document.documentElement.style.setProperty('--pop-up-text', '#000');
+    document.documentElement.style.setProperty('--input-border-color', '#8B9635');
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', '16px');
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
 };
 
 export const applyWhiteTheme = () => {
-  document.documentElement.style.setProperty('--header-background-color', '#f0f0f0'); // Lighter header background
-  document.documentElement.style.setProperty('--header-text-color', '#333'); // Dark text for contrast
-  document.documentElement.style.setProperty('--background-color', '#ffffff'); // White background
-  document.documentElement.style.setProperty('--text-color', '#000'); // Dark text color
-  document.documentElement.style.setProperty('--input-background-color', '#f9f9f9'); // Light input background
-  document.documentElement.style.setProperty('--input-button-color', '#cccccc'); // Light button color
-  document.documentElement.style.setProperty('--input-button-hover-color', '#b3b3b3'); // Slightly darker on hover
-  document.documentElement.style.setProperty('--user-message-background-color', '#e0e0e0'); // Light grey for user messages
-  document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Dark text for contrast
-  document.documentElement.style.setProperty('--ai-message-background-color', '#f7f7f7'); // Very light background for AI messages
-  document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Dark text for readability
-  document.documentElement.style.setProperty('--button-background-color', '#cccccc'); // Light button background
-  document.documentElement.style.setProperty('--button-hover-background-color', '#b3b3b3'); // Darker on hover
-  document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // White background for models section
-  document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Light background for history section
-  document.documentElement.style.setProperty('--left-panel-background-color', '#e0e0e0'); // Light grey for the left panel
-  document.documentElement.style.setProperty('--conversation-background-color', '#e0e0e0'); // Light grey conversation background
-  document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // White document background
-  document.documentElement.style.setProperty('--close-button-color', '#ff4d4d'); // Soft red close button
-  document.documentElement.style.setProperty('--close-button-hover-color', '#ff1a1a'); // Brighter red on hover
-  document.documentElement.style.setProperty('--apply-button-color', '#cccccc'); // Light button color for apply
-  document.documentElement.style.setProperty('--apply-button-hover-color', '#b3b3b3'); // Darker hover color for apply button
-  document.documentElement.style.setProperty('--burger-menu-background-color', '#e0e0e0'); // Light grey burger menu background
-  document.documentElement.style.setProperty('--overlay-text-color', '#333'); // Dark overlay text
-  document.documentElement.style.setProperty('--faq-background-color', '#f0f0f0'); // Light FAQ section background
-  document.documentElement.style.setProperty('--faq-heading-color', '#333'); // Dark heading for contrast
-  document.documentElement.style.setProperty('--faq-item-background-color', '#ffffff'); // White background for FAQ items
-  document.documentElement.style.setProperty('--faq-item-heading-color', '#000'); // Dark headings for FAQ items
-  document.documentElement.style.setProperty('--faq-item-text-color', '#666'); // Medium grey text color for readability
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#eaeaea'); // Slight hover effect for FAQ items
-  document.documentElement.style.setProperty('--popup-background-color', '#ffffff'); // White popup background
-  document.documentElement.style.setProperty('--pop-up-text', '#000'); // Dark text for pop-ups
-  document.documentElement.style.setProperty('--input-border-color', '#cccccc'); // Light input border color
-  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Same font family
-  document.documentElement.style.setProperty('--font-size', '16px'); // Same font size
+    document.documentElement.style.setProperty('--header-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--header-text-color', '#000000');
+    document.documentElement.style.setProperty('--background-color', '#f0f0f0');
+    document.documentElement.style.setProperty('--text-color', '#000000');
+    document.documentElement.style.setProperty('--input-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--input-button-color', '#007bff');
+    document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3');
+    document.documentElement.style.setProperty('--user-message-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--user-message-text-color', '#000000');
+    document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9');
+    document.documentElement.style.setProperty('--ai-message-text-color', '#000000');
+    document.documentElement.style.setProperty('--button-background-color', '#007bff');
+    document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3');
+    document.documentElement.style.setProperty('--models-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--history-background-color', '#f9f9f9');
+    document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--conversation-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--doc-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--faq-background-color', '#ffffff');
+    document.documentElement.style.setProperty('--faq-heading-color', '#007bff');
+    document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9');
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
+    document.documentElement.style.setProperty('--faq-item-text-color', '#333333');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0');
+    document.documentElement.style.setProperty('--pop-up-text', '#000000');
+    document.documentElement.style.setProperty('--input-border-color', '#ced4da');
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', '16px');
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
 };
 
 export const applyBlackTheme = () => {
-  document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
-  document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // White text for header
-  document.documentElement.style.setProperty('--background-color', '#2c2c2c'); // Dark main background
-  document.documentElement.style.setProperty('--text-color', '#f0f0f0'); // Light text color
-  document.documentElement.style.setProperty('--input-background-color', '#3d3d3d'); // Dark input background
-  document.documentElement.style.setProperty('--input-button-color', '#4caf50'); // Button color
-  document.documentElement.style.setProperty('--input-button-hover-color', '#66bb6a'); // Button hover color
-  document.documentElement.style.setProperty('--user-message-background-color', '#4caf50'); // User message background
-  document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User message text color
-  document.documentElement.style.setProperty('--ai-message-background-color', '#424242'); // AI message background
-  document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI message text color
-  document.documentElement.style.setProperty('--button-background-color', '#4caf50'); // Button background color
-  document.documentElement.style.setProperty('--button-hover-background-color', '#66bb6a'); // Button hover color
-  document.documentElement.style.setProperty('--models-background-color', '#3d3d3d'); // Dark background for models section
-  document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
-  document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
-  document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
-  document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
-  document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
-  document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
-  document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
-  document.documentElement.style.setProperty('--apply-button-hover-color', '#66bb6a'); // Apply button hover color
-  document.documentElement.style.setProperty('--burger-menu-background-color', '#1a1a1a'); // Dark burger menu background
-  document.documentElement.style.setProperty('--overlay-text-color', '#ffffff'); // White overlay text
-  document.documentElement.style.setProperty('--faq-background-color', '#333333'); // Dark background for FAQ section
-  document.documentElement.style.setProperty('--faq-heading-color', '#4caf50'); // FAQ heading color
-  document.documentElement.style.setProperty('--faq-item-background-color', '#4c4c4c'); // Dark FAQ item background
-  document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // White FAQ item heading
-  document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Light text for FAQ items
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', '#555555'); // Hover background for FAQ items
-  document.documentElement.style.setProperty('--popup-background-color', '#4caf50'); // Dark popup background
-  document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // White pop-up text
-  document.documentElement.style.setProperty('--input-border-color', '#4caf50'); // Input border color
-  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
-  document.documentElement.style.setProperty('--font-size', '16px'); // Font size
-  
+    document.documentElement.style.setProperty('--header-background-color', '#1a1a1a');
+    document.documentElement.style.setProperty('--header-text-color', '#ffffff');
+    document.documentElement.style.setProperty('--background-color', '#121212');
+    document.documentElement.style.setProperty('--text-color', '#e0e0e0');
+    document.documentElement.style.setProperty('--input-background-color', '#1e1e1e');
+    document.documentElement.style.setProperty('--input-button-color', '#3c3c3c');
+    document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a');
+    document.documentElement.style.setProperty('--user-message-background-color', '#000000');
+    document.documentElement.style.setProperty('--user-message-text-color', '#ffffff');
+    document.documentElement.style.setProperty('--ai-message-background-color', '#202020');
+    document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff');
+    document.documentElement.style.setProperty('--button-background-color', '#3c3c3c');
+    document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a');
+    document.documentElement.style.setProperty('--models-background-color', '#1e1e1e');
+    document.documentElement.style.setProperty('--history-background-color', '#1a1a1a');
+    document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e');
+    document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c');
+    document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e');
+    document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c');
+    document.documentElement.style.setProperty('--faq-heading-color', '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c');
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a');
+    document.documentElement.style.setProperty('--pop-up-text', '#ffffff');
+    document.documentElement.style.setProperty('--input-border-color', '#3c3c3c');
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', '16px');
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e');
 };
 
 export const applyCustomTheme = () => {
-  const themeVariables = {
-      backgroundColor: localStorage.getItem('backgroundColor'),
-      headerBackground: localStorage.getItem('headerBackground'),
-      textColor: localStorage.getItem('textColor'),
-      inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
-      inputButtonColor: localStorage.getItem('inputButtonColor'),
-      inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
-      userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
-      userMessageTextColor: localStorage.getItem('userMessageTextColor'),
-      aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
-      aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
-      buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
-      buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
-      modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
-      historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
-      leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
-      conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
-      faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-      faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-      faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-      faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-      faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-      faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-      inputBorderColor: localStorage.getItem('inputBorderColor'),
-      fontFamily: localStorage.getItem('fontFamily'),
-      fontSize: localStorage.getItem('fontSize'),
-      burgerMenu: localStorage.getItem('burgerMenu'),
-  };
+    const themeVariables = {
+        backgroundColor: localStorage.getItem('backgroundColor'),
+        textColor: localStorage.getItem('textColor'),
+        inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+        inputButtonColor: localStorage.getItem('inputButtonColor'),
+        inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+        userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+        userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+        aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+        aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+        buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+        buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+        modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+        historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+        leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+        conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+        inputBorderColor: localStorage.getItem('inputBorderColor'),
+        fontFamily: localStorage.getItem('fontFamily'),
+        fontSize: localStorage.getItem('fontSize'),
+        burgerMenu: localStorage.getItem('burgerMenu'),
+    };
 
-  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
-  document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
-  document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
-  document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
-  document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
-  document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
-  document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
-  document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
-  document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
-  document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
-  document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
-  document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+    document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
+    document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000');
+    document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020');
+    document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff');
+    document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
+    document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
+    document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
+    document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
+    document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
+    document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
+    document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
+    document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
+    document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
+    document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
 };
 
 // This is the new function that calls the appropriate theme application
 export const applyTheme = (theme: string) => {
-  switch (theme) {
-      case 'IOMARKET':
-        applyIOMarketTheme();
-        break;
-      case 'WHITE':
-        applyWhiteTheme();
-        break;
-      case 'BLACK':
-        applyBlackTheme();
-        break;
-      case 'CUSTOM':
-        applyCustomTheme();
-        break;
-      default:
-        applyIOMarketTheme();
-        break;
-  }
+    switch (theme) {
+        case 'IOMARKET':
+          applyIOMarketTheme();
+          break;
+        case 'WHITE':
+          applyWhiteTheme();
+          break;
+        case 'BLACK':
+          applyBlackTheme();
+          break;
+        case 'CUSTOM':
+          // Handle custom theme application here if necessary
+          break;
+        default:
+          applyIOMarketTheme();
+          break;
+    }
 };
-