diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index ea1a818..697fb68 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -1,96 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from'react';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
   const [activeSection, setActiveSection] = useState('general');
 
-  // Theme settings state
-  const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
-  const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
-  const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
-  const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
-  const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
-  const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
-  const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
-  const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
-  const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
-  const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
-  const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
-  const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
-  const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
-  const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
-  const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
-  const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
-  const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
-  const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
-
-  // General settings state
-  const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
-  const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
-  const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
-  const [timeFormat, setTimeFormat] = useState<string>('12-hour');
-  const [timeZone, setTimeZone] = useState<string>('UTC');
-
-  // Privacy settings state
-  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
-  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
-  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
-
-  // FOSS settings state
-  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
-
-  // Account settings state
-  const [newName, setNewName] = useState<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);
-    document.documentElement.style.setProperty('--text-color', textColor);
-    document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
-    document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
-    document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
-    document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
-    document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
-    document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
-    document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
-    document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
-    document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
-    document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
-    document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
-    document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
-    document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
-    document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
-    document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
-    document.documentElement.style.setProperty('--font-family', fontFamily);
-    document.documentElement.style.setProperty('--font-size', fontSize);
-  }, [
-    backgroundColor,
-    textColor,
-    inputBackgroundColor,
-    inputButtonColor,
-    inputButtonHoverColor,
-    userMessageBackgroundColor,
-    userMessageTextColor,
-    aiMessageBackgroundColor,
-    aiMessageTextColor,
-    buttonBackgroundColor,
-    buttonHoverBackgroundColor,
-    modelsBackgroundColor,
-    historyBackgroundColor,
-    leftPanelBackgroundColor,
-    conversationBackgroundColor,
-    popUpTextColor,
-    inputBorderColor,
-    fontFamily,
-    fontSize,
-  ]);
-
   const renderSettingsContent = () => {
     switch (activeSection) {
       case 'general':
@@ -98,430 +10,209 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-section">
             <h2>General Settings</h2>
             <div className="settings-option">
-              <label>Preferred Language</label>
-              <input
-                type="text"
-                value={preferredLanguage}
-                onChange={(e) => setPreferredLanguage(e.target.value)}
-              />
+              <p>Change Language</p>
+              <select>
+                <option value="en">English</option>
+                <option value="es">Spanish</option>
+                <option value="fr">French</option>
+                <option value="de">German</option>
+                <option value="it">Italian</option>
+                <option value="pt">Portuguese</option>
+                <option value="zh">Chinese</option>
+                <option value="ja">Japanese</option>
+                <option value="ko">Korean</option>
+                <option value="ar">Arabic</option>
+                <option value="ru">Russian</option>
+                <option value="he">Hebrew</option>
+              </select>
             </div>
             <div className="settings-option">
-              <label>Preferred Currency</label>
-              <input
-                type="text"
-                value={preferredCurrency}
-                onChange={(e) => setPreferredCurrency(e.target.value)}
-              />
+              <p>Notifications</p>
+              <label>
+                <input type="checkbox" /> Enable notifications
+              </label>
             </div>
             <div className="settings-option">
-              <label>Date Format</label>
-              <input
-                type="text"
-                value={dateFormat}
-                onChange={(e) => setDateFormat(e.target.value)}
-              />
+              <p>Notification Frequency</p>
+              <select>
+                <option value="instant">Instant</option>
+                <option value="daily">Daily</option>
+                <option value="weekly">Weekly</option>
+                <option value="monthly">Monthly</option>
+                <option value="quarterly">Quarterly</option>
+                <option value="annually">Annually</option>
+              </select>
             </div>
             <div className="settings-option">
-              <label>Time Format</label>
-              <input
-                type="text"
-                value={timeFormat}
-                onChange={(e) => setTimeFormat(e.target.value)}
-              />
+              <p>Time Zone</p>
+              <select>
+                <option value="utc">UTC</option>
+                <option value="est">EST</option>
+                <option value="pst">PST</option>
+                <option value="gmt">GMT</option>
+                <option value="cst">CST</option>
+                <option value="mst">MST</option>
+                <option value="bst">BST</option>
+                <option value="cest">CEST</option>
+              </select>
             </div>
             <div className="settings-option">
-              <label>Time Zone</label>
-              <input
-                type="text"
-                value={timeZone}
-                onChange={(e) => setTimeZone(e.target.value)}
-              />
+              <p>Auto-Save</p>
+              <label>
+                <input type="checkbox" /> Enable auto-save
+              </label>
+            </div>
+            <div className="settings-option">
+              <p>Auto-Save Frequency</p>
+              <select>
+                <option value="5">Every 5 minutes</option>
+                <option value="10">Every 10 minutes</option>
+                <option value="15">Every 15 minutes</option>
+                <option value="30">Every 30 minutes</option>
+                <option value="60">Every hour</option>
+              </select>
+            </div>
+            <div className="settings-option">
+              <p>Default Currency</p>
+              <select>
+                <option value="usd">USD</option>
+                <option value="eur">EUR</option>
+                <option value="gbp">GBP</option>
+                <option value="jpy">JPY</option>
+                <option value="cny">CNY</option>
+                <option value="aud">AUD</option>
+              </select>
+            </div>
+            <div className="settings-option">
+              <p>Date Format</p>
+              <select>
+                <option value="mm/dd/yyyy">MM/DD/YYYY</option>
+                <option value="dd/mm/yyyy">DD/MM/YYYY</option>
+                <option value="yyyy-mm-dd">YYYY-MM-DD</option>
+              </select>
+            </div>
+            <div className="settings-option">
+              <p>Time Format</p>
+              <select>
+                <option value="12-hour">12-hour clock</option>
+                <option value="24-hour">24-hour clock</option>
+              </select>
             </div>
           </div>
         );
-
       case 'privacy':
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
             <div className="settings-option">
+              <p>Data Collection</p>
               <label>
-                <input
-                  type="checkbox"
-                  checked={disableOnlineAI}
-                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
-                />
-                Disable Online AI
+                <input type="checkbox" /> Allow data collection
               </label>
             </div>
             <div className="settings-option">
+              <p>Location Access</p>
               <label>
-                <input
-                  type="checkbox"
-                  checked={disableChatHistory}
-                  onChange={() => setDisableChatHistory(!disableChatHistory)}
-                />
-                Disable Chat History Save
+                <input type="checkbox" /> Enable location access
               </label>
             </div>
             <div className="settings-option">
+              <p>Two-Factor Authentication</p>
               <label>
-                <input
-                  type="checkbox"
-                  checked={disableAIMemory}
-                  onChange={() => setDisableAIMemory(!disableAIMemory)}
-                />
-                Disable AI Memory
+                <input type="checkbox" /> Enable 2FA
               </label>
             </div>
             <div className="settings-option">
-              <button onClick={() => { /* Export data logic */ }}>Export My Data</button>
+              <p>Data Export</p>
+              <button>Export Data</button>
+            </div>
+            <div className="settings-option">
+              <p>Cookie Policy</p>
+              <label>
+                <input type="checkbox" /> Accept cookie policy
+              </label>
+            </div>
+            <div className="settings-option">
+              <p>GDPR Compliance</p>
+              <label>
+                <input type="checkbox" /> I agree to GDPR terms
+              </label>
+            </div>
+            <div className="settings-option">
+              <p>CCPA Compliance</p>
+              <label>
+                <input type="checkbox" /> I agree to CCPA terms
+              </label>
+            </div>
+            <div className="settings-option">
+              <p>Biometric Data</p>
+              <label>
+                <input type="checkbox" /> Allow biometric data collection
+              </label>
             </div>
           </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;
-                    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="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':
+      case 'theme':
         return (
           <div className="settings-section">
-            <h2>Free and Open Source Software (FOSS) Settings</h2>
+            <h2>Theme Settings</h2>
             <div className="settings-option">
-              <label>
-                <input
-                  type="checkbox"
-                  checked={openSourceMode}
-                  onChange={() => setOpenSourceMode(!openSourceMode)}
-                />
-                Enable Open Source Mode
-              </label>
+              <p>Choose Theme Color</p>
+              <input type="color" />
+            </div>
+            <div className="settings-option">
+              <p>Font Size</p>
+              <input type="range" min="10" max="30" />
+            </div>
+            <div className="settings-option">
+              <p>Background Pattern</p>
+              <select>
+                <option value="solid">Solid</option>
+                <option value="striped">Striped</option>
+                <option value="dots">Dotted</option>
+                <option value="grid">Grid</option>
+              </select>
+            </div>
+            <div className="settings-option">
+              <p>Font Family</p>
+              <select>
+                <option value="arial">Arial</option>
+                <option value="calibri">Calibri</option>
+                <option value="helvetica">Helvetica</option>
+              </select>
+            </div>
+            <div className="settings-option">
+              <p>Button Style</p>
+              <select>
+                <option value="flat">Flat</option>
+                <option value="raised">Raised</option>
+                <option value="rounded">Rounded</option>
+              </select>
             </div>
           </div>
         );
-
       case 'account':
         return (
           <div className="settings-section">
             <h2>Account Settings</h2>
             <div className="settings-option">
-              <label>Change Name</label>
-              <input
-                type="text"
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-              />
+              <p>Change Name</p>
+              <input type="text" placeholder="New Name" />
             </div>
             <div className="settings-option">
-              <label>Change Email</label>
-              <input
-                type="email"
-                value={newEmail}
-                onChange={(e) => setNewEmail(e.target.value)}
-              />
+              <p>Change Email</p>
+              <input type="email" placeholder="New Email" />
             </div>
             <div className="settings-option">
-              <label>Change Password</label>
-              <input
-                type="password"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-              />
+              <p>Change Password</p>
+              <input type="password" placeholder="New Password" />
+            </div>
+            <div className="settings-option">
+              <p>Delete Account</p>
+              <button>Delete Account</button>
             </div>
           </div>
         );
-
       default:
         return null;
     }
