diff --git a/backend/src/main.rs b/backend/src/main.rs
index c6d085a..56554e5 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -42,7 +42,7 @@ async fn main() -> std::io::Result<()> {
         .expect("Cannot connect to Redis");
     let hmac_secret = std::env::var("HMAC_SECRET").expect("HMAC_SECRET is not set");
     let secret_key = Key::from(hmac_secret.as_bytes());
-    let rl_config = RateLimitConfig::default().max_requests(3).window_secs(10);
+    let rl_config = RateLimitConfig::default().max_requests(3).window_secs(1);
     let rl_store = std::sync::Arc::new(MemoryStore::new());
 
     let port = std::env::var("BACKEND_PORT")
diff --git a/frontend/components/dashboard.tsx b/frontend/components/dashboard.tsx
index c779520..2a212bd 100644
--- a/frontend/components/dashboard.tsx
+++ b/frontend/components/dashboard.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, useSyncExternalStore } from "react"
+import { useEffect, useMemo, useState, useSyncExternalStore } from "react"
 import { useRouter } from "next/navigation"
 import { User } from "@/lib/session"
 import { UserPermissions } from "@/lib/userPermissions"
@@ -40,23 +40,25 @@ import { BatchesPage } from "@/components/pages/batches"
 import { CustomersPage } from "@/components/pages/customers"
 import { FlavorsPage } from "@/components/pages/flavors"
 import { IngredientsPage } from "@/components/pages/ingredients"
-import { OrdersPage } from "@/components/pages/template"
+import { OrdersPage } from "@/components/pages/orders"
 import { SuppliersPage } from "@/components/pages/suppliers"
 import { UsersPage } from "@/components/pages/users"
 import { useTheme } from "next-themes"
+import { useHashSegment } from "@/lib/useHash"
 
-type Page =
-  | "batches"
-  | "customers"
-  | "flavors"
-  | "ingredients"
-  | "orders"
-  | "suppliers"
-  | "users"
+const PAGE = [
+  "batches",
+  "customers",
+  "flavors",
+  "ingredients",
+  "orders",
+  "suppliers",
+  "users",
+]
 
 const NAV_ITEMS: {
   label: string
-  page: Page
+  page: (typeof PAGE)[number]
   icon: React.ElementType
   read_permission: UserPermissions
 }[] = [
@@ -104,16 +106,23 @@ const NAV_ITEMS: {
   },
 ]
 
