diff --git a/apps/web/src/components/select-field.tsx b/apps/web/src/components/select-field.tsx
index 8c49680..5016589 100644
--- a/apps/web/src/components/select-field.tsx
+++ b/apps/web/src/components/select-field.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react'
-import {
-  Select as SelectPrimitive,
-  type SelectRootProps,
-} from '@base-ui/react/select'
+import type { SelectRootProps } from '@base-ui/react/select'
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@cfdm/ui/components/select'
 import { cn } from '@cfdm/ui/lib/utils'
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
 
 export interface SelectOption {
   value: string
@@ -32,76 +35,23 @@ export function SelectField({
   onValueChange,
   ...props
 }: SelectFieldProps) {
-  const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options])
+  const items = React.useMemo(
+    () => options.map((o) => ({ value: o.value, label: o.label })),
+    [options],
+  )
 
   return (
-    <SelectPrimitive.Root
-      items={items}
-      value={value}
-      onValueChange={onValueChange}
-      {...props}
-    >
-      <SelectPrimitive.Trigger
-        id={triggerId}
-        data-slot="select-trigger"
-        data-size={size}
-        className={cn(
-          'flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-          triggerClassName,
-        )}
-      >
-        <SelectPrimitive.Value
-          data-slot="select-value"
-          placeholder={placeholder}
-          className="flex flex-1 text-left"
-        />
-        <SelectPrimitive.Icon
-          render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
-        />
-      </SelectPrimitive.Trigger>
-      <SelectPrimitive.Portal>
-        <SelectPrimitive.Positioner
-          side="bottom"
-          sideOffset={4}
-          align="center"
-          alignOffset={0}
-          alignItemWithTrigger
-          className="isolate z-50"
-        >
-          <SelectPrimitive.Popup
-            data-slot="select-content"
-            className="relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 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"
-          >
-            <SelectPrimitive.ScrollUpArrow className="top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
-              <ChevronUpIcon />
-            </SelectPrimitive.ScrollUpArrow>
-            <SelectPrimitive.List>
-              {options.map((opt) => (
-                <SelectPrimitive.Item
-                  key={opt.value}
-                  value={opt.value}
-                  data-slot="select-item"
-                  className="relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2"
-                >
-                  <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
-                    {opt.label}
-                  </SelectPrimitive.ItemText>
-                  <SelectPrimitive.ItemIndicator
-                    render={
-                      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-                    }
-                  >
-                    <CheckIcon className="pointer-events-none" />
-                  </SelectPrimitive.ItemIndicator>
-                </SelectPrimitive.Item>
-              ))}
-            </SelectPrimitive.List>
-            <SelectPrimitive.ScrollDownArrow className="bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
-              <ChevronDownIcon />
-            </SelectPrimitive.ScrollDownArrow>
-          </SelectPrimitive.Popup>
-        </SelectPrimitive.Positioner>
-      </SelectPrimitive.Portal>
-    </SelectPrimitive.Root>
+    <Select items={items} value={value} onValueChange={onValueChange} {...props}>
+      <SelectTrigger id={triggerId} size={size} className={cn('w-full', triggerClassName)}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }