From 0d9f8c81393ea88d82553aa32726bb69947e52c9 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Sep 2026 06:55:01 +0000
Subject: [PATCH 1/5] Redesign UI across marketing, auth, recipients, and
 settings

- Add self-hosted Inter/Lora fonts, tighter container, global focus styles
- Rework app header/footer: skip link, clear login/signup CTAs, user menu
- Add real Privacy, Terms, Support, and About content on a shared prose layout
- Unify auth pages on an AuthPage card; fix signup link losing redirectTo
- Redesign recipients list, detail, editor (schedule presets, next-send
  preview, pause toggle), message thread, and new-message form
- Rebuild settings: profile, subscription, password, phone, and 2FA pages
- Improve shared components: checkbox, dropdown, search bar, error boundary
- Remove dead /components stub route

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/auth-page.tsx                  |  41 ++
 app/components/error-boundary.tsx             |  90 +++-
 app/components/forms.tsx                      |  24 +-
 app/components/prose-page.tsx                 | 108 +++++
 app/components/search-bar.tsx                 |  57 ++-
 app/components/settings-card.tsx              |  34 ++
 app/components/ui/checkbox.tsx                |  12 +-
 app/components/ui/dropdown-menu.tsx           |  28 +-
 app/components/user-profile.tsx               |  71 ++--
 app/root.tsx                                  |   6 +-
 app/routes/$.tsx                              |  25 +-
 app/routes/_app+/_auth+/forgot-password.tsx   | 125 +++---
 app/routes/_app+/_auth+/login.tsx             | 135 +++---
 app/routes/_app+/_auth+/onboarding.tsx        | 184 +++++----
 app/routes/_app+/_auth+/reset-password.tsx    |  89 ++--
 app/routes/_app+/_auth+/signup.tsx            | 106 +++--
 app/routes/_app+/_auth+/verify.tsx            | 169 ++++----
 app/routes/_app+/_layout.tsx                  | 373 +++++++++++------
 app/routes/_app+/_marketing+/about.tsx        | 184 ++++-----
 app/routes/_app+/_marketing+/index.tsx        | 389 ++++++++++++------
 app/routes/_app+/_marketing+/privacy.tsx      | 192 ++++++++-
 app/routes/_app+/_marketing+/support.tsx      | 150 ++++++-
 app/routes/_app+/_marketing+/tos.tsx          | 168 +++++++-
 .../_app+/recipients+/$recipientId.edit.tsx   |  13 +-
 .../_app+/recipients+/$recipientId.index.tsx  |  93 +++--
 .../_app+/recipients+/$recipientId.new.tsx    |  39 +-
 app/routes/_app+/recipients+/$recipientId.tsx | 159 +++----
 app/routes/_app+/recipients+/__editor.tsx     | 383 ++++++++++-------
 app/routes/_app+/recipients+/_layout.tsx      |  15 +-
 app/routes/_app+/recipients+/index.tsx        | 262 +++++++-----
 app/routes/_app+/recipients+/new.tsx          |  17 +-
 .../_app+/settings.profile+/_layout.tsx       |  31 +-
 .../_app+/settings.profile+/change-number.tsx |  76 ++--
 app/routes/_app+/settings.profile+/index.tsx  | 332 ++++++++-------
 .../_app+/settings.profile+/password.tsx      |  37 +-
 .../_app+/settings.profile+/subscription.tsx  | 265 ++++++++----
 .../settings.profile+/two-factor.disable.tsx  |  25 +-
 .../settings.profile+/two-factor.index.tsx    |  78 ++--
 .../settings.profile+/two-factor.verify.tsx   | 166 +++++---
 app/routes/_app+/users+/$username.tsx         |  11 +-
 app/routes/_app+/users+/index.tsx             |  16 +-
 app/routes/components.tsx                     |   7 -
 app/routes/resources+/theme-switch.tsx        |  41 +-
 app/styles/tailwind.css                       |  40 +-
 bun.lock                                      |   8 +-
 package.json                                  |   2 +
 46 files changed, 3188 insertions(+), 1688 deletions(-)
 create mode 100644 app/components/auth-page.tsx
 create mode 100644 app/components/prose-page.tsx
 create mode 100644 app/components/settings-card.tsx
 delete mode 100644 app/routes/components.tsx

diff --git a/app/components/auth-page.tsx b/app/components/auth-page.tsx
new file mode 100644
index 00000000..191d8724
--- /dev/null
+++ b/app/components/auth-page.tsx
@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react'
+
+export function AuthPage({
+	title,
+	description,
+	children,
+	footer,
+}: {
+	title: string
+	description?: ReactNode
+	children: ReactNode
+	footer?: ReactNode
+}) {
+	return (
+		<main className="container flex flex-1 flex-col items-center justify-center py-12 md:py-20">
+			<div className="w-full max-w-lg">
+				<div className="text-center">
+					<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
+						GratiText
+					</p>
+					<h1 className="text-foreground mt-3 font-serif text-3xl font-semibold text-balance sm:text-4xl">
+						{title}
+					</h1>
+					{description ? (
+						<p className="text-muted-foreground mt-3 text-base text-pretty">
+							{description}
+						</p>
+					) : null}
+				</div>
+				<div className="border-border bg-card mt-8 rounded-[32px] border px-6 py-8 shadow-sm sm:px-8">
+					{children}
+				</div>
+				{footer ? (
+					<div className="text-muted-foreground [&_a]:text-foreground mt-6 text-center text-sm [&_a]:font-semibold [&_a]:underline-offset-4 hover:[&_a]:underline">
+						{footer}
+					</div>
+				) : null}
+			</div>
+		</main>
+	)
+}
diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
index 66108f32..c85e819e 100644
--- a/app/components/error-boundary.tsx
+++ b/app/components/error-boundary.tsx
@@ -3,24 +3,90 @@ import { type ReactElement, useEffect } from 'react'
 import {
 	type ErrorResponse,
 	isRouteErrorResponse,
+	Link,
 	useParams,
 	useRouteError,
 } from 'react-router'
 import { getErrorMessage } from '#app/utils/misc.tsx'
+import { Icon } from './ui/icon.tsx'
 
 type StatusHandler = (info: {
 	error: ErrorResponse
 	params: Record<string, string | undefined>
 }) => ReactElement | null
 
+function statusTitle(status: number) {
+	switch (status) {
+		case 400:
+			return 'That request did not look right'
+		case 401:
+			return 'Please log in to continue'
+		case 403:
+			return 'You are not allowed to do that'
+		case 404:
+			return 'We could not find that'
+		case 429:
+			return 'Slow down a little'
+		default:
+			return status >= 500
+				? 'Something went wrong on our end'
+				: 'Something went wrong'
+	}
+}
+
+export function ErrorMessage({
+	eyebrow,
+	title,
+	description,
+}: {
+	eyebrow?: string
+	title: string
+	description?: string | null
+}) {
+	return (
+		<div className="flex flex-col items-center gap-3 text-center">
+			{eyebrow ? (
+				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
+					{eyebrow}
+				</p>
+			) : null}
+			<h1 className="text-foreground text-2xl font-bold sm:text-3xl">
+				{title}
+			</h1>
+			{description ? (
+				<p className="text-muted-foreground max-w-prose text-sm break-words sm:text-base">
+					{description}
+				</p>
+			) : null}
+			<Link
+				to="/"
+				className="text-foreground mt-3 inline-flex items-center gap-2 text-sm font-semibold underline-offset-4 hover:underline"
+			>
+				<Icon name="arrow-left" size="sm" aria-hidden="true" />
+				Back to home
+			</Link>
+		</div>
+	)
+}
+
 export function GeneralErrorBoundary({
 	defaultStatusHandler = ({ error }) => (
-		<p>
-			{error.status} {error.data}
-		</p>
+		<ErrorMessage
+			eyebrow={`Error ${error.status}`}
+			title={statusTitle(error.status)}
+			description={
+				typeof error.data === 'string' && error.data ? error.data : null
+			}
+		/>
 	),
 	statusHandlers,
-	unexpectedErrorHandler = (error) => <p>{getErrorMessage(error)}</p>,
+	unexpectedErrorHandler = (error) => (
+		<ErrorMessage
+			eyebrow="Unexpected error"
+			title="Something went wrong"
+			description={getErrorMessage(error)}
+		/>
+	),
 }: {
 	defaultStatusHandler?: StatusHandler
 	statusHandlers?: Record<number, StatusHandler>
@@ -39,13 +105,15 @@ export function GeneralErrorBoundary({
 	}
 
 	return (
-		<div className="text-h2 container flex items-center justify-center p-20">
-			{isRouteErrorResponse(error)
-				? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
-						error,
-						params,
-					})
-				: unexpectedErrorHandler(error)}
+		<div className="container flex flex-1 items-center justify-center py-16 md:py-24">
+			<div className="border-border bg-card text-foreground w-full max-w-xl rounded-[32px] border px-6 py-10 text-center shadow-sm sm:px-10">
+				{isRouteErrorResponse(error)
+					? (statusHandlers?.[error.status] ?? defaultStatusHandler)({
+							error,
+							params,
+						})
+					: unexpectedErrorHandler(error)}
+			</div>
 		</div>
 	)
 }
diff --git a/app/components/forms.tsx b/app/components/forms.tsx
index 0a6d2dfd..9663bf15 100644
--- a/app/components/forms.tsx
+++ b/app/components/forms.tsx
@@ -5,6 +5,7 @@ import {
 	type OTPInputProps,
 } from 'input-otp'
 import React, { useId } from 'react'
