diff --git a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx
index 0fdd2d50..d25cf22d 100644
--- a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx
+++ b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx
@@ -34,9 +34,9 @@ It includes the user's profile picture, name, email, account progress and accoun
     name="Overview"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: 'matthew@wso2.com'
       },
@@ -46,19 +46,19 @@ It includes the user's profile picture, name, email, account progress and accoun
         {
           title: 'Add your email address',
           description: 'You can add your email address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Email</Button>
         },
         {
           title: 'Add your phone number',
           description: 'You can add your phone number to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Phone</Button>
         },
         {
           title: 'Add your address',
           description: 'You can add your address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Address</Button>
         }
       ],
@@ -85,7 +85,7 @@ import AccountOverview from '@oxygen-ui/react/AccountOverview';\n
 function Demo() {
   return <AccountOverview
             user={{
-              image: '/assets/images/avatar-john.svg',
+              image: 'assets/images/avatar-john.svg',
               name: 'Matthew',
               email: 'matthew@wso2.com',
             }}
@@ -104,9 +104,9 @@ function Demo() {
     name="Incomplete"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: 'matthew@wso2.com'
       },
@@ -116,19 +116,19 @@ function Demo() {
         {
           title: 'Add your email address',
           description: 'You can add your email address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Email</Button>
         },
         {
           title: 'Add your phone number',
           description: 'You can add your phone number to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Phone</Button>
         },
         {
           title: 'Add your address',
           description: 'You can add your address to your profile to receive notifications and updates from us.',
-          illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+          illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
           action: <Button variant="outlined">Add Address</Button>
         }
       ],
@@ -145,15 +145,15 @@ function Demo() {
     name="Complete"
     args={{
       title: <Typography variant="h5">Welcome Mathew</Typography>,
-      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, 
+      subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>,
       user:{
-        image: '/assets/images/avatar-john.svg',
+        image: 'assets/images/avatar-john.svg',
         name: 'Matthew',
         email: 'matthew@wso2.com'
       },
       accountCompletionStepsTitle: "Complete your Profile. It's at 60%",
-      accountProgress: 100, 
-      illustration: <img src="/assets/images/action-card-image.svg" alt="image" /> 
+      accountProgress: 100,
+      illustration: <img src="assets/images/action-card-image.svg" alt="image" />
     }}
   >
     {Template.bind({})}
diff --git a/packages/react/src/components/ActionCard/ActionCard.stories.mdx b/packages/react/src/components/ActionCard/ActionCard.stories.mdx
index 8f5b697b..d15666fd 100644
--- a/packages/react/src/components/ActionCard/ActionCard.stories.mdx
+++ b/packages/react/src/components/ActionCard/ActionCard.stories.mdx
@@ -28,7 +28,7 @@ Action cards can be used in overview pages or dashboards.
     description: "Configure additional authentications to sign in easily or to add an extra layer of security to your account.",
     actionText: "Setup MFA",
     onActionClick:() => {alert("Action clicked")},
-    image: <img src="/assets/images/action-card-image.svg" alt="action card" />,
+    image: <img src="assets/images/action-card-image.svg" alt="action card" />,
     variant: "outlined"
   }}>
     {Template.bind({})}
