diff --git a/packages/css/src/components/header/README.md b/packages/css/src/components/header/README.md
index c0c9a345c1..e6afac8d7e 100644
--- a/packages/css/src/components/header/README.md
+++ b/packages/css/src/components/header/README.md
@@ -18,6 +18,7 @@ Includes the name of the application if it is not the general website.
 - On narrow windows, links can move from the inline menu to the collapsible one.
 - Labels should be short to help the inline menu fit on a single line whenever possible.
 - An icon can be added to the end of a link to make its destination easier to guess.
+- For websites with a brand name that feature the standard Amsterdam logo, only the emblem is shown on narrow screens.
 
 ## References
 
diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
index 9280b9980e..e9d2017252 100644
--- a/packages/css/src/components/header/header.scss
+++ b/packages/css/src/components/header/header.scss
@@ -8,34 +8,46 @@
 
 .ams-header {
   /*
-  * The branding section is created twice: once outside the navigation and once hidden inside it.
-  * This keeps all navigation in one nav element and lets the menu wrap around the branding section.
-  * Display grid is used to let both branding sections overlap.
+  * The logo link section is created twice: once outside the navigation and once hidden inside it.
+  * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
+  * Display grid is used to let both logo link sections overlap.
   */
   display: grid;
+  font-family: var(--ams-header-font-family);
   padding-block: var(--ams-header-padding-block);
   padding-inline: var(--ams-header-padding-inline);
 }
 
