diff --git a/web-server/components/Model.tsx b/web-server/components/Model.tsx
index 41e2e808c..88c446a04 100644
--- a/web-server/components/Model.tsx
+++ b/web-server/components/Model.tsx
@@ -69,7 +69,7 @@ const Model = (props: ModelProps) => {
                     </em>
                 </small>
             </a>
-            <span className='float-right'>
+            <span className='float-right ml-3'>
                     <button
                         type='button'
                         className='btn btn-sm btn-outline-danger'
diff --git a/web-server/js/slycat-color-maps.ts b/web-server/js/slycat-color-maps.ts
index 7d1251993..95cc2775b 100644
--- a/web-server/js/slycat-color-maps.ts
+++ b/web-server/js/slycat-color-maps.ts
@@ -130,23 +130,23 @@ export default {
       opacity: "0.7",
       colors: [d3.rgb(0, 0, 255), d3.rgb(0, 255, 255), d3.rgb(255, 255, 0), d3.rgb(255, 0, 0)],
     },
-    grayscale_day: {
-      label: "Grayscale Day",
-      background: WHITE,
+    grayscale_night: {
+      label: "Grayscale Night",
+      background: GRAY2,
       // ToDo: fix this, null and outofdomain colors need to be different than normal colors
       null_color: GRAY4,
       outofdomain_color: BLACK,
-      scatterplot_grid_color: GRAY1,
+      scatterplot_grid_color: GRAY3,
       opacity: "0.6",
       colors: [d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)],
     },
-    grayscale_night: {
-      label: "Grayscale Night",
-      background: GRAY2,
+    grayscale_day: {
+      label: "Grayscale Day",
+      background: WHITE,
       // ToDo: fix this, null and outofdomain colors need to be different than normal colors
       null_color: GRAY4,
       outofdomain_color: BLACK,
-      scatterplot_grid_color: GRAY3,
+      scatterplot_grid_color: GRAY1,
       opacity: "0.6",
       colors: [d3.rgb(255, 255, 255), d3.rgb(0, 0, 0)],
     },
diff --git a/web-server/plugins/slycat-parameter-image/css/ui.css b/web-server/plugins/slycat-parameter-image/css/ui.css
index 146d17774..e4e67ecbf 100644
--- a/web-server/plugins/slycat-parameter-image/css/ui.css
+++ b/web-server/plugins/slycat-parameter-image/css/ui.css
@@ -530,6 +530,8 @@
 #scatterplot .image-frame.html {
   position: absolute;
   background-color: black;
+  /* Checkerboard background */
+  /* background: repeating-conic-gradient(#808080 0% 25%, white 0% 50%) 50% / 20px 20px; */
   border: 1px solid black;
   height: auto;
   padding-bottom: 20px;
diff --git a/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js b/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
index 012b05b42..040042bf0 100644
--- a/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
+++ b/web-server/plugins/slycat-parameter-image/js/parameter-image-scatterplot.js
@@ -954,6 +954,10 @@ $.widget("parameter_image.scatterplot", {
       self._schedule_update({ render_selection: true });
     } else if (key == "colorscale") {
       self._schedule_update({ render_data: true, render_selection: true });
+      // Update frame backgrounds to colormap null color
+      d3.selectAll(".image-frame").style({
+        "background-color": slycat_color_maps.get_null_color(window.store.getState().colormap),
+      });
     } else if (key == "width") {
       // console.debug(`width option set to %o: %o`, key, value);
       self._schedule_update({
@@ -1887,6 +1891,8 @@ $.widget("parameter_image.scatterplot", {
           width: img.width + "px",
           height: img.height + 20 + "px",
           "z-index": self.options.highest_z_index,
+          // Set frame background to colormap null color
+          "background-color": slycat_color_maps.get_null_color(window.store.getState().colormap),
         })
         .attr("class", img.image_class + " image-frame scaffolding html ")
         .classed("selected", img.current_frame)