diff --git a/apps/web/src/app/layouts/navbar.component.html b/apps/web/src/app/layouts/navbar.component.html
index ff96e851a4..77c1416504 100644
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@@ -47,7 +47,12 @@
           [bitMenuTriggerFor]="accountMenu"
           class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
         >
-          <dynamic-avatar [text]="name" size="xsmall" aria-hidden="true"></dynamic-avatar>
+          <dynamic-avatar
+            [text]="name"
+            [id]="userId"
+            size="xsmall"
+            aria-hidden="true"
+          ></dynamic-avatar>
           <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
         </button>
         <bit-menu class="dropdown-menu" #accountMenu>
@@ -57,7 +62,7 @@
               *ngIf="name"
               appStopProp
             >
-              <dynamic-avatar [text]="name" size="small"></dynamic-avatar>
+              <dynamic-avatar [text]="name" [id]="userId" size="small"></dynamic-avatar>
               <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                 <span>{{ "loggedInAs" | i18n }}</span>
                 <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{
diff --git a/apps/web/src/app/settings/profile.component.html b/apps/web/src/app/settings/profile.component.html
index f4a887fe6e..be0e58eaa1 100644
--- a/apps/web/src/app/settings/profile.component.html
+++ b/apps/web/src/app/settings/profile.component.html
@@ -33,7 +33,8 @@
     </div>
     <div class="col-6">
       <div class="mb-3">
-        <dynamic-avatar text="{{ profile | userName }}" [size]="'large'"> </dynamic-avatar>
+        <dynamic-avatar text="{{ profile | userName }}" [id]="profile.id" [size]="'large'">
+        </dynamic-avatar>
         <button
           type="button"
           class="btn btn-outline-secondary tw-ml-3.5"
diff --git a/apps/web/src/vault/individual-vault/organization-badge/organization-name-badge.component.ts b/apps/web/src/vault/individual-vault/organization-badge/organization-name-badge.component.ts
index a22d1e2c3a..faaf01b309 100644
--- a/apps/web/src/vault/individual-vault/organization-badge/organization-name-badge.component.ts
+++ b/apps/web/src/vault/individual-vault/organization-badge/organization-name-badge.component.ts
@@ -33,9 +33,14 @@ export class OrganizationNameBadgeComponent implements OnInit {
     if (this.isMe) {
       this.color = await this.avatarService.loadColorFromState();
       if (this.color == null) {
-        const userName =
-          (await this.tokenService.getName()) ?? (await this.tokenService.getEmail());
-        this.color = Utils.stringToColor(userName.toUpperCase());
+        const userId = await this.tokenService.getUserId();
+        if (userId != null) {
+          this.color = Utils.stringToColor(userId);
+        } else {
+          const userName =
+            (await this.tokenService.getName()) ?? (await this.tokenService.getEmail());
+          this.color = Utils.stringToColor(userName.toUpperCase());
+        }
       }
     } else {
       this.color = Utils.stringToColor(this.organizationName.toUpperCase());