diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 3051e8b99..bb64d2f35 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -7,7 +7,7 @@ import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
 import UserPanel from 'components/UserPanel.vue';
 import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
-import VnImg from 'src/components/ui/VnImg.vue';
+import VnAvatar from './ui/VnAvatar.vue';
 
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -72,22 +72,13 @@ const pinnedModulesRef = ref();
                     </QTooltip>
                     <PinnedModules ref="pinnedModulesRef" />
                 </QBtn>
-                <QBtn
-                    :class="{ 'q-pa-none': quasar.platform.is.mobile }"
-                    rounded
-                    dense
-                    flat
-                    no-wrap
-                    id="user"
-                >
-                    <QAvatar size="lg">
-                        <VnImg
-                            :id="user.id"
-                            collection="user"
-                            size="160x160"
-                            :zoom-size="null"
-                        />
-                    </QAvatar>
+                <QBtn class="q-pa-none" rounded dense flat no-wrap id="user">
+                    <VnAvatar
+                        :worker-id="user.id"
+                        :title="user.name"
+                        size="lg"
+                        :color="false"
+                    />
                     <QTooltip bottom>
                         {{ t('globals.userPanel') }}
                     </QTooltip>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 589524258..a0ba6bb8e 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -11,8 +11,8 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
-import VnImg from 'src/components/ui/VnImg.vue';
 import { useRole } from 'src/composables/useRole';
+import VnAvatar from './ui/VnAvatar.vue';
 
 const state = useState();
 const session = useSession();
@@ -153,10 +153,12 @@ const isEmployee = computed(() => useRole().isEmployee());
             <QSeparator vertical inset class="q-mx-lg" />
 
             <div class="col column items-center q-mb-sm">
-                <QAvatar size="80px">
-                    <VnImg :id="user.id" collection="user" size="160x160" />
-                </QAvatar>
-
+                <VnAvatar
+                    :worker-id="user.id"
+                    :title="user.name"
+                    size="80px"
+                    :color="false"
+                />
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
diff --git a/src/components/ui/VnAvatar.vue b/src/components/ui/VnAvatar.vue
index 287f741e0..1cc6ef795 100644
--- a/src/components/ui/VnAvatar.vue
+++ b/src/components/ui/VnAvatar.vue
@@ -9,6 +9,7 @@ const $props = defineProps({
     description: { type: String, default: null },
     size: { type: String, default: null },
     title: { type: String, default: null },
+    color: { type: Boolean, default: true },
 });
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
@@ -21,7 +22,7 @@ const showLetter = ref(false);
     <div class="avatar-picture column items-center">
         <QAvatar
             :style="{
-                backgroundColor: useColor(title),
+                backgroundColor: color ? useColor(title) : 'transparent',
             }"
             :size="$props.size"
             :title="title"