@@ -536,7 +227,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <li onClick={() => setActiveSection('general')}>General</li>
               <li onClick={() => setActiveSection('privacy')}>Privacy</li>
               <li onClick={() => setActiveSection('theme')}>Theme</li>
-              <li onClick={() => setActiveSection('foss')}>FOSS</li>
               <li onClick={() => setActiveSection('account')}>Account</li>
             </ul>
           </div>
@@ -548,8 +238,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         </div>
       </div>
     </div>
-
   );
 };
 
-export default Settings;
+export default Settings;
\ No newline at end of file
diff --git a/app/styles/Login.css b/app/styles/Login.css
index c8c559e..c2754a9 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -36,8 +36,8 @@
 
 /* Popup content box */
 .popup-content {
-    background: var(--popup-background-color); /* Use variable for background color */
-    color: var(--popup-text-color); /* Use variable for text color */
+    background: var(--background-color);
+    color: var(--text-color);
     padding: 30px;
     border-radius: 10px;
     width: 300px;
@@ -63,7 +63,7 @@
 
 /* Close button */
 .close-popup {
-    background: var(--close-button-color); /* Use variable for close button color */
+    background: red; /* Exception to the rule */
     color: var(--text-color);
     border: none;
     border-radius: 5px;
@@ -73,7 +73,7 @@
 }
 
 .log-into-account {
-    background: var(--login-button-color); /* Use variable for login button color */
+    background: green; /* Exception to the rule */
     color: var(--text-color);
     border: none;
     border-radius: 5px;
@@ -111,6 +111,6 @@
 }
 
 .popup-content p {
-    color: var(--popup-text-color); /* Use variable for paragraph text color */
+    color: var(--pop-up-text);
     margin: 10px;
 }
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index 014a3a8..a3c7fa0 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -12,27 +12,18 @@
     z-index: 10000;
 }
 
