diff --git a/portal-ui/package.json b/portal-ui/package.json
index 157bfb4da..ac93d7e7b 100644
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -19,7 +19,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mds": "https://github.com/minio/mds.git#v0.6.7",
+    "mds": "https://github.com/minio/mds.git#v0.6.8",
     "react": "^18.1.0",
     "react-component-export-image": "^1.0.6",
     "react-copy-to-clipboard": "^5.0.2",
diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
index cec1a0a34..63e2bb845 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccountScreen.tsx
@@ -201,7 +201,7 @@ const AddServiceAccount = () => {
                   <Grid item xs={12} sx={{ ...modalStyleUtils.formScrollable }}>
                     <CodeMirrorWrapper
                       value={policyJSON}
-                      onBeforeChange={(editor, data, value) => {
+                      onChange={(value) => {
                         setPolicyJSON(value);
                       }}
                       editorHeight={"350px"}
diff --git a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
index f3613e510..c3def8073 100644
--- a/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
+++ b/portal-ui/src/screens/Console/Account/ServiceAccountPolicy.tsx
@@ -15,55 +15,23 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useEffect, useState } from "react";
-
-import { Button, ChangeAccessPolicyIcon } from "mds";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import Grid from "@mui/material/Grid";
-import {
-  formFieldStyles,
-  modalStyleUtils,
-  spacingUtils,
-} from "../Common/FormComponents/common/styleLibrary";
-
-import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
+import { Button, ChangeAccessPolicyIcon, Grid } from "mds";
+import { modalStyleUtils } from "../Common/FormComponents/common/styleLibrary";
 import { encodeURLString } from "../../../common/utils";
 import { setModalErrorSnackMessage } from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
-
-const styles = (theme: Theme) =>
-  createStyles({
-    codeMirrorContainer: {
-      marginBottom: 20,
-      "& label": {
-        marginBottom: ".5rem",
-      },
-      "& label + div": {
-        display: "none",
-      },
-    },
-    ...formFieldStyles,
-    ...modalStyleUtils,
-    ...spacingUtils,
-  });
-createStyles({
-  ...modalStyleUtils,
-  ...spacingUtils,
-});
+import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
+import CodeMirrorWrapper from "../Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper";
 
 interface IServiceAccountPolicyProps {
-  classes: any;
   open: boolean;
   selectedAccessKey: string | null;
   closeModalAndRefresh: () => void;
 }
 
 const ServiceAccountPolicy = ({
-  classes,
   open,
   selectedAccessKey,
   closeModalAndRefresh,
@@ -117,17 +85,17 @@ const ServiceAccountPolicy = ({
         }}
       >
         <Grid container>
-          <Grid item xs={12} className={classes.codeMirrorContainer}>
+          <Grid item xs={12}>
             <CodeMirrorWrapper
               label={`Access Key Policy`}
               value={policyDefinition}
-              onBeforeChange={(editor, data, value) => {
+              onChange={(value) => {
                 setPolicyDefinition(value);
               }}
               editorHeight={"350px"}
             />
           </Grid>
-          <Grid item xs={12} className={classes.modalButtonBar}>
+          <Grid item xs={12} sx={modalStyleUtils.modalButtonBar}>
             <Button
               id={"cancel-sa-policy"}
               type="button"
@@ -153,4 +121,4 @@ const ServiceAccountPolicy = ({
   );
 };
 
-export default withStyles(styles)(ServiceAccountPolicy);
+export default ServiceAccountPolicy;
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
index c10eb0c27..4035bd7cd 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/SetAccessPolicy.tsx
@@ -156,14 +156,14 @@ const SetAccessPolicy = ({
               </div>
             )}
             {accessPolicy === "CUSTOM" && (
-              <Grid item xs={12} className={classes.codeMirrorContainer}>
+              <Grid item xs={12}>
                 <CodeMirrorWrapper
                   label={`Write Policy`}
                   value={policyDefinition}
-                  onBeforeChange={(editor, data, value) => {
+                  onChange={(value) => {
                     setPolicyDefinition(value);
                   }}
-                  editorHeight={"350px"}
+                  editorHeight={"300px"}
                 />
               </Grid>
             )}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
index 7111278e4..4dc8093f0 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx
@@ -14,16 +14,9 @@
 // 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 from "@mui/material/Grid";
-import { Box, InputLabel, Tooltip } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import createStyles from "@mui/styles/createStyles";
-import withStyles from "@mui/styles/withStyles";
-import { Button, CopyIcon, HelpIcon } from "mds";
-import { fieldBasic } from "../common/styleLibrary";
+import React, { Fragment } from "react";
+import { Button, CodeEditor, CopyIcon } from "mds";
 import CopyToClipboard from "react-copy-to-clipboard";
-import CodeEditor from "@uiw/react-textarea-code-editor";
 import TooltipWrapper from "../../TooltipWrapper/TooltipWrapper";
 
 interface ICodeWrapper {
@@ -31,98 +24,28 @@ interface ICodeWrapper {
   label?: string;
   mode?: string;
   tooltip?: string;
-  classes: any;
-  onChange?: (editor: any, data: any, value: string) => any;
-  onBeforeChange: (editor: any, data: any, value: string) => any;
-  readOnly?: boolean;
-  editorHeight?: string;
+  onChange: (value: string) => any;
+  editorHeight?: string | number;
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    ...fieldBasic,
-  });
-
 const CodeMirrorWrapper = ({
   value,
   label = "",
   tooltip = "",
   mode = "json",
-  classes,
-  onBeforeChange,
-  readOnly = false,
-  editorHeight = "250px",
+  onChange,
+  editorHeight = 250,
 }: ICodeWrapper) => {
   return (
-    <React.Fragment>
-      <Grid item xs={12} sx={{ marginBottom: "10px" }}>
-        <InputLabel className={classes.inputLabel}>
-          <span>{label}</span>
-          {tooltip !== "" && (
-            <div className={classes.tooltipContainer}>
-              <Tooltip title={tooltip} placement="top-start">
-                <div className={classes.tooltip}>
-                  <HelpIcon />
-                </div>
-              </Tooltip>
-            </div>
-          )}
-        </InputLabel>
-      </Grid>
-
-      <Grid
-        item
-        xs={12}
-        style={{
-          maxHeight: editorHeight,
-          overflow: "auto",
-          border: "1px solid #eaeaea",
-        }}
-      >
-        <CodeEditor
-          value={value}
-          language={mode}
-          onChange={(evn) => {
-            onBeforeChange(null, null, evn.target.value);
-          }}
-          id={"code_wrapper"}
-          padding={15}
-          style={{
-            fontSize: 12,
-            backgroundColor: "#fefefe",
-            fontFamily:
-              "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
-            minHeight: editorHeight || "initial",
-            color: "#000000",
-          }}
-        />
-      </Grid>
-      <Grid
-        item
-        xs={12}
-        sx={{
-          background: "#f7f7f7",
-          border: "1px solid #eaeaea",
-          borderTop: 0,
-        }}
-      >
-        <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            padding: "2px",
-            paddingRight: "5px",
-            justifyContent: "flex-end",
-            "& button": {
-              height: "26px",
-              width: "26px",
-              padding: "2px",
-              " .min-icon": {
-                marginLeft: "0",
-              },
-            },
-          }}
-        >
+    <CodeEditor
+      value={value}
+      onChange={(value) => onChange(value)}
+      mode={mode}
+      tooltip={tooltip}
+      editorHeight={editorHeight}
+      label={label}
+      helpTools={
+        <Fragment>
           <TooltipWrapper tooltip={"Copy to Clipboard"}>
             <CopyToClipboard text={value}>
               <Button
@@ -134,10 +57,10 @@ const CodeMirrorWrapper = ({
               />
             </CopyToClipboard>
           </TooltipWrapper>
-        </Box>
-      </Grid>
-    </React.Fragment>
+        </Fragment>
+      }
+    />
   );
 };
 
-export default withStyles(styles)(CodeMirrorWrapper);
+export default CodeMirrorWrapper;
diff --git a/portal-ui/src/screens/Console/KMS/ImportKey.tsx b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
index 7c080c4c5..23339a048 100644
--- a/portal-ui/src/screens/Console/KMS/ImportKey.tsx
+++ b/portal-ui/src/screens/Console/KMS/ImportKey.tsx
@@ -126,7 +126,7 @@ const ImportKey = () => {
                   <CodeMirrorWrapper
                     label={"Set key Content"}
                     value={keyContent}
-                    onBeforeChange={(editor, data, value) => {
+                    onChange={(value) => {
                       setKeyContent(value);
                     }}
                     editorHeight={"350px"}
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
index f43a7cb62..51ccc5790 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyScreen.tsx
@@ -137,7 +137,7 @@ const AddPolicyScreen = () => {
                   <CodeMirrorWrapper
                     label={"Write Policy"}
                     value={policyDefinition}
-                    onBeforeChange={(editor, data, value) => {
+                    onChange={(value) => {
                       setPolicyDefinition(value);
                     }}
                     editorHeight={"350px"}
diff --git a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
index 879f0059c..ba963a8a2 100644
--- a/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
+++ b/portal-ui/src/screens/Console/Policies/PolicyDetails.tsx
@@ -585,10 +585,11 @@ const PolicyDetails = ({ classes }: IPolicyDetailsProps) => {
                       <Grid container>
                         <Grid item xs={12}>
                           <CodeMirrorWrapper
-                            readOnly={!canEditPolicy}
                             value={policyDefinition}
-                            onBeforeChange={(editor, data, value) => {
-                              setPolicyDefinition(value);
+                            onChange={(value) => {
+                              if (canEditPolicy) {
+                                setPolicyDefinition(value);
+                              }
                             }}
                             editorHeight={"350px"}
                           />
diff --git a/portal-ui/src/screens/Console/Speedtest/STResults.tsx b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
index 1f0bce836..8dcd9cc96 100644
--- a/portal-ui/src/screens/Console/Speedtest/STResults.tsx
+++ b/portal-ui/src/screens/Console/Speedtest/STResults.tsx
@@ -337,11 +337,7 @@ const STResults = ({ results, start }: ISTResults) => {
           <Grid container className={classes.resultsContainer}>
             {jsonView ? (
               <Fragment>
-                <CodeMirrorWrapper
-                  value={finalResJSON}
-                  readOnly
-                  onBeforeChange={() => {}}
-                />
+                <CodeMirrorWrapper value={finalResJSON} onChange={() => {}} />
               </Fragment>
             ) : (
               <Fragment>
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
index 22adbb8d3..f3d760134 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountScreen.tsx
@@ -297,7 +297,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
                           <CodeMirrorWrapper
                             label={"Policy"}
                             value={policyJSON}
-                            onBeforeChange={(editor, data, value) => {
+                            onChange={(value) => {
                               setPolicyJSON(value);
                             }}
                           />
diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
index 93be58472..f5f46786c 100644
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -2580,9 +2580,9 @@
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
 "@types/node@*":
-  version "20.3.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.1.tgz#e8a83f1aa8b649377bb1fb5d7bac5cb90e784dfe"
-  integrity sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==
+  version "20.3.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.3.2.tgz#fa6a90f2600e052a03c18b8cb3fd83dd4e599898"
+  integrity sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==
 
 "@types/node@18.16.0":
   version "18.16.0"
@@ -4873,7 +4873,7 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-gpu@^5.0.29:
+detect-gpu@^5.0.30:
   version "5.0.30"
   resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-5.0.30.tgz#87278708be4be1f79d2766eb4d6dc04c4d530fde"
   integrity sha512-TfoGbAsy3uRz82OklH456eYS5eO+9BoqzKRZNpwFcW73ZHN8EvNmlSSrEU2XhLqIuBE+U9GtErl74kG4qTSEYg==
@@ -5090,9 +5090,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.431:
-  version "1.4.440"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz#d3b1eeb36b717eb479a240c0406ac1fa67901762"
-  integrity sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==
+  version "1.4.442"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.442.tgz#455f4c5bd6ae73afb634dcffee6f356c26c8e294"
+  integrity sha512-RkrZF//Ya+0aJq2NM3OdisNh5ZodZq1rdXOS96G8DdDgpDKqKE81yTbbQ3F/4CKm1JBPsGu1Lp/akkna2xO06Q==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -8238,13 +8238,13 @@ mdn-data@2.0.4:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
   integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
 
-"mds@https://github.com/minio/mds.git#v0.6.7":
-  version "0.6.7"
-  resolved "https://github.com/minio/mds.git#e1e8f8888fd78c21be6efef3aa9ed3e1e454fe1d"
+"mds@https://github.com/minio/mds.git#v0.6.8":
+  version "0.6.8"
+  resolved "https://github.com/minio/mds.git#ca84c1d329e4bccd9010d454c86ba6f8158ba7c8"
   dependencies:
     "@types/styled-components" "^5.1.25"
     "@uiw/react-textarea-code-editor" "^2.1.7"
-    detect-gpu "^5.0.29"
+    detect-gpu "^5.0.30"
     react-virtualized "^9.22.5"
     styled-components "^5.3.11"
 
@@ -11503,9 +11503,9 @@ terser-webpack-plugin@^5.2.5, terser-webpack-plugin@^5.3.7:
     terser "^5.16.8"
 
 terser@^5.0.0, terser@^5.10.0, terser@^5.16.8:
-  version "5.18.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.1.tgz#6d8642508ae9fb7b48768e48f16d675c89a78460"
-  integrity sha512-j1n0Ao919h/Ai5r43VAnfV/7azUYW43GPxK7qSATzrsERfW7+y2QW9Cp9ufnRF5CQUWbnLSo7UJokSWCqg4tsQ==
+  version "5.18.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.2.tgz#ff3072a0faf21ffd38f99acc9a0ddf7b5f07b948"
+  integrity sha512-Ah19JS86ypbJzTzvUCX7KOsEIhDaRONungA4aYBjEP3JZRf4ocuDzTg4QWZnPn9DEMiMYGJPiSOy7aykoCc70w==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -11966,9 +11966,9 @@ tslib@^1.8.1:
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
 tslib@^2.0.3, tslib@^2.4.0:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
-  integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.0.tgz#b295854684dbda164e181d259a22cd779dcd7bc3"
+  integrity sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==
 
 tsutils@^3.21.0:
   version "3.21.0"
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index 25186ecb6..000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,7 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"mds@https://github.com/bexsoft/mds#rollup-updates":
-  version "0.0.1"
-  resolved "https://github.com/bexsoft/mds#a6e1c84ba257c5c18a985943b8c39648f548ab3b"