diff --git a/vzdv-site/src/endpoints/homepage.rs b/vzdv-site/src/endpoints/homepage.rs
index 447ef67..4d97605 100644
--- a/vzdv-site/src/endpoints/homepage.rs
+++ b/vzdv-site/src/endpoints/homepage.rs
@@ -11,7 +11,7 @@ use itertools::Itertools;
 use log::warn;
 use minijinja::context;
 use serde::Serialize;
-use std::{sync::Arc, time::Instant};
+use std::{collections::HashMap, sync::Arc, time::Instant};
 use tower_sessions::Session;
 use vatsim_utils::live_api::Vatsim;
 use vzdv::{
@@ -52,6 +52,9 @@ async fn snippet_online_controllers(
         badge_content: &'static str,
     }
 
+    let order_map: HashMap<&'static str, u8> =
+        HashMap::from([("CTR", 0), ("APP", 1), ("TWR", 2), ("GND", 3), ("?", 4)]);
+
     // cache this endpoint's returned data for 30 seconds
     let cache_key = "ONLINE_CONTROLLERS".to_string();
     if let Some(cached) = state.cache.get(&cache_key) {
@@ -85,6 +88,12 @@ async fn snippet_online_controllers(
                 badge_content,
             }
         })
+        .sorted_by(|a, b| {
+            Ord::cmp(
+                order_map.get(a.badge_content).unwrap(),
+                order_map.get(b.badge_content).unwrap(),
+            )
+        })
         .collect();
     let template = state
         .templates
diff --git a/vzdv-site/templates/events/upcoming_events_snippet.jinja b/vzdv-site/templates/events/upcoming_events_snippet.jinja
index fcea440..02e3f3a 100644
--- a/vzdv-site/templates/events/upcoming_events_snippet.jinja
+++ b/vzdv-site/templates/events/upcoming_events_snippet.jinja
@@ -2,7 +2,7 @@
   No upcoming events
 {% else %}
   {% for event in events %}
-    <div class="pb-5">
+    <div class="pb-4">
       <h4 class="mb-1">
         <a href="/events/{{ event.id }}" class="icon-link icon-link-hover text-decoration-none">
           {{ event.name }}
diff --git a/vzdv-site/templates/homepage/home.jinja b/vzdv-site/templates/homepage/home.jinja
index ac70ea3..ad61ea5 100644
--- a/vzdv-site/templates/homepage/home.jinja
+++ b/vzdv-site/templates/homepage/home.jinja
@@ -13,7 +13,7 @@
 
 <script>
   function onlineButtonRegister() {
-    document.getElementById('btn-online').addEventListener('click', () => {
+    document.getElementById('btn-online')?.addEventListener('click', () => {
       const table = document.querySelector('#online > table');
       if (table.style.display === 'none') {
         table.style.display = 'table';
@@ -32,50 +32,42 @@
 
 <div class="row">
   <div class="col-12 col-lg-9">
-    <p>
+    <p class="pb-2">
       The Denver ARTCC covers approximately 285,000 square miles of airspace over all or part of the states of Colorado, Arizona, New Mexico, Utah,
       Kansas, Nebraska, South Dakota, Wyoming, and Montana.
     </p>
-    <div class="card shadow mb-2">
-      <div class="card-body">
-        <div
-          id="online"
-          hx-get="/home/online/controllers"
-          hx-on::after-request="onlineButtonRegister()"
-          hx-trigger="load, every 1m"></div>
-      </div>
+    <div class="mb-5">
+      <div
+        id="online"
+        hx-get="/home/online/controllers"
+        hx-on::after-request="onlineButtonRegister()"
+        hx-trigger="load, every 1m"></div>
     </div>
-    <div class="card shadow mb-2">
+    <div class="mb-2">
       <div class="card-body">
         {% include 'events/upcoming_events_snippet.jinja' %}
       </div>
     </div>
   </div>
   <div class="col">
-    <div class="card shadow">
-      <div class="card-body">
+    <div class="border-start border-secondary-subtle pb-1">
+      <div class="ps-3">
         <div
           id="weather"
           hx-get="/home/weather"
           hx-trigger="load, every 5m"></div>
-      </div>
-    </div>
-    <div class="card shadow mt-2">
-      <div class="card-body">
-        <div
-          id="flights"
-          hx-get="/home/online/flights"
-          hx-trigger="load, every 1m"></div>
-      </div>
-    </div>
-    <div class="card shadow mt-2">
-      <div class="card-body">
-        <div
-          id="cotm"
-          hx-get="/home/cotm"
-          hx-trigger="load, every 1m"
-        >
-          <p>Loading ...</p>
+        <div class="mt-5">
+          <div
+            id="flights"
+            hx-get="/home/online/flights"
+            hx-trigger="load, every 1m"></div>
+        </div>
+        <div class="mt-5">
+          <div
+            id="cotm"
+            hx-get="/home/cotm"
+            hx-trigger="load, every 1m"
+          ></div>
         </div>
       </div>
     </div>
diff --git a/vzdv-site/templates/homepage/online_controllers.jinja b/vzdv-site/templates/homepage/online_controllers.jinja
index 7cffc8e..ccbaf77 100644
--- a/vzdv-site/templates/homepage/online_controllers.jinja
+++ b/vzdv-site/templates/homepage/online_controllers.jinja
@@ -26,5 +26,5 @@
     </tbody>
   </table>
 {% else %}
-  <h5>No controllers online</h5>
+  <h5 class="mb-2">No controllers online</h5>
 {% endif %}