diff --git a/packages/next-templates/package.json b/packages/next-templates/package.json
index 2718ce87e..76f952bba 100644
--- a/packages/next-templates/package.json
+++ b/packages/next-templates/package.json
@@ -26,6 +26,7 @@
   "devDependencies": {
     "@fontsource/fira-sans": "5.0.12",
     "@fontsource/source-serif-pro": "5.0.8",
+    "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.357",
     "@next/eslint-plugin-next": "13.4.19",
     "@nl-design-system-unstable/voorbeeld-design-tokens": "1.0.0-alpha.98",
     "@svgr/webpack": "8.1.0",
diff --git a/packages/next-templates/src/components/ExampleFooter/footer.css b/packages/next-templates/src/components/ExampleFooter/footer.css
index 0bdaa0c63..f050e2a6d 100644
--- a/packages/next-templates/src/components/ExampleFooter/footer.css
+++ b/packages/next-templates/src/components/ExampleFooter/footer.css
@@ -10,18 +10,7 @@
   column-count: 1;
 }
 
-.example--footer-heading5 {
-  display: flex;
-  justify-content: column;
-}
-
-.utrecht-link-list-focus__item {
-  --utrecht-paragraph-color: white;
-}
-
-.utrecht-link-list__item {
-  --utrecht-paragraph-color: white;
-
+.denhaag-theme .utrecht-link-list__item {
   line-height: 2em;
 }
 
@@ -45,6 +34,15 @@
   margin-inline-start: 2.5em;
 }
 
-.voorbeeld-footer-block {
+.denhaag-theme .voorbeeld-footer-block {
   max-width: 50ch;
+  --utrecht-heading-2-color: var(--denhaag-color-ocher-3);
+}
+
+.denhaag-theme .example--footer-logo {
+  color: var(--denhaag-color-white);
+}
+
+.denhaag-theme .utrecht-page-footer__content {
+  --utrecht-focus-outline-color: var(--denhaag-color-ocher-3);
 }
diff --git a/packages/next-templates/src/components/ExampleHeader/header.css b/packages/next-templates/src/components/ExampleHeader/header.css
index 17981c167..de9bd6fec 100644
--- a/packages/next-templates/src/components/ExampleHeader/header.css
+++ b/packages/next-templates/src/components/ExampleHeader/header.css
@@ -16,6 +16,10 @@
   max-inline-size: var(--example-page-header-content-max-inline-size);
 }
 
+.denhaag-theme .example-page-header__content {
+  max-inline-size: calc(670px * 1.5);
+}
+
 .example--logo {
   text-align: center;
 }
@@ -40,6 +44,11 @@
   margin-inline-end: var(--voorbeeld-space-inline-dog);
   text-decoration-skip-ink: none;
 }
+
+.denhaag-theme .example--header-links {
+  margin-inline-end: 32px;
+}
+
 .example--header-user-icon {
   margin-inline-end: var(--voorbeeld-space-inline-ant);
 }
@@ -55,6 +64,7 @@
   cursor: pointer;
   display: none;
 }
+
 .example--header-burger-menu-button:focus-visible {
   border-radius: 3px;
   box-shadow: 0 0 0 2px var(--voorbeeld-color-white);
diff --git a/packages/next-templates/src/components/ExampleNavigation/Navigation.scss b/packages/next-templates/src/components/ExampleNavigation/Navigation.scss
index 29f4fbf1b..3a57b48a8 100644
--- a/packages/next-templates/src/components/ExampleNavigation/Navigation.scss
+++ b/packages/next-templates/src/components/ExampleNavigation/Navigation.scss
@@ -98,3 +98,33 @@
 .example-nav-bar__item--end {
   justify-self: end;
 }
+
+.denhaag-theme {
+  .utrecht-breadcrumb-nav {
+    background: var(--denhaag-color-warmgrey-1);
+  }
+
+  .example-nav-bar {
+    display: flex;
+    justify-content: center;
+  }
+
+  .example-nav-bar__content {
+    max-inline-size: calc(670px * 1.5);
+  }
+
+  .example-nav-bar__link-list {
+    --utrecht-link-color: var(--denhaag-color-blue-3);
+    --utrecht-link-hover-color: var(--denhaag-color-blue-4);
+    --utrecht-link-focus-color: var(--denhaag-color-blue-4);
+  }
+
+  .example-nav-bar__link {
+    max-inline-size: 30ch;
+    margin-block: 16px;
+    margin-inline: 24px;
+    --utrecht-link-text-decoration: none;
+    --utrecht-link-hover-text-decoration: underline;
+    --utrecht-link-focus-text-decoration: underline;
+  }
+}
diff --git a/packages/next-templates/src/components/NavigationList/Navigationlist.css b/packages/next-templates/src/components/NavigationList/Navigationlist.css
index 9cd11d4dc..a5039b062 100644
--- a/packages/next-templates/src/components/NavigationList/Navigationlist.css
+++ b/packages/next-templates/src/components/NavigationList/Navigationlist.css
@@ -5,11 +5,6 @@
   margin-block-start: 0;
 }
 
