diff --git a/app.config.ts b/app.config.ts
index a9db24b..3b167f5 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -84,6 +84,11 @@ export default defineAppConfig({
 				},
 			},
 		},
+        avatar: {
+            default: {
+            },
+            rounded: 'rounded-button'
+        },
 		pagination: {
 			rounded: 'first:rounded-l-button last:rounded-r-button',
 			default: {
diff --git a/layers/portal/pages/portal.vue b/layers/portal/pages/portal.vue
index dcb9a7c..6a37496 100644
--- a/layers/portal/pages/portal.vue
+++ b/layers/portal/pages/portal.vue
@@ -6,7 +6,7 @@ definePageMeta({
 	middleware: ['auth'],
 });
 
-const { logout } = useDirectusAuth();
+const { logout, user } = useDirectusAuth();
 
 const NuxtLink = resolveComponent('NuxtLink');
 
@@ -109,13 +109,13 @@ const mobileMenuOpen = ref(false);
 							<!-- Profile dropdown -->
 							<UDropdown class="relative" :items="userNavigation">
 								<button
-									class="inline-flex text-sm bg-white rounded-card focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+
 								>
 									<span class="sr-only">Open user menu</span>
-									<img
-										class="w-12 h-12 mx-auto rounded-card"
-										src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
-										alt=""
+									<UAvatar
+										class="w-12 h-12 mx-auto"
+										:src="user.avatar"
+										:alt="userName(user)"
 									/>
 								</button>
 							</UDropdown>