diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index b56d064..69b57d8 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import {
   createAccount,
   checkCredentials,
+  getData
 } from '../backend/database';
 import Settings from './settings/Settings'; // Import the Settings component
 
@@ -54,6 +55,10 @@ 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 dee935e..6ca8aeb 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -137,11 +137,11 @@ const modelList = {
   }
 }
 
-// Define the available category options
+// Define the available selectedAIFunction options
 const modelDropdown = {
-  offlineWithoutFoss: ['Offline Fast', 'Offline Slow'],
+  offlineNonFoss: ['Offline Fast', 'Offline Slow'],
   offlineFoss: ['Offline Fast (FOSS)', 'Offline Slow (FOSS)'],
-  onlineWithoutFoss: [
+  onlineNonFoss: [
     'Online Cheap (OpenAI)',
     'Online Expensive (OpenAI)',
     'Online Cheap (Anthropic)',
@@ -153,7 +153,7 @@ const modelDropdown = {
   onlineFoss: ['Online (FOSS) (La Plateforme)'],
 };
 
-const Category = [
+const selectedAIFunction = [
   'Code', 
   'Math', 
   'Language', 
@@ -166,25 +166,38 @@ const Category = [
   'Custom2'
 ]
 
-const Models: React.FC = () => {
+const ModelSection: React.FC = () => {
   // Initialize state with value from localStorage or default to ''
-  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedModelDropdown, setSelectedModelDropdown] = useState('');
   const [radioSelection, setRadioSelection] = useState<string | null>("")
-  const [activeCategory, setActiveCategory] = useState('');
-  const [currentCategory, setCurrentCategory] = useState(localStorage.getItem("activeCategory"));
-
+  const [activeSelectedAIFunction, setActiveSelectedAIFunction] = useState('');
+  const [currentSelectedAIFunction, setCurrentSelectedAIFunction] = useState<string | null>("");
+  
   useEffect(() => {
-    // Retrieve initial values from localStorage
-    setRadioSelection(localStorage.getItem('radioSelection') || '');
-    setSelectedModel(localStorage.getItem('selectedModel') || '');
+    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')
+    }
 
     const handleStorageChange = () => {
-      setSelectedModel(localStorage.getItem('selectedModel') || '');
+      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
     };
 
     // 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);
@@ -192,16 +205,16 @@ const Models: React.FC = () => {
   }, []); // Dependency array can remain empty if you only want this to run on mount
 
   useEffect(() => {
-    const storedCategory = localStorage.getItem("activeCategory");
-    if (storedCategory !== currentCategory) {
-      setCurrentCategory(storedCategory);
+    var storedActiveSelectedAIFunction = localStorage.getItem("activeSelectedAIFunction") || "";
+    if (storedActiveSelectedAIFunction !== currentSelectedAIFunction) {
+      setCurrentSelectedAIFunction(storedActiveSelectedAIFunction);
     }
-  }, [activeCategory]);
+  }, [activeSelectedAIFunction]);
 
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const newModel = event.target.value;
-    setSelectedModel(newModel);
-    localStorage.setItem('selectedModel', newModel); // Update localStorage directly
+    setSelectedModelDropdown(newModel);
+    localStorage.setItem('selectedModelDropdown', newModel); // Update localStorage directly
   };
 
   // Determine the filtered models based on current radioSelection
@@ -210,7 +223,7 @@ const Models: React.FC = () => {
     switch (radioSelection) {
       case 'Offline':
         models = [
-          ...modelDropdown.onlineWithoutFoss,
+          ...modelDropdown.onlineNonFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show only offline models without FOSS
         break;
@@ -221,7 +234,7 @@ const Models: React.FC = () => {
         break;
       case 'Online':
         models = [
-          ...modelDropdown.offlineWithoutFoss,
+          ...modelDropdown.offlineNonFoss,
           ...modelDropdown.offlineFoss,
         ]; // Show only online models without FOSS
         break;
@@ -232,9 +245,9 @@ const Models: React.FC = () => {
         break;
       case 'None':
         models = [
-          ...modelDropdown.offlineWithoutFoss,
+          ...modelDropdown.offlineNonFoss,
           ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineWithoutFoss,
+          ...modelDropdown.onlineNonFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show all models if nothing matches
         break;
@@ -246,9 +259,9 @@ const Models: React.FC = () => {
         break;
       default:
         models = [
-          ...modelDropdown.offlineWithoutFoss,
+          ...modelDropdown.offlineNonFoss,
           ...modelDropdown.offlineFoss,
-          ...modelDropdown.onlineWithoutFoss,
+          ...modelDropdown.onlineNonFoss,
           ...modelDropdown.onlineFoss,
         ]; // Show all models if nothing matches
         break;
@@ -257,14 +270,14 @@ const Models: React.FC = () => {
   })();
 
   const isOfflineModel = (model: string) =>
-    modelDropdown.offlineWithoutFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
+    modelDropdown.offlineNonFoss.includes(model) || modelDropdown.offlineFoss.includes(model);
 
   const modelClicked = (model: string) => {
-    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]])
+    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]])
   }
 
   return (
@@ -277,7 +290,7 @@ const Models: React.FC = () => {
         {/* Model Selection Dropdown */}
         <div className="model-dropdown">
           <label htmlFor="model-select">Select AI Model:</label>
-          <select id="model-select" value={selectedModel} onChange={handleModelChange}>
+          <select id="model-select" value={selectedModelDropdown} onChange={handleModelChange}>
             {filteredModels.map((model) => (
               <option key={model} value={model}>
                 {model}
@@ -288,16 +301,16 @@ const Models: React.FC = () => {
 
         {/* Model Grid with Cards */}
         <div className="grid">
-          {Category.map(
+          {selectedAIFunction.map(
             (displayedCategory) => (
               <button
                 key={displayedCategory}
-                className={`${displayedCategory.toLowerCase()}-model model-box ${currentCategory === displayedCategory ? 'selected' : ''}`} 
+                className={`${displayedCategory.toLowerCase()}-model model-box ${currentSelectedAIFunction === displayedCategory ? 'selected' : ''}`} 
                 onClick={() => modelClicked(displayedCategory)}
               >
                 <div className="overlay">
                   <h3>{displayedCategory}</h3>
-                  {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+                  {isOfflineModel(selectedModelDropdown) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
                 </div>
               </button>
             )
@@ -308,4 +321,4 @@ const Models: React.FC = () => {
   );
 };
 
-export default Models;
+export default ModelSection;
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 71cacda..38e7862 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: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
-    { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" },
+    { name: "Background Color", value: backgroundColor, setValue: setBackgroundColor, cssVariable: "--background-color" },
+    { name: "Header Background Color", value: headerBackground, setValue: setHeaderBackground, cssVariable: "--header-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,9 +278,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   const handleLogout = () => {
     setIsLoggedIn(false);
-    localStorage.removeItem('accountName');
-    localStorage.removeItem('accountEmail');
-    localStorage.removeItem('accountPassword');
+    localStorage.clear();
     alert('Successfully logged out!');
     window.location.reload();
   };
@@ -367,6 +365,7 @@ 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
@@ -657,4 +656,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   );
 };
 
-export default Settings;
+export default Settings;
\ No newline at end of file
diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts
index dcd8981..e88ca18 100644
--- a/app/components/settings/theme.ts
+++ b/app/components/settings/theme.ts
@@ -1,172 +1,194 @@
 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('--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');
+  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'); 
 };
 
 export const applyWhiteTheme = () => {
-    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');
+  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
 };
 
 export const applyBlackTheme = () => {
-    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');
+  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
+  
 };
 
 export const applyCustomTheme = () => {
-    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'),
-    };
+  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'),
+  };
 
-    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');
+  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');
 };
 
 // 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':
-          // Handle custom theme application here if necessary
-          break;
-        default:
-          applyIOMarketTheme();
-          break;
-    }
+  switch (theme) {
+      case 'IOMARKET':
+        applyIOMarketTheme();
+        break;
+      case 'WHITE':
+        applyWhiteTheme();
+        break;
+      case 'BLACK':
+        applyBlackTheme();
+        break;
+      case 'CUSTOM':
+        applyCustomTheme();
+        break;
+      default:
+        applyIOMarketTheme();
+        break;
+  }
 };
+