diff --git a/devtools/client/aboutdebugging-new/aboutdebugging.css b/devtools/client/aboutdebugging-new/aboutdebugging.css
index 2ff450f896f1..c005496329d0 100644
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -16,6 +16,7 @@
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeActions.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
diff --git a/devtools/client/aboutdebugging-new/src/base.css b/devtools/client/aboutdebugging-new/src/base.css
index afe5baa90f29..58dd15b4ef43 100644
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -50,6 +50,7 @@
   --body-20-font-weight: 700;
   --caption-20-font-size: 13px;
   --caption-20-font-weight: 400;
+  --caption-20-color: var(--grey-50);
   --display-20-font-size: 36px;
   --display-20-font-weight: 200;
   --title-20-font-size: 17px;
@@ -69,9 +70,10 @@
   --message-font-size: 13px; /* Body 10 in Photon - https://design.firefox.com/photon/visuals/typography.html */
   --button-font-size: var(--base-font-size);
   --micro-font-size: 11px;
-
   --monospace-font-family: monospace;
 
+  --card-separator-color: var(--grey-20);
+
   /*
    * Variables particular to about:debugging
    */
@@ -127,7 +129,6 @@ p, h1 {
   margin: 0;
 }
 
-
 /*
 * Utils
 */
@@ -149,6 +150,13 @@ p, h1 {
   -moz-user-select: none;
 }
 
+/* Links that need to look like current text */
+.undecorated-link,
+.undecorated-link:hover {
+  text-decoration: none;
+  color: currentColor;
+}
+
 /*
 * Typography
 */
