diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 1b42e5f7b..b30fae18d 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -11,7 +11,7 @@ import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 const variants = {
   primary: {
-    active: "font-bold text-white bg-selected",
+    active: "font-bold bg-selected text-selected-foreground",
     inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {
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/src/components/ui/calendar.tsx b/web/src/components/ui/calendar.tsx
index 792df0890..387dfc879 100644
--- a/web/src/components/ui/calendar.tsx
+++ b/web/src/components/ui/calendar.tsx
@@ -41,7 +41,7 @@ function Calendar({
         ),
         day_range_end: "day-range-end",
         day_selected:
-          "bg-selected text-white hover:bg-selected hover:text-white focus:bg-selected focus:text-white",
+          "bg-selected text-selected-foreground hover:bg-selected hover:text-selected-foreground focus:bg-selected focus:text-selected-foreground",
         day_today: "bg-muted text-muted-foreground",
         day_outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index def4aa972..5db36299d 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -561,7 +561,6 @@ function DetectionReview({
           {(currentItems?.length ?? 0) > 0 && (itemsToReview ?? 0) > 0 && (
             <div className="col-span-full flex justify-center items-center">
               <Button
-                className="text-white"
                 variant="select"
                 onClick={() => {
                   markAllItemsAsReviewed(currentItems ?? []);
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%;
   }
 }