diff --git a/allianceauth/srp/templates/srp/add.html b/allianceauth/srp/templates/srp/add.html
index 750d0284..708fc2fe 100644
--- a/allianceauth/srp/templates/srp/add.html
+++ b/allianceauth/srp/templates/srp/add.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
 
-{% load bootstrap %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 
 {% block page_title %}
@@ -21,25 +21,38 @@
             {% translate "Create SRP Fleet" %}
         </h1>
 
-        <div class="container-fluid">
-            <div class="col-md-4 col-md-offset-4">
-                <div class="row">
-                    {% if completed == False %}
-                        <form class="form-signin" role="form" action="" method="POST">
-                            {% csrf_token %}
-                            {{ form|bootstrap }}
-                            <br>
-                            <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Create SRP Fleet" %}</button>
-                        </form>
-                    {% else %}
-                        <div class="alert alert-info" role="alert">{% blocktranslate %}Give this link to the line members{% endblocktranslate %}.</div>
-                        <div class="alert alert-info" role="alert">
-                            {{ SITE_URL }}{% url 'srp:request' completed_srp_code %}
-                        </div>
-                        <div class="text-center">
-                            <a href="{% url 'srp:management' %}" class="btn btn-primary btn-lg">{% translate "Continue" %}</a>
-                        </div>
-                    {% endif %}
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "SRP fleet details" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        {% if completed == False %}
+                            <form class="form-signin" role="form" action="" method="POST">
+                                {% csrf_token %}
+
+                                {% bootstrap_form form %}
+
+                                <div class="form-group mt-3 clearfix">
+                                    {% translate "Create SRP fleet" as button_text %}
+                                    {% bootstrap_button button_class="btn btn-primary" content=button_text %}
+                                </div>
+                            </form>
+                        {% else %}
+                            <div class="aa-callout aa-callout-info" role="alert">
+                                <p>{% translate "Give this link to the line members." %}</p>
+                                <p>{{ SITE_URL }}{% url 'srp:request' completed_srp_code %}</p>
+                            </div>
+
+                            <div class="text-end">
+                                <a href="{% url 'srp:management' %}" class="btn btn-primary">{% translate "Continue" %}</a>
+                            </div>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
@@ -48,13 +61,15 @@
 
 {% block extra_javascript %}
     {% include 'bundles/jquery-datetimepicker-js.html' %}
-{% endblock %}
 
-{% block extra_script %}
-    $('#id_fleet_time').datetimepicker({
-        setlocale: '{{ LANGUAGE_CODE }}',
-        mask: true,
-        format: 'Y-m-d H:i',
-        minDate: 0
-    });
-{% endblock extra_script %}
+    <script>
+        $(document).ready(() => {
+            $('#id_fleet_time').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                mask: true,
+                format: 'Y-m-d H:i',
+                minDate: 0
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/allianceauth/srp/templates/srp/request.html b/allianceauth/srp/templates/srp/request.html
index 80c8a086..08a0dfef 100644
--- a/allianceauth/srp/templates/srp/request.html
+++ b/allianceauth/srp/templates/srp/request.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
 
-{% load bootstrap %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 
 {% block page_title %}
@@ -17,16 +17,27 @@
             {% translate "Create SRP Request" %}
         </h1>
 
-        <div class="container-fluid">
-            <div class="col-md-4 col-md-offset-4">
-                <div class="row">
-                    <form class="form-signin" role="form" action="" method="POST">
-                        {% csrf_token %}
-                        {{ form|bootstrap }}
-                        <br>
-                        <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Create SRP Request" %}
-                        </button>
-                    </form>
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Your SRP request" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        <form class="form-signin" role="form" action="" method="POST">
+                            {% csrf_token %}
+
+                            {% bootstrap_form form %}
+
+                            <div class="form-group mt-3 clearfix">
+                                {% translate "Create SRP request" as button_text %}
+                                {% bootstrap_button button_class="btn btn-primary" content=button_text %}
+                            </div>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/allianceauth/srp/templates/srp/update.html b/allianceauth/srp/templates/srp/update.html
index a4a0bff0..fe8eba41 100644
--- a/allianceauth/srp/templates/srp/update.html
+++ b/allianceauth/srp/templates/srp/update.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
 
-{% load bootstrap %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 
 {% block page_title %}
@@ -17,20 +17,33 @@
             {% translate "Update AAR Link" %}
         </h1>
 
-        <div class="container-fluid">
-            <div class="col-md-4 col-md-offset-4">
-                <div class="row">
-                    {% if no_fleet_id %}
-                        <div class="alert alert-danger" role="alert">{% translate "SRP Fleet Does Not Exist" %}</div>
-                    {% else %}
-                        <form class="form-signin" role="form" action="" method="POST">
-                            {% csrf_token %}
-                            {{ form|bootstrap }}
-                            <br>
-                            <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Update AAR Link" %}
-                            </button>
-                        </form>
-                    {% endif %}
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "After Action Report" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        {% if no_fleet_id %}
+                            <div class="alert alert-danger" role="alert">
+                                {% translate "SRP Fleet Does Not Exist" %}
+                            </div>
+                        {% else %}
+                            <form class="form-signin" role="form" action="" method="POST">
+                                {% csrf_token %}
+
+                                {% bootstrap_form form %}
+
+                                <div class="form-group mt-3 clearfix">
+                                    {% translate "Update AAR link" as button_text %}
+                                    {% bootstrap_button button_class="btn btn-primary" content=button_text %}
+                                </div>
+                            </form>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>