diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 247b12dc88..989644304b 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -179,13 +179,9 @@ const LeftPanel = React.createClass({
         const RoomList = sdk.getComponent('rooms.RoomList');
         const TagPanel = sdk.getComponent('structures.TagPanel');
         const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
+        const SearchBox = sdk.getComponent('structures.SearchBox');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        const topBox = <TopLeftMenuButton collapsed={ this.props.collapsed } />;
-/*
-        const SearchBox = sdk.getComponent('structures.SearchBox');
-        const topBox = <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />;
-*/
         const tagPanelEnabled = !SettingsStore.getValue("TagPanel.disableTagPanel");
         const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
 
@@ -202,7 +198,8 @@ const LeftPanel = React.createClass({
             <div className={containerClasses}>
                 { tagPanel }
                 <aside className={"mx_LeftPanel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
-                    { topBox }
+                    <TopLeftMenuButton collapsed={ this.props.collapsed }/>
+                    <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index 3ea819e088..f99c4bf90b 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -52,7 +52,7 @@ const RoomSubList = React.createClass({
         collapsed: PropTypes.bool.isRequired, // is LeftPanel collapsed?
         onHeaderClick: PropTypes.func,
         incomingCall: PropTypes.object,
-        searchFilter: PropTypes.string,
+        isFiltered: PropTypes.bool,
         headerItems: PropTypes.node, // content shown in the sublist header
         extraTiles: PropTypes.arrayOf(PropTypes.node), // extra elements added beneath tiles
     },
@@ -60,7 +60,6 @@ const RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            sortedList: [],
         };
     },
 
@@ -74,9 +73,6 @@ const RoomSubList = React.createClass({
     },
 
     componentWillMount: function() {
-        this.setState({
-            sortedList: this.applySearchFilter(this.props.list, this.props.searchFilter),
-        });
         this.dispatcherRef = dis.register(this.onAction);
     },
 
@@ -84,23 +80,6 @@ const RoomSubList = React.createClass({
         dis.unregister(this.dispatcherRef);
     },
 
-    componentWillReceiveProps: function(newProps) {
-        // order the room list appropriately before we re-render
-        //if (debug) console.log("received new props, list = " + newProps.list);
-        this.setState({
-            sortedList: this.applySearchFilter(newProps.list, newProps.searchFilter),
-        });
-    },
-
-    applySearchFilter: function(list, filter) {
-        if (filter === "") return list;
-        const lcFilter = filter.toLowerCase();
-        // case insensitive if room name includes filter,
-        // or if starts with `#` and one of room's aliases starts with filter
-        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
-            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
-    },
-
     // The header is collapsable if it is hidden or not stuck
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
@@ -196,7 +175,7 @@ const RoomSubList = React.createClass({
 
     makeRoomTiles: function() {
         const RoomTile = sdk.getComponent("rooms.RoomTile");
-        return this.state.sortedList.map((room, index) => {
+        return this.props.list.map((room, index) => {
             return <RoomTile
                 room={room}
                 roomSubList={this}
@@ -218,7 +197,7 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // find first room which has notifications and switch to it
-        for (const room of this.state.sortedList) {
+        for (const room of this.props.list) {
             const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
             const highlight = room.getUnreadNotificationCount('highlight') > 0;
             const notificationCount = room.getUnreadNotificationCount();
@@ -241,10 +220,10 @@ const RoomSubList = React.createClass({
         e.preventDefault();
         e.stopPropagation();
         // switch to first room in sortedList as that'll be the top of the list for the user
-        if (this.state.sortedList && this.state.sortedList.length > 0) {
+        if (this.props.list && this.props.list.length > 0) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: this.state.sortedList[0].roomId,
+                room_id: this.props.list[0].roomId,
             });
         } else if (this.props.extraTiles && this.props.extraTiles.length > 0) {
             // Group Invites are different in that they are all extra tiles and not rooms
@@ -312,7 +291,7 @@ const RoomSubList = React.createClass({
             );
         }
 
-        const len = this.state.sortedList.length + this.props.extraTiles.length;
+        const len = this.props.list.length + this.props.extraTiles.length;
         let chevron;
         if (len) {
             const chevronClasses = classNames({
@@ -323,7 +302,7 @@ const RoomSubList = React.createClass({
             chevron = (<div className={chevronClasses}></div>);
         }
 
-        const tabindex = this.props.searchFilter === "" ? "0" : "-1";
+        const tabindex = this.props.isFiltered ? "0" : "-1";
         return (
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
                 <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
@@ -338,7 +317,7 @@ const RoomSubList = React.createClass({
     },
 
     render: function() {
-        const len = this.state.sortedList.length + this.props.extraTiles.length;
+        const len = this.props.list.length + this.props.extraTiles.length;
         if (len) {
             const subListClasses = classNames({
                 "mx_RoomSubList": true,
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index c2baccc676..126ff5b3b9 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -33,8 +33,9 @@ const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import GroupStore from '../../../stores/GroupStore';
-
+import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
+
 import {Resizer, FixedDistributor, FlexSizer} from '../../../resizer'
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -440,39 +441,50 @@ module.exports = React.createClass({
         return ret;
     },
 
+    _applySearchFilter: function(list, filter) {
+        if (filter === "") return list;
+        const lcFilter = filter.toLowerCase();
+        // case insensitive if room name includes filter,
+        // or if starts with `#` and one of room's aliases starts with filter
+        return list.filter((room) => (room.name && room.name.toLowerCase().includes(lcFilter)) ||
+            (filter[0] === '#' && room.getAliases().some((alias) => alias.toLowerCase().startsWith(lcFilter))));
+    },
+
+    _mapSubListProps: function(subListsProps) {
+        const defaultProps = {
+            collapsed: this.props.collapsed,
+            isFiltered: !!this.props.searchFilter,
+            incomingCall: this.state.incomingCall,
+        };
+
+        subListsProps.forEach((p) => {
+            p.list = this._applySearchFilter(p.list, this.props.searchFilter);
+        });
+
+        subListsProps = subListsProps.filter((props => {
+            const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
+            return len !== 0 || (props.onAddRoom && !this.props.searchFilter);
+        }));
+
+        return subListsProps.reduce((components, props, i) => {
+            props = Object.assign({}, defaultProps, props);
+            const isLast = i === subListsProps.length - 1;
+            const {key, label, ... otherProps} = props;
+            const chosenKey = key || label;
+
+            let subList = <RoomSubList key={chosenKey} label={label} {...otherProps} />;
+            if (!isLast) {
+                return components.concat(
+                    subList,
+                    <ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
+                );
+            } else {
+                return components.concat(subList);
+            }
+        }, []);
+    },
+
     render: function() {
-        const RoomSubList = sdk.getComponent('structures.RoomSubList');
-
-        const mapProps = (subListsProps) => {
-            const defaultProps = {
-                collapsed: this.props.collapsed,
-                searchFilter: this.props.searchFilter,
-                incomingCall: this.state.incomingCall,
-            };
-
-            subListsProps = subListsProps.filter((props => {
-                const len = props.list.length + (props.extraTiles ? props.extraTiles.length : 0);
-                return len !== 0 || props.onAddRoom;
-            }));
-
-            return subListsProps.reduce((components, props, i) => {
-                props = Object.assign({}, defaultProps, props);
-                const isLast = i === subListsProps.length - 1;
-                const {key, label, ... otherProps} = props;
-                const chosenKey = key || label;
-
-                let subList = <RoomSubList key={chosenKey} label={label} {...otherProps} />;
-                if (!isLast) {
-                    return components.concat(
-                        subList,
-                        <ResizeHandle key={chosenKey+"-resizer"} vertical={true} />
-                    );
-                } else {
-                    return components.concat(subList);
-                }
-            }, []);
-        }
-
         let subLists = [
             {
                 list: [],
@@ -545,7 +557,7 @@ module.exports = React.createClass({
             },
         ]);
 
-        const subListComponents = mapProps(subLists);
+        const subListComponents = this._mapSubListProps(subLists);
 
         return (
             <div ref={(d) => this.resizeContainer = d} className="mx_RoomList">