diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 3cc4e0e..8840f26 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -1,7 +1,7 @@
 <script context="module">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-
+	import { expect } from '@storybook/test';
 	import ChartHeader from './ChartHeader.svelte';
 
 	const { Story } = defineMeta({
@@ -10,7 +10,15 @@
 	});
 </script>
 
-<Story name="Default">
+<Story
+	name="Default"
+	play={async ({ step }) => {
+		await step('Container has ID attribute derived from title prop', async () => {
+			const containerEl = document.querySelector('#mehr-uber-60-jahrige-in-allen-berufen');
+			expect(containerEl).toBeTruthy();
+		});
+	}}
+>
 	<DesignTokens>
 		<ChartHeader
 			title="Mehr über-60-Jährige in allen Berufen"
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index 007f7e5..f4b6c52 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-
+	import slugify from "../utils/slugify.ts" 
+	
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
@@ -9,7 +10,7 @@
 	let { title, subtitle, children }: ChartHeaderProps = $props();
 </script>
 
-<header class="container">
+<header class="container" id={slugify(title)}>
 	<h2 class="title">{title}</h2>
 	{#if subtitle}
 		<p class="subtitle">{subtitle}</p>
diff --git a/components/src/utils/slugify.ts b/components/src/utils/slugify.ts
new file mode 100644
index 0000000..4914e60
--- /dev/null
+++ b/components/src/utils/slugify.ts
@@ -0,0 +1,12 @@
+// Source: https://svelte.dev/playground/b130be5e485441a1842ae97e4ce4f244?version=5.20.0
+
+export default function slugify(str: string): string {
+  return str
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .trim()
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9 -]/g, '')
+}