diff --git a/www/MainView.js b/www/MainView.js
index 1dd315bd..ffccebf6 100644
--- a/www/MainView.js
+++ b/www/MainView.js
@@ -125,7 +125,7 @@ Ext.define('PBS.MainView', {
 	},
 
 	control: {
-	    'button[reference=logoutButton]': {
+	    '[reference=logoutButton]': {
 		click: 'logout'
 	    }
 	},
@@ -134,7 +134,7 @@ Ext.define('PBS.MainView', {
 	    var me = this;
 
 	    PBS.data.RunningTasksStore.startUpdate();
-	    me.lookupReference('usernameinfo').update({username:Proxmox.UserName});
+	    me.lookupReference('usernameinfo').setText(Proxmox.UserName);
 
 	    // show login on requestexception
 	    // fixme: what about other errors
@@ -209,12 +209,6 @@ Ext.define('PBS.MainView', {
 		    flex: 1,
 		    baseCls: 'x-plain',
 		},
-		{
-		    baseCls: 'x-plain',
-		    reference: 'usernameinfo',
-		    padding: '0 5',
-		    tpl: Ext.String.format(gettext("You are logged in as {0}"), "'{username}'")
-		},
 		{
 		    xtype: 'button',
 		    baseCls: 'x-btn',
@@ -229,11 +223,23 @@ Ext.define('PBS.MainView', {
 		    margin: '0 5 0 0',
 		},
 		{
-		    reference: 'logoutButton',
 		    xtype: 'button',
-		    iconCls: 'fa fa-sign-out',
-		    text: gettext('Logout')
-		}
+		    reference: 'usernameinfo',
+		    style: {
+			// proxmox dark grey p light grey as border
+			backgroundColor: '#464d4d',
+			borderColor: '#ABBABA'
+		    },
+		    margin: '0 5 0 0',
+		    iconCls: 'fa fa-user',
+		    menu: [
+			{
+			    reference: 'logoutButton',
+			    iconCls: 'fa fa-sign-out',
+			    text: gettext('Logout'),
+			},
+		    ],
+		},
 	    ]
 	},
 	{