diff --git a/html/pages/logon.inc.php b/html/pages/logon.inc.php
index 6226d925b7..fe525f4349 100644
--- a/html/pages/logon.inc.php
+++ b/html/pages/logon.inc.php
@@ -1,45 +1,56 @@
-<div style="width: 470px; margin: auto; margin-top: 30px;">
-    <div style="margin: auto; width:650px; padding:5px;">
-      <table border="0" cellpadding="0" cellspacing="0">
-        <tr>
-          <td><img alt="Login required" /></td>		<!-- FIXME: add logo -->
-          <td>
-            <form action="" method="post" name="logonform">
-              <h3>Please log in:</h3>
-              <div style="height: 0px;"></div>
-              <table border="0" align="left">
-                <tr>
-                  <td>Username</td>
-                  <td><input type="text" name="username" /></td>
-                </tr>
-                <tr>
-                  <td>Password</td>
-                  <td><input type="password" name="password" /></td>
-                </tr>
-                <tr>
-                  <td colspan="2" align="right"><input type="checkbox" name="remember" />
-                  <font size="2">Remember Me</font></td>
-                </tr>
-                <tr>
-                  <td colspan="2" align="right"><input class="submit" name="submit" type="submit" value="Login" /></td>
-                </tr>
+      <form class="form-horizontal" role="form" action="" method="post" name="logonform">
+        <div class="form-group">
+          <div class="col-sm-offset-2 col-sm-10">
+            <h3>Please log in:</h3>
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="username" class="col-sm-2 control-label">Username</label>
+          <div class="col-sm-6">
+            <input type="text" name="username" id="username" class="form-control" placeholder="Username" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="password" class="col-sm-2 control-label">Password</label>
+          <div class="col-sm-6">
+            <input type="password" name="password" id="password" class="form-control" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="remember" class="col-sm-2 control-label">Remember Me</label>
+          <div class="col-sm-6">
+            <input type="checkbox" name="remember" id="remember" />
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-2 col-sm-6">
+            <button type="submit" class="btn btn-default input-sm" name="submit" type="submit">Login</button>
+          </div>
+        </div>
 <?php
 if (isset($auth_message))
 {
-  echo('<tr><td colspan="2" style="font-weight: bold; color: #cc0000;">' . $auth_message . '</td></tr>');
+  echo('
+        <div class="form-group">
+          <div class="col-sm-offset-2 col-sm-6">
+            <div class="alert alert-danger text-center">' . $auth_message . '</div>
+          </div>
+        </div>
+');
 }
 ?>
-            </table>
-            </form>
-          </td>
-        </tr>
-      </table>
 <?php
 if (isset($config['login_message']))
 {
-  echo('<div style="margin-top: 10px;text-align: center; font-weight: bold; color: #cc0000; width: 470px;">'.$config['login_message'].'</div>');
+  echo('
+        <div class="form-group">
+          <div class="col-sm-offset-2 col-sm-6">
+            <div class="alert alert-info text-center">'.$config['login_message'].'</div>
+          </div>
+        </div>');
 }
 ?>
+      </form>
 <script type="text/javascript">
 <!--
 document.logonform.username.focus();