diff --git a/pxtarget.json b/pxtarget.json
index 5d6cb025..ba58a99a 100644
--- a/pxtarget.json
+++ b/pxtarget.json
@@ -289,8 +289,16 @@
         ],
         "invertedMenu": true,
         "invertedToolbox": true,
+        "coloredToolbox": true,
         "simAnimationEnter": "rotate in",
         "simAnimationExit": "rotate out",
-        "blocklyOptions": { }
+        "blocklyOptions": { 
+            "grid": {
+                "spacing": 45,
+                "length": 7,
+                "colour": "rgba(189, 195, 199, 0.30)",
+                "snap": false
+            }
+        }
     }
 }
diff --git a/theme/style.less b/theme/style.less
index 0d2ae3f9..8cc87b87 100644
--- a/theme/style.less
+++ b/theme/style.less
@@ -103,7 +103,7 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: @largestMobileScreen) {
+@media only screen and (max-width: @largestMobileEditorBreakpoint) {
     .blocklyTreeLabel {
         font-size: 0.5rem !important;
     }
@@ -113,7 +113,7 @@
 }
 
 /* Tablet */
-@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+@media only screen and (min-width: @tabletEditorBreakpoint) and (max-width: @largestTabletEditorBreakpoint) {
     .organization {
         top: auto;
     }
@@ -125,7 +125,7 @@
 }
 
 /* Small Monitor */
-@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+@media only screen and (min-width: @computerEditorBreakpoint) and (max-width: @largestSmallMonitorEditorBreakpoint) {
     .organization {
         top: auto;
     }
@@ -140,7 +140,7 @@
 }
 
 /* Large Monitor */
-@media only screen and (min-width: @largeMonitorBreakpoint) {
+@media only screen and (min-width: @largeMonitorEditorBreakpoint) {
     .blocklyTreeRow {
         width: 230px;
     }