diff --git a/portal-ui/package.json b/portal-ui/package.json
index 14e46fa555..2074aec4f3 100644
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -18,7 +18,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mds": "https://github.com/minio/mds.git#v0.7.0",
+    "mds": "https://github.com/minio/mds.git#v0.8.1",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",
diff --git a/portal-ui/src/common/types.ts b/portal-ui/src/common/types.ts
index 32829fafaf..7b4a327817 100644
--- a/portal-ui/src/common/types.ts
+++ b/portal-ui/src/common/types.ts
@@ -97,3 +97,8 @@ export interface IEmbeddedCustomStyles {
   inputBox: IEmbeddedInputBox;
   switch: IEmbeddedSwitch;
 }
+
+export interface SelectorTypes {
+  label: any;
+  value: string;
+}
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
index eac29ae799..9247f4520d 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessDetailsPanel.tsx
@@ -17,18 +17,14 @@
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
-import { Paper } from "@mui/material";
-import Tabs from "@mui/material/Tabs";
-import Tab from "@mui/material/Tab";
-
-import { TabPanel } from "../../../shared/tabs";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
+import { DataTable, SectionTitle, Tabs } from "mds";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_PAGES,
   IAM_SCOPES,
 } from "../../../../common/SecureComponent/permissions";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import {
   hasPermission,
   SecureComponent,
@@ -38,15 +34,6 @@ import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-
-function a11yProps(index: any) {
-  return {
-    id: `simple-tab-${index}`,
-    "aria-controls": `simple-tabpanel-${index}`,
-  };
-}
 
 const AccessDetails = () => {
   const dispatch = useAppDispatch();
@@ -55,7 +42,7 @@ const AccessDetails = () => {
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
 
-  const [curTab, setCurTab] = useState<number>(0);
+  const [curTab, setCurTab] = useState<string>("simple-tab-0");
   const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
   const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
@@ -158,65 +145,63 @@ const AccessDetails = () => {
 
   return (
     <Fragment>
-      <PanelTitle>Access Audit</PanelTitle>
+      <SectionTitle separator>Access Audit</SectionTitle>
       <Tabs
-        value={curTab}
-        onChange={(e: React.ChangeEvent<{}>, newValue: number) => {
+        currentTabOrPath={curTab}
+        onTabClick={(newValue: string) => {
           setCurTab(newValue);
         }}
-        indicatorColor="primary"
-        textColor="primary"
-        aria-label="cluster-tabs"
-        variant="scrollable"
-        scrollButtons="auto"
-      >
-        {displayPoliciesList && <Tab label="Policies" {...a11yProps(0)} />}
-        {displayUsersList && <Tab label="Users" {...a11yProps(1)} />}
-      </Tabs>
-      <Paper>
-        <TabPanel index={0} value={curTab}>
-          <SecureComponent
-            scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
-            resource={bucketName}
-            errorProps={{ disabled: true }}
-          >
-            {bucketPolicy && (
-              <TableWrapper
-                noBackground={true}
-                itemActions={PolicyActions}
-                columns={[{ label: "Name", elementKey: "name" }]}
-                isLoading={loadingPolicies}
-                records={bucketPolicy}
-                entityName="Policies"
-                idField="name"
-              />
-            )}
-          </SecureComponent>
-        </TabPanel>
-
-        <TabPanel index={1} value={curTab}>
-          <SecureComponent
-            scopes={[
-              IAM_SCOPES.ADMIN_GET_POLICY,
-              IAM_SCOPES.ADMIN_LIST_USERS,
-              IAM_SCOPES.ADMIN_LIST_GROUPS,
-            ]}
-            resource={bucketName}
-            matchAll
-            errorProps={{ disabled: true }}
-          >
-            <TableWrapper
-              noBackground={true}
-              itemActions={userTableActions}
-              columns={[{ label: "User", elementKey: "accessKey" }]}
-              isLoading={loadingUsers}
-              records={bucketUsers}
-              entityName="Users"
-              idField="accessKey"
-            />
-          </SecureComponent>
-        </TabPanel>
-      </Paper>
+        horizontal
+        options={[
+          {
+            tabConfig: { label: "Policies", id: "simple-tab-0" },
+            content: (
+              <SecureComponent
+                scopes={[IAM_SCOPES.ADMIN_LIST_USER_POLICIES]}
+                resource={bucketName}
+                errorProps={{ disabled: true }}
+              >
+                {bucketPolicy && (
+                  <DataTable
+                    noBackground={true}
+                    itemActions={PolicyActions}
+                    columns={[{ label: "Name", elementKey: "name" }]}
+                    isLoading={loadingPolicies}
+                    records={bucketPolicy}
+                    entityName="Policies"
+                    idField="name"
+                  />
+                )}
+              </SecureComponent>
+            ),
+          },
+          {
+            tabConfig: { label: "Users", id: "simple-tab-1" },
+            content: (
+              <SecureComponent
+                scopes={[
+                  IAM_SCOPES.ADMIN_GET_POLICY,
+                  IAM_SCOPES.ADMIN_LIST_USERS,
+                  IAM_SCOPES.ADMIN_LIST_GROUPS,
+                ]}
+                resource={bucketName}
+                matchAll
+                errorProps={{ disabled: true }}
+              >
+                <DataTable
+                  noBackground={true}
+                  itemActions={userTableActions}
+                  columns={[{ label: "User", elementKey: "accessKey" }]}
+                  isLoading={loadingUsers}
+                  records={bucketUsers}
+                  entityName="Users"
+                  idField="accessKey"
+                />
+              </SecureComponent>
+            ),
+          },
+        ]}
+      />
     </Fragment>
   );
 };
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
index 226d1073d5..e156ef625f 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AccessRulePanel.tsx
@@ -15,35 +15,22 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+import { AddIcon, Button, DataTable, SectionTitle } from "mds";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { Theme } from "@mui/material/styles";
-import { AddIcon, Button } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import Grid from "@mui/material/Grid";
-import {
-  actionsTray,
-  containerForHeader,
-  objectBrowserCommon,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
+import { api } from "api";
+import { AccessRule as IAccessRule } from "api/consoleApi";
+import { errorToHandler } from "api/errors";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import {
   hasPermission,
   SecureComponent,
 } from "../../../../common/SecureComponent";
-
-import withSuspense from "../../Common/Components/withSuspense";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
-import makeStyles from "@mui/styles/makeStyles";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
+import withSuspense from "../../Common/Components/withSuspense";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
-import { api } from "api";
-import { AccessRule as IAccessRule } from "api/consoleApi";
-import { errorToHandler } from "api/errors";
 
 const AddAccessRuleModal = withSuspense(
   React.lazy(() => import("./AddAccessRule")),
@@ -55,26 +42,8 @@ const EditAccessRuleModal = withSuspense(
   React.lazy(() => import("./EditAccessRule")),
 );
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    "@global": {
-      ".rowLine:hover  .iconFileElm": {
-        backgroundImage: "url(/images/ob_file_filled.svg)",
-      },
-      ".rowLine:hover  .iconFolderElm": {
-        backgroundImage: "url(/images/ob_folder_filled.svg)",
-      },
-    },
-    ...actionsTray,
-    ...searchField,
-    ...objectBrowserCommon,
-    ...containerForHeader,
-  }),
-);
-
 const AccessRule = () => {
   const dispatch = useAppDispatch();
-  const classes = useStyles();
   const params = useParams();
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
@@ -196,60 +165,60 @@ const AccessRule = () => {
           initial={initialAccess}
         />
       )}
-      <Grid item xs={12} className={classes.actionsTray}>
-        <PanelTitle>Anonymous Access</PanelTitle>
-        <SecureComponent
-          scopes={[
-            IAM_SCOPES.S3_GET_BUCKET_POLICY,
-            IAM_SCOPES.S3_PUT_BUCKET_POLICY,
-            IAM_SCOPES.S3_GET_ACTIONS,
-            IAM_SCOPES.S3_PUT_ACTIONS,
+      <SectionTitle
+        separator
+        sx={{ marginBottom: 15 }}
+        actions={
+          <SecureComponent
+            scopes={[
+              IAM_SCOPES.S3_GET_BUCKET_POLICY,
+              IAM_SCOPES.S3_PUT_BUCKET_POLICY,
+              IAM_SCOPES.S3_GET_ACTIONS,
+              IAM_SCOPES.S3_PUT_ACTIONS,
+            ]}
+            resource={bucketName}
+            matchAll
+            errorProps={{ disabled: true }}
+          >
+            <TooltipWrapper tooltip={"Add Access Rule"}>
+              <Button
+                id={"add-bucket-access-rule"}
+                onClick={() => {
+                  setAddAccessRuleOpen(true);
+                }}
+                label={"Add Access Rule"}
+                icon={<AddIcon />}
+                variant={"callAction"}
+              />
+            </TooltipWrapper>
+          </SecureComponent>
+        }
+      >
+        Anonymous Access
+      </SectionTitle>
+      <SecureComponent
+        scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
+        resource={bucketName}
+        errorProps={{ disabled: true }}
+      >
+        <DataTable
+          itemActions={AccessRuleActions}
+          columns={[
+            {
+              label: "Prefix",
+              elementKey: "prefix",
+              renderFunction: (prefix: string) => {
+                return prefix || "/";
+              },
+            },
+            { label: "Access", elementKey: "access" },
           ]}
-          resource={bucketName}
-          matchAll
-          errorProps={{ disabled: true }}
-        >
-          <TooltipWrapper tooltip={"Add Access Rule"}>
-            <Button
-              id={"add-bucket-access-rule"}
-              onClick={() => {
-                setAddAccessRuleOpen(true);
-              }}
-              label={"Add Access Rule"}
-              icon={<AddIcon />}
-              variant={"callAction"}
-            />
-          </TooltipWrapper>
-        </SecureComponent>
-      </Grid>
-      <Grid item sx={{ border: "#EAEDEE 1px solid" }}>
-        <SecureComponent
-          scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
-          resource={bucketName}
-          errorProps={{ disabled: true }}
-        >
-          {accessRules && (
-            <TableWrapper
-              noBackground={true}
-              itemActions={AccessRuleActions}
-              columns={[
-                {
-                  label: "Prefix",
-                  elementKey: "prefix",
-                  renderFunction: (prefix: string) => {
-                    return prefix || "/";
-                  },
-                },
-                { label: "Access", elementKey: "access" },
-              ]}
-              isLoading={loadingAccessRules}
-              records={accessRules}
-              entityName="Access Rules"
-              idField="prefix"
-            />
-          )}
-        </SecureComponent>
-      </Grid>
+          isLoading={loadingAccessRules}
+          records={accessRules || []}
+          entityName="Access Rules"
+          idField="prefix"
+        />
+      </SecureComponent>
     </Fragment>
   );
 };
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
index 4bb2f841c9..78ab6e0adc 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddAccessRule.tsx
@@ -14,46 +14,35 @@
 // 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 ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Grid } from "@mui/material";
-import { AddAccessRuleIcon, Button } from "mds";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import {
-  formFieldStyles,
-  modalStyleUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
+  AddAccessRuleIcon,
+  Button,
+  FormLayout,
+  Grid,
+  InputBox,
+  Select,
+} from "mds";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import {
   setErrorSnackMessage,
   setSnackBarMessage,
 } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
 
 interface IAddAccessRule {
-  classes: any;
   modalOpen: boolean;
   onClose: () => any;
   bucket: string;
   prefilledRoute?: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    ...modalStyleUtils,
-  });
-
 const AddAccessRule = ({
   modalOpen,
   onClose,
-  classes,
   bucket,
   prefilledRoute,
 }: IAddAccessRule) => {
@@ -102,36 +91,32 @@ const AddAccessRule = ({
       onClose={onClose}
       titleIcon={<AddAccessRuleIcon />}
     >
-      <Grid container>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            value={prefix}
-            label={"Prefix"}
-            id={"prefix"}
-            name={"prefix"}
-            placeholder={"Enter Prefix"}
-            onChange={(e) => {
-              setPrefix(e.target.value);
-            }}
-            tooltip={
-              "Enter '/' to apply the rule to all prefixes and objects at the bucket root. Do not include the wildcard asterisk '*' as part of the prefix *unless* it is an explicit part of the prefix name. The Console automatically appends an asterisk to the appropriate sections of the resulting IAM policy."
-            }
-          />
-        </Grid>
-        <Grid item xs={12}>
-          <SelectWrapper
-            id="access"
-            name="Access"
-            onChange={(e) => {
-              setSelectedAccess(e.target.value);
-            }}
-            label="Access"
-            value={selectedAccess}
-            options={accessOptions}
-            disabled={false}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.modalButtonBar}>
+      <FormLayout withBorders={false} containerPadding={false}>
+        <InputBox
+          value={prefix}
+          label={"Prefix"}
+          id={"prefix"}
+          name={"prefix"}
+          placeholder={"Enter Prefix"}
+          onChange={(e) => {
+            setPrefix(e.target.value);
+          }}
+          tooltip={
+            "Enter '/' to apply the rule to all prefixes and objects at the bucket root. Do not include the wildcard asterisk '*' as part of the prefix *unless* it is an explicit part of the prefix name. The Console automatically appends an asterisk to the appropriate sections of the resulting IAM policy."
+          }
+        />
+        <Select
+          id="access"
+          name="Access"
+          onChange={(value) => {
+            setSelectedAccess(value);
+          }}
+          label="Access"
+          value={selectedAccess}
+          options={accessOptions}
+          disabled={false}
+        />
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
           <Button
             id={"clear"}
             type="button"
@@ -149,9 +134,9 @@ const AddAccessRule = ({
             label={"Save"}
           />
         </Grid>
-      </Grid>
+      </FormLayout>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(AddAccessRule);
+export default AddAccessRule;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddKeyModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddKeyModal.tsx
index e013670746..28c9a0cb37 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddKeyModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddKeyModal.tsx
@@ -14,12 +14,11 @@
 // 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 { DialogContentText, Grid } from "@mui/material";
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
+import { Grid, InputBox } from "mds";
 import { ErrorResponseHandler } from "../../../../common/types";
 import { useAppDispatch } from "../../../../store";
 import { setErrorSnackMessage } from "../../../../systemSlice";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import useApi from "../../Common/Hooks/useApi";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 import KMSHelpBox from "../../KMS/KMSHelpbox";
@@ -61,7 +60,7 @@ const AddKeyModal = ({
         variant: "callAction",
       }}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           <KMSHelpBox
             helpText={"Create Key"}
             contents={[
@@ -69,8 +68,8 @@ const AddKeyModal = ({
             ]}
           />
 
-          <Grid item xs={12} marginTop={3}>
-            <InputBoxWrapper
+          <Grid item xs={12} sx={{ marginTop: 15 }}>
+            <InputBox
               id="key-name"
               name="key-name"
               label="Key Name"
@@ -86,7 +85,7 @@ const AddKeyModal = ({
               }}
             />
           </Grid>
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
index 6586def830..19b57272d0 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddLifecycleModal.tsx
@@ -16,63 +16,44 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
-import { Button, LifecycleConfigIcon } from "mds";
+import {
+  Button,
+  FormLayout,
+  InputBox,
+  LifecycleConfigIcon,
+  RadioGroup,
+  Select,
+  Grid,
+} from "mds";
 import { useSelector } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { api } from "api";
+import { BucketVersioningResponse, Tier } from "api/consoleApi";
+import { errorToHandler } from "api/errors";
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   LinearProgress,
-  SelectChangeEvent,
   Typography,
 } from "@mui/material";
-import Grid from "@mui/material/Grid";
-
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import { ITiersDropDown } from "../types";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
-import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-import {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import { selDistSet, setModalErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
-import { ITiersDropDown } from "../types";
-import { api } from "api";
-import { BucketVersioningResponse, Tier } from "api/consoleApi";
-import { errorToHandler } from "api/errors";
 
 interface IReplicationModal {
   open: boolean;
   closeModalAndRefresh: (refresh: boolean) => any;
-  classes: any;
   bucketName: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    formFieldRowFilter: {
-      "& .MuiPaper-root": { padding: 0 },
-    },
-    ...spacingUtils,
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...createTenantCommon,
-  });
-
 const AddLifecycleModal = ({
   open,
   closeModalAndRefresh,
-  classes,
   bucketName,
 }: IReplicationModal) => {
   const dispatch = useAppDispatch();
@@ -90,12 +71,16 @@ const AddLifecycleModal = ({
   const [targetVersion, setTargetVersion] = useState<"current" | "noncurrent">(
     "current",
   );
-
   const [lifecycleDays, setLifecycleDays] = useState<string>("");
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
   const [expiredObjectDM, setExpiredObjectDM] = useState<boolean>(false);
   const [loadingVersioning, setLoadingVersioning] = useState<boolean>(true);
 
+  /*To be removed on component replacement*/
+  const formFieldRowFilter = {
+    "& .MuiPaper-root": { padding: 0 },
+  };
+
   useEffect(() => {
     if (loadingTiers) {
       api.admin
@@ -211,7 +196,7 @@ const AddLifecycleModal = ({
       titleIcon={<LifecycleConfigIcon />}
     >
       {loadingTiers && (
-        <Grid container className={classes.loadingBox}>
+        <Grid container>
           <Grid item xs={12}>
             <LinearProgress />
           </Grid>
@@ -228,153 +213,134 @@ const AddLifecycleModal = ({
             addRecord();
           }}
         >
-          <Grid container>
-            <Grid item xs={12} className={classes.formScrollable}>
-              <Grid item xs={12}>
-                <Grid container spacing={1}>
+          <FormLayout withBorders={false} containerPadding={false}>
+            <RadioGroup
+              currentValue={ilmType}
+              id="ilm_type"
+              name="ilm_type"
+              label="Type of lifecycle"
+              onChange={(e) => {
+                setIlmType(e.target.value as "expiry" | "transition");
+              }}
+              selectorOptions={[
+                { value: "expiry", label: "Expiry" },
+                { value: "transition", label: "Transition" },
+              ]}
+            />
+            {versioningInfo?.status === "Enabled" && (
+              <Select
+                value={targetVersion}
+                id="object_version"
+                name="object_version"
+                label="Object Version"
+                onChange={(value) => {
+                  setTargetVersion(value as "current" | "noncurrent");
+                }}
+                options={[
+                  { value: "current", label: "Current Version" },
+                  { value: "noncurrent", label: "Non-Current Version" },
+                ]}
+              />
+            )}
+
+            <InputBox
+              id="expiry_days"
+              name="expiry_days"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                if (e.target.validity.valid) {
+                  setLifecycleDays(e.target.value);
+                }
+              }}
+              pattern={"[0-9]*"}
+              label="After"
+              value={lifecycleDays}
+              overlayObject={
+                <InputUnitMenu
+                  id={"expire-current-unit"}
+                  unitSelected={"days"}
+                  unitsList={[{ label: "Days", value: "days" }]}
+                  disabled={true}
+                />
+              }
+            />
+
+            {ilmType === "expiry" ? (
+              <Fragment />
+            ) : (
+              <Select
+                label="To Tier"
+                id="storage_class"
+                name="storage_class"
+                value={storageClass}
+                onChange={(value) => {
+                  setStorageClass(value as string);
+                }}
+                options={tiersList}
+              />
+            )}
+            <Grid item xs={12} sx={formFieldRowFilter}>
+              <Accordion>
+                <AccordionSummary>
+                  <Typography>Filters</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
                   <Grid item xs={12}>
-                    <RadioGroupSelector
-                      currentSelection={ilmType}
-                      id="ilm_type"
-                      name="ilm_type"
-                      label="Type of lifecycle"
-                      onChange={(e) => {
-                        setIlmType(e.target.value as "expiry" | "transition");
+                    <InputBox
+                      id="prefix"
+                      name="prefix"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setPrefix(e.target.value);
                       }}
-                      selectorOptions={[
-                        { value: "expiry", label: "Expiry" },
-                        { value: "transition", label: "Transition" },
-                      ]}
+                      label="Prefix"
+                      value={prefix}
                     />
                   </Grid>
-                  {versioningInfo?.status === "Enabled" && (
-                    <Grid item xs={12}>
-                      <SelectWrapper
-                        value={targetVersion}
-                        id="object_version"
-                        name="object_version"
-                        label="Object Version"
-                        onChange={(e) => {
-                          setTargetVersion(
-                            e.target.value as "current" | "noncurrent",
-                          );
-                        }}
-                        options={[
-                          { value: "current", label: "Current Version" },
-                          { value: "noncurrent", label: "Non-Current Version" },
-                        ]}
-                      />
-                    </Grid>
-                  )}
-
                   <Grid item xs={12}>
-                    <InputBoxWrapper
-                      id="expiry_days"
-                      name="expiry_days"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        if (e.target.validity.valid) {
-                          setLifecycleDays(e.target.value);
-                        }
+                    <QueryMultiSelector
+                      name="tags"
+                      label="Tags"
+                      elements={""}
+                      onChange={(vl: string) => {
+                        setTags(vl);
                       }}
-                      pattern={"[0-9]*"}
-                      label="After"
-                      value={lifecycleDays}
-                      overlayObject={
-                        <InputUnitMenu
-                          id={"expire-current-unit"}
-                          unitSelected={"days"}
-                          unitsList={[{ label: "Days", value: "days" }]}
-                          disabled={true}
-                        />
-                      }
+                      keyPlaceholder="Tag Key"
+                      valuePlaceholder="Tag Value"
+                      withBorder
                     />
                   </Grid>
-
-                  {ilmType === "expiry" ? (
-                    <Fragment></Fragment>
-                  ) : (
-                    <Fragment>
-                      <Grid item xs={12}>
-                        <SelectWrapper
-                          label="To Tier"
-                          id="storage_class"
-                          name="storage_class"
-                          value={storageClass}
-                          onChange={(e: SelectChangeEvent<string>) => {
-                            setStorageClass(e.target.value as string);
-                          }}
-                          options={tiersList}
-                        />
-                      </Grid>
-                    </Fragment>
-                  )}
-                  <Grid item xs={12} className={classes.formFieldRowFilter}>
-                    <Accordion>
-                      <AccordionSummary>
-                        <Typography>Filters</Typography>
-                      </AccordionSummary>
-                      <AccordionDetails>
-                        <Grid item xs={12}>
-                          <InputBoxWrapper
-                            id="prefix"
-                            name="prefix"
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>,
-                            ) => {
-                              setPrefix(e.target.value);
-                            }}
-                            label="Prefix"
-                            value={prefix}
-                          />
-                        </Grid>
-                        <Grid item xs={12}>
-                          <QueryMultiSelector
-                            name="tags"
-                            label="Tags"
-                            elements={""}
-                            onChange={(vl: string) => {
-                              setTags(vl);
-                            }}
-                            keyPlaceholder="Tag Key"
-                            valuePlaceholder="Tag Value"
-                            withBorder
-                          />
-                        </Grid>
-                      </AccordionDetails>
-                    </Accordion>
-                  </Grid>
-                  {ilmType === "expiry" && targetVersion === "noncurrent" && (
-                    <Grid item xs={12} className={classes.formFieldRowFilter}>
-                      <Accordion>
-                        <AccordionSummary>
-                          <Typography>Advanced</Typography>
-                        </AccordionSummary>
-                        <AccordionDetails>
-                          <Grid item xs={12}>
-                            <FormSwitchWrapper
-                              value="expired_delete_marker"
-                              id="expired_delete_marker"
-                              name="expired_delete_marker"
-                              checked={expiredObjectDM}
-                              onChange={(
-                                event: React.ChangeEvent<HTMLInputElement>,
-                              ) => {
-                                setExpiredObjectDM(event.target.checked);
-                              }}
-                              label={"Expire Delete Marker"}
-                              description={
-                                "Remove the reference to the object if no versions are left"
-                              }
-                            />
-                          </Grid>
-                        </AccordionDetails>
-                      </Accordion>
+                </AccordionDetails>
+              </Accordion>
+            </Grid>
+            {ilmType === "expiry" && targetVersion === "noncurrent" && (
+              <Grid item xs={12} sx={formFieldRowFilter}>
+                <Accordion>
+                  <AccordionSummary>
+                    <Typography>Advanced</Typography>
+                  </AccordionSummary>
+                  <AccordionDetails>
+                    <Grid item xs={12}>
+                      <FormSwitchWrapper
+                        value="expired_delete_marker"
+                        id="expired_delete_marker"
+                        name="expired_delete_marker"
+                        checked={expiredObjectDM}
+                        onChange={(
+                          event: React.ChangeEvent<HTMLInputElement>,
+                        ) => {
+                          setExpiredObjectDM(event.target.checked);
+                        }}
+                        label={"Expire Delete Marker"}
+                        description={
+                          "Remove the reference to the object if no versions are left"
+                        }
+                      />
                     </Grid>
-                  )}
-                </Grid>
+                  </AccordionDetails>
+                </Accordion>
               </Grid>
-            </Grid>
-            <Grid item xs={12} className={classes.modalButtonBar}>
+            )}
+
+            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
               <Button
                 id={"reset"}
                 type="button"
@@ -399,11 +365,11 @@ const AddLifecycleModal = ({
                 <LinearProgress />
               </Grid>
             )}
-          </Grid>
+          </FormLayout>
         </form>
       )}
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(AddLifecycleModal);
+export default AddLifecycleModal;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
index b6ff72902b..8adeb1a0db 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddReplicationModal.tsx
@@ -15,65 +15,40 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
-import { BucketReplicationIcon, Button } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { SelectChangeEvent } from "@mui/material";
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
 import {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
+  Box,
+  BucketReplicationIcon,
+  Button,
+  FormLayout,
+  Grid,
+  InputBox,
+  Select,
+  Switch,
+} from "mds";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import { BucketReplicationRule } from "../types";
-
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
-import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
-import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
-
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
+import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 
 interface IReplicationModal {
   open: boolean;
   closeModalAndRefresh: () => any;
-  classes: any;
   bucketName: string;
 
   setReplicationRules: BucketReplicationRule[];
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    multiContainer: {
-      display: "flex",
-      alignItems: "center",
-    },
-    ...spacingUtils,
-    ...createTenantCommon,
-    ...formFieldStyles,
-    ...modalStyleUtils,
-    modalFormScrollable: {
-      ...modalStyleUtils.modalFormScrollable,
-      paddingRight: 10,
-    },
-  });
-
 const AddReplicationModal = ({
   open,
   closeModalAndRefresh,
-  classes,
   bucketName,
-
   setReplicationRules,
 }: IReplicationModal) => {
   const dispatch = useAppDispatch();
@@ -205,242 +180,205 @@ const AddReplicationModal = ({
           addRecord();
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.modalFormScrollable}>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="priority"
-                name="priority"
+        <FormLayout withBorders={false} containerPadding={false}>
+          <InputBox
+            id="priority"
+            name="priority"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              if (e.target.validity.valid) {
+                setPriority(e.target.value);
+              }
+            }}
+            label="Priority"
+            value={priority}
+            pattern={"[0-9]*"}
+          />
+
+          <InputBox
+            id="targetURL"
+            name="targetURL"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setTargetURL(e.target.value);
+            }}
+            placeholder="play.min.io"
+            label="Target URL"
+            value={targetURL}
+          />
+
+          <Switch
+            checked={useTLS}
+            id="useTLS"
+            name="useTLS"
+            label="Use TLS"
+            onChange={(e) => {
+              setUseTLS(e.target.checked);
+            }}
+            value="yes"
+          />
+
+          <InputBox
+            id="accessKey"
+            name="accessKey"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setAccessKey(e.target.value);
+            }}
+            label="Access Key"
+            value={accessKey}
+          />
+
+          <InputBox
+            id="secretKey"
+            name="secretKey"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSecretKey(e.target.value);
+            }}
+            label="Secret Key"
+            value={secretKey}
+          />
+
+          <InputBox
+            id="targetBucket"
+            name="targetBucket"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setTargetBucket(e.target.value);
+            }}
+            label="Target Bucket"
+            value={targetBucket}
+          />
+
+          <InputBox
+            id="region"
+            name="region"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setRegion(e.target.value);
+            }}
+            label="Region"
+            value={region}
+          />
+
+          <Select
+            id="replication_mode"
+            name="replication_mode"
+            onChange={(value) => {
+              setReplicationMode(value as "async" | "sync");
+            }}
+            label="Replication Mode"
+            value={replicationMode}
+            options={[
+              { label: "Asynchronous", value: "async" },
+              { label: "Synchronous", value: "sync" },
+            ]}
+          />
+
+          {replicationMode === "async" && (
+            <Box className={"inputItem"}>
+              <InputBox
+                type="number"
+                id="bandwidth_scalar"
+                name="bandwidth_scalar"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   if (e.target.validity.valid) {
-                    setPriority(e.target.value);
+                    setBandwidthScalar(e.target.value as string);
                   }
                 }}
-                label="Priority"
-                value={priority}
+                label="Bandwidth"
+                value={bandwidthScalar}
+                min="0"
                 pattern={"[0-9]*"}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="targetURL"
-                name="targetURL"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setTargetURL(e.target.value);
-                }}
-                placeholder="play.min.io"
-                label="Target URL"
-                value={targetURL}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <FormSwitchWrapper
-                checked={useTLS}
-                id="useTLS"
-                name="useTLS"
-                label="Use TLS"
-                onChange={(e) => {
-                  setUseTLS(e.target.checked);
-                }}
-                value="yes"
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="accessKey"
-                name="accessKey"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setAccessKey(e.target.value);
-                }}
-                label="Access Key"
-                value={accessKey}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="secretKey"
-                name="secretKey"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setSecretKey(e.target.value);
-                }}
-                label="Secret Key"
-                value={secretKey}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="targetBucket"
-                name="targetBucket"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setTargetBucket(e.target.value);
-                }}
-                label="Target Bucket"
-                value={targetBucket}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="region"
-                name="region"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setRegion(e.target.value);
-                }}
-                label="Region"
-                value={region}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <SelectWrapper
-                id="replication_mode"
-                name="replication_mode"
-                onChange={(e: SelectChangeEvent<string>) => {
-                  setReplicationMode(e.target.value as "async" | "sync");
-                }}
-                label="Replication Mode"
-                value={replicationMode}
-                options={[
-                  { label: "Asynchronous", value: "async" },
-                  { label: "Synchronous", value: "sync" },
-                ]}
-              />
-            </Grid>
-
-            {replicationMode === "async" && (
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <div className={classes.multiContainer}>
-                  <InputBoxWrapper
-                    type="number"
-                    id="bandwidth_scalar"
-                    name="bandwidth_scalar"
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      if (e.target.validity.valid) {
-                        setBandwidthScalar(e.target.value as string);
-                      }
+                overlayObject={
+                  <InputUnitMenu
+                    id={"quota_unit"}
+                    onUnitChange={(newValue) => {
+                      setBandwidthUnit(newValue);
                     }}
-                    label="Bandwidth"
-                    value={bandwidthScalar}
-                    min="0"
-                    pattern={"[0-9]*"}
-                    overlayObject={
-                      <InputUnitMenu
-                        id={"quota_unit"}
-                        onUnitChange={(newValue) => {
-                          setBandwidthUnit(newValue);
-                        }}
-                        unitSelected={bandwidthUnit}
-                        unitsList={k8sScalarUnitsExcluding(["Ki"])}
-                        disabled={false}
-                      />
-                    }
+                    unitSelected={bandwidthUnit}
+                    unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                    disabled={false}
                   />
-                </div>
-              </Grid>
-            )}
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="healthCheck"
-                name="healthCheck"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setHealthCheck(e.target.value as string);
-                }}
-                label="Health Check Duration"
-                value={healthCheck}
+                }
               />
