diff --git a/frontend/src/pages/admin/invitations.astro b/frontend/src/pages/admin/invitations.astro
index dfb9dd9..83afbe5 100644
--- a/frontend/src/pages/admin/invitations.astro
+++ b/frontend/src/pages/admin/invitations.astro
@@ -9,16 +9,18 @@ import { API_BASE as apiBase } from '../../lib/api';
   <div class="admin-container">
     <AdminNav currentPage="/admin/invitations" />
 
-    <main class="admin-main">
-      <header class="admin-header">
-        <h1>Invitation Management</h1>
-        <p>Create and manage invitation codes for user registration</p>
+    <main class="admin-content">
+      <header class="ui-page-header">
+        <div class="ui-page-title">
+          <h1>Invitation Management</h1>
+          <p class="ui-subtitle">Create and manage invitation codes for user registration</p>
+        </div>
       </header>
 
       <section class="create-section">
         <h2>Create Invitation</h2>
-        <form id="create-form" class="create-form">
-          <div class="form-row">
+        <form id="create-form" class="create-form ui-form ui-card ui-card-soft ui-card-pad-md">
+          <div class="form-grid">
             <div class="form-group">
               <label for="email">Email (optional)</label>
               <input type="email" id="email" placeholder="Restrict to specific email" />
@@ -32,7 +34,9 @@ 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="ui-btn ui-btn-primary">Create Invitation</button>
+          <div class="form-actions">
+            <button type="submit" class="ui-btn ui-btn-primary">Create Invitation</button>
+          </div>
         </form>
       </section>
 
@@ -140,7 +144,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       }
 
       container.innerHTML = data.map(inv => `
-        <div class="invitation-item ${inv.is_active ? '' : 'inactive'}" data-id="${inv.id}">
+        <div class="invitation-item ui-card ui-card-soft ui-card-pad-md ${inv.is_active ? '' : 'inactive'}" data-id="${inv.id}">
           <div class="inv-main">
             <code class="inv-code">${inv.code}</code>
             <div class="inv-meta">
@@ -214,26 +218,12 @@ import { API_BASE as apiBase } from '../../lib/api';
     min-height: calc(100vh - 60px);
   }
 
-  .admin-main {
+  .admin-content {
     flex: 1;
     padding: 2rem;
     max-width: 1000px;
   }
 
-  .admin-header {
-    margin-bottom: 2rem;
-  }
-
-  .admin-header h1 {
-    margin: 0 0 0.5rem;
-    font-size: 1.75rem;
-  }
-
-  .admin-header p {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
   .create-section, .list-section {
     margin-bottom: 2rem;
   }
@@ -263,28 +253,17 @@ import { API_BASE as apiBase } from '../../lib/api';
     cursor: pointer;
   }
 
-  .create-form {
-    background: var(--color-surface);
-    padding: 1.5rem;
-    border-radius: 12px;
-    border: 1px solid var(--color-border);
-  }
-
-  .form-row {
-    display: grid;
+  .create-form .form-grid {
     grid-template-columns: 2fr 1fr 1fr;
     gap: 1rem;
     margin-bottom: 1rem;
   }
 
-  .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
+  .create-form .form-group label {
     font-size: 0.875rem;
-    font-weight: 500;
   }
 
-  .form-group input {
+  .create-form .form-group input {
     width: 100%;
     padding: 0.75rem;
     border: 1px solid var(--color-border);
@@ -304,10 +283,6 @@ import { API_BASE as apiBase } from '../../lib/api';
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1.5rem;
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: 12px;
   }
 
   .invitation-item.inactive {
@@ -376,7 +351,7 @@ import { API_BASE as apiBase } from '../../lib/api';
       flex-direction: column;
     }
 
-    .form-row {
+    .create-form .form-grid {
       grid-template-columns: 1fr;
     }