diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 0c7594a..00e4084 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -18,7 +18,9 @@ const allBlogposts = await getCollection('blog');
 			{
 				allBlogposts.map((post) => (
 					<div class="flex flex-col space-y-4">
-						<h2 class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
+						<h2
+							transition:name={post.data.title}
+							class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
 							<a href={`/blog/${post.slug}/`}>{post.data.title}</a>
 						</h2>
 						<p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index d2bfdf0..25d9d94 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -27,7 +27,7 @@ const descriptionMeta =
 
 <BaseLayout title={title} description={descriptionMeta}>
 	<div class="container prose mx-auto px-4 py-16 dark:prose-invert lg:px-8 lg:py-32 xl:max-w-7xl">
-		<h1 class="text-4xl font-bold">{title}</h1>
+		<h1 transition:name={title} class="text-4xl font-bold">{title}</h1>
 		<Content components={components} />
 	</div>
 </BaseLayout>