diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 29ba297..ea1a818 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -44,6 +44,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [newEmail, setNewEmail] = useState<string>('');
   const [newPassword, setNewPassword] = useState<string>('');
 
+  // Theme selection
+  const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
+
+
   // Effect to update CSS variables on theme state change
   useEffect(() => {
     document.documentElement.style.setProperty('--background-color', backgroundColor);
@@ -84,7 +88,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     popUpTextColor,
     inputBorderColor,
     fontFamily,
-    fontSize
+    fontSize,
   ]);
 
   const renderSettingsContent = () => {
@@ -171,7 +175,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               </label>
             </div>
             <div className="settings-option">
-              <button onClick={() => {/* Export data logic */}}>Export My Data</button>
+              <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
             </div>
           </div>
         );
@@ -180,177 +184,300 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           return (
             <div className="settings-section">
               <h2>Theme Settings</h2>
+        
+              {/* Dropdown to select theme */}
               <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); // Update the CSS variable
-                }}
-              />
-              <span>{fontSize}</span>
-              </div>
-              <div className="settings-option">
-                <p>Background Color</p>
-                <input
-                  type="color"
-                  value={backgroundColor}
-                  onChange={(e) => setBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Text Color</p>
-                <input
-                  type="color"
-                  value={textColor}
-                  onChange={(e) => setTextColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Input Background Color</p>
-                <input
-                  type="color"
-                  value={inputBackgroundColor}
-                  onChange={(e) => setInputBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Input Button Color</p>
-                <input
-                  type="color"
-                  value={inputButtonColor}
-                  onChange={(e) => setInputButtonColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Input Button Hover Color</p>
-                <input
-                  type="color"
-                  value={inputButtonHoverColor}
-                  onChange={(e) => setInputButtonHoverColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>User Message Background Color</p>
-                <input
-                  type="color"
-                  value={userMessageBackgroundColor}
-                  onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>User Message Text Color</p>
-                <input
-                  type="color"
-                  value={userMessageTextColor}
-                  onChange={(e) => setUserMessageTextColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>AI Message Background Color</p>
-                <input
-                  type="color"
-                  value={aiMessageBackgroundColor}
-                  onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>AI Message Text Color</p>
-                <input
-                  type="color"
-                  value={aiMessageTextColor}
-                  onChange={(e) => setAiMessageTextColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Button Background Color</p>
-                <input
-                  type="color"
-                  value={buttonBackgroundColor}
-                  onChange={(e) => setButtonBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Button Hover Background Color</p>
-                <input
-                  type="color"
-                  value={buttonHoverBackgroundColor}
-                  onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Models Background Color</p>
-                <input
-                  type="color"
-                  value={modelsBackgroundColor}
-                  onChange={(e) => setModelsBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>History Background Color</p>
-                <input
-                  type="color"
-                  value={historyBackgroundColor}
-                  onChange={(e) => setHistoryBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Left Panel Background Color</p>
-                <input
-                  type="color"
-                  value={leftPanelBackgroundColor}
-                  onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Conversation Background Color</p>
-                <input
-                  type="color"
-                  value={conversationBackgroundColor}
-                  onChange={(e) => setConversationBackgroundColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Pop-up Text Color</p>
-                <input
-                  type="color"
-                  value={popUpTextColor}
-                  onChange={(e) => setPopUpTextColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Input Border Color</p>
-                <input
-                  type="color"
-                  value={inputBorderColor}
-                  onChange={(e) => setInputBorderColor(e.target.value)}
-                />
-              </div>
-              <div className="settings-option">
-                <p>Font Family</p>
+                <p>Select Theme</p>
                 <select
-                  value={fontFamily}
-                  onChange={(e) => setFontFamily(e.target.value)}
+                  value={selectedTheme}
+                  onChange={(e) => {
+                    const theme = e.target.value;
+                    setSelectedTheme(theme); // Update state for selected theme
+                    
+                    // Apply the appropriate theme based on selection
+                    switch (theme) {
+                      case 'IOMARKET':
+                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // New header background color
+                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+                        document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
+                        document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
+                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
+                        document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
+                        document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
+                        document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
+                        document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
+                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
+                        document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
+                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
+                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+                        break;
+                      case 'WHITE':
+                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background color
+                        document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
+                        document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
+                        document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
+                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Background color for input fields
+                        document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
+                        document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
+                        document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
+                        document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
+                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
+                        document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
+                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
+                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+
+                        break;
+                      case 'BLACK':
+                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background color
+                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+                        document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
+                        document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
+                        document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Background color for input fields
+                        document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
+                        document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
+                        document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
+                        document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
+                        document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
+                        document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
+                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
+                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size 
+                        break;
+                      case 'CUSTOM':
+                        // Do nothing, CUSTOM will display the customization options
+                        break;
+                      default:
+                        break;
+                    }
+                  }} // Handle theme selection
                 >
-                  <option value="'Arial', sans-serif">Arial</option>
-                  <option value="'Calibri', sans-serif">Calibri</option>
-                  <option value="'Helvetica', sans-serif">Helvetica</option>
-                  <option value="'Times New Roman', serif">Times New Roman</option>
-                  <option value="'Poppins', sans-serif">Poppins</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' && (
+                <>
+                  <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); // Update the CSS variable
+                      }}
+                    />
+                    <span>{fontSize}</span>
+                  </div>
+                  <div className="settings-option">
+                    <p>Background Color</p>
+                    <input
+                      type="color"
+                      value={backgroundColor}
+                      onChange={(e) => setBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Text Color</p>
+                    <input
+                      type="color"
+                      value={textColor}
+                      onChange={(e) => setTextColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Input Background Color</p>
+                    <input
+                      type="color"
+                      value={inputBackgroundColor}
+                      onChange={(e) => setInputBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Input Button Color</p>
+                    <input
+                      type="color"
+                      value={inputButtonColor}
+                      onChange={(e) => setInputButtonColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Input Button Hover Color</p>
+                    <input
+                      type="color"
+                      value={inputButtonHoverColor}
+                      onChange={(e) => setInputButtonHoverColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>User Message Background Color</p>
+                    <input
+                      type="color"
+                      value={userMessageBackgroundColor}
+                      onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>User Message Text Color</p>
+                    <input
+                      type="color"
+                      value={userMessageTextColor}
+                      onChange={(e) => setUserMessageTextColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>AI Message Background Color</p>
+                    <input
+                      type="color"
+                      value={aiMessageBackgroundColor}
+                      onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>AI Message Text Color</p>
+                    <input
+                      type="color"
+                      value={aiMessageTextColor}
+                      onChange={(e) => setAiMessageTextColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Button Background Color</p>
+                    <input
+                      type="color"
+                      value={buttonBackgroundColor}
+                      onChange={(e) => setButtonBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Button Hover Background Color</p>
+                    <input
+                      type="color"
+                      value={buttonHoverBackgroundColor}
+                      onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Models Background Color</p>
+                    <input
+                      type="color"
+                      value={modelsBackgroundColor}
+                      onChange={(e) => setModelsBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>History Background Color</p>
+                    <input
+                      type="color"
+                      value={historyBackgroundColor}
+                      onChange={(e) => setHistoryBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Left Panel Background Color</p>
+                    <input
+                      type="color"
+                      value={leftPanelBackgroundColor}
+                      onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Conversation Background Color</p>
+                    <input
+                      type="color"
+                      value={conversationBackgroundColor}
+                      onChange={(e) => setConversationBackgroundColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Pop-up Text Color</p>
+                    <input
+                      type="color"
+                      value={popUpTextColor}
+                      onChange={(e) => setPopUpTextColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Input Border Color</p>
+                    <input
+                      type="color"
+                      value={inputBorderColor}
+                      onChange={(e) => setInputBorderColor(e.target.value)}
+                    />
+                  </div>
+                  <div className="settings-option">
+                    <p>Font Family</p>
+                    <select
+                      value={fontFamily}
+                      onChange={(e) => setFontFamily(e.target.value)}
+                    >
+                      <option value="'Poppins', sans-serif">Poppins</option>
+                      <option value="'Arial', sans-serif">Arial</option>
+                      <option value="'Calibri', sans-serif">Calibri</option>
+                      <option value="'Helvetica', sans-serif">Helvetica</option>
+                      <option value="'Times New Roman', serif">Times New Roman</option>
+                    </select>
+                  </div>
+                </>
+              )}
             </div>
           );
         
       case 'foss':
         return (
           <div className="settings-section">
-            <h2>FOSS Settings</h2>
+            <h2>Free and Open Source Software (FOSS) Settings</h2>
             <div className="settings-option">
               <label>
                 <input
@@ -360,7 +487,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 />
                 Enable Open Source Mode
               </label>
-              <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
             </div>
           </div>
         );
@@ -393,10 +519,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 onChange={(e) => setNewPassword(e.target.value)}
               />
             </div>
-            <div className="danger-zone">
-              <h3>DANGER ZONE</h3>
-              <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
-            </div>
           </div>
         );
 
@@ -426,6 +548,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         </div>
       </div>
     </div>
+
   );
 };