diff --git a/src/lib/components/transition/Transition.svelte b/src/lib/components/transition/Transition.svelte
new file mode 100644
index 0000000..5ad787a
--- /dev/null
+++ b/src/lib/components/transition/Transition.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { router } from 'tinro';
+  import { fade } from 'svelte/transition';
+</script>
+
+{#key $router.path}
+  <div in:fade={{ duration: 700 }} class="h-full w-full">
+    <slot />
+  </div>
+{/key}
diff --git a/src/lib/router/Router.svelte b/src/lib/router/Router.svelte
index ea68882..3390d71 100644
--- a/src/lib/router/Router.svelte
+++ b/src/lib/router/Router.svelte
@@ -1,15 +1,19 @@
 <script lang="ts">
-  import { Route } from 'tinro';
+  import { Route, router } from 'tinro';
+  router.mode.hash();
 
   import Index from '$lib/router/routes/Index.svelte';
   import CallTauri from '$router/routes/CallTauri.svelte';
   import HashString from '$router/routes/HashString.svelte';
   import Versions from '$router/routes/Versions.svelte';
+  import Transition from '$lib/components/transition/Transition.svelte';
 </script>
 
 <!-- Fix for linting errors: ->
    https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
-<Route path="/"><Index /></Route>
-<Route path="/call-tauri"><CallTauri /></Route>
-<Route path="/hash-string"><HashString /></Route>
-<Route path="/versions"><Versions /></Route>
+<Transition>
+  <Route path="/"><Index /></Route>
+  <Route path="/call-tauri"><CallTauri /></Route>
+  <Route path="/hash-string"><HashString /></Route>
+  <Route path="/versions"><Versions /></Route>
+</Transition>