diff --git a/src/controllers/organisms/RoomList.js b/src/controllers/organisms/RoomList.js
index 2602315ac5..b178fce7a6 100644
--- a/src/controllers/organisms/RoomList.js
+++ b/src/controllers/organisms/RoomList.js
@@ -159,6 +159,7 @@ module.exports = {
                 <RoomTile
                     room={room}
                     key={room.roomId}
+                    collapsed={self.props.collapsed}
                     selected={selected}
                     unread={self.state.activityMap[room.roomId] === 1}
                     highlight={self.state.activityMap[room.roomId] === 2}
diff --git a/src/skins/vector/css/hide.css b/src/skins/vector/css/hide.css
index 381f9a18cc..fbc2db207e 100644
--- a/src/skins/vector/css/hide.css
+++ b/src/skins/vector/css/hide.css
@@ -1,7 +1,6 @@
 .mx_RoomDropTarget,
 .mx_RoomList_favourites_label,
 .mx_RoomList_archive_label,
-.mx_LeftPanel_hideButton,
 .mx_RoomHeader_search,
 .mx_RoomSettings_encrypt,
 .mx_CreateRoom_encrypt,
diff --git a/src/skins/vector/css/molecules/RoomTile.css b/src/skins/vector/css/molecules/RoomTile.css
index d43945c377..2a8abf58d3 100644
--- a/src/skins/vector/css/molecules/RoomTile.css
+++ b/src/skins/vector/css/molecules/RoomTile.css
@@ -22,13 +22,13 @@ limitations under the License.
 
 .mx_RoomTile_avatar {
     display: table-cell;
-    padding-right: 12px;
+    padding-right: 10px;
     padding-top: 3px;
     padding-bottom: 3px;
-    padding-left: 16px;
+    padding-left: 10px;
     vertical-align: middle;
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     position: relative;
 }
 
@@ -45,6 +45,31 @@ limitations under the License.
     padding-right: 16px;    
 }
 
