diff --git a/client/src/config/globals.js b/client/src/config/globals.js
index 05b859c..5a46ec7 100644
--- a/client/src/config/globals.js
+++ b/client/src/config/globals.js
@@ -50,7 +50,7 @@ export const globals = {
         SYNC_GAME_STATE: 'syncGameState',
         START_TIMER: 'startTimer',
         PLAYER_LEFT: 'playerLeft',
-        NEW_SPECTATOR: 'newSpectator',
+        UPDATE_SPECTATORS: 'newSpectator',
         RESTART_GAME: 'restartGame'
     },
     USER_TYPES: {
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js
index fa43c26..f3e7e30 100644
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -203,12 +203,16 @@ export class InProgress {
             }
         });
 
-        if (this.socket.hasListeners(globals.EVENT_IDS.NEW_SPECTATOR)) {
-            this.socket.removeAllListeners(globals.EVENT_IDS.NEW_SPECTATOR);
+        if (this.socket.hasListeners(globals.EVENT_IDS.UPDATE_SPECTATORS)) {
+            this.socket.removeAllListeners(globals.EVENT_IDS.UPDATE_SPECTATORS);
         }
 
-        this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => {
-            stateBucket.currentGameState.spectators.push(spectator);
+        this.socket.on(globals.EVENT_IDS.UPDATE_SPECTATORS, (updatedSpectatorList) => {
+            stateBucket.currentGameState.spectators = updatedSpectatorList;
+            SharedStateUtil.setNumberOfSpectators(
+                stateBucket.currentGameState.spectators.length,
+                document.getElementById('spectator-count')
+            );
             if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR
                 || this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) {
                 this.displayAvailableModerators();
diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js
index 5167cd8..4b91b16 100644
--- a/client/src/modules/game_state/states/Lobby.js
+++ b/client/src/modules/game_state/states/Lobby.js
@@ -99,8 +99,8 @@ export class Lobby {
             }
         });
 
-        this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => {
-            this.stateBucket.currentGameState.spectators.push(spectator);
+        this.socket.on(globals.EVENT_IDS.UPDATE_SPECTATORS, (updatedSpectatorList) => {
+            this.stateBucket.currentGameState.spectators = updatedSpectatorList;
             SharedStateUtil.setNumberOfSpectators(
                 this.stateBucket.currentGameState.spectators.length,
                 document.getElementById('spectator-count')
diff --git a/client/src/styles/join.css b/client/src/styles/join.css
index 4274d5a..ad3da5e 100644
--- a/client/src/styles/join.css
+++ b/client/src/styles/join.css
@@ -1,6 +1,5 @@
 #join-game-modal {
     border-left: 5px solid #b1afcd;
-    animation: entrance 0.5s forwards;
     transform-origin: center;
     display: block;
     z-index: 1 !important;
@@ -46,15 +45,3 @@
 #game-code {
     font-family: "Courier New", monospace;
 }
-
-@keyframes entrance {
-    0% {
-        opacity: 0;
-    }
-    90% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 1;
-    }
-}
diff --git a/server/config/globals.js b/server/config/globals.js
index 6126c80..aaa7e8a 100644
--- a/server/config/globals.js
+++ b/server/config/globals.js
@@ -68,7 +68,7 @@ const globals = {
         PLAYER_JOINED: 'playerJoined',
         PLAYER_LEFT: 'playerLeft',
         SYNC_GAME_STATE: 'syncGameState',
-        NEW_SPECTATOR: 'newSpectator',
+        UPDATE_SPECTATORS: 'newSpectator',
         BROADCAST: 'broadcast'
     },
     ENVIRONMENT: {
diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js
index df70dce..0d63eba 100644
--- a/server/modules/GameManager.js
+++ b/server/modules/GameManager.js
@@ -184,6 +184,11 @@ class GameManager {
 
     transferModeratorPowers = (socket, game, person, namespace, logger) => {
         if (person && (person.out || person.userType === globals.USER_TYPES.SPECTATOR)) {
+            let spectatorsUpdated = false;
+            if (game.spectators.includes(person)) {
+                game.spectators.splice(game.spectators.indexOf(person), 1);
+                spectatorsUpdated = true;
+            }
             logger.debug('game ' + game.accessCode + ': transferring mod powers to ' + person.name);
             if (game.moderator === person) {
                 person.userType = globals.USER_TYPES.MODERATOR;
@@ -197,16 +202,17 @@ class GameManager {
                     game.moderator.userType = globals.USER_TYPES.KILLED_PLAYER; // restore their state from before being made mod.
                 } else if (game.moderator.userType === globals.USER_TYPES.MODERATOR) {
                     game.moderator.userType = globals.USER_TYPES.SPECTATOR;
-                    if (!game.spectators.includes(game.moderator)) {
-                        game.spectators.push(game.moderator);
-                    }
-                    if (game.spectators.includes(person)) {
-                        game.spectators.splice(game.spectators.indexOf(person), 1);
-                    }
-                    namespace.in(game.accessCode).emit(globals.EVENTS.NEW_SPECTATOR);
+                    game.spectators.push(game.moderator);
+                    spectatorsUpdated = true;
                 }
                 person.userType = globals.USER_TYPES.MODERATOR;
                 game.moderator = person;
+                if (spectatorsUpdated === true) {
+                    namespace.in(game.accessCode).emit(
+                        globals.EVENTS.UPDATE_SPECTATORS,
+                        game.spectators.map((spectator) => GameStateCurator.mapPerson(spectator))
+                    );
+                }
                 this.namespace.to(person.socketId).emit(globals.EVENTS.SYNC_GAME_STATE);
                 this.namespace.to(oldModerator.socketId).emit(globals.EVENTS.SYNC_GAME_STATE);
             }
@@ -507,8 +513,8 @@ function addSpectator (game, name, logger, namespace) {
     logger.trace('new spectator: ' + spectator.name);
     game.spectators.push(spectator);
     namespace.in(game.accessCode).emit(
-        globals.EVENTS.NEW_SPECTATOR,
-        GameStateCurator.mapPerson(spectator)
+        globals.EVENTS.UPDATE_SPECTATORS,
+        game.spectators.map((spectator) => { return GameStateCurator.mapPerson(spectator); })
     );
     return Promise.resolve(spectator.cookie);
 }
diff --git a/spec/unit/server/modules/GameManager_Spec.js b/spec/unit/server/modules/GameManager_Spec.js
index 6fc94a5..43f2795 100644
--- a/spec/unit/server/modules/GameManager_Spec.js
+++ b/spec/unit/server/modules/GameManager_Spec.js
@@ -292,7 +292,7 @@ describe('GameManager', () => {
             expect(game.spectators.length).toEqual(1);
             expect(game.spectators[0].name).toEqual('Jane');
             expect(game.spectators[0].userType).toEqual(USER_TYPES.SPECTATOR);
-            expect(gameManager.namespace.in().emit).toHaveBeenCalledWith(globals.EVENTS.NEW_SPECTATOR, jasmine.anything());
+            expect(gameManager.namespace.in().emit).toHaveBeenCalledWith(globals.EVENTS.UPDATE_SPECTATORS, jasmine.anything());
         });
     });