diff --git a/portal-ui/src/screens/Console/Common/TestWrapper/TestWrapper.tsx b/portal-ui/src/screens/Console/Common/TestWrapper/TestWrapper.tsx
index e82ed1b87..4620b7d3e 100644
--- a/portal-ui/src/screens/Console/Common/TestWrapper/TestWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/TestWrapper/TestWrapper.tsx
@@ -15,120 +15,20 @@
 // 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 { Grid } from "@mui/material";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import { DrivesIcon, Loader, VersionIcon } from "mds";
+import { DrivesIcon, Loader, SectionTitle, VersionIcon, Grid } from "mds";
 import { api } from "api";
 import { ServerProperties } from "api/consoleApi";
 
 interface ITestWrapper {
   title: any;
   children: any;
-  classes: any;
-  advancedVisible: boolean;
-  advancedContent?: any;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    titleBar: {
-      borderBottom: "#E5E5E5 1px solid",
-      padding: "30px 25px",
-      fontSize: 20,
-      color: "#07193E",
-      fontWeight: "bold",
-      borderRadius: "10px 10px 0px 0px",
-      paddingTop: 0,
-    },
-    divisorContainer: {
-      padding: 25,
-    },
-    serversData: {
-      color: "#07193E",
-      fontSize: 18,
-      display: "flex",
-      alignItems: "center",
-      "& svg": {
-        marginRight: 10,
-      },
-    },
-    minioVersionContainer: {
-      fontSize: 12,
-      color: "#07193E",
-      justifyContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: "flex",
-    },
-    versionIcon: {
-      color: "#07193E",
-      marginRight: 20,
-    },
-    loaderAlign: {
-      textAlign: "center",
-    },
-    advancedContainer: {
-      justifyContent: "flex-end",
-      display: "flex",
-    },
-    optionsContainer: {
-      padding: 0,
-      marginBottom: 25,
-    },
-    advancedConfiguration: {
-      color: "#2781B0",
-      fontSize: 10,
-      textDecoration: "underline",
-      border: "none",
-      backgroundColor: "transparent",
-      cursor: "pointer",
-      alignItems: "center",
-      display: "flex",
-
-      "&:hover": {
-        color: "#07193E",
-      },
-
-      "& svg": {
-        width: 10,
-        alignSelf: "center",
-        marginLeft: 5,
-      },
-    },
-    advancedOpen: {
-      transform: "rotateZ(-90deg) translateX(-4px) translateY(2px)",
-    },
-    advancedClosed: {
-      transform: "rotateZ(90deg)",
-    },
-    advancedContent: {
-      backgroundColor: "#F5F7F9",
-      maxHeight: 0,
-      transitionDuration: "0.3s",
-      overflow: "hidden",
-      padding: "0 15px",
-      "&.open": {
-        maxHeight: 400,
-        padding: 15,
-      },
-    },
-  });
-
-const TestWrapper = ({
-  title,
-  children,
-  classes,
-  advancedVisible,
-  advancedContent,
-}: ITestWrapper) => {
+const TestWrapper = ({ title, children }: ITestWrapper) => {
   const [version, setVersion] = useState<string>("N/A");
   const [totalNodes, setTotalNodes] = useState<number>(0);
   const [totalDrives, setTotalDrives] = useState<number>(0);
   const [loading, setLoading] = useState<boolean>(true);
-  const [advancedOpen, setAdvancedOpen] = useState<boolean>(false);
 
   useEffect(() => {
     if (loading) {
@@ -165,15 +65,37 @@ const TestWrapper = ({
 
   return (
     <Grid item xs={12}>
-      <Grid item xs={12} className={classes.titleBar}>
-        {title}
-      </Grid>
+      <SectionTitle separator>{title}</SectionTitle>
       <Grid item xs={12}>
-        <Grid item xs={12} className={classes.optionsContainer}>
-          <Grid container className={classes.divisorContainer}>
+        <Grid
+          item
+          xs={12}
+          sx={{
+            padding: 0,
+            marginBottom: 25,
+          }}
+        >
+          <Grid
+            container
+            sx={{
+              padding: 25,
+            }}
+          >
             {!loading ? (
               <Fragment>
-                <Grid item xs={12} md={4} className={classes.serversData}>
+                <Grid
+                  item
+                  xs={12}
+                  md={4}
+                  sx={{
+                    fontSize: 18,
+                    display: "flex",
+                    alignItems: "center",
+                    "& svg": {
+                      marginRight: 10,
+                    },
+                  }}
+                >
                   <DrivesIcon /> <strong>{totalNodes}</strong>
                   &nbsp;nodes,&nbsp;
                   <strong>{totalDrives}</strong>&nbsp; drives
@@ -182,53 +104,32 @@ const TestWrapper = ({
                   item
                   xs={12}
                   md={4}
-                  className={classes.minioVersionContainer}
+                  sx={{
+                    fontSize: 12,
+                    justifyContent: "center",
+                    alignSelf: "center",
+                    alignItems: "center",
+                    display: "flex",
+                  }}
                 >
-                  <span className={classes.versionIcon}>
+                  <span
+                    style={{
+                      marginRight: 20,
+                    }}
+                  >
                     <VersionIcon />
                   </span>{" "}
                   MinIO VERSION&nbsp;<strong>{version}</strong>
                 </Grid>
-                <Grid item xs={12} md={4} className={classes.advancedContainer}>
-                  {advancedVisible && (
-                    <button
-                      onClick={() => {
-                        setAdvancedOpen(!advancedOpen);
-                      }}
-                      className={classes.advancedConfiguration}
-                    >
-                      Advanced configurations{" "}
-                      <span
-                        className={
-                          advancedOpen
-                            ? classes.advancedOpen
-                            : classes.advancedClosed
-                        }
-                      >
-                        <ArrowForwardIosIcon />
-                      </span>
-                    </button>
-                  )}
-                </Grid>
               </Fragment>
             ) : (
               <Fragment>
-                <Grid item xs={12} className={classes.loaderAlign}>
+                <Grid item xs={12} sx={{ textAlign: "center" }}>
                   <Loader style={{ width: 25, height: 25 }} />
                 </Grid>
               </Fragment>
             )}
           </Grid>
-          {advancedContent && (
-            <Grid
-              xs={12}
-              className={`${classes.advancedContent} ${
-                advancedOpen ? "open" : ""
-              }`}
-            >
-              {advancedContent}
-            </Grid>
-          )}
         </Grid>
         {children}
       </Grid>
@@ -236,4 +137,4 @@ const TestWrapper = ({
   );
 };
 
-export default withStyles(styles)(TestWrapper);
+export default TestWrapper;
diff --git a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
index 8e2dea103..679217b2a 100644
--- a/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
+++ b/portal-ui/src/screens/Console/HealthInfo/HealthInfo.tsx
@@ -14,13 +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 React, { Fragment, useEffect, useState } from "react";
-
 import {
   ICloseEvent,
   IMessageEvent,
   w3cwebsocket as W3CWebSocket,
 } from "websocket";
-import { AppState, useAppDispatch } from "../../../store";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { Box, Button, Grid, HelpBox, InfoIcon, Loader, PageLayout } from "mds";
@@ -31,71 +29,25 @@ import {
   HealthInfoMessage,
   ReportMessage,
 } from "./types";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
+import { AppState, useAppDispatch } from "../../../store";
 import {
   WSCloseAbnormalClosure,
   WSCloseInternalServerErr,
   WSClosePolicyViolation,
   wsProtocol,
 } from "../../../utils/wsUtils";
-import {
-  actionsTray,
-  containerForHeader,
-} from "../Common/FormComponents/common/styleLibrary";
-
-import TestWrapper from "../Common/TestWrapper/TestWrapper";
 import { setHelpName, setServerDiagStat } from "../../../systemSlice";
 import {
   healthInfoMessageReceived,
   healthInfoResetMessage,
 } from "./healthInfoSlice";
+import { registeredCluster } from "../../../config";
+import TestWrapper from "../Common/TestWrapper/TestWrapper";
 import RegisterCluster from "../Support/RegisterCluster";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import { registeredCluster } from "../../../config";
 import HelpMenu from "../HelpMenu";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    loading: {
-      paddingTop: 8,
-      paddingLeft: 40,
-    },
-    buttons: {
-      justifyContent: "flex-start",
-      gap: 20,
-    },
-    localMessage: {
-      fontSize: 24,
-      color: "#07193E",
-      fontWeight: "bold",
-      textAlign: "center",
-      marginBottom: 20,
-    },
-    progressResult: {
-      textAlign: "center",
-      marginBottom: 25,
-    },
-    startDiagnostic: {
-      display: "flex",
-      justifyContent: "flex-end",
-      margin: 25,
-      marginBottom: 0,
-    },
-    startDiagnosticCenter: {
-      textAlign: "center",
-      marginTop: 0,
-    },
-    ...actionsTray,
-    ...containerForHeader,
-  });
-
-interface IHealthInfo {
-  classes: any;
-}
-
-const HealthInfo = ({ classes }: IHealthInfo) => {
+const HealthInfo = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
 
@@ -266,21 +218,35 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
 
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
-        <Grid item xs={12} className={classes.boxy}>
-          <TestWrapper title={title} advancedVisible={false}>
-            <Grid container className={classes.buttons}>
+        <Box withBorders>
+          <TestWrapper title={title}>
+            <Grid
+              container
+              sx={{
+                justifyContent: "flex-start",
+                gap: 20,
+              }}
+            >
               <Grid
                 key="start-download"
                 item
                 xs={12}
-                className={classes.progressResult}
+                sx={{
+                  textAlign: "center",
+                  marginBottom: 25,
+                }}
               >
-                <div className={classes.localMessage}>{localMessage}</div>
-                <div className={classes.progressResult}>
+                <h2>{localMessage}</h2>
+                <Box
+                  sx={{
+                    textAlign: "center",
+                    marginBottom: 25,
+                  }}
+                >
                   {" "}
                   {subnetResponse !== "" &&
                     !subnetResponse.toLowerCase().includes("error") && (
-                      <Grid item xs={12} className={classes.serversData}>
+                      <Grid item xs={12}>
                         <strong>
                           Health report uploaded to Subnet successfully!
                         </strong>
@@ -294,7 +260,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                   {(subnetResponse === "" ||
                     subnetResponse.toLowerCase().includes("error")) &&
                     serverDiagnosticStatus === DiagStatSuccess && (
-                      <Grid item xs={12} className={classes.serversData}>
+                      <Grid item xs={12}>
                         <strong>
                           Something went wrong uploading your Health report to
                           Subnet.
@@ -307,11 +273,16 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
                         </strong>
                       </Grid>
                     )}
-                </div>
+                </Box>
                 {serverDiagnosticStatus === DiagStatInProgress ? (
-                  <div className={classes.loading}>
+                  <Box
+                    sx={{
+                      paddingTop: 8,
+                      paddingLeft: 40,
+                    }}
+                  >
                     <Loader style={{ width: 25, height: 25 }} />
-                  </div>
+                  </Box>
                 ) : (
                   <Fragment>
                     <Box
@@ -353,7 +324,7 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
               </Grid>
             </Grid>
           </TestWrapper>
-        </Grid>
+        </Box>
         {!startDiagnostic && clusterRegistered && (
           <Fragment>
             <br />
@@ -373,4 +344,4 @@ const HealthInfo = ({ classes }: IHealthInfo) => {
   );
 };
 
-export default withStyles(styles)(HealthInfo);
+export default HealthInfo;
diff --git a/portal-ui/src/screens/Console/Support/CallHome.tsx b/portal-ui/src/screens/Console/Support/CallHome.tsx
index f8f499eb7..740a36066 100644
--- a/portal-ui/src/screens/Console/Support/CallHome.tsx
+++ b/portal-ui/src/screens/Console/Support/CallHome.tsx
@@ -15,8 +15,16 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Box } from "@mui/material";
-import { Button, CallHomeMenuIcon, HelpBox, Loader, PageLayout } from "mds";
+import {
+  Box,
+  Button,
+  CallHomeMenuIcon,
+  FormLayout,
+  HelpBox,
+  Loader,
+  PageLayout,
+  Switch,
+} from "mds";
 import { Link, useNavigate } from "react-router-dom";
 import api from "../../../common/api";
 import { ErrorResponseHandler } from "../../../common/types";
@@ -26,21 +34,9 @@ import { ICallHomeResponse } from "./types";
 import { registeredCluster } from "../../../config";
 import CallHomeConfirmation from "./CallHomeConfirmation";
 import RegisterCluster from "./RegisterCluster";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
-const PromoLabels = ({ title, text }: { title: string; text: string }) => {
-  return (
-    <div style={{ marginTop: 15 }}>
-      <div style={{ marginBottom: 10, fontWeight: "bold" }}>{title}</div>
-      <div style={{ color: "#969696", fontSize: 12, marginBottom: 40 }}>
-        {text}
-      </div>
-    </div>
-  );
-};
-
 const CallHome = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -124,175 +120,13 @@ const CallHome = () => {
       <PageHeaderWrapper label="Call Home" actions={<HelpMenu />} />
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "flex-start",
-            justifyContent: "flex-start",
-            border: "1px solid #eaeaea",
-            padding: {
-              lg: "40px",
-              xs: "15px",
-            },
-            flexWrap: "wrap",
-            gap: {
-              lg: "55px",
-              xs: "20px",
-            },
-            height: {
-              md: "calc(100vh - 120px)",
-              xs: "100%",
-            },
-            flexFlow: {
-              lg: "row",
-              xs: "column",
-            },
-          }}
-        >
-          <Box
-            sx={{
-              border: "1px solid #eaeaea",
-              flex: {
-                md: 2,
-                xs: 1,
-              },
-              width: {
-                lg: "auto",
-                xs: "100%",
-              },
-              padding: {
-                lg: "40px",
-                xs: "15px",
-              },
-            }}
-          >
-            {loading ? (
-              <span style={{ marginLeft: 5 }}>
-                <Loader style={{ width: 16, height: 16 }} />
-              </span>
-            ) : (
-              <Fragment>
-                <div style={{ marginBottom: 25 }}>
-                  <FormSwitchWrapper
-                    value="enableDiag"
-                    id="enableDiag"
-                    name="enableDiag"
-                    checked={diagEnabled}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                      setDiagEnabled(event.target.checked);
-                    }}
-                    label={"Daily Health Report"}
-                    disabled={!clusterRegistered}
-                  />
-                  <PromoLabels
-                    title={"When you enable diagnostics"}
-                    text={
-                      "Daily Health Report enables you to proactively identify potential issues in your deployment before they escalate."
-                    }
-                  />
-                </div>
-                <div>
-                  <FormSwitchWrapper
-                    value="enableLogs"
-                    id="enableLogs"
-                    name="enableLogs"
-                    checked={logsEnabled}
-                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                      setLogsEnabled(event.target.checked);
-                    }}
-                    label={"Live Error Logs"}
-                    disabled={!clusterRegistered}
-                  />
-                  <PromoLabels
-                    title={"When you enable logs"}
-                    text={
-                      "Live Error Logs will enable MinIO's support team and automatic diagnostics system to catch failures early."
-                    }
-                  />
-                </div>
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    marginTop: "55px",
-                    gap: "0px 10px",
-                  }}
-                >
-                  {(oDiagEnabled || oLogsEnabled) && (
-                    <Button
-                      id={"callhome-action"}
-                      variant={"secondary"}
-                      data-test-id="call-home-toggle-button"
-                      onClick={disableCallHomeAction}
-                      disabled={loading}
-                    >
-                      Disable Call Home
-                    </Button>
-                  )}
-                  <Button
-                    id={"callhome-action"}
-                    type="button"
-                    variant={mainVariant}
-                    data-test-id="call-home-toggle-button"
-                    onClick={confirmCallHomeAction}
-                    disabled={loading}
-                  >
-                    Save Configuration
-                  </Button>
-                </Box>
-              </Fragment>
-            )}
-          </Box>
-          <Box
-            sx={{
-              flex: 1,
-              minWidth: {
-                md: "365px",
-                xs: "100%",
-              },
-              width: "100%",
-            }}
-          >
+        <FormLayout
+          helpBox={
             <HelpBox
-              title={""}
-              iconComponent={null}
+              title={"Learn more about Call Home"}
+              iconComponent={<CallHomeMenuIcon />}
               help={
                 <Fragment>
-                  <Box
-                    sx={{
-                      marginTop: "-25px",
-                      fontSize: "16px",
-                      fontWeight: 600,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "flex-start",
-                      padding: "2px",
-                    }}
-                  >
-                    <Box
-                      sx={{
-                        backgroundColor: "#07193E",
-                        height: "15px",
-                        width: "15px",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        borderRadius: "50%",
-                        marginRight: "18px",
-                        padding: "3px",
-                        "& .min-icon": {
-                          height: "11px",
-                          width: "11px",
-                          fill: "#ffffff",
-                        },
-                      }}
-                    >
-                      <CallHomeMenuIcon />
-                    </Box>
-                    Learn more about Call Home
-                  </Box>
-
                   <Box
                     sx={{
                       display: "flex",
@@ -322,8 +156,76 @@ const CallHome = () => {
                 </Fragment>
               }
             />
-          </Box>
-        </Box>
+          }
+        >
+          {loading ? (
+            <span style={{ marginLeft: 5 }}>
+              <Loader style={{ width: 16, height: 16 }} />
+            </span>
+          ) : (
+            <Fragment>
+              <Switch
+                value="enableDiag"
+                id="enableDiag"
+                name="enableDiag"
+                checked={diagEnabled}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setDiagEnabled(event.target.checked);
+                }}
+                label={"Daily Health Report"}
+                disabled={!clusterRegistered}
+                description={
+                  "Daily Health Report enables you to proactively identify potential issues in your deployment before they escalate."
+                }
+              />
+              <Switch
+                value="enableLogs"
+                id="enableLogs"
+                name="enableLogs"
+                checked={logsEnabled}
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                  setLogsEnabled(event.target.checked);
+                }}
+                label={"Live Error Logs"}
+                disabled={!clusterRegistered}
+                description={
+                  "Live Error Logs will enable MinIO's support team and automatic diagnostics system to catch failures early."
+                }
+              />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  marginTop: "55px",
+                  gap: "0px 10px",
+                }}
+              >
+                {(oDiagEnabled || oLogsEnabled) && (
+                  <Button
+                    id={"callhome-action"}
+                    variant={"secondary"}
+                    data-test-id="call-home-toggle-button"
+                    onClick={disableCallHomeAction}
+                    disabled={loading}
+                  >
+                    Disable Call Home
+                  </Button>
+                )}
+                <Button
+                  id={"callhome-action"}
+                  type="button"
+                  variant={mainVariant}
+                  data-test-id="call-home-toggle-button"
+                  onClick={confirmCallHomeAction}
+                  disabled={loading}
+                >
+                  Save Configuration
+                </Button>
+              </Box>
+            </Fragment>
+          )}
+        </FormLayout>
       </PageLayout>
     </Fragment>
   );
diff --git a/portal-ui/src/screens/Console/Support/Profile.tsx b/portal-ui/src/screens/Console/Support/Profile.tsx
index 0246144a4..d719766bd 100644
--- a/portal-ui/src/screens/Console/Support/Profile.tsx
+++ b/portal-ui/src/screens/Console/Support/Profile.tsx
@@ -1,67 +1,34 @@
+// 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, { Fragment, useEffect, useState } from "react";
 import { IMessageEvent, w3cwebsocket as W3CWebSocket } from "websocket";
-import { Theme } from "@mui/material/styles";
-import { Button, PageLayout } from "mds";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Grid } from "@mui/material";
-import CheckboxWrapper from "../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
+import { Button, PageLayout, FormLayout, Box, Checkbox, InputLabel } from "mds";
 import { wsProtocol } from "../../../utils/wsUtils";
-import {
-  actionsTray,
-  containerForHeader,
-  inlineCheckboxes,
-} from "../Common/FormComponents/common/styleLibrary";
 import { useNavigate } from "react-router-dom";
-import RegisterCluster from "./RegisterCluster";
 import { registeredCluster } from "../../../config";
-import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
-import HelpMenu from "../HelpMenu";
 import { useAppDispatch } from "../../../store";
 import { setHelpName } from "../../../systemSlice";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    buttonContainer: {
-      display: "flex",
-      justifyContent: "flex-end",
-      marginTop: 24,
-      "& button": {
-        marginLeft: 8,
-      },
-    },
-    dropdown: {
-      marginBottom: 24,
-    },
-    checkboxLabel: {
-      marginTop: 12,
-      marginRight: 4,
-      fontSize: 16,
-      fontWeight: 500,
-    },
-    checkboxDisabled: {
-      opacity: 0.5,
-    },
-    inlineCheckboxes: {
-      ...inlineCheckboxes.inlineCheckboxes,
-      alignItems: "center",
-
-      "@media (max-width: 900px)": {
-        flexFlow: "column",
-        alignItems: "flex-start",
-      },
-    },
-    ...actionsTray,
-    ...containerForHeader,
-  });
-
-interface IProfileProps {
-  classes: any;
-}
+import RegisterCluster from "./RegisterCluster";
+import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import HelpMenu from "../HelpMenu";
 
 var c: any = null;
 
