diff --git a/src/screens/Prologue.jsx b/src/screens/Prologue.jsx
new file mode 100644
index 0000000..a31864d
--- /dev/null
+++ b/src/screens/Prologue.jsx
@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { BACKGROUNDS } from '../constants.js'
+
+// Prologue screen — shown on the 'Prologue' tab.
+// If background_id is null: shows background selection UI.
+// If background_id is set: shows read-only summary of chosen background.
+// Props:
+//   state          — current game state
+//   onSelectBackground(id) — called when player confirms a background
+
+export default function Prologue({ state, onSelectBackground }) {
+  const [selected, setSelected] = useState(null)
+  const chosen = BACKGROUNDS.find(b => b.id === state.background_id) || null
+
+  // Read-only view — background already chosen
+  if (chosen) {
+    return (
+      <div className="prologue-screen prologue-chosen">
+        <div className="prologue-header">
+          <span className="prologue-label">Your origin</span>
+          <h2 className="prologue-chosen-name">{chosen.name}</h2>
+          <span className="prologue-chosen-latin">{chosen.latin}</span>
+        </div>
+        <p className="prologue-chosen-summary">{chosen.summary}</p>
+        <div className="prologue-chosen-den">
+          Starting funds: <strong>{chosen.starting_den} denarii</strong>
+        </div>
+      </div>
+    )
+  }
+
+  // Selection view — background_id is null
+  return (
+    <div className="prologue-screen prologue-select">
+      <div className="prologue-header">
+        <span className="prologue-label">Before the first dispatch</span>
+        <h2 className="prologue-title">Who were you?</h2>
+        <p className="prologue-subtitle">
+          Your background shapes your starting parameters. This choice is permanent.
+        </p>
+      </div>
+
+      <div className="prologue-grid">
+        {BACKGROUNDS.map(bg => (
+          <button
+            key={bg.id}
+            className={`prologue-card${selected === bg.id ? ' prologue-card--selected' : ''}`}
+            onClick={() => setSelected(bg.id)}
+          >
+            <span className="prologue-card-latin">{bg.latin}</span>
+            <span className="prologue-card-name">{bg.name}</span>
+            <span className="prologue-card-summary">{bg.summary}</span>
+            <span className="prologue-card-den">{bg.starting_den} dn.</span>
+          </button>
+        ))}
+      </div>
+
+      <div className="prologue-confirm-row">
+        <button
+          className="prologue-confirm"
+          disabled={!selected}
+          onClick={() => selected && onSelectBackground(selected)}
+        >
+          {selected
+            ? `Begin as ${BACKGROUNDS.find(b => b.id === selected)?.name}`
+            : 'Select a background'}
+        </button>
+      </div>
+    </div>
+  )
+}