diff --git a/login.html b/login.html
index cf66922..9fee792 100644
--- a/login.html
+++ b/login.html
@@ -25,17 +25,21 @@
                 <div id="login-section" class="auth-section">
                     <h2>Login</h2>
                     <form id="login-form">
-                        <input type="text" id="login-username" class="input_class" placeholder="Username" required>
-                        <input type="password" id="login-password" class="input_class" placeholder="Password" required>
                         <div id="admin-extra-fields" style="display: none;">
-                            <input type="text" id="login-empid" placeholder="Employee ID">
+                            <input type="text" id="login-empid" placeholder="Employee ID" required>
+                        </div>
+                        <div id="customer-extra-fields" style="display: none;">
+                            <input type="email" id="login-email" class="input_class" placeholder="Email" required>
                         </div>
+                        <input type="password" id="login-password" class="input_class" placeholder="Password" required>
                         <button type="submit" class="btn">Login</button>
                     </form>
                     <p class="switch-text">
                         Don't have an account? <span id="show-signup" class="switch-link">Signup</span>
                     </p>
                 </div>
+                
+                
                 <div id="signup-section" class="auth-section" style="display: none;">
                     <h2>Sign Up</h2>
                     <form id="signup-form">
diff --git a/scripts/auth.js b/scripts/auth.js
index 5d3f642..917baea 100644
--- a/scripts/auth.js
+++ b/scripts/auth.js
@@ -1,33 +1,92 @@
 const API_URL = "https://casserolecoserver.glitch.me/users";
 
 export const auth = {
-    async login(username, password, authType, empid = '') {
-        const response = await fetch(`${API_URL}/${authType}`);
-        const users = await response.json();
-
-        const user = users.find(
-            (u) => u.username === username && u.password === password && (authType !== 'admin' || u.empid === empid)
-        );
-
-        if (user) {
-            sessionStorage.setItem('user', JSON.stringify(user));
-            return user;
-        } else {
-            throw new Error("Invalid credentials.");
+    // Login function for admin or customer
+    async login(identifier, password, authType) {
+        try {
+            // Fetch users based on authType (admin or customer)
+            const response = await fetch(`${API_URL}`);
+            const data = await response.json();
+
+            const users = data[0][authType]; // Choose the correct array based on authType
+
+            // For admin: Find by empid
+            if (authType === 'admin') {
+                const admin = users.find((u) => u.empid === identifier);
+
+                if (!admin) {
+                    throw new Error("Employee ID not found.");
+                }
+
+                if (admin.password !== password) {
+                    throw new Error("Incorrect password.");
+                }
+
+                // Set the admin in sessionStorage
+                sessionStorage.setItem('user', JSON.stringify(admin));
+                return admin;
+            }
+
+            // For customer: Find by email
+            if (authType === 'customer') {
+                const customer = users.find((u) => u.email === identifier);
+
+                if (!customer) {
+                    throw new Error("Email not found.");
+                }
+
+                if (customer.password !== password) {
+                    throw new Error("Incorrect password.");
+                }
+
+                // Set the customer in sessionStorage
+                sessionStorage.setItem('user', JSON.stringify(customer));
+                return customer;
+            }
+
+            throw new Error("Invalid auth type.");
+        } catch (error) {
+            console.error('Login error:', error);
+            throw new Error(error.message || 'Login failed.');
         }
     },
 
+    // Signup function for admin or customer
     async signup(data, authType) {
-        const response = await fetch(`${API_URL}/${authType}`, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(data),
-        });
-
-        if (response.ok) {
-            return response.json();
-        } else {
-            throw new Error("Signup failed.");
+        try {
+            const response = await fetch(`${API_URL}`);
+            const dataFromDB = await response.json();
+
+            const users = dataFromDB[0][authType]; // Array containing admin or customer users
+
+            if (authType === 'admin') {
+                const adminExists = users.find((u) => u.empid === data.empid);
+                if (adminExists) {
+                    throw new Error("Admin with this Employee ID already exists.");
+                }
+                users.push(data); // Add new admin to the admin array
+            } else if (authType === 'customer') {
+                const customerExists = users.find((u) => u.email === data.email);
+                if (customerExists) {
+                    throw new Error("Customer with this email already exists.");
+                }
+                users.push(data); // Add new customer to the customer array
+            }
+
+            const responseUpdate = await fetch(`${API_URL}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(dataFromDB), // Update the whole users object
+            });
+
+            if (responseUpdate.ok) {
+                return responseUpdate.json();
+            } else {
+                throw new Error('Signup failed.');
+            }
+        } catch (error) {
+            console.error('Signup error:', error);
+            throw new Error('Signup failed.');
         }
     },
 
diff --git a/scripts/modal.js b/scripts/modal.js
index 3e6c062..189237f 100644
--- a/scripts/modal.js
+++ b/scripts/modal.js
@@ -1,123 +1,4 @@
-// import { auth } from './auth.js';
-
-// document.addEventListener('DOMContentLoaded', async () => {
-//     const modal = document.getElementById('auth-modal');
-//     const closeModal = document.querySelector('.close-modal');
-//     const loginForm = document.getElementById('login-form');
-//     const signupForm = document.getElementById('signup-form');
-//     const loginSection = document.getElementById('login-section');
-//     const signupSection = document.getElementById('signup-section');
-//     const showSignup = document.getElementById('show-signup');
-//     const showLogin = document.getElementById('show-login');
-
-//     // Additional fields for admin and customer
-//     const loginEmpId = document.getElementById('login-empid');
-//     const signupEmail = document.getElementById('signup-email');
-//     const signupAddress = document.getElementById('signup-address');
-//     const signupPhone = document.getElementById('signup-phone');
-//     const signupEmpId = document.getElementById('signup-empid');
-
-//     // Get authType from the URL
-//     const authType = new URLSearchParams(window.location.search).get('authType');
-//     sessionStorage.setItem('authType', authType);
-
-//     if (modal) {
-//         if (await auth.isLoggedIn()) {
-//             alert("Already Logged In");
-//             window.location.href = "index.html";
-//             return;
-//         }
-
-//         // Configure fields and sections based on authType
-//         const configureFields = () => {
-//             if (authType === 'admin') {
-//                 // Show admin-specific fields
-//                 loginEmpId.style.display = 'block';
-//                 signupEmpId.style.display = 'block';
-
-//                 // Hide customer-specific fields
-//                 signupEmail.style.display = 'none';
-//                 signupAddress.style.display = 'none';
-//                 signupPhone.style.display = 'none';
-//             } else if (authType === 'customer') {
-//                 // Hide admin-specific fields
-//                 loginEmpId.style.display = 'none';
-//                 signupEmpId.style.display = 'none';
-
-//                 // Show customer-specific fields
-//                 signupEmail.style.display = 'block';
-//                 signupAddress.style.display = 'block';
-//                 signupPhone.style.display = 'block';
-//             }
-//         };
-
-//         const openModal = () => {
-//             modal.style.display = 'flex';
-//             document.body.classList.add('modal-open');
-//             configureFields(); // Configure fields based on authType
-//         };
-
-//         const closeAndRedirect = () => {
-//             modal.style.display = 'none';
-//             document.body.classList.remove('modal-open');
-//             window.location.href = 'index.html';
-//         };
-
-//         openModal();
-//         closeModal.addEventListener('click', closeAndRedirect);
-
-//         // Switch between login and signup
-//         showSignup.addEventListener('click', () => {
-//             loginSection.style.display = 'none';
-//             signupSection.style.display = 'block';
-//         });
-
-//         showLogin.addEventListener('click', () => {
-//             signupSection.style.display = 'none';
-//             loginSection.style.display = 'block';
-//         });
-
-//         // Handle login form submission
-//         loginForm.addEventListener('submit', async (e) => {
-//             e.preventDefault();
-//             const username = document.getElementById('login-username').value;
-//             const password = document.getElementById('login-password').value;
-//             const empId = loginEmpId.value; // Optional for admin
-
-//             try {
-//                 const user = await auth.login(username, password, authType, empId);
-//                 alert(`Welcome back, ${user.username}!`);
-//                 closeAndRedirect();
-//             } catch (error) {
-//                 alert(error.message);
-//             }
-//         });
-
-//         // Handle signup form submission
-//         signupForm.addEventListener('submit', async (e) => {
-//             e.preventDefault();
-//             const username = document.getElementById('signup-username').value;
-//             const password = document.getElementById('signup-password').value;
-//             const email = signupEmail.value;
-//             const address = signupAddress.value;
-//             const phone = signupPhone.value;
-//             const empId = signupEmpId.value; // Optional for admin
-
-//             const data =
-//                 authType === 'admin'
-//                     ? { username, password, empId }
-//                     : { username, password, email, address, phone };
-
-//             try {
-//                 await auth.signup(data, authType);
-//                 alert(`Account created for ${username}!`);
-//                 closeAndRedirect();
-//             } catch (error) {
-//                 alert(error.message);
-//             }
-//         });
-//     }
-// });
+import { auth } from './auth.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('auth-modal');
@@ -126,27 +7,46 @@ document.addEventListener('DOMContentLoaded', () => {
     const signupSection = document.getElementById('signup-section');
     const showSignup = document.getElementById('show-signup');
     const showLogin = document.getElementById('show-login');
+    const loginForm = document.getElementById('login-form');
+    const signupForm = document.getElementById('signup-form');
+    
+    // Check if user is already logged in
+    if (sessionStorage.getItem("user") != null) {
+        alert("Already Logged In");
+        window.location.href = "index.html";
+        return;
+    }
 
-    // AuthType logic
+    // Get authType from URL or sessionStorage, and set it in sessionStorage
     const authType = new URLSearchParams(window.location.search).get('authType') || sessionStorage.getItem('authType');
     sessionStorage.setItem('authType', authType);
 
-    // Adjust modal fields based on authType
+    // Elements for the extra fields (admin or customer)
     const adminExtraFields = document.getElementById('admin-extra-fields');
     const customerExtraFields = document.getElementById('customer-extra-fields');
     const adminExtraSignupFields = document.getElementById('admin-extra-signup-fields');
 
+    // Adjust modal fields based on authType
     if (authType === 'admin') {
         adminExtraFields.style.display = 'block';
         adminExtraSignupFields.style.display = 'block';
+        const email = document.getElementById("login-email");
+        email.removeAttribute('required');
+        email.style.display = 'none';
+        email.classList.remove('input_class');
         customerExtraFields.style.display = 'none';
     } else if (authType === 'customer') {
         customerExtraFields.style.display = 'block';
+        const empid = document.getElementById('login-empid');
+        empid.removeAttribute('required');
+        empid.style.display = 'none';
+        empid.classList.remove('input_class');
         adminExtraFields.style.display = 'none';
         adminExtraSignupFields.style.display = 'none';
+        adminExtraSignupFields.removeAttribute('required');
     }
 
-    // Open modal
+    // Open the modal
     modal.style.display = 'flex';
     document.body.classList.add('modal-open');
 
@@ -157,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
         window.location.href = 'index.html';
     });
 
-    // Switch between Login and Signup
+    // Switch between Login and Signup sections
     showSignup.addEventListener('click', () => {
         loginSection.style.display = 'none';
         signupSection.style.display = 'block';
@@ -167,4 +67,49 @@ document.addEventListener('DOMContentLoaded', () => {
         signupSection.style.display = 'none';
         loginSection.style.display = 'block';
     });
+
+    // Handle login form submission
+    loginForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const identifier = authType === 'admin'
+            ? document.getElementById('login-empid').value
+            : document.getElementById('login-email').value;
+        const password = document.getElementById('login-password').value;
+
+        try {
+            const user = await auth.login(identifier, password, authType);
+            alert(`Welcome back, ${user.username}!`);
+            closeAndRedirect();
+        } catch (error) {
+            alert(error.message);
+        }
+    });
+
+    // Handle signup form submission
+    signupForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const email = document.getElementById('signup-email').value;
+        const password = document.getElementById('signup-password').value;
+        const empId = document.getElementById('signup-empid') ? document.getElementById('signup-empid').value : ''; // Only for admin
+
+        const data =
+            authType === 'admin'
+                ? { empid: empId, password }
+                : { email, password };
+
+        try {
+            await auth.signup(data, authType);
+            alert(`Account created for ${authType === 'admin' ? empId : email}!`);
+            closeAndRedirect();
+        } catch (error) {
+            alert(error.message);
+        }
+    });
+
+    // Redirect after successful login/signup
+    const closeAndRedirect = () => {
+        modal.style.display = 'none';
+        document.body.classList.remove('modal-open');
+        window.location.href = 'index.html';
+    };
 });
diff --git a/styles/index.css b/styles/index.css
index ea0d082..ef0f284 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -282,12 +282,15 @@
 #intro_div_sec{
     display: grid;
     grid-template-columns: repeat(2,1fr) ;
+    
 }
 
 /* Testimonial Section */
 .testimonials {
-    height: 396px;
-    width: 630px;
+    /* height: 396px;
+    width: 630px; */
+    width: 100%;
+    height: 100%;
     text-align: center;
     padding: 27px;
     background: linear-gradient(to bottom right, #f2dcb7, #d99836);
@@ -306,8 +309,8 @@
 
 .carousel {
     position: relative;
-    overflow: hidden;
-    max-width: 800px;
+    /* width: 100%;
+    height: 100%; */
     margin: 0 auto;
 }
 
@@ -439,12 +442,12 @@
     }
 
     .cta-section h2 {
-        font-size: 1rem;
+        font-size: 1.9rem;
     }
 
     .testimonials {
         width: 100%;
-        height: 100%;
+        height: fit-content;
     }
     .cta-section {
         width: 100%;
@@ -455,14 +458,14 @@
     .cta-content{
         justify-content: center;
         margin: auto;
+        padding-top: 13px;
         text-align: center;
         align-items: center;
-        margin-top: 13%;
         margin-bottom: 15px;
     }
     .btn-cta{
-        height: 55px;
-        width: 210px;
+        height: 45px;
+        width: 201px;
         font-size:medium !important;
         animation: none;
         justify-content: center;
@@ -474,7 +477,7 @@
     }
 }
 
-@media (min-width: 100px) and (max-width: 767px){
+@media screen and (min-width: 100px) and (max-width: 767px){
     .features {
         padding: 0px;
         grid-template-columns: repeat(1,1fr);
@@ -498,32 +501,29 @@
         grid-template-columns: repeat(1,1fr) ;
     }
 
-    .cta-section h2 {
-        font-size: 0.8rem;
-    }
-
     .testimonials {
         width: 100%;
-        height: 100%;
+        height:fit-content;
     }
     .cta-section {
         width: 100%;
         height: 100%;
         margin-bottom: 5px;
         padding-bottom: 5px;
+        margin-top: 5%;
     }
 
     .btn-cta{
         height: 35px;
-        width: 190px;
-        font-size:small !important;
+        width: 185px;
+        font-size:0.8rem !important;
         animation: none;
         justify-content: center;
         margin: auto;
         text-align: center;
         align-items: center;
-        margin-bottom: 5px;
-        padding-bottom: 5px;
+        /* margin-bottom: 5px; */
+        /* padding-bottom: 5px; */
     }
 
     .cta-content{
@@ -531,7 +531,6 @@
         margin: auto;
         text-align: center;
         align-items: center;
-        margin-top: 5%;
         margin-bottom: 5px;
         padding-bottom: 5px;
     }
diff --git a/styles/navbar.css b/styles/navbar.css
index 1e0e922..b627cd7 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -91,6 +91,10 @@
 .dropdown {
     position: relative;
     display: inline-block;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: auto;
 }
 
 /* Dropdown button styling */
@@ -100,16 +104,20 @@
     font-size: 20px;
     border: none;
     cursor: pointer;
-    padding: 10px 20px;
     border-radius: 5px;
     position: relative;
     z-index: 1;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    margin: auto;
 }
 
 /* Dropdown container */
 .dropdown {
     position: relative;
     display: inline-block;
+    margin-bottom: 15px;
 }
 
 /* Dropdown content */