diff --git a/alerts/player.py b/alerts/player.py
index 45184c1..ff1b437 100644
--- a/alerts/player.py
+++ b/alerts/player.py
@@ -5,6 +5,7 @@ from datetime import datetime, timedelta
 from helpers.os_environment import resolve_external_file_path
 from helpers.alert_manager import AlertProvider
 from baps_types.alert import CRITICAL, WARNING, Alert
+from baps_types.happytime import happytime
 
 MODULE = "Player" # This should match the log file, so the UI will link to the logs page.
 
@@ -86,7 +87,7 @@ class PlayerAlertProvider(AlertProvider):
 This likely means there was an unhandled exception in the player code, causing the server to restart the player.
 
 Please check player logs to investigate the cause. Please restart the server to clear this warning."""
-          .format(channel, str(start_time).rsplit(".",1)[0], str(server_start_time).rsplit(".",1)[0]),
+          .format(channel, happytime(start_time), happytime(server_start_time)),
           "module": MODULE+str(channel),
           "severity": WARNING
         }))
diff --git a/alerts/server.py b/alerts/server.py
index 7b56151..375f87d 100644
--- a/alerts/server.py
+++ b/alerts/server.py
@@ -5,6 +5,7 @@ from datetime import datetime, timedelta
 from helpers.os_environment import resolve_external_file_path
 from helpers.alert_manager import AlertProvider
 from baps_types.alert import CRITICAL, WARNING, Alert
+from baps_types.happytime import happytime
 
 MODULE = "BAPSicleServer" # This should match the log file, so the UI will link to the logs page.
 
@@ -66,7 +67,7 @@ class ServerAlertProvider(AlertProvider):
 It may have been automatically restarted by the OS.
 
 If this is not expected, please check logs to investigate why BAPSicle restarted/crashed."""
-        .format(str(start_time).rsplit(".",1)[0]),
+        .format(happytime(start_time)),
         "module": MODULE,
         "severity": WARNING
       })]
diff --git a/baps_types/happytime.py b/baps_types/happytime.py
new file mode 100644
index 0000000..898730e
--- /dev/null
+++ b/baps_types/happytime.py
@@ -0,0 +1,3 @@
+from datetime import datetime
+def happytime(date: datetime):
+    return date.strftime("%Y-%m-%d %H:%M:%S")
diff --git a/ui-templates/alerts.html b/ui-templates/alerts.html
index 36e5fdd..c90fd60 100644
--- a/ui-templates/alerts.html
+++ b/ui-templates/alerts.html
@@ -5,14 +5,10 @@
 {% endblock %}
 {% block content_inner %}
   {% if data %}
-  <h2>Current Alerts: {{ data.alert_count_current }}</h2>
-  <div class="accordion" id="accordionExample">
-    {{ alert_list(data.alerts_current) }}
-  </div>
+  <h3 class="h4">Current Alerts: {{ data.alerts_current | length }}</h3>
+  {{ alert_list(data.alerts_current) }}
   <hr>
-  <h2>Previous Alerts: {{ data.alert_count_previous }}</h2>
-  <div class="accordion" id="accordionExample">
-    {{ alert_list(data.alerts_previous) }}
-  </div>
+  <h3 class="h4">Previous Alerts: {{ data.alerts_previous | length }}</h3>
+  {{ alert_list(data.alerts_previous) }}
   {% endif %}
 {% endblock %}
diff --git a/ui-templates/parts/alert_list.html b/ui-templates/parts/alert_list.html
index 6c8ae48..c559d18 100644
--- a/ui-templates/parts/alert_list.html
+++ b/ui-templates/parts/alert_list.html
@@ -2,21 +2,17 @@
   {% for alert in alerts %}
   <div class="card alert-{{ alert.ui_class }}">
     <div class="card-header" id="headingOne">
-      <h2 class="mb-0">
-        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-          {{ alert.title }}
-        </button>
-        <span class="badge badge-{{ alert.ui_class}}">{{ alert.severity }}</span>
-      </h2>
-      <span class="badge">Since {{ alert.start_time }}</span>
-      <span class="badge">Last Seen {{ alert.last_time }}</span>
+      <span class="badge badge-{{ alert.ui_class}}">{{ alert.severity }}</span>
+      <h4 class="h5 mb-0 mt-1">{{ alert.title }}</h4>
+      <span class="badge badge-primary">Since {{ alert.start_time | happytime }}</span>
+      <span class="badge badge-secondary">Last Seen {{ alert.last_time | happytime }}</span>
       {% if alert.end_time %}
-      <span class="badge">Ended {{ alert.end_time }}</span>
+      <span class="badge badge-success">Ended {{ alert.end_time | happytime }}</span>
       {% endif %}
     </div>
 
     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
-      <div class="card-body">
+      <div class="card-body pb-0">
         <strong>Module: </strong><a href="/logs/{{ alert.module }}" title="Click for logs">{{ alert.module }}</a>
         {% autoescape false %}
         <p>{{ alert.description | replace("\n\n", "</p><p>") | replace("\n", "<br/>")}}</p>
diff --git a/web_server.py b/web_server.py
index 08252a7..b0187a2 100644
--- a/web_server.py
+++ b/web_server.py
@@ -28,6 +28,7 @@ from helpers.normalisation import get_normalised_filename_if_available
 from helpers.myradio_api import MyRadioAPI
 from helpers.alert_manager import AlertManager
 import package
+from baps_types.happytime import happytime
 
 env = Environment(
     loader=FileSystemLoader("%s/ui-templates/" % os.path.dirname(__file__)),
@@ -95,6 +96,11 @@ def render_template(file, data, status=200):
     return html(html_content, status=status)
 
 
+def _filter_happytime(date):
+    return happytime(date)
+
+env.filters["happytime"] = _filter_happytime
+
 logger: LoggingManager
 server_state: StateManager
 api: MyRadioAPI