From a3b063f8de83a0be0e936d27aa9768b2eeaf5e4f Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:22:32 +0800
Subject: [PATCH 01/10] fix: polish login modal

---
 .../onboarding-flow/welcome/login-options.tsx | 91 +++++++++++--------
 1 file changed, 52 insertions(+), 39 deletions(-)

diff --git a/ui/pages/onboarding-flow/welcome/login-options.tsx b/ui/pages/onboarding-flow/welcome/login-options.tsx
index 7af1dc47865..e9ca2e4bab3 100644
--- a/ui/pages/onboarding-flow/welcome/login-options.tsx
+++ b/ui/pages/onboarding-flow/welcome/login-options.tsx
@@ -19,6 +19,7 @@ import {
   AlignItems,
   BackgroundColor,
   BlockSize,
+  BorderRadius,
   Display,
   FontWeight,
   IconColor,
@@ -87,11 +88,24 @@ export default function LoginOptions({
       isClosedOnOutsideClick={false}
       data-theme={ThemeType.dark}
     >
-      <ModalContent size={ModalContentSize.Sm} alignItems={AlignItems.center}>
+      <ModalContent
+        alignItems={AlignItems.center}
+        borderRadius={BorderRadius.XL}
+        modalDialogProps={{
+          style: {
+            width: '398px',
+            maxWidth: '398px', // overrides default sm size
+            paddingTop: '24px',
+            paddingBottom: '24px',
+          }
+        }}
+      >
         <ModalHeader onClose={onClose}>
-          {t('onboardingOptionTitle')}
+          <Text variant={TextVariant.bodyMdBold} textAlign={TextAlign.Center}>
+            {t('onboardingOptionTitle')}
+          </Text>
         </ModalHeader>
-        <Box paddingInline={4}>
+        <Box paddingInline={6}>
           <SocialButton
             data-testid={
               loginOption === LOGIN_OPTION.EXISTING
@@ -136,6 +150,7 @@ export default function LoginOptions({
           />
           <Box
             alignItems={AlignItems.center}
+            marginTop={2}
             marginBottom={4}
             className="options-modal__or"
           >
@@ -143,7 +158,7 @@ export default function LoginOptions({
               width={BlockSize.Min}
               variant={TextVariant.bodyMd}
               fontWeight={FontWeight.Medium}
-              color={TextColor.textMuted}
+              color={TextColor.textAlternative}
               backgroundColor={BackgroundColor.backgroundDefault}
               paddingInline={2}
               marginInline="auto"
@@ -172,42 +187,40 @@ export default function LoginOptions({
               ? t('onboardingSrpImport')
               : t('onboardingSrpCreate')}
           </Button>
-          <Text
-            variant={TextVariant.bodySm}
-            fontWeight={FontWeight.Medium}
-            textAlign={TextAlign.Center}
-            paddingTop={8}
-            width={BlockSize.Full}
-            margin={'auto'}
-          >
-            {t('onboardingLoginFooter', [
-              <Text
-                as="a"
-                href="https://consensys.io/terms-of-use"
-                target="_blank"
-                rel="noopener noreferrer"
-                variant={TextVariant.bodySm}
-                fontWeight={FontWeight.Medium}
-                color={TextColor.primaryDefault}
-                key="onboardingLoginFooterTermsOfUse"
-              >
-                {t('onboardingLoginFooterTermsOfUse')}
-              </Text>,
-              <Text
-                as="a"
-                variant={TextVariant.bodySm}
-                fontWeight={FontWeight.Medium}
-                href="https://consensys.io/privacy-notice"
-                target="_blank"
-                rel="noopener noreferrer"
-                color={TextColor.primaryDefault}
-                key="onboardingLoginFooterPrivacyNotice"
-              >
-                {t('onboardingLoginFooterPrivacyNotice')}
-              </Text>,
-            ])}
-          </Text>
         </Box>
+        <Text
+          variant={TextVariant.bodyXsMedium}
+          color={TextColor.textAlternative}
+          textAlign={TextAlign.Center}
+          paddingTop={4}
+          paddingInline={12}
+          marginInline={8}
+        >
+          {t('onboardingLoginFooter', [
+            <Text
+              as="a"
+              href="https://consensys.io/terms-of-use"
+              target="_blank"
+              rel="noopener noreferrer"
+              variant={TextVariant.bodyXsMedium}
+              color={TextColor.primaryDefault}
+              key="onboardingLoginFooterTermsOfUse"
+            >
+              {t('onboardingLoginFooterTermsOfUse')}
+            </Text>,
+            <Text
+              as="a"
+              variant={TextVariant.bodyXsMedium}
+              href="https://consensys.io/privacy-notice"
+              target="_blank"
+              rel="noopener noreferrer"
+              color={TextColor.primaryDefault}
+              key="onboardingLoginFooterPrivacyNotice"
+            >
+              {t('onboardingLoginFooterPrivacyNotice')}
+            </Text>,
+          ])}
+        </Text>
       </ModalContent>
     </Modal>
   );

From 34bf26b75b2f78908938bf00f9f9e42772e02f77 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:23:03 +0800
Subject: [PATCH 02/10] fix: modify container width to improve balance

---
 ui/pages/onboarding-flow/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/onboarding-flow/index.scss b/ui/pages/onboarding-flow/index.scss
index 948afcb307d..bcc6adee9f2 100644
--- a/ui/pages/onboarding-flow/index.scss
+++ b/ui/pages/onboarding-flow/index.scss
@@ -24,7 +24,7 @@
     padding-inline: 24px;
     padding-top: 32px;
     padding-bottom: 32px;
-    max-width: 446px;
+    max-width: 504px;
     min-height: 627px;
     height: auto;
 

From 50b63bdde80284012ae4646790ac9238840386cc Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:23:53 +0800
Subject: [PATCH 03/10] fix: add margin bottom to improve spacing on scroll

---
 ui/pages/onboarding-flow/onboarding-flow.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/ui/pages/onboarding-flow/onboarding-flow.js b/ui/pages/onboarding-flow/onboarding-flow.js
index 80abcb76f03..2c2c02f7191 100644
--- a/ui/pages/onboarding-flow/onboarding-flow.js
+++ b/ui/pages/onboarding-flow/onboarding-flow.js
@@ -259,11 +259,9 @@ export default function OnboardingFlow() {
         borderStyle={
           isFullPage || isPopup ? BorderStyle.none : BorderStyle.solid
         }
-        borderRadius={BorderRadius.LG}
+        borderRadius={BorderRadius.XL}
         marginTop={pathname === ONBOARDING_WELCOME_ROUTE || isPopup ? 0 : 3}
-        ///: BEGIN:ONLY_INCLUDE_IF(build-flask)
-        marginBottom={pathname === ONBOARDING_EXPERIMENTAL_AREA ? 6 : 0}
-        ///: END:ONLY_INCLUDE_IF
+        marginBottom={10}
         marginInline="auto"
         borderColor={BorderColor.borderMuted}
       >

From d8155173d226e5744f6b0f8ac571e72e91fded92 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:25:09 +0800
Subject: [PATCH 04/10] fix: polish srp spacing, text and colors to improve
 balance

---
 .../srp-details-modal/srp-details-modal.tsx   |  3 +-
 .../app/srp-input-import/srp-input-import.tsx |  3 +-
 .../onboarding-flow/import-srp/import-srp.js  | 83 ++++++++++---------
 .../onboarding-app-header/index.scss          |  6 +-
 4 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/ui/components/app/srp-details-modal/srp-details-modal.tsx b/ui/components/app/srp-details-modal/srp-details-modal.tsx
index 1161c7b83ac..62c046814af 100644
--- a/ui/components/app/srp-details-modal/srp-details-modal.tsx
+++ b/ui/components/app/srp-details-modal/srp-details-modal.tsx
@@ -4,6 +4,7 @@ import {
   AlignItems,
   Display,
   TextAlign,
+  TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -33,7 +34,7 @@ export default function SRPDetailsModal({ onClose }: { onClose: () => void }) {
       <ModalOverlay />
       <ModalContent alignItems={AlignItems.center}>
         <ModalHeader onClose={onClose}>
-          <Text variant={TextVariant.headingMd} textAlign={TextAlign.Center}>
+          <Text variant={TextVariant.bodyMdBold} textAlign={TextAlign.Center}>
             {t('srpDetailsTitle')}
           </Text>
         </ModalHeader>
diff --git a/ui/components/app/srp-input-import/srp-input-import.tsx b/ui/components/app/srp-input-import/srp-input-import.tsx
index 982c61e4ad1..5f2072a899c 100644
--- a/ui/components/app/srp-input-import/srp-input-import.tsx
+++ b/ui/components/app/srp-input-import/srp-input-import.tsx
@@ -278,11 +278,12 @@ export default function SrpInputImport({ onChange }: SrpInputImportProps) {
               <Box
                 display={Display.Grid}
                 className="srp-input-import__words-list"
-                gap={2}
+                gap={3}
               >
                 {draftSrp.map((word, index) => {
                   return (
                     <TextField
+                      backgroundColor={BackgroundColor.backgroundMuted}
                       inputProps={{
                         ref: (el) => {
                           if (el) {
diff --git a/ui/pages/onboarding-flow/import-srp/import-srp.js b/ui/pages/onboarding-flow/import-srp/import-srp.js
index 995e3c09f27..8ba1f7143a7 100644
--- a/ui/pages/onboarding-flow/import-srp/import-srp.js
+++ b/ui/pages/onboarding-flow/import-srp/import-srp.js
@@ -133,53 +133,62 @@ export default function ImportSRP({ submitSecretRecoveryPhrase }) {
         <SRPDetailsModal onClose={() => setShowSrpDetailsModal(false)} />
       )}
       <Box>
-        <Box marginBottom={4}>
+        {/* Back Button - Isolated */}
+        <Box marginBottom={6} style={{ paddingInline: '6px' }}>
           <ButtonIcon
             iconName={IconName.ArrowLeft}
             color={IconColor.iconDefault}
-            size={ButtonIconSize.Md}
+            size={ButtonIconSize.Sm}
             data-testid="import-srp-back-button"
             onClick={onBack}
             ariaLabel={t('back')}
           />
         </Box>
-        <Box textAlign={TextAlign.Left} marginBottom={2}>
-          <Text variant={TextVariant.headingLg}>{t('importAWallet')}</Text>
-        </Box>
-        <Box
-          display={Display.Flex}
-          alignItems={AlignItems.center}
-          marginBottom={4}
-        >
-          <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
-            {t('typeYourSRP')}
-          </Text>
-          <ButtonIcon
-            iconName={IconName.Info}
-            size={ButtonIconSize.Sm}
-            color={IconColor.iconAlternative}
-            onClick={onShowSrpDetailsModal}
-            ariaLabel="info"
-          />
-        </Box>
-        <Box width={BlockSize.Full}>
-          <form onSubmit={(e) => e.preventDefault()}>
-            <SrpInputImport onChange={setSecretRecoveryPhrase} />
-            {srpError && (
-              <Box marginTop={2}>
-                <Text
-                  data-testid="import-srp-error"
-                  variant={TextVariant.bodySm}
-                  color={TextColor.errorDefault}
-                >
-                  {srpError}
-                </Text>
-              </Box>
-            )}
-          </form>
+
+        {/* All Content with Consistent Padding */}
+        <Box paddingInline={3}>
+          <Box textAlign={TextAlign.Left} marginBottom={1}>
+            <Text variant={TextVariant.headingMd}>{t('importAWallet')}</Text>
+          </Box>
+          <Box
+            display={Display.Flex}
+            alignItems={AlignItems.center}
+            marginBottom={7}
+          >
+            <Text
+              variant={TextVariant.bodyMd}
+              color={TextColor.textAlternative}
+            >
+              {t('typeYourSRP')}
+            </Text>
+            <ButtonIcon
+              iconName={IconName.Info}
+              size={ButtonIconSize.Sm}
+              color={IconColor.iconAlternative}
+              onClick={onShowSrpDetailsModal}
+              ariaLabel="info"
+            />
+          </Box>
+
+          <Box width={BlockSize.Full}>
+            <form onSubmit={(e) => e.preventDefault()}>
+              <SrpInputImport onChange={setSecretRecoveryPhrase} />
+              {srpError && (
+                <Box marginTop={2}>
+                  <Text
+                    data-testid="import-srp-error"
+                    variant={TextVariant.bodySm}
+                    color={TextColor.errorDefault}
+                  >
+                    {srpError}
+                  </Text>
+                </Box>
+              )}
+            </form>
+          </Box>
         </Box>
       </Box>
-      <Box
+      <Box paddingInline={3}
         display={Display.Flex}
         flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.center}
diff --git a/ui/pages/onboarding-flow/onboarding-app-header/index.scss b/ui/pages/onboarding-flow/onboarding-app-header/index.scss
index e192f4005a4..684613f8eee 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/index.scss
+++ b/ui/pages/onboarding-flow/onboarding-app-header/index.scss
@@ -13,10 +13,10 @@
       }
     }
 
-    border-radius: 20px;
+    border-radius: 12px;
     position: absolute;
-    top: 24px;
-    right: 24px;
+    top: 16px;
+    right: 16px;
     z-index: design-system.$onboarding-app-header-z-index;
 
     &-icon {

From be23156b82a3a35f59e719f18d99fd3b81ebdc48 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:26:18 +0800
Subject: [PATCH 05/10] fix: polish password styling to match srp, refine copy

---
 app/_locales/en/messages.json                 | 10 +--
 app/_locales/en_GB/messages.json              | 10 +--
 .../app/password-form/password-form.tsx       |  4 +-
 .../create-password/create-password.js        | 79 +++++++++++--------
 .../change-password/change-password.tsx       |  5 +-
 5 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5fd9282994d..a096e5299ba 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1618,7 +1618,7 @@
     "message": "Create password"
   },
   "createPasswordDetails": {
-    "message": "Unlocks MetaMask on this device only."
+    "message": "Unlocks MetaMask on this device only"
   },
   "createPasswordDetailsSocial": {
     "message": "Losing this password means losing wallet access on all devices, "
@@ -1878,7 +1878,7 @@
     "message": "Default RPC URL"
   },
   "defaultSettingsSubTitle": {
-    "message": "MetaMask uses default settings to best balance safety and ease of use. Change these settings to further increase your privacy."
+    "message": "Configure the default settings to enhance your privacy"
   },
   "defaultSettingsTitle": {
     "message": "Default privacy settings"
@@ -4287,7 +4287,7 @@
     "message": "We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features)."
   },
   "onboardingMetametricCheckboxTitleOne": {
-    "message": "Gather basic usage data"
+    "message": "Basic usage data"
   },
   "onboardingMetametricCheckboxTitleTwo": {
     "message": "Product updates"
@@ -4344,7 +4344,7 @@
     "message": "Clear all"
   },
   "onboardingSrpInputPlaceholder": {
-    "message": "Add a space between each word and make sure no one is watching."
+    "message": "Add a space between each word. Make sure no one sees your SRP."
   },
   "onekey": {
     "message": "OneKey"
@@ -7622,7 +7622,7 @@
     "message": "Wallet not found"
   },
   "walletReadyLearn": {
-    "message": "$1 you can keep this phrase safe so you never lose access to your money.",
+    "message": "$1 to keep your Secret Recovery Phrase safe so you don't lose your money. Without it, you can't use MetaMask.",
     "description": "$1 is the link to Learn how"
   },
   "walletReadyLearnRemind": {
diff --git a/app/_locales/en_GB/messages.json b/app/_locales/en_GB/messages.json
index 5fd9282994d..9c7dc3460e8 100644
--- a/app/_locales/en_GB/messages.json
+++ b/app/_locales/en_GB/messages.json
@@ -1618,7 +1618,7 @@
     "message": "Create password"
   },
   "createPasswordDetails": {
-    "message": "Unlocks MetaMask on this device only."
+    "message": "Unlocks MetaMask on this device only"
   },
   "createPasswordDetailsSocial": {
     "message": "Losing this password means losing wallet access on all devices, "
@@ -1878,7 +1878,7 @@
     "message": "Default RPC URL"
   },
   "defaultSettingsSubTitle": {
-    "message": "MetaMask uses default settings to best balance safety and ease of use. Change these settings to further increase your privacy."
+    "message": "Configure the default settings to enhance your privacy"
   },
   "defaultSettingsTitle": {
     "message": "Default privacy settings"
@@ -4287,7 +4287,7 @@
     "message": "We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features)."
   },
   "onboardingMetametricCheckboxTitleOne": {
-    "message": "Gather basic usage data"
+    "message": "Basic usage data"
   },
   "onboardingMetametricCheckboxTitleTwo": {
     "message": "Product updates"
@@ -4344,7 +4344,7 @@
     "message": "Clear all"
   },
   "onboardingSrpInputPlaceholder": {
-    "message": "Add a space between each word and make sure no one is watching."
+    "message": "Add a space between each word. Make sure no one sees your SRP."
   },
   "onekey": {
     "message": "OneKey"
@@ -7622,7 +7622,7 @@
     "message": "Wallet not found"
   },
   "walletReadyLearn": {
-    "message": "$1 you can keep this phrase safe so you never lose access to your money.",
+    "message": "$1  to keep your Secret Recovery Phrase safe so you don't lose your money. Without it, you can't use MetaMask.",
     "description": "$1 is the link to Learn how"
   },
   "walletReadyLearnRemind": {
diff --git a/ui/components/app/password-form/password-form.tsx b/ui/components/app/password-form/password-form.tsx
index 384f78ef336..79f54ff2e64 100644
--- a/ui/components/app/password-form/password-form.tsx
+++ b/ui/components/app/password-form/password-form.tsx
@@ -83,7 +83,7 @@ export default function PasswordForm({
   }, [password.length]);
 
   return (
-    <Box>
+    <Box paddingInline={3}>
       <FormTextField
         label={t('newPasswordCreate')}
         id="create-password-new"
@@ -99,7 +99,7 @@ export default function PasswordForm({
           handlePasswordChange(e.target.value);
         }}
         helpTextProps={{
-          color: TextColor.textMuted,
+          color: TextColor.textAlternative,
           'data-testid': 'short-password-error',
         }}
         helpText={t('passwordNotLongEnough')}
diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js
index b7a7fae489e..7652f76f4c5 100644
--- a/ui/pages/onboarding-flow/create-password/create-password.js
+++ b/ui/pages/onboarding-flow/create-password/create-password.js
@@ -336,9 +336,10 @@ export default function CreatePassword({
       href={ZENDESK_URLS.PASSWORD_ARTICLE}
       target="_blank"
       rel="noopener noreferrer"
+      style={{ paddingLeft: '4px' }}
     >
       <span className="create-password__link-text">
-        {t('learnMoreUpperCaseWithDot')}
+        {t('learnMoreUpperCase')}
       </span>
     </a>
   );
@@ -363,13 +364,14 @@ export default function CreatePassword({
       <Box>
         <Box
           justifyContent={JustifyContent.flexStart}
-          marginBottom={4}
+          marginBottom={6}
           width={BlockSize.Full}
+          style={{ paddingInline: '6px' }}
         >
           <ButtonIcon
             iconName={IconName.ArrowLeft}
             color={IconColor.iconDefault}
-            size={ButtonIconSize.Md}
+            size={ButtonIconSize.Sm}
             data-testid="create-password-back-button"
             type="button"
             onClick={handleBackClick}
@@ -377,70 +379,79 @@ export default function CreatePassword({
           />
         </Box>
         <Box
+          paddingInline={3}
           justifyContent={JustifyContent.flexStart}
           marginBottom={4}
           width={BlockSize.Full}
         >
-          <Text variant={TextVariant.headingLg} as="h2">
+          <Text variant={TextVariant.headingMd} as="h2" marginBottom={1}>
             {t('createPassword')}
           </Text>
-          {isSocialLoginFlow ? (
-            <Text
-              variant={TextVariant.bodyMd}
-              color={TextColor.textAlternative}
-              as="h2"
-            >
-              {t('createPasswordDetailsSocial')}
+          <Box marginBottom={7}>
+            {isSocialLoginFlow ? (
+              <Text
+                variant={TextVariant.bodyMd}
+                color={TextColor.textAlternative}
+                as="h2"
+              >
+                {t('createPasswordDetailsSocial')}
+                <Text
+                  variant={TextVariant.bodyMd}
+                  color={TextColor.warningDefault}
+                  as="span"
+                >
+                  {t('createPasswordDetailsSocialReset')}
+                </Text>
+              </Text>
+            ) : (
               <Text
                 variant={TextVariant.bodyMd}
-                color={TextColor.warningDefault}
-                as="span"
+                color={TextColor.textAlternative}
+                as="h2"
               >
-                {t('createPasswordDetailsSocialReset')}
+                {t('createPasswordDetails')}
               </Text>
-            </Text>
-          ) : (
-            <Text
-              variant={TextVariant.bodyMd}
-              color={TextColor.textAlternative}
-              as="h2"
-            >
-              {t('createPasswordDetails')}
-            </Text>
-          )}
+            )}
+          </Box>
         </Box>
         <PasswordForm onChange={(newPassword) => setPassword(newPassword)} />
+
+        {/* Terms Container - 24px from password form */}
         <Box
+          marginInline={3}
           className="create-password__terms-container"
           alignItems={AlignItems.center}
-          justifyContent={JustifyContent.spaceBetween}
+          justifyContent={JustifyContent.flexStart}
           marginTop={6}
           backgroundColor={BackgroundColor.backgroundMuted}
           padding={3}
           borderRadius={BorderRadius.LG}
         >
           <Checkbox
-            inputProps={{ 'data-testid': 'create-password-terms' }}
+            inputProps={{
+              'data-testid': 'create-password-terms',
+            }}
             alignItems={AlignItems.flexStart}
             isChecked={termsChecked}
             onChange={() => {
               setTermsChecked(!termsChecked);
             }}
             label={
-              <Text variant={TextVariant.bodySm} color={TextColor.textDefault}>
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textDefault}
+                style={{ whiteSpace: 'normal' }}
+              >
                 {checkboxLabel}
-                {!isSocialLoginFlow && (
-                  <>
-                    <br />
-                    {createPasswordLink}
-                  </>
-                )}
+                {!isSocialLoginFlow && <>{createPasswordLink}</>}
               </Text>
             }
           />
         </Box>
       </Box>
-      <Box>
+
+      {/* Button pinned to bottom */}
+      <Box paddingInline={3}>
         <Button
           data-testid="create-password-submit"
           variant={ButtonVariant.Primary}
diff --git a/ui/pages/settings/security-tab/change-password/change-password.tsx b/ui/pages/settings/security-tab/change-password/change-password.tsx
index d596c4de708..5eaa22b32e7 100644
--- a/ui/pages/settings/security-tab/change-password/change-password.tsx
+++ b/ui/pages/settings/security-tab/change-password/change-password.tsx
@@ -146,7 +146,7 @@ const ChangePassword = () => {
       rel="noopener noreferrer"
     >
       <span className="change-password__link-text">
-        {t('learnMoreUpperCaseWithDot')}
+        {t('learnMoreUpperCase')}
       </span>
     </a>
   );
@@ -247,7 +247,8 @@ const ChangePassword = () => {
               className="create-password__terms-container"
               alignItems={AlignItems.center}
               justifyContent={JustifyContent.spaceBetween}
-              marginTop={6}
+              marginTop={4}
+              style={{ marginLeft: '12px', marginRight: '12px' }}
             >
               <Checkbox
                 inputProps={{ 'data-testid': 'change-password-terms' }}

From 2a0006137b2f4ff3bbca2121781f8b759b784130 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:26:56 +0800
Subject: [PATCH 06/10] fix: polish wallet created to match flow

---
 .../onboarding-flow/creation-successful/creation-successful.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.js
index 880cd6f30c6..d0399723e43 100644
--- a/ui/pages/onboarding-flow/creation-successful/creation-successful.js
+++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.js
@@ -196,7 +196,7 @@ export default function CreationSuccessful() {
           alignItems={AlignItems.flexStart}
         >
           <Text
-            variant={TextVariant.headingLg}
+            variant={TextVariant.headingMd}
             as="h2"
             justifyContent={JustifyContent.center}
             style={{

From 06f892d0d618a32ac5839e9ca0178bcaaba4940c Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:27:39 +0800
Subject: [PATCH 07/10] fix: polish metametrics screens, update checkbox
 spacing to improve readability

---
 .../__snapshots__/metametrics.test.js.snap    |  4 +-
 .../metametrics/metametrics.js                | 81 +++++++++++--------
 .../metametrics/metametrics.test.js           |  2 +-
 3 files changed, 52 insertions(+), 35 deletions(-)

diff --git a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
index f044df2e209..c34d81b9da8 100644
--- a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
+++ b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap
@@ -55,7 +55,7 @@ exports[`Onboarding Metametrics Component renders match snapshot 1`] = `
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
           >
-            Gather basic usage data
+            Basic usage data
           </p>
         </span>
       </label>
@@ -168,7 +168,7 @@ exports[`Onboarding Metametrics Component renders match snapshot after new polic
           <p
             class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
           >
-            Gather basic usage data
+            Basic usage data
           </p>
         </span>
       </label>
diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.js b/ui/pages/onboarding-flow/metametrics/metametrics.js
index 4597f3fdfb8..c5d493357a4 100644
--- a/ui/pages/onboarding-flow/metametrics/metametrics.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.js
@@ -157,9 +157,8 @@ export default function OnboardingMetametrics() {
       gap={4}
     >
       <Text
-        variant={TextVariant.headingLg}
+        variant={TextVariant.headingMd}
         textAlign={TextAlign.Left}
-        fontWeight={FontWeight.Bold}
         marginBottom={4}
       >
         {t('onboardingMetametricsTitle')}
@@ -190,9 +189,11 @@ export default function OnboardingMetametrics() {
 
       <Box
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.flexStart}
         gap={2}
-        padding={3}
+        padding={4}
         borderRadius={BorderRadius.LG}
         backgroundColor={BackgroundColor.backgroundMuted}
         className="onboarding-metametrics__checkbox"
@@ -208,6 +209,22 @@ export default function OnboardingMetametrics() {
           }
         }}
       >
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          gap={1}
+        >
+          <Text variant={TextVariant.bodyMdMedium}>
+            {t('onboardingMetametricCheckboxTitleOne')}
+          </Text>
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textAlternative}
+            textAlign={TextAlign.Left}
+          >
+            {t('onboardingMetametricCheckboxDescriptionOne')}
+          </Text>
+        </Box>
         <Checkbox
           id="metametrics-opt-in"
           data-testid="metametrics-checkbox"
@@ -217,28 +234,21 @@ export default function OnboardingMetametrics() {
           onClick={(e) => e.stopPropagation()}
           inputProps={{
             onClick: (e) => e.stopPropagation(),
+            style: {
+              '--checkbox-icon-justify-content': 'flex-end'
+            }
           }}
-          label={
-            <Text variant={TextVariant.bodyMdMedium}>
-              {t('onboardingMetametricCheckboxTitleOne')}
-            </Text>
-          }
-          alignItems={AlignItems.center}
+          alignItems={AlignItems.flexStart}
         />
-        <Text
-          variant={TextVariant.bodySm}
-          color={TextColor.textAlternative}
-          textAlign={TextAlign.Left}
-        >
-          {t('onboardingMetametricCheckboxDescriptionOne')}
-        </Text>
       </Box>
 
       <Box
         display={Display.Flex}
-        flexDirection={FlexDirection.Column}
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.flexStart}
         gap={2}
-        padding={3}
+        padding={4}
         borderRadius={BorderRadius.LG}
         backgroundColor={BackgroundColor.backgroundMuted}
         className={`${isParticipateInMetaMetricsChecked ? 'onboarding-metametrics__checkbox' : 'onboarding-metametrics__checkbox-disabled'}`}
@@ -262,6 +272,22 @@ export default function OnboardingMetametrics() {
           })
         }
       >
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          gap={1}
+        >
+          <Text variant={TextVariant.bodyMdMedium}>
+            {t('onboardingMetametricCheckboxTitleTwo')}
+          </Text>
+          <Text
+            variant={TextVariant.bodySm}
+            color={TextColor.textAlternative}
+            textAlign={TextAlign.Left}
+          >
+            {t('onboardingMetametricCheckboxDescriptionTwo')}
+          </Text>
+        </Box>
         <Checkbox
           id="metametrics-datacollection-opt-in"
           data-testid="metametrics-data-collection-checkbox"
@@ -277,21 +303,12 @@ export default function OnboardingMetametrics() {
           onClick={(e) => e.stopPropagation()}
           inputProps={{
             onClick: (e) => e.stopPropagation(),
+            style: {
+              '--checkbox-icon-justify-content': 'flex-end'
+            }
           }}
-          label={
-            <Text variant={TextVariant.bodyMdMedium}>
-              {t('onboardingMetametricCheckboxTitleTwo')}
-            </Text>
-          }
-          alignItems={AlignItems.center}
+          alignItems={AlignItems.flexStart}
         />
-        <Text
-          variant={TextVariant.bodySm}
-          color={TextColor.textAlternative}
-          textAlign={TextAlign.Left}
-        >
-          {t('onboardingMetametricCheckboxDescriptionTwo')}
-        </Text>
       </Box>
 
       <Box width={BlockSize.Full}>
diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.test.js b/ui/pages/onboarding-flow/metametrics/metametrics.test.js
index 66f5c2911e7..9e7b421cb51 100644
--- a/ui/pages/onboarding-flow/metametrics/metametrics.test.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.test.js
@@ -124,7 +124,7 @@ describe('Onboarding Metametrics Component', () => {
     expect(title).toBeInTheDocument();
     expect(description).toBeInTheDocument();
 
-    const checkboxLabel = queryByText('Gather basic usage data');
+    const checkboxLabel = queryByText('Basic usage data');
     expect(checkboxLabel).toBeInTheDocument();
 
     const checkbox = getAllByRole('checkbox')[0];

From a26cdcb987d17465a2cfc3b6de098ef4b36c8ca0 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:28:14 +0800
Subject: [PATCH 08/10] fix: polish pin metamask banner to align styling

---
 .../onboarding-app-header/onboarding-app-header.js       | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/pages/onboarding-flow/onboarding-app-header/onboarding-app-header.js b/ui/pages/onboarding-flow/onboarding-app-header/onboarding-app-header.js
index 4969e59c347..697991bf999 100644
--- a/ui/pages/onboarding-flow/onboarding-app-header/onboarding-app-header.js
+++ b/ui/pages/onboarding-flow/onboarding-app-header/onboarding-app-header.js
@@ -28,6 +28,7 @@ import {
   BorderColor,
   TextColor,
   TextVariant,
+  BorderRadius,
 } from '../../../helpers/constants/design-system';
 import {
   ONBOARDING_COMPLETION_ROUTE,
@@ -80,19 +81,21 @@ export default function OnboardingAppHeader({ isWelcomePage }) {
             <BannerTip
               borderColor={BorderColor.borderMuted}
               backgroundColor={BackgroundColor.backgroundMuted}
+              borderRadius={BorderRadius.XL}
               title={t('pinMetaMask')}
-              gap={4}
+              gap={3}
               titleProps={{
                 color: TextColor.textDefault,
-                variant: TextVariant.bodyMd,
+                variant: TextVariant.bodyMdMedium,
                 paddingRight: 2,
+                paddingBottom: 1,
               }}
               className="onboarding-app-header__banner-tip"
               padding={3}
               alignItems={AlignItems.center}
             >
               <Text
-                variant={TextVariant.bodySm}
+                variant={TextVariant.bodySmMedium}
                 alignItems={AlignItems.center}
                 color={TextColor.textAlternative}
               >

From c5fb72050d14fdde95a4d0ccc96cc7f556ec6a96 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Fri, 3 Oct 2025 21:28:35 +0800
Subject: [PATCH 09/10] fix: polish default privacy settings screen

---
 .../privacy-settings/privacy-settings.js      | 72 +++++++------------
 1 file changed, 25 insertions(+), 47 deletions(-)

diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
index d4bb54429b9..74116434084 100644
--- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
+++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.js
@@ -245,59 +245,36 @@ export default function PrivacySettings() {
           })}
         >
           <div className="list-view">
-            <Box
-              className="privacy-settings__header"
-              marginTop={6}
-              marginBottom={6}
-              display={Display.Flex}
-              flexDirection={FlexDirection.Column}
-              justifyContent={JustifyContent.flexStart}
-            >
-              <Box
-                display={Display.Flex}
-                alignItems={AlignItems.center}
-                flexDirection={FlexDirection.Row}
-                justifyContent={JustifyContent.flexStart}
-              >
-                <Button
-                  type="inline"
-                  icon={
-                    <Icon
-                      name={IconName.ArrowLeft}
-                      size={IconSize.Lg}
-                      color={IconColor.iconDefault}
-                    />
-                  }
+            <Box>
+              {/* Back Button - Isolated */}
+              <Box marginBottom={6} style={{ paddingInline: '6px' }}>
+                <ButtonIcon
+                  iconName={IconName.ArrowLeft}
+                  size={IconSize.Sm}
+                  color={IconColor.iconDefault}
                   data-testid="privacy-settings-back-button"
                   onClick={handleSubmit}
                 />
-                <Box
-                  display={Display.Flex}
-                  alignItems={AlignItems.center}
-                  justifyContent={JustifyContent.center}
-                  width={BlockSize.Full}
-                >
-                  <Text variant={TextVariant.headingLg} as="h2">
+              </Box>
+
+              {/* All Content with Consistent Padding */}
+              <Box paddingInline={3}>
+                <Box textAlign={TextAlign.Left} marginBottom={1}>
+                  <Text variant={TextVariant.headingMd} as="h2">
                     {t('defaultSettingsTitle')}
                   </Text>
                 </Box>
+                <Box marginBottom={7}>
+                  <Text
+                    variant={TextVariant.bodyMd}
+                    color={TextColor.textAlternative}
+                  >
+                    {t('defaultSettingsSubTitle')}
+                  </Text>
+                </Box>
               </Box>
-              <Text variant={TextVariant.bodyLgMedium} marginTop={5}>
-                {t('defaultSettingsSubTitle')}
-              </Text>
-              <a
-                href="https://support.metamask.io/privacy-and-security/privacy-best-practices"
-                target="_blank"
-                rel="noreferrer"
-                key="learnMoreAboutPrivacy"
-                style={{
-                  fontSize: 'var(--font-size-5)',
-                }}
-              >
-                {t('learnMoreAboutPrivacy')}
-              </a>
             </Box>
-            <Box>
+            <Box paddingInline={3}>
               <Box
                 as="ul"
                 marginTop={4}
@@ -319,7 +296,7 @@ export default function PrivacySettings() {
                       justifyContent={JustifyContent.spaceBetween}
                       data-testid={`category-item-${item.title}`}
                     >
-                      <Text variant={TextVariant.bodyLgMedium}>
+                      <Text variant={TextVariant.bodyMdMedium}>
                         {item.title}
                       </Text>
                       <Button
@@ -327,6 +304,7 @@ export default function PrivacySettings() {
                         icon={
                           <Icon
                             name={IconName.ArrowRight}
+                            size={IconSize.Sm}
                             color={IconColor.iconDefault}
                           />
                         }
@@ -335,7 +313,7 @@ export default function PrivacySettings() {
                     </Box>
                     <Text
                       className="description"
-                      variant={TextVariant.bodyMd}
+                      variant={TextVariant.bodySmMedium}
                       color={TextColor.textAlternative}
                     >
                       {item.subtitle}

From e5a772fe29c951a73219b8db03c432cb855395b2 Mon Sep 17 00:00:00 2001
From: Amanda Yeoh <amanda.yeoh@consensys.net>
Date: Sat, 4 Oct 2025 12:46:43 +0800
Subject: [PATCH 10/10] fix: polish recovery phrase screens

---
 .../confirm-recovery-phrase.js                | 105 ++++++++--------
 .../recovery-phrase/review-recovery-phrase.js | 118 ++++++++++--------
 2 files changed, 117 insertions(+), 106 deletions(-)

diff --git a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
index 0ce43471c17..19fea30cd8a 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js
@@ -187,34 +187,35 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
       flexDirection={FlexDirection.Column}
       justifyContent={JustifyContent.spaceBetween}
       height={BlockSize.Full}
-      gap={6}
+      gap={4}
       className="recovery-phrase recovery-phrase__confirm"
       data-testid="confirm-recovery-phrase"
     >
+      {showConfirmModal && (
+        <ConfirmSrpModal
+          isError={!matching}
+          onContinue={handleConfirmedPhrase}
+          onClose={() => {
+            resetQuizWords();
+            setShowConfirmModal(false);
+          }}
+        />
+      )}
       <Box>
-        {showConfirmModal && (
-          <ConfirmSrpModal
-            isError={!matching}
-            onContinue={handleConfirmedPhrase}
-            onClose={() => {
-              resetQuizWords();
-              setShowConfirmModal(false);
-            }}
-          />
-        )}
         {isFromReminder && isFromSettingsSecurity ? (
           <Box
             className="recovery-phrase__header"
             display={Display.Grid}
             alignItems={AlignItems.center}
-            gap={1}
+            gap={3}
             marginBottom={4}
             width={BlockSize.Full}
+            style={{ paddingInline: '6px' }}
           >
             <ButtonIcon
               iconName={IconName.ArrowLeft}
               color={IconColor.iconDefault}
-              size={ButtonIconSize.Md}
+              size={ButtonIconSize.Sm}
               data-testid="reveal-recovery-phrase-confirm-back-button"
               onClick={() => navigate(-1)}
               ariaLabel={t('back')}
@@ -225,54 +226,54 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
             <ButtonIcon
               iconName={IconName.Close}
               color={IconColor.iconDefault}
-              size={ButtonIconSize.Md}
+              size={ButtonIconSize.Sm}
               data-testid="reveal-recovery-phrase-confirm-close-button"
               onClick={onClose}
               ariaLabel={t('close')}
             />
           </Box>
         ) : (
-          <>
-            <Box
-              justifyContent={JustifyContent.flexStart}
-              marginBottom={4}
-              width={BlockSize.Full}
-            >
-              <ButtonIcon
-                iconName={IconName.ArrowLeft}
-                color={IconColor.iconDefault}
-                size={ButtonIconSize.Md}
-                data-testid="confirm-recovery-phrase-back-button"
-                onClick={() => navigate(-1)}
-                ariaLabel={t('back')}
-              />
-            </Box>
-            <Box
-              justifyContent={JustifyContent.flexStart}
-              marginBottom={4}
-              width={BlockSize.Full}
-            >
-              <Text variant={TextVariant.headingLg} as="h2">
-                {t('confirmRecoveryPhraseTitle')}
-              </Text>
-            </Box>
-          </>
+          <Box
+            justifyContent={JustifyContent.flexStart}
+            marginBottom={6}
+            width={BlockSize.Full}
+            style={{ paddingInline: '6px' }}
+          >
+            <ButtonIcon
+              iconName={IconName.ArrowLeft}
+              color={IconColor.iconDefault}
+              size={ButtonIconSize.Sm}
+              data-testid="confirm-recovery-phrase-back-button"
+              onClick={() => navigate(-1)}
+              ariaLabel={t('back')}
+            />
+          </Box>
         )}
-        <Box marginBottom={6}>
-          <Text variant={TextVariant.bodyMd} color={TextColor.textDefault}>
-            {t('confirmRecoveryPhraseDetails')}
-          </Text>
+
+        <Box paddingInline={3}>
+          <Box justifyContent={JustifyContent.flexStart} marginBottom={1}>
+            <Text variant={TextVariant.headingMd} as="h2">
+              {t('confirmRecoveryPhraseTitle')}
+            </Text>
+          </Box>
+          <Box marginBottom={7}>
+            <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
+              {t('confirmRecoveryPhraseDetails')}
+            </Text>
+          </Box>
+
+          {splitSecretRecoveryPhrase.length > 0 && (
+            <RecoveryPhraseChips
+              secretRecoveryPhrase={splitSecretRecoveryPhrase}
+              quizWords={quizWords}
+              confirmPhase
+              setInputValue={handleQuizInput}
+            />
+          )}
         </Box>
-        {splitSecretRecoveryPhrase.length > 0 && (
-          <RecoveryPhraseChips
-            secretRecoveryPhrase={splitSecretRecoveryPhrase}
-            quizWords={quizWords}
-            confirmPhase
-            setInputValue={handleQuizInput}
-          />
-        )}
       </Box>
-      <Box width={BlockSize.Full}>
+
+      <Box paddingInline={3}>
         <Button
           variant={ButtonVariant.Primary}
           width={BlockSize.Full}
diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
index aa20e44047d..0e247a3d4e8 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
@@ -162,16 +162,15 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
       display={Display.Flex}
       flexDirection={FlexDirection.Column}
       justifyContent={JustifyContent.spaceBetween}
-      alignItems={AlignItems.Center}
       height={BlockSize.Full}
-      gap={6}
+      gap={4}
       className="recovery-phrase"
       data-testid="recovery-phrase"
     >
+      {showSrpDetailsModal && (
+        <SRPDetailsModal onClose={() => setShowSrpDetailsModal(false)} />
+      )}
       <Box>
-        {showSrpDetailsModal && (
-          <SRPDetailsModal onClose={() => setShowSrpDetailsModal(false)} />
-        )}
         {isFromReminder && isFromSettingsSecurity ? (
           <Box
             className="recovery-phrase__header"
@@ -180,11 +179,12 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
             gap={3}
             marginBottom={4}
             width={BlockSize.Full}
+            style={{ paddingInline: '6px' }}
           >
             <ButtonIcon
               iconName={IconName.ArrowLeft}
               color={IconColor.iconDefault}
-              size={ButtonIconSize.Md}
+              size={ButtonIconSize.Sm}
               data-testid="reveal-recovery-phrase-review-back-button"
               onClick={handleBack}
               ariaLabel={t('back')}
@@ -195,7 +195,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
             <ButtonIcon
               iconName={IconName.Close}
               color={IconColor.iconDefault}
-              size={ButtonIconSize.Md}
+              size={ButtonIconSize.Sm}
               data-testid="reveal-recovery-phrase-review-close-button"
               onClick={onClose}
               ariaLabel={t('close')}
@@ -204,60 +204,70 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
         ) : (
           <Box
             justifyContent={JustifyContent.flexStart}
-            marginBottom={4}
+            marginBottom={6}
             width={BlockSize.Full}
+            style={{ paddingInline: '6px' }}
           >
-            <Text variant={TextVariant.headingLg} as="h2">
+            <ButtonIcon
+              iconName={IconName.ArrowLeft}
+              color={IconColor.iconDefault}
+              size={ButtonIconSize.Sm}
+              data-testid="recovery-phrase-back-button"
+              onClick={handleBack}
+              ariaLabel={t('back')}
+            />
+          </Box>
+        )}
+
+        <Box paddingInline={3}>
+          <Box justifyContent={JustifyContent.flexStart} marginBottom={1}>
+            <Text variant={TextVariant.headingMd} as="h2">
               {t('seedPhraseReviewTitle')}
             </Text>
           </Box>
-        )}
-        <Box marginBottom={6}>
-          <Text
-            variant={TextVariant.bodyMd}
-            color={TextColor.textAlternative}
-            marginBottom={6}
-          >
-            {t('seedPhraseReviewDetails', [
-              <ButtonLink
-                key="seedPhraseReviewDetails"
-                size={ButtonLinkSize.Inherit}
-                onClick={handleOnShowSrpDetailsModal}
-              >
-                {t('secretRecoveryPhrase')}
-              </ButtonLink>,
-              <Text
-                key="seedPhraseReviewDetails2"
-                fontWeight={FontWeight.Medium}
-                color={TextColor.textAlternative}
-              >
-                {t('seedPhraseReviewDetails2')}
-              </Text>,
-            ])}
-          </Text>
+          <Box marginBottom={7}>
+            <Text
+              variant={TextVariant.bodyMd}
+              color={TextColor.textAlternative}
+            >
+              {t('seedPhraseReviewDetails', [
+                <ButtonLink
+                  key="seedPhraseReviewDetails"
+                  size={ButtonLinkSize.Inherit}
+                  onClick={handleOnShowSrpDetailsModal}
+                >
+                  {t('secretRecoveryPhrase')}
+                </ButtonLink>,
+                <Text
+                  key="seedPhraseReviewDetails2"
+                  fontWeight={FontWeight.Medium}
+                  color={TextColor.textAlternative}
+                >
+                  {t('seedPhraseReviewDetails2')}
+                </Text>,
+              ])}
+            </Text>
+          </Box>
+
+          <RecoveryPhraseChips
+            secretRecoveryPhrase={secretRecoveryPhrase.split(' ')}
+            phraseRevealed={phraseRevealed}
+            revealPhrase={() => {
+              trackEvent({
+                category: MetaMetricsEventCategory.Onboarding,
+                event:
+                  MetaMetricsEventName.OnboardingWalletSecurityPhraseRevealed,
+                properties: {
+                  hd_entropy_index: hdEntropyIndex,
+                },
+              });
+              setPhraseRevealed(true);
+            }}
+          />
         </Box>
-        <RecoveryPhraseChips
-          secretRecoveryPhrase={secretRecoveryPhrase.split(' ')}
-          phraseRevealed={phraseRevealed}
-          revealPhrase={() => {
-            trackEvent({
-              category: MetaMetricsEventCategory.Onboarding,
-              event:
-                MetaMetricsEventName.OnboardingWalletSecurityPhraseRevealed,
-              properties: {
-                hd_entropy_index: hdEntropyIndex,
-              },
-            });
-            setPhraseRevealed(true);
-          }}
-        />
       </Box>
-      <Box
-        width={BlockSize.Full}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Column}
-        gap={2}
-      >
+
+      <Box paddingInline={3}>
         <Button
           width={BlockSize.Full}
           variant={ButtonVariant.Primary}