diff --git a/web/src/components/dynamic/CameraFeatureToggle.tsx b/web/src/components/dynamic/CameraFeatureToggle.tsx
index 666bfb33b..a3a674c64 100644
--- a/web/src/components/dynamic/CameraFeatureToggle.tsx
+++ b/web/src/components/dynamic/CameraFeatureToggle.tsx
@@ -8,12 +8,12 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-primary",
-    inactive: "text-muted-foreground bg-muted",
+    active: "font-bold text-primary-foreground bg-selected",
+    inactive: "text-secondary-foreground bg-secondary",
   },
   secondary: {
     active: "font-bold text-primary",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
   },
 };
 
diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 4725d0eb1..26321d69a 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -11,12 +11,12 @@ import { isDesktop } from "react-device-detect";
 
 const variants = {
   primary: {
-    active: "font-bold text-primary-foreground bg-primary",
-    inactive: "text-muted-foreground bg-muted",
+    active: "font-bold text-primary-foreground bg-selected",
+    inactive: "text-muted-foreground bg-secondary",
   },
   secondary: {
     active: "font-bold text-primary",
-    inactive: "text-muted-foreground",
+    inactive: "text-secondary-foreground",
   },
 };
 
diff --git a/web/src/views/live/LiveCameraView.tsx b/web/src/views/live/LiveCameraView.tsx
index 3dfd76109..dff75fc78 100644
--- a/web/src/views/live/LiveCameraView.tsx
+++ b/web/src/views/live/LiveCameraView.tsx
@@ -101,7 +101,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
         </Button>
         <TooltipProvider>
           <div
-            className={`flex flex-row items-center gap-1 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
+            className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
           >
             <CameraFeatureToggle
               className="p-2 md:p-0"
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 2a1978256..167019d9b 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -44,6 +44,7 @@ module.exports = {
         audio: "#ea580c",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
+        selected: "hsl(var(--selected))",
         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 d184b4434..74743d82f 100644
--- a/web/themes/theme-default.css
+++ b/web/themes/theme-default.css
@@ -73,8 +73,8 @@
     --background-hsl: hsl(0 0 0%);
     --background: 0 0% 0%;
 
-    --foreground: hsl(210 40% 98%);
-    --foreground: 210 40% 98%;
+    --foreground: hsl(0, 0%, 100%);
+    --foreground: 0, 0%, 100%;
 
     --card: hsl(222.2 84% 4.9%);
     --card: 222.2 84% 4.9%;
@@ -91,20 +91,20 @@
     --primary: hsl(0, 0%, 9%);
     --primary: 0, 0%, 9%;
 
-    --primary-foreground: hsl(222.2 47.4% 11.2%);
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary-foreground: hsl(0, 0%, 100%);
+    --primary-foreground: 0, 0%, 100%;
 
     --secondary: hsl(0, 0%, 15%);
     --secondary: 0, 0%, 15%;
 
-    --secondary-foreground: hsl(210 40% 98%);
-    --secondary-foreground: 210 40% 98%;
+    --secondary-foreground: hsl(0, 0%, 83%);
+    --secondary-foreground: 0, 0%, 83%;
 
     --muted: hsl(217.2 32.6% 17.5%);
     --muted: 217.2 32.6% 17.5%;
 
-    --muted-foreground: hsl(215 20.2% 65.1%);
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted-foreground: hsl(0, 0%, 32%);
+    --muted-foreground: 0, 0%, 32%;
 
     --accent: hsl(217.2 32.6% 17.5%);
     --accent: 217.2 32.6% 17.5%;
@@ -126,5 +126,8 @@
 
     --ring: hsl(212.7 26.8% 83.9%);
     --ring: 212.7 26.8% 83.9%;
+
+    --selected: hsl(228, 89%, 63%);
+    --selected: 228, 89%, 63%;
   }
 }