diff --git a/templates/configmap.yaml b/templates/configmap.yaml
index b2b26e1..98717d6 100644
--- a/templates/configmap.yaml
+++ b/templates/configmap.yaml
@@ -7,13 +7,108 @@ metadata:
 data:
   index.html: |
     <!doctype html>
-    <html>
+    <html lang="en">
       <head>
         <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>{{ .Values.environment }} - kub-web-test</title>
+        <style>
+          :root {
+            color-scheme: dark;
+            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+            background: #111827;
+            color: #f8fafc;
+          }
+
+          * {
+            box-sizing: border-box;
+          }
+
+          body {
+            min-height: 100vh;
+            margin: 0;
+            display: grid;
+            place-items: center;
+            background:
+              radial-gradient(circle at top left, rgba(20, 184, 166, 0.28), transparent 34rem),
+              linear-gradient(135deg, #111827 0%, #1f2937 45%, #312e81 100%);
+          }
+
+          main {
+            width: min(68rem, calc(100% - 2rem));
+            padding: clamp(2rem, 6vw, 5rem);
+          }
+
+          .eyebrow {
+            margin: 0 0 1rem;
+            color: #5eead4;
+            font-size: 0.85rem;
+            font-weight: 800;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+          }
+
+          h1 {
+            max-width: 12ch;
+            margin: 0;
+            font-size: clamp(3.2rem, 12vw, 8rem);
+            line-height: 0.9;
+          }
+
+          .lede {
+            max-width: 42rem;
+            margin: 1.5rem 0 0;
+            color: #dbeafe;
+            font-size: clamp(1.05rem, 2vw, 1.35rem);
+            line-height: 1.7;
+          }
+
+          .pipeline {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+            margin-top: 2rem;
+            padding: 0;
+            list-style: none;
+          }
+
+          .pipeline li {
+            border: 1px solid rgba(255, 255, 255, 0.18);
+            border-radius: 0.5rem;
+            padding: 0.7rem 0.9rem;
+            background: rgba(15, 23, 42, 0.5);
+            color: #f8fafc;
+            font-weight: 700;
+          }
+
+          .environment {
+            display: inline-flex;
+            align-items: center;
+            min-height: 2.25rem;
+            margin-top: 2.5rem;
+            border-radius: 999px;
+            padding: 0 1rem;
+            background: #f8fafc;
+            color: #111827;
+            font-weight: 900;
+          }
+        </style>
       </head>
       <body>
-        <h1>{{ .Values.environment }}</h1>
-        <p>kub-web-test deployed with Helm, Argo CD and Kargo.</p>
+        <main>
+          <p class="eyebrow">Kubernetes GitOps demo</p>
+          <h1>kub-web-test</h1>
+          <p class="lede">
+            This static site is served by nginx from a Helm chart, deployed by Argo CD,
+            and promoted through Kargo from dev to staging to production.
+          </p>
+          <ul class="pipeline" aria-label="Promotion flow">
+            <li>dev branch</li>
+            <li>DEV site</li>
+            <li>STAGING approval</li>
+            <li>PROD release</li>
+          </ul>
+          <div class="environment">Current environment: {{ .Values.environment }}</div>
+        </main>
       </body>
     </html>
