diff --git a/src/fellchensammlung/templates/allauth/elements/field.html b/src/fellchensammlung/templates/allauth/elements/field.html
new file mode 100644
index 0000000..e626913
--- /dev/null
+++ b/src/fellchensammlung/templates/allauth/elements/field.html
@@ -0,0 +1,50 @@
+{% load allauth %}
+<div class="field">
+
+    {% if attrs.type == "textarea" %}
+        <label class="label" for="{{ attrs.id }}">
+            {% slot label %}
+            {% endslot %}
+        </label>
+        <textarea class="textarea"
+                  {% if attrs.required %}required{% endif %}
+                  {% if attrs.rows %}rows="{{ attrs.rows }}"{% endif %}
+                  {% if attrs.disabled %}disabled{% endif %}
+                  {% if attrs.readonly %}readonly{% endif %}
+                  {% if attrs.checked %}checked{% endif %}
+                  {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
+                  {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
+                  {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}>{% slot value %}{% endslot %}</textarea>
+    {% else %}
+        {% if attrs.type != "checkbox" and attrs.type != "radio" %}
+            <label class="label" for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+        <input class="input"
+               {% if attrs.required %}required{% endif %}
+               {% if attrs.disabled %}disabled{% endif %}
+               {% if attrs.readonly %}readonly{% endif %}
+               {% if attrs.checked %}checked{% endif %}
+               {% if attrs.name %}name="{{ attrs.name }}"{% endif %}
+               {% if attrs.id %}id="{{ attrs.id }}"{% endif %}
+               {% if attrs.placeholder %}placeholder="{{ attrs.placeholder }}"{% endif %}
+               {% if attrs.autocomplete %}autocomplete="{{ attrs.autocomplete }}"{% endif %}
+               {% if attrs.value is not None %}value="{{ attrs.value }}"{% endif %}
+               type="{{ attrs.type }}">
+        {% if attrs.type == "checkbox" or attrs.type == "radio" %}
+            <label for="{{ attrs.id }}">
+                {% slot label %}
+                {% endslot %}
+            </label>
+        {% endif %}
+    {% endif %}
+    {% if slots.help_text %}
+        <p class="help is-danger">
+            {% slot help_text %}
+            {% endslot %}
+        </p>
+    {% endif %}
+    <p class="help is-danger">{{ attrs.errors }}</p>
+</div>
\ No newline at end of file
diff --git a/src/fellchensammlung/templates/allauth/elements/panel.html b/src/fellchensammlung/templates/allauth/elements/panel.html
new file mode 100644
index 0000000..9ee3562
--- /dev/null
+++ b/src/fellchensammlung/templates/allauth/elements/panel.html
@@ -0,0 +1,18 @@
+{% load allauth %}
+<section class="block">
+    <h2 class="title is-2">
+        {% slot title %}
+        {% endslot %}
+    </h2>
+    {% slot body %}
+    {% endslot %}
+    {% if slots.actions %}
+        <div class="field is-grouped is-grouped-multiline">
+            {% for action in slots.actions %}
+                <div class="control">
+                    {{ action }}
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+</section>
diff --git a/src/fellchensammlung/templates/mfa/recovery_codes/index.html b/src/fellchensammlung/templates/mfa/recovery_codes/index.html
new file mode 100644
index 0000000..00f83f9
--- /dev/null
+++ b/src/fellchensammlung/templates/mfa/recovery_codes/index.html
@@ -0,0 +1,43 @@
+{% extends "mfa/recovery_codes/base.html" %}
+{% load i18n %}
+{% load allauth %}
+{% block content %}
+{% element h1 %}
+{% translate "Recovery Codes" %}
+{% endelement %}
+{% element p %}
+{% blocktranslate count unused_count=unused_codes|length %}There is {{ unused_count }} out of {{ total_count }}
+recovery codes available.{% plural %}There are {{ unused_count }} out of {{ total_count }} recovery codes
+available.{% endblocktranslate %}
+{% endelement %}
+<div class="block">
+{% element field id="recovery_codes" type="textarea" disabled=True rows=unused_codes|length readonly=True %}
+{% slot label %}
+{% translate "Unused codes" %}
+{% endslot %}
+{% comment %} djlint:off {% endcomment %}
+{% slot value %}{% for code in unused_codes %}{% if forloop.counter0 %}
+{% endif %}{{ code }}{% endfor %}{% endslot %}
+{% comment %} djlint:on {% endcomment %}
+{% endelement %}
+</div>
+<div class="block">
+<div class="field is-grouped is-grouped-multiline">
+{% if unused_codes %}
+{% url 'mfa_download_recovery_codes' as download_url %}
+<div class="control">
+{% element button href=download_url %}
+{% translate "Download codes" %}
+{% endelement %}
+</div>
+{% endif %}
+{% url 'mfa_generate_recovery_codes' as generate_url %}
+
+<div class="control">
+{% element button href=generate_url %}
+{% translate "Generate new codes" %}
+{% endelement %}
+</div>
+</div>
+</div>
+{% endblock content %}