diff --git a/html/index.html b/html/index.html
index 53a35a5..883840f 100644
--- a/html/index.html
+++ b/html/index.html
@@ -45,8 +45,13 @@ <h1>The Word Search Game</h1>
         </div>
         <div id="gameListSection">
 
-        </div>
     </div>
+
+    <!-- Timer section -->
+    <div id="timerSection">
+        <h2>Timer: <span id="timer">30</span> seconds</h2>
+    </div>
+
     <!--Grid table-->
     
     <div>
@@ -58,16 +63,44 @@ <h1>The Word Search Game</h1>
 </body>
 <script>
     var socket = new WebSocket("ws://"+ window.location.hostname+":9105");
+    
+    class Player
+    {
+        nick="";
+        score=0;
+        status;
+        totalPoints=0;
+        gameWins=0;
+    }
 
+    class UserEvent
+    {
+        gameId=-1;
+        player="";
+        cell=-1;
+        action=-1;
+    }
 
+    
+    var gameId="";
+    var player=new Player();
     socket.onopen = function(evt) {
         console.log("Open");
         requestGameList();
     };
 
     socket.onmessage = function(evt) {
-        console.log("Message received: " + evt.data);
+       // console.log("Message received: " + evt.data);
         var messageData = JSON.parse(evt.data);
+        console.log("Message received: " + messageData);
+        const type= messageData.type;
+        if(type==="JoinGame")
+        {
+            player= JSON.parse(messageData.player);
+            game = JSON.parse(messageData.game);
+            gameId= gameId+messageData.gameId;
+            console.log(gameId);
+        }
 
     };
 
@@ -86,25 +119,6 @@ <h1>The Word Search Game</h1>
     };
 
     
-    var gameId;
-    var player;
-
-    class Player
-    {
-        nick="";
-        score=0;
-        //status;
-        totalPoints=0;
-        gameWins=0;
-    }
-
-    class UserEvent
-    {
-        gameId=-1;
-        player="";
-        cell=-1;
-        action=-1;
-    }
 
     function requestGameList() {
         var data = { type: "RequestGameList" };
@@ -155,6 +169,7 @@ <h1>The Word Search Game</h1>
         };
 
         socket.send(JSON.stringify(data));
+        console.log(JSON.stringify(data));
     }
 
     // replace leaveGame function with one that sends a WebSocket message
@@ -178,7 +193,7 @@ <h1>The Word Search Game</h1>
     });
 
 
-    //generate 35*35 grid
+    //generate 25*25 grid
 
     //too big may have to do smaller grid or smaller cells
     function generateGrid()
@@ -187,11 +202,11 @@ <h1>The Word Search Game</h1>
         const tblBody = document.createElement("tbody");
         //create cells
 
-        for(let i=0,k=0;i<35;i++)
+        for(let i=0,k=0;i<25;i++)
         {
             //create rows
             const row = document.createElement("tr");
-            for(let j=0;j<35;j++,k++)
+            for(let j=0;j<25;j++,k++)
 
             {
                 //create cells and add it to the row
@@ -249,6 +264,53 @@ <h1>The Word Search Game</h1>
         };
         socket.send(JSON.stringify(U));
         console.log(JSON.stringify(U));
+
+        resetTimer();
+    }
+
+    // Timer countdown logic
+    var timerElement = document.getElementById('timer');
+    var timerInterval;
+
+    function startTimer() {
+        var timeLeft = 30; // 30 seconds
+        updateTimerDisplay(timeLeft);
+
+        timerInterval = setInterval(function() {
+            timeLeft--;
+            updateTimerDisplay(timeLeft);
+            if (timeLeft === 0) {
+                clearInterval(timerInterval);
+                // Handle timer expiration (e.g., reset timer, end game)
+                highlightRandomWord();
+            }
+        }, 1000);
+    }
+
+    function updateTimerDisplay(time) {
+            timerElement.textContent = time;
     }
+    function resetTimer() {
+        clearInterval(timerInterval);
+        startTimer();
+    }
+
+    // Call startTimer() when the page loads or when a player selects a letter
+    window.onload = startTimer;
+
+    function highlightRandomWord() {
+        // Get a random word index
+        var randomIndex = Math.floor(Math.random() * wordGrid.length);
+        var randomWord = wordGrid[randomIndex];
+
+        // Highlight the first letter of the random word
+        var firstLetterId = `${randomIndex}-0`; // Assuming words are left-aligned
+        var firstLetterCell = document.getElementById(firstLetterId);
+        firstLetterCell.style.backgroundColor = "yellow";
+    }
+
+
+
+
 </script>
 
diff --git a/html/style_lobby.css b/html/style_lobby.css
index 368aaed..8510c96 100644
--- a/html/style_lobby.css
+++ b/html/style_lobby.css
@@ -106,3 +106,20 @@ select {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
+
+/* Add styles for the timer section */
+#timerSection {
+    margin-top: 20px; /* Adjust the margin as needed */
+    padding: 10px; /* Add padding for space around the timer */
+    border: 2px solid #ccc; /* Add a border around the timer section */
+    border-radius: 5px; /* Add rounded corners to the border */
+    text-align: center; /* Center the timer text */
+}
+
+/* Add styles for the timer text */
+#timer {
+    font-size: 24px; /* Change the font size of the timer text */
+    color: #333; /* Change the color of the timer text */
+    font-weight: bold; /* Make the timer text bold */
+}
+
diff --git a/src/main/java/uta/cse3310/App.java b/src/main/java/uta/cse3310/App.java
index 610c812..96e9e18 100644
--- a/src/main/java/uta/cse3310/App.java
+++ b/src/main/java/uta/cse3310/App.java
@@ -375,7 +375,10 @@ public void messageHandler(Gson gson, String jsonString, WebSocket conn)
                 json=gson.toJson(G);
                 //add game to json Object to send back
                 jsonObject.addProperty("game",json);
+                
+                jsonObject.addProperty("gameId",G.getGameID());
                 //send back to all connections
+
                 broadcast(jsonObject.toString());
             break;