diff --git a/samples/interactions/chat/features/src/index.ts b/samples/interactions/chat/features/src/index.ts
index c40e9fce28..89c4d5d745 100644
--- a/samples/interactions/chat/features/src/index.ts
+++ b/samples/interactions/chat/features/src/index.ts
@@ -41,13 +41,13 @@ 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::part(base) {
-  --size: 60px;
-  color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);
-  border-radius: 20px;
+igc-avatar {
+  --ig-avatar-size: 60px;
+  --ig-avatar-color: var(--ig-success-500-contrast);
+  --ig-avatar-background: var(--ig-success-500);
+  --ig-avatar-border-radius: 20px;
 }
 \`\`\`
       `,
diff --git a/samples/layouts/avatar/styling/src/AvatarStyle.css b/samples/layouts/avatar/styling/src/AvatarStyle.css
index a55c955108..32ede370af 100644
--- a/samples/layouts/avatar/styling/src/AvatarStyle.css
+++ b/samples/layouts/avatar/styling/src/AvatarStyle.css
@@ -1,6 +1,6 @@
-igc-avatar::part(base) {
-  --size: 60px;
-  color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);;
-  border-radius: 20px;
+igc-avatar {
+  --ig-avatar-size: 60px;
+  --ig-avatar-color: var(--ig-success-500-contrast);
+  --ig-avatar-background: var(--ig-success-500);
+  --ig-avatar-border-radius: 20px;
 }
\ No newline at end of file