diff --git a/.github/workflows/stale-issues-pr.yml b/.github/workflows/stale-issues-pr.yml
new file mode 100644
index 000000000..941a689d1
--- /dev/null
+++ b/.github/workflows/stale-issues-pr.yml
@@ -0,0 +1,28 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '0 12 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@72afbce2b0dbd1d903bb142cebe2d15dc307ae57
+        with:
+          stale-issue-message: 'This issue has been automatically marked as stale because it has not had recent activity in the last 90 days. It will be closed in 45 days. Thank you for your contributions.'
+          stale-issue-label: 'stale'
+          only-issue-labels: 'type-bug'
+          exempt-issue-labels: 'type-security, type-pinned, feature-request, awaiting-metamask'
+          stale-pr-message: 'This PR has been automatically marked as stale because it has not had recent activity in the last 60 days. It will be closed in 14 days. Thank you for your contributions.'
+          stale-pr-label: 'stale'
+          exempt-pr-labels: 'work-in-progress'
+          close-issue-message: 'This issue was closed because there has been no follow up activity in the last 7 days. If you feel this was closed in error, please reopen and provide evidence on the latest release of the extension. Thank you for your contributions.'
+          close-pr-message: 'This PR was closed because there has been no follow up activity in the last 7 days. Thank you for your contributions.'
+          days-before-issue-stale: 90
+          days-before-pr-stale: 60
+          days-before-issue-close: 45
+          days-before-pr-close: 14
+          operations-per-run: 1
diff --git a/.github/workflows/update-lavamoat-policies.yml b/.github/workflows/update-lavamoat-policies.yml
index 5f2814e97..b05221889 100644
--- a/.github/workflows/update-lavamoat-policies.yml
+++ b/.github/workflows/update-lavamoat-policies.yml
@@ -223,3 +223,37 @@ jobs:
           HAS_CHANGES: ${{ steps.policy-changes.outputs.HAS_CHANGES }}
           GITHUB_TOKEN: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
           PR_NUMBER: ${{ github.event.issue.number }}
+
+  check-status:
+    name: Check whether the policy update succeeded
+    runs-on: ubuntu-latest
+    needs:
+      - commit-updated-policies
+    outputs:
+      PASSED: ${{ steps.set-output.outputs.PASSED }}
+    steps:
+      - name: Set PASSED output
+        id: set-output
+        run: echo "PASSED=true" >> "$GITHUB_OUTPUT"
+
+  failure-comment:
+    name: Comment about the policy update failure
+    if: ${{ always() && needs.is-fork-pull-request.outputs.IS_FORK == 'false' }}
+    runs-on: ubuntu-latest
+    needs:
+      - is-fork-pull-request
+      - check-status
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
+      - name: Post comment if the update failed
+        run: |
+          passed="${{ needs.check-status.outputs.PASSED }}"
+          if [[ $passed != "true" ]]; then
+            gh pr comment "${PR_NUMBER}" --body "Policy update failed. You can [review the logs or retry the policy update here](${ACTION_RUN_URL})"
+          fi
+        env:
+          GITHUB_TOKEN: ${{ secrets.LAVAMOAT_UPDATE_TOKEN }}
+          PR_NUMBER: ${{ github.event.issue.number }}
+          ACTION_RUN_URL: "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
diff --git a/.iyarc b/.iyarc
index 0bb3e981f..9e16de044 100644
--- a/.iyarc
+++ b/.iyarc
@@ -3,6 +3,9 @@ GHSA-257v-vj4p-3w2h
 
 # request library is subject to SSRF.
 # addressed by temporary patch in .yarn/patches/request-npm-2.88.2-f4a57c72c4.patch
-# NOTE: Disabled for now since this library seems to have been removed from the
-# dependency tree — we can re-enable this line later if it appears again
-#GHSA-p8p7-x288-28g6
+GHSA-p8p7-x288-28g6
+
+# Prototype pollution
+# Not easily patched
+# Minimal risk to us because we're using lockdown which also prevents this case of prototype pollution
+GHSA-h755-8qp9-cq85
diff --git a/.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch b/.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch
new file mode 100644
index 000000000..ef3f75e9e
--- /dev/null
+++ b/.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch
@@ -0,0 +1,17 @@
+diff --git a/dist/SignatureController.js b/dist/SignatureController.js
+index b58b27e84aa84393afb366d4585c084d0380d21d..0629bcf517db744ccfa40e4d7d8f2829fa95559e 100644
+--- a/dist/SignatureController.js
++++ b/dist/SignatureController.js
+@@ -237,8 +237,11 @@ _SignatureController_keyringController = new WeakMap(), _SignatureController_isE
+             yield __classPrivateFieldGet(this, _SignatureController_instances, "m", _SignatureController_requestApproval).call(this, messageParamsWithId, approvalType);
+         }
+         catch (error) {
++            signaturePromise.catch(() => {
++                // Expecting reject error but throwing manually rather than waiting
++            });
+             __classPrivateFieldGet(this, _SignatureController_instances, "m", _SignatureController_cancelAbstractMessage).call(this, messageManager, messageId);
+-            throw eth_rpc_errors_1.ethErrors.provider.userRejectedRequest('User rejected the request.');
++            throw eth_rpc_errors_1.ethErrors.provider.userRejectedRequest(`MetaMask ${messageName} Signature: User denied message signature.`);
+         }
+         yield signMessage(messageParamsWithId, version, signingOpts);
+         return signaturePromise;
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9dc5fce18..914787298 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.33.1]
+### Fixed
+- Fix to bug causing users to see an infinite spinner when signing typed messages. ([#19894](https://github.com/MetaMask/metamask-extension/pull/19894))
+
 ## [10.33.0]
 ### Added
 - UI Upgrade ([#18903](https://github.com/MetaMask/metamask-extension/pull/18903))
@@ -3825,7 +3829,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Uncategorized
 - Added the ability to restore accounts from seed words.
 
-[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.33.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.33.1...HEAD
+[10.33.1]: https://github.com/MetaMask/metamask-extension/compare/v10.33.0...v10.33.1
 [10.33.0]: https://github.com/MetaMask/metamask-extension/compare/v10.32.0...v10.33.0
 [10.32.0]: https://github.com/MetaMask/metamask-extension/compare/v10.31.1...v10.32.0
 [10.31.1]: https://github.com/MetaMask/metamask-extension/compare/v10.31.0...v10.31.1
diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json
index 3da5e212e..70ca5538a 100644
--- a/app/_locales/de/messages.json
+++ b/app/_locales/de/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Seed-Phrase anzeigen"
   },
-  "reviewSpendingCap": {
-    "message": "Überprüfen SIe Ihre Ausgabegrenze"
-  },
   "revokeAllTokensTitle": {
     "message": "Erlaubnis zum Zugriff auf alle Ihre $1 sowie deren Übertragung entziehen?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "$1 ohne Ausgabenlimit genehmigen",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Eine Ausgabegrenze für Ihr $1 einrichten",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Einstellungen"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Diese URL wird derzeit vom $1-Netzwerk verwendet."
   },
-  "useDefault": {
-    "message": "Standardeinstellungen verwenden"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Kontoguthaben-Anfragen sammeln"
   },
diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json
index 7bbe75c6b..ce06907b2 100644
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Αποκάλυψη φράσης ανάκτησης"
   },
-  "reviewSpendingCap": {
-    "message": "Επανεξετάστε το όριο δαπανών σας"
-  },
   "revokeAllTokensTitle": {
     "message": "Ανάκληση άδειας πρόσβασης σε όλα σας τα $1;",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3137,10 +3134,6 @@
     "message": "Έγκριση $1 χωρίς όριο δαπανών",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Ορίστε ένα ανώτατο όριο δαπανών για το $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Ρυθμίσεις"
   },
@@ -4164,9 +4157,6 @@
   "urlExistsErrorMsg": {
     "message": "Αυτό το URL χρησιμοποιείται επί του παρόντος από το δίκτυο $1."
   },
-  "useDefault": {
-    "message": "Χρήση προκαθορισμένου"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Μαζικά αιτήματα υπολοίπου λογαριασμού"
   },
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5d9b0ba06..328441d1e 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -366,6 +366,9 @@
   "allowThisSiteTo": {
     "message": "Allow this site to:"
   },
+  "allowThisSnapTo": {
+    "message": "Allow this snap to:"
+  },
   "allowWithdrawAndSpend": {
     "message": "Allow $1 to withdraw and spend up to the following amount:",
     "description": "The url of the site that requested permission to 'withdraw and spend'"
@@ -1052,6 +1055,9 @@
   "customerSupport": {
     "message": "customer support"
   },
+  "dappRequestedSpendingCap": {
+    "message": "Site requested spending cap"
+  },
   "dappSuggested": {
     "message": "Site suggested"
   },
@@ -3541,9 +3547,6 @@
   "revealTheSeedPhrase": {
     "message": "Reveal seed phrase"
   },
-  "reviewSpendingCap": {
-    "message": "Review the spending cap for your"
-  },
   "revokeAllTokensTitle": {
     "message": "Revoke permission to access and transfer all of your $1?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3560,6 +3563,9 @@
     "message": "This revokes the permission for a third party to access and transfer all of your NFTs from $1 without further notice.",
     "description": "$1 is a link to contract on the block explorer when we're not able to retrieve a erc721 or erc1155 name"
   },
+  "revokePermission": {
+    "message": "Revoke permission"
+  },
   "revokeSpendingCap": {
     "message": "Revoke spending cap for your $1",
     "description": "$1 is a token symbol"
@@ -3681,6 +3687,9 @@
   "selectAccounts": {
     "message": "Select the account(s) to use on this site"
   },
+  "selectAccountsForSnap": {
+    "message": "Select the account(s) to use with this snap"
+  },
   "selectAll": {
     "message": "Select all"
   },
@@ -3757,10 +3766,6 @@
     "message": "Approve $1 with no spend limit",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Set a spending cap for your $1",
-    "description": "$1 is a token symbol"
-  },
   "settingAddSnapAccount": {
     "message": "Add snap account"
   },
@@ -3770,10 +3775,6 @@
   "settingsSearchMatchingNotFound": {
     "message": "No matching results found."
   },
-  "shortVersion": {
-    "message": "v$1",
-    "description": "$1 is the version number to show"
-  },
   "show": {
     "message": "Show"
   },
@@ -4087,6 +4088,9 @@
     "message": "Only enter a number that you're comfortable with $1 accessing now or in the future. You can always increase the token limit later.",
     "description": "$1 is origin of the site requesting the token limit"
   },
+  "spendingCapRequest": {
+    "message": "Spending cap request for your $1"
+  },
   "srpInputNumberOfWords": {
     "message": "I have a $1-word phrase",
     "description": "This is the text for each option in the dropdown where a user selects how many words their secret recovery phrase has during import. The $1 is the number of words (either 12, 15, 18, 21, or 24)."
@@ -5136,9 +5140,6 @@
   "urlExistsErrorMsg": {
     "message": "This URL is currently used by the $1 network."
   },
-  "useDefault": {
-    "message": "Use default"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Batch account balance requests"
   },
@@ -5169,6 +5170,9 @@
   "usePhishingDetectionDescription": {
     "message": "Display a warning for phishing domains targeting Ethereum users"
   },
+  "useSiteSuggestion": {
+    "message": "Use site suggestion"
+  },
   "useTokenDetectionPrivacyDesc": {
     "message": "Automatically displaying tokens sent to your account involves communication with third party servers to fetch token’s images. Those serves will have access to your IP address."
   },
diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json
index bc3dfb601..71a4b61ec 100644
--- a/app/_locales/es/messages.json
+++ b/app/_locales/es/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Revelar frase semilla"
   },
-  "reviewSpendingCap": {
-    "message": "Revise su límite de gasto"
-  },
   "revokeAllTokensTitle": {
     "message": "¿Revocar el permiso para acceder y transferir todos sus $1?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Aprobar $1 sin límite preestablecido",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Establecer un límite de gasto para su $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Configuración"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "En este momento, la red $1 está utilizando esta dirección URL."
   },
-  "useDefault": {
-    "message": "Uso por defecto"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Solicitudes de saldo de cuenta por lotes"
   },
diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json
index aafeeead8..ca36fd57d 100644
--- a/app/_locales/fr/messages.json
+++ b/app/_locales/fr/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Révéler la phrase mnémonique"
   },
-  "reviewSpendingCap": {
-    "message": "Modifiez votre plafond de dépenses"
-  },
   "revokeAllTokensTitle": {
     "message": "Révoquer l’autorisation d’accès et de transfert de tous vos $1 ?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Approuver $1 sans limite de dépenses",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Fixez un plafond de dépenses pour vos $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Paramètres"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Cette URL est actuellement utilisée par le réseau $1."
   },
-  "useDefault": {
-    "message": "Utiliser par défaut"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Demandes d’informations concernant le solde de plusieurs comptes"
   },
diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json
index 2fcc7b43c..446767290 100644
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "सीड फ़्रेज़ दिखाएं"
   },
-  "reviewSpendingCap": {
-    "message": "अपनी खर्च के सीमा की समीक्षा करें"
-  },
   "revokeAllTokensTitle": {
     "message": "आपके सभी $1 को एक्सेस और स्थानांतरित करने की अनुमति निरस्त करें?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "बिना किसी खर्च सीमा के $1 स्वीकृत करें",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "अपने $1 के लिए खर्च की सीमा को निर्धारित करें",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "सेटिंग"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "यह URL वर्तमान में $1 नेटवर्क द्वारा उपयोग किया जाता है।"
   },
-  "useDefault": {
-    "message": "डिफॉल्ट का उपयोग करें"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "खाता के शेष राशि के अनुरोधों को बैच करें"
   },
diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json
index d03338321..65fe2d24f 100644
--- a/app/_locales/id/messages.json
+++ b/app/_locales/id/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Ungkap frasa seed"
   },
-  "reviewSpendingCap": {
-    "message": "Tinjau batas pengeluaran Anda"
-  },
   "revokeAllTokensTitle": {
     "message": "Cabut izin untuk mengakses dan mentransfer seluruh $1 Anda?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Setujui $1 tanpa batas penggunaan",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Tetapkan batas pengeluaran untuk $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Pengaturan"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "URL ini saat ini digunakan oleh jaringan $1."
   },
-  "useDefault": {
-    "message": "Gunakan default"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Kelompokkan permintaan saldo akun"
   },
diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json
index 18cd136db..715248ca8 100644
--- a/app/_locales/ja/messages.json
+++ b/app/_locales/ja/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "シードフレーズを表示"
   },
-  "reviewSpendingCap": {
-    "message": "使用上限を確認してください"
-  },
   "revokeAllTokensTitle": {
     "message": "すべての $1 へのアクセスおよび転送許可を取り消しますか？",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "使用限度額なしで $1 を承認",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "$1 の使用上限を設定",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "設定"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "このURLは現在$1ネットワークで使用されています。"
   },
-  "useDefault": {
-    "message": "既定値を使用"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "アカウント残高の一括リクエスト"
   },
diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json
index 2926560e3..a214b7805 100644
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "시드 구문 보기"
   },
-  "reviewSpendingCap": {
-    "message": "지출 한도 검토"
-  },
   "revokeAllTokensTitle": {
     "message": "모든 $1에 액세스할 수 있는 권한을 철회할까요?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "$1 무제한 지출 승인",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "$1에 대한 지출 한도 설정",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "설정"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "이 URL은 현재 $1 네트워크에서 사용됩니다."
   },
-  "useDefault": {
-    "message": "기본값 사용"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "일괄 계정 잔액 요청"
   },
diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json
index 39997d6ff..00c39a066 100644
--- a/app/_locales/pt/messages.json
+++ b/app/_locales/pt/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Revelar a frase de recuperação"
   },
-  "reviewSpendingCap": {
-    "message": "Revise seu limite de gastos"
-  },
   "revokeAllTokensTitle": {
     "message": "Revogar permissão de acesso e transferência de todos os seus $1?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Aprovar $1 sem limite de gastos",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Definir um limite de gastos para seu $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Definições"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "O ID da cadeia está sendo usado pela rede $1."
   },
-  "useDefault": {
-    "message": "Usar padrão"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Agrupar solicitações de saldo de contas"
   },
diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json
index 1921b112b..fb8a915ef 100644
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Показать сид-фразу"
   },
-  "reviewSpendingCap": {
-    "message": "Проверьте свой лимит расходов"
-  },
   "revokeAllTokensTitle": {
     "message": "Отозвать разрешение на доступ ко всем вашим $1 и их перевод?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Одобрить $1 без ограничений по расходам",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Установить верхний лимит расходов для вашего $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Настройки"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Это URL-адрес в настоящее время используется сетью $1."
   },
-  "useDefault": {
-    "message": "Использовать значения по умолчанию"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Пакетные запросы баланса счета"
   },
diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json
index 2ca598754..f4877ea06 100644
--- a/app/_locales/tl/messages.json
+++ b/app/_locales/tl/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Ipakita ang seed phrase"
   },
-  "reviewSpendingCap": {
-    "message": "I-review ang iyong limitasyon sa paggastos"
-  },
   "revokeAllTokensTitle": {
     "message": "Bawiin ang pahintulot na i-access at ilipat ang lahat ng iyong $1?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Aprubahan ang $1 nang walang limitasyon sa paggastos",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Magtakda ng limitasyon sa paggastos para sa iyong $1",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Mga Setting"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Nasa kasalukuyang listahan ng mga network na ang URL."
   },
-  "useDefault": {
-    "message": "Gamitin ang default"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Mga kahilingan sa balanse ng batch account"
   },
diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json
index 9c9ee1ec8..842dc5096 100644
--- a/app/_locales/tr/messages.json
+++ b/app/_locales/tr/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Tohum ifadesini ortaya çıkar"
   },
-  "reviewSpendingCap": {
-    "message": "Harcama üst limitinize göz atın"
-  },
   "revokeAllTokensTitle": {
     "message": "Tüm $1 için izin erişim ve transfer izni geri çekilsin mi?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "$1 için harcama limiti olmadan onay ver",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "$1 için harcama üst limiti belirle",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Ayarlar"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Bu URL şu anda $1 ağı tarafından kullanılıyor."
   },
-  "useDefault": {
-    "message": "Varsayılanı kullan"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Toplu hesap bakiyesi talepleri"
   },
diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json
index 7c8851b15..5c11445e5 100644
--- a/app/_locales/vi/messages.json
+++ b/app/_locales/vi/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "Hiện cụm từ khôi phục bí mật"
   },
-  "reviewSpendingCap": {
-    "message": "Xem lại hạn mức chi tiêu của bạn"
-  },
   "revokeAllTokensTitle": {
     "message": "Thu hồi quyền truy cập và chuyển tất cả $1 của bạn?",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "Phê duyệt $1 không có giới hạn chi tiêu",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "Đặt hạn mức chi tiêu cho $1 của bạn",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "Cài đặt"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "Mạng $1 hiện đang sử dụng URL này."
   },
-  "useDefault": {
-    "message": "Sử dụng mặc định"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "Xử lý hàng loạt yêu cầu số dư tài khoản"
   },
diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json
index 9090ca86a..58f7ffa97 100644
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@@ -2956,9 +2956,6 @@
   "revealTheSeedPhrase": {
     "message": "显示助记词"
   },
-  "reviewSpendingCap": {
-    "message": "检查您的支出上限"
-  },
   "revokeAllTokensTitle": {
     "message": "撤销访问和转移您的所有 $1 的权限？",
     "description": "$1 is the symbol of the token for which the user is revoking approval"
@@ -3140,10 +3137,6 @@
     "message": "批准$1，且无消费限制",
     "description": "The token symbol that is being approved"
   },
-  "setSpendingCap": {
-    "message": "为 $1 设置支出上限",
-    "description": "$1 is a token symbol"
-  },
   "settings": {
     "message": "设置"
   },
@@ -4167,9 +4160,6 @@
   "urlExistsErrorMsg": {
     "message": "此 URL 目前已被 $1 网络使用。"
   },
-  "useDefault": {
-    "message": "使用默认值"
-  },
   "useMultiAccountBalanceChecker": {
     "message": "账户余额分批请求"
   },
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index 052f218a3..9be792c49 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -526,7 +526,8 @@ export default class PreferencesController {
   async updateSnapRegistry() {
     let snapRegistry;
     try {
-      snapRegistry = await fetch(KEYRING_SNAPS_REGISTRY_URL);
+      const response = await fetch(KEYRING_SNAPS_REGISTRY_URL);
+      snapRegistry = await response.json();
     } catch (error) {
       console.error(`Failed to fetch registry: `, error);
       snapRegistry = {};
diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index cc8fc02c6..37de2830e 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -1305,6 +1305,8 @@ export default class TransactionController extends EventEmitter {
         txMeta.custodyId,
         fromAddress,
       );
+
+      return null;
     }
     ///: END:ONLY_INCLUDE_IN
 
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 7c40d960a..66326a010 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -315,31 +315,42 @@ export default class MetamaskController extends EventEmitter {
       ],
     });
 