-            </Grid>
-            <Grid
-              item
-              xs={12}
-              className={`${classes.spacerTop} ${classes.formFieldRow}`}
-            >
-              <InputBoxWrapper
-                id="storageClass"
-                name="storageClass"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setTargetStorageClass(e.target.value);
-                }}
-                placeholder="STANDARD_IA,REDUCED_REDUNDANCY etc"
-                label="Storage Class"
-                value={targetStorageClass}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <fieldset className={classes.fieldGroup}>
-                <legend className={classes.descriptionText}>
-                  Object Filters
-                </legend>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="prefix"
-                    name="prefix"
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setPrefix(e.target.value);
-                    }}
-                    placeholder="prefix"
-                    label="Prefix"
-                    value={prefix}
-                  />
-                </Grid>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <QueryMultiSelector
-                    name="tags"
-                    label="Tags"
-                    elements={""}
-                    onChange={(vl: string) => {
-                      setTags(vl);
-                    }}
-                    keyPlaceholder="Tag Key"
-                    valuePlaceholder="Tag Value"
-                    withBorder
-                  />
-                </Grid>
-              </fieldset>
-            </Grid>
-            <Grid item xs={12}>
-              <fieldset className={classes.fieldGroup}>
-                <legend className={classes.descriptionText}>
-                  Replication Options
-                </legend>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <FormSwitchWrapper
-                    checked={metadataSync}
-                    id="metadatataSync"
-                    name="metadatataSync"
-                    label="Metadata Sync"
-                    onChange={(e) => {
-                      setMetadataSync(e.target.checked);
-                    }}
-                    value={metadataSync}
-                    description={"Metadata Sync"}
-                  />
-                  <FormSwitchWrapper
-                    checked={repDeleteMarker}
-                    id="deleteMarker"
-                    name="deleteMarker"
-                    label="Delete Marker"
-                    onChange={(e) => {
-                      setRepDeleteMarker(e.target.checked);
-                    }}
-                    value={repDeleteMarker}
-                    description={"Replicate soft deletes"}
-                  />
-                </Grid>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <FormSwitchWrapper
-                    checked={repDelete}
-                    id="repDelete"
-                    name="repDelete"
-                    label="Deletes"
-                    onChange={(e) => {
-                      setRepDelete(e.target.checked);
-                    }}
-                    value={repDelete}
-                    description={"Replicate versioned deletes"}
-                  />
-                </Grid>
-              </fieldset>
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+            </Box>
+          )}
+
+          <InputBox
+            id="healthCheck"
+            name="healthCheck"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setHealthCheck(e.target.value as string);
+            }}
+            label="Health Check Duration"
+            value={healthCheck}
+          />
+
+          <InputBox
+            id="storageClass"
+            name="storageClass"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setTargetStorageClass(e.target.value);
+            }}
+            placeholder="STANDARD_IA,REDUCED_REDUNDANCY etc"
+            label="Storage Class"
+            value={targetStorageClass}
+          />
+
+          <fieldset className={"inputItem"}>
+            <legend>Object Filters</legend>
+            <InputBox
+              id="prefix"
+              name="prefix"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setPrefix(e.target.value);
+              }}
+              placeholder="prefix"
+              label="Prefix"
+              value={prefix}
+            />
+            <QueryMultiSelector
+              name="tags"
+              label="Tags"
+              elements={""}
+              onChange={(vl: string) => {
+                setTags(vl);
+              }}
+              keyPlaceholder="Tag Key"
+              valuePlaceholder="Tag Value"
+              withBorder
+            />
+          </fieldset>
+          <fieldset className={"inputItem"}>
+            <legend>Replication Options</legend>
+            <Switch
+              checked={metadataSync}
+              id="metadatataSync"
+              name="metadatataSync"
+              label="Metadata Sync"
+              onChange={(e) => {
+                setMetadataSync(e.target.checked);
+              }}
+              description={"Metadata Sync"}
+            />
+            <Switch
+              checked={repDeleteMarker}
+              id="deleteMarker"
+              name="deleteMarker"
+              label="Delete Marker"
+              onChange={(e) => {
+                setRepDeleteMarker(e.target.checked);
+              }}
+              description={"Replicate soft deletes"}
+            />
+            <Switch
+              checked={repDelete}
+              id="repDelete"
+              name="repDelete"
+              label="Deletes"
+              onChange={(e) => {
+                setRepDelete(e.target.checked);
+              }}
+              description={"Replicate versioned deletes"}
+            />
+          </fieldset>
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"cancel"}
               type="button"
