diff --git a/allianceauth/optimer/form_widgets.py b/allianceauth/optimer/form_widgets.py
index 3cd313b8..e639e18b 100644
--- a/allianceauth/optimer/form_widgets.py
+++ b/allianceauth/optimer/form_widgets.py
@@ -3,6 +3,7 @@ Form Widgets
 """
 
 from django import forms
+from django.utils.safestring import mark_safe
 
 
 class DataListWidget(forms.TextInput):
@@ -42,4 +43,4 @@ class DataListWidget(forms.TextInput):
 
         data_list += "</datalist>"
 
-        return text_html + data_list
+        return mark_safe(text_html + data_list)
diff --git a/allianceauth/optimer/templates/optimer/add.html b/allianceauth/optimer/templates/optimer/add.html
index 4443fa0a..52f4b7ab 100644
--- a/allianceauth/optimer/templates/optimer/add.html
+++ b/allianceauth/optimer/templates/optimer/add.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
 
-{% load bootstrap %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
@@ -18,38 +18,48 @@
 
 {% block content %}
     <div>
-        <h1 class="page-header text-center">{% translate "Create Fleet Operation" %}</h1>
+        <h1 class="page-header text-center mb-3">
+            {% translate "Create Fleet Operation" %}
+        </h1>
 
-        <div class="container-fluid">
-            <div class="col-md-4 col-md-offset-4">
-                <div class="row">
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Fleet operation details" %}
+                </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 %}
-                            {{ form|bootstrap }}
-                            <br>
-                            <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Create Fleet Operation" %}</button>
+
+                            {% bootstrap_form form %}
+
+                            <div class="form-group mt-3 clearfix">
+                                {% translate "Create fleet operation" as button_text %}
+                                {% bootstrap_button button_class="btn btn-primary" content=button_text %}
+                            </div>
                         </form>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-
 {% endblock content %}
 
 {% block extra_javascript %}
     {% include 'bundles/jquery-datetimepicker-js.html' %}
-{% endblock %}
 
-{% block extra_script %}
-    $('#id_start').datetimepicker({
-        setlocale: '{{ LANGUAGE_CODE }}',
-        {% if NIGHT_MODE %}
-            theme: 'dark',
-        {% else %}
-            theme: 'default',
-        {% endif %}
-        mask: true,
-        format: 'Y-m-d H:i',
-        minDate: 0
-    });
-{% endblock extra_script %}
+    <script>
+        $(document).ready(() => {
+            $('#id_start').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                mask: true,
+                format: 'Y-m-d H:i',
+                minDate: 0
+            });
+        });
+    </script>
+{% endblock %}
diff --git a/allianceauth/optimer/templates/optimer/update.html b/allianceauth/optimer/templates/optimer/update.html
index 9b94598b..cec34852 100644
--- a/allianceauth/optimer/templates/optimer/update.html
+++ b/allianceauth/optimer/templates/optimer/update.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
 
-{% load bootstrap %}
+{% load django_bootstrap5 %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
@@ -22,24 +22,30 @@
             {% translate "Update Fleet Operation" %}
         </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 "Fleet Operation Does Not Exist" %}</div>
-                    {% else %}
+        <div class="card card-primary border-0">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Fleet operation details" %}
+                </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 %}
-                            {{ form|bootstrap }}
-                            <br>
-                            <button class="btn btn-lg btn-primary btn-block" type="submit">{% translate "Update Fleet Operation" %}
-                            </button>
+
+                            {% bootstrap_form form %}
+
+                            <div class="form-group mt-3 clearfix">
+                                {% translate "Update fleet operation" as button_text %}
+                                {% bootstrap_button button_class="btn btn-primary" content=button_text %}
+                            </div>
                         </form>
-                    {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
-
     </div>
 {% endblock content %}