diff --git a/samples/interactions/chat/features/src/index.ts b/samples/interactions/chat/features/src/index.ts
index c40e9fce28..4b90fb259c 100644
--- a/samples/interactions/chat/features/src/index.ts
+++ b/samples/interactions/chat/features/src/index.ts
@@ -41,12 +41,15 @@ export class ChatOverview {
       id: '4',
       text: 
       `
-Thank you for your patience. It seems that the issue is the name of the CSS part. Here is the fixed code:
+Thank you for your patience. The background should be applied using the \`--ig-avatar-background\` CSS variable on the \`igc-avatar\` host element. Here is the fixed code:
 \`\`\`css
+igc-avatar {
+  --ig-avatar-size: 60px;
+  --ig-avatar-color: var(--ig-success-500-contrast);
+  --ig-avatar-background: var(--ig-success-500);
+}
+
 igc-avatar::part(base) {
-  --size: 60px;
-  color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);
   border-radius: 20px;
 }
 \`\`\`
diff --git a/samples/layouts/avatar/styling/src/AvatarStyle.css b/samples/layouts/avatar/styling/src/AvatarStyle.css
index a55c955108..2fea3ec7c7 100644
--- a/samples/layouts/avatar/styling/src/AvatarStyle.css
+++ b/samples/layouts/avatar/styling/src/AvatarStyle.css
@@ -1,6 +1,9 @@
+igc-avatar {
+  --ig-avatar-size: 60px;
+  --ig-avatar-color: var(--ig-success-500-contrast);
+  --ig-avatar-background: var(--ig-success-500);
+}
+
 igc-avatar::part(base) {
-  --size: 60px;
-  color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);;
   border-radius: 20px;
 }
\ No newline at end of file