@@ -460,10 +398,10 @@ const AddReplicationModal = ({
               label={"Save"}
             />
           </Grid>
-        </Grid>
+        </FormLayout>
       </form>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(AddReplicationModal);
+export default AddReplicationModal;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
index f1a3736dc7..7e3bf0d189 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketDetails.tsx
@@ -16,34 +16,33 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import {
-  Link,
   Navigate,
   Route,
   Routes,
+  useLocation,
   useNavigate,
   useParams,
 } from "react-router-dom";
 import {
   BackLink,
+  Box,
   BucketsIcon,
   Button,
   FolderIcon,
   PageLayout,
   RefreshIcon,
+  ScreenTitle,
+  Tabs,
   TrashIcon,
 } from "mds";
 import { useSelector } from "react-redux";
 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 {
   containerForHeader,
   searchField,
 } from "../../Common/FormComponents/common/styleLibrary";
-
-import ScreenTitle from "../../Common/ScreenTitle/ScreenTitle";
-import { Box } from "@mui/material";
 import {
   browseBucketPermissions,
   deleteBucketPermissions,
@@ -52,7 +51,6 @@ import {
   IAM_SCOPES,
   permissionTooltipHelper,
 } from "../../../../common/SecureComponent/permissions";
-import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs";
 
 import {
   hasPermission,
@@ -122,6 +120,7 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const params = useParams();
+  const location = useLocation();
 
   const distributedSetup = useSelector(selDistSet);
   const loadingBucket = useSelector(selBucketDetailsLoading);
@@ -132,17 +131,9 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const bucketName = params.bucketName || "";
 
-  let selTab = params["0"] || "";
-  selTab = selTab ? selTab : "summary";
-
-  const [activeTab, setActiveTab] = useState(selTab);
   const canDelete = hasPermission(bucketName, deleteBucketPermissions);
   const canBrowse = hasPermission(bucketName, browseBucketPermissions);
 
-  useEffect(() => {
-    setActiveTab(selTab);
-  }, [selTab]);
-
   useEffect(() => {
     dispatch(setHelpName("bucket_details"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -246,196 +237,184 @@ const BucketDetails = ({ classes }: IBucketDetailsProps) => {
           </Fragment>
         }
       />
-      <PageLayout className={classes.pageContainer}>
-        <Grid item xs={12}>
-          <ScreenTitle
-            icon={
-              <Fragment>
-                <BucketsIcon width={40} />
-              </Fragment>
-            }
-            title={bucketName}
-            subTitle={
+      <PageLayout>
+        <ScreenTitle
+          icon={
+            <Fragment>
+              <BucketsIcon width={40} />
+            </Fragment>
+          }
+          title={bucketName}
+          subTitle={
+            <SecureComponent
+              scopes={[
+                IAM_SCOPES.S3_GET_BUCKET_POLICY,
+                IAM_SCOPES.S3_GET_ACTIONS,
+              ]}
+              resource={bucketName}
+            >
+              <span style={{ fontSize: 15 }}>Access: </span>
+              <span
+                className={classes.capitalize}
+                style={{ fontWeight: 600, fontSize: 15 }}
+              >
+                {bucketInfo?.access?.toLowerCase()}
+              </span>
+            </SecureComponent>
+          }
+          actions={
+            <Fragment>
               <SecureComponent
-                scopes={[
-                  IAM_SCOPES.S3_GET_BUCKET_POLICY,
-                  IAM_SCOPES.S3_GET_ACTIONS,
-                ]}
+                scopes={deleteBucketPermissions}
                 resource={bucketName}
+                errorProps={{ disabled: true }}
               >
-                <span style={{ fontSize: 15 }}>Access: </span>
-                <span
-                  className={classes.capitalize}
-                  style={{ fontWeight: 600, fontSize: 15 }}
+                <TooltipWrapper
+                  tooltip={
+                    canDelete
+                      ? ""
+                      : permissionTooltipHelper(
+                          [
+                            IAM_SCOPES.S3_DELETE_BUCKET,
+                            IAM_SCOPES.S3_FORCE_DELETE_BUCKET,
+                          ],
+                          "deleting this bucket",
+                        )
+                  }
                 >
-                  {bucketInfo?.access?.toLowerCase()}
-                </span>
+                  <Button
+                    id={"delete-bucket-button"}
+                    onClick={() => {
+                      setDeleteOpen(true);
+                    }}
+                    label={"Delete Bucket"}
+                    icon={<TrashIcon />}
+                    variant={"secondary"}
+                    disabled={!canDelete}
+                  />
+                </TooltipWrapper>
               </SecureComponent>
-            }
-            actions={
-              <Fragment>
-                <SecureComponent
-                  scopes={deleteBucketPermissions}
-                  resource={bucketName}
-                  errorProps={{ disabled: true }}
-                >
-                  <TooltipWrapper
-                    tooltip={
-                      canDelete
-                        ? ""
-                        : permissionTooltipHelper(
-                            [
-                              IAM_SCOPES.S3_DELETE_BUCKET,
-                              IAM_SCOPES.S3_FORCE_DELETE_BUCKET,
-                            ],
-                            "deleting this bucket",
-                          )
-                    }
-                  >
-                    <Button
-                      id={"delete-bucket-button"}
-                      onClick={() => {
-                        setDeleteOpen(true);
-                      }}
-                      label={"Delete Bucket"}
-                      icon={<TrashIcon />}
-                      variant={"secondary"}
-                      disabled={!canDelete}
-                    />
-                  </TooltipWrapper>
-                </SecureComponent>
-                <Button
-                  id={"refresh-bucket-info"}
-                  onClick={() => {
-                    dispatch(setBucketDetailsLoad(true));
-                  }}
-                  label={"Refresh"}
-                  icon={<RefreshIcon />}
-                />
-              </Fragment>
-            }
-          />
-        </Grid>
-        <Box sx={{ border: "1px solid #eaeaea" }}>
-          <VerticalTabs
-            selectedTab={activeTab}
-            isRouteTabs
-            routes={
-              <div
-                style={{
-                  padding: "2rem",
+              <Button
+                id={"refresh-bucket-info"}
+                onClick={() => {
+                  dispatch(setBucketDetailsLoad(true));
                 }}
-              >
-                <Routes>
-                  <Route path="summary" element={<BucketSummaryPanel />} />
-                  <Route path="events" element={<BucketEventsPanel />} />
-                  {distributedSetup && (
-                    <Route
-                      path="replication"
-                      element={<BucketReplicationPanel />}
-                    />
-                  )}
-                  {distributedSetup && (
-                    <Route
-                      path="lifecycle"
-                      element={<BucketLifecyclePanel />}
-                    />
-                  )}
-
-                  <Route path="access" element={<AccessDetailsPanel />} />
-                  <Route path="prefix" element={<AccessRulePanel />} />
-                  <Route
-                    path="*"
-                    element={
-                      <Navigate to={`/buckets/${bucketName}/admin/summary`} />
-                    }
-                  />
-                </Routes>
-              </div>
-            }
-          >
-            {{
-              tabConfig: {
-                label: "Summary",
-                value: "summary",
-                component: Link,
-                to: getRoutePath("summary"),
-              },
+                label={"Refresh"}
+                icon={<RefreshIcon />}
+              />
+            </Fragment>
+          }
+          sx={{ marginBottom: 15 }}
+        />
+        <Box>
+          <Tabs
+            currentTabOrPath={location.pathname}
+            useRouteTabs
+            onTabClick={(tab) => {
+              navigate(tab);
             }}
-            {{
-              tabConfig: {
-                label: "Events",
-                value: "events",
-                component: Link,
-                disabled: !hasPermission(bucketName, [
-                  IAM_SCOPES.S3_GET_BUCKET_NOTIFICATIONS,
-                  IAM_SCOPES.S3_PUT_BUCKET_NOTIFICATIONS,
-                  IAM_SCOPES.S3_GET_ACTIONS,
-                  IAM_SCOPES.S3_PUT_ACTIONS,
-                ]),
-                to: getRoutePath("events"),
+            options={[
+              {
+                tabConfig: {
+                  label: "Summary",
+                  id: "summary",
+                  to: getRoutePath("summary"),
+                },
               },
-            }}
-            {{
-              tabConfig: {
-                label: "Replication",
-                value: "replication",
-                component: Link,
-                disabled:
-                  !distributedSetup ||
-                  (siteReplicationInfo.enabled &&
-                    siteReplicationInfo.curSite) ||
-                  !hasPermission(bucketName, [
-                    IAM_SCOPES.S3_GET_REPLICATION_CONFIGURATION,
-                    IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION,
+              {
+                tabConfig: {
+                  label: "Events",
+                  id: "events",
+                  disabled: !hasPermission(bucketName, [
+                    IAM_SCOPES.S3_GET_BUCKET_NOTIFICATIONS,
+                    IAM_SCOPES.S3_PUT_BUCKET_NOTIFICATIONS,
                     IAM_SCOPES.S3_GET_ACTIONS,
                     IAM_SCOPES.S3_PUT_ACTIONS,
                   ]),
-                to: getRoutePath("replication"),
+                  to: getRoutePath("events"),
+                },
               },
-            }}
-            {{
-              tabConfig: {
-                label: "Lifecycle",
-                value: "lifecycle",
-                component: Link,
-                disabled:
-                  !distributedSetup ||
-                  !hasPermission(bucketName, [
-                    IAM_SCOPES.S3_GET_LIFECYCLE_CONFIGURATION,
-                    IAM_SCOPES.S3_PUT_LIFECYCLE_CONFIGURATION,
-                    IAM_SCOPES.S3_GET_ACTIONS,
-                    IAM_SCOPES.S3_PUT_ACTIONS,
-                  ]),
-                to: getRoutePath("lifecycle"),
+              {
+                tabConfig: {
+                  label: "Replication",
+                  id: "replication",
+                  disabled:
+                    !distributedSetup ||
+                    (siteReplicationInfo.enabled &&
+                      siteReplicationInfo.curSite) ||
+                    !hasPermission(bucketName, [
+                      IAM_SCOPES.S3_GET_REPLICATION_CONFIGURATION,
+                      IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION,
+                      IAM_SCOPES.S3_GET_ACTIONS,
+                      IAM_SCOPES.S3_PUT_ACTIONS,
+                    ]),
+                  to: getRoutePath("replication"),
+                },
               },
-            }}
-            {{
-              tabConfig: {
-                label: "Access",
-                value: "access",
-                component: Link,
-                disabled: !hasPermission(bucketName, [
-                  IAM_SCOPES.ADMIN_GET_POLICY,
-                  IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
-                  IAM_SCOPES.ADMIN_LIST_USERS,
-                ]),
-                to: getRoutePath("access"),
+              {
+                tabConfig: {
+                  label: "Lifecycle",
+                  id: "lifecycle",
+                  disabled:
+                    !distributedSetup ||
+                    !hasPermission(bucketName, [
+                      IAM_SCOPES.S3_GET_LIFECYCLE_CONFIGURATION,
+                      IAM_SCOPES.S3_PUT_LIFECYCLE_CONFIGURATION,
+                      IAM_SCOPES.S3_GET_ACTIONS,
+                      IAM_SCOPES.S3_PUT_ACTIONS,
+                    ]),
+                  to: getRoutePath("lifecycle"),
+                },
               },
-            }}
-            {{
-              tabConfig: {
-                label: "Anonymous",
-                value: "prefix",
-                component: Link,
-                disabled: !hasPermission(bucketName, [
-                  IAM_SCOPES.S3_GET_BUCKET_POLICY,
-                  IAM_SCOPES.S3_GET_ACTIONS,
-                ]),
-                to: getRoutePath("prefix"),
+              {
+                tabConfig: {
+                  label: "Access",
+                  id: "access",
+                  disabled: !hasPermission(bucketName, [
+                    IAM_SCOPES.ADMIN_GET_POLICY,
+                    IAM_SCOPES.ADMIN_LIST_USER_POLICIES,
+                    IAM_SCOPES.ADMIN_LIST_USERS,
+                  ]),
+                  to: getRoutePath("access"),
+                },
               },
-            }}
-          </VerticalTabs>
+              {
+                tabConfig: {
+                  label: "Anonymous",
+                  id: "anonymous",
+                  disabled: !hasPermission(bucketName, [
+                    IAM_SCOPES.S3_GET_BUCKET_POLICY,
+                    IAM_SCOPES.S3_GET_ACTIONS,
+                  ]),
+                  to: getRoutePath("prefix"),
+                },
+              },
+            ]}
+            routes={
+              <Routes>
+                <Route path="summary" element={<BucketSummaryPanel />} />
+                <Route path="events" element={<BucketEventsPanel />} />
+                {distributedSetup && (
+                  <Route
+                    path="replication"
+                    element={<BucketReplicationPanel />}
+                  />
+                )}
+                {distributedSetup && (
+                  <Route path="lifecycle" element={<BucketLifecyclePanel />} />
+                )}
+
+                <Route path="access" element={<AccessDetailsPanel />} />
+                <Route path="prefix" element={<AccessRulePanel />} />
+                <Route
+                  path="*"
+                  element={
+                    <Navigate to={`/buckets/${bucketName}/admin/summary`} />
+                  }
+                />
+              </Routes>
+            }
+          />
         </Box>
       </PageLayout>
     </Fragment>
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
index a3f4dd083d..c1d88cf836 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -18,11 +18,18 @@ import React, { Fragment, useEffect, useState } from "react";
 import get from "lodash/get";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { AddIcon, Button, HelpBox, LambdaIcon, DataTable, Grid } from "mds";
+import {
+  AddIcon,
+  Button,
+  HelpBox,
+  LambdaIcon,
+  DataTable,
+  Grid,
+  SectionTitle,
+} from "mds";
 import { api } from "api";
 import { NotificationConfig } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
-import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import {
   hasPermission,
   SecureComponent,
@@ -31,7 +38,6 @@ import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
 import withSuspense from "../../Common/Components/withSuspense";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
@@ -131,9 +137,10 @@ const BucketEventsPanel = () => {
         />
       )}
 
-      <Grid container>
-        <Grid item xs={12} sx={actionsTray.actionsTray}>
-          <PanelTitle>Events</PanelTitle>
+      <SectionTitle
+        separator
+        sx={{ marginBottom: 15 }}
+        actions={
           <SecureComponent
             scopes={[
               IAM_SCOPES.S3_PUT_BUCKET_NOTIFICATIONS,
@@ -156,7 +163,12 @@ const BucketEventsPanel = () => {
               />
             </TooltipWrapper>
           </SecureComponent>
-        </Grid>
+        }
+      >
+        Events
+      </SectionTitle>
+
+      <Grid container>
         <Grid item xs={12}>
           <SecureComponent
             scopes={[
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
index 9670761410..e836f0a173 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -15,50 +15,35 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
-import { LifeCycleItem } from "../types";
-import { AddIcon, Button, HelpBox, TiersIcon } from "mds";
 import {
-  actionsTray,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
-import EditLifecycleConfiguration from "./EditLifecycleConfiguration";
-import AddLifecycleModal from "./AddLifecycleModal";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
+  AddIcon,
+  Button,
+  DataTable,
+  Grid,
+  HelpBox,
+  SectionTitle,
+  TiersIcon,
+} from "mds";
+import { useSelector } from "react-redux";
+import { api } from "api";
+import { ObjectBucketLifecycle } from "api/consoleApi";
+import { LifeCycleItem } from "../types";
 import {
   hasPermission,
   SecureComponent,
 } from "../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
-import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useParams } from "react-router-dom";
-import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 import { setHelpName } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { api } from "api";
-import { ObjectBucketLifecycle } from "api/consoleApi";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...searchField,
-    ...actionsTray,
-    twHeight: {
-      minHeight: 400,
-    },
-  });
-
-interface IBucketLifecyclePanelProps {
-  classes: any;
-}
+import DeleteBucketLifecycleRule from "./DeleteBucketLifecycleRule";
+import EditLifecycleConfiguration from "./EditLifecycleConfiguration";
+import AddLifecycleModal from "./AddLifecycleModal";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
 
-const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
+const BucketLifecyclePanel = () => {
   const loadingBucket = useSelector(selBucketDetailsLoading);
   const params = useParams();
 
@@ -280,9 +265,10 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
           onCloseAndRefresh={closeDelLCRefresh}
         />
       )}
-      <Grid container>
-        <Grid item xs={12} className={classes.actionsTray}>
-          <PanelTitle>Lifecycle Rules</PanelTitle>
+      <SectionTitle
+        separator
+        sx={{ marginBottom: 15 }}
+        actions={
           <SecureComponent
             scopes={[
               IAM_SCOPES.S3_PUT_LIFECYCLE_CONFIGURATION,
@@ -304,7 +290,11 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
               />
             </TooltipWrapper>
           </SecureComponent>
-        </Grid>
+        }
+      >
+        Lifecycle Rules
+      </SectionTitle>
+      <Grid container>
         <Grid item xs={12}>
           <SecureComponent
             scopes={[
@@ -314,7 +304,7 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
             resource={bucketName}
             errorProps={{ disabled: true }}
           >
-            <TableWrapper
+            <DataTable
               itemActions={lifecycleActions}
               columns={lifecycleColumns}
               isLoading={loadingLifecycle}
@@ -322,7 +312,7 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
               entityName="Lifecycle"
               customEmptyMessage="There are no Lifecycle rules yet"
               idField="id"
-              customPaperHeight={classes.twHeight}
+              customPaperHeight={"400px"}
             />
           </SecureComponent>
         </Grid>
@@ -359,4 +349,4 @@ const BucketLifecyclePanel = ({ classes }: IBucketLifecyclePanelProps) => {
   );
 };
 
-export default withStyles(styles)(BucketLifecyclePanel);
+export default BucketLifecyclePanel;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
index c4f7bec6e6..f1b0ec6a0b 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx
@@ -16,16 +16,19 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Theme } from "@mui/material/styles";
-import { AddIcon, BucketsIcon, Button, HelpBox, TrashIcon } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
-
+import { useParams } from "react-router-dom";
 import {
-  actionsTray,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
+  AddIcon,
+  Box,
+  BucketsIcon,
+  Button,
+  DataTable,
+  Grid,
+  HelpBox,
+  SectionTitle,
+  TrashIcon,
+} from "mds";
+import api from "../../../../common/api";
 import {
   BucketReplication,
   BucketReplicationDestination,
@@ -37,17 +40,15 @@ import {
   SecureComponent,
 } from "../../../../common/SecureComponent";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
-import api from "../../../../common/api";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
-import PanelTitle from "../../Common/PanelTitle/PanelTitle";
-import withSuspense from "../../Common/Components/withSuspense";
-import EditReplicationModal from "./EditReplicationModal";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
-import { useParams } from "react-router-dom";
 import { useAppDispatch } from "../../../../store";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import withSuspense from "../../Common/Components/withSuspense";
 
+const EditReplicationModal = withSuspense(
+  React.lazy(() => import("./EditReplicationModal")),
+);
 const AddReplicationModal = withSuspense(
   React.lazy(() => import("./AddReplicationModal")),
 );
@@ -55,20 +56,7 @@ const DeleteReplicationRule = withSuspense(
   React.lazy(() => import("./DeleteReplicationRule")),
 );
 
-interface IBucketReplicationProps {
-  classes: any;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...searchField,
-    ...actionsTray,
-    twHeight: {
-      minHeight: 400,
-    },
-  });
-
-const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
+const BucketReplicationPanel = () => {
   const dispatch = useAppDispatch();
   const params = useParams();
 
@@ -258,10 +246,11 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
           ruleID={selectedRRule}
         />
       )}
-      <Grid container>
-        <Grid item xs={12} className={classes.actionsTray}>
-          <PanelTitle>Replication</PanelTitle>
-          <div style={{ display: "flex" }}>
+      <SectionTitle
+        separator
+        sx={{ marginBottom: 15 }}
+        actions={
+          <Box style={{ display: "flex", gap: 10 }}>
             <SecureComponent
               scopes={[
                 IAM_SCOPES.S3_PUT_REPLICATION_CONFIGURATION,
@@ -309,8 +298,12 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
                 />
               </TooltipWrapper>
             </SecureComponent>
-          </div>
-        </Grid>
+          </Box>
+        }
+      >
+        Replication
+      </SectionTitle>
+      <Grid container>
         <Grid item xs={12}>
           <SecureComponent
             scopes={[
@@ -320,7 +313,7 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
             resource={bucketName}
             errorProps={{ disabled: true }}
           >
-            <TableWrapper
+            <DataTable
               itemActions={replicationTableActions}
               columns={[
                 {
@@ -351,7 +344,7 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
               records={replicationRules}
               entityName="Replication Rules"
               idField="id"
-              customPaperHeight={classes.twHeight}
+              customPaperHeight={"400px"}
               textSelectable
               selectedItems={selectedRepRules}
               onSelect={(e) => selectRules(e)}
@@ -388,4 +381,4 @@ const BucketReplicationPanel = ({ classes }: IBucketReplicationProps) => {
   );
 };
 
-export default withStyles(styles)(BucketReplicationPanel);
+export default BucketReplicationPanel;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
index ade36092ec..2342f3ccb6 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketSummaryPanel.tsx
@@ -15,32 +15,31 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+import get from "lodash/get";
 import { useSelector } from "react-redux";
 import { useParams } from "react-router-dom";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Box, Grid } from "@mui/material";
-import get from "lodash/get";
+import { api } from "api";
 import {
-  spacingUtils,
-  textStyleUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
+  BucketEncryptionInfo,
+  BucketQuota,
+  BucketVersioningResponse,
+  GetBucketRetentionConfig,
+} from "api/consoleApi";
+import { errorToHandler } from "api/errors";
+import {
+  Box,
+  DisabledIcon,
+  EnabledIcon,
+  Grid,
+  SectionTitle,
+  ValuePair,
+} from "mds";
+import { twoColCssGridLayoutConfig } from "../../Common/FormComponents/common/styleLibrary";
 import { IAM_SCOPES } from "../../../../common/SecureComponent/permissions";
 import {
   hasPermission,
   SecureComponent,
 } from "../../../../common/SecureComponent";
-
-import withSuspense from "../../Common/Components/withSuspense";
-import LabelValuePair from "../../Common/UsageBarWrapper/LabelValuePair";
-import LabelWithIcon from "./SummaryItems/LabelWithIcon";
-import { DisabledIcon, EnabledIcon } from "mds";
-import EditablePropertyItem from "./SummaryItems/EditablePropertyItem";
-import ReportedUsage from "./SummaryItems/ReportedUsage";
-import BucketQuotaSize from "./SummaryItems/BucketQuotaSize";
-import SectionTitle from "../../Common/SectionTitle";
 import {
   selDistSet,
   setErrorSnackMessage,
@@ -53,14 +52,11 @@ import {
 } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
 import VersioningInfo from "../VersioningInfo";
-import { api } from "api";
-import {
-  BucketEncryptionInfo,
-  BucketQuota,
-  BucketVersioningResponse,
-  GetBucketRetentionConfig,
-} from "api/consoleApi";
-import { errorToHandler } from "api/errors";
+import withSuspense from "../../Common/Components/withSuspense";
+import LabelWithIcon from "./SummaryItems/LabelWithIcon";
+import EditablePropertyItem from "./SummaryItems/EditablePropertyItem";
+import ReportedUsage from "./SummaryItems/ReportedUsage";
+import BucketQuotaSize from "./SummaryItems/BucketQuotaSize";
 
 const SetAccessPolicy = withSuspense(
   React.lazy(() => import("./SetAccessPolicy")),
@@ -77,33 +73,14 @@ const EnableVersioningModal = withSuspense(
 const BucketTags = withSuspense(
   React.lazy(() => import("./SummaryItems/BucketTags")),
 );
-
 const EnableQuota = withSuspense(React.lazy(() => import("./EnableQuota")));
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...spacingUtils,
-    ...textStyleUtils,
-  });
-
-const twoColCssGridLayoutConfig = {
-  display: "grid",
-  gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" },
-  gridAutoFlow: { xs: "dense", sm: "row" },
-  gap: 2,
-};
-
-interface IBucketSummaryProps {
-  classes: any;
-}
-
-const BucketSummary = ({ classes }: IBucketSummaryProps) => {
+const BucketSummary = () => {
   const dispatch = useAppDispatch();
   const params = useParams();
 
   const loadingBucket = useSelector(selBucketDetailsLoading);
   const bucketInfo = useSelector(selBucketDetailsInfo);
-
   const distributedSetup = useSelector(selDistSet);
 
   const [encryptionCfg, setEncryptionCfg] =
@@ -388,7 +365,6 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
     versioningText = "Suspended";
   }
 
-  // @ts-ignore
   return (
     <Fragment>
       {enableEncryptionScreenOpen && (
@@ -434,15 +410,17 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
         />
       )}
 
-      <SectionTitle>Summary</SectionTitle>
-      <Grid container spacing={1}>
+      <SectionTitle separator sx={{ marginBottom: 15 }}>
+        Summary
+      </SectionTitle>
+      <Grid container>
         <SecureComponent
           scopes={[IAM_SCOPES.S3_GET_BUCKET_POLICY, IAM_SCOPES.S3_GET_ACTIONS]}
           resource={bucketName}
         >
           <Grid item xs={12}>
-            <Box sx={{ ...twoColCssGridLayoutConfig }}>
-              <Box sx={{ ...twoColCssGridLayoutConfig }}>
+            <Box sx={twoColCssGridLayoutConfig}>
+              <Box sx={twoColCssGridLayoutConfig}>
                 <SecureComponent
                   scopes={[
                     IAM_SCOPES.S3_GET_BUCKET_POLICY,
@@ -494,7 +472,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                   ]}
                   resource={bucketName}
                 >
-                  <LabelValuePair
+                  <ValuePair
                     label={"Replication:"}
                     value={
                       <LabelWithIcon
@@ -502,7 +480,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                           replicationRules ? <EnabledIcon /> : <DisabledIcon />
                         }
                         label={
-                          <label className={classes.textMuted}>
+                          <label className={"muted"}>
                             {replicationRules ? "Enabled" : "Disabled"}
                           </label>
                         }
@@ -518,7 +496,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                   ]}
                   resource={bucketName}
                 >
-                  <LabelValuePair
+                  <ValuePair
                     label={"Object Locking:"}
                     value={
                       <LabelWithIcon
@@ -526,7 +504,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                           hasObjectLocking ? <EnabledIcon /> : <DisabledIcon />
                         }
                         label={
-                          <label className={classes.textMuted}>
+                          <label className={"muted"}>
                             {hasObjectLocking ? "Enabled" : "Disabled"}
                           </label>
                         }
@@ -534,8 +512,8 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                     }
                   />
                 </SecureComponent>
-                <Box className={classes.spacerTop}>
-                  <LabelValuePair
+                <Box>
+                  <ValuePair
                     label={"Tags:"}
                     value={<BucketTags bucketName={bucketName} />}
                   />
@@ -549,7 +527,6 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                   isLoading={loadingQuota}
                 />
               </Box>
-
               <Box
                 sx={{
                   display: "grid",
@@ -574,19 +551,13 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
             ]}
             resource={bucketName}
           >
-            <Grid item xs={12}>
-              <SectionTitle>Versioning</SectionTitle>
+            <Grid item xs={12} sx={{ marginTop: 5 }}>
+              <SectionTitle separator sx={{ marginBottom: 15 }}>
+                Versioning
+              </SectionTitle>
 
-              <Box
-                sx={{
-                  ...twoColCssGridLayoutConfig,
-                }}
-              >
-                <Box
-                  sx={{
-                    ...twoColCssGridLayoutConfig,
-                  }}
-                >
+              <Box sx={twoColCssGridLayoutConfig}>
+                <Box sx={twoColCssGridLayoutConfig}>
                   <EditablePropertyItem
                     iamScopes={[
                       IAM_SCOPES.S3_PUT_BUCKET_VERSIONING,
@@ -599,7 +570,7 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                         sx={{
                           display: "flex",
                           flexDirection: "column",
-                          textDecorationStyle: "normal",
+                          textDecorationStyle: "initial",
                           placeItems: "flex-start",
                           justifyItems: "flex-start",
                           gap: 3,
@@ -629,25 +600,13 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
             ]}
             resource={bucketName}
           >
-            <Grid item xs={12}>
-              <SectionTitle>Retention</SectionTitle>
+            <Grid item xs={12} sx={{ marginTop: 5 }}>
+              <SectionTitle separator sx={{ marginBottom: 15 }}>
+                Retention
+              </SectionTitle>
 
-              <Box
-                sx={{
-                  display: "grid",
-                  gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" },
-                  gridAutoFlow: { xs: "dense", sm: "row" } /* NEW */,
-                  gap: 2,
-                }}
-              >
-                <Box
-                  sx={{
-                    display: "grid",
-                    gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" },
-                    gridAutoFlow: { xs: "dense", sm: "row" } /* NEW */,
-                    gap: 2,
-                  }}
-                >
+              <Box sx={twoColCssGridLayoutConfig}>
+                <Box sx={twoColCssGridLayoutConfig}>
                   <EditablePropertyItem
                     iamScopes={[IAM_SCOPES.ADMIN_SET_BUCKET_QUOTA]}
                     resourceName={bucketName}
@@ -659,11 +618,11 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                     isLoading={loadingRetention}
                   />
 
-                  <LabelValuePair
+                  <ValuePair
                     label={"Mode:"}
                     value={
                       <label
-                        className={classes.textMuted}
+                        className={"muted"}
                         style={{ textTransform: "capitalize" }}
                       >
                         {retentionConfig && retentionConfig.mode
@@ -672,11 +631,11 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                       </label>
                     }
                   />
-                  <LabelValuePair
+                  <ValuePair
                     label={"Validity:"}
                     value={
                       <label
-                        className={classes.textMuted}
+                        className={"muted"}
                         style={{ textTransform: "capitalize" }}
                       >
                         {retentionConfig && retentionConfig.validity}{" "}
@@ -688,16 +647,6 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
                     }
                   />
                 </Box>
-
-                <Box
-                  sx={{
-                    display: "grid",
-                    gridTemplateColumns: "1fr",
-                    alignItems: "flex-start",
-                  }}
-                >
-                  {/*Spacer*/}
-                </Box>
               </Box>
             </Grid>
           </SecureComponent>
@@ -707,4 +656,4 @@ const BucketSummary = ({ classes }: IBucketSummaryProps) => {
   );
 };
 
-export default withStyles(styles)(BucketSummary);
+export default BucketSummary;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
index b272610785..e5c843f6a2 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteAccessRule.tsx
@@ -14,19 +14,13 @@
 // 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 from "react";
-import { DialogContentText } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
-
-import { ErrorResponseHandler } from "../../../../common/types";
-import useApi from "../../Common/Hooks/useApi";
-import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import React, { Fragment } from "react";
 import { ConfirmDeleteIcon } from "mds";
+import { ErrorResponseHandler } from "../../../../common/types";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import useApi from "../../Common/Hooks/useApi";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IDeleteAccessRule {
   modalOpen: boolean;
@@ -35,11 +29,6 @@ interface IDeleteAccessRule {
   toDelete: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalBasic,
-  });
-
 const DeleteAccessRule = ({
   onClose,
   modalOpen,
@@ -69,12 +58,10 @@ const DeleteAccessRule = ({
       titleIcon={<ConfirmDeleteIcon />}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
-          Are you sure you want to delete this access rule?
-        </DialogContentText>
+        <Fragment>Are you sure you want to delete this access rule?</Fragment>
       }
     />
   );
 };
 
-export default withStyles(styles)(DeleteAccessRule);
+export default DeleteAccessRule;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketLifecycleRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketLifecycleRule.tsx
index 2f1b7320c7..d581a810ee 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketLifecycleRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketLifecycleRule.tsx
@@ -14,20 +14,13 @@
 // 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, { useEffect, useState } from "react";
-import { DialogContentText } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
-
+import React, { useEffect, useState, Fragment } from "react";
 import { ConfirmDeleteIcon } from "mds";
-import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
-
-import { setErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { setErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IDeleteLifecycleRule {
   deleteOpen: boolean;
@@ -36,11 +29,6 @@ interface IDeleteLifecycleRule {
   id: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalBasic,
-  });
-
 const DeleteBucketLifecycleRule = ({
   onCloseAndRefresh,
   deleteOpen,
@@ -79,12 +67,12 @@ const DeleteBucketLifecycleRule = ({
       titleIcon={<ConfirmDeleteIcon />}
       onClose={() => onCloseAndRefresh(false)}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete the <strong>{id}</strong> rule?
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
 };
 
-export default withStyles(styles)(DeleteBucketLifecycleRule);
+export default DeleteBucketLifecycleRule;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
index c0bd63c0b3..c3e84ae5dc 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteBucketTagModal.tsx
@@ -14,16 +14,10 @@
 // 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 from "react";
-
-import { DialogContentText } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { modalBasic } from "../../Common/FormComponents/common/styleLibrary";
-import { ErrorResponseHandler } from "../../../../common/types";
+import React, { Fragment } from "react";
 import useApi from "../../Common/Hooks/useApi";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import { ErrorResponseHandler } from "../../../../common/types";
 import { ConfirmDeleteIcon } from "mds";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
@@ -34,21 +28,14 @@ interface IDeleteBucketTagModal {
   bucketName: string;
   selectedTag: string[];
   onCloseAndUpdate: (refresh: boolean) => void;
-  classes: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalBasic,
-  });
-
 const DeleteBucketTagModal = ({
   deleteOpen,
   currentTags,
   selectedTag,
   onCloseAndUpdate,
   bucketName,
-  classes,
 }: IDeleteBucketTagModal) => {
   const dispatch = useAppDispatch();
   const [tagKey, tagLabel] = selectedTag;
@@ -83,16 +70,22 @@ const DeleteBucketTagModal = ({
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete the tag{" "}
-          <b className={classes.wrapText}>
+          <b
+            style={{
+              maxWidth: 200,
+              whiteSpace: "normal",
+              wordWrap: "break-word",
+            }}
+          >
             {tagKey} : {tagLabel}
           </b>{" "}
           ?
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
 };
 
-export default withStyles(styles)(DeleteBucketTagModal);
+export default DeleteBucketTagModal;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteReplicationRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteReplicationRule.tsx
index 51b3184fbf..9c1282008d 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteReplicationRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/DeleteReplicationRule.tsx
@@ -15,17 +15,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-
-import { DialogContentText } from "@mui/material";
-
+import { ConfirmDeleteIcon, Grid, InputBox } from "mds";
 import { ErrorResponseHandler } from "../../../../common/types";
-import useApi from "../../Common/Hooks/useApi";
-import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
-import { ConfirmDeleteIcon } from "mds";
-import Grid from "@mui/material/Grid";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import useApi from "../../Common/Hooks/useApi";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IDeleteReplicationProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -97,7 +92,7 @@ const DeleteReplicationRule = ({
         disabled: deleteSelectedRules && confirmationText !== "Yes, I am sure",
       }}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           {deleteSelectedRules ? (
             <Fragment>
               Are you sure you want to remove the selected replication rules for
@@ -105,7 +100,7 @@ const DeleteReplicationRule = ({
               <br />
               To continue please type <b>Yes, I am sure</b> in the box.
               <Grid item xs={12}>
-                <InputBoxWrapper
+                <InputBox
                   id="retype-tenant"
                   name="retype-tenant"
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -122,7 +117,7 @@ const DeleteReplicationRule = ({
               <b>{ruleToDelete}</b>?
             </Fragment>
           )}
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
index d3d8d1c78d..08af072801 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditAccessRule.tsx
@@ -14,26 +14,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 } from "react";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import { Grid } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import { AddAccessRuleIcon, Button } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import { setErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
+import React, { Fragment, useState } from "react";
+import { AddAccessRuleIcon, Button, FormLayout, Grid, Select } from "mds";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import { setErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 
 interface IEditAccessRule {
-  classes: any;
   modalOpen: boolean;
   onClose: () => any;
   bucket: string;
@@ -41,16 +31,9 @@ interface IEditAccessRule {
   initial: string;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalStyleUtils,
-    ...spacingUtils,
-  });
-
 const EditAccessRule = ({
   modalOpen,
   onClose,
-  classes,
   bucket,
   toEdit,
   initial,
@@ -84,47 +67,45 @@ const EditAccessRule = ({
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <ModalWrapper
         modalOpen={modalOpen}
         title={`Edit Anonymous Access Rule for ${`${bucket}/${toEdit || ""}`}`}
         onClose={onClose}
         titleIcon={<AddAccessRuleIcon />}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.spacerTop}>
-            <SelectWrapper
-              id="access"
-              name="Access"
-              onChange={(e) => {
-                setSelectedAccess(e.target.value);
-              }}
-              label="Access"
-              value={selectedAccess}
-              options={accessOptions}
-              disabled={false}
-            />
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
-            <Button
-              id={"clear"}
-              type="button"
-              variant="regular"
-              onClick={resetForm}
-              label={"Clear"}
-            />
-            <Button
-              id={"save"}
-              type="submit"
-              variant="callAction"
-              onClick={createProcess}
-              label={"Save"}
-            />
-          </Grid>
+        <FormLayout containerPadding={false} withBorders={false}>
+          <Select
+            id="access"
+            name="Access"
+            onChange={(value) => {
+              setSelectedAccess(value);
+            }}
+            label="Access"
+            value={selectedAccess}
+            options={accessOptions}
+            disabled={false}
+          />
+        </FormLayout>
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+          <Button
+            id={"clear"}
+            type="button"
+            variant="regular"
+            onClick={resetForm}
+            label={"Clear"}
+          />
+          <Button
+            id={"save"}
+            type="submit"
+            variant="callAction"
+            onClick={createProcess}
+            label={"Save"}
+          />
         </Grid>
       </ModalWrapper>
-    </React.Fragment>
+    </Fragment>
   );
 };
 
-export default withStyles(styles)(EditAccessRule);
+export default EditAccessRule;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
index ca93b41fc0..4eea30d2c3 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditLifecycleConfiguration.tsx
@@ -15,54 +15,35 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
+import get from "lodash/get";
+import {
+  Button,
+  FormLayout,
+  Grid,
+  InputBox,
+  LifecycleConfigIcon,
+  RadioGroup,
+  Select,
+  Switch,
+} from "mds";
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   LinearProgress,
-  SelectChangeEvent,
   Typography,
 } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import { Button, LifecycleConfigIcon } from "mds";
-import get from "lodash/get";
-import Grid from "@mui/material/Grid";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
+import { api } from "api";
+import { Tier } from "api/consoleApi";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import { ITiersDropDown, LifeCycleItem } from "../types";
 import { ErrorResponseHandler } from "../../../../common/types";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { api } from "api";
-import { Tier } from "api/consoleApi";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    formFieldRowAccordion: {
-      "& .MuiPaper-root": { padding: 0 },
-    },
-    ...spacingUtils,
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...createTenantCommon,
-  });
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 
 interface IAddUserContentProps {
-  classes: any;
   closeModalAndRefresh: (reload: boolean) => void;
   selectedBucket: string;
   lifecycleRule: LifeCycleItem;
@@ -70,7 +51,6 @@ interface IAddUserContentProps {
 }
 
 const EditLifecycleConfiguration = ({
-  classes,
   closeModalAndRefresh,
   selectedBucket,
   lifecycleRule,
@@ -93,6 +73,11 @@ const EditLifecycleConfiguration = ({
   const [transitionDays, setTransitionDays] = useState<string>("0");
   const [isFormValid, setIsFormValid] = useState<boolean>(false);
 
+  /*To be removed on component replacement*/
+  const formFieldRowFilter = {
+    "& .MuiPaper-root": { padding: 0 },
+  };
+
   useEffect(() => {
     if (loadingTiers) {
       api.admin
@@ -341,214 +326,184 @@ const EditLifecycleConfiguration = ({
           saveRecord(e);
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid container spacing={1}>
-              <Grid item xs={12} sx={{ marginTop: "5px" }}>
-                <FormSwitchWrapper
-                  label="Status"
-                  indicatorLabels={["Enabled", "Disabled"]}
-                  checked={enabled}
-                  value={"user_enabled"}
-                  id="rule_status"
-                  name="rule_status"
-                  onChange={(e) => {
-                    setEnabled(e.target.checked);
+        <FormLayout containerPadding={false} withBorders={false}>
+          <Switch
+            label="Status"
+            indicatorLabels={["Enabled", "Disabled"]}
+            checked={enabled}
+            value={"user_enabled"}
+            id="rule_status"
+            name="rule_status"
+            onChange={(e) => {
+              setEnabled(e.target.checked);
+            }}
+          />
+          <InputBox
+            id="id"
+            name="id"
+            label="Id"
+            value={lifecycleRule.id}
+            onChange={() => {}}
+            disabled
+          />
+          <RadioGroup
+            currentValue={ilmType}
+            id="rule_type"
+            name="rule_type"
+            label="Rule Type"
+            selectorOptions={[
+              { value: "expiry", label: "Expiry" },
+              { value: "transition", label: "Transition" },
+            ]}
+            onChange={() => {}}
+            disableOptions
+          />
+
+          <InputBox
+            id="object-version"
+            name="object-version"
+            label="Object Version"
+            value={objectVersion}
+            onChange={() => {}}
+            disabled
+          />
+
+          {ilmType === "expiry" && lifecycleRule.expiration?.days && (
+            <InputBox
+              type="number"
+              id="expiry_days"
+              name="expiry_days"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setExpiryDays(e.target.value);
+              }}
+              label="Expiry Days"
+              value={expiryDays}
+              min="0"
+            />
+          )}
+
+          {ilmType === "expiry" &&
+            lifecycleRule.expiration?.noncurrent_expiration_days && (
+              <InputBox
+                type="number"
+                id="noncurrentversion_expiration_days"
+                name="noncurrentversion_expiration_days"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setNCExpirationDays(e.target.value);
+                }}
+                label="Non-current Expiration Days"
+                value={NCExpirationDays}
+                min="0"
+              />
+            )}
+          {ilmType === "transition" && lifecycleRule.transition?.days && (
+            <Fragment>
+              <InputBox
+                type="number"
+                id="transition_days"
+                name="transition_days"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setTransitionDays(e.target.value);
+                }}
+                label="Transition Days"
+                value={transitionDays}
+                min="0"
+              />
+              <Select
+                label="Storage Class"
+                id="storage_class"
+                name="storage_class"
+                value={storageClass}
+                onChange={(value) => {
+                  setStorageClass(value);
+                }}
+                options={tiersList}
+              />
+            </Fragment>
+          )}
+
+          {ilmType === "transition" &&
+            lifecycleRule.transition?.noncurrent_transition_days && (
+              <Fragment>
+                <InputBox
+                  type="number"
+                  id="noncurrentversion_transition_days"
+                  name="noncurrentversion_transition_days"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setNCTransitionDays(e.target.value);
                   }}
+                  label="Non-current Transition Days"
+                  value={NCTransitionDays}
+                  min="0"
                 />
-              </Grid>
-              <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="id"
-                  name="id"
-                  label="Id"
-                  value={lifecycleRule.id}
-                  onChange={() => {}}
-                  disabled
+                <InputBox
+                  id="noncurrentversion_t_SC"
+                  name="noncurrentversion_t_SC"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setNCTransitionSC(e.target.value);
+                  }}
+                  placeholder="Set Non-current Version Transition Storage Class"
+                  label="Non-current Version Transition Storage Class"
+                  value={NCTransitionSC}
                 />
-              </Grid>
-              <Grid item xs={12}>
-                <RadioGroupSelector
-                  currentSelection={ilmType}
-                  id="rule_type"
-                  name="rule_type"
-                  label="Rule Type"
-                  selectorOptions={[
-                    { value: "expiry", label: "Expiry" },
-                    { value: "transition", label: "Transition" },
-                  ]}
-                  onChange={() => {}}
-                  disableOptions
+              </Fragment>
+            )}
+          <Grid item xs={12} sx={formFieldRowFilter}>
+            <Accordion>
+              <AccordionSummary>
+                <Typography>Filters</Typography>
+              </AccordionSummary>
+
+              <AccordionDetails>
+                <InputBox
+                  id="prefix"
+                  name="prefix"
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    setPrefix(e.target.value);
+                  }}
+                  label="Prefix"
+                  value={prefix}
                 />
-              </Grid>
-              <Grid item xs={12}>
-                <InputBoxWrapper
-                  id="object-version"
-                  name="object-version"
-                  label="Object Version"
-                  value={objectVersion}
-                  onChange={() => {}}
-                  disabled
+                <QueryMultiSelector
+                  name="tags"
+                  label="Tags"
+                  elements={tags}
+                  onChange={(vl: string) => {
+                    setTags(vl);
+                  }}
+                  keyPlaceholder="Tag Key"
+                  valuePlaceholder="Tag Value"
+                  withBorder
                 />
-              </Grid>
-              {ilmType === "expiry" && lifecycleRule.expiration?.days && (
-                <Grid item xs={12}>
-                  <InputBoxWrapper
-                    type="number"
-                    id="expiry_days"
-                    name="expiry_days"
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setExpiryDays(e.target.value);
-                    }}
-                    label="Expiry Days"
-                    value={expiryDays}
-                    min="0"
-                  />
-                </Grid>
-              )}
-
-              {ilmType === "expiry" &&
-                lifecycleRule.expiration?.noncurrent_expiration_days && (
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="noncurrentversion_expiration_days"
-                      name="noncurrentversion_expiration_days"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setNCExpirationDays(e.target.value);
-                      }}
-                      label="Non-current Expiration Days"
-                      value={NCExpirationDays}
-                      min="0"
-                    />
-                  </Grid>
-                )}
-              {ilmType === "transition" && lifecycleRule.transition?.days && (
-                <Fragment>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
-                      type="number"
-                      id="transition_days"
-                      name="transition_days"
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                        setTransitionDays(e.target.value);
-                      }}
-                      label="Transition Days"
-                      value={transitionDays}
-                      min="0"
-                    />
-                  </Grid>
-
-                  <Grid item xs={12}>
-                    <SelectWrapper
-                      label="Storage Class"
-                      id="storage_class"
-                      name="storage_class"
-                      value={storageClass}
-                      onChange={(e: SelectChangeEvent<string>) => {
-                        setStorageClass(e.target.value as string);
-                      }}
-                      options={tiersList}
-                    />
-                  </Grid>
-                </Fragment>
-              )}
-
-              {ilmType === "transition" &&
-                lifecycleRule.transition?.noncurrent_transition_days && (
-                  <Fragment>
-                    <Grid item xs={12}>
-                      <InputBoxWrapper
-                        type="number"
-                        id="noncurrentversion_transition_days"
-                        name="noncurrentversion_transition_days"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setNCTransitionDays(e.target.value);
-                        }}
-                        label="Non-current Transition Days"
-                        value={NCTransitionDays}
-                        min="0"
-                      />
-                    </Grid>
-
-                    <Grid item xs={12}>
-                      <InputBoxWrapper
-                        id="noncurrentversion_t_SC"
-                        name="noncurrentversion_t_SC"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setNCTransitionSC(e.target.value);
-                        }}
-                        placeholder="Set Non-current Version Transition Storage Class"
-                        label="Non-current Version Transition Storage Class"
-                        value={NCTransitionSC}
-                      />
-                    </Grid>
-                  </Fragment>
-                )}
-              <Grid item xs={12} className={classes.formFieldRowAccordion}>
+              </AccordionDetails>
+            </Accordion>
+          </Grid>
+          {ilmType === "expiry" &&
+            lifecycleRule.expiration?.noncurrent_expiration_days && (
+              <Grid item xs={12} sx={formFieldRowFilter}>
                 <Accordion>
                   <AccordionSummary>
-                    <Typography>Filters</Typography>
+                    <Typography>Advanced</Typography>
                   </AccordionSummary>
 
                   <AccordionDetails>
-                    <Grid item xs={12}>
-                      <InputBoxWrapper
-                        id="prefix"
-                        name="prefix"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setPrefix(e.target.value);
-                        }}
-                        label="Prefix"
-                        value={prefix}
-                      />
-                    </Grid>
-                    <Grid item xs={12}>
-                      <QueryMultiSelector
-                        name="tags"
-                        label="Tags"
-                        elements={tags}
-                        onChange={(vl: string) => {
-                          setTags(vl);
-                        }}
-                        keyPlaceholder="Tag Key"
-                        valuePlaceholder="Tag Value"
-                        withBorder
-                      />
-                    </Grid>
+                    <Switch
+                      value="expired_delete_marker"
+                      id="expired_delete_marker"
+                      name="expired_delete_marker"
+                      checked={expiredObjectDM}
+                      onChange={(
+                        event: React.ChangeEvent<HTMLInputElement>,
+                      ) => {
+                        setExpiredObjectDM(event.target.checked);
+                      }}
+                      label={"Expired Object Delete Marker"}
+                    />
                   </AccordionDetails>
                 </Accordion>
               </Grid>
-              {ilmType === "expiry" &&
-                lifecycleRule.expiration?.noncurrent_expiration_days && (
-                  <Grid item xs={12} className={classes.formFieldRowAccordion}>
-                    <Accordion>
-                      <AccordionSummary>
-                        <Typography>Advanced</Typography>
-                      </AccordionSummary>
-
-                      <AccordionDetails>
-                        <Grid item xs={12}>
-                          <FormSwitchWrapper
-                            value="expired_delete_marker"
-                            id="expired_delete_marker"
-                            name="expired_delete_marker"
-                            checked={expiredObjectDM}
-                            onChange={(
-                              event: React.ChangeEvent<HTMLInputElement>,
-                            ) => {
-                              setExpiredObjectDM(event.target.checked);
-                            }}
-                            label={"Expired Object Delete Marker"}
-                          />
-                        </Grid>
-                      </AccordionDetails>
-                    </Accordion>
-                  </Grid>
-                )}
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+            )}
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"cancel"}
               type="button"
@@ -573,10 +528,10 @@ const EditLifecycleConfiguration = ({
               <LinearProgress />
             </Grid>
           )}
-        </Grid>
+        </FormLayout>
       </form>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(EditLifecycleConfiguration);
+export default EditLifecycleConfiguration;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx
index 6c0bd351c3..64ea9bdc2c 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EditReplicationModal.tsx
@@ -15,13 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
-import { BucketReplicationIcon, Button } from "mds";
+import {
+  BucketReplicationIcon,
+  Button,
+  FormLayout,
+  InputBox,
+  ReadBox,
+  Switch,
+  Grid,
+} from "mds";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import {
   createTenantCommon,
@@ -29,9 +35,6 @@ import {
   modalStyleUtils,
   spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-
-import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
 import { api } from "api";
@@ -168,144 +171,113 @@ const EditReplicationModal = ({
           setSaveEdit(true);
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.modalFormScrollable}>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <FormSwitchWrapper
-                checked={ruleState}
-                id="ruleState"
-                name="ruleState"
-                label="Rule State"
-                onChange={(e) => {
-                  setRuleState(e.target.checked);
-                }}
-                value={ruleState}
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <PredefinedList label={"Destination"} content={destination} />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="priority"
-                name="priority"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  if (e.target.validity.valid) {
-                    setPriority(e.target.value);
-                  }
-                }}
-                label="Priority"
-                value={priority}
-                pattern={"[0-9]*"}
-              />
-            </Grid>
-            <Grid
-              item
-              xs={12}
-              className={`${classes.spacerTop} ${classes.formFieldRow}`}
-            >
-              <InputBoxWrapper
-                id="storageClass"
-                name="storageClass"
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                  setTargetStorageClass(e.target.value);
-                }}
-                placeholder="STANDARD_IA,REDUCED_REDUNDANCY etc"
-                label="Storage Class"
-                value={targetStorageClass}
-              />
-            </Grid>
-            <Grid item xs={12}>
-              <fieldset className={classes.fieldGroup}>
-                <legend className={classes.descriptionText}>
-                  Object Filters
-                </legend>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <InputBoxWrapper
-                    id="prefix"
-                    name="prefix"
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setPrefix(e.target.value);
-                    }}
-                    placeholder="prefix"
-                    label="Prefix"
-                    value={prefix}
-                  />
-                </Grid>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <QueryMultiSelector
-                    name="tags"
-                    label="Tags"
-                    elements={initialTags}
-                    onChange={(vl: string) => {
-                      setTags(vl);
-                    }}
-                    keyPlaceholder="Tag Key"
-                    valuePlaceholder="Tag Value"
-                    withBorder
-                  />
-                </Grid>
-              </fieldset>
-            </Grid>
-            <Grid item xs={12}>
-              <fieldset className={classes.fieldGroup}>
-                <legend className={classes.descriptionText}>
-                  Replication Options
-                </legend>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <FormSwitchWrapper
-                    checked={repExisting}
-                    id="repExisting"
-                    name="repExisting"
-                    label="Existing Objects"
-                    onChange={(e) => {
-                      setRepExisting(e.target.checked);
-                    }}
-                    value={repExisting}
-                    description={"Replicate existing objects"}
-                  />
-                </Grid>
-                <FormSwitchWrapper
-                  checked={metadataSync}
-                  id="metadatataSync"
-                  name="metadatataSync"
-                  label="Metadata Sync"
-                  onChange={(e) => {
-                    setMetadataSync(e.target.checked);
-                  }}
-                  value={metadataSync}
-                  description={"Metadata Sync"}
-                />
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <FormSwitchWrapper
-                    checked={repDeleteMarker}
-                    id="deleteMarker"
-                    name="deleteMarker"
-                    label="Delete Marker"
-                    onChange={(e) => {
-                      setRepDeleteMarker(e.target.checked);
-                    }}
-                    value={repDeleteMarker}
-                    description={"Replicate soft deletes"}
-                  />
-                </Grid>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <FormSwitchWrapper
-                    checked={repDelete}
-                    id="repDelete"
-                    name="repDelete"
-                    label="Deletes"
-                    onChange={(e) => {
-                      setRepDelete(e.target.checked);
-                    }}
-                    value={repDelete}
-                    description={"Replicate versioned deletes"}
-                  />
-                </Grid>
-              </fieldset>
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+        <FormLayout containerPadding={false} withBorders={false}>
+          <Switch
+            checked={ruleState}
+            id="ruleState"
+            name="ruleState"
+            label="Rule State"
+            onChange={(e) => {
+              setRuleState(e.target.checked);
+            }}
+          />
+          <ReadBox label={"Destination"} sx={{ width: "100%" }}>
+            {destination}
+          </ReadBox>
+
+          <InputBox
+            id="priority"
+            name="priority"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              if (e.target.validity.valid) {
+                setPriority(e.target.value);
+              }
+            }}
+            label="Priority"
+            value={priority}
+            pattern={"[0-9]*"}
+          />
+          <InputBox
+            id="storageClass"
+            name="storageClass"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setTargetStorageClass(e.target.value);
+            }}
+            placeholder="STANDARD_IA,REDUCED_REDUNDANCY etc"
+            label="Storage Class"
+            value={targetStorageClass}
+          />
+          <fieldset className={"inputItem"}>
+            <legend>Object Filters</legend>
+            <InputBox
+              id="prefix"
+              name="prefix"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setPrefix(e.target.value);
+              }}
+              placeholder="prefix"
+              label="Prefix"
+              value={prefix}
+            />
+            <QueryMultiSelector
+              name="tags"
+              label="Tags"
+              elements={initialTags}
+              onChange={(vl: string) => {
+                setTags(vl);
+              }}
+              keyPlaceholder="Tag Key"
+              valuePlaceholder="Tag Value"
+              withBorder
+            />
+          </fieldset>
+          <fieldset className={"inputItem"}>
+            <legend>Replication Options</legend>
+
+            <Switch
+              checked={repExisting}
+              id="repExisting"
+              name="repExisting"
+              label="Existing Objects"
+              onChange={(e) => {
+                setRepExisting(e.target.checked);
+              }}
+              description={"Replicate existing objects"}
+            />
+
+            <Switch
+              checked={metadataSync}
+              id="metadatataSync"
+              name="metadatataSync"
+              label="Metadata Sync"
+              onChange={(e) => {
+                setMetadataSync(e.target.checked);
+              }}
+              description={"Metadata Sync"}
+            />
+
+            <Switch
+              checked={repDeleteMarker}
+              id="deleteMarker"
+              name="deleteMarker"
+              label="Delete Marker"
+              onChange={(e) => {
+                setRepDeleteMarker(e.target.checked);
+              }}
+              description={"Replicate soft deletes"}
+            />
+            <Switch
+              checked={repDelete}
+              id="repDelete"
+              name="repDelete"
+              label="Deletes"
+              onChange={(e) => {
+                setRepDelete(e.target.checked);
+              }}
+              description={"Replicate versioned deletes"}
+            />
+          </fieldset>
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"cancel-edit-replication"}
               type="button"
@@ -324,7 +296,7 @@ const EditReplicationModal = ({
               label={"Save"}
             />
           </Grid>
-        </Grid>
+        </FormLayout>
       </form>
     </ModalWrapper>
   );
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
index d7ca304693..053672f6ea 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableBucketEncryption.tsx
@@ -15,28 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
-import { LinearProgress, SelectChangeEvent } from "@mui/material";
-import { AddIcon, BucketEncryptionIcon, Button } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { LinearProgress } from "@mui/material";
 import {
-  formFieldStyles,
-  modalStyleUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-
-import { setModalErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
-import {
-  CONSOLE_UI_RESOURCE,
-  IAM_SCOPES,
-} from "../../../../common/SecureComponent/permissions";
-import { SecureComponent } from "../../../../common/SecureComponent";
-import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
-import AddKeyModal from "./AddKeyModal";
+  AddIcon,
+  Box,
+  BucketEncryptionIcon,
+  Button,
+  FormLayout,
+  Grid,
+  Select,
+} from "mds";
 import {
   BucketEncryptionInfo,
   BucketEncryptionType,
@@ -46,15 +34,19 @@ import {
 } from "api/consoleApi";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...modalStyleUtils,
-    ...formFieldStyles,
-  });
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import { setModalErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import {
+  CONSOLE_UI_RESOURCE,
+  IAM_SCOPES,
+} from "../../../../common/SecureComponent/permissions";
+import { SecureComponent } from "../../../../common/SecureComponent";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import AddKeyModal from "./AddKeyModal";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 
 interface IEnableBucketEncryptionProps {
-  classes: any;
   open: boolean;
   encryptionEnabled: boolean;
   encryptionCfg: BucketEncryptionInfo | null;
@@ -63,7 +55,6 @@ interface IEnableBucketEncryptionProps {
 }
 
 const EnableBucketEncryption = ({
-  classes,
   open,
   encryptionCfg,
   selectedBucket,
@@ -128,7 +119,7 @@ const EnableBucketEncryption = ({
           encType: encryptionType,
           kmsKeyID: kmsKeyID,
         })
-        .then((res) => {
+        .then(() => {
           setLoading(false);
           closeModalAndRefresh();
         })
@@ -168,83 +159,69 @@ const EnableBucketEncryption = ({
             enableBucketEncryption(e);
           }}
         >
-          <Grid container>
-            <Grid item xs={12} className={classes.modalFormScrollable}>
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <SelectWrapper
-                  onChange={(e) => {
-                    setEncryptionType(
-                      e.target.value as BucketEncryptionType | "disabled",
-                    );
-                  }}
-                  id="select-encryption-type"
-                  name="select-encryption-type"
-                  label={"Encryption Type"}
-                  value={encryptionType}
-                  options={[
-                    {
-                      label: "Disabled",
-                      value: "disabled",
-                    },
-                    {
-                      label: "SSE-S3",
-                      value: BucketEncryptionType.SseS3,
-                    },
-                    {
-                      label: "SSE-KMS",
-                      value: BucketEncryptionType.SseKms,
-                    },
-                  ]}
-                />
-              </Grid>
-
-              {encryptionType === "sse-kms" && (
-                <Grid
-                  item
-                  xs={12}
-                  className={classes.formFieldRow}
-                  display={"flex"}
+          <FormLayout withBorders={false} containerPadding={false}>
+            <Select
+              onChange={(value) => {
+                setEncryptionType(value as BucketEncryptionType | "disabled");
+              }}
+              id="select-encryption-type"
+              name="select-encryption-type"
+              label={"Encryption Type"}
+              value={encryptionType}
+              options={[
+                {
+                  label: "Disabled",
+                  value: "disabled",
+                },
+                {
+                  label: "SSE-S3",
+                  value: BucketEncryptionType.SseS3,
+                },
+                {
+                  label: "SSE-KMS",
+                  value: BucketEncryptionType.SseKms,
+                },
+              ]}
+            />
+            {encryptionType === "sse-kms" && (
+              <Box sx={{ display: "flex", gap: 10 }} className={"inputItem"}>
+                {keys && (
+                  <Select
+                    onChange={(value) => {
+                      setKmsKeyID(value);
+                    }}
+                    id="select-kms-key-id"
+                    name="select-kms-key-id"
+                    label={"KMS Key ID"}
+                    value={kmsKeyID}
+                    options={keys.map((key: KmsKeyInfo) => {
+                      return {
+                        label: key.name || "",
+                        value: key.name || "",
+                      };
+                    })}
+                  />
+                )}
+                <SecureComponent
+                  scopes={[IAM_SCOPES.KMS_IMPORT_KEY]}
+                  resource={CONSOLE_UI_RESOURCE}
+                  errorProps={{ disabled: true }}
                 >
-                  {keys && (
-                    <SelectWrapper
-                      onChange={(e: SelectChangeEvent<string>) => {
-                        setKmsKeyID(e.target.value);
+                  <TooltipWrapper tooltip={"Add key"}>
+                    <Button
+                      id={"import-key"}
+                      variant={"regular"}
+                      icon={<AddIcon />}
+                      onClick={(e) => {
+                        setAddOpen(true);
+                        e.preventDefault();
                       }}
-                      id="select-kms-key-id"
-                      name="select-kms-key-id"
-                      label={"KMS Key ID"}
-                      value={kmsKeyID}
-                      options={keys.map((key: KmsKeyInfo) => {
-                        return {
-                          label: key.name || "",
-                          value: key.name || "",
-                        };
-                      })}
                     />
-                  )}
-                  <Grid marginLeft={1}>
-                    <SecureComponent
-                      scopes={[IAM_SCOPES.KMS_IMPORT_KEY]}
-                      resource={CONSOLE_UI_RESOURCE}
-                      errorProps={{ disabled: true }}
-                    >
-                      <TooltipWrapper tooltip={"Add key"}>
-                        <Button
-                          id={"import-key"}
-                          variant={"regular"}
-                          icon={<AddIcon />}
-                          onClick={(e) => {
-                            setAddOpen(true);
-                            e.preventDefault();
-                          }}
-                        />
-                      </TooltipWrapper>
-                    </SecureComponent>
-                  </Grid>
-                </Grid>
-              )}
-            </Grid>
-            <Grid item xs={12} className={classes.modalButtonBar}>
+                  </TooltipWrapper>
+                </SecureComponent>
+              </Box>
+            )}
+            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
               <Button
                 id={"cancel"}
                 type="submit"
@@ -268,11 +245,11 @@ const EnableBucketEncryption = ({
                 <LinearProgress />
               </Grid>
             )}
-          </Grid>
+          </FormLayout>
         </form>
       </ModalWrapper>
     </Fragment>
   );
 };
 
-export default withStyles(styles)(EnableBucketEncryption);
+export default EnableBucketEncryption;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
index f1e49a6921..55d46888d7 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableQuota.tsx
@@ -15,24 +15,21 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { LinearProgress } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import { BucketQuotaIcon, Button } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
+import {
+  BucketQuotaIcon,
+  Button,
+  FormLayout,
+  InputBox,
+  Switch,
+  Grid,
+} from "mds";
 import {
   calculateBytes,
   getBytes,
   k8sScalarUnitsExcluding,
 } from "../../../../common/utils";
 
-import {
-  formFieldStyles,
-  modalStyleUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 
@@ -41,15 +38,9 @@ import { useAppDispatch } from "../../../../store";
 import { BucketQuota } from "api/consoleApi";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    ...modalStyleUtils,
-  });
+import { LinearProgress } from "@mui/material";
 
 interface IEnableQuotaProps {
-  classes: any;
   open: boolean;
   enabled: boolean;
   cfg: BucketQuota | null;
@@ -58,7 +49,6 @@ interface IEnableQuotaProps {
 }
 
 const EnableQuota = ({
-  classes,
   open,
   enabled,
   cfg,
@@ -134,60 +124,48 @@ const EnableQuota = ({
           enableBucketEncryption();
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.formScrollable}>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <FormSwitchWrapper
-                value="bucket_quota"
-                id="bucket_quota"
-                name="bucket_quota"
-                checked={quotaEnabled}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setQuotaEnabled(event.target.checked);
-                }}
-                label={"Enabled"}
-              />
-            </Grid>
-            {quotaEnabled && (
-              <React.Fragment>
-                <Grid item xs={12} className={classes.formFieldRow}>
-                  <Grid container>
-                    <Grid item xs={12}>
-                      <InputBoxWrapper
-                        id="quota_size"
-                        name="quota_size"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                          setQuotaSize(e.target.value);
-                          if (!e.target.validity.valid) {
-                            setValidInput(false);
-                          } else {
-                            setValidInput(true);
-                          }
-                        }}
-                        label="Quota"
-                        value={quotaSize}
-                        required
-                        min="1"
-                        overlayObject={
-                          <InputUnitMenu
-                            id={"quota_unit"}
-                            onUnitChange={(newValue) => {
-                              setQuotaUnit(newValue);
-                            }}
-                            unitSelected={quotaUnit}
-                            unitsList={k8sScalarUnitsExcluding(["Ki"])}
-                            disabled={false}
-                          />
-                        }
-                        error={!validInput ? "Please enter a valid quota" : ""}
-                      />
-                    </Grid>
-                  </Grid>
-                </Grid>
-              </React.Fragment>
-            )}
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+        <FormLayout withBorders={false} containerPadding={false}>
+          <Switch
+            value="bucket_quota"
+            id="bucket_quota"
+            name="bucket_quota"
+            checked={quotaEnabled}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              setQuotaEnabled(event.target.checked);
+            }}
+            label={"Enabled"}
+          />
+          {quotaEnabled && (
+            <InputBox
+              id="quota_size"
+              name="quota_size"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setQuotaSize(e.target.value);
+                if (!e.target.validity.valid) {
+                  setValidInput(false);
+                } else {
+                  setValidInput(true);
+                }
+              }}
+              label="Quota"
+              value={quotaSize}
+              required
+              min="1"
+              overlayObject={
+                <InputUnitMenu
+                  id={"quota_unit"}
+                  onUnitChange={(newValue) => {
+                    setQuotaUnit(newValue);
+                  }}
+                  unitSelected={quotaUnit}
+                  unitsList={k8sScalarUnitsExcluding(["Ki"])}
+                  disabled={false}
+                />
+              }
+              error={!validInput ? "Please enter a valid quota" : ""}
+            />
+          )}
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"cancel"}
               type="button"
@@ -212,10 +190,10 @@ const EnableQuota = ({
               <LinearProgress />
             </Grid>
           )}
-        </Grid>
+        </FormLayout>
       </form>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(EnableQuota);
+export default EnableQuota;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
index 4eb67370d8..f7441ece19 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/EnableVersioningModal.tsx
@@ -15,17 +15,14 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import { DialogContentText } from "@mui/material";
-
-import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
-import { ConfirmModalIcon } from "mds";
-
-import { setErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
-import VersioningInfo from "../VersioningInfo";
+import { Box, ConfirmModalIcon } from "mds";
 import { BucketVersioningResponse } from "api/consoleApi";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
+import { setErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import VersioningInfo from "../VersioningInfo";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IVersioningEventProps {
   closeVersioningModalAndRefresh: (refresh: boolean) => void;
@@ -80,7 +77,7 @@ const EnableVersioningModal = ({
         closeVersioningModalAndRefresh(false);
       }}
       confirmationContent={
-        <DialogContentText id="alert-dialog-description">
+        <Box id="alert-dialog-description">
           Are you sure you want to{" "}
           <strong>{isVersioningEnabled ? "suspend" : "enable"}</strong>{" "}
           versioning for this bucket?
@@ -91,16 +88,16 @@ const EnableVersioningModal = ({
               <strong>File versions won't be automatically deleted.</strong>
             </Fragment>
           )}
-          <div
-            style={{
+          <Box
+            sx={{
               paddingTop: "20px",
             }}
           >
             {isVersioningEnabled ? (
               <VersioningInfo versioningState={versioningInfo} />
             ) : null}
-          </div>
-        </DialogContentText>
+          </Box>
+        </Box>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
index 0e204df9c6..6fccec6bc2 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
@@ -15,50 +15,25 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Theme } from "@mui/material/styles";
-import { Button, ChangeAccessPolicyIcon } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
+import { api } from "api";
+import { BucketAccess } from "api/consoleApi";
+import { errorToHandler } from "api/errors";
 import {
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
-
+  Box,
+  Button,
+  ChangeAccessPolicyIcon,
+  FormLayout,
+  Grid,
+  Select,
+} from "mds";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
 import { emptyPolicy } from "../../Policies/utils";
-import { api } from "api";
-import { BucketAccess } from "api/consoleApi";
-import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    codeMirrorContainer: {
-      marginBottom: 20,
-      "& label": {
-        marginBottom: ".5rem",
-      },
-      "& label + div": {
-        display: "none",
-      },
-    },
-    ...formFieldStyles,
-    ...modalStyleUtils,
-    ...spacingUtils,
-  });
-createStyles({
-  ...modalStyleUtils,
-  ...spacingUtils,
-});
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
+import CodeMirrorWrapper from "../../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 
 interface ISetAccessPolicyProps {
-  classes: any;
   open: boolean;
   bucketName: string;
   actualPolicy: BucketAccess | string;
@@ -67,7 +42,6 @@ interface ISetAccessPolicyProps {
 }
 
 const SetAccessPolicy = ({
-  classes,
   open,
   bucketName,
   actualPolicy,
@@ -89,7 +63,7 @@ const SetAccessPolicy = ({
         access: accessPolicy as BucketAccess,
         definition: policyDefinition,
       })
-      .then((res) => {
+      .then(() => {
         setAddLoading(false);
         closeModalAndRefresh();
       })
@@ -124,75 +98,71 @@ const SetAccessPolicy = ({
           addRecord(e);
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.modalFormScrollable}>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <SelectWrapper
-                value={accessPolicy}
-                label="Access Policy"
-                id="select-access-policy"
-                name="select-access-policy"
-                onChange={(e) => {
-                  setAccessPolicy(e.target.value as BucketAccess);
+        <FormLayout withBorders={false} containerPadding={false}>
+          <Select
+            value={accessPolicy}
+            label="Access Policy"
+            id="select-access-policy"
+            name="select-access-policy"
+            onChange={(value) => {
+              setAccessPolicy(value as BucketAccess);
+            }}
+            options={[
+              { value: BucketAccess.PRIVATE, label: "Private" },
+              { value: BucketAccess.PUBLIC, label: "Public" },
+              { value: BucketAccess.CUSTOM, label: "Custom" },
+            ]}
+          />
+          {accessPolicy === "PUBLIC" && (
+            <Box
+              className={"muted"}
+              style={{
+                marginTop: "25px",
+                fontSize: "14px",
+                fontStyle: "italic",
+              }}
+            >
+              * Warning: With Public access anyone will be able to upload,
+              download and delete files from this Bucket *
+            </Box>
+          )}
+          {accessPolicy === "CUSTOM" && (
+            <Grid item xs={12}>
+              <CodeMirrorWrapper
+                label={`Write Policy`}
+                value={policyDefinition}
+                onChange={(value) => {
+                  setPolicyDefinition(value);
                 }}
-                options={[
-                  { value: BucketAccess.PRIVATE, label: "Private" },
-                  { value: BucketAccess.PUBLIC, label: "Public" },
-                  { value: BucketAccess.CUSTOM, label: "Custom" },
-                ]}
+                editorHeight={"300px"}
               />
             </Grid>
-            {accessPolicy === "PUBLIC" && (
-              <div
-                style={{
-                  marginTop: "25px",
-                  fontSize: "14px",
-                  fontStyle: "italic",
-                  color: "#5E5E5E",
-                }}
-              >
-                * Warning: With Public access anyone will be able to upload,
-                download and delete files from this Bucket *
-              </div>
-            )}
-            {accessPolicy === "CUSTOM" && (
-              <Grid item xs={12}>
-                <CodeMirrorWrapper
-                  label={`Write Policy`}
-                  value={policyDefinition}
-                  onChange={(value) => {
-                    setPolicyDefinition(value);
-                  }}
-                  editorHeight={"300px"}
-                />
-              </Grid>
-            )}
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
-            <Button
-              id={"cancel"}
-              type="button"
-              variant="regular"
-              onClick={() => {
-                closeModalAndRefresh();
-              }}
-              disabled={addLoading}
-              label={"Cancel"}
-            />
-            <Button
-              id={"set"}
-              type="submit"
-              variant="callAction"
-              disabled={
-                addLoading || (accessPolicy === "CUSTOM" && !policyDefinition)
-              }
-              label={"Set"}
-            />
-          </Grid>
-        </Grid>
+          )}
+        </FormLayout>
+        <Box sx={modalStyleUtils.modalButtonBar}>
+          <Button
+            id={"cancel"}
+            type="button"
+            variant="regular"
+            onClick={() => {
+              closeModalAndRefresh();
+            }}
+            disabled={addLoading}
+            label={"Cancel"}
+          />
+          <Button
+            id={"set"}
+            type="submit"
+            variant="callAction"
+            disabled={
+              addLoading || (accessPolicy === "CUSTOM" && !policyDefinition)
+            }
+            label={"Set"}
+          />
+        </Box>
       </form>
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(SetAccessPolicy);
+export default SetAccessPolicy;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
index a90f51e9ed..5310636f3a 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetRetentionConfig.tsx
@@ -15,45 +15,23 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-import { Button, Loader } from "mds";
-import { LinearProgress } from "@mui/material";
-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 {
-  createTenantCommon,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { setModalErrorSnackMessage } from "../../../../systemSlice";
-import { useAppDispatch } from "../../../../store";
+import { Button, Loader, Grid, FormLayout, RadioGroup, InputBox } from "mds";
 import { api } from "api";
 import { ObjectRetentionMode, ObjectRetentionUnit } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...spacingUtils,
-    ...createTenantCommon,
-    ...formFieldStyles,
-    ...modalStyleUtils,
-  });
+import { LinearProgress } from "@mui/material";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
+import { setModalErrorSnackMessage } from "../../../../systemSlice";
+import { useAppDispatch } from "../../../../store";
+import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 
 interface ISetRetentionConfigProps {
-  classes: any;
   open: boolean;
   bucketName: string;
   closeModalAndRefresh: () => void;
 }
 
 const SetRetentionConfig = ({
-  classes,
   open,
   bucketName,
   closeModalAndRefresh,
@@ -138,54 +116,46 @@ const SetRetentionConfig = ({
             setRetention(e);
           }}
         >
-          <Grid container>
-            <Grid item xs={12} className={classes.modalFormScrollable}>
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <RadioGroupSelector
-                  currentSelection={retentionMode}
-                  id="retention_mode"
-                  name="retention_mode"
-                  label="Retention Mode"
-                  onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                    setRetentionMode(e.target.value as ObjectRetentionMode);
-                  }}
-                  selectorOptions={[
-                    { value: "compliance", label: "Compliance" },
-                    { value: "governance", label: "Governance" },
-                  ]}
-                />
-              </Grid>
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <RadioGroupSelector
-                  currentSelection={retentionUnit}
-                  id="retention_unit"
-                  name="retention_unit"
-                  label="Retention Unit"
-                  onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
-                    setRetentionUnit(e.target.value as ObjectRetentionUnit);
-                  }}
-                  selectorOptions={[
-                    { value: "days", label: "Days" },
-                    { value: "years", label: "Years" },
-                  ]}
-                />
-              </Grid>
-              <Grid item xs={12} className={classes.formFieldRow}>
-                <InputBoxWrapper
-                  type="number"
-                  id="retention_validity"
-                  name="retention_validity"
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                    setRetentionValidity(e.target.valueAsNumber);
-                  }}
-                  label="Retention Validity"
-                  value={String(retentionValidity)}
-                  required
-                  min="1"
-                />
-              </Grid>
-            </Grid>
-            <Grid item xs={12} className={classes.modalButtonBar}>
+          <FormLayout containerPadding={false} withBorders={false}>
+            <RadioGroup
+              currentValue={retentionMode as string}
+              id="retention_mode"
+              name="retention_mode"
+              label="Retention Mode"
+              onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                setRetentionMode(e.target.value as ObjectRetentionMode);
+              }}
+              selectorOptions={[
+                { value: "compliance", label: "Compliance" },
+                { value: "governance", label: "Governance" },
+              ]}
+            />
+            <RadioGroup
+              currentValue={retentionUnit as string}
+              id="retention_unit"
+              name="retention_unit"
+              label="Retention Unit"
+              onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                setRetentionUnit(e.target.value as ObjectRetentionUnit);
+              }}
+              selectorOptions={[
+                { value: "days", label: "Days" },
+                { value: "years", label: "Years" },
+              ]}
+            />
+            <InputBox
+              type="number"
+              id="retention_validity"
+              name="retention_validity"
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                setRetentionValidity(e.target.valueAsNumber);
+              }}
+              label="Retention Validity"
+              value={String(retentionValidity)}
+              required
+              min="1"
+            />
+            <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
               <Button
                 id={"cancel"}
                 type="button"
@@ -210,11 +180,11 @@ const SetRetentionConfig = ({
                 <LinearProgress />
               </Grid>
             )}
-          </Grid>
+          </FormLayout>
         </form>
       )}
     </ModalWrapper>
   );
 };
 
-export default withStyles(styles)(SetRetentionConfig);
+export default SetRetentionConfig;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
deleted file mode 100644
index f97a0dbbde..0000000000
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ActionLink.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-// 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 <http://www.gnu.org/licenses/>.
-
-import React from "react";
-import { Button } from "@mui/material";
-import { Loader } from "mds";
-
-type ActionLinkProps = {
-  isLoading: boolean;
-  onClick: () => void;
-  classes?: any;
-  label: any;
-  [x: string]: any;
-};
-
-// TODO: Create an mds version of this.
-const ActionLink = ({
-  isLoading,
-  onClick,
-  label,
-  ...restProps
-}: ActionLinkProps) => {
-  return (
-    <Button
-      color="primary"
-      onClick={onClick}
-      variant="text"
-      sx={{
-        padding: 0,
-        margin: 0,
-        alignItems: "flex-start",
-        justifyContent: "flex-start",
-        display: "inline-flex",
-        height: "auto",
-        textDecoration: "underline",
-        color: "#2781B0",
-
-        "&:hover": {
-          background: "#ffffff",
-          textDecoration: "underline",
-        },
-      }}
-      disableRipple
-      disableFocusRipple
-      {...restProps}
-    >
-      {isLoading ? <Loader style={{ width: 16, height: 16 }} /> : label}
-    </Button>
-  );
-};
-
-export default ActionLink;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx
index 0f754b99c1..14df3f2bb6 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketQuotaSize.tsx
@@ -15,9 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box } from "@mui/material";
+import { HardBucketQuotaIcon, Box } from "mds";
 import { niceBytes } from "../../../../../common/utils";
-import { HardBucketQuotaIcon } from "mds";
 
 const BucketQuotaSize = ({ quota }: { quota: any }) => {
   return (
@@ -33,7 +32,6 @@ const BucketQuotaSize = ({ quota }: { quota: any }) => {
       }}
     >
       <HardBucketQuotaIcon />
-
       <Box
         sx={{
           display: "flex",
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
index 719c287dcb..a486e4f4f9 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/BucketTags.tsx
@@ -13,22 +13,18 @@
 //
 // 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, { useEffect, useState } from "react";
+import get from "lodash/get";
+import { Loader, Box, Tag, AddIcon } from "mds";
 import { Bucket } from "../../../Watch/types";
 import { ErrorResponseHandler } from "../../../../../common/types";
-import useApi from "../../../Common/Hooks/useApi";
-import { Box } from "@mui/material";
 import { IAM_SCOPES } from "../../../../../common/SecureComponent/permissions";
 import { SecureComponent } from "../../../../../common/SecureComponent";
-import get from "lodash/get";
-import Chip from "@mui/material/Chip";
-import CloseIcon from "@mui/icons-material/Close";
-import AddIcon from "@mui/icons-material/Add";
-import withSuspense from "../../../Common/Components/withSuspense";
-import { Loader } from "mds";
-
 import { setErrorSnackMessage } from "../../../../../systemSlice";
 import { useAppDispatch } from "../../../../../store";
+import useApi from "../../../Common/Hooks/useApi";
+import withSuspense from "../../../Common/Components/withSuspense";
 
 const AddBucketTagModal = withSuspense(
   React.lazy(() => import("../AddBucketTagModal")),
@@ -103,9 +99,10 @@ const BucketTags = ({ bucketName }: BucketTagProps) => {
           sx={{
             display: "flex",
             flexFlow: "column",
+            marginTop: 5,
           }}
         >
-          <Box>
+          <Box sx={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
             {tagKeys &&
               tagKeys.map((tagKey: any, index: any) => {
                 const tag = get(tags, `${tagKey}`, "");
@@ -124,15 +121,9 @@ const BucketTags = ({ bucketName }: BucketTagProps) => {
                         onDelete: null,
                       }}
                     >
-                      <Chip
-                        style={{
-                          textTransform: "none",
-                          marginRight: "5px",
-                        }}
-                        size="small"
+                      <Tag
                         label={`${tagKey} : ${tag}`}
-                        color="primary"
-                        deleteIcon={<CloseIcon />}
+                        id={`tag-${tagKey}-${tag}`}
                         onDelete={() => {
                           deleteTag(tagKey, tag);
                         }}
@@ -142,29 +133,26 @@ const BucketTags = ({ bucketName }: BucketTagProps) => {
                 }
                 return null;
               })}
+            <SecureComponent
+              scopes={[
+                IAM_SCOPES.S3_PUT_BUCKET_TAGGING,
+                IAM_SCOPES.S3_PUT_ACTIONS,
+              ]}
+              resource={bucketName}
+              errorProps={{ disabled: true, onClick: null }}
+            >
+              <Tag
+                label="Add tag"
+                icon={<AddIcon />}
+                id={"create-tag"}
+                variant={"outlined"}
+                onClick={() => {
+                  setTagModalOpen(true);
+                }}
+                sx={{ cursor: "pointer", maxWidth: 90 }}
+              />
+            </SecureComponent>
           </Box>
-
-          <SecureComponent
-            scopes={[
-              IAM_SCOPES.S3_PUT_BUCKET_TAGGING,
-              IAM_SCOPES.S3_PUT_ACTIONS,
-            ]}
-            resource={bucketName}
-            errorProps={{ disabled: true, onClick: null }}
-          >
-            <Chip
-              style={{ maxWidth: 80, marginTop: "10px" }}
-              icon={<AddIcon />}
-              clickable
-              size="small"
-              label="Add tag"
-              color="primary"
-              variant="outlined"
-              onClick={() => {
-                setTagModalOpen(true);
-              }}
-            />
-          </SecureComponent>
         </Box>
       </SecureComponent>
 
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx
index bc5dce55af..1d96b61f7d 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditActionButton.tsx
@@ -15,11 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { IconButton } from "@mui/material";
-import { EditIcon } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { EditIcon, IconButton } from "mds";
 
 type EditActionButtonProps = {
   disabled?: boolean;
@@ -27,15 +23,6 @@ type EditActionButtonProps = {
   [x: string]: any;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
-    root: {
-      "&:hover": {
-        backgroundColor: "#E2E2E2",
-      },
-    },
-  });
-
 const EditActionButton = ({
   disabled,
   onClick,
@@ -53,4 +40,4 @@ const EditActionButton = ({
   );
 };
 
-export default withStyles(styles)(EditActionButton);
+export default EditActionButton;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
index 0918794a31..c32cbf6a3f 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/EditablePropertyItem.tsx
@@ -15,10 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import LabelValuePair from "../../../Common/UsageBarWrapper/LabelValuePair";
+import { Box, ValuePair, ActionLink } from "mds";
 import { SecureComponent } from "../../../../../common/SecureComponent";
-import ActionLink from "./ActionLink";
-import { Box } from "@mui/material";
+
 import EditActionButton from "./EditActionButton";
 
 type EditablePropertyItemProps = {
@@ -69,9 +68,10 @@ const EditablePropertyItem = ({
         display: "flex",
         alignItems: "baseline",
         justifyContent: "flex-start",
+        gap: 10,
       }}
     >
-      <LabelValuePair
+      <ValuePair
         label={property}
         value={
           <SecureAction
@@ -79,7 +79,12 @@ const EditablePropertyItem = ({
             iamScopes={iamScopes}
             secureCmpProps={secureCmpProps}
           >
-            <ActionLink isLoading={isLoading} onClick={onEdit} label={value} />
+            <ActionLink
+              isLoading={isLoading}
+              onClick={onEdit}
+              label={value}
+              sx={{ fontWeight: "bold" }}
+            />
           </SecureAction>
         }
       />
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx
index 8284c81b32..0cdd160873 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/LabelWithIcon.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box } from "@mui/material";
+import { Box } from "mds";
 
 type LabelWithIconProps = {
   icon: React.ReactNode | null;
@@ -27,20 +27,22 @@ const LabelWithIcon = ({ icon = null, label = null }: LabelWithIconProps) => {
     <Box
       sx={{
         display: "flex",
+        alignItems: "center",
+        gap: 5,
+        marginTop: 3,
       }}
     >
-      <div
-        style={{
+      <Box
+        sx={{
           height: 16,
           width: 16,
           display: "flex",
           alignItems: "center",
-          marginTop: 5,
         }}
       >
         {icon}
-      </div>
-      <div style={{ marginLeft: icon ? 5 : "none" }}>{label}</div>
+      </Box>
+      <Box>{label}</Box>
     </Box>
   );
 };
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx
index e0f6835a63..d5fd83e628 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SummaryItems/ReportedUsage.tsx
@@ -15,9 +15,8 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Box } from "@mui/material";
+import { ReportedUsageFullIcon, Box } from "mds";
 import { niceBytes } from "../../../../../common/utils";
-import { ReportedUsageFullIcon } from "mds";
 
 const ReportedUsage = ({ bucketSize }: { bucketSize: string }) => {
   return (
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
index 41c5849c5a..d09274a032 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucket.tsx
@@ -15,29 +15,27 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import Grid from "@mui/material/Grid";
+import styled from "styled-components";
+import get from "lodash/get";
 import { LinearProgress } from "@mui/material";
-import { Theme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
 import {
   BackLink,
+  Box,
   BucketsIcon,
   Button,
   FormLayout,
+  Grid,
   HelpBox,
   InfoIcon,
+  InputBox,
   PageLayout,
+  RadioGroup,
+  Switch,
 } from "mds";
-import {
-  containerForHeader,
-  modalBasic,
-} from "../../../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import RadioGroupSelector from "../../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { k8sScalarUnitsExcluding } from "../../../../../common/utils";
 import { AppState, useAppDispatch } from "../../../../../store";
 import { useSelector } from "react-redux";
-import FormSwitchWrapper from "../../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import {
   selDistSet,
   selSiteRep,
@@ -78,51 +76,18 @@ import {
   ObjectRetentionMode,
 } from "../../../../../api/consoleApi";
 import { errorToHandler } from "../../../../../api/errors";
-import makeStyles from "@mui/styles/makeStyles";
 import HelpMenu from "../../../HelpMenu";
 
-const useStyles = makeStyles((theme: Theme) => ({
-  buttonContainer: {
-    marginTop: 24,
-    display: "flex",
-    justifyContent: "flex-end",
-    "& button": {
-      marginLeft: 8,
-    },
-  },
-  error: {
-    color: "#b53b4b",
-    border: "1px solid #b53b4b",
-    padding: 8,
-    borderRadius: 3,
-  },
-  alertVersioning: {
-    border: "#E2E2E2 1px solid",
-    backgroundColor: "#FBFAFA",
-    borderRadius: 3,
-    display: "flex",
-    alignItems: "center",
-    padding: "10px",
-    color: "#767676",
-    "& > .min-icon ": {
-      width: 20,
-      height: 20,
-      marginRight: 10,
-    },
-  },
-  h6title: {
-    fontWeight: "bold",
-    color: "#000000",
-    fontSize: 20,
-  },
-  ...containerForHeader,
-  ...modalBasic,
+const ErrorBox = styled.div(({ theme }) => ({
+  color: get(theme, "signalColors.danger", "#C51B3F"),
+  border: `1px solid ${get(theme, "signalColors.danger", "#C51B3F")}`,
+  padding: 8,
+  borderRadius: 3,
 }));
 
 const AddBucket = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const classes = useStyles();
 
   const validBucketCharacters = new RegExp(
     `^[a-z0-9][a-z0-9\\.\\-]{1,61}[a-z0-9]$`,
@@ -303,18 +268,16 @@ const AddBucket = () => {
               dispatch(addBucketAsync());
             }}
           >
-            <Grid container marginTop={1} spacing={2}>
-              <Grid item xs={12}>
-                <AddBucketName hasErrors={hasErrors} />
-              </Grid>
-              <Grid item xs={12}>
+            <Box>
+              <AddBucketName hasErrors={hasErrors} />
+              <Box sx={{ margin: "10px 0" }}>
                 <BucketNamingRules errorList={validationResult} />
-              </Grid>
-              <Grid item xs={12}>
-                <SectionTitle>Features</SectionTitle>
+              </Box>
+              <SectionTitle>Features</SectionTitle>
+              <Box sx={{ marginTop: 10 }}>
                 {!distributedSetup && (
                   <Fragment>
-                    <div className={classes.error}>
+                    <ErrorBox>
                       These features are unavailable in a single-disk setup.
                       <br />
                       Please deploy a server in{" "}
@@ -326,24 +289,49 @@ const AddBucket = () => {
                         Distributed Mode
                       </a>{" "}
                       to use these features.
-                    </div>
+                    </ErrorBox>
                     <br />
                     <br />
                   </Fragment>
                 )}
-              </Grid>
-              <Grid item xs={12}>
+
                 {siteReplicationInfo.enabled && (
                   <Fragment>
                     <br />
-                    <div className={classes.alertVersioning}>
+                    <Box
+                      withBorders
+                      sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        padding: "10px",
+                        "& > .min-icon ": {
+                          width: 20,
+                          height: 20,
+                          marginRight: 10,
+                        },
+                      }}
+                    >
                       <InfoIcon /> Versioning setting cannot be changed as
                       cluster replication is enabled for this site.
-                    </div>
+                    </Box>
                     <br />
                   </Fragment>
                 )}
-                <TooltipWrapper
+                <Switch
+                  value="versioned"
+                  id="versioned"
+                  name="versioned"
+                  checked={versioningEnabled}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    dispatch(setVersioning(event.target.checked));
+                  }}
+                  label={"Versioning"}
+                  disabled={
+                    !distributedSetup ||
+                    lockingEnabled ||
+                    siteReplicationInfo.enabled ||
+                    !versioningAllowed
+                  }
                   tooltip={
                     versioningAllowed
                       ? lockingEnabled && versioningEnabled
@@ -357,27 +345,22 @@ const AddBucket = () => {
                           "Versioning",
                         )
                   }
-                >
-                  <FormSwitchWrapper
-                    value="versioned"
-                    id="versioned"
-                    name="versioned"
-                    checked={versioningEnabled}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                      dispatch(setVersioning(event.target.checked));
-                    }}
-                    label={"Versioning"}
-                    disabled={
-                      !distributedSetup ||
-                      lockingEnabled ||
-                      siteReplicationInfo.enabled ||
-                      !versioningAllowed
+                />
+                <Switch
+                  value="locking"
+                  id="locking"
+                  name="locking"
+                  disabled={
+                    lockingFieldDisabled || !distributedSetup || !lockingAllowed
+                  }
+                  checked={lockingEnabled}
+                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                    dispatch(setEnableObjectLocking(event.target.checked));
+                    if (event.target.checked && !siteReplicationInfo.enabled) {
+                      dispatch(setVersioning(true));
                     }
-                  />
-                </TooltipWrapper>
-              </Grid>
-              <Grid item xs={12}>
-                <TooltipWrapper
+                  }}
+                  label={"Object Locking"}
                   tooltip={
                     lockingAllowed
                       ? ""
@@ -390,33 +373,8 @@ const AddBucket = () => {
                           "Locking",
                         )
                   }
-                >
-                  <FormSwitchWrapper
-                    value="locking"
-                    id="locking"
-                    name="locking"
-                    disabled={
-                      lockingFieldDisabled ||
-                      !distributedSetup ||
-                      !lockingAllowed
-                    }
-                    checked={lockingEnabled}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                      dispatch(setEnableObjectLocking(event.target.checked));
-                      if (
-                        event.target.checked &&
-                        !siteReplicationInfo.enabled
-                      ) {
-                        dispatch(setVersioning(true));
-                      }
-                    }}
-                    label={"Object Locking"}
-                  />
-                </TooltipWrapper>
-              </Grid>
-
-              <Grid item xs={12}>
-                <FormSwitchWrapper
+                />
+                <Switch
                   value="bucket_quota"
                   id="bucket_quota"
                   name="bucket_quota"
@@ -427,11 +385,9 @@ const AddBucket = () => {
                   label={"Quota"}
                   disabled={!distributedSetup}
                 />
-              </Grid>
-              {quotaEnabled && distributedSetup && (
-                <React.Fragment>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
+                {quotaEnabled && distributedSetup && (
+                  <Fragment>
+                    <InputBox
                       type="string"
                       id="quota_size"
                       name="quota_size"
@@ -459,12 +415,10 @@ const AddBucket = () => {
                           : ""
                       }
                     />
-                  </Grid>
-                </React.Fragment>
-              )}
-              {versioningEnabled && distributedSetup && lockingAllowed && (
-                <Grid item xs={12}>
-                  <FormSwitchWrapper
+                  </Fragment>
+                )}
+                {versioningEnabled && distributedSetup && lockingAllowed && (
+                  <Switch
                     value="bucket_retention"
                     id="bucket_retention"
                     name="bucket_retention"
@@ -474,13 +428,11 @@ const AddBucket = () => {
                     }}
                     label={"Retention"}
                   />
-                </Grid>
-              )}
-              {retentionEnabled && distributedSetup && (
-                <React.Fragment>
-                  <Grid item xs={12}>
-                    <RadioGroupSelector
-                      currentSelection={retentionMode}
+                )}
+                {retentionEnabled && distributedSetup && (
+                  <Fragment>
+                    <RadioGroup
+                      currentValue={retentionMode}
                       id="retention_mode"
                       name="retention_mode"
                       label="Mode"
@@ -496,9 +448,7 @@ const AddBucket = () => {
                         { value: "governance", label: "Governance" },
                       ]}
                     />
-                  </Grid>
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
+                    <InputBox
                       type="number"
                       id="retention_validity"
                       name="retention_validity"
@@ -523,16 +473,26 @@ const AddBucket = () => {
                         />
                       }
                     />
-                  </Grid>
-                </React.Fragment>
-              )}
-            </Grid>
-            <Grid item xs={12} className={classes.buttonContainer}>
+                  </Fragment>
+                )}
+              </Box>
+            </Box>
+            <Grid
+              item
+              xs={12}
+              sx={{
+                display: "flex",
+                justifyContent: "flex-end",
+                alignItems: "center",
+                gap: 10,
+                marginTop: 15,
+              }}
+            >
               <Button
                 id={"clear"}
                 type="button"
                 variant={"regular"}
-                className={classes.clearButton}
+                className={"clearButton"}
                 onClick={resForm}
                 label={"Clear"}
               />
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucketName.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucketName.tsx
index 5aff4a5aee..c02d932c01 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucketName.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/AddBucketName.tsx
@@ -15,9 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { setIsDirty, setName } from "./addBucketsSlice";
-import InputBoxWrapper from "../../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { InputBox } from "mds";
 import { useSelector } from "react-redux";
+import { setIsDirty, setName } from "./addBucketsSlice";
 import { AppState, useAppDispatch } from "../../../../../store";
 
 const AddBucketName = ({ hasErrors }: { hasErrors: boolean }) => {
@@ -25,7 +25,7 @@ const AddBucketName = ({ hasErrors }: { hasErrors: boolean }) => {
 
   const bucketName = useSelector((state: AppState) => state.addBucket.name);
   return (
-    <InputBoxWrapper
+    <InputBox
       id="bucket-name"
       name="bucket-name"
       error={hasErrors ? "Invalid bucket name" : ""}
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
index b0f3ca40df..f4317425c0 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket/BucketNamingRules.tsx
@@ -15,11 +15,10 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useState } from "react";
-import Grid from "@mui/material/Grid";
+import { Grid, ExpandOptionsButton } from "mds";
 import { LinearProgress } from "@mui/material";
 import { AppState } from "../../../../../store";
 import { useSelector } from "react-redux";
-import { Button, CollapseCaret, ExpandCaret } from "mds";
 import ValidRule from "./ValidRule";
 import InvalidRule from "./InvalidRule";
 import NARule from "./NARule";
@@ -60,25 +59,16 @@ const BucketNamingRules = ({ errorList }: { errorList: boolean[] }) => {
 
   return (
     <Fragment>
-      <Button
-        type="button"
+      <ExpandOptionsButton
         id={"toggle-naming-rules"}
+        open={showNamingRules}
+        label={`${showNamingRules ? "Hide" : "View"} Bucket Naming Rules`}
         onClick={() => {
           toggleNamingRules();
         }}
-        icon={showNamingRules ? <CollapseCaret /> : <ExpandCaret />}
-        label={(showNamingRules ? "Hide" : "View") + " Bucket Naming Rules"}
-        style={{
-          height: "10px",
-          width: "200px",
-          textAlign: "left",
-          paddingLeft: 0,
-          fontSize: "9px",
-          border: "none",
-        }}
       />
       {showNamingRules && (
-        <Grid container fontSize={14} paddingTop={2}>
+        <Grid container sx={{ fontSize: 14, paddingTop: 12 }}>
           <Grid item xs={6}>
             {bucketName.length === 0 ? (
               <NARule ruleText={lengthRuleText} />
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
index ac88969e10..80c11f71a0 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BucketListItem.tsx
@@ -15,158 +15,110 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React, { Fragment } from "react";
 import get from "lodash/get";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import { BucketsIcon, ReportedUsageIcon, TotalObjectsIcon } from "mds";
-import { Box, Grid, Typography } from "@mui/material";
+import styled from "styled-components";
+import { Link, useNavigate } from "react-router-dom";
+import {
+  Box,
+  breakPoints,
+  BucketsIcon,
+  Checkbox,
+  Grid,
+  ReportedUsageIcon,
+  TotalObjectsIcon,
+} from "mds";
 import {
   calculateBytes,
   niceBytes,
   prettyNumber,
 } from "../../../../common/utils";
-import CheckboxWrapper from "../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
-import { Link, useNavigate } from "react-router-dom";
 import {
   IAM_PERMISSIONS,
   IAM_ROLES,
 } from "../../../../common/SecureComponent/permissions";
 import { hasPermission } from "../../../../common/SecureComponent";
-import clsx from "clsx";
-import makeStyles from "@mui/styles/makeStyles";
 import { Bucket } from "../../../../api/consoleApi";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      marginBottom: 30,
-      padding: 20,
-      color: theme.palette.primary.main,
-      border: "#E5E5E5 1px solid",
-      borderRadius: 2,
-      textDecoration: "none",
-      "&:hover": {
-        backgroundColor: "#fafafa",
-      },
-      "& .min-icon": {
-        height: 14,
-        width: 14,
-      },
-      "& .MuiTypography-body2": {
-        fontSize: 14,
-      },
-      "& .MuiCardHeader-content": {
-        wordWrap: "break-word",
-        overflowWrap: "break-word",
-        wordBreak: "break-all",
-        font: "normal normal bold 24px/27px Inter",
-        color: theme.palette.primary.main,
-
-        "& .MuiTypography-root": {
-          fontSize: 19,
-          fontWeight: "bold",
-          "& .min-icon": {
-            position: "relative",
-            top: 4,
-            marginRight: 4,
-            height: "24px !important",
-          },
-        },
-      },
-      "& .MuiCardHeader-root": {
-        background:
-          "transparent linear-gradient(0deg, #EEF1F44E 0%, #FFFFFF 100%) 0% 0% no-repeat padding-box",
+const BucketItemMain = styled.div(({ theme }) => ({
+  border: `${get(theme, "borderColor", "#eaeaea")} 1px solid`,
+  borderRadius: 3,
+  padding: 15,
+  cursor: "pointer",
+  "&.disabled": {
+    backgroundColor: get(theme, "signalColors.danger", "red"),
+  },
+  "&:hover": {
+    backgroundColor: get(theme, "boxBackground", "#FBFAFA"),
+  },
+  "& .bucketTitle": {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: 10,
+    "& h1": {
+      padding: 0,
+      margin: 0,
+      marginBottom: 5,
+      fontSize: 22,
+      color: get(theme, "screenTitle.iconColor", "#07193E"),
+      [`@media (max-width: ${breakPoints.md}px)`]: {
+        marginBottom: 0,
       },
     },
-    checkBoxElement: {
-      width: 32,
-      height: 32,
-      float: "left",
-      overflow: "hidden",
-      "& div": {
-        position: "absolute",
-      },
+  },
+  "& .bucketDetails": {
+    display: "flex",
+    gap: 40,
+    "& span": {
+      fontSize: 14,
     },
-    manageButton: {
-      borderRadius: 4,
-      width: 111,
-      color: theme.palette.grey["700"],
-      textTransform: "unset",
-      fontSize: 12,
-      fontWeight: "normal",
-      "& .MuiButton-endIcon": {
-        "& .min-icon": {
-          fontSize: 18,
-        },
-      },
+    [`@media (max-width: ${breakPoints.md}px)`]: {
+      flexFlow: "column-reverse",
+      gap: 5,
+    },
+  },
+  "& .bucketMetrics": {
+    display: "flex",
+    alignItems: "center",
+    marginTop: 20,
+    gap: 25,
+    borderTop: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
+    paddingTop: 20,
+    "& svg.bucketIcon": {
+      color: get(theme, "screenTitle.iconColor", "#07193E"),
+      fill: get(theme, "screenTitle.iconColor", "#07193E"),
     },
-    metric: {
+    "& .metric": {
       "& .min-icon": {
-        color: "#000000",
+        color: get(theme, "fontColor", "#000"),
         width: 13,
         marginRight: 5,
       },
     },
-    metricLabel: {
+    "& .metricLabel": {
       fontSize: 14,
       fontWeight: "bold",
-      color: "#000000",
+      color: get(theme, "fontColor", "#000"),
     },
-    metricText: {
+    "& .metricText": {
       fontSize: 24,
       fontWeight: "bold",
     },
-    unit: {
+    "& .unit": {
       fontSize: 12,
       fontWeight: "normal",
     },
-    bucketName: {
-      padding: 0,
-      margin: 0,
-      fontSize: 22,
-    },
-    bucketIcon: {
-      "& .min-icon": {
-        height: 48,
-        width: 48,
-        color: theme.palette.primary.main,
-      },
-    },
-    bucketInfo: {
-      display: "flex",
-      "@media (max-width: 900px)": {
-        flexFlow: "column-reverse",
-      },
-    },
-    bucketStats: {
-      marginTop: 15,
-      borderTop: "1px solid rgb(234,234,234, .7)",
-      paddingTop: 14,
+    [`@media (max-width: ${breakPoints.md}px)`]: {
+      marginTop: 8,
+      paddingTop: 8,
     },
-    bucketActionButtons: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-
-      "& button": {
-        marginLeft: 8,
-      },
-
-      "@media (max-width: 900px)": {
-        marginTop: "-33px",
-      },
-    },
-    disabled: {
-      backgroundColor: "red",
-    },
-  }),
-);
+  },
+}));
 
 interface IBucketListItem {
   bucket: Bucket;
   onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
   selected: boolean;
   bulkSelect: boolean;
-  noManage?: boolean;
 }
 
 const BucketListItem = ({
@@ -174,9 +126,7 @@ const BucketListItem = ({
   onSelect,
   selected,
   bulkSelect,
-  noManage = false,
 }: IBucketListItem) => {
-  const classes = useStyles();
   const navigate = useNavigate();
 
   const usage = niceBytes(`${bucket.size}` || "0");
@@ -205,104 +155,81 @@ const BucketListItem = ({
   };
 
   return (
-    <Grid
-      container
-      className={clsx(classes.root, "bucket-item", {
-        [classes.disabled]: manageAllowed,
-      })}
+    <BucketItemMain
       onClick={() => {
         navigate(`/buckets/${bucket.name}/admin`);
       }}
-      sx={{
-        cursor: "pointer",
-      }}
       id={`manageBucket-${bucket.name}`}
+      className={`bucket-item ${manageAllowed ? "disabled" : ""}`}
     >
-      <Grid item xs={12}>
-        <Grid container justifyContent={"space-between"}>
-          <Grid item xs={12} sm={7}>
-            <Grid container>
-              <Grid item xs={12}>
-                {bulkSelect && (
-                  <div
-                    className={classes.checkBoxElement}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                    }}
-                  >
-                    <CheckboxWrapper
-                      checked={selected}
-                      id={`select-${bucket.name}`}
-                      label={""}
-                      name={`select-${bucket.name}`}
-                      onChange={onCheckboxClick}
-                      value={bucket.name}
-                    />
-                  </div>
-                )}
-                <h1 className={classes.bucketName}>
-                  {bucket.name} {manageAllowed}
-                </h1>
-              </Grid>
-              <Grid item xs={12}>
-                <Grid container className={classes.bucketInfo}>
-                  <Grid item xs={12} sm paddingRight={5}>
-                    <Typography variant="body2">
-                      Created:{" "}
-                      {bucket.creation_date
-                        ? new Date(bucket.creation_date).toString()
-                        : "n/a"}
-                    </Typography>
-                  </Grid>
-                  <Grid item xs={12} sm>
-                    <Typography variant="body2">
-                      Access: {accessToStr(bucket)}
-                    </Typography>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={12} sm={5} className={classes.bucketActionButtons}>
-            <Box display={{ xs: "none", sm: "block" }}>
-              <div style={{ marginBottom: 10 }} />
-            </Box>
-          </Grid>
+      <Box className={"bucketTitle"}>
+        {bulkSelect && (
+          <Box
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <Checkbox
+              checked={selected}
+              id={`select-${bucket.name}`}
+              label={""}
+              name={`select-${bucket.name}`}
+              onChange={onCheckboxClick}
+              value={bucket.name}
+            />
+          </Box>
+        )}
+        <h1>
+          {bucket.name} {manageAllowed}
+        </h1>
+      </Box>
+      <Box className={"bucketDetails"}>
+        <span id={`created-${bucket.name}`}>
+          <strong>Created:</strong>{" "}
+          {bucket.creation_date
+            ? new Date(bucket.creation_date).toString()
+            : "n/a"}
+        </span>
+        <span id={`access-${bucket.name}`}>
+          <strong>Access:</strong> {accessToStr(bucket)}
+        </span>
+      </Box>
+      <Box className={"bucketMetrics"}>
+        <Link to={`/buckets/${bucket.name}/admin`}>
+          <BucketsIcon
+            className={"bucketIcon"}
+            style={{
+              height: 48,
+              width: 48,
+            }}
+          />
+        </Link>
+
+        <Grid item className={"metric"}>
+          <ReportedUsageIcon />
+          <span className={"metricLabel"}>Usage</span>
+          <div className={"metricText"}>
+            {usageScalar}
+            <span className={"unit"}>{usageUnit}</span>
+            {quota !== "0" && (
+              <Fragment>
+                {" "}
+                / {quotaForString.total}
+                <span className={"unit"}>{quotaForString.unit}</span>
+              </Fragment>
+            )}
+          </div>
         </Grid>
-      </Grid>
 
-      <Grid item xs={12} className={classes.bucketStats}>
-        <Grid container justifyContent={"flex-start"} spacing={4}>
-          <Grid item className={classes.bucketIcon}>
-            <Link to={`/buckets/${bucket.name}/admin`}>
-              <BucketsIcon />
-            </Link>
-          </Grid>
-          <Grid item textAlign={"left"} className={classes.metric}>
-            <ReportedUsageIcon />
-            <span className={classes.metricLabel}>Usage</span>
-            <div className={classes.metricText}>
-              {usageScalar}
-              <span className={classes.unit}>{usageUnit}</span>
-              {quota !== "0" && (
-                <Fragment>
-                  {" "}
-                  / {quotaForString.total}
-                  <span className={classes.unit}>{quotaForString.unit}</span>
-                </Fragment>
-              )}
-            </div>
-          </Grid>
-          <Grid item textAlign={"left"} className={classes.metric}>
-            <TotalObjectsIcon />
-            <span className={classes.metricLabel}>Objects</span>
-            <div className={classes.metricText}>
-              {bucket.objects ? prettyNumber(bucket.objects) : 0}
-            </div>
-          </Grid>
+        <Grid item className={"metric"}>
+          <TotalObjectsIcon />
+          <span className={"metricLabel"}>Objects</span>
+          <div className={"metricText"}>
+            {bucket.objects ? prettyNumber(bucket.objects) : 0}
+          </div>
         </Grid>
-      </Grid>
-    </Grid>
+      </Box>
+    </BucketItemMain>
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx
index 11889bf32e..41eab89c3a 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkLifecycleModal.tsx
@@ -15,13 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
+import {
+  FormLayout,
+  Grid,
+  InputBox,
+  RadioGroup,
+  ReadBox,
+  Select,
+  Switch,
+  Tooltip,
+} from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { SelectChangeEvent, Tooltip } from "@mui/material";
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import {
@@ -30,13 +37,8 @@ import {
   modalStyleUtils,
   spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import RadioGroupSelector from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import QueryMultiSelector from "../../Common/FormComponents/QueryMultiSelector/QueryMultiSelector";
 import { ITiersDropDown } from "../types";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
@@ -151,7 +153,7 @@ const AddBulkReplicationModal = ({
         if (errString) {
           return (
             <div className={classes.errorIcon}>
-              <Tooltip title={errString} placement="top-start">
+              <Tooltip tooltip={errString} placement="top">
                 <ErrorOutlineIcon />
               </Tooltip>
             </div>
@@ -224,184 +226,145 @@ const AddBulkReplicationModal = ({
             componentRender: (
               <Fragment>
                 <Grid item xs={12}>
-                  <PredefinedList
-                    label="Local Buckets to replicate"
-                    content={buckets.join(", ")}
-                  />
+                  <ReadBox label="Local Buckets to replicate">
+                    {buckets.join(", ")}
+                  </ReadBox>
                 </Grid>
                 <h4>Remote Endpoint Configuration</h4>
-                <Grid container>
-                  <Grid item xs={12} className={classes.formScrollable}>
-                    <Grid item xs={12} className={classes.formFieldRow}>
-                      <fieldset className={classes.fieldGroup}>
-                        <legend className={classes.descriptionText}>
-                          Lifecycle Configuration
-                        </legend>
-
-                        <Grid item xs={12}>
-                          <RadioGroupSelector
-                            currentSelection={ilmType}
-                            id="quota_type"
-                            name="quota_type"
-                            label="ILM Rule"
-                            onChange={(
-                              e: React.ChangeEvent<{ value: unknown }>,
-                            ) => {
-                              setIlmType(
-                                e.target.value as "expiry" | "transition",
-                              );
-                            }}
-                            selectorOptions={[
-                              { value: "expiry", label: "Expiry" },
-                              { value: "transition", label: "Transition" },
-                            ]}
-                          />
-                        </Grid>
-                        {ilmType === "expiry" ? (
-                          <Fragment>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <InputBoxWrapper
-                                type="number"
-                                id="expiry_days"
-                                name="expiry_days"
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  setExpiryDays(e.target.value);
-                                }}
-                                label="Expiry Days"
-                                value={expiryDays}
-                                min="0"
-                              />
-                            </Grid>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <InputBoxWrapper
-                                type="number"
-                                id="noncurrentversion_expiration_days"
-                                name="noncurrentversion_expiration_days"
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  setNCExpirationDays(e.target.value);
-                                }}
-                                label="Non-current Expiration Days"
-                                value={NCExpirationDays}
-                                min="0"
-                              />
-                            </Grid>
-                          </Fragment>
-                        ) : (
-                          <Fragment>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <InputBoxWrapper
-                                type="number"
-                                id="transition_days"
-                                name="transition_days"
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  setTransitionDays(e.target.value);
-                                }}
-                                label="Transition Days"
-                                value={transitionDays}
-                                min="0"
-                              />
-                            </Grid>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <InputBoxWrapper
-                                type="number"
-                                id="noncurrentversion_transition_days"
-                                name="noncurrentversion_transition_days"
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  setNCTransitionDays(e.target.value);
-                                }}
-                                label="Non-current Transition Days"
-                                value={NCTransitionDays}
-                                min="0"
-                              />
-                            </Grid>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <InputBoxWrapper
-                                id="noncurrentversion_t_SC"
-                                name="noncurrentversion_t_SC"
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>,
-                                ) => {
-                                  setNCTransitionSC(e.target.value);
-                                }}
-                                placeholder="Set Non-current Version Transition Storage Class"
-                                label="Non-current Version Transition Storage Class"
-                                value={NCTransitionSC}
-                              />
-                            </Grid>
-                            <Grid item xs={12} className={classes.formFieldRow}>
-                              <SelectWrapper
-                                label="Storage Class"
-                                id="storage_class"
-                                name="storage_class"
-                                value={storageClass}
-                                onChange={(e: SelectChangeEvent<string>) => {
-                                  setStorageClass(e.target.value as string);
-                                }}
-                                options={tiersList}
-                              />
-                            </Grid>
-                          </Fragment>
-                        )}
-                      </fieldset>
-                    </Grid>
-                    <Grid item xs={12} className={classes.formFieldRow}>
-                      <fieldset className={classes.fieldGroup}>
-                        <legend className={classes.descriptionText}>
-                          File Configuration
-                        </legend>
-
-                        <Grid item xs={12}>
-                          <InputBoxWrapper
-                            id="prefix"
-                            name="prefix"
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>,
-                            ) => {
-                              setPrefix(e.target.value);
-                            }}
-                            label="Prefix"
-                            value={prefix}
-                          />
-                        </Grid>
-                        <Grid item xs={12}>
-                          <QueryMultiSelector
-                            name="tags"
-                            label="Tags"
-                            elements={tags}
-                            onChange={(vl: string) => {
-                              setTags(vl);
-                            }}
-                            keyPlaceholder="Tag Key"
-                            valuePlaceholder="Tag Value"
-                            withBorder
-                          />
-                        </Grid>
-                        <Grid item xs={12}>
-                          <FormSwitchWrapper
-                            value="expired_delete_marker"
-                            id="expired_delete_marker"
-                            name="expired_delete_marker"
-                            checked={expiredObjectDM}
-                            onChange={(
-                              event: React.ChangeEvent<HTMLInputElement>,
-                            ) => {
-                              setExpiredObjectDM(event.target.checked);
-                            }}
-                            label={"Expired Object Delete Marker"}
-                          />
-                        </Grid>
-                      </fieldset>
-                    </Grid>
-                  </Grid>
-                </Grid>
+                <FormLayout withBorders={false} containerPadding={false}>
+                  <fieldset className={"inputItem"}>
+                    <legend>Lifecycle Configuration</legend>
+                    <RadioGroup
+                      currentValue={ilmType}
+                      id="quota_type"
+                      name="quota_type"
+                      label="ILM Rule"
+                      onChange={(e: React.ChangeEvent<{ value: unknown }>) => {
+                        setIlmType(e.target.value as "expiry" | "transition");
+                      }}
+                      selectorOptions={[
+                        { value: "expiry", label: "Expiry" },
+                        { value: "transition", label: "Transition" },
+                      ]}
+                    />
+                    {ilmType === "expiry" ? (
+                      <Fragment>
+                        <InputBox
+                          type="number"
+                          id="expiry_days"
+                          name="expiry_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            setExpiryDays(e.target.value);
+                          }}
+                          label="Expiry Days"
+                          value={expiryDays}
+                          min="0"
+                        />
+                        <InputBox
+                          type="number"
+                          id="noncurrentversion_expiration_days"
+                          name="noncurrentversion_expiration_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            setNCExpirationDays(e.target.value);
+                          }}
+                          label="Non-current Expiration Days"
+                          value={NCExpirationDays}
+                          min="0"
+                        />
+                      </Fragment>
+                    ) : (
+                      <Fragment>
+                        <InputBox
+                          type="number"
+                          id="transition_days"
+                          name="transition_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            setTransitionDays(e.target.value);
+                          }}
+                          label="Transition Days"
+                          value={transitionDays}
+                          min="0"
+                        />
+                        <InputBox
+                          type="number"
+                          id="noncurrentversion_transition_days"
+                          name="noncurrentversion_transition_days"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            setNCTransitionDays(e.target.value);
+                          }}
+                          label="Non-current Transition Days"
+                          value={NCTransitionDays}
+                          min="0"
+                        />
+                        <InputBox
+                          id="noncurrentversion_t_SC"
+                          name="noncurrentversion_t_SC"
+                          onChange={(
+                            e: React.ChangeEvent<HTMLInputElement>,
+                          ) => {
+                            setNCTransitionSC(e.target.value);
+                          }}
+                          placeholder="Set Non-current Version Transition Storage Class"
+                          label="Non-current Version Transition Storage Class"
+                          value={NCTransitionSC}
+                        />
+                        <Select
+                          label="Storage Class"
+                          id="storage_class"
+                          name="storage_class"
+                          value={storageClass}
+                          onChange={(value) => {
+                            setStorageClass(value);
+                          }}
+                          options={tiersList}
+                        />
+                      </Fragment>
+                    )}
+                  </fieldset>
+                  <fieldset className={"inputItem"}>
+                    <legend>File Configuration</legend>
+                    <InputBox
+                      id="prefix"
+                      name="prefix"
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setPrefix(e.target.value);
+                      }}
+                      label="Prefix"
+                      value={prefix}
+                    />
+                    <QueryMultiSelector
+                      name="tags"
+                      label="Tags"
+                      elements={tags}
+                      onChange={(vl: string) => {
+                        setTags(vl);
+                      }}
+                      keyPlaceholder="Tag Key"
+                      valuePlaceholder="Tag Value"
+                      withBorder
+                    />
+                    <Switch
+                      value="expired_delete_marker"
+                      id="expired_delete_marker"
+                      name="expired_delete_marker"
+                      checked={expiredObjectDM}
+                      onChange={(
+                        event: React.ChangeEvent<HTMLInputElement>,
+                      ) => {
+                        setExpiredObjectDM(event.target.checked);
+                      }}
+                      label={"Expired Object Delete Marker"}
+                    />
+                  </fieldset>
+                </FormLayout>
               </Fragment>
             ),
             buttons: [
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
index eae352b9c7..f1e23b8e5d 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
@@ -15,27 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
+import { Select, InputBox, Switch, FormLayout, Tooltip, Grid } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { SelectChangeEvent, Tooltip } from "@mui/material";
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 import {
   modalBasic,
   wizardCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
-
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import SelectWrapper from "../../Common/FormComponents/SelectWrapper/SelectWrapper";
-import { SelectorTypes } from "../../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
@@ -43,6 +36,7 @@ import { useAppDispatch } from "../../../../store";
 import { api } from "api";
 import { MultiBucketResponseItem } from "api/consoleApi";
 import { errorToHandler } from "api/errors";
+import { SelectorTypes } from "../../../../common/types";
 
 interface IBulkReplicationModal {
   open: boolean;
@@ -242,7 +236,7 @@ const AddBulkReplicationModal = ({
         if (errString) {
           return (
             <div className={classes.errorIcon}>
-              <Tooltip title={errString} placement="top-start">
+              <Tooltip tooltip={errString} placement="top">
                 <ErrorOutlineIcon />
               </Tooltip>
             </div>
@@ -262,13 +256,13 @@ const AddBulkReplicationModal = ({
     if (remoteBucketsOpts.length > 0) {
       return (
         <Fragment>
-          <SelectWrapper
+          <Select
             label=""
             id={`assign-bucket-${indexItem}`}
             name={`assign-bucket-${indexItem}`}
             value={relationBuckets[indexItem]}
-            onChange={(e: SelectChangeEvent<string>) => {
-              updateItem(indexItem, e.target.value as string);
+            onChange={(value) => {
+              updateItem(indexItem, value);
             }}
             options={optionsForBucketsDrop}
             disabled={addLoading}
@@ -278,7 +272,7 @@ const AddBulkReplicationModal = ({
     }
     return (
       <Fragment>
-        <InputBoxWrapper
+        <InputBox
           id={`assign-bucket-${indexItem}`}
           name={`assign-bucket-${indexItem}`}
           label=""
@@ -342,8 +336,8 @@ const AddBulkReplicationModal = ({
                 </span>
                 <br />
                 <br />
-                <Grid item xs={12}>
-                  <InputBoxWrapper
+                <FormLayout containerPadding={false} withBorders={false}>
+                  <InputBox
                     id="accessKey"
                     name="accessKey"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -352,9 +346,7 @@ const AddBulkReplicationModal = ({
                     label="Access Key"
                     value={accessKey}
                   />
-                </Grid>
-                <Grid item xs={12}>
-                  <InputBoxWrapper
+                  <InputBox
                     id="secretKey"
                     name="secretKey"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -363,9 +355,7 @@ const AddBulkReplicationModal = ({
                     label="Secret Key"
                     value={secretKey}
                   />
-                </Grid>
-                <Grid item xs={12}>
-                  <InputBoxWrapper
+                  <InputBox
                     id="targetURL"
                     name="targetURL"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -375,9 +365,7 @@ const AddBulkReplicationModal = ({
                     label="Target URL"
                     value={targetURL}
                   />
-                </Grid>
-                <Grid item xs={12}>
-                  <FormSwitchWrapper
+                  <Switch
                     checked={useTLS}
                     id="useTLS"
                     name="useTLS"
@@ -387,9 +375,7 @@ const AddBulkReplicationModal = ({
                     }}
                     value="yes"
                   />
-                </Grid>
-                <Grid item xs={12}>
-                  <InputBoxWrapper
+                  <InputBox
                     id="region"
                     name="region"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -398,13 +384,11 @@ const AddBulkReplicationModal = ({
                     label="Region"
                     value={region}
                   />
-                </Grid>
-                <Grid item xs={12}>
-                  <SelectWrapper
+                  <Select
                     id="replication_mode"
                     name="replication_mode"
-                    onChange={(e: SelectChangeEvent<string>) => {
-                      setReplicationMode(e.target.value as "sync" | "async");
+                    onChange={(value) => {
+                      setReplicationMode(value as "sync" | "async");
                     }}
                     label="Replication Mode"
                     value={replicationMode}
@@ -413,10 +397,8 @@ const AddBulkReplicationModal = ({
                       { label: "Synchronous", value: "sync" },
                     ]}
                   />
-                </Grid>
-                {replicationMode === "async" && (
-                  <Grid item xs={12}>
-                    <InputBoxWrapper
+                  {replicationMode === "async" && (
+                    <InputBox
                       type="number"
                       id="bandwidth_scalar"
                       name="bandwidth_scalar"
@@ -441,10 +423,8 @@ const AddBulkReplicationModal = ({
                         />
                       }
                     />
-                  </Grid>
-                )}
-                <Grid item xs={12}>
-                  <InputBoxWrapper
+                  )}
+                  <InputBox
                     id="healthCheck"
                     name="healthCheck"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -453,7 +433,7 @@ const AddBulkReplicationModal = ({
                     label="Health Check Duration"
                     value={healthCheck}
                   />
-                </Grid>
+                </FormLayout>
               </Fragment>
             ),
             buttons: [
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
index b6a307efee..8680d63550 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/DeleteBucket.tsx
@@ -14,16 +14,13 @@
 // 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 from "react";
-
-import { DialogContentText } from "@mui/material";
-
-import { ErrorResponseHandler } from "../../../../common/types";
-import useApi from "../../Common/Hooks/useApi";
-import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import React, { Fragment } from "react";
 import { ConfirmDeleteIcon } from "mds";
+import { ErrorResponseHandler } from "../../../../common/types";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
+import useApi from "../../Common/Hooks/useApi";
+import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
 
 interface IDeleteBucketProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -64,10 +61,10 @@ const DeleteBucket = ({
       onConfirm={onConfirmDelete}
       onClose={onClose}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete bucket <b>{selectedBucket}</b>? <br />
           A bucket can only be deleted if it's empty.
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 2f1ee606bf..f8a988dcb7 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -15,9 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
 import { useNavigate } from "react-router-dom";
-import { Theme } from "@mui/material/styles";
 import {
   AddIcon,
   BucketsIcon,
@@ -29,17 +27,11 @@ import {
   RefreshIcon,
   SelectAllIcon,
   SelectMultipleIcon,
+  Grid,
+  breakPoints,
 } from "mds";
 import { LinearProgress } from "@mui/material";
-import Grid from "@mui/material/Grid";
-import {
-  actionsTray,
-  containerForHeader,
-  searchField,
-} from "../../Common/FormComponents/common/styleLibrary";
-
-import BucketListItem from "./BucketListItem";
-import BulkReplicationModal from "./BulkReplicationModal";
+import { actionsTray } from "../../Common/FormComponents/common/styleLibrary";
 import { SecureComponent } from "../../../../common/SecureComponent";
 import {
   CONSOLE_UI_RESOURCE,
@@ -49,20 +41,12 @@ import {
   IAM_SCOPES,
   permissionTooltipHelper,
 } from "../../../../common/SecureComponent/permissions";
-import SearchBox from "../../Common/SearchBox";
-import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
-import BulkLifecycleModal from "./BulkLifecycleModal";
-import hasPermission from "../../../../common/SecureComponent/accessControl";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
 import { useSelector } from "react-redux";
 import { selFeatures } from "../../consoleSlice";
-import AutoColorIcon from "../../Common/Components/AutoColorIcon";
-import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
-import AButton from "../../Common/AButton/AButton";
 import { setLoadingObjects } from "../../ObjectBrowser/objectBrowserSlice";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
-import makeStyles from "@mui/styles/makeStyles";
 import { api } from "../../../../api";
 import {
   Bucket,
@@ -72,30 +56,19 @@ import {
 } from "../../../../api/consoleApi";
 import { errorToHandler } from "../../../../api/errors";
 import HelpMenu from "../../HelpMenu";
-
-const useStyles = makeStyles((theme: Theme) => ({
-  bucketList: {
-    marginTop: 25,
-    height: "calc(100vh - 211px)",
-    "&.isEmbedded": {
-      height: "calc(100vh - 128px)",
-    },
-  },
-  searchField: {
-    ...searchField.searchField,
-    minWidth: 380,
-    "@media (max-width: 900px)": {
-      minWidth: 220,
-    },
-  },
-  ...containerForHeader,
-  ...actionsTray,
-}));
+import AutoColorIcon from "../../Common/Components/AutoColorIcon";
+import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
+import AButton from "../../Common/AButton/AButton";
+import SearchBox from "../../Common/SearchBox";
+import VirtualizedList from "../../Common/VirtualizedList/VirtualizedList";
+import BulkLifecycleModal from "./BulkLifecycleModal";
+import hasPermission from "../../../../common/SecureComponent/accessControl";
+import BucketListItem from "./BucketListItem";
+import BulkReplicationModal from "./BulkReplicationModal";
 
 const ListBuckets = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const classes = useStyles();
 
   const [records, setRecords] = useState<Bucket[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
@@ -199,7 +172,6 @@ const ListBuckets = () => {
           onSelect={selectListBuckets}
           selected={selectedBuckets.includes(bucket.name)}
           bulkSelect={bulkSelect}
-          noManage={obOnly}
         />
       );
     }
@@ -246,7 +218,7 @@ const ListBuckets = () => {
       )}
 
       <PageLayout>
-        <Grid item xs={12} className={classes.actionsTray} display="flex">
+        <Grid item xs={12} sx={actionsTray.actionsTray}>
           {obOnly && (
             <Grid item xs>
               <AutoColorIcon marginRight={15} marginTop={10} />
@@ -256,21 +228,24 @@ const ListBuckets = () => {
             <SearchBox
               onChange={setFilterBuckets}
               placeholder="Search Buckets"
-              overrideClass={classes.searchField}
               value={filterBuckets}
+              sx={{
+                minWidth: 380,
+                [`@media (max-width: ${breakPoints.md}px)`]: {
+                  minWidth: 220,
+                },
+              }}
             />
           )}
 
           <Grid
             item
             xs={12}
-            display={"flex"}
-            alignItems={"center"}
-            justifyContent={"flex-end"}
             sx={{
-              "& button": {
-                marginLeft: "8px",
-              },
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 5,
             }}
           >
             {!obOnly && (
@@ -408,7 +383,14 @@ const ListBuckets = () => {
           <Grid
             item
             xs={12}
-            className={`${classes.bucketList} ${obOnly ? "isEmbedded" : ""}`}
+            sx={{
+              marginTop: 25,
+              height: "calc(100vh - 211px)",
+              "&.isEmbedded": {
+                height: "calc(100vh - 128px)",
+              },
+            }}
+            className={obOnly ? "isEmbedded" : ""}
           >
             {filteredRecords.length !== 0 && (
               <VirtualizedList
@@ -417,12 +399,7 @@ const ListBuckets = () => {
               />
             )}
             {filteredRecords.length === 0 && filterBuckets !== "" && (
-              <Grid
-                container
-                justifyContent={"center"}
-                alignContent={"center"}
-                alignItems={"center"}
-              >
+              <Grid container>
                 <Grid item xs={8}>
                   <HelpBox
                     iconComponent={<BucketsIcon />}
@@ -437,12 +414,7 @@ const ListBuckets = () => {
               </Grid>
             )}
             {!hasBuckets && (
-              <Grid
-                container
-                justifyContent={"center"}
-                alignContent={"center"}
-                alignItems={"center"}
-              >
+              <Grid container>
                 <Grid item xs={8}>
                   <HelpBox
                     iconComponent={<BucketsIcon />}
diff --git a/portal-ui/src/screens/Console/Buckets/VersioningInfo.tsx b/portal-ui/src/screens/Console/Buckets/VersioningInfo.tsx
index 1a5c528abd..57faff45b9 100644
--- a/portal-ui/src/screens/Console/Buckets/VersioningInfo.tsx
+++ b/portal-ui/src/screens/Console/Buckets/VersioningInfo.tsx
@@ -1,8 +1,23 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 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 <http://www.gnu.org/licenses/>.
+
 import React from "react";
-import { Box } from "@mui/material";
-import LabelWithIcon from "./BucketDetails/SummaryItems/LabelWithIcon";
-import { DisabledIcon, EnabledIcon } from "mds";
+import { DisabledIcon, EnabledIcon, Box } from "mds";
 import { BucketVersioningResponse } from "api/consoleApi";
+import LabelWithIcon from "./BucketDetails/SummaryItems/LabelWithIcon";
 
 const VersioningInfo = ({
   versioningState = {},
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
index 519f2a2b01..70019ca988 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/QueryMultiSelector/QueryMultiSelector.tsx
@@ -16,6 +16,7 @@
 import React, {
   ChangeEvent,
   createRef,
+  Fragment,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -23,15 +24,15 @@ import React, {
 } from "react";
 import get from "lodash/get";
 import debounce from "lodash/debounce";
-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 HelpIcon from "@mui/icons-material/Help";
-import { InputLabel, Tooltip } from "@mui/material";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-import InputBoxWrapper from "../InputBoxWrapper/InputBoxWrapper";
-import { AddIcon } from "mds";
+import {
+  AddIcon,
+  Box,
+  Grid,
+  HelpIcon,
+  InputBox,
+  InputLabel,
+  Tooltip,
+} from "mds";
 
 interface IQueryMultiSelector {
   elements: string;
@@ -40,34 +41,10 @@ interface IQueryMultiSelector {
   tooltip?: string;
   keyPlaceholder?: string;
   valuePlaceholder?: string;
-  classes: any;
   withBorder?: boolean;
   onChange: (elements: string) => void;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    inputWithBorder: {
-      border: "1px solid #EAEAEA",
-      padding: 15,
-      height: 150,
-      overflowY: "auto",
-      position: "relative",
-      marginTop: 15,
-    },
-    lineInputBoxes: {
-      display: "flex",
-      marginBottom: 10,
-    },
-    queryDiv: {
-      alignSelf: "center",
-      margin: "0 4px",
-      fontWeight: 600,
-    },
-  });
-
 const QueryMultiSelector = ({
   elements,
   name,
@@ -77,7 +54,6 @@ const QueryMultiSelector = ({
   valuePlaceholder = "",
   onChange,
   withBorder = false,
-  classes,
 }: IQueryMultiSelector) => {
   const [currentKeys, setCurrentKeys] = useState<string[]>([""]);
   const [currentValues, setCurrentValues] = useState<string[]>([""]);
@@ -195,10 +171,10 @@ const QueryMultiSelector = ({
       <Grid
         item
         xs={12}
-        className={classes.lineInputBoxes}
+        className={"lineInputBoxes inputItem"}
         key={`query-pair-${name}-${index.toString()}`}
       >
-        <InputBoxWrapper
+        <InputBox
           id={`${name}-key-${index.toString()}`}
           label={""}
           name={`${name}-${index.toString()}`}
@@ -207,8 +183,8 @@ const QueryMultiSelector = ({
           index={index}
           placeholder={keyPlaceholder}
         />
-        <span className={classes.queryDiv}>:</span>
-        <InputBoxWrapper
+        <span className={"queryDiv"}>:</span>
+        <InputBox
           id={`${name}-value-${index.toString()}`}
           label={""}
           name={`${name}-${index.toString()}`}
@@ -226,28 +202,55 @@ const QueryMultiSelector = ({
   });
 
   return (
-    <React.Fragment>
-      <Grid item xs={12} className={classes.fieldContainer}>
-        <InputLabel className={classes.inputLabel}>
-          <span>{label}</span>
+    <Fragment>
+      <Grid
+        item
+        xs={12}
+        sx={{
+          "& .lineInputBoxes": {
+            display: "flex",
+          },
+          "& .queryDiv": {
+            alignSelf: "center",
+            margin: "-15px 4px 0",
+            fontWeight: 600,
+          },
+        }}
+      >
+        <InputLabel>
+          {label}
           {tooltip !== "" && (
-            <div className={classes.tooltipContainer}>
-              <Tooltip title={tooltip} placement="top-start">
-                <HelpIcon className={classes.tooltip} />
+            <Box
+              sx={{
+                marginLeft: 5,
+                display: "flex",
+                alignItems: "center",
+                "& .min-icon": {
+                  width: 13,
+                },
+              }}
+            >
+              <Tooltip tooltip={tooltip} placement="top">
+                <HelpIcon style={{ width: 13, height: 13 }} />
               </Tooltip>
-            </div>
+            </Box>
           )}
         </InputLabel>
-        <Grid
-          item
-          xs={12}
-          className={`${withBorder ? classes.inputWithBorder : ""}`}
+        <Box
+          withBorders={withBorder}
+          sx={{
+            padding: 15,
+            height: 150,
+            overflowY: "auto",
+            position: "relative",
+            marginTop: 15,
+          }}
         >
           {inputs}
           <div ref={bottomList} />
-        </Grid>
+        </Box>
       </Grid>
-    </React.Fragment>
+    </Fragment>
   );
 };
-export default withStyles(styles)(QueryMultiSelector);
+export default QueryMultiSelector;
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
deleted file mode 100644
index 9f78a50a0e..0000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/RadioGroupSelector/RadioGroupSelector.tsx
+++ /dev/null
@@ -1,164 +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 <http://www.gnu.org/licenses/>.
-import React from "react";
-import clsx from "clsx";
-import Grid from "@mui/material/Grid";
-import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Radio, { RadioProps } from "@mui/material/Radio";
-import { InputLabel, Tooltip } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import makeStyles from "@mui/styles/makeStyles";
-import { fieldBasic, radioIcons, tooltipHelper } from "../common/styleLibrary";
-import { HelpIcon } from "mds";
-import { ObjectRetentionMode, ObjectRetentionUnit } from "api/consoleApi";
-
-export interface SelectorTypes {
-  label: any;
-  value: string;
-}
-
-interface RadioGroupProps {
-  selectorOptions: SelectorTypes[];
-  currentSelection:
-    | ObjectRetentionMode
-    | ObjectRetentionUnit
-    | undefined
-    | "expiry"
-    | "transition";
-  label: any;
-  id: string;
-  name: string;
-  tooltip?: string;
-  disableOptions?: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  classes: any;
-  displayInColumn?: boolean;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    optionLabel: {
-      "&.Mui-disabled": {
-        "& .MuiFormControlLabel-label": {
-          color: "#9c9c9c",
-        },
-      },
-      "&:last-child": {
-        marginRight: 0,
-      },
-      "& .MuiFormControlLabel-label": {
-        fontSize: 12,
-        color: "#07193E",
-      },
-    },
-    checkedOption: {
-      "& .MuiFormControlLabel-label": {
-        fontSize: 12,
-        color: "#07193E",
-        fontWeight: 700,
-      },
-    },
-  });
-
-const radioStyles = makeStyles({
-  root: {
-    "&:hover": {
-      backgroundColor: "transparent",
-    },
-  },
-  ...radioIcons,
-});
-
-const RadioButton = (props: RadioProps) => {
-  const classes = radioStyles();
-
-  return (
-    <Radio
-      className={classes.root}
-      disableRipple
-      color="default"
-      checkedIcon={<span className={classes.radioSelectedIcon} />}
-      icon={<span className={classes.radioUnselectedIcon} />}
-      {...props}
-    />
-  );
-};
-
-export const RadioGroupSelector = ({
-  selectorOptions = [],
-  currentSelection,
-  label,
-  id,
-  name,
-  onChange,
-  tooltip = "",
-  disableOptions = false,
-  classes,
-  displayInColumn = false,
-}: RadioGroupProps) => {
-  return (
-    <Grid container spacing={1}>
-      <Grid item fontSize={60}>
-        <InputLabel htmlFor={id} className={classes.inputLabel}>
-          <span>{label}</span>
-          {tooltip !== "" && (
-            <div className={classes.tooltipContainer}>
-              <Tooltip title={tooltip} placement="top-start">
-                <div>
-                  <HelpIcon />
-                </div>
-              </Tooltip>
-            </div>
-          )}
-        </InputLabel>
-      </Grid>
-      <Grid item>
-        <RadioGroup
-          aria-label={id}
-          id={id}
-          name={name}
-          value={currentSelection}
-          onChange={onChange}
-          row={!displayInColumn}
-          style={{ display: "flex", textAlign: "right" }}
-        >
-          {selectorOptions.map((selectorOption) => {
-            return (
-              <FormControlLabel
-                key={`rd-${name}-${selectorOption.value}`}
-                value={selectorOption.value}
-                control={<RadioButton />}
-                label={selectorOption.label}
-                disabled={disableOptions}
-                className={clsx(classes.optionLabel, {
-                  [classes.checkedOption]:
-                    selectorOption.value === currentSelection,
-                })}
-              />
-            );
-          })}
-        </RadioGroup>
-      </Grid>
-    </Grid>
-  );
-};
-
-export default withStyles(styles)(RadioGroupSelector);
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 12f9b2f15b..798af2808b 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -16,6 +16,8 @@
 
 // This object contains variables that will be used across form components.
 
+import { breakPoints } from "mds";
+
 const inputLabelBase = {
   fontWeight: 600,
   marginRight: 10,
@@ -957,6 +959,17 @@ export const objectBrowserExtras = {
   },
 };
 
+export const twoColCssGridLayoutConfig = {
+  display: "grid",
+  gridTemplateColumns: "2fr 1fr",
+  gridAutoFlow: "row",
+  gap: 10,
+  [`@media (max-width: ${breakPoints.sm}px)`]: {
+    gridTemplateColumns: "1fr",
+    gridAutoFlow: "dense",
+  },
+};
+
 // These classes are meant to be used as React.CSSProperties for TableWrapper
 export const TableRowPredefStyles: any = {
   deleted: {
diff --git a/portal-ui/src/screens/Console/Configurations/types.ts b/portal-ui/src/screens/Console/Configurations/types.ts
index 7f5ea6da3c..d884c73355 100644
--- a/portal-ui/src/screens/Console/Configurations/types.ts
+++ b/portal-ui/src/screens/Console/Configurations/types.ts
@@ -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 { SelectorTypes } from "../Common/FormComponents/RadioGroupSelector/RadioGroupSelector";
+import { SelectorTypes } from "../../../common/types";
 
 export type KVFieldType =
   | "string"
diff --git a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ResetConfigurationModal.tsx b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ResetConfigurationModal.tsx
index 1b83aa8d3e..3f5e621124 100644
--- a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ResetConfigurationModal.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ResetConfigurationModal.tsx
@@ -14,41 +14,22 @@
 // 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, { useEffect, useState } from "react";
-
-import { DialogContentText, LinearProgress } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { deleteDialogStyles } from "../../Common/FormComponents/common/styleLibrary";
-
+import React, { Fragment, useEffect, useState } from "react";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
 import ConfirmDialog from "../../Common/ModalWrapper/ConfirmDialog";
+import { LinearProgress } from "@mui/material";
 import { ConfirmDeleteIcon } from "mds";
 import { setErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    wrapText: {
-      maxWidth: "200px",
-      whiteSpace: "normal",
-      wordWrap: "break-word",
-    },
-    ...deleteDialogStyles,
-  });
 
 interface IResetConfiguration {
-  classes: any;
   configurationName: string;
   closeResetModalAndRefresh: (reloadConfiguration: boolean) => void;
-
   resetOpen: boolean;
 }
 
 const ResetConfigurationModal = ({
-  classes,
   configurationName,
   closeResetModalAndRefresh,
   resetOpen,
@@ -87,20 +68,26 @@ const ResetConfigurationModal = ({
         closeResetModalAndRefresh(false);
       }}
       confirmationContent={
-        <React.Fragment>
+        <Fragment>
           {resetLoading && <LinearProgress />}
-          <DialogContentText>
+          <Fragment>
             Are you sure you want to restore these configurations to default
             values?
             <br />
-            <b className={classes.wrapText}>
+            <b
+              style={{
+                maxWidth: "200px",
+                whiteSpace: "normal",
+                wordWrap: "break-word",
+              }}
+            >
               Please note that this may cause your system to not be accessible
             </b>
-          </DialogContentText>
-        </React.Fragment>
+          </Fragment>
+        </Fragment>
       }
     />
   );
 };
 
-export default withStyles(styles)(ResetConfigurationModal);
+export default ResetConfigurationModal;
diff --git a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
index bb61b08a28..9334fa1044 100644
--- a/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
+++ b/portal-ui/src/screens/Console/Groups/GroupsDetails.tsx
@@ -244,7 +244,7 @@ const GroupsDetails = () => {
                   onClick: (userName) => {
                     navigate(`${IAM_PAGES.USERS}/${encodeURLString(userName)}`);
                   },
-                  disableButtonFunction: () => !viewUser,
+                  isDisabled: !viewUser,
                 },
               ]}
               columns={[{ label: "Access Key" }]}
@@ -314,7 +314,7 @@ const GroupsDetails = () => {
                 onClick: (policy) => {
                   navigate(`${IAM_PAGES.POLICIES}/${encodeURLString(policy)}`);
                 },
-                disableButtonFunction: () => !canViewPolicy,
+                isDisabled: !canViewPolicy,
               },
             ]}
             columns={[{ label: "Policy" }]}
diff --git a/portal-ui/src/screens/Console/KMS/KMSHelpbox.tsx b/portal-ui/src/screens/Console/KMS/KMSHelpbox.tsx
index c0acff4c13..6f3d6f9915 100644
--- a/portal-ui/src/screens/Console/KMS/KMSHelpbox.tsx
+++ b/portal-ui/src/screens/Console/KMS/KMSHelpbox.tsx
@@ -1,7 +1,21 @@
-import React from "react";
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 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 <http://www.gnu.org/licenses/>.
 
-import { Box } from "@mui/material";
-import { HelpIconFilled } from "mds";
+import React, { Fragment } from "react";
+import { HelpBox, HelpIconFilled, Box } from "mds";
 
 interface IKMSHelpBoxProps {
   helpText: string;
@@ -10,41 +24,17 @@ interface IKMSHelpBoxProps {
 
 const KMSHelpBox = ({ helpText, contents }: IKMSHelpBoxProps) => {
   return (
-    <Box
-      sx={{
-        flex: 1,
-        border: "1px solid #eaeaea",
-        borderRadius: "2px",
-        display: "flex",
-        flexFlow: "column",
-        padding: "20px",
-      }}
-    >
-      <Box
-        sx={{
-          fontSize: "16px",
-          fontWeight: 600,
-          display: "flex",
-          alignItems: "center",
-          marginBottom: "16px",
-          paddingBottom: "20px",
-
-          "& .min-icon": {
-            height: "21px",
-            width: "21px",
-            marginRight: "15px",
-          },
-        }}
-      >
-        <HelpIconFilled />
-        <div>{helpText}</div>
-      </Box>
-      <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
-        {contents.map((content) => (
-          <Box sx={{ paddingBottom: "20px" }}>{content}</Box>
-        ))}
-      </Box>
-    </Box>
+    <HelpBox
+      iconComponent={<HelpIconFilled />}
+      title={helpText}
+      help={
+        <Fragment>
+          {contents.map((content) => (
+            <Box sx={{ paddingBottom: "20px" }}>{content}</Box>
+          ))}
+        </Fragment>
+      }
+    />
   );
 };
 
diff --git a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
index c115afc03a..fa0bd0fa6e 100644
--- a/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
+++ b/portal-ui/src/screens/Console/Policies/ListPolicies.tsx
@@ -185,7 +185,7 @@ const ListPolicies = () => {
       <PageHeaderWrapper label="IAM Policies" actions={<HelpMenu />} />
 
       <PageLayout>
-        <Grid container sx={{ gap: 15 }}>
+        <Grid container>
           <Grid item xs={12} sx={actionsTray.actionsTray}>
             <SearchBox
               onChange={setFilterPolicies}
diff --git a/portal-ui/src/utils/stylesUtils.ts b/portal-ui/src/utils/stylesUtils.ts
index ced7e6e796..36ea069603 100644
--- a/portal-ui/src/utils/stylesUtils.ts
+++ b/portal-ui/src/utils/stylesUtils.ts
@@ -41,6 +41,7 @@ export const generateOverrideTheme = (overrideVars: IEmbeddedCustomStyles) => {
       logoLabelInverse: "#FFF",
       loaderColor: overrideVars.loaderColor,
       boxBackground: overrideVars.boxBackground,
+      mutedText: "#9c9c9c",
       buttons: {
         regular: {
           enabled: {
diff --git a/portal-ui/tests/permissions-2/bucketWrite.ts b/portal-ui/tests/permissions-2/bucketWrite.ts
index 338a246d4a..93a931619e 100644
--- a/portal-ui/tests/permissions-2/bucketWrite.ts
+++ b/portal-ui/tests/permissions-2/bucketWrite.ts
@@ -39,11 +39,8 @@ test
       .useRole(roles.bucketWrite)
       .navigateTo("http://localhost:9090/buckets")
       .expect(
-        Selector("h1")
-          .withText(`${constants.TEST_BUCKET_NAME}-bucketwritew`)
-          .parent(1)
-          .find("p")
-          .nth(-1).innerText,
+        Selector(`#access-${constants.TEST_BUCKET_NAME}-bucketwritew`)
+          .innerText,
       )
       .eql("Access: W");
   })
diff --git a/portal-ui/tests/permissions-3/bucketRead.ts b/portal-ui/tests/permissions-3/bucketRead.ts
index 7667ce6f96..7ca911217f 100644
--- a/portal-ui/tests/permissions-3/bucketRead.ts
+++ b/portal-ui/tests/permissions-3/bucketRead.ts
@@ -60,11 +60,7 @@ test
       .useRole(roles.bucketRead)
       .navigateTo("http://localhost:9090/buckets")
       .expect(
-        Selector("h1")
-          .withText(`${constants.TEST_BUCKET_NAME}-bucketread2`)
-          .parent(1)
-          .find("p")
-          .nth(-1).innerText,
+        Selector(`#access-${constants.TEST_BUCKET_NAME}-bucketread2`).innerText,
       )
       .eql("Access: R");
   })
diff --git a/portal-ui/tests/permissions-3/bucketSpecific.ts b/portal-ui/tests/permissions-3/bucketSpecific.ts
index 300260283c..b95839c25c 100644
--- a/portal-ui/tests/permissions-3/bucketSpecific.ts
+++ b/portal-ui/tests/permissions-3/bucketSpecific.ts
@@ -17,13 +17,12 @@
 import * as roles from "../utils/roles";
 import * as elements from "../utils/elements";
 import * as functions from "../utils/functions";
-import { bucketsElement, logoutItem } from "../utils/elements-menu";
 import {
-  namedTestBucketBrowseButtonFor,
   namedManageButtonFor,
+  namedTestBucketBrowseButtonFor,
 } from "../utils/functions";
+import { bucketsElement, logoutItem } from "../utils/elements-menu";
 import { Selector } from "testcafe";
-import * as constants from "../utils/constants";
 
 const TEST_BUCKET_NAME_SPECIFIC = "specific-bucket";
 
@@ -137,13 +136,7 @@ test
     await t
       .useRole(roles.bucketRead)
       .navigateTo("http://localhost:9090/buckets")
-      .expect(
-        Selector("h1")
-          .withText(`${TEST_BUCKET_NAME_SPECIFIC}-5`)
-          .parent(1)
-          .find("p")
-          .nth(-1).innerText,
-      )
+      .expect(Selector(`#access-${TEST_BUCKET_NAME_SPECIFIC}-5`).innerText)
       .eql("Access: R");
   })
   .after(async (t) => {
@@ -212,13 +205,7 @@ test
     await t
       .useRole(roles.bucketSpecific)
       .navigateTo("http://localhost:9090/buckets")
-      .expect(
-        Selector("h1")
-          .withText(`${TEST_BUCKET_NAME_SPECIFIC}-8`)
-          .parent(1)
-          .find("p")
-          .nth(-1).innerText,
-      )
+      .expect(Selector(`#access-${TEST_BUCKET_NAME_SPECIFIC}-8`).innerText)
       .eql("Access: R/W");
   })
   .after(async (t) => {
diff --git a/portal-ui/tests/utils/elements.ts b/portal-ui/tests/utils/elements.ts
index cce6290d4a..56a9b9fde2 100644
--- a/portal-ui/tests/utils/elements.ts
+++ b/portal-ui/tests/utils/elements.ts
@@ -61,18 +61,10 @@ export const deleteAllVersions =
 //----------------------------------------------------
 export const bucketNameInput = Selector("#bucket-name");
 export const bucketsPrefixInput = Selector("#prefix");
-export const bucketsAccessInput = Selector(
-  'input[class*="MuiSelect-nativeInput"]',
-);
-export const bucketsAccessReadOnlyInput = Selector(
-  'li[class*="MuiMenuItem-root"]',
-).withText("readonly");
-export const bucketsAccessWriteOnlyInput = Selector(
-  'li[class*="MuiMenuItem-root"]',
-).withText("writeonly");
-export const bucketsAccessReadWriteInput = Selector(
-  'li[class*="MuiMenuItem-root"]',
-).withText("readwrite");
+export const bucketsAccessInput = Selector("div.selectContainer");
+export const bucketsAccessReadOnlyInput = Selector("li").withText("readonly");
+export const bucketsAccessWriteOnlyInput = Selector("li").withText("writeonly");
+export const bucketsAccessReadWriteInput = Selector("li").withText("readwrite");
 export const uploadInput = Selector("input").withAttribute("type", "file");
 export const createPolicyName = Selector("#policy-name");
 export const createPolicyTextfield = Selector(".w-tc-editor-text");
@@ -118,8 +110,10 @@ export const createGroupUserTable = Selector(
 //----------------------------------------------------
 // Bucket page vertical tabs
 //----------------------------------------------------
-export const bucketAccessRulesTab =
-  Selector(".MuiTab-root").withText("Anonymous");
+export const bucketAccessRulesTab = Selector("button").withAttribute(
+  "id",
+  "anonymous",
+);
 
 //----------------------------------------------------
 // Settings window
diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
index 721536fc19..8f23bf0f69 100644
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -4868,10 +4868,10 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-gpu@^5.0.33:
-  version "5.0.33"
-  resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-5.0.33.tgz#e7c690e3ed5d7a46c8d1f3f5b85dfa7d875a657a"
-  integrity sha512-lSfFHJ0hKWPxAKMZqaDySwP9lRnO6KNIiowXEYG50DVpBlP8RoQHVyiju9cG+sD6iokQnQjFbVk3pF87JWhA2A==
+detect-gpu@^5.0.34:
+  version "5.0.34"
+  resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-5.0.34.tgz#c4a29f99e3d78ac35df44355f0298f5ae29c6fe4"
+  integrity sha512-iHYDY2iy6OVvJVmTXvMrp5+OROP0Q62qTlrsC7wl3kZmm6yVAoOhQx5cIIxTVEEIZe1M1aPVI3RgsbG/Z6/7PQ==
   dependencies:
     webgl-constants "^1.1.1"
 
@@ -8233,13 +8233,13 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-"mds@https://github.com/minio/mds.git#v0.7.0":
-  version "0.7.0"
-  resolved "https://github.com/minio/mds.git#89335379b3a07333fb2dcbad099fbf11e8606746"
+"mds@https://github.com/minio/mds.git#v0.8.1":
+  version "0.8.0"
+  resolved "https://github.com/minio/mds.git#1ce15093f0a277c739b2775e91e793f51698827c"
   dependencies:
     "@types/styled-components" "^5.1.25"
     "@uiw/react-textarea-code-editor" "^2.1.7"
-    detect-gpu "^5.0.33"
+    detect-gpu "^5.0.34"
     react-virtualized "^9.22.5"
     styled-components "^5.3.11"