diff --git a/src/components/Nav/Navbar.astro b/src/components/Nav/Navbar.astro
index 5d19f2e1..f59caa93 100644
--- a/src/components/Nav/Navbar.astro
+++ b/src/components/Nav/Navbar.astro
@@ -4,7 +4,7 @@ import NavigationMenu from "./NavigationMenu.astro";
 import ThemeSwitcher from "./ThemeSwitcher.astro";
 ---
 
-<header data-header="collapsed" class="group fixed top-0 z-50 w-full px-5 py-3">
+<header data-header="collapsed" transition:name="header" class="group fixed top-0 z-50 w-full px-5 py-3">
   <div
     class="relative mx-auto flex w-full max-w-screen-xl flex-wrap items-center justify-between lg:flex-nowrap lg:items-center"
   >
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 0ed5a896..926eba7d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -62,6 +62,10 @@ const { title, description = "Lukas' Homepage" } = Astro.props;
         animation-duration: 500ms;
       }
 
+      ::view-transition-group(header) {
+        z-index: 999;
+      }
+
       @layer base {
         :root {
           --background: 0 0% 100%;