diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 983a512..b4a59b7 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -4,9 +4,6 @@ import ConversationFrontend from '../components/ConversationFrontend';
 import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
-import { resolve } from "path";
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { fetchFile, toBlobURL } from "@ffmpeg/util"
 
 const InputOutputBackend: React.FC = () => {
   // # variables
diff --git a/app/components/settings/ButtonSettings.tsx b/app/components/settings/ButtonSettings.tsx
deleted file mode 100644
index 3352fbf..0000000
--- a/app/components/settings/ButtonSettings.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-
-interface ButtonSettingProps {
-  label: string; // The label to display on the button
-  onClick: () => void; // The function to call when the button is clicked
-  className?: string; // Optional additional classes for styling
-}
-
-const ButtonSetting: React.FC<ButtonSettingProps> = ({ label, onClick, className }) => {
-  return (
-    <div className="settings-option">
-      <button
-        onClick={onClick} // Call the onClick function when the button is clicked
-        className={className} // Apply any additional classes
-      >
-        {label} {/* Display the label on the button */}
-      </button>
-    </div>
-  );
-};
-
-export default ButtonSetting;
diff --git a/app/components/settings/CheckBox.tsx b/app/components/settings/CheckBox.tsx
deleted file mode 100644
index 1b1ece5..0000000
--- a/app/components/settings/CheckBox.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-interface CheckboxSettingProps {
-  label: string; // The label to display
-  checked: boolean; // The checked state of the checkbox
-  setChecked: (value: boolean) => void; // Method to update the state
-}
-
-const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => {
-  const handleCheckboxChange = () => {
-    setChecked(!checked);
-  };
-
-  return (
-    <div className="settings-option">
-      <label>
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={handleCheckboxChange}
-        />
-        {label}
-      </label>
-    </div>
-  );
-};
-
-export default CheckboxSetting;
diff --git a/app/components/settings/ColorSettings.tsx b/app/components/settings/ColorSettings.tsx
index 4ada123..42b69f8 100644
--- a/app/components/settings/ColorSettings.tsx
+++ b/app/components/settings/ColorSettings.tsx
@@ -1,29 +1,29 @@
-    import React from 'react';
+import React from 'react';
 
-    interface ColorSettingProps {
-    name: string; // The name to display in the <p> tag
-    value: string; // The current color value
-    setValue: (newColor: string) => void; // The method to update the state
-    cssVariable: string; // The CSS variable name to set
-    }
+interface ColorSettingProps {
+  name: string; // The name to display in the <p> tag
+  value: string; // The current color value
+  setValue: (newColor: string) => void; // The method to update the state
+  cssVariable: string; // The CSS variable name to set
+}
 
-    const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
-    const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newColor = e.target.value;
-        setValue(newColor);
-        document.documentElement.style.setProperty(cssVariable, newColor);
-    };
+const ColorSetting: React.FC<ColorSettingProps> = ({ name, value, setValue, cssVariable }) => {
+  const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = e.target.value;
+    setValue(newColor);
+    document.documentElement.style.setProperty(cssVariable, newColor);
+  };
 
-    return (
-        <div className="settings-option">
-        <p>{name}</p>
-        <input
-            type="color"
-            value={value}
-            onChange={handleColorChange}
-        />
-        </div>
-    );
-    };
+  return (
+    <div className="settings-option">
+      <p>{name}</p>
+      <input
+        type="color"
+        value={value}
+        onChange={handleColorChange}
+      />
+    </div>
+  );
+};
 
