diff --git a/src/css/ingame_hud/puzzle_editor_settings.scss b/src/css/ingame_hud/puzzle_editor_settings.scss
index b9291f64..e7518402 100644
--- a/src/css/ingame_hud/puzzle_editor_settings.scss
+++ b/src/css/ingame_hud/puzzle_editor_settings.scss
@@ -12,6 +12,17 @@
     @include S(border-radius, $globalBorderRadius);
 
     > .section {
+        .disabled {
+            transition: opacity 0.12s ease-in-out;
+            opacity: 0.3;
+            button {
+                pointer-events: none;
+            }
+        }
+        :not(.disabled) {
+            transition: opacity 0.12s ease-in-out;
+        }
+
         > label {
             text-transform: uppercase;
         }
@@ -45,12 +56,6 @@
         }
 
         > .mainButtons {
-            &.disabled {
-                button {
-                    pointer-events: none;
-                }
-            }
-
             > .buttonBar {
                 display: flex;
                 align-items: center;
diff --git a/src/js/game/hud/parts/puzzle_editor_settings.js b/src/js/game/hud/parts/puzzle_editor_settings.js
index 85b198b7..54a36cd6 100644
--- a/src/js/game/hud/parts/puzzle_editor_settings.js
+++ b/src/js/game/hud/parts/puzzle_editor_settings.js
@@ -73,6 +73,7 @@ export class HUDPuzzleEditorSettings extends BaseHUDPart {
     toggleTestMode() {
         this.testMode = !this.testMode;
 
+        this.element.querySelector(".section > label").classList.toggle("disabled", this.testMode);
         this.element.querySelector(".mainButtons").classList.toggle("disabled", this.testMode);
         const testButton = this.element.querySelector(".testToggle > .testPuzzle");
         testButton.textContent = this.testMode