diff --git a/allianceauth/authentication/templates/public/base.html b/allianceauth/authentication/templates/public/base.html
index 2951c284..feb8909a 100644
--- a/allianceauth/authentication/templates/public/base.html
+++ b/allianceauth/authentication/templates/public/base.html
@@ -7,7 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="description" content="">
         <meta name="author" content="">
-        <!-- TODO Bundle all the site specific stuff up into its own template for easy overide -->
+        <!-- TODO Bundle all the site specific stuff up into its own template for easy override -->
         <meta property="og:title" content="{{ SITE_NAME }}">
         <meta property="og:image" content="{{ SITE_URL }}{% static 'allianceauth/icons/apple-touch-icon.png' %}">
         <meta property="og:description" content="Alliance Auth - An auth system for EVE Online to help in-game organizations manage online service access.">
@@ -16,8 +16,9 @@
 
         <title>{% block title %}{% block page_title %}{% endblock page_title %} - {{ SITE_NAME }}{% endblock title %}</title>
 
-        {% include 'bundles/bootstrap-css.html' %}
+        {% include 'bundles/bootstrap-css-bs5.html' %}
         {% include 'bundles/fontawesome.html' %}
+
         {% block extra_include %}
         {% endblock %}
 
@@ -30,25 +31,23 @@
                 background-size: cover;
             }
 
-            .panel-transparent {
+            .card-login {
                 background: rgba(48  48  48 / 0.7);
-                color: #ffffff;
+                color: rgb(255 255 255);
                 padding-bottom: 21px;
             }
 
-            .panel-body {
-
-            }
-
             #lang-select {
                 width: 40%;
                 margin-left: auto;
                 margin-right: auto;
             }
+
             {% block extra_style %}
             {% endblock %}
         </style>
     </head>
+
     <body>
         <div class="container" style="margin-top:150px;">
             {% block content %}
diff --git a/allianceauth/authentication/templates/public/lang_select.html b/allianceauth/authentication/templates/public/lang_select.html
index 6556ad24..6bf5fa9f 100644
--- a/allianceauth/authentication/templates/public/lang_select.html
+++ b/allianceauth/authentication/templates/public/lang_select.html
@@ -1,9 +1,12 @@
 {% load i18n %}
+
 <div class="dropdown">
     <form action="{% url 'set_language' %}" method="post">
         {% csrf_token %}
+
         <select onchange="this.form.submit()" class="form-control" id="lang-select" name="language">
             {% get_language_info_list for LANGUAGES as languages %}
+
             {% for language in languages %}
                 <option lang="{{ language.code }}" value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
                     {{ language.name_local|capfirst }} ({{ language.code }})
diff --git a/allianceauth/authentication/templates/public/middle_box.html b/allianceauth/authentication/templates/public/middle_box.html
index 4c7244fb..f2b4bdd2 100644
--- a/allianceauth/authentication/templates/public/middle_box.html
+++ b/allianceauth/authentication/templates/public/middle_box.html
@@ -3,39 +3,41 @@
 {% load i18n %}
 
 {% block content %}
-    <div class="col-md-4 col-md-offset-4">
-        {% if messages %}
-            {% for message in messages %}
-                <div class="alert alert-{{ message.level_tag}}">{{ message }}</div>
-            {% endfor %}
-        {% endif %}
+    <div class="row justify-content-center">
+        <div class="col-md-4">
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert alert-{{ message.level_tag}}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
 
-        <div class="panel panel-default panel-transparent">
-            <div class="panel-body">
-                <div class="col-md-12">
-                    {% block middle_box_content %}
-                    {% endblock %}
+            <div class="card card-login border-secondary p-3">
+                <div class="card-body">
+                    <div class="text-center">
+                        {% block middle_box_content %}
+                        {% endblock %}
+                    </div>
                 </div>
+
+                {% include 'public/lang_select.html' %}
+
+                <p class="text-center mt-3">
+                    {% translate "For information on SSO, ESI and security read the CCP Dev Blog" %}<br>
+                    <a class="text-reset" href="https://www.eveonline.com/news/view/introducing-esi" target="_blank" rel="noopener noreferrer">
+                        {% translate "Introducing ESI - A New API For EVE Online" %}
+                    </a>
+                </p>
+
+                <p class="text-center">
+                    <a class="text-reset" href="https://community.eveonline.com/support/third-party-applications/" target="_blank" rel="noopener noreferrer">
+                        {% translate "Manage ESI Applications" %}
+                    </a>
+                </p>
             </div>
-
-            {% include 'public/lang_select.html' %}
-
-            <p class="text-center" style="margin-top: 2rem;">
-                {% translate "For information on SSO, ESI and security read the CCP Dev Blog" %}<br>
-                <a href="https://www.eveonline.com/news/view/introducing-esi" target="_blank" rel="noopener noreferrer">
-                    {% translate "Introducing ESI - A New API For EVE Online" %}
-                </a>
-            </p>
-
-            <p class="text-center">
-                <a href="https://community.eveonline.com/support/third-party-applications/" target="_blank" rel="noopener noreferrer">
-                    {% translate "Manage ESI Applications" %}
-                </a>
-            </p>
         </div>
     </div>
 {% endblock %}
 
 {% block extra_include %}
-    {% include 'bundles/bootstrap-js.html' %}
+    {% include 'bundles/bootstrap-js-bs5.html' %}
 {% endblock %}
diff --git a/allianceauth/authentication/templates/public/register.html b/allianceauth/authentication/templates/public/register.html
index e0f80382..a4f1e77d 100644
--- a/allianceauth/authentication/templates/public/register.html
+++ b/allianceauth/authentication/templates/public/register.html
@@ -6,9 +6,9 @@
 {% block page_title %}{% translate "Registration" %}{% endblock %}
 
 {% block extra_include %}
-    {% include 'bundles/bootstrap-css.html' %}
+    {% include 'bundles/bootstrap-css-bs5.html' %}
     {% include 'bundles/fontawesome.html' %}
-    {% include 'bundles/bootstrap-js.html' %}
+    {% include 'bundles/bootstrap-js-bs5.html' %}
 {% endblock %}
 
 {% block content %}
diff --git a/allianceauth/authentication/templates/registration/activate.html b/allianceauth/authentication/templates/registration/activate.html
index b5b9bfc1..4c8d18f4 100644
--- a/allianceauth/authentication/templates/registration/activate.html
+++ b/allianceauth/authentication/templates/registration/activate.html
@@ -1,5 +1,7 @@
 {% extends 'public/middle_box.html' %}
+
 {% load i18n %}
+
 {% block middle_box_content %}
     <div class="alert alert-danger">{% translate 'Invalid or expired activation link.' %}</div>
 {% endblock %}
diff --git a/allianceauth/templates/bundles/bootstrap-css-bs5.html b/allianceauth/templates/bundles/bootstrap-css-bs5.html
new file mode 100644
index 00000000..308ded67
--- /dev/null
+++ b/allianceauth/templates/bundles/bootstrap-css-bs5.html
@@ -0,0 +1,4 @@
+{% load static %}
+<!-- Bootstrap CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+<!-- End Bootstrap CSS -->
diff --git a/allianceauth/templates/bundles/bootstrap-js-bs5.html b/allianceauth/templates/bundles/bootstrap-js-bs5.html
new file mode 100644
index 00000000..6f60d2e3
--- /dev/null
+++ b/allianceauth/templates/bundles/bootstrap-js-bs5.html
@@ -0,0 +1,4 @@
+<!-- Start Bootstrap + jQuery js from cdnjs -->
+{#<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>#}
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<!-- End Bootstrap + jQuery js from cdnjs -->
