diff --git a/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js b/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js
index e6d028064fd5..47b056a7b28c 100644
--- a/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js
+++ b/ui/components/app/modals/eth-sign-modal/eth-sign-modal.js
@@ -18,11 +18,11 @@ import {
 } from '../../../component-library';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   IconColor,
   JustifyContent,
-  SEVERITIES,
+  Severity,
   Size,
   TextAlign,
   TextVariant,
@@ -63,14 +63,14 @@ const EthSignModal = ({ hideModal }) => {
   return (
     <Box
       className="eth-sign-modal"
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       justifyContent={JustifyContent.flexStart}
       padding={4}
     >
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         marginBottom={4}
         justifyContent={JustifyContent.center}
       >
@@ -105,7 +105,7 @@ const EthSignModal = ({ hideModal }) => {
           {t('learnMoreUpperCase')}
         </ButtonLink>
       </Text>
-      <BannerAlert severity={SEVERITIES.DANGER} marginTop={6} marginBottom={6}>
+      <BannerAlert severity={Severity.Danger} marginTop={6} marginBottom={6}>
         {t('toggleEthSignModalBannerText')}
         {t('toggleEthSignModalBannerBoldText')}
       </BannerAlert>
@@ -125,7 +125,7 @@ const EthSignModal = ({ hideModal }) => {
         />
       ) : (
         <Box
-          flexDirection={FLEX_DIRECTION.ROW}
+          flexDirection={FlexDirection.Row}
           alignItems={AlignItems.flexStart}
           gap={2}
         >
@@ -146,8 +146,8 @@ const EthSignModal = ({ hideModal }) => {
         </Box>
       )}
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         justifyContent={JustifyContent.spaceBetween}
         gap={4}
         marginTop={6}
diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
index 3377127c76e4..2537d1cd2d46 100644
--- a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
+++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js
@@ -12,8 +12,8 @@ import {
 } from '../../../component-library';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   JustifyContent,
   Size,
   TextVariant,
@@ -58,8 +58,8 @@ const HoldToRevealModal = ({
   const renderHoldToRevealPrivateKeyContent = () => {
     return (
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         gap={4}
         marginBottom={6}
       >
@@ -80,7 +80,7 @@ const HoldToRevealModal = ({
               key="hold-to-reveal-4"
               variant={TextVariant.bodyMd}
               as="span"
-              display={DISPLAY.INLINE}
+              display={Display.Inline}
             >
               {t('holdToRevealContent4')}
             </Text>,
@@ -103,8 +103,8 @@ const HoldToRevealModal = ({
   const renderHoldToRevealSRPContent = () => {
     return (
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Column}
         gap={4}
         marginBottom={6}
       >
@@ -125,7 +125,7 @@ const HoldToRevealModal = ({
               key="hold-to-reveal-4"
               variant={TextVariant.bodyMd}
               as="span"
-              display={DISPLAY.INLINE}
+              display={Display.Inline}
             >
               {t('holdToRevealContent4')}
             </Text>,
@@ -148,14 +148,14 @@ const HoldToRevealModal = ({
   return (
     <Box
       className="hold-to-reveal-modal"
-      display={DISPLAY.FLEX}
-      flexDirection={FLEX_DIRECTION.COLUMN}
+      display={Display.Flex}
+      flexDirection={FlexDirection.Column}
       justifyContent={JustifyContent.flexStart}
       padding={6}
     >
       <Box
-        display={DISPLAY.FLEX}
-        flexDirection={FLEX_DIRECTION.ROW}
+        display={Display.Flex}
+        flexDirection={FlexDirection.Row}
         alignItems={AlignItems.center}
         justifyContent={JustifyContent.spaceBetween}
         marginBottom={6}
diff --git a/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.stories.js b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.stories.js
new file mode 100644
index 000000000000..eba93c3f3762
--- /dev/null
+++ b/ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import HoldToRevealModal from './hold-to-reveal-modal';
+
+export default {
+  title: 'Components/App/Modals/HoldToRevealModal',
+  component: HoldToRevealModal,
+};
+
+const Template = (args) => <HoldToRevealModal {...args} />;
+
+export const DefaultStory = Template.bind({});
+
+DefaultStory.storyName = 'Default';