diff --git a/client/src/lib/backButton.svelte b/client/src/lib/backButton.svelte
new file mode 100644
index 0000000..710ba64
--- /dev/null
+++ b/client/src/lib/backButton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { DEFAULT_TRANSITION_DURATION } from './config';
+
+	export let href: string | undefined = undefined;
+	export let onclick: svelte.JSX.MouseEventHandler<HTMLAnchorElement> | undefined = undefined;
+
+	const duration = DEFAULT_TRANSITION_DURATION;
+</script>
+
+<a
+	transition:fly={{ duration, delay: duration * 0.5, x: -60, opacity: 0 }}
+	{href}
+	on:click={onclick}
+	class="text-black dark:text-white arrow-back fixed top-0 left-0 w-4 h-4 m-4 p-2 transform transition-transform hover:-translate-x-1"
+>
+	<svg width="16" height="16">
+		<line y1="50%" x1="0" y2="50%" x2="100%" stroke="currentColor" stroke-width="2" />
+		<line y1="50%" x1="0" y2="100%" x2="50%" stroke="currentColor" stroke-width="2" />
+		<line y1="50%" x1="0" y2="0" x2="50%" stroke="currentColor" stroke-width="2" />
+	</svg>
+</a>
\ No newline at end of file
diff --git a/client/src/lib/config.ts b/client/src/lib/config.ts
new file mode 100644
index 0000000..e76ff66
--- /dev/null
+++ b/client/src/lib/config.ts
@@ -0,0 +1 @@
+export const DEFAULT_TRANSITION_DURATION = 400;
\ No newline at end of file
diff --git a/client/src/lib/game.svelte b/client/src/lib/game.svelte
index b84ac88..2590e67 100644
--- a/client/src/lib/game.svelte
+++ b/client/src/lib/game.svelte
@@ -3,6 +3,8 @@
 	import { quadOut } from "svelte/easing";
 	import { draw, fade, fly } from "svelte/transition";
 	import Move from "./move.svelte";
+	import { DEFAULT_TRANSITION_DURATION } from "./config";
+	import BackButton from "./backButton.svelte";
 
     export var self: 1 | 2 = 1;
     export var twoPlayer: boolean = false;
@@ -172,7 +174,7 @@
 
     var movesShown = false;
 
-    const duration = 400;
+    const duration = DEFAULT_TRANSITION_DURATION;
     var moveDelayMultiplier = 1;
 
     onMount(() => {
@@ -189,13 +191,7 @@
 
 <svelte:window bind:innerWidth bind:innerHeight on:click={() => hoveredPiece = null} />
 
-<a transition:fly={{ duration, delay: duration * 0.5, x: -60, opacity: 0 }} href="/" on:click={check} class="text-black dark:text-white arrow-back fixed top-0 left-0 w-4 h-4 m-4 p-2 transform transition-transform hover:-translate-x-1">
-    <svg width="16" height="16">
-        <line y1="50%" x1="0" y2="50%" x2="100%" stroke="currentColor" stroke-width="2" />
-        <line y1="50%" x1="0" y2="100%" x2="50%" stroke="currentColor" stroke-width="2" />
-        <line y1="50%" x1="0" y2="0" x2="50%" stroke="currentColor" stroke-width="2" />
-    </svg>
-</a>
+<BackButton href="/" onclick={check}/>
 
 {#if !twoPlayer}
     <!-- I have no idea why x is inverted here -->