diff --git a/src/skins/vector/css/pages/MatrixChat.css b/src/skins/vector/css/pages/MatrixChat.css
index e835b730..58f280fd 100644
--- a/src/skins/vector/css/pages/MatrixChat.css
+++ b/src/skins/vector/css/pages/MatrixChat.css
@@ -75,7 +75,7 @@ limitations under the License.
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
     -webkit-flex: 0 0 60px;
-    flex: 0 0 60px;    
+    flex: 0 0 60px;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
@@ -116,3 +116,8 @@ limitations under the License.
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
 }
+
+.mx_MatrixChat .mx_RightPanel.collapsed {
+    -webkit-flex: 0 0 72px;
+    flex: 0 0 72px;
+}
diff --git a/src/skins/vector/views/organisms/RightPanel.js b/src/skins/vector/views/organisms/RightPanel.js
index 83b1491d..58f74241 100644
--- a/src/skins/vector/views/organisms/RightPanel.js
+++ b/src/skins/vector/views/organisms/RightPanel.js
@@ -64,8 +64,13 @@ module.exports = React.createClass({
             }
         }
 
+        var classes = "mx_RightPanel";
+        if (this.state.phase === this.Phase.None) {
+            classes += " collapsed";
+        }
+
         return (
-            <aside className="mx_RightPanel">
+            <aside className={classes}>
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>