diff --git a/frontend/src/components/UserDropdown.vue b/frontend/src/components/UserDropdown.vue
index 48dedb8b..7e82c90d 100644
--- a/frontend/src/components/UserDropdown.vue
+++ b/frontend/src/components/UserDropdown.vue
@@ -6,11 +6,7 @@
         :class="open ? 'bg-gray-300' : 'hover:bg-gray-200'"
         v-if="user"
       >
-        <Avatar
-          :label="user.full_name"
-          :image="user.user_image"
-          size="md"
-        />
+        <UserAvatar :user="user.name" size="md" />
         <span class="hidden text-base font-medium text-gray-900 sm:inline">
           {{ user.full_name }}
         </span>
@@ -25,9 +21,10 @@
 </template>
 
 <script setup>
-import { Dropdown, Avatar, FeatherIcon } from 'frappe-ui'
+import { Dropdown, FeatherIcon } from 'frappe-ui'
 import { sessionStore } from '@/stores/session'
-import { usersStore } from '@/stores/users';
+import { usersStore } from '@/stores/users'
+import UserAvatar from '@/components/UserAvatar.vue'
 import { computed } from 'vue'
 
 const { logout } = sessionStore()
diff --git a/frontend/src/pages/Lead.vue b/frontend/src/pages/Lead.vue
index 1b077fba..f5d21b60 100644
--- a/frontend/src/pages/Lead.vue
+++ b/frontend/src/pages/Lead.vue
@@ -11,20 +11,10 @@
         placeholder="Lead owner"
       >
         <template #prefix>
-          <Avatar
-            class="mr-2"
-            :image="getUser(lead.data.lead_owner).user_image"
-            :label="getUser(lead.data.lead_owner).full_name"
-            size="sm"
-          />
+          <UserAvatar class="mr-2" :user="lead.data.lead_owner" size="sm" />
         </template>
         <template #item-prefix="{ option }">
-          <Avatar
-            class="mr-2"
-            :image="getUser(option.email).user_image"
-            :label="getUser(option.email).full_name"
-            size="sm"
-          />
+          <UserAvatar class="mr-2" :user="option.email" size="sm" />
         </template>
       </Autocomplete>
       <Dropdown :options="statusDropdownOptions">
@@ -139,18 +129,16 @@
                         placeholder="Lead owner"
                       >
                         <template #prefix>
-                          <Avatar
+                          <UserAvatar
                             class="mr-2"
-                            :image="getUser(lead.data[field.name]).user_image"
-                            :label="getUser(lead.data[field.name]).full_name"
+                            :user="lead.data[field.name]"
                             size="sm"
                           />
                         </template>
                         <template #item-prefix="{ option }">
-                          <Avatar
+                          <UserAvatar
                             class="mr-2"
-                            :image="getUser(option.email).user_image"
-                            :label="getUser(option.email).full_name"
+                            :user="option.email"
                             size="sm"
                           />
                         </template>
@@ -235,6 +223,7 @@ import { usersStore } from '@/stores/users'
 import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
 import { ref, computed, h } from 'vue'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
+import UserAvatar from '../components/UserAvatar.vue'
 
 const { getUser, users } = usersStore()