diff --git a/app/components/Header.vue b/app/components/Header.vue
index 7440050..8abfb5f 100644
--- a/app/components/Header.vue
+++ b/app/components/Header.vue
@@ -74,7 +74,7 @@ const navLinks = [
                       <BIIcon name="it-user" color="black"/>
                       <span v-if="hasUnreadNotifications" class="notification-dot"></span>
                     </span>
-                    <span class="d-none d-lg-block">{{ user?.first_name }}</span>
+                    <span class="d-none d-lg-block username">{{ user?.first_name }}</span>
                   </NuxtLink>
 
                   <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
@@ -310,4 +310,11 @@ const navLinks = [
   background: #d9364f;
   border: 2px solid #ffffff;
 }
+
+.username {
+  max-width: 8ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>