diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index ead4b4c60..d3e686375 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -1,4 +1,5 @@
 /*
+Copyright 2017 Vector Creations Ltd
 Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -84,6 +85,7 @@ var RoomSubList = React.createClass({
         onShowMoreRooms: React.PropTypes.func,
         searchFilter: React.PropTypes.string,
         emptyContent: React.PropTypes.node, // content shown if the list is empty
+        headerItems: React.PropTypes.node, // content shown in the sublist header
     },
 
     getInitialState: function() {
@@ -553,7 +555,20 @@ var RoomSubList = React.createClass({
 
             return connectDropTarget(
                 <div>
-                    { this._getHeaderJsx() }
+                    <RoomSubListHeader
+                        ref='header'
+                        label={ this.props.label }
+                        tagName={ this.props.tagName }
+                        roomCount={ roomCount }
+                        collapsed={ this.props.collapsed }
+                        hidden={ this.state.hidden }
+                        incomingCall={ this.props.incomingCall }
+                        isIncomingCallRoom={ isIncomingCallRoom }
+                        roomNotificationCount={ this.roomNotificationCount() }
+                        onClick={ this.onClick }
+                        onHeaderClick={ this.props.onHeaderClick }
+                        headerItems={this.props.headerItems}
+                    />
                     { subList }
                 </div>
             );
@@ -562,7 +577,21 @@ var RoomSubList = React.createClass({
             var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <div className="mx_RoomSubList">
-                    { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
+                    { this.props.alwaysShowHeader ?
+                        <RoomSubListHeader
+                            ref='header'
+                            label={ this.props.label }
+                            tagName={ this.props.tagName }
+                            roomCount={ roomCount }
+                            collapsed={ this.props.collapsed }
+                            hidden={ this.state.hidden }
+                            isIncomingCallRoom={ isIncomingCallRoom }
+                            roomNotificationCount={ this.roomNotificationCount() }
+                            onClick={ this.onClick }
+                            onHeaderClick={ this.props.onHeaderClick }
+                            headerItems={this.props.headerItems}
+                        />
+                     : undefined }
                     { (this.props.showSpinner && !this.state.hidden) ? <Loader /> : undefined }
                 </div>
             );
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 225fd3571..b1964dca0 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -27,6 +27,7 @@
 @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
 @import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
+@import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/login/_InteractiveAuthEntryComponents.scss";
 @import "./matrix-react-sdk/views/login/_ServerConfig.scss";
 @import "./matrix-react-sdk/views/messages/_MEmoteBody.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
new file mode 100644
index 000000000..04503346f
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RoleButton.scss
@@ -0,0 +1,26 @@
+/*
+Copyright 2107 Vector Creations 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_RoleButton {
+    margin-left: 4px;
+    margin-right: 4px;
+    cursor: pointer;
+    display: inline-block;
+}
+
+.mx_RoleButton object {
+    pointer-events: none;
+}
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
index bc699ae79..77df1f8fd 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
@@ -39,10 +39,6 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_RoomList_greyedSubListLabel {
-    color: #a2a2a2;
-}
-
 .mx_RoomList_emptySubListTip {
     font-size: 13px;
     margin-left: 18px;
@@ -50,12 +46,13 @@ limitations under the License.
     margin-top: 8px;
     margin-bottom: 7px;
     padding: 5px;
-    border: 1px solid $accent-color;
+    border: 1px dashed $accent-color;
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
 }
 
-.mx_RoomList_butonPreview {
-    float: right;
+.mx_RoomList_headerButtons {
+    position: absolute;
+    right: 60px;
 }