diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js
index ed90e01b7..c75ec8766 100644
--- a/ui/src/alerts/containers/AlertsApp.js
+++ b/ui/src/alerts/containers/AlertsApp.js
@@ -118,9 +118,9 @@ class AlertsApp extends Component {
 
   renderSubComponents = () => {
     const {source, isWidget, limit} = this.props
-    const {isAlertsMaxedOut, alerts} = this.state
+    const {isAlertsMaxedOut, alerts, hasKapacitor} = this.state
 
-    return this.state.hasKapacitor ? (
+    return hasKapacitor ? (
       <AlertsTable
         source={source}
         alerts={this.state.alerts}
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index c70b3fb0e..0c7538ab8 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -14,9 +14,6 @@ const KapacitorRules = ({
   onDelete,
   onChangeRuleStatus,
 }) => {
-  if (!hasKapacitor) {
-    return <NoKapacitorError source={source} />
-  }
   if (loading) {
     return (
       <div>
@@ -28,7 +25,11 @@ const KapacitorRules = ({
         </div>
         <div className="panel-body">
           <div className="generic-empty-state">
-            <p>Loading Rules...</p>
+            {hasKapacitor ? (
+              <p>Loading Rules...</p>
+            ) : (
+              <NoKapacitorError source={source} />
+            )}
           </div>
         </div>
       </div>