diff --git a/website/public/images/screenshot-orchestration-light.png b/website/public/images/screenshot-orchestration-light.png
index 58337ad..2628112 100644
Binary files a/website/public/images/screenshot-orchestration-light.png and b/website/public/images/screenshot-orchestration-light.png differ
diff --git a/website/public/images/screenshot-orchestration.png b/website/public/images/screenshot-orchestration.png
index bb762f4..664a03c 100644
Binary files a/website/public/images/screenshot-orchestration.png and b/website/public/images/screenshot-orchestration.png differ
diff --git a/website/src/layouts/Base.astro b/website/src/layouts/Base.astro
index 8606401..9570f5f 100644
--- a/website/src/layouts/Base.astro
+++ b/website/src/layouts/Base.astro
@@ -205,6 +205,19 @@ const {
       </div>
     </footer>
 
+    <!-- Lightbox overlay -->
+    <div
+      id="lightbox"
+      class="lightbox-overlay"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Enlarged screenshot"
+      hidden
+    >
+      <button class="lightbox-close" aria-label="Close enlarged view">&times;</button>
+      <img id="lightbox-img" class="lightbox-img" src="" alt="" />
+    </div>
+
     <!-- Scroll reveal observer -->
     <script>
       const observer = new IntersectionObserver(
@@ -270,5 +283,56 @@ const {
         }
       });
     </script>
+
+    <!-- Lightbox behavior -->
+    <script>
+      (function () {
+        var overlay = document.getElementById('lightbox');
+        var img = document.getElementById('lightbox-img');
+        var closeBtn = overlay.querySelector('.lightbox-close');
+
+        function open(src, alt) {
+          img.setAttribute('src', src);
+          img.setAttribute('alt', alt);
+          overlay.removeAttribute('hidden');
+          requestAnimationFrame(function () {
+            overlay.classList.add('is-active');
+          });
+          document.body.style.overflow = 'hidden';
+        }
+
+        function close() {
+          overlay.classList.remove('is-active');
+          document.body.style.overflow = '';
+          overlay.addEventListener('transitionend', function handler() {
+            overlay.setAttribute('hidden', '');
+            overlay.removeEventListener('transitionend', handler);
+          });
+        }
+
+        document.querySelectorAll('.lightbox-trigger').forEach(function (el) {
+          el.addEventListener('click', function () {
+            open(el.getAttribute('src'), el.getAttribute('alt'));
+          });
+          el.addEventListener('keydown', function (e) {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              open(el.getAttribute('src'), el.getAttribute('alt'));
+            }
+          });
+          el.setAttribute('role', 'button');
+          el.setAttribute('tabindex', '0');
+        });
+
+        overlay.addEventListener('click', function (e) {
+          if (e.target === overlay || e.target === closeBtn) close();
+        });
+        closeBtn.addEventListener('click', close);
+
+        document.addEventListener('keydown', function (e) {
+          if (e.key === 'Escape' && !overlay.hasAttribute('hidden')) close();
+        });
+      })();
+    </script>
   </body>
 </html>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 2a48eab..eb25ff8 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -112,7 +112,7 @@ import Base from '../layouts/Base.astro';
               data-src-dark="/images/screenshot.png"
               data-src-light="/images/screenshot-light.png"
               alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
-              class="w-full"
+              class="lightbox-trigger w-full cursor-zoom-in"
               width="1280"
               height="800"
             />
@@ -740,7 +740,7 @@ import Base from '../layouts/Base.astro';
               data-src-dark="/images/screenshot-orchestration.png"
               data-src-light="/images/screenshot-orchestration-light.png"
               alt="Aryx workspace showing multi-agent orchestration in action"
-              class="w-full"
+              class="lightbox-trigger w-full cursor-zoom-in"
               width="1280"
               height="800"
             />
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 33718f6..de8b1c4 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -192,3 +192,55 @@ body::after {
 .theme-toggle .icon-moon { display: block; }
 [data-theme='light'] .theme-toggle .icon-sun { display: block; }
 [data-theme='light'] .theme-toggle .icon-moon { display: none; }
+
+/* ── Lightbox overlay ── */
+.lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: zoom-out;
+  padding: 2rem;
+}
+.lightbox-overlay.is-active {
+  opacity: 1;
+}
+.lightbox-img {
+  max-width: 95vw;
+  max-height: 92vh;
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
+  transform: scale(0.92);
+  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+.lightbox-overlay.is-active .lightbox-img {
+  transform: scale(1);
+}
+.lightbox-close {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  font-size: 2rem;
+  line-height: 1;
+  color: var(--color-warm-300);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+.lightbox-close:hover {
+  color: var(--color-warm-50);
+  background: rgba(255, 255, 255, 0.08);
+}
+[data-theme='light'] .lightbox-overlay {
+  background: rgba(0, 0, 0, 0.7);
+}