diff --git a/apps/pdc-frontend/package.json b/apps/pdc-frontend/package.json
index b59cf49ce..4bde2c214 100644
--- a/apps/pdc-frontend/package.json
+++ b/apps/pdc-frontend/package.json
@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@frameless/samenwerkende-catalogi": "0.0.0-semantically-released",
+    "@frameless/ui": "0.0.0-semantically-released",
     "@tanstack/react-query": "4.29.12",
     "@utrecht/component-library-css": "1.0.0-alpha.539",
     "@utrecht/component-library-react": "1.0.0-alpha.348",
diff --git a/apps/pdc-frontend/src/app/[locale]/layout.tsx b/apps/pdc-frontend/src/app/[locale]/layout.tsx
index ba80c6560..cea7d9e45 100644
--- a/apps/pdc-frontend/src/app/[locale]/layout.tsx
+++ b/apps/pdc-frontend/src/app/[locale]/layout.tsx
@@ -3,7 +3,7 @@ import { dir } from 'i18next';
 import type { Metadata } from 'next';
 import React from 'react';
 import { QueryClientProvider } from '@/client';
-import { Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
+import { Navigation, Page, PageContent, PageHeader, SkipLink, Surface } from '@/components';
 import { ClientLanguageSwitcher } from '@/components/ClientLanguageSwitcher';
 import '@utrecht/component-library-css';
 import '../../styles/globals.css';
@@ -17,6 +17,32 @@ import 'react-loading-skeleton/dist/skeleton.css';
 import { useTranslation } from '../i18n/index';
 import { languages } from '../i18n/settings';
 
+import '@frameless/ui/dist/bundle.css';
+
+// eslint-disable-next-line no-unused-vars
+const getNavListData = (t: (text: string) => string) => [
+  {
+    title: t('navigation.list.0.title'),
+    link: t('navigation.list.0.link'),
+  },
+  {
+    title: t('navigation.list.1.title'),
+    link: t('navigation.list.1.link'),
+  },
+  {
+    title: t('navigation.list.2.title'),
+    link: t('navigation.list.2.link'),
+  },
+  {
+    title: t('navigation.list.3.title'),
+    link: t('navigation.list.3.link'),
+  },
+  {
+    title: t('navigation.list.4.title'),
+    link: t('navigation.list.4.link'),
+  },
+];
+
 const escapeComment = (data: any) => String(data).replace(/--/g, '-\u200B-');
 
 const HTMLComment = ({ data }: any) => (
@@ -200,35 +226,14 @@ const RootLayout = async ({ children, params: { locale } }: LayoutProps) => {
                   </div>
                 </div>
               </PageHeader>
-              <nav className="utrecht-topnav" id="menu">
-                <ul className="utrecht-topnav__list">
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/wonen-en-leven">
-                      Wonen en leven
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/zorg-en-onderwijs">
-                      Zorg en onderwijs
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/werk-en-inkomen">
-                      Werk en inkomen
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/ondernemen">
-                      Ondernemen
-                    </a>
-                  </li>
-                  <li className="utrecht-topnav__item">
-                    <a className="utrecht-topnav__link" href="https://www.utrecht.nl/bestuur-en-organisatie">
-                      Bestuur en organisatie
-                    </a>
-                  </li>
-                </ul>
-              </nav>
+              <Navigation
+                list={getNavListData(t)}
+                mobileBreakpoint={768}
+                toggleButton={{
+                  openText: 'Menu',
+                  closeText: 'Sluiten',
+                }}
+              />
               <PageContent className="utrecht-page-content--modifier" style={{ position: 'relative' }}>
                 <Main id="main">{children}</Main>
               </PageContent>
diff --git a/apps/pdc-frontend/src/app/i18n/locales/en/layout.json b/apps/pdc-frontend/src/app/i18n/locales/en/layout.json
index 251167e13..a5d96fe6d 100644
--- a/apps/pdc-frontend/src/app/i18n/locales/en/layout.json
+++ b/apps/pdc-frontend/src/app/i18n/locales/en/layout.json
@@ -88,5 +88,29 @@
         "title": "Contact us via WhatsApp"
       }
     ]
+  },
+  "navigation": {
+    "list": [
+      {
+        "title": "Living and Life",
+        "link": "https://www.utrecht.nl/wonen-en-leven"
+      },
+      {
+        "title": "Health and Education",
+        "link": "https://www.utrecht.nl/zorg-en-onderwijs"
+      },
+      {
+        "title": "Work and Income",
+        "link": "https://www.utrecht.nl/werk-en-inkomen"
+      },
+      {
+        "title": "Business",
+        "link": "https://www.utrecht.nl/ondernemen"
+      },
+      {
+        "title": "Government and Organization",
+        "link": "https://www.utrecht.nl/bestuur-en-organisatie"
+      }
+    ]
   }
 }
diff --git a/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json b/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json
index be89f8f02..2a4c20796 100644
--- a/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json
+++ b/apps/pdc-frontend/src/app/i18n/locales/nl/layout.json
@@ -88,5 +88,29 @@
         "title": "Neem contact op via WhatsApp"
       }
     ]
