diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
index 0088d8660..ba34d0cd3 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/AddBucketTagModal.tsx
@@ -15,8 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { AddNewTagIcon, Button } from "mds";
-import { Grid } from "@mui/material";
+import { AddNewTagIcon, Box, Button, FormLayout, Grid, InputBox } from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -25,7 +24,6 @@ import {
   modalStyleUtils,
   spacingUtils,
 } from "../../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { setModalErrorSnackMessage } from "../../../../systemSlice";
 import { useAppDispatch } from "../../../../store";
@@ -96,35 +94,31 @@ const AddBucketTagModal = ({
       }}
       titleIcon={<AddNewTagIcon />}
     >
-      <Grid container>
-        <div className={classes.spacerBottom}>
+      <FormLayout withBorders={false} containerPadding={false}>
+        <Box sx={{ marginBottom: 15 }}>
           <strong>Bucket</strong>: {bucketName}
-        </div>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            value={newKey}
-            label={"New Tag Key"}
-            id={"newTagKey"}
-            name={"newTagKey"}
-            placeholder={"Enter New Tag Key"}
-            onChange={(e: any) => {
-              setNewKey(e.target.value);
-            }}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.formFieldRow}>
-          <InputBoxWrapper
-            value={newLabel}
-            label={"New Tag Label"}
-            id={"newTagLabel"}
-            name={"newTagLabel"}
-            placeholder={"Enter New Tag Label"}
-            onChange={(e: any) => {
-              setNewLabel(e.target.value);
-            }}
-          />
-        </Grid>
-        <Grid item xs={12} className={classes.modalButtonBar}>
+        </Box>
+        <InputBox
+          value={newKey}
+          label={"New Tag Key"}
+          id={"newTagKey"}
+          name={"newTagKey"}
+          placeholder={"Enter New Tag Key"}
+          onChange={(e: any) => {
+            setNewKey(e.target.value);
+          }}
+        />
+        <InputBox
+          value={newLabel}
+          label={"New Tag Label"}
+          id={"newTagLabel"}
+          name={"newTagLabel"}
+          placeholder={"Enter New Tag Label"}
+          onChange={(e: any) => {
+            setNewLabel(e.target.value);
+          }}
+        />
+        <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
           <Button
             id={"clear"}
             type="button"
@@ -144,7 +138,7 @@ const AddBucketTagModal = ({
             label={"Save"}
           />
         </Grid>
-      </Grid>
+      </FormLayout>
     </ModalWrapper>
   );
 };
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
index f1e23b8e5..d62e24f57 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/BulkReplicationModal.tsx
@@ -15,7 +15,15 @@
 // 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 {
+  FormLayout,
+  Grid,
+  InputBox,
+  ReadBox,
+  Select,
+  Switch,
+  Tooltip,
+} from "mds";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
@@ -27,7 +35,6 @@ import {
   wizardCommon,
 } from "../../Common/FormComponents/common/styleLibrary";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
-import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
 import GenericWizard from "../../Common/GenericWizard/GenericWizard";
 import { getBytes, k8sScalarUnitsExcluding } from "../../../../common/utils";
 import InputUnitMenu from "../../Common/FormComponents/InputUnitMenu/InputUnitMenu";
