diff --git a/web/package.json b/web/package.json
index af7b0cf8852..e235758abbb 100644
--- a/web/package.json
+++ b/web/package.json
@@ -79,9 +79,9 @@
     "@emotion/sheet": "^1.4.0",
     "@fluentui/keyboard-key": "^0.4.23",
     "@fortawesome/fontawesome-free": "latest",
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
-    "@mui/x-date-pickers": "^8.28.3",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.2",
     "@nozbe/microfuzz": "^1.0.0",
     "@projectstorm/react-diagrams": "^7.0.4",
     "@simonwep/pickr": "^1.9.1",
diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx
index 85d7b2344a2..23ebc8f1f52 100644
--- a/web/pgadmin/about/static/js/AboutComponent.jsx
+++ b/web/pgadmin/about/static/js/AboutComponent.jsx
@@ -122,11 +122,22 @@ export default function AboutComponent() {
         </Grid>
       }
       { aboutData.settings &&
-        <Box flexGrow="1" display="flex" flexDirection="column" minHeight="0">
+        <Box
+          sx={{
+            flexGrow: '1',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '0'
+          }}>
           <Box>
             <InputLabel style={{fontWeight: 'bold'}}>{gettext('pgAdmin Server Configuration')}</InputLabel>
           </Box>
-          <Box flexGrow="1" paddingTop="1px" minHeight="0">
+          <Box
+            sx={{
+              flexGrow: '1',
+              paddingTop: '1px',
+              minHeight: '0'
+            }}>
             <InputSQL value={aboutData.settings}
               controlProps={{
                 readonly: true,
diff --git a/web/pgadmin/browser/static/js/keyboard.js b/web/pgadmin/browser/static/js/keyboard.js
index ea64304d7cc..d73c1d5d010 100644
--- a/web/pgadmin/browser/static/js/keyboard.js
+++ b/web/pgadmin/browser/static/js/keyboard.js
@@ -35,10 +35,10 @@ _.extend(pgBrowser.keyboardNavigation, {
       hotkeys.unbind();
       if (prefStore.version > 0) {
         this.keyboardShortcut = {
-          ...(prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'file_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_file')?.value)},
-          ...(prefStore.getPreferences('browser', 'main_menu_object')?.value) && {'object_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_object')?.value)},
-          ...(prefStore.getPreferences('browser', 'main_menu_tools')?.value) && {'tools_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_tools')?.value)},
-          ...(prefStore.getPreferences('browser', 'main_menu_help')?.value) && {'help_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_help')?.value)},
+          ...((prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'file_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_file')?.value)}),
+          ...((prefStore.getPreferences('browser', 'main_menu_object')?.value) && {'object_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_object')?.value)}),
+          ...((prefStore.getPreferences('browser', 'main_menu_tools')?.value) && {'tools_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_tools')?.value)}),
+          ...((prefStore.getPreferences('browser', 'main_menu_help')?.value) && {'help_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'main_menu_help')?.value)}),
           'left_tree_shortcut': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'browser_tree')?.value),
           'tabbed_panel_backward': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'tabbed_panel_backward')?.value),
           'tabbed_panel_forward': commonUtils.parseShortcutValue(prefStore.getPreferences('browser', 'tabbed_panel_forward')?.value),