-.settings-main h2 {
-    margin-bottom: 1em;
-}   
+.settings-container{
 
-.settings-main p {
-    padding-bottom: 7px;
-}
-
-/* Main container for the settings */
-.settings-container {
     display: grid;
     grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
     grid-auto-flow: column;
-    overflow-x: hidden;
-    height: 100%; /* Ensure it takes full height */
+    overflow-x:hidden;
 }
 
 /* Settings content */
 .settings-content {
-    background: var(--history-background-color);
-    color: var(--text-color);
+    background: #f5f5f5;
+    color: #333;
     padding: 20px;
     border-radius: 10px;
     width: 90%;
@@ -40,15 +31,13 @@
     height: 90%;
     max-height: 600px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow: hidden; /* Prevents overflow of the content */
+    overflow: scroll; /* Prevents overflow of the content */
     position: relative; /* Needed for absolute positioning of close button */
-    display: flex;
-    flex-direction: column; /* Flexbox for vertical stacking */
 }
 
 /* Sidebar styles */
 .sidebar {
-    background: var(--settings-background-color);
+    background: #e0e0e0;
     padding: 20px;
     border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
@@ -56,17 +45,15 @@
     display: flex;
     flex-direction: column;
     grid-column: 1; /* Places sidebar in the first grid column */
-    height: 100%; /* Ensures sidebar takes full height */
 }
 
 /* Sidebar item styles */
 .sidebar ul {
     list-style-type: none;
     padding: 0;
-    margin: 0;
+    margin: 0; /* Ensure no margin for the list */
     display: flex;
     flex-direction: column; /* Make the ul a column */
-    flex-grow: 1; /* Allows the list to take available space */
 }
 
 .sidebar li {
@@ -78,11 +65,11 @@
 }
 
 .sidebar li:hover {
-    background: var(--input-button-hover-color); /* Highlight on hover */
+    background: #d0d0d0; /* Highlight on hover */
 }
 
 .sidebar li.active {
-    background: var(--button-hover-background-color); /* Active section highlight */
+    background: #b0b0b0; /* Active section highlight */
 }
 
 /* Main settings area */
@@ -91,14 +78,14 @@
     padding: 20px;
     border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
     overflow-y: auto; /* Scroll if content exceeds height */
-    display: flex;
+    display: flex; /* Ensure main settings area displays content correctly */
     flex-direction: column; /* Stack content vertically */
 }
 
 /* Close button positioning */
 .close-popup {
-    background-color: var(--close-button-color);
-    color: var(--user-message-text-color);
+    background-color: #ff4d4d;
+    color: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     padding: 10px 20px;
     border: none;
@@ -111,39 +98,21 @@
 }
 
 .close-popup:hover {
-    background-color: var(--close-button-hover-color); /* Darker red on hover */
+    background-color: #e63939; /* Darker red on hover */
 }
 
 /* Additional styles for inputs and options */
