diff --git a/backend/src/spicebook/engine/schematic.py b/backend/src/spicebook/engine/schematic.py
index 8884bfd..cf526f3 100644
--- a/backend/src/spicebook/engine/schematic.py
+++ b/backend/src/spicebook/engine/schematic.py
@@ -1021,19 +1021,19 @@ def _render_grid(parsed: ParsedNetlist) -> str:
                 # node[0] higher → go down so start=node[0], end=node[1]
                 placed_elem = d.add(
                     elem.at((x, y0)).down().length(length)
-                    .label(_component_label(comp), loc="right")
+                    .label(_component_label(comp), loc="right", ofst=0.15)
                 )
             else:
                 # node[0] lower → go up so start=node[0], end=node[1]
                 placed_elem = d.add(
                     elem.at((x, y0)).up().length(length)
-                    .label(_component_label(comp), loc="right")
+                    .label(_component_label(comp), loc="right", ofst=0.15)
                 )
         else:
             # Fallback: single-node or unusual component
             placed_elem = d.add(
                 elem.at((x, _GRID_MID_Y)).down().length(_GRID_MIN_COMP_LEN)
-                .label(_component_label(comp), loc="right")
+                .label(_component_label(comp), loc="right", ofst=0.15)
             )
 
         positions = _get_terminal_positions(placed_elem, comp)
