diff --git a/package-lock.json b/package-lock.json
index dca71e4..13eb0f7 100644
Binary files a/package-lock.json and b/package-lock.json differ
diff --git a/package.json b/package.json
index 9f2af99..e2e1e9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "minesweeper",
-    "version": "0.85.3",
+    "version": "0.85.4",
     "description": "Just Minesweeper!",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -17,21 +17,21 @@
     },
     "dependencies": {
         "alea": "^1.0.1",
-        "canvas-confetti": "^1.6.0"
+        "canvas-confetti": "^1.9.2"
     },
     "devDependencies": {
-        "grunt": "^1.5.3",
+        "grunt": "^1.6.1",
         "grunt-cli": "^1.4.3",
         "grunt-contrib-clean": "^2.0.1",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
-        "grunt-webpack": "^5.0.0",
-        "ts-loader": "^9.4.1",
+        "grunt-webpack": "^6.0.0",
+        "ts-loader": "^9.5.1",
         "ts-node": "^10.9.1",
-        "typescript": "^4.9.3",
-        "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.0"
+        "typescript": "^5.3.2",
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4"
     }
 }
diff --git a/src/main/js/Display.ts b/src/main/js/Display.ts
index 5b3aabe..21ae022 100644
--- a/src/main/js/Display.ts
+++ b/src/main/js/Display.ts
@@ -10,8 +10,9 @@ import {Preferences} from "./Preferences";
  */
 export class Display {
     private readonly errorColor: string = "rgba(255, 0, 0, 0.3)";
-    private readonly hintColor: string = "rgba(0, 0, 255, 0.3)";
-    private readonly safeColor: string = "rgba(0, 255, 0, 0.5)";
+    private readonly hintColor: string = "rgba(128, 0, 128, 0.3)";
+    private readonly chordableColor: string = "rgba(0, 0, 255, 0.5)";
+    private readonly allNeighborsAreMinesColor: string = "rgba(0, 255, 0, 0.5)";
 
     private readonly scale: number = 30;
 
@@ -321,7 +322,6 @@ export class Display {
             (this.preferences.showChordableHints || this.preferences.showAllNeighborsAreMinesHints)
         ) {
             ctx.save();
-            ctx.fillStyle = this.safeColor;
             this.field.squareList
                 .filter(it => !it.isCovered)
                 .filter(it => {
@@ -329,12 +329,14 @@ export class Display {
                     const flags = it.getNeighborCount(it => it.hasFlag);
                     const covered = it.getNeighborCount(it => it.isCovered);
 
-                    return (
-                        (this.preferences.showChordableHints && mines === flags && covered !== flags) ||
-                        (this.preferences.showAllNeighborsAreMinesHints && mines === covered && mines !== flags)
-                    );
-                })
-                .forEach(square => ctx.fillRect(square.x * this.scale, square.y * this.scale, this.scale, this.scale));
+                    if (this.preferences.showChordableHints && mines === covered && mines !== flags) {
+                        ctx.fillStyle = this.chordableColor;
+                        ctx.fillRect(it.x * this.scale, it.y * this.scale, this.scale, this.scale)
+                    } else if (this.preferences.showAllNeighborsAreMinesHints && mines === flags && covered !== flags) {
+                        ctx.fillStyle = this.allNeighborsAreMinesColor;
+                        ctx.fillRect(it.x * this.scale, it.y * this.scale, this.scale, this.scale)
+                    }
+                });
             ctx.restore();
         }
     }