-const Profile = ({ classes }: IProfileProps) => {
+const Profile = () => {
   const navigate = useNavigate();
 
   const [profilingStarted, setProfilingStarted] = useState<boolean>(false);
@@ -150,34 +117,39 @@ const Profile = ({ classes }: IProfileProps) => {
   return (
     <Fragment>
       <PageHeaderWrapper label="Profile" actions={<HelpMenu />} />
-
       <PageLayout>
         {!clusterRegistered && <RegisterCluster compactMode />}
-        <Grid item xs={12} className={classes.boxy}>
-          <Grid item xs={12} className={classes.dropdown}>
-            <Grid
-              item
-              xs={12}
-              className={`${classes.inlineCheckboxes} ${
-                profilingStarted && classes.checkboxDisabled
-              }`}
-            >
-              <div className={classes.checkboxLabel}>Types to profile:</div>
-              {typesList.map((t) => (
-                <CheckboxWrapper
-                  checked={types.indexOf(t.value) > -1}
-                  disabled={profilingStarted}
-                  key={`checkbox-${t.label}`}
-                  id={`checkbox-${t.label}`}
-                  label={t.label}
-                  name={`checkbox-${t.label}`}
-                  onChange={onCheckboxClick}
-                  value={t.value}
-                />
-              ))}
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.buttonContainer}>
+        <FormLayout>
+          <Box
+            sx={{
+              display: "flex",
+              gap: 10,
+              "& div": { width: "initial" },
+              "& .inputItem:not(:last-of-type)": { marginBottom: 0 },
+            }}
+          >
+            <InputLabel noMinWidth>Types to profile:</InputLabel>
+            {typesList.map((t) => (
+              <Checkbox
+                checked={types.indexOf(t.value) > -1}
+                disabled={profilingStarted}
+                key={`checkbox-${t.label}`}
+                id={`checkbox-${t.label}`}
+                label={t.label}
+                name={`checkbox-${t.label}`}
+                onChange={onCheckboxClick}
+                value={t.value}
+              />
+            ))}
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "flex-end",
+              marginTop: 24,
+              gap: 10,
+            }}
+          >
             <Button
               id={"start-profiling"}
               type="submit"
@@ -203,11 +175,11 @@ const Profile = ({ classes }: IProfileProps) => {
               }}
               label={"Stop Profiling"}
             />
