diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json
index 7c8806bc2..7cf54d602 100644
--- a/example/storybook-nativewind/package.json
+++ b/example/storybook-nativewind/package.json
@@ -52,6 +52,7 @@
     "@react-native-community/slider": "4.2.4",
     "@react-stately/collections": "^3.6.0",
     "@react-stately/tree": "^3.5.0",
+    "@unitools/image": "^0.0.5",
     "expo": "^47.0.0",
     "expo-linear-gradient": "^12.3.0",
     "expo-status-bar": "~1.4.2",
diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
index d012fef85..e07938aa6 100644
--- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
+++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx
@@ -17,6 +17,7 @@ import { Meta } from '@storybook/addon-docs';
 import { Image } from '../../core-components/nativewind';
 import { transformedCode } from '../../utils';
 import Wrapper from '../../core-components/nativewind/Wrapper';
+import UnitoolsImageEg from '../../extra-components/nativewind/UnitoolsImage';
 
 import {
   AppProvider,
@@ -28,6 +29,7 @@ import {
   Tabs
 } from '@gluestack/design-system';
 import { CollapsibleCode } from '@gluestack/design-system';
+import UnitoolsImage from '@unitools/image';
 
 This is an illustration of **Image** component.
 
@@ -136,17 +138,42 @@ It inherits all the properties of React Native's [Image](https://reactnative.dev
 
 Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props).
 
-<!--
-## Spec Doc
+### Example
 
-Explore the comprehensive details of the Image in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.
+The Examples section offers visual previews of the component, letting you quickly identify the best fit for your needs. Just copy the code and use it in your project.
 
-<iframe
-  style={{
-    borderRadius: '8px',
-    border: ' 1px solid rgba(0, 0, 0, 0.1)',
-    aspectRatio: 736 / 585,
-  }}
-  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6429-37300%26t%3Dh37ERUrDzeh1Zy7x-1%26scaling%3Dscale-down%26page-id%3D6429%253A35399%26starting-point-node-id%3D6429%253A37300%26mode%3Ddesign"
-  allowFullScreen
-/> -->
+#### Basic Unitools Image 
+
+The below example will run for both Expo and Next.js projects. For installation steps, refer to the [Installation](https://unitools.geekyants.com/packages/image/) section of ```@unitools/image```.
+
+```jsx
+import Image from '@unitools/image';
+```
+
+<UnitoolsImageEg/>
+
+<Wrapper>
+  <CodePreview
+    showComponentRenderer={false}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Image
+          source={require("@/assets/mountains.png")}
+          alt="Logo"
+          width={208}
+          height={320}
+        />            
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        UnitoolsImage:Image,
+      },
+      argsType: {
+      },
+    }}
+  />
+</Wrapper>
\ No newline at end of file
diff --git a/example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx
new file mode 100644
index 000000000..ae3acff49
--- /dev/null
+++ b/example/storybook-nativewind/src/extra-components/nativewind/UnitoolsImage.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Image, Center } from '../../core-components/nativewind';
+
+const UnitoolsImage = () => {
+  return (
+    <Center>
+      <Image
+        source={{
+          uri: 'https://images.unsplash.com/photo-1725476479171-4728f92dfa9c?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDE2fDZzTVZqVExTa2VRfHxlbnwwfHx8fHw%3D',
+        }}
+        alt="unitools-image"
+        className="h-52 w-80 mb-6"
+      />
+    </Center>
+  );
+};
+export default UnitoolsImage;
diff --git a/yarn.lock b/yarn.lock
index 6a4d91532..0a37ea695 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6806,6 +6806,11 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@unitools/image@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@unitools/image/-/image-0.0.5.tgz#3a41cff525b2eb4f925f9203486e5a8998ddd0b2"
+  integrity sha512-w34iTSvim5jqBunAJONMddyGOpKMyhd6lAD6mzqGyK9PV1qekMY3ajvpl9rvK8bE5cX3g5l07+QDEuT1ZWIQ2w==
+
 "@urql/core@2.3.6":
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-2.3.6.tgz#ee0a6f8fde02251e9560c5f17dce5cd90f948552"