diff --git a/src/webui/www/public/css/login.css b/src/webui/www/public/css/login.css
index bbf25e92e..0ab180b1b 100644
--- a/src/webui/www/public/css/login.css
+++ b/src/webui/www/public/css/login.css
@@ -16,12 +16,23 @@ body {
 }
 
 #main {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     padding-top: 5em;
     text-align: center;
 }
 
+.login-input {
+    box-sizing: border-box;
+    font-size: 1rem;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+    width: 100%;
+}
+
 #formplace {
     padding: 10px;
     text-align: left;
@@ -33,7 +44,9 @@ body {
 }
 
 #loginButton {
-    float: right;
+    font-size: 1rem;
+    padding: 0.5rem;
+    width: 100%;
 }
 
 #logo img {
diff --git a/src/webui/www/public/index.html b/src/webui/www/public/index.html
index 18906cd0f..a9e748c1e 100644
--- a/src/webui/www/public/index.html
+++ b/src/webui/www/public/index.html
@@ -32,11 +32,11 @@
             <form id="loginform">
                 <div class="row">
                     <label for="username">QBT_TR(Username)QBT_TR[CONTEXT=Login]</label><br>
-                    <input type="text" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required>
+                    <input type="text" class="login-input" id="username" name="username" autocomplete="username" autocapitalize="none" autofocus required>
                 </div>
                 <div class="row">
                     <label for="password">QBT_TR(Password)QBT_TR[CONTEXT=Login]</label><br>
-                    <input type="password" id="password" name="password" autocomplete="current-password" required>
+                    <input type="password" class="login-input" id="password" name="password" autocomplete="current-password" required>
                 </div>
                 <div class="row">
                     <input type="submit" id="loginButton" value="QBT_TR(Login)QBT_TR[CONTEXT=Login]">