diff --git a/.github/workflows/prettier.yaml b/.github/workflows/prettier.yaml
index 8bb29b28..211a9c9e 100644
--- a/.github/workflows/prettier.yaml
+++ b/.github/workflows/prettier.yaml
@@ -14,8 +14,6 @@ jobs:
     steps:
       - name: Check out repo
         uses: actions/checkout@v6
-        with:
-          ref: ${{ github.head_ref }}
       - name: Run Prettier
         uses: creyD/prettier_action@v4.6
         with:
diff --git a/website/__tests__/access-tokens.integration.test.tsx b/website/__tests__/access-tokens.integration.test.tsx
index c254063d..e220d52f 100644
--- a/website/__tests__/access-tokens.integration.test.tsx
+++ b/website/__tests__/access-tokens.integration.test.tsx
@@ -3,12 +3,17 @@ import userEvent from '@testing-library/user-event'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-// Mock react-hot-toast - must be before component import
-vi.mock('react-hot-toast', () => ({
+// Mock use-toast - must be before component import
+vi.mock('~/hooks/use-toast', () => ({
   toast: {
     success: vi.fn(),
     error: vi.fn(),
   },
+  useToast: () => ({
+    toast: vi.fn(),
+    toasts: [],
+    dismiss: vi.fn(),
+  }),
 }))
 
 // Mock the delete mutation
@@ -25,7 +30,7 @@ vi.mock('~/data/access-tokens/delete-access-token', () => ({
   }),
 }))
 
-import { toast } from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import AccessTokenCard from '~/components/access-tokens/AccessTokenCard'
 
 // Setup dayjs with relativeTime
diff --git a/website/__tests__/form.integration.test.tsx b/website/__tests__/form.integration.test.tsx
index 03afaadc..b267fa1d 100644
--- a/website/__tests__/form.integration.test.tsx
+++ b/website/__tests__/form.integration.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, it, expect, vi } from 'vitest'
 import { z } from 'zod'
-import Form from '~/components/forms/Form'
+import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormInput from '~/components/forms/FormInput'
 import FormButton from '~/components/forms/FormButton'
 
@@ -11,10 +11,14 @@ const LoginSchema = z.object({
   password: z.string().min(6, 'Password must be at least 6 characters'),
 })
 
+type FormResult = { [FORM_ERROR]?: string } | void
+
 function LoginForm({
   onSubmit,
 }: {
-  onSubmit: (values: z.infer<typeof LoginSchema>) => void
+  onSubmit: (
+    values: z.infer<typeof LoginSchema>
+  ) => FormResult | Promise<FormResult>
 }) {
   return (
     <Form schema={LoginSchema} onSubmit={onSubmit}>
@@ -37,11 +41,10 @@ describe('Form Integration', () => {
     await user.click(screen.getByRole('button', { name: /sign in/i }))
 
     await waitFor(() => {
-      expect(handleSubmit).toHaveBeenCalledWith(
-        { email: 'test@example.com', password: 'password123' },
-        expect.anything(),
-        expect.anything()
-      )
+      expect(handleSubmit).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123',
+      })
     })
   })
 
@@ -63,4 +66,52 @@ describe('Form Integration', () => {
 
     expect(handleSubmit).not.toHaveBeenCalled()
   })
+
+  it('shows submit error in alert when onSubmit returns FORM_ERROR', async () => {
+    const user = userEvent.setup()
+    const handleSubmit = vi.fn().mockResolvedValue({
+      [FORM_ERROR]: 'Invalid credentials. Please try again.',
+    })
+
+    render(<LoginForm onSubmit={handleSubmit} />)
+
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
+    await user.type(screen.getByLabelText(/password/i), 'password123')
+    await user.click(screen.getByRole('button', { name: /sign in/i }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+      expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument()
+    })
+  })
+
+  it('disables submit button while submitting', async () => {
+    const user = userEvent.setup()
+    let resolveSubmit: () => void
+    const handleSubmit = vi.fn().mockImplementation(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSubmit = resolve
+        })
+    )
+
+    render(<LoginForm onSubmit={handleSubmit} />)
+
+    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
+    await user.type(screen.getByLabelText(/password/i), 'password123')
+
+    const submitButton = screen.getByRole('button', { name: /sign in/i })
+    await user.click(submitButton)
+
+    await waitFor(() => {
+      expect(submitButton).toBeDisabled()
+    })
+
+    // Resolve the promise to complete submission
+    resolveSubmit!()
+
+    await waitFor(() => {
+      expect(submitButton).not.toBeDisabled()
+    })
+  })
 })
diff --git a/website/__tests__/search.integration.test.tsx b/website/__tests__/search.integration.test.tsx
index 8aa1d356..fddd6f8b 100644
--- a/website/__tests__/search.integration.test.tsx
+++ b/website/__tests__/search.integration.test.tsx
@@ -129,7 +129,7 @@ describe('Search Integration', () => {
     await waitFor(() => {
       expect(screen.getByText('No results found')).toBeInTheDocument()
       expect(
-        screen.getByText(/try prefixing your query with an @ symbol/i)
+        screen.getByText(/try prefixing with @ to search organizations/i)
       ).toBeInTheDocument()
     })
   })
diff --git a/website/components/access-tokens/AccessTokenCard.tsx b/website/components/access-tokens/AccessTokenCard.tsx
index 0c408235..8a188552 100644
--- a/website/components/access-tokens/AccessTokenCard.tsx
+++ b/website/components/access-tokens/AccessTokenCard.tsx
@@ -1,7 +1,14 @@
 import dayjs from 'dayjs'
