diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js
index fbc9787d8..f62e42135 100644
--- a/src/public/javascripts/services/entrypoints.js
+++ b/src/public/javascripts/services/entrypoints.js
@@ -60,6 +60,7 @@ function registerEntrypoints() {
         // when hiding switch display to block, otherwise grid still tries to display columns which shows
         // left empty column
         $container.css("display", $container.css("display") === "grid" ? "block" : "grid");
+        $container.toggleClass("distraction-free-mode");
     });
 
     // hide (toggle) everything except for the note content for distraction free writing
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 652914dbf..70588c39c 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -99,7 +99,9 @@ body {
     overflow: auto;
 }
 
-#note-detail-wrapper.protected {
+/** we disable shield background when in distraction free mode because I couldn't get it to stay static
+    (it kept growing with content) */
+#container:not(.distraction-free-mode) #note-detail-wrapper.protected {
     /* DON'T COLLAPSE THE RULES INTO SINGLE ONE, BACKGROUND WON'T DISPLAY */
     background: url('/images/shield.svg') no-repeat;
     background-size: contain;