diff --git a/app/portal/static/portal.css b/app/portal/static/portal.css
index 6fa0e80..3c38233 100644
--- a/app/portal/static/portal.css
+++ b/app/portal/static/portal.css
@@ -101,6 +101,10 @@ body {
     box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
 
+.bg-onion {
+    background-color: #7d4698;
+}
+
 .btn-onion {
     background-color: #7d4698;
     border-color: #7d4698;
diff --git a/app/portal/templates/home.html.j2 b/app/portal/templates/home.html.j2
index e265c29..5ad6c30 100644
--- a/app/portal/templates/home.html.j2
+++ b/app/portal/templates/home.html.j2
@@ -55,7 +55,7 @@
                     <h5 class="card-title">Onionification progress:</h5>
                     <p class="card-text"><span class="display-1">{{ onionified }}</span>/{{ total_origins }}</p>
                     <div class="progress">
-                        <div class="progress-bar" role="progressbar"
+                        <div class="progress-bar bg-onion" role="progressbar"
                              style="width: {{ onionified / total_origins * 100 }}%"
                              aria-valuenow="{{ onionified / total_origins * 100 }}" aria-valuemin="0"
                              aria-valuemax="100">{{ (onionified / total_origins * 100) | int }}%
@@ -72,7 +72,7 @@
                     <h5 class="card-title">Origins with censorship detected:</h5>
                     <p class="card-text"><span class="display-1">{{ ooni_blocked }}</span>/{{ total_origins }}</p>
                     <div class="progress">
-                        <div class="progress-bar" role="progressbar"
+                        <div class="progress-bar bg-danger" role="progressbar"
                              style="width: {{ ooni_blocked / total_origins * 100 }}%"
                              aria-valuenow="{{ ooni_blocked / total_origins * 100 }}" aria-valuemin="0"
                              aria-valuemax="100">{{ (ooni_blocked / total_origins * 100) | int }}%