diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index f28d354..2d982f3 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -15,7 +15,7 @@ const { Content, headings } = await render(entry);
 ---
 
 <Layout title={entry.data.title} description={entry.data.summary}>
-  <h1 class="gradient-text">{entry.data.title}</h1>
+  <h1 transition:name={`blog-title-${entry.id}`} class="gradient-text">{entry.data.title}</h1>
   <div class="wrapper">
     <div class="toc-wrapper">
       <nav aria-labelledby="on-this-page" class="toc">
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 97cee5c..d3eb4fe 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -19,7 +19,7 @@ const options: Intl.DateTimeFormatOptions = {
   {
     blogEntries.map((p) => (
       <article>
-        <h2>
+        <h2 transition:name={`blog-title-${p.id}`}>
           <a href={`/blog/${p.id}`}>{p.data.title}</a>
         </h2>
         <p>{p.data.date.toLocaleDateString(undefined, options)}</p>