diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index a58be2f8..f95441d6 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -14,6 +14,7 @@
     const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
 
     const name: string = auth.authState.user!.profile.name!;
+    const username = auth.authState.user!.profile.preferred_username!;
     const email = auth.authState.user!.profile.email;
     const initials: string = name
         .split(" ")
@@ -180,10 +181,15 @@
             <v-card>
                 <v-card-text>
                     <div class="mx-auto text-center">
-                        <v-avatar color="#0e6942">
-                            <span class="text-h5">{{ initials }}</span>
+                        <v-avatar
+                            color="#0e6942"
+                            size="large"
+                            class="user-button"
+                        >
+                            <span>{{ initials }}</span>
                         </v-avatar>
                         <h3>{{ name }}</h3>
+                        <p class="text-caption mt-1">{{ username }}</p>
                         <p class="text-caption mt-1">{{ email }}</p>
                         <v-divider class="my-3"></v-divider>
                         <v-btn