diff --git a/frontend/src/pages/features.astro b/frontend/src/pages/features.astro
index 9db2c7d..cc816ac 100644
--- a/frontend/src/pages/features.astro
+++ b/frontend/src/pages/features.astro
@@ -22,7 +22,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="voting-methods">
-        <div class="method-card">
+        <div class="method-card ui-card ui-card-pad-lg">
           <div class="method-header">
             <h3>Schulze Method</h3>
             <span class="method-tag">Condorcet-consistent</span>
@@ -36,7 +36,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </div>
         </div>
 
-        <div class="method-card">
+        <div class="method-card ui-card ui-card-pad-lg">
           <div class="method-header">
             <h3>STAR Voting</h3>
             <span class="method-tag">Score + Runoff</span>
@@ -50,7 +50,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </div>
         </div>
 
-        <div class="method-card">
+        <div class="method-card ui-card ui-card-pad-lg">
           <div class="method-header">
             <h3>Quadratic Voting</h3>
             <span class="method-tag">Intensity-weighted</span>
@@ -64,7 +64,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </div>
         </div>
 
-        <div class="method-card">
+        <div class="method-card ui-card ui-card-pad-lg">
           <div class="method-header">
             <h3>Ranked Choice</h3>
             <span class="method-tag">Instant Runoff</span>
@@ -78,7 +78,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </div>
         </div>
 
-        <div class="method-card">
+        <div class="method-card ui-card ui-card-pad-lg">
           <div class="method-header">
             <h3>Approval Voting</h3>
             <span class="method-tag">Simple multi-select</span>
@@ -105,28 +105,28 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="feature-grid">
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Scoped Delegation</h4>
           <p>
             Delegate your voice globally or within a specific community to people you trust.
             You can always vote directly and override your delegation.
           </p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Transitive Chains</h4>
           <p>
             Your delegate can further delegate to their trusted experts, creating chains 
             of trust. Cycle detection ensures no infinite loops.
           </p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Always Revocable</h4>
           <p>
             Override any delegation by voting directly. Revoke delegation at any time. 
             Your voice remains under your control.
           </p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Transparent Networks</h4>
           <p>
             See delegation relationships (with privacy controls). Understand who influences 
@@ -147,7 +147,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="process-visual">
-        <div class="process-phase">
+        <div class="process-phase ui-card ui-card-pad-lg">
           <div class="phase-icon">📖</div>
           <h4>Inform</h4>
           <p>
@@ -156,7 +156,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </p>
         </div>
         <div class="process-arrow">→</div>
-        <div class="process-phase">
+        <div class="process-phase ui-card ui-card-pad-lg">
           <div class="phase-icon">💬</div>
           <h4>Discuss</h4>
           <p>
@@ -165,7 +165,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           </p>
         </div>
         <div class="process-arrow">→</div>
-        <div class="process-phase">
+        <div class="process-phase ui-card ui-card-pad-lg">
           <div class="phase-icon">✓</div>
           <h4>Decide</h4>
           <p>
@@ -176,19 +176,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="feature-grid" style="margin-top: 2rem;">
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Facilitator Tools</h4>
           <p>Designated facilitators can organize discussions, highlight key points, and manage conversation flow.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Configurable Phases</h4>
           <p>Set minimum and maximum durations for each phase. Extend deadlines when needed.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Notification System</h4>
           <p>Members receive timely notifications about proposals, phase transitions, and voting deadlines.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Amendment Process</h4>
           <p>Proposals can be amended during deliberation based on feedback, with clear change tracking.</p>
         </div>
@@ -206,7 +206,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="moderation-features">
-        <div class="mod-feature">
+        <div class="mod-feature ui-card ui-card-pad-lg">
           <h4>Public Moderation Ledger</h4>
           <p>
             Every moderation action is logged with who took it, what rule was violated, 
@@ -214,21 +214,21 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             No shadow banning. No hidden removals.
           </p>
         </div>
-        <div class="mod-feature">
+        <div class="mod-feature ui-card ui-card-pad-lg">
           <h4>Cryptographic Audit Trail</h4>
           <p>
             The moderation ledger is cryptographically chained. Each entry references 
             the previous one, making retroactive alteration detectable. Integrity you can verify.
           </p>
         </div>
-        <div class="mod-feature">
+        <div class="mod-feature ui-card ui-card-pad-lg">
           <h4>Rule-Based Actions</h4>
           <p>
             Communities define their moderation rules. Actions reference specific rules, 
             creating consistency and enabling appeals based on documented standards.
           </p>
         </div>
-        <div class="mod-feature">
+        <div class="mod-feature ui-card ui-card-pad-lg">
           <h4>Separate Identities</h4>
           <p>
             Civic identity (who you are in discussions) and voting identity (how you voted) 
@@ -249,7 +249,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="plugin-categories">
-        <div class="plugin-category">
+        <div class="plugin-category ui-card ui-card-pad-lg">
           <h4>Voting Plugins</h4>
           <ul>
             <li>Approval Voting</li>
@@ -259,7 +259,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             <li>Quadratic Voting</li>
           </ul>
         </div>
-        <div class="plugin-category">
+        <div class="plugin-category ui-card ui-card-pad-lg">
           <h4>Feature Plugins</h4>
           <ul>
             <li>Liquid Delegation</li>
@@ -269,7 +269,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
             <li>Conflict Resolution</li>
           </ul>
         </div>
-        <div class="plugin-category">
+        <div class="plugin-category ui-card ui-card-pad-lg">
           <h4>Integration Plugins</h4>
           <ul>
             <li>GitLab Integration</li>
@@ -300,19 +300,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
       </div>
 
       <div class="feature-grid">
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Cross-Instance Coordination</h4>
           <p>Communities on different Likwid instances can federate, sharing proposals and decisions.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Trust Levels</h4>
           <p>Configure trust levels for federated instances. Control what information is shared and how.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Autonomy Preserved</h4>
           <p>Each community maintains control over its own governance. Federation is cooperative, not hierarchical.</p>
         </div>
-        <div class="feature-item">
+        <div class="feature-item ui-card ui-card-pad-lg">
           <h4>Network Effects</h4>
           <p>Federated communities can coordinate across geographic or functional boundaries.</p>
         </div>
@@ -397,13 +397,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     gap: 1.5rem;
   }
 
-  .method-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-  }
-
   .method-header {
     display: flex;
     align-items: center;
@@ -456,9 +449,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .feature-item {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }
 
@@ -488,9 +478,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     flex: 1;
     max-width: 280px;
     text-align: center;
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
   }
 
@@ -547,9 +534,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .mod-feature {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     border-left: 3px solid var(--color-success);
   }
@@ -581,9 +565,6 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .plugin-category {
-    padding: 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
   }