diff --git a/apps/frontend/src/screens/Game.tsx b/apps/frontend/src/screens/Game.tsx
index b6f8c0e4..553eead3 100644
--- a/apps/frontend/src/screens/Game.tsx
+++ b/apps/frontend/src/screens/Game.tsx
@@ -23,6 +23,7 @@ export const GAME_ADDED = 'game_added';
 export const USER_TIMEOUT = 'user_timeout';
 export const GAME_TIME = 'game_time';
 export const GAME_ENDED = 'game_ended';
+export const LIVE_COUNTER = 'live_counter';
 export enum Result {
   WHITE_WINS = 'WHITE_WINS',
   BLACK_WINS = 'BLACK_WINS',
@@ -33,7 +34,6 @@ export interface GameResult {
   by: string;
 }
 
-
 const GAME_TIME_MS = 10 * 60 * 1000;
 
 import { useRecoilValue, useSetRecoilState } from 'recoil';
@@ -60,13 +60,10 @@ export const Game = () => {
   const [added, setAdded] = useState(false);
   const [started, setStarted] = useState(false);
   const [gameMetadata, setGameMetadata] = useState<Metadata | null>(null);
-  const [result, setResult] = useState<
-    GameResult
-    | null
-  >(null);
+  const [result, setResult] = useState<GameResult | null>(null);
   const [player1TimeConsumed, setPlayer1TimeConsumed] = useState(0);
   const [player2TimeConsumed, setPlayer2TimeConsumed] = useState(0);
-
+  const [counter, setCounter] = useState(0);
   const setMoves = useSetRecoilState(movesAtom);
   const userSelectedMoveIndex = useRecoilValue(userSelectedMoveIndexAtom);
   const userSelectedMoveIndexRef = useRef(userSelectedMoveIndex);
@@ -85,12 +82,24 @@ export const Game = () => {
     if (!socket) {
       return;
     }
+
+    socket.send(JSON.stringify({ type: LIVE_COUNTER }));
+  }, [socket]);
+
+  useEffect(() => {
+    if (!socket) {
+      return;
+    }
+
     socket.onmessage = function (event) {
       const message = JSON.parse(event.data);
       switch (message.type) {
         case GAME_ADDED:
           setAdded(true);
           break;
+        case LIVE_COUNTER:
+          setCounter(message.payload.counter);
+          break;
         case INIT_GAME:
           setBoard(chess.board());
           setStarted(true);
@@ -130,8 +139,12 @@ export const Game = () => {
           break;
 
         case GAME_ENDED:
-          const wonBy = message.payload.status === 'COMPLETED' ? 
-            message.payload.result !== 'DRAW' ? 'CheckMate' : 'Draw' : 'Timeout';
+          const wonBy =
+            message.payload.status === 'COMPLETED'
+              ? message.payload.result !== 'DRAW'
+                ? 'CheckMate'
+                : 'Draw'
+              : 'Timeout';
           setResult({
             result: message.payload.result,
             by: wonBy,
@@ -147,8 +160,7 @@ export const Game = () => {
             blackPlayer: message.payload.blackPlayer,
             whitePlayer: message.payload.whitePlayer,
           });
-          
-        
+
           break;
 
         case USER_TIMEOUT:
@@ -268,9 +280,9 @@ export const Game = () => {
                       </div>
                     )}
                   </div>
-                  <div>
+                  <div className="flex flex-col md:flex-row">
                     <div
-                      className={`w-full flex justify-center text-white`}
+                      className={`w-full flex justify-center text-white ml-2`}
                     >
                       <ChessBoard
                         started={started}
@@ -284,6 +296,53 @@ export const Game = () => {
                         board={board}
                       />
                     </div>
+                    {!started && (
+                      <div className="flex justify-start flex-col items-center mt-4 p-3">
+                        {counter - 1 !== 0 ? (
+                          <>
+                            <p className="text-3xl text-center font-bold text-white mb-4">
+                              <span className="text-yellow-500 text-3xl drop-shadow-[0_1.5px_1.5px_rgba(0,0,0,0.8)] underline underline-offset-4">
+                                {counter}
+                              </span>
+                              {counter == 1 ? ' Player is ' : " Player's are "}
+                              currently online.
+                            </p>
+                            <p className="text-center text-gray-200">
+                              Click on{' '}
+                              <span className="text-green-500">Play</span> to
+                              start a game.
+                            </p>
+                          </>
+                        ) : (
+                          <p className="text-3xl text-center font-bold text-white ">
+                            <span className="text-red-700 text-3xl drop-shadow-[0_1.5px_1.5px_rgba(0,0,0,0.8)]">
+                              No
+                            </span>{' '}
+                            players are currently online :(
+                          </p>
+                        )}
+
+                        <div className=" mt-4 flex">
+                          {added ? (
+                            <div className="text-white">Waiting</div>
+                          ) : (
+                            gameId === 'random' && (
+                              <Button
+                                onClick={() => {
+                                  socket.send(
+                                    JSON.stringify({
+                                      type: INIT_GAME,
+                                    }),
+                                  );
+                                }}
+                              >
+                                Play
+                              </Button>
+                            )
+                          )}
+                        </div>
+                      </div>
+                    )}
                   </div>
                   {started && (
                     <div className="mt-4 flex justify-between">
@@ -305,27 +364,6 @@ export const Game = () => {
               </div>
             </div>
             <div className="rounded-md bg-brown-500 overflow-auto h-[90vh] mt-10">
-              {!started && (
-                <div className="pt-8 flex justify-center w-full">
-                  {added ? (
-                    <div className="text-white">Waiting</div>
-                  ) : (
-                    gameId === 'random' && (
-                      <Button
-                        onClick={() => {
-                          socket.send(
-                            JSON.stringify({
-                              type: INIT_GAME,
-                            }),
-                          );
-                        }}
-                      >
-                        Play
-                      </Button>
-                    )
-                  )}
-                </div>
-              )}
               <div>
                 <MovesTable />
               </div>
diff --git a/apps/ws/src/GameManager.ts b/apps/ws/src/GameManager.ts
index 02703681..ad52db6d 100644
--- a/apps/ws/src/GameManager.ts
+++ b/apps/ws/src/GameManager.ts
@@ -11,6 +11,7 @@ import {
   GAME_ALERT,
   GAME_ADDED,
   GAME_ENDED,
+  LIVE_COUNTER,
 } from './messages';
 import { Game, isPromoting } from './Game';
 import { db } from './db';
@@ -87,12 +88,24 @@ export class GameManager {
         }
       }
 
+      if (message.type === LIVE_COUNTER) {
+        let counter = this.users.length;
+        user.socket.send(
+          JSON.stringify({
+            type: LIVE_COUNTER,
+            payload: {
+              counter: counter,
+            },
+          }),
+        );
+      }
+
       if (message.type === MOVE) {
         const gameId = message.payload.gameId;
         const game = this.games.find((game) => game.gameId === gameId);
         if (game) {
           game.makeMove(user, message.payload.move);
-          if (game.result)  {
+          if (game.result) {
             this.removeGame(game.gameId);
           }
         }
@@ -127,23 +140,25 @@ export class GameManager {
           return;
         }
 
-        if(gameFromDb.status !== GameStatus.IN_PROGRESS) {
-          user.socket.send(JSON.stringify({
-            type: GAME_ENDED,
-            payload: {
-              result: gameFromDb.result,
-              status: gameFromDb.status,
-              moves: gameFromDb.moves,
-              blackPlayer: {
-                id: gameFromDb.blackPlayer.id,
-                name: gameFromDb.blackPlayer.name,
-              },
-              whitePlayer: {
-                id: gameFromDb.whitePlayer.id,
-                name: gameFromDb.whitePlayer.name,
+        if (gameFromDb.status !== GameStatus.IN_PROGRESS) {
+          user.socket.send(
+            JSON.stringify({
+              type: GAME_ENDED,
+              payload: {
+                result: gameFromDb.result,
+                status: gameFromDb.status,
+                moves: gameFromDb.moves,
+                blackPlayer: {
+                  id: gameFromDb.blackPlayer.id,
+                  name: gameFromDb.blackPlayer.name,
+                },
+                whitePlayer: {
+                  id: gameFromDb.whitePlayer.id,
+                  name: gameFromDb.whitePlayer.name,
+                },
               },
-            }
-          }));
+            }),
+          );
           return;
         }
 
@@ -152,9 +167,9 @@ export class GameManager {
             gameFromDb?.whitePlayerId!,
             gameFromDb?.blackPlayerId!,
             gameFromDb.id,
-            gameFromDb.startAt
+            gameFromDb.startAt,
           );
-          game.seedMoves(gameFromDb?.moves || [])
+          game.seedMoves(gameFromDb?.moves || []);
           this.games.push(game);
           availableGame = game;
         }
diff --git a/apps/ws/src/messages.ts b/apps/ws/src/messages.ts
index 54e5bde3..9da91d0c 100644
--- a/apps/ws/src/messages.ts
+++ b/apps/ws/src/messages.ts
@@ -10,3 +10,4 @@ export const GAME_ENDED = 'game_ended';
 export const GAME_ALERT = 'game_alert';
 export const GAME_ADDED = 'game_added';
 export const GAME_TIME = 'game_time';
+export const LIVE_COUNTER = 'live_counter';