diff --git a/src/routes/+layout.js b/src/routes/+layout.js
new file mode 100644
index 0000000..2fffad0
--- /dev/null
+++ b/src/routes/+layout.js
@@ -0,0 +1,7 @@
+export const load = ({ url }) => {
+  const { pathname } = url
+
+  return {
+    pathname
+  }
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 53c75c9..d1f9f94 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,22 @@
 <script>
   import "../app.scss";
   import Header from "./Header.svelte";
+
+  import { fly } from 'svelte/transition'
+  export let data
 </script>
 
 <div class="app">
   <Header />
 
-  <main>
-    <slot />
-  </main>
+  {#key data.pathname}
+    <main
+      in:fly={{ x: -10, duration: 250, delay: 250 }}
+      out:fly={{ x: 5, duration: 250 }}
+    >
+      <slot />
+    </main>
+  {/key}
 
   <footer>
     <p>