diff --git a/client/src/pages/room/[slug].jsx b/client/src/pages/room/[slug].jsx
index 6bfde31..5a4643a 100644
--- a/client/src/pages/room/[slug].jsx
+++ b/client/src/pages/room/[slug].jsx
@@ -1,6 +1,21 @@
-import React from 'react'
+import { useSocket } from '@/context/SocketProvider';
+import React, { useCallback, useEffect } from 'react'
 
 const RoomPage = () => {
+    const socket = useSocket();
+
+    const handleUserJoined = useCallback(({ email, id }) => {
+        console.log(`Email ${email} joined the room!`);
+    }, [])
+
+    useEffect(() => {
+        socket.on("user:joined", handleUserJoined);
+
+        return () => {
+            socket.off("user:joined", handleUserJoined);
+        };
+    }, [socket, handleUserJoined]);
+
     return (
         <h1>RoomPage</h1>
     )
diff --git a/server/index.js b/server/index.js
index 97b2dbd..b485a59 100644
--- a/server/index.js
+++ b/server/index.js
@@ -1,4 +1,4 @@
-const { Server, Socket } = require('socket.io');
+const { Server} = require('socket.io');
 
 const io = new Server(8080, {
     cors: true
@@ -11,13 +11,16 @@ const socketToEmail = new Map();
 io.on("connection", (socket) => {
     console.log(`Socket Connected: ${socket.id}`);
 
-    socket.on('room:join', data => {
+    socket.on("room:join", data => {
         const { email, room } = data;
         emailToSocket.set(email, socket.id);
         socketToEmail.set(socket.id, email);
 
+        socket.join(room);
+        io.to(room).emit("user:joined", { email, id: socket.id });
+
         // emits a 'room:joined' event back to the client 
         // that just joined the room.
-        io.to(socket.id).emit('room:join', data);
+        io.to(socket.id).emit("room:join", data);
     })
 })
\ No newline at end of file