diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 0c20a76..1249c2d 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -127,30 +127,92 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   <!-- How It Works Section -->
   <section class="section-how">
     <div class="section-container">
-      <h2>How Governance Works in Likwid</h2>
-      <div class="process-flow">
-        <div class="process-step">
-          <div class="step-number">1</div>
-          <h4>Proposal Creation</h4>
-          <p>A member drafts a proposal with clear options. The proposal enters an inform phase where members can read and understand it.</p>
+      <h2>Modular governance, explained</h2>
+      <p class="section-intro">
+        Likwid is built from composable modules. Communities enable what they need: voting methods, delegation rules, moderation tools, and integrations.
+      </p>
+      <div class="diagram-grid">
+        <div class="diagram-card ui-card ui-card-pad-lg">
+          <div class="diagram-header">
+            <h4>Liquid delegation</h4>
+            <p>Delegate by trust network. Vote directly anytime to override your delegation.</p>
+          </div>
+          <svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Liquid delegation diagram">
+            <defs>
+              <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
+              </marker>
+              <marker id="arrow-muted" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border)" />
+              </marker>
+            </defs>
+
+            <rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
+
+            <circle cx="140" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
+            <circle cx="280" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
+            <circle cx="420" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
+
+            <text x="140" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Alice</text>
+            <text x="280" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Bob</text>
+            <text x="420" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Carol</text>
+
+            <path d="M 175 86 L 245 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
+            <path d="M 315 86 L 385 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
+
+            <text x="210" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
+            <text x="350" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
+
+            <rect x="190" y="138" width="180" height="44" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
+            <text x="280" y="165" text-anchor="middle" font-size="12" fill="var(--color-text)">Direct vote (override)</text>
+
+            <path d="M 140 120 C 160 140, 180 148, 190 152" stroke="var(--color-border)" stroke-width="2" stroke-dasharray="4 4" marker-end="url(#arrow-muted)" fill="none" />
+          </svg>
+          <div class="diagram-footer">
+            Delegations can be scoped (global or per community) and revoked instantly.
+          </div>
         </div>
-        <div class="process-arrow">→</div>
-        <div class="process-step">
-          <div class="step-number">2</div>
-          <h4>Deliberation</h4>
-          <p>Structured discussion with facilitator tools. Comments are organized to surface constructive input and identify concerns.</p>
-        </div>
-        <div class="process-arrow">→</div>
-        <div class="process-step">
-          <div class="step-number">3</div>
-          <h4>Voting</h4>
-          <p>Members vote using the community's chosen method. Delegations are resolved. Results are calculated transparently.</p>
-        </div>
-        <div class="process-arrow">→</div>
-        <div class="process-step">
-          <div class="step-number">4</div>
-          <h4>Implementation</h4>
-          <p>Decisions are recorded and tracked. Integration plugins can trigger external actions or workflows.</p>
+
+        <div class="diagram-card ui-card ui-card-pad-lg">
+          <div class="diagram-header">
+            <h4>Plugin-based governance</h4>
+            <p>Core platform + modules. Enable what you need per community.</p>
+          </div>
+          <svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Plugin system diagram">
+            <defs>
+              <marker id="arrow2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+                <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
+              </marker>
+            </defs>
+
+            <rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
+
+            <rect x="210" y="78" width="140" height="64" rx="14" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
+            <text x="280" y="106" text-anchor="middle" font-size="12" fill="var(--color-text)">Core platform</text>
+            <text x="280" y="126" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">users • proposals • data</text>
+
+            <rect x="70" y="54" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
+            <text x="130" y="77" text-anchor="middle" font-size="11" fill="var(--color-text)">Voting plugins</text>
+
+            <rect x="70" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
+            <text x="130" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Delegation</text>
+
+            <rect x="370" y="54" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
+            <text x="430" y="77" text-anchor="middle" font-size="11" fill="var(--color-text)">Moderation</text>
+
+            <rect x="370" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
+            <text x="430" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Integrations</text>
+
+            <path d="M 190 72 L 210 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
+            <path d="M 190 146 L 210 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
+            <path d="M 370 92 L 350 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
+            <path d="M 370 128 L 350 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
+
+            <text x="280" y="186" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">Per-community configuration decides what is enabled.</text>
+          </svg>
+          <div class="diagram-footer">
+            <a href="/features" class="diagram-link">See the modules →</a>
+          </div>
         </div>
       </div>
     </div>
@@ -389,60 +451,45 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   /* Process Flow Section */
-  .process-flow {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
+  .diagram-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
   }
 
-  .process-step {
-    flex: 1;
-    min-width: 200px;
-    max-width: 250px;
-    text-align: center;
+  @media (max-width: 900px) {
+    .diagram-grid {
+      grid-template-columns: 1fr;
+    }
   }
 
-  .step-number {
-    width: 44px;
-    height: 44px;
-    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
-    color: var(--color-on-primary);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .diagram-header h4 {
     font-size: 1.125rem;
-    font-weight: 700;
-    margin: 0 auto 1rem;
-    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
+    margin: 0 0 0.5rem;
   }
 
-  .process-step h4 {
-    font-size: 1.125rem;
-    margin-bottom: 0.5rem;
+  .diagram-header p {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: 0.9375rem;
+    line-height: 1.5;
   }
 
-  .process-step p {
+  .diagram {
+    width: 100%;
+    height: auto;
+    margin-top: 1.25rem;
+  }
+
+  .diagram-footer {
+    margin-top: 1.25rem;
     color: var(--color-text-muted);
     font-size: 0.875rem;
     line-height: 1.5;
   }
 
-  .process-arrow {
-    font-size: 1.5rem;
-    color: var(--color-text-muted);
-    padding-top: 0.75rem;
-  }
-
-  @media (max-width: 900px) {
-    .process-arrow {
-      display: none;
-    }
-    .process-flow {
-      gap: 2rem;
-    }
+  .diagram-link {
+    font-weight: 500;
   }
 
   /* Technical Section */