diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
index eafc3c2dd..7c0f9962a 100644
--- a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
+++ b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -3,11 +3,11 @@
 exports[`Token Cell should match snapshot 1`] = `
 <div>
   <div
-    class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column"
+    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
     data-testid="multichain-token-list-item"
   >
     <a
-      class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row"
+      class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
       data-testid="multichain-token-list-button"
       href="#"
     >
@@ -34,14 +34,14 @@ exports[`Token Cell should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full"
+        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
         style="flex-grow: 1; overflow: hidden;"
       >
         <div
-          class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
         >
           <div
-            class="box box--flex-direction-row box--width-1/3"
+            class="mm-box mm-box--width-1/3"
           >
             <div>
               <div
@@ -59,7 +59,7 @@ exports[`Token Cell should match snapshot 1`] = `
             </div>
           </div>
           <p
-            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default"
+            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
           />
         </div>
         <p
diff --git a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
index 6972f0efd..3fb8fb070 100644
--- a/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
+++ b/ui/components/multichain/multichain-token-list-item/__snapshots__/multichain-token-list-item.test.js.snap
@@ -3,11 +3,11 @@
 exports[`MultichainTokenListItem should render correctly 1`] = `
 <div>
   <div
-    class="box multichain-token-list-item box--display-flex box--gap-4 box--flex-direction-column"
+    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
     data-testid="multichain-token-list-item"
   >
     <a
-      class="box multichain-token-list-item__container-cell box--padding-4 box--display-flex box--flex-direction-row"
+      class="mm-box multichain-token-list-item__container-cell mm-box--padding-4 mm-box--display-flex mm-box--flex-direction-row"
       data-testid="multichain-token-list-button"
       href="#"
     >
@@ -34,14 +34,14 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
         </div>
       </div>
       <div
-        class="box multichain-token-list-item__container-cell--text-container box--display-flex box--flex-direction-column box--width-full"
+        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
         style="flex-grow: 1; overflow: hidden;"
       >
         <div
-          class="box box--display-flex box--gap-1 box--flex-direction-row box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--justify-content-space-between"
         >
           <div
-            class="box box--flex-direction-row box--width-1/3"
+            class="mm-box mm-box--width-1/3"
           >
             <div>
               <p
@@ -50,7 +50,7 @@ exports[`MultichainTokenListItem should render correctly 1`] = `
             </div>
           </div>
           <p
-            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--color-text-default"
+            class="box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end box--flex-direction-row box--width-2/3 box--color-text-default"
           />
         </div>
         <p
diff --git a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js
index 8ea169330..0960ecd55 100644
--- a/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js
+++ b/ui/components/multichain/multichain-token-list-item/multichain-token-list-item.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import {
-  BLOCK_SIZES,
+  BlockSize,
   BorderColor,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   FontWeight,
   JustifyContent,
   Size,
@@ -19,8 +19,8 @@ import {
   AvatarToken,
   BadgeWrapper,
   Text,
+  Box,
 } from '../../component-library';
-import Box from '../../ui/box/box';
 import { getCurrentChainId, getNativeCurrencyImage } from '../../../selectors';
 import Tooltip from '../../ui/tooltip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -48,15 +48,15 @@ export const MultichainTokenListItem = ({
   return (
     <Box
       className={classnames('multichain-token-list-item', className)}
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       gap={4}
       data-testid="multichain-token-list-item"
     >
       <Box
         className="multichain-token-list-item__container-cell"
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         padding={4}
         as="a"
         data-testid="multichain-token-list-button"
@@ -101,17 +101,17 @@ export const MultichainTokenListItem = ({
         </BadgeWrapper>
         <Box
           className="multichain-token-list-item__container-cell--text-container"
-          display={DISPLAY.FLEX}
-          flexDirection={FLEX_DIRECTION.COLUMN}
-          width={BLOCK_SIZES.FULL}
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          width={BlockSize.Full}
           style={{ flexGrow: 1, overflow: 'hidden' }}
         >
           <Box
-            display={DISPLAY.FLEX}
+            display={Display.Flex}
             justifyContent={JustifyContent.spaceBetween}
             gap={1}
           >
-            <Box width={BLOCK_SIZES.ONE_THIRD}>
+            <Box width={BlockSize.OneThird}>
               <Tooltip
                 position="bottom"
                 interactive
@@ -132,7 +132,7 @@ export const MultichainTokenListItem = ({
             <Text
               fontWeight={FontWeight.Medium}
               variant={TextVariant.bodyMd}
-              width={BLOCK_SIZES.TWO_THIRD}
+              width={BlockSize.TwoThirds}
               textAlign={TextAlign.End}
             >
               {secondary}