diff --git a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
index 27172b478..db7343513 100644
--- a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
+++ b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx
@@ -20,10 +20,10 @@ const meta: Meta<typeof Avatar> = {
 export default meta
 
 type Story = StoryObj<typeof Avatar>
-
+const imageFile = './img/profile-picture.png' as const
 export const WithImage: Story = {
   args: {
-    src: `../../../public/img/profile-picture.png`,
+    src: imageFile,
     alt: 'Profile photo',
     size: 'md',
   },
@@ -45,11 +45,7 @@ export const Fallback: Story = {
 export const SmallSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="sm"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="sm" />
       <Avatar initials="FR" size="sm" />
       <Avatar size="sm" />
     </div>
@@ -59,11 +55,7 @@ export const SmallSize: Story = {
 export const MediumSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="md"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="md" />
       <Avatar initials="FR" size="md" />
       <Avatar size="md" />
     </div>
@@ -73,11 +65,7 @@ export const MediumSize: Story = {
 export const LargeSize: Story = {
   render: () => (
     <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
-      <Avatar
-        src={`../../../public/img/profile-picture.png`}
-        alt="Profile photo"
-        size="lg"
-      />
+      <Avatar src={imageFile} alt="Profile photo" size="lg" />
       <Avatar initials="FR" size="lg" />
       <Avatar size="lg" />
     </div>