diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index b3b0e451f..685ab92a2 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-secondary text-primary hover:bg-secondary/80",
-        select: "bg-selected text-white hover:bg-opacity-90",
+        select: "bg-selected text-selected-foreground hover:bg-opacity-90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 524d5b4b0..80cbc4a12 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -46,7 +46,10 @@ module.exports = {
         background: "hsl(var(--background))",
         background_alt: "hsl(var(--background-alt))",
         foreground: "hsl(var(--foreground))",
-        selected: "hsl(var(--selected))",
+        selected: {
+          DEFAULT: "hsl(var(--selected))",
+          foreground: "hsl(var(--selected-foreground))",
+        },
         primary: {
           DEFAULT: "hsl(var(--primary))",
           foreground: "hsl(var(--primary-foreground))",
diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css
index 9e0d56253..a9c81cdf6 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -72,6 +72,9 @@
     --selected: hsl(228, 89%, 63%);
     --selected: 228 89% 63%;
 
+    --selected-foreground: hsl(0 0% 100%);
+    --selected-foreground: 0 0% 100%;
+
     --radius: 0.5rem;
 
     --severity_alert: var(--red-800);
@@ -162,8 +165,5 @@
 
     --ring: hsla(0 0% 25% 0%);
     --ring: 0 0% 25% 0%;
-
-    --selected: hsl(228, 89%, 63%);
-    --selected: 228 89% 63%;
   }
 }