diff --git a/docs/website/assets/01-fleet-dashboard.png b/docs/website/assets/01-fleet-dashboard.png
new file mode 100644
index 0000000..be55e7c
Binary files /dev/null and b/docs/website/assets/01-fleet-dashboard.png differ
diff --git a/docs/website/assets/02-fleet-traffic.png b/docs/website/assets/02-fleet-traffic.png
new file mode 100644
index 0000000..24a4c0e
Binary files /dev/null and b/docs/website/assets/02-fleet-traffic.png differ
diff --git a/docs/website/assets/03-firmware-management.png b/docs/website/assets/03-firmware-management.png
new file mode 100644
index 0000000..d66eebd
Binary files /dev/null and b/docs/website/assets/03-firmware-management.png differ
diff --git a/docs/website/assets/04-config-templates.png b/docs/website/assets/04-config-templates.png
new file mode 100644
index 0000000..fc5f55f
Binary files /dev/null and b/docs/website/assets/04-config-templates.png differ
diff --git a/docs/website/assets/05-device-detail.png b/docs/website/assets/05-device-detail.png
new file mode 100644
index 0000000..c133322
Binary files /dev/null and b/docs/website/assets/05-device-detail.png differ
diff --git a/docs/website/assets/06-interface-utilization.png b/docs/website/assets/06-interface-utilization.png
new file mode 100644
index 0000000..901826d
Binary files /dev/null and b/docs/website/assets/06-interface-utilization.png differ
diff --git a/docs/website/assets/07-device-health.png b/docs/website/assets/07-device-health.png
new file mode 100644
index 0000000..15c0e8c
Binary files /dev/null and b/docs/website/assets/07-device-health.png differ
diff --git a/docs/website/assets/08-traffic-analytics.png b/docs/website/assets/08-traffic-analytics.png
new file mode 100644
index 0000000..ebffc03
Binary files /dev/null and b/docs/website/assets/08-traffic-analytics.png differ
diff --git a/docs/website/assets/alert-rules.png b/docs/website/assets/alert-rules.png
deleted file mode 100644
index 9ff18af..0000000
Binary files a/docs/website/assets/alert-rules.png and /dev/null differ
diff --git a/docs/website/assets/alerts.png b/docs/website/assets/alerts.png
deleted file mode 100644
index 2dd77d5..0000000
Binary files a/docs/website/assets/alerts.png and /dev/null differ
diff --git a/docs/website/assets/config-editor.png b/docs/website/assets/config-editor.png
deleted file mode 100644
index eee0cc2..0000000
Binary files a/docs/website/assets/config-editor.png and /dev/null differ
diff --git a/docs/website/assets/dashboard-irken-empire.png b/docs/website/assets/dashboard-irken-empire.png
deleted file mode 100644
index 29d6899..0000000
Binary files a/docs/website/assets/dashboard-irken-empire.png and /dev/null differ
diff --git a/docs/website/assets/dashboard-lebowski-lanes.png b/docs/website/assets/dashboard-lebowski-lanes.png
deleted file mode 100644
index f6f6b51..0000000
Binary files a/docs/website/assets/dashboard-lebowski-lanes.png and /dev/null differ
diff --git a/docs/website/assets/device-detail.png b/docs/website/assets/device-detail.png
deleted file mode 100644
index 4b37636..0000000
Binary files a/docs/website/assets/device-detail.png and /dev/null differ
diff --git a/docs/website/assets/device-health.png b/docs/website/assets/device-health.png
deleted file mode 100644
index 0cb1095..0000000
Binary files a/docs/website/assets/device-health.png and /dev/null differ
diff --git a/docs/website/assets/device-list.png b/docs/website/assets/device-list.png
deleted file mode 100644
index 50ace92..0000000
Binary files a/docs/website/assets/device-list.png and /dev/null differ
diff --git a/docs/website/assets/login.png b/docs/website/assets/login.png
deleted file mode 100644
index 118870a..0000000
Binary files a/docs/website/assets/login.png and /dev/null differ
diff --git a/docs/website/assets/topology.png b/docs/website/assets/topology.png
deleted file mode 100644
index d31d6bb..0000000
Binary files a/docs/website/assets/topology.png and /dev/null differ
diff --git a/docs/website/index.html b/docs/website/index.html
index 53ae1bc..7e17f82 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -293,50 +293,69 @@
     <div class="screenshots-scroll">
       <div class="screenshots-track">
 
