From 43ae8026907b77373bd3f23fa266d7b1a75006fe Mon Sep 17 00:00:00 2001
From: Lewis Blackburn <lewisblackburn10@gmail.com>
Date: Wed, 4 Sep 2024 18:05:47 +0100
Subject: [PATCH] feat: Update UI components and fix formatting issues

---
 app/components/banner.tsx                     |   2 +-
 app/components/chart/bar-chart.tsx            |   9 +-
 app/components/chart/pie.tsx                  |  14 +-
 app/components/footer.tsx                     |   2 +-
 app/components/form/ErrorList.tsx             |  21 +
 app/components/form/Field.tsx                 |  17 +
 app/components/form/MultiSelectField.tsx      | 189 +++++++
 app/components/form/RegularFIeld.tsx          |  34 ++
 app/components/form/conform/Checkbox.tsx      |  39 ++
 app/components/form/conform/CheckboxGroup.tsx |  56 ++
 app/components/form/conform/CountryPicker.tsx | 101 ++++
 app/components/form/conform/DatePicker.tsx    |  60 +++
 .../form/conform/DepartmentPicker.tsx         | 102 ++++
 app/components/form/conform/Input.tsx         |  19 +
 app/components/form/conform/InputOTP.tsx      |  66 +++
 app/components/form/conform/JobPicker.tsx     |  96 ++++
 .../form/conform/LanguagePicker.tsx           | 101 ++++
 app/components/form/conform/MultiSelect.tsx   |   0
 app/components/form/conform/RadioGroup.tsx    |  51 ++
 app/components/form/conform/SearchSelect.tsx  | 124 +++++
 app/components/form/conform/Select.tsx        |  71 +++
 app/components/form/conform/Slider.tsx        |  51 ++
 app/components/form/conform/Switch.tsx        |  35 ++
 app/components/form/conform/Textarea.tsx      |  12 +
 app/components/form/conform/ToggleGroup.tsx   |  48 ++
 app/components/forms.tsx                      | 204 -------
 app/components/image.tsx                      |  54 ++
 app/components/infinite-scroll.tsx            |  46 ++
 app/components/navigation-bar.tsx             |  10 +-
 app/components/pagination-bar.tsx             |  82 +++
 .../table/data-table-pagination.tsx           |   4 +-
 app/components/ui/avatar.tsx                  |   2 +-
 app/components/ui/badge.tsx                   |   2 +-
 app/components/ui/calendar.tsx                |  65 +++
 app/components/ui/card.tsx                    |   2 +-
 app/components/ui/command.tsx                 | 153 ++++++
 app/components/ui/dialog.tsx                  | 119 ++++
 app/components/ui/pagination.tsx              | 117 ++++
 app/components/ui/popover.tsx                 |   2 +-
 app/components/ui/progress.tsx                |   2 +-
 app/components/ui/radio-group.tsx             |  41 ++
 app/components/ui/scroll-area.tsx             |   2 +-
 app/components/ui/sheet.tsx                   |   2 +-
 app/components/ui/skeleton.tsx                |  15 +
 app/components/ui/slider.tsx                  |  25 +
 app/components/ui/switch.tsx                  |  26 +
 app/components/ui/table.tsx                   |   2 +-
 app/routes/_auth+/forgot-password.tsx         |  31 +-
 app/routes/_auth+/login.tsx                   |  77 +--
 app/routes/_auth+/onboarding.tsx              | 128 +++--
 app/routes/_auth+/onboarding_.$provider.tsx   |  85 +--
 app/routes/_auth+/reset-password.tsx          |  54 +-
 app/routes/_auth+/signup.tsx                  |  36 +-
 app/routes/_auth+/verify.tsx                  |  30 +-
 app/routes/_home+/index.tsx                   |   2 +-
 app/routes/_home.tsx                          |   5 +-
 app/routes/admin+/cache.tsx                   |   6 +-
 .../changes+/edits-table/columns.tsx          |   2 +-
 .../dashboard+/changes+/edits-table/data.tsx  |   2 +-
 app/routes/dashboard+/charts/BarChart.tsx     |   5 +-
 app/routes/dashboard+/charts/GenreChart.tsx   |   2 +-
 app/routes/dashboard+/films+/index.tsx        |  52 +-
 app/routes/dashboard.tsx                      |   6 +-
 app/routes/resources+/notifications.tsx       |   5 +-
 app/routes/settings+/profile.change-email.tsx |  26 +-
 app/routes/settings+/profile.index.tsx        |  34 +-
 app/routes/settings+/profile.password.tsx     |  69 ++-
 .../settings+/profile.password_.create.tsx    |  48 +-
 app/routes/settings+/profile.photo.tsx        |   2 +-
 .../settings+/profile.two-factor.verify.tsx   |  32 +-
 .../users+/$username_+/__note-editor.tsx      |  34 +-
 .../users+/$username_+/notes.$noteId.tsx      |   2 +-
 app/routes/users+/index.tsx                   |   2 +-
 app/utils/auth.server.ts                      |   2 +-
 app/utils/constants.ts                        |   2 +-
 other/svg-icons/calendar.svg                  |  13 +
 package-lock.json                             | 507 ++++++++++++++++++
 package.json                                  |   6 +
 prisma/seed.ts                                |   2 +-
 79 files changed, 3010 insertions(+), 596 deletions(-)
 create mode 100644 app/components/form/ErrorList.tsx
 create mode 100644 app/components/form/Field.tsx
 create mode 100644 app/components/form/MultiSelectField.tsx
 create mode 100644 app/components/form/RegularFIeld.tsx
 create mode 100644 app/components/form/conform/Checkbox.tsx
 create mode 100644 app/components/form/conform/CheckboxGroup.tsx
 create mode 100644 app/components/form/conform/CountryPicker.tsx
 create mode 100644 app/components/form/conform/DatePicker.tsx
 create mode 100644 app/components/form/conform/DepartmentPicker.tsx
 create mode 100644 app/components/form/conform/Input.tsx
 create mode 100644 app/components/form/conform/InputOTP.tsx
 create mode 100644 app/components/form/conform/JobPicker.tsx
 create mode 100644 app/components/form/conform/LanguagePicker.tsx
 create mode 100644 app/components/form/conform/MultiSelect.tsx
 create mode 100644 app/components/form/conform/RadioGroup.tsx
 create mode 100644 app/components/form/conform/SearchSelect.tsx
 create mode 100644 app/components/form/conform/Select.tsx
 create mode 100644 app/components/form/conform/Slider.tsx
 create mode 100644 app/components/form/conform/Switch.tsx
 create mode 100644 app/components/form/conform/Textarea.tsx
 create mode 100644 app/components/form/conform/ToggleGroup.tsx
 delete mode 100644 app/components/forms.tsx
 create mode 100644 app/components/image.tsx
 create mode 100644 app/components/infinite-scroll.tsx
 create mode 100644 app/components/pagination-bar.tsx
 create mode 100644 app/components/ui/calendar.tsx
 create mode 100644 app/components/ui/command.tsx
 create mode 100644 app/components/ui/dialog.tsx
 create mode 100644 app/components/ui/pagination.tsx
 create mode 100644 app/components/ui/radio-group.tsx
 create mode 100644 app/components/ui/skeleton.tsx
 create mode 100644 app/components/ui/slider.tsx
 create mode 100644 app/components/ui/switch.tsx
 create mode 100644 other/svg-icons/calendar.svg

diff --git a/app/components/banner.tsx b/app/components/banner.tsx
index 8b933f2..f14cf8e 100644
--- a/app/components/banner.tsx
+++ b/app/components/banner.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@remix-run/react'
 import { useEffect, useState } from 'react'
 import { Icon } from './ui/icon'
