--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -4,16 +4,27 @@
 
 /* Toolbar */
 
 .devtools-toolbar {
   display: flex;
   line-height: 23px;
 }
 
+/* This should be global style for all panels at some point */
+.monitor-panel .devtools-button {
+  background-color: transparent;
+}
+
+/* This should be global style for all panels at some point */
+.theme-light .monitor-panel .devtools-button.checked {
+  color: var(--grey-90);
+  background-color: var(--grey-90-a10);
+}
+
 .devtools-toolbar-container {
   height: auto;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
 .devtools-toolbar-group {
   display: flex;
@@ -26,109 +37,123 @@
   height: 24px;
 }
 
 .devtools-toolbar-two-rows-1,
 .devtools-toolbar-two-rows-2,
 .devtools-toolbar-single-row {
   flex-grow: 1;
   min-height: var(--primary-toolbar-height);
+  background-color: var(--theme-body-background);
 }
 
 .devtools-toolbar-two-rows-1 {
   width: -moz-available;
 }
 
 .devtools-toolbar-two-rows-2 {
   justify-content: space-between;
   border-top: 1px solid var(--theme-splitter-color);
 }
 
 .requests-list-filter-buttons {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 2px;
+  margin: 0 7px;
 }
 
 .devtools-button.devtools-pause-icon::before,
 .devtools-button.devtools-play-icon::before {
   margin-bottom: 1px;
 }
 
 .devtools-button.devtools-pause-icon::before {
   background-image: var(--pause-icon-url);
 }
 
 .devtools-button.devtools-play-icon::before {
   background-image: var(--play-icon-url);
 }
 
-/* HAR button in the toolbar has a background only when hovered. */
-.devtools-button.devtools-har-button:not(:hover) {
-  background: transparent;
+.devtools-button.devtools-har-button {
+  margin: 0 0 0 2px;
+  padding: 0;
+}
+
+.network-monitor .devtools-button.devtools-har-button:hover {
+  background: var(--toolbarbutton-hover-background);
+  border-color: var(--toolbarbutton-hover-border-color);
 }
 
 /* HAR button has label and icon, so make sure they don't overlap */
 .devtools-button.devtools-har-button::before {
   content: "HAR";
+  color: var(--theme-body-color);
   width: 21px;
   padding-right: 12px;
   background-image: var(--drop-down-icon-url);
   background-position: right center;
   fill: var(--theme-toolbar-photon-icon-color);
+  height: 17px;
 }
 
 /* Make sure the HAR button label is vertically centered on Mac */
 :root[platform="mac"] .devtools-button.devtools-har-button::before {
   height: 14px;
 }
 
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;
   bottom: 1px;
 }
 
 .devtools-checkbox-label {
-  margin-inline-start: 10px;
-  margin-inline-end: 3px;
+  margin-inline-start: 2px;
+  margin-inline-end: 2px;
   white-space: nowrap;
-  margin-top: 1px;
+}
+
+.devtools-checkbox-label.devtools-persistlog-checkbox {
+  margin-inline-start: 4px;
+}
+
+.devtools-checkbox-label.devtools-cache-checkbox {
+  margin-inline-end: 7px;
 }
 
 /* Throttling Button */
 
 #global-network-throttling-selector:not(:hover) {
   background-color: transparent;
 }
 
-#global-network-throttling-selector:hover {
-  background-color: var(--toolbarbutton-background);
-}
-
 #global-network-throttling-selector {
   width: 92px;
   padding-right: 12px;
   background-image: var(--drop-down-icon-url);
   background-position: right 6px;
   background-repeat: no-repeat;
   fill: var(--theme-toolbar-photon-icon-color);
+  margin-inline-start: 6px;
+  padding-left: 0;
+  -moz-context-properties: fill;
 }
 
 /* Make sure the Throttle button icon is vertically centered on Mac */
 :root[platform="mac"] #global-network-throttling-selector {
-  height: 17px;
   background-position-y: 5px;
 }
 
 /* Filter input within the Toolbar */
 
 .devtools-toolbar-group .devtools-filterinput {
   border: none;
   box-shadow: none;
+  background-color: var(--theme-body-background);
 }
 
 .devtools-toolbar-group .devtools-searchbox {
   height: 29px;
   border: 1px solid transparent;
 }
 
 .devtools-toolbar-group .devtools-searchbox:focus-within {

--- a/devtools/client/netmonitor/src/assets/styles/variables.css
+++ b/devtools/client/netmonitor/src/assets/styles/variables.css
@@ -14,16 +14,18 @@
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
 
   --sort-ascending-image: url(chrome://devtools/skin/images/sort-ascending-arrow.svg);
   --sort-descending-image: url(chrome://devtools/skin/images/sort-descending-arrow.svg);
 }
 
 :root.theme-light {
+  --theme-body-color: var(--grey-70);
+
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-ssl-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */

--- a/devtools/client/netmonitor/src/components/MonitorPanel.js
+++ b/devtools/client/netmonitor/src/components/MonitorPanel.js
@@ -28,17 +28,17 @@ loader.lazyGetter(this, "NetworkDetailsP
 });
 
 // MediaQueryList object responsible for switching sidebar splitter
 // between landscape and portrait mode (depending on browser window size).
 const MediaQueryVert = window.matchMedia("(min-width: 700px)");
 
 // MediaQueryList object responsible for switching the toolbar
 // between single and 2-rows layout (depending on browser window size).
-const MediaQuerySingleRow = window.matchMedia("(min-width: 920px)");
+const MediaQuerySingleRow = window.matchMedia("(min-width: 960px)");
 
 /**
  * Monitor panel component
  * The main panel for displaying various network request information
  */
 class MonitorPanel extends Component {
   static get propTypes() {
     return {

--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -236,17 +236,17 @@ class Toolbar extends Component {
 
   /**
    * Render a Persistlog checkbox.
    */
   renderPersistlogCheckbox(persistentLogsEnabled, togglePersistentLogs) {
     return (
       label(
         {
-          className: "devtools-checkbox-label",
+          className: "devtools-checkbox-label devtools-persistlog-checkbox",
           title: ENABLE_PERSISTENT_LOGS_TOOLTIP,
         },
         input({
           id: "devtools-persistlog-checkbox",
           className: "devtools-checkbox",
           type: "checkbox",
           checked: persistentLogsEnabled,
           onChange: togglePersistentLogs,
@@ -258,17 +258,17 @@ class Toolbar extends Component {
 
   /**
    * Render a Cache checkbox.
    */
   renderCacheCheckbox(browserCacheDisabled, toggleBrowserCache) {
     return (
       label(
         {
-          className: "devtools-checkbox-label",
+          className: "devtools-checkbox-label devtools-cache-checkbox",
           title: DISABLE_CACHE_TOOLTIP,
         },
         input({
           id: "devtools-cache-checkbox",
           className: "devtools-checkbox",
           type: "checkbox",
           checked: browserCacheDisabled,
           onChange: toggleBrowserCache,

--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -20,17 +20,17 @@
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
-  --theme-toolbar-photon-icon-color: var(--grey-90-alpha-80);
+  --theme-toolbar-photon-icon-color: var(--grey-90-a80);
   --theme-toolbar-selected-color: var(--blue-60);
   --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
@@ -231,10 +231,11 @@
   --grey-20: #ededf0;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-50: #737373;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-90: #0c0c0d;
-  --grey-90-alpha-80: rgba(12, 12, 13, 0.8);
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a80: rgba(12, 12, 13, 0.8);
 }