diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.tsx b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
index 85852edde464..c7298892211c 100644
--- a/ui/components/component-library/avatar-base/avatar-base.stories.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentMeta } from '@storybook/react';
 import React from 'react';
 import {
   AlignItems,
-  DISPLAY,
+  Display,
   TextColor,
   BackgroundColor,
   BorderColor,
@@ -60,7 +60,7 @@ export default {
       control: 'select',
     },
     display: {
-      options: Object.values(DISPLAY),
+      options: Object.values(Display),
       control: 'select',
       table: { category: 'box props' },
     },
@@ -99,7 +99,7 @@ export const DefaultStory = (args: AvatarBaseProps) => <AvatarBase {...args} />;
 DefaultStory.storyName = 'Default';
 
 export const Size = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarBase {...args} size={AvatarBaseSize.Xs} />
     <AvatarBase {...args} size={AvatarBaseSize.Sm} />
     <AvatarBase {...args} size={AvatarBaseSize.Md} />
@@ -109,7 +109,7 @@ export const Size = (args: AvatarBaseProps) => (
 );
 
 export const Children = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>
       <img src="./images/eth_logo.png" />
     </AvatarBase>
@@ -131,7 +131,7 @@ export const Children = (args: AvatarBaseProps) => (
 );
 
 export const ColorBackgroundColorAndBorderColor = (args: AvatarBaseProps) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarBase {...args}>B</AvatarBase>
     <AvatarBase
       {...args}
diff --git a/ui/components/component-library/avatar-base/avatar-base.tsx b/ui/components/component-library/avatar-base/avatar-base.tsx
index e2dde68709ad..164fdf5a4574 100644
--- a/ui/components/component-library/avatar-base/avatar-base.tsx
+++ b/ui/components/component-library/avatar-base/avatar-base.tsx
@@ -5,7 +5,7 @@ import {
   BackgroundColor,
   BorderColor,
   TextColor,
-  DISPLAY,
+  Display,
   JustifyContent,
   AlignItems,
   BorderRadius,
@@ -48,7 +48,7 @@ export const AvatarBase = forwardRef(
         )}
         ref={ref}
         as={ValidTag.Div}
-        display={DISPLAY.FLEX}
+        display={Display.Flex}
         justifyContent={JustifyContent.center}
         alignItems={AlignItems.center}
         borderRadius={BorderRadius.full}