diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
index e4b1ef8ff..9f7dd3a84 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.html
@@ -1,56 +1,51 @@
-<div class="sample avatar-overview-sample">
+<!-- Simple avatar -->
+<igx-avatar
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+
+<!-- Avatar + badge -->
+<igx-avatar
+    class="profile-status"
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+    alt="A profile photo of a woman.">
+</igx-avatar>
+<igx-badge
+    class="status-badge"
+    dot
+    outlined
+    type="success">
+</igx-badge>
+
+<!-- Avatar stack -->
+<div class="avatar-stack" aria-label="Project members">
     <igx-avatar
-        class="size-large"
         shape="circle"
         size="large"
-        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+        alt="A profile photo of a animated kid.">
+    </igx-avatar>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
         alt="A profile photo of a man.">
     </igx-avatar>
-
-    <span class="avatar-with-badge">
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-badge
-            class="avatar-status size-large"
-            dot
-            outlined
-            type="success">
-        </igx-badge>
-    </span>
-
-    <span class="avatar-stack" aria-label="Project members">
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-            alt="A profile photo of a man.">
-        </igx-avatar>
-        <igx-avatar
-            class="size-large"
-            shape="circle"
-            size="large"
-            initials="+3"
-            alt="Three additional project members.">
-        </igx-avatar>
-    </span>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
+        alt="A profile photo of a abstract flat cat.">
+    </igx-avatar>
+    <igx-avatar
+        shape="circle"
+        size="large"
+        initials="+3"
+        alt="Three additional project members.">
+    </igx-avatar>
 </div>
+
diff --git a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
index fbf75d273..6ee88140a 100644
--- a/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
+++ b/src/app/layouts/avatar/avatar-overview/avatar-overview.component.scss
@@ -1,47 +1,40 @@
-.avatar-overview-sample {
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    gap: 90px;
-    width: 100%;
-    min-height: 100vh;
+    gap: rem(100px);
+    height: 100vh;
+    padding: rem(32px);
 }
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+.profile-status {
+    anchor-name: --profile-status;
 }
 
-.avatar-status {
+.status-badge {
     position: absolute;
-    right: 6px;
-    bottom: 6px;
+    position-anchor: --profile-status;
+    inset-block-start: anchor(85%);
+    inset-inline-start: anchor(85%);
+    translate: -50% -50%;
 }
 
 .avatar-stack {
-    display: inline-flex;
-    align-items: center;
-}
-
-.avatar-stack .size-large {
-    margin-left: -24px;
-}
+    display: flex;
 
-.avatar-stack .size-large:first-child {
-    margin-left: 0;
-}
+    igx-avatar {
+        box-shadow: 0 0 0 rem(6px) var(--ig-surface-500);
 
-.avatar-stack .igx-avatar {
-    border: 4px solid #fff;
-    box-sizing: border-box;
-}
-
-.avatar-stack .size-large:last-child {
-    --ig-avatar-background: #e8eef6;
-    --ig-avatar-color: #6f8097;
-}
+        + igx-avatar {
+            margin-inline-start: rem(-24px);
+        }
 
-.avatar-stack .size-large:last-child .igx-avatar__initials {
-    font-size: 32px;
-    font-weight: 500;
+        &:last-child {
+            --ig-avatar-background: #e8eef6;
+            --ig-avatar-color: #6f8097;
+        }
+    }
 }
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
index 88c355153..261085c24 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.html
@@ -1,56 +1,42 @@
-<div class="sample avatar-shape-sample">
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-dot-badge size-small"
-                dot
-                outlined
-                type="success">
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Circle</span>
-    </div>
+<!-- Avatar Circle -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Circle</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar class="size-small" shape="square" size="small">
-                <igx-icon name="mail" collection="material"></igx-icon>
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-count-badge size-small"
-                outlined
-                shape="square"
-                type="info">
-                2
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Square</span>
-    </div>
+<!-- Avatar Square -->
+<igx-avatar
+    shape="square"
+    size="small">
+    <igx-icon name="mail" collection="material"></igx-icon>
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="square"
+    type="info">
+    2
+</igx-badge>
+<span>Square</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="rounded"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-check-badge size-small"
-                outlined
-                shape="rounded"
-                type="success">
-                <igx-icon name="check" collection="material"></igx-icon>
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Rounded</span>
-    </div>
-</div>
+<!-- Avatar Rounded -->
+<igx-avatar
+    shape="rounded"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="rounded"
+    type="success">
+    <igx-icon name="check" collection="material"></igx-icon>
+</igx-badge>
+<span>Rounded</span>
diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
index 78ac1f205..a6a47666f 100644
--- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
+++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss
@@ -1,48 +1,52 @@
-.avatar-shape-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
+@use "sass:list";
+@use "igniteui-theming/sass/typography" as *;
+
+$avatars: circle, square, rounded;
+
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    place-content: center;
+    place-items: center;
+    column-gap: rem(40px);
+    row-gap: rem(8px);
+    height: 100vh;
+    padding: rem(32px);
 }
 
