diff --git a/api/helpers/ find-spectatable-games.js b/api/helpers/ find-spectatable-games.js
index 27a9c1abf..499fdafd6 100644
--- a/api/helpers/ find-spectatable-games.js	
+++ b/api/helpers/ find-spectatable-games.js	
@@ -14,8 +14,17 @@ module.exports = {
       const games = await Game.find({
         status: gameService.GameStatus.STARTED,
         updatedAt: { '>=': recentUpdateThreshhold },
+      }).populate('players');
+
+      // Map players to include only id and username
+      const transformedGames = games.map(game => {
+        game.players = game.players.map(player => ({
+          id: player.id,
+          username: player.username,
+        }));
+        return game;
       });
-      return exits.success(games);
+      return exits.success(transformedGames);
     } catch (err) {
       return exits.error(err);
     }
diff --git a/api/hooks/customGameHook/index.js b/api/hooks/customGameHook/index.js
index afac7416b..75426bc6c 100644
--- a/api/hooks/customGameHook/index.js
+++ b/api/hooks/customGameHook/index.js
@@ -30,24 +30,37 @@ module.exports = function gameHook() {
     },
     findOpenGames: function () {
       return new Promise(function (resolve, reject) {
-        const recentUpdateThreshhold = dayjs.utc().subtract(1, 'day')
+        const recentUpdateThreshold = dayjs.utc().subtract(1, 'day')
           .toDate();
+    
         Game.find({
           status: gameService.GameStatus.CREATED,
-          createdAt: { '>=': recentUpdateThreshhold },
+          createdAt: { '>=': recentUpdateThreshold },
         })
-          .populate('players')
+          .populate('players') // Populate the players array
           .exec(function (error, games) {
             if (error) {
               return reject(error);
-            } else if (!games) {
+            } else if (!games || games.length === 0) {
               return reject({ message: "Can't find games" });
             }
-            const openGames = games.filter(({ players }) => players.length < 2);
-            return resolve(openGames);
+    
+            // Filter games with fewer than 2 players and transform the players array
+            const openGames = games
+              .filter(({ players }) => players.length < 2) // Keep games with fewer than 2 players
+              .map((game) => {
+                // Transform players array to include only id and username
+                game.players = game.players.map((player) => ({
+                  id: player.id, // Use 'id' since Sails.js generates it automatically
+                  username: player.username,
+                }));
+                return game; // Return the updated game object
+              });
+    
+            return resolve(openGames); // Resolve with transformed open games
           });
       });
-    },
+    },    
     findGame: function (id) {
       return new Promise(function (resolve, reject) {
         Game.findOne(id)
diff --git a/src/routes/home/HomeView.vue b/src/routes/home/HomeView.vue
index 3b2c478fb..2ee07b7b0 100644
--- a/src/routes/home/HomeView.vue
+++ b/src/routes/home/HomeView.vue
@@ -67,6 +67,7 @@
                     :game-id="game.id"
                     :status="game.status"
                     :num-players="game.numPlayers"
+                    :players="game.players"
                     :is-ranked="game.isRanked"
                     @error="handleSubscribeError(game.id, $event)"
                   />
@@ -87,6 +88,7 @@
                     :p1ready="game.p1Ready ? 1 : 0"
                     :game-id="game.id"
                     :status="game.status"
+                    :players="game.players"
                     :num-players="game.numPlayers"
                     :is-ranked="game.isRanked"
                     :is-spectatable="true"
diff --git a/src/routes/home/components/GameListItem.vue b/src/routes/home/components/GameListItem.vue
index 36802bf2f..86312d654 100644
--- a/src/routes/home/components/GameListItem.vue
+++ b/src/routes/home/components/GameListItem.vue
@@ -6,7 +6,7 @@
           {{ name }}
         </p>
         <p v-if="!isSpectatable" class="text-surface-1">
-          {{ readyText }} {{ t('home.players') }}
+          {{ playersText }}
         </p>
       </v-col>
       <v-col lg="6" class="list-item__button pr-md-0">
@@ -81,6 +81,10 @@ export default {
       type: Number,
       required: true,
     },
+    players: {
+      type: Array,
+      required: true,
+    },
     isRanked: {
       type: Boolean,
       default: false,
@@ -109,8 +113,18 @@ export default {
     numPlayersReady() {
       return this.p0ready + this.p1ready;
     },
-    readyText() {
-      return `${this.numPlayers} / 2`;
+    playersText() {
+      const numPlayers = this.players.length;
+      switch (numPlayers) {
+        case 0:
+          return 'Empty';
+        case 1:
+          return `vs ${this.players[0].username}`;
+        case 2:
+          return `${this.players[0].username} vs ${this.players[1].username}`;
+        default:
+          return '';
+      }
     },
     joinButtonText() {
       return `${this.t('home.join')} ${this.isRanked ? this.t('global.ranked') : this.t('global.casual')}`;
diff --git a/src/stores/gameList.js b/src/stores/gameList.js
index de6c06e38..cdc0ec55e 100644
--- a/src/stores/gameList.js
+++ b/src/stores/gameList.js
@@ -8,6 +8,7 @@ class GameSummary {
     this.id = obj.id ? obj.id : null;
     this.name = obj.name ? obj.name : null;
     this.numPlayers = Object.prototype.hasOwnProperty.call(obj, 'players') ? obj.players.length : 0;
+    this.players = Object.prototype.hasOwnProperty.call(obj, 'players') ? obj.players : [];
     this.status = Object.prototype.hasOwnProperty.call(obj, 'status') ? obj.status : GameStatus.ARCHIVED;
     this.isRanked = Object.prototype.hasOwnProperty.call(obj, 'isRanked') ? obj.isRanked : false;
     this.isOver = false;
@@ -53,6 +54,7 @@ export const useGameListStore = defineStore('gameList', {
       const updatedGame = this.openGames.find((game) => game.id === data.gameId);
       if (updatedGame) {
         updatedGame.numPlayers = Math.min(2, updatedGame.numPlayers + 1);
+        updatedGame.players.push(data.newPlayer);
         updatedGame.status = data.newStatus;
       }
     },
@@ -60,6 +62,7 @@ export const useGameListStore = defineStore('gameList', {
       const updatedGame = this.openGames.find((game) => game.id === gameId);
       if (updatedGame) {
         updatedGame.numPlayers = Math.max(0, updatedGame.numPlayers - 1);
+        updatedGame.players.pop();
       }
     },
     setIsRanked({ gameId, isRanked }) {
diff --git a/tests/e2e/specs/out-of-game/home.spec.js b/tests/e2e/specs/out-of-game/home.spec.js
index 5a1ca73db..7900c82b9 100644
--- a/tests/e2e/specs/out-of-game/home.spec.js
+++ b/tests/e2e/specs/out-of-game/home.spec.js
@@ -497,7 +497,7 @@ describe('Home - Create Game', () => {
     cy.get('[data-cy=game-list-item]')
       .should('have.length', 1)
       .should('include.text', 'test game')
-      .should('include.text', '1 / 2 players');
+      .should('include.text', 'vs');
 
     // Test store
     cy.window()
@@ -534,7 +534,7 @@ describe('Home - Create Game', () => {
     cy.get('[data-cy=game-list-item]')
       .should('have.length', 1)
       .should('include.text', 'test game')
-      .should('include.text', '1 / 2 players');
+      .should('include.text', 'vs');
     // Test store
     cy.window()
       .its('cuttle.gameListStore.openGames')
@@ -572,7 +572,7 @@ describe('Home - Create Game', () => {
     cy.get('[data-cy=game-list-item]')
       .should('have.length', 1)
       .should('include.text', 'test game')
-      .should('include.text', '1 / 2 players');
+      .should('include.text', 'vs');
 
     // Test store
     cy.window()