--- a/devtools/client/netmonitor/src/assets/styles/Toolbar.css
+++ b/devtools/client/netmonitor/src/assets/styles/Toolbar.css
@@ -73,36 +73,48 @@
   background-image: var(--play-icon-url);
 }
 
 .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);
+/* style for dropdown button */
+.devtools-drop-down-button {
+  background-image: var(--drop-down-icon-url)  !important;
+  background-repeat: no-repeat !important;
+  margin-inline-start: 6px;
+  fill: var(--theme-toolbar-photon-icon-color);
+  -moz-context-properties: fill;
 }
 
-/* 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;
+/* style for title holder inside a dropdown button */
+.devtools-drop-down-button .title {
+  padding-top: 0.15em;
+  text-align: center;
+  overflow: hidden;
+  display: inline-block;
 }
 
-/* Make sure the HAR button label is vertically centered on Mac */
-:root[platform="mac"] .devtools-button.devtools-har-button::before {
-  height: 14px;
+/* HAR button */
+
+#devtools-har-button {
+  width: 35px;
+  padding-right: 12px;
+  background-position: right center;
+}
+
+/* Make sure spacing between text and icon is uniform */
+#devtools-har-button .title {
+  width: 24px;
+}
+
+#devtools-har-button:not(:hover) {
+  background-color: transparent;
 }
 
 .devtools-checkbox {
   position: relative;
   vertical-align: middle;
   bottom: 1px;
 }
 
@@ -123,36 +135,24 @@
 /* Throttling Button */
 
 #global-network-throttling-selector:not(:hover) {
   background-color: transparent;
 }
 
 #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;
+  background-position: right 4px center;
   padding-left: 0;
-  -moz-context-properties: fill;
+  overflow: hidden;
 }
 
-#global-network-throttling-selector > option.divider {
-  border-top: 1px solid var(--theme-splitter-color);
-  height: 0px;
-  padding: 0;
-  font-size: 0px;
-}
-
-/* Make sure the Throttle button icon is vertically centered on Mac */
-:root[platform="mac"] #global-network-throttling-selector {
-  background-position-y: 5px;
+/* Make sure spacing between text and icon is uniform*/
+#global-network-throttling-selector .title{
+  width: 85%;
 }
 
 /* Filter input within the Toolbar */
 
 .devtools-toolbar-group .devtools-filterinput {
   border: none;
   box-shadow: none;
   background-color: var(--theme-body-background);

--- a/devtools/client/netmonitor/src/components/Toolbar.js
+++ b/devtools/client/netmonitor/src/components/Toolbar.js
@@ -4,25 +4,25 @@
 
 "use strict";
 
 const Services = require("Services");
 const { Component, createFactory } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/redux/visibility-handler-connect");
-
 const Actions = require("../actions/index");
 const { FILTER_SEARCH_DELAY, FILTER_TAGS } = require("../constants");
 const {
   getDisplayedRequests,
   getRecordingState,
   getTypeFilteredRequests,
 } = require("../selectors/index");
 const { autocompleteProvider } = require("../utils/filter-autocomplete-provider");
+const { LocalizationHelper } = require("devtools/shared/l10n");
 const { L10N } = require("../utils/l10n");
 const { fetchNetworkUpdatePacket } = require("../utils/request-utils");
 
 // MDN
 const {
   getFilterBoxURL,
 } = require("../utils/mdn-utils");
 const LEARN_MORE_URL = getFilterBoxURL();
@@ -46,24 +46,27 @@ const DEVTOOLS_ENABLE_PERSISTENT_LOG_PRE
 const TOOLBAR_FILTER_LABELS = FILTER_TAGS.concat("all").reduce((o, tag) =>
   Object.assign(o, { [tag]: L10N.getStr(`netmonitor.toolbar.filter.${tag}`) }), {});
 const ENABLE_PERSISTENT_LOGS_TOOLTIP =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.tooltip");
 const ENABLE_PERSISTENT_LOGS_LABEL =
   L10N.getStr("netmonitor.toolbar.enablePersistentLogs.label");
 const DISABLE_CACHE_TOOLTIP = L10N.getStr("netmonitor.toolbar.disableCache.tooltip");
 const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label");
+const NO_THROTTLING_LABEL = new LocalizationHelper(
+  "devtools/client/locales/network-throttling.properties"
+  ).getStr("responsive.noThrottling");
 
 // Menu
 loader.lazyRequireGetter(this, "showMenu", "devtools/client/netmonitor/src/utils/menu", true);
 loader.lazyRequireGetter(this, "HarMenuUtils", "devtools/client/netmonitor/src/har/har-menu-utils", true);
 
 // Throttling
 const Types = require("devtools/client/shared/components/throttling/types");
-const NetworkThrottlingSelector = createFactory(require("devtools/client/shared/components/throttling/NetworkThrottlingSelector"));
+const throttlingProfiles = require("devtools/client/shared/components/throttling/profiles");
 const { changeNetworkThrottling } = require("devtools/client/shared/components/throttling/actions");
 
 /**
  * Network monitor toolbar component.
  *
  * Toolbar contains a set of useful tools to control network requests
  * as well as set of filters for filtering the content.
  */
@@ -279,38 +282,76 @@ class Toolbar extends Component {
   }
 
   /**
    * Render network throttling selector button.
    */
   renderThrottlingSelector() {
     const {
       networkThrottling,
+    } = this.props;
+
+    const selectedProfile = networkThrottling.enabled ?
+      networkThrottling.profile : NO_THROTTLING_LABEL;
+    return button({
+      id: "global-network-throttling-selector",
+      title: selectedProfile,
+      className: "devtools-button devtools-drop-down-button",
+      onClick: evt => {
+        this.showThrottlingSelector(evt.target);
+      },
+    },
+    dom.span({className: "title"},
+      selectedProfile)
+    );
+  }
+
+  showThrottlingSelector(menuButton) {
+    const {
+      networkThrottling,
       onChangeNetworkThrottling,
     } = this.props;
 
-    return NetworkThrottlingSelector({
-      className: "devtools-button",
-      networkThrottling,
-      onChangeNetworkThrottling,
+    const menuItems = throttlingProfiles.map(profile => {
+      return {
+        label: profile.id,
+        type: "checkbox",
+        checked: networkThrottling.enabled &&
+          (profile.id == networkThrottling.profile),
+        click: () => onChangeNetworkThrottling(true, profile.id),
+      };
     });
+
+    menuItems.unshift("-");
+
+    menuItems.unshift({
+      label: NO_THROTTLING_LABEL,
+      type: "checkbox",
+      checked: !networkThrottling.enabled,
+      click: () => onChangeNetworkThrottling(false, ""),
+    });
+
+    showMenu(menuItems, { button: menuButton });
   }
 
   /**
    * Render drop down button with HAR related actions.
    */
   renderHarButton() {
     return button({
       id: "devtools-har-button",
       title: TOOLBAR_HAR_BUTTON,
-      className: "devtools-button devtools-har-button",
+      className: "devtools-button devtools-har-button devtools-drop-down-button",
       onClick: evt => {
         this.showHarMenu(evt.target);
       },
-    });
+    },
+    dom.span({className: "title"},
+      "HAR")
+    );
   }
 
   showHarMenu(menuButton) {
     const {
       actions,
       connector,
       displayedRequests,
       openSplitConsole,