diff --git a/packages/documentation/src/stories/components/header/components/header.markup.ts b/packages/documentation/src/stories/components/header/components/header.markup.ts
new file mode 100644
index 0000000000..85e320bb9a
--- /dev/null
+++ b/packages/documentation/src/stories/components/header/components/header.markup.ts
@@ -0,0 +1,103 @@
+import { html } from 'lit-html';
+
+export default html`
+
+ Homepage
+
+
+
+
+
+
+
+
+ = Menu
+
+
+
+
+ DE
+
+
+ FR
+
+
+ IT
+
+
+ EN
+
+
+
+
+ Application title
+
+
+
+
+
+
+
+
+
+
+ Briefe
+
+
+
+ Briefe
+
+
+
+
+ Briefe senden
+ Briefe Schweiz
+ Kleinwaren Ausland
+ Waren Ausland
+ Express und Kurier
+
+
+
+ Pakete Schweiz
+ Kleinwaren Ausland
+ Waren Ausland
+ Express und Kurier
+
+ Schliessen
+
+
+
+ Pakete
+
+
+
+
+ Pakete senden
+ Pakete Schweiz
+ Kleinwaren Ausland
+ Waren Ausland
+ Express und Kurier
+
+
+
+ Pakete Schweiz
+ Kleinwaren Ausland
+ Waren Ausland
+ Express und Kurier
+
+ Schliessen
+
+
+
+
+`;
diff --git a/packages/documentation/src/stories/components/header/header.docs.mdx b/packages/documentation/src/stories/components/header/header.docs.mdx
new file mode 100644
index 0000000000..3f23445cb5
--- /dev/null
+++ b/packages/documentation/src/stories/components/header/header.docs.mdx
@@ -0,0 +1,21 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as HeaderStories from './header.stories';
+
+
+
+
+ # Header
+
+
+
+
+
+ The header of the Post.
+
+
+
+
+
+
diff --git a/packages/documentation/src/stories/components/header/header.stories.ts b/packages/documentation/src/stories/components/header/header.stories.ts
new file mode 100644
index 0000000000..9b2cc7b912
--- /dev/null
+++ b/packages/documentation/src/stories/components/header/header.stories.ts
@@ -0,0 +1,29 @@
+import type { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '@root/types';
+import HeaderMarkup from './components/header.markup';
+
+const meta: MetaComponent = {
+ id: 'header',
+ title: 'Components/Header',
+ tags: ['package:HTML'],
+ parameters: {
+ layout: 'fullscreen',
+ badges: [],
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=558-7012&t=ywmfJhyvd2euoiGI-1',
+ },
+ },
+ args: {},
+ argTypes: {},
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ render: () => {
+ return HeaderMarkup;
+ },
+};