diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index 98e678a68..ad133821e 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -17,7 +17,7 @@
             >
                 <div
                     class="beat"
-                    :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
+                    :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === DOWN), 'pending': (beat.status === PENDING), 'maintenance': (beat.status === MAINTENANCE) }"
                     :style="beatStyle"
                 />
             </div>
@@ -44,6 +44,7 @@
 
 <script>
 import dayjs from "dayjs";
+import { DOWN, UP, PENDING, MAINTENANCE } from "../util.ts";
 import Tooltip from "./Tooltip.vue";
 
 export default {
@@ -362,18 +363,18 @@ export default {
          * @returns {string} Aria label
          */
         getBeatAriaLabel(beat) {
-            if (beat === 0 || !beat) {
-                return "No data";
+            switch (beat?.status) {
+                case DOWN:
+                    return `Down at ${this.$root.datetime(beat.time)}`;
+                case UP:
+                    return `Up at ${this.$root.datetime(beat.time)}`;
+                case PENDING:
+                    return `Pending at ${this.$root.datetime(beat.time)}`;
+                case MAINTENANCE:
+                    return `Maintenance at ${this.$root.datetime(beat.time)}`;
+                default:
+                    return "No data";
             }
-
-            const statusText = {
-                0: "Down",
-                1: "Up",
-                2: "Pending",
-                3: "Maintenance"
-            }[beat.status] || "Unknown";
-
-            return `${statusText} at ${this.$root.datetime(beat.time)}`;
         },
 
         /**
diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 81531ff62..bf3aa4f51 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -66,13 +66,18 @@ export default {
                 return this.$t("Unknown");
             }
 
-            const statusMap = {
-                0: this.$t("Down"),
-                1: this.$t("Up"),
-                2: this.$t("Pending"),
-                3: this.$t("Maintenance")
-            };
-            return statusMap[this.content.status] || this.$t("Unknown");
+            switch (this.content.status) {
+                case 0:
+                    return this.$t("Down");
+                case 1:
+                    return this.$t("Up");
+                case 2:
+                    return this.$t("Pending");
+                case 3:
+                    return this.$t("Maintenance");
+                default:
+                    return this.$t("Unknown");
+            }
         },
 
         statusClass() {
@@ -119,7 +124,7 @@ export default {
         text-align: center;
 
         .tooltip-status {
-            font-size: 12px;
+            font-size: 16px;
             font-weight: 600;
             margin-bottom: 4px;
             text-transform: uppercase;
@@ -172,12 +177,12 @@ export default {
 
         // Default: tooltip below element, arrow points up
         border-bottom: 6px solid rgba(17, 24, 39, 0.95);
-        top: -6px;
+        top: -5px;
 
         &.arrow-above {
             // Tooltip above element, arrow points down
             top: auto;
-            bottom: -6px;
+            bottom: -5px;
             border-bottom: none;
             border-top: 6px solid rgba(17, 24, 39, 0.95);
         }
@@ -200,9 +205,11 @@ export default {
 
     .tooltip-arrow {
         border-bottom-color: rgba(31, 41, 55, 0.95);
+        top: -5px;
 
         &.arrow-above {
             border-top-color: rgba(31, 41, 55, 0.95);
+            bottom: -5px;
         }
     }
 }