diff --git a/demo-shell-ng2/app/app.component.css b/demo-shell-ng2/app/app.component.css
index 700caa1af0..cdfe6eb2e7 100644
--- a/demo-shell-ng2/app/app.component.css
+++ b/demo-shell-ng2/app/app.component.css
@@ -7,3 +7,6 @@
 .mdl-layout-title{
     font-size: 17px;
 }
+.user-profile{
+    margin-right: 3px;
+}
\ No newline at end of file
diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index d8131ce30b..463e250c35 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -21,7 +21,7 @@
                 <a class="mdl-navigation__link" data-automation-id="login" href="" routerLink="/login">Login</a>
             </nav>
 
-            <div *ngIf="isLoggedIn()">
+            <div class="user-profile" *ngIf="isLoggedIn()">
                 <ng2-alfresco-userinfo></ng2-alfresco-userinfo>
             </div>
 
diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
index 9f59213ab7..bcd1bc0bca 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.css
@@ -4,11 +4,19 @@
   width: 40px;
   margin-right: 0%;
   cursor: pointer;
-  border: 2px solid #999999;
+  border: 1px solid #999999;
 }
 
 .button-profile {
   display: inline-block;
-  margin-right: -10px;
   border: 0px;
 }
+
+.detail-user-profile-list-mdl{
+    margin-right: 100px;
+}
+
+.user-profile-list-mdl{
+    max-height: 250px;
+    width: 400px;
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
index bf39e21403..5437e89627 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.html
@@ -1,16 +1,60 @@
-<span *ngIf="ecmUser">{{ecmUser.firstName}} {{ecmUser.lastName}}</span>
-<span *ngIf="bpmUser">{{bpmUser.fullname}}</span>
-<button id="demo-menu-lower-right"
-        class="mdl-button mdl-js-button mdl-button--icon">
-            <img id="logged-user-img"
-                 src="{{ getUserAvatar() }}"
-                 class="profile-image"/>
-</button>
+<div id="img_container">
+    <span *ngIf="ecmUser">{{ecmUser.firstName || ecmUser.lastName}}</span>
+    <span *ngIf="bpmUser">{{bpmUser.firstName || bpmUser.lastName || bpmUser.fullName}}</span>
+    <div class="button-profile" id="user-profile" data-automation-id="user-profile">
+                <img id="logged-user-img"
+                     [src]="getUserAvatar()"
+                     class="profile-image"/>
+    </div>
+    <div class="user-profile-list-mdl
+                mdl-menu mdl-menu--bottom-right
+                mdl-js-menu mdl-js-ripple-effect"
+         for="user-profile">
+            <ul class='detail-user-profile-list-mdl mdl-list'>
+                <div *ngIf="ecmUser">
+                    <li class="mdl-list__item">
+                        <span class="mdl-list__item-primary-content"> ECM </span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">First Name : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{ecmUser.firstName}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Last Name : </span>
+                        <span  class="mdl-list__item-secondary-content">{{ecmUser.lastName}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Email : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{ecmUser.email}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Job Title : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{ecmUser.jobTitle}}</span>
+                    </li>
+                </div>
+                    <div *ngIf="bpmUser">
+                    <li class="mdl-list__item">
+                        <span class="mdl-list__item-primary-content"> BPM </span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">First Name : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{bpmUser.firstName}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Last Name : </span>
+                        <span  class="mdl-list__item-secondary-content">{{bpmUser.lastName}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Email : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{bpmUser.email}}</span>
+                    </li>
+                    <li class="mdl-list__item mdl-list__item-two-line">
+                        <span class="mdl-list__item-secondary-content">Tenant Name : </span>
+                        <span  class="mdl-list__item-secondary-content"> {{bpmUser.tenantName}}</span>
+                    </li>
+                </div>
+            </ul>
+    </div>
+</div>
+
 
-<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-    for="demo-menu-lower-right">
-    <li class="mdl-menu__item">Some Action</li>
-    <li class="mdl-menu__item">Another Action</li>
-    <li disabled class="mdl-menu__item">Disabled Action</li>
-    <li class="mdl-menu__item">Yet Another Action</li>
-</ul>
diff --git a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
index 20becdb6b3..4ed268af9b 100644
--- a/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
+++ b/ng2-components/ng2-alfresco-userinfo/src/userinfo.component.ts
@@ -36,10 +36,11 @@ export class UserInfoComponent implements OnInit {
 
     private  ecmUser: EcmUserModel;
     private  bpmUser: BpmUserModel;
+    private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
+    private  anonymouseImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
     public   bpmUserImage: any;
     public   ecmUserImage: any;
 
-    private baseComponentPath = __moduleName.replace('userinfo.component.js', '');
 
     constructor(private ecmUserService: ECMUserService,
                 private bpmUserService: BPMUserService,
@@ -52,7 +53,7 @@ export class UserInfoComponent implements OnInit {
                 .subscribe(
                     (res) => {
                     this.ecmUser = <EcmUserModel> res;
-                    this.getUserProfileImage();
+                    this.getEcmUserProfileImage();
                 }
             );
         }
@@ -61,30 +62,22 @@ export class UserInfoComponent implements OnInit {
                 .subscribe(
                     (res) => {
                     this.bpmUser = <BpmUserModel> res;
-                    this.getUserProfileImage();
+                    this.getBpmUserProfileImage();
                 }
             );
         }
     }
 
-    private getUserProfileImage() {
-        if (this.ecmUser) {
-            this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
-        }
-        if (this.bpmUser) {
-            this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
-        }
+    private getBpmUserProfileImage() {
+        this.bpmUserImage = this.bpmUserService.getCurrentUserProfileImage();
+    }
+
+    private getEcmUserProfileImage() {
+        this.ecmUserImage = this.ecmUserService.getCurrentUserProfileImageUrl(this.ecmUser.avatarId);
     }
 
     public getUserAvatar() {
-        if (this.ecmUserImage) {
-            return this.ecmUserImage;
-        }
-        if (this.bpmUserImage) {
-            return this.bpmUserImage;
-        }
-        if (!this.ecmUserImage && !this.bpmUserImage) {
-            return this.baseComponentPath + '/img/anonymous.gif';
-        }
+        return this.ecmUserImage || this.bpmUserImage ||  this.anonymouseImageUrl;
     }
+
 }