diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -1872,7 +1872,7 @@ a.metatag[tag="license"]:hover {
     padding: 20px;
 }
 
-#login div.form div.fields div.field div.label {
+#login div.form div.form-horizontal div.form-group > label {
     width: 173px;
     float: left;
     text-align: right;
@@ -1880,7 +1880,7 @@ a.metatag[tag="license"]:hover {
     padding: 5px 0 0 5px;
 }
 
-#login div.form div.fields div.field div.input input {
+#login div.form div.form-horizontal div.form-group div input {
     background: #FFF;
     border-top: 1px solid #b3b3b3;
     border-left: 1px solid #b3b3b3;
@@ -1892,20 +1892,16 @@ a.metatag[tag="license"]:hover {
     padding: 7px 7px 6px;
 }
 
-#login div.form div.fields div.buttons {
-    clear: both;
-    overflow: hidden;
-    border-top: 1px solid #DDD;
-    text-align: right;
-    margin: 0;
-    padding: 10px 0 0;
+#login div.form .buttons {
+    float: right;
 }
 
 #login div.form div.links {
     clear: both;
     overflow: hidden;
     margin: 10px 0 0;
-    padding: 0 0 2px;
+    border-top: 1px solid #DDD;
+    padding: 10px 0 0;
 }
 
 .user-menu {
@@ -3756,8 +3752,8 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields,
-#login div.form,
-#login div.form div.fields,
+#login div.form-horizontal,
+#login div.form-horizontal div.form-group,
 #register div.form,
 #register div.form div.fields {
     clear: both;
@@ -3767,7 +3763,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.label span,
-#login div.form div.fields div.field div.label span,
+#login div.form div.form-horizontal div.form-group div.label span,
 #register div.form div.fields div.field div.label span {
     height: 1%;
     display: block;
@@ -3777,7 +3773,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.input input.error,
-#login div.form div.fields div.field div.input input.error,
+#login div.form div.form-horizontal div.form-group div.input input.error,
 #register div.form div.fields div.field div.input input.error {
     background: #FBE3E4;
     border-top: 1px solid #e1b2b3;
@@ -3787,7 +3783,7 @@ div#legend_data, div#legend_container, d
 }
 
 #content div.box div.form div.fields div.field div.input input.success,
-#login div.form div.fields div.field div.input input.success,
+#login div.form div.form-horizontal div.form-group div.input input.success,
 #register div.form div.fields div.field div.input input.success {
     background: #E6EFC2;
     border-top: 1px solid #cebb98;
@@ -3889,7 +3885,7 @@ div.box-right div.form div.fields div.bu
 }
 
 #content div.box div.action div.button,
-#login div.form div.fields div.field div.input div.link,
+#login div.form div.form-horizontal div.form-group div.input div.link,
 #register div.form div.fields div.field div.input div.link {
     text-align: right;
     margin: 6px 0 0;
@@ -3958,7 +3954,7 @@ div.box-right div.form div.fields div.bu
     padding: 0;
 }
 
-#login div.form div.fields div.field,
+#login div.form div.form-horizontal div.form-group,
 #register div.form div.fields div.field {
     clear: both;
     overflow: hidden;
@@ -3966,7 +3962,7 @@ div.box-right div.form div.fields div.bu
     padding: 0 0 10px;
 }
 
-#login div.form div.fields div.field span.error-message,
+#login div.form div.form-horizontal div.form-group span.error-message,
 #register div.form div.fields div.field span.error-message {
     height: 1%;
     display: block;
@@ -3976,36 +3972,36 @@ div.box-right div.form div.fields div.bu
     max-width: 320px;
 }
 
-#login div.form div.fields div.field div.label label,
+#login div.form div.form-horizontal div.form-group label,
 #register div.form div.fields div.field div.label label {
     color: #000;
     font-weight: 700;
 }
 
-#login div.form div.fields div.field div.input,
+#login div.form div.form-horizontal div.form-group div,
 #register div.form div.fields div.field div.input {
     float: left;
     margin: 0;
     padding: 0;
 }
 
-#login div.form div.fields div.field div.input input.large {
+#login div.form div.form-horizontal div.form-group div input.large {
     width: 250px;
 }
 
-#login div.form div.fields div.field div.checkbox,
+#login div.form div.form-horizontal div.form-group div.checkbox,
 #register div.form div.fields div.field div.checkbox {
     margin: 0 0 0 184px;
     padding: 0;
 }
 
-#login div.form div.fields div.field div.checkbox label,
+#login div.form div.form-horizontal div.form-group div.checkbox label,
 #register div.form div.fields div.field div.checkbox label {
     color: #565656;
     font-weight: 700;
 }
 
-#login div.form div.fields div.buttons input,
+#login div.form div.buttons input,
 #register div.form div.fields div.buttons input {
     color: #000;
     font-size: 1em;
diff --git a/kallithea/templates/login.html b/kallithea/templates/login.html
--- a/kallithea/templates/login.html
+++ b/kallithea/templates/login.html
@@ -5,50 +5,47 @@
     ${_('Log In')}
 </%block>
 
-<div id="login">
+<div id="login" class="panel panel-default">
     <%include file="/base/flash_msg.html"/>
     <!-- login -->
-    <div class="title withlogo">
+    <div class="panel-heading title withlogo">
         %if c.site_name:
             <h5>${_('Log In to %s') % c.site_name}</h5>
         %else:
             <h5>${_('Log In')}</h5>
         %endif
     </div>
-    <div class="inner">
+    <div class="panel-body inner">
         ${h.form(h.url.current(came_from=c.came_from))}
         <div class="form">
             <i class="icon-lock"></i>
             <!-- fields -->
 
-            <div class="fields">
-                <div class="field">
-                    <div class="label">
-                        <label for="username">${_('Username')}:</label>
-                    </div>
-                    <div class="input">
-                        ${h.text('username',class_='focus large')}
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label class="control-label col-sm-5" for="username">${_('Username')}:</label>
+                    <div class="input col-sm-7">
+                        ${h.text('username',class_='form-control focus large')}
                     </div>
 
                 </div>
-                <div class="field">
-                    <div class="label">
-                        <label for="password">${_('Password')}:</label>
-                    </div>
-                    <div class="input">
-                        ${h.password('password',class_='focus large')}
+                <div class="form-group">
+                    <label class="control-label col-sm-5" for="password">${_('Password')}:</label>
+                    <div class="input col-sm-7">
+                        ${h.password('password',class_='form-control focus large')}
                     </div>
 
                 </div>
-                <div class="field">
-                    <div class="checkbox">
-                        <input type="checkbox" id="remember" name="remember" />
-                        <label for="remember">${_('Remember me')}</label>
+                <div class="form-group">
+                    <div class="col-sm-offset-5 col-sm-7">
+                        <div class="checkbox">
+                            <label for="remember">
+                                <input type="checkbox" id="remember" name="remember"/>
+                                ${_('Remember me')}
+                            </label>
+                        </div>
                     </div>
                 </div>
-                <div class="buttons">
-                    ${h.submit('sign_in',_('Sign In'),class_="btn")}
-                </div>
             </div>
             <!-- end fields -->
             <!-- links -->
@@ -58,6 +55,9 @@
                   /
                  ${h.link_to(_("Don't have an account ?"),h.url('register'))}
                 %endif
+                <span class="buttons">
+                    ${h.submit('sign_in',_('Sign In'),class_="btn btn-default")}
+                </span>
             </div>
 
             <!-- end links -->