@@ -55,7 +55,7 @@ function Demo() {
       description="Action Card Description."
       actionText="Action Card Action Text"
       onActionClick={() => {alert("Action clicked")}}
-      image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+      image={<img src="assets/images/action-card-image.svg" alt="action card" />}
     />
   );
 }`}
diff --git a/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx b/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx
index bb500d98..9f56d093 100644
--- a/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx
+++ b/packages/react/src/components/ActionCard/__tests__/ActionCard.test.tsx
@@ -31,7 +31,7 @@ const ActionCardTestComponent: ReactElement = (
     }
     actionText="Setup MFA"
     onActionClick={onActionClick}
-    image={<img src="/assets/images/action-card-image.svg" alt="action card" />}
+    image={<img src="assets/images/action-card-image.svg" alt="action card" />}
   />
 );
 
diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
index 5eeaa857..51b786ee 100644
--- a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
+++ b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ActionCard should match the snapshot 1`] = `
       >
         <img
           alt="action card"
-          src="/assets/images/action-card-image.svg"
+          src="assets/images/action-card-image.svg"
         />
         <h6
           class="MuiTypography-root MuiTypography-subtitle1 oxygen-typography css-n2qzog-MuiTypography-root"
diff --git a/packages/react/src/components/Avatar/Avatar.stories.mdx b/packages/react/src/components/Avatar/Avatar.stories.mdx
index 7ad9348e..fa8c5eb3 100644
--- a/packages/react/src/components/Avatar/Avatar.stories.mdx
+++ b/packages/react/src/components/Avatar/Avatar.stories.mdx
@@ -30,7 +30,7 @@ The Avatar can be used to mainly display profile pictures of users and can be us
 <Canvas>
   <Story
     name="Overview"
-    args={{src: '/assets/images/avatar-menu.svg'}}
+    args={{src: 'assets/images/avatar-menu.svg'}}
   >
     {Template.bind({})}
   </Story>
diff --git a/packages/react/src/components/Carousel/Carousel.stories.mdx b/packages/react/src/components/Carousel/Carousel.stories.mdx
index 208c281a..ffb03e4b 100644
--- a/packages/react/src/components/Carousel/Carousel.stories.mdx
+++ b/packages/react/src/components/Carousel/Carousel.stories.mdx
@@ -33,16 +33,16 @@ Carousel can be used to slide through content.
               action: <Button variant="outlined" onClick={()=>{}}>Add First Name</Button>,
               title: "What is your first name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             },
             {
               action: <Button variant="outlined" onClick={()=>{}}>Add Last Name</Button>,
               title: "What is your last name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             }
       ],
-      title: <Typography>Complete your Profile. It’s at 60%</Typography> 
+      title: <Typography>Complete your Profile. It’s at 60%</Typography>
     }}
   >
     {Template.bind({})}
@@ -71,7 +71,7 @@ function Demo() {
               action: <Button variant="outlined" color="primary" onClick={()=>{}}>Add Last Name</Button>,
               title: "What is your first name?",
               description: "Start theming journey with Oxygen UI",
-              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              illustration: <img src="assets/images/carousel-illustration.svg" alt="carousel illustration" />,
             }
         ]}
     />
diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx
index 7c1bae6c..48bec95a 100644
--- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx
+++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx
@@ -27,10 +27,10 @@ The Avatar with circular progress and badge.
     name="Overview"
     args={{color: 'warning',
     progress: 70,
-    badgeOptions: {color: 'primary', badgeContent: '70%'}, 
+    badgeOptions: {color: 'primary', badgeContent: '70%'},
     avatarOptions: {
-      src: '/assets/images/avatar-john.svg', 
-      alt:'avatar', 
+      src: 'assets/images/avatar-john.svg',
+      alt:'avatar',
       }
     }}
   >
diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx
index fc29c719..5b0b4214 100644
--- a/packages/react/src/components/Header/Header.stories.mdx
+++ b/packages/react/src/components/Header/Header.stories.mdx
@@ -30,14 +30,14 @@ navigation, and actions.
 export const basicHeaderVariationOptions = {
   brand: {
     logo: {
-      desktop: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
-      mobile: <img src="/assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
+      desktop: <img src="assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
+      mobile: <img src="assets/images/oxygen-ui-logo-mini.svg" alt="logo" height="40" />,
     },
     onClick: () => null,
     title: 'OxygenUI',
   },
   user: {
-    image: '/assets/images/avatar-john.svg',
+    image: 'assets/images/avatar-john.svg',
     name: 'Matthew',
     email: 'matthew@wso2.com',
   },
diff --git a/packages/react/src/components/Image/Image.stories.mdx b/packages/react/src/components/Image/Image.stories.mdx
index fd5e66ae..df8c3c36 100644
--- a/packages/react/src/components/Image/Image.stories.mdx
+++ b/packages/react/src/components/Image/Image.stories.mdx
@@ -26,7 +26,7 @@ Image.
 <Canvas>
   <Story
     name="Overview"
-    args={{src: 'https://oxygen-ui.vercel.app/assets/images/oxygen-ui/oxygen-ui-logo.svg'}}
+    args={{src: 'assets/images/oxygen-ui/oxygen-ui-logo.svg'}}
   >
     {Template.bind({})}
   </Story>
diff --git a/packages/react/src/components/SignIn/SignIn.stories.mdx b/packages/react/src/components/SignIn/SignIn.stories.mdx
index 43128476..4d9f5c84 100644
--- a/packages/react/src/components/SignIn/SignIn.stories.mdx
+++ b/packages/react/src/components/SignIn/SignIn.stories.mdx
@@ -25,7 +25,7 @@ export const Template = args => <SignIn {...args} />;
 Full-featured component to sign in users into your application.
 
 <Canvas>
-  <Story name="Overview" args={{logoUrl: '/assets/images/oxygen-ui-logo-mini.svg'}}>
+  <Story name="Overview" args={{logoUrl: 'assets/images/oxygen-ui-logo-mini.svg'}}>
     {Template.bind({})}
   </Story>
 </Canvas>
@@ -56,7 +56,7 @@ function Demo() {
 A basic login box with username and password inputs.
 
 <Canvas>
-  <Story name="Basic" args={{logoUrl: '/assets/images/oxygen-ui-logo-mini.svg'}} />
+  <Story name="Basic" args={{logoUrl: 'assets/images/oxygen-ui-logo-mini.svg'}} />
 </Canvas>
 
 ### With Sign In Options
@@ -95,7 +95,7 @@ export const GoogleIcon = (props) => {
   <Story
     name="With Sign In Options"
     args={{
-      logoUrl: '/assets/images/oxygen-ui-logo-mini.svg',
+      logoUrl: 'assets/images/oxygen-ui-logo-mini.svg',
       signInOptions: (
         <>
           <Button