diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d0849cb..e895409 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,22 @@
 <script>
+    //@ts-nocheck
     let { data } = $props();
+    /** @type {number}*/
+    let number = $state();
+
+    async function roll() {
+		const res = await fetch('/roll');
+		number = await res.json();
+	}
 </script>
 
 <h1>Welcome to SvelteKit, {data.visited ? 'friend' : 'stranger'}</h1>
 <p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+
+<h2 class="text-2xl font-bold">Roll the Dice</h2>
+
+<button class="px-4 py-1 rounded-md bg-blue-500 text-white hover:bg-blue-700 hover:cursor-pointer" onclick={roll}>Roll</button>
+
+{#if number !== undefined}
+    <p>You rolled a {number}</p>
+{/if}
\ No newline at end of file
diff --git a/src/routes/roll/+server.js b/src/routes/roll/+server.js
new file mode 100644
index 0000000..b74fddc
--- /dev/null
+++ b/src/routes/roll/+server.js
@@ -0,0 +1,8 @@
+// @ts-nocheck
+import { json } from "@sveltejs/kit";
+
+export function GET() {
+    const number = Math.floor(Math.random() * 6) + 1;
+
+    return json(number)
+}
\ No newline at end of file