@@ -1152,7 +1152,7 @@ def _draw_vert_chain(
         if i == 0 and start is not None:
             elem = elem.at(start)
         elem = getattr(elem, direction)()
-        elem = elem.label(_component_label(comp), loc=label_loc)
+        elem = elem.label(_component_label(comp), loc=label_loc, ofst=0.15)
         d.add(elem)
 
     if end_type == "ground":
@@ -1180,7 +1180,7 @@ def _draw_horiz_then_down(d, parsed, start, path, going_right):
             # Turn downward at the bend — label faces outward
             d.push()
             down_label = "right" if going_right else "left"
-            d.add(elem.down().label(_component_label(comp), loc=down_label))
+            d.add(elem.down().label(_component_label(comp), loc=down_label, ofst=0.15))
             if path.end_type == "ground":
                 d.add(elm.Ground())
             elif path.end_type == "supply":
diff --git a/frontend/src/components/PipelineStrip.astro b/frontend/src/components/PipelineStrip.astro
index a9f3095..6647feb 100644
--- a/frontend/src/components/PipelineStrip.astro
+++ b/frontend/src/components/PipelineStrip.astro
@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 ---
 
 <section class="max-w-6xl mx-auto px-6 py-16">
-  <div class="grid gap-6 md:grid-cols-[1fr_auto_1fr_auto_1fr] items-start">
+  <div class="grid gap-6 md:grid-cols-2 md:gap-8 lg:grid-cols-[1fr_auto_1fr_auto_1fr_auto_1fr] items-start">
 
     <!-- Step 1: Write -->
     <div class="pipeline-step">
@@ -22,9 +22,9 @@ import { Icon } from 'astro-icon/components';
     </div>
 
     <!-- Arrow 1→2 -->
-    <div class="pipeline-arrow">
-      <Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden md:block" />
-      <Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 md:hidden" />
+    <div class="pipeline-arrow flex md:hidden lg:flex">
+      <Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
+      <Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
     </div>
 
     <!-- Step 2: Simulate -->
@@ -54,14 +54,80 @@ import { Icon } from 'astro-icon/components';
     </div>
 
     <!-- Arrow 2→3 -->
-    <div class="pipeline-arrow">
-      <Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden md:block" />
-      <Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 md:hidden" />
+    <div class="pipeline-arrow flex md:hidden lg:flex">
+      <Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
+      <Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
     </div>
 
-    <!-- Step 3: Visualize -->
+    <!-- Step 3: Schematic -->
     <div class="pipeline-step">
       <span class="pipeline-number">03</span>
+      <h3 class="pipeline-title">Schematic</h3>
+      <div class="pipeline-preview pipeline-schematic">
+        <svg viewBox="0 0 300 140" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" preserveAspectRatio="xMidYMid meet">
+          <defs>
+            <pattern id="sch-minor" width="10" height="10" patternUnits="userSpaceOnUse">
+              <path d="M 10 0 V 10 H 0" fill="none" stroke="#d4e4d4" stroke-width="0.3"/>
+            </pattern>
+            <pattern id="sch-major" width="50" height="50" patternUnits="userSpaceOnUse">
+              <path d="M 50 0 V 50 H 0" fill="none" stroke="#b0ccb0" stroke-width="0.6"/>
+            </pattern>
+          </defs>
+
+          <!-- Mims graph paper background -->
+          <rect width="300" height="140" fill="#f8faf6"/>
+          <rect width="300" height="140" fill="url(#sch-minor)"/>
+          <rect width="300" height="140" fill="url(#sch-major)"/>
+
+          <!-- Wires -->
+          <line x1="15" y1="35" x2="50" y2="35" stroke="#333" stroke-width="1.2"/>
+          <line x1="130" y1="35" x2="170" y2="35" stroke="#333" stroke-width="1.2"/>
+          <line x1="170" y1="35" x2="245" y2="35" stroke="#333" stroke-width="1.2"/>
+          <line x1="170" y1="35" x2="170" y2="50" stroke="#333" stroke-width="1.2"/>
+          <line x1="170" y1="110" x2="170" y2="125" stroke="#333" stroke-width="1.2"/>
+
+          <!-- Junction dot -->
+          <circle cx="170" cy="35" r="2" fill="#333"/>
+
+          <!-- Ground symbol -->
+          <line x1="163" y1="125" x2="177" y2="125" stroke="#333" stroke-width="1.2"/>
+          <line x1="165" y1="129" x2="175" y2="129" stroke="#333" stroke-width="1"/>
+          <line x1="167" y1="133" x2="173" y2="133" stroke="#333" stroke-width="0.8"/>
+
+          <!-- R1 horizontal zigzag (10k: Brown-Black-Orange-Gold) -->
+          <polyline points="50,35 60,26 70,44" fill="none" stroke="#8B4513" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="70,44 80,26 90,44" fill="none" stroke="#2d2d2d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="90,44 100,26 110,44" fill="none" stroke="#FF6B00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="110,44 120,26 130,35" fill="none" stroke="#DAA520" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+          <!-- R2 vertical zigzag (4.7k: Yellow-Violet-Red-Gold) -->
+          <polyline points="170,50 161,57.5 179,65" fill="none" stroke="#CCAA00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="179,65 161,72.5 179,80" fill="none" stroke="#7B2FBE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="179,80 161,87.5 179,95" fill="none" stroke="#DC2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          <polyline points="179,95 161,102.5 170,110" fill="none" stroke="#DAA520" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+
+          <!-- Labels -->
+          <text x="90" y="18" text-anchor="middle" font-family="ui-monospace, monospace" font-size="8" fill="#555">R1 10k</text>
+          <text x="195" y="83" font-family="ui-monospace, monospace" font-size="8" fill="#555">R2</text>
+          <text x="195" y="93" font-family="ui-monospace, monospace" font-size="7" fill="#777">4.7k</text>
+          <text x="10" y="30" font-family="ui-monospace, monospace" font-size="7" fill="#777">Vin</text>
+          <text x="248" y="30" font-family="ui-monospace, monospace" font-size="7" fill="#777">Vout</text>
+        </svg>
+      </div>
+      <p class="pipeline-desc">
+        Auto-generated circuit diagrams with color-coded resistors
+      </p>
+    </div>
+
+    <!-- Arrow 3→4 -->
+    <div class="pipeline-arrow flex md:hidden lg:flex">
+      <Icon name="lucide:arrow-right" class="w-5 h-5 text-slate-600 hidden lg:block" />
+      <Icon name="lucide:chevron-down" class="w-5 h-5 text-slate-600 lg:hidden" />
+    </div>
+
+    <!-- Step 4: Visualize -->
+    <div class="pipeline-step">
+      <span class="pipeline-number">04</span>
       <h3 class="pipeline-title">Visualize</h3>
       <div class="pipeline-preview pipeline-waveform">
         <svg viewBox="0 0 300 140" xmlns="http://www.w3.org/2000/svg" class="w-full h-full" preserveAspectRatio="none">
@@ -141,6 +207,11 @@ import { Icon } from 'astro-icon/components';
     aspect-ratio: 300 / 140;
   }
 
+  .pipeline-schematic {
+    padding: 0;
+    aspect-ratio: 300 / 140;
+  }
+
   .pipeline-desc {
     font-size: 0.875rem;
     color: #94a3b8;
@@ -148,16 +219,14 @@ import { Icon } from 'astro-icon/components';
   }
 
   .pipeline-arrow {
-    display: flex;
     align-items: center;
     justify-content: center;
-    padding-top: 5rem;
+    padding-top: 0;
   }
 
-  @media (max-width: 767px) {
+  @media (min-width: 1024px) {
     .pipeline-arrow {
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-top: 5rem;
     }
   }
 </style>