From a85a4cf97ede1a02b80632362bd965937708e18b Mon Sep 17 00:00:00 2001
From: Danica Shen <zhaodanica@gmail.com>
Date: Fri, 4 Aug 2023 12:33:47 +0100
Subject: [PATCH] feat(878): add new incomingTxn component and change styles of
 settings (#20374)

* feat(878): add new incomingTxn component and change styles of settings

* feat(878): relocate openSea tab from rebase regression

* feat(878): make UI and test modifications

* feat(878): transfer to ts

* feat(878): rename network-toggle.tsx
---
 app/_locales/en/messages.json                 |   6 +
 .../incoming-transaction-toggle.test.js.snap  | 472 ++++++++++++
 .../incoming-transaction-toggle.test.js       | 209 +++++
 .../incoming-transaction-toggle.tsx           | 145 ++++
 .../network-toggle.tsx                        | 104 +++
 .../privacy-settings/setting.js               |  37 +-
 .../advanced-tab.component.test.js.snap       | 656 ++++++++++++++++
 .../advanced-tab/advanced-tab.component.js    | 209 ++---
 .../advanced-tab.component.test.js            |   6 +
 ui/pages/settings/alerts-tab/alerts-tab.scss  |   1 +
 .../experimental-tab.test.js.snap             |  42 +-
 .../experimental-tab.component.js             |  38 +-
 ui/pages/settings/index.scss                  |   9 +-
 .../__snapshots__/security-tab.test.js.snap   | 712 +++++++++---------
 .../security-tab/security-tab.component.js    | 487 ++++++------
 .../settings-tab/settings-tab.component.js    |  74 +-
 16 files changed, 2443 insertions(+), 764 deletions(-)
 create mode 100644 ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
 create mode 100644 ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
 create mode 100644 ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
 create mode 100644 ui/components/app/incoming-trasaction-toggle/network-toggle.tsx
 create mode 100644 ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index cf2684e9c..545a84f82 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1397,6 +1397,9 @@
   "enableAutoDetect": {
     "message": " Enable autodetect"
   },
+  "enableForAllNetworks": {
+    "message": "Enable for all networks"
+  },
   "enableFromSettings": {
     "message": " Enable it from Settings."
   },
@@ -3850,6 +3853,9 @@
     "message": "This relies on $1 which will have access to your Ethereum address and your IP address. $2",
     "description": "$1 is the link to etherscan url and $2 is the link to the privacy policy of consensys APIs"
   },
+  "showIncomingTransactionsInformation": {
+    "message": "This relies on each network which will have access to your Ethereum address and your IP address."
+  },
   "showMore": {
     "message": "Show more"
   },
