diff --git a/docs-web/src/main/webapp/src/img/background.jpg b/docs-web/src/main/webapp/src/img/background.jpg
new file mode 100644
index 00000000..000202f9
Binary files /dev/null and b/docs-web/src/main/webapp/src/img/background.jpg differ
diff --git a/docs-web/src/main/webapp/src/partial/docs/login.html b/docs-web/src/main/webapp/src/partial/docs/login.html
index 887bd9a7..4aabda53 100644
--- a/docs-web/src/main/webapp/src/partial/docs/login.html
+++ b/docs-web/src/main/webapp/src/partial/docs/login.html
@@ -1,5 +1,11 @@
-<div class="row">
-  <div class="col-sm-offset-5 col-sm-3">
+<style>
+  /* No navbar in login screen */
+  .navbar {
+    display: none;
+  }
+</style>
+<div class="row vertical-center login-box-container">
+  <div class="col-sm-offset-5 col-sm-2 login-box">
     <form>
       <div class="form-group">
         <label class="sr-only" for="inputUsername">Username</label>
diff --git a/docs-web/src/main/webapp/src/style/main.less b/docs-web/src/main/webapp/src/style/main.less
index e07a3b06..43741919 100644
--- a/docs-web/src/main/webapp/src/style/main.less
+++ b/docs-web/src/main/webapp/src/style/main.less
@@ -208,4 +208,34 @@ input[readonly].share-link {
       white-space: nowrap;
     }
   }
+}
+
+// Vertical alignment
+.vertical-center {
+  min-height: 100vh;
+
+  /* Make it a flex container */
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  /* Align the bootstrap's container vertically */
+  -webkit-box-align : center;
+  -webkit-align-items : center;
+  -moz-box-align : center;
+  -ms-flex-align : center;
+  align-items : center;
+}
+
+// Login
+.login-box-container {
+  background: url('../img/background.jpg') no-repeat center;
+}
+
+.login-box {
+  background: rgba(255, 255, 255, 0.5);
+  padding: 20px;
+  border-radius: 4px
 }
\ No newline at end of file