diff --git a/docs/contributing-guide/components/_category_.json b/docs/contributing-guide/components/_category_.json
new file mode 100644
index 0000000..63aba47
--- /dev/null
+++ b/docs/contributing-guide/components/_category_.json
@@ -0,0 +1,11 @@
+{
+  "label": "Component Library",
+  "position": 3,
+  "collapsed": true,
+  "link": {
+    "type": "generated-index",
+    "description": "Guides for component library"
+  }
+}
+
+
diff --git a/docs/contributing-guide/components/avatar.md b/docs/contributing-guide/components/avatar.md
new file mode 100644
index 0000000..cf5d658
--- /dev/null
+++ b/docs/contributing-guide/components/avatar.md
@@ -0,0 +1,66 @@
+---
+id: avatar
+title: Avatar
+---
+
+The Avatar component is a versatile and reusable component that allows us to display user avatars or profile pictures in our app. We can customize it by passing various props to suit our component needs. In this guide, we'll walk through how to use the Avatar component in codebase.
+
+#### Importing the Avatar Component
+To use the Avatar component in our app, we need to import it from our styled components. Here's how we can import it:
+
+```
+import { Avatar } from "StyledComponents";
+```
+![default avatar](/img/avatar/default.png)
+
+#### Using the Avatar Component
+The Avatar component can be used with various props to control its appearance. Here are some examples of how we can use it:
+
+```
+<Avatar
+  url={company.logo || logo}
+/>
+```
+![avatar with url](/img/avatar/with-url.png)
+
+
+```
+<Avatar
+  name="Hello Moto"
+/>
+```
+
+![avatar with name](/img/avatar/with-name.png)
+
+```
+<Avatar
+  name="Hello Moto"
+  initialsLetterCount={1}
+/>
+```
+![avatar with name](/img/avatar/with-initials-count.png)
+
+```
+<Avatar
+  classNameImg="mr-5"
+  classNameInitials="lg:text-5xl text-lg font-bold capitalize text-white"
+  classNameInitialsWrapper="mr-5 bg-miru-gray-1000"
+  initialsLetterCount={1}
+  name={company.name}
+  size="h-10 w-10 lg:h-20 lg:w-20"
+  url={company.logo || logo}
+/>
+```
+
+#### Avatar Component Props
+
+| Name | Description | Default Value |
+|---------------|-----------------------------------------------------------|---------------|
+| `url` | Provide the url of the logo | `""` |
+| `name` | Pass any name or string value, so that it will display the avatar with initials. | `""` |
+| `initialsLetterCount` | Number of initials to appear in the avatar if the name is provided instead of url | 2 |
+| `size` | Specify the size of the avatar. | `"md:h-10 md:w-10 h-6 w-6"` |
+| `classNameImg` | Specify the style classes needed avatar image | `"inline-block rounded-full"` |
+| `classNameInitials`   | To provide external classnames for the initials styling. Should be a string. | `"md:text-xl text-xs md:font-medium font-light leading-none text-white"` |
+| `classNameInitialsWrapper` | To provide external classnames for the initials wrapper styling. Should be a string. | `"inline-flex rounded-full items-center justify-center bg-gray-500"` |
+| `style`| Custom css styles which are not the part of tailwind. | `""` |
diff --git a/static/img/avatar/default.png b/static/img/avatar/default.png
new file mode 100644
index 0000000..12239c0
Binary files /dev/null and b/static/img/avatar/default.png differ
diff --git a/static/img/avatar/with-initials-count.png b/static/img/avatar/with-initials-count.png
new file mode 100644
index 0000000..525d92f
Binary files /dev/null and b/static/img/avatar/with-initials-count.png differ
diff --git a/static/img/avatar/with-name.png b/static/img/avatar/with-name.png
new file mode 100644
index 0000000..3983f72
Binary files /dev/null and b/static/img/avatar/with-name.png differ
diff --git a/static/img/avatar/with-url.png b/static/img/avatar/with-url.png
new file mode 100644
index 0000000..35f02af
Binary files /dev/null and b/static/img/avatar/with-url.png differ