diff --git a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
index 86c540753..e8e7fd85a 100644
--- a/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/UpstreamError/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<UpstreamError /> matches snapshot 1`] = `
 "
-<div class=\\"alert alert-danger text-center\\"
+<div class=\\"alert alert-danger text-center m-1\\"
      role=\\"alert\\"
 >
   <h4 class=\\"alert-heading mb-0\\">
diff --git a/ui/src/Components/Grid/UpstreamError/index.js b/ui/src/Components/Grid/UpstreamError/index.js
index 5b3f97442..720ea1d00 100644
--- a/ui/src/Components/Grid/UpstreamError/index.js
+++ b/ui/src/Components/Grid/UpstreamError/index.js
@@ -10,7 +10,7 @@ class UpstreamError extends Component {
   render() {
     const { name, message } = this.props;
     return (
-      <div className="alert alert-danger text-center" role="alert">
+      <div className="alert alert-danger text-center m-1" role="alert">
         <h4 className="alert-heading mb-0">
           Alertmanager <span className="font-weight-bold">{name}</span> raised
           an error: {message}