diff --git a/app/views/jobs/_job_tr.html.erb b/app/views/jobs/_job_tr.html.erb
index 6387733..9b12c84 100644
--- a/app/views/jobs/_job_tr.html.erb
+++ b/app/views/jobs/_job_tr.html.erb
@@ -1,27 +1,18 @@
 <tr id="<%= dom_id job %>" class="<%= cycle('bg-gray-50','bg-gray-100') %> ">
-  <td class="p-3 text-sm text-hsrm-gray whitespace-nowrap"> <%= job.id %> </td>
+  <td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
+    <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-status-<%= job.status %> bg-status-<%= job.status %>-light rounded-lg"><%= job.id %></span>
+  </td>
   <td class="p-3 text-sm text-hsrm-gray whitespace-nowrap"> <%= job.fullname %> </td>
   <td class="p-3 text-sm text-hsrm-gray whitespace-nowrap">
     <% if job.pdf.attached? %>
       <%= job.pdf.filename %><span class="p-1.5 bg-gray-300 font-medium rounded-lg ml-2"><%=number_to_human_size job.pdf.blob.byte_size%></span>
     <% end %>
   </td>
-  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"> <%= job.number_of_plans_a0 %></span> </td>
-  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a1 %></span> </td>
-  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a2 %> </span></td>
-  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a3 %></span> </td>
+  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a0 %></span></td>
+  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a1 %></span></td>
+  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a2 %></span></td>
+  <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap"><span class="p-1.5 bg-gray-300 bg-opacity-50 font-medium rounded-lg"><%= job.number_of_plans_a3 %></span></td>
   <td class="p-3 text-sm text-left text-hsrm-gray whitespace-nowrap">
-    <% case job.status.to_sym %>
-    <% when :open %>
-      <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-gray-900 bg-gray-300 rounded-lg"> <%= job.status %> </span>
-    <% when :printing %>
-      <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-yellow-900 bg-yellow-300 rounded-lg"> <%= job.status %> </span>
-    <% when :ready_for_pickup %>
-      <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-lime-900 bg-lime-300 rounded-lg"> <%= job.status %> </span>
-    <% when :paid %>
-      <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-green-900 bg-green-300 rounded-lg"> <%= job.status %> </span>
-    <% when :canceled %>
-      <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-red-900 bg-red-300 rounded-lg"> <%= job.status %> </span>
-    <% end %>
+    <span class="p-1.5 text-xs font-medium uppercase tracking-wider bg-opacity-50 text-status-<%= job.status.to_sym %> bg-status-<%= job.status %>-light rounded-lg"><%= job.status %></span>
   </td>
 </tr>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index e42b89f..c8f31b7 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -20,9 +20,31 @@ module.exports = {
         "hsrm-red-light": "#e20009",
         "hsrm-gray": "#3a3a3a",
         "hsrm-gray-dark": "#212121",
+        "status-open": "#111827", // gray-900
+        "status-open-light": "#d1d5db", // gray-300
+        "status-printing": "#713f12", // yellow-900
+        "status-printing-light": "#fde047", // yellow-300
+        "status-ready_for_pickup": "#365314", // lime-900
+        "status-ready_for_pickup-light": "#bef264", // lime-300
+        "status-paid": "#14532d", // green-900
+        "status-paid-light": "#86efac", // green-300
+        "status-canceled": "#7f1d1d", // red-900
+        "status-canceled-light": "#fca5a5", // red-300
       },
     },
   },
+  safelist: [
+    "text-status-open",
+    "bg-status-open-light",
+    "text-status-printing",
+    "bg-status-printing-light",
+    "text-status-ready_for_pickup",
+    "bg-status-ready_for_pickup-light",
+    "text-status-paid",
+    "bg-status-paid-light",
+    "text-status-canceled",
+    "bg-status-canceled-light",
+  ],
   plugins: [
     require("@tailwindcss/forms"),
     require("@tailwindcss/typography"),