-    let initialProviderConfig;
-    if (process.env.IN_TEST) {
-      initialProviderConfig = {
-        type: NETWORK_TYPES.RPC,
-        rpcUrl: 'http://localhost:8545',
-        chainId: '0x539',
-        nickname: 'Localhost 8545',
-        ticker: 'ETH',
+    let initialNetworkControllerState = {};
+    if (initState.NetworkController) {
+      initialNetworkControllerState = initState.NetworkController;
+    } else if (process.env.IN_TEST) {
+      initialNetworkControllerState = {
+        providerConfig: {
+          chainId: CHAIN_IDS.LOCALHOST,
+          nickname: 'Localhost 8545',
+          rpcPrefs: {},
+          rpcUrl: 'http://localhost:8545',
+          ticker: 'ETH',
+          type: 'rpc',
+        },
+        networkConfigurations: {
+          networkConfigurationId: {
+            chainId: CHAIN_IDS.LOCALHOST,
+            nickname: 'Localhost 8545',
+            rpcPrefs: {},
+            rpcUrl: 'http://localhost:8545',
+            ticker: 'ETH',
+            networkConfigurationId: 'networkConfigurationId',
+          },
+        },
       };
     } else if (
       process.env.METAMASK_DEBUG ||
       process.env.METAMASK_ENVIRONMENT === 'test'
     ) {
-      initialProviderConfig = {
-        type: NETWORK_TYPES.GOERLI,
-        chainId: CHAIN_IDS.GOERLI,
-        ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
+      initialNetworkControllerState = {
+        providerConfig: {
+          type: NETWORK_TYPES.GOERLI,
+          chainId: CHAIN_IDS.GOERLI,
+          ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
+        },
       };
     }
-    const initialNetworkControllerState = initialProviderConfig
-      ? {
-          providerConfig: initialProviderConfig,
-          ...initState.NetworkController,
-        }
-      : initState.NetworkController;
     this.networkController = new NetworkController({
       messenger: networkControllerMessenger,
       state: initialNetworkControllerState,
@@ -568,8 +579,12 @@ export default class MetamaskController extends EventEmitter {
         ),
       getCurrentAccountEIP1559Compatibility:
         this.getCurrentAccountEIP1559Compatibility.bind(this),
+      legacyAPIEndpoint: `${gasApiBaseUrl}/networks/<chain_id>/gasPrices`,
       EIP1559APIEndpoint: `${gasApiBaseUrl}/networks/<chain_id>/suggestedGasFees`,
-      getCurrentNetworkLegacyGasAPICompatibility: () => false,
+      getCurrentNetworkLegacyGasAPICompatibility: () => {
+        const { chainId } = this.networkController.state.providerConfig;
+        return chainId === CHAIN_IDS.BSC;
+      },
       getChainId: () => this.networkController.state.providerConfig.chainId,
     });
 
@@ -1467,6 +1482,18 @@ export default class MetamaskController extends EventEmitter {
         this.signatureController.newUnsignedPersonalMessage.bind(
           this.signatureController,
         ),
+
+      ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+      setTypedMessageInProgress:
+        this.signatureController.setTypedMessageInProgress.bind(
+          this.signatureController,
+        ),
+      setPersonalMessageInProgress:
+        this.signatureController.setPersonalMessageInProgress.bind(
+          this.signatureController,
+        ),
+      ///: END:ONLY_INCLUDE_IN
+
       processEncryptionPublicKey:
         this.encryptionPublicKeyController.newRequestEncryptionPublicKey.bind(
           this.encryptionPublicKeyController,
@@ -2468,6 +2495,10 @@ export default class MetamaskController extends EventEmitter {
         this.controllerMessenger,
         'SnapController:handleRequest',
       ),
+      revokeDynamicSnapPermissions: this.controllerMessenger.call.bind(
+        this.controllerMessenger,
+        'SnapController:revokeDynamicPermissions',
+      ),
       dismissNotifications: this.dismissNotifications.bind(this),
       markNotificationsAsRead: this.markNotificationsAsRead.bind(this),
       ///: END:ONLY_INCLUDE_IN
diff --git a/builds.yml b/builds.yml
index 019da9378..fe4d755d3 100644
--- a/builds.yml
+++ b/builds.yml
@@ -52,7 +52,7 @@ buildTypes:
       - SEGMENT_FLASK_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/0.35.2-flask.1/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/0.36.1-flask.1/index.html
       - SUPPORT_LINK: https://metamask-flask.zendesk.com/hc
       - SUPPORT_REQUEST_LINK: https://metamask-flask.zendesk.com/hc/en-us/requests/new
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -71,7 +71,7 @@ buildTypes:
       - SEGMENT_FLASK_WRITE_KEY
       - ALLOW_LOCAL_SNAPS: true
       - REQUIRE_SNAPS_ALLOWLIST: false
-      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/0.35.2-flask.1/index.html
+      - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/0.36.1-flask.1/index.html
       - SUPPORT_LINK: https://metamask-flask.zendesk.com/hc
       - SUPPORT_REQUEST_LINK: https://metamask-flask.zendesk.com/hc/en-us/requests/new
       - INFURA_ENV_KEY_REF: INFURA_FLASK_PROJECT_ID
@@ -89,7 +89,7 @@ buildTypes:
       - SEGMENT_WRITE_KEY_REF: SEGMENT_MMI_WRITE_KEY
       - SUPPORT_LINK: https://mmi-support.zendesk.com/hc/en-us
       - SUPPORT_REQUEST_LINK: https://mmi-support.zendesk.com/hc/en-us/requests/new
-      - MMI_CONFIGURATION_SERVICE_URL: https://configuration.metamask-institutional.io/v1/configuration/default
+      - MMI_CONFIGURATION_SERVICE_URL
     # For some reason, MMI uses this type of versioning
     # Leaving it on for backwards compatibility
     isPrerelease: true
diff --git a/development/lib/retry.js b/development/lib/retry.js
index 204795142..ea469958b 100644
--- a/development/lib/retry.js
+++ b/development/lib/retry.js
@@ -11,13 +11,19 @@
  * @param {string} args.rejectionMessage - The message for the rejected promise
  * this function will return in the event of failure. (Default: "Retry limit
  * reached")
+ * @param {string} args.retryUntilFailure - Retries until the function fails.
  * @param {Function} functionToRetry - The function that is run and tested for
  * failure.
  * @returns {Promise<null | Error>} a promise that either resolves to null if
  * the function is successful or is rejected with rejectionMessage otherwise.
  */
 async function retry(
-  { retries, delay = 0, rejectionMessage = 'Retry limit reached' },
+  {
+    retries,
+    delay = 0,
+    rejectionMessage = 'Retry limit reached',
+    retryUntilFailure = false,
+  },
   functionToRetry,
 ) {
   let attempts = 0;
@@ -28,9 +34,14 @@ async function retry(
 
     try {
       await functionToRetry();
-      return;
+      if (!retryUntilFailure) {
+        return;
+      }
     } catch (error) {
       console.error(error);
+      if (retryUntilFailure) {
+        return;
+      }
     } finally {
       attempts += 1;
     }
diff --git a/lavamoat/browserify/desktop/policy.json b/lavamoat/browserify/desktop/policy.json
index aa3b955d2..e9b8572ae 100644
--- a/lavamoat/browserify/desktop/policy.json
+++ b/lavamoat/browserify/desktop/policy.json
@@ -1967,7 +1967,6 @@
         "@metamask/rpc-methods-flask>@metamask/snaps-ui": true,
         "@metamask/rpc-methods-flask>@metamask/snaps-utils": true,
         "@metamask/rpc-methods-flask>@metamask/utils": true,
-        "@metamask/rpc-methods-flask>nanoid": true,
         "eth-rpc-errors": true,
         "superstruct": true
       }
@@ -2173,7 +2172,6 @@
         "@metamask/snaps-controllers-flask>@metamask/snaps-utils": true,
         "@metamask/snaps-controllers-flask>@metamask/snaps-utils>@metamask/snaps-ui": true,
         "@metamask/snaps-controllers-flask>@metamask/utils": true,
-        "@metamask/snaps-controllers-flask>nanoid": true,
         "eth-rpc-errors": true,
         "superstruct": true
       }
diff --git a/lavamoat/browserify/flask/policy.json b/lavamoat/browserify/flask/policy.json
index aa3b955d2..e9b8572ae 100644
--- a/lavamoat/browserify/flask/policy.json
+++ b/lavamoat/browserify/flask/policy.json
@@ -1967,7 +1967,6 @@
         "@metamask/rpc-methods-flask>@metamask/snaps-ui": true,
         "@metamask/rpc-methods-flask>@metamask/snaps-utils": true,
         "@metamask/rpc-methods-flask>@metamask/utils": true,
-        "@metamask/rpc-methods-flask>nanoid": true,
         "eth-rpc-errors": true,
         "superstruct": true
       }
@@ -2173,7 +2172,6 @@
         "@metamask/snaps-controllers-flask>@metamask/snaps-utils": true,
         "@metamask/snaps-controllers-flask>@metamask/snaps-utils>@metamask/snaps-ui": true,
         "@metamask/snaps-controllers-flask>@metamask/utils": true,
-        "@metamask/snaps-controllers-flask>nanoid": true,
         "eth-rpc-errors": true,
         "superstruct": true
       }
diff --git a/package.json b/package.json
index eb8e18f1b..fdb303c67 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metamask-crx",
-  "version": "10.33.0",
+  "version": "10.33.1",
   "private": true,
   "repository": {
     "type": "git",
@@ -195,7 +195,8 @@
     "fast-json-patch@^3.1.1": "patch:fast-json-patch@npm%3A3.1.1#./.yarn/patches/fast-json-patch-npm-3.1.1-7e8bb70a45.patch",
     "request@^2.83.0": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
     "request@^2.88.2": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
-    "request@^2.85.0": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch"
+    "request@^2.85.0": "patch:request@npm%3A2.88.2#./.yarn/patches/request-npm-2.88.2-f4a57c72c4.patch",
+    "@metamask/signature-controller@^4.0.1": "patch:@metamask/signature-controller@npm%3A4.0.1#./.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch"
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
@@ -229,7 +230,7 @@
     "@metamask/base-controller": "^3.0.0",
     "@metamask/browser-passworder": "^4.1.0",
     "@metamask/contract-metadata": "^2.3.1",
-    "@metamask/controller-utils": "^4.0.1",
+    "@metamask/controller-utils": "^4.1.0",
     "@metamask/design-tokens": "^1.12.0",
     "@metamask/desktop": "^0.3.0",
     "@metamask/eth-json-rpc-middleware": "^11.0.0",
@@ -239,13 +240,13 @@
     "@metamask/eth-token-tracker": "^4.0.0",
     "@metamask/eth-trezor-keyring": "^1.0.0",
     "@metamask/etherscan-link": "^2.2.0",
-    "@metamask/gas-fee-controller": "^6.0.0",
+    "@metamask/gas-fee-controller": "^6.0.1",
     "@metamask/jazzicon": "^2.0.0",
     "@metamask/key-tree": "^7.0.0",
     "@metamask/logo": "^3.1.1",
-    "@metamask/message-manager": "^7.0.0",
+    "@metamask/message-manager": "^7.0.2",
     "@metamask/metamask-eth-abis": "^3.0.0",
-    "@metamask/network-controller": "^10.1.0",
+    "@metamask/network-controller": "^10.3.0",
     "@metamask/notification-controller": "^3.0.0",
     "@metamask/obs-store": "^8.1.0",
     "@metamask/permission-controller": "^4.0.0",
@@ -254,18 +255,18 @@
     "@metamask/providers": "^11.1.0",
     "@metamask/rate-limit-controller": "^3.0.0",
     "@metamask/rpc-methods": "^1.0.0-prerelease.1",
-    "@metamask/rpc-methods-flask": "npm:@metamask/rpc-methods@0.35.2-flask.1",
+    "@metamask/rpc-methods-flask": "npm:@metamask/rpc-methods@0.36.1-flask.1",
     "@metamask/safe-event-emitter": "^2.0.0",
     "@metamask/scure-bip39": "^2.0.3",
     "@metamask/signature-controller": "^4.0.1",
     "@metamask/slip44": "^3.0.0",
     "@metamask/smart-transactions-controller": "^3.1.0",
     "@metamask/snaps-controllers": "^1.0.0-prerelease.1",
-    "@metamask/snaps-controllers-flask": "npm:@metamask/snaps-controllers@0.35.2-flask.1",
+    "@metamask/snaps-controllers-flask": "npm:@metamask/snaps-controllers@0.36.1-flask.1",
     "@metamask/snaps-ui": "^1.0.0-prerelease.1",
-    "@metamask/snaps-ui-flask": "npm:@metamask/snaps-ui@0.35.2-flask.1",
+    "@metamask/snaps-ui-flask": "npm:@metamask/snaps-ui@0.36.1-flask.1",
     "@metamask/snaps-utils": "^1.0.0-prerelease.1",
-    "@metamask/snaps-utils-flask": "npm:@metamask/snaps-utils@0.35.2-flask.1",
+    "@metamask/snaps-utils-flask": "npm:@metamask/snaps-utils@0.36.1-flask.1",
     "@metamask/subject-metadata-controller": "^2.0.0",
     "@metamask/utils": "^5.0.0",
     "@ngraveio/bc-ur": "^1.1.6",
diff --git a/shared/constants/network.ts b/shared/constants/network.ts
index b25353dbe..c3eb9dc1d 100644
--- a/shared/constants/network.ts
+++ b/shared/constants/network.ts
@@ -174,8 +174,7 @@ export const BSC_DISPLAY_NAME = 'Binance Smart Chain';
 export const POLYGON_DISPLAY_NAME = 'Polygon';
 export const AVALANCHE_DISPLAY_NAME = 'Avalanche Network C-Chain';
 export const ARBITRUM_DISPLAY_NAME = 'Arbitrum One';
-export const BNB_DISPLAY_NAME =
-  'BNB Smart Chain (previously Binance Smart Chain Mainnet)';
+export const BNB_DISPLAY_NAME = 'BNB Chain';
 export const OPTIMISM_DISPLAY_NAME = 'Optimism';
 export const FANTOM_DISPLAY_NAME = 'Fantom Opera';
 export const HARMONY_DISPLAY_NAME = 'Harmony Mainnet Shard 0';
@@ -549,7 +548,6 @@ export const BUYABLE_CHAINS_MAP: {
     | typeof CHAIN_IDS.FANTOM_TESTNET
     | typeof CHAIN_IDS.MOONBEAM_TESTNET
     | typeof CHAIN_IDS.LINEA_GOERLI
-    | typeof CHAIN_IDS.LINEA_MAINNET
     | typeof CHAIN_IDS.GOERLI
   >]: BuyableChainSettings;
 } = {
@@ -613,6 +611,10 @@ export const BUYABLE_CHAINS_MAP: {
     nativeCurrency: CURRENCY_SYMBOLS.PALM,
     network: 'palm',
   },
+  [CHAIN_IDS.LINEA_MAINNET]: {
+    nativeCurrency: CURRENCY_SYMBOLS.ETH,
+    network: 'linea',
+  },
 };
 
 export const FEATURED_RPCS: RPCDefinition[] = [
diff --git a/shared/constants/snaps/permissions.ts b/shared/constants/snaps/permissions.ts
index 360c4a379..be3590ef4 100644
--- a/shared/constants/snaps/permissions.ts
+++ b/shared/constants/snaps/permissions.ts
@@ -29,3 +29,5 @@ export const ExcludedSnapEndowments = Object.freeze({
     'endowment:long-running is deprecated. For more information please see https://github.com/MetaMask/snaps-monorepo/issues/945.',
   ///: END:ONLY_INCLUDE_IN
 });
+
+export const DynamicSnapPermissions = Object.freeze(['eth_accounts']);
diff --git a/shared/modules/transaction.utils.js b/shared/modules/transaction.utils.js
index b07d1f869..44a681519 100644
--- a/shared/modules/transaction.utils.js
+++ b/shared/modules/transaction.utils.js
@@ -176,7 +176,7 @@ export async function determineTransactionType(txParams, query) {
     contractCode = resultCode;
 
     if (isContractAddress) {
-      const hasValue = txParams.value && txParams.value !== '0x0';
+      const hasValue = txParams.value && Number(txParams.value) !== 0;
 
       const tokenMethodName = [
         TransactionType.tokenMethodApprove,
diff --git a/shared/modules/transaction.utils.test.js b/shared/modules/transaction.utils.test.js
index 615fda2e3..242d10007 100644
--- a/shared/modules/transaction.utils.test.js
+++ b/shared/modules/transaction.utils.test.js
@@ -186,6 +186,20 @@ describe('Transaction.utils', function () {
           getCodeResponse: '0xab',
         });
 
+        const resultWithEmptyValue2 = await determineTransactionType(
+          {
+            value: '0x0000',
+            to: '0x9e673399f795D01116e9A8B2dD2F156705131ee9',
+            data: '0xa9059cbb0000000000000000000000002f318C334780961FB129D2a6c30D0763d9a5C970000000000000000000000000000000000000000000000000000000000000000a',
+          },
+          new EthQuery(_provider),
+        );
+
+        expect(resultWithEmptyValue2).toMatchObject({
+          type: TransactionType.tokenMethodTransfer,
+          getCodeResponse: '0xab',
+        });
+
         const resultWithValue = await determineTransactionType(
           {
             value: '0x12345',
diff --git a/test/e2e/helpers.js b/test/e2e/helpers.js
index d6a4bb2ab..8c0ffb76a 100644
--- a/test/e2e/helpers.js
+++ b/test/e2e/helpers.js
@@ -105,7 +105,9 @@ async function withFixtures(options, testSuite) {
         });
       }
     }
-    const mockedEndpoint = await setupMocking(mockServer, testSpecificMock);
+    const mockedEndpoint = await setupMocking(mockServer, testSpecificMock, {
+      chainId: ganacheOptions?.chainId || 1337,
+    });
     await mockServer.start(8000);
 
     driver = (await buildWebDriver(driverOptions)).driver;
diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
index e62958513..b52f6d938 100644
--- a/test/e2e/metamask-ui.spec.js
+++ b/test/e2e/metamask-ui.spec.js
@@ -291,13 +291,12 @@ describe('MetaMask', function () {
 
     it('transitions to the confirm screen', async function () {
       // Continue to next screen
-      await driver.delay(largeDelayMs);
+      await driver.waitForElementNotPresent('.loading-overlay');
       await driver.clickElement({ text: 'Next', tag: 'button' });
-      await driver.delay(largeDelayMs);
     });
 
     it('displays the token transfer data', async function () {
-      await driver.delay(largeDelayMs);
+      await driver.waitForElementNotPresent('.loading-overlay');
       await driver.clickElement({ text: 'Hex', tag: 'button' });
       await driver.delay(regularDelayMs);
 
@@ -481,7 +480,7 @@ describe('MetaMask', function () {
     });
 
     it('submits the transaction', async function () {
-      await driver.delay(largeDelayMs * 2);
+      await driver.waitForElementNotPresent('.loading-overlay');
       await driver.clickElement({ text: 'Confirm', tag: 'button' });
       await driver.delay(largeDelayMs * 2);
     });
diff --git a/test/e2e/metrics/transaction-finalized.spec.js b/test/e2e/metrics/transaction-finalized.spec.js
new file mode 100644
index 000000000..32c245255
--- /dev/null
+++ b/test/e2e/metrics/transaction-finalized.spec.js
@@ -0,0 +1,326 @@
+/* eslint-disable no-useless-escape */
+const { strict: assert } = require('assert');
+const {
+  defaultGanacheOptions,
+  withFixtures,
+  unlockWallet,
+  sendTransaction,
+  getEventPayloads,
+} = require('../helpers');
+const FixtureBuilder = require('../fixture-builder');
+
+/**
+ * mocks the segment api multiple times for specific payloads that we expect to
+ * see when these tests are run. In this case we are looking for
+ * 'Transaction Submitted' and 'Transaction Finalized'. In addition on the
+ * first event of each series we require a field that should only appear in the
+ * anonymized events so that we can guarantee order of seenRequests and can
+ * properly make assertions. Do not use the constants from the metrics
+ * constants files, because if these change we want a strong indicator to our
+ * data team that the shape of data will change.
+ *
+ * @param {import('mockttp').Mockttp} mockServer
+ * @returns {Promise<import('mockttp/dist/pluggable-admin').MockttpClientResponse>[]}
+ */
+async function mockSegment(mockServer) {
+  return [
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [
+          {
+            type: 'track',
+            event: 'Transaction Submitted',
+            properties: { status: 'submitted' },
+          },
+        ],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [
+          {
+            type: 'track',
+            event: 'Transaction Submitted',
+          },
+        ],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [
+          {
+            type: 'track',
+            event: 'Transaction Finalized',
+            properties: { status: 'confirmed' },
+          },
+        ],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+    await mockServer
+      .forPost('https://api.segment.io/v1/batch')
+      .withJsonBodyIncluding({
+        batch: [
+          {
+            type: 'track',
+            event: 'Transaction Finalized',
+          },
+        ],
+      })
+      .thenCallback(() => {
+        return {
+          statusCode: 200,
+        };
+      }),
+  ];
+}
+
+const RECIPIENT = '0x0Cc5261AB8cE458dc977078A3623E2BaDD27afD3';
+
+describe('Transaction Finalized Event', function () {
+  it('Successfully tracked when sending a transaction', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: 'fake-metrics-id',
+            participateInMetaMetrics: true,
+          })
+          .build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.title,
+        testSpecificMock: mockSegment,
+      },
+      async ({ driver, mockedEndpoint: mockedEndpoints }) => {
+        await driver.navigate();
+        await unlockWallet(driver);
+
+        await sendTransaction(driver, RECIPIENT, '2.0');
+
+        const events = await getEventPayloads(driver, mockedEndpoints);
+        // The order of these events is ensured by the mockSegment function
+        // which requires that the first, and third (0, 2 indexes) have the
+        // status property, which will only appear on the anonymous events.
+        const transactionSubmittedNoMMId = events[0];
+        const transactionSubmittedWithMMId = events[1];
+        const transactionFinalizedNoMMId = events[2];
+        const transactionFinalizedWithMMId = events[3];
+
+        // Assert doesn't have generic matchers so we delete these timestamp related properties.
+        // If we switch to a different assertion library we can use generic matchers in the future.
+        delete transactionSubmittedNoMMId.properties.first_seen;
+        delete transactionFinalizedNoMMId.properties.first_seen;
+        delete transactionFinalizedNoMMId.properties.completion_time;
+
+        // Assert that the event names begin with the appropriate prefixes. Even finalized events begin with transaction-submitted
+        // because they start as event fragments created when the transaction is submitted.
+        assert.ok(
+          transactionSubmittedNoMMId.messageId.startsWith(
+            'transaction-submitted',
+          ),
+          `Transaction Submitted event with sensitive properties has messageId \"${transactionSubmittedNoMMId.messageId}\" does not have a messageId beginning with \"transaction-submitted\"`,
+        );
+
+        assert.ok(
+          transactionFinalizedNoMMId.messageId.startsWith(
+            'transaction-submitted',
+          ),
+          `Transaction Finalized event with sensitive properties has messageId \"${transactionFinalizedNoMMId.messageId}\" that does not begin with \"transaction-submitted\"`,
+        );
+
+        assert.ok(
+          transactionSubmittedWithMMId.messageId.startsWith(
+            'transaction-submitted',
+          ),
+          `Transaction Submitted event has messageId \"${transactionSubmittedWithMMId.messageId}\" that does not begin with \"transaction-submitted\"`,
+        );
+
+        assert.ok(
+          transactionFinalizedWithMMId.messageId.startsWith(
+            'transaction-submitted',
+          ),
+          `Transaction Finalized event has messageID \"${transactionFinalizedWithMMId.messageId}\" that does not begin with \"transaction-submitted\"`,
+        );
+
+        // Assert that the events with sensitive properties should have messageIds ending in 0x000
+        // This is important because otherwise the events are seen as duplicates in segment
+
+        assert.ok(
+          transactionSubmittedNoMMId.messageId.endsWith('0x000'),
+          `Transaction Submitted event with sensitive properties has messageId \"${transactionSubmittedNoMMId.messageId}\" that does not end in \"0x000\" to differentiate it from the event that does not include sensitive data.`,
+        );
+
+        assert.ok(
+          transactionFinalizedNoMMId.messageId.endsWith('0x000'),
+          `Transaction Finalized event with sensitive properties has messageID \"${transactionFinalizedNoMMId.messageId}\" that does not end in \"0x000\" to differentiate it from the event that does not include sensitive data.`,
+        );
+
+        // Assert that transaction finalized events contain '-success-' in their messageId
+        assert.ok(
+          transactionFinalizedWithMMId.messageId.includes('-success-'),
+          `Transaction Finalized event has messageId \"${transactionFinalizedWithMMId.messageId}\" that does not contain "-success-"`,
+        );
+
+        assert.ok(
+          transactionFinalizedNoMMId.messageId.includes('-success-'),
+          `Transaction Finalized event with sensitive properties has messageID \"${transactionFinalizedNoMMId.messageId}\" that does not contain "-success-"`,
+        );
+
+        // Assert that the events with sensitive data do not contain a userId (the random anonymous id generated when a user opts into metametrics)
+        assert.ok(
+          typeof transactionSubmittedNoMMId.userId === 'undefined',
+          'Transaction Submitted event with sensitive properties has a userId supplied when it should only have the anonymousId',
+        );
+        assert.ok(
+          typeof transactionFinalizedNoMMId.userId === 'undefined',
+          'Transaction Finalized event with sensitive properties has a userId supplied when it should only have the anonymousId',
+        );
+
+        // Assert that the events with sensitive data have anonymousId set to 0x0000000000000000 which is our universal anonymous record
+        assert.ok(
+          transactionSubmittedNoMMId.anonymousId === '0x0000000000000000',
+          'Transaction Submitted event with sensitive properties has an anonymousId that does not match our universal anonymous id of 0x0000000000000000',
+        );
+        assert.ok(
+          transactionFinalizedNoMMId.anonymousId === '0x0000000000000000',
+          'Transaction Finalized event with sensitive properties has an anonymousId that does not match our universal anonymous id of 0x0000000000000000',
+        );
+
+        // Assert that our events without sensitive data have a userId but no anonymousId
+        assert.ok(
+          typeof transactionSubmittedWithMMId.userId === 'string' &&
+            typeof transactionSubmittedWithMMId.anonymousId === 'undefined',
+          'Transaction Submitted event without sensitive properties should only have a userId specified, and no anonymousId',
+        );
+        assert.ok(
+          typeof transactionFinalizedWithMMId.userId === 'string' &&
+            typeof transactionFinalizedWithMMId.anonymousId === 'undefined',
+          'Transaction Finalized event without sensitive properties should only have a userId specified, and no anonymousId',
+        );
+
+        // Assert on the properties
+
+        assert.deepStrictEqual(
+          transactionSubmittedNoMMId.properties,
+          {
+            status: 'submitted',
+            transaction_envelope_type: 'legacy',
+            gas_limit: '0x5208',
+            gas_price: '2',
+            default_gas: '0.000021',
+            default_gas_price: '2',
+            chain_id: '0x539',
+            referrer: 'metamask',
+            source: 'user',
+            network: '1337',
+            eip_1559_version: '0',
+            gas_edit_type: 'none',
+            gas_edit_attempted: 'none',
+            account_type: 'MetaMask',
+            device_model: 'N/A',
+            asset_type: 'NATIVE',
+            token_standard: 'NONE',
+            transaction_type: 'simpleSend',
+            transaction_speed_up: false,
+            ui_customizations: null,
+            category: 'Transactions',
+            locale: 'en',
+            environment_type: 'background',
+          },
+          'Transaction Submitted event with sensitive properties does not match the expected payload',
+        );
+        assert.deepStrictEqual(
+          transactionSubmittedWithMMId.properties,
+          {
+            chain_id: '0x539',
+            referrer: 'metamask',
+            source: 'user',
+            network: '1337',
+            eip_1559_version: '0',
+            gas_edit_type: 'none',
+            gas_edit_attempted: 'none',
+            account_type: 'MetaMask',
+            device_model: 'N/A',
+            asset_type: 'NATIVE',
+            token_standard: 'NONE',
+            transaction_type: 'simpleSend',
+            transaction_speed_up: false,
+            ui_customizations: null,
+            category: 'Transactions',
+            locale: 'en',
+            environment_type: 'background',
+          },
+          'Transaction Submitted event without sensitive properties does not match the expected payload',
+        );
+
+        assert.deepStrictEqual(
+          transactionFinalizedNoMMId.properties,
+          {
+            status: 'confirmed',
+            transaction_envelope_type: 'legacy',
+            gas_limit: '0x5208',
+            gas_price: '2',
+            default_gas: '0.000021',
+            default_gas_price: '2',
+            chain_id: '0x539',
+            referrer: 'metamask',
+            source: 'user',
+            network: '1337',
+            eip_1559_version: '0',
+            gas_edit_type: 'none',
+            gas_edit_attempted: 'none',
+            account_type: 'MetaMask',
+            device_model: 'N/A',
+            asset_type: 'NATIVE',
+            token_standard: 'NONE',
+            transaction_type: 'simpleSend',
+            transaction_speed_up: false,
+            ui_customizations: null,
+            gas_used: '5208',
+            category: 'Transactions',
+            locale: 'en',
+            environment_type: 'background',
+          },
+          'Transaction Finalized event with sensitive properties does not match the expected payload',
+        );
+        assert.deepStrictEqual(
+          transactionFinalizedWithMMId.properties,
+          {
+            chain_id: '0x539',
+            referrer: 'metamask',
+            source: 'user',
+            network: '1337',
+            eip_1559_version: '0',
+            gas_edit_type: 'none',
+            gas_edit_attempted: 'none',
+            account_type: 'MetaMask',
+            device_model: 'N/A',
+            asset_type: 'NATIVE',
+            token_standard: 'NONE',
+            transaction_type: 'simpleSend',
+            transaction_speed_up: false,
+            ui_customizations: null,
+            category: 'Transactions',
+            locale: 'en',
+            environment_type: 'background',
+          },
+          'Transaction Finalized event without sensitive properties does not match the expected payload',
+        );
+      },
+    );
+  });
+});
diff --git a/test/e2e/mock-e2e.js b/test/e2e/mock-e2e.js
index 29035f46c..a3e48208d 100644
--- a/test/e2e/mock-e2e.js
+++ b/test/e2e/mock-e2e.js
@@ -20,7 +20,16 @@ const emptyStalelist = {
   lastUpdated: 0,
 };
 
-async function setupMocking(server, testSpecificMock) {
+/**
+ * Setup E2E network mocks.
+ *
+ * @param {object} server - The mock server used for network mocks.
+ * @param {Function} testSpecificMock - A function for setting up test-specific network mocks
+ * @param {object} options - Network mock options.
+ * @param {string} options.chainId - The chain ID used by the default configured network.
+ * @returns
+ */
+async function setupMocking(server, testSpecificMock, { chainId }) {
   await server.forAnyRequest().thenPassThrough({
     beforeRequest: (req) => {
       const { host } = req.headers;
@@ -99,7 +108,9 @@ async function setupMocking(server, testSpecificMock) {
     });
 
   await server
-    .forGet('https://gas-api.metaswap.codefi.network/networks/1337/gasPrices')
+    .forGet(
+      `https://gas-api.metaswap.codefi.network/networks/${chainId}/gasPrices`,
+    )
     .thenCallback(() => {
       return {
         statusCode: 200,
@@ -130,7 +141,7 @@ async function setupMocking(server, testSpecificMock) {
 
   await server
     .forGet(
-      'https://gas-api.metaswap.codefi.network/networks/1337/suggestedGasFees',
+      `https://gas-api.metaswap.codefi.network/networks/${chainId}/suggestedGasFees`,
     )
     .thenCallback(() => {
       return {
@@ -203,7 +214,7 @@ async function setupMocking(server, testSpecificMock) {
     });
 
   await server
-    .forGet('https://token-api.metaswap.codefi.network/tokens/1337')
+    .forGet(`https://token-api.metaswap.codefi.network/tokens/${chainId}`)
     .thenCallback(() => {
       return {
         statusCode: 200,
@@ -343,7 +354,7 @@ async function setupMocking(server, testSpecificMock) {
     });
 
   await server
-    .forGet('https://token-api.metaswap.codefi.network/token/1337')
+    .forGet(`https://token-api.metaswap.codefi.network/token/${chainId}`)
     .thenCallback(() => {
       return {
         statusCode: 200,
@@ -352,15 +363,15 @@ async function setupMocking(server, testSpecificMock) {
     });
 
   // It disables loading of token icons, e.g. this URL: https://static.metafi.codefi.network/api/v1/tokenIcons/1337/0x0000000000000000000000000000000000000000.png
-  await server
-    .forGet(
-      /^https:\/\/static\.metafi\.codefi\.network\/api\/v1\/tokenIcons\/1337\/.*\.png/u,
-    )
-    .thenCallback(() => {
-      return {
-        statusCode: 200,
-      };
-    });
+  const tokenIconRegex = new RegExp(
+    `^https:\\/\\/static\\.metafi\\.codefi\\.network\\/api\\/vi\\/tokenIcons\\/${chainId}\\/.*\\.png`,
+    'u',
+  );
+  await server.forGet(tokenIconRegex).thenCallback(() => {
+    return {
+      statusCode: 200,
+    };
+  });
 
   await server
     .forGet('https://min-api.cryptocompare.com/data/price')
diff --git a/test/e2e/run-e2e-test.js b/test/e2e/run-e2e-test.js
index 92eef2533..1c2c60362 100644
--- a/test/e2e/run-e2e-test.js
+++ b/test/e2e/run-e2e-test.js
@@ -31,6 +31,11 @@ async function main() {
               'Set how many times the test should be retried upon failure.',
             type: 'number',
           })
+          .option('retry-until-failure', {
+            default: false,
+            description: 'Retries until the test fails',
+            type: 'boolean',
+          })
           .option('leave-running', {
             default: false,
             description:
@@ -46,7 +51,14 @@ async function main() {
     .strict()
     .help('help');
 
-  const { browser, debug, e2eTestPath, retries, leaveRunning } = argv;
+  const {
+    browser,
+    debug,
+    e2eTestPath,
+    retries,
+    retryUntilFailure,
+    leaveRunning,
+  } = argv;
 
   if (!browser) {
     exitWithError(
@@ -97,7 +109,7 @@ async function main() {
   const dir = 'test/test-results/e2e';
   fs.mkdir(dir, { recursive: true });
 
-  await retry({ retries }, async () => {
+  await retry({ retries, retryUntilFailure }, async () => {
     await runInShell(
       'yarn',
       [
diff --git a/test/e2e/tests/contract-interactions.spec.js b/test/e2e/tests/contract-interactions.spec.js
index 02e95d7bd..c5c0e6600 100644
--- a/test/e2e/tests/contract-interactions.spec.js
+++ b/test/e2e/tests/contract-interactions.spec.js
@@ -3,6 +3,9 @@ const {
   withFixtures,
   openDapp,
   locateAccountBalanceDOM,
+  unlockWallet,
+  largeDelayMs,
+  WINDOW_TITLES,
 } = require('../helpers');
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
 const FixtureBuilder = require('../fixture-builder');
@@ -34,34 +37,32 @@ describe('Deploy contract and call contract methods', function () {
           smartContract,
         );
         await driver.navigate();
-        await driver.fill('#password', 'correct horse battery staple');
-        await driver.press('#password', driver.Key.ENTER);
+        await unlockWallet(driver);
 
         // deploy contract
         await openDapp(driver, contractAddress);
 
         // wait for deployed contract, calls and confirms a contract method where ETH is sent
-        await driver.findClickableElement('#deployButton');
+        await driver.delay(largeDelayMs);
         await driver.clickElement('#depositButton');
-        await driver.waitUntilXWindowHandles(3);
-        let windowHandles = await driver.getAllWindowHandles();
-        const extension = windowHandles[0];
-        const dapp = await driver.switchToWindowWithTitle(
-          'E2E Test Dapp',
-          windowHandles,
-        );
 
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
+        await driver.waitForSelector({
+          css: 'span',
+          text: 'Deposit initiated',
+        });
+
+        await driver.waitUntilXWindowHandles(3);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Notification);
         await driver.waitForSelector({
           css: '.confirm-page-container-summary__action__name',
           text: 'Deposit',
         });
+
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
-        await driver.switchToWindow(extension);
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
         await driver.clickElement({ text: 'Activity', tag: 'button' });
         await driver.waitForSelector(
           '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)',
@@ -72,17 +73,16 @@ describe('Deploy contract and call contract methods', function () {
         });
 
         // calls and confirms a contract method where ETH is received
-        await driver.switchToWindow(dapp);
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
         await driver.clickElement('#withdrawButton');
         await driver.waitUntilXWindowHandles(3);
-        windowHandles = await driver.getAllWindowHandles();
-        await driver.switchToWindowWithTitle(
-          'MetaMask Notification',
-          windowHandles,
-        );
+
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Notification);
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
-        await driver.switchToWindow(extension);
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
         await driver.waitForSelector(
           '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(2)',
         );
@@ -92,7 +92,9 @@ describe('Deploy contract and call contract methods', function () {
         });
 
         // renders the correct ETH balance
-        await driver.switchToWindow(extension);
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.ExtensionInFullScreenView,
+        );
         await locateAccountBalanceDOM(driver, ganacheServer);
       },
     );
diff --git a/test/e2e/tests/custom-token-add-approve.spec.js b/test/e2e/tests/custom-token-add-approve.spec.js
index fe78862d4..57d2a3d6a 100644
--- a/test/e2e/tests/custom-token-add-approve.spec.js
+++ b/test/e2e/tests/custom-token-add-approve.spec.js
@@ -129,10 +129,6 @@ describe('Create token, approve token and approve token without gas', function (
           text: 'Got it',
           tag: 'button',
         });
-        await driver.clickElement({
-          text: 'Use default',
-          css: '.mm-button-link',
-        });
         await driver.clickElement({
           text: 'View details',
           css: '.token-allowance-container__view-details',
@@ -157,17 +153,17 @@ describe('Create token, approve token and approve token without gas', function (
         await driver.clickElement({ text: 'Next', tag: 'button' });
 
         await driver.findElement({
-          text: 'Review the spending cap for your',
-          tag: 'div',
+          text: 'Spending cap request for your ',
+          css: '.box--flex-direction-row',
         });
 
-        const defaultSpendingCup = await driver.findElement({
+        const defaultSpendingCap = await driver.findElement({
           text: '7 TST',
           css: '.box--flex-direction-row > h6',
         });
 
         assert.equal(
-          await defaultSpendingCup.getText(),
+          await defaultSpendingCap.getText(),
           '7 TST',
           'Default value is not correctly set',
         );
@@ -253,13 +249,13 @@ describe('Create token, approve token and approve token without gas', function (
           tag: 'button',
         });
 
-        let spendingCup = await driver.findElement({
+        let spendingCap = await driver.findElement({
           text: '5 TST',
           css: '.box--flex-direction-row > h6',
         });
 
         assert.equal(
-          await spendingCup.getText(),
+          await spendingCap.getText(),
           '5 TST',
           'Default value is not correctly set',
         );
@@ -309,12 +305,12 @@ describe('Create token, approve token and approve token without gas', function (
           tag: 'button',
         });
 
-        spendingCup = await driver.findElement({
+        spendingCap = await driver.findElement({
           text: '9 TST',
           css: '.box--flex-direction-row > h6',
         });
         assert.equal(
-          await spendingCup.getText(),
+          await spendingCap.getText(),
           '9 TST',
           'Default value is not correctly set',
         );
@@ -429,7 +425,7 @@ describe('Create token, approve token and approve token without gas', function (
     );
   });
 
-  it('approves token without gas, set default spending cap, submits the transaction and finds the transaction in the transactions list', async function () {
+  it('approves token without gas, set site suggested spending cap, submits the transaction and finds the transaction in the transactions list', async function () {
     await withFixtures(
       {
         dapp: true,
@@ -465,9 +461,16 @@ describe('Create token, approve token and approve token without gas', function (
 
         const pendingTxes = await driver.findElements('.transaction-list-item');
         pendingTxes[0].click();
-        // set spending cap
+
+        // set custom spending cap
+        const spendingCap = await driver.findElement(
+          '[data-testid="custom-spending-cap-input"]',
+        );
+        await spendingCap.fill('5');
+
+        // set site suggested spending cap
         await driver.clickElement({
-          text: 'Use default',
+          text: 'Use site suggestion',
           css: '.mm-button-link',
         });
         await driver.clickElement({
diff --git a/test/e2e/tests/encrypt-decrypt.spec.js b/test/e2e/tests/encrypt-decrypt.spec.js
index 59e87648e..bdce53f8f 100644
--- a/test/e2e/tests/encrypt-decrypt.spec.js
+++ b/test/e2e/tests/encrypt-decrypt.spec.js
@@ -2,7 +2,7 @@ const { strict: assert } = require('assert');
 const { convertToHexValue, withFixtures, openDapp } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
-async function getEncryptionKey(driver) {
+async function validateEncryptionKey(driver, encryptionKey) {
   await driver.clickElement('#getEncryptionKeyButton');
   await driver.waitUntilXWindowHandles(3);
   let windowHandles = await driver.getAllWindowHandles();
@@ -15,7 +15,10 @@ async function getEncryptionKey(driver) {
   await driver.waitUntilXWindowHandles(2);
   windowHandles = await driver.getAllWindowHandles();
   await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
-  return await driver.findElement('#encryptionKeyDisplay');
+  await driver.findElement({
+    css: '#encryptionKeyDisplay',
+    text: encryptionKey,
+  });
 }
 
 async function encryptMessage(driver, message) {
@@ -51,8 +54,10 @@ async function verifyDecryptedMessageMM(driver, message) {
 async function verifyDecryptedMessageDapp(driver, message) {
   const windowHandles = await driver.getAllWindowHandles();
   await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles);
-  const clearTextLabel = await driver.findElement('#cleartextDisplay');
-  assert.equal(await clearTextLabel.getText(), message);
+  await driver.findElement({
+    css: '#cleartextDisplay',
+    text: message,
+  });
 }
 
 describe('Encrypt Decrypt', function () {
@@ -67,6 +72,7 @@ describe('Encrypt Decrypt', function () {
   };
   const encryptionKey = 'fxYXfCbun026g5zcCQh7Ia+O0urAEVZWLG8H4Jzu7Xs=';
   const message = 'Hello, Bob!';
+
   it('should decrypt an encrypted message', async function () {
     await withFixtures(
       {
@@ -84,8 +90,7 @@ describe('Encrypt Decrypt', function () {
         await openDapp(driver);
 
         // ------ Get Encryption key ------
-        const encryptionKeyLabel = await getEncryptionKey(driver);
-        assert.equal(await encryptionKeyLabel.getText(), encryptionKey);
+        await validateEncryptionKey(driver, encryptionKey);
 
         // ------ Encrypt ------
         await encryptMessage(driver, message);
@@ -126,8 +131,7 @@ describe('Encrypt Decrypt', function () {
         await openDapp(driver);
 
         // ------ Get Encryption key ------
-        const encryptionKeyLabel = await getEncryptionKey(driver);
-        assert.equal(await encryptionKeyLabel.getText(), encryptionKey);
+        await validateEncryptionKey(driver, encryptionKey);
 
         // ------ Encrypt Message 1------
         await encryptMessage(driver, message);
diff --git a/test/e2e/tests/gas-estimates.spec.js b/test/e2e/tests/gas-estimates.spec.js
index a7d121f31..f9f27029a 100644
--- a/test/e2e/tests/gas-estimates.spec.js
+++ b/test/e2e/tests/gas-estimates.spec.js
@@ -4,6 +4,7 @@ const {
   logInWithBalanceValidation,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
+const { CHAIN_IDS } = require('../../../shared/constants/network');
 
 describe('Gas estimates generated by MetaMask', function () {
   const baseGanacheOptions = {
@@ -139,7 +140,85 @@ describe('Gas estimates generated by MetaMask', function () {
   });
 
   describe('Send on a network that is not EIP-1559 compatible', function () {
-    it('show expected gas defaults', async function () {
+    it('show expected gas defaults on a network supported by legacy gas API', async function () {
+      await withFixtures(
+        {
+          fixtures: new FixtureBuilder().build(),
+          ganacheOptions: {
+            ...preLondonGanacheOptions,
+            chainId: parseInt(CHAIN_IDS.BSC, 16),
+          },
+          title: this.test.title,
+        },
+        async ({ driver, ganacheServer }) => {
+          await driver.navigate();
+          await logInWithBalanceValidation(driver, ganacheServer);
+
+          await driver.clickElement('[data-testid="eth-overview-send"]');
+
+          await driver.fill(
+            'input[placeholder="Enter public address (0x) or ENS name"]',
+            '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+          );
+
+          await driver.fill('.unit-input__input', '1');
+
+          // Check that the gas estimation is what we expect
+          await driver.findElement({
+            cass: '[data-testid="confirm-gas-display"]',
+            text: '0.000042',
+          });
+        },
+      );
+    });
+
+    it('show expected gas defaults on a network supported by legacy gas API when that API is down', async function () {
+      await withFixtures(
+        {
+          fixtures: new FixtureBuilder().build(),
+          ganacheOptions: {
+            ...preLondonGanacheOptions,
+            chainId: parseInt(CHAIN_IDS.BSC, 16),
+          },
+          testSpecificMock: (mockServer) => {
+            mockServer
+              .forGet(
+                `https://gas-api.metaswap.codefi.network/networks/${parseInt(
+                  CHAIN_IDS.BSC,
+                  16,
+                )}/gasPrices`,
+              )
+              .thenCallback(() => {
+                return {
+                  statusCode: 422,
+                };
+              });
+          },
+          title: this.test.title,
+        },
+        async ({ driver, ganacheServer }) => {
+          await driver.navigate();
+          await logInWithBalanceValidation(driver, ganacheServer);
+
+          await driver.clickElement('[data-testid="eth-overview-send"]');
+
+          await driver.fill(
+            'input[placeholder="Enter public address (0x) or ENS name"]',
+            '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+          );
+
+          await driver.fill('.unit-input__input', '1');
+
+          // Check that the gas estimation is what we expect
+          await driver.findElement({
+            cass: '[data-testid="confirm-gas-display"]',
+            text: '0.000042',
+          });
+        },
+      );
+    });
+
+    it('show expected gas defaults on a network not supported by legacy gas API', async function () {
       await withFixtures(
         {
           fixtures: new FixtureBuilder().build(),
diff --git a/test/e2e/tests/import-flow.spec.js b/test/e2e/tests/import-flow.spec.js
index 19f02219a..b89e2bbf5 100644
--- a/test/e2e/tests/import-flow.spec.js
+++ b/test/e2e/tests/import-flow.spec.js
@@ -51,14 +51,14 @@ describe('Import flow', function () {
         await driver.findVisibleElement('.qr-code__wrapper');
 
         // shows a QR code for the account
-        await driver.findVisibleElement('.popover-container');
+        await driver.findVisibleElement('.mm-modal');
         // shows the correct account address
         const address = await driver.findElement(
           '.multichain-address-copy-button',
         );
         assert.equal(await address.getText(), '0x0Cc...afD3');
 
-        await driver.clickElement('[data-testid="popover-close"]');
+        await driver.clickElement('.mm-modal button[aria-label="Close"]');
 
         // logs out of the account
         await driver.clickElement(
diff --git a/test/e2e/tests/incremental-security.spec.js b/test/e2e/tests/incremental-security.spec.js
index 29535738c..e96b49c19 100644
--- a/test/e2e/tests/incremental-security.spec.js
+++ b/test/e2e/tests/incremental-security.spec.js
@@ -78,8 +78,8 @@ describe('Incremental Security', function () {
         const publicAddress = await address.getText();
 
         // wait for account modal to be visible
-        const accountModal = await driver.findVisibleElement('.popover-bg');
-        await driver.clickElement('[data-testid="popover-close"]');
+        const accountModal = await driver.findVisibleElement('.mm-modal');
+        await driver.clickElement('.mm-modal button[aria-label="Close"]');
 
         // wait for account modal to be removed from DOM
         await accountModal.waitForElementState('hidden');
diff --git a/test/e2e/webdriver/driver.js b/test/e2e/webdriver/driver.js
index 2c222ae95..c1284f70c 100644
--- a/test/e2e/webdriver/driver.js
+++ b/test/e2e/webdriver/driver.js
@@ -161,16 +161,18 @@ class Driver {
     // replacement for the implementation below. It takes an option options
     // bucket that can include the state attribute to wait for elements that
     // match the selector to be removed from the DOM.
-    const selector = this.buildLocator(rawLocator);
     let element;
     if (!['visible', 'detached'].includes(state)) {
       throw new Error(`Provided state selector ${state} is not supported`);
     }
     if (state === 'visible') {
-      element = await this.driver.wait(until.elementLocated(selector), timeout);
+      element = await this.driver.wait(
+        until.elementLocated(this.buildLocator(rawLocator)),
+        timeout,
+      );
     } else if (state === 'detached') {
       element = await this.driver.wait(
-        until.stalenessOf(await this.findElement(selector)),
+        until.stalenessOf(await this.findElement(rawLocator)),
         timeout,
       );
     }
@@ -205,15 +207,13 @@ class Driver {
   }
 
   async findVisibleElement(rawLocator) {
-    const locator = this.buildLocator(rawLocator);
-    const element = await this.findElement(locator);
+    const element = await this.findElement(rawLocator);
     await this.driver.wait(until.elementIsVisible(element), this.timeout);
     return wrapElementWithAPI(element, this);
   }
 
   async findClickableElement(rawLocator) {
-    const locator = this.buildLocator(rawLocator);
-    const element = await this.findElement(locator);
+    const element = await this.findElement(rawLocator);
     await Promise.all([
       this.driver.wait(until.elementIsVisible(element), this.timeout),
       this.driver.wait(until.elementIsEnabled(element), this.timeout),
@@ -231,8 +231,7 @@ class Driver {
   }
 
   async findClickableElements(rawLocator) {
-    const locator = this.buildLocator(rawLocator);
-    const elements = await this.findElements(locator);
+    const elements = await this.findElements(rawLocator);
     await Promise.all(
       elements.reduce((acc, element) => {
         acc.push(
@@ -246,14 +245,12 @@ class Driver {
   }
 
   async clickElement(rawLocator) {
-    const locator = this.buildLocator(rawLocator);
-    const element = await this.findClickableElement(locator);
+    const element = await this.findClickableElement(rawLocator);
     await element.click();
   }
 
   async clickPoint(rawLocator, x, y) {
-    const locator = this.buildLocator(rawLocator);
-    const element = await this.findElement(locator);
+    const element = await this.findElement(rawLocator);
     await this.driver
       .actions()
       .move({ origin: element, x, y })
@@ -281,10 +278,9 @@ class Driver {
   }
 
   async assertElementNotPresent(rawLocator) {
-    const locator = this.buildLocator(rawLocator);
     let dataTab;
     try {
-      dataTab = await this.findElement(locator);
+      dataTab = await this.findElement(rawLocator);
     } catch (err) {
       assert(
         err instanceof webdriverError.NoSuchElementError ||
@@ -375,7 +371,7 @@ class Driver {
     return await this.driver.getAllWindowHandles();
   }
 
-  async waitUntilXWindowHandles(x, delayStep = 1000, timeout = 5000) {
+  async waitUntilXWindowHandles(x, delayStep = 1000, timeout = this.timeout) {
     let timeElapsed = 0;
     let windowHandles = [];
     while (timeElapsed <= timeout) {
diff --git a/test/env.js b/test/env.js
index 4056fc287..dd3c370b8 100644
--- a/test/env.js
+++ b/test/env.js
@@ -1,4 +1,4 @@
 process.env.METAMASK_ENVIRONMENT = 'test';
 process.env.SUPPORT_LINK = 'https://support.metamask.io';
 process.env.IFRAME_EXECUTION_ENVIRONMENT_URL =
-  'https://execution.metamask.io/0.35.2-flask.1/index.html';
+  'https://execution.metamask.io/0.36.1-flask.1/index.html';
diff --git a/test/jest/setup.js b/test/jest/setup.js
index a3c5d2568..94feffdff 100644
--- a/test/jest/setup.js
+++ b/test/jest/setup.js
@@ -127,3 +127,6 @@ expect.extend({
         };
   },
 });
+
+// Setup window.prompt
+global.prompt = () => undefined;
diff --git a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
index 46ca44ffb..2b2dff9b4 100644
--- a/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
+++ b/ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap
@@ -51,15 +51,6 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="mm-box form-field__heading-detail mm-box--margin-right-0 mm-box--margin-bottom-2 mm-box--text-align-end"
-              >
-                <button
-                  class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
-                >
-                  Use default
-                </button>
-              </div>
             </div>
             <input
               class="form-field__input"
@@ -67,7 +58,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
               id="custom-spending-cap"
               placeholder="Enter a number"
               type="text"
-              value="10"
+              value="7"
             />
             
           </div>
@@ -85,7 +76,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
           class="box custom-spending-cap__description box--flex-direction-row"
         >
           <h6
-            class="box mm-text mm-text--body-sm box--padding-top-2 box--padding-bottom-2 box--flex-direction-row box--color-text-default"
+            class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
           >
             <span>
                
@@ -93,7 +84,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
               <h6
                 class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
               >
-                10
+                7
                  
                 TST
               </h6>
@@ -101,6 +92,13 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                
             </span>
           </h6>
+          <a
+            class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+            href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+            target="_blank"
+          >
+            Learn more
+          </a>
         </div>
       </label>
     </div>
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index d2da1adfe..da9033c07 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -1,5 +1,5 @@
 import React, { useState, useContext, useEffect, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import BigNumber from 'bignumber.js';
@@ -21,7 +21,6 @@ import {
   BackgroundColor,
   TextColor,
 } from '../../../helpers/constants/design-system';
-import { getCustomTokenAmount } from '../../../selectors';
 import { setCustomTokenAmount } from '../../../ducks/app/app';
 import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
 import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
@@ -34,6 +33,7 @@ import { Numeric } from '../../../../shared/modules/Numeric';
 import { estimateGas } from '../../../store/actions';
 import { getCustomTxParamsData } from '../../../pages/confirm-approve/confirm-approve.util';
 import { useGasFeeContext } from '../../../contexts/gasFee';
+import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
 import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip';
 
 export default function CustomSpendingCap({
@@ -45,18 +45,17 @@ export default function CustomSpendingCap({
   passTheErrorText,
   decimals,
   setInputChangeInProgress,
+  customSpendingCap,
+  setCustomSpendingCap,
 }) {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
   const { updateTransaction } = useGasFeeContext();
   const inputRef = useRef(null);
 
-  const value = useSelector(getCustomTokenAmount);
-
   const [error, setError] = useState('');
-  const [showUseDefaultButton, setShowUseDefaultButton] = useState(
-    value !== String(dappProposedValue) && true,
-  );
+  const [showUseSiteSuggestionButton, setShowUseSiteSuggestionButton] =
+    useState(customSpendingCap !== String(dappProposedValue) && true);
   const inputLogicEmptyStateText = t('inputLogicEmptyState');
 
   const replaceCommaToDot = (inputValue) => {
@@ -102,7 +101,7 @@ export default function CustomSpendingCap({
   };
 
   const [customSpendingCapText, setCustomSpendingCapText] = useState(
-    getInputTextLogic(value).description,
+    getInputTextLogic(customSpendingCap).description,
   );
 
   const handleChange = async (valueInput) => {
@@ -139,37 +138,42 @@ export default function CustomSpendingCap({
         setError(spendingCapError);
       }
     }
-
+    setCustomSpendingCap(String(valueInput));
     dispatch(setCustomTokenAmount(String(valueInput)));
 
-    try {
-      const newData = getCustomTxParamsData(txParams.data, {
-        customPermissionAmount: valueInput,
-        decimals,
-      });
-      const { from, to, value: txValue } = txParams;
-      const estimatedGasLimit = await estimateGas({
-        from,
-        to,
-        value: txValue,
-        data: newData,
-      });
-      if (estimatedGasLimit) {
-        await updateTransaction({
-          gasLimit: hexToDecimal(addHexPrefix(estimatedGasLimit)),
+    if (String(valueInput) !== '') {
+      try {
+        const newData = getCustomTxParamsData(txParams.data, {
+          customPermissionAmount: valueInput,
+          decimals,
         });
+        const { from, to, value: txValue } = txParams;
+        const estimatedGasLimit = await estimateGas({
+          from,
+          to,
+          value: txValue,
+          data: newData,
+        });
+        if (estimatedGasLimit) {
+          await updateTransaction({
+            gasLimit: hexToDecimal(addHexPrefix(estimatedGasLimit)),
+          });
+        }
+      } catch (exp) {
+        console.error('Error in trying to update gas limit', exp);
       }
-    } catch (exp) {
-      console.error('Error in trying to update gas limit', exp);
     }
+
     setInputChangeInProgress(false);
   };
 
   useEffect(() => {
-    if (value !== String(dappProposedValue)) {
-      setShowUseDefaultButton(true);
+    if (customSpendingCap === String(dappProposedValue)) {
+      setShowUseSiteSuggestionButton(false);
+    } else {
+      setShowUseSiteSuggestionButton(true);
     }
-  }, [value, dappProposedValue]);
+  }, [customSpendingCap, dappProposedValue]);
 
   useEffect(() => {
     passTheErrorText(error);
@@ -185,7 +189,7 @@ export default function CustomSpendingCap({
   }, [inputRef.current]);
 
   const chooseTooltipContentText = decConversionGreaterThan(
-    value,
+    customSpendingCap,
     currentTokenBalance,
   )
     ? t('warningTooltipText', [
@@ -221,7 +225,7 @@ export default function CustomSpendingCap({
         >
           <label
             htmlFor={
-              decConversionGreaterThan(value, currentTokenBalance)
+              decConversionGreaterThan(customSpendingCap, currentTokenBalance)
                 ? 'custom-spending-cap-input-value'
                 : 'custom-spending-cap'
             }
@@ -231,18 +235,23 @@ export default function CustomSpendingCap({
               dataTestId="custom-spending-cap-input"
               wrappingLabelProps={{ as: 'div' }}
               id={
-                decConversionGreaterThan(value, currentTokenBalance)
+                decConversionGreaterThan(customSpendingCap, currentTokenBalance)
                   ? 'custom-spending-cap-input-value'
                   : 'custom-spending-cap'
               }
               TooltipCustomComponent={
                 <CustomSpendingCapTooltip
                   tooltipContentText={
-                    replaceCommaToDot(value) ? chooseTooltipContentText : ''
+                    replaceCommaToDot(customSpendingCap)
+                      ? chooseTooltipContentText
+                      : ''
                   }
                   tooltipIcon={
-                    replaceCommaToDot(value)
-                      ? decConversionGreaterThan(value, currentTokenBalance)
+                    replaceCommaToDot(customSpendingCap)
+                      ? decConversionGreaterThan(
+                          customSpendingCap,
+                          currentTokenBalance,
+                        )
                       : ''
                   }
                 />
@@ -251,18 +260,18 @@ export default function CustomSpendingCap({
               titleText={t('customSpendingCap')}
               placeholder={t('enterANumber')}
               error={error}
-              value={value}
+              value={customSpendingCap}
               titleDetail={
-                showUseDefaultButton && (
+                showUseSiteSuggestionButton && (
                   <ButtonLink
                     size={Size.auto}
                     onClick={(e) => {
                       e.preventDefault();
-                      setShowUseDefaultButton(false);
+                      setShowUseSiteSuggestionButton(false);
                       handleChange(dappProposedValue);
                     }}
                   >
-                    {t('useDefault')}
+                    {t('useSiteSuggestion')}
                   </ButtonLink>
                 )
               }
@@ -298,12 +307,19 @@ export default function CustomSpendingCap({
                 variant={TextVariant.bodySm}
                 as="h6"
                 paddingTop={2}
-                paddingBottom={2}
               >
-                {replaceCommaToDot(value)
+                {replaceCommaToDot(customSpendingCap)
                   ? customSpendingCapText
                   : inputLogicEmptyStateText}
               </Text>
+              <ButtonLink
+                size={Size.SM}
+                href={ZENDESK_URLS.TOKEN_ALLOWANCE_WITH_SPENDING_CAP}
+                target="_blank"
+                marginBottom={2}
+              >
+                {t('learnMoreUpperCase')}
+              </ButtonLink>
             </Box>
           </label>
         </Box>
@@ -345,4 +361,12 @@ CustomSpendingCap.propTypes = {
    * Updating input state to changing
    */
   setInputChangeInProgress: PropTypes.func.isRequired,
+  /**
+   * Custom token amount or The dapp suggested amount
+   */
+  customSpendingCap: PropTypes.string,
+  /**
+   * State method to update the custom token value
+   */
+  setCustomSpendingCap: PropTypes.func.isRequired,
 };
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
index 0e3edfa6b..0e492a43b 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.stories.js
@@ -23,6 +23,9 @@ export default {
     decimals: {
       control: 'text',
     },
+    customSpendingCap: {
+      control: { type: 'text' },
+    },
   },
   args: {
     tokenName: 'DAI',
@@ -30,6 +33,7 @@ export default {
     dappProposedValue: '7',
     siteOrigin: 'Uniswap.org',
     decimals: '4',
+    customSpendingCap: '7',
   },
 };
 
@@ -38,3 +42,13 @@ export const DefaultStory = (args) => {
 };
 
 DefaultStory.storyName = 'Default';
+
+export const CustomSpendingCapStory = (args) => {
+  return <CustomSpendingCap {...args} />;
+};
+CustomSpendingCapStory.storyName = 'CustomSpendingCapStory';
+
+CustomSpendingCapStory.args = {
+  ...DefaultStory.args,
+  customSpendingCap: '8',
+};
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.test.js b/ui/components/app/custom-spending-cap/custom-spending-cap.test.js
index 17f475691..41b338a7c 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.test.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.test.js
@@ -26,6 +26,8 @@ const props = {
   decimals: '4',
   passTheErrorText: () => undefined,
   setInputChangeInProgress: () => undefined,
+  customSpendingCap: '7',
+  setCustomSpendingCap: () => undefined,
 };
 
 describe('CustomSpendingCap', () => {
diff --git a/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js b/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
index 832e8a770..e48f3462b 100644
--- a/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
+++ b/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.js
@@ -2,11 +2,9 @@ import React, { useCallback, useContext, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
-import { Button } from '../../component-library';
-import Box from '../../ui/box';
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -15,6 +13,7 @@ import {
   MetaMetricsEventKeyType,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
+import { Button, Box } from '../../component-library';
 
 const radius = 14;
 const strokeWidth = 2;
@@ -131,7 +130,7 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
           </svg>
         </Box>
         <Box
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           alignItems={AlignItems.center}
           justifyContent={JustifyContent.center}
           className="hold-to-reveal-button__lock-icon-container"
@@ -197,10 +196,10 @@ export default function HoldToRevealButton({ buttonText, onLongPressed }) {
 
   return (
     <Button
-      onMouseDown={onMouseDown}
-      onMouseUp={onMouseUp}
+      onPointerDown={onMouseDown} // allows for touch and mouse events
+      onPointerUp={onMouseUp} // allows for touch and mouse events
       className="hold-to-reveal-button__button-hold"
-      textProps={{ display: DISPLAY.FLEX, alignItems: AlignItems.center }}
+      textProps={{ display: Display.Flex, alignItems: AlignItems.center }}
     >
       <Box className="hold-to-reveal-button__icon-container" marginRight={2}>
         {renderPreCompleteContent()}
diff --git a/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js b/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js
index 2fd23e8ef..2658b3cec 100644
--- a/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js
+++ b/ui/components/app/hold-to-reveal-button/hold-to-reveal-button.test.js
@@ -86,7 +86,7 @@ describe('HoldToRevealButton', () => {
 
     const button = getByText('Hold to reveal SRP');
 
-    fireEvent.mouseDown(button);
+    fireEvent.pointerDown(button);
 
     const circleLocked = getByLabelText('hold to reveal circle locked');
     fireEvent.transitionEnd(circleLocked);
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index d76f7298a..f8ae5650e 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -44,7 +44,6 @@ export const safeComponentList = {
   SnapDelineator,
   Copyable,
   Spinner,
-  hr: 'hr',
   SnapUIMarkdown,
   ///: END:ONLY_INCLUDE_IN
 };
diff --git a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js
index f4a913280..c435d85ce 100644
--- a/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js
+++ b/ui/components/app/modals/export-private-key-modal/export-private-key-modal.component.test.js
@@ -114,7 +114,7 @@ describe('Export Private Key Modal', () => {
     const holdButton = getByText('Hold to reveal Private Key');
     expect(holdButton).toBeInTheDocument();
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
 
     const circle = getByLabelText('hold to reveal circle locked');
     fireEvent.transitionEnd(circle);
diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js
index 52327246e..8a8ecc71a 100644
--- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js
+++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.test.js
@@ -67,7 +67,7 @@ describe('Hold to Reveal Modal', () => {
 
     expect(holdButton).toBeDefined();
 
-    fireEvent.mouseUp(holdButton);
+    fireEvent.pointerUp(holdButton);
 
     expect(holdButton).toBeDefined();
   });
@@ -84,7 +84,7 @@ describe('Hold to Reveal Modal', () => {
     const holdButton = getByText('Hold to reveal SRP');
     const circleLocked = queryByLabelText('hold to reveal circle locked');
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
     fireEvent.transitionEnd(circleLocked);
 
     const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@@ -92,7 +92,7 @@ describe('Hold to Reveal Modal', () => {
 
     await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+        'hold-to-reveal-button__icon-container',
       );
       expect(onLongPressStub).toHaveBeenCalled();
     });
@@ -164,7 +164,7 @@ describe('Hold to Reveal Modal', () => {
     const holdButton = getByText('Hold to reveal SRP');
     const circleLocked = queryByLabelText('hold to reveal circle locked');
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
     fireEvent.transitionEnd(circleLocked);
 
     const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@@ -172,7 +172,7 @@ describe('Hold to Reveal Modal', () => {
 
     await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+        'hold-to-reveal-button__icon-container',
       );
       expect(onLongPressStub).toHaveBeenCalled();
       expect(hideModalStub).not.toHaveBeenCalled();
diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
index 152b24ab7..6be92d2bd 100644
--- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
@@ -26,11 +26,11 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
     <div>
       <button
         aria-label="NFT Options"
-        class="box mm-button-icon mm-button-icon--size-lg nft-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
+        class="box mm-button-icon mm-button-icon--size-sm nft-options__button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent box--rounded-lg"
         data-testid="nft-options__button"
       >
         <span
-          class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+          class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
           style="mask-image: url('./images/icons/more-vertical.svg');"
         />
       </button>
@@ -46,7 +46,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
         class="box nft-details__nft-item box--flex-direction-row"
       >
         <button
-          class="box nft-item__container box--flex-direction-row"
+          class="mm-box nft-item__container"
           data-testid="nft-item"
         >
           <div
@@ -54,7 +54,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
           >
             <img
               alt="MUNK #1 1"
-              class="box nft-item__item nft-item__item-image box--display-block box--flex-direction-row box--justify-content-center"
+              class="mm-box nft-item__item nft-item__item-image mm-box--display-block mm-box--justify-content-center"
               data-testid="nft-image"
               src="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
             />
diff --git a/ui/components/app/nft-options/nft-options.js b/ui/components/app/nft-options/nft-options.js
index 1ff1c55f1..0343667d3 100644
--- a/ui/components/app/nft-options/nft-options.js
+++ b/ui/components/app/nft-options/nft-options.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../ui/menu';
-import { ButtonIcon, IconName } from '../../component-library';
+import { ButtonIcon, ButtonIconSize, IconName } from '../../component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 const NftOptions = ({ onRemove, onViewOnOpensea }) => {
@@ -19,6 +19,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
         data-testid="nft-options__button"
         onClick={() => setNftOptionsOpen(true)}
         color={Color.textDefault}
+        size={ButtonIconSize.Sm}
         ariaLabel={t('nftOptions')}
       />
 
diff --git a/ui/components/app/permission-cell/permission-cell-options.js b/ui/components/app/permission-cell/permission-cell-options.js
new file mode 100644
index 000000000..ec7dda4cd
--- /dev/null
+++ b/ui/components/app/permission-cell/permission-cell-options.js
@@ -0,0 +1,101 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import Box from '../../ui/box';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { IconName, ButtonIcon, Text } from '../../component-library';
+import { Menu, MenuItem } from '../../ui/menu';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import Popover from '../../ui/popover/popover.component';
+import { DynamicSnapPermissions } from '../../../../shared/constants/snaps/permissions';
+import { revokeDynamicSnapPermissions } from '../../../store/actions';
+
+export const PermissionCellOptions = ({
+  snapId,
+  permissionName,
+  description,
+}) => {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+  const ref = useRef(false);
+  const [showOptions, setShowOptions] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const isRevokable = DynamicSnapPermissions.includes(permissionName);
+
+  const handleOpen = () => {
+    setShowOptions(true);
+  };
+
+  const handleClose = () => {
+    setShowOptions(false);
+  };
+
+  const handleDetailsOpen = () => {
+    setShowOptions(false);
+    setShowDetails(true);
+  };
+
+  const handleDetailsClose = () => {
+    setShowOptions(false);
+    setShowDetails(false);
+  };
+
+  const handleRevokePermission = () => {
+    setShowOptions(false);
+    dispatch(revokeDynamicSnapPermissions(snapId, [permissionName]));
+  };
+
+  return (
+    <Box ref={ref}>
+      <ButtonIcon
+        iconName={IconName.MoreVertical}
+        ariaLabel={t('options')}
+        onClick={handleOpen}
+      />
+      {showOptions && (
+        <Menu anchorElement={ref.current} onHide={handleClose}>
+          <MenuItem onClick={handleDetailsOpen}>
+            <Text
+              variant={TextVariant.bodySm}
+              style={{
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {t('details')}
+            </Text>
+          </MenuItem>
+          {isRevokable && (
+            <MenuItem onClick={handleRevokePermission}>
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.errorDefault}
+                style={{
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {t('revokePermission')}
+              </Text>
+            </MenuItem>
+          )}
+        </Menu>
+      )}
+      {showDetails && (
+        <Popover title={t('details')} onClose={handleDetailsClose}>
+          <Box marginLeft={4} marginRight={4} marginBottom={4}>
+            <Text>{description}</Text>
+          </Box>
+        </Popover>
+      )}
+    </Box>
+  );
+};
+
+PermissionCellOptions.propTypes = {
+  snapId: PropTypes.string.isRequired,
+  permissionName: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};
diff --git a/ui/components/app/permission-cell/permission-cell.js b/ui/components/app/permission-cell/permission-cell.js
index e325e3000..c5fca8fa8 100644
--- a/ui/components/app/permission-cell/permission-cell.js
+++ b/ui/components/app/permission-cell/permission-cell.js
@@ -21,14 +21,18 @@ import {
 import { formatDate } from '../../../helpers/utils/util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip';
+import { PermissionCellOptions } from './permission-cell-options';
 
 const PermissionCell = ({
+  snapId,
+  permissionName,
   title,
   description,
   weight,
   avatarIcon,
   dateApproved,
   revoked,
+  showOptions,
 }) => {
   const t = useI18nContext();
 
@@ -107,15 +111,25 @@ const PermissionCell = ({
         </Text>
       </Box>
       <Box>
-        <Tooltip html={<div>{description}</div>} position="bottom">
-          <Icon color={infoIconColor} name={infoIcon} size={IconSize.Sm} />
-        </Tooltip>
+        {showOptions && snapId ? (
+          <PermissionCellOptions
+            snapId={snapId}
+            permissionName={permissionName}
+            description={description}
+          />
+        ) : (
+          <Tooltip html={<div>{description}</div>} position="bottom">
+            <Icon color={infoIconColor} name={infoIcon} size={IconSize.Sm} />
+          </Tooltip>
+        )}
       </Box>
     </Box>
   );
 };
 
 PermissionCell.propTypes = {
+  snapId: PropTypes.string,
+  permissionName: PropTypes.string.isRequired,
   title: PropTypes.oneOfType([
     PropTypes.string.isRequired,
     PropTypes.object.isRequired,
@@ -125,6 +139,7 @@ PermissionCell.propTypes = {
   avatarIcon: PropTypes.any.isRequired,
   dateApproved: PropTypes.number,
   revoked: PropTypes.bool,
+  showOptions: PropTypes.bool,
 };
 
 export default PermissionCell;
diff --git a/ui/components/app/permission-cell/permission-cell.test.js b/ui/components/app/permission-cell/permission-cell.test.js
index f4567827f..1d7dd2ab5 100644
--- a/ui/components/app/permission-cell/permission-cell.test.js
+++ b/ui/components/app/permission-cell/permission-cell.test.js
@@ -19,6 +19,7 @@ describe('Permission Cell', () => {
   it('renders approved permission cell', () => {
     renderWithProvider(
       <PermissionCell
+        permissionName={mockPermissionData.permissionName}
         title={mockPermissionData.label}
         description={mockPermissionData.description}
         weight={mockPermissionData.weight}
@@ -36,6 +37,7 @@ describe('Permission Cell', () => {
   it('renders revoked permission cell', () => {
     renderWithProvider(
       <PermissionCell
+        permissionName={mockPermissionData.permissionName}
         title={mockPermissionData.label}
         description={mockPermissionData.description}
         weight={mockPermissionData.weight}
@@ -54,6 +56,7 @@ describe('Permission Cell', () => {
   it('renders requested permission cell', () => {
     renderWithProvider(
       <PermissionCell
+        permissionName={mockPermissionData.permissionName}
         title={mockPermissionData.label}
         description={mockPermissionData.description}
         weight={mockPermissionData.weight}
diff --git a/ui/components/app/permission-page-container/index.scss b/ui/components/app/permission-page-container/index.scss
index b6314e576..c5bf2c272 100644
--- a/ui/components/app/permission-page-container/index.scss
+++ b/ui/components/app/permission-page-container/index.scss
@@ -10,16 +10,24 @@
     justify-content: space-between;
   }
 
-  @include screen-sm-min {
-    width: 426px;
+  &__footers {
+    width: 100%;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
 
-    &__footers {
-      display: flex;
-      flex-direction: column-reverse;
-      flex: 1;
-      padding-bottom: 20px;
-      justify-content: space-between;
+    .page-container__footer {
+      align-items: center;
+      margin-top: 12px;
+
+      @include screen-sm-min {
+        border-top: none;
+      }
+
+      footer {
+        width: 100%;
+      }
     }
   }
 
@@ -38,6 +46,7 @@
     color: var(--color-text-default);
     padding-left: 24px;
     padding-right: 24px;
+    margin-top: 2px;
 
     a,
     a:hover {
@@ -90,19 +99,6 @@
     margin-top: 38px;
   }
 
-  .page-container__footer {
-    align-items: center;
-    margin-top: 12px;
-
-    @include screen-sm-min {
-      border-top: none;
-    }
-
-    footer {
-      width: 100%;
-    }
-  }
-
   @include screen-sm-max {
     &__title {
       position: initial;
diff --git a/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js b/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
index accab2e15..96a39ec0f 100644
--- a/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
+++ b/ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js
@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import { SubjectType } from '@metamask/permission-controller';
+///: END:ONLY_INCLUDE_IN
 import PermissionsConnectHeader from '../../permissions-connect-header';
 import Tooltip from '../../../ui/tooltip';
 import PermissionsConnectPermissionList from '../../permissions-connect-permission-list';
@@ -96,12 +99,28 @@ export default class PermissionPageContainerContent extends PureComponent {
     return t('connectTo', [selectedIdentities[0]?.addressLabel]);
   }
 
-  render() {
+  getHeaderText() {
     const { subjectMetadata } = this.props;
     const { t } = this.context;
 
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+    if (subjectMetadata.subjectType === SubjectType.Snap) {
+      return t('allowThisSnapTo');
+    }
+    ///: END:ONLY_INCLUDE_IN
+
+    return subjectMetadata.extensionId
+      ? t('allowExternalExtensionTo', [subjectMetadata.extensionId])
+      : t('allowThisSiteTo');
+  }
+
+  render() {
+    const { subjectMetadata } = this.props;
+
     const title = this.getTitle();
 
+    const headerText = this.getHeaderText();
+
     return (
       <div className="permission-approval-container__content">
         <div className="permission-approval-container__content-container">
@@ -109,12 +128,9 @@ export default class PermissionPageContainerContent extends PureComponent {
             iconUrl={subjectMetadata.iconUrl}
             iconName={subjectMetadata.name}
             headerTitle={title}
-            headerText={
-              subjectMetadata.extensionId
-                ? t('allowExternalExtensionTo', [subjectMetadata.extensionId])
-                : t('allowThisSiteTo')
-            }
+            headerText={headerText}
             siteOrigin={subjectMetadata.origin}
+            subjectType={subjectMetadata.subjectType}
           />
           <section className="permission-approval-container__permissions-container">
             {this.renderRequestedPermissions()}
diff --git a/ui/components/app/permission-page-container/permission-page-container.component.js b/ui/components/app/permission-page-container/permission-page-container.component.js
index a352d5b36..1f817edf8 100644
--- a/ui/components/app/permission-page-container/permission-page-container.component.js
+++ b/ui/components/app/permission-page-container/permission-page-container.component.js
@@ -7,6 +7,7 @@ import {
   WALLET_SNAP_PERMISSION_KEY,
 } from '@metamask/rpc-methods';
 ///: END:ONLY_INCLUDE_IN
+import { SubjectType } from '@metamask/permission-controller';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { PageContainerFooter } from '../../ui/page-container';
 import PermissionsConnectFooter from '../permissions-connect-footer';
@@ -189,7 +190,7 @@ export default class PermissionPageContainer extends Component {
     ///: END:ONLY_INCLUDE_IN
 
     return (
-      <div className="page-container permission-approval-container">
+      <>
         {
           ///: BEGIN:ONLY_INCLUDE_IN(snaps)
           <>
@@ -210,7 +211,9 @@ export default class PermissionPageContainer extends Component {
           allIdentitiesSelected={allIdentitiesSelected}
         />
         <div className="permission-approval-container__footers">
-          <PermissionsConnectFooter />
+          {targetSubjectMetadata?.subjectType !== SubjectType.Snap && (
+            <PermissionsConnectFooter />
+          )}
           <PageContainerFooter
             cancelButtonType="default"
             onCancel={() => this.onCancel()}
@@ -220,7 +223,7 @@ export default class PermissionPageContainer extends Component {
             buttonSizeLarge={false}
           />
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
index 5f3fc5366..725db0fc4 100644
--- a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classnames from 'classnames';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import { SubjectType } from '@metamask/subject-metadata-controller';
+///: END:ONLY_INCLUDE_IN
 import SiteOrigin from '../../ui/site-origin';
 import Box from '../../ui/box';
 import {
@@ -19,6 +22,7 @@ export default class PermissionsConnectHeader extends Component {
     headerText: PropTypes.string,
     leftIcon: PropTypes.node,
     rightIcon: PropTypes.node,
+    subjectType: PropTypes.string,
   };
 
   static defaultProps = {
@@ -29,7 +33,23 @@ export default class PermissionsConnectHeader extends Component {
   };
 
   renderHeaderIcon() {
-    const { iconUrl, iconName, siteOrigin, leftIcon, rightIcon } = this.props;
+    const {
+      iconUrl,
+      iconName,
+      siteOrigin,
+      leftIcon,
+      rightIcon,
+      ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+      subjectType,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.props;
+
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+
+    if (subjectType === SubjectType.Snap) {
+      return null;
+    }
+    ///: END:ONLY_INCLUDE_IN
 
     return (
       <div className="permissions-connect-header__icon">
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index 2fea925af..6dc18e4a4 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -64,7 +64,10 @@ export default class SignatureRequestOriginal extends Component {
     resolvePendingApproval: PropTypes.func.isRequired,
     completedTx: PropTypes.func.isRequired,
     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    // Used to show a warning if the signing account is not the selected account
+    // Largely relevant for contract wallet custodians
     selectedAccount: PropTypes.object,
+    mmiOnSignCallback: PropTypes.func,
     ///: END:ONLY_INCLUDE_IN
   };
 
@@ -262,7 +265,7 @@ export default class SignatureRequestOriginal extends Component {
       clearConfirmTransaction,
       history,
       mostRecentOverviewPage,
-      txData: { type, id },
+      txData,
       hardwareWalletRequiresConnection,
       rejectPendingApproval,
       resolvePendingApproval,
@@ -275,22 +278,34 @@ export default class SignatureRequestOriginal extends Component {
         submitText={t('sign')}
         onCancel={async () => {
           await rejectPendingApproval(
-            id,
+            txData.id,
             serializeError(ethErrors.provider.userRejectedRequest()),
           );
           clearConfirmTransaction();
           history.push(mostRecentOverviewPage);
         }}
         onSubmit={async () => {
-          if (type === MESSAGE_TYPE.ETH_SIGN) {
+          if (txData.type === MESSAGE_TYPE.ETH_SIGN) {
             this.setState({ showSignatureRequestWarning: true });
           } else {
-            await resolvePendingApproval(id);
+            ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+            if (this.props.mmiOnSignCallback) {
+              await this.props.mmiOnSignCallback(txData);
+              return;
+            }
+            ///: END:ONLY_INCLUDE_IN
+
+            await resolvePendingApproval(txData.id);
             clearConfirmTransaction();
             history.push(mostRecentOverviewPage);
           }
         }}
-        disabled={hardwareWalletRequiresConnection}
+        disabled={
+          ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+          Boolean(txData?.custodyId) ||
+          ///: END:ONLY_INCLUDE_IN
+          hardwareWalletRequiresConnection
+        }
       />
     );
   };
diff --git a/ui/components/app/signature-request-original/signature-request-original.container.js b/ui/components/app/signature-request-original/signature-request-original.container.js
index 47bc1ea13..242ace8f8 100644
--- a/ui/components/app/signature-request-original/signature-request-original.container.js
+++ b/ui/components/app/signature-request-original/signature-request-original.container.js
@@ -9,6 +9,17 @@ import {
   rejectAllMessages,
   completedTx,
 } from '../../../store/actions';
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+// eslint-disable-next-line import/order
+import { showCustodianDeepLink } from '@metamask-institutional/extension';
+import {
+  mmiActionsFactory,
+  setPersonalMessageInProgress,
+} from '../../../store/institutional/institution-background';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { checkForUnapprovedMessages } from '../../../store/institutional/institution-actions';
+import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../../shared/constants/app';
+///: END:ONLY_INCLUDE_IN
 import {
   accountsWithSendEtherInfoSelector,
   getSubjectMetadata,
@@ -16,6 +27,8 @@ import {
   unconfirmedMessagesHashSelector,
   getTotalUnapprovedMessagesCount,
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  unapprovedPersonalMsgsSelector,
+  getAccountType,
   getSelectedAccount,
   ///: END:ONLY_INCLUDE_IN
 } from '../../../selectors';
@@ -30,6 +43,10 @@ function mapStateToProps(state, ownProps) {
     msgParams: { from },
   } = ownProps.txData;
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const envType = getEnvironmentType();
+  ///: END:ONLY_INCLUDE_IN
+
   const hardwareWalletRequiresConnection =
     doesAddressRequireLedgerHidConnection(state, from);
   const isLedgerWallet = isAddressLedger(state, from);
@@ -48,12 +65,63 @@ function mapStateToProps(state, ownProps) {
     messagesList,
     messagesCount,
     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType: getAccountType(state),
+    isNotification: envType === ENVIRONMENT_TYPE_NOTIFICATION,
     selectedAccount: getSelectedAccount(state),
+    unapprovedPersonalMessages: unapprovedPersonalMsgsSelector(state),
     ///: END:ONLY_INCLUDE_IN
   };
 }
 
-function mapDispatchToProps(dispatch) {
+let mapDispatchToProps = null;
+
+///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+function mmiMapDispatchToProps(dispatch) {
+  const mmiActions = mmiActionsFactory();
+  return {
+    clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
+    setMsgInProgress: (msgId) => dispatch(setPersonalMessageInProgress(msgId)),
+    showCustodianDeepLink: ({
+      custodyId,
+      fromAddress,
+      closeNotification,
+      onDeepLinkFetched,
+      onDeepLinkShown,
+    }) =>
+      showCustodianDeepLink({
+        dispatch,
+        mmiActions,
+        txId: undefined,
+        fromAddress,
+        custodyId,
+        isSignature: true,
+        closeNotification,
+        onDeepLinkFetched,
+        onDeepLinkShown,
+      }),
+    showTransactionsFailedModal: ({
+      errorMessage,
+      closeNotification,
+      operationFailed,
+    }) =>
+      dispatch(
+        showModal({
+          name: 'TRANSACTION_FAILED',
+          errorMessage,
+          closeNotification,
+          operationFailed,
+        }),
+      ),
+    setWaitForConfirmDeepLinkDialog: (wait) =>
+      dispatch(mmiActions.setWaitForConfirmDeepLinkDialog(wait)),
+    goHome: () => dispatch(goHome()),
+  };
+}
+
+mapDispatchToProps = mmiMapDispatchToProps;
+///: END:ONLY_INCLUDE_IN
+
+mapDispatchToProps = function (dispatch) {
   return {
     goHome: () => dispatch(goHome()),
     clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
@@ -80,12 +148,21 @@ function mapDispatchToProps(dispatch) {
       dispatch(rejectAllMessages(messagesList));
     },
   };
-}
+};
 
 function mergeProps(stateProps, dispatchProps, ownProps) {
   const { txData } = ownProps;
 
-  const { allAccounts, messagesList, ...otherStateProps } = stateProps;
+  const {
+    allAccounts,
+    messagesList,
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    accountType,
+    isNotification,
+    unapprovedPersonalMessages,
+    ///: END:ONLY_INCLUDE_IN
+    ...otherStateProps
+  } = stateProps;
 
   const {
     msgParams: { from },
@@ -95,6 +172,41 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
 
   const { cancelAllApprovals: dispatchCancelAllApprovals } = dispatchProps;
 
+  ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+  const mmiOnSignCallback = async (_msgData) => {
+    if (accountType === 'custody') {
+      try {
+        let msgData = _msgData;
+        let id = _msgData.custodyId;
+        if (!_msgData.custodyId) {
+          msgData = checkForUnapprovedMessages(
+            _msgData,
+            unapprovedPersonalMessages,
+          );
+          id = msgData.custodyId;
+        }
+        dispatchProps.showCustodianDeepLink({
+          custodyId: id,
+          fromAddress: fromAccount.address,
+          closeNotification: isNotification,
+          onDeepLinkFetched: () => undefined,
+          onDeepLinkShown: () => undefined,
+        });
+        await dispatchProps.setMsgInProgress(msgData.metamaskId);
+        await dispatchProps.setWaitForConfirmDeepLinkDialog(true);
+        await goHome();
+      } catch (err) {
+        await dispatchProps.setWaitForConfirmDeepLinkDialog(true);
+        await dispatchProps.showTransactionsFailedModal({
+          errorMessage: err.message,
+          closeNotification: true,
+          operationFailed: true,
+        });
+      }
+    }
+  };
+  ///: END:ONLY_INCLUDE_IN
+
   return {
     ...ownProps,
     ...otherStateProps,
@@ -103,6 +215,9 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
     txData,
     cancelAllApprovals: () =>
       dispatchCancelAllApprovals(valuesFor(messagesList)),
+    ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+    mmiOnSignCallback,
+    ///: END:ONLY_INCLUDE_IN
   };
 }
 
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index 0e4d2e4eb..97062ed60 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -223,14 +223,16 @@ export default class SignatureRequest extends PureComponent {
           .toString();
 
     const onSign = async () => {
-      await resolvePendingApproval(id);
-      completedTx(id);
       ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
       if (this.props.mmiOnSignCallback) {
         await this.props.mmiOnSignCallback(txData);
+        return;
       }
       ///: END:ONLY_INCLUDE_IN
 
+      await resolvePendingApproval(id);
+      completedTx(id);
+
       trackEvent({
         category: MetaMetricsEventCategory.Transactions,
         event: 'Confirm',
diff --git a/ui/components/app/signature-request/signature-request.container.js b/ui/components/app/signature-request/signature-request.container.js
index 4ac75ca65..f6f3e8fea 100644
--- a/ui/components/app/signature-request/signature-request.container.js
+++ b/ui/components/app/signature-request/signature-request.container.js
@@ -30,7 +30,7 @@ import {
   setTypedMessageInProgress,
 } from '../../../store/institutional/institution-background';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
-import { checkForUnapprovedTypedMessages } from '../../../store/institutional/institution-actions';
+import { checkForUnapprovedMessages } from '../../../store/institutional/institution-actions';
 ///: END:ONLY_INCLUDE_IN
 import {
   ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
@@ -214,7 +214,7 @@ function mergeProps(stateProps, dispatchProps, ownProps) {
         let msgData = _msgData;
         let id = _msgData.custodyId;
         if (!_msgData.custodyId) {
-          msgData = checkForUnapprovedTypedMessages(
+          msgData = checkForUnapprovedMessages(
             _msgData,
             unapprovedTypedMessages,
           );
diff --git a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
index 74bf2adab..4f99c2162 100644
--- a/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
+++ b/ui/components/app/snaps/snap-authorship-header/snap-authorship-header.js
@@ -24,7 +24,11 @@ import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 import SnapVersion from '../snap-version/snap-version';
 
-const SnapAuthorshipHeader = ({ snapId, className }) => {
+const SnapAuthorshipHeader = ({
+  snapId,
+  className,
+  boxShadow = 'var(--shadow-size-lg) var(--color-shadow-default)',
+}) => {
   // We're using optional chaining with snapId, because with the current implementation
   // of snap update in the snap controller, we do not have reference to snapId when an
   // update request is rejected because the reference comes from the request itself and not subject metadata
@@ -51,7 +55,7 @@ const SnapAuthorshipHeader = ({ snapId, className }) => {
       display={DISPLAY.FLEX}
       padding={4}
       style={{
-        boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
+        boxShadow,
       }}
     >
       <Box>
@@ -91,6 +95,7 @@ SnapAuthorshipHeader.propTypes = {
    * The className of the SnapAuthorship
    */
   className: PropTypes.string,
+  boxShadow: PropTypes.string,
 };
 
 export default SnapAuthorshipHeader;
diff --git a/ui/components/app/snaps/snap-permissions-list/snap-permissions-list.js b/ui/components/app/snaps/snap-permissions-list/snap-permissions-list.js
index 6dda11d04..27ab6e3d2 100644
--- a/ui/components/app/snaps/snap-permissions-list/snap-permissions-list.js
+++ b/ui/components/app/snaps/snap-permissions-list/snap-permissions-list.js
@@ -6,8 +6,10 @@ import PermissionCell from '../../permission-cell';
 import Box from '../../../ui/box';
 
 export default function SnapPermissionsList({
+  snapId,
   permissions,
   targetSubjectMetadata,
+  showOptions,
 }) {
   const t = useI18nContext();
 
@@ -17,12 +19,15 @@ export default function SnapPermissionsList({
         (permission, index) => {
           return (
             <PermissionCell
+              snapId={snapId}
+              permissionName={permission.permissionName}
               title={permission.label}
               description={permission.description}
               weight={permission.weight}
               avatarIcon={permission.leftIcon}
               dateApproved={permission?.permissionValue?.date}
               key={`${permission.permissionName}-${index}`}
+              showOptions={showOptions}
             />
           );
         },
@@ -32,6 +37,8 @@ export default function SnapPermissionsList({
 }
 
 SnapPermissionsList.propTypes = {
+  snapId: PropTypes.string.isRequired,
   permissions: PropTypes.object.isRequired,
   targetSubjectMetadata: PropTypes.object.isRequired,
+  showOptions: PropTypes.bool,
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index 31c5110d8..5f7f97902 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -9,6 +9,7 @@
 
   &__divider {
     width: 100%;
+    height: 1px;
   }
 
   &__panel {
diff --git a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
index d5103e58e..37d83c2c9 100644
--- a/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js
@@ -10,6 +10,7 @@ import {
   OverflowWrap,
   FontWeight,
   TextVariant,
+  BorderColor,
 } from '../../../../helpers/constants/design-system';
 import { SnapDelineator } from '../snap-delineator';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -53,9 +54,12 @@ export const UI_MAPPING = {
     },
   }),
   divider: () => ({
-    element: 'hr',
+    element: 'Box',
     props: {
       className: 'snap-ui-renderer__divider',
+      backgroundColor: BorderColor.borderDefault,
+      marginTop: 2,
+      marginBottom: 2,
     },
   }),
   copyable: (props) => ({
diff --git a/ui/components/app/snaps/snap-version/snap-version.js b/ui/components/app/snaps/snap-version/snap-version.js
index a04e9449f..f70653540 100644
--- a/ui/components/app/snaps/snap-version/snap-version.js
+++ b/ui/components/app/snaps/snap-version/snap-version.js
@@ -18,10 +18,8 @@ import {
   Text,
 } from '../../../component-library';
 import Preloader from '../../../ui/icon/preloader/preloader-icon.component';
-import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 const SnapVersion = ({ version, url }) => {
-  const t = useI18nContext();
   return (
     <Button
       variant={BUTTON_VARIANT.LINK}
@@ -42,7 +40,7 @@ const SnapVersion = ({ version, url }) => {
       >
         {version ? (
           <Text color={Color.textAlternative} variant={TextVariant.bodyMd}>
-            {t('shortVersion', [version])}
+            {version}
           </Text>
         ) : (
           <Preloader size={18} />
diff --git a/ui/components/app/snaps/snap-version/snap-version.test.js b/ui/components/app/snaps/snap-version/snap-version.test.js
index 447a95931..d1c518933 100644
--- a/ui/components/app/snaps/snap-version/snap-version.test.js
+++ b/ui/components/app/snaps/snap-version/snap-version.test.js
@@ -12,7 +12,7 @@ describe('SnapVersion', () => {
     const { getByText, container } = renderWithLocalization(
       <SnapVersion {...args} />,
     );
-    expect(getByText(`v${args.version}`)).toBeDefined();
+    expect(getByText(args.version)).toBeDefined();
     expect(container.firstChild).toHaveAttribute('href', args.url);
   });
 
diff --git a/ui/components/app/snaps/update-snap-permission-list/update-snap-permission-list.js b/ui/components/app/snaps/update-snap-permission-list/update-snap-permission-list.js
index d0f47eaa1..216591489 100644
--- a/ui/components/app/snaps/update-snap-permission-list/update-snap-permission-list.js
+++ b/ui/components/app/snaps/update-snap-permission-list/update-snap-permission-list.js
@@ -18,6 +18,7 @@ export default function UpdateSnapPermissionList({
       {getWeightedPermissions(t, newPermissions, targetSubjectMetadata).map(
         (permission, index) => (
           <PermissionCell
+            permissionName={permission.permissionName}
             title={permission.label}
             description={permission.description}
             weight={permission.weight}
@@ -30,6 +31,7 @@ export default function UpdateSnapPermissionList({
       {getWeightedPermissions(t, revokedPermissions, targetSubjectMetadata).map(
         (permission, index) => (
           <PermissionCell
+            permissionName={permission.permissionName}
             title={permission.label}
             description={permission.description}
             weight={permission.weight}
@@ -46,6 +48,7 @@ export default function UpdateSnapPermissionList({
         targetSubjectMetadata,
       ).map((permission, index) => (
         <PermissionCell
+          permissionName={permission.permissionName}
           title={permission.label}
           description={permission.description}
           weight={permission.weight}
diff --git a/ui/components/component-library/modal-content/modal-content.tsx b/ui/components/component-library/modal-content/modal-content.tsx
index 7fff9e169..4b5b771bd 100644
--- a/ui/components/component-library/modal-content/modal-content.tsx
+++ b/ui/components/component-library/modal-content/modal-content.tsx
@@ -44,6 +44,17 @@ export const ModalContent = forwardRef(
     };
 
     const handleClickOutside = (event: MouseEvent) => {
+      // Popover should be launched from within Modal but
+      // the Popover containing element is a sibling to modal,
+      // so this is required to ensure `onClose` isn't triggered
+      // when clicking on a popover item
+      if (
+        isClosedOnOutsideClick &&
+        (event.target as HTMLElement).closest('.mm-popover')
+      ) {
+        return;
+      }
+
       if (
         isClosedOnOutsideClick &&
         modalDialogRef?.current &&
diff --git a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
index 2e50c52cd..55214eea8 100644
--- a/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
+++ b/ui/components/institutional/note-to-trader/__snapshots__/note-to-trader.test.js.snap
@@ -6,7 +6,7 @@ exports[`NoteToTrader should render the Note to trader component 1`] = `
     class="box confirm-page-container-content__data box--flex-direction-row"
   >
     <div
-      class="box box--display-flex box--flex-direction-row"
+      class="box box--padding-4 box--display-flex box--flex-direction-column"
     >
       <div
         class="box note-header box--display-flex box--flex-direction-row box--justify-content-space-between"
diff --git a/ui/components/institutional/note-to-trader/note-to-trader.js b/ui/components/institutional/note-to-trader/note-to-trader.js
index 459ef49de..d4aa601c0 100644
--- a/ui/components/institutional/note-to-trader/note-to-trader.js
+++ b/ui/components/institutional/note-to-trader/note-to-trader.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
 import { Label, Text } from '../../component-library';
@@ -13,10 +13,14 @@ const NoteToTrader = (props) => {
 
   return (
     <Box className="confirm-page-container-content__data">
-      <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+      <Box
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
+        padding={4}
+      >
         <Box
           className="note-header"
-          display={DISPLAY.FLEX}
+          display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
         >
           <Label htmlFor="transaction-note">{labelText}</Label>
@@ -25,8 +29,8 @@ const NoteToTrader = (props) => {
           </Text>
         </Box>
         <Box
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
           className="note-field"
         >
           <textarea
diff --git a/ui/components/multichain/account-details/account-details-authenticate.js b/ui/components/multichain/account-details/account-details-authenticate.js
index 6094f6f5a..ba0b1236b 100644
--- a/ui/components/multichain/account-details/account-details-authenticate.js
+++ b/ui/components/multichain/account-details/account-details-authenticate.js
@@ -13,8 +13,8 @@ import {
   ButtonSecondary,
   FormTextField,
   Text,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { exportAccount, hideWarning } from '../../../store/actions';
 
diff --git a/ui/components/multichain/account-details/account-details-display.js b/ui/components/multichain/account-details/account-details-display.js
index dfceec94d..7e70bfaae 100644
--- a/ui/components/multichain/account-details/account-details-display.js
+++ b/ui/components/multichain/account-details/account-details-display.js
@@ -15,6 +15,7 @@ import { isAbleToExportAccount } from '../../../helpers/utils/util';
 import {
   BUTTON_SECONDARY_SIZES,
   ButtonSecondary,
+  Box,
 } from '../../component-library';
 import {
   AlignItems,
@@ -29,7 +30,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Box from '../../ui/box/box';
 
 export const AccountDetailsDisplay = ({
   accounts,
diff --git a/ui/components/multichain/account-details/account-details-key.js b/ui/components/multichain/account-details/account-details-key.js
index 9eb4ba28c..50e3517b1 100644
--- a/ui/components/multichain/account-details/account-details-key.js
+++ b/ui/components/multichain/account-details/account-details-key.js
@@ -6,6 +6,7 @@ import {
   ButtonPrimary,
   IconName,
   Text,
+  Box,
 } from '../../component-library';
 import {
   AlignItems,
@@ -17,7 +18,6 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Box from '../../ui/box/box';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 
 export const AccountDetailsKey = ({ accountName, onClose, privateKey }) => {
diff --git a/ui/components/multichain/account-details/account-details.js b/ui/components/multichain/account-details/account-details.js
index 8ba53230f..2921b0db0 100644
--- a/ui/components/multichain/account-details/account-details.js
+++ b/ui/components/multichain/account-details/account-details.js
@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import Popover from '../../ui/popover/popover.component';
 import {
   setAccountDetailsAddress,
   clearAccountDetails,
@@ -11,19 +10,18 @@ import {
   AvatarAccount,
   AvatarAccountSize,
   AvatarAccountVariant,
-  ButtonIcon,
-  IconName,
-  PopoverHeader,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
   Text,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { getMetaMaskAccountsOrdered } from '../../../selectors';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
-  JustifyContent,
   TextVariant,
-  Size,
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
@@ -61,85 +59,68 @@ export const AccountDetails = ({ address }) => {
       }
       address={address}
       size={AvatarAccountSize.Lg}
+      style={{ margin: '0 auto' }}
     />
   );
 
   return (
-    <Popover
-      headerProps={{
-        paddingBottom: 1,
-      }}
-      contentProps={{
-        paddingLeft: 4,
-        paddingRight: 4,
-        paddingBottom: 4,
-      }}
-      title={
-        attemptingExport ? (
-          <PopoverHeader
-            startAccessory={
-              <ButtonIcon
-                onClick={() => {
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader
+          onClose={onClose}
+          onBack={
+            attemptingExport
+              ? () => {
                   dispatch(hideWarning());
                   setAttemptingExport(false);
-                }}
-                iconName={IconName.ArrowLeft}
-                size={Size.SM}
-              />
-            }
-          >
-            {t('showPrivateKey')}
-          </PopoverHeader>
-        ) : (
-          <PopoverHeader
-            childrenWrapperProps={{
-              display: Display.Text,
-              justifyContent: JustifyContent.center,
-            }}
-          >
-            <Box paddingLeft={6}>{avatar}</Box>
-          </PopoverHeader>
-        )
-      }
-      onClose={onClose}
-    >
-      {attemptingExport ? (
-        <>
-          <Box
-            display={Display.Flex}
-            alignItems={AlignItems.center}
-            flexDirection={FlexDirection.Column}
-          >
-            {avatar}
-            <Text
-              marginTop={2}
-              marginBottom={2}
-              variant={TextVariant.bodyLgMedium}
-              style={{ wordBreak: 'break-word' }}
+                }
+              : null
+          }
+        >
+          {attemptingExport ? t('showPrivateKey') : avatar}
+        </ModalHeader>
+        {attemptingExport ? (
+          <>
+            <Box
+              display={Display.Flex}
+              alignItems={AlignItems.center}
+              flexDirection={FlexDirection.Column}
             >
-              {name}
-            </Text>
-            <AddressCopyButton address={address} shorten />
-          </Box>
-          {privateKey ? (
-            <AccountDetailsKey
-              accountName={name}
-              onClose={onClose}
-              privateKey={privateKey}
-            />
-          ) : (
-            <AccountDetailsAuthenticate address={address} onCancel={onClose} />
-          )}
-        </>
-      ) : (
-        <AccountDetailsDisplay
-          accounts={accounts}
-          accountName={name}
-          address={address}
-          onExportClick={() => setAttemptingExport(true)}
-        />
-      )}
-    </Popover>
+              {avatar}
+              <Text
+                marginTop={2}
+                marginBottom={2}
+                variant={TextVariant.bodyLgMedium}
+                style={{ wordBreak: 'break-word' }}
+              >
+                {name}
+              </Text>
+              <AddressCopyButton address={address} shorten />
+            </Box>
+            {privateKey ? (
+              <AccountDetailsKey
+                accountName={name}
+                onClose={onClose}
+                privateKey={privateKey}
+              />
+            ) : (
+              <AccountDetailsAuthenticate
+                address={address}
+                onCancel={onClose}
+              />
+            )}
+          </>
+        ) : (
+          <AccountDetailsDisplay
+            accounts={accounts}
+            accountName={name}
+            address={address}
+            onExportClick={() => setAttemptingExport(true)}
+          />
+        )}
+      </ModalContent>
+    </Modal>
   );
 };
 
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index 26cb1baf0..81b15e191 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -1,4 +1,4 @@
-import React, { useState, useContext, useRef, useEffect } from 'react';
+import React, { useState, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import Fuse from 'fuse.js';
@@ -9,6 +9,10 @@ import {
   TextFieldSearch,
   Text,
   Box,
+  Modal,
+  ModalContent,
+  ModalOverlay,
+  ModalHeader,
 } from '../../component-library';
 import { AccountListItem, CreateAccount, ImportAccount } from '..';
 import {
@@ -18,7 +22,6 @@ import {
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import Popover from '../../ui/popover';
 import {
   getSelectedAccount,
   getMetaMaskAccountsOrdered,
@@ -52,7 +55,6 @@ export const AccountListMenu = ({ onClose }) => {
   const currentTabOrigin = useSelector(getOriginOfCurrentTab);
   const history = useHistory();
   const dispatch = useDispatch();
-  const inputRef = useRef();
 
   const [searchQuery, setSearchQuery] = useState('');
   const [actionMode, setActionMode] = useState('');
@@ -71,13 +73,6 @@ export const AccountListMenu = ({ onClose }) => {
     searchResults = fuse.search(searchQuery);
   }
 
-  // Focus on the search box when the popover is opened
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.rootNode.querySelector('input[type=search]')?.focus();
-    }
-  }, [inputRef]);
-
   let title = t('selectAnAccount');
   if (actionMode === 'add') {
     title = t('addAccount');
@@ -86,225 +81,244 @@ export const AccountListMenu = ({ onClose }) => {
   }
 
   return (
-    <Popover
-      title={title}
-      ref={inputRef}
-      centerTitle
-      onClose={onClose}
-      onBack={actionMode === '' ? null : () => setActionMode('')}
-      className="multichain-account-menu-popover"
-    >
-      {actionMode === 'add' ? (
-        <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
-          <CreateAccount
-            onActionComplete={(confirmed) => {
-              if (confirmed) {
-                dispatch(toggleAccountMenu());
-              } else {
-                setActionMode('');
-              }
-            }}
-          />
-        </Box>
-      ) : null}
-      {actionMode === 'import' ? (
-        <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
-          <ImportAccount
-            onActionComplete={(confirmed) => {
-              if (confirmed) {
-                dispatch(toggleAccountMenu());
-              } else {
-                setActionMode('');
-              }
-            }}
-          />
-        </Box>
-      ) : null}
-      {actionMode === '' ? (
-        <Box>
-          {/* Search box */}
-          {accounts.length > 100 ? (
-            <Box
-              paddingLeft={4}
-              paddingRight={4}
-              paddingBottom={4}
-              paddingTop={0}
-            >
-              <TextFieldSearch
-                size={Size.SM}
-                width={BlockSize.Full}
-                placeholder={t('searchAccounts')}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                clearButtonOnClick={() => setSearchQuery('')}
-                clearButtonProps={{
-                  size: Size.SM,
-                }}
-              />
-            </Box>
-          ) : null}
-          {/* Account list block */}
-          <Box className="multichain-account-menu-popover__list">
-            {searchResults.length === 0 && searchQuery !== '' ? (
-              <Text
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent
+        className="multichain-account-menu-popover"
+        modalDialogProps={{ padding: 0, marginBottom: 0 }}
+      >
+        <ModalHeader
+          paddingTop={4}
+          paddingRight={4}
+          paddingBottom={6}
+          onClose={onClose}
+          onBack={actionMode === '' ? null : () => setActionMode('')}
+        >
+          {title}
+        </ModalHeader>
+        {actionMode === 'add' ? (
+          <Box
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={4}
+            paddingTop={0}
+          >
+            <CreateAccount
+              onActionComplete={(confirmed) => {
+                if (confirmed) {
+                  dispatch(toggleAccountMenu());
+                } else {
+                  setActionMode('');
+                }
+              }}
+            />
+          </Box>
+        ) : null}
+        {actionMode === 'import' ? (
+          <Box
+            paddingLeft={4}
+            paddingRight={4}
+            paddingBottom={4}
+            paddingTop={0}
+          >
+            <ImportAccount
+              onActionComplete={(confirmed) => {
+                if (confirmed) {
+                  dispatch(toggleAccountMenu());
+                } else {
+                  setActionMode('');
+                }
+              }}
+            />
+          </Box>
+        ) : null}
+        {actionMode === '' ? (
+          <Box>
+            {/* Search box */}
+            {accounts.length > 100 ? (
+              <Box
                 paddingLeft={4}
                 paddingRight={4}
-                color={TextColor.textMuted}
-                data-testid="multichain-account-menu-popover-no-results"
+                paddingBottom={4}
+                paddingTop={0}
               >
-                {t('noAccountsFound')}
-              </Text>
-            ) : null}
-            {searchResults.map((account) => {
-              const connectedSite = connectedSites[account.address]?.find(
-                ({ origin }) => origin === currentTabOrigin,
-              );
-
-              return (
-                <AccountListItem
-                  onClick={() => {
-                    dispatch(toggleAccountMenu());
-                    trackEvent({
-                      category: MetaMetricsEventCategory.Navigation,
-                      event: MetaMetricsEventName.NavAccountSwitched,
-                      properties: {
-                        location: 'Main Menu',
-                      },
-                    });
-                    dispatch(setSelectedAccount(account.address));
+                <TextFieldSearch
+                  size={Size.SM}
+                  width={BlockSize.Full}
+                  placeholder={t('searchAccounts')}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  clearButtonOnClick={() => setSearchQuery('')}
+                  clearButtonProps={{
+                    size: Size.SM,
                   }}
-                  identity={account}
-                  key={account.address}
-                  selected={selectedAccount.address === account.address}
-                  closeMenu={onClose}
-                  connectedAvatar={connectedSite?.iconUrl}
-                  connectedAvatarName={connectedSite?.name}
+                  inputProps={{ autoFocus: true }}
                 />
-              );
-            })}
-          </Box>
-          {/* Add / Import / Hardware */}
-          <Box padding={4}>
-            <Box>
-              <ButtonLink
-                size={Size.SM}
-                startIconName={IconName.Add}
-                onClick={() => {
-                  trackEvent({
-                    category: MetaMetricsEventCategory.Navigation,
-                    event: MetaMetricsEventName.AccountAddSelected,
-                    properties: {
-                      account_type: MetaMetricsEventAccountType.Default,
-                      location: 'Main Menu',
-                    },
-                  });
-                  setActionMode('add');
-                }}
-                data-testid="multichain-account-menu-popover-add-account"
-              >
-                {t('addAccount')}
-              </ButtonLink>
-            </Box>
-            <Box>
-              <ButtonLink
-                size={Size.SM}
-                startIconName={IconName.Import}
-                onClick={() => {
-                  trackEvent({
-                    category: MetaMetricsEventCategory.Navigation,
-                    event: MetaMetricsEventName.AccountAddSelected,
-                    properties: {
-                      account_type: MetaMetricsEventAccountType.Imported,
-                      location: 'Main Menu',
-                    },
-                  });
-                  setActionMode('import');
-                }}
-              >
-                {t('importAccount')}
-              </ButtonLink>
-            </Box>
-            <Box>
-              <ButtonLink
-                size={Size.SM}
-                startIconName={IconName.Hardware}
-                onClick={() => {
-                  dispatch(toggleAccountMenu());
-                  trackEvent({
-                    category: MetaMetricsEventCategory.Navigation,
-                    event: MetaMetricsEventName.AccountAddSelected,
-                    properties: {
-                      account_type: MetaMetricsEventAccountType.Hardware,
-                      location: 'Main Menu',
-                    },
-                  });
-                  if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
-                    global.platform.openExtensionInBrowser(
-                      CONNECT_HARDWARE_ROUTE,
-                    );
-                  } else {
-                    history.push(CONNECT_HARDWARE_ROUTE);
-                  }
-                }}
-              >
-                {t('hardwareWallet')}
-              </ButtonLink>
-            </Box>
-            {
-              ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
-              <>
-                <Box>
-                  <ButtonLink
-                    size={Size.SM}
-                    startIconName={IconName.Snaps}
+              </Box>
+            ) : null}
+            {/* Account list block */}
+            <Box className="multichain-account-menu-popover__list">
+              {searchResults.length === 0 && searchQuery !== '' ? (
+                <Text
+                  paddingLeft={4}
+                  paddingRight={4}
+                  color={TextColor.textMuted}
+                  data-testid="multichain-account-menu-popover-no-results"
+                >
+                  {t('noAccountsFound')}
+                </Text>
+              ) : null}
+              {searchResults.map((account) => {
+                const connectedSite = connectedSites[account.address]?.find(
+                  ({ origin }) => origin === currentTabOrigin,
+                );
+
+                return (
+                  <AccountListItem
                     onClick={() => {
                       dispatch(toggleAccountMenu());
-                      getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
-                        ? global.platform.openExtensionInBrowser(
-                            ADD_SNAP_ACCOUNT_ROUTE,
-                            null,
-                            true,
-                          )
-                        : history.push(ADD_SNAP_ACCOUNT_ROUTE);
+                      trackEvent({
+                        category: MetaMetricsEventCategory.Navigation,
+                        event: MetaMetricsEventName.NavAccountSwitched,
+                        properties: {
+                          location: 'Main Menu',
+                        },
+                      });
+                      dispatch(setSelectedAccount(account.address));
                     }}
-                  >
-                    {t('settingAddSnapAccount')}
-                  </ButtonLink>
-                </Box>
-              </>
-              ///: END:ONLY_INCLUDE_IN
-            }
-            {
-              ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+                    identity={account}
+                    key={account.address}
+                    selected={selectedAccount.address === account.address}
+                    closeMenu={onClose}
+                    connectedAvatar={connectedSite?.iconUrl}
+                    connectedAvatarName={connectedSite?.name}
+                  />
+                );
+              })}
+            </Box>
+            {/* Add / Import / Hardware */}
+            <Box padding={4}>
               <Box>
                 <ButtonLink
                   size={Size.SM}
-                  startIconName={IconName.Custody}
+                  startIconName={IconName.Add}
+                  onClick={() => {
+                    trackEvent({
+                      category: MetaMetricsEventCategory.Navigation,
+                      event: MetaMetricsEventName.AccountAddSelected,
+                      properties: {
+                        account_type: MetaMetricsEventAccountType.Default,
+                        location: 'Main Menu',
+                      },
+                    });
+                    setActionMode('add');
+                  }}
+                  data-testid="multichain-account-menu-popover-add-account"
+                >
+                  {t('addAccount')}
+                </ButtonLink>
+              </Box>
+              <Box>
+                <ButtonLink
+                  size={Size.SM}
+                  startIconName={IconName.Import}
+                  onClick={() => {
+                    trackEvent({
+                      category: MetaMetricsEventCategory.Navigation,
+                      event: MetaMetricsEventName.AccountAddSelected,
+                      properties: {
+                        account_type: MetaMetricsEventAccountType.Imported,
+                        location: 'Main Menu',
+                      },
+                    });
+                    setActionMode('import');
+                  }}
+                >
+                  {t('importAccount')}
+                </ButtonLink>
+              </Box>
+              <Box>
+                <ButtonLink
+                  size={Size.SM}
+                  startIconName={IconName.Hardware}
                   onClick={() => {
                     dispatch(toggleAccountMenu());
                     trackEvent({
                       category: MetaMetricsEventCategory.Navigation,
-                      event:
-                        MetaMetricsEventName.UserClickedConnectCustodialAccount,
+                      event: MetaMetricsEventName.AccountAddSelected,
+                      properties: {
+                        account_type: MetaMetricsEventAccountType.Hardware,
+                        location: 'Main Menu',
+                      },
                     });
                     if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
                       global.platform.openExtensionInBrowser(
-                        CUSTODY_ACCOUNT_ROUTE,
+                        CONNECT_HARDWARE_ROUTE,
                       );
                     } else {
-                      history.push(CUSTODY_ACCOUNT_ROUTE);
+                      history.push(CONNECT_HARDWARE_ROUTE);
                     }
                   }}
                 >
-                  {t('connectCustodialAccountMenu')}
+                  {t('hardwareWallet')}
                 </ButtonLink>
               </Box>
-              ///: END:ONLY_INCLUDE_IN
-            }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
+                <>
+                  <Box marginTop={4}>
+                    <ButtonLink
+                      size={Size.SM}
+                      startIconName={IconName.Snaps}
+                      onClick={() => {
+                        dispatch(toggleAccountMenu());
+                        getEnvironmentType() === ENVIRONMENT_TYPE_POPUP
+                          ? global.platform.openExtensionInBrowser(
+                              ADD_SNAP_ACCOUNT_ROUTE,
+                              null,
+                              true,
+                            )
+                          : history.push(ADD_SNAP_ACCOUNT_ROUTE);
+                      }}
+                    >
+                      {t('settingAddSnapAccount')}
+                    </ButtonLink>
+                  </Box>
+                </>
+                ///: END:ONLY_INCLUDE_IN
+              }
+              {
+                ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
+                <Box>
+                  <ButtonLink
+                    size={Size.SM}
+                    startIconName={IconName.Custody}
+                    onClick={() => {
+                      dispatch(toggleAccountMenu());
+                      trackEvent({
+                        category: MetaMetricsEventCategory.Navigation,
+                        event:
+                          MetaMetricsEventName.UserClickedConnectCustodialAccount,
+                      });
+                      if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
+                        global.platform.openExtensionInBrowser(
+                          CUSTODY_ACCOUNT_ROUTE,
+                        );
+                      } else {
+                        history.push(CUSTODY_ACCOUNT_ROUTE);
+                      }
+                    }}
+                  >
+                    {t('connectCustodialAccountMenu')}
+                  </ButtonLink>
+                </Box>
+                ///: END:ONLY_INCLUDE_IN
+              }
+            </Box>
           </Box>
-        </Box>
-      ) : null}
-    </Popover>
+        ) : null}
+      </ModalContent>
+    </Modal>
   );
 };
 
diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
index bb44e6a6f..2af5703ba 100644
--- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
+++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap
@@ -3,7 +3,7 @@
 exports[`App Header should match snapshot 1`] = `
 <div>
   <div
-    class="box multichain-app-header-logo box--margin-2 box--display-none box--sm:display-flex box--flex-direction-row box--justify-content-center box--align-items-center"
+    class="mm-box multichain-app-header-logo mm-box--margin-2 mm-box--display-none mm-box--sm:display-flex mm-box--justify-content-center mm-box--align-items-center"
     data-testid="app-header-logo"
   >
     <button
@@ -200,10 +200,10 @@ exports[`App Header should match snapshot 1`] = `
     </button>
   </div>
   <div
-    class="box multichain-app-header box--margin-bottom-4 box--display-flex box--flex-direction-row box--align-items-center box--width-full box--background-color-background-alternative"
+    class="mm-box multichain-app-header mm-box--margin-bottom-4 mm-box--display-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-alternative"
   >
     <div
-      class="box multichain-app-header__contents multichain-app-header-shadow box--padding-2 box--padding-right-4 box--padding-left-4 box--gap-2 box--flex-direction-row box--align-items-center box--width-full box--background-color-background-default box--display-flex"
+      class="mm-box multichain-app-header__contents multichain-app-header-shadow mm-box--padding-2 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--gap-2 mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default"
     >
       <div>
         <button
@@ -289,14 +289,14 @@ exports[`App Header should match snapshot 1`] = `
         </span>
       </button>
       <div
-        class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--align-items-center"
+        class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--align-items-center"
       >
         <div
-          class="box box--display-flex box--gap-4 box--flex-direction-row"
+          class="mm-box mm-box--display-flex mm-box--gap-4"
         >
            
           <div
-            class="box box--display-flex box--flex-direction-row box--justify-content-flex-end box--width-full"
+            class="mm-box mm-box--display-flex mm-box--justify-content-flex-end mm-box--width-full"
           >
             <button
               aria-label="Account options"
diff --git a/ui/components/multichain/app-header/app-header.js b/ui/components/multichain/app-header/app-header.js
index 3b98c957d..d6c9e81b6 100644
--- a/ui/components/multichain/app-header/app-header.js
+++ b/ui/components/multichain/app-header/app-header.js
@@ -28,8 +28,8 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconName,
-  IconSize,
   PickerNetwork,
+  Box,
 } from '../../component-library';
 ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
 import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
@@ -47,7 +47,6 @@ import {
 } from '../../../selectors';
 import { GlobalMenu, ProductTour, AccountPicker } from '..';
 
-import Box from '../../ui/box/box';
 import {
   hideProductTour,
   toggleAccountMenu,
@@ -360,7 +359,6 @@ export const AppHeader = ({ location }) => {
                         setAccountOptionsMenuOpen(true);
                       }}
                       size={ButtonIconSize.Sm}
-                      iconProps={{ size: IconSize.Sm }}
                     />
                   </Box>
                 </Box>
diff --git a/ui/components/multichain/app-header/app-header.test.js b/ui/components/multichain/app-header/app-header.test.js
index 555c6b368..be47b4320 100644
--- a/ui/components/multichain/app-header/app-header.test.js
+++ b/ui/components/multichain/app-header/app-header.test.js
@@ -5,7 +5,7 @@ import mockState from '../../../../test/data/mock-state.json';
 import { SEND_STAGES } from '../../../ducks/send';
 import { AppHeader } from '.';
 
-const render = (stateChanges = {}, location = jest.fn()) => {
+const render = (stateChanges = {}, location = {}) => {
   const store = configureStore({
     ...mockState,
     activeTab: {
diff --git a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
index 68431a73b..b85220409 100644
--- a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
+++ b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Connected Site Menu should render the site menu in connected state 1`] = `
 <div>
   <button
-    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
+    class="mm-box multichain-connected-site-menu mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -27,7 +27,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
-              class="box multichain-connected-site-menu__badge  box--flex-direction-row box--background-color-success-default box--rounded-full box--border-color-background-default box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge  mm-box--background-color-success-default mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
             />
           </div>
         </div>
@@ -40,7 +40,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`]
 exports[`Connected Site Menu should render the site menu in not connected state 1`] = `
 <div>
   <button
-    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
+    class="mm-box multichain-connected-site-menu mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -64,7 +64,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
             style="bottom: 2px; right: -4px; z-index: 1;"
           >
             <div
-              class="box multichain-connected-site-menu__badge  box--flex-direction-row box--background-color-icon-alternative box--rounded-full box--border-color-background-default box--border-width-3 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge  mm-box--background-color-icon-alternative mm-box--rounded-full mm-box--border-color-background-default mm-box--border-width-3 box--border-style-solid"
             />
           </div>
         </div>
@@ -77,7 +77,7 @@ exports[`Connected Site Menu should render the site menu in not connected state
 exports[`Connected Site Menu should render the site menu in not connected to current account state 1`] = `
 <div>
   <button
-    class="box multichain-connected-site-menu box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default"
+    class="mm-box multichain-connected-site-menu mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--background-color-background-default"
     data-testid="connection-menu"
   >
     <div>
@@ -101,7 +101,7 @@ exports[`Connected Site Menu should render the site menu in not connected to cur
             style="bottom: 4px; right: -1px; z-index: 1;"
           >
             <div
-              class="box multichain-connected-site-menu__badge not-connected box--flex-direction-row box--background-color-background-default box--rounded-full box--border-color-success-default box--border-width-2 box--border-style-solid"
+              class="mm-box multichain-connected-site-menu__badge not-connected mm-box--background-color-background-default mm-box--rounded-full mm-box--border-color-success-default mm-box--border-width-2 box--border-style-solid"
             />
           </div>
         </div>
diff --git a/ui/components/multichain/connected-site-menu/connected-site-menu.js b/ui/components/multichain/connected-site-menu/connected-site-menu.js
index 9914066dd..8d67867b2 100644
--- a/ui/components/multichain/connected-site-menu/connected-site-menu.js
+++ b/ui/components/multichain/connected-site-menu/connected-site-menu.js
@@ -20,8 +20,8 @@ import {
   Icon,
   IconName,
   IconSize,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box';
 import { getSelectedIdentity } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
diff --git a/ui/components/multichain/create-account/create-account.js b/ui/components/multichain/create-account/create-account.js
index de380d982..ccd181164 100644
--- a/ui/components/multichain/create-account/create-account.js
+++ b/ui/components/multichain/create-account/create-account.js
@@ -6,6 +6,7 @@ import {
   ButtonPrimary,
   ButtonSecondary,
   FormTextField,
+  Box,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getAccountNameErrorMessage } from '../../../helpers/utils/accounts';
@@ -15,7 +16,6 @@ import {
 } from '../../../selectors';
 import { addNewAccount, setAccountLabel } from '../../../store/actions';
 import { getMostRecentOverviewPage } from '../../../ducks/history/history';
-import Box from '../../ui/box/box';
 import {
   MetaMetricsEventAccountType,
   MetaMetricsEventCategory,
diff --git a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
index 2eec4dbbd..295c50e24 100644
--- a/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
+++ b/ui/components/multichain/import-account/__snapshots__/json.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Json should match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="box box--display-flex box--gap-4 box--flex-direction-row"
+    class="mm-box mm-box--display-flex mm-box--gap-4"
   >
     <button
       class="box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent box--rounded-pill box--border-color-primary-default box--border-style-solid box--border-width-1"
diff --git a/ui/components/multichain/import-account/bottom-buttons.js b/ui/components/multichain/import-account/bottom-buttons.js
index f56c43e39..d9b32af61 100644
--- a/ui/components/multichain/import-account/bottom-buttons.js
+++ b/ui/components/multichain/import-account/bottom-buttons.js
@@ -4,9 +4,9 @@ import { useDispatch } from 'react-redux';
 import {
   ButtonPrimary,
   ButtonSecondary,
+  Box,
   BUTTON_SECONDARY_SIZES,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { Display } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import * as actions from '../../../store/actions';
diff --git a/ui/components/multichain/import-account/import-account.js b/ui/components/multichain/import-account/import-account.js
index 3433b7134..ea5f61b32 100644
--- a/ui/components/multichain/import-account/import-account.js
+++ b/ui/components/multichain/import-account/import-account.js
@@ -7,8 +7,7 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
-import { ButtonLink, Label, Text } from '../../component-library';
-import Box from '../../ui/box';
+import { ButtonLink, Label, Text, Box } from '../../component-library';
 import Dropdown from '../../ui/dropdown';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
index 6204663e0..78e6a9fca 100644
--- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
+++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap
@@ -3,10 +3,10 @@
 exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
 <div>
   <div
-    class="box multichain-import-token-link box--flex-direction-row"
+    class="mm-box multichain-import-token-link"
   >
     <div
-      class="box box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -20,7 +20,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -40,10 +40,10 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = `
 exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
 <div>
   <div
-    class="box multichain-import-token-link box--flex-direction-row"
+    class="mm-box multichain-import-token-link"
   >
     <div
-      class="box box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
@@ -57,7 +57,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = `
       </button>
     </div>
     <div
-      class="box box--padding-top-2 box--display-flex box--flex-direction-row box--align-items-center"
+      class="mm-box mm-box--padding-top-2 mm-box--display-flex mm-box--align-items-center"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--size-md mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
diff --git a/ui/components/multichain/import-token-link/import-token-link.js b/ui/components/multichain/import-token-link/import-token-link.js
index 7d9388951..699db9136 100644
--- a/ui/components/multichain/import-token-link/import-token-link.js
+++ b/ui/components/multichain/import-token-link/import-token-link.js
@@ -1,10 +1,9 @@
 import React, { useContext } from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Box from '../../ui/box/box';
-import { ButtonLink, IconName } from '../../component-library';
+import { ButtonLink, IconName, Box } from '../../component-library';
 import {
   AlignItems,
   Display,
@@ -27,6 +26,7 @@ export const ImportTokenLink = ({ className, ...props }) => {
   const trackEvent = useContext(MetaMetricsContext);
   const t = useI18nContext();
   const history = useHistory();
+  const dispatch = useDispatch();
 
   const isTokenDetectionSupported = useSelector(getIsTokenDetectionSupported);
   const isTokenDetectionInactiveOnMainnet = useSelector(
@@ -69,7 +69,7 @@ export const ImportTokenLink = ({ className, ...props }) => {
           size={Size.MD}
           startIconName={IconName.Refresh}
           data-testid="refresh-list-button"
-          onClick={() => detectNewTokens()}
+          onClick={() => dispatch(detectNewTokens())}
         >
           {t('refreshList')}
         </ButtonLink>
diff --git a/ui/components/multichain/import-token-link/import-token-link.test.js b/ui/components/multichain/import-token-link/import-token-link.test.js
index 130252a41..a4763f6de 100644
--- a/ui/components/multichain/import-token-link/import-token-link.test.js
+++ b/ui/components/multichain/import-token-link/import-token-link.test.js
@@ -19,7 +19,7 @@ jest.mock('react-router-dom', () => {
 });
 
 jest.mock('../../../store/actions.ts', () => ({
-  detectNewTokens: jest.fn(),
+  detectNewTokens: jest.fn().mockReturnValue({ type: '' }),
 }));
 
 describe('Import Token Link', () => {
diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
index f71dd7605..9e8951cee 100644
--- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
+++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap
@@ -3,7 +3,7 @@
 exports[`NetworkListItem renders properly 1`] = `
 <div>
   <div
-    class="box multichain-network-list-item box--padding-4 box--gap-2 box--flex-direction-row box--justify-content-space-between box--align-items-center box--width-full box--background-color-transparent box--display-flex"
+    class="mm-box multichain-network-list-item mm-box--padding-4 mm-box--display-flex mm-box--gap-2 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
   >
     <div
       class="box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-background-alternative box--rounded-full box--border-color-transparent box--border-style-solid box--border-width-1"
@@ -15,7 +15,7 @@ exports[`NetworkListItem renders properly 1`] = `
       />
     </div>
     <div
-      class="box multichain-network-list-item__network-name box--flex-direction-row"
+      class="mm-box multichain-network-list-item__network-name"
     >
       <button
         class="box mm-text mm-button-base mm-button-base--ellipsis mm-button-link mm-button-link--size-auto mm-text--body-md mm-text--ellipsis box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-text-default box--background-color-transparent"
diff --git a/ui/components/multichain/network-list-item/network-list-item.js b/ui/components/multichain/network-list-item/network-list-item.js
index ad05b00a0..6d521ce67 100644
--- a/ui/components/multichain/network-list-item/network-list-item.js
+++ b/ui/components/multichain/network-list-item/network-list-item.js
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import Box from '../../ui/box/box';
 import {
   AlignItems,
   IconColor,
@@ -12,12 +11,14 @@ import {
   TextColor,
   BackgroundColor,
   BlockSize,
+  Display,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
   ButtonIcon,
   ButtonLink,
   IconName,
+  Box,
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip/tooltip';
@@ -67,6 +68,7 @@ export const NetworkListItem = ({
       className={classnames('multichain-network-list-item', {
         'multichain-network-list-item--selected': selected,
       })}
+      display={Display.Flex}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.spaceBetween}
       width={BlockSize.Full}
diff --git a/ui/components/multichain/network-list-menu/index.scss b/ui/components/multichain/network-list-menu/index.scss
index 7b4e70b70..28d5d0cd5 100644
--- a/ui/components/multichain/network-list-menu/index.scss
+++ b/ui/components/multichain/network-list-menu/index.scss
@@ -1,8 +1,3 @@
 .multichain-network-list-menu {
   overflow: auto;
-
-  /* Overrides the popover's default behavior */
-  &-content-wrapper {
-    border-radius: 0;
-  }
 }
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 601cf2f59..1cac16238 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -1,9 +1,8 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Popover from '../../ui/popover/popover.component';
 import { NetworkListItem } from '../network-list-item';
 import {
   setActiveNetwork,
@@ -15,17 +14,25 @@ import {
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
 import {
   getShowTestNetworks,
-  getAllEnabledNetworks,
   getCurrentChainId,
+  getNonTestNetworks,
+  getTestNetworks,
 } from '../../../selectors';
-import Box from '../../ui/box/box';
 import ToggleButton from '../../ui/toggle-button';
 import {
   Display,
   JustifyContent,
   Size,
 } from '../../../helpers/constants/design-system';
-import { Text, ButtonLink, IconName } from '../../component-library';
+import {
+  ButtonLink,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Box,
+} from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@@ -47,7 +54,10 @@ const UNREMOVABLE_CHAIN_IDS = [
 
 export const NetworkListMenu = ({ onClose }) => {
   const t = useI18nContext();
-  const networks = useSelector(getAllEnabledNetworks);
+
+  const nonTestNetworks = useSelector(getNonTestNetworks);
+  const testNetworks = useSelector(getTestNetworks);
+
   const showTestNetworks = useSelector(getShowTestNetworks);
   const currentChainId = useSelector(getCurrentChainId);
   const dispatch = useDispatch();
@@ -57,132 +67,135 @@ export const NetworkListMenu = ({ onClose }) => {
   const environmentType = getEnvironmentType();
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
 
-  const showTestNetworksRef = useRef(showTestNetworks);
-  const networkListRef = useRef(null);
-
   const completedOnboarding = useSelector(getCompletedOnboarding);
 
   const lineaMainnetReleased = useSelector(isLineaMainnetNetworkReleased);
 
-  useEffect(() => {
-    if (showTestNetworks && !showTestNetworksRef.current) {
-      // Scroll to the bottom of the list
-      networkListRef.current.lastChild.scrollIntoView();
-    }
-    showTestNetworksRef.current = showTestNetworks;
-  }, [showTestNetworks, showTestNetworksRef]);
+  const generateMenuItems = (desiredNetworks) => {
+    return desiredNetworks.map((network, index) => {
+      if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
+        return null;
+      }
+      const isCurrentNetwork = currentChainId === network.chainId;
+      const canDeleteNetwork =
+        !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
+
+      return (
+        <NetworkListItem
+          name={network.nickname}
+          iconSrc={network?.rpcPrefs?.imageUrl}
+          key={`${network.id || network.chainId}-${index}`}
+          selected={isCurrentNetwork}
+          onClick={async () => {
+            dispatch(toggleNetworkMenu());
+            if (network.providerType) {
+              dispatch(setProviderType(network.providerType));
+            } else {
+              dispatch(setActiveNetwork(network.id));
+            }
+            trackEvent({
+              event: MetaMetricsEventName.NavNetworkSwitched,
+              category: MetaMetricsEventCategory.Network,
+              properties: {
+                location: 'Network Menu',
+                chain_id: currentChainId,
+                from_network: currentChainId,
+                to_network: network.id || network.chainId,
+              },
+            });
+          }}
+          onDeleteClick={
+            canDeleteNetwork
+              ? () => {
+                  dispatch(toggleNetworkMenu());
+                  dispatch(
+                    showModal({
+                      name: 'CONFIRM_DELETE_NETWORK',
+                      target: network.id || network.chainId,
+                      onConfirm: () => undefined,
+                    }),
+                  );
+                }
+              : null
+          }
+        />
+      );
+    });
+  };
 
   return (
-    <Popover
-      contentClassName="multichain-network-list-menu-content-wrapper"
-      onClose={onClose}
-      centerTitle
-      title={t('networkMenuHeading')}
-    >
-      <>
-        <Box className="multichain-network-list-menu" ref={networkListRef}>
-          {networks.map((network, index) => {
-            if (
-              !lineaMainnetReleased &&
-              network.providerType === 'linea-mainnet'
-            ) {
-              return null;
-            }
-            const isCurrentNetwork = currentChainId === network.chainId;
-            const canDeleteNetwork =
-              !isCurrentNetwork &&
-              !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
-
-            return (
-              <NetworkListItem
-                name={network.nickname}
-                iconSrc={network?.rpcPrefs?.imageUrl}
-                key={`${network.id || network.chainId}-${index}`}
-                selected={isCurrentNetwork}
-                onClick={async () => {
-                  dispatch(toggleNetworkMenu());
-                  if (network.providerType) {
-                    dispatch(setProviderType(network.providerType));
-                  } else {
-                    dispatch(setActiveNetwork(network.id));
-                  }
-                  trackEvent({
-                    event: MetaMetricsEventName.NavNetworkSwitched,
-                    category: MetaMetricsEventCategory.Network,
-                    properties: {
-                      location: 'Network Menu',
-                      chain_id: currentChainId,
-                      from_network: currentChainId,
-                      to_network: network.id || network.chainId,
-                    },
-                  });
-                }}
-                onDeleteClick={
-                  canDeleteNetwork
-                    ? () => {
-                        dispatch(toggleNetworkMenu());
-                        dispatch(
-                          showModal({
-                            name: 'CONFIRM_DELETE_NETWORK',
-                            target: network.id || network.chainId,
-                            onConfirm: () => undefined,
-                          }),
-                        );
-                      }
-                    : null
-                }
-              />
-            );
-          })}
-        </Box>
-        <Box
-          padding={4}
-          display={Display.Flex}
-          justifyContent={JustifyContent.spaceBetween}
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent
+        className="multichain-network-list-menu-content-wrapper"
+        modalDialogProps={{ padding: 0 }}
+      >
+        <ModalHeader
+          paddingTop={4}
+          paddingRight={4}
+          paddingBottom={6}
+          onClose={onClose}
         >
-          <Text>{t('showTestnetNetworks')}</Text>
-          <ToggleButton
-            value={showTestNetworks}
-            onToggle={(value) => {
-              const shouldShowTestNetworks = !value;
-              dispatch(setShowTestNetworks(shouldShowTestNetworks));
-              if (shouldShowTestNetworks) {
+          {t('networkMenuHeading')}
+        </ModalHeader>
+        <>
+          <Box className="multichain-network-list-menu">
+            {generateMenuItems(nonTestNetworks)}
+          </Box>
+          <Box
+            padding={4}
+            display={Display.Flex}
+            justifyContent={JustifyContent.spaceBetween}
+          >
+            <Text>{t('showTestnetNetworks')}</Text>
+            <ToggleButton
+              value={showTestNetworks}
+              onToggle={(value) => {
+                const shouldShowTestNetworks = !value;
+                dispatch(setShowTestNetworks(shouldShowTestNetworks));
+                if (shouldShowTestNetworks) {
+                  trackEvent({
+                    event: MetaMetricsEventName.TestNetworksDisplayed,
+                    category: MetaMetricsEventCategory.Network,
+                  });
+                }
+              }}
+            />
+          </Box>
+          {showTestNetworks ? (
+            <Box className="multichain-network-list-menu">
+              {generateMenuItems(testNetworks)}
+            </Box>
+          ) : null}
+          <Box padding={4}>
+            <ButtonLink
+              size={Size.SM}
+              block
+              onClick={() => {
+                if (isFullScreen) {
+                  if (completedOnboarding) {
+                    history.push(ADD_POPULAR_CUSTOM_NETWORK);
+                  } else {
+                    dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
+                  }
+                } else {
+                  global.platform.openExtensionInBrowser(
+                    ADD_POPULAR_CUSTOM_NETWORK,
+                  );
+                }
+                dispatch(toggleNetworkMenu());
                 trackEvent({
-                  event: MetaMetricsEventName.TestNetworksDisplayed,
+                  event: MetaMetricsEventName.AddNetworkButtonClick,
                   category: MetaMetricsEventCategory.Network,
                 });
-              }
-            }}
-          />
-        </Box>
-        <Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
-          <ButtonLink
-            size={Size.SM}
-            startIconName={IconName.Add}
-            onClick={() => {
-              if (isFullScreen) {
-                if (completedOnboarding) {
-                  history.push(ADD_POPULAR_CUSTOM_NETWORK);
-                } else {
-                  dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
-                }
-              } else {
-                global.platform.openExtensionInBrowser(
-                  ADD_POPULAR_CUSTOM_NETWORK,
-                );
-              }
-              dispatch(toggleNetworkMenu());
-              trackEvent({
-                event: MetaMetricsEventName.AddNetworkButtonClick,
-                category: MetaMetricsEventCategory.Network,
-              });
-            }}
-          >
-            {t('addNetwork')}
-          </ButtonLink>
-        </Box>
-      </>
-    </Popover>
+              }}
+            >
+              {t('addNetwork')}
+            </ButtonLink>
+          </Box>
+        </>
+      </ModalContent>
+    </Modal>
   );
 };
 
diff --git a/ui/components/multichain/nft-item/nft-item.js b/ui/components/multichain/nft-item/nft-item.js
index f31f99fc9..c1127b707 100644
--- a/ui/components/multichain/nft-item/nft-item.js
+++ b/ui/components/multichain/nft-item/nft-item.js
@@ -6,6 +6,7 @@ import {
   AvatarNetwork,
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
+  Box,
 } from '../../component-library';
 import {
   BackgroundColor,
@@ -13,7 +14,6 @@ import {
   JustifyContent,
   Size,
 } from '../../../helpers/constants/design-system';
-import Box from '../../ui/box/box';
 
 export const NftItem = ({
   alt,
diff --git a/ui/components/multichain/product-tour-popover/product-tour-popover.test.js b/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
index 2180d55e9..4060db554 100644
--- a/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
+++ b/ui/components/multichain/product-tour-popover/product-tour-popover.test.js
@@ -9,6 +9,7 @@ describe('DetectedTokensBanner', () => {
     description: 'Find your connected accounts and manage permissions here.',
     currentStep: '1',
     totalSteps: '3',
+    closeMenu: jest.fn(),
   };
   it('should render correctly', () => {
     const { getByTestId } = render(
diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
index 6ee7fc715..6a517411f 100644
--- a/ui/components/multichain/token-list-item/token-list-item.js
+++ b/ui/components/multichain/token-list-item/token-list-item.js
@@ -42,7 +42,6 @@ export const TokenListItem = ({
 }) => {
   const t = useI18nContext();
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
-  const dataTheme = document.documentElement.getAttribute('data-theme');
   const trackEvent = useContext(MetaMetricsContext);
   const chainId = useSelector(getCurrentChainId);
   const badgeWrapperImage =
@@ -125,7 +124,6 @@ export const TokenListItem = ({
                 html={title}
                 disabled={title?.length < 12}
                 tooltipInnerClassName="multichain-token-list-item__tooltip"
-                theme={dataTheme === 'light' ? 'dark' : 'light'}
               >
                 <Text
                   fontWeight={FontWeight.Medium}
diff --git a/ui/components/ui/review-spending-cap/review-spending-cap.js b/ui/components/ui/review-spending-cap/review-spending-cap.js
index 39e643993..d90471317 100644
--- a/ui/components/ui/review-spending-cap/review-spending-cap.js
+++ b/ui/components/ui/review-spending-cap/review-spending-cap.js
@@ -63,7 +63,7 @@ export default function ReviewSpendingCap({
             as="h6"
             display={DISPLAY.INLINE_BLOCK}
           >
-            {t('customSpendingCap')}
+            {t('dappRequestedSpendingCap')}
           </Text>
           <Box marginLeft={2} display={DISPLAY.INLINE_BLOCK}>
             <Tooltip
diff --git a/ui/ducks/send/send.js b/ui/ducks/send/send.js
index 97448b0dd..45a681eb9 100644
--- a/ui/ducks/send/send.js
+++ b/ui/ducks/send/send.js
@@ -2015,10 +2015,11 @@ export function updateSendAmount(amount) {
  * @param {object} payload - action payload
  * @param {string} payload.type - type of asset to send
  * @param {TokenDetails} [payload.details] - ERC20 details if sending TOKEN asset
+ * @param payload.skipComputeEstimatedGasLimit
  * @returns {ThunkAction<void>}
  */
 export function updateSendAsset(
-  { type, details: providedDetails },
+  { type, details: providedDetails, skipComputeEstimatedGasLimit },
   { initialAssetSet = false } = {},
 ) {
   return async (dispatch, getState) => {
@@ -2149,7 +2150,7 @@ export function updateSendAsset(
 
       await dispatch(actions.updateAsset({ asset, initialAssetSet }));
     }
-    if (initialAssetSet === false) {
+    if (initialAssetSet === false && !skipComputeEstimatedGasLimit) {
       await dispatch(computeEstimatedGasLimit());
     }
   };
@@ -2393,6 +2394,7 @@ export function startNewDraftTransaction(asset) {
       updateSendAsset({
         type: asset.type ?? AssetType.native,
         details: asset.details,
+        skipComputeEstimatedGasLimit: true,
       }),
     );
 
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
index 4e2096a38..6c38bdd17 100644
--- a/ui/helpers/constants/settings.js
+++ b/ui/helpers/constants/settings.js
@@ -116,7 +116,7 @@ export const SETTINGS_CONSTANTS = [
     tabMessage: (t) => t('advanced'),
     sectionMessage: (t) => t('dismissReminderField'),
     descriptionMessage: (t) => t('dismissReminderDescriptionField'),
-    route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`,
+    route: `${ADVANCED_ROUTE}#dismiss-secretrecovery`,
     icon: 'fas fa-sliders-h',
   },
   {
@@ -167,35 +167,35 @@ export const SETTINGS_CONSTANTS = [
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('participateInMetaMetrics'),
     descriptionMessage: (t) => t('participateInMetaMetricsDescription'),
-    route: `${SECURITY_ROUTE}#metrametrics`,
+    route: `${SECURITY_ROUTE}#metametrics`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('chooseYourNetwork'),
     descriptionMessage: (t) => t('chooseYourNetworkDescription'),
-    route: `${SECURITY_ROUTE}#-chose-your-network`,
+    route: `${SECURITY_ROUTE}#choose-your-network`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('addCustomIPFSGateway'),
     descriptionMessage: (t) => t('addCustomIPFSGatewayDescription'),
-    route: `${SECURITY_ROUTE}#-add-custom-ipfs-gateway`,
+    route: `${SECURITY_ROUTE}#add-custom-ipfs-gateway`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('autoDetectTokens'),
     descriptionMessage: (t) => t('autoDetectTokensDescription'),
-    route: `${SECURITY_ROUTE}#-auto-detect-tokens`,
+    route: `${SECURITY_ROUTE}#auto-detect-tokens`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('useMultiAccountBalanceChecker'),
     descriptionMessage: (t) => t('useMultiAccountBalanceCheckerDescription'),
-    route: `${SECURITY_ROUTE}#-use-milti-account-balance-checker`,
+    route: `${SECURITY_ROUTE}#use-multi-account-balance-checker`,
     icon: 'fa fa-lock',
   },
   {
diff --git a/ui/helpers/constants/zendesk-url.js b/ui/helpers/constants/zendesk-url.js
index e4ee18ebb..3599a27fd 100644
--- a/ui/helpers/constants/zendesk-url.js
+++ b/ui/helpers/constants/zendesk-url.js
@@ -28,6 +28,8 @@ const ZENDESK_URLS = {
     'https://metamask.zendesk.com/hc/en-us/articles/360059952212-MetaMask-is-a-non-custodial-wallet',
   SPEEDUP_CANCEL:
     'https://metamask.zendesk.com/hc/en-us/articles/360015489251-How-to-speed-up-or-cancel-a-pending-transaction',
+  TOKEN_ALLOWANCE_WITH_SPENDING_CAP:
+    'https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap',
   TOKEN_SAFETY_PRACTICES:
     'https://metamask.zendesk.com/hc/en-us/articles/4403988839451',
   UNKNOWN_NETWORK:
diff --git a/ui/pages/asset/asset.scss b/ui/pages/asset/asset.scss
index 388af1517..32de19524 100644
--- a/ui/pages/asset/asset.scss
+++ b/ui/pages/asset/asset.scss
@@ -10,7 +10,6 @@
 
 .asset-navigation {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   padding: 16px;
   height: 64px;
diff --git a/ui/pages/asset/components/asset-navigation.js b/ui/pages/asset/components/asset-navigation.js
index 75789afbf..6e6353c75 100644
--- a/ui/pages/asset/components/asset-navigation.js
+++ b/ui/pages/asset/components/asset-navigation.js
@@ -23,8 +23,4 @@ AssetNavigation.propTypes = {
   optionsButton: PropTypes.element,
 };
 
-AssetNavigation.defaultProps = {
-  optionsButton: undefined,
-};
-
 export default AssetNavigation;
diff --git a/ui/pages/asset/components/asset-options.js b/ui/pages/asset/components/asset-options.js
index 379d86df6..3dbe79431 100644
--- a/ui/pages/asset/components/asset-options.js
+++ b/ui/pages/asset/components/asset-options.js
@@ -7,13 +7,16 @@ import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../../components/ui/menu';
 import { getBlockExplorerLinkText } from '../../../selectors';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
-import { ButtonIcon, IconName } from '../../../components/component-library';
+import {
+  ButtonIcon,
+  ButtonIconSize,
+  IconName,
+} from '../../../components/component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 const AssetOptions = ({
   onRemove,
   onClickBlockExplorer,
-  onViewAccountDetails,
   onViewTokenDetails,
   tokenSymbol,
   isNativeAsset,
@@ -42,22 +45,13 @@ const AssetOptions = ({
         ariaLabel={t('assetOptions')}
         iconName={IconName.MoreVertical}
         color={Color.textDefault}
+        size={ButtonIconSize.Sm}
       />
       {assetOptionsOpen ? (
         <Menu
           anchorElement={ref.current}
           onHide={() => setAssetOptionsOpen(false)}
         >
-          <MenuItem
-            iconName={IconName.ScanBarcode}
-            data-testid="asset-options__account-details"
-            onClick={() => {
-              setAssetOptionsOpen(false);
-              onViewAccountDetails();
-            }}
-          >
-            {t('accountDetails')}
-          </MenuItem>
           <MenuItem
             iconName={IconName.Export}
             data-testid="asset-options__etherscan"
@@ -111,7 +105,6 @@ const isNotFunc = (p) => {
 AssetOptions.propTypes = {
   isNativeAsset: PropTypes.bool,
   onClickBlockExplorer: PropTypes.func.isRequired,
-  onViewAccountDetails: PropTypes.func.isRequired,
   onRemove: (props) => {
     if (props.isNativeAsset === false && isNotFunc(props.onRemove)) {
       throw new Error(
diff --git a/ui/pages/asset/components/native-asset.js b/ui/pages/asset/components/native-asset.js
index 851b88b39..b0cdf6b70 100644
--- a/ui/pages/asset/components/native-asset.js
+++ b/ui/pages/asset/components/native-asset.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { getAccountLink } from '@metamask/etherscan-link';
 import TransactionList from '../../../components/app/transaction-list';
@@ -12,7 +12,6 @@ import {
   getSelectedAddress,
   getIsCustomNetwork,
 } from '../../../selectors/selectors';
-import { showModal } from '../../../store/actions';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { getURLHostName } from '../../../helpers/utils/util';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -24,7 +23,6 @@ export default function NativeAsset({ nativeCurrency }) {
   const selectedAccountName = useSelector(
     (state) => getSelectedIdentity(state).name,
   );
-  const dispatch = useDispatch();
 
   const chainId = useSelector(getCurrentChainId);
   const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
@@ -57,9 +55,6 @@ export default function NativeAsset({ nativeCurrency }) {
                 url: accountLink,
               });
             }}
-            onViewAccountDetails={() => {
-              dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
-            }}
             isCustomNetwork={isCustomNetwork}
           />
         }
diff --git a/ui/pages/asset/components/token-asset.js b/ui/pages/asset/components/token-asset.js
index 2df9c17ac..18b1ee510 100644
--- a/ui/pages/asset/components/token-asset.js
+++ b/ui/pages/asset/components/token-asset.js
@@ -67,9 +67,6 @@ export default function TokenAsset({ token }) {
               });
               global.platform.openTab({ url: tokenTrackerLink });
             }}
-            onViewAccountDetails={() => {
-              dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
-            }}
             onViewTokenDetails={() => {
               history.push(`${TOKEN_DETAILS}/${token.address}`);
             }}
diff --git a/ui/pages/confirm-signature-request/index.js b/ui/pages/confirm-signature-request/index.js
index ef1a43a49..b86b23a6e 100644
--- a/ui/pages/confirm-signature-request/index.js
+++ b/ui/pages/confirm-signature-request/index.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useHistory, withRouter } from 'react-router-dom';
 import log from 'loglevel';
 import { cloneDeep } from 'lodash';
 import * as actions from '../../store/actions';
@@ -69,6 +69,7 @@ const ConfirmTxScreen = ({ match }) => {
   ///: END:ONLY_INCLUDE_IN
 
   const [prevValue, setPrevValues] = useState();
+  const history = useHistory();
 
   useEffect(() => {
     const unconfTxList = txHelper(
@@ -174,6 +175,7 @@ const ConfirmTxScreen = ({ match }) => {
 
   return (
     <SigComponent
+      history={history}
       txData={txData}
       key={txData.id}
       identities={identities}
diff --git a/ui/pages/keychains/reveal-seed.test.js b/ui/pages/keychains/reveal-seed.test.js
index 58baa7503..a028bef7b 100644
--- a/ui/pages/keychains/reveal-seed.test.js
+++ b/ui/pages/keychains/reveal-seed.test.js
@@ -216,7 +216,7 @@ describe('Reveal Seed Page', () => {
     const holdButton = getByText('Hold to reveal SRP');
     const circleLocked = queryByLabelText('hold to reveal circle locked');
 
-    fireEvent.mouseDown(holdButton);
+    fireEvent.pointerDown(holdButton);
     fireEvent.transitionEnd(circleLocked);
 
     const circleUnlocked = queryByLabelText('hold to reveal circle unlocked');
@@ -224,7 +224,7 @@ describe('Reveal Seed Page', () => {
 
     await waitFor(() => {
       expect(holdButton.firstChild).toHaveClass(
-        'box hold-to-reveal-button__icon-container box--flex-direction-row',
+        'hold-to-reveal-button__icon-container',
       );
       // tests that the mock srp is now shown.
       expect(getByText('test srp')).toBeInTheDocument();
diff --git a/ui/pages/permissions-connect/choose-account/choose-account.js b/ui/pages/permissions-connect/choose-account/choose-account.js
index 2597f34a7..f4cecb05b 100644
--- a/ui/pages/permissions-connect/choose-account/choose-account.js
+++ b/ui/pages/permissions-connect/choose-account/choose-account.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
+import { SubjectType } from '@metamask/permission-controller';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
 import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
@@ -47,6 +48,21 @@ const ChooseAccount = ({
     return accounts.length === selectedAccounts.size;
   };
 
+  const getHeaderText = () => {
+    if (accounts.length === 0) {
+      return t('connectAccountOrCreate');
+    }
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+    if (targetSubjectMetadata?.subjectType === SubjectType.Snap) {
+      return t('selectAccountsForSnap');
+    }
+    ///: END:ONLY_INCLUDE_IN
+
+    return t('selectAccounts');
+  };
+
+  const headerText = getHeaderText();
+
   return (
     <>
       <div className="permissions-connect-choose-account__content">
@@ -54,12 +70,9 @@ const ChooseAccount = ({
           iconUrl={targetSubjectMetadata?.iconUrl}
           iconName={targetSubjectMetadata?.name}
           headerTitle={t('connectWithMetaMask')}
-          headerText={
-            accounts.length > 0
-              ? t('selectAccounts')
-              : t('connectAccountOrCreate')
-          }
+          headerText={headerText}
           siteOrigin={targetSubjectMetadata?.origin}
+          subjectType={targetSubjectMetadata?.subjectType}
         />
         <AccountList
           accounts={accounts}
@@ -74,7 +87,9 @@ const ChooseAccount = ({
         />
       </div>
       <div className="permissions-connect-choose-account__footer-container">
-        <PermissionsConnectFooter />
+        {targetSubjectMetadata?.subjectType !== SubjectType.Snap && (
+          <PermissionsConnectFooter />
+        )}
         <PageContainerFooter
           cancelButtonType="default"
           onCancel={() => cancelPermissionsRequest(permissionsRequestId)}
diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js
index eaf4065ad..4820bc1ab 100644
--- a/ui/pages/permissions-connect/permissions-connect.component.js
+++ b/ui/pages/permissions-connect/permissions-connect.component.js
@@ -3,13 +3,22 @@ import React, { Component } from 'react';
 import { Switch, Route } from 'react-router-dom';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
 import { ethErrors, serializeError } from 'eth-rpc-errors';
+import { SubjectType } from '@metamask/subject-metadata-controller';
 ///: END:ONLY_INCLUDE_IN
 import { getEnvironmentType } from '../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app';
 import { MILLISECOND } from '../../../shared/constants/time';
 import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import PermissionPageContainer from '../../components/app/permission-page-container';
-import { Icon, IconName, IconSize } from '../../components/component-library';
+import {
+  Box,
+  Icon,
+  IconName,
+  IconSize,
+} from '../../components/component-library';
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
+import SnapAuthorshipHeader from '../../components/app/snaps/snap-authorship-header/snap-authorship-header';
+///: END:ONLY_INCLUDE_IN
 import ChooseAccount from './choose-account';
 import PermissionsRedirect from './redirect';
 ///: BEGIN:ONLY_INCLUDE_IN(snaps)
@@ -268,30 +277,57 @@ export default class PermissionConnect extends Component {
   }
 
   renderTopBar() {
-    const { redirecting } = this.state;
+    const {
+      redirecting,
+      ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+      targetSubjectMetadata,
+      ///: END:ONLY_INCLUDE_IN
+    } = this.state;
     const { page, isRequestingAccounts, totalPages } = this.props;
     const { t } = this.context;
     return redirecting ? null : (
-      <div className="permissions-connect__top-bar">
-        {page === '2' && isRequestingAccounts ? (
-          <div
-            className="permissions-connect__back"
-            onClick={() => this.goBack()}
-          >
-            <Icon
-              name={IconName.ArrowLeft}
-              marginInlineEnd={1}
-              size={IconSize.Xs}
+      <Box
+        style={{
+          ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+          marginBottom:
+            targetSubjectMetadata.subjectType === SubjectType.Snap && '14px',
+          boxShadow:
+            targetSubjectMetadata.subjectType === SubjectType.Snap &&
+            'var(--shadow-size-lg) var(--color-shadow-default)',
+          ///: END:ONLY_INCLUDE_IN
+        }}
+      >
+        <div className="permissions-connect__top-bar">
+          {page === '2' && isRequestingAccounts ? (
+            <div
+              className="permissions-connect__back"
+              onClick={() => this.goBack()}
+            >
+              <Icon
+                name={IconName.ArrowLeft}
+                marginInlineEnd={1}
+                size={IconSize.Xs}
+              />
+              {t('back')}
+            </div>
+          ) : null}
+          {isRequestingAccounts ? (
+            <div className="permissions-connect__page-count">
+              {t('xOfY', [page, totalPages])}
+            </div>
+          ) : null}
+        </div>
+        {
+          ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+          targetSubjectMetadata.subjectType === SubjectType.Snap && (
+            <SnapAuthorshipHeader
+              snapId={targetSubjectMetadata.origin}
+              boxShadow="none"
             />
-            {t('back')}
-          </div>
-        ) : null}
-        {isRequestingAccounts ? (
-          <div className="permissions-connect__page-count">
-            {t('xOfY', [page, totalPages])}
-          </div>
-        ) : null}
-      </div>
+          )
+          ///: END:ONLY_INCLUDE_IN
+        }
+      </Box>
     );
   }
 
diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
index 7b600e841..52eec92ef 100644
--- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
@@ -179,6 +179,7 @@ export default function SnapInstall({
               ])}
             </Text>
             <SnapPermissionsList
+              snapId={targetSubjectMetadata.origin}
               permissions={requestState.permissions || {}}
               targetSubjectMetadata={targetSubjectMetadata}
             />
diff --git a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
index 765943919..8b8b6d165 100644
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
@@ -186,14 +186,8 @@ export default class SendAssetRow extends Component {
 
   renderNativeCurrency(insideDropdown = false) {
     const { t } = this.context;
-    const {
-      accounts,
-      selectedAddress,
-      nativeCurrency,
-      nativeCurrencyImage,
-      sendAsset,
-    } = this.props;
-
+    const { accounts, selectedAddress, nativeCurrency, nativeCurrencyImage } =
+      this.props;
     const { sendableTokens, sendableNfts } = this.state;
 
     const balanceValue = accounts[selectedAddress]
@@ -211,15 +205,11 @@ export default class SendAssetRow extends Component {
         onClick={() => this.selectToken(AssetType.native)}
       >
         <div className="send-v2__asset-dropdown__asset-icon">
-          {sendAsset?.type === AssetType.NFT && sendAsset?.details?.image ? (
-            <img width={36} src={sendAsset.details.image} />
-          ) : (
-            <Identicon
-              diameter={36}
-              image={nativeCurrencyImage}
-              address={nativeCurrency}
-            />
-          )}
+          <Identicon
+            diameter={36}
+            image={nativeCurrencyImage}
+            address={nativeCurrency}
+          />
         </div>
         <div className="send-v2__asset-dropdown__asset-data">
           <div className="send-v2__asset-dropdown__symbol">
diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
index 95c5250a9..cb3a701ee 100644
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -204,7 +204,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[2]}
+        ref={this.settingsRefs[1]}
         className="settings-page__content-row"
         data-testid="advanced-setting-reset-account"
       >
@@ -244,7 +244,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[3]}
+        ref={this.settingsRefs[2]}
         className="settings-page__content-row"
         data-testid="advanced-setting-hex-data"
       >
@@ -275,7 +275,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[4]}
+        ref={this.settingsRefs[3]}
         className="settings-page__content-row"
         data-testid="advanced-setting-show-testnet-conversion"
       >
@@ -307,7 +307,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[5]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-show-testnet-conversion"
       >
@@ -337,7 +337,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[6]}
+        ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="advanced-setting-custom-nonce"
       >
@@ -368,7 +368,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[7]}
+        ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-auto-lock"
       >
@@ -455,7 +455,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[8]}
+        ref={this.settingsRefs[7]}
         className="settings-page__content-row"
         data-testId="ledger-live-control"
       >
@@ -521,7 +521,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[9]}
+        ref={this.settingsRefs[8]}
         className="settings-page__content-row"
         data-testid="advanced-setting-dismiss-reminder"
       >
@@ -565,7 +565,7 @@ export default class AdvancedTab extends PureComponent {
     };
     return (
       <div
-        ref={this.settingsRefs[10]}
+        ref={this.settingsRefs[9]}
         className="settings-page__content-row"
         data-testid="advanced-setting-toggle-ethsign"
       >
@@ -644,7 +644,7 @@ export default class AdvancedTab extends PureComponent {
     const { t } = this.context;
     return (
       <div
-        ref={this.settingsRefs[11]}
+        ref={this.settingsRefs[10]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-backup"
       >
@@ -684,7 +684,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[12]}
+        ref={this.settingsRefs[11]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-restore"
       >
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index 967b640c8..0e6dcbfae 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -105,7 +105,10 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <>
-        <div className="settings-page__security-tab-sub-header">
+        <div
+          ref={this.settingsRefs[0]}
+          className="settings-page__security-tab-sub-header"
+        >
           {t('secretRecoveryPhrase')}
         </div>
         <div className="settings-page__content-padded">
@@ -262,7 +265,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[5]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-choose-your-network"
       >
@@ -345,7 +348,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[6]}
+        ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="setting-ipfs-gateway"
       >
@@ -377,7 +380,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[4]}
+        ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-gas-fee-estimation"
       >
@@ -427,7 +430,7 @@ export default class SecurityTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[8]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[7]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('useMultiAccountBalanceChecker')}</span>
           <div className="settings-page__content-description">
@@ -463,7 +466,7 @@ export default class SecurityTab extends PureComponent {
     const { useCurrencyRateCheck, setUseCurrencyRateCheck } = this.props;
 
     return (
-      <div ref={this.settingsRefs[9]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[8]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('currencyRateCheckToggle')}</span>
           <div className="settings-page__content-description">
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.js b/ui/pages/settings/snaps/view-snap/view-snap.js
index 0dd7dad5e..5761fdea3 100644
--- a/ui/pages/settings/snaps/view-snap/view-snap.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.js
@@ -149,8 +149,10 @@ function ViewSnap() {
       <Box className="view-snap__permissions" marginTop={12}>
         <Text variant={TextVariant.bodyLgMedium}>{t('permissions')}</Text>
         <SnapPermissionsList
+          snapId={decodedSnapId}
           permissions={permissions ?? {}}
           targetSubjectMetadata={targetSubjectMetadata}
+          showOptions
         />
       </Box>
       <Box className="view-snap__connected-sites" marginTop={12}>
diff --git a/ui/pages/settings/snaps/view-snap/view-snap.test.js b/ui/pages/settings/snaps/view-snap/view-snap.test.js
index c68170d7a..00f28ee5f 100644
--- a/ui/pages/settings/snaps/view-snap/view-snap.test.js
+++ b/ui/pages/settings/snaps/view-snap/view-snap.test.js
@@ -46,7 +46,7 @@ describe('ViewSnap', () => {
       getByText('An example Snap that signs messages using BLS.'),
     ).toBeDefined();
     // Snap version info
-    expect(getByText('v5.1.2')).toBeDefined();
+    expect(getByText('5.1.2')).toBeDefined();
     // Enable Snap
     expect(getByText('Enabled')).toBeDefined();
     expect(container.getElementsByClassName('toggle-button')?.length).toBe(1);
diff --git a/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
new file mode 100644
index 000000000..67d680015
--- /dev/null
+++ b/ui/pages/token-allowance/__snapshots__/token-allowance.test.js.snap
@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TokenAllowancePage should match snapshot 1`] = `
+<div>
+  <div
+    class="box token-allowance-container page-container box--flex-direction-row"
+  >
+    <div
+      class="box box--flex-direction-row"
+    >
+      <div
+        class="confirm-page-container-navigation"
+        style="display: none;"
+      >
+        <div
+          class="confirm-page-container-navigation__container"
+          data-testid="navigation-container"
+          style="visibility: hidden;"
+        >
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="first-page"
+          >
+            <i
+              class="fa fa-angle-double-left fa-2x"
+            />
+          </button>
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="previous-page"
+          >
+            <i
+              class="fa fa-angle-left fa-2x"
+            />
+          </button>
+        </div>
+        <div
+          class="confirm-page-container-navigation__textcontainer"
+        >
+          <div
+            class="confirm-page-container-navigation__navtext"
+          >
+            0
+             
+            of
+             
+            0
+          </div>
+          <div
+            class="confirm-page-container-navigation__longtext"
+          >
+            requests waiting to be acknowledged
+          </div>
+        </div>
+        <div
+          class="confirm-page-container-navigation__container"
+          style="visibility: hidden;"
+        >
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="next-page"
+          >
+            <i
+              class="fa fa-angle-right fa-2x"
+            />
+          </button>
+          <button
+            class="confirm-page-container-navigation__arrow"
+            data-testid="last-page"
+          >
+            <i
+              class="fa fa-angle-double-right fa-2x"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="box box--padding-right-4 box--padding-left-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
+    >
+      <div
+        class="box box--flex-direction-row"
+      />
+      <div
+        class="box box--flex-direction-row box--text-align-end"
+      >
+        <h6
+          class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-muted"
+        >
+          1
+           
+          of
+           2
+        </h6>
+      </div>
+    </div>
+    <div
+      class="box network-account-balance-header box--padding-4 box--display-flex box--flex-direction-row box--justify-content-space-between box--align-items-center"
+    >
+      <div
+        class="box box--display-flex box--gap-2 box--flex-direction-row box--align-items-center"
+      >
+        <div
+          class="box box--display-flex box--flex-direction-row box--align-items-center"
+        >
+          <div
+            class=""
+          >
+            <div
+              class="identicon"
+              style="height: 32px; width: 32px; border-radius: 16px;"
+            >
+              <div
+                style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(250, 58, 0);"
+              >
+                <svg
+                  height="32"
+                  width="32"
+                  x="0"
+                  y="0"
+                >
+                  <rect
+                    fill="#18CDF2"
+                    height="32"
+                    transform="translate(-1.04839350379394 -3.3042840694604987) rotate(328.9 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#035E56"
+                    height="32"
+                    transform="translate(-18.298461708832043 10.5924618717486) rotate(176.2 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                  <rect
+                    fill="#F26602"
+                    height="32"
+                    transform="translate(16.667842018223922 -14.205139722997082) rotate(468.9 16 16)"
+                    width="32"
+                    x="0"
+                    y="0"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="network-account-balance-header__network-account__ident-icon-ethereum--gray"
+          >
+            <span
+              class="icon-with-fallback__fallback"
+            >
+              M
+            </span>
+          </div>
+        </div>
+        <div
+          class="box box--display-flex box--flex-direction-column box--align-items-flex-start"
+        >
+          <h6
+            class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+          >
+            mainnet
+          </h6>
+          <h6
+            class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+          >
+            Account 1
+          </h6>
+        </div>
+      </div>
+      <div
+        class="box box--display-flex box--flex-direction-column box--align-items-flex-end"
+      >
+        <h6
+          class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
+        >
+          Balance
+        </h6>
+        <h6
+          align="end"
+          class="box mm-text mm-text--body-sm mm-text--font-weight-bold box--flex-direction-row box--color-text-default"
+        >
+          10
+           
+          TST
+        </h6>
+      </div>
+    </div>
+    <div
+      class="box box--display-flex box--flex-direction-row box--justify-content-center"
+    >
+      <div
+        class="box token-allowance-container__icon-display-content box--margin-top-6 box--margin-right-12 box--margin-bottom-8 box--margin-left-12 box--padding-top-2 box--padding-right-4 box--padding-bottom-2 box--padding-left-2 box--display-flex box--flex-direction-row box--align-items-center box--border-style-solid box--border-color-border-muted box--border-width-1"
+      >
+        <div
+          class=""
+        >
+          <img
+            alt="https://metamask.github.io"
+            class="url-icon token-allowance-container__icon-display-content__siteimage-identicon"
+            src="https://metamask.github.io/test-dapp/metamask-fox.svg"
+          />
+        </div>
+        <h6
+          class="box mm-text mm-text--body-sm box--margin-left-1 box--flex-direction-row box--color-text-alternative"
+        >
+          https://metamask.github.io
+        </h6>
+      </div>
+    </div>
+    <div
+      class="box box--margin-right-4 box--margin-left-4 box--flex-direction-row"
+    >
+      <h3
+        align="center"
+        class="box mm-text mm-text--heading-md box--flex-direction-row box--color-text-default"
+      >
+        <span>
+           
+          Spending cap request for your 
+          <div
+            class="box box--margin-top-4 box--flex-direction-row"
+          >
+            <div
+              class="box contract-token-values box--display-flex box--gap-2 box--flex-direction-row box--justify-content-center box--align-items-center"
+            >
+              <div
+                class=""
+              >
+                <div
+                  class="identicon"
+                  style="height: 24px; width: 24px; border-radius: 12px;"
+                >
+                  <div
+                    style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 24px; height: 24px; display: inline-block; background: rgb(242, 206, 2);"
+                  >
+                    <svg
+                      height="24"
+                      width="24"
+                      x="0"
+                      y="0"
+                    >
+                      <rect
+                        fill="#186FF2"
+                        height="24"
+                        transform="translate(4.5535541527659795 -0.012406777909352561) rotate(501.9 12 12)"
+                        width="24"
+                        x="0"
+                        y="0"
+                      />
+                      <rect
+                        fill="#F97101"
+                        height="24"
+                        transform="translate(-10.003810991077078 6.326210026231173) rotate(323.7 12 12)"
+                        width="24"
+                        x="0"
+                        y="0"
+                      />
+                      <rect
+                        fill="#FB1832"
+                        height="24"
+                        transform="translate(-22.151479903389234 -4.322407331572157) rotate(370.5 12 12)"
+                        width="24"
+                        x="0"
+                        y="0"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <h2
+                class="box box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--color-text-alternative"
+              >
+                TST
+              </h2>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-1"
+                  class=""
+                  data-original-title="Copy to clipboard"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <button
+                    aria-label="Copy to clipboard"
+                    class="box mm-button-icon mm-button-icon--size-lg box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
+                  >
+                    <span
+                      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+                      style="mask-image: url('./images/icons/copy.svg');"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div>
+                <div
+                  aria-describedby="tippy-tooltip-2"
+                  class=""
+                  data-original-title="Open in block explorer"
+                  data-tooltipped=""
+                  style="display: inline;"
+                  tabindex="0"
+                >
+                  <button
+                    aria-label="Open in block explorer"
+                    class="box mm-button-icon mm-button-icon--size-lg box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg"
+                  >
+                    <span
+                      class="box mm-icon mm-icon--size-lg box--display-inline-block box--flex-direction-row box--color-inherit"
+                      style="mask-image: url('./images/icons/export.svg');"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+           
+        </span>
+      </h3>
+    </div>
+    <div
+      class="box box--margin-top-1 box--display-flex box--flex-direction-row box--justify-content-center"
+    >
+      <a
+        class="button btn-link token-allowance-container__verify-link"
+        role="button"
+        tabindex="0"
+      >
+        <h6
+          class="box mm-text mm-text--body-sm box--flex-direction-row box--color-primary-default"
+        >
+          Verify third-party details
+        </h6>
+      </a>
+    </div>
+    <div
+      class="box box--margin-4 box--sm:margin-4 box--md:margin-3 box--lg:margin-4 box--flex-direction-row"
+    >
+      <div
+        class="box custom-spending-cap box--padding-top-2 box--padding-right-6 box--padding-left-6 box--display-flex box--gap-2 box--flex-direction-column box--align-items-flex-start box--background-color-background-alternative box--rounded-sm"
+      >
+        <div
+          class="box custom-spending-cap__input box--display-block box--flex-direction-row box--justify-content-center"
+        >
+          <label
+            for="custom-spending-cap"
+          >
+            <div
+              class="form-field"
+            >
+              <div
+                class="mm-box"
+              >
+                <div
+                  class="form-field__heading"
+                >
+                  <div
+                    class="mm-box form-field__heading-title mm-box--display-flex mm-box--align-items-baseline"
+                  >
+                    <h6
+                      class="box mm-text mm-text--body-sm-bold box--display-inline-block box--flex-direction-row box--color-text-default"
+                      for="custom-spending-cap"
+                      tag="label"
+                    >
+                      Custom spending cap
+                    </h6>
+                    
+                    <div
+                      class="box box--display-inline-block box--flex-direction-row"
+                    >
+                      <div>
+                        <div
+                          aria-describedby="tippy-tooltip-3"
+                          class=""
+                          data-original-title="null"
+                          data-tooltipped=""
+                          style="display: inline;"
+                          tabindex="0"
+                        >
+                          <span
+                            class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
+                            style="mask-image: url('./images/icons/question.svg');"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <input
+                  class="form-field__input"
+                  data-testid="custom-spending-cap-input"
+                  id="custom-spending-cap"
+                  placeholder="Enter a number"
+                  type="text"
+                  value="7"
+                />
+                
+              </div>
+            </div>
+            <div
+              class="box custom-spending-cap__max box--margin-left-auto box--padding-right-4 box--padding-bottom-2 box--flex-direction-row box--text-align-end box--width-max"
+            >
+              <button
+                class="box mm-text mm-button-base mm-button-link mm-button-link--size-auto mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+              >
+                Max
+              </button>
+            </div>
+            <div
+              class="box custom-spending-cap__description box--flex-direction-row"
+            >
+              <h6
+                class="box mm-text mm-text--body-sm box--padding-top-2 box--flex-direction-row box--color-text-default"
+              >
+                <span>
+                   
+                  This allows the third party to spend 
+                  <h6
+                    class="box mm-text custom-spending-cap__input-value-and-token-name mm-text--body-sm-bold box--flex-direction-row box--color-text-default"
+                  >
+                    7
+                     
+                    TST
+                  </h6>
+                   from your current balance.
+                   
+                </span>
+              </h6>
+              <a
+                class="box mm-text mm-button-base mm-button-base--size-sm mm-button-link mm-text--body-md box--margin-bottom-2 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
+                href="https://support.metamask.io/hc/en-us/articles/6055177143579-How-to-customize-token-approvals-with-a-spending-cap"
+                target="_blank"
+              >
+                Learn more
+              </a>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div
+      class="box box--display-flex box--flex-direction-row box--justify-content-center"
+    >
+      <a
+        class="button btn-link token-allowance-container__view-details"
+        role="button"
+        tabindex="0"
+      >
+        <h6
+          class="box mm-text mm-text--body-sm box--margin-right-1 box--flex-direction-row box--color-primary-default"
+        >
+          View details
+        </h6>
+        <i
+          class="fa fa-sm fa-angle-down"
+        />
+      </a>
+    </div>
+    <div
+      class="page-container__footer"
+    >
+      <footer>
+        <button
+          class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel"
+          data-testid="page-container-footer-cancel"
+          role="button"
+          tabindex="0"
+        >
+          Reject
+        </button>
+        <button
+          class="button btn--rounded btn-primary page-container__footer-button"
+          data-testid="page-container-footer-next"
+          role="button"
+          tabindex="0"
+        >
+          Next
+        </button>
+      </footer>
+    </div>
+  </div>
+</div>
+`;
diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js
index 28fef706f..1186077d8 100644
--- a/ui/pages/token-allowance/token-allowance.js
+++ b/ui/pages/token-allowance/token-allowance.js
@@ -29,7 +29,6 @@ import {
   transactionFeeSelector,
   getKnownMethodData,
   getRpcPrefsForCurrentProvider,
-  getCustomTokenAmount,
   getUnapprovedTxCount,
   getUnapprovedTransactions,
   getUseCurrencyRateCheck,
@@ -101,6 +100,9 @@ export default function TokenAllowance({
   const { hostname } = new URL(origin);
   const thisOriginIsAllowedToSkipFirstPage = ALLOWED_HOSTS.includes(hostname);
 
+  const [customSpendingCap, setCustomSpendingCap] = useState(
+    dappProposedTokenAmount,
+  );
   const [showContractDetails, setShowContractDetails] = useState(false);
   const [inputChangeInProgress, setInputChangeInProgress] = useState(false);
   const [showFullTxDetails, setShowFullTxDetails] = useState(false);
@@ -122,24 +124,20 @@ export default function TokenAllowance({
   const unapprovedTxCount = useSelector(getUnapprovedTxCount);
   const unapprovedTxs = useSelector(getUnapprovedTransactions);
   const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
-  let customTokenAmount = useSelector(getCustomTokenAmount);
-  if (thisOriginIsAllowedToSkipFirstPage && dappProposedTokenAmount) {
-    customTokenAmount = dappProposedTokenAmount;
-  }
 
   const replaceCommaToDot = (inputValue) => {
     return inputValue.replace(/,/gu, '.');
   };
 
   let customPermissionAmount = NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX.test(
-    customTokenAmount,
+    customSpendingCap,
   )
-    ? replaceCommaToDot(customTokenAmount).toString()
+    ? replaceCommaToDot(customSpendingCap).toString()
     : '0';
 
   const maxTokenAmount = calcTokenAmount(MAX_TOKEN_ALLOWANCE_AMOUNT, decimals);
-  if (customTokenAmount.length > 1 && Number(customTokenAmount)) {
-    const customSpendLimitNumber = new BigNumber(customTokenAmount);
+  if (customSpendingCap.length > 1 && Number(customSpendingCap)) {
+    const customSpendLimitNumber = new BigNumber(customSpendingCap);
     if (customSpendLimitNumber.greaterThan(maxTokenAmount)) {
       customPermissionAmount = 0;
     }
@@ -170,7 +168,7 @@ export default function TokenAllowance({
   const { balanceError } = useGasFeeContext();
 
   const disableNextButton =
-    isFirstPage && (customTokenAmount === '' || errorText !== '');
+    isFirstPage && (customSpendingCap === '' || errorText !== '');
 
   const disableApproveButton = !isFirstPage && balanceError;
 
@@ -212,9 +210,9 @@ export default function TokenAllowance({
       fullTxData.originalApprovalAmount = dappProposedTokenAmount;
     }
 
-    if (customTokenAmount) {
-      fullTxData.customTokenAmount = customTokenAmount;
-      fullTxData.finalApprovalAmount = customTokenAmount;
+    if (customSpendingCap) {
+      fullTxData.customTokenAmount = customSpendingCap;
+      fullTxData.finalApprovalAmount = customSpendingCap;
     } else if (dappProposedTokenAmount !== undefined) {
       fullTxData.finalApprovalAmount = dappProposedTokenAmount;
     }
@@ -255,7 +253,7 @@ export default function TokenAllowance({
     );
   };
 
-  const isEmpty = customTokenAmount === '';
+  const isEmpty = customSpendingCap === '';
 
   const renderContractTokenValues = (
     <Box marginTop={4} key={tokenAddress}>
@@ -359,17 +357,12 @@ export default function TokenAllowance({
       <Box marginLeft={4} marginRight={4}>
         <Text variant={TextVariant.headingMd} align={TextAlign.Center}>
           {isFirstPage ? (
-            t('setSpendingCap', [renderContractTokenValues])
+            t('spendingCapRequest', [renderContractTokenValues])
           ) : (
             <Box>
-              {customTokenAmount === '0' || isEmpty ? (
-                t('revokeSpendingCap', [renderContractTokenValues])
-              ) : (
-                <Box>
-                  {t('reviewSpendingCap')}
-                  {renderContractTokenValues}
-                </Box>
-              )}
+              {customSpendingCap === '0' || isEmpty
+                ? t('revokeSpendingCap', [renderContractTokenValues])
+                : t('spendingCapRequest', [renderContractTokenValues])}
             </Box>
           )}
         </Text>
@@ -405,15 +398,17 @@ export default function TokenAllowance({
             passTheErrorText={(value) => setErrorText(value)}
             decimals={decimals}
             setInputChangeInProgress={setInputChangeInProgress}
+            customSpendingCap={customSpendingCap}
+            setCustomSpendingCap={setCustomSpendingCap}
           />
         ) : (
           <ReviewSpendingCap
             tokenName={tokenSymbol}
             currentTokenBalance={currentTokenBalance}
             tokenValue={
-              isNaN(parseFloat(customTokenAmount))
+              isNaN(parseFloat(customSpendingCap))
                 ? dappProposedTokenAmount
-                : replaceCommaToDot(customTokenAmount)
+                : replaceCommaToDot(customSpendingCap)
             }
             onEdit={() => handleBackClick()}
           />
diff --git a/ui/pages/token-allowance/token-allowance.test.js b/ui/pages/token-allowance/token-allowance.test.js
index a9be836ec..bc258d132 100644
--- a/ui/pages/token-allowance/token-allowance.test.js
+++ b/ui/pages/token-allowance/token-allowance.test.js
@@ -187,12 +187,20 @@ describe('TokenAllowancePage', () => {
     store = configureMockStore()(state);
   });
 
-  it('should render title "Set a spending cap for your" in token allowance page', () => {
+  it('should match snapshot', () => {
+    const { container } = renderWithProvider(
+      <TokenAllowance {...props} />,
+      store,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render title "Spending cap request for your" in token allowance page', () => {
     const { getByText } = renderWithProvider(
       <TokenAllowance {...props} />,
       store,
     );
-    expect(getByText('Set a spending cap for your')).toBeInTheDocument();
+    expect(getByText('Spending cap request for your')).toBeInTheDocument();
   });
 
   it('should render reject button', () => {
@@ -215,37 +223,55 @@ describe('TokenAllowancePage', () => {
     expect(getByText('Function: Approve')).toBeInTheDocument();
   });
 
-  it('should click Use default and set input value to default', () => {
-    const { getByText, getByTestId } = renderWithProvider(
+  it('should load the page with dappProposedAmount prefilled and "Use site suggestion" should not be displayed', () => {
+    const { queryByText, getByTestId } = renderWithProvider(
       <TokenAllowance {...props} />,
       store,
     );
 
     act(() => {
-      const useDefault = getByText('Use default');
-      fireEvent.click(useDefault);
+      const useSiteSuggestion = queryByText('Use site suggestion');
+      expect(useSiteSuggestion).not.toBeInTheDocument();
     });
 
     const input = getByTestId('custom-spending-cap-input');
-    expect(input.value).toBe('1');
+    expect(input.value).toBe('7');
   });
 
-  it('should call back button when button is clicked and return to previous page', () => {
+  it('should click Use site suggestion and set input value to default', () => {
     const { getByText, getByTestId } = renderWithProvider(
       <TokenAllowance {...props} />,
       store,
     );
-
     const textField = getByTestId('custom-spending-cap-input');
+    expect(textField.value).toBe('7');
     fireEvent.change(textField, { target: { value: '1' } });
+    expect(textField.value).toBe('1');
+
+    act(() => {
+      const useSiteSuggestion = getByText('Use site suggestion');
+      expect(useSiteSuggestion).toBeInTheDocument();
+      fireEvent.click(useSiteSuggestion);
+    });
+
+    expect(textField.value).toBe('7');
+  });
+
+  it('should call back button when button is clicked and return to previous page', () => {
+    const { getByText } = renderWithProvider(
+      <TokenAllowance {...props} />,
+      store,
+    );
 
     const nextButton = getByText('Next');
     fireEvent.click(nextButton);
 
+    expect(getByText('Site requested spending cap')).toBeInTheDocument();
+
     const backButton = getByText('< Back');
     fireEvent.click(backButton);
 
-    expect(getByText('Set a spending cap for your')).toBeInTheDocument();
+    expect(getByText('Spending cap request for your')).toBeInTheDocument();
   });
 
   it('should click Verify third-party details and show popup Third-party details, then close popup', () => {
@@ -265,14 +291,11 @@ describe('TokenAllowancePage', () => {
   });
 
   it('should show ledger info text if the sending address is ledger', () => {
-    const { queryByText, getByText, getByTestId } = renderWithProvider(
+    const { queryByText, getByText } = renderWithProvider(
       <TokenAllowance {...props} fromAddressIsLedger />,
       store,
     );
 
-    const textField = getByTestId('custom-spending-cap-input');
-    fireEvent.change(textField, { target: { value: '1' } });
-
     expect(queryByText('Prior to clicking confirm:')).toBeNull();
 
     const nextButton = getByText('Next');
@@ -282,14 +305,11 @@ describe('TokenAllowancePage', () => {
   });
 
   it('should not show ledger info text if the sending address is not ledger', () => {
-    const { queryByText, getByText, getByTestId } = renderWithProvider(
+    const { queryByText, getByText } = renderWithProvider(
       <TokenAllowance {...props} fromAddressIsLedger={false} />,
       store,
     );
 
-    const textField = getByTestId('custom-spending-cap-input');
-    fireEvent.change(textField, { target: { value: '1' } });
-
     expect(queryByText('Prior to clicking confirm:')).toBeNull();
 
     const nextButton = getByText('Next');
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index e2c7b08b2..afdf847f9 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -34,8 +34,8 @@ import {
   CURRENCY_SYMBOLS,
   TEST_NETWORK_TICKER_MAP,
   LINEA_GOERLI_TOKEN_IMAGE_URL,
-  LINEA_MAINNET_TOKEN_IMAGE_URL,
   LINEA_MAINNET_DISPLAY_NAME,
+  LINEA_MAINNET_TOKEN_IMAGE_URL,
 } from '../../shared/constants/network';
 import {
   WebHIDConnectedStatuses,
@@ -1176,46 +1176,17 @@ export function getCurrentNetwork(state) {
 }
 
 export function getAllEnabledNetworks(state) {
+  const nonTestNetworks = getNonTestNetworks(state);
   const allNetworks = getAllNetworks(state);
   const showTestnetNetworks = getShowTestNetworks(state);
 
-  return showTestnetNetworks
-    ? allNetworks
-    : allNetworks.filter(
-        (network) => TEST_CHAINS.includes(network.chainId) === false,
-      );
+  return showTestnetNetworks ? allNetworks : nonTestNetworks;
 }
 
-export function getAllNetworks(state) {
+export function getTestNetworks(state) {
   const networkConfigurations = getNetworkConfigurations(state) || {};
 
-  const networks = [
-    // Mainnet always first
-    {
-      chainId: CHAIN_IDS.MAINNET,
-      nickname: MAINNET_DISPLAY_NAME,
-      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
-      rpcPrefs: {
-        imageUrl: ETH_TOKEN_IMAGE_URL,
-      },
-      providerType: NETWORK_TYPES.MAINNET,
-      ticker: CURRENCY_SYMBOLS.ETH,
-    },
-    {
-      chainId: CHAIN_IDS.LINEA_MAINNET,
-      nickname: LINEA_MAINNET_DISPLAY_NAME,
-      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
-      rpcPrefs: {
-        imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
-      },
-      providerType: NETWORK_TYPES.LINEA_MAINNET,
-      ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
-    },
-    // Custom networks added by the user
-    ...Object.values(networkConfigurations).filter(
-      ({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
-    ),
-    // Test networks
+  return [
     {
       chainId: CHAIN_IDS.GOERLI,
       nickname: GOERLI_DISPLAY_NAME,
@@ -1245,6 +1216,47 @@ export function getAllNetworks(state) {
       ({ chainId }) => chainId === CHAIN_IDS.LOCALHOST,
     ),
   ];
+}
+
+export function getNonTestNetworks(state) {
+  const networkConfigurations = getNetworkConfigurations(state) || {};
+
+  return [
+    // Mainnet always first
+    {
+      chainId: CHAIN_IDS.MAINNET,
+      nickname: MAINNET_DISPLAY_NAME,
+      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
+      rpcPrefs: {
+        imageUrl: ETH_TOKEN_IMAGE_URL,
+      },
+      providerType: NETWORK_TYPES.MAINNET,
+      ticker: CURRENCY_SYMBOLS.ETH,
+    },
+    {
+      chainId: CHAIN_IDS.LINEA_MAINNET,
+      nickname: LINEA_MAINNET_DISPLAY_NAME,
+      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
+      rpcPrefs: {
+        imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
+      },
+      providerType: NETWORK_TYPES.LINEA_MAINNET,
+      ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
+    },
+    // Custom networks added by the user
+    ...Object.values(networkConfigurations).filter(
+      ({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
+    ),
+  ];
+}
+
+export function getAllNetworks(state) {
+  const networks = [
+    // Mainnet and custom networks
+    ...getNonTestNetworks(state),
+    // Test networks
+    ...getTestNetworks(state),
+  ];
 
   return networks;
 }
diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
index 8819a9769..1442528f9 100644
--- a/ui/selectors/selectors.test.js
+++ b/ui/selectors/selectors.test.js
@@ -317,7 +317,7 @@ describe('Selectors', () => {
   });
 
   describe('#getAllEnabledNetworks', () => {
-    it('returns only MainNet with showTestNetworks off', () => {
+    it('returns only Mainnet and Linea with showTestNetworks off', () => {
       const networks = selectors.getAllEnabledNetworks({
         metamask: {
           preferences: {
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index 509127bf6..6594ed390 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -1126,11 +1126,21 @@ export function enableSnap(
     await forceUpdateMetamaskState(dispatch);
   };
 }
+///: END:ONLY_INCLUDE_IN
 
+// TODO: Clean this up.
+///: BEGIN:ONLY_INCLUDE_IN(snaps)
 export function removeSnap(
   snapId: string,
 ): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
-  return async (dispatch: MetaMaskReduxDispatch, getState) => {
+  return async (
+    dispatch: MetaMaskReduxDispatch,
+    ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
+    getState,
+    ///: END:ONLY_INCLUDE_IN
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
+  ) => {
     dispatch(showLoadingIndication());
     ///: END:ONLY_INCLUDE_IN
     ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
@@ -1140,7 +1150,9 @@ export function removeSnap(
 
     const isAccountsSnap =
       subjects[snapId]?.permissions?.snap_manageAccounts !== undefined;
+    ///: END:ONLY_INCLUDE_IN
 
+    ///: BEGIN:ONLY_INCLUDE_IN(snaps)
     try {
       ///: END:ONLY_INCLUDE_IN
       ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
@@ -1240,6 +1252,19 @@ export function markNotificationsAsRead(
   };
 }
 
+export function revokeDynamicSnapPermissions(
+  snapId: string,
+  permissionNames: string[],
+): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    await submitRequestToBackground('revokeDynamicSnapPermissions', [
+      snapId,
+      permissionNames,
+    ]);
+    await forceUpdateMetamaskState(dispatch);
+  };
+}
+
 ///: END:ONLY_INCLUDE_IN
 ///: BEGIN:ONLY_INCLUDE_IN(desktop)
 
@@ -2965,6 +2990,22 @@ export function setOpenSeaEnabled(
   };
 }
 
+// DetectTokenController
+export function detectNewTokens(): ThunkAction<
+  void,
+  MetaMaskReduxState,
+  unknown,
+  AnyAction
+> {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    dispatch(showLoadingIndication());
+    log.debug(`background.detectNewTokens`);
+    await submitRequestToBackground('detectNewTokens');
+    dispatch(hideLoadingIndication());
+    await forceUpdateMetamaskState(dispatch);
+  };
+}
+
 export function detectNfts(): ThunkAction<
   void,
   MetaMaskReduxState,
@@ -4262,11 +4303,6 @@ export function dismissSmartTransactionsErrorMessage(): Action {
   };
 }
 
-// DetectTokenController
-export async function detectNewTokens() {
-  return submitRequestToBackground('detectNewTokens');
-}
-
 // App state
 export function hideTestNetMessage() {
   return submitRequestToBackground('setShowTestnetMessageInDropdown', [false]);
diff --git a/ui/store/institutional/institution-actions.test.js b/ui/store/institutional/institution-actions.test.js
index 6decdfa87..b857d34dc 100644
--- a/ui/store/institutional/institution-actions.test.js
+++ b/ui/store/institutional/institution-actions.test.js
@@ -6,7 +6,7 @@ import { _setBackgroundConnection } from '../action-queue';
 import {
   showInteractiveReplacementTokenModal,
   showCustodyConfirmLink,
-  checkForUnapprovedTypedMessages,
+  checkForUnapprovedMessages,
   updateCustodyState,
 } from './institution-actions';
 
@@ -153,8 +153,8 @@ describe('#InstitutionActions', () => {
   });
 });
 
-describe('#checkForUnapprovedTypedMessages', () => {
-  it('calls checkForUnapprovedTypedMessages and returns the messageData', async () => {
+describe('#checkForUnapprovedMessages', () => {
+  it('calls checkForUnapprovedMessages and returns the messageData', async () => {
     const messageData = {
       id: 1,
       type: 'tx',
@@ -166,7 +166,7 @@ describe('#checkForUnapprovedTypedMessages', () => {
       status: 'unapproved',
     };
 
-    expect(checkForUnapprovedTypedMessages(messageData, { msg: 'msg' })).toBe(
+    expect(checkForUnapprovedMessages(messageData, { msg: 'msg' })).toBe(
       messageData,
     );
   });
diff --git a/ui/store/institutional/institution-actions.ts b/ui/store/institutional/institution-actions.ts
index 135689d78..6e75dbc0a 100644
--- a/ui/store/institutional/institution-actions.ts
+++ b/ui/store/institutional/institution-actions.ts
@@ -109,18 +109,18 @@ export function updateCustodyState(
   }
 }
 
-export function checkForUnapprovedTypedMessages(
+export function checkForUnapprovedMessages(
   msgData: TemporaryMessageDataType['msgParams'],
-  unapprovedTypedMessages: MessagesIndexedById,
+  unapprovedMessages: MessagesIndexedById,
 ) {
-  const custodianUnapprovedMessages = Object.keys(unapprovedTypedMessages)
-    .map((key) => unapprovedTypedMessages[key])
+  const custodianUnapprovedMessages = Object.keys(unapprovedMessages)
+    .map((key) => unapprovedMessages[key])
     .filter((message) => message.custodyId && message.status === 'unapproved');
 
   if (custodianUnapprovedMessages && custodianUnapprovedMessages.length > 0) {
     return {
       ...msgData,
-      custodyId: unapprovedTypedMessages[msgData.metamaskId]?.custodyId,
+      custodyId: unapprovedMessages[msgData.metamaskId]?.custodyId,
     };
   }
 
diff --git a/ui/store/institutional/institution-background.ts b/ui/store/institutional/institution-background.ts
index 5a6156e29..b5d9d7177 100644
--- a/ui/store/institutional/institution-background.ts
+++ b/ui/store/institutional/institution-background.ts
@@ -11,7 +11,7 @@ import {
   callBackgroundMethod,
   submitRequestToBackground,
 } from '../action-queue';
-import { MetaMaskReduxState } from '../store';
+import { MetaMaskReduxDispatch, MetaMaskReduxState } from '../store';
 import { isErrorWithMessage } from '../../../shared/modules/error';
 
 export function showInteractiveReplacementTokenBanner({
@@ -21,7 +21,7 @@ export function showInteractiveReplacementTokenBanner({
   url: string;
   oldRefreshToken: string;
 }): ThunkAction<void, MetaMaskReduxState, unknown, AnyAction> {
-  return async (dispatch) => {
+  return async (dispatch: MetaMaskReduxDispatch) => {
     try {
       await submitRequestToBackground('showInteractiveReplacementTokenBanner', [
         url,
@@ -37,7 +37,7 @@ export function showInteractiveReplacementTokenBanner({
 }
 
 export function setTypedMessageInProgress(msgId: string) {
-  return async (dispatch: any) => {
+  return async (dispatch: MetaMaskReduxDispatch) => {
     dispatch(showLoadingIndication());
     try {
       await submitRequestToBackground('setTypedMessageInProgress', [msgId]);
@@ -51,6 +51,21 @@ export function setTypedMessageInProgress(msgId: string) {
   };
 }
 
+export function setPersonalMessageInProgress(msgId: string) {
+  return async (dispatch: MetaMaskReduxDispatch) => {
+    dispatch(showLoadingIndication());
+    try {
+      await submitRequestToBackground('setPersonalMessageInProgress', [msgId]);
+    } catch (error: any) {
+      log.error(error);
+      dispatch(displayWarning(error.message));
+    } finally {
+      await forceUpdateMetamaskState(dispatch);
+      dispatch(hideLoadingIndication());
+    }
+  };
+}
+
 /**
  * A factory that contains all MMI actions ready to use
  * Example usage:
diff --git a/yarn.lock b/yarn.lock
index 7111efda5..db6d24afd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4007,9 +4007,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/controller-utils@npm:^4.0.0, @metamask/controller-utils@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@metamask/controller-utils@npm:4.0.1"
+"@metamask/controller-utils@npm:^4.0.0, @metamask/controller-utils@npm:^4.0.1, @metamask/controller-utils@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@metamask/controller-utils@npm:4.1.0"
   dependencies:
     "@metamask/utils": ^5.0.2
     "@spruceid/siwe-parser": 1.1.3
@@ -4020,7 +4020,7 @@ __metadata:
     ethereumjs-util: ^7.0.10
     ethjs-unit: ^0.1.6
     fast-deep-equal: ^3.1.3
-  checksum: c0c3b8b5a363aff6a7996e349f47fdc77d3b31846546dc937669a2ab2306c3ed3c2122cf682a1146c6ba3eeeabe491f8ba7aa0157d62843689242779bb506017
+  checksum: b4975e6ca860b691931254aa749e8c4faddd04279609cf197155b38150e55da0e966bf9b2d61ee1cd070f79d16e0305d5a0ff1747e0b4ab2e1c3ab46ca84e4d7
   languageName: node
   linkType: hard
 
@@ -4285,13 +4285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/gas-fee-controller@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "@metamask/gas-fee-controller@npm:6.0.0"
+"@metamask/gas-fee-controller@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@metamask/gas-fee-controller@npm:6.0.1"
   dependencies:
     "@metamask/base-controller": ^3.0.0
-    "@metamask/controller-utils": ^4.0.0
-    "@metamask/network-controller": ^9.0.0
+    "@metamask/controller-utils": ^4.1.0
+    "@metamask/network-controller": ^10.3.0
     "@metamask/utils": ^5.0.2
     "@types/uuid": ^8.3.0
     babel-runtime: ^6.26.0
@@ -4301,8 +4301,8 @@ __metadata:
     immer: ^9.0.6
     uuid: ^8.3.2
   peerDependencies:
-    "@metamask/network-controller": ^9.0.0
-  checksum: e7f15b0d3043e228f85cfa462c800d7332845b8d13211b1688c68a3b4b09b921aaa9b3304688dd0b7e4d9abd59f96dab0f50259a90f35c4b50321e2805c65bfb
+    "@metamask/network-controller": ^10.3.0
+  checksum: 4a9243ee6aad355b4f2ef1a1065f1444f823721a02af2e8a8f35683f60f020a280f33be15bce95b24c4aff698408aaa263070bec020019b8bef561d55bdc949c
   languageName: node
   linkType: hard
 
@@ -4355,19 +4355,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/message-manager@npm:^7.0.0":
-  version: 7.0.0
-  resolution: "@metamask/message-manager@npm:7.0.0"
+"@metamask/message-manager@npm:^7.0.0, @metamask/message-manager@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "@metamask/message-manager@npm:7.0.2"
   dependencies:
     "@metamask/base-controller": ^3.0.0
-    "@metamask/controller-utils": ^4.0.0
+    "@metamask/controller-utils": ^4.1.0
     "@metamask/utils": ^5.0.2
     "@types/uuid": ^8.3.0
     eth-sig-util: ^3.0.0
     ethereumjs-util: ^7.0.10
     jsonschema: ^1.2.4
     uuid: ^8.3.2
-  checksum: 1a7b785159d93153ef966a82bcdf9beea1a641cd663d2c1719cf6b671364f18b98c84795d23fa9872ec5e2bd9f08162c2c4d7369f46a81d12fd496b6433818a0
+  checksum: ee2f11a44fd7fae662aa72a0bfc02cb51327d1a42812c73aca291284a0dd2575836fd9e2a390e788da5e6515334e51863d839719762ceff65a56e60be14c046b
   languageName: node
   linkType: hard
 
@@ -4378,12 +4378,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/network-controller@npm:^10.1.0, @metamask/network-controller@npm:^10.2.0":
-  version: 10.2.0
-  resolution: "@metamask/network-controller@npm:10.2.0"
+"@metamask/network-controller@npm:^10.2.0, @metamask/network-controller@npm:^10.3.0":
+  version: 10.3.0
+  resolution: "@metamask/network-controller@npm:10.3.0"
   dependencies:
     "@metamask/base-controller": ^3.0.0
-    "@metamask/controller-utils": ^4.0.1
+    "@metamask/controller-utils": ^4.1.0
     "@metamask/eth-json-rpc-infura": ^8.0.0
     "@metamask/eth-json-rpc-middleware": ^11.0.0
     "@metamask/eth-json-rpc-provider": ^1.0.0
@@ -4397,7 +4397,7 @@ __metadata:
     immer: ^9.0.6
     json-rpc-engine: ^6.1.0
     uuid: ^8.3.2
-  checksum: 6474125845d838564ef60105b5914369aa650a6769df5f3f2a471839f351d798984faa5e3184054a5bfb4ec738e2a50c6fbf31f9eceb9cea4c227651105295dc
+  checksum: 0c48625af9c18be3ed2a433209db770bab02e667e251be1ef4c1f61a62c25907536ff740712bdfd799ac923a4a6bb9df5430ead8d4215507bbf30dcc7a40d53c
   languageName: node
   linkType: hard
 
@@ -4417,29 +4417,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/network-controller@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@metamask/network-controller@npm:9.0.0"
-  dependencies:
-    "@metamask/base-controller": ^3.0.0
-    "@metamask/controller-utils": ^4.0.0
-    "@metamask/eth-json-rpc-infura": ^8.0.0
-    "@metamask/eth-json-rpc-middleware": ^11.0.0
-    "@metamask/eth-json-rpc-provider": ^1.0.0
-    "@metamask/swappable-obj-proxy": ^2.1.0
-    "@metamask/utils": ^5.0.2
-    async-mutex: ^0.2.6
-    babel-runtime: ^6.26.0
-    eth-block-tracker: ^7.0.1
-    eth-query: ^2.1.2
-    eth-rpc-errors: ^4.0.2
-    immer: ^9.0.6
-    json-rpc-engine: ^6.1.0
-    uuid: ^8.3.2
-  checksum: 7548fe82990ff62d36a6c42a49442422fe3634933b6fc85b86a3bbb2788a755c73f3fa70a70ae48ddf09a70e3e33d375723980aec76e89cdf21b76b96a069b07
-  languageName: node
-  linkType: hard
-
 "@metamask/notification-controller@npm:^3.0.0":
   version: 3.0.0
   resolution: "@metamask/notification-controller@npm:3.0.0"
@@ -4644,7 +4621,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/rpc-methods-flask@npm:@metamask/rpc-methods@0.35.2-flask.1, @metamask/rpc-methods@npm:^0.35.2-flask.1":
+"@metamask/rpc-methods-flask@npm:@metamask/rpc-methods@0.36.1-flask.1, @metamask/rpc-methods@npm:^0.36.1-flask.1":
+  version: 0.36.1-flask.1
+  resolution: "@metamask/rpc-methods@npm:0.36.1-flask.1"
+  dependencies:
+    "@metamask/key-tree": ^7.1.1
+    "@metamask/permission-controller": ^4.0.0
+    "@metamask/snaps-ui": ^0.36.1-flask.1
+    "@metamask/snaps-utils": ^0.36.1-flask.1
+    "@metamask/types": ^1.1.0
+    "@metamask/utils": ^6.0.1
+    "@noble/hashes": ^1.3.1
+    eth-rpc-errors: ^4.0.3
+    superstruct: ^1.0.3
+  checksum: 1172d2783285656478ba14fc9dbebfd7ad4150826f5eddd737a6cae376cf0e1d69e7b53570c9be45d95a14cc0533269ab4f2c8c4f28e3d867cfd06d68b5a2aac
+  languageName: node
+  linkType: hard
+
+"@metamask/rpc-methods@npm:^0.35.2-flask.1":
   version: 0.35.2-flask.1
   resolution: "@metamask/rpc-methods@npm:0.35.2-flask.1"
   dependencies:
@@ -4705,7 +4699,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/signature-controller@npm:^4.0.1":
+"@metamask/signature-controller@npm:4.0.1":
   version: 4.0.1
   resolution: "@metamask/signature-controller@npm:4.0.1"
   dependencies:
@@ -4724,6 +4718,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/signature-controller@patch:@metamask/signature-controller@npm%3A4.0.1#./.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch::locator=metamask-crx%40workspace%3A.":
+  version: 4.0.1
+  resolution: "@metamask/signature-controller@patch:@metamask/signature-controller@npm%3A4.0.1#./.yarn/patches/@metamask-signature-controller-npm-4.0.1-013e64c9fd.patch::version=4.0.1&hash=7f339b&locator=metamask-crx%40workspace%3A."
+  dependencies:
+    "@metamask/approval-controller": ^3.3.0
+    "@metamask/base-controller": ^3.0.0
+    "@metamask/controller-utils": ^4.0.0
+    "@metamask/message-manager": ^7.0.0
+    "@metamask/utils": ^5.0.2
+    eth-rpc-errors: ^4.0.2
+    ethereumjs-util: ^7.0.10
+    immer: ^9.0.6
+    lodash: ^4.17.21
+  peerDependencies:
+    "@metamask/approval-controller": ^3.3.0
+  checksum: d678cf1763cfe9e13c0e5d357fcc44bd4580efc44a6fdca61ba6eed059c47c780fafaf08a075466a4886fbb9c6332544752bf7d25d515a37213c800cfc181665
+  languageName: node
+  linkType: hard
+
 "@metamask/slip44@npm:^3.0.0":
   version: 3.0.0
   resolution: "@metamask/slip44@npm:3.0.0"
@@ -4750,7 +4763,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/snaps-controllers-flask@npm:@metamask/snaps-controllers@0.35.2-flask.1, @metamask/snaps-controllers@npm:^0.35.2-flask.1":
+"@metamask/snaps-controllers-flask@npm:@metamask/snaps-controllers@0.36.1-flask.1":
+  version: 0.36.1-flask.1
+  resolution: "@metamask/snaps-controllers@npm:0.36.1-flask.1"
+  dependencies:
+    "@metamask/approval-controller": ^3.0.0
+    "@metamask/base-controller": ^3.0.0
+    "@metamask/object-multiplex": ^1.2.0
+    "@metamask/permission-controller": ^4.0.0
+    "@metamask/post-message-stream": ^6.1.2
+    "@metamask/rpc-methods": ^0.36.1-flask.1
+    "@metamask/snaps-execution-environments": ^0.36.1-flask.1
+    "@metamask/snaps-registry": ^1.2.1
+    "@metamask/snaps-utils": ^0.36.1-flask.1
+    "@metamask/utils": ^6.0.1
+    "@xstate/fsm": ^2.0.0
+    concat-stream: ^2.0.0
+    cron-parser: ^4.5.0
+    eth-rpc-errors: ^4.0.3
+    gunzip-maybe: ^1.4.2
+    immer: ^9.0.6
+    json-rpc-engine: ^6.1.0
+    json-rpc-middleware-stream: ^4.2.0
+    nanoid: ^3.1.31
+    pump: ^3.0.0
+    readable-web-to-node-stream: ^3.0.2
+    tar-stream: ^2.2.0
+  checksum: 9e7f9fa7a5989d4afda7cb6c8c7071059c2b48a2f3c6548eba0aca4ccf0103c3aa59167b1a31f905b9e8cbf79f41b9344945dd35719934083a18a85225985766
+  languageName: node
+  linkType: hard
+
+"@metamask/snaps-controllers@npm:^0.35.2-flask.1":
   version: 0.35.2-flask.1
   resolution: "@metamask/snaps-controllers@npm:0.35.2-flask.1"
   dependencies:
@@ -4831,6 +4874,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@metamask/snaps-execution-environments@npm:^0.36.1-flask.1":
+  version: 0.36.1-flask.1
+  resolution: "@metamask/snaps-execution-environments@npm:0.36.1-flask.1"
+  dependencies:
+    "@metamask/object-multiplex": ^1.2.0
+    "@metamask/post-message-stream": ^6.1.2
+    "@metamask/providers": ^11.0.0
+    "@metamask/rpc-methods": ^0.36.1-flask.1
+    "@metamask/snaps-utils": ^0.36.1-flask.1
+    "@metamask/utils": ^6.0.1
+    eth-rpc-errors: ^4.0.3
+    json-rpc-engine: ^6.1.0
+    nanoid: ^3.1.31
+    pump: ^3.0.0
+    ses: ^0.18.1
+    stream-browserify: ^3.0.0
+    superstruct: ^1.0.3
+  checksum: 1863a37df13f8c0684a5b5d281e53294869a75daa4c4b8429593aee29bff6bf4aad4365eee19a1a1e20cfa47557dc12c4e266dae74c5ab0e951a6917cf9af6e6
+  languageName: node
+  linkType: hard
+
 "@metamask/snaps-execution-environments@npm:^1.0.0-prerelease.1":
   version: 1.0.0-prerelease.1
   resolution: "@metamask/snaps-execution-environments@npm:1.0.0-prerelease.1"
@@ -4862,7 +4926,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/snaps-ui-flask@npm:@metamask/snaps-ui@0.35.2-flask.1, @metamask/snaps-ui@npm:^0.35.2-flask.1":
+"@metamask/snaps-ui-flask@npm:@metamask/snaps-ui@0.36.1-flask.1, @metamask/snaps-ui@npm:^0.36.1-flask.1":
+  version: 0.36.1-flask.1
+  resolution: "@metamask/snaps-ui@npm:0.36.1-flask.1"
+  dependencies:
+    "@metamask/utils": ^6.0.1
+    superstruct: ^1.0.3
+  checksum: 85c8426003008836e3461a6287e0199ccc083f9e84053862a2e12a7763141c1a71bfdf9c2b46607a0ae14fdcd93cff22cbee3adf5fcef9364413c91acbeb812d
+  languageName: node
+  linkType: hard
+
+"@metamask/snaps-ui@npm:^0.35.2-flask.1":
   version: 0.35.2-flask.1
   resolution: "@metamask/snaps-ui@npm:0.35.2-flask.1"
   dependencies:
@@ -4882,7 +4956,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@metamask/snaps-utils-flask@npm:@metamask/snaps-utils@0.35.2-flask.1, @metamask/snaps-utils@npm:^0.35.2-flask.1":
+"@metamask/snaps-utils-flask@npm:@metamask/snaps-utils@0.36.1-flask.1, @metamask/snaps-utils@npm:^0.36.1-flask.1":
+  version: 0.36.1-flask.1
+  resolution: "@metamask/snaps-utils@npm:0.36.1-flask.1"
+  dependencies:
+    "@babel/core": ^7.20.12
+    "@babel/types": ^7.18.7
+    "@metamask/base-controller": ^3.0.0
+    "@metamask/key-tree": ^7.1.1
+    "@metamask/permission-controller": ^4.0.0
+    "@metamask/providers": ^11.0.0
+    "@metamask/snaps-registry": ^1.2.1
+    "@metamask/snaps-ui": ^0.36.1-flask.1
+    "@metamask/utils": ^6.0.1
+    "@noble/hashes": ^1.3.1
+    "@scure/base": ^1.1.1
+    cron-parser: ^4.5.0
+    eth-rpc-errors: ^4.0.3
+    fast-deep-equal: ^3.1.3
+    fast-json-stable-stringify: ^2.1.0
+    is-svg: ^4.4.0
+    rfdc: ^1.3.0
+    semver: ^7.3.7
+    ses: ^0.18.1
+    superstruct: ^1.0.3
+    validate-npm-package-name: ^5.0.0
+  checksum: 9d7d1d77ac03c58c51221a551b4718add396e5591c33dcb0c6799d0ba69ae775bb8c2f55b2bb1642842d13fd7b979437f34d4cabf6ec69832bff050ee6bb46d3
+  languageName: node
+  linkType: hard
+
+"@metamask/snaps-utils@npm:^0.35.2-flask.1":
   version: 0.35.2-flask.1
   resolution: "@metamask/snaps-utils@npm:0.35.2-flask.1"
   dependencies:
@@ -24488,7 +24591,7 @@ __metadata:
     "@metamask/base-controller": ^3.0.0
     "@metamask/browser-passworder": ^4.1.0
     "@metamask/contract-metadata": ^2.3.1
-    "@metamask/controller-utils": ^4.0.1
+    "@metamask/controller-utils": ^4.1.0
     "@metamask/design-tokens": ^1.12.0
     "@metamask/desktop": ^0.3.0
     "@metamask/eslint-config": ^9.0.0
@@ -24504,13 +24607,13 @@ __metadata:
     "@metamask/eth-trezor-keyring": ^1.0.0
     "@metamask/etherscan-link": ^2.2.0
     "@metamask/forwarder": ^1.1.0
-    "@metamask/gas-fee-controller": ^6.0.0
+    "@metamask/gas-fee-controller": ^6.0.1
     "@metamask/jazzicon": ^2.0.0
     "@metamask/key-tree": ^7.0.0
     "@metamask/logo": ^3.1.1
-    "@metamask/message-manager": ^7.0.0
+    "@metamask/message-manager": ^7.0.2
     "@metamask/metamask-eth-abis": ^3.0.0
-    "@metamask/network-controller": ^10.1.0
+    "@metamask/network-controller": ^10.3.0
     "@metamask/notification-controller": ^3.0.0
     "@metamask/obs-store": ^8.1.0
     "@metamask/permission-controller": ^4.0.0
@@ -24520,18 +24623,18 @@ __metadata:
     "@metamask/providers": ^11.1.0
     "@metamask/rate-limit-controller": ^3.0.0
     "@metamask/rpc-methods": ^1.0.0-prerelease.1
-    "@metamask/rpc-methods-flask": "npm:@metamask/rpc-methods@0.35.2-flask.1"
+    "@metamask/rpc-methods-flask": "npm:@metamask/rpc-methods@0.36.1-flask.1"
     "@metamask/safe-event-emitter": ^2.0.0
     "@metamask/scure-bip39": ^2.0.3
     "@metamask/signature-controller": ^4.0.1
     "@metamask/slip44": ^3.0.0
     "@metamask/smart-transactions-controller": ^3.1.0
     "@metamask/snaps-controllers": ^1.0.0-prerelease.1
-    "@metamask/snaps-controllers-flask": "npm:@metamask/snaps-controllers@0.35.2-flask.1"
+    "@metamask/snaps-controllers-flask": "npm:@metamask/snaps-controllers@0.36.1-flask.1"
     "@metamask/snaps-ui": ^1.0.0-prerelease.1
-    "@metamask/snaps-ui-flask": "npm:@metamask/snaps-ui@0.35.2-flask.1"
+    "@metamask/snaps-ui-flask": "npm:@metamask/snaps-ui@0.36.1-flask.1"
     "@metamask/snaps-utils": ^1.0.0-prerelease.1
-    "@metamask/snaps-utils-flask": "npm:@metamask/snaps-utils@0.35.2-flask.1"
+    "@metamask/snaps-utils-flask": "npm:@metamask/snaps-utils@0.36.1-flask.1"
     "@metamask/subject-metadata-controller": ^2.0.0
     "@metamask/test-dapp": ^7.0.1
     "@metamask/utils": ^5.0.0
@@ -28822,6 +28925,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"querystringify@npm:^2.1.1":
+  version: 2.2.0
+  resolution: "querystringify@npm:2.2.0"
+  checksum: 5641ea231bad7ef6d64d9998faca95611ed4b11c2591a8cae741e178a974f6a8e0ebde008475259abe1621cb15e692404e6b6626e927f7b849d5c09392604b15
+  languageName: node
+  linkType: hard
+
 "queue-microtask@npm:^1.2.3":
   version: 1.2.3
   resolution: "queue-microtask@npm:1.2.3"
@@ -30324,6 +30434,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"requires-port@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "requires-port@npm:1.0.0"
+  checksum: eee0e303adffb69be55d1a214e415cf42b7441ae858c76dfc5353148644f6fd6e698926fc4643f510d5c126d12a705e7c8ed7e38061113bdf37547ab356797ff
+  languageName: node
+  linkType: hard
+
 "reselect@npm:^3.0.1":
   version: 3.0.1
   resolution: "reselect@npm:3.0.1"
@@ -33422,13 +33539,14 @@ __metadata:
   linkType: hard
 
 "tough-cookie@npm:>=2.3.3, tough-cookie@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "tough-cookie@npm:4.0.0"
+  version: 4.1.3
+  resolution: "tough-cookie@npm:4.1.3"
   dependencies:
     psl: ^1.1.33
     punycode: ^2.1.1
-    universalify: ^0.1.2
-  checksum: 0891b37eb7d17faa3479d47f0dce2e3007f2583094ad272f2670d120fbcc3df3b0b0a631ba96ecad49f9e2297d93ff8995ce0d3292d08dd7eabe162f5b224d69
+    universalify: ^0.2.0
+    url-parse: ^1.5.3
+  checksum: c9226afff36492a52118432611af083d1d8493a53ff41ec4ea48e5b583aec744b989e4280bcf476c910ec1525a89a4a0f1cae81c08b18fb2ec3a9b3a72b91dcc
   languageName: node
   linkType: hard
 
@@ -34320,13 +34438,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"universalify@npm:^0.1.0, universalify@npm:^0.1.2":
+"universalify@npm:^0.1.0":
   version: 0.1.2
   resolution: "universalify@npm:0.1.2"
   checksum: 40cdc60f6e61070fe658ca36016a8f4ec216b29bf04a55dce14e3710cc84c7448538ef4dad3728d0bfe29975ccd7bfb5f414c45e7b78883567fb31b246f02dff
   languageName: node
   linkType: hard
 
+"universalify@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "universalify@npm:0.2.0"
+  checksum: e86134cb12919d177c2353196a4cc09981524ee87abf621f7bc8d249dbbbebaec5e7d1314b96061497981350df786e4c5128dbf442eba104d6e765bc260678b5
+  languageName: node
+  linkType: hard
+
 "universalify@npm:^2.0.0":
   version: 2.0.0
   resolution: "universalify@npm:2.0.0"
@@ -34482,6 +34607,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url-parse@npm:^1.5.3":
+  version: 1.5.10
+  resolution: "url-parse@npm:1.5.10"
+  dependencies:
+    querystringify: ^2.1.1
+    requires-port: ^1.0.0
+  checksum: fbdba6b1d83336aca2216bbdc38ba658d9cfb8fc7f665eb8b17852de638ff7d1a162c198a8e4ed66001ddbf6c9888d41e4798912c62b4fd777a31657989f7bdf
+  languageName: node
+  linkType: hard
+
 "url@npm:~0.11.0":
   version: 0.11.0
   resolution: "url@npm:0.11.0"