diff --git a/backend/templates/auth_signup.templ b/backend/templates/auth_signup.templ
index 05e8aec..c53ed17 100644
--- a/backend/templates/auth_signup.templ
+++ b/backend/templates/auth_signup.templ
@@ -2,25 +2,26 @@ package templates
 
 import "backend/internal/web/ui"
 
-// SignupPage renders the full /signup page wrapped in the base Layout.
+// SignupPage renders the full /signup page wrapped in AuthLayout.
 // It delegates the form section to SignupFormFragment so HTMX can swap just the
 // form on validation errors without re-rendering the surrounding shell.
 templ SignupPage(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
-	@Layout("Sign up", nil, csrfToken) {
-		<div class="flex min-h-[60vh] items-start justify-center pt-16">
-			@ui.Card(ui.CardProps{Body: signupCardBody(form, errs, csrfToken, providers)})
+	@AuthLayout("Create your account", csrfToken) {
+		<div class="auth-card-topbar"></div>
+		<div class="brand-header">
+			<img class="brand-logo" src="/static/logo_dark.png" alt="Xtablo"/>
+		</div>
+		<div class="title-group">
+			<h1>Create your account</h1>
+		</div>
+		<div class="auth-body">
+			@GoogleButton(providers.Google.StartURL, providers.Google.Configured)
+			@AuthDivider()
+			@SignupFormFragment(form, errs, csrfToken)
 		</div>
 	}
 }
 
-templ signupCardBody(form SignupForm, errs SignupErrors, csrfToken string, providers AuthProviderButtons) {
-	<div class="w-full max-w-sm px-6 py-8">
-		<h1 class="mb-6 text-2xl font-semibold">Create your account</h1>
-		@AuthProviderButtonsBlock(providers)
-		@SignupFormFragment(form, errs, csrfToken)
-	</div>
-}
-
 // SignupFormFragment is the bare form used for HTMX swaps.
 // hx-post targets this component itself so the form can be replaced inline
 // on validation failure (D-19, D-25).
@@ -33,37 +34,37 @@ templ SignupFormFragment(form SignupForm, errs SignupErrors, csrfToken string) {
 		hx-post="/signup"
 		hx-target="#signup-form"
 		hx-swap="outerHTML"
-		class="space-y-5"
+		class="login-form"
 	>
 		@ui.CSRFField(csrfToken)
 		@GeneralError(errs.General)
-		<div>
-			<label for="email" class="block text-sm font-medium text-slate-700">Email address</label>
-			<input
-				id="email"
-				type="email"
-				name="email"
-				value={ form.Email }
-				required
-				autocomplete="email"
-				class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
-				placeholder="you@example.com"
-			/>
-			@FieldError(errs.Email)
-		</div>
-		<div>
-			<label for="password" class="block text-sm font-medium text-slate-700">Password</label>
-			<input
-				id="password"
-				type="password"
-				name="password"
-				required
-				autocomplete="new-password"
-				class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
-				placeholder="12 characters minimum"
-			/>
-			@FieldError(errs.Password)
-		</div>
+		@ui.FormField(ui.FormFieldProps{
+			Label: "Email address",
+			For:   "email",
+			Field: ui.Input(ui.InputProps{
+				ID:          "email",
+				Name:        "email",
+				Type:        "email",
+				Placeholder: "you@example.com",
+				Value:       form.Email,
+				Required:    true,
+				Attrs:       templ.Attributes{"autocomplete": "email"},
+			}),
+			Error: errs.Email,
+		})
+		@ui.FormField(ui.FormFieldProps{
+			Label: "Password",
+			For:   "password",
+			Field: ui.Input(ui.InputProps{
+				ID:          "password",
+				Name:        "password",
+				Type:        "password",
+				Placeholder: "12 characters minimum",
+				Required:    true,
+				Attrs:       templ.Attributes{"autocomplete": "new-password"},
+			}),
+			Error: errs.Password,
+		})
 		@ui.Button(ui.ButtonProps{
 			Label:   "Create account",
 			Variant: ui.ButtonVariantDefault,
@@ -71,5 +72,9 @@ templ SignupFormFragment(form SignupForm, errs SignupErrors, csrfToken string) {
 			Size:    ui.SizeMD,
 			Type:    "submit",
 		})
+		<p class="signup-copy">
+			Already have an account?
+			<a class="signup-link" href="/login">Sign in</a>
+		</p>
 	</form>
 }