diff --git a/apps/client/app/app.css b/apps/client/app/app.css
index 42e7b74..7458c24 100644
--- a/apps/client/app/app.css
+++ b/apps/client/app/app.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "dither-plugin";
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/apps/client/app/components/auth-layout.tsx b/apps/client/app/components/auth-layout.tsx
new file mode 100644
index 0000000..05e6c45
--- /dev/null
+++ b/apps/client/app/components/auth-layout.tsx
@@ -0,0 +1,34 @@
+import { Mountain } from "lucide-react";
+import type { ReactNode } from "react";
+
+type AuthLayoutProps = {
+	title: string;
+	description: string;
+	children: ReactNode;
+};
+
+export function AuthLayout({ title, description, children }: AuthLayoutProps) {
+	return (
+		<div className="flex min-h-screen">
+			<div className="flex flex-1 items-center justify-center bg-background p-8">
+				<div className="w-full max-w-md space-y-8">
+					<div className="flex items-center gap-3">
+						<Mountain className="size-5 text-strong-accent" />
+						<span className="text-lg font-semibold">Ironmount</span>
+					</div>
+
+					<div className="space-y-2">
+						<h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+						<p className="text-sm text-muted-foreground">{description}</p>
+					</div>
+
+					{children}
+				</div>
+			</div>
+			<div
+				className="hidden lg:block lg:flex-1 dither-xl bg-cover bg-center"
+				style={{ backgroundImage: "url(/background.jpg)" }}
+			/>
+		</div>
+	);
+}
diff --git a/apps/client/app/routes/login.tsx b/apps/client/app/routes/login.tsx
index 6529db0..4e5cd42 100644
--- a/apps/client/app/routes/login.tsx
+++ b/apps/client/app/routes/login.tsx
@@ -5,9 +5,8 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { loginMutation } from "~/api-client/@tanstack/react-query.gen";
-import { GridBackground } from "~/components/grid-background";
+import { AuthLayout } from "~/components/auth-layout";
 import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 
@@ -50,54 +49,49 @@ export default function LoginPage() {
 	};
 
 	return (
-		<GridBackground className="flex items-center justify-center p-4">
-			<Card className="w-full max-w-md">
-				<CardHeader>
-					<CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
-					<CardDescription>Sign in to your account</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Form {...form}>
-						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-							<FormField
-								control={form.control}
-								name="username"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Username</FormLabel>
-										<FormControl>
-											<Input
-												{...field}
-												type="text"
-												placeholder="Enter your username"
-												disabled={login.isPending}
-												autoFocus
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<FormField
-								control={form.control}
-								name="password"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Password</FormLabel>
-										<FormControl>
-											<Input {...field} type="password" placeholder="Enter your password" disabled={login.isPending} />
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<Button type="submit" className="w-full" loading={login.isPending}>
-								Sign In
-							</Button>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-		</GridBackground>
+		<AuthLayout title="Login to your account" description="Enter your credentials below to login to your account">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+					<FormField
+						control={form.control}
+						name="username"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Username</FormLabel>
+								<FormControl>
+									<Input {...field} type="text" placeholder="admin" disabled={login.isPending} autoFocus />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<div className="flex items-center justify-between">
+									<FormLabel>Password</FormLabel>
+									<button
+										type="button"
+										className="text-xs text-muted-foreground hover:underline"
+										onClick={() => toast.info("Password reset not implemented")}
+									>
+										Forgot your password?
+									</button>
+								</div>
+								<FormControl>
+									<Input {...field} type="password" disabled={login.isPending} />
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit" className="w-full" loading={login.isPending}>
+						Login
+					</Button>
+				</form>
+			</Form>
+		</AuthLayout>
 	);
 }
diff --git a/apps/client/app/routes/onboarding.tsx b/apps/client/app/routes/onboarding.tsx
index 8b731c8..32cbd6d 100644
--- a/apps/client/app/routes/onboarding.tsx
+++ b/apps/client/app/routes/onboarding.tsx
@@ -5,9 +5,8 @@ import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
 import { registerMutation } from "~/api-client/@tanstack/react-query.gen";
-import { GridBackground } from "~/components/grid-background";
+import { AuthLayout } from "~/components/auth-layout";
 import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
 import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
 import { Input } from "~/components/ui/input";
 
