diff --git a/src/core/client/framework/components/NetworkError.css b/src/core/client/framework/components/NetworkError.css
new file mode 100644
index 000000000..e4c87aea5
--- /dev/null
+++ b/src/core/client/framework/components/NetworkError.css
@@ -0,0 +1,13 @@
+.root {
+  background-color: var(--palette-error-300);
+
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-primary-semi-bold);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  color: var(--palette-text-500);
+
+  border-radius: var(--round-corners);
+
+  padding: var(--spacing-3);
+}
diff --git a/src/core/client/framework/components/NetworkError.tsx b/src/core/client/framework/components/NetworkError.tsx
new file mode 100644
index 000000000..e81cd3be5
--- /dev/null
+++ b/src/core/client/framework/components/NetworkError.tsx
@@ -0,0 +1,16 @@
+import { Localized } from "@fluent/react/compat";
+import React, { FunctionComponent } from "react";
+
+import styles from "./NetworkError.css";
+
+const NetworkError: FunctionComponent = () => {
+  return (
+    <div className={styles.root}>
+      <Localized id="common-networkError">
+        <div>Network error. Please refresh your page and try again.</div>
+      </Localized>
+    </div>
+  );
+};
+
+export default NetworkError;
diff --git a/src/core/client/framework/lib/relay/QueryRenderer.tsx b/src/core/client/framework/lib/relay/QueryRenderer.tsx
index b3619c4d4..df3042a3e 100644
--- a/src/core/client/framework/lib/relay/QueryRenderer.tsx
+++ b/src/core/client/framework/lib/relay/QueryRenderer.tsx
@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import { QueryRenderer } from "react-relay";
 import { OperationType } from "relay-runtime";
 
+import NetworkError from "coral-framework/components/NetworkError";
 import { PropTypesOf } from "coral-framework/types";
 
 import { CoralContextConsumer } from "../bootstrap/CoralContext";
@@ -33,7 +34,20 @@ class CoralQueryRenderer<
     return (
       <CoralContextConsumer>
         {({ relayEnvironment }) => (
-          <QueryRenderer environment={relayEnvironment} {...this.props} />
+          <QueryRenderer
+            environment={relayEnvironment}
+            {...this.props}
+            render={(args) => {
+              if (
+                args.error &&
+                args.error.name === "RRNLRetryMiddlewareError"
+              ) {
+                return <NetworkError />;
+              }
+
+              return this.props.render(args);
+            }}
+          />
         )}
       </CoralContextConsumer>
     );
diff --git a/src/locales/en-US/common.ftl b/src/locales/en-US/common.ftl
index aa236ab97..1742f7cf4 100644
--- a/src/locales/en-US/common.ftl
+++ b/src/locales/en-US/common.ftl
@@ -7,3 +7,4 @@ common-banEmailTemplate =
   Someone with access to your account has violated our community guidelines. As a result, your account has been banned. You will no longer be able to comment, react or report comments.
 
 common-embedNotFound = Requested media could not be found. May have been deleted.
+common-networkError = Network error. Please refresh your page and try again.