Topbar avatar: https://trello.com/c/UiqISnfI/5-top-bar-avatar

src/Squidex/app/shell/pages/internal/apps-menu.component.scss

@@ -1,23 +1,27 @@
 @import '_vars';
 @import '_mixins';
 
+$color-apps-border: #65a6ff;
+
 .nav {
     .nav-item {
         .nav-link {
             & {
+                @include box-shadow-colored(0, 2px, 4px, rgba(26, 93, 184, .26));
                 @include transition(opacity .4 ease);
                 @include opacity(.95);
                 @include no-selection;
                 @include border-radius;
-                color: $color-dark-foreground;
                 cursor: pointer;
-                border: 0;
+                color: $color-dark-foreground;
-                background: $color-theme-blue-dark;
+                border: 1px solid $color-theme-blue-lighter;
-                padding-top: .25rem;
+                background: $color-theme-blue;
+                padding-top: .1rem;
                 padding-left: 1rem;
                 padding-right: 2rem;
-                padding-bottom: .25rem;
+                padding-bottom: .1rem;
-                margin-top: -.2rem;
+                min-width: 150px;
+                margin-top: -.1rem;
             }
 
             &:hover {
@@ -25,8 +29,7 @@
             }
 
             &::after {
-                @include absolute(50%, 1rem, auto, auto);
+                @include absolute(45%, 1rem, auto, auto);
-                color: $color-theme-blue-light;
             }
         }
     }
@@ -36,6 +39,10 @@
     padding: 1rem 1.5rem;
 }
 
+.dropdown-menu {
+    top: 2.65rem;
+}
+
 .icon-plus {
     font-size: .8rem;
 }

src/Squidex/app/shell/pages/internal/profile-menu.component.html

@@ -3,6 +3,8 @@
         <span class="nav-link dropdown-toggle" (click)="modalMenu.toggle()">
             <span class="user">
                 <img class="user-picture" [attr.src]="profileId | sqxUserIdPicture" />
+                
+                <span>{{profileDisplayName}}</span>
             </span>
         </span>
 

src/Squidex/app/shell/pages/internal/profile-menu.component.scss

@@ -1,12 +1,22 @@
 @import '_vars';
 @import '_mixins';
 
-.nav-link {
+.nav {
-    padding: 0;
+    .nav-item {
+        & {
+            line-height: 2rem;
+        }
+
+        .nav-link {
+            color: $color-dark-foreground;
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
 }
 
-.nav-item {
+.user-picture {
-    line-height: 2rem;
+    margin-right: .5rem;
 }
 
 .dropdown {

src/Squidex/app/theme/_vars.scss

@@ -21,6 +21,7 @@ $color-extern-github-icon:      #4a4a4a;
 
 $color-theme-blue:          #398cfb;
 $color-theme-blue-dark:     #3082f2;
+$color-theme-blue-lighter:  #65a6ff;
 $color-theme-blue-light:    #9ebeea;
 $color-theme-blue-lightest: #d9e8fc;
 $color-theme-secondary:     #dce5e8;