diff --git a/allianceauth/optimer/templates/optimer/add.html b/allianceauth/optimer/templates/optimer/add.html
index 9b9ddecd..4443fa0a 100644
--- a/allianceauth/optimer/templates/optimer/add.html
+++ b/allianceauth/optimer/templates/optimer/add.html
@@ -1,15 +1,23 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load bootstrap %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Create Operation" %}{% endblock page_title %}
+{% block page_title %}
+    {% translate "Create Operation" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
+
 {% block extra_css %}
     {% include 'bundles/jquery-datetimepicker-css.html' %}
 {% endblock extra_css %}
 
 {% block content %}
-    <div class="col-lg-12">
+    <div>
         <h1 class="page-header text-center">{% translate "Create Fleet Operation" %}</h1>
 
         <div class="container-fluid">
diff --git a/allianceauth/optimer/templates/optimer/management.html b/allianceauth/optimer/templates/optimer/management.html
index ef8bb90b..5673cc48 100644
--- a/allianceauth/optimer/templates/optimer/management.html
+++ b/allianceauth/optimer/templates/optimer/management.html
@@ -1,41 +1,62 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Fleet Operation Management" %}{% endblock page_title %}
-{% block extra_css %}{% endblock extra_css %}
+{% block page_title %}
+    {% translate "Fleet Operation Management" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
 
 {% block content %}
-    <div class="col-lg-12">
-        <h1 class="page-header text-center">{% translate "Fleet Operation Timers" %}
-            <div class="text-end">
-                {% if perms.auth.optimer_management %}
-                    <a href="{% url 'optimer:add' %}" class="btn btn-success">{% translate "Create Operation" %}</a>
-                {% endif %}
-            </div>
-        </h1>
-
-        <div class="col-lg-12 text-center row">
-            <div class="badge bg-info text-start">
-                <b>{% translate "Current Eve Time:" %} </b>
-            </div>
-            <strong class="badge bg-info text-start" id="current-time"></strong>
-            <br>
+    <div>
+        <div class="text-end">
+            {% if perms.auth.optimer_management %}
+                <a href="{% url 'optimer:add' %}" class="btn btn-success">{% translate "Create Operation" %}</a>
+            {% endif %}
         </div>
 
-        <h4><b>{% translate "Next Fleet Operations" %}</b></h4>
-        {% if future_timers %}
-            {% include "optimer/fleetoptable.html" with timers=future_timers %}
-        {% else %}
-            <div class="alert alert-warning text-center">{% translate "No upcoming timers." %}</div>
-        {% endif %}
+        <div class="text-center mb-3">
+            <div class="badge bg-info text-start">
+                <b>{% translate "Current Eve Time:" %}</b>
+                <span id="current-time"></span>
+            </div>
+        </div>
 
-        <h4><b>{% translate "Past Fleet Operations" %}</b></h4>
-        {% if past_timers %}
-            {% include "optimer/fleetoptable.html" with timers=past_timers %}
-        {% else %}
-            <div class="alert alert-warning text-center">{% translate "No past timers." %}</div>
-        {% endif %}
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Next Fleet Operations" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                {% if future_timers %}
+                    {% include "optimer/fleetoptable.html" with timers=next_timers %}
+                {% else %}
+                    <div class="alert alert-warning text-center">{% translate "No upcoming timers." %}</div>
+                {% endif %}
+            </div>
+        </div>
+
+        <div class="card mb-3">
+            <div class="card-header">
+                <div class="card-title mb-0">
+                    {% translate "Past Fleet Operations" %}
+                </div>
+            </div>
+
+            <div class="card-body">
+                {% if past_timers %}
+                    {% include "optimer/fleetoptable.html" with timers=past_timers %}
+                {% else %}
+                    <div class="alert alert-warning text-center">{% translate "No past timers." %}</div>
+                {% endif %}
+            </div>
+        </div>
     </div>
 
     {% include 'bundles/moment-js.html' with locale=True %}
@@ -43,23 +64,23 @@
 
     <script>
         // Data
-        let timers = [
-        {% for op in optimer %}
-            {
-                'id': {{ op.id }},
-                'start': moment("{{ op.start | date:"c" }}"),
-                'expired': false
-            },
-        {% endfor %}
+        const timers = [
+            {% for op in optimer %}
+                {
+                    'id': {{ op.id }},
+                    'start': moment("{{ op.start | date:"c" }}"),
+                    'expired': false
+                },
+            {% endfor %}
         ];
 
         /**
          * Update a timer
          * @param timer Timer information
          */
-        let updateTimer = function (timer) {
+        const updateTimer = (timer) => {
             if (timer.start.isAfter(Date.now())) {
-                let duration = moment.duration(timer.start - moment(), 'milliseconds');
+                const duration = moment.duration(timer.start - moment(), 'milliseconds');
 
                 document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
             } else {
@@ -69,10 +90,13 @@
             }
         };
 
-        let updateAllTimers = function () {
-            let l = timers.length;
+        /**
+         * Update all timers
+         */
+        const updateAllTimers = () => {
+            const l = timers.length;
 
-            for (var i=0; i < l; ++i) {
+            for (let i=0; i < l; ++i) {
                 if (timers[i].expired) continue;
 
                 updateTimer(timers[i]);
@@ -83,26 +107,32 @@
          * Set the local time info for the timer
          * @param timer Timer information
          */
-        let setLocalTime = function (timer) {
-            document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
+        const setLocalTime = (timer) => {
+            document.getElementById(
+                "localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT")
+            ;
         };
 
         /**
          * Set all local time fields
          */
-        let setAllLocalTimes = function () {
-            let l = timers.length;
+        const setAllLocalTimes = () => {
+            const l = timers.length;
 
-            for (var i=0; i < l; ++i) {
+            for (let i=0; i < l; ++i) {
                 setLocalTime(timers[i]);
             }
         };
 
-        let updateClock = function () {
+        /**
+         * Get the current Eve time as a string
+         * @returns {string} Eve time string
+         */
+        const updateClock = () => {
             document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
         };
 
-        let timedUpdate = function () {
+        const timedUpdate = () => {
             updateClock();
             updateAllTimers();
         };
diff --git a/allianceauth/optimer/templates/optimer/update.html b/allianceauth/optimer/templates/optimer/update.html
index 6bccf30b..9b94598b 100644
--- a/allianceauth/optimer/templates/optimer/update.html
+++ b/allianceauth/optimer/templates/optimer/update.html
@@ -1,18 +1,26 @@
-{% extends "allianceauth/base.html" %}
+{% extends "allianceauth/base-bs5.html" %}
+
 {% load bootstrap %}
 {% load i18n %}
 {% get_current_language as LANGUAGE_CODE %}
 
-{% block page_title %}{% translate "Update Fleet Operation" %}{% endblock page_title %}
+{% block page_title %}
+    {% translate "Update Fleet Operation" %}
+{% endblock page_title %}
+
+{% block header_nav_brand %}
+    {% translate "Fleet Operation Timers" %}
+{% endblock header_nav_brand %}
 
 {% block extra_css %}
     {% include 'bundles/jquery-datetimepicker-css.html' %}
 {% endblock extra_css %}
 
 {% block content %}
-
-    <div class="col-lg-12">
-        <h1 class="page-header text-center">{% translate "Update Fleet Operation" %}</h1>
+    <div>
+        <h1 class="page-header text-center mb-3">
+            {% translate "Update Fleet Operation" %}
+        </h1>
 
         <div class="container-fluid">
             <div class="col-md-4 col-md-offset-4">
@@ -33,25 +41,19 @@
         </div>
 
     </div>
-
 {% endblock content %}
 
 {% block extra_javascript %}
     {% include 'bundles/jquery-datetimepicker-js.html' %}
+
+    <script>
+        $(document).ready(() => {
+            $('#id_start').datetimepicker({
+                setlocale: '{{ LANGUAGE_CODE }}',
+                mask: true,
+                format: 'Y-m-d H:i',
+                minDate: 0
+            });
+        });
+    </script>
 {% 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 %}