diff --git a/app/components/forms.tsx b/app/components/forms.tsx
index 326fd2ba..fc386aa4 100644
--- a/app/components/forms.tsx
+++ b/app/components/forms.tsx
@@ -6,6 +6,7 @@ import {
 } from 'input-otp'
 import React, { useId } from 'react'
 import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
+import { Icon } from './ui/icon.tsx'
 import {
 	InputOTP,
 	InputOTPGroup,
@@ -30,7 +31,7 @@ export function ErrorList({
 	return (
 		<ul id={id} className="flex flex-col gap-1">
 			{errorsToRender.map((e) => (
-				<li key={e} className="text-[10px] text-foreground-destructive">
+				<li key={e} className="text-xs font-medium text-foreground-destructive">
 					{e}
 				</li>
 			))}
@@ -61,7 +62,7 @@ export function Field({
 				aria-describedby={errorId}
 				{...inputProps}
 			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[24px] px-4 pb-2 pt-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -85,14 +86,22 @@ export function SelectField({
 	return (
 		<div className={className}>
 			<Label htmlFor={id} {...labelProps} />
-			<select
-				id={id}
-				aria-invalid={errorId ? true : undefined}
-				aria-describedby={errorId}
-				className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid"
-				{...selectProps}
-			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="relative">
+				<select
+					id={id}
+					aria-invalid={errorId ? true : undefined}
+					aria-describedby={errorId}
+					className="flex h-12 w-full appearance-none rounded-full border border-input bg-card px-4 pr-10 text-sm font-medium text-foreground shadow-sm transition-colors placeholder:text-muted-secondary-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-[invalid]:border-input-invalid aria-[invalid]:text-foreground-destructive aria-[invalid]:focus-visible:ring-foreground-destructive"
+					{...selectProps}
+				/>
+				<Icon
+					name="chevron-down"
+					size="sm"
+					aria-hidden="true"
+					className="pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-muted-secondary-foreground"
+				/>
+			</div>
+			<div className="min-h-[24px] px-4 pb-2 pt-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -141,7 +150,7 @@ export function OTPField({
 					<InputOTPSlot index={5} />
 				</InputOTPGroup>
 			</InputOTP>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[24px] px-4 pb-2 pt-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -171,7 +180,7 @@ export function TextareaField({
 				aria-describedby={errorId}
 				{...textareaProps}
 			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
+			<div className="min-h-[24px] px-4 pb-2 pt-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
@@ -234,7 +243,7 @@ export function CheckboxField({
 					className="self-center text-body-xs text-muted-foreground"
 				/>
 			</div>
-			<div className="px-4 pb-3 pt-1">
+			<div className="px-4 pb-2 pt-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
 			</div>
 		</div>
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 2d040414..ff3a0856 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -6,31 +6,31 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50',
+	'inline-flex items-center justify-center gap-2 rounded-full text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+				default: 'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
 				destructive:
-					'bg-destructive text-destructive-foreground hover:bg-destructive/80',
+					'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
 				outline:
-					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+					'border border-border bg-card text-foreground hover:bg-muted',
 				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
+					'border border-border bg-transparent text-foreground hover:bg-muted',
+				ghost: 'text-foreground hover:bg-muted',
 				link: 'text-primary underline-offset-4 hover:underline',
 			},
 			size: {
-				default: 'h-10 px-4 py-2',
-				wide: 'px-24 py-5',
-				sm: 'h-9 rounded-md px-3',
-				lg: 'h-11 rounded-md px-8',
-				pill: 'px-12 py-3 leading-3',
-				icon: 'h-10 w-10',
+				default: 'h-12 px-6',
+				wide: 'h-12 px-14',
+				sm: 'h-10 px-4 text-xs',
+				lg: 'h-14 px-8 text-base',
+				pill: 'h-10 px-8 text-sm',
+				icon: 'h-10 w-10 p-0',
 			},
 			icon: {
-				true: 'flex h-10 w-10 items-center justify-center rounded-full p-2',
-				false: 'px-6 py-2',
+				true: 'h-10 w-10 rounded-full p-2',
+				false: '',
 			},
 		},
 		defaultVariants: {
@@ -62,13 +62,13 @@ Button.displayName = 'Button'
 
 export function ButtonLink({
 	variant,
-
+	size,
 	icon,
 	className,
 	...props
 }: LinkProps & VariantProps<typeof buttonVariants>) {
 	return (
-		<Link className={buttonVariants({ variant, icon, className })} {...props} />
+		<Link className={buttonVariants({ variant, size, icon, className })} {...props} />
 	)
 }
 
diff --git a/app/components/ui/input-otp.tsx b/app/components/ui/input-otp.tsx
index ff7a2d7b..374c83e1 100644
--- a/app/components/ui/input-otp.tsx
+++ b/app/components/ui/input-otp.tsx
@@ -23,7 +23,7 @@ const InputOTPGroup = React.forwardRef<
 	React.ElementRef<'div'>,
 	React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('flex items-center', className)} {...props} />
+	<div ref={ref} className={cn('flex items-center gap-2', className)} {...props} />
 ))
 InputOTPGroup.displayName = 'InputOTPGroup'
 
@@ -40,8 +40,8 @@ const InputOTPSlot = React.forwardRef<
 		<div
 			ref={ref}
 			className={cn(
-				'relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-base transition-all first:rounded-l-md first:border-l last:rounded-r-md md:text-sm',
-				isActive && 'z-10 ring-2 ring-ring ring-offset-background',
+				'relative flex h-12 w-12 items-center justify-center rounded-2xl border border-input bg-card text-base font-medium text-foreground shadow-sm transition-colors',
+				isActive && 'z-10 border-ring ring-2 ring-ring',
 				className,
 			)}
 			{...props}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index 1bbc64d9..23d02d9d 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex h-12 w-full rounded-full border border-input bg-card px-4 text-sm font-medium text-foreground shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-semibold placeholder:text-muted-secondary-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-[invalid]:border-input-invalid aria-[invalid]:text-foreground-destructive aria-[invalid]:focus-visible:ring-foreground-destructive',
 					className,
 				)}
 				ref={ref}
diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
index ec453ee2..1112ef7a 100644
--- a/app/components/ui/label.tsx
+++ b/app/components/ui/label.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 const labelVariants = cva(
-	'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+	'text-xs font-semibold uppercase leading-none tracking-[0.08em] text-muted-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 )
 
 const Label = React.forwardRef<
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
index 2e8ea5e0..976770d7 100644
--- a/app/components/ui/textarea.tsx
+++ b/app/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+					'flex min-h-[120px] w-full rounded-3xl border border-input bg-card px-4 py-3 text-sm font-medium text-foreground shadow-sm transition-colors placeholder:text-muted-secondary-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-[invalid]:border-input-invalid aria-[invalid]:text-foreground-destructive aria-[invalid]:focus-visible:ring-foreground-destructive',
 					className,
 				)}
 				ref={ref}
diff --git a/app/routes/_app+/_auth+/forgot-password.tsx b/app/routes/_app+/_auth+/forgot-password.tsx
index 0d70983a..bccaa283 100644
--- a/app/routes/_app+/_auth+/forgot-password.tsx
+++ b/app/routes/_app+/_auth+/forgot-password.tsx
@@ -1,4 +1,9 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import {
+	getFormProps,
+	getInputProps,
+	getSelectProps,
+	useForm,
+} from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
 	json,
@@ -10,38 +15,64 @@ import { Link, useFetcher } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { sendText } from '#app/utils/text.server.js'
-import {
-	PhoneNumberSchema,
-	UsernameSchema,
-} from '#app/utils/user-validation.ts'
+import { PhoneNumberSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.server.ts'
 
 const ForgotPasswordSchema = z.object({
-	usernameOrPhoneNumber: z.union([PhoneNumberSchema, UsernameSchema]),
+	countryCode: z.string().min(1, 'Country code is required'),
+	phoneNumber: PhoneNumberSchema,
 })
 
+const countryCodes = [
+	{ label: 'United States (+1)', value: '+1' },
+	{ label: 'United Kingdom (+44)', value: '+44' },
+	{ label: 'Czech Republic (+420)', value: '+420' },
+	{ label: 'Canada (+1)', value: '+1' },
+	{ label: 'Australia (+61)', value: '+61' },
+]
+
+function getIdentifier({
+	countryCode,
+	phoneNumber,
+}: {
+	countryCode: string
+	phoneNumber: string
+}) {
+	const raw = phoneNumber.trim()
+	if (/[a-z]/i.test(raw)) {
+		return raw
+	}
+	// Extract digits only and prepend country code
+	const digitsOnly = raw.replace(/\D/g, '')
+	if (raw.startsWith('+')) {
+		return `+${digitsOnly}`
+	}
+	return `${countryCode}${digitsOnly}`.replace(/\s+/g, '')
+}
+
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
 	const submission = await parseWithZod(formData, {
 		schema: ForgotPasswordSchema.superRefine(async (data, ctx) => {
+			const identifier = getIdentifier({ countryCode: data.countryCode, phoneNumber: data.phoneNumber })
 			const user = await prisma.user.findFirst({
 				where: {
 					OR: [
-						{ phoneNumber: data.usernameOrPhoneNumber },
-						{ username: data.usernameOrPhoneNumber },
+						{ phoneNumber: identifier },
+						{ username: identifier },
 					],
 				},
 				select: { id: true },
 			})
 			if (!user) {
 				ctx.addIssue({
-					path: ['usernameOrPhoneNumber'],
+					path: ['phoneNumber'],
 					code: z.ZodIssueCode.custom,
 					message: 'No user exists with this username or phone number',
 				})
@@ -56,14 +87,11 @@ export async function action({ request }: ActionFunctionArgs) {
 			{ status: submission.status === 'error' ? 400 : 200 },
 		)
 	}
-	const { usernameOrPhoneNumber } = submission.value
+	const identifier = getIdentifier(submission.value)
 
 	const user = await prisma.user.findFirstOrThrow({
 		where: {
-			OR: [
-				{ phoneNumber: usernameOrPhoneNumber },
-				{ username: usernameOrPhoneNumber },
-			],
+			OR: [{ phoneNumber: identifier }, { username: identifier }],
 		},
 		select: { phoneNumber: true, username: true },
 	})
@@ -72,7 +100,7 @@ export async function action({ request }: ActionFunctionArgs) {
 		period: 10 * 60,
 		request,
 		type: 'reset-password',
-		target: usernameOrPhoneNumber,
+		target: identifier,
 	})
 
 	const response = await sendText({
@@ -100,6 +128,7 @@ export default function ForgotPasswordRoute() {
 	const [form, fields] = useForm({
 		id: 'forgot-password-form',
 		constraint: getZodConstraint(ForgotPasswordSchema),
+		defaultValue: { countryCode: countryCodes[0]?.value ?? '+1' },
 		lastResult: forgotPassword.data?.result,
 		onValidate({ formData }) {
 			return parseWithZod(formData, { schema: ForgotPasswordSchema })
@@ -108,58 +137,65 @@ export default function ForgotPasswordRoute() {
 	})
 
 	return (
-		<div className="container pb-32 pt-20">
-			<div className="flex flex-col justify-center">
-				<div className="text-center">
-					<h1 className="text-h1">Forgot Password</h1>
-					<p className="mt-3 text-body-md text-muted-foreground">
-						No worries, we'll send you reset instructions.
-					</p>
-				</div>
-				<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
-					<forgotPassword.Form method="POST" {...getFormProps(form)}>
-						<HoneypotInputs />
-						<div>
-							<Field
-								labelProps={{
-									htmlFor: fields.usernameOrPhoneNumber.id,
-									children: 'Username or Phone Number',
-								}}
-								inputProps={{
-									autoFocus: true,
-									...getInputProps(fields.usernameOrPhoneNumber, {
-										type: 'text',
-									}),
-								}}
-								errors={fields.usernameOrPhoneNumber.errors}
-							/>
-						</div>
-						<ErrorList errors={form.errors} id={form.errorId} />
-
-						<div className="mt-6">
-							<StatusButton
-								className="w-full"
-								status={
-									forgotPassword.state === 'submitting'
-										? 'pending'
-										: (form.status ?? 'idle')
-								}
-								type="submit"
-								disabled={forgotPassword.state !== 'idle'}
-							>
-								Recover password
-							</StatusButton>
-						</div>
-					</forgotPassword.Form>
-					<Link
-						to="/login"
-						className="mt-11 text-center text-body-sm font-bold"
-					>
-						Back to Login
-					</Link>
+	<div className="container flex flex-col items-center justify-center pb-32 pt-20">
+		<div className="text-center">
+			<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+				GratiText
+			</p>
+			<h1 className="mt-3 text-h1">Forgot Password</h1>
+			<p className="mt-3 text-body-md text-muted-foreground">
+				No worries, we'll send you reset instructions.
+			</p>
+		</div>
+		<div className="mt-8 w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+			<forgotPassword.Form method="POST" {...getFormProps(form)} className="space-y-6">
+				<HoneypotInputs />
+				<div className="grid gap-4 md:grid-cols-[200px_1fr]">
+					<SelectField
+						labelProps={{ children: 'Country Code' }}
+						selectProps={{
+							...getSelectProps(fields.countryCode),
+							children: countryCodes.map((code) => (
+								<option key={`${code.value}-${code.label}`} value={code.value}>
+									{code.label}
+								</option>
+							)),
+						}}
+						errors={fields.countryCode.errors}
+					/>
+					<Field
+						labelProps={{
+							htmlFor: fields.phoneNumber.id,
+							children: 'Phone Number',
+						}}
+						inputProps={{
+							autoFocus: true,
+							...getInputProps(fields.phoneNumber, {
+								type: 'text',
+							}),
+						}}
+						errors={fields.phoneNumber.errors}
+					/>
 				</div>
-			</div>
+				<ErrorList errors={form.errors} id={form.errorId} />
+				<StatusButton
+					className="w-full bg-[hsl(var(--palette-hot-fire-red))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-fire-red))]"
+					status={
+						forgotPassword.state === 'submitting'
+							? 'pending'
+							: (form.status ?? 'idle')
+					}
+					type="submit"
+					disabled={forgotPassword.state !== 'idle'}
+				>
+					Recover password
+				</StatusButton>
+			</forgotPassword.Form>
+			<Link to="/login" className="mt-6 block text-center text-body-sm font-bold">
+				Back to Login
+			</Link>
 		</div>
+	</div>
 	)
 }
 
diff --git a/app/routes/_app+/_auth+/login.tsx b/app/routes/_app+/_auth+/login.tsx
index 3ba21979..d6f03257 100644
--- a/app/routes/_app+/_auth+/login.tsx
+++ b/app/routes/_app+/_auth+/login.tsx
@@ -1,4 +1,9 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import {
+	getFormProps,
+	getInputProps,
+	getSelectProps,
+	useForm,
+} from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
 	json,
@@ -10,22 +15,31 @@ import { Form, Link, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
+import { CheckboxField, ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { login, requireAnonymous } from '#app/utils/auth.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
-import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { PasswordSchema } from '#app/utils/user-validation.ts'
 import { handleNewSession } from './login.server.ts'
 
 const LoginFormSchema = z.object({
-	username: UsernameSchema,
+	countryCode: z.string().min(1, 'Country code is required'),
+	phoneNumber: z.string().min(1, 'Phone number is required'),
 	password: PasswordSchema,
 	redirectTo: z.string().optional(),
 	remember: z.boolean().optional(),
 })
 
+const countryCodes = [
+	{ label: 'United States (+1)', value: '+1' },
+	{ label: 'United Kingdom (+44)', value: '+44' },
+	{ label: 'Czech Republic (+420)', value: '+420' },
+	{ label: 'Canada (+1)', value: '+1' },
+	{ label: 'Australia (+61)', value: '+61' },
+]
+
 export async function loader({ request }: LoaderFunctionArgs) {
 	await requireAnonymous(request)
 	return json({})
@@ -40,11 +54,15 @@ export async function action({ request }: ActionFunctionArgs) {
 			LoginFormSchema.transform(async (data, ctx) => {
 				if (intent !== null) return { ...data, session: null }
 
-				const session = await login(data)
+				const session = await login({
+					identifier: data.phoneNumber,
+					countryCode: data.countryCode,
+					password: data.password,
+				})
 				if (!session) {
 					ctx.addIssue({
 						code: z.ZodIssueCode.custom,
-						message: 'Invalid username or password',
+						message: 'Invalid phone number or password',
 					})
 					return z.NEVER
 				}
@@ -80,7 +98,10 @@ export default function LoginPage() {
 	const [form, fields] = useForm({
 		id: 'login-form',
 		constraint: getZodConstraint(LoginFormSchema),
-		defaultValue: { redirectTo },
+		defaultValue: {
+			redirectTo,
+			countryCode: countryCodes[0]?.value ?? '+1',
+		},
 		lastResult: actionData?.result,
 		onValidate({ formData }) {
 			return parseWithZod(formData, { schema: LoginFormSchema })
@@ -89,92 +110,94 @@ export default function LoginPage() {
 	})
 
 	return (
-		<div className="flex min-h-full flex-col justify-center pb-32 pt-20">
-			<div className="mx-auto w-full max-w-md">
-				<div className="flex flex-col gap-3 text-center">
-					<h1 className="text-h1">Welcome back!</h1>
-					<p className="text-body-md text-muted-foreground">
-						Please enter your details.
-					</p>
-				</div>
-				<Spacer size="xs" />
-
-				<div>
-					<div className="mx-auto w-full max-w-md px-8">
-						<Form method="POST" {...getFormProps(form)}>
-							<HoneypotInputs />
-							<Field
-								labelProps={{ children: 'Username' }}
-								inputProps={{
-									...getInputProps(fields.username, { type: 'text' }),
-									autoFocus: true,
-									className: 'lowercase',
-									autoComplete: 'username',
-								}}
-								errors={fields.username.errors}
-							/>
-
-							<Field
-								labelProps={{ children: 'Password' }}
-								inputProps={{
-									...getInputProps(fields.password, {
-										type: 'password',
-									}),
-									autoComplete: 'current-password',
-								}}
-								errors={fields.password.errors}
-							/>
-
-							<div className="flex justify-between">
-								<CheckboxField
-									labelProps={{
-										htmlFor: fields.remember.id,
-										children: 'Remember me',
-									}}
-									buttonProps={getInputProps(fields.remember, {
-										type: 'checkbox',
-									})}
-									errors={fields.remember.errors}
-								/>
-								<div>
-									<Link
-										to="/forgot-password"
-										className="text-body-xs font-semibold"
-									>
-										Forgot password?
-									</Link>
-								</div>
-							</div>
-
-							<input
-								{...getInputProps(fields.redirectTo, { type: 'hidden' })}
-							/>
-							<ErrorList errors={form.errors} id={form.errorId} />
-
-							<div className="flex items-center justify-between gap-6 pt-3">
-								<StatusButton
-									className="w-full"
-									status={isPending ? 'pending' : (form.status ?? 'idle')}
-									type="submit"
-									disabled={isPending}
-								>
-									Log in
-								</StatusButton>
-							</div>
-						</Form>
-						<div className="flex items-center justify-center gap-2 pt-6">
-							<span className="text-muted-foreground">New here?</span>
-							<Link
-								to={
-									redirectTo
-										? `/signup?${encodeURIComponent(redirectTo)}`
-										: '/signup'
-								}
-							>
-								Create an account
-							</Link>
-						</div>
+		<div className="container flex flex-col items-center justify-center pb-32 pt-20">
+			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
+				<h1 className="mt-3 text-h1">Stay Close, Even When Apart</h1>
+				<p className="mt-3 text-body-md text-muted-foreground">
+					Please enter your account details.
+				</p>
+			</div>
+			<Spacer size="xs" />
+			<div className="mt-8 w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+				<Form method="POST" {...getFormProps(form)} className="space-y-6">
+					<HoneypotInputs />
+					<div className="grid gap-4 md:grid-cols-[200px_1fr]">
+						<SelectField
+							labelProps={{ children: 'Country Code' }}
+							selectProps={{
+								...getSelectProps(fields.countryCode),
+								children: countryCodes.map((code) => (
+									<option key={`${code.value}-${code.label}`} value={code.value}>
+										{code.label}
+									</option>
+								)),
+							}}
+							errors={fields.countryCode.errors}
+						/>
+						<Field
+							labelProps={{ children: 'Phone Number' }}
+							inputProps={{
+								...getInputProps(fields.phoneNumber, { type: 'text' }),
+								autoFocus: true,
+								autoComplete: 'tel',
+							}}
+							errors={fields.phoneNumber.errors}
+						/>
+					</div>
+
+					<Field
+						labelProps={{ children: 'Password' }}
+						inputProps={{
+							...getInputProps(fields.password, {
+								type: 'password',
+							}),
+							autoComplete: 'current-password',
+						}}
+						errors={fields.password.errors}
+					/>
+
+					<div className="flex flex-wrap items-center justify-between gap-3">
+						<CheckboxField
+							labelProps={{
+								htmlFor: fields.remember.id,
+								children: 'Remember me',
+							}}
+							buttonProps={getInputProps(fields.remember, {
+								type: 'checkbox',
+							})}
+							errors={fields.remember.errors}
+						/>
+						<Link to="/forgot-password" className="text-body-xs font-semibold">
+							Forgot password?
+						</Link>
 					</div>
+
+					<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
+					<ErrorList errors={form.errors} id={form.errorId} />
+
+					<StatusButton
+						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
+						type="submit"
+						disabled={isPending}
+					>
+						Log in
+					</StatusButton>
+				</Form>
+				<div className="flex items-center justify-center gap-2 pt-6">
+					<span className="text-muted-foreground">New here?</span>
+					<Link
+						to={
+							redirectTo
+								? `/signup?${encodeURIComponent(redirectTo)}`
+								: '/signup'
+						}
+					>
+						Create an account
+					</Link>
 				</div>
 			</div>
 		</div>
diff --git a/app/routes/_app+/_auth+/onboarding.tsx b/app/routes/_app+/_auth+/onboarding.tsx
index 45537983..ab636839 100644
--- a/app/routes/_app+/_auth+/onboarding.tsx
+++ b/app/routes/_app+/_auth+/onboarding.tsx
@@ -7,12 +7,7 @@ import {
 	type ActionFunctionArgs,
 	type MetaFunction,
 } from '@remix-run/node'
-import {
-	Form,
-	useActionData,
-	useLoaderData,
-	useSearchParams,
-} from '@remix-run/react'
+import { Form, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
@@ -130,7 +125,6 @@ export const meta: MetaFunction = () => {
 }
 
 export default function SignupRoute() {
-	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()
 	const [searchParams] = useSearchParams()
@@ -148,21 +142,29 @@ export default function SignupRoute() {
 	})
 
 	return (
-		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">
-			<div className="mx-auto w-full max-w-lg">
-				<div className="flex flex-col gap-3 text-center">
-					<h1 className="text-h1">Welcome aboard {data.phoneNumber}!</h1>
-					<p className="text-body-md text-muted-foreground">
-						Please enter your details.
-					</p>
-				</div>
-				<Spacer size="xs" />
-				<Form
-					method="POST"
-					className="mx-auto min-w-full max-w-sm sm:min-w-[368px]"
-					{...getFormProps(form)}
-				>
+		<div className="container flex min-h-full flex-col items-center justify-center pb-32 pt-20">
+			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
+				<h1 className="mt-3 text-h1">Stay Connected, Stay Grateful</h1>
+				<p className="text-body-md text-muted-foreground">
+					Almost there! Finish creating your account.
+				</p>
+			</div>
+			<Spacer size="xs" />
+			<div className="mt-8 w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+				<Form method="POST" {...getFormProps(form)} className="space-y-6">
 					<HoneypotInputs />
+					<Field
+						labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
+						inputProps={{
+							...getInputProps(fields.name, { type: 'text' }),
+							autoComplete: 'name',
+							autoFocus: true,
+						}}
+						errors={fields.name.errors}
+					/>
 					<Field
 						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
 						inputProps={{
@@ -172,14 +174,6 @@ export default function SignupRoute() {
 						}}
 						errors={fields.username.errors}
 					/>
-					<Field
-						labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
-						inputProps={{
-							...getInputProps(fields.name, { type: 'text' }),
-							autoComplete: 'name',
-						}}
-						errors={fields.name.errors}
-					/>
 					<Field
 						labelProps={{ htmlFor: fields.password.id, children: 'Password' }}
 						inputProps={{
@@ -188,7 +182,6 @@ export default function SignupRoute() {
 						}}
 						errors={fields.password.errors}
 					/>
-
 					<Field
 						labelProps={{
 							htmlFor: fields.confirmPassword.id,
@@ -200,41 +193,36 @@ export default function SignupRoute() {
 						}}
 						errors={fields.confirmPassword.errors}
 					/>
-
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
-							children:
-								'Do you agree to our Terms of Service and Privacy Policy?',
-						}}
-						buttonProps={getInputProps(
-							fields.agreeToTermsOfServiceAndPrivacyPolicy,
-							{ type: 'checkbox' },
-						)}
-						errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
-					/>
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.remember.id,
-							children: 'Remember me',
-						}}
-						buttonProps={getInputProps(fields.remember, { type: 'checkbox' })}
-						errors={fields.remember.errors}
-					/>
-
-					<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
+				<CheckboxField
+					labelProps={{
+						htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
+						children:
+							'Do you agree to our Terms of Service and Privacy Policy?',
+					}}
+					buttonProps={getInputProps(
+						fields.agreeToTermsOfServiceAndPrivacyPolicy,
+						{ type: 'checkbox' },
+					)}
+					errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
+				/>
+				<CheckboxField
+					labelProps={{
+						htmlFor: fields.remember.id,
+						children: 'Remember me',
+					}}
+					buttonProps={getInputProps(fields.remember, { type: 'checkbox' })}
+					errors={fields.remember.errors}
+				/>
+				<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
-
-					<div className="flex items-center justify-between gap-6">
-						<StatusButton
-							className="w-full"
-							status={isPending ? 'pending' : (form.status ?? 'idle')}
-							type="submit"
-							disabled={isPending}
-						>
-							Create an account
-						</StatusButton>
-					</div>
+					<StatusButton
+						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
+						type="submit"
+						disabled={isPending}
+					>
+						Create an Account
+					</StatusButton>
 				</Form>
 			</div>
 		</div>
diff --git a/app/routes/_app+/_auth+/reset-password.tsx b/app/routes/_app+/_auth+/reset-password.tsx
index 7eac781a..ad3b8a23 100644
--- a/app/routes/_app+/_auth+/reset-password.tsx
+++ b/app/routes/_app+/_auth+/reset-password.tsx
@@ -82,15 +82,18 @@ export default function ResetPasswordPage() {
 	})
 
 	return (
-		<div className="container flex flex-col justify-center pb-32 pt-20">
+		<div className="container flex flex-col items-center justify-center pb-32 pt-20">
 			<div className="text-center">
-				<h1 className="text-h1">Password Reset</h1>
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
+				<h1 className="mt-3 text-h1">Reset Your Password</h1>
 				<p className="mt-3 text-body-md text-muted-foreground">
-					Hi, {data.resetPasswordUsername}. No worries. It happens all the time.
+					Hi, {data.resetPasswordUsername}. Let's set a new password.
 				</p>
 			</div>
-			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
-				<Form method="POST" {...getFormProps(form)}>
+			<div className="mt-8 w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+				<Form method="POST" {...getFormProps(form)} className="space-y-6">
 					<Field
 						labelProps={{
 							htmlFor: fields.password.id,
@@ -118,7 +121,7 @@ export default function ResetPasswordPage() {
 					<ErrorList errors={form.errors} id={form.errorId} />
 
 					<StatusButton
-						className="w-full"
+						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
 						status={isPending ? 'pending' : (form.status ?? 'idle')}
 						type="submit"
 						disabled={isPending}
diff --git a/app/routes/_app+/_auth+/signup.tsx b/app/routes/_app+/_auth+/signup.tsx
index 0810f6b9..e22e1fe3 100644
--- a/app/routes/_app+/_auth+/signup.tsx
+++ b/app/routes/_app+/_auth+/signup.tsx
@@ -1,4 +1,9 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import {
+	getFormProps,
+	getInputProps,
+	getSelectProps,
+	useForm,
+} from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
 	json,
@@ -10,7 +15,7 @@ import { Form, useActionData } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
@@ -20,20 +25,34 @@ import { PhoneNumberSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.server.ts'
 
 const SignupSchema = z.object({
+	countryCode: z.string().min(1, 'Country code is required'),
 	phoneNumber: PhoneNumberSchema,
 })
 
+const countryCodes = [
+	{ label: 'United States (+1)', value: '+1' },
+	{ label: 'United Kingdom (+44)', value: '+44' },
+	{ label: 'Czech Republic (+420)', value: '+420' },
+	{ label: 'Canada (+1)', value: '+1' },
+	{ label: 'Australia (+61)', value: '+61' },
+]
+
 export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 
 	checkHoneypot(formData)
 
-	const submission = await parseWithZod(formData, {
-		schema: SignupSchema.superRefine(async (data, ctx) => {
-			const existingUser = await prisma.user.findUnique({
-				where: { phoneNumber: data.phoneNumber },
-				select: { id: true },
-			})
+		const submission = await parseWithZod(formData, {
+			schema: SignupSchema.superRefine(async (data, ctx) => {
+				const digitsOnly = data.phoneNumber.replace(/\D/g, '')
+				const fullPhoneNumber = `${data.countryCode}${digitsOnly}`.replace(
+					/\s+/g,
+					'',
+				)
+				const existingUser = await prisma.user.findUnique({
+					where: { phoneNumber: fullPhoneNumber },
+					select: { id: true },
+				})
 			if (existingUser) {
 				ctx.addIssue({
 					path: ['phoneNumber'],
@@ -62,16 +81,18 @@ export async function action({ request }: ActionFunctionArgs) {
 		})
 	}
 
-	const { phoneNumber } = submission.value
+	const { phoneNumber, countryCode } = submission.value
+	const digitsOnly = phoneNumber.replace(/\D/g, '')
+	const fullPhoneNumber = `${countryCode}${digitsOnly}`.replace(/\s+/g, '')
 	const { verifyUrl, redirectTo, otp } = await prepareVerification({
 		period: 10 * 60,
 		request,
 		type: 'onboarding',
-		target: phoneNumber,
+			target: fullPhoneNumber,
 	})
 
-	const response = await sendText({
-		to: phoneNumber,
+		const response = await sendText({
+			to: fullPhoneNumber,
 		message: `Welcome to GratiText!\nHere's your verification code: ${otp}\n\nOr click the link to get started: ${verifyUrl}`,
 	})
 
@@ -96,6 +117,7 @@ export default function SignupRoute() {
 	const [form, fields] = useForm({
 		id: 'signup-form',
 		constraint: getZodConstraint(SignupSchema),
+		defaultValue: { countryCode: countryCodes[0]?.value ?? '+1' },
 		lastResult: actionData?.result,
 		onValidate({ formData }) {
 			const result = parseWithZod(formData, { schema: SignupSchema })
@@ -104,42 +126,61 @@ export default function SignupRoute() {
 		shouldRevalidate: 'onBlur',
 	})
 
-	return (
-		<div className="container flex flex-col justify-center pb-32 pt-20">
-			<div className="text-center">
-				<h1 className="text-h1">Let's start your journey!</h1>
-				<p className="mt-3 text-body-md text-muted-foreground">
-					Please enter your phone number along with your country code.
-				</p>
+		return (
+			<div className="container flex flex-col items-center justify-center pb-32 pt-20">
+				<div className="text-center">
+					<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+						GratiText
+					</p>
+					<h1 className="mt-3 text-h1">
+						Create and Nurture Lasting Bonds With Your Loved Ones
+					</h1>
+					<p className="mt-3 text-body-md text-muted-foreground">
+						Please enter your phone number along with your country code.
+					</p>
+				</div>
+				<div className="mt-8 w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+					<Form method="POST" {...getFormProps(form)} className="space-y-6">
+						<HoneypotInputs />
+						<div className="grid gap-4 md:grid-cols-[200px_1fr]">
+							<SelectField
+								labelProps={{ children: 'Country Code' }}
+								selectProps={{
+									...getSelectProps(fields.countryCode),
+									children: countryCodes.map((code) => (
+										<option key={`${code.value}-${code.label}`} value={code.value}>
+											{code.label}
+										</option>
+									)),
+								}}
+								errors={fields.countryCode.errors}
+							/>
+							<Field
+								labelProps={{
+									htmlFor: fields.phoneNumber.id,
+									children: 'Phone Number',
+								}}
+								inputProps={{
+									...getInputProps(fields.phoneNumber, { type: 'tel' }),
+									autoFocus: true,
+									autoComplete: 'tel',
+								}}
+								errors={fields.phoneNumber.errors}
+							/>
+						</div>
+						<ErrorList errors={form.errors} id={form.errorId} />
+						<StatusButton
+							className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
+							type="submit"
+							disabled={isPending}
+						>
+							Continue
+						</StatusButton>
+					</Form>
+				</div>
 			</div>
-			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
-				<Form method="POST" {...getFormProps(form)}>
-					<HoneypotInputs />
-					<Field
-						labelProps={{
-							htmlFor: fields.phoneNumber.id,
-							children: 'Phone Number',
-						}}
-						inputProps={{
-							...getInputProps(fields.phoneNumber, { type: 'tel' }),
-							autoFocus: true,
-							autoComplete: 'tel',
-						}}
-						errors={fields.phoneNumber.errors}
-					/>
-					<ErrorList errors={form.errors} id={form.errorId} />
-					<StatusButton
-						className="w-full"
-						status={isPending ? 'pending' : (form.status ?? 'idle')}
-						type="submit"
-						disabled={isPending}
-					>
-						Submit
-					</StatusButton>
-				</Form>
-			</div>
-		</div>
-	)
+		)
 }
 
 export function ErrorBoundary() {
diff --git a/app/routes/_app+/_auth+/verify.tsx b/app/routes/_app+/_auth+/verify.tsx
index 2d143587..9148b371 100644
--- a/app/routes/_app+/_auth+/verify.tsx
+++ b/app/routes/_app+/_auth+/verify.tsx
@@ -1,7 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type ActionFunctionArgs } from '@remix-run/node'
-import { Form, useActionData, useSearchParams } from '@remix-run/react'
+import { Form, Link, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -81,6 +81,14 @@ export default function VerifyRoute() {
 		),
 	}
 
+	const resendRoutes: Record<VerificationTypes, string> = {
+		onboarding: '/signup',
+		'reset-password': '/forgot-password',
+		'change-phone-number': '/settings/profile/change-number',
+		'2fa': '/login',
+		'validate-recipient': '/recipients',
+	}
+
 	const [form, fields] = useForm({
 		id: 'verify-form',
 		constraint: getZodConstraint(VerifySchema),
@@ -97,56 +105,59 @@ export default function VerifyRoute() {
 	})
 
 	return (
-		<main className="container flex flex-col justify-center pb-32 pt-20">
+		<main className="container flex flex-col items-center justify-center pb-32 pt-20">
 			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
 				{type ? headings[type] : 'Invalid Verification Type'}
 			</div>
 
 			<Spacer size="xs" />
 
-			<div className="mx-auto flex w-72 max-w-full flex-col justify-center gap-1">
-				<div>
-					<ErrorList errors={form.errors} id={form.errorId} />
-				</div>
-				<div className="flex w-full gap-2">
-					<Form method="POST" {...getFormProps(form)} className="flex-1">
-						<HoneypotInputs />
-						<div className="flex items-center justify-center">
-							<OTPField
-								type="digits-and-characters"
-								labelProps={{
-									htmlFor: fields[codeQueryParam].id,
-									children: 'Code',
-								}}
-								inputProps={{
-									...getInputProps(fields[codeQueryParam], { type: 'text' }),
-									autoComplete: 'one-time-code',
-									autoFocus: true,
-								}}
-								errors={fields[codeQueryParam].errors}
-							/>
-						</div>
-						<input
-							{...getInputProps(fields[typeQueryParam], { type: 'hidden' })}
-						/>
-						<input
-							{...getInputProps(fields[targetQueryParam], { type: 'hidden' })}
-						/>
-						<input
-							{...getInputProps(fields[redirectToQueryParam], {
-								type: 'hidden',
-							})}
+			<div className="mt-8 w-full max-w-md rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+				<ErrorList errors={form.errors} id={form.errorId} />
+				<Form method="POST" {...getFormProps(form)} className="space-y-6">
+					<HoneypotInputs />
+					<div className="flex items-center justify-center">
+						<OTPField
+							type="digits-and-characters"
+							labelProps={{
+								htmlFor: fields[codeQueryParam].id,
+								children: 'Verification Code',
+							}}
+							inputProps={{
+								...getInputProps(fields[codeQueryParam], { type: 'text' }),
+								autoComplete: 'one-time-code',
+								autoFocus: true,
+							}}
+							errors={fields[codeQueryParam].errors}
 						/>
-						<StatusButton
-							className="w-full"
-							status={isPending ? 'pending' : (form.status ?? 'idle')}
-							type="submit"
-							disabled={isPending}
-						>
-							Submit
-						</StatusButton>
-					</Form>
-				</div>
+					</div>
+					<div className="text-center text-body-xs text-muted-foreground">
+						<span>Didn't get it? </span>
+						<Link to={type ? resendRoutes[type] : '.'} className="font-semibold text-foreground underline">
+							Resend the Code
+						</Link>
+					</div>
+					<input {...getInputProps(fields[typeQueryParam], { type: 'hidden' })} />
+					<input
+						{...getInputProps(fields[targetQueryParam], { type: 'hidden' })}
+					/>
+					<input
+						{...getInputProps(fields[redirectToQueryParam], {
+							type: 'hidden',
+						})}
+					/>
+					<StatusButton
+						className="w-full bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
+						type="submit"
+						disabled={isPending}
+					>
+						Continue
+					</StatusButton>
+				</Form>
 			</div>
 		</main>
 	)
diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx
index a69e616c..41e64751 100644
--- a/app/routes/_app+/_marketing+/index.tsx
+++ b/app/routes/_app+/_marketing+/index.tsx
@@ -8,121 +8,222 @@ export const meta: MetaFunction = () => [{ title: 'GratiText' }]
 export default function Index() {
 	const user = useOptionalUser()
 	return (
-		<main className="bg-gray-100 py-12">
-			<section className="container mx-auto px-4">
-				<div className="mb-12">
-					<h1 className="text-center text-4xl font-bold text-gray-900">
-						Welcome to GratiText
+		<main className="bg-background pb-20 pt-12">
+			<section className="container grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
+				<div className="space-y-6">
+					<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+						GratiText
+					</p>
+					<h1 className="text-4xl font-bold text-foreground md:text-6xl">
+						Thoughtful Connections Made Simple
 					</h1>
-					<p className="mt-4 text-center text-lg text-gray-700">
-						Strengthen your relationships with regular personalized messages of
-						love and gratitude.
+					<p className="max-w-xl text-body-md text-muted-foreground">
+						Strengthen your relationships with regular, personal messages of
+						love and gratitude. GratiText keeps you close to the people who
+						matter most, without losing the human touch.
 					</p>
-					<div className="mt-12 flex flex-col items-center gap-6 md:flex-row">
-						<div className="flex flex-col items-center md:mr-6 md:w-1/2">
-							<img
-								src="/images/smiling-phone-flowers.jpg"
-								alt="Attention grabbing visual"
-								className="aspect-square w-full max-w-md rounded-lg object-cover shadow-lg"
-							/>
-							<p className="mt-2 text-sm text-gray-500">
-								Photo by{' '}
-								<a
-									className="underline"
-									href="https://unsplash.com/@goodfacesagency?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
-								>
-									Good Faces
-								</a>{' '}
-								on{' '}
-								<a
-									className="underline"
-									href="https://unsplash.com/photos/a-woman-walking-down-the-street-looking-at-her-cell-phone-58xYWBSr0aQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
-								>
-									Unsplash
-								</a>
-							</p>
-						</div>
-						<div className="flex flex-col justify-between self-stretch text-body-md text-gray-700 md:mt-0 md:w-1/2">
-							<div className="flex flex-col gap-2">
-								<p>
-									GratiText empowers you to express love and appreciation
-									effortlessly.
-								</p>
-								<p>
-									Our platform schedules and delivers personal heartfelt
-									messages from you, making it easy to{' '}
-									<strong>stay connected</strong> and <em>nurture</em> your most
-									important relationships.
-								</p>
-								<p>
-									Whether it's a simple thank you or a meaningful reminder of
-									your affection, GratiText helps you make a{' '}
-									<strong>lasting impact</strong> on the people you care about.
-								</p>
-							</div>
-							<p className="align-baseline text-body-2xl">
-								<small>
-									Messages written by you... A human. <strong>Not</strong> by
-									AI.
-								</small>
-							</p>
-						</div>
+					<div className="flex flex-wrap gap-4">
+						<Button asChild size="lg">
+							{user ? (
+								<Link to="/recipients">Open dashboard</Link>
+							) : (
+								<Link to="/login">Get started</Link>
+							)}
+						</Button>
+						<Button asChild variant="secondary" size="lg">
+							<Link to="/about">Learn more</Link>
+						</Button>
+					</div>
+					<div className="inline-flex max-w-xs items-center gap-2 rounded-full bg-[hsl(var(--palette-dust-pink))] px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-[hsl(var(--palette-chestnut))]">
+						You are all kinds of awesome
 					</div>
 				</div>
-				<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Sign Up</h2>
-						<p className="mt-4 text-gray-600">
-							Create an account and start sending thoughtful messages to your
-							loved ones.
+				<div className="relative flex justify-center">
+					<div className="absolute -left-6 top-8 hidden h-20 w-20 rounded-[28px] bg-[hsl(var(--palette-baby-blue))] lg:block" />
+					<div className="absolute -right-4 bottom-10 hidden h-16 w-16 rounded-full bg-[hsl(var(--palette-rose-pink))] lg:block" />
+					<div className="max-w-md">
+						<img
+							src="/images/smiling-phone-flowers.jpg"
+							alt="Smiling person holding flowers and a phone"
+							className="aspect-square w-full rounded-[40px] border border-border object-cover shadow-lg"
+						/>
+						<p className="mt-2 text-xs text-muted-secondary-foreground">
+							Photo by{' '}
+							<a
+								className="underline"
+								href="https://unsplash.com/@goodfacesagency?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
+							>
+								Good Faces
+							</a>{' '}
+							on{' '}
+							<a
+								className="underline"
+								href="https://unsplash.com/photos/a-woman-walking-down-the-street-looking-at-her-cell-phone-58xYWBSr0aQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash"
+							>
+								Unsplash
+							</a>
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
-							Add a Loved One
-						</h2>
-						<p className="mt-4 text-gray-600">
-							Add the phone number of your loved one to get started.
+				</div>
+			</section>
+
+			<section className="container mt-16">
+				<div className="relative overflow-hidden rounded-[48px] bg-[hsl(var(--palette-green-700))] px-6 py-12 text-[hsl(var(--palette-cream))] shadow-sm dark:bg-[hsl(var(--palette-green-900))]">
+					<div className="absolute -left-6 -top-6 hidden h-20 w-20 rounded-full bg-[hsl(var(--palette-sunny))] opacity-80 md:block" />
+					<div className="absolute -bottom-6 right-10 hidden h-24 w-24 rounded-[32px] bg-[hsl(var(--palette-orange))] opacity-70 md:block" />
+					<div className="mx-auto max-w-3xl text-center">
+						<p className="text-xs font-semibold uppercase tracking-[0.3em] text-[hsl(var(--palette-green-100))]">
+							Messages written by you
 						</p>
-					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
-							Select a Schedule
+						<h2 className="mt-3 text-3xl font-bold md:text-4xl">
+							Messages written by you... Not by AI.
 						</h2>
-						<p className="mt-4 text-gray-600">
-							Choose how often you want to send messages.
+						<p className="mx-auto mt-4 max-w-2xl text-base text-[hsl(var(--palette-green-100))]">
+							Our platform schedules and delivers personal, heartfelt messages on
+							your schedule, so you can stay connected without losing your voice.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">
-							Write a Personal Message
+				</div>
+			</section>
+
+			<section className="container py-16">
+				<div className="mx-auto max-w-2xl text-center">
+					<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+						How it works
+					</p>
+					<h2 className="mt-3 text-3xl font-bold text-foreground md:text-4xl">
+						How does GratiText work?
+					</h2>
+					<p className="mt-4 text-body-sm text-muted-foreground">
+						Whether it's a simple thank you or a meaningful reminder of your
+						affection, GratiText helps you make a lasting impact on the people
+						you care about.
+					</p>
+				</div>
+				<div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+					{[
+						{
+							title: 'Sign Up',
+							description:
+								'Create an account and start sending thoughtful messages to your loved ones.',
+						},
+						{
+							title: 'Add a Loved One',
+							description:
+								'Add the phone number of your loved one to get started.',
+						},
+						{
+							title: 'Select a Schedule',
+							description: 'Choose how often you want to send messages.',
+						},
+						{
+							title: 'Write a Personal Message',
+							description:
+								'Craft meaningful messages that will be sent to your loved ones.',
+						},
+						{
+							title: 'Messages Sent',
+							description:
+								'Our system sends your messages automatically on the schedule.',
+						},
+						{
+							title: 'Reminders',
+							description:
+								'Get notified if you have not yet queued up a message for delivery.',
+						},
+					].map((step, index) => (
+						<div
+							key={step.title}
+							className="rounded-[28px] border border-border bg-card p-6 shadow-sm"
+						>
+							<p className="text-3xl font-bold text-[hsl(var(--palette-chestnut))]">
+								{String(index + 1).padStart(2, '0')}
+							</p>
+							<h3 className="mt-2 text-xl font-bold text-foreground">
+								{step.title}
+							</h3>
+							<p className="mt-2 text-body-xs text-muted-foreground">
+								{step.description}
+							</p>
+						</div>
+					))}
+				</div>
+			</section>
+
+			<section className="bg-muted py-16">
+				<div className="container">
+					<div className="mx-auto max-w-2xl text-center">
+						<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+							Pricing
+						</p>
+						<h2 className="mt-3 text-3xl font-bold text-foreground md:text-4xl">
+							Affordable pricing plans
 						</h2>
-						<p className="mt-4 text-gray-600">
-							Craft meaningful messages that will be sent to your loved ones.
+						<p className="mt-4 text-body-sm text-muted-foreground">
+							Choose a plan that matches how often you want to send messages.
 						</p>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Messages Sent</h2>
-						<p className="mt-4 text-gray-600">
-							Our system sends your messages to your loved ones automatically on
-							the schedule.
-						</p>
+					<div className="mt-10 grid gap-6 md:grid-cols-2">
+						<div className="rounded-[28px] border border-border bg-card p-6 shadow-sm">
+							<div className="flex items-center justify-between">
+								<div>
+									<h3 className="text-xl font-bold text-foreground">Basic</h3>
+									<p className="text-body-xs text-muted-foreground">
+										1 message per day
+									</p>
+								</div>
+								<p className="text-2xl font-bold text-[hsl(var(--palette-cloud))]">
+									$4.99
+								</p>
+					</div>
+					<div className="mt-6">
+						<Button asChild variant="secondary">
+							<Link to="/login">Get started</Link>
+						</Button>
 					</div>
-					<div className="rounded-lg bg-white p-6 shadow-lg">
-						<h2 className="text-2xl font-bold text-gray-800">Reminders</h2>
-						<p className="mt-4 text-gray-600">
-							Get notified if you've not yet queued up a message for delivery.
+				</div>
+				<div className="rounded-[28px] border border-border bg-card p-6 shadow-sm">
+					<div className="flex items-center justify-between">
+						<div>
+							<h3 className="text-xl font-bold text-foreground">Premium</h3>
+							<p className="text-body-xs text-muted-foreground">
+								10 messages per day
+							</p>
+						</div>
+						<p className="text-2xl font-bold text-[hsl(var(--palette-chestnut))]">
+							$14.99
 						</p>
 					</div>
+					<div className="mt-6">
+						<Button asChild>
+							<Link to="/login">Get started</Link>
+						</Button>
+					</div>
+						</div>
+					</div>
 				</div>
-				<div className="mt-12 text-center">
-					<Button asChild>
-						{user ? (
-							<Link to="/recipients">Your Recipients</Link>
-						) : (
-							<Link to="/login">Get Started</Link>
-						)}
-					</Button>
+			</section>
+
+			<section className="container py-16">
+				<div className="rounded-[32px] bg-[hsl(var(--palette-dust-pink))] px-8 py-12 text-[hsl(var(--palette-chocolate))]">
+					<div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
+						<div className="space-y-3">
+							<p className="text-xs font-semibold uppercase tracking-[0.3em] text-[hsl(var(--palette-chestnut))]">
+								Ready to start
+							</p>
+							<h2 className="text-3xl font-bold md:text-4xl">
+								Create your account today and get 2 weeks for free.
+							</h2>
+							<p className="text-body-sm text-[hsl(var(--palette-chestnut))]">
+								No credit card required to get started.
+							</p>
+						</div>
+					<div className="flex flex-col gap-3 sm:flex-row">
+						<Button asChild className="bg-[hsl(var(--palette-chestnut))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-hot-fire-red))]">
+							<Link to="/login">Get started</Link>
+						</Button>
+					</div>
+					</div>
 				</div>
 			</section>
 		</main>
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index dd6db2d8..9db39780 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -10,7 +10,7 @@ import {
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, TextareaField } from '#app/components/forms.js'
+import { ErrorList } from '#app/components/forms.js'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.js'
 import { SimpleTooltip } from '#app/components/ui/tooltip.js'
@@ -290,40 +290,81 @@ async function updateMessageOrderAction({ formData }: MessageActionArgs) {
 
 export default function RecipientRoute() {
 	const data = useLoaderData<typeof loader>()
+	const newMessageFetcher = useFetcher<typeof action>()
+	const isCreating = newMessageFetcher.state !== 'idle'
 
 	return (
-		<>
+		<div className="flex flex-col gap-8">
 			{data.cronError ? (
-				<div className="mb-4 rounded-md border border-destructive bg-destructive/10 p-4 text-destructive">
-					<strong className="font-bold">Invalid Cron Schedule:</strong>{' '}
-					{data.cronError}
-					<br />
+				<div className="rounded-2xl border border-destructive/40 bg-destructive/10 p-4 text-sm text-foreground-destructive">
+					<strong className="font-semibold">Invalid Schedule:</strong>{' '}
+					{data.cronError}{' '}
 					<Link to="edit" className="underline">
-						Please update the schedule
+						Update the schedule
 					</Link>
 				</div>
 			) : null}
-			<ul className="flex flex-col gap-6 sm:gap-12">
+			<ul className="flex flex-col gap-6">
 				{data.futureMessages.length ? (
-					data.futureMessages.map((m) => (
-						<li
-							key={m.id}
-							className="flex flex-col gap-4 sm:flex-row sm:justify-start sm:gap-2"
-						>
-							<MessageForms message={m} />
+					data.futureMessages.map((m, index) => (
+						<li key={m.id} className="flex flex-col gap-4">
+							<MessageForms message={m} index={index} />
 						</li>
 					))
 				) : (
-					<Link to="new" className="underline">
+					<Link to="new" className="text-sm font-semibold text-foreground underline">
 						Create a new message
 					</Link>
 				)}
 			</ul>
-		</>
+			<div className="flex flex-col gap-2">
+				<newMessageFetcher.Form
+					method="POST"
+					action="new"
+					className="rounded-full border border-border bg-card p-2 shadow-sm"
+				>
+					<label htmlFor="new-message" className="sr-only">
+						Add a new message
+					</label>
+					<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+						<textarea
+							id="new-message"
+							name="content"
+							placeholder="I am endlessly grateful for your love, your smile, and the joy you bring..."
+							className="flex-1 resize-none rounded-full bg-transparent px-4 py-3 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none"
+							rows={2}
+							required
+						/>
+						<StatusButton
+							status={isCreating ? 'pending' : 'idle'}
+							type="submit"
+							className="self-end bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))] sm:self-auto"
+						>
+							<Icon name="check">Add to Queue</Icon>
+						</StatusButton>
+					</div>
+			</newMessageFetcher.Form>
+			{newMessageFetcher.data?.result?.error ? (
+				<ErrorList
+					errors={
+						newMessageFetcher.data.result.error.content ??
+						newMessageFetcher.data.result.error[''] ??
+						[]
+					}
+				/>
+			) : null}
+			</div>
+		</div>
 	)
 }
 
-function MessageForms({ message }: { message: FutureMessage }) {
+function MessageForms({
+	message,
+	index,
+}: {
+	message: FutureMessage
+	index: number
+}) {
 	const updateContentFetcher = useFetcher<typeof updateMessageContentAction>()
 	const [updateContentForm, updateContentFields] = useForm({
 		id: `message-form-${message.id}`,
@@ -335,52 +376,73 @@ function MessageForms({ message }: { message: FutureMessage }) {
 		},
 		shouldRevalidate: 'onBlur',
 	})
+	const isPrimary = index % 2 === 0
+	const cardTone = isPrimary
+		? 'bg-[hsl(var(--palette-green-500))]'
+		: 'bg-[hsl(var(--palette-blues))]'
+	const headerText = message.sendAtDisplay
+		? `Scheduled for ${message.sendAtDisplay}`
+		: 'Message'
 
 	return (
-		<>
-			<div className="flex w-full flex-col gap-4 sm:flex-row sm:items-center">
-				<div className="flex justify-center gap-2 sm:flex-col">
-					<UpdateOrderForm message={message} direction="earlier" />
-					<UpdateOrderForm message={message} direction="later" />
-				</div>
-				<updateContentFetcher.Form
-					method="POST"
-					{...getFormProps(updateContentForm)}
-					className="flex-1"
-				>
-					<input type="hidden" name="id" value={message.id} />
-					<TextareaField
-						labelProps={{
-							children: message.sendAtDisplay
-								? `Message (${message.sendAtDisplay})`
-								: 'Message',
-						}}
-						textareaProps={{
-							...getTextareaProps(updateContentFields.content),
-						}}
-						errors={updateContentFields.content.errors}
-					/>
-				</updateContentFetcher.Form>
-				<div className="flex flex-row gap-2 sm:flex-col">
-					<StatusButton
-						form={updateContentForm.id}
-						status={updateContentFetcher.state !== 'idle' ? 'pending' : 'idle'}
-						className="flex-1 sm:w-full"
-						type="submit"
-						name="intent"
-						value={updateMessageContentActionIntent}
+		<div className="flex flex-col gap-4 lg:flex-row">
+			<div className="flex gap-2 lg:flex-col">
+				<UpdateOrderForm message={message} direction="earlier" />
+				<UpdateOrderForm message={message} direction="later" />
+			</div>
+			<div className="flex-1 space-y-3">
+				<div className={`rounded-[28px] px-6 py-5 text-[hsl(var(--palette-cream))] shadow-sm ${cardTone}`}>
+					<div className="flex items-center justify-between gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-[hsl(var(--palette-cream))]">
+						<div className="flex items-center gap-2">
+							<Icon name={isPrimary ? 'check' : 'clock'} size="sm" />
+							<span>{headerText}</span>
+						</div>
+						<div className="flex items-center gap-2">
+							<StatusButton
+								form={updateContentForm.id}
+								status={updateContentFetcher.state !== 'idle' ? 'pending' : 'idle'}
+								className="gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
+								size="icon"
+								variant="ghost"
+								type="submit"
+								name="intent"
+								value={updateMessageContentActionIntent}
+							>
+								<Icon name="check" size="sm" />
+								<span className="sr-only">Save</span>
+							</StatusButton>
+							<SendNowForm message={message} />
+							<DeleteForm message={message} />
+						</div>
+					</div>
+					<updateContentFetcher.Form
+						method="POST"
+						{...getFormProps(updateContentForm)}
 					>
-						Save
-					</StatusButton>
-					<ErrorList
-						id={updateContentForm.errorId}
-						errors={updateContentForm.errors}
-					/>
-					<SendNowForm message={message} />
-					<DeleteForm message={message} />
+						<input type="hidden" name="id" value={message.id} />
+						<label
+							htmlFor={updateContentFields.content.id}
+							className="sr-only"
+						>
+							Message content
+						</label>
+						<textarea
+							{...getTextareaProps(updateContentFields.content)}
+							className="mt-4 w-full resize-none bg-transparent text-sm leading-relaxed text-[hsl(var(--palette-cream))] placeholder:text-[hsl(var(--palette-cream))]/80 focus-visible:outline-none"
+							rows={4}
+						/>
+					</updateContentFetcher.Form>
 				</div>
+				<ErrorList
+					id={updateContentForm.errorId}
+					errors={updateContentForm.errors}
+				/>
+				<ErrorList
+					id={updateContentFields.content.errorId}
+					errors={updateContentFields.content.errors}
+				/>
 			</div>
-		</>
+		</div>
 	)
 }
 
@@ -419,17 +481,22 @@ function UpdateOrderForm({
 				content={direction === 'later' ? 'Move earlier' : 'Move later'}
 			>
 				<StatusButton
-					variant="ghost"
+					variant="secondary"
+					size="icon"
 					status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
+					className="gap-0 text-muted-foreground hover:text-foreground"
 					type="submit"
 					name="intent"
 					value={updateMessageOrderActionIntent}
 				>
 					{direction === 'later' ? (
-						<Icon size="lg" name="chevron-down" />
+						<Icon size="sm" name="chevron-down" />
 					) : (
-						<Icon size="lg" name="chevron-up" />
+						<Icon size="sm" name="chevron-up" />
 					)}
+					<span className="sr-only">
+						{direction === 'later' ? 'Move earlier' : 'Move later'}
+					</span>
 				</StatusButton>
 			</SimpleTooltip>
 			<ErrorList id={fields.order.errorId} errors={fields.order.errors} />
@@ -454,14 +521,16 @@ function SendNowForm({ message }: { message: Pick<FutureMessage, 'id'> }) {
 		<fetcher.Form method="POST" {...getFormProps(form)}>
 			<input type="hidden" name="id" value={message.id} />
 			<StatusButton
-				variant="secondary"
-				className="w-full"
+				variant="ghost"
+				size="icon"
+				className="gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15]"
 				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
 				type="submit"
 				name="intent"
 				value={sendMessageActionIntent}
 			>
-				Send Now
+				<Icon name="send" size="sm" />
+				<span className="sr-only">Send now</span>
 			</StatusButton>
 			<ErrorList id={form.errorId} errors={form.errors} />
 		</fetcher.Form>
@@ -481,6 +550,9 @@ function DeleteForm({ message }: { message: Pick<FutureMessage, 'id'> }) {
 		shouldRevalidate: 'onBlur',
 	})
 	const dc = useDoubleCheck()
+	const deleteClassName = dc.doubleCheck
+		? 'gap-0 data-[safe-delay=true]:opacity-50'
+		: 'gap-0 text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-cream))/0.15] data-[safe-delay=true]:opacity-50'
 
 	return (
 		<fetcher.Form method="POST" {...getFormProps(form)}>
@@ -488,14 +560,18 @@ function DeleteForm({ message }: { message: Pick<FutureMessage, 'id'> }) {
 			<StatusButton
 				variant={dc.doubleCheck ? 'destructive' : 'ghost'}
 				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
-				className="w-full data-[safe-delay=true]:opacity-50"
+				size="icon"
+				className={deleteClassName}
 				{...dc.getButtonProps({
 					type: 'submit',
 					name: 'intent',
 					value: deleteMessageActionIntent,
 				})}
 			>
-				{dc.doubleCheck ? 'Confirm' : 'Delete'}
+				<Icon name={dc.doubleCheck ? 'check' : 'trash'} size="sm" />
+				<span className="sr-only">
+					{dc.doubleCheck ? 'Confirm delete' : 'Delete'}
+				</span>
 			</StatusButton>
 			<ErrorList id={form.errorId} errors={form.errors} />
 		</fetcher.Form>
diff --git a/app/routes/_app+/recipients+/$recipientId.tsx b/app/routes/_app+/recipients+/$recipientId.tsx
index bc962e80..bb004532 100644
--- a/app/routes/_app+/recipients+/$recipientId.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.tsx
@@ -3,6 +3,7 @@ import { type LoaderFunctionArgs, type MetaFunction } from '@remix-run/node'
 import { Link, Outlet, json, useLoaderData, useMatches } from '@remix-run/react'
 import { useEffect, useRef } from 'react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
+import { ButtonLink } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.js'
 import { SimpleTooltip } from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.js'
@@ -13,6 +14,7 @@ import {
 	getSendTime,
 } from '#app/utils/cron.server.js'
 import { prisma } from '#app/utils/db.server.js'
+import { cn } from '#app/utils/misc.tsx'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
@@ -85,95 +87,126 @@ export default function RecipientRoute() {
 	}, [currentPath])
 
 	return (
-		<div className="px-10 py-6">
-			<div className="flex flex-col justify-between gap-4 md:flex-row">
-				<div className="mb-2 pt-12 lg:mb-6">
-					<h2 className="text-h2">{data.recipient.name}</h2>
-					<small className="flex gap-1 text-sm font-normal text-secondary-foreground">
-						{data.recipient.phoneNumber}
-						{data.optedOut ? (
-							<span className="text-destructive">Opted out</span>
-						) : null}
-						{data.recipient.verified ? (
-							''
-						) : (
-							<Link
-								preventScrollReset
-								to="edit"
-								className="text-body-2xs text-destructive underline"
-							>
-								(unverified)
-							</Link>
-						)}
-						<SimpleTooltip
-							content={
-								data.cronError
-									? `Cron error: ${data.cronError}`
-									: 'Next send time'
-							}
+		<div className="grid gap-10 lg:grid-cols-[320px_1fr]">
+			<aside className="space-y-6">
+				<Link
+					to="/recipients"
+					className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:text-foreground"
+				>
+					<Icon name="arrow-left" size="sm" />
+					All Recipients
+				</Link>
+				<div className="flex flex-wrap items-start justify-between gap-4">
+					<div>
+						<h2 className="text-3xl font-bold text-foreground">
+							{data.recipient.name}
+						</h2>
+						<div className="mt-2 flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
+							<span>{data.recipient.phoneNumber}</span>
+							{data.optedOut ? (
+								<span className="rounded-full bg-destructive/10 px-3 py-1 text-foreground-destructive">
+									Opted out
+								</span>
+							) : null}
+							{data.recipient.verified ? null : (
+								<Link
+									preventScrollReset
+									to="edit"
+									className="rounded-full border border-destructive/40 px-3 py-1 text-foreground-destructive"
+								>
+									Unverified
+								</Link>
+							)}
+						</div>
+					</div>
+					<ButtonLink variant="secondary" to="edit" className="gap-2">
+						<Icon name="settings">Settings</Icon>
+					</ButtonLink>
+				</div>
+				<div className="space-y-3">
+					<div className="flex items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 shadow-sm">
+						<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+							<Icon name="phone" size="sm" />
+						</span>
+						<span className="text-sm font-medium text-foreground">
+							{data.recipient.phoneNumber}
+						</span>
+					</div>
+					<SimpleTooltip
+						content={
+							data.cronError ? `Cron error: ${data.cronError}` : 'Next send time'
+						}
+					>
+						<div
+							className={cn(
+								'flex items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 text-sm font-medium text-foreground shadow-sm',
+								data.cronError && 'text-foreground-destructive',
+							)}
 						>
-							<button
-								className={`cursor-default ${
-									data.cronError ? 'text-destructive' : ''
-								}`}
-							>
-								{data.formattedNextSendTime}
-							</button>
-						</SimpleTooltip>
-					</small>
+							<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+								<Icon name="clock" size="sm" />
+							</span>
+							<span>{data.formattedNextSendTime}</span>
+						</div>
+					</SimpleTooltip>
 				</div>
-				<nav>
+			</aside>
+			<section className="rounded-[32px] border border-border bg-muted px-6 py-8 shadow-sm">
+				<nav className="mb-6 flex flex-wrap gap-2">
 					<Link
 						to="."
 						preventScrollReset
-						className={`flex items-center gap-2 rounded-md px-3 py-2 transition-colors ${
-							currentPath === '.'
-								? 'bg-accent text-accent-foreground'
-								: 'hover:bg-accent/50'
-						}`}
+						className={cn(
+							'flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:bg-card hover:text-foreground',
+							currentPath === '.' && 'bg-card text-foreground shadow-sm',
+						)}
 						ref={firstLinkRef}
 					>
-						<Icon name="clock">Upcoming</Icon>
+						<Icon name="clock" size="sm">
+							Upcoming
+						</Icon>
 					</Link>
 					<Link
 						to="new"
 						preventScrollReset
-						className={`flex items-center gap-2 rounded-md px-3 py-2 transition-colors ${
-							currentPath === 'new'
-								? 'bg-accent text-accent-foreground'
-								: 'hover:bg-accent/50'
-						}`}
+						className={cn(
+							'flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:bg-card hover:text-foreground',
+							currentPath === 'new' && 'bg-card text-foreground shadow-sm',
+						)}
 					>
-						<Icon name="plus">New</Icon>
+						<Icon name="plus" size="sm">
+							New
+						</Icon>
 					</Link>
 					<Link
 						to="past"
 						preventScrollReset
-						className={`flex items-center gap-2 rounded-md px-3 py-2 transition-colors ${
-							currentPath === 'past'
-								? 'bg-accent text-accent-foreground'
-								: 'hover:bg-accent/50'
-						}`}
+						className={cn(
+							'flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:bg-card hover:text-foreground',
+							currentPath === 'past' && 'bg-card text-foreground shadow-sm',
+						)}
 					>
-						<Icon name="chevron-down">Past</Icon>
+						<Icon name="chevron-down" size="sm">
+							Past
+						</Icon>
 					</Link>
-
 					<Link
 						to="edit"
 						preventScrollReset
-						className={`flex items-center gap-2 rounded-md px-3 py-2 transition-colors ${
-							currentPath === 'edit'
-								? 'bg-accent text-accent-foreground'
-								: 'hover:bg-accent/50'
-						}`}
+						className={cn(
+							'flex items-center gap-2 rounded-full border border-border px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:bg-card hover:text-foreground',
+							currentPath === 'edit' && 'bg-card text-foreground shadow-sm',
+						)}
 					>
-						<Icon name="pencil-1">Edit</Icon>
+						<Icon name="pencil-1" size="sm">
+							Edit
+						</Icon>
 					</Link>
 				</nav>
-			</div>
-			<div className="overflow-y-auto px-4 py-6">
-				<Outlet />
-			</div>
+				<div className="overflow-y-auto">
+					<Outlet />
+				</div>
+			</section>
 		</div>
 	)
 }
diff --git a/app/routes/_app+/recipients+/__editor.tsx b/app/routes/_app+/recipients+/__editor.tsx
index 221e78e7..ef430d8e 100644
--- a/app/routes/_app+/recipients+/__editor.tsx
+++ b/app/routes/_app+/recipients+/__editor.tsx
@@ -7,9 +7,11 @@ import {
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SerializeFrom } from '@remix-run/node'
 import { Form, useActionData, useFetcher } from '@remix-run/react'
+import { useState } from 'react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { CheckboxField, ErrorList, Field, SelectField } from '#app/components/forms.tsx'
+import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
+import { ButtonLink } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { validateCronString } from '#app/utils/cron.ts'
@@ -68,6 +70,10 @@ export function RecipientEditor({
 	const actionData = useActionData<typeof usertRecipientAction>()
 	const isPending = useIsPending()
 	const needsVerification = recipient?.verified === false
+	const pageTitle = recipient ? 'Edit Recipient' : 'Add New Recipient'
+	const [isDisabled, setIsDisabled] = useState(recipient?.disabled ?? false)
+	const pauseLabel = isDisabled ? 'Resume this schedule' : 'Pause this schedule'
+	const submitLabel = recipient ? 'Save Changes' : 'Add New Recipient'
 
 	const [form, fields] = useForm({
 		id: 'recipient-editor',
@@ -81,42 +87,47 @@ export function RecipientEditor({
 	})
 
 	return (
-		<div>
-			<div className="flex justify-end gap-2 p-6">
-				{needsVerification ? <VerifyForm /> : null}
+		<div className="flex flex-col items-center gap-8">
+			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
+				<h1 className="mt-2 text-3xl font-bold text-foreground md:text-4xl">
+					{pageTitle}
+				</h1>
 			</div>
-			{needsVerification ? (
-				<div className="px-6">
-					<strong className="font-bold text-destructive">
-						Verification required
-					</strong>
-					<p>
-						When you click "Verify" above, it will send a text message with a
-						verification code to {recipient?.phoneNumber} (their phone number).
-						You will be required to enter their code in the next step.
-					</p>
+			<div className="w-full max-w-3xl rounded-[32px] border border-border bg-card p-8 shadow-sm">
+				<div className="flex justify-end gap-2">
+					{needsVerification ? <VerifyForm /> : null}
 				</div>
-			) : null}
-			<Form
-				method="POST"
-				className="flex flex-col gap-y-4 overflow-y-auto px-4 py-4"
-				{...getFormProps(form)}
-			>
-				{/*
-					This hidden submit button is here to ensure that when the user hits
-					"enter" on an input field, the primary form function is submitted
-					rather than the first button in the form (which is delete/add image).
-				*/}
-				<button
-					type="submit"
-					className="hidden"
-					name="intent"
-					value={upsertRecipientActionIntent}
-				/>
-				{recipient ? (
-					<input type="hidden" name="id" value={recipient.id} />
+				{needsVerification ? (
+					<div className="mt-4 rounded-2xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-foreground-destructive">
+						<strong className="font-semibold">Verification required</strong>
+						<p className="mt-2 text-muted-foreground">
+							Click "Verify" to send a verification code to{' '}
+							{recipient?.phoneNumber}. You will enter the code in the next step.
+						</p>
+					</div>
 				) : null}
-				<div className="flex flex-col gap-1">
+				<Form
+					method="POST"
+					className="mt-6 flex flex-col gap-6"
+					{...getFormProps(form)}
+				>
+					{/*
+						This hidden submit button is here to ensure that when the user hits
+						"enter" on an input field, the primary form function is submitted
+						rather than the first button in the form (which is delete/add image).
+					*/}
+					<button
+						type="submit"
+						className="hidden"
+						name="intent"
+						value={upsertRecipientActionIntent}
+					/>
+					{recipient ? (
+						<input type="hidden" name="id" value={recipient.id} />
+					) : null}
 					<Field
 						labelProps={{ children: 'Name' }}
 						inputProps={{
@@ -125,15 +136,63 @@ export function RecipientEditor({
 						}}
 						errors={fields.name.errors}
 					/>
+					<div className="grid gap-4 md:grid-cols-2">
+						<Field
+							labelProps={{ children: 'Phone Number' }}
+							inputProps={{
+								...getInputProps(fields.phoneNumber, { type: 'tel' }),
+							}}
+							errors={fields.phoneNumber.errors}
+						/>
+						<SelectField
+							labelProps={{ children: 'Time Zone' }}
+							selectProps={{
+								...getSelectProps(fields.timeZone),
+								children: supportedTimeZones.map((tz) => (
+									<option key={tz} value={tz}>
+										{tz}
+									</option>
+								)),
+							}}
+							errors={fields.timeZone.errors}
+						/>
+					</div>
+					<div className="flex flex-wrap items-center justify-between gap-3">
+						<p className="text-sm font-semibold text-foreground">
+							Create a Schedule
+						</p>
+			<label className="inline-flex items-center gap-2 rounded-full border border-border bg-muted px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground transition hover:text-foreground">
+				<input
+					{...getInputProps(fields.disabled, { type: 'checkbox' })}
+					className="peer sr-only"
+					onChange={(e) => {
+						setIsDisabled(e.target.checked)
+						// Type assertion needed as conform's types don't expose onChange
+						const props = getInputProps(fields.disabled, { type: 'checkbox' }) as any
+						if (props.onChange) {
+							props.onChange(e)
+						}
+					}}
+				/>
+				<span className="peer-checked:text-foreground">{pauseLabel}</span>
+			</label>
+					</div>
 					<Field
-						labelProps={{ children: 'Number' }}
+						labelProps={{ children: 'Schedule' }}
 						inputProps={{
-							...getInputProps(fields.phoneNumber, { type: 'tel' }),
+							...getInputProps(fields.scheduleCron, { type: 'text' }),
+							placeholder: 'Every Thursday at 10:00 AM',
 						}}
-						errors={fields.phoneNumber.errors}
+						errors={fields.scheduleCron.errors}
 					/>
-					<small className="text-body-xs">
-						The UX for this will be improved later, but for now you can use{' '}
+					<div className="flex items-center gap-3 rounded-2xl border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+						<Icon name="info" size="sm" />
+						<span>
+							Your messages will arrive every week at this day and time.
+						</span>
+					</div>
+					<small className="text-body-xs text-muted-foreground">
+						Use{' '}
 						<a
 							href="https://crontab.guru/"
 							className="underline"
@@ -142,53 +201,29 @@ export function RecipientEditor({
 						>
 							crontab.guru
 						</a>{' '}
-						to create a cron schedule
+						to build a cron schedule.
 					</small>
-					<Field
-						labelProps={{ children: 'Schedule Cron' }}
-						inputProps={{
-							...getInputProps(fields.scheduleCron, { type: 'text' }),
-						}}
-						errors={fields.scheduleCron.errors}
-					/>
-					<SelectField
-						labelProps={{ children: 'Time Zone' }}
-						selectProps={{
-							...getSelectProps(fields.timeZone),
-							children: supportedTimeZones.map((tz) => (
-								<option key={tz} value={tz}>
-									{tz}
-								</option>
-							)),
-						}}
-						errors={fields.timeZone.errors}
-					/>
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.disabled.id,
-							children: 'Disable sending to this recipient',
-						}}
-						buttonProps={{
-							...getInputProps(fields.disabled, { type: 'checkbox' }),
-							form: form.id,
-						}}
-						errors={fields.disabled.errors}
-					/>
+					<ErrorList id={form.errorId} errors={form.errors} />
+				</Form>
+				<div className="mt-8 flex flex-wrap items-center justify-between gap-3">
+					{recipient?.id ? <DeleteRecipient id={recipient.id} /> : null}
+					<div className="flex flex-wrap gap-3">
+						<ButtonLink variant="secondary" to={recipient ? '..' : '/recipients'}>
+							Cancel
+						</ButtonLink>
+						<StatusButton
+							form={form.id}
+							type="submit"
+							disabled={isPending}
+							status={isPending ? 'pending' : 'idle'}
+							name="intent"
+							value={upsertRecipientActionIntent}
+							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						>
+							<Icon name="check">{submitLabel}</Icon>
+						</StatusButton>
+					</div>
 				</div>
-				<ErrorList id={form.errorId} errors={form.errors} />
-			</Form>
-			<div className="flex justify-between gap-2 p-6">
-				{recipient?.id ? <DeleteRecipient id={recipient.id} /> : null}
-				<StatusButton
-					form={form.id}
-					type="submit"
-					disabled={isPending}
-					status={isPending ? 'pending' : 'idle'}
-					name="intent"
-					value={upsertRecipientActionIntent}
-				>
-					Submit
-				</StatusButton>
 			</div>
 		</div>
 	)
diff --git a/app/routes/_app+/recipients+/_layout.tsx b/app/routes/_app+/recipients+/_layout.tsx
index a90f6efe..f40bb2a2 100644
--- a/app/routes/_app+/recipients+/_layout.tsx
+++ b/app/routes/_app+/recipients+/_layout.tsx
@@ -1,20 +1,30 @@
-import { json, type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, NavLink, Outlet, useLoaderData } from '@remix-run/react'
-import { useState } from 'react'
+import { json, type LoaderFunctionArgs, type SerializeFrom } from '@remix-run/node'
+import { Outlet, useLoaderData } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ButtonLink } from '#app/components/ui/button.tsx'
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuTrigger,
-} from '#app/components/ui/dropdown-menu.tsx'
-import { Icon } from '#app/components/ui/icon.tsx'
-import { SimpleTooltip } from '#app/components/ui/tooltip.js'
 import { requireUserId } from '#app/utils/auth.server.js'
 import { CronParseError, getNextScheduledTime } from '#app/utils/cron.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
-import { cn } from '#app/utils/misc.tsx'
+import { getCustomerProducts } from '#app/utils/stripe.server.ts'
+
+function formatScheduleDisplay(date: Date, timeZone: string) {
+	const formatter = new Intl.DateTimeFormat('en-US', {
+		weekday: 'short',
+		hour: 'numeric',
+		minute: '2-digit',
+		hour12: true,
+		timeZone,
+		timeZoneName: 'short',
+	})
+	const parts = formatter.formatToParts(date)
+	const getPart = (type: Intl.DateTimeFormatPartTypes) =>
+		parts.find((part) => part.type === type)?.value
+	const weekday = getPart('weekday') ?? ''
+	const hour = getPart('hour') ?? ''
+	const minute = getPart('minute') ?? '00'
+	const dayPeriod = getPart('dayPeriod') ?? ''
+	const timeZoneName = getPart('timeZoneName') ?? ''
+	return `Every ${weekday} at ${hour}:${minute} ${dayPeriod} ${timeZoneName}`.trim()
+}
 
 export async function loader({ request }: LoaderFunctionArgs) {
 	const userId = await requireUserId(request)
@@ -22,15 +32,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
 		select: {
 			id: true,
 			name: true,
+			phoneNumber: true,
 			scheduleCron: true,
 			timeZone: true,
 			disabled: true,
 			_count: { select: { messages: { where: { sentAt: null } } } },
-			messages: {
-				where: { sentAt: null },
-				orderBy: { order: 'asc' },
-				take: 1,
-			},
 		},
 		where: { userId },
 	})
@@ -65,106 +71,43 @@ export async function loader({ request }: LoaderFunctionArgs) {
 			return a.nextScheduledAt.getTime() - b.nextScheduledAt.getTime()
 		})
 
-	return json({ recipients: sortedRecipients })
+	const recipientsWithDisplay = sortedRecipients.map((recipient) => {
+		const scheduleDisplay = recipient.disabled
+			? 'Paused'
+			: recipient.cronError
+				? 'Schedule issue'
+				: formatScheduleDisplay(recipient.nextScheduledAt, recipient.timeZone)
+		const { nextScheduledAt, ...rest } = recipient
+		return { ...rest, scheduleDisplay }
+	})
+
+	const user = await prisma.user.findUniqueOrThrow({
+		where: { id: userId },
+		select: { stripeId: true },
+	})
+	const productsData = user.stripeId
+		? await getCustomerProducts(user.stripeId)
+		: { products: [], cancelAt: null }
+	const subscriptionStatus = productsData.products.includes('premium')
+		? 'premium'
+		: productsData.products.includes('basic')
+			? 'basic'
+			: 'none'
+
+	return json({ recipients: recipientsWithDisplay, subscriptionStatus })
+}
+
+export type RecipientsOutletContext = {
+	recipients: SerializeFrom<typeof loader>['recipients']
+	subscriptionStatus: SerializeFrom<typeof loader>['subscriptionStatus']
 }
 
 export default function RecipientsLayout() {
-	const { recipients } = useLoaderData<typeof loader>()
-	const [isOpen, setIsOpen] = useState(false)
+	const { recipients, subscriptionStatus } = useLoaderData<typeof loader>()
 
 	return (
-		<div className="container mx-auto flex min-h-0 flex-grow flex-col px-4 pt-4 md:px-8 md:pt-8">
-			<div className="mb-8 flex items-center justify-between">
-				<h1 className="text-4xl font-bold">
-					<Link
-						to="."
-						className="text-foreground hover:no-underline focus:no-underline"
-					>
-						Recipients
-					</Link>
-				</h1>
-				<ButtonLink to="new" className="hidden items-center gap-2 md:flex">
-					<Icon name="plus">Add New Recipient</Icon>
-				</ButtonLink>
-				<ButtonLink icon to="new" className="md:hidden">
-					<Icon name="plus" />
-				</ButtonLink>
-			</div>
-
-			<div className="bg-background-alt flex min-h-0 flex-1 flex-col">
-				<div className="flex flex-col gap-4 overflow-visible border-b-2 py-4 pl-1 pr-4">
-					<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-						<DropdownMenuTrigger className="hover:bg-background-alt-hover cursor-pointer px-2 py-1">
-							<Icon name="chevron-down">Select recipient</Icon>
-						</DropdownMenuTrigger>
-						<DropdownMenuContent className="min-w-64">
-							{recipients.map((recipient) => (
-								<DropdownMenuItem asChild key={recipient.id}>
-									<NavLink
-										to={recipient.id}
-										preventScrollReset
-										onClick={() => setIsOpen(false)}
-										className={cn(
-											'flex w-full items-center gap-2 overflow-x-auto rounded-sm px-2 py-1.5 text-xl transition-colors',
-											'hover:bg-accent hover:text-accent-foreground',
-											'focus:bg-accent focus:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-										)}
-									>
-										{({ isActive }) => (
-											<div className="flex items-center gap-1">
-												<Icon
-													name="arrow-right"
-													size="sm"
-													className={cn(
-														isActive ? 'opacity-100' : 'opacity-0',
-														'transition-opacity',
-													)}
-												/>
-												{recipient.name}
-												{recipient.disabled ? (
-													<SimpleTooltip content="Recipient is disabled">
-														<Icon
-															name="lock-closed"
-															className="text-muted-foreground"
-															title="recipient is disabled"
-														/>
-													</SimpleTooltip>
-												) : recipient.cronError ? (
-													<SimpleTooltip
-														content={`Invalid cron: ${recipient.cronError}`}
-													>
-														<Icon
-															name="exclamation-circle-outline"
-															className="text-destructive"
-															title="invalid cron schedule"
-														/>
-													</SimpleTooltip>
-												) : recipient._count.messages > 0 ? null : (
-													<SimpleTooltip content="No messages scheduled">
-														<Icon
-															name="exclamation-circle-outline"
-															className="text-danger-foreground"
-															title="no messages scheduled"
-														/>
-													</SimpleTooltip>
-												)}
-											</div>
-										)}
-									</NavLink>
-								</DropdownMenuItem>
-							))}
-							{recipients.length === 0 && (
-								<div className="bg-warning-background text-warning-foreground px-4 py-2 text-sm">
-									No recipients found. Add one to get started.
-								</div>
-							)}
-						</DropdownMenuContent>
-					</DropdownMenu>
-				</div>
-				<main className="flex-1 overflow-auto">
-					<Outlet />
-				</main>
-			</div>
+		<div className="container mx-auto flex min-h-0 flex-grow flex-col px-4 pb-16 pt-10 md:px-8">
+			<Outlet context={{ recipients, subscriptionStatus }} />
 		</div>
 	)
 }
diff --git a/app/routes/_app+/recipients+/index.tsx b/app/routes/_app+/recipients+/index.tsx
index b705f329..9dadf88e 100644
--- a/app/routes/_app+/recipients+/index.tsx
+++ b/app/routes/_app+/recipients+/index.tsx
@@ -1,15 +1,144 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import { type MetaFunction } from '@remix-run/react'
+import { type SerializeFrom } from '@remix-run/node'
+import { Link, type MetaFunction, useOutletContext } from '@remix-run/react'
+import { ButtonLink } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
 import { type loader as rootLoader } from '#app/root.tsx'
+import { type loader as recipientsLoader } from './_layout.tsx'
 
 export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
 export default function RecipientsIndexRoute() {
+	const { recipients, subscriptionStatus } =
+		useOutletContext<SerializeFrom<typeof recipientsLoader>>()
+	const hasRecipients = recipients.length > 0
+	const showTrialBanner = subscriptionStatus === 'none'
+	const showUpgradeBanner = subscriptionStatus === 'basic'
 	return (
-		<div className="container pt-12">
-			<p className="text-body-md">Select a recipient</p>
+		<div className="flex flex-col gap-8">
+			{showTrialBanner ? (
+				<div className="rounded-[20px] bg-[hsl(var(--palette-sunny))] px-6 py-3 text-sm font-semibold text-[hsl(var(--palette-dark-navy))]">
+					Upgrade to text unlimited loved ones!{' '}
+					<Link className="underline" to="/settings/profile/subscription">
+						Start your free trial
+					</Link>
+				</div>
+			) : null}
+			{showUpgradeBanner ? (
+				<div className="rounded-[20px] bg-[hsl(var(--palette-green-300))] px-6 py-3 text-sm font-semibold text-[hsl(var(--palette-dark-navy))]">
+					Upgrade to Premium to text more loved ones.{' '}
+					<Link className="underline" to="/settings/profile/subscription">
+						Upgrade to Premium
+					</Link>
+				</div>
+			) : null}
+			<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+				<div>
+					<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+						Recipients
+					</p>
+					<h1 className="text-4xl font-bold text-foreground">Recipients</h1>
+				</div>
+				<ButtonLink
+					to="new"
+					className="flex items-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+				>
+					<Icon name="plus">Add New Recipient</Icon>
+				</ButtonLink>
+			</div>
+
+			<div className="rounded-[32px] border border-border bg-card shadow-sm">
+				<div className="hidden grid-cols-[minmax(160px,1.2fr)_minmax(180px,1.2fr)_minmax(220px,1.4fr)_minmax(140px,0.8fr)_120px] gap-4 border-b border-border px-8 py-4 text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:grid">
+					<span>Recipient Name</span>
+					<span>Phone Number</span>
+					<span>Schedule</span>
+					<span>Prepared Messages</span>
+					<span />
+				</div>
+				{hasRecipients ? (
+					<div className="divide-y divide-border">
+						{recipients.map((recipient) => {
+							const messageCount = recipient._count.messages
+							const messageLabel = messageCount === 1 ? 'message' : 'messages'
+							const scheduleTone = recipient.disabled
+								? 'text-muted-foreground'
+								: recipient.cronError
+									? 'text-foreground-destructive'
+									: 'text-foreground'
+							return (
+								<div
+									key={recipient.id}
+									className="grid gap-3 px-6 py-6 md:grid-cols-[minmax(160px,1.2fr)_minmax(180px,1.2fr)_minmax(220px,1.4fr)_minmax(140px,0.8fr)_120px] md:items-center md:gap-4 md:px-8"
+								>
+									<div className="flex flex-col gap-1">
+										<span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:hidden">
+											Recipient Name
+										</span>
+										<Link
+											to={recipient.id}
+											className="text-lg font-semibold text-foreground hover:underline"
+										>
+											{recipient.name}
+										</Link>
+									</div>
+									<div className="flex flex-col gap-1">
+										<span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:hidden">
+											Phone Number
+										</span>
+										<span className="text-sm text-muted-foreground">
+											{recipient.phoneNumber}
+										</span>
+									</div>
+									<div className="flex flex-col gap-1">
+										<span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:hidden">
+											Schedule
+										</span>
+										<span className={`text-sm ${scheduleTone}`}>
+											{recipient.scheduleDisplay}
+										</span>
+									</div>
+									<div className="flex flex-col gap-1">
+										<span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground md:hidden">
+											Prepared Messages
+										</span>
+										<span
+											className={`text-sm font-semibold ${
+												messageCount === 0
+													? 'text-[hsl(var(--palette-orange))]'
+													: 'text-foreground'
+											}`}
+										>
+											{messageCount} {messageLabel}
+										</span>
+									</div>
+									<div className="flex md:justify-end">
+										<ButtonLink variant="secondary" size="sm" to={recipient.id}>
+											<Icon name="pencil-1">Manage</Icon>
+										</ButtonLink>
+									</div>
+								</div>
+							)
+						})}
+					</div>
+				) : (
+					<div className="flex flex-col items-center gap-4 px-8 py-16 text-center text-body-sm text-muted-foreground">
+						<div>
+							<p className="text-base font-semibold text-foreground">
+								Start by adding your first recipient
+							</p>
+							<p className="mt-1">Add someone you want to keep in touch with.</p>
+						</div>
+						<ButtonLink
+							to="new"
+							className="flex items-center gap-2 bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						>
+							<Icon name="plus">Add Recipient</Icon>
+						</ButtonLink>
+					</div>
+				)}
+			</div>
 		</div>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/change-number.tsx b/app/routes/_app+/settings.profile+/change-number.tsx
index 97f5d997..b9446edc 100644
--- a/app/routes/_app+/settings.profile+/change-number.tsx
+++ b/app/routes/_app+/settings.profile+/change-number.tsx
@@ -7,9 +7,10 @@ import {
 	type ActionFunctionArgs,
 	type LoaderFunctionArgs,
 } from '@remix-run/node'
-import { Form, useActionData, useLoaderData } from '@remix-run/react'
+import { Form, Link, useActionData, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
+import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import {
@@ -117,15 +118,18 @@ export default function ChangePhoneNumberIndex() {
 
 	const isPending = useIsPending()
 	return (
-		<div>
-			<h1 className="text-h1">Change Phone Number</h1>
-			<p>You will receive an text at the new phone number to confirm.</p>
-			<p>
-				An text notice will also be sent to your old number{' '}
-				{data.user.phoneNumber}.
-			</p>
-			<div className="mx-auto mt-5 max-w-sm">
-				<Form method="POST" {...getFormProps(form)}>
+		<div className="container flex min-h-full items-center justify-center pb-24 pt-16">
+			<div className="w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm">
+				<h1 className="text-2xl font-bold text-foreground">
+					Change Phone Number
+				</h1>
+				<p className="mt-2 text-sm text-muted-foreground">
+					You will receive a text at the new phone number to confirm.
+				</p>
+				<p className="mt-2 text-sm text-muted-foreground">
+					A notice will also be sent to your old number {data.user.phoneNumber}.
+				</p>
+				<Form method="POST" {...getFormProps(form)} className="mt-6 space-y-6">
 					<Field
 						labelProps={{ children: 'New Phone Number' }}
 						inputProps={{
@@ -135,8 +139,12 @@ export default function ChangePhoneNumberIndex() {
 						errors={fields.phoneNumber.errors}
 					/>
 					<ErrorList id={form.errorId} errors={form.errors} />
-					<div>
+					<div className="flex flex-wrap gap-3">
+						<Button variant="secondary" asChild>
+							<Link to="..">Cancel</Link>
+						</Button>
 						<StatusButton
+							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
 							status={isPending ? 'pending' : (form.status ?? 'idle')}
 						>
 							Send Confirmation
diff --git a/app/routes/_app+/settings.profile+/index.tsx b/app/routes/_app+/settings.profile+/index.tsx
index 00d83c91..57f9359b 100644
--- a/app/routes/_app+/settings.profile+/index.tsx
+++ b/app/routes/_app+/settings.profile+/index.tsx
@@ -10,6 +10,7 @@ import {
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
+import { ButtonLink } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'
@@ -94,46 +95,84 @@ export default function EditUserProfile() {
 	const data = useLoaderData<typeof loader>()
 
 	return (
-		<div className="flex flex-col gap-12">
-			<UpdateProfile />
-
-			<div className="col-span-6 my-6 h-1 border-b-[1.5px] border-foreground" />
-			<div className="col-span-full flex flex-col gap-6">
-				<div>
-					<Link to="subscription">
-						<Icon name="banknotes-outline">Manage Subscription</Icon>
-					</Link>
-				</div>
-				<div>
-					<Link to="change-number">
-						<Icon name="device-phone-mobile-outline">
-							Change number from {data.user.phoneNumber}
-						</Icon>
-					</Link>
-				</div>
-				<div>
-					<Link to="two-factor">
-						{data.isTwoFactorEnabled ? (
-							<Icon name="lock-closed">2FA is enabled</Icon>
-						) : (
-							<Icon name="lock-open-1">Enable 2FA</Icon>
-						)}
-					</Link>
-				</div>
-				<div>
-					<Link to="password">
-						<Icon name="dots-horizontal">Change Password</Icon>
-					</Link>
-				</div>
-				<div>
-					<Link
-						reloadDocument
-						download="my-gratitext-data.json"
-						to="/resources/download-user-data"
-					>
-						<Icon name="download">Download your data</Icon>
-					</Link>
-				</div>
+		<div className="mx-auto flex max-w-3xl flex-col gap-10 pb-16">
+			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
+				</p>
+				<h1 className="mt-3 text-4xl font-bold text-foreground">
+					Hi {data.user.name ?? data.user.username}!
+				</h1>
+			</div>
+			<div className="rounded-[32px] border border-border bg-card p-8 shadow-sm">
+				<UpdateProfile />
+			</div>
+			<div className="rounded-[32px] border border-border bg-card p-6 shadow-sm">
+				<ul className="divide-y divide-border">
+					<li>
+						<Link
+							to="subscription"
+							className="flex items-center justify-between gap-4 py-4"
+						>
+							<span className="flex items-center gap-3 text-sm font-semibold text-foreground">
+								<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+									<Icon name="banknotes-outline" size="sm" />
+								</span>
+								Manage Your Subscriptions
+							</span>
+							<Icon name="chevron-right" size="sm" />
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="password"
+							className="flex items-center justify-between gap-4 py-4"
+						>
+							<span className="flex items-center gap-3 text-sm font-semibold text-foreground">
+								<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+									<Icon name="password" size="sm" />
+								</span>
+								Change Password
+							</span>
+							<Icon name="chevron-right" size="sm" />
+						</Link>
+					</li>
+					<li>
+						<Link
+							reloadDocument
+							download="my-gratitext-data.json"
+							to="/resources/download-user-data"
+							className="flex items-center justify-between gap-4 py-4"
+						>
+							<span className="flex items-center gap-3 text-sm font-semibold text-foreground">
+								<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+									<Icon name="download" size="sm" />
+								</span>
+								Download Your Data
+							</span>
+							<Icon name="chevron-right" size="sm" />
+						</Link>
+					</li>
+					<li>
+						<Link
+							to="two-factor"
+							className="flex items-center justify-between gap-4 py-4"
+						>
+							<span className="flex items-center gap-3 text-sm font-semibold text-foreground">
+								<span className="rounded-xl bg-muted p-2 text-muted-foreground">
+									<Icon
+										name={data.isTwoFactorEnabled ? 'lock-closed' : 'lock-open-1'}
+										size="sm"
+									/>
+								</span>
+								{data.isTwoFactorEnabled ? '2FA is Enabled' : 'Enable 2FA'}
+							</span>
+							<Icon name="chevron-right" size="sm" />
+						</Link>
+					</li>
+				</ul>
+			</div>
+			<div className="flex flex-col items-center gap-4 text-center">
 				<SignOutOfSessions />
 				<DeleteData />
 			</div>
@@ -200,40 +239,58 @@ function UpdateProfile() {
 	})
 
 	return (
-		<fetcher.Form method="POST" {...getFormProps(form)}>
-			<div className="grid grid-cols-6 gap-x-10">
-				<Field
-					className="col-span-3"
-					labelProps={{
-						htmlFor: fields.username.id,
-						children: 'Username',
-					}}
-					inputProps={getInputProps(fields.username, { type: 'text' })}
-					errors={fields.username.errors}
-				/>
-				<Field
-					className="col-span-3"
-					labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
-					inputProps={getInputProps(fields.name, { type: 'text' })}
-					errors={fields.name.errors}
-				/>
-			</div>
-
-			<ErrorList errors={form.errors} id={form.errorId} />
-
-			<div className="mt-8 flex justify-center">
+		<fetcher.Form
+			method="POST"
+			{...getFormProps(form)}
+			className="flex flex-col gap-6"
+		>
+			<div className="flex flex-wrap items-center justify-between gap-3">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					Your Name
+				</p>
 				<StatusButton
 					type="submit"
-					size="wide"
+					size="sm"
 					name="intent"
 					value={profileUpdateActionIntent}
 					status={
 						fetcher.state !== 'idle' ? 'pending' : (form.status ?? 'idle')
 					}
+					className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
 				>
-					Save changes
+					Save Changes
 				</StatusButton>
+		</div>
+		<Field
+			labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
+			inputProps={{
+				...getInputProps(fields.username, { type: 'text' }),
+				className: 'lowercase',
+			}}
+			errors={fields.username.errors}
+		/>
+		<Field
+			labelProps={{ htmlFor: fields.name.id, children: 'Your Name' }}
+			inputProps={getInputProps(fields.name, { type: 'text' })}
+			errors={fields.name.errors}
+		/>
+			<div className="flex flex-wrap items-center justify-between gap-3">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					Your Phone Number
+				</p>
+				<ButtonLink variant="secondary" size="sm" to="change-number">
+					Edit Your Phone Number
+				</ButtonLink>
 			</div>
+			<div className="grid gap-4 sm:grid-cols-2">
+				<div className="rounded-full border border-border bg-muted px-4 py-3 text-sm text-muted-foreground">
+					Country Code
+				</div>
+				<div className="rounded-full border border-border bg-muted px-4 py-3 text-sm text-foreground">
+					{data.user.phoneNumber}
+				</div>
+			</div>
+			<ErrorList errors={form.errors} id={form.errorId} />
 		</fetcher.Form>
 	)
 }
@@ -272,7 +329,7 @@ function SignOutOfSessions() {
 							name: 'intent',
 							value: signOutOfSessionsActionIntent,
 						})}
-						variant={dc.doubleCheck ? 'destructive' : 'default'}
+						variant={dc.doubleCheck ? 'destructive' : 'secondary'}
 						status={
 							fetcher.state !== 'idle'
 								? 'pending'
@@ -287,7 +344,9 @@ function SignOutOfSessions() {
 					</StatusButton>
 				</fetcher.Form>
 			) : (
-				<Icon name="avatar">This is your only session</Icon>
+				<p className="text-sm text-muted-foreground">
+					This is your only session.
+				</p>
 			)}
 		</div>
 	)
@@ -307,22 +366,21 @@ function DeleteData() {
 
 	const fetcher = useFetcher<typeof deleteDataAction>()
 	return (
-		<div>
-			<fetcher.Form method="POST">
-				<StatusButton
-					{...dc.getButtonProps({
-						type: 'submit',
-						name: 'intent',
-						value: deleteDataActionIntent,
-					})}
-					variant={dc.doubleCheck ? 'destructive' : 'default'}
-					status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
-				>
-					<Icon name="trash">
-						{dc.doubleCheck ? `Are you sure?` : `Delete all your data`}
-					</Icon>
-				</StatusButton>
-			</fetcher.Form>
-		</div>
+		<fetcher.Form method="POST">
+			<StatusButton
+				{...dc.getButtonProps({
+					type: 'submit',
+					name: 'intent',
+					value: deleteDataActionIntent,
+				})}
+				variant={dc.doubleCheck ? 'destructive' : 'ghost'}
+				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
+				className="text-sm font-semibold text-foreground"
+			>
+				<Icon name="trash">
+					{dc.doubleCheck ? `Are you sure?` : `Delete Account`}
+				</Icon>
+			</StatusButton>
+		</fetcher.Form>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/password.tsx b/app/routes/_app+/settings.profile+/password.tsx
index b7496c24..aa33ee8d 100644
--- a/app/routes/_app+/settings.profile+/password.tsx
+++ b/app/routes/_app+/settings.profile+/password.tsx
@@ -121,45 +121,60 @@ export default function ChangePasswordRoute() {
 	})
 
 	return (
-		<Form method="POST" {...getFormProps(form)} className="mx-auto max-w-md">
-			<Field
-				labelProps={{ children: 'Current Password' }}
-				inputProps={{
-					...getInputProps(fields.currentPassword, { type: 'password' }),
-					autoComplete: 'current-password',
-				}}
-				errors={fields.currentPassword.errors}
-			/>
-			<Field
-				labelProps={{ children: 'New Password' }}
-				inputProps={{
-					...getInputProps(fields.newPassword, { type: 'password' }),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.newPassword.errors}
-			/>
-			<Field
-				labelProps={{ children: 'Confirm New Password' }}
-				inputProps={{
-					...getInputProps(fields.confirmNewPassword, {
-						type: 'password',
-					}),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.confirmNewPassword.errors}
-			/>
-			<ErrorList id={form.errorId} errors={form.errors} />
-			<div className="grid w-full grid-cols-2 gap-6">
-				<Button variant="secondary" asChild>
-					<Link to="..">Cancel</Link>
-				</Button>
-				<StatusButton
-					type="submit"
-					status={isPending ? 'pending' : (form.status ?? 'idle')}
-				>
-					Change Password
-				</StatusButton>
-			</div>
-		</Form>
+		<div className="container flex min-h-full items-center justify-center pb-24 pt-16">
+			<Form
+				method="POST"
+				{...getFormProps(form)}
+				className="w-full max-w-lg rounded-[32px] border border-border bg-card px-6 py-8 shadow-sm"
+			>
+				<h1 className="text-2xl font-bold text-foreground">
+					Change Your Password
+				</h1>
+				<p className="mt-2 text-sm text-muted-foreground">
+					Update your password to keep your account secure.
+				</p>
+				<div className="mt-6 space-y-6">
+					<Field
+						labelProps={{ children: 'Current Password' }}
+						inputProps={{
+							...getInputProps(fields.currentPassword, { type: 'password' }),
+							autoComplete: 'current-password',
+						}}
+						errors={fields.currentPassword.errors}
+					/>
+					<Field
+						labelProps={{ children: 'New Password' }}
+						inputProps={{
+							...getInputProps(fields.newPassword, { type: 'password' }),
+							autoComplete: 'new-password',
+						}}
+						errors={fields.newPassword.errors}
+					/>
+					<Field
+						labelProps={{ children: 'Confirm New Password' }}
+						inputProps={{
+							...getInputProps(fields.confirmNewPassword, {
+								type: 'password',
+							}),
+							autoComplete: 'new-password',
+						}}
+						errors={fields.confirmNewPassword.errors}
+					/>
+					<ErrorList id={form.errorId} errors={form.errors} />
+					<div className="grid w-full grid-cols-2 gap-6">
+						<Button variant="secondary" asChild>
+							<Link to="..">Cancel</Link>
+						</Button>
+						<StatusButton
+							type="submit"
+							status={isPending ? 'pending' : (form.status ?? 'idle')}
+							className="bg-[hsl(var(--palette-green-500))] text-[hsl(var(--palette-cream))] hover:bg-[hsl(var(--palette-green-700))]"
+						>
+							Save
+						</StatusButton>
+					</div>
+				</div>
+			</Form>
+		</div>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/subscription.tsx b/app/routes/_app+/settings.profile+/subscription.tsx
index 0c972fec..c03b7380 100644
--- a/app/routes/_app+/settings.profile+/subscription.tsx
+++ b/app/routes/_app+/settings.profile+/subscription.tsx
@@ -45,59 +45,83 @@ export default function Subscribe() {
 	const isPremium = products.includes('premium')
 	const isSubscribed = products.length > 0
 	return (
-		<div className="container">
-			{isSubscribed ? (
-				<p>You are currently subscribed to {products.join(', ')}</p>
-			) : (
-				<p>
-					You are not subscribed to any products. Your loved ones will not
-					receive messages until you subscribe.
+		<div className="container flex flex-col items-center justify-center pb-20 pt-16">
+			<div className="text-center">
+				<p className="text-xs font-semibold uppercase tracking-[0.3em] text-muted-foreground">
+					GratiText
 				</p>
-			)}
+				<h1 className="mt-3 text-3xl font-bold text-foreground md:text-4xl">
+					Select Your Plan
+				</h1>
+				<p className="mt-3 text-body-sm text-muted-foreground">
+					Choose a plan that matches how often you want to send messages.
+				</p>
+			</div>
+			<div className="mt-10 grid w-full max-w-4xl gap-6 md:grid-cols-2">
+				<div className="rounded-[28px] border border-border bg-card p-6 shadow-sm">
+					<div className="flex items-center justify-between">
+						<div>
+							<h3 className="text-xl font-bold text-foreground">Basic</h3>
+							<p className="text-body-xs text-muted-foreground">
+								1 message per day
+							</p>
+						</div>
+					<p className="text-2xl font-bold text-[hsl(var(--palette-cloud))]">
+						$4.99
+					</p>
+					</div>
+				<div className="mt-6">
+					{isBasic || isPremium ? (
+						<Button variant="secondary" disabled>
+							Select
+						</Button>
+					) : (
+						<Button asChild variant="secondary">
+							<a href={data.basicPaymentUrl}>Select</a>
+						</Button>
+					)}
+				</div>
+				</div>
+				<div className="rounded-[28px] border border-border bg-card p-6 shadow-sm">
+					<div className="flex items-center justify-between">
+						<div>
+							<h3 className="text-xl font-bold text-foreground">Premium</h3>
+							<p className="text-body-xs text-muted-foreground">
+								10 messages per day
+							</p>
+						</div>
+					<p className="text-2xl font-bold text-[hsl(var(--palette-chestnut))]">
+						$14.99
+					</p>
+					</div>
+				<div className="mt-6">
+					{isPremium ? (
+						<Button disabled>
+							Select
+						</Button>
+					) : (
+						<Button asChild>
+							<a href={data.premiumPaymentUrl}>Select</a>
+						</Button>
+					)}
+				</div>
+				</div>
+			</div>
 			{cancelAtDisplay ? (
-				<p className="text-destructive">
+				<p className="mt-6 text-sm text-foreground-destructive">
 					Your subscription will be cancelled at{' '}
-					<strong>{cancelAtDisplay}</strong>
+					<strong>{cancelAtDisplay}</strong>.
 				</p>
 			) : null}
-			{isSubscribed ? null : (
-				<table className="my-4 w-full table-auto">
-					<thead>
-						<tr>
-							<th className="px-4 py-2">Plan</th>
-							<th className="px-4 py-2">Messages per day</th>
-							<th className="px-4 py-2">Price</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr>
-							<td className="border px-4 py-2">Basic</td>
-							<td className="border px-4 py-2">1</td>
-							<td className="border px-4 py-2">$5/month</td>
-						</tr>
-						<tr>
-							<td className="border px-4 py-2">Premium</td>
-							<td className="border px-4 py-2">10</td>
-							<td className="border px-4 py-2">$15/month</td>
-						</tr>
-					</tbody>
-				</table>
-			)}
-			{isBasic || isPremium ? null : (
-				<Button asChild variant="secondary">
-					<a href={data.basicPaymentUrl}>Subscribe to Basic</a>
-				</Button>
-			)}
-			{isPremium ? null : (
-				<Button asChild>
-					<a href={data.premiumPaymentUrl}>Subscribe to Premium</a>
-				</Button>
-			)}
 			{isSubscribed ? (
-				<Link className="underline" to="/manage-subscription">
+				<Link className="mt-4 text-sm font-semibold underline" to="/manage-subscription">
 					Manage your subscription
 				</Link>
-			) : null}
+			) : (
+				<Link className="mt-4 text-sm font-semibold underline" to="/recipients">
+					Skip for now
+				</Link>
+			)}
 		</div>
 	)
 }
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 387ce231..6e6fb191 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -7,78 +7,105 @@
 	/* --font-sans: here if you have one */
 	/* --font-mono: here if you got it... */
 
+	--palette-dark-navy: 210 33.3% 14.1%;
+	--palette-navy: 210 25% 25.1%;
+	--palette-storm-grey: 211 16.4% 39.4%;
+	--palette-cloud: 210 15.6% 52.2%;
+	--palette-smoke: 213 15.1% 85.7%;
+	--palette-green-900: 147 48.5% 19.8%;
+	--palette-green-700: 147 30.4% 31.6%;
+	--palette-green-500: 147 49% 38.4%;
+	--palette-green-300: 148 34.1% 64.9%;
+	--palette-green-100: 150 33.3% 92.9%;
+	--palette-chocolate: 8 100% 13.9%;
+	--palette-chestnut: 19 92.6% 32%;
+	--palette-hot-fire-red: 19 83.3% 53.1%;
+	--palette-fire-red: 19 100% 61%;
+	--palette-orange: 30 100% 63.9%;
+	--palette-sunny: 44 94.3% 58.8%;
+	--palette-rose-pink: 332 61.3% 69.6%;
+	--palette-dust-pink: 14 62% 80.4%;
+	--palette-beige: 35 43.6% 92.4%;
+	--palette-cream: 38 52.4% 95.9%;
+	--palette-lilac: 231 35.5% 81.8%;
+	--palette-baby-blue: 183 38% 80.4%;
+	--palette-blues: 212 65.4% 54.7%;
+
 	/* prefixed with foreground because it should look good on the background */
-	--foreground-destructive: 345 82.7% 40.8%;
+	--foreground-destructive: var(--palette-fire-red);
 
-	--background: 0 0% 100%;
-	--foreground: 222.2 84% 4.9%;
+	--background: var(--palette-cream);
+	--foreground: var(--palette-dark-navy);
 
-	--muted: 210 40% 93%;
-	--muted-foreground: 215.4 16.3% 30%;
+	--muted: var(--palette-beige);
+	--muted-foreground: var(--palette-storm-grey);
 
-	--muted-secondary: 210 40% 93%;
-	--muted-secondary-foreground: 215.4 9.3% 41%;
+	--muted-secondary: var(--palette-smoke);
+	--muted-secondary-foreground: var(--palette-cloud);
 
-	--popover: 0 0% 100%;
-	--popover-foreground: 222.2 84% 4.9%;
+	--popover: var(--palette-beige);
+	--popover-foreground: var(--palette-dark-navy);
 
-	--card: 0 0% 100%;
-	--card-foreground: 222.2 84% 4.9%;
+	--card: var(--palette-cream);
+	--card-foreground: var(--palette-dark-navy);
 
-	--border: 214.3 31.8% 91.4%;
-	--input: 214.3 31.8% 91.4%;
-	--input-invalid: 0 84.2% 60.2%;
+	--border: var(--palette-smoke);
+	--input: var(--palette-smoke);
+	--input-invalid: var(--palette-fire-red);
 
-	--primary: 222.2 47.4% 11.2%;
-	--primary-foreground: 210 40% 98%;
+	--primary: var(--palette-navy);
+	--primary-foreground: var(--palette-cream);
 
-	--secondary: 210 20% 83%;
-	--secondary-foreground: 222.2 47.4% 11.2%;
+	--secondary: var(--palette-beige);
+	--secondary-foreground: var(--palette-navy);
 
-	--accent: 210 40% 90%;
-	--accent-foreground: 222.2 47.4% 11.2%;
+	--accent: var(--palette-green-100);
+	--accent-foreground: var(--palette-dark-navy);
 
-	--destructive: 0 70% 50%;
-	--destructive-foreground: 210 40% 98%;
+	--destructive: var(--palette-hot-fire-red);
+	--destructive-foreground: var(--palette-cream);
 
-	--ring: 215 20.2% 65.1%;
+	--ring: var(--palette-green-300);
 
 	--radius: 0.5rem;
 }
 
 .dark {
-	--background: 222.2 84% 4.9%;
-	--foreground: 210 40% 98%;
+	--background: var(--palette-dark-navy);
+	--foreground: var(--palette-cream);
 
 	/* prefixed with foreground because it should look good on the background */
-	--foreground-destructive: -4 84% 60%;
+	--foreground-destructive: var(--palette-fire-red);
+
+	--muted: var(--palette-navy);
+	--muted-foreground: var(--palette-smoke);
 
-	--muted: 217.2 32.6% 12%;
-	--muted-foreground: 215 20.2% 65.1%;
+	--muted-secondary: var(--palette-storm-grey);
+	--muted-secondary-foreground: var(--palette-smoke);
 
-	--popover: 222.2 84% 4.9%;
-	--popover-foreground: 210 40% 98%;
+	--popover: var(--palette-navy);
+	--popover-foreground: var(--palette-cream);
 
-	--card: 222.2 84% 4.9%;
-	--card-foreground: 210 40% 98%;
+	--card: var(--palette-navy);
+	--card-foreground: var(--palette-cream);
 
-	--border: 217.2 32.6% 17.5%;
-	--input: 217.2 32.6% 17.5%;
-	--input-invalid: 0 62.8% 30.6%;
+	--border: var(--palette-storm-grey);
+	--input: var(--palette-storm-grey);
+	--input-invalid: var(--palette-fire-red);
 
-	--primary: 210 40% 98%;
-	--primary-foreground: 222.2 47.4% 11.2%;
+	--primary: var(--palette-sunny);
+	--primary-foreground: var(--palette-dark-navy);
 
-	--secondary: 217.2 20% 24%;
-	--secondary-foreground: 210 40% 98%;
+	--secondary: var(--palette-navy);
+	--secondary-foreground: var(--palette-cream);
 
-	--accent: 217.2 32.6% 10%;
-	--accent-foreground: 210 40% 98%;
+	--accent: var(--palette-green-500);
+	--accent-foreground: var(--palette-cream);
 
-	--destructive: 0 60% 40%;
-	--destructive-foreground: 0 85.7% 97.3%;
+	--destructive: var(--palette-fire-red);
+	--destructive-foreground: var(--palette-cream);
 
-	--ring: 217.2 32.6% 60%;
+	--ring: var(--palette-green-300);
 }
 
 @theme inline {
diff --git a/app/utils/auth.server.ts b/app/utils/auth.server.ts
index 5bcb74d3..993c497a 100644
--- a/app/utils/auth.server.ts
+++ b/app/utils/auth.server.ts
@@ -156,14 +156,48 @@ export async function requireAnonymous(request: Request) {
 }
 
 export async function login({
-	username,
+	identifier,
+	countryCode,
 	password,
 }: {
-	username: User['username']
+	identifier: string
+	countryCode?: string
 	password: string
 }) {
-	const user = await verifyUserPassword({ username }, password)
-	if (!user) return null
+	const normalizedIdentifier = identifier.trim()
+	const phoneCandidates = new Set<string>()
+	if (normalizedIdentifier) {
+		phoneCandidates.add(normalizedIdentifier)
+		phoneCandidates.add(normalizedIdentifier.replace(/\s+/g, ''))
+	}
+
+	const digitsOnly = normalizedIdentifier.replace(/\D/g, '')
+	if (digitsOnly) {
+		phoneCandidates.add(digitsOnly)
+		if (countryCode) {
+			phoneCandidates.add(`${countryCode}${digitsOnly}`.replace(/\s+/g, ''))
+		}
+		if (normalizedIdentifier.startsWith('+')) {
+			phoneCandidates.add(`+${digitsOnly}`)
+		}
+	}
+	const phoneCandidateList = [...phoneCandidates].filter(Boolean)
+	const user = await prisma.user.findFirst({
+		where: {
+			OR: [
+				{ username: normalizedIdentifier.toLowerCase() },
+				...(phoneCandidateList.length
+					? [{ phoneNumber: { in: phoneCandidateList } }]
+					: []),
+			],
+		},
+		select: { id: true, password: { select: { hash: true } } },
+	})
+	if (!user?.password) return null
+
+	const isValid = await bcrypt.compare(password, user.password.hash)
+	if (!isValid) return null
+
 	const session = await prisma.session.create({
 		select: { id: true, expirationDate: true, userId: true },
 		data: {
diff --git a/tests/e2e/2fa.test.ts b/tests/e2e/2fa.test.ts
index 68ec3dfb..410fe385 100644
--- a/tests/e2e/2fa.test.ts
+++ b/tests/e2e/2fa.test.ts
@@ -52,9 +52,9 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await page.waitForLoadState('domcontentloaded')
 	await expect(page).toHaveURL(`/login`)
 
-	const usernameInput = page.getByRole('textbox', { name: /username/i })
-	await usernameInput.waitFor({ state: 'visible' })
-	await usernameInput.fill(user.username)
+	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
+	await phoneNumberInput.waitFor({ state: 'visible' })
+	await phoneNumberInput.fill(user.phoneNumber)
 	await page.getByLabel(/^password$/i).fill(password)
 	await page.getByRole('button', { name: /log in/i }).click()
 
@@ -63,7 +63,7 @@ test('Users can add 2FA to their account and use it when logging in', async ({
 	await totpCodeInput.waitFor({ state: 'visible', timeout: 15000 })
 	await totpCodeInput.fill(generateTOTP(options).otp)
 
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 
 	await expect(
 		page.getByRole('link', { name: user.name ?? user.username }),
diff --git a/tests/e2e/onboarding.test.ts b/tests/e2e/onboarding.test.ts
index 3c0ea07a..32e29601 100644
--- a/tests/e2e/onboarding.test.ts
+++ b/tests/e2e/onboarding.test.ts
@@ -6,10 +6,15 @@ import { test as base, createUser, expect } from '#tests/playwright-utils.ts'
 
 const URL_REGEX = /(?<url>https?:\/\/[^\s$.?#].[^\s]*)/
 const CODE_REGEX = /code: (?<code>[\d\w]+)/
+const defaultCountryCode = '+1'
 function extractUrl(text: string) {
 	const match = text.match(URL_REGEX)
 	return match?.groups?.url
 }
+function formatPhoneNumber(phoneNumber: string, countryCode = defaultCountryCode) {
+	const digitsOnly = phoneNumber.replace(/\D/g, '')
+	return `${countryCode}${digitsOnly}`.replace(/\s+/g, '')
+}
 
 const test = base.extend<{
 	getOnboardingData(): {
@@ -23,6 +28,7 @@ const test = base.extend<{
 		const userData = createUser()
 		// Clean up any stale text fixtures for this phone number before test
 		await deleteText(userData.phoneNumber)
+		await deleteText(formatPhoneNumber(userData.phoneNumber))
 		// eslint-disable-next-line react-hooks/rules-of-hooks
 		await use(() => {
 			const onboardingData = {
@@ -34,6 +40,7 @@ const test = base.extend<{
 		await prisma.user.deleteMany({ where: { username: userData.username } })
 		// Clean up text fixtures after test
 		await deleteText(userData.phoneNumber)
+		await deleteText(formatPhoneNumber(userData.phoneNumber))
 	},
 })
 
@@ -64,17 +71,18 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
 	await phoneNumberTextbox.click()
 	await phoneNumberTextbox.fill(onboardingData.phoneNumber)
 
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 	await expect(page.getByText(/check your texts/i)).toBeVisible()
 
 	const sourceNumber = await prisma.sourceNumber.findFirstOrThrow({
 		select: { phoneNumber: true },
 	})
-	const textMessage = await waitForText(onboardingData.phoneNumber, {
+	const targetPhoneNumber = formatPhoneNumber(onboardingData.phoneNumber)
+	const textMessage = await waitForText(targetPhoneNumber, {
 		errorMessage: 'Onboarding text message not found',
 	})
-	expect(textMessage.To).toBe(onboardingData.phoneNumber.toLowerCase())
+	expect(textMessage.To).toBe(targetPhoneNumber.toLowerCase())
 	expect(textMessage.From).toBe(sourceNumber.phoneNumber)
 	expect(textMessage.Body).toMatch(/welcome/i)
 	const onboardingUrl = extractUrl(textMessage.Body)
@@ -84,7 +92,7 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
 
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 
-	const submitButton = page.getByRole('main').getByRole('button', { name: /submit/i })
+	const submitButton = page.getByRole('main').getByRole('button', { name: /continue/i })
 	await submitButton.waitFor({ state: 'visible' })
 	await submitButton.click()
 
@@ -103,8 +111,6 @@ test('onboarding with link', async ({ page, getOnboardingData }) => {
 
 	await page.getByLabel(/terms/i).check()
 
-	await page.getByLabel(/remember me/i).check()
-
 	await page.getByRole('button', { name: /Create an account/i }).click()
 
 	await expect(page).toHaveURL(`/`, { timeout: 15_000 })
@@ -140,17 +146,18 @@ test('onboarding with a short code', async ({ page, getOnboardingData }) => {
 	await phoneNumberTextbox.click()
 	await phoneNumberTextbox.fill(onboardingData.phoneNumber)
 
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 	await expect(page.getByText(/Check your texts/i)).toBeVisible()
 
 	const sourceNumber = await prisma.sourceNumber.findFirstOrThrow({
 		select: { phoneNumber: true },
 	})
-	const textMessage = await waitForText(onboardingData.phoneNumber, {
+	const targetPhoneNumber = formatPhoneNumber(onboardingData.phoneNumber)
+	const textMessage = await waitForText(targetPhoneNumber, {
 		errorMessage: 'Onboarding code text not found',
 	})
-	expect(textMessage.To).toBe(onboardingData.phoneNumber)
+	expect(textMessage.To).toBe(targetPhoneNumber)
 	expect(textMessage.From).toBe(sourceNumber.phoneNumber)
 	expect(textMessage.Body).toMatch(/welcome/i)
 	const codeMatch = textMessage.Body.match(CODE_REGEX)
@@ -160,7 +167,7 @@ test('onboarding with a short code', async ({ page, getOnboardingData }) => {
 	const codeInput = page.getByRole('textbox', { name: /code/i })
 	await codeInput.waitFor({ state: 'visible' })
 	await codeInput.fill(code)
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 
 	await expect(page).toHaveURL(`/onboarding`, { timeout: 15_000 })
 })
@@ -173,9 +180,9 @@ test('login as existing user', async ({ page, insertNewUser }) => {
 	await page.goto('/login')
 	await page.waitForLoadState('domcontentloaded')
 
-	const usernameInput = page.getByRole('textbox', { name: /username/i })
-	await usernameInput.waitFor({ state: 'visible' })
-	await usernameInput.fill(user.username)
+	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
+	await phoneNumberInput.waitFor({ state: 'visible' })
+	await phoneNumberInput.fill(user.phoneNumber)
 	await page.getByLabel(/^password$/i).fill(password)
 	await page.getByRole('button', { name: /log in/i }).click()
 
@@ -203,9 +210,9 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 		page.getByRole('heading', { name: /forgot password/i }),
 	).toBeVisible()
 
-	const usernameInput = page.getByRole('textbox', { name: /username/i })
-	await usernameInput.waitFor({ state: 'visible' })
-	await usernameInput.fill(user.username)
+	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
+	await phoneNumberInput.waitFor({ state: 'visible' })
+	await phoneNumberInput.fill(user.phoneNumber)
 	await page.getByRole('button', { name: /recover password/i }).click()
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 	await expect(page.getByText(/check your texts/i)).toBeVisible()
@@ -227,7 +234,7 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 
-	const submitButton = page.getByRole('main').getByRole('button', { name: /submit/i })
+	const submitButton = page.getByRole('main').getByRole('button', { name: /continue/i })
 	await submitButton.waitFor({ state: 'visible' })
 	await submitButton.click()
 
@@ -245,14 +252,15 @@ test('reset password with a link', async ({ page, insertNewUser }) => {
 	await expect(page).toHaveURL('/login', { timeout: 15_000 })
 	await page.waitForLoadState('domcontentloaded')
 
-	const loginUsernameInput = page.getByRole('textbox', { name: /username/i })
-	await loginUsernameInput.waitFor({ state: 'visible' })
-	await loginUsernameInput.fill(user.username)
+	const loginPhoneInput = page.getByRole('textbox', { name: /phone number/i })
+	await loginPhoneInput.waitFor({ state: 'visible' })
+	await loginPhoneInput.fill(user.phoneNumber)
 	await page.getByLabel(/^password$/i).fill(originalPassword)
 	await page.getByRole('button', { name: /log in/i }).click()
 
-	await expect(page.getByText(/invalid username or password/i)).toBeVisible()
+	await expect(page.getByText(/invalid phone number or password/i)).toBeVisible()
 
+	await loginPhoneInput.fill(user.phoneNumber)
 	await page.getByLabel(/^password$/i).fill(newPassword)
 	await page.getByRole('button', { name: /log in/i }).click()
 
@@ -277,9 +285,9 @@ test('reset password with a short code', async ({ page, insertNewUser }) => {
 		page.getByRole('heading', { name: /forgot password/i }),
 	).toBeVisible()
 
-	const usernameInput = page.getByRole('textbox', { name: /username/i })
-	await usernameInput.waitFor({ state: 'visible' })
-	await usernameInput.fill(user.username)
+	const phoneNumberInput = page.getByRole('textbox', { name: /phone number/i })
+	await phoneNumberInput.waitFor({ state: 'visible' })
+	await phoneNumberInput.fill(user.phoneNumber)
 	await page.getByRole('button', { name: /recover password/i }).click()
 	await expect(page).toHaveURL(/\/verify/, { timeout: 15_000 })
 	await expect(page.getByText(/Check your texts/i)).toBeVisible()
@@ -300,7 +308,7 @@ test('reset password with a short code', async ({ page, insertNewUser }) => {
 	const codeInput = page.getByRole('textbox', { name: /code/i })
 	await codeInput.waitFor({ state: 'visible' })
 	await codeInput.fill(code)
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 
 	await expect(page).toHaveURL(`/reset-password`, { timeout: 15_000 })
 })
diff --git a/tests/e2e/recipient-disabled.test.ts b/tests/e2e/recipient-disabled.test.ts
index ba11f23c..79417c72 100644
--- a/tests/e2e/recipient-disabled.test.ts
+++ b/tests/e2e/recipient-disabled.test.ts
@@ -28,17 +28,17 @@ test('Users can disable sending to a recipient', async ({ page, login }) => {
 
 	// Find and check the disabled checkbox
 	const disabledCheckbox = page.getByRole('checkbox', {
-		name: /disable sending to this recipient/i,
+		name: /pause this schedule|resume this schedule/i,
 	})
 	await disabledCheckbox.waitFor({ state: 'visible' })
 	await expect(disabledCheckbox).toBeVisible()
 	await expect(disabledCheckbox).not.toBeChecked()
 
 	// Check the checkbox
-	await disabledCheckbox.check()
+	await disabledCheckbox.check({ force: true })
 
 	// Submit the form
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /save changes/i }).click()
 
 	// Wait for redirect to recipient page
 	await expect(page).toHaveURL(`/recipients/${recipient.id}`, { timeout: 15000 })
@@ -59,8 +59,8 @@ test('Users can disable sending to a recipient', async ({ page, login }) => {
 	await expect(disabledCheckbox).toBeChecked()
 
 	// Uncheck the checkbox to re-enable
-	await disabledCheckbox.uncheck()
-	await page.getByRole('button', { name: /submit/i }).click()
+	await disabledCheckbox.uncheck({ force: true })
+	await page.getByRole('button', { name: /save changes/i }).click()
 
 	// Verify the recipient is now enabled again
 	await expect(page).toHaveURL(`/recipients/${recipient.id}`, { timeout: 15000 })
diff --git a/tests/e2e/send.test.ts b/tests/e2e/send.test.ts
index b9a9fda9..9f38e611 100644
--- a/tests/e2e/send.test.ts
+++ b/tests/e2e/send.test.ts
@@ -33,24 +33,30 @@ test('Users can write and send a message immediately', async ({
 	await page.goto(`/recipients/${recipient.id}`)
 	await page.waitForLoadState('domcontentloaded')
 
-	const newMessageLink = page.getByRole('main').getByRole('link', { name: /new message/i })
+	const newMessageLink = page.getByRole('link', { name: /^new$/i })
 	await newMessageLink.waitFor({ state: 'visible' })
 	await newMessageLink.click()
 
 	await page.waitForLoadState('domcontentloaded')
 
 	const { content: textMessageContent } = createMessage()
-	const messageTextbox = page.getByRole('main').getByRole('textbox', { name: /message/i })
+	const messageTextbox = page.getByRole('textbox', { name: /message/i })
 	await messageTextbox.waitFor({ state: 'visible' })
 	await messageTextbox.fill(textMessageContent)
 
-	await page.getByRole('main').getByRole('button', { name: /save/i }).click()
-
-	await expect(page.getByText(/message created/i)).toBeVisible({ timeout: 15000 })
-
-	const closeToastButton = page.getByRole('button', { name: /close toast/i })
-	await closeToastButton.waitFor({ state: 'visible' })
-	await closeToastButton.click()
+	await page.getByRole('button', { name: /save/i }).click()
+	await waitFor(
+		async () => {
+			const createdMessage = await prisma.message.findFirst({
+				select: { id: true },
+				where: { recipientId: recipient.id, content: textMessageContent },
+			})
+			if (createdMessage) return createdMessage
+		},
+		{ timeout: 15000, errorMessage: 'Message not created' },
+	)
+	await page.goto(`/recipients/${recipient.id}`)
+	await page.waitForLoadState('domcontentloaded')
 
 	const sendNowButton = page.getByRole('button', { name: /send now/i })
 	await sendNowButton.waitFor({ state: 'visible' })
@@ -101,7 +107,7 @@ test('Scheduled messages go out on schedule', async ({ page, login }) => {
 
 	await page.goto(`/recipients/${recipient.id}/past`)
 	await page.waitForLoadState('domcontentloaded')
-	await expect(page.getByText(/no past messages yet/i)).toBeVisible({
+	await expect(page.getByText(/no past messages/i)).toBeVisible({
 		timeout: 15000,
 	})
 
diff --git a/tests/e2e/settings-profile.test.ts b/tests/e2e/settings-profile.test.ts
index 76ab6213..decb5779 100644
--- a/tests/e2e/settings-profile.test.ts
+++ b/tests/e2e/settings-profile.test.ts
@@ -15,14 +15,10 @@ test('Users can update their basic info', async ({ page, login }) => {
 
 	const newUserData = createUser()
 
-	const nameInput = page.getByRole('textbox', { name: /^name/i })
+	const nameInput = page.getByRole('textbox', { name: /your name/i })
 	await nameInput.waitFor({ state: 'visible' })
 	await nameInput.fill(newUserData.name)
 
-	await page
-		.getByRole('textbox', { name: /^username/i })
-		.fill(newUserData.username)
-
 	await page.getByRole('button', { name: /^save/i }).click()
 
 	// Wait for save to complete
@@ -51,7 +47,7 @@ test('Users can update their password', async ({ page, login }) => {
 		.getByRole('textbox', { name: /^confirm new password/i })
 		.fill(newPassword)
 
-	await page.getByRole('button', { name: /^change password/i }).click()
+	await page.getByRole('button', { name: /^save/i }).click()
 
 	await expect(page).toHaveURL(`/settings/profile`, { timeout: 15000 })
 
@@ -78,7 +74,7 @@ test('Users can change their phone number', async ({ page, login }) => {
 	await page.goto('/settings/profile')
 	await page.waitForLoadState('domcontentloaded')
 
-	const changeNumberLink = page.getByRole('link', { name: /change number/i })
+	const changeNumberLink = page.getByRole('link', { name: /edit your phone number/i })
 	await changeNumberLink.waitFor({ state: 'visible' })
 	await changeNumberLink.click()
 
@@ -102,7 +98,7 @@ test('Users can change their phone number', async ({ page, login }) => {
 	const codeInput = page.getByRole('textbox', { name: /code/i })
 	await codeInput.waitFor({ state: 'visible' })
 	await codeInput.fill(code)
-	await page.getByRole('button', { name: /submit/i }).click()
+	await page.getByRole('button', { name: /continue/i }).click()
 
 	await expect(page.getByText(/phone number changed/i)).toBeVisible({ timeout: 15000 })