diff --git a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
index d69cf7762..24e7be143 100644
--- a/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
+++ b/ui/src/Components/Toast/__snapshots__/AppToasts.test.tsx.snap
@@ -77,6 +77,25 @@ exports[`<AppToasts /> renders UpgradeToastMessage when alertStore.info.upgradeR
           </div>
         </div>
       </div>
+      <div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
+        <span class=\\"badge components-label with-click with-click-dark\\">
+          <svg aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               data-prefix=\\"fas\\"
+               data-icon=\\"chevron-down\\"
+               class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
+               role=\\"img\\"
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
+          >
+            <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>
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -130,6 +149,25 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
           </div>
         </div>
       </div>
+      <div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
+        <span class=\\"badge components-label with-click with-click-dark\\">
+          <svg aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               data-prefix=\\"fas\\"
+               data-icon=\\"chevron-down\\"
+               class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
+               role=\\"img\\"
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
+          >
+            <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>
+        </span>
+      </div>
     </div>
   </div>
   <div class=\\"m-1 bg-toast text-white rounded shadow components-animation-fade-appear components-animation-fade-appear-active\\">
@@ -176,6 +214,25 @@ exports[`<AppToasts /> renders upstream error toasts for each unhealthy upstream
           </div>
         </div>
       </div>
+      <div class=\\"flex-shrink-0 flex-grow-0 align-self-top\\">
+        <span class=\\"badge components-label with-click with-click-dark\\">
+          <svg aria-hidden=\\"true\\"
+               focusable=\\"false\\"
+               data-prefix=\\"fas\\"
+               data-icon=\\"chevron-down\\"
+               class=\\"svg-inline--fa fa-chevron-down fa-w-14 cursor-pointer m-2\\"
+               role=\\"img\\"
+               xmlns=\\"http://www.w3.org/2000/svg\\"
+               viewbox=\\"0 0 448 512\\"
+               style=\\"transition: transform 0.25s ease-in-out;\\"
+          >
+            <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>
+        </span>
+      </div>
     </div>
   </div>
 </div>
diff --git a/ui/src/Components/Toast/index.test.tsx b/ui/src/Components/Toast/index.test.tsx
new file mode 100644
index 000000000..72f9b0535
--- /dev/null
+++ b/ui/src/Components/Toast/index.test.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { mount } from "enzyme";
+
+import toDiffableHtml from "diffable-html";
+
+import { faExclamation } from "@fortawesome/free-solid-svg-icons/faExclamation";
+
+import { Toast } from ".";
+
+describe("<Toast />", () => {
+  it("renders body by default", () => {
+    const tree = mount(
+      <Toast
+        icon={faExclamation}
+        iconClass="text-danger"
+        message="fake error"
+      />
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
+  });
+
+  it("toggles body on toggle icon click", () => {
+    const tree = mount(
+      <Toast
+        icon={faExclamation}
+        iconClass="text-danger"
+        message="fake error"
+      />
+    );
+    expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
+
+    tree.find("svg.cursor-pointer").simulate("click");
+    expect(toDiffableHtml(tree.html())).not.toMatch(/fake error/);
+
+    tree.find("svg.cursor-pointer").simulate("click");
+    expect(toDiffableHtml(tree.html())).toMatch(/fake error/);
+  });
+});
diff --git a/ui/src/Components/Toast/index.tsx b/ui/src/Components/Toast/index.tsx
index 63986fd9c..ee8b5e004 100644
--- a/ui/src/Components/Toast/index.tsx
+++ b/ui/src/Components/Toast/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useState } from "react";
 import ReactDOM from "react-dom";
 
 import TransitionGroup from "react-transition-group/TransitionGroup";
@@ -9,12 +9,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons/faCircle";
 
 import { ThemeContext } from "Components/Theme";
+import { ToggleIcon } from "Components/ToggleIcon";
 
 const Toast: FC<{
   icon: IconDefinition;
   iconClass: string;
   message: ReactNode;
 }> = ({ icon, iconClass, message }) => {
+  const [isOpen, setIsOpen] = useState(true);
+
   return (
     <div className="m-1 bg-toast text-white rounded shadow">
       <div className="d-flex flex-row p-1">
@@ -26,7 +29,16 @@ const Toast: FC<{
           <FontAwesomeIcon icon={icon} className="fa-stack-1x text-white" />
         </div>
         <div className="flex-shrink-1 flex-grow-1 align-self-center ml-1 mr-3 text-break text-wrap">
-          {message}
+          {isOpen ? message : null}
+        </div>
+        <div className="flex-shrink-0 flex-grow-0 align-self-top">
+          <span className="badge components-label with-click with-click-dark">
+            <ToggleIcon
+              isOpen={isOpen}
+              className={`cursor-pointer ${isOpen ? "m-2" : "mr-2"}`}
+              onClick={() => setIsOpen((v) => !v)}
+            />
+          </span>
         </div>
       </div>
     </div>