diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a7785f7..2719d7a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,11 +13,26 @@
   import type { LayoutData } from './$types';
 
   import { enhance } from '$app/forms';
+  import { onNavigate } from '$app/navigation';
   import { page } from '$app/stores';
 
   export let data: LayoutData;
 
   let assistantButton: HTMLButtonElement | null = null;
+
+  onNavigate((navigation) => {
+    if (!document.startViewTransition) {
+      return Promise.resolve();
+    }
+
+    return new Promise((resolve) => {
+      document.startViewTransition(async () => {
+        resolve();
+
+        await navigation.complete;
+      });
+    });
+  });
 </script>
 
 <svelte:head>
@@ -41,7 +56,7 @@
   }}
 />
 
-<header class="bg-white border-gray-200 px-4 lg:px-6 py-2.5">
+<header class="bg-white border-gray-200 px-4 lg:px-6 py-2.5" style="view-transition-name: header;">
   <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
     <a
       href="/"