diff --git a/client/package-lock.json b/client/package-lock.json
index 3d421da..2e82a0c 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1778,6 +1778,7 @@
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1840,8 +1841,7 @@
     "node_modules/add-px-to-style": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/add-px-to-style/-/add-px-to-style-1.0.0.tgz",
-      "integrity": "sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew==",
-      "license": "MIT"
+      "integrity": "sha512-YMyxSlXpPjD8uWekCQGuN40lV4bnZagUwqa2m/uFv1z/tNImSk9fnXVMUI5qwME/zzI3MMQRvjZ+69zyfSSyew=="
     },
     "node_modules/ajv": {
       "version": "6.12.6",
@@ -2696,7 +2696,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/dom-css/-/dom-css-2.1.0.tgz",
       "integrity": "sha512-w9kU7FAbaSh3QKijL6n59ofAhkkmMJ31GclJIz/vyQdjogfyxcB6Zf8CZyibOERI5o0Hxz30VmJS7+7r5fEj2Q==",
-      "license": "MIT",
       "dependencies": {
         "add-px-to-style": "1.0.0",
         "prefix-style": "2.0.1",
@@ -4769,8 +4768,7 @@
     "node_modules/performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-      "license": "MIT"
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "node_modules/picocolors": {
       "version": "1.1.0",
@@ -4991,8 +4989,7 @@
     "node_modules/prefix-style": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/prefix-style/-/prefix-style-2.0.1.tgz",
-      "integrity": "sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ==",
-      "license": "MIT"
+      "integrity": "sha512-gdr1MBNVT0drzTq95CbSNdsrBDoHGlb2aDJP/FoY+1e+jSDPOb1Cv554gH2MGiSr2WTcXi/zu+NaFzfcHQkfBQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -5046,7 +5043,6 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
       "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-      "license": "MIT",
       "dependencies": {
         "performance-now": "^2.1.0"
       }
@@ -5066,7 +5062,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/react-custom-scrollbars/-/react-custom-scrollbars-4.2.1.tgz",
       "integrity": "sha512-VtJTUvZ7kPh/auZWIbBRceGPkE30XBYe+HktFxuMWBR2eVQQ+Ur6yFJMoaYcNpyGq22uYJ9Wx4UAEcC0K+LNPQ==",
-      "license": "MIT",
       "dependencies": {
         "dom-css": "^2.0.0",
         "prop-types": "^15.5.10",
@@ -5946,7 +5941,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-camel-case/-/to-camel-case-1.0.0.tgz",
       "integrity": "sha512-nD8pQi5H34kyu1QDMFjzEIYqk0xa9Alt6ZfrdEMuHCFOfTLhDG5pgTu/aAM9Wt9lXILwlXmWP43b8sav0GNE8Q==",
-      "license": "MIT",
       "dependencies": {
         "to-space-case": "^1.0.0"
       }
@@ -5962,8 +5956,7 @@
     "node_modules/to-no-case": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/to-no-case/-/to-no-case-1.0.2.tgz",
-      "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg==",
-      "license": "MIT"
+      "integrity": "sha512-Z3g735FxuZY8rodxV4gH7LxClE4H0hTIyHNIHdk+vpQxjLm0cwnKXq/OFVZ76SOQmto7txVcwSCwkU5kqp+FKg=="
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
@@ -5981,7 +5974,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/to-space-case/-/to-space-case-1.0.0.tgz",
       "integrity": "sha512-rLdvwXZ39VOn1IxGL3V6ZstoTbwLRckQmn/U8ZDLuWwIXNpuZDhQ3AiRUlhTbOXFVE9C+dR51wM0CBDhk31VcA==",
-      "license": "MIT",
       "dependencies": {
         "to-no-case": "^1.0.0"
       }
diff --git a/client/src/components/Login.jsx b/client/src/components/Login.jsx
index 5de7f06..495c3c3 100644
--- a/client/src/components/Login.jsx
+++ b/client/src/components/Login.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../middleware/AuthContext";
-import { FaUserCircle } from "react-icons/fa";
+import { FaUserCircle, FaEye, FaEyeSlash } from "react-icons/fa";
 import { FaSpinner } from "react-icons/fa";
 
 const InputField = ({ label, type, name, value, onChange, error, placeholder }) => (
@@ -26,7 +26,7 @@ const InputField = ({ label, type, name, value, onChange, error, placeholder })
 const Login = () => {
   const navigate = useNavigate();
   const { login } = useAuth();
-  
+
   const [formData, setFormData] = useState({
     email: "",
     password: "",
@@ -39,7 +39,12 @@ const Login = () => {
     general: "",
   });
 
+  const [showPassword, setShowPassword] = useState(false);
+
   const [isLoading, setIsLoading] = useState(false);
+  const handlePassword = () => {
+    setShowPassword(!showPassword);
+  };
 
   const handleInputChange = (e) => {
     const { name, value, type, checked } = e.target;
@@ -83,7 +88,7 @@ const Login = () => {
       });
 
       const data = await response.json();
-      
+
       if (response.ok) {
         login(data.user, data.token);
         setFormData({ email: "", password: "", rememberMe: false });
@@ -113,7 +118,7 @@ const Login = () => {
           <FaUserCircle className="text-[80px] text-gray-500 mb-[10px] mx-auto" />
           <h2 className="text-[1.8rem] font-bold text-[#333]">MCA Alumni</h2>
         </div>
-        
+
         {error.general && <div className="text-red-500 text-center">{error.general}</div>}
 
         <form onSubmit={handleLogin}>
@@ -128,13 +133,23 @@ const Login = () => {
           />
           <InputField
             label="PASSWORD"
-            type="password"
+            type={showPassword ? "text" : "password"}
             name="password"
             value={formData.password}
             onChange={handleInputChange}
             error={error.password}
             placeholder="Enter Your Password"
           />
+          <div
+            className="relative top-[-52px] left-[265px] cursor-pointer"
+            onClick={handlePassword}
+          >
+            {showPassword ? (
+              <FaEyeSlash className="text-gray-500" />
+            ) : (
+              <FaEye className="text-gray-500" />
+            )}
+          </div>
 
           <div className="flex items-center mb-[20px] text-left">
             <input
@@ -152,9 +167,8 @@ const Login = () => {
 
           <button
             type="submit"
-            className={`w-full p-[12px] border-none rounded-[30px] bg-[#e0e5ec] shadow-[8px_8px_16px_#b3b9c5,-8px_-8px_16px_#ffffff] text-[#333] text-[1rem] font-bold cursor-pointer transition-all duration-300 ease-in-out hover:bg-[#d1d9e6] ${
-              isLoading ? "opacity-70 cursor-not-allowed" : ""
-            }`}
+            className={`w-full p-[12px] border-none rounded-[30px] bg-[#e0e5ec] shadow-[8px_8px_16px_#b3b9c5,-8px_-8px_16px_#ffffff] text-[#333] text-[1rem] font-bold cursor-pointer transition-all duration-300 ease-in-out hover:bg-[#d1d9e6] ${isLoading ? "opacity-70 cursor-not-allowed" : ""
+              }`}
             disabled={isLoading}
           >
             {isLoading ? <FaSpinner className="animate-spin mx-auto" /> : "LOGIN"}