diff --git a/apps/web/src/components/SettingsView.tsx b/apps/web/src/components/SettingsView.tsx
index 3fda19ed..217d4e70 100644
--- a/apps/web/src/components/SettingsView.tsx
+++ b/apps/web/src/components/SettingsView.tsx
@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Progress } from '@/components/ui/progress'
 import { hasFeature } from '@/lib/featureFlags'
+import { useKonstaToggle } from '@/hooks/useKonstaOverride'
 import { 
   CaretLeft, 
   GithubLogo, 
@@ -105,6 +106,7 @@ const METICULOUS_ADDON_UPDATE_SNIPPET = 'docker exec -it meticai bash -lc "cd /a
 
 export function SettingsView({ onBack, showBlobs, onToggleBlobs, isDark, isFollowSystem, onToggleTheme, onSetFollowSystem, platformTheme, onSetPlatformTheme }: SettingsViewProps) {
   const { t } = useTranslation()
+  const { enabled: useKonstaUi, setEnabled: setUseKonstaUi } = useKonstaToggle()
   
   const [settings, setSettings] = useState<Settings>({
     geminiApiKey: '',
@@ -1166,6 +1168,19 @@ export function SettingsView({ onBack, showBlobs, onToggleBlobs, isDark, isFollo
                   </div>
                 )}
 
+                {/* Konsta UI toggle */}
+                <div className="flex items-center justify-between">
+                  <div className="space-y-0.5">
+                    <Label htmlFor="konsta-ui-toggle" className="text-sm font-medium">{t('appearance.useKonstaUi')}</Label>
+                    <p className="text-xs text-muted-foreground">{t('appearance.useKonstaUiDescription')}</p>
+                  </div>
+                  <Switch
+                    id="konsta-ui-toggle"
+                    checked={useKonstaUi}
+                    onCheckedChange={setUseKonstaUi}
+                  />
+                </div>
+
               </div>
             )}
 
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index d831d42d..45d81951 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -1,6 +1,8 @@
 import { ComponentProps } from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
+import { Button as KButton } from 'konsta/react'
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 
 import { cn } from "@/lib/utils"
 
@@ -43,7 +45,7 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
+function ShadcnButton({
   className,
   variant,
   size,
@@ -64,4 +66,35 @@ function Button({
   )
 }
 
+function Button(props: ComponentProps<"button"> & VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const useKonsta = useKonstaOverride()
+  const { variant, size, asChild = false, className, children, ...rest } = props
+
+  if (!useKonsta || size === 'icon' || asChild) {
+    return <ShadcnButton {...props} />
+  }
+
+  const isOutline = variant === 'outline'
+  const isClear = variant === 'ghost' || variant === 'link'
+  const isTonal = variant === 'ember' || variant === 'secondary'
+  const isRounded = variant === 'liquid' || variant === 'dark-brew' || variant === 'frosted' || variant === 'ember'
+  const isSmall = size === 'sm'
+  const isLarge = size === 'lg'
+
+  return (
+    <KButton
+      outline={isOutline}
+      clear={isClear}
+      tonal={isTonal}
+      rounded={isRounded}
+      small={isSmall}
+      large={isLarge}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </KButton>
+  )
+}
+
 export { Button, buttonVariants }
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index e955b4be..82de8d7c 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -1,8 +1,10 @@
 import { ComponentProps } from "react"
+import { Card as KCard } from 'konsta/react'
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 
 import { cn } from "@/lib/utils"
 
-function Card({ className, ...props }: ComponentProps<"div">) {
+function ShadcnCard({ className, ...props }: ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
@@ -15,6 +17,13 @@ function Card({ className, ...props }: ComponentProps<"div">) {
   )
 }
 
+function Card({ className, ...props }: ComponentProps<"div">) {
+  const useKonsta = useKonstaOverride()
+  if (!useKonsta) return <ShadcnCard className={className} {...props} />
+  // contentWrap={false} because sub-components (CardHeader, CardContent, etc.) handle their own spacing
+  return <KCard outline contentWrap={false} className={cn("!p-0", className)} {...props} />
+}
+
 function CardHeader({ className, ...props }: ComponentProps<"div">) {
   return (
     <div
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index a6716ba8..2280320c 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -2,11 +2,13 @@
 
 import { ComponentProps } from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Checkbox as KCheckbox } from 'konsta/react'
 import CheckIcon from "lucide-react/dist/esm/icons/check"
 
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
-function Checkbox({
+function ShadcnCheckbox({
   className,
   ...props
 }: ComponentProps<typeof CheckboxPrimitive.Root>) {
@@ -29,4 +31,35 @@ function Checkbox({
   )
 }
 
+function Checkbox({
+  className,
+  ...props
+}: ComponentProps<typeof CheckboxPrimitive.Root>) {
+  const useKonsta = useKonstaOverride()
+
+  if (!useKonsta) {
+    return <ShadcnCheckbox className={className} {...props} />
+  }
+
+  const { checked, onCheckedChange, disabled, name, ...rest } = props
+  // Forward id, aria-*, data-* attributes for accessibility
+  const forwardedProps: Record<string, unknown> = {}
+  for (const [key, val] of Object.entries(rest)) {
+    if (key === 'id' || key === 'value' || key.startsWith('aria-') || key.startsWith('data-')) {
+      forwardedProps[key] = val
+    }
+  }
+
+  return (
+    <KCheckbox
+      checked={checked === true}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onCheckedChange?.(e.target.checked)}
+      disabled={disabled}
+      name={name}
+      className={className}
+      {...forwardedProps}
+    />
+  )
+}
+
 export { Checkbox }
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index e7eac9df..fe8a7d92 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
 import XIcon from "lucide-react/dist/esm/icons/x"
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 
 import { cn } from "@/lib/utils"
 
@@ -44,18 +45,25 @@ function DialogOverlay({
   )
 }
 
+// CSS-only adaptation: Konsta Dialog uses a fundamentally different API (imperative
+// title/content/buttons props) that doesn't map to Radix's declarative portal pattern.
+// Instead, we enhance Radix DialogContent with mobile-friendly styling when Konsta is active.
 function DialogContent({
   className,
   children,
   ...props
 }: ComponentProps<typeof DialogPrimitive.Content>) {
+  const useKonsta = useKonstaOverride()
+
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          useKonsta
+            ? "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border-0 p-6 shadow-xl duration-200 sm:max-w-lg"
+            : "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
         )}
         {...props}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 41b64ce9..e10cc9c7 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,8 +1,9 @@
 import { ComponentProps } from "react"
 
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: ComponentProps<"input">) {
+function ShadcnInput({ className, type, ...props }: ComponentProps<"input">) {
   return (
     <input
       type={type}
@@ -18,4 +19,26 @@ function Input({ className, type, ...props }: ComponentProps<"input">) {
   )
 }
 
+function Input({ className, type, ...props }: ComponentProps<"input">) {
+  const useKonsta = useKonstaOverride()
+
+  if (!useKonsta) {
+    return <ShadcnInput className={className} type={type} {...props} />
+  }
+
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-11 w-full min-w-0 rounded-lg border border-border/50 bg-transparent px-4 py-2.5 text-base shadow-none transition-all duration-200 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 export { Input }
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index 737bb1be..b7edc376 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -1,20 +1,14 @@
 import { ComponentProps } from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
-
+import { Progressbar } from 'konsta/react'
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
-function Progress({
-  className,
-  value,
-  ...props
-}: ComponentProps<typeof ProgressPrimitive.Root>) {
+function ShadcnProgress({ className, value, ...props }: ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className
-      )}
+      className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -26,4 +20,29 @@ function Progress({
   )
 }
 
+function Progress({ className, value, ...props }: ComponentProps<typeof ProgressPrimitive.Root>) {
+  const useKonsta = useKonstaOverride()
+
+  if (!useKonsta) {
+    return <ShadcnProgress className={className} value={value} {...props} />
+  }
+
+  // Konsta Progressbar expects 0-1, shadcn Progress uses 0-100
+  // Forward id, aria-*, and data-* attributes for accessibility
+  const { id, ...rest } = props as Record<string, unknown>
+  const forwardProps: Record<string, unknown> = {}
+  if (id) forwardProps.id = id
+  for (const [key, val] of Object.entries(rest)) {
+    if (key.startsWith('aria-') || key.startsWith('data-')) forwardProps[key] = val
+  }
+
+  return (
+    <Progressbar
+      progress={(value || 0) / 100}
+      className={className}
+      {...forwardProps}
+    />
+  )
+}
+
 export { Progress }
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 517728c2..d90ca72f 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -4,6 +4,7 @@ import CheckIcon from "lucide-react/dist/esm/icons/check"
 import ChevronDownIcon from "lucide-react/dist/esm/icons/chevron-down"
 import ChevronUpIcon from "lucide-react/dist/esm/icons/chevron-up"
 
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
 function Select({
@@ -33,12 +34,16 @@ function SelectTrigger({
 }: ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: "sm" | "default"
 }) {
+  const useKonsta = useKonstaOverride()
+
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        useKonsta
+          ? "border-border/50 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-primary focus-visible:ring-primary/20 flex w-fit items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-none transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-11 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          : "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index 3766b038..169c904b 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -2,10 +2,12 @@
 
 import { ComponentProps, useMemo } from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
+import { Range } from 'konsta/react'
 
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
-function Slider({
+function ShadcnSlider({
   className,
   defaultValue,
   value,
@@ -60,4 +62,47 @@ function Slider({
   )
 }
 
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  onValueChange,
+  onValueCommit,
+  step,
+  disabled,
+  ...rest
+}: ComponentProps<typeof SliderPrimitive.Root>) {
+  const useKonsta = useKonstaOverride()
+
+  if (!useKonsta) {
+    return <ShadcnSlider className={className} defaultValue={defaultValue} value={value} min={min} max={max} onValueChange={onValueChange} onValueCommit={onValueCommit} step={step} disabled={disabled} {...rest} />
+  }
+
+  const singleValue = Array.isArray(value) ? value[0] : (Array.isArray(defaultValue) ? defaultValue[0] : min)
+
+  // Forward id, aria-*, data-* attributes
+  const forwardedProps: Record<string, unknown> = {}
+  for (const [key, val] of Object.entries(rest)) {
+    if (key === 'id' || key.startsWith('aria-') || key.startsWith('data-')) {
+      forwardedProps[key] = val
+    }
+  }
+
+  return (
+    <Range
+      value={singleValue}
+      min={min}
+      max={max}
+      step={step ?? 1}
+      disabled={disabled}
+      onInput={(e: React.ChangeEvent<HTMLInputElement>) => onValueChange?.([Number(e.target.value)])}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onValueCommit?.([Number(e.target.value)])}
+      className={className}
+      {...forwardedProps}
+    />
+  )
+}
+
 export { Slider }
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index 3367d083..1819b4be 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -2,10 +2,12 @@
 
 import { ComponentProps } from "react"
 import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { Toggle } from 'konsta/react'
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 
 import { cn } from "@/lib/utils"
 
-function Switch({
+function ShadcnSwitch({
   className,
   ...props
 }: ComponentProps<typeof SwitchPrimitive.Root>) {
@@ -28,4 +30,36 @@ function Switch({
   )
 }
 
+function Switch({
+  className,
+  ...props
+}: ComponentProps<typeof SwitchPrimitive.Root>) {
+  const useKonsta = useKonstaOverride()
+
+  if (!useKonsta) {
+    return <ShadcnSwitch className={className} {...props} />
+  }
+
+  const { checked, defaultChecked, onCheckedChange, disabled, ...rest } = props
+
+  // Forward id, name, aria-*, data-* for accessibility and label association
+  const forwardedProps: Record<string, unknown> = {}
+  for (const [key, val] of Object.entries(rest)) {
+    if (key === 'id' || key === 'name' || key === 'value' || key.startsWith('aria-') || key.startsWith('data-')) {
+      forwardedProps[key] = val
+    }
+  }
+
+  return (
+    <Toggle
+      checked={checked ?? false}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onCheckedChange?.(e.target.checked)}
+      disabled={disabled}
+      className={className}
+      {...(defaultChecked !== undefined ? { defaultChecked } : {})}
+      {...forwardedProps}
+    />
+  )
+}
+
 export { Switch }
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index d1a5b7a3..ebc6fec6 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -2,31 +2,24 @@
 
 import { ComponentProps } from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
-
+import { useKonstaOverride } from '@/hooks/useKonstaOverride'
 import { cn } from "@/lib/utils"
 
-function Tabs({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {
   return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
+    <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />
   )
 }
 
-function TabsList({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.List>) {
+function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
+  const useKonsta = useKonstaOverride()
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        useKonsta
+          ? "bg-muted/50 text-muted-foreground inline-flex h-10 w-full items-center justify-center rounded-lg p-1 gap-0.5"
+          : "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className
       )}
       {...props}
@@ -34,15 +27,15 @@ function TabsList({
   )
 }
 
-function TabsTrigger({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const useKonsta = useKonstaOverride()
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        useKonsta
+          ? "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          : "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -50,16 +43,9 @@ function TabsTrigger({
   )
 }
 
-function TabsContent({
-  className,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
   return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
+    <TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
   )
 }
 
diff --git a/apps/web/src/hooks/useKonstaOverride.ts b/apps/web/src/hooks/useKonstaOverride.ts
index a7aca3b9..8cb38f5e 100644
--- a/apps/web/src/hooks/useKonstaOverride.ts
+++ b/apps/web/src/hooks/useKonstaOverride.ts
@@ -12,17 +12,25 @@ function getStoredValue(): boolean {
   }
 }
 
-// Subscribe to both cross-tab (StorageEvent) and same-tab (custom event) changes
+// Shared subscription: single pair of global listeners fans out to all subscribers
+const subscribers = new Set<() => void>()
+let listening = false
+
+function ensureListeners() {
+  if (typeof window === 'undefined' || listening) return
+  window.addEventListener('storage', (e: StorageEvent) => {
+    if (e.key === STORAGE_KEYS.USE_KONSTA_UI) subscribers.forEach(cb => cb())
+  })
+  window.addEventListener(KONSTA_CHANGED, () => {
+    subscribers.forEach(cb => cb())
+  })
+  listening = true
+}
+
 function subscribe(callback: () => void) {
-  const storageHandler = (e: StorageEvent) => {
-    if (e.key === STORAGE_KEYS.USE_KONSTA_UI) callback()
-  }
-  window.addEventListener('storage', storageHandler)
-  window.addEventListener(KONSTA_CHANGED, callback)
-  return () => {
-    window.removeEventListener('storage', storageHandler)
-    window.removeEventListener(KONSTA_CHANGED, callback)
-  }
+  subscribers.add(callback)
+  ensureListeners()
+  return () => { subscribers.delete(callback) }
 }
 
 /**
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
index c7152848..1f305e09 100644
--- a/apps/web/vitest.config.ts
+++ b/apps/web/vitest.config.ts
@@ -12,6 +12,11 @@ export default defineConfig({
     setupFiles: './src/test/setup.ts',
     css: true,
     exclude: ['**/node_modules/**', '**/dist/**', '**/e2e/**', '**/.{idea,git,cache,output,temp}/**'],
+    server: {
+      deps: {
+        inline: ['konsta'],
+      },
+    },
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],