diff --git a/public/assets/images/profile.jpg b/public/assets/images/profile.jpg
new file mode 100644
index 0000000..0c0224d
Binary files /dev/null and b/public/assets/images/profile.jpg differ
diff --git a/public/components/components-avatar/1-dark.html b/public/components/components-avatar/1-dark.html
new file mode 100644
index 0000000..e224002
--- /dev/null
+++ b/public/components/components-avatar/1-dark.html
@@ -0,0 +1,7 @@
+<!-- Basic -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+</div>
+
diff --git a/public/components/components-avatar/1.html b/public/components/components-avatar/1.html
new file mode 100644
index 0000000..6c5d967
--- /dev/null
+++ b/public/components/components-avatar/1.html
@@ -0,0 +1,6 @@
+<!-- Basic -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+    <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+</div>
\ No newline at end of file
diff --git a/public/components/components-avatar/2-dark.html b/public/components/components-avatar/2-dark.html
new file mode 100644
index 0000000..95f687f
--- /dev/null
+++ b/public/components/components-avatar/2-dark.html
@@ -0,0 +1,15 @@
+<!-- Indicator -->
+<div class="flex flex-wrap items-center justify-center gap-2">
+  <span class="relative h-20 w-20">
+      <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+      <span class="absolute bottom-0 h-7 w-7 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+  <span class="relative h-16 w-16">
+      <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg"  alt="img" />
+      <span class="absolute bottom-0 h-6 w-6 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+  <span class="relative h-12 w-12">
+      <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+      <span class="absolute bottom-0 h-4 w-4 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+  </span>
+</div>
diff --git a/public/components/components-avatar/2.html b/public/components/components-avatar/2.html
new file mode 100644
index 0000000..4e441d5
--- /dev/null
+++ b/public/components/components-avatar/2.html
@@ -0,0 +1,16 @@
+<!-- Indicator -->
+
+<div class="flex flex-wrap items-center justify-center gap-2">
+    <span class="relative h-20 w-20">
+        <img class="h-20 w-20 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+        <span class="absolute bottom-0 h-7 w-7 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+    <span class="relative h-16 w-16">
+        <img class="h-16 w-16 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+        <span class="absolute bottom-0 h-6 w-6 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+    <span class="relative h-12 w-12">
+        <img class="h-12 w-12 overflow-hidden rounded-full object-cover" src="/assets/images/profile.jpg" alt="img" />
+        <span class="absolute bottom-0 h-4 w-4 rounded-full bg-green-600 ring-2 ring-white right-0"></span>
+    </span>
+</div>
diff --git a/src/data/components/components-avatar.mdx b/src/data/components/components-avatar.mdx
new file mode 100644
index 0000000..a054460
--- /dev/null
+++ b/src/data/components/components-avatar.mdx
@@ -0,0 +1,23 @@
+---
+title: Avatar
+category: components
+container: p-8 flex items-center justify-center gap-4 sm:gap-8
+seo:
+  title: Avatar Components
+  description: Avatar components in Tailwind | LangUI
+components:
+  1:
+    title: Basic
+    dark: true
+  2:
+    title: Indicator
+    dark: true
+
+---
+
+# Avatar Components
+
+<ComponentsList
+  componentsData={componentsData}
+  componentContainer={componentContainer}
+/>