-import { toast } from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import { useDeleteAccessTokenMutation } from '~/data/access-tokens/delete-access-token'
 import { Button } from '~/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card'
 
 export interface ApiTokenCardProps {
   tokenId: string
@@ -24,22 +31,26 @@ const AccessTokenCard = ({
     })
 
   return (
-    <div className="rounded-lg px-6 py-5 border border-gray-200 flex justify-between">
-      <div className="flex flex-col space-y-4">
-        <div className="font-medium text-lg dark:text-white">{tokenName}</div>
-        <div className="text-gray-500">{`Token: ${maskedToken}`}</div>
-        <div className="text-gray-400 text-sm">{`Created ${dayjs(
-          createdAt
-        ).fromNow()}`}</div>
-      </div>
-      <Button
-        variant="secondary"
-        onClick={() => deleteAccessToken({ tokenId })}
-        disabled={isDeletingAccessToken}
-      >
-        Revoke
-      </Button>
-    </div>
+    <Card>
+      <CardHeader className="flex flex-row items-start justify-between space-y-0">
+        <div className="space-y-1">
+          <CardTitle className="text-lg">{tokenName}</CardTitle>
+          <CardDescription>Token: {maskedToken}</CardDescription>
+        </div>
+        <Button
+          variant="secondary"
+          onClick={() => deleteAccessToken({ tokenId })}
+          disabled={isDeletingAccessToken}
+        >
+          Revoke
+        </Button>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">
+          Created {dayjs(createdAt).fromNow()}
+        </p>
+      </CardContent>
+    </Card>
   )
 }
 
diff --git a/website/components/forms/Form.tsx b/website/components/forms/Form.tsx
index 5b648c9f..328d7ad9 100644
--- a/website/components/forms/Form.tsx
+++ b/website/components/forms/Form.tsx
@@ -1,21 +1,47 @@
-import { PropsWithChildren, PropsWithoutRef } from 'react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { AlertCircle } from 'lucide-react'
 import {
-  Form as FinalForm,
-  FormProps as FinalFormProps,
-} from 'react-final-form'
+  createContext,
+  PropsWithChildren,
+  PropsWithoutRef,
+  useContext,
+} from 'react'
+import {
+  FieldValues,
+  FormProvider,
+  useForm,
+  UseFormReturn,
+} from 'react-hook-form'
 import { z } from 'zod'
+import { Alert, AlertDescription } from '~/components/ui/alert'
 import { cn } from '~/lib/utils'
