diff --git a/frontend/src/pages/docs.astro b/frontend/src/pages/docs.astro
index 29dab29..c64dfc0 100644
--- a/frontend/src/pages/docs.astro
+++ b/frontend/src/pages/docs.astro
@@ -18,19 +18,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>Getting Started</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/quickstart" class="doc-link">
+          <a href="/docs/quickstart" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Quick Start Guide</h4>
             <p>Deploy Likwid in 10 minutes using Docker/Podman compose.</p>
           </a>
-          <a href="/docs/requirements" class="doc-link">
+          <a href="/docs/requirements" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>System Requirements</h4>
             <p>Hardware, software, and network requirements for production deployment.</p>
           </a>
-          <a href="/docs/installation" class="doc-link">
+          <a href="/docs/installation" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Installation Guide</h4>
             <p>Step-by-step installation for various environments and configurations.</p>
           </a>
-          <a href="/docs/first-community" class="doc-link">
+          <a href="/docs/first-community" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Creating Your First Community</h4>
             <p>Set up a community, configure governance, and invite members.</p>
           </a>
@@ -43,19 +43,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>Administration</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/admin/instance" class="doc-link">
+          <a href="/docs/admin/instance" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Instance Administration</h4>
             <p>Platform settings, plugin management, and global configuration.</p>
           </a>
-          <a href="/docs/admin/communities" class="doc-link">
+          <a href="/docs/admin/communities" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Community Management</h4>
             <p>Create communities, manage roles, and configure governance settings.</p>
           </a>
-          <a href="/docs/admin/moderation" class="doc-link">
+          <a href="/docs/admin/moderation" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Moderation Tools</h4>
             <p>Configure moderation policies, manage the moderation ledger, and handle appeals.</p>
           </a>
-          <a href="/docs/admin/backup" class="doc-link">
+          <a href="/docs/admin/backup" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Backup & Recovery</h4>
             <p>Database backups, disaster recovery, and data migration.</p>
           </a>
@@ -68,19 +68,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>Governance Features</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/governance/voting-methods" class="doc-link">
+          <a href="/docs/governance/voting-methods" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Voting Methods</h4>
             <p>Configure and use Schulze, STAR, Quadratic, Ranked Choice, and Approval voting.</p>
           </a>
-          <a href="/docs/governance/delegation" class="doc-link">
+          <a href="/docs/governance/delegation" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Liquid Delegation</h4>
             <p>Set up delegation, trust networks, and delegation policies.</p>
           </a>
-          <a href="/docs/governance/deliberation" class="doc-link">
+          <a href="/docs/governance/deliberation" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Structured Deliberation</h4>
             <p>Configure Inform→Discuss→Decide workflows and facilitator tools.</p>
           </a>
-          <a href="/docs/governance/proposals" class="doc-link">
+          <a href="/docs/governance/proposals" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Proposal Lifecycle</h4>
             <p>Create, manage, and track proposals through their governance journey.</p>
           </a>
@@ -93,19 +93,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>Plugin Development</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/plugins/overview" class="doc-link">
+          <a href="/docs/plugins/overview" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Plugin Architecture</h4>
             <p>Understand Likwid's plugin system, hooks, and extension points.</p>
           </a>
-          <a href="/docs/plugins/creating" class="doc-link">
+          <a href="/docs/plugins/creating" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Creating Plugins</h4>
             <p>Step-by-step guide to building your first Likwid plugin.</p>
           </a>
-          <a href="/docs/plugins/voting" class="doc-link">
+          <a href="/docs/plugins/voting" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Voting Method Plugins</h4>
             <p>Implement custom voting methods with the voting plugin API.</p>
           </a>
-          <a href="/docs/plugins/integrations" class="doc-link">
+          <a href="/docs/plugins/integrations" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Integration Plugins</h4>
             <p>Connect Likwid to external services: GitLab, Matrix, webhooks, and more.</p>
           </a>
