diff --git a/public/room.html b/public/room.html
index 81875d26cef7d10b3b3400b21087975f0b0030de..43111f82ded2c51140865c3a7c01fbfe9580d373 100644
--- a/public/room.html
+++ b/public/room.html
@@ -3,7 +3,84 @@
<head>
<title>Connect4 - Game Room</title>
<style>
- /* Add CSS styles for game room */
+ body {
+ margin: 0;
+ padding: 0;
+ background: linear-gradient(135deg, #2c3e50, #3498db);
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ color: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+#game-container {
+ margin-top: 30px;
+ background-color: #2980b9;
+ padding: 20px;
+ border-radius: 15px;
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
+}
+
+#gameCanvas {
+ display: block;
+ background-color: #2980b9;
+ border-radius: 10px;
+ box-shadow: 0 0 15px rgba(0,0,0,0.4);
+}
+
+#players {
+ margin-top: 10px;
+ font-size: 1.2rem;
+}
+
+#chat {
+ margin-top: 30px;
+ width: 90%;
+ max-width: 700px;
+ background-color: rgba(255, 255, 255, 0.1);
+ padding: 15px;
+ border-radius: 10px;
+}
+
+#messages {
+ max-height: 200px;
+ overflow-y: auto;
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+#messages div {
+ margin: 5px 0;
+ padding: 6px 10px;
+ background-color: rgba(255, 255, 255, 0.15);
+ border-radius: 6px;
+}
+
+#messageInput {
+ padding: 10px;
+ border-radius: 6px;
+ border: none;
+ width: 70%;
+ font-size: 1rem;
+}
+
+button {
+ padding: 10px 20px;
+ border-radius: 6px;
+ background-color: #e67e22;
+ color: white;
+ font-weight: bold;
+ border: none;
+ cursor: pointer;
+ margin-left: 10px;
+ transition: background 0.3s;
+}
+
+button:hover {
+ background-color: #d35400;
+}
+
</style>
</head>
<body>