diff --git a/server/template/files/login.html b/server/template/files/login.html
index 2057af6b4..5390c6916 100644
--- a/server/template/files/login.html
+++ b/server/template/files/login.html
@@ -8,13 +8,29 @@
   <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"/>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
   <link href="/static/favicon.ico" rel="icon" type="image/x-icon"/>
+  <link rel="stylesheet" href="/static/app.css" />
+  <title>login | drone</title>
 </head>
 <body>
-  <form action="/authorize" method="post">
-    <input type="text" placeholder="Username" name="username" />
-    <input type="password" placeholder="Password" name="password" />
-    <input type="submit" value="Login" />
-  </form>
+  <div class="mdl-grid">
+    <div class="mdl-layout-spacer"></div>
+    <div class="mdl-card">
+      <form action="/authorize" method="post">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="text" id="username" name="username" />
+          <label class="mdl-textfield__label" for="username">Username</label>
+        </div>
+        <div class="mdl-textfield mdl-js-textfield">
+          <input class="mdl-textfield__input" type="password" id="userpass" name="password" />
+          <label class="mdl-textfield__label" for="userpass">Password</label>
+        </div>
+        <div class="mdl-dialog__actions">
+          <input type="submit" class="mdl-button mdl-button--colored mdl-js-button" value="Login" />
+        </div>
+      </form>
+    </div>
+    <div class="mdl-layout-spacer"></div>
+  </div>
   <script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
 </body>
 </html>
