diff --git a/samples/layouts/avatar/overview/src/index.css b/samples/layouts/avatar/overview/src/index.css
index e5faf87285..9407c4b19a 100644
--- a/samples/layouts/avatar/overview/src/index.css
+++ b/samples/layouts/avatar/overview/src/index.css
@@ -1,49 +1,43 @@
 .avatar-overview-sample {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 90px;
+  gap: 2rem;
+  height: 100vh;
+  padding: 2rem;
 }
 
-.size-large {
+.avatar-overview-sample igc-avatar {
   --ig-size: var(--ig-size-large);
 }
 
-.avatar-with-badge {
-  position: relative;
-  display: inline-flex;
+.profile-status {
+  anchor-name: --profile-status;
 }
 
-.avatar-status {
+.status-badge {
+  --ig-size: var(--ig-size-large);
   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;
+.avatar-stack igc-avatar + igc-avatar {
+  margin-inline-start: -1.5rem;
 }
 
-.avatar-stack .size-large::part(base) {
-  border: 4px solid #fff;
-  box-sizing: border-box;
+.avatar-stack igc-avatar::part(base) {
+  box-shadow: 0 0 0 0.375rem var(--ig-surface-500);
 }
 
-.avatar-stack .size-large:last-child {
+.avatar-stack igc-avatar:last-child {
   --ig-avatar-background: #e8eef6;
   --ig-avatar-color: #6f8097;
 }
-
-.avatar-stack .size-large:last-child::part(initials) {
-  font-size: 32px;
-  font-weight: 500;
-}
diff --git a/samples/layouts/avatar/overview/src/index.tsx b/samples/layouts/avatar/overview/src/index.tsx
index 2892a11193..5eabef55cd 100644
--- a/samples/layouts/avatar/overview/src/index.tsx
+++ b/samples/layouts/avatar/overview/src/index.tsx
@@ -8,49 +8,37 @@ export default function AvatarOverview() {
   return (
     <div className="sample avatar-overview-sample">
       <IgrAvatar
-        className="size-large"
         shape="circle"
         src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
         alt="A profile photo of a man."
       />
-      <span className="avatar-with-badge">
-        <IgrAvatar
-          className="size-large"
-          shape="circle"
-          src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-          alt="A profile photo of a man."
-        />
-        <IgrBadge
-          className="avatar-status size-large"
-          dot={true}
-          outlined={true}
-          variant="success"
-        />
-      </span>
+      <IgrAvatar
+        className="profile-status"
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+        alt="A profile photo of a woman."
+      />
+      <IgrBadge className="status-badge" dot={true} outlined={true} variant="success" />
       <span className="avatar-stack" aria-label="Project members">
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-          alt="A profile photo of a man."
+          alt="A profile photo of an animated kid."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
           alt="A profile photo of a man."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
-          alt="A profile photo of a man."
+          alt="A profile photo of an abstract flat cat."
         />
         <IgrAvatar
-          className="size-large"
           shape="circle"
           initials="+3"
-          alt="A profile photo of a man."
+          alt="Three additional project members."
         />
       </span>
     </div>
diff --git a/samples/layouts/avatar/shape/src/index.css b/samples/layouts/avatar/shape/src/index.css
index a477d54e9d..83e4431ea2 100644
--- a/samples/layouts/avatar/shape/src/index.css
+++ b/samples/layouts/avatar/shape/src/index.css
@@ -1,52 +1,59 @@
-.avatar-overview-sample {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 90px;
-  min-height: 100vh;
-}
-
-.size-small {
+.avatar-shape-sample {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  place-content: center;
+  place-items: center;
+  column-gap: 2.5rem;
+  row-gap: 0.5rem;
+  height: 100vh;
+  padding: 2rem;
+}
+
+:where(igc-avatar) {
   --ig-size: var(--ig-size-small);
+  grid-row: 1;
 }
 
-.avatar-variant {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.avatar-label {
+:where(span) {
+  grid-row: 2;
+  text-align: center;
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  margin: 0;
 }
 
-.avatar-with-badge {
-  position: relative;
-  display: inline-flex;
-}
+:where(igc-badge) {
+  --ig-size: var(--ig-size-small);
 
-.avatar-status {
-  --size: 18px;
   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-shape-sample igc-avatar:nth-of-type(1) {
+  anchor-name: --circle;
+}
+
+.avatar-shape-sample igc-avatar:nth-of-type(2) {
+  anchor-name: --square;
+}
+
+.avatar-shape-sample igc-avatar:nth-of-type(3) {
+  anchor-name: --rounded;
 }
 
-.avatar-dot-badge {
-  --size: 12px;
-  right: 3px;
-  bottom: 3px;
+.avatar-shape-sample igc-badge:nth-of-type(1) {
+  position-anchor: --circle;
 }
 
-.avatar-count-badge {
-  --ig-badge-text-color: #ffffff;
+.avatar-shape-sample igc-badge:nth-of-type(2) {
+  position-anchor: --square;
 }
 
-.avatar-check-badge {
-  --ig-badge-icon-color: #ffffff;
+.avatar-shape-sample igc-badge:nth-of-type(3) {
+  position-anchor: --rounded;
 }
diff --git a/samples/layouts/avatar/shape/src/index.tsx b/samples/layouts/avatar/shape/src/index.tsx
index adaaac1538..6dcd8b5677 100644
--- a/samples/layouts/avatar/shape/src/index.tsx
+++ b/samples/layouts/avatar/shape/src/index.tsx
@@ -22,61 +22,32 @@ export default function AvatarShape() {
   }, []);
 
   return (
-    <div className="avatar-overview-sample">
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-small"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Circle</span>
-      </div>
+    <div className="avatar-shape-sample">
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Circle</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar className="size-small" shape="square">
-            <IgrIcon name="mail" collection="material" />
-          </IgrAvatar>
-          <IgrBadge
-            className="avatar-status avatar-count-badge size-small"
-            outlined={true}
-            shape="square"
-            variant="info"
-          >
-            2
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Square</span>
-      </div>
+      <IgrAvatar shape="square">
+        <IgrIcon name="mail" collection="material" />
+      </IgrAvatar>
+      <IgrBadge outlined={true} shape="square" variant="info">
+        2
+      </IgrBadge>
+      <span>Square</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="rounded"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-check-badge size-small"
-            outlined={true}
-            shape="rounded"
-            variant="success"
-          >
-            <IgrIcon name="check" collection="material" />
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Rounded</span>
-      </div>
+      <IgrAvatar
+        shape="rounded"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge outlined={true} shape="rounded" variant="success">
+        <IgrIcon name="check" collection="material" />
+      </IgrBadge>
+      <span>Rounded</span>
     </div>
   );
 }
diff --git a/samples/layouts/avatar/size/src/index.css b/samples/layouts/avatar/size/src/index.css
index 00002afa14..1b1f7fe7d5 100644
--- a/samples/layouts/avatar/size/src/index.css
+++ b/samples/layouts/avatar/size/src/index.css
@@ -1,60 +1,62 @@
-.avatar-overview-sample {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 90px;
-  min-height: 100vh;
+.avatar-size-sample {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  place-content: center;
+  place-items: center;
+  column-gap: 3rem;
+  row-gap: 0.5rem;
+  height: 100vh;
+  padding: 2rem;
 }
 
-.size-large {
-  --ig-size: var(--ig-size-large);
-}
-.size-medium {
-  --ig-size: var(--ig-size-medium);
+:where(igc-avatar) {
+  grid-row: 1;
 }
-.size-small {
-  --ig-size: var(--ig-size-small);
+
+:where(span) {
+  grid-row: 2;
+  text-align: center;
+  color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
 }
 
-.avatar-variant {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
+:where(igc-badge) {
+  position: absolute;
+  inset-block-start: anchor(85.5%);
+  inset-inline-start: anchor(85.5%);
+  translate: -50% -50%;
 }
 
-.avatar-with-badge {
-  width: 88px;
-  height: 88px;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.avatar-size-sample igc-avatar:nth-of-type(1) {
+  --ig-size: var(--ig-size-large);
+  anchor-name: --large;
 }
 
-.avatar-label {
-  color: var(--ig-gray-600);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.avatar-size-sample igc-avatar:nth-of-type(2) {
+  --ig-size: var(--ig-size-medium);
+  anchor-name: --medium;
 }
 
-.avatar-status {
-  --size: 18px;
-  position: absolute;
-  right: var(--badge-offset);
-  bottom: var(--badge-offset);
-  font-size: 0.75rem;
-  line-height: 1;
+.avatar-size-sample igc-avatar:nth-of-type(3) {
+  --ig-size: var(--ig-size-small);
+  anchor-name: --small;
 }
 
-.avatar-with-badge:has(.size-large) {
-  --badge-offset: 7px;
+.avatar-size-sample igc-badge:nth-of-type(1) {
+  --ig-size: var(--ig-size-large);
+  position-anchor: --large;
 }
 
-.avatar-with-badge:has(.size-medium) {
-  --badge-offset: 15px;
+.avatar-size-sample igc-badge:nth-of-type(2) {
+  --ig-size: var(--ig-size-medium);
+  position-anchor: --medium;
 }
 
-.avatar-with-badge:has(.size-small) {
-  --badge-offset: 24px;
+.avatar-size-sample igc-badge:nth-of-type(3) {
+  --ig-size: var(--ig-size-small);
+  position-anchor: --small;
 }
diff --git a/samples/layouts/avatar/size/src/index.tsx b/samples/layouts/avatar/size/src/index.tsx
index e2cff6bac6..b33665945e 100644
--- a/samples/layouts/avatar/size/src/index.tsx
+++ b/samples/layouts/avatar/size/src/index.tsx
@@ -6,60 +6,30 @@ import "igniteui-webcomponents/themes/light/material.css";
 
 export default function AvatarSize() {
   return (
-    <div className="avatar-overview-sample">
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-large"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-large"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Large</span>
-      </div>
+    <div className="avatar-size-sample">
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-05.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Large</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-medium"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-medium"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Medium</span>
-      </div>
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Medium</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-small"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Small</span>
-      </div>
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Small</span>
     </div>
   );
 }
diff --git a/samples/layouts/avatar/styling/src/icons.ts b/samples/layouts/avatar/styling/src/icons.ts
new file mode 100644
index 0000000000..c593c1717f
--- /dev/null
+++ b/samples/layouts/avatar/styling/src/icons.ts
@@ -0,0 +1,14 @@
+export const checkIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 16.17-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"/></svg>';
+
+export const calendarTodayIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 3H19V1H17V3H7V1H5V3H4C2.9 3 2 3.9 2 5V21C2 22.1 2.9 23 4 23H20C21.1 23 22 22.1 22 21V5C22 3.9 21.1 3 20 3ZM20 21H4V8H20V21Z" fill="#424242"/></svg>';
+
+export const xIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
+
+export const horizontalRuleIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M160-440v-80h640v80H160Z"/></svg>';
+
+export const peopleIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 11C17.66 11 18.99 9.66 18.99 8C18.99 6.34 17.66 5 16 5C14.34 5 13 6.34 13 8C13 9.66 14.34 11 16 11ZM8 11C9.66 11 10.99 9.66 10.99 8C10.99 6.34 9.66 5 8 5C6.34 5 5 6.34 5 8C5 9.66 6.34 11 8 11ZM8 13C5.67 13 1 14.17 1 16.5V19H15V16.5C15 14.17 10.33 13 8 13ZM16 13C15.71 13 15.38 13.02 15.03 13.05C16.19 13.89 17 15.02 17 16.5V19H23V16.5C23 14.17 18.33 13 16 13Z" fill="#424242"/></svg>';
diff --git a/samples/layouts/avatar/styling/src/index.css b/samples/layouts/avatar/styling/src/index.css
index 4f5edce1c6..321875f4d5 100644
--- a/samples/layouts/avatar/styling/src/index.css
+++ b/samples/layouts/avatar/styling/src/index.css
@@ -2,42 +2,59 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100vh;
 }
 
 .chat-list {
-  width: 344px;
-  max-width: 100%;
+  --ig-list-header-text-color: var(--ig-gray-900);
+  max-width: 20.5rem;
 }
 
-.size-small {
-  --ig-size: var(--ig-size-small);
+.chat-list * {
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
+}
+
+.chat-list [slot="title"] {
+  font-weight: 600;
+}
+
+.chat-list [slot="end"] {
+  color: var(--ig-gray-600);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 
-.size-medium {
-  --ig-size: var(--ig-size-medium);
+.chat-list-item--split {
+  --border-width: 0.0625rem;
+  --border-color: var(--ig-gray-300);
 }
 
-.size-large {
-  --ig-size: var(--ig-size-large);
+:where(igc-avatar) {
+  --ig-size: var(--ig-size-small);
+  --ig-avatar-background: var(--ig-gray-300);
+  --ig-avatar-color: var(--ig-gray-300-contrast);
+  --ig-avatar-icon-color: var(--ig-gray-300-contrast);
+}
+
+.avatar-icon {
+  --ig-size: var(--ig-size-small);
 }
 
 .avatar-with-badge {
   position: relative;
-  display: inline-flex;
+}
+
+:where(igc-badge) {
+  --ig-size: var(--ig-size-small);
 }
 
 .avatar-status {
-  --ig-badge-icon-color: #ffffff;
+  --ig-size: var(--ig-size-small);
   position: absolute;
-  right: -4px;
-  bottom: -4px;
+  inset-inline-end: -0.25rem;
+  inset-block-end: -0.25rem;
 }
 
 .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-background-color: var(--ig-gray-500);
 }
diff --git a/samples/layouts/avatar/styling/src/index.tsx b/samples/layouts/avatar/styling/src/index.tsx
index 0d427044c9..394c0f21e2 100644
--- a/samples/layouts/avatar/styling/src/index.tsx
+++ b/samples/layouts/avatar/styling/src/index.tsx
@@ -11,21 +11,13 @@ import {
   registerIconFromText,
 } from "igniteui-react";
 import "igniteui-webcomponents/themes/light/material.css";
-
-const checkIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m9 16.17-4.17-4.17-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17Z"/></svg>';
-
-const calendarIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z"/></svg>';
-
-const xIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>';
-
-const horizontalRuleIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M160-440v-80h640v80H160Z"/></svg>';
-
-const groupIcon =
-  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ffffff"><path d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM247-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47Zm466 0q-47 47-113 47-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113q0 66-47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm296.5-343.5Q440-607 440-640t-23.5-56.5Q393-720 360-720t-56.5 23.5Q280-673 280-640t23.5 56.5Q327-560 360-560t56.5-23.5ZM360-240Zm0-400Z"/></svg>';
+import {
+  calendarTodayIcon,
+  checkIcon,
+  horizontalRuleIcon,
+  peopleIcon,
+  xIcon,
+} from "./icons";
 
 type AvatarListItem = {
   title: string;
@@ -107,6 +99,7 @@ const sections: AvatarListSection[] = [
         avatar: {
           icon: "calendar",
           alt: "Calendar Icon.",
+          className: "avatar-meeting",
         },
       },
       {
@@ -114,8 +107,9 @@ const sections: AvatarListSection[] = [
         subtitle: "https://www.infra.com",
         end: "11:30 AM",
         avatar: {
-          icon: "group",
+          icon: "people",
           alt: "Group Icon.",
+          className: "avatar-meeting",
         },
       },
     ],
@@ -125,14 +119,14 @@ const sections: AvatarListSection[] = [
 function renderAvatar(item: AvatarListItem) {
   return (
     <IgrAvatar
-      className={`size-small${item.avatar.className ? ` ${item.avatar.className}` : ""}`}
+      className={`profile-avatar${item.avatar.className ? ` ${item.avatar.className}` : ""}`}
       shape="circle"
       src={item.avatar.src}
       initials={item.avatar.initials}
       alt={item.avatar.alt}
     >
       {item.avatar.icon && (
-        <IgrIcon name={item.avatar.icon} collection="material" />
+        <IgrIcon className="avatar-icon" name={item.avatar.icon} collection="material" />
       )}
     </IgrAvatar>
   );
@@ -140,11 +134,11 @@ function renderAvatar(item: AvatarListItem) {
 
 export default function AvatarStyling() {
   useEffect(() => {
-    registerIconFromText("calendar", calendarIcon, "material");
+    registerIconFromText("calendar", calendarTodayIcon, "material");
     registerIconFromText("check", checkIcon, "material");
     registerIconFromText("x", xIcon, "material");
     registerIconFromText("horizontalRule", horizontalRuleIcon, "material");
-    registerIconFromText("group", groupIcon, "material");
+    registerIconFromText("people", peopleIcon, "material");
   }, []);
 
   return (
@@ -154,12 +148,15 @@ export default function AvatarStyling() {
           <React.Fragment key={section.header}>
             <IgrListHeader>{section.header}</IgrListHeader>
             {section.items.map((item) => (
-              <IgrListItem key={`${section.header}-${item.title}-${item.end}`}>
+              <IgrListItem
+                className={section.header === "Chats" ? "chat-list-item--split" : undefined}
+                key={`${section.header}-${item.title}-${item.end}`}
+              >
                 <div className="avatar-with-badge" slot="start">
                   {renderAvatar(item)}
                   {item.badge && (
                     <IgrBadge
-                      className={`avatar-status avatar-check-badge size-small${
+                      className={`avatar-status avatar-check-badge${
                         item.badge.className ? ` ${item.badge.className}` : ""
                       }`}
                       outlined={true}
diff --git a/samples/layouts/avatar/tailwind-styling/src/index.css b/samples/layouts/avatar/tailwind-styling/src/index.css
index 40be077dd4..8596a2ad7e 100644
--- a/samples/layouts/avatar/tailwind-styling/src/index.css
+++ b/samples/layouts/avatar/tailwind-styling/src/index.css
@@ -1,3 +1,56 @@
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 @source "./index.tsx";
+
+.sample {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 21.5rem);
+  gap: 2.5rem;
+  place-content: center;
+  height: 100vh;
+}
+
+igc-card:nth-of-type(2) {
+  align-self: center;
+}
+
+igc-card-header {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
+
+igc-card-header::part(header) {
+  display: flex;
+  flex-flow: column nowrap;
+  overflow: hidden;
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+igc-card-header [slot="thumbnail"] {
+  margin-inline-end: 1rem;
+}
+
+.card-sample-custom-subtitle {
+  display: block;
+  color: var(--ig-gray-700);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0 1rem 0.5rem;
+}
+
+.stats-title {
+  color: var(--ig-gray-900);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+}
+
+.stats-subtitle {
+  color: var(--ig-gray-500);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
diff --git a/samples/layouts/avatar/tailwind-styling/src/index.tsx b/samples/layouts/avatar/tailwind-styling/src/index.tsx
index f592b9bdba..d3993ff583 100644
--- a/samples/layouts/avatar/tailwind-styling/src/index.tsx
+++ b/samples/layouts/avatar/tailwind-styling/src/index.tsx
@@ -32,11 +32,11 @@ export default function AvatarTailwindStyling() {
   }, []);
 
   return (
-    <div className="sample flex flex-row flex-nowrap items-center justify-center gap-10">
-      <IgrCard className="box-border h-[479px] w-[344px] [--ig-card-border-radius:30px]">
-        <IgrCardMedia className="h-[189px] overflow-hidden">
+    <div className='sample font-["Aktiv_Grotesk",Arial,sans-serif]'>
+      <IgrCard className="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
+        <IgrCardMedia className="h-[189px]">
           <img
-            className="h-full w-full object-cover"
+            className="object-cover"
             src="https://dl.infragistics.com/x/img/avatars/image-bg4.png"
             alt="Cafe interior"
           />
@@ -51,21 +51,17 @@ export default function AvatarTailwindStyling() {
           />
           <span slot="title">Kate Thompson</span>
         </IgrCardHeader>
+        <p className="card-sample-custom-subtitle">
+          3D Artist. Turning polygons into worlds and immersive digital
+          realities
+        </p>
         <IgrCardContent>
-          <p className="m-0">
-            3D Artist. Turning polygons into worlds and immersive digital
-            realities
-          </p>
-          <div className="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
+          <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
             {profileStats.map((stat, index) => (
               <React.Fragment key={stat.label}>
                 <div className="flex min-w-0 flex-col items-center gap-1 px-3">
-                  <span className="text-base font-bold leading-tight text-[var(--ig-gray-900)]">
-                    {stat.value}
-                  </span>
-                  <span className="text-sm leading-tight text-[var(--ig-gray-600)]">
-                    {stat.label}
-                  </span>
+                  <span className="stats-title">{stat.value}</span>
+                  <span className="stats-subtitle">{stat.label}</span>
                 </div>
                 {index < profileStats.length - 1 && (
                   <IgrDivider className="h-12" vertical />
@@ -77,11 +73,11 @@ export default function AvatarTailwindStyling() {
         <IgrCardActions>
           <IgrButton className="[--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 className="inline-flex items-center gap-1">
-              FOLLOW
-              <IgrIcon className="h-4 w-4" name="plus" collection="material" />
+              <span>FOLLOW</span>
+              <IgrIcon name="plus" collection="material" />
             </span>
           </IgrButton>
-          <div slot="end" className="inline-flex items-center gap-1">
+          <div slot="end" className="inline-flex gap-1">
             <IgrIconButton
               variant="flat"
               name="instagram"
@@ -104,11 +100,11 @@ export default function AvatarTailwindStyling() {
         </IgrCardActions>
       </IgrCard>
 
-      <IgrCard className="box-border h-[290px] w-[344px] [--ig-card-border-radius:30px]">
+      <IgrCard className="[--ig-card-border-radius:30px] [--ig-card-outline-color:transparent]">
         <IgrCardHeader>
           <span
             slot="thumbnail"
-            className="inline-flex rounded-full bg-[linear-gradient(135deg,#7dd3fc,#bff47a,#f5c2ff,#93c5fd)] p-[3px]"
+            className="inline-flex rounded-full p-[5px] bg-[linear-gradient(40deg,#D2F586,#A0C9FF)]"
           >
             <IgrAvatar
               className="[--ig-size:var(--ig-size-medium)]"
@@ -119,21 +115,17 @@ export default function AvatarTailwindStyling() {
           </span>
           <span slot="title">Kate Thompson</span>
         </IgrCardHeader>
-        <IgrCardContent className="overflow-hidden">
-          <p className="m-0">
-            3D Artist. Turning polygons into worlds and immersive digital
-            realities
-          </p>
-          <div className="mt-4 grid w-full grid-cols-[1fr_auto_1fr_auto_1fr] items-center">
+        <p className="card-sample-custom-subtitle">
+          3D Artist. Turning polygons into worlds and immersive digital
+          realities
+        </p>
+        <IgrCardContent>
+          <div className="grid grid-cols-[1fr_auto_1fr_auto_1fr]">
             {profileStats.map((stat, index) => (
               <React.Fragment key={stat.label}>
                 <div className="flex min-w-0 flex-col items-center gap-1 px-3">
-                  <span className="text-base font-bold leading-tight text-[var(--ig-gray-900)]">
-                    {stat.value}
-                  </span>
-                  <span className="text-sm leading-tight text-[var(--ig-gray-600)]">
-                    {stat.label}
-                  </span>
+                  <span className="stats-title">{stat.value}</span>
+                  <span className="stats-subtitle">{stat.label}</span>
                 </div>
                 {index < profileStats.length - 1 && (
                   <IgrDivider className="h-12" vertical />
@@ -145,8 +137,8 @@ export default function AvatarTailwindStyling() {
         <IgrCardActions>
           <IgrButton className="[--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 className="inline-flex items-center gap-1">
-              FOLLOW
-              <IgrIcon className="h-4 w-4" name="plus" collection="material" />
+              <span>FOLLOW</span>
+              <IgrIcon name="plus" collection="material" />
             </span>
           </IgrButton>
           <div slot="end" className="inline-flex items-center gap-1">
diff --git a/samples/layouts/avatar/variants/src/index.css b/samples/layouts/avatar/variants/src/index.css
index a477d54e9d..966ff37249 100644
--- a/samples/layouts/avatar/variants/src/index.css
+++ b/samples/layouts/avatar/variants/src/index.css
@@ -1,52 +1,59 @@
-.avatar-overview-sample {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 90px;
-  min-height: 100vh;
-}
-
-.size-small {
+.avatar-variants-sample {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  place-content: center;
+  place-items: center;
+  column-gap: 3rem;
+  row-gap: 0.5rem;
+  height: 100vh;
+  padding: 2rem;
+}
+
+:where(igc-avatar) {
   --ig-size: var(--ig-size-small);
+  grid-row: 1;
 }
 
-.avatar-variant {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.avatar-label {
+:where(span) {
+  grid-row: 2;
+  text-align: center;
   color: var(--ig-gray-600);
+  font-family: "Aktiv Grotesk", Arial, sans-serif;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  margin: 0;
 }
 
-.avatar-with-badge {
-  position: relative;
-  display: inline-flex;
-}
+:where(igc-badge) {
+  --ig-size: var(--ig-size-small);
 
-.avatar-status {
-  --size: 18px;
   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-variants-sample igc-avatar:nth-of-type(1) {
+  anchor-name: --image;
+}
+
+.avatar-variants-sample igc-avatar:nth-of-type(2) {
+  anchor-name: --icon;
+}
+
+.avatar-variants-sample igc-avatar:nth-of-type(3) {
+  anchor-name: --initials;
 }
 
-.avatar-dot-badge {
-  --size: 12px;
-  right: 3px;
-  bottom: 3px;
+.avatar-variants-sample igc-badge:nth-of-type(1) {
+  position-anchor: --image;
 }
 
-.avatar-count-badge {
-  --ig-badge-text-color: #ffffff;
+.avatar-variants-sample igc-badge:nth-of-type(2) {
+  position-anchor: --icon;
 }
 
-.avatar-check-badge {
-  --ig-badge-icon-color: #ffffff;
+.avatar-variants-sample igc-badge:nth-of-type(3) {
+  position-anchor: --initials;
 }
diff --git a/samples/layouts/avatar/variants/src/index.tsx b/samples/layouts/avatar/variants/src/index.tsx
index 45146dccea..ff0c70b370 100644
--- a/samples/layouts/avatar/variants/src/index.tsx
+++ b/samples/layouts/avatar/variants/src/index.tsx
@@ -22,61 +22,28 @@ export default function AvatarVariants() {
   }, []);
 
   return (
-    <div className="avatar-overview-sample">
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="circle"
-            src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-dot-badge size-small"
-            dot={true}
-            outlined={true}
-            variant="success"
-          />
-        </span>
-        <span className="avatar-label">Image</span>
-      </div>
+    <div className="avatar-variants-sample">
+      <IgrAvatar
+        shape="circle"
+        src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
+        alt="A profile photo of a man."
+      />
+      <IgrBadge dot={true} outlined={true} variant="success" />
+      <span>Image</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar className="size-small" shape="circle">
-            <IgrIcon name="mail" collection="material" />
-          </IgrAvatar>
-          <IgrBadge
-            className="avatar-status avatar-count-badge size-small"
-            outlined={true}
-            shape="rounded"
-            variant="info"
-          >
-            2
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Icon</span>
-      </div>
+      <IgrAvatar shape="circle">
+        <IgrIcon name="mail" collection="material" />
+      </IgrAvatar>
+      <IgrBadge outlined={true} shape="rounded" variant="info">
+        2
+      </IgrBadge>
+      <span>Icon</span>
 
-      <div className="avatar-variant">
-        <span className="avatar-with-badge">
-          <IgrAvatar
-            className="size-small"
-            shape="circle"
-            initials="AZ"
-            alt="A profile photo of a man."
-          />
-          <IgrBadge
-            className="avatar-status avatar-check-badge size-small"
-            outlined={true}
-            shape="rounded"
-            variant="success"
-          >
-            <IgrIcon name="check" collection="material" />
-          </IgrBadge>
-        </span>
-        <span className="avatar-label">Initials</span>
-      </div>
+      <IgrAvatar shape="circle" initials="AZ" alt="Avatar with AZ initials." />
+      <IgrBadge outlined={true} shape="rounded" variant="success">
+        <IgrIcon name="check" collection="material" />
+      </IgrBadge>
+      <span>Initials</span>
     </div>
   );
 }