diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index 874ebe1..0e3e8b1 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -19,8 +19,12 @@ import ThemeDropdown from './DropDownTheme';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
 
+  //#region initialize Variables
+  let item:string|null;
   const getItemFromLocalStorage = (key: string) => {
-    const item = localStorage.getItem(key);
+    if (typeof localStorage !== 'undefined') { 
+      item = localStorage.getItem(key)
+    }
 
     if (item) {
       try {
@@ -35,32 +39,48 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   // Active section
-  const [activeSection, setActiveSection] = useState(() => localStorage.getItem('activeSection') || 'general');
+  const [activeSection, setActiveSection] = useState('general');
 
   // Language setting
-  const [preferredLanguage, setPreferredLanguage] = useState(() => localStorage.getItem('preferredLanguage') || 'en');
+  const [preferredLanguage, setPreferredLanguage] = useState("en");
 
   // Currency setting
-  const [preferredCurrency, setPreferredCurrency] = useState(() => localStorage.getItem('preferredCurrency') || 'usd');
+  const [preferredCurrency, setPreferredCurrency] = useState('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');
+  const [dateFormat, setDateFormat] = useState('mm/dd/yyyy');
+  const [timeFormat, setTimeFormat] = useState('12-hour');
+  const [timeZone, setTimeZone] = useState('GMT');
 
   // Online AI and chat history settings
   const [selectedOption, setSelectedOption] = useState('Offline'); // Default to 'Offline'
-  const [disableChatHistory, setDisableChatHistory] = useState(() => getItemFromLocalStorage('disableChatHistory'));
-  const [disableAIMemory, setDisableAIMemory] = useState(() => getItemFromLocalStorage('disableAIMemory'));
-  const [openSourceMode, setOpenSourceMode] = useState(() => getItemFromLocalStorage('openSourceMode'));
+  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
+  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
+  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
 
   // User credentials
-  const [newName, setNewName] = useState(() => localStorage.getItem('newName') || '');
-  const [newEmail, setNewEmail] = useState(() => localStorage.getItem('newEmail') || '');
-  const [newPassword, setNewPassword] = useState(() => localStorage.getItem('newPassword') || '');
+  const [newName, setNewName] = useState('');
+  const [newEmail, setNewEmail] = useState('');
+  const [newPassword, setNewPassword] = useState('');
 
   // Measurement setting
-  const [preferredMeasurement, setPreferredMeasurement] = useState(() => localStorage.getItem('preferredMeasurement') || 'Metric');
+  const [preferredMeasurement, setPreferredMeasurement] = useState('Metric');
+
+  useEffect(() => {
+    setActiveSection(getItemFromLocalStorage("activeSection") || "general")
+    setPreferredLanguage(getItemFromLocalStorage("preferredLanguage") || 'en')
+    setPreferredCurrency(getItemFromLocalStorage("preferredCurrency") || "usd")
+    setDateFormat(getItemFromLocalStorage("dateFormat") || "mm/dd/yyyy")
+    setTimeFormat(getItemFromLocalStorage("timeFormat") || "12-hour")
+    setTimeZone(getItemFromLocalStorage("timeZone") || "GMT")
+    setDisableChatHistory(getItemFromLocalStorage('disableChatHistory').toLowerCase()==="true") //#TODO Idk if it works
+    setDisableAIMemory(getItemFromLocalStorage('disableAIMemory').toLowerCase()==="true")
+    setOpenSourceMode(getItemFromLocalStorage('openSourceMode').toLowerCase() === "true")
+    setNewName(getItemFromLocalStorage("newName") || "")
+    setNewEmail(getItemFromLocalStorage("newEmail") || "")
+    setNewPassword(getItemFromLocalStorage("newPassword") || "")
+    setPreferredMeasurement(getItemFromLocalStorage("preferredMeasurement") || "Metric")
+  },[])
 
   // Theme settings
   const [backgroundColor, setBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
@@ -99,22 +119,40 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
 
   // Per default a purple color gradient
-  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#dc8add");
-  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#c061cb");
-  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#9141ac");
-  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#813d9c");
-  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+  const [primaryColor, setPrimaryColor] = useState("#dc8add");
+  const [secondaryColor, setSecondaryColor] = useState("#c061cb");
+  const [accentColor, setAccentColor] = useState("#9141ac");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState("#813d9c");
+  const [basicTextColor, setBasicTextColor] = useState("#fefefe");
+
+  useEffect(() => {
+    setPrimaryColor(getItemFromLocalStorage("primaryColor"))
+    setSecondaryColor(getItemFromLocalStorage("secondaryColor"))
+    setAccentColor(getItemFromLocalStorage("accentColor"))
+    setBasicBackgroundColor(getItemFromLocalStorage("basicBackgroundColor"))
+    setBasicTextColor(getItemFromLocalStorage("basicTextColor"))
+  },[])
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
 
   // API Keys
 
-  const [mistral, setMistral] = useState(localStorage.getItem('mistral') || "");
-  const [openai, setOpenai] = useState(localStorage.getItem('openai') || "");
-  const [anthropic, setAnthropic] = useState(localStorage.getItem('anthropic') || "");
-  const [google, setGoogle] = useState(localStorage.getItem('google') || "");
-  const [myBoolean, setMyBoolean] = useState<boolean>(() => getItemFromLocalStorage('myBoolean'));
+  const [mistral, setMistral] = useState<string>("");
+  const [openai, setOpenai] = useState<string>("");
+  const [anthropic, setAnthropic] = useState<string>("");
+  const [google, setGoogle] = useState<string>("");
+  const [myBoolean, setMyBoolean] = useState<boolean>(false);
+
+  useEffect(() => {
+    setMistral(getItemFromLocalStorage("mistral") || "")
+    setOpenai(getItemFromLocalStorage("openai") || "")
+    setAnthropic(getItemFromLocalStorage("anthropic") || "")
+    setGoogle(getItemFromLocalStorage("google") || "")
+    setMyBoolean(getItemFromLocalStorage("myBoolean").toLowerCase() === "true")
+  },[])
+
+  //#region set Settings
 
   const settings = {
     userPreferences: {
@@ -287,17 +325,23 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { value: "'Zilla Slab Highlight', serif", label: 'Zilla Slab Highlight' },
   ];
 
+  //#region functions for changing Settings
+
   const handleLogout = () => {
-    localStorage.clear();
-    alert('Successfully logged out!');
-    window.location.reload();
+    if (typeof window !!== "undefined" && typeof localStorage !== 'undefined') {
+      localStorage.clear();
+      alert('Successfully logged out!');
+      window.location.reload();
+    }
   };
 
   useEffect(() => {
-    const savedTheme = localStorage.getItem('selectedTheme');
-    if (savedTheme) {
-      setSelectedTheme(savedTheme);
-      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
+    if (typeof localStorage !== 'undefined') {
+      const savedTheme = localStorage.getItem('selectedTheme');
+      if (savedTheme) {
+        setSelectedTheme(savedTheme);
+        applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
+      }
     }
   }, []); // Runs only once when the component mounts
 
@@ -311,8 +355,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       ...settings.generalSettings,
     };
     // Update localStorage for all settings
-    for (const [key, value] of Object.entries(flattenedSettings)) {
-      localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
+    if (typeof localStorage !== 'undefined') {
+      for (const [key, value] of Object.entries(flattenedSettings)) {
+        localStorage.setItem(key, typeof value === 'boolean' ? JSON.stringify(value) : value);
+      }
     }
   }, [
     ...Object.values(settings.userPreferences),
@@ -322,41 +368,50 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   ]);
 
   useEffect(() => {
-    const savedOption = localStorage.getItem('radioSelection');
-    if (savedOption) {
-      savedOption.replace(" (FOSS)", "");
-      setSelectedOption(savedOption); // Set saved selection
+    if (typeof localStorage !== 'undefined') {
+      const savedOption = localStorage.getItem('radioSelection');
+      if (savedOption) {
+        savedOption.replace(" (FOSS)", "");
+        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
+    if (typeof localStorage !== 'undefined') {
+      setSelectedOption(newValue);  // Update the state with the selected option
+      localStorage.setItem('radioSelection', newValue);  // Save the selection for persistence
+    }
   };
 
   // Function to handle updating all credentials
   const handleUpdateCredentials = async () => {
-    let useName = localStorage.getItem("accountName")
-    let useEmail = localStorage.getItem("accountEmail")
-    let usePassword = localStorage.getItem("accountPassword")
-    if (useName && useEmail && usePassword) {
-      await deleteAccount(useName, usePassword)
+    if (typeof localStorage !== 'undefined') {
+      
+      let useName = localStorage.getItem("accountName")
+      let useEmail = localStorage.getItem("accountEmail")
+      let usePassword = localStorage.getItem("accountPassword")
+      if (useName && useEmail && usePassword) {
+        await deleteAccount(useName, usePassword)
 
-      if (newName != "") {
-        useName = newName
-      } if (newEmail != "") {
-        useEmail = newEmail
-      } if (newPassword != "") {
-        usePassword = newPassword
-      }
+        if (newName != "") {
+          useName = newName
+        } if (newEmail != "") {
+          useEmail = newEmail
+        } if (newPassword != "") {
+          usePassword = newPassword
+        }
 
-      if (await createAccount(useName, useEmail, usePassword)) {
-        if (await changeData(useName, usePassword, settings)) {
-          localStorage.setItem("currentName", useName)
-          localStorage.setItem("currentPassword", usePassword)
-          localStorage.setItem("currentEmail", useEmail)
-          alert('Account successfully changed!')
-          window.location.reload()
+        if (await createAccount(useName, useEmail, usePassword)) {
+          if (await changeData(useName, usePassword, settings)) {
+            if (typeof window !== 'undefined') {
+              localStorage.setItem("currentName", useName)
+              localStorage.setItem("currentPassword", usePassword)
+              localStorage.setItem("currentEmail", useEmail)
+              alert('Account successfully changed!')
+              window.location.reload()
+            }
+          }
         }
       }
     }
@@ -364,22 +419,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   // Function to handle account deletion
   const handleDeleteAccount = async () => {
-    const useName = localStorage.getItem("accountName")
-    const usePassword = localStorage.getItem("accountPassword")
-    if (useName && usePassword) {
-      const success = await deleteAccount(useName, usePassword);
-      if (success) {
-        localStorage.clear();
-        alert('Account deleted successfully!');
-        window.location.reload()
-        // Optionally, redirect or reset state here
-      } else {
-        alert('Account deletion failed. Please check your password.');
+    if (typeof localStorage !== 'undefined') {
+      
+      const useName = localStorage.getItem("accountName")
+      const usePassword = localStorage.getItem("accountPassword")
+      if (useName && usePassword) {
+        const success = await deleteAccount(useName, usePassword);
+        if (success && typeof window !== 'undefined' ) {
+          localStorage.clear();
+          alert('Account deleted successfully!');
+          window.location.reload()
+          // Optionally, redirect or reset state here
+        } else {
+          alert('Account deletion failed. Please check your password.');
+        }
       }
     }
   };
 
-
+  //#region rendering
   // Render settings content based on the active section
   const renderSettingsContent = () => {
     switch (activeSection) {
@@ -508,6 +566,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   setValue={setBasicTextColor}
                   cssVariable=""
                 />
+                <FontSizeSetting
+                  fontSize={fontSize}
+                  setFontSize={setFontSize}
+                />
+                <DropdownSetting
+                  label="Font Family"
+                  value={fontFamily}
+                  setValue={(newFont) => {
+                    setFontFamily(newFont);
+                    document.documentElement.style.setProperty('--font-family', newFont);
+                  }}
+                  options={fontOptions}
+                />
               </>
             )}
 
@@ -558,6 +629,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
 
       case 'account':
+        const namePlaceholder = getItemFromLocalStorage("accountName") || "Current Name"
+        const emailPlaceholder = getItemFromLocalStorage("accountEmail") || "Current Email"
         return (
           <div className="settings-section">
             <h2>Account Settings</h2>
@@ -566,14 +639,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={newName}
               type='text'
               setValue={setNewName}
-              placeholder={localStorage.getItem("accountName") || "Current Name"} // Show current name or a default
+              placeholder={namePlaceholder} // Show current name or a default
             />
             <TextSettings
               label="New Email"
               value={newEmail}
               setValue={setNewEmail}
               type="email" // Input type is email
-              placeholder={localStorage.getItem("accountEmail") || "Current Email"} // Show current email or a default
+              placeholder={emailPlaceholder} // Show current email or a default
             />
             <TextSettings
               label="New Password"
@@ -601,6 +674,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         );
 
       case 'api':
+        const mistral_APIKey_PlaceHolder = getItemFromLocalStorage("mistral") || "Enter the API key"
+        const openai_APIKey_PlaceHolder = getItemFromLocalStorage("openai") || "Enter the API key"
+        const anthropic_APIKey_PlaceHolder = getItemFromLocalStorage("anthropic") || "Enter the API key"
+        const google_APIKey_PlaceHolder = getItemFromLocalStorage("google") || "Enter the API key"
         return (
           <div className="settings-section">
             <TextSettings
@@ -608,7 +685,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={mistral} // State variable for the input
               setValue={setMistral} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('mistral') || "Enter the API key"}
+              placeholder={mistral_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.mistral.ai/api-keys/" target="_blank" rel="noopener noreferrer">
@@ -620,7 +697,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={openai} // State variable for the input
               setValue={setOpenai} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('openai') || "Enter the API key"}
+              placeholder={openai_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener noreferrer">
@@ -632,7 +709,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={anthropic} // State variable for the input
               setValue={setAnthropic} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('anthropic') || "Enter the API key"}
+              placeholder={anthropic_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://console.anthropic.com/settings/keys" target="_blank" rel="noopener noreferrer">
@@ -644,7 +721,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               value={google} // State variable for the input
               setValue={setGoogle} // State updater function
               type="text" // Input type
-              placeholder={localStorage.getItem('google') || "Enter the API key"}
+              placeholder={google_APIKey_PlaceHolder}
             />
             <div className="settings-option">
               <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer">
@@ -729,8 +806,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={async () => {
               getAllLocalStorageItems();
               closeSettings();
-              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
-              window.location.reload();
+              if (typeof localStorage !== 'undefined') {
+                await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              }
+              if (typeof window !== 'undefined') {
+                window.location.reload();
+              }
             }}>
               Apply
             </button>