diff --git a/app/components/Credits.tsx b/app/components/Credits.tsx
index 5c94887..5144603 100644
--- a/app/components/Credits.tsx
+++ b/app/components/Credits.tsx
@@ -1,24 +1,62 @@
 import React from 'react';
 
-const Credits: React.FC = () => (
-  <div className="credits-container">
-    <section id="credits" className="credits-section">
-      <h1 className="title">Credits</h1>
-      <h2 className="subtitle">Icons</h2>
-      <p className="paragraph">This project utilizes the following icon resources:</p>
-      <CreditLink href="https://fontawesome.com/v4/license/" label="fontawesome" />
-      <h2 className="subtitle">Fonts</h2>
-      <p className="paragraph">The fonts used in this project are provided by:</p>
-      <CreditLink href="https://github.com/itfoundry/Poppins" label="Poppins" />
-      <CreditLink href="https://openfontlicense.org" label="Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight" />
-      <CreditLink href="http://www.apache.org/licenses/LICENSE-2.0" label="Roboto, Rock Salt" />
-      <CreditLink href="https://ubuntu.com/legal/font-licence" label="Ubuntu" />
-    </section>
-  </div>
-);
+const Credits: React.FC = () => {
+  return (
+    <div className="credits-container">
+      <section id="credits" className="credits-section">
+        <h1 className="title">Credits</h1>
 
-const CreditLink = ({ href, label }: { href: string; label: string }) => (
-  <a href={href} className="credit-btn" target="_blank" rel="noopener noreferrer">{label}</a>
-);
+        <h2 className="subtitle">Icons</h2>
+        <p className="paragraph">
+          This project utilizes the following icon resources:
+        </p>
+        <a
+          href="https://fontawesome.com/v4/license/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          fontawesome
+        </a>
+        <h2 className="subtitle">Fonts</h2>
+        <p className="paragraph">
+          The fonts used in this project are provided by:
+        </p>
+        <a
+          href="https://github.com/itfoundry/Poppins"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Poppins
+        </a>
+        <a
+          href="https://openfontlicense.org"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
+        </a>
+        <a
+          href="http://www.apache.org/licenses/LICENSE-2.0"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Roboto, Rock Salt
+        </a>
+        <a
+          href="https://ubuntu.com/legal/font-licence"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Ubuntu
+        </a>
+      </section>
+    </div>
+  );
+};
 
 export default Credits;
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index e477a80..63d0b87 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -20,16 +20,13 @@ const Header: React.FC<HeaderProps> = ({
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const toggleRef = useRef<HTMLDivElement | null>(null);
 
-    // Pages that will be displayed in the menu
-    const pages: ('AI' | 'FAQ' | 'Documentation' | 'Credits')[] = ['AI', 'FAQ', 'Documentation', 'Credits'];
-
     // Toggle menu state
     const toggleMenu = () => {
         setMenuOpen((prevMenuOpen) => !prevMenuOpen);
     };
 
     // Handle button click
-    const handleViewChange = (page: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => {
+    const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
         onViewChange(page);
         setMenuOpen(false); // Close the menu when a button is clicked
     };
@@ -38,9 +35,9 @@ const Header: React.FC<HeaderProps> = ({
     useEffect(() => {
         const handleClickOutside = (event: MouseEvent) => {
             if (
-                dropdownRef.current &&
+                dropdownRef.current && 
                 !dropdownRef.current.contains(event.target as Node) &&
-                toggleRef.current &&
+                toggleRef.current && 
                 !toggleRef.current.contains(event.target as Node)
             ) {
                 setMenuOpen(false);
@@ -75,11 +72,10 @@ const Header: React.FC<HeaderProps> = ({
                     </button>
                 )}
                 <nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
-                    {pages.map(page => (
-                        <button key={page} onClick={() => handleViewChange(page)} className="nav-btn">
-                            {page}
-                        </button>
-                    ))}
+                    <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
+                    <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
+                    <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
+                    <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button>
                 </nav>
                 <div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
                     <span></span>
diff --git a/app/components/InputFrontend.tsx b/app/components/InputFrontend.tsx
index 3c8295c..fec7713 100644
--- a/app/components/InputFrontend.tsx
+++ b/app/components/InputFrontend.tsx
@@ -1,5 +1,5 @@
 import React, { useState, ForwardedRef, useEffect } from 'react';
-import "../styles/variables.css";
+import "../styles/variables.css"
 
 interface InputProps {
   message: string;
@@ -13,36 +13,33 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
   ({ message, onSendClick, onMicClick, inputDisabled, isRecording }, ref: ForwardedRef<HTMLDivElement>) => {
     const [inputValue, setInputValue] = useState('');
 
-    // Sync the inputValue state with the message prop
     useEffect(() => {
       setInputValue(message);
     }, [message]);
 
-    // Handle the input change
     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
       setInputValue(e.target.value);
     };
 
-    // Handle 'Enter' key press
     const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (!inputDisabled && event.key === 'Enter') {
-        onSendClick(inputValue, false); // Send the message on Enter
-        setInputValue(''); // Clear the input after submission
-        event.preventDefault(); // Prevent the default Enter action
+      if (!inputDisabled) {
+        if (event.key === 'Enter') {
+          onSendClick(inputValue, false); // Call the function passed via props
+          setInputValue(''); // Optionally clear input after submission
+          event.preventDefault(); // Prevent default action (e.g., form submission)
+        }
       }
     };
 
-    // Handle the Send button click
     const handleSendClick = () => {
       if (inputValue.trim() !== "") {
-        onSendClick(inputValue, false);  // Send message
+        onSendClick(inputValue, false);  // Send message to parent component
         setInputValue('');               // Clear input after sending
       }
     };
 
     return (
       <div className="input" id="inputForm" ref={ref}>
-        {/* Input field for typing messages */}
         <input
           type="text"
           name="user_message"
@@ -50,22 +47,13 @@ const InputFrontend = React.forwardRef<HTMLDivElement, InputProps>(
           value={inputValue}
           onChange={handleInputChange}
           onKeyDown={handleKeyDown}
-          className="textInputField"
-          disabled={inputDisabled}  // Disable when inputDisabled is true
+          className='textInputField'
         />
-
-        {/* Send button */}
-        <button type="button" onClick={handleSendClick} disabled={inputDisabled}>
-          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}>
-            <path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" />
-          </svg>
+        <button type="button" onClick={handleSendClick} disabled={inputDisabled ? true : false}>
+          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 512 512" width={20}><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480l0-83.6c0-4 1.5-7.8 4.2-10.8L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" /></svg>
         </button>
-
-        {/* Microphone button */}
         <button className={`microphone-button ${isRecording ? "red" : "var(--input-button-color)"}`} type="button" onClick={onMicClick}>
-          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" width={15}>
-            <path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z" />
-          </svg>
+          <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" width={15}><path d="M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z" /></svg>
         </button>
       </div>
     );
diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 469d9cb..30c427c 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -123,39 +123,50 @@ const ModelSection: React.FC = () => {
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
-      const defaultValues = {
-        selectedModelDropdown: 'Offline Fast',
-        activeSelectedAIFunction: 'Code',
-        model: 'starcoder2',
-        radioSelection: 'None',
-        type: 'local',
-      };
-  
-      Object.entries(defaultValues).forEach(([key, value]) => {
-        if (!localStorage.getItem(key)) {
-          localStorage.setItem(key, value);
-        }
-      });
-  
-      setIsOpenSourceMode(localStorage.getItem("openSourceMode"));
-      setActiveSelectedAIFunction(localStorage.getItem("activeSelectedAIFunction") || '');
-      setRadioSelection(localStorage.getItem("radioSelection") || '');
-      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
-  
+      
+      setIsOpenSourceMode(localStorage.getItem("openSourceMode"))
+      const temp = localStorage.getItem("activeSelectedAIFunction") || ""
+      setActiveSelectedAIFunction(temp)
+      if (!localStorage.getItem('selectedModelDropdown')) {
+        localStorage.setItem("selectedModelDropdown", "Offline Fast")
+      }
+      
+      if (!localStorage.getItem("activeSelectedAIFunction")) {
+        setActiveSelectedAIFunction('Code')
+        localStorage.setItem('activeSelectedAIFunction', 'Code')
+      }
+      
+      if (!localStorage.getItem("model")) {
+        localStorage.setItem("model", 'starcoder2')
+      }
+      
+      if (!localStorage.getItem("radioSelection")) {
+        localStorage.setItem("radioSelection", 'None')
+      }
+      
+      if (!localStorage.getItem("type")) {
+        localStorage.setItem("type", 'local')
+      }
+      
       const handleStorageChange = () => {
         setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
       };
-  
-      // Update immediately when localStorage changes
-      window.addEventListener('storage', handleStorageChange);
       
+      // Update immediately when localStorage changes
+      if (typeof window !== 'undefined') {
+        window.addEventListener('storage', handleStorageChange);
+      }
+      
+      setRadioSelection(localStorage.getItem('radioSelection') || '');
+      setSelectedModelDropdown(localStorage.getItem('selectedModelDropdown') || '');
       // Cleanup listener on component unmount
       return () => {
-        window.removeEventListener('storage', handleStorageChange);
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('storage', handleStorageChange);
+        }
       };
     }
-  }, []);
-  
+  }, []); // Dependency array can remain empty if you only want this to run on mount
 
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -260,6 +271,7 @@ const ModelSection: React.FC = () => {
             ))}
           </select>
         </div>
+
         {/* Model Grid with Cards */}
         <div className="grid">
           {selectedAIFunction.map(
diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx
index d1adb30..c714a83 100644
--- a/app/components/settings/Settings.tsx
+++ b/app/components/settings/Settings.tsx
@@ -15,7 +15,6 @@ import {
   changeSettings,
   createAccount,
   deleteAccount,
-  getSettings
 } from '../../backend/database';
 import ThemeDropdown from './DropDownTheme';
 
@@ -299,11 +298,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   };
 
   useEffect(() => {
-    let useName = localStorage.getItem("accountName")
-    let usePassword = localStorage.getItem("accountPassword")
-    if (useName && usePassword) {
-      importDatabase(useName, usePassword)
-    }
     const savedTheme = localStorage.getItem('selectedTheme');
     if (savedTheme) {
       setSelectedTheme(savedTheme);
@@ -311,10 +305,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     }
   }, []); // Runs only once when the component mounts
 
-  const importDatabase = async (useName : string, usePassword : string) => {
-    const databaseSettings = await getSettings(useName, usePassword)
-    importSettings(databaseSettings)
-  }
   // Effect hooks to update localStorage whenever any state changes
   useEffect(() => {
     // Flatten nested objects
@@ -365,7 +355,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (await createAccount(useName, useEmail, usePassword)) {
-        if (await changeSettings(useName, usePassword, handleExport)) {
+        if (await changeSettings(useName, usePassword, settings)) {
           localStorage.setItem("currentName", useName)
           localStorage.setItem("currentPassword", usePassword)
           localStorage.setItem("currentEmail", useEmail)
@@ -724,6 +714,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
 
   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);
@@ -739,52 +730,36 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   //#region overall export
   return (
     <div className="popup-overlay">
-        <div className="settings-content">
-            <div className="settings-container">
-                {/* Sidebar for desktop */}
-                <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">
-                    {/* Dropdown for selections in responsive mode */}
-                    <div className="settings-option dropdown">
-                      <div className="dropdown-header"><h2>Select a Setting</h2></div>
-                      <select onChange={(e) => setActiveSection(e.target.value)} value={activeSection}>
-                          <option value="general">General</option>
-                          <option value="privacy">Privacy</option>
-                          <option value="theme">Theme</option>
-                          <option value="foss">FOSS</option>
-                          <option value="account">Account</option>
-                          <option value="api">API Keys</option>
-                          <option value="im/export">Import/Export</option>
-                      </select>
-                    </div>
-                    <h2>Settings for {accountName}</h2>
-                    {renderSettingsContent()}
-                    <button className="close-popup" onClick={closeSettings}>Close</button>
-                    <button className="apply" onClick={async () => {
-                      getAllLocalStorageItems();
-                      closeSettings();
-                      window.location.reload();
-                    }}>
-                      Apply
-                    </button>
-
-                </div>
-            </div>
+      <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 changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              window.location.reload();
+            }}>
+              Apply
+            </button>
+          </div>
         </div>
+      </div>
     </div>
-);
+  );
 };
 
-
 export default Settings;
\ No newline at end of file
diff --git a/app/styles/Login.css b/app/styles/Login.css
index b8fe3f4..610ce75 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -1,4 +1,6 @@
-.popup-overlay{
+
+/* Overlay for popup - full screen and centered */
+.popup-overlay {
     position: fixed; /* Fixed to cover the entire viewport */
     top: 0;          /* Ensure it starts from the top */
     left: 0;
@@ -10,7 +12,9 @@
     align-items: center;
     z-index: 10000; /* Higher than the header to cover the screen */
 }
-.popup-content{
+
+/* Popup content box */
+.popup-content {
     background-color: var(--popup-background-color); /* Use variable for background color */
     color: var(--popup-text-color); /* Use variable for text color */
     padding: 30px;
@@ -20,7 +24,9 @@
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     position: relative; /* For positioning the close button */
 }
-.popup-content input{
+
+/* Input styles */
+.popup-content input {
     width: 100%;
     padding: 10px;
     margin: 10px 0;
@@ -29,11 +35,14 @@
     font-size: 16px;
     transition: border-color 0.3s;
 }
-.popup-content input:focus{
+
+.popup-content input:focus {
     border-color: var(--input-button-color);
     outline: none; /* Remove default outline */
 }
-.close-popup{
+
+/* Close button styles */
+.close-popup {
     background: var(--close-button-color); /* Use variable for close button color */
     color: white; /* Use white for text color */
     border: none;
@@ -45,10 +54,13 @@
     right: 10px; /* Distance from the right */
     transition: background 0.3s;
 }
-.close-popup:hover{
+
+.close-popup:hover {
     background: darkred; /* Optional hover effect */
 }
-.log-into-account{
+
+/* Log In button styles */
+.log-into-account {
     background: green; /* Use variable for login button color */
     color: white;
     border: none;
@@ -57,10 +69,13 @@
     cursor: pointer;
     margin-top: 20px;
 }
-.popup-footer{
+
+/* Footer section for popups */
+.popup-footer {
     margin-top: 15px;
 }
-.popup-footer button{
+
+.popup-footer button {
     margin-right: 10px;
     padding: 8px 15px;
     background-color: var(--input-button-color);
@@ -69,17 +84,22 @@
     border-radius: 5px;
     transition: background-color 0.3s;
 }
-.popup-footer button:hover{
+
+.popup-footer button:hover {
     background-color: var(--input-button-hover-color);
 }
-.popup-footer a{
+
+.popup-footer a {
     color: var(--user-message-color);
     text-decoration: none;
 }
-.popup-footer a:hover{
+
+.popup-footer a:hover {
     text-decoration: underline;
 }
-.popup-content p{
+
+/* Paragraph styles within popup */
+.popup-content p {
     color: var(--popup-text-color); /* Use variable for paragraph text color */
     margin: 10px;
 }
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index 56201f5..981a794 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -10,12 +10,15 @@
     justify-content: center;
     align-items: center;
 }
+
 .settings-main h2 {
     margin-bottom: 1em;
 }
+
 .settings-main p {
     padding-bottom: 7px;
 }
+
 /* Main container for the settings */
 .settings-container {
     display: grid;
@@ -26,6 +29,7 @@
     height: 100%;
     /* Ensure it takes full height */
 }
+
 /* Settings content */
 .settings-content {
     background: var(--history-background-color);
@@ -45,6 +49,7 @@
     flex-direction: column;
     /* Flexbox for vertical stacking */
 }
+
 /* Sidebar styles */
 .sidebar {
     background: var(--settings-background-color);
@@ -61,6 +66,7 @@
     height: 100%;
     /* Ensures sidebar takes full height */
 }
+
 /* Sidebar item styles */
 .sidebar ul {
     list-style-type: none;
@@ -72,6 +78,7 @@
     flex-grow: 1;
     /* Allows the list to take available space */
 }
+
 .sidebar li {
     margin: 10px 0;
     cursor: pointer;
@@ -79,14 +86,17 @@
     border-radius: 5px;
     transition: background 0.3s;
 }
+
 .sidebar li:hover {
     background: var(--input-button-hover-color);
     /* Highlight on hover */
 }
+
 .sidebar li.active {
     background: var(--button-hover-background-color);
     /* Active section highlight */
 }
+
 /* Main settings area */
 .settings-main {
     grid-column: 2;
@@ -100,6 +110,7 @@
     flex-direction: column;
     /* Stack content vertically */
 }
+
 /* Close button positioning */
 .close-popup {
     background: var(--close-button-color);
@@ -118,6 +129,7 @@
     /* Distance from the right */
     transition: background 0.3s;
 }
+
 /* Close button positioning */
 .apply {
     background: var(--apply-button-color);
@@ -136,10 +148,13 @@
     /* Distance from the right */
     transition: background 0.3s;
 }
+
 .close-popup:hover {
     background: darkred;
     /* Optional hover effect */
 }
+
+
 /* Additional styles for inputs and options */
 .settings-option {
     margin-bottom: 20px;
@@ -149,12 +164,14 @@
     border-bottom: 1px solid var(--input-border-color);
     /* Optional, creates a separator between options */
 }
+
 .settings-option:last-child {
     margin-bottom: 0;
     /* Removes bottom margin from last option */
     border-bottom: none;
     /* Removes separator from last option */
 }
+
 .settings-option input[type="text"],
 .settings-option input[type="email"],
 .settings-option input[type="password"],
@@ -171,28 +188,33 @@
     margin-bottom: 10px;
     /* Adds spacing between inputs */
 }
+
 /* Optional additional spacing for labels */
 .settings-option label {
     margin-bottom: 5px;
     display: block;
     font-weight: bold;
 }
+
 .export-button {
     background-color: var(--button-hover-background-color);
     padding: 10px;
     margin: 10px;
     border-radius: 10px;
 }
+
 .import-file {
     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;
@@ -200,22 +222,22 @@
     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 */
 }
+
 .slider-option.disabled {
     opacity: 0.5;
     /* Make the option appear greyed out */
     pointer-events: none;
     /* Prevent clicks */
-}
-.dropdown{
-    display: none;
 }
\ No newline at end of file
diff --git a/app/styles/container.css b/app/styles/container.css
index 6ae111b..40c97cc 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -5,7 +5,8 @@
     height: 90dvh;
     padding-top: 1dvh;
 }
-.left-panel{
+
+.left-panel {
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -13,17 +14,23 @@
     margin-left: 0;
     padding-right: 1em;
 }
-.left-panel.hidden{
+
+.left-panel.hidden {
     opacity: 0; /* Fade out when hidden */
     width: 0; /* Collapse width to 0 */
     visibility: hidden; /* Hide visibility while collapsing */
+    
 }
-.conversation-container{
+
+.conversation-container {
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
     border-radius: 1em 0 0 0;
 }
-.conversation-container.collapsed{
+
+
+
+.conversation-container.collapsed {
     margin-left: 1vw; /* Space for the left panel */
 }
diff --git a/app/styles/credit.css b/app/styles/credit.css
index 486e0cc..1d6b206 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -1,45 +1,52 @@
 /* Styling for the credits container */
-.credits-container{
-  padding: 2rem;
-}
-.credits-section{
-  max-width: 900px;
-  height: 80dvh;
-  margin: auto;
-  background: var(--doc-background-color); /* Use variable for background */
-  padding: 2rem;
-  border-radius: 8px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  overflow-y: scroll;
-}
-.title{
-  font-size: calc(var(--font-size)*2);
-  color: var(--doc-title-color); /* Use variable for title color */
-  margin-bottom: 1.5rem;
-}
-.subtitle{
-  font-size: calc(var(--font-size)*1.5);
-  color: var(--doc-subtitle-color); /* Use variable for subtitle color */
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-.paragraph{
-  font-size: calc(var(--font-size));
-  color: var(--doc-paragraph-color); /* Use variable for paragraph color */
-  margin-bottom: 1.5rem;
-  line-height: 1.6;
-}
-/* Styling for the credit buttons */
-.credit-btn{
-  display: inline-block;
-  padding: 10px 15px;
-  margin: 10px 5px;
-  background-color: var(--button-background-color); /* Button background */
-  color: var(--button-text-color); /* Button text */
-  text-decoration: none;
-  border-radius: 5px;
-  transition: background-color 0.3s ease;
-}
-.credit-btn:hover{
-  background-color: var(--button-hover-background-color); /* Button hover */
-}
+.credits-container {
+    padding: 2rem;
+  }
+  
+  .credits-section {
+    max-width: 900px;
+    height: 80dvh;
+    margin: auto;
+    background: var(--doc-background-color); /* Use variable for background */
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    overflow-y: scroll;
+  }
+  
+  .title {
+    font-size: calc(var(--font-size)*2);
+    color: var(--doc-title-color); /* Use variable for title color */
+    margin-bottom: 1.5rem;
+  }
+  
+  .subtitle {
+    font-size: calc(var(--font-size)*1.5);
+    color: var(--doc-subtitle-color); /* Use variable for subtitle color */
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .paragraph {
+    font-size: calc(var(--font-size));
+    color: var(--doc-paragraph-color); /* Use variable for paragraph color */
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+  }
+  
+  /* Styling for the credit buttons */
+  .credit-btn {
+    display: inline-block;
+    padding: 10px 15px;
+    margin: 10px 5px;
+    background-color: var(--button-background-color); /* Button background */
+    color: var(--button-text-color); /* Button text */
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .credit-btn:hover {
+    background-color: var(--button-hover-background-color); /* Button hover */
+  }
+  
\ No newline at end of file
diff --git a/app/styles/doc.css b/app/styles/doc.css
index 43ce0ed..5b2988d 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -1,9 +1,11 @@
 /* styles.css */
+
 /* Styling for the documentation container */
-.documentation-container{
+.documentation-container {
   padding: 2rem;
 }
-.documentation-section{
+
+.documentation-section {
   max-width: 900px;
   height: 80dvh;
   margin: auto;
@@ -13,24 +15,28 @@
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   overflow-y: scroll;
 }
-.title{
+
+.title {
   font-size: calc(var(--font-size)*2);
   color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
-.subtitle{
+
+.subtitle {
   font-size: calc(var(--font-size)*1.5);
   color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
-.subsection-title{
+
+.subsection-title {
   font-size: calc(var(--font-size)*1.25);
   color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
-.paragraph{
+
+.paragraph {
   font-size: calc(var(--font-size));
   color: var(--doc-paragraph-color); /* Use variable for paragraph color */
   margin-bottom: 1.5rem;
diff --git a/app/styles/faq.css b/app/styles/faq.css
index 416b2ab..1484722 100644
--- a/app/styles/faq.css
+++ b/app/styles/faq.css
@@ -1,12 +1,13 @@
 /* Make sure the parent container of #faq takes up the full viewport height */
-.faq-container{
+.faq-container {
     display: flex;
     justify-content: center; /* Center horizontally */
     align-items: center;     /* Center vertically */
     height: 100vh;           /* Full viewport height */
     padding: 0 10px;         /* Optional padding to ensure spacing on small screens */
 }
-#faq{
+
+#faq {
     max-width: 800px;
     width: 90%;
     padding: 20px;
@@ -17,29 +18,34 @@
     margin: 2rem auto;
     height: 80vh;
 }
-#faq h2{
+
+#faq h2 {
     text-align: center;
     color: var(--faq-heading-color); /* Use variable for heading color */
     font-size: 2em;
     margin-bottom: 20px;
 }
-.faq-item{
+
+.faq-item {
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 5px;
     background-color: var(--faq-item-background-color); /* Use variable for item background */
     transition: background-color 0.3s ease-in-out;
 }
-.faq-item h3{
+
+.faq-item h3 {
     color: var(--faq-item-heading-color); /* Use variable for item heading color */
     margin-bottom: 10px;
     font-size: 1.5em;
 }
-.faq-item p{
+
+.faq-item p {
     color: var(--faq-item-text-color); /* Use variable for item text color */
     font-size: 1.1em;
     line-height: 1.5;
 }
-.faq-item:hover{
+
+.faq-item:hover {
     background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
 }
diff --git a/app/styles/fonts.css b/app/styles/fonts.css
index 555df7f..33ef933 100644
--- a/app/styles/fonts.css
+++ b/app/styles/fonts.css
@@ -1,56 +1,69 @@
-@font-face{
+@font-face {
     font-family: 'Inconsolata';
     src: url('/fonts/serious/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Merriweather';
     src: url('/fonts/serious/Merriweather/Merriweather-Regular.tff') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Noto Sans';
     src: url('/fonts/serious/Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Noto Serif';
     src: url('/fonts/serious/Noto_Serif/NotoSerif-VariableFont_wdth\,wght.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Playfair Display';
     src: url('/fonts/serious/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Poppins';
     src: url('/fonts/serious/Poppins/Poppins-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Roboto';
     src: url('/fonts/serious/Roboto/Roboto-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Ubuntu';
     src: url('/fonts/serious/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Bangers';
     src: url('/fonts/comic-sans-but-better/Bangers/Bangers-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Caveat';
     src: url('/fonts/comic-sans-but-better/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Frederika the Great';
     src: url('/fonts/comic-sans-but-better/Fredericka_the_Great/FrederickatheGreat-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Rock Salt';
     src: url('/fonts/RockSalt.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Sofadi One';
     src: url('/fonts/comic-sans-but-better/Sofadi_One/SofadiOne-Regular.ttf') format('truetype');
 }
-@font-face{
+
+@font-face {
     font-family: 'Zilla Slab Highlight';
     src: url('/fonts/comic-sans-but-better/Zilla_Slab_Highlight/ZillaSlabHighlight-Regular.ttf') format('truetype');
 }
diff --git a/app/styles/global.css b/app/styles/global.css
index 3e0047e..94ed660 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,59 +1,79 @@
-body{
+body {
     height: 100dvh;
     overflow: hidden;
     position: relative;
 }
+
 /* Chrome, Edge, and Safari */
-::-webkit-scrollbar{
-    width: 12px; /* Adjust width for horizontal and vertical scrollbars */
+::-webkit-scrollbar {
+    width: 12px;
+    /* Adjust width for horizontal and vertical scrollbars */
 }
-::-webkit-scrollbar-track{
-    background: #f0f0f0; /* Background of the scrollbar track */
+
+::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    /* Background of the scrollbar track */
 }
-::-webkit-scrollbar-thumb{
-    background-color: #888; /* Color of the draggable part (thumb) */
-    border-radius: 10px; /* Rounded corners */
-    border: 2px solid #f0f0f0; /* Space around the thumb */
+
+::-webkit-scrollbar-thumb {
+    background-color: #888;
+    /* Color of the draggable part (thumb) */
+    border-radius: 10px;
+    /* Rounded corners */
+    border: 2px solid #f0f0f0;
+    /* Space around the thumb */
 }
-::-webkit-scrollbar-thumb:hover{
-    background-color: #555; /* Thumb color on hover */
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+    /* Thumb color on hover */
 }
-body{
+
+body {
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
     font-size: var(--font-size);
 }
-header{
+
+
+header {
     background-color: var(--header-background-color);
     color: var(--header-text-color);
 }
-button{
+
+button {
     background-color: var(--button-background-color);
     color: var(--text-color);
     border: 1px solid var(--input-border-color);
     transition: background-color 0.3s ease;
 }
-button:hover{
+
+button:hover {
     background-color: var(--button-hover-background-color);
 }
-input{
+
+input {
     background-color: var(--input-background-color);
     border: 1px solid var(--input-border-color);
     color: var(--text-color);
 }
-input:hover{
+
+input:hover {
     border-color: var(--button-hover-background-color);
 }
+
 select{
     background-color: var(--input-background-color);
 }
+
 h1, h2, h3, h4, p{
     color: var(--text-color);
     font-family: var(--font-family);
     font-weight: 500;
 }
+
 p{
     font-weight: 400;
-    font-size: var(--font-size);
+    font-size: var(--font-size)
 }
diff --git a/app/styles/header.css b/app/styles/header.css
index ac5b79f..29431c5 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,4 +1,4 @@
-header{
+header {
     position: relative;
     padding: 0 20px;
     width: 100%;
@@ -9,32 +9,36 @@ header{
     font-size: 1em;
     z-index: 999;
 }
+
 /* Hamburger button styles */
-.hamburger{
+.hamburger {
     position: absolute;
     left: 5vw;
     display: flex; /* Always show hamburger button */
     flex-direction: column;
     cursor: pointer;
 }
-.hamburger span{
+
+.hamburger span {
     width: 25px;
     height: 3px;
     background-color: white;
     margin: 4px;
     transition: 0.3s;
 }
-.hamburger.open span:nth-child(1){
+
+.hamburger.open span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 10px);
 }
-.hamburger.open span:nth-child(2){
+.hamburger.open span:nth-child(2) {
     opacity: 0;
 }
-.hamburger.open span:nth-child(3){
+.hamburger.open span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -10px);
 }
+
 /* Navigation links (hidden in header, shown in dropdown) */
-.nav-links{
+.nav-links {
     display: none; /* Default hidden */
     position: absolute;
     top: 10vh; /* Adjust as needed */
@@ -47,11 +51,13 @@ header{
     padding: 10px auto;
     margin: auto;
 }
-.nav-links.active{
+
+.nav-links.active {
     display: flex; /* Show when active */
     height: fit-content;
 }
-.nav-btn{
+
+.nav-btn {
     background-color: var(--input-button-color);
     border: none;
     font-size: 0.9em;
@@ -63,11 +69,13 @@ header{
     text-align: center; /* Center text */
     margin: 4px auto;
 }
-.nav-btn:hover{
+
+.nav-btn:hover {
     background-color: var(--input-button-hover-color);
 }
+
 /* Logo styles */
-.header-logo{
+.header-logo {
     width: 250px;
     height: 5vh;
     background-image: url(../../public/img/logo.png);
@@ -77,8 +85,9 @@ header{
     background-color: transparent;
     border: none;
 }
+
 /* Login button styles */
-.login-button-container{
+.login-button-container {
     position: absolute;
     top: 0.1vh;
     right: 1vw;
@@ -86,7 +95,8 @@ header{
     display: flex;
     align-items: center;
 }
-.header-login-button{
+
+.header-login-button {
     height: 100%;
     width: max-content;
     font-size: var(--font-size);
@@ -102,9 +112,11 @@ header{
     justify-content: center;
     align-items: center;
 }
-.header-login-button:hover{
+
+.header-login-button:hover {
     background-color: var(--input-button-hover-color);
 }
+
 .show-hide-btn{
     display: flex;
     align-items: center;
@@ -114,4 +126,4 @@ header{
     left: 10vw;
     cursor: pointer;
     padding: 10px;
-}
+}
\ No newline at end of file
diff --git a/app/styles/history.css b/app/styles/history.css
index bf92b8e..14c8428 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,4 +1,4 @@
-.history-background{
+.history-background {
     grid-column: 1/2;
     grid-row: 1/2;
     height: 35dvh;
@@ -9,29 +9,35 @@
     margin-right: 0;
     border-radius: 1em;
 }
-.history{
+
+.history {
     height: 100%;
     overflow-y: scroll;
     padding-right: 10px;
 }
-.history ul{
+
+.history ul {
     list-style: none;
 }
-.history ul li{
+
+.history ul li {
     padding: 10px 0;
     border-bottom: 1px solid var(--text-color);
     width: 100%;
 }
-.history ul li a{
+
+.history ul li a {
     display: block;
     text-decoration: none;
     color: var(--text-color); /* Use variable for link text color */
     width: 100%;
     padding: 5px;
 }
-.history ul li a:hover{
+
+.history ul li a:hover {
     background-color: var(--input-button-hover-color);
 }
+
 .history-models{
     position: relative;
     height: 86dvh;
diff --git a/app/styles/input.css b/app/styles/input.css
index 0e550ec..7e7456b 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,11 +1,15 @@
-.input{
+/* Input Section */
+.input {
     border-radius: 8px;
     background-color: var(--input-background-color);
-    padding: 1em 0 1em 0.5em;
+    padding: 1em;
+    padding-left: 0.5em;
+    padding-right: 0;
     margin: 0 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: auto;
     height: 10dvh;
     position: absolute;
     left: 0.25vw;
@@ -14,7 +18,8 @@
     box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
     z-index: 600;
 }
-.input input{
+
+.input input {
     flex-grow: 1;
     padding: 5px;
     font-size: 1em;
@@ -27,16 +32,20 @@
     transition: border-color 0.3s ease-in-out;
     height: 7vh;
 }
-.textInputField::placeholder{
+
+.textInputField::placeholder {
     color: var(--text-color); /* Change to desired placeholder color */
     opacity: 1;  /* Ensures full opacity (optional) */
 }
-.input input:focus{
+
+.input input:focus {
     border-color: var(--input-button-hover-color);
 }
-.input button{
+
+.input button {
     padding: 5px;
-    margin: 5px 5px 5px 0;
+    margin: 5px;
+    margin-left: 0;
     background-color: var(--input-button-color);
     color: var(--user-message-text-color); /* Use variable for button text color */
     border: none;
@@ -52,22 +61,28 @@
     position: relative;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
-.input button img{
+
+.input button img {
     height: 20px;
 }
-.input button:hover{
+
+.input button:hover {
     background-color: var(--input-button-hover-color);
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
 }
+
 .microphone-button.red{
     background-color: var(--close-button-color);
 }
+
 .microphone-button.green{
     background-color: var(--button-background-color);
 }
+
 .microphone-button.red:hover{
     background-color: var(--close-button-hover-color);
 }
+
 .microphone-button.green:hover{
     background-color: var(--input-button-hover-color);
-}
+}
\ No newline at end of file
diff --git a/app/styles/models.css b/app/styles/models.css
index e657d6c..fd7e22b 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -13,6 +13,7 @@
     border-radius: 1em;
     height: 45dvh;
 }
+
 .models {
     display: flex;
     flex-direction: column;
@@ -20,6 +21,7 @@
     overflow: hidden;
     overflow-y: scroll;
 }
+
 .models .title {
     display: flex;
     justify-content: center;
@@ -27,20 +29,24 @@
     font-size: 1.5em;
     margin-bottom: 0;
 }
+
 .model-dropdown {
     display: flex;
     justify-content: center;
     margin-bottom: 1em; /* Space between dropdown and models */
 }
+
 .model-dropdown label {
     margin-right: 0.5em; /* Space between label and dropdown */
 }
+
 .grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5vh;
     width: 100%; /* Ensure grid takes full width */
 }
+
 .model-box {
     display: flex;
     align-items: center;
@@ -53,10 +59,12 @@
     width: 18vh;
     margin: auto; /* Center each model box in the grid cell */
 }
+
 .model-box.selected {
     box-shadow: 0 0 25px 5px var(--apply-button-hover-color); /* Glowing border */
     border-color: var(--apply-button-hover-color);
 }
+
 .overlay {
     position: absolute;
     left: 0;
@@ -73,6 +81,7 @@
     opacity: 0;
     border-radius: 5%;
 }
+
 .overlay img {
     align-self: flex-end;
     justify-self: end;
@@ -82,15 +91,18 @@
     right: 15px;
     bottom: 15px;
 }
+
 .model-box:hover .overlay {
     opacity: 1;
 }
+
 /* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);
     background-repeat: no-repeat;
     background-size: cover;
 }
+
 .math-model {
     background-image: url(/img/math.jpg);
     background-color: var(--background-color);
@@ -98,6 +110,7 @@
     background-repeat: no-repeat;
     background-size: contain;
 }
+
 .language-model {
     background-image: url(/img/language.jpg);
     background-color: #72cce4;
@@ -105,6 +118,8 @@
     background-size: contain;
     background-position: center;
 }
+
+
 .weather-model {
     background-image: url(/img/weather.jpg);
     background-color: #72cce4;
@@ -112,6 +127,7 @@
     background-size: contain;
     background-position: center;
 }
+
 .custom1-model,
 .custom2-model {
     background-image: url(/img/default.jpg);
@@ -119,17 +135,20 @@
     background-size: cover;
     background-position: center;
 }
+
 .model-dropdown {
     display: flex;
     flex-direction: column; /* Stack label and dropdown */
     align-items: center; /* Center the content */
     margin-bottom: 1em; /* Space between dropdown and models */
 }
+
 .model-dropdown label {
     margin-bottom: 0.5em; /* Space between label and dropdown */
     font-size: large; /* Increase font size for visibility */
     color: var(--text-color); /* Use variable for text color */
 }
+
 #model-select {
     padding: 0.5em; /* Padding for better touch targets */
     border-radius: 5px; /* Rounded corners */
diff --git a/app/styles/output.css b/app/styles/output.css
index 8261793..7cc0166 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -16,6 +16,7 @@
     height: 85dvh;
     position: relative;
 }
+
 #conversation {
     display: flex;
     flex-direction: column;
@@ -26,6 +27,7 @@
     border-radius: 10px;
     scroll-behavior: smooth;
 }
+
 /* Message Bubbles */
 .user-message, .ai-message {
     padding: 10px;
@@ -35,19 +37,23 @@
     word-wrap: break-word;
     overflow-wrap: break-word;
 }
+
 .user-message {
     background-color: var(--user-message-background-color);
     align-self: flex-end;
     color: var(--user-message-text-color);
 }
+
 .ai-message {
     background-color: var(--ai-message-background-color);
     align-self: flex-start;
     color: var(--ai-message-text-color);
 }
+
 .ai-message a {
     color: var(--text-color);
 }
+
 .ai-message table {
     display: block; /* Treat the table as a block element */
     position: relative;
@@ -61,24 +67,31 @@
     border-radius: 4px; /* Optional: Add border radius similar to pre/code */
     margin-top: 5px;
 }
+
+
 .ai-message th {
     background-color: var(--user-message-background-color);
     align-items: center;
     padding: 5px;
 }
+
 .ai-message td {
     align-items: center;
     padding: 5px;
 }
+
 .ai-message img {
     max-width: 80%;
 }
+
 .ai-message a:hover {
     filter: brightness(70%);
 }
+
 .ai-message li {
     margin-left: 1em;
 }
+
 .ai-message code, .ai-message pre {
     overflow-x: auto;
     white-space: pre;
@@ -88,10 +101,12 @@
     background-color: var(--code-background-color);
     border-radius: 4px;
 }
+
 /* Button Container */
 .button-container {
     display: flex;
 }
+
 .button-container button {
     background: none;
     border: none;
@@ -102,15 +117,18 @@
     height: 40px;
     width: 40px;
 }
+
 .button-container button:hover {
     background-color: var(--button-hover-background-color);
 }
+
 .tooltip {
     position: relative;
     display: inline-block;
     cursor: pointer;
     z-index: 900;
 }
+
 .tooltip .tooltiptext {
     visibility: hidden;
     background-color: var(--user-message-background-color);
@@ -119,14 +137,17 @@
     padding: 5px;
     border-radius: 4px;
     font-size: calc(var(--font-size) * 0.8);
+
     position: absolute;
     top: 100%;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
+
     opacity: 0;
     transition: all 0.3s;
 }
+
 .tooltip .tooltiptext::after {
     content: "";
     position: absolute;
@@ -137,16 +158,19 @@
     border-style: solid;
     border-color: transparent transparent var(--user-message-background-color) transparent;
 }
+
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
+
 #copiedText {
     margin-top: 1em;
     cursor: default;
     pointer-events: none;
     user-select: none;
 }
+
 #scrollToBottom {
     scroll-behavior: smooth;
     visibility: hidden;
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index ea61e8c..938106e 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -5,6 +5,7 @@
     padding: 0;
     border-radius: none;
   }
+  
   /* Header styles */
   header {
     top: 0;
@@ -13,6 +14,7 @@
     padding-top: 0;
     width: 100%;
   }
+ 
   /* Container styles */
   .container {
     display: flex;
@@ -22,22 +24,26 @@
     margin: 0;
     padding: 1dvh 0 0 0;
   }
+
   /* Left panel styles */
   .left-panel {
     display: hidden; /* Initially hidden */
     min-width: 100%; /* Takes full width when visible */
     margin: 0;
   }
+
   .left-panel.visible {
     display: block;
     height: min-content;
   }
+
   /* Conversation container styles */
   .conversation-container {
     min-width: 100%;
     height: 100%;
     border-radius: 0;
   }
+
   .conversation-container.collapsed {
     width: 0;
     padding: 0;
@@ -45,21 +51,25 @@
     overflow: hidden;
     display: hidden;
   }
+
   .conversation-container.expanded {
     min-width: 100%;
     margin-left: 0;
     border-radius: none;
     height: 10vh;
   }
+
   /* Grid styles */
   .grid {
     grid-template-columns: 1fr; /* One item per line */
   }
+
   /* Model box styles */
   .model-box {
     max-width: none; /* Remove max-width */
     margin: 0 auto; /* Center each model-box */
   }
+
   /* Input styles */
   .input {
     grid-column: 1 / -1;
@@ -72,6 +82,7 @@
     left: 2vw;
     justify-content: flex-start;
   }
+
   .input input {
     font-size: 1em; /* Adjust font size */
     max-width: 70%;
@@ -79,6 +90,7 @@
     border-color: var(--input-border-color); /* Use variable for input border */
     color: var(--text-color); /* Use variable for text color */
   }
+
   .input button {
     height: 100%; /* Adjust button height */
     width: 15%; /* Adjust button width */
@@ -87,13 +99,16 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
     margin: 0;
   }
+
   .header-logo {
     position: relative;
   }
+
   .hamburger.open {
     margin-top: 0.5vh;
     padding-left: 1vw;
   }
+
   .nav-links {
     display: none; /* Hidden by default */
     position: absolute;
@@ -106,10 +121,12 @@
     padding: 10px;
     height: fit-content;
   }
+
   .nav-links.active {
     display: flex; /* Show when active */
     height: fit-content;
   }
+
   .nav-btn {
     width: 100%;
     text-align: center;
@@ -120,43 +137,28 @@
     font-size: 0.9em;
     border-radius: 5px;
   }
+
   .nav-btn:hover {
     background-color: var(--input-button-hover-color);
   }
+
   .hamburger {
     display: flex; /* Always show hamburger button */
   }
+
   .header-login-button {
     right: 5vh; /* Keep login button visible */
   }
+
   .show-hide-btn{
     width: fit-content;
     left: 20vw;
   }
+
   .header-logo {
     background-image: url(../../public/img/logo-small.png);
     width: 4em;
   }
-  .sidebar{
-    width: 0%;
-    display: none;
-  }
-  .settings-main {
-    width: 80vw; /* Full width for main content */
-    margin: auto;
-    padding: auto;
-  }
-  .dropdown{
-    display: flex;
-    position: relative;
-    top: 10px;
-    display: block;
-  }
-
-  .slider-option{
-    width: fit-content;
-    margin: 10px 10px 0 0;
-  }
 }
 
 /* Responsive adjustments for the settings */
@@ -164,4 +166,12 @@
   .settings-content {
     flex-direction: column; /* Stack sidebar and main content on smaller screens */
   }
+
+  .sidebar {
+    width: 100%; /* Full width for sidebar */
+  }
+
+  .settings-main {
+    width: 100%; /* Full width for main content */
+  }
 }
diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css
index 0fdf38d..7608126 100644
--- a/app/styles/scrollbar.css
+++ b/app/styles/scrollbar.css
@@ -2,13 +2,16 @@
 .scrollbar {
   overflow-y: scroll;
 }
+
 .scrollbar::-webkit-scrollbar {
   width: 8px;
 }
+
 .scrollbar::-webkit-scrollbar-thumb {
   background-color: var(--input-border-color); /* Use variable for thumb color */
   border-radius: 4px;
 }
+
 .scrollbar::-webkit-scrollbar-track {
   background-color: var(--history-background-color); /* Use variable for track color */
 }
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 688bddc..3dd4461 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -9,6 +9,7 @@
     display: block;
     box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }
+
 .user-message {
     background-color: var(--user-message-background-color);
     color: var(--text-color);
@@ -17,6 +18,7 @@
     text-align: left;
     margin-right: 1.5vw;
 }
+
 .ai-message {
     background-color: var(--ai-message-background-color);
     color: var(--text-color);
@@ -24,6 +26,7 @@
     margin-right: auto;
     text-align: left;
 }
+
 .ai-container{
     position: relative;
     height: min-content;
diff --git a/app/styles/variables.css b/app/styles/variables.css
index d68f8b8..dab7cbe 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -23,7 +23,8 @@
     --apply-button-color:#8B9635;
     --apply-button-hover-color:#6b7c2b;
     --burger-menu-background-color: #79832e;  /*NEW*/
-    --overlay-text-color:white; /*NEW*/  
+    --overlay-text-color:white; /*NEW*/
+    
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */
     --faq-heading-color: #8B9635; /* Heading color for FAQ section */
@@ -31,6 +32,7 @@
     --faq-item-heading-color: #474D22; /* Heading color for FAQ items */
     --faq-item-text-color: #333; /* Text color for FAQ items */
     --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
+
     --popup-background-color: #8B9635;
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */