diff --git a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
index 7052eabbceee..ac3af6bff3bd 100644
--- a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
+++ b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.js
@@ -3,14 +3,12 @@ import PropTypes from 'prop-types';
 
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
-import Box from '../../../ui/box';
-import Button from '../../../ui/button';
 import {
-  DISPLAY,
+  Display,
   FontWeight,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import { Text } from '../../../component-library';
+import { Text, Box, ButtonLink } from '../../../component-library';
 
 const NUMBER_OF_AGGREGATORS_TO_DISPLAY = 2;
 
@@ -21,7 +19,7 @@ const DetectedTokenAggregators = ({ aggregators }) => {
   const [displayMore, setDisplayMore] = useState(false);
 
   return (
-    <Box display={DISPLAY.INLINE_FLEX} className="detected-token-aggregators">
+    <Box display={Display.InlineFlex} className="detected-token-aggregators">
       <Text variant={TextVariant.bodySm} as="h6" fontWeight={FontWeight.Normal}>
         {t('fromTokenLists', [
           numOfHiddenAggregators > 0 && !displayMore ? (
@@ -34,14 +32,13 @@ const DetectedTokenAggregators = ({ aggregators }) => {
               {`${aggregators
                 .slice(0, NUMBER_OF_AGGREGATORS_TO_DISPLAY)
                 .join(', ')}`}
-              <Button
-                type="link"
+              <ButtonLink
                 className="detected-token-aggregators__link"
                 onClick={() => setDisplayMore(true)}
                 key="detected-token-aggrgators-link"
               >
                 {t('plusXMore', [numOfHiddenAggregators])}
-              </Button>
+              </ButtonLink>
             </Text>
           ) : (
             <Text
diff --git a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js
index 85dbca2f6e6b..38e8056aad32 100644
--- a/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js
+++ b/ui/components/app/detected-token/detected-token-aggregators/detected-token-aggregators.stories.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { DISPLAY } from '../../../../helpers/constants/design-system';
+import { Display } from '../../../../helpers/constants/design-system';
 
-import Box from '../../../ui/box';
+import { Box } from '../../../component-library';
 import DetectedTokenAggregators from './detected-token-aggregators';
 
 export default {
@@ -31,7 +31,7 @@ export default {
 
 const Template = (args) => {
   return (
-    <Box display={DISPLAY.GRID}>
+    <Box display={Display.Grid}>
       <DetectedTokenAggregators aggregators={args.aggregators1} />
       <DetectedTokenAggregators aggregators={args.aggregators2} />
     </Box>
diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.js
index 7bd87f5b426e..3fb3219630a1 100644
--- a/ui/components/app/detected-token/detected-token-details/detected-token-details.js
+++ b/ui/components/app/detected-token/detected-token-details/detected-token-details.js
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import Box from '../../../ui/box';
+import { Box } from '../../../component-library';
 import Identicon from '../../../ui/identicon';
 import DetectedTokenValues from '../detected-token-values/detected-token-values';
 import DetectedTokenAddress from '../detected-token-address/detected-token-address';
 import DetectedTokenAggregators from '../detected-token-aggregators/detected-token-aggregators';
-import { DISPLAY } from '../../../../helpers/constants/design-system';
+import { Display } from '../../../../helpers/constants/design-system';
 import { getTokenList } from '../../../../selectors';
 
 const DetectedTokenDetails = ({
@@ -20,7 +20,7 @@ const DetectedTokenDetails = ({
 
   return (
     <Box
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       className="detected-token-details"
       marginBottom={4}
     >
@@ -30,7 +30,7 @@ const DetectedTokenDetails = ({
         diameter={40}
       />
       <Box
-        display={DISPLAY.GRID}
+        display={Display.Grid}
         marginLeft={2}
         className="detected-token-details__data"
       >
diff --git a/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js b/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js
index 360f20e934dc..68dcdc8a2ea0 100644
--- a/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js
+++ b/ui/components/app/detected-token/detected-token-details/detected-token-details.stories.js
@@ -7,7 +7,7 @@ export default {
 
   argTypes: {
     token: { control: 'object' },
-    handleTokenSelection: { control: 'func' },
+    handleTokenSelection: { action: 'handleTokenSelection' },
     tokensListDetected: { control: 'array' },
   },
   args: {
diff --git a/ui/components/app/detected-token/detected-token-values/detected-token-values.js b/ui/components/app/detected-token/detected-token-values/detected-token-values.js
index 67d16c946c45..6d1a95470e40 100644
--- a/ui/components/app/detected-token/detected-token-values/detected-token-values.js
+++ b/ui/components/app/detected-token/detected-token-values/detected-token-values.js
@@ -2,18 +2,17 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 
-import Box from '../../../ui/box';
 import CheckBox from '../../../ui/check-box';
 
 import {
-  DISPLAY,
+  Display,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { useTokenTracker } from '../../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
 import { getUseCurrencyRateCheck } from '../../../../selectors';
-import { Text } from '../../../component-library';
+import { Text, Box } from '../../../component-library';
 
 const DetectedTokenValues = ({
   token,
@@ -44,7 +43,7 @@ const DetectedTokenValues = ({
   };
 
   return (
-    <Box display={DISPLAY.INLINE_FLEX} className="detected-token-values">
+    <Box display={Display.InlineFlex} className="detected-token-values">
       <Box marginBottom={1}>
         <Text variant={TextVariant.bodyLgMedium} as="h4">
           {`${balanceString || '0'} ${token.symbol}`}