diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
index ab7b6365adf8..0ffa849476da 100644
--- a/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
+++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.js
@@ -2,11 +2,11 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Box from '../../ui/box';
 import Dialog from '../../ui/dialog';
-import Typography from '../../ui/typography/typography';
+import { Text } from '../../component-library';
 import {
-  TypographyVariant,
-  TEXT_ALIGN,
-  FONT_WEIGHT,
+  TextVariant,
+  TextAlign,
+  FontWeight,
   DISPLAY,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -32,22 +32,24 @@ export default function NftsDetectionNotice() {
             />
           </Box>
           <Box paddingLeft={2}>
-            <Typography
+            <Text
               color={TextColor.textDefault}
-              align={TEXT_ALIGN.LEFT}
-              variant={TypographyVariant.H7}
-              fontWeight={FONT_WEIGHT.BOLD}
+              align={TextAlign.Left}
+              variant={TextVariant.bodySm}
+              as="h6"
+              fontWeight={FontWeight.Bold}
             >
               {t('newNFTsDetected')}
-            </Typography>
-            <Typography
+            </Text>
+            <Text
               color={TextColor.textDefault}
-              align={TEXT_ALIGN.LEFT}
-              variant={TypographyVariant.H7}
-              boxProps={{ marginBottom: 4 }}
+              align={TextAlign.Left}
+              variant={TextVariant.bodySm}
+              as="h6"
+              marginBottom={4}
             >
               {t('newNFTDetectedMessage')}
-            </Typography>
+            </Text>
             <Button
               type="link"
               onClick={(e) => {
diff --git a/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js b/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js
new file mode 100644
index 000000000000..808a6d720ae8
--- /dev/null
+++ b/ui/components/app/nfts-detection-notice/nfts-detection-notice.stories.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import NftsDetectionNotice from '.';
+
+export default {
+  title: 'Components/App/NftsDetectionNotice',
+};
+
+export const DefaultStory = () => <NftsDetectionNotice />;
+
+DefaultStory.storyName = 'Default';