diff --git a/portal-ui/package.json b/portal-ui/package.json
index 7ecb3c585..651b6d876 100644
--- a/portal-ui/package.json
+++ b/portal-ui/package.json
@@ -30,7 +30,7 @@
     "kbar": "^0.1.0-beta.34",
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
-    "mds": "https://github.com/minio/mds.git#v0.0.4",
+    "mds": "https://github.com/minio/mds.git#v0.0.5",
     "minio": "^7.0.28",
     "moment": "^2.29.4",
     "react": "^18.1.0",
diff --git a/portal-ui/src/MainRouter.tsx b/portal-ui/src/MainRouter.tsx
index 23d38f756..34f84c6f6 100644
--- a/portal-ui/src/MainRouter.tsx
+++ b/portal-ui/src/MainRouter.tsx
@@ -43,24 +43,9 @@ const MainRouter = () => {
         <Route
           path="/login"
           element={
-            <div
-              style={{
-                backgroundImage: `url('images/background-wave-orig2.svg'), url('images/background.svg')`,
-                backgroundPosition: "center 250px, center center",
-                backgroundRepeat: "no-repeat",
-                backgroundSize: "2547px 980px,cover",
-                backgroundBlendMode: "color-dodge",
-                width: "100%",
-                height: "100%",
-                display: "flex",
-                color: "#fff",
-                overflow: "auto",
-              }}
-            >
-              <Suspense fallback={<LoadingComponent />}>
-                <Login />
-              </Suspense>
-            </div>
+            <Suspense fallback={<LoadingComponent />}>
+              <Login />
+            </Suspense>
           }
         />
         <Route
diff --git a/portal-ui/src/StyleHandler.tsx b/portal-ui/src/StyleHandler.tsx
index 6bb128131..20f897056 100644
--- a/portal-ui/src/StyleHandler.tsx
+++ b/portal-ui/src/StyleHandler.tsx
@@ -30,7 +30,7 @@ import { generateOverrideTheme } from "./utils/stylesUtils";
 import "./index.css";
 import { useSelector } from "react-redux";
 import { AppState } from "./store";
-import { ThemeHandler } from "mds";
+import { GlobalStyles, ThemeHandler } from "mds";
 
 declare module "@mui/styles/defaultTheme" {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -62,99 +62,26 @@ const StyleHandler = ({ children }: IStyleHandler) => {
     };
   }
 
+  // Kept for Compatibility purposes. Once mds migration is complete then this will be removed
   const GlobalCss = withStyles({
     // @global is handled by jss-plugin-global.
     "@global": {
       body: {
-        height: "100vh",
-        width: "100vw",
-        fontFamily: "Lato, sans-serif",
         ...globalBody,
       },
-      "#root": {
-        height: "100%",
-        width: "100%",
-        display: "flex",
-        flexFlow: "column",
-        alignItems: "stretch",
-      },
-      ".min-icon": {
-        width: 26,
-      },
-      ".MuiButton-endIcon": {
-        "& .min-icon": {
-          width: 16,
-        },
-      },
-      ".MuiButton-contained": {
-        fontSize: "14px",
-        textTransform: "capitalize",
-        padding: "15px 25px 15px 25px",
-        borderRadius: 3,
-      },
-      ".MuiButton-sizeSmall": {
-        padding: "4px 10px",
-        fontSize: "0.8125rem",
-      },
-      ".MuiTableCell-head": {
-        borderRadius: "3px 3px 0px 0px",
-        fontSize: 13,
-      },
-      ".MuiPaper-root": {
-        borderRadius: 3,
-      },
-      ".MuiDrawer-paperAnchorDockedLeft": {
-        borderRight: 0,
-      },
-      ".MuiDrawer-root": {
-        "& .MuiPaper-root": {
-          borderRadius: 0,
-        },
-      },
       ".rowLine": {
         ...rowColor,
       },
       ".detailsListPanel": {
         ...detailsListPanel,
       },
-      hr: {
-        borderTop: 0,
-        borderLeft: 0,
-        borderRight: 0,
-        borderColor: "#999999",
-        backgroundColor: "transparent" as const,
-      },
-      ul: {
-        paddingLeft: 20,
-        listStyle: "none" /* Remove default bullets */,
-        "& li::before:not(.Mui*)": {
-          content: '"￭"',
-          color: "#2781B0",
-          fontSize: 20,
-          display:
-            "inline-block" /* Needed to add space between the bullet and the text */,
-          width: "1em" /* Also needed for space (tweak if needed) */,
-          marginLeft: "-1em" /* Also needed for space (tweak if needed) */,
-        },
-        "& ul": {
-          listStyle: "none" /* Remove default bullets */,
-          "& li::before:not(.Mui*)": {
-            content: '"￮"',
-            color: "#2781B0",
-            fontSize: 20,
-            display:
-              "inline-block" /* Needed to add space between the bullet and the text */,
-            width: "1em" /* Also needed for space (tweak if needed) */,
-            marginLeft: "-1em" /* Also needed for space (tweak if needed) */,
-          },
-        },
-      },
     },
   })(() => null);
 
   // ThemeHandler is needed for MDS components theming. Eventually we will remove Theme Provider & use only mds themes.
   return (
     <Fragment>
+      <GlobalStyles />
       <GlobalCss />
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={thm}>
diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx
index 0e3fe7277..bccaac77e 100644
--- a/portal-ui/src/screens/LoginPage/LoginPage.tsx
+++ b/portal-ui/src/screens/LoginPage/LoginPage.tsx
@@ -14,17 +14,16 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useEffect } from "react";
+import React, { Fragment, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import {
-  Box,
   InputAdornment,
   LinearProgress,
   MenuItem,
   Select,
 } from "@mui/material";
-import { Button } from "mds";
-import { Theme, useTheme } from "@mui/material/styles";
+import { Button, LoginWrapper } from "mds";
+import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import makeStyles from "@mui/styles/makeStyles";
 import Grid from "@mui/material/Grid";
@@ -32,18 +31,8 @@ import { loginStrategyType, redirectRule } from "./types";
 import LogoutIcon from "../../icons/LogoutIcon";
 import RefreshIcon from "../../icons/RefreshIcon";
 import MainError from "../Console/Common/MainError/MainError";
-import {
-  ConsoleLogo,
-  DocumentationIcon,
-  DownloadIcon,
-  LockIcon,
-  MinIOTierIconXs,
-  OperatorLogo,
-} from "../../icons";
+import { LockIcon } from "../../icons";
 import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary";
-import CssBaseline from "@mui/material/CssBaseline";
-import { SupportMenuIcon } from "../../icons/SidebarMenus";
-import GithubIcon from "../../icons/GithubIcon";
 import clsx from "clsx";
 import Loader from "../Console/Common/Loader/Loader";
 import { AppState, useAppDispatch } from "../../store";
@@ -56,7 +45,6 @@ import {
 import { resetForm, setJwt } from "./loginSlice";
 import StrategyForm from "./StrategyForm";
 import { LoginField } from "./LoginField";
-import DirectPVLogo from "../../icons/DirectPVLogo";
 import { redirectRules } from "../../utils/sortFunctions";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -111,8 +99,8 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     separator: {
-      marginLeft: 8,
-      marginRight: 8,
+      marginLeft: 4,
+      marginRight: 4,
     },
     linkHolder: {
       marginTop: 20,
@@ -298,10 +286,6 @@ const Login = () => {
   const loadingFetchConfiguration = useSelector(
     (state: AppState) => state.login.loadingFetchConfiguration
   );
-
-  const latestMinIOVersion = useSelector(
-    (state: AppState) => state.login.latestMinIOVersion
-  );
   const loadingVersion = useSelector(
     (state: AppState) => state.login.loadingVersion
   );
@@ -358,7 +342,7 @@ const Login = () => {
         loginStrategy.redirectRules.length > 1
       ) {
         loginComponent = (
-          <React.Fragment>
+          <Fragment>
             <div className={classes.loginSsoText}>Login with SSO:</div>
             <Select
               id="ssoLogin"
@@ -385,7 +369,7 @@ const Login = () => {
                 </MenuItem>
               ))}
             </Select>
-          </React.Fragment>
+          </Fragment>
         );
       } else if (redirectItems.length === 1) {
         loginComponent = (
@@ -415,7 +399,7 @@ const Login = () => {
     }
     case loginStrategyType.serviceAccount: {
       loginComponent = (
-        <React.Fragment>
+        <Fragment>
           <form className={classes.form} noValidate onSubmit={formSubmit}>
             <Grid container spacing={2}>
               <Grid item xs={12}>
@@ -456,7 +440,7 @@ const Login = () => {
               {loginSending && <LinearProgress />}
             </Grid>
           </form>
-        </React.Fragment>
+        </Fragment>
       );
       break;
     }
@@ -466,7 +450,7 @@ const Login = () => {
           {loadingFetchConfiguration ? (
             <Loader className={classes.loadingLoginStrategy} />
           ) : (
-            <React.Fragment>
+            <Fragment>
               <div>
                 <p style={{ color: "#000", textAlign: "center" }}>
                   An error has occurred
@@ -486,162 +470,80 @@ const Login = () => {
                   label={"Retry"}
                 />
               </div>
-            </React.Fragment>
+            </Fragment>
           )}
         </div>
       );
   }
 
-  let modeLogo = <ConsoleLogo />;
+  let modeLogo: "console" | "directpv" | "operator" | "kes" | "subnet" =
+    "console";
 
   if (directPVMode) {
-    modeLogo = <DirectPVLogo />;
+    modeLogo = "directpv";
   } else if (isOperator) {
-    modeLogo = <OperatorLogo />;
+    modeLogo = "operator";
   }
 
-  const hyperLink = isOperator
-    ? "https://min.io/docs/minio/kubernetes/upstream/operations/install-deploy-manage/minio-operator-console.html?ref=con"
-    : "https://min.io/docs/minio/linux/administration/minio-console.html?ref=con";
-
-  const theme = useTheme();
   return (
-    <div className={classes.root}>
-      <CssBaseline />
+    <Fragment>
       <MainError />
-      <div className={classes.loginPage}>
-        <Grid
-          container
-          style={{
-            maxWidth: 400,
-            margin: "auto",
-          }}
-        >
-          <Grid
-            item
-            xs={12}
-            style={{
-              background:
-                "transparent linear-gradient(180deg, #FBFAFA 0%, #E4E4E4 100%) 0% 0% no-repeat padding-box",
-              padding: 40,
-              color: theme.palette.primary.main,
-            }}
-            sx={{
-              marginTop: {
-                md: 16,
-                sm: 8,
-                xs: 3,
-              },
-            }}
-          >
-            <Box className={classes.iconLogo}>{modeLogo}</Box>
-            <Box
-              style={{
-                font: "normal normal normal 20px/24px Lato",
-              }}
+      <LoginWrapper
+        logoProps={{ applicationName: modeLogo }}
+        form={loginComponent}
+        formFooter={
+          <Fragment>
+            <a
+              href="https://min.io/docs/minio/linux/index.html?ref=con"
+              target="_blank"
+              rel="noreferrer"
             >
-              Multicloud Object Storage
-            </Box>
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            style={{
-              backgroundColor: "white",
-              padding: 40,
-              color: theme.palette.primary.main,
-            }}
-          >
-            {loginComponent}
-            <Box
-              style={{
-                textAlign: "center",
-                marginTop: 20,
-              }}
+              Documentation
+            </a>
+            <span className={classes.separator}>|</span>
+            <a
+              href="https://github.com/minio/minio"
+              target="_blank"
+              rel="noreferrer"
             >
-              <a
-                href={hyperLink}
-                target="_blank"
-                rel="noreferrer"
-                style={{
-                  color: theme.colors.link,
-                  font: "normal normal normal 12px/15px Lato",
-                }}
-              >
-                Learn more about {isOperator ? "OPERATOR CONSOLE" : "CONSOLE"}
-              </a>
-              <a
-                href={hyperLink}
-                target="_blank"
-                rel="noreferrer"
-                style={{
-                  color: theme.colors.link,
-                  font: "normal normal normal 12px/15px Lato",
-                  textDecoration: "none",
-                  fontWeight: "bold",
-                  paddingLeft: 4,
-                }}
-              >
-                ➔
-              </a>
-            </Box>
-          </Grid>
-          <Grid item xs={12} className={classes.linkHolder}>
-            <div className={classes.miniLinks}>
-              <a
-                href="https://min.io/docs/minio/linux/index.html?ref=con"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <DocumentationIcon /> Documentation
-              </a>
-              <span className={classes.separator}>|</span>
-              <a
-                href="https://github.com/minio/minio"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <GithubIcon /> Github
-              </a>
-              <span className={classes.separator}>|</span>
-              <a
-                href="https://subnet.min.io/?ref=con"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <SupportMenuIcon /> Support
-              </a>
-              <span className={classes.separator}>|</span>
-              <a
-                href="https://min.io/download/?ref=con"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <DownloadIcon /> Download
-              </a>
-            </div>
-            <div className={clsx(classes.miniLinks, classes.miniLogo)}>
-              <a
-                href={"https://github.com/minio/minio/releases"}
-                target="_blank"
-                rel="noreferrer"
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  marginBottom: 20,
-                }}
-              >
-                <MinIOTierIconXs /> <b>Latest Version:</b>&nbsp;
-                {!loadingVersion && latestMinIOVersion !== "" && (
-                  <React.Fragment>{latestMinIOVersion}</React.Fragment>
-                )}
-              </a>
-            </div>
-          </Grid>
-        </Grid>
-      </div>
-    </div>
+              Github
+            </a>
+            <span className={classes.separator}>|</span>
+            <a
+              href="https://subnet.min.io/?ref=con"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Support
+            </a>
+            <span className={classes.separator}>|</span>
+            <a
+              href="https://min.io/download/?ref=con"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Download
+            </a>
+          </Fragment>
+        }
+        promoHeader={
+          <Fragment>
+            Multi-Cloud
+            <br />
+            Object Store
+          </Fragment>
+        }
+        promoInfo={
+          <Fragment>
+            MinIO offers high-performance, S3 compatible object storage. <br />
+            Native to Kubernetes, MinIO is the only object storage suite
+            available on every public cloud, every Kubernetes distribution, the
+            private cloud and the edge. MinIO is software-defined and is 100%
+            open source under GNU AGPL v3.
+          </Fragment>
+        }
+      />
+    </Fragment>
   );
 };
 
diff --git a/portal-ui/yarn.lock b/portal-ui/yarn.lock
index cd04c0a04..7a2a73f74 100644
--- a/portal-ui/yarn.lock
+++ b/portal-ui/yarn.lock
@@ -7969,9 +7969,9 @@ 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.0.4":
-  version "0.0.4"
-  resolved "https://github.com/minio/mds.git#7936311f13a24d772208812b983fc0c939db0532"
+"mds@https://github.com/minio/mds.git#v0.0.5":
+  version "0.0.5"
+  resolved "https://github.com/minio/mds.git#b9183841f178b7cc3ef320554f762c1d5bf6d7bd"
   dependencies:
     "@types/styled-components" "^5.1.25"
     styled-components "^5.3.6"