diff --git a/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
new file mode 100644
index 000000000..e842c4c0f
--- /dev/null
+++ b/ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap
@@ -0,0 +1,472 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IncomingTransactionToggle should render existing incoming transaction preferences 1`] = `
+<div>
+  <div
+    class="mm-box mm-incoming-transaction-toggle"
+  >
+    <p
+      class="mm-box mm-text mm-text--body-lg-medium mm-text--font-weight-bold mm-box--color-text-default"
+    >
+      Show incoming transactions
+    </p>
+    <p
+      class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+    >
+      This relies on each network which will have access to your Ethereum address and your IP address.
+    </p>
+    <div
+      class="mm-box mm-box--margin-top-3 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="incoming-transaction-toggle-enable-all"
+    >
+      <p
+        class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+      >
+         
+        Enable for all networks
+      </p>
+      <label
+        class="toggle-button toggle-button--off"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="false"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0x1"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <img
+            alt="Ethereum Mainnet logo"
+            class="mm-avatar-network__network-image"
+            src="./images/eth_logo.png"
+          />
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          Ethereum Mainnet
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--on"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="true"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0xe708"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <img
+            alt="Linea Mainnet logo"
+            class="mm-avatar-network__network-image"
+            src="./images/linea-logo-mainnet.png"
+          />
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          Linea Mainnet
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--off"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="false"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0xfa"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          F
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          FANTOM
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--on"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="true"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0x5"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          G
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          Goerli
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--off"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="false"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0xaa36a7"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          S
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          Sepolia
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--on"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="true"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+    <div
+      class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="network-toggle-0xe704"
+    >
+      <div
+        class="mm-box mm-box--display-flex mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+      >
+        <div
+          class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
+        >
+          <img
+            alt="Linea Goerli logo"
+            class="mm-avatar-network__network-image"
+            src="./images/linea-logo-testnet.png"
+          />
+        </div>
+        <p
+          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--margin-left-2 mm-box--color-text-default mm-box--background-color-transparent"
+        >
+          Linea Goerli
+        </p>
+      </div>
+      <label
+        class="toggle-button toggle-button--on"
+        tabindex="0"
+      >
+        <div
+          style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+        >
+          <div
+            style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+          >
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+            />
+            <div
+              style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+            />
+          </div>
+          <div
+            style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+          >
+            <div
+              style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+            />
+          </div>
+          <input
+            style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+            type="checkbox"
+            value="true"
+          />
+        </div>
+        <div
+          class="toggle-button__status"
+        >
+          <span
+            class="toggle-button__label-off"
+          >
+            Off
+          </span>
+          <span
+            class="toggle-button__label-on"
+          >
+            On
+          </span>
+        </div>
+      </label>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
new file mode 100644
index 000000000..c7854a681
--- /dev/null
+++ b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
@@ -0,0 +1,209 @@
+import React from 'react';
+import { fireEvent, within } from '@testing-library/react';
+import configureMockState from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import IncomingTransactionToggle from './incoming-transaction-toggle';
+
+const mockTrackEvent = jest.fn();
+const ALL_NETWORKS_DATA = [
+  {
+    chainId: '0x1',
+    nickname: 'Ethereum Mainnet',
+    rpcUrl: 'https://mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
+    rpcPrefs: {
+      imageUrl: './images/eth_logo.png',
+    },
+    providerType: 'mainnet',
+    ticker: 'ETH',
+    id: 'mainnet',
+    removable: false,
+  },
+  {
+    chainId: '0xe708',
+    nickname: 'Linea Mainnet',
+    rpcUrl:
+      'https://linea-mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
+    rpcPrefs: {
+      imageUrl: './images/linea-logo-mainnet.png',
+    },
+    providerType: 'linea-mainnet',
+    id: 'linea-mainnet',
+    removable: false,
+  },
+  {
+    chainId: '0xfa',
+    nickname: 'FANTOM',
+    rpcPrefs: {},
+    rpcUrl: 'http://ftmscan.com5',
+    ticker: 'FTM',
+  },
+  {
+    chainId: '0x5',
+    nickname: 'Goerli',
+    rpcUrl: 'https://goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
+    providerType: 'goerli',
+    ticker: 'GoerliETH',
+    id: 'goerli',
+    removable: false,
+  },
+  {
+    chainId: '0xaa36a7',
+    nickname: 'Sepolia',
+    rpcUrl: 'https://sepolia.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
+    providerType: 'sepolia',
+    ticker: 'SepoliaETH',
+    id: 'sepolia',
+    removable: false,
+  },
+  {
+    chainId: '0xe704',
+    nickname: 'Linea Goerli',
+    rpcUrl:
+      'https://linea-goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
+    rpcPrefs: {
+      imageUrl: './images/linea-logo-testnet.png',
+    },
+    providerType: 'linea-goerli',
+    ticker: 'LineaETH',
+    id: 'linea-goerli',
+    removable: false,
+  },
+];
+
+const INCOMING_DATA = {
+  '0x1': true,
+  '0xe708': false,
+  '0xfa': true,
+  '0x5': false,
+  '0xaa36a7': true,
+  '0xe704': true,
+};
+
+describe('IncomingTransactionToggle', () => {
+  const mockStore = configureMockState([thunk])(mockState);
+  let setIncomingTransactionsPreferencesStub;
+
+  beforeEach(() => {
+    setIncomingTransactionsPreferencesStub = jest.fn();
+  });
+
+  it('should render existing incoming transaction preferences', () => {
+    const { container, getByTestId } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <IncomingTransactionToggle
+          setIncomingTransactionsPreferences={
+            setIncomingTransactionsPreferencesStub
+          }
+          allNetworks={ALL_NETWORKS_DATA}
+          incomingTransactionsPreferences={INCOMING_DATA}
+        />
+      </MetaMetricsContext.Provider>,
+      mockStore,
+    );
+    expect(container).toMatchSnapshot();
+    const enableForAllCheckbox = within(
+      getByTestId('incoming-transaction-toggle-enable-all'),
+    ).getByRole('checkbox');
+    expect(enableForAllCheckbox.checked).toStrictEqual(false);
+
+    const ethMainnetCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[0].chainId}`),
+    ).getByRole('checkbox');
+    expect(ethMainnetCheckbox.value).toStrictEqual('true');
+    const lineaMainnetCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
+    ).getByRole('checkbox');
+    expect(lineaMainnetCheckbox.value).toStrictEqual('false');
+    const fantomCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[2].chainId}`),
+    ).getByRole('checkbox');
+    expect(fantomCheckbox.value).toStrictEqual('true');
+    const goerliCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
+    ).getByRole('checkbox');
+    expect(goerliCheckbox.value).toStrictEqual('false');
+    const sepoliaCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[4].chainId}`),
+    ).getByRole('checkbox');
+    expect(sepoliaCheckbox.value).toStrictEqual('true');
+    const lineaGoerliCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[5].chainId}`),
+    ).getByRole('checkbox');
+    expect(lineaGoerliCheckbox.value).toStrictEqual('true');
+  });
+
+  it('should trigger settle for all when click toggle all button', () => {
+    const { getByTestId } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <IncomingTransactionToggle
+          setIncomingTransactionsPreferences={
+            setIncomingTransactionsPreferencesStub
+          }
+          allNetworks={ALL_NETWORKS_DATA}
+          incomingTransactionsPreferences={INCOMING_DATA}
+        />
+      </MetaMetricsContext.Provider>,
+      mockStore,
+    );
+    const enableForAllCheckbox = within(
+      getByTestId('incoming-transaction-toggle-enable-all'),
+    ).getByRole('checkbox');
+    fireEvent.click(enableForAllCheckbox);
+    // set 2 false to true
+    expect(setIncomingTransactionsPreferencesStub).toHaveBeenCalledTimes(2);
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[0][0],
+    ).toStrictEqual('0xe708');
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[0][1],
+    ).toStrictEqual(true);
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[1][0],
+    ).toStrictEqual('0x5');
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[1][1],
+    ).toStrictEqual(true);
+  });
+
+  it('should trigger settle for one when click toggle one button', () => {
+    const { getByTestId } = renderWithProvider(
+      <MetaMetricsContext.Provider value={mockTrackEvent}>
+        <IncomingTransactionToggle
+          setIncomingTransactionsPreferences={
+            setIncomingTransactionsPreferencesStub
+          }
+          allNetworks={ALL_NETWORKS_DATA}
+          incomingTransactionsPreferences={INCOMING_DATA}
+        />
+      </MetaMetricsContext.Provider>,
+      mockStore,
+    );
+    const lineaMainnetCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
+    ).getByRole('checkbox');
+    fireEvent.click(lineaMainnetCheckbox);
+    // set 1 false to true
+    expect(setIncomingTransactionsPreferencesStub).toHaveBeenCalledTimes(1);
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[0][0],
+    ).toStrictEqual('0xe708');
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[0][1],
+    ).toStrictEqual(true);
+
+    // set 1 false to true
+    const goerliCheckbox = within(
+      getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
+    ).getByRole('checkbox');
+    fireEvent.click(goerliCheckbox);
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[1][0],
+    ).toStrictEqual('0x5');
+    expect(
+      setIncomingTransactionsPreferencesStub.mock.calls[1][1],
+    ).toStrictEqual(true);
+  });
+});
diff --git a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
new file mode 100644
index 000000000..cbcfc4486
--- /dev/null
+++ b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
@@ -0,0 +1,145 @@
+import React, { useContext, useEffect, useState } from 'react';
+
+import PropTypes from 'prop-types';
+import { I18nContext } from '../../../contexts/i18n';
+
+import ToggleButton from '../../ui/toggle-button';
+import { Box, Text } from '../../component-library';
+import {
+  Display,
+  FlexDirection,
+  JustifyContent,
+  TextVariant,
+  FontWeight,
+  TextColor,
+} from '../../../helpers/constants/design-system';
+
+import { PolymorphicRef } from '../../component-library/box';
+import { TEST_CHAINS } from '../../../../shared/constants/network';
+import NetworkToggle from './network-toggle';
+
+interface IncomingTransactionToggleProps {
+  wrapperRef: PolymorphicRef<any>;
+  incomingTransactionsPreferences: Record<string, boolean>;
+  allNetworks: [Record<string, any>];
+  setIncomingTransactionsPreferences: (
+    chainId: string,
+    isAllEnabledValue: boolean,
+  ) => void;
+}
+
+const IncomingTransactionToggle = ({
+  wrapperRef,
+  incomingTransactionsPreferences,
+  allNetworks,
+  setIncomingTransactionsPreferences,
+}: IncomingTransactionToggleProps) => {
+  const t = useContext(I18nContext);
+
+  const [networkPreferences, setNetworkPreferences] = useState(
+    generateIncomingNetworkPreferences(
+      incomingTransactionsPreferences,
+      allNetworks,
+    ),
+  );
+
+  const [isAllEnabled, setIsAllEnabled] = useState(
+    checkAllNetworks(incomingTransactionsPreferences),
+  );
+
+  useEffect(() => {
+    setNetworkPreferences(
+      generateIncomingNetworkPreferences(
+        incomingTransactionsPreferences,
+        allNetworks,
+      ),
+    );
+  }, [incomingTransactionsPreferences, allNetworks]);
+
+  useEffect(() => {
+    setIsAllEnabled(checkAllNetworks(incomingTransactionsPreferences));
+  }, [incomingTransactionsPreferences]);
+
+  const toggleAllEnabled = (isAllEnabledValue: boolean): void => {
+    Object.keys(incomingTransactionsPreferences).forEach((chainId) => {
+      if (incomingTransactionsPreferences[chainId] !== isAllEnabledValue) {
+        setIncomingTransactionsPreferences(chainId, isAllEnabledValue);
+      }
+    });
+  };
+
+  const toggleSingleNetwork = (chainId: string, value: boolean): void => {
+    setIncomingTransactionsPreferences(chainId, value);
+  };
+
+  return (
+    <Box ref={wrapperRef} className="mm-incoming-transaction-toggle">
+      <Text variant={TextVariant.bodyLgMedium} fontWeight={FontWeight.Bold}>
+        {t('showIncomingTransactions')}
+      </Text>
+
+      <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
+        {t('showIncomingTransactionsInformation')}
+      </Text>
+      <Box
+        marginTop={3}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        data-testid="incoming-transaction-toggle-enable-all"
+      >
+        <Text variant={TextVariant.bodyMd}> {t('enableForAllNetworks')}</Text>
+        <ToggleButton
+          value={isAllEnabled}
+          onToggle={(value) => toggleAllEnabled(!value)}
+          offLabel={t('off')}
+          onLabel={t('on')}
+        />
+      </Box>
+      {Object.keys(networkPreferences).map((chainId, index) => {
+        return (
+          <NetworkToggle
+            key={index}
+            chainId={chainId}
+            networkPreferences={networkPreferences[chainId]}
+            toggleSingleNetwork={toggleSingleNetwork}
+          />
+        );
+      })}
+    </Box>
+  );
+};
+
+export default IncomingTransactionToggle;
+
+IncomingTransactionToggle.propTypes = {
+  wrapperRef: PropTypes.object,
+  incomingTransactionsPreferences: PropTypes.object.isRequired,
+  allNetworks: PropTypes.array.isRequired,
+  setIncomingTransactionsPreferences: PropTypes.func.isRequired,
+};
+
+function generateIncomingNetworkPreferences(
+  incomingTransactionsPreferences: Record<string, boolean>,
+  allNetworks: Record<string, any>,
+): Record<string, any> {
+  const incomingTxnPreferences: Record<string, any> = {};
+
+  Object.keys(allNetworks).forEach((id) => {
+    const { chainId } = allNetworks[id];
+    incomingTxnPreferences[chainId] = {
+      isShowIncomingTransactions: incomingTransactionsPreferences[chainId],
+      isATestNetwork: TEST_CHAINS.includes(chainId),
+      label: allNetworks[id].nickname,
+      imageUrl: allNetworks[id].rpcPrefs?.imageUrl,
+    };
+  });
+
+  return incomingTxnPreferences;
+}
+
+function checkAllNetworks(
+  incomingTransactionsPreferences: Record<string, boolean>,
+): boolean {
+  return Object.values(incomingTransactionsPreferences).every(Boolean);
+}
diff --git a/ui/components/app/incoming-trasaction-toggle/network-toggle.tsx b/ui/components/app/incoming-trasaction-toggle/network-toggle.tsx
new file mode 100644
index 000000000..f3d9ebce8
--- /dev/null
+++ b/ui/components/app/incoming-trasaction-toggle/network-toggle.tsx
@@ -0,0 +1,104 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+  Box,
+  Text,
+} from '../../component-library';
+import {
+  AlignItems,
+  BackgroundColor,
+  BlockSize,
+  Display,
+  FlexDirection,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+
+import Tooltip from '../../ui/tooltip';
+import ToggleButton from '../../ui/toggle-button';
+import { I18nContext } from '../../../contexts/i18n';
+
+const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 20;
+
+interface NetworkPreferences {
+  isShowIncomingTransactions: boolean;
+  label: string;
+  imageUrl: string;
+}
+
+interface NetworkToggleProps {
+  networkPreferences: NetworkPreferences;
+  toggleSingleNetwork: (chainId: string, value: boolean) => void;
+  chainId: string;
+}
+
+const NetworkToggle = ({
+  networkPreferences,
+  toggleSingleNetwork,
+  chainId,
+}: NetworkToggleProps) => {
+  const t = useContext(I18nContext);
+
+  const { isShowIncomingTransactions } = networkPreferences;
+
+  const networkName = networkPreferences.label;
+
+  return (
+    <Box
+      marginTop={6}
+      marginBottom={6}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Row}
+      justifyContent={JustifyContent.spaceBetween}
+      data-testid={`network-toggle-${chainId}`}
+      className="network-toggle-wrapper"
+    >
+      <Box
+        gap={2}
+        backgroundColor={BackgroundColor.transparent}
+        display={Display.Flex}
+        alignItems={AlignItems.center}
+        width={BlockSize.Full}
+      >
+        <AvatarNetwork
+          size={AvatarNetworkSize.Sm}
+          src={networkPreferences.imageUrl}
+          name={networkName}
+        />
+        <Text
+          color={TextColor.textDefault}
+          backgroundColor={BackgroundColor.transparent}
+          variant={TextVariant.bodyMd}
+          ellipsis
+          marginLeft={2}
+        >
+          {networkName.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
+            <Tooltip title={networkName} position="bottom">
+              {networkName}
+            </Tooltip>
+          ) : (
+            networkName
+          )}
+        </Text>
+      </Box>
+
+      <ToggleButton
+        value={isShowIncomingTransactions}
+        onToggle={(value) => toggleSingleNetwork(chainId, !value)}
+        offLabel={t('off')}
+        onLabel={t('on')}
+      />
+    </Box>
+  );
+};
+
+export default NetworkToggle;
+
+NetworkToggle.propTypes = {
+  chainId: PropTypes.string.isRequired,
+  networkPreferences: PropTypes.object.isRequired,
+  toggleSingleNetwork: PropTypes.func.isRequired,
+};
diff --git a/ui/pages/onboarding-flow/privacy-settings/setting.js b/ui/pages/onboarding-flow/privacy-settings/setting.js
index aa34562a1..7c77cd93f 100644
--- a/ui/pages/onboarding-flow/privacy-settings/setting.js
+++ b/ui/pages/onboarding-flow/privacy-settings/setting.js
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Box from '../../../components/ui/box';
-import Typography from '../../../components/ui/typography';
+import { Box, Text } from '../../../components/component-library';
 import ToggleButton from '../../../components/ui/toggle-button';
 import {
   JustifyContent,
-  TypographyVariant,
-  FONT_WEIGHT,
+  TextVariant,
+  AlignItems,
+  Display,
+  FontWeight,
 } from '../../../helpers/constants/design-system';
