diff --git a/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap b/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap
index f7d981ce45a2..7f4969d22b15 100644
--- a/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap
+++ b/ui/components/app/account-menu/__snapshots__/account-menu.test.js.snap
@@ -96,20 +96,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               class="account-menu__balance-container"
             >
               <div
-                class="currency-display-component account-menu__balance"
+                class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                 data-testid="account-menu__balance"
                 title="0 ETH"
               >
                 <span
-                  class="currency-display-component__prefix"
-                />
-                <span
-                  class="currency-display-component__text"
+                  class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                 >
                   0
                 </span>
                 <span
-                  class="currency-display-component__suffix"
+                  class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                 >
                   ETH
                 </span>
@@ -124,20 +121,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               </span>
             </div>
             <div
-              class="currency-display-component account-menu__balance"
+              class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               data-testid="account-menu__balance"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -211,20 +205,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               class="account-menu__balance-container"
             >
               <div
-                class="currency-display-component account-menu__balance"
+                class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                 data-testid="account-menu__balance"
                 title="0 ETH"
               >
                 <span
-                  class="currency-display-component__prefix"
-                />
-                <span
-                  class="currency-display-component__text"
+                  class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                 >
                   0
                 </span>
                 <span
-                  class="currency-display-component__suffix"
+                  class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                 >
                   ETH
                 </span>
