diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue
index 761dd7b..884c22e 100644
--- a/webclient/src/components/sidebar/AppSidebar.vue
+++ b/webclient/src/components/sidebar/AppSidebar.vue
@@ -50,14 +50,12 @@
           rel="noopener noreferrer"
           title="Open profile in gnexus-auth"
         >
-          <GnAvatar size="sm">
-            <img
-              v-if="authStore.user?.avatar_url"
-              :src="authStore.user.avatar_url"
-              alt="avatar"
-            />
-            <template v-else>{{ (authStore.user?.display_name || authStore.user?.email || '?').charAt(0).toUpperCase() }}</template>
-          </GnAvatar>
+          <GnAvatar
+            size="sm"
+            :src="authStore.user?.avatar_url || ''"
+            :alt="authStore.user?.display_name || 'avatar'"
+            :initials="(authStore.user?.display_name || authStore.user?.email || '?').charAt(0).toUpperCase()"
+          />
           <span class="user-name">{{ authStore.user?.display_name || authStore.user?.email }}</span>
         </a>
         <div class="sidebar-footer-actions">
diff --git a/webclient/src/components/ui/ProfileBadge.vue b/webclient/src/components/ui/ProfileBadge.vue
index 3a39dd1..47695d6 100644
--- a/webclient/src/components/ui/ProfileBadge.vue
+++ b/webclient/src/components/ui/ProfileBadge.vue
@@ -1,7 +1,5 @@
 <template>
-  <GnAvatar v-if="profile" size="sm">
-    {{ initials(profile.name) }}
-  </GnAvatar>
+  <GnAvatar v-if="profile" size="sm" :initials="initials(profile.name)" />
 </template>
 
 <script setup>
diff --git a/webclient/src/components/ui/WelcomeScreen.vue b/webclient/src/components/ui/WelcomeScreen.vue
index 971a2c5..2500763 100644
--- a/webclient/src/components/ui/WelcomeScreen.vue
+++ b/webclient/src/components/ui/WelcomeScreen.vue
@@ -17,9 +17,7 @@
         :class="{ 'is-selected': selectedId === p.id }"
         @click="selectedId = p.id"
       >
-        <GnAvatar size="md" variant="secondary">
-          <i :class="profileIcon(p)" class="ph"></i>
-        </GnAvatar>
+        <GnAvatar size="md" variant="secondary" :icon="profileIcon(p)" />
         <div class="profile-name">{{ p.name }}</div>
         <div class="profile-desc">{{ p.description }}</div>
       </div>