diff --git a/frontend/src/components/moderation/LedgerViewer.astro b/frontend/src/components/moderation/LedgerViewer.astro
index 5514796..0b285bf 100644
--- a/frontend/src/components/moderation/LedgerViewer.astro
+++ b/frontend/src/components/moderation/LedgerViewer.astro
@@ -1,7 +1,7 @@
 ---
 export interface Props {
-  communityId?;
-  compact?;
+  communityId?: string | number;
+  compact?: boolean;
 }
 
 const { communityId, compact = false } = Astro.props;
@@ -21,11 +21,11 @@ import { API_BASE } from '../../lib/api';
       </div>
     </div>
     <div class="header-actions">
-      <button class="btn-verify" id="btn-verify" title="Verify chain integrity">
+      <button class="ui-btn ui-btn-secondary" id="btn-verify" title="Verify chain integrity" type="button">
         <svg class="icon"><use href="#icon-verify"/></svg>
         Verify
       </button>
-      <button class="btn-export" id="btn-export" title="Export ledger">
+      <button class="ui-btn ui-btn-primary" id="btn-export" title="Export ledger" type="button">
         <svg class="icon"><use href="#icon-arrow-right"/></svg>
         Export
       </button>
@@ -85,9 +85,9 @@ import { API_BASE } from '../../lib/api';
 
   <!-- Pagination -->
   <div class="ledger-pagination" id="ledger-pagination">
-    <button class="btn-page" id="btn-prev" disabled>← Previous</button>
+    <button class="ui-btn ui-btn-secondary" id="btn-prev" disabled type="button">← Previous</button>
     <span class="page-info" id="page-info">Page 1</span>
-    <button class="btn-page" id="btn-next">Next →</button>
+    <button class="ui-btn ui-btn-secondary" id="btn-next" type="button">Next →</button>
   </div>
 
   <!-- Entry Detail Modal -->
@@ -149,39 +149,6 @@ import { API_BASE } from '../../lib/api';
     gap: 0.75rem;
   }
 
