diff --git a/res/css/structures/_TopLeftMenu.scss b/res/css/structures/_TopLeftMenu.scss
new file mode 100644
index 0000000000..960e052a30
--- /dev/null
+++ b/res/css/structures/_TopLeftMenu.scss
@@ -0,0 +1,39 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TopLeftMenu {
+    min-width: 180px;
+
+    .mx_TopLeftMenu_section:not(:last-child) {
+        border-bottom: 1px solid $menu-border-color;
+    }
+
+    .mx_TopLeftMenu_section {
+        list-style: none;
+        margin: 5px 0;
+        padding: 0;
+
+        li {
+            white-space: nowrap;
+            padding: 5px 20px;
+        }
+
+        li:hover {
+            background-color: $menu-selected-color;
+        }
+    }
+
+}
diff --git a/src/components/structures/TopLeftMenu.js b/src/components/structures/TopLeftMenu.js
index 5dfa8ed171..34a90c97ae 100644
--- a/src/components/structures/TopLeftMenu.js
+++ b/src/components/structures/TopLeftMenu.js
@@ -15,37 +15,32 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import sdk from '../../index';
-
-class TopLeftMenu extends React.Component {
-
-    static propTypes = {
-        collapsed: PropTypes.bool.isRequired,
-    };
-
-    static displayName = 'TopLeftMenu';
+import dis from '../../dispatcher';
+import { _t } from '../../languageHandler';
 
+export class TopLeftMenu extends React.Component {
     render() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatarHeight = 28;
-        const name = "My stuff";
+        return <div className="mx_TopLeftMenu">
+            <ul className="mx_TopLeftMenu_section">
+                <li onClick={this.openSettings}>{_t("Settings")}</li>
+            </ul>
+            <ul className="mx_TopLeftMenu_section">
+                <li onClick={this.signOut}>{_t("Sign out")}</li>
+            </ul>
+        </div>;
+    }
 
-        return (
-            <div className="mx_TopLeftMenu">
-                <BaseAvatar
-                    className="mx_TopLeftMenu_avatar"
-                    name={name}
-                    width={avatarHeight}
-                    height={avatarHeight}
-                />
-                <div className="mx_TopLeftMenu_name">
-                    { name }
-                </div>
-                <img className="mx_TopLeftMenu_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
-            </div>
-        );
+    openSettings() {
+        dis.dispatch({action: 'view_user_settings'});
+        this.closeMenu();
+    }
+
+    signOut() {
+        dis.dispatch({action: 'logout'});
+        this.closeMenu();
+    }
+
+    closeMenu() {
+        if (this.props.onFinished) this.props.onFinished();
     }
 }
-
-module.exports = TopLeftMenu;