diff --git a/src/lib/components/atoms/Heading.svelte b/src/lib/components/atoms/Heading.svelte
new file mode 100644
index 0000000..95e9665
--- /dev/null
+++ b/src/lib/components/atoms/Heading.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		size?: 'small' | 'medium' | 'large';
+		spacing?: 'none' | 'small' | 'medium' | 'large';
+		children: Snippet;
+	};
+
+	let { size = 'medium', spacing = 'medium', children }: Props = $props();
+
+	const sizeClass = {
+		small: 'text-lg',
+		medium: 'text-2xl',
+		large: 'text-3xl'
+	};
+	const spacingClass = {
+		none: 'mb-0',
+		small: 'mb-2',
+		medium: 'mb-4',
+		large: 'mb-6'
+	};
+</script>
+
+<h2 class={`${sizeClass[size]} ${spacingClass[spacing]} font-semibold text-white`}>
+	{@render children()}
+</h2>