diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 501a9bf7..4310ec72 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -442,6 +442,11 @@ select {
   --indicator-color: var(--color-worker-status-offline);
 }
 
+[class^='worker-status'] {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
+
 .status-archiving,
 .status-active,
 .status-queued,
diff --git a/web/app/src/statusindicator.js b/web/app/src/statusindicator.js
index 6f2d4a91..39cfb816 100644
--- a/web/app/src/statusindicator.js
+++ b/web/app/src/statusindicator.js
@@ -26,7 +26,7 @@ export function indicator(status, classNamePrefix) {
  */
 export function workerStatus(worker) {
   if (!worker.status_change) {
-    return `${worker.status}`;
+    return `<span class="worker-status-${worker.status}">${worker.status}</span>`;
   }
 
   let arrow;
@@ -36,5 +36,7 @@ export function workerStatus(worker) {
     arrow = `<span class='state-transition-arrow forced' title='forced status transition'>➜</span>`
   }
 
-  return `${worker.status} ${arrow} ${worker.status_change.status}`;
+  return `<span class="worker-status-${worker.status}">${worker.status}</span>
+          ${arrow}
+          <span class="worker-status-${worker.status_change.status}">${worker.status_change.status}</span>`;
 }