diff --git a/packages/web-ui/src/ImportScreen.tsx b/packages/web-ui/src/ImportScreen.tsx
index fa30617..c381a8a 100644
--- a/packages/web-ui/src/ImportScreen.tsx
+++ b/packages/web-ui/src/ImportScreen.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { PasswordInput } from './PasswordInput.js';
 import {
   validateSeedPhrase,
   validateElectrumPhrase,
@@ -313,15 +314,14 @@ export function ImportScreen(): JSX.Element {
             ) : (
               <>
                 <label htmlFor="passphrase">Passphrase (25th word)</label>
-                <input
+                <PasswordInput
                   id="passphrase"
-                  type="password"
+                  
                   value={passphrase}
                   onChange={(e) => setPassphrase(e.target.value)}
                   autoComplete="off"
                   spellCheck={false}
-                  placeholder="Leave empty if the source wallet didn't set one"
-                />
+                  placeholder="Leave empty if the source wallet didn't set one" />
                 <div className="field-help">
                   Mixes into the seed derivation. Same phrase + different passphrase = different
                   wallet, different addresses, different balance. Must exactly match what the
diff --git a/packages/web-ui/src/LoginPage.tsx b/packages/web-ui/src/LoginPage.tsx
index ca245e3..d8fb9c9 100644
--- a/packages/web-ui/src/LoginPage.tsx
+++ b/packages/web-ui/src/LoginPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { PasswordInput } from './PasswordInput.js';
 import { Keystore, LocalStorageAdapter, type StoredSeed } from '@dgb-wallet/keystore';
 import { useActiveSeed, type WalletKind } from './ActiveSeed.js';
 import { useSessionAuth } from './session-auth.js';
@@ -163,14 +164,13 @@ export function LoginPage({
                 </button>
                 {isLegacy && (
                   <div className="wallet-picker-legacy">
-                    <input
-                      type="password"
+                    <PasswordInput
+                      
                       value={legacyPass[s.label] ?? ''}
                       onChange={(e) => setLegacyPass({ ...legacyPass, [s.label]: e.target.value })}
                       placeholder="original passphrase"
                       onKeyDown={(e) => { if (e.key === 'Enter') void tryLegacyOpen(s.label); }}
-                      autoFocus
-                    />
+                      autoFocus />
                     <button
                       className="primary"
                       onClick={() => void tryLegacyOpen(s.label)}
diff --git a/packages/web-ui/src/MasterAuthScreens.tsx b/packages/web-ui/src/MasterAuthScreens.tsx
index 0ac466d..e6d223c 100644
--- a/packages/web-ui/src/MasterAuthScreens.tsx
+++ b/packages/web-ui/src/MasterAuthScreens.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { PasswordInput } from './PasswordInput.js';
 import { useSessionAuth, PIN_MAX_ATTEMPTS } from './session-auth.js';
 
 // First-run master-password setup. Renders when session state ===
@@ -35,21 +36,19 @@ export function SetMasterPasswordScreen({ onDone }: { onDone: () => void }): JSX
       </p>
 
       <label>New master password</label>
-      <input
-        type="password"
+      <PasswordInput
+        
         value={pw}
         onChange={(e) => setPw(e.target.value)}
         placeholder="at least 8 characters"
-        autoFocus
-      />
+        autoFocus />
       <label>Confirm</label>
-      <input
-        type="password"
+      <PasswordInput
+        
         value={pw2}
         onChange={(e) => setPw2(e.target.value)}
         onKeyDown={(e) => { if (e.key === 'Enter') void submit(); }}
-        placeholder="type it again"
-      />
+        placeholder="type it again" />
 
       <div className="auth-hints">
         <span className={okLen ? 'ok' : 'off'}>✓ 8+ characters</span>
@@ -110,14 +109,13 @@ export function MasterUnlockScreen(): JSX.Element {
       </p>
 
       <label>{mode === 'pin' ? 'PIN' : 'Master password'}</label>
-      <input
-        type="password"
+      <PasswordInput
+        
         inputMode={mode === 'pin' ? 'numeric' : undefined}
         value={value}
         onChange={(e) => setValue(e.target.value)}
         onKeyDown={(e) => { if (e.key === 'Enter') void submit(); }}
-        autoFocus
-      />
+        autoFocus />
       <button className="primary" disabled={busy || !value} onClick={submit}>
         {busy ? 'Unlocking…' : 'Unlock'}
       </button>
diff --git a/packages/web-ui/src/PasswordInput.tsx b/packages/web-ui/src/PasswordInput.tsx
new file mode 100644
index 0000000..f41c790
--- /dev/null
+++ b/packages/web-ui/src/PasswordInput.tsx
@@ -0,0 +1,44 @@
+import { forwardRef, useState, type InputHTMLAttributes } from 'react';
+
+// Password / PIN / passphrase field with a reveal toggle. A drop-in for
+// `<input type="password">`: every other prop passes straight through,
+// the ref lands on the <input>. The eye button is type="button" so it
+// never submits a surrounding form, and it is excluded from the tab
+// order (tabIndex -1) so Enter / Tab behaviour on the field itself is
+// unchanged — mouse or touch users get the toggle, keyboard users keep
+// their flow.
+export const PasswordInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  function PasswordInput({ className, style, ...props }, ref) {
+    const [shown, setShown] = useState(false);
+    return (
+      <span className="pw-wrap" style={style}>
+        <input
+          ref={ref}
+          {...props}
+          type={shown ? 'text' : 'password'}
+          className={`pw-input ${className ?? ''}`}
+        />
+        <button
+          type="button"
+          className="pw-toggle"
+          onClick={() => setShown((s) => !s)}
+          tabIndex={-1}
+          aria-label={shown ? 'Hide' : 'Show'}
+          title={shown ? 'Hide' : 'Show'}
+        >
+          {shown ? (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" />
+              <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" />
+              <path d="M14.12 14.12a3 3 0 1 1-4.24-4.24" /><line x1="1" y1="1" x2="23" y2="23" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" />
+            </svg>
+          )}
+        </button>
+      </span>
+    );
+  },
+);
diff --git a/packages/web-ui/src/PinConfirmModal.tsx b/packages/web-ui/src/PinConfirmModal.tsx
index fcd32f3..6a5c198 100644
--- a/packages/web-ui/src/PinConfirmModal.tsx
+++ b/packages/web-ui/src/PinConfirmModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { PasswordInput } from './PasswordInput.js';
 import { useSessionAuth } from './session-auth.js';
 
 // Small modal that asks for the session PIN before letting a
@@ -61,9 +62,9 @@ export function PinConfirmModal({
       <div className="modal">
         <h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{title}</h3>
         {message && <p className="field-help" style={{ margin: 0 }}>{message}</p>}
-        <input
+        <PasswordInput
           ref={inputRef}
-          type="password"
+          
           inputMode="numeric"
           placeholder="Session PIN"
           value={pin}
@@ -74,8 +75,7 @@ export function PinConfirmModal({
           }}
           maxLength={12}
           autoComplete="off"
-          style={{ padding: '10px 12px', fontSize: 15, letterSpacing: '0.2em' }}
-        />
+          style={{ padding: '10px 12px', fontSize: 15, letterSpacing: '0.2em' }} />
         {err && <div className="field-help" role="alert" style={{ color: 'var(--danger, #e05252)' }}>{err}</div>}
         <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', marginTop: 4 }}>
           <button
diff --git a/packages/web-ui/src/SettingsPage.tsx b/packages/web-ui/src/SettingsPage.tsx
index a99c88b..ae65587 100644
--- a/packages/web-ui/src/SettingsPage.tsx
+++ b/packages/web-ui/src/SettingsPage.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { PasswordInput } from './PasswordInput.js';
 import { useActiveSeed } from './ActiveSeed.js';
 import { useBackendConfig, AUTO_REFRESH_CHOICES, CHANGE_POLICY_CHOICES, type ChangePolicy } from './backend-config.js';
 import { BackendMatrix } from './BackendMatrix.js';
@@ -339,15 +340,14 @@ function SessionRows(): JSX.Element {
             password, which re-enables the PIN.
           </div>
           <div className="settings-inline-row">
-            <input
-              type="password"
+            <PasswordInput
+              
               inputMode="numeric"
               placeholder="4-6 digit PIN"
               value={pinInput}
               onChange={(e) => setPinInput(e.target.value)}
               maxLength={12}
-              style={{ maxWidth: 180 }}
-            />
+              style={{ maxWidth: 180 }} />
             <button
               className="settings-row-btn"
               onClick={onSetPin}
@@ -414,9 +414,9 @@ function ChangeMasterPassword(): JSX.Element {
           is no reset without it.
         </div>
         <div className="settings-inline-row settings-inline-wrap">
-          <input type="password" placeholder="current password" value={current} onChange={(e) => setCurrent(e.target.value)} autoComplete="current-password" />
-          <input type="password" placeholder="new password (8+ chars)" value={next} onChange={(e) => setNext(e.target.value)} autoComplete="new-password" />
-          <input type="password" placeholder="confirm new password" value={confirm} onChange={(e) => setConfirm(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') void submit(); }} autoComplete="new-password" />
+          <PasswordInput  placeholder="current password" value={current} onChange={(e) => setCurrent(e.target.value)} autoComplete="current-password" />
+          <PasswordInput  placeholder="new password (8+ chars)" value={next} onChange={(e) => setNext(e.target.value)} autoComplete="new-password" />
+          <PasswordInput  placeholder="confirm new password" value={confirm} onChange={(e) => setConfirm(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') void submit(); }} autoComplete="new-password" />
           <button className="settings-row-btn" onClick={submit} disabled={!ready}>
             {busy ? 'Re-encrypting…' : 'Change password'}
           </button>
diff --git a/packages/web-ui/src/styles.css b/packages/web-ui/src/styles.css
index b76c5ba..aa66bc8 100644
--- a/packages/web-ui/src/styles.css
+++ b/packages/web-ui/src/styles.css
@@ -89,7 +89,11 @@ body:has(.shell-dashboard) {
   .shell:not(.shell-dashboard) .content {
     max-width: 720px;
     margin: 0 auto;
-    align-self: center;
+    /* Horizontal centering only. align-self:center also centred the
+       column VERTICALLY, which on a tall viewport floated Import /
+       Login / Settings into the middle of the page with a dead band
+       above the heading. */
+    align-self: flex-start;
   }
   .shell-dashboard .content {
     max-width: none;
@@ -994,6 +998,22 @@ textarea, input {
   transition: border-color 0.15s;
 }
 textarea:focus, input:focus { border-color: var(--accent); }
+
+/* Password / PIN field with reveal toggle (PasswordInput.tsx). The wrap
+   takes the input's place in the layout; the input keeps every base
+   style and gains right padding for the eye button. */
+.pw-wrap { position: relative; display: block; width: 100%; }
+.pw-wrap .pw-input { padding-right: 42px; }
+.pw-toggle {
+  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
+  width: 28px; height: 28px; padding: 0;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: transparent; border: 0; border-radius: 6px;
+  color: var(--text-muted); cursor: pointer;
+}
+.pw-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
+.settings-inline-row .pw-wrap { flex: 1; min-width: 160px; width: auto; }
+.wallet-picker-legacy .pw-wrap { flex: 1; min-width: 160px; width: auto; }
 textarea { min-height: 100px; line-height: 1.5; }
 
 button.primary {