diff --git a/logify-frontend/src/components/ui/PasswordInput.jsx b/logify-frontend/src/components/ui/PasswordInput.jsx
new file mode 100644
index 0000000..7c4ede8
--- /dev/null
+++ b/logify-frontend/src/components/ui/PasswordInput.jsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import PropTypes from "prop-types";
+
+function PasswordInput({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder = "Enter your password",
+  error,
+  className = "",
+  id,
+  ...props
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const inputId = id || `password-input-${name}`;
+
+  const toggleVisibility = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <div>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold"
+        >
+          {label}
+        </label>
+      )}
+      <div className="relative mt-2">
+        <input
+          id={inputId}
+          type={isVisible ? "text" : "password"}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          className={`w-full rounded-xl border border-border bg-white px-4 py-3 pr-10 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800 ${className}`}
+          {...props}
+        />
+        <button
+          type="button"
+          onClick={toggleVisibility}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 transition-colors"
+          aria-label={isVisible ? "Hide password" : "Show password"}
+        >
+          {isVisible ? (
+            <EyeOff size={18} />
+          ) : (
+            <Eye size={18} />
+          )}
+        </button>
+      </div>
+      {error && <p className="mt-1 text-xs text-red-600">{error}</p>}
+    </div>
+  );
+}
+
+PasswordInput.propTypes = {
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  error: PropTypes.string,
+  className: PropTypes.string,
+  id: PropTypes.string,
+};
+
+export default PasswordInput;
diff --git a/logify-frontend/src/pages/AdminSignupPage.jsx b/logify-frontend/src/pages/AdminSignupPage.jsx
index 6de8074..c031f79 100644
--- a/logify-frontend/src/pages/AdminSignupPage.jsx
+++ b/logify-frontend/src/pages/AdminSignupPage.jsx
@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { api } from "../config/api.js";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthActionButton from "../components/ui/AuthActionButton";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
@@ -307,43 +308,23 @@ const AdminSignupPage = () => {
             )}
           </div>
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              name="confirmPassword"
-              type="password"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/LoginPage.jsx b/logify-frontend/src/pages/LoginPage.jsx
index 82ae31b..81ed922 100644
--- a/logify-frontend/src/pages/LoginPage.jsx
+++ b/logify-frontend/src/pages/LoginPage.jsx
@@ -3,6 +3,7 @@ import { Link, useLocation } from "react-router-dom";
 
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
 
@@ -76,23 +77,13 @@ const LoginPage = () => {
             />
           </div>
 
-          <div>
-            <label
-              htmlFor="password"
-              className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold"
-            >
-              Password
-            </label>
-            <input
-              id="password"
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              placeholder="Enter your password"
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none ring-0 transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-            />
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="Enter your password"
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/StudentSignupPage.jsx b/logify-frontend/src/pages/StudentSignupPage.jsx
index 06fab2c..4259edc 100644
--- a/logify-frontend/src/pages/StudentSignupPage.jsx
+++ b/logify-frontend/src/pages/StudentSignupPage.jsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
 import { api } from "../config/api.js";
@@ -442,43 +443,23 @@ const StudentSignupPage = () => {
             )}
           </div>
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              type="password"
-              name="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
-
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              type="password"
-              name="confirmPassword"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
+
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="my-4 rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/pages/SupervisorSignupPage.jsx b/logify-frontend/src/pages/SupervisorSignupPage.jsx
index fc21d8a..0d72bd4 100644
--- a/logify-frontend/src/pages/SupervisorSignupPage.jsx
+++ b/logify-frontend/src/pages/SupervisorSignupPage.jsx
@@ -4,6 +4,7 @@ import { Link, useNavigate, useLocation } from "react-router-dom";
 import { api } from "../config/api.js";
 import { AuthContext } from "../contexts/AuthContext";
 import Loading from "../components/ui/Loading";
+import PasswordInput from "../components/ui/PasswordInput";
 import AuthActionButton from "../components/ui/AuthActionButton";
 import AuthLayout from "./auth/AuthLayout";
 import GuestOnlyRoute from "./auth/GuestOnlyRoute";
@@ -400,43 +401,23 @@ const SupervisorSignupPage = () => {
             </div>
           )}
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Password
-            </label>
-            <input
-              name="password"
-              type="password"
-              value={formData.password}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="At least 8 characters"
-            />
-            {fieldErrors.password && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.password}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Password"
+            name="password"
+            value={formData.password}
+            onChange={onChange}
+            placeholder="At least 8 characters"
+            error={fieldErrors.password}
+          />
 
-          <div>
-            <label className="text-xs font-black uppercase tracking-widest text-maroon-dark dark:text-gold">
-              Confirm Password
-            </label>
-            <input
-              name="confirmPassword"
-              type="password"
-              value={formData.confirmPassword}
-              onChange={onChange}
-              className="mt-2 w-full rounded-xl border border-border bg-white px-4 py-3 text-sm outline-none transition focus:border-gold dark:border-slate-700 dark:bg-slate-800"
-              placeholder="Re-enter password"
-            />
-            {fieldErrors.confirmPassword && (
-              <p className="mt-1 text-xs text-red-600">
-                {fieldErrors.confirmPassword}
-              </p>
-            )}
-          </div>
+          <PasswordInput
+            label="Confirm Password"
+            name="confirmPassword"
+            value={formData.confirmPassword}
+            onChange={onChange}
+            placeholder="Re-enter password"
+            error={fieldErrors.confirmPassword}
+          />
 
           {error && (
             <div className="rounded-xl border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300">
diff --git a/logify-frontend/src/tests/authRoutes.test.jsx b/logify-frontend/src/tests/authRoutes.test.jsx
index 0368dc5..b8fa197 100644
--- a/logify-frontend/src/tests/authRoutes.test.jsx
+++ b/logify-frontend/src/tests/authRoutes.test.jsx
@@ -151,7 +151,7 @@ test("login page forwards the original destination to the login action", async (
   fireEvent.change(screen.getByLabelText(/email \/ webmail/i), {
     target: { value: "student@example.com" },
   });
-  fireEvent.change(screen.getByLabelText(/password/i), {
+  fireEvent.change(screen.getByLabelText(/^password$/i), {
     target: { value: "password123" },
   });
   fireEvent.click(screen.getByRole("button", { name: /login/i }));