-    export default ColorSetting;
+export default ColorSetting;
diff --git a/app/components/settings/DropDown.tsx b/app/components/settings/DropDown.tsx
deleted file mode 100644
index 9b0f79d..0000000
--- a/app/components/settings/DropDown.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-
-interface Option {
-  value: string; // The actual value to be used
-  label: string; // The label to display for the option
-}
-
-interface DropdownSettingProps {
-  label: string; // The label to display
-  value: string; // The current selected value
-  setValue: (newValue: string) => void; // The method to update the state
-  options: Option[]; // List of options for the dropdown
-}
-
-const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
-  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = e.target.value;
-    setValue(newValue);
-  };
-
-  return (
-    <div className="settings-option">
-      <label>{label}</label>
-      <select value={value} onChange={handleSelectChange}>
-        {options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default DropdownSetting;
diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx
deleted file mode 100644
index 955158f..0000000
--- a/app/components/settings/DropDownTheme.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// ThemeDropdown.tsx
-import React from 'react';
-import { applyTheme, applyCustomTheme } from './theme';
-
-const ThemeDropdown: React.FC<{
-  selectedTheme: string;
-  setSelectedTheme: (theme: string) => void;
-}> = ({ selectedTheme, setSelectedTheme }) => {
-  const themeOptions = [
-    { value: 'IOMARKET', label: 'IOMARKET' },
-    { value: 'WHITE', label: 'WHITE' },
-    { value: 'BLACK', label: 'BLACK' },
-    { value: 'CUSTOM', label: 'CUSTOM' },
-  ];
-
-  return (
-    <div className="settings-option">
-      <p>Select Theme</p>
-      <select
-        value={selectedTheme}
-        onChange={(e) => {
-          const theme = e.target.value;
-          if (theme !== 'default') {
-            setSelectedTheme(theme);
-            localStorage.setItem('selectedTheme', theme);
-            applyTheme(theme); // Ensure you define applyTheme
-          }
-        }}
-      >
-        <option value="default">Select your style...</option>
-        {themeOptions.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
-};
-
-export default ThemeDropdown;
diff --git a/app/components/settings/FontSize.tsx b/app/components/settings/FontSize.tsx
deleted file mode 100644
index d126ca5..0000000
--- a/app/components/settings/FontSize.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// FontSizeSetting.tsx
-import React from 'react';
-
-interface FontSizeSettingProps {
-  fontSize: string; // The current font size
-  setFontSize: (newSize: string) => void; // Function to update the font size
-}
-
-const FontSizeSetting: React.FC<FontSizeSettingProps> = ({ fontSize, setFontSize }) => {
-  const handleFontSizeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newSize = `${e.target.value}px`;
-    setFontSize(newSize);
-    document.documentElement.style.setProperty('--font-size', newSize);
-  };
-
-  return (
-    <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={handleFontSizeChange}
-      />
-      <span>{fontSize}</span>
-    </div>
-  );
-};
-
-export default FontSizeSetting;
diff --git a/app/components/settings/OpenSourceToggle.tsx b/app/components/settings/OpenSourceToggle.tsx
deleted file mode 100644
index 9e60415..0000000
--- a/app/components/settings/OpenSourceToggle.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// OpenSourceModeToggle.tsx
-import React from 'react';
-
-interface OpenSourceModeToggleProps {
-  openSourceMode: boolean; // Current state of open source mode
-  setOpenSourceMode: (value: boolean) => void; // Function to update open source mode
-  setSelectedOption: (value: string) => void; // Function to update the selected option
-}
-
-const OpenSourceModeToggle: React.FC<OpenSourceModeToggleProps> = ({ 
-  openSourceMode, 
-  setOpenSourceMode, 
-  setSelectedOption 
-}) => {
-  const handleToggleChange = () => {
-    const newValue = !openSourceMode;
-    setOpenSourceMode(newValue);
-    
-    // Update radio selection based on the new openSourceMode value
-    if (newValue) {
-      setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
-    } else {
-      setSelectedOption('None'); // Or any other default value when disabling
-    }
-  };
-
-  return (
-    <div className="settings-option">
-      <label>
-        <input
-          type="checkbox"
-          checked={openSourceMode}
-          onChange={handleToggleChange}
-        />
-        Enable Open Source Mode
-      </label>
-    </div>
-  );
-};
-
-export default OpenSourceModeToggle;
diff --git a/app/components/settings/PrivacySettings.tsx b/app/components/settings/PrivacySettings.tsx
deleted file mode 100644
index d7ff28e..0000000
--- a/app/components/settings/PrivacySettings.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-// PrivacySettings.tsx
-import React from 'react';
-
-interface PrivacySettingsProps {
-  selectedOption: string; // The currently selected option
-  handleRadioChange: (option: string) => void; // Function to handle option changes
-  openSourceMode: boolean; // Boolean to check if the mode is open source
-}
-
-const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
-  return (
-    <>
-      {/* AI Mode Radio Options */}
-      <div className="settings-option">
-        <p>Disable Options:</p>
-        <div className="slider">
-          {/* Offline */}
-          <div
-            className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
-            onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
-          >
-            Offline tools{openSourceMode ? ' (FOSS)' : ''}
-          </div>
-
-          {/* Online */}
-          <div
-            className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
-            onClick={() => handleRadioChange('Online')}
-          >
-            Online tools{openSourceMode ? ' (FOSS)' : ''}
-          </div>
-
-          {/* None */}
-          <div
-            className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
-            onClick={() => handleRadioChange('None')}
-          >
-            None{openSourceMode ? ' (FOSS)' : ''}
-          </div>
-        </div>        
-        <br />
-        <p>
-          After changing the preferred settings, please reload the website so it can update itself properly.
-        </p>
-      </div>
-    </>
-  );
-};
-
-export default PrivacySettings;
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index a35131f..feb5558 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -3,19 +3,11 @@ import { applyTheme, applyCustomTheme } from './theme';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 import { getAllLocalStorageItems } from '../../backend/GetLocalStorage';
 import ColorSetting from './ColorSettings';
-import TextSettings from './TextSettings'
-import ButtonSetting from './ButtonSettings';
-import DropdownSetting from './DropDown';
-import CheckboxSetting from './CheckBox';
-import PrivacySettings from './PrivacySettings';
-import FontSizeSetting from './FontSize';
-import OpenSourceModeToggle from './OpenSourceToggle';
 import {
   changePassword,
   changeData,
   deleteAccount,
 } from '../../backend/database';
-import ThemeDropdown from './DropDownTheme';
 
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@@ -72,7 +64,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
       // Theme settings
       const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
-      const [headerBackground, setHeaderBackground] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--header-background-color').trim());
       const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
       const [inputBackgroundColor, setInputBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
       const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
@@ -106,8 +97,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       const [selectedTheme, setSelectedTheme] = useState<string>('');
 
       // API Keys
-      const [mistral, setMistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
-      const [openai, setOpenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+      const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+      const [openai, setopenai] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
       const [anthropic, setAnthropic] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
       const [google, setGoogle] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
 
@@ -132,7 +123,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         },
         theme: {
           backgroundColor,
-          headerBackground,       
           textColor,
           inputBackgroundColor,
           inputButtonColor,
@@ -176,109 +166,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         },
       };
 
-      const colorSettings = [
-        { name: "Background Color", value: headerBackground, setValue: setBackgroundColor, cssVariable: "--background-color" },
-        { name: "Header Background Color", value: backgroundColor, setValue: setHeaderBackground, cssVariable: "--background-color" },
-        { name: "Text Color", value: textColor, setValue: setTextColor, cssVariable: "--text-color" },
-        { name: "Input Background Color", value: inputBackgroundColor, setValue: setInputBackgroundColor, cssVariable: "--input-background-color" },
-        { name: "Input Button Color", value: inputButtonColor, setValue: setInputButtonColor, cssVariable: "--input-button-color" },
-        { name: "Input Button Hover Color", value: inputButtonHoverColor, setValue: setInputButtonHoverColor, cssVariable: "--input-button-hover-color" },
-        { name: "User Message Background Color", value: userMessageBackgroundColor, setValue: setUserMessageBackgroundColor, cssVariable: "--user-message-background-color" },
-        { name: "User Message Text Color", value: userMessageTextColor, setValue: setUserMessageTextColor, cssVariable: "--user-message-text-color" },
-        { name: "AI Message Background Color", value: aiMessageBackgroundColor, setValue: setAiMessageBackgroundColor, cssVariable: "--ai-message-background-color" },
-        { name: "AI Message Text Color", value: aiMessageTextColor, setValue: setAiMessageTextColor, cssVariable: "--ai-message-text-color" },
-        { name: "Button Background Color", value: buttonBackgroundColor, setValue: setButtonBackgroundColor, cssVariable: "--button-background-color" },
-        { name: "Button Hover Background Color", value: buttonHoverBackgroundColor, setValue: setButtonHoverBackgroundColor, cssVariable: "--button-hover-background-color" },
-        { name: "Models Background Color", value: modelsBackgroundColor, setValue: setModelsBackgroundColor, cssVariable: "--models-background-color" },
-        { name: "History Background Color", value: historyBackgroundColor, setValue: setHistoryBackgroundColor, cssVariable: "--history-background-color" },
-        { name: "Left Panel Background Color", value: leftPanelBackgroundColor, setValue: setLeftPanelBackgroundColor, cssVariable: "--left-panel-background-color" },
-        { name: "Conversation Background Color", value: conversationBackgroundColor, setValue: setConversationBackgroundColor, cssVariable: "--conversation-background-color" },
-        { name: "Pop-up Text Color", value: popUpTextColor, setValue: setPopUpTextColor, cssVariable: "--pop-up-text" },
-        { name: "Input Border Color", value: inputBorderColor, setValue: setInputBorderColor, cssVariable: "--input-border-color" },
-        { name: "FAQ Background Color", value: faqBackgroundColor, setValue: setFaqBackgroundColor, cssVariable: "--faq-background-color" },
-        { name: "FAQ Heading Color", value: faqHeadingColor, setValue: setFaqHeadingColor, cssVariable: "--faq-heading-color" },
-        { name: "FAQ Item Background Color", value: faqItemBackgroundColor, setValue: setFaqItemBackgroundColor, cssVariable: "--faq-item-background-color" },
-        { name: "FAQ Item Heading Color", value: faqItemHeadingColor, setValue: setFaqItemHeadingColor, cssVariable: "--faq-item-heading-color" },
-        { name: "FAQ Item Text Color", value: faqItemTextColor, setValue: setFaqItemTextColor, cssVariable: "--faq-item-text-color" },
-        { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
-        { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
-        { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
-      ];
-    
-      const timeZoneOptions = [
-        { value: 'GMT', label: 'GMT' },
-        { value: 'EST', label: 'EST' },
-        { value: 'CST', label: 'CST' },
-        { value: 'MST', label: 'MST' },
-        { value: 'PST', label: 'PST' },
-        { value: 'UTC', label: 'UTC' },
-        { value: 'BST', label: 'BST' },
-        { value: 'IST', label: 'IST' },
-        { value: 'CET', label: 'CET' },
-        { value: 'JST', label: 'JST' },
-      ];
-      
-
-    const languageOptions = [
-      { code: 'en', name: 'English' },
-      { code: 'es', name: 'Spanish' },
-      { code: 'fr', name: 'French' },
-      { code: 'de', name: 'German' },
-      { code: 'it', name: 'Italian' },
-      { code: 'pt', name: 'Portuguese' },
-      { code: 'zh', name: 'Chinese' },
-      { code: 'ja', name: 'Japanese' },
-      { code: 'ru', name: 'Russian' },
-      { code: 'ar', name: 'Arabic' },
-    ];
-
-    const currencyOptions = [
-      { code: 'usd', name: 'USD' },
-      { code: 'eur', name: 'EUR' },
-      { code: 'gbp', name: 'GBP' },
-      { code: 'jpy', name: 'JPY' },
-      { code: 'cad', name: 'CAD' },
-      { code: 'aud', name: 'AUD' },
-      { code: 'chf', name: 'CHF' },
-      { code: 'cny', name: 'CNY' },
-      { code: 'inr', name: 'INR' },
-    ];
-    
-    const dateFormatOptions = [
-      { value: 'mm/dd/yyyy', label: 'MM/DD/YYYY' },
-      { value: 'dd/mm/yyyy', label: 'DD/MM/YYYY' },
-      { value: 'yyyy-mm-dd', label: 'YYYY-MM-DD' },
-      { value: 'mm-dd-yyyy', label: 'MM-DD-YYYY' },
-      { value: 'dd-mm-yyyy', label: 'DD-MM-YYYY' },
-    ];
-    
-    const timeFormatOptions = [
-      { value: '12-hour', label: '12 Hour' },
-      { value: '24-hour', label: '24 Hour' },
-    ];
-    
-    const measurementOptions = [
-      { value: 'Metric', label: 'Metric' },
-      { value: 'Imperial', label: 'Imperial' },
-    ];    
-
-    const fontOptions = [
-      { value: "'Poppins', sans-serif", label: 'Poppins' },
-      { value: "'Inconsolata', monospace", label: 'Inconsolata' },
-      { value: "'Merriweather', serif", label: 'Merriweather' },
-      { value: "'Noto Sans', sans-serif", label: 'Noto Sans' },
-      { value: "'Noto Serif', serif", label: 'Noto Serif' },
-      { value: "'Playfair Display', serif", label: 'Playfair Display' },
-      { value: "'Roboto', sans-serif", label: 'Roboto' },
-      { value: "'Ubuntu', sans-serif", label: 'Ubuntu' },
-      { value: "'Bangers', cursive", label: 'Bangers' },
-      { value: "'Caveat', cursive", label: 'Caveat' },
-      { value: "'Frederika the Great', cursive", label: 'Frederika the Great' },
-      { value: "'Rock Salt', cursive", label: 'Rock Salt' },
-      { value: "'Sofadi One', sans-serif", label: 'Sofadi One' },
-      { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
-    ];
-
     const handleLogout = () => {
       setIsLoggedIn(false);
       localStorage.removeItem('accountName');
@@ -378,47 +265,98 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-section">
           <h2>General Settings</h2>
     
-          <DropdownSetting 
-            label="Preferred Language" 
-            value={preferredLanguage} 
-            setValue={setPreferredLanguage} 
-            options={languageOptions.map(lang => ({ value: lang.code, label: lang.name }))} // Convert to Option format
-          />
-
-          <DropdownSetting 
-            label="Preferred Currency" 
-            value={preferredCurrency} 
-            setValue={setPreferredCurrency} 
-            options={currencyOptions.map(currency => ({ value: currency.code, label: currency.name }))} // Convert to Option format
-          />
-
-          <DropdownSetting 
-            label="Date Format" 
-            value={dateFormat} 
-            setValue={setDateFormat} 
-            options={dateFormatOptions} // Already in correct format
-          />
-
-          <DropdownSetting 
-            label="Time Format" 
-            value={timeFormat} 
-            setValue={setTimeFormat} 
-            options={timeFormatOptions} // Already in correct format
-          />
-
-          <DropdownSetting 
-            label="Time Zone" 
-            value={timeZone} 
-            setValue={setTimeZone} 
-            options={timeZoneOptions} // Now in correct format
-          />
-
-          <DropdownSetting 
-            label="Preferred Measurement" 
-            value={preferredMeasurement} 
-            setValue={setPreferredMeasurement} 
-            options={measurementOptions} // Already in correct format
-          />
+          <div className="settings-option">
+            <label>Preferred Language</label>
+            <select
+              value={preferredLanguage}
+              onChange={(e) => setPreferredLanguage(e.target.value)}
+            >
+              <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="ru">Russian</option>
+              <option value="ar">Arabic</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Preferred Currency</label>
+            <select
+              value={preferredCurrency}
+              onChange={(e) => setPreferredCurrency(e.target.value)}
+            >
+              <option value="usd">USD</option>
+              <option value="eur">EUR</option>
+              <option value="gbp">GBP</option>
+              <option value="jpy">JPY</option>
+              <option value="cad">CAD</option>
+              <option value="aud">AUD</option>
+              <option value="chf">CHF</option>
+              <option value="cny">CNY</option>
+              <option value="inr">INR</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Date Format</label>
+            <select
+              value={dateFormat}
+              onChange={(e) => setDateFormat(e.target.value)}
+            >
+              <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>
+              <option value="mm-dd-yyyy">MM-DD-YYYY</option>
+              <option value="dd-mm-yyyy">DD-MM-YYYY</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Time Format</label>
+            <select
+              value={timeFormat}
+              onChange={(e) => setTimeFormat(e.target.value)}
+            >
+              <option value="12-hour">12 Hour</option>
+              <option value="24-hour">24 Hour</option>
+            </select>
+          </div>
+    
+          <div className="settings-option">
+            <label>Time Zone</label>
+            <select
+              value={timeZone}
+              onChange={(e) => setTimeZone(e.target.value)}
+            >
+              <option value="GMT">GMT</option>
+              <option value="EST">EST</option>
+              <option value="CST">CST</option>
+              <option value="MST">MST</option>
+              <option value="PST">PST</option>
+              <option value="UTC">UTC</option>
+              <option value="BST">BST</option>
+              <option value="IST">IST</option>
+              <option value="CET">CET</option>
+              <option value="JST">JST</option>
+            </select>
+          </div>
+    
+          {/* New Preferred Measurement Option */}
+          <div className="settings-option">
+            <label>Preferred Measurement</label>
+            <select
+              value={preferredMeasurement}
+              onChange={(e) => setPreferredMeasurement(e.target.value)}
+            >
+              <option value="Metric">Metric</option>
+              <option value="Imperial">Imperial</option>
+            </select>
+          </div>
         </div>
       );
 
@@ -426,23 +364,63 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
+            {/* AI Mode Radio Options */}
+            <div className="settings-option">
+              <p>Disable Options:</p>
+                <div className="slider">
+                  {/* Offline */}
+                  <div
+                    className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
+                  >
+                    Offline tools{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
 
-            <PrivacySettings
-              selectedOption={selectedOption}
-              handleRadioChange={handleRadioChange}
-              openSourceMode={openSourceMode}
-            /> 
+                  {/* Online */}
+                  <div
+                    className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('Online')}
+                  >
+                    Online tools{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
 
-            <CheckboxSetting
-              label="Disable Chat History"
-              checked={disableChatHistory}
-              setChecked={setDisableChatHistory}
-            />
-            <CheckboxSetting
-              label="Disable AI Memory"
-              checked={disableAIMemory}
-              setChecked={setDisableAIMemory}
-            />
+                  {/* None */}
+                  <div
+                    className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
+                    onClick={() => handleRadioChange('None')}
+                  >
+                    None{openSourceMode ? ' (FOSS)' : ''}
+                  </div>
+                </div>        
+                    <br />
+                    <p>
+                      After changing the preferred settings, please reload the website so it can update itself properly.
+                    </p>
+                </div>    
+
+            {/* Disable Chat History Checkbox */}
+            <div className="settings-option">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={disableChatHistory}
+                  onChange={() => setDisableChatHistory(!disableChatHistory)}
+                />
+                Disable Chat History
+              </label>
+            </div>
+
+            {/* Disable AI Memory Checkbox */}
+            <div className="settings-option">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={disableAIMemory}
+                  onChange={() => setDisableAIMemory(!disableAIMemory)}
+                />
+                Disable AI Memory
+              </label>
+            </div>
           </div>
         );
 
@@ -452,38 +430,234 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <div className="settings-section">
                 <h2>Theme Settings</h2>
           
-                <ThemeDropdown 
-                  selectedTheme={selectedTheme} 
-                  setSelectedTheme={setSelectedTheme} 
-                />
-                
+                {/* Dropdown to select theme */}
+                <div className="settings-option">
+                  <p>Select Theme</p>
+                  <select
+                    value={selectedTheme}
+                    onChange={(e) => {
+                      const theme = e.target.value;
+                      if (theme !== "default") {
+                        setSelectedTheme(theme);
+                        localStorage.setItem("selectedTheme", theme);
+          
+                        // Apply the appropriate theme based on selection
+                        applyTheme(theme);
+                      }
+                    }}
+                  >
+                    <option value="default">Select your style...</option>
+                    <option value="IOMARKET">IOMARKET</option>
+                    <option value="WHITE">WHITE</option>
+                    <option value="BLACK">BLACK</option>
+                    <option value="CUSTOM">CUSTOM</option>
+                  </select>
+                </div>
+                {/* Conditionally render theme settings only if "CUSTOM" is selected */}
                 {selectedTheme === 'CUSTOM' && (
                   <>
                     {/* Font Size */}
-                    <FontSizeSetting 
-                      fontSize={fontSize} 
-                      setFontSize={setFontSize} 
-                    />
-
-                    {colorSettings.map((setting) => (
-                      <ColorSetting
-                        key={setting.cssVariable}
-                        name={setting.name}
-                        value={setting.value}
-                        setValue={setting.setValue}
-                        cssVariable={setting.cssVariable}
+                    <div className="settings-option">
+                      <p>Font Size</p>
+                      <input
+                        type="range"
+                        min="12"
+                        max="30"
+                        value={parseInt(fontSize, 10)} // Ensure value is a number
+                        onChange={(e) => {
+                          const newSize = `${e.target.value}px`;
+                          setFontSize(newSize);
+                          document.documentElement.style.setProperty('--font-size', newSize);
+                        }}
                       />
-                    ))}
+                      <span>{fontSize}</span>
+                    </div>
 
-                    <DropdownSetting 
-                      label="Font Family" 
-                      value={fontFamily} 
-                      setValue={(newFont) => {
-                        setFontFamily(newFont);
-                        document.documentElement.style.setProperty('--font-family', newFont);
-                      }} 
-                      options={fontOptions} 
+                    <ColorSetting
+                      name="Background Color"
+                      value={backgroundColor}
+                      setValue={setBackgroundColor}
+                      cssVariable="--background-color"
                     />
+                    <ColorSetting
+                      name="Text Color"
+                      value={textColor}
+                      setValue={setTextColor}
+                      cssVariable="--text-color"
+                    />
+                    <ColorSetting
+                      name="Input Background Color"
+                      value={inputBackgroundColor}
+                      setValue={setInputBackgroundColor}
+                      cssVariable="--input-background-color"
+                    />
+                    <ColorSetting
+                      name="Input Button Color"
+                      value={inputButtonColor}
+                      setValue={setInputButtonColor}
+                      cssVariable="--input-button-color"
+                    />
+                    <ColorSetting
+                      name="Input Button Hover Color"
+                      value={inputButtonHoverColor}
+                      setValue={setInputButtonHoverColor}
+                      cssVariable="--input-button-hover-color"
+                    />
+                    <ColorSetting
+                      name="User Message Background Color"
+                      value={userMessageBackgroundColor}
+                      setValue={setUserMessageBackgroundColor}
+                      cssVariable="--user-message-background-color"
+                    />
+                    <ColorSetting
+                      name="User Message Text Color"
+                      value={userMessageTextColor}
+                      setValue={setUserMessageTextColor}
+                      cssVariable="--user-message-text-color"
+                    />
+                    <ColorSetting
+                      name="AI Message Background Color"
+                      value={aiMessageBackgroundColor}
+                      setValue={setAiMessageBackgroundColor}
+                      cssVariable="--ai-message-background-color"
+                    />
+                    <ColorSetting
+                      name="AI Message Text Color"
+                      value={aiMessageTextColor}
+                      setValue={setAiMessageTextColor}
+                      cssVariable="--ai-message-text-color"
+                    />
+                    <ColorSetting
+                      name="Button Background Color"
+                      value={buttonBackgroundColor}
+                      setValue={setButtonBackgroundColor}
+                      cssVariable="--button-background-color"
+                    />
+                    <ColorSetting
+                      name="Button Hover Background Color"
+                      value={buttonHoverBackgroundColor}
+                      setValue={setButtonHoverBackgroundColor}
+                      cssVariable="--button-hover-background-color"
+                    />
+                    <ColorSetting
+                      name="Models Background Color"
+                      value={modelsBackgroundColor}
+                      setValue={setModelsBackgroundColor}
+                      cssVariable="--models-background-color"
+                    />
+                    <ColorSetting
+                      name="History Background Color"
+                      value={historyBackgroundColor}
+                      setValue={setHistoryBackgroundColor}
+                      cssVariable="--history-background-color"
+                    />
+                    <ColorSetting
+                      name="Left Panel Background Color"
+                      value={leftPanelBackgroundColor}
+                      setValue={setLeftPanelBackgroundColor}
+                      cssVariable="--left-panel-background-color"
+                    />
+                    <ColorSetting
+                      name="Conversation Background Color"
+                      value={conversationBackgroundColor}
+                      setValue={setConversationBackgroundColor}
+                      cssVariable="--conversation-background-color"
+                    />
+                    <ColorSetting
+                      name="Pop-up Text Color"
+                      value={popUpTextColor}
+                      setValue={setPopUpTextColor}
+                      cssVariable="--pop-up-text"
+                    />
+                    <ColorSetting
+                      name="Input Border Color"
+                      value={inputBorderColor}
+                      setValue={setInputBorderColor}
+                      cssVariable="--input-border-color"
+                    />
+                    
+                    <ColorSetting
+                      name="FAQ Background Color"
+                      value={faqBackgroundColor}
+                      setValue={setFaqBackgroundColor}
+                      cssVariable="--faq-background-color"
+                    />
+
+                    <ColorSetting
+                      name="FAQ Heading Color"
+                      value={faqHeadingColor}
+                      setValue={setFaqHeadingColor}
+                      cssVariable="--faq-heading-color"
+                    />
+
+                    <ColorSetting
+                      name="FAQ Item Background Color"
+                      value={faqItemBackgroundColor}
+                      setValue={setFaqItemBackgroundColor}
+                      cssVariable="--faq-item-background-color"
+                    />
+
+                    <ColorSetting
+                      name="FAQ Item Heading Color"
+                      value={faqItemHeadingColor}
+                      setValue={setFaqItemHeadingColor}
+                      cssVariable="--faq-item-heading-color"
+                    />
+
+                    <ColorSetting
+                      name="FAQ Item Text Color"
+                      value={faqItemTextColor}
+                      setValue={setFaqItemTextColor}
+                      cssVariable="--faq-item-text-color"
+                    />
+
+                    <ColorSetting
+                      name="FAQ Item Hover Background Color"
+                      value={faqItemHoverBackgroundColor}
+                      setValue={setFaqItemHoverBackgroundColor}
+                      cssVariable="--faq-item-hover-background-color"
+                    />
+
+                    <ColorSetting
+                      name="Popup Background Color"
+                      value={popupBackgroundColor}
+                      setValue={setPopupBackgroundColor}
+                      cssVariable="--popup-background-color"
+                    />
+
+                    <ColorSetting
+                      name="Overlay Text Color"
+                      value={overlayTextColor}
+                      setValue={setOverlayTextColor}
+                      cssVariable="--overlay-text-color"
+                    />
+
+                    <div className="settings-option">
+                      <p>Font Family</p>
+                      <select
+                        value={fontFamily}
+                        onChange={(e) => {
+                          const newFont = e.target.value;
+                          setFontFamily(newFont);
+                          document.documentElement.style.setProperty('--font-family', newFont);
+                        }}
+                      >
+                        <option value="'Poppins', sans-serif">Poppins</option>
+                        <option value="'Inconsolata', monospace">Inconsolata</option>
+                        <option value="'Merriweather', serif">Merriweather</option>
+                        <option value="'Noto Sans', sans-serif">Noto Sans</option>
+                        <option value="'Noto Serif', serif">Noto Serif</option>
+                        <option value="'Playfair Display', serif">Playfair Display</option>
+                        <option value="'Roboto', sans-serif">Roboto</option>
+                        <option value="'Ubuntu', sans-serif">Ubuntu</option>
+                        <option value="'Bangers', cursive">Bangers</option>
+                        <option value="'Caveat', cursive">Caveat</option>
+                        <option value="'Frederika the Great', cursive">Frederika the Great</option>
+                        <option value="'Rock Salt', cursive">Rock Salt</option>
+                        <option value="'Sofadi One', sans-serif">Sofadi One</option>
+                        <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
+                      </select>
+                    </div>
                   </>
                 )}
             </div>
@@ -494,11 +668,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             return (
               <div className="settings-section">
                 <h2>Open Source Settings</h2>
-                <OpenSourceModeToggle 
-                  openSourceMode={openSourceMode} 
-                  setOpenSourceMode={setOpenSourceMode} 
-                  setSelectedOption={setSelectedOption} 
-                />
+                <div className="settings-option">
+                  <label>
+                    <input
+                      type="checkbox"
+                      checked={openSourceMode}
+                      onChange={() => {
+                        const newValue = !openSourceMode;
+                        setOpenSourceMode(newValue);
+                        // Update radio selection based on the new openSourceMode value
+                        if (newValue) {
+                          setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
+                        } else {
+                          setSelectedOption('None'); // Or any other default value when disabling
+                        }
+                      }}
+                    />
+                    Enable Open Source Mode
+                  </label>
+                </div>
               </div>
             );
           
@@ -507,75 +695,100 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           return (
             <div className="settings-section">
             <h2>Account Settings</h2>
-              <TextSettings
-                label="New Name" 
-                value={newName} 
-                type='text'
-                setValue={setNewName} 
-              />
-              <TextSettings
-                label="New Email"
-                value={newEmail}
-                setValue={setNewEmail}
-                type="email" // Input type is email
-              />
-              <TextSettings
-                label="New Password"
-                value={newPassword}
-                setValue={setNewPassword}
-                type="password" // Input type is password
-              />
-              <TextSettings
-                label="Current Password"
-                value={currentPassword}
-                setValue={setCurrentPassword}
-                type="password" // Input type is password
-              />
-              <ButtonSetting
-                label="Log Out" // Button label
-                onClick={handleLogout} // Function to call on click
-                className="update-credentials-button" // Custom styling class
-              />
-              <ButtonSetting
-                label="Update Credentials" // Button label
-                onClick={handleUpdateCredentials} // Function to call on click
-                className="update-credentials-button" // Custom styling class
-              />
-              <ButtonSetting
-                label="Delete Account" // Button label
-                onClick={handleDeleteAccount} // Function to call on click
-                className="delete-account-button" // Custom styling class
+            <div className="settings-option">
+              <label>New Name</label>
+              <input
+                type="text"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
               />
             </div>
+            <div className="settings-option">
+              <label>New Email</label>
+              <input
+                type="email"
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+              />
+            </div>
+            <div className="settings-option">
+              <label>New Password</label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+              />
+            </div>
+            <div className="settings-option">
+              <label>Current Password</label>
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+              />
+            </div>
+            <div className="settings-option">
+              <button
+                onClick={handleLogout} // Update all credentials
+                className="update-credentials-button"
+              >
+                Log Out
+              </button>
+            </div>
+            <div className="settings-option">
+              <button
+                onClick={handleUpdateCredentials} // Update all credentials
+                className="update-credentials-button"
+              >
+                Update Credentials
+              </button>
+            </div>
+            <div className="settings-option">
+              <button
+                onClick={handleDeleteAccount} // Delete account
+                className="delete-account-button"
+              >
+                Delete Account
+              </button>
+            </div>
+          </div>
         );
 
         case 'api':
           return (
             <div className="settings-section">
-                <TextSettings
-                  label="La Plateforme" // Label for the input
-                  value={mistral} // State variable for the input
-                  setValue={setMistral} // State updater function
-                  type="text" // Input type
+              <div className="settings-option">
+                <label>La Plateforme</label>
+                <input
+                  type="text"
+                  value={mistral}
+                  onChange={(e) => setmistral(e.target.value)}
                 />
-                <TextSettings
-                  label="OpenAI" // Label for the input
-                  value={openai} // State variable for the input
-                  setValue={setOpenai} // State updater function
-                  type="text" // Input type
+              </div>
+              <div className="settings-option">
+                <label>OpenAI</label>
+                <input
+                  type="text"
+                  value={openai}
+                  onChange={(e) => setopenai(e.target.value)}
                 />
-                <TextSettings
-                  label="Anthropic" // Label for the input
-                  value={anthropic} // State variable for the input
-                  setValue={setAnthropic} // State updater function
-                  type="text" // Input type
+              </div>
+              <div className="settings-option">
+                <label>Anthropic</label>
+                <input
+                  type="text"
+                  value={anthropic}
+                  onChange={(e) => setAnthropic(e.target.value)}
                 />
-                <TextSettings
-                  label="Google" // Label for the input
-                  value={google} // State variable for the input
-                  setValue={setGoogle} // State updater function
-                  type="text" // Input type
+              </div>
+              <div className="settings-option">
+                <label>Google</label>
+                <input
+                  type="text"
+                  value={google}
+                  onChange={(e) => setGoogle(e.target.value)}
                 />
+              </div>
             </div>
           );
 
@@ -591,7 +804,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <h3>Import the settings</h3>  
                 <input type="file" onChange={handleImport} accept=".json" className='import-file'/>
               </div>
-            </div>
+              </div>
           );
 
       default:
@@ -607,6 +820,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }
   };
 
+  // Gather all settings into an object
+  // Gather current settings into an object
   const currentSettings = {
     ...settings.userPreferences,
     ...settings.theme,
diff --git a/app/components/settings/TextSettings.tsx b/app/components/settings/TextSettings.tsx
deleted file mode 100644
index ef8aafc..0000000
--- a/app/components/settings/TextSettings.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-interface TextSettingProps {
-  label: string; // The label to display
-  value: string; // The current text value
-  setValue: (newText: string) => void; // The method to update the state
-  type: 'text' | 'email' | 'password'; // The type of input field
-}
-
-const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
-  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newText = e.target.value; // Get the new value from the input
-    setValue(newText); // Update the state in the parent component
-  };
-
-  return (
-    <div className="settings-option">
-      <label>{label}</label>
-      <input
-        type={type} // Use the type prop for the input
-        value={value} // Set the current value
-        onChange={handleTextChange} // Handle input changes
-      />
-    </div>
-  );
-};
-
-export default TextSetting;