diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
index c96e4818a..1b65c5415 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
@@ -288,61 +288,57 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
   </a>
   <div class=\\"components-grid-alertgrid-alertgroup-shared-silence rounded-0 border-0\\">
     <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-      <div class=\\"card-header border-bottom-0\\">
-        <div class=\\"d-flex flex-row justify-content-between mw-100\\">
-          <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-            <div class=\\"my-1\\">
-              <div class=\\"d-flex flex-row\\">
-                <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
-                  <svg aria-hidden=\\"true\\"
-                       focusable=\\"false\\"
-                       data-prefix=\\"fas\\"
-                       data-icon=\\"bell-slash\\"
-                       class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
-                       role=\\"img\\"
-                       xmlns=\\"http://www.w3.org/2000/svg\\"
-                       viewbox=\\"0 0 640 512\\"
-                  >
-                    <path fill=\\"currentColor\\"
-                          d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
-                    >
-                    </path>
-                  </svg>
-                </div>
-                <div class=\\"flex-shrink-1 flex-grow-1\\">
-                  <span class=\\"font-italic\\"
-                        width=\\"0\\"
-                  >
-                    <span>
-                    </span>
-                    <span>
-                      Mocked Silence
-                    </span>
-                    <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-                      …
-                    </span>
-                  </span>
-                  <span class=\\"blockquote-footer pt-1\\">
-                    <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-                      me@example.com
-                    </cite>
-                    <span class=\\"badge badge-danger align-text-bottom p-1\\">
-                      Expired
-                      <time datetime=\\"946688400000\\">
-                        14 hours ago
-                      </time>
-                    </span>
-                  </span>
-                </div>
-              </div>
-            </div>
+      <div class=\\"card-header border-bottom-0 px-3\\">
+        <div class=\\"d-flex flex-row\\">
+          <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+            <svg aria-hidden=\\"true\\"
+                 focusable=\\"false\\"
+                 data-prefix=\\"fas\\"
+                 data-icon=\\"bell-slash\\"
+                 class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+                 role=\\"img\\"
+                 xmlns=\\"http://www.w3.org/2000/svg\\"
+                 viewbox=\\"0 0 640 512\\"
+            >
+              <path fill=\\"currentColor\\"
+                    d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+              >
+              </path>
+            </svg>
+          </div>
+          <div class=\\"flex-shrink-1 flex-grow-1\\">
+            <span class=\\"font-italic\\"
+                  width=\\"0\\"
+            >
+              <span>
+              </span>
+              <span>
+                Mocked Silence
+              </span>
+              <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+                …
+              </span>
+            </span>
+          </div>
+        </div>
+        <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
+          <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+            <span class=\\"text-muted mr-2 font-italic\\">
+              — me@example.com
+            </span>
+            <span class=\\"badge badge-danger align-text-bottom p-1\\">
+              Expired
+              <time datetime=\\"946688400000\\">
+                14 hours ago
+              </time>
+            </span>
           </div>
           <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
             <svg aria-hidden=\\"true\\"
                  focusable=\\"false\\"
                  data-prefix=\\"fas\\"
                  data-icon=\\"chevron-up\\"
-                 class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted cursor-pointer\\"
+                 class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
                  role=\\"img\\"
                  xmlns=\\"http://www.w3.org/2000/svg\\"
                  viewbox=\\"0 0 448 512\\"
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.js b/ui/src/Components/ManagedSilence/SilenceComment.js
index a918a2973..69ba1f6d6 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.js
@@ -4,13 +4,20 @@ import PropTypes from "prop-types";
 import Truncate from "react-truncate";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
 
 import { APISilence } from "Models/API";
 import { SilenceProgress } from "./SilenceProgress";
 