+.mx_RoomTile_tooltip {
+    border: 1px solid #a9dbf4;
+    border-radius: 8px;
+    background-color: #fff;
+    position: absolute;
+    z-index: 1000;
+    margin-top: 6px;
+    left: 64px;
+    padding: 6px;
+}
+
+.mx_RoomTile_chevron {
+    position: absolute;
+    left: -9px;
+    top: 8px;
+}
+
+.mx_RoomTile_tooltip {
+    position: absolute;
+}
+
+.collapsed .mx_RoomTile_name {
+    display: none;
+}
+
 /*
 .mx_RoomTile_nameBadge {
     display: table;
diff --git a/src/skins/vector/css/organisms/LeftPanel.css b/src/skins/vector/css/organisms/LeftPanel.css
index a00184dd22..6643c33f77 100644
--- a/src/skins/vector/css/organisms/LeftPanel.css
+++ b/src/skins/vector/css/organisms/LeftPanel.css
@@ -28,8 +28,16 @@ limitations under the License.
 
 .mx_LeftPanel_hideButton {
     position: absolute;
-    top: 10px;
-    right: 10px;
+    top: 18px;
+    right: 8px;
+    cursor: pointer;
+}
+
+.mx_LeftPanel_showButton {
+    position: absolute;
+    top: 18px;
+    left: 16px;
+    cursor: pointer;
 }
 
 .mx_LeftPanel .mx_RoomList {
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css
index 35978e5be3..21cb781227 100644
--- a/src/skins/vector/css/organisms/RoomList.css
+++ b/src/skins/vector/css/organisms/RoomList.css
@@ -27,4 +27,5 @@ limitations under the License.
 .mx_RoomList h2 {
     padding-left: 16px;
     padding-right: 16px;
+    padding-bottom: 10px;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
index 1c02d8cccd..e835b73013 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/pages/MatrixChat.css
@@ -73,6 +73,11 @@ limitations under the License.
     flex: 0 0 230px;
 }
 
+.mx_MatrixChat .mx_LeftPanel.collapsed {
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;    
+}
+
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
diff --git a/src/skins/vector/img/create-big.png b/src/skins/vector/img/create-big.png
index 9c4627b1a1..247b0030cd 100644
Binary files a/src/skins/vector/img/create-big.png and b/src/skins/vector/img/create-big.png differ
diff --git a/src/skins/vector/img/directory-big.png b/src/skins/vector/img/directory-big.png
index fb2bc388be..bbcb16a4b7 100644
Binary files a/src/skins/vector/img/directory-big.png and b/src/skins/vector/img/directory-big.png differ
diff --git a/src/skins/vector/img/hide.png b/src/skins/vector/img/hide.png
index 3e64618b09..31604589af 100644
Binary files a/src/skins/vector/img/hide.png and b/src/skins/vector/img/hide.png differ
diff --git a/src/skins/vector/img/menu.png b/src/skins/vector/img/menu.png
old mode 100644
new mode 100755
index 3550878bf2..b45f88950f
Binary files a/src/skins/vector/img/menu.png and b/src/skins/vector/img/menu.png differ
diff --git a/src/skins/vector/img/settings-big.png b/src/skins/vector/img/settings-big.png
index 663ca16315..3be13bc712 100644
Binary files a/src/skins/vector/img/settings-big.png and b/src/skins/vector/img/settings-big.png differ
diff --git a/src/skins/vector/views/molecules/BottomLeftMenu.js b/src/skins/vector/views/molecules/BottomLeftMenu.js
index 809da0ee28..2af3bfc723 100644
--- a/src/skins/vector/views/molecules/BottomLeftMenu.js
+++ b/src/skins/vector/views/molecules/BottomLeftMenu.js
@@ -41,19 +41,19 @@ module.exports = React.createClass({
                 <div className="mx_BottomLeftMenu_options">
                     <div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/create-big.png" alt="Create new room" title="Create new room" width="42" height="42"/>
+                            <img src="img/create-big.png" alt="Create new room" title="Create new room" width="36" height="36"/>
                         </div>
                         <div className="mx_RoomTile_name">Create new room</div>
                     </div>
                     <div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/directory-big.png" alt="Directory" title="Directory" width="42" height="42"/>
+                            <img src="img/directory-big.png" alt="Directory" title="Directory" width="36" height="36"/>
                         </div>
                         <div className="mx_RoomTile_name">Directory</div>
                     </div>
                     <div className="mx_RoomTile" onClick={this.onSettingsClick}>
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/settings-big.png" alt="Settings" title="Settings" width="42" height="42"/>
+                            <img src="img/settings-big.png" alt="Settings" title="Settings" width="36" height="36"/>
                         </div>
                         <div className="mx_RoomTile_name">Settings</div>
                     </div>
diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js
index fc097d399b..3518d1dd58 100644
--- a/src/skins/vector/views/molecules/RoomHeader.js
+++ b/src/skins/vector/views/molecules/RoomHeader.js
@@ -92,7 +92,7 @@ module.exports = React.createClass({
             var roomAvatar = null;
             if (this.props.room) {
                 roomAvatar = (
-                    <RoomAvatar room={this.props.room} />
+                    <RoomAvatar room={this.props.room} width="48" height="48" />
                 );
             }
 
diff --git a/src/skins/vector/views/molecules/RoomTile.js b/src/skins/vector/views/molecules/RoomTile.js
index 61fa0021b7..f43b00236a 100644
--- a/src/skins/vector/views/molecules/RoomTile.js
+++ b/src/skins/vector/views/molecules/RoomTile.js
@@ -28,6 +28,19 @@ var sdk = require('matrix-react-sdk')
 module.exports = React.createClass({
     displayName: 'RoomTile',
     mixins: [RoomTileController],
+
+    getInitialState: function() {
+        return( { hover : false });
+    },
+
+    onMouseEnter: function() {
+        this.setState( { hover : true });
+    },
+
+    onMouseLeave: function() {
+        this.setState( { hover : false });
+    },
+
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         var classes = classNames({
@@ -57,14 +70,26 @@ module.exports = React.createClass({
             nameCell = <div className="mx_RoomTile_name">{name}</div>;
         }
         */
