diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 74efef2d..9ced29ce 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -27,7 +27,7 @@
           <dd>{{ jobData.name }}</dd>
 
           <dt class="field-status" title="Status">Status</dt>
-          <dd>{{ jobData.status }}</dd>
+          <dd class="field-status-label" :class="'status-' + jobData.status">{{ jobData.status }}</dd>
 
           <dt class="field-type" title="Type">Type</dt>
           <dd>{{ jobType ? jobType.label : jobData.type }}</dd>
@@ -46,7 +46,6 @@
         </dl>
       </TabItem>
     </TabsWrapper>
-
   </template>
 
   <div v-else class="details-no-item-selected">
@@ -208,4 +207,9 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.field-status-label {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
 </style>
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index 9390786b..e32c5f1e 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -10,7 +10,7 @@
       <dd>{{ taskData.name }}</dd>
 
       <dt class="field-status" title="Status">Status</dt>
-      <dd>{{ taskData.status }}</dd>
+      <dd class="field-status-label" :class="'status-' + taskData.status">{{ taskData.status }}</dd>
 
       <dt class="field-worker" title="Assigned To">Assigned To</dt>
       <dd><worker-link :worker="taskData.worker" /></dd>
@@ -91,4 +91,9 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.field-status-label {
+  color: var(--indicator-color);
+  font-weight: bold;
+}
 </style>