diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 1eba12d..67bfd62 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -37,9 +37,9 @@ const description = Astro.props.frontmatter?.description
 
   </head>
   <body class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-    <Header client:only="react" url={Astro.url} />
+    <Header client:load url={Astro.url} />
     <slot />
     <Footer />
     <CookieConsent />
   </body>
-</html> 
\ No newline at end of file
+</html> 
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index e3c9253..24ad814 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -9,7 +9,7 @@ const { hasSidebar } = Astro.locals.starlightRoute
 ---
 <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;700&display=swap" rel="stylesheet" />
 <div class="font-[Onest] bg-xahau-background min-h-screen flex flex-col">
-  <Header client:only="react" url={Astro.url} />
+  <Header client:load url={Astro.url} />
   <div class="page-content flex-1 container mx-auto p-6">
     <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
       <div>
@@ -86,4 +86,4 @@ const { hasSidebar } = Astro.locals.starlightRoute
 			}
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/styles/global.css b/src/styles/global.css
index 2c196cb..067466c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -17,3 +17,10 @@ footer {
 * {
   -webkit-font-smoothing: antialiased;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition {
+    /* biome-ignore lint: noUnknownProperty */
+    navigation: auto;
+  }
+}
