diff --git a/components/src/ChartFooter/ChartFooter.stories.svelte b/components/src/ChartFooter/ChartFooter.stories.svelte
index 8a3158c1..e424c044 100644
--- a/components/src/ChartFooter/ChartFooter.stories.svelte
+++ b/components/src/ChartFooter/ChartFooter.stories.svelte
@@ -22,6 +22,17 @@
 	</DesignTokens>
 </Story>
 
+<Story name="One-up Centered" asChild>
+	<DesignTokens>
+		<ChartFooter layout="one-up" align="center">
+			Daten: <a href="#1">Zensus 2022</a>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
+			auf bewohnte Gebiete begrenzt.
+		</ChartFooter>
+	</DesignTokens>
+</Story>
+
 <Story name="Two-up" asChild>
 	<DesignTokens>
 		<ChartFooter layout="two-up">
diff --git a/components/src/ChartFooter/ChartFooter.svelte b/components/src/ChartFooter/ChartFooter.svelte
index c35399f5..c92fa5e9 100644
--- a/components/src/ChartFooter/ChartFooter.svelte
+++ b/components/src/ChartFooter/ChartFooter.svelte
@@ -4,14 +4,15 @@
 	import Note from '../Note/Note.svelte';
 
 	interface ChartFooterProps {
-		layout: 'one-up' | 'two-up';
+		layout?: 'one-up' | 'two-up';
+		align?: 'left' | 'center';
 		children?: Snippet;
 	}
 
-	let { layout = 'one-up', children }: ChartFooterProps = $props();
+	let { layout = 'one-up', align = 'left', children }: ChartFooterProps = $props();
 </script>
 
-<footer class={`container ${layout}`}>
+<footer class={`container ${layout} align-${align}`}>
 	{#if children}
 		<Note>
 			{@render children()}
@@ -33,6 +34,11 @@
 		display: flex;
 		flex-flow: column;
 		align-items: flex-start;
+		&.align-center {
+			align-items: center;
+			text-align: center;
+			text-wrap: balance;
+		}
 	}
 	.two-up {
 		display: grid;
diff --git a/components/src/ChartHeader/ChartHeader.stories.svelte b/components/src/ChartHeader/ChartHeader.stories.svelte
index 70df0f17..4bde8e10 100644
--- a/components/src/ChartHeader/ChartHeader.stories.svelte
+++ b/components/src/ChartHeader/ChartHeader.stories.svelte
@@ -29,3 +29,15 @@
 		</ChartHeader>
 	</DesignTokens>
 </Story>
+
+<Story name="Centered" asChild>
+	<DesignTokens>
+		<ChartHeader
+			title="Mehr über-60-Jährige in allen Berufen"
+			subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
+			align="center"
+		>
+			Arbitrary HTML content can go here
+		</ChartHeader>
+	</DesignTokens>
+</Story>
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index f1953c64..040eebab 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -7,12 +7,13 @@
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
+		align?: 'left' | 'center';
 		children?: Snippet;
 	}
-	let { title, subtitle, children }: ChartHeaderProps = $props();
+	let { title, subtitle, align = 'left', children }: ChartHeaderProps = $props();
 </script>
 
-<header class="container" id={slugify(title)}>
+<header class={`container align-${align}`} id={slugify(title)}>
 	<Headline>{title}</Headline>
 	{#if subtitle}
 		<Copy><p class="subtitle">{subtitle}</p></Copy>
@@ -28,6 +29,12 @@
 	.container {
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);
+		display: flex;
+		flex-flow: column;
+		gap: 0.125rem;
+	}
+	.align-center {
+		text-align: center;
 	}
 	.subtitle {
 		text-wrap: balance;