diff --git a/portal-ui/src/icons/AlertCloseIcon.tsx b/portal-ui/src/icons/AlertCloseIcon.tsx
new file mode 100644
index 000000000..48cd0d64e
--- /dev/null
+++ b/portal-ui/src/icons/AlertCloseIcon.tsx
@@ -0,0 +1,68 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see .
+
+import * as React from "react";
+import { SVGProps } from "react";
+
+const AlertCloseIcon = (props: SVGProps) => (
+
+);
+
+export default AlertCloseIcon;
diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts
index ba1199806..9004ef4ba 100644
--- a/portal-ui/src/icons/index.ts
+++ b/portal-ui/src/icons/index.ts
@@ -174,3 +174,4 @@ export { default as MetadataIcon } from "./MetadataIcon";
export { default as LegalHoldIcon } from "./LegalHoldIcon";
export { default as RetentionIcon } from "./RetentionIcon";
export { default as TagsIcon } from "./TagsIcon";
+export { default as AlertCloseIcon } from "./AlertCloseIcon";
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx b/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx
deleted file mode 100644
index 62a443ba3..000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/ModalError/ModalError.tsx
+++ /dev/null
@@ -1,243 +0,0 @@
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see .
-
-// This file is part of MinIO Console Server
-// Copyright (c) 2021 MinIO, Inc.
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see .
-
-import React, { Fragment, useCallback, useEffect, useState } from "react";
-import { connect } from "react-redux";
-import get from "lodash/get";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import CloseIcon from "@mui/icons-material/Close";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { AppState } from "../../../../../store";
-import {
- setErrorSnackMessage,
- setModalErrorSnackMessage,
-} from "../../../../../actions";
-import { snackBarMessage } from "../../../../../types";
-
-interface ImodalErrorProps {
- customStyle?: any;
- classes: any;
- modalSnackMessage: snackBarMessage;
- displayErrorMessage: typeof setErrorSnackMessage;
-}
-
-const styles = (theme: Theme) =>
- createStyles({
- modalErrorContainer: {
- position: "absolute",
- marginTop: 10,
- width: "80%",
- backgroundColor: "#fff",
- border: "#C72C48 1px solid",
- borderLeftWidth: 12,
- borderRadius: 3,
- zIndex: 1000,
- padding: "10px 15px",
- left: "50%",
- transform: "translateX(-50%)",
- opacity: 0,
- transitionDuration: "0.2s",
- },
- modalErrorShow: {
- opacity: 1,
- },
- closeButton: {
- position: "absolute",
- right: 5,
- fontSize: "small",
- border: 0,
- backgroundColor: "#fff",
- cursor: "pointer",
- },
- errorTitle: {
- display: "flex",
- alignItems: "center",
- },
- errorLabel: {
- color: "#000",
- fontSize: 18,
- fontWeight: 500,
- marginLeft: 5,
- marginRight: 25,
- },
- messageIcon: {
- color: "#C72C48",
- display: "flex",
- "& svg": {
- width: 32,
- height: 32,
- },
- },
- detailsButton: {
- color: "#9C9C9C",
- display: "flex",
- alignItems: "center",
- border: 0,
- backgroundColor: "transparent",
- paddingLeft: 5,
- fontSize: 14,
- transformDuration: "0.3s",
- cursor: "pointer",
- },
- extraDetailsContainer: {
- fontStyle: "italic",
- color: "#9C9C9C",
- lineHeight: 0,
- padding: "0 10px",
- transition: "all .2s ease-in-out",
- overflow: "hidden",
- },
- extraDetailsOpen: {
- lineHeight: 1,
- padding: "3px 10px",
- },
- arrowElement: {
- marginLeft: -5,
- },
- arrowOpen: {
- transform: "rotateZ(90deg)",
- transformDuration: "0.3s",
- },
- });
-
-var timerI: any;
-
-const startHideTimer = (callbackFunction: () => void) => {
- timerI = setInterval(callbackFunction, 10000);
-};
-
-const stopHideTimer = () => {
- clearInterval(timerI);
-};
-
-const ModalError = ({
- classes,
- modalSnackMessage,
- displayErrorMessage,
- customStyle,
-}: ImodalErrorProps) => {
- const [detailsOpen, setDetailsOpen] = useState(false);
- const [displayErrorMsg, setDisplayErrorMsg] = useState(false);
-
- const closeErrorMessage = useCallback(() => {
- setDisplayErrorMsg(false);
- }, []);
-
- useEffect(() => {
- if (!displayErrorMsg) {
- displayErrorMessage({ detailedError: "", errorMessage: "" });
- setDetailsOpen(false);
- //clearInterval(timerI);
- }
- }, [displayErrorMessage, displayErrorMsg]);
-
- useEffect(() => {
- if (
- modalSnackMessage.message !== "" &&
- modalSnackMessage.type === "error"
- ) {
- //Error message received, we trigger the animation
- setDisplayErrorMsg(true);
- //startHideTimer(closeErrorMessage);
- }
- }, [closeErrorMessage, modalSnackMessage.message, modalSnackMessage.type]);
-
- const detailsToggle = () => {
- setDetailsOpen(!detailsOpen);
- };
-
- const message = get(modalSnackMessage, "message", "");
- const messageDetails = get(modalSnackMessage, "detailedErrorMsg", "");
-
- if (modalSnackMessage.type !== "error" || message === "") {
- return null;
- }
-
- return (
-
-