diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index ad387297..a5d5f1fb 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -1180,7 +1180,7 @@ button.RoomDetailsView_row::after {
     gap: 12px;
 }
 
-.CreateRoomView_body, .JoinRoomView, .RoomBeingCreated_error {
+.CreateRoomView_body, .JoinRoomView_body, .RoomBeingCreated_error {
     max-width: 400px;
 }
 
diff --git a/src/platform/web/ui/session/JoinRoomView.ts b/src/platform/web/ui/session/JoinRoomView.ts
index 90194317..c26cc34e 100644
--- a/src/platform/web/ui/session/JoinRoomView.ts
+++ b/src/platform/web/ui/session/JoinRoomView.ts
@@ -27,8 +27,8 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
             placeholder: vm.i18n`Enter a room id or alias`,
             disabled: vm => vm.joinInProgress,
         });
-        return t.main({className: "middle"}, 
-            t.div({className: "JoinRoomView centered-column"}, [
+        return t.main({className: "JoinRoomView middle"},
+            t.div({className: "JoinRoomView_body centered-column"}, [
                 t.h2("Join room"),
                 t.form({className: "JoinRoomView_detailsForm form", onSubmit: evt => this.onSubmit(evt,  input.value)}, [
                     t.div({className: "vertical-layout"}, [
@@ -60,4 +60,3 @@ export class JoinRoomView extends TemplateView<JoinRoomViewModel> {
         this.value.join(id);
     }
 }
-