diff --git a/src/platform/web/ui/css/main.css b/src/platform/web/ui/css/main.css
index 94752e4e94..bb4dc80ebc 100644
--- a/src/platform/web/ui/css/main.css
+++ b/src/platform/web/ui/css/main.css
@@ -33,6 +33,8 @@ body.hydrogen {
     overscroll-behavior: none;
     /* disable rubberband scrolling on document in IE11 */
     overflow: hidden;
+    height: 100%;
+    width: 100%;
 }
 
 .hydrogen {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index 05681cbb8b..519a2e4537 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -251,6 +251,45 @@ a.button-action {
 
 .PreSessionScreen {
     padding: 30px;
+    max-height: calc(100% - 30px); /* removing padding */
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+}
+
+@media screen and (min-width: 600px) {
+    .PreSessionScreen {
+        max-height: calc(100% - 30px - 80px); /* removing padding and margin */
+    }
+}
+
+.PreSessionScreen > * {
+    flex: 1 0 auto;
+}
+
+.PreSessionScreen > div {
+    flex: 1 1 auto;
+}
+
+.PreSessionScreen > div.logo {
+    flex: 1 0 auto;
+}
+
+.SessionPickerView {
+    display: flex;
+    flex-direction: column;
+    overflow: clip;
+}
+
+.SessionPickerView > * {
+    flex: 1 0 auto;
+    display: block;
+    position: relative;
+}
+
+.SessionPickerView ul {
+    flex: 1 1 auto;
+    overflow: auto;
 }
 
 .PreSessionScreen h1 {
diff --git a/src/platform/web/ui/login/LoginView.js b/src/platform/web/ui/login/LoginView.js
index 8800262582..ddb4e39d90 100644
--- a/src/platform/web/ui/login/LoginView.js
+++ b/src/platform/web/ui/login/LoginView.js
@@ -32,33 +32,35 @@ export class LoginView extends TemplateView {
                 disabled
             }),
             t.div({className: "logo"}),
-            t.h1([vm.i18n`Sign In`]),
-            t.mapView(vm => vm.completeSSOLoginViewModel, vm => vm ? new CompleteSSOView(vm) : null),
-            t.if(vm => vm.showHomeserver, (t, vm) => t.div({ className: "LoginView_sso form-row text" },
-                [
-                    t.label({for: "homeserver"}, vm.i18n`Homeserver`),
-                    t.input({
-                        id: "homeserver",
-                        type: "text",
-                        placeholder: vm.i18n`Your matrix homeserver`,
-                        value: vm.homeserver,
-                        disabled,
-                        onInput: event => vm.setHomeserver(event.target.value),
-                        onChange: () => vm.queryHomeserver(),
-                    }),
-                    t.p({className: {
-                        LoginView_forwardInfo: true,
-                        hidden: vm => !vm.resolvedHomeserver
-                    }}, vm => vm.i18n`You will connect to ${vm.resolvedHomeserver}.`),
-                    t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))),
-                ]
-            )),
-            t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])),
-            t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null),
-            t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
-            t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),
-            t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
-            // use t.mapView rather than t.if to create a new view when the view model changes too
+            t.div({className: "SessionLoginView"}, [
+                t.h1([vm.i18n`Sign In`]),
+                t.mapView(vm => vm.completeSSOLoginViewModel, vm => vm ? new CompleteSSOView(vm) : null),
+                t.if(vm => vm.showHomeserver, (t, vm) => t.div({ className: "LoginView_sso form-row text" },
+                    [
+                        t.label({for: "homeserver"}, vm.i18n`Homeserver`),
+                        t.input({
+                            id: "homeserver",
+                            type: "text",
+                            placeholder: vm.i18n`Your matrix homeserver`,
+                            value: vm.homeserver,
+                            disabled,
+                            onInput: event => vm.setHomeserver(event.target.value),
+                            onChange: () => vm.queryHomeserver(),
+                        }),
+                        t.p({className: {
+                            LoginView_forwardInfo: true,
+                            hidden: vm => !vm.resolvedHomeserver
+                        }}, vm => vm.i18n`You will connect to ${vm.resolvedHomeserver}.`),
+                        t.if(vm => vm.errorMessage, (t, vm) => t.p({className: "error"}, vm.i18n(vm.errorMessage))),
+                    ]
+                )),
+                t.if(vm => vm.isFetchingLoginOptions, t => t.div({className: "LoginView_query-spinner"}, [spinner(t), t.p("Fetching available login options...")])),
+                t.mapView(vm => vm.passwordLoginViewModel, vm => vm ? new PasswordLoginView(vm): null),
+                t.if(vm => vm.passwordLoginViewModel && vm.startSSOLoginViewModel, t => t.p({className: "LoginView_separator"}, vm.i18n`or`)),
+                t.mapView(vm => vm.startSSOLoginViewModel, vm => vm ? new StartSSOLoginView(vm) : null),
+                t.mapView(vm => vm.loadViewModel, loadViewModel => loadViewModel ? new SessionLoadStatusView(loadViewModel) : null),
+                // use t.mapView rather than t.if to create a new view when the view model changes too
+            ]), 
             t.p(hydrogenGithubLink(t))
         ]);
     }