diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index d98896e..c37a1fa 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
 
 const Login: React.FC = () => {
   // State to handle popup visibility
-  const [showLoginPopup, setShowLoginPopup] = useState(false);
-  const [showSignUpPopup, setShowSignUpPopup] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [showSignInPopup, setShowSignInPopup] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [showSettingsPopup, setShowSettingsPopup] = useState(false);
 
@@ -12,40 +12,26 @@ const Login: React.FC = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [accountName, setAccountName] = useState('Pluto'); // Set the account name
-  const [newAccountEmail, setNewAccountEmail] = useState('');
-  const [newAccountPassword, setNewAccountPassword] = useState('');
 
-  // Fixed credentials
-  const fixedEmail = 'pluto@imareal.planet';
-  const fixedPassword = 'fuckTheSun1234';
-  const fixedAccount = 'Pluto';
+  // Function to toggle the popup
+  const togglePopup = () => setShowPopup(!showPopup);
 
-  // Function to toggle the login popup
-  const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
-
-  // Function to toggle the sign-up popup
-  const toggleSignUpPopup = () => {
-    setShowSignUpPopup(!showSignUpPopup);
-    setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
+  // Function to toggle the sign-in popup
+  const toggleSignInPopup = () => {
+    setShowSignInPopup(!showSignInPopup);
+    setShowPopup(false); // Hide login popup when opening the sign-in popup
   };
 
   // Function to handle login
   const handleLogin = () => {
-    if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
+    if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
       setIsLoggedIn(true); // Successful login
-      setShowLoginPopup(false); // Close the login popup
+      setShowSignInPopup(false); // Close the sign-in popup
     } else {
       alert('Incorrect credentials');
     }
   };
 
-  // Function to handle account creation
-  const handleCreateAccount = () => {
-    console.log('New Account Created:', newAccountEmail, newAccountPassword);
-    alert('Account created successfully! You can now log in.');
-    toggleSignUpPopup(); // Close sign-up popup
-  };
-
   // Function to toggle the settings popup
   const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
 
@@ -53,38 +39,79 @@ const Login: React.FC = () => {
     <div>
       {/* Login or Settings Button */}
       <div className="login-button">
-        <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
-          {isLoggedIn ? 'Settings' : 'Log In'}
+        <button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
+          {isLoggedIn ? 'Settings' : 'Register'}
         </button>
       </div>
 
-      {/* Conditional rendering of the Login Popup */}
-      {showLoginPopup && (
+      {/* Conditional rendering of the initial Popup */}
+      {showPopup && (
         <div className="popup-overlay">
           <div className="popup-content">
-            <h2>Log In</h2>
-
-            {/* Close Button */}
-            <button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
-              Close
-            </button>
+            <h2>Register</h2>
 
             {/* Name or Email Input */}
             <div>
               <input
                 type="text"
                 placeholder="Name or Email"
-                value={email}
                 onChange={(e) => setEmail(e.target.value)}
               />
             </div>
 
-            {/* Password Input */}
+            {/* Password Input (displayed as asterisks) */}
+            <div>
+              <input
+                type="password"
+                placeholder="Password"
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+
+            {/* Create Account and Sign In buttons */}
+            <div className="popup-footer">
+              <button onClick={() => alert('Create Account clicked')}>
+                Create Account
+              </button>
+              <p>
+                Already have an account? Sign in {' '}
+                <span
+                  style={{ color: 'blue', cursor: 'pointer' }}
+                  onClick={toggleSignInPopup}
+                >
+                  here
+                </span>
+              </p>
+            </div>
+
+            {/* Close Button */}
+            <button className="close-popup" onClick={togglePopup}>
+              Close
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Conditional rendering of the Sign-In Popup */}
+      {showSignInPopup && (
+        <div className="popup-overlay">
+          <div className="popup-content">
+            <h2>Sign In</h2>
+
+            {/* Name or Email Input */}
+            <div>
+              <input
+                type="text"
+                placeholder="Name or Email"
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            {/* Password Input (displayed as asterisks) */}
             <div>
               <input
                 type="password"
                 placeholder="Password"
-                value={password}
                 onChange={(e) => setPassword(e.target.value)}
               />
             </div>
@@ -94,56 +121,11 @@ const Login: React.FC = () => {
               <button className="log-into-account" onClick={handleLogin}>Log In</button>
             </div>
 
-            {/* Text for creating an account */}
-            <p>
-              Don't have an account yet? Create one {' '}
-              <span
-                style={{ color: 'blue', cursor: 'pointer' }}
-                onClick={toggleSignUpPopup}
-              >
-                here
-              </span>
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* Conditional rendering of the Sign-Up Popup */}
-      {showSignUpPopup && (
-        <div className="popup-overlay">
-          <div className="popup-content">
-            <h2>Create Account</h2>
-
-            {/* New Account Email Input */}
-            <div>
-              <input
-                type="text"
-                placeholder="Email"
-                value={newAccountEmail}
-                onChange={(e) => setNewAccountEmail(e.target.value)}
-              />
-            </div>
-
-            {/* New Account Password Input */}
-            <div>
-              <input
-                type="password"
-                placeholder="Password"
-                value={newAccountPassword}
-                onChange={(e) => setNewAccountPassword(e.target.value)}
-              />
-            </div>
-
-            {/* Create Account Button */}
-            <div>
-              <button className="create-account" onClick={handleCreateAccount}>Create Account</button>
-            </div>
-
             {/* Close Button */}
-            <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
+            <button className="close-popup" onClick={toggleSignInPopup}>
               Close
             </button>
-          </div>  
+          </div>
         </div>
       )}
 
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 2f8b5d8..ea1a818 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   const [newPassword, setNewPassword] = useState<string>('');
 
   // Theme selection
-  const [selectedTheme, setSelectedTheme] = useState<string>('default');
+  const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
 
 
   // Effect to update CSS variables on theme state change
@@ -99,85 +99,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <h2>General Settings</h2>
             <div className="settings-option">
               <label>Preferred Language</label>
-              <select
+              <input
+                type="text"
                 value={preferredLanguage}
                 onChange={(e) => setPreferredLanguage(e.target.value)}
-              >
-                <option value="en">English</option>
-                <option value="es">Spanish</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="it">Italian</option>
-                <option value="pt">Portuguese</option>
-                <option value="zh">Chinese</option>
-                <option value="ja">Japanese</option>
-                <option value="ru">Russian</option>
-                <option value="ar">Arabic</option>
-                {/* Add more languages as needed */}
-              </select>
+              />
             </div>
             <div className="settings-option">
               <label>Preferred Currency</label>
-              <select
+              <input
+                type="text"
                 value={preferredCurrency}
                 onChange={(e) => setPreferredCurrency(e.target.value)}
-              >
-                <option value="usd">USD</option>
-                <option value="eur">EUR</option>
-                <option value="gbp">GBP</option>
-                <option value="jpy">JPY</option>
-                <option value="cad">CAD</option>
-                <option value="aud">AUD</option>
-                <option value="chf">CHF</option>
-                <option value="cny">CNY</option>
-                <option value="inr">INR</option>
-                {/* Add more currencies as needed */}
-              </select>
+              />
             </div>
             <div className="settings-option">
               <label>Date Format</label>
-              <select
+              <input
+                type="text"
                 value={dateFormat}
                 onChange={(e) => setDateFormat(e.target.value)}
-              >
-                <option value="mm/dd/yyyy">MM/DD/YYYY</option>
-                <option value="dd/mm/yyyy">DD/MM/YYYY</option>
-                <option value="yyyy-mm-dd">YYYY-MM-DD</option>
-                <option value="mm-dd-yyyy">MM-DD-YYYY</option>
-                <option value="dd-mm-yyyy">DD-MM-YYYY</option>
-                {/* Add more formats as needed */}
-              </select>
+              />
             </div>
             <div className="settings-option">
               <label>Time Format</label>
-              <select
+              <input
+                type="text"
                 value={timeFormat}
                 onChange={(e) => setTimeFormat(e.target.value)}
-              >
-                <option value="12-hour">12 Hour</option>
-                <option value="24-hour">24 Hour</option>
-                <option value="am-pm">AM/PM Format</option>
-                {/* Add more formats if necessary */}
-              </select>
+              />
             </div>
             <div className="settings-option">
               <label>Time Zone</label>
-              <select
+              <input
+                type="text"
                 value={timeZone}
                 onChange={(e) => setTimeZone(e.target.value)}
-              >
-                <option value="GMT">GMT</option>
-                <option value="EST">EST</option>
-                <option value="CST">CST</option>
-                <option value="MST">MST</option>
-                <option value="PST">PST</option>
-                <option value="UTC">UTC</option>
-                <option value="BST">BST</option>
-                <option value="IST">IST</option>
-                <option value="CET">CET</option>
-                <option value="JST">JST</option>
-                {/* Add more time zones as needed */}
-              </select>
+              />
             </div>
           </div>
         );
@@ -239,110 +197,111 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                     // Apply the appropriate theme based on selection
                     switch (theme) {
                       case 'IOMARKET':
-                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color
+                        document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // New 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-background-color', '#ffffff'); // Background color for input fields
                         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('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
                         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('--models-background-color', '#ffffff'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
                         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-family', "'Poppins', 'sans-serif'"); // Default font family
                         document.documentElement.style.setProperty('--font-size', '16px'); // Font size
                         break;
                       case 'WHITE':
-                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background
+                        document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background color
                         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-background-color', '#ffffff'); // Background color for input fields
                         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('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
                         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('--models-background-color', '#ffffff'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
                         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-family', "'Poppins', 'sans-serif'"); // Default font family
                         document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+
                         break;
                       case 'BLACK':
-                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background
+                        document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background color
                         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-background-color', '#1e1e1e'); // Background color for input fields
                         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('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
+                        document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
+                        document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
+                        document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
+                        document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
                         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('--models-background-color', '#1e1e1e'); // Background for models section
+                        document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
+                        document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
+                        document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
+                        document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
+                        document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
+                        document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
+                        document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
+                        document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
+                        document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
                         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('--font-family', "'Poppins', 'sans-serif'"); // Default font family
+                        document.documentElement.style.setProperty('--font-size', '16px'); // Font size 
                         break;
                       case 'CUSTOM':
-                        // Handle custom theme logic here
+                        // Do nothing, CUSTOM will display the customization options
                         break;
                       default:
                         break;
                     }
                   }} // Handle theme selection
                 >
-                  <option value="default">Select your style...</option>
                   <option value="IOMARKET">IOMARKET</option>
                   <option value="WHITE">WHITE</option>
                   <option value="BLACK">BLACK</option>
                   <option value="CUSTOM">CUSTOM</option>
                 </select>
-              </div> 
+              </div>
+        
               {/* Conditionally render theme settings only if "CUSTOM" is selected */}
               {selectedTheme === 'CUSTOM' && (
                 <>
diff --git a/app/styles/Login.css b/app/styles/Login.css
index 8c77229..c8c559e 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -1,13 +1,3 @@
-/* Container for the login layout */
-.login-container {
-    display: grid;
-    grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
-    grid-auto-flow: column;
-    overflow-x: hidden;
-    height: 100%; /* Ensure it takes full height */
-}
-
-/* Button for login action */
 .login-button {
     position: absolute;
     top: 5px;
@@ -53,7 +43,6 @@
     width: 300px;
     text-align: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    position: relative; /* For positioning the close button */
 }
 
 /* Input styles */
@@ -72,28 +61,10 @@
     outline: none; /* Remove default outline */
 }
 
-/* Close button styles */
+/* Close button */
 .close-popup {
     background: var(--close-button-color); /* Use variable for close button color */
-    color: white; /* Use white for text color */
-    border: none;
-    border-radius: 5px;
-    padding: 5px 10px;
-    cursor: pointer;
-    position: absolute; /* Position the button absolutely */
-    top: 10px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
-    transition: background 0.3s;
-}
-
-.close-popup:hover {
-    background: darkred; /* Optional hover effect */
-}
-
-/* Log In button styles */
-.log-into-account {
-    background: green; /* Use variable for login button color */
-    color: white;
+    color: var(--text-color);
     border: none;
     border-radius: 5px;
     padding: 5px 10px;
@@ -101,7 +72,17 @@
     margin-top: 20px;
 }
 
-/* Footer section for popups */
+.log-into-account {
+    background: var(--login-button-color); /* Use variable for login button color */
+    color: var(--text-color);
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    margin-top: 20px;
+}
+
+/* Footer section */
 .popup-footer {
     margin-top: 15px;
 }
@@ -129,7 +110,6 @@
     text-decoration: underline;
 }
 
-/* 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 bf88759..014a3a8 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -97,23 +97,23 @@
 
 /* Close button positioning */
 .close-popup {
-    background: var(--close-button-color); /* Use variable for close button color */
-    color: white; /* Use white for text color */
+    background-color: var(--close-button-color);
+    color: var(--user-message-text-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 10px 20px;
     border: none;
     border-radius: 5px;
-    padding: 5px 10px;
     cursor: pointer;
-    position: absolute; /* Position the button absolutely */
-    top: 10px; /* Distance from the top */
-    right: 10px; /* Distance from the right */
+    position: absolute; /* Position absolute to top right */
+    top: 20px; /* Distance from top */
+    right: 20px; /* Distance from right */
     transition: background 0.3s;
 }
 
 .close-popup:hover {
-    background: darkred; /* Optional hover effect */
+    background-color: var(--close-button-hover-color); /* Darker red on hover */
 }
 
-
 /* Additional styles for inputs and options */
 .settings-option {
     margin-bottom: 20px; /* Adds space between each setting option */
diff --git a/app/styles/container.css b/app/styles/container.css
index e281216..08f254a 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -14,8 +14,6 @@
     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 */
     border-radius: 0 1em 0 0;
-    margin-left: 0;
-    padding-right: 1em;
 }
 
 .left-panel.hidden {
diff --git a/app/styles/global.css b/app/styles/global.css
index 1db5ccb..f1bcfdf 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -45,7 +45,3 @@ input {
 input:hover {
     border-color: var(--button-hover-background-color);
 }
-
-select{
-    background-color: var(--input-background-color);
-}
diff --git a/app/styles/history.css b/app/styles/history.css
index 83e5271..7bc9bcd 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 45vh;
+    height: 40vh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
diff --git a/app/styles/output.css b/app/styles/output.css
index 2abde1d..f5d7924 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -12,7 +12,8 @@
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 75vh;
+    height: 70vh;
+    margin-bottom: 1vh;
 }
 
 #conversation {
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index 524e730..ebb9da1 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -15,7 +15,7 @@
     color: var(--text-color);
     border-bottom-right-radius: 0;
     margin-left: auto;
-    text-align: left;
+    text-align: right;
 }
 
 .ai-message {
diff --git a/app/styles/variables.css b/app/styles/variables.css
index a051e6d..e5b3bbc 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -18,7 +18,6 @@
     --left-panel-background-color: #79832e; /* Background color for left panel */
     --conversation-background-color: #79832e; /* Background color for conversation container */
     --doc-background-color: #ffffff; /* Background color for documents */
-    --close-button-color: red;  
     
     /* FAQ Colors */
     --faq-background-color: #474D22; /* Background color for FAQ section */