diff --git a/res/css/_components.scss b/res/css/_components.scss
index c43d9edc16..a735c3151f 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -19,6 +19,7 @@
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TagPanel.scss";
 @import "./structures/_TopLeftMenu.scss";
+@import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserSettings.scss";
 @import "./structures/_ViewSource.scss";
diff --git a/res/css/structures/_TopLeftMenuButton.scss b/res/css/structures/_TopLeftMenuButton.scss
index 822edc7889..a80e06c620 100644
--- a/res/css/structures/_TopLeftMenuButton.scss
+++ b/res/css/structures/_TopLeftMenuButton.scss
@@ -20,22 +20,25 @@ limitations under the License.
     color: $topleftmenu-color;
     background-color: $primary-bg-color;
     display: flex;
+    align-items: center;
+    min-width: 0;
+    padding: 0 7px;
+    overflow: hidden;
 }
 
-.mx_TopLeftMenuButton_avatar {
-    position: relative; // to get avatar in the right place
-    margin-left: 15px;
-    margin-right: 15px;
-    margin-top: 14px;
+.mx_TopLeftMenuButton .mx_BaseAvatar {
+    margin: 0 7px;
 }
 
 .mx_TopLeftMenuButton_name {
-    margin-top: 15px;
-    margin-right: 9px;
+    margin: 0 7px;
     font-size: 18px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
     font-weight: 600;
 }
 
 .mx_TopLeftMenuButton_chevron {
-    margin-top: 24px;
+    margin: 0 7px;
 }
diff --git a/src/components/structures/TopLeftMenuButton.js b/src/components/structures/TopLeftMenuButton.js
index 534dc86d54..17f55b120c 100644
--- a/src/components/structures/TopLeftMenuButton.js
+++ b/src/components/structures/TopLeftMenuButton.js
@@ -16,11 +16,16 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../index';
 import * as ContextualMenu from './ContextualMenu';
 import {TopLeftMenu} from './TopLeftMenu';
+import AccessibleButton from '../views/elements/AccessibleButton';
+import BaseAvatar from '../views/avatars/BaseAvatar';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import Avatar from '../../Avatar';
 
-export class TopLeftMenuButton extends React.Component {
+const AVATAR_SIZE = 28;
+
+export default class TopLeftMenuButton extends React.Component {
 
     static propTypes = {
         collapsed: PropTypes.bool.isRequired,
@@ -32,27 +37,56 @@ export class TopLeftMenuButton extends React.Component {
         super();
         this.state = {
             menuDisplayed: false,
+            profileInfo: null,
+        };
+
+        this.onToggleMenu = this.onToggleMenu.bind(this);
+    }
+
+    async _getProfileInfo() {
+        const cli = MatrixClientPeg.get();
+        const userId = cli.getUserId();
+        const profileInfo = await cli.getProfileInfo(userId);
+        const avatarUrl = Avatar.avatarUrlForUser(
+            {avatarUrl: profileInfo.avatar_url},
+            AVATAR_SIZE, AVATAR_SIZE, "crop");
+
+        return {
+            userId,
+            name: profileInfo.displayname,
+            avatarUrl,
         };
     }
 
-    render() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatarHeight = 28;
-        const name = "My stuff";
+    async componentDidMount() {
+        try {
+            const profileInfo = await this._getProfileInfo();
+            this.setState({profileInfo});
+        } catch(ex) {
+            console.log("could not fetch profile");
+            console.error(ex);
+        }
+    }
 
+    render() {
+        const fallbackUserId = MatrixClientPeg.get().getUserId();
+        const profileInfo = this.state.profileInfo;
+        const name = profileInfo ? profileInfo.name : fallbackUserId;
         return (
-            <div className="mx_TopLeftMenuButton">
+            <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
                 <BaseAvatar
-                    className="mx_TopLeftMenuButton_avatar"
+                    idName={fallbackUserId}
                     name={name}
-                    width={avatarHeight}
-                    height={avatarHeight}
+                    url={profileInfo && profileInfo.avatarUrl}
+                    width={AVATAR_SIZE}
+                    height={AVATAR_SIZE}
+                    resizeMethod="crop"
                 />
-                <div className="mx_TopLeftMenuButton_name" onClick={this.onToggleMenu}>
+                <div className="mx_TopLeftMenuButton_name">
                     { name }
                 </div>
                 <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
-            </div>
+            </AccessibleButton>
         );
     }
 
@@ -60,7 +94,7 @@ export class TopLeftMenuButton extends React.Component {
         e.preventDefault();
         e.stopPropagation();
 
-        const elementRect = e.target.parentElement.getBoundingClientRect();
+        const elementRect = e.currentTarget.getBoundingClientRect();
         const x = elementRect.left;
         const y = elementRect.top + elementRect.height;