@@ -56,11 +56,11 @@ _.extend(pgBrowser.keyboardNavigation, {
 
         };
         this.shortcutMethods = {
-          ...(prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'bindMainMenu': {
+          ...((prefStore.getPreferences('browser', 'main_menu_file')?.value) && {'bindMainMenu': {
             'shortcuts': [this.keyboardShortcut.file_shortcut,
               this.keyboardShortcut.object_shortcut, this.keyboardShortcut.tools_shortcut,
               this.keyboardShortcut.help_shortcut],
-          }}, // Main menu
+          }}), // Main menu
           'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward, this.keyboardShortcut.close_tab_panel]}, // Main window panels
           'bindLeftTree': {'shortcuts': this.keyboardShortcut.left_tree_shortcut}, // Main menu,
           'bindSubMenuQueryTool': {'shortcuts': this.keyboardShortcut.sub_menu_query_tool}, // Sub menu - Open Query Tool,
diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index de673617413..835b273eaec 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -948,41 +948,48 @@ function Dashboard({
       label: gettext('Table based logs'),
     };
   const CustomLogHeader = () => {
-    return ( <Box className='Dashboard-cardHeader' display="flex" flexDirection="row">
-      <FormInputToggle
-        label={gettext('Log Format')}
-        className='Dashboard-searchInput'
-        value={logFormat}
-        onChange={(val) => {
-          setLogFormat(val);
-        }}
-        options={logConfigFormat}
-        controlProps={CustomLogHeaderLabel}
-        labelGridBasis={3}
-        controlGridBasis={3}
-      ></FormInputToggle>
-      <FormInputSwitch
-        label={gettext('Tabular format?')}
-        labelPlacement="end"
-        className='Dashboard-searchInput'
-        value={logCol}
-        onChange={(e) => {
-          setDashData([]);
-          setLogCol(e.target.checked);
-        }}
-        controlProps={CustomLogHeaderLabel}
-        labelGridBasis={3}
-        controlGridBasis={3}
-      ></FormInputSwitch>
-      <div className='Dashboard-download'><PgIconButton
-        size="xs"
-        className='Dashboard-downloadButton'
-        icon={<GetAppRoundedIcon />}
-        onClick={downloadServerLogs}
-        aria-label="Download"
-        title={gettext('Download logs ')}
-      ></PgIconButton></div>
-    </Box>);
+    return (
+      <Box
+        className='Dashboard-cardHeader'
+        sx={{
+          display: 'flex',
+          flexDirection: 'row'
+        }}>
+        <FormInputToggle
+          label={gettext('Log Format')}
+          className='Dashboard-searchInput'
+          value={logFormat}
+          onChange={(val) => {
+            setLogFormat(val);
+          }}
+          options={logConfigFormat}
+          controlProps={CustomLogHeaderLabel}
+          labelGridBasis={3}
+          controlGridBasis={3}
+        ></FormInputToggle>
+        <FormInputSwitch
+          label={gettext('Tabular format?')}
+          labelPlacement="end"
+          className='Dashboard-searchInput'
+          value={logCol}
+          onChange={(e) => {
+            setDashData([]);
+            setLogCol(e.target.checked);
+          }}
+          controlProps={CustomLogHeaderLabel}
+          labelGridBasis={3}
+          controlGridBasis={3}
+        ></FormInputSwitch>
+        <div className='Dashboard-download'><PgIconButton
+          size="xs"
+          className='Dashboard-downloadButton'
+          icon={<GetAppRoundedIcon />}
+          onClick={downloadServerLogs}
+          aria-label="Download"
+          title={gettext('Download logs ')}
+        ></PgIconButton></div>
+      </Box>
+    );
   };
 
 
@@ -1021,7 +1028,7 @@ function Dashboard({
   };
 
   return (
-    (<Root>
+    <Root>
       {sid && serverConnected ? (
         <Box className='Dashboard-dashboardPanel'>
           <Box className='Dashboard-panelContent'>
@@ -1133,7 +1140,12 @@ function Dashboard({
               </TabPanel>
               {/* System Statistics */}
               <TabPanel value={mainTabVal} index={4} classNameRoot='Dashboard-tabPanel systemStorage'>
-                <Box height="100%" display="flex" flexDirection="column">
+                <Box
+                  sx={{
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column'
+                  }}>
                   {ssMsg === 'installed' && did === ldid ?
                     <ErrorBoundary>
                       <Box>
@@ -1203,7 +1215,7 @@ function Dashboard({
           </Box>
         </Box>
       ) : showDefaultContents() }
-    </Root>)
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx
index 32369c03d95..8803996d4bc 100644
--- a/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx
+++ b/web/pgadmin/dashboard/static/js/Replication/LogReplication.jsx
@@ -165,7 +165,12 @@ export default function LogReplication({treeNodeInfo, pageVisible}) {
   }, [pageVisible ]);
 
   return (
-    <Box height="100%" display="flex" flexDirection="column">
+    <Box
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
       <SectionContainer
         titleExtras={<RefreshButton onClick={()=>{
           getReplicationData('replication_stats', setReplicationStats);
diff --git a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
index 07b721769da..c163fb64730 100644
--- a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
+++ b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
@@ -404,7 +404,12 @@ export default function PGDReplication({preferences, treeNodeInfo, pageVisible,
   const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagBytes, theme.name]);
 
   return (
-    <Box height="100%" display="flex" flexDirection="column">
+    <Box
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
       <Grid container spacing={0.5}>
         <Grid size={{ md: 6 }}>
           <ChartContainer id='sessions-graph' title={gettext('Replication lag (Time)')}
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
index 5f89b7f01e5..c7adc0dd4e8 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/CpuDetails.jsx
@@ -183,7 +183,12 @@ export default function CpuDetails({preferences, sid, did, pageVisible, enablePo
   }, enablePoll ? pollDelay : -1);
 
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }}>
       <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
       {chartDrawnOnce &&
         <CPUWrapper
@@ -217,7 +222,12 @@ export function CPUWrapper(props) {
     lineBorderWidth: props.lineBorderWidth,
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }}>
       <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
         <Grid size={{ md: 6 }}>
           <ChartContainer id='cu-graph' title={gettext('CPU usage')} datasets={props.cpuUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
@@ -230,7 +240,11 @@ export function CPUWrapper(props) {
           </ChartContainer>
         </Grid>
       </Grid>
-      <Box flexGrow={1} minHeight={0}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          minHeight: 0
+        }}>
         <SectionContainer title={gettext('Process CPU usage')}>
           <PgTable
             columns={props.tableHeader}
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
index a5e10c8910e..6d62f734df4 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
@@ -188,7 +188,12 @@ export default function Memory({preferences, sid, did, pageVisible, enablePoll=t
       });
   }, enablePoll ? pollDelay : -1);
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }}>
       <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
       {chartDrawnOnce &&
         <MemoryWrapper
@@ -224,7 +229,12 @@ export function MemoryWrapper(props) {
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
 
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }}>
       <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
         <Grid size={{ md: 6 }}>
           <ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
@@ -239,7 +249,11 @@ export function MemoryWrapper(props) {
           </ChartContainer>
         </Grid>
       </Grid>
-      <Box flexGrow={1} minHeight={0}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          minHeight: 0
+        }}>
         <SectionContainer title={gettext('Process memory usage')}>
           <PgTable
             columns={props.tableHeader}
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
index ee0cbea18d8..a47132e8a0d 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
@@ -500,7 +500,9 @@ export function StorageWrapper(props) {
       </Grid>
       {Object.keys(props.ioInfo).map((drive) => (
         <SectionContainer key={drive} title={drive} style={{minHeight: 'unset', height: 'auto', marginBottom: '0.5px'}}>
-          <Grid container spacing={0.5} p={0.5}>
+          <Grid container spacing={0.5} sx={{
+            p: 0.5
+          }}>
             {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => (
               <Grid key={`${type}-${innerKeyIndex}`} size={{ md: 4, sm: 6 }}>
                 <ChartContainer id={`io-graph-${type}`} title={getChartContainerTitle(type)} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
diff --git a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
index d9ead7cf0af..3ddd5e755a0 100644
--- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
@@ -40,7 +40,11 @@ export default function ChartContainer(props) {
 
   return (
     <StyledCard elevation={0} data-testid="chart-container">
-      <CardHeader title={<Box display="flex" justifyContent="space-between">
+      <CardHeader title={<Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}>
         <div id={props.id}>{props.title}</div>
         <div className='ChartContainer-chartLegend'>
           <div style={{display: 'flex', flexWrap: 'wrap'}}>
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
index 0df81463c99..a9395e734c8 100644
--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 import { Resizable } from 're-resizable';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   ...theme.mixins.panelBorder.all,
   display: 'flex',
   flexDirection: 'column',
@@ -48,7 +48,13 @@ export default function SectionContainer({title, titleExtras, children, style, r
           {titleExtras}
         </div>
       </Box>
-      <Box height="100%" display="flex" flexDirection="column" minHeight={0}>
+      <Box
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          minHeight: 0
+        }}>
         {children}
       </Box>
     </>
diff --git a/web/pgadmin/llm/static/js/AIReport.jsx b/web/pgadmin/llm/static/js/AIReport.jsx
index 6b3ad23feee..a5498427901 100644
--- a/web/pgadmin/llm/static/js/AIReport.jsx
+++ b/web/pgadmin/llm/static/js/AIReport.jsx
@@ -48,7 +48,7 @@ marked.setOptions({
 });
 
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
diff --git a/web/pgadmin/llm/static/js/SecurityReport.jsx b/web/pgadmin/llm/static/js/SecurityReport.jsx
index ff8033bb9d1..d557b66b296 100644
--- a/web/pgadmin/llm/static/js/SecurityReport.jsx
+++ b/web/pgadmin/llm/static/js/SecurityReport.jsx
@@ -30,7 +30,7 @@ marked.setOptions({
 });
 
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
diff --git a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
index e43937c5b84..281b3cbd296 100644
--- a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   borderRadius: theme.shape.borderRadius,
   padding: '0.25rem 1rem 1rem',
   minWidth: '325px',
@@ -46,13 +46,24 @@ const AUTO_HIDE_DURATION = 10000;  // In milliseconds
 function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true, dataTestSuffix=''}) {
   return (
     <StyledBox className={(success ? 'BgProcessNotify-containerSuccess' : 'BgProcessNotify-containerError')} data-test={'process-popup-' + dataTestSuffix}>
-      <Box display="flex" justifyContent="space-between" className='BgProcessNotify-containerHeader'>
-        <Box marginRight={'1rem'}>{title}</Box>
+      <Box
+        className='BgProcessNotify-containerHeader'
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}>
+        <Box sx={{
+          marginRight: '1rem'
+        }}>{title}</Box>
         <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={onClose} title={'Close'} className={success ? 'BgProcessNotify-iconSuccess' : 'BgProcessNotify-iconError'} />
       </Box>
       <Box className='BgProcessNotify-containerBody'>
         <Box>{desc}</Box>
-        <Box marginTop={'1rem'} display="flex">
+        <Box
+          sx={{
+            marginTop: '1rem',
+            display: 'flex'
+          }}>
           <DefaultButton startIcon={<DescriptionOutlinedIcon />} onClick={()=>{
             onViewProcess();
             onClose();
diff --git a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
index 42b38dd2968..ed4d95c1b23 100644
--- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
@@ -24,7 +24,7 @@ import pgAdmin from 'sources/pgadmin';
 import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   backgroundColor: theme.palette.background.default,
   height: '100%',
   display: 'flex',
@@ -161,7 +161,13 @@ export default function ProcessDetails({data}) {
         <Box>{gettext('Running query')}:</Box>
         <Box data-test="process-cmd" className='ProcessDetails-cmd'>{data.details.query}</Box>
       </>}
-      <Box display="flex" justifyContent="space-between" alignItems="center" flexWrap="wrap">
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flexWrap: 'wrap'
+        }}>
         <Box><span><AccessTimeRoundedIcon /> {gettext('Start time')}: {new Date(data.stime).toString()}</span></Box>
         <Box>
           {pgAdmin.server_mode == 'True' && data.current_storage_dir &&
@@ -174,7 +180,7 @@ export default function ProcessDetails({data}) {
           </DefaultButton>
         </Box>
       </Box>
-      <Box flexGrow={1} className='ProcessDetails-logs'>
+      <Box sx={{flexGrow: 1}} className='ProcessDetails-logs'>
         {logs == null && <span data-test="loading-logs">{gettext('Loading process logs...')}</span>}
         {logs?.length == 0 && gettext('No logs available.')}
         {logs?.map((log, i)=>{
@@ -186,7 +192,11 @@ export default function ProcessDetails({data}) {
           }} key={id} className={errRe.test(log) ? 'ProcessDetails-logErr' : ''}>{log}</div>;
         })}
       </Box>
-      <Box display="flex" alignItems="center">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center'
+        }}>
         <NotifierMessage type={notifyType} message={notifyText} closable={false} textCenter={true} style={{flexGrow: 1, marginRight: '8px'}} />
         <Box>{gettext('Execution time')}: {timeTaken} {gettext('seconds')}</Box>
       </Box>
diff --git a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
index 85cfaedfe15..488b43b1230 100644
--- a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
+++ b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
@@ -425,10 +425,14 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
           </Box>
           {cloudProvider == CLOUD_PROVIDERS.AWS && <AwsCredentials cloudProvider={cloudProvider} nodeInfo={nodeInfo} nodeData={nodeData} setCloudDBCred={setCloudDBCred}/>}
           { cloudProvider == CLOUD_PROVIDERS.AZURE &&
-            <Box flexGrow={1}>
+            <Box sx={{
+              flexGrow: 1
+            }}>
               <AzureCredentials cloudProvider={cloudProvider} setAzureCredData={setAzureCredData}/>
             </Box>}
-          <Box flexGrow={1}>
+          <Box sx={{
+            flexGrow: 1
+          }}>
             {cloudProvider == CLOUD_PROVIDERS.GOOGLE && <GoogleCredentials cloudProvider={cloudProvider} setGoogleCredData={setGoogleCredData}/>}
           </Box>
           <FormFooterMessage type={errMsg[0]} message={errMsg[1]} onClose={onErrClose} />
diff --git a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
index 818c6b54358..4ca25b14e47 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
@@ -37,7 +37,7 @@ import ErrorBoundary from '../../../../../static/js/helpers/ErrorBoundary';
 import { MY_STORAGE } from './FileManagerConstants';
 import _ from 'lodash';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   backgroundColor: theme.palette.background.default,
   '& .FileManager-toolbar': {
     padding: '4px',
@@ -452,8 +452,12 @@ export class FileManagerUtils {
 function ConfirmFile({text, onYes, onNo}) {
   return (
     <Box className='FileManager-replaceOverlay'>
-      <Box margin={'8px'} className='FileManager-replaceDialog'>
-        <Box padding={'1rem'}>{text}{}</Box>
+      <Box className='FileManager-replaceDialog' sx={{
+        margin: '8px'
+      }}>
+        <Box sx={{
+          padding: '1rem'
+        }}>{text}{}</Box>
         <Box className='FileManager-footer'>
           <DefaultButton data-test="no" startIcon={<CloseIcon />} onClick={onNo} >{gettext('No')}</DefaultButton>
           <PrimaryButton data-test="yes" className='FileManager-margin' startIcon={<CheckRoundedIcon />}
@@ -771,7 +775,14 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
   return (
     <ErrorBoundary>
       <StyledBox display="flex" flexDirection="column" height="100%">
-        <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
+        <Box
+          sx={{
+            flexGrow: '1',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            overflow: 'hidden'
+          }}>
           <Loader message={loaderText} />
           {Boolean(confirmText) && <ConfirmFile text={confirmText} onNo={()=>setConfirmFile([null, null])} onYes={onConfirmYes}/>}
           <Box className='FileManager-toolbar'>
@@ -869,7 +880,14 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
               </PgMenu>
             }
           </Box>
-          <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
+          <Box
+            sx={{
+              flexGrow: '1',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'relative',
+              overflow: 'hidden'
+            }}>
             {showUploader &&
               <Uploader fmUtilsObj={fmUtilsObj}
                 onClose={async (filesUploaded)=>{
diff --git a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
index 88eb3c5d357..6165126d76f 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
@@ -16,7 +16,7 @@ import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .GridView-grid': {
     display: 'flex',
     fontSize: '13px',
@@ -143,7 +143,11 @@ export default function GridView({items, operation, onItemSelect, onItemEnter})
             onItemEnter={onItemEnter} onEditComplete={operation.idx==i ? onEditComplete : null} />)
         )}
       </div>
-      {items.length == 0 && <Box textAlign="center" p={1}>{gettext('No files/folders found')}</Box>}
+      {items.length == 0 && <Box
+        sx={{
+          textAlign: 'center',
+          p: 1
+        }}>{gettext('No files/folders found')}</Box>}
     </StyledBox>
   );
 }
diff --git a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
index f6f68e3fd59..3a248b5a95d 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
@@ -19,7 +19,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'absolute',
   top: 0,
   bottom: 0,
@@ -104,9 +104,17 @@ export function UploadedFile({upfile, removeFile}) {
 
   return (
     <ListItem style={{cursor: 'auto'}}>
-      <Box display="flex" alignItems="flex-start">
-        <Box overflow="hidden" style={{overflowWrap: 'break-word'}} >{upfile.file.name}</Box>
-        <Box marginLeft="auto">
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-start'
+        }}>
+        <Box style={{overflowWrap: 'break-word'}} sx={{
+          overflow: 'hidden'
+        }} >{upfile.file.name}</Box>
+        <Box sx={{
+          marginLeft: 'auto'
+        }}>
           <PgIconButton title={gettext('Remove from list')} icon={<CloseIcon  />} size="xs" noBorder onClick={removeFile} />
         </Box>
       </Box>
@@ -166,10 +174,19 @@ export default function Uploader({fmUtilsObj, onClose}) {
 
   return (
     <StyledBox>
-      <Box display="flex" justifyContent="flex-end">
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-end'
+        }}>
         <PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={onClose} />
       </Box>
-      <Box display="flex" flexGrow={1} overflow="hidden">
+      <Box
+        sx={{
+          display: 'flex',
+          flexGrow: 1,
+          overflow: 'hidden'
+        }}>
         <Box className='Uploader-uploadArea' {...getRootProps()}>
           <input {...getInputProps()} />
           <Box>{gettext('Drop files here, or click to select files.')}</Box>
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index dfacb235289..ac7c756c288 100644
--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -25,7 +25,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider';
 import { getSwitchCell } from '../../static/js/components/PgReactTableStyled';
 import { parseApiError } from '../../static/js/api_instance';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   height: '100%',
   '&.CollectionNodeProperties-emptyPanel': {
     minHeight: '100%',
diff --git a/web/pgadmin/misc/properties/Properties.jsx b/web/pgadmin/misc/properties/Properties.jsx
index 7c258a33c08..3102d4d8f3e 100644
--- a/web/pgadmin/misc/properties/Properties.jsx
+++ b/web/pgadmin/misc/properties/Properties.jsx
@@ -20,7 +20,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   height: '100%',
   background: theme.otherVars.emptySpaceBg,
   display: 'flex',
@@ -41,7 +41,9 @@ function Properties(props) {
   if(noPropertyMsg) {
     return (
       <StyledBox>
-        <Box margin={'4px auto'}>
+        <Box sx={{
+          margin: '4px auto'
+        }}>
           <EmptyPanelMessage text={noPropertyMsg} />
         </Box>
       </StyledBox>
diff --git a/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx b/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx
index 3140db071bd..a1a4ad4e2e1 100644
--- a/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx
+++ b/web/pgadmin/misc/workspaces/static/js/WorkspaceToolbar.jsx
@@ -133,7 +133,9 @@ export default function WorkspaceToolbar() {
       <WorkspaceButton icon={<QueryToolIcon />} value={WORKSPACES.QUERY_TOOL} title={gettext('Query Tool Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_QUERY_TOOL}} />
       {pgAdmin['enable_psql'] &&  <WorkspaceButton icon={<TerminalRoundedIcon style={{height: '1.4rem'}}/>} value={WORKSPACES.PSQL_TOOL} title={gettext('PSQL Tool Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_PSQL_TOOL}} />}
       <WorkspaceButton icon={<SchemaDiffIcon />} value={WORKSPACES.SCHEMA_DIFF_TOOL} title={gettext('Schema Diff Workspace')} tooltipPlacement="right" options={{permission: AllPermissionTypes.TOOLS_SCHEMA_DIFF}} />
-      <Box marginTop="auto">
+      <Box sx={{
+        marginTop: 'auto'
+      }}>
         <WorkspaceButton icon={<SettingsIcon />} menuItem={menus['settings']} title={gettext('Preferences')} tooltipPlacement="right" />
       </Box>
     </Root>
diff --git a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx
index 1d07424b548..9d517cfb344 100644
--- a/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx
+++ b/web/pgadmin/misc/workspaces/static/js/WorkspaceWelcomePage.jsx
@@ -73,7 +73,7 @@ const Root = styled('div')(({theme}) => ({
   }
 }));
 
-const BackgroundSVG = styled(Box)(() => ({
+const BackgroundSVG = styled('div')(() => ({
   position: 'absolute',
   top: 0,
   bottom: 0,
diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
index 3e70c486b00..6c93627050e 100644
--- a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
+++ b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -40,7 +40,7 @@ import LeftTree from './LeftTree';
 import RightPreference from './RightPreference';
 
 // --- Styled Components ---
-const Root = styled(Box)(({ theme }) => ({
+const Root = styled('div')(({ theme }) => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
diff --git a/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx b/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx
index e8dcb1c78f4..3d58b02ddce 100644
--- a/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx
+++ b/web/pgadmin/preferences/static/js/components/PreferencesHelper.jsx
@@ -303,7 +303,7 @@ export function getCollectionValue(_metadata, value, initVals) {
   return val;
 }
 
-const StyledBox = styled(Box)(({ theme }) => ({
+const StyledBox = styled('div')(({ theme }) => ({
   '& .Alert-footer': {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -348,7 +348,11 @@ export function showResetPrefModal(api, pgAdmin, preferencesStore, onReset) {
 
       return (
         <StyledBox display="flex" flexDirection="column" height="100%">
-          <Box flexGrow="1" p={2}>
+          <Box
+            sx={{
+              flexGrow: '1',
+              p: 2
+            }}>
             {HTMLReactParser(text)}
           </Box>
           <Box className='Alert-footer'>
diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx
index 4f2af8c014f..ff9a0375fbd 100644
--- a/web/pgadmin/static/js/AppMenuBar.jsx
+++ b/web/pgadmin/static/js/AppMenuBar.jsx
@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useEffect } from 'react';
 import { PrimaryButton } from './components/Buttons';
@@ -17,7 +16,7 @@ import { usePgAdmin } from '../../static/js/PgAdminProvider';
 import { useForceUpdate } from './custom_hooks';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   height: '30px',
   backgroundColor: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
diff --git a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
index e7e3e6c4286..e827118206b 100644
--- a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
@@ -11,7 +11,11 @@ import PropTypes from 'prop-types';
 export default function ConfirmSaveContent({closeModal, text, onDontSave, onSave}) {
   return (
     <ModalContent>
-      <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <ModalFooter>
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
index 796e1441c3a..60c06b32d11 100644
--- a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
@@ -59,7 +59,11 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight,
 
   return (
     <ModalContent ref={containerRef}>
-      <Box flexGrow="1" p={2}>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>
         {data.prompt_tunnel_password && <>
           <Box>
             <span style={{fontWeight: 'bold'}}>
@@ -69,11 +73,18 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight,
               }
             </span>
           </Box>
-          <Box marginTop='12px'>
+          <Box sx={{
+            marginTop: '12px'
+          }}>
             <InputText inputRef={firstEleRef} type="password" value={formData['tunnel_password']} controlProps={{maxLength:null, autoComplete:'new-password'}}
               onChange={(e)=>onTextChange(e, 'tunnel_password')} onKeyDown={(e)=>onKeyDown(e)} />
           </Box>
-          <Box marginTop='12px' marginBottom='12px' visibility={hideSavePassword ? 'hidden' : 'unset'}>
+          <Box
+            sx={{
+              marginTop: '12px',
+              marginBottom: '12px',
+              visibility: hideSavePassword ? 'hidden' : 'unset'
+            }}>
             <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_tunnel_password']}
               onChange={(e)=>onTextChange(e.target.checked, 'save_tunnel_password')} disabled={!data.allow_save_tunnel_password} />
           </Box>
@@ -87,7 +98,9 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight,
               }
             </span>
           </Box>
-          <Box marginTop='12px'>
+          <Box sx={{
+            marginTop: '12px'
+          }}>
             <InputText inputRef={(ele)=>{
               if(!data.prompt_tunnel_password) {
                 /* Set only if no tunnel password asked */
@@ -96,7 +109,11 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight,
             }} type="password" value={formData['password']} controlProps={{maxLength:null}}
             onChange={(e)=>onTextChange(e, 'password')} onKeyDown={(e)=>onKeyDown(e)}/>
           </Box>
-          <Box marginTop='12px' visibility={hideSavePassword ? 'hidden' : 'unset'}>
+          <Box
+            sx={{
+              marginTop: '12px',
+              visibility: hideSavePassword ? 'hidden' : 'unset'
+            }}>
             <InputCheckbox controlProps={{label: gettext('Save Password')}} value={formData['save_password']}
               onChange={(e)=>onTextChange(e.target.checked, 'save_password')} disabled={!data.allow_save_password} />
           </Box>
diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
index 5134eda2fa9..8ac04790b6d 100644
--- a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
@@ -57,7 +57,11 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
   return (
     <ModalContent ref={containerRef}>
       {isKeyring ?
-        <Box flexGrow="1" p={2}>
+        <Box
+          sx={{
+            flexGrow: '1',
+            p: 2
+          }}>
           <Box>
             <span style={{ fontWeight: 'bold' }}>
               {gettext('Please enter your master password.')}
@@ -67,7 +71,9 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
               <FormNote text={gettext(`Saved passwords are encrypted using encryption key stored in ${keyringName}. Enter the master password for your existing pgAdmin saved passwords and they will be re-encrypted and saved when you click OK.`)}></FormNote>
             </span>
           </Box>
-          <Box marginTop='12px'>
+          <Box sx={{
+            marginTop: '12px'
+          }}>
             <InputText inputRef={firstEleRef} type="password" value={formData['password']} maxLength={null}
               onChange={(e) => onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)}/>
           </Box>
@@ -75,7 +81,11 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
             position: 'unset', padding: '12px 0px 0px'
           }} />
         </Box> :
-        <Box flexGrow="1" p={2}>
+        <Box
+          sx={{
+            flexGrow: '1',
+            p: 2
+          }}>
           <Box>
             <span style={{ fontWeight: 'bold' }}>
               {isPWDPresent ? gettext('Please enter your master password.') : gettext('Please set a master password for pgAdmin.')}
@@ -85,7 +95,9 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
               {isPWDPresent ? gettext('This is required to unlock saved passwords and reconnect to the database server(s).') : gettext('This will be used to secure and later unlock saved passwords and other credentials.')}
             </span>
           </Box>
-          <Box marginTop='12px'>
+          <Box sx={{
+            marginTop: '12px'
+          }}>
             <InputText inputRef={firstEleRef} type="password" value={formData['password']} maxLength={null}
               onChange={(e) => onTextChange(e, 'password')} onKeyDown={(e) => onKeyDown(e)} controlProps={{autoComplete: 'new-password'}}/>
           </Box>
@@ -129,7 +141,8 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
           {gettext('OK')}
         </PrimaryButton>
       </ModalFooter>
-    </ModalContent>);
+    </ModalContent>
+  );
 }
 
 MasterPasswordContent.propTypes = {
diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
index df3bc941c06..aa699974c2e 100644
--- a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
@@ -55,13 +55,19 @@ export default function NamedRestoreContent({closeModal, onOK, setHeight}) {
 
   return (
     <ModalContent ref={containerRef}>
-      <Box flexGrow="1" p={2}>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>
         <Box>
           <span style={{fontWeight: 'bold'}}>
             {gettext('Enter the name of the restore point to add')}
           </span>
         </Box>
-        <Box marginTop='12px'>
+        <Box sx={{
+          marginTop: '12px'
+        }}>
           <InputText inputRef={firstEleRef} type="text" value={formData['namedRestorePoint']}
             onChange={(e)=>onTextChange(e, 'namedRestorePoint')} onKeyDown={(e)=>onKeyDown(e)}/>
         </Box>
diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
index 7cb2b2b9f7d..5d90027652a 100644
--- a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
@@ -63,8 +63,12 @@ export default function RenameTabContent({ panelId, panelDocker, closeModal}) {
 
   return (
     <ModalContent ref={containerRef}>
-      <Box padding="8px">
-        <Box marginBottom="4px">Current: {initialTitle}</Box>
+      <Box sx={{
+        padding: '8px'
+      }}>
+        <Box sx={{
+          marginBottom: '4px'
+        }}>Current: {initialTitle}</Box>
         <InputText type="text" value={formData['title']} controlProps={{ maxLength: null }}
           onChange={(e) => onTextChange(e, 'title')} onKeyDown={(e) => onKeyDown(e)} autoFocus />
       </Box>
diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
index be6f1f7df38..e44f5dc0d7c 100644
--- a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
@@ -21,7 +21,9 @@ import { ModalContent, ModalFooter }from '../../../static/js/components/ModalCon
 export default function UrlDialogContent({ url, helpFile, onClose }) {
   return (
     <ModalContent>
-      <Box flexGrow="1">
+      <Box sx={{
+        flexGrow: '1'
+      }}>
         <iframe src={url} title=" " width="100%" height="100%" onLoad={(e)=>{
           e.target?.contentWindow?.focus();
         }}/>
diff --git a/web/pgadmin/static/js/Explain/AIInsights.jsx b/web/pgadmin/static/js/Explain/AIInsights.jsx
index f504e2be441..7a936d6a6a0 100644
--- a/web/pgadmin/static/js/Explain/AIInsights.jsx
+++ b/web/pgadmin/static/js/Explain/AIInsights.jsx
@@ -22,10 +22,10 @@ import DownloadIcon from '@mui/icons-material/Download';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import AddIcon from '@mui/icons-material/Add';
 import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutlined';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import LightbulbOutlinedIcon from '@mui/icons-material/LightbulbOutlined';
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
@@ -35,7 +35,7 @@ import Loader from '../components/Loader';
 import EmptyPanelMessage from '../components/EmptyPanelMessage';
 import { DefaultButton, PrimaryButton } from '../components/Buttons';
 
-const StyledContainer = styled(Box)(({ theme }) => ({
+const StyledContainer = styled('div')(({ theme }) => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
@@ -43,7 +43,7 @@ const StyledContainer = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
 }));
 
-const Header = styled(Box)(({ theme }) => ({
+const Header = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -52,7 +52,7 @@ const Header = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
 }));
 
-const ContentArea = styled(Box)({
+const ContentArea = styled('div')({
   flex: 1,
   overflow: 'auto',
   padding: '16px',
@@ -60,21 +60,21 @@ const ContentArea = styled(Box)({
   cursor: 'auto',
 });
 
-const Section = styled(Box)(({ theme }) => ({
+const Section = styled('div')(({ theme }) => ({
   marginBottom: theme.spacing(2),
   padding: theme.spacing(2),
   backgroundColor: theme.palette.background.default,
   borderRadius: theme.shape.borderRadius,
 }));
 
-const SectionHeader = styled(Box)(({ theme }) => ({
+const SectionHeader = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
   marginBottom: theme.spacing(1.5),
 }));
 
-const BottleneckItem = styled(Box)(({ theme, severity }) => ({
+const BottleneckItem = styled('div')(({ theme, severity }) => ({
   display: 'flex',
   gap: theme.spacing(1.5),
   padding: theme.spacing(1.5),
@@ -93,7 +93,7 @@ const BottleneckItem = styled(Box)(({ theme, severity }) => ({
   },
 }));
 
-const RecommendationItem = styled(Box)(({ theme }) => ({
+const RecommendationItem = styled('div')(({ theme }) => ({
   padding: theme.spacing(1.5),
   marginBottom: theme.spacing(1),
   borderRadius: theme.shape.borderRadius,
@@ -104,7 +104,7 @@ const RecommendationItem = styled(Box)(({ theme }) => ({
   },
 }));
 
-const SQLBox = styled(Box)(({ theme }) => ({
+const SQLBox = styled('div')(({ theme }) => ({
   marginTop: theme.spacing(1),
   padding: theme.spacing(1),
   backgroundColor: theme.palette.action.hover,
@@ -116,14 +116,14 @@ const SQLBox = styled(Box)(({ theme }) => ({
   border: `1px solid ${theme.palette.text.disabled}`,
 }));
 
-const ActionButtons = styled(Box)(({ theme }) => ({
+const ActionButtons = styled('div')(({ theme }) => ({
   display: 'flex',
   gap: theme.spacing(0.5),
   marginTop: theme.spacing(1),
   justifyContent: 'flex-end',
 }));
 
-const LoadingContainer = styled(Box)({
+const LoadingContainer = styled('div')({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
index 7f45b23b4ec..f132cb5d305 100644
--- a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
+++ b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
@@ -8,14 +8,14 @@
 //////////////////////////////////////////////////////////////
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import gettext from 'sources/gettext';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import Table from '../components/Table';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .ExplainStatistics-title': {
     fontWeight: 'bold',
     padding: '4px',
diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx
index a0eb7063806..f49b14b6d85 100644
--- a/web/pgadmin/static/js/Explain/Graphical.jsx
+++ b/web/pgadmin/static/js/Explain/Graphical.jsx
@@ -23,7 +23,7 @@ import CloseIcon from '@mui/icons-material/CloseRounded';
 import PropTypes from 'prop-types';
 import Table from '../components/Table';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .Graphical-explainDetails': {
     minWidth: '200px',
     maxWidth: '300px',
@@ -419,7 +419,14 @@ export default function Graphical({planData, ctx}) {
 
   return (
     <StyledBox ref={graphContainerRef} height="100%" width="100%" overflow="auto">
-      <Box position="absolute" top="4px" left="4px" gap="4px" display="flex">
+      <Box
+        sx={{
+          position: 'absolute',
+          top: '4px',
+          left: '4px',
+          gap: '4px',
+          display: 'flex'
+        }}>
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Zoom in')} icon={<ZoomInIcon />} onClick={()=>onCmdClick('in')}/>
           <PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon />} onClick={()=>onCmdClick()}/>
@@ -434,9 +441,13 @@ export default function Graphical({planData, ctx}) {
       />
       {Boolean(explainPlanDetails) &&
       <Card className='Graphical-explainDetails' data-label="explain-details">
-        <CardHeader title={<Box display="flex">
+        <CardHeader title={<Box sx={{
+          display: 'flex'
+        }}>
           {explainPlanTitle}
-          <Box marginLeft="auto">
+          <Box sx={{
+            marginLeft: 'auto'
+          }}>
             <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={()=>setExplainPlanDetails([null, null])}/>
           </Box>
         </Box>} />
diff --git a/web/pgadmin/static/js/Explain/index.jsx b/web/pgadmin/static/js/Explain/index.jsx
index 5770ab66b1c..e688ef0ddde 100644
--- a/web/pgadmin/static/js/Explain/index.jsx
+++ b/web/pgadmin/static/js/Explain/index.jsx
@@ -22,7 +22,7 @@ import AIInsights from './AIInsights';
 import PropTypes from 'prop-types';
 import EmptyPanelMessage from '../components/EmptyPanelMessage';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .Explain-tabPanel': {
     padding: '0 !important',
     backgroundColor: theme.palette.background.default + ' !important',
diff --git a/web/pgadmin/static/js/SchemaView/DataGridView/formHeader.jsx b/web/pgadmin/static/js/SchemaView/DataGridView/formHeader.jsx
index 915074f9770..212f31c4cc3 100644
--- a/web/pgadmin/static/js/SchemaView/DataGridView/formHeader.jsx
+++ b/web/pgadmin/static/js/SchemaView/DataGridView/formHeader.jsx
@@ -33,7 +33,7 @@ registerOptionEvaluator(
   'headerFormVisible', booleanEvaluator, false, ['collection']
 );
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .DataGridFormHeader-border': {
     ...theme.mixins.panelBorder,
     borderBottom: 0,
diff --git a/web/pgadmin/static/js/SchemaView/InlineView.jsx b/web/pgadmin/static/js/SchemaView/InlineView.jsx
index 1e89ed3d7c3..cf0fd2c0241 100644
--- a/web/pgadmin/static/js/SchemaView/InlineView.jsx
+++ b/web/pgadmin/static/js/SchemaView/InlineView.jsx
@@ -38,7 +38,9 @@ export default function InlineView({
     return <></>;
   }
   return (
-    <Grid container spacing={0} className='FormView-controlRow' rowGap="8px">
+    <Grid container spacing={0} className='FormView-controlRow' sx={{
+      rowGap: '8px'
+    }}>
       {children}
     </Grid>
   );
diff --git a/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx b/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx
index 3c83f8e7ab3..fc5fc2fcfa6 100644
--- a/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx
+++ b/web/pgadmin/static/js/SchemaView/SchemaDialogView.jsx
@@ -212,7 +212,9 @@ export default function SchemaDialogView({
                   />
                 </Box>
             }
-            <Box marginLeft='auto'>
+            <Box sx={{
+              marginLeft: 'auto'
+            }}>
               {
                 Boolean(customCloseBtnName) &&
                   <DefaultButton data-test='Close' onClick={props.onClose}
diff --git a/web/pgadmin/static/js/SchemaView/StyledComponents.jsx b/web/pgadmin/static/js/SchemaView/StyledComponents.jsx
index 3381850d7ca..997c8d7b820 100644
--- a/web/pgadmin/static/js/SchemaView/StyledComponents.jsx
+++ b/web/pgadmin/static/js/SchemaView/StyledComponents.jsx
@@ -7,10 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 
-import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 
-export const StyledBox = styled(Box)(({theme}) => ({
+export const StyledBox = styled('div')(({theme}) => ({
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
@@ -50,7 +49,7 @@ export const StyledBox = styled(Box)(({theme}) => ({
   },
 }));
 
-export const StyleDataGridBox = styled(Box)(({theme}) => ({
+export const StyleDataGridBox = styled('div')(({theme}) => ({
   '& .DataGridView-grid': {
     ...theme.mixins.panelBorder,
     backgroundColor: theme.palette.background.default,
@@ -123,7 +122,7 @@ export const StyleDataGridBox = styled(Box)(({theme}) => ({
   }
 }));
 
-export const FormContentBox = styled(Box)(({theme}) => ({
+export const FormContentBox = styled('div')(({theme}) => ({
   '& .FormView-nestedControl': {
     height: 'unset !important',
     '& .FormView-controlRow': {
diff --git a/web/pgadmin/static/js/SchemaView/common.js b/web/pgadmin/static/js/SchemaView/common.js
index f4bd0ad7aba..f1d983d44e8 100644
--- a/web/pgadmin/static/js/SchemaView/common.js
+++ b/web/pgadmin/static/js/SchemaView/common.js
@@ -19,18 +19,18 @@ export const isModeSupportedByField = (field, helperProps) => (
 export const isFieldSupportedByPgVersion = (field, helperProps) => {
   return (
     // serverInfo not found
-    _.isUndefined(helperProps.serverInfo) ||
-      // serverInfo found and it's within range
-      (
-        _.isUndefined(field.server_type) ? true :
-          (helperProps.serverInfo.type in field.server_type)
-      ) && (
-        _.isUndefined(field.min_version) ? true :
-          (helperProps.serverInfo.version >= field.min_version)
-      ) && (
-        _.isUndefined(field.max_version) ? true :
-          (helperProps.serverInfo.version <= field.max_version)
-      ));
+    (_.isUndefined(helperProps.serverInfo) || // serverInfo found and it's within range
+    (
+      _.isUndefined(field.server_type) ? true :
+        (helperProps.serverInfo.type in field.server_type)
+    ) && (
+      _.isUndefined(field.min_version) ? true :
+        (helperProps.serverInfo.version >= field.min_version)
+    ) && (
+      _.isUndefined(field.max_version) ? true :
+        (helperProps.serverInfo.version <= field.max_version)
+    ))
+  );
 };
 
 /*
diff --git a/web/pgadmin/static/js/SecurityPages/BasePage.jsx b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
index a7f9af55fac..300a49a9bac 100644
--- a/web/pgadmin/static/js/SecurityPages/BasePage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
@@ -7,7 +7,7 @@ import { FinalNotifyContent } from '../helpers/Notifier';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   backgroundColor: theme.palette.primary.main,
   color: theme.palette.primary.contrastText,
   display: 'flex',
@@ -78,14 +78,31 @@ export default function BasePage({pageImage, title,  children, messages}) {
   }, [messages]);
   return (
     <StyledBox >
-      <Box display="flex" minWidth="80%" gap="40px" alignItems="center" padding="20px 80px">
-        <Box flexGrow={1} height="80%" textAlign="center">
+      <Box
+        sx={{
+          display: 'flex',
+          minWidth: '80%',
+          gap: '40px',
+          alignItems: 'center',
+          padding: '20px 80px'
+        }}>
+        <Box
+          sx={{
+            flexGrow: 1,
+            height: '80%',
+            textAlign: 'center'
+          }}>
           {pageImage}
         </Box>
         <Box className='BasePage-pageContent'>
           <Box className='BasePage-item'><div className='BasePage-logo' /></Box>
           <Box className='BasePage-item'>{title}</Box>
-          <Box display="flex" flexDirection="column" minHeight={0}>{children}</Box>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              minHeight: 0
+            }}>{children}</Box>
         </Box>
       </Box>
     </StyledBox>
diff --git a/web/pgadmin/static/js/SecurityPages/LoginPage.jsx b/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
index 7e11537482a..6c3fc889de6 100644
--- a/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
@@ -37,7 +37,11 @@ export default function LoginPage({userLanguage, langOptions, forgotPassUrl, csr
               controlProps={{autoComplete: null}} />
             <InputText name="password" value={form.password} onChange={(v)=>onTextChange('password', v)} type="password" placeholder={gettext('Password')}
               controlProps={{autoComplete: null}} />
-            <Box textAlign="right" marginTop="-10px">
+            <Box
+              sx={{
+                textAlign: 'right',
+                marginTop: '-10px'
+              }}>
               <a style={{color: 'inherit'}} href={forgotPassUrl}>{gettext('Forgotten your password?')}</a>
             </Box>
             <InputSelectNonSearch name="language" options={langOptions} value={form.language} onChange={(v)=>onTextChange('language', v.target.value)} />
diff --git a/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx b/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
index f396da35a0c..5ab4559326d 100644
--- a/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
@@ -81,14 +81,23 @@ export default function MfaRegisterPage({actionUrl, mfaList, nextUrl, mfaView, .
         {mfaView ? <>
           {mfaView.auth_method == 'email' && <EmailRegisterView mfaView={mfaView} />}
           {mfaView.auth_method == 'authenticator' && <AuthenticatorRegisterView mfaView={mfaView} />}
-          <Box display="flex" gap="15px">
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '15px'
+            }}>
             <SecurityButton name="continue" value="Continue">{gettext('Continue')}</SecurityButton>
             <DefaultButton type="submit" name="cancel" value="Cancel" style={{width: '100%'}}>{gettext('Cancel')}</DefaultButton>
           </Box>
         </>:<>
           {mfaList?.map((m)=>{
             return (
-              <Box display="flex" width="100%" key={m.label}>
+              <Box
+                key={m.label}
+                sx={{
+                  display: 'flex',
+                  width: '100%'
+                }}>
                 <div style={{
                   width: '10%', mask: `url(${m.icon})`, maskRepeat: 'no-repeat',
                   WebkitMask: `url(${m.icon})`, WebkitMaskRepeat: 'no-repeat',
diff --git a/web/pgadmin/static/js/ToolErrorView.jsx b/web/pgadmin/static/js/ToolErrorView.jsx
index 76d77bc63e6..49e17e116e9 100644
--- a/web/pgadmin/static/js/ToolErrorView.jsx
+++ b/web/pgadmin/static/js/ToolErrorView.jsx
@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import { LAYOUT_EVENTS } from './helpers/Layout';
 import { styled } from '@mui/material/styles';
-import { FormHelperText, Box } from '@mui/material';
+import { FormHelperText } from '@mui/material';
 import HTMLReactParse from 'html-react-parser';
 import { useApplicationState } from '../../settings/static/ApplicationStateProvider';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   color: theme.palette.text.primary,
   margin: '24px auto 12px',
   display: 'flex',
diff --git a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
index fd4e6d0f203..348c37d2fee 100644
--- a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
+++ b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
@@ -8,11 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import PropTypes from 'prop-types';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   color: theme.palette.text.primary,
   margin: '24px auto 12px',
   fontSize: '0.8rem',
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index ba03e65aaaf..ebc7f99ed74 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -1153,7 +1153,9 @@ export function FormNote({ text, className, controlProps }) {
     <Root>
       <Box className={className}>
         <Paper elevation={0} className={controlProps?.raw ? '' : 'Form-noteRoot'}>
-          {!controlProps?.raw && <Box paddingRight="0.25rem"><DescriptionIcon fontSize="small" /></Box>}
+          {!controlProps?.raw && <Box sx={{
+            paddingRight: '0.25rem'
+          }}><DescriptionIcon fontSize="small" /></Box>}
           <Box>{HTMLReactParse(text || '')}</Box>
         </Paper>
       </Box>
@@ -1167,7 +1169,7 @@ FormNote.propTypes = {
 };
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   padding: theme.spacing(0.5),
   position: 'absolute',
   bottom: 0,
@@ -1258,7 +1260,7 @@ FormInputSelectThemes.propTypes = {
   labelTooltip: PropTypes.string
 };
 
-const StyledNotifierMessageBox = styled(Box)(({theme}) => ({
+const StyledNotifierMessageBox = styled('div')(({theme}) => ({
   borderWidth: '1px',
   borderStyle: 'solid',
   borderRadius: theme.shape.borderRadius,
diff --git a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
index 54d06aee445..376f63adcd0 100644
--- a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
+++ b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
@@ -76,12 +76,13 @@ export default function KeyboardShortcuts({ value, onChange, fields, name }) {
 
   return (
     <Box
-      display="flex"
-      alignItems="center"
-      flexWrap="wrap"
-      gap="5px"
-      rowGap="5px"
-    >
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: '5px',
+        rowGap: '5px'
+      }}>
       {hasKeys &&
       <>
         <ToggleButtonGroup value={value?.shift ? ['shift'] : []} onChange={(e, val)=>{
diff --git a/web/pgadmin/static/js/components/Loader.jsx b/web/pgadmin/static/js/components/Loader.jsx
index c6aef23de6d..f23fa292835 100644
--- a/web/pgadmin/static/js/components/Loader.jsx
+++ b/web/pgadmin/static/js/components/Loader.jsx
@@ -11,7 +11,7 @@ import { CircularProgress, Box, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'absolute',
   top: 0,
   bottom: 0,
diff --git a/web/pgadmin/static/js/components/ModalContent.jsx b/web/pgadmin/static/js/components/ModalContent.jsx
index 9b9a45dbd8d..f7987f9af3e 100644
--- a/web/pgadmin/static/js/components/ModalContent.jsx
+++ b/web/pgadmin/static/js/components/ModalContent.jsx
@@ -11,7 +11,7 @@ import { styled } from '@mui/material/styles';
 import CustomPropTypes from '../custom_prop_types';
 import { Box } from '@mui/material';
 
-const StyledBox = styled(Box)(({theme})=>({
+const StyledBox = styled('div')(({theme})=>({
   backgroundColor: theme.palette.background.default,
   display: 'flex',
   flexDirection: 'column',
diff --git a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
index e5f0a9a7376..d3f45a4b7a0 100644
--- a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
+++ b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useState, useEffect } from 'react';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
@@ -15,7 +14,7 @@ import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRound
 import { usePgAdmin } from '../../../static/js/PgAdminProvider';
 import usePreferences from '../../../preferences/static/js/store';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'absolute',
   bottom: 0,
   width: 'auto',
diff --git a/web/pgadmin/static/js/components/PgReactDataGrid.jsx b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
index 1f6db4d3868..93b9ff0e81b 100644
--- a/web/pgadmin/static/js/components/PgReactDataGrid.jsx
+++ b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
@@ -159,7 +159,12 @@ export default function PgReactDataGrid({gridRef, className, hasSelectColumn=tru
         renderers={{
           renderRow,
           renderSortStatus,
-          noRowsFallback: <Box textAlign="center" gridColumn="1/-1" p={1}>{noRowsIcon}{noRowsText || gettext('No rows found.')}</Box>,
+          noRowsFallback: <Box
+            sx={{
+              textAlign: 'center',
+              gridColumn: '1/-1',
+              p: 1
+            }}>{noRowsIcon}{noRowsText || gettext('No rows found.')}</Box>,
         }}
         {...props}
       />
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index b77259ae355..fac7df4d621 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -326,7 +326,9 @@ export default function PgTable({ caveTable = true, tableNoBorder = true, tableN
       <StyledPgTableRoot className={[tableNoBorder ? '' : 'pgtable-pgrt-border', caveTable ? 'pgtable-pgrt-cave' : ''].join(' ')} data-test={props['data-test']}>
         {!tableNoHeader && <Box className='pgtable-header'>
           {props.customHeader && (<Box className={['pgtable-custom-header-section', props['className']].join(' ')}> {props.customHeader }</Box>)}
-          <Box marginLeft="auto">
+          <Box sx={{
+            marginLeft: 'auto'
+          }}>
             <InputText
               placeholder={gettext('Search')}
               controlProps={{ title: gettext('Search') }}
diff --git a/web/pgadmin/static/js/components/QueryThresholds.jsx b/web/pgadmin/static/js/components/QueryThresholds.jsx
index 2e174c7a186..310e9d136e6 100644
--- a/web/pgadmin/static/js/components/QueryThresholds.jsx
+++ b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -37,7 +37,9 @@ export default function QueryThresholds({ value, onChange }) {
       <Grid
         container
         direction="row"
-        alignItems="center"
+        sx={{
+          alignItems: 'center'
+        }}
       >
         <Grid size={{ lg: 2, md: 2, sm: 2, xs: 12 }}>
           <Typography>{gettext('Warning')}</Typography>
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
index e806f87d90e..a64e72813cd 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
@@ -32,7 +32,7 @@ import {
   replaceAll,
 } from '@codemirror/search';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'absolute',
   zIndex: 99,
   right: '4px',
@@ -166,8 +166,9 @@ export default function FindDialog({editor, show, replace, onClose}) {
         onChange={(value)=>setReplaceVal(value)}
         onKeyPress={onReplaceEnter}
       />}
-
-      <Box display="flex" className='CodeMirror-marginTop'>
+      <Box className='CodeMirror-marginTop' sx={{
+        display: 'flex'
+      }}>
         <PgIconButton title={gettext('Previous')} icon={<ArrowUpwardRoundedIcon />} size="xs" noBorder onClick={onFindPrev}
           style={{marginRight: '2px'}} />
         <PgIconButton title={gettext('Next')} icon={<ArrowDownwardRoundedIcon />} size="xs" noBorder onClick={onFindNext}
@@ -177,7 +178,9 @@ export default function FindDialog({editor, show, replace, onClose}) {
             style={{marginRight: '2px'}} />
           <PgIconButton title={gettext('Replace All')} icon={<SwapCallsRoundedIcon />} size="xs" noBorder onClick={onReplaceAll}/>
         </>}
-        <Box marginLeft="auto">
+        <Box sx={{
+          marginLeft: 'auto'
+        }}>
           <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={clearAndClose}/>
         </Box>
       </Box>
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
index bbaa759a034..b11cdf2d9a8 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
@@ -11,12 +11,12 @@ import { useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
-import { Box, FormControl } from '@mui/material';
+import { FormControl } from '@mui/material';
 import { InputText } from '../../FormComponents';
 import { PgIconButton } from '../../Buttons';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'absolute',
   zIndex: 99,
   right: '4px',
diff --git a/web/pgadmin/static/js/components/SelectRefresh.jsx b/web/pgadmin/static/js/components/SelectRefresh.jsx
index b3ded1af836..ddbc80a47ee 100644
--- a/web/pgadmin/static/js/components/SelectRefresh.jsx
+++ b/web/pgadmin/static/js/components/SelectRefresh.jsx
@@ -21,7 +21,7 @@ import gettext from 'sources/gettext';
 import { usePgAdmin } from '../PgAdminProvider';
 import { clearOptionsCache } from '../../../preferences/static/js/components/PreferencesHelper';
 
-const StyledBox = styled(Box)(() => ({
+const StyledBox = styled('div')(() => ({
   display: 'flex',
   alignItems: 'flex-start',
   '& .SelectRefresh-selectContainer': {
diff --git a/web/pgadmin/static/js/components/TabPanel.jsx b/web/pgadmin/static/js/components/TabPanel.jsx
index 98808b20023..2e82f3af732 100644
--- a/web/pgadmin/static/js/components/TabPanel.jsx
+++ b/web/pgadmin/static/js/components/TabPanel.jsx
@@ -13,7 +13,7 @@ import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
 
-const StyledBox = styled(Box)(({theme})=>({
+const StyledBox = styled('div')(({theme})=>({
   ...theme.mixins.tabPanel,
   '& .TabPanel-content':{
     height: '100%',
diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
index 506bbe1325f..a1a4ee8d54f 100644
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -62,7 +62,14 @@ export function TabTitle({id, closable, defaultInternal}) {
   }, []);
 
   return (
-    <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} width="100%">
+    <Box
+      title={attrs.tooltip}
+      onContextMenu={onContextMenu}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%'
+      }}>
       {attrs.icon && <span className={`dock-tab-icon ${attrs.icon}`}></span>}
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
@@ -433,7 +440,11 @@ function DialogClose({panelData}) {
   // In a dialog, panelData is the data of the container panel and not the
   // data of actual dialog tab. panelData.activeId gives the id of dialog tab.
   return (
-    <Box display="flex" alignItems="center">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center'
+      }}>
       <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(panelData.activeId);
       }} style={{marginRight: '-4px'}}/>
@@ -469,11 +480,17 @@ export function getDefaultGroup() {
         icon = <MinimizeDialogIcon />;
         title = gettext('Restore');
       }
-      return <Box display="flex" alignItems="center">
-        {Boolean(panelData.maximizable) && <PgIconButton title={title} icon={icon} size="xs" noBorder onClick={()=>{
-          context.dockMove(panelData, null, 'maximize');
-        }} />}
-      </Box>;
+      return (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center'
+          }}>
+          {Boolean(panelData.maximizable) && <PgIconButton title={title} icon={icon} size="xs" noBorder onClick={()=>{
+            context.dockMove(panelData, null, 'maximize');
+          }} />}
+        </Box>
+      );
     }
   };
 }
@@ -619,7 +636,12 @@ export default function Layout({groups, noContextGroups, getLayoutInstance, layo
   return (
     <ApplicationStateProvider>
       <LayoutDockerContext.Provider value={layoutDockerObj}>
-        <Box height="100%" width="100%" display={isLayoutVisible ? 'initial' : 'none'} >
+        <Box
+          sx={{
+            height: '100%',
+            width: '100%',
+            display: isLayoutVisible ? 'initial' : 'none'
+          }}>
           {useMemo(()=>(<DockLayout
             style={{
               height: '100%',
diff --git a/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx b/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
index 2834c48c708..7d90fef96b8 100644
--- a/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
+++ b/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
@@ -19,7 +19,11 @@ import PropTypes from 'prop-types';
 export default function MainMoreToolbar({tabsData}) {
   const layoutDocker = React.useContext(LayoutDockerContext);
   return (
-    <Box display="flex" alignItems="center">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center'
+      }}>
       <PgIconButton title={gettext('More')} icon={<MoreVertIcon />} size="xs" noBorder onClick={(e)=>{
         e.preventDefault();
         const box = e.target.getBoundingClientRect();
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index 93fac5c9fb6..d7c7ff4fb7d 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -26,7 +26,7 @@ import { styled } from '@mui/material/styles';
 export const ModalContext = React.createContext({});
 const MIN_HEIGHT = 190;
 const MIN_WIDTH = 500;
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .Alert-footer': {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -50,7 +50,12 @@ export function useModal() {
 function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick, okIcon = 'default'}) {
   return (
     <StyledBox display="flex" flexDirection="column" height="100%">
-      <Box flexGrow="1" p={2} whiteSpace='pre-line'>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2,
+          whiteSpace: 'pre-line'
+        }}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <Box className='Alert-footer'>
         {confirm &&
           <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick}>{cancelLabel}</DefaultButton>
@@ -106,7 +111,11 @@ function confirmDelete(title, text, onDeleteClick, onCancelClick, deleteLabel =
       };
       return (
         <StyledBox display="flex" flexDirection="column" height="100%">
-          <Box flexGrow="1" p={2}>
+          <Box
+            sx={{
+              flexGrow: '1',
+              p: 2
+            }}>
             {typeof (text) == 'string' ? HTMLReactParser(text) : text}
           </Box>
           <Box className='Alert-footer'>
@@ -331,7 +340,9 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
                 <Box className='Modal-iconButtonStyle'><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon  className='Modal-icon' />} size="xs" noBorder onClick={() => { setIsFullScreen(!isFullScreen); }} /></Box>
             }
 
-            <Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={closeModal} /></Box>
+            <Box sx={{
+              marginLeft: 'auto'
+            }}><PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={closeModal} /></Box>
           </Box>
         </DialogTitle>
       }
diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx
index d8b9562d5f1..c1a6fdf75a0 100644
--- a/web/pgadmin/static/js/helpers/Notifier.jsx
+++ b/web/pgadmin/static/js/helpers/Notifier.jsx
@@ -53,8 +53,17 @@ FinalNotifyContent.propTypes = {
 
 function AlertContent({text, confirm, okLabel=gettext('OK'), cancelLabel=gettext('Cancel'), onOkClick, onCancelClick}) {
   return (
-    <Box display="flex" flexDirection="column" height="100%">
-      <Box flexGrow="1" p={2}>{HTMLReactParser(text)}</Box>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%'
+      }}>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>{HTMLReactParser(text)}</Box>
       <Box className='Notifier-footer'>
         {confirm &&
           <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} >{cancelLabel}</DefaultButton>
diff --git a/web/pgadmin/static/js/helpers/appAutoUpdateNotifier.jsx b/web/pgadmin/static/js/helpers/appAutoUpdateNotifier.jsx
index 00187842971..8eaa2d3bbf5 100644
--- a/web/pgadmin/static/js/helpers/appAutoUpdateNotifier.jsx
+++ b/web/pgadmin/static/js/helpers/appAutoUpdateNotifier.jsx
@@ -14,7 +14,7 @@ import PropTypes from 'prop-types';
 import { DefaultButton, PgIconButton } from '../components/Buttons';
 import pgAdmin from 'sources/pgadmin';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   borderRadius: theme.shape.borderRadius,
   padding: '0.25rem 1rem 1rem',
   minWidth: '325px',
@@ -53,20 +53,38 @@ function UpdateWarningNotifier({desc, title, onClose, onClick, status, uniqueKey
   };
   return (
     <StyledBox className={'UpdateWarningNotifier-containerWarning'} data-test={'Update-popup-warning'}>
-      <Box display="flex" justifyContent="space-between" className='UpdateWarningNotifier-containerHeader'>
-        <Box marginRight={'1rem'}>{title}</Box>
+      <Box
+        className='UpdateWarningNotifier-containerHeader'
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between'
+        }}>
+        <Box sx={{
+          marginRight: '1rem'
+        }}>{title}</Box>
         <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={handleClose} title={'Close'} className={'UpdateWarningNotifier-iconWarning'} />
       </Box>
       <Box className='UpdateWarningNotifier-containerBody'>
         {desc && <Box>{desc}</Box>}
-        <Box display="flex">
-          {onClick && <Box marginTop={'1rem'} display="flex">
+        <Box sx={{
+          display: 'flex'
+        }}>
+          {onClick && <Box
+            sx={{
+              marginTop: '1rem',
+              display: 'flex'
+            }}>
             <DefaultButton color={'warning'} onClick={()=>{
               onClick();
               handleClose();
             }}>{status == 'download_update' ? 'Download Update' : 'Install and Restart'}</DefaultButton>
           </Box>}
-          {status == 'update_downloaded' && <Box marginTop={'1rem'} display="flex" marginLeft={'1rem'}>
+          {status == 'update_downloaded' && <Box
+            sx={{
+              marginTop: '1rem',
+              display: 'flex',
+              marginLeft: '1rem'
+            }}>
             <DefaultButton color={'default'} onClick={()=>{
               handleClose();
             }}>Install Later</DefaultButton>
diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index b067ff66513..00abc71eaa5 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -20,7 +20,7 @@ import { Box } from '@mui/material';
 import gettext from 'sources/gettext';
 import Loader from 'sources/components/Loader';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
@@ -205,7 +205,9 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
           <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
             disabled={props.disableDialogHelp} />
         </Box>
-        <Box className='Wizard-actionBtn' marginLeft="auto">
+        <Box className='Wizard-actionBtn' sx={{
+          marginLeft: 'auto'
+        }}>
           <DefaultButton onClick={handleBack} disabled={activeStep === 0} className='Wizard-buttonMargin' startIcon={<FastRewindIcon />}>
             {gettext('Back')}
           </DefaultButton>
diff --git a/web/pgadmin/static/js/tree/ObjectExplorer/ObjectExplorerToolbar.jsx b/web/pgadmin/static/js/tree/ObjectExplorer/ObjectExplorerToolbar.jsx
index 1227a5f034d..63bbe46bb52 100644
--- a/web/pgadmin/static/js/tree/ObjectExplorer/ObjectExplorerToolbar.jsx
+++ b/web/pgadmin/static/js/tree/ObjectExplorer/ObjectExplorerToolbar.jsx
@@ -78,7 +78,12 @@ export default function ObjectExplorerToolbar() {
   }, []);
 
   return (
-    <Box display="flex" alignItems="center" gap="2px">
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2px'
+      }}>
       <PgButtonGroup size="small">
         <ToolbarButton icon={
           <Badge badgeContent=" " overlap="circular" variant='dot' color="success" invisible={!hasFilters}>
diff --git a/web/pgadmin/static/vendor/require/require.min.js b/web/pgadmin/static/vendor/require/require.min.js
index 820f6f41290..c0a626cda27 100644
--- a/web/pgadmin/static/vendor/require/require.min.js
+++ b/web/pgadmin/static/vendor/require/require.min.js
@@ -6,4 +6,4 @@
 //problems with requirejs.exec()/transpiler plugins that may not be strict.
 /*jslint regexp: true, nomen: true, sloppy: true */
 /*global window, navigator, document, importScripts, setTimeout, opera */
-var requirejs,require,define;!function(global,setTimeout){var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version="2.3.6",commentRegExp=/\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/gm,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,isBrowser=!("undefined"==typeof window||"undefined"==typeof navigator||!window.document),isWebWorker=!isBrowser&&"undefined"!=typeof importScripts,readyRegExp=isBrowser&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,defContextName="_",isOpera="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),contexts={},cfg={},globalDefQueue=[],useInteractive=!1;function commentReplace(e,t){return t||""}function isFunction(e){return"[object Function]"===ostring.call(e)}function isArray(e){return"[object Array]"===ostring.call(e)}function each(e,t){var i;if(e)for(i=0;i<e.length&&(!e[i]||!t(e[i],i,e));i+=1);}function eachReverse(e,t){var i;if(e)for(i=e.length-1;i>-1&&(!e[i]||!t(e[i],i,e));i-=1);}function hasProp(e,t){return hasOwn.call(e,t)}function getOwn(e,t){return hasProp(e,t)&&e[t]}function eachProp(e,t){var i;for(i in e)if(hasProp(e,i)&&t(e[i],i))break}function mixin(e,t,i,r){return t&&eachProp(t,function(t,n){!i&&hasProp(e,n)||(!r||"object"!=typeof t||!t||isArray(t)||isFunction(t)||t instanceof RegExp?e[n]=t:(e[n]||(e[n]={}),mixin(e[n],t,i,r)))}),e}function bind(e,t){return function(){return t.apply(e,arguments)}}function scripts(){return document.getElementsByTagName("script")}function defaultOnError(e){throw e}function getGlobal(e){if(!e)return e;var t=global;return each(e.split("."),function(e){t=t[e]}),t}function makeError(e,t,i,r){var n=new Error(t+"\nhttps://requirejs.org/docs/errors.html#"+e);return n.requireType=e,n.requireModules=r,i&&(n.originalError=i),n}if(void 0===define){if(void 0!==requirejs){if(isFunction(requirejs))return;cfg=requirejs,requirejs=void 0}void 0===require||isFunction(require)||(cfg=require,require=void 0),req=requirejs=function(e,t,i,r){var n,o,a=defContextName;return isArray(e)||"string"==typeof e||(o=e,isArray(t)?(e=t,t=i,i=r):e=[]),o&&o.context&&(a=o.context),(n=getOwn(contexts,a))||(n=contexts[a]=req.s.newContext(a)),o&&n.configure(o),n.require(e,t,i)},req.config=function(e){return req(e)},req.nextTick=void 0!==setTimeout?function(e){setTimeout(e,4)}:function(e){e()},require||(require=req),req.version=version,req.jsExtRegExp=/^\/|:|\?|\.js$/,req.isBrowser=isBrowser,s=req.s={contexts:contexts,newContext:newContext},req({}),each(["toUrl","undef","defined","specified"],function(e){req[e]=function(){var t=contexts[defContextName];return t.require[e].apply(t,arguments)}}),isBrowser&&(head=s.head=document.getElementsByTagName("head")[0],baseElement=document.getElementsByTagName("base")[0],baseElement&&(head=s.head=baseElement.parentNode)),req.onError=defaultOnError,req.createNode=function(e,t,i){var r=e.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");return r.type=e.scriptType||"text/javascript",r.charset="utf-8",r.async=!0,r},req.load=function(e,t,i){var r,n=e&&e.config||{};if(isBrowser)return(r=req.createNode(n,t,i)).setAttribute("data-requirecontext",e.contextName),r.setAttribute("data-requiremodule",t),!r.attachEvent||r.attachEvent.toString&&r.attachEvent.toString().indexOf("[native code")<0||isOpera?(r.addEventListener("load",e.onScriptLoad,!1),r.addEventListener("error",e.onScriptError,!1)):(useInteractive=!0,r.attachEvent("onreadystatechange",e.onScriptLoad)),r.src=i,n.onNodeCreated&&n.onNodeCreated(r,n,t,i),currentlyAddingScript=r,baseElement?head.insertBefore(r,baseElement):head.appendChild(r),currentlyAddingScript=null,r;if(isWebWorker)try{setTimeout(function(){},0),importScripts(i),e.completeLoad(t)}catch(r){e.onError(makeError("importscripts","importScripts failed for "+t+" at "+i,r,[t]))}},isBrowser&&!cfg.skipDataMain&&eachReverse(scripts(),function(e){if(head||(head=e.parentNode),dataMain=e.getAttribute("data-main"))return mainScript=dataMain,cfg.baseUrl||-1!==mainScript.indexOf("!")||(src=mainScript.split("/"),mainScript=src.pop(),subPath=src.length?src.join("/")+"/":"./",cfg.baseUrl=subPath),mainScript=mainScript.replace(jsSuffixRegExp,""),req.jsExtRegExp.test(mainScript)&&(mainScript=dataMain),cfg.deps=cfg.deps?cfg.deps.concat(mainScript):[mainScript],!0}),define=function(e,t,i){var r,n;"string"!=typeof e&&(i=t,t=e,e=null),isArray(t)||(i=t,t=null),!t&&isFunction(i)&&(t=[],i.length&&(i.toString().replace(commentRegExp,commentReplace).replace(cjsRequireRegExp,function(e,i){t.push(i)}),t=(1===i.length?["require"]:["require","exports","module"]).concat(t))),useInteractive&&(r=currentlyAddingScript||getInteractiveScript())&&(e||(e=r.getAttribute("data-requiremodule")),n=contexts[r.getAttribute("data-requirecontext")]),n?(n.defQueue.push([e,t,i]),n.defQueueMap[e]=!0):globalDefQueue.push([e,t,i])},define.amd={jQuery:!0},req.exec=function(text){return eval(text)},req(cfg)}function newContext(e){var t,i,r,n,o,a={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},s={},u={},c={},d=[],p={},f={},l={},h=1,m=1;function g(e,t,i){var r,n,o,s,u,c,d,p,f,l,h=t&&t.split("/"),m=a.map,g=m&&m["*"];if(e&&(c=(e=e.split("/")).length-1,a.nodeIdCompat&&jsSuffixRegExp.test(e[c])&&(e[c]=e[c].replace(jsSuffixRegExp,"")),"."===e[0].charAt(0)&&h&&(e=h.slice(0,h.length-1).concat(e)),function(e){var t,i;for(t=0;t<e.length;t++)if("."===(i=e[t]))e.splice(t,1),t-=1;else if(".."===i){if(0===t||1===t&&".."===e[2]||".."===e[t-1])continue;t>0&&(e.splice(t-1,2),t-=2)}}(e),e=e.join("/")),i&&m&&(h||g)){e:for(o=(n=e.split("/")).length;o>0;o-=1){if(u=n.slice(0,o).join("/"),h)for(s=h.length;s>0;s-=1)if((r=getOwn(m,h.slice(0,s).join("/")))&&(r=getOwn(r,u))){d=r,p=o;break e}!f&&g&&getOwn(g,u)&&(f=getOwn(g,u),l=o)}!d&&f&&(d=f,p=l),d&&(n.splice(0,p,d),e=n.join("/"))}return getOwn(a.pkgs,e)||e}function v(e){isBrowser&&each(scripts(),function(t){if(t.getAttribute("data-requiremodule")===e&&t.getAttribute("data-requirecontext")===r.contextName)return t.parentNode.removeChild(t),!0})}function x(e){var t=getOwn(a.paths,e);if(t&&isArray(t)&&t.length>1)return t.shift(),r.require.undef(e),r.makeRequire(null,{skipMap:!0})([e]),!0}function b(e){var t,i=e?e.indexOf("!"):-1;return i>-1&&(t=e.substring(0,i),e=e.substring(i+1,e.length)),[t,e]}function q(e,t,i,n){var o,a,s,u,c=null,d=t?t.name:null,f=e,l=!0,v="";return e||(l=!1,e="_@r"+(h+=1)),c=(u=b(e))[0],e=u[1],c&&(c=g(c,d,n),a=getOwn(p,c)),e&&(c?v=i?e:a&&a.normalize?a.normalize(e,function(e){return g(e,d,n)}):-1===e.indexOf("!")?g(e,d,n):e:(c=(u=b(v=g(e,d,n)))[0],v=u[1],i=!0,o=r.nameToUrl(v))),{prefix:c,name:v,parentMap:t,unnormalized:!!(s=!c||a||i?"":"_unnormalized"+(m+=1)),url:o,originalName:f,isDefine:l,id:(c?c+"!"+v:v)+s}}function E(e){var t=e.id,i=getOwn(s,t);return i||(i=s[t]=new r.Module(e)),i}function w(e,t,i){var r=e.id,n=getOwn(s,r);!hasProp(p,r)||n&&!n.defineEmitComplete?(n=E(e)).error&&"error"===t?i(n.error):n.on(t,i):"defined"===t&&i(p[r])}function y(e,t){var i=e.requireModules,r=!1;t?t(e):(each(i,function(t){var i=getOwn(s,t);i&&(i.error=e,i.events.error&&(r=!0,i.emit("error",e)))}),r||req.onError(e))}function S(){globalDefQueue.length&&(each(globalDefQueue,function(e){var t=e[0];"string"==typeof t&&(r.defQueueMap[t]=!0),d.push(e)}),globalDefQueue=[])}function k(e){delete s[e],delete u[e]}function M(){var e,i,n=1e3*a.waitSeconds,c=n&&r.startTime+n<(new Date).getTime(),d=[],f=[],l=!1,h=!0;if(!t){if(t=!0,eachProp(u,function(e){var t=e.map,r=t.id;if(e.enabled&&(t.isDefine||f.push(e),!e.error))if(!e.inited&&c)x(r)?(i=!0,l=!0):(d.push(r),v(r));else if(!e.inited&&e.fetched&&t.isDefine&&(l=!0,!t.prefix))return h=!1}),c&&d.length)return(e=makeError("timeout","Load timeout for modules: "+d,null,d)).contextName=r.contextName,y(e);h&&each(f,function(e){!function e(t,i,r){var n=t.map.id;t.error?t.emit("error",t.error):(i[n]=!0,each(t.depMaps,function(n,o){var a=n.id,u=getOwn(s,a);!u||t.depMatched[o]||r[a]||(getOwn(i,a)?(t.defineDep(o,p[a]),t.check()):e(u,i,r))}),r[n]=!0)}(e,{},{})}),c&&!i||!l||!isBrowser&&!isWebWorker||o||(o=setTimeout(function(){o=0,M()},50)),t=!1}}function O(e){hasProp(p,e[0])||E(q(e[0],null,!0)).init(e[1],e[2])}function j(e,t,i,r){e.detachEvent&&!isOpera?r&&e.detachEvent(r,t):e.removeEventListener(i,t,!1)}function P(e){var t=e.currentTarget||e.srcElement;return j(t,r.onScriptLoad,"load","onreadystatechange"),j(t,r.onScriptError,"error"),{node:t,id:t&&t.getAttribute("data-requiremodule")}}function R(){var e;for(S();d.length;){if(null===(e=d.shift())[0])return y(makeError("mismatch","Mismatched anonymous define() module: "+e[e.length-1]));O(e)}r.defQueueMap={}}return n={require:function(e){return e.require?e.require:e.require=r.makeRequire(e.map)},exports:function(e){if(e.usingExports=!0,e.map.isDefine)return e.exports?p[e.map.id]=e.exports:e.exports=p[e.map.id]={}},module:function(e){return e.module?e.module:e.module={id:e.map.id,uri:e.map.url,config:function(){return getOwn(a.config,e.map.id)||{}},exports:e.exports||(e.exports={})}}},(i=function(e){this.events=getOwn(c,e.id)||{},this.map=e,this.shim=getOwn(a.shim,e.id),this.depExports=[],this.depMaps=[],this.depMatched=[],this.pluginMaps={},this.depCount=0}).prototype={init:function(e,t,i,r){r=r||{},this.inited||(this.factory=t,i?this.on("error",i):this.events.error&&(i=bind(this,function(e){this.emit("error",e)})),this.depMaps=e&&e.slice(0),this.errback=i,this.inited=!0,this.ignore=r.ignore,r.enabled||this.enabled?this.enable():this.check())},defineDep:function(e,t){this.depMatched[e]||(this.depMatched[e]=!0,this.depCount-=1,this.depExports[e]=t)},fetch:function(){if(!this.fetched){this.fetched=!0,r.startTime=(new Date).getTime();var e=this.map;if(!this.shim)return e.prefix?this.callPlugin():this.load();r.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],bind(this,function(){return e.prefix?this.callPlugin():this.load()}))}},load:function(){var e=this.map.url;f[e]||(f[e]=!0,r.load(this.map.id,e))},check:function(){if(this.enabled&&!this.enabling){var e,t,i=this.map.id,n=this.depExports,o=this.exports,a=this.factory;if(this.inited){if(this.error)this.emit("error",this.error);else if(!this.defining){if(this.defining=!0,this.depCount<1&&!this.defined){if(isFunction(a)){if(this.events.error&&this.map.isDefine||req.onError!==defaultOnError)try{o=r.execCb(i,a,n,o)}catch(t){e=t}else o=r.execCb(i,a,n,o);if(this.map.isDefine&&void 0===o&&((t=this.module)?o=t.exports:this.usingExports&&(o=this.exports)),e)return e.requireMap=this.map,e.requireModules=this.map.isDefine?[this.map.id]:null,e.requireType=this.map.isDefine?"define":"require",y(this.error=e)}else o=a;if(this.exports=o,this.map.isDefine&&!this.ignore&&(p[i]=o,req.onResourceLoad)){var s=[];each(this.depMaps,function(e){s.push(e.normalizedMap||e)}),req.onResourceLoad(r,this.map,s)}k(i),this.defined=!0}this.defining=!1,this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else hasProp(r.defQueueMap,i)||this.fetch()}},callPlugin:function(){var e=this.map,t=e.id,i=q(e.prefix);this.depMaps.push(i),w(i,"defined",bind(this,function(i){var n,o,u,c=getOwn(l,this.map.id),d=this.map.name,p=this.map.parentMap?this.map.parentMap.name:null,f=r.makeRequire(e.parentMap,{enableBuildCallback:!0});return this.map.unnormalized?(i.normalize&&(d=i.normalize(d,function(e){return g(e,p,!0)})||""),w(o=q(e.prefix+"!"+d,this.map.parentMap,!0),"defined",bind(this,function(e){this.map.normalizedMap=o,this.init([],function(){return e},null,{enabled:!0,ignore:!0})})),void((u=getOwn(s,o.id))&&(this.depMaps.push(o),this.events.error&&u.on("error",bind(this,function(e){this.emit("error",e)})),u.enable()))):c?(this.map.url=r.nameToUrl(c),void this.load()):((n=bind(this,function(e){this.init([],function(){return e},null,{enabled:!0})})).error=bind(this,function(e){this.inited=!0,this.error=e,e.requireModules=[t],eachProp(s,function(e){0===e.map.id.indexOf(t+"_unnormalized")&&k(e.map.id)}),y(e)}),n.fromText=bind(this,function(i,o){var s=e.name,u=q(s),c=useInteractive;o&&(i=o),c&&(useInteractive=!1),E(u),hasProp(a.config,t)&&(a.config[s]=a.config[t]);try{req.exec(i)}catch(e){return y(makeError("fromtexteval","fromText eval for "+t+" failed: "+e,e,[t]))}c&&(useInteractive=!0),this.depMaps.push(u),r.completeLoad(s),f([s],n)}),void i.load(e.name,f,n,a))})),r.enable(i,this),this.pluginMaps[i.id]=i},enable:function(){u[this.map.id]=this,this.enabled=!0,this.enabling=!0,each(this.depMaps,bind(this,function(e,t){var i,o,a;if("string"==typeof e){if(e=q(e,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap),this.depMaps[t]=e,a=getOwn(n,e.id))return void(this.depExports[t]=a(this));this.depCount+=1,w(e,"defined",bind(this,function(e){this.undefed||(this.defineDep(t,e),this.check())})),this.errback?w(e,"error",bind(this,this.errback)):this.events.error&&w(e,"error",bind(this,function(e){this.emit("error",e)}))}i=e.id,o=s[i],hasProp(n,i)||!o||o.enabled||r.enable(e,this)})),eachProp(this.pluginMaps,bind(this,function(e){var t=getOwn(s,e.id);t&&!t.enabled&&r.enable(e,this)})),this.enabling=!1,this.check()},on:function(e,t){var i=this.events[e];i||(i=this.events[e]=[]),i.push(t)},emit:function(e,t){each(this.events[e],function(e){e(t)}),"error"===e&&delete this.events[e]}},(r={config:a,contextName:e,registry:s,defined:p,urlFetched:f,defQueue:d,defQueueMap:{},Module:i,makeModuleMap:q,nextTick:req.nextTick,onError:y,configure:function(e){if(e.baseUrl&&"/"!==e.baseUrl.charAt(e.baseUrl.length-1)&&(e.baseUrl+="/"),"string"==typeof e.urlArgs){var t=e.urlArgs;e.urlArgs=function(e,i){return(-1===i.indexOf("?")?"?":"&")+t}}var i=a.shim,n={paths:!0,bundles:!0,config:!0,map:!0};eachProp(e,function(e,t){n[t]?(a[t]||(a[t]={}),mixin(a[t],e,!0,!0)):a[t]=e}),e.bundles&&eachProp(e.bundles,function(e,t){each(e,function(e){e!==t&&(l[e]=t)})}),e.shim&&(eachProp(e.shim,function(e,t){isArray(e)&&(e={deps:e}),!e.exports&&!e.init||e.exportsFn||(e.exportsFn=r.makeShimExports(e)),i[t]=e}),a.shim=i),e.packages&&each(e.packages,function(e){var t;t=(e="string"==typeof e?{name:e}:e).name,e.location&&(a.paths[t]=e.location),a.pkgs[t]=e.name+"/"+(e.main||"main").replace(currDirRegExp,"").replace(jsSuffixRegExp,"")}),eachProp(s,function(e,t){e.inited||e.map.unnormalized||(e.map=q(t,null,!0))}),(e.deps||e.callback)&&r.require(e.deps||[],e.callback)},makeShimExports:function(e){return function(){var t;return e.init&&(t=e.init.apply(global,arguments)),t||e.exports&&getGlobal(e.exports)}},makeRequire:function(t,i){function o(a,u,c){var d,f;return i.enableBuildCallback&&u&&isFunction(u)&&(u.__requireJsBuild=!0),"string"==typeof a?isFunction(u)?y(makeError("requireargs","Invalid require call"),c):t&&hasProp(n,a)?n[a](s[t.id]):req.get?req.get(r,a,t,o):(d=q(a,t,!1,!0).id,hasProp(p,d)?p[d]:y(makeError("notloaded",'Module name "'+d+'" has not been loaded yet for context: '+e+(t?"":". Use require([])")))):(R(),r.nextTick(function(){R(),(f=E(q(null,t))).skipMap=i.skipMap,f.init(a,u,c,{enabled:!0}),M()}),o)}return i=i||{},mixin(o,{isBrowser:isBrowser,toUrl:function(e){var i,n=e.lastIndexOf("."),o=e.split("/")[0];return-1!==n&&(!("."===o||".."===o)||n>1)&&(i=e.substring(n,e.length),e=e.substring(0,n)),r.nameToUrl(g(e,t&&t.id,!0),i,!0)},defined:function(e){return hasProp(p,q(e,t,!1,!0).id)},specified:function(e){return e=q(e,t,!1,!0).id,hasProp(p,e)||hasProp(s,e)}}),t||(o.undef=function(e){S();var i=q(e,t,!0),n=getOwn(s,e);n.undefed=!0,v(e),delete p[e],delete f[i.url],delete c[e],eachReverse(d,function(t,i){t[0]===e&&d.splice(i,1)}),delete r.defQueueMap[e],n&&(n.events.defined&&(c[e]=n.events),k(e))}),o},enable:function(e){getOwn(s,e.id)&&E(e).enable()},completeLoad:function(e){var t,i,n,o=getOwn(a.shim,e)||{},u=o.exports;for(S();d.length;){if(null===(i=d.shift())[0]){if(i[0]=e,t)break;t=!0}else i[0]===e&&(t=!0);O(i)}if(r.defQueueMap={},n=getOwn(s,e),!t&&!hasProp(p,e)&&n&&!n.inited){if(!(!a.enforceDefine||u&&getGlobal(u)))return x(e)?void 0:y(makeError("nodefine","No define call for "+e,null,[e]));O([e,o.deps||[],o.exportsFn])}M()},nameToUrl:function(e,t,i){var n,o,s,u,c,d,p=getOwn(a.pkgs,e);if(p&&(e=p),d=getOwn(l,e))return r.nameToUrl(d,t,i);if(req.jsExtRegExp.test(e))u=e+(t||"");else{for(n=a.paths,s=(o=e.split("/")).length;s>0;s-=1)if(c=getOwn(n,o.slice(0,s).join("/"))){isArray(c)&&(c=c[0]),o.splice(0,s,c);break}u=o.join("/"),u=("/"===(u+=t||(/^data\:|^blob\:|\?/.test(u)||i?"":".js")).charAt(0)||u.match(/^[\w\+\.\-]+:/)?"":a.baseUrl)+u}return a.urlArgs&&!/^blob\:/.test(u)?u+a.urlArgs(e,u):u},load:function(e,t){req.load(r,e,t)},execCb:function(e,t,i,r){return t.apply(r,i)},onScriptLoad:function(e){if("load"===e.type||readyRegExp.test((e.currentTarget||e.srcElement).readyState)){interactiveScript=null;var t=P(e);r.completeLoad(t.id)}},onScriptError:function(e){var t=P(e);if(!x(t.id)){var i=[];return eachProp(s,function(e,r){0!==r.indexOf("_@r")&&each(e.depMaps,function(e){if(e.id===t.id)return i.push(r),!0})}),y(makeError("scripterror",'Script error for "'+t.id+(i.length?'", needed by: '+i.join(", "):'"'),e,[t.id]))}}}).require=r.makeRequire(),r}function getInteractiveScript(){return interactiveScript&&"interactive"===interactiveScript.readyState?interactiveScript:(eachReverse(scripts(),function(e){if("interactive"===e.readyState)return interactiveScript=e}),interactiveScript)}}(this,"undefined"==typeof setTimeout?void 0:setTimeout);
+var requirejs,require,define;!function(global,setTimeout){var req,s,head,baseElement,dataMain,src,interactiveScript,currentlyAddingScript,mainScript,subPath,version="2.3.6",commentRegExp=/\/\*[\s\S]*?\*\/|([^:"'=]|^)\/\/.*$/gm,cjsRequireRegExp=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,jsSuffixRegExp=/\.js$/,currDirRegExp=/^\.\//,op=Object.prototype,ostring=op.toString,hasOwn=op.hasOwnProperty,isBrowser=!("undefined"==typeof window||"undefined"==typeof navigator||!window.document),isWebWorker=!isBrowser&&"undefined"!=typeof importScripts,readyRegExp=isBrowser&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,defContextName="_",isOpera="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),contexts={},cfg={},globalDefQueue=[],useInteractive=!1;function commentReplace(e,t){return t||""}function isFunction(e){return"[object Function]"===ostring.call(e)}function isArray(e){return"[object Array]"===ostring.call(e)}function each(e,t){var i;if(e)for(i=0;i<e.length&&(!e[i]||!t(e[i],i,e));i+=1);}function eachReverse(e,t){var i;if(e)for(i=e.length-1;i>-1&&(!e[i]||!t(e[i],i,e));i-=1);}function hasProp(e,t){return hasOwn.call(e,t)}function getOwn(e,t){return hasProp(e,t)&&e[t]}function eachProp(e,t){var i;for(i in e)if(hasProp(e,i)&&t(e[i],i))break}function mixin(e,t,i,r){return t&&eachProp(t,function(t,n){!i&&hasProp(e,n)||(!r||"object"!=typeof t||!t||isArray(t)||isFunction(t)||t instanceof RegExp?e[n]=t:(e[n]||(e[n]={}),mixin(e[n],t,i,r)))}),e}function bind(e,t){return function(){return t.apply(e,arguments)}}function scripts(){return document.getElementsByTagName("script")}function defaultOnError(e){throw e}function getGlobal(e){if(!e)return e;var t=global;return each(e.split("."),function(e){t=t[e]}),t}function makeError(e,t,i,r){var n=new Error(t+"\nhttps://requirejs.org/docs/errors.html#"+e);return n.requireType=e,n.requireModules=r,i&&(n.originalError=i),n}if(void 0===define){if(void 0!==requirejs){if(isFunction(requirejs))return;cfg=requirejs,requirejs=void 0}void 0===require||isFunction(require)||(cfg=require,require=void 0),req=requirejs=function(e,t,i,r){var n,o,a=defContextName;return isArray(e)||"string"==typeof e||(o=e,isArray(t)?(e=t,t=i,i=r):e=[]),o&&o.context&&(a=o.context),(n=getOwn(contexts,a))||(n=contexts[a]=req.s.newContext(a)),o&&n.configure(o),n.require(e,t,i)},req.config=function(e){return req(e)},req.nextTick=void 0!==setTimeout?function(e){setTimeout(e,4)}:function(e){e()},require||(require=req),req.version=version,req.jsExtRegExp=/^\/|:|\?|\.js$/,req.isBrowser=isBrowser,s=req.s={contexts:contexts,newContext:newContext},req({}),each(["toUrl","undef","defined","specified"],function(e){req[e]=function(){var t=contexts[defContextName];return t.require[e].apply(t,arguments)}}),isBrowser&&(head=s.head=document.getElementsByTagName("head")[0],baseElement=document.getElementsByTagName("base")[0],baseElement&&(head=s.head=baseElement.parentNode)),req.onError=defaultOnError,req.createNode=function(e,t,i){var r=e.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");return r.type=e.scriptType||"text/javascript",r.charset="utf-8",r.async=!0,r},req.load=function(e,t,i){var r,n=e&&e.config||{};if(isBrowser)return(r=req.createNode(n,t,i)).setAttribute("data-requirecontext",e.contextName),r.setAttribute("data-requiremodule",t),!r.attachEvent||r.attachEvent.toString&&r.attachEvent.toString().indexOf("[native code")<0||isOpera?(r.addEventListener("load",e.onScriptLoad,!1),r.addEventListener("error",e.onScriptError,!1)):(useInteractive=!0,r.attachEvent("onreadystatechange",e.onScriptLoad)),r.src=i,n.onNodeCreated&&n.onNodeCreated(r,n,t,i),currentlyAddingScript=r,baseElement?head.insertBefore(r,baseElement):head.appendChild(r),currentlyAddingScript=null,r;if(isWebWorker)try{setTimeout(function(){},0),importScripts(i),e.completeLoad(t)}catch(r){e.onError(makeError("importscripts","importScripts failed for "+t+" at "+i,r,[t]))}},isBrowser&&!cfg.skipDataMain&&eachReverse(scripts(),function(e){if(head||(head=e.parentNode),dataMain=e.getAttribute("data-main"))return mainScript=dataMain,cfg.baseUrl||-1!==mainScript.indexOf("!")||(src=mainScript.split("/"),mainScript=src.pop(),subPath=src.length?src.join("/")+"/":"./",cfg.baseUrl=subPath),mainScript=mainScript.replace(jsSuffixRegExp,""),req.jsExtRegExp.test(mainScript)&&(mainScript=dataMain),cfg.deps=cfg.deps?cfg.deps.concat(mainScript):[mainScript],!0}),define=function(e,t,i){var r,n;"string"!=typeof e&&(i=t,t=e,e=null),isArray(t)||(i=t,t=null),!t&&isFunction(i)&&(t=[],i.length&&(i.toString().replace(commentRegExp,commentReplace).replace(cjsRequireRegExp,function(e,i){t.push(i)}),t=(1===i.length?["require"]:["require","exports","module"]).concat(t))),useInteractive&&(r=currentlyAddingScript||getInteractiveScript())&&(e||(e=r.getAttribute("data-requiremodule")),n=contexts[r.getAttribute("data-requirecontext")]),n?(n.defQueue.push([e,t,i]),n.defQueueMap[e]=!0):globalDefQueue.push([e,t,i])},define.amd={jQuery:!0},req.exec=function(text){return eval(text)},req(cfg)}function newContext(e){var t,i,r,n,o,a={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},s={},u={},c={},d=[],p={},f={},l={},h=1,m=1;function g(e,t,i){var r,n,o,s,u,c,d,p,f,l,h=t&&t.split("/"),m=a.map,g=m&&m["*"];if(e&&(c=(e=e.split("/")).length-1,a.nodeIdCompat&&jsSuffixRegExp.test(e[c])&&(e[c]=e[c].replace(jsSuffixRegExp,"")),"."===e[0].charAt(0)&&h&&(e=h.slice(0,h.length-1).concat(e)),function(e){var t,i;for(t=0;t<e.length;t++)if("."===(i=e[t]))e.splice(t,1),t-=1;else if(".."===i){if(0===t||1===t&&".."===e[2]||".."===e[t-1])continue;t>0&&(e.splice(t-1,2),t-=2)}}(e),e=e.join("/")),i&&m&&(h||g)){e:for(o=(n=e.split("/")).length;o>0;o-=1){if(u=n.slice(0,o).join("/"),h)for(s=h.length;s>0;s-=1)if((r=getOwn(m,h.slice(0,s).join("/")))&&(r=getOwn(r,u))){d=r,p=o;break e}!f&&g&&getOwn(g,u)&&(f=getOwn(g,u),l=o)}!d&&f&&(d=f,p=l),d&&(n.splice(0,p,d),e=n.join("/"))}return getOwn(a.pkgs,e)||e}function v(e){isBrowser&&each(scripts(),function(t){if(t.getAttribute("data-requiremodule")===e&&t.getAttribute("data-requirecontext")===r.contextName)return t.parentNode.removeChild(t),!0})}function x(e){var t=getOwn(a.paths,e);if(t&&isArray(t)&&t.length>1)return t.shift(),r.require.undef(e),r.makeRequire(null,{skipMap:!0})([e]),!0}function b(e){var t,i=e?e.indexOf("!"):-1;return i>-1&&(t=e.substring(0,i),e=e.substring(i+1,e.length)),[t,e]}function q(e,t,i,n){var o,a,s,u,c=null,d=t?t.name:null,f=e,l=!0,v="";return e||(l=!1,e="_@r"+(h+=1)),c=(u=b(e))[0],e=u[1],c&&(c=g(c,d,n),a=getOwn(p,c)),e&&(c?v=i?e:a&&a.normalize?a.normalize(e,function(e){return g(e,d,n)}):-1===e.indexOf("!")?g(e,d,n):e:(c=(u=b(v=g(e,d,n)))[0],v=u[1],i=!0,o=r.nameToUrl(v))),{prefix:c,name:v,parentMap:t,unnormalized:!!(s=!c||a||i?"":"_unnormalized"+(m+=1)),url:o,originalName:f,isDefine:l,id:(c?c+"!"+v:v)+s}}function E(e){var t=e.id,i=getOwn(s,t);return i||(i=s[t]=new r.Module(e)),i}function w(e,t,i){var r=e.id,n=getOwn(s,r);!hasProp(p,r)||n&&!n.defineEmitComplete?(n=E(e)).error&&"error"===t?i(n.error):n.on(t,i):"defined"===t&&i(p[r])}function y(e,t){var i=e.requireModules,r=!1;t?t(e):(each(i,function(t){var i=getOwn(s,t);i&&(i.error=e,i.events.error&&(r=!0,i.emit("error",e)))}),r||req.onError(e))}function S(){globalDefQueue.length&&(each(globalDefQueue,function(e){var t=e[0];"string"==typeof t&&(r.defQueueMap[t]=!0),d.push(e)}),globalDefQueue=[])}function k(e){delete s[e],delete u[e]}function M(){var e,i,n=1e3*a.waitSeconds,c=n&&r.startTime+n<(new Date).getTime(),d=[],f=[],l=!1,h=!0;if(!t){if(t=!0,eachProp(u,function(e){var t=e.map,r=t.id;if(e.enabled&&(t.isDefine||f.push(e),!e.error))if(!e.inited&&c)x(r)?(i=!0,l=!0):(d.push(r),v(r));else if(!e.inited&&e.fetched&&t.isDefine&&(l=!0,!t.prefix))return h=!1}),c&&d.length)return(e=makeError("timeout","Load timeout for modules: "+d,null,d)).contextName=r.contextName,y(e);h&&each(f,function(e){!function e(t,i,r){var n=t.map.id;t.error?t.emit("error",t.error):(i[n]=!0,each(t.depMaps,function(n,o){var a=n.id,u=getOwn(s,a);!u||t.depMatched[o]||r[a]||(getOwn(i,a)?(t.defineDep(o,p[a]),t.check()):e(u,i,r))}),r[n]=!0)}(e,{},{})}),c&&!i||!l||!isBrowser&&!isWebWorker||o||(o=setTimeout(function(){o=0,M()},50)),t=!1}}function O(e){hasProp(p,e[0])||E(q(e[0],null,!0)).init(e[1],e[2])}function j(e,t,i,r){e.detachEvent&&!isOpera?r&&e.detachEvent(r,t):e.removeEventListener(i,t,!1)}function P(e){var t=e.currentTarget||e.srcElement;return j(t,r.onScriptLoad,"load","onreadystatechange"),j(t,r.onScriptError,"error"),{node:t,id:t&&t.getAttribute("data-requiremodule")}}function R(){var e;for(S();d.length;){if(null===(e=d.shift())[0])return y(makeError("mismatch","Mismatched anonymous define() module: "+e[e.length-1]));O(e)}r.defQueueMap={}}return n={require:function(e){return e.require?e.require:e.require=r.makeRequire(e.map)},exports:function(e){if(e.usingExports=!0,e.map.isDefine)return e.exports?p[e.map.id]=e.exports:e.exports=p[e.map.id]={}},module:function(e){return e.module?e.module:e.module={id:e.map.id,uri:e.map.url,config:function(){return getOwn(a.config,e.map.id)||{}},exports:e.exports||(e.exports={})}}},(i=function(e){this.events=getOwn(c,e.id)||{},this.map=e,this.shim=getOwn(a.shim,e.id),this.depExports=[],this.depMaps=[],this.depMatched=[],this.pluginMaps={},this.depCount=0}).prototype={init:function(e,t,i,r){r=r||{},this.inited||(this.factory=t,i?this.on("error",i):this.events.error&&(i=bind(this,function(e){this.emit("error",e)})),this.depMaps=e&&e.slice(0),this.errback=i,this.inited=!0,this.ignore=r.ignore,r.enabled||this.enabled?this.enable():this.check())},defineDep:function(e,t){this.depMatched[e]||(this.depMatched[e]=!0,this.depCount-=1,this.depExports[e]=t)},fetch:function(){if(!this.fetched){this.fetched=!0,r.startTime=(new Date).getTime();var e=this.map;if(!this.shim)return e.prefix?this.callPlugin():this.load();r.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],bind(this,function(){return e.prefix?this.callPlugin():this.load()}))}},load:function(){var e=this.map.url;f[e]||(f[e]=!0,r.load(this.map.id,e))},check:function(){if(this.enabled&&!this.enabling){var e,t,i=this.map.id,n=this.depExports,o=this.exports,a=this.factory;if(this.inited){if(this.error)this.emit("error",this.error);else if(!this.defining){if(this.defining=!0,this.depCount<1&&!this.defined){if(isFunction(a)){if(this.events.error&&this.map.isDefine||req.onError!==defaultOnError)try{o=r.execCb(i,a,n,o)}catch(t){e=t}else o=r.execCb(i,a,n,o);if(this.map.isDefine&&void 0===o&&((t=this.module)?o=t.exports:this.usingExports&&(o=this.exports)),e)return e.requireMap=this.map,e.requireModules=this.map.isDefine?[this.map.id]:null,e.requireType=this.map.isDefine?"define":"require",y(this.error=e)}else o=a;if(this.exports=o,this.map.isDefine&&!this.ignore&&(p[i]=o,req.onResourceLoad)){var s=[];each(this.depMaps,function(e){s.push(e.normalizedMap||e)}),req.onResourceLoad(r,this.map,s)}k(i),this.defined=!0}this.defining=!1,this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else hasProp(r.defQueueMap,i)||this.fetch()}},callPlugin:function(){var e=this.map,t=e.id,i=q(e.prefix);this.depMaps.push(i),w(i,"defined",bind(this,function(i){var n,o,u,c=getOwn(l,this.map.id),d=this.map.name,p=this.map.parentMap?this.map.parentMap.name:null,f=r.makeRequire(e.parentMap,{enableBuildCallback:!0});return this.map.unnormalized?(i.normalize&&(d=i.normalize(d,function(e){return g(e,p,!0)})||""),w(o=q(e.prefix+"!"+d,this.map.parentMap,!0),"defined",bind(this,function(e){this.map.normalizedMap=o,this.init([],function(){return e},null,{enabled:!0,ignore:!0})})),void((u=getOwn(s,o.id))&&(this.depMaps.push(o),this.events.error&&u.on("error",bind(this,function(e){this.emit("error",e)})),u.enable()))):c?(this.map.url=r.nameToUrl(c),void this.load()):((n=bind(this,function(e){this.init([],function(){return e},null,{enabled:!0})})).error=bind(this,function(e){this.inited=!0,this.error=e,e.requireModules=[t],eachProp(s,function(e){0===e.map.id.indexOf(t+"_unnormalized")&&k(e.map.id)}),y(e)}),n.fromText=bind(this,function(i,o){var s=e.name,u=q(s),c=useInteractive;o&&(i=o),c&&(useInteractive=!1),E(u),hasProp(a.config,t)&&(a.config[s]=a.config[t]);try{req.exec(i)}catch(e){return y(makeError("fromtexteval","fromText eval for "+t+" failed: "+e,e,[t]))}c&&(useInteractive=!0),this.depMaps.push(u),r.completeLoad(s),f([s],n)}),void i.load(e.name,f,n,a))})),r.enable(i,this),this.pluginMaps[i.id]=i},enable:function(){u[this.map.id]=this,this.enabled=!0,this.enabling=!0,each(this.depMaps,bind(this,function(e,t){var i,o,a;if("string"==typeof e){if(e=q(e,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap),this.depMaps[t]=e,a=getOwn(n,e.id))return void(this.depExports[t]=a(this));this.depCount+=1,w(e,"defined",bind(this,function(e){this.undefed||(this.defineDep(t,e),this.check())})),this.errback?w(e,"error",bind(this,this.errback)):this.events.error&&w(e,"error",bind(this,function(e){this.emit("error",e)}))}i=e.id,o=s[i],hasProp(n,i)||!o||o.enabled||r.enable(e,this)})),eachProp(this.pluginMaps,bind(this,function(e){var t=getOwn(s,e.id);t&&!t.enabled&&r.enable(e,this)})),this.enabling=!1,this.check()},on:function(e,t){var i=this.events[e];i||(i=this.events[e]=[]),i.push(t)},emit:function(e,t){each(this.events[e],function(e){e(t)}),"error"===e&&delete this.events[e]}},(r={config:a,contextName:e,registry:s,defined:p,urlFetched:f,defQueue:d,defQueueMap:{},Module:i,makeModuleMap:q,nextTick:req.nextTick,onError:y,configure:function(e){if(e.baseUrl&&"/"!==e.baseUrl.charAt(e.baseUrl.length-1)&&(e.baseUrl+="/"),"string"==typeof e.urlArgs){var t=e.urlArgs;e.urlArgs=function(e,i){return(-1===i.indexOf("?")?"?":"&")+t}}var i=a.shim,n={paths:!0,bundles:!0,config:!0,map:!0};eachProp(e,function(e,t){n[t]?(a[t]||(a[t]={}),mixin(a[t],e,!0,!0)):a[t]=e}),e.bundles&&eachProp(e.bundles,function(e,t){each(e,function(e){e!==t&&(l[e]=t)})}),e.shim&&(eachProp(e.shim,function(e,t){isArray(e)&&(e={deps:e}),!e.exports&&!e.init||e.exportsFn||(e.exportsFn=r.makeShimExports(e)),i[t]=e}),a.shim=i),e.packages&&each(e.packages,function(e){var t;t=(e="string"==typeof e?{name:e}:e).name,e.location&&(a.paths[t]=e.location),a.pkgs[t]=e.name+"/"+(e.main||"main").replace(currDirRegExp,"").replace(jsSuffixRegExp,"")}),eachProp(s,function(e,t){e.inited||e.map.unnormalized||(e.map=q(t,null,!0))}),(e.deps||e.callback)&&r.require(e.deps||[],e.callback)},makeShimExports:function(e){return function(){var t;return e.init&&(t=e.init.apply(global,arguments)),t||e.exports&&getGlobal(e.exports)}},makeRequire:function(t,i){function o(a,u,c){var d,f;return i.enableBuildCallback&&u&&isFunction(u)&&(u.__requireJsBuild=!0),"string"==typeof a?isFunction(u)?y(makeError("requireargs","Invalid require call"),c):t&&hasProp(n,a)?n[a](s[t.id]):req.get?req.get(r,a,t,o):(d=q(a,t,!1,!0).id,hasProp(p,d)?p[d]:y(makeError("notloaded",'Module name "'+d+'" has not been loaded yet for context: '+e+(t?"":". Use require([])")))):(R(),r.nextTick(function(){R(),(f=E(q(null,t))).skipMap=i.skipMap,f.init(a,u,c,{enabled:!0}),M()}),o)}return i=i||{},mixin(o,{isBrowser:isBrowser,toUrl:function(e){var i,n=e.lastIndexOf("."),o=e.split("/")[0];return-1!==n&&(!("."===o||".."===o)||n>1)&&(i=e.substring(n,e.length),e=e.substring(0,n)),r.nameToUrl(g(e,t&&t.id,!0),i,!0)},defined:function(e){return hasProp(p,q(e,t,!1,!0).id)},specified:function(e){return e=q(e,t,!1,!0).id,hasProp(p,e)||hasProp(s,e)}}),t||(o.undef=function(e){S();var i=q(e,t,!0),n=getOwn(s,e);n.undefed=!0,v(e),delete p[e],delete f[i.url],delete c[e],eachReverse(d,function(t,i){t[0]===e&&d.splice(i,1)}),delete r.defQueueMap[e],n&&(n.events.defined&&(c[e]=n.events),k(e))}),o},enable:function(e){getOwn(s,e.id)&&E(e).enable()},completeLoad:function(e){var t,i,n,o=getOwn(a.shim,e)||{},u=o.exports;for(S();d.length;){if(null===(i=d.shift())[0]){if(i[0]=e,t)break;t=!0}else i[0]===e&&(t=!0);O(i)}if(r.defQueueMap={},n=getOwn(s,e),!t&&!hasProp(p,e)&&n&&!n.inited){if(!(!a.enforceDefine||u&&getGlobal(u)))return x(e)?void 0:y(makeError("nodefine","No define call for "+e,null,[e]));O([e,o.deps||[],o.exportsFn])}M()},nameToUrl:function(e,t,i){var n,o,s,u,c,d,p=getOwn(a.pkgs,e);if(p&&(e=p),d=getOwn(l,e))return r.nameToUrl(d,t,i);if(req.jsExtRegExp.test(e))u=e+(t||"");else{for(n=a.paths,s=(o=e.split("/")).length;s>0;s-=1)if(c=getOwn(n,o.slice(0,s).join("/"))){isArray(c)&&(c=c[0]),o.splice(0,s,c);break}u=o.join("/"),u=("/"===(u+=t||(/^data\:|^blob\:|\?/.test(u)||i?"":".js")).charAt(0)||u.match(/^[\w\+\.\-]+:/)?"":a.baseUrl)+u}return a.urlArgs&&!/^blob\:/.test(u)?u+a.urlArgs(e,u):u;},load:function(e,t){req.load(r,e,t)},execCb:function(e,t,i,r){return t.apply(r,i)},onScriptLoad:function(e){if("load"===e.type||readyRegExp.test((e.currentTarget||e.srcElement).readyState)){interactiveScript=null;var t=P(e);r.completeLoad(t.id)}},onScriptError:function(e){var t=P(e);if(!x(t.id)){var i=[];return eachProp(s,function(e,r){0!==r.indexOf("_@r")&&each(e.depMaps,function(e){if(e.id===t.id)return i.push(r),!0})}),y(makeError("scripterror",'Script error for "'+t.id+(i.length?'", needed by: '+i.join(", "):'"'),e,[t.id]))}}}).require=r.makeRequire(),r;}function getInteractiveScript(){return interactiveScript&&"interactive"===interactiveScript.readyState?interactiveScript:(eachReverse(scripts(),function(e){if("interactive"===e.readyState)return interactiveScript=e}),interactiveScript)}}(this,"undefined"==typeof setTimeout?void 0:setTimeout);
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
index 9fcea4977cf..d3136fd9a6c 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
@@ -33,7 +33,7 @@ import { BROWSER_PANELS } from '../../../../../browser/static/js/constants';
 import usePreferences from '../../../../../preferences/static/js/store';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   display: 'flex',
   flexDirection: 'column',
   flexGrow: 1,
@@ -861,7 +861,9 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug,
             {gettext('Clear All')}
           </DefaultButton>
         </Box>
-        <Box className='DebuggerArgument-actionBtn' marginLeft="auto">
+        <Box className='DebuggerArgument-actionBtn' sx={{
+          marginLeft: 'auto'
+        }}>
           <DefaultButton className='DebuggerArgument-buttonMargin' onClick={() => { props.closeModal(); }} startIcon={<CloseSharpIcon onClick={() => { props.closeModal(); }} />}>
             {gettext('Cancel')}
           </DefaultButton>
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
index 6aea1aabed3..7fd92539e4b 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
@@ -1155,7 +1155,16 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panelId,
       <DebuggerContext.Provider value={DebuggerContextValue}>
         <DebuggerEventsContext.Provider value={eventBus.current}>
           <Loader message={loaderText} />
-          <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
+          <Box
+            tabIndex="0"
+            ref={containerRef}
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: '1'
+            }}>
             <ToolBar
               containerRef={containerRef}
             />
diff --git a/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx b/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
index 6f0690dc13c..6352e66c8e7 100644
--- a/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
@@ -11,7 +11,6 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 
 import { styled } from '@mui/material/styles';
 
-import { Box } from '@mui/material';
 import FormatIndentIncreaseIcon from '@mui/icons-material/FormatIndentIncrease';
 import FormatIndentDecreaseIcon from '@mui/icons-material/FormatIndentDecrease';
 import PlayCircleFilledWhiteIcon from '@mui/icons-material/PlayCircleFilledWhite';
@@ -31,7 +30,7 @@ import { useKeyboardShortcuts } from '../../../../../static/js/custom_hooks';
 
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   padding: '2px 4px',
   display: 'flex',
   alignItems: 'center',
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/ConnectionBar.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/ConnectionBar.jsx
index 82ff42a5e4d..411dc30c937 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/components/ConnectionBar.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/components/ConnectionBar.jsx
@@ -15,7 +15,7 @@ import { DefaultButton, PgButtonGroup, PgIconButton } from '../../../../../../st
 import { Box, Tooltip, CircularProgress } from '@mui/material';
 import { ConnectedIcon, DisconnectedIcon } from '../../../../../../static/js/components/ExternalIcon';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   padding: '2px 4px',
   display: 'flex',
   alignItems: 'center',
@@ -77,8 +77,17 @@ export default function ConnectionBar({status, bgcolor, fgcolor, title}) {
         />
         <DefaultButton className='Status-connectionButton' style={{backgroundColor: bgcolor, color: fgcolor}} data-test="btn-conn-title">
           <Tooltip title={title}>
-            <Box display="flex" width="100%">
-              <Box textOverflow="ellipsis" overflow="hidden" marginRight="auto">
+            <Box
+              sx={{
+                display: 'flex',
+                width: '100%'
+              }}>
+              <Box
+                sx={{
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  marginRight: 'auto'
+                }}>
                 {status == STATUS.CONNECTING && (gettext('(Obtaining connection...)')+' ')}
                 {status == STATUS.FAILED && (gettext('(Connection failed)')+' ')}
                 {title}
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx
index 14c386a02a3..9d6a60f4b4e 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx
@@ -26,7 +26,6 @@ import ERDDialogs from '../dialogs';
 import ConfirmSaveContent from '../../../../../../static/js/Dialogs/ConfirmSaveContent';
 import Loader from '../../../../../../static/js/components/Loader';
 import { MainToolBar } from './MainToolBar';
-import { Box } from '@mui/material';
 import EventBus from '../../../../../../static/js/helpers/EventBus';
 import { ERD_EVENTS } from '../ERDConstants';
 import getApiInstance, { callFetch, parseApiError } from '../../../../../../static/js/api_instance';
@@ -85,7 +84,7 @@ const getCanvasGrid = (theme)=>{
   return `url("data:image/svg+xml, %3Csvg width='100%25' viewBox='0 0 45 45' style='background-color:${erdCanvasBg}' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='15' height='15' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 15 0 L 0 0 0 15' fill='none' stroke='${erdGridColor}' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='grid' width='45' height='45' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23smallGrid)'/%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='${erdGridColor}' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E%0A")`;
 };
 
-const StyledBox = styled(Box)(({theme})=>({
+const StyledBox = styled('div')(({theme})=>({
   '& .ERDTool-diagramContainer': {
     position: 'relative',
     width: '100%',
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
index 457e9a7ebca..9b9447fec60 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/components/MainToolBar.jsx
@@ -9,7 +9,7 @@
 import React, {useCallback, useEffect, useState} from 'react';
 import _ from 'lodash';
 import { styled } from '@mui/material/styles';
-import { Box, useTheme } from '@mui/material';
+import { useTheme } from '@mui/material';
 import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -42,7 +42,7 @@ import { withColorPicker } from '../../../../../../static/js/helpers/withColorPi
 import { useApplicationState } from '../../../../../../settings/static/ApplicationStateProvider';
 import { useDelayDebounce } from '../../../../../../static/js/custom_hooks';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   padding: '2px 4px',
   display: 'flex',
   alignItems: 'center',
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
index 1b5bd6477a1..14e11a2eb6e 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/nodes/TableNode.jsx
@@ -360,18 +360,34 @@ export class TableNodeWidget extends React.Component {
 
     return (
       <Box className='TableNode-columnSection' key={col.attnum} data-test="column-row">
-        <Box marginRight="auto" padding="0" minHeight="0" display="flex" alignItems="center">
+        <Box
+          sx={{
+            marginRight: 'auto',
+            padding: '0',
+            minHeight: '0',
+            display: 'flex',
+            alignItems: 'center'
+          }}>
           {this.generatePort(leftPort)}
         </Box>
         <Box className='TableNode-columnName'>
           <RowIcon icon={icon} />
-          <Box margin="auto 0">
+          <Box sx={{
+            margin: 'auto 0'
+          }}>
             <span data-test="column-name">{col.name}</span>&nbsp;
             {this.state.show_details &&
             <span data-test="column-type">{cltype + (col.colconstype == 'i' ? ` (${gettext('IDENTITY')})`:'')}</span>}
           </Box>
         </Box>
-        <Box marginLeft="auto" padding="0" minHeight="0" display="flex" alignItems="center">
+        <Box
+          sx={{
+            marginLeft: 'auto',
+            padding: '0',
+            minHeight: '0',
+            display: 'flex',
+            alignItems: 'center'
+          }}>
           {this.generatePort(rightPort)}
         </Box>
       </Box>
diff --git a/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx b/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx
index 5633972b100..0cbcac512a9 100644
--- a/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx
+++ b/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx
@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import pgAdmin from 'sources/pgadmin';
 import Table from '../../../../static/js/components/Table';
 
-const StyledBox = styled(Box)(({theme}) =>
+const StyledBox = styled('div')(({theme}) =>
   ({
     height: '100%',
     '& .ImportExportServers-noOverflow': {
diff --git a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
index 0f2f0d582a0..f88eb0a29c4 100644
--- a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
+++ b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect } from 'react';
-import { Box, styled, useTheme } from '@mui/material';
+import { styled, useTheme } from '@mui/material';
 import url_for from 'sources/url_for';
 import PropTypes from 'prop-types';
 
@@ -23,7 +23,7 @@ import gettext from 'sources/gettext';
 import { useApplicationState } from '../../../../../settings/static/ApplicationStateProvider';
 import { LAYOUT_EVENTS } from '../../../../../static/js/helpers/Layout';
 
-const Root = styled(Box)(()=>({
+const Root = styled('div')(()=>({
   width: '100%',
   height: '100%',
   display: 'flex',
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
index 20f2528c7bb..ef7b0ab36d6 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
@@ -71,7 +71,9 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
       <Grid
         container
         direction="row"
-        alignItems="center"
+        sx={{
+          alignItems: 'center'
+        }}
       >
         <Grid sx={{padding: '0.3rem'}} size={{ lg: 2, md: 2, sm: 2, xs: 2 }}>
           <Typography id={label}>{label}</Typography>
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
index 906bd05cc57..2ccfb322bdf 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
@@ -24,7 +24,7 @@ import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid
 import { usePgAdmin } from '../../../../../static/js/PgAdminProvider';
 
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   paddingTop: '0.5rem',
   display: 'flex',
   height: '100%',
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
index c6c0388936c..be8d8cde6ba 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
@@ -749,7 +749,9 @@ export function SchemaDiffCompare({ params }) {
         <Grid
           container
           direction="row"
-          alignItems="center"
+          sx={{
+            alignItems: 'center'
+          }}
         >
           <Grid size={{ lg: 7, md: 7, sm: 10, xs: 10 }}>
             <InputComponent
@@ -773,7 +775,9 @@ export function SchemaDiffCompare({ params }) {
         <Grid
           container
           direction="row"
-          alignItems="center"
+          sx={{
+            alignItems: 'center'
+          }}
         >
           <Grid size={{ lg: 7, md: 7, sm: 10, xs: 10 }}>
             <InputComponent
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
index 6b0b500ad63..3d15c70c561 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
@@ -17,7 +17,6 @@ import url_for from 'sources/url_for';
 import pgAdmin from 'sources/pgadmin';
 import gettext from 'sources/gettext';
 
-import { Box } from '@mui/material';
 import { Results } from './Results';
 import { SchemaDiffCompare } from './SchemaDiffCompare';
 import EventBus from '../../../../../static/js/helpers/EventBus';
@@ -28,7 +27,7 @@ import usePreferences from '../../../../../preferences/static/js/store';
 export const SchemaDiffEventsContext = createContext();
 export const SchemaDiffContext = createContext();
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   '& .SchemaDiff-resultPanel': {
     backgroundColor: theme.palette.default.main,
     zIndex: 5,
diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
index 20f78b463fa..6779691d2d3 100644
--- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
+++ b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
@@ -21,7 +21,7 @@ import { PrimaryButton, PgIconButton } from '../../../../static/js/components/Bu
 import { FormFooterMessage, InputSelect, InputText, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import PgReactDataGrid from '../../../../static/js/components/PgReactDataGrid';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   display:'flex',
   flexGrow: '1',
   flexDirection:'column',
@@ -409,7 +409,14 @@ export default function SearchObjects({nodeData}) {
         <PrimaryButton style={{width: '120px'}} data-test="search" className='SearchObjects-Btnmargin' startIcon={<SearchRoundedIcon />}
           onClick={onSearch} disabled={search.length < 3}>{gettext('Search')}</PrimaryButton>
       </Box>
-      <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
+      <Box
+        sx={{
+          flexGrow: '1',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+          overflow: 'hidden'
+        }}>
         <PgReactDataGrid
           id="searchobjects"
           className='SearchObjects-grid'
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
index ff642a24357..8dc0d712e69 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
@@ -953,7 +953,16 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
     <QueryToolContext.Provider value={queryToolContextValue}>
       <QueryToolConnectionContext.Provider value={queryToolConnContextValue}>
         <QueryToolEventsContext.Provider value={eventBus.current}>
-          <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
+          <Box
+            tabIndex="0"
+            ref={containerRef}
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              flexGrow: '1'
+            }}>
             <ConnectionBar
               connected={qtState.connected}
               connecting={qtState.obtaining_conn}
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
index a7fbb3f9ef4..8c6a5e89250 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
@@ -21,7 +21,7 @@ import { usePgAdmin } from '../../../../../../static/js/PgAdminProvider';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
 
 
-const StyledEditorDiv = styled(Box)(({ theme }) => ({
+const StyledEditorDiv = styled('div')(({ theme }) => ({
   '&.Editors-textEditor': {
     position: 'absolute',
     zIndex: 1080,
@@ -265,7 +265,11 @@ export function TextEditor({row, column, onRowChange, onClose}) {
       <ResizableDiv columnIndex={column.idx}
         className='Editors-textEditor' data-label="pg-editor" resizeKey={'text'} defaultSize={{height:'80px', width:'250px'}} onKeyDown={suppressEnterKey} >
         <textarea ref={autoFocusAndSelect} className='Editors-textarea' value={localVal} onChange={onChange} onKeyDown={onkeydown} />
-        <Box display="flex" justifyContent="flex-end">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end'
+          }}>
           <DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
             {gettext('Cancel')}
           </DefaultButton>
@@ -461,7 +465,12 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
           }}
           className={'jsoneditor-div'}
         />
-        <Box display="flex" justifyContent="flex-end" marginTop="0.25rem">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            marginTop: '0.25rem'
+          }}>
           <DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
             {gettext('Cancel')}
           </DefaultButton>
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index 432f8e10ad3..8fe96ebf9a3 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -193,14 +193,18 @@ function SelectableHeaderRenderer({column, isSelected, onColumnSelected, isCellS
           eventBus.fireEvent(QUERY_TOOL_EVENTS.TRIGGER_RENDER_GEOMETRIES, column);
         }}/>
       </Box>}
-      <Box marginRight="auto">
+      <Box sx={{
+        marginRight: 'auto'
+      }}>
         <span className='QueryTool-columnName'>{column.display_name}</span><br/>
         <span>{column.display_type}</span>
       </Box>
-      <Box marginLeft="4px">{column.can_edit ?
-        <EditIcon fontSize="small" style={{fontSize: '0.875rem'}} data-label="EditIcon"/>:
-        <LockIcon fontSize="small" style={{fontSize: '0.875rem'}} data-label="LockIcon"/>
-      }</Box>
+      <Box sx={{
+        marginLeft: '4px'
+      }}>{column.can_edit ?
+          <EditIcon fontSize="small" style={{fontSize: '0.875rem'}} data-label="EditIcon"/>:
+          <LockIcon fontSize="small" style={{fontSize: '0.875rem'}} data-label="LockIcon"/>
+        }</Box>
     </Box>
   );
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
index b21d9d044ef..7f6de3f0cba 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
@@ -10,7 +10,11 @@ import PropTypes from 'prop-types';
 export default function CloseRunningDialog({closeModal, text, onYes}) {
   return (
     <ModalContent>
-      <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <ModalFooter>
         <DefaultButton data-test="no" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
index ef5951b43f4..8a5c48d9a5f 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
@@ -27,7 +27,11 @@ export default function ConfirmPromotionContent({ onContinue, onClose, closeModa
 
   return (
     <ModalContent>
-      <Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <StyledFooter>
         <InputCheckbox controlProps={{ label: gettext('Don\'t ask again') }} value={formData['save_user_choice']}
           onChange={(e) => setFormData((prev) => ({ ...prev, 'save_user_choice': e.target.checked }))} />
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
index 59e0f82875d..51344fd5484 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
@@ -10,7 +10,11 @@ import PropTypes from 'prop-types';
 export default function ConfirmTransactionContent({closeModal, text, onRollback, onCommit}) {
   return (
     <ModalContent>
-      <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box
+        sx={{
+          flexGrow: '1',
+          p: 2
+        }}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
       <ModalFooter>
         <DefaultButton data-test="cancel" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
index 40bcdc685f1..afe8f68b5ed 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
@@ -7,9 +7,8 @@ import { QueryToolContext, getRandomName } from '../QueryToolComponent';
 import url_for from 'sources/url_for';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
 
-const StyledBox = styled(Box)(() => ({
+const StyledBox = styled('div')(() => ({
   height: '100%',
   '& .MacrosDialog-root': {
     padding: 0 + ' !important',
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
index 0d2be1d4bd5..fb9bb877edd 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
@@ -99,7 +99,7 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
 
   const connTitle = React.useMemo(()=>_.find(connectionList, (c)=>c.is_selected)?.conn_title, [connectionList]);
   return (
-    (<Root>
+    <Root>
       <Box className='ConnectionBar-root'>
         <PgButtonGroup size="small">
           {queryToolCtx.preferences?.sqleditor?.connection_status &&
@@ -111,9 +111,22 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
             style={{backgroundColor: queryToolCtx.params.bgcolor, color: queryToolCtx.params.fgcolor}}
           >
             <Tooltip title={queryToolCtx.params.is_query_tool ? '' : connTitle}>
-              <Box display="flex" width="100%">
-                <Box textOverflow="ellipsis" overflow="hidden" marginRight="auto">{connecting && gettext('(Obtaining connection)')}{connTitle}</Box>
-                {queryToolCtx.params.is_query_tool && <Box display="flex" alignItems="center"><KeyboardArrowDownIcon /></Box>}
+              <Box
+                sx={{
+                  display: 'flex',
+                  width: '100%'
+                }}>
+                <Box
+                  sx={{
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    marginRight: 'auto'
+                  }}>{connecting && gettext('(Obtaining connection)')}{connTitle}</Box>
+                {queryToolCtx.params.is_query_tool && <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center'
+                  }}><KeyboardArrowDownIcon /></Box>}
               </Box>
             </Tooltip>
           </DefaultButton>
@@ -138,7 +151,7 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
         })}
         <PgMenuItem onClick={onNewConnClick}>{`< ${gettext('New Connection...')} >`}</PgMenuItem>
       </PgMenu>
-    </Root>)
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
index 6476aaa47a4..8853f149241 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
@@ -17,12 +17,11 @@ import {Buffer} from 'buffer';
 import gettext from 'sources/gettext';
 import Theme from 'sources/Theme';
 import PropTypes from 'prop-types';
-import { Box } from '@mui/material';
 import EmptyPanelMessage from '../../../../../../static/js/components/EmptyPanelMessage';
 import { PANELS } from '../QueryToolConstants';
 import { QueryToolContext } from '../QueryToolComponent';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   position: 'relative',
   '& .GeometryViewer-mapContainer': {
     backgroundColor: theme.palette.background.default,
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
index 366e2f33dcf..c1a9407c250 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -29,7 +29,7 @@ import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants';
 import DownloadUtils from '../../../../../../static/js/DownloadUtils';
 import { getChartColor } from '../../../../../../static/js/utils';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   width: '100%',
   height: '100%',
   overflowY: 'scroll',
@@ -433,7 +433,12 @@ export function GraphVisualiser({initColumns}) {
         </>
         }
       </Box>
-      <Box display="flex" marginLeft="3px" marginTop="3px">
+      <Box
+        sx={{
+          display: 'flex',
+          marginLeft: '3px',
+          marginTop: '3px'
+        }}>
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>}
             onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/>
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
index 2683e4a182d..c13f90e5be2 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
@@ -8,7 +8,6 @@
 //////////////////////////////////////////////////////////////
 import React, {useContext, useCallback, useEffect, useState} from 'react';
 import { styled } from '@mui/material/styles';
-import { Box } from '@mui/material';
 import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -35,7 +34,7 @@ import ConfirmTransactionContent from '../dialogs/ConfirmTransactionContent';
 import { LayoutDocker } from '../../../../../../static/js/helpers/Layout';
 import CloseRunningDialog from '../dialogs/CloseRunningDialog';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   padding: '2px 4px',
   display: 'flex',
   alignItems: 'center',
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/NLQChatPanel.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/NLQChatPanel.jsx
index 838f60c8831..d5d45c457c1 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/NLQChatPanel.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/NLQChatPanel.jsx
@@ -91,7 +91,7 @@ const MessageBubble = styled(Paper)(({ theme, isuser }) => ({
   }),
 }));
 
-const SQLPreviewBox = styled(Box)(({ theme }) => ({
+const SQLPreviewBox = styled('div')(({ theme }) => ({
   marginTop: theme.spacing(1),
   '& .sql-preview-header': {
     display: 'flex',
@@ -126,14 +126,14 @@ const InputArea = styled('div')(({ theme }) => ({
   alignItems: 'flex-end',
 }));
 
-const ThinkingIndicator = styled(Box)(({ theme }) => ({
+const ThinkingIndicator = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(1),
   color: theme.palette.text.secondary,
 }));
 
-const MarkdownContent = styled(Box)(({ theme }) => ({
+const MarkdownContent = styled('div')(({ theme }) => ({
   fontSize: theme.typography.body2.fontSize,
   lineHeight: theme.typography.body2.lineHeight,
   '& p': { margin: `${theme.spacing(0.5)} 0` },
@@ -545,7 +545,9 @@ function ChatMessage({ message, onInsertSQL, onReplaceSQL, textColors, cmKey, fo
         isuser="false"
         sx={{ backgroundColor: 'error.light', borderColor: 'error.main' }}
       >
-        <Typography variant="body2" color="error.dark">
+        <Typography variant="body2" sx={{
+          color: 'error.dark'
+        }}>
           {message.content}
         </Typography>
       </MessageBubble>
@@ -1131,17 +1133,17 @@ export function NLQChatPanel() {
           {gettext('Clear')}
         </DefaultButton>
       </HeaderBar>
-
       <MessagesArea>
         {messages.length === 0 ? (
           <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="center"
-            height="100%"
-            textAlign="center"
-            p={2}
-          >
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: '100%',
+              textAlign: 'center',
+              p: 2
+            }}>
             <Typography variant="body2" style={{ color: textColors.secondary }}>
               {gettext(
                 'Ask a question about your database or describe the SQL you need ' +
@@ -1165,7 +1167,6 @@ export function NLQChatPanel() {
         )}
         <div ref={messagesEndRef} />
       </MessagesArea>
-
       <InputArea>
         <TextField
           inputRef={inputRef}
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
index 289e0b037d1..7d8009b4746 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -272,16 +272,25 @@ QuerySourceIcon.propTypes = {
 };
 
 function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick}) {
-  return <ListItemButton component='li' tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query}
-    className={'QuerySources-fontSourceCode ' + (entry.status ? '' : 'QuerySources-itemError')} selected={selectedItemKey==itemKey} onClick={onClick}>
-    <Box whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" >
-      <QuerySourceIcon source={entry.query_source}/>
-      {entry.query}
-    </Box>
-    <Box fontSize="12px">
-      {formatEntryDate(entry.start_time)}
-    </Box>
-  </ListItemButton>;
+  return (
+    <ListItemButton component='li' tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query}
+      className={'QuerySources-fontSourceCode ' + (entry.status ? '' : 'QuerySources-itemError')} selected={selectedItemKey==itemKey} onClick={onClick}>
+      <Box
+        sx={{
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden'
+        }}>
+        <QuerySourceIcon source={entry.query_source}/>
+        {entry.query}
+      </Box>
+      <Box sx={{
+        fontSize: '12px'
+      }}>
+        {formatEntryDate(entry.start_time)}
+      </Box>
+    </ListItemButton>
+  );
 }
 
 const EntryPropType = PropTypes.shape({
@@ -322,15 +331,23 @@ function QueryHistoryDetails({entry}) {
   }, [entry]);
 
   if(!entry) {
-    return <Box display="flex" height="100%">
-      <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
-    </Box>;
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          height: '100%'
+        }}>
+        <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
+      </Box>
+    );
   }
 
   return (
     <>
       {entry.info && <Box className='QuerySources-infoHeader'>{entry.info}</Box>}
-      <Box padding="0.5rem" data-label="history-detail">
+      <Box data-label="history-detail" sx={{
+        padding: '0.5rem'
+      }}>
         <Grid container>
           <Grid size={{ sm: 4 }}>{getDateFormatted(entry.start_time) + ' ' + getTimeFormatted(entry.start_time)}</Grid>
           <Grid size={{ sm: 4 }}>{entry?.row_affected > 0 && entry.row_affected}</Grid>
@@ -355,9 +372,16 @@ function QueryHistoryDetails({entry}) {
             className='QuerySources-queryMargin'
           />
         </Box>
-        <Box marginTop="0.5rem">
+        <Box sx={{
+          marginTop: '0.5rem'
+        }}>
           <Box>{gettext('Messages')}</Box>
-          <Box className='QuerySources-fontSourceCode' fontSize="13px" whiteSpace="pre-wrap">{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
+          <Box
+            className='QuerySources-fontSourceCode'
+            sx={{
+              fontSize: '13px',
+              whiteSpace: 'pre-wrap'
+            }}>{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
         </Box>
       </Box>
     </>
@@ -521,7 +545,9 @@ export function QueryHistory() {
         <>
           <Box className='QuerySources-leftRoot'>
             <Box className='QuerySources-header'>
-              <Box marginRight="auto">
+              <Box sx={{
+                marginRight: 'auto'
+              }}>
                 {gettext('Show queries generated internally by pgAdmin?')}
                 <InputSwitch value={showInternal} onChange={(e)=>{
                   setShowInternal(e.target.checked);
@@ -535,7 +561,12 @@ export function QueryHistory() {
                   className='QuerySources-removeBtnMargin' onClick={onRemoveAll}>{gettext('Remove All')}</DefaultButton>
               </Box>
             </Box>
-            <Box flexGrow="1" overflow="auto" className='QuerySources-listRoot'>
+            <Box
+              className='QuerySources-listRoot'
+              sx={{
+                flexGrow: '1',
+                overflow: 'auto'
+              }}>
               <List ref={listRef} subheader={<li />} tabIndex="0" onKeyDown={onKeyPressed}>
                 {qhu.current.getGroups().map(([groupKey, groupHeader]) => (
                   <ListItem key={`section-${groupKey}`} className='QuerySources-removePadding'>
@@ -551,7 +582,12 @@ export function QueryHistory() {
               </List>
             </Box>
           </Box>
-          <Box flexBasis="50%" maxWidth="50%" overflow="auto">
+          <Box
+            sx={{
+              flexBasis: '50%',
+              maxWidth: '50%',
+              overflow: 'auto'
+            }}>
             <QueryHistoryDetails entry={selectedEntry}/>
           </Box>
         </>}
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
index c79c40df027..5d628e89afd 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
@@ -33,7 +33,7 @@ import pgAdmin from 'sources/pgadmin';
 import { connectServer, connectServerModal } from '../connectServer';
 import { useLatestFunc } from '../../../../../../static/js/custom_hooks';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   display: 'flex',
   height: '100%',
   flexDirection: 'column',
@@ -1680,7 +1680,11 @@ export function ResultSet() {
           canEdit={queryData.can_edit} totalRowCount={queryData?.rows_affected}
           pagination={queryData?.pagination ?? {}} allRowsSelect={allRowsSelect}
         />
-        <Box flexGrow="1" minHeight="0">
+        <Box
+          sx={{
+            flexGrow: '1',
+            minHeight: '0'
+          }}>
           <QueryToolDataGrid
             columns={columns}
             rows={rows}
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
index 793ca45dcc4..724bc34202c 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
@@ -181,7 +181,12 @@ function PaginationInputs({pagination, totalRowCount, clearSelection, serverCurs
   return (
     <Box className='PaginationInputs'>
       {editPageRange ?
-        <Box display="flex" gap="2px" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '2px',
+            alignItems: 'center'
+          }}>
           <div>{gettext('Showing rows:')}</div>
           <InputText
             type="int"
@@ -411,7 +416,12 @@ export function ResultSetToolbar({query, canEdit, totalRowCount, pagination, all
   return (
     <>
       <StyledDiv>
-        <Box display="flex" alignItems="center" gap="4px">
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px'
+          }}>
           <PgButtonGroup size="small">
             <PgIconButton title={gettext('Add row')} icon={<PlaylistAddRoundedIcon style={{height: 'unset'}}/>}
               shortcut={queryToolPref.btn_add_row} disabled={!canEdit} onClick={addRow} />
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
index 26f415c0160..ae37861b5b7 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
@@ -19,7 +19,7 @@ import { PgMenu, PgMenuItem, usePgMenuGroup } from '../../../../../../static/js/
 import PropTypes from 'prop-types';
 import { getEnterKeyHandler } from '../../../../../../static/js/utils';
 
-const StyledBox = styled(Box)(({theme}) => ({
+const StyledBox = styled('div')(({theme}) => ({
   display: 'flex',
   alignItems: 'center',
   ...theme.mixins.panelBorder.top,
diff --git a/web/regression/javascript/components/Buttons.spec.js b/web/regression/javascript/components/Buttons.spec.js
index 5ca8359f64a..d98ede2f3a0 100644
--- a/web/regression/javascript/components/Buttons.spec.js
+++ b/web/regression/javascript/components/Buttons.spec.js
@@ -20,7 +20,10 @@ describe('components Buttons', ()=>{
   it('PrimaryButton', ()=>{
     let ThemedBtn = withTheme(PrimaryButton);
     render(<ThemedBtn>Test</ThemedBtn>);
-    expect(screen.getByRole('button').classList.contains('MuiButton-containedPrimary')).toBe(true);
+    // MUI v9 split variant+color into separate classes (was MuiButton-containedPrimary).
+    const btn = screen.getByRole('button');
+    expect(btn.classList.contains('MuiButton-contained')).toBe(true);
+    expect(btn.classList.contains('MuiButton-colorPrimary')).toBe(true);
   });
 
   it('DefaultButton', ()=>{
diff --git a/web/yarn.lock b/web/yarn.lock
index 71313e37208..8ab0f2de435 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1411,7 +1411,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.28.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.29.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.29.2
   resolution: "@babel/runtime@npm:7.29.2"
   checksum: 10c0/30b80a0140d16467792e1bbeb06f655b0dab70407da38dfac7fedae9c859f9ae9d846ef14ad77bd3814c064295fe9b1bc551f1541ea14646ae9f22b71a8bc17a
@@ -2721,49 +2721,49 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/core-downloads-tracker@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/core-downloads-tracker@npm:7.3.10"
-  checksum: 10c0/ee0dd73cb97c23c7865c4e44c564c1987e06cd9ad2b505aaaf3e6f24844ec999c77741ae184df5cdeab20348ab18177d8f3e8d222c5044792e95949b19e19737
+"@mui/core-downloads-tracker@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "@mui/core-downloads-tracker@npm:9.0.1"
+  checksum: 10c0/38c23c1cfd84e56526154f131edbb17c1b83c308c289041811a7a8ee98ce0282b517a0a04c3c919d9ccd785f71f498762ec0aacbda4d766d865e469b31e7899a
   languageName: node
   linkType: hard
 
-"@mui/icons-material@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/icons-material@npm:7.3.10"
+"@mui/icons-material@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "@mui/icons-material@npm:9.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
+    "@babel/runtime": "npm:^7.29.2"
   peerDependencies:
-    "@mui/material": ^7.3.10
+    "@mui/material": ^9.0.1
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/22a8721f40508e0b8c673b511b64028826ff3e35a3098de324d4f1ac827c6e1b0b5e69015d1a67f96bf5230e938d91ce077ec5269020419fe30e0c05c41a388d
+  checksum: 10c0/b638b21107ec11df731393baf215adad3c1bd0ed6fbffc73d8ae7c0c1888e8f0a89c8edcd1158cff072df6de49c39c20d6d9d11337263a61afb2e78770ab57b4
   languageName: node
   linkType: hard
 
-"@mui/material@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/material@npm:7.3.10"
+"@mui/material@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "@mui/material@npm:9.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
-    "@mui/core-downloads-tracker": "npm:^7.3.10"
-    "@mui/system": "npm:^7.3.10"
-    "@mui/types": "npm:^7.4.12"
-    "@mui/utils": "npm:^7.3.10"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/core-downloads-tracker": "npm:^9.0.1"
+    "@mui/system": "npm:^9.0.1"
+    "@mui/types": "npm:^9.0.0"
+    "@mui/utils": "npm:^9.0.1"
     "@popperjs/core": "npm:^2.11.8"
     "@types/react-transition-group": "npm:^4.4.12"
     clsx: "npm:^2.1.1"
     csstype: "npm:^3.2.3"
     prop-types: "npm:^15.8.1"
-    react-is: "npm:^19.2.3"
+    react-is: "npm:^19.2.4"
     react-transition-group: "npm:^4.4.5"
   peerDependencies:
     "@emotion/react": ^11.5.0
     "@emotion/styled": ^11.3.0
-    "@mui/material-pigment-css": ^7.3.10
+    "@mui/material-pigment-css": ^9.0.1
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -2776,16 +2776,16 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/da92bc84ca6adb385e7888e9867feaa52618c71b493dd6adaf676e74fdcd540b735314a16dcbe739c89b046c5973ac29d801b226266e18d19c137114d56d5d12
+  checksum: 10c0/594fa55b02f348629a21b5e31529f083ae7606214d1dcfb35d1d303648c2790df6c3cc63ee32acb380394c3bffa1bacebbd395b0f5fe2774aed6a6b22d6ca138
   languageName: node
   linkType: hard
 
-"@mui/private-theming@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/private-theming@npm:7.3.10"
+"@mui/private-theming@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "@mui/private-theming@npm:9.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
-    "@mui/utils": "npm:^7.3.10"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/utils": "npm:^9.0.1"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -2793,15 +2793,15 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/68079cd8a45924a89b80201f1f75327c7f366c2603d79068b3392c27a227d41adc0218a8cf434956c2b612fcd638fca2ba46f6ad22dd11d5ff103f758f36cf4c
+  checksum: 10c0/6182288d91030f4ac62c32d1936d56eef330c5d5b61252c7f686cef117372956516763e1898fb96eeb3d105d9e0ecd28b72207641dd66182c2053f8802ea484c
   languageName: node
   linkType: hard
 
-"@mui/styled-engine@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/styled-engine@npm:7.3.10"
+"@mui/styled-engine@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mui/styled-engine@npm:9.0.0"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
+    "@babel/runtime": "npm:^7.29.2"
     "@emotion/cache": "npm:^11.14.0"
     "@emotion/serialize": "npm:^1.3.3"
     "@emotion/sheet": "npm:^1.4.0"
@@ -2816,19 +2816,19 @@ __metadata:
       optional: true
     "@emotion/styled":
       optional: true
-  checksum: 10c0/5a41b7c99381deb8c5e3296cf1dc5a3f6dceab87d3d78d28ce0407246fe44c56aad97fcc9e49636a846476effbdd590ae7d3d87d36ef126a49c746b5424d1535
+  checksum: 10c0/84d81f358324cd1398dedb2ff8ac325ce3b1c9c050e9bc57aba112870c43c8140d7b1b4f2fe5d6add99514f33e505a127b46f048f080b46fc9d44a730c6c11fa
   languageName: node
   linkType: hard
 
-"@mui/system@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/system@npm:7.3.10"
+"@mui/system@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "@mui/system@npm:9.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
-    "@mui/private-theming": "npm:^7.3.10"
-    "@mui/styled-engine": "npm:^7.3.10"
-    "@mui/types": "npm:^7.4.12"
-    "@mui/utils": "npm:^7.3.10"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/private-theming": "npm:^9.0.1"
+    "@mui/styled-engine": "npm:^9.0.0"
+    "@mui/types": "npm:^9.0.0"
+    "@mui/utils": "npm:^9.0.1"
     clsx: "npm:^2.1.1"
     csstype: "npm:^3.2.3"
     prop-types: "npm:^15.8.1"
@@ -2844,71 +2844,71 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 10c0/0a0fa9a5cab741cd50ffb8194426e38dd6eb14a0ff29fa9b1d6f4bfb8c47321d8033e4985f02fe1ba48bd7ae921d55fca5c96b13eb227c28e5ed814db949c8ec
+  checksum: 10c0/f6adf7494f85aeea306f43a67a420abc4302ce2a19994b78a4d7cc51db61c134e6a513231bee61faa5a573eb1501dc70accc6dba4ca4cb1557d96a5ebfffc482
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.4.12":
-  version: 7.4.12
-  resolution: "@mui/types@npm:7.4.12"
+"@mui/types@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "@mui/types@npm:9.0.0"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
+    "@babel/runtime": "npm:^7.29.2"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/e2247f9c3b8ef08e2eb7494ad8fcaffd8d695655cb355b8c3f23ebecbf69e13fcf73411b0a209fc0750eb416f7d0f7da1aa82557beb9bd58f26f9645f3f2ce95
+  checksum: 10c0/6c44a3bd3ebe8e6a3d964c72a9653d0a0221340e054e641a89344a4f7e209519e30ed4893c0c29e84f9d2f43c2e68e3c378d1719839f7ce10edfc13b768b8129
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^7.3.10":
-  version: 7.3.10
-  resolution: "@mui/utils@npm:7.3.10"
+"@mui/utils@npm:9.0.0":
+  version: 9.0.0
+  resolution: "@mui/utils@npm:9.0.0"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
-    "@mui/types": "npm:^7.4.12"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/types": "npm:^9.0.0"
     "@types/prop-types": "npm:^15.7.15"
     clsx: "npm:^2.1.1"
     prop-types: "npm:^15.8.1"
-    react-is: "npm:^19.2.3"
+    react-is: "npm:^19.2.4"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/ab9aac85b2da41131b3e6bf37ad870e9cfb0335a69670c1da9cff762d6070cda15a42d2eebf46fd0c74fb909ac7f776b09dbb1ca09c7725938264e0845cc12dc
+  checksum: 10c0/139ccbdc418dce45070def89f3644b9a42b4eef9a98e74338f83e0f74b715f484a047163708746bf18713da88aa0d8a9e4d0c3df51c93337e492dcebc953fde5
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^7.3.5":
-  version: 7.3.9
-  resolution: "@mui/utils@npm:7.3.9"
+"@mui/utils@npm:9.0.1, @mui/utils@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "@mui/utils@npm:9.0.1"
   dependencies:
-    "@babel/runtime": "npm:^7.28.6"
-    "@mui/types": "npm:^7.4.12"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/types": "npm:^9.0.0"
     "@types/prop-types": "npm:^15.7.15"
     clsx: "npm:^2.1.1"
     prop-types: "npm:^15.8.1"
-    react-is: "npm:^19.2.3"
+    react-is: "npm:^19.2.4"
   peerDependencies:
     "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/218423d82807bf031ad69cb897ac0d0038b65da1bf282e167d1c195764946964e2bea2dbcbb2c01e143d9cb3a702efe3f5ff3320602a001e6ba5202f82648e3e
+  checksum: 10c0/be6d3c6ce7e5767a7d01583ff8780222f1bafa2f5ee8c549e3a25e7e283ba9fb7cb8c95d39ddbd9a57820722f5cfb5f5322cd37c580290d44d0f6e3a464cf23d
   languageName: node
   linkType: hard
 
-"@mui/x-date-pickers@npm:^8.28.3":
-  version: 8.28.3
-  resolution: "@mui/x-date-pickers@npm:8.28.3"
+"@mui/x-date-pickers@npm:^9.0.2":
+  version: 9.2.0
+  resolution: "@mui/x-date-pickers@npm:9.2.0"
   dependencies:
-    "@babel/runtime": "npm:^7.28.4"
-    "@mui/utils": "npm:^7.3.5"
-    "@mui/x-internals": "npm:8.26.0"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/utils": "npm:9.0.1"
+    "@mui/x-internals": "npm:^9.1.0"
     "@types/react-transition-group": "npm:^4.4.12"
     clsx: "npm:^2.1.1"
     prop-types: "npm:^15.8.1"
@@ -2916,8 +2916,8 @@ __metadata:
   peerDependencies:
     "@emotion/react": ^11.9.0
     "@emotion/styled": ^11.8.1
-    "@mui/material": ^5.15.14 || ^6.0.0 || ^7.0.0
-    "@mui/system": ^5.15.14 || ^6.0.0 || ^7.0.0
+    "@mui/material": ^7.3.0 || ^9.0.0
+    "@mui/system": ^7.3.0 || ^9.0.0
     date-fns: ^2.25.0 || ^3.2.0 || ^4.0.0
     date-fns-jalali: ^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0
     dayjs: ^1.10.7
@@ -2946,21 +2946,21 @@ __metadata:
       optional: true
     moment-jalaali:
       optional: true
-  checksum: 10c0/6beeee8d1180c448278cde251a37fa3120ffa92ff8f607393292bd37f859214efb31680f9d316520b341fdad37327dcadab9b182c7e9c4f54beb5a5e01851e79
+  checksum: 10c0/12a4dc4fe2f10be399cffc51bd1b42a76d91e5703d86caf034116e8bc5f1f7e03dc04eddb674e27c48140fe947218db6d1cf8cea0393a85fb8b10be2d8890948
   languageName: node
   linkType: hard
 
-"@mui/x-internals@npm:8.26.0":
-  version: 8.26.0
-  resolution: "@mui/x-internals@npm:8.26.0"
+"@mui/x-internals@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "@mui/x-internals@npm:9.1.0"
   dependencies:
-    "@babel/runtime": "npm:^7.28.4"
-    "@mui/utils": "npm:^7.3.5"
+    "@babel/runtime": "npm:^7.29.2"
+    "@mui/utils": "npm:9.0.0"
     reselect: "npm:^5.1.1"
     use-sync-external-store: "npm:^1.6.0"
   peerDependencies:
     react: ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/819564e1b1c7626f5e237edd81f716a3871df1479f2e2e9fbef45a5963df21c510eca4931f6af726fdcd9dc643a019e44c5d61657865b389ef0a2ab5abb10d6c
+  checksum: 10c0/3494fb8794b11e3d10e17310dcfb4affa95e73be00908b6e27f6016f13569bd643bc41b02ac032e7bd2dbbe44c8ba211a348fff4110548d7af6450650814eb3e
   languageName: node
   linkType: hard
 
@@ -12488,10 +12488,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^19.2.3":
-  version: 19.2.4
-  resolution: "react-is@npm:19.2.4"
-  checksum: 10c0/477a7cfc900f24194606e315fa353856a3a13487ea8eca841678817cad4daef64339ea0d1e84e58459fc75dbe0d9ba00bb0cc626db3d07e0cf31edc64cb4fa37
+"react-is@npm:^19.2.4":
+  version: 19.2.6
+  resolution: "react-is@npm:19.2.6"
+  checksum: 10c0/263177f370fc156b279d22570dd6e922a0ad641a4a426a4cb70284b8003b00ef532d59f2beca1d22a1ca0b37f85f9077d7733ca5d344ebecd2942e9bc2a2a3c0
   languageName: node
   linkType: hard
 
@@ -13014,9 +13014,9 @@ __metadata:
     "@emotion/utils": "npm:^1.4.2"
     "@fluentui/keyboard-key": "npm:^0.4.23"
     "@fortawesome/fontawesome-free": "npm:latest"
-    "@mui/icons-material": "npm:^7.3.10"
-    "@mui/material": "npm:^7.3.10"
-    "@mui/x-date-pickers": "npm:^8.28.3"
+    "@mui/icons-material": "npm:^9.0.0"
+    "@mui/material": "npm:^9.0.0"
+    "@mui/x-date-pickers": "npm:^9.0.2"
     "@nozbe/microfuzz": "npm:^1.0.0"
     "@projectstorm/react-diagrams": "npm:^7.0.4"
     "@simonwep/pickr": "npm:^1.9.1"