diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index d498908..4d26e57 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -1244,3 +1244,15 @@ textarea {
   width: 20px;
   text-align: center;
 }
+
+/* --- Setup wizard mode picker (Step 0) --- */
+.mode-cards { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
+.mode-card {
+  text-align: left; padding: 16px; border: 1px solid #30363d;
+  border-radius: 8px; background: transparent; cursor: pointer;
+  font: inherit; color: inherit; transition: border-color 0.15s, background 0.15s;
+}
+.mode-card:hover { border-color: #58a6ff; }
+.mode-card.active { border-color: #58a6ff; background: rgba(88,166,255,0.08); }
+.mode-card-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
+.mode-card-blurb { color: #8b949e; font-size: 12px; margin: 0; line-height: 1.5; }
diff --git a/extension/src/setup/setup.ts b/extension/src/setup/setup.ts
index 1cbd6d7..c32d626 100644
--- a/extension/src/setup/setup.ts
+++ b/extension/src/setup/setup.ts
@@ -273,19 +273,50 @@ function render(): void {
   }
 }
 
-// --- Step 0: Mode picker (placeholder; filled in Task 5) ---
+// --- Step 0: Mode picker ---
 
 function renderStep0(): string {
-  return '<div class="wizard-step"><p>Step 0 (placeholder)</p><button class="btn btn-primary" id="next-btn">next</button></div>';
+  const isNew = state.mode === 'new';
+  const isAttach = state.mode === 'attach';
+  return `
+    <div class="wizard-step">
+      <h3>set up relicario</h3>
+      <p class="muted" style="margin-bottom:16px;">
+        How are you using relicario on this device?
+      </p>
+      <div class="mode-cards">
+        <button class="mode-card ${isNew ? 'active' : ''}" data-mode="new">
+          <div class="mode-card-title">create new vault</div>
+          <p class="mode-card-blurb">
+            I'm setting up relicario for the first time. This will create a fresh
+            encrypted vault on a new or empty git repository.
+          </p>
+        </button>
+        <button class="mode-card ${isAttach ? 'active' : ''}" data-mode="attach">
+          <div class="mode-card-title">attach this device</div>
+          <p class="mode-card-blurb">
+            I already have a vault on another device. Connect this browser to it
+            using my passphrase and reference image.
+          </p>
+        </button>
+      </div>
+      <div class="form-actions" style="margin-top:24px;">
+        <button class="btn btn-primary" id="next-btn" ${state.mode ? '' : 'disabled'}>next</button>
+      </div>
+    </div>
+  `;
 }
 
 function attachStep0(): void {
-  // Temporary: jump straight to Step 1 so the wizard remains operable
-  // for users who already have it open during the refactor. Real Step 0
-  // is filled in by Task 5.
+  document.querySelectorAll('.mode-card').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.mode = (btn as HTMLElement).dataset.mode as 'new' | 'attach';
+      render();
+    });
+  });
   document.getElementById('next-btn')?.addEventListener('click', () => {
+    if (!state.mode) return;
     state.step = 1;
-    state.mode = 'new';  // safe default while picker is stubbed
     state.error = null;
     render();
   });
@@ -338,6 +369,7 @@ function renderStep1(): string {
       </div>
       ${state.hostType === 'gitea' ? giteaInstructions : githubInstructions}
       <div class="form-actions">
+        <button class="btn" id="back-btn">back</button>
         <button class="btn btn-primary" id="next-btn">next</button>
       </div>
     </div>
@@ -345,6 +377,12 @@ function renderStep1(): string {
 }
 
 function attachStep1(): void {
+  document.getElementById('back-btn')?.addEventListener('click', () => {
+    state.step = 0;
+    state.error = null;
+    render();
+  });
+
   document.querySelectorAll('.toggle-group button').forEach(btn => {
     btn.addEventListener('click', () => {
       state.hostType = (btn as HTMLElement).dataset.host as 'gitea' | 'github';