diff --git a/frontend/src/pages/settings.astro b/frontend/src/pages/settings.astro
index 7f40a52..0069b2e 100644
--- a/frontend/src/pages/settings.astro
+++ b/frontend/src/pages/settings.astro
@@ -51,7 +51,7 @@ import { API_BASE as apiBase } from '../lib/api';
         .join('');
 
       container.innerHTML = `
-        <div class="form-section">
+        <div class="form-section ui-card ui-card-pad-lg">
           <h2>Appearance</h2>
           
           <div class="form-group">
@@ -74,7 +74,7 @@ import { API_BASE as apiBase } from '../lib/api';
         </div>
 
         <form id="profile-form" class="settings-form">
-          <div class="form-section">
+          <div class="form-section ui-card ui-card-pad-lg">
             <h2>Profile</h2>
             
             <div class="form-group">
@@ -92,7 +92,7 @@ import { API_BASE as apiBase } from '../lib/api';
           </div>
         </form>
 
-        <div class="form-section danger-zone">
+        <div class="form-section ui-card ui-card-pad-lg danger-zone">
           <h2>Account</h2>
           <p class="hint">Logged in as @${user.username}</p>
           <button id="logout-btn" class="ui-btn ui-btn-danger settings-logout-btn" type="button">Logout</button>
@@ -195,10 +195,7 @@ import { API_BASE as apiBase } from '../lib/api';
   }
 
   .form-section {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
     border-radius: 12px;
-    padding: 1.5rem;
     margin-bottom: 1.5rem;
   }