diff --git a/src/routes/estimation/[roomId]/+page.svelte b/src/routes/estimation/[roomId]/+page.svelte
index 3c1bd36..74022cd 100644
--- a/src/routes/estimation/[roomId]/+page.svelte
+++ b/src/routes/estimation/[roomId]/+page.svelte
@@ -1,38 +1,77 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
-    export let data;
+	export let data;
 
-	import { onMount } from 'svelte';
+	import { onMount, afterUpdate } from 'svelte';
 	import UsersList from '../../../components/UsersList.svelte';
 	import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
 	import AverageEstimate from '../../../components/AverageEstimate.svelte';
-	import { connectToWebSocket, sendMessage } from '../estimation.js';
+	import Modal from '../../../components/Modal.svelte';
+
+	import { connectToWebSocket, sendMessage, generateId } from '../estimation.js';
+	import { User } from '../../../../server/classes/user';
+	import { Room } from '../../../../server/classes/room';
+	import { ChangeEstimateMessage } from '../../../../server/classes/messages/ChangeEstimateMessage';
+	import { JoinRoomMessage } from '../../../../server/classes/messages/JoinRoomMessage';
+	import { SelectEstimateMessage } from '../../../../server/classes/messages/SelectEstimateMessage';
 
 	let socket;
-	console.log(data.roomId);
+	let showModal = true;
+	let currentUserIndex = -1;
+	let userEstimateFields: HTMLInputElement[] = [];
+
+	function closeModal() {
+		showModal = false;
+	}
+
+	afterUpdate(() => {
+		// Disable all estimate fields
+		userEstimateFields.forEach((field) => (field.disabled = true));
+
+		// Enable the estimate field for the current user
+		if (currentUserIndex !== -1) {
+			userEstimateFields[currentUserIndex].disabled = false;
+		}
+	});
+
+	function onMessageReceived(message) {
+		console.log(message);
+	};
 
 	onMount(() => {
 		// Connect to WebSocket server with the room ID
-		socket = connectToWebSocket(data.roomId);
+		socket = connectToWebSocket(data.roomId, onMessageReceived);
+
+		// // Initialize the userEstimateFields array
+		// userEstimateFields = Array.from(
+		// 	document.querySelectorAll('.estimate-field')
+		// ) as HTMLInputElement[];
+
+		// groupEstimates();
 	});
 
-	let estimates = [
-		{ name: 'User 1', estimate: 8 },
-		{ name: 'User 2', estimate: 8 },
-		{ name: 'User 3', estimate: 13 },
-		{ name: 'User 4', estimate: 13 },
-		{ name: 'User 5', estimate: 13 },
-		{ name: 'User 6', estimate: 21 },
-		{ name: 'User 7', estimate: 21 },
-		{ name: 'User 8', estimate: 21 },
-		{ name: 'User 9', estimate: 34 },
-		{ name: 'User 10', estimate: 34 },
-		{ name: 'User 11', estimate: 34 },
-		{ name: 'User 12', estimate: 34 },
-		{ name: 'User 13', estimate: 55 },
-		{ name: 'User 14', estimate: 55 },
-		{ name: 'User 15', estimate: 55 }
-	];
+	function joinRoom(name: string) {
+		sendMessage(socket, new JoinRoomMessage(data.roomId, generateId(), name));
+	}
+
+	let estimates = [];
+	// let estimates = [
+	// 	{ name: 'User 1', estimate: 8 },
+	// 	{ name: 'User 2', estimate: 8 },
+	// 	{ name: 'User 3', estimate: 13 },
+	// 	{ name: 'User 4', estimate: 13 },
+	// 	{ name: 'User 5', estimate: 13 },
+	// 	{ name: 'User 6', estimate: 21 },
+	// 	{ name: 'User 7', estimate: 21 },
+	// 	{ name: 'User 8', estimate: 21 },
+	// 	{ name: 'User 9', estimate: 34 },
+	// 	{ name: 'User 10', estimate: 34 },
+	// 	{ name: 'User 11', estimate: 34 },
+	// 	{ name: 'User 12', estimate: 34 },
+	// 	{ name: 'User 13', estimate: 55 },
+	// 	{ name: 'User 14', estimate: 55 },
+	// 	{ name: 'User 15', estimate: 55 }
+	// ];
 
 	// Group users by their estimates
 	let estimateGroups: { [key: number]: string[] } = {};
@@ -50,38 +89,38 @@
 		});
 	}
 
-	function calculateAverageEstimate() {
-		let total = 0;
-		estimates.forEach((estimate) => {
-			if (estimate.estimate !== null) {
-				total += estimate.estimate;
-			}
-		});
-		return total / estimates.length;
-	}
+	// function calculateAverageEstimate() {
+	// 	let total = 0;
+	// 	estimates.forEach((estimate) => {
+	// 		if (estimate.estimate !== null) {
+	// 			total += estimate.estimate;
+	// 		}
+	// 	});
+	// 	return total / estimates.length;
+	// }
 
-	let average = calculateAverageEstimate();
+	// let average = calculateAverageEstimate();
 
-	onMount(() => {
-		groupEstimates();
-	});
-
-	function handleEstimateChange(event: any, user: any) {
-		const { value } = event.target;
-		user.estimate = value !== '' ? Number(value) : null;
-		groupEstimates();
-		average = calculateAverageEstimate();
-	}
+	// function handleEstimateChange(event: any, user: any) {
+	// 	const { value } = event.target;
+	// 	user.estimate = value !== '' ? Number(value) : null;
+	// 	groupEstimates();
+	// 	average = calculateAverageEstimate();
+	// }
 </script>
 
 <h1>Estimation Page</h1>
 
-<UsersList {estimates} {handleEstimateChange} />
+{#if showModal}
+	<Modal {closeModal} {joinRoom} />
+{/if}
+
+<!-- <UsersList {estimates} {handleEstimateChange} bind:this={userEstimateFields} />
 
 {#if Object.keys(estimateGroups).length > 0}
 	<EstimateGroupsList {estimateGroups} />
 	<AverageEstimate {average} />
-{/if}
+{/if} -->
 
 <style>
 	/* CSS styles */