diff --git a/client/constants/Pattern.ts b/client/constants/Pattern.ts
index ccdc727..5a150d1 100644
--- a/client/constants/Pattern.ts
+++ b/client/constants/Pattern.ts
@@ -1,4 +1,5 @@
 enum Pattern {
+    Avatar = 'Avatar',
     AvatarList = 'Avatar list',
     Badge = 'Badge',
     Breadcrumb = 'Breadcrumb',
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 9fd8c1f..15b3f69 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -88,6 +88,7 @@ const ExplorePage = () => {
                     <Heading title="Patterns" />
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
+                        <CoverCard pattern={Pattern.Avatar} />
                         <CoverCard pattern={Pattern.AvatarList} />
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Breadcrumb} />
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index eb7fbcd..0481f92 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -170,7 +170,7 @@ const HomePage = () => {
                                 marginBottom: '16px',
                             }}
                         >
-                            50+ patterns
+                            60+ patterns
                         </div>
                         <Link
                             to="/patterns"
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index a2735eb..88665c6 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -80,7 +80,9 @@ const Details: React.FC<{}> = () => {
                 />
             </div>
 
-            <RelatedPatterns patterns={[Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.Centering, Pattern.InitialAvatar, Pattern.PresenceIndicator]}
+            />
         </DetailsLayout>
     );
 };
diff --git a/client/patterns/avatar/Cover.tsx b/client/patterns/avatar/Cover.tsx
new file mode 100644
index 0000000..b0de94c
--- /dev/null
+++ b/client/patterns/avatar/Cover.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '8px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        borderRadius: '9999px',
+                        height: '48px',
+                        padding: '4px',
+                        width: '48px',
+                    }}
+                >
+                    <svg
+                        viewBox="0 0 24 24"
+                        style={{
+                            fill: "none",
+                            height: '100%',
+                            stroke: "#FFF",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 1,
+                            width: '100%',
+                        }}
+                    >
+                        <path
+                            d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
+                            M5,20.5
+                            c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
+                        />
+                    </svg>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
new file mode 100644
index 0000000..123eaff
--- /dev/null
+++ b/client/patterns/avatar/Details.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import RelatedPatterns from '../../components/RelatedPatterns';
+import Pattern from '../../constants/Pattern';
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout title="Avatar">
+            <div style={{ padding: '64px 32px' }}>
+                <BrowserFrame
+                    content={(
+                        <div
+                            style={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                height: '100%',
+                                justifyContent: 'center',
+                                padding: '8px',
+                            }}
+                        >
+                            <div
+                                style={{
+                                    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                                    borderRadius: '9999px',
+                                    height: '64px',
+                                    padding: '8px',
+                                    width: '64px',
+                                }}
+                            >
+                                <svg
+                                    viewBox="0 0 24 24"
+                                    style={{
+                                        fill: "none",
+                                        height: '100%',
+                                        stroke: "#FFF",
+                                        strokeLinecap: "round",
+                                        strokeLinejoin: "round",
+                                        strokeWidth: 1,
+                                        width: '100%',
+                                    }}
+                                >
+                                    <path
+                                        d={`M12,3.5c2.347,0,4.25,1.903,4.25,4.25S14.347,12,12,12s-4.25-1.903-4.25-4.25S9.653,3.5,12,3.5z
+                                        M5,20.5
+                                        c0-3.866,3.134-7,7-7s7,3.134,7,7H5z`}
+                                    />
+                                </svg>
+                            </div>
+                        </div>
+                    )}
+                    source={`
+<div style="
+    /* Rounded border */
+    border-radius: 50%;
+    height: 64px;
+    width: 64px;
+">
+    <!-- Avatar image -->
+    <img
+        src="..."
+        style="
+            /* Rounded border */
+            border-radius: 50%;
+
+            /* Take full size */
+            height: 100%;
+            width: 100%;
+        "
+    />
+</div>
+`}
+                />
+            </div>
+
+            <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.InitialAvatar, Pattern.PresenceIndicator]} />
+        </DetailsLayout>
+    );
+};
+
+export default Details;
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index a0ee851..25f1fc5 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -86,7 +86,13 @@ const Details: React.FC<{}> = () => {
             </div>
 
             <RelatedPatterns
-                patterns={[Pattern.AvatarList, Pattern.Badge, Pattern.Centering, Pattern.PresenceIndicator]}
+                patterns={[
+                    Pattern.Avatar,
+                    Pattern.AvatarList,
+                    Pattern.Badge,
+                    Pattern.Centering,
+                    Pattern.PresenceIndicator,
+                ]}
             />
         </DetailsLayout>
     );
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index f9cc574..177fc68 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -72,7 +72,10 @@ const Details: React.FC<{}> = () => {
 `}
                 />
             </div>
-            <RelatedPatterns patterns={[Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]} />
+
+            <RelatedPatterns
+                patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
+            />
         </DetailsLayout>
     );
 };
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 5ef572f..5adeb20 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -5,6 +5,7 @@
     <url><loc>https://csslayout.io/patterns/split-screen</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-footer</loc></url>
     <url><loc>https://csslayout.io/patterns/sticky-header</loc></url>
+    <url><loc>https://csslayout.io/patterns/avatar</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar-list</loc></url>
     <url><loc>https://csslayout.io/patterns/badge</loc></url>
     <url><loc>https://csslayout.io/patterns/breadcrumb</loc></url>