diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css
index 1043755ab..6e6f1d43e 100644
--- a/web/ui/react-app/src/App.css
+++ b/web/ui/react-app/src/App.css
@@ -1,5 +1,5 @@
 .panel {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 input[type='checkbox']:checked + label {
@@ -8,219 +8,232 @@ input[type='checkbox']:checked + label {
 
 .custom-control-label {
   cursor: pointer;
-  font-size: .875rem;
-  line-height: 1.8;
+}
+
+.togglers-wrapper .form-group {
+  margin-bottom: 0.5rem;
+}
+
+[for$='-toggler'].custom-control-label::before,
+[for$='-toggler'].custom-control-label::after {
+  top: 0.28rem;
+  left: -1.3rem;
+  width: 1.12rem;
+  height: 1.12rem;
 }
 
 .capitalize-title::first-letter {
-    text-transform: capitalize;
+  text-transform: capitalize;
 }
 
 .expression-input {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .expression-input textarea {
-    /* font-family: Menlo,Monaco,Consolas,'Courier New',monospace; */
-    resize: none;
-    overflow: hidden;
+  /* font-family: Menlo,Monaco,Consolas,'Courier New',monospace; */
+  resize: none;
+  overflow: hidden;
 }
 
 button.execute-btn {
-    width: 84px;
+  width: 84px;
 }
 
 .alert.alert-danger {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 .nav-tabs .nav-link {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .tab-content {
-    border-left: 1px solid #dee2e6;
-    border-right: 1px solid #dee2e6;
-    border-bottom: 1px solid #dee2e6;
-    padding: 10px;
+  border-left: 1px solid #dee2e6;
+  border-right: 1px solid #dee2e6;
+  border-bottom: 1px solid #dee2e6;
+  padding: 10px;
 }
 
 .tab-content .alert {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 
 .data-table.table {
-   margin: 10px 0 2px 0;
+  margin: 10px 0 2px 0;
 }
 
 .data-table > tbody > tr > td {
-    padding: 5px 0 5px 8px;
-    font-size: 0.8em;
-    overflow: hidden;
+  padding: 5px 0 5px 8px;
+  font-size: 0.8em;
+  overflow: hidden;
 }
 
 .autosuggest-dropdown {
-    position: absolute;
-    border: 1px solid #ced4da;
-    background-color: #fff;
-    color: #495057;
-    font-size: 1rem;
-    z-index: 1000;
-    left: 56px;
-    margin-top: -6px;
+  position: absolute;
+  border: 1px solid #ced4da;
+  background-color: #fff;
+  color: #495057;
+  font-size: 1rem;
+  z-index: 1000;
+  left: 56px;
+  margin-top: -6px;
 }
 
 .autosuggest-dropdown-list {
-    padding: 0;
-    margin: 0;
-    list-style: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 .autosuggest-dropdown-list li {
-    width: 100%;
-    padding: .25rem 1.5rem;
-    clear: both;
-    white-space: nowrap;
-    background-color: transparent;
-    border: 0;
-    display: block;
+  width: 100%;
+  padding: 0.25rem 1.5rem;
+  clear: both;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  display: block;
 }
 
 .autosuggest-dropdown-list li.autosuggest-dropdown-header {
-    background-color: #bfdeff;
-    font-size: 10px;
-    line-height: 1.5;
-    text-transform: uppercase;
-    text-align: center;
+  background-color: #bfdeff;
+  font-size: 10px;
+  line-height: 1.5;
+  text-transform: uppercase;
+  text-align: center;
 }
 
-.graph-controls, .table-controls {
-    margin-bottom: 10px;
+.graph-controls,
+.table-controls {
+  margin-bottom: 10px;
 }
 
-.graph-controls input, .table-controls input {
-    text-align: center;
+.graph-controls input,
+.table-controls input {
+  text-align: center;
 }
 
 .graph-controls .range-input input {
-    width: 50px;
+  width: 50px;
 }
 
 .time-input input {
-    border-right: none;
+  border-right: none;
 }
 
 .time-input {
-    width: 270px !important;
+  width: 270px !important;
 }
 
 .graph-controls input.resolution-input {
-    width: 90px;
+  width: 90px;
 }
 
 .graph-controls > :not(:first-child) {
-    margin-left: 20px;
+  margin-left: 20px;
 }
 
-    .graph-controls .clear-time-btn, .table-controls .clear-time-btn {
-    background: #fff;
-    border-left: none;
-    border-top: 1px solid #ced4da;
-    border-bottom: 1px solid #ced4da;
-    color: #495057;
+.graph-controls .clear-time-btn,
+.table-controls .clear-time-btn {
+  background: #fff;
+  border-left: none;
+  border-top: 1px solid #ced4da;
+  border-bottom: 1px solid #ced4da;
+  color: #495057;
 }
 
 .graph-legend {
-    margin: 15px 0 15px 55px;
-    font-size: 0.75em;
-    padding: 10px 5px;
-    display: inline-block;
+  margin: 15px 0 15px 55px;
+  font-size: 0.75em;
+  padding: 10px 5px;
+  display: inline-block;
 }
 
 .legend-item {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 0 5px;
-    border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  border-radius: 3px;
 }
 
 .legend-swatch {
-    width: 7px;
-    height: 7px;
-    outline-offset: 1px;
-    outline: 1.5px solid #ccc;
-    margin: 2px 8px 2px 0;
-    display: inline-block;
+  width: 7px;
+  height: 7px;
+  outline-offset: 1px;
+  outline: 1.5px solid #ccc;
+  margin: 2px 8px 2px 0;
+  display: inline-block;
 }
 
 .legend-item:hover {
-    background: rgba(0, 0, 0, 0.18);
+  background: rgba(0, 0, 0, 0.18);
 }
 
 .legend-metric-name {
-    margin-right: 1px;
+  margin-right: 1px;
 }
 
 .legend-label-name {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 .graph {
-    margin: 0 5px 0 5px;
+  margin: 0 5px 0 5px;
 }
 
 .graph-chart {
-    height: 500px;
-    width: 100%;
-    /* This is picked up by Flot's axis label font renderer,
+  height: 500px;
+  width: 100%;
+  /* This is picked up by Flot's axis label font renderer,
       which ignores "color" and uses "fill" instead. */
-    fill: #495057;
-    font-size: 0.8em;
+  fill: #495057;
+  font-size: 0.8em;
 }
 
 .graph-chart .flot-overlay {
-    cursor: crosshair;
+  cursor: crosshair;
 }
 
 .graph-tooltip {
-    background: rgba(0,0,0,.8);
-    color: #fff;
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: 12px;
-    white-space: nowrap;
-    padding: 8px;
-    border-radius: 3px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  white-space: nowrap;
+  padding: 8px;
+  border-radius: 3px;
 }
 
 .graph-tooltip .labels {
-    font-size: 11px;
-    line-height: 11px;
-  }
+  font-size: 11px;
+  line-height: 11px;
+}
 
 .graph-tooltip .detail-swatch {
-    display: inline-block;
-    width: 10px;
-    height: 10px;
+  display: inline-block;
+  width: 10px;
+  height: 10px;
 }
 
 .add-panel-btn {
-    margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 
 .target-head {
-    font-weight: 700;
-    font-size: large;
+  font-weight: 700;
+  font-size: large;
 }
 
 .status-badges {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  padding: 10px;
 }
 
 .badges-wrapper > span {
-    margin-right: 5px;
-    max-height: 20px;
+  margin-right: 5px;
+  max-height: 20px;
 }
diff --git a/web/ui/react-app/src/pages/alerts/AlertContents.tsx b/web/ui/react-app/src/pages/alerts/AlertContents.tsx
index 76c611d0b..dc38ebc04 100644
--- a/web/ui/react-app/src/pages/alerts/AlertContents.tsx
+++ b/web/ui/react-app/src/pages/alerts/AlertContents.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState, Fragment } from 'react';
-import { ButtonGroup, Button, Row, Badge } from 'reactstrap';
+import { Badge } from 'reactstrap';
 import CollapsibleAlertPanel from './CollapsibleAlertPanel';
 import Checkbox from '../../Checkbox';
 import { isPresent } from '../../utils/func';
@@ -44,6 +44,12 @@ interface RuleGroup {
   interval: number;
 }
 
+const stateColorTuples: Array<[RuleState, 'success' | 'warning' | 'danger']> = [
+  ['inactive', 'success'],
+  ['pending', 'warning'],
+  ['firing', 'danger'],
+];
+
 const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
   const [state, setState] = useState<RuleStatus<boolean>>({
     firing: true,
@@ -61,26 +67,24 @@ const AlertsContent: FC<AlertsProps> = ({ groups = [], statsCount }) => {
 
   return (
     <>
-      <ButtonGroup className="mb-3">
-        <Button active={state.inactive} onClick={toggle('inactive')} color="primary">
-          Inactive ({statsCount.inactive})
-        </Button>
-        <Button active={state.pending} onClick={toggle('pending')} color="primary">
-          Pending ({statsCount.pending})
-        </Button>
-        <Button active={state.firing} onClick={toggle('firing')} color="primary">
-          Firing ({statsCount.firing})
-        </Button>
-      </ButtonGroup>
-      <Row className="mb-2">
+      <div className="d-flex togglers-wrapper">
+        {stateColorTuples.map(([state, color]) => {
+          return (
+            <Checkbox wrapperStyles={{ marginRight: 10 }} defaultChecked id={`${state}-toggler`} onClick={toggle(state)}>
+              <Badge color={color} className="text-capitalize">
+                {state} ({statsCount[state]})
+              </Badge>
+            </Checkbox>
+          );
+        })}
         <Checkbox
-          id="show-annotations"
-          wrapperStyles={{ margin: '0 0 0 15px', alignSelf: 'center' }}
+          wrapperStyles={{ marginLeft: 'auto' }}
+          id="show-annotations-toggler"
           onClick={() => setShowAnnotations(!showAnnotations)}
         >
-          Show annotations
+          <span style={{ fontSize: '0.9rem', lineHeight: 1.9 }}>Show annotations</span>
         </Checkbox>
-      </Row>
+      </div>
       {groups.map((group, i) => {
         return (
           <Fragment key={i}>