diff --git a/console/src/modules/system/users/components/UserAvatar.vue b/console/src/modules/system/users/components/UserAvatar.vue
index 137e737a2..41c6636e2 100644
--- a/console/src/modules/system/users/components/UserAvatar.vue
+++ b/console/src/modules/system/users/components/UserAvatar.vue
@@ -2,6 +2,7 @@
 import { apiClient } from "@/utils/api-client";
 import {
   IconRiPencilFill,
+  IconAddCircle,
   VButton,
   VAvatar,
   VDropdown,
@@ -18,6 +19,7 @@ import { useQueryClient } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import { useFileDialog } from "@vueuse/core";
 import { inject } from "vue";
+import { computed } from "vue";
 
 const queryClient = useQueryClient();
 const { currentUserHasPermission } = usePermission();
@@ -41,7 +43,6 @@ const user = inject<Ref<DetailedUser | undefined>>("user");
 const isCurrentUser = inject<ComputedRef<boolean>>("isCurrentUser");
 
 const userAvatarCropper = ref<IUserAvatarCropperType>();
-const showAvatarEditor = ref(false);
 const visibleCropperModal = ref(false);
 const originalFile = ref<File>() as Ref<File>;
 
@@ -117,14 +118,14 @@ const changeUploadAvatar = () => {
   reset();
   open();
 };
+
+const hasAvatar = computed(() => {
+  return !!user?.value?.user.spec.avatar;
+});
 </script>
 
 <template>
-  <div
-    class="h-full w-full"
-    @mouseover="showAvatarEditor = true"
-    @mouseout="showAvatarEditor = false"
-  >
+  <div class="group h-full w-full">
     <VAvatar
       :src="user?.user.spec.avatar"
       :alt="user?.user.spec.displayName"
@@ -137,10 +138,17 @@ const changeUploadAvatar = () => {
       v-if="currentUserHasPermission(['system:users:manage']) || isCurrentUser"
     >
       <div
-        v-show="showAvatarEditor"
-        class="absolute left-0 right-0 top-0 h-full w-full cursor-pointer rounded-full border-0 bg-black/60 text-center leading-[5rem] transition-opacity duration-300 group-hover:opacity-100"
+        class="absolute left-0 right-0 top-0 hidden h-full w-full cursor-pointer items-center rounded-full border-0 bg-black/60 text-center transition-all duration-300 group-hover:flex"
+        :class="{
+          '!flex': !hasAvatar,
+        }"
       >
+        <IconAddCircle
+          v-if="!hasAvatar"
+          class="inline-block w-full self-center text-2xl text-white"
+        />
         <IconRiPencilFill
+          v-else
           class="inline-block w-full self-center text-2xl text-white"
         />
       </div>
@@ -148,7 +156,7 @@ const changeUploadAvatar = () => {
         <VDropdownItem @click="open()">
           {{ $t("core.common.buttons.upload") }}
         </VDropdownItem>
-        <VDropdownItem @click="handleRemoveCurrentAvatar">
+        <VDropdownItem v-if="hasAvatar" @click="handleRemoveCurrentAvatar">
           {{ $t("core.common.buttons.delete") }}
         </VDropdownItem>
       </template>