diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 181fb89..5d79d35 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -482,6 +482,52 @@
     text-align: center;
   }
 
+  .ui-auth-page {
+    display: flex;
+    justify-content: center;
+    padding: 4rem 0;
+  }
+
+  .ui-auth-card {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+  }
+
+  .ui-auth-card h1 {
+    margin-bottom: 1.5rem;
+    text-align: center;
+  }
+
+  .ui-auth-card .field {
+    margin-bottom: 1rem;
+  }
+
+  .ui-auth-card label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+  }
+
+  .ui-auth-card .ui-btn {
+    width: 100%;
+    margin-top: 1rem;
+  }
+
+  .ui-auth-error {
+    color: var(--color-error);
+    font-size: 0.875rem;
+    min-height: 1.25rem;
+  }
+
+  .ui-auth-alt {
+    text-align: center;
+    margin-top: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted);
+  }
+
   .ui-btn {
     display: inline-flex;
     align-items: center;
diff --git a/frontend/src/pages/login.astro b/frontend/src/pages/login.astro
index adeb555..688f2fb 100644
--- a/frontend/src/pages/login.astro
+++ b/frontend/src/pages/login.astro
@@ -13,23 +13,23 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
 ---
 
 <Layout title="Login">
-  <section class="auth-page">
-    <div class="auth-card">
+  <section class="ui-auth-page">
+    <div class="ui-auth-card ui-card">
       <h1>Login</h1>
       <form id="login-form">
         <div class="field">
           <label for="username">Username</label>
-          <input type="text" id="username" name="username" required />
+          <input type="text" id="username" name="username" class="ui-input" required />
         </div>
         <div class="field">
           <label for="password">Password</label>
-          <input type="password" id="password" name="password" required />
+          <input type="password" id="password" name="password" class="ui-input" required />
         </div>
-        <div id="error" class="error"></div>
-        <button type="submit">Login</button>
+        <div id="error" class="ui-auth-error"></div>
+        <button type="submit" class="ui-btn ui-btn-primary">Login</button>
       </form>
       {!publicDemoSite ? (
-        <p class="alt-action">
+        <p class="ui-auth-alt">
           Don't have an account? <a href="/register">Register</a>
         </p>
       ) : null}
@@ -74,80 +74,3 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
     }
   });
 </script>
-
-<style>
-  .auth-page {
-    display: flex;
-    justify-content: center;
-    padding: 4rem 0;
-  }
-
-  .auth-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-    width: 100%;
-    max-width: 400px;
-    box-shadow: var(--shadow-sm);
-  }
-
-  h1 {
-    margin-bottom: 1.5rem;
-    text-align: center;
-  }
-
-  .field {
-    margin-bottom: 1rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-
-  input {
-    width: 100%;
-    border-radius: var(--radius-md);
-  }
-
-  button {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: var(--radius-md);
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    margin-top: 1rem;
-    box-shadow: var(--shadow-sm);
-    transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
-  }
-
-  button:hover {
-    background: var(--color-primary-hover);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-
-  button:active {
-    transform: translateY(0);
-    box-shadow: var(--shadow-sm);
-  }
-
-  .error {
-    color: var(--color-error);
-    font-size: 0.875rem;
-    min-height: 1.25rem;
-  }
-
-  .alt-action {
-    text-align: center;
-    margin-top: 1.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-</style>
diff --git a/frontend/src/pages/register.astro b/frontend/src/pages/register.astro
index 8857bfa..cc3a5f8 100644
--- a/frontend/src/pages/register.astro
+++ b/frontend/src/pages/register.astro
@@ -5,30 +5,30 @@ import { API_BASE as apiBase } from '../lib/api';
 ---
 
 <Layout title="Register">
-  <section class="auth-page">
-    <div class="auth-card">
+  <section class="ui-auth-page">
+    <div class="ui-auth-card ui-card">
       <h1>Register</h1>
       <form id="register-form">
         <div class="field">
           <label for="username">Username</label>
-          <input type="text" id="username" name="username" required minlength="3" />
+          <input type="text" id="username" name="username" class="ui-input" required minlength="3" />
         </div>
         <div class="field">
           <label for="email">Email</label>
-          <input type="email" id="email" name="email" required />
+          <input type="email" id="email" name="email" class="ui-input" required />
         </div>
         <div class="field">
           <label for="display_name">Display Name (optional)</label>
-          <input type="text" id="display_name" name="display_name" />
+          <input type="text" id="display_name" name="display_name" class="ui-input" />
         </div>
         <div class="field">
           <label for="password">Password</label>
-          <input type="password" id="password" name="password" required minlength="8" />
+          <input type="password" id="password" name="password" class="ui-input" required minlength="8" />
         </div>
-        <div id="error" class="error"></div>
-        <button type="submit">Create Account</button>
+        <div id="error" class="ui-auth-error"></div>
+        <button type="submit" class="ui-btn ui-btn-primary">Create Account</button>
       </form>
-      <p class="alt-action">
+      <p class="ui-auth-alt">
         Already have an account? <a href="/login">Login</a>
       </p>
     </div>
@@ -73,80 +73,3 @@ import { API_BASE as apiBase } from '../lib/api';
     }
   });
 </script>
-
-<style>
-  .auth-page {
-    display: flex;
-    justify-content: center;
-    padding: 4rem 0;
-  }
-
-  .auth-card {
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-    width: 100%;
-    max-width: 400px;
-    box-shadow: var(--shadow-sm);
-  }
-
-  h1 {
-    margin-bottom: 1.5rem;
-    text-align: center;
-  }
-
-  .field {
-    margin-bottom: 1rem;
-  }
-
-  label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-
-  input {
-    width: 100%;
-    border-radius: var(--radius-md);
-  }
-
-  button {
-    width: 100%;
-    padding: 0.75rem;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: var(--radius-md);
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    margin-top: 1rem;
-    box-shadow: var(--shadow-sm);
-    transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
-  }
-
-  button:hover {
-    background: var(--color-primary-hover);
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-md);
-  }
-
-  button:active {
-    transform: translateY(0);
-    box-shadow: var(--shadow-sm);
-  }
-
-  .error {
-    color: var(--color-error);
-    font-size: 0.875rem;
-    min-height: 1.25rem;
-  }
-
-  .alt-action {
-    text-align: center;
-    margin-top: 1.5rem;
-    font-size: 0.875rem;
-    color: var(--color-text-muted);
-  }
-</style>