diff --git a/src/wagtail_2fa/templates/wagtail_2fa/legacy/otp_form.html b/src/wagtail_2fa/templates/wagtail_2fa/legacy/otp_form.html
new file mode 100644
index 0000000..0ab65bd
--- /dev/null
+++ b/src/wagtail_2fa/templates/wagtail_2fa/legacy/otp_form.html
@@ -0,0 +1,74 @@
+{% extends "wagtailadmin/admin_base.html" %}
+{% load static i18n %}
+{% block titletag %}{% trans "Sign in" %}{% endblock %}
+{% block bodyclass %}login{% endblock %}
+
+{% block extra_css %}
+    {{ block.super }}
+
+    <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
+{% endblock %}
+
+{% block furniture %}
+    <div class="content-wrapper">
+        {% if messages or form.errors %}
+            <div class="messages">
+                <ul>
+                    {% if form.errors %}
+                        <li class="error">{% blocktrans %}Invalid code{% endblocktrans %}</li>
+                    {% endif %}
+                    {% for message in messages %}
+                        <li class="{{ message.tags }}">{{ message }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+
+        {% block above_login %}{% endblock %}
+
+        <form action="{% url 'wagtail_2fa_auth' %}" method="post" autocomplete="off" novalidate>
+            {% block login_form %}
+            {% csrf_token %}
+
+            {% url 'wagtailadmin_home' as home_url %}
+            <input type="hidden" name="next" value="{{ next|default:home_url }}" />
+
+            <h1>{% block branding_login %}{% trans "Enter your two-factor authentication code" %}{% endblock %}</h1>
+
+            <ul class="fields">
+                {% block fields %}
+                <li class="full">
+                    <div class="field iconfield">
+                        {{ form.otp_token.label_tag }}
+                        <div class="input icon-locked">
+                            {{ form.otp_token }}
+                        </div>
+                    </div>
+                </li>
+
+                {% block extra_fields %}
+                {% for field_name, field in form.extra_fields %}gs
+                <li class="full">
+                    {{ field.label_tag }}
+                    <div class="field iconfield">
+                        {{ field }}
+                    </div>
+                </li>
+                {% endfor %}
+                {% endblock extra_fields %}
+
+                {% endblock %}
+                <li class="submit">
+                    {% block submit_buttons %}
+                    <button type="submit" class="button button-longrunning" tabindex="3" data-clicked-text="{% trans 'Signing in…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Sign in' %}</em></button>
+                    <a href="{% url "wagtailadmin_logout" %}" class="button button-secondary" tabindex="4">{% trans 'Sign out' %}</a>
+                    {% endblock %}
+                </li>
+            </ul>
+        {% endblock %}
+        </form>
+
+        {% block below_login %}{% endblock %}
+
+    </div>
+{% endblock %}
diff --git a/src/wagtail_2fa/templates/wagtail_2fa/otp_form.html b/src/wagtail_2fa/templates/wagtail_2fa/otp_form.html
index 0ab65bd..fabe5b0 100644
--- a/src/wagtail_2fa/templates/wagtail_2fa/otp_form.html
+++ b/src/wagtail_2fa/templates/wagtail_2fa/otp_form.html
@@ -1,18 +1,15 @@
 {% extends "wagtailadmin/admin_base.html" %}
-{% load static i18n %}
+{% load i18n wagtailadmin_tags %}
 {% block titletag %}{% trans "Sign in" %}{% endblock %}
 {% block bodyclass %}login{% endblock %}
 
-{% block extra_css %}
-    {{ block.super }}
-
-    <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/login.css' %}" type="text/css" />
-{% endblock %}
-
 {% block furniture %}
-    <div class="content-wrapper">
-        {% if messages or form.errors %}
-            <div class="messages">
+    <main class="content-wrapper" id="main">
+        <h1>{% block branding_login %}{% trans "Enter your two-factor authentication code" %}{% endblock %}</h1>
+
+        <div class="messages" role="status">
+            {# Always show messages div so it can be appended to by JS #}
+            {% if messages or form.errors %}
                 <ul>
                     {% if form.errors %}
                         <li class="error">{% blocktrans %}Invalid code{% endblocktrans %}</li>
@@ -21,54 +18,43 @@
                         <li class="{{ message.tags }}">{{ message }}</li>
                     {% endfor %}
                 </ul>
-            </div>
-        {% endif %}
+            {% endif %}
+        </div>
 
         {% block above_login %}{% endblock %}
 
         <form action="{% url 'wagtail_2fa_auth' %}" method="post" autocomplete="off" novalidate>
             {% block login_form %}
-            {% csrf_token %}
+                {% csrf_token %}
 
-            {% url 'wagtailadmin_home' as home_url %}
-            <input type="hidden" name="next" value="{{ next|default:home_url }}" />
+                {% url 'wagtailadmin_home' as home_url %}
+                <input type="hidden" name="next" value="{{ next|default:home_url }}" />
 
-            <h1>{% block branding_login %}{% trans "Enter your two-factor authentication code" %}{% endblock %}</h1>
-
-            <ul class="fields">
                 {% block fields %}
-                <li class="full">
-                    <div class="field iconfield">
-                        {{ form.otp_token.label_tag }}
-                        <div class="input icon-locked">
-                            {{ form.otp_token }}
-                        </div>
-                    </div>
-                </li>
+                    {% field field=form.otp_token %}{% endfield %}
 
-                {% block extra_fields %}
-                {% for field_name, field in form.extra_fields %}gs
-                <li class="full">
-                    {{ field.label_tag }}
-                    <div class="field iconfield">
-                        {{ field }}
-                    </div>
-                </li>
-                {% endfor %}
-                {% endblock extra_fields %}
+                    {% block extra_fields %}
+                        {% for field_name, field in form.extra_fields %}
+                            {% field field=field %}{% endfield %}
+                        {% endfor %}
+                    {% endblock extra_fields %}
 
                 {% endblock %}
-                <li class="submit">
-                    {% block submit_buttons %}
-                    <button type="submit" class="button button-longrunning" tabindex="3" data-clicked-text="{% trans 'Signing in…' %}"><span class="icon icon-spinner"></span><em>{% trans 'Sign in' %}</em></button>
+            {% endblock %}
+            <footer class="form-actions">
+                {% block submit_buttons %}
+                    <button type="submit" class="button button-longrunning" tabindex="3" data-clicked-text="{% trans 'Signing in…' %}">{% icon name="spinner" %}<em>{% trans 'Sign in' %}</em></button>
                     <a href="{% url "wagtailadmin_logout" %}" class="button button-secondary" tabindex="4">{% trans 'Sign out' %}</a>
-                    {% endblock %}
-                </li>
-            </ul>
-        {% endblock %}
+                {% endblock %}
+            </footer>
         </form>
 
         {% block below_login %}{% endblock %}
 
-    </div>
+        {% block branding_logo %}
+            <div class="login-logo">
+                <img class="login-logo-img" alt="" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" />
+            </div>
+        {% endblock %}
+    </main>
 {% endblock %}
diff --git a/src/wagtail_2fa/views.py b/src/wagtail_2fa/views.py
index 67ddc58..88b931c 100644
--- a/src/wagtail_2fa/views.py
+++ b/src/wagtail_2fa/views.py
@@ -23,12 +23,16 @@
 from django_otp import login as otp_login
 from django_otp.plugins.otp_totp.models import TOTPDevice
 
+from wagtail import VERSION as WAGTAIL_VERSION
 from wagtail_2fa import forms, utils
 from wagtail_2fa.mixins import OtpRequiredMixin
 
 
 class LoginView(RedirectURLMixin, FormView):
-    template_name = "wagtail_2fa/otp_form.html"
+    if WAGTAIL_VERSION >= (4, 0, 0):
+        template_name = "wagtail_2fa/otp_form.html"
+    else:
+        template_name = "wagtail_2fa/legacy/otp_form.html"
     form_class = forms.TokenForm
     redirect_field_name = REDIRECT_FIELD_NAME