diff --git a/navigation.php b/navigation.php
index 638afd0..d662ad7 100644
--- a/navigation.php
+++ b/navigation.php
@@ -9,6 +9,7 @@
     ]],
     'List Fields' => [
         'children' => [
+            'Avatar' => '/docs/fields/avatar',
             'Audio' => "/docs/fields/audio",
             'Image Zoom' => "/docs/fields/image_zoom",
             'Range' => "/docs/fields/range",
diff --git a/source/assets/fields/avatar/single.png b/source/assets/fields/avatar/single.png
new file mode 100644
index 0000000..4438c48
Binary files /dev/null and b/source/assets/fields/avatar/single.png differ
diff --git a/source/assets/fields/avatar/table.png b/source/assets/fields/avatar/table.png
new file mode 100644
index 0000000..606fe63
Binary files /dev/null and b/source/assets/fields/avatar/table.png differ
diff --git a/source/docs/fields/avatar.md b/source/docs/fields/avatar.md
new file mode 100644
index 0000000..b9cf7a6
--- /dev/null
+++ b/source/docs/fields/avatar.md
@@ -0,0 +1,40 @@
+---
+title: Avatar
+description: Avatar Orchid Extra Fields
+extends: _layouts.documentation
+section: content
+locale: en
+---
+
+# Avatar {#Avatar}
+A very simple Field to render a image and title under a picture.
+
+For example, you can use it like this.
+
+<img class="block m-auto" src="/assets/fields/avatar/single.png" alt="sinlge avatar" />
+
+Even, You may use it in the table
+
+<img class="block m-auto" src="/assets/fields/avatar/table.png" alt="avatar in table" />
+## Example code
+
+```php
+
+use agoalofalife\Orchid\Fields\Range;
+
+// value - url to source
+// heightByPercent - size avatar by percents
+// nameAvatar - text under a avatar like a "title"
+// sizeTitle - size a title
+// left or right or center - position avatar on layout
+
+Avatar::make('test')
+        ->value("https://avatars.githubusercontent.com/u/15719824?v=4")
+        ->heightByPercent(6)
+        ->nameAvatar('Ilia Chubarov')
+        ->sizeTitle(5)
+        ->left(),
+```
+
+
+