diff --git a/ui/lib/replication/addon/components/replication-primary-card.js b/ui/lib/replication/addon/components/replication-primary-card.js
index d2d0cc83bf46c08cd72b5a8cf6082af8ea929b46..0cdc96158ab9744fc587dfdcdc1db7577f41663e 100644
--- a/ui/lib/replication/addon/components/replication-primary-card.js
+++ b/ui/lib/replication/addon/components/replication-primary-card.js
@@ -15,7 +15,8 @@ import { computed } from '@ember/object';
  * ```
  * @param {string} [title=null] - The title to be displayed on the top left corner of the card.
  * @param {string} [description=null] - Helper text to describe the metric on the card.
- * @param {object} [glyph=null] - The glyph to display beside the metric.
+ * @param {string} [glyph=null] - The glyph to display beside the metric.
+ * @param {boolean} [hasOkState=true] - Whether or not the cluster is in an okay state. This comes from the cluster model.
  * @param {string} metric=null - The main metric to highlight on the card.
  */
 
@@ -25,11 +26,9 @@ export default Component.extend({
   description: null,
   metric: null,
   glyph: null,
-  hasError: computed('title', 'metric', function() {
-    // TODO: can we make a map somewhere in the cluster that keeps track of all the good and bad states
-    // as well as their glyphs? this could replace the cluster StateDiplay and StateGlyph
-    // TODO: then add tests to ensure we show the correct error msg
-    return this.title === 'State' && this.metric !== 'running';
+  hasOkState: true,
+  hasError: computed('hasOkState', 'title', 'metric', function() {
+    return this.title === 'State' && !this.hasOkState;
   }),
   errorMessage: computed('hasError', function() {
     // TODO figure out if we need another error message
diff --git a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
index bfa4a6e565d3e64bb690c0b31a0a0580f3007783..b62e7ba38b0eff78da258f84b6892fc64f6e0036 100644
--- a/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-primary-card.hbs
@@ -9,7 +9,7 @@
     </span>
     <h3 class="title is-3">
       {{metric}}
-      {{#if glyph}}
+      {{#if (and glyph (not hasError))}}
         <Icon @glyph={{glyph}} class="has-text-success" />
       {{/if}}
     </h3>
diff --git a/ui/lib/replication/addon/templates/components/replication-summary.hbs b/ui/lib/replication/addon/templates/components/replication-summary.hbs
index 394c5619c778d74d049bcb74ed8dc402104f0622..f4e64ca068517d8958fbb569828beb612e667539 100644
--- a/ui/lib/replication/addon/templates/components/replication-summary.hbs
+++ b/ui/lib/replication/addon/templates/components/replication-summary.hbs
@@ -349,6 +349,7 @@
           @title='State'
           @description='Updated every ten seconds.'
           @glyph={{get cluster (concat replicationMode 'StateGlyph')}}
+          @hasOkState={{get cluster (concat replicationMode 'HasOkState')}}
           @metric={{replicationAttrs.state}}/>
         <ReplicationPrimaryCard
           @title='Last WAL entry'