-          </Grid>
-        </Grid>
+          </Box>
+        </FormLayout>
       </PageLayout>
     </Fragment>
   );
 };
 
-export default withStyles(styles)(Profile);
+export default Profile;
diff --git a/portal-ui/src/screens/Console/Support/RegisterCluster.tsx b/portal-ui/src/screens/Console/Support/RegisterCluster.tsx
index 742449e90..2d538f727 100644
--- a/portal-ui/src/screens/Console/Support/RegisterCluster.tsx
+++ b/portal-ui/src/screens/Console/Support/RegisterCluster.tsx
@@ -65,7 +65,7 @@ const RegisterCluster = ({ compactMode = false }: IRegisterCluster) => {
               </div>
             }
             iconComponent={<WarnIcon />}
-            help={<Fragment />}
+            help={null}
           />
         </Grid>
         <br />
diff --git a/portal-ui/src/screens/Console/Tools/Inspect.tsx b/portal-ui/src/screens/Console/Tools/Inspect.tsx
index 7815a56a3..b1b1da650 100644
--- a/portal-ui/src/screens/Console/Tools/Inspect.tsx
+++ b/portal-ui/src/screens/Console/Tools/Inspect.tsx
@@ -15,25 +15,19 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Box, DialogContentText } from "@mui/material";
 import {
+  Box,
+  breakPoints,
   Button,
+  FormLayout,
   HelpBox,
+  InputBox,
   InspectMenuIcon,
   PageLayout,
   PasswordKeyIcon,
+  Switch,
 } from "mds";
 import { useNavigate } from "react-router-dom";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import {
-  deleteDialogStyles,
-  modalStyleUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-import withStyles from "@mui/styles/withStyles";
 import { useSelector } from "react-redux";
 import {
   deleteCookie,
@@ -41,28 +35,20 @@ import {
   getCookieValue,
   performDownload,
 } from "../../../common/utils";
-import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
-import KeyRevealer from "./KeyRevealer";
 import {
   selDistSet,
   setErrorSnackMessage,
   setHelpName,
 } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
-import RegisterCluster from "../Support/RegisterCluster";
 import { registeredCluster } from "../../../config";
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
+import DistributedOnly from "../Common/DistributedOnly/DistributedOnly";
+import KeyRevealer from "./KeyRevealer";
+import RegisterCluster from "../Support/RegisterCluster";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
 
-const styles = (theme: Theme) =>
-  createStyles({
-    switchLabel: {
-      fontWeight: "normal",
-    },
-    ...deleteDialogStyles,
-    ...modalStyleUtils,
-  });
-
 const ExampleBlock = ({
   volumeVal,
   pathVal,
@@ -77,9 +63,9 @@ const ExampleBlock = ({
           sx={{
             display: "flex",
             marginBottom: "5px",
-            flexFlow: {
-              sm: "row",
-              xs: "column",
+            flexFlow: "row",
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              flexFlow: "column",
             },
           }}
         >
@@ -88,9 +74,9 @@ const ExampleBlock = ({
         <Box
           sx={{
             display: "flex",
-            flexFlow: {
-              sm: "row",
-              xs: "column",
+            flexFlow: "row",
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              flexFlow: "column",
             },
           }}
         >
@@ -102,7 +88,7 @@ const ExampleBlock = ({
   );
 };
 
-const Inspect = ({ classes }: { classes: any }) => {
+const Inspect = () => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const distributedSetup = useSelector(selDistSet);
@@ -218,200 +204,13 @@ const Inspect = ({ classes }: { classes: any }) => {
             entity={"Inspect"}
           />
         ) : (
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "flex-start",
-              border: "1px solid #eaeaea",
-              padding: {
-                lg: "40px",
-                xs: "15px",
-              },
-              flexWrap: "wrap",
-              gap: {
-                lg: "55px",
-                xs: "20px",
-              },
-              height: {
-                md: "calc(100vh - 120px)",
-                xs: "100%",
-              },
-              flexFlow: {
-                lg: "row",
-                xs: "column",
-              },
-            }}
-          >
-            <Box
-              sx={{
-                border: "1px solid #eaeaea",
-                flex: {
-                  md: 2,
-                  xs: 1,
-                },
-                width: {
-                  lg: "auto",
-                  xs: "100%",
-                },
-                padding: {
-                  lg: "40px",
-                  xs: "15px",
-                },
-              }}
-            >
-              <form
-                noValidate
-                autoComplete="off"
-                onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-                  e.preventDefault();
-                  if (!clusterRegistered) {
-                    navigate("/support/register");
-                    return;
-                  }
-                  performInspect();
-                }}
-              >
-                <Box>
-                  <InputBoxWrapper
-                    id="inspect_volume"
-                    name="inspect_volume"
-                    extraInputProps={{
-                      "data-test-id": "inspect_volume",
-                    }}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setVolumeName(e.target.value);
-                    }}
-                    label="Volume or Bucket Name"
-                    value={volumeName}
-                    error={volumeError}
-                    required
-                    placeholder={"test-bucket"}
-                  />
-                </Box>
-                <Box
-                  sx={{
-                    marginTop: "15px",
-                  }}
-                >
-                  <InputBoxWrapper
-                    id="inspect_path"
-                    name="inspect_path"
-                    extraInputProps={{
-                      "data-test-id": "inspect_path",
-                    }}
-                    error={pathError}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setInspectPath(e.target.value);
-                    }}
-                    label="File or Path to inspect"
-                    value={inspectPath}
-                    required
-                    placeholder={"test*/xl.meta"}
-                  />
-                </Box>
-                <Box
-                  sx={{
-                    marginTop: "25px",
-                  }}
-                >
-                  <FormSwitchWrapper
-                    classes={{
-                      inputLabel: classes.switchLabel,
-                    }}
-                    extraInputProps={{
-                      "data-test-id": "inspect_encrypt",
-                    }}
-                    label="Encrypt"
-                    indicatorLabels={["True", "False"]}
-                    checked={isEncrypt}
-                    value={"true"}
-                    id="inspect_encrypt"
-                    name="inspect_encrypt"
-                    onChange={(e) => {
-                      setIsEncrypt(!isEncrypt);
-                    }}
-                  />
-                </Box>
-                <Box
-                  sx={{
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "flex-end",
-                    marginTop: "55px",
-                  }}
-                >
-                  <Button
-                    id={"inspect-clear-button"}
-                    style={{
-                      marginRight: "15px",
-                    }}
-                    type="button"
-                    variant="regular"
-                    data-test-id="inspect-clear-button"
-                    onClick={resetForm}
-                    label={"Clear"}
-                  />
-                  <Button
-                    id={"inspect-start"}
-                    type="submit"
-                    variant={!clusterRegistered ? "regular" : "callAction"}
-                    data-test-id="inspect-submit-button"
-                    disabled={!isFormValid}
-                    label={"Inspect"}
-                  />
-                </Box>
-              </form>
-            </Box>
-            <Box
-              sx={{
-                flex: 1,
-                minWidth: {
-                  md: "365px",
-                  xs: "100%",
-                },
-                width: "100%",
-              }}
-            >
+          <FormLayout
+            helpBox={
               <HelpBox
-                title={""}
-                iconComponent={null}
+                title={"Learn more about the Inspect feature"}
+                iconComponent={<InspectMenuIcon />}
                 help={
                   <Fragment>
-                    <Box
-                      sx={{
-                        marginTop: "-25px",
-                        fontSize: "16px",
-                        fontWeight: 600,
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "flex-start",
-                        padding: "2px",
-                      }}
-                    >
-                      <Box
-                        sx={{
-                          backgroundColor: "#07193E",
-                          height: "15px",
-                          width: "15px",
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          borderRadius: "50%",
-                          marginRight: "18px",
-                          padding: "3px",
-                          "& .min-icon": {
-                            height: "11px",
-                            width: "11px",
-                            fill: "#ffffff",
-                          },
-                        }}
-                      >
-                        <InspectMenuIcon />
-                      </Box>
-                      Learn more about the Inspect feature
-                    </Box>
-
                     <Box
                       sx={{
                         marginTop: "16px",
@@ -429,16 +228,6 @@ const Inspect = ({ classes }: { classes: any }) => {
                         flexFlow: "column",
                         fontSize: "14px",
                         flex: "2",
-                        "& .step-number": {
-                          color: "#ffffff",
-                          height: "25px",
-                          width: "25px",
-                          background: "#081C42",
-                          marginRight: "10px",
-                          textAlign: "center",
-                          fontWeight: 600,
-                          borderRadius: "50%",
-                        },
 
                         "& .step-row": {
                           fontSize: "14px",
@@ -472,19 +261,16 @@ const Inspect = ({ classes }: { classes: any }) => {
 
                         "& .example-code-block label": {
                           display: "inline-block",
-                          width: {
-                            sm: "160px",
-                            xs: "100%",
-                          },
+                          width: 160,
                           fontWeight: 600,
-                          fontSize: "14px",
+                          fontSize: 14,
+                          [`@media (max-width: ${breakPoints.sm}px)`]: {
+                            width: "100%",
+                          },
                         },
 
                         "& code": {
-                          width: {
-                            sm: "100px",
-                            xs: "100%",
-                          },
+                          width: 100,
                           paddingLeft: "10px",
                           fontFamily: "monospace",
                           paddingRight: "10px",
@@ -493,8 +279,10 @@ const Inspect = ({ classes }: { classes: any }) => {
                           borderRadius: "2px",
                           border: "1px solid #eaeaea",
                           fontSize: "10px",
-                          color: "#082146",
                           fontWeight: 500,
+                          [`@media (max-width: ${breakPoints.sm}px)`]: {
+                            width: "100%",
+                          },
                         },
                         "& .spacer": {
                           marginBottom: "5px",
@@ -564,8 +352,85 @@ const Inspect = ({ classes }: { classes: any }) => {
                   </Fragment>
                 }
               />
-            </Box>
-          </Box>
+            }
+          >
+            <form
+              noValidate
+              autoComplete="off"
+              onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                e.preventDefault();
+                if (!clusterRegistered) {
+                  navigate("/support/register");
+                  return;
+                }
+                performInspect();
+              }}
+            >
+              <InputBox
+                id="inspect_volume"
+                name="inspect_volume"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setVolumeName(e.target.value);
+                }}
+                label="Volume or Bucket Name"
+                value={volumeName}
+                error={volumeError}
+                required
+                placeholder={"test-bucket"}
+              />
+              <InputBox
+                id="inspect_path"
+                name="inspect_path"
+                error={pathError}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setInspectPath(e.target.value);
+                }}
+                label="File or Path to inspect"
+                value={inspectPath}
+                required
+                placeholder={"test*/xl.meta"}
+              />
+              <Switch
+                label="Encrypt"
+                indicatorLabels={["True", "False"]}
+                checked={isEncrypt}
+                value={"true"}
+                id="inspect_encrypt"
+                name="inspect_encrypt"
+                onChange={() => {
+                  setIsEncrypt(!isEncrypt);
+                }}
+              />
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "flex-end",
+                  marginTop: "55px",
+                }}
+              >
+                <Button
+                  id={"inspect-clear-button"}
+                  style={{
+                    marginRight: "15px",
+                  }}
+                  type="button"
+                  variant="regular"
+                  data-test-id="inspect-clear-button"
+                  onClick={resetForm}
+                  label={"Clear"}
+                />
+                <Button
+                  id={"inspect-start"}
+                  type="submit"
+                  variant={!clusterRegistered ? "regular" : "callAction"}
+                  data-test-id="inspect-submit-button"
+                  disabled={!isFormValid}
+                  label={"Inspect"}
+                />
+              </Box>
+            </form>
+          </FormLayout>
         )}
         {decryptionKey ? (
           <ModalWrapper
@@ -574,7 +439,7 @@ const Inspect = ({ classes }: { classes: any }) => {
             onClose={onCloseDecKeyModal}
             titleIcon={<PasswordKeyIcon />}
           >
-            <DialogContentText component="div">
+            <Fragment>
               <Box>
                 This will be displayed only once. It cannot be recovered.
                 <br />
@@ -588,7 +453,7 @@ const Inspect = ({ classes }: { classes: any }) => {
               >
                 <KeyRevealer value={decryptionKey} />
               </form>
-            </DialogContentText>
+            </Fragment>
           </ModalWrapper>
         ) : null}
       </PageLayout>
@@ -596,4 +461,4 @@ const Inspect = ({ classes }: { classes: any }) => {
   );
 };
 
-export default withStyles(styles)(Inspect);
+export default Inspect;
diff --git a/portal-ui/tests/permissions-2/inspect.ts b/portal-ui/tests/permissions-2/inspect.ts
index 68696c531..bc583b3dd 100644
--- a/portal-ui/tests/permissions-2/inspect.ts
+++ b/portal-ui/tests/permissions-2/inspect.ts
@@ -52,15 +52,15 @@ export const inspectEl = Selector(".MuiPaper-root")
   .find("ul")
   .child("#inspect");
 
-export const inspect_volume_input = Selector('[data-test-id="inspect_volume"]');
-export const inspect_path_input = Selector('[data-test-id="inspect_path"]');
+export const inspect_volume_input = Selector("#inspect_volume");
+export const inspect_path_input = Selector("#inspect_path");
 
-export const inspect_volume_input_err = Selector("#inspect_volume-helper-text");
-export const inspect_path_input_err = Selector("#inspect_path-helper-text");
+export const inspect_volume_input_err =
+  Selector("#inspect_volume").sibling("div.errorText");
+export const inspect_path_input_err =
+  Selector("#inspect_path").sibling("div.errorText");
 
-export const inspect_encrypt_input = Selector(
-  '[data-test-id="inspect_encrypt"]',
-);
+export const inspect_encrypt_input = Selector("#inspect_encrypt");
 export const inspect_form_clear_btn = Selector(
   '[data-test-id="inspect-clear-button"]',
 );