diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 7647753..f151777 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,37 +1,23 @@
 import React, { useState, useEffect } from 'react';
 
-// Define the available model options
-const offlineModels = [
-  'Offline Fast',
-  'Offline Fast (FOSS)',
-  'Offline Slow',
-  'Offline Slow (FOSS)',
-];
+const Models: React.FC = () => {
+  const modelOptions = [
+    'Offline Fast',
+    'Offline Fast (FOSS)',
+    'Offline Slow',
+    'Offline Slow (FOSS)',
+    'Online (La Plateforme)',
+    'Online (FOSS) (La Plateforme)',
+    'Online Cheap (OpenAI)',
+    'Online Expensive (OpenAI)',
+    'Online Cheap (Anthropic)',
+    'Online Expensive (Anthropic)',
+    'Online Cheap (Google)',
+    'Online Expensive (Google)',
+  ];
 
-const onlineModels = [
-  'Online (La Plateforme)',
-  'Online (FOSS) (La Plateforme)',
-  'Online Cheap (OpenAI)',
-  'Online Expensive (OpenAI)',
-  'Online Cheap (Anthropic)',
-  'Online Expensive (Anthropic)',
-  'Online Cheap (Google)',
-  'Online Expensive (Google)',
-];
-
-const fossModels = [
-  'Offline Fast (FOSS)',
-  'Offline Slow (FOSS)',
-  'Online (FOSS) (La Plateforme)',
-];
-
-// Define the properties passed to the Models component
-interface ModelsProps {
-  selectedOption: string;  // Privacy setting: "Offline", "AI Online", "None"
-}
-
-const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
   const [selectedModel, setSelectedModel] = useState<string>(() => {
+    // Load the selected model from localStorage on initial render
     return localStorage.getItem('selectedModel') || 'Offline Fast';
   });
 
@@ -40,45 +26,31 @@ const Models: React.FC<ModelsProps> = ({ selectedOption }) => {
     setSelectedModel(newModel);
   };
 
-  const isOfflineModel = (model: string) => offlineModels.includes(model);
-  const isOnlineModel = (model: string) => onlineModels.includes(model);
-  const isFossModel = (model: string) => fossModels.includes(model);
+  const isOfflineModel = (model: string) => {
+    return model.includes('Offline');
+  };
 
+  // Save selected model to localStorage whenever it changes
   useEffect(() => {
     localStorage.setItem('selectedModel', selectedModel);
   }, [selectedModel]);
 
-  const filteredModels = (() => {
-    switch (selectedOption) {
-      case 'Offline':
-        return offlineModels; // Show only offline models
-      case 'AI Online':
-        return onlineModels; // Show only online models
-      default:
-        return [...offlineModels, ...onlineModels]; // Show all models
-    }
-  })();
-
   return (
     <div className="model-background">
       <div className="models">
-        <div className="title">
-          <h3>Different AI models</h3>
+        <div className="titel">
+          <h1>Different AI models</h1>
         </div>
-
-        {/* Model Selection Dropdown */}
         <div className="model-dropdown">
           <label htmlFor="model-select">Select AI Model:</label>
           <select id="model-select" value={selectedModel} onChange={handleModelChange}>
-            {filteredModels.map((model) => (
+            {modelOptions.map((model) => (
               <option key={model} value={model}>
                 {model}
               </option>
             ))}
           </select>
         </div>
-
-        {/* Model Grid with Cards */}
         <div className="grid">
           <button className="code-model model-box">
             <div className="overlay">
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 631a19e..84582fc 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -6,17 +6,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
     const getItemFromLocalStorage = (key: string) => {
       const item = localStorage.getItem(key);
-      
-      if (item) {
-        try {
-          return JSON.parse(item); // Attempt to parse the item
-        } catch (e) {
-          console.error(`Error parsing JSON for key "${key}":`, e);
-          return false; // Return false if parsing fails
-        }
-      }
-      
-      return false; // Default to false if item is null or empty
+      return item ? JSON.parse(item) : false; // Default to false if item is null
     };
 
     // Active section
@@ -24,29 +14,30 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
     // Language setting
     const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
-
+  
     // Currency setting
     const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
-
+  
     // Date and time format settings
     const [dateFormat, setDateFormat] = useState(() => localStorage.getItem('dateFormat') || 'mm/dd/yyyy');
     const [timeFormat, setTimeFormat] = useState(() => localStorage.getItem('timeFormat') || '12-hour');
     const [timeZone, setTimeZone] = useState(() => localStorage.getItem('timeZone') || 'GMT');
-
+  
     // Online AI and chat history settings
-    const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
+    // State declarations
+    const [disableOnlineAI, setDisableOnlineAI] = useState(() => getItemFromLocalStorage('disableOnlineAI'));
     const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
     const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
     const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
-
+    
     // User credentials
     const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
     const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
     const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
-
+  
     // Measurement setting
     const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
-
+  
     // Theme settings
     const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
     const [textColor, setTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
@@ -67,124 +58,174 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
-    const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
-
+    const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim());
+  
     // Theme selection
     const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
-
+  
     // API Keys
     const [laPlateforme, setLaPlateforme] = 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());
 
-
     // Effect hooks to update localStorage whenever any state changes
     useEffect(() => {
-      const settings = {
-          activeSection,
-          preferredLanguage,
-          preferredCurrency,
-          dateFormat,
-          timeFormat,
-          timeZone,
-          selectedOption,
-          disableChatHistory,
-          disableAIMemory,
-          openSourceMode,
-          newName,
-          newEmail,
-          newPassword,
-          preferredMeasurement,
-          backgroundColor,
-          textColor,
-          inputBackgroundColor,
-          inputButtonColor,
-          inputButtonHoverColor,
-          userMessageBackgroundColor,
-          userMessageTextColor,
-          aiMessageBackgroundColor,
-          aiMessageTextColor,
-          buttonBackgroundColor,
-          buttonHoverBackgroundColor,
-          modelsBackgroundColor,
-          historyBackgroundColor,
-          leftPanelBackgroundColor,
-          conversationBackgroundColor,
-          popUpTextColor,
-          inputBorderColor,
-          fontFamily,
-          fontSize,
-          burgerMenu,
-          selectedTheme,
-          laPlateforme,
-          openAI,
-          anthropic,
-          google,
-      };
-
-      // Update local storage
-      for (const [key, value] of Object.entries(settings)) {
-          if (typeof value === 'boolean') {
-              localStorage.setItem(key, JSON.stringify(value));
-          } else {
-              localStorage.setItem(key, value);
-          }
-      }
-  }, [
-      activeSection,
-      preferredLanguage,
-      preferredCurrency,
-      dateFormat,
-      timeFormat,
-      timeZone,
-      selectedOption,
-      disableChatHistory,
-      disableAIMemory,
-      openSourceMode,
-      newName,
-      newEmail,
-      newPassword,
-      preferredMeasurement,
-      backgroundColor,
-      textColor,
-      inputBackgroundColor,
-      inputButtonColor,
-      inputButtonHoverColor,
-      userMessageBackgroundColor,
-      userMessageTextColor,
-      aiMessageBackgroundColor,
-      aiMessageTextColor,
-      buttonBackgroundColor,
-      buttonHoverBackgroundColor,
-      modelsBackgroundColor,
-      historyBackgroundColor,
-      leftPanelBackgroundColor,
-      conversationBackgroundColor,
-      popUpTextColor,
-      inputBorderColor,
-      fontFamily,
-      fontSize,
-      burgerMenu,
-      selectedTheme,
-      laPlateforme,
-      openAI,
-      anthropic,
-      google,
-  ]);
-
-  useEffect(() => {
-    const savedOption = localStorage.getItem('radioSelection');
-    if (savedOption) {
-      setSelectedOption(savedOption); // Set saved selection
-    }
-  }, []);
-
-  const handleRadioChange = (newValue: string) => {
-    setSelectedOption(newValue);  // Update the state with the selected option
-    localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
-  };
+      localStorage.setItem('activeSection', activeSection);
+    }, [activeSection]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredLanguage', preferredLanguage);
+    }, [preferredLanguage]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredCurrency', preferredCurrency);
+    }, [preferredCurrency]);
+  
+    useEffect(() => {
+      localStorage.setItem('dateFormat', dateFormat);
+    }, [dateFormat]);
+  
+    useEffect(() => {
+      localStorage.setItem('timeFormat', timeFormat);
+    }, [timeFormat]);
+  
+    useEffect(() => {
+      localStorage.setItem('timeZone', timeZone);
+    }, [timeZone]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableOnlineAI', JSON.stringify(disableOnlineAI));
+    }, [disableOnlineAI]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableChatHistory', JSON.stringify(disableChatHistory));
+    }, [disableChatHistory]);
+  
+    useEffect(() => {
+      localStorage.setItem('disableAIMemory', JSON.stringify(disableAIMemory));
+    }, [disableAIMemory]);
+  
+    useEffect(() => {
+      localStorage.setItem('openSourceMode', JSON.stringify(openSourceMode));
+    }, [openSourceMode]);
+  
+    useEffect(() => {
+      localStorage.setItem('newName', newName);
+    }, [newName]);
+  
+    useEffect(() => {
+      localStorage.setItem('newEmail', newEmail);
+    }, [newEmail]);
+  
+    useEffect(() => {
+      localStorage.setItem('newPassword', newPassword);
+    }, [newPassword]);
+  
+    useEffect(() => {
+      localStorage.setItem('preferredMeasurement', preferredMeasurement);
+    }, [preferredMeasurement]);
+  
+    useEffect(() => {
+      localStorage.setItem('backgroundColor', backgroundColor);
+    }, [backgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('textColor', textColor);
+    }, [textColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputBackgroundColor', inputBackgroundColor);
+    }, [inputBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputButtonColor', inputButtonColor);
+    }, [inputButtonColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputButtonHoverColor', inputButtonHoverColor);
+    }, [inputButtonHoverColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('userMessageBackgroundColor', userMessageBackgroundColor);
+    }, [userMessageBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('userMessageTextColor', userMessageTextColor);
+    }, [userMessageTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('aiMessageBackgroundColor', aiMessageBackgroundColor);
+    }, [aiMessageBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('aiMessageTextColor', aiMessageTextColor);
+    }, [aiMessageTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('buttonBackgroundColor', buttonBackgroundColor);
+    }, [buttonBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('buttonHoverBackgroundColor', buttonHoverBackgroundColor);
+    }, [buttonHoverBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('modelsBackgroundColor', modelsBackgroundColor);
+    }, [modelsBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('historyBackgroundColor', historyBackgroundColor);
+    }, [historyBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('leftPanelBackgroundColor', leftPanelBackgroundColor);
+    }, [leftPanelBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('conversationBackgroundColor', conversationBackgroundColor);
+    }, [conversationBackgroundColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('popUpTextColor', popUpTextColor);
+    }, [popUpTextColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('inputBorderColor', inputBorderColor);
+    }, [inputBorderColor]);
+  
+    useEffect(() => {
+      localStorage.setItem('fontFamily', fontFamily);
+    }, [fontFamily]);
+  
+    useEffect(() => {
+      localStorage.setItem('fontSize', fontSize);
+    }, [fontSize]);
 
