diff --git a/src/postorius/templates/postorius/login.html b/src/postorius/templates/postorius/login.html
index 3428601..d9c4999 100644
--- a/src/postorius/templates/postorius/login.html
+++ b/src/postorius/templates/postorius/login.html
@@ -2,44 +2,56 @@
 {% load i18n %}
 {% load staticfiles %}
 {% load browserid %}
+{% load bootstrap_tags %}
 
 {% block subtitle %}
-{% trans "Login" as page_title %}{{ page_title }}
+{% trans 'Login' %}
 {% endblock %}
 
 {% block main %}
+    {% browserid_info %}
+    <div class="panel panel-default">
+        <div class="panel-heading"><h1 class="panel-title">{% trans 'Login with username and password or with Mozilla Persona' %}</h1></div>
+        <div class="panel-body">
+            <div class="row">
+                <div class="col-md-offset-3 col-md-3">
+                    <form action="" method="post" class="well">
+                        {% csrf_token %}
+                        {% if form.non_field_errors %}
+                            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
+                        {% endif %}
+                        {% for field in form %}
+                            {% if field.errors %}
+                                <div class="alert alert-danger">{{ field.errors }}</div>
+                            {% endif %}
+                            <div class="form-group">
+                                <label for="{{ field.label.id_for_label }}">{{ field.label }}:</label>
+                                {{ field|add_form_control }}
+                            </div>
+                        {% endfor %}
+                      <button class="btn btn-primary" type="submit">{% trans 'Log in' %}</button>
+                    </form>
+                </div>
+                <div class="col-md-3 persona-login">
+                    <a rel="nofollow" class="browserid-login persona-button" id="browserid" href="#">
+                        <img src="{% static 'postorius/img/sign_in_blue.png' %}" alt="{% trans 'Login using BrowserID' %}" />
+                    </a>
+                    <p>
+                        {% blocktrans %}
+                            Mozilla Persona is an easy way to sign into multiple websites, while still controlling your personal data.
+                            For more information see the <a href="http://www.mozilla.org/en-US/persona">Mozilla website</a>.
+                        {% endblocktrans %}
+                    </p>
+                    <noscript>
+                        <p class="text-error">
+                            {% trans 'Mozilla Persona requires the use of JavaScript.' %}
+                        </p>
+                    </noscript>
+                </div>
+            </div>
+        </div>
+    </div>
 
-{% browserid_info %}
-<div id="container">
-    <p><strong>{% trans "Login with username and password or with Mozilla Persona" %}</strong></p>
-
-  <div class="mm_login">
-
-    <form action="" method="post" class="login mm_clear well"> {% csrf_token %}
-      {{ form.as_p }}
-      <div class="field">
-       <button class="btn btn-primary" type="submit">{% trans "Log in" %}</button>
-      </div>
-    </form>
-
-  </div>
-  <div class="mm_login_b">
-
-    <a rel="nofollow" class="browserid-login persona-button" id="browserid" href="#">
-      <img src="{% static 'postorius/img/sign_in_blue.png' %}"
-           alt="{% trans 'Login using BrowserID' %}" />
-    </a>
-    <p>{% trans "Mozilla Persona is an easy way to sign into multiple websites, while still controlling your personal data. For more information <a href='http://www.mozilla.org/en-US/persona'>see the Mozilla website</a>" %}.
-    </p>
-    <noscript>
-      <p class="text-error">
-        {% trans "Mozilla Persona requires the use of JavaScript." %}
-      </p>
-    </noscript>
-  </div>
-<div style="clear:both">
-</div>
-</div>
 {% endblock %}
 
 {% block additionaljs %}