diff --git a/frontend/packages/yki/public/i18n/en-GB/common.json b/frontend/packages/yki/public/i18n/en-GB/common.json
index 46c1207a0..78406154f 100644
--- a/frontend/packages/yki/public/i18n/en-GB/common.json
+++ b/frontend/packages/yki/public/i18n/en-GB/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Continue to content",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Main navigation"
         },
         "sessionState": {
           "activeRegistrations_one": "You have already started 1 registration.",
diff --git a/frontend/packages/yki/public/i18n/fi-FI/common.json b/frontend/packages/yki/public/i18n/fi-FI/common.json
index bc26e0506..500a5660a 100644
--- a/frontend/packages/yki/public/i18n/fi-FI/common.json
+++ b/frontend/packages/yki/public/i18n/fi-FI/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Jatka sisältöön",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Päänavigaatio"
         },
         "sessionState": {
           "activeRegistrations_one": "Sinulla on 1 ilmoittautuminen kesken.",
diff --git a/frontend/packages/yki/public/i18n/sv-SE/common.json b/frontend/packages/yki/public/i18n/sv-SE/common.json
index 36e66da43..1e6b90f99 100644
--- a/frontend/packages/yki/public/i18n/sv-SE/common.json
+++ b/frontend/packages/yki/public/i18n/sv-SE/common.json
@@ -68,7 +68,8 @@
       "header": {
         "accessibility": {
           "continueToMain": "Fortsätt till innehållet",
-          "langSelectorAriaLabel": "Kieli / Språk / Language"
+          "langSelectorAriaLabel": "Kieli / Språk / Language",
+          "mainNavigation": "Huvudnavigering"
         },
         "sessionState": {
           "activeRegistrations_one": "Du har redan påbörjat 1 anmälan.",
diff --git a/frontend/packages/yki/src/components/layouts/Header.tsx b/frontend/packages/yki/src/components/layouts/Header.tsx
index a7083cef6..f628e11ab 100644
--- a/frontend/packages/yki/src/components/layouts/Header.tsx
+++ b/frontend/packages/yki/src/components/layouts/Header.tsx
@@ -10,7 +10,7 @@ import {
 import { AppLanguage, Direction } from 'shared/enums';
 import { useWindowProperties } from 'shared/hooks';
 
-import { PublicNavTabs } from 'components/layouts/publicHeader/PublicNavTabs';
+import { PublicNavigationLinks } from 'components/layouts/publicHeader/PublicNavigationLinks';
 import { SessionStateHeader } from 'components/layouts/SessionStateHeader';
 import {
   changeLang,
@@ -70,7 +70,7 @@ export const Header = (): JSX.Element => {
             </Link>
           </div>
           <div className="header__tabs">
-            <PublicNavTabs />
+            <PublicNavigationLinks />
           </div>
           <div className="header__language-select">
             {!isPhone && (
diff --git a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx
deleted file mode 100644
index 87bf1539b..000000000
--- a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavTabs.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Tab, Tabs } from '@mui/material';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import { Color } from 'shared/enums';
-
-import { useCommonTranslation } from 'configs/i18n';
-import { AppRoutes, HeaderTabNav } from 'enums/app';
-
-const getTabForPath = (path: string) => {
-  if (
-    path === AppRoutes.Registration ||
-    matchPath(AppRoutes.ExamSession, path) ||
-    matchPath(AppRoutes.ExamSessionRegistration, path) ||
-    matchPath(AppRoutes.RegistrationPaymentStatus, path)
-  ) {
-    return HeaderTabNav.Registration;
-  } else if (
-    path === AppRoutes.Reassessment ||
-    matchPath(AppRoutes.ReassessmentOrder, path) ||
-    matchPath(AppRoutes.ReassessmentOrderStatus, path)
-  ) {
-    return HeaderTabNav.Reassessment;
-  } else {
-    return false;
-  }
-};
-
-export const PublicNavTabs = (): JSX.Element => {
-  const translateCommon = useCommonTranslation();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  return (
-    <Tabs
-      value={getTabForPath(pathname)}
-      textColor={Color.Secondary}
-      indicatorColor={Color.Secondary}
-    >
-      <Tab
-        data-testid={'public-nav-tab__registration'}
-        value={HeaderTabNav.Registration}
-        label={translateCommon(HeaderTabNav.Registration)}
-        onClick={() => navigate(AppRoutes.Registration)}
-      />
-      <Tab
-        data-testid={'public-nav-tab__reassessment'}
-        value={HeaderTabNav.Reassessment}
-        label={translateCommon(HeaderTabNav.Reassessment)}
-        onClick={() => navigate(AppRoutes.Reassessment)}
-      />
-    </Tabs>
-  );
-};
diff --git a/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx
new file mode 100644
index 000000000..d83288348
--- /dev/null
+++ b/frontend/packages/yki/src/components/layouts/publicHeader/PublicNavigationLinks.tsx
@@ -0,0 +1,49 @@
+import { matchPath, useLocation } from 'react-router-dom';
+import { NavigationLinks } from 'shared/components';
+
+import { useCommonTranslation } from 'configs/i18n';
+import { AppRoutes, HeaderTabNav } from 'enums/app';
+
+const getTabForPath = (path: string) => {
+  if (
+    path === AppRoutes.Registration ||
+    matchPath(AppRoutes.ExamSession, path) ||
+    matchPath(AppRoutes.ExamSessionRegistration, path) ||
+    matchPath(AppRoutes.RegistrationPaymentStatus, path)
+  ) {
+    return HeaderTabNav.Registration;
+  } else if (
+    path === AppRoutes.Reassessment ||
+    matchPath(AppRoutes.ReassessmentOrder, path) ||
+    matchPath(AppRoutes.ReassessmentOrderStatus, path)
+  ) {
+    return HeaderTabNav.Reassessment;
+  } else {
+    return false;
+  }
+};
+
+export const PublicNavigationLinks = () => {
+  const translateCommon = useCommonTranslation();
+  const { pathname } = useLocation();
+
+  return (
+    <NavigationLinks
+      navigationAriaLabel={translateCommon(
+        'header.accessibility.mainNavigation',
+      )}
+      links={[
+        {
+          active: getTabForPath(pathname) === HeaderTabNav.Registration,
+          href: AppRoutes.Registration,
+          label: translateCommon(HeaderTabNav.Registration),
+        },
+        {
+          active: getTabForPath(pathname) === HeaderTabNav.Reassessment,
+          href: AppRoutes.Reassessment,
+          label: translateCommon(HeaderTabNav.Reassessment),
+        },
+      ]}
+    />
+  );
+};