diff --git a/barkmanui/src/common/components/BarkHeader.module.css b/barkmanui/src/common/components/BarkHeader.module.css
index 973e98f..35387f8 100644
--- a/barkmanui/src/common/components/BarkHeader.module.css
+++ b/barkmanui/src/common/components/BarkHeader.module.css
@@ -26,7 +26,7 @@
         background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
     }
 
-    [data-mantine-color-scheme] &[data-active] {
+    [data-mantine-color-scheme] & .active {
         background-color: var(--mantine-color-blue-filled);
         color: var(--mantine-color-white);
     }
diff --git a/barkmanui/src/common/components/BarkHeader.tsx b/barkmanui/src/common/components/BarkHeader.tsx
index 61d9787..7780ae6 100644
--- a/barkmanui/src/common/components/BarkHeader.tsx
+++ b/barkmanui/src/common/components/BarkHeader.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { Burger, Container, Group } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import classes from './BarkHeader.module.css';
+import {NavLink} from "react-router";
 
 const links = [
     { link: '/', label: 'Home' },
@@ -10,21 +11,12 @@ const links = [
 
 export function BarkHeader() {
     const [opened, { toggle }] = useDisclosure(false);
-    const [active, setActive] = useState(links[0].link);
 
     const items = links.map((link) => (
-        <a
-            key={link.label}
-            href={link.link}
-            className={classes.link}
-            data-active={active === link.link || undefined}
-            onClick={(event) => {
-                event.preventDefault();
-                setActive(link.link);
-            }}
-        >
+        <NavLink className = {({ isActive }) =>
+                classes.link + ' ' + (isActive ? classes.active : '')} to={link.link} >
             {link.label}
-        </a>
+        </NavLink>
     ));
 
     return (
diff --git a/barkmanui/src/features/inventory/InventoryList.tsx b/barkmanui/src/features/inventory/InventoryList.tsx
index fb6139b..45844f2 100644
--- a/barkmanui/src/features/inventory/InventoryList.tsx
+++ b/barkmanui/src/features/inventory/InventoryList.tsx
@@ -2,6 +2,7 @@ import {useQuery} from "@tanstack/react-query";
 import {Link} from "react-router";
 import {InventoryItem} from "./types";
 import Button from "../../common/components/Button.tsx";
+import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 
 
 function InventoryList() {
@@ -26,6 +27,8 @@ function InventoryList() {
 
     return (
         <>
+            <BarkHeader></BarkHeader>
+
             <div>
                 <h1 className={"text-brand"}>Inventory</h1>
             </div>