diff --git a/src/components/messages/MessageManager.tsx b/src/components/messages/MessageManager.tsx
index 241117f2b..a09ccf52b 100644
--- a/src/components/messages/MessageManager.tsx
+++ b/src/components/messages/MessageManager.tsx
@@ -24,11 +24,13 @@ export const MessageManager = props => {
     text: ""
   });
   const [opened, setOpened] = useState(false);
+  const [expand, setExpand] = useState(false);
 
   const classes = useStyles({});
   const {
-    action,
-    autohide = 3000,
+    actionBtn,
+    autohide = 9000,
+    expandText,
     title,
     text,
     key,
@@ -105,47 +107,79 @@ export const MessageManager = props => {
         }
         title={title}
         action={[
-          !!onUndo ? (
-            <Button
-              key="undo"
-              color="default"
-              size="small"
-              onClick={handleClose as any}
-              data-tc="button-undo"
+          !!expandText ? (
+            <div
+              className={classNames(classes.expandedContainer, {
+                [classes.expandedContainerInfo]: status === "info"
+              })}
             >
-              <FormattedMessage
-                defaultMessage="Undo"
-                description="snackbar button undo"
-              />
-            </Button>
-          ) : (
-            undefined
-          ),
-          !!action ? (
-            <Button
-              key="action"
-              color="default"
-              size="small"
-              onClick={() => {
-                action();
-                handleClose(null, null);
-              }}
-              data-tc="button-action"
-            >
-              <FormattedMessage
-                defaultMessage="Action"
-                description="snackbar button action"
-              />
-            </Button>
+              <div
+                className={classNames(
+                  classes.expandedContainerContent,
+                  expand ? classes.expandedText : classes.hiddenText
+                )}
+              >
+                <p>{expandText}</p>
+              </div>
+              <button
+                className={classNames(classes.expandBtn, {
+                  [classes.expandBtnInfo]: status === "info"
+                })}
+                onClick={() => {
+                  setExpand(expand => !expand);
+                }}
+              >
+                {!expand ? (
+                  <FormattedMessage
+                    defaultMessage="Expand"
+                    description="snackbar expand"
+                  />
+                ) : (
+                  <FormattedMessage
+                    defaultMessage="Collapse"
+                    description="snackbar collapse"
+                  />
+                )}
+              </button>
+            </div>
           ) : (
             undefined
           ),
+          <div key="actions" className={classes.actionContainer}>
+            {!!onUndo && (
+              <Button
+                key="undo"
+                color="default"
+                size="small"
+                onClick={handleClose as any}
+                data-tc="button-undo"
+              >
+                <FormattedMessage
+                  defaultMessage="Undo"
+                  description="snackbar button undo"
+                />
+              </Button>
+            )}
+            {!!actionBtn && (
+              <Button
+                key="action"
+                color="default"
+                size="small"
+                onClick={actionBtn.action}
+                data-tc="button-action"
+              >
+                {actionBtn.label}
+              </Button>
+            )}
+          </div>,
           <IconButton
             key="close"
             aria-label="Close"
             color="inherit"
             onClick={handleClose as any}
-            className={classes.closeBtn}
+            className={classNames(classes.closeBtn, {
+              [classes.closeBtnInfo]: status === "info"
+            })}
           >
             <CloseIcon />
           </IconButton>,
diff --git a/src/components/messages/index.ts b/src/components/messages/index.ts
index 1ea935669..ebb434f6d 100644
--- a/src/components/messages/index.ts
+++ b/src/components/messages/index.ts
@@ -1,8 +1,12 @@
 import { createContext } from "react";
 
 export interface IMessage {
-  action?: () => void;
+  actionBtn?: {
+    label: string;
+    action: () => void;
+  };
   autohide?: number;
+  expandText?: string;
   title?: string;
   text: string;
   onUndo?: () => void;
diff --git a/src/components/messages/styles.ts b/src/components/messages/styles.ts
index 5743651cf..e86c2ec10 100644
--- a/src/components/messages/styles.ts
+++ b/src/components/messages/styles.ts
@@ -15,10 +15,22 @@ export const useStyles = makeStyles(
       from: { transform: "translateX(-100%)" },
       to: { transform: "translateX(0)" }
     },
+    actionContainer: {
+      marginLeft: -8
+    },
     closeBtn: {
+      "& svg": {
+        maxHeight: 18,
+        maxWidth: 18
+      },
+      color: "#fff",
+      padding: 10,
       position: "absolute",
       right: 0,
-      top: 0
+      top: 7
+    },
+    closeBtnInfo: {
+      color: theme.palette.text.primary
     },
     error: {
       "& > div": {
@@ -28,11 +40,60 @@ export const useStyles = makeStyles(
         "&:before": {
           backgroundImage: `url(${errorIcon})`
         },
-
         backgroundColor: theme.palette.error.main,
         color: "#fff"
       }
     },
+    expandBtn: {
+      "&:before": {
+        borderLeft: "4px solid transparent",
+        borderRight: "4px solid transparent",
+        borderTop: "8px solid #fff",
+        content: "''",
+        display: "block",
+        height: 0,
+        position: "absolute",
+        right: 0,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: 0
+      },
+      background: "transparent",
+      border: "none",
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: theme.spacing(2),
+      outline: "none",
+      padding: 0,
+      paddingRight: 15,
+      position: "relative"
+    },
+    expandBtnInfo: {
+      "&:before": {
+        borderTop: `8px solid ${theme.palette.text.primary}`
+      },
+      color: theme.palette.text.primary
+    },
+    expandedContainer: {
+      "& p": {
+        margin: theme.spacing(1, 0)
+      },
+      color: "#fff",
+      marginBottom: 5
+    },
+    expandedContainerContent: {
+      overflow: "hidden",
+      transition: "max-height .6s ease"
+    },
+    expandedContainerInfo: {
+      color: theme.palette.text.secondary
+    },
+    expandedText: {
+      maxHeight: 500
+    },
+    hiddenText: {
+      maxHeight: 0
+    },
     progressBar: {
       backgroundColor: infoColor,
       height: 8,
diff --git a/src/theme.ts b/src/theme.ts
index e02b3aba4..bddcd3d94 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -344,8 +344,9 @@ export default (colors: IThemeColors): Theme =>
             }
           },
           display: "block",
-          paddingBottom: 15,
-          paddingLeft: 0
+          paddingBottom: 10,
+          paddingLeft: 0,
+          paddingRight: 45
         },
         message: {
           fontSize: 16