diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
index 6ce9cd3..b79e287 100644
--- a/.github/workflows/pages.yml
+++ b/.github/workflows/pages.yml
@@ -19,6 +19,9 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - name: Copy static assets
+        run: cp screenshot.png webpage/screenshot.png
+
       - name: Download all release binaries
         env:
           GH_TOKEN: ${{ github.token }}
diff --git a/webpage/index.html b/webpage/index.html
index bfaacf6..0b8f8da 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -3,56 +3,155 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ESP-Scope Firmware Installer</title>
+  <title>ESP-Scope — Web Oscilloscope for ESP32</title>
   <script type="module" src="https://unpkg.com/esp-web-tools@10/dist/web/install-button.js?module"></script>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+    :root {
+      --bg:           #0f172a;
+      --surface:      #1e293b;
+      --surface2:     #0f172a;
+      --border:       #334155;
+      --text:         #e2e8f0;
+      --muted:        #94a3b8;
+      --dim:          #64748b;
+      --accent:       #3b82f6;
+      --accent-hover: #2563eb;
+    }
+
     body {
       font-family: system-ui, sans-serif;
-      background: #0f172a;
-      color: #e2e8f0;
+      background: var(--bg);
+      color: var(--text);
       min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 2rem 1rem;
+      line-height: 1.6;
+    }
+
+    .container {
+      max-width: 860px;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+    }
+
+    /* ── Hero ── */
+    .hero {
+      text-align: center;
+      padding: 4rem 1.5rem 2.5rem;
+    }
+    .hero h1 {
+      font-size: 2.75rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.5rem;
+    }
+    .hero .tagline {
+      font-size: 1.2rem;
+      color: var(--muted);
+      margin-bottom: 0.75rem;
+    }
+    .hero .description {
+      font-size: 1rem;
+      color: var(--muted);
+      max-width: 560px;
+      margin: 0 auto 1.75rem;
+    }
+    .hero .cta {
+      display: inline-block;
+      background: var(--accent);
+      color: #fff;
+      text-decoration: none;
+      padding: 0.75rem 2rem;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 1rem;
+      transition: background 0.2s;
+    }
+    .hero .cta:hover { background: var(--accent-hover); }
+
+    .screenshot {
+      margin: 2.5rem auto 0;
+      max-width: 760px;
+      border-radius: 12px;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      box-shadow: 0 8px 32px rgba(0,0,0,0.45);
+    }
+    .screenshot img { width: 100%; display: block; }
+
+    /* ── Divider ── */
+    .divider { border: none; border-top: 1px solid var(--border); }
+
+    /* ── Section shell ── */
+    section { padding: 3rem 1.5rem; }
+    section h2 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      margin-bottom: 1.5rem;
+      text-align: center;
+    }
+
+    /* ── Features grid ── */
+    .features-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      gap: 1rem;
+    }
+    .feature-card {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 1.1rem 1.25rem;
+    }
+    .feature-card .feature-title {
+      font-weight: 600;
+      font-size: 0.95rem;
+      margin-bottom: 0.3rem;
+    }
+    .feature-card .feature-desc {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+
+    /* ── Flash section ── */
+    .flash-intro {
+      text-align: center;
+      color: var(--muted);
+      font-size: 0.95rem;
+      margin-top: -0.75rem;
+      margin-bottom: 2rem;
     }
 
     .card {
-      background: #1e293b;
+      background: var(--surface);
+      border: 1px solid var(--border);
       border-radius: 12px;
       padding: 2rem;
       max-width: 520px;
       width: 100%;
-      margin-top: 2rem;
+      margin: 0 auto;
     }
 
-    h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; }
-    .subtitle { color: #94a3b8; font-size: 0.95rem; margin-bottom: 1.5rem; }
-
     .section-label {
       font-size: 0.85rem;
-      color: #94a3b8;
+      color: var(--muted);
       margin-bottom: 0.4rem;
     }
 
-    /* Version list */
     .version-list {
-      border: 1px solid #334155;
+      border: 1px solid var(--border);
       border-radius: 8px;
       overflow: hidden;
       margin-bottom: 1.5rem;
     }
-
     .version-item {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       padding: 0.65rem 0.9rem;
       cursor: pointer;
-      border-bottom: 1px solid #1e293b;
-      background: #0f172a;
+      border-bottom: 1px solid var(--surface);
+      background: var(--surface2);
       transition: background 0.15s;
       user-select: none;
     }
@@ -61,23 +160,21 @@
     .version-item.selected { background: #1e3a5f; }
 
     .version-dot {
-      width: 10px;
-      height: 10px;
+      width: 10px; height: 10px;
       border-radius: 50%;
       border: 2px solid #475569;
       flex-shrink: 0;
       transition: border-color 0.15s, background 0.15s;
     }
     .version-item.selected .version-dot {
-      background: #3b82f6;
-      border-color: #3b82f6;
+      background: var(--accent);
+      border-color: var(--accent);
     }
 
     .version-info { flex: 1; min-width: 0; }
     .version-name {
       font-size: 0.95rem;
       font-weight: 600;
-      color: #e2e8f0;
       display: flex;
       align-items: center;
       gap: 0.5rem;
@@ -93,63 +190,49 @@
     }
     .version-date {
       font-size: 0.78rem;
-      color: #64748b;
+      color: var(--dim);
       margin-top: 0.15rem;
     }
-
     .version-loading {
       padding: 1rem;
       text-align: center;
-      color: #64748b;
+      color: var(--dim);
       font-size: 0.9rem;
-      background: #0f172a;
+      background: var(--surface2);
       border-radius: 8px;
-      border: 1px solid #334155;
+      border: 1px solid var(--border);
       margin-bottom: 1.5rem;
     }
 
-    /* Board list */
     .board-list {
-      border: 1px solid #334155;
+      border: 1px solid var(--border);
       border-radius: 8px;
       overflow: hidden;
       margin-bottom: 0.75rem;
     }
-
     .board-item {
       padding: 0.6rem 0.9rem;
-      border-bottom: 1px solid #1e293b;
-      background: #0f172a;
+      border-bottom: 1px solid var(--surface);
+      background: var(--surface2);
     }
     .board-item:last-child { border-bottom: none; }
-
-    .board-name {
-      font-size: 0.9rem;
-      font-weight: 600;
-      color: #e2e8f0;
-    }
-    .board-detail {
-      font-size: 0.78rem;
-      color: #64748b;
-      margin-top: 0.1rem;
-    }
+    .board-name { font-size: 0.9rem; font-weight: 600; }
+    .board-detail { font-size: 0.78rem; color: var(--dim); margin-top: 0.1rem; }
 
     .board-missing {
       font-size: 0.82rem;
-      color: #64748b;
+      color: var(--dim);
       margin-bottom: 1.5rem;
     }
     .board-missing a { color: #7dd3fc; }
 
-    /* Install button */
     .install-row {
       display: flex;
       justify-content: center;
       margin-bottom: 1.25rem;
     }
-
     esp-web-install-button::part(button) {
-      background: #3b82f6;
+      background: var(--accent);
       color: #fff;
       border: none;
       border-radius: 8px;
@@ -159,7 +242,7 @@
       cursor: pointer;
       transition: background 0.2s;
     }
-    esp-web-install-button::part(button):hover { background: #2563eb; }
+    esp-web-install-button::part(button):hover { background: var(--accent-hover); }
 
     .unsupported-msg {
       background: #7c3aed22;
@@ -172,78 +255,244 @@
       display: none;
     }
 
-    hr { border: none; border-top: 1px solid #334155; margin: 1.25rem 0; }
+    .browser-note {
+      font-size: 0.82rem;
+      color: var(--dim);
+      text-align: center;
+    }
 
-    .instructions { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; }
-    .instructions ol { padding-left: 1.25rem; }
-    .instructions li { margin-bottom: 0.3rem; }
+    /* ── Usage steps ── */
+    .usage-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      counter-reset: step;
+    }
+    .usage-step {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 1.1rem 1.25rem;
+      counter-increment: step;
+    }
+    .usage-step::before {
+      content: counter(step);
+      display: inline-block;
+      width: 24px; height: 24px;
+      line-height: 24px;
+      text-align: center;
+      background: var(--accent);
+      color: #fff;
+      border-radius: 50%;
+      font-size: 0.75rem;
+      font-weight: 700;
+      margin-bottom: 0.6rem;
+    }
+    .usage-step .step-title {
+      font-weight: 600;
+      font-size: 0.95rem;
+      margin-bottom: 0.3rem;
+    }
+    .usage-step .step-desc {
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+    .usage-step code {
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 4px;
+      padding: 0.1em 0.4em;
+      font-size: 0.85em;
+      font-family: ui-monospace, monospace;
+    }
 
+    /* ── LED table ── */
+    .led-heading {
+      text-align: center;
+      margin-top: 2.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.1rem;
+      color: var(--muted);
+      font-weight: 600;
+    }
+    .led-table {
+      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+    .led-table th {
+      text-align: left;
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--border);
+      color: var(--muted);
+      font-weight: 600;
+    }
+    .led-table td {
+      padding: 0.5rem 0.75rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .led-table tbody tr:last-child td { border-bottom: none; }
+
+    /* ── Footer ── */
     footer {
-      margin-top: 2rem;
-      font-size: 0.8rem;
-      color: #475569;
+      text-align: center;
+      padding: 2rem 1.5rem;
+      border-top: 1px solid var(--border);
+      font-size: 0.82rem;
+      color: var(--dim);
     }
     footer a { color: #64748b; }
+
+    @media (max-width: 600px) {
+      .hero h1 { font-size: 2rem; }
+      .features-grid,
+      .usage-grid { grid-template-columns: 1fr; }
+    }
   </style>
 </head>
 <body>
 
-<div class="card">
-  <h1>ESP-Scope Installer</h1>
-  <p class="subtitle">Flash the firmware directly from your browser — no tools needed.</p>
-
-  <div class="section-label">Select firmware version</div>
-  <div id="version-loading" class="version-loading">Loading releases…</div>
-  <div id="version-list" class="version-list" style="display:none"></div>
-
-  <div class="section-label">Supported boards in this release</div>
-  <div id="board-list" class="board-list" style="display:none"></div>
-  <p class="board-missing">
-    Your board not listed? <a href="https://github.com/vtalpaert/esp-scope/issues/new" target="_blank">Open an issue</a>
-  </p>
-
-  <div class="install-row">
-    <esp-web-install-button id="install-btn"></esp-web-install-button>
+<!-- ── Hero ── -->
+<header class="hero">
+  <div class="container">
+    <h1>ESP-Scope</h1>
+    <p class="tagline">A web-based oscilloscope for the ESP32</p>
+    <p class="description">Visualize analog signals in real-time through any web browser. No drivers, no software to install — just flash and go.</p>
+    <a href="#flash" class="cta">Flash firmware</a>
+    <div class="screenshot">
+      <img src="screenshot.png" alt="ESP-Scope web interface" />
+    </div>
   </div>
+</header>
 
-  <div class="unsupported-msg" id="unsupported-msg">
-    Your browser does not support WebSerial. Please use Chrome, Edge, or Opera on desktop.
+<hr class="divider" />
+
+<!-- ── Features ── -->
+<section>
+  <div class="container">
+    <h2>Features</h2>
+    <div class="features-grid">
+      <div class="feature-card">
+        <div class="feature-title">Real-time visualization</div>
+        <div class="feature-desc">Signal waveforms rendered live in your browser over WiFi.</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-title">Adjustable sample rate</div>
+        <div class="feature-desc">1 Hz to 83 333 Hz with configurable ADC attenuation.</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-title">Crosshair &amp; trigger</div>
+        <div class="feature-desc">Precise measurements with a crosshair cursor and adjustable trigger level.</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-title">Built-in test signal</div>
+        <div class="feature-desc">PWM output on D1 at a configurable frequency — no external source needed to get started.</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-title">WiFi setup from browser</div>
+        <div class="feature-desc">Starts as a WiFi access point. Join your home network via the web UI — no serial console required.</div>
+      </div>
+      <div class="feature-card">
+        <div class="feature-title">Browser controls</div>
+        <div class="feature-desc">Reset settings, reconfigure WiFi, or power off the device — all from the interface.</div>
+      </div>
+    </div>
   </div>
+</section>
 
-  <hr />
+<hr class="divider" />
 
-  <div class="instructions">
-    <ol>
-      <li>Connect your ESP32 via USB.</li>
-      <li>Select a firmware version above.</li>
-      <li>Click <strong>Install</strong> — the correct firmware is picked automatically for your chip.</li>
-      <li>Wait for flashing to complete, then reset the board.</li>
-    </ol>
-    <p style="margin-top:0.75rem">Requires <strong>Chrome</strong>, <strong>Edge</strong>, or <strong>Opera</strong> on desktop.</p>
+<!-- ── Flash ── -->
+<section id="flash">
+  <div class="container">
+    <h2>Flash the firmware</h2>
+    <p class="flash-intro">Connect your ESP32 via USB and install directly — no drivers or toolchain needed.<br>Requires Chrome, Edge, or Opera on desktop.</p>
+
+    <div class="card">
+      <div class="section-label">Select firmware version</div>
+      <div id="version-loading" class="version-loading">Loading releases…</div>
+      <div id="version-list" class="version-list" style="display:none"></div>
+
+      <div class="section-label">Supported boards in this release</div>
+      <div id="board-list" class="board-list" style="display:none"></div>
+      <p class="board-missing">
+        Your board not listed? <a href="https://github.com/vtalpaert/esp-scope/issues/new" target="_blank">Open an issue</a>
+      </p>
+
+      <div class="install-row">
+        <esp-web-install-button id="install-btn"></esp-web-install-button>
+      </div>
+
+      <div class="unsupported-msg" id="unsupported-msg">
+        Your browser does not support WebSerial. Please use Chrome, Edge, or Opera on desktop.
+      </div>
+
+      <p class="browser-note">The correct binary is picked automatically for your chip.</p>
+    </div>
   </div>
-</div>
+</section>
+
+<hr class="divider" />
+
+<!-- ── After flashing ── -->
+<section>
+  <div class="container">
+    <h2>After flashing</h2>
+    <div class="usage-grid">
+      <div class="usage-step">
+        <div class="step-title">Connect to the AP</div>
+        <div class="step-desc">ESP-Scope starts as a WiFi access point. Connect your device to the <strong>ESP-Scope</strong> network.</div>
+      </div>
+      <div class="usage-step">
+        <div class="step-title">Open the interface</div>
+        <div class="step-desc">Navigate to <code>http://esp-scope</code> in your browser. You may need a <code>.local</code> suffix depending on your OS.</div>
+      </div>
+      <div class="usage-step">
+        <div class="step-title">Optionally join your WiFi</div>
+        <div class="step-desc">Tap <strong>WiFi</strong> in the UI to enter your SSID and password. The device reboots and joins your network.</div>
+      </div>
+      <div class="usage-step">
+        <div class="step-title">Connect a signal</div>
+        <div class="step-desc">Probe from <strong>ADC0</strong>. Use the built-in test signal on <strong>D1</strong> to verify the setup first.</div>
+      </div>
+    </div>
+
+    <h3 class="led-heading">LED status</h3>
+    <table class="led-table">
+      <thead>
+        <tr><th>LED behaviour</th><th>State</th></tr>
+      </thead>
+      <tbody>
+        <tr><td>Continuously lit</td><td>Connecting to WiFi / starting wireless AP</td></tr>
+        <tr><td>1 s equal flash</td><td>AP mode — connect to the "ESP-Scope" network</td></tr>
+        <tr><td>Slow, brief flashes</td><td>Connected to the WiFi SSID set in the UI</td></tr>
+        <tr><td>Rapid, brief flashes</td><td>Sending data to an active client</td></tr>
+      </tbody>
+    </table>
+  </div>
+</section>
 
 <footer>
   <a href="https://github.com/vtalpaert/esp-scope" target="_blank">vtalpaert/esp-scope</a>
+  &nbsp;·&nbsp; Forked from <a href="https://github.com/MatAtBread/esp-scope" target="_blank">MatAtBread/esp-scope</a>
   &nbsp;·&nbsp; Powered by <a href="https://esphome.github.io/esp-web-tools/" target="_blank">esp-web-tools</a>
 </footer>
 
 <script>
-  // Static details for known board slugs (slug = filename part after "esp-scope-" and before "-merged.bin")
-  // chipFamily is required by esp-web-tools; label and detail are for display only.
   var BOARD_DETAILS = {
-    'esp32':        { chipFamily: 'ESP32',    label: 'Generic ESP32',      detail: 'LED GPIO 2 · AP-mode button GPIO 9' },
-    'xiao-esp32c6': { chipFamily: 'ESP32-C6', label: 'Seeed XIAO ESP32C6', detail: 'LED GPIO 8 (built-in yellow) · AP-mode button GPIO 0 (Boot)' },
+    'esp32':         { chipFamily: 'ESP32',    label: 'Generic ESP32',      detail: 'LED GPIO 2 · AP-mode button GPIO 9' },
+    'xiao-esp32c6':  { chipFamily: 'ESP32-C6', label: 'Seeed XIAO ESP32C6', detail: 'LED GPIO 8 (built-in yellow) · AP-mode button GPIO 0 (Boot)' },
   };
 
-  // Fallback: derive chipFamily from slug when not in BOARD_DETAILS
   function chipFamilyFromSlug(slug) {
-    if (slug.indexOf('esp32c6') !== -1)  return 'ESP32-C6';
-    if (slug.indexOf('esp32s3') !== -1)  return 'ESP32-S3';
-    if (slug.indexOf('esp32s2') !== -1)  return 'ESP32-S2';
-    if (slug.indexOf('esp32c3') !== -1)  return 'ESP32-C3';
-    if (slug.indexOf('esp32h2') !== -1)  return 'ESP32-H2';
-    if (slug.indexOf('esp32')   !== -1)  return 'ESP32';
+    if (slug.indexOf('esp32c6') !== -1) return 'ESP32-C6';
+    if (slug.indexOf('esp32s3') !== -1) return 'ESP32-S3';
+    if (slug.indexOf('esp32s2') !== -1) return 'ESP32-S2';
+    if (slug.indexOf('esp32c3') !== -1) return 'ESP32-C3';
+    if (slug.indexOf('esp32h2') !== -1) return 'ESP32-H2';
+    if (slug.indexOf('esp32')   !== -1) return 'ESP32';
     return null;
   }
 
@@ -255,7 +504,6 @@
     return null;
   }
 
-  // Parse .bin assets from a release into [{slug, chipFamily, url}]
   function boardsFromRelease(release, baseUrl) {
     var boards = [];
     (release.assets || []).forEach(function(asset) {
@@ -270,22 +518,17 @@
     return boards;
   }
 
-  var installBtn   = document.getElementById('install-btn');
-  var versionList  = document.getElementById('version-list');
-  var boardList    = document.getElementById('board-list');
-  var loadingEl    = document.getElementById('version-loading');
-  var unsupported  = document.getElementById('unsupported-msg');
+  var installBtn  = document.getElementById('install-btn');
+  var versionList = document.getElementById('version-list');
+  var boardList   = document.getElementById('board-list');
+  var loadingEl   = document.getElementById('version-loading');
+  var unsupported = document.getElementById('unsupported-msg');
 
   var currentManifestUrl = null;
-  var allReleases = [];
 
-  // ------------------------------------------------------------------
-  // Manifest + board display
-  // ------------------------------------------------------------------
   function selectRelease(release) {
     var boards = boardsFromRelease(release, window.location.href);
 
-    // Update board list display
     boardList.innerHTML = '';
     boards.forEach(function(b) {
       var known = BOARD_DETAILS[b.slug];
@@ -305,7 +548,6 @@
     });
     boardList.style.display = boards.length ? 'block' : 'none';
 
-    // Build manifest
     var builds = boards.map(function(b) {
       return { chipFamily: b.chipFamily, parts: [{ path: b.url, offset: 0 }] };
     });
@@ -317,9 +559,6 @@
     installBtn.setAttribute('manifest', currentManifestUrl);
   }
 
-  // ------------------------------------------------------------------
-  // Version comparison (semver-like, descending)
-  // ------------------------------------------------------------------
   function versionParts(tag) {
     return tag.replace(/^v/, '').split('.').map(function(n) { return parseInt(n, 10) || 0; });
   }
@@ -334,9 +573,6 @@
     return 0;
   }
 
-  // ------------------------------------------------------------------
-  // Render version list
-  // ------------------------------------------------------------------
   function formatDate(iso) {
     if (!iso) return '';
     return new Date(iso).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
@@ -355,9 +591,7 @@
       return;
     }
 
-    allReleases = ordered;
     versionList.innerHTML = '';
-
     ordered.forEach(function(release, idx) {
       var item = document.createElement('div');
       item.className = 'version-item' + (idx === 0 ? ' selected' : '');
@@ -403,9 +637,6 @@
     selectRelease(ordered[0]);
   }
 
-  // ------------------------------------------------------------------
-  // Fetch all releases
-  // ------------------------------------------------------------------
   fetch('https://api.github.com/repos/vtalpaert/esp-scope/releases')
     .then(function(r) { return r.json(); })
     .then(function(data) {
@@ -419,9 +650,6 @@
       loadingEl.textContent = 'Could not load releases. Check your connection.';
     });
 
-  // ------------------------------------------------------------------
-  // WebSerial check
-  // ------------------------------------------------------------------
   if (!('serial' in navigator)) {
     unsupported.style.display = 'block';
   }

LED behaviour	State
Continuously lit	Connecting to WiFi / starting wireless AP
1 s equal flash	AP mode — connect to the "ESP-Scope" network
Slow, brief flashes	Connected to the WiFi SSID set in the UI
Rapid, brief flashes	Sending data to an active client