diff --git a/src/components/PageLayout.astro b/src/components/PageLayout.astro
index b94b3d4..ed3cd54 100644
--- a/src/components/PageLayout.astro
+++ b/src/components/PageLayout.astro
@@ -18,7 +18,7 @@ const { title } = Astro.props;
             <span>Home</span>
           </a>
           <span>/</span>
-          <h1 class="text-gray-900 dark:text-gray-100 font-semibold">
+          <h1 class="text-gray-900 dark:text-gray-100 font-semibold" transition:name="page-title">
             {title}
           </h1>
         </div>
diff --git a/src/layouts/CategoryLayout.astro b/src/layouts/CategoryLayout.astro
index 3a726fb..60856b8 100644
--- a/src/layouts/CategoryLayout.astro
+++ b/src/layouts/CategoryLayout.astro
@@ -49,7 +49,7 @@ const displayMode = CARD_DISPLAY_PAGES.includes(title) ? "cards" : "text";
     <!-- Breadcrumbs -->
     <Breadcrumbs items={breadcrumbs} />
 
-    <h1 class="text-4xl font-bold mb-8">{title}</h1>
+    <h1 class="text-4xl font-bold mb-8" transition:name="page-title">{title}</h1>
     <div class="prose dark:prose-invert mb-8">
       <p>{description}</p>
       
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 25ba020..1d8e4ba 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,6 +3,7 @@
 // The ESLint rule can't detect their usage in Astro templates
 import { FaFlickr, FaGithub, FaLinkedin } from "react-icons/fa";
 import { SiBluesky, SiMastodon } from "react-icons/si";
+import { ViewTransitions } from "astro:transitions";
 import "../styles/global.css";
 
 // These props are used directly in the template
@@ -32,10 +33,12 @@ const { title = "Oliver Steele", description = "Making, teaching, writing, playi
         <meta property="og:site_name" content="Oliver Steele" />
         <meta name="robots" content="index, follow" />
         <meta name="author" content="Oliver Steele" />
+        <ViewTransitions />
     </head>
     <body class="flex flex-col min-h-full">
         <header
             class="fixed top-0 w-full bg-white/80 dark:bg-black/80 backdrop-blur-sm z-[100] border-b border-gray-200 dark:border-gray-800"
+            transition:persist
         >
             <nav
                 class="max-w-4xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -77,7 +80,7 @@ const { title = "Oliver Steele", description = "Making, teaching, writing, playi
             <slot />
         </main>
 
-        <footer class="mt-auto border-t border-gray-200 dark:border-gray-800">
+        <footer class="mt-auto border-t border-gray-200 dark:border-gray-800" transition:persist>
             <div class="max-w-5xl mx-auto px-4 sm:px-6 py-8">
                 <div class="flex flex-col items-center gap-4">
                     <div class="flex items-center gap-6">
diff --git a/src/pages/products/[slug].astro b/src/pages/products/[slug].astro
index 1c469a8..cb4a29b 100644
--- a/src/pages/products/[slug].astro
+++ b/src/pages/products/[slug].astro
@@ -18,7 +18,7 @@ if (!product) {
 <Layout title={product.title}>
   <div class="max-w-4xl mx-auto p-8">
     <div class="mb-12">
-      <h1 class="text-4xl font-bold mb-4">{product.title}</h1>
+      <h1 class="text-4xl font-bold mb-4" transition:name={`product-title-${slug}`}>{product.title}</h1>
       <div class="flex gap-4 text-sm text-gray-600 dark:text-gray-400">
         {product.year && (
           <div class="flex items-center gap-2">
@@ -40,6 +40,7 @@ if (!product) {
           alt={product.title}
           width={600}
           height={400}
+          transition:name={`product-image-${slug}`}
           class="w-full object-contain bg-gray-50 dark:bg-gray-900"
         />
       </div>
diff --git a/src/pages/products/index.astro b/src/pages/products/index.astro
index cefadcd..f7e9276 100644
--- a/src/pages/products/index.astro
+++ b/src/pages/products/index.astro
@@ -13,7 +13,9 @@ import Layout from "@/layouts/Layout.astro";
       </p>
 
       <div class="grid gap-6 md:grid-cols-2">
-        {products.map((product) => (
+        {products.map((product) => {
+          const slug = product.href.split('/').pop();
+          return (
           <a
             href={product.href}
             class="group block p-6 rounded-lg border border-gray-200 hover:border-gray-300
@@ -27,12 +29,14 @@ import Layout from "@/layouts/Layout.astro";
                   alt={product.title}
                   width={300}
                   height={200}
+                  transition:name={`product-image-${slug}`}
                   class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                 />
               </div>
             )}
             <div class="flex justify-between items-start mb-2">
               <h2
+                transition:name={`product-title-${slug}`}
                 class="text-xl font-semibold group-hover:text-blue-600
                 dark:group-hover:text-blue-400 transition-colors"
               >
@@ -57,7 +61,7 @@ import Layout from "@/layouts/Layout.astro";
               {product.description}
             </p>
           </a>
-        ))}
+        )})}
       </div>
     </div>
   </PageLayout>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 668247a..a80792f 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -310,6 +310,7 @@ const PRIMARY_CATEGORY_ORDER = ["software", "professional", "creative", "topics"
               <div class="w-full">
                 <a
                   href={category.href}
+                  transition:name={`category-${category.id.toLowerCase()}`}
                   class={`group p-6 rounded-xl bg-[size:150%] bg-gradient-to-br ${category.colorClasses.background} ${category.colorClasses.hover}
                     transition-all duration-300 ease-out
                     hover:scale-[1.02] hover:shadow-lg dark:hover:shadow-black/30 hover:bg-right-bottom
diff --git a/src/pages/software.astro b/src/pages/software.astro
index d46627d..15dba5d 100644
--- a/src/pages/software.astro
+++ b/src/pages/software.astro
@@ -188,6 +188,7 @@ const icons = {
                     MainCategories.map((category) => (
                         <a
                             href={category.href}
+                            transition:name={`category-${category.id}`}
                             class={`group relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300
             bg-gradient-to-br from-${category.color}-50 via-${category.color}-100/30 to-white
             dark:from-${category.color}-900/30 dark:via-${category.color}-800/20 dark:to-gray-900
@@ -230,6 +231,7 @@ const icons = {
                     DevelopmentResearchCategories.map((category) => (
                         <a
                             href={category.href}
+                            transition:name={`category-${category.id}`}
                             class={`group relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300
             bg-gradient-to-br from-${category.color}-50 via-${category.color}-100/30 to-white
             dark:from-${category.color}-900/30 dark:via-${category.color}-800/20 dark:to-gray-900
@@ -272,6 +274,7 @@ const icons = {
                     EcosystemTools.map((category) => (
                         <a
                             href={category.href}
+                            transition:name={`category-${category.id}`}
                             class={`group relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300
             bg-gradient-to-br from-${category.color}-50 via-${category.color}-100/30 to-white
             dark:from-${category.color}-900/30 dark:via-${category.color}-800/20 dark:to-gray-900
@@ -314,6 +317,7 @@ const icons = {
                     TopicCategories.map((category) => (
                         <a
                             href={category.href}
+                            transition:name={`category-${category.id}`}
                             class={`group relative overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300
             bg-gradient-to-br from-${category.color}-50 via-${category.color}-100/30 to-white
             dark:from-${category.color}-900/30 dark:via-${category.color}-800/20 dark:to-gray-900
