diff --git a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
index 34d080518..c6cd73087 100644
--- a/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@@ -6,20 +6,19 @@ import { getTokenTrackerLink } from '@metamask/etherscan-link';
 import UrlIcon from '../../../components/ui/url-icon';
 import { addressSummary } from '../../../helpers/utils/util';
 import { formatCurrency } from '../../../helpers/utils/confirm-tx.util';
-import Typography from '../../../components/ui/typography';
 import Box from '../../../components/ui/box';
 import Button from '../../../components/ui/button';
 import SimulationErrorMessage from '../../../components/ui/simulation-error-message';
 import EditGasFeeButton from '../../../components/app/edit-gas-fee-button';
 import MultiLayerFeeMessage from '../../../components/app/multilayer-fee-message';
 import {
-  TypographyVariant,
-  FONT_WEIGHT,
   BLOCK_SIZES,
   JustifyContent,
   DISPLAY,
   TextColor,
   IconColor,
+  TextVariant,
+  AlignItems,
 } from '../../../helpers/constants/design-system';
 import { ConfirmPageContainerWarning } from '../../../components/app/confirm-page-container/confirm-page-container-content';
 import GasDetailsItem from '../../../components/app/gas-details-item';
@@ -31,6 +30,7 @@ import {
   ICON_NAMES,
   ButtonIcon,
   Icon,
+  Text,
 } from '../../../components/component-library';
 
 export default class ConfirmApproveContent extends Component {
@@ -330,12 +330,9 @@ export default class ConfirmApproveContent extends Component {
               className="confirm-approve-content__custom-nonce-header"
               justifyContent={JustifyContent.flexStart}
             >
-              <Typography
-                variant={TypographyVariant.H6}
-                fontWeight={FONT_WEIGHT.NORMAL}
-              >
+              <Text variant={TextVariant.bodySm} as="h6">
                 {t('nonce')}
-              </Typography>
+              </Text>
               <Button
                 type="link"
                 className="confirm-approve-content__custom-nonce-edit"
@@ -351,13 +348,13 @@ export default class ConfirmApproveContent extends Component {
                 {t('edit')}
               </Button>
             </Box>
-            <Typography
+            <Text
               className="confirm-approve-content__custom-nonce-value"
-              variant={TypographyVariant.H6}
-              fontWeight={FONT_WEIGHT.BOLD}
+              variant={TextVariant.bodySmBold}
+              as="h6"
             >
               {customNonceValue || nextNonce}
-            </Typography>
+            </Text>
           </div>
         )}
       </>
@@ -543,21 +540,21 @@ export default class ConfirmApproveContent extends Component {
           display={DISPLAY.FLEX}
           className="confirm-approve-content__icon-display-content"
         >
-          <Box display={DISPLAY.FLEX}>
+          <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
             <UrlIcon
               className="confirm-approve-content__siteimage-identicon"
               fallbackClassName="confirm-approve-content__siteimage-identicon"
               name={origin}
               url={siteImage}
             />
-            <Typography
-              variant={TypographyVariant.H6}
-              fontWeight={FONT_WEIGHT.NORMAL}
+            <Text
+              variant={TextVariant.bodySm}
+              as="h6"
               color={TextColor.textAlternative}
-              boxProps={{ marginLeft: 1, marginTop: 2 }}
+              marginLeft={1}
             >
               {origin}
-            </Typography>
+            </Text>
           </Box>
         </Box>
         <div
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 00426cf53..bed280458 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -24,18 +24,18 @@ import { EthOverview } from '../../components/app/wallet-overview';
 import WhatsNewPopup from '../../components/app/whats-new-popup';
 import RecoveryPhraseReminder from '../../components/app/recovery-phrase-reminder';
 import ActionableMessage from '../../components/ui/actionable-message/actionable-message';
-import Typography from '../../components/ui/typography/typography';
 import {
-  TypographyVariant,
   FONT_WEIGHT,
   DISPLAY,
   TextColor,
+  TextVariant,
 } from '../../helpers/constants/design-system';
 import { SECOND } from '../../../shared/constants/time';
 import {
   ButtonIcon,
   ICON_NAMES,
   ICON_SIZES,
+  Text,
 } from '../../components/component-library';
 
 import {
@@ -298,20 +298,20 @@ export default class Home extends PureComponent {
                     infoText={error.data.snapId}
                     descriptionText={
                       <>
-                        <Typography
+                        <Text
+                          variant={TextVariant.bodyMd}
+                          as="h5"
                           color={TextColor.textAlternative}
-                          variant={TypographyVariant.H5}
-                          fontWeight={FONT_WEIGHT.NORMAL}
                         >
                           {t('somethingWentWrong')}
-                        </Typography>
-                        <Typography
+                        </Text>
+                        <Text
                           color={TextColor.textAlternative}
-                          variant={TypographyVariant.H7}
-                          fontWeight={FONT_WEIGHT.NORMAL}
+                          variant={TextVariant.bodySm}
+                          as="h6"
                         >
                           {t('snapError', [error.message, error.code])}
-                        </Typography>
+                        </Text>
                       </>
                     }
                     onIgnore={async () => {
@@ -334,17 +334,13 @@ export default class Home extends PureComponent {
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />
-                <Typography
-                  variant={TypographyVariant.H7}
-                  fontWeight={FONT_WEIGHT.NORMAL}
-                >
+                <Text variant={TextVariant.bodySm} as="h6">
                   {t('newNftAddedMessage')}
-                </Typography>
+                </Text>
                 <ButtonIcon
                   iconName={ICON_NAMES.CLOSE}
                   size={ICON_SIZES.SM}
                   ariaLabel={t('close')}
-                  onClick={onAutoHide}
                 />
               </Box>
             }
@@ -360,12 +356,9 @@ export default class Home extends PureComponent {
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />
-                <Typography
-                  variant={TypographyVariant.H7}
-                  fontWeight={FONT_WEIGHT.NORMAL}
-                >
+                <Text variant={TextVariant.bodySm} as="h6">
                   {t('removeNftMessage')}
-                </Typography>
+                </Text>
                 <ButtonIcon
                   iconName={ICON_NAMES.CLOSE}
                   size={ICON_SIZES.SM}
@@ -383,12 +376,9 @@ export default class Home extends PureComponent {
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-network-notification-icon" />
-                <Typography
-                  variant={TypographyVariant.H7}
-                  fontWeight={FONT_WEIGHT.NORMAL}
-                >
+                <Text variant={TextVariant.bodySm} as="h6">
                   {t('newNetworkAdded', [newNetworkAddedName])}
-                </Typography>
+                </Text>
                 <ButtonIcon
                   iconName={ICON_NAMES.CLOSE}
                   size={ICON_SIZES.SM}
@@ -408,20 +398,20 @@ export default class Home extends PureComponent {
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-tokens-imported-notification-icon" />
                 <Box>
-                  <Typography
+                  <Text
                     className="home__new-tokens-imported-notification-title"
-                    variant={TypographyVariant.H6}
-                    fontWeight={FONT_WEIGHT.BOLD}
+                    variant={TextVariant.bodySmBold}
+                    as="h6"
                   >
                     {t('newTokensImportedTitle')}
-                  </Typography>
-                  <Typography
+                  </Text>
+                  <Text
                     className="home__new-tokens-imported-notification-message"
-                    variant={TypographyVariant.H7}
-                    fontWeight={FONT_WEIGHT.NORMAL}
+                    variant={TextVariant.bodySm}
+                    as="h6"
                   >
                     {t('newTokensImportedMessage', [newTokensImported])}
-                  </Typography>
+                  </Text>
                 </Box>
 
                 <ButtonIcon
@@ -509,8 +499,9 @@ export default class Home extends PureComponent {
         {newNetworkAddedConfigurationId && (
           <Popover className="home__new-network-added">
             <i className="fa fa-check-circle fa-2x home__new-network-added__check-circle" />
-            <Typography
-              variant={TypographyVariant.H4}
+            <Text
+              variant={TextVariant.headingSm}
+              as="h4"
               marginTop={5}
               marginRight={9}
               marginLeft={9}
@@ -518,7 +509,7 @@ export default class Home extends PureComponent {
               fontWeight={FONT_WEIGHT.BOLD}
             >
               {t('networkAddedSuccessfully')}
-            </Typography>
+            </Text>
             <Box marginTop={8} marginRight={8} marginLeft={8} marginBottom={5}>
               <Button
                 type="primary"
@@ -528,22 +519,22 @@ export default class Home extends PureComponent {
                   clearNewNetworkAdded();
                 }}
               >
-                <Typography
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.NORMAL}
+                <Text
+                  variant={TextVariant.bodySm}
+                  as="h6"
                   color={TextColor.primaryInverse}
                 >
                   {t('switchToNetwork', [newNetworkAddedName])}
-                </Typography>
+                </Text>
               </Button>
               <Button type="secondary" onClick={() => clearNewNetworkAdded()}>
-                <Typography
-                  variant={TypographyVariant.H6}
-                  fontWeight={FONT_WEIGHT.NORMAL}
+                <Text
+                  variant={TextVariant.bodySm}
+                  as="h6"
                   color={TextColor.primaryDefault}
                 >
                   {t('dismiss')}
-                </Typography>
+                </Text>
               </Button>
             </Box>
           </Popover>