diff --git a/.cspell/dictionary.txt b/.cspell/dictionary.txt
index a1d8cce..53e2f1a 100644
--- a/.cspell/dictionary.txt
+++ b/.cspell/dictionary.txt
@@ -1,8 +1,6 @@
-Backlink
-Imhoff
-Secuela
 astro
 astrojs
+Backlink
 bezier
 bitstream
 clickarea
@@ -10,6 +8,7 @@ crossorigin
 cssnano
 evenodd
 favicons
+Imhoff
 linejoin
 lucida
 menlo
@@ -21,7 +20,13 @@ noreferrer
 onclick
 rgba
 secuela
+Secuela
 shibui
+sketchnotes
+Sketchnotes
 stefanimhoff
+subnavigation
+Subnavigation
+Subsubheadline
 tailwindcss
 typeof
diff --git a/src/components/Headline.astro b/src/components/Headline.astro
new file mode 100644
index 0000000..ede93b9
--- /dev/null
+++ b/src/components/Headline.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h2', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>
diff --git a/src/components/Headline.svelte b/src/components/Headline.svelte
deleted file mode 100644
index d9e515a..0000000
--- a/src/components/Headline.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h2';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-5 font-black tracking-tight mbe-10 mbs-16 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/PageTitle.svelte b/src/components/PageTitle.svelte
deleted file mode 100644
index e87de43..0000000
--- a/src/components/PageTitle.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	export let as = 'h1';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-7 font-black tracking-tight mbe-13 dark:font-extrabold ${$$props.class || ''}`}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/RSSLink.astro b/src/components/RSSLink.astro
index 3dd1758..34d25e9 100644
--- a/src/components/RSSLink.astro
+++ b/src/components/RSSLink.astro
@@ -1,7 +1,7 @@
 ---
 import { Sprite } from 'astro-icon';
 
-import Subsubheadline from './Subsubheadline.svelte';
+import Subsubheadline from './Subsubheadline.astro';
 ---
 
 <div class="grow mbe-5 sm:mbe-0">
diff --git a/src/components/Subheadline.astro b/src/components/Subheadline.astro
new file mode 100644
index 0000000..6bd686a
--- /dev/null
+++ b/src/components/Subheadline.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h3', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>
diff --git a/src/components/Subheadline.svelte b/src/components/Subheadline.svelte
deleted file mode 100644
index c5e1eaa..0000000
--- a/src/components/Subheadline.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h3';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-4 font-black tracking-tight mbe-8 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/Subnavigation.astro b/src/components/Subnavigation.astro
index 7762981..46211c8 100644
--- a/src/components/Subnavigation.astro
+++ b/src/components/Subnavigation.astro
@@ -27,7 +27,7 @@ const currentPath = new URL(Astro.request.url).pathname;
 				<li>
 					<a
 						href={url}
-						class={`text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+						class={`font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
 							currentPath === url && 'underline !decoration-accent decoration-4'
 						}`}
 					>
diff --git a/src/components/Subsubheadline.astro b/src/components/Subsubheadline.astro
new file mode 100644
index 0000000..9f421ba
--- /dev/null
+++ b/src/components/Subsubheadline.astro
@@ -0,0 +1,20 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h4', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={[
+		'text-3 font-black tracking-tight mbe-5 mbs-14 first-of-type:mbs-0 dark:font-extrabold',
+		className,
+	]}
+	{...props}
+>
+	<slot />
+</Element>
diff --git a/src/components/Subsubheadline.svelte b/src/components/Subsubheadline.svelte
deleted file mode 100644
index 07ca002..0000000
--- a/src/components/Subsubheadline.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-	export let as = 'h4';
-</script>
-
-<svelte:element
-	this={as}
-	class={`text-3 font-black tracking-tight mbe-5 mbs-14 first-of-type:mbs-0 dark:font-extrabold ${
-		$$props.class || ''
-	}`}
->
-	<slot />
-</svelte:element>
diff --git a/src/components/ThemeBox.svelte b/src/components/ThemeBox.astro
similarity index 100%
rename from src/components/ThemeBox.svelte
rename to src/components/ThemeBox.astro
diff --git a/src/components/Title.astro b/src/components/Title.astro
new file mode 100644
index 0000000..1a50760
--- /dev/null
+++ b/src/components/Title.astro
@@ -0,0 +1,17 @@
+---
+interface Props {
+	as?: string;
+	children?: any;
+	class?: string;
+}
+
+const { as = 'h1', class: className, ...props } = Astro.props;
+const Element = as;
+---
+
+<Element
+	class:list={['text-7 font-black tracking-tight mbe-13 dark:font-extrabold', className]}
+	{...props}
+>
+	<slot />
+</Element>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e80f993..d43e473 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,8 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Headline from '../components/Headline.astro';
 ---
 
 <Layout title="Homepage">
-	<h1>Homepage</h1>
+	<Headline>Homepage</Headline>
 </Layout>