diff --git a/docs-web/src/main/webapp/src/img/title.png b/docs-web/src/main/webapp/src/img/title.png
new file mode 100644
index 00000000..5c6a8bdb
Binary files /dev/null and b/docs-web/src/main/webapp/src/img/title.png 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 76d70633..f1998b1f 100644
--- a/docs-web/src/main/webapp/src/partial/docs/login.html
+++ b/docs-web/src/main/webapp/src/partial/docs/login.html
@@ -8,51 +8,78 @@
   .footer {
     position: absolute;
     bottom: 0;
+    left: 0;
+    right: 0;
     border: none;
-    color: #fff;
+  }
+
+  @media screen and (min-width: 768px) {
+    .footer {
+      width: 50%;
+    }
+  }
+
+  /* Smaller links everywhere on login */
+  a {
+    font-size: 90%;
+    color: #666;
   }
 </style>
-<div class="row vertical-center login-box-container">
-  <div class="col-sm-offset-5 col-sm-2 col-xs-offset-1 col-xs-10 login-box">
-    <form>
-      <div class="form-group">
-        <label class="sr-only" for="inputUsername">{{ 'login.username' | translate }}</label>
-        <input class="form-control" type="text" id="inputUsername" ng-attr-placeholder="{{ 'login.username' | translate }}" ng-model="user.username" />
+<div class="row vertical-center">
+  <div class="col-sm-6 col-xs-12 login-box">
+    <div class="row">
+      <div class="col-sm-offset-4 col-sm-4 col-xs-offset-1 col-xs-10">
+        <img src="img/title.png" class="img-responsive" />
+
+        <form>
+          <div class="form-group">
+            <label class="sr-only" for="inputUsername">{{ 'login.username' | translate }}</label>
+            <input class="form-control" type="text" id="inputUsername" ng-attr-placeholder="{{ 'login.username' | translate }}" ng-model="user.username" />
+          </div>
+
+          <div class="form-group">
+            <label class="sr-only" for="inputPassword">{{ 'login.password' | translate }}</label>
+            <input class="form-control" type="password" id="inputPassword" ng-attr-placeholder="{{ 'login.password' | translate }}" ng-model="user.password" />
+          </div>
+
+          <span class="help-block" ng-if="codeRequired">
+            {{ 'login.validation_code_required' | translate }}
+            <span class="glyphicon glyphicon-question-sign" title="{{ 'login.validation_code_title' | translate }}"></span>
+          </span>
+          <div class="form-group" ng-if="codeRequired">
+            <label class="sr-only" for="inputCode">{{ 'login.validation_code' | translate }}</label>
+            <input class="form-control" type="text" id="inputCode" ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
+          </div>
+
+          <div class="checkbox text-muted">
+            <label>
+              <input type="checkbox" ng-model="user.remember" /> {{ 'login.remember_me' | translate }}
+            </label>
+          </div>
+
+          <div class="row">
+            <div class="col-md-6">
+              <button type="submit" class="btn btn-primary" ng-click="login()">
+                <span class="glyphicon glyphicon-ok"></span> {{ 'login.submit' | translate }}
+              </button>
+            </div>
+
+            <div class="col-md-6 text-right btn-password-lost">
+              <div class="well-sm">
+                <a href ng-click="openPasswordLost()">{{ 'login.password_lost_btn' | translate }}</a>
+              </div>
+            </div>
+          </div>
+
+          <p class="text-center" ng-if="app.guest_login">&nbsp;</p>
+
+          <button type="submit" class="btn btn-default btn-block" ng-if="app.guest_login" ng-click="loginAsGuest()">
+            <span class="glyphicon glyphicon-user"></span> {{ 'login.login_as_guest' | translate }}
+          </button>
+        </form>
       </div>
-
-      <div class="form-group">
-        <label class="sr-only" for="inputPassword">{{ 'login.password' | translate }}</label>
-        <input class="form-control" type="password" id="inputPassword" ng-attr-placeholder="{{ 'login.password' | translate }}" ng-model="user.password" />
-      </div>
-
-      <span class="help-block" ng-if="codeRequired">
-        {{ 'login.validation_code_required' | translate }}
-        <span class="glyphicon glyphicon-question-sign" title="{{ 'login.validation_code_title' | translate }}"></span>
-      </span>
-      <div class="form-group" ng-if="codeRequired">
-        <label class="sr-only" for="inputCode">{{ 'login.validation_code' | translate }}</label>
-        <input class="form-control" type="text" id="inputCode" ng-attr-placeholder="{{ 'login.validation_code' | translate }}" ng-model="user.code" />
-      </div>
-
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" ng-model="user.remember" /> {{ 'login.remember_me' | translate }}
-        </label>
-      </div>
-
-      <button type="submit" class="btn btn-primary btn-block" ng-click="login()">
-        <span class="glyphicon glyphicon-ok"></span> {{ 'login.submit' | translate }}
-      </button>
-
-      <div class="text-center well-sm btn-password-lost">
-        <a href ng-click="openPasswordLost()">{{ 'login.password_lost_btn' | translate }}</a>
-      </div>
-
-      <p class="text-center" ng-if="app.guest_login">&nbsp;</p>
-
-      <button type="submit" class="btn btn-default btn-block" ng-if="app.guest_login" ng-click="loginAsGuest()">
-        <span class="glyphicon glyphicon-user"></span> {{ 'login.login_as_guest' | translate }}
-      </button>
-    </form>
+    </div>
   </div>
+
+  <div class="login-img-container col-sm-6 hidden-xs"></div>
 </div>
\ No newline at end of file
diff --git a/docs-web/src/main/webapp/src/style/main.less b/docs-web/src/main/webapp/src/style/main.less
index 71fdcfdf..f86e92a1 100644
--- a/docs-web/src/main/webapp/src/style/main.less
+++ b/docs-web/src/main/webapp/src/style/main.less
@@ -413,22 +413,30 @@ input[readonly].share-link {
 }
 
 // Login
-.login-box-container {
+.login-img-container {
   background: url('../../api/theme/image/background') no-repeat center;
   background-size: cover;
+  height: 100%;
+  box-shadow: 0 0 0 1px rgba(136,152,170,.1), 0 15px 35px 0 rgba(49,49,93,.1), 0 5px 15px 0 rgba(0,0,0,.13);
 }
 
 .login-box {
-  background: rgba(255, 255, 255, 0.5);
-  padding: 20px;
-
-  .help-block, .checkbox {
-    color: white;
-  }
-
   .btn-password-lost {
     padding-bottom: 0;
   }
+
+  form .row .col-md-6 {
+    padding: 0;
+  }
+
+  .btn-primary {
+    background-color: #2aabd2;
+    border-color: transparent;
+  }
+
+  .img-responsive {
+    margin-bottom: 30px;
+  }
 }
 
 /* Styling for the ngProgress itself */