+import { cn } from '#app/utils/misc.tsx'
 import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
 import { Icon } from './ui/icon.tsx'
 import {
@@ -46,7 +47,7 @@ export function Field({
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	inputProps: React.InputHTMLAttributes<HTMLInputElement>
+	inputProps: React.ComponentProps<'input'>
 	errors?: ListOfErrors
 	className?: string
 }) {
@@ -61,6 +62,7 @@ export function Field({
 				aria-invalid={errorId ? true : undefined}
 				aria-describedby={errorId}
 				{...inputProps}
+				className={cn('mt-2', inputProps.className)}
 			/>
 			<div className="min-h-[24px] px-4 pt-2 pb-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
@@ -76,7 +78,7 @@ export function SelectField({
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	selectProps: React.SelectHTMLAttributes<HTMLSelectElement>
+	selectProps: React.ComponentProps<'select'>
 	errors?: ListOfErrors
 	className?: string
 }) {
@@ -86,7 +88,7 @@ export function SelectField({
 	return (
 		<div className={className}>
 			<Label htmlFor={id} {...labelProps} />
-			<div className="relative">
+			<div className="relative mt-2">
 				<select
 					id={id}
 					aria-invalid={errorId ? true : undefined}
@@ -174,7 +176,7 @@ export function TextareaField({
 	className,
 }: {
 	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
+	textareaProps: React.ComponentProps<'textarea'>
 	errors?: ListOfErrors
 	className?: string
 }) {
@@ -189,6 +191,7 @@ export function TextareaField({
 				aria-invalid={errorId ? true : undefined}
 				aria-describedby={errorId}
 				{...textareaProps}
+				className={cn('mt-2', textareaProps.className)}
 			/>
 			<div className="min-h-[24px] px-4 pt-2 pb-2">
 				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
@@ -226,7 +229,7 @@ export function CheckboxField({
 
 	return (
 		<div className={className}>
-			<div className="flex gap-2">
+			<div className="flex items-start gap-3">
 				<Checkbox
 					{...checkboxProps}
 					id={id}
@@ -246,16 +249,19 @@ export function CheckboxField({
 						buttonProps.onBlur?.(event)
 					}}
 					type="button"
+					className="mt-0.5"
 				/>
 				<label
 					htmlFor={id}
 					{...labelProps}
-					className="text-body-xs text-muted-foreground self-center"
+					className="text-foreground cursor-pointer text-sm leading-snug"
 				/>
 			</div>
-			<div className="px-4 pt-2 pb-2">
-				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
-			</div>
+			{errorId ? (
+				<div className="pt-2 pl-8">
+					<ErrorList id={errorId} errors={errors} />
+				</div>
+			) : null}
 		</div>
 	)
 }
diff --git a/app/components/prose-page.tsx b/app/components/prose-page.tsx
new file mode 100644
index 00000000..113f1515
--- /dev/null
+++ b/app/components/prose-page.tsx
@@ -0,0 +1,108 @@
+import { type ReactNode } from 'react'
+import { Link } from 'react-router'
+import { Icon } from './ui/icon.tsx'
+
+export function ProsePage({
+	eyebrow,
+	title,
+	intro,
+	updatedAt,
+	children,
+}: {
+	eyebrow?: string
+	title: string
+	intro?: ReactNode
+	updatedAt?: string
+	children: ReactNode
+}) {
+	return (
+		<main className="bg-background pb-20">
+			<div className="container max-w-3xl pt-8 md:pt-12">
+				<Link
+					to="/"
+					className="text-muted-foreground hover:text-foreground inline-flex items-center gap-2 text-sm font-semibold transition-colors"
+				>
+					<Icon name="arrow-left" size="sm" aria-hidden="true" />
+					Back home
+				</Link>
+				<header className="mt-6 space-y-4">
+					{eyebrow ? (
+						<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
+							{eyebrow}
+						</p>
+					) : null}
+					<h1 className="text-foreground font-serif text-4xl font-semibold text-balance md:text-5xl">
+						{title}
+					</h1>
+					{intro ? (
+						<p className="text-muted-foreground text-lg leading-relaxed text-pretty">
+							{intro}
+						</p>
+					) : null}
+					{updatedAt ? (
+						<p className="text-muted-foreground text-sm">
+							Last updated {updatedAt}
+						</p>
+					) : null}
+				</header>
+				<div className="mt-10 space-y-10">{children}</div>
+			</div>
+		</main>
+	)
+}
+
+export function ProseSection({
+	id,
+	title,
+	children,
+}: {
+	id: string
+	title: string
+	children: ReactNode
+}) {
+	return (
+		<section id={id} aria-labelledby={`${id}-heading`} className="scroll-mt-24">
+			<h2
+				id={`${id}-heading`}
+				className="text-foreground text-xl font-bold md:text-2xl"
+			>
+				{title}
+			</h2>
+			<div className="text-muted-foreground [&_a]:text-foreground [&_strong]:text-foreground mt-3 space-y-3 text-base leading-relaxed [&_a]:font-semibold [&_a]:underline [&_a]:underline-offset-4 [&_li]:pl-1 [&_strong]:font-semibold [&_ul]:list-disc [&_ul]:space-y-1.5 [&_ul]:pl-5">
+				{children}
+			</div>
+		</section>
+	)
+}
+
+export function ProseTableOfContents({
+	items,
+}: {
+	items: Array<{ id: string; title: string }>
+}) {
+	return (
+		<nav
+			aria-label="On this page"
+			className="border-border bg-card rounded-[24px] border p-5 shadow-sm"
+		>
+			<p className="text-muted-foreground text-xs font-semibold tracking-[0.2em] uppercase">
+				On this page
+			</p>
+			<ol className="mt-3 grid gap-1.5 text-sm sm:grid-cols-2">
+				{items.map((item, index) => (
+					<li key={item.id}>
+						<a
+							href={`#${item.id}`}
+							className="text-foreground hover:text-brand inline-flex items-baseline gap-2 font-medium transition-colors"
+						>
+							<span className="text-muted-foreground tabular-nums">
+								{index + 1}.
+							</span>
+							{item.title}
+						</a>
+					</li>
+				))}
+			</ol>
+		</nav>
+	)
+}
diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index 61d5a3e7..da459d5f 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -1,4 +1,4 @@
-import { useId } from 'react'
+import { useId, useRef } from 'react'
 import { Form, useSearchParams, useSubmit } from 'react-router'
 import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
@@ -20,6 +20,7 @@ export function SearchBar({
 	showDateFilter?: boolean
 }) {
 	const id = useId()
+	const formRef = useRef<HTMLFormElement>(null)
 	const startDateId = `${id}-start-date`
 	const endDateId = `${id}-end-date`
 	const [searchParams] = useSearchParams()
@@ -28,8 +29,12 @@ export function SearchBar({
 		formMethod: 'GET',
 		formAction: action,
 	})
+	const searchValue = searchParams.get('search') ?? ''
 	const startDateValue = searchParams.get('startDate') ?? ''
 	const endDateValue = searchParams.get('endDate') ?? ''
+	const hasActiveFilters = Boolean(
+		searchValue || startDateValue || endDateValue,
+	)
 
 	const handleFormChange = useDebounce((form: HTMLFormElement) => {
 		void submit(form)
@@ -37,29 +42,38 @@ export function SearchBar({
 
 	return (
 		<Form
+			ref={formRef}
 			method="GET"
 			action={action}
+			role="search"
 			className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between"
 			onChange={(e) => autoSubmit && handleFormChange(e.currentTarget)}
 		>
 			<div className="flex w-full items-center gap-2 sm:flex-1">
-				<div className="min-w-0 flex-1">
+				<div className="relative min-w-0 flex-1">
 					<Label htmlFor={id} className="sr-only">
-						Search
+						Search messages
 					</Label>
+					<Icon
+						name="magnifying-glass"
+						size="sm"
+						aria-hidden="true"
+						className="text-muted-foreground pointer-events-none absolute top-1/2 left-4 -translate-y-1/2"
+					/>
 					<Input
 						type="search"
 						name="search"
 						id={id}
-						defaultValue={searchParams.get('search') ?? ''}
-						placeholder="Search"
-						className="w-full"
+						defaultValue={searchValue}
+						placeholder="Search messages"
+						className="w-full pl-11"
 						autoFocus={autoFocus}
 					/>
 				</div>
 				<StatusButton
 					type="submit"
 					size="icon-lg"
+					variant="secondary"
 					status={isSubmitting ? 'pending' : status}
 					className="shrink-0"
 				>
@@ -69,28 +83,47 @@ export function SearchBar({
 			</div>
 			{showDateFilter ? (
 				<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-end">
-					<div className="min-w-0 space-y-1 sm:w-[160px]">
-						<Label htmlFor={startDateId}>Start date</Label>
+					<div className="min-w-0 sm:w-[160px]">
+						<Label htmlFor={startDateId}>From</Label>
 						<Input
 							type="date"
 							name="startDate"
 							id={startDateId}
 							defaultValue={startDateValue}
-							className="w-full"
+							className="mt-2 w-full"
 						/>
 					</div>
-					<div className="min-w-0 space-y-1 sm:w-[160px]">
-						<Label htmlFor={endDateId}>End date</Label>
+					<div className="min-w-0 sm:w-[160px]">
+						<Label htmlFor={endDateId}>To</Label>
 						<Input
 							type="date"
 							name="endDate"
 							id={endDateId}
 							defaultValue={endDateValue}
-							className="w-full"
+							className="mt-2 w-full"
 						/>
 					</div>
 				</div>
 			) : null}
+			{hasActiveFilters ? (
+				<div className="w-full">
+					<button
+						type="button"
+						onClick={() => {
+							const form = formRef.current
+							if (!form) return
+							for (const element of Array.from(form.elements)) {
+								if (element instanceof HTMLInputElement) element.value = ''
+							}
+							void submit(form)
+						}}
+						className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm font-semibold transition-colors"
+					>
+						<Icon name="cross-1" size="xs" aria-hidden="true" />
+						Clear search and filters
+					</button>
+				</div>
+			) : null}
 		</Form>
 	)
 }
diff --git a/app/components/settings-card.tsx b/app/components/settings-card.tsx
new file mode 100644
index 00000000..9c14315f
--- /dev/null
+++ b/app/components/settings-card.tsx
@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react'
+import { cn } from '#app/utils/misc.tsx'
+
+export function SettingsCard({
+	title,
+	description,
+	children,
+	className,
+	headingId = 'settings-card-heading',
+}: {
+	title: string
+	description?: ReactNode
+	children: ReactNode
+	className?: string
+	headingId?: string
+}) {
+	return (
+		<section
+			aria-labelledby={headingId}
+			className={cn(
+				'border-border bg-card rounded-[32px] border p-6 shadow-sm sm:p-8',
+				className,
+			)}
+		>
+			<h1 id={headingId} className="text-foreground text-2xl font-bold">
+				{title}
+			</h1>
+			{description ? (
+				<div className="text-muted-foreground mt-2 text-sm">{description}</div>
+			) : null}
+			<div className="mt-6">{children}</div>
+		</section>
+	)
+}
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
index 07381701..3c8110c5 100644
--- a/app/components/ui/checkbox.tsx
+++ b/app/components/ui/checkbox.tsx
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+			'peer border-input bg-card ring-offset-background focus-visible:ring-ring hover:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground aria-[invalid]:border-input-invalid flex h-5 w-5 shrink-0 items-center justify-center rounded-md border shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
 			className,
 		)}
 		{...props}
@@ -25,11 +25,13 @@ const Checkbox = React.forwardRef<
 		<CheckboxPrimitive.Indicator
 			className={cn('flex items-center justify-center text-current')}
 		>
-			<svg viewBox="0 0 8 8">
+			<svg viewBox="0 0 12 12" className="h-3 w-3" aria-hidden="true">
 				<path
-					d="M1,4 L3,6 L7,2"
-					stroke="currentcolor"
-					strokeWidth="1"
+					d="M2.5 6.5 L5 9 L9.5 3.5"
+					stroke="currentColor"
+					strokeWidth="1.75"
+					strokeLinecap="round"
+					strokeLinejoin="round"
 					fill="none"
 				/>
 			</svg>
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index 6e2ec064..23f4168b 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -2,6 +2,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import * as React from 'react'
 
 import { cn } from '#app/utils/misc.tsx'
+import { Icon } from './icon.tsx'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -31,7 +32,12 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		{...props}
 	>
 		{children}
-		<span className="ml-auto h-4 w-4">▶️</span>
+		<Icon
+			name="chevron-right"
+			size="sm"
+			className="ml-auto"
+			aria-hidden="true"
+		/>
 	</DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -62,7 +68,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+				'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[10rem] overflow-hidden rounded-2xl border p-1.5 shadow-lg',
 				className,
 			)}
 			{...props}
@@ -80,7 +86,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			'focus:bg-accent focus:text-accent-foreground relative flex items-center rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+			'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center rounded-xl px-3 py-2 text-sm font-medium transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 			inset && 'pl-8',
 			className,
 		)}
@@ -104,16 +110,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 			<DropdownMenuPrimitive.ItemIndicator>
-				<span className="h-4 w-4">
-					<svg viewBox="0 0 8 8">
-						<path
-							d="M1,4 L3,6 L7,2"
-							stroke="black"
-							strokeWidth="1"
-							fill="none"
-						/>
-					</svg>
-				</span>
+				<Icon name="check" size="sm" aria-hidden="true" />
 			</DropdownMenuPrimitive.ItemIndicator>
 		</span>
 		{children}
@@ -136,7 +133,10 @@ const DropdownMenuRadioItem = React.forwardRef<
 	>
 		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 			<DropdownMenuPrimitive.ItemIndicator>
-				<span className="h-2 w-2">⚪</span>
+				<span
+					className="block h-2 w-2 rounded-full bg-current"
+					aria-hidden="true"
+				/>
 			</DropdownMenuPrimitive.ItemIndicator>
 		</span>
 		{children}
diff --git a/app/components/user-profile.tsx b/app/components/user-profile.tsx
index 90dac58d..b69cd4c8 100644
--- a/app/components/user-profile.tsx
+++ b/app/components/user-profile.tsx
@@ -1,5 +1,4 @@
 import { Form, Link, useLoaderData } from 'react-router'
-import { Spacer } from '#app/components/spacer.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
@@ -27,50 +26,50 @@ export function UserProfileView({
 	isLoggedInUser,
 }: UserProfileViewProps) {
 	const userDisplayName = user.name ?? user.username
+	const initial = userDisplayName.trim().charAt(0).toUpperCase() || '?'
 
 	return (
-		<div className="container mt-36 mb-48 flex flex-col items-center justify-center">
-			<Spacer size="4xs" />
-			<div className="flex flex-col items-center">
-				<div className="flex flex-wrap items-center justify-center gap-4">
-					<h1 className="text-h2 text-center">{userDisplayName}</h1>
-				</div>
-				<p className="text-muted-foreground mt-2 text-center">
+		<main className="container flex flex-1 items-center justify-center py-16 md:py-24">
+			<div className="border-border bg-card flex w-full max-w-md flex-col items-center rounded-[32px] border px-6 py-10 text-center shadow-sm sm:px-10">
+				<span
+					aria-hidden="true"
+					className="bg-primary text-primary-foreground flex h-20 w-20 items-center justify-center rounded-full font-serif text-3xl font-semibold"
+				>
+					{initial}
+				</span>
+				<h1 className="text-foreground mt-5 font-serif text-3xl font-semibold break-words sm:text-4xl">
+					{userDisplayName}
+				</h1>
+				<p className="text-muted-foreground mt-1 text-sm">@{user.username}</p>
+				<p className="text-muted-foreground mt-3 text-sm">
 					Joined {userJoinedDisplay}
 				</p>
 				{isLoggedInUser ? (
-					<Form action="/logout" method="POST" className="mt-3">
-						<Button type="submit" variant="link" size="pill">
-							<Icon name="exit" className="scale-125 max-md:scale-150">
-								Logout
-							</Icon>
-						</Button>
-					</Form>
-				) : null}
-				<div className="mt-10 flex gap-4">
-					{isLoggedInUser ? (
-						<>
-							<Button asChild>
-								<Link to="/recipients" prefetch="intent">
-									My recipients
-								</Link>
-							</Button>
-							<Button asChild>
-								<Link to="/settings/profile" prefetch="intent">
-									Edit profile
-								</Link>
-							</Button>
-						</>
-					) : (
-						<Button asChild>
+					<div className="mt-8 flex w-full flex-col gap-3 sm:flex-row sm:justify-center">
+						<Button asChild variant="brand">
 							<Link to="/recipients" prefetch="intent">
-								{userDisplayName}'s recipients
+								<Icon name="message" size="sm" aria-hidden="true" />
+								My recipients
+							</Link>
+						</Button>
+						<Button asChild variant="secondary">
+							<Link to="/settings/profile" prefetch="intent">
+								<Icon name="settings" size="sm" aria-hidden="true" />
+								Settings
 							</Link>
 						</Button>
-					)}
-				</div>
+					</div>
+				) : null}
+				{isLoggedInUser ? (
+					<Form action="/logout" method="POST" className="mt-6">
+						<Button type="submit" variant="ghost" size="sm">
+							<Icon name="exit" size="sm" aria-hidden="true" />
+							Logout
+						</Button>
+					</Form>
+				) : null}
 			</div>
-		</div>
+		</main>
 	)
 }
 
diff --git a/app/root.tsx b/app/root.tsx
index a07a5314..959443c5 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -55,7 +55,11 @@ export const links: LinksFunction = () => {
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [
 		{ title: data ? 'GratiText' : 'Error | GratiText' },
-		{ name: 'description', content: `Your own captain's log` },
+		{
+			name: 'description',
+			content:
+				'GratiText helps you send thoughtful, personal gratitude texts to the people you love on a schedule you choose.',
+		},
 	]
 }
 
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
index d523818a..75162e16 100644
--- a/app/routes/$.tsx
+++ b/app/routes/$.tsx
@@ -32,15 +32,22 @@ export function ErrorBoundary() {
 		<GeneralErrorBoundary
 			statusHandlers={{
 				404: () => (
-					<div className="flex flex-col gap-6">
-						<div className="flex flex-col gap-3">
-							<h1>We can't find this page:</h1>
-							<pre className="text-body-lg break-all whitespace-pre-wrap">
-								{location.pathname}
-							</pre>
-						</div>
-						<Link to="/" className="text-body-md underline">
-							<Icon name="arrow-left">Back to home</Icon>
+					<div className="flex flex-col items-center gap-3 text-center">
+						<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
+							Error 404
+						</p>
+						<h1 className="text-foreground text-2xl font-bold sm:text-3xl">
+							We can't find this page
+						</h1>
+						<pre className="bg-muted text-muted-foreground max-w-full rounded-full px-4 py-2 font-mono text-sm break-all whitespace-pre-wrap">
+							{location.pathname}
+						</pre>
+						<Link
+							to="/"
+							className="text-foreground mt-3 inline-flex items-center gap-2 text-sm font-semibold underline-offset-4 hover:underline"
+						>
+							<Icon name="arrow-left" size="sm" aria-hidden="true" />
+							Back to home
 						</Link>
 					</div>
 				),
diff --git a/app/routes/_app+/_auth+/forgot-password.tsx b/app/routes/_app+/_auth+/forgot-password.tsx
index adde23a8..9e963f4c 100644
--- a/app/routes/_app+/_auth+/forgot-password.tsx
+++ b/app/routes/_app+/_auth+/forgot-password.tsx
@@ -15,6 +15,7 @@ import {
 } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
@@ -138,76 +139,64 @@ export default function ForgotPasswordRoute() {
 	})
 
 	return (
-		<div className="container flex flex-col items-center justify-center pt-20 pb-32">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
+		<AuthPage
+			title="Forgot your password?"
+			description="No worries. Enter the phone number on your account and we'll text you a reset code."
+			footer={
+				<p>
+					Remembered it? <Link to="/login">Back to login</Link>
 				</p>
-				<h1 className="text-h1 mt-3">Forgot Password</h1>
-				<p className="text-body-md text-muted-foreground mt-3">
-					No worries, we'll send you reset instructions.
-				</p>
-			</div>
-			<div className="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border 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>
-					<ErrorList errors={form.errors} id={form.errorId} />
-					<StatusButton
-						variant="destructive"
-						className="w-full"
-						status={
-							forgotPassword.state === 'submitting'
-								? 'pending'
-								: (form.status ?? 'idle')
-						}
-						type="submit"
-						disabled={forgotPassword.state !== 'idle'}
-					>
-						Recover password
-					</StatusButton>
-				</forgotPassword.Form>
-				<Link
-					to="/login"
-					className="text-body-sm mt-6 block text-center font-bold"
+			}
+		>
+			<forgotPassword.Form
+				method="POST"
+				{...getFormProps(form)}
+				className="space-y-6"
+			>
+				<HoneypotInputs />
+				<div className="grid gap-4 sm: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>
+				<ErrorList errors={form.errors} id={form.errorId} />
+				<StatusButton
+					variant="brand"
+					className="w-full"
+					status={
+						forgotPassword.state === 'submitting'
+							? 'pending'
+							: (form.status ?? 'idle')
+					}
+					type="submit"
+					disabled={forgotPassword.state !== 'idle'}
 				>
-					Back to Login
-				</Link>
-			</div>
-		</div>
+					Recover password
+				</StatusButton>
+			</forgotPassword.Form>
+		</AuthPage>
 	)
 }
 
diff --git a/app/routes/_app+/_auth+/login.tsx b/app/routes/_app+/_auth+/login.tsx
index dd065930..dff2462c 100644
--- a/app/routes/_app+/_auth+/login.tsx
+++ b/app/routes/_app+/_auth+/login.tsx
@@ -12,9 +12,9 @@ import {
 } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { CheckboxField, ErrorList, Field } 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'
@@ -96,85 +96,76 @@ export default function LoginPage() {
 		shouldRevalidate: 'onBlur',
 	})
 
+	const signupTo = redirectTo
+		? `/signup?redirectTo=${encodeURIComponent(redirectTo)}`
+		: '/signup'
+
 	return (
-		<div className="container flex flex-col items-center justify-center pt-20 pb-32">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-h1 mt-3">Stay Close, Even When Apart</h1>
-				<p className="text-body-md text-muted-foreground mt-3">
-					Please enter your account details.
+		<AuthPage
+			title="Welcome back"
+			description="Log in to keep the gratitude flowing."
+			footer={
+				<p>
+					New here? <Link to={signupTo}>Create an account</Link>
 				</p>
-			</div>
-			<Spacer size="xs" />
-			<div className="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border px-6 py-8 shadow-sm">
-				<Form method="POST" {...getFormProps(form)} className="space-y-6">
-					<HoneypotInputs />
-					<Field
-						labelProps={{ children: 'Username' }}
-						inputProps={{
-							...getInputProps(fields.username, { type: 'text' }),
-							autoFocus: true,
-							autoComplete: 'username',
-						}}
-						errors={fields.username.errors}
-					/>
-
-					<Field
-						labelProps={{ children: 'Password' }}
-						inputProps={{
-							...getInputProps(fields.password, {
-								type: 'password',
-							}),
-							autoComplete: 'current-password',
+			}
+		>
+			<Form method="POST" {...getFormProps(form)} className="space-y-6">
+				<HoneypotInputs />
+				<Field
+					labelProps={{ children: 'Username' }}
+					inputProps={{
+						...getInputProps(fields.username, { type: 'text' }),
+						autoFocus: true,
+						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 flex-wrap items-center justify-between gap-3">
+					<CheckboxField
+						labelProps={{
+							htmlFor: fields.remember.id,
+							children: 'Remember me',
 						}}
-						errors={fields.password.errors}
+						buttonProps={getInputProps(fields.remember, {
+							type: 'checkbox',
+						})}
+						errors={fields.remember.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
-						variant="brand"
-						className="w-full"
-						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'
-						}
+						to="/forgot-password"
+						className="text-foreground text-sm font-semibold underline-offset-4 hover:underline"
 					>
-						Create an account
+						Forgot password?
 					</Link>
 				</div>
-			</div>
-		</div>
+
+				<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
+				<ErrorList errors={form.errors} id={form.errorId} />
+
+				<StatusButton
+					variant="brand"
+					className="w-full"
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
+					type="submit"
+					disabled={isPending}
+				>
+					Log in
+				</StatusButton>
+			</Form>
+		</AuthPage>
 	)
 }
 
diff --git a/app/routes/_app+/_auth+/onboarding.tsx b/app/routes/_app+/_auth+/onboarding.tsx
index 82c37a7c..33d5cd8b 100644
--- a/app/routes/_app+/_auth+/onboarding.tsx
+++ b/app/routes/_app+/_auth+/onboarding.tsx
@@ -7,14 +7,15 @@ import {
 	type ActionFunctionArgs,
 	type MetaFunction,
 	Form,
+	Link,
 	useActionData,
 	useSearchParams,
 } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
-import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireAnonymous, sessionKey, signup } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -143,90 +144,101 @@ export default function SignupRoute() {
 	})
 
 	return (
-		<div className="container flex min-h-full flex-col items-center justify-center pt-20 pb-32">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-h1 mt-3">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="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border 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={{
-							...getInputProps(fields.username, { type: 'text' }),
-							autoComplete: 'username',
-							className: 'lowercase',
-						}}
-						errors={fields.username.errors}
-					/>
-					<Field
-						labelProps={{ htmlFor: fields.password.id, children: 'Password' }}
-						inputProps={{
-							...getInputProps(fields.password, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						errors={fields.password.errors}
-					/>
-					<Field
-						labelProps={{
-							htmlFor: fields.confirmPassword.id,
-							children: 'Confirm Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.confirmPassword, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						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' })} />
-					<ErrorList errors={form.errors} id={form.errorId} />
-					<StatusButton
-						variant="brand"
-						className="w-full"
-						status={isPending ? 'pending' : (form.status ?? 'idle')}
-						type="submit"
-						disabled={isPending}
-					>
-						Create an Account
-					</StatusButton>
-				</Form>
-			</div>
-		</div>
+		<AuthPage
+			title="Almost there"
+			description="Your number is verified. Finish setting up your account."
+		>
+			<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={{
+						...getInputProps(fields.username, { type: 'text' }),
+						autoComplete: 'username',
+						className: 'lowercase',
+					}}
+					errors={fields.username.errors}
+				/>
+				<Field
+					labelProps={{ htmlFor: fields.password.id, children: 'Password' }}
+					inputProps={{
+						...getInputProps(fields.password, { type: 'password' }),
+						autoComplete: 'new-password',
+					}}
+					errors={fields.password.errors}
+				/>
+				<Field
+					labelProps={{
+						htmlFor: fields.confirmPassword.id,
+						children: 'Confirm Password',
+					}}
+					inputProps={{
+						...getInputProps(fields.confirmPassword, { type: 'password' }),
+						autoComplete: 'new-password',
+					}}
+					errors={fields.confirmPassword.errors}
+				/>
+				<CheckboxField
+					labelProps={{
+						htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
+						children: (
+							<>
+								I agree to the{' '}
+								<Link
+									to="/tos"
+									target="_blank"
+									rel="noreferrer"
+									className="font-semibold underline underline-offset-4"
+								>
+									Terms of Service
+								</Link>{' '}
+								and{' '}
+								<Link
+									to="/privacy"
+									target="_blank"
+									rel="noreferrer"
+									className="font-semibold underline underline-offset-4"
+								>
+									Privacy Policy
+								</Link>
+							</>
+						),
+					}}
+					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} />
+				<StatusButton
+					variant="brand"
+					className="w-full"
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
+					type="submit"
+					disabled={isPending}
+				>
+					Create an Account
+				</StatusButton>
+			</Form>
+		</AuthPage>
 	)
 }
diff --git a/app/routes/_app+/_auth+/reset-password.tsx b/app/routes/_app+/_auth+/reset-password.tsx
index 692cafd7..676a7ec4 100644
--- a/app/routes/_app+/_auth+/reset-password.tsx
+++ b/app/routes/_app+/_auth+/reset-password.tsx
@@ -10,6 +10,7 @@ import {
 	useActionData,
 	useLoaderData,
 } from 'react-router'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
@@ -84,56 +85,48 @@ export default function ResetPasswordPage() {
 	})
 
 	return (
-		<div className="container flex flex-col items-center justify-center pt-20 pb-32">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-h1 mt-3">Reset Your Password</h1>
-				<p className="text-body-md text-muted-foreground mt-3">
-					Hi, {data.resetPasswordUsername}. Let's set a new password.
-				</p>
-			</div>
-			<div className="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border px-6 py-8 shadow-sm">
-				<Form method="POST" {...getFormProps(form)} className="space-y-6">
-					<Field
-						labelProps={{
-							htmlFor: fields.password.id,
-							children: 'New Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.password, { type: 'password' }),
-							autoComplete: 'new-password',
-							autoFocus: true,
-						}}
-						errors={fields.password.errors}
-					/>
-					<Field
-						labelProps={{
-							htmlFor: fields.confirmPassword.id,
-							children: 'Confirm Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.confirmPassword, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						errors={fields.confirmPassword.errors}
-					/>
+		<AuthPage
+			title="Reset your password"
+			description={`Hi ${data.resetPasswordUsername}, let's set a new password.`}
+		>
+			<Form method="POST" {...getFormProps(form)} className="space-y-6">
+				<Field
+					labelProps={{
+						htmlFor: fields.password.id,
+						children: 'New Password',
+					}}
+					inputProps={{
+						...getInputProps(fields.password, { type: 'password' }),
+						autoComplete: 'new-password',
+						autoFocus: true,
+					}}
+					errors={fields.password.errors}
+				/>
+				<Field
+					labelProps={{
+						htmlFor: fields.confirmPassword.id,
+						children: 'Confirm Password',
+					}}
+					inputProps={{
+						...getInputProps(fields.confirmPassword, { type: 'password' }),
+						autoComplete: 'new-password',
+					}}
+					errors={fields.confirmPassword.errors}
+				/>
 
-					<ErrorList errors={form.errors} id={form.errorId} />
+				<ErrorList errors={form.errors} id={form.errorId} />
 
-					<StatusButton
-						variant="brand"
-						className="w-full"
-						status={isPending ? 'pending' : (form.status ?? 'idle')}
-						type="submit"
-						disabled={isPending}
-					>
-						Reset password
-					</StatusButton>
-				</Form>
-			</div>
-		</div>
+				<StatusButton
+					variant="brand"
+					className="w-full"
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
+					type="submit"
+					disabled={isPending}
+				>
+					Reset password
+				</StatusButton>
+			</Form>
+		</AuthPage>
 	)
 }
 
diff --git a/app/routes/_app+/_auth+/signup.tsx b/app/routes/_app+/_auth+/signup.tsx
index 9f1e3726..4f1354ae 100644
--- a/app/routes/_app+/_auth+/signup.tsx
+++ b/app/routes/_app+/_auth+/signup.tsx
@@ -11,10 +11,12 @@ import {
 	type ActionFunctionArgs,
 	type MetaFunction,
 	Form,
+	Link,
 	useActionData,
 } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, Field, SelectField } from '#app/components/forms.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
@@ -128,63 +130,55 @@ export default function SignupRoute() {
 	})
 
 	return (
-		<div className="container flex flex-col items-center justify-center pt-20 pb-32">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
+		<AuthPage
+			title="Create your account"
+			description="Enter your mobile number and we'll text you a code to get started. Your first 14 days are free."
+			footer={
+				<p>
+					Already have an account? <Link to="/login">Log in</Link>
 				</p>
-				<h1 className="text-h1 mt-3">
-					Create and Nurture Lasting Bonds With Your Loved Ones
-				</h1>
-				<p className="text-body-md text-muted-foreground mt-3">
-					Please enter your phone number along with your country code.
-				</p>
-			</div>
-			<div className="border-border bg-card mt-8 w-full max-w-lg rounded-[32px] border 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
-						variant="brand"
-						className="w-full"
-						status={isPending ? 'pending' : (form.status ?? 'idle')}
-						type="submit"
-						disabled={isPending}
-					>
-						Continue
-					</StatusButton>
-				</Form>
-			</div>
-		</div>
+			}
+		>
+			<Form method="POST" {...getFormProps(form)} className="space-y-6">
+				<HoneypotInputs />
+				<div className="grid gap-4 sm: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
+					variant="brand"
+					className="w-full"
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
+					type="submit"
+					disabled={isPending}
+				>
+					Continue
+				</StatusButton>
+			</Form>
+		</AuthPage>
 	)
 }
 
diff --git a/app/routes/_app+/_auth+/verify.tsx b/app/routes/_app+/_auth+/verify.tsx
index fc0d82a6..e51dabc3 100644
--- a/app/routes/_app+/_auth+/verify.tsx
+++ b/app/routes/_app+/_auth+/verify.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
+import { AuthPage } from '#app/components/auth-page.tsx'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList, OTPField } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -53,32 +54,34 @@ export default function VerifyRoute() {
 	)
 	const type = parseWithZoddType.success ? parseWithZoddType.data : null
 
-	const headingClasses = 'text-h2 sm:text-h1'
-	const bodyClasses = 'text-body-md text-muted-foreground mt-4'
-	const buildHeading = (title: string, description: string) => (
-		<>
-			<h1 className={headingClasses}>{title}</h1>
-			<p className={bodyClasses}>{description}</p>
-		</>
-	)
-	const checkPhoneNumber = buildHeading(
-		'Check Your Texts',
-		"We've texted you a code to verify your phone number",
-	)
+	const checkPhoneNumber = {
+		title: 'Check your texts',
+		description: "We've texted you a code to verify your phone number.",
+	}
 
-	const headings: Record<VerificationTypes, React.ReactNode> = {
+	const headings: Record<
+		VerificationTypes,
+		{ title: string; description: string }
+	> = {
 		onboarding: checkPhoneNumber,
 		'reset-password': checkPhoneNumber,
 		'change-phone-number': checkPhoneNumber,
-		'validate-recipient': buildHeading(
-			'Check Your Texts',
-			"We've texted you a code to verify the phone number you gave us. Please inform your recipient of what you're up to and ask your recipient to provide you with that code.",
-		),
-		'2fa': buildHeading(
-			'Check Your 2FA App',
-			'Please enter your 2FA code to verify your identity.',
-		),
+		'validate-recipient': {
+			title: 'Ask your recipient for the code',
+			description:
+				"We've texted a verification code to the number you gave us. Let your recipient know what you're up to and ask them to share the code with you.",
+		},
+		'2fa': {
+			title: 'Check your authenticator app',
+			description: 'Enter the 6-digit code from your 2FA app to continue.',
+		},
 	}
+	const heading = type
+		? headings[type]
+		: {
+				title: 'Invalid verification link',
+				description: 'This link is missing a verification type.',
+			}
 
 	const resendRoutes: Record<VerificationTypes, string> = {
 		onboarding: '/signup',
@@ -104,72 +107,64 @@ export default function VerifyRoute() {
 	})
 
 	return (
-		<main className="container flex flex-col items-center justify-start pt-12 pb-24 sm:pt-16">
-			<div className="max-w-lg text-center">
-				{type ? headings[type] : 'Invalid Verification Type'}
-			</div>
-
-			<div className="mt-10 w-full max-w-md">
-				<Form method="POST" {...getFormProps(form)} className="space-y-8">
-					<HoneypotInputs />
-					<ErrorList errors={form.errors} id={form.errorId} />
-					<OTPField
-						type="digits-and-characters"
-						className="w-full"
-						labelProps={{
-							htmlFor: fields[codeQueryParam].id,
-							children: 'Verification Code',
-							className:
-								'text-body-sm font-semibold tracking-normal normal-case text-foreground block mb-3',
-						}}
-						inputProps={{
-							...getInputProps(fields[codeQueryParam], { type: 'text' }),
-							autoComplete: 'one-time-code',
-							autoFocus: true,
-							containerClassName:
-								'justify-center gap-2 sm:justify-start sm:gap-3',
-						}}
-						errors={fields[codeQueryParam].errors}
-						groupClassName="gap-2 sm:gap-3"
-						showSeparator={false}
-						slotClassName="bg-card text-foreground h-11 w-11 rounded-full text-base font-semibold shadow-none sm:h-14 sm:w-14 sm:text-lg"
-					/>
-					<div className="text-body-sm text-muted-foreground flex flex-wrap items-center gap-1">
-						<span>No text after 5 minutes?</span>
-						<Link
-							to={type ? resendRoutes[type] : '.'}
-							className="text-foreground hover:text-foreground/90 font-semibold"
-						>
-							Resend the Code
-						</Link>
-					</div>
-					<input
-						{...getInputProps(fields[typeQueryParam], { type: 'hidden' })}
-					/>
-					<input
-						{...getInputProps(fields[targetQueryParam], { type: 'hidden' })}
-					/>
-					<input
-						{...getInputProps(fields[redirectToQueryParam], {
-							type: 'hidden',
-						})}
-					/>
-					<StatusButton
-						size="lg"
-						variant="brand"
-						className="w-full"
-						status={isPending ? 'pending' : (form.status ?? 'idle')}
-						type="submit"
-						disabled={isPending}
-					>
-						<span className="inline-flex items-center gap-3">
-							Continue
-							<Icon name="arrow-right" size="sm" aria-hidden="true" />
-						</span>
-					</StatusButton>
-				</Form>
-			</div>
-		</main>
+		<AuthPage
+			title={heading.title}
+			description={heading.description}
+			footer={
+				<p>
+					{type === '2fa' ? 'Having trouble?' : 'No text after 5 minutes?'}{' '}
+					<Link to={type ? resendRoutes[type] : '.'}>
+						{type === '2fa' ? 'Back to login' : 'Resend the code'}
+					</Link>
+				</p>
+			}
+		>
+			<Form method="POST" {...getFormProps(form)} className="space-y-8">
+				<HoneypotInputs />
+				<ErrorList errors={form.errors} id={form.errorId} />
+				<OTPField
+					type="digits-and-characters"
+					className="w-full"
+					labelProps={{
+						htmlFor: fields[codeQueryParam].id,
+						children: 'Verification Code',
+						className: 'block mb-3',
+					}}
+					inputProps={{
+						...getInputProps(fields[codeQueryParam], { type: 'text' }),
+						autoComplete: 'one-time-code',
+						autoFocus: true,
+						containerClassName: 'justify-center gap-2 sm:gap-3',
+					}}
+					errors={fields[codeQueryParam].errors}
+					groupClassName="gap-2 sm:gap-3"
+					showSeparator={false}
+					slotClassName="bg-card text-foreground h-11 w-11 rounded-full text-base font-semibold shadow-none sm:h-14 sm:w-14 sm:text-lg"
+				/>
+				<input {...getInputProps(fields[typeQueryParam], { type: 'hidden' })} />
+				<input
+					{...getInputProps(fields[targetQueryParam], { type: 'hidden' })}
+				/>
+				<input
+					{...getInputProps(fields[redirectToQueryParam], {
+						type: 'hidden',
+					})}
+				/>
+				<StatusButton
+					size="lg"
+					variant="brand"
+					className="w-full"
+					status={isPending ? 'pending' : (form.status ?? 'idle')}
+					type="submit"
+					disabled={isPending}
+				>
+					<span className="inline-flex items-center gap-3">
+						Continue
+						<Icon name="arrow-right" size="sm" aria-hidden="true" />
+					</span>
+				</StatusButton>
+			</Form>
+		</AuthPage>
 	)
 }
 
diff --git a/app/routes/_app+/_layout.tsx b/app/routes/_app+/_layout.tsx
index 924b8f92..7f21ca77 100644
--- a/app/routes/_app+/_layout.tsx
+++ b/app/routes/_app+/_layout.tsx
@@ -1,7 +1,8 @@
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
 	Form,
 	Link,
+	NavLink,
 	Outlet,
 	data as json,
 	type HeadersFunction,
@@ -18,21 +19,26 @@ import {
 	DropdownMenuContent,
 	DropdownMenuItem,
 	DropdownMenuPortal,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from '#app/components/ui/dropdown-menu.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { ThemeSwitch, useTheme } from '#app/routes/resources+/theme-switch.tsx'
 import { getUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { cn } from '#app/utils/misc.tsx'
 import { useRequestInfo } from '#app/utils/request-info.js'
 import { getCustomerProducts } from '#app/utils/stripe.server.ts'
 import { makeTimings } from '#app/utils/timing.server.ts'
 import { useOptionalUser, useUser } from '#app/utils/user.ts'
 
+const siteDescription =
+	'GratiText helps you send thoughtful, personal gratitude texts to the people you love on a schedule you choose.'
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [
 		{ title: data ? 'GratiText' : 'Error | GratiText' },
-		{ name: 'description', content: `Your own captain's log` },
+		{ name: 'description', content: siteDescription },
 	]
 }
 
@@ -63,112 +69,177 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => {
 	return headers
 }
 
+const marketingLinks = [
+	{ to: '/about', label: 'About' },
+	{ to: '/#pricing', label: 'Pricing' },
+	{ to: '/support', label: 'Support' },
+]
+
+const appLinks = [
+	{ to: '/recipients', label: 'Recipients' },
+	{ to: '/settings/profile', label: 'Settings' },
+]
+
+const footerLinks = [
+	{ to: '/about', label: 'About' },
+	{ to: '/privacy', label: 'Privacy' },
+	{ to: '/tos', label: 'Terms of Service' },
+	{ to: '/support', label: 'Support' },
+]
+
+const supportEmail = 'support@gratitext.app'
+
+function navLinkClassName({ isActive }: { isActive: boolean }) {
+	return cn(
+		'rounded-full px-3 py-2 text-sm font-semibold transition-colors',
+		isActive
+			? 'bg-muted text-foreground'
+			: 'text-muted-foreground hover:bg-muted hover:text-foreground',
+	)
+}
+
 export default function Layout() {
 	const data = useLoaderData<typeof loader>()
 	const user = useOptionalUser()
 	const requestInfo = useRequestInfo()
+	const primaryLinks = user ? appLinks : marketingLinks
 	return (
-		<div className="bg-background flex h-screen flex-col justify-between">
-			<header className="border-border border-b">
-				<div className="container py-5 md:py-6">
-					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
+		<div className="bg-background flex min-h-screen flex-col">
+			<a
+				href="#main-content"
+				className="bg-primary text-primary-foreground sr-only rounded-full px-4 py-2 text-sm font-semibold focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100]"
+			>
+				Skip to content
+			</a>
+			<header className="border-border bg-background/95 supports-[backdrop-filter]:bg-background/80 sticky top-0 z-40 border-b backdrop-blur">
+				<div className="container flex h-16 items-center justify-between gap-4 md:h-20">
+					<div className="flex items-center gap-6 lg:gap-10">
 						<Logo />
-						<div className="flex items-center gap-10">
-							{user ? (
-								<div className="flex gap-4">
-									{data.isSubscribed ? null : (
-										<Button variant="outline" asChild>
-											<Link to="/settings/profile/subscription">
-												Start your free trial
-											</Link>
-										</Button>
-									)}
-									<UserDropdown />
-								</div>
-							) : (
-								<>
+						<nav
+							aria-label="Primary"
+							className="hidden items-center gap-1 md:flex"
+						>
+							{primaryLinks.map((link) =>
+								link.to.includes('#') ? (
+									<Link
+										key={link.to}
+										to={link.to}
+										className={navLinkClassName({ isActive: false })}
+									>
+										{link.label}
+									</Link>
+								) : (
+									<NavLink
+										key={link.to}
+										to={link.to}
+										prefetch="intent"
+										className={navLinkClassName}
+									>
+										{link.label}
+									</NavLink>
+								),
+							)}
+						</nav>
+					</div>
+					<div className="flex items-center gap-2 sm:gap-3">
+						{user ? (
+							<>
+								{data.isSubscribed ? null : (
 									<Button
+										variant="brand"
+										size="sm"
 										asChild
-										variant="default"
-										size="lg"
 										className="hidden sm:inline-flex"
 									>
-										<Link to="/login">Log In</Link>
+										<Link to="/settings/profile/subscription">
+											Start your free trial
+										</Link>
 									</Button>
-									<div className="sm:hidden">
-										<MobileMenu />
-									</div>
-								</>
-							)}
-						</div>
-					</nav>
+								)}
+								<UserDropdown />
+							</>
+						) : (
+							<>
+								<Button
+									asChild
+									variant="ghost"
+									className="hidden sm:inline-flex"
+								>
+									<Link to="/login">Log In</Link>
+								</Button>
+								<Button
+									asChild
+									variant="brand"
+									className="hidden sm:inline-flex"
+								>
+									<Link to="/signup">Start free trial</Link>
+								</Button>
+								<div className="sm:hidden">
+									<MobileMenu />
+								</div>
+							</>
+						)}
+					</div>
 				</div>
 			</header>
-			<div className="flex-1">
+			<div id="main-content" className="flex flex-1 flex-col">
 				<Outlet />
 			</div>
-			<footer className="container my-4 flex flex-col gap-4 pb-5 md:flex-row md:items-center md:justify-between">
-				<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-4">
-					<Logo />
-					<nav>
-						<ul className="flex list-none flex-col gap-2 sm:flex-row sm:flex-wrap sm:gap-4">
-							<li>
-								<Link
-									to="/about"
-									className="text-muted-foreground hover:text-foreground"
-								>
-									About
-								</Link>
-							</li>
-							<li>
-								<Link
-									to="/privacy"
-									className="text-muted-foreground hover:text-foreground"
-								>
-									Privacy
-								</Link>
-							</li>
-							<li>
-								<Link
-									to="/tos"
-									className="text-muted-foreground hover:text-foreground"
-								>
-									Terms of Service
-								</Link>
-							</li>
-							<li>
-								<Link
-									to="/support"
-									className="text-muted-foreground hover:text-foreground"
-								>
-									Support
-								</Link>
-							</li>
+			<footer className="border-border mt-auto border-t">
+				<div className="container flex flex-col gap-8 py-10 md:flex-row md:items-start md:justify-between">
+					<div className="flex max-w-xs flex-col gap-3">
+						<Logo />
+						<p className="text-muted-foreground text-sm leading-relaxed">
+							Thoughtful gratitude texts, written by you and delivered on a
+							schedule you choose.
+						</p>
+					</div>
+					<nav aria-label="Footer">
+						<ul className="grid grid-cols-2 gap-x-8 gap-y-3 text-sm sm:flex sm:flex-wrap sm:gap-x-6">
+							{footerLinks.map((link) => (
+								<li key={link.to}>
+									<Link
+										to={link.to}
+										prefetch="intent"
+										className="text-muted-foreground hover:text-foreground font-medium transition-colors"
+									>
+										{link.label}
+									</Link>
+								</li>
+							))}
 							<li>
-								<Link
-									to="/contact"
-									className="text-muted-foreground hover:text-foreground"
+								<a
+									href={`mailto:${supportEmail}`}
+									className="text-muted-foreground hover:text-foreground font-medium transition-colors"
 								>
 									Contact
-								</Link>
+								</a>
 							</li>
 						</ul>
 					</nav>
+					<div className="flex items-center justify-between gap-4 md:flex-col md:items-end">
+						<ThemeSwitch userPreference={requestInfo.userPrefs.theme} />
+						<p className="text-muted-foreground text-xs">
+							© {new Date().getFullYear()} GratiText
+						</p>
+					</div>
 				</div>
-				<div className="flex items-center self-start md:self-auto">
-					<ThemeSwitch userPreference={requestInfo.userPrefs.theme} />
-				</div>
-			</footer>{' '}
+			</footer>
 		</div>
 	)
 }
 
-function Logo() {
+function Logo({ onClick }: { onClick?: () => void }) {
 	return (
 		<Link
 			to="/"
-			className="text-foreground font-serif text-lg leading-none font-semibold tracking-tight lowercase md:text-xl"
+			onClick={onClick}
+			aria-label="GratiText home"
+			className="text-foreground inline-flex items-center gap-2 font-serif text-xl leading-none font-semibold tracking-tight lowercase md:text-2xl"
 		>
+			<span className="bg-brand text-brand-foreground flex h-8 w-8 items-center justify-center rounded-full">
+				<Icon name="message" size="sm" aria-hidden="true" />
+			</span>
 			gratitext
 		</Link>
 	)
@@ -178,24 +249,51 @@ function UserDropdown() {
 	const user = useUser()
 	const submit = useSubmit()
 	const formRef = useRef<HTMLFormElement>(null)
+	const displayName = user.name ?? user.username
+	const initial = displayName.trim().charAt(0).toUpperCase() || '?'
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button asChild variant="secondary">
+				<Button
+					asChild
+					variant="secondary"
+					className="h-11 gap-2 pr-4 pl-1.5 sm:h-12"
+				>
 					<Link
 						to={`/users/${user.username}`}
 						// this is for progressive enhancement
 						onClick={(e) => e.preventDefault()}
 						className="flex items-center gap-2"
 					>
-						<span className="text-body-sm font-bold">
-							{user.name ?? user.username}
+						<span
+							aria-hidden="true"
+							className="bg-primary text-primary-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"
+						>
+							{initial}
 						</span>
+						<span className="max-w-[8rem] truncate text-sm font-bold sm:max-w-[12rem]">
+							{displayName}
+						</span>
+						<Icon
+							name="chevron-down"
+							size="xs"
+							className="text-muted-foreground"
+							aria-hidden="true"
+						/>
 					</Link>
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuPortal>
-				<DropdownMenuContent sideOffset={8} align="start">
+				<DropdownMenuContent sideOffset={8} align="end" className="w-56">
+					<div className="px-3 pt-2 pb-2">
+						<p className="text-foreground truncate text-sm font-semibold">
+							{displayName}
+						</p>
+						<p className="text-muted-foreground truncate text-xs">
+							@{user.username}
+						</p>
+					</div>
+					<DropdownMenuSeparator />
 					<DropdownMenuItem asChild>
 						<Link prefetch="intent" to={`/users/${user.username}`}>
 							<Icon className="text-body-md" name="avatar">
@@ -204,12 +302,20 @@ function UserDropdown() {
 						</Link>
 					</DropdownMenuItem>
 					<DropdownMenuItem asChild>
-						<Link prefetch="intent" to={`/recipients`}>
-							<Icon className="text-body-md" name="pencil-2">
+						<Link prefetch="intent" to="/recipients">
+							<Icon className="text-body-md" name="message">
 								Recipients
 							</Icon>
 						</Link>
 					</DropdownMenuItem>
+					<DropdownMenuItem asChild>
+						<Link prefetch="intent" to="/settings/profile">
+							<Icon className="text-body-md" name="settings">
+								Settings
+							</Icon>
+						</Link>
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
@@ -244,6 +350,16 @@ function MobileMenu() {
 	const themeLabel =
 		theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'
 	const themeIcon = theme === 'dark' ? 'sun' : 'moon'
+	const close = () => setOpen(false)
+
+	useEffect(() => {
+		if (!open) return
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') setOpen(false)
+		}
+		document.addEventListener('keydown', onKeyDown)
+		return () => document.removeEventListener('keydown', onKeyDown)
+	}, [open])
 
 	return (
 		<>
@@ -262,65 +378,70 @@ function MobileMenu() {
 				<div className="fixed inset-0 z-50 flex justify-center">
 					<button
 						type="button"
-						className="bg-overlay/30 absolute inset-0 h-full w-full"
-						onClick={() => setOpen(false)}
+						className="bg-overlay/40 absolute inset-0 h-full w-full"
+						onClick={close}
 						aria-label="Close menu"
 					/>
 					<div
 						id="mobile-menu-panel"
-						className="bg-card relative mx-4 mt-5 w-full max-w-[420px] rounded-[32px] px-6 pt-6 pb-6 shadow-[0_20px_45px_rgba(0,0,0,0.18)]"
+						role="dialog"
+						aria-modal="true"
+						aria-label="Menu"
+						className="bg-card border-border relative mx-4 mt-3 h-fit w-full max-w-[420px] rounded-[28px] border px-5 pt-4 pb-5 shadow-2xl"
 					>
 						<div className="flex items-center justify-between">
-							<Logo />
+							<Logo onClick={close} />
 							<Button
 								type="button"
 								variant="ghost"
 								size="icon"
-								onClick={() => setOpen(false)}
+								onClick={close}
 								aria-label="Close menu"
 							>
 								<Icon name="close" size="lg" aria-hidden="true" />
 							</Button>
 						</div>
-						<Button asChild size="lg" variant="warm" className="mt-6 w-full">
-							<Link to="/login" onClick={() => setOpen(false)}>
-								<Icon name="star" size="sm" aria-hidden="true">
-									Start 14-day FREE Trial
-								</Icon>
-							</Link>
-						</Button>
-						<div className="text-body-sm text-foreground mt-4 grid gap-3 font-semibold">
-							<Link
-								to="/login"
-								onClick={() => setOpen(false)}
-								className="flex items-center gap-3"
-							>
-								<Icon
-									name="log in"
-									size="sm"
-									className="text-muted-foreground"
-									aria-hidden="true"
-								/>
-								Log In
-							</Link>
-							<div className="bg-border h-px" />
-							<fetcher.Form method="POST" action="/resources/theme-switch">
-								<input type="hidden" name="theme" value={nextTheme} />
-								<button
-									type="submit"
-									onClick={() => setOpen(false)}
-									className="flex w-full items-center gap-3"
+						<nav aria-label="Mobile" className="mt-4 grid gap-1">
+							{marketingLinks.map((link) => (
+								<Link
+									key={link.to}
+									to={link.to}
+									onClick={close}
+									className="text-foreground hover:bg-muted flex items-center rounded-xl px-3 py-2.5 text-base font-semibold"
 								>
-									<Icon
-										name={themeIcon}
-										size="sm"
-										className="text-muted-foreground"
-										aria-hidden="true"
-									/>
-									{themeLabel}
-								</button>
-							</fetcher.Form>
+									{link.label}
+								</Link>
+							))}
+						</nav>
+						<div className="bg-border my-3 h-px" />
+						<div className="grid gap-2">
+							<Button asChild size="lg" variant="brand" className="w-full">
+								<Link to="/signup" onClick={close}>
+									<Icon name="star" size="sm" aria-hidden="true">
+										Start your 14-day free trial
+									</Icon>
+								</Link>
+							</Button>
+							<Button asChild size="lg" variant="secondary" className="w-full">
+								<Link to="/login" onClick={close}>
+									<Icon name="log in" size="sm" aria-hidden="true">
+										Log In
+									</Icon>
+								</Link>
+							</Button>
 						</div>
+						<div className="bg-border my-3 h-px" />
+						<fetcher.Form method="POST" action="/resources/theme-switch">
+							<input type="hidden" name="theme" value={nextTheme} />
+							<button
+								type="submit"
+								onClick={close}
+								className="text-muted-foreground hover:bg-muted hover:text-foreground flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold"
+							>
+								<Icon name={themeIcon} size="sm" aria-hidden="true" />
+								{themeLabel}
+							</button>
+						</fetcher.Form>
 					</div>
 				</div>
 			) : null}
diff --git a/app/routes/_app+/_marketing+/about.tsx b/app/routes/_app+/_marketing+/about.tsx
index b5f3270a..f2bd6e1c 100644
--- a/app/routes/_app+/_marketing+/about.tsx
+++ b/app/routes/_app+/_marketing+/about.tsx
@@ -1,7 +1,15 @@
 import { Link, type MetaFunction } from 'react-router'
+import { ProsePage, ProseSection } from '#app/components/prose-page.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 
-export const meta: MetaFunction = () => [{ title: 'About | GratiText' }]
+export const meta: MetaFunction = () => [
+	{ title: 'About | GratiText' },
+	{
+		name: 'description',
+		content:
+			'Why gratitude matters, and how GratiText helps you build a habit of thanking the people you love.',
+	},
+]
 
 const gratitudeBenefits = [
 	{
@@ -50,106 +58,86 @@ const faqItems = [
 
 export default function AboutRoute() {
 	return (
-		<main className="bg-background pb-16">
-			<section className="container pt-10">
-				<Link
-					to="/"
-					className="text-body-xs text-muted-foreground inline-flex items-center gap-2"
-				>
-					<Icon name="arrow-left" size="sm" />
-					Back Home
-				</Link>
-				<div className="mx-auto mt-6 max-w-2xl space-y-4 text-center">
-					<h1 className="text-h3 text-foreground md:text-h2 leading-tight">
-						Create and Nurture Lasting Bonds With Your Loved Ones
-					</h1>
-					<p className="text-body-sm text-muted-foreground">
-						GratiText helps you express gratitude with thoughtful messages to
-						the people who matter most. Learn why gratitude matters and how the
-						app makes it easier to build the habit.
-					</p>
-				</div>
-			</section>
-
-			<section className="container mt-12" aria-labelledby="gratitude-benefits">
-				<div className="max-w-3xl space-y-4">
-					<h2 id="gratitude-benefits" className="text-h4 md:text-h3">
-						Why Should You Practice Gratitude?
-					</h2>
-					<p className="text-body-sm text-muted-foreground">
-						Practicing gratitude and thanking others offers numerous benefits
-						for both the individual and those around them. Here are some key
-						reasons why it is beneficial:
-					</p>
-					<ol className="text-body-sm text-muted-foreground space-y-5">
-						{gratitudeBenefits.map((benefit, index) => (
-							<li key={benefit.title} className="leading-relaxed">
-								<span className="text-foreground font-semibold">
-									{index + 1}. {benefit.title}:{' '}
-								</span>
-								{benefit.description}
-							</li>
-						))}
-					</ol>
-				</div>
-			</section>
+		<ProsePage
+			eyebrow="About GratiText"
+			title="Create and nurture lasting bonds with the people you love"
+			intro="GratiText helps you express gratitude with thoughtful messages to the people who matter most. Here is why gratitude matters, and how the app makes the habit stick."
+		>
+			<ProseSection id="why-gratitude" title="Why practice gratitude?">
+				<p>
+					Practicing gratitude and thanking others offers real benefits, both
+					for you and for the people around you.
+				</p>
+				<ol className="mt-4 grid gap-4 sm:grid-cols-3">
+					{gratitudeBenefits.map((benefit, index) => (
+						<li
+							key={benefit.title}
+							className="border-border bg-card flex flex-col gap-2 rounded-[24px] border p-5 shadow-sm"
+						>
+							<span className="bg-brand text-brand-foreground flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold">
+								{index + 1}
+							</span>
+							<h3 className="text-foreground font-semibold">{benefit.title}</h3>
+							<p className="text-sm leading-relaxed">{benefit.description}</p>
+						</li>
+					))}
+				</ol>
+			</ProseSection>
 
-			<section className="container mt-12" aria-labelledby="gratitude-faq">
-				<div className="max-w-3xl space-y-6">
-					<h2 id="gratitude-faq" className="text-h4 md:text-h3">
-						Frequently Asked Questions
-					</h2>
-					<div className="border-border bg-muted rounded-[28px] border p-4 shadow-sm sm:p-6">
-						<div className="space-y-4">
-							{faqItems.map((item) => (
-								<details
-									key={item.question}
-									open={item.defaultOpen}
-									className="border-border bg-card rounded-2xl border px-5 py-4 shadow-sm"
-								>
-									<summary className="text-body-sm text-foreground flex cursor-pointer list-none items-center justify-between gap-4 font-semibold">
-										<span>{item.question}</span>
-										<Icon
-											name="chevron-down"
-											size="sm"
-											className="text-muted-foreground"
-										/>
-									</summary>
-									<div className="text-body-xs text-muted-foreground mt-3 space-y-3">
-										<p className="leading-relaxed">{item.answer}</p>
-										{item.details ? (
-											<ol className="list-decimal space-y-2 pl-4">
-												{item.details.map((detail) => (
-													<li key={detail} className="leading-relaxed">
-														{detail}
-													</li>
-												))}
-											</ol>
-										) : null}
-									</div>
-								</details>
-							))}
-						</div>
-					</div>
-				</div>
-			</section>
+			<ProseSection id="how-it-works" title="How GratiText fits in">
+				<p>
+					You write short notes of thanks for each person, in your own words.
+					GratiText keeps them in a queue and texts one out on the schedule you
+					pick, so your appreciation shows up reliably even on the busiest
+					weeks.
+				</p>
+				<p>
+					<Link to="/#how-it-works">See how it works</Link> or{' '}
+					<Link to="/signup">start your free trial</Link>.
+				</p>
+			</ProseSection>
 
-			<section className="container mt-12 pb-8">
-				<div className="text-center">
-					<p className="text-body-xs text-muted-foreground">
-						Have Questions/Need to Report an Issue?
-					</p>
-					<p className="text-body-sm text-foreground">
-						Contact us at{' '}
-						<a
-							className="font-semibold underline"
-							href="mailto:support@gratitext.app"
+			<ProseSection id="faq" title="Frequently asked questions">
+				<div className="space-y-3">
+					{faqItems.map((item) => (
+						<details
+							key={item.question}
+							open={item.defaultOpen}
+							className="group border-border bg-card rounded-2xl border px-5 py-4 shadow-sm"
 						>
-							support@gratitext.app
-						</a>
-					</p>
+							<summary className="text-foreground flex cursor-pointer list-none items-center justify-between gap-4 font-semibold">
+								<span>{item.question}</span>
+								<Icon
+									name="chevron-down"
+									size="sm"
+									aria-hidden="true"
+									className="text-muted-foreground shrink-0 transition-transform group-open:rotate-180"
+								/>
+							</summary>
+							<div className="mt-3 space-y-3 text-sm">
+								<p className="leading-relaxed">{item.answer}</p>
+								{item.details ? (
+									<ol className="list-decimal space-y-2 pl-5">
+										{item.details.map((detail) => (
+											<li key={detail} className="leading-relaxed">
+												{detail}
+											</li>
+										))}
+									</ol>
+								) : null}
+							</div>
+						</details>
+					))}
 				</div>
-			</section>
-		</main>
+			</ProseSection>
+
+			<ProseSection id="contact" title="Questions or feedback?">
+				<p>
+					Visit the <Link to="/support">support page</Link> or email us at{' '}
+					<a href="mailto:support@gratitext.app">support@gratitext.app</a>. We
+					read every message.
+				</p>
+			</ProseSection>
+		</ProsePage>
 	)
 }
diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx
index 5ccb34e0..f462e33b 100644
--- a/app/routes/_app+/_marketing+/index.tsx
+++ b/app/routes/_app+/_marketing+/index.tsx
@@ -1,15 +1,129 @@
 import { Link, type MetaFunction } from 'react-router'
 import { Button } from '#app/components/ui/button.js'
-import { Icon } from '#app/components/ui/icon.tsx'
+import { Icon, type IconName } from '#app/components/ui/icon.tsx'
 import { useOptionalUser } from '#app/utils/user.js'
 
-export const meta: MetaFunction = () => [{ title: 'GratiText' }]
+export const meta: MetaFunction = () => [
+	{ title: 'GratiText | Thoughtful gratitude texts, on your schedule' },
+]
+
+const steps: Array<{ title: string; description: string; icon: IconName }> = [
+	{
+		title: 'Create your account',
+		description:
+			'Sign up with your phone number. Your first 14 days are free, no credit card needed.',
+		icon: 'avatar',
+	},
+	{
+		title: 'Add a loved one',
+		description:
+			'Enter the name and phone number of someone you want to stay close to.',
+		icon: 'phone',
+	},
+	{
+		title: 'Pick a schedule',
+		description:
+			'Choose the day and time your notes should arrive, in their time zone.',
+		icon: 'clock',
+	},
+	{
+		title: 'Write in your own words',
+		description:
+			'Queue up personal notes of thanks whenever inspiration strikes.',
+		icon: 'pencil-1',
+	},
+	{
+		title: 'We deliver on time',
+		description:
+			'Each note is texted automatically at the moment you scheduled it.',
+		icon: 'send',
+	},
+	{
+		title: 'Never run dry',
+		description:
+			'We remind you when a recipient has no message waiting, so no send date is missed.',
+		icon: 'exclamation-circle-outline',
+	},
+]
+
+const plans = [
+	{
+		name: 'Basic',
+		price: '$4.99',
+		cadence: 'per month',
+		summary: 'One heartfelt note a day.',
+		features: [
+			'1 message per day',
+			'As many recipients as you like',
+			'Reminders when a queue runs empty',
+		],
+		priceClassName: 'text-price-basic',
+		variant: 'secondary' as const,
+	},
+	{
+		name: 'Premium',
+		price: '$14.99',
+		cadence: 'per month',
+		summary: 'Room for the whole family and your closest friends.',
+		features: [
+			'Up to 10 messages per day',
+			'As many recipients as you like',
+			'Reminders when a queue runs empty',
+		],
+		priceClassName: 'text-price-premium',
+		variant: 'default' as const,
+		highlighted: true,
+	},
+]
 
 export default function Index() {
 	const user = useOptionalUser()
+	const primaryCta = user
+		? { to: '/recipients', label: 'Open your recipients' }
+		: { to: '/signup', label: 'Start your 14-day free trial' }
+	const planCta = user ? '/settings/profile/subscription' : '/signup'
 	return (
-		<main className="bg-background pt-6 pb-20 md:pt-10">
-			<section className="container grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
+		<main className="bg-background pt-8 pb-20 md:pt-14">
+			<section className="container grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:gap-16">
+				<div className="order-2 space-y-6 text-center lg:order-1 lg:text-left">
+					<p className="text-brand text-xs font-semibold tracking-[0.3em] uppercase">
+						Gratitude, delivered by text
+					</p>
+					<h1 className="text-foreground font-serif text-4xl leading-[1.1] font-semibold text-balance sm:text-5xl lg:text-6xl">
+						Thoughtful connections, made simple
+					</h1>
+					<p className="text-muted-foreground mx-auto max-w-xl text-lg leading-relaxed text-pretty lg:mx-0">
+						Write heartfelt notes to the people you love and GratiText texts
+						them on the schedule you choose. Your words, in your voice, arriving
+						right on time.
+					</p>
+					<div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center lg:justify-start">
+						<Button
+							asChild
+							size="lg"
+							variant="warm"
+							className="w-full sm:w-auto"
+						>
+							<Link to={primaryCta.to}>{primaryCta.label}</Link>
+						</Button>
+						<Button
+							asChild
+							size="lg"
+							variant="ghost"
+							className="w-full sm:w-auto"
+						>
+							<a href="#how-it-works">
+								See how it works
+								<Icon name="arrow-right" size="sm" aria-hidden="true" />
+							</a>
+						</Button>
+					</div>
+					{user ? null : (
+						<p className="text-muted-foreground text-sm">
+							No credit card required. Cancel anytime.
+						</p>
+					)}
+				</div>
 				<div className="order-1 flex justify-center lg:order-2">
 					<div className="relative w-full max-w-xs sm:max-w-sm">
 						<div className="bg-hero-orb absolute top-1/2 left-1/2 h-[260px] w-[260px] -translate-x-1/2 -translate-y-1/2 rounded-full sm:h-[320px] sm:w-[320px]" />
@@ -32,12 +146,13 @@ export default function Index() {
 						</div>
 						<img
 							src="/images/smiling-phone-flowers.jpg"
-							alt="Smiling person holding flowers and a phone"
+							alt="Smiling person holding flowers and reading a text message"
 							width={2560}
 							height={2560}
+							fetchPriority="high"
 							className="relative z-10 aspect-square w-full rounded-[36px] object-cover shadow-lg"
 						/>
-						<p className="text-muted-secondary-foreground mt-3 hidden text-center text-xs md:block">
+						<p className="text-muted-secondary-foreground mt-3 text-center text-xs">
 							Photo by{' '}
 							<a
 								className="underline"
@@ -55,184 +170,184 @@ export default function Index() {
 						</p>
 					</div>
 				</div>
-				<div className="order-2 space-y-5 text-center lg:order-1 lg:text-left">
-					<h1 className="text-foreground font-serif text-4xl leading-tight font-semibold md:text-5xl lg:text-6xl">
-						Thoughtful Connections Made Simple
-					</h1>
-					<p className="text-body-md text-muted-foreground mx-auto max-w-xl lg:mx-0">
-						Strengthen your relationships with regular personalized messages of
-						love and gratitude.
-					</p>
-					<div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center lg:justify-start">
-						<Button
-							asChild
-							size="lg"
-							variant="warm"
-							className="w-full max-w-[320px] sm:w-auto"
-						>
-							{user ? (
-								<Link to="/recipients">Open dashboard</Link>
-							) : (
-								<Link to="/login">Start 14-day FREE trial</Link>
-							)}
-						</Button>
-					</div>
-				</div>
 			</section>
 
-			<section className="container mt-16">
-				<div className="bg-marketing-feature text-marketing-feature-foreground relative overflow-hidden rounded-[48px] px-6 py-12 shadow-sm">
+			<section className="container mt-16 md:mt-24" aria-labelledby="own-words">
+				<div className="bg-marketing-feature text-marketing-feature-foreground relative overflow-hidden rounded-[40px] px-6 py-12 shadow-sm md:px-12 md:py-16">
 					<div className="bg-marketing-feature-accent absolute -top-6 -left-6 hidden h-20 w-20 rounded-full opacity-80 md:block" />
 					<div className="bg-marketing-feature-accent-secondary absolute right-10 -bottom-6 hidden h-24 w-24 rounded-[32px] opacity-70 md:block" />
 					<div className="mx-auto max-w-3xl text-center">
 						<p className="text-marketing-feature-muted text-xs font-semibold tracking-[0.3em] uppercase">
-							Messages written by you
+							Your voice, not a robot's
 						</p>
-						<h2 className="mt-3 text-3xl font-bold md:text-4xl">
-							Messages written by you... Not by AI.
+						<h2
+							id="own-words"
+							className="mt-3 font-serif text-3xl font-semibold text-balance md:text-4xl"
+						>
+							Every message is written by you. Never by AI.
 						</h2>
-						<p className="text-marketing-feature-muted mx-auto mt-4 max-w-2xl text-base">
-							Our platform schedules and delivers personal, heartfelt messages
-							on your schedule, so you can stay connected without losing your
-							voice.
+						<p className="text-marketing-feature-muted mx-auto mt-4 max-w-2xl text-base leading-relaxed text-pretty md:text-lg">
+							GratiText handles the scheduling and delivery so you can stay
+							connected without losing what makes your notes special: they come
+							from you.
 						</p>
 					</div>
 				</div>
 			</section>
 
-			<section className="container py-16">
+			<section
+				id="how-it-works"
+				className="container scroll-mt-24 py-16 md:py-24"
+				aria-labelledby="how-it-works-heading"
+			>
 				<div className="mx-auto max-w-2xl text-center">
 					<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
 						How it works
 					</p>
-					<h2 className="text-foreground mt-3 text-3xl font-bold md:text-4xl">
-						How does GratiText work?
+					<h2
+						id="how-it-works-heading"
+						className="text-foreground mt-3 font-serif text-3xl font-semibold text-balance md:text-4xl"
+					>
+						Six small steps to a lasting habit
 					</h2>
-					<p className="text-body-sm text-muted-foreground mt-4">
-						Whether it's a simple thank you or a meaningful reminder of your
+					<p className="text-muted-foreground mt-4 text-base text-pretty">
+						Whether it is 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
+				<ol className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+					{steps.map((step, index) => (
+						<li
 							key={step.title}
-							className="border-border bg-card rounded-[28px] border p-6 shadow-sm"
+							className="border-border bg-card flex flex-col gap-4 rounded-[28px] border p-6 shadow-sm"
 						>
-							<p className="text-marketing-step-index text-3xl font-bold">
-								{String(index + 1).padStart(2, '0')}
-							</p>
-							<h3 className="text-foreground mt-2 text-xl font-bold">
-								{step.title}
-							</h3>
-							<p className="text-body-xs text-muted-foreground mt-2">
-								{step.description}
-							</p>
-						</div>
+							<div className="flex items-center justify-between">
+								<span className="bg-accent text-accent-foreground flex h-11 w-11 items-center justify-center rounded-2xl">
+									<Icon name={step.icon} size="md" aria-hidden="true" />
+								</span>
+								<span className="text-marketing-step-index font-serif text-2xl font-semibold">
+									{String(index + 1).padStart(2, '0')}
+								</span>
+							</div>
+							<div>
+								<h3 className="text-foreground text-lg font-bold">
+									{step.title}
+								</h3>
+								<p className="text-muted-foreground mt-1.5 text-sm leading-relaxed">
+									{step.description}
+								</p>
+							</div>
+						</li>
 					))}
-				</div>
+				</ol>
 			</section>
 
-			<section className="bg-muted py-16">
+			<section
+				id="pricing"
+				className="bg-muted scroll-mt-24 py-16 md:py-24"
+				aria-labelledby="pricing-heading"
+			>
 				<div className="container">
 					<div className="mx-auto max-w-2xl text-center">
 						<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
 							Pricing
 						</p>
-						<h2 className="text-foreground mt-3 text-3xl font-bold md:text-4xl">
-							Affordable pricing plans
+						<h2
+							id="pricing-heading"
+							className="text-foreground mt-3 font-serif text-3xl font-semibold text-balance md:text-4xl"
+						>
+							Simple plans, 14 days free
 						</h2>
-						<p className="text-body-sm text-muted-foreground mt-4">
-							Choose a plan that matches how often you want to send messages.
+						<p className="text-muted-foreground mt-4 text-base text-pretty">
+							Pick the plan that matches how many people you want to reach.
+							Every plan starts with a free two-week trial.
 						</p>
 					</div>
-					<div className="mt-10 grid gap-6 md:grid-cols-2">
-						<div className="border-border bg-card rounded-[28px] border p-6 shadow-sm">
-							<div className="flex items-center justify-between">
-								<div>
-									<h3 className="text-foreground text-xl font-bold">Basic</h3>
-									<p className="text-body-xs text-muted-foreground">
-										1 message per day
-									</p>
+					<div className="mx-auto mt-10 grid max-w-4xl gap-6 md:grid-cols-2">
+						{plans.map((plan) => (
+							<div
+								key={plan.name}
+								className={
+									plan.highlighted
+										? 'border-brand bg-card relative flex flex-col rounded-[28px] border-2 p-6 shadow-md md:p-8'
+										: 'border-border bg-card flex flex-col rounded-[28px] border p-6 shadow-sm md:p-8'
+								}
+							>
+								{plan.highlighted ? (
+									<span className="bg-brand text-brand-foreground absolute -top-3 left-6 rounded-full px-3 py-1 text-xs font-semibold tracking-wide uppercase">
+										Most popular
+									</span>
+								) : null}
+								<div className="flex items-start justify-between gap-4">
+									<div>
+										<h3 className="text-foreground text-xl font-bold">
+											{plan.name}
+										</h3>
+										<p className="text-muted-foreground mt-1 text-sm">
+											{plan.summary}
+										</p>
+									</div>
+									<div className="text-right">
+										<p
+											className={`${plan.priceClassName} text-3xl font-bold tracking-tight`}
+										>
+											{plan.price}
+										</p>
+										<p className="text-muted-foreground text-xs">
+											{plan.cadence}
+										</p>
+									</div>
 								</div>
-								<p className="text-price-basic text-2xl font-bold">$4.99</p>
-							</div>
-							<div className="mt-6">
-								<Button asChild variant="secondary">
-									<Link to="/login">Get started</Link>
-								</Button>
-							</div>
-						</div>
-						<div className="border-border bg-card rounded-[28px] border p-6 shadow-sm">
-							<div className="flex items-center justify-between">
-								<div>
-									<h3 className="text-foreground text-xl font-bold">Premium</h3>
-									<p className="text-body-xs text-muted-foreground">
-										10 messages per day
-									</p>
+								<ul className="mt-6 space-y-2.5">
+									{plan.features.map((feature) => (
+										<li
+											key={feature}
+											className="text-foreground flex items-center gap-2.5 text-sm"
+										>
+											<span className="bg-accent text-accent-foreground flex h-5 w-5 shrink-0 items-center justify-center rounded-full">
+												<Icon name="check" size="xs" aria-hidden="true" />
+											</span>
+											{feature}
+										</li>
+									))}
+								</ul>
+								<div className="mt-8">
+									<Button asChild variant={plan.variant} className="w-full">
+										<Link to={planCta}>
+											{user ? `Choose ${plan.name}` : 'Start free trial'}
+										</Link>
+									</Button>
 								</div>
-								<p className="text-price-premium text-2xl font-bold">$14.99</p>
-							</div>
-							<div className="mt-6">
-								<Button asChild>
-									<Link to="/login">Get started</Link>
-								</Button>
 							</div>
-						</div>
+						))}
 					</div>
 				</div>
 			</section>
 
-			<section className="container py-16">
-				<div className="bg-marketing-cta text-marketing-cta-foreground rounded-[32px] px-8 py-12">
-					<div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
-						<div className="space-y-3">
+			<section
+				className="container py-16 md:py-24"
+				aria-labelledby="cta-heading"
+			>
+				<div className="bg-marketing-cta text-marketing-cta-foreground rounded-[32px] px-6 py-12 md:px-12">
+					<div className="flex flex-col gap-8 md:flex-row md:items-center md:justify-between">
+						<div className="max-w-2xl space-y-3">
 							<p className="text-marketing-cta-accent text-xs font-semibold tracking-[0.3em] uppercase">
-								Ready to start
+								Ready when you are
 							</p>
-							<h2 className="text-3xl font-bold md:text-4xl">
-								Create your account today and get 2 weeks for free.
+							<h2
+								id="cta-heading"
+								className="font-serif text-3xl font-semibold text-balance md:text-4xl"
+							>
+								Send your first note of thanks today.
 							</h2>
-							<p className="text-marketing-cta-accent text-body-sm">
-								No credit card required to get started.
+							<p className="text-marketing-cta-accent text-base">
+								Your first 14 days are on us. No credit card required.
 							</p>
 						</div>
-						<div className="flex flex-col gap-3 sm:flex-row">
-							<Button asChild variant="warm">
-								<Link to="/login">Get started</Link>
-							</Button>
-						</div>
+						<Button asChild size="lg" variant="warm" className="shrink-0">
+							<Link to={primaryCta.to}>{primaryCta.label}</Link>
+						</Button>
 					</div>
 				</div>
 			</section>
diff --git a/app/routes/_app+/_marketing+/privacy.tsx b/app/routes/_app+/_marketing+/privacy.tsx
index 4cba5721..13c23393 100644
--- a/app/routes/_app+/_marketing+/privacy.tsx
+++ b/app/routes/_app+/_marketing+/privacy.tsx
@@ -1,7 +1,193 @@
+import { type MetaFunction } from 'react-router'
+import {
+	ProsePage,
+	ProseSection,
+	ProseTableOfContents,
+} from '#app/components/prose-page.tsx'
+
+export const meta: MetaFunction = () => [
+	{ title: 'Privacy Policy | GratiText' },
+	{
+		name: 'description',
+		content:
+			'How GratiText collects, uses, and protects the information you and your recipients share with us.',
+	},
+]
+
+const sections = [
+	{ id: 'what-we-collect', title: 'What we collect' },
+	{ id: 'how-we-use-it', title: 'How we use it' },
+	{ id: 'text-messages', title: 'Text messages and consent' },
+	{ id: 'sharing', title: 'Who we share it with' },
+	{ id: 'retention', title: 'Retention and deletion' },
+	{ id: 'security', title: 'Security' },
+	{ id: 'your-choices', title: 'Your choices' },
+	{ id: 'children', title: 'Children' },
+	{ id: 'changes', title: 'Changes to this policy' },
+	{ id: 'contact', title: 'Contact' },
+]
+
 export default function PrivacyRoute() {
 	return (
-		<div className="container">
-			<h1 className="text-h1">Privacy</h1>
-		</div>
+		<ProsePage
+			eyebrow="Legal"
+			title="Privacy Policy"
+			intro="GratiText exists to help you send kind words to the people you care about. We collect only what we need to do that, and we never sell your information."
+			updatedAt="September 13, 2026"
+		>
+			<ProseTableOfContents items={sections} />
+
+			<ProseSection id="what-we-collect" title="What we collect">
+				<p>
+					<strong>Account details.</strong> When you sign up we collect your
+					phone number, a username, your name, and a password (stored only as a
+					salted hash). If you turn on two-factor authentication we store the
+					secret needed to verify your codes.
+				</p>
+				<p>
+					<strong>Recipients.</strong> To deliver your notes we store the name,
+					phone number, time zone, and sending schedule for each person you add.
+				</p>
+				<p>
+					<strong>Messages.</strong> We store the messages you write, when they
+					are scheduled, and when they were sent so you can review your history.
+				</p>
+				<p>
+					<strong>Billing.</strong> Payments are processed by Stripe. We keep a
+					reference to your Stripe customer record and your subscription status.
+					We never see or store your full card number.
+				</p>
+				<p>
+					<strong>Technical data.</strong> Like most services we keep standard
+					server logs (such as IP address, browser type, and pages requested)
+					and error reports so we can keep GratiText reliable and secure.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="how-we-use-it" title="How we use it">
+				<ul>
+					<li>
+						To create and secure your account and verify your phone number.
+					</li>
+					<li>
+						To send your messages to your recipients on the schedule you set.
+					</li>
+					<li>
+						To remind you when a recipient has no message waiting to be sent.
+					</li>
+					<li>To process payments and manage your subscription.</li>
+					<li>To respond to your support requests.</li>
+					<li>To detect abuse and keep the service running smoothly.</li>
+				</ul>
+				<p>
+					We do not use your messages to train AI models, build advertising
+					profiles, or for any purpose other than delivering them as you asked.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="text-messages" title="Text messages and consent">
+				<p>
+					GratiText sends SMS messages through Twilio. Before we deliver your
+					notes to a new recipient, we text them a one-time verification code so
+					they know who is reaching out and can confirm they are happy to
+					receive messages from you.
+				</p>
+				<p>
+					Any recipient can reply <strong>STOP</strong> at any time to opt out
+					of all future messages, and <strong>START</strong> to opt back in.
+					Standard message and data rates from their carrier may apply.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="sharing" title="Who we share it with">
+				<p>
+					We share information only with the service providers that help us run
+					GratiText, and only as needed for them to do their job:
+				</p>
+				<ul>
+					<li>
+						<strong>Twilio</strong> to deliver text messages and receive
+						replies.
+					</li>
+					<li>
+						<strong>Stripe</strong> to process payments and manage
+						subscriptions.
+					</li>
+					<li>
+						<strong>Fly.io</strong> to host the application and its database.
+					</li>
+					<li>
+						<strong>Sentry</strong> to capture error reports so we can fix
+						problems quickly.
+					</li>
+				</ul>
+				<p>
+					We may also disclose information when required by law or to protect
+					the rights and safety of our users. We do not sell personal
+					information.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="retention" title="Retention and deletion">
+				<p>
+					We keep your information for as long as your account is active. You
+					can delete your account at any time from{' '}
+					<a href="/settings/profile">your settings page</a>; doing so removes
+					your account, recipients, and messages from our database. Copies in
+					routine backups and logs age out on a rolling schedule after that.
+				</p>
+				<p>
+					You can also download a copy of everything we hold about you from the
+					same page.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="security" title="Security">
+				<p>
+					All traffic to GratiText is encrypted in transit. Passwords are hashed
+					with bcrypt, sessions are stored in signed cookies, and access to
+					production systems is limited to the people who operate the service.
+					No system is perfectly secure, so please use a strong, unique password
+					and consider enabling two-factor authentication.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="your-choices" title="Your choices">
+				<ul>
+					<li>
+						Update your name, username, and phone number in your settings.
+					</li>
+					<li>Pause or delete any recipient whenever you like.</li>
+					<li>
+						Cancel your subscription at any time through the billing portal.
+					</li>
+					<li>Download or delete all of your data from your settings page.</li>
+				</ul>
+			</ProseSection>
+
+			<ProseSection id="children" title="Children">
+				<p>
+					GratiText is not directed at children under 13, and we do not
+					knowingly collect information from them. If you believe a child has
+					created an account, please contact us and we will remove it.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="changes" title="Changes to this policy">
+				<p>
+					If we make meaningful changes to this policy we will update the date
+					at the top of this page and, where appropriate, let you know by text
+					or within the app.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="contact" title="Contact">
+				<p>
+					Questions about privacy? Email us at{' '}
+					<a href="mailto:support@gratitext.app">support@gratitext.app</a> and a
+					human will get back to you.
+				</p>
+			</ProseSection>
+		</ProsePage>
 	)
 }
diff --git a/app/routes/_app+/_marketing+/support.tsx b/app/routes/_app+/_marketing+/support.tsx
index 43472d8e..48671636 100644
--- a/app/routes/_app+/_marketing+/support.tsx
+++ b/app/routes/_app+/_marketing+/support.tsx
@@ -1,7 +1,151 @@
+import { Link, type MetaFunction } from 'react-router'
+import { ProsePage, ProseSection } from '#app/components/prose-page.tsx'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+
+export const meta: MetaFunction = () => [
+	{ title: 'Support | GratiText' },
+	{
+		name: 'description',
+		content:
+			'Get help with GratiText: answers to common questions and how to reach us.',
+	},
+]
+
+const faqs = [
+	{
+		question: 'Why has my recipient not received any messages yet?',
+		answer: (
+			<>
+				New recipients must confirm a verification code before messages begin.
+				Open the recipient, choose <strong>Edit</strong>, and press{' '}
+				<strong>Verify</strong> to send the code. Ask your recipient to share
+				the code with you, then enter it to finish. Also make sure the
+				recipient's schedule is not paused and that at least one message is
+				waiting in their queue.
+			</>
+		),
+	},
+	{
+		question: 'How do schedules work?',
+		answer: (
+			<>
+				Each recipient has a schedule made of a day and time in their own time
+				zone. When that moment arrives, the oldest message in their queue is
+				sent. If the queue is empty about 30 minutes before a send, we text you
+				a reminder so you can add one.
+			</>
+		),
+	},
+	{
+		question: 'Can a recipient stop receiving messages?',
+		answer: (
+			<>
+				Yes. Any recipient can reply <strong>STOP</strong> to opt out
+				immediately, and <strong>START</strong> to opt back in. You can also
+				pause or delete a recipient from their settings page at any time.
+			</>
+		),
+	},
+	{
+		question: 'How do I change or cancel my plan?',
+		answer: (
+			<>
+				Go to <Link to="/settings/profile/subscription">Subscription</Link> in
+				your settings. From there you can pick a plan or open the billing portal
+				to update your card, switch plans, or cancel. Your plan stays active
+				until the end of the current billing period.
+			</>
+		),
+	},
+	{
+		question: 'How do I change my phone number or password?',
+		answer: (
+			<>
+				Both live in <Link to="/settings/profile">Settings</Link>. Changing your
+				number sends a confirmation code to the new number before it takes
+				effect.
+			</>
+		),
+	},
+	{
+		question: 'How do I export or delete my data?',
+		answer: (
+			<>
+				Open <Link to="/settings/profile">Settings</Link> and choose{' '}
+				<strong>Download your data</strong> for a full JSON export, or{' '}
+				<strong>Delete account</strong> to remove everything permanently.
+			</>
+		),
+	},
+]
+
 export default function SupportRoute() {
 	return (
-		<div className="container">
-			<h1 className="text-h1">Support</h1>
-		</div>
+		<ProsePage
+			eyebrow="Help"
+			title="We're here to help"
+			intro="Most questions are answered below. If yours is not, send us a note and a real person will reply."
+		>
+			<div className="border-border bg-card flex flex-col gap-5 rounded-[28px] border p-6 shadow-sm sm:flex-row sm:items-center sm:justify-between">
+				<div className="flex items-start gap-4">
+					<span className="bg-accent text-accent-foreground flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl">
+						<Icon name="envelope-closed" size="md" aria-hidden="true" />
+					</span>
+					<div>
+						<p className="text-foreground text-lg font-bold">Email support</p>
+						<p className="text-muted-foreground text-sm">
+							We usually reply within one business day.
+						</p>
+					</div>
+				</div>
+				<Button asChild variant="brand" className="w-full sm:w-auto">
+					<a href="mailto:support@gratitext.app">support@gratitext.app</a>
+				</Button>
+			</div>
+
+			<section aria-labelledby="faq-heading" className="space-y-4">
+				<h2
+					id="faq-heading"
+					className="text-foreground text-xl font-bold md:text-2xl"
+				>
+					Common questions
+				</h2>
+				<div className="space-y-3">
+					{faqs.map((faq) => (
+						<details
+							key={faq.question}
+							className="group border-border bg-card rounded-2xl border px-5 py-4 shadow-sm"
+						>
+							<summary className="text-foreground flex cursor-pointer list-none items-center justify-between gap-4 font-semibold [&::-webkit-details-marker]:hidden">
+								<span>{faq.question}</span>
+								<Icon
+									name="chevron-down"
+									size="sm"
+									aria-hidden="true"
+									className="text-muted-foreground shrink-0 transition-transform group-open:rotate-180"
+								/>
+							</summary>
+							<p className="text-muted-foreground [&_a]:text-foreground [&_strong]:text-foreground mt-3 text-sm leading-relaxed [&_a]:font-semibold [&_a]:underline [&_a]:underline-offset-4 [&_strong]:font-semibold">
+								{faq.answer}
+							</p>
+						</details>
+					))}
+				</div>
+			</section>
+
+			<ProseSection id="more" title="Learn more">
+				<ul>
+					<li>
+						<Link to="/about">Why gratitude matters</Link> and how GratiText
+						fits into a daily habit.
+					</li>
+					<li>
+						Our <Link to="/privacy">Privacy Policy</Link> and{' '}
+						<Link to="/tos">Terms of Service</Link>.
+					</li>
+				</ul>
+			</ProseSection>
+		</ProsePage>
 	)
 }
diff --git a/app/routes/_app+/_marketing+/tos.tsx b/app/routes/_app+/_marketing+/tos.tsx
index 211d56f4..8ff4e62a 100644
--- a/app/routes/_app+/_marketing+/tos.tsx
+++ b/app/routes/_app+/_marketing+/tos.tsx
@@ -1,7 +1,169 @@
+import { type MetaFunction } from 'react-router'
+import {
+	ProsePage,
+	ProseSection,
+	ProseTableOfContents,
+} from '#app/components/prose-page.tsx'
+
+export const meta: MetaFunction = () => [
+	{ title: 'Terms of Service | GratiText' },
+	{
+		name: 'description',
+		content: 'The terms that govern your use of GratiText.',
+	},
+]
+
+const sections = [
+	{ id: 'agreement', title: 'Agreement' },
+	{ id: 'your-account', title: 'Your account' },
+	{ id: 'recipients', title: 'Recipients and consent' },
+	{ id: 'acceptable-use', title: 'Acceptable use' },
+	{ id: 'billing', title: 'Trials, subscriptions, and billing' },
+	{ id: 'delivery', title: 'Message delivery' },
+	{ id: 'termination', title: 'Termination' },
+	{ id: 'disclaimers', title: 'Disclaimers and liability' },
+	{ id: 'changes', title: 'Changes to these terms' },
+	{ id: 'contact', title: 'Contact' },
+]
+
 export default function TermsOfServiceRoute() {
 	return (
-		<div className="container">
-			<h1 className="text-h1">Terms of Service</h1>
-		</div>
+		<ProsePage
+			eyebrow="Legal"
+			title="Terms of Service"
+			intro="These terms are short on purpose. They describe what you can expect from GratiText and what we ask of you in return."
+			updatedAt="September 13, 2026"
+		>
+			<ProseTableOfContents items={sections} />
+
+			<ProseSection id="agreement" title="Agreement">
+				<p>
+					By creating an account or using GratiText you agree to these terms and
+					to our <a href="/privacy">Privacy Policy</a>. If you do not agree,
+					please do not use the service.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="your-account" title="Your account">
+				<ul>
+					<li>You must be at least 18 years old to create an account.</li>
+					<li>
+						You must provide a phone number you control and keep your login
+						details private. You are responsible for activity that happens under
+						your account.
+					</li>
+					<li>
+						Let us know right away at{' '}
+						<a href="mailto:support@gratitext.app">support@gratitext.app</a> if
+						you think your account has been compromised.
+					</li>
+				</ul>
+			</ProseSection>
+
+			<ProseSection id="recipients" title="Recipients and consent">
+				<p>
+					GratiText sends text messages on your behalf, so you are the sender of
+					every message. You agree that:
+				</p>
+				<ul>
+					<li>
+						You only add people who know you and would welcome messages from
+						you.
+					</li>
+					<li>
+						New recipients confirm a verification code before your messages
+						begin, and you will respect their choice if they decline.
+					</li>
+					<li>
+						If a recipient replies STOP, their number is opted out and you will
+						not attempt to reach them through GratiText again unless they opt
+						back in.
+					</li>
+				</ul>
+			</ProseSection>
+
+			<ProseSection id="acceptable-use" title="Acceptable use">
+				<p>
+					GratiText is for gratitude and encouragement. You may not use it to:
+				</p>
+				<ul>
+					<li>Send marketing, solicitations, or bulk messages of any kind.</li>
+					<li>Harass, threaten, deceive, or impersonate anyone.</li>
+					<li>Send content that is unlawful, hateful, or sexually explicit.</li>
+					<li>Probe, disrupt, or reverse-engineer the service.</li>
+				</ul>
+				<p>
+					We may remove content or suspend accounts that violate these rules.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="billing" title="Trials, subscriptions, and billing">
+				<ul>
+					<li>
+						New accounts get a free trial. You will not be charged until you
+						choose a plan.
+					</li>
+					<li>
+						Plans are billed monthly in advance through Stripe. Prices are shown
+						on our <a href="/#pricing">pricing section</a> and may change with
+						notice before your next billing period.
+					</li>
+					<li>
+						You can cancel at any time from the billing portal in your settings.
+						Your plan stays active until the end of the period you have already
+						paid for.
+					</li>
+					<li>
+						Plan limits (such as how many messages can be sent per day) apply as
+						described on the pricing page.
+					</li>
+				</ul>
+			</ProseSection>
+
+			<ProseSection id="delivery" title="Message delivery">
+				<p>
+					We work hard to deliver every message at the moment you scheduled it,
+					but text delivery ultimately depends on mobile carriers and networks
+					we do not control. Messages may occasionally be delayed or
+					undeliverable, and GratiText should not be relied on for urgent or
+					emergency communication.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="termination" title="Termination">
+				<p>
+					You can delete your account whenever you like from your settings page.
+					We may suspend or terminate accounts that violate these terms or
+					create risk for other users. When an account is closed, scheduled
+					messages will no longer be sent.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="disclaimers" title="Disclaimers and liability">
+				<p>
+					GratiText is provided "as is" without warranties of any kind. To the
+					fullest extent permitted by law, GratiText and the people who build it
+					are not liable for indirect, incidental, or consequential damages, and
+					our total liability for any claim is limited to the amount you paid us
+					in the twelve months before the claim arose.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="changes" title="Changes to these terms">
+				<p>
+					We may update these terms from time to time. When we do, we will
+					change the date at the top of this page and, for significant changes,
+					let you know by text or within the app. Continuing to use GratiText
+					after a change means you accept the updated terms.
+				</p>
+			</ProseSection>
+
+			<ProseSection id="contact" title="Contact">
+				<p>
+					Questions about these terms? Email{' '}
+					<a href="mailto:support@gratitext.app">support@gratitext.app</a>.
+				</p>
+			</ProseSection>
+		</ProsePage>
 	)
 }
diff --git a/app/routes/_app+/recipients+/$recipientId.edit.tsx b/app/routes/_app+/recipients+/$recipientId.edit.tsx
index fc0d2f23..d1c87386 100644
--- a/app/routes/_app+/recipients+/$recipientId.edit.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.edit.tsx
@@ -4,7 +4,10 @@ import {
 	type MetaFunction,
 	useLoaderData,
 } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { RecipientEditor } from './__editor.tsx'
@@ -47,7 +50,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	]
 }
 
-export default function NoteEdit() {
+export default function RecipientEdit() {
 	const data = useLoaderData<typeof loader>()
 
 	return (
@@ -63,7 +66,11 @@ export function ErrorBoundary() {
 		<GeneralErrorBoundary
 			statusHandlers={{
 				404: ({ params }) => (
-					<p>No note with the id "{params.recipientId}" exists</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="Recipient not found"
+						description={`No recipient with the id "${params.recipientId}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 03a3ce45..4d3d9fb8 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -19,7 +19,10 @@ import {
 	useSearchParams,
 } from 'react-router'
 import { z } from 'zod'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.tsx'
 import { ErrorList } from '#app/components/forms.js'
 import { SearchBar } from '#app/components/search-bar.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -596,16 +599,21 @@ export default function RecipientRoute() {
 				</div>
 			) : null}
 			<section className="space-y-4">
-				<div className="flex flex-wrap items-center justify-between gap-2">
-					<h3 className="text-foreground text-xs font-semibold tracking-[0.2em] uppercase">
-						Messages
-					</h3>
+				<div className="flex flex-wrap items-end justify-between gap-2">
+					<div>
+						<h2 className="text-foreground text-xl font-bold">Messages</h2>
+						<p className="text-muted-foreground text-sm">
+							{hasFutureMessages
+								? `${data.futureMessages.length} ${data.futureMessages.length === 1 ? 'message' : 'messages'} queued to send${hasPastMessages ? ', with your history above.' : '.'}`
+								: 'Nothing queued yet. Add a note below and it will go out on the next scheduled send.'}
+						</p>
+					</div>
 				</div>
 				<SearchBar status="idle" autoSubmit showDateFilter />
 				{hasAnyMessages ? (
 					<div
 						ref={setScrollContainer}
-						className="thread-gradient max-h-[65vh] overflow-y-auto px-4 py-5 sm:px-5 sm:py-6"
+						className="thread-gradient border-border max-h-[65vh] overflow-y-auto rounded-[24px] border px-4 py-5 sm:px-5 sm:py-6"
 					>
 						{hasPastMessages || pastNextCursor ? (
 							<div className="text-muted-foreground flex flex-col items-center gap-2 text-xs font-semibold tracking-[0.2em] uppercase">
@@ -632,47 +640,73 @@ export default function RecipientRoute() {
 						</ul>
 					</div>
 				) : (
-					<div className="thread-gradient px-4 py-10 text-center text-sm sm:px-5 sm:py-12">
-						<p className="text-muted-foreground">{emptyThreadMessage}</p>
-						<Link
-							to="new"
-							className="text-foreground text-sm font-semibold underline"
-						>
-							Create a new message
-						</Link>
+					<div className="thread-gradient border-border flex flex-col items-center gap-3 rounded-[24px] border px-4 py-10 text-center text-sm sm:px-5 sm:py-12">
+						<span className="bg-card text-muted-foreground flex h-12 w-12 items-center justify-center rounded-2xl shadow-sm">
+							<Icon name="message" size="md" aria-hidden="true" />
+						</span>
+						<p className="text-foreground font-semibold">
+							{emptyThreadMessage}
+						</p>
+						{isPastFiltered ? (
+							<p className="text-muted-foreground max-w-sm">
+								Try a different search or clear the filters to see everything.
+							</p>
+						) : (
+							<>
+								<p className="text-muted-foreground max-w-sm">
+									Write a short note of thanks below. It will be sent at the
+									next scheduled time.
+								</p>
+								<Button
+									type="button"
+									variant="secondary"
+									size="sm"
+									onClick={() => newMessageInputRef.current?.focus()}
+								>
+									<Icon name="pencil-1" size="sm">
+										Write your first message
+									</Icon>
+								</Button>
+							</>
+						)}
 					</div>
 				)}
 			</section>
-			<div className="flex flex-col gap-2 pb-8 sm:pb-10">
+			<div className="flex flex-col gap-2">
 				<newMessageFetcher.Form
 					method="POST"
 					action="new"
-					className="border-border/40 bg-card focus-within:border-border/60 rounded-full border p-2 shadow-sm transition focus-within:rounded-[28px] focus-within:shadow-md"
+					className="border-border bg-card focus-within:border-ring focus-within:ring-ring rounded-[28px] border p-2 shadow-sm transition focus-within:ring-2"
 				>
 					<label htmlFor="new-message" className="sr-only">
 						Add a new message
 					</label>
-					<div className="flex items-center gap-2">
+					<div className="flex items-end gap-2">
 						<textarea
 							id="new-message"
 							name="content"
 							ref={newMessageInputRef}
-							placeholder="Aa"
-							className="text-foreground placeholder:text-muted-foreground min-h-[48px] flex-1 resize-none rounded-full bg-transparent px-4 py-2 text-sm leading-relaxed focus-visible:outline-none"
+							placeholder="Write a note of gratitude…"
+							className="text-foreground placeholder:text-muted-foreground min-h-[48px] flex-1 resize-none bg-transparent px-4 py-3 text-sm leading-relaxed focus-visible:outline-none"
 							rows={1}
 							required
 						/>
 						<StatusButton
 							status={isCreating ? 'pending' : 'idle'}
 							type="submit"
-							size="pill"
-							variant="brand-soft"
+							variant="brand"
 							className="shrink-0 px-6"
 						>
-							<Icon name="check">Add</Icon>
+							<Icon name="send" size="sm">
+								Add
+							</Icon>
 						</StatusButton>
 					</div>
 				</newMessageFetcher.Form>
+				<p className="text-muted-foreground px-2 text-xs">
+					The newest message goes out first at the next scheduled send. You can
+					edit or send any queued message early from its menu.
+				</p>
 				{newMessageFetcher.data?.result?.error ? (
 					<ErrorList
 						errors={
@@ -846,7 +880,7 @@ function MessageForms({ message }: { message: FutureMessage }) {
 							setCurrentContent(event.currentTarget.value)
 						}}
 						ref={textareaRef}
-						className="text-message-card-foreground placeholder:text-message-card-foreground/80 mt-2 w-full resize-none bg-transparent text-sm leading-relaxed focus-visible:outline-none"
+						className="text-message-card-foreground placeholder:text-message-card-foreground/80 focus-visible:ring-message-card-foreground/70 mt-2 w-full resize-none rounded-lg bg-transparent px-1 text-sm leading-relaxed focus-visible:ring-2 focus-visible:outline-none"
 						rows={2}
 					/>
 				</updateContentFetcher.Form>
@@ -881,9 +915,18 @@ export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
 			statusHandlers={{
-				403: () => <p>You are not allowed to do that</p>,
+				403: () => (
+					<ErrorMessage
+						eyebrow="Error 403"
+						title="You are not allowed to do that"
+					/>
+				),
 				404: ({ params }) => (
-					<p>No recipient with the id "{params.recipientId}" exists</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="Recipient not found"
+						description={`No recipient with the id "${params.recipientId}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/recipients+/$recipientId.new.tsx b/app/routes/_app+/recipients+/$recipientId.new.tsx
index acd1c9d3..36b1b936 100644
--- a/app/routes/_app+/recipients+/$recipientId.new.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.new.tsx
@@ -11,6 +11,8 @@ import {
 } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, TextareaField } from '#app/components/forms.js'
+import { ButtonLink } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.js'
 import { requireUserId } from '#app/utils/auth.server.js'
 import { prisma } from '#app/utils/db.server.js'
@@ -90,32 +92,47 @@ export default function RecipientIdNew() {
 	})
 
 	return (
-		<>
+		<div className="flex flex-col gap-6">
+			<div>
+				<h2 className="text-foreground text-2xl font-bold">New message</h2>
+				<p className="text-muted-foreground mt-1 text-sm">
+					Write it in your own words. It will be sent at the next scheduled
+					time.
+				</p>
+			</div>
 			<Form
-				className="flex w-full flex-col items-center gap-4"
+				className="flex w-full flex-col gap-4"
 				method="POST"
 				{...getFormProps(updateContentForm)}
 			>
 				<TextareaField
-					className="w-full flex-1"
+					className="w-full"
 					labelProps={{ children: `Message` }}
 					textareaProps={{
 						...getTextareaProps(updateContentFields.content),
+						autoFocus: true,
+						placeholder: 'Thank you for always…',
+						rows: 5,
 					}}
 					errors={updateContentFields.content.errors}
 				/>
-				<StatusButton
-					status={isPending ? 'pending' : 'idle'}
-					className="self-end"
-					type="submit"
-				>
-					Save
-				</StatusButton>
 				<ErrorList
 					id={updateContentForm.errorId}
 					errors={updateContentForm.errors}
 				/>
+				<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+					<ButtonLink variant="secondary" to="..">
+						Cancel
+					</ButtonLink>
+					<StatusButton
+						status={isPending ? 'pending' : 'idle'}
+						type="submit"
+						variant="brand"
+					>
+						<Icon name="check">Save message</Icon>
+					</StatusButton>
+				</div>
 			</Form>
-		</>
+		</div>
 	)
 }
diff --git a/app/routes/_app+/recipients+/$recipientId.tsx b/app/routes/_app+/recipients+/$recipientId.tsx
index c6e99021..b21e00a5 100644
--- a/app/routes/_app+/recipients+/$recipientId.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.tsx
@@ -7,7 +7,10 @@ import {
 	type MetaFunction,
 	useLoaderData,
 } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
+import {
+	ErrorMessage,
+	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'
@@ -88,90 +91,97 @@ export default function RecipientRoute() {
 		firstLinkRef.current?.focus()
 	}, [data.recipient.id])
 
+	const hasBadges = data.optedOut || !data.recipient.verified
+
 	return (
-		<div className="grid gap-8 lg:grid-cols-[320px_1fr] lg:gap-10">
-			<aside className="space-y-6">
-				<div className="flex items-center justify-between">
-					<Link
-						to="/recipients"
-						className="text-foreground hover:text-foreground sm:text-muted-foreground inline-flex items-center gap-2 text-base font-semibold transition sm:text-xs sm:font-semibold sm:tracking-[0.2em] sm:uppercase"
-						ref={firstLinkRef}
-					>
-						<Icon name="arrow-left" size="sm" />
-						<span className="sm:hidden">{data.recipient.name}</span>
-						<span className="hidden sm:inline">All Recipients</span>
-					</Link>
-					<ButtonLink
-						variant="secondary"
-						size="pill"
-						to="edit"
-						className="gap-2 sm:hidden"
-					>
-						<Icon name="settings">Settings</Icon>
-					</ButtonLink>
-				</div>
-				<div className="hidden flex-wrap items-start justify-between gap-4 sm:flex">
-					<div>
-						<h2 className="text-foreground text-2xl font-bold sm:text-3xl">
+		<div className="flex flex-col gap-6 lg:grid lg:grid-cols-[300px_1fr] lg:items-start lg:gap-10">
+			<aside className="flex flex-col gap-5 lg:sticky lg:top-28">
+				<Link
+					to="/recipients"
+					className="text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-2 text-sm font-semibold transition-colors"
+					ref={firstLinkRef}
+				>
+					<Icon name="arrow-left" size="sm" aria-hidden="true" />
+					All recipients
+				</Link>
+				<div className="flex flex-wrap items-start justify-between gap-3">
+					<div className="min-w-0">
+						<h1 className="text-foreground font-serif text-3xl font-semibold break-words sm:text-4xl">
 							{data.recipient.name}
-						</h2>
-						<div className="text-muted-foreground mt-2 flex flex-wrap items-center gap-2 text-xs font-semibold tracking-[0.2em] uppercase">
-							{data.optedOut ? (
-								<span className="bg-destructive/10 text-foreground-destructive rounded-full px-3 py-1">
-									Opted out
-								</span>
-							) : null}
-							{data.recipient.verified ? null : (
-								<Link
-									preventScrollReset
-									to="edit"
-									className="border-destructive/40 text-foreground-destructive rounded-full border px-3 py-1"
-								>
-									Unverified
-								</Link>
-							)}
-						</div>
+						</h1>
+						{hasBadges ? (
+							<div className="mt-2 flex flex-wrap items-center gap-2 text-xs font-semibold tracking-[0.15em] uppercase">
+								{data.optedOut ? (
+									<SimpleTooltip content="This person replied STOP. Messages will not be sent until they reply START.">
+										<span className="bg-destructive/10 text-foreground-destructive rounded-full px-3 py-1">
+											Opted out
+										</span>
+									</SimpleTooltip>
+								) : null}
+								{data.recipient.verified ? null : (
+									<Link
+										preventScrollReset
+										to="edit"
+										className="border-destructive/40 text-foreground-destructive hover:bg-destructive/10 rounded-full border px-3 py-1 transition-colors"
+									>
+										Unverified · Fix
+									</Link>
+								)}
+							</div>
+						) : null}
 					</div>
 					<ButtonLink
 						variant="secondary"
-						size="pill"
+						size="sm"
 						to="edit"
 						className="gap-2"
+						aria-label={`Edit ${data.recipient.name}`}
 					>
-						<Icon name="settings">Settings</Icon>
+						<Icon name="settings" size="sm" aria-hidden="true" />
+						Edit
 					</ButtonLink>
 				</div>
-				<div className="hidden space-y-3 sm:block">
+				<dl className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
 					<div className="border-border bg-card flex items-center gap-3 rounded-2xl border px-4 py-3 shadow-sm">
 						<span className="bg-muted text-muted-foreground rounded-xl p-2">
-							<Icon name="phone" size="sm" />
-						</span>
-						<span className="text-foreground text-sm font-medium">
-							{data.recipient.phoneNumber}
+							<Icon name="phone" size="sm" aria-hidden="true" />
 						</span>
+						<div className="min-w-0">
+							<dt className="text-muted-foreground text-[0.7rem] font-semibold tracking-[0.15em] uppercase">
+								Phone
+							</dt>
+							<dd className="text-foreground truncate text-sm font-medium">
+								{data.recipient.phoneNumber}
+							</dd>
+						</div>
 					</div>
-					<SimpleTooltip
-						content={
-							data.cronError
-								? `Cron error: ${data.cronError}`
-								: 'Next send time'
-						}
+					<div
+						className={cn(
+							'border-border bg-card flex items-center gap-3 rounded-2xl border px-4 py-3 shadow-sm',
+							data.cronError && 'border-destructive/40',
+						)}
 					>
-						<div
-							className={cn(
-								'border-border bg-card text-foreground flex items-center gap-3 rounded-2xl border px-4 py-3 text-sm font-medium shadow-sm',
-								data.cronError && 'text-foreground-destructive',
-							)}
-						>
-							<span className="bg-muted text-muted-foreground rounded-xl p-2">
-								<Icon name="clock" size="sm" />
-							</span>
-							<span>{data.formattedNextSendTime}</span>
+						<span className="bg-muted text-muted-foreground rounded-xl p-2">
+							<Icon name="clock" size="sm" aria-hidden="true" />
+						</span>
+						<div className="min-w-0">
+							<dt className="text-muted-foreground text-[0.7rem] font-semibold tracking-[0.15em] uppercase">
+								{data.cronError ? 'Schedule issue' : 'Next send'}
+							</dt>
+							<dd
+								className={cn(
+									'text-foreground truncate text-sm font-medium',
+									data.cronError && 'text-foreground-destructive',
+								)}
+								title={data.cronError ?? undefined}
+							>
+								{data.formattedNextSendTime}
+							</dd>
 						</div>
-					</SimpleTooltip>
-				</div>
+					</div>
+				</dl>
 			</aside>
-			<section className="bg-card min-w-0 px-0 py-4 sm:px-6 sm:py-8">
+			<section className="border-border bg-card min-w-0 rounded-[28px] border p-4 shadow-sm sm:p-6 lg:p-8">
 				<Outlet />
 			</section>
 		</div>
@@ -182,9 +192,18 @@ export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
 			statusHandlers={{
-				403: () => <p>You are not allowed to do that</p>,
+				403: () => (
+					<ErrorMessage
+						eyebrow="Error 403"
+						title="You are not allowed to do that"
+					/>
+				),
 				404: ({ params }) => (
-					<p>No recipient with the id "{params.recipientId}" exists</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="Recipient not found"
+						description={`No recipient with the id "${params.recipientId}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/recipients+/__editor.tsx b/app/routes/_app+/recipients+/__editor.tsx
index a36f730e..52fb0090 100644
--- a/app/routes/_app+/recipients+/__editor.tsx
+++ b/app/routes/_app+/recipients+/__editor.tsx
@@ -5,16 +5,20 @@ import {
 	useForm,
 } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod/v4'
-import { useState } from 'react'
+import { CronExpressionParser } from 'cron-parser'
+import { useRef, useState } from 'react'
 import { Form, useActionData, useFetcher } from 'react-router'
 import { z } from 'zod'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.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'
-import { useDoubleCheck, useIsPending } from '#app/utils/misc.tsx'
+import { cn, useDoubleCheck, useIsPending } from '#app/utils/misc.tsx'
 import { type Recipient } from '#app/utils/prisma-generated.server/client.ts'
 import {
 	type deleteRecipientAction,
@@ -51,6 +55,35 @@ export const DeleteRecipientSchema = z.object({
 	recipientId: z.string(),
 })
 
+const schedulePresets = [
+	{ label: 'Every day at 9:00 AM', cron: '0 9 * * *' },
+	{ label: 'Weekdays at 8:00 AM', cron: '0 8 * * 1-5' },
+	{ label: 'Mondays at 9:00 AM', cron: '0 9 * * 1' },
+	{ label: 'Sundays at 6:00 PM', cron: '0 18 * * 0' },
+	{ label: '1st of the month at 10:00 AM', cron: '0 10 1 * *' },
+]
+
+function describeNextSend(cron: string, timeZone: string) {
+	if (!cron.trim()) return null
+	try {
+		const next = CronExpressionParser.parse(cron, { tz: timeZone })
+			.next()
+			.toDate()
+		return new Intl.DateTimeFormat('en-US', {
+			weekday: 'short',
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true,
+			timeZone,
+			timeZoneName: 'short',
+		}).format(next)
+	} catch {
+		return null
+	}
+}
+
 export function RecipientEditor({
 	supportedTimeZones,
 	recipient,
@@ -70,10 +103,23 @@ 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 pageTitle = recipient ? 'Edit recipient' : 'Add a recipient'
+	const pageDescription = recipient
+		? 'Update their details or adjust when your notes arrive.'
+		: 'Tell us who you want to reach and when your notes should arrive.'
 	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 submitLabel = recipient ? 'Save Changes' : 'Add Recipient'
+	const defaultTimeZone =
+		recipient?.timeZone ??
+		(supportedTimeZones.includes('America/New_York')
+			? 'America/New_York'
+			: supportedTimeZones[0]) ??
+		'UTC'
+	const [cronValue, setCronValue] = useState(recipient?.scheduleCron ?? '')
+	const [timeZoneValue, setTimeZoneValue] = useState(defaultTimeZone)
+	const cronInputRef = useRef<HTMLInputElement>(null)
+	const nextSendPreview = describeNextSend(cronValue, timeZoneValue)
 
 	const [form, fields] = useForm({
 		id: 'recipient-editor',
@@ -91,153 +137,205 @@ export function RecipientEditor({
 					timeZone: recipient.timeZone,
 					disabled: recipient.disabled ? 'on' : undefined,
 				}
-			: undefined,
+			: { timeZone: defaultTimeZone },
 		shouldRevalidate: 'onBlur',
 	})
 
+	const applyPreset = (cron: string) => {
+		const input = cronInputRef.current
+		if (!input) return
+		input.value = cron
+		input.dispatchEvent(new Event('input', { bubbles: true }))
+		setCronValue(cron)
+		input.focus()
+	}
+
+	const disabledInputProps = getInputProps(fields.disabled, {
+		type: 'checkbox',
+	})
+
 	return (
-		<div className="flex flex-col items-center gap-8">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-foreground mt-2 text-3xl font-bold md:text-4xl">
-					{pageTitle}
-				</h1>
-			</div>
-			<div className="border-border bg-card w-full max-w-3xl rounded-[32px] border p-8 shadow-sm">
-				<div className="flex justify-end gap-2">
-					{needsVerification ? <VerifyForm /> : null}
+		<div className="flex flex-col gap-6">
+			<div className="flex flex-wrap items-start justify-between gap-4">
+				<div>
+					{recipient ? (
+						<h2 className="text-foreground text-2xl font-bold">{pageTitle}</h2>
+					) : (
+						<h1 className="text-foreground font-serif text-3xl font-semibold sm:text-4xl">
+							{pageTitle}
+						</h1>
+					)}
+					<p className="text-muted-foreground mt-1 text-sm">
+						{pageDescription}
+					</p>
 				</div>
-				{needsVerification ? (
-					<div className="border-destructive/30 bg-destructive/10 text-foreground-destructive mt-4 rounded-2xl border p-4 text-sm">
-						<strong className="font-semibold">Verification required</strong>
-						<p className="text-muted-foreground mt-2">
-							Click "Verify" to send a verification code to{' '}
-							{recipient?.phoneNumber}. You will enter the code in the next
-							step.
+				{needsVerification ? <VerifyForm /> : null}
+			</div>
+			{needsVerification ? (
+				<div className="border-warning/50 bg-warning/10 text-foreground flex items-start gap-3 rounded-2xl border p-4 text-sm">
+					<Icon
+						name="exclamation-circle-outline"
+						size="md"
+						aria-hidden="true"
+						className="text-warning-foreground mt-0.5 shrink-0"
+					/>
+					<div>
+						<p className="font-semibold">Verification required</p>
+						<p className="text-muted-foreground mt-1">
+							Messages won't be sent until {recipient?.name} confirms their
+							number. Press <strong>Verify</strong> to text a code to{' '}
+							{recipient?.phoneNumber}, then enter the code they share with you.
 						</p>
 					</div>
+				</div>
+			) : null}
+			<Form
+				method="POST"
+				className="flex flex-col gap-2"
+				{...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}
-				<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={{
+						autoFocus: true,
+						placeholder: 'Grandma June',
+						...getInputProps(fields.name, { type: 'text' }),
+					}}
+					errors={fields.name.errors}
+				/>
+				<div className="grid gap-x-4 sm:grid-cols-2">
 					<Field
-						labelProps={{ children: 'Name' }}
+						labelProps={{ children: 'Phone Number' }}
 						inputProps={{
-							autoFocus: true,
-							...getInputProps(fields.name, { type: 'text' }),
+							placeholder: '+1 555 123 4567',
+							autoComplete: 'off',
+							...getInputProps(fields.phoneNumber, { type: 'tel' }),
 						}}
-						errors={fields.name.errors}
+						errors={fields.phoneNumber.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-foreground text-sm font-semibold">
-							Create a Schedule
-						</p>
-						<label className="border-border bg-muted text-muted-foreground hover:text-foreground inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-[0.2em] uppercase transition">
-							<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>
+					<SelectField
+						labelProps={{ children: 'Their Time Zone' }}
+						selectProps={{
+							...getSelectProps(fields.timeZone),
+							onChange: (event) => setTimeZoneValue(event.currentTarget.value),
+							children: supportedTimeZones.map((tz) => (
+								<option key={tz} value={tz}>
+									{tz.replaceAll('_', ' ')}
+								</option>
+							)),
+						}}
+						errors={fields.timeZone.errors}
+					/>
+				</div>
+
+				<fieldset className="border-border bg-muted/40 mt-2 rounded-[24px] border p-4 sm:p-5">
+					<legend className="text-foreground px-1 text-sm font-semibold">
+						Schedule
+					</legend>
+					<p className="text-muted-foreground -mt-1 mb-4 text-sm">
+						Pick a preset or write your own. Times are in their time zone.
+					</p>
+					<div className="mb-4 flex flex-wrap gap-2">
+						{schedulePresets.map((preset) => {
+							const selected = preset.cron === cronValue.trim()
+							return (
+								<button
+									key={preset.cron}
+									type="button"
+									onClick={() => applyPreset(preset.cron)}
+									aria-pressed={selected}
+									className={cn(
+										'focus-visible:ring-ring rounded-full border px-3 py-1.5 text-xs font-semibold transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+										selected
+											? 'border-brand bg-brand text-brand-foreground'
+											: 'border-border bg-card text-foreground hover:border-brand/60',
+									)}
+								>
+									{preset.label}
+								</button>
+							)
+						})}
 					</div>
 					<Field
-						labelProps={{ children: 'Schedule' }}
+						labelProps={{ children: 'Cron expression' }}
 						inputProps={{
+							placeholder: '0 9 * * 1',
 							...getInputProps(fields.scheduleCron, { type: 'text' }),
-							placeholder: 'Every Thursday at 10:00 AM',
+							ref: cronInputRef,
+							onChange: (event) => setCronValue(event.currentTarget.value),
+							className: 'font-mono',
+							spellCheck: false,
+							autoComplete: 'off',
 						}}
 						errors={fields.scheduleCron.errors}
 					/>
-					<div className="border-border bg-muted text-muted-foreground flex items-center gap-3 rounded-2xl border px-4 py-3 text-sm">
-						<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"
-							target="_blank"
-							rel="noreferrer"
-						>
-							crontab.guru
-						</a>{' '}
-						to build a cron schedule.
-					</small>
-					<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}
-							variant="brand"
-						>
-							<Icon name="check">{submitLabel}</Icon>
-						</StatusButton>
+					<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+						<p className="text-muted-foreground flex items-center gap-2 text-sm">
+							<Icon name="clock" size="sm" aria-hidden="true" />
+							{nextSendPreview ? (
+								<span>
+									Next send:{' '}
+									<span className="text-foreground font-semibold">
+										{nextSendPreview}
+									</span>
+								</span>
+							) : (
+								<span>
+									Enter a valid schedule to preview the next send. Need help?{' '}
+									<a
+										href="https://crontab.guru/"
+										className="text-foreground font-semibold underline underline-offset-4"
+										target="_blank"
+										rel="noreferrer"
+									>
+										crontab.guru
+									</a>
+								</span>
+							)}
+						</p>
+						<label className="border-border bg-card hover:border-brand/60 has-[:checked]:border-warning has-[:checked]:bg-warning/10 inline-flex cursor-pointer items-center gap-2.5 self-start rounded-full border px-3 py-2 text-sm font-semibold transition-colors">
+							<input
+								{...disabledInputProps}
+								className="accent-warning h-4 w-4 rounded"
+								onChange={(e) => setIsDisabled(e.target.checked)}
+							/>
+							<span>{pauseLabel}</span>
+						</label>
 					</div>
+				</fieldset>
+				<ErrorList id={form.errorId} errors={form.errors} />
+			</Form>
+			<div className="border-border flex flex-col-reverse gap-3 border-t pt-6 sm:flex-row sm:items-center sm:justify-between">
+				{recipient?.id ? <DeleteRecipient id={recipient.id} /> : <span />}
+				<div className="flex flex-col-reverse gap-3 sm:flex-row">
+					<ButtonLink variant="secondary" to={recipient ? '..' : '/recipients'}>
+						Cancel
+					</ButtonLink>
+					<StatusButton
+						form={form.id}
+						type="submit"
+						disabled={isPending}
+						status={isPending ? 'pending' : 'idle'}
+						name="intent"
+						value={upsertRecipientActionIntent}
+						variant="brand"
+					>
+						<Icon name="check">{submitLabel}</Icon>
+					</StatusButton>
 				</div>
 			</div>
 		</div>
@@ -250,11 +348,12 @@ function VerifyForm() {
 		<fetcher.Form method="POST">
 			<StatusButton
 				type="submit"
+				variant="warm"
 				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
 				name="intent"
 				value={sendVerificationActionIntent}
 			>
-				<Icon name="check">Verify</Icon>
+				<Icon name="send">Verify</Icon>
 			</StatusButton>
 		</fetcher.Form>
 	)
@@ -273,7 +372,7 @@ function DeleteRecipient({ id }: { id: string }) {
 		<fetcher.Form method="POST" {...getFormProps(form)}>
 			<input type="hidden" name="recipientId" value={id} />
 			<StatusButton
-				variant="destructive"
+				variant={dc.doubleCheck ? 'destructive' : 'ghost'}
 				status={isPending ? 'pending' : (form.status ?? 'idle')}
 				{...dc.getButtonProps({
 					type: 'submit',
@@ -281,13 +380,17 @@ function DeleteRecipient({ id }: { id: string }) {
 					name: 'intent',
 					value: deleteRecipientActionIntent,
 					disabled: isPending,
-					className: 'data-[safe-delay=true]:opacity-50',
+					className: cn(
+						'data-[safe-delay=true]:opacity-50',
+						!dc.doubleCheck &&
+							'text-foreground-destructive hover:bg-destructive/10',
+					),
 				})}
 			>
 				{dc.doubleCheck ? (
-					<Icon name="question-mark-circled">Confirm</Icon>
+					<Icon name="question-mark-circled">Confirm delete</Icon>
 				) : (
-					<Icon name="trash">Delete</Icon>
+					<Icon name="trash">Delete recipient</Icon>
 				)}
 			</StatusButton>
 			<ErrorList errors={form.errors} id={form.errorId} />
@@ -300,7 +403,11 @@ export function ErrorBoundary() {
 		<GeneralErrorBoundary
 			statusHandlers={{
 				404: ({ params }) => (
-					<p>No recipient with the id "{params.recipientId}" exists</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="Recipient not found"
+						description={`No recipient with the id "${params.recipientId}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/recipients+/_layout.tsx b/app/routes/_app+/recipients+/_layout.tsx
index 5919eafb..2fc1e0fb 100644
--- a/app/routes/_app+/recipients+/_layout.tsx
+++ b/app/routes/_app+/recipients+/_layout.tsx
@@ -4,7 +4,10 @@ import {
 	Outlet,
 	useLoaderData,
 } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.tsx'
 import { requireUserId } from '#app/utils/auth.server.js'
 import { CronParseError, getScheduleWindow } from '#app/utils/cron.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -201,7 +204,7 @@ export default function RecipientsLayout() {
 	const { recipients, subscriptionStatus } = useLoaderData<typeof loader>()
 
 	return (
-		<div className="container mx-auto flex min-h-0 flex-grow flex-col px-4 pt-10 pb-16 md:px-8">
+		<div className="container flex min-h-0 flex-grow flex-col pt-8 pb-16 md:pt-10">
 			<Outlet context={{ recipients, subscriptionStatus }} />
 		</div>
 	)
@@ -212,9 +215,11 @@ export function ErrorBoundary() {
 		<GeneralErrorBoundary
 			statusHandlers={{
 				404: ({ params }) => (
-					<p>
-						No user with the recipient with the id "{params.recipientId}" exists
-					</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="Recipient not found"
+						description={`No recipient with the id "${params.recipientId}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/recipients+/index.tsx b/app/routes/_app+/recipients+/index.tsx
index 576c2341..01a45f0e 100644
--- a/app/routes/_app+/recipients+/index.tsx
+++ b/app/routes/_app+/recipients+/index.tsx
@@ -3,12 +3,16 @@ import { Link, type MetaFunction, useOutletContext } from 'react-router'
 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 { cn } from '#app/utils/misc.tsx'
 import { type RecipientsOutletContext } from './_layout.tsx'
 
 export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
+const gridColumns =
+	'md:grid-cols-[minmax(180px,1.3fr)_minmax(200px,1.3fr)_minmax(120px,0.9fr)_auto]'
+
 export default function RecipientsIndexRoute() {
 	const { recipients, subscriptionStatus } =
 		useOutletContext<RecipientsOutletContext>()
@@ -18,142 +22,186 @@ export default function RecipientsIndexRoute() {
 	return (
 		<div className="flex flex-col gap-8">
 			{showTrialBanner ? (
-				<div className="bg-banner-trial text-banner-trial-foreground rounded-[20px] px-6 py-3 text-sm font-semibold">
-					Upgrade to text unlimited loved ones!{' '}
-					<Link className="underline" to="/settings/profile/subscription">
-						Start your free trial
-					</Link>
-				</div>
+				<PlanBanner
+					tone="trial"
+					message="Start your free trial to begin sending messages."
+					cta="Start your free trial"
+				/>
 			) : null}
 			{showUpgradeBanner ? (
-				<div className="bg-banner-upgrade text-banner-upgrade-foreground rounded-[20px] px-6 py-3 text-sm font-semibold">
-					Upgrade to Premium to text more loved ones.{' '}
-					<Link className="underline" to="/settings/profile/subscription">
-						Upgrade to Premium
-					</Link>
-				</div>
+				<PlanBanner
+					tone="upgrade"
+					message="On Basic you can send one message a day. Premium unlocks up to ten."
+					cta="Upgrade to Premium"
+				/>
 			) : null}
-			<div className="flex items-center justify-between gap-4">
-				<h1 className="text-foreground text-3xl font-bold sm:text-4xl">
-					Recipients
-				</h1>
-				<ButtonLink
-					to="new"
-					variant="outline"
-					size="icon"
-					aria-label="Add recipient"
-					className="h-14 w-14 shadow-sm"
-				>
-					<Icon name="plus" size="xl" />
-				</ButtonLink>
-			</div>
-
-			<div
-				className={
-					hasRecipients
-						? 'md:border-border md:bg-card md:rounded-[32px] md:border md:shadow-sm'
-						: 'border-border bg-card rounded-[32px] border shadow-sm'
-				}
-			>
-				<div className="border-border text-muted-foreground hidden grid-cols-[minmax(160px,1.2fr)_minmax(180px,1.2fr)_minmax(220px,1.4fr)_minmax(140px,0.8fr)_120px] gap-4 border-b px-8 py-4 text-xs font-semibold tracking-[0.2em] uppercase md:grid">
-					<span>Recipient Name</span>
-					<span>Phone Number</span>
-					<span>Schedule</span>
-					<span>Prepared Messages</span>
-					<span />
+			<div className="flex flex-wrap items-end justify-between gap-4">
+				<div>
+					<h1 className="text-foreground font-serif text-3xl font-semibold sm:text-4xl">
+						Recipients
+					</h1>
+					<p className="text-muted-foreground mt-1 text-sm sm:text-base">
+						The people you send gratitude to, and when they hear from you.
+					</p>
 				</div>
 				{hasRecipients ? (
-					<div className="md:divide-border space-y-4 md:space-y-0 md:divide-y">
+					<ButtonLink to="new" variant="brand" className="gap-2">
+						<Icon name="plus" size="sm" aria-hidden="true" />
+						Add recipient
+					</ButtonLink>
+				) : null}
+			</div>
+
+			{hasRecipients ? (
+				<div className="md:border-border md:bg-card md:rounded-[32px] md:border md:shadow-sm">
+					<div
+						className={cn(
+							'border-border text-muted-foreground hidden gap-4 border-b px-8 py-4 text-xs font-semibold tracking-[0.2em] uppercase md:grid',
+							gridColumns,
+						)}
+					>
+						<span>Recipient</span>
+						<span>Schedule</span>
+						<span>Queued</span>
+						<span className="sr-only">Actions</span>
+					</div>
+					<ul className="md:divide-border space-y-3 md:space-y-0 md:divide-y">
 						{recipients.map((recipient) => {
 							const messageCount = recipient.messageCount
-							const messageLabel = messageCount === 1 ? 'message' : 'messages'
-							const messageText = `${messageCount} ${messageLabel}`
-							const messagePreparedText = `${messageText} prepared`
-							const messageTone =
-								messageCount === 0 ? 'text-warning' : 'text-muted-foreground'
+							const messageText = `${messageCount} ${messageCount === 1 ? 'message' : 'messages'}`
+							const queueEmpty = messageCount === 0
 							const scheduleTone = recipient.disabled
 								? 'text-muted-foreground'
 								: recipient.cronError
 									? 'text-foreground-destructive'
-									: 'text-muted-foreground'
+									: 'text-foreground'
 							return (
-								<div
+								<li
 									key={recipient.id}
-									className="border-border bg-card flex flex-col gap-4 rounded-[24px] border px-5 py-4 shadow-sm md:grid 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:rounded-none md:border-0 md:bg-transparent md:px-8 md:py-6 md:shadow-none"
+									className={cn(
+										'border-border bg-card hover:border-brand/40 md:hover:bg-muted/40 relative flex flex-col gap-3 rounded-[24px] border px-5 py-4 shadow-sm transition-colors md:grid md:items-center md:gap-4 md:rounded-none md:border-0 md:bg-transparent md:px-8 md:py-5 md:shadow-none',
+										gridColumns,
+									)}
 								>
-									<div className="flex items-start justify-between gap-4 md:flex-col md:items-start md:gap-1">
+									<div className="min-w-0">
 										<Link
 											to={recipient.id}
-											className="text-foreground text-xl font-semibold hover:underline md:text-lg"
+											prefetch="intent"
+											className="text-foreground block truncate text-lg font-semibold after:absolute after:inset-0 after:content-[''] md:text-base"
 										>
 											{recipient.name}
 										</Link>
-										<ButtonLink
-											to={recipient.id}
-											variant="outline"
-											size="icon"
-											aria-label={`Edit ${recipient.name}`}
-											className="md:hidden"
-										>
-											<Icon name="pencil-1" size="sm" />
-										</ButtonLink>
-									</div>
-									<div className="hidden flex-col gap-1 md:flex">
-										<span className="text-muted-foreground text-sm">
+										<p className="text-muted-foreground truncate text-sm">
 											{recipient.phoneNumber}
-										</span>
+										</p>
 									</div>
-									<div className="flex items-center gap-3 text-sm md:flex-col md:items-start md:gap-1">
-										<span className="bg-muted text-muted-foreground rounded-full p-2 md:hidden">
-											<Icon name="clock" size="sm" />
-										</span>
-										<span className={`text-sm font-medium ${scheduleTone}`}>
+									<div className="flex items-center gap-2 text-sm">
+										<Icon
+											name="clock"
+											size="sm"
+											aria-hidden="true"
+											className="text-muted-foreground shrink-0"
+										/>
+										<span className={cn('font-medium', scheduleTone)}>
 											{recipient.scheduleDisplay}
 										</span>
 									</div>
-									<div className="flex flex-wrap items-center gap-2 text-sm md:flex-col md:items-start md:gap-1">
-										<span className="bg-muted text-muted-foreground rounded-full p-2 md:hidden">
-											<Icon name="message" size="sm" />
-										</span>
-										<span className={`text-sm font-semibold ${messageTone}`}>
-											<span className="md:hidden">{messagePreparedText}</span>
-											<span className="hidden md:inline">{messageText}</span>
-										</span>
-										{messageCount === 0 ? (
-											<span className="bg-warning/15 text-warning rounded-full p-1 md:hidden">
-												<Icon name="exclamation-circle-outline" size="xs" />
+									<div className="flex items-center gap-2 text-sm">
+										{queueEmpty ? (
+											<span className="bg-warning/15 text-warning-foreground inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold">
+												<Icon
+													name="exclamation-circle-outline"
+													size="xs"
+													aria-hidden="true"
+												/>
+												Nothing queued
 											</span>
-										) : null}
+										) : (
+											<>
+												<Icon
+													name="message"
+													size="sm"
+													aria-hidden="true"
+													className="text-muted-foreground shrink-0"
+												/>
+												<span className="text-foreground font-medium">
+													{messageText}
+												</span>
+											</>
+										)}
 									</div>
-									<div className="hidden md:flex md:justify-end">
-										<ButtonLink variant="secondary" size="sm" to={recipient.id}>
-											<Icon name="pencil-1">Manage</Icon>
-										</ButtonLink>
+									<div className="text-muted-foreground hidden items-center justify-end gap-1 text-sm font-semibold md:flex">
+										Open
+										<Icon name="chevron-right" size="sm" aria-hidden="true" />
 									</div>
-								</div>
+									<Icon
+										name="chevron-right"
+										size="sm"
+										aria-hidden="true"
+										className="text-muted-foreground absolute top-5 right-5 md:hidden"
+									/>
+								</li>
 							)
 						})}
+					</ul>
+				</div>
+			) : (
+				<div className="border-border bg-card flex flex-col items-center gap-5 rounded-[32px] border px-6 py-16 text-center shadow-sm">
+					<span className="bg-accent text-accent-foreground flex h-14 w-14 items-center justify-center rounded-2xl">
+						<Icon name="avatar" size="lg" aria-hidden="true" />
+					</span>
+					<div className="max-w-sm">
+						<p className="text-foreground text-xl font-bold">
+							Add your first recipient
+						</p>
+						<p className="text-muted-foreground mt-2 text-sm leading-relaxed">
+							Start with someone you're grateful for. You'll pick a schedule,
+							then queue up notes for them to receive.
+						</p>
 					</div>
-				) : (
-					<div className="text-body-sm text-muted-foreground flex flex-col items-center gap-4 px-8 py-16 text-center">
-						<div>
-							<p className="text-foreground text-base font-semibold">
-								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"
-							variant="brand"
-							className="flex w-full items-center justify-center gap-2 sm:w-auto"
-						>
-							<Icon name="plus">Add Recipient</Icon>
-						</ButtonLink>
-					</div>
-				)}
-			</div>
+					<ButtonLink
+						to="new"
+						variant="brand"
+						className="w-full gap-2 sm:w-auto"
+					>
+						<Icon name="plus" size="sm" aria-hidden="true" />
+						Add recipient
+					</ButtonLink>
+				</div>
+			)}
+		</div>
+	)
+}
+
+function PlanBanner({
+	tone,
+	message,
+	cta,
+}: {
+	tone: 'trial' | 'upgrade'
+	message: string
+	cta: string
+}) {
+	return (
+		<div
+			className={cn(
+				'flex flex-col gap-3 rounded-[20px] px-5 py-4 text-sm sm:flex-row sm:items-center sm:justify-between',
+				tone === 'trial'
+					? 'bg-banner-trial text-banner-trial-foreground'
+					: 'bg-banner-upgrade text-banner-upgrade-foreground',
+			)}
+		>
+			<p className="flex items-center gap-2 font-semibold">
+				<Icon name="star" size="sm" aria-hidden="true" />
+				{message}
+			</p>
+			<Link
+				to="/settings/profile/subscription"
+				className="inline-flex items-center gap-1 font-semibold underline underline-offset-4"
+			>
+				{cta}
+				<Icon name="arrow-right" size="xs" aria-hidden="true" />
+			</Link>
 		</div>
 	)
 }
@@ -162,7 +210,7 @@ export const meta: MetaFunction<null, { root: typeof rootLoader }> = ({
 	matches,
 }) => {
 	const rootMatch = matches.find((m) => m.id === 'root')
-	const displayName = rootMatch?.data?.user?.name ?? 'Unkown User'
+	const displayName = rootMatch?.data?.user?.name ?? 'Unknown User'
 	return [
 		{ title: `${displayName}'s Recipients | GratiText` },
 		{
diff --git a/app/routes/_app+/recipients+/new.tsx b/app/routes/_app+/recipients+/new.tsx
index 79dc6dd8..f1d61f42 100644
--- a/app/routes/_app+/recipients+/new.tsx
+++ b/app/routes/_app+/recipients+/new.tsx
@@ -1,10 +1,12 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	data as json,
+	Link,
 	type LoaderFunctionArgs,
 	type MetaFunction,
 	useLoaderData,
 } from 'react-router'
+import { Icon } from '#app/components/ui/icon.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { RecipientEditor } from './__editor.tsx'
 
@@ -27,5 +29,18 @@ export const meta: MetaFunction = () => {
 export default function NewRecipientEditor() {
 	const data = useLoaderData<typeof loader>()
 
-	return <RecipientEditor supportedTimeZones={data.supportedTimeZones} />
+	return (
+		<div className="mx-auto flex w-full max-w-3xl flex-col gap-5">
+			<Link
+				to="/recipients"
+				className="text-muted-foreground hover:text-foreground inline-flex w-fit items-center gap-2 text-sm font-semibold transition-colors"
+			>
+				<Icon name="arrow-left" size="sm" aria-hidden="true" />
+				All recipients
+			</Link>
+			<div className="border-border bg-card rounded-[32px] border p-5 shadow-sm sm:p-8">
+				<RecipientEditor supportedTimeZones={data.supportedTimeZones} />
+			</div>
+		</div>
+	)
 }
diff --git a/app/routes/_app+/settings.profile+/_layout.tsx b/app/routes/_app+/settings.profile+/_layout.tsx
index 1ae16f10..87f44d1a 100644
--- a/app/routes/_app+/settings.profile+/_layout.tsx
+++ b/app/routes/_app+/settings.profile+/_layout.tsx
@@ -8,7 +8,6 @@ import {
 	useMatches,
 } from 'react-router'
 import { z } from 'zod'
-import { Spacer } from '#app/components/spacer.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -19,7 +18,7 @@ export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })
 export type BreadcrumbHandle = z.infer<typeof BreadcrumbHandle>
 
 export const handle: BreadcrumbHandle & SEOHandle = {
-	breadcrumb: <Icon name="file-text">Edit Profile</Icon>,
+	breadcrumb: <Icon name="settings">Settings</Icon>,
 	getSitemapEntries: () => null,
 }
 
@@ -53,12 +52,12 @@ export default function EditUserProfile() {
 		.filter(Boolean)
 
 	return (
-		<div className="m-auto mt-16 mb-24 max-w-3xl">
-			<div className="container">
-				<ul className="flex gap-3">
+		<div className="container max-w-3xl pt-8 pb-20 md:pt-10">
+			<nav aria-label="Breadcrumb">
+				<ol className="text-muted-foreground flex flex-wrap items-center gap-2 text-sm font-medium">
 					<li>
 						<Link
-							className="text-muted-foreground"
+							className="hover:text-foreground transition-colors"
 							to={`/users/${user.username}`}
 						>
 							Profile
@@ -67,17 +66,23 @@ export default function EditUserProfile() {
 					{breadcrumbs.map((breadcrumb, i, arr) => (
 						<li
 							key={i}
-							className={cn('flex items-center gap-3', {
-								'text-muted-foreground': i < arr.length - 1,
+							className={cn('flex items-center gap-2', {
+								'text-foreground': i === arr.length - 1,
 							})}
+							aria-current={i === arr.length - 1 ? 'page' : undefined}
 						>
-							▶️ {breadcrumb}
+							<Icon
+								name="chevron-right"
+								size="xs"
+								aria-hidden="true"
+								className="text-muted-foreground"
+							/>
+							{breadcrumb}
 						</li>
 					))}
-				</ul>
-			</div>
-			<Spacer size="xs" />
-			<main className="bg-muted mx-auto px-6 py-8 md:container md:rounded-3xl">
+				</ol>
+			</nav>
+			<main className="mt-6">
 				<Outlet />
 			</main>
 		</div>
diff --git a/app/routes/_app+/settings.profile+/change-number.tsx b/app/routes/_app+/settings.profile+/change-number.tsx
index c7a5d6ca..27a92de2 100644
--- a/app/routes/_app+/settings.profile+/change-number.tsx
+++ b/app/routes/_app+/settings.profile+/change-number.tsx
@@ -3,7 +3,6 @@ import { getZodConstraint, parseWithZod } from '@conform-to/zod/v4'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	Form,
-	Link,
 	data as json,
 	redirect,
 	type ActionFunctionArgs,
@@ -13,7 +12,8 @@ import {
 } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
-import { Button } from '#app/components/ui/button.tsx'
+import { SettingsCard } from '#app/components/settings-card.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 {
@@ -121,40 +121,42 @@ export default function ChangePhoneNumberIndex() {
 
 	const isPending = useIsPending()
 	return (
-		<div className="container flex min-h-full items-center justify-center pt-16 pb-24">
-			<div className="border-border bg-card w-full max-w-lg rounded-[32px] border px-6 py-8 shadow-sm">
-				<h1 className="text-foreground text-2xl font-bold">
-					Change Phone Number
-				</h1>
-				<p className="text-muted-foreground mt-2 text-sm">
-					You will receive a text at the new phone number to confirm.
-				</p>
-				<p className="text-muted-foreground mt-2 text-sm">
-					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={{
-							...getInputProps(fields.phoneNumber, { type: 'tel' }),
-							autoComplete: 'tel',
-						}}
-						errors={fields.phoneNumber.errors}
-					/>
-					<ErrorList id={form.errorId} errors={form.errors} />
-					<div className="flex flex-wrap gap-3">
-						<Button variant="secondary" asChild>
-							<Link to="..">Cancel</Link>
-						</Button>
-						<StatusButton
-							variant="brand"
-							status={isPending ? 'pending' : (form.status ?? 'idle')}
-						>
-							Send Confirmation
-						</StatusButton>
-					</div>
-				</Form>
-			</div>
-		</div>
+		<SettingsCard
+			title="Change your phone number"
+			description={
+				<>
+					<p>
+						We will text a confirmation code to the new number. Your current
+						number,{' '}
+						<strong className="text-foreground">{data.user.phoneNumber}</strong>
+						, will also get a heads-up that the change happened.
+					</p>
+				</>
+			}
+		>
+			<Form method="POST" {...getFormProps(form)} className="space-y-6">
+				<Field
+					labelProps={{ children: 'New Phone Number' }}
+					inputProps={{
+						...getInputProps(fields.phoneNumber, { type: 'tel' }),
+						autoComplete: 'tel',
+						placeholder: '+1 555 123 4567',
+					}}
+					errors={fields.phoneNumber.errors}
+				/>
+				<ErrorList id={form.errorId} errors={form.errors} />
+				<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+					<ButtonLink variant="secondary" to="..">
+						Cancel
+					</ButtonLink>
+					<StatusButton
+						variant="brand"
+						status={isPending ? 'pending' : (form.status ?? 'idle')}
+					>
+						Send Confirmation
+					</StatusButton>
+				</div>
+			</Form>
+		</SettingsCard>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/index.tsx b/app/routes/_app+/settings.profile+/index.tsx
index 2bb93c3f..47943ad1 100644
--- a/app/routes/_app+/settings.profile+/index.tsx
+++ b/app/routes/_app+/settings.profile+/index.tsx
@@ -13,7 +13,7 @@ import {
 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 { Icon, type IconName } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -96,90 +96,116 @@ export async function action({ request }: ActionFunctionArgs) {
 export default function EditUserProfile() {
 	const data = useLoaderData<typeof loader>()
 
+	const settingsLinks: Array<{
+		to: string
+		icon: IconName
+		title: string
+		description: string
+		reloadDocument?: boolean
+		download?: string
+	}> = [
+		{
+			to: 'subscription',
+			icon: 'banknotes-outline',
+			title: 'Subscription',
+			description: 'Choose a plan, update billing, or cancel.',
+		},
+		{
+			to: 'password',
+			icon: 'password',
+			title: 'Change Password',
+			description: 'Pick a new password for your account.',
+		},
+		{
+			to: 'two-factor',
+			icon: data.isTwoFactorEnabled ? 'lock-closed' : 'lock-open-1',
+			title: data.isTwoFactorEnabled ? '2FA is enabled' : 'Enable 2FA',
+			description: data.isTwoFactorEnabled
+				? 'Manage or disable two-factor authentication.'
+				: 'Add an extra layer of security to your login.',
+		},
+		{
+			to: '/resources/download-user-data',
+			icon: 'download',
+			title: 'Download Your Data',
+			description: 'Export everything we store about you as JSON.',
+			reloadDocument: true,
+			download: 'my-gratitext-data.json',
+		},
+	]
+
 	return (
-		<div className="mx-auto flex max-w-3xl flex-col gap-10 pb-16">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-foreground mt-3 text-4xl font-bold">
-					Hi {data.user.name ?? data.user.username}!
+		<div className="flex flex-col gap-8">
+			<div>
+				<h1 className="text-foreground font-serif text-3xl font-semibold sm:text-4xl">
+					Account settings
 				</h1>
+				<p className="text-muted-foreground mt-1 text-sm sm:text-base">
+					Signed in as{' '}
+					<span className="text-foreground font-semibold">
+						@{data.user.username}
+					</span>
+				</p>
 			</div>
-			<div className="border-border bg-card rounded-[32px] border p-8 shadow-sm">
+			<section
+				aria-labelledby="profile-heading"
+				className="border-border bg-card rounded-[32px] border p-6 shadow-sm sm:p-8"
+			>
 				<UpdateProfile />
-			</div>
-			<div className="border-border bg-card rounded-[32px] border p-6 shadow-sm">
+			</section>
+			<section
+				aria-labelledby="more-settings-heading"
+				className="border-border bg-card rounded-[32px] border px-6 py-2 shadow-sm sm:px-8"
+			>
+				<h2 id="more-settings-heading" className="sr-only">
+					More settings
+				</h2>
 				<ul className="divide-border divide-y">
-					<li>
-						<Link
-							to="subscription"
-							className="flex items-center justify-between gap-4 py-4"
-						>
-							<span className="text-foreground flex items-center gap-3 text-sm font-semibold">
-								<span className="bg-muted text-muted-foreground rounded-xl p-2">
-									<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="text-foreground flex items-center gap-3 text-sm font-semibold">
-								<span className="bg-muted text-muted-foreground rounded-xl p-2">
-									<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="text-foreground flex items-center gap-3 text-sm font-semibold">
-								<span className="bg-muted text-muted-foreground rounded-xl p-2">
-									<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="text-foreground flex items-center gap-3 text-sm font-semibold">
-								<span className="bg-muted text-muted-foreground rounded-xl p-2">
-									<Icon
-										name={
-											data.isTwoFactorEnabled ? 'lock-closed' : 'lock-open-1'
-										}
-										size="sm"
-									/>
+					{settingsLinks.map((item) => (
+						<li key={item.to}>
+							<Link
+								to={item.to}
+								reloadDocument={item.reloadDocument}
+								download={item.download}
+								prefetch={item.reloadDocument ? 'none' : 'intent'}
+								className="group -mx-2 flex items-center justify-between gap-4 rounded-2xl px-2 py-4 transition-colors"
+							>
+								<span className="flex items-center gap-4">
+									<span className="bg-muted text-muted-foreground group-hover:bg-accent group-hover:text-accent-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-colors">
+										<Icon name={item.icon} size="sm" aria-hidden="true" />
+									</span>
+									<span>
+										<span className="text-foreground block text-sm font-semibold">
+											{item.title}
+										</span>
+										<span className="text-muted-foreground block text-sm">
+											{item.description}
+										</span>
+									</span>
 								</span>
-								{data.isTwoFactorEnabled ? '2FA is Enabled' : 'Enable 2FA'}
-							</span>
-							<Icon name="chevron-right" size="sm" />
-						</Link>
-					</li>
+								<Icon
+									name="chevron-right"
+									size="sm"
+									aria-hidden="true"
+									className="text-muted-foreground group-hover:text-foreground shrink-0 transition-colors"
+								/>
+							</Link>
+						</li>
+					))}
 				</ul>
-			</div>
-			<div className="flex flex-col items-center gap-4 text-center">
-				<SignOutOfSessions />
-				<DeleteData />
-			</div>
+			</section>
+			<section
+				aria-labelledby="danger-heading"
+				className="border-border rounded-[32px] border border-dashed p-6 sm:p-8"
+			>
+				<h2 id="danger-heading" className="text-foreground text-lg font-bold">
+					Sessions and account
+				</h2>
+				<div className="mt-4 flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center">
+					<SignOutOfSessions />
+					<DeleteData />
+				</div>
+			</section>
 		</div>
 	)
 }
@@ -246,15 +272,57 @@ function UpdateProfile() {
 		<fetcher.Form
 			method="POST"
 			{...getFormProps(form)}
-			className="flex flex-col gap-6"
+			className="flex flex-col gap-4"
 		>
-			<div className="flex flex-wrap items-center justify-between gap-3">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					Your Name
+			<div>
+				<h2 id="profile-heading" className="text-foreground text-lg font-bold">
+					Profile
+				</h2>
+				<p className="text-muted-foreground text-sm">
+					How you appear in GratiText.
 				</p>
+			</div>
+			<div className="grid gap-x-4 sm:grid-cols-2">
+				<Field
+					labelProps={{ htmlFor: fields.name.id, children: 'Your Name' }}
+					inputProps={{
+						...getInputProps(fields.name, { type: 'text' }),
+						autoComplete: 'name',
+					}}
+					errors={fields.name.errors}
+				/>
+				<Field
+					labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
+					inputProps={{
+						...getInputProps(fields.username, { type: 'text' }),
+						className: 'lowercase',
+						autoComplete: 'username',
+					}}
+					errors={fields.username.errors}
+				/>
+			</div>
+			<div className="border-border flex flex-col gap-3 rounded-2xl border p-4 sm:flex-row sm:items-center sm:justify-between">
+				<div className="flex items-center gap-3">
+					<span className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-xl">
+						<Icon name="phone" size="sm" aria-hidden="true" />
+					</span>
+					<div>
+						<p className="text-muted-foreground text-xs font-semibold tracking-[0.08em] uppercase">
+							Phone number
+						</p>
+						<p className="text-foreground text-sm font-medium">
+							{data.user.phoneNumber}
+						</p>
+					</div>
+				</div>
+				<ButtonLink variant="secondary" size="sm" to="change-number">
+					Edit Your Phone Number
+				</ButtonLink>
+			</div>
+			<ErrorList errors={form.errors} id={form.errorId} />
+			<div className="flex justify-end">
 				<StatusButton
 					type="submit"
-					size="sm"
 					name="intent"
 					value={profileUpdateActionIntent}
 					status={
@@ -265,36 +333,6 @@ function UpdateProfile() {
 					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-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					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="border-border bg-muted text-muted-foreground rounded-full border px-4 py-3 text-sm">
-					Country Code
-				</div>
-				<div className="border-border bg-muted text-foreground rounded-full border px-4 py-3 text-sm">
-					{data.user.phoneNumber}
-				</div>
-			</div>
-			<ErrorList errors={form.errors} id={form.errorId} />
 		</fetcher.Form>
 	)
 }
@@ -323,36 +361,36 @@ function SignOutOfSessions() {
 
 	const fetcher = useFetcher<typeof signOutOfSessionsAction>()
 	const otherSessionsCount = data.user._count.sessions - 1
+	if (!otherSessionsCount) {
+		return (
+			<p className="text-muted-foreground flex items-center gap-2 text-sm">
+				<Icon name="check" size="sm" aria-hidden="true" />
+				This is your only active session.
+			</p>
+		)
+	}
 	return (
-		<div>
-			{otherSessionsCount ? (
-				<fetcher.Form method="POST">
-					<StatusButton
-						{...dc.getButtonProps({
-							type: 'submit',
-							name: 'intent',
-							value: signOutOfSessionsActionIntent,
-						})}
-						variant={dc.doubleCheck ? 'destructive' : 'secondary'}
-						status={
-							fetcher.state !== 'idle'
-								? 'pending'
-								: (fetcher.data?.status ?? 'idle')
-						}
-					>
-						<Icon name="avatar">
-							{dc.doubleCheck
-								? `Are you sure?`
-								: `Sign out of ${otherSessionsCount} other sessions`}
-						</Icon>
-					</StatusButton>
-				</fetcher.Form>
-			) : (
-				<p className="text-muted-foreground text-sm">
-					This is your only session.
-				</p>
-			)}
-		</div>
+		<fetcher.Form method="POST">
+			<StatusButton
+				{...dc.getButtonProps({
+					type: 'submit',
+					name: 'intent',
+					value: signOutOfSessionsActionIntent,
+				})}
+				variant={dc.doubleCheck ? 'destructive' : 'secondary'}
+				status={
+					fetcher.state !== 'idle'
+						? 'pending'
+						: (fetcher.data?.status ?? 'idle')
+				}
+			>
+				<Icon name="exit">
+					{dc.doubleCheck
+						? `Are you sure?`
+						: `Sign out of ${otherSessionsCount} other ${otherSessionsCount === 1 ? 'session' : 'sessions'}`}
+				</Icon>
+			</StatusButton>
+		</fetcher.Form>
 	)
 }
 
@@ -379,10 +417,16 @@ function DeleteData() {
 				})}
 				variant={dc.doubleCheck ? 'destructive' : 'ghost'}
 				status={fetcher.state !== 'idle' ? 'pending' : 'idle'}
-				className="text-foreground text-sm font-semibold"
+				className={
+					dc.doubleCheck
+						? undefined
+						: 'text-foreground-destructive hover:bg-destructive/10'
+				}
 			>
 				<Icon name="trash">
-					{dc.doubleCheck ? `Are you sure?` : `Delete Account`}
+					{dc.doubleCheck
+						? `Are you sure? This cannot be undone`
+						: `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 b7902184..9bb07358 100644
--- a/app/routes/_app+/settings.profile+/password.tsx
+++ b/app/routes/_app+/settings.profile+/password.tsx
@@ -3,7 +3,6 @@ import { getZodConstraint, parseWithZod } from '@conform-to/zod/v4'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	Form,
-	Link,
 	data as json,
 	type ActionFunctionArgs,
 	type LoaderFunctionArgs,
@@ -11,7 +10,8 @@ import {
 } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
-import { Button } from '#app/components/ui/button.tsx'
+import { SettingsCard } from '#app/components/settings-card.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 {
@@ -26,7 +26,7 @@ import { PasswordSchema } from '#app/utils/user-validation.ts'
 import { type BreadcrumbHandle } from './_layout.tsx'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
-	breadcrumb: <Icon name="dots-horizontal">Password</Icon>,
+	breadcrumb: <Icon name="password">Password</Icon>,
 	getSitemapEntries: () => null,
 }
 
@@ -123,19 +123,12 @@ export default function ChangePasswordRoute() {
 	})
 
 	return (
-		<div className="container flex min-h-full items-center justify-center pt-16 pb-24">
-			<Form
-				method="POST"
-				{...getFormProps(form)}
-				className="border-border bg-card w-full max-w-lg rounded-[32px] border px-6 py-8 shadow-sm"
-			>
-				<h1 className="text-foreground text-2xl font-bold">
-					Change Your Password
-				</h1>
-				<p className="text-muted-foreground mt-2 text-sm">
-					Update your password to keep your account secure.
-				</p>
-				<div className="mt-6 space-y-6">
+		<SettingsCard
+			title="Change your password"
+			description="Choose something long and unique. You will stay signed in on this device."
+		>
+			<Form method="POST" {...getFormProps(form)}>
+				<div className="space-y-6">
 					<Field
 						labelProps={{ children: 'Current Password' }}
 						inputProps={{
@@ -163,20 +156,20 @@ export default function ChangePasswordRoute() {
 						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>
+					<div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+						<ButtonLink variant="secondary" to="..">
+							Cancel
+						</ButtonLink>
 						<StatusButton
 							type="submit"
 							status={isPending ? 'pending' : (form.status ?? 'idle')}
 							variant="brand"
 						>
-							Save
+							Save password
 						</StatusButton>
 					</div>
 				</div>
 			</Form>
-		</div>
+		</SettingsCard>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/subscription.tsx b/app/routes/_app+/settings.profile+/subscription.tsx
index 16da79ee..7c904e45 100644
--- a/app/routes/_app+/settings.profile+/subscription.tsx
+++ b/app/routes/_app+/settings.profile+/subscription.tsx
@@ -1,12 +1,16 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { data as json, Link, useLoaderData } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
-import { Button } from '#app/components/ui/button.js'
-import { Icon } from '#app/components/ui/icon.js'
-import { requireUserId } from '#app/utils/auth.server.js'
-import { getHints } from '#app/utils/client-hints.js'
-import { prisma } from '#app/utils/db.server.js'
-import { getCustomerProducts } from '#app/utils/stripe.server.js'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.tsx'
+import { Button } from '#app/components/ui/button.tsx'
+import { Icon } from '#app/components/ui/icon.tsx'
+import { requireUserId } from '#app/utils/auth.server.ts'
+import { getHints } from '#app/utils/client-hints.tsx'
+import { prisma } from '#app/utils/db.server.ts'
+import { cn } from '#app/utils/misc.tsx'
+import { getCustomerProducts } from '#app/utils/stripe.server.ts'
 import { type BreadcrumbHandle } from './_layout.tsx'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -37,92 +41,195 @@ export async function loader({ request }: { request: Request }) {
 	})
 }
 
+const plans = [
+	{
+		id: 'basic',
+		name: 'Basic',
+		price: '$4.99',
+		summary: 'One heartfelt note a day.',
+		features: [
+			'1 message per day',
+			'As many recipients as you like',
+			'Reminders when a queue runs empty',
+		],
+		priceClassName: 'text-price-basic',
+	},
+	{
+		id: 'premium',
+		name: 'Premium',
+		price: '$14.99',
+		summary: 'Room for the whole family and your closest friends.',
+		features: [
+			'Up to 10 messages per day',
+			'As many recipients as you like',
+			'Reminders when a queue runs empty',
+		],
+		priceClassName: 'text-price-premium',
+		highlighted: true,
+	},
+] as const
+
 export default function Subscribe() {
 	const data = useLoaderData<typeof loader>()
 	const { products, cancelAtDisplay } = data
-	const isBasic = products.includes('basic')
-	const isPremium = products.includes('premium')
 	const isSubscribed = products.length > 0
+	const currentPlan = products.includes('premium')
+		? 'premium'
+		: products.includes('basic')
+			? 'basic'
+			: null
+	const paymentUrls = {
+		basic: data.basicPaymentUrl,
+		premium: data.premiumPaymentUrl,
+	}
+
 	return (
-		<div className="container flex flex-col items-center justify-center pt-16 pb-20">
-			<div className="text-center">
-				<p className="text-muted-foreground text-xs font-semibold tracking-[0.3em] uppercase">
-					GratiText
-				</p>
-				<h1 className="text-foreground mt-3 text-3xl font-bold md:text-4xl">
-					Select Your Plan
+		<div className="flex flex-col gap-8">
+			<div>
+				<h1 className="text-foreground text-2xl font-bold">
+					{isSubscribed ? 'Your subscription' : 'Choose your plan'}
 				</h1>
-				<p className="text-body-sm text-muted-foreground mt-3">
-					Choose a plan that matches how often you want to send messages.
+				<p className="text-muted-foreground mt-2 text-sm">
+					{isSubscribed
+						? 'Billing, invoices, and cancellation are handled securely by Stripe.'
+						: 'Pick the plan that matches how often you want to send. Cancel anytime.'}
 				</p>
 			</div>
-			<div className="mt-10 grid w-full max-w-4xl gap-6 md:grid-cols-2">
-				<div className="border-border bg-card rounded-[28px] border p-6 shadow-sm">
-					<div className="flex items-center justify-between">
-						<div>
-							<h3 className="text-foreground text-xl font-bold">Basic</h3>
-							<p className="text-body-xs text-muted-foreground">
-								1 message per day
-							</p>
-						</div>
-						<p className="text-price-basic text-2xl font-bold">$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>
+
+			{cancelAtDisplay ? (
+				<div className="bg-banner-upgrade text-banner-upgrade-foreground flex items-start gap-3 rounded-2xl px-4 py-3 text-sm">
+					<Icon
+						name="exclamation-circle-outline"
+						size="sm"
+						className="mt-0.5 shrink-0"
+						aria-hidden="true"
+					/>
+					<p>
+						Your subscription is set to end on{' '}
+						<strong>{cancelAtDisplay}</strong>. Scheduled messages will stop
+						sending after that date.
+					</p>
 				</div>
-				<div className="border-border bg-card rounded-[28px] border p-6 shadow-sm">
-					<div className="flex items-center justify-between">
-						<div>
-							<h3 className="text-foreground text-xl font-bold">Premium</h3>
-							<p className="text-body-xs text-muted-foreground">
-								10 messages per day
-							</p>
+			) : null}
+
+			<div className="grid gap-4 md:grid-cols-2">
+				{plans.map((plan) => {
+					const isCurrent = currentPlan === plan.id
+					const highlighted = 'highlighted' in plan && plan.highlighted
+					return (
+						<div
+							key={plan.id}
+							className={cn(
+								'border-border bg-card relative flex flex-col rounded-[28px] border p-6 shadow-sm',
+								highlighted &&
+									!isSubscribed &&
+									'border-brand ring-brand/30 ring-2',
+								isCurrent && 'border-brand',
+							)}
+						>
+							{isCurrent ? (
+								<span className="bg-brand text-brand-foreground absolute -top-3 left-6 rounded-full px-3 py-1 text-xs font-semibold">
+									Current plan
+								</span>
+							) : highlighted && !isSubscribed ? (
+								<span className="bg-brand text-brand-foreground absolute -top-3 left-6 rounded-full px-3 py-1 text-xs font-semibold">
+									Most popular
+								</span>
+							) : null}
+							<div className="flex items-start justify-between gap-4">
+								<div>
+									<h2 className="text-foreground text-xl font-bold">
+										{plan.name}
+									</h2>
+									<p className="text-muted-foreground mt-1 text-sm">
+										{plan.summary}
+									</p>
+								</div>
+								<div className="text-right">
+									<p className={cn('text-2xl font-bold', plan.priceClassName)}>
+										{plan.price}
+									</p>
+									<p className="text-muted-foreground text-xs">per month</p>
+								</div>
+							</div>
+							<ul className="mt-5 flex flex-col gap-2 text-sm">
+								{plan.features.map((feature) => (
+									<li key={feature} className="flex items-start gap-2">
+										<Icon
+											name="check"
+											size="sm"
+											className="text-brand mt-0.5 shrink-0"
+											aria-hidden="true"
+										/>
+										<span className="text-foreground">{feature}</span>
+									</li>
+								))}
+							</ul>
+							<div className="mt-6 flex-1" />
+							{isSubscribed ? (
+								isCurrent ? (
+									<Button variant="secondary" asChild>
+										<Link to="/manage-subscription" reloadDocument>
+											Manage billing
+										</Link>
+									</Button>
+								) : (
+									<Button variant="secondary" asChild>
+										<Link to="/manage-subscription" reloadDocument>
+											Switch to {plan.name}
+										</Link>
+									</Button>
+								)
+							) : (
+								<Button variant={highlighted ? 'brand' : 'secondary'} asChild>
+									<a href={paymentUrls[plan.id]}>Choose {plan.name}</a>
+								</Button>
+							)}
 						</div>
-						<p className="text-price-premium text-2xl font-bold">$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-foreground-destructive mt-6 text-sm">
-					Your subscription will be cancelled at{' '}
-					<strong>{cancelAtDisplay}</strong>.
-				</p>
-			) : null}
-			{isSubscribed ? (
-				<Link
-					className="mt-4 text-sm font-semibold underline"
-					to="/manage-subscription"
-				>
-					Manage your subscription
-				</Link>
-			) : (
-				<Link className="mt-4 text-sm font-semibold underline" to="/recipients">
-					Skip for now
-				</Link>
-			)}
+
+			<p className="text-muted-foreground text-sm">
+				{isSubscribed ? (
+					<>
+						Need to change plans or cancel?{' '}
+						<Link
+							to="/manage-subscription"
+							reloadDocument
+							className="text-foreground font-semibold underline underline-offset-4"
+						>
+							Open the billing portal
+						</Link>
+						.
+					</>
+				) : (
+					<>
+						Not ready yet?{' '}
+						<Link
+							to="/recipients"
+							className="text-foreground font-semibold underline underline-offset-4"
+						>
+							Keep using your free trial
+						</Link>
+						.
+					</>
+				)}
+			</p>
 		</div>
 	)
 }
 
 export function ErrorBoundary() {
-	// POLISH: make the error message more helpful
-	return <GeneralErrorBoundary />
+	return (
+		<GeneralErrorBoundary
+			unexpectedErrorHandler={() => (
+				<ErrorMessage
+					eyebrow="Billing"
+					title="We could not load your subscription"
+					description="Stripe did not respond. Please try again in a moment, or contact support if this keeps happening."
+				/>
+			)}
+		/>
+	)
 }
diff --git a/app/routes/_app+/settings.profile+/two-factor.disable.tsx b/app/routes/_app+/settings.profile+/two-factor.disable.tsx
index 2cae18a9..13ffcec2 100644
--- a/app/routes/_app+/settings.profile+/two-factor.disable.tsx
+++ b/app/routes/_app+/settings.profile+/two-factor.disable.tsx
@@ -5,6 +5,8 @@ import {
 	type LoaderFunctionArgs,
 	useFetcher,
 } from 'react-router'
+import { SettingsCard } from '#app/components/settings-card.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 { requireRecentVerification } from '#app/routes/_app+/_auth+/verify.server.ts'
@@ -42,25 +44,30 @@ export default function TwoFactorDisableRoute() {
 	const dc = useDoubleCheck()
 
 	return (
-		<div className="mx-auto max-w-sm">
-			<disable2FAFetcher.Form method="POST">
-				<p>
-					Disabling two factor authentication is not recommended. However, if
-					you would like to do so, click here:
-				</p>
+		<SettingsCard
+			title="Disable two-factor authentication"
+			description="We do not recommend this. Without 2FA, anyone who learns your password can log in to your account."
+		>
+			<disable2FAFetcher.Form
+				method="POST"
+				className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-start"
+			>
+				<ButtonLink variant="secondary" to="..">
+					Keep 2FA on
+				</ButtonLink>
 				<StatusButton
 					variant="destructive"
-					status={disable2FAFetcher.state === 'loading' ? 'pending' : 'idle'}
+					status={disable2FAFetcher.state !== 'idle' ? 'pending' : 'idle'}
 					{...dc.getButtonProps({
-						className: 'mx-auto',
 						name: 'intent',
 						value: 'disable',
 						type: 'submit',
 					})}
 				>
+					<Icon name="lock-open-1" size="sm" aria-hidden="true" />
 					{dc.doubleCheck ? 'Are you sure?' : 'Disable 2FA'}
 				</StatusButton>
 			</disable2FAFetcher.Form>
-		</div>
+		</SettingsCard>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/two-factor.index.tsx b/app/routes/_app+/settings.profile+/two-factor.index.tsx
index 012e964b..ab61b2ef 100644
--- a/app/routes/_app+/settings.profile+/two-factor.index.tsx
+++ b/app/routes/_app+/settings.profile+/two-factor.index.tsx
@@ -1,6 +1,5 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
-	Link,
 	data as json,
 	redirect,
 	type ActionFunctionArgs,
@@ -8,6 +7,8 @@ import {
 	useFetcher,
 	useLoaderData,
 } from 'react-router'
+import { SettingsCard } from '#app/components/settings-card.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 } from '#app/utils/auth.server.ts'
@@ -52,47 +53,74 @@ export default function TwoFactorRoute() {
 	const enable2FAFetcher = useFetcher<typeof action>()
 
 	return (
-		<div className="flex flex-col gap-4">
+		<SettingsCard
+			title="Two-factor authentication"
+			description="Protect your account with a code from an authenticator app every time you log in."
+		>
 			{data.is2FAEnabled ? (
-				<>
-					<p className="text-lg">
-						<Icon name="check">
+				<div className="flex flex-col gap-5">
+					<div className="bg-brand-soft text-brand-soft-foreground flex items-start gap-3 rounded-2xl px-4 py-3 text-sm">
+						<Icon
+							name="check"
+							size="sm"
+							className="mt-0.5 shrink-0"
+							aria-hidden="true"
+						/>
+						<p className="font-medium">
 							You have enabled two-factor authentication.
-						</Icon>
+						</p>
+					</div>
+					<p className="text-muted-foreground text-sm">
+						Keep your authenticator app safe. If you lose access to it, you will
+						not be able to log in.
 					</p>
-					<Link to="disable">
-						<Icon name="lock-open-1">Disable 2FA</Icon>
-					</Link>
-				</>
+					<div>
+						<ButtonLink variant="secondary" to="disable">
+							<Icon name="lock-open-1" size="sm" aria-hidden="true" />
+							Disable 2FA
+						</ButtonLink>
+					</div>
+				</div>
 			) : (
-				<>
-					<p>
-						<Icon name="lock-open-1">
+				<div className="flex flex-col gap-5">
+					<div className="bg-muted text-muted-foreground flex items-start gap-3 rounded-2xl px-4 py-3 text-sm">
+						<Icon
+							name="lock-open-1"
+							size="sm"
+							className="mt-0.5 shrink-0"
+							aria-hidden="true"
+						/>
+						<p className="font-medium">
 							You have not enabled two-factor authentication yet.
-						</Icon>
-					</p>
-					<p className="text-sm">
-						Two factor authentication adds an extra layer of security to your
-						account. You will need to enter a code from an authenticator app
-						like{' '}
-						<a className="underline" href="https://1password.com/">
+						</p>
+					</div>
+					<p className="text-muted-foreground text-sm">
+						Two-factor authentication adds an extra layer of security. You will
+						need to enter a code from an authenticator app like{' '}
+						<a
+							className="text-foreground underline underline-offset-4"
+							href="https://1password.com/"
+							target="_blank"
+							rel="noreferrer"
+						>
 							1Password
 						</a>{' '}
-						to log in.
+						or Google Authenticator to log in.
 					</p>
 					<enable2FAFetcher.Form method="POST">
 						<StatusButton
 							type="submit"
 							name="intent"
 							value="enable"
-							status={enable2FAFetcher.state === 'loading' ? 'pending' : 'idle'}
-							className="mx-auto"
+							variant="brand"
+							status={enable2FAFetcher.state !== 'idle' ? 'pending' : 'idle'}
 						>
+							<Icon name="lock-closed" size="sm" aria-hidden="true" />
 							Enable 2FA
 						</StatusButton>
 					</enable2FAFetcher.Form>
-				</>
+				</div>
 			)}
-		</div>
+		</SettingsCard>
 	)
 }
diff --git a/app/routes/_app+/settings.profile+/two-factor.verify.tsx b/app/routes/_app+/settings.profile+/two-factor.verify.tsx
index 23d9a3d8..1639237f 100644
--- a/app/routes/_app+/settings.profile+/two-factor.verify.tsx
+++ b/app/routes/_app+/settings.profile+/two-factor.verify.tsx
@@ -14,6 +14,7 @@ import {
 } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, OTPField } from '#app/components/forms.tsx'
+import { SettingsCard } from '#app/components/settings-card.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { isCodeValid } from '#app/routes/_app+/_auth+/verify.server.ts'
@@ -148,32 +149,55 @@ export default function TwoFactorRoute() {
 	const lastSubmissionIntent = fields.intent.value
 
 	return (
-		<div>
-			<div className="flex flex-col items-center gap-4">
-				<img alt="qr code" src={data.qrCode} className="h-56 w-56" />
-				<p>Scan this QR code with your authenticator app.</p>
-				<p className="text-sm">
-					If you cannot scan the QR code, you can manually add this account to
-					your authenticator app using this code:
-				</p>
-				<div className="p-3">
-					<pre
-						className="text-sm break-all whitespace-pre-wrap"
-						aria-label="One-time Password URI"
-					>
-						{data.otpUri}
-					</pre>
-				</div>
-				<p className="text-sm">
-					Once you've added the account, enter the code from your authenticator
-					app below. Once you enable 2FA, you will need to enter a code from
-					your authenticator app every time you log in or perform important
-					actions. Do not lose access to your authenticator app, or you will
-					lose access to your account.
-				</p>
-				<div className="flex w-full max-w-xs flex-col justify-center gap-4">
-					<Form method="POST" {...getFormProps(form)} className="flex-1">
-						<div className="flex items-center justify-center">
+		<SettingsCard
+			title="Set up your authenticator app"
+			description="Follow these steps to finish enabling two-factor authentication."
+		>
+			<ol className="flex flex-col gap-8">
+				<li className="flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-6">
+					<StepNumber n={1} />
+					<div className="flex flex-1 flex-col gap-4">
+						<div>
+							<h2 className="text-foreground font-semibold">
+								Scan this QR code with your authenticator app
+							</h2>
+							<p className="text-muted-foreground mt-1 text-sm">
+								Any TOTP app works, such as 1Password, Google Authenticator, or
+								Authy.
+							</p>
+						</div>
+						<img
+							alt="QR code for your authenticator app"
+							src={data.qrCode}
+							className="border-border h-48 w-48 rounded-2xl border bg-white p-2"
+						/>
+						<div>
+							<p className="text-muted-foreground text-sm">
+								Can't scan it? Add the account manually with this setup key:
+							</p>
+							<pre
+								className="bg-muted text-muted-foreground mt-2 rounded-2xl px-4 py-3 font-mono text-xs break-all whitespace-pre-wrap"
+								aria-label="One-time Password URI"
+							>
+								{data.otpUri}
+							</pre>
+						</div>
+					</div>
+				</li>
+				<li className="flex flex-col gap-4 sm:flex-row sm:items-start sm:gap-6">
+					<StepNumber n={2} />
+					<div className="flex flex-1 flex-col gap-4">
+						<div>
+							<h2 className="text-foreground font-semibold">
+								Enter the 6-digit code from the app
+							</h2>
+							<p className="text-muted-foreground mt-1 text-sm">
+								After this, you will need a code from your authenticator app
+								every time you log in. Do not lose access to it, or you will
+								lose access to your account.
+							</p>
+						</div>
+						<Form method="POST" {...getFormProps(form)}>
 							<OTPField
 								type="digits"
 								labelProps={{
@@ -187,49 +211,55 @@ export default function TwoFactorRoute() {
 								}}
 								errors={fields.code.errors}
 							/>
-						</div>
-
-						<div className="min-h-[32px] px-4 pt-1 pb-3">
 							<ErrorList id={form.errorId} errors={form.errors} />
-						</div>
+							<div className="mt-4 flex flex-col-reverse gap-3 sm:flex-row sm:justify-start">
+								<StatusButton
+									variant="secondary"
+									status={
+										pendingIntent === 'cancel'
+											? 'pending'
+											: lastSubmissionIntent === 'cancel'
+												? (form.status ?? 'idle')
+												: 'idle'
+									}
+									type="submit"
+									name="intent"
+									value="cancel"
+									disabled={isPending}
+								>
+									Cancel
+								</StatusButton>
+								<StatusButton
+									variant="brand"
+									status={
+										pendingIntent === 'verify'
+											? 'pending'
+											: lastSubmissionIntent === 'verify'
+												? (form.status ?? 'idle')
+												: 'idle'
+									}
+									type="submit"
+									name="intent"
+									value="verify"
+								>
+									Submit
+								</StatusButton>
+							</div>
+						</Form>
+					</div>
+				</li>
+			</ol>
+		</SettingsCard>
+	)
+}
 
-						<div className="flex justify-between gap-4">
-							<StatusButton
-								className="w-full"
-								status={
-									pendingIntent === 'verify'
-										? 'pending'
-										: lastSubmissionIntent === 'verify'
-											? (form.status ?? 'idle')
-											: 'idle'
-								}
-								type="submit"
-								name="intent"
-								value="verify"
-							>
-								Submit
-							</StatusButton>
-							<StatusButton
-								className="w-full"
-								variant="secondary"
-								status={
-									pendingIntent === 'cancel'
-										? 'pending'
-										: lastSubmissionIntent === 'cancel'
-											? (form.status ?? 'idle')
-											: 'idle'
-								}
-								type="submit"
-								name="intent"
-								value="cancel"
-								disabled={isPending}
-							>
-								Cancel
-							</StatusButton>
-						</div>
-					</Form>
-				</div>
-			</div>
-		</div>
+function StepNumber({ n }: { n: number }) {
+	return (
+		<span
+			aria-hidden="true"
+			className="bg-brand text-brand-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold"
+		>
+			{n}
+		</span>
 	)
 }
diff --git a/app/routes/_app+/users+/$username.tsx b/app/routes/_app+/users+/$username.tsx
index 49bd8463..f95c4f42 100644
--- a/app/routes/_app+/users+/$username.tsx
+++ b/app/routes/_app+/users+/$username.tsx
@@ -4,7 +4,10 @@ import {
 	type LoaderFunctionArgs,
 	type MetaFunction,
 } from 'react-router'
-import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
+import {
+	ErrorMessage,
+	GeneralErrorBoundary,
+} from '#app/components/error-boundary.tsx'
 import UserProfile, {
 	type UserProfileLoaderData,
 } from '#app/components/user-profile.tsx'
@@ -55,7 +58,11 @@ export function ErrorBoundary() {
 		<GeneralErrorBoundary
 			statusHandlers={{
 				404: ({ params }) => (
-					<p>No user with the username "{params.username}" exists</p>
+					<ErrorMessage
+						eyebrow="Error 404"
+						title="We can't find that person"
+						description={`No user with the username "${params.username}" exists.`}
+					/>
 				),
 			}}
 		/>
diff --git a/app/routes/_app+/users+/index.tsx b/app/routes/_app+/users+/index.tsx
index 13f7bb39..467eaaf9 100644
--- a/app/routes/_app+/users+/index.tsx
+++ b/app/routes/_app+/users+/index.tsx
@@ -65,12 +65,14 @@ export default function UsersRoute() {
 	}
 
 	return (
-		<div className="container mt-36 mb-48 flex flex-col items-center justify-center gap-6">
-			<h1 className="text-h1">GratiText Users</h1>
+		<div className="container flex flex-col items-center gap-6 pt-10 pb-20">
+			<h1 className="text-foreground font-serif text-3xl font-semibold sm:text-4xl">
+				GratiText Users
+			</h1>
 			<div className="w-full max-w-[700px]">
 				<SearchBar status={data.status} autoFocus autoSubmit />
 			</div>
-			<main>
+			<main className="w-full">
 				{data.status === 'idle' ? (
 					data.users.length ? (
 						<ul
@@ -83,15 +85,15 @@ export default function UsersRoute() {
 								<li key={user.id}>
 									<Link
 										to={user.username}
-										className="bg-muted flex h-36 w-44 flex-col items-center justify-center rounded-lg px-5 py-3"
+										className="border-border bg-card hover:bg-muted flex h-32 w-44 flex-col items-center justify-center gap-1 rounded-[24px] border px-5 py-3 shadow-sm transition-colors"
 									>
 										{user.name ? (
-											<span className="text-body-md w-full overflow-hidden text-center text-ellipsis whitespace-nowrap">
+											<span className="text-foreground w-full overflow-hidden text-center font-semibold text-ellipsis whitespace-nowrap">
 												{user.name}
 											</span>
 										) : null}
-										<span className="text-body-sm text-muted-foreground w-full overflow-hidden text-center text-ellipsis">
-											{user.username}
+										<span className="text-muted-foreground w-full overflow-hidden text-center text-sm text-ellipsis">
+											@{user.username}
 										</span>
 									</Link>
 								</li>
diff --git a/app/routes/components.tsx b/app/routes/components.tsx
deleted file mode 100644
index 54916800..00000000
--- a/app/routes/components.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Components() {
-	return (
-		<div>
-			<h1>Unknown Route</h1>
-		</div>
-	)
-}
diff --git a/app/routes/resources+/theme-switch.tsx b/app/routes/resources+/theme-switch.tsx
index 52754137..5899e0c7 100644
--- a/app/routes/resources+/theme-switch.tsx
+++ b/app/routes/resources+/theme-switch.tsx
@@ -56,23 +56,14 @@ export function ThemeSwitch({
 	const mode = optimisticMode ?? userPreference ?? 'system'
 	const nextMode =
 		mode === 'system' ? 'light' : mode === 'light' ? 'dark' : 'system'
-	const modeLabel = {
-		light: (
-			<Icon name="sun">
-				<span className="sr-only">Light</span>
-			</Icon>
-		),
-		dark: (
-			<Icon name="moon">
-				<span className="sr-only">Dark</span>
-			</Icon>
-		),
-		system: (
-			<Icon name="laptop">
-				<span className="sr-only">System</span>
-			</Icon>
-		),
-	}
+	const modeMeta = {
+		light: { icon: 'sun', label: 'Light' },
+		dark: { icon: 'moon', label: 'Dark' },
+		system: { icon: 'laptop', label: 'System' },
+	} as const
+	const current = modeMeta[mode]
+	const next = modeMeta[nextMode]
+	const description = `Theme: ${current.label}. Switch to ${next.label.toLowerCase()} theme`
 
 	return (
 		<fetcher.Form
@@ -81,14 +72,14 @@ export function ThemeSwitch({
 			action="/resources/theme-switch"
 		>
 			<input type="hidden" name="theme" value={nextMode} />
-			<div className="flex gap-2">
-				<button
-					type="submit"
-					className="flex h-8 w-8 cursor-pointer items-center justify-center"
-				>
-					{modeLabel[mode]}
-				</button>
-			</div>
+			<button
+				type="submit"
+				title={description}
+				aria-label={description}
+				className="border-border bg-card text-foreground hover:bg-muted focus-visible:ring-ring inline-flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
+			>
+				<Icon name={current.icon} size="sm" aria-hidden="true" />
+			</button>
 		</fetcher.Form>
 	)
 }
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index b537ad77..a305da58 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -1,12 +1,11 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/lora';
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
-	/* --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%;
@@ -263,6 +262,11 @@
 }
 
 @theme {
+	--font-sans:
+		'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
+		Roboto, 'Helvetica Neue', Arial, sans-serif;
+	--font-serif:
+		'Lora Variable', ui-serif, Georgia, Cambria, 'Times New Roman', serif;
 	--text-mega: 5rem;
 	--text-mega--line-height: 5.25rem;
 	--text-mega--font-weight: 700;
@@ -322,7 +326,14 @@
 
 @utility container {
 	margin-inline: auto;
-	padding-inline: 2rem;
+	width: 100%;
+	padding-inline: 1.25rem;
+
+	@media (width >= 640px) {
+		& {
+			padding-inline: 2rem;
+		}
+	}
 
 	@media (width >= 1536px) {
 		& {
@@ -351,6 +362,27 @@
 		border-color: hsl(var(--border));
 	}
 
+	html {
+		scroll-padding-top: 6rem;
+		-webkit-font-smoothing: antialiased;
+		text-rendering: optimizeLegibility;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		html {
+			scroll-behavior: smooth;
+		}
+	}
+
+	/* Links and native controls that lack their own ring still get a visible focus indicator. */
+	a:focus-visible,
+	summary:focus-visible,
+	[tabindex]:focus-visible {
+		outline: 2px solid hsl(var(--ring));
+		outline-offset: 2px;
+		border-radius: 0.25rem;
+	}
+
 	@media (width <= 768px) {
 		input,
 		textarea,
diff --git a/bun.lock b/bun.lock
index e633b5c7..a9370932 100644
--- a/bun.lock
+++ b/bun.lock
@@ -12,6 +12,8 @@
         "@epic-web/invariant": "^1.0.0",
         "@epic-web/remember": "^1.1.0",
         "@epic-web/totp": "^4.0.1",
+        "@fontsource-variable/inter": "^5.3.0",
+        "@fontsource-variable/lora": "^5.3.0",
         "@nasa-gcn/remix-seo": "^2.0.1",
         "@oslojs/crypto": "^1.0.1",
         "@paralleldrive/cuid2": "^3.3.0",
@@ -300,6 +302,10 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@fontsource-variable/inter": ["@fontsource-variable/inter@5.3.0", "", {}, "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA=="],
+
+    "@fontsource-variable/lora": ["@fontsource-variable/lora@5.3.0", "", {}, "sha512-2ph8KiZ8Bn141hWuC3ErtpJ+Ui8p2MJQn8TJNRSRmLmnCIOCtHfiBM9R7WLRPeUG/q6hXyHOxWQ8DvRSX+ixvQ=="],
+
     "@hono/node-server": ["@hono/node-server@1.19.9", "", { "peerDependencies": { "hono": "^4" } }, "sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw=="],
 
     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
@@ -1990,8 +1996,6 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "tsx": ["tsx@4.21.0", "", { "dependencies": { "esbuild": "~0.27.0", "get-tsconfig": "^4.7.5" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "bin": { "tsx": "dist/cli.mjs" } }, "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw=="],
-
     "turbo-stream": ["turbo-stream@2.4.1", "", {}, "sha512-v8kOJXpG3WoTN/+at8vK7erSzo6nW6CIaeOvNOkHQVDajfz1ZVeSxCbc6tOH4hrGZW7VUCV0TOXd8CPzYnYkrw=="],
 
     "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
diff --git a/package.json b/package.json
index 7e6ea9ed..3db62633 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,8 @@
     "@epic-web/invariant": "^1.0.0",
     "@epic-web/remember": "^1.1.0",
     "@epic-web/totp": "^4.0.1",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/lora": "^5.3.0",
     "@nasa-gcn/remix-seo": "^2.0.1",
     "@oslojs/crypto": "^1.0.1",
     "@paralleldrive/cuid2": "^3.3.0",

From c4fe882cb7d5ff1e819c900d25d49c248ed3c771 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Sep 2026 07:14:15 +0000
Subject: [PATCH 2/5] Fix sticky header and menu races surfaced by e2e tests

- Drop global scroll-behavior: smooth; it made ScrollRestoration animate
  scroll-to-top after every navigation
- Make dropdown menus non-modal so Radix's scroll lock no longer breaks
  the sticky header, and remove the close animation so a quickly
  re-opened menu is not dismissed by the still-mounted closing layer
- Rename forgot-password heading to keep the e2e selector matching
- Update user-profile component tests for the redesigned profile card

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/ui/dropdown-menu.tsx          | 15 ++++++++++++---
 app/components/user-profile.test.browser.tsx | 10 ++++++----
 app/routes/_app+/_auth+/forgot-password.tsx  |  2 +-
 app/styles/tailwind.css                      | 10 ++++------
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index 23f4168b..26721497 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -4,7 +4,16 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 import { Icon } from './icon.tsx'
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+/*
+ * Non-modal by default: Radix's modal scroll lock sets `overflow: hidden` on
+ * <body>, which breaks the sticky app header while a menu is open.
+ */
+function DropdownMenu({
+	modal = false,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root modal={modal} {...props} />
+}
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
@@ -50,7 +59,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+			'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-2xl border p-1.5 shadow-lg',
 			className,
 		)}
 		{...props}
@@ -68,7 +77,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[10rem] overflow-hidden rounded-2xl border p-1.5 shadow-lg',
+				'bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[10rem] overflow-hidden rounded-2xl border p-1.5 shadow-lg',
 				className,
 			)}
 			{...props}
diff --git a/app/components/user-profile.test.browser.tsx b/app/components/user-profile.test.browser.tsx
index 68a4803b..815d1eb3 100644
--- a/app/components/user-profile.test.browser.tsx
+++ b/app/components/user-profile.test.browser.tsx
@@ -38,9 +38,11 @@ test('The user profile when not logged in as self', async () => {
 	await expect
 		.element(screen.getByRole('heading', { level: 1, name: user.name }))
 		.toBeVisible()
-	await expect
-		.element(screen.getByRole('link', { name: `${user.name}'s recipients` }))
-		.toBeVisible()
+	await expect.element(screen.getByText(`@${user.username}`)).toBeVisible()
+	await expect.element(screen.getByText(/joined jan 1, 2024/i)).toBeVisible()
+	// Other people's profiles do not expose account actions.
+	expect(screen.container.querySelector('a[href="/recipients"]')).toBeNull()
+	expect(screen.container.querySelector('button[type="submit"]')).toBeNull()
 })
 
 test('The user profile when logged in as self', async () => {
@@ -66,6 +68,6 @@ test('The user profile when logged in as self', async () => {
 		.element(screen.getByRole('link', { name: /my recipients/i }))
 		.toBeVisible()
 	await expect
-		.element(screen.getByRole('link', { name: /edit profile/i }))
+		.element(screen.getByRole('link', { name: /settings/i }))
 		.toBeVisible()
 })
diff --git a/app/routes/_app+/_auth+/forgot-password.tsx b/app/routes/_app+/_auth+/forgot-password.tsx
index 9e963f4c..98811ed3 100644
--- a/app/routes/_app+/_auth+/forgot-password.tsx
+++ b/app/routes/_app+/_auth+/forgot-password.tsx
@@ -140,7 +140,7 @@ export default function ForgotPasswordRoute() {
 
 	return (
 		<AuthPage
-			title="Forgot your password?"
+			title="Forgot password?"
 			description="No worries. Enter the phone number on your account and we'll text you a reset code."
 			footer={
 				<p>
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a305da58..9943413c 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -362,18 +362,16 @@
 		border-color: hsl(var(--border));
 	}
 
+	/*
+	 * No global `scroll-behavior: smooth`: it makes React Router's
+	 * ScrollRestoration animate scroll-to-top on every navigation.
+	 */
 	html {
 		scroll-padding-top: 6rem;
 		-webkit-font-smoothing: antialiased;
 		text-rendering: optimizeLegibility;
 	}
 
-	@media (prefers-reduced-motion: no-preference) {
-		html {
-			scroll-behavior: smooth;
-		}
-	}
-
 	/* Links and native controls that lack their own ring still get a visible focus indicator. */
 	a:focus-visible,
 	summary:focus-visible,

From d6575b1f38a23540064cadfced3a733682dab292 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Sep 2026 07:23:27 +0000
Subject: [PATCH 3/5] Polish hero, status buttons, and mobile message thread

- Show copy before the hero image on small screens and float the
  decorative badges outside the image instead of hiding them behind it
- Space icon and label inside StatusButton
- Default new recipients to the daily 9:00 AM preset
- Make message bubbles and timestamps fit narrow screens; stack the
  date filters below 420px

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/search-bar.tsx                 |  6 +++---
 app/components/ui/status-button.tsx           |  2 +-
 app/routes/_app+/_marketing+/index.tsx        | 13 ++++++-------
 .../_app+/recipients+/$recipientId.index.tsx  | 19 ++++++++++++-------
 app/routes/_app+/recipients+/__editor.tsx     |  5 +++--
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/components/search-bar.tsx b/app/components/search-bar.tsx
index da459d5f..7253d5b6 100644
--- a/app/components/search-bar.tsx
+++ b/app/components/search-bar.tsx
@@ -82,7 +82,7 @@ export function SearchBar({
 				</StatusButton>
 			</div>
 			{showDateFilter ? (
-				<div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-end">
+				<div className="grid w-full gap-2 min-[420px]:grid-cols-2 sm:flex sm:w-auto sm:items-end">
 					<div className="min-w-0 sm:w-[160px]">
 						<Label htmlFor={startDateId}>From</Label>
 						<Input
@@ -90,7 +90,7 @@ export function SearchBar({
 							name="startDate"
 							id={startDateId}
 							defaultValue={startDateValue}
-							className="mt-2 w-full"
+							className="mt-2 w-full min-w-0 px-3 text-sm"
 						/>
 					</div>
 					<div className="min-w-0 sm:w-[160px]">
@@ -100,7 +100,7 @@ export function SearchBar({
 							name="endDate"
 							id={endDateId}
 							defaultValue={endDateValue}
-							className="mt-2 w-full"
+							className="mt-2 w-full min-w-0 px-3 text-sm"
 						/>
 					</div>
 				</div>
diff --git a/app/components/ui/status-button.tsx b/app/components/ui/status-button.tsx
index 1adf1dff..15a62816 100644
--- a/app/components/ui/status-button.tsx
+++ b/app/components/ui/status-button.tsx
@@ -48,7 +48,7 @@ export const StatusButton = React.forwardRef<
 			className={cn('flex justify-center gap-4', className)}
 			{...props}
 		>
-			<div>{children}</div>
+			<div className="inline-flex items-center gap-2">{children}</div>
 			{message ? (
 				<TooltipProvider>
 					<Tooltip>
diff --git a/app/routes/_app+/_marketing+/index.tsx b/app/routes/_app+/_marketing+/index.tsx
index f462e33b..53e958e6 100644
--- a/app/routes/_app+/_marketing+/index.tsx
+++ b/app/routes/_app+/_marketing+/index.tsx
@@ -85,7 +85,7 @@ export default function Index() {
 	return (
 		<main className="bg-background pt-8 pb-20 md:pt-14">
 			<section className="container grid gap-10 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:gap-16">
-				<div className="order-2 space-y-6 text-center lg:order-1 lg:text-left">
+				<div className="space-y-6 text-center lg:text-left">
 					<p className="text-brand text-xs font-semibold tracking-[0.3em] uppercase">
 						Gratitude, delivered by text
 					</p>
@@ -124,24 +124,23 @@ export default function Index() {
 						</p>
 					)}
 				</div>
-				<div className="order-1 flex justify-center lg:order-2">
+				<div className="flex justify-center">
 					<div className="relative w-full max-w-xs sm:max-w-sm">
 						<div className="bg-hero-orb absolute top-1/2 left-1/2 h-[260px] w-[260px] -translate-x-1/2 -translate-y-1/2 rounded-full sm:h-[320px] sm:w-[320px]" />
 						<Icon
 							name="star"
 							size="lg"
 							aria-hidden="true"
-							className="text-hero-sparkle absolute top-2 left-2"
+							className="text-hero-sparkle absolute -top-4 -left-3 z-20"
 						/>
 						<Icon
 							name="star"
 							size="md"
 							aria-hidden="true"
-							className="text-hero-sparkle absolute top-16 left-12"
+							className="text-hero-sparkle absolute top-8 -left-8 z-20"
 						/>
-						<div className="bg-hero-sparkle absolute top-24 left-4 h-6 w-10 rounded-full" />
-						<div className="bg-hero-sparkle absolute bottom-6 left-6 h-12 w-12 rounded-[22px]" />
-						<div className="bg-brand text-brand-foreground absolute top-1/2 -right-2 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full shadow-lg">
+						<div className="bg-hero-sparkle absolute -bottom-4 -left-4 z-20 h-12 w-12 rounded-[22px] shadow-sm" />
+						<div className="bg-brand text-brand-foreground absolute top-1/2 -right-5 z-20 flex h-12 w-12 -translate-y-1/2 items-center justify-center rounded-full shadow-lg">
 							<Icon name="message" size="sm" aria-hidden="true" />
 						</div>
 						<img
diff --git a/app/routes/_app+/recipients+/$recipientId.index.tsx b/app/routes/_app+/recipients+/$recipientId.index.tsx
index 4d3d9fb8..2f5b4354 100644
--- a/app/routes/_app+/recipients+/$recipientId.index.tsx
+++ b/app/routes/_app+/recipients+/$recipientId.index.tsx
@@ -623,12 +623,12 @@ export default function RecipientRoute() {
 						<ul className="flex flex-col gap-4 sm:gap-5">
 							{pastMessagesForDisplay.map((m) => (
 								<li key={m.id} className="flex flex-col items-end gap-1">
-									<div className="bg-message-bubble text-message-bubble-foreground max-w-[75%] rounded-[24px] px-4 py-3 text-sm leading-relaxed shadow-sm sm:max-w-[65%] sm:px-5 sm:py-4">
+									<div className="bg-message-bubble text-message-bubble-foreground max-w-[92%] rounded-[24px] px-4 py-3 text-sm leading-relaxed shadow-sm sm:max-w-[70%] sm:px-5 sm:py-4">
 										<p className="whitespace-pre-wrap">{m.content}</p>
 									</div>
 									<time
 										dateTime={m.sentAtIso}
-										className="text-muted-foreground text-[0.7rem] font-semibold tracking-[0.2em] uppercase"
+										className="text-muted-foreground text-xs font-medium"
 									>
 										{m.sentAtDisplay}
 									</time>
@@ -796,12 +796,17 @@ function MessageForms({ message }: { message: FutureMessage }) {
 	return (
 		<li className="flex flex-col items-end gap-2">
 			<div
-				className={`text-message-card-foreground max-w-[75%] rounded-[24px] px-4 py-3 shadow-sm sm:max-w-[65%] sm:px-5 sm:py-4 ${cardTone}`}
+				className={`text-message-card-foreground max-w-[92%] rounded-[24px] px-4 py-3 shadow-sm sm:max-w-[70%] sm:px-5 sm:py-4 ${cardTone}`}
 			>
-				<div className="text-message-card-foreground flex items-start justify-between gap-4 text-[0.7rem] font-semibold tracking-[0.2em] uppercase">
-					<div className="flex items-center gap-2">
-						<Icon name="clock" size="sm" />
-						<span>{scheduleLabel}</span>
+				<div className="text-message-card-foreground flex items-start justify-between gap-3 text-xs font-semibold">
+					<div className="flex min-w-0 items-center gap-2 pt-1.5">
+						<Icon
+							name="clock"
+							size="sm"
+							className="shrink-0"
+							aria-hidden="true"
+						/>
+						<span className="opacity-90">{scheduleLabel}</span>
 					</div>
 					<div className="flex items-center gap-1">
 						{showSaveButton ? (
diff --git a/app/routes/_app+/recipients+/__editor.tsx b/app/routes/_app+/recipients+/__editor.tsx
index 52fb0090..b845be5f 100644
--- a/app/routes/_app+/recipients+/__editor.tsx
+++ b/app/routes/_app+/recipients+/__editor.tsx
@@ -116,7 +116,8 @@ export function RecipientEditor({
 			? 'America/New_York'
 			: supportedTimeZones[0]) ??
 		'UTC'
-	const [cronValue, setCronValue] = useState(recipient?.scheduleCron ?? '')
+	const defaultCron = recipient?.scheduleCron ?? schedulePresets[0]?.cron ?? ''
+	const [cronValue, setCronValue] = useState(defaultCron)
 	const [timeZoneValue, setTimeZoneValue] = useState(defaultTimeZone)
 	const cronInputRef = useRef<HTMLInputElement>(null)
 	const nextSendPreview = describeNextSend(cronValue, timeZoneValue)
@@ -137,7 +138,7 @@ export function RecipientEditor({
 					timeZone: recipient.timeZone,
 					disabled: recipient.disabled ? 'on' : undefined,
 				}
-			: { timeZone: defaultTimeZone },
+			: { timeZone: defaultTimeZone, scheduleCron: defaultCron },
 		shouldRevalidate: 'onBlur',
 	})
 

From 916f42336726c128cee99732d89d0a66283ba7cb Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Sep 2026 07:24:39 +0000
Subject: [PATCH 4/5] Center error boundary card on root-level routes

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/error-boundary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/error-boundary.tsx b/app/components/error-boundary.tsx
index c85e819e..43f60269 100644
--- a/app/components/error-boundary.tsx
+++ b/app/components/error-boundary.tsx
@@ -105,7 +105,7 @@ export function GeneralErrorBoundary({
 	}
 
 	return (
-		<div className="container flex flex-1 items-center justify-center py-16 md:py-24">
+		<div className="container flex min-h-[60vh] flex-1 items-center justify-center py-16 md:py-24">
 			<div className="border-border bg-card text-foreground w-full max-w-xl rounded-[32px] border px-6 py-10 text-center shadow-sm sm:px-10">
 				{isRouteErrorResponse(error)
 					? (statusHandlers?.[error.status] ?? defaultStatusHandler)({

From 637b587e636e28872126c48cdb452fd3a5a22170 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 13 Sep 2026 07:40:30 +0000
Subject: [PATCH 5/5] Address Bugbot review: trap focus in mobile menu and move
 legal links out of the consent label

Co-authored-by: Kent C. Dodds <me+github@kentcdodds.com>
---
 app/components/forms.tsx               | 31 ++++++++++---
 app/routes/_app+/_auth+/onboarding.tsx | 46 ++++++++++----------
 app/routes/_app+/_layout.tsx           | 60 ++++++++++++++++++++++++--
 3 files changed, 106 insertions(+), 31 deletions(-)

diff --git a/app/components/forms.tsx b/app/components/forms.tsx
index 9663bf15..f9995f03 100644
--- a/app/components/forms.tsx
+++ b/app/components/forms.tsx
@@ -203,6 +203,7 @@ export function TextareaField({
 export function CheckboxField({
 	labelProps,
 	buttonProps,
+	description,
 	errors,
 	className,
 }: {
@@ -212,6 +213,11 @@ export function CheckboxField({
 		form: string
 		value?: string
 	}
+	/**
+	 * Rendered next to the label but outside of it, so it is the right place
+	 * for links and other interactive content that must not toggle the box.
+	 */
+	description?: React.ReactNode
 	errors?: ListOfErrors
 	className?: string
 }) {
@@ -226,6 +232,9 @@ export function CheckboxField({
 	})
 	const id = buttonProps.id ?? fallbackId
 	const errorId = errors?.length ? `${id}-error` : undefined
+	const descriptionId = description ? `${id}-description` : undefined
+	const describedBy =
+		[descriptionId, errorId].filter(Boolean).join(' ') || undefined
 
 	return (
 		<div className={className}>
@@ -234,7 +243,7 @@ export function CheckboxField({
 					{...checkboxProps}
 					id={id}
 					aria-invalid={errorId ? true : undefined}
-					aria-describedby={errorId}
+					aria-describedby={describedBy}
 					checked={input.value === checkedValue}
 					onCheckedChange={(state) => {
 						input.change(state.valueOf() ? checkedValue : '')
@@ -251,11 +260,21 @@ export function CheckboxField({
 					type="button"
 					className="mt-0.5"
 				/>
-				<label
-					htmlFor={id}
-					{...labelProps}
-					className="text-foreground cursor-pointer text-sm leading-snug"
-				/>
+				<div className="grid gap-1">
+					<label
+						htmlFor={id}
+						{...labelProps}
+						className="text-foreground cursor-pointer text-sm leading-snug"
+					/>
+					{description ? (
+						<div
+							id={descriptionId}
+							className="text-muted-foreground text-sm leading-snug"
+						>
+							{description}
+						</div>
+					) : null}
+				</div>
 			</div>
 			{errorId ? (
 				<div className="pt-2 pl-8">
diff --git a/app/routes/_app+/_auth+/onboarding.tsx b/app/routes/_app+/_auth+/onboarding.tsx
index 33d5cd8b..3398dbed 100644
--- a/app/routes/_app+/_auth+/onboarding.tsx
+++ b/app/routes/_app+/_auth+/onboarding.tsx
@@ -190,29 +190,31 @@ export default function SignupRoute() {
 				<CheckboxField
 					labelProps={{
 						htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
-						children: (
-							<>
-								I agree to the{' '}
-								<Link
-									to="/tos"
-									target="_blank"
-									rel="noreferrer"
-									className="font-semibold underline underline-offset-4"
-								>
-									Terms of Service
-								</Link>{' '}
-								and{' '}
-								<Link
-									to="/privacy"
-									target="_blank"
-									rel="noreferrer"
-									className="font-semibold underline underline-offset-4"
-								>
-									Privacy Policy
-								</Link>
-							</>
-						),
+						children: 'I agree to the Terms of Service and Privacy Policy',
 					}}
+					description={
+						<>
+							Read the{' '}
+							<Link
+								to="/tos"
+								target="_blank"
+								rel="noreferrer"
+								className="text-foreground font-semibold underline underline-offset-4"
+							>
+								Terms of Service
+							</Link>{' '}
+							and{' '}
+							<Link
+								to="/privacy"
+								target="_blank"
+								rel="noreferrer"
+								className="text-foreground font-semibold underline underline-offset-4"
+							>
+								Privacy Policy
+							</Link>
+							.
+						</>
+					}
 					buttonProps={getInputProps(
 						fields.agreeToTermsOfServiceAndPrivacyPolicy,
 						{ type: 'checkbox' },
diff --git a/app/routes/_app+/_layout.tsx b/app/routes/_app+/_layout.tsx
index 7f21ca77..c0420c5f 100644
--- a/app/routes/_app+/_layout.tsx
+++ b/app/routes/_app+/_layout.tsx
@@ -35,6 +35,15 @@ import { useOptionalUser, useUser } from '#app/utils/user.ts'
 const siteDescription =
 	'GratiText helps you send thoughtful, personal gratitude texts to the people you love on a schedule you choose.'
 
+const focusableSelector = [
+	'a[href]',
+	'button:not([disabled])',
+	'input:not([disabled]):not([type="hidden"])',
+	'select:not([disabled])',
+	'textarea:not([disabled])',
+	'[tabindex]:not([tabindex="-1"])',
+].join(',')
+
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
 	return [
 		{ title: data ? 'GratiText' : 'Error | GratiText' },
@@ -351,19 +360,61 @@ function MobileMenu() {
 		theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'
 	const themeIcon = theme === 'dark' ? 'sun' : 'moon'
 	const close = () => setOpen(false)
+	const triggerRef = useRef<HTMLButtonElement>(null)
+	const panelRef = useRef<HTMLDivElement>(null)
 
+	// The panel is announced as a modal dialog, so it has to behave like one:
+	// move focus into it on open, keep Tab cycling inside it, and hand focus
+	// back to the trigger when it closes.
 	useEffect(() => {
 		if (!open) return
+		const panel = panelRef.current
+		const trigger = triggerRef.current
+		if (!panel) return
+		const getFocusable = () =>
+			Array.from(panel.querySelectorAll<HTMLElement>(focusableSelector)).filter(
+				(element) => !element.hasAttribute('disabled'),
+			)
+
+		panel.focus({ preventScroll: true })
+
 		const onKeyDown = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') setOpen(false)
+			if (event.key === 'Escape') {
+				event.preventDefault()
+				setOpen(false)
+				return
+			}
+			if (event.key !== 'Tab') return
+			const focusable = getFocusable()
+			if (focusable.length === 0) {
+				event.preventDefault()
+				return
+			}
+			const first = focusable[0]!
+			const last = focusable[focusable.length - 1]!
+			const active = document.activeElement
+			const activeIndex = focusable.findIndex((element) => element === active)
+			if (event.shiftKey) {
+				if (activeIndex <= 0) {
+					event.preventDefault()
+					last.focus()
+				}
+			} else if (activeIndex === -1 || activeIndex === focusable.length - 1) {
+				event.preventDefault()
+				first.focus()
+			}
 		}
 		document.addEventListener('keydown', onKeyDown)
-		return () => document.removeEventListener('keydown', onKeyDown)
+		return () => {
+			document.removeEventListener('keydown', onKeyDown)
+			if (trigger?.isConnected) trigger.focus({ preventScroll: true })
+		}
 	}, [open])
 
 	return (
 		<>
 			<Button
+				ref={triggerRef}
 				type="button"
 				variant="ghost"
 				size="icon"
@@ -378,16 +429,19 @@ function MobileMenu() {
 				<div className="fixed inset-0 z-50 flex justify-center">
 					<button
 						type="button"
+						tabIndex={-1}
 						className="bg-overlay/40 absolute inset-0 h-full w-full"
 						onClick={close}
 						aria-label="Close menu"
 					/>
 					<div
+						ref={panelRef}
 						id="mobile-menu-panel"
 						role="dialog"
 						aria-modal="true"
 						aria-label="Menu"
-						className="bg-card border-border relative mx-4 mt-3 h-fit w-full max-w-[420px] rounded-[28px] border px-5 pt-4 pb-5 shadow-2xl"
+						tabIndex={-1}
+						className="bg-card border-border relative mx-4 mt-3 h-fit w-full max-w-[420px] rounded-[28px] border px-5 pt-4 pb-5 shadow-2xl outline-none"
 					>
 						<div className="flex items-center justify-between">
 							<Logo onClick={close} />