+import { useI18nContext } from '../../../hooks/useI18nContext';
 
 export const Setting = ({
   value,
@@ -16,20 +18,31 @@ export const Setting = ({
   description,
   showToggle = true,
 }) => {
+  const t = useI18nContext();
+
   return (
-    <Box justifyContent={JustifyContent.center} margin={3}>
+    <Box
+      display={Display.Flex}
+      justifyContent={JustifyContent.spaceBetween}
+      alignItems={AlignItems.center}
+      marginTop={3}
+      marginBottom={3}
+      className="privacy-settings__setting__wrapper"
+    >
       <div className="privacy-settings__setting">
-        <Typography
-          variant={TypographyVariant.H5}
-          fontWeight={FONT_WEIGHT.BOLD}
-        >
+        <Text variant={TextVariant.bodyLgMedium} fontWeight={FontWeight.Bold}>
           {title}
-        </Typography>
-        <Typography variant={TypographyVariant.H6}>{description}</Typography>
+        </Text>
+        <Text variant={TextVariant.bodyMd}>{description}</Text>
       </div>
       {showToggle ? (
         <div className="privacy-settings__setting__toggle">
-          <ToggleButton value={value} onToggle={(val) => setValue(!val)} />
+          <ToggleButton
+            value={value}
+            onToggle={(val) => setValue(!val)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
       ) : null}
     </Box>
diff --git a/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
new file mode 100644
index 000000000..eada39a02
--- /dev/null
+++ b/ui/pages/settings/advanced-tab/__snapshots__/advanced-tab.component.test.js.snap
@@ -0,0 +1,656 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdvancedTab Component should match snapshot 1`] = `
+<div>
+  <div
+    class="settings-page__body"
+  >
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="advanced-setting-state-logs"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          State logs
+        </span>
+        <span
+          class="settings-page__content-description"
+        >
+          State logs contain your public account addresses and sent transactions.
+        </span>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <button
+            class="button btn--rounded btn-secondary btn--large"
+            role="button"
+            tabindex="0"
+          >
+            Download state logs
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="advanced-setting-reset-account"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Clear activity and nonce data
+        </span>
+        <span
+          class="settings-page__content-description"
+        >
+          This resets the account's nonce and erases data from the activity tab in your wallet. Only the current account and network will be affected. Your balances and incoming transactions won't change.
+        </span>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <button
+            class="button btn--rounded btn-danger btn--large settings-tab__button--red"
+            role="button"
+            tabindex="0"
+          >
+            Clear activity tab data
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-hex-data"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Show hex data
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Select this to show the hex data field on the send screen
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-show-testnet-conversion"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Show conversion on test networks
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Select this to show fiat conversion on test networks
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-show-testnet-conversion"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Show test networks
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Select this to show test networks in network list
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--on"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="true"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-custom-nonce"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Customize transaction nonce
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="advanced-setting-auto-lock"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Auto-lock timer (minutes)
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Set the idle time in minutes before MetaMask will become locked.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <div
+            class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
+          >
+            <div
+              class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
+            >
+              <input
+                aria-invalid="false"
+                class="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
+                data-testid="auto-lockout-time"
+                dir="auto"
+                id="autoTimeout"
+                min="0"
+                placeholder="0"
+                type="text"
+                value="0"
+              />
+            </div>
+            
+          </div>
+          <button
+            class="button btn--rounded btn-primary settings-tab__rpc-save-button"
+            data-testid="auto-lockout-button"
+            role="button"
+            tabindex="0"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="advanced-setting-data-backup"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Backup your data
+        </span>
+        <span
+          class="settings-page__content-description"
+        >
+          You can backup user settings containing preferences and account addresses into a JSON file.
+        </span>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <button
+            class="button btn--rounded btn-secondary btn--large"
+            data-testid="backup-button"
+            role="button"
+            tabindex="0"
+          >
+            Backup
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="advanced-setting-data-restore"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Restore user data
+        </span>
+        <span
+          class="settings-page__content-description"
+        >
+          You can restore user settings containing preferences and account addresses from a previously backed up JSON file.
+        </span>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <label
+            class="button btn btn--rounded btn-secondary btn--large settings-page__button"
+            for="restore-file"
+          >
+            Restore
+          </label>
+          <input
+            accept=".json"
+            data-testid="restore-file"
+            id="restore-file"
+            style="visibility: hidden;"
+            type="file"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
+      data-testid="ledger-live-control"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Preferred Ledger connection type
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          <span>
+             
+            Customize how you connect your Ledger to MetaMask. 
+            U2F
+             is recommended, but other options are available. Read more here: 
+            <a
+              class="button btn-link settings-page__inline-link"
+              href="https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              learn more
+            </a>
+            
+             
+          </span>
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item"
+      >
+        <div
+          class="settings-page__content-item-col"
+        >
+          <div
+            class="dropdown"
+          >
+            <select
+              class="dropdown__select"
+            >
+              <option
+                value="ledgerLive"
+              >
+                Ledger Live
+              </option>
+              <option
+                value="u2f"
+              >
+                U2F
+              </option>
+            </select>
+            <span
+              class="mm-box dropdown__icon-caret-down mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+              style="mask-image: url('./images/icons/arrow-down.svg');"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-dismiss-reminder"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Dismiss Secret Recovery Phrase backup reminder
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              Off
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              On
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+    <div
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+      data-testid="advanced-setting-toggle-ethsign"
+    >
+      <div
+        class="settings-page__content-item"
+      >
+        <span>
+          Eth_sign requests
+        </span>
+        <div
+          class="settings-page__content-description"
+        >
+          If you enable this setting, you might get signature requests that aren’t readable. By signing a message you don't understand, you could be agreeing to give away your funds and NFTs.
+        </div>
+      </div>
+      <div
+        class="settings-page__content-item-col"
+      >
+        <label
+          class="toggle-button toggle-button--off eth-sign-toggle"
+          tabindex="0"
+        >
+          <div
+            style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+          >
+            <div
+              style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+            >
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+              />
+              <div
+                style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+              />
+            </div>
+            <div
+              style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+            >
+              <div
+                style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+              />
+            </div>
+            <input
+              style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+              type="checkbox"
+              value="false"
+            />
+          </div>
+          <div
+            class="toggle-button__status"
+          >
+            <span
+              class="toggle-button__label-off"
+            >
+              OFF (Recommended)
+            </span>
+            <span
+              class="toggle-button__label-on"
+            >
+              ON (Not recommended)
+            </span>
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index a92451cf7..140a48559 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -1,11 +1,18 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { Box, BannerAlert } from '../../../components/component-library';
 import ToggleButton from '../../../components/ui/toggle-button';
 import TextField from '../../../components/ui/text-field';
 import Button from '../../../components/ui/button';
 import Dropdown from '../../../components/ui/dropdown';
 import Dialog from '../../../components/ui/dialog';
-
+import {
+  Display,
+  FlexDirection,
+  JustifyContent,
+  SEVERITIES,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 import { getPlatform } from '../../../../app/scripts/lib/util';
 
 import { PLATFORM_FIREFOX } from '../../../../shared/constants/app';
@@ -29,11 +36,6 @@ import {
 } from '../../../helpers/utils/export-utils';
 import ActionableMessage from '../../../components/ui/actionable-message';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
-import { BannerAlert } from '../../../components/component-library';
-import {
-  SEVERITIES,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
 
 const CORRUPT_JSON_FILE = 'CORRUPT_JSON_FILE';
 
@@ -167,9 +169,11 @@ export default class AdvancedTab extends PureComponent {
     const { displayWarning } = this.props;
 
     return (
-      <div
-        ref={this.settingsRefs[0]}
+      <Box
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        ref={this.settingsRefs[0]}
         data-testid="advanced-setting-state-logs"
       >
         <div className="settings-page__content-item">
@@ -201,7 +205,7 @@ export default class AdvancedTab extends PureComponent {
             </Button>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -210,9 +214,11 @@ export default class AdvancedTab extends PureComponent {
     const { showResetAccountConfirmationModal } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[1]}
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         data-testid="advanced-setting-reset-account"
       >
         <div className="settings-page__content-item">
@@ -241,7 +247,7 @@ export default class AdvancedTab extends PureComponent {
             </Button>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -250,9 +256,12 @@ export default class AdvancedTab extends PureComponent {
     const { sendHexData, setHexDataFeatureFlag } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[2]}
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
         data-testid="advanced-setting-hex-data"
       >
         <div className="settings-page__content-item">
@@ -261,17 +270,15 @@ export default class AdvancedTab extends PureComponent {
             {t('showHexDataDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={sendHexData}
-              onToggle={(value) => setHexDataFeatureFlag(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={sendHexData}
+            onToggle={(value) => setHexDataFeatureFlag(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -281,9 +288,12 @@ export default class AdvancedTab extends PureComponent {
       this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[3]}
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
         data-testid="advanced-setting-show-testnet-conversion"
       >
         <div className="settings-page__content-item">
@@ -292,19 +302,18 @@ export default class AdvancedTab extends PureComponent {
             {t('showFiatConversionInTestnetsDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={showFiatInTestnets}
-              onToggle={(value) =>
-                setShowFiatConversionOnTestnetsPreference(!value)
-              }
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={showFiatInTestnets}
+            onToggle={(value) =>
+              setShowFiatConversionOnTestnetsPreference(!value)
+            }
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -313,10 +322,13 @@ export default class AdvancedTab extends PureComponent {
     const { showTestNetworks, setShowTestNetworks } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-show-testnet-conversion"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('showTestnetNetworks')}</span>
@@ -324,17 +336,16 @@ export default class AdvancedTab extends PureComponent {
             {t('showTestnetNetworksDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={showTestNetworks}
-              onToggle={(value) => setShowTestNetworks(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={showTestNetworks}
+            onToggle={(value) => setShowTestNetworks(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -343,10 +354,13 @@ export default class AdvancedTab extends PureComponent {
     const { useNonceField, setUseNonceField } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="advanced-setting-custom-nonce"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('nonceField')}</span>
@@ -354,17 +368,16 @@ export default class AdvancedTab extends PureComponent {
             {t('nonceFieldDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={useNonceField}
-              onToggle={(value) => setUseNonceField(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={useNonceField}
+            onToggle={(value) => setUseNonceField(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -374,10 +387,12 @@ export default class AdvancedTab extends PureComponent {
     const { setAutoLockTimeLimit } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-auto-lock"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('autoLockTimeLimit')}</span>
@@ -411,7 +426,7 @@ export default class AdvancedTab extends PureComponent {
             </Button>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -461,10 +476,12 @@ export default class AdvancedTab extends PureComponent {
       : LEDGER_TRANSPORT_NAMES.U2F;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[7]}
         className="settings-page__content-row"
-        data-testId="ledger-live-control"
+        data-testid="ledger-live-control"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('preferredLedgerConnectionType')}</span>
@@ -517,7 +534,7 @@ export default class AdvancedTab extends PureComponent {
             ) : null}
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -527,10 +544,13 @@ export default class AdvancedTab extends PureComponent {
       this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[8]}
         className="settings-page__content-row"
         data-testid="advanced-setting-dismiss-reminder"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('dismissReminderField')}</span>
@@ -538,17 +558,16 @@ export default class AdvancedTab extends PureComponent {
             {t('dismissReminderDescriptionField')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={dismissSeedBackUpReminder}
-              onToggle={(value) => setDismissSeedBackUpReminder(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={dismissSeedBackUpReminder}
+            onToggle={(value) => setDismissSeedBackUpReminder(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -571,10 +590,13 @@ export default class AdvancedTab extends PureComponent {
       });
     };
     return (
-      <div
+      <Box
         ref={this.settingsRefs[9]}
         className="settings-page__content-row"
         data-testid="advanced-setting-toggle-ethsign"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('toggleEthSignField')}</span>
@@ -583,7 +605,7 @@ export default class AdvancedTab extends PureComponent {
           </div>
         </div>
 
-        {disabledRpcMethodPreferences?.eth_sign === true ? (
+        {disabledRpcMethodPreferences?.eth_sign ? (
           <BannerAlert
             severity={SEVERITIES.DANGER}
             marginBottom={5}
@@ -592,20 +614,19 @@ export default class AdvancedTab extends PureComponent {
             {t('toggleEthSignBannerDescription')}
           </BannerAlert>
         ) : null}
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              className="eth-sign-toggle"
-              value={disabledRpcMethodPreferences?.eth_sign || false}
-              onToggle={(value) => {
-                value ? toggleOff(value) : showEthSignModal();
-              }}
-              offLabel={t('toggleEthSignOff')}
-              onLabel={t('toggleEthSignOn')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            className="eth-sign-toggle"
+            value={disabledRpcMethodPreferences?.eth_sign || false}
+            onToggle={(value) => {
+              value ? toggleOff(value) : showEthSignModal();
+            }}
+            offLabel={t('toggleEthSignOff')}
+            onLabel={t('toggleEthSignOn')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -650,10 +671,12 @@ export default class AdvancedTab extends PureComponent {
   renderUserDataBackup() {
     const { t } = this.context;
     return (
-      <div
+      <Box
         ref={this.settingsRefs[10]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-backup"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('backupUserData')}</span>
@@ -673,7 +696,7 @@ export default class AdvancedTab extends PureComponent {
             </Button>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -690,10 +713,12 @@ export default class AdvancedTab extends PureComponent {
         : defaultRestoreMessage;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[11]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-restore"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('restoreUserData')}</span>
@@ -735,7 +760,7 @@ export default class AdvancedTab extends PureComponent {
             />
           )}
         </div>
-      </div>
+      </Box>
     );
   }
 
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
index da26ebfdc..ff59b7f83 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
@@ -19,6 +19,12 @@ jest.mock('../../../store/actions.ts', () => {
 describe('AdvancedTab Component', () => {
   const mockStore = configureMockStore([thunk])(mockState);
 
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(<AdvancedTab />, mockStore);
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('should render backup button', () => {
     const { queryByTestId } = renderWithProvider(<AdvancedTab />, mockStore);
     const backupButton = queryByTestId('backup-button');
diff --git a/ui/pages/settings/alerts-tab/alerts-tab.scss b/ui/pages/settings/alerts-tab/alerts-tab.scss
index 5027ac49a..143e10369 100644
--- a/ui/pages/settings/alerts-tab/alerts-tab.scss
+++ b/ui/pages/settings/alerts-tab/alerts-tab.scss
@@ -31,5 +31,6 @@
     padding: 16px 32px;
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 }
diff --git a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
index f9d1bcab5..8c04a63ff 100644
--- a/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
+++ b/ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
@@ -101,7 +101,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
       Privacy
     </h4>
     <div
-      class="settings-page__content-row settings-page__content-row-experimental"
+      class="mm-box settings-page__content-row settings-page__content-row-experimental mm-box--margin-bottom-3"
     >
       <div
         class="settings-page__content-item"
@@ -112,24 +112,24 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
         <div
           class="settings-page__content-description"
         >
-          <p
+          <h6
             class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
           >
             We use third-party APIs to detect and display risks involved in unsigned transaction and signature requests before you sign them. These services will have access to your unsigned transaction and signature requests, your account address,  and your preferred language.
-          </p>
-          <p
+          </h6>
+          <h6
             class="mm-box mm-text mm-text--body-sm mm-box--margin-top-3 mm-box--margin-bottom-1 mm-box--color-text-alternative"
           >
             Select providers:
-          </p>
+          </h6>
           <div
             class="settings-page__content-item-col settings-page__content-item-col-open-sea"
           >
-            <p
+            <h5
               class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-box--margin-bottom-0 mm-box--color-text-default"
             >
               OpenSea + Blockaid (Beta)
-            </p>
+            </h5>
             <label
               class="toggle-button toggle-button--off"
               tabindex="0"
@@ -172,7 +172,7 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
               </div>
             </label>
           </div>
-          <p
+          <h6
             class="mm-box mm-text mm-text--body-sm mm-box--margin-top-0 mm-box--color-text-alternative"
           >
             <span>
@@ -188,17 +188,17 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
               .
                
             </span>
-          </p>
-          <p
+          </h6>
+          <h5
             class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-box--margin-top-2 mm-box--color-text-muted"
           >
             More providers coming soon
-          </p>
+          </h5>
         </div>
       </div>
     </div>
     <div
-      class="settings-page__content-row"
+      class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       data-testid="advanced-setting-desktop-pairing"
     >
       <div
@@ -209,19 +209,15 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
         </span>
       </div>
       <div
-        class="settings-page__content-item"
+        class="settings-page__content-item-col"
       >
-        <div
-          class="settings-page__content-item-col"
+        <button
+          class="button btn--rounded btn-primary btn--large"
+          role="button"
+          tabindex="0"
         >
-          <button
-            class="button btn--rounded btn-primary btn--large"
-            role="button"
-            tabindex="0"
-          >
-            Disable Desktop App
-          </button>
-        </div>
+          Disable Desktop App
+        </button>
       </div>
     </div>
   </div>
diff --git a/ui/pages/settings/experimental-tab/experimental-tab.component.js b/ui/pages/settings/experimental-tab/experimental-tab.component.js
index 9d0a3ab1a..2d083a3a4 100644
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@@ -6,11 +6,17 @@ import {
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
-import { Text } from '../../../components/component-library';
+
+import { Text, Box } from '../../../components/component-library';
 import {
-  FontWeight,
   TextColor,
   TextVariant,
+  FontWeight,
+  ///: BEGIN:ONLY_INCLUDE_IN(desktop)
+  Display,
+  FlexDirection,
+  JustifyContent,
+  ///: END:ONLY_INCLUDE_IN
 } from '../../../helpers/constants/design-system';
 ///: BEGIN:ONLY_INCLUDE_IN(desktop)
 import DesktopEnableButton from '../../../components/app/desktop-enable-button';
@@ -57,6 +63,7 @@ export default class ExperimentalTab extends PureComponent {
     const { t } = this.context;
 
     const { securityAlertsEnabled, setSecurityAlertsEnabled } = this.props;
+
     return (
       <>
         <Text
@@ -144,21 +151,24 @@ export default class ExperimentalTab extends PureComponent {
       <>
         <Text
           variant={TextVariant.headingSm}
+          as="h4"
           color={TextColor.textAlternative}
           marginBottom={2}
           fontWeight={FontWeight.Bold}
         >
           {t('privacy')}
         </Text>
-        <div
+        <Box
           ref={this.settingsRefs[1]}
           className="settings-page__content-row settings-page__content-row-experimental"
+          marginBottom={3}
         >
           <div className="settings-page__content-item">
             <span>{t('transactionSecurityCheck')}</span>
             <div className="settings-page__content-description">
               <Text
                 variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
               >
                 {t('transactionSecurityCheckDescription')}
@@ -167,6 +177,7 @@ export default class ExperimentalTab extends PureComponent {
                 marginTop={3}
                 marginBottom={1}
                 variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
               >
                 {t('selectProvider')}
@@ -174,6 +185,7 @@ export default class ExperimentalTab extends PureComponent {
               <div className="settings-page__content-item-col settings-page__content-item-col-open-sea">
                 <Text
                   variant={TextVariant.bodyMd}
+                  as="h5"
                   color={TextColor.textDefault}
                   fontWeight={FontWeight.Medium}
                   marginBottom={0}
@@ -197,6 +209,7 @@ export default class ExperimentalTab extends PureComponent {
               </div>
               <Text
                 variant={TextVariant.bodySm}
+                as="h6"
                 color={TextColor.textAlternative}
                 marginTop={0}
               >
@@ -213,15 +226,16 @@ export default class ExperimentalTab extends PureComponent {
               </Text>
               <Text
                 variant={TextVariant.bodyMd}
-                color={TextColor.textMuted}
+                as="h5"
                 fontWeight={FontWeight.Medium}
+                color={TextColor.textMuted}
                 marginTop={2}
               >
                 {t('moreComingSoon')}
               </Text>
             </div>
           </div>
-        </div>
+        </Box>
       </>
     );
   }
@@ -231,20 +245,22 @@ export default class ExperimentalTab extends PureComponent {
     const { t } = this.context;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-desktop-pairing"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('desktopEnableButtonDescription')}</span>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <DesktopEnableButton />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <DesktopEnableButton />
         </div>
-      </div>
+      </Box>
     );
   }
   ///: END:ONLY_INCLUDE_IN
diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss
index ad9101fc0..044b0fd35 100644
--- a/ui/pages/settings/index.scss
+++ b/ui/pages/settings/index.scss
@@ -258,7 +258,7 @@
   }
 
   &__body {
-    padding: 12px 24px;
+    padding: 24px;
 
     @include screen-sm-min {
       padding: 12px;
@@ -266,23 +266,18 @@
   }
 
   &__content-row {
-    display: flex;
-    flex-direction: column;
     padding: 10px 0 20px;
   }
 
   &__content-item {
-    flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
-    margin-bottom: 20px;
     font-size: 16px;
     font-weight: 500;
 
     @include screen-sm-max {
       height: initial;
-      padding: 5px 0;
     }
 
     &--without-height {
@@ -364,10 +359,10 @@
     max-width: 300px;
     display: flex;
     flex-direction: column;
+    margin-top: 8px;
 
     @include screen-sm-max {
       max-width: 100%;
-      width: 100%;
     }
 
     .eth-sign-toggle .toggle-button__status {
diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
index d88f7234a..cdec54e99 100644
--- a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
+++ b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -47,7 +47,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -62,58 +62,54 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="usePhishingDetection"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="usePhishingDetection"
+          <label
+            class="toggle-button toggle-button--on"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--on"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="true"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="true"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
     </div>
@@ -126,7 +122,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -169,62 +165,58 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="currencyRateCheckToggle"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="currencyRateCheckToggle"
+          <label
+            class="toggle-button toggle-button--on"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--on"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="true"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="true"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -259,58 +251,54 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="showIncomingTransactions"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="showIncomingTransactions"
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--off"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="false"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
     </div>
@@ -323,7 +311,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
         data-testid="advanced-setting-choose-your-network"
       >
         <div
@@ -351,22 +339,18 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
         >
-          <div
-            class="settings-page__content-item-col"
+          <button
+            class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+            type="secondary"
           >
-            <button
-              class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
-              type="secondary"
-            >
-              Add custom network
-            </button>
-          </div>
+            Add custom network
+          </button>
         </div>
       </div>
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-column"
         data-testid="setting-ipfs-gateway"
       >
         <div
@@ -382,7 +366,7 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
         >
           <label
             class="toggle-button toggle-button--on"
@@ -458,48 +442,46 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="mm-box settings-page__content-row mm-box--margin-top-3 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
           id="ens-domains"
         >
-          Show ENS domains in address bar
-          <div
-            class="settings-page__content-description"
-          >
-            <span
-              class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
+          <div>
+            Show ENS domains in address bar
+            <div
+              class="settings-page__content-description"
             >
-              MetaMask lets you see ENS domains like "https://metamask.eth" right in your browser's address bar. Here's how it works:
-            </span>
-            <ul
-              class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--padding-inline-start-4"
-              style="list-style-type: circle;"
-            >
-              <li
+              <span
                 class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
               >
-                MetaMask checks with Ethereum's ENS contract to find the code connected to the ENS name.
-              </li>
-              <li
+                MetaMask lets you see ENS domains like "https://metamask.eth" right in your browser's address bar. Here's how it works:
+              </span>
+              <ul
+                class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--padding-inline-start-4"
+                style="list-style-type: circle;"
+              >
+                <li
+                  class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
+                >
+                  MetaMask checks with Ethereum's ENS contract to find the code connected to the ENS name.
+                </li>
+                <li
+                  class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
+                >
+                  If the code is linked to IPFS, it gets the content from the IPFS network.
+                </li>
+                <li
+                  class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
+                >
+                  Then, you can see the content, usually a website or something similar.
+                </li>
+              </ul>
+              <span
                 class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
               >
-                If the code is linked to IPFS, it gets the content from the IPFS network.
-              </li>
-              <li
-                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
-              >
-                Then, you can see the content, usually a website or something similar.
-              </li>
-            </ul>
-            <span
-              class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
-            >
-              Regular browsers don't usually handle ENS or IPFS addresses, but MetaMask helps with that. Using this feature might share your IP address with IPFS third-party services.
-            </span>
+                Regular browsers don't usually handle ENS or IPFS addresses, but MetaMask helps with that. Using this feature might share your IP address with IPFS third-party services.
+              </span>
+            </div>
           </div>
-        </div>
-        <div
-          class="settings-page__content-item"
-        >
           <div
             class="settings-page__content-item-col"
             data-testid="ipfs-gateway-resolution-container"
@@ -562,7 +544,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
         data-testid="advanced-setting-gas-fee-estimation"
       >
         <div
@@ -590,62 +572,58 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="autoDetectTokens"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="autoDetectTokens"
+          <label
+            class="toggle-button toggle-button--on"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--on"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="true"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="true"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -660,62 +638,58 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="useMultiAccountBalanceChecker"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="useMultiAccountBalanceChecker"
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--off"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="false"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -730,62 +704,58 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="displayNftMedia"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="displayNftMedia"
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--off"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="false"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -822,58 +792,54 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="useNftDetection"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="useNftDetection"
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--off"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="false"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
     </div>
@@ -886,7 +852,7 @@ exports[`Security Tab should match snapshot 1`] = `
       class="settings-page__content-padded"
     >
       <div
-        class="settings-page__content-row"
+        class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       >
         <div
           class="settings-page__content-item"
@@ -903,58 +869,54 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item"
+          class="settings-page__content-item-col"
+          data-testid="participateInMetaMetrics"
         >
-          <div
-            class="settings-page__content-item-col"
-            data-testid="participateInMetaMetrics"
+          <label
+            class="toggle-button toggle-button--off"
+            tabindex="0"
           >
-            <label
-              class="toggle-button toggle-button--off"
-              tabindex="0"
+            <div
+              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
             >
               <div
-                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
-                >
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                  />
-                  <div
-                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
-                  />
-                </div>
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                />
                 <div
-                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
-                >
-                  <div
-                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                  />
-                </div>
-                <input
-                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                  type="checkbox"
-                  value="false"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
                 />
               </div>
               <div
-                class="toggle-button__status"
+                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
-                <span
-                  class="toggle-button__label-off"
-                >
-                  Off
-                </span>
-                <span
-                  class="toggle-button__label-on"
-                >
-                  On
-                </span>
+                <div
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                />
               </div>
-            </label>
-          </div>
+              <input
+                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                type="checkbox"
+                value="false"
+              />
+            </div>
+            <div
+              class="toggle-button__status"
+            >
+              <span
+                class="toggle-button__label-off"
+              >
+                Off
+              </span>
+              <span
+                class="toggle-button__label-on"
+              >
+                On
+              </span>
+            </div>
+          </label>
         </div>
       </div>
     </div>
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index 45fc136d6..85ca2453f 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -24,19 +24,23 @@ import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz';
 import {
   BUTTON_SIZES,
   Button,
-} from '../../../components/component-library/button';
+  Box,
+  Text,
+} from '../../../components/component-library';
 import TextField from '../../../components/ui/text-field';
 import ToggleButton from '../../../components/ui/toggle-button';
+import {
+  Display,
+  FlexDirection,
+  JustifyContent,
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import {
   getNumberOfSettingsInSection,
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
-import { Box, Text } from '../../../components/component-library';
-import {
-  TextColor,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
 
 export default class SecurityTab extends PureComponent {
   static contextTypes = {
@@ -169,7 +173,13 @@ export default class SecurityTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[1]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('showIncomingTransactions')}</span>
           <div className="settings-page__content-description">
@@ -195,22 +205,18 @@ export default class SecurityTab extends PureComponent {
             ])}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="showIncomingTransactions"
-          >
-            <ToggleButton
-              value={showIncomingTransactions}
-              onToggle={(value) =>
-                setShowIncomingTransactionsFeatureFlag(!value)
-              }
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+        <div
+          className="settings-page__content-item-col"
+          data-testid="showIncomingTransactions"
+        >
+          <ToggleButton
+            value={showIncomingTransactions}
+            onToggle={(value) => setShowIncomingTransactionsFeatureFlag(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -219,27 +225,32 @@ export default class SecurityTab extends PureComponent {
     const { usePhishDetect, setUsePhishDetect } = this.props;
 
     return (
-      <div ref={this.settingsRefs[2]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[2]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('usePhishingDetection')}</span>
           <div className="settings-page__content-description">
             {t('usePhishingDetectionDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="usePhishingDetection"
-          >
-            <ToggleButton
-              value={usePhishDetect}
-              onToggle={(value) => setUsePhishDetect(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="usePhishingDetection"
+        >
+          <ToggleButton
+            value={usePhishDetect}
+            onToggle={(value) => setUsePhishDetect(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -249,27 +260,32 @@ export default class SecurityTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[3]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[3]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('participateInMetaMetrics')}</span>
           <div className="settings-page__content-description">
             <span>{t('participateInMetaMetricsDescription')}</span>
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="participateInMetaMetrics"
-          >
-            <ToggleButton
-              value={participateInMetaMetrics}
-              onToggle={(value) => setParticipateInMetaMetrics(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="participateInMetaMetrics"
+        >
+          <ToggleButton
+            value={participateInMetaMetrics}
+            onToggle={(value) => setParticipateInMetaMetrics(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -277,10 +293,12 @@ export default class SecurityTab extends PureComponent {
     const { t } = this.context;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-choose-your-network"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('chooseYourNetwork')}</span>
@@ -298,24 +316,22 @@ export default class SecurityTab extends PureComponent {
             ])}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <Button
-              type="secondary"
-              className="settings-page__button"
-              onClick={() => {
-                getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-                  ? global.platform.openExtensionInBrowser(
-                      ADD_POPULAR_CUSTOM_NETWORK,
-                    )
-                  : this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
-              }}
-            >
-              {t('addCustomNetwork')}
-            </Button>
-          </div>
+        <div className="settings-page__content-item-col">
+          <Button
+            type="secondary"
+            className="settings-page__button"
+            onClick={() => {
+              getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+                ? global.platform.openExtensionInBrowser(
+                    ADD_POPULAR_CUSTOM_NETWORK,
+                  )
+                : this.props.history.push(ADD_POPULAR_CUSTOM_NETWORK);
+            }}
+          >
+            {t('addCustomNetwork')}
+          </Button>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -367,10 +383,12 @@ export default class SecurityTab extends PureComponent {
         : handleIpfsGatewayChange('');
     };
     return (
-      <div
+      <Box
         ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="setting-ipfs-gateway"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
       >
         <div className="settings-page__content-item">
           <span>{t('ipfsGateway')}</span>
@@ -378,7 +396,7 @@ export default class SecurityTab extends PureComponent {
             {t('ipfsGatewayDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
+        <div className="settings-page__content-item-col">
           <ToggleButton
             value={this.state.ipfsGateway}
             onToggle={(value) => {
@@ -405,51 +423,56 @@ export default class SecurityTab extends PureComponent {
             </div>
           </div>
         )}
-        <div
-          className="settings-page__content-item"
+        <Box
+          className="settings-page__content-row"
+          display={Display.Flex}
+          flexDirection={FlexDirection.Row}
+          justifyContent={JustifyContent.spaceBetween}
           ref={this.settingsRefs[9]}
+          marginTop={3}
           id="ens-domains"
         >
-          {t('ensDomainsSettingTitle')}
-          <div className="settings-page__content-description">
-            <Text color={TextColor.inherit} variant={TextVariant.inherit}>
-              {t('ensDomainsSettingDescriptionIntro')}
-            </Text>
-            <Box
-              as="ul"
-              marginTop={4}
-              marginBottom={4}
-              paddingInlineStart={4}
-              style={{ listStyleType: 'circle' }}
-            >
-              <Text
-                as="li"
-                color={TextColor.inherit}
-                variant={TextVariant.inherit}
-              >
-                {t('ensDomainsSettingDescriptionPoint1')}
+          <div>
+            {t('ensDomainsSettingTitle')}
+            <div className="settings-page__content-description">
+              <Text color={TextColor.inherit} variant={TextVariant.inherit}>
+                {t('ensDomainsSettingDescriptionIntro')}
               </Text>
-              <Text
-                as="li"
-                color={TextColor.inherit}
-                variant={TextVariant.inherit}
+              <Box
+                as="ul"
+                marginTop={4}
+                marginBottom={4}
+                paddingInlineStart={4}
+                style={{ listStyleType: 'circle' }}
               >
-                {t('ensDomainsSettingDescriptionPoint2')}
+                <Text
+                  as="li"
+                  color={TextColor.inherit}
+                  variant={TextVariant.inherit}
+                >
+                  {t('ensDomainsSettingDescriptionPoint1')}
+                </Text>
+                <Text
+                  as="li"
+                  color={TextColor.inherit}
+                  variant={TextVariant.inherit}
+                >
+                  {t('ensDomainsSettingDescriptionPoint2')}
+                </Text>
+                <Text
+                  as="li"
+                  color={TextColor.inherit}
+                  variant={TextVariant.inherit}
+                >
+                  {t('ensDomainsSettingDescriptionPoint3')}
+                </Text>
+              </Box>
+              <Text color={TextColor.inherit} variant={TextVariant.inherit}>
+                {t('ensDomainsSettingDescriptionOutro')}
               </Text>
-              <Text
-                as="li"
-                color={TextColor.inherit}
-                variant={TextVariant.inherit}
-              >
-                {t('ensDomainsSettingDescriptionPoint3')}
-              </Text>
-            </Box>
-            <Text color={TextColor.inherit} variant={TextVariant.inherit}>
-              {t('ensDomainsSettingDescriptionOutro')}
-            </Text>
+            </div>
           </div>
-        </div>
-        <div className="settings-page__content-item">
+
           <div
             className="settings-page__content-item-col"
             data-testid="ipfs-gateway-resolution-container"
@@ -461,8 +484,8 @@ export default class SecurityTab extends PureComponent {
               onLabel={t('on')}
             />
           </div>
-        </div>
-      </div>
+        </Box>
+      </Box>
     );
   }
 
@@ -471,10 +494,13 @@ export default class SecurityTab extends PureComponent {
     const { useTokenDetection, setUseTokenDetection } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-gas-fee-estimation"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
       >
         <div className="settings-page__content-item">
           <span>{t('autoDetectTokens')}</span>
@@ -492,27 +518,26 @@ export default class SecurityTab extends PureComponent {
             ])}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="autoDetectTokens"
-          >
-            <ToggleButton
-              value={useTokenDetection}
-              onToggle={(value) => {
-                this.toggleSetting(
-                  value,
-                  MetaMetricsEventName.KeyAutoDetectTokens,
-                  MetaMetricsEventName.KeyAutoDetectTokens,
-                  setUseTokenDetection,
-                );
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="autoDetectTokens"
+        >
+          <ToggleButton
+            value={useTokenDetection}
+            onToggle={(value) => {
+              this.toggleSetting(
+                value,
+                MetaMetricsEventName.KeyAutoDetectTokens,
+                MetaMetricsEventName.KeyAutoDetectTokens,
+                setUseTokenDetection,
+              );
+            }}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -522,34 +547,39 @@ export default class SecurityTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[7]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[7]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('useMultiAccountBalanceChecker')}</span>
           <div className="settings-page__content-description">
             {t('useMultiAccountBalanceCheckerSettingDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="useMultiAccountBalanceChecker"
-          >
-            <ToggleButton
-              value={useMultiAccountBalanceChecker}
-              onToggle={(value) => {
-                this.toggleSetting(
-                  value,
-                  MetaMetricsEventName.KeyBatchAccountBalanceRequests,
-                  MetaMetricsEventName.KeyBatchAccountBalanceRequests,
-                  setUseMultiAccountBalanceChecker,
-                );
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="useMultiAccountBalanceChecker"
+        >
+          <ToggleButton
+            value={useMultiAccountBalanceChecker}
+            onToggle={(value) => {
+              this.toggleSetting(
+                value,
+                MetaMetricsEventName.KeyBatchAccountBalanceRequests,
+                MetaMetricsEventName.KeyBatchAccountBalanceRequests,
+                setUseMultiAccountBalanceChecker,
+              );
+            }}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -558,7 +588,13 @@ export default class SecurityTab extends PureComponent {
     const { useCurrencyRateCheck, setUseCurrencyRateCheck } = this.props;
 
     return (
-      <div ref={this.settingsRefs[8]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[8]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('currencyRateCheckToggle')}</span>
           <div className="settings-page__content-description">
@@ -590,20 +626,19 @@ export default class SecurityTab extends PureComponent {
             ])}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="currencyRateCheckToggle"
-          >
-            <ToggleButton
-              value={useCurrencyRateCheck}
-              onToggle={(value) => setUseCurrencyRateCheck(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="currencyRateCheckToggle"
+        >
+          <ToggleButton
+            value={useCurrencyRateCheck}
+            onToggle={(value) => setUseCurrencyRateCheck(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -617,41 +652,46 @@ export default class SecurityTab extends PureComponent {
     } = this.props;
 
     return (
-      <div ref={this.settingsRefs[10]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[10]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('displayNftMedia')}</span>
           <div className="settings-page__content-description">
             {t('displayNftMediaDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="displayNftMedia"
-          >
-            <ToggleButton
-              value={openSeaEnabled}
-              onToggle={(value) => {
-                this.context.trackEvent({
-                  category: MetaMetricsEventCategory.Settings,
-                  event: 'Enabled/Disable OpenSea',
-                  properties: {
-                    action: 'Enabled/Disable OpenSea',
-                    legacy_event: true,
-                  },
-                });
-                // value is positive when being toggled off
-                if (value && useNftDetection) {
-                  setUseNftDetection(false);
-                }
-                setOpenSeaEnabled(!value);
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="displayNftMedia"
+        >
+          <ToggleButton
+            value={openSeaEnabled}
+            onToggle={(value) => {
+              this.context.trackEvent({
+                category: MetaMetricsEventCategory.Settings,
+                event: 'Enabled/Disable OpenSea',
+                properties: {
+                  action: 'Enabled/Disable OpenSea',
+                  legacy_event: true,
+                },
+              });
+              // value is positive when being toggled off
+              if (value && useNftDetection) {
+                setUseNftDetection(false);
+              }
+              setOpenSeaEnabled(!value);
+            }}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -664,7 +704,13 @@ export default class SecurityTab extends PureComponent {
       setUseNftDetection,
     } = this.props;
     return (
-      <div ref={this.settingsRefs[11]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[11]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+      >
         <div className="settings-page__content-item">
           <span>{t('useNftDetection')}</span>
           <div className="settings-page__content-description">
@@ -681,33 +727,32 @@ export default class SecurityTab extends PureComponent {
             </Text>
           </div>
         </div>
-        <div className="settings-page__content-item">
-          <div
-            className="settings-page__content-item-col"
-            data-testid="useNftDetection"
-          >
-            <ToggleButton
-              value={useNftDetection}
-              onToggle={(value) => {
-                this.context.trackEvent({
-                  category: MetaMetricsEventCategory.Settings,
-                  event: 'NFT Detected',
-                  properties: {
-                    action: 'NFT Detected',
-                    legacy_event: true,
-                  },
-                });
-                if (!value && !openSeaEnabled) {
-                  setOpenSeaEnabled(!value);
-                }
-                setUseNftDetection(!value);
-              }}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div
+          className="settings-page__content-item-col"
+          data-testid="useNftDetection"
+        >
+          <ToggleButton
+            value={useNftDetection}
+            onToggle={(value) => {
+              this.context.trackEvent({
+                category: MetaMetricsEventCategory.Settings,
+                event: 'NFT Detected',
+                properties: {
+                  action: 'NFT Detected',
+                  legacy_event: true,
+                },
+              });
+              if (!value && !openSeaEnabled) {
+                setOpenSeaEnabled(!value);
+              }
+              setUseNftDetection(!value);
+            }}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
diff --git a/ui/pages/settings/settings-tab/settings-tab.component.js b/ui/pages/settings/settings-tab/settings-tab.component.js
index a823478c2..c6a7423d7 100644
--- a/ui/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/pages/settings/settings-tab/settings-tab.component.js
@@ -5,6 +5,10 @@ import availableCurrencies from '../../../helpers/constants/available-conversion
 import {
   TextVariant,
   TextColor,
+  Display,
+  FlexDirection,
+  JustifyContent,
+  AlignItems,
 } from '../../../helpers/constants/design-system';
 import Dropdown from '../../../components/ui/dropdown';
 import ToggleButton from '../../../components/ui/toggle-button';
@@ -18,7 +22,7 @@ import {
   handleSettingsRefs,
 } from '../../../helpers/utils/settings-search';
 import { ThemeType } from '../../../../shared/constants/preferences';
-import { Text } from '../../../components/component-library';
+import { Text, Box } from '../../../components/component-library';
 
 const sortedCurrencies = availableCurrencies.sort((a, b) => {
   return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase());
@@ -89,7 +93,12 @@ export default class SettingsTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[0]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[0]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+      >
         <div className="settings-page__content-item">
           <span>{t('currencyConversion')}</span>
           <span className="settings-page__content-description">
@@ -111,7 +120,7 @@ export default class SettingsTab extends PureComponent {
             />
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -124,7 +133,12 @@ export default class SettingsTab extends PureComponent {
     const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '';
 
     return (
-      <div ref={this.settingsRefs[2]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[2]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+      >
         <div className="settings-page__content-item">
           <span className="settings-page__content-label">
             {t('currentLanguage')}
@@ -144,7 +158,7 @@ export default class SettingsTab extends PureComponent {
             />
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -153,26 +167,28 @@ export default class SettingsTab extends PureComponent {
     const { hideZeroBalanceTokens, setHideZeroBalanceTokens } = this.props;
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[5]}
-        data-testid="hide-zero-balance-tokens"
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.center}
         id="toggle-zero-balance"
       >
         <div className="settings-page__content-item">
           <span>{t('hideZeroBalanceTokens')}</span>
         </div>
-        <div className="settings-page__content-item">
-          <div className="settings-page__content-item-col">
-            <ToggleButton
-              value={hideZeroBalanceTokens}
-              onToggle={(value) => setHideZeroBalanceTokens(!value)}
-              offLabel={t('off')}
-              onLabel={t('on')}
-            />
-          </div>
+
+        <div className="settings-page__content-item-col">
+          <ToggleButton
+            value={hideZeroBalanceTokens}
+            onToggle={(value) => setHideZeroBalanceTokens(!value)}
+            offLabel={t('off')}
+            onLabel={t('on')}
+          />
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -189,9 +205,11 @@ export default class SettingsTab extends PureComponent {
     });
 
     return (
-      <div
+      <Box
         ref={this.settingsRefs[4]}
         className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         id="blockie-optin"
       >
         <div className="settings-page__content-item">
@@ -275,7 +293,7 @@ export default class SettingsTab extends PureComponent {
             </button>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -287,7 +305,12 @@ export default class SettingsTab extends PureComponent {
       useNativeCurrencyAsPrimaryCurrency,
     } = this.props;
     return (
-      <div ref={this.settingsRefs[1]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[1]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+      >
         <div className="settings-page__content-item">
           <span>{t('primaryCurrencySetting')}</span>
           <div className="settings-page__content-description">
@@ -334,7 +357,7 @@ export default class SettingsTab extends PureComponent {
             </div>
           </div>
         </div>
-      </div>
+      </Box>
     );
   }
 
@@ -369,7 +392,12 @@ export default class SettingsTab extends PureComponent {
     };
 
     return (
-      <div ref={this.settingsRefs[3]} className="settings-page__content-row">
+      <Box
+        ref={this.settingsRefs[3]}
+        className="settings-page__content-row"
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+      >
         <div className="settings-page__content-item">
           <span>{this.context.t('theme')}</span>
           <div className="settings-page__content-description">
@@ -386,7 +414,7 @@ export default class SettingsTab extends PureComponent {
             />
           </div>
         </div>
-      </div>
+      </Box>
     );
   }