-        <figure class="screenshot-card">
-          <img src="assets/login.png" alt="The Other Dude zero-knowledge SRP-6a login with Secret Key fields from Emergency Kit" loading="lazy" width="800" height="500">
-          <figcaption>Zero-Knowledge Login with Secret Key</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/01-fleet-dashboard.png" alt="Fleet Dashboard showing 49 devices, 100% online with bandwidth charts and event feed" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Fleet Dashboard</div>
+            <div style="color:#62627F;font-size:13px">Real-time fleet overview with events, bandwidth, and health</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/dashboard-lebowski-lanes.png" alt="Fleet dashboard showing 10 devices across Lebowski Lanes with bandwidth charts and event feed" loading="lazy" width="800" height="500">
-          <figcaption>Fleet Dashboard &mdash; Lebowski Lanes</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/02-fleet-traffic.png" alt="Fleet traffic view showing CPU and memory stats with top resource consumers table" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Fleet Traffic</div>
+            <div style="color:#62627F;font-size:13px">Top resource consumers with CPU and memory stats</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/device-list.png" alt="Device fleet list showing MikroTik models, status, uptime, and firmware versions" loading="lazy" width="800" height="500">
-          <figcaption>Device Fleet List</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/03-firmware-management.png" alt="Firmware management showing version groups and device list" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Firmware Management</div>
+            <div style="color:#62627F;font-size:13px">Version groups, upgrade tracking, and device firmware list</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/device-detail.png" alt="Device detail showing interface traffic charts and WinBox and SSH session buttons" loading="lazy" width="800" height="500">
-          <figcaption>Device Detail &mdash; gw-bowling-alley</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/04-config-templates.png" alt="Configuration templates showing 6 reusable config templates" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Config Templates</div>
+            <div style="color:#62627F;font-size:13px">Reusable configuration templates for fleet-wide deployment</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/device-health.png" alt="Device health metrics showing CPU load, memory usage, disk usage, and temperature charts" loading="lazy" width="800" height="500">
-          <figcaption>Device Health Metrics</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/05-device-detail.png" alt="Device detail view for gw-bowling-alley showing interface traffic and session buttons" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Device Detail</div>
+            <div style="color:#62627F;font-size:13px">Per-device overview with interfaces, sessions, and actions</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/alerts.png" alt="Active alerts showing CPU warnings and device offline criticals with acknowledge and silence controls" loading="lazy" width="800" height="500">
-          <figcaption>Active Alerts</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/06-interface-utilization.png" alt="Interface utilization showing RX and TX bars per interface" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Interface Utilization</div>
+            <div style="color:#62627F;font-size:13px">Per-interface RX/TX bandwidth utilization bars</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/topology.png" alt="Network topology map with automatic device discovery" loading="lazy" width="800" height="500">
-          <figcaption>Network Topology Map</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/07-device-health.png" alt="Device health showing CPU, memory, disk, and temperature charts" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Device Health</div>
+            <div style="color:#62627F;font-size:13px">CPU, memory, disk, and temperature monitoring charts</div>
+          </div>
+        </div>
 
-        <figure class="screenshot-card">
-          <img src="assets/config-editor.png" alt="RouterOS configuration editor with diff preview" loading="lazy" width="800" height="500">
-          <figcaption>Configuration Editor</figcaption>
-        </figure>
-
-        <figure class="screenshot-card">
-          <img src="assets/dashboard-irken-empire.png" alt="Multi-tenant dashboard showing Irken Empire with tenant switcher and device events" loading="lazy" width="800" height="500">
-          <figcaption>Multi-Tenant &mdash; Irken Empire</figcaption>
-        </figure>
+        <div class="screenshot-card" style="background:#1A1A2E;border:1px solid #24243D;border-radius:8px;overflow:hidden">
+          <img src="assets/08-traffic-analytics.png" alt="Traffic analytics showing per-interface time series charts" loading="lazy" width="1440" height="900">
+          <div style="padding:12px 16px">
+            <div style="color:#E4E4ED;font-weight:600">Traffic Analytics</div>
+            <div style="color:#62627F;font-size:13px">Per-interface traffic time series and historical analysis</div>
+          </div>
+        </div>
 
       </div>
     </div>
@@ -441,7 +460,8 @@
     function openLightbox(img) {
       lbImg.src = img.src;
       lbImg.alt = img.alt;
-      var cap = img.closest('.screenshot-card').querySelector('figcaption');
+      var card = img.closest('.screenshot-card');
+      var cap = card.querySelector('figcaption') || card.querySelector('div > div:first-child');
       lbCap.textContent = cap ? cap.textContent : '';
       lb.classList.add('active');
       lbClose.focus();