diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
index ae6a8f408..7b858f80c 100644
--- a/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
+++ b/src/app/dashboard/(admin)/admin/(settings)/settings/account/_component.tsx/password.tsx
@@ -2,6 +2,7 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
+import { Eye, EyeOff } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -13,6 +14,8 @@ import { toast } from "~/components/ui/use-toast";
 import { cn } from "~/lib/utils";
 import { passwordSchema, type PasswordFormData } from "./schema";
 
+type PasswordField = "current" | "new" | "confirmNew";
+
 const Password = () => {
   const { data } = useSession();
 
@@ -29,6 +32,12 @@ const Password = () => {
     mode: "all",
   });
 
+  const [showPassword, setShowPassword] = useState({
+    current: false,
+    new: false,
+    confirmNew: false,
+  });
+
   const submitHandler = async (values: PasswordFormData) => {
     try {
       setIsPending(true);
@@ -59,6 +68,13 @@ const Password = () => {
     }
   };
 
+  const togglePasswordVisibility = (field: PasswordField) => {
+    setShowPassword((previousState) => ({
+      ...previousState,
+      [field]: !previousState[field],
+    }));
+  };
+
   return (
     <div className="w-full px-3 pt-[50px] md:px-8">
       <div className="mb-8">
@@ -76,16 +92,26 @@ const Password = () => {
               <label className="flex border-0 text-sm font-medium text-foreground">
                 Current Password
               </label>
-              <div className="flex w-full items-center">
+              <div className="relative flex w-full items-center">
                 <input
                   className={cn(
                     "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                     errors.currentPassword && "border-red-500",
                   )}
                   placeholder="Enter current password"
-                  type="password"
+                  type={`${showPassword.current ? "text" : "password"}`}
                   {...register("currentPassword")}
                 />
+                <span
+                  className="absolute right-2 top-[10px] cursor-pointer"
+                  onClick={() => togglePasswordVisibility("current")}
+                >
+                  {showPassword.current ? (
+                    <EyeOff size={20} />
+                  ) : (
+                    <Eye size={20} />
+                  )}
+                </span>
               </div>
             </div>
             {errors.currentPassword && (
@@ -99,16 +125,22 @@ const Password = () => {
               <label className="flex border-0 text-sm font-medium text-foreground">
                 New Password
               </label>
-              <div className="flex w-full items-center">
+              <div className="relative flex w-full items-center">
                 <input
                   className={cn(
                     "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                     errors.newPassword && "border-red-500",
                   )}
                   placeholder="Enter new password"
-                  type="password"
+                  type={`${showPassword.new ? "text" : "password"}`}
                   {...register("newPassword")}
                 />
+                <span
+                  className="absolute right-2 top-[10px] cursor-pointer"
+                  onClick={() => togglePasswordVisibility("new")}
+                >
+                  {showPassword.new ? <EyeOff size={20} /> : <Eye size={20} />}
+                </span>
               </div>
             </div>
             {errors.newPassword && (
@@ -122,16 +154,26 @@ const Password = () => {
               <label className="flex border-0 text-sm font-medium text-foreground">
                 Confirm new password
               </label>
-              <div className="flex w-full items-center">
+              <div className="relative flex w-full items-center">
                 <input
                   className={cn(
                     "flex h-10 w-full flex-col gap-2 rounded-md border border-border bg-background px-4 py-2 text-sm text-foreground ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
                     errors.confirmPassword && "border-red-500",
                   )}
                   placeholder="Confrim new Password"
-                  type="password"
+                  type={`${showPassword.confirmNew ? "text" : "password"}`}
                   {...register("confirmPassword")}
                 />
+                <span
+                  className="absolute right-2 top-[10px] cursor-pointer"
+                  onClick={() => togglePasswordVisibility("confirmNew")}
+                >
+                  {showPassword.confirmNew ? (
+                    <EyeOff size={20} />
+                  ) : (
+                    <Eye size={20} />
+                  )}
+                </span>
               </div>
             </div>
             {errors.confirmPassword && (