diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css
new file mode 100644
index 00000000000..13dd0977628
--- /dev/null
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.module.css
@@ -0,0 +1,3 @@
+.active {
+  border-bottom: 2px solid var(--fds-semantic-surface-neutral-default);
+}
diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
index dd948b288f4..442da6782e3 100644
--- a/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/DashboardHeader.tsx
@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import classes from './DashboardHeader.module.css';
+import cn from 'classnames';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -19,6 +21,7 @@ import { usePageHeaderTitle } from 'dashboard/hooks/usePageHeaderTitle';
 import { useSubroute } from '../../../hooks/useSubRoute';
 import type { HeaderMenuItem } from './dashboardHeaderMenuItems';
 import { dashboardHeaderMenuItems } from './dashboardHeaderMenuItems';
+import { StringUtils } from '@studio/pure-functions';
 
 export const DashboardHeader = () => {
   const pageHeaderTitle: string = usePageHeaderTitle();
@@ -48,6 +51,7 @@ function TopNavigationMenuItem({ menuItem }: TopNavigationMenuProps): React.Reac
   const selectedContext: string = useSelectedContext();
   const { t } = useTranslation();
   const path: string = `${menuItem.link}/${selectedContext}`;
+  const currentRoutePath: string = extractSecondLastRouterParam(location.pathname);
 
   return (
     <StudioPageHeader.HeaderLink
@@ -55,13 +59,24 @@ function TopNavigationMenuItem({ menuItem }: TopNavigationMenuProps): React.Reac
       variant='regular'
       renderLink={(props) => (
         <NavLink to={path} {...props}>
-          {t(menuItem.name)}
+          <span
+            className={cn({
+              [classes.active]: StringUtils.removeLeadingSlash(menuItem.link) === currentRoutePath,
+            })}
+          >
+            {t(menuItem.name)}
+          </span>
         </NavLink>
       )}
     />
   );
 }
 
+function extractSecondLastRouterParam(pathname: string): string {
+  const pathnameArray = pathname.split('/');
+  return pathnameArray[pathnameArray.length - 2];
+}
+
 const DashboardHeaderMenu = () => {
   const { t } = useTranslation();
   const showButtonText = !useMediaQuery(MEDIA_QUERY_MAX_WIDTH);
diff --git a/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts b/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
index f7b7710d874..d477956a392 100644
--- a/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
+++ b/frontend/dashboard/pages/PageLayout/DashboardHeader/dashboardHeaderMenuItems.ts
@@ -1,8 +1,8 @@
 import { Subroute } from '../../../context/HeaderContext';
 
 enum HeaderMenuItemKey {
-  OrgLibrary = 'orgLibrary',
-  AppDashboard = 'appDashboard',
+  OrgLibrary = 'org-library',
+  AppDashboard = 'app-dashboard',
 }
 
 export interface HeaderMenuItem {