diff --git a/allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html b/allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html
index 99ad0be0..536e3d39 100644
--- a/allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html
+++ b/allianceauth/services/modules/mumble/templates/services/mumble/mumble_connection_history.html
@@ -1,6 +1,6 @@
 {% extends "allianceauth/base-bs5.html" %}
+
 {% load i18n %}
-{% load humanize %}
 
 {% block page_title %}
     {% translate "Mumble" %}
@@ -9,6 +9,7 @@
 {% block header_nav_brand %}
     <a class="navbar-brand">{% trans "Mumble History" %} - {{ mumble_url }}</a>
 {% endblock header_nav_brand %}
+
 {% block header_nav_collapse_left %}
 {% endblock header_nav_collapse_left %}
 
@@ -16,55 +17,55 @@
 {% endblock header_nav_collapse_right %}
 
 {% block content %}
-    <div class="card card-success col-lg-12 container-fluid">
+    <div class="card col-lg-12 mb-3">
         <div class="card-header">
             <span class="card-title">{% translate "Server Connection History" %}</span>
         </div>
+
         <div class="card-body">
-            <div class="panel panel-default">
-                <div class="panel-body">
-                    <table class="table table-responsive" id="table-mumble-connection-history" style="width: 100%;">
-                        <thead>
-                            <tr>
-                                <th class="text-left">{% translate "User" %}</th>
-                                <th class="text-left">{% translate "Display_Name" %}</th>
-                                <th class="text-left">{% translate "Release" %}</th>
-                                <th class="text-left">{% translate "Version" %}</th>
-                                <th class="text-left">{% translate "Last Connection" %}</th>
-                                <th class="text-left">{% translate "Last Disconnection" %}</th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
+            <div class="table-responsive">
+                <table class="table w-100" id="table-mumble-connection-history">
+                    <thead>
+                        <tr>
+                            <th class="text-start">{% translate "User" %}</th>
+                            <th class="text-start">{% translate "Displayed Name" %}</th>
+                            <th class="text-start">{% translate "Release" %}</th>
+                            <th class="text-start">{% translate "Version" %}</th>
+                            <th class="text-end">{% translate "Last Connect" %}</th>
+                            <th class="text-end">{% translate "Last Disconnect" %}</th>
+                        </tr>
+                    </thead>
+                </table>
             </div>
         </div>
     </div>
+
     <div class="row">
-        <div class="card card-success col-lg-6 container-fluid">
-            <div class="card-header">
-                <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
-            </div>
-            <div class="card-body">
-                <div class="panel panel-default">
-                    <div class="panel-body">
-                        <canvas id="pieChart"></canvas> <!-- Canvas element for the pie chart -->
-                        <br />
-                    </div>
+        <div class="col-lg-6">
+            <div class="card">
+                <div class="card-header">
+                    <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
+                </div>
+
+                <div class="card-body">
+                    <canvas id="pieChart"></canvas> <!-- Canvas element for the pie chart -->
                 </div>
             </div>
         </div>
-        <div class="card card-success col-lg-6 container-fluid">
-            <div class="card-header">
-                <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
-            </div>
-            <div class="card-body">
-                <div class="panel panel-default">
-                    <div class="panel-body">
-                        <table class="table table-responsive" id="table-mumble-connection-stats" style="width: 100%;">
+
+        <div class="col-lg-6">
+            <div class="card">
+                <div class="card-header">
+                    <span class="card-title">{% translate "Server Connection Breakdown" %}</span>
+                </div>
+
+                <div class="card-body">
+                    <div class="table-responsive">
+                        <table class="table w-100" id="table-mumble-connection-stats">
                             <thead>
                                 <tr>
-                                    <th class="text-left">{% translate "Version" %}</th>
-                                    <th class="text-left">{% translate "Number" %}</th>
+                                    <th class="text-start">{% translate "Version" %}</th>
+                                    <th class="text-end">{% translate "Number" %}</th>
                                 </tr>
                             </thead>
                         </table>
@@ -74,112 +75,131 @@
         </div>
     </div>
 {% endblock content %}
+
 {% block extra_javascript %}
     {% include "bundles/datatables-js-bs5.html" %}
     {% include "bundles/filterdropdown-js.html" %}
     {% include "bundles/chart-js.html" %}
     {% include "bundles/moment-js.html" with locale=True %}
 
