diff --git a/src/templates/proxyauth-login.ejs b/src/templates/proxyauth-login.ejs
index 44a46c6be..85beed29f 100644
--- a/src/templates/proxyauth-login.ejs
+++ b/src/templates/proxyauth-login.ejs
@@ -1,105 +1,245 @@
+<!DOCTYPE html>
 <html>
 <head>
-    <title> <%= title %> Login </title>
+  <meta charset="utf-8" />
+  <title> Login to <%= title %> </title>
 
-    <style>
+  <style>
 
-        html {
-            margin: 0;
-        }
+      html, body {
+          height: 100%;
+          width: 100%;
+          padding: 0;
+          font-family: Roboto,Helvetica,Arial,sans-serif;
+          font-size: 14px;
+          line-height: 1.42857;
+          color: #333;
+          background-color: #e5e5e5;
+          margin: 0;
+      }
 
-        body {
-            margin: 0;
-            font-family: Helvetica, sans-serif;
-            display: flex;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-        }
+      .layout-root {
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          max-height: 100%;
+          width: 100%;
+      }
 
-        .error {
-            color: red;
-        }
+      *, ::after, ::before {
+          box-sizing: border-box;
+      }
 
-        .center {
-            text-align: center;
-        }
+      .layout-content {
+          flex-grow: 1;
+          overflow: auto;
+      }
 
-        .right {
-            text-align: right;
-        }
+      .has-error {
+          color: red;
+      }
 
