diff --git a/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
index 6649b9d7ee..7654ec4aa8 100644
--- a/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
+++ b/example/storybook-nativewind/src/extra-components/nativewind/GradientImage.tsx
@@ -1,4 +1,4 @@
-import { Image } from '../../core-components/nativewind';
+import { Image, Center } from '../../core-components/nativewind';
 import React, { useContext } from 'react';
 import { LayoutContext } from '@gluestack/design-system';
 
@@ -6,13 +6,15 @@ const GradientImage = () => {
   const { colorMode } = useContext(LayoutContext);
 
   return (
-    <Image
-      source={
-        colorMode === 'light' ? '/assets/light-lg.svg' : '/assets/dark-lg.svg'
-      }
-      alt="linear-gradient"
-      className="h-64 w-[400px]"
-    />
+    <Center>
+      <Image
+        source={
+          colorMode === 'light' ? '/assets/light-lg.svg' : '/assets/dark-lg.svg'
+        }
+        alt="linear-gradient"
+        className="h-64 w-[400px]"
+      />
+    </Center>
   );
 };
 export default GradientImage;
diff --git a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
index c0c8d261f7..5664098170 100644
--- a/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/guides/recipes/linear-gradient/index.nw.stories.mdx
@@ -19,6 +19,8 @@ import GradientImage from '../../../extra-components/nativewind/GradientImage';
 
 This is an illustration of **Linear Gradient** component in `App.tsx` file.
 
+<GradientImage/>
+
 ```jsx
 import "./global.css";
 import React, { useState } from "react";
@@ -76,8 +78,6 @@ export default function App() {
 
 <br />
 
-<GradientImage/>
-
 ## Installation
 
 <Tabs value="expo" type="section">