@@ -61,73 +60,65 @@ export default function OnboardingPage() {
 	};
 
 	return (
-		<GridBackground className="flex items-center justify-center p-4">
-			<Card className="w-full max-w-md">
-				<CardHeader>
-					<CardTitle className="text-2xl font-bold">Welcome to Ironmount</CardTitle>
-					<CardDescription>Create the admin user to get started</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Form {...form}>
-						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
-							<FormField
-								control={form.control}
-								name="username"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Username</FormLabel>
-										<FormControl>
-											<Input {...field} type="text" placeholder="admin" disabled={registerUser.isPending} autoFocus />
-										</FormControl>
-										<FormDescription>Choose a username for the admin account</FormDescription>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<FormField
-								control={form.control}
-								name="password"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Password</FormLabel>
-										<FormControl>
-											<Input
-												{...field}
-												type="password"
-												placeholder="Enter a secure password"
-												disabled={registerUser.isPending}
-											/>
-										</FormControl>
-										<FormDescription>Password must be at least 8 characters long.</FormDescription>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<FormField
-								control={form.control}
-								name="confirmPassword"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Confirm Password</FormLabel>
-										<FormControl>
-											<Input
-												{...field}
-												type="password"
-												placeholder="Re-enter your password"
-												disabled={registerUser.isPending}
-											/>
-										</FormControl>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-							<Button type="submit" className="w-full" loading={registerUser.isPending}>
-								Create Admin User
-							</Button>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-		</GridBackground>
+		<AuthLayout title="Welcome to Ironmount" description="Create the admin user to get started">
+			<Form {...form}>
+				<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+					<FormField
+						control={form.control}
+						name="username"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Username</FormLabel>
+								<FormControl>
+									<Input {...field} type="text" placeholder="admin" disabled={registerUser.isPending} autoFocus />
+								</FormControl>
+								<FormDescription>Choose a username for the admin account</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="password"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Password</FormLabel>
+								<FormControl>
+									<Input
+										{...field}
+										type="password"
+										placeholder="Enter a secure password"
+										disabled={registerUser.isPending}
+									/>
+								</FormControl>
+								<FormDescription>Password must be at least 8 characters long.</FormDescription>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<FormField
+						control={form.control}
+						name="confirmPassword"
+						render={({ field }) => (
+							<FormItem>
+								<FormLabel>Confirm Password</FormLabel>
+								<FormControl>
+									<Input
+										{...field}
+										type="password"
+										placeholder="Re-enter your password"
+										disabled={registerUser.isPending}
+									/>
+								</FormControl>
+								<FormMessage />
+							</FormItem>
+						)}
+					/>
+					<Button type="submit" className="w-full" loading={registerUser.isPending}>
+						Create Admin User
+					</Button>
+				</form>
+			</Form>
+		</AuthLayout>
 	);
 }
diff --git a/apps/client/package.json b/apps/client/package.json
index 120539e..c8bd2ae 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -30,6 +30,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
+		"dither-plugin": "^1.1.1",
 		"isbot": "^5.1.31",
 		"lucide-react": "^0.546.0",
 		"next-themes": "^0.4.6",
diff --git a/apps/client/public/background.jpg b/apps/client/public/background.jpg
new file mode 100644
index 0000000..34c7f67
Binary files /dev/null and b/apps/client/public/background.jpg differ
diff --git a/bun.lock b/bun.lock
index 16e647d..5ec6fe8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -32,6 +32,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
+        "dither-plugin": "^1.1.1",
         "isbot": "^5.1.31",
         "lucide-react": "^0.546.0",
         "next-themes": "^0.4.6",
@@ -720,6 +721,8 @@
 
     "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
 
+    "dither-plugin": ["dither-plugin@1.1.1", "", {}, "sha512-PsgAcSoNVKkwh+Q/OopRn/2qb9HW1LRyGqT1bQe8iooYvVY1FIIqePFN9JkEIVK9rkfZdj7nXn9EUB4B7mNh6g=="],
+
     "docker-modem": ["docker-modem@5.0.6", "", { "dependencies": { "debug": "^4.1.1", "readable-stream": "^3.5.0", "split-ca": "^1.0.1", "ssh2": "^1.15.0" } }, "sha512-ens7BiayssQz/uAxGzH8zGXCtiV24rRWXdjNha5V4zSOcxmAZsfGVm/PPFbwQdqEkDnhG+SyR9E3zSHUbOKXBQ=="],
 
     "dockerode": ["dockerode@4.0.9", "", { "dependencies": { "@balena/dockerignore": "^1.0.2", "@grpc/grpc-js": "^1.11.1", "@grpc/proto-loader": "^0.7.13", "docker-modem": "^5.0.6", "protobufjs": "^7.3.2", "tar-fs": "^2.1.4", "uuid": "^10.0.0" } }, "sha512-iND4mcOWhPaCNh54WmK/KoSb35AFqPAUWFMffTQcp52uQt36b5uNwEJTSXntJZBbeGad72Crbi/hvDIv6us/6Q=="],