diff --git a/frontend/portal/src/assets/layout/_topbar.scss b/frontend/portal/src/assets/layout/_topbar.scss
index b8e34b3..3edb402 100644
--- a/frontend/portal/src/assets/layout/_topbar.scss
+++ b/frontend/portal/src/assets/layout/_topbar.scss
@@ -69,6 +69,27 @@
             background-color: var(--primary-color);
             color: var(--primary-contrast-color);
         }
+
+        &.layout-topbar-user {
+            width: auto;
+            height: auto;
+            border-radius: var(--content-border-radius);
+            padding: 0.25rem 0.75rem;
+            justify-content: flex-start;
+            gap: 0.5rem;
+
+            span {
+                display: inline;
+                max-width: 12rem;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            .p-avatar {
+                flex: 0 0 auto;
+            }
+        }
     }
 
     .layout-menu-button {
diff --git a/frontend/portal/src/layout/AppTopbar.vue b/frontend/portal/src/layout/AppTopbar.vue
index e230566..594b5f0 100644
--- a/frontend/portal/src/layout/AppTopbar.vue
+++ b/frontend/portal/src/layout/AppTopbar.vue
@@ -94,9 +94,8 @@ onMounted(() => {
             <div class="layout-topbar-menu hidden lg:block">
                 <div class="layout-topbar-menu-content">
                     <template v-if="isLoggedIn">
-                        <button type="button" class="layout-topbar-action flex items-center gap-2"
-                            @click="toggleUserMenu">
-                            <Avatar shape="circle" size="large" class="bg-surface-200 dark:bg-surface-700" />
+                        <button type="button" class="layout-topbar-action layout-topbar-user" @click="toggleUserMenu">
+                            <Avatar shape="circle" class="bg-surface-200 dark:bg-surface-700" />
                             <span>{{ displayName }}</span>
                             <i class="pi pi-angle-down"></i>
                         </button>