-  .btn-verify, .btn-export {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    font-size: 0.875rem;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-
-  .btn-verify {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-  }
-
-  .btn-verify:hover {
-    background: var(--color-bg);
-    border-color: var(--color-success);
-    color: var(--color-success);
-  }
-
-  .btn-export {
-    background: var(--color-primary);
-    border: none;
-    color: white;
-  }
-
-  .btn-export:hover {
-    background: var(--color-primary-hover);
-  }
-
   /* Chain Status */
   .chain-status {
     display: flex;
@@ -398,25 +365,6 @@ import { API_BASE } from '../../lib/api';
     border-top: 1px solid var(--color-border);
   }
 
-  .btn-page {
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    background: transparent;
-    color: var(--color-text);
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-
-  .btn-page:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .btn-page:not(:disabled):hover {
-    background: var(--color-bg);
-  }
-
   .page-info {
     font-size: 0.875rem;
     color: var(--color-text-muted);
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index c2419c5..466829a 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -93,7 +93,7 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
           </div>
           <div class="nav-auth" id="nav-auth">
             <a href="/login">Login</a>
-            {!publicDemoSite ? <a href="/register" class="btn-register">Register</a> : null}
+            {!publicDemoSite ? <a href="/register" class="ui-btn ui-btn-primary">Register</a> : null}
           </div>
         </nav>
       </header>
@@ -258,27 +258,6 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     color: var(--color-text);
   }
 
-  .btn-register {
-    background: var(--color-primary);
-    color: var(--color-text-inverse) !important;
-    padding: 0.5rem 1.25rem;
-    border-radius: var(--radius-sm);
-    font-weight: 600;
-    font-size: 0.875rem;
-    transition: all var(--motion-fast) var(--easing-standard);
-  }
-
-  .btn-register:hover {
-    background: var(--color-primary-hover);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
-  }
-
-  .btn-register:active {
-    transform: translateY(0);
-    box-shadow: var(--shadow-sm);
-  }
-
   .user-name {
     color: var(--color-text);
     font-weight: 500;
diff --git a/frontend/src/layouts/PublicLayout.astro b/frontend/src/layouts/PublicLayout.astro
index 80b4e53..114be69 100644
--- a/frontend/src/layouts/PublicLayout.astro
+++ b/frontend/src/layouts/PublicLayout.astro
@@ -91,8 +91,8 @@ const defaultTheme = DEFAULT_THEME;
             <a href="/docs">Documentation</a>
           </div>
           <div class="nav-actions">
-            <a href="/demo" class="btn-demo">Explore Demo</a>
-            {!publicDemoSite ? <a href="/login" class="btn-login">Sign In</a> : null}
+            <a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
+            {!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
           </div>
         </nav>
       </header>
@@ -216,33 +216,6 @@ const defaultTheme = DEFAULT_THEME;
     align-items: center;
   }
 
-  .btn-demo {
-    background: var(--color-primary);
-    color: var(--color-text-inverse);
-    padding: 0.5rem 1.25rem;
-    border-radius: var(--radius-sm);
-    font-weight: 600;
-    font-size: 0.875rem;
-    transition: all var(--motion-fast) var(--easing-standard);
-  }
-
-  .btn-demo:hover {
-    background: var(--color-primary-hover);
-    color: var(--color-text-inverse);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.25);
-  }
-
-  .btn-login {
-    color: var(--color-text-muted);
-    font-size: 0.9375rem;
-    padding: 0.625rem 1rem;
-  }
-
-  .btn-login:hover {
-    color: var(--color-text);
-  }
-
   .public-main {
     flex: 1;
   }
diff --git a/frontend/src/pages/admin/approvals.astro b/frontend/src/pages/admin/approvals.astro
index fdb790d..a09eddb 100644
--- a/frontend/src/pages/admin/approvals.astro
+++ b/frontend/src/pages/admin/approvals.astro
@@ -91,8 +91,8 @@ import { API_BASE as apiBase } from '../../lib/api';
             ${r.expires_at ? `<span class="expires">Expires: ${new Date(r.expires_at).toLocaleDateString()}</span>` : ''}
           </div>
           <div class="item-actions">
-            <button class="btn-approve" data-type="registration" data-id="${r.id}">Approve</button>
-            <button class="btn-reject" data-type="registration" data-id="${r.id}">Reject</button>
+            <button class="ui-btn ui-btn-success js-approve" data-type="registration" data-id="${r.id}" type="button">Approve</button>
+            <button class="ui-btn ui-btn-danger js-reject" data-type="registration" data-id="${r.id}" type="button">Reject</button>
           </div>
         </div>
       `).join('');
@@ -141,8 +141,8 @@ import { API_BASE as apiBase } from '../../lib/api';
             <span class="date">Requested: ${new Date(c.created_at).toLocaleDateString()}</span>
           </div>
           <div class="item-actions">
-            <button class="btn-approve" data-type="community" data-id="${c.id}">Approve</button>
-            <button class="btn-reject" data-type="community" data-id="${c.id}">Reject</button>
+            <button class="ui-btn ui-btn-success js-approve" data-type="community" data-id="${c.id}" type="button">Approve</button>
+            <button class="ui-btn ui-btn-danger js-reject" data-type="community" data-id="${c.id}" type="button">Reject</button>
           </div>
         </div>
       `).join('');
@@ -154,7 +154,7 @@ import { API_BASE as apiBase } from '../../lib/api';
   }
 
   function setupActionButtons() {
-    document.querySelectorAll('.btn-approve').forEach(btn => {
+    document.querySelectorAll('.js-approve').forEach(btn => {
       btn.addEventListener('click', async () => {
         const type = btn.dataset.type;
         const id = btn.dataset.id;
@@ -162,7 +162,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       });
     });
 
-    document.querySelectorAll('.btn-reject').forEach(btn => {
+    document.querySelectorAll('.js-reject').forEach(btn => {
       btn.addEventListener('click', async () => {
         const type = btn.dataset.type;
         const id = btn.dataset.id;
@@ -172,7 +172,7 @@ import { API_BASE as apiBase } from '../../lib/api';
     });
   }
 
-  async function reviewItem(type, id, approve, reason?) {
+  async function reviewItem(type, id, approve, reason) {
     const endpoint = type === 'registration' 
       ? `/api/approvals/registrations/${id}`
       : `/api/approvals/communities/${id}`;
@@ -344,35 +344,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     flex-shrink: 0;
   }
 
-  .btn-approve {
-    padding: 0.5rem 1rem;
-    background: var(--color-success);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
-  }
-
-  .btn-approve:hover {
-    opacity: 0.9;
-  }
-
-  .btn-reject {
-    padding: 0.5rem 1rem;
-    background: transparent;
-    color: var(--color-error);
-    border: 1px solid var(--color-error);
-    border-radius: 6px;
-    cursor: pointer;
-    font-weight: 500;
-  }
-
-  .btn-reject:hover {
-    background: var(--color-error);
-    color: white;
-  }
-
   .loading, .empty, .error {
     text-align: center;
     padding: 2rem;
diff --git a/frontend/src/pages/admin/invitations.astro b/frontend/src/pages/admin/invitations.astro
index d3d268b..dfb9dd9 100644
--- a/frontend/src/pages/admin/invitations.astro
+++ b/frontend/src/pages/admin/invitations.astro
@@ -32,7 +32,7 @@ import { API_BASE as apiBase } from '../../lib/api';
               <input type="number" id="expires_hours" value="168" min="1" max="8760" />
             </div>
           </div>
-          <button type="submit" class="btn-create">Create Invitation</button>
+          <button type="submit" class="ui-btn ui-btn-primary">Create Invitation</button>
         </form>
       </section>
 
@@ -154,14 +154,14 @@ import { API_BASE as apiBase } from '../../lib/api';
             </div>
           </div>
           <div class="inv-actions">
-            <button class="btn-copy" data-code="${inv.code}" title="Copy code">📋</button>
-            ${inv.is_active ? `<button class="btn-revoke" data-id="${inv.id}" title="Revoke">🚫</button>` : '<span class="status-inactive">Inactive</span>'}
+            <button class="ui-btn ui-btn-secondary inv-action-btn js-copy" data-code="${inv.code}" title="Copy code" type="button">📋</button>
+            ${inv.is_active ? `<button class="ui-btn ui-btn-danger inv-action-btn js-revoke" data-id="${inv.id}" title="Revoke" type="button">🚫</button>` : '<span class="status-inactive">Inactive</span>'}
           </div>
         </div>
       `).join('');
 
       // Setup action buttons
-      document.querySelectorAll('.btn-copy').forEach(btn => {
+      document.querySelectorAll('.js-copy').forEach(btn => {
         btn.addEventListener('click', () => {
           const code = (btn).dataset.code;
           navigator.clipboard.writeText(code || '');
@@ -169,7 +169,7 @@ import { API_BASE as apiBase } from '../../lib/api';
         });
       });
 
-      document.querySelectorAll('.btn-revoke').forEach(btn => {
+      document.querySelectorAll('.js-revoke').forEach(btn => {
         btn.addEventListener('click', async () => {
           if (!confirm('Revoke this invitation?')) return;
           const id = (btn).dataset.id;
@@ -293,19 +293,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     color: var(--color-text);
   }
 
-  .btn-create {
-    padding: 0.75rem 1.5rem;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-weight: 500;
-  }
-
-  .btn-create:hover {
-    background: var(--color-primary-hover);
-  }
 
   .invitations-list {
     display: flex;
@@ -365,22 +352,9 @@ import { API_BASE as apiBase } from '../../lib/api';
     align-items: center;
   }
 
-  .btn-copy, .btn-revoke {
+  .inv-action-btn {
     padding: 0.5rem;
-    background: transparent;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 1rem;
-  }
-
-  .btn-copy:hover {
-    background: var(--color-bg);
-  }
-
-  .btn-revoke:hover {
-    background: var(--color-error);
-    border-color: var(--color-error);
+    width: 40px;
   }
 
   .status-inactive {
diff --git a/frontend/src/pages/admin/voting.astro b/frontend/src/pages/admin/voting.astro
index 887cf86..c501fd8 100644
--- a/frontend/src/pages/admin/voting.astro
+++ b/frontend/src/pages/admin/voting.astro
@@ -370,28 +370,16 @@ import { API_BASE } from '../../lib/api';
   }
 
   .default-badge {
-    font-size: 0.6875rem;
+    display: inline-flex;
+    align-items: center;
     padding: 0.25rem 0.625rem;
-    background: var(--color-warning);
-    color: white;
-    border-radius: 4px;
-    font-weight: 600;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--color-success) 20%, transparent);
+    color: var(--color-success);
+    font-size: 0.6875rem;
+    font-weight: 700;
     text-transform: uppercase;
-  }
-
-  .btn-set-default {
-    font-size: 0.75rem;
-    padding: 0.375rem 0.75rem;
-    background: transparent;
-    border: 1px solid var(--color-border);
-    border-radius: 6px;
-    color: var(--color-text-muted);
-    cursor: pointer;
-  }
-
-  .btn-set-default:hover {
-    background: var(--color-bg);
-    color: var(--color-text);
+    letter-spacing: 0.06em;
   }
 
   /* Toggle Switch */
@@ -619,7 +607,7 @@ import { API_BASE } from '../../lib/api';
             </div>
             <div class="method-controls">
               ${m.is_default ? '<span class="default-badge">Default</span>' : `
-                <button class="btn-set-default" data-id="${m.id}">Set Default</button>
+                <button class="ui-btn ui-btn-secondary js-set-default" data-id="${m.id}" type="button">Set Default</button>
               `}
               <label class="toggle-switch">
                 <input type="checkbox" data-id="${m.id}" ${m.is_active ? 'checked' : ''}>
@@ -678,7 +666,7 @@ import { API_BASE } from '../../lib/api';
   }
 
   function setupDefaultHandlers() {
-    document.querySelectorAll('.btn-set-default').forEach(btn => {
+    document.querySelectorAll('.js-set-default').forEach(btn => {
       btn.addEventListener('click', async () => {
         const methodId = btn.dataset.id;
         try {
diff --git a/frontend/src/pages/communities/[slug]/index.astro b/frontend/src/pages/communities/[slug]/index.astro
index ab2787d..7e20a22 100644
--- a/frontend/src/pages/communities/[slug]/index.astro
+++ b/frontend/src/pages/communities/[slug]/index.astro
@@ -279,8 +279,8 @@ const { slug } = Astro.params;
             <textarea id="edit-description" rows="4">${community.description || ''}</textarea>
           </div>
           <div class="modal-actions">
-            <button type="button" class="btn-cancel" id="cancel-edit">Cancel</button>
-            <button type="submit" class="btn-save">Save Changes</button>
+            <button type="button" class="ui-btn ui-btn-secondary" id="cancel-edit">Cancel</button>
+            <button type="submit" class="ui-btn ui-btn-primary">Save Changes</button>
           </div>
         </form>
       </div>
@@ -513,24 +513,6 @@ const { slug } = Astro.params;
     margin-top: 1.5rem;
   }
 
-  .btn-cancel {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
-  .btn-save {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
   .sections {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/frontend/src/pages/communities/[slug]/proposals/new.astro b/frontend/src/pages/communities/[slug]/proposals/new.astro
index 8283df4..b6116d4 100644
--- a/frontend/src/pages/communities/[slug]/proposals/new.astro
+++ b/frontend/src/pages/communities/[slug]/proposals/new.astro
@@ -28,10 +28,10 @@ const { slug } = Astro.params;
               <input type="text" name="option" placeholder="Option 2" required />
             </div>
           </div>
-          <button type="button" id="add-option" class="btn-add">+ Add Option</button>
+          <button type="button" id="add-option" class="ui-btn ui-btn-secondary create-add-btn">+ Add Option</button>
         </div>
         <div id="error" class="error"></div>
-        <button type="submit">Create Proposal</button>
+        <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Proposal</button>
       </form>
     </div>
   </section>
@@ -55,7 +55,7 @@ const { slug } = Astro.params;
     div.className = 'option-input';
     div.innerHTML = `
       <input type="text" name="option" placeholder="Option ${optionCount}" required />
-      <button type="button" class="btn-remove" onclick="this.parentElement.remove()">×</button>
+      <button type="button" class="ui-btn ui-btn-danger create-remove-btn" onclick="this.parentElement.remove()">×</button>
     `;
     optionsContainer?.appendChild(div);
   });
@@ -186,49 +186,22 @@ const { slug } = Astro.params;
     flex: 1;
   }
 
-  .btn-remove {
-    background: var(--color-error);
-    color: var(--color-on-primary);
-    border: none;
-    width: 36px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 1.25rem;
-  }
-
-  .btn-add {
-    background: transparent;
-    border: 1px dashed var(--color-border);
-    color: var(--color-text-muted);
-    padding: 0.5rem 1rem;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 0.875rem;
+  .create-add-btn {
+    border-style: dashed;
     margin-top: 0.5rem;
   }
 
-  .btn-add:hover {
-    border-color: var(--color-primary);
-    color: var(--color-primary);
+  .create-remove-btn {
+    width: 36px;
+    padding: 0;
+    font-size: 1.25rem;
   }
 
-  button[type="submit"] {
+  .create-submit-btn {
     width: 100%;
-    padding: 0.75rem;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    border-radius: 6px;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
     margin-top: 1rem;
   }
 
-  button[type="submit"]:hover {
-    background: var(--color-primary-hover);
-  }
-
   .error {
     color: var(--color-error);
     font-size: 0.875rem;
diff --git a/frontend/src/pages/communities/[slug]/voting-config.astro b/frontend/src/pages/communities/[slug]/voting-config.astro
index b45e315..eae9b15 100644
--- a/frontend/src/pages/communities/[slug]/voting-config.astro
+++ b/frontend/src/pages/communities/[slug]/voting-config.astro
@@ -150,21 +150,6 @@ const { slug } = Astro.params;
     font-size: 0.75rem;
   }
 
-  .btn-default {
-    padding: 0.35rem 0.65rem;
-    background: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: 0.5rem;
-    color: var(--text-secondary);
-    cursor: pointer;
-    font-size: 0.8rem;
-  }
-
-  .btn-default:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
   .loading {
     text-align: center;
     padding: 2rem;
@@ -246,7 +231,7 @@ const { slug } = Astro.params;
             </div>
             <div class="method-controls">
               ${m.is_default ? '<span class="default-badge">Default</span>' : `
-                <button class="btn-default" data-id="${m.voting_method.id}">
+                <button class="ui-btn ui-btn-secondary js-set-default" data-id="${m.voting_method.id}" type="button">
                   Set Default
                 </button>
               `}
@@ -300,7 +285,7 @@ const { slug } = Astro.params;
     });
 
     // Default handlers
-    document.querySelectorAll('.btn-default').forEach(btn => {
+    document.querySelectorAll('.js-set-default').forEach(btn => {
       btn.addEventListener('click', async () => {
         const methodId = btn.dataset.id;
         
diff --git a/frontend/src/pages/notifications.astro b/frontend/src/pages/notifications.astro
index fd6519d..7444d40 100644
--- a/frontend/src/pages/notifications.astro
+++ b/frontend/src/pages/notifications.astro
@@ -47,14 +47,14 @@ import { API_BASE as apiBase } from '../lib/api';
             <span class="notif-time">${new Date(n.created_at).toLocaleString()}</span>
           </div>
           <div class="notif-actions">
-            ${n.link ? `<a href="${n.link}" class="btn-view">View</a>` : ''}
-            ${!n.is_read ? `<button class="btn-mark-read" data-id="${n.id}">Mark Read</button>` : ''}
+            ${n.link ? `<a href="${n.link}" class="ui-btn ui-btn-primary">View</a>` : ''}
+            ${!n.is_read ? `<button class="ui-btn ui-btn-secondary js-mark-read" data-id="${n.id}" type="button">Mark Read</button>` : ''}
           </div>
         </div>
       `).join('');
 
       // Add mark read handlers
-      document.querySelectorAll('.btn-mark-read').forEach(btn => {
+      document.querySelectorAll('.js-mark-read').forEach(btn => {
         btn.addEventListener('click', async (e) => {
           const id = (e.target).dataset.id;
           await markRead(id);
@@ -171,29 +171,6 @@ import { API_BASE as apiBase } from '../lib/api';
     flex-shrink: 0;
   }
 
-  .btn-view, .btn-mark-read {
-    font-size: 0.75rem;
-    padding: 0.375rem 0.75rem;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .btn-view {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-  }
-
-  .btn-mark-read {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text-muted);
-  }
-
-  .btn-mark-read:hover {
-    border-color: var(--color-text-muted);
-  }
-
   .loading, .empty, .error {
     text-align: center;
     padding: 3rem;
diff --git a/frontend/src/pages/proposals/[id].astro b/frontend/src/pages/proposals/[id].astro
index 8938967..d2f8462 100644
--- a/frontend/src/pages/proposals/[id].astro
+++ b/frontend/src/pages/proposals/[id].astro
@@ -555,8 +555,8 @@ const proposalId = id ?? '';
             <textarea id="edit-description" rows="6" required>${data.proposal.description}</textarea>
           </div>
           <div class="modal-actions">
-            <button type="button" class="btn-cancel" id="cancel-edit">Cancel</button>
-            <button type="submit" class="btn-save">Save Changes</button>
+            <button type="button" class="ui-btn ui-btn-secondary" id="cancel-edit">Cancel</button>
+            <button type="submit" class="ui-btn ui-btn-primary">Save Changes</button>
           </div>
         </form>
       </div>
@@ -866,24 +866,6 @@ const proposalId = id ?? '';
     margin-top: 1.5rem;
   }
 
-  .btn-cancel {
-    background: transparent;
-    border: 1px solid var(--color-border);
-    color: var(--color-text);
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
-  .btn-save {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    cursor: pointer;
-  }
-
   .btn-vote:disabled {
     opacity: 0.5;
     cursor: not-allowed;
diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro
index 33d4e1b..7f40a52 100644
--- a/frontend/src/pages/settings.astro
+++ b/frontend/src/pages/settings.astro
@@ -88,14 +88,14 @@ import { API_BASE as apiBase } from '../lib/api';
               <input type="text" id="display_name" value="${user.display_name || ''}" placeholder="Enter display name" />
             </div>
 
-            <button type="submit" class="btn-save">Save Changes</button>
+            <button type="submit" class="ui-btn ui-btn-primary settings-save-btn">Save Changes</button>
           </div>
         </form>
 
         <div class="form-section danger-zone">
           <h2>Account</h2>
           <p class="hint">Logged in as @${user.username}</p>
-          <button id="logout-btn" class="btn-logout">Logout</button>
+          <button id="logout-btn" class="ui-btn ui-btn-danger settings-logout-btn" type="button">Logout</button>
         </div>
       `;
 
@@ -244,45 +244,18 @@ import { API_BASE as apiBase } from '../lib/api';
     margin-top: 0.25rem;
   }
 
-  .btn-save {
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    font-weight: 600;
-    cursor: pointer;
+  .settings-save-btn {
     width: 100%;
   }
 
-  .btn-save:hover {
-    background: var(--color-primary-hover);
-  }
-
-  .btn-save:disabled {
-    opacity: 0.7;
-    cursor: default;
-  }
-
   .danger-zone {
     border-color: var(--color-error);
   }
 
-  .btn-logout {
-    background: var(--color-error);
-    color: var(--color-on-primary);
-    border: none;
-    padding: 0.75rem 1.5rem;
-    border-radius: 8px;
-    font-weight: 600;
-    cursor: pointer;
+  .settings-logout-btn {
     margin-top: 0.5rem;
   }
 
-  .btn-logout:hover {
-    background: var(--color-error-hover);
-  }
-
   .loading, .error {
     text-align: center;
     padding: 2rem;