diff --git a/src/components/viewTransitions.svelte b/src/components/viewTransitions.svelte
new file mode 100644
index 0000000..793404e
--- /dev/null
+++ b/src/components/viewTransitions.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { onNavigate } from "$app/navigation";
+  onNavigate((navigation) => {
+    if (!document.startViewTransition) return;
+    return new Promise((resolve) => {
+      document.startViewTransition(async () => {
+        resolve();
+        await navigation.complete;
+      });
+    });
+  });
+</script>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1311282..a3e4098 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,12 +10,14 @@
   // Providers:
   import { ModeWatcher } from "mode-watcher";
   import Sidebar from "@/components/layout/sidebar.svelte";
+  import ViewTransitions from "@/components/viewTransitions.svelte";
 
   // SSR Data:
   let { data, children }: LayoutProps = $props();
 </script>
 
 <ModeWatcher />
+<ViewTransitions />
 <Header githubStars={data?.stars} />
 <Sidebar>
   {@render children?.()}