diff --git a/packages/nc-gui/components/account/Profile.vue b/packages/nc-gui/components/account/Profile.vue
index c695c6813e..30fbc61c7d 100644
--- a/packages/nc-gui/components/account/Profile.vue
+++ b/packages/nc-gui/components/account/Profile.vue
@@ -69,7 +69,7 @@ const onValidate = async (_: any, valid: boolean) => {
         <div class="flex text-gray-500" data-rec="true">{{ $t('labels.controlAppearance') }}</div>
         <div class="flex flex-row mt-4">
           <div class="flex h-20 mt-1.5">
-            <GeneralUserIcon size="xlarge" :email="user?.email" />
+            <GeneralUserIcon size="xlarge" :email="user?.email" :name="user?.display_name" />
           </div>
           <div class="flex w-10"></div>
           <a-form
diff --git a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
index b9a8763960..3c02238bf1 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/UserInfo.vue
@@ -85,7 +85,7 @@ onMounted(() => {
         class="flex flex-row py-2 px-3 gap-x-2 items-center hover:bg-gray-200 rounded-lg cursor-pointer h-10"
         data-testid="nc-sidebar-userinfo"
       >
-        <GeneralUserIcon :email="user?.email" size="base" />
+        <GeneralUserIcon :email="user?.email" size="base" :name="user?.display_name" />
         <div class="flex truncate">
           {{ name ? name : user?.email }}
         </div>
diff --git a/packages/nc-gui/components/general/UserIcon.vue b/packages/nc-gui/components/general/UserIcon.vue
index 99db2c63e4..473a542f77 100644
--- a/packages/nc-gui/components/general/UserIcon.vue
+++ b/packages/nc-gui/components/general/UserIcon.vue
@@ -12,23 +12,21 @@ const props = withDefaults(
   },
 )
 
-const emailProp = toRef(props, 'email')
+const size = computed(() => props.size || 'medium')
+
+const displayName = computed(() => props.name ?? '')
+
+const email = computed(() => props?.email ?? '')
 
 const backgroundColor = computed(() => {
   // in comments we need to generate user icon from email
-  if (emailProp.value.length) {
-    return stringToColor(emailProp.value)
+  if (email.value.length) {
+    return stringToColor(email.value)
   }
 
-  return props.email ? stringToColor(props.email) : '#FFFFFF'
+  return email.value ? stringToColor(email.value) : '#FFFFFF'
 })
 
-const size = computed(() => props.size || 'medium')
-
-const displayName = computed(() => props.email ?? '')
-
-const email = computed(() => props.name ?? props?.email ?? '')
-
 const usernameInitials = computed(() => {
   const displayNameSplit = displayName.value?.split(' ').filter((name) => name) ?? []
 
diff --git a/packages/nc-gui/components/project/AccessSettings.vue b/packages/nc-gui/components/project/AccessSettings.vue
index d10a94676f..2bb41eda78 100644
--- a/packages/nc-gui/components/project/AccessSettings.vue
+++ b/packages/nc-gui/components/project/AccessSettings.vue
@@ -190,7 +190,7 @@ onMounted(async () => {
               class="user-row flex flex-row border-b-1 py-1 min-h-14 items-center"
             >
               <div class="flex gap-3 items-center users-email-grid">
-                <GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
+                <GeneralUserIcon size="base" :email="collab.email" />
                 <span class="truncate">
                   {{ collab.email }}
                 </span>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
index 50cd3247ca..9d6ded8d2b 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
@@ -238,7 +238,7 @@ const onClickAudit = () => {
         </div>
         <div v-if="hasEditPermission" class="p-2 bg-gray-50 gap-2 flex">
           <div class="h-14 flex flex-row w-full bg-white py-2.75 px-1.5 items-center rounded-xl border-1 border-gray-200">
-            <GeneralUserIcon size="base" class="!w-10" :email="user?.email" />
+            <GeneralUserIcon size="base" class="!w-10" :email="user?.email" :name="user?.display_name" />
             <a-input
               v-model:value="comment"
               class="!rounded-lg border-1 bg-white !px-2.5 !py-2 !border-gray-200 nc-comment-box !outline-none"