diff --git a/authentik/core/templates/login/base_full.html b/authentik/core/templates/login/base_full.html
index 22d6aa805..450a969c4 100644
--- a/authentik/core/templates/login/base_full.html
+++ b/authentik/core/templates/login/base_full.html
@@ -4,16 +4,6 @@
 {% load i18n %}
 {% load authentik_utils %}
 
-{% block head %}
-{{ block.super }}
-<style>
-/* Fix logo/header/footer block moving around when card size changes */
-.pf-c-login__header {
-    grid-row-start: 3;
-}
-</style>
-{% endblock %}
-
 {% 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">
@@ -30,7 +20,7 @@
 </div>
 <ak-message-container></ak-message-container>
 <div class="pf-c-login">
-    <div class="pf-c-login__container">
+    <div class="ak-login-container">
         <header class="pf-c-login__header">
             <div class="pf-c-brand ak-brand">
                 <img src="{{ config.authentik.branding.logo }}" alt="authentik icon" />
@@ -38,23 +28,6 @@
                 <p>{{ config.authentik.branding.title }}</p>
                 {% endif %}
             </div>
-            <footer class="pf-c-login__footer">
-                <p></p>
-                <ul class="pf-c-list pf-m-inline">
-                    {% for link in config.authentik.footer_links %}
-                    <li>
-                        <a href="{{ link.href }}">{{ link.name }}</a>
-                    </li>
-                    {% endfor %}
-                    {% if config.authentik.branding.title != "authentik" %}
-                    <li>
-                        <a href="https://goauthentik.io">
-                            {% trans 'Powered by authentik' %}
-                        </a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </footer>
         </header>
         {% block main_container %}
         <main class="pf-c-login__main">
@@ -70,6 +43,23 @@
             </div>
         </main>
         {% endblock %}
+        <footer class="pf-c-login__footer">
+            <p></p>
+            <ul class="pf-c-list pf-m-inline">
+                {% for link in config.authentik.footer_links %}
+                <li>
+                    <a href="{{ link.href }}">{{ link.name }}</a>
+                </li>
+                {% endfor %}
+                {% if config.authentik.branding.title != "authentik" %}
+                <li>
+                    <a href="https://goauthentik.io">
+                        {% trans 'Powered by authentik' %}
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </footer>
     </div>
 </div>
 {% endblock %}
diff --git a/web/src/authentik.css b/web/src/authentik.css
index 005e20cd0..298b2d03a 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -15,10 +15,35 @@ html > input {
     z-index: 0;
 }
 
+/*****************************
+* Login adjustments
+*****************************/
 /* Ensure card is displayed on small screens */
 .pf-c-login__main {
     display: block;
 }
+.ak-login-container {
+    height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
+    width: 35rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+.pf-c-login__header {
+    flex-grow: 1;
+}
+.pf-c-login__main {
+    flex-shrink: 1;
+}
+.pf-c-login__footer {
+    flex-grow: 1;
+}
+.pf-c-login__footer ul.pf-c-list.pf-m-inline {
+    justify-content: center;
+}
+/*****************************
+* End Login adjustments
+*****************************/
 
 .pf-c-content h1 {
     display: flex;