diff --git a/apps/web/src/components/ui/accordion/AccordionItem.tsx b/apps/web/src/components/ui/accordion/AccordionItem.tsx
index 714302bd8..38659806e 100644
--- a/apps/web/src/components/ui/accordion/AccordionItem.tsx
+++ b/apps/web/src/components/ui/accordion/AccordionItem.tsx
@@ -8,7 +8,7 @@ export const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps
   ({ value, open, onToggle, className, children, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('border-b border-kodo-steel/30', className)}
+      className={cn('border-b border-border', className)}
       {...props}
     >
       {React.Children.map(children, (child) => {
diff --git a/apps/web/src/components/ui/accordion/AccordionTrigger.tsx b/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
index 6cd3fd64e..2b1f58baa 100644
--- a/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
+++ b/apps/web/src/components/ui/accordion/AccordionTrigger.tsx
@@ -13,7 +13,7 @@ export const AccordionTrigger = React.forwardRef<
     onClick={onToggle}
     className={cn(
       'flex w-full items-center justify-between py-4 text-left font-medium transition-all',
-      'hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
+      'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
       '[&[data-state=open]>svg]:rotate-180',
       className,
     )}
@@ -24,7 +24,7 @@ export const AccordionTrigger = React.forwardRef<
     {children}
     <ChevronDown
       className={cn(
-        'h-4 w-4 shrink-0 text-kodo-secondary transition-transform duration-200',
+        'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)]',
         open && 'rotate-180',
       )}
     />
diff --git a/apps/web/src/components/ui/tabs/TabsContent.tsx b/apps/web/src/components/ui/tabs/TabsContent.tsx
index 992cebf2f..d80af4149 100644
--- a/apps/web/src/components/ui/tabs/TabsContent.tsx
+++ b/apps/web/src/components/ui/tabs/TabsContent.tsx
@@ -15,7 +15,7 @@ export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
       <div
         ref={ref}
         className={cn(
-          'mt-2 ring-offset-kodo-void focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
+          'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           className,
         )}
         {...props}
diff --git a/apps/web/src/components/ui/tabs/TabsList.tsx b/apps/web/src/components/ui/tabs/TabsList.tsx
index 55c17fa36..96a589370 100644
--- a/apps/web/src/components/ui/tabs/TabsList.tsx
+++ b/apps/web/src/components/ui/tabs/TabsList.tsx
@@ -8,7 +8,7 @@ export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
     <div
       ref={ref}
       className={cn(
-        'inline-flex h-10 items-center justify-center rounded-md bg-kodo-graphite p-1 text-kodo-content-dim border border-kodo-steel/30',
+        'inline-flex h-10 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground border border-border',
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/tabs/TabsTrigger.tsx b/apps/web/src/components/ui/tabs/TabsTrigger.tsx
index ca0005661..986e3c430 100644
--- a/apps/web/src/components/ui/tabs/TabsTrigger.tsx
+++ b/apps/web/src/components/ui/tabs/TabsTrigger.tsx
@@ -25,12 +25,12 @@ export const TabsTrigger = React.forwardRef<
         onClick={() => onValueChange?.(triggerValue)}
         className={cn(
           'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-1.5 text-sm font-bold uppercase tracking-wider',
-          'ring-offset-kodo-void transition-all duration-200',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
+          'ring-offset-background transition-all duration-[var(--duration-normal)]',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
           isActive
-            ? 'bg-kodo-cyan text-kodo-void'
-            : 'text-kodo-content-dim hover:text-kodo-text-main',
+            ? 'bg-primary text-primary-foreground'
+            : 'text-muted-foreground hover:text-foreground',
           className,
         )}
         {...props}