diff --git a/client/src/pages/auth/SignInPage2.tsx b/client/src/pages/auth/SignInPage2.tsx
index 8615a14f..338ae040 100644
--- a/client/src/pages/auth/SignInPage2.tsx
+++ b/client/src/pages/auth/SignInPage2.tsx
@@ -6,7 +6,7 @@ import { signInWithEmailAndPassword } from "firebase/auth"
 import { useMutation } from "@tanstack/react-query"
 import { z } from "zod"
 import { Link } from "react-router-dom"
-import { CheckCircle, XCircle } from "lucide-react"
+import { CheckCircle, Eye, EyeOff, XCircle } from "lucide-react"
 import { checkEmailExists } from "@/services/userService"
 import { toast, ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
@@ -36,6 +36,8 @@ const SignInPage2: React.FC = () => {
     const [isEmailExists, setIsEmailExists] = useState<boolean | null>(null)
     const [isCheckingEmail, setIsCheckingEmail] = useState(false)
 
+    const [hidden, setHidden] = useState(true);
+
     const email = watch("email")
 
     useEffect(() => {
@@ -139,13 +141,18 @@ const SignInPage2: React.FC = () => {
                                     >
                                         Password
                                     </Label>
-                                    <Input
-                                        id="password"
-                                        type="password"
-                                        placeholder="Password"
-                                        className="bg-gray-800 text-white"
-                                        {...register("password")}
-                                    />
+                                    <div className="relative">
+                                        <Input
+                                            id="password"
+                                            type={hidden ? "password" : "text"}
+                                            placeholder="Password"
+                                            className="bg-gray-800 text-white"
+                                            {...register("password")}
+                                        />
+                                        <div className="absolute top-0 p-2 right-2 h-full aspect-square flex justify-center items-center z-20 hover:cursor-pointer" onClick={()=>setHidden(!hidden)}>
+                                            {hidden ? <EyeOff /> : <Eye />}
+                                        </div>
+                                    </div>
                                     {errors.password && (
                                         <p className="mt-2 text-sm text-red-500">
                                             {errors.password.message}
diff --git a/client/src/pages/auth/SignUpPage2.tsx b/client/src/pages/auth/SignUpPage2.tsx
index 37dc5d9f..10725241 100644
--- a/client/src/pages/auth/SignUpPage2.tsx
+++ b/client/src/pages/auth/SignUpPage2.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CheckCircle, XCircle } from "lucide-react"
+import { CheckCircle, Eye, EyeOff, XCircle } from "lucide-react"
 import React, { useEffect, useState } from "react"
 import { useForm } from "react-hook-form"
 import { Link } from "react-router-dom"
@@ -58,6 +58,9 @@ const LoadingSpinner: React.FC = () => {
 }
 
 const SignUp: React.FC = () => {
+
+    const [hidden, setHidden] = useState(true);
+    const [confirmHidden, setConfirmHidden] = useState(true);
     const [isUsernameAvailable, setIsUsernameAvailable] = useState<
         boolean | null
     >(null)
@@ -272,14 +275,20 @@ const SignUp: React.FC = () => {
                                 <Label htmlFor="password" className="sr-only">
                                     Password
                                 </Label>
-                                <Input
-                                    id="password"
-                                    type="password"
-                                    placeholder="Password"
-                                    className="bg-gray-800 text-white"
-                                    {...register("password")}
-                                    onPaste={preventPaste}
-                                />
+                                <div className="relative">
+                                    <Input
+                                        id="password"
+                                        type={hidden ? "password" : "text"}
+                                        placeholder="Password"
+                                        className="bg-gray-800 text-white"
+                                        {...register("password")}
+                                        onPaste={preventPaste}
+                                    />
+                                    <div className="absolute top-0 p-2 right-2 h-full aspect-square flex justify-center items-center z-10 hover:cursor-pointer" onClick={()=>setHidden(!hidden)}>
+                                        {hidden ? <EyeOff /> : <Eye />}
+                                    </div>
+                                </div>
+                                
                                 {errors.password && (
                                     <p className="mt-2 text-sm text-red-500">
                                         {errors.password.message}
@@ -294,14 +303,20 @@ const SignUp: React.FC = () => {
                                 >
                                     Confirm Password
                                 </Label>
+                                <div className="relative">
                                 <Input
                                     id="confirmPassword"
-                                    type="password"
+                                    type={confirmHidden ? "password": "text"}
                                     placeholder="Confirm Password"
                                     className="bg-gray-800 text-white"
                                     {...register("confirmPassword")}
                                     onPaste={preventPaste}
                                 />
+                                        <div className="absolute top-0 p-2 right-2 h-full aspect-square flex justify-center items-center z-10 hover:cursor-pointer" onClick={()=>setConfirmHidden(!confirmHidden)}>
+                                        {confirmHidden ? <EyeOff /> : <Eye />}
+                                        </div>
+                                    </div>
+                                
                                 {errors.confirmPassword && (
                                     <p className="mt-2 text-sm text-red-500">
                                         {errors.confirmPassword.message}
diff --git a/package-lock.json b/package-lock.json
index 9000eadc..a04d5287 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3321,4 +3321,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file