diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index d419d9b..bb346e5 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') || false;
+  const [myBoolean, setMyBoolean] = useState<boolean>(() => localStorage.getItem('myBoolean') === 'true');
 
   // Fetch local storage values and update state on component mount
   useEffect(() => {
@@ -50,6 +50,7 @@ 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 2f149f3..8f6eec2 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -652,87 +652,71 @@ 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={handleExport} className="export-button">
-              Export Settings
-            </button>
+            <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>
           </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>) => {
-    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);
+    if (event.target.files && event.target.files.length > 0) {
+      const file = event.target.files[0];
+      importSettings(file, applyCustomTheme);
     }
   };
 
-  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
+  const currentSettings = {
+    ...settings.userPreferences,
+    ...settings.theme,
+    ...settings.theme.faqSettings,
+    ...settings.theme.popupSettings,
+    ...settings.apiKeys,
+    ...settings.generalSettings,
   };
 
   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>
+    <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>
   );
 };
 
diff --git a/app/components/settings/settingUtils.ts b/app/components/settings/settingUtils.ts
index da26d61..ead2c20 100644
--- a/app/components/settings/settingUtils.ts
+++ b/app/components/settings/settingUtils.ts
@@ -1,36 +1,23 @@
-// settingsManager.ts
+// settingsUtils.ts
 
-// Method to export localStorage to a JSON object
-export function exportSettings(): string {
-  const settings: { [key: string]: any } = {};
+// 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);
+  };
 
-  // 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);
-  }
-}
+  
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index c7b295c..02bcf6c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,34 +7,35 @@ 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');
+  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   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");
 
-  // 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");
-  }, []);
+  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') => {
+  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
     setView(view);
     if (view !== 'AI') {
       setShowDivs(false);
@@ -43,49 +44,49 @@ const LandingPage: React.FC = () => {
 
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
-  // 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
+    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          
 
   return (
     <>
-      <Header
-        toggleDivs={toggleDivs}
-        showDivs={showDivs}
-        onViewChange={handleViewChange}
-        showHistoryModelsToggle={true}
-        showToggle={view === 'AI'}
-      />
+        <Header
+          toggleDivs={toggleDivs}
+          showDivs={showDivs}
+          onViewChange={handleViewChange}
+          showHistoryModelsToggle={true}
+          showToggle={view === 'AI'} // Pass the condition here
+          />
       <div className="container">
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
           {showDivs && (
@@ -99,7 +100,7 @@ const LandingPage: React.FC = () => {
           {view === 'AI' && <AI />}
           {view === 'FAQ' && <FAQ />}
           {view === 'Documentation' && <Documentation />}
-          {view === 'Credits' && <Credits />}
+          {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
         </div>
       </div>
     </>
@@ -107,4 +108,3 @@ const LandingPage: React.FC = () => {
 };
 
 export default LandingPage;
-  
\ No newline at end of file