-.settings-option {
-    margin-bottom: 20px; /* Adds space between each setting option */
-    padding-bottom: 10px; /* Adds internal spacing */
-    border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
-}
-
-.settings-option:last-child {
-    margin-bottom: 0; /* Removes bottom margin from last option */
-    border-bottom: none; /* Removes separator from last option */
-}
-
 .settings-option input[type="text"],
 .settings-option input[type="email"],
 .settings-option input[type="password"],
 .settings-option input[type="color"],
 .settings-option input[type="range"],
 .settings-option select {
-    border-color: var(--input-border-color);
-    color: var(--text-color);
+    border-color: #ccc;
+    color: #333;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     padding: 10px;
     border-radius: 5px;
     width: 100%;
-    margin-bottom: 10px; /* Adds spacing between inputs */
-}
-
-/* Optional additional spacing for labels */
-.settings-option label {
-    margin-bottom: 5px;
-    display: block;
-    font-weight: bold;
+    margin-bottom: 10px; /* Add spacing between inputs */
 }
diff --git a/app/styles/container.css b/app/styles/container.css
index 08f254a..528c675 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -12,8 +12,6 @@
 .left-panel {
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
-    background-color: var(--left-panel-background-color); /* Use variable for background color */
-    border-radius: 0 1em 0 0;
 }
 
 .left-panel.hidden {
@@ -25,8 +23,6 @@
 .conversation-container {
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
-    background-color: var(--conversation-background-color); /* Use variable for background color */
-    border-radius: 1em 0 0 0;
 }
 
 /* Adjust margin-left when panel is shown or hidden */
diff --git a/app/styles/doc.css b/app/styles/doc.css
index eb06945..d924358 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -9,7 +9,7 @@
   max-width: 900px;
   height: 80vh;
   margin: 0 auto;
-  background: var(--doc-background-color); /* Use variable for background */
+  background: #fff;
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
@@ -18,27 +18,29 @@
 
 .title {
   font-size: 2rem;
-  color: var(--doc-title-color); /* Use variable for title color */
+  color: #333;
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
   font-size: 1.5rem;
-  color: var(--doc-subtitle-color); /* Use variable for subtitle color */
+  color: #555;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .subsection-title {
   font-size: 1.25rem;
-  color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
+  color: #666;
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .paragraph {
   font-size: 1rem;
-  color: var(--doc-paragraph-color); /* Use variable for paragraph color */
+  color: #333;
   margin-bottom: 1.5rem;
   line-height: 1.6;
 }
+
+
diff --git a/app/styles/faq.css b/app/styles/faq.css
index 1484722..05e93e5 100644
--- a/app/styles/faq.css
+++ b/app/styles/faq.css
@@ -11,7 +11,7 @@
     max-width: 800px;
     width: 90%;
     padding: 20px;
-    background-color: var(--faq-background-color); /* Use variable for background */
+    background-color: #222;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     overflow-y: scroll; /* Allow vertical scrolling if content overflows */
@@ -21,7 +21,7 @@
 
 #faq h2 {
     text-align: center;
-    color: var(--faq-heading-color); /* Use variable for heading color */
+    color: #00ccff;
     font-size: 2em;
     margin-bottom: 20px;
 }
@@ -30,22 +30,22 @@
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 5px;
-    background-color: var(--faq-item-background-color); /* Use variable for item background */
+    background-color: #333;
     transition: background-color 0.3s ease-in-out;
 }
 
 .faq-item h3 {
-    color: var(--faq-item-heading-color); /* Use variable for item heading color */
+    color: #00ccff;
     margin-bottom: 10px;
     font-size: 1.5em;
 }
 
 .faq-item p {
-    color: var(--faq-item-text-color); /* Use variable for item text color */
+    color: #ddd;
     font-size: 1.1em;
     line-height: 1.5;
 }
 
 .faq-item:hover {
-    background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
+    background-color: #444;
 }