-const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
+const SilenceComment = ({
+  silence,
+  collapsed,
+  collapseToggle,
+  afterUpdate
+}) => {
   const commentBody = (
     <Truncate className="font-italic" lines={collapsed ? 2 : false}>
       {silence.comment}
@@ -26,25 +33,35 @@ const SilenceComment = ({ silence, collapsed, afterUpdate }) => {
   );
 
   return (
-    <div className="d-flex flex-row">
-      <div className="flex-shrink-0 flex-grow-0  mr-2">
-        <FontAwesomeIcon icon={faBellSlash} className="text-muted" />
+    <React.Fragment>
+      <div className="d-flex flex-row">
+        <div className="flex-shrink-0 flex-grow-0  mr-2">
+          <FontAwesomeIcon icon={faBellSlash} className="text-muted" />
+        </div>
+        <div className="flex-shrink-1 flex-grow-1">{comment}</div>
       </div>
-      <div className="flex-shrink-1 flex-grow-1">
-        {comment}
-        <span className="blockquote-footer pt-1">
-          <cite className="components-grid-alertgroup-silences mr-2">
-            {silence.createdBy}
-          </cite>
+      <div className="pt-1 d-flex flex-row justify-content-between">
+        <div className="flex-shrink-1 flex-grow-1 components-managed-silence-cite">
+          <span className="text-muted mr-2 font-italic">
+            &mdash; {silence.createdBy}
+          </span>
           {collapsed ? <SilenceProgress silence={silence} /> : null}
-        </span>
+        </div>
+        <div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
+          <FontAwesomeIcon
+            icon={collapsed ? faChevronUp : faChevronDown}
+            className="ml-2 text-muted cursor-pointer"
+            onClick={collapseToggle}
+          />
+        </div>
       </div>
-    </div>
+    </React.Fragment>
   );
 };
 SilenceComment.propTypes = {
   silence: APISilence.isRequired,
-  collapsed: PropTypes.bool.isRequired
+  collapsed: PropTypes.bool.isRequired,
+  collapseToggle: PropTypes.func.isRequired
 };
 
 export { SilenceComment };
diff --git a/ui/src/Components/ManagedSilence/SilenceComment.test.js b/ui/src/Components/ManagedSilence/SilenceComment.test.js
index 6cf31d977..0a0192da7 100644
--- a/ui/src/Components/ManagedSilence/SilenceComment.test.js
+++ b/ui/src/Components/ManagedSilence/SilenceComment.test.js
@@ -18,8 +18,16 @@ afterEach(() => {
   fetch.resetMocks();
 });
 
+const CollapseMock = jest.fn();
+
 const MountedSilenceComment = collapsed => {
-  return mount(<SilenceComment silence={silence} collapsed={collapsed} />);
+  return mount(
+    <SilenceComment
+      silence={silence}
+      collapsed={collapsed}
+      collapseToggle={CollapseMock}
+    />
+  );
 };
 
 describe("<SilenceComment />", () => {
@@ -46,4 +54,11 @@ describe("<SilenceComment />", () => {
     const tree = MountedSilenceComment(false);
     expect(tree.find("a[href='http://localhost/1234']")).toHaveLength(1);
   });
+
+  it("collapseToggle is called when collapse icon is clicked", () => {
+    const tree = MountedSilenceComment(true);
+    const collapse = tree.find("svg.fa-chevron-up");
+    collapse.simulate("click");
+    expect(CollapseMock).toHaveBeenCalled();
+  });
 });
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
index 754ad97fc..527b619a0 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
@@ -32,17 +32,35 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
         …
       </span>
     </span>
-    <span class=\\"blockquote-footer pt-1\\">
-      <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-        me@example.com
-      </cite>
-      <span class=\\"badge badge-danger align-text-bottom p-1\\">
-        Expired
-        <time datetime=\\"946688400000\\">
-          20 years ago
-        </time>
-      </span>
+  </div>
+</div>
+<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
+  <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+    <span class=\\"text-muted mr-2 font-italic\\">
+      — me@example.com
     </span>
+    <span class=\\"badge badge-danger align-text-bottom p-1\\">
+      Expired
+      <time datetime=\\"946688400000\\">
+        20 years ago
+      </time>
+    </span>
+  </div>
+  <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"chevron-up\\"
+         class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 448 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z\\"
+      >
+      </path>
+    </svg>
   </div>
 </div>
 "
@@ -80,12 +98,30 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
         …
       </span>
     </span>
-    <span class=\\"blockquote-footer pt-1\\">
-      <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-        me@example.com
-      </cite>
+  </div>
+</div>
+<div class=\\"pt-1 d-flex flex-row justify-content-between\\">
+  <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+    <span class=\\"text-muted mr-2 font-italic\\">
+      — me@example.com
     </span>
   </div>
+  <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
+    <svg aria-hidden=\\"true\\"
+         focusable=\\"false\\"
+         data-prefix=\\"fas\\"
+         data-icon=\\"chevron-down\\"
+         class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
+         role=\\"img\\"
+         xmlns=\\"http://www.w3.org/2000/svg\\"
+         viewbox=\\"0 0 448 512\\"
+    >
+      <path fill=\\"currentColor\\"
+            d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+      >
+      </path>
+    </svg>
+  </div>
 </div>
 "
 `;
diff --git a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
index 589bed245..4f93d7109 100644
--- a/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
@@ -3,71 +3,67 @@
 exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-  <div class=\\"card-header border-bottom-0\\">
-    <div class=\\"d-flex flex-row justify-content-between mw-100\\">
-      <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-        <div class=\\"my-1\\">
-          <div class=\\"d-flex flex-row\\">
-            <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"bell-slash\\"
-                   class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 640 512\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
-                >
-                </path>
-              </svg>
-            </div>
-            <div class=\\"flex-shrink-1 flex-grow-1\\">
-              <span class=\\"font-italic\\"
-                    width=\\"0\\"
-              >
-                <span>
-                </span>
-                <span>
-                  Mocked Silence
-                </span>
-                <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-                  …
-                </span>
-              </span>
-              <span class=\\"blockquote-footer pt-1\\">
-                <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-                  me@example.com
-                </cite>
-                <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
-                  Expires
-                  <time datetime=\\"946688400000\\">
-                    in 30 minutes
-                  </time>
-                  <div class=\\"progress silence-progress bg-white\\">
-                    <div class=\\"progress-bar bg-success\\"
-                         role=\\"progressbar\\"
-                         style=\\"width: 50%;\\"
-                         aria-valuenow=\\"50\\"
-                         aria-valuemin=\\"0\\"
-                         aria-valuemax=\\"100\\"
-                    >
-                    </div>
-                  </div>
-                </span>
-              </span>
+  <div class=\\"card-header border-bottom-0 px-3\\">
+    <div class=\\"d-flex flex-row\\">
+      <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"bell-slash\\"
+             class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 640 512\\"
+        >
+          <path fill=\\"currentColor\\"
+                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+          >
+          </path>
+        </svg>
+      </div>
+      <div class=\\"flex-shrink-1 flex-grow-1\\">
+        <span class=\\"font-italic\\"
+              width=\\"0\\"
+        >
+          <span>
+          </span>
+          <span>
+            Mocked Silence
+          </span>
+          <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+            …
+          </span>
+        </span>
+      </div>
+    </div>
+    <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
+      <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+        <span class=\\"text-muted mr-2 font-italic\\">
+          — me@example.com
+        </span>
+        <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
+          Expires
+          <time datetime=\\"946688400000\\">
+            in 30 minutes
+          </time>
+          <div class=\\"progress silence-progress bg-white\\">
+            <div class=\\"progress-bar bg-success\\"
+                 role=\\"progressbar\\"
+                 style=\\"width: 50%;\\"
+                 aria-valuenow=\\"50\\"
+                 aria-valuemin=\\"0\\"
+                 aria-valuemax=\\"100\\"
+            >
             </div>
           </div>
-        </div>
+        </span>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"chevron-up\\"
-             class=\\"svg-inline--fa fa-chevron-up fa-w-14 text-muted cursor-pointer\\"
+             class=\\"svg-inline--fa fa-chevron-up fa-w-14 ml-2 text-muted cursor-pointer\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 448 512\\"
@@ -87,55 +83,51 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
 exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
 "
 <div class=\\"card my-1 components-managed-silence components-animation-fade-appear components-animation-fade-appear-active\\">
-  <div class=\\"card-header border-bottom-0\\">
-    <div class=\\"d-flex flex-row justify-content-between mw-100\\">
-      <div class=\\"flex-grow-1 flex-shrink-1 mr-2\\">
-        <div class=\\"my-1\\">
-          <div class=\\"d-flex flex-row\\">
-            <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"bell-slash\\"
-                   class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 640 512\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
-                >
-                </path>
-              </svg>
-            </div>
-            <div class=\\"flex-shrink-1 flex-grow-1\\">
-              <span class=\\"font-italic\\"
-                    width=\\"0\\"
-              >
-                <span>
-                </span>
-                <span>
-                  Mocked Silence
-                </span>
-                <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
-                  …
-                </span>
-              </span>
-              <span class=\\"blockquote-footer pt-1\\">
-                <cite class=\\"components-grid-alertgroup-silences mr-2\\">
-                  me@example.com
-                </cite>
-              </span>
-            </div>
-          </div>
-        </div>
+  <div class=\\"card-header border-bottom-0 px-3\\">
+    <div class=\\"d-flex flex-row\\">
+      <div class=\\"flex-shrink-0 flex-grow-0  mr-2\\">
+        <svg aria-hidden=\\"true\\"
+             focusable=\\"false\\"
+             data-prefix=\\"fas\\"
+             data-icon=\\"bell-slash\\"
+             class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
+             role=\\"img\\"
+             xmlns=\\"http://www.w3.org/2000/svg\\"
+             viewbox=\\"0 0 640 512\\"
+        >
+          <path fill=\\"currentColor\\"
+                d=\\"M633.82 458.1l-90.62-70.05c.19-1.38.8-2.66.8-4.06.05-7.55-2.61-15.27-8.61-21.71-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84c-40.33 8.38-74.66 31.07-97.59 62.57L45.47 3.37C38.49-2.05 28.43-.8 23.01 6.18L3.37 31.45C-2.05 38.42-.8 48.47 6.18 53.9l588.35 454.73c6.98 5.43 17.03 4.17 22.46-2.81l19.64-25.27c5.42-6.97 4.17-17.02-2.81-22.45zM157.23 251.54c-8.61 67.96-36.41 93.33-52.62 110.75-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h241.92L157.23 251.54zM320 512c35.32 0 63.97-28.65 63.97-64H256.03c0 35.35 28.65 64 63.97 64z\\"
+          >
+          </path>
+        </svg>
+      </div>
+      <div class=\\"flex-shrink-1 flex-grow-1\\">
+        <span class=\\"font-italic\\"
+              width=\\"0\\"
+        >
+          <span>
+          </span>
+          <span>
+            Mocked Silence
+          </span>
+          <span style=\\"position: fixed; visibility: hidden; top: 0px; left: 0px;\\">
+            …
+          </span>
+        </span>
+      </div>
+    </div>
+    <div class=\\"pt-1 d-flex flex-row justify-content-between\\">
+      <div class=\\"flex-shrink-1 flex-grow-1 components-managed-silence-cite\\">
+        <span class=\\"text-muted mr-2 font-italic\\">
+          — me@example.com
+        </span>
       </div>
       <div class=\\"flex-grow-0 flex-shrink-0 mt-auto mb-0\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"chevron-down\\"
-             class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted cursor-pointer\\"
+             class=\\"svg-inline--fa fa-chevron-down fa-w-14 ml-2 text-muted cursor-pointer\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 448 512\\"
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js
index b455d7a80..bd816f8cb 100644
--- a/ui/src/Components/ManagedSilence/index.js
+++ b/ui/src/Components/ManagedSilence/index.js
@@ -4,10 +4,6 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
-
 import { APISilence } from "Models/API";
 import { AlertStore } from "Stores/AlertStore";
 import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore";
@@ -73,24 +69,12 @@ const ManagedSilence = observer(
       return (
         <MountFade in={true}>
           <div className="card my-1 components-managed-silence">
-            <div className="card-header border-bottom-0">
-              <div className="d-flex flex-row justify-content-between mw-100">
-                <div className="flex-grow-1 flex-shrink-1 mr-2">
-                  <div className="my-1">
-                    <SilenceComment
-                      silence={silence}
-                      collapsed={this.collapse.value}
-                    />
-                  </div>
-                </div>
-                <div className="flex-grow-0 flex-shrink-0 mt-auto mb-0">
-                  <FontAwesomeIcon
-                    icon={this.collapse.value ? faChevronUp : faChevronDown}
-                    className="text-muted cursor-pointer"
-                    onClick={this.collapse.toggle}
-                  />
-                </div>
-              </div>
+            <div className="card-header border-bottom-0 px-3">
+              <SilenceComment
+                silence={silence}
+                collapsed={this.collapse.value}
+                collapseToggle={this.collapse.toggle}
+              />
             </div>
 
             {this.collapse.value ? null : (
diff --git a/ui/src/Components/ManagedSilence/index.scss b/ui/src/Components/ManagedSilence/index.scss
index abc275c3e..8f44f7679 100644
--- a/ui/src/Components/ManagedSilence/index.scss
+++ b/ui/src/Components/ManagedSilence/index.scss
@@ -12,3 +12,7 @@
     border-left-color: $gray-700;
   }
 }
+
+.components-managed-silence-cite {
+  font-size: 85%;
+}