diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss
index 9527ad45..63a45606 100644
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@@ -60,6 +60,18 @@
     }
   }
 
+  .label--pending {
+    background-color: $color-gold;
+  }
+
+  .label--active {
+    background-color: $color-green;
+  }
+
+  .label--expired {
+    background-color: $color-red;
+  }
+
   .task-order-heading {
     align-items: center;
     justify-content: space-between;
diff --git a/templates/portfolios/task_orders/show.html b/templates/portfolios/task_orders/show.html
index 1177df86..28212db0 100644
--- a/templates/portfolios/task_orders/show.html
+++ b/templates/portfolios/task_orders/show.html
@@ -63,7 +63,7 @@
   <div class="panel task-order-heading row">
     <div class="panel__content task-order-heading__name row">
       <h2>New Task Order</h2>
-      <span class="label label--{{ 'warning' if task_order.is_pending }}">{{ task_order.status.value }}</span>
+      <span class="label label--{{ task_order.status.value.lower() }}">{{ task_order.status.value }}</span>
     </div>
     <div class="task_order-heading__details row">
       <div class="task-order-heading__value col">