diff --git a/webclient/src/components/sidebar/AppSidebar.vue b/webclient/src/components/sidebar/AppSidebar.vue
index d241afa..761dd7b 100644
--- a/webclient/src/components/sidebar/AppSidebar.vue
+++ b/webclient/src/components/sidebar/AppSidebar.vue
@@ -50,15 +50,14 @@
           rel="noopener noreferrer"
           title="Open profile in gnexus-auth"
         >
-          <img
-            v-if="authStore.user?.avatar_url"
-            class="user-avatar"
-            :src="authStore.user.avatar_url"
-            alt="avatar"
-          />
-          <div v-else class="user-avatar user-avatar-fallback">
-            {{ (authStore.user?.display_name || authStore.user?.email || '?').charAt(0).toUpperCase() }}
-          </div>
+          <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>
           <span class="user-name">{{ authStore.user?.display_name || authStore.user?.email }}</span>
         </a>
         <div class="sidebar-footer-actions">
@@ -153,24 +152,6 @@
   color: var(--color-text-primary);
 }
 
-.user-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.user-avatar-fallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-primary);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-}
-
 .user-name {
   font-size: 13px;
   color: var(--color-text-secondary);
diff --git a/webclient/src/components/ui/ProfileBadge.vue b/webclient/src/components/ui/ProfileBadge.vue
index 050348c..3a39dd1 100644
--- a/webclient/src/components/ui/ProfileBadge.vue
+++ b/webclient/src/components/ui/ProfileBadge.vue
@@ -1,8 +1,7 @@
 <template>
-  <GnBadge v-if="profile" variant="primary">
-    <i class="ph ph-user-circle"></i>
-    {{ profile.name }}
-  </GnBadge>
+  <GnAvatar v-if="profile" size="sm">
+    {{ initials(profile.name) }}
+  </GnAvatar>
 </template>
 
 <script setup>
@@ -15,4 +14,9 @@
 
 const profilesStore = useProfilesStore()
 const profile = computed(() => props.profileId ? profilesStore.getProfile(props.profileId) : null)
+
+function initials(name) {
+  if (!name) return '?'
+  return name.split(/\s+/).map(w => w[0]).join('').slice(0, 2).toUpperCase()
+}
 </script>
diff --git a/webclient/src/components/ui/WelcomeScreen.vue b/webclient/src/components/ui/WelcomeScreen.vue
index b7c320f..971a2c5 100644
--- a/webclient/src/components/ui/WelcomeScreen.vue
+++ b/webclient/src/components/ui/WelcomeScreen.vue
@@ -17,7 +17,9 @@
         :class="{ 'is-selected': selectedId === p.id }"
         @click="selectedId = p.id"
       >
-        <i :class="profileIcon(p)" class="profile-icon ph"></i>
+        <GnAvatar size="md" variant="secondary">
+          <i :class="profileIcon(p)" class="ph"></i>
+        </GnAvatar>
         <div class="profile-name">{{ p.name }}</div>
         <div class="profile-desc">{{ p.description }}</div>
       </div>