diff --git a/app/root.tsx b/app/root.tsx
index 2be10b0ec..22103e59c 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,10 +1,6 @@
 import { useRef } from 'react'
 import {
 	data,
-	type LoaderFunctionArgs,
-	type HeadersFunction,
-	type LinksFunction,
-	type MetaFunction,
 	Form,
 	Link,
 	Links,
@@ -17,6 +13,7 @@ import {
 	useSubmit,
 } from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
+import { type Route } from './+types/root.ts'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
@@ -51,7 +48,7 @@ import { makeTimings, time } from './utils/timing.server.ts'
 import { getToast } from './utils/toast.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
 
-export const links: LinksFunction = () => {
+export const links: Route.LinksFunction = () => {
 	return [
 		// Preload svg sprite as a resource to avoid render blocking
 		{ rel: 'preload', href: iconsHref, as: 'image' },
@@ -71,14 +68,14 @@ export const links: LinksFunction = () => {
 	].filter(Boolean)
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: Route.MetaFunction = ({ data }) => {
 	return [
 		{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
 		{ name: 'description', content: `Your own captain's log` },
 	]
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const timings = makeTimings('root loader')
 	const userId = await time(() => getUserId(request), {
 		timings,
@@ -142,7 +139,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	)
 }
 
-export const headers: HeadersFunction = ({ loaderHeaders }) => {
+export const headers: Route.HeadersFunction = ({ loaderHeaders }) => {
 	const headers = {
 		'Server-Timing': loaderHeaders.get('Server-Timing') ?? '',
 	}
diff --git a/app/routes/_auth+/auth.$provider.callback.ts b/app/routes/_auth+/auth.$provider.callback.ts
index f7f141084..bbbe5643d 100644
--- a/app/routes/_auth+/auth.$provider.callback.ts
+++ b/app/routes/_auth+/auth.$provider.callback.ts
@@ -1,4 +1,4 @@
-import { redirect, type LoaderFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import {
 	authenticator,
 	getSessionExpirationDate,
@@ -21,13 +21,14 @@ import {
 	redirectWithToast,
 } from '#app/utils/toast.server.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/auth.$provider.callback.ts'
 import { handleNewSession } from './login.server.ts'
 import { onboardingEmailSessionKey } from './onboarding.tsx'
 import { prefilledProfileKey, providerIdKey } from './onboarding_.$provider.tsx'
 
 const destroyRedirectTo = { 'set-cookie': destroyRedirectToHeader }
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	// this loader performs mutations, so we need to make sure we're on the
 	// primary instance to avoid writing to a read-only replica
 	await ensurePrimary()
diff --git a/app/routes/_auth+/auth_.$provider.ts b/app/routes/_auth+/auth_.$provider.ts
index ca80277a7..b604005e6 100644
--- a/app/routes/_auth+/auth_.$provider.ts
+++ b/app/routes/_auth+/auth_.$provider.ts
@@ -1,15 +1,16 @@
-import { redirect, type ActionFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { authenticator } from '#app/utils/auth.server.ts'
 import { handleMockAction } from '#app/utils/connections.server.ts'
 import { ProviderNameSchema } from '#app/utils/connections.tsx'
 import { getReferrerRoute } from '#app/utils/misc.tsx'
 import { getRedirectCookieHeader } from '#app/utils/redirect-cookie.server.ts'
+import { type Route } from './+types/auth_.$provider.ts'
 
 export async function loader() {
 	return redirect('/login')
 }
 
-export async function action({ request, params }: ActionFunctionArgs) {
+export async function action({ request, params }: Route.ActionArgs) {
 	const providerName = ProviderNameSchema.parse(params.provider)
 
 	try {
diff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
index 5962bdb56..37fd2fd9f 100644
--- a/app/routes/_auth+/forgot-password.tsx
+++ b/app/routes/_auth+/forgot-password.tsx
@@ -2,14 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
-import {
-	data,
-	redirect,
-	type ActionFunctionArgs,
-	type MetaFunction,
-	Link,
-	useFetcher,
-} from 'react-router'
+import { data, redirect, Link, useFetcher } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -19,6 +12,7 @@ import { prisma } from '#app/utils/db.server.ts'
 import { sendEmail } from '#app/utils/email.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { EmailSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/forgot-password.ts'
 import { prepareVerification } from './verify.server.ts'
 
 export const handle: SEOHandle = {
@@ -29,7 +23,7 @@ const ForgotPasswordSchema = z.object({
 	usernameOrEmail: z.union([EmailSchema, UsernameSchema]),
 })
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
 	const submission = await parseWithZod(formData, {
@@ -119,7 +113,7 @@ function ForgotPasswordEmail({
 	)
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Password Recovery for Epic Notes' }]
 }
 
diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index 11b42f9e4..1b0238eeb 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -1,16 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	type MetaFunction,
-	Form,
-	Link,
-	useActionData,
-	useSearchParams,
-} from 'react-router'
+import { data, Form, Link, useSearchParams } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -25,6 +16,7 @@ import {
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/login.ts'
 import { handleNewSession } from './login.server.ts'
 
 export const handle: SEOHandle = {
@@ -38,12 +30,12 @@ const LoginFormSchema = z.object({
 	remember: z.boolean().optional(),
 })
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	await requireAnonymous(request)
 	return {}
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	await requireAnonymous(request)
 	const formData = await request.formData()
 	checkHoneypot(formData)
@@ -83,8 +75,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 }
 
-export default function LoginPage() {
-	const actionData = useActionData<typeof action>()
+export default function LoginPage({ actionData }: Route.ComponentProps) {
 	const isPending = useIsPending()
 	const [searchParams] = useSearchParams()
 	const redirectTo = searchParams.get('redirectTo')
@@ -204,7 +195,7 @@ export default function LoginPage() {
 	)
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Login to Epic Notes' }]
 }
 
diff --git a/app/routes/_auth+/logout.tsx b/app/routes/_auth+/logout.tsx
index 4793d9d3c..e99e67085 100644
--- a/app/routes/_auth+/logout.tsx
+++ b/app/routes/_auth+/logout.tsx
@@ -1,10 +1,11 @@
-import { redirect, type ActionFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { logout } from '#app/utils/auth.server.ts'
+import { type Route } from './+types/logout.ts'
 
 export async function loader() {
 	return redirect('/')
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	return logout({ request })
 }
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
index a23667506..4d955a3dd 100644
--- a/app/routes/_auth+/onboarding.tsx
+++ b/app/routes/_auth+/onboarding.tsx
@@ -1,16 +1,6 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	type MetaFunction,
-	Form,
-	useActionData,
-	useLoaderData,
-	useSearchParams,
-} from 'react-router'
+import { data, redirect, Form, useSearchParams } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
@@ -29,6 +19,7 @@ import {
 	UsernameSchema,
 } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/onboarding.ts'
 
 export const onboardingEmailSessionKey = 'onboardingEmail'
 
@@ -57,12 +48,12 @@ async function requireOnboardingEmail(request: Request) {
 	return email
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const email = await requireOnboardingEmail(request)
 	return { email }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const email = await requireOnboardingEmail(request)
 	const formData = await request.formData()
 	checkHoneypot(formData)
@@ -123,13 +114,14 @@ export async function action({ request }: ActionFunctionArgs) {
 	)
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Setup Epic Notes Account' }]
 }
 
-export default function OnboardingRoute() {
-	const data = useLoaderData<typeof loader>()
-	const actionData = useActionData<typeof action>()
+export default function OnboardingRoute({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const isPending = useIsPending()
 	const [searchParams] = useSearchParams()
 	const redirectTo = searchParams.get('redirectTo')
@@ -149,7 +141,7 @@ export default function OnboardingRoute() {
 		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">
 			<div className="mx-auto w-full max-w-lg">
 				<div className="flex flex-col gap-3 text-center">
-					<h1 className="text-h1">Welcome aboard {data.email}!</h1>
+					<h1 className="text-h1">Welcome aboard {loaderData.email}!</h1>
 					<p className="text-body-md text-muted-foreground">
 						Please enter your details.
 					</p>
diff --git a/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx
index 7d68b7477..7d50398e5 100644
--- a/app/routes/_auth+/onboarding_.$provider.tsx
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -8,13 +8,8 @@ import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import {
 	redirect,
 	data,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	type MetaFunction,
 	type Params,
 	Form,
-	useActionData,
-	useLoaderData,
 	useSearchParams,
 } from 'react-router'
 import { safeRedirect } from 'remix-utils/safe-redirect'
@@ -36,6 +31,7 @@ import { authSessionStorage } from '#app/utils/session.server.ts'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/onboarding_.$provider.ts'
 import { onboardingEmailSessionKey } from './onboarding'
 
 export const providerIdKey = 'providerId'
@@ -80,7 +76,7 @@ async function requireData({
 	}
 }
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	const { email } = await requireData({ request, params })
 	const connectionSession = await connectionSessionStorage.getSession(
 		request.headers.get('cookie'),
@@ -104,7 +100,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 	}
 }
 
-export async function action({ request, params }: ActionFunctionArgs) {
+export async function action({ request, params }: Route.ActionArgs) {
 	const { email, providerId, providerName } = await requireData({
 		request,
 		params,
@@ -172,13 +168,14 @@ export async function action({ request, params }: ActionFunctionArgs) {
 	)
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Setup Epic Notes Account' }]
 }
 
-export default function OnboardingProviderRoute() {
-	const data = useLoaderData<typeof loader>()
-	const actionData = useActionData<typeof action>()
+export default function OnboardingProviderRoute({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const isPending = useIsPending()
 	const [searchParams] = useSearchParams()
 	const redirectTo = searchParams.get('redirectTo')
@@ -186,7 +183,7 @@ export default function OnboardingProviderRoute() {
 	const [form, fields] = useForm({
 		id: 'onboarding-provider-form',
 		constraint: getZodConstraint(SignupFormSchema),
-		lastResult: actionData?.result ?? data.submission,
+		lastResult: actionData?.result ?? loaderData.submission,
 		onValidate({ formData }) {
 			return parseWithZod(formData, { schema: SignupFormSchema })
 		},
@@ -197,7 +194,7 @@ export default function OnboardingProviderRoute() {
 		<div className="container flex min-h-full flex-col justify-center pb-32 pt-20">
 			<div className="mx-auto w-full max-w-lg">
 				<div className="flex flex-col gap-3 text-center">
-					<h1 className="text-h1">Welcome aboard {data.email}!</h1>
+					<h1 className="text-h1">Welcome aboard {loaderData.email}!</h1>
 					<p className="text-body-md text-muted-foreground">
 						Please enter your details.
 					</p>
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
index 095e18093..b8581a781 100644
--- a/app/routes/_auth+/reset-password.tsx
+++ b/app/routes/_auth+/reset-password.tsx
@@ -1,16 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	redirect,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	type MetaFunction,
-	Form,
-	useActionData,
-	useLoaderData,
-} from 'react-router'
+import { data, redirect, Form } from 'react-router'
 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'
@@ -18,6 +9,7 @@ import { requireAnonymous, resetUserPassword } from '#app/utils/auth.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/reset-password.ts'
 
 export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
@@ -41,12 +33,12 @@ async function requireResetPasswordUsername(request: Request) {
 	return resetPasswordUsername
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const resetPasswordUsername = await requireResetPasswordUsername(request)
 	return { resetPasswordUsername }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const resetPasswordUsername = await requireResetPasswordUsername(request)
 	const formData = await request.formData()
 	const submission = parseWithZod(formData, {
@@ -69,13 +61,14 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Reset Password | Epic Notes' }]
 }
 
-export default function ResetPasswordPage() {
-	const data = useLoaderData<typeof loader>()
-	const actionData = useActionData<typeof action>()
+export default function ResetPasswordPage({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const isPending = useIsPending()
 
 	const [form, fields] = useForm({
@@ -93,7 +86,8 @@ export default function ResetPasswordPage() {
 			<div className="text-center">
 				<h1 className="text-h1">Password Reset</h1>
 				<p className="mt-3 text-body-md text-muted-foreground">
-					Hi, {data.resetPasswordUsername}. No worries. It happens all the time.
+					Hi, {loaderData.resetPasswordUsername}. No worries. It happens all the
+					time.
 				</p>
 			</div>
 			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
diff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx
index 6c62d0995..fdb030f91 100644
--- a/app/routes/_auth+/signup.tsx
+++ b/app/routes/_auth+/signup.tsx
@@ -2,15 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as E from '@react-email/components'
-import {
-	data,
-	redirect,
-	type ActionFunctionArgs,
-	type MetaFunction,
-	Form,
-	useActionData,
-	useSearchParams,
-} from 'react-router'
+import { data, redirect, Form, useSearchParams } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -25,6 +17,7 @@ import { sendEmail } from '#app/utils/email.server.ts'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { EmailSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/signup.ts'
 import { prepareVerification } from './verify.server.ts'
 
 export const handle: SEOHandle = {
@@ -35,7 +28,7 @@ const SignupSchema = z.object({
 	email: EmailSchema,
 })
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 
 	checkHoneypot(formData)
@@ -118,12 +111,11 @@ export function SignupEmail({
 	)
 }
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
 	return [{ title: 'Sign Up | Epic Notes' }]
 }
 
-export default function SignupRoute() {
-	const actionData = useActionData<typeof action>()
+export default function SignupRoute({ actionData }: Route.ComponentProps) {
 	const isPending = useIsPending()
 	const [searchParams] = useSearchParams()
 	const redirectTo = searchParams.get('redirectTo')
diff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx
index 7f5ae031d..7c33868f2 100644
--- a/app/routes/_auth+/verify.tsx
+++ b/app/routes/_auth+/verify.tsx
@@ -1,12 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	type ActionFunctionArgs,
-	Form,
-	useActionData,
-	useSearchParams,
-} from 'react-router'
+import { Form, useSearchParams } from 'react-router'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -15,6 +10,7 @@ import { Spacer } from '#app/components/spacer.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
+import { type Route } from './+types/verify.ts'
 import { validateRequest } from './verify.server.ts'
 
 export const handle: SEOHandle = {
@@ -36,16 +32,15 @@ export const VerifySchema = z.object({
 	[redirectToQueryParam]: z.string().optional(),
 })
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
 	return validateRequest(request, formData)
 }
 
-export default function VerifyRoute() {
+export default function VerifyRoute({ actionData }: Route.ComponentProps) {
 	const [searchParams] = useSearchParams()
 	const isPending = useIsPending()
-	const actionData = useActionData<typeof action>()
 	const parseWithZoddType = VerificationTypeSchema.safeParse(
 		searchParams.get(typeQueryParam),
 	)
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
index c734213f2..c5cc90f45 100644
--- a/app/routes/_marketing+/index.tsx
+++ b/app/routes/_marketing+/index.tsx
@@ -1,4 +1,3 @@
-import { type MetaFunction } from 'react-router'
 import {
 	Tooltip,
 	TooltipContent,
@@ -6,9 +5,10 @@ import {
 	TooltipTrigger,
 } from '#app/components/ui/tooltip.tsx'
 import { cn } from '#app/utils/misc.tsx'
+import { type Route } from './+types/index.ts'
 import { logos } from './logos/logos.ts'
 
-export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]
+export const meta: Route.MetaFunction = () => [{ title: 'Epic Notes' }]
 
 // Tailwind Grid cell classes lookup
 const columnClasses: Record<(typeof logos)[number]['column'], string> = {
diff --git a/app/routes/_seo+/robots[.]txt.ts b/app/routes/_seo+/robots[.]txt.ts
index 4622d7bf6..314f8ff87 100644
--- a/app/routes/_seo+/robots[.]txt.ts
+++ b/app/routes/_seo+/robots[.]txt.ts
@@ -1,8 +1,8 @@
 import { generateRobotsTxt } from '@nasa-gcn/remix-seo'
-import { type LoaderFunctionArgs } from 'react-router'
 import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/robots[.]txt.ts'
 
-export function loader({ request }: LoaderFunctionArgs) {
+export function loader({ request }: Route.LoaderArgs) {
 	return generateRobotsTxt([
 		{ type: 'sitemap', value: `${getDomainUrl(request)}/sitemap.xml` },
 	])
diff --git a/app/routes/_seo+/sitemap[.]xml.ts b/app/routes/_seo+/sitemap[.]xml.ts
index 5f04d9b2a..04d37c31e 100644
--- a/app/routes/_seo+/sitemap[.]xml.ts
+++ b/app/routes/_seo+/sitemap[.]xml.ts
@@ -1,8 +1,9 @@
 import { generateSitemap } from '@nasa-gcn/remix-seo'
-import { type ServerBuild, type LoaderFunctionArgs } from 'react-router'
+import { type ServerBuild } from 'react-router'
 import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/sitemap[.]xml.ts'
 
-export async function loader({ request, context }: LoaderFunctionArgs) {
+export async function loader({ request, context }: Route.LoaderArgs) {
 	const serverBuild = (await context.serverBuild) as { build: ServerBuild }
 
 	// TODO: This is typeerror is coming up since of the remix-run/server-runtime package. We might need to remove/update that one.
diff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx
index 64e346e4a..8045a9cad 100644
--- a/app/routes/admin+/cache.tsx
+++ b/app/routes/admin+/cache.tsx
@@ -2,12 +2,9 @@ import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
 	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
 	Form,
 	Link,
 	useFetcher,
-	useLoaderData,
 	useSearchParams,
 	useSubmit,
 } from 'react-router'
@@ -28,12 +25,13 @@ import {
 } from '#app/utils/litefs.server.ts'
 import { useDebounce, useDoubleCheck } from '#app/utils/misc.tsx'
 import { requireUserWithRole } from '#app/utils/permissions.server.ts'
+import { type Route } from './+types/cache.ts'
 
 export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	await requireUserWithRole(request, 'admin')
 	const searchParams = new URL(request.url).searchParams
 	const query = searchParams.get('query')
@@ -58,7 +56,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { cacheKeys, instance, instances, currentInstanceInfo }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	await requireUserWithRole(request, 'admin')
 	const formData = await request.formData()
 	const key = formData.get('cacheKey')
@@ -87,13 +85,12 @@ export async function action({ request }: ActionFunctionArgs) {
 	return { success: true }
 }
 
-export default function CacheAdminRoute() {
-	const data = useLoaderData<typeof loader>()
+export default function CacheAdminRoute({ loaderData }: Route.ComponentProps) {
 	const [searchParams] = useSearchParams()
 	const submit = useSubmit()
 	const query = searchParams.get('query') ?? ''
 	const limit = searchParams.get('limit') ?? '100'
-	const instance = searchParams.get('instance') ?? data.instance
+	const instance = searchParams.get('instance') ?? loaderData.instance
 
 	const handleFormChange = useDebounce(async (form: HTMLFormElement) => {
 		await submit(form)
@@ -127,7 +124,8 @@ export default function CacheAdminRoute() {
 						/>
 						<div className="flex h-16 w-14 items-center text-lg font-medium text-muted-foreground">
 							<span title="Total results shown">
-								{data.cacheKeys.sqlite.length + data.cacheKeys.lru.length}
+								{loaderData.cacheKeys.sqlite.length +
+									loaderData.cacheKeys.lru.length}
 							</span>
 						</div>
 					</div>
@@ -148,15 +146,15 @@ export default function CacheAdminRoute() {
 						}}
 					/>
 					<select name="instance" defaultValue={instance}>
-						{Object.entries(data.instances).map(([inst, region]) => (
+						{Object.entries(loaderData.instances).map(([inst, region]) => (
 							<option key={inst} value={inst}>
 								{[
 									inst,
 									`(${region})`,
-									inst === data.currentInstanceInfo.currentInstance
+									inst === loaderData.currentInstanceInfo.currentInstance
 										? '(current)'
 										: '',
-									inst === data.currentInstanceInfo.primaryInstance
+									inst === loaderData.currentInstanceInfo.primaryInstance
 										? ' (primary)'
 										: '',
 								]
@@ -170,7 +168,7 @@ export default function CacheAdminRoute() {
 			<Spacer size="2xs" />
 			<div className="flex flex-col gap-4">
 				<h2 className="text-h2">LRU Cache:</h2>
-				{data.cacheKeys.lru.map((key) => (
+				{loaderData.cacheKeys.lru.map((key) => (
 					<CacheKeyRow
 						key={key}
 						cacheKey={key}
@@ -182,7 +180,7 @@ export default function CacheAdminRoute() {
 			<Spacer size="3xs" />
 			<div className="flex flex-col gap-4">
 				<h2 className="text-h2">SQLite Cache:</h2>
-				{data.cacheKeys.sqlite.map((key) => (
+				{loaderData.cacheKeys.sqlite.map((key) => (
 					<CacheKeyRow
 						key={key}
 						cacheKey={key}
diff --git a/app/routes/admin+/cache_.lru.$cacheKey.ts b/app/routes/admin+/cache_.lru.$cacheKey.ts
index 792c92996..7534705a1 100644
--- a/app/routes/admin+/cache_.lru.$cacheKey.ts
+++ b/app/routes/admin+/cache_.lru.$cacheKey.ts
@@ -1,5 +1,4 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs } from 'react-router'
 import { lruCache } from '#app/utils/cache.server.ts'
 import {
 	getAllInstances,
@@ -7,8 +6,9 @@ import {
 	ensureInstance,
 } from '#app/utils/litefs.server.ts'
 import { requireUserWithRole } from '#app/utils/permissions.server.ts'
+import { type Route } from './+types/cache_.lru.$cacheKey.ts'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	await requireUserWithRole(request, 'admin')
 	const searchParams = new URL(request.url).searchParams
 	const currentInstanceInfo = await getInstanceInfo()
diff --git a/app/routes/admin+/cache_.sqlite.$cacheKey.ts b/app/routes/admin+/cache_.sqlite.$cacheKey.ts
index cebafa92e..9aeb3e047 100644
--- a/app/routes/admin+/cache_.sqlite.$cacheKey.ts
+++ b/app/routes/admin+/cache_.sqlite.$cacheKey.ts
@@ -1,5 +1,4 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs } from 'react-router'
 import { cache } from '#app/utils/cache.server.ts'
 import {
 	getAllInstances,
@@ -7,8 +6,9 @@ import {
 	ensureInstance,
 } from '#app/utils/litefs.server.ts'
 import { requireUserWithRole } from '#app/utils/permissions.server.ts'
+import { type Route } from './+types/cache_.sqlite.$cacheKey.ts'
 
-export async function loader({ request, params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: Route.LoaderArgs) {
 	await requireUserWithRole(request, 'admin')
 	const searchParams = new URL(request.url).searchParams
 	const currentInstanceInfo = await getInstanceInfo()
diff --git a/app/routes/admin+/cache_.sqlite.server.ts b/app/routes/admin+/cache_.sqlite.server.ts
index d127bac86..04746fc15 100644
--- a/app/routes/admin+/cache_.sqlite.server.ts
+++ b/app/routes/admin+/cache_.sqlite.server.ts
@@ -1,10 +1,11 @@
-import { redirect, type ActionFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { z } from 'zod'
 import { cache } from '#app/utils/cache.server.ts'
 import {
 	getInstanceInfo,
 	getInternalInstanceDomain,
 } from '#app/utils/litefs.server'
+import { type Route } from './+types/cache_.sqlite.ts'
 
 export async function updatePrimaryCacheValue({
 	key,
@@ -31,7 +32,7 @@ export async function updatePrimaryCacheValue({
 	})
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const { currentIsPrimary, primaryInstance } = await getInstanceInfo()
 	if (!currentIsPrimary) {
 		throw new Error(
diff --git a/app/routes/me.tsx b/app/routes/me.tsx
index affe9e7fd..f7188b56d 100644
--- a/app/routes/me.tsx
+++ b/app/routes/me.tsx
@@ -1,8 +1,9 @@
-import { redirect, type LoaderFunctionArgs } from 'react-router'
+import { redirect } from 'react-router'
 import { requireUserId, logout } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/me.ts'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUnique({ where: { id: userId } })
 	if (!user) {
diff --git a/app/routes/resources+/download-user-data.tsx b/app/routes/resources+/download-user-data.tsx
index f907fd65a..6544d28ff 100644
--- a/app/routes/resources+/download-user-data.tsx
+++ b/app/routes/resources+/download-user-data.tsx
@@ -2,8 +2,9 @@ import { type LoaderFunctionArgs } from 'react-router'
 import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { getDomainUrl } from '#app/utils/misc.tsx'
+import { type Route } from './+types/download-user-data.ts'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUniqueOrThrow({
 		where: { id: userId },
diff --git a/app/routes/resources+/healthcheck.tsx b/app/routes/resources+/healthcheck.tsx
index 4e587d602..e38230ec6 100644
--- a/app/routes/resources+/healthcheck.tsx
+++ b/app/routes/resources+/healthcheck.tsx
@@ -1,8 +1,8 @@
 // learn more: https://fly.io/docs/reference/configuration/#services-http_checks
-import { type LoaderFunctionArgs } from 'react-router'
 import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/healthcheck.ts'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const host =
 		request.headers.get('X-Forwarded-Host') ?? request.headers.get('host')
 
diff --git a/app/routes/resources+/note-images.$imageId.tsx b/app/routes/resources+/note-images.$imageId.tsx
index ab92cc436..52c32fb18 100644
--- a/app/routes/resources+/note-images.$imageId.tsx
+++ b/app/routes/resources+/note-images.$imageId.tsx
@@ -1,8 +1,8 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs } from 'react-router'
 import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/note-images.$imageId.ts'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
 	const image = await prisma.noteImage.findUnique({
 		where: { id: params.imageId },
diff --git a/app/routes/resources+/theme-switch.tsx b/app/routes/resources+/theme-switch.tsx
index 37337a91e..bc8d0dfc2 100644
--- a/app/routes/resources+/theme-switch.tsx
+++ b/app/routes/resources+/theme-switch.tsx
@@ -1,13 +1,7 @@
 import { useForm, getFormProps } from '@conform-to/react'
 import { parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
-import {
-	data,
-	type ActionFunctionArgs,
-	redirect,
-	useFetcher,
-	useFetchers,
-} from 'react-router'
+import { data, redirect, useFetcher, useFetchers } from 'react-router'
 import { ServerOnly } from 'remix-utils/server-only'
 import { z } from 'zod'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -17,14 +11,14 @@ import {
 	useRequestInfo,
 } from '#app/utils/request-info.ts'
 import { type Theme, setTheme } from '#app/utils/theme.server.ts'
-
+import { type Route } from './+types/theme-switch.ts'
 const ThemeFormSchema = z.object({
 	theme: z.enum(['system', 'light', 'dark']),
 	// this is useful for progressive enhancement
 	redirectTo: z.string().optional(),
 })
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const formData = await request.formData()
 	const submission = parseWithZod(formData, {
 		schema: ThemeFormSchema,
diff --git a/app/routes/resources+/user-images.$imageId.tsx b/app/routes/resources+/user-images.$imageId.tsx
index ed0122c4d..0b98cd6d7 100644
--- a/app/routes/resources+/user-images.$imageId.tsx
+++ b/app/routes/resources+/user-images.$imageId.tsx
@@ -1,8 +1,8 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs } from 'react-router'
 import { prisma } from '#app/utils/db.server.ts'
+import { type Route } from './+types/user-images.$imageId.ts'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	invariantResponse(params.imageId, 'Image ID is required', { status: 400 })
 	const image = await prisma.userImage.findUnique({
 		where: { id: params.imageId },
diff --git a/app/routes/settings+/profile.change-email.tsx b/app/routes/settings+/profile.change-email.tsx
index 7490c7c9a..47e867668 100644
--- a/app/routes/settings+/profile.change-email.tsx
+++ b/app/routes/settings+/profile.change-email.tsx
@@ -1,15 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	redirect,
-	type ActionFunctionArgs,
-	type LoaderFunctionArgs,
-	Form,
-	useActionData,
-	useLoaderData,
-} from 'react-router'
+import { data, redirect, Form } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -24,6 +16,7 @@ import { sendEmail } from '#app/utils/email.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { EmailSchema } from '#app/utils/user-validation.ts'
 import { verifySessionStorage } from '#app/utils/verification.server.ts'
+import { type Route } from './+types/profile.change-email.ts'
 import { EmailChangeEmail } from './profile.change-email.server.tsx'
 import { type BreadcrumbHandle } from './profile.tsx'
 
@@ -38,7 +31,7 @@ const ChangeEmailSchema = z.object({
 	email: EmailSchema,
 })
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	await requireRecentVerification(request)
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUnique({
@@ -52,7 +45,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { user }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
 	const submission = await parseWithZod(formData, {
@@ -106,10 +99,10 @@ export async function action({ request }: ActionFunctionArgs) {
 	}
 }
 
-export default function ChangeEmailIndex() {
-	const data = useLoaderData<typeof loader>()
-	const actionData = useActionData<typeof action>()
-
+export default function ChangeEmailIndex({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const [form, fields] = useForm({
 		id: 'change-email-form',
 		constraint: getZodConstraint(ChangeEmailSchema),
@@ -125,7 +118,8 @@ export default function ChangeEmailIndex() {
 			<h1 className="text-h1">Change Email</h1>
 			<p>You will receive an email at the new email address to confirm.</p>
 			<p>
-				An email notice will also be sent to your old address {data.user.email}.
+				An email notice will also be sent to your old address{' '}
+				{loaderData.user.email}.
 			</p>
 			<div className="mx-auto mt-5 max-w-sm">
 				<Form method="POST" {...getFormProps(form)}>
diff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
index 2c2af0b84..49a215065 100644
--- a/app/routes/settings+/profile.index.tsx
+++ b/app/routes/settings+/profile.index.tsx
@@ -2,14 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Link,
-	useFetcher,
-	useLoaderData,
-} from 'react-router'
+import { data, Link, useFetcher } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -21,6 +14,7 @@ import { getUserImgSrc, useDoubleCheck } from '#app/utils/misc.tsx'
 import { authSessionStorage } from '#app/utils/session.server.ts'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { NameSchema, UsernameSchema } from '#app/utils/user-validation.ts'
+import { type Route, type Info } from './+types/profile.index.ts'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 
 export const handle: SEOHandle = {
@@ -32,7 +26,7 @@ const ProfileFormSchema = z.object({
 	username: UsernameSchema,
 })
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUniqueOrThrow({
 		where: { id: userId },
@@ -82,7 +76,7 @@ const profileUpdateActionIntent = 'update-profile'
 const signOutOfSessionsActionIntent = 'sign-out-of-sessions'
 const deleteDataActionIntent = 'delete-data'
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
 	const intent = formData.get('intent')
@@ -102,16 +96,14 @@ export async function action({ request }: ActionFunctionArgs) {
 	}
 }
 
-export default function EditUserProfile() {
-	const data = useLoaderData<typeof loader>()
-
+export default function EditUserProfile({ loaderData }: Route.ComponentProps) {
 	return (
 		<div className="flex flex-col gap-12">
 			<div className="flex justify-center">
 				<div className="relative h-52 w-52">
 					<img
-						src={getUserImgSrc(data.user.image?.id)}
-						alt={data.user.username}
+						src={getUserImgSrc(loaderData.user.image?.id)}
+						alt={loaderData.user.username}
 						className="h-full w-full rounded-full object-cover"
 					/>
 					<Button
@@ -130,20 +122,20 @@ export default function EditUserProfile() {
 					</Button>
 				</div>
 			</div>
-			<UpdateProfile />
+			<UpdateProfile loaderData={loaderData} />
 
 			<div className="col-span-6 my-6 h-1 border-b-[1.5px] border-foreground" />
 			<div className="col-span-full flex flex-col gap-6">
 				<div>
 					<Link to="change-email">
 						<Icon name="envelope-closed">
-							Change email from {data.user.email}
+							Change email from {loaderData.user.email}
 						</Icon>
 					</Link>
 				</div>
 				<div>
 					<Link to="two-factor">
-						{data.isTwoFactorEnabled ? (
+						{loaderData.isTwoFactorEnabled ? (
 							<Icon name="lock-closed">2FA is enabled</Icon>
 						) : (
 							<Icon name="lock-open-1">Enable 2FA</Icon>
@@ -151,9 +143,9 @@ export default function EditUserProfile() {
 					</Link>
 				</div>
 				<div>
-					<Link to={data.hasPassword ? 'password' : 'password/create'}>
+					<Link to={loaderData.hasPassword ? 'password' : 'password/create'}>
 						<Icon name="dots-horizontal">
-							{data.hasPassword ? 'Change Password' : 'Create a Password'}
+							{loaderData.hasPassword ? 'Change Password' : 'Create a Password'}
 						</Icon>
 					</Link>
 				</div>
@@ -171,7 +163,7 @@ export default function EditUserProfile() {
 						<Icon name="download">Download your data</Icon>
 					</Link>
 				</div>
-				<SignOutOfSessions />
+				<SignOutOfSessions loaderData={loaderData} />
 				<DeleteData />
 			</div>
 		</div>
@@ -218,9 +210,7 @@ async function profileUpdateAction({ userId, formData }: ProfileActionArgs) {
 	}
 }
 
-function UpdateProfile() {
-	const data = useLoaderData<typeof loader>()
-
+function UpdateProfile({ loaderData }: { loaderData: Info['loaderData'] }) {
 	const fetcher = useFetcher<typeof profileUpdateAction>()
 
 	const [form, fields] = useForm({
@@ -231,8 +221,8 @@ function UpdateProfile() {
 			return parseWithZod(formData, { schema: ProfileFormSchema })
 		},
 		defaultValue: {
-			username: data.user.username,
-			name: data.user.name,
+			username: loaderData.user.username,
+			name: loaderData.user.name,
 		},
 	})
 
@@ -293,12 +283,15 @@ async function signOutOfSessionsAction({ request, userId }: ProfileActionArgs) {
 	return { status: 'success' } as const
 }
 
-function SignOutOfSessions() {
-	const data = useLoaderData<typeof loader>()
+function SignOutOfSessions({
+	loaderData: loaderData,
+}: {
+	loaderData: Info['loaderData']
+}) {
 	const dc = useDoubleCheck()
 
 	const fetcher = useFetcher<typeof signOutOfSessionsAction>()
-	const otherSessionsCount = data.user._count.sessions - 1
+	const otherSessionsCount = loaderData.user._count.sessions - 1
 	return (
 		<div>
 			{otherSessionsCount ? (
diff --git a/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx
index 67d7f85c5..6cad1fb92 100644
--- a/app/routes/settings+/profile.password.tsx
+++ b/app/routes/settings+/profile.password.tsx
@@ -1,15 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Form,
-	Link,
-	useActionData,
-} from 'react-router'
+import { data, redirect, Form, Link } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -24,6 +16,7 @@ import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { PasswordSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/profile.password.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -57,13 +50,13 @@ async function requirePassword(userId: string) {
 	}
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	await requirePassword(userId)
 	return {}
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	await requirePassword(userId)
 	const formData = await request.formData()
@@ -120,8 +113,9 @@ export async function action({ request }: ActionFunctionArgs) {
 	)
 }
 
-export default function ChangePasswordRoute() {
-	const actionData = useActionData<typeof action>()
+export default function ChangePasswordRoute({
+	actionData,
+}: Route.ComponentProps) {
 	const isPending = useIsPending()
 
 	const [form, fields] = useForm({
diff --git a/app/routes/settings+/profile.password_.create.tsx b/app/routes/settings+/profile.password_.create.tsx
index dbe372711..b8822473f 100644
--- a/app/routes/settings+/profile.password_.create.tsx
+++ b/app/routes/settings+/profile.password_.create.tsx
@@ -1,15 +1,7 @@
 import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Form,
-	Link,
-	useActionData,
-} from 'react-router'
+import { data, redirect, Form, Link } from 'react-router'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -18,6 +10,7 @@ import { getPasswordHash, requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { PasswordAndConfirmPasswordSchema } from '#app/utils/user-validation.ts'
+import { type Route } from './+types/profile.password_.create.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -37,13 +30,13 @@ async function requireNoPassword(userId: string) {
 	}
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	await requireNoPassword(userId)
 	return {}
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	await requireNoPassword(userId)
 	const formData = await request.formData()
@@ -79,8 +72,9 @@ export async function action({ request }: ActionFunctionArgs) {
 	return redirect(`/settings/profile`, { status: 302 })
 }
 
-export default function CreatePasswordRoute() {
-	const actionData = useActionData<typeof action>()
+export default function CreatePasswordRoute({
+	actionData,
+}: Route.ComponentProps) {
 	const isPending = useIsPending()
 
 	const [form, fields] = useForm({
diff --git a/app/routes/settings+/profile.photo.tsx b/app/routes/settings+/profile.photo.tsx
index dcc7b8074..0eb157f69 100644
--- a/app/routes/settings+/profile.photo.tsx
+++ b/app/routes/settings+/profile.photo.tsx
@@ -4,16 +4,7 @@ import { invariantResponse } from '@epic-web/invariant'
 import { type FileUpload, parseFormData } from '@mjackson/form-data-parser'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import { useState } from 'react'
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Form,
-	useActionData,
-	useLoaderData,
-	useNavigation,
-} from 'react-router'
+import { data, redirect, Form, useNavigation } from 'react-router'
 import { z } from 'zod'
 import { ErrorList } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
@@ -27,6 +18,7 @@ import {
 	useDoubleCheck,
 	useIsPending,
 } from '#app/utils/misc.tsx'
+import { type Route } from './+types/profile.photo.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 
 export const handle: BreadcrumbHandle & SEOHandle = {
@@ -56,7 +48,7 @@ const PhotoFormSchema = z.discriminatedUnion('intent', [
 	NewImageSchema,
 ])
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUnique({
 		where: { id: userId },
@@ -71,7 +63,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { user }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 
 	const formData = await parseFormData(
@@ -119,12 +111,12 @@ export async function action({ request }: ActionFunctionArgs) {
 	return redirect('/settings/profile')
 }
 
-export default function PhotoRoute() {
-	const data = useLoaderData<typeof loader>()
-
+export default function PhotoRoute({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const doubleCheckDeleteImage = useDoubleCheck()
 
-	const actionData = useActionData<typeof action>()
 	const navigation = useNavigation()
 
 	const [form, fields] = useForm({
@@ -154,10 +146,11 @@ export default function PhotoRoute() {
 			>
 				<img
 					src={
-						newImageSrc ?? (data.user ? getUserImgSrc(data.user.image?.id) : '')
+						newImageSrc ??
+						(loaderData.user ? getUserImgSrc(loaderData.user.image?.id) : '')
 					}
 					className="h-52 w-52 rounded-full object-cover"
-					alt={data.user?.name ?? data.user?.username}
+					alt={loaderData.user?.name ?? loaderData.user?.username}
 				/>
 				<ErrorList errors={fields.photoFile.errors} id={fields.photoFile.id} />
 				<div className="flex gap-4">
@@ -214,7 +207,7 @@ export default function PhotoRoute() {
 					>
 						<Icon name="trash">Reset</Icon>
 					</Button>
-					{data.user.image?.id ? (
+					{loaderData.user.image?.id ? (
 						<StatusButton
 							className="peer-valid:hidden"
 							variant="destructive"
diff --git a/app/routes/settings+/profile.tsx b/app/routes/settings+/profile.tsx
index 6e6bfec77..8b29472eb 100644
--- a/app/routes/settings+/profile.tsx
+++ b/app/routes/settings+/profile.tsx
@@ -1,6 +1,6 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import { type LoaderFunctionArgs, Link, Outlet, useMatches } from 'react-router'
+import { Link, Outlet, useMatches } from 'react-router'
 import { z } from 'zod'
 import { Spacer } from '#app/components/spacer.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -8,6 +8,7 @@ import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn } from '#app/utils/misc.tsx'
 import { useUser } from '#app/utils/user.ts'
+import { type Route } from './+types/profile.ts'
 
 export const BreadcrumbHandle = z.object({ breadcrumb: z.any() })
 export type BreadcrumbHandle = z.infer<typeof BreadcrumbHandle>
@@ -17,7 +18,7 @@ export const handle: BreadcrumbHandle & SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const user = await prisma.user.findUnique({
 		where: { id: userId },
diff --git a/app/routes/settings+/profile.two-factor.disable.tsx b/app/routes/settings+/profile.two-factor.disable.tsx
index 724c39a2b..ed559241f 100644
--- a/app/routes/settings+/profile.two-factor.disable.tsx
+++ b/app/routes/settings+/profile.two-factor.disable.tsx
@@ -1,9 +1,5 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	useFetcher,
-} from 'react-router'
+import { useFetcher } from 'react-router'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireRecentVerification } from '#app/routes/_auth+/verify.server.ts'
@@ -11,6 +7,7 @@ import { requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
 import { useDoubleCheck } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
+import { type Route } from './+types/profile.two-factor.disable.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 
@@ -19,12 +16,12 @@ export const handle: BreadcrumbHandle & SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	await requireRecentVerification(request)
 	return {}
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	await requireRecentVerification(request)
 	const userId = await requireUserId(request)
 	await prisma.verification.delete({
diff --git a/app/routes/settings+/profile.two-factor.index.tsx b/app/routes/settings+/profile.two-factor.index.tsx
index b19245457..7e0f8df51 100644
--- a/app/routes/settings+/profile.two-factor.index.tsx
+++ b/app/routes/settings+/profile.two-factor.index.tsx
@@ -1,17 +1,11 @@
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
-import {
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Link,
-	useFetcher,
-	useLoaderData,
-} from 'react-router'
+import { redirect, Link, useFetcher } from 'react-router'
 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'
 import { prisma } from '#app/utils/db.server.ts'
 import { generateTOTP } from '#app/utils/totp.server.ts'
+import { type Route } from './+types/profile.two-factor.index.ts'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 import { twoFAVerifyVerificationType } from './profile.two-factor.verify.tsx'
 
@@ -19,7 +13,7 @@ export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const verification = await prisma.verification.findUnique({
 		where: { target_type: { type: twoFAVerificationType, target: userId } },
@@ -28,7 +22,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { is2FAEnabled: Boolean(verification) }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	const { otp: _otp, ...config } = await generateTOTP()
 	const verificationData = {
@@ -46,13 +40,12 @@ export async function action({ request }: ActionFunctionArgs) {
 	return redirect('/settings/profile/two-factor/verify')
 }
 
-export default function TwoFactorRoute() {
-	const data = useLoaderData<typeof loader>()
+export default function TwoFactorRoute({ loaderData }: Route.ComponentProps) {
 	const enable2FAFetcher = useFetcher<typeof action>()
 
 	return (
 		<div className="flex flex-col gap-4">
-			{data.is2FAEnabled ? (
+			{loaderData.is2FAEnabled ? (
 				<>
 					<p className="text-lg">
 						<Icon name="check">
diff --git a/app/routes/settings+/profile.two-factor.verify.tsx b/app/routes/settings+/profile.two-factor.verify.tsx
index 649a2b8e2..494926017 100644
--- a/app/routes/settings+/profile.two-factor.verify.tsx
+++ b/app/routes/settings+/profile.two-factor.verify.tsx
@@ -2,16 +2,7 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import * as QRCode from 'qrcode'
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Form,
-	useActionData,
-	useLoaderData,
-	useNavigation,
-} from 'react-router'
+import { data, redirect, Form, useNavigation } from 'react-router'
 import { z } from 'zod'
 import { ErrorList, OTPField } from '#app/components/forms.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
@@ -22,6 +13,7 @@ import { prisma } from '#app/utils/db.server.ts'
 import { getDomainUrl, useIsPending } from '#app/utils/misc.tsx'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { getTOTPAuthUri } from '#app/utils/totp.server.ts'
+import { type Route } from './+types/profile.two-factor.verify.ts'
 import { type BreadcrumbHandle } from './profile.tsx'
 import { twoFAVerificationType } from './profile.two-factor.tsx'
 
@@ -43,7 +35,7 @@ const ActionSchema = z.discriminatedUnion('intent', [
 
 export const twoFAVerifyVerificationType = '2fa-verify'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const userId = await requireUserId(request)
 	const verification = await prisma.verification.findUnique({
 		where: {
@@ -76,7 +68,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { otpUri, qrCode }
 }
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
 
@@ -131,9 +123,10 @@ export async function action({ request }: ActionFunctionArgs) {
 	}
 }
 
-export default function TwoFactorRoute() {
-	const data = useLoaderData<typeof loader>()
-	const actionData = useActionData<typeof action>()
+export default function TwoFactorRoute({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const navigation = useNavigation()
 
 	const isPending = useIsPending()
@@ -152,7 +145,7 @@ export default function TwoFactorRoute() {
 	return (
 		<div>
 			<div className="flex flex-col items-center gap-4">
-				<img alt="qr code" src={data.qrCode} className="h-56 w-56" />
+				<img alt="qr code" src={loaderData.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
@@ -163,7 +156,7 @@ export default function TwoFactorRoute() {
 						className="whitespace-pre-wrap break-all text-sm"
 						aria-label="One-time Password URI"
 					>
-						{data.otpUri}
+						{loaderData.otpUri}
 					</pre>
 				</div>
 				<p className="text-sm">
diff --git a/app/routes/users+/$username.test.tsx b/app/routes/users+/$username.test.tsx
index 01c3359df..eee52fbb2 100644
--- a/app/routes/users+/$username.test.tsx
+++ b/app/routes/users+/$username.test.tsx
@@ -68,7 +68,7 @@ test('The user profile when logged in as self', async () => {
 			loader: async (args) => {
 				// add the cookie header to the request
 				args.request.headers.set('cookie', cookieHeader)
-				return rootLoader(args)
+				return rootLoader({ ...args, context: args.context })
 			},
 			children: [
 				{
diff --git a/app/routes/users+/$username.tsx b/app/routes/users+/$username.tsx
index 98a01d531..ff050e167 100644
--- a/app/routes/users+/$username.tsx
+++ b/app/routes/users+/$username.tsx
@@ -4,7 +4,6 @@ import {
 	Form,
 	Link,
 	useLoaderData,
-	type MetaFunction,
 } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Spacer } from '#app/components/spacer.tsx'
@@ -13,6 +12,7 @@ import { Icon } from '#app/components/ui/icon.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { getUserImgSrc } from '#app/utils/misc.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
+import { type Route } from './+types/$username.ts'
 
 export async function loader({ params }: LoaderFunctionArgs) {
 	const user = await prisma.user.findFirst({
@@ -38,7 +38,7 @@ export default function ProfileRoute() {
 	const user = data.user
 	const userDisplayName = user.name ?? user.username
 	const loggedInUser = useOptionalUser()
-	const isLoggedInUser = data.user.id === loggedInUser?.id
+	const isLoggedInUser = user.id === loggedInUser?.id
 
 	return (
 		<div className="container mb-48 mt-36 flex flex-col items-center justify-center">
@@ -103,7 +103,7 @@ export default function ProfileRoute() {
 	)
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
+export const meta: Route.MetaFunction = ({ data, params }) => {
 	const displayName = data?.user.name ?? params.username
 	return [
 		{ title: `${displayName} | Epic Notes` },
diff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx
index d3440853e..ce1cb029d 100644
--- a/app/routes/users+/$username_+/notes.$noteId.tsx
+++ b/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -2,16 +2,7 @@ import { getFormProps, useForm } from '@conform-to/react'
 import { parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { formatDistanceToNow } from 'date-fns'
-import {
-	data,
-	type LoaderFunctionArgs,
-	type ActionFunctionArgs,
-	Form,
-	Link,
-	useActionData,
-	useLoaderData,
-	type MetaFunction,
-} from 'react-router'
+import { data, Form, Link } from 'react-router'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
@@ -25,9 +16,10 @@ import { getNoteImgSrc, useIsPending } from '#app/utils/misc.tsx'
 import { requireUserWithPermission } from '#app/utils/permissions.server.ts'
 import { redirectWithToast } from '#app/utils/toast.server.ts'
 import { userHasPermission, useOptionalUser } from '#app/utils/user.ts'
-import { type loader as notesLoader } from './notes.tsx'
+import { type Route, type Info } from './+types/notes.$noteId.ts'
+import { type Info as notesInfo } from './+types/notes.ts'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	const note = await prisma.note.findUnique({
 		where: { id: params.noteId },
 		select: {
@@ -58,7 +50,7 @@ const DeleteFormSchema = z.object({
 	noteId: z.string(),
 })
 
-export async function action({ request }: ActionFunctionArgs) {
+export async function action({ request }: Route.ActionArgs) {
 	const userId = await requireUserId(request)
 	const formData = await request.formData()
 	const submission = parseWithZod(formData, {
@@ -94,10 +86,12 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 }
 
-export default function NoteRoute() {
-	const data = useLoaderData<typeof loader>()
+export default function NoteRoute({
+	loaderData,
+	actionData,
+}: Route.ComponentProps) {
 	const user = useOptionalUser()
-	const isOwner = user?.id === data.note.ownerId
+	const isOwner = user?.id === loaderData.note.ownerId
 	const canDelete = userHasPermission(
 		user,
 		isOwner ? `delete:note:own` : `delete:note:any`,
@@ -106,10 +100,10 @@ export default function NoteRoute() {
 
 	return (
 		<div className="absolute inset-0 flex flex-col px-10">
-			<h2 className="mb-2 pt-12 text-h2 lg:mb-6">{data.note.title}</h2>
+			<h2 className="mb-2 pt-12 text-h2 lg:mb-6">{loaderData.note.title}</h2>
 			<div className={`${displayBar ? 'pb-24' : 'pb-12'} overflow-y-auto`}>
 				<ul className="flex flex-wrap gap-5 py-5">
-					{data.note.images.map((image) => (
+					{loaderData.note.images.map((image) => (
 						<li key={image.id}>
 							<a href={getNoteImgSrc(image.id)}>
 								<img
@@ -122,18 +116,20 @@ export default function NoteRoute() {
 					))}
 				</ul>
 				<p className="whitespace-break-spaces text-sm md:text-lg">
-					{data.note.content}
+					{loaderData.note.content}
 				</p>
 			</div>
 			{displayBar ? (
 				<div className={floatingToolbarClassName}>
 					<span className="text-sm text-foreground/90 max-[524px]:hidden">
 						<Icon name="clock" className="scale-125">
-							{data.timeAgo} ago
+							{loaderData.timeAgo} ago
 						</Icon>
 					</span>
 					<div className="grid flex-1 grid-cols-2 justify-end gap-2 min-[525px]:flex md:gap-4">
-						{canDelete ? <DeleteNote id={data.note.id} /> : null}
+						{canDelete ? (
+							<DeleteNote id={loaderData.note.id} actionData={actionData} />
+						) : null}
 						<Button
 							asChild
 							className="min-[525px]:max-md:aspect-square min-[525px]:max-md:px-0"
@@ -151,8 +147,13 @@ export default function NoteRoute() {
 	)
 }
 
-export function DeleteNote({ id }: { id: string }) {
-	const actionData = useActionData<typeof action>()
+export function DeleteNote({
+	id,
+	actionData,
+}: {
+	id: string
+	actionData: Info['actionData'] | undefined
+}) {
 	const isPending = useIsPending()
 	const [form] = useForm({
 		id: 'delete-note',
@@ -180,13 +181,11 @@ export function DeleteNote({ id }: { id: string }) {
 	)
 }
 
-export const meta: MetaFunction<
-	typeof loader,
-	{ 'routes/users+/$username_+/notes': typeof notesLoader }
-> = ({ data, params, matches }) => {
+export const meta: Route.MetaFunction = ({ data, params, matches }) => {
 	const notesMatch = matches.find(
-		(m) => m.id === 'routes/users+/$username_+/notes',
-	)
+		(m) => m?.id === 'routes/users+/$username_+/notes',
+	) as { data: notesInfo['loaderData'] } | undefined
+
 	const displayName = notesMatch?.data?.owner.name ?? params.username
 	const noteTitle = data?.note.title ?? 'Note'
 	const noteContentsSummary =
diff --git a/app/routes/users+/$username_+/notes.index.tsx b/app/routes/users+/$username_+/notes.index.tsx
index 1834c7038..8379f8188 100644
--- a/app/routes/users+/$username_+/notes.index.tsx
+++ b/app/routes/users+/$username_+/notes.index.tsx
@@ -1,5 +1,5 @@
-import { type MetaFunction } from 'react-router'
-import { type loader as notesLoader } from './notes.tsx'
+import { type Route } from './+types/notes.index.ts'
+import { type Info as notesInfo } from './+types/notes.ts'
 
 export default function NotesIndexRoute() {
 	return (
@@ -9,13 +9,11 @@ export default function NotesIndexRoute() {
 	)
 }
 
-export const meta: MetaFunction<
-	null,
-	{ 'routes/users+/$username_+/notes': typeof notesLoader }
-> = ({ params, matches }) => {
+export const meta: Route.MetaFunction = ({ params, matches }) => {
 	const notesMatch = matches.find(
-		(m) => m.id === 'routes/users+/$username_+/notes',
-	)
+		(m) => m?.id === 'routes/users+/$username_+/notes',
+	) as { data: notesInfo['loaderData'] }
+
 	const displayName = notesMatch?.data?.owner.name ?? params.username
 	const noteCount = notesMatch?.data?.owner.notes.length ?? 0
 	const notesText = noteCount === 1 ? 'note' : 'notes'
diff --git a/app/routes/users+/$username_+/notes.new.tsx b/app/routes/users+/$username_+/notes.new.tsx
index 3de17d87d..d9a24a640 100644
--- a/app/routes/users+/$username_+/notes.new.tsx
+++ b/app/routes/users+/$username_+/notes.new.tsx
@@ -1,10 +1,10 @@
-import { type LoaderFunctionArgs } from 'react-router'
 import { requireUserId } from '#app/utils/auth.server.ts'
+import { type Route } from './+types/notes.new.ts'
 import { NoteEditor } from './__note-editor.tsx'
 
 export { action } from './__note-editor.server.tsx'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	await requireUserId(request)
 	return {}
 }
diff --git a/app/routes/users+/$username_+/notes.tsx b/app/routes/users+/$username_+/notes.tsx
index 3b2660a32..dea63cef1 100644
--- a/app/routes/users+/$username_+/notes.tsx
+++ b/app/routes/users+/$username_+/notes.tsx
@@ -1,18 +1,13 @@
 import { invariantResponse } from '@epic-web/invariant'
-import {
-	type LoaderFunctionArgs,
-	Link,
-	NavLink,
-	Outlet,
-	useLoaderData,
-} from 'react-router'
+import { Link, NavLink, Outlet } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn, getUserImgSrc } from '#app/utils/misc.tsx'
 import { useOptionalUser } from '#app/utils/user.ts'
+import { type Route } from './+types/notes.ts'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	const owner = await prisma.user.findFirst({
 		select: {
 			id: true,
@@ -29,11 +24,10 @@ export async function loader({ params }: LoaderFunctionArgs) {
 	return { owner }
 }
 
-export default function NotesRoute() {
-	const data = useLoaderData<typeof loader>()
+export default function NotesRoute({ loaderData }: Route.ComponentProps) {
 	const user = useOptionalUser()
-	const isOwner = user?.id === data.owner.id
-	const ownerDisplayName = data.owner.name ?? data.owner.username
+	const isOwner = user?.id === loaderData.owner.id
+	const ownerDisplayName = loaderData.owner.name ?? loaderData.owner.username
 	const navLinkDefaultClassName =
 		'line-clamp-2 block rounded-l-full py-2 pl-8 pr-6 text-base lg:text-xl'
 	return (
@@ -42,11 +36,11 @@ export default function NotesRoute() {
 				<div className="relative col-span-1">
 					<div className="absolute inset-0 flex flex-col">
 						<Link
-							to={`/users/${data.owner.username}`}
+							to={`/users/${loaderData.owner.username}`}
 							className="flex flex-col items-center justify-center gap-2 bg-muted pb-4 pl-8 pr-4 pt-12 lg:flex-row lg:justify-start lg:gap-4"
 						>
 							<img
-								src={getUserImgSrc(data.owner.image?.id)}
+								src={getUserImgSrc(loaderData.owner.image?.id)}
 								alt={ownerDisplayName}
 								className="h-16 w-16 rounded-full object-cover lg:h-24 lg:w-24"
 							/>
@@ -67,7 +61,7 @@ export default function NotesRoute() {
 									</NavLink>
 								</li>
 							) : null}
-							{data.owner.notes.map((note) => (
+							{loaderData.owner.notes.map((note) => (
 								<li key={note.id} className="p-1 pr-0">
 									<NavLink
 										to={note.id}
diff --git a/app/routes/users+/index.tsx b/app/routes/users+/index.tsx
index 338d7fd5f..b5b01e6d8 100644
--- a/app/routes/users+/index.tsx
+++ b/app/routes/users+/index.tsx
@@ -1,16 +1,11 @@
-import {
-	data,
-	redirect,
-	type LoaderFunctionArgs,
-	Link,
-	useLoaderData,
-} from 'react-router'
+import { data, redirect, Link } from 'react-router'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList } from '#app/components/forms.tsx'
 import { SearchBar } from '#app/components/search-bar.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn, getUserImgSrc, useDelayedIsPending } from '#app/utils/misc.tsx'
+import { type Route } from './+types/index.ts'
 
 const UserSearchResultSchema = z.object({
 	id: z.string(),
@@ -21,7 +16,7 @@ const UserSearchResultSchema = z.object({
 
 const UserSearchResultsSchema = z.array(UserSearchResultSchema)
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	const searchTerm = new URL(request.url).searchParams.get('search')
 	if (searchTerm === '') {
 		return redirect('/users')
@@ -53,33 +48,32 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return { status: 'idle', users: result.data } as const
 }
 
-export default function UsersRoute() {
-	const data = useLoaderData<typeof loader>()
+export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 	const isPending = useDelayedIsPending({
 		formMethod: 'GET',
 		formAction: '/users',
 	})
 
-	if (data.status === 'error') {
-		console.error(data.error)
+	if (loaderData.status === 'error') {
+		console.error(loaderData.error)
 	}
 
 	return (
 		<div className="container mb-48 mt-36 flex flex-col items-center justify-center gap-6">
 			<h1 className="text-h1">Epic Notes Users</h1>
 			<div className="w-full max-w-[700px]">
-				<SearchBar status={data.status} autoFocus autoSubmit />
+				<SearchBar status={loaderData.status} autoFocus autoSubmit />
 			</div>
 			<main>
-				{data.status === 'idle' ? (
-					data.users.length ? (
+				{loaderData.status === 'idle' ? (
+					loaderData.users.length ? (
 						<ul
 							className={cn(
 								'flex w-full flex-wrap items-center justify-center gap-4 delay-200',
 								{ 'opacity-50': isPending },
 							)}
 						>
-							{data.users.map((user) => (
+							{loaderData.users.map((user) => (
 								<li key={user.id}>
 									<Link
 										to={user.username}
@@ -105,7 +99,7 @@ export default function UsersRoute() {
 					) : (
 						<p>No users found</p>
 					)
-				) : data.status === 'error' ? (
+				) : loaderData.status === 'error' ? (
 					<ErrorList errors={['There was an error parsing the results']} />
 				) : null}
 			</main>
diff --git a/docs/seo.md b/docs/seo.md
index 79286f3e7..b5de558c4 100644
--- a/docs/seo.md
+++ b/docs/seo.md
@@ -39,8 +39,9 @@ build. Support for this is pre-configured in the `vite.config.ts` file.
 ```tsx
 // in your routes/url-that-doesnt-need-sitemap
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { type Route } from './+types/sitemap[.]xml.ts'
 
-export async function loader({ request }: LoaderFunctionArgs) {
+export async function loader({ request }: Route.LoaderArgs) {
 	/**/
 }
 
diff --git a/docs/server-timing.md b/docs/server-timing.md
index 248f76903..6985608d0 100644
--- a/docs/server-timing.md
+++ b/docs/server-timing.md
@@ -32,8 +32,9 @@ import {
 	makeTimings,
 	time,
 } from '#app/utils/timing.server.ts'
+import { type Route } from './+types/notes.ts'
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ params }: Route.LoaderArgs) {
 	const timings = makeTimings('notes loader') // <-- 1. Setup Timings
 	// 2. Time functions
 	const owner = await time(
@@ -74,7 +75,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
 	)
 }
 
-export const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {
+export const headers: Route.HeadersFunction = ({ loaderHeaders, parentHeaders }) => {
 	return {
 		'Server-Timing': combineServerTimings(parentHeaders, loaderHeaders), // <-- 4. Send headers
 	}