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