diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css
index b714148d16..6eff75fc29 100644
--- a/demo-shell-ng2/app/app.component.css
+++ b/demo-shell-ng2/app/app.component.css
@@ -9,5 +9,9 @@
 }
 
 .user-profile {
-    margin-right: 3px;
+    margin-right: 50px;
+}
+
+.mdl-button-padding {
+    padding-left: 20px;
 }
diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index 7d5c7b1a16..bbea07d6f6 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -2,7 +2,14 @@
 <div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
     <div *ngIf="!isLoginPage()">
         <header class="mdl-layout__header">
-            <div class="mdl-layout__header-row">
+            <div class="mdl-button-padding mdl-layout__header-row">
+
+                <div *ngIf="isLoggedIn()">
+                    <ng2-alfresco-userinfo class="user-profile" [menuOpenType]="left">
+                    </ng2-alfresco-userinfo>
+                </div>
+
+
                 <!-- Title -->
                 <span class="mdl-layout-title">Demo Application</span>
                 <!-- Add spacer, to align navigation to the right -->
@@ -23,10 +30,6 @@
                     <a class="mdl-navigation__link" data-automation-id="settings" href="" routerLink="/settings">Settings</a>
                 </nav>
 
-                <div class="user-profile" *ngIf="isLoggedIn()">
-                    <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
-                </div>
-
                 <!-- Right aligned menu below button -->
                 <button id="demo-menu-lower-right" data-automation-id="right-action-menu"
                         class="mdl-button mdl-js-button mdl-button--icon">