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 070f89f69fe9..1efd953fbb1a 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
@@ -66,7 +66,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -84,7 +84,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -129,7 +129,7 @@ exports[`ConfirmGasDisplay should match snapshot 1`] = `
               title="0 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </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 d8d0274ebe8e..649c937ca235 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
@@ -49,7 +49,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -65,7 +65,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
               title="0.000021 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.000021
               </span>
@@ -95,7 +95,7 @@ exports[`ConfirmLegacyGasDisplay should match snapshot 1`] = `
             title="0.000021 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.000021
             </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 9e763dd1978b..241527ef26ec 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
@@ -24,7 +24,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0
         </span>
@@ -42,7 +42,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = `
           />
         </div>
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis 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 cd2e4016baff..0ca0ad609c85 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
@@ -31,7 +31,7 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
         title="0.00432788 ETH"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           0.00432788
         </span>
@@ -129,7 +129,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
         title="$231.06 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $231.06
         </span>
@@ -183,7 +183,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
         title="$0.00 USD"
       >
         <span
-          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
         >
           $0.00
         </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 f6d5e40d0329..10c5398bb6fc 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
@@ -10,7 +10,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </span>
@@ -25,7 +25,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
       title="0 ETH"
     >
       <span
-        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
       >
         0
       </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 c875ceaa5f0c..f64784bdfcb5 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
@@ -139,7 +139,7 @@ exports[`Multi layer fee message when balance and token price checker is enabled
               title="$0.56"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis 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 0915c28d6602..05a9d4a1e31c 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
@@ -7,7 +7,7 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
     title="0 ETH"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       0
     </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 6f18e86c9e61..82a619d255c1 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
@@ -78,7 +78,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
               title="0.006 ETH"
             >
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.006
               </span>
@@ -111,7 +111,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
             title="0.006 ETH"
           >
             <span
-              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
             >
               0.006
             </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 6a28e7863c73..d9471c47ef04 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
@@ -7,7 +7,7 @@ exports[`CurrencyDisplay Component should match default snapshot 1`] = `
     title="null"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     />
   </div>
 </div>
@@ -20,7 +20,7 @@ exports[`CurrencyDisplay Component should render text with a className 1`] = `
     title="$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
     >
       $123.45
     </span>
@@ -35,7 +35,7 @@ exports[`CurrencyDisplay Component should render text with a prefix 1`] = `
     title="-$123.45"
   >
     <span
-      class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+      class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis 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 10725f88c876..741ce2823b6d 100644
--- a/ui/components/ui/currency-display/currency-display.component.js
+++ b/ui/components/ui/currency-display/currency-display.component.js
@@ -63,6 +63,7 @@ export default function CurrencyDisplay({
       <Text
         as="span"
         className="currency-display-component__text"
+        ellipsis
         {...textProps}
       >
         {parts.prefix}
diff --git a/ui/components/ui/currency-display/currency-display.stories.js b/ui/components/ui/currency-display/currency-display.stories.js
new file mode 100644
index 000000000000..b75b903cdaad
--- /dev/null
+++ b/ui/components/ui/currency-display/currency-display.stories.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import { decimalToHex } from '../../../../shared/modules/conversion.utils';
+import CurrencyDisplay from '.';
+
+export default {
+  title: 'Components/UI/CurrencyDisplay',
+
+  argTypes: {
+    value: {
+      control: {
+        type: 'text',
+      },
+    },
+    displayValue: {
+      control: {
+        type: 'text',
+      },
+    },
+    currency: {
+      control: {
+        type: 'text',
+      },
+    },
+    prefix: {
+      control: {
+        type: 'text',
+      },
+    },
+    suffix: {
+      control: {
+        type: 'text',
+      },
+    },
+    numberOfDecimals: {
+      control: {
+        type: 'text',
+      },
+    },
+    denomination: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    denomination: 'ETH',
+    value: decimalToHex('123.45'),
+    numberOfDecimals: '2',
+    currency: 'USD',
+    prefix: '$',
+  },
+};
+
+export const DefaultStory = (args) => <CurrencyDisplay {...args} />;
+DefaultStory.storyName = 'Default';
+
+export const DisplayValueStory = (args) => (
+  <CurrencyDisplay {...args} displayValue="44.43" />
+);
+DefaultStory.storyName = 'Display Value';
diff --git a/ui/components/ui/currency-display/index.scss b/ui/components/ui/currency-display/index.scss
deleted file mode 100644
index 1c6699f03bd2..000000000000
--- a/ui/components/ui/currency-display/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.currency-display-component {
-  &__text {
-    /*rtl:ignore*/
-    direction: ltr;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
diff --git a/ui/components/ui/ui-components.scss b/ui/components/ui/ui-components.scss
index 7ac0d578b272..aef0ae38ce3c 100644
--- a/ui/components/ui/ui-components.scss
+++ b/ui/components/ui/ui-components.scss
@@ -12,7 +12,6 @@
 @import 'chip/chip';
 @import 'color-indicator/color-indicator';
 @import 'confusable/index';
-@import 'currency-display/index';
 @import 'definition-list/definition-list';
 @import 'dialog/dialog';
 @import 'dropdown/dropdown';
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 9cb2414aea10..3e96dc82ae45 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
@@ -299,7 +299,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0
               </span>
@@ -449,7 +449,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -467,7 +467,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -512,7 +512,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -552,7 +552,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -570,7 +570,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                         title="0.00021 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.00021
                         </span>
@@ -607,7 +607,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send
                       title="0.00021 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0.00021
                       </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 81933a6c7b75..4299da75ef09 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
@@ -269,7 +269,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                 />
               </div>
               <span
-                class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
               >
                 0.0001
               </span>
@@ -380,7 +380,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000021"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000021
                             </span>
@@ -405,7 +405,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000021"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                           >
                             0.000021
                           </span>
@@ -439,7 +439,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                             title="0.000121"
                           >
                             <span
-                              class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                              class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                             >
                               0.000121
                             </span>
@@ -471,7 +471,7 @@ exports[`Confirm Transaction Base should match snapshot 1`] = `
                           title="0.000121"
                         >
                           <span
-                            class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                            class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis 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 60c600a05788..c710d1fb5336 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
@@ -55,7 +55,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                       title="0 ETH"
                     >
                       <span
-                        class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                        class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                       >
                         0
                       </span>
@@ -240,7 +240,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>
@@ -285,7 +285,7 @@ exports[`SendContent Component render should match snapshot 1`] = `
                         title="0.0000315 ETH"
                       >
                         <span
-                          class="box mm-text currency-display-component__text mm-text--body-md box--flex-direction-row box--color-text-default"
+                          class="box mm-text currency-display-component__text mm-text--body-md mm-text--ellipsis box--flex-direction-row box--color-text-default"
                         >
                           0.0000315
                         </span>