diff --git a/app/styles/global.css b/app/styles/global.css
index f1bcfdf..2a2b956 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -14,34 +14,5 @@ body {
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
-    font-size: var(--font-size);
     margin-bottom: 0.5em;
 }
-
-
-header {
-    background-color: var(--header-background-color);
-    color: var(--header-text-color);
-    padding: 1rem; /* Adjust padding as needed */
-}
-
-button {
-    background-color: var(--button-background-color);
-    color: var(--text-color);
-    border: 1px solid var(--input-border-color);
-    transition: background-color 0.3s ease;
-}
-
-button:hover {
-    background-color: var(--button-hover-background-color);
-}
-
-input {
-    background-color: var(--input-background-color);
-    border: 1px solid var(--input-border-color);
-    color: var(--text-color);
-}
-
-input:hover {
-    border-color: var(--button-hover-background-color);
-}
diff --git a/app/styles/header.css b/app/styles/header.css
index eed0f9e..8ecc019 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,6 +1,6 @@
 header {
-    background-color: var(--header-background-color); /* Use the new header background color */
-    color: var(--header-text-color); /* Use the new header text color */
+    background-color: var(--background-color);
+    color: black;
     width: 100%;
     text-decoration: none;
     position: fixed;
@@ -24,7 +24,7 @@ header img {
 
 header a, 
 header li button {
-    color: var(--header-text-color); /* Use the new header text color */
+    color: black;
     text-decoration: none;
     transition: color 0.3s;
     border: none;
@@ -34,5 +34,5 @@ header li button {
 
 header a:hover,
 header li button:hover {
-    color: var(--input-button-color); /* Keep the hover color */
+    color: var(--input-button-color);
 }
diff --git a/app/styles/history.css b/app/styles/history.css
index 7bc9bcd..d1adcd0 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -29,7 +29,7 @@
 .history ul li a {
     display: block;
     text-decoration: none;
-    color: var(--text-color); /* Use variable for link text color */
+    color: white;
     width: 100%;
     padding: 5px;
 }
diff --git a/app/styles/input.css b/app/styles/input.css
index ceeb0b3..12b71e2 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -22,8 +22,8 @@
     border: 2px solid var(--input-button-color);
     outline: none;
     margin-right: 10px;
-    background-color: var(--input-background-color); /* Use variable for background */
-    color: var(--text-color); /* Use variable for text color */
+    background-color: rgba(255, 255, 255, 0.9);
+    color: #333;
     transition: border-color 0.3s ease-in-out;
     height: 7vh;
 }
@@ -36,7 +36,7 @@
     padding: 1em;
     margin: 5px;
     background-color: var(--input-button-color);
-    color: var(--user-message-text-color); /* Use variable for button text color */
+    color: white;
     border: none;
     border-radius: 50%;
     font-size: 1.5em;
diff --git a/app/styles/models.css b/app/styles/models.css
index c53d14b..9f853f1 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,20 +1,21 @@
 .model-background {
-    grid-column: 1 / 2;
-    grid-row: 2 / 5;
+    grid-column: 1/2;
+    grid-row: 2/5;
     overflow-y: auto;
-    background-color: var(--models-background-color); /* Ensure this variable is defined */
+    background-color: var(--models-background-color);
     border-radius: 2em;
     padding: 1em;
     margin-left: 1em;
     height: 40vh;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
 .models {
-    grid-column: 1 / 2;
-    grid-row: 2 / 5;
+    grid-column: 1/2;
+    grid-row: 2/5;
     overflow-y: auto;
-    background-color: var(--models-background-color); /* Ensure this variable is defined */
+    background-color: var(--models-background-color);
     border-radius: 2em;
     padding: 1em;
     height: 100%;
@@ -54,7 +55,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-color); /* Use variable for text color */
+    color: #fff;
     border-radius: 5%;
     overflow: hidden;
     position: relative;
@@ -69,7 +70,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    color: var(--text-color); /* Use variable for overlay text color */
+    color: white;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -102,7 +103,7 @@
 
 .math-model {
     background-image: url(/img/math.jpg);
-    background-color: var(--background-color); /* Use variable for background color */
+    background-color: white;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -110,7 +111,7 @@
 
 .language-model {
     background-image: url(/img/language.jpg);
-    background-color: #72cce4; /* Use variable for background color */
+    background-color: #72cce4;
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
diff --git a/app/styles/output.css b/app/styles/output.css
index f5d7924..f105f90 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -11,7 +11,8 @@
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
-    width: calc(100% - 2em); /* Corrected calculation for width */
+    margin-bottom: 0;
+    width: 100% -2em;
     height: 70vh;
     margin-bottom: 1vh;
 }
@@ -58,8 +59,10 @@
     background: none;
     border: none;
     cursor: pointer;
+    background-color: var(--button-background-color);
     border-radius: 50%;
     padding: 10px;
+    padding-top: 0;
     transition: background-color 0.3s ease;
 }
 
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 31f563d..b995946 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -1,6 +1,6 @@
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  * {
+  *{
     margin: 0;
     padding: 0;
   }
@@ -28,7 +28,7 @@
     padding: 0;
   }
 
-  header li {
+  header li{
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -47,46 +47,46 @@
   }
 
   /* Left panel styles */
-  .left-panel {
+ .left-panel {
     display: none; /* Initially hidden */
     min-width: 90%; /* Takes full width when visible */
     margin: 0;
   }
 
-  .left-panel.visible {
+ .left-panel.visible {
     display: block;
   }
 
   /* Conversation container styles */
-  .conversation-container {
+ .conversation-container {
     width: 90%;
     height: 90%;
   }
 
-  .conversation-container.collapsed {
+ .conversation-container.collapsed {
     width: 0;
     padding: 0;
     border: none;
     overflow: hidden;
   }
 
-  .conversation-container.expanded {
+ .conversation-container.expanded {
     width: 100%;
   }
 
   /* Grid styles */
-  .grid {
+ .grid {
     grid-template-columns: 1fr; /* One item per line */
   }
 
   /* Model box styles */
-  .model-box {
+ .model-box {
     max-width: none; /* Remove max-width */
     margin: 0 auto; /* Center each model-box */
   }
 
   /* Input styles */
-  .input {
+ .input {
     grid-column: 1 / -1;
     gap: 10px;
     padding: 0.5em;
@@ -95,35 +95,32 @@
     width: 90%;
   }
 
-  .input input {
+ .input input {
     font-size: 1em; /* Adjust font size */
     max-width: 65%;
     margin-right: 0;
-    border-color: var(--input-border-color); /* Use variable for input border */
-    color: var(--text-color); /* Use variable for text color */
   }
 
-  .input button {
+ .input button {
     height: 40px; /* Adjust button height */
     width: 40px; /* Adjust button width */
     font-size: 1.2em; /* Adjust button font size */
     margin: auto;
-    background-color: var(--input-button-color); /* Use variable for button color */
-    color: var(--user-message-text-color); /* Use variable for button text color */
   }
 }
 
-/* Responsive adjustments for the settings */
+
+/* Responsive adjustments for the settings*/
 @media (max-width: 768px) {
   .settings-content {
-    flex-direction: column; /* Stack sidebar and main content on smaller screens */
+      flex-direction: column; /* Stack sidebar and main content on smaller screens */
   }
 
   .sidebar {
-    width: 100%; /* Full width for sidebar */
+      width: 100%; /* Full width for sidebar */
   }
 
   .settings-main {
-    width: 100%; /* Full width for main content */
+      width: 100%; /* Full width for main content */
   }
-}
+}
\ No newline at end of file
diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css
index 7608126..5e2f6a1 100644
--- a/app/styles/scrollbar.css
+++ b/app/styles/scrollbar.css
@@ -8,10 +8,10 @@
 }
 
 .scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--input-border-color); /* Use variable for thumb color */
+  background-color: #ccc;
   border-radius: 4px;
 }
 
 .scrollbar::-webkit-scrollbar-track {
-  background-color: var(--history-background-color); /* Use variable for track color */
-}
+  background-color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index ebb9da1..91a04d6 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -11,7 +11,7 @@
 }
 
 .user-message {
-    background-color: var(--user-message-background-color);
+    background-color: var(--user-message-color);
     color: var(--text-color);
     border-bottom-right-radius: 0;
     margin-left: auto;
@@ -19,9 +19,9 @@
 }
 
 .ai-message {
-    background-color: var(--ai-message-background-color);
+    background-color: var(--ai-message-color);
     color: var(--text-color);
     border-bottom-left-radius: 0;
     margin-right: auto;
     text-align: left;
-}
+}
\ No newline at end of file
diff --git a/app/styles/variables.css b/app/styles/variables.css
index e5b3bbc..97b3628 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -1,34 +1,16 @@
 :root {
-    /* Colors */
-    --header-background-color: #7e7e7e; /* New header background color */
-    --header-text-color: #ffffff; /* Header text color */
-    --background-color: #8B9635; /* Main background color */
-    --text-color: #474D22; /* Main text color */
-    --input-background-color: #ffffff; /* Background color for input fields */
-    --input-button-color: #8B9635; /* Button color */
-    --input-button-hover-color: #6b7c2b; /* Hover color for input buttons */
-    --user-message-background-color: #8B9635; /* Background color for user messages */
-    --user-message-text-color: #000; /* Text color for user messages */
-    --ai-message-background-color: #FCFCEB; /* Background color for AI messages */
-    --ai-message-text-color: #000; /* Text color for AI messages */
-    --button-background-color: #8B9635; /* Button background color */
-    --button-hover-background-color: #6b7c2b; /* Button hover color */
-    --models-background-color: #ffffff; /* Background for models section */
-    --history-background-color: #f9f9f9; /* Background color for history */
-    --left-panel-background-color: #79832e; /* Background color for left panel */
-    --conversation-background-color: #79832e; /* Background color for conversation container */
-    --doc-background-color: #ffffff; /* Background color for documents */
-    
-    /* FAQ Colors */
-    --faq-background-color: #474D22; /* Background color for FAQ section */
-    --faq-heading-color: #8B9635; /* Heading color for FAQ section */
-    --faq-item-background-color: #fefefe; /* Background color for FAQ items */
-    --faq-item-heading-color: #474D22; /* Heading color for FAQ items */
-    --faq-item-text-color: #333; /* Text color for FAQ items */
-    --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
-
-    --pop-up-text: #000; /* Text color for pop-ups */
-    --input-border-color: #8B9635; /* Input border color */
-    --font-family: 'Poppins', 'sans-serif';/* Default font family */
-    --font-size: 16px;
+    --background-color: white;
+    --text-color: white;
+    --font-family: Arial, sans-serif;
+    --history-background-color: rgb(0, 0, 48);
+    --models-background-color: rgb(0, 0, 48);
+    --output-background-color: black;
+    --user-message-color: rgb(0, 128, 255);
+    --ai-message-color: rgb(100, 100, 255);
+    --input-background-color: rgb(0, 0, 48);
+    --input-button-color: rgb(0, 128, 255);
+    --input-button-hover-color: rgb(0, 100, 200);
+    --scrollbar-track: rgb(91, 172, 253);
+    --scrollbar-thumb: rgb(0, 88, 176);
+    --pop-up-text: darkgrey;
 }
diff --git a/py/ai.py b/py/ai.py
index a8c5537..bfde713 100644
--- a/py/ai.py
+++ b/py/ai.py
@@ -1,6 +1,5 @@
 from mistralai import Mistral
 from openai import OpenAI
-import anthropic
 import ollama
 
 
@@ -45,8 +44,7 @@ class AI:
 
         stream_response = client.chat.completions.create(
             model=model,
-            messages=messages,
-            stream=True
+            messages=messages
         )
 
         with return_class.ai_response_lock:
@@ -54,21 +52,4 @@ class AI:
 
         for chunk in stream_response:
             with return_class.ai_response_lock:
-                return_class.ai_response[access_token] += chunk.choices[0].delta.content
-
-    @staticmethod
-    def process_anthropic(model, messages, return_class, access_token, api_key):
-
-        client = anthropic.Anthropic(api_key=api_key)
-
-        with return_class.ai_response_lock:
-            return_class.ai_response[access_token] = ""
-
-        with client.messages.stream(
-                max_tokens=1024,
-                model=model,
-                messages=messages,
-        ) as stream:
-            for text in stream.text_stream:
-                with return_class.ai_response_lock:
-                    return_class.ai_response[access_token] += text
+                return_class.ai_response[access_token] += chunk.choices[0].delta.content
\ No newline at end of file
diff --git a/py/api.py b/py/api.py
index 55d0483..386cd4f 100644
--- a/py/api.py
+++ b/py/api.py
@@ -46,18 +46,6 @@ class API:
                 thread.start()
                 thread.join()
                 return jsonify({'status': 200})
-            elif model_type == "openai":
-                api_key = data.get('api_key')
-                thread = threading.Thread(target=self.ai.process_openai, args=(ai_model, messages, self, access_token, api_key))
-                thread.start()
-                thread.join()
-                return jsonify({'status': 200})
-            elif model_type == "anthropic":
-                api_key = data.get('api_key')
-                thread = threading.Thread(target=self.ai.process_anthropic, args=(ai_model, messages, self, access_token, api_key))
-                thread.start()
-                thread.join()
-                return jsonify({'status': 200})
 
             return jsonify({'status': 401, 'error': 'Invalid AI model type'})
 
diff --git a/py/requirements.txt b/py/requirements.txt
index 8a79dc1..3c2be3b 100644
--- a/py/requirements.txt
+++ b/py/requirements.txt
@@ -3,6 +3,4 @@ flask-cors
 ollama
 mistralai
 openai
-anthropic
-pyOpenSSL
-pywebview
\ No newline at end of file
+pyOpenSSL
\ No newline at end of file
diff --git a/py/webapp.py b/py/webapp.py
deleted file mode 100644
index 6ad4725..0000000
--- a/py/webapp.py
+++ /dev/null
@@ -1,3 +0,0 @@
-import webview
-webview.create_window('Interstellar AI', 'http://localhost:3000')
-webview.start()