diff --git a/frontend/src/lib/components/PageTransition.svelte b/frontend/src/lib/components/PageTransition.svelte
new file mode 100644
index 0000000..4f7de6e
--- /dev/null
+++ b/frontend/src/lib/components/PageTransition.svelte
@@ -0,0 +1,14 @@
+<script>
+	import { fly } from 'svelte/transition';
+	export let url = '';
+</script>
+
+{#key url}
+	<div
+		in:fly={{ x: -5, duration: 500, delay: 500 }}
+		out:fly={{ x: 5, duration: 500 }}
+		class="absolute bg-inherit w-full"
+	>
+		<slot />
+	</div>
+{/key}
diff --git a/frontend/src/routes/+layout.js b/frontend/src/routes/+layout.js
new file mode 100644
index 0000000..25b03d3
--- /dev/null
+++ b/frontend/src/routes/+layout.js
@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export const load = async ({ url }) => {
+	return {
+		url: url.pathname
+	};
+};
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 9c092a1..ec662d8 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,3 +1,9 @@
+<script lang="ts">
+	import PageTransition from '$lib/components/PageTransition.svelte';
+
+	export let data: { url: string };
+</script>
+
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" />
 <link
@@ -5,7 +11,9 @@
 	rel="stylesheet"
 />
 
-<slot />
+<PageTransition url={data.url}>
+	<slot />
+</PageTransition>
 
 <style windi:preflights:global windi:safelist:global>
 	:global(html) {