diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1e4c61c..ba59ee2 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -173,4 +173,20 @@ nav {
   align-items: center;
   text-align: left;
 }
+
+.MetricOrange {
+  background-color: #F8CBAD;
+}
+
+.MetricBlue {
+  background-color: #BDD6EE;
+}
+
+.MetricGreen {
+  background-color: #C6E0B4;
+}
+
+.MetricYellow {
+  background-color: #FFE698;
+}
 </style>
diff --git a/frontend/src/components/PoolStats.vue b/frontend/src/components/PoolStats.vue
index 13b9999..3f853a8 100644
--- a/frontend/src/components/PoolStats.vue
+++ b/frontend/src/components/PoolStats.vue
@@ -35,7 +35,7 @@ const active = ref([])
           <td>{{ library.hifi_num_reads }}</td>
           <td>{{ library.hifi_read_length_mean }}</td>
           <td>{{ library.hifi_bases_percent }}</td>
-          <td>{{ library.percentage_total_reads }}</td>
+          <td class="MetricYellow">{{ library.percentage_total_reads }}</td>
         </tr>
       </table>
     </el-collapse-item>