diff --git a/static/script.js b/static/script.js
index a9c5d5d..7f82731 100644
--- a/static/script.js
+++ b/static/script.js
@@ -77,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
     function updateStatus(data) {
         const ltcStatus = data.ltc_status || 'UNKNOWN';
         const ltcIconSrc = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default;
-        statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt=""> ${ltcStatus}`;
+        statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt=""><span>${ltcStatus}</span>`;
         statusElements.ltcStatus.className = ltcStatus.toLowerCase();
         statusElements.ltcTimecode.textContent = data.ltc_timecode;
         statusElements.frameRate.textContent = data.frame_rate;
@@ -87,16 +87,16 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const ntpIconSrc = iconMap.ntpActive[data.ntp_active];
         if (data.ntp_active) {
-            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""> Active`;
+            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Active</span>`;
             statusElements.ntpActive.className = 'active';
         } else {
-            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""> Inactive`;
+            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Inactive</span>`;
             statusElements.ntpActive.className = 'inactive';
         }
 
         const syncStatus = data.sync_status || 'UNKNOWN';
         const syncIconSrc = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default;
-        statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt=""> ${syncStatus}`;
+        statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt=""><span>${syncStatus}</span>`;
         statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase();
 
         statusElements.deltaMs.textContent = data.timecode_delta_ms;
@@ -104,7 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
         const jitterStatus = data.jitter_status || 'UNKNOWN';
         const jitterIconSrc = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;
-        statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt=""> ${jitterStatus}`;
+        statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt=""><span>${jitterStatus}</span>`;
         statusElements.jitterStatus.className = jitterStatus.toLowerCase();
 
         statusElements.interfaces.innerHTML = '';
diff --git a/static/style.css b/static/style.css
index 802cb53..638b554 100644
--- a/static/style.css
+++ b/static/style.css
@@ -99,10 +99,15 @@ button:hover {
     color: #555;
 }
 
+#ltc-status, #ntp-active, #sync-status, #jitter-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
 .status-icon {
-    height: 1em;
-    vertical-align: middle;
-    margin-right: 0.5em;
+    width: 60px;
+    height: 60px;
 }
 
 /* Status-specific colors */