+    useEffect(() => {
+      localStorage.setItem('burgerMenu', burgerMenu);
+    }, [fontSize]);
+  
+    useEffect(() => {
+      localStorage.setItem('selectedTheme', selectedTheme);
+    }, [selectedTheme]);
+  
+    useEffect(() => {
+      localStorage.setItem('laPlateforme', laPlateforme);
+    }, [laPlateforme]);
+  
+    useEffect(() => {
+      localStorage.setItem('openAI', openAI);
+    }, [openAI]);
+  
+    useEffect(() => {
+      localStorage.setItem('anthropic', anthropic);
+    }, [anthropic]);
+  
+    useEffect(() => {
+      localStorage.setItem('google', google);
+    }, [google]);
+  
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
     if (settings.backgroundColor) {
@@ -398,33 +439,16 @@ 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">
-                <div
-                  className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
-                  onClick={() => handleRadioChange('Offline')} // Handle selection
-                >
-                  Offline tools
-                </div>
-                <div
-                  className={`slider-option ${selectedOption === 'AI Online' ? 'active' : ''}`}
-                  onClick={() => handleRadioChange('AI Online')}
-                >
-                  Online tools
-                </div>
-                <div
-                  className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
-                  onClick={() => handleRadioChange('None')}
-                >
-                  None
-                </div>
-              </div>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={disableOnlineAI}
+                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
+                />
+                Disable Online AI
+              </label>
             </div>
-
-            {/* Disable Chat History Checkbox */}
             <div className="settings-option">
               <label>
                 <input
@@ -435,8 +459,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 Disable Chat History
               </label>
             </div>
-
-            {/* Disable AI Memory Checkbox */}
             <div className="settings-option">
               <label>
                 <input
@@ -919,7 +941,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     dateFormat,
     timeFormat,
     timeZone,
-    selectedOption,
+    disableOnlineAI,
     disableChatHistory,
     disableAIMemory,
     openSourceMode,
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index b840248..a2224a4 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -159,29 +159,4 @@
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
-}
-
-.slider {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 10px;
-}
-  
-.slider-option {
-    cursor: pointer;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    transition: background-color 0.3s;
-}
-  
-.slider-option.active {
-    background-color: #007bff; /* Change to your active color */
-    color: white;
-    border-color: #007bff;
-}
-  
-input[type="radio"] {
-    display: none; /* Hide the default radio buttons */
-  }
-  
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/styles/header.css b/app/styles/header.css
index 4e5c2f0..b830147 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,7 +1,7 @@
 header{
     position: absolute;
     padding: 0 20px;
-    top: 0;
+    top: 2em;
     left: 0;
     width: 100%;
     height: 5em;
diff --git a/public/img/default.jpg b/public/img/default.jpg
index 527d4fe..266213d 100644
Binary files a/public/img/default.jpg and b/public/img/default.jpg differ
diff --git a/public/img/financial.jpg b/public/img/financial.jpg
index 56520f2..f6513d7 100644
Binary files a/public/img/financial.jpg and b/public/img/financial.jpg differ
diff --git a/public/img/image.jpg b/public/img/image.jpg
index 34849a4..6cbc53d 100644
Binary files a/public/img/image.jpg and b/public/img/image.jpg differ
diff --git a/public/img/language.jpg b/public/img/language.jpg
index 6b8ab96..5ab31b9 100644
Binary files a/public/img/language.jpg and b/public/img/language.jpg differ
diff --git a/public/img/math.jpg b/public/img/math.jpg
index 698a439..a417968 100644
Binary files a/public/img/math.jpg and b/public/img/math.jpg differ
diff --git a/public/img/time.jpg b/public/img/time.jpg
index 8472916..6db57ad 100644
Binary files a/public/img/time.jpg and b/public/img/time.jpg differ
diff --git a/public/img/weather.jpg b/public/img/weather.jpg
index d3f4898..c921471 100644
Binary files a/public/img/weather.jpg and b/public/img/weather.jpg differ