diff --git a/frontend/src/pages/admin/roles.astro b/frontend/src/pages/admin/roles.astro
index 38098ca..e64b1f1 100644
--- a/frontend/src/pages/admin/roles.astro
+++ b/frontend/src/pages/admin/roles.astro
@@ -10,9 +10,11 @@ import { API_BASE } from '../../lib/api';
     <AdminNav currentPage="/admin/roles" />
 
     <main class="admin-content">
-      <header class="page-header">
-        <h1>Role Management</h1>
-        <p class="subtitle">Manage platform roles and permissions</p>
+      <header class="ui-page-header">
+        <div class="ui-page-title">
+          <h1>Role Management</h1>
+          <p class="ui-subtitle">Manage platform roles and permissions</p>
+        </div>
       </header>
 
       <section class="roles-section">
@@ -38,51 +40,12 @@ import { API_BASE } from '../../lib/api';
     min-height: calc(100vh - 60px);
   }
 
-  .admin-nav {
-    width: 200px;
-    background: var(--bg-secondary);
-    padding: 1.5rem;
-    border-right: 1px solid var(--border-color);
-  }
-
-  .admin-nav a {
-    display: block;
-    padding: 0.75rem 1rem;
-    color: var(--text-secondary);
-    text-decoration: none;
-    border-radius: 0.5rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .admin-nav a:hover {
-    background: var(--bg-hover);
-    color: var(--text-primary);
-  }
-
-  .admin-nav a.active {
-    background: var(--accent-color);
-    color: white;
-  }
-
   .admin-content {
     flex: 1;
     padding: 2rem;
     max-width: 1000px;
   }
 
-  .page-header {
-    margin-bottom: 2rem;
-  }
-
-  .page-header h1 {
-    margin: 0;
-  }
-
-  .subtitle {
-    color: var(--text-secondary);
-    margin-top: 0.5rem;
-  }
-
   .roles-section, .permissions-section {
     margin-bottom: 3rem;
   }
@@ -98,10 +61,6 @@ import { API_BASE } from '../../lib/api';
   }
 
   .role-card {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.75rem;
-    padding: 1.25rem;
   }
 
   .role-header {
@@ -132,16 +91,19 @@ import { API_BASE } from '../../lib/api';
     font-size: 0.7rem;
     padding: 0.15rem 0.5rem;
     border-radius: 1rem;
-    background: #6c757d;
-    color: white;
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
   }
 
   .role-badge.system {
-    background: var(--accent-color);
+    background: var(--color-primary);
+    border-color: transparent;
+    color: var(--color-primary-contrast);
   }
 
   .role-description {
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
     font-size: 0.9rem;
     margin: 0 0 1rem 0;
   }
@@ -155,10 +117,10 @@ import { API_BASE } from '../../lib/api';
   .perm-tag {
     font-size: 0.75rem;
     padding: 0.25rem 0.5rem;
-    background: var(--bg-primary);
-    border: 1px solid var(--border-color);
+    background: var(--color-bg);
+    border: 1px solid var(--color-border);
     border-radius: 0.25rem;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
   }
 
   .permissions-grid {
@@ -168,17 +130,13 @@ import { API_BASE } from '../../lib/api';
   }
 
   .permission-category {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 0.75rem;
-    padding: 1rem;
   }
 
   .permission-category h4 {
     margin: 0 0 0.75rem 0;
     font-size: 0.9rem;
     text-transform: capitalize;
-    color: var(--accent-color);
+    color: var(--color-primary);
   }
 
   .permission-list {
@@ -193,13 +151,13 @@ import { API_BASE } from '../../lib/api';
 
   .permission-item code {
     font-size: 0.75rem;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
   }
 
   .loading {
     text-align: center;
     padding: 2rem;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
   }
 </style>
 
@@ -235,7 +193,7 @@ import { API_BASE } from '../../lib/api';
       const roles = await res.json();
 
       container.innerHTML = roles.map(r => `
-        <div class="role-card">
+        <div class="role-card ui-card ui-card-soft ui-card-pad-md">
           <div class="role-header">
             <div class="role-name">
               ${r.color ? `<span class="role-color" style="background: ${r.color}"></span>` : ''}
@@ -243,7 +201,7 @@ import { API_BASE } from '../../lib/api';
               ${r.is_system ? '<span class="role-badge system">System</span>' : ''}
               ${r.is_default ? '<span class="role-badge">Default</span>' : ''}
             </div>
-            <span style="color: var(--text-secondary); font-size: 0.85rem">Priority: ${r.priority}</span>
+            <span style="color: var(--color-text-muted); font-size: 0.85rem">Priority: ${r.priority}</span>
           </div>
           <p class="role-description">${r.description || 'No description'}</p>
           <div class="role-permissions">
@@ -284,7 +242,7 @@ import { API_BASE } from '../../lib/api';
       });
 
       container.innerHTML = Object.entries(byCategory).map(([cat, perms]) => `
-        <div class="permission-category">
+        <div class="permission-category ui-card ui-card-soft ui-card-pad-md">
           <h4>${cat}</h4>
           <div class="permission-list">
             ${perms.map(p => `