diff --git a/src/oauth2views/login.ejs b/src/oauth2views/login.ejs
index 24dadfede..457ea0438 100644
--- a/src/oauth2views/login.ejs
+++ b/src/oauth2views/login.ejs
@@ -1,9 +1,9 @@
 <% include header %>
 
-<div class="container main-container">
+<div class="container">
     <div class="row">
-        <div class="col-md-4 col-md-offset-4">
-            <div class="card" style="max-width: none; padding: 20px; text-align: left;">
+        <div class="col-md-6 col-md-offset-3">
+            <div class="card">
                 <div class="row">
                     <div class="col-md-12">
                         <h1><img width="64" height="64" src="<%= applicationLogo %>"/> Login to <%= applicationName %> on <%= cloudronName %></h1>
diff --git a/webadmin/src/theme.scss b/webadmin/src/theme.scss
index c026978bf..e895ede63 100644
--- a/webadmin/src/theme.scss
+++ b/webadmin/src/theme.scss
@@ -675,17 +675,19 @@ footer a {
     padding: 0;
     background: #F7F7F7;
 
-    .main-container {
-        height: 100%;
-        width: 100%;
-        display: table;
+    h1 {
+        margin-top: 0;
     }
 
-    .main-container>.row {
-        display: table-cell;
-        text-align: center;
-        vertical-align: middle;
-        width: 100%;
+    .card {
+        max-width: none;
+        padding: 20px;
+        text-align: left;
+        margin-top: 15px;
+
+        @media(min-width:768px) {
+            margin-top: 20%;
+        }
     }
 }