diff --git a/README.md b/README.md
index 5084899..4e7819a 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Vault API
 
+![Vault API hero banner](docs/assets/vault-api-hero.svg)
+
 [![CI](https://github.com/MugdhoAI/vault-api/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/MugdhoAI/vault-api/actions/workflows/ci.yml)
 [![CodeQL](https://github.com/MugdhoAI/vault-api/actions/workflows/codeql.yml/badge.svg?branch=main)](https://github.com/MugdhoAI/vault-api/actions/workflows/codeql.yml)
 
diff --git a/docs/assets/vault-api-hero.svg b/docs/assets/vault-api-hero.svg
new file mode 100644
index 0000000..2eb9621
--- /dev/null
+++ b/docs/assets/vault-api-hero.svg
@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1500" height="500" viewBox="0 0 1500 500" role="img" aria-labelledby="title desc">
+<title id="title">Vault API — Store Secrets. Keep Control.</title>
+<desc id="desc">A dark blue technical banner for a learning-focused secret vault API, with a vault mascot, PostgreSQL storage, API request examples, and security features.</desc>
+<defs>
+  <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#050a12"/><stop offset=".58" stop-color="#071729"/><stop offset="1" stop-color="#02060c"/></linearGradient>
+  <linearGradient id="blue" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#38bdf8"/><stop offset="1" stop-color="#2563eb"/></linearGradient>
+  <linearGradient id="steel" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#193b5c"/><stop offset=".5" stop-color="#0b1d32"/><stop offset="1" stop-color="#142c46"/></linearGradient>
+  <filter id="glow"><feGaussianBlur stdDeviation="7" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
+</defs>
+<rect width="1500" height="500" rx="20" fill="url(#bg)"/>
+<rect x="1" y="1" width="1498" height="498" rx="19" fill="none" stroke="#263b52" stroke-width="2"/>
+<g opacity=".18" stroke="#1768a9" stroke-width="1"><path d="M620 30V470M680 30V470M740 30V470M800 30V470M860 30V470M920 30V470M980 30V470M1040 30V470M1100 30V470M1160 30V470M1220 30V470M1280 30V470"/><path d="M600 80H1460M600 140H1460M600 200H1460M600 260H1460M600 320H1460M600 380H1460M600 440H1460"/></g>
+<text x="58" y="77" fill="#38bdf8" font-family="monospace" font-size="18" letter-spacing="5">A SECURE SECRET VAULT API</text>
+<text x="55" y="185" fill="#f8fafc" font-family="Arial, Helvetica, sans-serif" font-size="98" font-weight="800" letter-spacing="-3">vault<tspan fill="url(#blue)">-api</tspan></text>
+<text x="60" y="252" fill="#f8fafc" font-family="Arial, Helvetica, sans-serif" font-size="39" font-weight="700">Store Secrets. <tspan fill="#38bdf8">Keep Control.</tspan></text>
+<text x="60" y="300" fill="#cbd5e1" font-family="Arial, Helvetica, sans-serif" font-size="21">A learning-focused secret vault API with secure authentication,</text>
+<text x="60" y="332" fill="#cbd5e1" font-family="Arial, Helvetica, sans-serif" font-size="21">encrypted secret storage, and PostgreSQL persistence.</text>
+<text x="60" y="408" fill="#7dd3fc" font-family="monospace" font-size="15" letter-spacing="1.5">FASTAPI  •  POSTGRESQL  •  JWT  •  ARGON2  •  FERNET</text>
+<g transform="translate(930 105)">
+  <ellipse cx="160" cy="310" rx="190" ry="24" fill="#0284c7" opacity=".16" filter="url(#glow)"/>
+  <rect x="0" y="96" width="325" height="214" rx="34" fill="url(#steel)" stroke="#38bdf8" stroke-width="3"/>
+  <rect x="15" y="111" width="295" height="184" rx="26" fill="none" stroke="#1e6092" stroke-width="2"/>
+  <rect x="62" y="130" width="200" height="142" rx="24" fill="#07111f" stroke="#24577f" stroke-width="2"/>
+  <path d="M126 178v-13a36 36 0 0 1 72 0v13" fill="none" stroke="#38bdf8" stroke-width="9" stroke-linecap="round"/>
+  <rect x="113" y="174" width="98" height="67" rx="14" fill="#102b45" stroke="#38bdf8" stroke-width="3"/>
+  <circle cx="162" cy="199" r="9" fill="#38bdf8"/><path d="M162 205v14" stroke="#38bdf8" stroke-width="5" stroke-linecap="round"/>
+  <circle cx="45" cy="202" r="12" fill="#0b1727" stroke="#38bdf8" stroke-width="3"/><circle cx="280" cy="202" r="12" fill="#0b1727" stroke="#38bdf8" stroke-width="3"/>
+  <rect x="126" y="82" width="74" height="20" rx="8" fill="#183e60" stroke="#38bdf8" stroke-width="2"/>
+  <text x="162" y="348" fill="#93c5fd" font-family="monospace" font-size="17" text-anchor="middle">VAULT / LOCKED</text>
+  <path d="M325 145h38v-35h24" fill="none" stroke="#38bdf8" stroke-width="2"/>
+  <path d="M325 255h48v32h14" fill="none" stroke="#38bdf8" stroke-width="2"/>
+  <circle cx="387" cy="110" r="4" fill="#38bdf8" filter="url(#glow)"/><circle cx="387" cy="287" r="4" fill="#38bdf8" filter="url(#glow)"/>
+</g>
+<g transform="translate(705 38)">
+  <rect width="278" height="116" rx="10" fill="#030914" stroke="#1d4c76" stroke-width="1.5"/>
+  <text x="18" y="27" fill="#38bdf8" font-family="monospace" font-size="14">POST /secrets</text>
+  <text x="18" y="50" fill="#cbd5e1" font-family="monospace" font-size="13">{ "name": "api_key",</text>
+  <text x="18" y="70" fill="#cbd5e1" font-family="monospace" font-size="13">  "value": "••••••••",</text>
+  <text x="18" y="90" fill="#cbd5e1" font-family="monospace" font-size="13">  "owner": "user" }</text>
+</g>
+<g transform="translate(1160 45)">
+  <rect width="280" height="120" rx="10" fill="#030914" stroke="#1d4c76" stroke-width="1.5"/>
+  <g fill="#7dd3fc" font-family="monospace" font-size="15">
+    <text x="20" y="28">✓  JWT Authentication</text><text x="20" y="54">✓  Argon2 Password Hashing</text><text x="20" y="80">✓  Fernet Encryption</text><text x="20" y="106">✓  PostgreSQL Storage</text>
+  </g>
+</g>
+<g transform="translate(730 370)">
+  <ellipse cx="54" cy="18" rx="48" ry="14" fill="#0b2741" stroke="#38bdf8" stroke-width="2"/>
+  <path d="M6 18v43c0 9 96 9 96 0V18M6 39c0 9 96 9 96 0" fill="#0b1b2e" stroke="#38bdf8" stroke-width="2"/>
+  <ellipse cx="54" cy="61" rx="48" ry="14" fill="#0b1b2e" stroke="#38bdf8" stroke-width="2"/>
+  <text x="54" y="91" fill="#93c5fd" font-family="monospace" font-size="12" text-anchor="middle">PostgreSQL</text>
+</g>
+<g transform="translate(1190 235)">
+  <rect width="238" height="100" rx="12" fill="#07111f" stroke="#1e5b8d" stroke-width="2"/>
+  <path d="M101 35v-8a18 18 0 0 1 36 0v8" fill="none" stroke="#38bdf8" stroke-width="5" stroke-linecap="round"/>
+  <rect x="92" y="34" width="54" height="42" rx="8" fill="#102b45" stroke="#38bdf8" stroke-width="2"/>
+  <circle cx="119" cy="52" r="5" fill="#38bdf8"/><path d="M119 56v9" stroke="#38bdf8" stroke-width="3"/>
+  <text x="119" y="91" fill="#7dd3fc" font-family="monospace" font-size="12" text-anchor="middle">ENCRYPTED AT REST</text>
+</g>
+</svg>
\ No newline at end of file