diff --git a/src/components/projects/ProjectCard.astro b/src/components/projects/ProjectCard.astro
index 8cbf173..aa4bf70 100644
--- a/src/components/projects/ProjectCard.astro
+++ b/src/components/projects/ProjectCard.astro
@@ -32,9 +32,11 @@ const bgImage = await getImage({
       />
     </div>
     <div>
-      <h3 class="project-name">{project.data.name}</h3>
-      <small>{project.data.tags.join(", ")}</small>
-      <p>{project.data.summary}</p>
+      <h3 transition:name={`project-name-${project.id}`} class="project-name">
+        {project.data.name}
+      </h3>
+      <small transition:name={`project-tags-${project.id}`}>{project.data.tags.join(", ")}</small>
+      <p transition:name={`project-summary-${project.id}`}>{project.data.summary}</p>
     </div>
   </article>
 </a>
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index 2d10662..65346eb 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -28,13 +28,15 @@ const og = {
   <div class="hero">
     <div class="txt">
       <div class="project-header">
-        <h1 class="gradient-text">{entry.data.name}</h1>
-        <p>
+        <h1 transition:name={`project-name-${entry.id}`} class="gradient-text">
+          {entry.data.name}
+        </h1>
+        <p transition:name={`project-tags-${entry.id}`}>
           {entry.data.timespan.from}{entry.data.timespan.to && <> - {entry.data.timespan.to}</>},
           {entry.data.tags.join(", ")}
         </p>
       </div>
-      <p>{entry.data.summary}</p>
+      <p transition:name={`project-summary-${entry.id}`}>{entry.data.summary}</p>
       <div class="ctas">
         {
           entry.data.links?.github && (