diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index e625cff834..620f254c0a 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -33,6 +33,7 @@
 <div
   class="grid"
   class:mobile
+  class:builder={$builderStore.inBuilder}
   bind:clientWidth={width}
   bind:clientHeight={height}
   use:styleable={{
@@ -69,6 +70,9 @@
     height: 400px;
     gap: 0;
   }
+  .grid.builder {
+    background: var(--spectrum-alias-background-color-secondary);
+  }
   .grid,
   .underlay {
     display: grid;
@@ -81,16 +85,15 @@
     left: 0;
     width: 100%;
     height: 100%;
-    /*    grid-gap: 2px;*/
-    /*    background-color: var(--spectrum-global-color-gray-200);*/
-    border: 1px solid var(--spectrum-global-color-gray-200);
+    border: 1px solid var(--spectrum-global-color-gray-900);
+    opacity: 0.07;
+    pointer-events: none;
   }
   .underlay {
-    z-index: -1;
+    z-index: 0;
   }
   .placeholder {
-    /*    background-color: var(--spectrum-global-color-gray-100);*/
-    border: 1px solid var(--spectrum-global-color-gray-200);
+    border: 1px solid var(--spectrum-global-color-gray-900);
   }
 
   /* Ensure all top level children have grid styles applied */