diff --git a/portal-ui/src/screens/Console/Account/Account.tsx b/portal-ui/src/screens/Console/Account/Account.tsx
index 1a157d708..152703907 100644
--- a/portal-ui/src/screens/Console/Account/Account.tsx
+++ b/portal-ui/src/screens/Console/Account/Account.tsx
@@ -39,6 +39,7 @@ import {
 import Divider from "@material-ui/core/Divider";
 import LockIcon from "@material-ui/icons/Lock";
 import ChangePasswordModal from "./ChangePasswordModal";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -55,9 +56,6 @@ const styles = (theme: Theme) =>
       minWidth: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -274,13 +272,7 @@ const Account = ({ classes }: IServiceAccountsProps) => {
           </Grid>
           {error !== "" && (
             <Grid item xs={12}>
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {error}
-              </Typography>
+              <ErrorBlock errorMessage={error} withBreak={false} />
             </Grid>
           )}
           <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
index 919ecba80..51c78de40 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccount.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
@@ -24,12 +23,10 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import api from "../../../common/api";
 import { NewServiceAccount } from "../Common/CredentialsPrompt/types";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     jsonPolicyEditor: {
       minHeight: 400,
       width: "100%",
@@ -107,13 +104,7 @@ const AddServiceAccount = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <CodeMirrorWrapper
diff --git a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
index 1f67fe988..9b96293d7 100644
--- a/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
+++ b/portal-ui/src/screens/Console/Account/ChangePasswordModal.tsx
@@ -18,7 +18,6 @@ import React, { useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Button, LinearProgress } from "@material-ui/core";
 import {
@@ -28,12 +27,10 @@ import {
 } from "../Common/FormComponents/common/styleLibrary";
 import { ChangePasswordRequest } from "../Buckets/types";
 import api from "../../../common/api";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -120,13 +117,7 @@ const ChangePassword = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {error !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {error}
-                </Typography>
+                <ErrorBlock errorMessage={error} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx b/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx
index 8b06fe803..8ba839137 100644
--- a/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx
+++ b/portal-ui/src/screens/Console/Account/DeleteServiceAccount.tsx
@@ -14,9 +14,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import Typography from "@material-ui/core/Typography";
 import {
   Button,
   Dialog,
@@ -27,12 +26,10 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../common/api";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     wrapText: {
       maxWidth: "200px",
       whiteSpace: "normal",
@@ -95,18 +92,7 @@ const DeleteServiceAccount = ({
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete service account{" "}
           <b className={classes.wrapText}>{selectedServiceAccount}</b>?
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index de393beeb..7882b7ead 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
@@ -38,12 +37,10 @@ import {
 import { useDebounce } from "use-debounce";
 import { MakeBucketRequest } from "../types";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -191,13 +188,7 @@ const AddBucket = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
index f87df36ba..a40368a4b 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -27,29 +26,15 @@ import {
 } from "@material-ui/core";
 import api from "../../../../common/api";
 import { BucketList } from "../types";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IDeleteBucketProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedBucket: string;
 }
 
-interface IDeleteBucketState {
-  deleteLoading: boolean;
-  deleteError: string;
-}
-
 const DeleteBucket = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedBucket,
@@ -94,18 +79,7 @@ const DeleteBucket = ({
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete bucket <b>{selectedBucket}</b>? <br />
           A bucket can only be deleted if it's empty.
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
@@ -133,4 +107,4 @@ const DeleteBucket = ({
   );
 };
 
-export default withStyles(styles)(DeleteBucket);
+export default DeleteBucket;
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 843ed9f0c..244344e80 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -38,6 +38,7 @@ import {
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -54,9 +55,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -183,7 +181,11 @@ const ListBuckets = ({
       )}
       <PageHeader label={"Buckets"} />
       <Grid container>
-        {error !== "" && <span className={classes.error}>{error}</span>}
+        {error !== "" && (
+          <Grid item xs={12}>
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          </Grid>
+        )}
         <Grid item xs={12} className={classes.container}>
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx
index face75d36..b16996243 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/DeleteObject.tsx
@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -26,17 +25,9 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../../../../common/api";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 interface IDeleteObjectProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedObject: string;
@@ -49,7 +40,6 @@ interface IDeleteObjectState {
 }
 
 const DeleteObject = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedBucket,
@@ -101,14 +91,7 @@ const DeleteObject = ({
           Are you sure you want to delete: <b>{selectedObject}</b>?{" "}
           {deleteError !== "" && (
             <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
+              <ErrorBlock errorMessage={deleteError} />
             </React.Fragment>
           )}
         </DialogContentText>
@@ -139,4 +122,4 @@ const DeleteObject = ({
   );
 };
 
-export default withStyles(styles)(DeleteObject);
+export default DeleteObject;
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index eaf54be63..bf72ccfcd 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -76,9 +76,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
index 7aab17928..28aa78632 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/AddTagModal.tsx
@@ -5,6 +5,7 @@ import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../../../common/api";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 interface ITagModal {
   modalOpen: boolean;
@@ -83,7 +84,9 @@ const AddTagModal = ({
           <h3 className={classes.pathLabel}>
             Selected Object: {selectedObject}
           </h3>
-          {error !== "" && <span>{error}</span>}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           <Grid item xs={12}>
             <InputBoxWrapper
               value={newKey}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
index c92c1fed7..b3d8feca3 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ObjectDetails.tsx
@@ -52,6 +52,7 @@ import DeleteObject from "../ListObjects/DeleteObject";
 import AddTagModal from "./AddTagModal";
 import DeleteTagModal from "./DeleteTagModal";
 import SetLegalHoldModal from "./SetLegalHoldModal";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -343,7 +344,7 @@ const ObjectDetails = ({
         <Grid item xs={12} className={classes.container}>
           {error !== "" && (
             <Grid item xs={12}>
-              {error}
+              <ErrorBlock errorMessage={error} />
             </Grid>
           )}
           <Grid item xs={12} className={classes.obTitleSection}>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
index 6389987f1..88a748b44 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetLegalHoldModal.tsx
@@ -8,6 +8,7 @@ import { IFileInfo } from "./types";
 import ModalWrapper from "../../../../Common/ModalWrapper/ModalWrapper";
 import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import api from "../../../../../../common/api";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -19,9 +20,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    errorBlock: {
-      color: "red",
-    },
     ...modalBasic,
   });
 
@@ -85,7 +83,7 @@ const SetLegalHoldModal = ({
         closeModalAndRefresh(false);
       }}
     >
-      {error !== "" && <span className={classes.errorBlock}>{error}</span>}
+      {error !== "" && <ErrorBlock errorMessage={error} withBreak={false} />}
       <Grid item xs={12} className={classes.objectName}>
         {objectName}
       </Grid>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
index 72c0929a3..d88220354 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/SetRetention.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
@@ -25,7 +25,7 @@ import FormSwitchWrapper from "../../../../Common/FormComponents/FormSwitchWrapp
 import RadioGroupSelector from "../../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import DateSelector from "../../../../Common/FormComponents/DateSelector/DateSelector";
 import api from "../../../../../../common/api";
-import Typography from "@material-ui/core/Typography";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -37,9 +37,6 @@ const styles = (theme: Theme) =>
     buttonContainer: {
       textAlign: "right",
     },
-    errorBlock: {
-      color: "red",
-    },
     ...modalBasic,
   });
 
@@ -170,16 +167,9 @@ const SetRetention = ({
       }}
     >
       {error !== "" && (
-        <React.Fragment>
-          <br />
-          <Typography
-            component="p"
-            variant="body1"
-            className={classes.errorBlock}
-          >
-            {error}
-          </Typography>
-        </React.Fragment>
+        <Grid item xs={12}>
+          <ErrorBlock errorMessage={error} />
+        </Grid>
       )}
       <Grid item xs={12} className={classes.objectName}>
         {objectName}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
index 395ef5213..25f19c5e2 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/ShareFile.tsx
@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import CopyToClipboard from "react-copy-to-clipboard";
-import Typography from "@material-ui/core/Typography";
 import Snackbar from "@material-ui/core/Snackbar";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
@@ -12,6 +11,7 @@ import { CopyIcon } from "../../../../../../icons";
 import api from "../../../../../../common/api";
 import { IFileInfo } from "./types";
 import PredefinedList from "../../../../Common/FormComponents/PredefinedList/PredefinedList";
+import ErrorBlock from "../../../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -21,9 +21,6 @@ const styles = (theme: Theme) =>
     modalContent: {
       paddingBottom: 53,
     },
-    errorBlock: {
-      color: "red",
-    },
     ...modalBasic,
   });
 
@@ -149,13 +146,7 @@ const ShareFile = ({
         <Grid container className={classes.modalContent}>
           {error !== "" && (
             <Grid item xs={12}>
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {error}
-              </Typography>
+              <ErrorBlock errorMessage={error} withBreak={false} />
             </Grid>
           )}
           <Grid item xs={12} className={classes.dateContainer}>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx
index b76b51fa3..dae9e4d3a 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/AddEvent.tsx
@@ -16,7 +16,6 @@
 
 import React, { ChangeEvent, useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../../common/api";
@@ -31,12 +30,10 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     minTableHeader: {
       color: "#393939",
       "& tr": {
@@ -185,13 +182,7 @@ const AddEvent = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx
index 82d897e66..47142cd0c 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/AddReplicationModal.tsx
@@ -20,11 +20,11 @@ import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { Button, LinearProgress } from "@material-ui/core";
 import api from "../../../../common/api";
 import { IRemoteBucket } from "../types";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IReplicationModal {
   open: boolean;
@@ -35,9 +35,6 @@ interface IReplicationModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     minTableHeader: {
       color: "#393939",
       "& tr": {
@@ -143,13 +140,7 @@ const AddReplicationModal = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
 
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/DeleteEvent.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/DeleteEvent.tsx
index 378e81192..92411a66b 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/DeleteEvent.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/DeleteEvent.tsx
@@ -28,14 +28,9 @@ import {
 } from "@material-ui/core";
 import api from "../../../../common/api";
 import { BucketEvent, BucketList } from "../types";
-import Typography from "@material-ui/core/Typography";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+const styles = (theme: Theme) => createStyles({});
 
 interface IDeleteEventProps {
   classes: any;
@@ -104,18 +99,7 @@ const DeleteEvent = ({
         {deleteLoading && <LinearProgress />}
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete this event?
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
index a3125d744..50f1a9e05 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/EnableBucketEncryption.tsx
@@ -16,7 +16,6 @@
 
 import React, { useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../../common/api";
@@ -24,12 +23,10 @@ import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     minTableHeader: {
       color: "#393939",
       "& tr": {
@@ -104,13 +101,7 @@ const EnableBucketEncryption = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {encryptionError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {encryptionError}
-                </Typography>
+                <ErrorBlock errorMessage={encryptionError} withBreak={false} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx
index c63fedea9..17a4f1e12 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/SetAccessPolicy.tsx
@@ -15,19 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
 import api from "../../../../common/api";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     ...modalBasic,
   });
 
@@ -94,13 +91,7 @@ const SetAccessPolicy = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
index fd7701550..d74e0b867 100644
--- a/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ViewBucket/ViewBucket.tsx
@@ -47,6 +47,7 @@ import { containerForHeader } from "../../Common/FormComponents/common/styleLibr
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import Checkbox from "@material-ui/core/Checkbox";
 import EnableBucketEncryption from "./EnableBucketEncryption";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -63,9 +64,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -436,7 +434,7 @@ const ViewBucket = ({ classes, match }: IViewBucketProps) => {
       <Grid container>
         {error !== "" && (
           <Grid item xs={12}>
-            {error}
+            <ErrorBlock errorMessage={error} withBreak={false} />
           </Grid>
         )}
         {errBucket !== "" && (
diff --git a/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx b/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
index 39cc71f76..2a0339d47 100644
--- a/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
+++ b/portal-ui/src/screens/Console/Common/CredentialsPrompt/CredentialsPrompt.tsx
@@ -25,7 +25,7 @@ import Grid from "@material-ui/core/Grid";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
+    warningBlock: {
       color: "red",
     },
     buttonContainer: {
@@ -100,7 +100,7 @@ const CredentialsPrompt = ({
             <Typography
               component="p"
               variant="body1"
-              className={classes.errorBlock}
+              className={classes.warningBlock}
             >
               Write these down, as this is the only time the secret will be
               displayed.
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
index 4f7f16c09..88f50c1cc 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FileSelector/FileSelector.tsx
@@ -24,6 +24,7 @@ import HelpIcon from "@material-ui/icons/Help";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
 import { fileProcess } from "./utils";
+import ErrorBlock from "../../../../shared/ErrorBlock";
 
 interface InputBoxProps {
   label: string;
@@ -161,12 +162,7 @@ const FileSelector = ({
               </IconButton>
             )}
 
-            {error !== "" && (
-              <React.Fragment>
-                <br />
-                <span className={classes.errorText}>{error}</span>
-              </React.Fragment>
-            )}
+            {error !== "" && <ErrorBlock errorMessage={error} />}
           </div>
         ) : (
           <div className={classes.fileReselect}>
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
index f8c228923..f21ec50e6 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx
@@ -52,9 +52,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
diff --git a/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx b/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
index cc6cf0450..fdadd8d9e 100644
--- a/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/UsageBarWrapper/UsageBarWrapper.tsx
@@ -4,6 +4,7 @@ import { LinearProgress } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IProgressBar {
   maxValue: number;
@@ -32,9 +33,6 @@ const styles = (theme: Theme) =>
     centerItem: {
       textAlign: "center",
     },
-    error: {
-      color: "#9c9c9c",
-    },
   });
 
 const BorderLinearProgress = withStyles((theme) => ({
@@ -65,9 +63,7 @@ const UsageBarWrapper = ({
   const renderComponent = () => {
     if (!loading) {
       return error !== "" ? (
-        <React.Fragment>
-          <span className={classes.error}>{error}</span>
-        </React.Fragment>
+        <ErrorBlock errorMessage={error} withBreak={false} />
       ) : (
         <React.Fragment>
           <Grid item xs={12} className={classes.allValue}>
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx
index 5ae8aa1a0..04727d3b8 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx
@@ -38,9 +38,6 @@ interface IListConfiguration {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
diff --git a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/WebhookPanel.tsx b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/WebhookPanel.tsx
index 5642e5a84..92ec5e5f0 100644
--- a/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/WebhookPanel.tsx
+++ b/portal-ui/src/screens/Console/Configurations/ConfigurationPanels/WebhookPanel.tsx
@@ -43,9 +43,6 @@ interface IWebhook {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
diff --git a/portal-ui/src/screens/Console/Configurations/CustomForms/EditConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/CustomForms/EditConfiguration.tsx
index 4d60adc94..c3241c001 100644
--- a/portal-ui/src/screens/Console/Configurations/CustomForms/EditConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/CustomForms/EditConfiguration.tsx
@@ -20,7 +20,6 @@ import { connect } from "react-redux";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import api from "../../../../common/api";
 import ConfTargetGeneric from "../ConfTargetGeneric";
 import { serverNeedsRestart } from "../../../../actions";
@@ -30,14 +29,12 @@ import {
 } from "../../Common/FormComponents/common/styleLibrary";
 import { fieldsConfigurations, removeEmptyFields } from "../utils";
 import { IConfigurationElement, IElementValue } from "../types";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
     ...fieldBasic,
     ...settingsCommon,
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -154,13 +151,7 @@ const EditConfiguration = ({
             )}
             {errorConfig !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {errorConfig}
-                </Typography>
+                <ErrorBlock errorMessage={errorConfig} withBreak={false} />
               </Grid>
             )}
             <ConfTargetGeneric
diff --git a/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/AddNotificationEndpoint.tsx b/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/AddNotificationEndpoint.tsx
index 042a7400b..8628c66f5 100644
--- a/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/AddNotificationEndpoint.tsx
+++ b/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/AddNotificationEndpoint.tsx
@@ -19,7 +19,6 @@ import get from "lodash/get";
 import Grid from "@material-ui/core/Grid";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
 import ConfPostgres from "../CustomForms/ConfPostgres";
 import api from "../../../../common/api";
 import { serverNeedsRestart } from "../../../../actions";
@@ -28,8 +27,8 @@ import ConfMySql from "../CustomForms/ConfMySql";
 import ConfTargetGeneric from "../ConfTargetGeneric";
 import {
   notificationEndpointsFields,
-  notifyPostgres,
   notifyMysql,
+  notifyPostgres,
   removeEmptyFields,
 } from "../utils";
 import { IElementValue } from "../types";
@@ -38,14 +37,12 @@ import {
   settingsCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { servicesList } from "./utils";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
     ...settingsCommon,
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -157,13 +154,7 @@ const AddNotificationEndpoint = ({
             <Grid item xs={12} className={classes.settingsFormContainer}>
               {addError !== "" && (
                 <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {addError}
-                  </Typography>
+                  <ErrorBlock errorMessage={addError} withBreak={false} />
                 </Grid>
               )}
               {srvComponent}
diff --git a/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx
index b6d324eb0..0425b0c9f 100644
--- a/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/Configurations/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -43,6 +43,7 @@ import {
 import SlideOptions from "../../Common/SlideOptions/SlideOptions";
 import BackSettingsIcon from "../../../../icons/BackSettingsIcon";
 import NotificationTypeSelector from "./NotificationTypeSelector";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IListNotificationEndpoints {
   classes: any;
@@ -54,9 +55,6 @@ const styles = (theme: Theme) =>
     ...searchField,
     ...settingsCommon,
     ...containerForHeader(theme.spacing(4)),
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -186,7 +184,11 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
                     </Grid>
 
                     <Grid item xs={12} className={classes.lambdaContainer}>
-                      {error !== "" && <Grid container>{error}</Grid>}
+                      {error !== "" && (
+                        <Grid container>
+                          <ErrorBlock errorMessage={error} withBreak={false} />
+                        </Grid>
+                      )}
                       <Grid item xs={12} className={classes.actionsTray}>
                         <TextField
                           placeholder="Filter"
diff --git a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
index 88992ca5d..ac4235f42 100644
--- a/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Dashboard.tsx
@@ -29,6 +29,7 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary
 import AllBucketsIcon from "../../../icons/AllBucketsIcon";
 import UsageIcon from "../../../icons/UsageIcon";
 import EgressIcon from "../../../icons/EgressIcon";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -200,7 +201,11 @@ const Dashboard = ({ classes }: IDashboardProps) => {
       <div className={classes.dashboardBG} />
       <Grid container className={classes.dashboardContainer}>
         <Grid container spacing={3} className={classes.container}>
-          {error !== "" && <Grid container>{error}</Grid>}
+          {error !== "" && (
+            <Grid container>
+              <ErrorBlock errorMessage={error} />
+            </Grid>
+          )}
           {loading ? (
             <Grid item xs={12} md={12} lg={12}>
               <LinearProgress />
diff --git a/portal-ui/src/screens/Console/Groups/AddGroup.tsx b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
index 692865225..a56085b24 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroup.tsx
@@ -18,7 +18,6 @@ import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import UsersSelectors from "./UsersSelectors";
@@ -26,6 +25,7 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IGroupProps {
   open: boolean;
@@ -42,9 +42,6 @@ interface MainGroupProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -193,13 +190,7 @@ const AddGroup = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} withBreak={false} />
               </Grid>
             )}
 
diff --git a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
index 13858acef..002f78b02 100644
--- a/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
+++ b/portal-ui/src/screens/Console/Groups/DeleteGroup.tsx
@@ -14,8 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   Dialog,
@@ -26,28 +25,19 @@ import {
   LinearProgress,
 } from "@material-ui/core";
 import api from "../../../common/api";
-import Typography from "@material-ui/core/Typography";
 import { UsersList } from "../Users/types";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IDeleteGroup {
   selectedGroup: string;
   deleteOpen: boolean;
   closeDeleteModalAndRefresh: any;
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
-
 const DeleteGroup = ({
   selectedGroup,
   deleteOpen,
   closeDeleteModalAndRefresh,
-  classes,
 }: IDeleteGroup) => {
   const [isDeleting, setDeleteLoading] = useState<boolean>(false);
   const [deleteError, setError] = useState<string>("");
@@ -94,18 +84,7 @@ const DeleteGroup = ({
           {isDeleting && <LinearProgress />}
           <DialogContentText id="alert-dialog-description">
             Are you sure you want to delete group <b>{selectedGroup}</b>?
-            {deleteError !== "" && (
-              <React.Fragment>
-                <br />
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {deleteError}
-                </Typography>
-              </React.Fragment>
-            )}
+            {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
           </DialogContentText>
         </DialogContent>
         <DialogActions>
@@ -127,4 +106,4 @@ const DeleteGroup = ({
   );
 };
 
-export default withStyles(styles)(DeleteGroup);
+export default DeleteGroup;
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 04308a08e..a942174ea 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -35,6 +35,7 @@ import {
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IGroupsProps {
   classes: any;
@@ -56,9 +57,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -189,7 +187,11 @@ const Groups = ({ classes }: IGroupsProps) => {
       <PageHeader label={"Groups"} />
       <Grid container>
         <Grid item xs={12} className={classes.container}>
-          {error !== "" ? <Grid container>{error}</Grid> : <React.Fragment />}
+          {error !== "" && (
+            <Grid container>
+              <ErrorBlock errorMessage={error} withBreak={false} />
+            </Grid>
+          )}
           <Grid item xs={12} className={classes.actionsTray}>
             <TextField
               placeholder="Search Groups"
diff --git a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
index d6bf477e4..c6be9da62 100644
--- a/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
+++ b/portal-ui/src/screens/Console/Groups/UsersSelectors.tsx
@@ -31,6 +31,7 @@ import {
   actionsTray,
   selectorsCommon,
 } from "../Common/FormComponents/common/styleLibrary";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IGroupsProps {
   classes: any;
@@ -55,9 +56,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -182,7 +180,9 @@ const UsersSelectors = ({
       <Grid item xs={12}>
         <Paper className={classes.paper}>
           {loading && <LinearProgress />}
-          {error !== "" ? <div>{error}</div> : <React.Fragment />}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           {records != null && records.length > 0 ? (
             <React.Fragment>
               <Grid item xs={12} className={classes.actionsTray}>
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
index 6201dc986..7cab0ff86 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/BrowseBuckets.tsx
@@ -37,6 +37,7 @@ import BrowserBreadcrumbs from "./BrowserBreadcrumbs";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import AddBucket from "../Buckets/ListBuckets/AddBucket";
 import api from "../../../common/api";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -53,9 +54,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -220,7 +218,9 @@ const BrowseBuckets = ({
           <br />
         </Grid>
         <Grid item xs={12}>
-          {error !== "" && <span className={classes.errorBlock}>{error}</span>}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           <TableWrapper
             itemActions={[
               {
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
index 0a010084f..c0f26bffe 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicy.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../common/api";
@@ -28,12 +27,10 @@ import {
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     jsonPolicyEditor: {
       minHeight: 400,
       width: "100%",
@@ -129,13 +126,7 @@ const AddPolicy = ({
           <Grid item xs={12} className={classes.formScrollable}>
             {addError !== "" && (
               <Grid item xs={12}>
-                <Typography
-                  component="p"
-                  variant="body1"
-                  className={classes.errorBlock}
-                >
-                  {addError}
-                </Typography>
+                <ErrorBlock errorMessage={addError} />
               </Grid>
             )}
             <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx b/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
index 3ece81326..cf245f19c 100644
--- a/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/DeletePolicy.tsx
@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -27,29 +26,15 @@ import {
 } from "@material-ui/core";
 import api from "../../../common/api";
 import { PolicyList } from "./types";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IDeletePolicyProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedPolicy: string;
 }
 
-interface IDeletePolicyState {
-  deleteLoading: boolean;
-  deleteError: string;
-}
-
 const DeletePolicy = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedPolicy,
@@ -89,18 +74,7 @@ const DeletePolicy = ({
         {deleteLoading && <LinearProgress />}
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete policy <b>{selectedPolicy}</b>?.
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
@@ -128,4 +102,4 @@ const DeletePolicy = ({
   );
 };
 
-export default withStyles(styles)(DeletePolicy);
+export default DeletePolicy;
diff --git a/portal-ui/src/screens/Console/Policies/Policies.tsx b/portal-ui/src/screens/Console/Policies/Policies.tsx
index f0da6373d..500d74e7c 100644
--- a/portal-ui/src/screens/Console/Policies/Policies.tsx
+++ b/portal-ui/src/screens/Console/Policies/Policies.tsx
@@ -34,6 +34,7 @@ import {
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -50,9 +51,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -211,7 +209,7 @@ const Policies = ({ classes }: IPoliciesProps) => {
           </Grid>
           {error && (
             <Grid item xs={12}>
-              {error}
+              <ErrorBlock errorMessage={error} withBreak={false} />
             </Grid>
           )}
           <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
index 1309dfc25..b721a6380 100644
--- a/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicySelectors.tsx
@@ -30,6 +30,7 @@ import {
   selectorsCommon,
 } from "../Common/FormComponents/common/styleLibrary";
 import { PolicyList } from "./types";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface ISelectPolicyProps {
   classes: any;
@@ -53,9 +54,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -161,7 +159,9 @@ const PolicySelectors = ({
       <Grid item xs={12}>
         <Paper className={classes.paper}>
           {loading && <LinearProgress />}
-          {error !== "" && <div>{error}</div>}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           {records != null && records.length > 0 ? (
             <React.Fragment>
               <Grid item xs={12} className={classes.actionsTray}>
diff --git a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
index 44667f725..6988246e0 100644
--- a/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
+++ b/portal-ui/src/screens/Console/Policies/SetPolicy.tsx
@@ -25,6 +25,7 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import api from "../../../common/api";
 import PolicySelectors from "./PolicySelectors";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface ISetPolicyProps {
   classes: any;
@@ -129,7 +130,11 @@ const SetPolicy = ({
       modalOpen={open}
       title="Set Policies"
     >
-      {error !== "" && <span className={classes.error}>{error}</span>}
+      {error !== "" && (
+        <Grid item xs={12}>
+          <ErrorBlock errorMessage={error} withBreak={false} />
+        </Grid>
+      )}
       <Grid item xs={12}>
         <PredefinedList
           label={`Selected ${selectedGroup !== null ? "Group" : "User"}`}
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
index 1ce7f7f48..74bc1017c 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/AddTenant.tsx
@@ -19,7 +19,6 @@ import debounce from "lodash/debounce";
 import get from "lodash/get";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { LinearProgress } from "@material-ui/core";
 import Table from "@material-ui/core/Table";
@@ -52,6 +51,7 @@ import {
   ICapacity,
   ITenantCreator,
 } from "../../../../common/types";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IAddTenantProps {
   open: boolean;
@@ -64,9 +64,6 @@ interface IAddTenantProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -2129,13 +2126,7 @@ const AddTenant = ({
           </div>
           {addError !== "" && (
             <Grid item xs={12}>
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {addError}
-              </Typography>
+              <ErrorBlock errorMessage={addError} withBreak={false} />
             </Grid>
           )}
 
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx
index 4559e587b..1096223de 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/DeleteTenant.tsx
@@ -14,7 +14,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Button,
   Dialog,
@@ -24,28 +24,19 @@ import {
   DialogTitle,
   LinearProgress,
 } from "@material-ui/core";
-import Typography from "@material-ui/core/Typography";
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import api from "../../../../common/api";
 import { ITenant } from "./types";
 import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import Grid from "@material-ui/core/Grid";
+import ErrorBlock from "../../../shared/ErrorBlock";
+
 interface IDeleteTenant {
-  classes: any;
   deleteOpen: boolean;
   selectedTenant: ITenant;
   closeDeleteModalAndRefresh: (refreshList: boolean) => any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
-
 const DeleteTenant = ({
-  classes,
   deleteOpen,
   selectedTenant,
   closeDeleteModalAndRefresh,
@@ -108,18 +99,7 @@ const DeleteTenant = ({
               value={retypeTenant}
             />
           </Grid>
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
@@ -146,4 +126,4 @@ const DeleteTenant = ({
   );
 };
 
-export default withStyles(styles)(DeleteTenant);
+export default DeleteTenant;
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index a9569c20a..4bd1575eb 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -38,6 +38,7 @@ import {
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface ITenantsList {
   classes: any;
@@ -58,9 +59,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -253,7 +251,7 @@ const ListTenants = ({ classes }: ITenantsList) => {
           </Grid>
           {error !== "" && (
             <Grid item xs={12}>
-              {error}
+              <ErrorBlock errorMessage={error} withBreak={false} />
             </Grid>
           )}
           <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
index e57c7a55d..f2d35b513 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/AddPoolModal.tsx
@@ -18,9 +18,6 @@ interface IAddPoolProps {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/ReplicationSetup.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/ReplicationSetup.tsx
index d73d04acb..76aee8d7a 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/ReplicationSetup.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/ReplicationSetup.tsx
@@ -37,9 +37,6 @@ interface IDropDownElements {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index 6d7ff9ea9..abb29cf66 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -38,6 +38,7 @@ import PageHeader from "../../Common/PageHeader/PageHeader";
 import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 import UpdateTenantModal from "./UpdateTenantModal";
 import PencilIcon from "../../Common/TableWrapper/TableActionIcons/PencilIcon";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface ITenantDetailsProps {
   classes: any;
@@ -51,9 +52,6 @@ interface ITenantUsage {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -254,7 +252,7 @@ const TenantDetails = ({ classes, match }: ITenantDetailsProps) => {
       <Grid container>
         {error !== "" && (
           <Grid item xs={12}>
-            {error}
+            <ErrorBlock errorMessage={error} withBreak={false} />
           </Grid>
         )}
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
index fd9812508..ef05b9de8 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/UpdateTenantModal.tsx
@@ -6,6 +6,7 @@ import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBo
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import api from "../../../../common/api";
 import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
+import ErrorBlock from "../../../shared/ErrorBlock";
 
 interface IUpdateTenantModal {
   open: boolean;
@@ -17,9 +18,6 @@ interface IUpdateTenantModal {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     buttonContainer: {
       textAlign: "right",
     },
@@ -133,8 +131,12 @@ const UpdateTenantModal = ({
       onClose={closeAction}
     >
       <Grid container>
+        {error !== "" && (
+          <Grid item xs={12}>
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          </Grid>
+        )}
         <Grid item xs={12} className={classes.formScrollable}>
-          {error !== "" && <span className={classes.errorBlock}>{error}</span>}
           <span>
             Please enter the MinIO image from dockerhub to use. If blank, then
             latest build will be used.
diff --git a/portal-ui/src/screens/Console/Users/AddToGroup.tsx b/portal-ui/src/screens/Console/Users/AddToGroup.tsx
index 615d8694f..3adc6a16f 100644
--- a/portal-ui/src/screens/Console/Users/AddToGroup.tsx
+++ b/portal-ui/src/screens/Console/Users/AddToGroup.tsx
@@ -13,16 +13,16 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
 import api from "../../../common/api";
 import GroupsSelectors from "./GroupsSelectors";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IAddToGroup {
   open: boolean;
@@ -33,9 +33,6 @@ interface IAddToGroup {
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -134,13 +131,7 @@ const AddToGroup = ({
             <Grid item xs={12} className={classes.formScrollable}>
               {updatingError !== "" && (
                 <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {updatingError}
-                  </Typography>
+                  <ErrorBlock errorMessage={updatingError} withBreak={false} />
                 </Grid>
               )}
               <PredefinedList
diff --git a/portal-ui/src/screens/Console/Users/AddUser.tsx b/portal-ui/src/screens/Console/Users/AddUser.tsx
index d1daa036c..706cf5b68 100644
--- a/portal-ui/src/screens/Console/Users/AddUser.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUser.tsx
@@ -16,7 +16,6 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
 import { Button, LinearProgress } from "@material-ui/core";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import { modalBasic } from "../Common/FormComponents/common/styleLibrary";
@@ -27,12 +26,10 @@ import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
-    errorBlock: {
-      color: "red",
-    },
     strongText: {
       fontWeight: 700,
     },
@@ -190,13 +187,7 @@ const AddUserContent = ({
             <Grid item xs={12} className={classes.formScrollable}>
               {addError !== "" && (
                 <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {addError}
-                  </Typography>
+                  <ErrorBlock errorMessage={addError} withBreak={false} />
                 </Grid>
               )}
 
diff --git a/portal-ui/src/screens/Console/Users/DeleteUser.tsx b/portal-ui/src/screens/Console/Users/DeleteUser.tsx
index 93c64d9c3..8f9c12eee 100644
--- a/portal-ui/src/screens/Console/Users/DeleteUser.tsx
+++ b/portal-ui/src/screens/Console/Users/DeleteUser.tsx
@@ -14,7 +14,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import React, { useState } from "react";
 import {
   Button,
@@ -27,29 +26,15 @@ import {
 } from "@material-ui/core";
 import api from "../../../common/api";
 import { User, UsersList } from "./types";
-import Typography from "@material-ui/core/Typography";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    errorBlock: {
-      color: "red",
-    },
-  });
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IDeleteUserProps {
-  classes: any;
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
   deleteOpen: boolean;
   selectedUser: User | null;
 }
 
-interface IDeleteUserState {
-  deleteLoading: boolean;
-  deleteError: string;
-}
-
 const DeleteUser = ({
-  classes,
   closeDeleteModalAndRefresh,
   deleteOpen,
   selectedUser,
@@ -99,18 +84,7 @@ const DeleteUser = ({
         {deleteLoading && <LinearProgress />}
         <DialogContentText id="alert-dialog-description">
           Are you sure you want to delete user <b>{selectedUser.accessKey}</b>?
-          {deleteError !== "" && (
-            <React.Fragment>
-              <br />
-              <Typography
-                component="p"
-                variant="body1"
-                className={classes.errorBlock}
-              >
-                {deleteError}
-              </Typography>
-            </React.Fragment>
-          )}
+          {deleteError !== "" && <ErrorBlock errorMessage={deleteError} />}
         </DialogContentText>
       </DialogContent>
       <DialogActions>
@@ -138,4 +112,4 @@ const DeleteUser = ({
   );
 };
 
-export default withStyles(styles)(DeleteUser);
+export default DeleteUser;
diff --git a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
index 6bab8c4aa..370c03e4a 100644
--- a/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
+++ b/portal-ui/src/screens/Console/Users/GroupsSelectors.tsx
@@ -31,6 +31,7 @@ import {
   actionsTray,
   selectorsCommon,
 } from "../Common/FormComponents/common/styleLibrary";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 interface IGroupsProps {
   classes: any;
@@ -54,9 +55,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -178,7 +176,9 @@ const GroupsSelectors = ({
       <Grid item xs={12}>
         <Paper className={classes.paper}>
           {loading && <LinearProgress />}
-          {error !== "" && <div>{error}</div>}
+          {error !== "" && (
+            <ErrorBlock errorMessage={error} withBreak={false} />
+          )}
           {records != null && records.length > 0 ? (
             <React.Fragment>
               <Grid item xs={12} className={classes.actionsTray}>
diff --git a/portal-ui/src/screens/Console/Users/Users.tsx b/portal-ui/src/screens/Console/Users/Users.tsx
index 4cf5ec5a6..8a63bb1ef 100644
--- a/portal-ui/src/screens/Console/Users/Users.tsx
+++ b/portal-ui/src/screens/Console/Users/Users.tsx
@@ -34,6 +34,7 @@ import {
   searchField,
 } from "../Common/FormComponents/common/styleLibrary";
 import PageHeader from "../Common/PageHeader/PageHeader";
+import ErrorBlock from "../../shared/ErrorBlock";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -50,9 +51,6 @@ const styles = (theme: Theme) =>
       width: "320px",
       padding: "20px",
     },
-    errorBlock: {
-      color: "red",
-    },
     tableToolbar: {
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(0),
@@ -234,7 +232,7 @@ const Users = ({ classes }: IUsersProps) => {
       <Grid container>
         {error !== "" && (
           <Grid item xs={12}>
-            {error}
+            <ErrorBlock errorMessage={error} />
           </Grid>
         )}
         <Grid item xs={12} className={classes.container}>
diff --git a/portal-ui/src/screens/shared/ErrorBlock.tsx b/portal-ui/src/screens/shared/ErrorBlock.tsx
new file mode 100644
index 000000000..19f3f17a7
--- /dev/null
+++ b/portal-ui/src/screens/shared/ErrorBlock.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import Typography from "@material-ui/core/Typography";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+
+const styles = (theme: Theme) =>
+  createStyles({
+    errorBlock: {
+      color: theme.palette.error.main,
+    },
+  });
+
+interface IErrorBlockProps {
+  classes: any;
+  errorMessage: string;
+  withBreak?: boolean;
+}
+
+const ErrorBlock = ({
+  classes,
+  errorMessage,
+  withBreak = true,
+}: IErrorBlockProps) => {
+  return (
+    <React.Fragment>
+      {withBreak && <br />}
+      <Typography component="p" variant="body1" className={classes.errorBlock}>
+        {errorMessage}
+      </Typography>
+    </React.Fragment>
+  );
+};
+
+export default withStyles(styles)(ErrorBlock);