diff --git a/internal/lookoutui/src/app/NavBar.css b/internal/lookoutui/src/app/NavBar.css
index 573a7d3c548..a04b8ad2bc1 100644
--- a/internal/lookoutui/src/app/NavBar.css
+++ b/internal/lookoutui/src/app/NavBar.css
@@ -21,6 +21,15 @@
   margin-bottom: 0;
 }
 
+.toolbar a.MuiButton-root {
+  transition: background-color 0.15s ease;
+}
+
+.toolbar a.MuiButton-root.active {
+  background-color: var(--nav-active-bg);
+  font-weight: bold;
+}
+
 .toolbar .nav-end {
   display: flex;
   flex-direction: row;
diff --git a/internal/lookoutui/src/app/NavBar.tsx b/internal/lookoutui/src/app/NavBar.tsx
index b80a94d6f4f..cc21b8e7675 100644
--- a/internal/lookoutui/src/app/NavBar.tsx
+++ b/internal/lookoutui/src/app/NavBar.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from "react"
 
 import { Settings } from "@mui/icons-material"
-import { AppBar, Button, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material"
+import { alpha, AppBar, Button, IconButton, Stack, styled, Toolbar, Typography } from "@mui/material"
 import { Link, NavLink, NavLinkProps } from "react-router-dom"
 
 import { SPACING } from "../common/spacing"
@@ -18,6 +18,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
   backgroundColor: theme.palette.appBar.main,
   backgroundImage: "unset",
   color: theme.palette.appBar.contrastText,
+  "--nav-active-bg": alpha(theme.palette.appBar.contrastText, 0.33),
 }))
 
 interface Page {