diff --git a/public/styles/global.css b/public/styles/global.css
index 697c308..76557bd 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -462,6 +462,11 @@ section {
   overflow: hidden;
 }
 
+.showcase-image-box {
+  cursor: pointer;
+  position: relative;
+}
+
 .showcase-image-box img {
   width: 100%;
   height: auto;
@@ -471,6 +476,106 @@ section {
   object-position: top;
 }
 
+.showcase-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.showcase-overlay span {
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: var(--color-text);
+  padding: 0.75rem 1.5rem;
+  border: 2px solid var(--color-accent-blue);
+  background: rgba(0, 212, 255, 0.1);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+}
+
+.showcase-image-box:hover .showcase-overlay {
+  opacity: 1;
+}
+
+/* Modal Styles */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.95);
+  backdrop-filter: blur(10px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  padding: var(--space-lg);
+}
+
+.modal.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-content {
+  position: relative;
+  max-width: 1400px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-content img {
+  max-width: 100%;
+  max-height: 85vh;
+  object-fit: contain;
+  border: 2px solid var(--color-border);
+  box-shadow: 0 0 60px rgba(0, 212, 255, 0.2);
+}
+
+.modal-close {
+  position: absolute;
+  top: -50px;
+  right: 0;
+  font-size: 2.5rem;
+  color: var(--color-text);
+  cursor: pointer;
+  line-height: 1;
+  transition: color 0.3s ease;
+}
+
+.modal-close:hover {
+  color: var(--color-accent-blue);
+}
+
+@media (max-width: 768px) {
+  .modal {
+    padding: var(--space-md);
+  }
+  
+  .modal-close {
+    top: -40px;
+    font-size: 2rem;
+  }
+  
+  .modal-content img {
+    max-height: 80vh;
+  }
+}
+
 .showcase-image-box::after {
   content: '';
   position: absolute;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 59df49a..5322761 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -55,14 +55,46 @@ const version = pkg.version ?? "";
               <p>Native desktop app powered by Tauri v2. Clean, fast, and built for real development workflows. AI chat integrated seamlessly alongside your code.</p>
               <div class="feature-tag">LIVE PREVIEW</div>
             </div>
-            <div class="showcase-image-box">
+            <div class="showcase-image-box" onclick="openModal()">
               <img width="800" src="/screenshot-1.png" alt="Zaguán Blade editor interface" />
+              <div class="showcase-overlay">
+                <span>Click to expand</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </section>
 
+    <!-- Screenshot Modal -->
+    <div id="screenshot-modal" class="modal" onclick="closeModal(event)">
+      <div class="modal-content" onclick="event.stopPropagation()">
+        <span class="modal-close" onclick="closeModal()">&times;</span>
+        <img width="1200" src="/screenshot-1.png" alt="Zaguán Blade editor interface full size" />
+      </div>
+    </div>
+
+    <script is:inline>
+      function openModal() {
+        const modal = document.getElementById('screenshot-modal');
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden';
+      }
+      
+      function closeModal(event) {
+        if (event && event.target !== event.currentTarget) return;
+        const modal = document.getElementById('screenshot-modal');
+        modal.classList.remove('active');
+        document.body.style.overflow = '';
+      }
+      
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          closeModal();
+        }
+      });
+    </script>
+
     <!-- Features Section -->
     <section id="features" class="features">
       <div class="features-header">