+
+        var nameElement;
+        if (!this.props.collapsed) {
+            nameElement = <div className="mx_RoomTile_name">{name}</div>;
+        }
+        else if (this.state.hover) {
+            nameElement = <div className="mx_RoomTile_tooltip">
+                            <img className="mx_RoomTile_chevron" src="img/chevron-left.png" width="9" height="16"/>
+                            { name }
+                          </div>;
+        }
+
         var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
         return (
-            <div className={classes} onClick={this.onClick}>
+            <div className={classes} onClick={this.onClick} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
                 <div className="mx_RoomTile_avatar">
                     <RoomAvatar room={this.props.room} />
                     { badge }
                 </div>
-                <div className="mx_RoomTile_name">{name}</div>
+                { nameElement }
             </div>
         );
     }
diff --git a/src/skins/vector/views/organisms/LeftPanel.js b/src/skins/vector/views/organisms/LeftPanel.js
index 15612704a5..fbd5d3c1d1 100644
--- a/src/skins/vector/views/organisms/LeftPanel.js
+++ b/src/skins/vector/views/organisms/LeftPanel.js
@@ -22,16 +22,40 @@ var sdk = require('matrix-react-sdk')
 module.exports = React.createClass({
     displayName: 'LeftPanel',
 
+    getInitialState: function() {
+        return {
+            collapsed: false,
+        };
+    },
+
+    onShowClick: function() {
+        this.setState({ collapsed : false });
+    },
+
+    onHideClick: function() {
+        this.setState({ collapsed : true });
+    },
+
     render: function() {
         var RoomList = sdk.getComponent('organisms.RoomList');
         var BottomLeftMenu = sdk.getComponent('molecules.BottomLeftMenu');
         var IncomingCallBox = sdk.getComponent('molecules.voip.IncomingCallBox');
 
+        var collapseButton;
+        var classes = "mx_LeftPanel";
+        if (this.state.collapsed) {
+            classes += " collapsed";
+            collapseButton = <img className="mx_LeftPanel_showButton" onClick={ this.onShowClick } src="img/menu.png" width="27" height="20" alt=">"/>
+        }
+        else {
+            collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>   
+        }
+
         return (
-            <aside className="mx_LeftPanel">
-                <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
+            <aside className={classes}>
+                { collapseButton }
                 <IncomingCallBox />
-                <RoomList selectedRoom={this.props.selectedRoom} />
+                <RoomList selectedRoom={this.props.selectedRoom} collapsed={this.state.collapsed}/>
                 <BottomLeftMenu />
             </aside>
         );
diff --git a/src/skins/vector/views/organisms/RoomList.js b/src/skins/vector/views/organisms/RoomList.js
index 779fd1c6ae..2bca90a0b9 100644
--- a/src/skins/vector/views/organisms/RoomList.js
+++ b/src/skins/vector/views/organisms/RoomList.js
@@ -34,13 +34,15 @@ module.exports = React.createClass({
             callElement = <CallView className="mx_MatrixChat_callView"/>
         }
 
+        var recentsLabel = this.props.collapsed ? "" : "Recents";
+
         return (
             <div className="mx_RoomList">
                 {callElement}
                 <h2 className="mx_RoomList_favourites_label">Favourites</h2>
                 <RoomDropTarget text="Drop here to favourite"/>
 
-                <h2 className="mx_RoomList_recents_label">Recents</h2>
+                <h2 className="mx_RoomList_recents_label">{ recentsLabel }&nbsp;</h2>
                 <div className="mx_RoomList_recents">
                     {this.makeRoomTiles()}
                 </div>