diff --git a/components/layout/NavBar.tsx b/components/layout/NavBar.tsx
index 0deb2df..6e6a4df 100644
--- a/components/layout/NavBar.tsx
+++ b/components/layout/NavBar.tsx
@@ -19,6 +19,10 @@ const LINKS = [
   { href: "/devices", label: "Devices" },
 ];
 
+function isActive(pathname: string, href: string): boolean {
+  return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+}
+
 function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   return (
@@ -30,7 +34,7 @@ function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
           onClick={onNavigate}
           className={cn(
             "border-b-2 px-2.5 py-1.5 text-xs font-medium tracking-wide uppercase transition-colors",
-            pathname === link.href
+            isActive(pathname, link.href)
               ? "border-primary text-foreground"
               : "border-transparent text-muted-foreground hover:text-foreground",
           )}