diff --git a/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx b/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx
index da6af467b..bfc0bedf7 100644
--- a/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Account/AddServiceAccountHelpBox.tsx
@@ -14,8 +14,8 @@
 // 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 { Box } from "@mui/material";
 import {
+  Box,
   HelpIconFilled,
   IAMPoliciesIcon,
   PasswordKeyIcon,
@@ -58,9 +58,7 @@ const AddServiceAccountHelpBox = () => {
         display: "flex",
         flexFlow: "column",
         padding: "20px",
-        marginTop: {
-          xs: "0px",
-        },
+        marginTop: 0,
       }}
     >
       <Box
diff --git a/portal-ui/src/screens/Console/CommandBar.tsx b/portal-ui/src/screens/Console/CommandBar.tsx
index a93327431..ee943011a 100644
--- a/portal-ui/src/screens/Console/CommandBar.tsx
+++ b/portal-ui/src/screens/Console/CommandBar.tsx
@@ -33,8 +33,8 @@ import { Action } from "kbar/lib/types";
 import { Theme } from "@mui/material/styles";
 import makeStyles from "@mui/styles/makeStyles";
 import { routesAsKbarActions } from "./kbar-actions";
-import { Box } from "@mui/material";
-import { MenuExpandedIcon } from "mds";
+
+import { Box, MenuExpandedIcon } from "mds";
 import { useSelector } from "react-redux";
 import { selFeatures } from "./consoleSlice";
 import { Bucket } from "../../api/consoleApi";
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
index 625ac7dcc..4ef0c6d2e 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
+++ b/portal-ui/src/screens/Console/Common/FormComponents/DateRangeSelector/DateRangeSelector.tsx
@@ -15,9 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Button, OpenListIcon, SyncIcon, Grid } from "mds";
+import { Button, OpenListIcon, SyncIcon, Grid, Box, breakPoints } from "mds";
 import { DateTime } from "luxon";
-import { Box } from "@mui/material";
+
 import ScheduleIcon from "@mui/icons-material/Schedule";
 import WatchLaterIcon from "@mui/icons-material/WatchLater";
 import DateTimePickerWrapper from "../DateTimePickerWrapper/DateTimePickerWrapper";