@@ -325,10 +332,12 @@ const AddBulkReplicationModal = ({
             componentRender: (
               <Fragment>
                 <Grid item xs={12}>
-                  <PredefinedList
+                  <ReadBox
+                    sx={{ width: "100%" }}
                     label="Local Buckets to replicate"
-                    content={bucketsToAlter.join(", ")}
-                  />
+                  >
+                    {bucketsToAlter.join(", ")}
+                  </ReadBox>
                 </Grid>
                 <h4>Remote Endpoint Configuration</h4>
                 <span className={classes.descriptionText}>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
index 73039f3f4..6cfc0b5b4 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
@@ -27,10 +27,10 @@ import {
   IconButton,
   Tooltip,
   Grid,
+  Checkbox,
 } from "mds";
 import { niceBytes } from "../../../../../../common/utils";
 import SpecificVersionPill from "./SpecificVersionPill";
-import CheckboxWrapper from "../../../../Common/FormComponents/CheckboxWrapper/CheckboxWrapper";
 import { BucketObject } from "api/consoleApi";
 
 interface IFileVersionItem {
@@ -242,24 +242,19 @@ const FileVersionItem = ({
               <Grid container>
                 <Grid item xs md={4} className={"versionContainer"}>
                   {checkable && (
-                    <CheckboxWrapper
+                    <Checkbox
                       checked={isChecked}
                       id={`select-${versionInfo.version_id}`}
-                      label={""}
                       name={`select-${versionInfo.version_id}`}
                       onChange={(e) => {
                         e.stopPropagation();
-                        e.preventDefault();
                         onCheck(versionInfo.version_id || "");
                       }}
                       value={versionInfo.version_id || ""}
                       disabled={versionInfo.is_delete_marker}
-                      overrideCheckboxStyles={{
-                        paddingLeft: 0,
-                        height: 34,
-                        width: 25,
+                      sx={{
+                        width: "initial",
                       }}
-                      noTopMargin
                     />
                   )}
                   {displayFileIconName(fileName, true)} v{index.toString()}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
deleted file mode 100644
index 4191402c9..000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/CheckboxWrapper/CheckboxWrapper.tsx
+++ /dev/null
@@ -1,131 +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 { Checkbox, Grid, InputLabel, Tooltip } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  checkboxIcons,
-  fieldBasic,
-  tooltipHelper,
-} from "../common/styleLibrary";
-import { HelpIcon } from "mds";
-
-interface CheckBoxProps {
-  label: string;
-  classes: any;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  value: string | boolean;
-  id: string;
-  name: string;
-  disabled?: boolean;
-  tooltip?: string;
-  overrideLabelClasses?: string;
-  overrideCheckboxStyles?: React.CSSProperties;
-  index?: number;
-  noTopMargin?: boolean;
-  checked: boolean;
-  className?: string;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    ...checkboxIcons,
-    fieldContainer: {
-      ...fieldBasic.fieldContainer,
-      display: "flex",
-      justifyContent: "flex-start",
-      alignItems: "center",
-      margin: "15px 0",
-      marginBottom: 0,
-      flexBasis: "initial",
-      flexWrap: "nowrap",
-    },
-    noTopMargin: {
-      marginTop: 0,
-    },
-  });
-
-const CheckboxWrapper = ({
-  label,
-  onChange,
-  value,
-  id,
-  name,
-  checked = false,
-  disabled = false,
-  noTopMargin = false,
-  tooltip = "",
-  overrideLabelClasses = "",
-  overrideCheckboxStyles,
-  classes,
-  className,
-}: CheckBoxProps) => {
-  return (
-    <React.Fragment>
-      <Grid
-        item
-        xs={12}
-        className={`${classes.fieldContainer} ${
-          noTopMargin ? classes.noTopMargin : ""
-        } ${className ? className : ""}`}
-      >
-        <div>
-          <Checkbox
-            name={name}
-            id={id}
-            value={value}
-            color="primary"
-            inputProps={{ "aria-label": "secondary checkbox" }}
-            checked={checked}
-            onChange={onChange}
-            checkedIcon={<span className={classes.checkedIcon} />}
-            icon={<span className={classes.unCheckedIcon} />}
-            disabled={disabled}
-            disableRipple
-            disableFocusRipple
-            focusRipple={false}
-            centerRipple={false}
-            disableTouchRipple
-            style={overrideCheckboxStyles || {}}
-          />
-        </div>
-        {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={`${classes.noMinWidthLabel} ${overrideLabelClasses}`}
-          >
-            <span>{label}</span>
-            {tooltip !== "" && (
-              <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
-                  <div className={classes.tooltip}>
-                    <HelpIcon />
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </InputLabel>
-        )}
-      </Grid>
-    </React.Fragment>
-  );
-};
-
-export default withStyles(styles)(CheckboxWrapper);
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
deleted file mode 100644
index 72cab92d4..000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper.tsx
+++ /dev/null
@@ -1,158 +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 { Grid, InputLabel, TextField, Tooltip } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { fieldBasic, tooltipHelper } from "../common/styleLibrary";
-import { HelpIcon } from "mds";
-
-interface CommentBoxProps {
-  label: string;
-  classes: any;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  value: string | boolean;
-  id: string;
-  name: string;
-  disabled?: boolean;
-  tooltip?: string;
-  index?: number;
-  error?: string;
-  required?: boolean;
-  placeholder?: string;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    inputLabel: {
-      ...fieldBasic.inputLabel,
-      fontSize: 14,
-      margin: 0,
-      alignItems: "flex-start",
-      paddingTop: "20px",
-      flexWrap: "wrap",
-      display: "flex",
-    },
-    textBoxContainer: {
-      flexGrow: 1,
-      position: "relative",
-    },
-    cssOutlinedInput: {
-      borderColor: "#EAEAEA",
-      padding: 16,
-    },
-    rootContainer: {
-      "& .MuiOutlinedInput-inputMultiline": {
-        ...fieldBasic.inputLabel,
-        fontSize: 13,
-        minHeight: 150,
-      },
-      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-        borderColor: "#07193E",
-        borderWidth: 1,
-      },
-      "& textarea": {
-        color: "#07193E",
-        fontSize: 13,
-        fontWeight: 600,
-        "&:placeholder": {
-          color: "#858585",
-          opacity: 1,
-          fontWeight: 400,
-        },
-      },
-    },
-  });
-
-const CommentBoxWrapper = ({
-  label,
-  onChange,
-  value,
-  id,
-  name,
-  disabled = false,
-  tooltip = "",
-  index = 0,
-  error = "",
-  required = false,
-  placeholder = "",
-  classes,
-}: CommentBoxProps) => {
-  let inputProps: any = { "data-index": index };
-
-  return (
-    <React.Fragment>
-      <Grid
-        item
-        xs={12}
-        className={`${classes.fieldContainer} ${
-          error !== "" ? classes.errorInField : ""
-        }`}
-      >
-        {label !== "" && (
-          <InputLabel htmlFor={id} className={classes.inputLabel}>
-            <span>
-              {label}
-              {required ? "*" : ""}
-            </span>
-            {tooltip !== "" && (
-              <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
-                  <div className={classes.tooltip}>
-                    <HelpIcon />
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </InputLabel>
-        )}
-
-        <div className={classes.textBoxContainer}>
-          <TextField
-            id={id}
-            name={name}
-            fullWidth
-            value={value}
-            disabled={disabled}
-            onChange={onChange}
-            multiline
-            rows={5}
-            inputProps={inputProps}
-            error={error !== ""}
-            helperText={error}
-            placeholder={placeholder}
-            InputLabelProps={{
-              shrink: true,
-            }}
-            InputProps={{
-              classes: {
-                notchedOutline: classes.cssOutlinedInput,
-                root: classes.rootContainer,
-              },
-            }}
-            variant="outlined"
-          />
-        </div>
-      </Grid>
-    </React.Fragment>
-  );
-};
-
-export default withStyles(styles)(CommentBoxWrapper);
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
deleted file mode 100644
index 65c7499a9..000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/InputBoxWrapper/InputBoxWrapper.tsx
+++ /dev/null
@@ -1,262 +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, { ClipboardEvent, useState } from "react";
-import {
-  Grid,
-  IconButton,
-  InputLabel,
-  TextField,
-  TextFieldProps,
-  Tooltip,
-} from "@mui/material";
-import { OutlinedInputProps } from "@mui/material/OutlinedInput";
-import { InputProps as StandardInputProps } from "@mui/material/Input";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import makeStyles from "@mui/styles/makeStyles";
-import withStyles from "@mui/styles/withStyles";
-import {
-  fieldBasic,
-  inputFieldStyles,
-  tooltipHelper,
-} from "../common/styleLibrary";
-import { HelpIcon } from "mds";
-import clsx from "clsx";
-
-interface InputBoxProps {
-  label: string;
-  classes: any;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onKeyPress?: (e: any) => void;
-  onFocus?: () => void;
-  onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
-  value: string | boolean;
-  id: string;
-  name: string;
-  disabled?: boolean;
-  multiline?: boolean;
-  type?: string;
-  tooltip?: string;
-  autoComplete?: string;
-  index?: number;
-  error?: string;
-  required?: boolean;
-  placeholder?: string;
-  min?: string;
-  max?: string;
-  overlayId?: string;
-  overlayIcon?: any;
-  overlayAction?: () => void;
-  overlayObject?: any;
-  extraInputProps?: StandardInputProps["inputProps"];
-  noLabelMinWidth?: boolean;
-  pattern?: string;
-  autoFocus?: boolean;
-  className?: string;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-    ...tooltipHelper,
-    textBoxContainer: {
-      flexGrow: 1,
-      position: "relative",
-    },
-    overlayAction: {
-      position: "absolute",
-      right: 5,
-      top: 6,
-      "& svg": {
-        maxWidth: 15,
-        maxHeight: 15,
-      },
-      "&.withLabel": {
-        top: 5,
-      },
-    },
-  });
-
-const inputStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    ...inputFieldStyles,
-  }),
-);
-
-function InputField(props: TextFieldProps) {
-  const classes = inputStyles();
-
-  return (
-    <TextField
-      InputProps={{ classes } as Partial<OutlinedInputProps>}
-      {...props}
-    />
-  );
-}
-
-const InputBoxWrapper = ({
-  label,
-  onChange,
-  value,
-  id,
-  name,
-  type = "text",
-  autoComplete = "off",
-  disabled = false,
-  multiline = false,
-  tooltip = "",
-  index = 0,
-  error = "",
-  required = false,
-  placeholder = "",
-  min,
-  max,
-  overlayId,
-  overlayIcon = null,
-  overlayObject = null,
-  extraInputProps = {},
-  overlayAction,
-  noLabelMinWidth = false,
-  pattern = "",
-  autoFocus = false,
-  classes,
-  className = "",
-  onKeyPress,
-  onFocus,
-  onPaste,
-}: InputBoxProps) => {
-  let inputProps: any = { "data-index": index, ...extraInputProps };
-  const [toggleTextInput, setToggleTextInput] = useState<boolean>(false);
-
-  if (type === "number" && min) {
-    inputProps["min"] = min;
-  }
-
-  if (type === "number" && max) {
-    inputProps["max"] = max;
-  }
-
-  if (pattern !== "") {
-    inputProps["pattern"] = pattern;
-  }
-
-  let inputBoxWrapperIcon = overlayIcon;
-  let inputBoxWrapperType = type;
-
-  if (type === "password" && overlayIcon === null) {
-    inputBoxWrapperIcon = toggleTextInput ? (
-      <VisibilityOffIcon />
-    ) : (
-      <RemoveRedEyeIcon />
-    );
-    inputBoxWrapperType = toggleTextInput ? "text" : "password";
-  }
-
-  return (
-    <React.Fragment>
-      <Grid
-        container
-        className={clsx(
-          className !== "" ? className : "",
-          error !== "" ? classes.errorInField : classes.inputBoxContainer,
-        )}
-      >
-        {label !== "" && (
-          <InputLabel
-            htmlFor={id}
-            className={
-              noLabelMinWidth ? classes.noMinWidthLabel : classes.inputLabel
-            }
-          >
-            <span>
-              {label}
-              {required ? "*" : ""}
-            </span>
-            {tooltip !== "" && (
-              <div className={classes.tooltipContainer}>
-                <Tooltip title={tooltip} placement="top-start">
-                  <div className={classes.tooltip}>
-                    <HelpIcon />
-                  </div>
-                </Tooltip>
-              </div>
-            )}
-          </InputLabel>
-        )}
-
-        <div className={classes.textBoxContainer}>
-          <InputField
-            id={id}
-            name={name}
-            fullWidth
-            value={value}
-            autoFocus={autoFocus}
-            disabled={disabled}
-            onChange={onChange}
-            type={inputBoxWrapperType}
-            multiline={multiline}
-            autoComplete={autoComplete}
-            inputProps={inputProps}
-            error={error !== ""}
-            helperText={error}
-            placeholder={placeholder}
-            className={classes.inputRebase}
-            onKeyPress={onKeyPress}
-            onFocus={onFocus}
-            onPaste={onPaste}
-          />
-          {inputBoxWrapperIcon && (
-            <div
-              className={`${classes.overlayAction} ${
-                label !== "" ? "withLabel" : ""
-              }`}
-            >
-              <IconButton
-                onClick={
-                  overlayAction
-                    ? () => {
-                        overlayAction();
-                      }
-                    : () => setToggleTextInput(!toggleTextInput)
-                }
-                id={overlayId}
-                size={"small"}
-                disableFocusRipple={false}
-                disableRipple={false}
-                disableTouchRipple={false}
-              >
-                {inputBoxWrapperIcon}
-              </IconButton>
-            </div>
-          )}
-          {overlayObject && (
-            <div
-              className={`${classes.overlayAction} ${
-                label !== "" ? "withLabel" : ""
-              }`}
-            >
-              {overlayObject}
-            </div>
-          )}
-        </div>
-      </Grid>
-    </React.Fragment>
-  );
-};
-
-export default withStyles(styles)(InputBoxWrapper);
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx b/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
deleted file mode 100644
index 704953ae0..000000000
--- a/portal-ui/src/screens/Console/Common/FormComponents/PredefinedList/PredefinedList.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { Fragment } from "react";
-import Grid from "@mui/material/Grid";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { predefinedList } from "../common/styleLibrary";
-
-interface IPredefinedList {
-  classes: any;
-  label?: string;
-  content: any;
-  multiLine?: boolean;
-  actionButton?: React.ReactNode;
-}
-
-const styles = (theme: Theme) =>
-  createStyles({
-    ...predefinedList,
-  });
-
-const PredefinedList = ({
-  classes,
-  label = "",
-  content,
-  multiLine = false,
-  actionButton,
-}: IPredefinedList) => {
-  return (
-    <Fragment>
-      <Grid className={classes.prefinedContainer}>
-        {label !== "" && (
-          <Grid item xs={12} className={classes.predefinedTitle}>
-            {label}
-          </Grid>
-        )}
-        <Grid
-          item
-          xs={12}
-          className={`${classes.predefinedList} ${
-            actionButton ? classes.includesActionButton : ""
-          }`}
-        >
-          <Grid
-            item
-            xs={12}
-            className={
-              multiLine ? classes.innerContentMultiline : classes.innerContent
-            }
-          >
-            {content}
-          </Grid>
-          {actionButton && (
-            <div className={classes.overlayShareOption}>{actionButton}</div>
-          )}
-        </Grid>
-      </Grid>
-    </Fragment>
-  );
-};
-
-export default withStyles(styles)(PredefinedList);
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 f14398c33..604fe175b 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -104,43 +104,6 @@ export const tooltipHelper = {
   },
 };
 
-const checkBoxBasic = {
-  width: 16,
-  height: 16,
-  borderRadius: 2,
-};
-
-export const checkboxIcons = {
-  unCheckedIcon: {
-    ...checkBoxBasic,
-    border: "1px solid #c3c3c3",
-    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
-  },
-  checkedIcon: {
-    ...checkBoxBasic,
-    border: "1px solid #FFFFFF",
-    backgroundColor: "#4CCB92",
-    boxShadow: "inset 0px 1px 3px rgba(0,0,0,0.1)",
-    width: 14,
-    height: 14,
-    marginLeft: 1,
-    "&:before": {
-      content: "''",
-      display: "block",
-      marginLeft: -2,
-      marginTop: -2,
-      width: 16,
-      height: 16,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      right: 0,
-      borderRadius: 2,
-      border: "1px solid #ccc",
-    },
-  },
-};
-
 export const containerForHeader = {
   container: {
     position: "relative" as const,
diff --git a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
index 7f75c4162..f4e5094a4 100644
--- a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfMySql.tsx
@@ -23,8 +23,15 @@ import {
   formFieldStyles,
   modalBasic,
 } from "../../Common/FormComponents/common/styleLibrary";
-import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
-import { Switch, InputBox, Grid, Box, ReadBox, RadioGroup } from "mds";
+import {
+  Switch,
+  InputBox,
+  Grid,
+  Box,
+  ReadBox,
+  RadioGroup,
+  CommentBox,
+} from "mds";
 
 interface IConfMySqlProps {
   onChange: (newValue: IElementValue[]) => void;
@@ -298,13 +305,13 @@ const ConfMySql = ({ onChange, classes }: IConfMySqlProps) => {
         />
       </Grid>
       <Grid item xs={12} className={classes.formFieldRow}>
-        <CommentBoxWrapper
+        <CommentBox
           id="comment"
           name="comment"
           label="Comment"
           placeholder="Enter custom notes if any"
           value={comment}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e) => {
             setComment(e.target.value);
           }}
         />
diff --git a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfPostgres.tsx b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfPostgres.tsx
index 4eb3e1f5f..83645b526 100644
--- a/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfPostgres.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/CustomForms/ConfPostgres.tsx
@@ -18,13 +18,21 @@ import React, { useCallback, 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, InputBox, RadioGroup, ReadBox, Select, Switch } from "mds";
+import {
+  Box,
+  CommentBox,
+  Grid,
+  InputBox,
+  RadioGroup,
+  ReadBox,
+  Select,
+  Switch,
+} from "mds";
 import { IElementValue } from "../../Configurations/types";
 import {
   formFieldStyles,
   modalBasic,
 } from "../../Common/FormComponents/common/styleLibrary";
-import CommentBoxWrapper from "../../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
 
 interface IConfPostgresProps {
   onChange: (newValue: IElementValue[]) => void;
@@ -385,13 +393,13 @@ const ConfPostgres = ({ onChange, classes }: IConfPostgresProps) => {
         />
       </Grid>
       <Grid item xs={12} className={classes.formFieldRow}>
-        <CommentBoxWrapper
+        <CommentBox
           id="comment"
           name="comment"
           label="Comment"
           placeholder="Enter custom notes if any"
           value={comment}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onChange={(e) => {
             setComment(e.target.value);
           }}
         />
diff --git a/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx b/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx
index 2211738ef..1ac63af9e 100644
--- a/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx
+++ b/portal-ui/src/screens/Console/EventDestinations/WebhookSettings/EditWebhookEndpoint.tsx
@@ -15,11 +15,20 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Fragment, useEffect, useState } from "react";
-import { Button, ConsoleIcon, Grid, ProgressBar, Tooltip } from "mds";
-import InputBoxWrapper from "../../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import {
+  Button,
+  ConsoleIcon,
+  FormLayout,
+  Grid,
+  InputBox,
+  ProgressBar,
+  ReadBox,
+  Switch,
+  Tooltip,
+} from "mds";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
 import { Webhook } from "@mui/icons-material";
-import { formFieldStyles } from "../../Common/FormComponents/common/styleLibrary";
+import { modalStyleUtils } from "../../Common/FormComponents/common/styleLibrary";
 import CallToActionIcon from "@mui/icons-material/CallToAction";
 import PendingActionsIcon from "@mui/icons-material/PendingActions";
 import {
@@ -31,8 +40,6 @@ import {
 import { useAppDispatch } from "../../../../store";
 
 import { IConfigurationSys } from "../../Configurations/types";
-import FormSwitchWrapper from "../../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
-import PredefinedList from "../../Common/FormComponents/PredefinedList/PredefinedList";
 import { overrideFields } from "../../Configurations/utils";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
@@ -200,12 +207,12 @@ const EditEndpointModal = ({
         onClose={onCloseEndpoint}
         titleIcon={icon}
       >
-        {hasOverride.length > 0 ? (
-          <Fragment>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <PredefinedList
+        <FormLayout withBorders={false} containerPadding={false}>
+          {hasOverride.length > 0 ? (
+            <Fragment>
+              <ReadBox
                 label={"Enabled"}
-                content={overrideValues.enable?.value || "-"}
+                sx={{ width: "100%" }}
                 actionButton={
                   <Grid
                     item
@@ -229,12 +236,12 @@ const EditEndpointModal = ({
                     </Tooltip>
                   </Grid>
                 }
-              />
-            </Grid>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <PredefinedList
+              >
+                {overrideValues.enable?.value || "-"}
+              </ReadBox>
+              <ReadBox
                 label={"Endpoint"}
-                content={overrideValues.endpoint?.value || "-"}
+                sx={{ width: "100%" }}
                 actionButton={
                   <Grid
                     item
@@ -258,12 +265,12 @@ const EditEndpointModal = ({
                     </Tooltip>
                   </Grid>
                 }
-              />
-            </Grid>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <PredefinedList
+              >
+                {overrideValues.endpoint?.value || "-"}
+              </ReadBox>
+              <ReadBox
                 label={"Auth Token"}
-                content={overrideValues.auth_token?.value || "-"}
+                sx={{ width: "100%" }}
                 actionButton={
                   <Grid
                     item
@@ -287,13 +294,13 @@ const EditEndpointModal = ({
                     </Tooltip>
                   </Grid>
                 }
-              />
-            </Grid>
-          </Fragment>
-        ) : (
-          <Fragment>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <FormSwitchWrapper
+              >
+                {overrideValues.auth_token?.value || "-"}
+              </ReadBox>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <Switch
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                   const value = e.target.checked ? "on" : "off";
                   setEndpointState(value);
@@ -304,9 +311,7 @@ const EditEndpointModal = ({
                 value={"switch_on"}
                 checked={endpointState === "on"}
               />
-            </Grid>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <InputBoxWrapper
+              <InputBox
                 id="endpoint"
                 name="endpoint"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -325,9 +330,7 @@ const EditEndpointModal = ({
                 }
                 required
               />
-            </Grid>
-            <Grid item xs={12} sx={{ ...formFieldStyles.formFieldRow }}>
-              <InputBoxWrapper
+              <InputBox
                 id="auth-token"
                 name="auth-token"
                 onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
@@ -336,49 +339,39 @@ const EditEndpointModal = ({
                 label="Auth Token"
                 value={authToken}
               />
-            </Grid>
-            {saving && (
-              <Grid
-                item
-                xs={12}
-                sx={{
-                  marginBottom: 10,
-                }}
-              >
-                <ProgressBar />
+              {saving && (
+                <Grid
+                  item
+                  xs={12}
+                  sx={{
+                    marginBottom: 10,
+                  }}
+                >
+                  <ProgressBar />
+                </Grid>
+              )}
+              <Grid item sx={modalStyleUtils.modalButtonBar}>
+                <Button
+                  id={"reset"}
+                  type="button"
+                  variant="regular"
+                  disabled={saving}
+                  onClick={onCloseEndpoint}
+                  label={"Cancel"}
+                />
+                <Button
+                  id={"save-lifecycle"}
+                  type="submit"
+                  variant="callAction"
+                  color="primary"
+                  disabled={saving || invalidInputs.length !== 0}
+                  label={"Update"}
+                  onClick={updateWebhook}
+                />
               </Grid>
-            )}
-            <Grid
-              item
-              xs={12}
-              sx={{
-                display: "flex",
-                justifyContent: "flex-end",
-              }}
-            >
-              <Button
-                id={"reset"}
-                type="button"
-                variant="regular"
-                disabled={saving}
-                onClick={onCloseEndpoint}
-                label={"Cancel"}
-                sx={{
-                  marginRight: 10,
-                }}
-              />
-              <Button
-                id={"save-lifecycle"}
-                type="submit"
-                variant="callAction"
-                color="primary"
-                disabled={saving || invalidInputs.length !== 0}
-                label={"Update"}
-                onClick={updateWebhook}
-              />
-            </Grid>
-          </Fragment>
-        )}
+            </Fragment>
+          )}
+        </FormLayout>
       </ModalWrapper>
     </Fragment>
   );
diff --git a/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx b/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx
index e529f04e9..d29c54c0d 100644
--- a/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx
+++ b/portal-ui/src/screens/Console/KMS/AddKeyForm.tsx
@@ -15,12 +15,18 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { AddAccessRuleIcon, Button, FormLayout, PageLayout, Grid } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import {
+  AddAccessRuleIcon,
+  Button,
+  FormLayout,
+  PageLayout,
+  Grid,
+  InputBox,
+} from "mds";
 import { ErrorResponseHandler } from "../../../common/types";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import useApi from "../Common/Hooks/useApi";
 import KMSHelpBox from "./KMSHelpbox";
-import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 
 interface IAddKeyFormProps {
   onSuccess: () => void;
@@ -71,7 +77,7 @@ const AddKeyForm = ({ onSuccess, onError }: IAddKeyFormProps) => {
         >
           <Grid container>
             <Grid item xs={12}>
-              <InputBoxWrapper
+              <InputBox
                 id="key-name"
                 name="key-name"
                 label="Key Name"
diff --git a/portal-ui/src/screens/Console/KMS/DeleteKMSModal.tsx b/portal-ui/src/screens/Console/KMS/DeleteKMSModal.tsx
index 9bf1b2026..806c0bc17 100644
--- a/portal-ui/src/screens/Console/KMS/DeleteKMSModal.tsx
+++ b/portal-ui/src/screens/Console/KMS/DeleteKMSModal.tsx
@@ -15,14 +15,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState, Fragment } from "react";
+import { ConfirmDeleteIcon, Grid, InputBox } from "mds";
 import { ErrorResponseHandler } from "../../../common/types";
-import useApi from "../Common/Hooks/useApi";
-import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 import { setErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import useApi from "../Common/Hooks/useApi";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 import WarningMessage from "../Common/WarningMessage/WarningMessage";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import { ConfirmDeleteIcon, Grid } from "mds";
 
 interface IDeleteKMSModalProps {
   closeDeleteModalAndRefresh: (refresh: boolean) => void;
@@ -80,7 +79,7 @@ const DeleteKMSModal = ({
           </Grid>
           To continue please type <b>{selectedItem}</b> in the box.
           <Grid item xs={12}>
-            <InputBoxWrapper
+            <InputBox
               id="retype-key"
               name="retype-key"
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/portal-ui/src/screens/Console/KMS/ImportKey.tsx b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
index 157f9ff49..117e23f14 100644
--- a/portal-ui/src/screens/Console/KMS/ImportKey.tsx
+++ b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
@@ -19,22 +19,22 @@ import {
   AddAccessRuleIcon,
   BackLink,
   Button,
+  CodeEditor,
   FormLayout,
   Grid,
+  InputBox,
   PageLayout,
 } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { useNavigate } from "react-router-dom";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
 import { ErrorResponseHandler } from "../../../common/types";
 import { setErrorSnackMessage, setHelpName } from "../../../systemSlice";
-import { useNavigate } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import useApi from "../Common/Hooks/useApi";
 import KMSHelpBox from "./KMSHelpbox";
-import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../HelpMenu";
-import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 
 export const emptyContent = '{\n    "bytes": ""\n}';
 
@@ -107,48 +107,42 @@ const ImportKey = () => {
                 importRecord(e);
               }}
             >
-              <Grid container>
-                <Grid item xs={12}>
-                  <InputBoxWrapper
-                    id="key-name"
-                    name="key-name"
-                    label="Key Name"
-                    autoFocus={true}
-                    value={keyName}
-                    error={validateKeyName(keyName)}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                      setKeyName(e.target.value);
-                    }}
-                  />
-                </Grid>
-                <Grid item xs={12}>
-                  <CodeMirrorWrapper
-                    label={"Set key Content"}
-                    value={keyContent}
-                    onChange={(value) => {
-                      setKeyContent(value);
-                    }}
-                    editorHeight={"350px"}
-                  />
-                </Grid>
-                <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
-                  <Button
-                    id={"clear"}
-                    type="button"
-                    variant="regular"
-                    onClick={resetForm}
-                    label={"Clear"}
-                  />
+              <InputBox
+                id="key-name"
+                name="key-name"
+                label="Key Name"
+                autoFocus={true}
+                value={keyName}
+                error={validateKeyName(keyName)}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setKeyName(e.target.value);
+                }}
+              />
+              <CodeEditor
+                label={"Set key Content"}
+                value={keyContent}
+                onChange={(value) => {
+                  setKeyContent(value);
+                }}
+                editorHeight={"350px"}
+              />
+              <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
+                <Button
+                  id={"clear"}
+                  type="button"
+                  variant="regular"
+                  onClick={resetForm}
+                  label={"Clear"}
+                />
 
-                  <Button
-                    id={"import-key"}
-                    type="submit"
-                    variant="callAction"
-                    color="primary"
-                    disabled={loading || !validSave}
-                    label={"Import"}
-                  />
-                </Grid>
+                <Button
+                  id={"import-key"}
+                  type="submit"
+                  variant="callAction"
+                  color="primary"
+                  disabled={loading || !validSave}
+                  label={"Import"}
+                />
               </Grid>
             </form>
           </FormLayout>
diff --git a/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx b/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
index 24a914b09..1b57508ce 100644
--- a/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
+++ b/portal-ui/src/screens/Console/ObjectBrowser/RenameLongFilename.tsx
@@ -15,23 +15,12 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import Grid from "@mui/material/Grid";
-import createStyles from "@mui/styles/createStyles";
-import { Button, EditIcon } from "mds";
-import makeStyles from "@mui/styles/makeStyles";
-import { Theme } from "@mui/material/styles";
-import {
-  containerForHeader,
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../Common/FormComponents/common/styleLibrary";
+import { Button, EditIcon, FormLayout, Grid, InputBox, Switch } from "mds";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { useAppDispatch } from "../../../store";
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import { downloadObject } from "./utils";
 import { BucketObject } from "api/consoleApi";
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
 
 interface IRenameLongFilename {
   open: boolean;
@@ -42,15 +31,6 @@ interface IRenameLongFilename {
   closeModal: () => void;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    ...modalStyleUtils,
-    ...formFieldStyles,
-    ...spacingUtils,
-    ...containerForHeader,
-  }),
-);
-
 const RenameLongFileName = ({
   open,
   closeModal,
@@ -59,7 +39,6 @@ const RenameLongFileName = ({
   actualInfo,
   bucketName,
 }: IRenameLongFilename) => {
-  const classes = useStyles();
   const dispatch = useAppDispatch();
 
   const [newFileName, setNewFileName] = useState<string>(currentItem);
@@ -93,42 +72,36 @@ const RenameLongFileName = ({
           doDownload(e);
         }}
       >
-        <Grid container>
-          <Grid item xs={12} className={classes.modalFormScrollable}>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <InputBoxWrapper
-                id="download-filename"
-                name="download-filename"
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setNewFileName(event.target.value);
-                }}
-                label=""
-                type={"text"}
-                value={newFileName}
-                error={
-                  newFileName.length > 200 && !acceptLongName
-                    ? "Filename should be less than 200 characters long."
-                    : ""
-                }
-              />
-            </Grid>
-            <Grid item xs={12} className={classes.formFieldRow}>
-              <FormSwitchWrapper
-                value="acceptLongName"
-                id="acceptLongName"
-                name="acceptLongName"
-                checked={acceptLongName}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                  setAcceptLongName(event.target.checked);
-                  if (event.target.checked) {
-                    setNewFileName(currentItem);
-                  }
-                }}
-                label={"Use Original Name"}
-              />
-            </Grid>
-          </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+        <FormLayout withBorders={false} containerPadding={false}>
+          <InputBox
+            id="download-filename"
+            name="download-filename"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              setNewFileName(event.target.value);
+            }}
+            label=""
+            type={"text"}
+            value={newFileName}
+            error={
+              newFileName.length > 200 && !acceptLongName
+                ? "Filename should be less than 200 characters long."
+                : ""
+            }
+          />
+          <Switch
+            value="acceptLongName"
+            id="acceptLongName"
+            name="acceptLongName"
+            checked={acceptLongName}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              setAcceptLongName(event.target.checked);
+              if (event.target.checked) {
+                setNewFileName(currentItem);
+              }
+            }}
+            label={"Use Original Name"}
+          />
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"download-file"}
               type="submit"
@@ -138,7 +111,7 @@ const RenameLongFileName = ({
               label={"Download File"}
             />
           </Grid>
-        </Grid>
+        </FormLayout>
       </form>
     </ModalWrapper>
   );
diff --git a/portal-ui/src/screens/Console/Tools/KeyRevealer.tsx b/portal-ui/src/screens/Console/Tools/KeyRevealer.tsx
index 7116e77f0..edb5418fe 100644
--- a/portal-ui/src/screens/Console/Tools/KeyRevealer.tsx
+++ b/portal-ui/src/screens/Console/Tools/KeyRevealer.tsx
@@ -15,9 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useState } from "react";
-import { Box } from "@mui/material";
-import { Button, CopyIcon } from "mds";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
+import { Button, CopyIcon, InputBox, Box, breakPoints } from "mds";
 
 const KeyRevealer = ({ value }: { value: string }) => {
   const [shown, setShown] = useState<boolean>(false);
@@ -27,13 +25,13 @@ const KeyRevealer = ({ value }: { value: string }) => {
       sx={{
         display: "flex",
         alignItems: "center",
-        flexFlow: {
-          sm: "row",
-          xs: "column",
+        flexFlow: "row",
+        [`@media (max-width: ${breakPoints.sm}px)`]: {
+          flexFlow: "column",
         },
       }}
     >
-      <InputBoxWrapper
+      <InputBox
         id="inspect-dec-key"
         name="inspect-dec-key"
         placeholder=""
@@ -42,9 +40,7 @@ const KeyRevealer = ({ value }: { value: string }) => {
         onChange={() => {}}
         value={value}
         overlayIcon={<CopyIcon />}
-        extraInputProps={{
-          readOnly: true,
-        }}
+        readOnly={true}
         overlayAction={() => navigator.clipboard.writeText(value)}
       />