diff --git a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
index 22120e4a4..3268aaa77 100644
--- a/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
+++ b/ui/components/app/nft-default-image/__snapshots__/nft-default-image.test.js.snap
@@ -8,7 +8,7 @@ exports[`NFT Default Image should match snapshot with all provided props 1`] = `
     tabindex="0"
   >
     <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography nft-default__text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
     >
       NFT Name
        
@@ -28,7 +28,7 @@ exports[`NFT Default Image should match snapshot with missing image click handle
     tabindex="0"
   >
     <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography nft-default__text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
     >
       NFT Name
        
@@ -48,7 +48,7 @@ exports[`NFT Default Image should render with no props 1`] = `
     tabindex="0"
   >
     <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography nft-default__text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+      class="box mm-text nft-default__text mm-text--body-sm box--flex-direction-row box--color-text-default"
     >
       [unknownCollection]
        
diff --git a/ui/components/app/nft-default-image/nft-default-image.js b/ui/components/app/nft-default-image/nft-default-image.js
index 42c4ac37f..ef4cc90cf 100644
--- a/ui/components/app/nft-default-image/nft-default-image.js
+++ b/ui/components/app/nft-default-image/nft-default-image.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import Typography from '../../ui/typography';
-import { TypographyVariant } from '../../../helpers/constants/design-system';
+import { TextVariant } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { Text } from '../../component-library';
 
 export default function NftDefaultImage({ name, tokenId, handleImageClick }) {
   const t = useI18nContext();
@@ -17,9 +17,9 @@ export default function NftDefaultImage({ name, tokenId, handleImageClick }) {
       })}
       onClick={handleImageClick}
     >
-      <Typography variant={TypographyVariant.H6} className="nft-default__text">
+      <Text variant={TextVariant.bodySm} as="h6" className="nft-default__text">
         {name ?? t('unknownCollection')} <br /> #{tokenId}
-      </Typography>
+      </Text>
     </Tag>
   );
 }