@@ -100,18 +100,16 @@ const DateRangeSelector = ({
       <Box
         sx={{
           display: "grid",
-          height: {
-            md: "40px",
-            xs: "auto",
-          },
+          height: 40,
           alignItems: "center",
-          gridTemplateColumns: {
-            md: "auto 2fr auto",
-            sm: "1fr",
+          gridTemplateColumns: "auto 2fr auto",
+          padding: 0,
+          [`@media (max-width: ${breakPoints.sm}px)`]: {
+            padding: 5,
           },
-          padding: {
-            md: "0",
-            xs: " 5px",
+          [`@media (max-width: ${breakPoints.md}px)`]: {
+            gridTemplateColumns: "1fr",
+            height: "auto",
           },
           gap: "5px",
         }}
@@ -120,34 +118,29 @@ const DateRangeSelector = ({
           {label}
         </Box>
         <Box
+          withBorders
+          customBorderPadding={"0px"}
           sx={{
             display: "grid",
-            height: {
-              md: "40px",
-              xs: "auto",
-            },
-            border: {
-              md: "1px solid #eaeaea",
-            },
+            height: 40,
             alignItems: "center",
-            gridTemplateColumns: {
-              md: "1fr 1fr",
-              sm: "1fr",
-            },
+            gridTemplateColumns: "1fr 1fr",
             gap: "8px",
             paddingLeft: "8px",
             paddingRight: "8px",
+            [`@media (max-width: ${breakPoints.md}px)`]: {
+              height: "auto",
+              gridTemplateColumns: "1fr",
+            },
           }}
         >
           <Box
             sx={{
               display: "grid",
-              height: "30px",
+              height: 30,
               alignItems: "center",
-              gridTemplateColumns: {
-                xs: "12px auto 1fr",
-              },
-              gap: "5px",
+              gridTemplateColumns: "12px auto 1fr",
+              gap: 5,
             }}
           >
             <Box
@@ -187,12 +180,10 @@ const DateRangeSelector = ({
           <Box
             sx={{
               display: "grid",
-              height: "30px",
+              height: 30,
               alignItems: "center",
-              gridTemplateColumns: {
-                xs: "12px auto 1fr",
-              },
-              gap: "5px",
+              gridTemplateColumns: "12px auto 1fr",
+              gap: 5,
             }}
           >
             <Box
diff --git a/portal-ui/src/screens/Console/Common/MainError/MainError.tsx b/portal-ui/src/screens/Console/Common/MainError/MainError.tsx
index 94f8f6909..a3ac64747 100644
--- a/portal-ui/src/screens/Console/Common/MainError/MainError.tsx
+++ b/portal-ui/src/screens/Console/Common/MainError/MainError.tsx
@@ -18,8 +18,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useSelector } from "react-redux";
 import get from "lodash/get";
 import { AppState, useAppDispatch } from "../../../../store";
-import { Box } from "@mui/material";
-import { AlertCloseIcon } from "mds";
+
+import { AlertCloseIcon, Box, breakPoints } from "mds";
 import { Portal } from "@mui/base";
 import {
   setErrorSnackMessage,
@@ -103,9 +103,9 @@ const MainError = ({ isModal = false }: IMainErrorProps) => {
           "& .message-text": {
             flex: 2,
             fontSize: "14px",
-            textAlign: {
-              md: "center",
-              xs: "left",
+            textAlign: "center",
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              textAlign: "left",
             },
           },
 
@@ -116,9 +116,9 @@ const MainError = ({ isModal = false }: IMainErrorProps) => {
             alignItems: "center",
             justifyContent: "center",
             height: "100%",
-            marginLeft: {
-              sm: "0px",
-              xs: "10px",
+            marginLeft: 0,
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              marginLeft: 10,
             },
 
             "& .close-btn": {
diff --git a/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx b/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx
index 009cd7f70..7c9efb45f 100644
--- a/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx
+++ b/portal-ui/src/screens/Console/Configurations/SiteReplication/LookupStatus/Utils.tsx
@@ -1,6 +1,6 @@
-import { Box } from "@mui/material";
 import React from "react";
 import { StatsResponseType } from "../SiteReplicationStatus";
+import { Box } from "mds";
 
 export function syncStatus(mismatch: boolean, set: boolean): string | boolean {
   if (!set) {
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
index 97d5d3b2b..0380b3d24 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/TierTypeSelector.tsx
@@ -16,11 +16,19 @@
 
 import React, { Fragment, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Box } from "@mui/material";
+
 import { tierTypes } from "./utils";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import TierTypeCard from "./TierTypeCard";
-import { BackLink, FormLayout, HelpBox, PageLayout, TiersIcon } from "mds";
+import {
+  BackLink,
+  Box,
+  breakPoints,
+  FormLayout,
+  HelpBox,
+  PageLayout,
+  TiersIcon,
+} from "mds";
 import PageHeaderWrapper from "../../Common/PageHeaderWrapper/PageHeaderWrapper";
 import HelpMenu from "../../HelpMenu";
 import { setHelpName } from "../../../../systemSlice";
@@ -116,11 +124,9 @@ const TierTypeSelector = () => {
               margin: "15px",
               display: "grid",
               gridGap: "20px",
-              gridTemplateColumns: {
-                xs: "repeat(1, 1fr)",
-                sm: "repeat(1, 1fr)",
-                md: "repeat(2, 1fr)",
-                lg: "repeat(2, 1fr)",
+              gridTemplateColumns: "repeat(2, 1fr)",
+              [`@media (max-width: ${breakPoints.md}px)`]: {
+                gridTemplateColumns: "repeat(1, 1fr)",
               },
             }}
           >
diff --git a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx
index 3d0f62555..b4205f4cf 100644
--- a/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx
+++ b/portal-ui/src/screens/Console/Dashboard/Prometheus/Widgets/ExpandGraphLink.tsx
@@ -15,8 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
+import { Box } from "mds";
 import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
-import { Box } from "@mui/material";
+
 import { IDashboardPanel } from "../types";
 
 import { openZoomPage } from "../../dashboardSlice";
diff --git a/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx b/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx
index 2851c835e..16d7e88bb 100644
--- a/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Groups/AddGroupHelpBox.tsx
@@ -14,8 +14,8 @@
 // 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 { Box } from "@mui/material";
-import { GroupsIcon, HelpIconFilled, IAMPoliciesIcon } from "mds";
+
+import { Box, GroupsIcon, HelpIconFilled, IAMPoliciesIcon } from "mds";
 
 const FeatureItem = ({
   icon,
@@ -53,9 +53,7 @@ const AddGroupHelpBox = () => {
         display: "flex",
         flexFlow: "column",
         padding: "20px",
-        marginTop: {
-          xs: "0px",
-        },
+        marginTop: 0,
       }}
     >
       <Box
diff --git a/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx b/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
index c7a79bc5f..30d03158e 100644
--- a/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
+++ b/portal-ui/src/screens/Console/License/LicenseConsentModal.tsx
@@ -16,8 +16,8 @@
 
 import React from "react";
 import ModalWrapper from "../Common/ModalWrapper/ModalWrapper";
-import { Box } from "@mui/material";
-import { AGPLV3DarkLogo, Button } from "mds";
+
+import { AGPLV3DarkLogo, Box, Button } from "mds";
 import { setLicenseConsent } from "./utils";
 import LicenseLink from "./LicenseLink";
 import LicenseFAQ from "./LicenseFAQ";
diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx
index c4c2c59ba..4c9d7eeb0 100644
--- a/portal-ui/src/screens/Console/License/LicensePlans.tsx
+++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx
@@ -19,6 +19,8 @@ import clsx from "clsx";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import {
   AGPLV3Logo,
+  Box,
+  breakPoints,
   Button,
   ConsoleEnterprise,
   ConsoleStandard,
@@ -26,7 +28,7 @@ import {
 } from "mds";
 import { useTheme } from "@mui/material/styles";
 import { SubnetInfo } from "./types";
-import { Box } from "@mui/material";
+
 import useMediaQuery from "@mui/material/useMediaQuery";
 import {
   COMMUNITY_PLAN_FEATURES,
@@ -365,9 +367,10 @@ const LicensePlans = ({ licenseInfo }: IRegisterStatus) => {
 
             margin: "0 1.5rem 0 1.5rem",
 
-            gridTemplateColumns: {
-              sm: "1fr 1fr 1fr 1fr",
-              xs: "1fr 1fr 1fr",
+            gridTemplateColumns: "1fr 1fr 1fr 1fr",
+
+            [`@media (max-width: ${breakPoints.sm}px)`]: {
+              gridTemplateColumns: "1fr 1fr 1fr",
             },
 
             "&.paid-plans-only": {
diff --git a/portal-ui/src/screens/Console/License/utils.tsx b/portal-ui/src/screens/Console/License/utils.tsx
index 948a7f60e..8ee0f1c8a 100644
--- a/portal-ui/src/screens/Console/License/utils.tsx
+++ b/portal-ui/src/screens/Console/License/utils.tsx
@@ -14,11 +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 { Box } from "@mui/material";
 import LicenseLink from "./LicenseLink";
 import { openFAQModal } from "./licenseSlice";
 import store from "../../../store";
 import FAQModal from "./FAQModal";
+import { Box } from "mds";
 
 export const LICENSE_PLANS = {
   COMMUNITY: "community",
diff --git a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx
index 3db769775..a5037de0a 100644
--- a/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx
+++ b/portal-ui/src/screens/Console/Logs/ErrorLogs/LogLine.tsx
@@ -18,10 +18,9 @@ import { DateTime } from "luxon";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import Collapse from "@mui/material/Collapse";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { LogMessage } from "../types";
-import { BoxArrowDown, BoxArrowUp, WarnFilledIcon } from "mds";
+import { Box, BoxArrowDown, BoxArrowUp, WarnFilledIcon } from "mds";
 
 import getByKey from "lodash/get";
 
diff --git a/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx b/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx
index 2dbfc5bd9..043c469f3 100644
--- a/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Policies/AddPolicyHelpBox.tsx
@@ -14,8 +14,8 @@
 // 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 { Box } from "@mui/material";
-import { HelpIconFilled, IAMPoliciesIcon } from "mds";
+
+import { Box, HelpIconFilled, IAMPoliciesIcon } from "mds";
 
 const FeatureItem = ({
   icon,
diff --git a/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx b/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx
index c42c3c268..1b75b4e64 100644
--- a/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserHelpBox.tsx
@@ -14,8 +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 { Box } from "@mui/material";
+
 import {
+  Box,
   ChangeAccessPolicyIcon,
   GroupsIcon,
   HelpIconFilled,
@@ -58,9 +59,7 @@ const AddUserHelpBox = () => {
         display: "flex",
         flexFlow: "column",
         padding: "20px",
-        marginTop: {
-          xs: "0px",
-        },
+        marginTop: 0,
       }}
     >
       <Box
diff --git a/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx b/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx
index 2383f1b58..bc04c1be8 100644
--- a/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx
+++ b/portal-ui/src/screens/Console/Users/AddUserServiceAccountHelpBox.tsx
@@ -14,8 +14,8 @@
 // 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 { Box } from "@mui/material";
 import {
+  Box,
   HelpIconFilled,
   IAMPoliciesIcon,
   PasswordKeyIcon,
@@ -58,9 +58,7 @@ const AddUserServiceAccountHelpBox = () => {
         display: "flex",
         flexFlow: "column",
         padding: "20px",
-        marginTop: {
-          xs: "0px",
-        },
+        marginTop: 0,
       }}
     >
       <Box