diff --git a/.gitignore b/.gitignore
index fb2020f..93a7e59 100644
--- a/.gitignore
+++ b/.gitignore
@@ -43,5 +43,3 @@ __pycache__/
 key.pem
 cert.pem
 api_key.txt
-
-database.json
diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index c332ff4..92fa6df 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -9,6 +9,7 @@ import { resolve } from "path";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
+
 const InputOutputBackend: React.FC = () => {
   // # variables
   type Message = {
@@ -41,15 +42,15 @@ const InputOutputBackend: React.FC = () => {
           content: `You are in the timezone: ${timeZone}. 
             You use the time format ${timeFormat}. 
             You use the date format ${dateFormat} for all references of dates. 
-            You use the ${preferredMeasurement} system.   
+            You use the ${preferredMeasurement} system. 
             You use the currency ${preferredCurrency}. 
             You will only answer in the language (you will receive the country code) ${preferredLanguage}. 
             But in the case the user specifically states to answer in another language, do that. Speaking in 
             another language is not stating you should answer in that language. 
-            Additionally, under no circumstances ever translate your answer into multiple languages.`,
+            Additionally, under no circumstances translate your answer into multiple languages.`,
         },
-        { role: "assistant", content: "Hello! How may I help you?" },
-      ]); 
+        { role: "assistant", content: "Hello! How can I help you?" },
+      ]);
     }
   }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
 
@@ -173,15 +174,7 @@ const InputOutputBackend: React.FC = () => {
         if (postWorkerRef.current) {
           addMessage("user", inputValue)
           console.log("input:", inputValue);
-          const type = localStorage.getItem('type')
-          var api_key: string = ""
-          if (type != null && type != 'local') {
-            const try_key = localStorage.getItem(type)
-            if (try_key) {
-              api_key = try_key
-            }
-          }
-          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: localStorage.getItem('model'), model_type: type, access_token: accessToken, api_key: api_key })
+          postWorkerRef.current.postMessage({ messages: [...messages, { role: "user", content: inputValue }], ai_model: "llama3.2", access_token: accessToken })
           startGetWorker()
         }
       }
diff --git a/app/backend/database.ts b/app/backend/database.ts
index 45fd103..054302b 100644
--- a/app/backend/database.ts
+++ b/app/backend/database.ts
@@ -18,28 +18,27 @@ if all went well, you will get the status 200 in response.data.status
 to check if the request was accepted or declined, check response.data.response, it will be either true or false depending on if it worked, or not.
 */
 
-export const sendToDatabase = async (data: any): Promise<boolean> => {
-  try {
-    const response = await axios.post("http://localhost:5000/interstellar_ai/db", data);
-    const status = response.data.status;
-    const success = response.data.response;
-    postMessage({ status, success });
-    console.log(status);
-    return success;
-  } catch (error) {
-    postMessage({ status: 500, success: false });
-    console.log("NO");
-    return false;
-  }
+export const sendToDatabase = (data: any): Promise<boolean> => {
+  return axios.post("http://localhost:5000/interstellar_ai/db", data)
+    .then(response => {
+      const status = response.data.status;
+      const success = response.data.response;
+      postMessage({ status, success });
+      return success;  // Ensure success is returned to the caller
+    })
+    .catch(error => {
+      postMessage({ status: 500, success: false });
+      return false;  // Return false in case of an error
+    });
 };
 
 // Functions for each action
 export const createAccount = async (username: string, email: string, password: string) => {
   const data = {
     action: "create_account",
-    username: username,
-    email: email,
-    password: password,
+    username,
+    email,
+    password,
   };
   return await sendToDatabase(data);
 };
diff --git a/app/backend/threads/PostWorker.js b/app/backend/threads/PostWorker.js
index bae9989..9fb01e2 100644
--- a/app/backend/threads/PostWorker.js
+++ b/app/backend/threads/PostWorker.js
@@ -1,15 +1,14 @@
 import axios from "axios";
 
 onmessage = (e) => {
-    const { messages, ai_model, model_type, access_token, api_key } = e.data
-
+    const { messages, ai_model = "llama3.2", access_token } = e.data
+    
 
     const Message = {
         messages: messages,
-        ai_model: ai_model,
-        model_type: model_type,
-        access_token: access_token,
-        api_key: api_key
+        ai_model: "llama3.2",
+        model_type: "local",
+        access_token: access_token
     }
 
     console.log(Message);
diff --git a/app/backend/voice_backend.ts b/app/backend/voice_backend.ts
index c91a058..ca8a998 100644
--- a/app/backend/voice_backend.ts
+++ b/app/backend/voice_backend.ts
@@ -6,6 +6,7 @@ export const sendToVoiceRecognition = (audio_data: Blob): Promise<string> => {
     const formdata = new FormData()
     formdata.append("audio", audio_data)
 
+    const dataSend = { option: "offline", type: "basic", audio: audio_data }
     return axios.post("http://localhost:5000/interstellar_ai/api/voice_recognition", formdata)
         .then((response) => {
             console.log(response.data)
diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index 1d8a4e6..c766f09 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -55,12 +55,9 @@ const Login: React.FC = () => {
     const savedAccountName = localStorage.getItem('accountName');
 
     // Check if savedAccountName or savedAccountEmail is not null before passing to checkCredentials
-    var accountIdentifier = savedAccountName || savedAccountEmail;
-    if (!accountIdentifier) {
-      accountIdentifier = accountName
-    }
+    const accountIdentifier = savedAccountName || savedAccountEmail;
 
-    if (accountIdentifier && password) {
+    if (accountIdentifier && password === savedAccountPassword) {
       const success = await checkCredentials(accountIdentifier, password);
       if (success) {
         setIsLoggedIn(true); // Successful login
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index a839a1c..1f9dc56 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -240,9 +240,6 @@ const Models: React.FC = () => {
     console.log(model)
     console.log(category)
     console.log(modelList[category][model as keyof typeof modelList[typeof category]]);
-    console.log(modelList[category]['model_type' as keyof typeof modelList[typeof category]])
-    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 (
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index bb203d3..48e452c 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -11,7 +11,6 @@ import {
   checkCredentials,
   deleteAccount,
 } from '../backend/database';
-import { equal } from 'assert';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
@@ -86,43 +85,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
     const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
-    const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
-    const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
-    const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
-    const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
-    const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
-    const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
-    const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
-    const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
-
 
     // Theme selection
-    const [selectedTheme, setSelectedTheme] = useState<string>('');
-
-    useEffect(() => {
-      const savedTheme = localStorage.getItem('selectedTheme');
-      if (savedTheme) {
-        setSelectedTheme(savedTheme);
-        // Apply the saved theme on initial load
-        switch (savedTheme) {
-          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;
-        }
-      }   
-    }, []); // Runs only once when the component mounts
+    const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
 
     // API Keys
     const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
@@ -181,17 +146,9 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           openai,
           anthropic,
           google,
-          // Additional theme settings
-          faqBackgroundColor,
-          faqHeadingColor,
-          faqItemBackgroundColor,
-          faqItemHeadingColor,
-          faqItemTextColor,
-          faqItemHoverBackgroundColor,
-          popupBackgroundColor,
-          overlayTextColor,
       };
-        // Update local storage
+
+      // Update local storage
       for (const [key, value] of Object.entries(settings)) {
           if (typeof value === 'boolean') {
               localStorage.setItem(key, JSON.stringify(value));
@@ -200,54 +157,45 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           }
       }
   }, [
-    activeSection,
-    preferredLanguage,
-    preferredCurrency,
-    dateFormat,
-    timeFormat,
-    timeZone,
-    selectedOption,
-    disableChatHistory,
-    disableAIMemory,
-    openSourceMode,
-    newName,
-    newEmail,
-    newPassword,
-    preferredMeasurement,
-    backgroundColor,
-    textColor,
-    inputBackgroundColor,
-    inputButtonColor,
-    inputButtonHoverColor,
-    userMessageBackgroundColor,
-    userMessageTextColor,
-    aiMessageBackgroundColor,
-    aiMessageTextColor,
-    buttonBackgroundColor,
-    buttonHoverBackgroundColor,
-    modelsBackgroundColor,
-    historyBackgroundColor,
-    leftPanelBackgroundColor,
-    conversationBackgroundColor,
-    popUpTextColor,
-    inputBorderColor,
-    fontFamily,
-    fontSize,
-    burgerMenu,
-    selectedTheme,
-    mistral,
-    openai,
-    anthropic,
-    google,
-    // Additional theme settings
-    faqBackgroundColor,
-    faqHeadingColor,
-    faqItemBackgroundColor,
-    faqItemHeadingColor,
-    faqItemTextColor,
-    faqItemHoverBackgroundColor,
-    popupBackgroundColor,
-    overlayTextColor,
+      activeSection,
+      preferredLanguage,
+      preferredCurrency,
+      dateFormat,
+      timeFormat,
+      timeZone,
+      selectedOption,
+      disableChatHistory,
+      disableAIMemory,
+      openSourceMode,
+      newName,
+      newEmail,
+      newPassword,
+      preferredMeasurement,
+      backgroundColor,
+      textColor,
+      inputBackgroundColor,
+      inputButtonColor,
+      inputButtonHoverColor,
+      userMessageBackgroundColor,
+      userMessageTextColor,
+      aiMessageBackgroundColor,
+      aiMessageTextColor,
+      buttonBackgroundColor,
+      buttonHoverBackgroundColor,
+      modelsBackgroundColor,
+      historyBackgroundColor,
+      leftPanelBackgroundColor,
+      conversationBackgroundColor,
+      popUpTextColor,
+      inputBorderColor,
+      fontFamily,
+      fontSize,
+      burgerMenu,
+      selectedTheme,
+      mistral,
+      openai,
+      anthropic,
+      google,
   ]);
 
   useEffect(() => {
@@ -266,141 +214,107 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   // Apply imported settings to the CSS variables
-    const applySettings = (settings: any) => {
-      if (settings.backgroundColor) {
-        setBackgroundColor(settings.backgroundColor);
-        document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
-      }
-
-      if (settings.textColor) {
-        setTextColor(settings.textColor);
-        document.documentElement.style.setProperty('--text-color', settings.textColor);
-      }
-
-      if (settings.inputBackgroundColor) {
-        setInputBackgroundColor(settings.inputBackgroundColor);
-        document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
-      }
-
-      if (settings.inputButtonColor) {
-        setInputButtonColor(settings.inputButtonColor);
-        document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
-      }
-
-      if (settings.inputButtonHoverColor) {
-        setInputButtonHoverColor(settings.inputButtonHoverColor);
-        document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
-      }
-
-      if (settings.userMessageBackgroundColor) {
-        setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
-        document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
-      }
-
-      if (settings.userMessageTextColor) {
-        setUserMessageTextColor(settings.userMessageTextColor);
-        document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
-      }
-
-      if (settings.aiMessageBackgroundColor) {
-        setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
-        document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
-      }
-
-      if (settings.aiMessageTextColor) {
-        setAiMessageTextColor(settings.aiMessageTextColor);
-        document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
-      }
-
-      if (settings.buttonBackgroundColor) {
-        setButtonBackgroundColor(settings.buttonBackgroundColor);
-        document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
-      }
-
-      if (settings.buttonHoverBackgroundColor) {
-        setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
-        document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
-      }
-
-      if (settings.modelsBackgroundColor) {
-        setModelsBackgroundColor(settings.modelsBackgroundColor);
-        document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
-      }
-
-      if (settings.historyBackgroundColor) {
-        setHistoryBackgroundColor(settings.historyBackgroundColor);
-        document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
-      }
-
-      if (settings.leftPanelBackgroundColor) {
-        setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
-        document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
-      }
-
-      if (settings.conversationBackgroundColor) {
-        setConversationBackgroundColor(settings.conversationBackgroundColor);
-        document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
-      }
-
-      if (settings.popUpTextColor) {
-        setPopUpTextColor(settings.popUpTextColor);
-        document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
-      }
-
-      if (settings.inputBorderColor) {
-        setInputBorderColor(settings.inputBorderColor);
-        document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
-      }
-
-      if (settings.fontFamily) {
-        setFontFamily(settings.fontFamily);
-        document.documentElement.style.setProperty('--font-family', settings.fontFamily);
-      }
-
-      if (settings.fontSize) {
-        setFontSize(settings.fontSize);
-        document.documentElement.style.setProperty('--font-size', settings.fontSize);
-      }
-
-      if (settings.burgerMenu) {
-        setBurgerMenu(settings.burgerMenu);
-        document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
-      }
-
-      // Additional theme settings
-      if (settings.faqBackgroundColor) {
-        document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
-      }
-
-      if (settings.faqHeadingColor) {
-        document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
-      }
-
-      if (settings.faqItemBackgroundColor) {
-        document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
-      }
-
-      if (settings.faqItemHeadingColor) {
-        document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
-      }
-
-      if (settings.faqItemTextColor) {
-        document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
-      }
-
-      if (settings.faqItemHoverBackgroundColor) {
-        document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
-      }
-
-      if (settings.popupBackgroundColor) {
-        document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
-      }
-
-      if (settings.overlayTextColor) {
-        document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
-      }
-    };
-
+  const applySettings = (settings: any) => {
+    if (settings.backgroundColor) {
+      setBackgroundColor(settings.backgroundColor);
+      document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
+    }
+    
+    if (settings.textColor) {
+      setTextColor(settings.textColor);
+      document.documentElement.style.setProperty('--text-color', settings.textColor);
+    }
+    
+    if (settings.inputBackgroundColor) {
+      setInputBackgroundColor(settings.inputBackgroundColor);
+      document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
+    }
+    
+    if (settings.inputButtonColor) {
+      setInputButtonColor(settings.inputButtonColor);
+      document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
+    }
+    
+    if (settings.inputButtonHoverColor) {
+      setInputButtonHoverColor(settings.inputButtonHoverColor);
+      document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
+    }
+    
+    if (settings.userMessageBackgroundColor) {
+      setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
+      document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
+    }
+    
+    if (settings.userMessageTextColor) {
+      setUserMessageTextColor(settings.userMessageTextColor);
+      document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
+    }
+    
+    if (settings.aiMessageBackgroundColor) {
+      setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
+      document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
+    }
+    
+    if (settings.aiMessageTextColor) {
+      setAiMessageTextColor(settings.aiMessageTextColor);
+      document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
+    }
+    
+    if (settings.buttonBackgroundColor) {
+      setButtonBackgroundColor(settings.buttonBackgroundColor);
+      document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
+    }
+    
+    if (settings.buttonHoverBackgroundColor) {
+      setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
+      document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
+    }
+    
+    if (settings.modelsBackgroundColor) {
+      setModelsBackgroundColor(settings.modelsBackgroundColor);
+      document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
+    }
+    
+    if (settings.historyBackgroundColor) {
+      setHistoryBackgroundColor(settings.historyBackgroundColor);
+      document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
+    }
+    
+    if (settings.leftPanelBackgroundColor) {
+      setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
+      document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
+    }
+    
+    if (settings.conversationBackgroundColor) {
+      setConversationBackgroundColor(settings.conversationBackgroundColor);
+      document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
+    }
+    
+    if (settings.popUpTextColor) {
+      setPopUpTextColor(settings.popUpTextColor);
+      document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
+    }
+    
+    if (settings.inputBorderColor) {
+      setInputBorderColor(settings.inputBorderColor);
+      document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
+    }
+    
+    if (settings.fontFamily) {
+      setFontFamily(settings.fontFamily);
+      document.documentElement.style.setProperty('--font-family', settings.fontFamily);
+    }
+    
+    if (settings.fontSize) {
+      setFontSize(settings.fontSize);
+      document.documentElement.style.setProperty('--font-size', settings.fontSize);
+    }
+    
+    if (settings.burgerMenu) {
+      setBurgerMenu(settings.fontSize);
+      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
+    }  
+  };
 
     // Function to handle updating all credentials
     const handleUpdateCredentials = async () => {
@@ -607,449 +521,330 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
 
-          case 'theme':
-            return (
-              <div className="settings-section">
-                <h2>Theme Settings</h2>
-          
-                {/* Dropdown to select theme */}
-                <div className="settings-option">
-                  <p>Select Theme</p>
-                  <select
-                    value={selectedTheme}
-                    onChange={(e) => {
-                      const theme = e.target.value;
-                      if (theme !== "default") {
-                        setSelectedTheme(theme);
-                        localStorage.setItem("selectedTheme", theme);
-          
-                        // Apply the appropriate theme based on selection
-                        switch (theme) {
-                          case 'IOMARKET':
-                            applyIOMarketTheme();
-                            break;
-                          case 'WHITE':
-                            applyWhiteTheme();
-                            break;
-                          case 'BLACK':
-                            applyBlackTheme();
-                            break;
-                          case 'CUSTOM':
-                            // Handle custom theme logic here if necessary
-                            break;
-                          default:
-                            applyIOMarketTheme();
-                            break;
-                        }
-                      }
-                    }}
-                  >
-                    <option value="default">Select your style...</option>
-                    <option value="IOMARKET">IOMARKET</option>
-                    <option value="WHITE">WHITE</option>
-                    <option value="BLACK">BLACK</option>
-                    <option value="CUSTOM">CUSTOM</option>
-                  </select>
-                </div>
-                {/* Conditionally render theme settings only if "CUSTOM" is selected */}
-                {selectedTheme === 'CUSTOM' && (
-                  <>
-                    {/* Font Size */}
-                    <div className="settings-option">
-                      <p>Font Size</p>
-                      <input
-                        type="range"
-                        min="12"
-                        max="30"
-                        value={parseInt(fontSize, 10)} // Ensure value is a number
-                        onChange={(e) => {
-                          const newSize = `${e.target.value}px`;
-                          setFontSize(newSize);
-                          document.documentElement.style.setProperty('--font-size', newSize);
-                        }}
-                      />
-                      <span>{fontSize}</span>
-                    </div>
+        case 'theme':
+          return (
+            <div className="settings-section">
+              <h2>Theme Settings</h2>
+        
+              {/* Dropdown to select theme */}
+              <div className="settings-option">
+                <p>Select Theme</p>
+                <select
+                  value={selectedTheme}
+                  onChange={(e) => {
+                    const theme = e.target.value; // Get the selected value from the event
+                    setSelectedTheme(theme); // Update state for selected theme
+                    
+                    // Apply the appropriate theme based on selection
+                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
+                      case 'IOMARKET':
+                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
+                        break;
+                      case 'WHITE':
+                        applyWhiteTheme(); // Call the function to apply the WHITE theme
+                        break;
+                      case 'BLACK':
+                        applyBlackTheme(); // Call the function to apply the BLACK theme
+                        break;
+                      case 'CUSTOM':
+                        // Handle custom theme logic here if necessary
+                        break;
+                      default:
+                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
+                        break;
+                    }
+                  }} // Handle theme selection
+                >
+                  <option value="default">Select your style...</option>
+                  <option value="IOMARKET">IOMARKET</option>
+                  <option value="WHITE">WHITE</option>
+                  <option value="BLACK">BLACK</option>
+                  <option value="CUSTOM">CUSTOM</option>
+                </select>
+              </div>
 
-                    {/* Background Color */}
-                    <div className="settings-option">
-                      <p>Background Color</p>
-                      <input
-                        type="color"
-                        value={backgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--background-color', newColor);
-                        }}
-                      />
-                    </div>
+              {/* Conditionally render theme settings only if "CUSTOM" is selected */}
+              {selectedTheme === 'CUSTOM' && (
+                <>
+                  <div className="settings-option">
+                    <p>Font Size</p>
+                    <input
+                      type="range"
+                      min="12"
+                      max="30"
+                      value={parseInt(fontSize, 10)} // Ensure value is a number
+                      onChange={(e) => {
+                        const newSize = `${e.target.value}px`;
+                        setFontSize(newSize);
+                        document.documentElement.style.setProperty('--font-size', newSize);
+                      }}
+                    />
+                    <span>{fontSize}</span>
+                  </div>
 
-                    {/* Text Color */}
-                    <div className="settings-option">
-                      <p>Text Color</p>
-                      <input
-                        type="color"
-                        value={textColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setTextColor(newColor);
-                          document.documentElement.style.setProperty('--text-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Background Color</p>
+                    <input
+                      type="color"
+                      value={backgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Input Background Color */}
-                    <div className="settings-option">
-                      <p>Input Background Color</p>
-                      <input
-                        type="color"
-                        value={inputBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setInputBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--input-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Text Color</p>
+                    <input
+                      type="color"
+                      value={textColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setTextColor(newColor);
+                        document.documentElement.style.setProperty('--text-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Input Button Color */}
-                    <div className="settings-option">
-                      <p>Input Button Color</p>
-                      <input
-                        type="color"
-                        value={inputButtonColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setInputButtonColor(newColor);
-                          document.documentElement.style.setProperty('--input-button-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Input Background Color</p>
+                    <input
+                      type="color"
+                      value={inputBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--input-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Input Button Hover Color */}
-                    <div className="settings-option">
-                      <p>Input Button Hover Color</p>
-                      <input
-                        type="color"
-                        value={inputButtonHoverColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setInputButtonHoverColor(newColor);
-                          document.documentElement.style.setProperty('--input-button-hover-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Input Button Color</p>
+                    <input
+                      type="color"
+                      value={inputButtonColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputButtonColor(newColor);
+                        document.documentElement.style.setProperty('--input-button-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* User Message Background Color */}
-                    <div className="settings-option">
-                      <p>User Message Background Color</p>
-                      <input
-                        type="color"
-                        value={userMessageBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setUserMessageBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--user-message-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Input Button Hover Color</p>
+                    <input
+                      type="color"
+                      value={inputButtonHoverColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputButtonHoverColor(newColor);
+                        document.documentElement.style.setProperty('--input-button-hover-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* User Message Text Color */}
-                    <div className="settings-option">
-                      <p>User Message Text Color</p>
-                      <input
-                        type="color"
-                        value={userMessageTextColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setUserMessageTextColor(newColor);
-                          document.documentElement.style.setProperty('--user-message-text-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>User Message Background Color</p>
+                    <input
+                      type="color"
+                      value={userMessageBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setUserMessageBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--user-message-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* AI Message Background Color */}
-                    <div className="settings-option">
-                      <p>AI Message Background Color</p>
-                      <input
-                        type="color"
-                        value={aiMessageBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setAiMessageBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--ai-message-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>User Message Text Color</p>
+                    <input
+                      type="color"
+                      value={userMessageTextColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setUserMessageTextColor(newColor);
+                        document.documentElement.style.setProperty('--user-message-text-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* AI Message Text Color */}
-                    <div className="settings-option">
-                      <p>AI Message Text Color</p>
-                      <input
-                        type="color"
-                        value={aiMessageTextColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setAiMessageTextColor(newColor);
-                          document.documentElement.style.setProperty('--ai-message-text-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>AI Message Background Color</p>
+                    <input
+                      type="color"
+                      value={aiMessageBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setAiMessageBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--ai-message-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Button Background Color */}
-                    <div className="settings-option">
-                      <p>Button Background Color</p>
-                      <input
-                        type="color"
-                        value={buttonBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setButtonBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--button-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>AI Message Text Color</p>
+                    <input
+                      type="color"
+                      value={aiMessageTextColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setAiMessageTextColor(newColor);
+                        document.documentElement.style.setProperty('--ai-message-text-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Button Hover Background Color */}
-                    <div className="settings-option">
-                      <p>Button Hover Background Color</p>
-                      <input
-                        type="color"
-                        value={buttonHoverBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setButtonHoverBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--button-hover-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Button Background Color</p>
+                    <input
+                      type="color"
+                      value={buttonBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setButtonBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--button-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Models Background Color */}
-                    <div className="settings-option">
-                      <p>Models Background Color</p>
-                      <input
-                        type="color"
-                        value={modelsBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setModelsBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--models-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Button Hover Background Color</p>
+                    <input
+                      type="color"
+                      value={buttonHoverBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setButtonHoverBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--button-hover-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* History Background Color */}
-                    <div className="settings-option">
-                      <p>History Background Color</p>
-                      <input
-                        type="color"
-                        value={historyBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setHistoryBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--history-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Models Background Color</p>
+                    <input
+                      type="color"
+                      value={modelsBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setModelsBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--models-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Left Panel Background Color */}
-                    <div className="settings-option">
-                      <p>Left Panel Background Color</p>
-                      <input
-                        type="color"
-                        value={leftPanelBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setLeftPanelBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--left-panel-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>History Background Color</p>
+                    <input
+                      type="color"
+                      value={historyBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setHistoryBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--history-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Conversation Background Color */}
-                    <div className="settings-option">
-                      <p>Conversation Background Color</p>
-                      <input
-                        type="color"
-                        value={conversationBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setConversationBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--conversation-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Left Panel Background Color</p>
+                    <input
+                      type="color"
+                      value={leftPanelBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setLeftPanelBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--left-panel-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Pop-up Text Color */}
-                    <div className="settings-option">
-                      <p>Pop-up Text Color</p>
-                      <input
-                        type="color"
-                        value={popUpTextColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setPopUpTextColor(newColor);
-                          document.documentElement.style.setProperty('--pop-up-text', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Conversation Background Color</p>
+                    <input
+                      type="color"
+                      value={conversationBackgroundColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setConversationBackgroundColor(newColor);
+                        document.documentElement.style.setProperty('--conversation-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Input Border Color */}
-                    <div className="settings-option">
-                      <p>Input Border Color</p>
-                      <input
-                        type="color"
-                        value={inputBorderColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setInputBorderColor(newColor);
-                          document.documentElement.style.setProperty('--input-border-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Pop-up Text Color</p>
+                    <input
+                      type="color"
+                      value={popUpTextColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setPopUpTextColor(newColor);
+                        document.documentElement.style.setProperty('--pop-up-text', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* Font Family */}
-                    <div className="settings-option">
-                      <p>Font Family</p>
-                      <select
-                        value={fontFamily}
-                        onChange={(e) => {
-                          const newFont = e.target.value;
-                          setFontFamily(newFont);
-                          document.documentElement.style.setProperty('--font-family', newFont);
-                        }}
-                      >
-                        <option value="'Poppins', sans-serif">Poppins</option>
-                        <option value="'Inconsolata', monospace">Inconsolata</option>
-                        <option value="'Merriweather', serif">Merriweather</option>
-                        <option value="'Noto Sans', sans-serif">Noto Sans</option>
-                        <option value="'Noto Serif', serif">Noto Serif</option>
-                        <option value="'Playfair Display', serif">Playfair Display</option>
-                        <option value="'Roboto', sans-serif">Roboto</option>
-                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
-                        <option value="'Bangers', cursive">Bangers</option>
-                        <option value="'Caveat', cursive">Caveat</option>
-                        <option value="'Frederika the Great', cursive">Frederika the Great</option>
-                        <option value="'Rock Salt', cursive">Rock Salt</option>
-                        <option value="'Sofadi One', sans-serif">Sofadi One</option>
-                        <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
-                      </select>
-                    </div>
+                  <div className="settings-option">
+                    <p>Burger Menu Color</p>
+                    <input
+                      type="color"
+                      value={burgerMenu}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setBurgerMenu(newColor);
+                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* FAQ Background Color */}
-                    <div className="settings-option">
-                      <p>FAQ Background Color</p>
-                      <input
-                        type="color"
-                        value={faqBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--faq-background-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Input Border Color</p>
+                    <input
+                      type="color"
+                      value={inputBorderColor}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setInputBorderColor(newColor);
+                        document.documentElement.style.setProperty('--input-border-color', newColor);
+                      }}
+                    />
+                  </div>
 
-                    {/* FAQ Heading Color */}
-                    <div className="settings-option">
-                      <p>FAQ Heading Color</p>
-                      <input
-                        type="color"
-                        value={faqHeadingColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqHeadingColor(newColor);
-                          document.documentElement.style.setProperty('--faq-heading-color', newColor);
-                        }}
-                      />
-                    </div>
+                  <div className="settings-option">
+                    <p>Font Family</p>
+                    <select
+                      value={fontFamily}
+                      onChange={(e) => {
+                        const newFont = e.target.value;
+                        setFontFamily(newFont);
+                        document.documentElement.style.setProperty('--font-family', newFont);
+                      }}
+                    >
+                      <option value="'Poppins', sans-serif">Poppins</option>
+                      <option value="'Inconsolata', monospace">Inconsolata</option>
+                      <option value="'Merriweather', serif">Merriweather</option>
+                      <option value="'Noto Sans', sans-serif">Noto Sans</option>
+                      <option value="'Noto Serif', serif">Noto Serif</option>
+                      <option value="'Playfair Display', serif">Playfair Display</option>
+                      <option value="'Roboto', sans-serif">Roboto</option>
+                      <option value="'Ubuntu', sans-serif">Ubuntu</option>
+                      <option value="'Bangers', cursive">Bangers</option>
+                      <option value="'Caveat', cursive">Caveat</option>
+                      <option value="'Frederika the Great', cursive">Frederika the Great</option>
+                      <option value="'Rock Salt', cursive">Rock Salt</option>
+                      <option value="'Sofadi One', sans-serif">Sofadi One</option>
+                      <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
+                    </select>
+                  </div>
 
-                    {/* FAQ Item Background Color */}
-                    <div className="settings-option">
-                      <p>FAQ Item Background Color</p>
-                      <input
-                        type="color"
-                        value={faqItemBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqItemBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--faq-item-background-color', newColor);
-                        }}
-                      />
-                    </div>
-
-                    {/* FAQ Item Heading Color */}
-                    <div className="settings-option">
-                      <p>FAQ Item Heading Color</p>
-                      <input
-                        type="color"
-                        value={faqItemHeadingColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqItemHeadingColor(newColor);
-                          document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
-                        }}
-                      />
-                    </div>
-
-                    {/* FAQ Item Text Color */}
-                    <div className="settings-option">
-                      <p>FAQ Item Text Color</p>
-                      <input
-                        type="color"
-                        value={faqItemTextColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqItemTextColor(newColor);
-                          document.documentElement.style.setProperty('--faq-item-text-color', newColor);
-                        }}
-                      />
-                    </div>
-
-                    {/* FAQ Item Hover Background Color */}
-                    <div className="settings-option">
-                      <p>FAQ Item Hover Background Color</p>
-                      <input
-                        type="color"
-                        value={faqItemHoverBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setFaqItemHoverBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
-                        }}
-                      />
-                    </div>
-
-                    {/* Popup Background Color */}
-                    <div className="settings-option">
-                      <p>Popup Background Color</p>
-                      <input
-                        type="color"
-                        value={popupBackgroundColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setPopupBackgroundColor(newColor);
-                          document.documentElement.style.setProperty('--popup-background-color', newColor);
-                        }}
-                      />
-                    </div>
-
-                    {/* Overlay Text Color */}
-                    <div className="settings-option">
-                      <p>Overlay Text Color</p>
-                      <input
-                        type="color"
-                        value={overlayTextColor}
-                        onChange={(e) => {
-                          const newColor = e.target.value;
-                          setOverlayTextColor(newColor);
-                          document.documentElement.style.setProperty('--overlay-text-color', newColor);
-                        }}
-                      />
-                    </div>
-                  </>
-                )}
+                </>
+              )}
             </div>
           );
 
@@ -1233,22 +1028,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     disableChatHistory,
     disableAIMemory,
     openSourceMode,
-  
+
     // API Keys
-    mistral,
-    openai,
-    anthropic,
-    google,
-  
-    // Additional theme settings if needed
-    faqBackgroundColor,
-    faqHeadingColor,
-    faqItemBackgroundColor,
-    faqItemHeadingColor,
-    faqItemTextColor,
-    faqItemHoverBackgroundColor,
-    popupBackgroundColor,
-    overlayTextColor,  
+   mistral,
+   openai,
+   anthropic,
+   google
 };
 
 
@@ -1274,7 +1059,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={() => { 
                   applySettings; 
                   getAllLocalStorageItems(); 
-                  closeSettings(); 
+                  closeSettings(); // This is invoked when the button is clicked
               }}>
                   Apply
             </button>
diff --git a/app/components/theme.ts b/app/components/theme.ts
index b4f64e2..f9367bd 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -92,66 +92,5 @@ export const applyBlackTheme = () => {
     document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // 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('--burger-menu-background-color', '# 79832e'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
 };
-
-export const applyCustomTheme = () => {
-    // Theme variables   
-    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'),
-        popUpTextColor: localStorage.getItem('popUpTextColor'),
-        inputBorderColor: localStorage.getItem('inputBorderColor'),
-        fontFamily: localStorage.getItem('fontFamily'),
-        fontSize: localStorage.getItem('fontSize'),
-        burgerMenu: localStorage.getItem('burgerMenu'),
-        faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
-        faqHeadingColor: localStorage.getItem('faqHeadingColor'),
-        faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
-        faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
-        faqItemTextColor: localStorage.getItem('faqItemTextColor'),
-        faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
-        popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
-        overlayTextColor: localStorage.getItem('overlayTextColor'),
-      };
-          
-      document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
-      document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
-      document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
-      document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
-      document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
-      document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
-      document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
-      document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
-      document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
-      document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
-      document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
-      document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
-      document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
-      document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
-      document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
-      document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
-      document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
-      document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
-      document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
-      document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
-      document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
-      document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
-      document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
-      document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
-      document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
-    
-}
diff --git a/app/page.tsx b/app/page.tsx
index b2e6c90..9afccc2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,8 +7,6 @@ import Documentation from './components/Documentation'; // Ensure the import pat
 import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
-import Settings from './components/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
 import Head from 'next/head';
 import './styles/master.css';
 
@@ -28,33 +26,6 @@ const LandingPage: React.FC = () => {
     }
   };
 
-  const [selectedTheme, setSelectedTheme] = useState<string>('');
-
-    useEffect(() => {
-      const savedTheme = localStorage.getItem('selectedTheme');
-      if (savedTheme) {
-        setSelectedTheme(savedTheme);
-        // Apply the saved theme on initial load
-        switch (savedTheme) {
-          case 'IOMARKET':
-            applyIOMarketTheme();
-            break;
-          case 'WHITE':
-            applyWhiteTheme();
-            break;
-          case 'BLACK':
-            applyBlackTheme();
-            break;
-          case 'CUSTOM':
-            applyCustomTheme();
-            break;
-          default:
-            applyIOMarketTheme();
-            break;
-        }
-      }   
-    }, []); // Runs only once when the component mounts          
-
   return (
     <>
         <Header
diff --git a/py/api.py b/py/api.py
index 7683afe..75fbfd4 100644
--- a/py/api.py
+++ b/py/api.py
@@ -89,20 +89,20 @@ class API:
 
         @self.app.route('/interstellar_ai/db', methods=['POST'])
         def db_manipulate():
-            sent_data = request.get_json()
-            action = sent_data.get('action')
+            action = request.args.get('action')
+            data = request.args.get('data')
             if action == "create_account":
-                return jsonify({'status': 200, 'response': self.db.add_user(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.add_user(data)})
             elif action == "change_password":
-                return jsonify({'status': 200, 'response': self.db.update_password(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.update_password(data)})
             elif action == "get_data":
-                return jsonify({'status': 200, 'response': self.db.get_data(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.get_data(data)})
             elif action == "change_data":
-                return jsonify({'status': 200, 'response': self.db.change_data(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.change_data(data)})
             elif action == "check_credentials":
-                return jsonify({'status': 200, 'response': self.db.check_credentials(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.check_credentials(data)})
             elif action == "delete_account":
-                return jsonify({'status': 200, 'response': self.db.delete_user(sent_data)})
+                return jsonify({'status': 200, 'response': self.db.delete_user(data)})
 
             return jsonify({'status': 401, 'response': "Invalid action"})
 
diff --git a/py/db.py b/py/db.py
index 778c6c7..3f66ac7 100644
--- a/py/db.py
+++ b/py/db.py
@@ -9,15 +9,11 @@ class DB:
         self.database = {}
 
     def ensure_username(self, data):
-        print(data)
-        print(self.database)
-        if 'username' in data:
-            print("usr")
-            return data.get('username')
-        elif 'email' in data:
-            print("email")
+        if hasattr(data, 'username'):
+            return data.get['username']
+        elif hasattr(data, 'email'):
             for index, entry in self.database:
-                if entry.get('email') == data.get('email'):
+                if entry.get['email'] == data.get['email']:
                     return index
 
     @staticmethod
@@ -27,22 +23,19 @@ class DB:
         return hashed_password
 
     def add_user(self, data):
-        username = data.get('username')
-        password = data.get('password')
-        email = data.get('email')
+        username = data.get['username']
+        password = data.get['password']
+        email = data.get['email']
         hashed_password = self.hash_password(password)
         user_data = {"hashed_password": hashed_password, "email": email, "data": None}
         if username not in self.database:
             self.database[username] = user_data
-            print("yes")
-            self.save_database()
             return True
-        print("fail")
         return False
 
     def delete_user(self, data):
         username = self.ensure_username(data)
-        data = data.get('data')
+        data = data.get['data']
         if not self.check_credentials(data):
             return False
 
@@ -52,7 +45,7 @@ class DB:
 
     def change_data(self, data):
         username = self.ensure_username(data)
-        data = data.get('data')
+        data = data.get['data']
         if not self.check_credentials(data):
             return False
 
@@ -62,7 +55,7 @@ class DB:
 
     def update_password(self, data):
         username = self.ensure_username(data)
-        new_password = data.get('new_password')
+        new_password = data.get['new_password']
         if not self.check_credentials(data):
             return False
 
@@ -73,15 +66,12 @@ class DB:
 
     def check_credentials(self, data):
         username = self.ensure_username(data)
-        password = data.get('password')
+        password = data.get['password']
         if username not in self.database:
-            print("no username")
-            print(username)
             return False
 
         stored_hashed_password = self.database[username]["hashed_password"]
         entered_hashed_password = self.hash_password(password)
-        print(stored_hashed_password == entered_hashed_password)
         return stored_hashed_password == entered_hashed_password
 
     def get_data(self, data):
@@ -89,7 +79,7 @@ class DB:
         if not self.check_credentials(data):
             return None
 
-        send_back = self.database[username].get('data')
+        send_back = self.database[username].get['data']
         return send_back
 
     def save_database(self):
@@ -100,7 +90,6 @@ class DB:
 
         else:
             with open("database.json", 'w') as file:
-                print("saving")
                 json.dump(self.database, file)
 
     def load_database(self):