diff --git a/src/components/header/Header.js b/src/components/header/Header.js
index 3b0313a3..94b93006 100644
--- a/src/components/header/Header.js
+++ b/src/components/header/Header.js
@@ -1,12 +1,12 @@
-import { html, LitElement, nothing } from "lit"
-import { unsafeHTML } from "lit/directives/unsafe-html.js"
+import { html, LitElement } from "lit"
 import { styleMap } from "lit/directives/style-map.js"
 
+/** @ts-ignore */
 import headerStyles from "./header.css"
+/** @ts-ignore */
 import gridStyles from "../../styles/grid.css"
+/** @ts-ignore */
 import headingsStyles from "../../styles/headings.css"
-import "../chip/leu-chip-link.js"
-import "../breadcrumb/leu-breadcrumb.js"
 
 // links:
 // top topics chip: https://www.zh.ch/de/gesundheit.html
@@ -34,47 +34,13 @@ export class LeuHeader extends LitElement {
   static styles = [gridStyles, headingsStyles, headerStyles]
 
   static properties = {
-    pageTitle: { type: String },
-    subtitle: { type: String },
-    breadcrumb: { type: Array },
-    topTopics: { type: Array },
-    color: { type: String },
+    backgroundColor: { type: String },
   }
 
   constructor() {
     super()
-    /** @type {Array} */
-    this.breadcrumb = null
-    /** @type {string} */
-    this.subtitle = null
-    /** @type {Array} */
-    this.topTopics = null
-    /** @type {string} */
-    this.color = "white"
-  }
-
-  renderTopTopics() {
-    return html`
-      <div class="toptopics">
-        <h2>Top Themen</h2>
-        <ul>
-          ${this.topTopics.map(
-            (topic) =>
-              html`
-                <li>
-                  <leu-chip-link inverted href=${topic.href}>
-                    ${topic.label}
-                  </leu-chip-link>
-                </li>
-              `
-          )}
-        </ul>
-      </div>
-    `
-  }
-
-  renderLead() {
-    return html` <p class="lead">${this.subtitle}</p> `
+    /** @type {"blue" | "darkblue" | "turquoise" | "green" | "bordeaux" | "magenta" | "violet" | "gray" | "white"} */
+    this.backgroundColor = "white"
   }
 
   renderLogo() {
@@ -82,7 +48,8 @@ export class LeuHeader extends LitElement {
       <a href="https://www.zh.ch/de.html">
         <img
           class="logo"
-          src="src/components/header/KTZH-Logo-Flagge-${this.color === "white"
+          src="src/components/header/KTZH-Logo-Flagge-${this.backgroundColor ===
+          "white"
             ? "Positiv"
             : "Negativ"}.svg"
           alt="Logo des Kantons Zürich"
@@ -94,15 +61,15 @@ export class LeuHeader extends LitElement {
   render() {
     const headerStyle = styleMap({
       background:
-        this.color === "white"
+        this.backgroundColor === "white"
           ? "#fff"
-          : `var(--leu-color-accent-${this.color})`,
-      color: this.color === "white" ? "#000" : "#fff",
+          : `var(--leu-color-accent-${this.backgroundColor})`,
+      color: this.backgroundColor === "white" ? "#000" : "#fff",
     })
 
     // load shared css with link element: https://lamplightdev.com/blog/2021/03/23/how-to-share-styles-in-the-shadow-dom/
     return html`
-      <header style="${headerStyle};">
+      <header class="header" style="${headerStyle};">
         <div class="lyt-wrapper">
           <!-- icon & title -->
           <div class="grid-x grid-margin-x">
@@ -114,14 +81,12 @@ export class LeuHeader extends LitElement {
             <div
               class="cell tiny-10 xsmall-10 small-10 medium-10 large-10 xlarge-10"
             >
-              <div class="breadcrumb">
-                <leu-breadcrumb
-                  .items=${this.breadcrumb}
-                  ?inverted=${this.color !== "white"}
-                >
-                </leu-breadcrumb>
+              <div class="breadcrumbs">
+                <slot name="breadcrumbs"></slot>
               </div>
-              <h1 class="atm-heading title">${unsafeHTML(this.pageTitle)}</h1>
+              <h1 class="title">
+                <slot name="title"></slot>
+              </h1>
             </div>
           </div>
 
@@ -130,8 +95,8 @@ export class LeuHeader extends LitElement {
             <div
               class="cell xsmall-offset-2 small-offset-2 medium-offset-2 large-offset-2 xlarge-offset-2 xsmall-auto small-auto medium-9 large-8 xlarge-8"
             >
-              ${this.topTopics ? this.renderTopTopics() : nothing}
-              ${this.subtitle ? this.renderLead() : nothing}
+              <slot class="chips" name="chips"></slot>
+              <slot name="lead" class="slot"> </slot>
             </div>
           </div>
         </div>
diff --git a/src/components/header/header.css b/src/components/header/header.css
index 919f699f..c5876188 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -1,3 +1,5 @@
+@import url("../../styles/custom-media.css");
+
 :host,
 :host * {
   box-sizing: border-box;
@@ -10,117 +12,127 @@
   font-family: var(--header-font-black);
 }
 
-header {
+.header {
   padding-bottom: 1.5rem;
   padding-top: 1.5rem;
 }
 
-.breadcrumb {
+.breadcrumbs {
   font-size: 16px;
   margin-bottom: 0.75rem;
   min-height: 1.5em;
 }
 
-@media (width <= 340px) {
-  .breadcrumb {
-    margin-left: -24px;
+.title {
+  word-break: break-word;
+  font: var(--leu-t-curve-180-black-font);
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+@media (--viewport-large) {
+  .title {
+    margin-bottom: 2rem;
   }
 }
 
-.title {
-  word-break: break-word;
+@media (--viewport-xlarge) {
+  .title {
+    margin-bottom: 2.5rem;
+  }
 }
 
-/* top topics */
-.toptopics {
+/* Chips */
+.chips {
   max-width: 48rem;
 }
 
-.toptopics h2 {
+::slotted(h2[slot="chips"]) {
   font-size: 0.75rem;
   line-height: 1.5;
   margin-bottom: 0.5rem;
   padding-top: 0;
 }
 
-.toptopics ul {
-  font-size: 0;
-  list-style-type: none;
+::slotted(leu-chip-group) {
   margin-bottom: 0.75rem;
-  margin-left: -4px;
-  margin-right: -4px;
-  max-width: 100%;
-  padding: 0;
+}
+
+@media (--viewport-regular) {
+  ::slotted(leu-chip-group) {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=20em) and (width <=24.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(16.6667% + 0.125rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=25em) and (width <=37.49em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(16.6667% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=37.5em) and (width <=52.49em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(10% + 0.1rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=52.5em) and (width <=63.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(11.1111% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=64em) and (width <=79.99em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(12.5% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=80em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: calc(12.5% + 0.25rem);
   }
 }
 
 @media (width >= 37.5em) {
-  .toptopics ul {
+  .chips ul {
     margin-left: -12px;
     margin-right: -12px;
   }
 }
 
 @media (width >=20em) and (width <=52.49em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-bottom: 0;
   }
 }
 
 @media (width >=52.5em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-bottom: 0.25rem;
   }
 }
 
 @media (width >= 20em) and (width <= 24.99em) and (width >= 20em) and (width <= 24.99em) {
-  .toptopics h2 {
+  .chips h2 {
     margin-left: calc(16.6667% + 0.125rem);
   }
 }
 
-.toptopics li {
+.chips li {
   display: inline-block;
   margin-right: 0.25rem;
   max-width: 100%;
 }
 
-.toptopics leu-chip-link {
+.chips leu-chip-link {
   font-size: 1.125rem;
   margin-bottom: 0;
   margin-top: 0.5rem;
@@ -302,7 +314,7 @@ header {
 }
 
 /* lead */
-.lead {
+::slotted([slot="lead"]) {
   font-size: 18px;
   hyphens: auto;
   line-height: 1.3;
@@ -312,79 +324,79 @@ header {
 }
 
 @media (width >=400px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: calc(1vw + 14px);
   }
 }
 
 @media (width >=600px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: 20px;
   }
 }
 
 @media (width >=1024px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: calc(1.5625vw + 4px);
   }
 }
 
 @media (width >=1280px) {
-  .lead {
+  ::slotted([slot="lead"]) {
     font-size: 24px;
   }
 }
 
 @media (width >=52.5em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     margin-bottom: 1.25rem;
   }
 }
 
 @media (width >=80em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     margin-bottom: 1.5rem;
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=20em) and (width <=24.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(16.6667% + 0.125rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=25em) and (width <=37.49em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(16.6667% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=37.5em) and (width <=52.49em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(10% + 0.1rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=52.5em) and (width <=63.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(11.1111% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=64em) and (width <=79.99em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(12.5% + 0.1667rem);
   }
 }
 
 @media (width >=20em) and (width <=24.99em) and (width >=80em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: calc(12.5% + 0.25rem);
   }
 }
 
 @media (width >=25em) {
-  .lead {
+  ::slotted([slot="lead"]) {
     text-indent: 0;
   }
 }
diff --git a/src/components/header/stories/header.stories.js b/src/components/header/stories/header.stories.js
index c7b3be2e..c4308256 100644
--- a/src/components/header/stories/header.stories.js
+++ b/src/components/header/stories/header.stories.js
@@ -1,21 +1,57 @@
-import { html } from "lit"
-import "../leu-header.js"
+import { html, nothing } from "lit"
+import { unsafeHTML } from "lit/directives/unsafe-html.js"
 import { HEADER_COLORS } from "../Header.js"
+import "../leu-header.js"
+import "../../chip/leu-chip-group.js"
+import "../../chip/leu-chip-link.js"
+import "../../breadcrumb/leu-breadcrumb.js"
 
 export default {
   title: "Header",
   component: "leu-header",
 }
 
-function Template({ pageTitle, color, breadcrumb, subtitle, topTopics }) {
+function renderBreadcrumbs(breadcrumbs, inverted) {
+  if (!breadcrumbs) return nothing
+  return html`
+    <leu-breadcrumb
+      slot="breadcrumbs"
+      ?inverted=${inverted}
+      .items=${breadcrumbs}
+    ></leu-breadcrumb>
+  `
+}
+
+function renderChips(chips, inverted) {
+  if (!chips) return nothing
+  return html` <h2 slot="chips">Top Themen</h2>
+    <leu-chip-group slot="chips">
+      ${chips.map(
+        (topic) => html`
+          <leu-chip-link
+            label=${topic.label}
+            href=${topic.href}
+            color="turquoise"
+            ?inverted=${inverted}
+          ></leu-chip-link>
+        `
+      )}
+    </leu-chip-group>`
+}
+
+function renderLead(lead) {
+  if (!lead) return nothing
+  return html` <p slot="lead" class="lead">${lead}</p> `
+}
+
+function Template({ pageTitle, color, breadcrumbs, lead, chips }) {
+  const inverted = color !== "white"
   return html`
-    <leu-header
-      pageTitle=${pageTitle}
-      subtitle=${subtitle}
-      .color=${color}
-      .breadcrumb=${breadcrumb}
-      .topTopics=${topTopics}
-    />
+    <leu-header backgroundColor=${color}>
+      ${renderBreadcrumbs(breadcrumbs, inverted)}
+      <span slot="title">${unsafeHTML(pageTitle)}</span>
+      ${renderChips(chips, inverted)} ${renderLead(lead)}
+    </leu-header>
   `
 }
 
@@ -26,7 +62,7 @@ Regular.argTypes = {
 Regular.args = {
   pageTitle: "Trinkwasser",
   color: "blue",
-  breadcrumb: [
+  breadcrumbs: [
     { label: "Kanton Zürich", href: "https://www.zh.ch/de.html" },
     { label: "Gesundheit", href: "https://www.zh.ch/de/gesundheit.html" },
     {
@@ -42,25 +78,24 @@ Regular.args = {
       href: "https://www.zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel/trinkwasser.html",
     },
   ],
-  subtitle:
-    "Im Jahr werden im Kanton Zürich rund 140 Millionen Kubikmeter Trinkwasser verbraucht. Dies entspricht in etwa dem Volumen des Greifensees. Das Trinkwasser kommt zu je 40 Prozent aus dem Zürichsee und aus Grundwasservorkommen. Die restlichen 20 Prozent stammen aus Quellen.",
+  lead: "Im Jahr werden im Kanton Zürich rund 140 Millionen Kubikmeter Trinkwasser verbraucht. Dies entspricht in etwa dem Volumen des Greifensees. Das Trinkwasser kommt zu je 40 Prozent aus dem Zürichsee und aus Grundwasservorkommen. Die restlichen 20 Prozent stammen aus Quellen.",
 }
 Regular.parameters = {
   layout: "fullscreen",
 }
 
-export const TopTopics = Template.bind({})
-TopTopics.argTypes = {
+export const Chips = Template.bind({})
+Chips.argTypes = {
   color: { control: "select", options: HEADER_COLORS },
 }
-TopTopics.args = {
+Chips.args = {
   pageTitle: "Familie",
   color: "turquoise",
-  breadcrumb: [
+  breadcrumbs: [
     { label: "Kanton Zürich", href: "https://www.zh.ch/de.html" },
     { label: "Familie", href: "https://www.zh.ch/de/familie.html" },
   ],
-  topTopics: [
+  chips: [
     {
       label: "Kinder- und Jugendhilfezentren",
       href: "https://www.zh.ch/de/familie/angebote-fuer-familien-mit-kindern/kinder-und-jugendhilfezentren.html",
@@ -75,10 +110,9 @@ TopTopics.args = {
     },
     { label: "Adoption", href: "https://www.zh.ch/de/familie/adoption.html" },
   ],
-  subtitle:
-    "Haben Sie Fragen zum Familienalltag oder suchen Sie Unterstützung bei familiären Herausforderungen? Möchten Sie mehr über die Geschichte Ihrer Familie erfahren? Oder steht ein wichtiges Ereignis bevor und Sie suchen Informationen, um Administratives zu erledigen? Hier finden Sie alles, was Familien im Kanton Zürich bewegt und was sie benötigen.",
+  lead: "Haben Sie Fragen zum Familienalltag oder suchen Sie Unterstützung bei familiären Herausforderungen? Möchten Sie mehr über die Geschichte Ihrer Familie erfahren? Oder steht ein wichtiges Ereignis bevor und Sie suchen Informationen, um Administratives zu erledigen? Hier finden Sie alles, was Familien im Kanton Zürich bewegt und was sie benötigen.",
 }
-TopTopics.parameters = {
+Chips.parameters = {
   layout: "fullscreen",
 }
 
@@ -94,7 +128,7 @@ White.args = {
     </div>
   `,
   color: "white",
-  breadcrumb: [
+  breadcrumbs: [
     { label: "Kanton Zürich", href: "https://www.zh.ch/de.html" },
     {
       label: "Politik & Staat ",
@@ -117,7 +151,7 @@ White.args = {
       href: "https://app.statistik.zh.ch/wahlen_abstimmungen/prod/Archive/Det/1_1_20231119/250107/Majorz/Resultate/Candidate/1/Tiana_Angelina%20Moser",
     },
   ],
-  subtitle: "Ständeratswahl 2023 - 2. Wahlgang",
+  lead: "Ständeratswahl 2023 - 2. Wahlgang",
 }
 White.parameters = {
   layout: "fullscreen",