diff --git a/client/src/lib/Websocket.ts b/client/src/lib/Websocket.ts
index 516b009..4bf0d81 100644
--- a/client/src/lib/Websocket.ts
+++ b/client/src/lib/Websocket.ts
@@ -21,6 +21,7 @@ class ConnectedClient extends EventTarget {
     state: RTCDataChannelState | null = null;
     readyState: number = 0;
     pings: number[] = [];
+    score: number = 0;
 
     constructor(public ws: WebsocketConnection, public name: string) {
         super();
@@ -83,6 +84,9 @@ class ConnectedClient extends EventTarget {
                     this.dispatchEvent(new FastEvent("message", msg.d));
                     messages.update(t => { t.push({ author: this.name, content: msg.d });return t})
                     break;
+                case "start":
+                    gameData.set({ score: 0 });
+                    // break not on purpose
                 default:
                     console.log("MSG", msg);
                     this.dispatchEvent(new FastEvent(msg.t, msg.d));
@@ -266,16 +270,28 @@ export class WebsocketConnection extends EventTarget {
 
     sendMessage(msg: string) {
         if (!this.roomName) return console.log("Not in a room");
-        for(const [, client] of this.fast) {
-            client.send({ t: "msg", d: msg });
-        }
+        this.broadcast({ t: "msg", d: msg });
         messages.update(t => { t.push({ author: this.name, content: msg }); return t });
     }
+    broadcast(data: any) {
+        if (!this.roomName) return console.log("Not in a room");
+        for(const [, client] of this.fast) {
+            client.send(data);
+        }
+    }
 
     createGame(name: string) {
         this.ws.send(JSON.stringify({ t: "create", name: name }));
     }
 
+    startGame() {
+        if (!this.roomName) return console.log("Not in a room");
+        this.broadcast({ t: "start" });
+        for(const [, client] of this.fast) {
+            client.score = 0;
+        }
+    }
+
     join(name: string) {
         this.ws.send(JSON.stringify({ t: "join", name: name }));
     }
@@ -296,4 +312,5 @@ export const listLoading = writable(true);
 export const lastError: Writable<string> = writable("");
 export const room: Writable<{ name: string, host: string } | null> = writable(null);
 export const players: Writable<Map<string, ConnectedClient>> = writable(new Map);
-export const messages: Writable<{ author: string, content: string }[]> = writable([]);
\ No newline at end of file
+export const messages: Writable<{ author: string, content: string }[]> = writable([]);
+export const gameData: Writable<{ score: number }|null> = writable(null);
\ No newline at end of file
diff --git a/client/src/lib/view/components/button.svelte b/client/src/lib/view/components/button.svelte
index 0d60859..13e68ce 100644
--- a/client/src/lib/view/components/button.svelte
+++ b/client/src/lib/view/components/button.svelte
@@ -1,5 +1,8 @@
+<script>
+    export var disabled = false;
+</script>
 
-<button on:click><slot /></button>
+<button on:click {disabled}><slot /></button>
 
 <style>
     button {
@@ -18,4 +21,10 @@
         background-color: #bd5ce6;
         color: #85E65C;
     }
+    button:disabled {
+        background-color: #85E65C;
+        color: #5f3172;
+        text-decoration: line-through;
+        cursor: not-allowed;
+    }
 </style>
\ No newline at end of file
diff --git a/client/src/lib/view/components/jump.svelte b/client/src/lib/view/components/jump.svelte
new file mode 100644
index 0000000..3943a65
--- /dev/null
+++ b/client/src/lib/view/components/jump.svelte
@@ -0,0 +1,105 @@
+<script>
+	const radius = 10;
+	export const color = 'rgb(161, 76, 76)';
+	export const showfaces = false;
+    export const duration = "0.5s"
+</script>
+
+<div class="dice" style="animation-duration: {duration}">
+	<svg width="100" height="100" class="front" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="50" cy="50" r={radius} fill="black" />
+		{/if}
+	</svg>
+	<svg width="100" height="100" class="top" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="33" cy="33" r={radius} fill="black" />
+			<circle cx="66" cy="66" r={radius} fill="black" />
+		{/if}
+	</svg>
+	<svg width="100" height="100" class="left" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="30" cy="30" r={radius} fill="black" />
+			<circle cx="50" cy="50" r={radius} fill="black" />
+			<circle cx="70" cy="70" r={radius} fill="black" />
+		{/if}
+	</svg>
+	<svg width="100" height="100" class="back" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="25" cy="33" r={radius} fill="black" />
+			<circle cx="50" cy="33" r={radius} fill="black" />
+			<circle cx="75" cy="33" r={radius} fill="black" />
+			<circle cx="25" cy="66" r={radius} fill="black" />
+			<circle cx="50" cy="66" r={radius} fill="black" />
+			<circle cx="75" cy="66" r={radius} fill="black" />
+		{/if}
+	</svg>
+	<svg width="100" height="100" class="right" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="33" cy="33" r={radius} fill="black" />
+			<circle cx="33" cy="66" r={radius} fill="black" />
+			<circle cx="66" cy="33" r={radius} fill="black" />
+			<circle cx="66" cy="66" r={radius} fill="black" />
+		{/if}
+	</svg>
+	<svg width="100" height="100" class="bottom" style="background-color: {color}">
+		{#if showfaces}
+			<circle cx="30" cy="30" r={radius} fill="black" />
+			<circle cx="30" cy="70" r={radius} fill="black" />
+			<circle cx="70" cy="30" r={radius} fill="black" />
+			<circle cx="70" cy="70" r={radius} fill="black" />
+			<circle cx="50" cy="50" r={radius} fill="black" />
+		{/if}
+	</svg>
+</div>
+
+<style>
+	svg {
+		border-radius: 5px;
+		border: 1px solid black;
+		box-shadow: 0 0 2px black;
+		position: absolute;
+		backface-visibility: visible;
+	}
+	.front {
+		transform: translateZ(50px);
+	}
+	.top {
+		transform: rotateX(90deg) translateZ(50px);
+	}
+	.bottom {
+		transform: rotateX(-90deg) translateZ(50px);
+	}
+	.left {
+		transform: rotateY(-90deg) translateZ(50px);
+	}
+	.right {
+		transform: rotateY(90deg) translateZ(50px);
+	}
+	.back {
+		transform: rotateY(180deg) translateZ(50px);
+	}
+	.dice {
+		width: 100px;
+		height: 100px;
+		position: relative;
+		transform: rotate3d(1, 0, 0, 0deg);
+		transform-style: preserve-3d;
+		box-sizing: border-box;
+		animation: jump 0.5s;
+		animation-fill-mode: both;
+	}
+	@keyframes jump {
+		0% {
+			transform: rotate3d(1, 0, 0, 0deg) scale(1);
+			animation-timing-function: ease-in;
+		}
+		60% {
+			transform: rotate3d(1, 0, 0, 90deg) scale(1.4);
+			animation-timing-function: ease-out;
+		}
+		100% {
+			transform: rotate3d(1, 0, 0, 180deg) scale(1);
+		}
+	}
+</style>
diff --git a/client/src/lib/view/components/prestartScreen.svelte b/client/src/lib/view/components/prestartScreen.svelte
new file mode 100644
index 0000000..3d37df2
--- /dev/null
+++ b/client/src/lib/view/components/prestartScreen.svelte
@@ -0,0 +1,104 @@
+<script>
+	const radius = 10;
+</script>
+
+<div class="container">
+    <div class="dice">
+        <svg width="100" height="100" class="front">
+            <circle cx="50" cy="50" r={radius} fill="black" />
+        </svg>
+        <svg width="100" height="100" class="top">
+            <circle cx="33" cy="33" r={radius} fill="black" />
+            <circle cx="66" cy="66" r={radius} fill="black" />
+        </svg>
+        <svg width="100" height="100" class="left">
+            <circle cx="30" cy="30" r={radius} fill="black" />
+            <circle cx="50" cy="50" r={radius} fill="black" />
+            <circle cx="70" cy="70" r={radius} fill="black" />
+        </svg>
+        <svg width="100" height="100" class="back">
+            <circle cx="25" cy="33" r={radius} fill="black" />
+            <circle cx="50" cy="33" r={radius} fill="black" />
+            <circle cx="75" cy="33" r={radius} fill="black" />
+            <circle cx="25" cy="66" r={radius} fill="black" />
+            <circle cx="50" cy="66" r={radius} fill="black" />
+            <circle cx="75" cy="66" r={radius} fill="black" />
+        </svg>
+        <svg width="100" height="100" class="right">
+            <circle cx="33" cy="33" r={radius} fill="black" />
+            <circle cx="33" cy="66" r={radius} fill="black" />
+            <circle cx="66" cy="33" r={radius} fill="black" />
+            <circle cx="66" cy="66" r={radius} fill="black" />
+        </svg>
+        <svg width="100" height="100" class="bottom">
+            <circle cx="30" cy="30" r={radius} fill="black" />
+            <circle cx="30" cy="70" r={radius} fill="black" />
+            <circle cx="70" cy="30" r={radius} fill="black" />
+            <circle cx="70" cy="70" r={radius} fill="black" />
+            <circle cx="50" cy="50" r={radius} fill="black" />
+        </svg>
+    </div>
+</div>
+
+<style>
+	svg {
+		border-radius: 5px;
+		border: 1px solid black;
+		box-shadow: 0 0 2px black;
+		position: absolute;
+		backface-visibility: visible;
+	}
+	.front {
+		transform: translateZ(50px);
+		background-color: rgba(255, 0, 0, 0.7);
+	}
+	.top {
+		transform: rotateX(90deg) translateZ(50px);
+		background-color: rgba(255, 255, 0, 0.7);
+	}
+	.bottom {
+		transform: rotateX(-90deg) translateZ(50px);
+		background-color: rgba(0, 255, 0, 0.7);
+	}
+	.left {
+		transform: rotateY(-90deg) translateZ(50px);
+		background-color: rgba(255, 0, 255, 0.7);
+	}
+	.right {
+		transform: rotateY(90deg) translateZ(50px);
+		background-color: rgba(0, 0, 255, 0.7);
+	}
+	.back {
+		transform: rotateY(180deg) translateZ(50px);
+		background-color: rgba(0, 0, 0, 0.7);
+	}
+	.dice {
+		width: 100px;
+		height: 100px;
+		position: relative;
+		transform: rotate3d(1, 0, 0, 0deg);
+		transform-style: preserve-3d;
+		box-sizing: border-box;
+		animation: dice 1.8s 0.7s ease-in-out;
+		animation-fill-mode: both;
+	}
+	@keyframes dice {
+		0% {
+			transform: rotate3d(0, 1, 0, 90deg); /* 3 */
+		}
+		50% {
+			transform: rotate3d(1, 0, 0, -90deg); /* 2 */
+		}
+		100% {
+			transform: rotate3d(1, 0, 0, 0deg); /* 1 */
+		}
+	}
+    .container {
+        width: 100vw;
+        height: 100vh;
+        background-color: #85E65C;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
diff --git a/client/src/lib/view/game/game.svelte b/client/src/lib/view/game/game.svelte
index 8d1286b..2454751 100644
--- a/client/src/lib/view/game/game.svelte
+++ b/client/src/lib/view/game/game.svelte
@@ -1,5 +1,16 @@
 <script>
-    import Waiting from "./waiting.svelte";
+	import { gameData } from '$lib/Websocket';
+	import GameOverlay from './gameOverlay.svelte';
+	import Scene from './scene.svelte';
+	import TimedPrestartScreen from './timedPrestartScreen.svelte';
+	import Waiting from './waiting.svelte';
 </script>
 
-<Waiting />
\ No newline at end of file
+{#if !$gameData}
+	<Waiting />
+{:else}
+	<TimedPrestartScreen />
+	<GameOverlay>
+		<Scene />
+	</GameOverlay>
+{/if}
diff --git a/client/src/lib/view/game/gameOverlay.svelte b/client/src/lib/view/game/gameOverlay.svelte
new file mode 100644
index 0000000..13e960c
--- /dev/null
+++ b/client/src/lib/view/game/gameOverlay.svelte
@@ -0,0 +1,2 @@
+
+<slot />
\ No newline at end of file
diff --git a/client/src/lib/view/game/scene.svelte b/client/src/lib/view/game/scene.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/lib/view/game/timedPrestartScreen.svelte b/client/src/lib/view/game/timedPrestartScreen.svelte
new file mode 100644
index 0000000..361ebf5
--- /dev/null
+++ b/client/src/lib/view/game/timedPrestartScreen.svelte
@@ -0,0 +1,17 @@
+<script>
+    import { onMount } from "svelte";
+    import PrestartScreen from "../components/prestartScreen.svelte";
+
+    let visible = true;
+
+    onMount(() => {
+        let i = setTimeout(() => {
+            visible = false;
+        }, 3000);
+        return () => clearTimeout(i);
+    });
+</script>
+
+{#if visible}
+    <PrestartScreen />
+{/if}
\ No newline at end of file
diff --git a/client/src/lib/view/game/waiting.svelte b/client/src/lib/view/game/waiting.svelte
index a6fcb44..2b83c0b 100644
--- a/client/src/lib/view/game/waiting.svelte
+++ b/client/src/lib/view/game/waiting.svelte
@@ -2,7 +2,9 @@
 	import { connection, messages, players, room } from '$lib/Websocket';
 	import Button from '../components/button.svelte';
 
-	function startGame() {}
+	function startGame() {
+        
+    }
     let content = "";
     function sendMessage() {
         if(!content.length || content.length > 512) return;
@@ -61,7 +63,7 @@
 			{#if $room?.host === $connection?.name}
                 <Button on:click={() => startGame()}>START GAME</Button>
             {:else}
-                <Button>Ready</Button>
+                <Button disabled>WAIT TO START</Button>
 			{/if}
         </div>
 	</main>
diff --git a/client/src/routes/cube.svelte b/client/src/routes/cube.svelte
deleted file mode 100644
index 3f63329..0000000
--- a/client/src/routes/cube.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-    const radius = 10;
-</script>
-
-<div class="dice">
-    <svg width="100" height="100" class="front">
-        <circle cx="50" cy="50" r={radius} fill="black" />
-    </svg>
-    <svg width="100" height="100" class="top">
-        <circle cx="33" cy="33" r={radius} fill="black" />
-        <circle cx="66" cy="66" r={radius} fill="black" />
-    </svg>
-    <svg width="100" height="100" class="left">
-        <circle cx="30" cy="30" r={radius} fill="black" />
-        <circle cx="50" cy="50" r={radius} fill="black" />
-        <circle cx="70" cy="70" r={radius} fill="black" />
-    </svg>
-</div>
-
-<style>
-    svg {
-        border-radius: 5px;
-        border: 1px solid black;
-        box-shadow: 0 0 2px black;
-        position: absolute;
-    }
-    .front {
-        transform: translateZ(50px);
-    }
-    .top {
-        transform: translateZ(50px) rotateX(90deg);
-    }
-    .left {
-        transform: translateZ(50px) rotateY(-90deg);
-    }
-    .dice {
-        margin-top: 20px;
-        margin-left: 20px;
-        position: relative;
-    }
-</style>
\ No newline at end of file