diff --git a/packages/web-react/src/components/Accordion/Accordion.stories.ts b/packages/web-react/src/components/Accordion/Accordion.stories.ts
deleted file mode 100644
index 420cadf1d9..0000000000
--- a/packages/web-react/src/components/Accordion/Accordion.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Accordion from './Accordion';
-
-export default {
-  title: 'Components/Accordion',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-  [Spirit Accordion](https://spirit.supernova-docs.io/spirit/latest/components/accordion/overview.html)
-
-  Toggle the visibility of content across your project with Accordion.
-  `,
-      },
-    },
-  },
-} as ComponentMeta<typeof Accordion>;
-
-export { default as Accordion } from './demo/Accordion';
-export { default as AccordionUncontrolled } from './demo/AccordionUncontrolled';
diff --git a/packages/web-react/src/components/Accordion/Accordion.stories.tsx b/packages/web-react/src/components/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000000..8581ac4afb
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/Accordion.stories.tsx
@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionOpenStateType, AccordionProps } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'section' },
+      },
+    },
+    open: {
+      control: 'text',
+    },
+    toggle: {
+      control: 'text',
+    },
+  },
+  args: {
+    elementType: 'section',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+const AccordionWithHooks = (args: AccordionProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion {...args} open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const Playground: Story = {
+  name: 'Accordion',
+  render: (args) => <AccordionWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Accordion/AccordionContent.stories.tsx b/packages/web-react/src/components/Accordion/AccordionContent.stories.tsx
new file mode 100644
index 0000000000..82c9842aa9
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/AccordionContent.stories.tsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionContentProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionContent> = {
+  title: 'Components/Accordion',
+  component: AccordionContent,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'Accordion Content',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionContent>;
+
+const AccordionWithHooks = (args: AccordionContentProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample0');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent {...args} />
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionContentPlayground: Story = {
+  name: 'AccordionContent',
+  render: (args) => <AccordionWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx b/packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx
new file mode 100644
index 0000000000..b102f3b2be
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/AccordionHeader.stories.tsx
@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionHeaderProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionHeader> = {
+  title: 'Components/Accordion',
+  component: AccordionHeader,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'h3' },
+      },
+    },
+    slot: {
+      control: 'select',
+      options: ['pill', 'link & pill', undefined],
+      description:
+        'This is the place for the content of the slot. In the real code you can pass in any ' +
+        'children you want. In this demo we have predefined options: `pill` and `link & pill`. ' +
+        'Please note the predefined options in this demo are not customizable.',
+      mapping: {
+        pill: <Pill>3</Pill>,
+        'link & pill': (
+          <>
+            <Link href="/">Link</Link>
+            <Pill>3</Pill>
+          </>
+        ),
+      },
+    },
+  },
+  args: {
+    children: 'Accordion Header #0',
+    elementType: 'h3',
+    slot: undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionHeader>;
+
+const AccordionWithHooks = (args: AccordionHeaderProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader {...args} />
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionHeaderPlayground: Story = {
+  name: 'AccordionHeader',
+  render: (args) => <AccordionWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Accordion/AccordionItem.stories.tsx b/packages/web-react/src/components/Accordion/AccordionItem.stories.tsx
new file mode 100644
index 0000000000..c05ef28c62
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/AccordionItem.stories.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AccordionItemProps, AccordionOpenStateType } from '../../types';
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import toggleValueByType from './demo/toggleValueByType';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem } from '.';
+
+const meta: Meta<typeof AccordionItem> = {
+  title: 'Components/Accordion',
+  component: AccordionItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'article' },
+      },
+    },
+    id: {
+      control: 'text',
+    },
+  },
+  args: {
+    elementType: 'article',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AccordionItem>;
+
+const AccordionWithHooks = (args: AccordionItemProps) => {
+  const [openState, setOpenState] = useState<AccordionOpenStateType>('AccordionItemExample1');
+
+  const toggle = (id: string) => {
+    setOpenState(toggleValueByType(id, openState));
+  };
+
+  return (
+    <Accordion open={openState} toggle={toggle}>
+      <AccordionItem {...args} id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+};
+
+export const AccordionItemPlayground: Story = {
+  name: 'AccordionItem',
+  render: (args) => <AccordionWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx b/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx
new file mode 100644
index 0000000000..c46448c095
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/UncontrolledAccordion.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Link } from '../Link';
+import { Pill } from '../Pill';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Accordion, AccordionHeader, AccordionContent, AccordionItem, UncontrolledAccordion } from '.';
+
+const meta: Meta<typeof UncontrolledAccordion> = {
+  title: 'Components/Accordion',
+  component: UncontrolledAccordion,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    defaultOpen: {
+      control: 'array',
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'section' },
+      },
+    },
+    stayOpen: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    defaultOpen: ['AccordionItemExample1'],
+    elementType: 'section',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const UncontrolledAccordionPlayground: Story = {
+  name: 'UncontrolledAccordion',
+  render: (args) => (
+    <UncontrolledAccordion {...args} id="AccordionExample">
+      <AccordionItem id="AccordionItemExample0">
+        <AccordionHeader
+          slot={
+            <>
+              <Link href="/">Link</Link>
+              <Pill>3</Pill>
+            </>
+          }
+        >
+          Accordion Header #0
+        </AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample1">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #1</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample2">
+        <AccordionHeader>Accordion Header #2</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+      <AccordionItem id="AccordionItemExample3">
+        <AccordionHeader slot={<Pill>3</Pill>}>Accordion Header #3</AccordionHeader>
+        <AccordionContent>{content}</AccordionContent>
+      </AccordionItem>
+    </UncontrolledAccordion>
+  ),
+};
diff --git a/packages/web-react/src/components/Accordion/stories/content.tsx b/packages/web-react/src/components/Accordion/stories/content.tsx
new file mode 100644
index 0000000000..cf46aad11b
--- /dev/null
+++ b/packages/web-react/src/components/Accordion/stories/content.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default (
+  <p>
+    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
+    leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
+    aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
+    ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
+    posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
+    Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
+    efficitur.
+    <br />
+    Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
+    nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
+    porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
+    vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
+    arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
+    urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
+  </p>
+);
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts
deleted file mode 100644
index c8b7c739e0..0000000000
--- a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Breadcrumbs from './Breadcrumbs';
-
-export default {
-  title: 'Components/Breadcrumbs',
-  component: Breadcrumbs,
-  parameters: {
-    docs: {
-      description: {
-        component: "Breadcrumbs present a trail to each previous page in relation to website's structure.",
-      },
-    },
-  },
-  argTypes,
-} as ComponentMeta<typeof Breadcrumbs>;
-
-export { default as Breadcrumbs } from './demo/BreadcrumbsDefault';
diff --git a/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
new file mode 100644
index 0000000000..2826c3f12d
--- /dev/null
+++ b/packages/web-react/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Breadcrumbs } from './Breadcrumbs';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'nav' },
+      },
+    },
+    goBackTitle: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Back' },
+      },
+    },
+  },
+  args: {
+    elementType: 'nav',
+    goBackTitle: 'Back',
+    items: [
+      {
+        title: 'Root',
+        url: '#rootUrl',
+      },
+      {
+        title: 'Category',
+        url: '#categoryUrl',
+      },
+      {
+        title: 'Subcategory',
+        url: '#subcategoryUrl',
+      },
+      {
+        title: 'Current page',
+        url: '#currentUrl',
+      },
+    ],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Playground: Story = {
+  name: 'Breadcrumbs',
+};
diff --git a/packages/web-react/src/components/Collapse/Collapse.stories.ts b/packages/web-react/src/components/Collapse/Collapse.stories.ts
deleted file mode 100644
index 89d78c85e5..0000000000
--- a/packages/web-react/src/components/Collapse/Collapse.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Collapse from './Collapse';
-
-export default {
-  title: 'Components/Collapse',
-  parameters: {
-    docs: {
-      description: {
-        component: `
-  [Spirit Collapse](https://spirit.supernova-docs.io/spirit/latest/components/collapse/overview.html)
-
-  Toggle the visibility of content across your project with Collapse.
-  `,
-      },
-    },
-  },
-} as ComponentMeta<typeof Collapse>;
-
-export { default as Collapse } from './demo/Collapse';
-export { default as CollapseUncontrolled } from './demo/CollapseUncontrolled';
diff --git a/packages/web-react/src/components/Collapse/Collapse.stories.tsx b/packages/web-react/src/components/Collapse/Collapse.stories.tsx
new file mode 100644
index 0000000000..c549a33cfc
--- /dev/null
+++ b/packages/web-react/src/components/Collapse/Collapse.stories.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SpiritCollapseProps } from '../../types';
+import { Button } from '../Button';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { Collapse, useCollapse } from '.';
+
+const meta: Meta<typeof Collapse> = {
+  title: 'Components/Collapse',
+  component: Collapse,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    collapsibleToBreakpoint: {
+      control: 'select',
+      options: ['mobile', 'tablet', 'desktop', undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'div' },
+      },
+    },
+    id: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+    },
+    transitionDuration: {
+      control: 'number',
+      table: {
+        defaultValue: { summary: 250 },
+      },
+    },
+  },
+  args: {
+    elementType: 'div',
+    id: 'collapseExample',
+    isOpen: false,
+    transitionDuration: 250,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapse>;
+
+const CollapseWithHooks = (args: SpiritCollapseProps) => {
+  const { isOpen, toggleHandler } = useCollapse(true);
+
+  return (
+    <div>
+      <Button onClick={toggleHandler}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
+      <Collapse {...args} isOpen={isOpen}>
+        {content}
+      </Collapse>
+    </div>
+  );
+};
+
+export const Playground: Story = {
+  name: 'Collapse',
+  render: (args) => <CollapseWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx b/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx
new file mode 100644
index 0000000000..f36d5f662b
--- /dev/null
+++ b/packages/web-react/src/components/Collapse/UncontrolledCollapse.stories.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button';
+import content from './stories/content';
+import ReadMe from './README.md';
+import { UncontrolledCollapse } from '.';
+
+const meta: Meta<typeof UncontrolledCollapse> = {
+  title: 'Components/Collapse',
+  component: UncontrolledCollapse,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    collapsibleToBreakpoint: {
+      control: 'select',
+      options: ['mobile', 'tablet', 'desktop', undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'div' },
+      },
+    },
+    hideOnCollapse: {
+      control: 'boolean',
+    },
+    id: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+    },
+    transitionDuration: {
+      control: 'number',
+      table: {
+        defaultValue: { summary: 250 },
+      },
+    },
+  },
+  args: {
+    elementType: 'div',
+    id: 'collapseExample',
+    isOpen: false,
+    transitionDuration: 250,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UncontrolledCollapse>;
+
+export const UncontrolledCollapsePlayground: Story = {
+  name: 'UncontrolledCollapse',
+  render: (args) => (
+    <UncontrolledCollapse
+      {...args}
+      renderTrigger={({ isOpen, ...restProps }) => (
+        <Button {...restProps}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
+      )}
+    >
+      {content}
+    </UncontrolledCollapse>
+  ),
+};
diff --git a/packages/web-react/src/components/Collapse/stories/content.tsx b/packages/web-react/src/components/Collapse/stories/content.tsx
new file mode 100644
index 0000000000..5830486a36
--- /dev/null
+++ b/packages/web-react/src/components/Collapse/stories/content.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default (
+  <>
+    <p>
+      Condimentum odio, pulvinar et sollicitudin accumsan ac hendrerit vestibulum commodo, molestie laoreet dui sit
+      amet. Molestie consectetur, sed ac felis scelerisque lectus accumsan purus id dolor sed vitae, praesent aliquam
+      dolor quis ornare. Nulla sit amet, rhoncus at quis odio et iaculis lacinia suscipit vivamus sodales, nunc id
+      condimentum felis. Consectetur nec commodo, praesent et elit magna purus molestie cursus molestie, libero ut
+      venenatis erat id et nisi. Quam posuere, aliquam quam leo vitae tellus semper eget nunc, ultricies adipiscing sit
+      amet accumsan. Lorem rutrum, porttitor ante mauris suspendisse ultricies consequat purus, congue a commodo magna
+      et.
+    </p>
+    <p>
+      Nunc potenti, mauris sollicitudin purus augue justo et condimentum, vivamus a ornare consequat. Aliquet ut, metus
+      libero vitae volutpat felis a iaculis sapien dolor quis, augue fermentum donec urna. Sem facilisis, finibus non
+      mauris suspendisse varius et nisi egestas potenti, praesent interdum nulla sem. Sodales dui, quam sagittis sapien
+      elit lorem fringilla hendrerit nunc, porttitor quis dolor ut sit amet. Scelerisque aliquet, maximus integer cursus
+      fusce vitae proin lacinia sed vitae, bibendum suspendisse nunc ut enim et at. Sem turpis, iaculis a eget non
+      mauris nulla vitae augue, molestie porttitor luctus bibendum.
+    </p>
+  </>
+);
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.stories.ts b/packages/web-react/src/components/Dropdown/Dropdown.stories.ts
deleted file mode 100644
index cdeaaad95b..0000000000
--- a/packages/web-react/src/components/Dropdown/Dropdown.stories.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Dropdown from './Dropdown';
-
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  argTypes,
-} as ComponentMeta<typeof Dropdown>;
-
-export { default as Dropdown } from './demo/Dropdown';
diff --git a/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx b/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx
new file mode 100644
index 0000000000..216c3738b8
--- /dev/null
+++ b/packages/web-react/src/components/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,87 @@
+import React, { Ref } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropdownFullWidthModes, DropdownPlacements } from '../../types';
+import { Button, Icon, Text } from '..';
+import { Dropdown } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    enableAutoClose: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    fullWidthMode: {
+      control: 'select',
+      options: [...Object.values(DropdownFullWidthModes), undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    id: {
+      control: 'text',
+    },
+    placement: {
+      control: 'select',
+      options: [...Object.values(DropdownPlacements), undefined],
+      table: {
+        defaultValue: { summary: DropdownPlacements.BOTTOM_LEFT },
+      },
+    },
+  },
+  args: {
+    children: (
+      <>
+        <a href="#info" className="d-flex mb-400">
+          <Icon name="info" />
+          <Text UNSAFE_className="ml-300">Information</Text>
+        </a>
+        <a href="#link" className="d-flex mb-400">
+          <Icon name="link" />
+          <Text UNSAFE_className="ml-300">More links</Text>
+        </a>
+        <a href="#profile" className="d-flex mb-400">
+          <Icon name="profile" />
+          <Text UNSAFE_className="ml-300">Profile</Text>
+        </a>
+        <a href="#help" className="d-flex">
+          <Icon name="help" />
+          <Text UNSAFE_className="ml-300">Help</Text>
+        </a>
+      </>
+    ),
+    id: 'DropdownExample',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+
+export const Playground: Story = {
+  name: 'Dropdown',
+  render: (args) => (
+    <Dropdown
+      {...args}
+      renderTrigger={({ isOpen, trigger: { className, ref, ...restOf } }) => (
+        <Button UNSAFE_className={className} ref={ref as Ref<HTMLButtonElement>} {...restOf}>
+          Trigger ({isOpen ? 'open' : 'closed'})
+        </Button>
+      )}
+    />
+  ),
+};
diff --git a/packages/web-react/src/components/Dropdown/demo/argTypes.ts b/packages/web-react/src/components/Dropdown/demo/argTypes.ts
deleted file mode 100644
index 74a36de5a9..0000000000
--- a/packages/web-react/src/components/Dropdown/demo/argTypes.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export default {
-  fullWidthMode: {
-    control: {
-      type: 'boolean',
-    },
-    defaultValue: false,
-  },
-  enableAutoClose: {
-    control: {
-      type: 'boolean',
-    },
-    defaultValue: false,
-  },
-  placement: {
-    control: {
-      type: 'select',
-      options: ['bottom-left', 'bottom-right', 'top-left', 'top-right'],
-    },
-    defaultValue: 'bottom-left',
-  },
-};
diff --git a/packages/web-react/src/components/Header/Header.stories.ts b/packages/web-react/src/components/Header/Header.stories.ts
deleted file mode 100644
index 7bdafd8fcd..0000000000
--- a/packages/web-react/src/components/Header/Header.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Header from './Header';
-
-export default {
-  title: 'Components/Header',
-  component: Header,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Provide page header.',
-      },
-    },
-  },
-  args: {
-    color: 'inverted',
-  },
-  argTypes,
-} as ComponentMeta<typeof Header>;
-
-export { default as Header } from './demo/Header';
diff --git a/packages/web-react/src/components/Header/Header.stories.tsx b/packages/web-react/src/components/Header/Header.stories.tsx
new file mode 100644
index 0000000000..7551b8c2ed
--- /dev/null
+++ b/packages/web-react/src/components/Header/Header.stories.tsx
@@ -0,0 +1,191 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof Header> = {
+  title: 'Components/Header',
+  component: Header,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'radio',
+      options: ['transparent', 'inverted'],
+      table: {
+        defaultValue: { summary: 'transparent' },
+      },
+    },
+    isSimple: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    color: 'inverted',
+    isSimple: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+const HeaderWithHooks = (args: HeaderProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header {...args}>
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const Playground: Story = {
+  name: 'Header',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx b/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx
new file mode 100644
index 0000000000..86b918c15e
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDesktopActions.stories.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDesktopActionsProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDesktopActions> = {
+  title: 'Components/Header',
+  component: HeaderDesktopActions,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    color: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+  },
+  args: {
+    color: 'primary',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDesktopActions>;
+
+const HeaderWithHooks = (args: HeaderDesktopActionsProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions {...args}>
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDesktopActionsPlayground: Story = {
+  name: 'HeaderDesktopActions',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialog.stories.tsx b/packages/web-react/src/components/Header/HeaderDialog.stories.tsx
new file mode 100644
index 0000000000..03a84ed19e
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialog.stories.tsx
@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialog> = {
+  title: 'Components/Header',
+  component: HeaderDialog,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    id: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    onClose: {
+      control: 'function',
+    },
+  },
+  args: {
+    id: 'header_dialog_example_1',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialog>;
+
+const HeaderWithHooks = (args: HeaderDialogProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog
+        {...args}
+        id="header_dialog_example_1"
+        aria-label="Menu"
+        isOpen={isMenuOpen}
+        onClose={handleMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogPlayground: Story = {
+  name: 'HeaderDialog',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx
new file mode 100644
index 0000000000..321c9cb08f
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogActions.stories.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogActionsProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogActions> = {
+  title: 'Components/Header',
+  component: HeaderDialogActions,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    color: {
+      control: 'radio',
+      options: ['primary', 'secondary'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+  },
+  args: {
+    color: 'primary',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogActions>;
+
+const HeaderWithHooks = (args: HeaderDialogActionsProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions {...args} aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogActionsPlayground: Story = {
+  name: 'HeaderDialogActions',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx
new file mode 100644
index 0000000000..f26426d079
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogButton.stories.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogButtonProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogButton> = {
+  title: 'Components/Header',
+  component: HeaderDialogButton,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogButton>;
+
+const HeaderWithHooks = (args: HeaderDialogButtonProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                {...args}
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogButtonPlayground: Story = {
+  name: 'HeaderDialogButton',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx
new file mode 100644
index 0000000000..7d7e75b8b5
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogCloseButton.stories.tsx
@@ -0,0 +1,183 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogCloseButtonProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogCloseButton> = {
+  title: 'Components/Header',
+  component: HeaderDialogCloseButton,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Close' },
+      },
+    },
+  },
+  args: {
+    label: 'Close',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogCloseButton>;
+
+const HeaderWithHooks = (args: HeaderDialogCloseButtonProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton {...args} />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogCloseButtonPlayground: Story = {
+  name: 'HeaderDialogCloseButton',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx
new file mode 100644
index 0000000000..47a49fa9ae
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogLink.stories.tsx
@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogLinkProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogLink> = {
+  title: 'Components/Header',
+  component: HeaderDialogLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    isCurrent: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    children: 'Job offers',
+    isCurrent: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogLink>;
+
+const HeaderWithHooks = (args: HeaderDialogLinkProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink {...args} />
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogLinkPlayground: Story = {
+  name: 'HeaderDialogLink',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx
new file mode 100644
index 0000000000..d003462555
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogNav.stories.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogNavProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogNav> = {
+  title: 'Components/Header',
+  component: HeaderDialogNav,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogNav>;
+
+const HeaderWithHooks = (args: HeaderDialogNavProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav {...args}>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogNavPlayground: Story = {
+  name: 'HeaderDialogNav',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx
new file mode 100644
index 0000000000..69bea9e750
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogNavItem.stories.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogNavItemProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogNavItem> = {
+  title: 'Components/Header',
+  component: HeaderDialogNavItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogNavItem>;
+
+const HeaderWithHooks = (args: HeaderDialogNavItemProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem {...args}>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogNavItemPlayground: Story = {
+  name: 'HeaderDialogNavItem',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx b/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx
new file mode 100644
index 0000000000..4fe7dbf5f3
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderDialogText.stories.tsx
@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderDialogTextProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderDialogText> = {
+  title: 'Components/Header',
+  component: HeaderDialogText,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'Marian',
+    UNSAFE_className: 'text-primary-inverted-disabled',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderDialogText>;
+
+const HeaderWithHooks = (args: HeaderDialogTextProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText {...args} />
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderDialogTextPlayground: Story = {
+  name: 'HeaderDialogText',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderLink.stories.tsx b/packages/web-react/src/components/Header/HeaderLink.stories.tsx
new file mode 100644
index 0000000000..7aedf8b664
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderLink.stories.tsx
@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderLinkProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderLink> = {
+  title: 'Components/Header',
+  component: HeaderLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    isCurrent: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    children: 'Job offers',
+    isCurrent: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderLink>;
+
+const HeaderWithHooks = (args: HeaderLinkProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink {...args} />
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderLinkPlayground: Story = {
+  name: 'HeaderLink',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx b/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx
new file mode 100644
index 0000000000..3d822f8c5b
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderMobileActions.stories.tsx
@@ -0,0 +1,199 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderMobileActionsProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderMobileActions> = {
+  title: 'Components/Header',
+  component: HeaderMobileActions,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    dialogId: {
+      control: 'text',
+    },
+    isOpen: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    menuToggleLabel: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Menu' },
+      },
+    },
+    onOpen: {
+      control: 'function',
+    },
+  },
+  args: {
+    dialogId: 'header_dialog_example_1',
+    menuToggleLabel: 'Menu',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderMobileActions>;
+
+const HeaderWithHooks = (args: HeaderMobileActionsProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions {...args} isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderMobileActionsPlayground: Story = {
+  name: 'HeaderMobileActions',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderNav.stories.tsx b/packages/web-react/src/components/Header/HeaderNav.stories.tsx
new file mode 100644
index 0000000000..2aa9e1ab0b
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderNav.stories.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderNavProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderNav> = {
+  title: 'Components/Header',
+  component: HeaderNav,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderNav>;
+
+const HeaderWithHooks = (args: HeaderNavProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav {...args}>
+            <HeaderNavItem>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderNavPlayground: Story = {
+  name: 'HeaderNav',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx b/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx
new file mode 100644
index 0000000000..4afe351dbd
--- /dev/null
+++ b/packages/web-react/src/components/Header/HeaderNavItem.stories.tsx
@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { HeaderNavItemProps } from '../../types';
+import { Link } from '../Link';
+import ReadMe from './README.md';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '.';
+
+const meta: Meta<typeof HeaderNavItem> = {
+  title: 'Components/Header',
+  component: HeaderNavItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeaderNavItem>;
+
+const HeaderWithHooks = (args: HeaderNavItemProps) => {
+  const [isMenuOpen, setMenuOpen] = useState(true);
+  const [isUserMenuOpen, setUserMenuOpen] = useState(false);
+
+  const handleMenuOpen = () => setMenuOpen(true);
+  const handleMenuClose = () => setMenuOpen(false);
+  const handleUserMenuOpen = () => setUserMenuOpen(true);
+  const handleUserMenuClose = () => setUserMenuOpen(false);
+
+  return (
+    <>
+      <Header color="inverted">
+        <Link href="/">
+          <img
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA2NSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMzQ4MTIgMTEuOTA2OEw0LjI2MzY3IDYuNTk5MzlDNC4zNjA2OCA2LjA4NDg2IDQuNTM1IDUuNjE1NDMgNC43ODc1IDUuMTkxOTZMNC43ODc4OCA1LjE5MTMyTDQuNzg4MjggNS4xOTA2OEM1LjIxMzM3IDQuNTAyMzUgNS44MDY4MiAzLjk2MTE1IDYuNTY2MDEgMy41NjcxN0M3LjMyNTQ3IDMuMTU4NzMgOC4xOTk0NCAyLjkzMzk1IDkuMTg1NjcgMi44OTA0N0w5LjE4NzgxIDIuODkwMzhIOS4xODk5NEMxMC40NzEyIDIuODkwMzggMTEuNTE1NiAzLjA0MTIyIDEyLjMxODYgMy4zNDc1MUMxMy4xMjY2IDMuNjUwMjggMTMuODQ5NSA0LjAxMTIxIDE0LjQ4NjUgNC40MzA3MkwxNC41NTggNC40Nzc3OUwxMy4yOTMzIDcuMDI3ODlMMTMuMjA0OSA2Ljk3OTQ5QzEyLjYwNzkgNi42NTI4NyAxMS45OTcgNi4zODMxOSAxMS4zNzIxIDYuMTcwMzRMMTEuMzcxNCA2LjE3MDEyQzEwLjc2MzcgNS45NTgzIDEwLjE5NDMgNS44NTM0NiA5LjY2MjcgNS44NTM0NkM5LjAwMTE5IDUuODUzNDYgOC40OTMxMyA1Ljk4NzIxIDguMTI4MjIgNi4yNDM3N0M3Ljc3MTM2IDYuNDk0NjggNy41ODkxMSA2Ljg3MDU3IDcuNTg5MTEgNy4zODg0OEM3LjU4OTExIDcuNzMyMTYgNy43MjAxNCA4LjA0NDc4IDcuOTkwNTcgOC4zMjkxOEM4LjI4MjY3IDguNjA2NzMgOC42NTMxNCA4Ljg1ODU3IDkuMTAzNzcgOS4wODM3NEM5LjU3MzUzIDkuMzExMjggMTAuMDU3NiA5LjUxNzUzIDEwLjU1NiA5LjcwMjQ4TDEwLjU1NjIgOS43MDI1OEMxMS4wMTg2IDkuODc1ODEgMTEuNDczNSAxMC4wODUgMTEuOTIxIDEwLjMzMDFDMTIuMzg3NyAxMC41NjM0IDEyLjgwMzcgMTAuODYyNCAxMy4xNjg3IDExLjIyN0MxMy41Mzc2IDExLjU4MSAxMy44MzA5IDEyLjAyOTIgMTQuMDUgMTIuNTY5QzE0LjI3MTEgMTMuMDk5NCAxNC4zNzk2IDEzLjc0OTcgMTQuMzc5NiAxNC41MTY2QzE0LjM3OTYgMTUuMzM1OCAxNC4xNjcxIDE2LjA5NzQgMTMuNzQyNSAxNi43OTk1QzEzLjMxNjkgMTcuNTAzMyAxMi42OTQzIDE4LjA3MjkgMTEuODc4OCAxOC41MDk0TDExLjg3NzYgMTguNTFDMTEuNzAyNCAxOC42MDA3IDExLjUxODcgMTguNjgxNSAxMS4zMjY2IDE4Ljc1MjZMOS43NDY3NyAxNi4wMzQyQzEwLjA4NzggMTUuOTIyOSAxMC4zNjQ4IDE1Ljc1MjIgMTAuNTgwOCAxNS41MjM3TDEwLjU4MTggMTUuNTIyN0wxMC41ODI3IDE1LjUyMTdDMTAuODE4MSAxNS4yODY2IDEwLjk0MTIgMTQuOTU1OSAxMC45NDEyIDE0LjUxNjZDMTAuOTQxMiAxNC4yMjU4IDEwLjg0MjcgMTMuOTYxMiAxMC42NDEzIDEzLjcxOTdMMTAuNjQwMyAxMy43MTg0TDEwLjYzOTIgMTMuNzE3MUMxMC40NDc3IDEzLjQ3MTEgMTAuMTc4NCAxMy4yNDI0IDkuODI3NzggMTMuMDMyMkw5LjgyNzAzIDEzLjAzMTdMOS44MjYyOCAxMy4wMzEzQzkuNDg4MzEgMTIuODIwMiA5LjExNDQzIDEyLjYzNjkgOC43MDQzNCAxMi40ODE1TDguNzA0MSAxMi40ODE0QzguMjYzNTIgMTIuMzEzMSA3LjgxMTUyIDEyLjEyMTUgNy4zNDgxMiAxMS45MDY4WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC4wOTk1IDEzLjQ4ODRMMjQuMTAwMyAxMy40ODhDMjQuODI4IDEzLjE1MzYgMjUuNDA2OCAxMi43MTU1IDI1LjgzMzIgMTIuMTcyMkMyNi4yNzA2IDExLjYzMzEgMjYuNTg0NSAxMS4wMzUxIDI2Ljc3NDQgMTAuMzc4OEMyNi45Nzc0IDkuNzEyMTUgMjcuMDc5MiA5LjA1MTYzIDI3LjA3OTIgOC4zOTc1OEMyNy4wNzkyIDcuMjk1NyAyNi44Mzk3IDYuMzQwNDMgMjYuMzU2NSA1LjUzNTY4QzI1Ljg3MzMgNC43MTY1MyAyNS4xNzA3IDQuMDg4NSAyNC4yNTI1IDMuNjUxNDlDMjMuMzMzNCAzLjE5OTc4IDIyLjIxNSAyLjk3NjI2IDIwLjkwMSAyLjk3NjI2SDE2LjAxMjJWMTguOTcxN0gxOS4zMjE3VjEzLjk2OTJIMjEuNDU5N0MyMi41MDA1IDEzLjk2OTIgMjMuMzgxNiAxMy44MTA0IDI0LjA5OTUgMTMuNDg4NFpNMjMuMjcyMyA5LjkyOTc0TDIzLjI3MTcgOS45MzA2QzIzLjExMDEgMTAuMTU5MiAyMi44NzkzIDEwLjM1NzMgMjIuNTc1MyAxMC41MjMzQzIyLjI3NzYgMTAuNjcxNiAyMS45MDAxIDEwLjc0ODUgMjEuNDM4MiAxMC43NDg1SDE5LjMyMTdWNi4xNzU1MUgyMS40NTk3QzIxLjk5NDYgNi4xNzU1MSAyMi40MDUxIDYuMjY3MTggMjIuNjk5OCA2LjQ0MTE3TDIyLjcwMDYgNi40NDE2NUwyMi43MDE0IDYuNDQyMUMyMy4wMTkgNi42MjE0MiAyMy4yNDg2IDYuODM5MTUgMjMuMzk1OSA3LjA5MzQxQzIzLjU0ODQgNy4zNTY1MSAyMy42NDQgNy42MTcyNSAyMy42ODQ5IDcuODc1OTFMMjMuNjg1NCA3Ljg3ODg3TDIzLjY4NiA3Ljg4MThDMjMuNzQyNyA4LjEzNjUxIDIzLjc2OTcgOC4zMzYyMSAyMy43Njk3IDguNDgzNDZDMjMuNzY5NyA4LjY3MDc2IDIzLjcyOTQgOC44OTY2NyAyMy42NDUzIDkuMTYyODVMMjMuNjQ0NSA5LjE2NTA5TDIzLjY0MzkgOS4xNjczNkMyMy41NzU3IDkuNDI2NDEgMjMuNDUyNCA5LjY4MDUxIDIzLjI3MjMgOS45Mjk3NFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0zMS45NTEyIDIuOTc2MjZIMjguNjQxOFYxOC45NzE3SDMxLjk1MTJWMi45NzYyNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzguMDIwNiAxMy45NDc3SDM5Ljk0NjhMNDMuMjg3MSAxOC45NzE3SDQ3LjE0NzZMNDMuNDI2NSAxMy4xNzAzQzQzLjg5OTQgMTIuODg1OSA0NC4yOTY2IDEyLjU0NjcgNDQuNjE3MSAxMi4xNTE5QzQ1LjA2OTEgMTEuNjEyNyA0NS4zOTA1IDExLjAxNDUgNDUuNTgwNiAxMC4zNTc3QzQ1Ljc4MzcgOS43MDUwMyA0NS44ODU1IDkuMDUxNTYgNDUuODg1NSA4LjM5NzU4QzQ1Ljg4NTUgNy41NzA5NiA0NS43NDc2IDYuODI3OTIgNDUuNDY5NyA2LjE3MDEyQzQ1LjE5MiA1LjQ5ODY5IDQ0Ljc4MjQgNC45Mjg0OSA0NC4yNDE0IDQuNDYwNzJDNDMuNzE0MSAzLjk3ODAzIDQzLjA1NyAzLjYxNDE2IDQyLjI3MjkgMy4zNjc0M0M0MS40ODc4IDMuMTA2MDYgNDAuNTk2MyAyLjk3NjI2IDM5LjU5OTkgMi45NzYyNkgzNC43MTExVjE4Ljk3MTdIMzguMDIwNlYxMy45NDc3Wk00MS45NzI4IDkuOTQ5MDlMNDEuOTcxNiA5Ljk1MDU2TDQxLjk3MDYgOS45NTIwN0M0MS44MDk0IDEwLjE4MDIgNDEuNTc5MiAxMC4zNzA5IDQxLjI3NTcgMTAuNTIyNUM0MC45Nzc4IDEwLjY3MTMgNDAuNTk5OCAxMC43NDg1IDQwLjEzNzEgMTAuNzQ4NUgzOC4wMjA2VjYuMTc1NTFINDAuMTU4NkM0MC42OTM1IDYuMTc1NTEgNDEuMTA0IDYuMjY3MTggNDEuMzk4NyA2LjQ0MTE3TDQxLjM5OTUgNi40NDE2NUw0MS40MDAzIDYuNDQyMUM0MS43MTc5IDYuNjIxNDIgNDEuOTQ3NSA2LjgzOTE1IDQyLjA5NDggNy4wOTM0MUM0Mi4yNDczIDcuMzU2NTEgNDIuMzQyOSA3LjYxNzI1IDQyLjM4MzggNy44NzU5MUw0Mi4zODQzIDcuODc4ODdMNDIuMzg0OSA3Ljg4MThDNDIuNDQxNCA4LjEzNTgxIDQyLjQ2ODYgOC4zNDI5MiA0Mi40Njg2IDguNTA0OTNDNDIuNDY4NiA4LjcyMTk5IDQyLjQyNzggOC45NjI1MiA0Mi4zNDQxIDkuMjI3MjZMNDIuMzQzNiA5LjIyODg3TDQyLjM0MzIgOS4yMzA1QzQyLjI3NTMgOS40NzQ2NCA0Mi4xNTI2IDkuNzE0MTYgNDEuOTcyOCA5Ljk0OTA5WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTUxLjYyMzYgMi45NzYyNkg0OC4zMTQxVjE4Ljk3MTdINTEuNjIzNlYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTY0LjE2MTEgMi45NzYyNkg1My4zMDlWNi4xNzU1MUg1Ny4wMDUxVjE4Ljk3MTdMNjAuMzE0NiAxOC45NTg2VjYuMTc1NTFINjQuMTYxMVYyLjk3NjI2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjUyNDc3NCAwLjI3NDIyN0MwLjU3NDczNCAwLjI0NTQwOCAwLjYzODYxNyAwLjI2MjUxMSAwLjY2NzQ2MiAwLjMxMjQyN0wxNC4xMTQ2IDIzLjU4MzJDMTQuMTQzNCAyMy42MzMxIDE0LjEyNjMgMjMuNjk2OSAxNC4wNzY0IDIzLjcyNThDMTQuMDI2NCAyMy43NTQ2IDEzLjk2MjUgMjMuNzM3NSAxMy45MzM3IDIzLjY4NzZMMC40ODY1NDEgMC40MTY3OUMwLjQ1NzY5NyAwLjM2Njg3NCAwLjQ3NDgxNSAwLjMwMzA0NiAwLjUyNDc3NCAwLjI3NDIyN1oiIGZpbGw9IiM3N0E2QzAiLz4KPHBhdGggZD0iTTIuNzUzMDQgMTguNDI5OUgyLjE3NzQ5VjE5LjE2OTNIMS40Mzc1TDEuNDM3NSAxOS43NDQzSDIuMTc3NDlWMjAuNDgzN0gyLjc1MzA0VjE5Ljc0NDNIMy40OTMwNFYxOS4xNjkzTDIuNzUzMDQgMTkuMTY5M1YxOC40Mjk5WiIgZmlsbD0iIzc3QTZDMCIvPgo8L3N2Zz4K"
+            width="65"
+            height="24"
+            alt="Spirit"
+          />
+        </Link>
+        <HeaderMobileActions dialogId="header_dialog_example_1" isOpen={isMenuOpen} onOpen={handleMenuOpen} />
+        <HeaderDesktopActions color="primary" aria-label="Main navigation">
+          <HeaderNav>
+            <HeaderNavItem {...args}>
+              <HeaderLink isCurrent aria-current="page">
+                Job offers
+              </HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Part-time jobs</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Inspiration</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Replies</HeaderLink>
+            </HeaderNavItem>
+            <HeaderNavItem>
+              <HeaderLink>Employers</HeaderLink>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+        <HeaderDesktopActions color="secondary" aria-label="User area">
+          <HeaderNav>
+            <HeaderNavItem>
+              <HeaderDialogButton
+                onClick={handleUserMenuOpen}
+                aria-controls="header_dialog_example_2"
+                aria-expanded={isUserMenuOpen}
+              >
+                Marian
+              </HeaderDialogButton>
+            </HeaderNavItem>
+          </HeaderNav>
+        </HeaderDesktopActions>
+      </Header>
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="Main navigation">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink isCurrent>Job offers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Part-time jobs</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Inspiration</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Replies</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Employers</HeaderDialogLink>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+        <HeaderDialogActions color="secondary" aria-label="Menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogText UNSAFE_className="text-primary-inverted-disabled">Marian</HeaderDialogText>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+      <HeaderDialog
+        id="header_dialog_example_2"
+        aria-label="User menu"
+        isOpen={isUserMenuOpen}
+        onClose={handleUserMenuClose}
+      >
+        <HeaderDialogCloseButton />
+        <HeaderDialogActions color="primary" aria-label="User menu">
+          <HeaderDialogNav>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Dashboard</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Profile</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Favourites</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogLink>Notifications</HeaderDialogLink>
+            </HeaderDialogNavItem>
+            <HeaderDialogNavItem>
+              <HeaderDialogButton>Sign out</HeaderDialogButton>
+            </HeaderDialogNavItem>
+          </HeaderDialogNav>
+        </HeaderDialogActions>
+      </HeaderDialog>
+    </>
+  );
+};
+
+export const HeaderNavItemPlayground: Story = {
+  name: 'HeaderNavItem',
+  render: (args) => <HeaderWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Header/demo/argTypes.ts b/packages/web-react/src/components/Header/demo/argTypes.ts
deleted file mode 100644
index 76262029fd..0000000000
--- a/packages/web-react/src/components/Header/demo/argTypes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  color: {
-    control: {
-      type: 'select',
-      options: ['inverted', 'transparent'],
-    },
-    defaultValue: 'inverted',
-  },
-  isSimple: {
-    control: {
-      type: 'boolean',
-    },
-    defaultValue: false,
-  },
-};
diff --git a/packages/web-react/src/components/Icon/Icon.stories.ts b/packages/web-react/src/components/Icon/Icon.stories.ts
deleted file mode 100644
index 1e69d9b273..0000000000
--- a/packages/web-react/src/components/Icon/Icon.stories.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Icon from './Icon';
-
-export default {
-  title: 'Components/Icon',
-  component: Icon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Icon',
-      },
-    },
-  },
-  args: {
-    name: 'warning',
-  },
-  argTypes,
-} as ComponentMeta<typeof Icon>;
-
-export { default as Icon } from './demo/Icon';
diff --git a/packages/web-react/src/components/Icon/Icon.stories.tsx b/packages/web-react/src/components/Icon/Icon.stories.tsx
new file mode 100644
index 0000000000..e068ad1ddc
--- /dev/null
+++ b/packages/web-react/src/components/Icon/Icon.stories.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Icon } from './Icon';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Icon> = {
+  title: 'Components/Icon',
+  component: Icon,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    ariaHidden: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    boxSize: {
+      control: 'number',
+      table: {
+        defaultValue: { summary: 24 },
+      },
+    },
+    name: {
+      control: 'text',
+    },
+    title: {
+      control: 'text',
+    },
+  },
+  args: {
+    ariaHidden: true,
+    boxSize: 24,
+    name: 'warning',
+    title: 'Warning',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Icon>;
+
+export const Playground: Story = {
+  name: 'Icon',
+};
diff --git a/packages/web-react/src/components/Icon/demo/argTypes.ts b/packages/web-react/src/components/Icon/demo/argTypes.ts
deleted file mode 100644
index 4e7a70f762..0000000000
--- a/packages/web-react/src/components/Icon/demo/argTypes.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default {
-  name: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'warning',
-  },
-  title: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'Warning',
-  },
-  boxSize: {
-    control: {
-      type: 'number',
-    },
-    defaultValue: 24,
-  },
-  ariaHidden: {
-    control: {
-      type: 'boolean',
-    },
-    defaultValue: true,
-  },
-};
diff --git a/packages/web-react/src/components/Pagination/Pagination.stories.ts b/packages/web-react/src/components/Pagination/Pagination.stories.ts
deleted file mode 100644
index b9f62639bd..0000000000
--- a/packages/web-react/src/components/Pagination/Pagination.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Pagination from './Pagination';
-
-export default {
-  title: 'Components/Pagination',
-  component: Pagination,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Pagination is used to navigate between pages',
-      },
-    },
-  },
-  argTypes,
-} as ComponentMeta<typeof Pagination>;
-
-export { default as PaginationCurrentFirst } from './demo/PaginationCurrentFirst';
-export { default as PaginationCurrentMiddle } from './demo/PaginationCurrentMiddle';
-export { default as PaginationCurrentLast } from './demo/PaginationCurrentLast';
diff --git a/packages/web-react/src/components/Pagination/Pagination.stories.tsx b/packages/web-react/src/components/Pagination/Pagination.stories.tsx
new file mode 100644
index 0000000000..f67d2515f1
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/Pagination.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'Components/Pagination',
+  component: Pagination,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+    listProps: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+export const Playground: Story = {
+  name: 'Pagination',
+  render: (args) => (
+    <Pagination {...args}>
+      <PaginationItem>
+        <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 1" pageNumber={1} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 2" pageNumber={2} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 3" pageNumber={3} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 4" pageNumber={4} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 5" pageNumber={5} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLinkNext href="#" />
+      </PaginationItem>
+    </Pagination>
+  ),
+};
diff --git a/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx b/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx
new file mode 100644
index 0000000000..2edb98a2e3
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/PaginationButtonLink.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PaginationButtonLink } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof PaginationButtonLink> = {
+  title: 'Components/Pagination',
+  component: PaginationButtonLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    accessibilityLabel: {
+      control: 'text',
+    },
+    direction: {
+      control: 'select',
+      options: ['next', 'previous'],
+    },
+  },
+  args: {
+    accessibilityLabel: 'Next',
+    direction: 'next',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaginationButtonLink>;
+
+export const PaginationButtonLinkPlayground: Story = {
+  name: 'PaginationButtonLink',
+};
diff --git a/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx b/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx
new file mode 100644
index 0000000000..4470b2d5a0
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/PaginationItem.stories.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof PaginationItem> = {
+  title: 'Components/Pagination',
+  component: PaginationItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaginationItem>;
+
+export const PaginationItemPlayground: Story = {
+  name: 'PaginationItem',
+  render: (args) => (
+    <Pagination>
+      <PaginationItem {...args}>
+        <PaginationLinkPrevious href="#" />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 11" pageNumber={11} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 12" pageNumber={12} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 13" pageNumber={13} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 14" pageNumber={14} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 15" pageNumber={15} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLinkNext href="#" />
+      </PaginationItem>
+    </Pagination>
+  ),
+};
diff --git a/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx
new file mode 100644
index 0000000000..4683e74490
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/PaginationLink.stories.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof PaginationLink> = {
+  title: 'Components/Pagination',
+  component: PaginationLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    accessibilityLabel: {
+      control: 'text',
+    },
+    elementType: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'a' },
+      },
+    },
+    isCurrent: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    pageNumber: {
+      control: 'number',
+    },
+  },
+  args: {
+    accessibilityLabel: 'Go to Page 11',
+    elementType: 'a',
+    isCurrent: false,
+    pageNumber: 11,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaginationLink>;
+
+export const PaginationLinkPlayground: Story = {
+  name: 'PaginationLink',
+  render: (args) => (
+    <Pagination>
+      <PaginationItem>
+        <PaginationLinkPrevious href="#" />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink {...args} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 12" pageNumber={12} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 13" pageNumber={13} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 14" pageNumber={14} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 15" pageNumber={15} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLinkNext href="#" />
+      </PaginationItem>
+    </Pagination>
+  ),
+};
diff --git a/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx
new file mode 100644
index 0000000000..063e19c7fd
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/PaginationLinkNext.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof PaginationLinkNext> = {
+  title: 'Components/Pagination',
+  component: PaginationLinkNext,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    accessibilityLabel: {
+      control: 'text',
+    },
+    href: {
+      control: 'text',
+    },
+  },
+  args: {
+    accessibilityLabel: 'Next',
+    href: '#',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaginationLinkNext>;
+
+export const PaginationLinkNextPlayground: Story = {
+  name: 'PaginationLinkNext',
+  render: (args) => (
+    <Pagination>
+      <PaginationItem>
+        <PaginationLinkPrevious href="#" />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 11" pageNumber={11} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 12" pageNumber={12} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 13" pageNumber={13} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 14" pageNumber={14} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 15" pageNumber={15} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLinkNext {...args} />
+      </PaginationItem>
+    </Pagination>
+  ),
+};
diff --git a/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx
new file mode 100644
index 0000000000..da9df04b3e
--- /dev/null
+++ b/packages/web-react/src/components/Pagination/PaginationLinkPrevious.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Pagination, PaginationItem, PaginationLink, PaginationLinkNext, PaginationLinkPrevious } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof PaginationLinkPrevious> = {
+  title: 'Components/Pagination',
+  component: PaginationLinkPrevious,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    accessibilityLabel: {
+      control: 'text',
+    },
+    href: {
+      control: 'text',
+    },
+  },
+  args: {
+    accessibilityLabel: 'Previous',
+    href: '#',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PaginationLinkPrevious>;
+
+export const PaginationLinkPreviousPlayground: Story = {
+  name: 'PaginationLinkPrevious',
+  render: (args) => (
+    <Pagination>
+      <PaginationItem>
+        <PaginationLinkPrevious {...args} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 11" pageNumber={11} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 12" pageNumber={12} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" isCurrent accessibilityLabel="Current Page, Page 13" pageNumber={13} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 14" pageNumber={14} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLink href="#" accessibilityLabel="Go to Page 15" pageNumber={15} />
+      </PaginationItem>
+      <PaginationItem>
+        <PaginationLinkNext href="#" />
+      </PaginationItem>
+    </Pagination>
+  ),
+};
diff --git a/packages/web-react/src/components/Pagination/demo/argTypes.ts b/packages/web-react/src/components/Pagination/demo/argTypes.ts
deleted file mode 100644
index ff8b4c5632..0000000000
--- a/packages/web-react/src/components/Pagination/demo/argTypes.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default {};
diff --git a/packages/web-react/src/components/ScrollView/ScrollView.stories.ts b/packages/web-react/src/components/ScrollView/ScrollView.stories.ts
deleted file mode 100644
index 79a0bb9ff4..0000000000
--- a/packages/web-react/src/components/ScrollView/ScrollView.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import ScrollView from './ScrollView';
-
-export default {
-  title: 'Components/ScrollView',
-  component: ScrollView,
-  parameters: {
-    docs: {
-      description: {
-        component: 'ScrollView makes long content scrollable.',
-      },
-    },
-  },
-  argTypes,
-} as ComponentMeta<typeof ScrollView>;
-
-export { default as ScrollView } from './demo/ScrollView';
diff --git a/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx b/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx
new file mode 100644
index 0000000000..43f66d1ac3
--- /dev/null
+++ b/packages/web-react/src/components/ScrollView/ScrollView.stories.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ScrollView from './ScrollView';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof ScrollView> = {
+  title: 'Components/ScrollView',
+  component: ScrollView,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'select',
+      options: ['vertical', 'horizontal'],
+      description: `This is the place for the content of the ScrollView. In the real code you can
+        pass in any children you want. In this demo we have predefined options: \`vertical\` and,
+        \`horizontal\`. Please note the predefined options in this demo are not customizable.`,
+      mapping: {
+        vertical: (
+          <p>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
+            <br />
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
+          </p>
+        ),
+        horizontal: (
+          <p className="py-700" style={{ whiteSpace: 'nowrap' }}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
+            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum
+            sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
+            fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae,
+            justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+            nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
+            Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius
+            laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
+            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero,
+            sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
+            Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis
+            ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec
+            sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
+          </p>
+        ),
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      table: {
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+    isScrollbarDisabled: {
+      control: 'boolean',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    overflowDecorators: {
+      control: 'select',
+      options: ['borders', 'shadows', 'both'],
+      table: {
+        defaultValue: { summary: 'shadows' },
+      },
+    },
+  },
+  args: {
+    children: 'vertical',
+    direction: 'vertical',
+    isScrollbarDisabled: false,
+    overflowDecorators: 'shadows',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollView>;
+
+export const Playground: Story = {
+  name: 'ScrollView',
+  render: (args) => (
+    <div style={{ height: args.direction === 'vertical' ? '250px' : undefined }}>
+      <ScrollView {...args} />
+    </div>
+  ),
+};
diff --git a/packages/web-react/src/components/Spinner/Spinner.stories.ts b/packages/web-react/src/components/Spinner/Spinner.stories.ts
deleted file mode 100644
index 8d27b122d6..0000000000
--- a/packages/web-react/src/components/Spinner/Spinner.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Spinner from './Spinner';
-
-export default {
-  title: 'Components/Spinner',
-  component: Spinner,
-  parameters: {
-    docs: {
-      description: {
-        component: 'Indicates something is loading.',
-      },
-    },
-  },
-  argTypes,
-} as ComponentMeta<typeof Spinner>;
-
-export { default as Spinner } from './demo/Spinner';
diff --git a/packages/web-react/src/components/Spinner/Spinner.stories.tsx b/packages/web-react/src/components/Spinner/Spinner.stories.tsx
new file mode 100644
index 0000000000..c09eb240f1
--- /dev/null
+++ b/packages/web-react/src/components/Spinner/Spinner.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TextColors } from '../../constants';
+import { Spinner } from './Spinner';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Spinner> = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [...Object.values(TextColors), undefined],
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+  },
+  args: {
+    color: undefined,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Spinner>;
+
+export const Playground: Story = {
+  name: 'Spinner',
+};
diff --git a/packages/web-react/src/components/Spinner/demo/argTypes.ts b/packages/web-react/src/components/Spinner/demo/argTypes.ts
deleted file mode 100644
index 9ba63c618b..0000000000
--- a/packages/web-react/src/components/Spinner/demo/argTypes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { TextColors } from '../../../constants';
-
-export default {
-  color: {
-    control: {
-      type: 'select',
-      options: [...Object.values(TextColors), undefined],
-    },
-    defaultValue: undefined,
-  },
-};
diff --git a/packages/web-react/src/components/Tabs/Tab.stories.ts b/packages/web-react/src/components/Tabs/Tab.stories.ts
deleted file mode 100644
index d880b9d183..0000000000
--- a/packages/web-react/src/components/Tabs/Tab.stories.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import Tab from './TabList';
-
-export default {
-  title: 'Components/Tabs',
-  component: Tab,
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Tab component is used to organize related content. User can navigate between\ngroups of information in tabbable regions.',
-      },
-    },
-  },
-} as ComponentMeta<typeof Tab>;
-
-export { default as Tabs } from './demo/Tabs';
-export { default as UncontrolledTabs } from './demo/UncontrolledTabs';
diff --git a/packages/web-react/src/components/Tabs/TabContent.stories.tsx b/packages/web-react/src/components/Tabs/TabContent.stories.tsx
new file mode 100644
index 0000000000..64a1c5da0f
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/TabContent.stories.tsx
@@ -0,0 +1,46 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabContentProps, TabItem, TabList, TabPane, Tabs } from '.';
+
+const meta: Meta<typeof TabContent> = {
+  title: 'Components/Tabs',
+  component: TabContent,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabContent>;
+
+const TabsWithHooks = (args: TabContentProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent {...args}>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const TabContentPlayground: Story = {
+  name: 'TabContent',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/TabContent.tsx b/packages/web-react/src/components/Tabs/TabContent.tsx
index 2795158ef5..b2eb338bcb 100644
--- a/packages/web-react/src/components/Tabs/TabContent.tsx
+++ b/packages/web-react/src/components/Tabs/TabContent.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ChildrenProps, TransferProps } from '../../types';
 
-type TabContentProps = ChildrenProps & TransferProps;
+export type TabContentProps = ChildrenProps & TransferProps;
 
 const TabContent = ({ children, ...restProps }: TabContentProps): JSX.Element => <div {...restProps}>{children}</div>;
 
diff --git a/packages/web-react/src/components/Tabs/TabItem.stories.tsx b/packages/web-react/src/components/Tabs/TabItem.stories.tsx
new file mode 100644
index 0000000000..cc212528e3
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/TabItem.stories.tsx
@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabItemProps, TabList, TabPane, Tabs } from '.';
+
+const meta: Meta<typeof TabItem> = {
+  title: 'Components/Tabs',
+  component: TabItem,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabItem>;
+
+const TabsWithHooks = (args: TabItemProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList>
+        <TabItem {...args} forTab={1}>
+          Item Selected
+        </TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const TabItemPlayground: Story = {
+  name: 'TabItem',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/TabItem.tsx b/packages/web-react/src/components/Tabs/TabItem.tsx
index 1c8d305344..ff8cb60ded 100644
--- a/packages/web-react/src/components/Tabs/TabItem.tsx
+++ b/packages/web-react/src/components/Tabs/TabItem.tsx
@@ -3,7 +3,7 @@ import { ChildrenProps, TabId, TransferProps, ClickEvents, ClickEvent } from '..
 import { useTabContext } from './TabContext';
 import { useTabsStyleProps } from './useTabsStyleProps';
 
-interface TabItemProps extends ChildrenProps, TransferProps, ClickEvents {
+export interface TabItemProps extends ChildrenProps, TransferProps, ClickEvents {
   forTab: TabId;
 }
 
diff --git a/packages/web-react/src/components/Tabs/TabLink.stories.tsx b/packages/web-react/src/components/Tabs/TabLink.stories.tsx
new file mode 100644
index 0000000000..6d2ecc703b
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/TabLink.stories.tsx
@@ -0,0 +1,57 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabLink, TabLinkProps, TabList, TabPane, Tabs } from '.';
+
+const meta: Meta<typeof TabLink> = {
+  title: 'Components/Tabs',
+  component: TabLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    href: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    href: 'https://www.example.com',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabLink>;
+
+const TabsWithHooks = (args: TabLinkProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList {...args}>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+        <TabLink {...args}>Item Link</TabLink>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const TabLinkPlayground: Story = {
+  name: 'TabLink',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/TabLink.tsx b/packages/web-react/src/components/Tabs/TabLink.tsx
index b332093ba7..08987f1baf 100644
--- a/packages/web-react/src/components/Tabs/TabLink.tsx
+++ b/packages/web-react/src/components/Tabs/TabLink.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ChildrenProps, TransferProps } from '../../types';
 import { useTabsStyleProps } from './useTabsStyleProps';
 
-interface TabLinkProps extends ChildrenProps, TransferProps {
+export interface TabLinkProps extends ChildrenProps, TransferProps {
   href: string;
 }
 
diff --git a/packages/web-react/src/components/Tabs/TabList.stories.tsx b/packages/web-react/src/components/Tabs/TabList.stories.tsx
new file mode 100644
index 0000000000..e50242219c
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/TabList.stories.tsx
@@ -0,0 +1,46 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabList, TabListProps, TabPane, Tabs } from '.';
+
+const meta: Meta<typeof TabList> = {
+  title: 'Components/Tabs',
+  component: TabList,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabList>;
+
+const TabsWithHooks = (args: TabListProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList {...args}>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const TabListPlayground: Story = {
+  name: 'TabList',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/TabList.tsx b/packages/web-react/src/components/Tabs/TabList.tsx
index 3aa9ca55b8..e4fb51300c 100644
--- a/packages/web-react/src/components/Tabs/TabList.tsx
+++ b/packages/web-react/src/components/Tabs/TabList.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ChildrenProps, TransferProps } from '../../types';
 import { useTabsStyleProps } from './useTabsStyleProps';
 
-type TabListProps = ChildrenProps & TransferProps;
+export type TabListProps = ChildrenProps & TransferProps;
 
 const TabList = ({ children, ...restProps }: TabListProps): JSX.Element => {
   const { classProps } = useTabsStyleProps();
diff --git a/packages/web-react/src/components/Tabs/TabPane.stories.tsx b/packages/web-react/src/components/Tabs/TabPane.stories.tsx
new file mode 100644
index 0000000000..1d76fe3819
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/TabPane.stories.tsx
@@ -0,0 +1,48 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabList, TabPane, TabPaneProps, Tabs } from '.';
+
+const meta: Meta<typeof TabPane> = {
+  title: 'Components/Tabs',
+  component: TabPane,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabPane>;
+
+const TabsWithHooks = (args: TabPaneProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent>
+        <TabPane {...args} tabId={1}>
+          Pane 1
+        </TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const TabPanePlayground: Story = {
+  name: 'TabPane',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/TabPane.tsx b/packages/web-react/src/components/Tabs/TabPane.tsx
index 683cd61440..43afb5c4ff 100644
--- a/packages/web-react/src/components/Tabs/TabPane.tsx
+++ b/packages/web-react/src/components/Tabs/TabPane.tsx
@@ -3,7 +3,7 @@ import { ChildrenProps, TabId, TransferProps } from '../../types';
 import { useTabContext } from './TabContext';
 import { useTabsStyleProps } from './useTabsStyleProps';
 
-interface TabPaneProps extends ChildrenProps, TransferProps {
+export interface TabPaneProps extends ChildrenProps, TransferProps {
   tabId: TabId;
 }
 
diff --git a/packages/web-react/src/components/Tabs/Tabs.stories.tsx b/packages/web-react/src/components/Tabs/Tabs.stories.tsx
new file mode 100644
index 0000000000..90e859c3ee
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/Tabs.stories.tsx
@@ -0,0 +1,46 @@
+import React, { useCallback, useState } from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TabId } from '../../types';
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabList, TabPane, Tabs, TabsProps } from '.';
+
+const meta: Meta<typeof Tabs> = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+const TabsWithHooks = (args: TabsProps) => {
+  const [selectedTabId, setState] = useState<TabId>(1);
+
+  const selectTab = useCallback((tabId: TabId) => {
+    setState(tabId);
+  }, []);
+
+  return (
+    <Tabs {...args} selectedTab={selectedTabId} toggle={selectTab}>
+      <TabList>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </Tabs>
+  );
+};
+
+export const Playground: Story = {
+  name: 'Tabs',
+  render: (args) => <TabsWithHooks {...args} />,
+};
diff --git a/packages/web-react/src/components/Tabs/Tabs.tsx b/packages/web-react/src/components/Tabs/Tabs.tsx
index 7b86262626..0259b7efe8 100644
--- a/packages/web-react/src/components/Tabs/Tabs.tsx
+++ b/packages/web-react/src/components/Tabs/Tabs.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ChildrenProps, TabId, TransferProps } from '../../types';
 import { TabsProvider, TabsToggler } from './TabContext';
 
-interface TabsProps extends ChildrenProps, TransferProps {
+export interface TabsProps extends ChildrenProps, TransferProps {
   selectedTab: TabId;
   toggle: TabsToggler;
   // eslint-disable-next-line react/require-default-props
diff --git a/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx b/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx
new file mode 100644
index 0000000000..68752aff98
--- /dev/null
+++ b/packages/web-react/src/components/Tabs/UncontrolledTabs.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ReadMe from './README.md';
+import { TabContent, TabItem, TabList, TabPane, UncontrolledTabs } from '.';
+
+const meta: Meta<typeof UncontrolledTabs> = {
+  title: 'Components/Tabs',
+  component: UncontrolledTabs,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    defaultSelectedTab: {
+      control: {
+        type: 'string',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UncontrolledTabs>;
+
+export const UncontrolledTabsPlayground: Story = {
+  name: 'UncontrolledTabs',
+  render: (args) => (
+    <UncontrolledTabs {...args} defaultSelectedTab={1}>
+      <TabList>
+        <TabItem forTab={1}>Item Selected</TabItem>
+        <TabItem forTab={2}>Item</TabItem>
+      </TabList>
+      <TabContent>
+        <TabPane tabId={1}>Pane 1</TabPane>
+        <TabPane tabId={2}>Pane 2</TabPane>
+      </TabContent>
+    </UncontrolledTabs>
+  ),
+};
diff --git a/packages/web-react/src/components/Tooltip/Tooltip.stories.ts b/packages/web-react/src/components/Tooltip/Tooltip.stories.ts
deleted file mode 100644
index d84d4b34e3..0000000000
--- a/packages/web-react/src/components/Tooltip/Tooltip.stories.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ComponentMeta } from '@storybook/react';
-import argTypes from './demo/argTypes';
-import Tooltip from './Tooltip';
-
-export default {
-  title: 'Components/Tooltip',
-  component: Tooltip,
-  argTypes,
-} as ComponentMeta<typeof Tooltip>;
-
-export { default as Tooltip } from './demo/Tooltip';
-export { default as TooltipUncontrolled } from './demo/TooltipUncontrolled';
diff --git a/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx b/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000000..df0c889243
--- /dev/null
+++ b/packages/web-react/src/components/Tooltip/Tooltip.stories.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '..';
+import { Tooltip, TooltipWrapper } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    closeLabel: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Close' },
+      },
+    },
+    isDismissible: {
+      control: 'boolean',
+    },
+    open: {
+      control: 'boolean',
+    },
+    placement: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left', 'off'],
+      table: {
+        defaultValue: { summary: 'bottom' },
+      },
+    },
+  },
+  args: {
+    children: 'Hello there!',
+    closeLabel: 'Close',
+    isDismissible: false,
+    placement: 'bottom',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Playground: Story = {
+  name: 'Tooltip',
+  render: (args) => (
+    <TooltipWrapper>
+      <Button UNSAFE_className="TooltipTarget">Tooltip</Button>
+      <Tooltip {...args} />
+    </TooltipWrapper>
+  ),
+};
diff --git a/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx
new file mode 100644
index 0000000000..75b55e5c9e
--- /dev/null
+++ b/packages/web-react/src/components/Tooltip/UncontrolledTooltip.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '..';
+import { TooltipWrapper, UncontrolledTooltip } from '.';
+import ReadMe from './README.md';
+
+const meta: Meta<typeof UncontrolledTooltip> = {
+  title: 'Components/Tooltip',
+  component: UncontrolledTooltip,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    closeLabel: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Close' },
+      },
+    },
+    isDismissible: {
+      control: 'boolean',
+    },
+    placement: {
+      control: 'select',
+      options: ['top', 'right', 'bottom', 'left', 'off'],
+      table: {
+        defaultValue: { summary: 'bottom' },
+      },
+    },
+  },
+  args: {
+    children: 'Hello there!',
+    closeLabel: 'Close',
+    isDismissible: false,
+    placement: 'bottom',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UncontrolledTooltip>;
+
+export const UncontrolledTooltipPlayground: Story = {
+  name: 'UncontrolledTooltip',
+  render: (args) => (
+    <TooltipWrapper>
+      <Button UNSAFE_className="TooltipTarget">Tooltip</Button>
+      <UncontrolledTooltip {...args} />
+    </TooltipWrapper>
+  ),
+};
diff --git a/packages/web-react/src/components/Tooltip/demo/argTypes.ts b/packages/web-react/src/components/Tooltip/demo/argTypes.ts
deleted file mode 100644
index 59ef322cdd..0000000000
--- a/packages/web-react/src/components/Tooltip/demo/argTypes.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export default {
-  placement: {
-    control: {
-      type: 'select',
-      options: ['top', 'right', 'bottom', 'left', 'off'],
-    },
-    defaultValue: 'bottom',
-  },
-  isDismissible: {
-    control: {
-      type: 'boolean',
-    },
-    defaultValue: false,
-  },
-  label: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: '',
-  },
-  closeLabel: {
-    control: {
-      type: 'text',
-    },
-    defaultValue: 'Close',
-  },
-};