diff --git a/client/.prettierrc b/client/.prettierrc
index ff2677e..ab96ecc 100644
--- a/client/.prettierrc
+++ b/client/.prettierrc
@@ -1,6 +1,7 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100
-}
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100
+}
\ No newline at end of file
diff --git a/client/src/lib/backButton.svelte b/client/src/lib/backButton.svelte
new file mode 100644
index 0000000..0c77f27
--- /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..bbe1e5f 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 -->