-        .container {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
+      .center {
+          text-align: center;
+      }
 
-        .button {
-            border: 0;
-            padding: 7px 20px;
-            color: white;
-            background-color: #21ba45;
-            cursor: pointer;
-            transition: all 100ms;
-            border-radius: 3px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-        }
+      .right {
+          text-align: right;
+      }
 
-        .button:hover {
-            background-color: #16ab39;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-        }
+      .row {
+          margin-right: -15px;
+          margin-left: -15px;
+      }
+
+      .col-md-12 {
+          width: 100%;
+          float: left;
+          position: relative;
+          min-height: 1px;
+          padding-right: 15px;
+          padding-left: 15px;
+      }
+
+      .form-group {
+          margin-bottom: 15px;
+      }
+
+      label {
+          display: inline-block;
+          max-width: 100%;
+          margin-bottom: 5px;
+          font-weight: 700;
+      }
+
+      .form-control {
+          display: block;
+          margin: 0;
+          font-size: 14px;
+          line-height: 1.42857;
+          color: #555;
+          width: 100%;
+          height: 34px;
+          padding: 6px 12px;
+          background-color: #fff;
+          background-image: none;
+          border: 1px solid #ccc;
+          border-radius: 2px;
+          box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+          transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+      }
+
+      .form-control:focus {
+          border-color: #66afe9;
+          outline: 0;
+          box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+      }
+
+      h1 {
+          font-size: 36px;
+          font-weight: 500;
+          line-height: 1.1;
+          margin-top: 20px;
+          margin-bottom: 10px;
+      }
+
+      small {
+          font-size: 65%;
+          font-weight: 400;
+          line-height: 1;
+          color: #777;
+      }
+
+      .card {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          background-color: white;
+          padding: 20px;
+          margin-top: 100px;
+          max-width: 620px;
+          position: relative;
+          background-color: #fff;
+          margin: 0 auto;
+          box-shadow: 0 2px 5px rgba(0,0,0,.1);
+      }
+
+      .btn.pull-right {
+          margin-left: 5px;
+      }
+
+      .pull-right {
+          float: right !important;
+      }
+
+      .btn-primary {
+          color: #fff;
+          background-color: #2196f3;
+          border-color: #2196f3;
+      }
+
+      .btn {
+          display: inline-block;
+          margin-bottom: 0;
+          font-weight: 400;
+          text-align: center;
+          white-space: nowrap;
+          vertical-align: middle;
+          touch-action: manipulation;
+          cursor: pointer;
+          background-image: none;
+          border: 1px solid transparent;
+          padding: 6px 12px;
+          font-size: 14px;
+          line-height: 1.42857;
+          border-radius: 2px;
+          user-select: none;
+      }
+
+      .btn-primary:hover {
+          color: #fff;
+          background-color: #0c7cd5;
+          border-color: #0b76cc;
+      }
+
+      .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
+          color: #fff;
+          background-color: #0a68b4;
+          border-color: #08528d;
+      }
+
+  </style>
 
-    </style>
 </head>
 
 <body>
 
-<div class="container">
-    <h1 class="center"><%= title %> Login</h1>
+<div class="layout-root">
 
-    <table>
-        <tr>
-            <td>Username:</td>
-            <td><input type="text" id="username" autofocus=""/></td>
-        </tr>
-        <tr>
-            <td>Password:</td>
-            <td><input type="password" id="password"/></td>
-        </tr>
-        <tr>
-            <td></td>
-            <td class="right"><input type="submit" value="Login" id="login" class="button"/></td>
-        </tr>
-    </table>
+  <div class="layout-content">
+    <div class="card" style="padding: 20px; margin-top: 100px; max-width: 620px;">
+      <div class="row">
+        <div class="col-md-12" style="text-align: center;">
+          <img width="128" height="128" style="margin-top: -84px" src="<%= icon %>"/>
+          <br/>
+          <h1><small>Login to</small> <%= title %></h1>
+        </div>
+      </div>
+      <br/>
+      <div class="row">
+        <div class="col-md-12">
+          <h4 class="has-error" id="message"></h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <form name="loginForm" onsubmit="return onLogin(event)">
+            <div class="form-group">
+              <label class="control-label" for="inputUsername">Username</label>
+              <input type="text" class="form-control" id="inputUsername" name="username" autofocus required>
+            </div>
+            <div class="form-group">
+              <label class="control-label" for="inputPassword">Password</label>
+              <input type="password" class="form-control" name="password" id="inputPassword" required>
+            </div>
+            <!-- <div class="form-group">
+              <label class="control-label" for="inputPassword">2FA Token (if enabled)</label>
+              <input type="text" class="form-control" name="totpToken" id="inputTotpToken" ng-model="totpToken" ng-disabled="busy" value="">
+            </div> -->
+            <button class="btn btn-primary btn-outline pull-right" type="submit" id="login" >Sign in</button>
+          </form>
+          <!-- <a ng-href="" class="hand" ng-click="showPasswordReset()">Reset password</a> -->
+        </div>
+      </div>
+    </div>
+  </div>
 
-    <p id="message"></p>
-</div>
+  <script>
 
-<script>
-    function login() {
-        var username = document.getElementById('username').value;
-        var password = document.getElementById('password').value;
+      function onLogin(event) {
+          event.preventDefault();
 
-        fetch('/login', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username: username, password: password })
-        }).then(function (response) {
-            if (response.status === 401 || response.status === 403) {
-                document.getElementById('message').innerText = 'Invalid username or password';
-                return;
-            }
+          var username = document.getElementById('inputUsername').value;
+          var password = document.getElementById('inputPassword').value;
 
-            var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
-            window.location.href = search.redirect || '/';
-        });
-    }
-    document.getElementById('username').addEventListener('keyup', function (e) { if (e.key === 'Enter') login(); });
-    document.getElementById('password').addEventListener('keyup', function (e) { if (e.key === 'Enter') login(); });
-    document.getElementById('login').addEventListener('click', function (e) { login(); });
-</script>
+          fetch('/login', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ username: username, password: password })
+          }).then(function (response) {
+              if (response.status === 401 || response.status === 403) {
+                  document.getElementById('message').innerText = 'Invalid username or password';
+                  return;
+              }
+
+              var search = decodeURIComponent(window.location.search).slice(1).split('&').map(function (item) { return item.split('='); }).reduce(function (o, k) { o[k[0]] = k[1]; return o; }, {});
+              window.location.href = search.redirect || '/';
+          });
+
+         return false;
+      }
+
+  </script>
 
 </body>
 </html>
