diff --git a/app/components/Models.tsx b/app/components/Models.tsx
index 9d1bf92..f151777 100644
--- a/app/components/Models.tsx
+++ b/app/components/Models.tsx
@@ -1,8 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 const Models: React.FC = () => {
-  const [selectedModel, setSelectedModel] = useState<string>('Offline Fast');
-
   const modelOptions = [
     'Offline Fast',
     'Offline Fast (FOSS)',
@@ -18,14 +16,25 @@ const Models: React.FC = () => {
     'Online Expensive (Google)',
   ];
 
+  const [selectedModel, setSelectedModel] = useState<string>(() => {
+    // Load the selected model from localStorage on initial render
+    return localStorage.getItem('selectedModel') || 'Offline Fast';
+  });
+
   const handleModelChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedModel(event.target.value);
+    const newModel = event.target.value;
+    setSelectedModel(newModel);
   };
 
   const isOfflineModel = (model: string) => {
     return model.includes('Offline');
   };
 
+  // Save selected model to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('selectedModel', selectedModel);
+  }, [selectedModel]);
+
   return (
     <div className="model-background">
       <div className="models">
@@ -69,31 +78,37 @@ const Models: React.FC = () => {
           </button>
           <button className="financial-model model-box">
             <div className="overlay">
-              <h3>Character</h3>
+              <h3>Finance</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="weather-model model-box">
             <div className="overlay">
-              <h3>Character</h3>
+              <h3>Weather</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="time-planner-model model-box">
             <div className="overlay">
-              <h3>Character</h3>
+              <h3>Time</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="image-model model-box">
             <div className="overlay">
-              <h3>Character</h3>
+              <h3>Image</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
           <button className="default-model model-box">
             <div className="overlay"> 
-              <h3>Character</h3>
+              <h3>Custom1</h3>
+              {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
+            </div>
+          </button>
+          <button className="default-model model-box">
+            <div className="overlay"> 
+              <h3>Custom2</h3>
               {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />}
             </div>
           </button>
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 656bd53..84582fc 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme';
 import { exportSettings, importSettings } from './settingUtils'; // Import utility functions
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@@ -57,6 +58,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const [inputBorderColor, setInputBorderColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
     const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
     const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
+    const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim());
   
     // Theme selection
     const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
@@ -199,6 +201,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     useEffect(() => {
       localStorage.setItem('fontSize', fontSize);
     }, [fontSize]);
+
+    useEffect(() => {
+      localStorage.setItem('burgerMenu', burgerMenu);
+    }, [fontSize]);
   
     useEffect(() => {
       localStorage.setItem('selectedTheme', selectedTheme);
@@ -315,7 +321,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     if (settings.fontSize) {
       setFontSize(settings.fontSize);
       document.documentElement.style.setProperty('--font-size', settings.fontSize);
-    }    
+    }
+    
+    if (settings.burgerMenu) {
+      setBurgerMenu(settings.fontSize);
+      document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
+    }  
   };
 
   
@@ -472,105 +483,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                 <select
                   value={selectedTheme}
                   onChange={(e) => {
-                    const theme = e.target.value;
+                    const theme = e.target.value; // Get the selected value from the event
                     setSelectedTheme(theme); // Update state for selected theme
                     
                     // Apply the appropriate theme based on selection
-                    switch (theme) {
+                    switch (theme) { // Use 'theme' instead of 'selectedTheme'
                       case 'IOMARKET':
-                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
-                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
-                        document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
-                        document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
-                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
-                        document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
-                        document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
-                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
-                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
-                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
-                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
-                        document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
-                        document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
-                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
-                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
-                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
-                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
-                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
-                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
-                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
-                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
-                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
-                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
-                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
-                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
-                        document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
-                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
-                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+                        applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
                         break;
                       case 'WHITE':
-                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
-                        document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
-                        document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
-                        document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
-                        document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
-                        document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
-                        document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
-                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
-                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
-                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
-                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
-                        document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
-                        document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
-                        document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
-                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
-                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
-                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
-                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
-                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
-                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
-                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
-                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
-                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
-                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
-                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
-                        document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
-                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
-                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+                        applyWhiteTheme(); // Call the function to apply the WHITE theme
                         break;
                       case 'BLACK':
-                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
-                        document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
-                        document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
-                        document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
-                        document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
-                        document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
-                        document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
-                        document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
-                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
-                        document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
-                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
-                        document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
-                        document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
-                        document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
-                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
-                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
-                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
-                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
-                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
-                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
-                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
-                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
-                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
-                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
-                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
-                        document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
-                        document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
-                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+                        applyBlackTheme(); // Call the function to apply the BLACK theme
                         break;
                       case 'CUSTOM':
-                        // Handle custom theme logic here
+                        // Handle custom theme logic here if necessary
                         break;
                       default:
+                        applyIOMarketTheme(); // Fallback to the IOMARKET theme
                         break;
                     }
                   }} // Handle theme selection
@@ -581,7 +512,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   <option value="BLACK">BLACK</option>
                   <option value="CUSTOM">CUSTOM</option>
                 </select>
-              </div> 
+              </div>
+
               {/* Conditionally render theme settings only if "CUSTOM" is selected */}
               {selectedTheme === 'CUSTOM' && (
                 <>
@@ -809,6 +741,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     />
                   </div>
 
+                  <div className="settings-option">
+                    <p>Burger Menu Color</p>
+                    <input
+                      type="color"
+                      value={burgerMenu}
+                      onChange={(e) => {
+                        const newColor = e.target.value;
+                        setBurgerMenu(newColor);
+                        document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
+                      }}
+                    />
+                  </div>
+
                   <div className="settings-option">
                     <p>Input Border Color</p>
                     <input
diff --git a/app/components/theme.ts b/app/components/theme.ts
new file mode 100644
index 0000000..f9367bd
--- /dev/null
+++ b/app/components/theme.ts
@@ -0,0 +1,96 @@
+// theme.ts
+export const applyIOMarketTheme = () => {
+    document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
+    document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+    document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color
+    document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color
+    document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
+    document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
+    document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
+    document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
+    document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
+    document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
+    document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color
+    document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color
+    document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color
+    document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
+    document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
+    document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
+    document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
+    document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
+    document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
+    document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
+    document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
+    document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
+    document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color
+    document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
+    document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+};
+
+export const applyWhiteTheme = () => {
+    document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
+    document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color
+    document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color
+    document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color
+    document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background
+    document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
+    document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
+    document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
+    document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
+    document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
+    document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color
+    document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color
+    document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color
+    document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background
+    document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
+    document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
+    document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
+    document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
+    document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
+    document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
+    document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
+    document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
+    document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color
+    document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
+    document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+};
+
+export const applyBlackTheme = () => {
+    document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
+    document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+    document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
+    document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
+    document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
+    document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
+    document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
+    document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
+    document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
+    document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
+    document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
+    document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
+    document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
+    document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
+    document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
+    document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
+    document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
+    document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
+    document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
+    document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
+    document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
+    document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
+    document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
+    document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
+    document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
+    document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
+    document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
+    document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+    document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+};
diff --git a/app/styles/container.css b/app/styles/container.css
index 854c997..53c90a0 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -9,7 +9,7 @@
 }
 
 .left-panel {
-    margin-top: 10vh;
+    margin-top: 5em;
     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 */
@@ -25,7 +25,7 @@
 }
 
 .conversation-container {
-    margin-top: 10vh;
+    margin-top: 5em;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */
diff --git a/app/styles/global.css b/app/styles/global.css
index 1db5ccb..00a246b 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -3,7 +3,6 @@ body {
     height: 100vh;
     overflow: hidden;
     position: relative;
-    top: 1vh;
 }
 
 body {
diff --git a/app/styles/header.css b/app/styles/header.css
index d085746..b830147 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,13 +1,13 @@
 header{
     position: absolute;
     padding: 0 20px;
-    top: 0;
+    top: 2em;
     left: 0;
     width: 100%;
-    height: 10vh;
+    height: 5em;
     display: flex;
     align-items: center;
-    margin: 1.5vh 0;
+    font-size: 1em;
 }
 
 .hamburger{
@@ -40,14 +40,16 @@ header{
 .nav-links{
     position: absolute;
     display: flex;
-    gap: 15px;
-    width: 25vw;
-    height: 5vh;
+    top: 1em;
+    gap: 1em;
+    width: 25em;
+    height: 3em;
 }
 
 .nav-btn{
     background-color: transparent;
     border: none;
+    font-size: 0.9em;
 }
 
 .header-logo{
@@ -63,8 +65,9 @@ header{
 }
 
 .login-button .header-login-button{
+    font-size: 1em;
     position: absolute;
-    top: 2.5vh;
+    top: 1.5em;
     right: 1vw;
     padding: 10px 20px;
     background-color: var(--input-button-color);
diff --git a/app/styles/models.css b/app/styles/models.css
index 2c2d91e..e2d01ec 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -61,11 +61,11 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    color: var(--text-color); /* Use variable for overlay text color */
+    color: var(--overlay-text-color); /* Use variable for overlay text color */
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: x-large;
+    font-size: large;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
@@ -176,11 +176,10 @@
     color: var(--text-color); /* Text color */
     font-size: medium; /* Font size for dropdown */
     cursor: pointer; /* Cursor change on hover */
-    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transition */
+    transition: all 0.3s ease-in-out, border 0.3s ease; /* Smooth transition */
+}
+#model-select option:hover{
+    background-color: gray;
 }
 
-#model-select:hover {
-    background-color: var(--button-hover-background-color); /* Change background on hover */
-    border-color: var(--button-background-color); /* Change border color on hover */
-}
 
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 50847a8..72c464a 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -19,7 +19,8 @@
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
     --close-button-color: red;
-    --burger-menu-background-color: #79832e;  
+    --burger-menu-background-color: #79832e;  /*NEW*/
+    --overlay-text-color:white; /*NEW*/
     
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */
@@ -29,7 +30,7 @@
     --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
+    --popup-background-color: #8B9635;
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */
     --font-family: 'Poppins', 'sans-serif';/* Default font family */