diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index bb346e5..d419d9b 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -23,7 +23,7 @@ const InputOutputBackend: React.FC = () => {
   const [timeZone, setTimeZone] = useState<string>("GMT");
   const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
   const [messages, setMessages] = useState<Message[]>([]);
-  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true');
+  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true') || false;
 
   // Fetch local storage values and update state on component mount
   useEffect(() => {
@@ -50,7 +50,6 @@ const InputOutputBackend: React.FC = () => {
       You are only able to change language if the user specifically states you must. 
       Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.`
       : "You are a helpful assistant";
-
     setMessages([
       { role: "system", content: systemMessage },
       { role: "assistant", content: "Hello! How may I help you?" },
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 8f6eec2..2f149f3 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -652,71 +652,87 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       case 'im/export':
         return (
           <div className="settings-section">
-            <h2>Import & Export</h2>
-            <div className="settings-option">
-              <h3>Export the settings</h3>
-              <button onClick={() => exportSettings(currentSettings)} className='export-button'>Export Settings</button>
-            </div>
-            <div className="settings-option">
-              <h3>Import the settings</h3>
-              <input type="file" onChange={handleImport} accept=".json" className='import-file' />
-            </div>
+          <h2>Import & Export</h2>
+          <div className="settings-option">
+            <h3>Export the settings</h3>
+            <button onClick={handleExport} className="export-button">
+              Export Settings
+            </button>
           </div>
-        );
-
+          <div className="settings-option">
+            <h3>Import the settings</h3>
+            <input
+              type="file"
+              onChange={handleImport}
+              accept=".json"
+              className="import-file"
+            />
+          </div>
+        </div>
+      );
       default:
         return null;
     }
   };
 
-  // Handle file import
   const handleImport = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (event.target.files && event.target.files.length > 0) {
-      const file = event.target.files[0];
-      importSettings(file, applyCustomTheme);
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const fileContent = e.target?.result as string;
+        importSettings(fileContent); // Call the importSettings function with the file content
+      };
+      reader.readAsText(file);
     }
   };
 
-  const currentSettings = {
-    ...settings.userPreferences,
-    ...settings.theme,
-    ...settings.theme.faqSettings,
-    ...settings.theme.popupSettings,
-    ...settings.apiKeys,
-    ...settings.generalSettings,
+  const handleExport = () => {
+    const settingsData = exportSettings();
+
+    // Create a blob and download the exported settings
+    const blob = new Blob([settingsData], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'settings.json';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url); // Clean up the URL object
   };
 
   return (
-    <div className="popup-overlay">
-      <div className="settings-content">
-        <div className="settings-container">
-          <div className="sidebar">
-            <ul>
-              <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>
-              <li onClick={() => setActiveSection('api')}>API Keys</li>
-              <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
-            </ul>
-          </div>
-          <div className="settings-main">
-            <h2>Settings for {accountName}</h2>
-            {renderSettingsContent()}
-            <button className="close-popup" onClick={closeSettings}>Close</button>
-            <button className="apply" onClick={async () => {
-              getAllLocalStorageItems();
-              closeSettings();
-              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-              window.location.reload();
-            }}>
-              Apply
-            </button>
+      <div className="popup-overlay">
+        <div className="settings-content">
+          <div className="settings-container">
+            <div className="sidebar">
+              <ul>
+                <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>
+                <li onClick={() => setActiveSection('api')}>API Keys</li>
+                <li onClick={() => setActiveSection('im/export')}>Import/Export</li>
+              </ul>
+            </div>
+            <div className="settings-main">
+              <h2>Settings for {accountName}</h2>
+              {renderSettingsContent()}
+              <button className="close-popup" onClick={closeSettings}>Close</button>
+              <button className="apply" onClick={async () => {
+                getAllLocalStorageItems();
+                closeSettings();
+                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+                window.location.reload();
+              }}>
+                Apply
+              </button>
+            </div>
           </div>
         </div>
       </div>
-    </div>
   );
 };
 
diff --git a/app/components/settings/settingUtils.ts b/app/components/settings/settingUtils.ts
index ead2c20..da26d61 100644
--- a/app/components/settings/settingUtils.ts
+++ b/app/components/settings/settingUtils.ts
@@ -1,23 +1,36 @@
-// settingsUtils.ts
+// settingsManager.ts
 
-// Export the current settings as a JSON file
-export const exportSettings = (settings: any) => {
-    const blob = new Blob([JSON.stringify(settings)], { type: 'application/json' });
-    const link = document.createElement('a');
-    link.href = URL.createObjectURL(blob);
-    link.download = 'settings.json';
-    link.click();
-  };
-  
-  // Import settings from a JSON file
-  export const importSettings = (file: File, applySettings: (settings: any) => void) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      const importedSettings = JSON.parse(content);
-      applySettings(importedSettings);
-    };
-    reader.readAsText(file);
-  };
+// Method to export localStorage to a JSON object
+export function exportSettings(): string {
+  const settings: { [key: string]: any } = {};
 
-  
\ No newline at end of file
+  // Loop through all keys in localStorage and add them to the settings object
+  for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key) {
+          settings[key] = localStorage.getItem(key);
+      }
+  }
+
+  // Convert settings object to JSON string
+  return JSON.stringify(settings, null, 2);
+}
+
+// Method to import settings from a JSON object, clearing old localStorage
+export function importSettings(jsonData: string): void {
+  try {
+      const parsedSettings = JSON.parse(jsonData);
+
+      // Clear the current localStorage
+      localStorage.clear();
+
+      // Loop through parsed settings and save them in localStorage
+      Object.keys(parsedSettings).forEach((key) => {
+          localStorage.setItem(key, parsedSettings[key]);
+      });
+
+      console.log("Settings imported successfully!");
+  } catch (error) {
+      console.error("Invalid JSON data:", error);
+  }
+}
diff --git a/app/page.tsx b/app/page.tsx
index 02bcf6c..c7b295c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,35 +7,34 @@ import Documentation from './components/Documentation'; // Ensure the import pat
 import History from './components/History';
 import Models from './components/Models';
 import Credits from './components/Credits';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
-  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
+  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
   const conversationRef = useRef<HTMLDivElement>(null);
 
-
   const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
   const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
   const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
   const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
   const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
 
-  useEffect(()=>{
-    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
-    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
-    setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
-    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
-    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
-  })
-  
+  // Synchronize state with local storage on mount
+  useEffect(() => {
+    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe");
+    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe");
+    setAccentColor(localStorage.getItem("accentColor") || "#fefefe");
+    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe");
+  }, []);
 
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
 
-  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
+  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
     setView(view);
     if (view !== 'AI') {
       setShowDivs(false);
@@ -44,49 +43,49 @@ const LandingPage: React.FC = () => {
 
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
-    useEffect(() => {
-      const savedTheme = localStorage.getItem('selectedTheme');
-      if (savedTheme) {
-        setSelectedTheme(savedTheme);
-        // Apply the saved theme on initial load
-        switch (savedTheme) {
-          case 'IOMARKET':
-            applyIOMarketTheme();
-            break;
-          case 'WHITE':
-            applyWhiteTheme();
-            break;
-          case 'BLACK':
-            applyBlackTheme();
-            break;
-          case 'CUSTOM':
-            applyCustomTheme();
-            break;
-          case 'BASIC-CUSTOM':
-            applyBasicCustomTheme(
-                primaryColor,
-                secondaryColor,
-                accentColor,
-                basicBackgroundColor,
-                basicTextColor
-              );
-            break;
-          default:
-            applyIOMarketTheme();
-            break;
-        }
-      }   
-    }, []); // Runs only once when the component mounts          
+  // Apply theme based on selectedTheme and color settings
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('selectedTheme');
+    if (savedTheme) {
+      setSelectedTheme(savedTheme);
+      switch (savedTheme) {
+        case 'IOMARKET':
+          applyIOMarketTheme();
+          break;
+        case 'WHITE':
+          applyWhiteTheme();
+          break;
+        case 'BLACK':
+          applyBlackTheme();
+          break;
+        case 'CUSTOM':
+          applyCustomTheme();
+          break;
+        case 'BASIC-CUSTOM':
+          applyBasicCustomTheme(
+            primaryColor,
+            secondaryColor,
+            accentColor,
+            basicBackgroundColor,
+            basicTextColor
+          );
+          break;
+        default:
+          applyIOMarketTheme();
+          break;
+      }
+    }
+  }, [primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor]); // Watch color states and apply themes accordingly
 
   return (
     <>
-        <Header
-          toggleDivs={toggleDivs}
-          showDivs={showDivs}
-          onViewChange={handleViewChange}
-          showHistoryModelsToggle={true}
-          showToggle={view === 'AI'} // Pass the condition here
-          />
+      <Header
+        toggleDivs={toggleDivs}
+        showDivs={showDivs}
+        onViewChange={handleViewChange}
+        showHistoryModelsToggle={true}
+        showToggle={view === 'AI'}
+      />
       <div className="container">
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
           {showDivs && (
@@ -100,7 +99,7 @@ const LandingPage: React.FC = () => {
           {view === 'AI' && <AI />}
           {view === 'FAQ' && <FAQ />}
           {view === 'Documentation' && <Documentation />}
-          {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
+          {view === 'Credits' && <Credits />}
         </div>
       </div>
     </>
@@ -108,3 +107,4 @@ const LandingPage: React.FC = () => {
 };
 
 export default LandingPage;
+  
\ No newline at end of file