diff --git a/frontend/src/components/BlueScreen.vue b/frontend/src/components/BlueScreen.vue
new file mode 100644
index 0000000..706131b
--- /dev/null
+++ b/frontend/src/components/BlueScreen.vue
@@ -0,0 +1,40 @@
+<template>
+  <pre class="bsod-text">{{ text }}</pre>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  countdown: { type: Number, default: 3 },
+})
+
+const text = computed(() => `\
+Windows
+
+A fatal exception 0E has occurred at 0028:C061B3F7 in VxD git-
+extract(09) + 0000B3F7. The current application will be
+terminated.
+
+*  Press any key to terminate the current application.
+
+*  Press CTRL+ALT+DEL to restart your computer. You will
+   lose any unsaved information in all applications.
+
+
+Restarting git-extract setup in ${props.countdown}...\
+`)
+</script>
+
+<style scoped>
+.bsod-text {
+  display: block;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 14px;
+  line-height: 1.65;
+  color: #fff;
+  white-space: pre;
+  margin: 48px 10% 0;
+  padding: 0;
+}
+</style>
diff --git a/frontend/src/components/BootSequence.vue b/frontend/src/components/BootSequence.vue
new file mode 100644
index 0000000..c8a27df
--- /dev/null
+++ b/frontend/src/components/BootSequence.vue
@@ -0,0 +1,622 @@
+<template>
+  <div class="boot-overlay" :class="`boot-phase--${phase}`">
+
+    <!-- BSOD -->
+    <BlueScreen v-if="phase === 'bsod'" :countdown="bsodCountdown" />
+
+    <!-- BIOS POST screen -->
+    <div v-else-if="phase === 'bios'" class="bios-screen">
+      <div
+        v-for="(item, i) in BIOS_CONTENT"
+        :key="i"
+        class="boot-line bios-line"
+        :class="{ 'bios-line--header': i < 2 }"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+
+      <!-- Top-right logo — pixel-art canvas, 80×50 px drawn natively, scaled 3× -->
+      <canvas ref="biosLogoCanvas" class="bios-logo" />
+    </div>
+
+    <!-- BIOS SETUP UTILITY (DEL) -->
+    <div v-else-if="phase === 'bios-setup'" class="setup-screen">
+      <div class="setup-topbar">
+        <span>ROM PCI/ISA BIOS (2A59G529)</span>
+        <span>CMOS SETUP UTILITY — AWARD SOFTWARE, INC.</span>
+      </div>
+
+      <div class="setup-body">
+        <div class="setup-menu">
+          <div
+            v-for="(item, i) in SETUP_MENU"
+            :key="i"
+            class="setup-menu__item"
+            :class="{ 'setup-menu__item--active': biosSetupItem === i }"
+          >{{ item }}</div>
+        </div>
+
+        <div class="setup-hints">
+          <span>Esc : Quit</span>
+          <span>↑ ↓ → ← : Select Item</span>
+          <span>Enter / F10 : Save &amp; Exit</span>
+        </div>
+      </div>
+
+      <div class="setup-botbar">
+        <span>Time : {{ setupTime }}</span>
+        <span>Date : {{ setupDate }}</span>
+        <span>Base Memory : 640K</span>
+        <span>Ext Memory : 523264K</span>
+      </div>
+    </div>
+
+    <!-- BOOT DEVICE MENU (F12) -->
+    <div v-else-if="phase === 'boot-menu'" class="bootmenu-screen">
+      <div class="bootmenu-box">
+        <div class="bootmenu-title">Boot Device Priority</div>
+        <div class="bootmenu-line" />
+        <div
+          v-for="(dev, i) in BOOT_DEVICES"
+          :key="i"
+          class="bootmenu-item"
+          :class="{ 'bootmenu-item--active': bootMenuDeviceIdx === i }"
+        >
+          <span class="bootmenu-item__arrow">{{ bootMenuDeviceIdx === i ? '►' : ' ' }}</span>
+          <span>{{ dev.label }}</span>
+        </div>
+        <div class="bootmenu-line" />
+        <div class="bootmenu-hint">↑ ↓ Select &nbsp;&nbsp; Enter Boot &nbsp;&nbsp; Esc Cancel</div>
+      </div>
+    </div>
+
+    <!-- HDD BOOT FAILURE (when user picks Hard Disk from boot menu) -->
+    <div v-else-if="phase === 'hdd-error'" class="hdd-error-screen">
+      <div class="hdd-error-msg">DISK BOOT FAILURE, INSERT SYSTEM DISK AND PRESS ENTER</div>
+      <div class="hdd-error-fallback">Switching to CD-ROM boot…</div>
+    </div>
+
+    <!-- CD boot -->
+    <div v-else-if="phase === 'cdboot'" class="cdboot-screen">
+      <div
+        v-for="(item, i) in CDBOOT_CONTENT"
+        :key="i"
+        class="boot-line cdboot-line"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+    </div>
+
+    <!-- Starting Winders 98 -->
+    <div v-else-if="phase === 'win98'" class="win98start-screen">
+      <div
+        v-for="(item, i) in WIN98_CONTENT"
+        :key="i"
+        class="boot-line win98-line"
+        :style="{ '--d': item.delay + 'ms' }"
+      >{{ item.text }}</div>
+    </div>
+
+    <!-- 'black' phase: just the black background, no content -->
+
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import BlueScreen from './BlueScreen.vue'
+
+const emit = defineEmits(['done'])
+
+// ── State ──────────────────────────────────────────────────────
+const phase          = ref('bsod')
+const bsodCountdown  = ref(3)
+const biosLogoCanvas = ref(null)
+const biosSetupItem  = ref(6)     // pre-select "SAVE & EXIT SETUP"
+const bootMenuDeviceIdx = ref(0)
+
+// ── Timer management ───────────────────────────────────────────
+const timers = []   // plain array — not reactive, just for cleanup
+
+function go(p, ms) {
+  timers.push(setTimeout(() => { phase.value = p }, ms))
+}
+
+function cancelAll() {
+  timers.forEach(clearTimeout)
+  timers.length = 0
+}
+
+// ── Boot content ───────────────────────────────────────────────
+const BIOS_CONTENT = [
+  { text: 'Fenix - RewardBIOS v6.00PG, An Energy Star Companion',      delay: 0 },
+  { text: 'Copyright (C) 1984-2001, Fenix Technologies, LTD',          delay: 60 },
+  { text: '',                                                            delay: 150 },
+  { text: 'git-extract Systems, Inc.',                                  delay: 220 },
+  { text: '',                                                            delay: 310 },
+  { text: 'Main Processor  : Intek Pentagram III 450MHz',               delay: 380 },
+  { text: 'Math Coprocessor: Installed',                                delay: 450 },
+  { text: 'Floppy Drive A  : 1.44MB  3.5"',                            delay: 520 },
+  { text: '',                                                            delay: 600 },
+  { text: 'Memory Test :      16384K',                                  delay: 750 },
+  { text: 'Memory Test :     131072K',                                  delay: 950 },
+  { text: 'Memory Test :     524288K  OK',                              delay: 1150 },
+  { text: '',                                                            delay: 1350 },
+  { text: 'Detecting Primary Master   ...  XS320423A      Ultra DXA Mode 5', delay: 1550 },
+  { text: 'Detecting Primary Slave    ...  None',                       delay: 1830 },
+  { text: 'Detecting Secondary Master ...  AZUS CD-524E   PIO Mode 4', delay: 2110 },
+  { text: 'Detecting Secondary Slave  ...  None',                       delay: 2390 },
+  { text: '',                                                            delay: 2600 },
+  { text: 'Press <DEL> to enter SETUP   Press <F12> for Boot Menu',    delay: 2800 },
+  { text: '',                                                            delay: 3100 },
+  { text: 'Booting from CD-ROM...',                                     delay: 3400 },
+]
+
+const CDBOOT_CONTENT = [
+  { text: 'ATAPI CD-ROM: AZUS CD-524E',         delay: 0 },
+  { text: '',                                    delay: 300 },
+  { text: 'Loading boot sector...',              delay: 500 },
+  { text: '',                                    delay: 850 },
+  { text: 'Press any key to boot from CD-ROM.', delay: 1100 },
+]
+
+const WIN98_CONTENT = [
+  { text: 'Microtough Winders 98',           delay: 0 },
+  { text: '',                                delay: 200 },
+  { text: '         Starting Winders 98...', delay: 400 },
+]
+
+// ── BIOS setup menu items (2-column grid) ──────────────────────
+const SETUP_MENU = [
+  'STANDARD CMOS SETUP',    'SUPERVISOR PASSWORD',
+  'BIOS FEATURES SETUP',    'USER PASSWORD',
+  'CHIPSET FEATURES SETUP', 'IDE HDD AUTO DETECTION',
+  'POWER MANAGEMENT SETUP', 'HDD LOW LEVEL FORMAT',
+  'PNP/PCI CONFIGURATION',  'SAVE & EXIT SETUP',
+  'LOAD BIOS DEFAULTS',     'EXIT WITHOUT SAVING',
+]
+
+// ── Boot device menu ───────────────────────────────────────────
+const BOOT_DEVICES = [
+  { label: 'CD-ROM Drive      (AZUS CD-524E)',  key: 'cd'  },
+  { label: 'Hard Disk Drive   (XS320423A)',     key: 'hdd' },
+  { label: 'Floppy Disk Drive (A:)',            key: 'fdd' },
+]
+
+// ── Fake BIOS clock (shows real time) ─────────────────────────
+const now = new Date()
+const setupTime = now.toTimeString().slice(0, 8)
+const setupDate = now.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: '2-digit', year: 'numeric' })
+
+// ── Resume helpers ─────────────────────────────────────────────
+/** Cancel all pending timeouts and schedule the boot tail from the cdboot phase. */
+function resumeFromCdBoot(flashMs = 400) {
+  cancelAll()
+  phase.value = 'black'
+  go('cdboot', flashMs)
+  go('black',  flashMs + 1650)
+  go('win98',  flashMs + 2050)
+  go('black',  flashMs + 3750)
+  timers.push(setTimeout(() => emit('done'), flashMs + 4250))
+}
+
+// ── Keyboard handler ───────────────────────────────────────────
+function onKeyDown(e) {
+  const p = phase.value
+
+  // ── BIOS POST: DEL → Setup, F12 → Boot Menu ─────────────────
+  if (p === 'bios') {
+    if (e.key === 'Delete') {
+      e.preventDefault()
+      cancelAll()
+      biosSetupItem.value = 6       // pre-select "SAVE & EXIT SETUP"
+      phase.value = 'bios-setup'
+    } else if (e.key === 'F12') {
+      e.preventDefault()
+      cancelAll()
+      bootMenuDeviceIdx.value = 0
+      phase.value = 'boot-menu'
+    }
+    return
+  }
+
+  // ── BIOS Setup utility ───────────────────────────────────────
+  if (p === 'bios-setup') {
+    e.preventDefault()
+    const len = SETUP_MENU.length
+    if (e.key === 'ArrowDown')  biosSetupItem.value = (biosSetupItem.value + 2) % len
+    if (e.key === 'ArrowUp')    biosSetupItem.value = (biosSetupItem.value - 2 + len) % len
+    if (e.key === 'ArrowRight') biosSetupItem.value = biosSetupItem.value % 2 === 0 ? Math.min(biosSetupItem.value + 1, len - 1) : biosSetupItem.value
+    if (e.key === 'ArrowLeft')  biosSetupItem.value = biosSetupItem.value % 2 === 1 ? biosSetupItem.value - 1 : biosSetupItem.value
+    if (e.key === 'Escape' || e.key === 'F10' || e.key === 'Enter') {
+      resumeFromCdBoot(400)
+    }
+    return
+  }
+
+  // ── Boot device menu ─────────────────────────────────────────
+  if (p === 'boot-menu') {
+    e.preventDefault()
+    const len = BOOT_DEVICES.length
+    if (e.key === 'ArrowDown') bootMenuDeviceIdx.value = (bootMenuDeviceIdx.value + 1) % len
+    if (e.key === 'ArrowUp')   bootMenuDeviceIdx.value = (bootMenuDeviceIdx.value - 1 + len) % len
+    if (e.key === 'Enter') {
+      const dev = BOOT_DEVICES[bootMenuDeviceIdx.value]
+      if (dev.key === 'hdd') {
+        // HDD path: show disk-boot failure, then fall back to CD
+        cancelAll()
+        phase.value = 'hdd-error'
+        timers.push(setTimeout(() => resumeFromCdBoot(0), 2800))
+      } else {
+        resumeFromCdBoot(0)
+      }
+    }
+    if (e.key === 'Escape') resumeFromCdBoot(0)
+    return
+  }
+
+  // ── CD boot: any key skips the "press any key" wait ──────────
+  if (p === 'cdboot') {
+    e.preventDefault()
+    cancelAll()
+    phase.value = 'black'
+    go('win98',  300)
+    go('black',  2000)
+    timers.push(setTimeout(() => emit('done'), 2500))
+  }
+}
+
+// ── BIOS logo (pixel art) ─────────────────────────────────────
+watch(phase, val => { if (val === 'bios') nextTick(() => drawBiosLogo()) })
+
+function drawBiosLogo() {
+  const canvas = biosLogoCanvas.value
+  if (!canvas) return
+
+  const W = 80, H = 50
+  canvas.width  = W
+  canvas.height = H
+  const ctx = canvas.getContext('2d')
+
+  // Dithered dark-blue background (2-colour checkerboard)
+  for (let y = 0; y < H; y++) {
+    for (let x = 0; x < W; x++) {
+      ctx.fillStyle = (x + y) % 2 === 0 ? '#00007B' : '#000055'
+      ctx.fillRect(x, y, 1, 1)
+    }
+  }
+
+  // 1-px border
+  ctx.fillStyle = '#4444AA'
+  ctx.fillRect(0, 0, W, 1);      ctx.fillRect(0, H - 1, W, 1)
+  ctx.fillRect(0, 0, 1, H);      ctx.fillRect(W - 1, 0, 1, H)
+
+  // ── Big pixel font (5×5) — "FENIX" ────────────────────────────
+  const BIG = {
+    F: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0]],
+    E: [[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,1,1,1,1]],
+    N: [[1,0,0,0,1],[1,1,0,0,1],[1,0,1,0,1],[1,0,0,1,1],[1,0,0,0,1]],
+    I: [[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],
+    X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
+  }
+  const ps = 2
+  const bigStr = 'FENIX'
+  const bigW = bigStr.length * 5 * ps + (bigStr.length - 1) * 2
+  const bigX = Math.floor((W - bigW) / 2)
+  const bigY = 6
+
+  ctx.fillStyle = '#FFFF55'
+  bigStr.split('').forEach((ch, ci) => {
+    const ox = bigX + ci * (5 * ps + 2)
+    BIG[ch].forEach((row, ry) =>
+      row.forEach((bit, rx) => { if (bit) ctx.fillRect(ox + rx * ps, bigY + ry * ps, ps, ps) })
+    )
+  })
+
+  // Horizontal separator
+  ctx.fillStyle = '#5555CC'
+  ctx.fillRect(3, 22, W - 6, 1)
+
+  // ── Small variable-width pixel font (4-5 × 5) ─────────────────
+  const SM = {
+    A: [[0,1,1,0],[1,0,0,1],[1,1,1,1],[1,0,0,1],[1,0,0,1]],
+    B: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,0,1],[1,1,1,0]],
+    C: [[0,1,1,0],[1,0,0,0],[1,0,0,0],[1,0,0,0],[0,1,1,0]],
+    D: [[1,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[1,1,1,0]],
+    E: [[1,1,1,1],[1,0,0,0],[1,1,1,0],[1,0,0,0],[1,1,1,1]],
+    G: [[0,1,1,1],[1,0,0,0],[1,0,1,1],[1,0,0,1],[0,1,1,1]],
+    I: [[1,1,1],[0,1,0],[0,1,0],[0,1,0],[1,1,1]],
+    O: [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
+    P: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,0,0],[1,0,0,0]],
+    R: [[1,1,1,0],[1,0,0,1],[1,1,1,0],[1,0,1,0],[1,0,0,1]],
+    S: [[0,1,1,1],[1,0,0,0],[0,1,1,0],[0,0,0,1],[1,1,1,0]],
+    T: [[1,1,1],[0,1,0],[0,1,0],[0,1,0],[0,1,0]],
+    V: [[1,0,0,0,1],[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,0,0,0]],
+    W: [[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,1,0,1,1],[1,0,0,0,1]],
+    X: [[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],
+    '0': [[0,1,1,0],[1,0,0,1],[1,0,0,1],[1,0,0,1],[0,1,1,0]],
+    '6': [[0,1,1,0],[1,0,0,0],[1,1,1,0],[1,0,0,1],[0,1,1,0]],
+    '.': [[0],[0],[0],[0],[1]],
+    '-': [[0,0,0],[0,0,0],[1,1,1],[0,0,0],[0,0,0]],
+    ' ': [[0,0,0],[0,0,0],[0,0,0],[0,0,0],[0,0,0]],
+  }
+
+  function smWidth(str) {
+    let w = 0
+    for (const ch of str) { const b = SM[ch] ?? SM[' ']; w += b[0].length + 1 }
+    return w - 1
+  }
+  function drawSmText(str, y, color) {
+    ctx.fillStyle = color
+    let cx = Math.floor((W - smWidth(str)) / 2)
+    for (const ch of str) {
+      const bmp = SM[ch] ?? SM[' ']
+      bmp.forEach((row, ry) =>
+        row.forEach((bit, rx) => { if (bit) ctx.fillRect(cx + rx, y + ry, 1, 1) })
+      )
+      cx += bmp[0].length + 1
+    }
+  }
+
+  drawSmText('REWARDBIOS', 26, '#FFFFFF')
+  drawSmText('V6.00PG',    35, '#AAAAAA')
+  drawSmText('GIT-EXTRACT', 43, '#666699')
+}
+
+// ── Sequence ───────────────────────────────────────────────────
+onMounted(() => {
+  bsodCountdown.value = 3
+
+  const ticker = setInterval(() => {
+    bsodCountdown.value--
+    if (bsodCountdown.value <= 0) clearInterval(ticker)
+  }, 1000)
+
+  go('black',  3000)
+  go('bios',   3500)
+  go('black',  7900)
+  go('cdboot', 8300)
+  go('black',  9900)
+  go('win98',  10300)
+  go('black',  12000)
+  timers.push(setTimeout(() => emit('done'), 12500))
+
+  document.addEventListener('keydown', onKeyDown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+  cancelAll()
+})
+</script>
+
+<style lang="scss" scoped>
+// ── Overlay ────────────────────────────────────────────────────
+.boot-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #000;
+  overflow: hidden;
+
+  &.boot-phase--bsod    { background: #0000AA; }
+  &.boot-phase--bios-setup  { background: #0000AA; }
+  &.boot-phase--hdd-error   { background: #000; }
+}
+
+@keyframes boot-flicker {
+  0%   { opacity: 0; }
+  6%   { opacity: 1; }
+  10%  { opacity: 0; }
+  14%  { opacity: 1; }
+  100% { opacity: 1; }
+}
+.boot-overlay { animation: boot-flicker 0.25s steps(1) forwards; }
+
+// ── Shared line-reveal ─────────────────────────────────────────
+@keyframes line-appear { to { opacity: 1; } }
+
+.boot-line {
+  opacity: 0;
+  animation: line-appear 1ms var(--d, 0ms) step-end forwards;
+  white-space: pre;
+  min-height: 1em;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+// ── BIOS POST ──────────────────────────────────────────────────
+.bios-screen {
+  position: relative;
+  padding: 18px 36px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #aaaaaa;
+}
+
+.bios-line { &--header { color: #ffffff; } }
+
+// ── BIOS logo (top-right corner) ───────────────────────────────
+.bios-logo {
+  position: absolute;
+  top: 18px;
+  right: 36px;
+  width:  240px;
+  height: 150px;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
+// ── BIOS Setup Utility ─────────────────────────────────────────
+.setup-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  background: #0000AA;
+}
+
+.setup-topbar {
+  flex-shrink: 0;
+  background: #AAAAAA;
+  color: #000;
+  display: flex;
+  justify-content: space-between;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+.setup-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.setup-menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border: 1px solid #AAAAAA;
+  width: min(680px, 100%);
+
+  &__item {
+    padding: 3px 16px;
+    color: #FFFFFF;
+    white-space: nowrap;
+    cursor: default;
+
+    // Divide left and right columns
+    &:nth-child(odd)  { border-right: 1px solid #555599; }
+
+    &--active {
+      background: #AAAAAA;
+      color: #000080;
+    }
+  }
+}
+
+.setup-hints {
+  display: flex;
+  gap: 24px;
+  margin-top: 12px;
+  color: #FFFF55;
+  font-size: 11px;
+}
+
+.setup-botbar {
+  flex-shrink: 0;
+  background: #AAAAAA;
+  color: #000;
+  display: flex;
+  justify-content: space-around;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+
+// ── Boot Device Menu ───────────────────────────────────────────
+.bootmenu-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.bootmenu-box {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 13px;
+  color: #CCCCCC;
+  border: 1px solid #666;
+  min-width: 320px;
+  padding: 0;
+}
+
+.bootmenu-title {
+  background: #0000AA;
+  color: #FFFF55;
+  padding: 4px 14px;
+  font-weight: bold;
+  letter-spacing: 0.5px;
+}
+
+.bootmenu-line {
+  border: none;
+  border-top: 1px solid #444;
+}
+
+.bootmenu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 14px;
+  color: #CCCCCC;
+  cursor: default;
+
+  &__arrow { width: 10px; flex-shrink: 0; color: #FFFF55; }
+
+  &--active {
+    background: #0000AA;
+    color: #FFFFFF;
+  }
+}
+
+.bootmenu-hint {
+  padding: 4px 14px;
+  font-size: 11px;
+  color: #888;
+}
+
+// ── HDD boot failure ───────────────────────────────────────────
+.hdd-error-screen {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 40px 60px;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+.hdd-error-msg {
+  font-size: 14px;
+  color: #cccccc;
+  margin-bottom: 20px;
+}
+
+.hdd-error-fallback {
+  font-size: 13px;
+  color: #888888;
+
+  @keyframes blink-fallback { 50% { opacity: 0; } }
+  animation: blink-fallback 1s step-end infinite;
+}
+
+// ── CD boot ────────────────────────────────────────────────────
+.cdboot-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #ffffff;
+}
+
+.cdboot-line:last-child::after {
+  content: '_';
+  opacity: 0;
+  animation: blink-cur 1s step-end infinite;
+  animation-delay: 1.3s;
+}
+
+@keyframes blink-cur { 50% { opacity: 1; } }
+
+// ── Winders 98 start ───────────────────────────────────────────
+.win98start-screen {
+  padding: 18px 36px;
+  font-size: 14px;
+  line-height: 2;
+  color: #ffffff;
+}
+</style>
diff --git a/frontend/src/components/Win98Window.vue b/frontend/src/components/Win98Window.vue
new file mode 100644
index 0000000..d1aa5c0
--- /dev/null
+++ b/frontend/src/components/Win98Window.vue
@@ -0,0 +1,603 @@
+<template>
+  <!-- Desktop layer — fills the viewport, catches drag events globally -->
+  <div class="w98-desktop" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseUp">
+
+    <!-- ── Taskbar (visible only when minimized) ─────────────────── -->
+    <div v-if="minimized" class="w98-taskbar">
+      <button class="w98-taskbar-btn" @click="restore">
+        <span class="w98-taskbar-btn__icon">⎇</span>
+        <span>{{ title }}</span>
+      </button>
+    </div>
+
+    <!-- ── Window ────────────────────────────────────────────────── -->
+    <div
+      v-show="!minimized"
+      class="w98-window"
+      :class="{ 'w98-window--maximized': maximized, 'w98-window--dragging': dragging }"
+      :style="windowStyle"
+      ref="windowEl"
+    >
+      <!-- Title bar -->
+      <div
+        class="w98-titlebar"
+        @mousedown="onTitlebarMouseDown"
+        @dblclick="toggleMaximize"
+      >
+        <span class="w98-titlebar__icon" @click.stop="toggleSysMenu" @dblclick.stop="openCloseDialog">⎇</span>
+
+        <!-- System menu dropdown -->
+        <div v-if="showSysMenu" class="w98-sysmenu" @mousedown.stop>
+          <div class="w98-sysmenu__item w98-sysmenu__item--disabled">
+            <span class="w98-sysmenu__icon">_</span> Minimize
+          </div>
+          <div class="w98-sysmenu__item w98-sysmenu__item--disabled">
+            <span class="w98-sysmenu__icon">□</span> Maximize
+          </div>
+          <div class="w98-sysmenu__sep" />
+          <div class="w98-sysmenu__item" @click="closeSysMenu(); openCloseDialog()">
+            <span class="w98-sysmenu__icon">✕</span> Close        <span class="w98-sysmenu__hotkey">Alt+F4</span>
+          </div>
+        </div>
+        <span class="w98-titlebar__text">{{ title }}</span>
+
+        <div class="w98-titlebar__controls" @mousedown.stop>
+          <button class="w98-chrome-btn w98-chrome-btn--minimize" title="Minimize" disabled></button>
+          <button class="w98-chrome-btn w98-chrome-btn--maximize" title="Maximize" :disabled="!maximizable"></button>
+          <button class="w98-chrome-btn w98-chrome-btn--close" title="Close" @click.stop="openCloseDialog">✕</button>
+        </div>
+      </div>
+
+      <!-- Slot: body + footer provided by WizardLayout -->
+      <slot />
+    </div>
+
+    <!-- ── Boot sequence (BSOD → BIOS → CD → Winders) ──────────────── -->
+    <BootSequence v-if="showBootSequence" @done="onBootDone" />
+
+    <!-- ── Close-confirm dialog ───────────────────────────────────── -->
+    <div v-if="showCloseConfirm" class="w98-overlay" @click.self="showCloseConfirm = false">
+      <div class="w98-dialog">
+        <div class="w98-dialog__titlebar">
+          <span class="w98-dialog__titlebar-icon">⎇</span>
+          git-extract Setup
+        </div>
+        <div class="w98-dialog__body">
+          <div class="w98-dialog__icon">⚠️</div>
+          <div class="w98-dialog__msg">
+            <p>Are you sure you want to exit Setup?</p>
+            <p style="color:#666">Your progress will be lost.</p>
+          </div>
+        </div>
+        <div class="w98-dialog__sep" />
+        <div class="w98-dialog__footer">
+          <button class="w98-btn" @click="confirmClose">Yes</button>
+          <button class="w98-btn" @click="showCloseConfirm = false">No</button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import BootSequence from './BootSequence.vue'
+
+const props = defineProps({
+  title:       { type: String,  default: 'Window' },
+  width:       { type: Number,  default: 860 },
+  height:      { type: Number,  default: 560 },
+  maximizable: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close'])
+
+// ── State ───────────────────────────────────────────────────────
+const pos              = ref({ x: 0, y: 0 })
+const dragging         = ref(false)
+const dragOffset       = ref({ x: 0, y: 0 })
+const maximized        = ref(false)
+const minimized        = ref(false)
+const showCloseConfirm  = ref(false)
+const showSysMenu       = ref(false)
+const showBootSequence  = ref(false)
+const vw               = ref(window.innerWidth)
+const vh               = ref(window.innerHeight)
+
+// Effective dimensions — shrink to fit the viewport if needed
+const winW = computed(() => Math.min(props.width,  vw.value))
+const winH = computed(() => Math.min(props.height, vh.value))
+
+// ── Helpers ─────────────────────────────────────────────────────
+function clampPos(x, y) {
+  return {
+    x: Math.max(0, Math.min(x, vw.value - winW.value)),
+    y: Math.max(0, Math.min(y, vh.value - winH.value)),
+  }
+}
+
+// ── Lifecycle ───────────────────────────────────────────────────
+onMounted(() => {
+  // Centre window on load
+  pos.value = clampPos(
+    Math.round((vw.value - winW.value) / 2),
+    Math.round((vh.value - winH.value) / 2),
+  )
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup',   onMouseUp)
+  document.addEventListener('mousedown', onDocMouseDown)
+  window.addEventListener('resize', onViewportResize)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup',   onMouseUp)
+  document.removeEventListener('mousedown', onDocMouseDown)
+  window.removeEventListener('resize', onViewportResize)
+})
+
+// ── Computed style ──────────────────────────────────────────────
+const windowStyle = computed(() => {
+  if (maximized.value) return {}          // CSS class handles full-screen
+  return {
+    position: 'absolute',
+    left:   pos.value.x + 'px',
+    top:    pos.value.y + 'px',
+    width:  winW.value  + 'px',
+    height: winH.value  + 'px',
+  }
+})
+
+// ── Drag ────────────────────────────────────────────────────────
+function onTitlebarMouseDown(e) {
+  if (maximized.value || e.button !== 0) return
+  dragging.value = true
+  dragOffset.value = { x: e.clientX - pos.value.x, y: e.clientY - pos.value.y }
+  e.preventDefault()
+}
+
+function onMouseMove(e) {
+  if (!dragging.value) return
+  pos.value = clampPos(
+    e.clientX - dragOffset.value.x,
+    e.clientY - dragOffset.value.y,
+  )
+}
+
+// ── Viewport resize ─────────────────────────────────────────────
+function onViewportResize() {
+  vw.value = window.innerWidth
+  vh.value = window.innerHeight
+  // Re-clamp so the window never sits outside the new viewport
+  pos.value = clampPos(pos.value.x, pos.value.y)
+}
+
+function onMouseUp() {
+  dragging.value = false
+}
+
+// ── Window controls ─────────────────────────────────────────────
+function restore() {
+  minimized.value = false
+}
+
+function toggleMaximize() {
+  if (!props.maximizable) return
+  maximized.value = !maximized.value
+}
+
+function toggleSysMenu()  { showSysMenu.value = !showSysMenu.value }
+function closeSysMenu()   { showSysMenu.value = false }
+function onDocMouseDown() { showSysMenu.value = false }
+
+function openCloseDialog() {
+  showSysMenu.value = false
+  showCloseConfirm.value = true
+}
+
+function confirmClose() {
+  showCloseConfirm.value = false
+  showBootSequence.value = true
+}
+
+function onBootDone() {
+  showBootSequence.value = false
+  emit('close')
+}
+</script>
+
+<style lang="scss">
+* { font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif; }
+
+// ── Desktop ────────────────────────────────────────────────────
+.w98-desktop {
+  position: fixed;
+  inset: 0;
+  background: $primary;      // #011826 dark navy
+  overflow: hidden;
+  user-select: none;         // prevent text-select while dragging
+
+  // subtle scanline texture so it reads as a "surface"
+  background-image: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(255,255,255,0.018) 2px,
+    rgba(255,255,255,0.018) 4px
+  );
+}
+
+// ── Window ─────────────────────────────────────────────────────
+.w98-window {
+  display: flex;
+  flex-direction: column;
+  background: #F2F2F2;
+
+  // Classic Win98 raised outer border — white top/left, grey bottom/right
+  // This is the KEY fix: visible contrast against the dark desktop
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+
+  // Drop shadow for depth
+  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.7);
+
+  &--maximized {
+    position: fixed !important;
+    inset: 0 !important;
+    width:  100vw !important;
+    height: 100vh !important;
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  &--dragging { cursor: grabbing; }
+}
+
+// ── Title bar ──────────────────────────────────────────────────
+// Gradient from a clear blue — NOT the same as the desktop navy
+// so the top edge of the window is always distinguishable.
+.w98-titlebar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 6px;
+  background: linear-gradient(to right, #0d4a88 0%, #1a78cc 100%);
+  flex-shrink: 0;
+  cursor: default;
+  position: relative;   // anchor for system menu dropdown
+
+  &__icon { font-size: 13px; color: $accent; flex-shrink: 0; }
+
+  &__text {
+    flex: 1;
+    font-size: 11px;
+    font-weight: 700;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__controls { display: flex; gap: 2px; }
+
+  // clickable icon cursor
+  &__icon { cursor: default; }
+}
+
+// ── System menu (title-bar icon dropdown) ──────────────────────
+.w98-sysmenu {
+  position: absolute;
+  top: 100%;    // just below the title bar
+  left: 0;
+  z-index: 200;
+  min-width: 160px;
+  background: #F2F2F2;
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+  box-shadow: 4px 4px 6px rgba(0,0,0,0.5);
+  padding: 2px 0;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 20px 3px 6px;
+    font-size: 11px;
+    cursor: default;
+    white-space: nowrap;
+
+    &:hover:not(.w98-sysmenu__item--disabled) {
+      background: $primary;
+      color: #fff;
+    }
+
+    &--disabled {
+      color: #808080;
+      text-shadow: 1px 1px 0 #fff;
+      cursor: default;
+    }
+  }
+
+  &__icon {
+    width: 14px;
+    font-size: 9px;
+    flex-shrink: 0;
+    text-align: center;
+  }
+
+  &__hotkey {
+    margin-left: auto;
+    padding-left: 24px;
+    color: inherit;
+    font-size: 11px;
+  }
+
+  &__sep {
+    height: 0;
+    margin: 3px 2px;
+    border-top: 1px solid #808080;
+    border-bottom: 1px solid #fff;
+  }
+}
+
+// ── Chrome buttons ─────────────────────────────────────────────
+.w98-chrome-btn {
+  width: 16px;
+  height: 14px;
+  background: #F2F2F2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: #000;
+  border: none;
+  padding: 0;
+  position: relative;   // anchor for ::before pseudo-element shapes
+  flex-shrink: 0;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active:not(:disabled) {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    // shift icon 1px to give "pressed" feel
+    &::before { transform: translate(-50%, -50%) translate(1px, 1px); }
+  }
+
+  &:disabled {
+    opacity: 1;       // cancel browser opacity dimming
+    cursor: default;
+    // icon shape turns grey + gets a white emboss shadow via filter
+    &::before {
+      background: #808080;
+      border-color: #808080;
+      filter: drop-shadow(1px 1px 0 #fff);
+    }
+    &:active { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #e8e8e8; }
+    &:active::before { transform: translate(-50%, -50%); } // no press shift when disabled
+  }
+
+  // ── Minimize icon: horizontal bar near bottom ─────────────────
+  &--minimize::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) translate(0, 2px); // nudge toward bottom
+    width: 8px;
+    height: 2px;
+    background: currentColor;
+  }
+
+  // ── Maximize icon: rectangle with thick top (Win98 style) ─────
+  &--maximize::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 7px;
+    background: transparent;
+    border: 1px solid currentColor;
+    border-top-width: 2px;  // thick top = title bar of a window
+  }
+
+  // ── Close button ──────────────────────────────────────────────
+  &--close {
+    margin-left: 2px;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 1;
+    // Win98 title buttons have no hover effect
+  }
+}
+
+// ── Taskbar ────────────────────────────────────────────────────
+.w98-taskbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 28px;
+  background: #F2F2F2;
+  border-top: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline-top: 1px solid #000;
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+  gap: 4px;
+}
+
+.w98-taskbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 11px;
+  background: #F2F2F2;
+  border: none;
+  cursor: pointer;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding: 1px 7px 0 9px;
+  }
+
+  &__icon { color: $secondary; }
+}
+
+// ── Close-confirm overlay ──────────────────────────────────────
+.w98-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.w98-dialog {
+  background: #F2F2F2;
+  border: 2px solid;
+  border-color: #e8e8e8 #606060 #606060 #e8e8e8;
+  outline: 1px solid #000;
+  min-width: 300px;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
+
+  &__titlebar {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 6px;
+    background: linear-gradient(to right, #0d4a88 0%, #1a78cc 100%);
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+  }
+
+  &__titlebar-icon { color: $accent; }
+
+  &__body {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    padding: 20px 20px 14px;
+    user-select: text;
+  }
+
+  &__icon { font-size: 28px; flex-shrink: 0; }
+
+  &__msg {
+    p { margin: 0 0 4px; font-size: 12px; }
+  }
+
+  &__sep {
+    height: 0;
+    margin: 0 4px 8px;
+    border-top: 1px solid #808080;
+    border-bottom: 1px solid #fff;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    padding: 0 20px 14px;
+  }
+}
+
+// ── Win98 regular buttons (used in dialog + footer) ────────────
+.w98-btn {
+  min-width: 75px;
+  height: 23px;
+  padding: 0 10px;
+  background: #F2F2F2;
+  color: #000;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 11px;
+  border: none;
+  cursor: pointer;
+  white-space: nowrap;
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset  1px  1px #ffffff,
+    inset -2px -2px #808080,
+    inset  2px  2px #e8e8e8;
+
+  &:active:not(:disabled) {
+    box-shadow:
+      inset -1px -1px #ffffff,
+      inset  1px  1px #0a0a0a,
+      inset -2px -2px #e8e8e8,
+      inset  2px  2px #808080;
+    padding: 1px 9px 0 11px;
+  }
+
+  &:disabled {
+    opacity: 1;
+    color: #808080;
+    text-shadow: 1px 1px 0 #fff;
+    cursor: default;
+  }
+
+  // Win98 "default" button — same grey but with a black focus border
+  // to indicate it's the recommended action (no green)
+  &--default {
+    outline: 2px solid #000;
+    outline-offset: -4px;
+    font-weight: 700;
+
+    &:disabled {
+      opacity: 1;
+      outline-color: #808080;
+      color: #808080;
+      text-shadow: 1px 1px 0 #fff;
+      cursor: default;
+    }
+  }
+}
+
+.w98-link-btn {
+  background: none;
+  border: none;
+  color: $accent;
+  font-size: 11px;
+  cursor: pointer;
+  padding: 0;
+  text-decoration: underline;
+  font-family: inherit;
+}
+
+.w98-btn-sep {
+  width: 1px;
+  height: 20px;
+  background: #808080;
+  margin: 0 4px;
+  box-shadow: 1px 0 #fff;
+}
+
+// Boot sequence is now in BootSequence.vue / BlueScreen.vue
+</style>
diff --git a/frontend/src/composables/useWizardNav.js b/frontend/src/composables/useWizardNav.js
new file mode 100644
index 0000000..73d2277
--- /dev/null
+++ b/frontend/src/composables/useWizardNav.js
@@ -0,0 +1,36 @@
+import { inject, provide, ref } from 'vue'
+
+const KEY = Symbol('wizardNav')
+
+/**
+ * Called once in WizardLayout to create the shared nav state.
+ */
+export function provideWizardNav() {
+  const nav = ref({
+    // ← Back
+    backLabel: '< Back',
+    backDisabled: false,
+    onBack: null,         // null  = disabled
+
+    // Next →
+    nextLabel: 'Next >',
+    nextDisabled: false,
+    onNext: null,         // null  = disabled
+
+    // Finish (final action — Extract & Push, Done, etc.)
+    finishLabel: 'Finish',
+    finishDisabled: false,
+    onFinish: null,       // null  = disabled
+  })
+  provide(KEY, nav)
+  return nav
+}
+
+/**
+ * Called in each page component to register its nav handlers.
+ * Any field omitted keeps its previous value; pass null for a
+ * handler to disable that button.
+ */
+export function useWizardNav() {
+  return inject(KEY)
+}
diff --git a/frontend/src/css/app.scss b/frontend/src/css/app.scss
index 5da4a0f..4f844fa 100644
--- a/frontend/src/css/app.scss
+++ b/frontend/src/css/app.scss
@@ -1 +1,167 @@
 // app global css / scss goes here
+
+// ── Shared page chrome (inside WizardLayout) ───────────────────────
+
+.wiz-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-size: 12px;
+
+  // Header banner — Win98 dialog title area
+  &__head {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 18px 12px;
+    background: #fff;
+    border-bottom: 2px solid;
+    border-color: #808080 #fff #fff #808080;
+  }
+
+  &__head-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
+  &__head-text { flex: 1; }
+
+  &__step-label {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    color: #808080;
+    margin-bottom: 3px;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 700;
+    color: $primary;     // #011826
+    margin: 0 0 3px;
+    line-height: 1.2;
+  }
+
+  &__desc {
+    font-size: 11px;
+    color: #444;
+    margin: 0;
+    line-height: 1.5;
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px 18px;
+  }
+
+  &__nav { display: none; } // nav lives in the window footer
+}
+
+// ── Win98 inset panel ─────────────────────────────────────────────
+.w98-panel {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  background: #fff;
+
+  &__head {
+    padding: 3px 8px;
+    background: #F2F2F2;
+    font-size: 11px;
+    font-weight: 700;
+    color: $primary;
+    border-bottom: 1px solid #808080;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  &__body { padding: 10px; }
+}
+
+// ── Win98 Explorer list ───────────────────────────────────────────
+.w98-list {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  background: #fff;
+}
+
+.w98-list-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 5px 8px;
+  border-bottom: 1px solid #ececec;
+  cursor: pointer;
+  font-size: 12px;
+
+  &:last-child { border-bottom: none; }
+
+  &:hover {
+    background: $secondary; // #168C40
+    color: #fff;
+
+    .w98-list-row__meta { color: rgba(255,255,255,0.7); }
+  }
+
+  &__name  { flex: 1; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+  &__meta  { font-size: 11px; color: #808080; flex-shrink: 0; }
+}
+
+// ── Field label ───────────────────────────────────────────────────
+.w98-field-label {
+  font-size: 11px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: #000;
+}
+
+// ── Win98 inset select ────────────────────────────────────────────
+.w98-select {
+  height: 21px;
+  padding: 0 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  cursor: pointer;
+
+  &--full { width: 100%; }
+
+  &:disabled { color: #808080; cursor: default; }
+}
+
+// ── Win98 inset text input ────────────────────────────────────────
+.w98-input-full {
+  width: 100%;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+// ── Inline link-style button (footer "Sign out") ──────────────────
+.w98-link-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: inherit;
+  color: $primary;
+  text-decoration: underline;
+  cursor: pointer;
+
+  &:hover { color: $secondary; }
+}
diff --git a/frontend/src/css/quasar.variables.scss b/frontend/src/css/quasar.variables.scss
index 39df4d1..298c365 100644
--- a/frontend/src/css/quasar.variables.scss
+++ b/frontend/src/css/quasar.variables.scss
@@ -12,18 +12,21 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-// Brand colors derived from the git-extract organization logo:
-//   Navy  #1e2e4a  — browser window, git graph, wordmark
-//   Green #2ea84e  — arrow and folder icon
+// Brand palette
+//   #011826  darkest navy  — primary surfaces, title bar, sidebar
+//   #168C40  forest green  — actions, active step, success
+//   #6BBF89  sage green    — accent, hover, done steps
+//   #A7D9B8  pale green    — subtle highlights
+//   #F2F2F2  off-white     — window chrome, panel backgrounds
 
-$primary: #1e2e4a; // brand navy
-$secondary: #2ea84e; // brand green
-$accent: #4cc474; // lighter green (hover / highlight)
+$primary:   #011826; // darkest navy
+$secondary: #168C40; // forest green
+$accent:    #6BBF89; // sage green
 
-$dark: #1a2540; // deep navy for dark-mode surfaces
-$dark-page: #111b30; // near-black navy for dark-mode page background
+$dark:      #011826; // same as primary
+$dark-page: #010f18; // near-black for dark mode
 
-$positive: #28a745; // green — success (same family as brand green)
-$negative: #c10015; // red — error
-$info: #1799b5; // blue-teal — informational
-$warning: #f2c037; // amber — warning
+$positive:  #168C40; // green — success
+$negative:  #c10015; // red   — error
+$info:      #6BBF89; // sage  — informational
+$warning:   #f2c037; // amber — warning
diff --git a/frontend/src/layouts/WizardLayout.vue b/frontend/src/layouts/WizardLayout.vue
new file mode 100644
index 0000000..f122d72
--- /dev/null
+++ b/frontend/src/layouts/WizardLayout.vue
@@ -0,0 +1,249 @@
+<template>
+  <Win98Window title="git-extract Setup" :width="860" :height="560" @close="onWindowClose">
+
+    <!-- ── Body: sidebar + content ───────────────────────────── -->
+    <div class="w98-body">
+
+      <!-- Left step panel -->
+      <div class="w98-sidebar">
+        <div class="w98-sidebar__logo">⎇</div>
+        <div class="w98-sidebar__product">git-extract</div>
+        <div class="w98-sidebar__tagline">Setup Wizard</div>
+
+        <div class="w98-sidebar__divider" />
+
+        <div
+          v-for="step in steps"
+          :key="step.id"
+          class="w98-sidebar__step"
+          :class="{
+            'w98-sidebar__step--active': currentStep === step.id,
+            'w98-sidebar__step--done':   currentStep > step.id,
+          }"
+        >
+          <span class="w98-sidebar__arrow">
+            {{ currentStep > step.id ? '✔' : currentStep === step.id ? '►' : '○' }}
+          </span>
+          <span>{{ step.label }}</span>
+        </div>
+
+        <div v-if="auth.isLoggedIn" class="w98-sidebar__user">
+          <img
+            v-if="auth.user?.avatar_url"
+            :src="auth.user.avatar_url"
+            class="w98-sidebar__avatar"
+          />
+          <span class="w98-sidebar__username">
+            {{ auth.user?.login || auth.user?.username }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Right content pane -->
+      <div class="w98-content">
+        <router-view />
+      </div>
+
+    </div>
+
+    <!-- ── Footer / button bar ───────────────────────────────── -->
+    <div class="w98-footer">
+      <div class="w98-sep" />
+      <div class="w98-footer__inner">
+        <div class="w98-footer__status">
+          Step {{ currentStep }} of {{ steps.length }}
+          <template v-if="auth.isLoggedIn">
+            &nbsp;·&nbsp;
+            <button class="w98-link-btn" @click="logout">Sign out</button>
+          </template>
+        </div>
+
+        <div class="w98-footer__nav">
+          <button
+            class="w98-btn"
+            :disabled="!nav.onBack || nav.backDisabled"
+            @click="nav.onBack && nav.onBack()"
+          >{{ nav.backLabel }}</button>
+
+          <button
+            class="w98-btn"
+            :disabled="!nav.onNext || nav.nextDisabled"
+            @click="nav.onNext && nav.onNext()"
+          >{{ nav.nextLabel }}</button>
+
+          <button
+            class="w98-btn w98-btn--default"
+            :disabled="!nav.onFinish || nav.finishDisabled"
+            @click="nav.onFinish && nav.onFinish()"
+          >{{ nav.finishLabel }}</button>
+
+          <div class="w98-btn-sep" />
+
+          <button class="w98-btn" @click="logout">Restart</button>
+        </div>
+      </div>
+    </div>
+
+  </Win98Window>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+import { provideWizardNav } from '../composables/useWizardNav.js'
+import Win98Window from '../components/Win98Window.vue'
+
+const auth   = useAuthStore()
+const route  = useRoute()
+const router = useRouter()
+const nav    = provideWizardNav()
+
+const steps = [
+  { id: 1, label: 'Welcome' },
+  { id: 2, label: 'Sign In' },
+  { id: 3, label: 'Select Repository' },
+  { id: 4, label: 'Select Paths' },
+  { id: 5, label: 'Output Options' },
+  { id: 6, label: 'Progress' },
+  { id: 7, label: 'Finish' },
+]
+
+const currentStep = computed(() => {
+  const p = route.path
+  if (p === '/' || p === '/welcome')              return 1
+  if (p === '/login' || p.startsWith('/auth'))    return 2
+  if (p === '/repos')                             return 3
+  if (p === '/extract/paths')                     return 4
+  if (p === '/extract/options')                   return 5
+  if (p === '/extract/progress')                  return 6
+  if (p === '/extract/finish')                    return 7
+  return 1
+})
+
+function logout() {
+  auth.logout()
+  router.push('/welcome')
+}
+
+function onWindowClose() {
+  // Window × button confirmed — reset auth and go to step 1
+  auth.logout()
+  router.push('/welcome')
+}
+</script>
+
+<style lang="scss">
+// ── Body ───────────────────────────────────────────────────────
+.w98-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  margin: 3px;
+  gap: 3px;
+}
+
+// ── Sidebar ────────────────────────────────────────────────────
+.w98-sidebar {
+  width: 176px;
+  flex-shrink: 0;
+  background: $primary;
+  padding: 20px 0 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &__logo    { text-align: center; font-size: 32px; color: $secondary; margin-bottom: 6px; }
+  &__product { text-align: center; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: 0.5px; }
+  &__tagline {
+    text-align: center;
+    font-size: 10px;
+    color: rgba(255,255,255,0.45);
+    margin-top: 2px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+
+  &__divider {
+    margin: 14px 16px;
+    border: none;
+    border-top: 1px solid rgba(255,255,255,0.1);
+    border-bottom: 1px solid rgba(0,0,0,0.4);
+  }
+
+  &__step {
+    display: flex;
+    align-items: flex-start;
+    gap: 7px;
+    padding: 5px 14px;
+    font-size: 11px;
+    color: rgba(255,255,255,0.35);
+    line-height: 1.3;
+
+    &--active {
+      color: #fff;
+      font-weight: 700;
+      background: rgba(255,255,255,0.07);
+    }
+    &--done { color: $accent; }
+  }
+
+  &__arrow { flex-shrink: 0; font-size: 10px; margin-top: 1px; }
+
+  &__user {
+    margin-top: auto;
+    padding: 10px 14px 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-top: 1px solid rgba(255,255,255,0.1);
+  }
+
+  &__avatar { width: 20px; height: 20px; border-radius: 2px; object-fit: cover; }
+
+  &__username {
+    font-size: 10px;
+    color: rgba(255,255,255,0.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+// ── Content pane ───────────────────────────────────────────────
+.w98-content {
+  flex: 1;
+  overflow-y: auto;
+  background: #fff;
+  box-shadow:
+    inset  1px  1px #808080,
+    inset -1px -1px #e8e8e8,
+    inset  2px  2px #0a0a0a,
+    inset -2px -2px #ffffff;
+}
+
+// ── Footer ─────────────────────────────────────────────────────
+.w98-footer { flex-shrink: 0; padding: 0 4px 4px; }
+
+.w98-sep {
+  height: 0;
+  margin: 0 0 4px;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
+
+.w98-footer__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.w98-footer__status {
+  font-size: 11px;
+  color: #444;
+  padding-left: 4px;
+}
+
+.w98-footer__nav { display: flex; align-items: center; gap: 4px; }
+</style>
diff --git a/frontend/src/pages/ExtractFinishPage.vue b/frontend/src/pages/ExtractFinishPage.vue
new file mode 100644
index 0000000..1c933ea
--- /dev/null
+++ b/frontend/src/pages/ExtractFinishPage.vue
@@ -0,0 +1,189 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">🎉</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 7 of 7</div>
+        <h1 class="wiz-page__title">Extraction Complete</h1>
+        <p class="wiz-page__desc">
+          git-extract Setup has finished copying files to the target repository.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <div class="fin-content">
+
+        <p class="fin-intro">
+          The following operation completed successfully:
+        </p>
+
+        <!-- Summary panel -->
+        <div class="w98-panel fin-panel">
+          <div class="w98-panel__body">
+
+            <div class="fin-row">
+              <span class="fin-key">Source</span>
+              <span class="fin-val">
+                {{ source?.fullName }}
+                <span class="fin-branch">{{ store.sourceBranch }}</span>
+              </span>
+            </div>
+
+            <div class="fin-row">
+              <span class="fin-key">Path</span>
+              <span class="fin-val"><code>{{ store.sourcePath || '/' }}</code></span>
+            </div>
+
+            <div class="fin-sep" />
+
+            <div class="fin-row">
+              <span class="fin-key">Target</span>
+              <span class="fin-val">
+                <a
+                  v-if="targetUrl"
+                  :href="targetUrl"
+                  target="_blank"
+                  class="fin-link"
+                >{{ target?.fullName }}</a>
+                <span v-else>{{ target?.fullName }}</span>
+                <span class="fin-branch">{{ store.targetBranch }}</span>
+              </span>
+            </div>
+
+            <div class="fin-row">
+              <span class="fin-key">Written to</span>
+              <span class="fin-val"><code>{{ store.targetPath || 'root' }}</code></span>
+            </div>
+
+            <template v-if="store.generateProjectFile">
+              <div class="fin-sep" />
+              <div class="fin-row">
+                <span class="fin-key">Project file</span>
+                <span class="fin-val fin-val--ok">✔ .git-extract.json written</span>
+              </div>
+            </template>
+
+          </div>
+        </div>
+
+        <p class="fin-outro">
+          Click <strong>Finish</strong> to close Setup, or
+          <strong>Restart</strong> to start a new extraction.
+        </p>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const source = computed(() => store.selectedSource)
+const target = computed(() => store.selectedTarget)
+
+const targetUrl = computed(() => {
+  if (!target.value) return ''
+  const base = auth.provider === 'github'
+    ? 'https://github.com'
+    : `https://${auth.gitlabHost}`
+  return `${base}/${target.value.fullName}`
+})
+
+onMounted(() => {
+  nav.value = {
+    backLabel: '< Back', backDisabled: true,  onBack: null,
+    nextLabel: 'Next >', nextDisabled: true,  onNext: null,
+    finishLabel: 'Finish', finishDisabled: false,
+    onFinish: () => {
+      // Clear extraction state and return to welcome
+      store.extractRunId  = ''
+      store.extractRunUrl = ''
+      store.extractStatus = null
+      store.extractResult = null
+      router.push('/welcome')
+    },
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.fin-content { max-width: 440px; }
+
+.fin-intro {
+  font-size: 12px;
+  color: #000;
+  margin: 0 0 10px;
+}
+
+.fin-panel { margin-bottom: 14px; }
+
+.fin-row {
+  display: flex;
+  gap: 10px;
+  font-size: 11px;
+  padding: 3px 0;
+  align-items: baseline;
+}
+
+.fin-key {
+  width: 76px;
+  flex-shrink: 0;
+  font-weight: 700;
+  color: #555;
+  text-align: right;
+}
+
+.fin-val {
+  flex: 1;
+  color: #000;
+
+  code {
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    background: #e8e8e8;
+    padding: 0 3px;
+  }
+
+  &--ok { color: $secondary; font-weight: 700; }
+}
+
+.fin-branch {
+  margin-left: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  color: $secondary;
+  background: rgba($secondary, 0.1);
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.fin-link {
+  color: $primary;
+  text-decoration: underline;
+  &:hover { color: $secondary; }
+}
+
+.fin-sep {
+  margin: 5px 0;
+  border: none;
+  border-top: 1px solid #e0e0e0;
+}
+
+.fin-outro {
+  font-size: 11px;
+  color: #444;
+  margin: 0;
+  line-height: 1.6;
+}
+</style>
diff --git a/frontend/src/pages/ExtractOptionsPage.vue b/frontend/src/pages/ExtractOptionsPage.vue
new file mode 100644
index 0000000..9c50f59
--- /dev/null
+++ b/frontend/src/pages/ExtractOptionsPage.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">⚙</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 5 of 7</div>
+        <h1 class="wiz-page__title">Output Options</h1>
+        <p class="wiz-page__desc">
+          Choose where extracted files are written and configure output settings.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <div class="opts-form">
+
+        <!-- Target repository -->
+        <div class="opts-field">
+          <label class="w98-field-label">Target repository:</label>
+          <q-select
+            v-model="store.selectedTarget"
+            :options="store.filtered"
+            option-label="fullName"
+            option-value="id"
+            outlined dense use-input input-debounce="300"
+            placeholder="Search repositories…"
+            @filter="filterRepos"
+            @update:model-value="loadTargetBranches"
+          />
+        </div>
+
+        <!-- Target branch -->
+        <div class="opts-field">
+          <label class="w98-field-label">Target branch:</label>
+          <select
+            v-model="store.targetBranch"
+            class="w98-select w98-select--full"
+            :disabled="!store.targetBranches.length"
+          >
+            <option
+              v-for="b in store.targetBranches"
+              :key="b"
+              :value="b"
+            >{{ b }}</option>
+          </select>
+        </div>
+
+        <!-- Destination path -->
+        <div class="opts-field">
+          <label class="w98-field-label" for="dest-path">Destination path:</label>
+          <input
+            id="dest-path"
+            v-model="store.targetPath"
+            class="w98-input-full"
+            placeholder="src"
+            spellcheck="false"
+          />
+          <div class="opts-hint">
+            Relative path inside the target repo where files will be written.
+          </div>
+        </div>
+
+        <div class="opts-divider" />
+
+        <!-- Generate project file checkbox -->
+        <div class="opts-check-row">
+          <input
+            id="gen-proj"
+            v-model="store.generateProjectFile"
+            type="checkbox"
+          />
+          <label for="gen-proj" class="opts-check-label">
+            <span class="opts-check-name">Generate project file (.git-extract.json)</span>
+            <span class="opts-check-desc">
+              Records source repo, branch, and paths so this extraction can
+              be reproduced or updated later.
+            </span>
+          </label>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { getBranches as getGhBranches } from '../services/github.js'
+import { getBranches as getGlBranches } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const canProceed = () => !!store.selectedTarget && !!store.targetBranch
+
+onMounted(() => {
+  updateNav()
+  // Re-load target branches if a target is already chosen (came back from next step)
+  if (store.selectedTarget && !store.targetBranches.length) loadTargetBranches()
+})
+
+watch([() => store.selectedTarget, () => store.targetBranch], updateNav)
+
+function updateNav() {
+  nav.value = {
+    backLabel: '< Back', backDisabled: false,
+    onBack: () => router.push('/extract/paths'),
+    nextLabel: 'Next >', nextDisabled: !canProceed(),
+    onNext: canProceed() ? () => router.push('/extract/progress') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+async function loadTargetBranches() {
+  if (!store.selectedTarget) return
+  store.targetBranch   = ''
+  store.targetBranches = []
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
+  if (!data.error) {
+    store.targetBranches = data.map(b => b.name)
+    store.targetBranch   =
+      store.selectedTarget.defaultBranch || store.targetBranches[0] || 'main'
+  }
+}
+
+function filterRepos(val, update) {
+  update(() => { store.search = val })
+}
+</script>
+
+<style lang="scss" scoped>
+.opts-form { max-width: 400px; }
+
+.opts-field { margin-bottom: 12px; }
+
+.opts-hint {
+  margin-top: 4px;
+  font-size: 10px;
+  color: #808080;
+  line-height: 1.4;
+}
+
+.opts-divider {
+  margin: 14px 0;
+  border: none;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
+
+.opts-check-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  cursor: pointer;
+
+  input[type='checkbox'] {
+    flex-shrink: 0;
+    margin-top: 2px;
+    cursor: pointer;
+    accent-color: $secondary;
+  }
+}
+
+.opts-check-label {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.opts-check-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: #000;
+}
+
+.opts-check-desc {
+  font-size: 11px;
+  color: #444;
+  line-height: 1.45;
+}
+</style>
diff --git a/frontend/src/pages/ExtractPage.vue b/frontend/src/pages/ExtractPage.vue
index 600f925..896690b 100644
--- a/frontend/src/pages/ExtractPage.vue
+++ b/frontend/src/pages/ExtractPage.vue
@@ -1,115 +1,150 @@
 <template>
-  <q-page padding>
-    <div v-if="!source" class="text-center q-mt-xl">
-      <q-btn label="Pick a repository" color="primary" to="/repos" />
-    </div>
+  <div class="wiz-page">
 
-    <template v-else>
-      <!-- Source header -->
-      <div class="row items-center q-gutter-sm q-mb-md">
-        <div class="text-h6">{{ source.fullName }}</div>
-        <q-select
-          v-model="sourceBranch"
-          :options="sourceBranches"
-          dense outlined
-          style="min-width: 160px"
-          @update:model-value="loadTree"
-        />
-      </div>
-
-      <div v-if="!submitted" class="row q-col-gutter-md">
-        <!-- Source folder tree -->
-        <div class="col-12 col-md-5">
-          <q-card flat bordered>
-            <q-card-section class="text-subtitle2">Source folder</q-card-section>
-            <q-card-section>
-              <q-spinner v-if="treeLoading" />
-              <FolderTree v-else v-model="store.sourcePath" :items="store.sourceTree" />
-            </q-card-section>
-          </q-card>
+    <!-- ── No source ──────────────────────────────────────────── -->
+    <template v-if="!source">
+      <div class="wiz-page__head">
+        <div class="wiz-page__head-icon">⚙</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 4 of 4</div>
+          <h1 class="wiz-page__title">Configure Extraction</h1>
+          <p class="wiz-page__desc">No repository selected.</p>
         </div>
+      </div>
+      <div class="wiz-page__body">
+        <p style="font-size:12px">Please go back and select a source repository first.</p>
+      </div>
+    </template>
 
-        <!-- Target options -->
-        <div class="col-12 col-md-7">
-          <q-card flat bordered>
-            <q-card-section class="q-gutter-md">
-              <q-select
-                v-model="store.selectedTarget"
-                :options="store.list"
-                option-label="fullName"
-                option-value="id"
-                label="Target repo"
-                outlined
-                use-input
-                input-debounce="300"
-                @filter="filterRepos"
-                @update:model-value="loadTargetBranches"
-              />
-              <q-select
-                v-model="targetBranch"
-                :options="targetBranches"
-                label="Branch"
-                outlined
-                dense
-              />
-              <q-input v-model="store.targetPath" label="Target path" outlined dense />
-              <q-btn
-                label="Extract → Push"
-                color="primary"
-                :disable="!canSubmit"
-                :loading="submitting"
-                @click="submit"
-              />
-            </q-card-section>
-          </q-card>
+    <!-- ── Extracting ────────────────────────────────────────── -->
+    <template v-else-if="submitted">
+      <div class="wiz-page__head">
+        <div class="wiz-page__head-icon">🚀</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 4 of 4</div>
+          <h1 class="wiz-page__title">Extracting…</h1>
+          <p class="wiz-page__desc">
+            {{ source.fullName }} → {{ store.selectedTarget?.fullName }}
+          </p>
         </div>
       </div>
-
-      <!-- Post-submit status -->
-      <div v-else class="q-mt-lg">
+      <div class="wiz-page__body">
         <StatusPoller
           v-if="runId"
           :run-id="runId"
           :run-url="runUrl"
           :target-repo-url="targetRepoUrl"
         />
-        <q-banner v-else rounded class="bg-positive text-white">
-          <template #avatar><q-icon name="check_circle" /></template>
-          Extraction job submitted.
-        </q-banner>
+        <div v-else class="w98-panel" style="max-width:400px">
+          <div class="w98-panel__body" style="font-size:12px">
+            ✔ Extraction job submitted.
+          </div>
+        </div>
       </div>
     </template>
-  </q-page>
+
+    <!-- ── Configure ─────────────────────────────────────────── -->
+    <template v-else>
+      <div class="wiz-page__head">
+        <div class="wiz-page__head-icon">⚙</div>
+        <div class="wiz-page__head-text">
+          <div class="wiz-page__step-label">Step 4 of 4</div>
+          <h1 class="wiz-page__title">Configure Extraction</h1>
+          <p class="wiz-page__desc">
+            Select a source folder, choose the destination, then click
+            <strong>Extract &amp; Push</strong>.
+          </p>
+        </div>
+      </div>
+
+      <div class="wiz-page__body">
+        <!-- Source repo + branch -->
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+          <span class="w98-field-label" style="margin:0">Source:</span>
+          <span style="font-size:12px;font-weight:700;color:$primary">{{ source.fullName }}</span>
+          <select v-model="sourceBranch" class="w98-select" @change="loadTree">
+            <option v-for="b in sourceBranches" :key="b" :value="b">{{ b }}</option>
+          </select>
+        </div>
+
+        <!-- Two-panel grid -->
+        <div class="cfg-grid">
+          <!-- Folder tree -->
+          <div class="w98-panel">
+            <div class="w98-panel__head">📁 Source Folder</div>
+            <div class="w98-panel__body" style="min-height:180px;overflow-y:auto">
+              <div v-if="treeLoading" style="font-size:11px;color:#808080;padding:4px">Loading…</div>
+              <FolderTree v-else v-model="store.sourcePath" :items="store.sourceTree" />
+              <div v-if="!treeLoading && !store.sourceTree.length" style="font-size:11px;color:#808080">
+                No directories found.
+              </div>
+            </div>
+          </div>
+
+          <!-- Destination -->
+          <div class="w98-panel">
+            <div class="w98-panel__head">📂 Destination</div>
+            <div class="w98-panel__body">
+              <div class="cfg-field">
+                <label class="w98-field-label">Target repository:</label>
+                <q-select
+                  v-model="store.selectedTarget"
+                  :options="store.list"
+                  option-label="fullName"
+                  option-value="id"
+                  outlined
+                  dense
+                  use-input
+                  input-debounce="300"
+                  @filter="filterRepos"
+                  @update:model-value="loadTargetBranches"
+                />
+              </div>
+              <div class="cfg-field">
+                <label class="w98-field-label">Target branch:</label>
+                <select v-model="targetBranch" class="w98-select w98-select--full">
+                  <option v-for="b in targetBranches" :key="b" :value="b">{{ b }}</option>
+                </select>
+              </div>
+              <div class="cfg-field">
+                <label class="w98-field-label">Destination path:</label>
+                <input v-model="store.targetPath" class="w98-input-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useReposStore } from '../stores/repos.js'
 import { useAuthStore } from '../stores/auth.js'
-import {
-  getBranches as getGhBranches,
-  getTree as getGhTree,
-} from '../services/github.js'
-import {
-  getBranches as getGlBranches,
-  getTree as getGlTree,
-} from '../services/gitlab.js'
+import { getBranches as getGhBranches, getTree as getGhTree } from '../services/github.js'
+import { getBranches as getGlBranches, getTree as getGlTree } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 import FolderTree from '../components/FolderTree.vue'
 import StatusPoller from '../components/StatusPoller.vue'
 
-const store = useReposStore()
-const auth = useAuthStore()
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
 
-const source = computed(() => store.selectedSource)
-const sourceBranch = ref(source.value?.defaultBranch || '')
+const source        = computed(() => store.selectedSource)
+const sourceBranch  = ref(source.value?.defaultBranch || '')
 const sourceBranches = ref([])
-const targetBranch = ref('')
+const targetBranch  = ref('')
 const targetBranches = ref([])
-const treeLoading = ref(false)
-const submitting = ref(false)
-const submitted = ref(false)
-const runId = ref('')
-const runUrl = ref('')
+const treeLoading   = ref(false)
+const submitting    = ref(false)
+const submitted     = ref(false)
+const runId         = ref('')
+const runUrl        = ref('')
 
 const canSubmit = computed(
   () => !!store.sourcePath && !!store.selectedTarget && !!targetBranch.value,
@@ -122,16 +157,48 @@ const targetRepoUrl = computed(() => {
 })
 
 onMounted(async () => {
+  updateNav()
   if (!source.value) return
   await loadSourceBranches()
   await loadTree()
 })
 
+watch([canSubmit, submitted, source], updateNav)
+
+function updateNav() {
+  if (!source.value) {
+    nav.value = {
+      backLabel: '< Back', backDisabled: false,
+      onBack: () => router.push('/repos'),
+      nextLabel: 'Next >', nextDisabled: true, onNext: null,
+      finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+    }
+    return
+  }
+  if (submitted.value) {
+    nav.value = {
+      backLabel: '← Start over', backDisabled: false,
+      onBack: () => reset(),
+      nextLabel: 'Next >', nextDisabled: true, onNext: null,
+      finishLabel: 'Done', finishDisabled: false,
+      onFinish: () => router.push('/repos'),
+    }
+    return
+  }
+  nav.value = {
+    backLabel: '< Back', backDisabled: false,
+    onBack: () => router.push('/repos'),
+    nextLabel: 'Next >', nextDisabled: true, onNext: null,
+    finishLabel: submitting.value ? 'Extracting…' : 'Extract && Push',
+    finishDisabled: !canSubmit.value || submitting.value,
+    onFinish: canSubmit.value && !submitting.value ? () => submit() : null,
+  }
+}
+
 async function loadSourceBranches() {
-  const data =
-    auth.provider === 'github'
-      ? await getGhBranches(auth.token, source.value.owner, source.value.name)
-      : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, source.value.owner, source.value.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
   if (!data.error) {
     sourceBranches.value = data.map((b) => b.name)
     if (!sourceBranch.value) sourceBranch.value = sourceBranches.value[0] || ''
@@ -162,10 +229,9 @@ async function loadTargetBranches() {
   if (!store.selectedTarget) return
   targetBranch.value = ''
   targetBranches.value = []
-  const data =
-    auth.provider === 'github'
-      ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
-      : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, store.selectedTarget.owner, store.selectedTarget.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, store.selectedTarget.id)
   if (!data.error) {
     targetBranches.value = data.map((b) => b.name)
     targetBranch.value = store.selectedTarget.defaultBranch || targetBranches.value[0] || 'main'
@@ -178,9 +244,8 @@ function filterRepos(val, update) {
 
 async function submit() {
   submitting.value = true
-  const ghBase = 'https://github.com'
-  const glBase = `https://${auth.gitlabHost}`
-  const base = auth.provider === 'github' ? ghBase : glBase
+  updateNav()
+  const base = auth.provider === 'github' ? 'https://github.com' : `https://${auth.gitlabHost}`
   const res = await fetch(`${process.env.WORKER_URL}/extract`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -200,4 +265,63 @@ async function submit() {
   submitting.value = false
   submitted.value = true
 }
+
+function reset() {
+  submitted.value = false
+  runId.value = ''
+  runUrl.value = ''
+  store.sourcePath = ''
+  store.selectedTarget = null
+  router.push('/repos')
+}
 </script>
+
+<style lang="scss" scoped>
+.cfg-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.cfg-field {
+  margin-bottom: 10px;
+  &:last-child { margin-bottom: 0; }
+}
+
+.w98-select {
+  height: 21px;
+  padding: 0 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  cursor: pointer;
+
+  &--full { width: 100%; }
+}
+
+.w98-input-full {
+  width: 100%;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  box-sizing: border-box;
+}
+</style>
diff --git a/frontend/src/pages/ExtractPathsPage.vue b/frontend/src/pages/ExtractPathsPage.vue
new file mode 100644
index 0000000..884671d
--- /dev/null
+++ b/frontend/src/pages/ExtractPathsPage.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">📁</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 4 of 7</div>
+        <h1 class="wiz-page__title">Select Paths</h1>
+        <p class="wiz-page__desc">
+          Choose the source branch, then select the folder you want to extract.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+
+      <!-- Guard: no repo selected -->
+      <template v-if="!source">
+        <p style="font-size:12px;color:#808080">
+          No repository selected. Please go back and choose a source repository.
+        </p>
+      </template>
+
+      <template v-else>
+        <!-- Source + branch row -->
+        <div class="paths-source-row">
+          <span class="w98-field-label" style="margin:0;flex-shrink:0">Source:</span>
+          <span class="paths-source-name">{{ source.fullName }}</span>
+          <select
+            v-model="store.sourceBranch"
+            class="w98-select"
+            :disabled="!store.sourceBranches.length"
+            @change="loadTree"
+          >
+            <option v-for="b in store.sourceBranches" :key="b" :value="b">{{ b }}</option>
+          </select>
+        </div>
+
+        <!-- Folder tree panel -->
+        <div class="w98-panel paths-tree-panel">
+          <div class="w98-panel__head">📂 Source Folder</div>
+          <div class="w98-panel__body paths-tree-body">
+            <div v-if="treeLoading" class="paths-hint">Loading tree…</div>
+            <FolderTree
+              v-else
+              v-model="store.sourcePath"
+              :items="store.sourceTree"
+            />
+            <div
+              v-if="!treeLoading && !store.sourceTree.length"
+              class="paths-hint"
+            >
+              No directories found in this branch.
+            </div>
+          </div>
+        </div>
+
+        <!-- Selection feedback -->
+        <div v-if="store.sourcePath" class="paths-selected">
+          Selected: <strong>{{ store.sourcePath }}</strong>
+        </div>
+        <div v-else class="paths-hint paths-hint--idle">
+          Click a folder above to select it.
+        </div>
+
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { getBranches as getGhBranches, getTree as getGhTree } from '../services/github.js'
+import { getBranches as getGlBranches, getTree as getGlTree } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+import FolderTree from '../components/FolderTree.vue'
+
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+const source      = computed(() => store.selectedSource)
+const treeLoading = ref(false)
+
+onMounted(async () => {
+  updateNav()
+  if (!source.value) return
+  if (!store.sourceBranches.length) await loadSourceBranches()
+  if (!store.sourceTree.length)     await loadTree()
+})
+
+watch(() => store.sourcePath, updateNav)
+
+function updateNav() {
+  const ready = !!store.sourcePath && !!source.value
+  nav.value = {
+    backLabel: '< Back', backDisabled: false,
+    onBack: () => router.push('/repos'),
+    nextLabel: 'Next >', nextDisabled: !ready,
+    onNext: ready ? () => router.push('/extract/options') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+async function loadSourceBranches() {
+  const data = auth.provider === 'github'
+    ? await getGhBranches(auth.token, source.value.owner, source.value.name)
+    : await getGlBranches(auth.token, auth.gitlabHost, source.value.id)
+  if (!data.error) {
+    store.sourceBranches = data.map(b => b.name)
+    if (!store.sourceBranch)
+      store.sourceBranch = source.value.defaultBranch || store.sourceBranches[0] || ''
+  }
+}
+
+async function loadTree() {
+  if (!source.value || !store.sourceBranch) return
+  treeLoading.value = true
+  store.sourceTree  = []
+  store.sourcePath  = ''
+
+  if (auth.provider === 'github') {
+    const branches = await getGhBranches(auth.token, source.value.owner, source.value.name)
+    const branch   = (branches || []).find(b => b.name === store.sourceBranch)
+    if (branch) {
+      const data = await getGhTree(auth.token, source.value.owner, source.value.name, branch.commit.sha)
+      store.sourceTree = data.tree || []
+    }
+  } else {
+    const data = await getGlTree(auth.token, auth.gitlabHost, source.value.id, store.sourceBranch)
+    store.sourceTree = Array.isArray(data)
+      ? data.map(i => ({ path: i.path, type: i.type === 'tree' ? 'tree' : 'blob' }))
+      : []
+  }
+
+  treeLoading.value = false
+  updateNav()
+}
+</script>
+
+<style lang="scss" scoped>
+.paths-source-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+}
+
+.paths-source-name {
+  font-size: 12px;
+  font-weight: 700;
+  color: $primary;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.paths-tree-panel { flex: 1; }
+
+.paths-tree-body {
+  min-height: 180px;
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.paths-hint {
+  font-size: 11px;
+  color: #808080;
+  padding: 4px 0;
+
+  &--idle { margin-top: 6px; }
+}
+
+.paths-selected {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #222;
+
+  strong { color: $primary; }
+}
+</style>
diff --git a/frontend/src/pages/ExtractProgressPage.vue b/frontend/src/pages/ExtractProgressPage.vue
new file mode 100644
index 0000000..0e7d6f7
--- /dev/null
+++ b/frontend/src/pages/ExtractProgressPage.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">{{ headIcon }}</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 6 of 7</div>
+        <h1 class="wiz-page__title">{{ headTitle }}</h1>
+        <p class="wiz-page__desc">{{ headDesc }}</p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+
+      <!-- Current action label -->
+      <div class="prg-action">{{ actionLabel }}</div>
+
+      <!-- Win98-style segmented progress bar -->
+      <div class="prg-bar-wrap">
+        <div class="prg-bar">
+          <div
+            v-for="i in TOTAL_SEGS"
+            :key="i"
+            class="prg-bar__seg"
+            :class="{ 'prg-bar__seg--on': i <= filledSegs }"
+          />
+        </div>
+        <div class="prg-pct">{{ pctLabel }}</div>
+      </div>
+
+      <!-- InstallShield-style status log -->
+      <div class="w98-panel prg-log-panel">
+        <div class="w98-panel__head">📋 Status Log</div>
+        <div ref="logBodyEl" class="w98-panel__body prg-log-body">
+          <div
+            v-for="(line, i) in logLines"
+            :key="i"
+            class="prg-log-line"
+          >
+            <span class="prg-log-line__msg">{{ line.msg }}</span>
+            <span
+              v-if="line.badge"
+              class="prg-log-line__badge"
+              :class="`prg-log-line__badge--${line.variant}`"
+            >{{ line.badge }}</span>
+          </div>
+          <div v-if="!logLines.length" class="prg-log-empty">Starting…</div>
+        </div>
+      </div>
+
+      <!-- Error banner -->
+      <div v-if="errorMsg" class="prg-error">⚠ {{ errorMsg }}</div>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { useReposStore } from '../stores/repos.js'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+// ── Constants ──────────────────────────────────────────────────
+const TOTAL_SEGS = 28   // number of blocks in the progress bar
+
+// ── Stores / composables ───────────────────────────────────────
+const store  = useReposStore()
+const auth   = useAuthStore()
+const router = useRouter()
+const nav    = useWizardNav()
+
+// ── State ──────────────────────────────────────────────────────
+const progress  = ref(0)         // 0–100
+const logLines  = ref([])
+const errorMsg  = ref('')
+const phase     = ref('idle')    // idle | submitting | running | done | error
+const logBodyEl = ref(null)
+
+let pollTimer = null
+let rampTimer = null
+
+// ── Computed ───────────────────────────────────────────────────
+const filledSegs = computed(() => Math.round((progress.value / 100) * TOTAL_SEGS))
+const pctLabel   = computed(() => `${Math.round(progress.value)}%`)
+
+const headIcon = computed(() => {
+  if (phase.value === 'done')  return '✔'
+  if (phase.value === 'error') return '✖'
+  return '⟳'
+})
+const headTitle = computed(() => {
+  if (phase.value === 'done')  return 'Extraction Complete'
+  if (phase.value === 'error') return 'Extraction Failed'
+  return 'Extracting Files…'
+})
+const headDesc = computed(() => {
+  if (phase.value === 'done')  return 'All files were copied to the target repository.'
+  if (phase.value === 'error') return 'An error occurred. See the status log for details.'
+  return 'Please wait while git-extract copies your files. Do not close this window.'
+})
+const actionLabel = computed(() => {
+  if (phase.value === 'submitting') return 'Submitting extraction job…'
+  if (phase.value === 'running')    return 'Copying files…'
+  if (phase.value === 'done')       return 'Setup complete.'
+  if (phase.value === 'error')      return 'Setup did not complete.'
+  return 'Initialising…'
+})
+
+// ── Helpers ────────────────────────────────────────────────────
+function log(msg, badge = '', variant = 'info') {
+  logLines.value.push({ msg, badge, variant })
+  nextTick(() => {
+    if (logBodyEl.value) logBodyEl.value.scrollTop = logBodyEl.value.scrollHeight
+  })
+}
+
+function setNav(done = false, hasError = false) {
+  nav.value = {
+    backLabel: '< Back', backDisabled: !done && !hasError,
+    onBack: (done || hasError) ? () => router.push('/extract/options') : null,
+    nextLabel: 'Next >', nextDisabled: !done || hasError,
+    onNext: (done && !hasError) ? () => router.push('/extract/finish') : null,
+    finishLabel: 'Finish', finishDisabled: true, onFinish: null,
+  }
+}
+
+/** Smoothly ramp `progress` toward `target` over `ms` milliseconds. */
+function rampTo(target, ms) {
+  clearInterval(rampTimer)
+  const origin = progress.value
+  const t0     = Date.now()
+  rampTimer = setInterval(() => {
+    const frac = Math.min((Date.now() - t0) / ms, 1)
+    progress.value = origin + (target - origin) * frac
+    if (frac >= 1) clearInterval(rampTimer)
+  }, 50)
+}
+
+// ── Main extraction flow ───────────────────────────────────────
+async function run() {
+  phase.value = 'submitting'
+  setNav()
+
+  log('Connecting to extraction server…')
+  rampTo(8, 800)
+
+  const base   = auth.provider === 'github'
+    ? 'https://github.com'
+    : `https://${auth.gitlabHost}`
+  const source = store.selectedSource
+  const target = store.selectedTarget
+
+  let data
+  try {
+    const res = await fetch(`${process.env.WORKER_URL}/extract`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        sourceRepoUrl:       `${base}/${source.fullName}`,
+        sourceToken:          auth.token,
+        sourcePath:           store.sourcePath,
+        targetRepoUrl:       `${base}/${target.fullName}`,
+        targetToken:          auth.token,
+        targetBranch:         store.targetBranch,
+        targetPath:           store.targetPath,
+        generateProjectFile:  store.generateProjectFile,
+      }),
+    })
+    data = await res.json()
+  } catch {
+    fail('Network error — could not reach the extraction server.')
+    return
+  }
+
+  if (data.error) {
+    fail(data.error)
+    return
+  }
+
+  store.extractRunId  = data.runId  || ''
+  store.extractRunUrl = data.runUrl || ''
+  log('Job submitted successfully', 'OK', 'ok')
+  rampTo(18, 600)
+
+  phase.value = 'running'
+  log('Workflow queued, waiting for runner…')
+  rampTo(22, 1200)
+
+  // Start polling
+  pollTimer = setInterval(poll, 4000)
+  await poll()
+}
+
+async function poll() {
+  if (!store.extractRunId) return
+  try {
+    const res  = await fetch(
+      `${process.env.WORKER_URL}/status?runId=${encodeURIComponent(store.extractRunId)}`,
+    )
+    const data = await res.json()
+    const st   = data.status     || 'queued'
+    const con  = data.conclusion || null
+
+    // Sprinkle fake progress messages as the job advances
+    if (st === 'in_progress') {
+      if (logLines.value.length === 3) {
+        log('Fetching source tree…')
+        rampTo(45, 5000)
+      } else if (logLines.value.length === 4) {
+        log('Reading and staging files…')
+        rampTo(72, 6000)
+      } else if (logLines.value.length === 5) {
+        log('Writing to target repository…')
+        rampTo(88, 5000)
+      }
+    }
+
+    if (st === 'completed') {
+      clearInterval(pollTimer)
+      if (con === 'success') {
+        log('Files written successfully', 'OK', 'ok')
+        if (store.generateProjectFile) log('Project file written (.git-extract.json)', 'OK', 'ok')
+        log('Workflow completed', 'OK', 'ok')
+        rampTo(100, 500)
+        setTimeout(() => {
+          phase.value         = 'done'
+          store.extractStatus = 'done'
+          store.extractResult = data
+          setNav(true, false)
+        }, 600)
+      } else {
+        log(`Workflow ended: ${con || 'failed'}`, 'ERR', 'err')
+        fail(`Extraction ${con || 'failed'}. Check your run logs for details.`)
+      }
+    }
+  } catch {
+    // Network blip — keep polling silently
+  }
+}
+
+function fail(msg) {
+  clearInterval(pollTimer)
+  clearInterval(rampTimer)
+  errorMsg.value      = msg
+  phase.value         = 'error'
+  store.extractStatus = 'error'
+  log(msg, 'ERR', 'err')
+  setNav(false, true)
+}
+
+// ── Lifecycle ──────────────────────────────────────────────────
+onMounted(() => { setNav(); run() })
+onUnmounted(() => { clearInterval(pollTimer); clearInterval(rampTimer) })
+</script>
+
+<style lang="scss" scoped>
+// ── Current-action label ───────────────────────────────────────
+.prg-action {
+  font-size: 12px;
+  color: #000;
+  margin-bottom: 10px;
+  min-height: 1.4em;
+}
+
+// ── Win98 segmented progress bar ──────────────────────────────
+.prg-bar-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.prg-bar {
+  flex: 1;
+  height: 18px;
+  padding: 2px;
+  display: flex;
+  gap: 2px;
+  // Classic Win98 inset border
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+
+  &__seg {
+    flex: 1;
+    height: 100%;
+    background: #c8c8c8;
+
+    &--on {
+      background: $secondary;  // forest green — same as Win98 setup progress
+    }
+  }
+}
+
+.prg-pct {
+  width: 34px;
+  flex-shrink: 0;
+  text-align: right;
+  font-size: 11px;
+  color: #444;
+}
+
+// ── Status log panel ───────────────────────────────────────────
+.prg-log-panel  { margin-bottom: 10px; }
+
+.prg-log-body {
+  min-height: 90px;
+  max-height: 160px;
+  overflow-y: auto;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+  padding: 6px 8px;
+}
+
+.prg-log-empty { color: #808080; }
+
+.prg-log-line {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+
+  &__msg   { color: #222; flex: 1; }
+  &__badge {
+    flex-shrink: 0;
+    font-weight: 700;
+
+    &--ok   { color: $secondary; }
+    &--err  { color: $negative; }
+    &--info { color: #808080; }
+  }
+}
+
+// ── Error banner ───────────────────────────────────────────────
+.prg-error {
+  font-size: 11px;
+  padding: 6px 10px;
+  border: 2px solid $negative;
+  background: #ffeeee;
+  color: $negative;
+}
+</style>
diff --git a/frontend/src/pages/LoginPage.vue b/frontend/src/pages/LoginPage.vue
index fd4ae6d..73f1ac5 100644
--- a/frontend/src/pages/LoginPage.vue
+++ b/frontend/src/pages/LoginPage.vue
@@ -1,63 +1,136 @@
 <template>
-  <q-page class="flex flex-center">
-    <q-card style="min-width: 360px">
-      <q-card-section>
-        <div class="text-h6">Sign in</div>
-      </q-card-section>
-
-      <q-card-section v-if="errorMessage">
-        <q-banner class="bg-negative text-white" rounded>
-          {{ errorMessage }}
-        </q-banner>
-      </q-card-section>
-
-      <q-card-section class="q-gutter-md">
-        <q-btn
-          color="dark"
-          icon="fab fa-github"
-          label="Login with GitHub"
-          class="full-width"
-          @click="loginGithub"
-        />
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section class="q-gutter-md">
-        <q-input v-model="gitlabHost" label="GitLab host" outlined dense />
-        <q-btn
-          color="orange"
-          icon="fab fa-gitlab"
-          label="Login with GitLab"
-          class="full-width"
-          @click="loginGitlab"
-        />
-      </q-card-section>
-    </q-card>
-  </q-page>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">🔑</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 2 of 4</div>
+        <h1 class="wiz-page__title">Sign In</h1>
+        <p class="wiz-page__desc">
+          Select a Git provider, then click <strong>Sign In &gt;</strong>.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+
+      <!-- Error banner -->
+      <div v-if="errorMessage" class="login-error">⚠ {{ errorMessage }}</div>
+
+      <p class="login-intro">How would you like to sign in?</p>
+
+      <!-- ── Provider radio options ──────────────────────────────── -->
+      <div class="provider-options">
+        <label
+          v-for="p in providers"
+          :key="p.id"
+          class="provider-option"
+        >
+          <input
+            type="radio"
+            name="provider"
+            :value="p.id"
+            v-model="selected"
+          />
+          <div class="provider-option__body">
+            <span class="provider-option__name">
+              <q-icon :name="p.icon" class="provider-option__icon" :class="`provider-option__icon--${p.id}`" />
+              {{ p.name }}
+            </span>
+            <span class="provider-option__desc">{{ p.desc }}</span>
+          </div>
+        </label>
+      </div>
+
+      <!-- ── GitLab host (only when GitLab selected) ─────────────── -->
+      <transition name="slide">
+        <div v-if="selected === 'gitlab'" class="gitlab-host-box">
+          <div class="w98-group-box">
+            <div class="w98-group-box__label">GitLab Instance</div>
+            <div class="w98-group-box__body">
+              <label class="w98-field-label" for="gl-host" style="display:block;margin-bottom:4px">
+                Host:
+              </label>
+              <input
+                id="gl-host"
+                v-model="gitlabHost"
+                class="w98-input-host"
+                placeholder="gitlab.com"
+                spellcheck="false"
+              />
+              <div class="host-hint">
+                Use <code>gitlab.com</code> for the public instance.
+                Change only for self-hosted GitLab servers.
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { ref, computed, watch, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { startGitlabLogin } from '../services/gitlab.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 
-const route = useRoute()
-
+const route      = useRoute()
+const router     = useRouter()
+const nav        = useWizardNav()
+const selected   = ref(null)
 const gitlabHost = ref('gitlab.com')
 
+const providers = [
+  {
+    id:   'github',
+    name: 'GitHub',
+    icon: 'fab fa-github',
+    desc: 'Sign in with GitHub via OAuth — grants access to public and private repositories.',
+  },
+  {
+    id:   'gitlab',
+    name: 'GitLab',
+    icon: 'fab fa-gitlab',
+    desc: 'Sign in with GitLab via PKCE — works with gitlab.com or a self-hosted instance.',
+  },
+]
+
+onMounted(updateNav)
+watch(selected, updateNav)
+
+function updateNav() {
+  nav.value = {
+    backLabel: '< Back',
+    backDisabled: false,
+    onBack: () => router.push('/welcome'),
+    nextLabel: selected.value ? 'Sign In >' : 'Next >',
+    nextDisabled: !selected.value,
+    onNext: selected.value ? () => proceed() : null,
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
+  }
+}
+
 const errorMessage = computed(() => {
   if (!route.query.error) return null
-  const messages = {
+  const map = {
     no_token: 'Authentication failed: no token received.',
-    no_code: 'Authentication failed: no code received.',
+    no_code:  'Authentication failed: no code received.',
   }
-  return messages[route.query.error] ?? `Authentication error: ${route.query.error}`
+  return map[route.query.error] ?? `Authentication error: ${route.query.error}`
 })
 
+async function proceed() {
+  if (selected.value === 'github') loginGithub()
+  else if (selected.value === 'gitlab') await loginGitlab()
+}
+
 function loginGithub() {
-  const workerUrl = process.env.WORKER_URL
-  const clientId = process.env.GITHUB_CLIENT_ID
+  const workerUrl   = process.env.WORKER_URL
+  const clientId    = process.env.GITHUB_CLIENT_ID
   const redirectUri = `${workerUrl}/auth/github/callback`
   const params = new URLSearchParams({ client_id: clientId, scope: 'repo user', redirect_uri: redirectUri })
   window.location.href = `https://github.com/login/oauth/authorize?${params}`
@@ -67,3 +140,143 @@ async function loginGitlab() {
   await startGitlabLogin(gitlabHost.value, process.env.GITLAB_CLIENT_ID)
 }
 </script>
+
+<style lang="scss" scoped>
+// ── Error banner ───────────────────────────────────────────────────
+.login-error {
+  font-size: 11px;
+  padding: 5px 10px;
+  margin-bottom: 10px;
+  border: 2px solid #c10015;
+  background: #ffeeee;
+  color: #c10015;
+  max-width: 420px;
+}
+
+// ── Intro text ─────────────────────────────────────────────────────
+.login-intro {
+  font-size: 12px;
+  color: #000;
+  margin: 0 0 10px;
+}
+
+// ── Provider radio options ─────────────────────────────────────────
+// Intentionally plain — no boxes, no raised borders.
+// This matches real Win98 wizard radio-button pages
+// (Internet Connection Wizard, Add Hardware Wizard, etc.)
+.provider-options {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 440px;
+  margin-bottom: 18px;
+}
+
+.provider-option {
+  display: flex;
+  align-items: flex-start;
+  gap: 7px;
+  padding: 4px 2px;
+  cursor: pointer;
+  user-select: none;
+
+  // No background, no box-shadow — just the native radio + text on white
+
+  input[type='radio'] {
+    flex-shrink: 0;
+    margin: 3px 0 0;
+    cursor: pointer;
+    accent-color: $primary;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    line-height: 1;
+  }
+
+  &__name {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    font-weight: 700;
+    color: #000;
+  }
+
+  &__icon {
+    font-size: 14px !important;
+    color: #333;
+
+    &--gitlab { color: #e24329; }
+  }
+
+  &__desc {
+    font-size: 11px;
+    color: #444;
+    line-height: 1.45;
+    padding-left: 19px; // indent to align under the name text
+  }
+}
+
+// ── GitLab host group box ──────────────────────────────────────────
+.gitlab-host-box { max-width: 380px; }
+
+.w98-group-box {
+  border: 1px solid #808080;
+  box-shadow: 1px 1px 0 #fff;
+  padding: 0 10px 10px;
+  position: relative;
+  margin-top: 2px;
+
+  &__label {
+    position: absolute;
+    top: -8px;
+    left: 8px;
+    background: #fff;
+    padding: 0 3px;
+    font-size: 11px;
+    font-weight: 700;
+    color: #000;
+  }
+
+  &__body { padding-top: 10px; }
+}
+
+.w98-input-host {
+  width: 100%;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+  box-sizing: border-box;
+  margin-bottom: 5px;
+}
+
+.host-hint {
+  font-size: 10px;
+  color: #808080;
+  line-height: 1.4;
+
+  code {
+    font-family: 'Courier New', monospace;
+    font-size: 10px;
+    background: #e8e8e8;
+    padding: 0 2px;
+  }
+}
+
+// ── Slide-down transition ──────────────────────────────────────────
+.slide-enter-active { transition: opacity 0.15s, transform 0.15s; }
+.slide-leave-active { transition: opacity 0.1s,  transform 0.1s; }
+.slide-enter-from   { opacity: 0; transform: translateY(-4px); }
+.slide-leave-to     { opacity: 0; transform: translateY(-4px); }
+</style>
diff --git a/frontend/src/pages/ReposPage.vue b/frontend/src/pages/ReposPage.vue
index 94dbb4e..beb15d7 100644
--- a/frontend/src/pages/ReposPage.vue
+++ b/frontend/src/pages/ReposPage.vue
@@ -1,63 +1,124 @@
 <template>
-  <q-page padding>
-    <q-input
-      v-model="store.search"
-      placeholder="Filter repositories…"
-      outlined
-      dense
-      clearable
-      class="q-mb-md"
-    >
-      <template #prepend><q-icon name="search" /></template>
-    </q-input>
-
-    <q-infinite-scroll @load="onLoad" :offset="200">
-      <div class="row q-gutter-md">
-        <q-card
-          v-for="repo in store.filtered"
-          :key="repo.id"
-          class="col-12 col-sm-5 col-md-3 cursor-pointer"
-          @click="selectRepo(repo)"
-        >
-          <q-card-section>
-            <div class="row items-center q-gutter-sm">
-              <q-icon
-                :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
-                size="sm"
-              />
-              <div class="text-subtitle1 text-weight-medium">{{ repo.name }}</div>
-            </div>
-            <div class="text-caption text-grey">{{ repo.fullName }}</div>
-            <div class="text-caption text-grey">Updated {{ formatDate(repo.updatedAt) }}</div>
-          </q-card-section>
-        </q-card>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">🗄</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 3 of 4</div>
+        <h1 class="wiz-page__title">Select Source Repository</h1>
+        <p class="wiz-page__desc">
+          Double-click (or click) a repository to select it and proceed to configuration.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <!-- Filter -->
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
+        <label class="w98-field-label" style="margin:0;white-space:nowrap">Filter:</label>
+        <input
+          v-model="store.search"
+          class="w98-filter-input"
+          placeholder="type to filter…"
+        />
+        <button v-if="store.search" class="w98-btn" style="min-width:auto;padding:0 8px" @click="store.search = ''">✕</button>
       </div>
 
-      <template #loading>
-        <div class="row justify-center q-my-md">
-          <q-spinner-dots size="40px" />
+      <!-- List view -->
+      <div class="repo-listview">
+        <!-- Header -->
+        <div class="repo-listview__header">
+          <div class="repo-listview__col repo-listview__col--icon" />
+          <div class="repo-listview__col repo-listview__col--name">Name</div>
+          <div class="repo-listview__col repo-listview__col--provider">Provider</div>
+          <div class="repo-listview__col repo-listview__col--updated">Last updated</div>
         </div>
-      </template>
-    </q-infinite-scroll>
-  </q-page>
+
+        <!-- Rows -->
+        <div class="repo-listview__body">
+          <q-infinite-scroll @load="onLoad" :offset="100">
+            <div
+              v-for="repo in store.filtered"
+              :key="repo.id"
+              class="repo-row"
+              :class="{ 'repo-row--selected': selected === repo.id }"
+              @click="selected = repo.id"
+              @dblclick="confirm(repo)"
+            >
+              <div class="repo-listview__col repo-listview__col--icon">
+                <q-icon
+                  :name="repo.provider === 'github' ? 'fab fa-github' : 'fab fa-gitlab'"
+                  size="14px"
+                />
+              </div>
+              <div class="repo-listview__col repo-listview__col--name">{{ repo.fullName }}</div>
+              <div class="repo-listview__col repo-listview__col--provider">{{ repo.provider }}</div>
+              <div class="repo-listview__col repo-listview__col--updated">{{ formatDate(repo.updatedAt) }}</div>
+            </div>
+
+            <template #loading>
+              <div style="text-align:center;padding:8px;font-size:11px;color:#808080">
+                Loading…
+              </div>
+            </template>
+          </q-infinite-scroll>
+
+          <div v-if="store.loading && !store.list.length" style="text-align:center;padding:16px;font-size:11px;color:#808080">
+            Loading repositories…
+          </div>
+
+          <div v-if="!store.loading && !store.filtered.length" style="text-align:center;padding:16px;font-size:11px;color:#808080">
+            No repositories found.
+          </div>
+        </div>
+      </div>
+
+      <div style="font-size:10px;color:#808080;margin-top:4px">
+        {{ store.filtered.length }} item(s)
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useReposStore } from '../stores/repos.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
 
 const store = useReposStore()
 const router = useRouter()
+const nav = useWizardNav()
+const selected = ref(null)
 
-onMounted(() => store.loadRepos())
+onMounted(() => {
+  store.loadRepos()
+  updateNav()
+})
+
+watch(selected, updateNav)
+
+function updateNav() {
+  const repo = store.list.find((r) => r.id === selected.value) || null
+  nav.value = {
+    backLabel: '< Back',
+    backDisabled: false,
+    onBack: () => router.push('/login'),
+    nextLabel: 'Next >',
+    nextDisabled: !selected.value,
+    onNext: selected.value ? () => confirm(repo) : null,
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
+  }
+}
 
 async function onLoad(index, done) {
   await store.loadMore()
   done(!store.hasMore)
 }
 
-function selectRepo(repo) {
+function confirm(repo) {
+  if (!repo) return
   store.selectSource(repo)
   router.push('/extract')
 }
@@ -66,3 +127,81 @@ function formatDate(iso) {
   return new Date(iso).toLocaleDateString()
 }
 </script>
+
+<style lang="scss" scoped>
+.w98-filter-input {
+  flex: 1;
+  max-width: 300px;
+  height: 21px;
+  padding: 2px 4px;
+  font-family: 'Tahoma', 'MS Sans Serif', Arial, sans-serif;
+  font-size: 12px;
+  border: none;
+  box-shadow:
+    inset  1px  1px #0a0a0a,
+    inset -1px -1px #ffffff,
+    inset  2px  2px #808080,
+    inset -2px -2px #e8e8e8;
+  background: #fff;
+}
+
+/* Win98 Explorer-style list view */
+.repo-listview {
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+  height: 320px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  &__header {
+    display: flex;
+    background: #F2F2F2;
+    border-bottom: 1px solid #808080;
+    flex-shrink: 0;
+
+    .repo-listview__col {
+      padding: 2px 6px;
+      font-size: 11px;
+      font-weight: 700;
+      border-right: 2px solid;
+      border-color: #fff #808080 #808080 #fff;
+      white-space: nowrap;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  &__col {
+    padding: 3px 6px;
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &--icon    { width: 24px; flex-shrink: 0; text-align: center; }
+    &--name    { flex: 1; min-width: 0; }
+    &--provider{ width: 72px; flex-shrink: 0; }
+    &--updated { width: 100px; flex-shrink: 0; }
+  }
+}
+
+.repo-row {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #efefef;
+  cursor: default;
+
+  &:hover { background: #A7D9B8; }
+
+  &--selected {
+    background: $primary !important;
+    color: #fff;
+  }
+
+  &:last-child { border-bottom: none; }
+}
+</style>
diff --git a/frontend/src/pages/WelcomePage.vue b/frontend/src/pages/WelcomePage.vue
new file mode 100644
index 0000000..dea5482
--- /dev/null
+++ b/frontend/src/pages/WelcomePage.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="wiz-page">
+    <div class="wiz-page__head">
+      <div class="wiz-page__head-icon">⎇</div>
+      <div class="wiz-page__head-text">
+        <div class="wiz-page__step-label">Step 1 of 4</div>
+        <h1 class="wiz-page__title">Welcome to git-extract Setup</h1>
+        <p class="wiz-page__desc">
+          This wizard will guide you through extracting a subdirectory from any Git repository
+          while preserving its full commit history.
+        </p>
+      </div>
+    </div>
+
+    <div class="wiz-page__body">
+      <!-- What is this tool -->
+      <div class="welcome-box q-mb-md">
+        <div class="welcome-box__title">What does git-extract do?</div>
+        <p class="welcome-box__text">
+          <strong>git-extract</strong> splits a subdirectory out of a Git repository into a
+          brand-new repository — keeping the <em>complete commit history</em> for every file
+          in that path. No manual rebasing, no lost commits, no need to install anything locally.
+        </p>
+      </div>
+
+      <!-- Steps overview -->
+      <div class="welcome-steps">
+        <div class="welcome-step">
+          <div class="welcome-step__num">1</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Welcome</div>
+            <div class="welcome-step__desc">You are here. Read this overview, then click <strong>Next&nbsp;&gt;</strong>.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">2</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Sign In</div>
+            <div class="welcome-step__desc">Connect your GitHub or GitLab account.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">3</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Select Repository</div>
+            <div class="welcome-step__desc">Pick the repository that contains the path you want to extract.</div>
+          </div>
+        </div>
+        <div class="welcome-step">
+          <div class="welcome-step__num">4</div>
+          <div class="welcome-step__body">
+            <div class="welcome-step__title">Configure &amp; Extract</div>
+            <div class="welcome-step__desc">
+              Choose the source folder, target repository and branch, then click
+              <strong>Extract &amp; Push</strong>. A GitHub Actions job rewrites history and
+              pushes the result automatically.
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class="welcome-note">
+        To continue, click <strong>Next &gt;</strong> below.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+import { useWizardNav } from '../composables/useWizardNav.js'
+
+const router = useRouter()
+const auth   = useAuthStore()
+const nav    = useWizardNav()
+
+onMounted(() => {
+  nav.value = {
+    backLabel: '< Back',
+    backDisabled: true,
+    onBack: null,
+    nextLabel: 'Next >',
+    nextDisabled: false,
+    onNext: () => router.push(auth.isLoggedIn ? '/repos' : '/login'),
+    finishLabel: 'Finish',
+    finishDisabled: true,
+    onFinish: null,
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.welcome-box {
+  max-width: 520px;
+  padding: 10px 12px;
+  background: #fffff0;
+  border: 2px solid;
+  border-color: #808080 #fff #fff #808080;
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    color: $primary;
+    margin-bottom: 5px;
+  }
+
+  &__text {
+    font-size: 11px;
+    color: #333;
+    margin: 0;
+    line-height: 1.55;
+  }
+}
+
+.welcome-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 520px;
+  margin-bottom: 14px;
+}
+
+.welcome-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+
+  &__num {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    background: $secondary;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1px;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 700;
+    color: $primary;
+  }
+
+  &__desc {
+    font-size: 11px;
+    color: #444;
+    margin-top: 1px;
+    line-height: 1.4;
+  }
+}
+
+.welcome-note {
+  font-size: 11px;
+  color: #666;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 91043bb..b47c975 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -1,14 +1,20 @@
 const routes = [
   {
     path: '/',
-    component: () => import('layouts/MainLayout.vue'),
+    component: () => import('layouts/WizardLayout.vue'),
     children: [
-      { path: '', redirect: '/repos' },
-      { path: '/login', component: () => import('pages/LoginPage.vue') },
+      { path: '', redirect: '/welcome' },
+      { path: '/welcome', component: () => import('pages/WelcomePage.vue') },
+      { path: '/login',   component: () => import('pages/LoginPage.vue') },
       { path: '/auth/github', component: () => import('pages/AuthCallback.vue') },
       { path: '/auth/gitlab', component: () => import('pages/AuthCallback.vue') },
       { path: '/repos', component: () => import('pages/ReposPage.vue'), meta: { requiresAuth: true } },
-      { path: '/extract', component: () => import('pages/ExtractPage.vue'), meta: { requiresAuth: true } },
+      // /extract → always land on the first extract sub-step
+      { path: '/extract', redirect: '/extract/paths' },
+      { path: '/extract/paths',    component: () => import('pages/ExtractPathsPage.vue'),    meta: { requiresAuth: true } },
+      { path: '/extract/options',  component: () => import('pages/ExtractOptionsPage.vue'),  meta: { requiresAuth: true } },
+      { path: '/extract/progress', component: () => import('pages/ExtractProgressPage.vue'), meta: { requiresAuth: true } },
+      { path: '/extract/finish',   component: () => import('pages/ExtractFinishPage.vue'),   meta: { requiresAuth: true } },
     ],
   },
   { path: '/:catchAll(.*)*', component: () => import('pages/ErrorNotFound.vue') },
diff --git a/frontend/src/stores/repos.js b/frontend/src/stores/repos.js
index 67309b4..5a0107a 100644
--- a/frontend/src/stores/repos.js
+++ b/frontend/src/stores/repos.js
@@ -12,9 +12,18 @@ export const useReposStore = defineStore('repos', () => {
   const search = ref('')
   const selectedSource = ref(null)
   const selectedTarget = ref(null)
-  const sourceTree = ref([])
-  const sourcePath = ref('')
-  const targetPath = ref('src')
+  const sourceTree     = ref([])
+  const sourcePath     = ref('')
+  const sourceBranch   = ref('')
+  const sourceBranches = ref([])
+  const targetPath     = ref('src')
+  const targetBranch   = ref('')
+  const targetBranches = ref([])
+  const generateProjectFile = ref(false)
+  const extractRunId   = ref('')
+  const extractRunUrl  = ref('')
+  const extractStatus  = ref(null)   // null | 'running' | 'done' | 'error'
+  const extractResult  = ref(null)
 
   const filtered = computed(() =>
     search.value
@@ -91,7 +100,16 @@ export const useReposStore = defineStore('repos', () => {
     selectedTarget,
     sourceTree,
     sourcePath,
+    sourceBranch,
+    sourceBranches,
     targetPath,
+    targetBranch,
+    targetBranches,
+    generateProjectFile,
+    extractRunId,
+    extractRunUrl,
+    extractStatus,
+    extractResult,
     filtered,
     loadRepos,
     loadMore,