diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 472415c..e3e626b 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -1,224 +1,51 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
+  const [activeSection, setActiveSection] = useState('general');
+  const [preferredLanguage, setPreferredLanguage] = useState('en');
+  const [preferredCurrency, setPreferredCurrency] = useState('usd');
+  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
+  const [timeFormat, setTimeFormat] = useState('12-hour');
+  const [timeZone, setTimeZone] = useState('GMT');
+  const [disableOnlineAI, setDisableOnlineAI] = useState(false);
+  const [disableChatHistory, setDisableChatHistory] = useState(false);
+  const [disableAIMemory, setDisableAIMemory] = useState(false);
+  const [openSourceMode, setOpenSourceMode] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [preferredMessurement, setPreferredMessurement] = useState('Metric');
 
-    const getItemFromLocalStorage = (key: string) => {
-      const item = localStorage.getItem(key);
-      return item ? JSON.parse(item) : false; // Default to false if item is null
-    };
+  // 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());
 
-    // Active section
-    const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
+  // Theme selection
+  const [selectedTheme, setSelectedTheme] = useState<string>('default');
 
-    // 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
-    // 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());
-    const [inputBackgroundColor, setInputBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
-    const [inputButtonColor, setInputButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
-    const [inputButtonHoverColor, setInputButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
-    const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
-    const [userMessageTextColor, setUserMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
-    const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
-    const [aiMessageTextColor, setAiMessageTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
-    const [buttonBackgroundColor, setButtonBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
-    const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
-    const [modelsBackgroundColor, setModelsBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
-    const [historyBackgroundColor, setHistoryBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
-    const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
-    const [conversationBackgroundColor, setConversationBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
-    const [popUpTextColor, setPopUpTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
-    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());
-  
-    // 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(() => {
-      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('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]);
+  // API Keys
+  const [laPlateforme, setLaPlateforme] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
+  const [openAI, setOpenAI] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-openai').trim());
+  const [anthropic, setAnthropic] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-anthropic').trim());
+  const [google, setGoogle] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--online-cheap-google').trim());
   
   // Apply imported settings to the CSS variables
   const applySettings = (settings: any) => {
@@ -414,8 +241,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-option">
             <label>Preferred Measurement</label>
             <select
-              value={preferredMeasurement}
-              onChange={(e) => setPreferredMeasurement(e.target.value)}
+              value={preferredMessurement}
+              onChange={(e) => setPreferredMessurement(e.target.value)}
             >
               <option value="Metric">Metric</option>
               <option value="Imperial">Imperial</option>
@@ -983,7 +810,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     fontSize,
     preferredLanguage,
     preferredCurrency,
-    preferredMeasurement, 
+    preferredMessurement, 
     dateFormat,
     timeFormat,
     timeZone,