From d9f52b4c69dcfb9e3e62cbfd30713a9acab52664 Mon Sep 17 00:00:00 2001
From: Guillaume Roux <hello@guillaumerx.fr>
Date: Fri, 28 Mar 2025 12:34:23 +0100
Subject: [PATCH] Revert "fix: Confirmation responsiveness inconsistencies
 (redesign, Snaps, multichain, permissions-connect, confirmations-page)
 (#31058)"

This reverts commit 3c68f3f2c70a00c65a5aa113871c248df011ab5d.
---
 .storybook/index.css                          |  4 +-
 test/e2e/snaps/test-snap-dialog.spec.js       | 12 -----
 .../__snapshots__/nft-details.test.js.snap    |  2 +-
 .../__snapshots__/nft-full-image.test.js.snap |  2 +-
 .../info/row/__snapshots__/row.test.tsx.snap  |  4 +-
 ui/components/app/confirm/info/row/row.tsx    |  7 +--
 .../app/permission-page-container/index.scss  |  4 --
 ...ission-page-container-content.component.js |  1 -
 .../snap-ui-renderer.test.js.snap             | 48 +++++++++----------
 .../snap-ui-renderer/components/footer.ts     |  2 +
 .../app/snaps/snap-ui-renderer/index.scss     |  2 -
 .../snap-ui-renderer/snap-ui-renderer.js      |  5 ++
 .../update-snap-permission-list.js            |  3 +-
 .../multichain/app-header/index.scss          |  2 -
 .../create-named-snap-account.tsx             | 10 +---
 .../create-named-snap-account/index.scss      |  2 -
 .../notification-list-item/index.scss         |  1 -
 .../multichain/pages/page/index.scss          | 39 ---------------
 ui/components/multichain/pages/page/page.tsx  | 11 +----
 .../permissions-page.test.js.snap             |  2 +-
 .../review-permissions-page.test.tsx.snap     |  2 +-
 .../send/__snapshots__/send.test.js.snap      |  2 +-
 .../multichain/pages/send/index.scss          | 22 ++-------
 .../ui/deprecated-networks/index.scss         |  2 -
 ui/components/ui/page-container/index.scss    | 21 +-------
 ui/css/itcss/components/newui-sections.scss   | 17 ++-----
 .../info/__snapshots__/info.test.tsx.snap     |  8 ++--
 .../__snapshots__/approve.test.tsx.snap       |  4 +-
 .../__snapshots__/personal-sign.test.tsx.snap |  8 ++--
 .../__snapshots__/siwe-sign.test.tsx.snap     | 18 +++----
 .../info/personal-sign/siwe-sign/index.scss   |  8 ----
 .../personal-sign/siwe-sign/siwe-sign.tsx     | 12 ++---
 .../transaction-data.test.tsx.snap            | 16 +++----
 .../__snapshots__/typed-sign-v1.test.tsx.snap |  4 +-
 .../__snapshots__/typed-sign.test.tsx.snap    | 20 ++++----
 .../__snapshots__/snaps-section.test.tsx.snap |  4 +-
 ui/pages/confirmations/components/index.scss  |  1 -
 .../__snapshots__/confirm.test.tsx.snap       | 44 ++++++++---------
 ui/pages/confirmations/confirm/index.scss     | 25 ++--------
 .../confirmation/confirmation.js              | 21 +-------
 .../confirmation/confirmation.scss            | 31 +-----------
 .../confirmation/stories/success.stories.js   |  3 +-
 .../confirmation/stories/util.js              | 20 +-------
 .../create-named-snap-account.test.js.snap    |  6 +--
 .../create-snap-account.test.js.snap          |  8 ++--
 .../remove-snap-account.test.js.snap          | 10 ++--
 .../snap-account-redirect.test.js.snap        |  6 +--
 .../create-snap-account.tsx                   |  6 +--
 ui/pages/create-snap-account/index.scss       |  3 --
 ui/pages/home/home.component.js               |  2 +-
 .../__snapshots__/connect-page.test.tsx.snap  |  8 ++--
 .../connect-page/connect-page.tsx             |  7 +--
 ui/pages/permissions-connect/index.scss       | 34 +------------
 .../permissions-connect.stories.js            |  9 +---
 .../permissions-redirect.component.js         |  4 --
 .../snaps/snap-install/index.scss             |  3 +-
 .../snaps/snap-install/snap-install.js        |  3 +-
 .../snaps/snap-result/index.scss              |  8 +---
 .../snaps/snap-result/snap-result.js          |  8 ++--
 .../snaps/snap-update/index.scss              |  3 +-
 .../snaps/snap-update/snap-update.js          |  3 +-
 .../snaps/snaps-connect/index.scss            |  3 --
 .../snaps/snaps-connect/snaps-connect.js      |  6 +--
 ui/pages/remove-snap-account/index.scss       |  3 --
 .../remove-snap-account.tsx                   | 12 ++---
 ui/pages/settings/settings.component.js       |  9 ++--
 .../create-snap-redirect.test.tsx.snap        |  4 +-
 .../snap-account-redirect-context.tsx         |  1 -
 .../snap-account-redirect.tsx                 |  3 +-
 ui/pages/snaps/snap-view/index.scss           |  2 -
 ui/pages/snaps/snap-view/snap-view.js         |  7 ++-
 ui/pages/snaps/snaps-list/index.scss          |  2 -
 72 files changed, 188 insertions(+), 471 deletions(-)
 delete mode 100644 ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.scss

diff --git a/.storybook/index.css b/.storybook/index.css
index 3c0301c5c2b0..48ebae78fe46 100644
--- a/.storybook/index.css
+++ b/.storybook/index.css
@@ -9,8 +9,8 @@
   margin-top: auto !important;
 }
 
