diff --git a/.vscode/remix.code-snippets b/.vscode/remix.code-snippets
index 4d8ec1d8b..f7ca78160 100644
--- a/.vscode/remix.code-snippets
+++ b/.vscode/remix.code-snippets
@@ -56,17 +56,6 @@
 			"}",
 		],
 	},
-	"meta": {
-		"prefix": "/meta",
-		"scope": "typescriptreact,javascriptreact,typescript,javascript",
-		"body": [
-			"import type { MetaFunction } from '@remix-run/node'",
-			"",
-			"export const meta: MetaFunction<typeof loader> = ({ data }) => [{",
-			"  title: 'Title',",
-			"}]",
-		],
-	},
 	"shouldRevalidate": {
 		"prefix": "/shouldRevalidate",
 		"scope": "typescriptreact,javascriptreact,typescript,javascript",
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 36601c5c2..14096c48d 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -39,20 +39,25 @@ export interface ButtonProps
 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
 		VariantProps<typeof buttonVariants> {
 	asChild?: boolean
+	ref?: React.RefObject<HTMLButtonElement>
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Button = ({
+	ref,
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: ButtonProps) => {
+	const Comp = asChild ? Slot : 'button'
+	return (
+		<Comp
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	)
+}
 Button.displayName = 'Button'
 
 export { Button, buttonVariants }
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
index 637a7fdd6..aa1464fa4 100644
--- a/app/components/ui/checkbox.tsx
+++ b/app/components/ui/checkbox.tsx
@@ -10,10 +10,11 @@ export type CheckboxProps = Omit<
 	type?: string
 }
 
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+const Checkbox = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) => (
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
@@ -35,7 +36,7 @@ const Checkbox = React.forwardRef<
 			</svg>
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
-))
+)
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index 3bb4fe3a3..aa62ac737 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -15,12 +15,15 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-		inset?: boolean
-	}
->(({ className, inset, children, ...props }, ref) => (
+const DropdownMenuSubTrigger = ({
+	ref,
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
@@ -33,14 +36,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		{children}
 		<span className="ml-auto h-4 w-4">▶️</span>
 	</DropdownMenuPrimitive.SubTrigger>
-))
+)
 DropdownMenuSubTrigger.displayName =
 	DropdownMenuPrimitive.SubTrigger.displayName
 
-const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => (
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
@@ -49,14 +53,16 @@ const DropdownMenuSubContent = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuSubContent.displayName =
 	DropdownMenuPrimitive.SubContent.displayName
 
-const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = ({
+	ref,
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) => (
 	<DropdownMenuPrimitive.Portal>
 		<DropdownMenuPrimitive.Content
 			ref={ref}
@@ -68,15 +74,17 @@ const DropdownMenuContent = React.forwardRef<
 			{...props}
 		/>
 	</DropdownMenuPrimitive.Portal>
-))
+)
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-		inset?: boolean
-	}
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuItem = ({
+	ref,
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
@@ -86,13 +94,16 @@ const DropdownMenuItem = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = ({
+	ref,
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => (
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
@@ -118,14 +129,18 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.CheckboxItem>
-))
+)
 DropdownMenuCheckboxItem.displayName =
 	DropdownMenuPrimitive.CheckboxItem.displayName
 
-const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = ({
+	ref,
+	className,
+	children,
+	...props
+}: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+	ref: React.RefObject<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>
+}) => (
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
@@ -141,15 +156,17 @@ const DropdownMenuRadioItem = React.forwardRef<
 		</span>
 		{children}
 	</DropdownMenuPrimitive.RadioItem>
-))
+)
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-		inset?: boolean
-	}
->(({ className, inset, ...props }, ref) => (
+const DropdownMenuLabel = ({
+	ref,
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean
+}) => (
 	<DropdownMenuPrimitive.Label
 		ref={ref}
 		className={cn(
@@ -159,19 +176,20 @@ const DropdownMenuLabel = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const DropdownMenuSeparator = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) => (
 	<DropdownMenuPrimitive.Separator
 		ref={ref}
 		className={cn('-mx-1 my-1 h-px bg-muted', className)}
 		{...props}
 	/>
-))
+)
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({
diff --git a/app/components/ui/input-otp.tsx b/app/components/ui/input-otp.tsx
index ff7a2d7b1..ad1501e7b 100644
--- a/app/components/ui/input-otp.tsx
+++ b/app/components/ui/input-otp.tsx
@@ -3,10 +3,12 @@ import * as React from 'react'
 
 import { cn } from '#app/utils/misc.tsx'
 
-const InputOTP = React.forwardRef<
-	React.ElementRef<typeof OTPInput>,
-	React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+const InputOTP = ({
+	ref,
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput>) => (
 	<OTPInput
 		ref={ref}
 		containerClassName={cn(
@@ -16,21 +18,26 @@ const InputOTP = React.forwardRef<
 		className={cn('disabled:cursor-not-allowed', className)}
 		{...props}
 	/>
-))
+)
 InputOTP.displayName = 'InputOTP'
 
-const InputOTPGroup = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'>
->(({ className, ...props }, ref) => (
+const InputOTPGroup = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<'div'>) => (
 	<div ref={ref} className={cn('flex items-center', className)} {...props} />
-))
+)
 InputOTPGroup.displayName = 'InputOTPGroup'
 
-const InputOTPSlot = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'> & { index: number }
->(({ index, className, ...props }, ref) => {
+const InputOTPSlot = ({
+	ref,
+	index,
+	className,
+	...props
+}: React.ComponentProps<'div'> & {
+	index: number
+}) => {
 	const inputOTPContext = React.useContext(OTPInputContext)
 	const slot = inputOTPContext.slots[index]
 	if (!slot) throw new Error('Invalid slot index')
@@ -54,17 +61,14 @@ const InputOTPSlot = React.forwardRef<
 			)}
 		</div>
 	)
-})
+}
 InputOTPSlot.displayName = 'InputOTPSlot'
 
-const InputOTPSeparator = React.forwardRef<
-	React.ElementRef<'div'>,
-	React.ComponentPropsWithoutRef<'div'>
->(({ ...props }, ref) => (
+const InputOTPSeparator = ({ ref, ...props }: React.ComponentProps<'div'>) => (
 	<div ref={ref} role="separator" {...props}>
 		-
 	</div>
-))
+)
 InputOTPSeparator.displayName = 'InputOTPSeparator'
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index f4b2db38e..d5e888c39 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -3,23 +3,23 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 export interface InputProps
-	extends React.InputHTMLAttributes<HTMLInputElement> {}
+	extends React.InputHTMLAttributes<HTMLInputElement> {
+	ref?: React.RefObject<HTMLInputElement>
+}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Input = ({ ref, className, type, ...props }: InputProps) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-base file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm md:file:text-sm',
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+}
 Input.displayName = 'Input'
 
 export { Input }
diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
index ec453ee26..703c3b790 100644
--- a/app/components/ui/label.tsx
+++ b/app/components/ui/label.tsx
@@ -8,17 +8,17 @@ const labelVariants = cva(
 	'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 )
 
-const Label = React.forwardRef<
-	React.ElementRef<typeof LabelPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-		VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+const Label = ({
+	ref,
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
 	<LabelPrimitive.Root
 		ref={ref}
 		className={cn(labelVariants(), className)}
 		{...props}
 	/>
-))
+)
 Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }
diff --git a/app/components/ui/status-button.tsx b/app/components/ui/status-button.tsx
index f39a7ffd6..a49cbed01 100644
--- a/app/components/ui/status-button.tsx
+++ b/app/components/ui/status-button.tsx
@@ -10,14 +10,19 @@ import {
 	TooltipTrigger,
 } from './tooltip.tsx'
 
-export const StatusButton = React.forwardRef<
-	HTMLButtonElement,
-	ButtonProps & {
-		status: 'pending' | 'success' | 'error' | 'idle'
-		message?: string | null
-		spinDelay?: Parameters<typeof useSpinDelay>[1]
-	}
->(({ message, status, className, children, spinDelay, ...props }, ref) => {
+export const StatusButton = ({
+	ref,
+	message,
+	status,
+	className,
+	children,
+	spinDelay,
+	...props
+}: ButtonProps & {
+	status: 'pending' | 'success' | 'error' | 'idle'
+	message?: string | null
+	spinDelay?: Parameters<typeof useSpinDelay>[1]
+}) => {
 	const delayedPending = useSpinDelay(status === 'pending', {
 		delay: 400,
 		minDuration: 300,
@@ -74,5 +79,5 @@ export const StatusButton = React.forwardRef<
 			)}
 		</Button>
 	)
-})
+}
 StatusButton.displayName = 'Button'
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
index 2e8ea5e05..6e7ca6378 100644
--- a/app/components/ui/textarea.tsx
+++ b/app/components/ui/textarea.tsx
@@ -3,22 +3,22 @@ import * as React from 'react'
 import { cn } from '#app/utils/misc.tsx'
 
 export interface TextareaProps
