diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 9c5d9141..e93569fd 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -13,6 +13,7 @@ import Link from "next/link";
 export default function Login() {
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [showPassword, setShowPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {mutateUser} = useUser({
@@ -71,15 +72,23 @@ export default function Login() {
 								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
 							/>
 						</div>
-						<div className="flex flex-col gap-3 w-full">
+						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Password</label>
-							<input
-								type="password"
-								name="password"
-								onChange={(e) => setPassword(e.target.value)}
-								placeholder="Password"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
+							<div className="w-full h-fit relative">
+								<input
+									type={showPassword ? "text" : "password"}
+									name="password"
+									onChange={(e) => setPassword(e.target.value)}
+									placeholder="Password"
+									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
+								/>
+								<p
+									role="button"
+									onClick={() => setShowPassword((prev) => !prev)}
+									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
+									{showPassword ? "Hide" : "Show"}
+								</p>
+							</div>
 						</div>
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Login"}
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index 139d7791..bbd3233e 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -11,7 +11,9 @@ export default function Register() {
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [password, setPassword] = useState("");
+	const [showPassword, setShowPassword] = useState(false);
 	const [confirmPassword, setConfirmPassword] = useState("");
+	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 
 	const {mutateUser} = useUser({
@@ -50,6 +52,7 @@ export default function Register() {
 						<div className="flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Email address *</label>
 							<input
+								required
 								type="email"
 								name="email"
 								onChange={(e) => setEmail(e.target.value)}
@@ -57,25 +60,43 @@ export default function Register() {
 								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
 							/>
 						</div>
-						<div className="flex flex-col gap-3 w-full">
-							<label className="font-normal text-base text-mti-gray-dim">Password *</label>
-							<input
-								type="password"
-								name="password"
-								onChange={(e) => setPassword(e.target.value)}
-								placeholder="Enter your password"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
+						<div className="relative flex flex-col gap-3 w-full">
+							<label className="font-normal text-base text-mti-gray-dim">Password</label>
+							<div className="w-full h-fit relative">
+								<input
+									required
+									type={showPassword ? "text" : "password"}
+									name="password"
+									onChange={(e) => setPassword(e.target.value)}
+									placeholder="Password"
+									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
+								/>
+								<p
+									role="button"
+									onClick={() => setShowPassword((prev) => !prev)}
+									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
+									{showPassword ? "Hide" : "Show"}
+								</p>
+							</div>
 						</div>
-						<div className="flex flex-col gap-3 w-full">
+						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Confirm Password *</label>
-							<input
-								type="password"
-								name="confirmPassword"
-								onChange={(e) => setConfirmPassword(e.target.value)}
-								placeholder="Confirm your password"
-								className="px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
-							/>
+							<div className="w-full h-fit relative">
+								<input
+									required
+									type={showConfirmPassword ? "text" : "password"}
+									name="confirmPassword"
+									onChange={(e) => setConfirmPassword(e.target.value)}
+									placeholder="Confirm your password"
+									className="w-full px-8 py-6 text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full shadow-xl shadow-mti-gray-anti-flash focus:outline-none"
+								/>
+								<p
+									role="button"
+									onClick={() => setShowConfirmPassword((prev) => !prev)}
+									className="text-xs cursor-pointer absolute bottom-1/2 translate-y-1/2 right-8">
+									{showConfirmPassword ? "Hide" : "Show"}
+								</p>
+							</div>
 						</div>
 						<Button className="mt-8 w-full" color="green" disabled={isLoading}>
 							{!isLoading && "Create account"}