diff --git a/src/app/app.component.css b/src/app/app.component.css
index 309dd81fb63257db56d9c55034b2ee154819c0c1..c85157c56e7c42ff4bbcdbfeac236434ad7a7e4e 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -26,4 +26,7 @@
     color: #f0f0f0;
     font-size: smaller;
 }
-  
\ No newline at end of file
+
+.profile-button {
+    padding: 30px 0px 0px 0px;
+}
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bfcb63d04afc519dc196f867853fedc1f3c239e7..352fa0ffde321e3783351e8d687e8f829f425845 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -15,10 +15,10 @@
                     <span class="banner">STRUDEL</span>
                     <span fxFlex></span>
                     <span class="fill-horizontal-space"></span>
-                    <button  mat-icon-button [matMenuTriggerFor]="actionmenu">
-                        <mat-icon>person</mat-icon>
+                    <button mat-button [matMenuTriggerFor]="actionmenu" disableRipple="true" class="profile-button">
+                        {{ displayUsername() }}
+                        <mat-icon>expand_more</mat-icon>
                     </button>
-
                     <mat-menu #actionmenu="matMenu">
                         <div *ngFor="let az of (authService.loggedInAuthZ | async)">
                             <button mat-menu-item routerLink="/logout"><mat-icon>logout</mat-icon>Log out of {{ az.name }}</button>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e6cb9453d44bc861047d20a73175c784cc830aa8..268a2d69bf08b211d58a8867f373d65a92514c49 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -107,6 +107,14 @@ export class AppComponent {
     return count;
   }
 
+  displayUsername() {
+    let ids = this.computeSitesService.appidentities.value;
+
+    if (Array.isArray(ids) && ids.length) {
+      return ids[0].username;
+    } 
+  }
+
 
   // login() {
   //   console.log("login");