diff --git a/lang/es.json b/lang/es.json
index 2f6f9f5d..ad9510f7 100644
--- a/lang/es.json
+++ b/lang/es.json
@@ -714,6 +714,7 @@
     "Hey there!": "¡Hola!",
     "Hey! A quick heads-up.": "¡Hola! Un aviso rápido.",
     "Hey! We have some great news.": "¡Hola! Tenemos buenas noticias.",
+    "Hide password": "Ocultar contraseña",
     "Hide subcategories": "Ocultar subcategorías",
     "Hi :name,": "Hola :name,",
     "Hi! I'm Victor, the founder of Whisper Money. I wanted to personally welcome you and thank you for joining us.": "¡Hola! Soy Víctor, el fundador de Whisper Money. Quería darte la bienvenida personalmente y agradecerte por unirte.",
@@ -1317,6 +1318,7 @@
     "Shared with": "Compartido con",
     "Shopping (Clothing, Electronics, Gifts)": "Compras (Ropa, Electrónica, Regalos)",
     "Show as cash inflow": "Mostrar como entrada de dinero",
+    "Show password": "Mostrar contraseña",
     "Show subcategories": "Mostrar subcategorías",
     "Show as cash outflow": "Mostrar como salida de dinero",
     "Show in account currency (:currency)": "Mostrar en moneda de la cuenta (:currency)",
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
index 8c8c9566..0f484ec5 100644
--- a/resources/js/components/delete-user.tsx
+++ b/resources/js/components/delete-user.tsx
@@ -12,8 +12,8 @@ import {
     DialogTitle,
     DialogTrigger,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import { type SharedData } from '@/types';
 import { __ } from '@/utils/i18n';
 import { Form, usePage } from '@inertiajs/react';
@@ -104,9 +104,8 @@ export default function DeleteUser() {
                                             {__('Password')}
                                         </Label>
 
-                                        <Input
+                                        <PasswordInput
                                             id="password"
-                                            type="password"
                                             name="password"
                                             ref={passwordInput}
                                             placeholder={__('Password')}
diff --git a/resources/js/components/ui/password-input.test.tsx b/resources/js/components/ui/password-input.test.tsx
new file mode 100644
index 00000000..002469dd
--- /dev/null
+++ b/resources/js/components/ui/password-input.test.tsx
@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { PasswordInput } from './password-input';
+
+describe('PasswordInput', () => {
+    it('renders masked by default with a show toggle', () => {
+        render(<PasswordInput placeholder="Password" />);
+
+        expect(screen.getByPlaceholderText('Password')).toHaveAttribute(
+            'type',
+            'password',
+        );
+
+        const toggle = screen.getByRole('button');
+        expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('reveals and re-hides the value when the toggle is clicked', () => {
+        render(<PasswordInput placeholder="Password" />);
+
+        const input = screen.getByPlaceholderText('Password');
+        const toggle = screen.getByRole('button');
+
+        fireEvent.click(toggle);
+        expect(input).toHaveAttribute('type', 'text');
+        expect(toggle).toHaveAttribute('aria-pressed', 'true');
+
+        fireEvent.click(toggle);
+        expect(input).toHaveAttribute('type', 'password');
+        expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    });
+
+    it('forwards the ref to the underlying input', () => {
+        let node: HTMLInputElement | null = null;
+        render(
+            <PasswordInput
+                ref={(element) => {
+                    node = element;
+                }}
+                placeholder="Password"
+            />,
+        );
+
+        expect(node).toBeInstanceOf(HTMLInputElement);
+    });
+
+    it('disables the toggle when the input is disabled', () => {
+        render(<PasswordInput placeholder="Password" disabled />);
+
+        expect(screen.getByRole('button')).toBeDisabled();
+    });
+});
diff --git a/resources/js/components/ui/password-input.tsx b/resources/js/components/ui/password-input.tsx
new file mode 100644
index 00000000..9a161553
--- /dev/null
+++ b/resources/js/components/ui/password-input.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { __ } from '@/utils/i18n';
+import { Eye, EyeOff } from 'lucide-react';
+
+type PasswordInputProps = Omit<React.ComponentProps<'input'>, 'type'>;
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+    ({ className, ...props }, ref) => {
+        const [visible, setVisible] = React.useState(false);
+
+        return (
+            <div className="relative">
+                <Input
+                    ref={ref}
+                    type={visible ? 'text' : 'password'}
+                    className={cn(
+                        'pr-10 [&::-ms-reveal]:hidden [&::-ms-clear]:hidden',
+                        className,
+                    )}
+                    {...props}
+                />
+                <button
+                    type="button"
+                    onClick={() => setVisible((current) => !current)}
+                    disabled={props.disabled}
+                    tabIndex={-1}
+                    aria-label={
+                        visible ? __('Hide password') : __('Show password')
+                    }
+                    aria-pressed={visible}
+                    className="absolute inset-y-0 right-0 flex items-center justify-center px-3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                    {visible ? (
+                        <EyeOff className="size-4" />
+                    ) : (
+                        <Eye className="size-4" />
+                    )}
+                </button>
+            </div>
+        );
+    },
+);
+PasswordInput.displayName = 'PasswordInput';
+
+export { PasswordInput };
diff --git a/resources/js/components/unlock-message-dialog.tsx b/resources/js/components/unlock-message-dialog.tsx
index eb99abfb..3927f3bd 100644
--- a/resources/js/components/unlock-message-dialog.tsx
+++ b/resources/js/components/unlock-message-dialog.tsx
@@ -10,8 +10,8 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import {
     Select,
     SelectContent,
@@ -124,9 +124,8 @@ export default function UnlockMessageDialog({
                             <Label htmlFor="unlock-password">
                                 {__('Encryption Password')}
                             </Label>
-                            <Input
+                            <PasswordInput
                                 id="unlock-password"
-                                type="password"
                                 required
                                 autoFocus
                                 value={password}
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 4faf9316..fddd8aef 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 import { clearKey } from '@/lib/key-storage';
@@ -95,9 +96,8 @@ export default function Login({
                                         </TextLink>
                                     )}
                                 </div>
-                                <Input
+                                <PasswordInput
                                     id="password"
-                                    type="password"
                                     name="password"
                                     required
                                     tabIndex={2}
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index 4fe59325..557cd4b1 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -9,6 +9,7 @@ import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 import { transactionSyncService } from '@/services/transaction-sync';
@@ -113,9 +114,8 @@ export default function Register({
                                 <Label htmlFor="password">
                                     {__('Password')}
                                 </Label>
-                                <Input
+                                <PasswordInput
                                     id="password"
-                                    type="password"
                                     required
                                     tabIndex={3}
                                     autoComplete="new-password"
@@ -130,9 +130,8 @@ export default function Register({
                                 <Label htmlFor="password_confirmation">
                                     {__('Confirm password')}
                                 </Label>
-                                <Input
+                                <PasswordInput
                                     id="password_confirmation"
-                                    type="password"
                                     required
                                     tabIndex={4}
                                     autoComplete="new-password"
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index 5ee5a4e0..c8d0031f 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -6,6 +6,7 @@ import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import { Spinner } from '@/components/ui/spinner';
 import AuthLayout from '@/layouts/auth-layout';
 
@@ -49,9 +50,8 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
 
                         <div className="grid gap-2">
                             <Label htmlFor="password">{__('Password')}</Label>
-                            <Input
+                            <PasswordInput
                                 id="password"
-                                type="password"
                                 name="password"
                                 autoComplete="new-password"
                                 className="mt-1 block w-full"
@@ -66,9 +66,8 @@ export default function ResetPassword({ token, email }: ResetPasswordProps) {
                             <Label htmlFor="password_confirmation">
                                 {__('Confirm password')}
                             </Label>
-                            <Input
+                            <PasswordInput
                                 id="password_confirmation"
-                                type="password"
                                 name="password_confirmation"
                                 autoComplete="new-password"
                                 className="mt-1 block w-full"
diff --git a/resources/js/pages/settings/account.tsx b/resources/js/pages/settings/account.tsx
index 29a262d6..29b0298d 100644
--- a/resources/js/pages/settings/account.tsx
+++ b/resources/js/pages/settings/account.tsx
@@ -9,6 +9,7 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import {
     Select,
     SelectContent,
@@ -344,11 +345,10 @@ export default function Account({
                                         {__('Current password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="current_password"
                                         ref={currentPasswordInput}
                                         name="current_password"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="current-password"
                                         placeholder={__('Current password')}
@@ -364,11 +364,10 @@ export default function Account({
                                         {__('New password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="password"
                                         ref={passwordInput}
                                         name="password"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
                                         placeholder={__('New password')}
@@ -382,10 +381,9 @@ export default function Account({
                                         {__('Confirm password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="password_confirmation"
                                         name="password_confirmation"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
                                         placeholder={__('Confirm password')}
diff --git a/resources/js/pages/settings/password.tsx b/resources/js/pages/settings/password.tsx
index 61a1a0f6..d6b9001b 100644
--- a/resources/js/pages/settings/password.tsx
+++ b/resources/js/pages/settings/password.tsx
@@ -11,8 +11,8 @@ import { useRef } from 'react';
 import HeadingSmall from '@/components/heading-small';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PasswordInput } from '@/components/ui/password-input';
 import { edit } from '@/routes/user-password';
 import { InfoIcon } from 'lucide-react';
 
@@ -82,11 +82,10 @@ export default function Password() {
                                         {__('Current password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="current_password"
                                         ref={currentPasswordInput}
                                         name="current_password"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="current-password"
                                         placeholder={__('Current password')}
@@ -102,11 +101,10 @@ export default function Password() {
                                         {__('New password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="password"
                                         ref={passwordInput}
                                         name="password"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
                                         placeholder={__('New password')}
@@ -120,10 +118,9 @@ export default function Password() {
                                         {__('Confirm password')}
                                     </Label>
 
-                                    <Input
+                                    <PasswordInput
                                         id="password_confirmation"
                                         name="password_confirmation"
-                                        type="password"
                                         className="mt-1 block w-full"
                                         autoComplete="new-password"
                                         placeholder={__('Confirm password')}