diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index 9670afad..1eba5270 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/src/platform/web/ui/css/layout.css
@@ -54,6 +54,13 @@ main {
     min-width: 0;
 }
 
+.SideBarActive{
+    grid-template:
+        "status status status" auto
+        "left   middle right" 1fr /
+        300px   1fr 300px;
+}
+
 /* resize and reposition session view to account for mobile Safari which shifts
 the layout viewport up without resizing it when the keyboard shows */
 .hydrogen.ios .SessionView {
diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css
index aa22839e..82b849c8 100644
--- a/src/platform/web/ui/css/main.css
+++ b/src/platform/web/ui/css/main.css
@@ -18,6 +18,7 @@ limitations under the License.
 @import url('layout.css');
 @import url('login.css');
 @import url('left-panel.css');
+@import url('right-panel.css');
 @import url('room.css');
 @import url('timeline.css');
 @import url('avatar.css');
diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css
new file mode 100644
index 00000000..4334ffb1
--- /dev/null
+++ b/src/platform/web/ui/css/right-panel.css
@@ -0,0 +1,3 @@
+.RoomInfo{
+    grid-area: right;
+}
diff --git a/src/platform/web/ui/session/SessionView.js b/src/platform/web/ui/session/SessionView.js
index 1208e0b3..2c2a3cd1 100644
--- a/src/platform/web/ui/session/SessionView.js
+++ b/src/platform/web/ui/session/SessionView.js
@@ -32,7 +32,8 @@ export class SessionView extends TemplateView {
         return t.div({
             className: {
                 "SessionView": true,
-                "middle-shown": vm => !!vm.activeMiddleViewModel
+                "middle-shown": vm => !!vm.activeMiddleViewModel,
+                "SideBarActive": vm => !!vm.roomInfoViewModel
             },
         }, [
             t.view(new SessionStatusView(vm.sessionStatusViewModel)),