-.avatar-variant {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+igx-avatar {
+    grid-row: 1;
 }
 
-.avatar-label {
+span {
+    grid-row: 2;
+    text-align: center;
     color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+    @include type-style("body-1") {
+        margin: 0;
+    };
 }
 
-.avatar-status {
-    --size: 18px;
+igx-badge {
+    --ig-size: var(--ig-size-small);
+
     position: absolute;
-    right: -4px;
-    bottom: -4px;
-    font-size: 0.75rem;
-    line-height: 1;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
 }
 
-.avatar-dot-badge {
-    --size: 12px;
-    right: 3px;
-    bottom: 3px;
-}
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
 
-.avatar-count-badge {
-    --ig-badge-text-color: #ffffff;
-}
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
+    }
 
-.avatar-check-badge {
-    --ig-badge-icon-color: #ffffff;
+    igx-badge:nth-of-type(#{$i}) {
+        position-anchor: --#{$avatar};
+    }
 }
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.html b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
index 5b16e53d1..be7a2c62b 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.html
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.html
@@ -1,61 +1,41 @@
-<div class="sample avatar-size-sample">
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-large">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="large"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-large"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Large</span>
-    </div>
+<!-- Avatar large size -->
+<igx-avatar
+    shape="circle"
+    size="large"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Large</span>
 
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-medium">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="medium"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-medium"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Medium</span>
-    </div>
+<!-- Avatar medium size -->
+<igx-avatar
+    shape="circle"
+    size="medium"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Medium</span>
 
-    <div class="avatar-size">
-        <span class="avatar-frame avatar-frame-small">
-            <span class="avatar-with-badge">
-                <igx-avatar
-                    shape="circle"
-                    size="small"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-                    alt="A profile photo of a man.">
-                </igx-avatar>
-                <igx-badge
-                    class="avatar-status avatar-dot-badge avatar-dot-badge-small"
-                    dot
-                    outlined
-                    type="success">
-                </igx-badge>
-            </span>
-        </span>
-        <span class="avatar-label">Small</span>
-    </div>
-</div>
+<!-- Avatar small size -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Small</span>
diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
index 5d2dcdb74..79f4204bb 100644
--- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
+++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss
@@ -1,69 +1,51 @@
-.avatar-size-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
-}
-
-.avatar-size {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-}
+@use "sass:list";
+@use "igniteui-theming/sass/typography" as *;
 
-.avatar-frame {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    place-content: center;
+    place-items: center;
+    column-gap: rem(48px);
+    row-gap: rem(8px);
+    height: 100vh;
+    padding: rem(32px);
 }
 
-.avatar-frame-large {
-    width: 72px;
-    height: 72px;
+igx-avatar {
+    grid-row: 1;
 }
 
-.avatar-frame-medium {
-    width: 72px;
-    height: 72px;
-}
-
-.avatar-frame-small {
-    width: 72px;
-    height: 72px;
-}
-
-.avatar-label {
+span {
+    grid-row: 2;
+    text-align: center;
     color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+    @include type-style("body-1") {
+        margin: 0;
+    };
 }
 
-.avatar-status {
+igx-badge {
     position: absolute;
-    line-height: 1;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
 }
 
-.avatar-dot-badge-large {
-    --size: 16px;
-    right: 3px;
-    bottom: 3px;
-}
+$avatars: large, medium, small;
 
-.avatar-dot-badge-medium {
-    --size: 14px;
-    right: 2px;
-    bottom: 2px;
-}
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
+
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
+    }
 
-.avatar-dot-badge-small {
-    --size: 12px;
-    right: 1px;
-    bottom: 1px;
+    igx-badge:nth-of-type(#{$i}) {
+        --ig-size: var(--ig-size-#{$avatar});
+        position-anchor: --#{$avatar};
+    }
 }
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
index 07510f6c3..758148130 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.html
@@ -1,71 +1,67 @@
-<div class="sample avatar-styling-sample">
-    <igx-list class="chat-list">
-        <igx-list-item [isHeader]="true">Chats</igx-list-item>
+<igx-list class="chat-list">
+    <igx-list-item [isHeader]="true">Chats</igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar
-                    class="size-small"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-                    alt="A profile photo of Nick Evans.">
-                </igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge size-small" outlined shape="rounded" type="success">
-                    <igx-icon name="check" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>Nick Evans</h2>
-            <span igxListLineSubTitle>Hi Samira, thanks for the ...</span>
-            <span igxListAction>9:44 AM</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+                alt="A profile photo of Nick Evans.">
+            </igx-avatar>
+            <igx-badge class="avatar-status" outlined shape="rounded" type="success">
+                <igx-icon name="check" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>Nick Evans</p>
+        <span igxListLineSubTitle>Hi Samira, thanks for the ...</span>
+        <span igxListAction>9:44 AM</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar class="avatar-muted size-small" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge avatar-muted-badge size-small" outlined shape="rounded" type="primary">
-                    <igx-icon name="x" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>James Ford</h2>
-            <span igxListLineSubTitle>I'll send the text and im ...</span>
-            <span igxListAction>8:30 AM</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar class="avatar-muted" shape="circle" initials="JF" alt="James Ford initials."></igx-avatar>
+            <igx-badge class="avatar-status avatar-muted-badge" outlined shape="rounded">
+                <igx-icon name="x" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>James Ford</p>
+        <span igxListLineSubTitle>I'll send the text and im ...</span>
+        <span igxListAction>8:30 AM</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <div igxListThumbnail class="avatar-with-badge">
-                <igx-avatar
-                    class="size-small"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-                    alt="A profile photo of Kate Porter.">
-                </igx-avatar>
-                <igx-badge class="avatar-status avatar-check-badge size-small" outlined shape="rounded" type="danger">
-                    <igx-icon name="horizontalRule" collection="material"></igx-icon>
-                </igx-badge>
-            </div>
-            <h2 igxListLineTitle>Kate Porter</h2>
-            <span igxListLineSubTitle>That's great!</span>
-            <span igxListAction>Yesterday</span>
-        </igx-list-item>
+    <igx-list-item>
+        <div igxListThumbnail class="avatar-with-badge">
+            <igx-avatar
+                shape="circle"
+                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
+                alt="A profile photo of Kate Porter.">
+            </igx-avatar>
+            <igx-badge class="avatar-status" outlined shape="rounded" type="error">
+                <igx-icon name="horizontalRule" collection="material"></igx-icon>
+            </igx-badge>
+        </div>
+        <p igxListLineTitle>Kate Porter</p>
+        <span igxListLineSubTitle>That's great!</span>
+        <span igxListAction>Yesterday</span>
+    </igx-list-item>
 
-        <igx-list-item [isHeader]="true">Meetings</igx-list-item>
+    <igx-list-item [isHeader]="true">Meetings</igx-list-item>
 
-        <igx-list-item>
-            <igx-avatar igxListThumbnail class="size-small" shape="circle" alt="Calendar icon.">
-                <igx-icon name="calendar" collection="material"></igx-icon>
-            </igx-avatar>
-            <h2 igxListLineTitle>Weekly Meeting</h2>
-            <span igxListLineSubTitle>https://www.infra.com</span>
-            <span igxListAction>Monday</span>
-        </igx-list-item>
+    <igx-list-item>
+        <igx-avatar igxListThumbnail shape="circle" alt="Calendar icon.">
+            <igx-icon name="calendar" collection="material"></igx-icon>
+        </igx-avatar>
+        <p igxListLineTitle>Weekly Meeting</p>
+        <span igxListLineSubTitle>https://www.infra.com</span>
+        <span igxListAction>Monday</span>
+    </igx-list-item>
 
-        <igx-list-item>
-            <igx-avatar igxListThumbnail class="size-small" shape="circle" alt="Group icon.">
-                <igx-icon name="group" collection="material"></igx-icon>
-            </igx-avatar>
-            <h2 igxListLineTitle>Design Discussion</h2>
-            <span igxListLineSubTitle>https://www.infra.com</span>
-            <span igxListAction>11:30 AM</span>
-        </igx-list-item>
-    </igx-list>
-</div>
+    <igx-list-item>
+        <igx-avatar igxListThumbnail shape="circle" alt="Group icon.">
+            <igx-icon name="group" collection="material"></igx-icon>
+        </igx-avatar>
+        <p igxListLineTitle>Design Discussion</p>
+        <span igxListLineSubTitle>https://www.infra.com</span>
+        <span igxListAction>11:30 AM</span>
+    </igx-list-item>
+</igx-list>
diff --git a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
index 13d20bb3f..e4e2886f9 100644
--- a/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-styling/avatar-styling.component.scss
@@ -1,35 +1,40 @@
-.avatar-styling-sample {
+@use "igniteui-theming/sass/typography" as *;
+
+:host {
     display: flex;
     align-items: center;
     justify-content: center;
+    height: 100vh;
 }
 
-.chat-list {
-    width: 344px;
-    max-width: 100%;
+igx-list {
+    --ig-list-border-width: #{rem(1px)};
+    --ig-list-border-color: var(--ig-gray-300);
+    --ig-list-header-text-color: var(--ig-gray-900);
+
+    max-width: rem(328px);
 }
 
-.size-small {
-    --ig-size: var(--ig-size-small);
+igx-avatar {
+    --ig-avatar-background: var(--ig-gray-300);
+    --ig-avatar-color: var(--ig-gray-300-contrast);
 }
 
 .avatar-with-badge {
     position: relative;
-    display: inline-flex;
+}
+
+igx-badge {
+    --ig-size: var(--ig-size-small);
 }
 
 .avatar-status {
-    --ig-badge-icon-color: #ffffff;
     position: absolute;
-    right: -4px;
-    bottom: -4px;
+    inset-inline-end: rem(-4px);
+    inset-block-end: rem(-4px);
 }
 
 .avatar-muted-badge {
     --ig-badge-background-color: var(--ig-gray-300);
-    --ig-badge-icon-color: var(--ig-gray-700);
-}
-
-.avatar-muted {
-    --ig-avatar-background: #D2DBE8;
+    --ig-badge-icon-color: var(--ig-gray-300-contrast);
 }
diff --git a/src/app/layouts/avatar/avatar-styling/layout.scss b/src/app/layouts/avatar/avatar-styling/layout.scss
deleted file mode 100644
index d3a420849..000000000
--- a/src/app/layouts/avatar/avatar-styling/layout.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-  display: inline-flex;
-  gap: 32px
-}
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
index 79cd59492..d4fff12c1 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.html
@@ -1,111 +1,105 @@
-<div class="sample flex min-h-screen w-full flex-row flex-nowrap items-center justify-center gap-10">
-    <igx-card class="box-border h-[479px] w-[344px] [--ig-card-border-radius:30px]">
-        <igx-card-media class="h-[189px] overflow-hidden">
-            <img
-                class="h-full w-full object-cover"
-                src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
-                alt="Cafe interior" />
-        </igx-card-media>
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-media class="h-[189px]">
+        <img
+        class="object-cover"
+        src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
+        alt="Cafe interior" />
+    </igx-card-media>
+    <igx-card-header>
+        <igx-avatar
+            igxCardThumbnail
+            shape="circle"
+            size="medium"
+            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
+            alt="A profile photo of Kate Thompson.">
+        </igx-avatar>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
 
-        <igx-card-header>
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider class="h-12" vertical></igx-divider>
+                }
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions>
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                FOLLOW
+                <igx-icon name="plus" collection="material"></igx-icon>
+            </span>
+        </button>
+        <div igxEnd class="inline-flex gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
+<igx-card class="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+    <igx-card-header>
+        <span igxCardThumbnail
+            class="inline-flex rounded-full p-[5px] bg-[linear-gradient(40deg,#D2F586,#A0C9FF)]">
             <igx-avatar
-                igxCardThumbnail
-                class="[--ig-size:var(--ig-size-medium)]"
+                size="medium"
                 shape="circle"
                 src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
                 alt="A profile photo of Kate Thompson.">
             </igx-avatar>
-            <span igxCardHeaderTitle>Kate Thompson</span>
-        </igx-card-header>
-
-        <igx-card-content>
-            <p class="m-0">3D Artist. Turning polygons into worlds and immersive digital realities</p>
-            <div class="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
-                @for (stat of profileStats; track stat.label; let isLast = $last) {
-                    <div class="flex min-w-0 flex-col items-center gap-1 px-3">
-                        <span class="text-base font-bold leading-tight text-[var(--ig-gray-900)]">{{ stat.value }}</span>
-                        <span class="text-sm leading-tight text-[var(--ig-gray-600)]">{{ stat.label }}</span>
-                    </div>
-                    @if (!isLast) {
-                        <igx-divider class="h-12" vertical></igx-divider>
-                    }
+        </span>
+        <span igxCardHeaderTitle>Kate Thompson</span>
+        <p class="card-sample-custom-subtitle">3D Artist. Turning polygons into worlds and immersive digital realities</p>
+    </igx-card-header>
+    <igx-card-content>
+        <div class="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
+            @for (stat of profileStats; track stat.label; let isLast = $last) {
+                <div class="flex min-w-0 flex-col items-center gap-1 px-3">
+                    <span class="stats-title">{{ stat.value }}</span>
+                    <span class="stats-subtitle">{{ stat.label }}</span>
+                </div>
+                @if (!isLast) {
+                    <igx-divider vertical></igx-divider>
                 }
-            </div>
-        </igx-card-content>
-
-        <igx-card-actions>
-            <button
-                igxButton="contained"
-                class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
-                <span class="inline-flex items-center gap-1">
-                    FOLLOW
-                    <igx-icon class="h-4 w-4" name="plus" collection="material"></igx-icon>
-                </span>
-            </button>
-            <div igxEnd class="inline-flex items-center gap-1">
-                <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
-                    <igx-icon name="instagram" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
-                    <igx-icon name="bereal" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
-                    <igx-icon name="threads" collection="material"></igx-icon>
-                </button>
-            </div>
-        </igx-card-actions>
-    </igx-card>
-
-    <igx-card class="box-border h-[290px] w-[344px] [--ig-card-border-radius:30px]">
-        <igx-card-header>
-            <span
-                igxCardThumbnail
-                class="inline-flex rounded-full bg-[linear-gradient(135deg,#7dd3fc,#bff47a,#f5c2ff,#93c5fd)] p-[3px]">
-                <igx-avatar
-                    class="[--ig-size:var(--ig-size-medium)]"
-                    shape="circle"
-                    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-09.png"
-                    alt="A profile photo of Kate Thompson.">
-                </igx-avatar>
+            }
+        </div>
+    </igx-card-content>
+    <igx-card-actions >
+        <button
+            igxButton="contained"
+            class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
+            <span class="inline-flex items-center gap-1">
+                <span>FOLLOW</span>
+                <igx-icon name="plus" collection="material"></igx-icon>
             </span>
-            <span igxCardHeaderTitle>Kate Thompson</span>
-        </igx-card-header>
-
-        <igx-card-content class="overflow-hidden">
-            <p class="m-0">3D Artist. Turning polygons into worlds and immersive digital realities</p>
-            <div class="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
-                @for (stat of profileStats; track stat.label; let isLast = $last) {
-                    <div class="flex min-w-0 flex-col items-center gap-1 px-3">
-                        <span class="text-base font-bold leading-tight text-[var(--ig-gray-900)]">{{ stat.value }}</span>
-                        <span class="text-sm leading-tight text-[var(--ig-gray-600)]">{{ stat.label }}</span>
-                    </div>
-                    @if (!isLast) {
-                        <igx-divider class="h-12" vertical></igx-divider>
-                    }
-                }
-            </div>
-        </igx-card-content>
-
-        <igx-card-actions>
-            <button
-                igxButton="contained"
-                class="[--ig-contained-button-active-background:var(--ig-gray-400)] [--ig-contained-button-background:var(--ig-gray-200)] [--ig-contained-button-border-radius:16px] [--ig-contained-button-focus-background:var(--ig-gray-300)] [--ig-contained-button-hover-background:var(--ig-gray-300)] [--ig-size:var(--ig-size-small)]">
-                <span class="inline-flex items-center gap-1">
-                    FOLLOW
-                    <igx-icon class="h-4 w-4" name="plus" collection="material"></igx-icon>
-                </span>
+        </button>
+        <div igxEnd class="inline-flex items-center gap-1">
+            <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
+                <igx-icon name="instagram" collection="material"></igx-icon>
+            </button>
+            <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
+                <igx-icon name="bereal" collection="material"></igx-icon>
             </button>
-            <div igxEnd class="inline-flex items-center gap-1">
-                <button igxIconButton="flat" igxRipple aria-label="Open Instagram profile">
-                    <igx-icon name="instagram" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open BeReal profile">
-                    <igx-icon name="bereal" collection="material"></igx-icon>
-                </button>
-                <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
-                    <igx-icon name="threads" collection="material"></igx-icon>
-                </button>
-            </div>
-        </igx-card-actions>
-    </igx-card>
-</div>
+            <button igxIconButton="flat" igxRipple aria-label="Open Threads profile">
+                <igx-icon name="threads" collection="material"></igx-icon>
+            </button>
+        </div>
+    </igx-card-actions>
+</igx-card>
+
diff --git a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
index 7f26ddcb5..ea7083981 100644
--- a/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
+++ b/src/app/layouts/avatar/avatar-tailwind-styling/avatar-tailwind-styling.component.scss
@@ -1,3 +1,36 @@
+@use "igniteui-theming/sass/typography" as *;
+
 :host {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, rem(344px));
+    gap: rem(40px);
+    place-content: center;
+    height: 100vh;
+}
+
+igx-card:nth-of-type(2) {
+    align-self: center;
+}
+
+.card-sample-custom-subtitle {
     display: block;
+    color: var(--ig-gray-700);
+
+    @include type-style("body-2") {
+        margin-block-start: rem(8px);
+    };
+}
+
+.stats-title {
+    color: var(--ig-gray-900);
+
+    @include type-style("subtitle-1") {
+        font-weight: 600;
+    };
+}
+
+.stats-subtitle {
+    color: var(--ig-gray-500);
+
+    @include type-style("body-2");
 }
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
index 438406536..6ac275898 100644
--- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
+++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.html
@@ -1,56 +1,44 @@
-<div class="sample avatar-variants-sample">
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-                alt="A profile photo of a man.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-dot-badge size-small"
-                dot
-                outlined
-                type="success">
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Image</span>
-    </div>
+<!-- Avatar with image -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+    alt="A profile photo of a man.">
+</igx-avatar>
+<igx-badge
+    dot
+    outlined
+    type="success">
+</igx-badge>
+<span>Image</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar class="size-small" shape="circle" size="small">
-                <igx-icon name="mail" collection="material"></igx-icon>
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-count-badge size-small"
-                outlined
-                shape="rounded"
-                type="info">
-                2
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Icon</span>
-    </div>
+<!-- Avatar with icon -->
+<igx-avatar
+    shape="circle"
+    size="small"
+>
+    <igx-icon name="mail" collection="material"></igx-icon>
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="rounded"
+    type="info">
+    2
+</igx-badge>
+<span>Icon</span>
+
+<!-- Avatar with initials -->
+<igx-avatar
+    shape="circle"
+    size="small"
+    initials="AZ"
+    alt="Avatar with AZ initials.">
+</igx-avatar>
+<igx-badge
+    outlined
+    shape="rounded"
+    type="success">
+    <igx-icon name="check" collection="material"></igx-icon>
+</igx-badge>
+<span>Initials</span>
 
-    <div class="avatar-variant">
-        <span class="avatar-with-badge">
-            <igx-avatar
-                class="size-small"
-                shape="circle"
-                size="small"
-                initials="AZ"
-                alt="Avatar with AZ initials.">
-            </igx-avatar>
-            <igx-badge
-                class="avatar-status avatar-check-badge size-small"
-                outlined
-                shape="rounded"
-                type="success">
-                <igx-icon name="check" collection="material"></igx-icon>
-            </igx-badge>
-        </span>
-        <span class="avatar-label">Initials</span>
-    </div>
-</div>
diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
index 355ff7df2..a4c56b17f 100644
--- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
+++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss
@@ -1,48 +1,53 @@
-.avatar-variants-sample {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 90px;
-    min-height: 100vh;
+@use "sass:list";
+@use "igniteui-theming/sass/typography" as *;
+
+$avatars: circle, square, rounded;
+
+:host {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-rows: auto auto;
+    place-content: center;
+    place-items: center;
+    column-gap: rem(48px);
+    row-gap: rem(8px);
+    height: 100vh;
+    padding: rem(32px);
 }
 
-.avatar-variant {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+// :where() keeps the sample's own rules at zero
+:where(igx-avatar) {
+    grid-row: 1;
 }
 
-.avatar-label {
+:where(span) {
+    grid-row: 2;
+    text-align: center;
     color: var(--ig-gray-600);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-}
 
-.avatar-with-badge {
-    position: relative;
-    display: inline-flex;
+    @include type-style("body-1") {
+        margin: 0;
+    };
 }
 
-.avatar-status {
-    --size: 18px;
+:where(igx-badge) {
+    --ig-size: var(--ig-size-small);
+
     position: absolute;
-    right: -4px;
-    bottom: -4px;
-    font-size: 0.75rem;
-    line-height: 1;
+    inset-block-start: anchor(85.5%);
+    inset-inline-start: anchor(85.5%);
+    translate: -50% -50%;
 }
 
-.avatar-dot-badge {
-    --size: 12px;
-    right: 3px;
-    bottom: 3px;
-}
+// The avatars and badges are flat siblings, so every badge needs its own anchor name to pin to.
+@each $avatar in $avatars {
+    $i: list.index($avatars, $avatar);
 
-.avatar-count-badge {
-    --ig-badge-text-color: #ffffff;
-}
+    igx-avatar:nth-of-type(#{$i}) {
+        anchor-name: --#{$avatar};
+    }
 
-.avatar-check-badge {
-    --ig-badge-icon-color: #ffffff;
+    igx-badge:nth-of-type(#{$i}) {
+        position-anchor: --#{$avatar};
+    }
 }