@@ -194,9 +202,8 @@ p, h1 {
 
 /* Alternative style for a heading (i.e. h1) */
 .alt-heading {
-  font-weight: 300;
-  font-size: 1.46em;
-  line-height: 1.2; /* odd value - from common.inc.css */
+  font-weight: var(--title-20-font-weight);
+  font-size: var(--title-20-font-size);
 
   margin-block-start: 0;
   margin-block-end: calc(var(--base-unit) * 4);
@@ -254,20 +261,51 @@ Form controls
   font-size: 1em;
 }
 
-/* standard, normal button */
-.default-button {
+/* Buttons from Photon */
+.default-button, .primary-button {
   -moz-appearance: none;
-  color: var(--grey-90); /* Note: this is from Photon Default button */
-  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
-  font-size: var(--button-font-size); /* Note: this is from Photon Default button */
-
   margin: 0;
-  height: calc(var(--base-unit) * 8); /* Note: this is from Photon, not common.css */
+  height: calc(var(--base-unit) * 8);
   padding-inline-start: calc(var(--base-unit) * 5);
   padding-inline-end: calc(var(--base-unit) * 5);
 
   border: none;
   border-radius: calc(var(--base-unit) / 2);
+
+  font-size: var(--button-font-size);
+}
+
+/* Disabled state for buttons from Photon */
+.default-button:disabled, .primary-button:disabled {
+  opacity: 0.4;
+}
+
+/* Smaller variant size for buttons, from Photon */
+.default-button--micro, .primary-button--micro {
+  padding-inline-start: calc(2 * var(--base-unit));
+  padding-inline-end: calc(2 * var(--base-unit));
+  font-size: var(--micro-font-size);
+  height: calc(var(--base-unit) * 6);
+}
+
+/* Photon button representing a primary action */
+.primary-button {
+  color: var(--white-100);
+  background-color: var(--blue-60);
+}
+
+.primary-button:enabled:hover {
+  background-color: var(--blue-70);
+}
+
+.primary-button:enabled:active {
+  background-color: var(--blue-80);
+}
+
+/* Photon standard button */
+.default-button {
+  color: var(--grey-90); /* Note: this is from Photon Default button */
+  background-color: var(--grey-90-a10); /* Note: this is from Photon Default button */
 }
 
 .default-button:enabled:hover {
@@ -278,19 +316,7 @@ Form controls
   background: var(--grey-90-a30); /* Note: this is from Photon Default button */
 }
 
-.default-button:disabled {
-  opacity: 0.4; /* Note: this is from Photon Default button */
-}
-
-/* smaller size for a default button */
-.default-button--micro {
-  padding-inline-start: calc(2 * var(--base-unit));
-  padding-inline-end: calc(2 * var(--base-unit));
-  font-size: var(--micro-font-size);
-  height: calc(var(--base-unit) * 6);
-}
-
-/* ghost button. icon button with no background from Photon guidelines */
+/* Photon ghost button. Icon button with no background */
 .ghost-button {
   border: none;
   border-radius: calc(var(--base-unit) / 2);
@@ -310,7 +336,7 @@ Form controls
   background-color: var(--grey-40);
 }
 
-/* standard inputs */
+/* Standard inputs */
 .default-input {
   line-height: unset;
   padding: 0 calc(var(--base-unit) * 2);
@@ -322,8 +348,8 @@ Form controls
   background-color: var(--box-background);
 }
 
+/* Standard checkbox, from Photon */
 .default-checkbox {
-  /* Note: this styles are from Photon, not common.css */
   height: calc(var(--base-unit) * 4);
   margin-inline-end: var(--base-unit);
   width: calc(var(--base-unit) * 4);
@@ -361,18 +387,15 @@ Form controls
 }
 
 /*
- * Card style which is used in debug target item and so on.
+ * Card UI, from Photon
  */
 .card {
   background-color: var(--white-100); /* from common.inc.css */
   border-radius: var(--base-unit); /* from common.inc.css */
   box-shadow: 0 1px 4px var(--grey-90-a10); /* from common.inc.css */
-  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
-  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
-.undecorated-link,
-.undecorated-link:hover {
-  text-decoration: none;
-  color: currentColor;
+.card__heading {
+  font-size: var(--title-20-font-size); /* Note: this is from Photon Title 20 */
+  font-weight: var(--title-20-font-weight); /* Note: this is from Photon Title 20 */
 }
diff --git a/devtools/client/aboutdebugging-new/src/components/App.css b/devtools/client/aboutdebugging-new/src/components/App.css
index 7c67c10f91cd..c29d24508637 100644
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -53,8 +53,3 @@
 .page {
   max-width: var(--page-width);
 }
-
-.page__section {
-  margin-block-end: calc(var(--base-unit) * 12);
-  --section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap));
-}
diff --git a/devtools/client/aboutdebugging-new/src/components/App.js b/devtools/client/aboutdebugging-new/src/components/App.js
index 2183ae68f101..6f7f967e7633 100644
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -130,7 +130,7 @@ class App extends PureComponent {
     return Switch(
       {},
       Route({
-        path: "/connect",
+        path: "/setup",
         render: () => this.renderConnect(),
       }),
       Route({
@@ -142,7 +142,7 @@ class App extends PureComponent {
       // in this case maybe we'd like to do something else than a redirect.
       // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1509897
       Route({
-        render: () => Redirect({ to: "/connect"}),
+        render: () => Redirect({ to: "/setup"}),
       })
     );
   }
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
index 15afb04e7013..b771b5de4f15 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css
@@ -2,10 +2,42 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.connect-page__usb__toggle-button {
-  margin-top: calc(var(--base-unit) * 4);
-}
-
 .connect-page__disabled-section {
   color: var(--grey-40);
 }
+
+.connect-page__breather {
+  margin-block-start: calc(var(--base-unit) * 6);
+}
+
+/*
+ *   +--------+----------------------+
+ *   | USB    |            |<button> |
+ *   +--------+            |         |
+ *   | status |            |         |
+ *   +--------+----------------------+
+ */
+.connect-page__usb-section__heading {
+  display: grid;
+  align-items: center;
+  grid-template-areas: "title  . toggle"
+                       "status . toggle";
+  grid-template-columns: auto 1fr auto;
+  grid-column-gap: calc(var(--base-unit) * 2);
+}
+
+.connect-page__usb-section__heading__toggle {
+  grid-area: toggle;
+}
+
+.connect-page__usb-section__heading__title {
+  grid-area: title;
+  line-height: 1;
+}
+.connect-page__usb-section__heading__status {
+  grid-area: status;
+  line-height: 1;
+  font-size: var(--caption-20-font-size);
+  font-weight: var(--caption-20-font-weight);
+  color: var(--caption-20-color);
+}
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
index ee9b59a1b801..2a93e60f7afb 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -19,16 +19,16 @@ const Actions = require("../../actions/index");
 
 loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
 
+const Link = createFactory(require("devtools/client/shared/vendor/react-router-dom").Link);
 const ConnectSection = createFactory(require("./ConnectSection"));
 const ConnectSteps = createFactory(require("./ConnectSteps"));
 const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
 const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
 
-const { PREFERENCES, PAGE_TYPES } = require("../../constants");
+const { PREFERENCES, PAGE_TYPES, RUNTIMES } = require("../../constants");
 const Types = require("../../types/index");
 
-const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
-const WIFI_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
+const USB_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
 const GLOBE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
 class ConnectPage extends PureComponent {
@@ -50,45 +50,6 @@ class ConnectPage extends PureComponent {
     this.props.dispatch(Actions.selectPage(PAGE_TYPES.CONNECT));
   }
 
-  renderWifi() {
-    const { getString, wifiEnabled } = this.props;
-
-    return Localized(
-      {
-        id: "about-debugging-connect-wifi",
-        attrs: { title: true },
-      },
-      ConnectSection(
-        {
-          icon: WIFI_ICON_SRC,
-          title: "Via WiFi",
-        },
-        wifiEnabled
-          ? ConnectSteps(
-            {
-              steps: [
-                getString("about-debugging-connect-wifi-step-same-network"),
-                getString("about-debugging-connect-wifi-step-open-firefox"),
-                getString("about-debugging-connect-wifi-step-open-options"),
-                getString("about-debugging-connect-wifi-step-enable-debug"),
-              ],
-            })
-          : Localized(
-            {
-              id: "about-debugging-connect-wifi-disabled",
-              $pref: PREFERENCES.WIFI_ENABLED,
-            },
-            dom.div(
-              {
-                className: "connect-page__disabled-section",
-              },
-              "about-debugging-connect-wifi-disabled"
-            )
-          )
-      )
-    );
-  }
-
   onToggleUSBClick() {
     const { adbAddonStatus } = this.props;
     const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
@@ -110,13 +71,33 @@ class ConnectPage extends PureComponent {
     }
   }
 
+  renderUsbStatus() {
+    const statusTextId = {
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-status-enabled",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-status-disabled",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-status-updating",
+    }[this.getUsbStatus()];
+
+    return Localized(
+      {
+        id: statusTextId,
+      },
+      dom.span(
+        {
+          className: "connect-page__usb-section__heading__status",
+        },
+        statusTextId,
+      ),
+    );
+  }
+
   renderUsbToggleButton() {
     const usbStatus = this.getUsbStatus();
 
     const localizedStates = {
-      [USB_STATES.ENABLED_USB]: "about-debugging-connect-usb-disable-button",
-      [USB_STATES.DISABLED_USB]: "about-debugging-connect-usb-enable-button",
-      [USB_STATES.UPDATING_USB]: "about-debugging-connect-usb-updating-button",
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-disable-button",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-enable-button",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-updating-button",
     };
     const localizedState = localizedStates[usbStatus];
 
@@ -130,7 +111,7 @@ class ConnectPage extends PureComponent {
       dom.button(
         {
           className:
-            "default-button connect-page__usb__toggle-button " +
+            "default-button connect-page__usb-section__heading__toggle " +
             "js-connect-usb-toggle-button",
           disabled,
           onClick: () => this.onToggleUSBClick(),
@@ -143,40 +124,58 @@ class ConnectPage extends PureComponent {
   renderUsb() {
     const { adbAddonStatus, getString } = this.props;
     const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
-    return Localized(
+    return ConnectSection(
       {
-        id: "about-debugging-connect-usb",
-        attrs: { title: true },
-      },
-      ConnectSection(
-        {
-          icon: USB_ICON_SRC,
-          title: "Via USB",
-        },
-        isAddonInstalled
-          ? ConnectSteps(
-            {
-              steps: [
-                getString("about-debugging-connect-usb-step-enable-dev-menu"),
-                getString("about-debugging-connect-usb-step-enable-debug"),
-                getString("about-debugging-connect-usb-step-plug-device"),
-              ],
-            }
-          )
-          : Localized(
-            {
-              id: "about-debugging-connect-usb-disabled",
-            },
-            dom.aside(
+        icon: USB_ICON_SRC,
+        title: dom.div(
+          {
+            className: "connect-page__usb-section__heading",
+          },
+          Localized(
+            { id: "about-debugging-setup-usb-title" },
+            dom.span(
               {
-                className: "js-connect-usb-disabled-message",
+                className: "connect-page__usb-section__heading__title",
               },
-              "Enabling this will download and add the required Android USB debugging " +
-                "components to Firefox."
-            )
+              "USB",
+            ),
           ),
-        this.renderUsbToggleButton()
-      )
+          this.renderUsbStatus(),
+          this.renderUsbToggleButton(),
+        ),
+      },
+      isAddonInstalled
+        ? ConnectSteps(
+          {
+            steps: [
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-dev-menu",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug-firefox",
+                url: "https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE#Setting_up_the_Android_device",
+              },
+              { localizationId: "about-debugging-setup-usb-step-plug-device" },
+            ],
+          }
+        )
+        : Localized(
+          {
+            id: "about-debugging-setup-usb-disabled",
+          },
+          dom.aside(
+            {
+              className: "js-connect-usb-disabled-message",
+            },
+            "Enabling this will download and add the required Android USB debugging " +
+              "components to Firefox."
+          )
+        ),
     );
   }
 
@@ -190,33 +189,31 @@ class ConnectPage extends PureComponent {
       },
       ConnectSection(
         {
-          className: "connect-page__network",
+          className: "connect-page__breather",
           icon: GLOBE_ICON_SRC,
-          title: "Via Network Location",
-        },
-        ...(networkEnabled
-          ? [
+          title: "Network Location",
+          extraContent: networkEnabled
+            ? dom.div(
+              {},
               NetworkLocationsList({ dispatch, networkLocations }),
-              dom.hr({ className: "separator separator--breathe" }),
               NetworkLocationsForm({ dispatch }),
-          ]
-          : [
-              // We are using an array for this single element because of the spread
-              // operator (...). The spread operator avoids React warnings about missing
-              // keys.
-              Localized(
-                {
-                  id: "about-debugging-connect-network-disabled",
-                  $pref: PREFERENCES.NETWORK_ENABLED,
-                },
-                dom.div(
-                  {
-                    className: "connect-page__disabled-section",
-                  },
-                  "about-debugging-connect-network-disabled"
-                )
-              ),
-          ])
+            )
+            : null,
+        },
+        networkEnabled
+          ? null
+          : Localized(
+            {
+                id: "about-debugging-connect-network-disabled",
+                $pref: PREFERENCES.NETWORK_ENABLED,
+            },
+            dom.div(
+              {
+                className: "connect-page__disabled-section",
+              },
+              "about-debugging-connect-network-disabled"
+            )
+          ),
       )
     );
   }
@@ -234,12 +231,65 @@ class ConnectPage extends PureComponent {
           {
             className: "alt-heading",
           },
-          "Connect a Device"
+          "Setup"
+        ),
+      ),
+      Localized(
+        {
+          id: "about-debugging-setup-intro",
+        },
+        dom.p(
+          {},
+          "Configure the connection method you wish to remotely debug your device with."
         )
       ),
-      this.renderWifi(),
-      this.renderUsb(),
-      this.renderNetwork()
+      Localized(
+        {
+          id: "about-debugging-setup-link-android-devices",
+        },
+        dom.p(
+          {},
+          dom.a(
+            {
+              href: "https://support.mozilla.org/kb/will-firefox-work-my-mobile-device#w_android-devices",
+              target: "_blank",
+            },
+            "View list of supported android devices"
+          )
+        ),
+      ),
+      Localized(
+        {
+          id: "about-debugging-setup-this-firefox",
+          a: Link({
+            to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
+          }),
+        },
+        dom.p(
+          {
+            className: "connect-page__breather",
+          },
+          "about-debugging-setup-this-firefox",
+        ),
+      ),
+      dom.section(
+        {
+          className: "connect-page__breather",
+        },
+        Localized(
+          {
+            id: "about-debugging-setup-connect-heading",
+          },
+          dom.h1(
+            {
+              className: "alt-heading",
+            },
+            "Connect a device",
+          ),
+        ),
+        this.renderUsb(),
+        this.renderNetwork()
+      ),
     );
   }
 }
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
new file mode 100644
index 000000000000..509330f306f7
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.css
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.connect-section {
+  --icon-size: calc(var(--base-unit) * 9);
+  --header-col-gap: calc(var(--base-unit) * 2);
+}
+
+/*
+ *  +--------+----------------+
+ *  | <icon> |  <heading> 1fr |
+ *  +--------+----------------+
+ */
+.connect-section__header {
+  display: grid;
+  grid-template-areas: "icon heading";
+  grid-template-columns: auto 1fr;
+  grid-template-rows: var(--icon-size);
+  grid-column-gap: var(--header-col-gap);
+  align-items: center;
+
+  padding-block: calc(var(--base-unit) * 4);
+  padding-inline: calc(var(--base-unit) * 5);
+}
+
+.connect-section__header__title {
+  grid-area: heading;
+}
+
+.connect-section__header__icon {
+  grid-area: icon;
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+
+.connect-section__content {
+  line-height: 1.5;
+  padding-inline-start: calc(var(--base-unit) * 5
+    + var(--header-col-gap) + var(--icon-size));
+  padding-inline-end: calc(var(--base-unit) * 5);
+  padding-block-end: calc(var(--base-unit) * 4);
+}
+
+.connect-section__extra {
+  border-block-start: 1px solid var(--card-separator-color);
+  padding-block-end: calc(var(--base-unit) * 4);
+}
\ No newline at end of file
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
index f3ba81d675e6..a3139a474862 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
@@ -11,31 +11,57 @@ const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 class ConnectSection extends PureComponent {
   static get propTypes() {
     return {
-      children: PropTypes.node.isRequired,
+      children: PropTypes.node,
       className: PropTypes.string,
+      extraContent: PropTypes.node,
       icon: PropTypes.string.isRequired,
-      title: PropTypes.string.isRequired,
+      title: PropTypes.node.isRequired,
     };
   }
 
-  render() {
+  renderExtraContent() {
+    const { extraContent } = this.props;
     return dom.section(
       {
-        className: `page__section ${this.props.className || ""}`,
+        className: "connect-section__extra",
       },
-      dom.h2(
+      extraContent,
+    );
+  }
+
+  render() {
+    const { extraContent } = this.props;
+
+    return dom.section(
+      {
+        className: `card connect-section ${this.props.className || ""}`,
+      },
+      dom.header(
         {
-          className: "alt-subheading",
+          className: "connect-section__header",
         },
         dom.img(
           {
-            className: "alt-subheading__icon",
+            className: "connect-section__header__icon",
             src: this.props.icon,
-          }
+          },
+        ),
+        dom.h1(
+          {
+            className: "card__heading connect-section__header__title",
+          },
+          this.props.title,
         ),
-        this.props.title
       ),
       this.props.children
+        ? dom.div(
+          {
+            className: "connect-section__content",
+          },
+          this.props.children
+        )
+        : null,
+      extraContent ? this.renderExtraContent() : null,
     );
   }
 }
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
index 3516cff68f19..bddd513aa728 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css
@@ -5,7 +5,7 @@
 .connect-page__step-list {
   list-style-type: decimal;
   list-style-position: outside;
-  margin-inline-start: calc(var(--section-inline-margin) + var(--base-unit) * 4);
+  margin-inline-start: calc(var(--base-unit) * 4);
 }
 
 .connect-page__step {
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
index a1245a850e87..30a4accb5c19 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
@@ -4,14 +4,22 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { PureComponent, 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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
 class ConnectSteps extends PureComponent {
   static get propTypes() {
     return {
-      steps: PropTypes.arrayOf(PropTypes.string).isRequired,
+      steps: PropTypes.arrayOf(
+        PropTypes.shape({
+          localizationId: PropTypes.string.isRequired,
+          url: PropTypes.string,
+        }).isRequired,
+      ),
     };
   }
 
@@ -20,12 +28,23 @@ class ConnectSteps extends PureComponent {
       {
         className: "connect-page__step-list",
       },
-      this.props.steps.map(step => dom.li(
-        {
-          className: "connect-page__step",
-          key: step,
-        },
-        step)
+      this.props.steps.map(step =>
+        Localized(
+          {
+            id: step.localizationId,
+            a: step.url ? dom.a({
+              href: step.url,
+              target: "_blank",
+            }) : null,
+          },
+          dom.li(
+            {
+              className: "connect-page__step",
+              key: step,
+            },
+            step
+          )
+        )
       )
     );
   }
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
index ee09950e19ea..337fa23d4f7b 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css
@@ -14,4 +14,6 @@
   grid-column-gap: calc(var(--base-unit) * 2);
   grid-template-columns: auto 1fr auto;
   align-items: center;
+  padding-block-start: calc(var(--base-unit) * 4);
+  padding-inline: calc(var(--base-unit) * 6);
 }
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
index 3d733805540b..5dd9c04eee8b 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -68,7 +68,7 @@ class NetworkLocationsForm extends PureComponent {
         },
         dom.button(
           {
-            className: "default-button js-network-form-submit-button",
+            className: "primary-button js-network-form-submit-button",
           },
           "Add"
         )
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
index 51c0f5b21824..e5676b784a06 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css
@@ -9,8 +9,12 @@
  *  | Location (eg localhost:8080)        | Remove button |
  *  +-------------------------------------+---------------+
  */
-.connect-page__network-location {
+.network-location {
   display: grid;
   grid-template-columns: auto max-content;
-  margin: calc(var(--base-unit) * 2) 0;
-}
\ No newline at end of file
+  align-items: center;
+
+  padding-block: calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 6);
+  border-bottom: 1px solid var(--card-separator-color);
+}
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
index c44c3976d465..89004b2872c1 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
@@ -28,7 +28,7 @@ class NetworkLocationsList extends PureComponent {
       this.props.networkLocations.map(location =>
         dom.li(
           {
-            className: "connect-page__network-location js-network-location",
+            className: "network-location js-network-location",
             key: location,
           },
           dom.span(
@@ -48,29 +48,17 @@ class NetworkLocationsList extends PureComponent {
                   this.props.dispatch(Actions.removeNetworkLocation(location));
                 },
               },
-              "Remove"
-            )
+              "Remove",
+            ),
           )
         )
       )
     );
   }
 
-  renderEmpty() {
-    return Localized(
-      {
-        id: "about-debugging-network-locations-empty-text",
-      },
-      dom.p(
-        {},
-        "No network locations have been added yet."
-      )
-    );
-  }
-
   render() {
     return this.props.networkLocations.length > 0 ?
-      this.renderList() : this.renderEmpty();
+      this.renderList() : null;
   }
 }
 
diff --git a/devtools/client/aboutdebugging-new/src/components/connect/moz.build b/devtools/client/aboutdebugging-new/src/components/connect/moz.build
index f0dd72d445cd..5f1e81c17908 100644
--- a/devtools/client/aboutdebugging-new/src/components/connect/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/connect/moz.build
@@ -5,6 +5,7 @@
 DevToolsModules(
     'ConnectPage.css',
     'ConnectPage.js',
+    'ConnectSection.css',
     'ConnectSection.js',
     'ConnectSteps.css',
     'ConnectSteps.js',
diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
index 8f7924deaa36..8b942349d780 100644
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -19,6 +19,9 @@
   grid-template-areas: "icon name   action"
                        ".    detail detail";
   margin-block-end: calc(var(--base-unit) * 4);
+
+  padding-block: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
+  padding-inline: calc(var(--base-unit) * 3) calc(var(--base-unit) * 2);
 }
 
 .debug-target-item__icon {
diff --git a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
index e91641d6ab57..227a030d6132 100644
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -21,7 +21,7 @@ const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
 const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
 const RefreshDevicesButton = createFactory(require("./RefreshDevicesButton"));
 const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
-const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
+const CONNECT_ICON = "chrome://devtools/skin/images/settings.svg";
 const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 const USB_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 
@@ -133,14 +133,14 @@ class Sidebar extends PureComponent {
       dom.ul(
         {},
         Localized(
-          { id: "about-debugging-sidebar-connect", attrs: { name: true } },
+          { id: "about-debugging-sidebar-setup", attrs: { name: true } },
           SidebarFixedItem({
             dispatch,
             icon: CONNECT_ICON,
             isSelected: PAGE_TYPES.CONNECT === selectedPage,
             key: PAGE_TYPES.CONNECT,
-            name: "Connect",
-            to: "/connect",
+            name: "Setup",
+            to: "/setup",
           })
         ),
         Localized(
diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
index 3ed8e42c3b12..cf59c6c6690e 100644
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
@@ -17,7 +17,7 @@ add_task(async function() {
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
-  const connectSidebarItem = findSidebarItemByText("Connect", document);
+  const connectSidebarItem = findSidebarItemByText("Setup", document);
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
index 7f2499056d57..70e0a50b7b32 100644
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
@@ -22,7 +22,7 @@ add_task(async function() {
   const AboutDebugging = window.AboutDebugging;
   await selectThisFirefoxPage(document, AboutDebugging.store);
 
-  const connectSidebarItem = findSidebarItemByText("Connect", document);
+  const connectSidebarItem = findSidebarItemByText("Setup", document);
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
index 2b95b65182f0..a00281cc4cc1 100644
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
@@ -4,12 +4,12 @@
 "use strict";
 
 /**
- * Test that the initial route is /connect
+ * Test that the initial route is /setup
  */
 add_task(async function() {
-  info("Check root route redirects to connect page");
+  info("Check root route redirects to setup page");
   const { document, tab } = await openAboutDebugging();
-  is(document.location.hash, "#/connect");
+  is(document.location.hash, "#/setup");
 
   await removeTab(tab);
 });
@@ -36,14 +36,14 @@ add_task(async function() {
       "Checking title for 'runtime' page"
   );
 
-  info("Check 'Connect' page");
-  document.location.hash = "#/connect";
+  info("Check 'Setup' page");
+  document.location.hash = "#/setup";
   await waitUntil(() => document.querySelector(".js-connect-page"));
-  ok(true, "Connect page has been shown");
+  ok(true, "Setup page has been shown");
   is(
       document.title,
-      "Debugging - Connect",
-      "Checking title for 'connect' page"
+      "Debugging - Setup",
+      "Checking title for 'setup' page"
   );
 
   info("Check 'USB device runtime' page");
@@ -75,7 +75,7 @@ add_task(async function() {
   info("Check an invalid route redirects to root");
   const { document, tab } = await openAboutDebugging();
 
-  info("Waiting for a non connect page to load");
+  info("Waiting for a non setup page to load");
   document.location.hash = "#/runtime/this-firefox";
   await waitUntil(() => document.querySelector(".js-runtime-page"));
 
@@ -84,10 +84,10 @@ add_task(async function() {
   await waitUntil(() => document.querySelector(".js-connect-page"));
   is(
       document.title,
-      "Debugging - Connect",
-      "Checking title for 'connect' page"
+      "Debugging - Setup",
+      "Checking title for 'setup' page"
   );
-  is(document.location.hash, "#/connect", "Redirected to root");
+  is(document.location.hash, "#/setup", "Redirected to root");
 
   await removeTab(tab);
 });
diff --git a/devtools/client/aboutdebugging-new/test/browser/head.js b/devtools/client/aboutdebugging-new/test/browser/head.js
index ead377413635..11cf4794dff9 100644
--- a/devtools/client/aboutdebugging-new/test/browser/head.js
+++ b/devtools/client/aboutdebugging-new/test/browser/head.js
@@ -197,7 +197,7 @@ async function selectThisFirefoxPage(doc, store) {
 async function selectConnectPage(doc) {
   const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
   const connectSidebarItem = [...sidebarItems].find(element => {
-    return element.textContent === "Connect";
+    return element.textContent === "Setup";
   });
   ok(connectSidebarItem, "Sidebar contains a Connect item");
   const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
diff --git a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
index c187249dc7e0..28f6750276b4 100644
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -17,8 +17,8 @@ about-debugging-sidebar-this-firefox =
   .name = { about-debugging-this-firefox-runtime-name }
 
 # Sidebar heading for connecting to some remote source
-about-debugging-sidebar-connect =
-  .name = Connect
+about-debugging-sidebar-setup =
+  .name = Setup
 
 # Text displayed in the about:debugging sidebar when USB devices discovery is enabled.
 about-debugging-sidebar-usb-enabled = USB enabled
@@ -60,51 +60,39 @@ about-debugging-sidebar-runtime-item-name-no-device =
 # UI, do not localize.
 about-debugging-refresh-usb-devices-button = Refresh devices
 
-# Title of the Connect page.
-about-debugging-connect-title = Connect a Device
+# Title of the Setup page.
+about-debugging-connect-title = Setup
 
-# WiFi section of the Connect page
-about-debugging-connect-wifi =
-  .title = Via WiFi
+# Explanatory text in the Setup page about what the 'This Firefox' page is for
+about-debugging-setup-this-firefox = Use <a>This Firefox</a> to debug tags, extensions and service workers on this version of Firefox.
 
-# Temporary text displayed when wifi support is turned off via preferences.
-# { $pref } is the name of the preference that enables wifi
-# Do not localize
-about-debugging-connect-wifi-disabled = WiFi debugging currently under development. You can enable it with the preference “{ $pref }”.
+# USB section of the Setup page
+about-debugging-setup-usb-title = USB
+about-debugging-setup-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
+about-debugging-setup-usb-enable-button = Enable USB Devices
+about-debugging-setup-usb-disable-button = Disable USB Devices
+about-debugging-setup-usb-updating-button = Updating…
 
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-same-network = Ensure that your browser and device are on the same network
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-open-firefox = Open Firefox for Android
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-open-options = Go to Options -> Settings -> Advanced
-
-# WiFi section step by step guide
-about-debugging-connect-wifi-step-enable-debug = Enable Remote Debugging via WiFi in the Developer Tools section
-
-# USB section of the Connect page
-about-debugging-connect-usb =
-  .title = Via USB
-
-about-debugging-connect-usb-disabled = Enabling this will download and add the required Android USB debugging components to Firefox.
-about-debugging-connect-usb-enable-button = Enable USB Devices
-about-debugging-connect-usb-disable-button = Disable USB Devices
-about-debugging-connect-usb-updating-button = Updating…
+# USB section of the Setup page (USB status)
+about-debugging-setup-usb-status-enabled = Enabled
+about-debugging-setup-usb-status-disabled = Disabled
+about-debugging-setup-usb-status-updating = Updating…
 
 # USB section step by step guide
-about-debugging-connect-usb-step-enable-dev-menu = Enable Developer menu on your Android device
+about-debugging-setup-usb-step-enable-dev-menu = Enable Developer menu on your Android device. <a>Learn how</a>
 
 # USB section step by step guide
-about-debugging-connect-usb-step-enable-debug = Enable USB Debugging on the Android Developer Menu
+about-debugging-setup-usb-step-enable-debug = Enable USB Debugging in the Android Developer Menu. <a>Learn how</a>
 
 # USB section step by step guide
-about-debugging-connect-usb-step-plug-device = Connect the USB Device to your computer
+about-debugging-setup-usb-step-enable-debug-firefox = Enable USB Debugging in Firefox on the Android device. <a>Learn how</a>
+
+# USB section step by step guide
+about-debugging-setup-usb-step-plug-device = Connect the Android device to your computer.
 
 # Network section of the Connect page
 about-debugging-connect-network =
-  .title = Via Network Location
+  .title = Network Location
 
 # Temporary text displayed when network location support is turned off via preferences.
 # { $pref } is the name of the preference that enables network locations
@@ -289,7 +277,7 @@ about-debugging-connection-prompt-disable-button = Disable connection prompt
 # Part of "about-debugging-page-title" string defined below
 about-debugging-page-title-selected-page =
   { $selectedPage ->
-     [connect] Connect
+     [connect] Setup
      *[runtime] Runtime
   }
 
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
index 422ec31c79a2..1235518263ac 100644
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -223,6 +223,7 @@
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
+  --blue-80: #002275;
 
   --teal-60: #00c8d7;
   --teal-70: #008ea4;