-import { Link } from '@remix-run/react'
 
 export default function Banner() {
 	// TODO: This should be set back to false if there is a new feature announcement
diff --git a/app/components/chart/bar-chart.tsx b/app/components/chart/bar-chart.tsx
index cc05632..0cd05af 100644
--- a/app/components/chart/bar-chart.tsx
+++ b/app/components/chart/bar-chart.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarChart as ReBarChart, XAxis, Bar, BarProps } from 'recharts'
+import { BarChart as ReBarChart, XAxis, Bar } from 'recharts'
 import {
 	Card,
 	CardHeader,
@@ -7,12 +7,7 @@ import {
 	CardDescription,
 	CardContent,
 } from '../ui/card'
-import {
-	ChartConfig,
-	ChartContainer,
-	ChartTooltip,
-	ChartTooltipContent,
-} from '../ui/chart'
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from '../ui/chart'
 
 interface ChartData {
 	[key: string]: string | number
diff --git a/app/components/chart/pie.tsx b/app/components/chart/pie.tsx
index 7ddea93..8f0980b 100644
--- a/app/components/chart/pie.tsx
+++ b/app/components/chart/pie.tsx
@@ -1,20 +1,12 @@
 import React from 'react'
+import { Label, Pie, PieChart as RePieChart } from 'recharts'
+import { Card, CardContent } from '../ui/card'
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from '../ui/card'
-import {
-	ChartConfig,
+	type ChartConfig,
 	ChartContainer,
 	ChartTooltip,
 	ChartTooltipContent,
 } from '../ui/chart'
-import { Label, Pie, PieChart as RePieChart } from 'recharts'
-import { Icon } from '../ui/icon'
 
 interface ChartData {
 	[key: string]: string | number
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
index 05f76db..76a1525 100644
--- a/app/components/footer.tsx
+++ b/app/components/footer.tsx
@@ -2,8 +2,8 @@
 import { Form, Link } from '@remix-run/react'
 import { type SVGProps } from 'react'
 import { Icon } from './ui/icon'
-import { Label } from './ui/label'
 import { Input } from './ui/input'
+import { Label } from './ui/label'
 
 // Define the navigation types
 type NavigationItem = {
diff --git a/app/components/form/ErrorList.tsx b/app/components/form/ErrorList.tsx
new file mode 100644
index 0000000..33b4b9e
--- /dev/null
+++ b/app/components/form/ErrorList.tsx
@@ -0,0 +1,21 @@
+import { FieldError } from './Field'
+
+export type ListOfErrors = Array<string | null | undefined> | null | undefined
+
+export function ErrorList({
+	id,
+	errors,
+}: {
+	errors?: ListOfErrors
+	id?: string
+}) {
+	const errorsToRender = errors?.filter(Boolean)
+	if (!errorsToRender?.length) return null
+	return (
+		<ul id={id} className="flex flex-col gap-1">
+			{errorsToRender.map((e) => (
+				<FieldError key={e}>{e}</FieldError>
+			))}
+		</ul>
+	)
+}
diff --git a/app/components/form/Field.tsx b/app/components/form/Field.tsx
new file mode 100644
index 0000000..3e63ccd
--- /dev/null
+++ b/app/components/form/Field.tsx
@@ -0,0 +1,17 @@
+import { cn } from '#app/utils/misc.js'
+
+export const Field = ({
+	children,
+	className,
+}: {
+	children: React.ReactNode
+	className?: string
+}) => {
+	return (
+		<div className={cn('flex flex-col gap-2 pb-6', className)}>{children}</div>
+	)
+}
+
+export const FieldError = ({ children }: { children: React.ReactNode }) => {
+	return <li className="text-[10px] text-foreground-destructive">{children}</li>
+}
diff --git a/app/components/form/MultiSelectField.tsx b/app/components/form/MultiSelectField.tsx
new file mode 100644
index 0000000..e2d06f8
--- /dev/null
+++ b/app/components/form/MultiSelectField.tsx
@@ -0,0 +1,189 @@
+import { useInputControl } from '@conform-to/react'
+import type * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import React, { useId } from 'react'
+import { cn } from '#app/utils/misc.js'
+import { Badge } from '../ui/badge'
+import { Button } from '../ui/button'
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from '../ui/command'
+import { Icon } from '../ui/icon'
+import { Label } from '../ui/label'
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover'
+import { ErrorList, type ListOfErrors } from './ErrorList'
+
+export type OptionType = {
+	label: string
+	value: string
+}
+
+export type PopoverProps = Omit<
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>,
+	'type'
+> & {
+	type?: string
+}
+
+export function MultiSelectField({
+	labelProps,
+	buttonProps,
+	options,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	buttonProps: PopoverProps & {
+		name: string
+		form: string
+		value?: string
+	}
+	options: OptionType[]
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const [open, setOpen] = React.useState(false)
+	const [selected, setSelected] = React.useState<string[]>(
+		// @ts-expect-error fix later
+		buttonProps.defaultValue ?? [],
+	)
+
+	const { key, name, ...selectProps } = buttonProps
+	const fallbackId = useId()
+	const input = useInputControl({
+		key,
+		name: buttonProps.name,
+		formId: buttonProps.form,
+		initialValue: buttonProps.defaultValue?.toString(),
+	})
+	const id = buttonProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+
+	const handleUnselect = (item: string) => {
+		setSelected(selected.filter((i) => i !== item))
+	}
+
+	return (
+		<div className={cn('flex flex-col space-y-2', className)}>
+			<input
+				name={buttonProps.name}
+				// Hack as readOnly prevents errors from being displayed
+				onChange={() => {}}
+				value={JSON.stringify(selected)}
+				className="hidden"
+			/>
+			<Label htmlFor={id} {...labelProps} />
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger
+					{...selectProps}
+					id={id}
+					aria-invalid={errorId ? true : undefined}
+					aria-describedby={errorId}
+					onFocus={(event) => {
+						input.focus()
+						buttonProps.onFocus?.(event)
+					}}
+					onBlur={(event) => {
+						input.blur()
+						buttonProps.onBlur?.(event)
+					}}
+					type="button"
+					asChild
+				>
+					<Button
+						variant="outline"
+						role="combobox"
+						aria-expanded={open}
+						className="min-w-[300px] justify-between whitespace-nowrap aria-[invalid]:border-input-invalid"
+					>
+						{selected.length < 1 &&
+							`Select ${labelProps.children?.toString().toLowerCase()}...`}
+						<div className="flex flex-wrap gap-1">
+							{selected.map((item) => (
+								<Badge
+									variant="secondary"
+									key={item}
+									className=""
+									onClick={() => handleUnselect(item)}
+								>
+									{options.find((option) => option.value === item)?.label ??
+										`Select ${labelProps.children
+											?.toString()
+											.toLowerCase()}...`}
+									<button
+										className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2"
+										onKeyDown={(e) => {
+											if (e.key === 'Enter') {
+												handleUnselect(item)
+											}
+										}}
+										onMouseDown={(e) => {
+											e.preventDefault()
+											e.stopPropagation()
+										}}
+										onClick={() => handleUnselect(item)}
+									>
+										<Icon
+											name="cross-1"
+											className="h-3 w-3 text-muted-foreground hover:text-foreground"
+										/>
+									</button>
+								</Badge>
+							))}
+						</div>
+						<Icon name="caret-sort" className="h-4 w-4 shrink-0 opacity-50" />
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-full p-0" align="start">
+					<Command>
+						<CommandInput
+							placeholder={`Search ${labelProps.children
+								?.toString()
+								.toLowerCase()}...`}
+							className="h-9"
+						/>
+						<CommandList>
+							<CommandEmpty>
+								No {labelProps.children?.toString().toLowerCase()} found.
+							</CommandEmpty>
+							<CommandGroup>
+								{options.map((option) => (
+									<CommandItem
+										key={option.value}
+										onSelect={() => {
+											setSelected(
+												selected.includes(option.value)
+													? selected.filter((item) => item !== option.value)
+													: [...selected, option.value],
+											)
+											setOpen(true)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												selected.includes(option.value)
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{option.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+			<div className="px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
diff --git a/app/components/form/RegularFIeld.tsx b/app/components/form/RegularFIeld.tsx
new file mode 100644
index 0000000..f1bdef8
--- /dev/null
+++ b/app/components/form/RegularFIeld.tsx
@@ -0,0 +1,34 @@
+import { useId } from 'react'
+import { Input } from '../ui/input'
+import { Label } from '../ui/label'
+import { ErrorList, type ListOfErrors } from './ErrorList'
+
+export function RegularField({
+	labelProps,
+	inputProps,
+	errors,
+	className,
+}: {
+	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+	inputProps: React.InputHTMLAttributes<HTMLInputElement>
+	errors?: ListOfErrors
+	className?: string
+}) {
+	const fallbackId = useId()
+	const id = inputProps.id ?? fallbackId
+	const errorId = errors?.length ? `${id}-error` : undefined
+	return (
+		<div className={className}>
+			<Label htmlFor={id} {...labelProps} />
+			<Input
+				id={id}
+				aria-invalid={errorId ? true : undefined}
+				aria-describedby={errorId}
+				{...inputProps}
+			/>
+			<div className="min-h-[32px] px-4 pb-3 pt-1">
+				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+			</div>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/Checkbox.tsx b/app/components/form/conform/Checkbox.tsx
new file mode 100644
index 0000000..7a5e75b
--- /dev/null
+++ b/app/components/form/conform/Checkbox.tsx
@@ -0,0 +1,39 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import { useRef, type ElementRef } from 'react'
+import { Checkbox } from '../../ui/checkbox'
+
+export function CheckboxConform({
+	meta,
+}: {
+	meta: FieldMetadata<string | boolean | undefined>
+}) {
+	const checkboxRef = useRef<ElementRef<typeof Checkbox>>(null)
+	const control = useControl(meta)
+
+	return (
+		<>
+			<input
+				className="sr-only"
+				aria-hidden
+				ref={control.register}
+				name={meta.name}
+				tabIndex={-1}
+				defaultValue={meta.initialValue}
+				onFocus={() => checkboxRef.current?.focus()}
+			/>
+			<Checkbox
+				ref={checkboxRef}
+				id={meta.id}
+				checked={control.value === 'on'}
+				onCheckedChange={(checked) => {
+					control.change(checked ? 'on' : '')
+				}}
+				onBlur={control.blur}
+				className="focus:ring-2 focus:ring-stone-950 focus:ring-offset-2"
+			/>
+		</>
+	)
+}
diff --git a/app/components/form/conform/CheckboxGroup.tsx b/app/components/form/conform/CheckboxGroup.tsx
new file mode 100644
index 0000000..0f06253
--- /dev/null
+++ b/app/components/form/conform/CheckboxGroup.tsx
@@ -0,0 +1,56 @@
+import {
+	unstable_Control as Control,
+	type FieldMetadata,
+} from '@conform-to/react'
+import { Checkbox } from '../../ui/checkbox'
+
+export function CheckboxGroupConform({
+	meta,
+	items,
+}: {
+	meta: FieldMetadata<string[]>
+	items: Array<{ name: string; value: string }>
+}) {
+	const initialValue =
+		typeof meta.initialValue === 'string'
+			? [meta.initialValue]
+			: (meta.initialValue ?? [])
+
+	return (
+		<>
+			{items.map((item) => (
+				<Control
+					key={item.value}
+					meta={{
+						key: meta.key,
+						initialValue: initialValue.find((v) => v == item.value)
+							? [item.value]
+							: '',
+					}}
+					render={(control) => (
+						<div
+							className="flex items-center gap-2"
+							ref={(element) => {
+								control.register(element?.querySelector('input'))
+							}}
+						>
+							<Checkbox
+								type="button"
+								id={`${meta.name}-${item.value}`}
+								name={meta.name}
+								value={item.value}
+								checked={control.value == item.value}
+								onCheckedChange={(value) =>
+									control.change(value.valueOf() ? item.value : '')
+								}
+								onBlur={control.blur}
+								className="focus:ring-2 focus:ring-stone-950 focus:ring-offset-2"
+							/>
+							<label htmlFor={`${meta.name}-${item.value}`}>{item.name}</label>
+						</div>
+					)}
+				/>
+			))}
+		</>
+	)
+}
diff --git a/app/components/form/conform/CountryPicker.tsx b/app/components/form/conform/CountryPicker.tsx
new file mode 100644
index 0000000..b09385e
--- /dev/null
+++ b/app/components/form/conform/CountryPicker.tsx
@@ -0,0 +1,101 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import React from 'react'
+import { COUNTRIES } from '#app/utils/constants.js'
+import { cn } from '#app/utils/misc.js'
+import { Button } from '../../ui/button'
+import {
+	Command,
+	CommandInput,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from '../../ui/command'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+const countries = COUNTRIES.map((country) => ({
+	label: country.name,
+	value: country.name,
+}))
+
+export function CountryPickerConform({
+	meta,
+}: {
+	meta: FieldMetadata<string>
+}) {
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant="outline"
+						role="combobox"
+						className={cn(
+							'w-[250px] justify-between',
+							!control.value && 'text-muted-foreground',
+							'focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+						)}
+					>
+						{control.value
+							? countries.find((country) => country.value === control.value)
+									?.label
+							: 'Select a country'}
+						<Icon
+							name="caret-sort"
+							className="ml-2 h-4 w-4 shrink-0 opacity-50"
+						/>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[250px] p-0">
+					<Command>
+						<CommandInput placeholder="Search country..." />
+						<CommandList>
+							<CommandEmpty>No country found.</CommandEmpty>
+							<CommandGroup>
+								{countries.map((country) => (
+									<CommandItem
+										value={country.label}
+										key={country.value}
+										onSelect={() => {
+											control.change(country.value)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												country.value === control.value
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{country.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/DatePicker.tsx b/app/components/form/conform/DatePicker.tsx
new file mode 100644
index 0000000..4767c13
--- /dev/null
+++ b/app/components/form/conform/DatePicker.tsx
@@ -0,0 +1,60 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import { format } from 'date-fns'
+import * as React from 'react'
+import { cn } from '#app/utils/misc'
+import { Button } from '../../ui/button'
+import { Calendar } from '../../ui/calendar'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+export function DatePickerConform({ meta }: { meta: FieldMetadata<Date> }) {
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={
+					meta.initialValue ? new Date(meta.initialValue).toISOString() : ''
+				}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant={'outline'}
+						className={cn(
+							'w-[250px] justify-start text-left font-normal focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+							!control.value && 'text-muted-foreground',
+						)}
+					>
+						<Icon name="calendar" className="mr-2 h-4 w-4" />
+						{control.value ? (
+							format(control.value, 'PPP')
+						) : (
+							<span>Pick a date</span>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto p-0">
+					<Calendar
+						mode="single"
+						selected={new Date(control.value ?? '')}
+						onSelect={(value) => control.change(value?.toISOString() ?? '')}
+					/>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/DepartmentPicker.tsx b/app/components/form/conform/DepartmentPicker.tsx
new file mode 100644
index 0000000..7326e0b
--- /dev/null
+++ b/app/components/form/conform/DepartmentPicker.tsx
@@ -0,0 +1,102 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import React from 'react'
+import { ROLES } from '#app/utils/constants.js'
+import { cn } from '#app/utils/misc.js'
+import { Button } from '../../ui/button'
+import {
+	Command,
+	CommandInput,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from '../../ui/command'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+const departments = ROLES.map((role) => ({
+	label: role.department,
+	value: role.department,
+}))
+
+export function DepartmentPickerConform({
+	meta,
+}: {
+	meta: FieldMetadata<string>
+}) {
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant="outline"
+						role="combobox"
+						className={cn(
+							'w-[250px] justify-between',
+							!control.value && 'text-muted-foreground',
+							'focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+						)}
+					>
+						{control.value
+							? departments.find(
+									(department) => department.value === control.value,
+								)?.label
+							: 'Select a deparment'}
+						<Icon
+							name="caret-sort"
+							className="ml-2 h-4 w-4 shrink-0 opacity-50"
+						/>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[250px] p-0">
+					<Command>
+						<CommandInput placeholder="Search department..." />
+						<CommandList>
+							<CommandEmpty>No department found.</CommandEmpty>
+							<CommandGroup>
+								{departments.map((department) => (
+									<CommandItem
+										value={department.label}
+										key={department.value}
+										onSelect={() => {
+											control.change(department.value)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												department.value === control.value
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{department.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/Input.tsx b/app/components/form/conform/Input.tsx
new file mode 100644
index 0000000..396e3ab
--- /dev/null
+++ b/app/components/form/conform/Input.tsx
@@ -0,0 +1,19 @@
+import { type FieldMetadata, getInputProps } from '@conform-to/react'
+import { type ComponentProps } from 'react'
+import { Input } from '../../ui/input'
+
+export const InputConform = ({
+	meta,
+	type,
+	...props
+}: {
+	meta: FieldMetadata<string | number | null>
+	type: Parameters<typeof getInputProps>[1]['type']
+} & ComponentProps<typeof Input>) => {
+	return (
+		<Input
+			{...getInputProps(meta, { type, ariaAttributes: true })}
+			{...props}
+		/>
+	)
+}
diff --git a/app/components/form/conform/InputOTP.tsx b/app/components/form/conform/InputOTP.tsx
new file mode 100644
index 0000000..6eb3b84
--- /dev/null
+++ b/app/components/form/conform/InputOTP.tsx
@@ -0,0 +1,66 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
+import { type ElementRef, useRef, type ComponentProps } from 'react'
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSlot,
+} from '#app/components/ui/input-otp.js'
+
+export function InputOTPConform({
+	meta,
+	length = 6,
+	pattern = REGEXP_ONLY_DIGITS_AND_CHARS,
+	autoCapitalise,
+	...props
+}: {
+	meta: FieldMetadata<string>
+	length: number
+	pattern?: string
+	autoCapitalise?: boolean
+} & Partial<ComponentProps<typeof InputOTP>>) {
+	const inputOTPRef = useRef<ElementRef<typeof InputOTP>>(null)
+	const control = useControl(meta)
+
+	const capitaliseInput = (value: string) => {
+		return value.toUpperCase()
+	}
+
+	return (
+		<>
+			<input
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+				className="sr-only"
+				onFocus={() => {
+					inputOTPRef.current?.focus()
+				}}
+			/>
+			<InputOTP
+				{...props}
+				name={`${meta.name}-inner`}
+				ref={inputOTPRef}
+				value={control.value ?? ''}
+				onChange={(newValue: string) => {
+					if (!autoCapitalise) return control.change(newValue)
+					return control.change(capitaliseInput(newValue))
+				}}
+				onBlur={control.blur}
+				maxLength={6}
+				pattern={pattern}
+				render={undefined}
+			>
+				<InputOTPGroup>
+					{new Array(length).fill(0).map((_, index) => (
+						<InputOTPSlot key={index} index={index} />
+					))}
+				</InputOTPGroup>
+			</InputOTP>
+		</>
+	)
+}
diff --git a/app/components/form/conform/JobPicker.tsx b/app/components/form/conform/JobPicker.tsx
new file mode 100644
index 0000000..60475ba
--- /dev/null
+++ b/app/components/form/conform/JobPicker.tsx
@@ -0,0 +1,96 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import React from 'react'
+import { getAllJobs } from '#app/utils/constants.js'
+import { cn } from '#app/utils/misc.js'
+import { Button } from '../../ui/button'
+import {
+	Command,
+	CommandInput,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from '../../ui/command'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+const jobs = getAllJobs().map((job) => ({
+	label: job,
+	value: job,
+}))
+
+export function JobPickerConform({ meta }: { meta: FieldMetadata<string> }) {
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant="outline"
+						role="combobox"
+						className={cn(
+							'w-[250px] justify-between',
+							!control.value && 'text-muted-foreground',
+							'focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+						)}
+					>
+						{control.value
+							? jobs.find((job) => job.value === control.value)?.label
+							: 'Select a job'}
+						<Icon
+							name="caret-sort"
+							className="ml-2 h-4 w-4 shrink-0 opacity-50"
+						/>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[250px] p-0">
+					<Command>
+						<CommandInput placeholder="Search job..." />
+						<CommandList>
+							<CommandEmpty>No job found.</CommandEmpty>
+							<CommandGroup>
+								{jobs.map((job) => (
+									<CommandItem
+										value={job.label}
+										key={job.value}
+										onSelect={() => {
+											control.change(job.value)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												job.value === control.value
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{job.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/LanguagePicker.tsx b/app/components/form/conform/LanguagePicker.tsx
new file mode 100644
index 0000000..dcb02f9
--- /dev/null
+++ b/app/components/form/conform/LanguagePicker.tsx
@@ -0,0 +1,101 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import React from 'react'
+import { LANGUAGES } from '#app/utils/constants.js'
+import { cn } from '#app/utils/misc.js'
+import { Button } from '../../ui/button'
+import {
+	Command,
+	CommandInput,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from '../../ui/command'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+const langauges = LANGUAGES.map((language) => ({
+	label: language.name,
+	value: language.name,
+}))
+
+export function LanguagePickerConform({
+	meta,
+}: {
+	meta: FieldMetadata<string>
+}) {
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant="outline"
+						role="combobox"
+						className={cn(
+							'w-[250px] justify-between',
+							!control.value && 'text-muted-foreground',
+							'focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+						)}
+					>
+						{control.value
+							? langauges.find((language) => language.value === control.value)
+									?.label
+							: 'Select language'}
+						<Icon
+							name="caret-sort"
+							className="ml-2 h-4 w-4 shrink-0 opacity-50"
+						/>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[250px] p-0">
+					<Command>
+						<CommandInput placeholder="Search language..." />
+						<CommandList>
+							<CommandEmpty>No language found.</CommandEmpty>
+							<CommandGroup>
+								{langauges.map((language) => (
+									<CommandItem
+										value={language.label}
+										key={language.value}
+										onSelect={() => {
+											control.change(language.value)
+										}}
+									>
+										<Icon
+											name="check"
+											className={cn(
+												'mr-2 h-4 w-4',
+												language.value === control.value
+													? 'opacity-100'
+													: 'opacity-0',
+											)}
+										/>
+										{language.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/MultiSelect.tsx b/app/components/form/conform/MultiSelect.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/components/form/conform/RadioGroup.tsx b/app/components/form/conform/RadioGroup.tsx
new file mode 100644
index 0000000..3aa1a5e
--- /dev/null
+++ b/app/components/form/conform/RadioGroup.tsx
@@ -0,0 +1,51 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import { type ElementRef, useRef } from 'react'
+import { RadioGroup, RadioGroupItem } from '../../ui/radio-group'
+
+export function RadioGroupConform({
+	meta,
+	items,
+}: {
+	meta: FieldMetadata<string>
+	items: Array<{ value: string; label: string }>
+}) {
+	const radioGroupRef = useRef<ElementRef<typeof RadioGroup>>(null)
+	const control = useControl(meta)
+
+	return (
+		<>
+			<input
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				tabIndex={-1}
+				className="sr-only"
+				onFocus={() => {
+					radioGroupRef.current?.focus()
+				}}
+			/>
+			<RadioGroup
+				ref={radioGroupRef}
+				className="flex items-center gap-4"
+				value={control.value ?? ''}
+				onValueChange={control.change}
+				onBlur={control.blur}
+			>
+				{items.map((item) => {
+					return (
+						<div className="flex items-center gap-2" key={item.value}>
+							<RadioGroupItem
+								value={item.value}
+								id={`${meta.id}-${item.value}`}
+							/>
+							<label htmlFor={`${meta.id}-${item.value}`}>{item.label}</label>
+						</div>
+					)
+				})}
+			</RadioGroup>
+		</>
+	)
+}
diff --git a/app/components/form/conform/SearchSelect.tsx b/app/components/form/conform/SearchSelect.tsx
new file mode 100644
index 0000000..436cb56
--- /dev/null
+++ b/app/components/form/conform/SearchSelect.tsx
@@ -0,0 +1,124 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import React, { type FormEventHandler } from 'react'
+import Image from '#app/components/image.js'
+import { cn } from '#app/utils/misc.js'
+import { Button } from '../../ui/button'
+import {
+	Command,
+	CommandInput,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandList,
+} from '../../ui/command'
+import { Icon } from '../../ui/icon'
+import { Popover, PopoverTrigger, PopoverContent } from '../../ui/popover'
+
+export function SearchSelectConform({
+	meta,
+	items,
+	onInput,
+}: {
+	meta: FieldMetadata<string>
+	items: { label: string; value: string; image?: string | null }[]
+	onInput: FormEventHandler<HTMLInputElement>
+}) {
+	const [selectedItem, setSelectedItem] = React.useState<{
+		label: string
+		value: string
+	}>()
+	const triggerRef = React.useRef<HTMLButtonElement>(null)
+	const control = useControl(meta)
+
+	// if selectedItem and is not already in items, add it
+	if (
+		selectedItem &&
+		!items.find((item) => item.value === selectedItem.value)
+	) {
+		items.push(selectedItem)
+	}
+
+	return (
+		<div>
+			<input
+				className="sr-only"
+				aria-hidden
+				tabIndex={-1}
+				ref={control.register}
+				name={meta.name}
+				defaultValue={meta.initialValue}
+				onFocus={() => {
+					triggerRef.current?.focus()
+				}}
+			/>
+			<Popover>
+				<PopoverTrigger asChild>
+					<Button
+						ref={triggerRef}
+						variant="outline"
+						role="combobox"
+						className={cn(
+							'w-[300px] justify-between',
+							!control.value && 'text-muted-foreground',
+							'focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+						)}
+					>
+						{control.value
+							? items.find((item) => item.value === control.value)?.label
+							: 'Select item'}
+						<Icon
+							name="caret-sort"
+							className="ml-2 h-4 w-4 shrink-0 opacity-50"
+						/>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-[300px] p-0">
+					<Command>
+						<CommandInput
+							placeholder="Search item..."
+							onInput={onInput}
+							onFocus={onInput}
+						/>
+						<CommandList>
+							<CommandEmpty>No item found.</CommandEmpty>
+							<CommandGroup>
+								{items.map((item) => (
+									<CommandItem
+										value={item.label}
+										key={item.value}
+										onSelect={() => {
+											control.change(item.value)
+											setSelectedItem(item)
+										}}
+									>
+										{item.image ? (
+											<Image
+												src={item.image ?? ''}
+												alt={item.value}
+												className="mr-3 aspect-square h-12 w-12 rounded-md"
+											/>
+										) : (
+											<Icon
+												name="check"
+												className={cn(
+													'mr-2 h-4 w-4',
+													item.value === control.value
+														? 'opacity-100'
+														: 'opacity-0',
+												)}
+											/>
+										)}
+										{item.label}
+									</CommandItem>
+								))}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
diff --git a/app/components/form/conform/Select.tsx b/app/components/form/conform/Select.tsx
new file mode 100644
index 0000000..91a755e
--- /dev/null
+++ b/app/components/form/conform/Select.tsx
@@ -0,0 +1,71 @@
+import {
+	unstable_useControl as useControl,
+	type FieldMetadata,
+} from '@conform-to/react'
+import { useRef, type ElementRef, type ComponentProps } from 'react'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '../../ui/select'
+
+export const SelectConform = ({
+	meta,
+	items,
+	placeholder,
+	...props
+}: {
+	meta: FieldMetadata<string>
+	items: Array<{ name: string; value: string }>
+	placeholder: string
+} & ComponentProps<typeof Select>) => {
+	const selectRef = useRef<ElementRef<typeof SelectTrigger>>(null)
+	const control = useControl(meta)
+
+	return (
+		<>
+			<select
+				name={meta.name}
+				defaultValue={meta.initialValue ?? ''}
+				className="sr-only"
+				ref={control.register}
+				aria-hidden
+				tabIndex={-1}
+				onFocus={() => {
+					selectRef.current?.focus()
+				}}
+			>
+				<option value="" />
+				{items.map((option) => (
+					<option key={option.value} value={option.value} />
+				))}
+			</select>
+
+			<Select
+				{...props}
+				value={control.value ?? ''}
+				onValueChange={control.change}
+				onOpenChange={(open) => {
+					if (!open) {
+						control.blur()
+					}
+				}}
+			>
+				<SelectTrigger className="w-[250px]">
+					<SelectValue placeholder={placeholder} />
+				</SelectTrigger>
+				<SelectContent>
+					{items.map((item) => {
+						return (
+							<SelectItem key={item.value} value={item.value}>
+								{item.name}
+							</SelectItem>
+						)
+					})}
+				</SelectContent>
+			</Select>
+		</>
+	)
+}
diff --git a/app/components/form/conform/Slider.tsx b/app/components/form/conform/Slider.tsx
new file mode 100644
index 0000000..1d1bbe5
--- /dev/null
+++ b/app/components/form/conform/Slider.tsx
@@ -0,0 +1,51 @@
+import {
+	type FieldMetadata,
+	unstable_useControl as useControl,
+} from '@conform-to/react'
+import { type ComponentProps, type ElementRef, useRef } from 'react'
+import { Slider } from '../../ui/slider'
+
+export function SliderConform({
+	meta,
+	...props
+}: {
+	meta: FieldMetadata<number>
+	ariaLabel?: string
+} & ComponentProps<typeof Slider>) {
+	const sliderRef = useRef<ElementRef<typeof Slider>>(null)
+	const control = useControl(meta)
+
+	return (
+		<>
+			<input
+				name={meta.name}
+				ref={control.register}
+				defaultValue={meta.initialValue}
+				className="sr-only"
+				tabIndex={-1}
+				onFocus={() => {
+					const sliderSpan = sliderRef.current?.querySelector('[role="slider"]')
+					if (sliderSpan instanceof HTMLElement) {
+						sliderSpan.focus()
+					}
+				}}
+			/>
+			<div className="flex items-center gap-4">
+				<Slider
+					{...props}
+					ref={sliderRef}
+					aria-invalid={!!meta.errors}
+					value={[parseFloat(control.value ?? '0')]}
+					onValueChange={(value) => {
+						if (value[0] !== undefined) {
+							control.change(value[0].toString())
+						}
+					}}
+					onBlur={control.blur}
+					className="w-[280px]"
+				/>
+				<div>{control.value}</div>
+			</div>
+		</>
+	)
+}
diff --git a/app/components/form/conform/Switch.tsx b/app/components/form/conform/Switch.tsx
new file mode 100644
index 0000000..b5ccda6
--- /dev/null
+++ b/app/components/form/conform/Switch.tsx
@@ -0,0 +1,35 @@
+import {
+	unstable_useControl as useControl,
+	type FieldMetadata,
+} from '@conform-to/react'
+import { useRef, type ElementRef } from 'react'
+import { Switch } from '#app/components/ui/switch.js'
+
+export function SwitchConform({ meta }: { meta: FieldMetadata<boolean> }) {
+	const switchRef = useRef<ElementRef<typeof Switch>>(null)
+	const control = useControl(meta)
+
+	return (
+		<>
+			<input
+				name={meta.name}
+				ref={control.register}
+				defaultValue={meta.initialValue}
+				className="sr-only"
+				tabIndex={-1}
+				onFocus={() => {
+					switchRef.current?.focus()
+				}}
+			/>
+			<Switch
+				ref={switchRef}
+				checked={meta.value === 'on'}
+				onCheckedChange={(checked) => {
+					control.change(checked ? 'on' : '')
+				}}
+				onBlur={control.blur}
+				className="focus:ring-2 focus:ring-stone-950 focus:ring-offset-2"
+			></Switch>
+		</>
+	)
+}
diff --git a/app/components/form/conform/Textarea.tsx b/app/components/form/conform/Textarea.tsx
new file mode 100644
index 0000000..1df0566
--- /dev/null
+++ b/app/components/form/conform/Textarea.tsx
@@ -0,0 +1,12 @@
+import { type FieldMetadata, getTextareaProps } from '@conform-to/react'
+import { type ComponentProps } from 'react'
+import { Textarea } from '../../ui/textarea'
+
+export const TextareaConform = ({
+	meta,
+	...props
+}: {
+	meta: FieldMetadata<string>
+} & ComponentProps<typeof Textarea>) => {
+	return <Textarea {...getTextareaProps(meta)} {...props} />
+}
diff --git a/app/components/form/conform/ToggleGroup.tsx b/app/components/form/conform/ToggleGroup.tsx
new file mode 100644
index 0000000..0fa61da
--- /dev/null
+++ b/app/components/form/conform/ToggleGroup.tsx
@@ -0,0 +1,48 @@
+// import {
+// 	FieldMetadata,
+// 	unstable_useControl as useControl,
+// } from '@conform-to/react';
+// import { ComponentProps, ElementRef, useRef } from 'react';
+// import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+// export const ToggleGroupConform = ({
+// 	meta,
+// 	items,
+// 	...props
+// }: {
+// 	items: Array<{ value: string; label: string }>;
+// 	meta: FieldMetadata<string>;
+// } & Omit<ComponentProps<typeof ToggleGroup>, 'defaultValue'>) => {
+// 	const toggleGroupRef = useRef<ElementRef<typeof ToggleGroup>>(null);
+// 	const control = useControl(meta);
+
+// 	return (
+// 		<>
+// 			<input
+// 				name={meta.name}
+// 				ref={control.register}
+// 				className="sr-only"
+// 				tabIndex={-1}
+// 				defaultValue={meta.initialValue}
+// 				onFocus={() => {
+// 					toggleGroupRef.current?.focus();
+// 				}}
+// 			/>
+// 			<ToggleGroup
+// 				{...props}
+// 				ref={toggleGroupRef}
+// 				value={control.value}
+// 				onValueChange={(value) => {
+// 					props.onValueChange?.(value);
+// 					control.change(value);
+// 				}}
+// 			>
+// 				{items.map((item) => (
+// 					<ToggleGroupItem key={item.value} value={item.value}>
+// 						{item.label}
+// 					</ToggleGroupItem>
+// 				))}
+// 			</ToggleGroup>
+// 		</>
+// 	);
+// };
diff --git a/app/components/forms.tsx b/app/components/forms.tsx
deleted file mode 100644
index 693a9da..0000000
--- a/app/components/forms.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { useInputControl } from '@conform-to/react'
-import { REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps } from 'input-otp'
-import React, { useId } from 'react'
-import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
-import {
-	InputOTP,
-	InputOTPGroup,
-	InputOTPSeparator,
-	InputOTPSlot,
-} from './ui/input-otp.tsx'
-import { Input } from './ui/input.tsx'
-import { Label } from './ui/label.tsx'
-import { Textarea } from './ui/textarea.tsx'
-
-export type ListOfErrors = Array<string | null | undefined> | null | undefined
-
-export function ErrorList({
-	id,
-	errors,
-}: {
-	errors?: ListOfErrors
-	id?: string
-}) {
-	const errorsToRender = errors?.filter(Boolean)
-	if (!errorsToRender?.length) return null
-	return (
-		<ul id={id} className="flex flex-col gap-1">
-			{errorsToRender.map((e) => (
-				<li key={e} className="text-[10px] text-foreground-destructive">
-					{e}
-				</li>
-			))}
-		</ul>
-	)
-}
-
-export function Field({
-	labelProps,
-	inputProps,
-	errors,
-	className,
-}: {
-	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	inputProps: React.InputHTMLAttributes<HTMLInputElement>
-	errors?: ListOfErrors
-	className?: string
-}) {
-	const fallbackId = useId()
-	const id = inputProps.id ?? fallbackId
-	const errorId = errors?.length ? `${id}-error` : undefined
-	return (
-		<div className={className}>
-			<Label htmlFor={id} {...labelProps} />
-			<Input
-				id={id}
-				aria-invalid={errorId ? true : undefined}
-				aria-describedby={errorId}
-				{...inputProps}
-			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
-				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
-			</div>
-		</div>
-	)
-}
-
-export function OTPField({
-	labelProps,
-	inputProps,
-	errors,
-	className,
-}: {
-	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	inputProps: Partial<OTPInputProps & { render: never }>
-	errors?: ListOfErrors
-	className?: string
-}) {
-	const fallbackId = useId()
-	const id = inputProps.id ?? fallbackId
-	const errorId = errors?.length ? `${id}-error` : undefined
-	return (
-		<div className={className}>
-			<Label htmlFor={id} {...labelProps} />
-			<InputOTP
-				pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
-				maxLength={6}
-				id={id}
-				aria-invalid={errorId ? true : undefined}
-				aria-describedby={errorId}
-				{...inputProps}
-			>
-				<InputOTPGroup>
-					<InputOTPSlot index={0} />
-					<InputOTPSlot index={1} />
-					<InputOTPSlot index={2} />
-				</InputOTPGroup>
-				<InputOTPSeparator />
-				<InputOTPGroup>
-					<InputOTPSlot index={3} />
-					<InputOTPSlot index={4} />
-					<InputOTPSlot index={5} />
-				</InputOTPGroup>
-			</InputOTP>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
-				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
-			</div>
-		</div>
-	)
-}
-
-export function TextareaField({
-	labelProps,
-	textareaProps,
-	errors,
-	className,
-}: {
-	labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
-	textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement>
-	errors?: ListOfErrors
-	className?: string
-}) {
-	const fallbackId = useId()
-	const id = textareaProps.id ?? textareaProps.name ?? fallbackId
-	const errorId = errors?.length ? `${id}-error` : undefined
-	return (
-		<div className={className}>
-			<Label htmlFor={id} {...labelProps} />
-			<Textarea
-				id={id}
-				aria-invalid={errorId ? true : undefined}
-				aria-describedby={errorId}
-				{...textareaProps}
-			/>
-			<div className="min-h-[32px] px-4 pb-3 pt-1">
-				{errorId ? <ErrorList id={errorId} errors={errors} /> : null}
-			</div>
-		</div>
-	)
-}
-
-export function CheckboxField({
-	labelProps,
-	buttonProps,
-	errors,
-	className,
-}: {
-	labelProps: JSX.IntrinsicElements['label']
-	buttonProps: CheckboxProps & {
-		name: string
-		form: string
-		value?: string
-	}
-	errors?: ListOfErrors
-	className?: string
-}) {
-	const { key, defaultChecked, ...checkboxProps } = buttonProps
-	const fallbackId = useId()
-	const checkedValue = buttonProps.value ?? 'on'
-	const input = useInputControl({
-		key,
-		name: buttonProps.name,
-		formId: buttonProps.form,
-		initialValue: defaultChecked ? checkedValue : undefined,
-	})
-	const id = buttonProps.id ?? fallbackId
-	const errorId = errors?.length ? `${id}-error` : undefined
-
-	return (
-		<div className={className}>
-			<div className="flex gap-2">
-				<Checkbox
-					{...checkboxProps}
-					id={id}
-					aria-invalid={errorId ? true : undefined}
-					aria-describedby={errorId}
-					checked={input.value === checkedValue}
-					onCheckedChange={(state) => {
-						input.change(state.valueOf() ? checkedValue : '')
-						buttonProps.onCheckedChange?.(state)
-					}}
-					onFocus={(event) => {
-						input.focus()
-						buttonProps.onFocus?.(event)
-					}}
-					onBlur={(event) => {
-						input.blur()
-						buttonProps.onBlur?.(event)
-					}}
-					type="button"
-				/>
-				<label
-					htmlFor={id}
-					{...labelProps}
-					className="self-center text-body-xs text-muted-foreground"
-				/>
-			</div>
-			{errorId ? (
-				<div className="px-4 pb-3 pt-1">
-					<ErrorList id={errorId} errors={errors} />
-				</div>
-			) : null}
-		</div>
-	)
-}
diff --git a/app/components/image.tsx b/app/components/image.tsx
new file mode 100644
index 0000000..f63ac41
--- /dev/null
+++ b/app/components/image.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '#app/utils/misc.tsx'
+import { Skeleton } from './ui/skeleton'
+
+function Image({
+	fallbackSrc,
+	alt,
+	...props
+}: React.ComponentPropsWithoutRef<'img'> & {
+	fallbackSrc?: string
+}) {
+	const imgRef = useRef<HTMLImageElement>(null)
+	const [imageLoaded, setImageLoaded] = useState(false)
+
+	function onLoad() {
+		console.log('Loaded...')
+		setImageLoaded(true)
+	}
+
+	const handleImageError = (
+		event: React.SyntheticEvent<HTMLImageElement, Event>,
+	) => {
+		const target = event.currentTarget
+		target.onerror = null // Prevents looping
+		if (fallbackSrc) {
+			target.src = fallbackSrc
+		}
+	}
+
+	useEffect(() => {
+		if (imgRef.current?.complete) {
+			onLoad()
+		}
+	}, [])
+
+	return (
+		<>
+			{!imageLoaded && (
+				<Skeleton className={cn('rounded-lg object-cover', props.className)} />
+			)}
+			<img
+				{...props}
+				ref={imgRef}
+				onLoad={onLoad}
+				onError={handleImageError}
+				alt={alt}
+				className={cn('rounded-lg object-cover', props.className)}
+				style={{ display: imageLoaded ? 'block' : 'none' }}
+			/>
+		</>
+	)
+}
+
+export default React.memo(Image)
diff --git a/app/components/infinite-scroll.tsx b/app/components/infinite-scroll.tsx
new file mode 100644
index 0000000..70ffde1
--- /dev/null
+++ b/app/components/infinite-scroll.tsx
@@ -0,0 +1,46 @@
+import queryString from 'querystring'
+import { useSearchParams } from '@remix-run/react'
+import { useInView } from 'react-intersection-observer'
+import { Button } from './ui/button.tsx'
+
+export interface InfiniteScrollProps<Data> {
+	data: Array<Data>
+	count: number
+	take: number
+}
+
+export function InfiniteScroll<Data>(props: InfiniteScrollProps<Data>) {
+	const [params, setParams] = useSearchParams()
+	const currentPage = parseInt(params.get('page') || '1') as number
+	const totalPages = Math.ceil(props.count / props.take)
+	const isMore = currentPage < totalPages && totalPages !== 0
+
+	const handleSetPage = (page: number) => {
+		if (!isMore) return
+
+		const existingParams = queryString.parse(params.toString())
+		setParams(
+			queryString.stringify({ ...existingParams, page: page.toString() }),
+			{ state: { data: props.data }, preventScrollReset: true },
+		)
+	}
+
+	const { ref } = useInView({
+		threshold: 1,
+		onChange: (inView) => {
+			if (inView) handleSetPage(currentPage + 1)
+		},
+	})
+
+	return (
+		<div ref={ref} className="my-10 flex justify-center">
+			{isMore ? (
+				<Button onClick={() => handleSetPage(currentPage + 1)}>
+					Load More
+				</Button>
+			) : (
+				<Button disabled>No More</Button>
+			)}
+		</div>
+	)
+}
diff --git a/app/components/navigation-bar.tsx b/app/components/navigation-bar.tsx
index 17c431d..0779bea 100644
--- a/app/components/navigation-bar.tsx
+++ b/app/components/navigation-bar.tsx
@@ -2,15 +2,7 @@ import { Link } from '@remix-run/react'
 import { Logo } from './logo'
 import { Button } from './ui/button'
 import { Icon } from './ui/icon'
-import {
-	Sheet,
-	SheetContent,
-	SheetDescription,
-	SheetFooter,
-	SheetHeader,
-	SheetTitle,
-	SheetTrigger,
-} from './ui/sheet'
+import { Sheet, SheetContent, SheetFooter, SheetTrigger } from './ui/sheet'
 
 const links = [
 	{
diff --git a/app/components/pagination-bar.tsx b/app/components/pagination-bar.tsx
new file mode 100644
index 0000000..e84c920
--- /dev/null
+++ b/app/components/pagination-bar.tsx
@@ -0,0 +1,82 @@
+import queryString from 'querystring'
+import { useSearchParams } from '@remix-run/react'
+import {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from './ui/pagination'
+
+export interface PaginationBarProps {
+	count: number
+	take: number
+}
+
+export function PaginationBar(props: PaginationBarProps) {
+	const [params, setParams] = useSearchParams()
+	const currentPage = parseInt(params.get('page') || '1') as number
+	const totalPages = Math.ceil(props.count / props.take)
+	const isMore = currentPage < totalPages && totalPages !== 0
+	const isFirstPage = currentPage == 1
+
+	const handlePreviousPage = () => {
+		if (isFirstPage) return
+
+		const existingParams = queryString.parse(params.toString())
+		setParams(
+			queryString.stringify({
+				...existingParams,
+				page: (currentPage - 1).toString(),
+			}),
+		)
+	}
+
+	const handleNextPage = () => {
+		if (!isMore) return
+
+		const existingParams = queryString.parse(params.toString())
+		setParams(
+			queryString.stringify({
+				...existingParams,
+				page: (currentPage + 1).toString(),
+			}),
+		)
+	}
+
+	return (
+		<div className="my-10 flex justify-center">
+			<Pagination>
+				<PaginationContent>
+					<PaginationItem>
+						<PaginationPrevious
+							className="cursor-pointer"
+							onClick={handlePreviousPage}
+						/>
+					</PaginationItem>
+					{!isFirstPage && (
+						<PaginationItem>
+							<PaginationEllipsis />
+						</PaginationItem>
+					)}
+					<PaginationItem>
+						<PaginationLink>{currentPage}</PaginationLink>
+					</PaginationItem>
+					{isMore && (
+						<PaginationItem>
+							<PaginationEllipsis />
+						</PaginationItem>
+					)}
+					<PaginationItem>
+						<PaginationNext
+							className="cursor-pointer"
+							onClick={handleNextPage}
+						/>
+					</PaginationItem>
+				</PaginationContent>
+			</Pagination>
+		</div>
+	)
+}
diff --git a/app/components/table/data-table-pagination.tsx b/app/components/table/data-table-pagination.tsx
index f29676a..7e14c14 100644
--- a/app/components/table/data-table-pagination.tsx
+++ b/app/components/table/data-table-pagination.tsx
@@ -1,5 +1,6 @@
-import { Table } from '@tanstack/react-table'
+import { type Table } from '@tanstack/react-table'
 import { Button } from '../ui/button'
+import { Icon } from '../ui/icon'
 import {
 	Select,
 	SelectContent,
@@ -7,7 +8,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from '../ui/select'
-import { Icon } from '../ui/icon'
 
 interface DataTablePaginationProps<TData> {
 	table: Table<TData>
diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
index c5b2db2..169e054 100644
--- a/app/components/ui/avatar.tsx
+++ b/app/components/ui/avatar.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 
 const Avatar = React.forwardRef<
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
index dffd6e8..d8cd761 100644
--- a/app/components/ui/badge.tsx
+++ b/app/components/ui/badge.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 
 const badgeVariants = cva(
diff --git a/app/components/ui/calendar.tsx b/app/components/ui/calendar.tsx
new file mode 100644
index 0000000..29f2245
--- /dev/null
+++ b/app/components/ui/calendar.tsx
@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+
+import { buttonVariants } from '#app/components/ui/button'
+import { cn } from '#app/utils/misc.js'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: CalendarProps) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn('p-3', className)}
+			classNames={{
+				months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+				month: 'space-y-4',
+				caption: 'flex justify-center pt-1 relative items-center',
+				caption_label: 'text-sm font-medium',
+				nav: 'space-x-1 flex items-center',
+				nav_button: cn(
+					buttonVariants({ variant: 'outline' }),
+					'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+				),
+				nav_button_previous: 'absolute left-1',
+				nav_button_next: 'absolute right-1',
+				table: 'w-full border-collapse space-y-1',
+				head_row: 'flex',
+				head_cell:
+					'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+				row: 'flex w-full mt-2',
+				cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+				day: cn(
+					buttonVariants({ variant: 'ghost' }),
+					'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+				),
+				day_range_end: 'day-range-end',
+				day_selected:
+					'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+				day_today: 'bg-accent text-accent-foreground',
+				day_outside:
+					'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+				day_disabled: 'text-muted-foreground opacity-50',
+				day_range_middle:
+					'aria-selected:bg-accent aria-selected:text-accent-foreground',
+				day_hidden: 'invisible',
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+				IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+			}}
+			{...props}
+		/>
+	)
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar }
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
index a47129e..7d3cb62 100644
--- a/app/components/ui/card.tsx
+++ b/app/components/ui/card.tsx
@@ -1,5 +1,5 @@
-import { cn } from '#app/utils/misc.js'
 import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
 
 const Card = React.forwardRef<
 	HTMLDivElement,
diff --git a/app/components/ui/command.tsx b/app/components/ui/command.tsx
new file mode 100644
index 0000000..81e79b9
--- /dev/null
+++ b/app/components/ui/command.tsx
@@ -0,0 +1,153 @@
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import * as React from 'react'
+
+import { Dialog, DialogContent } from '#app/components/ui/dialog'
+import { cn } from '#app/utils/misc.js'
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+			className,
+		)}
+		{...props}
+	/>
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0 shadow-lg">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	)
+}
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+		{...props}
+	/>
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+			className,
+		)}
+		{...props}
+	/>
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn('-mx-1 h-px bg-border', className)}
+		{...props}
+	/>
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				'ml-auto text-xs tracking-widest text-muted-foreground',
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+}
diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
new file mode 100644
index 0000000..9c84fc1
--- /dev/null
+++ b/app/components/ui/dialog.tsx
@@ -0,0 +1,119 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			className,
+		)}
+		{...props}
+	/>
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			'flex flex-col space-y-1.5 text-center sm:text-left',
+			className,
+		)}
+		{...props}
+	/>
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+			className,
+		)}
+		{...props}
+	/>
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			'text-lg font-semibold leading-none tracking-tight',
+			className,
+		)}
+		{...props}
+	/>
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogClose,
+	DialogTrigger,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+}
diff --git a/app/components/ui/pagination.tsx b/app/components/ui/pagination.tsx
new file mode 100644
index 0000000..83b1492
--- /dev/null
+++ b/app/components/ui/pagination.tsx
@@ -0,0 +1,117 @@
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
+import * as React from 'react'
+
+import { type ButtonProps, buttonVariants } from '#app/components/ui/button'
+import { cn } from '#app/utils/misc.js'
+
+const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn('mx-auto flex w-full justify-center', className)}
+		{...props}
+	/>
+)
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		className={cn('flex flex-row items-center gap-1', className)}
+		{...props}
+	/>
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+	<li ref={ref} className={cn('', className)} {...props} />
+))
+PaginationItem.displayName = 'PaginationItem'
+
+type PaginationLinkProps = {
+	isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+	React.ComponentProps<'a'>
+
+const PaginationLink = ({
+	className,
+	isActive,
+	size = 'icon',
+	...props
+}: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? 'page' : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? 'outline' : 'ghost',
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn('gap-1 pl-2.5', className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn('gap-1 pr-2.5', className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
+)
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<'span'>) => (
+	<span
+		aria-hidden
+		className={cn('flex h-9 w-9 items-center justify-center', className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+}
diff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx
index 07e5b70..aabce2d 100644
--- a/app/components/ui/popover.tsx
+++ b/app/components/ui/popover.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 
 const Popover = PopoverPrimitive.Root
diff --git a/app/components/ui/progress.tsx b/app/components/ui/progress.tsx
index 64b73a0..f9d0c5c 100644
--- a/app/components/ui/progress.tsx
+++ b/app/components/ui/progress.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 
 const Progress = React.forwardRef<
diff --git a/app/components/ui/radio-group.tsx b/app/components/ui/radio-group.tsx
new file mode 100644
index 0000000..396b914
--- /dev/null
+++ b/app/components/ui/radio-group.tsx
@@ -0,0 +1,41 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn('grid gap-2', className)}
+			{...props}
+			ref={ref}
+		/>
+	)
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="h-2.5 w-2.5 fill-current text-current" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	)
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/app/components/ui/scroll-area.tsx b/app/components/ui/scroll-area.tsx
index b989935..280693a 100644
--- a/app/components/ui/scroll-area.tsx
+++ b/app/components/ui/scroll-area.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 
 const ScrollArea = React.forwardRef<
diff --git a/app/components/ui/sheet.tsx b/app/components/ui/sheet.tsx
index 424f713..d3c7fe2 100644
--- a/app/components/ui/sheet.tsx
+++ b/app/components/ui/sheet.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 import { cn } from '#app/utils/misc.js'
 import { Icon } from './icon'
 
diff --git a/app/components/ui/skeleton.tsx b/app/components/ui/skeleton.tsx
new file mode 100644
index 0000000..885e59d
--- /dev/null
+++ b/app/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '#app/utils/misc.js'
+
+function Skeleton({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn('animate-pulse rounded-md bg-muted', className)}
+			{...props}
+		/>
+	)
+}
+
+export { Skeleton }
diff --git a/app/components/ui/slider.tsx b/app/components/ui/slider.tsx
new file mode 100644
index 0000000..f76b723
--- /dev/null
+++ b/app/components/ui/slider.tsx
@@ -0,0 +1,25 @@
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			'relative flex w-full touch-none select-none items-center',
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/app/components/ui/switch.tsx b/app/components/ui/switch.tsx
new file mode 100644
index 0000000..a4500db
--- /dev/null
+++ b/app/components/ui/switch.tsx
@@ -0,0 +1,26 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+			)}
+		/>
+	</SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index fa887d1..7effa99 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -1,5 +1,5 @@
-import { cn } from '#app/utils/misc.js'
 import * as React from 'react'
+import { cn } from '#app/utils/misc.js'
 
 const Table = React.forwardRef<
 	HTMLTableElement,
diff --git a/app/routes/_auth+/forgot-password.tsx b/app/routes/_auth+/forgot-password.tsx
index 9d5a1e2..b3e934d 100644
--- a/app/routes/_auth+/forgot-password.tsx
+++ b/app/routes/_auth+/forgot-password.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, 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'
@@ -12,7 +12,10 @@ import { Link, useFetcher } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { sendEmail } from '#app/utils/email.server.ts'
@@ -148,17 +151,19 @@ export default function ForgotPasswordRoute() {
 					<forgotPassword.Form method="POST" {...getFormProps(form)}>
 						<HoneypotInputs />
 						<div>
-							<Field
-								labelProps={{
-									htmlFor: fields.usernameOrEmail.id,
-									children: 'Username or Email',
-								}}
-								inputProps={{
-									autoFocus: true,
-									...getInputProps(fields.usernameOrEmail, { type: 'text' }),
-								}}
-								errors={fields.usernameOrEmail.errors}
-							/>
+							<Field>
+								<Label htmlFor={fields.usernameOrEmail.id}>
+									Username or Email
+								</Label>
+								<InputConform
+									meta={fields.usernameOrEmail}
+									type="text"
+									autoFocus
+								/>
+								{fields.usernameOrEmail.errors && (
+									<FieldError>{fields.usernameOrEmail.errors}</FieldError>
+								)}
+							</Field>
 						</div>
 						<ErrorList errors={form.errors} id={form.errorId} />
 
diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index 56626c0..91bc07c 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -16,7 +16,11 @@ import {
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.js'
-import { Field, CheckboxField, ErrorList } from '#app/components/forms.js'
+import { CheckboxConform } from '#app/components/form/conform/Checkbox.js'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.js'
 import { login, requireAnonymous } from '#app/utils/auth.server.js'
 import {
@@ -116,41 +120,46 @@ export default function LoginPage() {
 						<div className="grid gap-2">
 							<Form method="POST" {...getFormProps(form)}>
 								<HoneypotInputs />
-								<Field
-									labelProps={{ children: 'Username' }}
-									inputProps={{
-										...getInputProps(fields.username, { type: 'text' }),
-										autoFocus: true,
-										className: 'lowercase',
-										autoComplete: 'username',
-									}}
-									errors={fields.username.errors}
-								/>
-
-								<Field
-									labelProps={{ children: 'Password' }}
-									inputProps={{
-										...getInputProps(fields.password, {
-											type: 'password',
-										}),
-										autoComplete: 'current-password',
-									}}
-									errors={fields.password.errors}
-								/>
-
-								<div className="mb-4 flex items-center justify-between">
-									<CheckboxField
-										labelProps={{
-											htmlFor: fields.remember.id,
-											children: 'Remember me',
-										}}
-										buttonProps={getInputProps(fields.remember, {
-											type: 'checkbox',
-										})}
-										errors={fields.remember.errors}
+								<Field>
+									<Label htmlFor={fields.username.id}>Username</Label>
+									<InputConform
+										meta={fields.username}
+										type="text"
+										className="lowercase"
+										autoComplete="username"
+										autoFocus
+									/>
+									{fields.username.errors && (
+										<FieldError>{fields.username.errors}</FieldError>
+									)}
+								</Field>
+								<Field>
+									<Label htmlFor={fields.password.id}>Password</Label>
+									<InputConform
+										meta={fields.password}
+										type="password"
+										autoComplete="current-password"
 									/>
+									{fields.password.errors && (
+										<FieldError>{fields.password.errors}</FieldError>
+									)}
+								</Field>
+
+								<div className="flex justify-between">
+									<Field>
+										<div className="flex items-center gap-2">
+											<CheckboxConform meta={fields.remember} />
+											<Label htmlFor={fields.remember.id}>Remember me</Label>
+										</div>
+										{fields.remember.errors && (
+											<FieldError>{fields.remember.errors}</FieldError>
+										)}
+									</Field>
 									<div>
-										<Link to="/forgot-password" className="text-sm underline">
+										<Link
+											to="/forgot-password"
+											className="text-body-xs font-semibold"
+										>
 											Forgot password?
 										</Link>
 									</div>
diff --git a/app/routes/_auth+/onboarding.tsx b/app/routes/_auth+/onboarding.tsx
index e77bdda..c0d57d3 100644
--- a/app/routes/_auth+/onboarding.tsx
+++ b/app/routes/_auth+/onboarding.tsx
@@ -16,8 +16,12 @@ import {
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
-import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
+import { CheckboxConform } from '#app/components/form/conform/Checkbox.js'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Spacer } from '#app/components/spacer.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireAnonymous, sessionKey, signup } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -163,64 +167,72 @@ export default function OnboardingRoute() {
 					{...getFormProps(form)}
 				>
 					<HoneypotInputs />
-					<Field
-						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
-						inputProps={{
-							...getInputProps(fields.username, { type: 'text' }),
-							autoComplete: 'username',
-							className: 'lowercase',
-						}}
-						errors={fields.username.errors}
-					/>
-					<Field
-						labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
-						inputProps={{
-							...getInputProps(fields.name, { type: 'text' }),
-							autoComplete: 'name',
-						}}
-						errors={fields.name.errors}
-					/>
-					<Field
-						labelProps={{ htmlFor: fields.password.id, children: 'Password' }}
-						inputProps={{
-							...getInputProps(fields.password, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						errors={fields.password.errors}
-					/>
-
-					<Field
-						labelProps={{
-							htmlFor: fields.confirmPassword.id,
-							children: 'Confirm Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.confirmPassword, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						errors={fields.confirmPassword.errors}
-					/>
-
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
-							children:
-								'Do you agree to our Terms of Service and Privacy Policy?',
-						}}
-						buttonProps={getInputProps(
-							fields.agreeToTermsOfServiceAndPrivacyPolicy,
-							{ type: 'checkbox' },
+					<Field>
+						<Label htmlFor={fields.username.id}>Username</Label>
+						<InputConform
+							meta={fields.username}
+							type="text"
+							className="lowercase"
+							autoComplete="username"
+						/>
+						{fields.username.errors && (
+							<FieldError>{fields.username.errors}</FieldError>
 						)}
-						errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
-					/>
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.remember.id,
-							children: 'Remember me',
-						}}
-						buttonProps={getInputProps(fields.remember, { type: 'checkbox' })}
-						errors={fields.remember.errors}
-					/>
+					</Field>
+					<Field>
+						<Label htmlFor={fields.name.id}>Name</Label>
+						<InputConform meta={fields.name} type="text" autoComplete="name" />
+						{fields.name.errors && (
+							<FieldError>{fields.name.errors}</FieldError>
+						)}
+					</Field>
+					<Field>
+						<Label htmlFor={fields.password.id}>Password</Label>
+						<InputConform
+							meta={fields.password}
+							type="password"
+							autoComplete="new-password"
+						/>
+						{fields.password.errors && (
+							<FieldError>{fields.password.errors}</FieldError>
+						)}
+					</Field>
+					<Field>
+						<Label htmlFor={fields.confirmPassword.id}>Confirm Password</Label>
+						<InputConform
+							meta={fields.confirmPassword}
+							type="password"
+							autoComplete="new-password"
+						/>
+						{fields.confirmPassword.errors && (
+							<FieldError>{fields.confirmPassword.errors}</FieldError>
+						)}
+					</Field>
+
+					<Field>
+						<div className="flex items-center gap-2">
+							<CheckboxConform
+								meta={fields.agreeToTermsOfServiceAndPrivacyPolicy}
+							/>
+							<Label htmlFor={fields.agreeToTermsOfServiceAndPrivacyPolicy.id}>
+								Do you agree to our Terms of Service and Privacy Policy?
+							</Label>
+						</div>
+						{fields.agreeToTermsOfServiceAndPrivacyPolicy.errors && (
+							<FieldError>
+								{fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
+							</FieldError>
+						)}
+					</Field>
+					<Field>
+						<div className="flex items-center gap-2">
+							<CheckboxConform meta={fields.remember} />
+							<Label htmlFor={fields.remember.id}>Remember Me</Label>
+						</div>
+						{fields.remember.errors && (
+							<FieldError>{fields.remember.errors}</FieldError>
+						)}
+					</Field>
 
 					<input {...getInputProps(fields.redirectTo, { type: 'hidden' })} />
 					<ErrorList errors={form.errors} id={form.errorId} />
diff --git a/app/routes/_auth+/onboarding_.$provider.tsx b/app/routes/_auth+/onboarding_.$provider.tsx
index eb7d8ba..997fe80 100644
--- a/app/routes/_auth+/onboarding_.$provider.tsx
+++ b/app/routes/_auth+/onboarding_.$provider.tsx
@@ -21,8 +21,12 @@ import {
 } from '@remix-run/react'
 import { safeRedirect } from 'remix-utils/safe-redirect'
 import { z } from 'zod'
-import { CheckboxField, ErrorList, Field } from '#app/components/forms.tsx'
+import { CheckboxConform } from '#app/components/form/conform/Checkbox.js'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Spacer } from '#app/components/spacer.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import {
 	authenticator,
@@ -223,44 +227,49 @@ export default function OnboardingProviderRoute() {
 							<input {...getInputProps(fields.imageUrl, { type: 'hidden' })} />
 						</div>
 					) : null}
-					<Field
-						labelProps={{ htmlFor: fields.username.id, children: 'Username' }}
-						inputProps={{
-							...getInputProps(fields.username, { type: 'text' }),
-							autoComplete: 'username',
-							className: 'lowercase',
-						}}
-						errors={fields.username.errors}
-					/>
-					<Field
-						labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
-						inputProps={{
-							...getInputProps(fields.name, { type: 'text' }),
-							autoComplete: 'name',
-						}}
-						errors={fields.name.errors}
-					/>
-
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.agreeToTermsOfServiceAndPrivacyPolicy.id,
-							children:
-								'Do you agree to our Terms of Service and Privacy Policy?',
-						}}
-						buttonProps={getInputProps(
-							fields.agreeToTermsOfServiceAndPrivacyPolicy,
-							{ type: 'checkbox' },
+					<Field>
+						<Label htmlFor={fields.username.id}>Username</Label>
+						<InputConform
+							meta={fields.username}
+							type="text"
+							autoComplete="username"
+							className="lowercase"
+						/>
+						{fields.username.errors && (
+							<FieldError>{fields.username.errors}</FieldError>
+						)}
+					</Field>
+					<Field>
+						<Label htmlFor={fields.name.id}>Name</Label>
+						<InputConform meta={fields.name} type="text" autoComplete="name" />
+						{fields.name.errors && (
+							<FieldError>{fields.name.errors}</FieldError>
+						)}
+					</Field>
+					<Field>
+						<div className="flex items-center gap-2">
+							<CheckboxConform
+								meta={fields.agreeToTermsOfServiceAndPrivacyPolicy}
+							/>
+							<Label htmlFor={fields.agreeToTermsOfServiceAndPrivacyPolicy.id}>
+								Do you agree to our Terms of Service and Privacy Policy
+							</Label>
+						</div>
+						{fields.agreeToTermsOfServiceAndPrivacyPolicy.errors && (
+							<FieldError>
+								{fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
+							</FieldError>
+						)}
+					</Field>
+					<Field>
+						<div className="flex items-center gap-2">
+							<CheckboxConform meta={fields.remember} />
+							<Label htmlFor={fields.remember.id}>Remember me</Label>
+						</div>
+						{fields.remember.errors && (
+							<FieldError>{fields.remember.errors}</FieldError>
 						)}
-						errors={fields.agreeToTermsOfServiceAndPrivacyPolicy.errors}
-					/>
-					<CheckboxField
-						labelProps={{
-							htmlFor: fields.remember.id,
-							children: 'Remember me',
-						}}
-						buttonProps={getInputProps(fields.remember, { type: 'checkbox' })}
-						errors={fields.remember.errors}
-					/>
+					</Field>
 
 					{redirectTo ? (
 						<input type="hidden" name="redirectTo" value={redirectTo} />
diff --git a/app/routes/_auth+/reset-password.tsx b/app/routes/_auth+/reset-password.tsx
index e54d412..11a5b71 100644
--- a/app/routes/_auth+/reset-password.tsx
+++ b/app/routes/_auth+/reset-password.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
@@ -10,7 +10,10 @@ import {
 } from '@remix-run/node'
 import { Form, useActionData, useLoaderData } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireAnonymous, resetUserPassword } from '#app/utils/auth.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -96,29 +99,30 @@ export default function ResetPasswordPage() {
 			</div>
 			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
 				<Form method="POST" {...getFormProps(form)}>
-					<Field
-						labelProps={{
-							htmlFor: fields.password.id,
-							children: 'New Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.password, { type: 'password' }),
-							autoComplete: 'new-password',
-							autoFocus: true,
-						}}
-						errors={fields.password.errors}
-					/>
-					<Field
-						labelProps={{
-							htmlFor: fields.confirmPassword.id,
-							children: 'Confirm Password',
-						}}
-						inputProps={{
-							...getInputProps(fields.confirmPassword, { type: 'password' }),
-							autoComplete: 'new-password',
-						}}
-						errors={fields.confirmPassword.errors}
-					/>
+					<Field>
+						<Label htmlFor={fields.password.id}>New Password</Label>
+						<InputConform
+							meta={fields.password}
+							type="password"
+							autoComplete="new-password"
+							autoFocus
+						/>
+						{fields.password.errors && (
+							<FieldError>{fields.password.errors}</FieldError>
+						)}
+					</Field>
+					<Field>
+						<Label htmlFor={fields.confirmPassword.id}>Confirm Password</Label>
+						<InputConform
+							meta={fields.confirmPassword}
+							type="password"
+							autoComplete="new-password"
+							autoFocus
+						/>
+						{fields.confirmPassword.errors && (
+							<FieldError>{fields.confirmPassword.errors}</FieldError>
+						)}
+					</Field>
 
 					<ErrorList errors={form.errors} id={form.errorId} />
 
diff --git a/app/routes/_auth+/signup.tsx b/app/routes/_auth+/signup.tsx
index 1664563..6f2a498 100644
--- a/app/routes/_auth+/signup.tsx
+++ b/app/routes/_auth+/signup.tsx
@@ -1,10 +1,10 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, 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 {
 	json,
-	LoaderFunctionArgs,
+	type LoaderFunctionArgs,
 	redirect,
 	type ActionFunctionArgs,
 	type MetaFunction,
@@ -13,8 +13,12 @@ import { Form, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
+import { requireAnonymous } from '#app/utils/auth.server.js'
 import {
 	ProviderConnectionForm,
 	providerNames,
@@ -25,7 +29,6 @@ import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
 import { EmailSchema } from '#app/utils/user-validation.ts'
 import { prepareVerification } from './verify.server.ts'
-import { requireAnonymous } from '#app/utils/auth.server.js'
 
 export const handle: SEOHandle = {
 	getSitemapEntries: () => null,
@@ -155,18 +158,19 @@ export default function SignupRoute() {
 			<div className="mx-auto mt-16 min-w-full max-w-sm sm:min-w-[368px]">
 				<Form method="POST" {...getFormProps(form)}>
 					<HoneypotInputs />
-					<Field
-						labelProps={{
-							htmlFor: fields.email.id,
-							children: 'Email',
-						}}
-						inputProps={{
-							...getInputProps(fields.email, { type: 'email' }),
-							autoFocus: true,
-							autoComplete: 'email',
-						}}
-						errors={fields.email.errors}
-					/>
+					<Field>
+						<Label htmlFor={fields.email.id}>Email</Label>
+						<InputConform
+							meta={fields.email}
+							type="text"
+							autoComplete="email"
+							autoFocus
+						/>
+						{fields.email.errors && (
+							<FieldError>{fields.email.errors}</FieldError>
+						)}
+					</Field>
+
 					<ErrorList errors={form.errors} id={form.errorId} />
 					<StatusButton
 						className="w-full"
diff --git a/app/routes/_auth+/verify.tsx b/app/routes/_auth+/verify.tsx
index 0cd8fb0..4a90ef4 100644
--- a/app/routes/_auth+/verify.tsx
+++ b/app/routes/_auth+/verify.tsx
@@ -6,8 +6,11 @@ import { Form, useActionData, useSearchParams } from '@remix-run/react'
 import { HoneypotInputs } from 'remix-utils/honeypot/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList, OTPField } from '#app/components/forms.tsx'
+import { InputOTPConform } from '#app/components/form/conform/InputOTP.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Spacer } from '#app/components/spacer.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { checkHoneypot } from '#app/utils/honeypot.server.ts'
 import { useIsPending } from '#app/utils/misc.tsx'
@@ -101,18 +104,19 @@ export default function VerifyRoute() {
 					<Form method="POST" {...getFormProps(form)} className="flex-1">
 						<HoneypotInputs />
 						<div className="flex items-center justify-center">
-							<OTPField
-								labelProps={{
-									htmlFor: fields[codeQueryParam].id,
-									children: 'Code',
-								}}
-								inputProps={{
-									...getInputProps(fields[codeQueryParam], { type: 'text' }),
-									autoComplete: 'one-time-code',
-									autoFocus: true,
-								}}
-								errors={fields[codeQueryParam].errors}
-							/>
+							<Field>
+								<Label htmlFor={fields[codeQueryParam].id}>Code</Label>
+								<InputOTPConform
+									meta={fields[codeQueryParam]}
+									length={6}
+									autoComplete="one-time-code"
+									autoCapitalise
+									autoFocus
+								/>
+								{fields[codeQueryParam].errors && (
+									<FieldError>{fields[codeQueryParam].errors}</FieldError>
+								)}
+							</Field>
 						</div>
 						<input
 							{...getInputProps(fields[typeQueryParam], { type: 'hidden' })}
diff --git a/app/routes/_home+/index.tsx b/app/routes/_home+/index.tsx
index 2112c15..81d3779 100644
--- a/app/routes/_home+/index.tsx
+++ b/app/routes/_home+/index.tsx
@@ -1,8 +1,8 @@
 import { type MetaFunction } from '@remix-run/node'
+import { Link } from '@remix-run/react'
 import { useEffect, useState } from 'react'
 import { Button } from '#app/components/ui/button.js'
 import { Icon } from '#app/components/ui/icon.js'
-import { Link } from '@remix-run/react'
 export const meta: MetaFunction = () => [{ title: 'Petal' }]
 
 export default function HomePage() {
diff --git a/app/routes/_home.tsx b/app/routes/_home.tsx
index 9642229..019378a 100644
--- a/app/routes/_home.tsx
+++ b/app/routes/_home.tsx
@@ -1,11 +1,8 @@
 import { invariant } from '@epic-web/invariant'
-import { json, Outlet, useRouteLoaderData } from '@remix-run/react'
+import { Outlet, useRouteLoaderData } from '@remix-run/react'
 import Footer from '#app/components/footer.js'
 import NavigationBar from '#app/components/navigation-bar.js'
 import { type loader as rootLoader } from '#app/root'
-import { ThemeSwitch } from '#app/routes/resources+/theme-switch.js'
-import { requireAnonymous } from '#app/utils/auth.server.js'
-import { LoaderFunctionArgs } from '@remix-run/node'
 
 export default function HomePageLayout() {
 	const data = useRouteLoaderData<typeof rootLoader>('root')
diff --git a/app/routes/admin+/cache.tsx b/app/routes/admin+/cache.tsx
index 741e858..6da54ae 100644
--- a/app/routes/admin+/cache.tsx
+++ b/app/routes/admin+/cache.tsx
@@ -15,7 +15,7 @@ import {
 	useSubmit,
 } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary'
-import { Field } from '#app/components/forms.tsx'
+import { RegularField } from '#app/components/form/RegularFIeld.js'
 import { Spacer } from '#app/components/spacer.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import {
@@ -119,7 +119,7 @@ export default function CacheAdminRoute() {
 						>
 							🔎
 						</button>
-						<Field
+						<RegularField
 							className="flex-1"
 							labelProps={{ children: 'Search' }}
 							inputProps={{
@@ -136,7 +136,7 @@ export default function CacheAdminRoute() {
 					</div>
 				</div>
 				<div className="flex flex-wrap items-center gap-4">
-					<Field
+					<RegularField
 						labelProps={{
 							children: 'Limit',
 						}}
diff --git a/app/routes/dashboard+/changes+/edits-table/columns.tsx b/app/routes/dashboard+/changes+/edits-table/columns.tsx
index 7fdf3a2..024ea76 100644
--- a/app/routes/dashboard+/changes+/edits-table/columns.tsx
+++ b/app/routes/dashboard+/changes+/edits-table/columns.tsx
@@ -1,5 +1,6 @@
 import { type ColumnDef } from '@tanstack/react-table'
 import { DataTableColumnHeader } from '#app/components/table/data-table-column-header.js'
+import { Badge } from '#app/components/ui/badge.js'
 import { Button } from '#app/components/ui/button.js'
 import { Checkbox } from '#app/components/ui/checkbox.js'
 import {
@@ -11,7 +12,6 @@ import {
 	DropdownMenuSeparator,
 } from '#app/components/ui/dropdown-menu.js'
 import { Icon } from '#app/components/ui/icon.js'
-import { Badge } from '#app/components/ui/badge.js'
 
 export type Payment = {
 	id: string
diff --git a/app/routes/dashboard+/changes+/edits-table/data.tsx b/app/routes/dashboard+/changes+/edits-table/data.tsx
index c753f2c..fc480b1 100644
--- a/app/routes/dashboard+/changes+/edits-table/data.tsx
+++ b/app/routes/dashboard+/changes+/edits-table/data.tsx
@@ -1,4 +1,4 @@
-import { Payment } from './columns'
+import { type Payment } from './columns'
 
 export const payments: Payment[] = [
 	{
diff --git a/app/routes/dashboard+/charts/BarChart.tsx b/app/routes/dashboard+/charts/BarChart.tsx
index 6d8ee8f..d54c007 100644
--- a/app/routes/dashboard+/charts/BarChart.tsx
+++ b/app/routes/dashboard+/charts/BarChart.tsx
@@ -1,4 +1,7 @@
-import { BarChart, BarChartConfig } from '#app/components/chart/bar-chart.js'
+import {
+	BarChart,
+	type BarChartConfig,
+} from '#app/components/chart/bar-chart.js'
 import { Icon } from '#app/components/ui/icon.js'
 
 const chartData = [
diff --git a/app/routes/dashboard+/charts/GenreChart.tsx b/app/routes/dashboard+/charts/GenreChart.tsx
index 5d8d3db..0fc1894 100644
--- a/app/routes/dashboard+/charts/GenreChart.tsx
+++ b/app/routes/dashboard+/charts/GenreChart.tsx
@@ -1,5 +1,5 @@
 import PieChart from '#app/components/chart/pie.js'
-import { ChartConfig } from '#app/components/ui/chart.js'
+import { type ChartConfig } from '#app/components/ui/chart.js'
 
 const chartData = [
 	{ genre: 'Romance', count: 20, fill: 'hsl(var(--chart-1))' },
diff --git a/app/routes/dashboard+/films+/index.tsx b/app/routes/dashboard+/films+/index.tsx
index cff7e04..2c71705 100644
--- a/app/routes/dashboard+/films+/index.tsx
+++ b/app/routes/dashboard+/films+/index.tsx
@@ -1,17 +1,18 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type ActionFunctionArgs, json } from '@remix-run/node'
 import { Form, useActionData } from '@remix-run/react'
 import { z } from 'zod'
-import { requireUserId } from '#app/utils/auth.server.js'
-import { prisma } from '#app/utils/db.server.js'
-import { createToastHeaders } from '#app/utils/toast.server.js'
-import { ErrorList, Field } from '#app/components/forms.js'
-import { Input } from '#app/components/ui/input.js'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { TextareaConform } from '#app/components/form/conform/Textarea.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.js'
+import { requireUserId } from '#app/utils/auth.server.js'
+import { prisma } from '#app/utils/db.server.js'
 import { useIsPending, withQueryContext } from '#app/utils/misc.js'
-import { Prisma } from '@prisma/client'
+import { createToastHeaders } from '#app/utils/toast.server.js'
 
 export const NewFilmSchema = z.object({
 	title: z.string(),
@@ -76,28 +77,21 @@ export default function DashboardFilmsPage() {
 	return (
 		<div>
 			<Form method="POST" {...getFormProps(form)}>
-				<Field
-					labelProps={{
-						htmlFor: fields.title.id,
-						children: 'Title',
-					}}
-					inputProps={{
-						...getInputProps(fields.title, { type: 'text' }),
-						autoFocus: true,
-					}}
-					errors={fields.title.errors}
-				/>
-				<Field
-					labelProps={{
-						htmlFor: fields.overview.id,
-						children: 'Overview',
-					}}
-					inputProps={{
-						...getInputProps(fields.overview, { type: 'text' }),
-						autoFocus: true,
-					}}
-					errors={fields.overview.errors}
-				/>
+				<Field>
+					<Label htmlFor={fields.title.id}>Title</Label>
+					<InputConform meta={fields.title} type="text" autoFocus />
+					{fields.title.errors && (
+						<FieldError>{fields.title.errors}</FieldError>
+					)}
+				</Field>
+				<Field>
+					<Label htmlFor={fields.overview.id}>Overview</Label>
+					<TextareaConform meta={fields.overview} />
+					{fields.overview.errors && (
+						<FieldError>{fields.overview.errors}</FieldError>
+					)}
+				</Field>
+
 				<ErrorList errors={form.errors} id={form.errorId} />
 
 				<StatusButton
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index e3d0d86..a5f67dd 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -157,12 +157,12 @@ export default function DashboardPageLayout() {
 							<div className="relative">
 								<Icon
 									name="magnifying-glass"
-									className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"
+									className="absolute left-3 top-3 h-4 w-4 text-muted-foreground"
 								/>
 								<Input
 									type="search"
-									placeholder="Search products..."
-									className="w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3"
+									placeholder="Search..."
+									className="w-full appearance-none bg-background pl-8 shadow-none"
 								/>
 							</div>
 						</form>
diff --git a/app/routes/resources+/notifications.tsx b/app/routes/resources+/notifications.tsx
index 705492e..54e254b 100644
--- a/app/routes/resources+/notifications.tsx
+++ b/app/routes/resources+/notifications.tsx
@@ -1,6 +1,9 @@
 import { parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
-import { ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node'
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+} from '@remix-run/node'
 import { json, useFetcher } from '@remix-run/react'
 import { formatDistanceToNow } from 'date-fns'
 import { useEffect, useState } from 'react'
diff --git a/app/routes/settings+/profile.change-email.tsx b/app/routes/settings+/profile.change-email.tsx
index 0378d62..ef2901d 100644
--- a/app/routes/settings+/profile.change-email.tsx
+++ b/app/routes/settings+/profile.change-email.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
@@ -9,8 +9,11 @@ import {
 } from '@remix-run/node'
 import { Form, useActionData, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import {
 	prepareVerification,
@@ -127,14 +130,17 @@ export default function ChangeEmailIndex() {
 			</p>
 			<div className="mx-auto mt-5 max-w-sm">
 				<Form method="POST" {...getFormProps(form)}>
-					<Field
-						labelProps={{ children: 'New Email' }}
-						inputProps={{
-							...getInputProps(fields.email, { type: 'email' }),
-							autoComplete: 'email',
-						}}
-						errors={fields.email.errors}
-					/>
+					<Field>
+						<Label htmlFor={fields.email.id}>New Email</Label>
+						<InputConform
+							meta={fields.email}
+							type="text"
+							autoComplete="email"
+						/>
+						{fields.email.errors && (
+							<FieldError>{fields.email.errors}</FieldError>
+						)}
+					</Field>
 					<ErrorList id={form.errorId} errors={form.errors} />
 					<div>
 						<StatusButton
diff --git a/app/routes/settings+/profile.index.tsx b/app/routes/settings+/profile.index.tsx
index 380cfa2..8f897e2 100644
--- a/app/routes/settings+/profile.index.tsx
+++ b/app/routes/settings+/profile.index.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, 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'
@@ -9,9 +9,12 @@ import {
 } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { requireUserId, sessionKey } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -237,21 +240,18 @@ function UpdateProfile() {
 	return (
 		<fetcher.Form method="POST" {...getFormProps(form)}>
 			<div className="grid grid-cols-6 gap-x-10">
-				<Field
-					className="col-span-3"
-					labelProps={{
-						htmlFor: fields.username.id,
-						children: 'Username',
-					}}
-					inputProps={getInputProps(fields.username, { type: 'text' })}
-					errors={fields.username.errors}
-				/>
-				<Field
-					className="col-span-3"
-					labelProps={{ htmlFor: fields.name.id, children: 'Name' }}
-					inputProps={getInputProps(fields.name, { type: 'text' })}
-					errors={fields.name.errors}
-				/>
+				<Field className="col-span-3">
+					<Label htmlFor={fields.username.id}>Username</Label>
+					<InputConform meta={fields.username} type="text" />
+					{fields.username.errors && (
+						<FieldError>{fields.username.errors}</FieldError>
+					)}
+				</Field>
+				<Field className="col-span-3">
+					<Label htmlFor={fields.name.id}>name</Label>
+					<InputConform meta={fields.name} type="text" />
+					{fields.name.errors && <FieldError>{fields.name.errors}</FieldError>}
+				</Field>
 			</div>
 
 			<ErrorList errors={form.errors} id={form.errorId} />
diff --git a/app/routes/settings+/profile.password.tsx b/app/routes/settings+/profile.password.tsx
index afdf7af..3479640 100644
--- a/app/routes/settings+/profile.password.tsx
+++ b/app/routes/settings+/profile.password.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
@@ -9,9 +9,12 @@ import {
 } from '@remix-run/node'
 import { Form, Link, useActionData } from '@remix-run/react'
 import { z } from 'zod'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import {
 	getPasswordHash,
@@ -134,32 +137,42 @@ export default function ChangePasswordRoute() {
 
 	return (
 		<Form method="POST" {...getFormProps(form)} className="mx-auto max-w-md">
-			<Field
-				labelProps={{ children: 'Current Password' }}
-				inputProps={{
-					...getInputProps(fields.currentPassword, { type: 'password' }),
-					autoComplete: 'current-password',
-				}}
-				errors={fields.currentPassword.errors}
-			/>
-			<Field
-				labelProps={{ children: 'New Password' }}
-				inputProps={{
-					...getInputProps(fields.newPassword, { type: 'password' }),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.newPassword.errors}
-			/>
-			<Field
-				labelProps={{ children: 'Confirm New Password' }}
-				inputProps={{
-					...getInputProps(fields.confirmNewPassword, {
-						type: 'password',
-					}),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.confirmNewPassword.errors}
-			/>
+			<Field>
+				<Label htmlFor={fields.currentPassword.id}>Current Password</Label>
+				<InputConform
+					meta={fields.currentPassword}
+					type="text"
+					autoComplete="current-password"
+				/>
+				{fields.currentPassword.errors && (
+					<FieldError>{fields.currentPassword.errors}</FieldError>
+				)}
+			</Field>
+			<Field>
+				<Label htmlFor={fields.newPassword.id}>New Password</Label>
+				<InputConform
+					meta={fields.newPassword}
+					type="text"
+					autoComplete="new-password"
+				/>
+				{fields.newPassword.errors && (
+					<FieldError>{fields.newPassword.errors}</FieldError>
+				)}
+			</Field>
+			<Field>
+				<Label htmlFor={fields.confirmNewPassword.id}>
+					Confirm New Password
+				</Label>
+				<InputConform
+					meta={fields.confirmNewPassword}
+					type="text"
+					autoComplete="new-password"
+				/>
+				{fields.confirmNewPassword.errors && (
+					<FieldError>{fields.confirmNewPassword.errors}</FieldError>
+				)}
+			</Field>
+
 			<ErrorList id={form.errorId} errors={form.errors} />
 			<div className="grid w-full grid-cols-2 gap-6">
 				<Button variant="secondary" asChild>
diff --git a/app/routes/settings+/profile.password_.create.tsx b/app/routes/settings+/profile.password_.create.tsx
index 24770f8..18bc117 100644
--- a/app/routes/settings+/profile.password_.create.tsx
+++ b/app/routes/settings+/profile.password_.create.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
@@ -8,9 +8,12 @@ import {
 	type ActionFunctionArgs,
 } from '@remix-run/node'
 import { Form, Link, useActionData } from '@remix-run/react'
-import { ErrorList, Field } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { getPasswordHash, requireUserId } from '#app/utils/auth.server.ts'
 import { prisma } from '#app/utils/db.server.ts'
@@ -93,24 +96,29 @@ export default function CreatePasswordRoute() {
 
 	return (
 		<Form method="POST" {...getFormProps(form)} className="mx-auto max-w-md">
-			<Field
-				labelProps={{ children: 'New Password' }}
-				inputProps={{
-					...getInputProps(fields.password, { type: 'password' }),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.password.errors}
-			/>
-			<Field
-				labelProps={{ children: 'Confirm New Password' }}
-				inputProps={{
-					...getInputProps(fields.confirmPassword, {
-						type: 'password',
-					}),
-					autoComplete: 'new-password',
-				}}
-				errors={fields.confirmPassword.errors}
-			/>
+			<Field>
+				<Label htmlFor={fields.password.id}>New Password</Label>
+				<InputConform
+					meta={fields.password}
+					type="text"
+					autoComplete="new-password"
+				/>
+				{fields.password.errors && (
+					<FieldError>{fields.password.errors}</FieldError>
+				)}
+			</Field>
+			<Field>
+				<Label htmlFor={fields.confirmPassword.id}>Confirm New Password</Label>
+				<InputConform
+					meta={fields.confirmPassword}
+					type="text"
+					autoComplete="new-password"
+				/>
+				{fields.confirmPassword.errors && (
+					<FieldError>{fields.confirmPassword.errors}</FieldError>
+				)}
+			</Field>
+
 			<ErrorList id={form.errorId} errors={form.errors} />
 			<div className="grid w-full grid-cols-2 gap-6">
 				<Button variant="secondary" asChild>
diff --git a/app/routes/settings+/profile.photo.tsx b/app/routes/settings+/profile.photo.tsx
index 5a9718b..13fb844 100644
--- a/app/routes/settings+/profile.photo.tsx
+++ b/app/routes/settings+/profile.photo.tsx
@@ -18,7 +18,7 @@ import {
 } from '@remix-run/react'
 import { useState } from 'react'
 import { z } from 'zod'
-import { ErrorList } from '#app/components/forms.tsx'
+import { ErrorList } from '#app/components/form/ErrorList.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
diff --git a/app/routes/settings+/profile.two-factor.verify.tsx b/app/routes/settings+/profile.two-factor.verify.tsx
index 762d8bc..3f51a8a 100644
--- a/app/routes/settings+/profile.two-factor.verify.tsx
+++ b/app/routes/settings+/profile.two-factor.verify.tsx
@@ -1,4 +1,4 @@
-import { getFormProps, getInputProps, useForm } from '@conform-to/react'
+import { getFormProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
 import {
@@ -15,8 +15,11 @@ import {
 } from '@remix-run/react'
 import * as QRCode from 'qrcode'
 import { z } from 'zod'
-import { ErrorList, OTPField } from '#app/components/forms.tsx'
+import { InputOTPConform } from '#app/components/form/conform/InputOTP.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Icon } from '#app/components/ui/icon.tsx'
+import { Label } from '#app/components/ui/label.js'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
 import { isCodeValid } from '#app/routes/_auth+/verify.server.ts'
 import { requireUserId } from '#app/utils/auth.server.ts'
@@ -176,18 +179,19 @@ export default function TwoFactorRoute() {
 				<div className="flex w-full max-w-xs flex-col justify-center gap-4">
 					<Form method="POST" {...getFormProps(form)} className="flex-1">
 						<div className="flex items-center justify-center">
-							<OTPField
-								labelProps={{
-									htmlFor: fields.code.id,
-									children: 'Code',
-								}}
-								inputProps={{
-									...getInputProps(fields.code, { type: 'text' }),
-									autoFocus: true,
-									autoComplete: 'one-time-code',
-								}}
-								errors={fields.code.errors}
-							/>
+							<Field>
+								<Label htmlFor={fields.code.id}>Code</Label>
+								<InputOTPConform
+									meta={fields.code}
+									length={6}
+									autoFocus
+									autoComplete="one-time-code"
+									autoCapitalise
+								/>
+								{fields.code.errors && (
+									<FieldError>{fields.code.errors}</FieldError>
+								)}
+							</Field>
 						</div>
 
 						<div className="min-h-[32px] px-4 pb-3 pt-1">
diff --git a/app/routes/users+/$username_+/__note-editor.tsx b/app/routes/users+/$username_+/__note-editor.tsx
index a5ab130..f272ff3 100644
--- a/app/routes/users+/$username_+/__note-editor.tsx
+++ b/app/routes/users+/$username_+/__note-editor.tsx
@@ -15,7 +15,10 @@ import { useState } from 'react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
-import { ErrorList, Field, TextareaField } from '#app/components/forms.tsx'
+import { InputConform } from '#app/components/form/conform/Input.js'
+import { TextareaConform } from '#app/components/form/conform/Textarea.js'
+import { ErrorList } from '#app/components/form/ErrorList.js'
+import { Field, FieldError } from '#app/components/form/Field.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { Label } from '#app/components/ui/label.tsx'
@@ -95,21 +98,20 @@ export function NoteEditor({
 					<button type="submit" className="hidden" />
 					{note ? <input type="hidden" name="id" value={note.id} /> : null}
 					<div className="flex flex-col gap-1">
-						<Field
-							labelProps={{ children: 'Title' }}
-							inputProps={{
-								autoFocus: true,
-								...getInputProps(fields.title, { type: 'text' }),
-							}}
-							errors={fields.title.errors}
-						/>
-						<TextareaField
-							labelProps={{ children: 'Content' }}
-							textareaProps={{
-								...getTextareaProps(fields.content),
-							}}
-							errors={fields.content.errors}
-						/>
+						<Field>
+							<Label htmlFor={fields.title.id}>Title</Label>
+							<InputConform meta={fields.title} type="text" autoFocus />
+							{fields.title.errors && (
+								<FieldError>{fields.title.errors}</FieldError>
+							)}
+						</Field>
+						<Field>
+							<Label htmlFor={fields.content.id}>Content</Label>
+							<TextareaConform meta={fields.content} />
+							{fields.content.errors && (
+								<FieldError>{fields.content.errors}</FieldError>
+							)}
+						</Field>
 						<div>
 							<Label>Images</Label>
 							<ul className="flex flex-col gap-4">
diff --git a/app/routes/users+/$username_+/notes.$noteId.tsx b/app/routes/users+/$username_+/notes.$noteId.tsx
index 0f648ce..f564ff7 100644
--- a/app/routes/users+/$username_+/notes.$noteId.tsx
+++ b/app/routes/users+/$username_+/notes.$noteId.tsx
@@ -17,7 +17,7 @@ import { formatDistanceToNow } from 'date-fns'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
-import { ErrorList } from '#app/components/forms.tsx'
+import { ErrorList } from '#app/components/form/ErrorList.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
 import { StatusButton } from '#app/components/ui/status-button.tsx'
diff --git a/app/routes/users+/index.tsx b/app/routes/users+/index.tsx
index a1851b3..2c75b20 100644
--- a/app/routes/users+/index.tsx
+++ b/app/routes/users+/index.tsx
@@ -2,7 +2,7 @@ import { json, redirect, type LoaderFunctionArgs } from '@remix-run/node'
 import { Link, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
-import { ErrorList } from '#app/components/forms.tsx'
+import { ErrorList } from '#app/components/form/ErrorList.js'
 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'
diff --git a/app/utils/auth.server.ts b/app/utils/auth.server.ts
index 8c8ae67..6871aa2 100644
--- a/app/utils/auth.server.ts
+++ b/app/utils/auth.server.ts
@@ -7,8 +7,8 @@ import { connectionSessionStorage, providers } from './connections.server.ts'
 import { prisma } from './db.server.ts'
 import { combineHeaders, downloadFile } from './misc.tsx'
 import { type ProviderUser } from './providers/provider.ts'
-import { authSessionStorage } from './session.server.ts'
 import { sendNotification } from './services/notification.service.ts'
+import { authSessionStorage } from './session.server.ts'
 
 export const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30
 export const getSessionExpirationDate = () =>
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index 9aa3d8d..dbb139f 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -1,7 +1,7 @@
 // TODO: Move most of this file entirely to the prisma database
 // TODO: Setup a seed variable JSON file that contains this data instead.
 
-import { Sort } from './request-helper'
+import { type Sort } from './request-helper'
 
 export const PETAL_BOT_ID = 'petal_bot_cjkhd7gxs0000rtxs3x2r0k7l'
 
diff --git a/other/svg-icons/calendar.svg b/other/svg-icons/calendar.svg
new file mode 100644
index 0000000..ba729f8
--- /dev/null
+++ b/other/svg-icons/calendar.svg
@@ -0,0 +1,13 @@
+<!-- Downloaded from @radix-ui/icons -->
+<!-- License https://github.com/radix-ui/icons/blob/master/LICENSE -->
+<!-- https://github.com/radix-ui/icons/blob/master/packages/radix-icons/icons/calendar.svg -->
+<!-- @radix-ui/icons -->
+<!-- https://github.com/radix-ui/icons/blob/master/LICENSE -->
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/package-lock.json b/package-lock.json
index b60cdbf..73e022f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,9 +24,12 @@
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-progress": "^1.1.0",
+        "@radix-ui/react-radio-group": "^1.2.0",
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
+        "@radix-ui/react-slider": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-switch": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-tooltip": "^1.1.2",
         "@react-email/components": "0.0.21",
@@ -43,6 +46,7 @@
         "class-variance-authority": "^0.7.0",
         "close-with-grace": "^1.3.0",
         "clsx": "^2.1.1",
+        "cmdk": "^1.0.0",
         "compression": "^1.7.4",
         "cookie": "^0.6.0",
         "cross-env": "^7.0.3",
@@ -65,7 +69,9 @@
         "morgan": "^1.10.0",
         "qrcode": "^1.5.3",
         "react": "^18.3.1",
+        "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
+        "react-intersection-observer": "^9.13.0",
         "recharts": "^2.12.7",
         "remix-auth": "^3.7.0",
         "remix-auth-github": "^1.7.0",
@@ -3208,6 +3214,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz",
+      "integrity": "sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
@@ -3313,6 +3351,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.0.tgz",
+      "integrity": "sha512-dAHCDA4/ySXROEPaRtaMV5WHL8+JB/DbtyTbJjYkY0RXmKMO2Ln8DFZhywG5/mVQ4WqHDBc8smc14yPXPqZHYA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -3331,6 +3402,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.0.tgz",
+      "integrity": "sha512-OBzy5WAj641k0AOSpKQtreDMe+isX0MQJ1IVyF03ucdF3DunOnROVrjWs8zsXUxC3zfZ6JL9HFVCUlMghz9dJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toast": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.1.tgz",
@@ -9536,6 +9636,384 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -18049,6 +18527,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-day-picker": {
+      "version": "8.10.1",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz",
+      "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.28.0 || ^3.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -18062,6 +18554,21 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.0.tgz",
+      "integrity": "sha512-y0UvBfjDiXqC8h0EWccyaj4dVBWMxgEx0t5RGNzQsvkfvZwugnKwxpu70StY4ivzYuMajavwUDjH4LJyIki9Lw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 0835b9b..aff6c3d 100644
--- a/package.json
+++ b/package.json
@@ -61,9 +61,12 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@react-email/components": "0.0.21",
@@ -80,6 +83,7 @@
     "class-variance-authority": "^0.7.0",
     "close-with-grace": "^1.3.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "compression": "^1.7.4",
     "cookie": "^0.6.0",
     "cross-env": "^7.0.3",
@@ -102,7 +106,9 @@
     "morgan": "^1.10.0",
     "qrcode": "^1.5.3",
     "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.13.0",
     "recharts": "^2.12.7",
     "remix-auth": "^3.7.0",
     "remix-auth-github": "^1.7.0",
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 432fc87..6cedf4b 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker'
-import { type Prisma, type Role, type User } from '@prisma/client'
+import { type Prisma } from '@prisma/client'
 import { promiseHash } from 'remix-utils/promise'
 import { generateApiKey } from '#app/utils/api.server.js'
 import { GENRES, PETAL_BOT_ID } from '#app/utils/constants.js'