-function pageMap(page: Page, userPerms: UserPermissions): React.ReactNode {
+function pageMap(
+  page: (typeof PAGE)[number],
+  userPerms: UserPermissions
+): React.ReactNode {
   switch (page) {
     case "batches":
-      return <BatchesPage userPerms={userPerms} />
+      // return <BatchesPage userPerms={userPerms} />
+      break
     case "customers":
-      return <CustomersPage userPerms={userPerms} />
+      // return <CustomersPage userPerms={userPerms} />
+      break
     case "flavors":
-      return <FlavorsPage userPerms={userPerms} />
+      // return <FlavorsPage userPerms={userPerms} />
+      break
     case "ingredients":
-      return <IngredientsPage userPerms={userPerms} />
+      // return <IngredientsPage userPerms={userPerms} />
+      break
     case "orders":
       return <OrdersPage userPerms={userPerms} />
     case "suppliers":
@@ -138,10 +147,16 @@ interface DashboardProps {
 }
 
 export function Dashboard({ user }: DashboardProps) {
-  const [activePage, setActivePage] = useState<Page>("batches")
   const router = useRouter()
+  const hash = useHashSegment()
   const { resolvedTheme, setTheme } = useTheme()
   const mounted = useMounted()
+  const activePage = useMemo(() => {
+    if (!hash && mounted) {
+      return PAGE[0]
+    }
+    return PAGE.includes(hash) ? hash : PAGE[0]
+  }, [hash, mounted])
   const permissions = UserPermissions.from(user.permissions)
   const initials = user.full_name
     ? user.full_name
@@ -157,6 +172,12 @@ export function Dashboard({ user }: DashboardProps) {
     router.refresh()
   }
 
+  useEffect(() => {
+    if (!hash && mounted) {
+      window.location.hash = `#/${PAGE[0]}`
+    }
+  }, [hash, mounted])
+
   return (
     <SidebarProvider>
       <Sidebar>
@@ -180,7 +201,9 @@ export function Dashboard({ user }: DashboardProps) {
                   <SidebarMenuItem key={page}>
                     <SidebarMenuButton
                       isActive={activePage === page}
-                      onClick={() => setActivePage(page)}
+                      onClick={() => {
+                        window.location.hash = `#/${page}`
+                      }}
                     >
                       <Icon className="h-4 w-4" />
                       <span>{label}</span>
diff --git a/frontend/components/forms/order.tsx b/frontend/components/forms/order.tsx
new file mode 100644
index 0000000..33ea3a3
--- /dev/null
+++ b/frontend/components/forms/order.tsx
@@ -0,0 +1,171 @@
+"use client"
+
+import { useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Controller, useForm } from "react-hook-form"
+import * as z from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field"
+import { Input } from "@/components/ui/input"
+import { Option, AsyncCombobox } from "../ui/combobox"
+
+const schema = z.object({
+  invoice_number: z.string().min(1, { message: "Invoice Number is required." }),
+  customer_id: z.string().min(1, { message: "Customer is required." }),
+  batch_ids: z.array(z.string().min(1, { message: "Batch ID is required." })),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export interface Order {
+  id: string
+  invoice_number: string
+  customer_id: string
+  created_at: Date
+}
+
+async function getCustomerOptions(
+  query: string,
+  page: number
+): Promise<Option[]> {
+  let url = `/api/customers?page=${page}&limit=10`
+  if (query) url += `&name=${query}`
+  const res = await fetch(url)
+  const data = await res.json()
+  return data.rows.map((c: { id: string; name: string }) => ({
+    value: c.id,
+    label: c.name,
+  }))
+}
+
+async function getBatchOptions(query: string, page: number): Promise<Option[]> {
+  let url = `/api/batches?page=${page}&limit=10`
+  if (query) url += `&name=${query}`
+  const res = await fetch(url)
+  const data = await res.json()
+  return data.rows.map((c: { id: string; name: string }) => ({
+    value: c.id,
+    label: c.name,
+  }))
+}
+
+export function OrderForm({
+  orderEdit,
+  setEditOpen,
+  refetchItems,
+}: {
+  orderEdit: Order | null
+  setEditOpen: React.Dispatch<React.SetStateAction<boolean>>
+  refetchItems: () => void
+}) {
+  const isEditing = orderEdit !== null
+  const [serverError, setServerError] = useState<string | null>(null)
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    control,
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+  })
+
+  async function onSubmit(values: FormValues) {
+    setServerError(null)
+
+    const res = await fetch(
+      `/api/orders${isEditing ? `/${orderEdit.id}` : ""}`,
+      {
+        method: isEditing ? "PATCH" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(values),
+      }
+    )
+    if (!res.ok) {
+      const data = await res.json()
+      setServerError(data.error || "An error occurred.")
+      return
+    }
+    setEditOpen(false)
+    refetchItems()
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="contents">
+      <FieldGroup>
+        <Field>
+          <FieldLabel htmlFor="invoice_number">Invoice Number</FieldLabel>
+          <Input
+            id="invoice_number"
+            type="text"
+            placeholder="ID1234897134"
+            aria-invalid={!!errors.invoice_number}
+            {...register("invoice_number")}
+          />
+        </Field>
+        <FieldError
+          errors={errors.invoice_number ? [errors.invoice_number] : []}
+        />
+
+        <Field>
+          <FieldLabel htmlFor="customer_id">Customer</FieldLabel>
+          <Controller
+            name="customer_id"
+            control={control}
+            render={({ field }) => (
+              <AsyncCombobox
+                value={field.value}
+                onChange={field.onChange}
+                placeholder="Select a customer..."
+                fetchOptions={getCustomerOptions}
+              />
+            )}
+          />
+        </Field>
+        <FieldError errors={errors.customer_id ? [errors.customer_id] : []} />
+
+        <Field>
+          <FieldLabel htmlFor="batch_ids">Batches</FieldLabel>
+          <Controller
+            name="batch_ids"
+            control={control}
+            render={({ field }) => (
+              <AsyncCombobox
+                value={field.value}
+                onChange={field.onChange}
+                placeholder="Select batches..."
+                fetchOptions={getBatchOptions}
+                multiple={true}
+              />
+            )}
+          />
+        </Field>
+        <FieldError errors={errors.batch_ids ? [errors.batch_ids] : []} />
+      </FieldGroup>
+      <FieldGroup>
+        {serverError && (
+          <p className="text-sm text-destructive">{serverError}</p>
+        )}
+
+        <div className="flex flex-row justify-between">
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => setEditOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            Save
+          </Button>
+        </div>
+      </FieldGroup>
+    </form>
+  )
+}
diff --git a/frontend/components/pages/orders.tsx b/frontend/components/pages/orders.tsx
index e69de29..a583725 100644
--- a/frontend/components/pages/orders.tsx
+++ b/frontend/components/pages/orders.tsx
@@ -0,0 +1,439 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  SortingState,
+  useReactTable,
+  PaginationState,
+  ColumnFiltersState,
+} from "@tanstack/react-table"
+import {
+  SortableFilterableColumnHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableRowSkeleton,
+} from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Card, CardContent } from "@/components/ui/card"
+import { Modal } from "@/components/modal"
+
+import { UserPermissions } from "@/lib/userPermissions"
+import { MoreHorizontal, UserPlus2 } from "lucide-react"
+import { useQuery } from "@tanstack/react-query"
+import { useDebounce } from "use-debounce"
+import { TablePaginator } from "../tablePages"
+import { Option } from "../ui/combobox"
+
+const ENTITY_NAME = "Order"
+const ENTITY_PLURAL = "orders"
+const API_PATH = "/api/orders"
+
+const SORTABLE_COLUMNS = ["invoice_number"]
+const DEFAULT_SORT_BY = "invoice_number"
+
+const PERM_CREATE = UserPermissions.OrderCreate
+const PERM_UPDATE = UserPermissions.OrderUpdate
+const PERM_DELETE = UserPermissions.OrderDelete
+
+import { OrderForm as EntityForm, Order as Entity } from "../forms/order"
+
+interface PaginatedResponse {
+  rows: Entity[]
+  total: number
+  page_count: number
+}
+
+const DISPLAY_PROP: keyof Entity = "invoice_number"
+
+interface Props {
+  userPerms: UserPermissions
+}
+
+function CustomerCell({ customerId }: { customerId: string }) {
+  const { data: customer, isLoading } = useQuery({
+    queryKey: ["customer", customerId],
+    queryFn: async () => {
+      const res = await fetch(`/api/customers/${customerId}`)
+      return res.json()
+    },
+    staleTime: 5 * 60 * 1000,
+  })
+
+  if (isLoading) return <span className="text-muted">Loading...</span>
+  if (!customer) return <span className="text-red-500">Unknown</span>
+
+  return <span>{customer.name}</span>
+}
+
+async function getCustomerOptions(
+  query: string,
+  page: number
+): Promise<Option[]> {
+  let url = `/api/customers?page=${page}&limit=10`
+  if (query) url += `&name=${query}`
+  const res = await fetch(url)
+  const data = await res.json()
+  return data.rows.map((c: { id: string; name: string }) => ({
+    value: c.id,
+    label: c.name,
+  }))
+}
+
+async function getBatchOptions(query: string, page: number): Promise<Option[]> {
+  let url = `/api/batches?page=${page}&limit=10`
+  if (query) url += `&name=${query}`
+  const res = await fetch(url)
+  const data = await res.json()
+  return data.rows.map((c: { id: string; name: string }) => ({
+    value: c.id,
+    label: c.name,
+  }))
+}
+
+export function OrdersPage({ userPerms }: Props) {
+  const [editOpen, setEditOpen] = useState(false)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+  const [deleteError, setDeleteError] = useState<string | null>(null)
+  const [entity, setEntity] = useState<Entity | null>(null)
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const [debouncedFilters] = useDebounce(columnFilters, 300)
+
+  const nameFilter =
+    (debouncedFilters.find((f) => f.id === "name")?.value as string) ?? ""
+
+  useEffect(() => {
+    setPagination((p) => ({ ...p, pageIndex: 0 }))
+  }, [debouncedFilters, sorting])
+
+  const limit = pagination.pageSize
+  const offset = pagination.pageIndex * pagination.pageSize
+
+  const sort = sorting.find((s) => SORTABLE_COLUMNS.includes(s.id))
+  const sortBy = sort?.id ?? DEFAULT_SORT_BY
+  const sortOrder = sorting.find((s) => SORTABLE_COLUMNS.includes(s.id))?.desc
+    ? "desc"
+    : "asc"
+
+  const { data, isLoading, error, refetch } = useQuery<PaginatedResponse>({
+    queryKey: [
+      ENTITY_PLURAL,
+      limit,
+      offset,
+      sortBy,
+      sortOrder,
+      nameFilter,
+      debouncedFilters,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams({
+        limit: String(limit),
+        offset: String(offset),
+        sort_by: sortBy,
+        sort_order: sortOrder,
+      })
+
+      if (nameFilter) params.set("name", nameFilter)
+
+      const res = await fetch(`${API_PATH}?${params.toString()}`)
+      if (!res.ok) throw new Error(`Failed to fetch ${ENTITY_PLURAL}`)
+      return res.json()
+    },
+  })
+
+  const rows = data?.rows ?? []
+  const pageCount = data?.page_count ?? 0
+
+  const columns = useMemo<ColumnDef<Entity>[]>(
+    () => [
+      {
+        accessorKey: "id",
+        header: "ID",
+        size: 150,
+        cell: ({ row }) => (
+          <span
+            className="truncate font-mono text-xs"
+            title={row.getValue("id")}
+          >
+            {row.getValue("id")}
+          </span>
+        ),
+      },
+      {
+        accessorKey: "invoice_number",
+        header: ({ column }) => (
+          <SortableFilterableColumnHeader
+            column={column}
+            title="Invoice Number"
+            placeholder="Filter..."
+          />
+        ),
+        size: 150,
+        enableSorting: true,
+        enableColumnFilter: true,
+      },
+      {
+        accessorKey: "customer_id",
+        header: ({ column }) => (
+          <SortableFilterableColumnHeader
+            column={column}
+            title="Customer"
+            placeholder="Filter..."
+            get_options={getCustomerOptions}
+          />
+        ),
+        size: 150,
+        enableSorting: false,
+        enableColumnFilter: true,
+        cell: ({ row }) => {
+          const customerId = row.getValue("customer_id") as string
+          return <CustomerCell customerId={customerId} />
+        },
+      },
+      {
+        accessorKey: "batch_ids",
+        header: ({ column }) => (
+          <SortableFilterableColumnHeader
+            column={column}
+            title="Batch IDs"
+            placeholder="Filter..."
+            get_options={getBatchOptions}
+          />
+        ),
+        size: 150,
+        enableSorting: false,
+        enableColumnFilter: true,
+        cell: ({ row }) => {
+          const batchIds = row.getValue("batch_ids") as string[]
+          return batchIds.map((id) => <span key={id}>{id}</span>)
+        },
+      },
+      {
+        accessorKey: "actions",
+        header: "Actions",
+        size: 60,
+        cell: ({ row }) => {
+          const item = row.original
+          return (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" className="h-8 w-8 p-0">
+                  <span className="sr-only">Open menu</span>
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => {
+                    setEditOpen(true)
+                    setEntity(item)
+                  }}
+                  disabled={!userPerms.contains(PERM_UPDATE)}
+                  className="cursor-pointer"
+                >
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => {
+                    setDeleteOpen(true)
+                    setEntity(item)
+                  }}
+                  disabled={!userPerms.contains(PERM_DELETE)}
+                  className="cursor-pointer"
+                >
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )
+        },
+      },
+    ],
+    [userPerms]
+  )
+
+  // eslint-disable-next-line react-hooks/incompatible-library
+  const table = useReactTable({
+    data: rows,
+    columns,
+    pageCount,
+    state: { pagination, sorting, columnFilters },
+    onPaginationChange: setPagination,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+  })
+
+  useEffect(() => {
+    if (!editOpen && !deleteOpen) setEntity(null)
+  }, [editOpen, deleteOpen])
+
+  async function deleteEntity(id: string) {
+    const res = await fetch(`${API_PATH}/${id}`, {
+      method: "DELETE",
+    })
+    if (res.ok) {
+      refetch()
+    } else {
+      const data = await res.json()
+      setDeleteError(data.error)
+    }
+  }
+
+  const displayName = entity?.[DISPLAY_PROP] as string | undefined
+  const entityTitle = displayName ?? ENTITY_NAME
+
+  return (
+    <>
+      <Card>
+        <CardContent>
+          {error ? (
+            <p className="text-sm text-destructive">{error.message}</p>
+          ) : (
+            <div>
+              <div className="mb-4 flex justify-end">
+                {deleteError && (
+                  <p className="text-sm text-destructive">{deleteError}</p>
+                )}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!userPerms.contains(PERM_CREATE)}
+                  onClick={() => setEditOpen(true)}
+                >
+                  <UserPlus2 /> New {ENTITY_NAME}
+                </Button>
+              </div>
+
+              <Table className="w-full table-fixed">
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead
+                          key={header.id}
+                          style={{ width: header.getSize() }}
+                          onClick={() =>
+                            header.column.getToggleSortingHandler()
+                          }
+                          className={
+                            header.column.getCanSort()
+                              ? "cursor-pointer select-none"
+                              : ""
+                          }
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext()
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {isLoading ? (
+                    <TableRowSkeleton columns={columns.length} />
+                  ) : (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell key={cell.id}>
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+
+              <div className="flex items-center justify-end space-x-2 py-4">
+                <TablePaginator
+                  page={pagination.pageIndex + 1}
+                  pageCount={pageCount}
+                  onPageChange={(p) => table.setPageIndex(p)}
+                  pageSize={pagination.pageSize}
+                  onPageSizeChange={(s) => table.setPageSize(s)}
+                />
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Modal
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        trigger={null}
+        title={`${entity ? "Edit" : "Create"} ${entityTitle}`}
+        description={
+          entity
+            ? `Make changes to this ${ENTITY_NAME.toLowerCase()}.`
+            : `Create a new ${ENTITY_NAME.toLowerCase()}.`
+        }
+      >
+        <EntityForm
+          orderEdit={entity}
+          setEditOpen={setEditOpen}
+          refetchItems={refetch}
+        />
+      </Modal>
+
+      <Modal
+        open={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        trigger={null}
+        title={`Delete ${entityTitle}`}
+        description="This action cannot be undone."
+      >
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setDeleteOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => {
+              setDeleteError(null)
+              if (entity) void deleteEntity(entity.id)
+              setDeleteOpen(false)
+            }}
+          >
+            Delete
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}
diff --git a/frontend/components/pages/suppliers.tsx b/frontend/components/pages/suppliers.tsx
index 3a888d8..98a8658 100644
--- a/frontend/components/pages/suppliers.tsx
+++ b/frontend/components/pages/suppliers.tsx
@@ -151,6 +151,7 @@ export function SuppliersPage({ userPerms }: { userPerms: UserPermissions }) {
           />
         ),
         size: 60,
+        enableSorting: false,
         enableColumnFilter: true,
       },
       {
@@ -163,6 +164,7 @@ export function SuppliersPage({ userPerms }: { userPerms: UserPermissions }) {
           />
         ),
         size: 180,
+        enableSorting: false,
         enableColumnFilter: true,
       },
       {
@@ -274,7 +276,7 @@ export function SuppliersPage({ userPerms }: { userPerms: UserPermissions }) {
                             header.column.getToggleSortingHandler()
                           }
                           className={
-                            "flex flex-col " + header.column.getCanSort()
+                            header.column.getCanSort()
                               ? "cursor-pointer select-none"
                               : ""
                           }
diff --git a/frontend/components/pages/template.tsx b/frontend/components/pages/template
similarity index 96%
rename from frontend/components/pages/template.tsx
rename to frontend/components/pages/template
index d52cc8e..4a5aca2 100644
--- a/frontend/components/pages/template.tsx
+++ b/frontend/components/pages/template
@@ -185,6 +185,7 @@ export function ItemsPage({ userPerms }: Props) {
     [userPerms]
   )
 
+  // eslint-disable-next-line react-hooks/incompatible-library
   const table = useReactTable({
     data: rows,
     columns,
@@ -240,7 +241,7 @@ export function ItemsPage({ userPerms }: Props) {
                 </Button>
               </div>
 
-              <Table className="w-fit table-fixed">
+              <Table className="w-full table-fixed">
                 <TableHeader>
                   {table.getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
@@ -248,14 +249,11 @@ export function ItemsPage({ userPerms }: Props) {
                         <TableHead
                           key={header.id}
                           style={{ width: header.getSize() }}
-                          onClick={() =>
-                            header.column.getToggleSortingHandler()
-                          }
+                          onClick={header.column.getToggleSortingHandler()}
                           className={
-                            "flex flex-col " +
-                            (header.column.getCanSort()
+                            header.column.getCanSort()
                               ? "cursor-pointer select-none"
-                              : "")
+                              : undefined
                           }
                         >
                           {header.isPlaceholder
diff --git a/frontend/components/pages/users.tsx b/frontend/components/pages/users.tsx
index 5c03abf..0fd49ba 100644
--- a/frontend/components/pages/users.tsx
+++ b/frontend/components/pages/users.tsx
@@ -290,7 +290,7 @@ export function UsersPage({ userPerms }: { userPerms: UserPermissions }) {
                             header.column.getToggleSortingHandler()
                           }
                           className={
-                            "flex flex-col " + header.column.getCanSort()
+                            header.column.getCanSort()
                               ? "cursor-pointer select-none"
                               : ""
                           }
diff --git a/frontend/components/ui/combobox.tsx b/frontend/components/ui/combobox.tsx
new file mode 100644
index 0000000..e917628
--- /dev/null
+++ b/frontend/components/ui/combobox.tsx
@@ -0,0 +1,307 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, Loader2, X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export interface Option {
+  value: string
+  label: string
+}
+
+interface AsyncComboboxBaseProps {
+  id?: string
+  "aria-invalid"?: boolean
+  placeholder?: string
+  emptyMessage?: string
+  searchPlaceholder?: string
+  fetchOptions: (query: string, page: number) => Promise<Option[]>
+  pageSize?: number
+}
+
+interface AsyncComboboxSingleProps extends AsyncComboboxBaseProps {
+  multiple?: false
+  value?: string
+  onChange: (value: string) => void
+}
+
+interface AsyncComboboxMultiProps extends AsyncComboboxBaseProps {
+  multiple: true
+  value?: string[]
+  onChange: (value: string[]) => void
+}
+
+export type AsyncComboboxProps =
+  AsyncComboboxSingleProps | AsyncComboboxMultiProps
+
+export function AsyncCombobox(props: AsyncComboboxProps) {
+  const {
+    id,
+    "aria-invalid": ariaInvalid,
+    placeholder = "Select...",
+    emptyMessage = "No results found.",
+    searchPlaceholder = "Search...",
+    fetchOptions,
+    pageSize = 20,
+  } = props
+
+  const multiple = (props as AsyncComboboxMultiProps).multiple ?? false
+  const value = props.value
+  const onChange = props.onChange
+
+  const [open, setOpen] = React.useState(false)
+  const [searchQuery, setSearchQuery] = React.useState("")
+  const [debouncedQuery, setDebouncedQuery] = React.useState("")
+  const [options, setOptions] = React.useState<Option[]>([])
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [page, setPage] = React.useState(1)
+  const [hasMore, setHasMore] = React.useState(true)
+  const [selectedLabelsMap, setSelectedLabelsMap] = React.useState<
+    Record<string, string>
+  >({})
+
+  // Debounce
+  React.useEffect(() => {
+    if (searchQuery === debouncedQuery) return
+    const timer = setTimeout(() => setDebouncedQuery(searchQuery), 300)
+    return () => clearTimeout(timer)
+  }, [searchQuery])
+
+  // Fetch
+  React.useEffect(() => {
+    if (!open) return
+    let cancelled = false
+
+    async function load() {
+      setIsLoading(true)
+      try {
+        const results = await fetchOptions(debouncedQuery, page)
+        if (cancelled) return
+
+        setSelectedLabelsMap((prev) => {
+          const next = { ...prev }
+          results.forEach((r) => {
+            if (r.value) next[r.value] = r.label
+          })
+          return next
+        })
+
+        setOptions((prev) => (page === 1 ? results : [...prev, ...results]))
+        setHasMore(results.length === pageSize)
+      } catch (error) {
+        if (!cancelled) setHasMore(false)
+      } finally {
+        if (!cancelled) setIsLoading(false)
+      }
+    }
+
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [open, debouncedQuery, page, fetchOptions, pageSize])
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+    if (nextOpen) {
+      setSearchQuery("")
+      setDebouncedQuery("")
+      setPage(1)
+      setHasMore(true)
+      setOptions([])
+      setIsLoading(true)
+    }
+  }
+
+  const handleSearch = (query: string) => {
+    setSearchQuery(query)
+    setPage(1)
+    setHasMore(true)
+    setOptions([])
+    setIsLoading(true)
+  }
+
+  const handleLoadMore = () => {
+    setPage((p) => p + 1)
+    setIsLoading(true)
+  }
+
+  const isSelected = (optionValue: string): boolean => {
+    if (multiple) {
+      return (value as string[] | undefined)?.includes(optionValue) ?? false
+    }
+    return (value as string | undefined) === optionValue
+  }
+
+  const handleToggle = (option: Option) => {
+    const selected = isSelected(option.value)
+
+    if (multiple) {
+      const current = (value as string[] | undefined) ?? []
+      const newValues = selected
+        ? current.filter((v) => v !== option.value)
+        : [...current, option.value]
+
+      setSelectedLabelsMap((prev) => ({
+        ...prev,
+        [option.value]: option.label,
+      }))
+      ;(onChange as (value: string[]) => void)(newValues)
+      // Stay open for multi-select
+    } else {
+      const newValue = selected ? "" : option.value
+      setSelectedLabelsMap((prev) => ({
+        ...prev,
+        [option.value]: option.label,
+      }))
+      ;(onChange as (value: string) => void)(newValue)
+      setOpen(false)
+    }
+  }
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (multiple) {
+      ;(onChange as (value: string[]) => void)([])
+    } else {
+      ;(onChange as (value: string) => void)("")
+    }
+  }
+
+  const displayText = React.useMemo(() => {
+    if (multiple) {
+      const selectedValues = (value as string[] | undefined) ?? []
+      if (selectedValues.length === 0) return placeholder
+
+      const labels = selectedValues.map((v) => selectedLabelsMap[v] || v)
+      const visible = labels.slice(0, 2).join(", ")
+      const remaining = labels.length - 2
+      if (remaining > 0) return `${visible} +${remaining} more`
+      return visible
+    }
+
+    const singleValue = value as string | undefined
+    if (!singleValue) return placeholder
+    return selectedLabelsMap[singleValue] || singleValue
+  }, [value, multiple, selectedLabelsMap, placeholder])
+
+  const hasValue = multiple
+    ? ((value as string[] | undefined)?.length ?? 0) > 0
+    : !!(value as string | undefined)
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          aria-invalid={ariaInvalid}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="h-auto min-h-10 w-full justify-between px-3 py-2"
+        >
+          <span className="truncate text-left">{displayText}</span>
+          <div className="ml-2 flex shrink-0 items-center gap-1">
+            {hasValue && (
+              <div
+                onClick={handleClear}
+                className="cursor-pointer rounded-sm p-0.5 hover:bg-muted"
+              >
+                <X className="h-4 w-4 text-muted-foreground" />
+              </div>
+            )}
+            <ChevronsUpDown className="h-4 w-4 opacity-50" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+            onValueChange={handleSearch}
+          />
+          <CommandList>
+            <CommandEmpty>
+              {isLoading ? (
+                <div className="space-y-2 p-4">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-[90%]" />
+                  <Skeleton className="h-4 w-[80%]" />
+                </div>
+              ) : (
+                emptyMessage
+              )}
+            </CommandEmpty>
+
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => handleToggle(option)}
+                  className="cursor-pointer"
+                >
+                  {multiple ? (
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected(option.value)
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <Check className="h-4 w-4" />
+                    </div>
+                  ) : (
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        isSelected(option.value) ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  )}
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+
+            {hasMore && options.length > 0 && (
+              <div className="p-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="w-full"
+                  onClick={handleLoadMore}
+                  disabled={isLoading}
+                >
+                  {isLoading ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    "Load more..."
+                  )}
+                </Button>
+              </div>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/frontend/components/ui/command.tsx b/frontend/components/ui/command.tsx
new file mode 100644
index 0000000..bf944be
--- /dev/null
+++ b/frontend/components/ui/command.tsx
@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-9 bg-input/50">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("my-1.5 h-px bg-border/50", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-2xl px-3 py-2 text-sm font-medium outline-hidden select-none in-data-[slot=dialog-content]:rounded-3xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/frontend/components/ui/input-group.tsx b/frontend/components/ui/input-group.tsx
new file mode 100644
index 0000000..beccf14
--- /dev/null
+++ b/frontend/components/ui/input-group.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-transparent bg-input/50 transition-[color,box-shadow,background-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:-ml-1",
+        "inline-end": "order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:-mr-1",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+        "block-end":
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 rounded-4xl text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs": "size-6 rounded-xl p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/frontend/components/ui/popover.tsx b/frontend/components/ui/popover.tsx
new file mode 100644
index 0000000..0f23ea7
--- /dev/null
+++ b/frontend/components/ui/popover.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 flex w-(--radix-popover-trigger-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-3xl bg-popover p-4 text-sm text-popover-foreground shadow-lg ring-1 ring-foreground/5 outline-hidden duration-100 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 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/frontend/components/ui/table.tsx b/frontend/components/ui/table.tsx
index c5644a7..7add071 100644
--- a/frontend/components/ui/table.tsx
+++ b/frontend/components/ui/table.tsx
@@ -7,6 +7,7 @@ import { ArrowDown, ArrowUp, ArrowUpDown, Filter } from "lucide-react"
 import { Input } from "./input"
 import { Button } from "./button"
 import { Skeleton } from "./skeleton"
+import { AsyncCombobox, Option } from "./combobox"
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
@@ -151,18 +152,22 @@ function SortableFilterableColumnHeader({
   column,
   title,
   placeholder,
+  get_options,
 }: {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   column: any
   title: string
   placeholder?: string
+  get_options?: (query: string, page: number) => Promise<Option[]>
 }) {
   const [showFilter, setShowFilter] = React.useState(false)
+  const canSort = column.getCanSort()
 
   return (
     <div className="space-y-1">
       <div className="flex items-center justify-between gap-2">
-        <SortableHeader column={column} title={title} />
+        {canSort && <SortableHeader column={column} title={title} />}
+        {!canSort && <span>{title}</span>}
         <Button
           type="button"
           variant="ghost"
@@ -175,13 +180,20 @@ function SortableFilterableColumnHeader({
           />
         </Button>
       </div>
-      {showFilter && (
+      {showFilter && !get_options && (
         <FilterInput
           value={(column.getFilterValue() as string) ?? ""}
           onChange={(value) => column.setFilterValue(value)}
           placeholder={placeholder}
         />
       )}
+      {showFilter && get_options && (
+        <AsyncCombobox
+          fetchOptions={get_options}
+          value={(column.getFilterValue() as string) ?? ""}
+          onChange={(value) => column.setFilterValue(value)}
+        />
+      )}
     </div>
   )
 }
diff --git a/frontend/components/ui/textarea.tsx b/frontend/components/ui/textarea.tsx
new file mode 100644
index 0000000..57d3524
--- /dev/null
+++ b/frontend/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent bg-input/50 px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/frontend/lib/useHash.ts b/frontend/lib/useHash.ts
new file mode 100644
index 0000000..c658161
--- /dev/null
+++ b/frontend/lib/useHash.ts
@@ -0,0 +1,14 @@
+"use client"
+
+import { useSyncExternalStore } from "react"
+
+export function useHashSegment() {
+  return useSyncExternalStore(
+    (cb) => {
+      window.addEventListener("hashchange", cb)
+      return () => window.removeEventListener("hashchange", cb)
+    },
+    () => window.location.hash.replace("#/", ""),
+    () => ""
+  )
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 452aa2e..0452643 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "lucide-react": "^1.22.0",
         "next": "16.2.6",
         "next-themes": "^0.4.6",
@@ -5176,6 +5177,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 0bbb66e..f8b900a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lucide-react": "^1.22.0",
     "next": "16.2.6",
     "next-themes": "^0.4.6",