diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index dbf2c11d7f..ebb916a768 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -2265,6 +2265,7 @@ video {
   --alert-color: #fee4d1;
   --alert-foreground-color: var(--foreground-color);
   --low-interaction-background: #eeeeee;
+  --low-interaction-background-50: #eeeeee90;
   --low-interaction-foreground: black;
   --low-interaction-contrast: #ff00ff;
   --interactive-background: #dddddd;
@@ -2491,6 +2492,10 @@ button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image
   transition: all 250ms;
 }
 
+button.disabled.low-interaction, .button.disabled.low-interaction {
+  background-color: var(--low-interaction-background-50);
+}
+
 button.disabled, .button.disabled {
   cursor: default;
   border: 2px dashed var(--button-background);
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 8c9672e3f3..243c23aa6e 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -287,7 +287,7 @@
       <If condition={featureSwitches.featureSwitchEnableLogin}>
         {#if state.layout.hasPresets() || state.layout.hasNoteLayer()}
           <button
-            class="pointer-events-auto w-fit"
+            class="pointer-events-auto w-fit low-interaction"
             class:disabled={$currentZoom < Constants.minZoomLevelToAddNewPoint}
             on:click={() => {
               state.openNewDialog()
diff --git a/src/index.css b/src/index.css
index a52826b1bd..3ee016bbd2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,6 +27,7 @@
     --alert-foreground-color: var(--foreground-color);
 
     --low-interaction-background: #eeeeee;
+    --low-interaction-background-50: #eeeeee90;
     --low-interaction-foreground: black;
     --low-interaction-contrast: #ff00ff;
 
@@ -264,6 +265,10 @@ button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image
     transition: all 250ms;
 }
 
+button.disabled.low-interaction, .button.disabled.low-interaction {
+    background-color: var(--low-interaction-background-50);
+}
+
 
 button.disabled, .button.disabled {
     cursor: default;
@@ -274,6 +279,7 @@ button.disabled, .button.disabled {
 }
 
 
+
 button.disabled:hover, .button.disabled:hover {
     cursor: default;
     border: 2px dashed var(--button-background);