diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
index 9dfdbf7325b1..fcd03f7b76c6 100644
--- a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
+++ b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
@@ -2,16 +2,15 @@ import React, { useEffect, useMemo, useState } from 'react';
 import QRCode from 'qrcode.react';
 import { UR, UREncoder } from '@ngraveio/bc-ur';
 import PropTypes from 'prop-types';
-import Box from '../../../ui/box';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   AlignItems,
-  DISPLAY,
-  FLEX_DIRECTION,
+  Display,
+  FlexDirection,
   TextAlign,
 } from '../../../../helpers/constants/design-system';
 import { PageContainerFooter } from '../../../ui/page-container';
-import { Text } from '../../../component-library/text/deprecated';
+import { Text, Box } from '../../../component-library';
 
 const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
   const t = useI18nContext();
@@ -39,9 +38,9 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
       <Box
         paddingTop={4}
         paddingBottom={4}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         alignItems={AlignItems.center}
-        flexDirection={FLEX_DIRECTION.COLUMN}
+        flexDirection={FlexDirection.Column}
       >
         <div
           style={{
diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.stories.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.stories.js
new file mode 100644
index 000000000000..39b0eaaab13e
--- /dev/null
+++ b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.stories.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import Player from './player';
+
+export default {
+  title: 'Components/App/Player',
+  component: Player,
+  argTypes: {
+    type: {
+      control: 'text',
+    },
+    cbor: {
+      control: 'text',
+    },
+    cancelQRHardwareSignRequest: {
+      action: 'cancelQRHardwareSignRequest',
+    },
+    toRead: {
+      action: 'toRead',
+    },
+  },
+  args: {
+    type: 'abc',
+    cbor: 'abc',
+  },
+};
+
+export const DefaultStory = (args) => <Player {...args} />;
+
+DefaultStory.storyName = 'Default';
diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
index ef85b2e6b958..f59e36dddff0 100644
--- a/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
+++ b/ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js
@@ -1,18 +1,17 @@
 import React from 'react';
 import {
-  DISPLAY,
+  Display,
   AlignItems,
   Color,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
-import Box from '../../../ui/box';
-import { Icon, IconName } from '../../../component-library';
+import { Icon, IconName, Box } from '../../../component-library';
 
 const SignatureRequestSIWEIcon = () => {
   return (
     <Box
       className="signature-request-siwe-icon"
-      display={DISPLAY.INLINE_FLEX}
+      display={Display.InlineFlex}
       alignItems={AlignItems.center}
       backgroundColor={Color.errorDefault}
       justifyContent={JustifyContent.center}
diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
index 948041406d12..31595fdf9d53 100644
--- a/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
+++ b/ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   TextVariant,
   Size,
-  DISPLAY,
+  Display,
   AlignItems,
   BackgroundColor,
   TextColor,
@@ -16,7 +16,7 @@ const SignatureRequestSIWETag = ({ text }) => {
     <Box
       className="signature-request-siwe-tag"
       marginRight={1}
-      display={DISPLAY.INLINE_FLEX}
+      display={Display.InlineFlex}
       alignItems={AlignItems.center}
       backgroundColor={BackgroundColor.errorDefault}
       borderRadius={Size.XL}
diff --git a/ui/components/app/tab-bar/tab-bar.js b/ui/components/app/tab-bar/tab-bar.js
index b686a12744a1..6d9e41eb4bf6 100644
--- a/ui/components/app/tab-bar/tab-bar.js
+++ b/ui/components/app/tab-bar/tab-bar.js
@@ -2,12 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, IconName, IconSize } from '../../component-library';
-import Box from '../../ui/box';
+import { Icon, IconName, IconSize, Box } from '../../component-library';
 import {
   BorderRadius,
   Color,
-  DISPLAY,
+  Display,
 } from '../../../helpers/constants/design-system';
 
 const TabBar = (props) => {
@@ -33,7 +32,7 @@ const TabBar = (props) => {
               className="tab-bar__tab__selected-indicator"
               borderRadius={BorderRadius.pill}
               backgroundColor={Color.primaryDefault}
-              display={[DISPLAY.NONE, DISPLAY.BLOCK]}
+              display={[Display.None, Display.Block]}
             />
           )}
           <div className="tab-bar__tab__content">