diff --git a/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx b/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
index 8df7b55bf2..43e7d8137c 100644
--- a/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
+++ b/portal-ui/src/screens/Console/IDP/AddIDPConfiguration.tsx
@@ -15,28 +15,26 @@
 // 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 createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Box, Grid } from "@mui/material";
 import {
-  formFieldStyles,
-  modalBasic,
-} from "../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { BackLink, Button, PageLayout } from "mds";
+  BackLink,
+  Button,
+  FormLayout,
+  Grid,
+  InputBox,
+  PageLayout,
+  SectionTitle,
+  Switch,
+} from "mds";
 import { useNavigate } from "react-router-dom";
 import { ErrorResponseHandler } from "../../../common/types";
 import { useAppDispatch } from "../../../store";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import {
   setErrorSnackMessage,
   setHelpName,
   setServerNeedsRestart,
 } from "../../../systemSlice";
 import useApi from "../Common/Hooks/useApi";
-import SectionTitle from "../Common/SectionTitle";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
@@ -51,14 +49,7 @@ type AddIDPConfigurationProps = {
   endpoint: string;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    ...modalBasic,
-  });
-
 const AddIDPConfiguration = ({
-  classes,
   icon,
   helpBox,
   header,
@@ -132,7 +123,7 @@ const AddIDPConfiguration = ({
     switch (value.type) {
       case "toggle":
         return (
-          <FormSwitchWrapper
+          <Switch
             indicatorLabels={["Enabled", "Disabled"]}
             checked={fields[key] === "on" ? true : false}
             value={"is-field-enabled"}
@@ -148,7 +139,7 @@ const AddIDPConfiguration = ({
         );
       default:
         return (
-          <InputBoxWrapper
+          <InputBox
             id={key}
             required={value.required}
             name={key}
@@ -178,76 +169,45 @@ const AddIDPConfiguration = ({
         actions={<HelpMenu />}
       />
       <PageLayout>
-        <Box
-          sx={{
-            display: "grid",
-            padding: "25px",
-            gap: "25px",
-            gridTemplateColumns: {
-              md: "2fr 1.2fr",
-              xs: "1fr",
-            },
-            border: "1px solid #eaeaea",
-          }}
-        >
-          <Box>
-            <SectionTitle icon={icon}>{title}</SectionTitle>
-            <form
-              noValidate
-              autoComplete="off"
-              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                addRecord(e);
-              }}
-            >
-              <Grid container item spacing="20" sx={{ marginTop: 1 }}>
-                <Grid xs={12} item>
-                  {Object.entries(extraFormFields).map(([key, value]) => (
-                    <Grid
-                      item
-                      xs={12}
-                      className={classes.formFieldRow}
-                      key={key}
-                    >
-                      {renderFormField(key, value)}
-                    </Grid>
-                  ))}
-                  <Grid item xs={12} textAlign={"right"}>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "flex-end",
-                        marginTop: "20px",
-                        gap: "15px",
-                      }}
-                    >
-                      <Button
-                        id={"clear"}
-                        type="button"
-                        variant="regular"
-                        onClick={resetForm}
-                        label={"Clear"}
-                      />
-
-                      <Button
-                        id={"save-key"}
-                        type="submit"
-                        variant="callAction"
-                        color="primary"
-                        disabled={loading || !validSave()}
-                        label={"Save"}
-                      />
-                    </Box>
-                  </Grid>
+        <FormLayout helpBox={helpBox}>
+          <SectionTitle icon={icon}>{title}</SectionTitle>
+          <form
+            noValidate
+            autoComplete="off"
+            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+              addRecord(e);
+            }}
+          >
+            <Grid container>
+              <Grid xs={12} item>
+                {Object.entries(extraFormFields).map(([key, value]) =>
+                  renderFormField(key, value)
+                )}
+                <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+                  <Button
+                    id={"clear"}
+                    type="button"
+                    variant="regular"
+                    onClick={resetForm}
+                    label={"Clear"}
+                  />
+
+                  <Button
+                    id={"save-key"}
+                    type="submit"
+                    variant="callAction"
+                    color="primary"
+                    disabled={loading || !validSave()}
+                    label={"Save"}
+                  />
                 </Grid>
               </Grid>
-            </form>
-          </Box>
-          {helpBox}
-        </Box>
+            </Grid>
+          </form>
+        </FormLayout>
       </PageLayout>
     </Grid>
   );
 };
 
-export default withStyles(styles)(AddIDPConfiguration);
+export default AddIDPConfiguration;
diff --git a/portal-ui/src/screens/Console/IDP/AddIDPConfigurationHelpbox.tsx b/portal-ui/src/screens/Console/IDP/AddIDPConfigurationHelpbox.tsx
index 91ea7080eb..f63b1c425c 100644
--- a/portal-ui/src/screens/Console/IDP/AddIDPConfigurationHelpbox.tsx
+++ b/portal-ui/src/screens/Console/IDP/AddIDPConfigurationHelpbox.tsx
@@ -1,7 +1,21 @@
-import React, { Fragment } 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 { HelpIconFilled, Box } from "mds";
 
 interface IContent {
   icon: React.ReactNode;
diff --git a/portal-ui/src/screens/Console/IDP/DeleteIDPConfigurationModal.tsx b/portal-ui/src/screens/Console/IDP/DeleteIDPConfigurationModal.tsx
index 438b9918eb..380cfdfe66 100644
--- a/portal-ui/src/screens/Console/IDP/DeleteIDPConfigurationModal.tsx
+++ b/portal-ui/src/screens/Console/IDP/DeleteIDPConfigurationModal.tsx
@@ -14,18 +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 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 {
   setErrorSnackMessage,
   setServerNeedsRestart,
 } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import { ErrorResponseHandler } from "../../../common/types";
+import useApi from "../Common/Hooks/useApi";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 
 interface IDeleteIDPConfigurationModalProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -74,10 +72,10 @@ const DeleteIDPConfigurationModal = ({
         disabled: deleteLoading,
       }}
       confirmationContent={
-        <DialogContentText>
+        <Fragment>
           Are you sure you want to delete IDP <b>{displayName}</b>{" "}
           configuration? <br />
-        </DialogContentText>
+        </Fragment>
       }
     />
   );
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
index 430f79c8e3..ed210a23c1 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurationDetails.tsx
@@ -15,17 +15,6 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
-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 {
-  containerForHeader,
-  formFieldStyles,
-  modalBasic,
-  searchField,
-} from "../Common/FormComponents/common/styleLibrary";
 import {
   BackLink,
   Button,
@@ -33,9 +22,16 @@ import {
   PageLayout,
   RefreshIcon,
   TrashIcon,
+  Box,
+  Grid,
+  Switch,
+  InputBox,
+  FormLayout,
+  breakPoints,
+  ScreenTitle,
 } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import { useNavigate, useParams } from "react-router-dom";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { ErrorResponseHandler } from "../../../common/types";
 import { useAppDispatch } from "../../../store";
 import {
@@ -43,17 +39,14 @@ import {
   setHelpName,
   setServerNeedsRestart,
 } from "../../../systemSlice";
-import useApi from "../Common/Hooks/useApi";
 import api from "../../../common/api";
-import ScreenTitle from "../Common/ScreenTitle/ScreenTitle";
+import useApi from "../Common/Hooks/useApi";
 import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import LabelValuePair from "../Common/UsageBarWrapper/LabelValuePair";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
 type IDPConfigurationDetailsProps = {
-  classes?: any;
   formFields: object;
   endpoint: string;
   backLink: string;
@@ -63,23 +56,7 @@ type IDPConfigurationDetailsProps = {
   icon: React.ReactNode;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...formFieldStyles,
-    formFieldRow: {
-      ...formFieldStyles.formFieldRow,
-    },
-    ...modalBasic,
-    pageContainer: {
-      height: "100%",
-    },
-    ...searchField,
-
-    ...containerForHeader,
-  });
-
 const IDPConfigurationDetails = ({
-  classes,
   formFields,
   endpoint,
   backLink,
@@ -231,9 +208,9 @@ const IDPConfigurationDetails = ({
     switch (value.type) {
       case "toggle":
         return (
-          <FormSwitchWrapper
+          <Switch
             indicatorLabels={["Enabled", "Disabled"]}
-            checked={fields[key] === "on" ? true : false}
+            checked={fields[key] === "on"}
             value={"is-field-enabled"}
             id={"is-field-enabled"}
             name={"is-field-enabled"}
@@ -248,7 +225,7 @@ const IDPConfigurationDetails = ({
         );
       default:
         return (
-          <InputBoxWrapper
+          <InputBox
             id={key}
             required={value.required}
             name={key}
@@ -269,18 +246,7 @@ const IDPConfigurationDetails = ({
 
   const renderEditForm = () => {
     return (
-      <Box
-        sx={{
-          display: "grid",
-          padding: "25px",
-          gap: "25px",
-          gridTemplateColumns: {
-            md: "2fr 1.2fr",
-            xs: "1fr",
-          },
-          border: "1px solid #eaeaea",
-        }}
-      >
+      <FormLayout helpBox={helpBox}>
         <form
           noValidate
           autoComplete="off"
@@ -288,58 +254,45 @@ const IDPConfigurationDetails = ({
             saveRecord(e);
           }}
         >
-          <Grid container item spacing="20" sx={{ marginTop: 1 }}>
-            <Grid xs={12} item className={classes.fieldBox}>
-              {Object.entries(formFields).map(([key, value]) => (
-                <Grid item xs={12} className={classes.formFieldRow} key={key}>
-                  {renderFormField(key, value)}
-                </Grid>
-              ))}
-              <Grid item xs={12} textAlign={"right"}>
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    marginTop: "20px",
-                    gap: "15px",
-                  }}
-                >
-                  {editMode && (
-                    <Button
-                      id={"clear"}
-                      type="button"
-                      variant="regular"
-                      onClick={resetForm}
-                      label={"Clear"}
-                    />
-                  )}
-                  {editMode && (
-                    <Button
-                      id={"cancel"}
-                      type="button"
-                      variant="regular"
-                      onClick={toggleEditMode}
-                      label={"Cancel"}
-                    />
-                  )}
-                  {editMode && (
-                    <Button
-                      id={"save-key"}
-                      type="submit"
-                      variant="callAction"
-                      color="primary"
-                      disabled={loading || loadingSave || !validSave()}
-                      label={"Save"}
-                    />
-                  )}
-                </Box>
+          <Grid container>
+            <Grid xs={12} item>
+              {Object.entries(formFields).map(([key, value]) =>
+                renderFormField(key, value)
+              )}
+              <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+                {editMode && (
+                  <Button
+                    id={"clear"}
+                    type="button"
+                    variant="regular"
+                    onClick={resetForm}
+                    label={"Clear"}
+                  />
+                )}
+                {editMode && (
+                  <Button
+                    id={"cancel"}
+                    type="button"
+                    variant="regular"
+                    onClick={toggleEditMode}
+                    label={"Cancel"}
+                  />
+                )}
+                {editMode && (
+                  <Button
+                    id={"save-key"}
+                    type="submit"
+                    variant="callAction"
+                    color="primary"
+                    disabled={loading || loadingSave || !validSave()}
+                    label={"Save"}
+                  />
+                )}
               </Grid>
             </Grid>
           </Grid>
         </form>
-        {helpBox}
-      </Box>
+      </FormLayout>
     );
   };
   const renderViewForm = () => {
@@ -347,11 +300,15 @@ const IDPConfigurationDetails = ({
       <Box
         sx={{
           display: "grid",
-          gridTemplateColumns: { xs: "1fr", sm: "2fr 1fr" },
-          gridAutoFlow: { xs: "dense", sm: "row" },
+          gridTemplateColumns: "1fr",
+          gridAutoFlow: "dense",
           gap: 3,
           padding: "15px",
           border: "1px solid #eaeaea",
+          [`@media (min-width: ${breakPoints.sm}px)`]: {
+            gridTemplateColumns: "2fr 1fr",
+            gridAutoFlow: "row",
+          },
         }}
       >
         {Object.entries(formFields).map(([key, value]) => (
@@ -370,7 +327,7 @@ const IDPConfigurationDetails = ({
   }, [dispatch]);
 
   return (
-    <Grid item xs={12}>
+    <Fragment>
       {deleteOpen && configurationName && (
         <DeleteIDPConfigurationModal
           deleteOpen={deleteOpen}
@@ -379,15 +336,18 @@ const IDPConfigurationDetails = ({
           closeDeleteModalAndRefresh={closeDeleteModalAndRefresh}
         />
       )}
-      <PageHeaderWrapper
-        label={<BackLink onClick={() => navigate(backLink)} label={header} />}
-        actions={<HelpMenu />}
-      />
-      <PageLayout className={classes.pageContainer}>
-        <Box>
+      <Grid item xs={12}>
+        <PageHeaderWrapper
+          label={<BackLink onClick={() => navigate(backLink)} label={header} />}
+          actions={<HelpMenu />}
+        />
+        <PageLayout>
           <ScreenTitle
             icon={icon}
-            title={configurationName === "_" ? "Default" : configurationName}
+            title={
+              configurationName === "_" ? "Default" : configurationName || ""
+            }
+            subTitle={null}
             actions={
               <Fragment>
                 {configurationName !== "_" && (
@@ -425,13 +385,15 @@ const IDPConfigurationDetails = ({
                 />
               </Fragment>
             }
+            sx={{
+              marginBottom: 15,
+            }}
           />
-
           {editMode ? renderEditForm() : renderViewForm()}
-        </Box>
-      </PageLayout>
-    </Grid>
+        </PageLayout>
+      </Grid>
+    </Fragment>
   );
 };
 
-export default withStyles(styles)(IDPConfigurationDetails);
+export default IDPConfigurationDetails;
diff --git a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
index 7d15035685..8d8a84b945 100644
--- a/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
+++ b/portal-ui/src/screens/Console/IDP/IDPConfigurations.tsx
@@ -15,12 +15,11 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { useAppDispatch } from "../../../store";
+import { AddIcon, Button, PageLayout, RefreshIcon, Grid, DataTable } from "mds";
 import { useNavigate } from "react-router-dom";
+import { api } from "api";
+import { errorToHandler } from "api/errors";
+import { useAppDispatch } from "../../../store";
 import {
   CONSOLE_UI_RESOURCE,
   IAM_SCOPES,
@@ -30,28 +29,17 @@ import {
   SecureComponent,
 } from "../../../common/SecureComponent";
 import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
-import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
-import { Grid } from "@mui/material";
+import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 import TooltipWrapper from "../Common/TooltipWrapper/TooltipWrapper";
-import { AddIcon, Button, PageLayout, RefreshIcon } from "mds";
-import TableWrapper from "../Common/TableWrapper/TableWrapper";
 import DeleteIDPConfigurationModal from "./DeleteIDPConfigurationModal";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
-import { api } from "api";
-import { errorToHandler } from "api/errors";
 
 type IDPConfigurationsProps = {
-  classes?: any;
   idpType: string;
 };
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...containerForHeader,
-  });
-
-const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
+const IDPConfigurations = ({ idpType }: IDPConfigurationsProps) => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -159,19 +147,15 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
         label={`${idpType.toUpperCase()} Configurations`}
         actions={<HelpMenu />}
       />
-
-      <PageLayout className={classes.pageContainer}>
-        <Grid container spacing={1}>
+      <PageLayout>
+        <Grid container>
           <Grid
             item
             xs={12}
-            display={"flex"}
-            alignItems={"center"}
-            justifyContent={"flex-end"}
             sx={{
-              "& button": {
-                marginLeft: "8px",
-              },
+              ...actionsTray.actionsTray,
+              justifyContent: "flex-end",
+              gap: 8,
             }}
           >
             <SecureComponent
@@ -206,13 +190,13 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
               </TooltipWrapper>
             </SecureComponent>
           </Grid>
-          <Grid item xs={12} className={classes.tableBlock}>
+          <Grid item xs={12}>
             <SecureComponent
               scopes={[IAM_SCOPES.ADMIN_CONFIG_UPDATE]}
               resource={CONSOLE_UI_RESOURCE}
               errorProps={{ disabled: true }}
             >
-              <TableWrapper
+              <DataTable
                 itemActions={tableActions}
                 columns={[
                   { label: "Name", elementKey: "name" },
@@ -232,4 +216,4 @@ const IDPConfigurations = ({ classes, idpType }: IDPConfigurationsProps) => {
   );
 };
 
-export default withStyles(styles)(IDPConfigurations);
+export default IDPConfigurations;