diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index be84d19..d6f404a 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -28,7 +28,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     <div class="section-container">
       <h2>What is Likwid?</h2>
       <div class="what-grid">
-        <div class="what-card">
+        <div class="what-card ui-card">
           <div class="what-icon">
             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M12 2L2 7l10 5 10-5-10-5z"/>
@@ -39,7 +39,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h3>Modular Architecture</h3>
           <p>Every component is a plugin. Voting methods, delegation systems, integrations, and workflows can be added, removed, or customized per community.</p>
         </div>
-        <div class="what-card">
+        <div class="what-card ui-card">
           <div class="what-icon">
             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <circle cx="12" cy="12" r="10"/>
@@ -49,7 +49,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h3>Process-Oriented</h3>
           <p>Governance is a process, not a feature. Likwid structures deliberation, voting, and implementation as distinct phases with clear transitions.</p>
         </div>
-        <div class="what-card">
+        <div class="what-card ui-card">
           <div class="what-icon">
             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
@@ -96,27 +96,27 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     <div class="section-container">
       <h2>Core Capabilities</h2>
       <div class="capabilities-grid">
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Advanced Voting Methods</h4>
           <p>Schulze, STAR, Quadratic, Ranked Choice, and Approval voting. Each method is a plugin that can be enabled per community.</p>
         </div>
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Liquid Delegation</h4>
           <p>Global and community-scoped delegation that is always revocable. Delegate your voice to trusted members while retaining control.</p>
         </div>
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Structured Deliberation</h4>
           <p>Inform → Discuss → Decide workflow. Ensures members understand proposals before voting begins.</p>
         </div>
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Transparent Moderation</h4>
           <p>Every moderation action is logged with reasons. Cryptographic audit trail ensures accountability.</p>
         </div>
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Privacy-Preserving Voting</h4>
           <p>Separate civic and voting identities. Participate publicly while voting privately.</p>
         </div>
-        <div class="capability">
+        <div class="capability ui-card ui-card-pad-lg">
           <h4>Federation Ready</h4>
           <p>Connect communities across instances. Share decisions while maintaining autonomy.</p>
         </div>
@@ -162,19 +162,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       <h2>Technical Foundation</h2>
       <p class="section-intro">Likwid is free and open source software, built with modern, auditable technology.</p>
       <div class="tech-grid">
-        <div class="tech-item">
+        <div class="tech-item ui-card ui-card-pad-lg">
           <strong>Backend</strong>
           <span>Rust (Axum)</span>
         </div>
-        <div class="tech-item">
+        <div class="tech-item ui-card ui-card-pad-lg">
           <strong>Frontend</strong>
           <span>Astro + TypeScript</span>
         </div>
-        <div class="tech-item">
+        <div class="tech-item ui-card ui-card-pad-lg">
           <strong>Database</strong>
           <span>PostgreSQL</span>
         </div>
-        <div class="tech-item">
+        <div class="tech-item ui-card ui-card-pad-lg">
           <strong>License</strong>
           <span>EUPL-1.2</span>
         </div>
@@ -284,9 +284,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .what-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
     padding: 1.75rem;
     transition: all var(--motion-normal) var(--easing-standard);
   }
@@ -375,9 +372,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .capability {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }
 
@@ -466,9 +460,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
 
   .tech-item {
     text-align: center;
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }