diff --git a/src/routes/hostgame/[gamePin]/+page.svelte b/src/routes/hostgame/[gamePin]/+page.svelte
new file mode 100644
index 0000000..1c47d33
--- /dev/null
+++ b/src/routes/hostgame/[gamePin]/+page.svelte
@@ -0,0 +1,109 @@
+<script>
+	import { onMount } from 'svelte';
+	import { supabase } from '$lib/supabase';
+
+	export let data;
+	const gamePin = data.gamePin;
+
+	let totalQuetions = 3;
+	let currentQuestion = 0;
+
+	let PeopleAwnseredQ = 2;
+	let Totalplayers = 3;
+
+	let questions = [];
+
+	async function NewUpdate(question) {
+		if (question[currentQuestion].playersCompelted == Totalplayers) {
+			currentQuestion++;
+			
+			if (currentQuestion > questions.length) {
+				await supabase
+					.from('games')
+					.update({ gameStatus: `completed` })
+					.eq('gamePIN', Number(data.gamePin));
+				goto(`/results/${gamePin}`);
+			} else {
+				await supabase
+					.from('games')
+					.update({ gameStatus: `${currentQuestion}` })
+					.eq('gamePIN', Number(data.gamePin));
+			}
+
+			PeopleAwnseredQ = 0;
+		} else {
+			PeopleAwnseredQ = question[currentQuestion].playersCompelted;
+		}
+	}
+
+	onMount(async () => {
+		const channel = supabase
+			.channel(`game-${gamePin}`)
+			.on(
+				'postgres_changes',
+				{
+					event: 'UPDATE',
+					schema: 'public',
+					table: 'games',
+					filter: `gamePIN=eq.${gamePin}`
+				},
+				(payload) => {
+					if (payload.new.questions != questions) {
+						questions = payload.new.questions;
+						currentQuestion = Number(payload.new.gameStatus);
+						NewUpdate(questions);
+					}
+				}
+			)
+			.subscribe();
+
+		const { data, error } = await supabase
+			.from('games')
+			.select('players')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+
+		Totalplayers = data.players.length;
+
+		const { data: data2, error: error2 } = await supabase
+			.from('games')
+			.select('questions')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+
+		questions = data2.questions;
+		totalQuetions = questions.length;
+
+		currentQuestion = 0;
+		await supabase
+			.from('games')
+			.update({ gameStatus: currentQuestion.toString() })
+			.eq('gamePIN', Number(gamePin));
+	});
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div
+		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
+	>
+		<h1 class="m-[0] text-7xl">HOSTING</h1>
+		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
+			<h3>Question {currentQuestion + 1} of {totalQuetions} is beeing awnsered</h3>
+			<div class="flex-1 rounded-full border-2 border-gray-600">
+				<div
+					class="h-4 rounded-full bg-green-600 transition-all duration-700"
+					style="width: {(currentQuestion / totalQuetions) * 100}%;"
+				></div>
+			</div>
+		</div>
+		<div class="mt-1 mb-3 flex w-full flex-col rounded-2xl border-2 border-green-400 p-2">
+			<h3>{PeopleAwnseredQ} out of {Totalplayers} have awnsered the quetion</h3>
+			<div class="flex-1 rounded-full border-2 border-gray-600">
+				<div
+					class="h-4 rounded-full bg-green-600 transition-all duration-700"
+					style="width: {(PeopleAwnseredQ / Totalplayers) * 100}%;"
+				></div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/play/[gamePin]/+page.svelte b/src/routes/play/[gamePin]/+page.svelte
new file mode 100644
index 0000000..a0a13c3
--- /dev/null
+++ b/src/routes/play/[gamePin]/+page.svelte
@@ -0,0 +1,142 @@
+<script>
+	import { supabase } from '$lib/supabase';
+	import { onMount } from 'svelte';
+	export let data;
+	const gamePin = data.gamePin;
+	import { page } from '$app/stores';
+	const name = $page.state?.name;
+
+	let question = [];
+	let Selected = null;
+	let currentQuestion = 0;
+	let isWait = true;
+	let gameStatus = '';
+	let players = [];
+
+	onMount(async () => {
+		const channel = supabase
+			.channel(`game-${gamePin}`)
+			.on(
+				'postgres_changes',
+				{
+					event: 'UPDATE',
+					schema: 'public',
+					table: 'games',
+					filter: `gamePIN=eq.${gamePin}`
+				},
+				(payload) => {
+					if (payload.new.gameStatus != gameStatus) {
+						if (payload.new.questions == 'completed') {
+							goto(`/results/${gamePin}`, {
+								state: {
+									name
+								}
+							});
+						} else {
+							gameStatus = payload.new.gameStatus;
+							isWait = false;
+							Selected = null;
+							currentQuestion = Number(gameStatus);
+						}
+					}
+				}
+			)
+			.subscribe();
+
+		const { data, error } = await supabase
+			.from('games')
+			.select('questions')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+
+		if (!error && data) {
+			question = data.questions || [];
+		}
+	});
+
+	async function SubmitAnswer() {
+		isWait = true;
+
+		const { data, error } = await supabase
+			.from('games')
+			.select('players')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+		players = data.players;
+
+		if (question[currentQuestion].correctAnswer == Selected) {
+			players.forEach((player) => {
+				if (player.name == name) {
+					player.score += 1;
+				}
+			});
+			await supabase.from('games').update({ players: players }).eq('gamePIN', Number(gamePin));
+		}
+
+		const { data: data2 } = await supabase
+			.from('games')
+			.select('questions')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+
+		question = data2.questions;
+
+		question[currentQuestion].playersCompelted++;
+		console.log('Players Completed:', question[currentQuestion].playersCompelted);
+
+		await supabase.from('games').update({ questions: question }).eq('gamePIN', Number(gamePin));
+	}
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div
+		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
+	>
+		<div class="mb-5 flex w-full items-center justify-center gap-3">
+			<h3>Question {currentQuestion + 1} of {question.length}</h3>
+			<div class="flex-1 rounded-full border-2 border-gray-600">
+				<div
+					class="h-4 rounded-full bg-green-600 transition-all duration-700"
+					style="width: {(currentQuestion / question.length) * 100}%;"
+				></div>
+			</div>
+		</div>
+		{#if isWait != true}
+			<h1 class="m-[0] text-center text-5xl">
+				Q{currentQuestion + 1}. {question[currentQuestion].name}
+			</h1>
+			<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
+				{#each question[currentQuestion].answers as answer, index}
+					<div class="flex">
+						<input
+							type="radio"
+							id="O{index}"
+							name="question"
+							class="peer sr-only"
+							value={index}
+							bind:group={Selected}
+						/>
+						<label
+							class="w-full cursor-pointer rounded-lg border-3 border-gray-600 bg-gray-600 pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-blue-600 peer-checked:bg-blue-600 hover:border-blue-600"
+							for="O{index}">{answer}</label
+						>
+					</div>
+				{/each}
+			</div>
+			{#if Selected != null}
+				<button
+					class="mt-4 cursor-pointer gap-0 rounded-lg bg-green-700 p-2 text-3xl transition-all hover:scale-110 hover:-rotate-10"
+					onclick={SubmitAnswer}
+					>submit answer
+				</button>
+			{:else}
+				<button
+					class="mt-4 cursor-pointer gap-0 rounded-lg bg-gray-700 p-2 text-3xl transition-all hover:scale-110"
+					>select an answer to submit!
+				</button>
+			{/if}
+		{:else}<h1 class="m-[0] text-center text-5xl">
+				Please wait for everyone else to answer the question.
+			</h1>{/if}
+	</div>
+</div>
diff --git a/src/routes/results/[gamePin]/+page.js b/src/routes/results/[gamePin]/+page.js
new file mode 100644
index 0000000..aea5dc3
--- /dev/null
+++ b/src/routes/results/[gamePin]/+page.js
@@ -0,0 +1,5 @@
+export function load({ params }) {
+	return {
+		gamePin: params.gamePin
+	};
+}
diff --git a/src/routes/results/[gamePin]/+page.svelte b/src/routes/results/[gamePin]/+page.svelte
new file mode 100644
index 0000000..972b002
--- /dev/null
+++ b/src/routes/results/[gamePin]/+page.svelte
@@ -0,0 +1,71 @@
+<script>
+	import { supabase } from '$lib/supabase';
+	import { onMount } from 'svelte';
+	export let data;
+	const gamePin = data.gamePin;
+	import { page } from '$app/stores';
+	let name = '';
+	name = $page.state?.name;
+
+	let players = [];
+	onMount(async () => {
+		const { data } = await supabase
+			.from('games')
+			.select('players')
+			.eq('gamePIN', Number(gamePin))
+			.single();
+
+		players = data.players;
+
+		players.sort((a, b) => b.score - a.score);
+	});
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div
+		class="flex max-w-[700px] flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
+	>
+		<h1 class="mb-3 text-7xl font-bold text-white">Leaderboard</h1>
+
+		{#if players}
+			{#each players as player, i}
+				{#if name == player.name}
+					<div class="flex w-full items-center justify-between rounded-lg bg-green-950 p-2">
+						<div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
+							{i + 1}
+						</div>
+						<div class="w-20 text-white">{player.name}</div>
+						<div class="flex-1 rounded-full border-2 border-gray-600">
+							<div
+								class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
+								style="width: {(player.score / players[0].score) * 100}%;"
+							>
+								<div>{player.score} points</div>
+							</div>
+						</div>
+					</div>
+				{:else}<div class="flex w-full items-center justify-between rounded-lg bg-gray-800 p-2">
+						<div class="mr-2 flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
+							{i + 1}
+						</div>
+						<div class="w-20 text-white">{player.name}</div>
+						<div class="flex-1 rounded-full border-2 border-gray-600">
+							<div
+								class="flex h-6 items-center justify-center rounded-full bg-green-600 transition-all duration-700"
+								style="width: {(player.score / players[0].score) * 100}%;"
+							></div>
+						</div>
+						<div class="flex w-17 justify-end">{player.score} points</div>
+					</div>
+				{/if}
+			{/each}
+		{/if}
+
+		<button
+			class="mt-4 cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			on:click={joinGame}
+		>
+			Go back to the home page!
+		</button>
+	</div>
+</div>