diff --git a/portal-ui/src/icons/AzureTierIcon.tsx b/portal-ui/src/icons/AzureTierIcon.tsx
index dc31789a5..16553a81c 100644
--- a/portal-ui/src/icons/AzureTierIcon.tsx
+++ b/portal-ui/src/icons/AzureTierIcon.tsx
@@ -31,7 +31,7 @@ const AzureTierIcon = (props: SVGProps<SVGSVGElement>) => {
             id="path21"
             d="M459.411,505.944c6.055-1.07,11.056-1.953,11.115-1.965l.1-.024-5.717-6.8c-3.143-3.74-5.717-6.815-5.717-6.831,0-.032,5.9-16.291,5.936-16.347.012-.019,4.03,6.919,9.738,16.812,5.347,9.266,9.755,16.9,9.8,16.975l.075.132-18.168,0-18.169,0S459.411,505.944,459.411,505.944ZM437.6,503.868c0-.008,2.693-4.686,5.987-10.391l5.987-10.375,6.978-5.856c3.839-3.219,6.986-5.86,7-5.864a1.448,1.448,0,0,1-.112.282c-.075.159-3.485,7.471-7.574,16.247l-7.44,15.957-5.41.008C440.037,503.884,437.6,503.88,437.6,503.868Z"
             transform="translate(-437.603 -471.382)"
-            fill="#c22e4a"
+            fill="#2a94dc"
           />
         </g>
       </g>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index c31609573..aba5f7f8c 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Paper } from "@mui/material";
+import { Paper } from "@mui/material";
 import { AppState } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../actions";
 import { ISessionResponse } from "../../types";
@@ -44,6 +44,7 @@ import SecureComponent, {
 } from "../../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const AddAccessRuleModal = withSuspense(
   React.lazy(() => import("./AddAccessRule"))
