From a97331ae3f0929399072a6d1a82ba3b71b17e038 Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Wed, 20 May 2026 00:21:34 -0500
Subject: [PATCH] bug: streamline shadcn

---
 .../src/app/agents/[agentId]/edit/page.tsx    |  6 +--
 frontend/src/app/agents/new/page.tsx          |  6 +--
 .../src/app/board-groups/[groupId]/page.tsx   | 37 +++++++++++++------
 .../src/app/boards/[boardId]/edit/page.tsx    | 12 +++---
 frontend/src/app/boards/new/page.tsx          | 12 +++---
 frontend/src/app/globals.css                  | 20 ++++++++++
 frontend/src/app/onboarding/page.tsx          |  6 +--
 frontend/src/app/settings/page.tsx            | 10 ++---
 .../src/components/organisms/OrgSwitcher.tsx  | 16 ++++----
 frontend/src/components/ui/command.tsx        |  6 +--
 .../src/components/ui/dropdown-select.tsx     | 22 +++++------
 frontend/src/components/ui/input.tsx          |  2 +-
 frontend/src/components/ui/popover.tsx        |  2 +-
 .../src/components/ui/searchable-select.tsx   |  6 +--
 frontend/src/components/ui/select.tsx         | 14 +++----
 frontend/tailwind.config.cjs                  | 35 ++++++++++++++++++
 16 files changed, 140 insertions(+), 72 deletions(-)

diff --git a/frontend/src/app/agents/[agentId]/edit/page.tsx b/frontend/src/app/agents/[agentId]/edit/page.tsx
index 9fe11dd..e80d035 100644
--- a/frontend/src/app/agents/[agentId]/edit/page.tsx
+++ b/frontend/src/app/agents/[agentId]/edit/page.tsx
@@ -332,9 +332,9 @@ export default function EditAgentPage() {
                   }
                   searchPlaceholder="Search boards..."
                   emptyMessage="No matching boards."
