diff --git a/README.md b/README.md
index 7f1097b..d900566 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Vault data is encrypted on the client with a key derived from your master
 password, and the server only ever stores ciphertext + KDF parameters. A
 database breach leaks nothing usable.
 
-![Passman vault dashboard](docs/img/vault.png)
+![Passman vault dashboard with Edit, Import, and Connect actions per row](docs/img/vault.png)
 
 The vault treats credentials as connection targets, not just `name +
 password` rows: every entry carries protocol, hostname, IP, port, and
@@ -18,6 +18,14 @@ auto-clear; the server still sees only ciphertext.
 
 ![Connect dialog with JDBC, SSH, copy-command, and RDP options](docs/img/vault-connect.png)
 
+Login is optionally protected by **TOTP 2FA** (Google Authenticator,
+1Password, Authy, …) with single-use recovery codes. Vault contents
+remain zero-knowledge regardless — even if the OTP secret leaks, the
+master key the server never sees is still the only thing that decrypts
+the vault.
+
+![Two-factor authentication setup with QR code and recovery codes](docs/img/settings-2fa-setup-qr.png)
+
 ## Architecture at a glance
 
 ```
diff --git a/docs/USER_GUIDE.md b/docs/USER_GUIDE.md
index 39d6e43..06abd1b 100644
--- a/docs/USER_GUIDE.md
+++ b/docs/USER_GUIDE.md
@@ -222,7 +222,7 @@ The dialog greys out actions that don't apply to a credential:
 
 Click **+ New credential** in the top-right:
 
-![Add credential form with Protocol, Database, Environment, and per-engine fields](img/vault-add.png)
+![Add credential form with the password generator open and the SSH private-key textarea visible](img/vault-add.png)
 
 The form is **protocol-aware**:
 
@@ -357,14 +357,20 @@ schema bump.
 
 ### 5g. Two-factor authentication (TOTP)
 
-Open the **Settings** link in the sidebar's user card → click **Set up 2FA**.
+Open the **Settings** link in the sidebar's user card. With 2FA off,
+the Security section shows a single "Set up 2FA" call to action:
 
-The setup flow has three steps:
+![Settings page with 2FA disabled](img/settings-2fa-off.png)
+
+Click **Set up 2FA** to start the three-step setup flow:
 
 1. **Scan the QR** with your authenticator (Google Authenticator,
    1Password, Authy, Microsoft Authenticator, …). If your phone can't
    reach the screen, expand "Can't scan? Type this manually" and copy
    the base32 secret directly into the app.
+
+   ![2FA setup — scan QR step](img/settings-2fa-setup-qr.png)
+
 2. **Confirm the first code.** Type the 6-digit code your authenticator
    shows. Passman verifies against the stored secret and only then
    flips the `totp_enabled` flag — if you abandon the flow before this
@@ -374,9 +380,19 @@ The setup flow has three steps:
    them, download the `.txt`, or write them down — Passman keeps only
    Argon2id hashes server-side, so this list cannot be retrieved later.
 
-Once enabled, login becomes two-step: email + master password, then a
-6-digit code. Recovery codes work in place of the 6-digit code (and
-are consumed on first use — `9 remaining` becomes `8`).
+   ![2FA setup — save recovery codes step](img/settings-2fa-setup-recovery.png)
+
+Once enabled, the Settings page shows the active state + how many
+recovery codes are left:
+
+![Settings page with 2FA enabled](img/settings-2fa-on.png)
+
+Login becomes two-step: email + master password (the existing screen),
+then a 6-digit code on a second screen. Recovery codes work in place
+of the 6-digit code (and are consumed on first use — `9 remaining`
+becomes `8`):
+
+![Two-factor verification step on login](img/login-otp.png)
 
 > **Trade-off, plainly stated.** TOTP is **not** zero-knowledge —
 > RFC 6238 requires the verifier to know the shared secret, so the
diff --git a/docs/img/login-otp.png b/docs/img/login-otp.png
new file mode 100644
index 0000000..f38159f
Binary files /dev/null and b/docs/img/login-otp.png differ
diff --git a/docs/img/settings-2fa-off.png b/docs/img/settings-2fa-off.png
new file mode 100644
index 0000000..677fb28
Binary files /dev/null and b/docs/img/settings-2fa-off.png differ
diff --git a/docs/img/settings-2fa-on.png b/docs/img/settings-2fa-on.png
new file mode 100644
index 0000000..c607112
Binary files /dev/null and b/docs/img/settings-2fa-on.png differ
diff --git a/docs/img/settings-2fa-setup-qr.png b/docs/img/settings-2fa-setup-qr.png
new file mode 100644
index 0000000..a25e615
Binary files /dev/null and b/docs/img/settings-2fa-setup-qr.png differ
diff --git a/docs/img/settings-2fa-setup-recovery.png b/docs/img/settings-2fa-setup-recovery.png
new file mode 100644
index 0000000..da867c9
Binary files /dev/null and b/docs/img/settings-2fa-setup-recovery.png differ
diff --git a/docs/img/vault-add.png b/docs/img/vault-add.png
index 7b3e5fb..80dbdb1 100644
Binary files a/docs/img/vault-add.png and b/docs/img/vault-add.png differ
diff --git a/docs/img/vault-connect.png b/docs/img/vault-connect.png
index a4a2322..edda1eb 100644
Binary files a/docs/img/vault-connect.png and b/docs/img/vault-connect.png differ
diff --git a/docs/img/vault.png b/docs/img/vault.png
index 9f3440f..1d96160 100644
Binary files a/docs/img/vault.png and b/docs/img/vault.png differ
diff --git a/docs/preview/index.html b/docs/preview/index.html
index 9fda7b1..2e3d999 100644
--- a/docs/preview/index.html
+++ b/docs/preview/index.html
@@ -16,9 +16,14 @@ <h1>Passman screenshots</h1>
         <li><a href="register.html">Register</a></li>
         <li><a href="login.html">Login &mdash; default branding</a></li>
         <li><a href="login-whitelabel.html">Login &mdash; with white-label override (Acme)</a></li>
-        <li><a href="vault.html">Vault &mdash; sidebar dashboard</a></li>
+        <li><a href="login-otp.html">Login &mdash; 2FA OTP step</a></li>
+        <li><a href="vault.html">Vault &mdash; sidebar dashboard (Edit + Import + Settings)</a></li>
         <li><a href="vault-connect.html">Vault &mdash; Connect dialog (JDBC / SSH / RDP / copy-command)</a></li>
-        <li><a href="vault-add.html">Vault &mdash; add credential form</a></li>
+        <li><a href="vault-add.html">Vault &mdash; add credential form (password generator + SSH key)</a></li>
+        <li><a href="settings-2fa-off.html">Settings &mdash; 2FA disabled</a></li>
+        <li><a href="settings-2fa-setup-qr.html">Settings &mdash; 2FA setup, scan QR step</a></li>
+        <li><a href="settings-2fa-setup-recovery.html">Settings &mdash; 2FA setup, save recovery codes</a></li>
+        <li><a href="settings-2fa-on.html">Settings &mdash; 2FA enabled</a></li>
         <li><a href="extension-locked.html">Extension &mdash; locked</a></li>
         <li><a href="extension-unlocked.html">Extension &mdash; unlocked</a></li>
       </ul>
diff --git a/docs/preview/login-otp.html b/docs/preview/login-otp.html
new file mode 100644
index 0000000..45b8cdb
--- /dev/null
+++ b/docs/preview/login-otp.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Passman — Two-factor verification</title>
+    <link rel="stylesheet" href="../../packages/web/src/styles.css" />
+  </head>
+  <body>
+    <main class="auth-container">
+      <div class="auth-brand">
+        <div class="brand-mark brand-mark-lg"></div>
+        <span class="auth-brand-name">Passman</span>
+      </div>
+      <h1>Two-factor verification</h1>
+      <p class="auth-tagline">
+        Enter the 6-digit code from your authenticator app, or one of your
+        recovery codes.
+      </p>
+      <form>
+        <label>
+          Authenticator code
+          <input
+            inputmode="numeric"
+            pattern="[0-9]*"
+            value="142 857"
+            placeholder="123456 or xxxx-xxxx"
+          />
+        </label>
+        <button type="submit">Continue</button>
+      </form>
+      <p>
+        <button type="button" class="user-card-action">← Start over</button>
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/docs/preview/settings-2fa-off.html b/docs/preview/settings-2fa-off.html
new file mode 100644
index 0000000..92d9cc5
--- /dev/null
+++ b/docs/preview/settings-2fa-off.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Passman — Settings</title>
+    <link rel="stylesheet" href="../../packages/web/src/styles.css" />
+  </head>
+  <body>
+    <main class="auth-container settings-container">
+      <div class="auth-brand">
+        <div class="brand-mark brand-mark-lg"></div>
+        <span class="auth-brand-name">Passman</span>
+      </div>
+      <h1>Settings</h1>
+      <p class="auth-tagline">Zero-knowledge password manager</p>
+
+      <section class="settings-section">
+        <header>
+          <h2>Two-factor authentication</h2>
+          <p class="settings-section-hint">
+            Adds a 6-digit code from your authenticator app (Google Authenticator,
+            1Password, Authy, …) to login. <strong>Note:</strong> enabling 2FA
+            stores the OTP secret server-side. Vault contents stay encrypted
+            with your master key — the server still can't read them.
+          </p>
+        </header>
+
+        <div class="settings-row">
+          <div>
+            <div class="settings-status">
+              <span class="status-dot status-dot-off"></span> Not enabled
+            </div>
+          </div>
+          <button type="button" class="btn btn-primary">Set up 2FA</button>
+        </div>
+      </section>
+
+      <p class="settings-back">
+        <a href="vault.html">← Back to vault</a>
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/docs/preview/settings-2fa-on.html b/docs/preview/settings-2fa-on.html
new file mode 100644
index 0000000..0106e84
--- /dev/null
+++ b/docs/preview/settings-2fa-on.html
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Passman — Settings (2FA enabled)</title>
+    <link rel="stylesheet" href="../../packages/web/src/styles.css" />
+  </head>
+  <body>
+    <main class="auth-container settings-container">
+      <div class="auth-brand">
+        <div class="brand-mark brand-mark-lg"></div>
+        <span class="auth-brand-name">Passman</span>
+      </div>
+      <h1>Settings</h1>
+      <p class="auth-tagline">Zero-knowledge password manager</p>
+
+      <section class="settings-section">
+        <header>
+          <h2>Two-factor authentication</h2>
+          <p class="settings-section-hint">
+            Adds a 6-digit code from your authenticator app (Google Authenticator,
+            1Password, Authy, …) to login. <strong>Note:</strong> enabling 2FA
+            stores the OTP secret server-side. Vault contents stay encrypted
+            with your master key — the server still can't read them.
+          </p>
+        </header>
+
+        <div class="settings-row">
+          <div>
+            <div class="settings-status">
+              <span class="status-dot status-dot-on"></span> Enabled
+            </div>
+            <div class="settings-status-meta">9 recovery codes remaining</div>
+          </div>
+          <button type="button" class="btn">Disable 2FA</button>
+        </div>
+      </section>
+
+      <p class="settings-back">
+        <a href="vault.html">← Back to vault</a>
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/docs/preview/settings-2fa-setup-qr.html b/docs/preview/settings-2fa-setup-qr.html
new file mode 100644
index 0000000..e31e4ff
--- /dev/null
+++ b/docs/preview/settings-2fa-setup-qr.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Passman — Set up 2FA</title>
+    <link rel="stylesheet" href="../../packages/web/src/styles.css" />
+  </head>
+  <body>
+    <main class="auth-container settings-container">
+      <div class="auth-brand">
+        <div class="brand-mark brand-mark-lg"></div>
+        <span class="auth-brand-name">Passman</span>
+      </div>
+      <h1>Settings</h1>
+      <p class="auth-tagline">Zero-knowledge password manager</p>
+
+      <section class="settings-section" style="opacity: 0.4">
+        <header>
+          <h2>Two-factor authentication</h2>
+          <p class="settings-section-hint">
+            Adds a 6-digit code from your authenticator app to login.
+          </p>
+        </header>
+        <div class="settings-row">
+          <div>
+            <div class="settings-status">
+              <span class="status-dot status-dot-off"></span> Not enabled
+            </div>
+          </div>
+          <button type="button" class="btn btn-primary">Set up 2FA</button>
+        </div>
+      </section>
+    </main>
+
+    <!-- ============================== Setup modal ============================== -->
+    <div class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal modal-wide">
+        <div class="modal-head">
+          <div>
+            <h2>Set up two-factor authentication</h2>
+            <div class="target">Step 1 of 2 · Scan the QR with your authenticator</div>
+          </div>
+          <button class="x" aria-label="Close">✕</button>
+        </div>
+
+        <div class="modal-body">
+          <div class="totp-scan">
+            <div class="totp-qr" aria-label="QR code for your authenticator app"><svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 47 47" shape-rendering="crispEdges"><path fill="#0d0f10" d="M0 0h47v47H0z"/><path stroke="#3ECF8E" d="M1 1.5h7m2 0h2m3 0h2m1 0h1m2 0h1m2 0h1m1 0h2m3 0h1m1 0h1m3 0h1m1 0h7M1 2.5h1m5 0h1m1 0h2m4 0h1m1 0h1m1 0h1m1 0h2m3 0h2m1 0h4m1 0h1m1 0h1m2 0h1m5 0h1M1 3.5h1m1 0h3m1 0h1m2 0h2m1 0h2m1 0h1m3 0h1m1 0h3m1 0h1m3 0h2m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1M1 4.5h1m1 0h3m1 0h1m3 0h1m3 0h2m4 0h1m1 0h1m1 0h5m4 0h1m1 0h2m1 0h1m1 0h3m1 0h1M1 5.5h1m1 0h3m1 0h1m1 0h4m1 0h2m3 0h1m1 0h7m2 0h2m3 0h3m1 0h1m1 0h3m1 0h1M1 6.5h1m5 0h1m6 0h5m1 0h2m3 0h2m1 0h1m2 0h1m1 0h2m4 0h1m5 0h1M1 7.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M14 8.5h1m5 0h2m3 0h1m1 0h3m1 0h3m1 0h1m1 0h1M1 9.5h1m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h9m4 0h1m2 0h1m3 0h1m2 0h1M1 10.5h1m3 0h1m2 0h1m1 0h4m1 0h3m5 0h3m3 0h1m2 0h1m1 0h1m2 0h1m4 0h1m2 0h1M1 11.5h3m1 0h1m1 0h1m1 0h4m1 0h1m4 0h1m1 0h1m1 0h1m5 0h1m1 0h2m4 0h2m1 0h6M1 12.5h1m3 0h1m2 0h1m2 0h2m2 0h4m2 0h2m2 0h2m1 0h2m2 0h2m1 0h1m4 0h1m4 0h1M3 13.5h1m1 0h1m1 0h1m1 0h1m2 0h1m2 0h5m4 0h4m2 0h1m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1M2 14.5h3m1 0h1m1 0h1m3 0h1m2 0h1m1 0h3m1 0h1m2 0h1m1 0h3m1 0h4m2 0h1m1 0h1m5 0h1M2 15.5h3m1 0h3m2 0h2m1 0h1m1 0h1m2 0h1m4 0h1m1 0h3m4 0h2m10 0h1M1 16.5h3m5 0h3m2 0h1m1 0h4m1 0h1m2 0h1m2 0h3m1 0h1m1 0h1m1 0h5m1 0h3M1 17.5h1m2 0h1m1 0h3m2 0h2m1 0h1m1 0h1m1 0h1m1 0h2m2 0h7m1 0h4m3 0h3m1 0h2M2 18.5h1m6 0h1m1 0h1m1 0h1m2 0h1m1 0h2m1 0h2m1 0h6m2 0h1m1 0h1m1 0h1m2 0h2m2 0h1m1 0h1M2 19.5h2m2 0h2m4 0h1m3 0h3m4 0h1m1 0h1m2 0h1m1 0h4m4 0h1m3 0h2M1 20.5h1m1 0h4m3 0h4m1 0h2m3 0h1m6 0h3m2 0h1m2 0h9m1 0h1M1 21.5h1m3 0h5m3 0h3m3 0h1m1 0h9m1 0h1m2 0h2m1 0h5m3 0h1M3 22.5h3m3 0h1m2 0h4m2 0h4m3 0h2m2 0h2m1 0h3m1 0h2m3 0h1m2 0h2M4 23.5h2m1 0h1m1 0h3m1 0h1m1 0h4m2 0h1m1 0h1m1 0h1m3 0h2m1 0h1m3 0h2m1 0h1m1 0h1m1 0h3M1 24.5h1m1 0h3m3 0h1m2 0h3m3 0h2m1 0h1m3 0h2m2 0h1m2 0h2m1 0h1m1 0h1m3 0h1m2 0h1M1 25.5h1m1 0h7m2 0h1m1 0h1m2 0h2m1 0h11m3 0h1m2 0h6M5 26.5h1m3 0h4m1 0h1m2 0h2m4 0h2m4 0h5m2 0h3m4 0h3M2 27.5h1m2 0h1m1 0h1m2 0h3m2 0h2m1 0h2m9 0h1m2 0h1m1 0h1m2 0h1m1 0h1m1 0h5M1 28.5h1m1 0h1m1 0h2m1 0h5m2 0h8m5 0h1m4 0h2m3 0h2m1 0h1m3 0h1M1 29.5h4m2 0h1m1 0h2m4 0h2m2 0h1m1 0h2m3 0h1m2 0h1m2 0h3m2 0h4m1 0h1m1 0h1M1 30.5h1m2 0h3m3 0h5m2 0h2m1 0h1m2 0h3m1 0h3m1 0h1m1 0h1m3 0h2m3 0h3M2 31.5h2m2 0h2m1 0h2m2 0h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h1m2 0h1m1 0h1m4 0h4M4 32.5h1m5 0h1m1 0h1m1 0h1m5 0h1m3 0h2m1 0h4m2 0h1m1 0h1m1 0h4m1 0h4M1 33.5h4m1 0h2m3 0h5m1 0h3m1 0h1m3 0h1m1 0h1m1 0h1m1 0h3m4 0h1m4 0h2M1 34.5h1m2 0h1m1 0h1m1 0h2m4 0h2m1 0h2m2 0h2m2 0h2m1 0h1m4 0h1m2 0h1m1 0h2m4 0h2M5 35.5h1m1 0h4m2 0h2m1 0h2m2 0h4m1 0h1m2 0h1m3 0h1m5 0h2m2 0h1m2 0h1M2 36.5h4m2 0h1m3 0h3m2 0h2m1 0h4m1 0h1m1 0h3m1 0h3m1 0h1m2 0h7M1 37.5h1m2 0h2m1 0h6m1 0h15m1 0h2m1 0h1m1 0h1m1 0h5m2 0h1M9 38.5h1m2 0h1m2 0h1m1 0h1m2 0h2m3 0h1m1 0h2m1 0h1m4 0h3m3 0h2m2 0h1M1 39.5h7m3 0h1m4 0h1m1 0h4m1 0h1m1 0h1m3 0h1m2 0h1m4 0h1m1 0h1m1 0h1m1 0h3M1 40.5h1m5 0h1m5 0h1m4 0h1m1 0h2m3 0h1m1 0h1m1 0h5m2 0h2m3 0h1M1 41.5h1m1 0h3m1 0h1m1 0h1m3 0h3m2 0h2m1 0h5m2 0h2m2 0h2m1 0h7m2 0h2M1 42.5h1m1 0h3m1 0h1m2 0h3m1 0h1m2 0h1m2 0h3m3 0h1m3 0h1m1 0h2m2 0h3m1 0h3m1 0h2M1 43.5h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h3m1 0h3m1 0h1m1 0h2m1 0h1m2 0h1m1 0h2m4 0h1m5 0h1m1 0h1M1 44.5h1m5 0h1m3 0h1m2 0h9m2 0h1m2 0h1m3 0h2m2 0h4m4 0h1M1 45.5h7m1 0h1m4 0h2m2 0h2m1 0h2m2 0h4m2 0h7m1 0h2m3 0h2"/></svg></div>
+            <div class="totp-scan-info">
+              <p class="settings-section-hint">
+                Open Google Authenticator / 1Password / Authy / etc. and scan
+                this code. Then click <strong>Next</strong>.
+              </p>
+              <details class="totp-manual" open>
+                <summary>Can't scan? Type this manually</summary>
+                <code class="totp-secret-display">JBSW Y3DP EHPK 3PXP GS6F W2T2 EHPK</code>
+                <button type="button" class="icon-btn">Copy</button>
+              </details>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-foot">
+          <span class="spacer"></span>
+          <button type="button" class="btn btn-primary">Next →</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/preview/settings-2fa-setup-recovery.html b/docs/preview/settings-2fa-setup-recovery.html
new file mode 100644
index 0000000..e37369e
--- /dev/null
+++ b/docs/preview/settings-2fa-setup-recovery.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Passman — Save your recovery codes</title>
+    <link rel="stylesheet" href="../../packages/web/src/styles.css" />
+  </head>
+  <body>
+    <main class="auth-container settings-container">
+      <div class="auth-brand">
+        <div class="brand-mark brand-mark-lg"></div>
+        <span class="auth-brand-name">Passman</span>
+      </div>
+      <h1>Settings</h1>
+      <p class="auth-tagline">Zero-knowledge password manager</p>
+
+      <section class="settings-section" style="opacity: 0.4">
+        <header>
+          <h2>Two-factor authentication</h2>
+          <p class="settings-section-hint">
+            Adds a 6-digit code from your authenticator app to login.
+          </p>
+        </header>
+      </section>
+    </main>
+
+    <!-- ============================== Recovery codes modal ============================== -->
+    <div class="modal-backdrop" role="dialog" aria-modal="true">
+      <div class="modal modal-wide">
+        <div class="modal-head">
+          <div>
+            <h2>Save your recovery codes</h2>
+            <div class="target">One-time only — store these somewhere safe</div>
+          </div>
+        </div>
+
+        <div class="modal-body">
+          <div class="totp-recovery">
+            <p class="warning">
+              ⚠️ <strong>Save these codes now.</strong> Each one logs you in
+              once if you lose access to your authenticator app. They are
+              shown <strong>only this time</strong> — Passman keeps only a
+              hash on the server, so this list cannot be recovered later.
+            </p>
+            <div class="totp-recovery-grid">
+              <code class="totp-recovery-code">a4n2-mz8q</code>
+              <code class="totp-recovery-code">k7vb-6xwd</code>
+              <code class="totp-recovery-code">tr5g-9hjf</code>
+              <code class="totp-recovery-code">e3p1-cdm7</code>
+              <code class="totp-recovery-code">y8s4-uwq2</code>
+              <code class="totp-recovery-code">b6kn-rt3v</code>
+              <code class="totp-recovery-code">x9z2-fl5p</code>
+              <code class="totp-recovery-code">m1qa-7gjy</code>
+              <code class="totp-recovery-code">w4rh-d8ke</code>
+              <code class="totp-recovery-code">o2vc-px6n</code>
+            </div>
+            <div class="totp-recovery-actions">
+              <button type="button" class="btn">Copy all</button>
+              <button type="button" class="btn">Download as .txt</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-foot">
+          <span class="spacer"></span>
+          <button type="button" class="btn btn-primary">I've saved them — finish</button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/docs/preview/vault-add.html b/docs/preview/vault-add.html
index 8c5b1c7..0b10825 100644
--- a/docs/preview/vault-add.html
+++ b/docs/preview/vault-add.html
@@ -24,7 +24,11 @@
           <div class="avatar">VA</div>
           <div class="who">
             <div class="email">ops@example.az</div>
-            <small>Vault unlocked</small>
+            <small>
+              <a href="#" class="user-card-action">Settings</a>
+              ·
+              <button type="button" class="user-card-action">Export</button>
+            </small>
           </div>
         </div>
       </aside>
@@ -35,7 +39,10 @@
             <h1>All credentials</h1>
             <p class="sub"><span>6 entries</span><span class="dot"></span><span>Decrypted in your browser</span></p>
           </div>
-          <button class="btn btn-primary">+ New credential</button>
+          <div class="vault-headrow-actions">
+            <button class="btn btn-ghost">↥ Import</button>
+            <button class="btn btn-primary">+ New credential</button>
+          </div>
         </div>
 
         <form class="add-form">
@@ -44,37 +51,37 @@ <h2>New credential</h2>
           <div class="add-form-grid">
             <label>
               Name
-              <input value="staging-pg" placeholder="prod-pg-primary" />
+              <input value="prod-pg-bastion" placeholder="prod-pg-primary" />
             </label>
             <label>
               Protocol
               <select>
                 <option>— auto-detect from port —</option>
-                <option selected>PostgreSQL</option>
+                <option>PostgreSQL</option>
                 <option>MySQL</option>
                 <option>Oracle</option>
-                <option>SSH</option>
+                <option selected>SSH</option>
                 <option>RDP (Windows Remote Desktop)</option>
               </select>
             </label>
             <label>
               Environment
-              <input value="staging" placeholder="prod / staging / dev" />
+              <input value="prod" placeholder="prod / staging / dev" />
             </label>
           </div>
 
           <div class="add-form-grid">
             <label>
               Hostname
-              <input value="db-staging-01" placeholder="db-prod-01" />
+              <input value="db-prod-02" placeholder="db-prod-01" />
             </label>
             <label>
               IP address
-              <input value="10.0.5.12" placeholder="10.0.0.42" />
+              <input value="10.0.0.43" placeholder="10.0.0.42" />
             </label>
             <label>
               Port
-              <input type="number" value="5432" placeholder="5432" />
+              <input type="number" value="22" placeholder="5432" />
             </label>
           </div>
 
@@ -83,23 +90,66 @@ <h2>New credential</h2>
               User
               <input value="postgres" placeholder="postgres" />
             </label>
-            <label>
-              Password
-              <input type="password" value="............" />
+            <label class="pw-field">
+              <span class="pw-field-label-row">
+                Password
+                <button type="button" class="pw-field-gen-toggle">Hide generator</button>
+              </span>
+              <input type="password" value="............................" />
             </label>
           </div>
 
-          <div class="add-form-grid">
+          <div class="pw-gen">
+            <div class="pw-gen-output">
+              <code class="pw-gen-value">vY2!gK7hQ9xP-mZ4wE6tR8nC</code>
+              <button type="button" class="icon-btn" title="Regenerate">↻</button>
+            </div>
+            <div class="pw-gen-meter" data-strength="excellent">
+              <div class="pw-gen-meter-bar">
+                <div class="pw-gen-meter-fill" style="width: 100%"></div>
+              </div>
+              <span class="pw-gen-meter-label">144 bits · excellent</span>
+            </div>
+            <div class="pw-gen-row">
+              <label class="pw-gen-length">
+                Length: <strong>24</strong>
+                <input type="range" min="6" max="64" value="24" />
+              </label>
+            </div>
+            <div class="pw-gen-row pw-gen-checks">
+              <label><input type="checkbox" checked /> a–z</label>
+              <label><input type="checkbox" checked /> A–Z</label>
+              <label><input type="checkbox" checked /> 0–9</label>
+              <label><input type="checkbox" checked /> !@#$%</label>
+              <label><input type="checkbox" /> No 0/O/1/l</label>
+            </div>
+            <div class="pw-gen-actions">
+              <button type="button" class="btn btn-primary">Use this password</button>
+              <button type="button" class="btn btn-ghost">Cancel</button>
+            </div>
+          </div>
+
+          <div class="add-form-grid full-row">
             <label>
-              Database
-              <input value="app" placeholder="app" />
+              URL
+              <input value="ssh://postgres@db-prod-02:22" placeholder="https://… or postgres://…" />
             </label>
           </div>
 
           <div class="add-form-grid full-row">
             <label>
-              URL
-              <input value="postgres://db-staging-01:5432/app" placeholder="https://… or postgres://…" />
+              SSH private key (PEM)
+              <textarea class="ssh-key-input" rows="6" spellcheck="false">-----BEGIN OPENSSH PRIVATE KEY-----
+b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
+QyNTUxOQAAACBOgPYwIcMqkB+vHrrJBxdLs23p0qNkZmLCaUKmzVXBgwAAAJgkZX/gJGV/
+4AAAAAtzc2gtZWQyNTUxOQAAACBOgPYwIcMqkB+vHrrJBxdLs23p0qNkZmLCaUKmzVXBgw
+…
+-----END OPENSSH PRIVATE KEY-----</textarea>
+              <span class="ssh-key-hint">
+                Optional. Encrypted with the same vault key as the password —
+                the server never sees plaintext. Used by the Connect dialog to
+                offer a "Download .pem" path with an `ssh -i` command.
+              </span>
             </label>
           </div>
 
diff --git a/docs/preview/vault.html b/docs/preview/vault.html
index 2a7c70f..25e2673 100644
--- a/docs/preview/vault.html
+++ b/docs/preview/vault.html
@@ -64,7 +64,11 @@
           <div class="avatar">VA</div>
           <div class="who">
             <div class="email">ops@example.az</div>
-            <small>Vault unlocked</small>
+            <small>
+              <a href="#" class="user-card-action">Settings</a>
+              ·
+              <button type="button" class="user-card-action">Export</button>
+            </small>
           </div>
         </div>
       </aside>
@@ -94,7 +98,10 @@ <h1>All credentials</h1>
               <span>Decrypted in your browser</span>
             </p>
           </div>
-          <button class="btn btn-primary">+ New credential</button>
+          <div class="vault-headrow-actions">
+            <button class="btn btn-ghost">↥ Import</button>
+            <button class="btn btn-primary">+ New credential</button>
+          </div>
         </div>
 
         <div class="vault-toolbar">
@@ -141,7 +148,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-prod">prod</span></div>
               <div class="last-used">2m ago</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
 
             <div class="row">
@@ -165,7 +175,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-prod">prod</span></div>
               <div class="last-used">1h ago</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
 
             <div class="row">
@@ -192,7 +205,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-prod">prod</span></div>
               <div class="last-used">3h ago</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
 
             <div class="row">
@@ -216,7 +232,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-staging">staging</span></div>
               <div class="last-used">yesterday</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
 
             <div class="row">
@@ -240,7 +259,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-cache">cache</span></div>
               <div class="last-used">3d ago</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
 
             <div class="row">
@@ -264,7 +286,10 @@ <h1>All credentials</h1>
               <div><span class="tag tag-dev">dev</span></div>
               <div class="last-used">5d ago</div>
               <div><button class="connect-btn">Connect <span class="arrow">→</span></button></div>
-              <div><button class="kebab">✕</button></div>
+              <div class="row-actions">
+                <button class="kebab" title="Edit">✎</button>
+                <button class="kebab" title="Delete">✕</button>
+              </div>
             </div>
           </div>
         </div>