diff --git a/README.md b/README.md
index 5d7f38d..6043e08 100644
--- a/README.md
+++ b/README.md
@@ -73,18 +73,18 @@ import { Image } from '@idimma/rn-widget';
 | \`bw\`     | \`number\`             | Border width                                             |
 | \`bc\`     | \`string\`             | Border color                                             |
 
-#### [Other View Props](./docs/View.md)
+#### [Other View Props](./docs/view)
 
 ### Text Component
 
 | Prop      | Type                | Description                                       |
 |-----------|---------------------|---------------------------------------------------|
-| \`color\` | \`string\`             | Text color      [See list of colors](./docs/Colors.md) |
+| \`color\` | \`string\`             | Text color      [See list of colors](./docs/colors) |
 | \`fs\`     | \`number\`             | Font size                                         |
 | \`fw\`    | \`'normal'\` \| \`'bold'\` \| \`number\` | Font weight                                       |
 | \`align\` | \`'auto'\` \| \`'left'\` \| \`'right'\` \| \`'center'\` | Text alignment                                    |
 
-#### [Other Text Props](./docs/Text.md)
+#### [Other Text Props](./docs/text)
 
 
 ### Image Component
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..5d7f38d
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,109 @@
+# Idimma React Native Widgets
+
+react native components
+
+## Installation
+
+```sh
+npm install @idimma/rn-widget
+```
+[![NPM Total Downloads](https://img.shields.io/npm/dt/@idimma/rn-widget.svg?style=flat-square&label=Total+Downloads)](https://www.npmjs.com/package/@idimma/rn-widget)
+[![npm Latest Package](https://img.shields.io/npm/v/@idimma/rn-widget/latest.svg)](https://www.npmjs.com/package/@idimma/rn-widget)
+[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/idimma/rn-widgets/blob/main/LICENSE)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/idimmanuel.svg?label=follow+idimmanuel)](https://x.com/idimmanuel)
+[![Github Stars](https://img.shields.io/github/stars/idimma/rn-widgets)](https://github.com/idimma/rn-widgets/stargazers)
+
+[//]: # ([![npm downloads](https://img.shields.io/npm/dm/@idimma/rn-widget.svg)](https://npm-stat.com/charts.html?package=@idimma/rn-widgets))
+
+## Usage
+
+```js
+import { View } from '@idimma/rn-widget';
+
+<View
+  flex={1}
+  bg="#F2F5F7"
+  p={10}
+  m={5}
+  br={8}
+  bw={1}
+  bc="#CCCCCC"
+>
+  {/* Your content here */}
+</View>
+```
+
+```js
+import { Text } from '@idimma/rn-widget';
+
+<Text
+  color="#2BAEDF"
+  //You can use any color as prop black, red, pink ...etc
+  fs={16}
+  fw="bold"
+  center //Align Text to center
+>
+  Hello, World!
+</Text>
+```
+
+```js
+import { Image } from '@idimma/rn-widget';
+
+<Image
+  source={require('./path/to/image.png')}
+  resizeMode="cover" //or
+  w={200}
+  h={200}
+  radius={10}
+/>;
+```
+
+## Components and Props
+
+### View Component
+
+| Prop       | Type                | Description                                              |
+|------------|---------------------|----------------------------------------------------------|
+| \`flex\`   | \`boolean\` \| \`number\`| Flex grow factor                                         |
+| \`bg\`     | \`string\`             | Background color                                         |
+| \`p\`      | \`number\`             | Padding for all sides                                    |
+| \`m\`      | \`number\`             | Margin for all sides                                     |
+| \`radius\` | \`number\`            | Border radius                                            |
+| \`bw\`     | \`number\`             | Border width                                             |
+| \`bc\`     | \`string\`             | Border color                                             |
+
+#### [Other View Props](./docs/View.md)
+
+### Text Component
+
+| Prop      | Type                | Description                                       |
+|-----------|---------------------|---------------------------------------------------|
+| \`color\` | \`string\`             | Text color      [See list of colors](./docs/Colors.md) |
+| \`fs\`     | \`number\`             | Font size                                         |
+| \`fw\`    | \`'normal'\` \| \`'bold'\` \| \`number\` | Font weight                                       |
+| \`align\` | \`'auto'\` \| \`'left'\` \| \`'right'\` \| \`'center'\` | Text alignment                                    |
+
+#### [Other Text Props](./docs/Text.md)
+
+
+### Image Component
+
+| Prop           | Type                | Description                                              |
+|----------------|---------------------|----------------------------------------------------------|
+| \`source\`       | \`ImageSourcePropType\`| Source of the image (usually requires a path or URL)     |
+| \`resizeMode\`   | \`'cover'\` \| \`'contain'\` \| \`'stretch'\` | Resize mode for the image    |
+| \`style\`        | \`ImageStyle\`         | Custom styles for the image (e.g., width, height)        |
+#### [Other Image Props](./docs/Image.md)
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
new file mode 100644
index 0000000..09ac3d3
--- /dev/null
+++ b/docs/_sidebar.md
@@ -0,0 +1,10 @@
+- Introduction/Installation
+
+ - [Quick Start](/)
+
+- Components
+
+ - [Colors](colors.md)
+ - [Image](image.md)
+ - [Text](text.md)
+ - [View](view.md)
diff --git a/docs/Colors.md b/docs/colors.md
similarity index 100%
rename from docs/Colors.md
rename to docs/colors.md
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..bf1f417
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Idimma React Native Widgets</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      loadSidebar: true,
+      name: '',
+      repo: ''
+    }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+</body>
+</html>
diff --git a/docs/Text.md b/docs/text.md
similarity index 100%
rename from docs/Text.md
rename to docs/text.md
diff --git a/docs/View.md b/docs/view.md
similarity index 100%
rename from docs/View.md
rename to docs/view.md