+  },
+  "navigation": {
+    "list": [
+      {
+        "title": "Wonen en leven",
+        "link": "https://www.utrecht.nl/wonen-en-leven"
+      },
+      {
+        "title": "Zorg en onderwijs",
+        "link": "https://www.utrecht.nl/zorg-en-onderwijs"
+      },
+      {
+        "title": "Werk en inkomen",
+        "link": "https://www.utrecht.nl/werk-en-inkomen"
+      },
+      {
+        "title": "Ondernemen",
+        "link": "https://www.utrecht.nl/ondernemen"
+      },
+      {
+        "title": "Bestuur en organisatie",
+        "link": "https://www.utrecht.nl/bestuur-en-organisatie"
+      }
+    ]
   }
 }
diff --git a/apps/pdc-frontend/src/components/index.tsx b/apps/pdc-frontend/src/components/index.tsx
index ca3a98f9b..7e90cedaa 100644
--- a/apps/pdc-frontend/src/components/index.tsx
+++ b/apps/pdc-frontend/src/components/index.tsx
@@ -3,3 +3,4 @@
 export * from '@utrecht/component-library-react/dist/css-module';
 export * from '@utrecht/web-component-library-react';
 export { PageTitle } from './Page-title';
+export * from '@frameless/ui';
diff --git a/apps/pdc-frontend/src/styles/globals.css b/apps/pdc-frontend/src/styles/globals.css
index 4748b3a3f..cff96eff7 100644
--- a/apps/pdc-frontend/src/styles/globals.css
+++ b/apps/pdc-frontend/src/styles/globals.css
@@ -12,6 +12,82 @@ body {
   --utrecht-link-list-marker-background-image: url("https://pki.utrecht.nl/Loket/base/files/getImageAction.do?key=kl_pijltje-wit-SVG");
   --utrecht-list-social-margin-block-start: 24px;
 
+  /* --- navigation tokens start --- */
+
+  /* nav */
+  --utrecht-navigation-border-block-start-width: 0;
+  --utrecht-navigation-border-block-start-color: transparent;
+
+  /* nav-list */
+
+  --utrecht-navigation-list-padding-inline-start: 0;
+  --utrecht-navigation-list-padding-inline-end: 0;
+  --utrecht-navigation-list-padding-block-start: 0;
+  --utrecht-navigation-list-padding-block-end: 0;
+  --utrecht-navigation-list-mobile-padding-inline-start: 16px;
+  --utrecht-navigation-list-mobile-padding-inline-end: 8px;
+  --utrecht-navigation-list-mobile-padding-block-start: 8px;
+  --utrecht-navigation-list-mobile-padding-block-end: 8px;
+  --utrecht-navigation-list-mobile-background-color: var(--utrecht-color-white);
+
+  /* nav-item */
+
+  /* --utrecht-navigation-item-padding-inline-start: 0;
+     --utrecht-navigation-item-padding-inline-end: 0; 
+  */
+
+  /* nav-item-mobile */
+  --utrecht-navigation-item-mobile-padding-block-start: 8px;
+  --utrecht-navigation-item-mobile-padding-block-end: 8px;
+  --utrecht-navigation-item-mobile-padding-inline-start: 4px;
+  --utrecht-navigation-item-mobile-padding-inline-end: 4px;
+  --utrecht-navigation-item-icon-color: var(--utrecht-color-grey-80);
+  --utrecht-navigation-item-icon-margin-inline-end: 8px;
+
+  /* link */
+  --utrecht-navigation-link-padding-block-start: 16px;
+  --utrecht-navigation-link-padding-block-end: 16px;
+  --utrecht-navigation-link-padding-inline-start: 8px;
+  --utrecht-navigation-link-padding-inline-end: 8px;
+  --utrecht-navigation-link-background-color: var(--utrecht-color-grey-15);
+  --utrecht-navigation-link-border-color: var(--utrecht-color-grey-40);
+  --utrecht-navigation-link-border-inline-end-width: 1px;
+  --utrecht-navigation-link-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-justify-content: center;
+  --utrecht-navigation-link-font-weight: var(--utrecht-typography-weight-scale-normal-font-weight);
+
+  /* link-mobile */
+  --utrecht-navigation-link-mobile-text-align: start;
+  --utrecht-navigation-link-mobile-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-mobile-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-justify-content: flex-start;
+  --utrecht-navigation-link-mobile-padding-inline-start: 8px;
+  --utrecht-navigation-link-mobile-padding-inline-end: 0;
+  --utrecht-navigation-link-mobile-padding-block-start: 8px;
+  --utrecht-navigation-link-mobile-padding-block-end: 8px;
+  --utrecht-navigation-link-mobile-hover-background-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-mobile-hover-color: var(--utrecht-color-blue-35);
+  --utrecht-navigation-link-mobile-transition-duration: 0.3s;
+  --utrecht-navigation-link-mobile-transition-timing-function: ease-in-out;
+  --utrecht-navigation-mobile-hover-link-font-weight: var(--utrecht-typography-weight-scale-bold-font-weight);
+
+  /* link-focus */
+  --utrecht-navigation-link-focus-color: var(--utrecht-color-black);
+  --utrecht-navigation-link-focus-declaration-thickness: 1.5px;
+
+  /* link-active */
+  --utrecht-navigation-link-active-color: var(--utrecht-color-white);
+
+  /* link-hover  */
+  --utrecht-navigation-link-hover-color: var(--utrecht-color-white);
+  --utrecht-navigation-link-hover-decoration-thickness: 1.5px;
+  --utrecht-navigation-link-hover-background-color: var(--utrecht-color-black);
+
+  /* active focus */
+  --utrecht-navigation-link-active-focus-color: var(--utrecht-color-black);
+
+  /* --- navigation tokens end --- */
+
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;