diff --git a/apps/docs/pages/docs/v2/Components/image.en-US.mdx b/apps/docs/pages/docs/v2/Components/image.en-US.mdx
new file mode 100644
index 00000000..64608b51
--- /dev/null
+++ b/apps/docs/pages/docs/v2/Components/image.en-US.mdx
@@ -0,0 +1,31 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+
+# Image
+
+Wrapper around `Image` component from `react-native`, it accepts every props from react native `Image` component.
+
+## Import
+
+```js
+import { Image } from "@ficus-ui/native";
+```
+
+## Usage
+
+<CodeEditor code={`<Image
+  h={200}
+  w={300}
+  borderRadius={10}
+  source={{
+    uri:
+      'https://www.picturethisai.com/wiki-image/1080/153400456440184865.jpeg',
+  }}
+/>`} />
+
+## Props
+
+Extends every `Box` and from react native `Image` component : https://reactnative.dev/docs/image#props
\ No newline at end of file
diff --git a/apps/examples/app/components-v2/Box.tsx b/apps/examples/app/components-v2/Box.tsx
index 401120a4..93fa6f2c 100644
--- a/apps/examples/app/components-v2/Box.tsx
+++ b/apps/examples/app/components-v2/Box.tsx
@@ -232,14 +232,14 @@ const BoxComponent = () => {
         </ExampleSection>
 
         <ExampleSection name="background image">
-          <Box
-            as="Image"
+          <Box           
             mt="sm"
             borderRadius="md"
             h={150}
-            source={{
+            bgImg={{
               uri: 'https://venngage-wordpress.s3.amazonaws.com/uploads/2018/09/Monochrome-Type-Simple-Background-Image.jpg',
             }}
+            
           />
         </ExampleSection>
       </ScrollBox>
diff --git a/apps/examples/app/components-v2/Image.tsx b/apps/examples/app/components-v2/Image.tsx
new file mode 100644
index 00000000..7f1e765b
--- /dev/null
+++ b/apps/examples/app/components-v2/Image.tsx
@@ -0,0 +1,22 @@
+import { Box, Image, SafeAreaBox, Text } from '@ficus-ui/native';
+
+
+const ImageComponent = () => {
+  return (
+    <SafeAreaBox>
+      <Text mx="xl" fontSize="4xl">
+        Image component
+      </Text>
+      <Box mx="xl" mt="lg">
+        <Image
+          h={200}
+          w={300}
+          borderRadius={10}
+          src='https://www.picturethisai.com/wiki-image/1080/153400456440184865.jpeg'
+        />
+      </Box>
+    </SafeAreaBox>
+  );
+};
+
+export default ImageComponent;
diff --git a/apps/examples/app/items-v2.ts b/apps/examples/app/items-v2.ts
index 370d0ae4..ed064f23 100644
--- a/apps/examples/app/items-v2.ts
+++ b/apps/examples/app/items-v2.ts
@@ -10,6 +10,7 @@ import BadgeComponent from './components-v2/Badge';
 import TouchableHighlightComponent from './components-v2/TouchableHighlight';
 import TouchableOpacityComponent from './components-v2/TouchableOpacity';
 import TouchableWithoutFeedbackComponent from './components-v2/TouchableWithoutFeedback';
+import ImageComponent from '@/app/components-v2/Image';
 import PressableComponent from './components-v2/Pressable';
 
 type ExampleComponentType = {
@@ -30,5 +31,7 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'TouchableHighlight', onScreenName: 'TouchableHighlight', component: TouchableHighlightComponent },
   { navigationPath: 'TouchableOpacity', onScreenName: 'TouchableOpacity', component: TouchableOpacityComponent },
   { navigationPath: 'TouchableWithoutFeedback', onScreenName: 'TouchableWithoutFeedback', component: TouchableWithoutFeedbackComponent },
+  { navigationPath: 'Image', onScreenName: 'Image', component: ImageComponent },
+];
   { navigationPath: 'Pressable', onScreenName: 'Pressable', component: PressableComponent },
 ]
diff --git a/packages/components/src/box/index.tsx b/packages/components/src/box/index.tsx
index 43531361..535c6da0 100644
--- a/packages/components/src/box/index.tsx
+++ b/packages/components/src/box/index.tsx
@@ -1,12 +1,27 @@
-import { type NativeFicusProps, ficus } from '../system';
+import { ImageSourcePropType } from 'react-native';
 
-// TODO: Improve Box as Image API from V1
-export interface BoxProps extends NativeFicusProps<'View'> {}
+import { type NativeFicusProps, ficus, forwardRef } from '../system';
 
-export const Box = ficus('View');
+interface BoxOptions {
+  bgImg?: ImageSourcePropType;
+  bgMode?: 'contain' | 'cover' | 'stretch' | 'repeat';
+}
 
-export const Circle = ficus('View', {
-  baseStyle: {
-    borderRadius: 'full',
-  },
+export interface BoxProps extends NativeFicusProps<'View'>, BoxOptions {}
+
+/**
+ * Boxs help you easily create flexible and automatically distributed layouts
+ *
+ * You can Box elements in the horizontal or vertical direction,
+ * and apply a space or/and divider between each element.
+ *
+ */
+export const Box = forwardRef<BoxProps, 'View'>((props, ref) => {
+  const { bgImg, bgMode, ...rest } = props;
+  if (bgImg) {
+    return (
+      <ficus.Image ref={ref} source={bgImg} resizeMode={bgMode} {...rest} />
+    );
+  }
+  return <ficus.View ref={ref} {...rest} />;
 });
diff --git a/packages/components/src/flex/index.tsx b/packages/components/src/flex/index.tsx
index a0123370..395f6a73 100644
--- a/packages/components/src/flex/index.tsx
+++ b/packages/components/src/flex/index.tsx
@@ -1,6 +1,5 @@
 import { type NativeFicusProps, ficus } from '../system';
 
-// TODO: Improve Box as Image API from V1
 export interface FlexProps extends NativeFicusProps<'View'> {}
 
 export const Flex = ficus('View', {
diff --git a/packages/components/src/image/image.spec.tsx b/packages/components/src/image/image.spec.tsx
new file mode 100644
index 00000000..f879f6f7
--- /dev/null
+++ b/packages/components/src/image/image.spec.tsx
@@ -0,0 +1,30 @@
+import { renderWithTheme as render } from '@test-utils';
+
+import { Image } from '.';
+
+jest.mock('react-native-toast-message', () => 'Toast');
+
+describe('ImageComponent', () => {
+  it('renders correctly with given source and alt text', () => {
+    const testSource = { uri: 'https://example.com/test-image.jpg' };
+    const testAlt = 'Test Image';
+
+    const { getByLabelText } = render(
+      <Image testID="image-component" source={testSource} alt={testAlt} />
+    );
+
+    const image = getByLabelText(testAlt);
+    expect(image).toBeTruthy();
+  });
+
+  it('applies the correct image source', () => {
+    const testSource = { uri: 'https://example.com/test-image.jpg' };
+
+    const { getByTestId } = render(
+      <Image testID="image-component" source={testSource} alt="Sample Image" />
+    );
+
+    const image = getByTestId('image-component');
+    expect(image.props.source).toEqual(testSource);
+  });
+});
diff --git a/packages/components/src/image/index.tsx b/packages/components/src/image/index.tsx
new file mode 100644
index 00000000..a92e34da
--- /dev/null
+++ b/packages/components/src/image/index.tsx
@@ -0,0 +1,12 @@
+import { type NativeFicusProps, ficus, forwardRef } from '../system';
+
+interface ImageOptions {
+  src?: string;
+}
+
+export interface ImageProps extends NativeFicusProps<'Image'>, ImageOptions {}
+
+export const Image = forwardRef<ImageProps, 'Image'>((props, ref) => {
+  const { src, ...rest } = props;
+  return <ficus.Image ref={ref} {...rest} source={{ uri: src }} />;
+});
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 563335fc..644beff7 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -7,6 +7,7 @@ export * from './safe-area-box';
 export * from './center';
 export * from './badge';
 export * from './touchables';
+export * from './image';
 export * from './pressable';
 
 export { ThemeProvider } from '@ficus-ui/theme';