diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 9267648..5ed3234 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -209,7 +209,7 @@ const proposalId = id ?? '';
                     const safeOptDesc = opt.description ? escapeHtml(opt.description) : '';
 
                     return `
-                      <div class="option ${isVoting ? 'votable' : ''} ${isWinner ? 'winner' : ''} method-${method}" data-id="${opt.id}">
+                      <div class="option ui-card ${isVoting ? 'votable' : ''} ${isWinner ? 'winner' : ''} method-${method}" data-id="${opt.id}">
                         <div class="option-info">
                           <span class="option-label">${safeLabel} ${isWinner ? '🏆' : ''}</span>
                           ${safeOptDesc ? `<span class="option-desc">${safeOptDesc}</span>` : ''}
@@ -543,7 +543,7 @@ const proposalId = id ?? '';
     const modal = document.createElement('div');
     modal.className = 'edit-modal';
     modal.innerHTML = `
-      <div class="modal-content">
+      <div class="modal-content ui-card ui-card-pad-xl">
         <h2>Edit Proposal</h2>
         <form id="edit-form">
           <div class="form-group">
@@ -609,7 +609,7 @@ const proposalId = id ?? '';
         const authorHref = `/users/${encodeURIComponent(String(c.author_name))}`;
         const content = escapeHtml(c.content);
         return `
-          <div class="comment">
+          <div class="comment ui-card ui-card-soft ui-card-pad-md">
             <div class="comment-header">
               <a href="${authorHref}" class="comment-author">${authorName}</a>
               <span class="comment-date">${new Date(c.created_at).toLocaleString()}</span>
@@ -706,8 +706,7 @@ const proposalId = id ?? '';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: var(--color-surface);
-    border: 2px solid var(--color-border);
+    border-width: 2px;
     border-radius: 8px;
     padding: 1rem;
   }
@@ -798,10 +797,7 @@ const proposalId = id ?? '';
   }
 
   .modal-content {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: 12px;
-    padding: 2rem;
     width: 100%;
     max-width: 500px;
   }
@@ -1162,10 +1158,7 @@ const proposalId = id ?? '';
   }
 
   .comment {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: 8px;
-    padding: 1rem;
   }
 
   .comment-header {