@@ -226,18 +227,16 @@ const AccessRule = ({
           matchAll
           errorProps={{ disabled: true }}
         >
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
-            component="label"
+          <RBIconButton
+            tooltip={"Add Access Rule"}
             onClick={() => {
               setAddAccessRuleOpen(true);
             }}
-            className={classes.listButton}
-          >
-            Add Access Rule
-          </Button>
+            text={"Add Access Rule"}
+            icon={<AddIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         </SecureComponent>
       </Grid>
       <Paper className={classes.tableBlock}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index 10716cfd0..ec48f5c25 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -274,14 +274,14 @@ const BucketDetails = ({
                   errorProps={{ disabled: true }}
                 >
                   <RBIconButton
-                    classes={{
-                      root: classes.deleteBtn,
-                    }}
+                    tooltip={"Delete Bucket"}
                     onClick={() => {
                       setDeleteOpen(true);
                     }}
-                    text={`Delete Bucket`}
+                    text={"Delete Bucket"}
                     icon={<TrashIcon />}
+                    color={"secondary"}
+                    variant={"outlined"}
                   />
                 </SecureComponent>
                 <RBIconButton
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
index 904d3d45b..464891714 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import get from "lodash/get";
 import Grid from "@mui/material/Grid";
 import AddIcon from "../../../../icons/AddIcon";
@@ -43,6 +42,7 @@ import SecureComponent, {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const DeleteEvent = withSuspense(React.lazy(() => import("./DeleteEvent")));
 const AddEvent = withSuspense(React.lazy(() => import("./AddEvent")));
@@ -162,17 +162,16 @@ const BucketEventsPanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Subscribe to Event"}
               onClick={() => {
                 setAddEventScreenOpen(true);
               }}
-            >
-              Subscribe to Event
-            </Button>
+              text={"Subscribe to Event"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
index e623e1ab1..e4217b155 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import get from "lodash/get";
 import * as reactMoment from "react-moment";
 import Grid from "@mui/material/Grid";
@@ -42,6 +41,7 @@ import SecureComponent, {
   hasPermission,
 } from "../../../../common/SecureComponent/SecureComponent";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -213,17 +213,16 @@ const BucketLifecyclePanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Add Lifecycle Rule"}
               onClick={() => {
                 setAddLifecycleOpen(true);
               }}
-            >
-              Add Lifecycle Rule
-            </Button>
+              text={"Add Lifecycle Rule"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
index 130092035..5be9657fc 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -19,7 +19,6 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import AddIcon from "../../../../icons/AddIcon";
 import BucketsIcon from "../../../../icons/BucketsIcon";
@@ -47,6 +46,7 @@ import SecureComponent, {
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 
 import withSuspense from "../../Common/Components/withSuspense";
+import RBIconButton from "./SummaryItems/RBIconButton";
 
 const AddReplicationModal = withSuspense(
   React.lazy(() => import("./AddReplicationModal"))
@@ -190,17 +190,16 @@ const BucketReplicationPanel = ({
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<AddIcon />}
-              size="medium"
+            <RBIconButton
+              tooltip={"Add Replication Rule"}
               onClick={() => {
                 setOpenReplicationOpen(true);
               }}
-            >
-              Add Replication Rule
-            </Button>
+              text={"Add Replication Rule"}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
index a5993db26..313324e4f 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/RBIconButton.tsx
@@ -16,10 +16,9 @@
 
 import React from "react";
 import BoxIconButton from "../../../Common/BoxIconButton/BoxIconButton";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import { IconButtonProps } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import { Theme } from "@mui/material/styles";
 
 type DeleteButtonProps = {
   onClick: (e: any) => void;
@@ -32,29 +31,57 @@ type DeleteButtonProps = {
   [x: string]: any;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
+type RBIconProps = Partial<IconButtonProps> & DeleteButtonProps;
+
+const useStyles = makeStyles((theme: Theme) => {
+  const getButtonColor = (props: RBIconProps) => {
+    const { variant, color } = props;
+
+    let tgtColor = theme.palette.primary.main;
+
+    if (color === "primary" && variant === "contained") {
+      tgtColor = theme.palette.primary.contrastText;
+    } else if (color === "primary" && variant === "outlined") {
+      tgtColor = theme.palette.primary.main;
+    } else if (color === "secondary") {
+      tgtColor = theme.palette.secondary.main;
+    }
+
+    return tgtColor;
+  };
+
+  return {
     root: {
-      "& .min-icon": {
+      padding: "7px",
+      color: (props: RBIconProps) => getButtonColor(props),
+      borderColor: (props: RBIconProps) =>
+        props.color === "secondary"
+          ? theme.palette.secondary.main
+          : theme.palette.primary.main,
+      "& svg.min-icon": {
         width: 12,
-        marginLeft: "5px",
+        marginLeft: (props: RBIconProps) => (props.text ? "5px" : "0px"),
         "@media (max-width: 900px)": {
           width: 16,
-          marginLeft: 0,
+          marginLeft: "0px !important",
         },
       },
     },
-  });
+  };
+});
+
+const RBIconButton = (props: RBIconProps) => {
+  const classes = useStyles(props);
+
+  const {
+    onClick,
+    text = "",
+    disabled = false,
+    tooltip,
+    icon = null,
+    ...restProps
+  } = props;
 
-const RBIconButton = ({
-  onClick,
-  text = "",
-  disabled = false,
-  tooltip,
-  classes,
-  icon = null,
-  ...restProps
-}: Partial<IconButtonProps> & DeleteButtonProps) => {
   return (
     <BoxIconButton
       classes={classes}
@@ -79,4 +106,4 @@ const RBIconButton = ({
     </BoxIconButton>
   );
 };
-export default withStyles(styles)(RBIconButton);
+export default RBIconButton;
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
index 3fd7d05d4..47dbd030a 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
@@ -25,7 +25,7 @@ import {
   TotalObjectsIcon,
 } from "../../../../icons";
 import { Bucket } from "../types";
-import { Box, Button, Grid, Typography } from "@mui/material";
+import { Box, Grid, Typography } from "@mui/material";
 import { niceBytes, prettyNumber } from "../../../../common/utils";
 import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import { Link } from "react-router-dom";
@@ -34,6 +34,7 @@ import {
   IAM_ROLES,
 } from "../../../../common/SecureComponent/permissions";
 import SecureComponent from "../../../../common/SecureComponent/SecureComponent";
+import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -244,26 +245,28 @@ const BucketListItem = ({
                 to={`/buckets/${bucket.name}/admin`}
                 style={{ textDecoration: "none" }}
               >
-                <Button
+                <RBIconButton
+                  tooltip={"Manage"}
+                  onClick={() => {}}
+                  text={"Manage"}
+                  icon={<SettingsIcon />}
+                  color={"primary"}
                   variant={"outlined"}
-                  endIcon={<SettingsIcon />}
-                  className={classes.manageButton}
-                >
-                  Manage
-                </Button>
+                />
               </Link>
             </SecureComponent>
             <Link
               to={`/buckets/${bucket.name}/browse`}
               style={{ textDecoration: "none" }}
             >
-              <Button
-                variant="contained"
-                endIcon={<ArrowRightIcon />}
-                className={classes.viewButton}
-              >
-                Browse
-              </Button>
+              <RBIconButton
+                tooltip={"Browse"}
+                onClick={() => {}}
+                text={"Browse"}
+                icon={<ArrowRightIcon />}
+                color={"primary"}
+                variant={"contained"}
+              />
             </Link>
             <Box display={{ xs: "none", sm: "block" }}>
               <div style={{ marginBottom: 10 }} />
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 3b64d9ec7..a3f4428c4 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { Bucket, BucketList } from "../types";
 import { AddIcon, BucketsIcon } from "../../../../icons";
@@ -37,7 +37,6 @@ import BucketListItem from "./BucketListItem";
 import BulkReplicationModal from "./BulkReplicationModal";
 import HelpBox from "../../../../common/HelpBox";
 import { ISessionResponse } from "../../types";
-import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import RefreshIcon from "../../../../icons/RefreshIcon";
 import AButton from "../../Common/AButton/AButton";
 import MultipleBucketsIcon from "../../../../icons/MultipleBucketsIcon";
@@ -50,6 +49,7 @@ import {
 import PageLayout from "../../Common/Layout/PageLayout";
 import SearchBox from "../../Common/SearchBox";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import RBIconButton from "../BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -226,55 +226,55 @@ const ListBuckets = ({
             alignItems={"center"}
             justifyContent={"flex-end"}
           >
-            <BoxIconButton
-              variant={bulkSelect ? "contained" : "outlined"}
-              tooltip={"Select Multiple"}
+            <RBIconButton
+              tooltip={bulkSelect ? "Un Select All" : "Select Multiple"}
               onClick={() => {
                 setBulkSelect(!bulkSelect);
               }}
-              size={"small"}
-              className={classes.bulkSelect}
-            >
-              <SelectMultipleIcon />
-            </BoxIconButton>
-            <BoxIconButton
-              variant="outlined"
+              text={""}
+              icon={<SelectMultipleIcon />}
+              color={"primary"}
+              variant={bulkSelect ? "contained" : "outlined"}
+            />
+
+            <RBIconButton
               tooltip={"Set Replication"}
               onClick={() => {
                 setReplicationModalOpen(true);
               }}
+              text={""}
+              icon={<MultipleBucketsIcon />}
               disabled={selectedBuckets.length === 0}
-              size={"small"}
-            >
-              <MultipleBucketsIcon />
-            </BoxIconButton>
-            <BoxIconButton
-              color="primary"
-              aria-label="Refresh"
+              color={"primary"}
+              variant={"outlined"}
+            />
+
+            <RBIconButton
               tooltip={"Refresh"}
               onClick={() => {
                 setLoading(true);
               }}
-              size="large"
-            >
-              <RefreshIcon />
-            </BoxIconButton>
+              text={""}
+              icon={<RefreshIcon />}
+              color={"primary"}
+              variant={"outlined"}
+            />
+
             <SecureComponent
               scopes={[IAM_SCOPES.S3_CREATE_BUCKET]}
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<AddIcon />}
+              <RBIconButton
+                tooltip={"Create Bucket"}
                 onClick={() => {
                   history.push("/add-bucket");
                 }}
-                className={classes.addBucket}
-              >
-                Create Bucket
-              </Button>
+                text={"Create Bucket"}
+                icon={<AddIcon />}
+                color={"primary"}
+                variant={"contained"}
+              />
             </SecureComponent>
           </Grid>
         </Grid>
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 2a5de21c1..47e358685 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
@@ -54,7 +54,7 @@ import {
   searchField,
   tableStyles,
 } from "../../../../Common/FormComponents/common/styleLibrary";
-import { Badge, Button, Typography } from "@mui/material";
+import { Badge, Typography } from "@mui/material";
 import * as reactMoment from "react-moment";
 import BrowserBreadcrumbs from "../../../../ObjectBrowser/BrowserBreadcrumbs";
 import {
@@ -80,7 +80,6 @@ import ScreenTitle from "../../../../Common/ScreenTitle/ScreenTitle";
 import { setBucketDetailsLoad, setBucketInfo } from "../../../actions";
 import { AppState } from "../../../../../../store";
 import PageLayout from "../../../../Common/Layout/PageLayout";
-import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
 
 import { IAM_SCOPES } from "../../../../../../common/SecureComponent/permissions";
 import SecureComponent, {
@@ -91,6 +90,7 @@ import SearchBox from "../../../../Common/SearchBox";
 import withSuspense from "../../../../Common/Components/withSuspense";
 import { displayName } from "./utils";
 import { DownloadIcon, UploadFolderIcon } from "../../../../../../icons";
+import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 
 const AddFolderIcon = React.lazy(
   () => import("../../../../../../icons/AddFolderIcon")
@@ -1159,44 +1159,41 @@ const ListObjects = ({
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                   errorProps={{ disabled: true }}
                 >
-                  <BoxIconButton
+                  <RBIconButton
                     tooltip={"Choose or create a new path"}
-                    color="primary"
-                    aria-label="Add a new folder"
                     onClick={() => {
                       setCreateFolderOpen(true);
                     }}
+                    text={""}
+                    icon={<AddFolderIcon />}
+                    color="primary"
                     disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <AddFolderIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                 </SecureComponent>
                 <SecureComponent
                   resource={bucketName}
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                   errorProps={{ disabled: true }}
                 >
-                  <BoxIconButton
+                  <RBIconButton
                     tooltip={"Upload file"}
-                    color="primary"
-                    aria-label="Upload File"
                     onClick={() => {
                       if (fileUpload && fileUpload.current) {
                         fileUpload.current.click();
                       }
                     }}
+                    text={""}
+                    icon={<UploadIcon />}
+                    color="primary"
                     disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <UploadIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                 </SecureComponent>
                 <input
                   type="file"
                   multiple
                   onChange={handleUploadButton}
-                  id="file-input"
                   style={{ display: "none" }}
                   ref={fileUpload}
                 />
@@ -1205,37 +1202,28 @@ const ListObjects = ({
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                   errorProps={{ disabled: true }}
                 >
-                  <BoxIconButton
+                  <RBIconButton
                     tooltip={"Upload folder"}
-                    color="primary"
-                    aria-label="Upload Folder"
                     onClick={() => {
                       if (folderUpload && folderUpload.current) {
                         folderUpload.current.click();
                       }
                     }}
+                    text={""}
+                    icon={<UploadFolderIcon />}
+                    color="primary"
                     disabled={rewindEnabled}
-                    size="large"
-                  >
-                    <UploadFolderIcon />
-                  </BoxIconButton>
+                    variant={"outlined"}
+                  />
                   <input
                     type="file"
                     multiple
                     onChange={handleUploadButton}
-                    id="file-input"
                     style={{ display: "none" }}
                     ref={folderUpload}
                   />
                 </SecureComponent>
-                <input
-                  type="file"
-                  multiple
-                  onChange={handleUploadButton}
-                  id="file-input"
-                  style={{ display: "none" }}
-                  ref={folderUpload}
-                />
+
                 <SecureComponent
                   resource={bucketName}
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
@@ -1248,18 +1236,17 @@ const ListObjects = ({
                     invisible={!rewindEnabled}
                     className={classes.badgeOverlap}
                   >
-                    <BoxIconButton
+                    <RBIconButton
                       tooltip={"Rewind"}
-                      color="primary"
-                      aria-label="Rewind"
                       onClick={() => {
                         setRewindSelect(true);
                       }}
+                      text={""}
+                      icon={<HistoryIcon />}
+                      color="primary"
                       disabled={!isVersioned}
-                      size="large"
-                    >
-                      <HistoryIcon />
-                    </BoxIconButton>
+                      variant={"outlined"}
+                    />
                   </Badge>
                 </SecureComponent>
                 <SecureComponent
@@ -1267,19 +1254,17 @@ const ListObjects = ({
                   resource={bucketName}
                   errorProps={{ disabled: true }}
                 >
-                  <BoxIconButton
+                  <RBIconButton
                     tooltip={"Refresh list"}
-                    color="primary"
-                    aria-label="Refresh List"
                     onClick={() => {
                       setLoading(true);
                     }}
+                    text={""}
+                    icon={<RefreshIcon />}
+                    color="primary"
                     disabled={rewindEnabled}
-                    size="large"
                     variant={"contained"}
-                  >
-                    <RefreshIcon />
-                  </BoxIconButton>
+                  />
                 </SecureComponent>
               </Fragment>
             }
@@ -1298,32 +1283,32 @@ const ListObjects = ({
             />
           </SecureComponent>
           <div>
-            <Button
-              variant="contained"
-              color="primary"
-              endIcon={<DownloadIcon />}
-              onClick={downloadSelected}
-              disabled={selectedObjects.length === 0}
-            >
-              Download Selected
-            </Button>
             <SecureComponent
               scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
               resource={bucketName}
               errorProps={{ disabled: true }}
             >
-              <Button
-                variant="contained"
-                color="primary"
-                endIcon={<DeleteIcon />}
+              <RBIconButton
+                tooltip={"Delete Selected"}
                 onClick={() => {
                   setDeleteMultipleOpen(true);
                 }}
+                text={"Delete Selected"}
+                icon={<DeleteIcon />}
+                color="secondary"
                 disabled={selectedObjects.length === 0}
-              >
-                Delete Selected
-              </Button>
+                variant={"outlined"}
+              />
             </SecureComponent>
+            <RBIconButton
+              tooltip={"Download Selected"}
+              onClick={downloadSelected}
+              text={"Download Selected"}
+              icon={<DownloadIcon />}
+              color="primary"
+              disabled={selectedObjects.length === 0}
+              variant={"contained"}
+            />
           </div>
         </Grid>
         <Grid item xs={12}>
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 a3f63acc3..24d071bd4 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
@@ -74,13 +74,13 @@ import PreviewFileContent from "../Preview/PreviewFileContent";
 import RestoreFileVersion from "./RestoreFileVersion";
 import PageLayout from "../../../../Common/Layout/PageLayout";
 import VerticalTabs from "../../../../Common/VerticalTabs/VerticalTabs";
-import BoxIconButton from "../../../../Common/BoxIconButton/BoxIconButton";
 import SecureComponent from "../../../../../../common/SecureComponent/SecureComponent";
 import {
   completeObject,
   setNewObject,
   updateProgress,
 } from "../../../../ObjectBrowser/actions";
+import RBIconButton from "../../../BucketDetails/SummaryItems/RBIconButton";
 
 const RecoverIcon = React.lazy(
   () => import("../../../../../../icons/RecoverIcon")
@@ -551,18 +551,36 @@ const ObjectDetails = ({
                 }
                 actions={
                   <Fragment>
-                    <BoxIconButton
+                    <SecureComponent
+                      scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
+                      resource={bucketName}
+                      matchAll
+                      errorProps={{ disabled: true }}
+                    >
+                      <RBIconButton
+                        tooltip={"Delete Object"}
+                        onClick={() => {
+                          setDeleteOpen(true);
+                        }}
+                        text={""}
+                        icon={<DeleteIcon />}
+                        color="secondary"
+                        disabled={actualInfo.is_delete_marker}
+                        variant={"outlined"}
+                      />
+                    </SecureComponent>
+
+                    <RBIconButton
                       tooltip={"Share"}
-                      color="primary"
-                      aria-label="share"
                       onClick={() => {
                         shareObject();
                       }}
+                      text={""}
+                      icon={<ShareIcon />}
+                      color="primary"
                       disabled={actualInfo.is_delete_marker}
-                      size="large"
-                    >
-                      <ShareIcon />
-                    </BoxIconButton>
+                      variant={"outlined"}
+                    />
 
                     {downloadingFiles.includes(
                       `${bucketName}/${actualInfo.name}`
@@ -575,38 +593,18 @@ const ObjectDetails = ({
                         />
                       </div>
                     ) : (
-                      <BoxIconButton
+                      <RBIconButton
                         tooltip={"Download"}
+                        text={""}
+                        icon={<DownloadIcon />}
                         color="primary"
-                        aria-label="download"
                         onClick={() => {
                           downloadObject(actualInfo);
                         }}
                         disabled={actualInfo.is_delete_marker}
-                        size="large"
-                      >
-                        <DownloadIcon />
-                      </BoxIconButton>
+                        variant={"outlined"}
+                      />
                     )}
-                    <SecureComponent
-                      scopes={[IAM_SCOPES.S3_DELETE_OBJECT]}
-                      resource={bucketName}
-                      matchAll
-                      errorProps={{ disabled: true }}
-                    >
-                      <BoxIconButton
-                        tooltip={"Delete Object"}
-                        color="primary"
-                        aria-label="delete"
-                        onClick={() => {
-                          setDeleteOpen(true);
-                        }}
-                        disabled={actualInfo.is_delete_marker}
-                        size="large"
-                      >
-                        <DeleteIcon />
-                      </BoxIconButton>
-                    </SecureComponent>
                   </Fragment>
                 }
               />
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 89deff2fc..6026ec790 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -20,7 +20,7 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import { Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { AddIcon, GroupsIcon, UsersIcon } from "../../../icons";
 import { setErrorSnackMessage } from "../../../actions";
 import { GroupsList } from "./types";
@@ -49,6 +49,7 @@ import SecureComponent, {
 } from "../../../common/SecureComponent/SecureComponent";
 
 import withSuspense from "../Common/Components/withSuspense";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const DeleteGroup = withSuspense(React.lazy(() => import("./DeleteGroup")));
 const AddGroup = withSuspense(React.lazy(() => import("../Groups/AddGroup")));
@@ -221,17 +222,17 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
+            <RBIconButton
+              tooltip={"Create Group"}
+              text={"Create Group"}
               variant="contained"
               color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
               onClick={() => {
                 setSelectedGroup(null);
                 setGroupOpen(true);
               }}
-            >
-              Create Group
-            </Button>
+            />
           </SecureComponent>
         </Grid>
         {loading && <LinearProgress />}
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index 57202cdd1..4f5681138 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -15,9 +15,14 @@ import {
 } from "../../../actions";
 import { connect } from "react-redux";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid, Tooltip } from "@mui/material";
+import { Grid } from "@mui/material";
 import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import { IAMPoliciesIcon, TrashIcon, GroupsIcon } from "../../../icons";
+import {
+  IAMPoliciesIcon,
+  TrashIcon,
+  GroupsIcon,
+  AddIcon,
+} from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import history from "../../../history";
 import api from "../../../common/api";
@@ -30,7 +35,6 @@ import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSw
 import PageLayout from "../Common/Layout/PageLayout";
 import BackLink from "../../../common/BackLink";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import SearchBox from "../Common/SearchBox";
 import {
   CONSOLE_UI_RESOURCE,
@@ -40,6 +44,7 @@ import SecureComponent, {
   hasPermission,
 } from "../../../common/SecureComponent/SecureComponent";
 import GroupDetailsHeader from "./GroupDetailsHeader";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -191,17 +196,16 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
           scopes={[IAM_SCOPES.ADMIN_ADD_USER_TO_GROUP]}
           errorProps={{ disabled: true }}
         >
-          <Button
+          <RBIconButton
+            tooltip={memberActionText}
+            text={memberActionText}
             variant="contained"
             color="primary"
-            endIcon={<GroupsIcon />}
-            size="medium"
+            icon={<AddIcon />}
             onClick={() => {
               setUsersOpen(true);
             }}
-          >
-            {memberActionText}
-          </Button>
+          />
         </SecureComponent>
       </div>
 
@@ -236,17 +240,17 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
     <React.Fragment>
       <div className={classes.actionsTray}>
         <PanelTitle>Policies</PanelTitle>
-        <Button
+
+        <RBIconButton
+          tooltip={`Set Policies`}
+          text={`Set Policies`}
           variant="contained"
           color="primary"
-          endIcon={<IAMPoliciesIcon />}
-          size="medium"
+          icon={<IAMPoliciesIcon />}
           onClick={() => {
             setPolicyOpen(true);
           }}
-        >
-          Set Policies
-        </Button>
+        />
       </div>
       <div className={classes.tableBlock}>
         <TableWrapper
@@ -315,20 +319,18 @@ const GroupsDetails = ({ classes }: IGroupDetailsProps) => {
                   scopes={[IAM_SCOPES.ADMIN_REMOVE_USER_FROM_GROUP]}
                   errorProps={{ disabled: true }}
                 >
-                  <Tooltip title="Delete Group">
-                    <div className={classes.spacerLeft}>
-                      <BoxIconButton
-                        color="primary"
-                        aria-label="Delete Group"
-                        onClick={() => {
-                          setDeleteOpen(true);
-                        }}
-                        size="large"
-                      >
-                        <TrashIcon />
-                      </BoxIconButton>
-                    </div>
-                  </Tooltip>
+                  <div className={classes.spacerLeft}>
+                    <RBIconButton
+                      tooltip={`Delete Group`}
+                      text={``}
+                      variant="outlined"
+                      color="secondary"
+                      icon={<TrashIcon />}
+                      onClick={() => {
+                        setDeleteOpen(true);
+                      }}
+                    />
+                  </div>
                 </SecureComponent>
               </Fragment>
             }
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index a532e0cbc..073c79f43 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -23,7 +23,6 @@ import { LinearProgress } from "@mui/material";
 import { red } from "@mui/material/colors";
 import Grid from "@mui/material/Grid";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
-import Button from "@mui/material/Button";
 import {
   NotificationEndpointItem,
   NotificationEndpointsList,
@@ -45,10 +44,10 @@ import api from "../../../common/api";
 import RefreshIcon from "../../../icons/RefreshIcon";
 import history from "../../../history";
 import HelpBox from "../../../common/HelpBox";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import AButton from "../Common/AButton/AButton";
 import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface IListNotificationEndpoints {
   classes: any;
@@ -68,6 +67,7 @@ const styles = (theme: Theme) =>
     },
     rightActionItems: {
       display: "flex",
+      alignItems: "center",
       "& button": {
         whiteSpace: "nowrap",
       },
@@ -148,26 +148,27 @@ const ListNotificationEndpoints = ({
             overrideClass={classes.searchField}
           />
           <div className={classes.rightActionItems}>
-            <BoxIconButton
+            <RBIconButton
+              tooltip={"Refresh List"}
+              text={"Refresh"}
+              variant="outlined"
               color="primary"
-              aria-label="Refresh List"
+              icon={<RefreshIcon />}
               onClick={() => {
                 setIsLoading(true);
               }}
-              size="large"
-            >
-              <RefreshIcon />
-            </BoxIconButton>
-            <Button
+            />
+
+            <RBIconButton
+              tooltip={"Add Notification Target"}
+              text={" Add Notification Target"}
               variant="contained"
               color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
               onClick={() => {
                 history.push("/notification-endpoints/add");
               }}
-            >
-              Add Notification Target
-            </Button>
+            />
           </div>
         </Grid>
         {isLoading && <LinearProgress />}
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index 2952fca71..8fa276bb7 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -20,7 +20,6 @@ import get from "lodash/get";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { Policy, PolicyList } from "./types";
 import { AddIcon, IAMPoliciesIcon } from "../../../icons";
@@ -49,6 +48,7 @@ import SecureComponent, {
 import SearchBox from "../Common/SearchBox";
 
 import withSuspense from "../Common/Components/withSuspense";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const AddPolicy = withSuspense(React.lazy(() => import("./AddPolicy")));
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
@@ -208,17 +208,17 @@ const ListPolicies = ({ classes, setErrorSnackMessage }: IPoliciesProps) => {
             resource={CONSOLE_UI_RESOURCE}
             errorProps={{ disabled: true }}
           >
-            <Button
+            <RBIconButton
+              tooltip={"Create Policy"}
+              text={"Create Policy"}
               variant="contained"
               color="primary"
-              endIcon={<AddIcon />}
+              icon={<AddIcon />}
               onClick={() => {
                 setAddScreenOpen(true);
                 setPolicyEdit(null);
               }}
-            >
-              Create Policy
-            </Button>
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 2e496b0c8..4c175351a 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -46,7 +46,6 @@ import TrashIcon from "../../../icons/TrashIcon";
 import PageLayout from "../Common/Layout/PageLayout";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import BackLink from "../../../common/BackLink";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_SCOPES,
@@ -57,6 +56,7 @@ import SecureComponent, {
 
 import withSuspense from "../Common/Components/withSuspense";
 import { AppState } from "../../../store";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const DeletePolicy = withSuspense(React.lazy(() => import("./DeletePolicy")));
 
@@ -355,29 +355,28 @@ const PolicyDetails = ({
                   resource={CONSOLE_UI_RESOURCE}
                   errorProps={{ disabled: true }}
                 >
-                  <BoxIconButton
+                  <RBIconButton
                     tooltip={"Delete Policy"}
-                    color="primary"
-                    aria-label="Delete Policy"
+                    text={"Delete Policy"}
+                    variant="outlined"
+                    color="secondary"
+                    icon={<TrashIcon />}
                     onClick={deletePolicy}
-                  >
-                    <TrashIcon />
-                  </BoxIconButton>
+                  />
                 </SecureComponent>
 
-                <BoxIconButton
+                <RBIconButton
                   tooltip={"Refresh"}
+                  text={"Refresh"}
+                  variant="outlined"
                   color="primary"
-                  aria-label="Refresh List"
+                  icon={<RefreshIcon />}
                   onClick={() => {
                     setLoadingUsers(true);
                     setLoadingGroups(true);
                     setLoadingPolicy(true);
                   }}
-                  size="large"
-                >
-                  <RefreshIcon />
-                </BoxIconButton>
+                />
               </Fragment>
             }
           />
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index bb1095562..9d5a245db 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -17,9 +17,7 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import Grid from "@mui/material/Grid";
-import TextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
-import { Box, Button, LinearProgress } from "@mui/material";
+import { LinearProgress } from "@mui/material";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -37,15 +35,16 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import history from "../../../../history";
 import RefreshIcon from "../../../../icons/RefreshIcon";
-import SearchIcon from "../../../../icons/SearchIcon";
 import PageHeader from "../../Common/PageHeader/PageHeader";
 import TenantListItem from "./TenantListItem";
 import HelpBox from "../../../../common/HelpBox";
-import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import AButton from "../../Common/AButton/AButton";
 
 import withSuspense from "../../Common/Components/withSuspense";
 import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
+import SearchBox from "../../Common/SearchBox";
+import PageLayout from "../../Common/Layout/PageLayout";
 
 const CredentialsPrompt = withSuspense(
   React.lazy(() => import("../../Common/CredentialsPrompt/CredentialsPrompt"))
@@ -99,6 +98,11 @@ const styles = (theme: Theme) =>
       marginTop: 25,
       height: "calc(100vh - 195px)",
     },
+    searchField: {
+      ...searchField.searchField,
+      marginRight: "auto",
+      maxWidth: 380,
+    },
   });
 
 const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
@@ -188,141 +192,91 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
       <PageHeader
         label="Tenants"
         actions={
-          <Fragment>
-            <Grid
-              container
-              direction="row"
-              justifyContent="flex-end"
-              alignItems="center"
-              className={classes.actionHeaderItems}
-            >
-              <Box display={{ xs: "none", sm: "none", md: "block" }}>
-                <Grid item>
-                  <div className={classes.theaderSearchLabel}>
-                    Filter Tenants:
-                  </div>
-                </Grid>
-              </Box>
-              <Box display={{ xs: "block", sm: "block", md: "none" }}>
-                <TextField
-                  className={classes.theaderSearch}
-                  variant={"outlined"}
-                  id="search-resource"
-                  placeholder={"Filter Tenants"}
-                  onChange={(val) => {
-                    setFilterTenants(val.target.value);
-                  }}
-                  inputProps={{
-                    disableUnderline: true,
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <SearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Box>
-              <Box display={{ xs: "none", sm: "none", md: "block" }}>
-                <TextField
-                  className={classes.theaderSearch}
-                  variant={"outlined"}
-                  id="search-resource"
-                  onChange={(val) => {
-                    setFilterTenants(val.target.value);
-                  }}
-                  inputProps={{
-                    disableUnderline: true,
-                    endAdornment: (
-                      <InputAdornment position="end">
-                        <SearchIcon />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
-              </Box>
+          <Grid
+            item
+            xs={12}
+            className={classes.actionsTray}
+            marginRight={"30px"}
+          >
+            <SearchBox
+              placeholder={"Filter Tenants"}
+              onChange={(val) => {
+                setFilterTenants(val);
+              }}
+              overrideClass={classes.searchField}
+            />
 
-              <Grid item>
-                <Button
-                  variant="contained"
-                  color="primary"
-                  endIcon={<AddIcon />}
-                  onClick={() => {
-                    history.push("/tenants/add");
-                  }}
-                  className={classes.addTenant}
-                >
-                  Create Tenant
-                </Button>
-              </Grid>
-            </Grid>
-          </Fragment>
+            <RBIconButton
+              tooltip={"Refresh Tenant List"}
+              text={""}
+              onClick={() => {
+                setIsLoading(true);
+              }}
+              icon={<RefreshIcon />}
+              color="primary"
+              variant={"outlined"}
+            />
+            <RBIconButton
+              tooltip={"Create Tenant"}
+              text={"Create Tenant"}
+              onClick={() => {
+                history.push("/tenants/add");
+              }}
+              icon={<AddIcon />}
+              color="primary"
+              variant={"contained"}
+            />
+          </Grid>
         }
       />
-      <Grid container>
-        <Grid item xs={12} className={classes.container}>
-          <Grid container>
-            <Grid item xs={12} className={classes.mainActions}>
-              <BoxIconButton
-                color="primary"
-                aria-label="Refresh Tenant List"
-                onClick={() => {
-                  setIsLoading(true);
-                }}
-                size="large"
-              >
-                <RefreshIcon />
-              </BoxIconButton>
-            </Grid>
-
-            <Grid item xs={12} className={classes.tenantsList}>
-              {isLoading && <LinearProgress />}
-              {!isLoading && (
-                <Fragment>
-                  {filteredRecords.length !== 0 && (
-                    <VirtualizedList
-                      rowRenderFunction={renderItemLine}
-                      totalItems={filteredRecords.length}
-                    />
-                  )}
-                  {filteredRecords.length === 0 && (
-                    <Grid
-                      container
-                      justifyContent={"center"}
-                      alignContent={"center"}
-                      alignItems={"center"}
-                    >
-                      <Grid item xs={8}>
-                        <HelpBox
-                          iconComponent={<TenantsIcon />}
-                          title={"Tenants"}
-                          help={
-                            <Fragment>
-                              Tenant is the logical structure to represent a
-                              MinIO deployment. A tenant can have different size
-                              and configurations from other tenants, even a
-                              different storage class.
-                              <br />
-                              <br />
-                              To get started,&nbsp;
-                              <AButton
-                                onClick={() => {
-                                  history.push("/tenants/add");
-                                }}
-                              >
-                                Create a Tenant.
-                              </AButton>
-                            </Fragment>
-                          }
-                        />
-                      </Grid>
-                    </Grid>
-                  )}
-                </Fragment>
+      <PageLayout>
+        <Grid item xs={12} className={classes.tenantsList}>
+          {isLoading && <LinearProgress />}
+          {!isLoading && (
+            <Fragment>
+              {filteredRecords.length !== 0 && (
+                <VirtualizedList
+                  rowRenderFunction={renderItemLine}
+                  totalItems={filteredRecords.length}
+                />
               )}
-            </Grid>
-          </Grid>
+              {filteredRecords.length === 0 && (
+                <Grid
+                  container
+                  justifyContent={"center"}
+                  alignContent={"center"}
+                  alignItems={"center"}
+                >
+                  <Grid item xs={8}>
+                    <HelpBox
+                      iconComponent={<TenantsIcon />}
+                      title={"Tenants"}
+                      help={
+                        <Fragment>
+                          Tenant is the logical structure to represent a MinIO
+                          deployment. A tenant can have different size and
+                          configurations from other tenants, even a different
+                          storage class.
+                          <br />
+                          <br />
+                          To get started,&nbsp;
+                          <AButton
+                            onClick={() => {
+                              history.push("/tenants/add");
+                            }}
+                          >
+                            Create a Tenant.
+                          </AButton>
+                        </Fragment>
+                      }
+                    />
+                  </Grid>
+                </Grid>
+              )}
+            </Fragment>
+          )}
         </Grid>
-      </Grid>
+      </PageLayout>
     </Fragment>
   );
 };
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
index e032d7931..1b3395ad5 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/TenantListItem.tsx
@@ -15,12 +15,11 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment } from "react";
-import { Button } from "@mui/material";
 import { ITenant, ValueUnit } from "./types";
 import { connect } from "react-redux";
 import { setErrorSnackMessage } from "../../../../actions";
 import Grid from "@mui/material/Grid";
-import { ArrowRightIcon, CircleIcon } from "../../../../icons";
+import { ArrowRightIcon, CircleIcon, SettingsIcon } from "../../../../icons";
 import history from "../../../../history";
 import TenantsIcon from "../../../../icons/TenantsIcon";
 import { Theme } from "@mui/material/styles";
@@ -29,6 +28,7 @@ import withStyles from "@mui/styles/withStyles";
 import { niceBytes } from "../../../../common/utils";
 import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
 import { tenantIsOnline } from "./utils";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -176,31 +176,32 @@ const TenantListItem = ({ tenant, classes }: ITenantListItem) => {
             </div>
           </Grid>
           <Grid item xs={4} textAlign={"end"}>
-            <Button
-              size={"small"}
-              color={"primary"}
-              variant="outlined"
+            <RBIconButton
+              tooltip={"Manage Tenant"}
+              text={"Manage"}
               disabled={!tenantIsOnline(tenant)}
-              className={classes.manageButton}
               onClick={() => {
                 history.push(
                   `/namespaces/${tenant.namespace}/tenants/${tenant.name}/hop`
                 );
               }}
-            >
-              Manage
-            </Button>
-            <Button
-              endIcon={<ArrowRightIcon />}
-              variant="contained"
+              icon={<SettingsIcon />}
+              color="primary"
+              variant={"outlined"}
+            />
+            <RBIconButton
+              tooltip={"View Tenant"}
+              text={"View"}
+              disabled={!tenantIsOnline(tenant)}
               onClick={() => {
                 history.push(
                   `/namespaces/${tenant.namespace}/tenants/${tenant.name}`
                 );
               }}
-            >
-              View
-            </Button>
+              icon={<ArrowRightIcon />}
+              color="primary"
+              variant={"contained"}
+            />
           </Grid>
           <Grid item xs={12}>
             <hr />
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
index 9db029b77..6ddafb065 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PoolsSummary.tsx
@@ -25,7 +25,7 @@ import {
   tableStyles,
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, TextField } from "@mui/material";
+import { TextField } from "@mui/material";
 import Grid from "@mui/material/Grid";
 import { AddIcon } from "../../../../icons";
 import { IPool, ITenant } from "../ListTenants/types";
@@ -36,6 +36,7 @@ import InputAdornment from "@mui/material/InputAdornment";
 import { AppState } from "../../../../store";
 import { setTenantDetailsLoad } from "../actions";
 import SearchIcon from "../../../../icons/SearchIcon";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface IPoolsSummary {
   classes: any;
@@ -117,16 +118,17 @@ const PoolsSummary = ({
             }}
             variant="standard"
           />
-          <Button
-            variant="contained"
-            color="primary"
-            endIcon={<AddIcon />}
+
+          <RBIconButton
+            tooltip={"Expand Tenant"}
+            text={"Expand Tenant"}
             onClick={() => {
               setAddPool(true);
             }}
-          >
-            Expand Tenant
-          </Button>
+            icon={<AddIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         </Grid>
         <Grid item xs={12}>
           <br />
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
index 8b78ecd98..5a6af631c 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/SubnetLicenseTenant.tsx
@@ -20,13 +20,14 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
 import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { niceBytes } from "../../../../common/utils";
 import Moment from "react-moment";
 import { Link } from "react-router-dom";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import { LicenseInfo } from "../../License/types";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface ISubnetLicenseTenant {
   classes: any;
@@ -229,25 +230,24 @@ const SubnetLicenseTenant = ({
                 }}
                 className={classes.noUnderLine}
               >
-                <Button
-                  className={classes.licenseButton}
-                  variant="contained"
+                <RBIconButton
+                  tooltip={"Activate Product"}
+                  text={"Activate Product"}
+                  onClick={() => false}
                   color="primary"
-                >
-                  Activate Product
-                </Button>
+                  variant={"contained"}
+                />
               </Link>
             )}
             {licenseInfo && tenant && (
-              <Button
+              <RBIconButton
                 disabled={loadingActivateProduct}
-                className={classes.licenseButton}
-                variant="contained"
-                color="primary"
+                tooltip={"Attach License"}
+                text={"Attach License"}
                 onClick={() => activateProduct(tenant.namespace, tenant.name)}
-              >
-                Attach License
-              </Button>
+                color="primary"
+                variant={"contained"}
+              />
             )}
           </Grid>
         )
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
index c2a2b98b1..e1d298bf5 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLogging.tsx
@@ -26,7 +26,7 @@ import {
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@mui/material/Grid";
-import { Button, CircularProgress, DialogContentText } from "@mui/material";
+import { CircularProgress, DialogContentText } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import api from "../../../../common/api";
 import { ITenant } from "../ListTenants/types";
@@ -39,6 +39,7 @@ import KeyPairView from "./KeyPairView";
 import { ITenantLogsStruct } from "../ListTenants/types";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface ITenantLogs {
   classes: any;
@@ -220,16 +221,16 @@ const TenantLogging = ({
           indicatorLabels={["Enabled", "Disabled"]}
         />
         {!disabled && !loadingTenantLogs && (
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<EditIcon />}
+          <RBIconButton
+            tooltip={"Edit Logging configuration"}
+            text={"Edit"}
             onClick={() => {
               setEdit(true);
             }}
-          >
-            Edit
-          </Button>
+            icon={<EditIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         )}
       </div>
       {!disabled && !loadingTenantLogs && (
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
index b90c3d19f..925b98bb5 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantMonitoring.tsx
@@ -26,7 +26,7 @@ import {
   searchField,
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Button, CircularProgress, DialogContentText } from "@mui/material";
+import { CircularProgress, DialogContentText } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -39,6 +39,7 @@ import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/For
 import { ITenantMonitoringStruct } from "../ListTenants/types";
 import KeyPairView from "./KeyPairView";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface ITenantMonitoring {
   classes: any;
@@ -198,16 +199,16 @@ const TenantMonitoring = ({
           description=""
         />
         {prometheusMonitoringEnabled && (
-          <Button
-            variant="contained"
-            color="primary"
-            startIcon={<EditIcon />}
+          <RBIconButton
+            tooltip={"Edit Monitoring configuration"}
+            text={"Edit"}
             onClick={() => {
               setEdit(true);
             }}
-          >
-            Edit
-          </Button>
+            icon={<EditIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         )}
       </div>
       {prometheusMonitoringEnabled && monitoringInfo !== undefined && (
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
index 4b5871fda..64638a117 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -24,7 +24,7 @@ import {
   containerForHeader,
   tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
-import { Box, Button, Grid, Stack } from "@mui/material";
+import { Box, Grid, Stack } from "@mui/material";
 import Paper from "@mui/material/Paper";
 import { ITenant } from "../ListTenants/types";
 import UpdateTenantModal from "./UpdateTenantModal";
@@ -37,6 +37,8 @@ import SummaryUsageBar from "../../Common/UsageBarWrapper/SummaryUsageBar";
 import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import StackRow from "../../Common/UsageBarWrapper/StackRow";
+import { SettingsIcon } from "../../../../icons";
+import RBIconButton from "../../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface ITenantsSummary {
   classes: any;
@@ -236,20 +238,19 @@ const TenantSummary = ({
           <h3>Details</h3>
         </StackItem>
         <StackItem>
-          <Button
-            size={"small"}
-            color={"primary"}
-            variant="contained"
-            style={{ textDecoration: "none !important" }}
+          <RBIconButton
+            tooltip={"Manage Tenant"}
+            text={"Manage Tenant"}
             onClick={() => {
               history.push(
                 `/namespaces/${tenantNamespace}/tenants/${tenantName}/hop`
               );
             }}
             disabled={!tenant || !tenantIsOnline(tenant)}
-          >
-            Manage Tenant
-          </Button>
+            icon={<SettingsIcon />}
+            color="primary"
+            variant={"contained"}
+          />
         </StackItem>
       </Stack>
 
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index 30d3b1d6e..22d0c0bcd 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -20,11 +20,10 @@ import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import api from "../../../common/api";
-import { Button, Grid, LinearProgress } from "@mui/material";
-import GroupIcon from "@mui/icons-material/Group";
+import { Grid, LinearProgress } from "@mui/material";
 import { User, UsersList } from "./types";
 import { usersSort } from "../../../utils/sortFunctions";
-import { AddIcon, UsersIcon } from "../../../icons";
+import { GroupsIcon, AddIcon, UsersIcon } from "../../../icons";
 import {
   actionsTray,
   containerForHeader,
@@ -50,6 +49,7 @@ import {
 import SecureComponent, {
   hasPermission,
 } from "../../../common/SecureComponent/SecureComponent";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const AddUser = withSuspense(React.lazy(() => import("./AddUser")));
 const SetPolicy = withSuspense(
@@ -249,19 +249,19 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
             resource={CONSOLE_UI_RESOURCE}
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="outlined"
+            <RBIconButton
+              tooltip={"Add to Group"}
+              text={"Add to Group"}
+              icon={<GroupsIcon />}
               color="primary"
-              endIcon={<GroupIcon />}
               disabled={checkedUsers.length <= 0}
               onClick={() => {
                 if (checkedUsers.length > 0) {
                   setAddGroupOpen(true);
                 }
               }}
-            >
-              Add to Group
-            </Button>
+              variant={"outlined"}
+            />
           </SecureComponent>
           <SecureComponent
             scopes={[
@@ -273,17 +273,17 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
             matchAll
             errorProps={{ disabled: true }}
           >
-            <Button
-              variant="contained"
+            <RBIconButton
+              tooltip={"Create User"}
+              text={"Create User"}
+              icon={<AddIcon />}
               color="primary"
-              endIcon={<AddIcon />}
               onClick={() => {
                 setAddScreenOpen(true);
                 setSelectedUser(null);
               }}
-            >
-              Create User
-            </Button>
+              variant={"contained"}
+            />
           </SecureComponent>
         </Grid>
         <Grid item xs={12}>
diff --git a/portal-ui/src/screens/Console/Users/UserDetails.tsx b/portal-ui/src/screens/Console/Users/UserDetails.tsx
index 9016e89ce..db87ccd75 100644
--- a/portal-ui/src/screens/Console/Users/UserDetails.tsx
+++ b/portal-ui/src/screens/Console/Users/UserDetails.tsx
@@ -21,11 +21,11 @@ import { Link } from "react-router-dom";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { Button, Grid } from "@mui/material";
+import { Grid } from "@mui/material";
 import {
   AddIcon,
   IAMPoliciesIcon,
-  LockIcon,
+  PasswordKeyIcon,
   TrashIcon,
   UsersIcon,
 } from "../../../icons";
@@ -51,12 +51,12 @@ import UserServiceAccountsPanel from "./UserServiceAccountsPanel";
 import ChangeUserPasswordModal from "../Account/ChangeUserPasswordModal";
 import DeleteUserString from "./DeleteUserString";
 import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
-import BoxIconButton from "../Common/BoxIconButton/BoxIconButton";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
 import PageLayout from "../Common/Layout/PageLayout";
 import VerticalTabs from "../Common/VerticalTabs/VerticalTabs";
 import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import BackLink from "../../../common/BackLink";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -261,24 +261,23 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                   switchOnly
                 />
 
-                <BoxIconButton
-                  color="primary"
-                  aria-label="Delete User"
+                <RBIconButton
+                  tooltip={"Delete User"}
+                  text={""}
                   onClick={deleteUser}
-                  size="large"
-                >
-                  <TrashIcon />
-                </BoxIconButton>
+                  icon={<TrashIcon />}
+                  color="secondary"
+                  variant={"outlined"}
+                />
 
-                <BoxIconButton
+                <RBIconButton
                   tooltip={"Change Password"}
-                  color="primary"
-                  aria-label="Change Password"
+                  text={""}
                   onClick={changeUserPassword}
-                  size="large"
-                >
-                  <LockIcon />
-                </BoxIconButton>
+                  icon={<PasswordKeyIcon />}
+                  color="primary"
+                  variant={"outlined"}
+                />
               </Fragment>
             }
           />
@@ -294,17 +293,16 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                 <React.Fragment>
                   <div className={classes.actionsTray}>
                     <PanelTitle>Groups</PanelTitle>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      endIcon={<AddIcon />}
-                      size="medium"
+                    <RBIconButton
+                      tooltip={"Add to Groups"}
+                      text={"Add to Groups"}
                       onClick={() => {
                         setAddGroupOpen(true);
                       }}
-                    >
-                      Add to Groups
-                    </Button>
+                      icon={<AddIcon />}
+                      color="primary"
+                      variant={"contained"}
+                    />
                   </div>
                   <div className={classes.tableBlock}>
                     <TableWrapper
@@ -338,17 +336,17 @@ const UserDetails = ({ classes, match }: IUserDetailsProps) => {
                 <React.Fragment>
                   <div className={classes.actionsTray}>
                     <PanelTitle>Policies</PanelTitle>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      endIcon={<IAMPoliciesIcon />}
-                      size="medium"
+
+                    <RBIconButton
+                      tooltip={"Assign Policies"}
+                      text={"Assign Policies"}
                       onClick={() => {
                         setPolicyOpen(true);
                       }}
-                    >
-                      Assign Policies
-                    </Button>
+                      icon={<IAMPoliciesIcon />}
+                      color="primary"
+                      variant={"contained"}
+                    />
                   </div>
                   <div className={classes.tableBlock}>
                     <TableWrapper
diff --git a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
index b018523f1..0d7bdc3d5 100644
--- a/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
+++ b/portal-ui/src/screens/Console/Users/UserServiceAccountsPanel.tsx
@@ -35,8 +35,8 @@ import AddUserServiceAccount from "./AddUserServiceAccount";
 import DeleteServiceAccount from "../Account/DeleteServiceAccount";
 import CredentialsPrompt from "../Common/CredentialsPrompt/CredentialsPrompt";
 import { AddIcon } from "../../../icons";
-import Button from "@mui/material/Button";
 import PanelTitle from "../Common/PanelTitle/PanelTitle";
+import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 
 interface IUserServiceAccountsProps {
   classes: any;
@@ -166,19 +166,20 @@ const UserServiceAccountsPanel = ({
       )}
       <div className={classes.actionsTray}>
         <PanelTitle>Service Accounts</PanelTitle>
-        <Button
+
+        <RBIconButton
+          tooltip={"Create service account"}
+          text={"Create service account"}
           variant="contained"
           color="primary"
-          endIcon={<AddIcon />}
+          icon={<AddIcon />}
           onClick={() => {
             setAddScreenOpen(true);
             setAddScreenOpen(true);
             setSelectedServiceAccount(null);
           }}
           disabled={!hasPolicy}
-        >
-          Create service account
-        </Button>
+        />
       </div>
       <div className={classes.tableBlock}>
         <TableWrapper
diff --git a/portal-ui/src/utils/validationFunctions.ts b/portal-ui/src/utils/validationFunctions.ts
index a71e6011a..5125a06a9 100644
--- a/portal-ui/src/utils/validationFunctions.ts
+++ b/portal-ui/src/utils/validationFunctions.ts
@@ -53,7 +53,6 @@ export const commonFormValidation = (fieldsValidate: IValidation[]) => {
     if (field.pattern && field.customPatternMessage) {
       const rgx = new RegExp(field.pattern, "g");
 
-      console.log(field);
       if (
         field.value &&
         field.value.trim() !== "" &&