-.ams-header__branding {
+.ams-header__logo-link {
   align-items: center;
-  align-self: start; // To align the branding section to the top of the header when it wraps
-  column-gap: var(--ams-header-branding-column-gap);
+  align-self: start; // To align the logo link section to the top of the header when it wraps
+  column-gap: var(--ams-header-logo-link-column-gap);
   display: flex;
-  grid-area: 1 / 1; // To allow this section to overlap with the second branding section
+  grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
+  inline-size: fit-content;
+  outline-offset: var(--ams-header-logo-link-outline-offset);
+  text-decoration: none;
 }
 
-.ams-header__branding--hidden {
+.ams-header__logo-link--hidden {
   opacity: 0%;
-  user-select: none; // The hidden branding section should not be selectable
+  user-select: none; // The hidden logo link section should not be selectable
 }
 
-.ams-header__logo-link {
-  outline-offset: var(--ams-header-logo-link-outline-offset);
+.ams-header__logo-container {
+  flex-shrink: 0;
+  inline-size: 0.75rem;
+  overflow: hidden;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    inline-size: auto;
+  }
 }
 
-/* TODO Remove after updating Heading line heights in DES-973. */
-.ams-heading.ams-header__brand-name {
+.ams-header__brand-name {
+  color: var(--ams-header-brand-name-color);
+  font-size: var(--ams-header-brand-name-font-size);
+  font-weight: var(--ams-header-brand-name-font-weight);
   line-height: 1.35;
 }
 
@@ -43,8 +55,8 @@
   column-gap: var(--ams-header-navigation-column-gap);
   display: flex;
   flex-wrap: wrap;
-  grid-area: 1 / 1; // To allow this section to overlap with the branding section
-  // This section blocks pointer events initially, so the hidden branding section can't be activated.
+  grid-area: 1 / 1; // To allow this section to overlap with the logo link section
+  // This section blocks pointer events initially, so the hidden logo link section can't be activated.
   // The menu and collapsible menu set it back to auto, to make sure they can be activated.
   pointer-events: none;
   row-gap: var(--ams-header-navigation-row-gap);
@@ -83,7 +95,6 @@
 
 @mixin header-menu-action {
   color: var(--ams-header-menu-item-color);
-  font-family: var(--ams-header-menu-item-font-family);
   font-size: var(--ams-header-menu-item-font-size);
   font-weight: var(--ams-header-menu-item-font-weight);
   line-height: var(--ams-header-menu-item-line-height);
@@ -132,6 +143,7 @@
   column-gap: var(--ams-header-menu-item-column-gap);
   cursor: var(--ams-header-mega-menu-button-cursor);
   display: grid;
+  font-family: inherit;
   grid-auto-flow: column;
 
   @include header-menu-action;
diff --git a/packages/react/src/Header/Header.test.tsx b/packages/react/src/Header/Header.test.tsx
index c4f6e99f4d..b0b510b04a 100644
--- a/packages/react/src/Header/Header.test.tsx
+++ b/packages/react/src/Header/Header.test.tsx
@@ -42,14 +42,6 @@ describe('Header', () => {
     expect(ref.current).toBe(component)
   })
 
-  it('renders a brand section', () => {
-    const { container } = render(<Header />)
-
-    const component = container.querySelector('.ams-header__branding')
-
-    expect(component).toBeInTheDocument()
-  })
-
   it('renders a logo link', () => {
     render(<Header />)
 
@@ -85,12 +77,17 @@ describe('Header', () => {
   it('renders an application name', () => {
     render(<Header brandName="Application name" />)
 
-    const heading = screen.getByRole('heading', {
-      level: 1,
-      name: 'Application name',
-    })
+    const brandName = screen.getByText('Application name')
+
+    expect(brandName).toBeInTheDocument()
+  })
+
+  it('renders the correct class for the responsive logo', () => {
+    const { container } = render(<Header brandName="Application name" />)
+
+    const logoContainer = container.querySelector('.ams-header__logo-container')
 
-    expect(heading).toBeInTheDocument()
+    expect(logoContainer).toBeInTheDocument()
   })
 
   it('renders a nav section', () => {
diff --git a/packages/react/src/Header/Header.tsx b/packages/react/src/Header/Header.tsx
index c4a8702976..d4b633d9e1 100644
--- a/packages/react/src/Header/Header.tsx
+++ b/packages/react/src/Header/Header.tsx
@@ -6,7 +6,6 @@
 import clsx from 'clsx'
 import { forwardRef, useEffect, useState } from 'react'
 import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
-import { Heading } from '../Heading'
 import { Icon } from '../Icon'
 import { Logo } from '../Logo'
 import type { LogoBrand } from '../Logo'
@@ -15,6 +14,19 @@ import { HeaderMenuIcon } from './HeaderMenuIcon'
 import { HeaderMenuLink } from './HeaderMenuLink'
 import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint'
 
+const LogoLinkContent = ({ brandName, logoBrand }: { brandName?: string; logoBrand: LogoBrand }) => (
+  <>
+    <span className={clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-header__logo-container')}>
+      <Logo brand={logoBrand} />
+    </span>
+    {brandName && (
+      <span aria-hidden="true" className="ams-header__brand-name">
+        {brandName}
+      </span>
+    )}
+  </>
+)
+
 export type HeaderProps = {
   /** The name of the application. */
   brandName?: string
@@ -64,29 +76,19 @@ const HeaderRoot = forwardRef(
 
     return (
       <header {...restProps} className={clsx('ams-header', className)} ref={ref}>
-        <div className="ams-header__branding">
-          <a className="ams-header__logo-link" href={logoLink}>
-            <span className="ams-visually-hidden">{logoLinkTitle}</span>
-            <Logo brand={logoBrand} />
-          </a>
-          {brandName && (
-            <Heading className="ams-header__brand-name" level={1} size="level-5">
-              {brandName}
-            </Heading>
-          )}
-        </div>
+        <a className="ams-header__logo-link" href={logoLink}>
+          <span className="ams-visually-hidden">{logoLinkTitle}</span>
+          <LogoLinkContent brandName={brandName} logoBrand={logoBrand} />
+        </a>
         {(children || menuItems) && (
           <nav aria-labelledby="primary-navigation" className="ams-header__navigation">
             <h2 className="ams-visually-hidden" id="primary-navigation">
               {navigationLabel}
             </h2>
 
-            {/* The branding section is recreated here, to make sure the page menu breaks at the right spot */}
-            <div aria-hidden className="ams-header__branding ams-header__branding--hidden">
-              <div className="ams-header__logo-link">
-                <Logo brand={logoBrand} />
-              </div>
-              {brandName && <span className="ams-heading ams-heading--5 ams-header__brand-name">{brandName}</span>}
+            {/* The logo link section is recreated here, to make sure the header menu wraps at the right spot */}
+            <div className="ams-header__logo-link ams-header__logo-link--hidden">
+              <LogoLinkContent brandName={brandName} logoBrand={logoBrand} />
             </div>
 
             <ul className="ams-header__menu">
diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
index 47ebb3e437..627937db76 100644
--- a/proprietary/tokens/src/components/ams/header.tokens.json
+++ b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -1,18 +1,21 @@
 {
   "ams": {
     "header": {
+      "font-family": { "value": "{ams.typography.font-family}" },
       "padding-block": { "value": "{ams.space.grid.sm}" },
       "padding-inline": {
         "value": "{ams.grid.padding-inline}",
         "comment": "Must be the Grid inline padding, to make sure Header and Grid line up"
       },
-      "branding": {
-        "column-gap": { "value": "{ams.space.md}" },
-        "row-gap": { "value": "{ams.space.grid.xs}" }
-      },
       "logo-link": {
+        "column-gap": { "value": "{ams.space.md}" },
         "outline-offset": { "value": "{ams.focus.outline-offset}" }
       },
+      "brand-name": {
+        "color": { "value": "{ams.color.text.default}" },
+        "font-size": { "value": "{ams.typography.heading.4.font-size}" },
+        "font-weight": { "value": "{ams.typography.heading.font-weight}" }
+      },
       "mega-menu": {
         "button": {
           "cursor": { "value": "{ams.cursor.interactive}" },