diff --git a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
index d87242fe6..1166f3198 100644
--- a/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.js.snap
@@ -20,7 +20,7 @@ exports[`<MountedLabelWithPercent /> matches snapshot 1`] = `
     </span>
   </span>
   <div class=\\"progress silence-progress bg-white pr-1\\">
-    <div class=\\"progress-bar bg-success\\"
+    <div class=\\"progress-bar bg-warning\\"
          role=\\"progressbar\\"
          style=\\"width: 50%;\\"
          aria-valuenow=\\"50\\"
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
index c4f135e95..24a42b958 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -32,7 +32,7 @@ const LabelWithPercent = inject("alertStore")(
         const progressBarBg =
           percent > 66
             ? "bg-danger"
-            : percent > 66
+            : percent > 33
             ? "bg-warning"
             : "bg-success";
 
diff --git a/ui/src/Components/Labels/LabelWithPercent/index.test.js b/ui/src/Components/Labels/LabelWithPercent/index.test.js
index 8d2a8e18f..9cbac15c9 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.test.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.test.js
@@ -60,4 +60,43 @@ describe("<MountedLabelWithPercent />", () => {
       NewUnappliedFilter("foo!=bar")
     );
   });
+
+  it("uses bg-danger when percent is >66", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={67}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-danger/);
+  });
+
+  it("uses bg-warning when percent is >33", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={66}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-warning/);
+  });
+
+  it("uses bg-success when percent is <=33", () => {
+    const tree = mount(
+      <LabelWithPercent
+        alertStore={alertStore}
+        name={"foo"}
+        value={"bar"}
+        hits={25}
+        percent={33}
+      />
+    );
+    expect(tree.html()).toMatch(/progress-bar bg-success/);
+  });
 });
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index c1647fe93..e3b8fdc7b 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -52,7 +52,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                 </span>
               </span>
               <div class=\\"progress silence-progress bg-white pr-1\\">
-                <div class=\\"progress-bar bg-success\\"
+                <div class=\\"progress-bar bg-warning\\"
                      role=\\"progressbar\\"
                      style=\\"width: 50%;\\"
                      aria-valuenow=\\"50\\"