diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index b1e61c126c..592c8d7537 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -88,9 +88,16 @@ export const NavLinkItem = (props: {
   children: React.ReactNode
   end?: boolean
   disabled?: boolean
+  /**
+   * Used for making sure the link highlights for all sub-routes even if it
+   * links to the first sub-route directly, e.g., for route tabs
+   */
+  activePrefix?: string
 }) => {
+  const { pathname } = useLocation()
   // If the current page is the create form for this NavLinkItem's resource, highlight the NavLink in the sidebar
-  const currentPathIsCreateForm = useLocation().pathname.startsWith(`${props.to}-new`)
+  const onCreateFormForPath = pathname.startsWith(`${props.to}-new`)
+  const altActive = props.activePrefix && pathname.startsWith(props.activePrefix)
   return (
     <li>
       <NavLink
@@ -98,7 +105,7 @@ export const NavLinkItem = (props: {
         className={({ isActive }) =>
           cn(linkStyles, {
             'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
-              isActive || currentPathIsCreateForm,
+              isActive || onCreateFormForPath || altActive,
             'pointer-events-none text-disabled': props.disabled,
           })
         }
diff --git a/app/layouts/SystemLayout.tsx b/app/layouts/SystemLayout.tsx
index d6c28f2f3d..ef12553385 100644
--- a/app/layouts/SystemLayout.tsx
+++ b/app/layouts/SystemLayout.tsx
@@ -108,7 +108,7 @@ export function SystemLayout() {
           <NavLinkItem to={pb.systemUtilization()}>
             <Metrics16Icon /> Utilization
           </NavLinkItem>
-          <NavLinkItem to={pb.sledInventory()}>
+          <NavLinkItem to={pb.sledInventory()} activePrefix={pb.inventory()}>
             <Servers16Icon /> Inventory
           </NavLinkItem>
           <NavLinkItem to={pb.ipPools()}>