diff --git a/passbook/core/templates/error/generic.html b/passbook/core/templates/error/generic.html
index 24595d1c8..7bb8ee16e 100644
--- a/passbook/core/templates/error/generic.html
+++ b/passbook/core/templates/error/generic.html
@@ -1,20 +1,58 @@
-{% extends 'login/base.html' %}
+{% extends 'base/skeleton.html' %}
 
 {% load static %}
 {% load i18n %}
 {% load passbook_utils %}
 
-{% block card_title %}
-{% trans 'Bad Request' %}
-{% endblock %}
-
-{% block card %}
-<form>
-    {% if message %}
-    <h3>{% trans message %}</h3>
-    {% endif %}
-    {% if 'back' in request.GET %}
-    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
-    {% endif %}
-</form>
+{% block body %}
+<div class="pf-c-background-image">
+    <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
+        <filter id="image_overlay">
+            <feColorMatrix type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"></feColorMatrix>
+            <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+                <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+                <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+                <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+                <feFuncA type="table" tableValues="0 1"></feFuncA>
+            </feComponentTransfer>
+        </filter>
+    </svg>
+</div>
+<div class="pf-c-login">
+    <div class="pf-c-login__container">
+        <header class="pf-c-login__header">
+            <img class="pf-c-brand" src="{% static 'passbook/logo.svg' %}" style="height: 60px;" alt="passbook icon" />
+            <img class="pf-c-brand" src="{% static 'passbook/brand.svg' %}" style="height: 60px;"
+                alt="passbook branding" />
+        </header>
+        <main class="pf-c-login__main" id="flow-body">
+            <header class="pf-c-login__main-header">
+                <h1 class="pf-c-title pf-m-3xl">
+                    {% trans 'Bad Request' %}
+                </h1>
+            </header>
+            <div class="pf-c-login__main-body">
+                {% block card %}
+                <form method="POST" class="pf-c-form">
+                    {% if message %}
+                    <h3>{% trans message %}</h3>
+                    {% endif %}
+                    {% if 'back' in request.GET %}
+                    <a href="{% back %}" class="btn btn-primary btn-block btn-lg">{% trans 'Back' %}</a>
+                    {% endif %}
+                </form>
+                {% endblock %}
+            </div>
+        </main>
+        <footer class="pf-c-login__footer">
+            <p></p>
+            <ul class="pf-c-list pf-m-inline">
+                <li>
+                    <a href="https://passbook.beryju.org/">{% trans 'Documentation' %}</a>
+                </li>
+                <!-- todo: load config.passbook.footer.links -->
+            </ul>
+        </footer>
+    </div>
+</div>
 {% endblock %}