diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js
index c0f675f..3f3371a 100644
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -194,15 +194,15 @@ export const HTMLFragments = {
         <label id='players-alive-label'></label>
         <div id="spectator-count" tabindex="0"></div>
         <div id='game-player-list'>
-            <div id="independent-players" class='independent-players' style="display: none;">
+            <div id="independent-players" class='independent-players hidden'>
                 <label class='independent'>Team Independent</label>
                 <div id='player-list-moderator-team-independent'></div>
             </div>
-            <div id="evil-players" class='evil-players' style="display: none;">
+            <div id="evil-players" class='evil-players hidden'>
                 <label class='evil'>Team Evil</label>
                 <div id='player-list-moderator-team-evil'></div>
             </div>
-            <div id="good-players" class='good-players' style="display: none;">
+            <div id="good-players" class='good-players hidden'>
                 <label class='good'>Team Good</label>
                 <div id='player-list-moderator-team-good'></div>
             </div>
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js
index 31d39c8..99b5e63 100644
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -300,7 +300,7 @@ export class InProgress {
                 || p.killed)
         );
         if (teamEvil.length > 0) {
-            document.getElementById(`${ALIGNMENT.EVIL}-players`).style.display = 'block';
+            document.getElementById(`${ALIGNMENT.EVIL}-players`).classList.remove('hidden');
             this.renderGroupOfPlayers(
                 teamEvil,
                 this.killPlayerHandlers,
@@ -313,7 +313,7 @@ export class InProgress {
             );
         }
         if (teamGood.length > 0) {
-            document.getElementById(`${ALIGNMENT.GOOD}-players`).style.display = 'block';
+            document.getElementById(`${ALIGNMENT.GOOD}-players`).classList.remove('hidden');
             this.renderGroupOfPlayers(
                 teamGood,
                 this.killPlayerHandlers,
@@ -326,7 +326,7 @@ export class InProgress {
             );
         }
         if (teamIndependent.length > 0) {
-            document.getElementById(`${ALIGNMENT.INDEPENDENT}-players`).style.display = 'block';
+            document.getElementById(`${ALIGNMENT.INDEPENDENT}-players`).classList.remove('hidden');
             this.renderGroupOfPlayers(
                 teamIndependent,
                 this.killPlayerHandlers,