diff --git a/ui/components/app/detected-token/detected-token-address/detected-token-address.js b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
index 9ae894aafc1b..2e752bce1948 100644
--- a/ui/components/app/detected-token/detected-token-address/detected-token-address.js
+++ b/ui/components/app/detected-token/detected-token-address/detected-token-address.js
@@ -6,16 +6,16 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 
 import Box from '../../../ui/box';
 import Button from '../../../ui/button';
-import Typography from '../../../ui/typography';
 import Tooltip from '../../../ui/tooltip';
 
 import {
   DISPLAY,
   TextColor,
-  TypographyVariant,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 
 import { shortenAddress } from '../../../../helpers/utils/util';
+import { Text } from '../../../component-library';
 
 const DetectedTokenAddress = ({ tokenAddress }) => {
   const t = useI18nContext();
@@ -23,17 +23,18 @@ const DetectedTokenAddress = ({ tokenAddress }) => {
 
   return (
     <Box display={DISPLAY.INLINE_FLEX} className="detected-token-address">
-      <Typography variant={TypographyVariant.H7} color={TextColor.textDefault}>
+      <Text variant={TextVariant.bodySm} as="h6" color={TextColor.textDefault}>
         {`${t('tokenAddress')}:`}
-      </Typography>
-      <Typography
-        variant={TypographyVariant.H7}
+      </Text>
+      <Text
+        variant={TextVariant.bodySm}
+        as="h6"
         color={TextColor.primaryDefault}
         marginLeft={2}
         marginRight={2}
       >
         {shortenAddress(tokenAddress)}
-      </Typography>
+      </Text>
       <Tooltip
         position="bottom"
         title={copied ? t('copiedExclamation') : t('copyToClipboard')}