diff --git a/apps/web/src/app/settings/emergency-access.component.html b/apps/web/src/app/settings/emergency-access.component.html
index fbf646d5666..ee0fa015634 100644
--- a/apps/web/src/app/settings/emergency-access.component.html
+++ b/apps/web/src/app/settings/emergency-access.component.html
@@ -34,7 +34,12 @@
   <tbody>
     <tr *ngFor="let c of trustedContacts; let i = index">
       <td width="30">
-        <bit-avatar [text]="c | userName" [id]="c.granteeId" size="small"></bit-avatar>
+        <bit-avatar
+          [text]="c | userName"
+          [id]="c.granteeId"
+          [color]="c.avatarColor"
+          size="small"
+        ></bit-avatar>
       </td>
       <td>
         <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
@@ -142,7 +147,12 @@
   <tbody>
     <tr *ngFor="let c of grantedContacts; let i = index">
       <td width="30">
-        <bit-avatar [text]="c | userName" [id]="c.grantorId" size="small"></bit-avatar>
+        <bit-avatar
+          [text]="c | userName"
+          [id]="c.grantorId"
+          [color]="c.avatarColor"
+          size="small"
+        ></bit-avatar>
       </td>
       <td>
         <span>{{ c.email }}</span>
diff --git a/libs/common/src/models/response/emergency-access.response.ts b/libs/common/src/models/response/emergency-access.response.ts
index 381f4e16ecc..4aa969a953f 100644
--- a/libs/common/src/models/response/emergency-access.response.ts
+++ b/libs/common/src/models/response/emergency-access.response.ts
@@ -14,6 +14,7 @@ export class EmergencyAccessGranteeDetailsResponse extends BaseResponse {
   status: EmergencyAccessStatusType;
   waitTimeDays: number;
   creationDate: string;
+  avatarColor: string;
 
   constructor(response: any) {
     super(response);
@@ -25,6 +26,7 @@ export class EmergencyAccessGranteeDetailsResponse extends BaseResponse {
     this.status = this.getResponseProperty("Status");
     this.waitTimeDays = this.getResponseProperty("WaitTimeDays");
     this.creationDate = this.getResponseProperty("CreationDate");
+    this.avatarColor = this.getResponseProperty("AvatarColor");
   }
 }
 
@@ -37,6 +39,7 @@ export class EmergencyAccessGrantorDetailsResponse extends BaseResponse {
   status: EmergencyAccessStatusType;
   waitTimeDays: number;
   creationDate: string;
+  avatarColor: string;
 
   constructor(response: any) {
     super(response);
@@ -48,6 +51,7 @@ export class EmergencyAccessGrantorDetailsResponse extends BaseResponse {
     this.status = this.getResponseProperty("Status");
     this.waitTimeDays = this.getResponseProperty("WaitTimeDays");
     this.creationDate = this.getResponseProperty("CreationDate");
+    this.avatarColor = this.getResponseProperty("AvatarColor");
   }
 }