diff --git a/server/package.json b/server/package.json
index 9875b1c..371e12c 100644
--- a/server/package.json
+++ b/server/package.json
@@ -21,6 +21,7 @@
     "express-async-handler": "^1.2.0",
     "faker": "^5.5.3",
     "jsonwebtoken": "^9.0.2",
+    "mongodb": "^6.7.0",
     "mongoose": "^7.6.13",
     "multer": "^1.4.5-lts.1",
     "nodemailer": "^6.9.13",
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 437efda..a6a34ba 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -86,6 +86,7 @@ const Navbar = () => {
           </div>
         </div>
       </div>
+      </div>
       <AnimatePresence>
         {isOpen && (
           <motion.div
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 9767f7e..bc4c187 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,25 +1,23 @@
-
 import React, { useState, useEffect } from "react";
-
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import axios from "axios";
-
 import logo from "../assets/logo2.png";
 import Loader from "../components/Loader/Loader";
 import { useAuth } from "../authContext";
+
 function Login() {
   const [formData, setFormData] = useState({
     email: "",
-    accountType : "",
+    accountType: "",
     password: "",
   });
 
   const { checkAuthentication } = useAuth();
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [rememberMe, setRememberMe] = useState(false); 
+  const [rememberMe, setRememberMe] = useState(false);
 
   const navigate = useNavigate();
 
@@ -41,43 +39,32 @@ function Login() {
     }));
   }
 
-
   function rememberMeHandler(event) {
     setRememberMe(event.target.checked);
   }
 
   async function submitHandler(event) {
     event.preventDefault();
+    setLoading(true);
 
+    try {
+      const apiUrl =
+        formData.accountType === "User"
+          ? `${process.env.REACT_APP_BASE_URL}/studentLogin`
+          : `${process.env.REACT_APP_BASE_URL}/canteenLogin`;
 
-    if(formData.accountType === "User"){
-
-      const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentLogin`;
-      // const apiUrl = `http://localhost:4000/api/v1/studentLogin`;
+      const response = await axios.post(apiUrl, formData);
 
-      axios.post(apiUrl , formData)
-      .then((response)=>{
-        toast.success("User Logged in ");
+      toast.success("User Logged in");
+      if (formData.accountType === "User") {
         navigate("/home");
-      })
-      .catch((error)=>{
-        toast.error("Failed to login")
-      });
-    }
-
-    else{
-
-      const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenLogin`;
-
-      axios.post(apiUrl , formData)
-      .then((response)=>{
-        toast.success("User Logged in ");
+      } else {
         navigate(`/section/${response.data.cantId}`);
-      })
-      .catch((error)=>{
-        toast.error("Failed to login")
-      });
-
+      }
+    } catch (error) {
+      toast.error("Failed to login");
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -89,10 +76,8 @@ function Login() {
         <div className="relative h-screen md:flex">
           <div className="absolute top-0 right-0 m-3">
             <Link to="/contact">
-              <button
-                className="hover:shadow-blue-950 hover:shadow-sm text-white py-1 px-2 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
-              >
-                <img src="/c4.png" className="h-10 w-10" />
+              <button className="hover:shadow-blue-950 hover:shadow-sm text-white py-1 px-2 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110">
+                <img src="/c4.png" className="h-10 w-10" alt="Contact" />
               </button>
             </Link>
           </div>
@@ -108,43 +93,6 @@ function Login() {
             <div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
             <div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
           </div>
-
-    <div className="h-screen md:flex">
-
-      <div className="relative overflow-hidden md:flex w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">
-
-        <div>
-          <img src={logo} alt="logo" className="w-48 h-12 mb-2"/>
-          <p className="text-white mt-1 ml-3">Connecting You to Your College Canteens</p>
-        </div>
-
-        <div className="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
-        <div className="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
-        <div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
-        <div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
-
-      </div>
-
-      <div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
-
-        <form className="bg-white p-8 rounded shadow-lg w-80" onSubmit={submitHandler}>
-
-          <h1 className="text-gray-800 font-bold text-2xl mb-1">Hello Again!</h1>
-          <p className="text-sm font-normal text-gray-600 mb-7">Welcome Back</p>
-
-          <div className="mb-4">
-            <input
-              required
-              className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
-              type="email"
-              placeholder="Email"
-              name="email"
-              value={formData.email}
-              onChange={changeHandler}
-            />
-          </div>
-
-
           <div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
             <form
               className="bg-white p-8 rounded shadow-lg w-80"
@@ -156,7 +104,6 @@ function Login() {
               <p className="text-sm font-normal text-gray-600 mb-7">
                 Welcome Back
               </p>
-
               <div className="mb-4">
                 <input
                   required
@@ -168,7 +115,6 @@ function Login() {
                   onChange={changeHandler}
                 />
               </div>
-
               <div className="mb-4">
                 <select
                   required
@@ -184,7 +130,6 @@ function Login() {
                   <option value="Canteen">Canteen</option>
                 </select>
               </div>
-
               <div className="relative mb-4">
                 <input
                   required
@@ -206,7 +151,6 @@ function Login() {
                   )}
                 </span>
               </div>
-
               <div className="remember-me mb-4">
                 <input
                   type="checkbox"
@@ -216,58 +160,29 @@ function Login() {
                 />
                 <label htmlFor="remember-me"> Remember me</label>
               </div>
-
               <div className="mb-4 flex justify-center text-red-400">
                 <Link to="/forgotPassword">
-                  <h1 className="font-medium">Forgot Password ?</h1>
+                  <h1 className="font-medium">Forgot Password?</h1>
                 </Link>
               </div>
-
               <button
                 type="submit"
                 className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2"
                 disabled={loading}
-
               >
-                <option value="" disabled selected hidden>Login as</option>
-                <option value="User">User</option>
-                <option value="Canteen">Canteen</option>
-              </select>
-          </div>
-         
-          <div className="relative mb-4">
-            <input
-              required
-              className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
-              type={showPassword ? "text" : "password"}
-              placeholder="Password"
-              name="password"
-              value={formData.password}
-              onChange={changeHandler}
-            />
-            <span
-              className="absolute right-3 top-3 cursor-pointer"
-              onClick={() => setShowPassword((prev) => !prev)}
-            >
-              {showPassword ? <AiOutlineEye size={20} /> : <AiOutlineEyeInvisible size={20} />}
-            </span>
+                Login
+              </button>
+              <Link to="/signup">
+                <span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">
+                  Don't have an account? Sign Up
+                </span>
+              </Link>
+            </form>
           </div>
-
-          <button type="submit" className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2">
-            Login
-          </button>
-
-          <Link to="/signup">
-            <span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">Don't have an account? Sign Up</span>
-          </Link>
-          
-        </form>
-
-      </div>
-
-    </div>
+        </div>
+      )}
+    </>
   );
 }
 
 export default Login;
-
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
index afb10d0..582057a 100644
--- a/src/pages/Signup.jsx
+++ b/src/pages/Signup.jsx
@@ -1,14 +1,17 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 import { toast } from "react-hot-toast";
 import axios from "axios";
-import logo from "../assets/logo2.png"
+import logo from "../assets/logo2.png";
 import Icon from 'react-icons-kit';
-import { arrows_circle_check } from 'react-icons-kit/linea/arrows_circle_check'
-import { arrows_exclamation } from 'react-icons-kit/linea/arrows_exclamation'
+import { arrows_circle_check } from 'react-icons-kit/linea/arrows_circle_check';
+import { arrows_exclamation } from 'react-icons-kit/linea/arrows_exclamation';
+import { useAuth } from "../authContext.js";
 
 function Signup() {
+  const { isAuthenticated, signUp } = useAuth();
+
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -18,60 +21,40 @@ function Signup() {
     confirmPassword: "",
   });
 
-  const [showconfirmPassword, setshowconfirmPassword] = useState(false);
-
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const [lowerValidated, setLowerValidated] = useState(false);
   const [upperValidated, setUpperValidated] = useState(false);
   const [numberValidated, setNumberValidated] = useState(false);
   const [specialValidated, setSpecialValidated] = useState(false);
   const [lengthValidated, setLengthValidated] = useState(false);
-
+  const [loading, setLoading] = useState(false);
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate('/home');
+    }
+  }, [isAuthenticated, navigate]);
+
   function PasswordChecker(event) {
     const lower = new RegExp('(?=.*[a-z])');
     const upper = new RegExp('(?=.*[A-Z])');
     const number = new RegExp('(?=.*[0-9])');
     const special = new RegExp('(?=.*[!@#\$%\^&\*])');
-    const length = new RegExp('(?=.{8,})')
+    const length = new RegExp('(?=.{8,})');
     const value = event.target.value;
-    if (lower.test(value)) {
-      setLowerValidated(true);
-    }
-    else {
-      setLowerValidated(false);
-    }
-    if (upper.test(value)) {
-      setUpperValidated(true);
-    }
-    else {
-      setUpperValidated(false);
-    }
-    if (number.test(value)) {
-      setNumberValidated(true);
-    }
-    else {
-      setNumberValidated(false);
-    }
-    if (special.test(value)) {
-      setSpecialValidated(true);
-    }
-    else {
-      setSpecialValidated(false);
-    }
-    if (length.test(value)) {
-      setLengthValidated(true);
-    }
-    else {
-      setLengthValidated(false);
-    }
 
+    setLowerValidated(lower.test(value));
+    setUpperValidated(upper.test(value));
+    setNumberValidated(number.test(value));
+    setSpecialValidated(special.test(value));
+    setLengthValidated(length.test(value));
 
     setFormData((prevData) => ({
       ...prevData,
-      [event.target.name]: event.target.value,
+      [event.target.name]: value,
     }));
   }
 
@@ -82,52 +65,35 @@ function Signup() {
     }));
   }
 
-  function submitHandler(event) {
+  async function submitHandler(event) {
     event.preventDefault();
-    console.log("ENV FILE",process.env.REACT_APP_BASE_URL);
+    console.log("ENV FILE", process.env.REACT_APP_BASE_URL);
 
     if (lowerValidated && upperValidated && numberValidated && specialValidated && lengthValidated) {
-      if (formData.accountType === "User") {
+      const apiUrl = formData.accountType === "User"
+        ? `${process.env.REACT_APP_BASE_URL}/studentSignup`
+        : `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
 
-        const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentSignup`;
-        // const apiUrl = `http://localhost:3000/api/v1/studentSignUp`;
-        try {
-          setLoading(true);
+      try {
+        setLoading(true);
 
-          const response = await axios.post(apiUrl, formData);
+        const response = await axios.post(apiUrl, formData);
 
-          toast.success("Account Created Successfully!");
+        toast.success("Account Created Successfully!");
+        if (formData.accountType === "User") {
           navigate("/");
-        } catch (error) {
-          const errorMessage =
-            error.response?.data?.message ||
-            "Failed to login. Please try again.";
-          toast.error(errorMessage);
-          console.log("This is our error ", error);
-        } finally {
-          setLoading(false);
         }
-      } else {
-        const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
-        // const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenSignup`;
-
-        try {
-          setLoading(true);
-
-          const response = await axios.post(apiUrl, formData);
+        if (formData.accountType === "Canteen") {
           const token = response.data.token;
-
-          localStorage.setItem("token", token);
-          localStorage.setItem("canteenId", response.data.cantId);
-          toast.success("Account Created Successfully!");
-          navigate(`/section/${response.data.cantId}`);
-        } catch (error) {
-          toast.error("Failed To Create Account. Please try again.");
-          console.error(error);
-        } finally {
-          setLoading(false);
+          signUp(token);
+          navigate("/home");
         }
-
+      } catch (error) {
+        const errorMessage = error.response?.data?.message || "Failed to create account. Please try again.";
+        toast.error(errorMessage);
+        console.error(error);
+      } finally {
+        setLoading(false);
       }
     } else {
       toast.error("Password must pass all the criteria");
@@ -135,30 +101,27 @@ function Signup() {
   }
 
   return (
-    <div className="h-screen md:flex" >
-      <div className="relative overflow-hidden md:flex w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">
+    <div className="min-h-screen flex flex-col md:flex-row">
+      <div className="md:flex w-full md:w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">
         <div>
           <img src={logo} alt="logo" className="w-48 h-12 mb-2" />
-          <p className="text-white mt-1 ml-3">
-            Connecting You to Your College Canteens
-          </p>
+          <p className="text-white mt-1 ml-3">Connecting You to Your College Canteens</p>
         </div>
-
         <div className="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
         <div className="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
         <div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
         <div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
       </div>
 
-      <div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
+      <div className="flex flex-col justify-center items-center w-full md:w-1/2 py-10 bg-white">
         <form
-          className="bg-white p-8 rounded shadow-lg w-80"
+          className="bg-white p-8 rounded shadow-lg w-full max-w-md overflow-y-auto"
           onSubmit={submitHandler}
         >
-          <h1 className="text-gray-800 font-bold text-2xl mb-1">
+          <h1 className="text-gray-800 font-bold text-2xl mb-1 text-center md:text-left">
             Hello There!
           </h1>
-          <p className="text-sm font-normal text-gray-600 mb-7">
+          <p className="text-sm font-normal text-gray-600 mb-7 text-center md:text-left">
             Create an Account
           </p>
 
@@ -206,7 +169,7 @@ function Signup() {
               value={formData.accountType}
               className="mt-1 p-2 w-full border rounded-2xl"
             >
-              <option value="" disabled selected hidden>
+              <option value="" disabled hidden>
                 Login as
               </option>
               <option value="User">User</option>
@@ -228,143 +191,66 @@ function Signup() {
               className="absolute right-3 top-3 cursor-pointer"
               onClick={() => setShowPassword((prev) => !prev)}
             >
-              {showPassword ? (
-                <AiOutlineEye size={20} />
-              ) : (
-                <AiOutlineEyeInvisible size={20} />
-              )}
+              {showPassword ? <AiOutlineEyeInvisible size={20} /> : <AiOutlineEye size={20} />}
             </span>
           </div>
 
+          <div className="relative mb-4">
+            <input
+              required
+              className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
+              type={showConfirmPassword ? "text" : "password"}
+              placeholder="Confirm Password"
+              name="confirmPassword"
+              value={formData.confirmPassword}
+              onChange={changeHandler}
+            />
+            <span
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer"
+              onClick={() => setShowConfirmPassword((prev) => !prev)}
+            >
+              {showConfirmPassword ? <AiOutlineEyeInvisible size={20} /> : <AiOutlineEye size={20} />}
+            </span>
+          </div>
 
-                <div className="relative mb-4">
-                  <input
-                    required
-                    className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
-                    type={showconfirmPassword ? "text" : "Password"}
-                    placeholder="Confirm Password"
-                    name="confirmPassword"
-                    value={formData.confirmPassword}
-                    onChange={changeHandler}
-                  />
-                  <span
-                    className="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer"
-                    onClick={() => setshowconfirmPassword((prev) => !prev)}
-                  >
-                    {showconfirmPassword ? (
-                      <AiOutlineEye size={20} />
-                    ) : (
-                      <AiOutlineEyeInvisible size={20} />
-                    )}
-                  </span>
-                </div>
-                <button
-                  type="submit"
-                  className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2"
-                  disabled={loading}
-                >
-                  {loading ? "Loading..." : "Sign Up"}
-                </button>
-
-
-          <Link to="/login">
-            <span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">Already have an account? Login</span>
-          </Link>
-
-          {/* 
-            
-            Validation Checks for password
-            
-          */}
-
-          <main className='tracker-box text-sm font-normal text-red-600'>
-            <div className={lowerValidated ? 'validated text-green-600' : 'not-validated'}>
-              {lowerValidated ? (
-                <span className='list-icon green'>
-                  <Icon icon={arrows_circle_check} />
-                </span>
-              ) : (
-                <span className='list-icon'>
-                  <Icon icon={arrows_exclamation} />
-                </span>
-              )}
-              At least one lowercase letter
+          <div className="mb-4">
+            <div className={`flex items-center ${lowerValidated ? "text-green-600" : "text-red-500"}`}>
+              <span className="mr-2">{lowerValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
+              <p className="text-xs">At least one lowercase letter</p>
             </div>
-            <div className={upperValidated ? 'validated text-green-600' : 'not-validated'}>
-              {upperValidated ? (
-                <span className='list-icon green'>
-                  <Icon icon={arrows_circle_check} />
-                </span>
-              ) : (
-                <span className='list-icon'>
-                  <Icon icon={arrows_exclamation} />
-                </span>
-              )}
-              At least one uppercase letter
+            <div className={`flex items-center ${upperValidated ? "text-green-600" : "text-red-500"}`}>
+              <span className="mr-2">{upperValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
+              <p className="text-xs">At least one uppercase letter</p>
             </div>
-            <div className={numberValidated ? 'validated text-green-600' : 'not-validated'}>
-              {numberValidated ? (
-                <span className='list-icon green'>
-                  <Icon icon={arrows_circle_check} />
-                </span>
-              ) : (
-                <span className='list-icon'>
-                  <Icon icon={arrows_exclamation} />
-                </span>
-              )}
-              At least one number
+            <div className={`flex items-center ${numberValidated ? "text-green-600" : "text-red-500"}`}>
+              <span className="mr-2">{numberValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
+              <p className="text-xs">At least one number</p>
             </div>
-            <div className={specialValidated ? 'validated text-green-600' : 'not-validated'}>
-              {specialValidated ? (
-                <span className='list-icon green'>
-                  <Icon icon={arrows_circle_check} />
-                </span>
-              ) : (
-                <span className='list-icon'>
-                  <Icon icon={arrows_exclamation} />
-                </span>
-              )}
-              At least one special character
+            <div className={`flex items-center ${specialValidated ? "text-green-600" : "text-red-500"}`}>
+              <span className="mr-2">{specialValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
+              <p className="text-xs">At least one special character</p>
             </div>
-            <div className={lengthValidated ? 'validated text-green-600' : 'not-validated'}>
-              {lengthValidated ? (
-                <span className='list-icon green'>
-                  <Icon icon={arrows_circle_check} />
-                </span>
-              ) : (
-                <span className='list-icon'>
-                  <Icon icon={arrows_exclamation} />
-                </span>
-              )}
-              At least 8 characters
+            <div className={`flex items-center ${lengthValidated ? "text-green-600" : "text-red-500"}`}>
+              <span className="mr-2">{lengthValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
+              <p className="text-xs">Minimum 8 characters</p>
             </div>
-          </main>
-
+          </div>
+          <div className="flex justify-center">
+          <button
+            className={`w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2 ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
+            disabled={loading}
+            type="submit"
+          >
+            {loading ? "Signing up..." : "Sign Up"}
+          </button>
+          </div>
+          <div className="mt-4 text-center">
+            <Link to="/" className="text-gray-600 text-sm font-semibold hover:underline">
+              Already have an account? Log In
+            </Link>
+          </div>
         </form>
       </div>
-      <style jsx global>
-        {`
-                .tracker-box{
-                  font-size: 0.7rem;
-                  letter-spacing: 0.09em;
-                  padding: 15px;
-                  border-radius: 5px;
-                  margin-top: 5px;
-                }
-                
-                .tracker-box div{
-                  margin: 5px 0;
-                }
-                
-                .list-icon{
-                  padding-right: 0.3rem;
-                }
-                
-                .list-icon.green{
-                  color: #006400;
-                }
-                `}
-      </style>
     </div>
   );
 }