diff --git a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap
index 01212e6ed..83c5063f8 100644
--- a/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/EmptyGrid/__snapshots__/index.test.js.snap
@@ -7,11 +7,10 @@ exports[`<EmptyGrid /> matches snapshot 1`] = `
        focusable=\\"false\\"
        data-prefix=\\"fas\\"
        data-icon=\\"mug-hot\\"
-       class=\\"svg-inline--fa fa-mug-hot fa-w-16 \\"
+       class=\\"svg-inline--fa fa-mug-hot fa-w-16 screen-center-icon-big text-placeholder\\"
        role=\\"img\\"
        xmlns=\\"http://www.w3.org/2000/svg\\"
        viewbox=\\"0 0 512 512\\"
-       style=\\"font-size:14rem\\"
   >
     <path fill=\\"currentColor\\"
           d=\\"M127.1 146.5c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C111.8 5.9 105 0 96.8 0H80.4C70.6 0 63 8.5 64.1 18c3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zm112 0c1.3 7.7 8 13.5 16 13.5h16.5c9.8 0 17.6-8.5 16.3-18-3.8-28.2-16.4-54.2-36.6-74.7-14.4-14.7-23.6-33.3-26.4-53.5C223.8 5.9 217 0 208.8 0h-16.4c-9.8 0-17.5 8.5-16.3 18 3.9 31.9 18 61.3 40.6 84.4 12 12.2 19.7 27.5 22.4 44.1zM400 192H32c-17.7 0-32 14.3-32 32v192c0 53 43 96 96 96h192c53 0 96-43 96-96h16c61.8 0 112-50.2 112-112s-50.2-112-112-112zm0 160h-16v-96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48z\\"
diff --git a/ui/src/Components/Grid/EmptyGrid/index.js b/ui/src/Components/Grid/EmptyGrid/index.js
index 4df43a9af..446164f4e 100644
--- a/ui/src/Components/Grid/EmptyGrid/index.js
+++ b/ui/src/Components/Grid/EmptyGrid/index.js
@@ -7,7 +7,10 @@ import { CenteredMessage } from "Components/CenteredMessage";
 
 const EmptyGrid = () => (
   <CenteredMessage>
-    <FontAwesomeIcon icon={faMugHot} style={{ fontSize: "14rem" }} />
+    <FontAwesomeIcon
+      icon={faMugHot}
+      className="screen-center-icon-big text-placeholder"
+    />
   </CenteredMessage>
 );
 
diff --git a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap
index 634c3c8c4..6ab0d47f7 100644
--- a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap
@@ -2,28 +2,26 @@
 
 exports[`<FatalError /> matches snapshot 1`] = `
 "
-<div class=\\"jumbotron text-center bg-primary my-4\\">
-  <div class=\\"container-fluid\\">
-    <h1 class=\\"display-1 my-5 text-danger\\">
-      <svg aria-hidden=\\"true\\"
-           focusable=\\"false\\"
-           data-prefix=\\"fas\\"
-           data-icon=\\"exclamation-circle\\"
-           class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 \\"
-           role=\\"img\\"
-           xmlns=\\"http://www.w3.org/2000/svg\\"
-           viewbox=\\"0 0 512 512\\"
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div class=\\"container-fluid text-center\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"exclamation-circle\\"
+         class=\\"svg-inline--fa fa-exclamation-circle fa-w-16 screen-center-icon-big text-danger mb-4\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 512 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
       >
-        <path fill=\\"currentColor\\"
-              d=\\"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z\\"
-        >
-        </path>
-      </svg>
-    </h1>
+      </path>
+    </svg>
     <p class=\\"lead text-white bg-secondary px-1 py-3 rounded text-wrap text-break\\">
       foo bar
     </p>
   </div>
-</div>
+</h1>
 "
 `;
diff --git a/ui/src/Components/Grid/FatalError/index.js b/ui/src/Components/Grid/FatalError/index.js
index 177cef44a..9930a9d55 100644
--- a/ui/src/Components/Grid/FatalError/index.js
+++ b/ui/src/Components/Grid/FatalError/index.js
@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle";
 
+import { CenteredMessage } from "Components/CenteredMessage";
+
 class FatalError extends Component {
   static propTypes = {
     message: PropTypes.string.isRequired
@@ -12,16 +14,17 @@ class FatalError extends Component {
   render() {
     const { message } = this.props;
     return (
-      <div className="jumbotron text-center bg-primary my-4">
-        <div className="container-fluid">
-          <h1 className="display-1 my-5 text-danger">
-            <FontAwesomeIcon icon={faExclamationCircle} />
-          </h1>
+      <CenteredMessage>
+        <div className="container-fluid text-center">
+          <FontAwesomeIcon
+            icon={faExclamationCircle}
+            className="screen-center-icon-big text-danger mb-4"
+          />
           <p className="lead text-white bg-secondary px-1 py-3 rounded text-wrap text-break">
             {message}
           </p>
         </div>
-      </div>
+      </CenteredMessage>
     );
   }
 }
diff --git a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
index 948ef6753..6a55d3cea 100644
--- a/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.js.snap
@@ -2,14 +2,14 @@
 
 exports[`<UpgradeNeeded /> matches snapshot 1`] = `
 "
