diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 8196740499..cc3263bef3 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -15,24 +15,19 @@ limitations under the License.
 */
 
 .mx_RoomPreviewBar {
+    flex: 0 0 auto;
+    margin: 15px;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid $panel-divider-color;
     text-align: center;
-    height: 176px;
-    background-color: $event-selected-color;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     display: flex;
-    background-color: $preview-bar-bg-color;
     -webkit-align-items: center;
 }
 
-.mx_RoomPreviewBar_wrapper {
-}
-
-.mx_RoomPreviewBar_invite_text {
-    color: $primary-fg-color;
-}
-
 .mx_RoomPreviewBar_join_text {
     color: $warning-color;
 }
@@ -59,4 +54,4 @@ limitations under the License.
 
 .mx_RoomPreviewBar_spinnerIntro {
     margin-top: 50px;
-}
\ No newline at end of file
+}
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index dbe409d6d7..95cecf32d9 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.js
@@ -235,7 +235,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className="mx_RoomPreviewBar">
+            <div className="mx_RoomPreviewBar dark-panel">
                 <div className="mx_RoomPreviewBar_wrapper">
                     { joinBlock }
                     { previewBlock }