diff --git a/html/template/sync/pool-by-id.html b/html/template/sync/pool-by-id.html
index e5688145..15d26624 100644
--- a/html/template/sync/pool-by-id.html
+++ b/html/template/sync/pool-by-id.html
@@ -198,7 +198,11 @@ document.addEventListener('DOMContentLoaded', onLoad);
 													>
 												</td>
 											{{ end }}
-											<td>{{ .Condition }}</td>
+											<td>
+												<span class="badge bg-{{ .Condition }} status-badge"
+													>{{ .Condition }}</span
+												>
+											</td>
 											<td>{{ len .Tags }}</td>
 										</tr>
 									{{ end }}
diff --git a/scss/sync/pool-by-id.scss b/scss/sync/pool-by-id.scss
index f113fd1b..31222409 100644
--- a/scss/sync/pool-by-id.scss
+++ b/scss/sync/pool-by-id.scss
@@ -1,4 +1,15 @@
-
+.bg-empty {
+	background-color: #9C9BC0;
+}
+.bg-green {
+	background-color: #7AAB5F;
+}
+.bg-murky {
+	background-color: #D2E3CA;
+}
+.bg-unknown {
+	background-color: #F7CBA1;
+}
 .summary-card {
 	transition: transform 0.2s;
 }