-<div class=\\"jumbotron text-center bg-primary my-4\\">
-  <div class=\\"container-fluid\\">
-    <h1 class=\\"display-1 my-5 text-success shake-slow shake-constant\\">
+<h1 class=\\"display-1 text-placeholder screen-center\\">
+  <div class=\\"container-fluid text-center\\">
+    <div class=\\"shake-slow shake-constant mb-4\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"rocket\\"
-           class=\\"svg-inline--fa fa-rocket fa-w-16 \\"
+           class=\\"svg-inline--fa fa-rocket fa-w-16 screen-center-icon-big text-success\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 512 512\\"
@@ -19,7 +19,7 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
         >
         </path>
       </svg>
-    </h1>
+    </div>
     <p class=\\"lead text-muted\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
@@ -38,6 +38,6 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
       Upgrading to a new version: 1.2.3
     </p>
   </div>
-</div>
+</h1>
 "
 `;
diff --git a/ui/src/Components/Grid/UpgradeNeeded/index.js b/ui/src/Components/Grid/UpgradeNeeded/index.js
index be6f0eadf..f2ebe92a1 100644
--- a/ui/src/Components/Grid/UpgradeNeeded/index.js
+++ b/ui/src/Components/Grid/UpgradeNeeded/index.js
@@ -5,6 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faRocket } from "@fortawesome/free-solid-svg-icons/faRocket";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner";
 
+import { CenteredMessage } from "Components/CenteredMessage";
+
 import "csshake/scss/csshake-slow.scss";
 
 class UpgradeNeeded extends Component {
@@ -30,17 +32,20 @@ class UpgradeNeeded extends Component {
   render() {
     const { newVersion } = this.props;
     return (
-      <div className="jumbotron text-center bg-primary my-4">
-        <div className="container-fluid">
-          <h1 className="display-1 my-5 text-success shake-slow shake-constant">
-            <FontAwesomeIcon icon={faRocket} />
-          </h1>
+      <CenteredMessage>
+        <div className="container-fluid text-center">
+          <div className="shake-slow shake-constant mb-4">
+            <FontAwesomeIcon
+              icon={faRocket}
+              className="screen-center-icon-big text-success"
+            />
+          </div>
           <p className="lead text-muted">
             <FontAwesomeIcon className="mr-1" icon={faSpinner} spin />
             Upgrading to a new version: {newVersion}
           </p>
         </div>
-      </div>
+      </CenteredMessage>
     );
   }
 }
diff --git a/ui/src/Components/Grid/index.stories.js b/ui/src/Components/Grid/index.stories.js
index 00054d8c9..4ddf80830 100644
--- a/ui/src/Components/Grid/index.stories.js
+++ b/ui/src/Components/Grid/index.stories.js
@@ -8,11 +8,22 @@ import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { FatalError } from "./FatalError";
 import { UpgradeNeeded } from "./UpgradeNeeded";
+import { EmptyGrid } from "./EmptyGrid";
 import { Grid } from ".";
+import { InternalError } from "../../ErrorBoundary";
 
 import "Styles/Percy.scss";
 
 storiesOf("Grid", module)
+  .add("InternalError", () => {
+    return (
+      <InternalError
+        message="React error boundary message"
+        secondsLeft={45}
+        progressLeft={66}
+      />
+    );
+  })
   .add("FatalError", () => {
     return (
       <FatalError message="Something failed with a veryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrappingveryLongStringToTestTextWrapping" />
@@ -21,6 +32,13 @@ storiesOf("Grid", module)
   .add("UpgradeNeeded", () => {
     return <UpgradeNeeded newVersion="1.2.3" reloadAfter={100000000} />;
   })
+  .add("EmptyGrid", () => {
+    return (
+      <div className="text-center">
+        <EmptyGrid />
+      </div>
+    );
+  })
   .add("AlertGrid", () => {
     const alertStore = new AlertStore([]);
     const settingsStore = new Settings();
diff --git a/ui/src/Styles/Components/CenteredMessage.scss b/ui/src/Styles/Components/CenteredMessage.scss
index 17175a910..af3897430 100644
--- a/ui/src/Styles/Components/CenteredMessage.scss
+++ b/ui/src/Styles/Components/CenteredMessage.scss
@@ -5,3 +5,7 @@
   margin-right: -50%;
   transform: translate(-50%, -50%);
 }
+
+.screen-center-icon-big {
+  font-size: 14rem;
+}
diff --git a/ui/src/Styles/Percy.scss b/ui/src/Styles/Percy.scss
index ae96990d4..91fbad033 100644
--- a/ui/src/Styles/Percy.scss
+++ b/ui/src/Styles/Percy.scss
@@ -7,3 +7,14 @@
   position: relative !important;
   float: none !important;
 }
+
+.screen-center {
+  position: unset !important;
+  top: unset !important;
+  left: unset !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  transform: unset !important;
+}