-	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+	ref?: React.RefObject<HTMLTextAreaElement>
+}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<textarea
-				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
+const Textarea = ({ ref, className, ...props }: TextareaProps) => {
+	return (
+		<textarea
+			className={cn(
+				'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-input-invalid md:text-sm',
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+}
 Textarea.displayName = 'Textarea'
 
 export { Textarea }
diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
index 5017f3ef7..84ff2a15e 100644
--- a/app/components/ui/tooltip.tsx
+++ b/app/components/ui/tooltip.tsx
@@ -9,10 +9,12 @@ const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent = ({
+	ref,
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) => (
 	<TooltipPrimitive.Content
 		ref={ref}
 		sideOffset={sideOffset}
@@ -22,7 +24,7 @@ const TooltipContent = React.forwardRef<
 		)}
 		{...props}
 	/>
-))
+)
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/app/root.tsx b/app/root.tsx
index f21f11216..b2be50dc8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -70,13 +70,6 @@ export const links: LinksFunction = () => {
 	].filter(Boolean)
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-	return [
-		{ title: data ? 'Epic Notes' : 'Error | Epic Notes' },
-		{ name: 'description', content: `Your own captain's log` },
-	]
-}
-
 export async function loader({ request }: LoaderFunctionArgs) {
 	const timings = makeTimings('root loader')
 	const userId = await time(() => getUserId(request), {
@@ -168,6 +161,7 @@ function Document({
 				<Meta />
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width,initial-scale=1" />
+				<meta name="description" content="Your own captain's log" />
 				{allowIndexing ? null : (
 					<meta name="robots" content="noindex, nofollow" />
 				)}
@@ -194,7 +188,7 @@ function App() {
 	const user = useOptionalUser()
 	const theme = useTheme()
 	const matches = useMatches()
-	const isOnSearchPage = matches.find((m) => m.id === 'routes/users+/index')
+	const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
 	const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />
 	const allowIndexing = data.ENV.ALLOW_INDEXING !== 'false'
 	useToast(data.toast)
@@ -206,6 +200,8 @@ function App() {
 			allowIndexing={allowIndexing}
 			env={data.ENV}
 		>
+			<title>Epic Notes</title>
+
 			<div className="flex h-screen flex-col justify-between">
 				<header className="container py-6">
 					<nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
@@ -276,7 +272,7 @@ function UserDropdown() {
 					<Link
 						to={`/users/${user.username}`}
 						// this is for progressive enhancement
-						onClick={(e) => e.preventDefault()}
+						onClick={e => e.preventDefault()}
 						className="flex items-center gap-2"
 					>
 						<img
@@ -309,7 +305,7 @@ function UserDropdown() {
 					<DropdownMenuItem
 						asChild
 						// this prevents the menu from closing before the form submission is completed
-						onSelect={(event) => {
+						onSelect={event => {
 							event.preventDefault()
 							submit(formRef.current)
 						}}
@@ -340,6 +336,7 @@ export function ErrorBoundary() {
 
 	return (
 		<Document nonce={nonce}>
+			<title>Error | Epic Notes</title>
 			<GeneralErrorBoundary />
 		</Document>
 	)
diff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
index f863eeb00..9237baf41 100644
--- a/app/routes/_auth+/forgot-password.tsx
+++ b/app/routes/_auth+/forgot-password.tsx
@@ -118,10 +118,6 @@ function ForgotPasswordEmail({
 	)
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Password Recovery for Epic Notes' }]
-}
-
 export default function ForgotPasswordRoute() {
 	const forgotPassword = useFetcher<typeof action>()
 
@@ -140,6 +136,7 @@ export default function ForgotPasswordRoute() {
 			<div className="flex flex-col justify-center">
 				<div className="text-center">
 					<h1 className="text-h1">Forgot Password</h1>
+					<title>Password Recovery for Epic Notes </title>
 					<p className="mt-3 text-body-md text-muted-foreground">
 						No worries, we'll send you reset instructions.
 					</p>
diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index e15d84b72..ec58730c4 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -45,7 +45,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
 	const submission = await parseWithZod(formData, {
-		schema: (intent) =>
+		schema: intent =>
 			LoginFormSchema.transform(async (data, ctx) => {
 				if (intent !== null) return { ...data, session: null }
 
@@ -102,6 +102,7 @@ export default function LoginPage() {
 			<div className="mx-auto w-full max-w-md">
 				<div className="flex flex-col gap-3 text-center">
 					<h1 className="text-h1">Welcome back!</h1>
+					<title>Login to Epic Notes</title>
 					<p className="text-body-md text-muted-foreground">
 						Please enter your details.
 					</p>
@@ -172,7 +173,7 @@ export default function LoginPage() {
 							</div>
 						</Form>
 						<ul className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
-							{providerNames.map((providerName) => (
+							{providerNames.map(providerName => (
 								<li key={providerName}>
 									<ProviderConnectionForm
 										type="Login"
@@ -201,10 +202,6 @@ export default function LoginPage() {
 	)
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Login to Epic Notes' }]
-}
-
 export function ErrorBoundary() {
 	return <GeneralErrorBoundary />
 }
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
index 042476141..72647b5f9 100644
--- a/app/routes/_auth+/onboarding.tsx
+++ b/app/routes/_auth+/onboarding.tsx
@@ -69,7 +69,7 @@ export async function action({ request }: ActionFunctionArgs) {
 	const formData = await request.formData()
 	checkHoneypot(formData)
 	const submission = await parseWithZod(formData, {
-		schema: (intent) =>
+		schema: intent =>
 			SignupFormSchema.superRefine(async (data, ctx) => {
 				const existingUser = await prisma.user.findUnique({
 					where: { username: data.username },
@@ -83,7 +83,7 @@ export async function action({ request }: ActionFunctionArgs) {
 					})
 					return
 				}
-			}).transform(async (data) => {
+			}).transform(async data => {
 				if (intent !== null) return { ...data, session: null }
 
 				const session = await signup({ ...data, email })
@@ -125,10 +125,6 @@ export async function action({ request }: ActionFunctionArgs) {
 	)
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Setup Epic Notes Account' }]
-}
-
 export default function OnboardingRoute() {
 	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
@@ -152,6 +148,7 @@ export default function OnboardingRoute() {
 			<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>
+					<title>Setup Epic Notes Account</title>
 					<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 9cbdc51a2..d70fa4cc5 100644
--- a/app/routes/_auth+/onboarding_.$provider.tsx
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -130,7 +130,7 @@ export async function action({ request, params }: ActionFunctionArgs) {
 				})
 				return
 			}
-		}).transform(async (data) => {
+		}).transform(async data => {
 			const session = await signupWithConnection({
 				...data,
 				email,
@@ -174,10 +174,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
 	)
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Setup Epic Notes Account' }]
-}
-
 export default function OnboardingProviderRoute() {
 	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
@@ -200,6 +196,7 @@ export default function OnboardingProviderRoute() {
 			<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>
+					<title>Setup Epic Notes Account</title>
 					<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 38e4763a2..3bee4dd60 100644
--- a/app/routes/_auth+/reset-password.tsx
+++ b/app/routes/_auth+/reset-password.tsx
@@ -67,10 +67,6 @@ export async function action({ request }: ActionFunctionArgs) {
 	})
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Reset Password | Epic Notes' }]
-}
-
 export default function ResetPasswordPage() {
 	const data = useLoaderData<typeof loader>()
 	const actionData = useActionData<typeof action>()
@@ -90,6 +86,7 @@ export default function ResetPasswordPage() {
 		<div className="container flex flex-col justify-center pb-32 pt-20">
 			<div className="text-center">
 				<h1 className="text-h1">Password Reset</h1>
+				<title>Reset Password | Epic Notes</title>
 				<p className="mt-3 text-body-md text-muted-foreground">
 					Hi, {data.resetPasswordUsername}. No worries. It happens all the time.
 				</p>
diff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx
index 6d475a3d2..2f742c21a 100644
--- a/app/routes/_auth+/signup.tsx
+++ b/app/routes/_auth+/signup.tsx
@@ -116,10 +116,6 @@ export function SignupEmail({
 	)
 }
 
-export const meta: MetaFunction = () => {
-	return [{ title: 'Sign Up | Epic Notes' }]
-}
-
 export default function SignupRoute() {
 	const actionData = useActionData<typeof action>()
 	const isPending = useIsPending()
@@ -141,6 +137,7 @@ export default function SignupRoute() {
 		<div className="container flex flex-col justify-center pb-32 pt-20">
 			<div className="text-center">
 				<h1 className="text-h1">Let's start your journey!</h1>
+				<title>Sign Up | Epic Notes</title>
 				<p className="mt-3 text-body-md text-muted-foreground">
 					Please enter your email.
 				</p>
@@ -171,7 +168,7 @@ export default function SignupRoute() {
 					</StatusButton>
 				</Form>
 				<ul className="mt-5 flex flex-col gap-5 border-b-2 border-t-2 border-border py-3">
-					{providerNames.map((providerName) => (
+					{providerNames.map(providerName => (
 						<li key={providerName}>
 							<ProviderConnectionForm
 								type="Signup"
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
index 85e42f19f..13947b085 100644
--- a/app/routes/_marketing+/index.tsx
+++ b/app/routes/_marketing+/index.tsx
@@ -1,4 +1,3 @@
-import { type MetaFunction } from '@remix-run/node'
 import {
 	Tooltip,
 	TooltipContent,
@@ -8,8 +7,6 @@ import {
 import { cn } from '#app/utils/misc.tsx'
 import { logos } from './logos/logos.ts'
 
-export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]
-
 // Tailwind Grid cell classes lookup
 const columnClasses: Record<(typeof logos)[number]['column'], string> = {
 	1: 'xl:col-start-1',
@@ -30,6 +27,8 @@ const rowClasses: Record<(typeof logos)[number]['row'], string> = {
 export default function Index() {
 	return (
 		<main className="font-poppins grid h-full place-items-center">
+			<title>Epic Notes</title>
+
 			<div className="grid place-items-center px-4 py-16 xl:grid-cols-2 xl:gap-24">
 				<div className="flex max-w-md flex-col items-center text-center xl:order-2 xl:items-start xl:text-left">
 					<a
diff --git a/app/routes/users+/$username.tsx b/app/routes/users+/$username.tsx
index 443133b75..d0648913e 100644
--- a/app/routes/users+/$username.tsx
+++ b/app/routes/users+/$username.tsx
@@ -37,6 +37,11 @@ export default function ProfileRoute() {
 
 	return (
 		<div className="container mb-48 mt-36 flex flex-col items-center justify-center">
+			<title>{userDisplayName} | Epic Notes</title>
+			<meta
+				name="description"
+				content={`Profile of ${userDisplayName} on Epic Notes`}
+			/>
 			<Spacer size="4xs" />
 
 			<div className="container flex flex-col items-center rounded-3xl bg-muted p-12">
@@ -98,17 +103,6 @@ export default function ProfileRoute() {
 	)
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data, params }) => {
-	const displayName = data?.user.name ?? params.username
-	return [
-		{ title: `${displayName} | Epic Notes` },
-		{
-			name: 'description',
-			content: `Profile of ${displayName} on Epic Notes`,
-		},
-	]
-}
-
 export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
diff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx
index 57e0d3e42..969438b8a 100644
--- a/app/routes/users+/$username_+/notes.$noteId.tsx
+++ b/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -6,13 +6,7 @@ import {
 	type LoaderFunctionArgs,
 	type ActionFunctionArgs,
 } from '@remix-run/node'
-import {
-	Form,
-	Link,
-	useActionData,
-	useLoaderData,
-	type MetaFunction,
-} from '@remix-run/react'
+import { Form, Link, useActionData, useLoaderData } from '@remix-run/react'
 import { formatDistanceToNow } from 'date-fns'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
@@ -27,7 +21,7 @@ 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 { useNotesMetadata } from './notes.tsx'
 
 export async function loader({ params }: LoaderFunctionArgs) {
 	const note = await prisma.note.findUnique({
@@ -109,12 +103,23 @@ export default function NoteRoute() {
 	)
 	const displayBar = canDelete || isOwner
 
+	const { displayName } = useNotesMetadata()
+
+	const noteTitle = data?.note.title ?? 'Note'
+	const noteContentsSummary =
+		data && data.note.content.length > 100
+			? data?.note.content.slice(0, 97) + '...'
+			: 'No content'
+
 	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>
+			<title>{`${noteTitle} | ${displayName}'s Notes | Epic Notes`}</title>
+			<meta name="description" content={noteContentsSummary} />
+			<h2 className="mb-2 pt-12 text-h2 lg:mb-6">{noteTitle}</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) => (
+					{data.note.images.map(image => (
 						<li key={image.id}>
 							<a href={getNoteImgSrc(image.id)}>
 								<img
@@ -185,28 +190,6 @@ export function DeleteNote({ id }: { id: string }) {
 	)
 }
 
-export const meta: MetaFunction<
-	typeof loader,
-	{ 'routes/users+/$username_+/notes': typeof notesLoader }
-> = ({ data, params, matches }) => {
-	const notesMatch = matches.find(
-		(m) => m.id === 'routes/users+/$username_+/notes',
-	)
-	const displayName = notesMatch?.data?.owner.name ?? params.username
-	const noteTitle = data?.note.title ?? 'Note'
-	const noteContentsSummary =
-		data && data.note.content.length > 100
-			? data?.note.content.slice(0, 97) + '...'
-			: 'No content'
-	return [
-		{ title: `${noteTitle} | ${displayName}'s Notes | Epic Notes` },
-		{
-			name: 'description',
-			content: noteContentsSummary,
-		},
-	]
-}
-
 export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
diff --git a/app/routes/users+/$username_+/notes.index.tsx b/app/routes/users+/$username_+/notes.index.tsx
index ab0594168..bab855da2 100644
--- a/app/routes/users+/$username_+/notes.index.tsx
+++ b/app/routes/users+/$username_+/notes.index.tsx
@@ -1,29 +1,16 @@
-import { type MetaFunction } from '@remix-run/react'
-import { type loader as notesLoader } from './notes.tsx'
+import { useNotesMetadata } from './notes.tsx'
 
 export default function NotesIndexRoute() {
+	const { displayName, noteCount } = useNotesMetadata()
+	const notesText = noteCount === 1 ? 'note' : 'notes'
 	return (
 		<div className="container pt-12">
+			<title>{`${displayName}'s Notes | Epic Notes`}</title>
+			<meta
+				name="description"
+				content={`Checkout ${displayName}'s ${noteCount} ${notesText} on Epic Notes`}
+			/>
 			<p className="text-body-md">Select a note</p>
 		</div>
 	)
 }
-
-export const meta: MetaFunction<
-	null,
-	{ 'routes/users+/$username_+/notes': typeof notesLoader }
-> = ({ params, matches }) => {
-	const notesMatch = matches.find(
-		(m) => m.id === 'routes/users+/$username_+/notes',
-	)
-	const displayName = notesMatch?.data?.owner.name ?? params.username
-	const noteCount = notesMatch?.data?.owner.notes.length ?? 0
-	const notesText = noteCount === 1 ? 'note' : 'notes'
-	return [
-		{ title: `${displayName}'s Notes | Epic Notes` },
-		{
-			name: 'description',
-			content: `Checkout ${displayName}'s ${noteCount} ${notesText} on Epic Notes`,
-		},
-	]
-}
diff --git a/app/routes/users+/$username_+/notes.tsx b/app/routes/users+/$username_+/notes.tsx
index 58134a381..f3ffda96f 100644
--- a/app/routes/users+/$username_+/notes.tsx
+++ b/app/routes/users+/$username_+/notes.tsx
@@ -1,12 +1,37 @@
 import { invariantResponse } from '@epic-web/invariant'
 import { json, type LoaderFunctionArgs } from '@remix-run/node'
-import { Link, NavLink, Outlet, useLoaderData } from '@remix-run/react'
+import {
+	Link,
+	NavLink,
+	Outlet,
+	useLoaderData,
+	useParams,
+	useRouteLoaderData,
+} from '@remix-run/react'
 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'
 
+export function useNotesMetadata() {
+	const params = useParams()
+	const notesLoaderData = useRouteLoaderData<typeof loader>(
+		'routes/users+/$username_+/notes',
+	)
+
+	if (notesLoaderData === undefined) {
+		throw new Error(
+			'useNoteMetadata must be used in a child of the "routes/users+/$username_+/notes" loader',
+		)
+	}
+
+	return {
+		displayName: notesLoaderData?.owner.name ?? params.username,
+		noteCount: notesLoaderData?.owner.notes.length ?? 0,
+	}
+}
+
 export async function loader({ params }: LoaderFunctionArgs) {
 	const owner = await prisma.user.findFirst({
 		select: {
@@ -62,7 +87,7 @@ export default function NotesRoute() {
 									</NavLink>
 								</li>
 							) : null}
-							{data.owner.notes.map((note) => (
+							{data.owner.notes.map(note => (
 								<li key={note.id} className="p-1 pr-0">
 									<NavLink
 										to={note.id}
diff --git a/package-lock.json b/package-lock.json
index 7cf1bdd01..cd5f8be15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,8 +56,8 @@
         "morgan": "^1.10.0",
         "prisma": "^5.17.0",
         "qrcode": "^1.5.3",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "19.0.0-rc-09111202-20241011",
+        "react-dom": "19.0.0-rc-09111202-20241011",
         "remix-auth": "^3.7.0",
         "remix-auth-github": "^1.7.0",
         "remix-utils": "^7.6.0",
@@ -96,8 +96,8 @@
         "@types/morgan": "^1.9.9",
         "@types/node": "^20.14.11",
         "@types/qrcode": "^1.5.5",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "npm:types-react@rc",
+        "@types/react-dom": "npm:types-react-dom@rc",
         "@types/set-cookie-parser": "^2.4.10",
         "@types/source-map-support": "^0.5.10",
         "@vitejs/plugin-react": "^4.3.1",
@@ -17527,28 +17527,22 @@
       }
     },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
+      "version": "19.0.0-rc-09111202-20241011",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0-rc-09111202-20241011.tgz",
+      "integrity": "sha512-kAz5u4PAPQJI2VJzUrYC/p82CoPcl/KD7i1tHe+nu3RezaAvHGCZY339bLFMBzY91jnJoo07JQZ6UsqivtQ2vQ==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "license": "MIT",
+      "version": "19.0.0-rc-09111202-20241011",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0-rc-09111202-20241011.tgz",
+      "integrity": "sha512-iGX/aJR6YjAHHUtmPNf2YmR8e2pYmlRL28tR/PO6VdIGBqNzzLMNnTEcgjlPPQ0rXBjI0IL7SJnOFYWmk3ZGjw==",
       "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "0.25.0-rc-09111202-20241011"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "19.0.0-rc-09111202-20241011"
       }
     },
     "node_modules/react-is": {
@@ -18373,13 +18367,9 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
+      "version": "0.25.0-rc-09111202-20241011",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0-rc-09111202-20241011.tgz",
+      "integrity": "sha512-XIsordE2/I3s52ujwT5PZIxHMQca8L2ca6Gu3o0YHXDVTYucwXQW6m8/2fVKqfzoJRH1ne7/49M7/5Wick8qOA=="
     },
     "node_modules/selderee": {
       "version": "0.11.0",
diff --git a/package.json b/package.json
index c81d1cab3..024efac37 100644
--- a/package.json
+++ b/package.json
@@ -93,8 +93,8 @@
     "morgan": "^1.10.0",
     "prisma": "^5.17.0",
     "qrcode": "^1.5.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "19.0.0-rc-09111202-20241011",
+    "react-dom": "19.0.0-rc-09111202-20241011",
     "remix-auth": "^3.7.0",
     "remix-auth-github": "^1.7.0",
     "remix-utils": "^7.6.0",
@@ -133,8 +133,8 @@
     "@types/morgan": "^1.9.9",
     "@types/node": "^20.14.11",
     "@types/qrcode": "^1.5.5",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@types/set-cookie-parser": "^2.4.10",
     "@types/source-map-support": "^0.5.10",
     "@vitejs/plugin-react": "^4.3.1",
@@ -157,6 +157,12 @@
     "vite": "^5.3.4",
     "vitest": "^2.0.3"
   },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
+    "react": "19.0.0-rc-09111202-20241011",
+    "react-dom": "19.0.0-rc-09111202-20241011"
+  },
   "engines": {
     "node": "20"
   },