-                  triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                  contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                  itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                  triggerClassName="h-11 w-full px-3 py-2"
+                  contentClassName="shadow-lg"
+                  itemClassName="px-4 py-3"
                   disabled={boards.length === 0}
                 />
                 {resolvedIsGatewayMain ? (
diff --git a/frontend/src/app/agents/new/page.tsx b/frontend/src/app/agents/new/page.tsx
index bec1fd4..c385540 100644
--- a/frontend/src/app/agents/new/page.tsx
+++ b/frontend/src/app/agents/new/page.tsx
@@ -191,9 +191,9 @@ export default function NewAgentPage() {
                   placeholder="Select board"
                   searchPlaceholder="Search boards..."
                   emptyMessage="No matching boards."
-                  triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                  contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                  itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                  triggerClassName="h-11 w-full px-3 py-2"
+                  contentClassName="shadow-lg"
+                  itemClassName="px-4 py-3"
                   disabled={boards.length === 0}
                 />
                 {boards.length === 0 ? (
diff --git a/frontend/src/app/board-groups/[groupId]/page.tsx b/frontend/src/app/board-groups/[groupId]/page.tsx
index 56a3d3c..7f52d24 100644
--- a/frontend/src/app/board-groups/[groupId]/page.tsx
+++ b/frontend/src/app/board-groups/[groupId]/page.tsx
@@ -43,6 +43,13 @@ import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { DashboardShell } from "@/components/templates/DashboardShell";
 import { BoardChatComposer } from "@/components/BoardChatComposer";
 import { Button, buttonVariants } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { createExponentialBackoff } from "@/lib/backoff";
 import { apiDatetimeToMs } from "@/lib/datetime";
 import { formatTimestamp } from "@/lib/formatters";
@@ -892,22 +899,28 @@ export default function BoardGroupDetailPage() {
                     step={1}
                     disabled={!canManageHeartbeat}
                   />
-                  <select
+                  <Select
                     value={heartbeatUnit}
-                    onChange={(event) =>
-                      setHeartbeatUnit(event.target.value as HeartbeatUnit)
+                    onValueChange={(value) =>
+                      setHeartbeatUnit(value as HeartbeatUnit)
                     }
-                    className={cn(
-                      "h-8 rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-900 shadow-sm",
-                      !canManageHeartbeat && "opacity-60 cursor-not-allowed",
-                    )}
                     disabled={!canManageHeartbeat}
                   >
-                    <option value="s">sec</option>
-                    <option value="m">min</option>
-                    <option value="h">hr</option>
-                    <option value="d">day</option>
-                  </select>
+                    <SelectTrigger
+                      className={cn(
+                        "h-8 w-[74px] rounded-md px-2 text-xs shadow-sm",
+                        !canManageHeartbeat && "opacity-60 cursor-not-allowed",
+                      )}
+                    >
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="s">sec</SelectItem>
+                      <SelectItem value="m">min</SelectItem>
+                      <SelectItem value="h">hr</SelectItem>
+                      <SelectItem value="d">day</SelectItem>
+                    </SelectContent>
+                  </Select>
                   <label className="inline-flex items-center gap-2 text-xs text-slate-700">
                     <input
                       type="checkbox"
diff --git a/frontend/src/app/boards/[boardId]/edit/page.tsx b/frontend/src/app/boards/[boardId]/edit/page.tsx
index 379e09c..d7b0fd8 100644
--- a/frontend/src/app/boards/[boardId]/edit/page.tsx
+++ b/frontend/src/app/boards/[boardId]/edit/page.tsx
@@ -818,9 +818,9 @@ export default function EditBoardPage() {
                   placeholder="Select gateway"
                   searchPlaceholder="Search gateways..."
                   emptyMessage="No gateways found."
-                  triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                  contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                  itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                  triggerClassName="h-11 w-full px-3 py-2"
+                  contentClassName="shadow-lg"
+                  itemClassName="px-4 py-3"
                 />
               </div>
             </div>
@@ -872,9 +872,9 @@ export default function EditBoardPage() {
                   placeholder="No group"
                   searchPlaceholder="Search groups..."
                   emptyMessage="No groups found."
-                  triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                  contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                  itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                  triggerClassName="h-11 w-full px-3 py-2"
+                  contentClassName="shadow-lg"
+                  itemClassName="px-4 py-3"
                   disabled={isLoading}
                 />
                 <p className="text-xs text-slate-500">
diff --git a/frontend/src/app/boards/new/page.tsx b/frontend/src/app/boards/new/page.tsx
index 8a0d9f9..d5d5121 100644
--- a/frontend/src/app/boards/new/page.tsx
+++ b/frontend/src/app/boards/new/page.tsx
@@ -188,9 +188,9 @@ export default function NewBoardPage() {
                 placeholder="Select gateway"
                 searchPlaceholder="Search gateways..."
                 emptyMessage="No gateways found."
-                triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                triggerClassName="h-11 w-full px-3 py-2"
+                contentClassName="shadow-lg"
+                itemClassName="px-4 py-3"
               />
             </div>
           </div>
@@ -208,9 +208,9 @@ export default function NewBoardPage() {
                 placeholder="No group"
                 searchPlaceholder="Search groups..."
                 emptyMessage="No groups found."
-                triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                triggerClassName="h-11 w-full px-3 py-2"
+                contentClassName="shadow-lg"
+                itemClassName="px-4 py-3"
                 disabled={isLoading}
               />
               <p className="text-xs text-slate-500">
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 9a9b43e..037a5b3 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -199,6 +199,26 @@ body {
   color: var(--text);
 }
 
+input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
+textarea {
+  background-color: var(--surface);
+  color: var(--text);
+  caret-color: var(--text);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.app-input:-webkit-autofill,
+.app-input:-webkit-autofill:hover,
+.app-input:-webkit-autofill:focus {
+  -webkit-text-fill-color: var(--input-text, var(--text));
+  caret-color: var(--input-text, var(--text));
+  box-shadow: 0 0 0 1000px var(--input-bg, var(--surface)) inset;
+}
+
 * {
   border-color: var(--border);
 }
diff --git a/frontend/src/app/onboarding/page.tsx b/frontend/src/app/onboarding/page.tsx
index ca9a2fd..311167a 100644
--- a/frontend/src/app/onboarding/page.tsx
+++ b/frontend/src/app/onboarding/page.tsx
@@ -178,9 +178,9 @@ export default function OnboardingPage() {
                       placeholder="Select timezone"
                       searchPlaceholder="Search timezones..."
                       emptyMessage="No matching timezones."
-                      triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                      contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                      itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                      triggerClassName="h-11 w-full px-3 py-2"
+                      contentClassName="shadow-lg"
+                      itemClassName="px-4 py-3"
                     />
                   </div>
                 </div>
diff --git a/frontend/src/app/settings/page.tsx b/frontend/src/app/settings/page.tsx
index b218887..60ebc1f 100644
--- a/frontend/src/app/settings/page.tsx
+++ b/frontend/src/app/settings/page.tsx
@@ -182,7 +182,7 @@ export default function SettingsPage() {
                     }}
                     placeholder="Your name"
                     disabled={isSaving}
-                    className="border-slate-300 text-slate-900 focus-visible:ring-blue-500"
+                    className="border-slate-300 [--input-bg:#fff] [--input-text:#0f172a] placeholder:text-slate-500 focus-visible:ring-blue-500"
                   />
                 </div>
                 <div className="space-y-2">
@@ -202,9 +202,9 @@ export default function SettingsPage() {
                     searchPlaceholder="Search timezones..."
                     emptyMessage="No matching timezones."
                     disabled={isSaving}
-                    triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
-                    contentClassName="rounded-xl border border-slate-200 shadow-lg"
-                    itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
+                    triggerClassName="h-11 w-full px-3 py-2"
+                    contentClassName="shadow-lg"
+                    itemClassName="px-4 py-3"
                   />
                 </div>
               </div>
@@ -218,7 +218,7 @@ export default function SettingsPage() {
                   value={displayEmail}
                   readOnly
                   disabled
-                  className="border-slate-200 bg-slate-50 text-slate-600"
+                  className="border-slate-200 [--input-bg:#f8fafc] [--input-text:#475569]"
                 />
               </div>
 
diff --git a/frontend/src/components/organisms/OrgSwitcher.tsx b/frontend/src/components/organisms/OrgSwitcher.tsx
index 3faae41..953baed 100644
--- a/frontend/src/components/organisms/OrgSwitcher.tsx
+++ b/frontend/src/components/organisms/OrgSwitcher.tsx
@@ -144,14 +144,14 @@ export function OrgSwitcher() {
   return (
     <div className="relative">
       <Select value={orgValue} onValueChange={handleOrgChange}>
-        <SelectTrigger className="h-9 w-[220px] rounded-md border-slate-200 bg-white px-3 text-sm font-medium text-slate-900 shadow-none focus:ring-2 focus:ring-blue-500/30 focus:ring-offset-0">
+        <SelectTrigger className="h-9 w-[220px] rounded-md px-3 text-sm font-medium shadow-none focus:ring-2 focus:ring-ring focus:ring-offset-0">
           <span className="flex items-center gap-2">
-            <Building2 className="h-4 w-4 text-slate-400" />
+            <Building2 className="h-4 w-4 text-muted-foreground" />
             <SelectValue placeholder="Select organization" />
           </span>
         </SelectTrigger>
-        <SelectContent className="min-w-[220px] rounded-md border-slate-200 p-1 shadow-xl">
-          <div className="px-3 pb-2 pt-2 text-[10px] font-semibold uppercase tracking-wide text-slate-400">
+        <SelectContent className="min-w-[220px] rounded-md p-1 shadow-xl">
+          <div className="px-3 pb-2 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
             Org switcher
           </div>
           {orgs.length ? (
@@ -159,7 +159,7 @@ export function OrgSwitcher() {
               <SelectItem
                 key={org.id}
                 value={org.id}
-                className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700 data-[state=checked]:bg-slate-50 data-[state=checked]:text-slate-900 focus:bg-slate-100"
+                className="rounded-md py-2 pl-7 pr-3 text-sm data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
               >
                 {org.name}
               </SelectItem>
@@ -167,7 +167,7 @@ export function OrgSwitcher() {
           ) : (
             <SelectItem
               value={orgValue}
-              className="rounded-md py-2 pl-7 pr-3 text-sm text-slate-700"
+              className="rounded-md py-2 pl-7 pr-3 text-sm"
             >
               Organization
             </SelectItem>
@@ -175,10 +175,10 @@ export function OrgSwitcher() {
           <SelectSeparator className="my-2" />
           <SelectItem
             value="__create__"
-            className="rounded-md py-2 pl-3 pr-3 text-sm font-medium text-slate-600 hover:text-slate-900 focus:bg-slate-100 [&>span:first-child]:hidden"
+            className="rounded-md py-2 pl-3 pr-3 text-sm font-medium [&>span:first-child]:hidden"
           >
             <span className="flex items-center gap-2">
-              <Plus className="h-4 w-4 text-slate-400" />
+              <Plus className="h-4 w-4 text-muted-foreground" />
               Create new org
             </span>
           </SelectItem>
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
index 6830231..ff57da1 100644
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -25,13 +25,13 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="border-b border-slate-200 p-2" cmdk-input-wrapper="">
+  <div className="border-b border-border p-2" cmdk-input-wrapper="">
     <div className="relative">
-      <Search className="absolute left-2 top-2.5 h-4 w-4 text-slate-400" />
+      <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
       <CommandPrimitive.Input
         ref={ref}
         className={cn(
-          "w-full rounded-md border border-slate-300 bg-white py-2 pl-8 pr-3 text-sm text-slate-900 placeholder:text-slate-500 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50",
+          "w-full rounded-md border border-input bg-background py-2 pl-8 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
diff --git a/frontend/src/components/ui/dropdown-select.tsx b/frontend/src/components/ui/dropdown-select.tsx
index 51b8157..51ab3e8 100644
--- a/frontend/src/components/ui/dropdown-select.tsx
+++ b/frontend/src/components/ui/dropdown-select.tsx
@@ -137,20 +137,20 @@ export default function DropdownSelect({
           aria-haspopup="listbox"
           disabled={disabled}
           className={cn(
-            "inline-flex h-10 w-auto cursor-pointer items-center justify-between gap-2 rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
-            open && "bg-slate-50",
+            "inline-flex h-10 w-auto cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            open && "bg-accent text-accent-foreground",
             triggerClassName,
           )}
         >
           <span
             className={cn(
               "flex min-w-0 items-center gap-2 truncate",
-              showPlaceholder && "text-slate-500",
+              showPlaceholder && "text-muted-foreground",
             )}
           >
             {SelectedIcon ? (
               <SelectedIcon
-                className={cn("h-4 w-4 text-slate-600", selectedIconClassName)}
+                className={cn("h-4 w-4 text-muted-foreground", selectedIconClassName)}
               />
             ) : null}
             <span className="truncate">
@@ -159,7 +159,7 @@ export default function DropdownSelect({
           </span>
           <ChevronDown
             className={cn(
-              "h-4 w-4 shrink-0 text-slate-400 transition-transform",
+              "h-4 w-4 shrink-0 text-muted-foreground transition-transform",
               open && "rotate-180",
             )}
           />
@@ -169,7 +169,7 @@ export default function DropdownSelect({
         align="start"
         sideOffset={6}
         className={cn(
-          "w-[var(--radix-popover-trigger-width)] min-w-[12rem] overflow-hidden rounded-md border border-slate-200 bg-white p-0 text-slate-900 shadow-lg",
+          "w-[var(--radix-popover-trigger-width)] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-lg",
           contentClassName,
         )}
       >
@@ -184,7 +184,7 @@ export default function DropdownSelect({
             />
           ) : null}
           <CommandList ref={listRef} className="max-h-64 p-1">
-            <CommandEmpty className="px-3 py-6 text-center text-sm text-slate-500">
+            <CommandEmpty className="px-3 py-6 text-center text-sm text-muted-foreground">
               {emptyMessage ?? "No results found."}
             </CommandEmpty>
             {options.map((option) => {
@@ -198,9 +198,9 @@ export default function DropdownSelect({
                   disabled={option.disabled}
                   onSelect={handleSelect}
                   className={cn(
-                    "flex items-center justify-between gap-2 rounded-lg px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900",
+                    "flex items-center justify-between gap-2 rounded-lg px-4 py-3 text-sm text-foreground transition-colors data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
                     isSelected && "font-semibold",
-                    !isSelected && "hover:bg-gray-50",
+                    !isSelected && "hover:bg-accent hover:text-accent-foreground",
                     itemClassName,
                   )}
                 >
@@ -209,7 +209,7 @@ export default function DropdownSelect({
                       <OptionIcon
                         className={cn(
                           "h-4 w-4",
-                          isSelected ? "text-gray-700" : "text-gray-500",
+                          isSelected ? "text-accent-foreground" : "text-muted-foreground",
                           option.iconClassName,
                         )}
                       />
@@ -217,7 +217,7 @@ export default function DropdownSelect({
                     <span className="truncate font-medium">{option.label}</span>
                   </span>
                   {isSelected ? (
-                    <Check className="h-4 w-4 text-gray-400" />
+                    <Check className="h-4 w-4 text-current" />
                   ) : null}
                 </CommandItem>
               );
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index adda50e..1a94940 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<
     ref={ref}
     type={type}
     className={cn(
-      "flex h-11 w-full rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
+      "app-input flex h-11 w-full rounded-xl border border-[color:var(--border)] [--input-bg:var(--surface)] [--input-text:var(--text)] bg-[color:var(--input-bg)] px-4 text-sm text-[color:var(--input-text)] shadow-sm placeholder:text-[color:var(--text-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)] disabled:cursor-not-allowed disabled:[--input-bg:var(--surface-muted)] disabled:[--input-text:var(--text-muted)]",
       className,
     )}
     {...props}
diff --git a/frontend/src/components/ui/popover.tsx b/frontend/src/components/ui/popover.tsx
index 94c4940..800b5ce 100644
--- a/frontend/src/components/ui/popover.tsx
+++ b/frontend/src/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-popover 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",
+        "z-50 w-72 rounded-md border border-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}
diff --git a/frontend/src/components/ui/searchable-select.tsx b/frontend/src/components/ui/searchable-select.tsx
index 7863a5a..32fd34e 100644
--- a/frontend/src/components/ui/searchable-select.tsx
+++ b/frontend/src/components/ui/searchable-select.tsx
@@ -23,11 +23,11 @@ type SearchableSelectProps = {
 };
 
 const baseTriggerClassName =
-  "w-auto h-auto rounded-xl border-2 border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-700 shadow-sm transition-all duration-200 hover:border-gray-300 focus:border-gray-900 focus:ring-4 focus:ring-gray-100";
+  "h-auto w-auto rounded-xl border border-input bg-background px-4 py-3 text-left text-sm font-semibold text-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus:border-ring focus:ring-2 focus:ring-ring";
 const baseContentClassName =
-  "rounded-xl border-2 border-gray-200 bg-white shadow-xl";
+  "rounded-xl border border-border bg-popover shadow-xl";
 const baseItemClassName =
-  "px-4 py-3 text-sm text-gray-700 transition-colors data-[selected=true]:bg-gray-50 data-[selected=true]:text-gray-900 data-[selected=true]:font-semibold hover:bg-gray-50";
+  "px-4 py-3 text-sm text-foreground transition-colors data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[selected=true]:font-semibold hover:bg-accent hover:text-accent-foreground";
 
 export default function SearchableSelect({
   value,
diff --git a/frontend/src/components/ui/select.tsx b/frontend/src/components/ui/select.tsx
index d346a9d..fe47b28 100644
--- a/frontend/src/components/ui/select.tsx
+++ b/frontend/src/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     type="button"
     className={cn(
-      "flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] px-4 text-sm text-strong shadow-sm focus:outline-none focus:ring-2 focus:ring-[color:var(--accent)] focus:ring-offset-2",
+      "flex h-11 w-full cursor-pointer items-center justify-between rounded-xl border border-input bg-background px-4 text-sm text-foreground shadow-sm focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
@@ -71,9 +71,9 @@ const SelectContent = React.forwardRef<
 >(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lg 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",
+    ref={ref}
+    className={cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-2xl border border-border bg-popover text-popover-foreground shadow-lg 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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -104,7 +104,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "py-1.5 pl-8 pr-2 text-sm font-semibold text-strong",
+      "py-1.5 pl-8 pr-2 text-sm font-semibold text-foreground",
       className,
     )}
     {...props}
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm text-strong outline-none focus:bg-[color:var(--surface-strong)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-[color:var(--border)]", className)}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
 ));
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index da4ed85..0a341a4 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -4,6 +4,41 @@ module.exports = {
   content: ["./src/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}"],
   theme: {
     extend: {
+      colors: {
+        border: "var(--border)",
+        input: "var(--input)",
+        ring: "var(--ring)",
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        primary: {
+          DEFAULT: "var(--primary)",
+          foreground: "var(--primary-foreground)",
+        },
+        secondary: {
+          DEFAULT: "var(--secondary)",
+          foreground: "var(--secondary-foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "var(--destructive-foreground)",
+        },
+        muted: {
+          DEFAULT: "var(--muted)",
+          foreground: "var(--muted-foreground)",
+        },
+        accent: {
+          DEFAULT: "var(--accent-shadcn)",
+          foreground: "var(--accent-foreground)",
+        },
+        popover: {
+          DEFAULT: "var(--popover)",
+          foreground: "var(--popover-foreground)",
+        },
+        card: {
+          DEFAULT: "var(--card)",
+          foreground: "var(--card-foreground)",
+        },
+      },
       fontFamily: {
         heading: ["var(--font-heading)", "sans-serif"],
         body: ["var(--font-body)", "sans-serif"],