diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 6dbc747b7..0294ef7ad 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -15,8 +15,8 @@ const variants = {
     inactive: "text-muted-foreground bg-secondary",
   },
   secondary: {
-    active: "font-bold text-primary",
-    inactive: "text-secondary-foreground",
+    active: "font-bold text-selected",
+    inactive: "text-muted-foreground",
   },
 };
 
diff --git a/web/src/views/live/LiveDashboardView.tsx b/web/src/views/live/LiveDashboardView.tsx
index ba60fadcf..5aa5ca6de 100644
--- a/web/src/views/live/LiveDashboardView.tsx
+++ b/web/src/views/live/LiveDashboardView.tsx
@@ -81,17 +81,23 @@ export default function LiveDashboardView({
           <div />
           <div className="flex items-center gap-1">
             <Button
-              className={layout == "grid" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "grid"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("grid")}
             >
               <CiGrid31 className="m-1" />
             </Button>
             <Button
-              className={layout == "list" ? "text-blue-600 bg-blue-200" : ""}
+              className={
+                layout == "list"
+                  ? "text-selected bg-blue-900 focus:bg-blue-900 bg-opacity-60 focus:bg-opacity-60"
+                  : "text-muted-foreground bg-muted"
+              }
               size="xs"
-              variant="secondary"
               onClick={() => setLayout("list")}
             >
               <CiGrid2H className="m-1" />