@@ -118,19 +118,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>API Reference</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/api/overview" class="doc-link">
+          <a href="/docs/api/overview" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>API Overview</h4>
             <p>Authentication, rate limiting, and general API conventions.</p>
           </a>
-          <a href="/docs/api/communities" class="doc-link">
+          <a href="/docs/api/communities" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Communities API</h4>
             <p>Endpoints for community management and configuration.</p>
           </a>
-          <a href="/docs/api/proposals" class="doc-link">
+          <a href="/docs/api/proposals" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Proposals API</h4>
             <p>Create, update, and manage proposals programmatically.</p>
           </a>
-          <a href="/docs/api/voting" class="doc-link">
+          <a href="/docs/api/voting" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Voting API</h4>
             <p>Cast votes, retrieve results, and manage voting sessions.</p>
           </a>
@@ -143,19 +143,19 @@ import PublicLayout from '../layouts/PublicLayout.astro';
           <h2>Security</h2>
         </div>
         <div class="doc-list">
-          <a href="/docs/security/overview" class="doc-link">
+          <a href="/docs/security/overview" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Security Overview</h4>
             <p>Security model, threat considerations, and best practices.</p>
           </a>
-          <a href="/docs/security/authentication" class="doc-link">
+          <a href="/docs/security/authentication" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Authentication</h4>
             <p>Configure authentication methods, SSO, and OAuth providers.</p>
           </a>
-          <a href="/docs/security/audit-trail" class="doc-link">
+          <a href="/docs/security/audit-trail" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Audit Trail</h4>
             <p>Understanding the cryptographic moderation ledger and verification.</p>
           </a>
-          <a href="/docs/security/privacy" class="doc-link">
+          <a href="/docs/security/privacy" class="doc-link ui-card ui-card-pad-md ui-card-interactive">
             <h4>Privacy & Identity</h4>
             <p>Civic vs. voting identities, data protection, and privacy controls.</p>
           </a>
@@ -164,7 +164,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
     </section>
 
     <section class="docs-notice">
-      <div class="notice-content">
+      <div class="notice-content ui-card ui-card-pad-lg" style="border-color: var(--color-info); background: var(--color-info-muted);">
         <h3>Documentation In Progress</h3>
         <p>
           Likwid is under active development and documentation is being written alongside the codebase. 
@@ -180,10 +180,10 @@ import PublicLayout from '../layouts/PublicLayout.astro';
         Found an error? Want to add a section? Documentation contributions are welcome.
       </p>
       <div class="contribute-links">
-        <a href="https://codeberg.org/likwid/likwid/src/branch/main/docs" target="_blank" rel="noopener" class="contribute-link">
+        <a href="https://codeberg.org/likwid/likwid/src/branch/main/docs" target="_blank" rel="noopener" class="contribute-link ui-card ui-card-pad-md ui-card-interactive">
           View on Codeberg
         </a>
-        <a href="/contributing" class="contribute-link">
+        <a href="/contributing" class="contribute-link ui-card ui-card-pad-md ui-card-interactive">
           Contribution Guidelines
         </a>
       </div>
@@ -259,12 +259,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
 
   .doc-link {
     display: block;
-    padding: 1.25rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     text-decoration: none;
-    transition: all var(--motion-fast) var(--easing-standard);
   }
 
   .doc-link:hover {
@@ -291,10 +287,7 @@ import PublicLayout from '../layouts/PublicLayout.astro';
   }
 
   .notice-content {
-    background: var(--color-info-muted);
-    border: 1px solid var(--color-info);
     border-radius: var(--radius-md);
-    padding: 1.5rem;
   }
 
   .notice-content h3 {
@@ -339,12 +332,8 @@ import PublicLayout from '../layouts/PublicLayout.astro';
 
   .contribute-link {
     display: inline-block;
-    padding: 0.75rem 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     font-weight: 500;
-    transition: all var(--motion-fast) var(--easing-standard);
   }
 
   .contribute-link:hover {