diff --git a/app/public/game.css b/app/public/game.css
index b10bf77ce7173e2e87b78df62daea44bde8fb825..70ece95b696e88b163308b8748d3bd009eb03abf 100644
--- a/app/public/game.css
+++ b/app/public/game.css
@@ -56,3 +56,11 @@
 .color-red {
     background-color: pink;
 }
+
+.color-yellow {
+    background-color: yellow;
+}
+
+.color-blue {
+    background-color: lightskyblue;
+}
diff --git a/app/public/game_render.js b/app/public/game_render.js
index 7bf4c5e297ce4bcc8e51b91ba7713777cbf64b8e..8551c353ca4c789af4e0d668c0f5e4f5665dc2a9 100644
--- a/app/public/game_render.js
+++ b/app/public/game_render.js
@@ -5,6 +5,8 @@ const BOARDS = new Set();
 const CELL_COLORS = new Map();
 CELL_COLORS.set(1, "color-green");
 CELL_COLORS.set(2, "color-red");
+CELL_COLORS.set(3, "color-yellow"); // spectator player 1
+CELL_COLORS.set(4, "color-blue");   // spectator player 2
 
 function deselectAllBoards() {
     BOARDS.forEach(board => board.deselect());
diff --git a/app/semipublic/game.html b/app/semipublic/game.html
index d5fe6eea51347112c79247bcf307e6c577b6553e..857ea048f3238709e2d519afdfd67567b25eebba 100644
--- a/app/semipublic/game.html
+++ b/app/semipublic/game.html
@@ -43,7 +43,7 @@
             BOARD1 = new SudokuBoard("board-container", args.editable, updateToServer);
         BOARD1.updateBoard(args.boardDisplay, args.boardLock, args.boardColors);
         BOARD1.editable = args.editable;
-        displayPlayerScores(args.playerScores);
+        displayPlayerScores(args.playerScores, args.playerColors);
         hideJoinButton();
     });
 
@@ -84,11 +84,15 @@
         }
     }
 
-    function displayPlayerScores(playerScores) {
+    function displayPlayerScores(playerScores, playerColors) {
         removePrevScore();
         for (let player in playerScores) {
             let scoreText = document.createElement("p");
-            scoreText.textContent = `${player}: ${playerScores[player]}`;
+            if (BOARD1.editable) {
+                scoreText.textContent = `${player}: ${playerScores[player]}`;
+            } else {
+                scoreText.textContent = `${player} (${playerColors[player]}): ${playerScores[player]}`;
+            }
             playerInfo.appendChild(scoreText);
         }
     }
diff --git a/app/semipublic/login.html b/app/semipublic/login.html
index 837e58f6c71b4342b4b7d3591b9b20887f9f2b2f..20b81f5af3a9f77860c540b6f9965df28d9302e9 100644
--- a/app/semipublic/login.html
+++ b/app/semipublic/login.html
@@ -14,6 +14,7 @@
         <div id="message"></div>
         <script>
             document.querySelector("#button-login").onclick = () => {
+                document.querySelector("#message").innerText = "";
                 fetch("/login", {
                     method: "POST",
                     headers: {
diff --git a/app/server.js b/app/server.js
index 2e5c8983396c199af6e0ef95deb4c70d9cbe79ba..09fb779dcf7b8c63352e281eecf8bf7e813af8f2 100644
--- a/app/server.js
+++ b/app/server.js
@@ -68,17 +68,22 @@ class Game {
         this.boardSolution = gen[1];
         this.boardLock = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
         this.boardColors = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
+        this.boardSpectatorColors = ARR9.map(y => ARR9.map(x => this.boardDisplay[y][x] ? 1 : 0));
         this.playerUsers.forEach(user => this.playerScores[user] = 0);
         this.state = ROOM_PLAYING;
         this.sendBoard();
     }
 
     packageBoardState(editable) {
+        const playerColors = {};
+        playerColors[this.playerUsers[0]] = "Yellow";
+        playerColors[this.playerUsers[1]] = "Blue";
         return {
             boardDisplay: this.boardDisplay,
             boardLock: this.boardLock,
-            boardColors: this.boardColors,
+            boardColors: editable ? this.boardColors : this.boardSpectatorColors,
             playerScores: this.playerScores,
+            playerColors: playerColors,
             editable: editable
         };
     }
@@ -119,10 +124,12 @@ class Game {
             return false;
         if (this.boardSolution[y][x] === val) {
             this.boardColors[y][x] = 1;
+            this.boardSpectatorColors[y][x] = this.playerUsers.indexOf(user) + 3;
             this.boardLock[y][x] = 1;
             dPoints = 1;
         } else {
             this.boardColors[y][x] = 2;
+            this.boardSpectatorColors[y][x] = 2;
             dPoints = -1;
         }
         this.boardDisplay[y][x] = val;