-.snap-ui-renderer__content {
-  margin-bottom: 0 !important;
+.snap-ui-renderer__container {
+  padding-bottom: 0 !important;
 }
 
 .snap-ui-renderer__panel {
diff --git a/test/e2e/snaps/test-snap-dialog.spec.js b/test/e2e/snaps/test-snap-dialog.spec.js
index e799c4596e6c..a893be4847b4 100644
--- a/test/e2e/snaps/test-snap-dialog.spec.js
+++ b/test/e2e/snaps/test-snap-dialog.spec.js
@@ -45,9 +45,6 @@ describe('Test Snap Dialog', function () {
           tag: 'button',
         });
 
-        // click and dismiss possible scroll element
-        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
-
         // wait for and click confirm
         await driver.waitForSelector({ text: 'Confirm' });
         await driver.clickElement({
@@ -151,9 +148,6 @@ describe('Test Snap Dialog', function () {
         // switch to dialog popup
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-        // click and dismiss possible scroll element
-        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
-
         // click cancel button and wait for window to close
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Cancel',
@@ -200,9 +194,6 @@ describe('Test Snap Dialog', function () {
         // switch to dialog popup
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-        // click and dismiss possible scroll element
-        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
-
         // click cancel button and wait for window to close
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Cancel',
@@ -227,9 +218,6 @@ describe('Test Snap Dialog', function () {
         // fill '2323' in form field
         await driver.pasteIntoField('#custom-input', '2323');
 
-        // click and dismiss possible scroll element
-        await driver.clickElementSafe('[data-testid="snap-install-scroll"]');
-
         // click confirm button and wait for window to close
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Confirm',
diff --git a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
index 4479223ec064..32778e3b60f9 100644
--- a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
+++ b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-details.test.js.snap
@@ -3,7 +3,7 @@
 exports[`NFT Details should match minimal props and state snapshot 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
diff --git a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap
index 8fe11c518eed..b069151d4fe8 100644
--- a/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap
+++ b/ui/components/app/assets/nfts/nft-details/__snapshots__/nft-full-image.test.js.snap
@@ -6,7 +6,7 @@ exports[`NFT full image should match snapshot 1`] = `
     class="mm-box main-container asset__container"
   >
     <div
-      class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+      class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
       data-testid="multichain-page"
     >
       <div
diff --git a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
index cc29134989d8..5014d138a242 100644
--- a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
+++ b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`ConfirmInfoRow should match snapshot 1`] = `
 exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
     style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
   >
     <button
@@ -45,7 +45,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
       />
     </button>
     <div
-      class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
     >
       <div
         class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
index e82e86ba1c44..5a19fe8e3bdc 100644
--- a/ui/components/app/confirm/info/row/row.tsx
+++ b/ui/components/app/confirm/info/row/row.tsx
@@ -23,7 +23,6 @@ import {
   TextColor,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
-import { SizeNumber } from '../../../../ui/box/box';
 import { CopyIcon } from './copy-icon';
 
 export enum ConfirmInfoRowVariant {
@@ -91,9 +90,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
 
   const isCollapsible = collapsed !== undefined;
 
-  const contentPaddingRight = ((copyEnabled ? 6 : 0) +
-    (isCollapsible ? 6 : 0)) as SizeNumber;
-
   return (
     <ConfirmInfoRowContext.Provider value={{ variant }}>
       <Box
@@ -109,7 +105,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
         marginTop={2}
         marginBottom={2}
         paddingLeft={2}
-        paddingRight={2}
+        paddingRight={copyEnabled ? 5 : 2}
         color={TEXT_COLORS[variant] as TextColor}
         style={{
           overflowWrap: OverflowWrap.Anywhere,
@@ -146,7 +142,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
           justifyContent={JustifyContent.center}
           alignItems={AlignItems.flexStart}
           color={color}
-          paddingRight={contentPaddingRight || null}
         >
           <Box display={Display.Flex} alignItems={AlignItems.center}>
             <Text variant={TextVariant.bodyMdMedium} color={TextColor.inherit}>
diff --git a/ui/components/app/permission-page-container/index.scss b/ui/components/app/permission-page-container/index.scss
index 2d6a4a7b9460..118a9ff639fa 100644
--- a/ui/components/app/permission-page-container/index.scss
+++ b/ui/components/app/permission-page-container/index.scss
@@ -1,7 +1,3 @@
-.permission-page-container-content {
-  flex: '1 0 auto';
-}
-
 .permission-page-container-footer {
   border-top: none !important;
 }
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 ae3863d752d4..4f4f4264fa88 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
@@ -65,7 +65,6 @@ export default class PermissionPageContainerContent extends PureComponent {
       subjectType === SubjectType.Website ? getURLHost(origin) : origin;
     return (
       <Box
-        className="permission-page-container-content"
         display={Display.Flex}
         flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.flexStart}
diff --git a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
index e36350650747..6b72de6a45d1 100644
--- a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
+++ b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
@@ -4,7 +4,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -42,7 +42,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -96,7 +96,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -150,7 +150,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -204,7 +204,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -231,7 +231,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 80px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -247,7 +247,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
       </div>
       <div
         class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
-        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
+        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -302,7 +302,7 @@ exports[`SnapUIRenderer supports address inputs 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -340,7 +340,7 @@ exports[`SnapUIRenderer supports address inputs with a disabled prop 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -379,7 +379,7 @@ exports[`SnapUIRenderer supports address inputs with a placeholder 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -418,7 +418,7 @@ exports[`SnapUIRenderer supports address inputs with existing state 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -499,7 +499,7 @@ exports[`SnapUIRenderer supports address inputs within a field 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -543,7 +543,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 80px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -559,7 +559,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
       </div>
       <div
         class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
-        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
+        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -591,7 +591,7 @@ exports[`SnapUIRenderer supports file inputs 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -654,7 +654,7 @@ exports[`SnapUIRenderer supports forms 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -704,7 +704,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -786,7 +786,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -824,7 +824,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 80px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -840,7 +840,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
       </div>
       <div
         class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
-        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
+        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
@@ -872,7 +872,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 80px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -888,7 +888,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
       </div>
       <div
         class="box snap-ui-renderer__footer box--padding-4 box--display-flex box--gap-4 box--flex-direction-row box--width-full box--background-color-background-default"
-        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px;"
+        style="box-shadow: var(--shadow-size-md) var(--color-shadow-default); height: 80px; position: fixed; bottom: 0px;"
       >
         <button
           class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block snap-ui-renderer__footer-button mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
@@ -929,7 +929,7 @@ exports[`SnapUIRenderer will render a matched address name 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -1023,7 +1023,7 @@ exports[`SnapUIRenderer will render avatar when displayAvatar is true 1`] = `
 <div>
   <div
     class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-alternative"
-    style="overflow-y: auto;"
+    style="overflow-y: auto; margin-bottom: 0px;"
   >
     <div
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
index f837e9c26587..7dbf2529522c 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/footer.ts
@@ -25,6 +25,8 @@ export const DEFAULT_FOOTER = {
     style: {
       boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
       height: '80px',
+      position: 'fixed',
+      bottom: 0,
     },
   },
 };
diff --git a/ui/components/app/snaps/snap-ui-renderer/index.scss b/ui/components/app/snaps/snap-ui-renderer/index.scss
index f12b20dfeb31..c2590005723b 100644
--- a/ui/components/app/snaps/snap-ui-renderer/index.scss
+++ b/ui/components/app/snaps/snap-ui-renderer/index.scss
@@ -6,8 +6,6 @@
   $width-screen-lg-min: 62vw;
 
   &__container {
-    height: 100%;
-
     & > *:first-child {
       gap: 16px;
       margin: 16px;
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 68aee53c3870..8207a60b4cdd 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
@@ -106,6 +106,10 @@ const SnapUIRendererComponent = ({
 
   const { state: initialState, context } = interfaceState;
 
+  // The renderer should only have a footer if there is a default cancel action
+  // or if the footer component has been used.
+  const hasFooter = onCancel || content?.props?.children?.[1] !== undefined;
+
   return (
     <SnapInterfaceContextProvider
       snapId={snapId}
@@ -119,6 +123,7 @@ const SnapUIRendererComponent = ({
         backgroundColor={backgroundColor}
         style={{
           overflowY: 'auto',
+          marginBottom: useFooter && hasFooter ? '80px' : '0',
         }}
       >
         <MetaMaskTemplateRenderer sections={sections} />
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 fab666bd7e00..dc6ff15ded32 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
@@ -10,7 +10,6 @@ import {
 } from '../../../../selectors';
 import SnapPermissionAdapter from '../snap-permission-adapter';
 import {
-  BlockSize,
   Display,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
@@ -113,7 +112,7 @@ export default function UpdateSnapPermissionList({
   };
 
   return (
-    <Box width={BlockSize.Full}>
+    <Box>
       <SnapPermissionAdapter
         permissions={newWeightedPermissions}
         snapId={snapId}
diff --git a/ui/components/multichain/app-header/index.scss b/ui/components/multichain/app-header/index.scss
index 26f6ec5e14f2..381ebef7f851 100644
--- a/ui/components/multichain/app-header/index.scss
+++ b/ui/components/multichain/app-header/index.scss
@@ -6,8 +6,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
   flex-flow: column nowrap;
   z-index: 55;
   min-height: 68px;
diff --git a/ui/components/multichain/create-named-snap-account/create-named-snap-account.tsx b/ui/components/multichain/create-named-snap-account/create-named-snap-account.tsx
index a9291a32e4fa..fd6ae6eb7cdb 100644
--- a/ui/components/multichain/create-named-snap-account/create-named-snap-account.tsx
+++ b/ui/components/multichain/create-named-snap-account/create-named-snap-account.tsx
@@ -58,14 +58,8 @@ export const CreateNamedSnapAccount: React.FC<CreateNamedSnapAccountProps> = ({
   }, []);
 
   return (
-    <Box padding={6} className="name-snap-account-page">
-      <ModalHeader
-        paddingTop={2}
-        paddingBottom={4}
-        paddingRight={0}
-        paddingLeft={0}
-        onClose={onClose}
-      >
+    <Box padding={4} className="name-snap-account-page">
+      <ModalHeader padding={4} onClose={onClose}>
         {t('addAccountToMetaMask')}
       </ModalHeader>
       <CreateAccount
diff --git a/ui/components/multichain/create-named-snap-account/index.scss b/ui/components/multichain/create-named-snap-account/index.scss
index 302de357e244..2714fb8b8f5c 100644
--- a/ui/components/multichain/create-named-snap-account/index.scss
+++ b/ui/components/multichain/create-named-snap-account/index.scss
@@ -6,8 +6,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
   width: 100%;
   flex-flow: column nowrap;
   margin: 0 auto !important;
diff --git a/ui/components/multichain/notification-list-item/index.scss b/ui/components/multichain/notification-list-item/index.scss
index 1f13f3ec8632..02b36e20a7c6 100644
--- a/ui/components/multichain/notification-list-item/index.scss
+++ b/ui/components/multichain/notification-list-item/index.scss
@@ -20,7 +20,6 @@
 }
 
 .notification-list-item__unread-dot__wrapper {
-  pointer-events: none;
   position: absolute;
   top: 24px;
   left: 11px;
diff --git a/ui/components/multichain/pages/page/index.scss b/ui/components/multichain/pages/page/index.scss
index 246d9ae7dfc7..13d947b9d6b4 100644
--- a/ui/components/multichain/pages/page/index.scss
+++ b/ui/components/multichain/pages/page/index.scss
@@ -1,44 +1,5 @@
-@use "design-system";
-
 @import 'components/';
 
-.multichain-app-header-logo + .multichain-page {
-  $height-screen-sm-min: 720px;
-
-  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
-    padding-top: 0;
-  }
-}
-
 .multichain-page {
   // TODO: Add page sizes
-  $height-screen-sm-min: 720px;
-
-  transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
-
-  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
-    padding-top: 32px;
-    padding-bottom: 32px;
-  }
-
-  &--has-app-header {
-    @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
-      // multichain-page UI here flows from the dashboard page which doesn't have padding-bottom. We can consider adding padding bottom here and to the .main-container-wrapper.
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-
-    & .multichain-page__inner-container {
-      border-radius: 0 0 2px 2px;
-      border: 0;
-      // Matches the box-shadow of the .main-container
-      box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
-    }
-  }
-
-  &__inner-container {
-    border: 1px solid var(--color-border-muted);
-    border-radius: 2px;
-    box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
-  }
 }
diff --git a/ui/components/multichain/pages/page/page.tsx b/ui/components/multichain/pages/page/page.tsx
index 3441a2caa001..b8bdc38e2161 100644
--- a/ui/components/multichain/pages/page/page.tsx
+++ b/ui/components/multichain/pages/page/page.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useLocation } from 'react-router-dom';
 import { Box } from '../../../component-library';
 import {
   BackgroundColor,
@@ -12,7 +11,6 @@ import {
 } from '../../../../helpers/constants/design-system';
 
 import type { StyleUtilityProps } from '../../../component-library/box';
-import { hideAppHeader } from '../../../../pages/routes/utils';
 
 // TODO: Convert to a `type` in a future major version.
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -28,13 +26,6 @@ interface PageProps extends StyleUtilityProps {
 }
 
 export const Page = ({ children, className = '', ...props }: PageProps) => {
-  const location = useLocation();
-  const hasAppHeader = location?.pathname ? !hideAppHeader({ location }) : true;
-
-  const classNames = classnames('multichain-page', {
-    'multichain-page--has-app-header': hasAppHeader,
-  });
-
   return (
     <Box
       width={BlockSize.Full}
@@ -43,7 +34,7 @@ export const Page = ({ children, className = '', ...props }: PageProps) => {
       flexDirection={FlexDirection.Row}
       justifyContent={JustifyContent.center}
       backgroundColor={BackgroundColor.backgroundAlternative}
-      className={classNames}
+      className="multichain-page"
       data-testid="multichain-page"
     >
       <Box
diff --git a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
index 912c0a4adbe9..beb0335f7015 100644
--- a/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
+++ b/ui/components/multichain/pages/permissions-page/__snapshots__/permissions-page.test.js.snap
@@ -3,7 +3,7 @@
 exports[`All Connections render renders correctly 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
diff --git a/ui/components/multichain/pages/review-permissions-page/__snapshots__/review-permissions-page.test.tsx.snap b/ui/components/multichain/pages/review-permissions-page/__snapshots__/review-permissions-page.test.tsx.snap
index 84ba29939522..2b4ebbca9b33 100644
--- a/ui/components/multichain/pages/review-permissions-page/__snapshots__/review-permissions-page.test.tsx.snap
+++ b/ui/components/multichain/pages/review-permissions-page/__snapshots__/review-permissions-page.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReviewPermissions should render correctly 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
diff --git a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
index b1c9d1a1d4b6..992fe2d78862 100644
--- a/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
+++ b/ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
@@ -3,7 +3,7 @@
 exports[`SendPage render and initialization should render correctly even when a draftTransaction does not exist 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
diff --git a/ui/components/multichain/pages/send/index.scss b/ui/components/multichain/pages/send/index.scss
index 31560e219cec..9551ce8e5813 100644
--- a/ui/components/multichain/pages/send/index.scss
+++ b/ui/components/multichain/pages/send/index.scss
@@ -1,26 +1,10 @@
 @use "design-system";
 
 .multichain-send-page {
-  $width-screen-sm-min: 85vw;
-  $width-screen-md-min: 80vw;
-  $width-screen-lg-min: 62vw;
-
-  // prevent overflow-x
-  max-width: 100%;
-  border: 1px solid var(--color-border-muted);
-  border-radius: 2px;
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
-
-  @include design-system.screen-sm-min {
-    width: $width-screen-sm-min;
-  }
-
-  @include design-system.screen-md-min {
-    width: $width-screen-md-min;
-  }
+  width: 408px;
 
-  @include design-system.screen-lg-min {
-    width: $width-screen-lg-min;
+  @media (max-width: 371px) {
+    width: 100%;
   }
 
   &__account-picker {
diff --git a/ui/components/ui/deprecated-networks/index.scss b/ui/components/ui/deprecated-networks/index.scss
index 892b39ebb0e2..d834ffdfdf73 100644
--- a/ui/components/ui/deprecated-networks/index.scss
+++ b/ui/components/ui/deprecated-networks/index.scss
@@ -5,8 +5,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
   position: fixed;
   bottom: 0;
   z-index: 1050;
diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss
index cfc726f355f8..b7d9fa5a3801 100644
--- a/ui/components/ui/page-container/index.scss
+++ b/ui/components/ui/page-container/index.scss
@@ -1,32 +1,15 @@
 @use "design-system";
 
 .page-container {
-  $width-screen-sm-min: 85vw;
-  $width-screen-md-min: 80vw;
-  $width-screen-lg-min: 62vw;
-
-  // prevent overflow-x
-  max-width: 100%;
+  width: 408px;
   background-color: var(--color-background-default);
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
+  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
   z-index: 25;
   display: flex;
   flex-flow: column;
   border-radius: 8px;
   overflow-y: auto;
 
-  @include design-system.screen-sm-min {
-    width: $width-screen-sm-min;
-  }
-
-  @include design-system.screen-md-min {
-    width: $width-screen-md-min;
-  }
-
-  @include design-system.screen-lg-min {
-    width: $width-screen-lg-min;
-  }
-
   &__header {
     display: flex;
     flex-flow: column;
diff --git a/ui/css/itcss/components/newui-sections.scss b/ui/css/itcss/components/newui-sections.scss
index 0a9db3a492b4..65f122cd0f31 100644
--- a/ui/css/itcss/components/newui-sections.scss
+++ b/ui/css/itcss/components/newui-sections.scss
@@ -32,8 +32,6 @@
 
 // Main container
 .main-container {
-  display: flex;
-  flex-direction: column;
   z-index: design-system.$main-container-z-index;
 }
 
@@ -55,10 +53,7 @@
   .main-container {
     width: 85vw;
     min-height: 90vh;
-
-    &--has-shadow {
-      box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
-    }
+    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
   }
 }
 
@@ -66,10 +61,7 @@
   .main-container {
     width: 80vw;
     min-height: 82vh;
-
-    &--has-shadow {
-      box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
-    }
+    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
   }
 }
 
@@ -77,10 +69,7 @@
   .main-container {
     width: 62vw;
     min-height: 82vh;
-
-    &--has-shadow {
-      box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
-    }
+    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
   }
 }
 
diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
index 10074181ab25..9a0a246ffdb3 100644
--- a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -742,7 +742,7 @@ exports[`Info renders info section for personal sign request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <button
@@ -767,7 +767,7 @@ exports[`Info renders info section for personal sign request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1240,7 +1240,7 @@ exports[`Info renders info section for typed sign request 1`] = `
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -1254,7 +1254,7 @@ exports[`Info renders info section for typed sign request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
index c95547074d52..8b2e5b1cdf05 100644
--- a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -536,7 +536,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
     data-testid="advanced-details-data-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -550,7 +550,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap
index 30b5475d7bc6..151144320ba0 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/__snapshots__/personal-sign.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <button
@@ -77,7 +77,7 @@ exports[`PersonalSignInfo handle reverse string properly 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -156,7 +156,7 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
     >
       <button
@@ -181,7 +181,7 @@ exports[`PersonalSignInfo renders correctly for personal sign request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
index 83a96faa428d..446117a646a7 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/__snapshots__/siwe-sign.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
     style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
   >
     <button
@@ -28,7 +28,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       />
     </button>
     <div
-      class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
     >
       <div
         class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -41,11 +41,12 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
       </div>
     </div>
     <div
-      class="mm-box siwe-sign__message-rows mm-box--width-full"
+      class="mm-box"
+      style="margin-left: -8px; margin-right: -8px;"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-        style="white-space: pre-wrap;"
+        style="white-space: pre-wrap; margin-left: 8px; margin-right: 8px;"
       >
         I accept the MetaMask Terms of Service: https://community.metamask.io/tos
       </p>
@@ -292,7 +293,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request 1`] = `
 exports[`SIWESignInfo renders correctly for SIWE signature request with resources 1`] = `
 <div>
   <div
-    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+    class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
     style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
   >
     <button
@@ -317,7 +318,7 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       />
     </button>
     <div
-      class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+      class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
     >
       <div
         class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -330,11 +331,12 @@ exports[`SIWESignInfo renders correctly for SIWE signature request with resource
       </div>
     </div>
     <div
-      class="mm-box siwe-sign__message-rows mm-box--width-full"
+      class="mm-box"
+      style="margin-left: -8px; margin-right: -8px;"
     >
       <p
         class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
-        style="white-space: pre-wrap;"
+        style="white-space: pre-wrap; margin-left: 8px; margin-right: 8px;"
       >
         I accept the MetaMask Terms of Service: https://community.metamask.io/tos
       </p>
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.scss b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.scss
deleted file mode 100644
index 335a8c483a07..000000000000
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.siwe-sign__message-rows {
-  // Overrides
-
-  & > .confirm-info-row {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
index a2acdfb14cca..db4feff0ed38 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
@@ -12,10 +12,7 @@ import {
   ConfirmInfoRowText,
 } from '../../../../../../../components/app/confirm/info/row';
 import { Box, Text } from '../../../../../../../components/component-library';
-import {
-  BlockSize,
-  TextColor,
-} from '../../../../../../../helpers/constants/design-system';
+import { TextColor } from '../../../../../../../helpers/constants/design-system';
 import { useConfirmContext } from '../../../../../context/confirm';
 
 const SIWESignInfo: React.FC = () => {
@@ -50,8 +47,11 @@ const SIWESignInfo: React.FC = () => {
       copyEnabled
       copyText={JSON.stringify(siweMessage)}
     >
-      <Box width={BlockSize.Full} className="siwe-sign__message-rows">
-        <Text color={TextColor.inherit} style={{ whiteSpace: 'pre-wrap' }}>
+      <Box style={{ marginLeft: -8, marginRight: -8 }}>
+        <Text
+          color={TextColor.inherit}
+          style={{ whiteSpace: 'pre-wrap', marginLeft: 8, marginRight: 8 }}
+        >
           {statement ?? ''}
         </Text>
         <ConfirmInfoRow label={t('siweURI')}>
diff --git a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
index c6647a5ed4ea..5b8ae89f054b 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/shared/transaction-data/__snapshots__/transaction-data.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
     data-testid="advanced-details-data-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -21,7 +21,7 @@ exports[`TransactionData renders decoded data with names and descriptions 1`] =
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1009,7 +1009,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
     data-testid="advanced-details-data-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -1023,7 +1023,7 @@ exports[`TransactionData renders decoded data with no names 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1230,7 +1230,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
     data-testid="advanced-details-data-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -1244,7 +1244,7 @@ exports[`TransactionData renders decoded data with tuples and arrays 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -2293,7 +2293,7 @@ exports[`TransactionData renders raw hexadecimal if no decoded data 1`] = `
     data-testid="advanced-details-data-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -2307,7 +2307,7 @@ exports[`TransactionData renders raw hexadecimal if no decoded data 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap
index 77296def4582..5b1b7ffe36ac 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign-v1/__snapshots__/typed-sign-v1.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
     class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -77,7 +77,7 @@ exports[`TypedSignInfo correctly renders typed sign data request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
index a8a4c29659d1..09985efac994 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
@@ -259,7 +259,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -284,7 +284,7 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -560,7 +560,7 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -585,7 +585,7 @@ exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] =
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -697,7 +697,7 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -711,7 +711,7 @@ exports[`TypedSignInfo renders origin for typed sign data request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1304,7 +1304,7 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -1318,7 +1318,7 @@ exports[`TypedSignInfo should render message for typed sign v3 request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1682,7 +1682,7 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
     data-testid="confirmation_message-section"
   >
     <div
-      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+      class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
       style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
     >
       <button
@@ -1696,7 +1696,7 @@ exports[`TypedSignInfo should render message for typed sign v4 request 1`] = `
         />
       </button>
       <div
-        class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+        class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index 1e87d71bb4a1..94b7ffe2325c 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
       >
         <div
           class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-          style="overflow-y: auto;"
+          style="overflow-y: auto; margin-bottom: 0px;"
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
@@ -98,7 +98,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
       >
         <div
           class="mm-box snap-ui-renderer__content mm-box--height-full mm-box--background-color-background-default"
-          style="overflow-y: auto;"
+          style="overflow-y: auto; margin-bottom: 0px;"
         >
           <div
             class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
diff --git a/ui/pages/confirmations/components/index.scss b/ui/pages/confirmations/components/index.scss
index b3ba91939fd3..a585c71e7eee 100644
--- a/ui/pages/confirmations/components/index.scss
+++ b/ui/pages/confirmations/components/index.scss
@@ -11,7 +11,6 @@
 @import 'confirm/footer';
 @import 'confirm/footer/upgrade-cancel-modal/index';
 @import 'confirm/header/header.scss';
-@import 'confirm/info/personal-sign/siwe-sign/index';
 @import 'confirm/info/shared/gas-fee-token-modal/index';
 @import 'confirm/info/shared/gas-fee-token-toast/index';
 @import 'confirm/scroll-to-bottom';
diff --git a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
index 57ae1f78d500..8ceffd32aa0e 100644
--- a/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
+++ b/ui/pages/confirmations/confirm/__snapshots__/confirm.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -185,7 +185,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
             class="mm-box mm-box--margin-bottom-4 mm-box--padding-2 mm-box--background-color-background-default mm-box--rounded-md"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative; background: transparent;"
             >
               <button
@@ -210,7 +210,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start mm-box--color-text-default"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -265,7 +265,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
 exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitBatch 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -666,7 +666,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -691,7 +691,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -736,7 +736,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
 exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitSingle 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -1084,7 +1084,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -1109,7 +1109,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1154,7 +1154,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
 exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -1377,7 +1377,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -1391,7 +1391,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -1919,7 +1919,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
 exports[`Confirm should match snapshot for signature - typed sign - permit 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -2306,7 +2306,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -2331,7 +2331,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -2376,7 +2376,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
 exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -2597,7 +2597,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-column mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -2622,7 +2622,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-12 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
@@ -3057,7 +3057,7 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
 exports[`Confirm should render SmartTransactionsBannerAlert for transaction types but not signature types 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -3169,7 +3169,7 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
 exports[`Confirm should render SmartTransactionsBannerAlert for transaction types but not signature types 2`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -3349,7 +3349,7 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
             data-testid="confirmation_message-section"
           >
             <div
-              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-2 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
+              class="mm-box confirm-info-row mm-box--margin-top-2 mm-box--margin-bottom-2 mm-box--padding-right-5 mm-box--padding-left-2 mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-flex-start mm-box--color-text-default mm-box--rounded-lg"
               style="overflow-wrap: anywhere; min-height: 24px; position: relative;"
             >
               <button
@@ -3363,7 +3363,7 @@ exports[`Confirm should render SmartTransactionsBannerAlert for transaction type
                 />
               </button>
               <div
-                class="mm-box mm-box--padding-right-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
+                class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--align-items-flex-start"
               >
                 <div
                   class="mm-box mm-box--display-flex mm-box--align-items-center"
diff --git a/ui/pages/confirmations/confirm/index.scss b/ui/pages/confirmations/confirm/index.scss
index 0958c2866f2d..ab653c12411f 100644
--- a/ui/pages/confirmations/confirm/index.scss
+++ b/ui/pages/confirmations/confirm/index.scss
@@ -1,28 +1,9 @@
 @use "design-system";
 
 .confirm_wrapper {
-  $width-screen-sm-min: 85vw;
-  $width-screen-md-min: 80vw;
-  $width-screen-lg-min: 62vw;
+  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
 
-  // prevent overflow-x
-  max-width: 100%;
-
-  @include design-system.screen-sm-min {
-    width: $width-screen-sm-min;
-  }
-
-  @include design-system.screen-md-min {
-    width: $width-screen-md-min;
-  }
-
-  @include design-system.screen-lg-min {
-    width: $width-screen-lg-min;
-  }
-
-  &.multichain-page__inner-container {
-    border: 1px solid var(--color-border-muted);
-    border-radius: 2px;
-    box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
+  @media screen and (min-width: design-system.$break-small) {
+    max-width: 360px;
   }
 }
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index f15226718e92..393c81b9a567 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -57,8 +57,6 @@ import {
 } from './templates';
 
 const SNAP_CUSTOM_UI_DIALOG = Object.values(DIALOG_APPROVAL_TYPES);
-const SNAP_ERROR_KEY_RESULT = 'snapAccountErrorMessage';
-const SNAP_MSG_KEY_RESULT_SUCCESS = 'snapAccountSuccessMessage';
 
 /**
  * a very simple reducer using produce from Immer to keep state manipulation
@@ -301,23 +299,6 @@ export default function ConfirmationPage({
   // When pendingConfirmation is undefined, this will also be undefined
   const snapName = isSnapDialog && name;
 
-  const pendingConfirmationHeaderKey =
-    pendingConfirmation?.requestData?.header?.[0]?.key;
-  const pendingConfirmationMessageKey =
-    pendingConfirmation?.requestData?.message?.key;
-
-  const hasHeaderMaybe = isSnapDialog;
-  const hasHeader =
-    isSnapCustomUIDialog ||
-    pendingConfirmation?.key === 'snapHeader' ||
-    pendingConfirmationHeaderKey === 'snapHeader' ||
-    // checking pendingConfirmationHeaderKey based on storybook test data. I'm unsure of the data structure here.
-    // I found the same key value in pendingConfirmationMessageKey on the local, non-storybook build.
-    pendingConfirmationHeaderKey === SNAP_MSG_KEY_RESULT_SUCCESS ||
-    pendingConfirmationHeaderKey === SNAP_ERROR_KEY_RESULT ||
-    pendingConfirmationMessageKey === SNAP_MSG_KEY_RESULT_SUCCESS ||
-    pendingConfirmationMessageKey === SNAP_ERROR_KEY_RESULT;
-
   const INPUT_STATE_CONFIRMATIONS = [ApprovalType.SnapDialogPrompt];
 
   // Generating templatedValues is potentially expensive, and if done on every render
@@ -526,7 +507,7 @@ export default function ConfirmationPage({
           />
           <Box
             className="confirmation-page__content"
-            padding={hasHeader || hasHeaderMaybe ? 0 : 4}
+            padding={isSnapCustomUIDialog ? 0 : 4}
             style={{
               overflowY: 'auto',
             }}
diff --git a/ui/pages/confirmations/confirmation/confirmation.scss b/ui/pages/confirmations/confirmation/confirmation.scss
index 0abbfca7852d..de65feab79c0 100644
--- a/ui/pages/confirmations/confirmation/confirmation.scss
+++ b/ui/pages/confirmations/confirmation/confirmation.scss
@@ -4,20 +4,8 @@
 @import 'components/confirmation-network-switch/index';
 
 .confirmation-page {
-  $height-screen-sm-min: 720px;
-  $width-screen-sm-min: 85vw;
-  $width-screen-md-min: 80vw;
-  $width-screen-lg-min: 62vw;
-
-  // prevent overflow-x
-  max-width: 100%;
-  border: 1px solid var(--color-border-muted);
-  border-radius: 2px;
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
-  transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
   width: 100%;
-  min-height: 0;
-  height: auto;
+  height: 100%;
   position: relative;
   background: var(--color-background-default);
   display: grid;
@@ -29,23 +17,6 @@
     'content'
     'footer';
 
-  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
-    margin-top: 32px;
-    margin-bottom: 32px;
-  }
-
-  @include design-system.screen-sm-min {
-    width: $width-screen-sm-min;
-  }
-
-  @include design-system.screen-md-min {
-    width: $width-screen-md-min;
-  }
-
-  @include design-system.screen-lg-min {
-    width: $width-screen-lg-min;
-  }
-
   a {
     color: var(--color-primary-default);
   }
diff --git a/ui/pages/confirmations/confirmation/stories/success.stories.js b/ui/pages/confirmations/confirmation/stories/success.stories.js
index 3753c765c4c9..bf45f42431e7 100644
--- a/ui/pages/confirmations/confirmation/stories/success.stories.js
+++ b/ui/pages/confirmations/confirmation/stories/success.stories.js
@@ -108,7 +108,6 @@ export const TemplateStory = () => {
                 borderRadius: '10px',
                 boxShadow: 'var(--shadow-size-lg) var(--color-shadow-default)',
               },
-              key: 'snapAccountSuccessMessage',
             },
             children: [
               {
@@ -168,7 +167,7 @@ export const TemplateStory = () => {
         header: [
           {
             name: 'SnapAuthorshipHeader',
-            key: 'snapAccountSuccessMessage',
+            key: 'snapHeader',
             properties: { snapId: 'npm:@test/test-snap' },
           },
         ],
diff --git a/ui/pages/confirmations/confirmation/stories/util.js b/ui/pages/confirmations/confirmation/stories/util.js
index 1ae8f913971b..e2101c3da136 100644
--- a/ui/pages/confirmations/confirmation/stories/util.js
+++ b/ui/pages/confirmations/confirmation/stories/util.js
@@ -79,29 +79,13 @@ export function PendingApproval({ children, requestData, state, type }) {
     <Provider store={configureStore(mockState)}>
       <Box
         style={{
-          display: 'flex',
-          flexDirection: 'column',
           height: '592px',
           width: '360px',
+          border: '1px solid lightgrey',
           margin: '0 auto',
         }}
       >
-        <Box
-          style={{
-            display: 'flex',
-            height: '100%',
-            flexDirection: 'column',
-          }}
-        >
-          <Box
-            style={{
-              flex: '1 0 auto',
-              display: 'flex',
-            }}
-          >
-            {children}
-          </Box>
-        </Box>
+        {children}
       </Box>
     </Provider>
   );
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
index 0518aaaf8b34..a84c42e6f172 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-named-snap-account.test.js.snap
@@ -61,14 +61,14 @@ exports[`create-named-snap-account confirmation matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="mm-box confirmation-page__content mm-box--padding-0"
+      class="mm-box confirmation-page__content mm-box--padding-4"
       style="overflow-y: auto;"
     >
       <div
-        class="mm-box name-snap-account-page mm-box--padding-6"
+        class="mm-box name-snap-account-page mm-box--padding-4"
       >
         <header
-          class="mm-box mm-header-base mm-modal-header mm-box--padding-top-2 mm-box--padding-right-0 mm-box--padding-bottom-4 mm-box--padding-left-0 mm-box--display-flex mm-box--justify-content-space-between"
+          class="mm-box mm-header-base mm-modal-header mm-box--padding-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
         >
           <div
             class="mm-box mm-box--width-full"
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
index 405b43cd5e62..d855a04a94a8 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/create-snap-account.test.js.snap
@@ -6,7 +6,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-0"
+      class="mm-box confirmation-page__content mm-box--padding-4"
       style="overflow-y: auto;"
     >
       <div
@@ -61,14 +61,14 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
           style="flex-grow: 1;"
         >
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
           >
             <div
-              class="mm-box mm-box--padding-bottom-6"
+              class="mm-box mm-box--padding-bottom-4"
             >
               <div
                 class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-primary-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
@@ -80,7 +80,7 @@ exports[`create-snap-account confirmation should match snapshot 1`] = `
               </div>
             </div>
             <h2
-              class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-bottom-2 mm-box--color-text-default"
+              class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--color-text-default"
               data-testid="create-snap-account-content-title"
             >
               Create account
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
index ee7c06fbb061..bc25f0e30552 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/remove-snap-account.test.js.snap
@@ -6,7 +6,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-0"
+      class="mm-box confirmation-page__content mm-box--padding-4"
       style="overflow-y: auto;"
     >
       <div
@@ -61,14 +61,14 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center mm-box--width-full"
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--align-items-center"
           style="flex-grow: 1;"
         >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between mm-box--width-full"
+            class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
           >
             <div
-              class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--width-full"
+              class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center"
             >
               <div
                 class="mm-box mm-box--padding-bottom-2"
@@ -83,7 +83,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
                 </div>
               </div>
               <h2
-                class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-bottom-2 mm-box--color-text-default"
+                class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--color-text-default"
               >
                 Remove account
               </h2>
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
index 28ebee1d898b..3f96fff18880 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/snap-account-redirect.test.js.snap
@@ -6,7 +6,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
     class="confirmation-page"
   >
     <div
-      class="mm-box confirmation-page__content mm-box--padding-0"
+      class="mm-box confirmation-page__content mm-box--padding-4"
       style="overflow-y: auto;"
     >
       <div
@@ -49,7 +49,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--height-full"
+          class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--height-full"
         >
           <div
             class="mm-box mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -58,7 +58,7 @@ exports[`snap-account-redirect confirmation should match snapshot 1`] = `
               class="mm-box mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column mm-box--align-items-center"
             >
               <h2
-                class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-bottom-2 mm-box--color-text-default"
+                class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--color-text-default"
                 data-testid="snap-account-redirect-content-title"
               >
                 Finish signing
diff --git a/ui/pages/create-snap-account/create-snap-account.tsx b/ui/pages/create-snap-account/create-snap-account.tsx
index 3adcb39bf187..be01638d31ad 100644
--- a/ui/pages/create-snap-account/create-snap-account.tsx
+++ b/ui/pages/create-snap-account/create-snap-account.tsx
@@ -51,7 +51,8 @@ const CreateSnapAccount = ({
         flexDirection={FlexDirection.Column}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
-        padding={4}
+        paddingLeft={4}
+        paddingRight={4}
         style={{ flexGrow: 1 }}
       >
         <Box
@@ -59,7 +60,7 @@ const CreateSnapAccount = ({
           flexDirection={FlexDirection.Column}
           alignItems={AlignItems.center}
         >
-          <Box paddingBottom={6}>
+          <Box paddingBottom={4}>
             <AvatarIcon
               iconName={IconName.UserCircleAdd}
               size={AvatarIconSize.Xl}
@@ -69,7 +70,6 @@ const CreateSnapAccount = ({
             data-testid="create-snap-account-content-title"
             textAlign={TextAlign.Center}
             variant={TextVariant.headingLg}
-            paddingBottom={2}
           >
             {t('createSnapAccountTitle')}
           </Text>
diff --git a/ui/pages/create-snap-account/index.scss b/ui/pages/create-snap-account/index.scss
index 7818a5fa0448..1399594f3ad6 100644
--- a/ui/pages/create-snap-account/index.scss
+++ b/ui/pages/create-snap-account/index.scss
@@ -5,9 +5,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
-
   @include design-system.screen-sm-min {
     width: $width-screen-sm-min;
   }
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 5336796cd736..1ccabf28c376 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -836,7 +836,7 @@ export default class Home extends PureComponent {
     ///: END:ONLY_INCLUDE_IF
 
     return (
-      <div className="main-container main-container--has-shadow">
+      <div className="main-container">
         <Route path={CONNECTED_ROUTE} component={ConnectedSites} exact />
         <Route
           path={CONNECTED_ACCOUNTS_ROUTE}
diff --git a/ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap b/ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap
index b4b3c24506ab..4f4a9a4de95c 100644
--- a/ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap
+++ b/ui/pages/permissions-connect/connect-page/__snapshots__/connect-page.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ConnectPage should render correctly 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -53,7 +53,7 @@ exports[`ConnectPage should render correctly 1`] = `
               github.io
             </h2>
             <div
-              class="mm-box mm-box--display-flex mm-box--flex-wrap-wrap mm-box--justify-content-center"
+              class="mm-box mm-box--display-flex mm-box--justify-content-center"
             >
               <p
                 class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
@@ -371,7 +371,7 @@ exports[`ConnectPage should render correctly 1`] = `
 exports[`ConnectPage should render with defaults from the requested permissions 1`] = `
 <div>
   <div
-    class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
+    class="mm-box multichain-page mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-alternative"
     data-testid="multichain-page"
   >
     <div
@@ -421,7 +421,7 @@ exports[`ConnectPage should render with defaults from the requested permissions
               github.io
             </h2>
             <div
-              class="mm-box mm-box--display-flex mm-box--flex-wrap-wrap mm-box--justify-content-center"
+              class="mm-box mm-box--display-flex mm-box--justify-content-center"
             >
               <p
                 class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
diff --git a/ui/pages/permissions-connect/connect-page/connect-page.tsx b/ui/pages/permissions-connect/connect-page/connect-page.tsx
index d4ece0478ed8..09f4813e5faf 100644
--- a/ui/pages/permissions-connect/connect-page/connect-page.tsx
+++ b/ui/pages/permissions-connect/connect-page/connect-page.tsx
@@ -39,7 +39,6 @@ import {
   BorderRadius,
   Display,
   FlexDirection,
-  FlexWrap,
   JustifyContent,
   TextColor,
   TextVariant,
@@ -262,11 +261,7 @@ export const ConnectPage: React.FC<ConnectPageProps> = ({
         <Text variant={TextVariant.headingLg} marginTop={2} marginBottom={2}>
           {title}
         </Text>
-        <Box
-          display={Display.Flex}
-          justifyContent={JustifyContent.center}
-          flexWrap={FlexWrap.Wrap}
-        >
+        <Box display={Display.Flex} justifyContent={JustifyContent.center}>
           <Text>{t('connectionDescription')}</Text>
           <ButtonLink
             paddingLeft={1}
diff --git a/ui/pages/permissions-connect/index.scss b/ui/pages/permissions-connect/index.scss
index d349167ab457..70c44ad10217 100644
--- a/ui/pages/permissions-connect/index.scss
+++ b/ui/pages/permissions-connect/index.scss
@@ -8,44 +8,20 @@
 @import 'snaps/snaps-connect/index';
 
 .permissions-connect {
-  $height-screen-sm-min: 720px;
-
-  $width-screen-sm-min: 85vw;
-  $width-screen-md-min: 80vw;
-  $width-screen-lg-min: 62vw;
-
-  // prevent overflow-x
-  max-width: 100%;
+  width: 100%;
+  height: 100%;
   position: relative;
   background: var(--color-background-default);
   display: flex;
   flex-direction: column;
-  height: auto;
-  width: 100%;
-  transition: margin-top 0.3s ease-in-out, margin-bottom 0.3s ease-in-out;
-
-  @media screen and (min-width: design-system.$screen-sm-min) and (min-height: $height-screen-sm-min) {
-    margin-top: 32px;
-    margin-bottom: 32px;
-  }
 
   @include design-system.screen-sm-min {
-    width: $width-screen-sm-min;
-
     .page-container {
       max-height: none;
       min-height: auto;
     }
   }
 
-  @include design-system.screen-md-min {
-    width: $width-screen-md-min;
-  }
-
-  @include design-system.screen-lg-min {
-    width: $width-screen-lg-min;
-  }
-
   &__top-bar {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -74,9 +50,3 @@
     background-color: var(--color-background-alternative); // main-container adds the width but overrides the boxProps. So, we need extra class to apply css
   }
 }
-
-.permission-approval-container {
-  .page-container__footer {
-    border-top: 0;
-  }
-}
diff --git a/ui/pages/permissions-connect/permissions-connect.stories.js b/ui/pages/permissions-connect/permissions-connect.stories.js
index 7718a98ac7a7..efa81bf3042f 100644
--- a/ui/pages/permissions-connect/permissions-connect.stories.js
+++ b/ui/pages/permissions-connect/permissions-connect.stories.js
@@ -1,10 +1,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Box } from '../../components/component-library';
 import { PermissionPageContainerContent } from '../../components/app/permission-page-container';
 import PermissionsConnectFooter from '../../components/app/permissions-connect-footer';
 import { PageContainerFooter } from '../../components/ui/page-container';
-import { BackgroundColor } from '../../helpers/constants/design-system';
 import { createMockInternalAccount } from '../../../test/jest/mocks';
 import ChooseAccount from './choose-account';
 
@@ -77,10 +75,7 @@ export const PermissionPageContainerComponent = () => {
           eth_accounts: true,
         }}
       />
-      <Box
-        className="permission-approval-container__footers"
-        backgroundColor={BackgroundColor.backgroundAlternative}
-      >
+      <div className="permission-approval-container__footers">
         <PermissionsConnectFooter />
         <PageContainerFooter
           cancelButtonType="default"
@@ -88,7 +83,7 @@ export const PermissionPageContainerComponent = () => {
           submitText="connect"
           buttonSizeLarge={false}
         />
-      </Box>
+      </div>
     </div>
   );
 };
diff --git a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
index 94280a4dba3c..6a6ae58b8e4c 100644
--- a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
+++ b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js
@@ -6,7 +6,6 @@ import {
   Display,
   TextVariant,
   BlockSize,
-  BorderColor,
   FlexDirection,
   BackgroundColor,
   BorderRadius,
@@ -56,9 +55,6 @@ export default function PermissionsRedirect({ subjectMetadata }) {
         width={BlockSize.Full}
         height={BlockSize.Full}
         backgroundColor={BackgroundColor.backgroundAlternative}
-        borderRadius={BorderRadius.XS}
-        border={`1px solid ${BorderColor.borderMuted}`}
-        boxShadow="var(--shadow-size-lg) var(--color-shadow-default)"
       >
         <Box display={Display.Flex} marginBottom={4}>
           <Text variant={TextVariant.headingMd}>{t('connecting')}</Text>
diff --git a/ui/pages/permissions-connect/snaps/snap-install/index.scss b/ui/pages/permissions-connect/snaps/snap-install/index.scss
index a831bedfe02c..a4b012c7a954 100644
--- a/ui/pages/permissions-connect/snaps/snap-install/index.scss
+++ b/ui/pages/permissions-connect/snaps/snap-install/index.scss
@@ -1,8 +1,7 @@
 @use "design-system";
 
 .snap-install {
-  border: 1px solid var(--color-border-muted);
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
+  box-shadow: none;
 
   &__content {
     position: relative;
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 9ce4c7cd5332..0adeac87dfeb 100644
--- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
@@ -135,7 +135,8 @@ export default function SnapInstall({
           overflowY: 'auto',
           flex: !isLoading && !hasError && '1',
         }}
-        padding={4}
+        paddingLeft={4}
+        paddingRight={4}
       >
         {isLoading && (
           <Box
diff --git a/ui/pages/permissions-connect/snaps/snap-result/index.scss b/ui/pages/permissions-connect/snaps/snap-result/index.scss
index 068a25a7a823..983f8f773f9c 100644
--- a/ui/pages/permissions-connect/snaps/snap-result/index.scss
+++ b/ui/pages/permissions-connect/snaps/snap-result/index.scss
@@ -1,14 +1,8 @@
 .snap-result {
-  border: 1px solid var(--color-border-muted);
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
+  box-shadow: none;
 
   .page-container__footer {
     width: 100%;
     border-top: 0;
   }
-
-  &__content {
-    flex: 1 0 auto;
-    overflow-y: auto;
-  }
 }
diff --git a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
index c03c38e6d4e2..acd06f4c58a4 100644
--- a/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
+++ b/ui/pages/permissions-connect/snaps/snap-result/snap-result.js
@@ -80,7 +80,6 @@ export default function SnapResult({
         />
         <Text
           fontWeight={FontWeight.Bold}
-          textAlign={TextAlign.Center}
           variant={TextVariant.headingLg}
           paddingBottom={2}
           marginTop={4}
@@ -148,12 +147,15 @@ export default function SnapResult({
       />
       <Box
         className="snap-result__content"
-        padding={4}
+        paddingLeft={4}
+        paddingRight={4}
         alignItems={AlignItems.center}
         flexDirection={FlexDirection.Column}
+        style={{
+          overflowY: 'auto',
+        }}
         backgroundColor={BackgroundColor.backgroundAlternative}
         height={BlockSize.Full}
-        justifyContent={JustifyContent.center}
       >
         {isLoading && (
           <Box
diff --git a/ui/pages/permissions-connect/snaps/snap-update/index.scss b/ui/pages/permissions-connect/snaps/snap-update/index.scss
index 906f7902fb39..bf2c7adc7fe2 100644
--- a/ui/pages/permissions-connect/snaps/snap-update/index.scss
+++ b/ui/pages/permissions-connect/snaps/snap-update/index.scss
@@ -1,8 +1,7 @@
 @use "design-system";
 
 .snap-update {
-  border: 1px solid var(--color-border-muted);
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
+  box-shadow: none;
 
   &__content {
     position: relative;
diff --git a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
index 6d2085b1f107..6fc328330a55 100644
--- a/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
+++ b/ui/pages/permissions-connect/snaps/snap-update/snap-update.js
@@ -121,7 +121,8 @@ export default function SnapUpdate({
           overflowY: 'auto',
           flex: !isLoading && '1',
         }}
-        padding={4}
+        paddingLeft={4}
+        paddingRight={4}
       >
         {!isLoading && !hasError && (
           <Text
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/index.scss b/ui/pages/permissions-connect/snaps/snaps-connect/index.scss
index eca7d940cece..ca4892571cbe 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/index.scss
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/index.scss
@@ -1,7 +1,4 @@
 .snaps-connect {
-  border: 1px solid var(--color-border-muted);
-  box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
-
   .page-container__footer {
     border-top: 0;
   }
diff --git a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
index 0aa86f1d0ba1..645019848e25 100644
--- a/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
+++ b/ui/pages/permissions-connect/snaps/snaps-connect/snaps-connect.js
@@ -168,11 +168,7 @@ export default function SnapsConnect({
           <Box paddingBottom={2}>
             <SnapIcon snapId={snaps[0]} avatarSize={IconSize.Xl} />
           </Box>
-          <Text
-            paddingBottom={2}
-            variant={TextVariant.headingMd}
-            textAlign="center"
-          >
+          <Text paddingBottom={2} variant={TextVariant.headingMd}>
             {t('connectionRequest')}
           </Text>
           <Text
diff --git a/ui/pages/remove-snap-account/index.scss b/ui/pages/remove-snap-account/index.scss
index 9230983cb513..8a93833c0337 100644
--- a/ui/pages/remove-snap-account/index.scss
+++ b/ui/pages/remove-snap-account/index.scss
@@ -5,9 +5,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
-
   @include design-system.screen-sm-min {
     width: $width-screen-sm-min;
   }
diff --git a/ui/pages/remove-snap-account/remove-snap-account.tsx b/ui/pages/remove-snap-account/remove-snap-account.tsx
index c4a37900bbee..00b69a69afb3 100644
--- a/ui/pages/remove-snap-account/remove-snap-account.tsx
+++ b/ui/pages/remove-snap-account/remove-snap-account.tsx
@@ -53,21 +53,19 @@ const RemoveSnapAccount = ({
         flexDirection={FlexDirection.Column}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.center}
-        padding={4}
-        width={BlockSize.Full}
+        paddingLeft={4}
+        paddingRight={4}
         style={{ flexGrow: 1 }}
       >
         <Box
           display={Display.Flex}
           flexDirection={FlexDirection.Row}
           justifyContent={JustifyContent.spaceBetween}
-          width={BlockSize.Full}
         >
           <Box
             display={Display.Flex}
             flexDirection={FlexDirection.Column}
             alignItems={AlignItems.center}
-            width={BlockSize.Full}
           >
             <Box paddingBottom={2}>
               <AvatarIcon
@@ -77,11 +75,7 @@ const RemoveSnapAccount = ({
                 size={AvatarIconSize.Xl}
               />
             </Box>
-            <Text
-              textAlign={TextAlign.Center}
-              variant={TextVariant.headingLg}
-              paddingBottom={2}
-            >
+            <Text textAlign={TextAlign.Center} variant={TextVariant.headingLg}>
               {t('removeSnapAccountTitle')}
             </Text>
             <SnapAccountCard address={publicAddress} remove={true} />
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 894886a186dc..e715e1cdc759 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -135,12 +135,9 @@ class SettingsPage extends PureComponent {
 
     return (
       <div
-        className={classnames(
-          'main-container main-container--has-shadow settings-page',
-          {
-            'settings-page--selected': currentPath !== SETTINGS_ROUTE,
-          },
-        )}
+        className={classnames('main-container settings-page', {
+          'settings-page--selected': currentPath !== SETTINGS_ROUTE,
+        })}
       >
         <Box
           className="settings-page__header"
diff --git a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
index c8d09fa9f68e..29fefa61b305 100644
--- a/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
+++ b/ui/pages/snap-account-redirect/__snapshots__/create-snap-redirect.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
       </div>
     </div>
     <div
-      class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--height-full"
+      class="mm-box mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-center mm-box--height-full"
     >
       <div
         class="mm-box mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
@@ -54,7 +54,7 @@ exports[`<SnapAccountRedirect /> renders the url and message when provided and i
           class="mm-box mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column mm-box--align-items-center"
         >
           <h2
-            class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--padding-bottom-2 mm-box--color-text-default"
+            class="mm-box mm-text mm-text--heading-lg mm-text--text-align-center mm-box--color-text-default"
             data-testid="snap-account-redirect-content-title"
           >
             Finish signing
diff --git a/ui/pages/snap-account-redirect/components/snap-account-redirect-context.tsx b/ui/pages/snap-account-redirect/components/snap-account-redirect-context.tsx
index c35a732231b5..d599d062e960 100644
--- a/ui/pages/snap-account-redirect/components/snap-account-redirect-context.tsx
+++ b/ui/pages/snap-account-redirect/components/snap-account-redirect-context.tsx
@@ -48,7 +48,6 @@ const SnapAccountRedirectContent = ({
           data-testid="snap-account-redirect-content-title"
           textAlign={TextAlign.Center}
           variant={TextVariant.headingLg}
-          paddingBottom={2}
         >
           {t('snapAccountRedirectFinishSigningTitle')}
         </Text>
diff --git a/ui/pages/snap-account-redirect/snap-account-redirect.tsx b/ui/pages/snap-account-redirect/snap-account-redirect.tsx
index 96faaef95b6c..da52916c0f1b 100644
--- a/ui/pages/snap-account-redirect/snap-account-redirect.tsx
+++ b/ui/pages/snap-account-redirect/snap-account-redirect.tsx
@@ -42,7 +42,8 @@ const SnapAccountRedirect = ({
         flexDirection={FlexDirection.Column}
         alignItems={AlignItems.center}
         height={BlockSize.Full}
-        padding={4}
+        paddingLeft={4}
+        paddingRight={4}
       >
         <SnapAccountRedirectContent
           url={url}
diff --git a/ui/pages/snaps/snap-view/index.scss b/ui/pages/snaps/snap-view/index.scss
index 4c5c4f6fba1d..3c5f8ab4a0c4 100644
--- a/ui/pages/snaps/snap-view/index.scss
+++ b/ui/pages/snaps/snap-view/index.scss
@@ -6,8 +6,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
   width: 100%;
   flex-flow: column nowrap;
 
diff --git a/ui/pages/snaps/snap-view/snap-view.js b/ui/pages/snaps/snap-view/snap-view.js
index 121fcb8f3d15..7f068cc5f0d1 100644
--- a/ui/pages/snaps/snap-view/snap-view.js
+++ b/ui/pages/snaps/snap-view/snap-view.js
@@ -92,7 +92,12 @@ function SnapView() {
   };
 
   return (
-    <div className="snap-view">
+    <div
+      className="snap-view"
+      style={{
+        boxShadow: 'var(--shadow-size-md) var(--color-shadow-default)',
+      }}
+    >
       <Page backgroundColor={BackgroundColor.backgroundDefault}>
         {!snap.hideSnapBranding && (
           <SnapAuthorshipHeader
diff --git a/ui/pages/snaps/snaps-list/index.scss b/ui/pages/snaps/snaps-list/index.scss
index 4088af1d0b53..eb98e5753596 100644
--- a/ui/pages/snaps/snaps-list/index.scss
+++ b/ui/pages/snaps/snaps-list/index.scss
@@ -6,8 +6,6 @@
   $width-screen-md-min: 80vw;
   $width-screen-lg-min: 62vw;
 
-  // prevent overflow-x
-  max-width: 100%;
   width: 100%;
   flex-flow: column nowrap;