@@ -239,20 +230,17 @@ exports[`Account Menu Render Content should not render keyring label if keyring
               </span>
             </div>
             <div
-              class="currency-display-component account-menu__balance"
+              class="box currency-display-component account-menu__balance box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               data-testid="account-menu__balance"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
diff --git a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
index a08846c4d2a7..070f89f69fe9 100644
--- a/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/__snapshots__/confirm-gas-display.test.js.snap
@@ -62,14 +62,11 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -83,19 +80,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -131,19 +125,16 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
             class="gas-details-item__currency-container"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
diff --git a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
index a386b2493f86..d8d0274ebe8e 100644
--- a/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
+++ b/ui/components/app/confirm-gas-display/confirm-legacy-gas-display/__snapshots__/confirm-legacy-gas-display.test.js.snap
@@ -45,14 +45,11 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -64,19 +61,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         >
           <div>
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.000021 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -97,19 +91,16 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
         </strong>
         <div>
           <div
-            class="currency-display-component"
+            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
             title="0.000021 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
             >
               0.000021
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
index 880b74bcd951..9e763dd1978b 100644
--- a/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
+++ b/ui/components/app/confirm-page-container/confirm-detail-row/__snapshots__/confirm-detail-row.component.test.js.snap
@@ -12,37 +12,37 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
       class="confirm-detail-row__details"
     >
       <div
-        class="currency-display-component confirm-detail-row__primary"
+        class="box currency-display-component confirm-detail-row__primary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 18px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>
       </div>
       <div
-        class="currency-display-component confirm-detail-row__secondary"
+        class="box currency-display-component confirm-detail-row__secondary box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0"
       >
-        <span
-          class="currency-display-component__prefix"
+        <div
+          class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
         >
           <i
             class="fab fa-ethereum"
             style="font-size: 14px;"
           />
-        </span>
+        </div>
         <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0
         </span>
diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
index de6f2afcc1cb..cd2e4016baff 100644
--- a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
+++ b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -27,19 +27,16 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="0.00432788 ETH"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           ETH
         </span>
@@ -128,19 +125,16 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$231.06 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
@@ -185,19 +179,16 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         </div>
       </div>
       <div
-        class="currency-display-component currency-input__conversion-component"
+        class="box currency-display-component currency-input__conversion-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
         title="$0.00 USD"
       >
         <span
-          class="currency-display-component__prefix"
-        />
-        <span
-          class="currency-display-component__text"
+          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
         >
           $0.00
         </span>
         <span
-          class="currency-display-component__suffix"
+          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
         >
           USD
         </span>
diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
index c23cca668e5b..f6d5e40d0329 100644
--- a/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
+++ b/ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -6,37 +6,31 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     class="cancel-transaction-gas-fee"
   >
     <div
-      class="currency-display-component cancel-transaction-gas-fee__eth"
+      class="box currency-display-component cancel-transaction-gas-fee__eth box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
     </div>
     <div
-      class="currency-display-component cancel-transaction-gas-fee__fiat"
+      class="box currency-display-component cancel-transaction-gas-fee__fiat box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
       title="0 ETH"
     >
       <span
-        class="currency-display-component__prefix"
-      />
-      <span
-        class="currency-display-component__text"
+        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
       >
         0
       </span>
       <span
-        class="currency-display-component__suffix"
+        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
       >
         ETH
       </span>
diff --git a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
index 9131fb9450b0..c875ceaa5f0c 100644
--- a/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
+++ b/ui/components/app/multilayer-fee-message/__snapshots__/multi-layer-fee-message.test.js.snap
@@ -135,14 +135,11 @@ exports[`Multi layer fee message when balance and token price checker is enabled
             class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="$0.56"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 $0.56
               </span>
diff --git a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
index 61224fdb0f06..0915c28d6602 100644
--- a/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
+++ b/ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -3,19 +3,16 @@
 exports[`UserPreferencedCurrencyDisplay Component rendering should match snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="0 ETH"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       0
     </span>
     <span
-      class="currency-display-component__suffix"
+      class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
     >
       ETH
     </span>
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
index 9dfa5527fe39..6f18e86c9e61 100644
--- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
+++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
@@ -74,19 +74,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             class="box mm-text multichain-account-list-item__asset mm-text--body-md mm-text--ellipsis mm-text--text-align-end box--display-flex box--flex-direction-row box--align-items-center box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.006 ETH"
             >
               <span
-                class="currency-display-component__prefix"
-              />
-              <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
               <span
-                class="currency-display-component__suffix"
+                class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
               >
                 ETH
               </span>
@@ -110,19 +107,16 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
           class="box mm-text mm-text--body-sm mm-text--text-align-end box--flex-direction-row box--color-text-alternative"
         >
           <div
-            class="currency-display-component"
+            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
             title="0.006 ETH"
           >
             <span
-              class="currency-display-component__prefix"
-            />
-            <span
-              class="currency-display-component__text"
+              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
             >
               0.006
             </span>
             <span
-              class="currency-display-component__suffix"
+              class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
             >
               ETH
             </span>
diff --git a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
index 6e898fc29bc9..6a28e7863c73 100644
--- a/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
+++ b/ui/components/ui/currency-display/__snapshots__/currency-display.component.test.js.snap
@@ -3,14 +3,11 @@
 exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 <div>
   <div
-    class="currency-display-component"
+    class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="null"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -19,14 +16,11 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
 exports[`CurrencyDisplay Component should render text with a className 1`] = `
 <div>
   <div
-    class="currency-display-component currency-display"
+    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="$123.45"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -37,14 +31,11 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
 exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
 <div>
   <div
-    class="currency-display-component currency-display"
+    class="box currency-display-component currency-display box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
     title="-$123.45"
   >
     <span
-      class="currency-display-component__prefix"
-    />
-    <span
-      class="currency-display-component__text"
+      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
     >
       -
       $123.45
diff --git a/ui/components/ui/currency-display/currency-display.component.js b/ui/components/ui/currency-display/currency-display.component.js
index 73f32a2eb7fa..10725f88c876 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -3,6 +3,13 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay';
 import { EtherDenomination } from '../../../../shared/constants/common';
+import Box from '../box/box';
+import { Text } from '../../component-library';
+import {
+  AlignItems,
+  DISPLAY,
+  FLEX_WRAP,
+} from '../../../helpers/constants/design-system';
 
 export default function CurrencyDisplay({
   value,
@@ -18,6 +25,10 @@ export default function CurrencyDisplay({
   denomination,
   currency,
   suffix,
+  prefixComponentWrapperProps = {},
+  textProps = {},
+  suffixProps = {},
+  boxProps = {},
 }) {
   const [title, parts] = useCurrencyDisplay(value, {
     displayValue,
@@ -28,26 +39,46 @@ export default function CurrencyDisplay({
     currency,
     suffix,
   });
+
   return (
-    <div
+    <Box
       className={classnames('currency-display-component', className)}
       data-testid={dataTestId}
       style={style}
       title={(!hideTitle && title) || null}
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.center}
+      flexWrap={FLEX_WRAP.WRAP}
+      {...boxProps}
     >
-      <span className="currency-display-component__prefix">
-        {prefixComponent}
-      </span>
-      <span className="currency-display-component__text">
+      {prefixComponent ? (
+        <Box
+          className="currency-display-component__prefix"
+          marginInlineEnd={1}
+          {...prefixComponentWrapperProps}
+        >
+          {prefixComponent}
+        </Box>
+      ) : null}
+      <Text
+        as="span"
+        className="currency-display-component__text"
+        {...textProps}
+      >
         {parts.prefix}
         {parts.value}
-      </span>
-      {parts.suffix && (
-        <span className="currency-display-component__suffix">
+      </Text>
+      {parts.suffix ? (
+        <Text
+          as="span"
+          className="currency-display-component__suffix"
+          marginInlineStart={1}
+          {...suffixProps}
+        >
           {parts.suffix}
-        </span>
-      )}
-    </div>
+        </Text>
+      ) : null}
+    </Box>
   );
 }
 
@@ -68,4 +99,8 @@ CurrencyDisplay.propTypes = {
   style: PropTypes.object,
   suffix: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   value: PropTypes.string,
+  prefixComponentWrapperProps: PropTypes.object,
+  textProps: PropTypes.object,
+  suffixProps: PropTypes.object,
+  boxProps: PropTypes.object,
 };
diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss
index 933554b0dd41..1c6699f03bd2 100644
--- a/ui/components/ui/currency-display/index.scss
+++ b/ui/components/ui/currency-display/index.scss
@@ -1,8 +1,4 @@
 .currency-display-component {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
   &__text {
     /*rtl:ignore*/
     direction: ltr;
@@ -10,12 +6,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-
-  &__prefix {
-    padding-right: 4px;
-  }
-
-  &__suffix {
-    padding-left: 4px;
-  }
 }
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index b42547829b4f..9cb2414aea10 100644
--- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -287,19 +287,19 @@ exports[`ConfirmSendEther should render correct information for for confirm send
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -445,14 +445,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -466,19 +463,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -514,19 +508,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -557,14 +548,11 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -578,19 +566,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       class="confirm-page-container-content__total-value"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.00021 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -618,19 +603,16 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                     </strong>
                      
                     <div
-                      class="currency-display-component"
+                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                       title="0.00021 ETH"
                     >
                       <span
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </span>
                       <span
-                        class="currency-display-component__suffix"
+                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
diff --git a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
index 164d0f9aa70d..81933a6c7b75 100644
--- a/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
+++ b/ui/pages/confirm-transaction-base/__snapshots__/confirm-transaction-base.test.js.snap
@@ -257,19 +257,19 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
             class="box mm-text mm-text--heading-md mm-text--font-weight-normal mm-text--ellipsis box--flex-direction-row box--color-text-default"
           >
             <div
-              class="currency-display-component"
+              class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
               title="0.0001"
             >
-              <span
-                class="currency-display-component__prefix"
+              <div
+                class="box currency-display-component__prefix box--margin-inline-end-1 box--flex-direction-row"
               >
                 <i
                   class="fab fa-ethereum"
                   style="font-size: 24px;"
                 />
-              </span>
+              </div>
               <span
-                class="currency-display-component__text"
+                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -376,14 +376,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       >
                         <div>
                           <div
-                            class="currency-display-component"
+                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                             title="0.000021"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -404,14 +401,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                       </strong>
                       <div>
                         <div
-                          class="currency-display-component"
+                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                           title="0.000021"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -441,14 +435,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           class="confirm-page-container-content__total-value"
                         >
                           <div
-                            class="currency-display-component"
+                            class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                             title="0.000121"
                           >
                             <span
-                              class="currency-display-component__prefix"
-                            />
-                            <span
-                              class="currency-display-component__text"
+                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -476,14 +467,11 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                         </strong>
                          
                         <div
-                          class="currency-display-component"
+                          class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                           title="0.000121"
                         >
                           <span
-                            class="currency-display-component__prefix"
-                          />
-                          <span
-                            class="currency-display-component__text"
+                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                           >
                             0.000121
                           </span>
diff --git a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
index de1dab438513..60c600a05788 100644
--- a/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
+++ b/ui/pages/send/send-content/__snapshots__/send-content.component.test.js.snap
@@ -51,19 +51,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       Balance:
                     </span>
                     <div
-                      class="currency-display-component"
+                      class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                       title="0 ETH"
                     >
                       <span
-                        class="currency-display-component__prefix"
-                      />
-                      <span
-                        class="currency-display-component__text"
+                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                       >
                         0
                       </span>
                       <span
-                        class="currency-display-component__suffix"
+                        class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                       >
                         ETH
                       </span>
@@ -239,19 +236,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>
@@ -287,19 +281,16 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       class="gas-details-item__currency-container"
                     >
                       <div
-                        class="currency-display-component"
+                        class="box currency-display-component box--display-flex box--flex-direction-row box--flex-wrap-wrap box--align-items-center"
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="currency-display-component__prefix"
-                        />
-                        <span
-                          class="currency-display-component__text"
+                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
                         <span
-                          class="currency-display-component__suffix"
+                          class="box mm-text currency-display-component__suffix mm-text--body-md box--margin-inline-start-1 box--flex-direction-row box--color-text-default"
                         >
                           ETH
                         </span>