diff --git a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
index 5e8cc1914b3d..75ed5d03c1eb 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
+++ b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap
@@ -30,28 +30,28 @@ exports[`Review Recovery Phrase Component should match snapshot 1`] = `
       </ul>
     </div>
     <div
-      class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
+      class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
     >
       <h2
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text recovery-phrase__header mm-text--heading-lg mm-text--font-weight-bold mm-box--color-text-default"
       >
         Write down your Secret Recovery Phrase
       </h2>
     </div>
     <div
-      class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
+      class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
     >
       <h4
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
       >
         Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
       </h4>
     </div>
     <div
-      class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
+      class="mm-box recovery-phrase__tips mm-box--margin-bottom-4 mm-box--text-align-left"
     >
       <h4
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--heading-sm mm-box--color-text-default"
       >
         Tips
         :
@@ -59,21 +59,21 @@ exports[`Review Recovery Phrase Component should match snapshot 1`] = `
       <ul>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Save in a password manager
           </h4>
         </li>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Store in a safe deposit box
           </h4>
         </li>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Write down and store in multiple secret places
           </h4>
@@ -326,28 +326,28 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec
       </ul>
     </div>
     <div
-      class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
+      class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
     >
       <h2
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography recovery-phrase__header typography--h2 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text recovery-phrase__header mm-text--heading-lg mm-text--font-weight-bold mm-box--color-text-default"
       >
         Write down your Secret Recovery Phrase
       </h2>
     </div>
     <div
-      class="box box--margin-bottom-4 box--flex-direction-row box--justify-content-center box--text-align-center box--display-flex"
+      class="mm-box mm-box--margin-bottom-4 mm-box--justify-content-center mm-box--text-align-center"
     >
       <h4
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
       >
         Write down this 12-word Secret Recovery Phrase and save it in a place that you trust and only you can access.
       </h4>
     </div>
     <div
-      class="box recovery-phrase__tips box--margin-bottom-4 box--flex-direction-row box--text-align-left"
+      class="mm-box recovery-phrase__tips mm-box--margin-bottom-4 mm-box--text-align-left"
     >
       <h4
-        class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
+        class="mm-box mm-text mm-text--heading-sm mm-box--color-text-default"
       >
         Tips
         :
@@ -355,21 +355,21 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec
       <ul>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Save in a password manager
           </h4>
         </li>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Store in a safe deposit box
           </h4>
         </li>
         <li>
           <h4
-            class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="mm-box mm-text mm-text--heading-sm mm-text--font-weight-normal mm-box--color-text-default"
           >
             Write down and store in multiple secret places
           </h4>
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 c3e049c12fa2..c6b375354f86 100644
--- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
+++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js
@@ -1,17 +1,21 @@
 import React, { useState, useContext } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
-import Typography from '../../../components/ui/typography';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { ONBOARDING_CONFIRM_SRP_ROUTE } from '../../../helpers/constants/routes';
 import {
-  TEXT_ALIGN,
-  TypographyVariant,
+  Text,
+  Icon,
+  IconName,
+  Box,
+} from '../../../components/component-library';
+import {
+  TextVariant,
+  TextAlign,
   JustifyContent,
-  FONT_WEIGHT,
+  FontWeight,
   IconColor,
 } from '../../../helpers/constants/design-system';
 import {
@@ -23,7 +27,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { Icon, IconName } from '../../../components/component-library';
 import RecoveryPhraseChips from './recovery-phrase-chips';
 
 export default function RecoveryPhrase({ secretRecoveryPhrase }) {
@@ -44,52 +47,56 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) {
       <ThreeStepProgressBar stage={threeStepStages.RECOVERY_PHRASE_REVIEW} />
       <Box
         justifyContent={JustifyContent.center}
-        textAlign={TEXT_ALIGN.CENTER}
+        textAlign={TextAlign.Center}
         marginBottom={4}
       >
-        <Typography
-          variant={TypographyVariant.H2}
-          fontWeight={FONT_WEIGHT.BOLD}
+        <Text
+          variant={TextVariant.headingLg}
+          fontWeight={FontWeight.Bold}
           className="recovery-phrase__header"
         >
           {t('seedPhraseWriteDownHeader')}
-        </Typography>
+        </Text>
       </Box>
       <Box
         justifyContent={JustifyContent.center}
-        textAlign={TEXT_ALIGN.CENTER}
+        textAlign={TextAlign.Center}
         marginBottom={4}
       >
-        <Typography variant={TypographyVariant.H4}>
+        <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
           {t('seedPhraseWriteDownDetails')}
-        </Typography>
+        </Text>
       </Box>
       <Box
-        textAlign={TEXT_ALIGN.LEFT}
+        textAlign={TextAlign.Left}
         marginBottom={4}
         className="recovery-phrase__tips"
       >
-        <Typography
-          variant={TypographyVariant.H4}
-          fontWeight={FONT_WEIGHT.BOLD}
-        >
-          {t('tips')}:
-        </Typography>
+        <Text variant={TextVariant.headingSm}>{t('tips')}:</Text>
         <ul>
           <li>
-            <Typography variant={TypographyVariant.H4}>
+            <Text
+              variant={TextVariant.headingSm}
+              fontWeight={FontWeight.Normal}
+            >
               {t('seedPhraseIntroSidebarBulletOne')}
-            </Typography>
+            </Text>
           </li>
           <li>
-            <Typography variant={TypographyVariant.H4}>
+            <Text
+              variant={TextVariant.headingSm}
+              fontWeight={FontWeight.Normal}
+            >
               {t('seedPhraseIntroSidebarBulletThree')}
-            </Typography>
+            </Text>
           </li>
           <li>
-            <Typography variant={TypographyVariant.H4}>
+            <Text
+              variant={TextVariant.headingSm}
+              fontWeight={FontWeight.Normal}
+            >
               {t('seedPhraseIntroSidebarBulletFour')}
-            </Typography>
+            </Text>
           </li>
         </ul>
       </Box>