diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 924410f5..9e7442cd 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -178,9 +178,15 @@ module.exports = React.createClass({
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
                     { homeButton }
-                    <StartChatButton ref={this._collectPeopleButton} tooltip={true} />
-                    <RoomDirectoryButton ref={this._collectDirectoryButton} tooltip={true} />
-                    <CreateRoomButton ref={this._collectCreateRoomButton} tooltip={true} />
+                    <div ref={this._collectPeopleButton}>
+                        <StartChatButton tooltip={true} />
+                    </div>
+                    <div ref={this._collectDirectoryButton}>
+                        <RoomDirectoryButton tooltip={true} />
+                    </div>
+                    <div ref={this._collectCreateRoomButton}>
+                        <CreateRoomButton tooltip={true} />
+                    </div>
                     <span className="mx_BottomLeftMenu_settings">
                         <SettingsButton tooltip={true} />
                     </span>
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index f171591c..dbe745f7 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -70,6 +70,10 @@ limitations under the License.
     padding-bottom: 3px ! important;
 }
 
+.mx_BottomLeftMenu_options > div {
+    display: inline-block;
+}
+
 .mx_BottomLeftMenu_options .mx_RoleButton {
     margin-left: 0px;
     margin-right: 10px;