-import { validateZodSchema } from '~/lib/zod-form-validator-utils'
-export { FORM_ERROR } from 'final-form'
+
+// FORM_ERROR constant for backwards compatibility
+export const FORM_ERROR = 'FINAL_FORM/form-error' as const
+
+// Context to share form instance with child components
+const FormContext = createContext<UseFormReturn<any> | null>(null)
+
+export function useFormInstance<T extends FieldValues = FieldValues>() {
+  const form = useContext(FormContext)
+  if (!form) {
+    throw new Error('useFormInstance must be used within a Form')
+  }
+  return form as UseFormReturn<T>
+}
 
 export interface FormProps<S extends z.ZodType<any, any>> extends Omit<
   PropsWithoutRef<JSX.IntrinsicElements['form']>,
   'onSubmit'
 > {
-  /** All your form fields */
+  /** Zod schema for validation */
   schema?: S
-  onSubmit: FinalFormProps<z.infer<S>>['onSubmit']
-  initialValues?: FinalFormProps<z.infer<S>>['initialValues']
+  /** Called on form submission. Return { [FORM_ERROR]: message } to show error */
+  onSubmit: (
+    values: z.infer<S>
+  ) => void | Promise<void | { [FORM_ERROR]?: string }>
+  /** Initial form values */
+  initialValues?: Partial<z.infer<S>>
 }
 
 function Form<S extends z.ZodType<any, any>>({
@@ -26,28 +52,41 @@ function Form<S extends z.ZodType<any, any>>({
   className,
   ...props
 }: PropsWithChildren<FormProps<S>>) {
+  const form = useForm<z.infer<S>>({
+    resolver: schema ? zodResolver(schema) : undefined,
+    defaultValues: initialValues as any,
+  })
+
+  const handleSubmit = async (values: z.infer<S>) => {
+    const result = await onSubmit(values)
+    if (result && FORM_ERROR in result && result[FORM_ERROR]) {
+      form.setError('root', { message: result[FORM_ERROR] })
+    }
+  }
+
+  const rootError = form.formState.errors.root?.message
+
   return (
-    <FinalForm
-      initialValues={initialValues}
-      validate={validateZodSchema(schema)}
-      onSubmit={onSubmit}
-      render={({ handleSubmit, submitError }) => (
+    <FormContext.Provider value={form}>
+      <FormProvider {...form}>
         <form
-          onSubmit={handleSubmit}
+          onSubmit={form.handleSubmit(handleSubmit)}
           className={cn('flex flex-col gap-2', className)}
+          noValidate
           {...props}
         >
-          {submitError && (
-            <div role="alert" className="text-sm text-red-600">
-              {submitError}
-            </div>
+          {rootError && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertDescription>{rootError}</AlertDescription>
+            </Alert>
           )}
 
           {/* Form fields supplied as children are rendered here */}
           {children}
         </form>
-      )}
-    />
+      </FormProvider>
+    </FormContext.Provider>
   )
 }
 
diff --git a/website/components/forms/FormButton.tsx b/website/components/forms/FormButton.tsx
index 59c43a25..29acdb93 100644
--- a/website/components/forms/FormButton.tsx
+++ b/website/components/forms/FormButton.tsx
@@ -1,17 +1,19 @@
 import { forwardRef } from 'react'
-import { useFormState } from 'react-final-form'
+import { useFormContext } from 'react-hook-form'
 import { cn } from '~/lib/utils'
 import { Button, ButtonProps } from '~/components/ui/button'
 
 export interface FormButtonProps extends ButtonProps {}
 
 const FormButton = forwardRef<HTMLButtonElement, FormButtonProps>(
-  ({ children, className, ...props }, ref) => {
-    const { submitting } = useFormState()
+  ({ children, className, disabled, ...props }, ref) => {
+    const {
+      formState: { isSubmitting },
+    } = useFormContext()
 
     return (
       <Button
-        disabled={submitting}
+        disabled={isSubmitting || disabled}
         className={cn(
           'mt-4 bg-gray-100 hover:bg-gray-200 text-gray-800 transition dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-white',
           className
diff --git a/website/components/forms/FormInput.tsx b/website/components/forms/FormInput.tsx
index 946eff25..5f4e573f 100644
--- a/website/components/forms/FormInput.tsx
+++ b/website/components/forms/FormInput.tsx
@@ -1,5 +1,5 @@
-import { ComponentPropsWithoutRef, forwardRef, PropsWithoutRef } from 'react'
-import { useField, UseFieldConfig } from 'react-final-form'
+import { ComponentPropsWithoutRef, PropsWithoutRef } from 'react'
+import { useFormContext } from 'react-hook-form'
 import { Input } from '~/components/ui/input'
 import { Label } from '../ui/label'
 import { cn } from '~/lib/utils'
@@ -15,52 +15,55 @@ export interface FormInputProps extends PropsWithoutRef<
   type?: 'text' | 'password' | 'email' | 'number'
   outerProps?: PropsWithoutRef<JSX.IntrinsicElements['div']>
   labelProps?: ComponentPropsWithoutRef<'label'>
-  fieldProps?: UseFieldConfig
 }
 
-const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
-  (
-    { name, label, className, outerProps, fieldProps, labelProps, ...props },
-    ref
-  ) => {
-    const {
-      input,
-      meta: { touched, error, submitError, submitting },
-    } = useField(name, {
-      parse:
-        props.type === 'number'
-          ? (Number as any)
-          : // Converting `""` to `null` ensures empty values will be set to null in the DB
-            (v) => (v === '' ? null : v),
-      ...fieldProps,
-    })
+function FormInput({
+  name,
+  label,
+  className,
+  outerProps,
+  labelProps,
+  type,
+  ...props
+}: FormInputProps) {
+  const {
+    register,
+    formState: { errors, isSubmitting, submitCount },
+  } = useFormContext()
 
-    const normalizedError = Array.isArray(error)
-      ? error.join(', ')
-      : error || submitError
+  const fieldError = errors[name]
+  const errorMessage = fieldError?.message as string | undefined
 
-    return (
-      <div {...outerProps} className={cn('space-y-1', className)}>
-        <Label htmlFor={name} {...labelProps}>
-          {label}
-        </Label>
-        <Input
-          id={name}
-          {...input}
-          disabled={submitting}
-          {...props}
-          ref={ref}
-        />
+  // Get the register props including the ref
+  const { ref, ...registerProps } = register(name, {
+    valueAsNumber: type === 'number',
+  })
 
-        {touched && normalizedError && (
-          <div role="alert" className="text-sm text-red-600">
-            {normalizedError}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
+  // Show errors after first submit attempt
+  const showError = submitCount > 0 && !!errorMessage
+
+  return (
+    <div {...outerProps} className={cn('space-y-1', className)}>
+      <Label htmlFor={name} {...labelProps}>
+        {label}
+      </Label>
+      <Input
+        id={name}
+        type={type}
+        disabled={isSubmitting || props.disabled}
+        {...props}
+        {...registerProps}
+        ref={ref}
+      />
+
+      {showError && (
+        <p role="alert" className="text-sm text-destructive">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  )
+}
 
 FormInput.displayName = 'FormInput'
 
diff --git a/website/components/layouts/Navbar.tsx b/website/components/layouts/Navbar.tsx
index 7b012b4f..451b900f 100644
--- a/website/components/layouts/Navbar.tsx
+++ b/website/components/layouts/Navbar.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useCallback, useMemo } from 'react'
-import { toast } from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Search from '~/components/search/Search'
 import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar'
 import {
diff --git a/website/components/packages/PackageCard.tsx b/website/components/packages/PackageCard.tsx
index 7e4c942f..7fc9bb88 100644
--- a/website/components/packages/PackageCard.tsx
+++ b/website/components/packages/PackageCard.tsx
@@ -1,5 +1,12 @@
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid'
 import Link from 'next/link'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/components/ui/card'
 import { cn } from '~/lib/utils'
 
 export interface PackageCardProps {
@@ -19,31 +26,32 @@ const PackageCard = ({ pkg, className }: PackageCardProps) => {
     <Link
       key={pkg.package_alias ?? pkg.package_name}
       href={`/${pkg.handle}/${pkg.partial_name}`}
-      className={cn(
-        'col-span-4  from-white via-white to-gray-100 rounded-lg px-6 py-5 transition duration-300 group hover:shadow-md opacity-90 hover:opacity-100 border border-gray-200',
-        'dark:from-slate-600 dark:to-slate-800 dark:border-slate-800',
-        className
-      )}
+      className={cn('col-span-4 block group', className)}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-1">
-          <p className="font-medium dark:text-white overflow-hidden truncate w-36">
-            {pkg.partial_name}{' '}
+      <Card className="h-full transition duration-300 hover:shadow-md opacity-90 hover:opacity-100">
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2">
+              <CardTitle className="text-base font-medium overflow-hidden truncate max-w-36">
+                {pkg.partial_name}
+              </CardTitle>
+              <span className="font-mono text-xs text-muted-foreground">
+                v{pkg.latest_version}
+              </span>
+            </div>
+            <ArrowTopRightOnSquareIcon
+              className="w-4 h-4 text-muted-foreground transition group-hover:text-foreground"
+              aria-hidden="true"
+            />
+          </div>
+          <CardDescription>{pkg.handle}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            {pkg.control_description}
           </p>
-
-          <p className="font-mono text-xs text-gray-400">
-            v{pkg.latest_version}
-          </p>
-        </div>
-        <ArrowTopRightOnSquareIcon
-          className="w-4 h-4 text-gray-400 transition group-hover:text-gray-600 dark:group-hover:text-gray-200"
-          aria-hidden="true"
-        />
-      </div>
-      <p className="text-gray-400">{pkg.handle}</p>
-      <p className="mt-2 text-sm text-gray-600 dark:text-gray-200">
-        {pkg.control_description}
-      </p>
+        </CardContent>
+      </Card>
     </Link>
   )
 }
diff --git a/website/components/search/Search.tsx b/website/components/search/Search.tsx
index 51bf59f3..6a441a2d 100644
--- a/website/components/search/Search.tsx
+++ b/website/components/search/Search.tsx
@@ -1,22 +1,25 @@
-import * as Dialog from '@radix-ui/react-dialog'
 import { keepPreviousData } from '@tanstack/react-query'
 import { useRouter } from 'next/router'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { usePackagesSearchQuery } from '~/data/packages/packages-search-query'
 import { useDebounce } from '~/lib/utils'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from '../ui/command'
+import { Popover, PopoverAnchor, PopoverContent } from '../ui/popover'
 import Spinner from '../ui/spinner'
 import SearchInput from './SearchInput'
-import SearchPackageRow from './SearchPackageRow'
 
 const Search = () => {
   const [searchValue, setSearchValue] = useState('')
   const [isOpen, setIsOpen] = useState(false)
 
-  const containerRef = useRef<HTMLInputElement>(null)
-
   const onSearchChange = (value: string) => {
     setSearchValue(value)
-
     setIsOpen(value.trim().length > 0)
   }
 
@@ -33,6 +36,16 @@ const Search = () => {
   )
 
   const router = useRouter()
+
+  const handleSelect = useCallback(
+    (handle: string, partialName: string) => {
+      setIsOpen(false)
+      setSearchValue('')
+      router.push(`/${handle}/${partialName}`)
+    },
+    [router]
+  )
+
   useEffect(() => {
     const handler = () => {
       setIsOpen(false)
@@ -46,19 +59,23 @@ const Search = () => {
   }, [router.events])
 
   return (
-    <div className="relative">
-      <SearchInput value={searchValue} onChange={onSearchChange} />
-
-      <div ref={containerRef} />
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverAnchor asChild>
+        <div className="relative">
+          <SearchInput value={searchValue} onChange={onSearchChange} />
+        </div>
+      </PopoverAnchor>
 
-      <Dialog.Root modal={false} open={isOpen} onOpenChange={setIsOpen}>
-        <Dialog.Portal container={containerRef.current}>
-          <Dialog.Content
-            className="absolute z-10 w-full mt-2 left-0 max-h-[85vh] border shadow-lg border-gray-300 rounded-md bg-white focus:outline-none dark:bg-slate-800 dark:border-slate-600"
-            onOpenAutoFocus={(e) => {
-              e.preventDefault()
-            }}
-          >
+      <PopoverContent
+        className="w-[var(--radix-popover-trigger-width)] max-h-[85vh] p-0 border-border bg-background"
+        align="start"
+        sideOffset={8}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault()
+        }}
+      >
+        <Command shouldFilter={false}>
+          <CommandList>
             {isLoading && (
               <div className="flex items-center justify-center px-4 py-6">
                 <Spinner />
@@ -67,37 +84,46 @@ const Search = () => {
 
             {isError && (
               <div className="flex items-center justify-center px-4 py-6">
-                <p className="text-gray-700">Something went wrong</p>
+                <p className="text-muted-foreground">Something went wrong</p>
               </div>
             )}
 
-            {isSuccess &&
-              (data.length > 0 ? (
-                <div className="flex flex-col divide-y divide-gray-300">
-                  {data.map((pkg) => (
-                    <SearchPackageRow
-                      key={pkg.id}
-                      handle={pkg.handle}
-                      partialName={pkg.partial_name}
-                      createdAt={pkg.created_at}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <div className="flex flex-col items-center justify-center gap-4 px-4 py-6 text-center">
-                  <p className="text-gray-600">No results found</p>
-                  <p className="text-sm text-gray-500">
-                    To search packages in an organization, try prefixing your
-                    query with an @ symbol.
-                    <br />
-                    For example @supabase to see packages from Supabase.
+            {isSuccess && data.length === 0 && (
+              <CommandEmpty>
+                <div className="flex flex-col items-center gap-2">
+                  <p>No results found</p>
+                  <p className="text-xs text-muted-foreground">
+                    Try prefixing with @ to search organizations
                   </p>
                 </div>
-              ))}
-          </Dialog.Content>
-        </Dialog.Portal>
-      </Dialog.Root>
-    </div>
+              </CommandEmpty>
+            )}
+
+            {isSuccess && data.length > 0 && (
+              <CommandGroup>
+                {data.map((pkg) => (
+                  <CommandItem
+                    key={pkg.id}
+                    value={`${pkg.handle}/${pkg.partial_name}`}
+                    onSelect={() => handleSelect(pkg.handle, pkg.partial_name)}
+                    className="cursor-pointer"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <span className="font-medium">
+                        {pkg.handle}/{pkg.partial_name}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {new Date(pkg.created_at).toLocaleString()}
+                      </span>
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   )
 }
 
diff --git a/website/components/themes/ThemeSwitcher.tsx b/website/components/themes/ThemeSwitcher.tsx
index 7ddd1367..a3b11cce 100644
--- a/website/components/themes/ThemeSwitcher.tsx
+++ b/website/components/themes/ThemeSwitcher.tsx
@@ -1,4 +1,5 @@
 import { MoonIcon, SunIcon } from '@heroicons/react/24/outline'
+import { Button } from '~/components/ui/button'
 import { useThemeContext } from './ThemeContext'
 
 const ThemeSwitcher = () => {
@@ -10,13 +11,15 @@ const ThemeSwitcher = () => {
   }
 
   return (
-    <button
+    <Button
+      variant="ghost"
+      size="icon"
       onClick={handleThemeChange}
-      className="p-1 rounded cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100"
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
     >
-      {theme === 'dark' && <MoonIcon className="w-5 h-5" />}
-      {theme === 'light' && <SunIcon className="w-5 h-5" />}
-    </button>
+      {theme === 'dark' && <MoonIcon className="h-5 w-5" />}
+      {theme === 'light' && <SunIcon className="h-5 w-5" />}
+    </Button>
   )
 }
 
diff --git a/website/components/ui/alert.tsx b/website/components/ui/alert.tsx
new file mode 100644
index 00000000..b68a355d
--- /dev/null
+++ b/website/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn('mb-1 font-medium leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('text-sm [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertTitle, AlertDescription }
diff --git a/website/components/ui/command.tsx b/website/components/ui/command.tsx
new file mode 100644
index 00000000..6485326f
--- /dev/null
+++ b/website/components/ui/command.tsx
@@ -0,0 +1,153 @@
+'use client'
+
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+import { Dialog, DialogContent } from '~/components/ui/dialog'
+
+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
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  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 gap-2 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      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/website/components/ui/dialog.tsx b/website/components/ui/dialog.tsx
new file mode 100644
index 00000000..ecf2f40f
--- /dev/null
+++ b/website/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+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/website/components/ui/form.tsx b/website/components/ui/form.tsx
new file mode 100644
index 00000000..a50f133b
--- /dev/null
+++ b/website/components/ui/form.tsx
@@ -0,0 +1,178 @@
+'use client'
+
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form'
+
+import { cn } from '~/lib/utils'
+import { Label } from '~/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/website/components/ui/loader.tsx b/website/components/ui/loader.tsx
deleted file mode 100644
index ae527359..00000000
--- a/website/components/ui/loader.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Skeleton } from './skeleton'
-
-interface LoaderRowProps {
-  className?: string
-  delayIndex?: number
-  animationDelay?: number
-}
-
-const LoaderRow = ({
-  className = '',
-  delayIndex = 0,
-  animationDelay = 150,
-}: LoaderRowProps) => {
-  return (
-    <Skeleton
-      className={`h-6 mx-1 ${className}`}
-      style={{
-        animationDelay: `${delayIndex * animationDelay}ms`,
-      }}
-    />
-  )
-}
-
-const ShimmeringLoader = () => {
-  return (
-    <div className="w-full space-y-3">
-      <LoaderRow />
-      <LoaderRow className="w-3/4" />
-      <LoaderRow className="w-1/2" />
-    </div>
-  )
-}
-
-export default ShimmeringLoader
diff --git a/website/components/ui/popover.tsx b/website/components/ui/popover.tsx
new file mode 100644
index 00000000..33d12e65
--- /dev/null
+++ b/website/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '~/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/website/components/ui/textarea.tsx b/website/components/ui/textarea.tsx
new file mode 100644
index 00000000..0c23e673
--- /dev/null
+++ b/website/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<'textarea'>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/website/hooks/use-toast.ts b/website/hooks/use-toast.ts
index 773be9be..d697a88a 100644
--- a/website/hooks/use-toast.ts
+++ b/website/hooks/use-toast.ts
@@ -6,7 +6,7 @@ import * as React from 'react'
 import type { ToastActionElement, ToastProps } from '~/components/ui/toast'
 
 const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_REMOVE_DELAY = 5000
 
 type ToasterToast = ToastProps & {
   id: string
@@ -139,7 +139,25 @@ function dispatch(action: Action) {
 
 type Toast = Omit<ToasterToast, 'id'>
 
-function toast({ ...props }: Toast) {
+interface ToastFunction {
+  (props: Toast): {
+    id: string
+    dismiss: () => void
+    update: (props: ToasterToast) => void
+  }
+  success: (message: string) => {
+    id: string
+    dismiss: () => void
+    update: (props: ToasterToast) => void
+  }
+  error: (message: string) => {
+    id: string
+    dismiss: () => void
+    update: (props: ToasterToast) => void
+  }
+}
+
+const toast: ToastFunction = function ({ ...props }: Toast) {
   const id = genId()
 
   const update = (props: ToasterToast) =>
@@ -168,6 +186,22 @@ function toast({ ...props }: Toast) {
   }
 }
 
+// Helper methods for common toast patterns (similar to react-hot-toast API)
+toast.success = (message: string) => {
+  return toast({
+    title: 'Success',
+    description: message,
+  })
+}
+
+toast.error = (message: string) => {
+  return toast({
+    variant: 'destructive',
+    title: 'Error',
+    description: message,
+  })
+}
+
 function useToast() {
   const [state, setState] = React.useState<State>(memoryState)
 
diff --git a/website/lib/zod-form-validator-utils.ts b/website/lib/zod-form-validator-utils.ts
deleted file mode 100644
index 5ec7304f..00000000
--- a/website/lib/zod-form-validator-utils.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-// From: https://github.com/blitz-js/blitz/blob/main/packages/blitz/src/utils/zod.ts
-
-import type { ZodError } from 'zod'
-
-export type ParserType = 'sync' | 'async'
-
-export function recursiveFormatZodErrors(errors: any): any {
-  let formattedErrors: any[] | Record<string, any> = {}
-
-  for (const key in errors) {
-    if (key === '_errors') {
-      continue
-    }
-
-    if (errors[key]?._errors?.[0]) {
-      if (!isNaN(key as any) && !Array.isArray(formattedErrors)) {
-        formattedErrors = []
-      }
-      ;(formattedErrors as any)[key] = errors[key]._errors[0]
-    } else {
-      if (!isNaN(key as any) && !Array.isArray(formattedErrors)) {
-        formattedErrors = []
-      }
-      ;(formattedErrors as any)[key] = recursiveFormatZodErrors(errors[key])
-    }
-  }
-
-  return formattedErrors
-}
-
-export function formatZodError(error: ZodError) {
-  if (!error || typeof error.format !== 'function') {
-    throw new Error(
-      'The argument to formatZodError must be a zod error with error.format()'
-    )
-  }
-
-  const errors = error.format()
-  return recursiveFormatZodErrors(errors)
-}
-
-const validateZodSchemaSync =
-  (schema: any): any =>
-  (values: any) => {
-    if (!schema) return {}
-    try {
-      schema.parse(values)
-      return {}
-    } catch (error: any) {
-      return error.format ? formatZodError(error) : error.toString()
-    }
-  }
-
-const validateZodSchemaAsync = (schema: any) => async (values: any) => {
-  if (!schema) return {}
-  try {
-    await schema.parseAsync(values)
-    return {}
-  } catch (error: any) {
-    return error.format ? formatZodError(error) : error.toString()
-  }
-}
-
-// type zodSchemaReturn = typeof validateZodSchemaAsync | typeof validateZodSchemaSync
-// : (((values:any) => any) | ((values:any) => Promise<any>)) =>
-export function validateZodSchema(
-  schema: any,
-  parserType: 'sync'
-): (values: any) => any
-export function validateZodSchema(
-  schema: any,
-  parserType: 'async'
-): (values: any) => Promise<any>
-export function validateZodSchema(schema: any): (values: any) => Promise<any>
-export function validateZodSchema(
-  schema: any,
-  parserType: ParserType = 'async'
-) {
-  if (parserType === 'sync') {
-    return validateZodSchemaSync(schema)
-  } else {
-    return validateZodSchemaAsync(schema)
-  }
-}
diff --git a/website/package.json b/website/package.json
index b07736e4..dfcbdafb 100644
--- a/website/package.json
+++ b/website/package.json
@@ -14,10 +14,12 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
@@ -30,16 +32,15 @@
     "@types/react-dom": "^18.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "dayjs": "^1.11.13",
     "eslint": "^9.39.1",
     "eslint-config-next": "^15.4.5",
-    "final-form": "^5.0.0",
     "lucide-react": "^0.536.0",
     "next": "^16.1.1",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-final-form": "^7.0.0",
-    "react-hot-toast": "^2.5.2",
+    "react-hook-form": "^7.71.1",
     "react-markdown": "^9.0.1",
     "rehype-highlight": "^7.0.2",
     "remark-gfm": "^4.0.1",
@@ -60,7 +61,7 @@
     "autoprefixer": "^10.4.20",
     "jsdom": "^27.4.0",
     "postcss": "^8.4.49",
-    "prettier": "^3.7.4",
+    "prettier": "^3.8.0",
     "tailwindcss": "^3.4.17",
     "vitest": "^4.0.16"
   }
diff --git a/website/pages/[handle]/_/access-tokens.tsx b/website/pages/[handle]/_/access-tokens.tsx
index 6428d4ae..d36f6ddf 100644
--- a/website/pages/[handle]/_/access-tokens.tsx
+++ b/website/pages/[handle]/_/access-tokens.tsx
@@ -1,13 +1,17 @@
+import { AlertCircle } from 'lucide-react'
 import Head from 'next/head'
 import { MouseEventHandler, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import AccessTokenCard from '~/components/access-tokens/AccessTokenCard'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
 import Layout from '~/components/layouts/Layout'
+import { Alert, AlertDescription } from '~/components/ui/alert'
 import { Button } from '~/components/ui/button'
 import CopyButton from '~/components/ui/copy-button'
+import { Skeleton } from '~/components/ui/skeleton'
+import { Textarea } from '~/components/ui/textarea'
 import H1 from '~/components/ui/typography/h1'
 import H3 from '~/components/ui/typography/h3'
 import { useAccessTokensQuery } from '~/data/access-tokens/access-tokens-query'
@@ -65,7 +69,12 @@ const ApiTokensPage: NextPageWithLayout = () => {
             New Token
           </Button>
         </div>
-        {accessTokensLoading && <p className="dark:text-white">Loading...</p>}
+        {accessTokensLoading && (
+          <div className="space-y-4">
+            <Skeleton className="h-24 w-full" />
+            <Skeleton className="h-24 w-full" />
+          </div>
+        )}
         {isAccessTokensSuccess &&
           accessTokens.length > 0 &&
           accessTokens.map((accessToken) => (
@@ -83,7 +92,10 @@ const ApiTokensPage: NextPageWithLayout = () => {
           </p>
         )}
         {isAccessTokensError && (
-          <p className="text-red-500">Error loading access tokens</p>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertDescription>Error loading access tokens</AlertDescription>
+          </Alert>
         )}
       </>
     )
@@ -108,19 +120,18 @@ const ApiTokensPage: NextPageWithLayout = () => {
         </span>{' '}
         command in a terminal and paste the copied token.
       </H3>
-      <Form onSubmit={() => {}} initialValues={{ token: `${newToken}` }}>
-        <div className="flex flex-row w-full rounded-md border border-slate-300">
-          <textarea
-            disabled
-            value={`${newToken}`}
-            className="w-full h-15 mt-1 rounded-md border-none text-sm resize-none bg-transparent text-slate-400"
-          />
-          <CopyButton
-            className="w-14 rounded-none rounded-r-md"
-            getValue={() => newToken}
-          />
-        </div>
-      </Form>
+      <div className="flex flex-row w-full">
+        <Textarea
+          disabled
+          value={newToken}
+          className="flex-1 min-h-[60px] resize-none rounded-r-none border-r-0"
+          readOnly
+        />
+        <CopyButton
+          className="w-14 rounded-none rounded-r-md border border-l-0 border-input"
+          getValue={() => newToken}
+        />
+      </div>
       <div className="flex flex-row-reverse">
         <Button onClick={onCloseButtonClick} variant="secondary">
           Close
diff --git a/website/pages/[handle]/_/edit.tsx b/website/pages/[handle]/_/edit.tsx
index 7c324d33..a335bf2d 100644
--- a/website/pages/[handle]/_/edit.tsx
+++ b/website/pages/[handle]/_/edit.tsx
@@ -1,11 +1,13 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect, useRef, useState } from 'react'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
 import Layout from '~/components/layouts/Layout'
+import { Button } from '~/components/ui/button'
+import { Skeleton } from '~/components/ui/skeleton'
 import H1 from '~/components/ui/typography/h1'
 import { useUsersOrganizationsQuery } from '~/data/organizations/users-organizations-query'
 import { useProfileQuery } from '~/data/profiles/profile-query'
@@ -121,7 +123,19 @@ const EditAccountPage: NextPageWithLayout = () => {
         </title>
       </Head>
       {isLoading ? (
-        <p>Loading</p>
+        <div className="w-full max-w-lg mx-auto space-y-8">
+          <Skeleton className="h-10 w-48" />
+          <div className="flex items-center mb-4 space-x-8">
+            <Skeleton className="w-24 h-24 rounded-full" />
+            <Skeleton className="h-10 w-32" />
+          </div>
+          <div className="space-y-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+          <Skeleton className="h-10 w-32" />
+        </div>
       ) : (
         <div className="w-full max-w-lg mx-auto space-y-8">
           <H1 className="!text-3xl">Edit {profile?.type ?? ''}</H1>
@@ -147,14 +161,14 @@ const EditAccountPage: NextPageWithLayout = () => {
                 className="hidden"
                 accept="image/jpeg, image/png"
               />
-              <button
+              <Button
                 type="button"
-                className="flex items-center px-4 py-2 space-x-2 text-sm text-gray-600 border-gray-300 transition bg-white border rounded-md dark:bg-transparent dark:border-slate-500 dark:text-gray-300 dark:hover:text-gray-100 dark:hover:border-slate-400 hover:text-gray-800 hover:border-gray-400"
+                variant="outline"
                 onClick={() => uploadButtonRef?.current?.click()}
                 disabled={preventUpdating}
               >
                 Select an image
-              </button>
+              </Button>
             </div>
             <div className="space-y-4">
               <FormInput disabled name="handle" label="Handle" type="text" />
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
index 64466f99..af1f9510 100644
--- a/website/pages/_app.tsx
+++ b/website/pages/_app.tsx
@@ -1,7 +1,7 @@
 import { Inter } from 'next/font/google'
 import { HydrationBoundary, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { Toaster } from 'react-hot-toast'
+import { Toaster } from '~/components/ui/toaster'
 import { ThemeContextProvider } from '~/components/themes/ThemeContext'
 import { useRootQueryClient } from '~/data/query-client'
 import { AuthProvider } from '~/lib/auth'
@@ -27,7 +27,7 @@ const CustomApp = ({ Component, pageProps }: AppPropsWithLayout) => {
           </ThemeContextProvider>
         </AuthProvider>
 
-        <Toaster position="bottom-left" />
+        <Toaster />
         <ReactQueryDevtools
           initialIsOpen={false}
           buttonPosition="bottom-right"
diff --git a/website/pages/forgot-password.tsx b/website/pages/forgot-password.tsx
index 67ff169f..f836e73e 100644
--- a/website/pages/forgot-password.tsx
+++ b/website/pages/forgot-password.tsx
@@ -1,7 +1,7 @@
 import { isAuthApiError } from '@supabase/supabase-js'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
diff --git a/website/pages/reset-password.tsx b/website/pages/reset-password.tsx
index 6fbaeca5..2b922bfc 100644
--- a/website/pages/reset-password.tsx
+++ b/website/pages/reset-password.tsx
@@ -1,7 +1,7 @@
 import { isAuthApiError } from '@supabase/supabase-js'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
diff --git a/website/pages/sign-in.tsx b/website/pages/sign-in.tsx
index b49b432b..7e79bc6b 100644
--- a/website/pages/sign-in.tsx
+++ b/website/pages/sign-in.tsx
@@ -2,7 +2,7 @@ import { isAuthApiError } from '@supabase/supabase-js'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
diff --git a/website/pages/sign-up.tsx b/website/pages/sign-up.tsx
index 4dd7f5f9..56db944c 100644
--- a/website/pages/sign-up.tsx
+++ b/website/pages/sign-up.tsx
@@ -2,7 +2,7 @@ import { isAuthApiError } from '@supabase/supabase-js'
 import Head from 'next/head'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import toast from 'react-hot-toast'
+import { toast } from '~/hooks/use-toast'
 import Form, { FORM_ERROR } from '~/components/forms/Form'
 import FormButton from '~/components/forms/FormButton'
 import FormInput from '~/components/forms/FormInput'
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
index 8895eba0..05a68000 100644
--- a/website/pnpm-lock.yaml
+++ b/website/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@heroicons/react':
         specifier: ^2.2.0
         version: 2.2.0(react@19.2.3)
+      '@hookform/resolvers':
+        specifier: ^5.2.2
+        version: 5.2.2(react-hook-form@7.71.1(react@19.2.3))
       '@radix-ui/react-avatar':
         specifier: ^1.1.10
         version: 1.1.10(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -23,6 +26,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.1.7
         version: 2.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-separator':
         specifier: ^1.1.7
         version: 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -59,6 +65,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      cmdk:
+        specifier: ^1.1.1
+        version: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -68,9 +77,6 @@ importers:
       eslint-config-next:
         specifier: ^15.4.5
         version: 15.4.5(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2)
-      final-form:
-        specifier: ^5.0.0
-        version: 5.0.0
       lucide-react:
         specifier: ^0.536.0
         version: 0.536.0(react@19.2.3)
@@ -83,12 +89,9 @@ importers:
       react-dom:
         specifier: ^19.2.3
         version: 19.2.3(react@19.2.3)
-      react-final-form:
-        specifier: ^7.0.0
-        version: 7.0.0(final-form@5.0.0)(react@19.2.3)
-      react-hot-toast:
-        specifier: ^2.5.2
-        version: 2.5.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-hook-form:
+        specifier: ^7.71.1
+        version: 7.71.1(react@19.2.3)
       react-markdown:
         specifier: ^9.0.1
         version: 9.1.0(@types/react@18.3.23)(react@19.2.3)
@@ -145,8 +148,8 @@ importers:
         specifier: ^8.4.49
         version: 8.5.6
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.8.0
+        version: 3.8.0
       tailwindcss:
         specifier: ^3.4.17
         version: 3.4.17
@@ -536,6 +539,11 @@ packages:
     peerDependencies:
       react: '>= 16 || ^19.0.0-rc'
 
+  '@hookform/resolvers@5.2.2':
+    resolution: {integrity: sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -795,6 +803,9 @@ packages:
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -887,6 +898,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    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
+
   '@radix-ui/react-dropdown-menu@2.1.15':
     resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
     peerDependencies:
@@ -909,6 +933,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
@@ -957,6 +990,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    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
+
   '@radix-ui/react-popper@1.2.7':
     resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
     peerDependencies:
@@ -970,6 +1016,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    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
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -996,6 +1055,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    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
+
   '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
@@ -1295,6 +1367,9 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@supabase/auth-js@2.71.1':
     resolution: {integrity: sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==}
 
@@ -1872,6 +1947,12 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  cmdk@1.1.1:
+    resolution: {integrity: sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^18 || ^19 || ^19.0.0-rc
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -2247,10 +2328,6 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  final-form@5.0.0:
-    resolution: {integrity: sha512-HByosvP7x3N4bWTCPoBeUeoMatadewRifxaH3qhCQI2DBwFNO0m5wxETLVUXNGWz2yokdSCMdJEvtjfZoXnqDA==}
-    engines: {node: '>=8'}
-
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -2331,11 +2408,6 @@ packages:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
-  goober@2.1.16:
-    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
-    peerDependencies:
-      csstype: ^3.0.10
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3096,8 +3168,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+  prettier@3.8.0:
+    resolution: {integrity: sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -3123,18 +3195,11 @@ packages:
     peerDependencies:
       react: ^19.2.3
 
-  react-final-form@7.0.0:
-    resolution: {integrity: sha512-aEeAWbSsCLVXa4GBkJtjjyhPyX4L/Pgp5P/jXZwdz0YYcK6Zs/0PkgB+qWMSyIsbbGGE7m9yYlSpui5E5Gx26A==}
-    peerDependencies:
-      final-form: ^5.0.0
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  react-hot-toast@2.5.2:
-    resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==}
-    engines: {node: '>=10'}
+  react-hook-form@7.71.1:
+    resolution: {integrity: sha512-9SUJKCGKo8HUSsCO+y0CtqkqI5nNuaDqTxyqPsZPqIwudpj4rCrAz/jZV+jn57bx5gtZKOh3neQu94DXMc+w5w==}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
+      react: ^16.8.0 || ^17 || ^18 || ^19
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
@@ -4120,6 +4185,11 @@ snapshots:
     dependencies:
       react: 19.2.3
 
+  '@hookform/resolvers@5.2.2(react-hook-form@7.71.1(react@19.2.3))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.71.1(react@19.2.3)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -4319,6 +4389,8 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/primitive@1.1.3': {}
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4406,6 +4478,19 @@ snapshots:
       '@types/react': 18.3.23
       '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -4427,6 +4512,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.23
 
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@18.3.23)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
@@ -4480,6 +4571,29 @@ snapshots:
       '@types/react': 18.3.23
       '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.3.23)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.1(@types/react@18.3.23)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-popper@1.2.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@floating-ui/react-dom': 2.1.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4498,6 +4612,24 @@ snapshots:
       '@types/react': 18.3.23
       '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-portal@1.1.9(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -4518,6 +4650,16 @@ snapshots:
       '@types/react': 18.3.23
       '@types/react-dom': 18.3.7(@types/react@18.3.23)
 
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/react@18.3.23)
+
   '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/react-slot': 1.2.3(@types/react@18.3.23)(react@19.2.3)
@@ -4745,6 +4887,8 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@standard-schema/utils@0.3.0': {}
+
   '@supabase/auth-js@2.71.1':
     dependencies:
       '@supabase/node-fetch': 2.6.15
@@ -5396,6 +5540,18 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  cmdk@1.1.1(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.3.23)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.3.7(@types/react@18.3.23))(@types/react@18.3.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -5674,8 +5830,8 @@ snapshots:
       '@typescript-eslint/parser': 8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2)
       eslint: 9.39.1(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@1.21.7))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@1.21.7))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.1(jiti@1.21.7))
       eslint-plugin-react: 7.37.5(eslint@9.39.1(jiti@1.21.7))
       eslint-plugin-react-hooks: 5.2.0(eslint@9.39.1(jiti@1.21.7))
@@ -5694,7 +5850,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)):
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@1.21.7)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.1
@@ -5705,22 +5861,22 @@ snapshots:
       tinyglobby: 0.2.14
       unrs-resolver: 1.11.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@1.21.7))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@1.21.7)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2)
       eslint: 9.39.1(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@1.21.7))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@1.21.7)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -5731,7 +5887,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.39.1(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7)))(eslint@9.39.1(jiti@1.21.7))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.39.1(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.39.1(jiti@1.21.7))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -5914,10 +6070,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  final-form@5.0.0:
-    dependencies:
-      '@babel/runtime': 7.28.2
-
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -6013,10 +6165,6 @@ snapshots:
       define-properties: 1.2.1
       gopd: 1.2.0
 
-  goober@2.1.16(csstype@3.1.3):
-    dependencies:
-      csstype: 3.1.3
-
   gopd@1.2.0: {}
 
   graphemer@1.4.0: {}
@@ -7002,7 +7150,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.7.4: {}
+  prettier@3.8.0: {}
 
   pretty-format@27.5.1:
     dependencies:
@@ -7027,19 +7175,10 @@ snapshots:
       react: 19.2.3
       scheduler: 0.27.0
 
-  react-final-form@7.0.0(final-form@5.0.0)(react@19.2.3):
+  react-hook-form@7.71.1(react@19.2.3):
     dependencies:
-      '@babel/runtime': 7.28.2
-      final-form: 5.0.0
       react: 19.2.3
 
-  react-hot-toast@2.5.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
-    dependencies:
-      csstype: 3.1.3
-      goober: 2.1.16(csstype@3.1.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
diff --git a/website/vitest.setup.ts b/website/vitest.setup.ts
index c8d594d7..35562991 100644
--- a/website/vitest.setup.ts
+++ b/website/vitest.setup.ts
@@ -14,3 +14,13 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: () => false,
   }),
 })
+
+// Mock ResizeObserver for components that use it (e.g., cmdk)
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+// Mock Element.scrollIntoView for cmdk command palette
+Element.prototype.scrollIntoView = function () {}