diff --git a/.changeset/warm-clouds-shine.md b/.changeset/warm-clouds-shine.md
new file mode 100644
index 00000000..5096d154
--- /dev/null
+++ b/.changeset/warm-clouds-shine.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+style: Rename sidenav background color tokens for clarity and update AppNav hover/focus states
diff --git a/packages/app/src/components/AppNav/AppNav.module.scss b/packages/app/src/components/AppNav/AppNav.module.scss
index 26188011..764328df 100644
--- a/packages/app/src/components/AppNav/AppNav.module.scss
+++ b/packages/app/src/components/AppNav/AppNav.module.scss
@@ -131,17 +131,17 @@ $transition-slow: 0.2s ease;
 
   &:hover {
     color: var(--color-text-sidenav-link-active);
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 
   &:focus-visible {
     outline: none;
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 
   &Active {
     color: var(--color-text-sidenav-link-active);
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 }
 
@@ -178,7 +178,7 @@ $transition-slow: 0.2s ease;
     transform $transition-fast;
 
   &:hover {
-    background: var(--color-bg-sidenav-link-hover);
+    background: var(--color-bg-sidenav-link-active-hover);
     color: var(--color-text-sidenav-link-active);
     transform: scale(1.1);
   }
@@ -213,12 +213,12 @@ $transition-slow: 0.2s ease;
 
   &:hover {
     color: var(--color-text-sidenav-link-active);
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 
   &:focus-visible {
     outline: none;
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 
   i {
@@ -227,7 +227,7 @@ $transition-slow: 0.2s ease;
 
   &Active {
     color: var(--color-text-sidenav-link-active);
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 }
 
@@ -308,7 +308,7 @@ $transition-slow: 0.2s ease;
   overflow: hidden;
 
   &:hover {
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
   }
 
   @include interactive-press;
@@ -321,7 +321,7 @@ $transition-slow: 0.2s ease;
     width: fit-content;
 
     &:hover {
-      background: var(--color-bg-sidenav-link);
+      background: var(--color-bg-sidenav-link-active);
     }
 
     @include interactive-press;
@@ -365,7 +365,7 @@ $transition-slow: 0.2s ease;
     border-color $transition-slow;
 
   &:hover {
-    background: var(--color-bg-sidenav-link);
+    background: var(--color-bg-sidenav-link-active);
     border-color: var(--color-border);
   }
 
@@ -377,7 +377,7 @@ $transition-slow: 0.2s ease;
     background: transparent;
 
     &:hover {
-      background: var(--color-bg-sidenav-link);
+      background: var(--color-bg-sidenav-link-active);
     }
 
     @include interactive-press;
diff --git a/packages/app/src/components/AppNav/AppNav.tsx b/packages/app/src/components/AppNav/AppNav.tsx
index c693d6c2..6cf7d26f 100644
--- a/packages/app/src/components/AppNav/AppNav.tsx
+++ b/packages/app/src/components/AppNav/AppNav.tsx
@@ -120,18 +120,18 @@ function NewDashboardButton() {
 
   if (IS_LOCAL_MODE) {
     return (
-      <Link href="/dashboards">
-        <Button
-          data-testid="create-dashboard-button"
-          variant="transparent"
-          color="var(--color-text)"
-          py="0px"
-          px="sm"
-          fw={400}
-        >
-          <span className="pe-2">+</span> Create Dashboard
-        </Button>
-      </Link>
+      <Button
+        component={Link}
+        href="/dashboards"
+        data-testid="create-dashboard-button"
+        variant="transparent"
+        color="var(--color-text)"
+        py="0px"
+        px="sm"
+        fw={400}
+      >
+        <span className="pe-2">+</span> Create Dashboard
+      </Button>
     );
   }
 
diff --git a/packages/app/src/theme/mantineTheme.ts b/packages/app/src/theme/mantineTheme.ts
index 5d59c75f..ede8e5e8 100644
--- a/packages/app/src/theme/mantineTheme.ts
+++ b/packages/app/src/theme/mantineTheme.ts
@@ -9,6 +9,8 @@ import {
   Tooltip,
 } from '@mantine/core';
 
+import focusClasses from '../../styles/focus.module.scss';
+
 export const makeTheme = ({
   fontFamily = '"IBM Plex Sans", monospace',
 }: {
@@ -16,6 +18,7 @@ export const makeTheme = ({
 }): MantineThemeOverride => ({
   cursorType: 'pointer',
   fontFamily,
+  focusClassName: focusClasses.focusRing,
   primaryColor: 'green',
   primaryShade: 8,
   autoContrast: true,
diff --git a/packages/app/src/theme/semanticColorsGrouped.ts b/packages/app/src/theme/semanticColorsGrouped.ts
index c7360b6e..6885d599 100644
--- a/packages/app/src/theme/semanticColorsGrouped.ts
+++ b/packages/app/src/theme/semanticColorsGrouped.ts
@@ -34,7 +34,12 @@ export const semanticColorsGrouped = {
   ],
   icons: ['color-icon-primary', 'color-icon-muted'],
   overlay: ['color-overlay', 'color-backdrop'],
-  states: ['color-state-hover', 'color-state-selected', 'color-state-focus'],
+  states: [
+    'color-state-hover',
+    'color-state-selected',
+    'color-state-focus',
+    'color-outline-focus',
+  ],
   json: [
     'color-json-string',
     'color-json-number',
diff --git a/packages/app/styles/_semantic-colors.scss b/packages/app/styles/_semantic-colors.scss
index 603fff5b..527d2f25 100644
--- a/packages/app/styles/_semantic-colors.scss
+++ b/packages/app/styles/_semantic-colors.scss
@@ -7,8 +7,8 @@
   --color-bg-muted: var(--mantine-color-dark-7);
   --color-bg-highlighted: rgb(55 58 64 / 70%);
   --color-bg-sidenav: var(--mantine-color-dark-9);
-  --color-bg-sidenav-link: var(--mantine-color-dark-6);
-  --color-bg-sidenav-link-hover: var(--mantine-color-dark-7);
+  --color-bg-sidenav-link-active: var(--mantine-color-dark-6);
+  --color-bg-sidenav-link-active-hover: var(--mantine-color-dark-7);
   --color-bg-header: var(--mantine-color-dark-9);
   --color-bg-hover: var(--mantine-color-dark-6);
   --color-bg-active: var(--mantine-color-dark-5);
@@ -50,6 +50,7 @@
   --color-state-hover: var(--mantine-color-dark-6);
   --color-state-selected: var(--mantine-color-dark-5);
   --color-state-focus: var(--mantine-color-dark-4);
+  --color-outline-focus: var(--mantine-color-green-4);
 
   /* Code / Misc UI */
   --color-bg-code: var(--mantine-color-dark-8);
@@ -104,8 +105,8 @@
   --color-bg-muted: #f6f6fa;
   --color-bg-highlighted: rgb(230 232 237 / 70%);
   --color-bg-sidenav: var(--mantine-color-white);
-  --color-bg-sidenav-link: #f6f6fa;
-  --color-bg-sidenav-link-hover: var(--mantine-color-gray-2);
+  --color-bg-sidenav-link-active: #f6f6fa;
+  --color-bg-sidenav-link-active-hover: var(--mantine-color-gray-2);
   --color-bg-header: var(--mantine-color-gray-1);
   --color-bg-modal: var(--mantine-color-white);
   --color-bg-hover: var(--mantine-color-gray-3);
@@ -148,6 +149,7 @@
   --color-state-hover: var(--mantine-color-dark-3);
   --color-state-selected: var(--mantine-color-dark-4);
   --color-state-focus: var(--mantine-color-dark-5);
+  --color-outline-focus: var(--mantine-color-green-8);
 
   /* Code / Misc UI - inverted */
   --color-bg-code: var(--mantine-color-dark-1);
diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
index 3edede13..c3979890 100644
--- a/packages/app/styles/app.scss
+++ b/packages/app/styles/app.scss
@@ -39,6 +39,13 @@ body {
   font-size: var(--mantine-font-size-sm);
 }
 
+a:focus-visible,
+button:focus-visible {
+  outline: 2px solid var(--color-outline-focus);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-xs);
+}
+
 .accordion-button,
 .button,
 .form-control {
diff --git a/packages/app/styles/focus.module.scss b/packages/app/styles/focus.module.scss
new file mode 100644
index 00000000..0f21db49
--- /dev/null
+++ b/packages/app/styles/focus.module.scss
@@ -0,0 +1,5 @@
+.focusRing:focus-visible {
+  outline: 2px solid var(--color-outline-focus);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-xs);
+}