diff --git a/templates/register.templ b/templates/register.templ
index a9c7800..c98f811 100644
--- a/templates/register.templ
+++ b/templates/register.templ
@@ -9,26 +9,35 @@ templ Register() {
         <title>Register</title>
         <script src="/static/htmx.min.js"></script>
         <script src="/static/toast.js"></script>
+        <script src="/static/theme.js"></script>
         <link href="/static/style.css" rel="stylesheet">
     </head>
     <body class="theme-tokyo-night min-h-screen">
         <div class="container mx-auto px-4 py-8 max-w-md">
             <h1 class="text-3xl font-bold text-center mb-8">Register for Bookhoard</h1>
             
-            <form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML" class="bg-white p-6 rounded-lg shadow-md">
+            <form hx-post="/api/auth/register" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Email</label>
-                    <input type="email" name="email" class="w-full px-3 py-2 border rounded" required>
+                    <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Email</label>
+                    <input type="email" name="email" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Username</label>
-                    <input type="text" name="username" class="w-full px-3 py-2 border rounded" required>
+                    <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Username</label>
+                    <input type="text" name="username" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
                 </div>
                 <div class="mb-4">
-                    <label class="block text-gray-700 mb-2">Password</label>
-                    <input type="password" name="password" class="w-full px-3 py-2 border rounded" required>
+                    <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">First Name</label>
+                    <input type="text" name="first_name" placeholder="Optional" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
                 </div>
-                <button type="submit" class="w-full bg-green-500 text-white py-2 rounded hover:bg-green-600">
+                <div class="mb-4">
+                    <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Last Name</label>
+                    <input type="text" name="last_name" placeholder="Optional" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-sm font-medium mb-1" style="color: var(--text-secondary)">Password</label>
+                    <input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required>
+                </div>
+                <button type="submit" class="btn-primary w-full py-2 rounded">
                     Register
                 </button>
             </form>
