diff --git a/ui/src/Components/Grid/index.js b/ui/src/Components/Grid/index.js
index 1be9f3e3a..950c10d33 100644
--- a/ui/src/Components/Grid/index.js
+++ b/ui/src/Components/Grid/index.js
@@ -25,6 +25,18 @@ const Grid = observer(
         return <FatalError message={alertStore.status.error} />;
       }
 
+      if (
+        alertStore.data.upstreams.counters &&
+        alertStore.data.upstreams.counters.total === 1 &&
+        alertStore.data.upstreams.counters.healthy === 0 &&
+        alertStore.data.upstreams.instances[0] &&
+        alertStore.data.upstreams.instances[0].error !== ""
+      ) {
+        return (
+          <FatalError message={alertStore.data.upstreams.instances[0].error} />
+        );
+      }
+
       return (
         <React.Fragment>
           {alertStore.data.upstreams.instances
diff --git a/ui/src/Components/Grid/index.test.js b/ui/src/Components/Grid/index.test.js
index d2a23fdcb..291343ae1 100644
--- a/ui/src/Components/Grid/index.test.js
+++ b/ui/src/Components/Grid/index.test.js
@@ -33,6 +33,24 @@ describe("<Grid />", () => {
     expect(tree.text()).toBe("<AlertGrid />");
   });
 
+  it("renders FatalError if there's only one upstream and it's unhealthy", () => {
+    alertStore.data.upstreams = {
+      counters: { total: 1, healthy: 0, failed: 1 },
+      instances: [{ name: "am1", uri: "http://am1", error: "error" }]
+    };
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<FatalError />");
+  });
+
+  it("renders FatalError if there's only one upstream and it's unhealthy but without any error", () => {
+    alertStore.data.upstreams = {
+      counters: { total: 1, healthy: 0, failed: 1 },
+      instances: [{ name: "am1", uri: "http://am1", error: "" }]
+    };
+    const tree = ShallowGrid();
+    expect(tree.text()).toBe("<AlertGrid />");
+  });
+
   it("renders UpstreamError for each unhealthy upstream", () => {
     alertStore.data.upstreams = {
       counters: { total: 3, healthy: 1, failed: 2 },