diff --git a/public/styles/global.css b/public/styles/global.css
index 68d0984..697c308 100644
--- a/public/styles/global.css
+++ b/public/styles/global.css
@@ -424,225 +424,98 @@ section {
 
 /* ===== Screenshot Showcase ===== */
 .screenshot-showcase {
-  background: var(--color-bg-secondary);
+  background: var(--color-bg);
   padding: var(--space-3xl) 0;
-  position: relative;
   border-top: 1px solid var(--color-border);
-  border-bottom: 1px solid var(--color-border);
 }
 
-.screenshot-showcase::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--color-accent-blue), transparent);
-}
-
-.showcase-content {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: var(--space-3xl);
-  align-items: center;
-  margin-top: var(--space-xl);
-}
-
-.showcase-text {
-  position: relative;
-}
-
-.showcase-title {
-  font-size: clamp(2.5rem, 5vw, 4rem);
-  font-weight: 900;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: -0.02em;
-  margin-bottom: var(--space-lg);
-}
-
-.showcase-description {
-  font-size: 1.125rem;
-  color: var(--color-text-secondary);
-  line-height: 1.7;
-  margin-bottom: var(--space-xl);
-}
-
-.showcase-features {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.showcase-features span {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  padding: 0.5rem 1rem;
-  background: var(--color-bg);
-  border-left: 3px solid var(--color-accent-blue);
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  width: fit-content;
-  transition: all 0.3s ease;
-}
-
-.showcase-features span:hover {
-  border-left-color: var(--color-accent);
-  color: var(--color-text);
-  transform: translateX(8px);
-}
-
-.showcase-visual {
-  position: relative;
-}
-
-.showcase-frame {
-  background: var(--color-bg);
-  border: 2px solid var(--color-border);
-  overflow: hidden;
-  transition: all 0.3s ease;
-  max-width: 600px;
-  margin-left: auto;
-}
-
-.showcase-frame:hover {
+.showcase-card {
   border-color: var(--color-accent-blue);
-  box-shadow: 0 0 30px rgba(0, 212, 255, 0.15);
-  transform: translateY(-4px);
 }
 
-.frame-header {
-  background: var(--color-bg-elevated);
-  border-bottom: 1px solid var(--color-border);
-  padding: var(--space-sm) var(--space-md);
-  display: flex;
+.showcase-card::before {
+  background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
+}
+
+.showcase-card .feature-num {
+  -webkit-text-stroke: 1px var(--color-accent-blue);
+  text-stroke: 1px var(--color-accent-blue);
+}
+
+.showcase-card .feature-tag {
+  background: var(--color-accent-blue);
+}
+
+.showcase-flex {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-2xl);
   align-items: center;
-  gap: var(--space-md);
+  width: 100%;
 }
 
-.frame-dots {
-  display: flex;
-  gap: 6px;
-}
-
-.frame-dots span {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--color-border);
-}
-
-.frame-dots span:nth-child(1) {
-  background: #ff5f56;
-}
-
-.frame-dots span:nth-child(2) {
-  background: #ffbd2e;
-}
-
-.frame-dots span:nth-child(3) {
-  background: #27c93f;
-}
-
-.frame-title {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.frame-content {
+.showcase-image-box {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  padding: var(--space-xs);
   position: relative;
   overflow: hidden;
-  background: var(--color-bg-elevated);
 }
 
-.frame-content::after {
+.showcase-image-box img {
+  width: 100%;
+  height: auto;
+  display: block;
+  max-height: 280px;
+  object-fit: cover;
+  object-position: top;
+}
+
+.showcase-image-box::after {
   content: '';
   position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 120px;
+  bottom: var(--space-xs);
+  left: var(--space-xs);
+  right: var(--space-xs);
+  height: 60px;
   background: linear-gradient(
     180deg,
     transparent 0%,
-    rgba(15, 15, 15, 0.5) 50%,
-    rgba(15, 15, 15, 0.9) 100%
+    rgba(15, 15, 15, 0.3) 40%,
+    rgba(15, 15, 15, 0.8) 100%
   );
   pointer-events: none;
 }
 
-.showcase-image {
-  width: 100%;
-  height: auto;
-  display: block;
-  transition: transform 0.5s ease;
-}
-
-.showcase-frame:hover .showcase-image {
-  transform: scale(1.02);
-}
-
-.showcase-note {
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  text-align: right;
-  margin-top: var(--space-sm);
-  letter-spacing: 0.05em;
-  max-width: 600px;
-  margin-left: auto;
-}
-
 @media (max-width: 1024px) {
-  .showcase-content {
+  .showcase-flex {
     grid-template-columns: 1fr;
-    gap: var(--space-2xl);
-  }
-  
-  .showcase-text {
     text-align: center;
   }
   
-  .showcase-features {
-    align-items: center;
+  .showcase-card .feature-content p {
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
   }
   
-  .showcase-frame {
+  .showcase-card .feature-tag {
     margin: 0 auto;
   }
   
-  .showcase-note {
-    text-align: center;
-    margin: var(--space-sm) auto 0;
+  .showcase-image-box {
+    max-width: 450px;
+    margin: 0 auto;
   }
 }
 
 @media (max-width: 768px) {
-  .showcase-frame {
+  .showcase-image-box {
     max-width: 100%;
   }
   
-  .frame-header {
-    padding: var(--space-xs) var(--space-sm);
-  }
-  
-  .frame-dots span {
-    width: 10px;
-    height: 10px;
-  }
-  
-  .frame-title {
-    font-size: 0.65rem;
-  }
-  
-  .showcase-features span {
-    font-size: 0.65rem;
-    padding: 0.4rem 0.8rem;
+  .showcase-image-box img {
+    max-height: 220px;
   }
 }
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d1b4cc9..db83366 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,35 +46,18 @@ const version = pkg.version ?? "";
 
     <!-- Screenshot Showcase Section -->
     <section class="screenshot-showcase">
-      <div class="container">
-        <div class="section-label">[000] INTERFACE_PREVIEW</div>
-        <div class="showcase-content">
-          <div class="showcase-text">
-            <h2 class="showcase-title">SEE IT<br/>IN ACTION</h2>
-            <p class="showcase-description">
-              Built with Tauri v2, powered by CodeMirror 6, controlled by AI. This is what a modern development environment looks like.
-            </p>
-            <div class="showcase-features">
-              <span>VERTICAL DIFF BLOCKS</span>
-              <span>REAL-TIME AI CHAT</span>
-              <span>NATIVE PERFORMANCE</span>
+      <div class="features-layout">
+        <div class="feature-primary showcase-card">
+          <div class="feature-num">00</div>
+          <div class="showcase-flex">
+            <div class="feature-content">
+              <h3>THE INTERFACE</h3>
+              <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>
-          <div class="showcase-visual">
-            <div class="showcase-frame">
-              <div class="frame-header">
-                <div class="frame-dots">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </div>
-                <div class="frame-title">zblade v0.1.1</div>
-              </div>
-              <div class="frame-content">
-                <img src="/screenshot-1.png" alt="Zaguán Blade editor interface" class="showcase-image" />
-              </div>
+            <div class="showcase-image-box">
+              <img src="/screenshot-1.png" alt="Zaguán Blade editor interface" />
             </div>
-            <div class="showcase-note">AI-assisted development with integrated chat</div>
           </div>
         </div>
       </div>