+    <script>
+        $(document).ready(function () {
+            const MUMBLESTATS_DATETIME_FORMAT = 'YYYY-MM-DD, HH:mm';
+
+            'use strict';
+
+            $("#table-mumble-connection-history").DataTable({
+                ajax: {
+                    url: '{% url "mumble:connection_history_data" %}',
+                    dataSrc: 'connection_history_data',
+                },
+                columns: [
+                    { data: 'user' },
+                    { data: 'display_name' },
+                    { data: 'release' },
+                    { data: 'version' },
+                    {
+                        data: 'last_connect',
+                        render: (data) => {
+                            return moment(data).utc().format(MUMBLESTATS_DATETIME_FORMAT);
+                        },
+                        className: 'text-end',
+                    },
+                    {
+                        data: 'last_disconnect',
+                        render: (data) => {
+                            return moment(data).utc().format(MUMBLESTATS_DATETIME_FORMAT);
+                        },
+                        className: 'text-end',
+                    },
+                ],
+                order: [[4, 'desc']],
+                processing: true,
+                stateSave: true,
+                stateDuration: 0,
+                filterDropDown: {
+                    columns: [
+                        {
+                            idx: 2,
+                        },
+                        {
+                            idx: 3,
+                        },
+                    ],
+                    bootstrap: true,
+                    bootstrap_version: 5,
+                },
+            });
+
+            $("#table-mumble-connection-stats").DataTable({
+                ajax: {
+                    url: '{% url "mumble:release_counts_data" %}',
+                    dataSrc: 'release_counts_data',
+                },
+                columns: [
+                    { data: 'release' },
+                    { data: 'user_count', className: 'text-end' },
+                ],
+                order: [[1, 'desc']],
+                processing: true,
+                stateSave: true,
+                stateDuration: 0,
+            });
+
+            // Initialize empty Pie chart
+            const ctx = document.getElementById('pieChart').getContext('2d');
+            const pieChart = new Chart(ctx, {
+                type: 'pie',
+                data: {
+                    labels: [], // Initially empty
+                    datasets: [
+                        {
+                            label: 'Server Connection Breakdown',
+                            data: [], // Initially empty
+                            backgroundColor: [
+                                'rgba(255, 99, 132, 0.2)',
+                                'rgba(54, 162, 235, 0.2)',
+                                'rgba(255, 206, 86, 0.2)'
+                            ],
+                            borderColor: [
+                                'rgba(255, 99, 132, 1)',
+                                'rgba(54, 162, 235, 1)',
+                                'rgba(255, 206, 86, 1)'
+                            ],
+                            borderWidth: 1
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'top'
+                        }
+                    }
+                }
+            });
+
+            // AJAX call to dynamically update the chart
+            $.ajax({
+                url: '{% url "mumble:release_pie_chart_data" %}', // Your Django view URL that returns chart data
+                method: "GET",
+                success: (data) => {
+                    // Replace chart data with the data from the AJAX response
+                    pieChart.data.labels = data.labels; // Set the new labels
+                    pieChart.data.datasets[0].data = data.values; // Set the new values
+
+                    // Update the chart to reflect the new data
+                    pieChart.update();
+                },
+                error: (xhr, status, error) => {
+                    console.error('Error fetching pie chart data:', status, error);
+                },
+            });
+        });
+    </script>
 {% endblock extra_javascript %}
 
 {% block extra_css %}
     {% include "bundles/datatables-css-bs5.html" %}
 {% endblock extra_css %}
-{% block extra_script %}
-$(document).ready(function () {
-    $("#table-mumble-connection-history").DataTable({
-        ajax: {
-            url: "{% url 'mumble:connection_history_data' %}",
-            dataSrc: "connection_history_data",
-        },
-        columns: [
-            { data: "user" },
-            { data: "display_name" },
-            { data: "release" },
-            { data: "version" },
-            { data: "last_connect" },
-            { data: "last_connect" },
-        ],
-        order: [[4, "desc"]],
-        processing: true,
-        stateSave: true,
-        stateDuration: 0,
-        filterDropDown: {
-            columns: [
-                {
-                    idx: 2,
-                },
-                {
-                    idx: 3,
-                },
-            ],
-            bootstrap: true,
-            bootstrap_version: 5,
-        },
-    });
-
-    $("#table-mumble-connection-stats").DataTable({
-        ajax: {
-            url: "{% url 'mumble:release_counts_data' %}",
-            dataSrc: "release_counts_data",
-        },
-        columns: [{ data: "release" }, { data: "user_count" }],
-        order: [[1, "desc"]],
-        processing: true,
-        stateSave: true,
-        stateDuration: 0,
-    });
-
-    // Initialize empty Pie chart
-    var ctx = document.getElementById("pieChart").getContext("2d");
-    var pieChart = new Chart(ctx, {
-        type: "pie",
-        data: {
-            labels: [], // Initially empty
-            datasets: [
-                {
-                    label: "Server Connection Breakdown",
-                    data: [], // Initially empty
-                    backgroundColor: [
-                        "rgba(255, 99, 132, 0.2)",
-                        "rgba(54, 162, 235, 0.2)",
-                        "rgba(255, 206, 86, 0.2)",
-                    ],
-                    borderColor: [
-                        "rgba(255, 99, 132, 1)",
-                        "rgba(54, 162, 235, 1)",
-                        "rgba(255, 206, 86, 1)",
-                    ],
-                    borderWidth: 1,
-                },
-            ],
-        },
-        options: {
-            responsive: true,
-            plugins: {
-                legend: {
-                    position: "top",
-                },
-            },
-        },
-    });
-
-    // AJAX call to dynamically update the chart
-    $.ajax({
-        url: "{% url 'mumble:release_pie_chart_data' %}", // Your Django view URL that returns chart data
-        method: "GET",
-        success: function (data) {
-            // Replace chart data with the data from the AJAX response
-            pieChart.data.labels = data.labels; // Set the new labels
-            pieChart.data.datasets[0].data = data.values; // Set the new values
-
-            // Update the chart to reflect the new data
-            pieChart.update();
-        },
-        error: function (xhr, status, error) {
-            console.error("Error fetching pie chart data:", status, error);
-        },
-    });
-});
-
-{% endblock extra_script %}