-.voorbeeld-navigation-list__item {
+.denhaag-theme .voorbeeld-navigation-list__item {
   line-height: 2em;
 }
-
-.voorbeeld-footer-link {
-  --utrecht-link-text-decoration-color: var(--voorbeeld-color-white);
-  --utrecht-link-hover-color: var(--voorbeeld-color-white);
-}
diff --git a/packages/next-templates/src/components/PageHeader.scss b/packages/next-templates/src/components/PageHeader.scss
index 43a5f4f5e..c17096f62 100644
--- a/packages/next-templates/src/components/PageHeader.scss
+++ b/packages/next-templates/src/components/PageHeader.scss
@@ -15,3 +15,10 @@
   padding-block: var(--voorbeeld-space-block-mouse);
   max-inline-size: var(--example-page-header-content-max-inline-size);
 }
+
+.denhaag-theme {
+  .example-page-header__content {
+    max-inline-size: calc(670px * 1.5);
+    padding-block: 24px;
+  }
+}
diff --git a/packages/next-templates/src/components/VoorbeeldTheme.tsx b/packages/next-templates/src/components/VoorbeeldTheme.tsx
index 252ee0920..19bc64897 100644
--- a/packages/next-templates/src/components/VoorbeeldTheme.tsx
+++ b/packages/next-templates/src/components/VoorbeeldTheme.tsx
@@ -1,9 +1,8 @@
 import { PropsWithChildren } from 'react';
 import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css';
+import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css';
 import '@/app/font';
 import './VoorbeeldTheme.scss';
 import '../app/globals.css';
 
-export const VoorbeeldTheme = ({ children }: PropsWithChildren<{}>) => (
-  <div className="voorbeeld-theme">{children}</div>
-);
+export const VoorbeeldTheme = ({ children }: PropsWithChildren<{}>) => <div className="denhaag-theme">{children}</div>;
diff --git a/packages/next-templates/src/components/wmebv/Footer/ExampleFooterWmebv.tsx b/packages/next-templates/src/components/wmebv/Footer/ExampleFooterWmebv.tsx
index 919a0c66b..55c5fd58f 100644
--- a/packages/next-templates/src/components/wmebv/Footer/ExampleFooterWmebv.tsx
+++ b/packages/next-templates/src/components/wmebv/Footer/ExampleFooterWmebv.tsx
@@ -16,14 +16,13 @@ export const ExampleFooterWmebv = ({ ...props }: ExampleFooterWmebvProps) => (
           <Logo className="example--footer-logo" />
         </div>
         <div className="voorbeeld-footer-block utrecht-link-list__item">
-          <UtrechtHeading2>Contact</UtrechtHeading2>
+          <UtrechtHeading2 className="example-footer__heading-3">Contact</UtrechtHeading2>
           <Address>
             Bel <UtrechtLink href="tel:453453">453 453</UtrechtLink> (maandag tot en met vrijdag van 09.00 tot 17.00
             uur) of stuur een e-mail naar{' '}
             <UtrechtLink href="mailto:vragen@gemeentevoorbeeld.nl">
               <UtrechtUrlData>vragen@gemeentevoorbeeld.nl</UtrechtUrlData>
             </UtrechtLink>
-            {'.'}
           </Address>
         </div>
         <div className="voorbeeld-footer-block">
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ebe1350eb..5b9393bb0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -269,6 +269,9 @@ importers:
       '@fontsource/source-serif-pro':
         specifier: 5.0.8
         version: 5.0.8
+      '@gemeente-denhaag/design-tokens-components':
+        specifier: 0.2.3-alpha.357
+        version: 0.2.3-alpha.357
       '@next/eslint-plugin-next':
         specifier: 13.4.19
         version: 13.4.19
@@ -2003,6 +2006,10 @@ packages:
     resolution: {integrity: sha512-bb8bza+aBp6Wpz1LOXaQ9YSwMc/wNpk3hniENCPoBMMwsn9LQaJU0kKnJSSIi+ld1t7aH4jbh+mHQHN1zLfZ3A==}
     dev: true
 
+  /@gemeente-denhaag/design-tokens-components@0.2.3-alpha.357:
+    resolution: {integrity: sha512-lvdiTc41IVIlDyC90Vfbn67NOMGBIxt9evtpQU+ZKhHhm6sNo/XKhKaLWzJ+l1GwoEXjm2afdHVDvnxs94bcpQ==}
+    dev: true
+
   /@hookform/error-message@2.0.1:
     resolution: {integrity: sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==}
     peerDependencies: