diff --git a/package-lock.json b/package-lock.json
index 0199ad4..651042e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,7 +53,7 @@
         "rimraf": "^5.0.7",
         "svgo": "^3.3.2",
         "tailwindcss": "^3.4.3",
-        "vite": "^5.3.3",
+        "vite": "^5.3.5",
         "webpack": "^5.92.1",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4"
@@ -21534,9 +21534,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
-      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
+      "version": "5.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
+      "integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
diff --git a/package.json b/package.json
index bf86fb7..c90b2d4 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "rimraf": "^5.0.7",
     "svgo": "^3.3.2",
     "tailwindcss": "^3.4.3",
-    "vite": "^5.3.3",
+    "vite": "^5.3.5",
     "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
diff --git a/src/Components/Login/Login.css b/src/Components/Login/Login.css
index 551acde..958420f 100644
--- a/src/Components/Login/Login.css
+++ b/src/Components/Login/Login.css
@@ -3,7 +3,7 @@
   justify-content: center;
   align-items: center;
   height: auto;
-  margin-top: 100px; /* Adjust this value to move the login box down */
+  margin-top: 100px;
   padding-bottom: 10px;
 }
 
@@ -12,93 +12,94 @@
   background-image: linear-gradient(315deg, #ffffff 0%, #91a6ff 74%);
   width: 400px;
   margin: 0 auto;
-  padding: 10px 10px 20px 10px;
+  padding: 20px;
   border: 1px solid #ccc;
   border-radius: 20px;
   background-color: #fff;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.login-container > input {
-  outline: none;
-}
-
-.input {
-  padding: 20px;
-  border: none;
-}
-
 h2 {
   font-size: 28px;
-  margin-bottom: 10px;
-  padding: 20px;
+  margin-bottom: 20px;
+  padding: 10px 0;
+}
+
+.input-container {
+  width: 100%;
+  position: relative;
+  margin-bottom: 5px;
 }
 
 input {
   width: 100%;
-  margin-bottom: 20px;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid #ccc;
   border-radius: 10px;
   box-sizing: border-box;
-  border: none;
   outline: none;
 }
 
 button {
-  width: 50%;
-  padding: 20px;
+  width: 90%;
+  padding: 15px;
   border: none;
   border-radius: 10px;
   background-color: #007bff;
   color: #fff;
   cursor: pointer;
+  font-size: 16px;
+  margin-bottom: 20px;
 }
 
 button:hover {
-  background-color: #007bff;
+  background-color: #0056b3;
 }
 
 .login-container p {
   margin-top: 10px;
   text-align: center;
-  padding-bottom: 20px;
+  padding-bottom: 10px;
 }
 
 p a {
   color: #007bff;
   text-decoration: none;
-  margin-top: 12px;
 }
 
 p a:hover {
   color: #0056b3;
   text-decoration: underline;
 }
+
 .googlelogin {
-  padding: 20px;
-  margin-top: 12px;
-  width: 50%;
-  text-align: center;
-  margin-left: 50px;
+  width: 100%;
+  justify-content: center;
+  margin-top: 10px;
+}
+
+.googlelogin button:hover,
+.googlelogin div:hover {
+  background-color: #dbedf8b9;
+  transition: background-color 0.3s ease;
 }
+
 .warningmsg {
-  margin: 0;
+  margin: 3px 0;
   text-align: left;
-  padding: 0;
-  margin-bottom: 10px;
-  /* justify-content: center;
-  display: flex; */
+  color: red;
 }
+
 .eye {
   float: right;
-  left:-9px;
+  left: -9px;
   margin-top: -45px;
+  margin-right: 10px;
   position: relative;
-  z-index: 2;
-  width: 14px; /*Desired width*/
-  height: 14px; /*Desired height*/
+  width: 14px;
+  height: 14px;
 }
+
 .eye:hover {
   color: #007efc;
   cursor: pointer;
diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx
index 466ac95..d0f0bd9 100644
--- a/src/Components/Login/Login.jsx
+++ b/src/Components/Login/Login.jsx
@@ -1,25 +1,20 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useNavigate, NavLink } from "react-router-dom";
 import "./Login.css";
 import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";    /*react libraries used 
-                                                                       for importing eye icon */
-import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
 
-
-const Login = () => {
+const Login = ({ isDarkMode }) => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [warnings, setWarnings] = useState({ email: "", password: "" });
-  const [isVisible,setVisible] = useState(false);
+  const [isVisible, setVisible] = useState(false);
   const navigate = useNavigate();
 
-  const eye = <FontAwesomeIcon icon={faEye} />;
-
-  const  togglePasswordFunction=()=>{      //toggling function for visibility of password
-    setVisible(isVisible?false:true)
+  const togglePasswordFunction = () => {
+    setVisible(!isVisible);
   };
-  
 
   const handleLogin = () => {
     let emailWarning = "";
@@ -57,12 +52,21 @@ const Login = () => {
     console.log("Login Failed");
   };
 
+  useEffect(() => {
+    const body = document.body;
+    if (isDarkMode) {
+      body.classList.add("dark-mode");
+    } else {
+      body.classList.remove("dark-mode");
+    }
+  }, [isDarkMode]);
+
   return (
     <GoogleOAuthProvider clientId="784513715091-aa0p18bmv854re0amstgj2up3656cvsd.apps.googleusercontent.com">
       <div className="login-outerContainer">
-        <div className="login-container">
+        <div className={`login-container ${isDarkMode ? 'dark-mode' : ''}`}>
           <h2>Login</h2>
-          <div className="input">
+          <div className="input-container">
             <input
               type="email"
               placeholder="Email"
@@ -78,41 +82,48 @@ const Login = () => {
               }}
             />
             {warnings.email && <p style={{ color: "red" }} className="warningmsg">{warnings.email}</p>}
-           
-            <input
-              type={ isVisible ? "text" : "password"}
-              className="pasword"
-              placeholder="Password"
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" }));
-              }}
-              onBlur={(e) => {
-                if (!e.target.value) {
-                  setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" }));
-                }
-              }}
-            />
-           <i className = "eye" onClick={togglePasswordFunction}>{eye}</i>{" "} 
 
+            <div className="input-container">
+              <input
+                type={isVisible ? "text" : "password"}
+                placeholder="Password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.target.value);
+                  setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" }));
+                }}
+                onBlur={(e) => {
+                  if (!e.target.value) {
+                    setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" }));
+                  }
+                }}
+              />
+              <i
+                className="eye"
+                onClick={togglePasswordFunction}
+              >
+                <FontAwesomeIcon icon={isVisible ? faEyeSlash : faEye} />
+              </i>
+            </div>
             {warnings.password && <p style={{ color: "red" }} className="warningmsg">{warnings.password}</p>}
           </div>
           <button onClick={handleLogin}>Login</button>
           <p>
-          Forgot your password? <NavLink to="/forgot-password">Reset it here</NavLink>
-        </p>
+            Forgot your password? <NavLink to="/forgot-password">Reset it here</NavLink>
+          </p>
           <p>
             Don't have an account? <NavLink to="/signup">Sign up</NavLink>
           </p>
-          <GoogleLogin
-            onSuccess={handleGoogleLoginSuccess}
-            onError={handleGoogleLoginFailure}
-          />
+          <div className="googlelogin">
+            <GoogleLogin
+              onSuccess={handleGoogleLoginSuccess}
+              onError={handleGoogleLoginFailure}
+            />
+          </div>
         </div>
       </div>
     </GoogleOAuthProvider>
   );
 };
 
-export default Login;
+export default Login;
\ No newline at end of file