diff --git a/web/package.json b/web/package.json
index d0aa9be77..7edaff9b3 100644
--- a/web/package.json
+++ b/web/package.json
@@ -81,7 +81,6 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
     "@mui/material": "^5.15.10",
-    "@mui/styles": "^5.15.10",
     "@mui/x-date-pickers": "^6.19.7",
     "@projectstorm/react-diagrams": "^6.6.1",
     "@simonwep/pickr": "^1.5.1",
diff --git a/web/pgadmin/about/static/js/AboutComponent.jsx b/web/pgadmin/about/static/js/AboutComponent.jsx
index 457c54412..7bb45c3b0 100644
--- a/web/pgadmin/about/static/js/AboutComponent.jsx
+++ b/web/pgadmin/about/static/js/AboutComponent.jsx
@@ -8,35 +8,27 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
+import { styled } from '@mui/material/styles';
 import url_for from 'sources/url_for';
 import React, { useEffect, useState, useRef } from 'react';
 import { Box, Grid, InputLabel } from '@mui/material';
 import { DefaultButton } from '../../../static/js/components/Buttons';
-import { makeStyles } from '@mui/styles';
 import { InputText } from '../../../static/js/components/FormComponents';
 import getApiInstance from '../../../static/js/api_instance';
 import { copyToClipboard } from '../../../static/js/clipboard';
 import { useDelayedCaller } from '../../../static/js/custom_hooks';
 import { usePgAdmin } from '../../../static/js/BrowserComponent';
 
-
-const useStyles = makeStyles((theme)=>({
-  container: {
-    padding: '16px',
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  copyBtn: {
+const StyledDefaultButton = styled(DefaultButton)(({theme}) => ({
+  '&.AboutComponent-copyBtn': {
     marginRight: '1px',
     float: 'right',
     borderColor: theme.otherVars.borderColor,
     fontSize: '13px',
-  },
+  }
 }));
 
 export default function AboutComponent() {
-  const classes = useStyles();
   const containerRef = useRef();
   const [aboutData, setAboutData] = useState([]);
   const [copyText, setCopyText] = useState(gettext('Copy'));
@@ -57,7 +49,7 @@ export default function AboutComponent() {
   }, []);
 
   return (
-    <Box className={classes.container} ref={containerRef}>
+    <Box sx={{ padding: '16px', height: '100%', display: 'flex',flexDirection: 'column'}} ref={containerRef}>
       <Grid container spacing={0} style={{marginBottom: '8px'}}>
         <Grid item lg={3} md={3} sm={3} xs={12}>
           <InputLabel style={{fontWeight: 'bold'}}>{gettext('Version')}</InputLabel>
@@ -134,11 +126,11 @@ export default function AboutComponent() {
         <Box flexGrow="1" display="flex" flexDirection="column">
           <Box>
             <span style={{fontWeight: 'bold'}}>{gettext('Server Configuration')}</span>
-            <DefaultButton className={classes.copyBtn} onClick={()=>{
+            <StyledDefaultButton className='AboutComponent-copyBtn' onClick={()=>{
               copyToClipboard(aboutData.settings);
               setCopyText(gettext('Copied!'));
               revertCopiedText(1500);
-            }}>{copyText}</DefaultButton>
+            }}>{copyText}</StyledDefaultButton>
           </Box>
           <Box flexGrow="1" paddingTop="1px">
             <InputText style={{height: '100%'}} controlProps={{multiline: true, rows: 8}} inputStyle={{resize: 'none'}}
diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 406dcb386..6109d253c 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -7,12 +7,12 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect, useMemo, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
 import PgTable from 'sources/components/PgTable';
 import { InputCheckbox } from '../../../static/js/components/FormComponents';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import Graphs from './Graphs';
 import { Box, Tab, Tabs } from '@mui/material';
@@ -48,88 +48,39 @@ function parseData(data) {
   return res;
 }
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  width: '100%',
+  '& .Dashboard-dashboardPanel': {
+    height: '100%',
+    background: theme.palette.grey[400],
+    '& .Dashboard-panelContent': {
+      ...theme.mixins.panelBorder.all,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden !important',
+      height: '100%',
+      width: '100%',
+      minHeight: '400px',
+      padding: '4px',
+      '& .Dashboard-mainTabs': {
+        ...theme.mixins.panelBorder.all,
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        '& .Dashboard-terminateButton': {
+          color: theme.palette.error.main
+        },
+      },
+    },
+  },
+  '& .Dashboard-emptyPanel': {
     width: '100%',
     background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
     padding: '8px',
     display: 'flex',
   },
-  dashboardPanel: {
-    height: '100%',
-    background: theme.palette.grey[400],
-  },
-  cardHeader: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold !important',
-    backgroundColor: theme.otherVars.tableBg,
-    borderBottom: '1px solid',
-    borderBottomColor: theme.otherVars.borderColor,
-  },
-  searchPadding: {
-    display: 'flex',
-    flex: 2.5,
-  },
-  component: {
-    padding: '8px',
-  },
-  searchInput: {
-    flex: 1,
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  panelContent: {
-    ...theme.mixins.panelBorder.all,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden !important',
-    height: '100%',
-    width: '100%',
-    minHeight: '400px',
-    padding: '4px'
-  },
-  mainTabs: {
-    ...theme.mixins.panelBorder.all,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  terminateButton: {
-    color: theme.palette.error.main
-  },
-  chartCard: {
-    border: '1px solid '+theme.otherVars.borderColor,
-  },
-  chartCardContent: {
-    padding: '0.25rem 0.5rem',
-    height: '165px',
-    display: 'flex',
-  },
-  chartLegend: {
-    marginLeft: 'auto',
-    '& > div': {
-      display: 'flex',
-      fontWeight: 'normal',
-      flexWrap: 'wrap',
-
-      '& .legend-value': {
-        marginLeft: '4px',
-        '& .legend-label': {
-          marginLeft: '4px',
-        }
-      }
-    }
-  }
 }));
 
 let activeQSchemaObj = new ActiveQuery();
@@ -138,7 +89,7 @@ function Dashboard({
   nodeItem, nodeData, node, treeNodeInfo,
   ...props
 }) {
-  const classes = useStyles();
+
   let tabs = [gettext('Sessions'), gettext('Locks'), gettext('Prepared Transactions')];
   let mainTabs = [gettext('General'), gettext('System Statistics')];
   if(treeNodeInfo?.server?.replication_type) {
@@ -261,7 +212,7 @@ function Dashboard({
             size="xs"
             noBorder
             icon={<CancelIcon />}
-            className={classes.terminateButton}
+            className='Dashboard-terminateButton'
             onClick={() => {
               if (
                 !canTakeAction(row, 'terminate')
@@ -796,8 +747,8 @@ function Dashboard({
   const showDefaultContents = () => {
     return (
       sid && !serverConnected ? (
-        <Box className={classes.dashboardPanel}>
-          <div className={classes.emptyPanel}>
+        <Box className='Dashboard-dashboardPanel'>
+          <div className='Dashboard-emptyPanel'>
             <EmptyPanelMessage text={msg}/>
           </div>
         </Box>
@@ -823,7 +774,7 @@ function Dashboard({
       <InputCheckbox
         label={gettext('Active sessions only')}
         labelPlacement="end"
-        className={classes.searchInput}
+        className='Dashboard-searchInput'
         onChange={(e) => {
           e.preventDefault();
           setActiveOnly(e.target.checked);
@@ -834,11 +785,11 @@ function Dashboard({
   };
 
   return (
-    <>
+    (<Root>
       {sid && serverConnected ? (
-        <Box className={classes.dashboardPanel}>
-          <Box className={classes.panelContent}>
-            <Box className={classes.mainTabs}>
+        <Box className='Dashboard-dashboardPanel'>
+          <Box className='Dashboard-panelContent'>
+            <Box className='Dashboard-mainTabs'>
               <Box>
                 <Tabs
                   value={mainTabVal}
@@ -850,7 +801,7 @@ function Dashboard({
                 </Tabs>
               </Box>
               {/* General Statistics */}
-              <TabPanel value={mainTabVal} index={0} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={0}>
                 {!_.isUndefined(preferences) && preferences.show_graphs && (
                   <Graphs
                     key={sid + did}
@@ -876,7 +827,7 @@ function Dashboard({
                         }}/>
                       </Tabs>
                     </Box>
-                    <TabPanel value={tabVal} index={0} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={0}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -886,7 +837,7 @@ function Dashboard({
                         schema={activeQSchemaObj}
                       ></PgTable>
                     </TabPanel>
-                    <TabPanel value={tabVal} index={1} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={1}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -894,7 +845,7 @@ function Dashboard({
                         data={dashData}
                       ></PgTable>
                     </TabPanel>
-                    <TabPanel value={tabVal} index={2} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={2}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -902,7 +853,7 @@ function Dashboard({
                         data={dashData}
                       ></PgTable>
                     </TabPanel>
-                    <TabPanel value={tabVal} index={3} classNameRoot={classes.tabPanel}>
+                    <TabPanel value={tabVal} index={3}>
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
@@ -914,7 +865,7 @@ function Dashboard({
                 )}
               </TabPanel>
               {/* System Statistics */}
-              <TabPanel value={mainTabVal} index={1} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
                 <Box height="100%" display="flex" flexDirection="column">
                   {ssMsg === 'installed' && did === ldid ?
                     <ErrorBoundary>
@@ -928,7 +879,7 @@ function Dashboard({
                           })}
                         </Tabs>
                       </Box>
-                      <TabPanel value={systemStatsTabVal} index={0} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={0} classNameRoot='Dashboard-tabPanel'>
                         <Summary
                           key={sid + did}
                           preferences={preferences}
@@ -938,7 +889,7 @@ function Dashboard({
                           serverConnected={serverConnected}
                         />
                       </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={1} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
                         <CPU
                           key={sid + did}
                           preferences={preferences}
@@ -948,7 +899,7 @@ function Dashboard({
                           serverConnected={serverConnected}
                         />
                       </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={2} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
                         <Memory
                           key={sid + did}
                           preferences={preferences}
@@ -958,7 +909,7 @@ function Dashboard({
                           serverConnected={serverConnected}
                         />
                       </TabPanel>
-                      <TabPanel value={systemStatsTabVal} index={3} classNameRoot={classes.tabPanel}>
+                      <TabPanel value={systemStatsTabVal} index={3} classNameRoot='Dashboard-tabPanel'>
                         <Storage
                           key={sid + did}
                           preferences={preferences}
@@ -970,14 +921,14 @@ function Dashboard({
                         />
                       </TabPanel>
                     </ErrorBoundary> :
-                    <div className={classes.emptyPanel}>
+                    <div className='Dashboard-emptyPanel'>
                       <EmptyPanelMessage text={ssMsg}/>
                     </div>
                   }
                 </Box>
               </TabPanel>
               {/* Replication */}
-              <TabPanel value={mainTabVal} index={2} classNameRoot={classes.tabPanel}>
+              <TabPanel value={mainTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
                 <Replication key={sid} sid={sid} node={node}
                   preferences={preferences} treeNodeInfo={treeNodeInfo} nodeData={nodeData} pageVisible={props.isActive} />
               </TabPanel>
@@ -985,7 +936,7 @@ function Dashboard({
           </Box>
         </Box>
       ) : showDefaultContents() }
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
index 47fe421eb..7285a0d3a 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
@@ -11,7 +11,6 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
 import { Box, Grid } from '@mui/material';
@@ -23,40 +22,6 @@ import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utili
 import { toPrettySize } from '../../../../static/js/utils';
 import SectionContainer from '../components/SectionContainer.jsx';
 
-const useStyles = makeStyles((theme) => ({
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '8px',
-    overflowX: 'auto !important',
-    overflowY: 'hidden !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  fixedContainer: {
-    flexGrow: 1,
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
-    padding: '6px',
-    width: '100%',
-  },
-  containerHeader: {
-    fontSize: '15px',
-    fontWeight: 'bold',
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  },
-}));
-
 const chartsDefault = {
   'cpu_stats': {'User Normal': [], 'User Niced': [], 'Kernel': [], 'Idle': []},
   'la_stats': {'1 min': [], '5 mins': [], '10 mins': [], '15 mins': []},
@@ -246,15 +211,14 @@ CPU.propTypes = {
 };
 
 export function CPUWrapper(props) {
-  const classes = useStyles();
   const options = useMemo(()=>({
     showDataPoints: props.showDataPoints,
     showTooltip: props.showTooltip,
     lineBorderWidth: props.lineBorderWidth,
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
   return (
-    <Box display="flex" flexDirection="column" height="100%">
-      <Grid container spacing={0.5} className={classes.container}>
+    (<Box display="flex" flexDirection="column" height="100%">
+      <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
         <Grid item md={6}>
           <ChartContainer id='cu-graph' title={gettext('CPU usage')} datasets={props.cpuUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.cpuUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
@@ -269,7 +233,6 @@ export function CPUWrapper(props) {
       <Box flexGrow={1} minHeight={0}>
         <SectionContainer title={gettext('Process CPU usage')}>
           <PgTable
-            className={classes.autoResizer}
             columns={props.tableHeader}
             data={props.processCpuUsageStats}
             msg={props.errorMsg}
@@ -280,6 +243,7 @@ export function CPUWrapper(props) {
         </SectionContainer>
       </Box>
     </Box>
+    )
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
index 9e00b6029..70e856664 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
@@ -10,7 +10,6 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
 import { Box, Grid } from '@mui/material';
@@ -22,39 +21,6 @@ import { getStatsUrl, transformData, statsReducer, X_AXIS_LENGTH } from './utili
 import { toPrettySize } from '../../../../static/js/utils';
 import SectionContainer from '../components/SectionContainer.jsx';
 
-const useStyles = makeStyles((theme) => ({
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '8px',
-    overflowX: 'auto !important',
-    overflowY: 'hidden !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  fixedContainer: {
-    flexGrow: 1,
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
-    padding: '6px',
-    width: '100%',
-  },
-  containerHeader: {
-    fontSize: '15px',
-    fontWeight: 'bold',
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-  }
-}));
 
 const chartsDefault = {
   'm_stats': {'Total': [], 'Used': [], 'Free': []},
@@ -248,7 +214,7 @@ Memory.propTypes = {
 };
 
 export function MemoryWrapper(props) {
-  const classes = useStyles();
+
   const options = useMemo(()=>({
     showDataPoints: props.showDataPoints,
     showTooltip: props.showTooltip,
@@ -256,35 +222,36 @@ export function MemoryWrapper(props) {
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
 
   return (
-    <Box display="flex" flexDirection="column" height="100%">
-      <Grid container spacing={0.5} className={classes.container}>
-        <Grid item md={6}>
-          <ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
-            <StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
-              valueFormatter={toPrettySize}/>
-          </ChartContainer>
+    (
+      <Box display="flex" flexDirection="column" height="100%">
+        <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
+          <Grid item md={6}>
+            <ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
+              <StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
+                valueFormatter={toPrettySize}/>
+            </ChartContainer>
+          </Grid>
+          <Grid item md={6}>
+            <ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
+              <StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
+                valueFormatter={toPrettySize}/>
+            </ChartContainer>
+          </Grid>
         </Grid>
-        <Grid item md={6}>
-          <ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
-            <StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
-              valueFormatter={toPrettySize}/>
-          </ChartContainer>
-        </Grid>
-      </Grid>
-      <Box flexGrow={1} minHeight={0}>
-        <SectionContainer title={gettext('Process memory usage')}>
-          <PgTable
-            className={classes.autoResizer}
-            columns={props.tableHeader}
-            data={props.processMemoryUsageStats}
-            msg={props.errorMsg}
-            type={'panel'}
-            caveTable={false}
-            tableNoBorder={false}
-          ></PgTable>
-        </SectionContainer>
+        <Box flexGrow={1} minHeight={0}>
+          <SectionContainer title={gettext('Process memory usage')}>
+            <PgTable
+              columns={props.tableHeader}
+              data={props.processMemoryUsageStats}
+              msg={props.errorMsg}
+              type={'panel'}
+              caveTable={false}
+              tableNoBorder={false}
+            ></PgTable>
+          </SectionContainer>
+        </Box>
       </Box>
-    </Box>
+    )
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
index 4a720ea65..96234c81d 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
@@ -7,9 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
@@ -21,52 +21,29 @@ import axios from 'axios';
 import { BarChart, PieChart } from '../../../../static/js/chartjs';
 import { getStatsUrl, transformData, X_AXIS_LENGTH } from './utility.js';
 import { toPrettySize } from '../../../../static/js/utils';
-import clsx from 'clsx';
-import { commonTableStyles } from '../../../../static/js/Theme';
+import Table from '../../../../static/js/components/Table';
 import SectionContainer from '../components/SectionContainer.jsx';
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: 'auto',
-    padding: '8px',
-    marginBottom: '6px',
-  },
-  driveContainer: {
-    width: '100%',
-  },
-  diskInfoCharts: {
-    marginBottom: '4px',
-  },
-  containerHeaderText: {
-    fontWeight: 'bold',
-    padding: '4px 8px',
-  },
-  tableContainer: {
+
+const Root = styled('div')(({theme}) => ({
+  '& .Storage-tableContainer': {
     background: theme.otherVars.tableBg,
+    padding: '0px',
     border: '1px solid '+theme.otherVars.borderColor,
     borderCollapse: 'collapse',
     borderRadius: '4px',
     overflow: 'auto',
     width: '100%',
-    marginBottom: '4px',
-  },
-  tableWhiteSpace: {
-    '& td, & th': {
-      whiteSpace: 'break-spaces !important',
+    margin: '4px 4px 4px 4px',
+    '& .Storage-containerHeaderText': {
+      fontWeight: 'bold',
+      padding: '4px 8px',
+    },
+    '& .Storage-tableWhiteSpace': {
+      '& td, & th': {
+        whiteSpace: 'break-spaces !important',
+      },
     },
-  },
-  driveContainerHeader: {
-    height: 'auto',
-    padding: '5px 0px 0px 0px',
-    background: theme.otherVars.tableBg,
-    marginBottom: '5px',
-    borderRadius: '4px 4px 0px 0px',
-  },
-  driveContainerBody: {
-    height: 'auto',
-    padding: '0px',
-    background: theme.otherVars.tableBg,
-    borderRadius: '0px 0px 4px 4px',
   },
 }));
 
@@ -122,12 +99,11 @@ const chartsDefault = {
 
 
 const DiskStatsTable = (props) => {
-  const tableClasses = commonTableStyles();
-  const classes = useStyles();
+
   const tableHeader = props.tableHeader;
   const data = props.data;
   return (
-    <table className={clsx(tableClasses.table, classes.tableWhiteSpace)}>
+    <Table classNameRoot='Storage-tableWhiteSpace'>
       <thead>
         <tr>
           {tableHeader.map((item, index) => (
@@ -144,7 +120,7 @@ const DiskStatsTable = (props) => {
           </tr>
         ))}
       </tbody>
-    </table>
+    </Table>
   );
 };
 
@@ -358,7 +334,7 @@ export default function Storage({preferences, sid, did, pageVisible, enablePoll=
   }, enablePoll ? pollDelay : -1);
 
   return (
-    <>
+    (<Root>
       <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
       {chartDrawnOnce &&
         <StorageWrapper
@@ -373,7 +349,7 @@ export default function Storage({preferences, sid, did, pageVisible, enablePoll=
           isTest={false}
         />
       }
-    </>
+    </Root>)
   );
 }
 
@@ -387,7 +363,7 @@ Storage.propTypes = {
 };
 
 export function StorageWrapper(props) {
-  const classes = useStyles();
+
   const options = useMemo(()=>({
     showDataPoints: props.showDataPoints,
     showTooltip: props.showTooltip,
@@ -414,10 +390,10 @@ export function StorageWrapper(props) {
     },
   };
 
-  return (
-    <>
-      <div className={classes.tableContainer}>
-        <div className={classes.containerHeaderText}>{gettext('Disk information')}</div>
+  return ( 
+    <Root>
+      <div className='Storage-tableContainer'>
+        <div className='Storage-containerHeaderText'>{gettext('Disk information')}</div>
         <DiskStatsTable tableHeader={props.tableHeader} data={props.diskStats} />
       </div>
       <Grid container spacing={0.5} sx={{marginBottom: '4px'}}>
@@ -511,7 +487,7 @@ export function StorageWrapper(props) {
           </Grid>
         </SectionContainer>
       ))}
-    </>
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
index 625ae4ce8..27a984600 100644
--- a/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
+++ b/web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
@@ -7,9 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import getApiInstance from 'sources/api_instance';
 import {getGCD, getEpoch} from 'sources/utils';
@@ -20,31 +20,22 @@ import StreamingChart from '../../../../static/js/components/PgChart/StreamingCh
 import {useInterval, usePrevious} from 'sources/custom_hooks';
 import axios from 'axios';
 import { getStatsUrl, transformData,statsReducer, X_AXIS_LENGTH } from './utility.js';
-import clsx from 'clsx';
-import { commonTableStyles } from '../../../../static/js/Theme';
+import Table from '../../../../static/js/components/Table';
 
-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: 'auto',
-    padding: '0px !important',
-    marginBottom: '4px',
-  },
-  tableContainer: {
+const Root = styled('div')(({theme}) => ({
+  '& .Summary-tableContainer': {
     background: theme.otherVars.tableBg,
     padding: '0px',
     border: '1px solid '+theme.otherVars.borderColor,
     borderCollapse: 'collapse',
     borderRadius: '4px',
     overflow: 'hidden',
-  },
-  chartContainer: {
-    padding: '4px',
-  },
-  containerHeader: {
-    fontWeight: 'bold',
-    marginBottom: '0px',
-    borderBottom: '1px solid '+theme.otherVars.borderColor,
-    padding: '4px 8px',
+    '& .Summary-containerHeader': {
+      fontWeight: 'bold',
+      marginBottom: '0px',
+      borderBottom: '1px solid '+theme.otherVars.borderColor,
+      padding: '4px 8px',
+    }
   },
 }));
 
@@ -53,10 +44,9 @@ const chartsDefault = {
 };
 
 const SummaryTable = (props) => {
-  const tableClasses = commonTableStyles();
   const data = props.data;
   return (
-    <table className={clsx(tableClasses.table)}>
+    <Table >
       <thead>
         <tr>
           <th>Property</th>
@@ -71,7 +61,7 @@ const SummaryTable = (props) => {
           </tr>
         ))}
       </tbody>
-    </table>
+    </Table>
   );
 };
 
@@ -224,7 +214,7 @@ export default function Summary({preferences, sid, did, pageVisible, enablePoll=
   }, enablePoll ? pollDelay : -1);
 
   return (
-    <>
+    (<Root>
       <div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
       {chartDrawnOnce &&
         <SummaryWrapper
@@ -238,7 +228,7 @@ export default function Summary({preferences, sid, did, pageVisible, enablePoll=
           isTest={false}
         />
       }
-    </>
+    </Root>)
   );
 }
 
@@ -251,7 +241,7 @@ Summary.propTypes = {
 };
 
 function SummaryWrapper(props) {
-  const classes = useStyles();
+
   const options = useMemo(()=>({
     showDataPoints: props.showDataPoints,
     showTooltip: props.showTooltip,
@@ -259,23 +249,23 @@ function SummaryWrapper(props) {
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
   return (
     <>
-      <Grid container spacing={0.5} className={classes.container}>
+      <Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
         <Grid item md={6}>
-          <div className={classes.tableContainer}>
-            <div className={classes.containerHeader}>{gettext('OS information')}</div>
+          <div className='Summary-tableContainer'>
+            <div className='Summary-containerHeader'>{gettext('OS information')}</div>
             <SummaryTable data={props.osStats} />
           </div>
         </Grid>
-        <Grid item md={6}className={classes.chartContainer}>
+        <Grid item md={6} sx={{padding: '4px'}}>
           <ChartContainer id='hpc-graph' title={gettext('Process & handle count')} datasets={props.processHandleCount.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.processHandleCount} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} showSecondAxis={true} />
           </ChartContainer>
         </Grid>
       </Grid>
-      <Grid container spacing={0.5} className={classes.container}>
+      <Grid container spacing={0.5} sx={{height: 'auto', padding: '0px !important', marginBottom: '4px'}}>
         <Grid item md={6}>
-          <div className={classes.tableContainer}>
-            <div className={classes.containerHeader}>{gettext('CPU information')}</div>
+          <div className='Summary-tableContainer'>
+            <div className='Summary-containerHeader'>{gettext('CPU information')}</div>
             <SummaryTable data={props.cpuStats} />
           </div>
         </Grid>
diff --git a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
index 86fa1e516..88a774702 100644
--- a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
@@ -8,96 +8,111 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import pgAdmin from 'sources/pgadmin';
 import PgAdminLogo from './PgAdminLogo';
 import { Link } from '@mui/material';
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
-    background: theme.palette.grey[400],
-    overflow: 'hidden',
-    padding: '8px',
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
-    height: '100%'
 
-  },
-  dashboardContainer: {
+const Root = styled('div')(({theme}) => ({
+  background: theme.palette.grey[400],
+  overflow: 'hidden',
+  padding: '8px',
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  height: '100%',
+  '& .WelcomeDashboard-dashboardContainer': {
     paddingBottom: '8px',
-    minHeight: '100%'
-  },
-  card: {
-    position: 'relative',
-    minWidth: 0,
-    wordWrap: 'break-word',
-    backgroundColor: theme.otherVars.tableBg,
-    backgroundClip: 'border-box',
-    border: '1px solid' + theme.otherVars.borderColor,
-    borderRadius: theme.shape.borderRadius,
-    marginTop: 8
-  },
-  row: {
-    marginRight: '-8px',
-    marginLeft: '-8px'
-  },
-  rowContent: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    marginRight: '-7.5px',
-    marginLeft: '-7.5px'
-  },
-  cardHeader: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold',
-    backgroundColor: theme.otherVars.tableBg,
-    borderBottom: '1px solid',
-    borderBottomColor: theme.otherVars.borderColor,
-  },
-  dashboardLink: {
-    color: theme.otherVars.colorFg + '!important',
-    flex: '0 0 50%',
-    maxWidth: '50%',
-    textAlign: 'center',
-    cursor: 'pointer'
-  },
-  gettingStartedLink: {
-    flex: '0 0 25%',
-    maxWidth: '50%',
-    textAlign: 'center',
-    cursor: 'pointer'
-  },
-  link: {
-    color: theme.palette.text.primary + '!important',
-  },
-  cardColumn: {
-    flex: '0 0 100%',
-    maxWidth: '100%',
-    margin: '8px'
-  },
-  cardBody: {
-    flex: '1 1 auto',
-    minHeight: '1px',
-    padding: '0.5rem !important',
-  },
-  welcomeLogo: {
-    width: '400px',
-    '& .app-name': {
-      fill: theme.otherVars.colorBrand
+    minHeight: '100%',
+
+    '& .WelcomeDashboard-row': {
+      marginRight: '-8px',
+      marginLeft: '-8px'
     },
-    '& .app-name-underline': {
-      stroke: theme.palette.text.primary
+    '& .WelcomeDashboard-cardColumn': {
+      flex: '0 0 100%',
+      maxWidth: '100%',
+      margin: '8px',
+
+      '& .WelcomeDashboard-card': {
+        position: 'relative',
+        minWidth: 0,
+        wordWrap: 'break-word',
+        backgroundColor: theme.otherVars.tableBg,
+        backgroundClip: 'border-box',
+        border: '1px solid' + theme.otherVars.borderColor,
+        borderRadius: theme.shape.borderRadius,
+        marginTop: 8,
+
+        '& .WelcomeDashboard-cardHeader': {
+          padding: '0.25rem 0.5rem',
+          fontWeight: 'bold',
+          backgroundColor: theme.otherVars.tableBg,
+          borderBottom: '1px solid',
+          borderBottomColor: theme.otherVars.borderColor,
+        },
+        '& .WelcomeDashboard-cardBody': {
+          flex: '1 1 auto',
+          minHeight: '1px',
+          padding: '0.5rem !important',
+
+          '& .WelcomeDashboard-welcomeLogo': {
+            width: '400px',
+            '& .app-name': {
+              fill: theme.otherVars.colorBrand
+            },
+            '& .app-name-underline': {
+              stroke: theme.palette.text.primary
+            },
+            '& .app-tagline': {
+              fill: theme.palette.text.primary
+            }
+          },
+
+          '& .WelcomeDashboard-rowContent': {
+            display: 'flex',
+            flexWrap: 'wrap',
+            marginRight: '-7.5px',
+            marginLeft: '-7.5px',
+
+            '& .WelcomeDashboard-dashboardLink': {
+              color: theme.palette.text.primary + ' !important',
+              flex: '0 0 50%',
+              maxWidth: '50%',
+              textAlign: 'center',
+              cursor: 'pointer',
+
+              '& .WelcomeDashboard-link': {
+                color: theme.palette.text.primary + ' !important',
+
+                '& .WelcomeDashboard-dashboardIcon': {
+                  color: theme.otherVars.colorBrand
+                }
+              },
+            },
+
+            '& .WelcomeDashboard-gettingStartedLink': {
+              flex: '0 0 25%',
+              maxWidth: '50%',
+              textAlign: 'center',
+              cursor: 'pointer',
+
+              '& .WelcomeDashboard-link': {
+                color: theme.palette.text.primary + ' !important',
+
+                '& .WelcomeDashboard-dashboardIcon': {
+                  color: theme.otherVars.colorBrand
+                }
+              },
+            },
+          },
+        },
+      },
     },
-    '& .app-tagline': {
-      fill: theme.palette.text.primary
-    }
-  },
-  dashboardIcon: {
-    color: theme.otherVars.colorBrand
   },
 }));
 
@@ -130,18 +145,15 @@ function AddNewServer(pgBrowser) {
 }
 
 export default function WelcomeDashboard({ pgBrowser }) {
-
-  const classes = useStyles();
-
   return (
-    <div className={classes.emptyPanel}>
-      <div className={classes.dashboardContainer}>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Welcome')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.welcomeLogo}>
+    <Root>
+      <div className='WelcomeDashboard-dashboardContainer'>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Welcome')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-welcomeLogo'>
                   <PgAdminLogo />
                 </div>
                 <h4>
@@ -157,15 +169,15 @@ export default function WelcomeDashboard({ pgBrowser }) {
             </div>
           </div>
         </div>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Quick Links')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.rowContent}>
-                  <div className={classes.dashboardLink}>
-                    <Link onClick={() => { AddNewServer(pgBrowser); }} className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Quick Links')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-rowContent'>
+                  <div className='WelcomeDashboard-dashboardLink'>
+                    <Link onClick={() => { AddNewServer(pgBrowser); }} className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           className="fa fa-4x fa-server"
                           aria-hidden="true"
@@ -174,9 +186,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       {gettext('Add New Server')}
                     </Link>
                   </div>
-                  <div className={classes.dashboardLink}>
-                    <Link onClick={() => pgAdmin.Preferences.show()} className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+                  <div className='WelcomeDashboard-dashboardLink'>
+                    <Link onClick={() => pgAdmin.Preferences.show()} className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           id="mnu_preferences"
                           className="fa fa-4x fa-cogs"
@@ -191,19 +203,19 @@ export default function WelcomeDashboard({ pgBrowser }) {
             </div>
           </div>
         </div>
-        <div className={classes.row}>
-          <div className={classes.cardColumn}>
-            <div className={classes.card}>
-              <div className={classes.cardHeader}>{gettext('Getting Started')}</div>
-              <div className={classes.cardBody}>
-                <div className={classes.rowContent}>
-                  <div className={classes.gettingStartedLink}>
+        <div className='WelcomeDashboard-row'>
+          <div className='WelcomeDashboard-cardColumn'>
+            <div className='WelcomeDashboard-card'>
+              <div className='WelcomeDashboard-cardHeader'>{gettext('Getting Started')}</div>
+              <div className='WelcomeDashboard-cardBody'>
+                <div className='WelcomeDashboard-rowContent'>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                     <a
                       href="https://www.postgresql.org/docs"
                       target="postgres_help"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                     >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           className="fa fa-4x dashboard-pg-doc"
                           aria-hidden="true"
@@ -212,9 +224,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       {gettext('PostgreSQL Documentation')}
                     </a>
                   </div>
-                  <div className={classes.gettingStartedLink}>
-                    <a href="https://www.pgadmin.org" target="pgadmin_website" className={classes.link}>
-                      <div className={classes.dashboardIcon}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
+                    <a href="https://www.pgadmin.org" target="pgadmin_website" className='WelcomeDashboard-link'>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           className="fa fa-4x fa-globe"
                           aria-hidden="true"
@@ -223,13 +235,13 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       {gettext('pgAdmin Website')}
                     </a>
                   </div>
-                  <div className={classes.gettingStartedLink}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                     <a
                       href="https://planet.postgresql.org"
                       target="planet_website"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                     >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           className="fa fa-4x fa-book"
                           aria-hidden="true"
@@ -238,13 +250,13 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       {gettext('Planet PostgreSQL')}
                     </a>
                   </div>
-                  <div className={classes.gettingStartedLink}>
+                  <div className='WelcomeDashboard-gettingStartedLink'>
                     <a
                       href="https://www.postgresql.org/community"
                       target="postgres_website"
-                      className={classes.link}
+                      className='WelcomeDashboard-link'
                     >
-                      <div className={classes.dashboardIcon}>
+                      <div className='WelcomeDashboard-dashboardIcon'>
                         <span
                           className="fa fa-4x fa-users"
                           aria-hidden="true"
@@ -259,7 +271,7 @@ export default function WelcomeDashboard({ pgBrowser }) {
           </div>
         </div>
       </div>
-    </div>
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
index dcbfc77d5..d444fca3a 100644
--- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
@@ -7,29 +7,20 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box, Card, CardContent, CardHeader } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 
 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
 
-
-const useStyles = makeStyles((theme) => ({
-  chartCard: {
-    border: '1px solid '+theme.otherVars.borderColor,
-    height: '100%',
-  },
-  chartCardContent: {
-    padding: '0.25rem 0.5rem',
-    height: '165px',
-    display: 'flex',
-  },
-  chartLegend: {
+const StyledCard = styled(Card)(({theme}) => ({
+  border: '1px solid '+theme.otherVars.borderColor,
+  height: '100%',
+  '& .ChartContainer-chartLegend': {
     marginLeft: 'auto',
     '& > div': {
       display: 'flex',
       fontWeight: 'normal',
-
       '& .legend-value': {
         marginLeft: '4px',
         '& .legend-label': {
@@ -37,17 +28,22 @@ const useStyles = makeStyles((theme) => ({
         }
       }
     }
+  },
+  '& .ChartContainer-cardContent': {
+    padding: '0.25rem 0.5rem',
+    height: '165px',
+    display: 'flex',
   }
 }));
 
 export default function ChartContainer(props) {
-  const classes = useStyles();
+
 
   return (
-    <Card className={classes.chartCard} elevation={0} data-testid="chart-container">
+    <StyledCard elevation={0} data-testid="chart-container">
       <CardHeader title={<Box display="flex" justifyContent="space-between">
         <div id={props.id}>{props.title}</div>
-        <div className={classes.chartLegend}>
+        <div className='ChartContainer-chartLegend'>
           <div style={{display: 'flex', flexWrap: 'wrap'}}>
             {props.datasets?.map((datum)=>(
               <div className="legend-value" key={datum.label}>
@@ -58,11 +54,11 @@ export default function ChartContainer(props) {
           </div>
         </div>
       </Box>} />
-      <CardContent className={classes.chartCardContent}>
+      <CardContent className='ChartContainer-cardContent'>
         {!props.errorMsg && !props.isTest && props.children}
         {props.errorMsg && <EmptyPanelMessage text={props.errorMsg}/>}
       </CardContent>
-    </Card>
+    </StyledCard>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
index 781abae1f..c329376de 100644
--- a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
+++ b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
@@ -8,36 +8,33 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
 import { PgIconButton } from '../../../../static/js/components/Buttons';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme) => ({
-  refreshButton: {
+const StyledPgIconButton = styled(PgIconButton)(({theme}) => ({
+  '&.RefreshButtons': {
     marginLeft: 'auto',
-    height:  '1.9rem',
-    width:  '2.2rem',
+    height: '1.9rem !important',
+    width: '2.2rem !important',
     ...theme.mixins.panelBorder,
-  },
+  }
 }));
 
-
 export default function RefreshButton({onClick}) {
-  const classes = useStyles();
-
-  return(
-    <PgIconButton
+  return (
+    <StyledPgIconButton
       size="xs"
       noBorder
-      className={classes.refreshButton}
+      className='RefreshButtons'
       icon={<CachedOutlinedIcon />}
       onClick={onClick}
       color="default"
       aria-label="Refresh"
       title={gettext('Refresh')}
-    ></PgIconButton>
+    ></StyledPgIconButton>
   );
 }
 
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
index 11d678b87..4454b3e5d 100644
--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -7,42 +7,37 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    ...theme.mixins.panelBorder.all,
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden !important',
-    height: '100%',
-    width: '100%',
-    minHeight: '400px',
-    borderRadius: theme.shape.borderRadius,
-  },
-  cardHeader: {
+const StyledBox = styled(Box)(({theme}) => ({
+  ...theme.mixins.panelBorder.all,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden !important',
+  height: '100%',
+  width: '100%',
+  minHeight: '400px',
+  borderRadius: theme.shape.borderRadius,
+  '& .SectionContainer-cardHeader': {
     backgroundColor: theme.otherVars.tableBg,
     borderBottom: '1px solid',
     borderBottomColor: theme.otherVars.borderColor,
     display: 'flex',
     alignItems: 'center',
+    '& .SectionContainer-cardTitle': {
+      padding: '0.25rem 0.5rem',
+      fontWeight: 'bold',
+    }
   },
-  cardTitle: {
-    padding: '0.25rem 0.5rem',
-    fontWeight: 'bold',
-  }
 }));
 
 export default function SectionContainer({title, titleExtras, children, style}) {
-  const classes = useStyles();
-
   return (
-    <Box className={classes.root} style={style}>
-      <Box className={classes.cardHeader} title={title}>
-        <div className={classes.cardTitle}>{title}</div>
+    <StyledBox style={style}>
+      <Box className='SectionContainer-cardHeader' title={title}>
+        <div className='SectionContainer-cardTitle'>{title}</div>
         <div style={{marginLeft: 'auto'}}>
           {titleExtras}
         </div>
@@ -50,7 +45,7 @@ export default function SectionContainer({title, titleExtras, children, style})
       <Box height="100%" display="flex" flexDirection="column" minHeight={0}>
         {children}
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
index 4671f55c6..f368a053f 100644
--- a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
@@ -1,24 +1,28 @@
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import clsx from 'clsx';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import { BgProcessManagerProcessState } from './BgProcessConstants';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 
-
-const useStyles = makeStyles((theme)=>({
-  container: {
-    borderRadius: theme.shape.borderRadius,
-    padding: '0.25rem 1rem 1rem',
-    minWidth: '325px',
-    ...theme.mixins.panelBorder.all,
+const StyledBox = styled(Box)(({theme}) => ({
+  borderRadius: theme.shape.borderRadius,
+  padding: '0.25rem 1rem 1rem',
+  minWidth: '325px',
+  ...theme.mixins.panelBorder.all,
+  '&.BgProcessNotify-containerSuccess': {
+    borderColor: theme.palette.success.main,
+    backgroundColor: theme.palette.success.light,
   },
-  containerHeader: {
+  '&.BgProcessNotify-containerError': {
+    borderColor: theme.palette.error.main,
+    backgroundColor: theme.palette.error.light,
+  },
+  '& .BgProcessNotify-containerHeader': {
     height: '32px',
     display: 'flex',
     justifyContent: 'space-between',
@@ -26,36 +30,27 @@ const useStyles = makeStyles((theme)=>({
     alignItems: 'center',
     borderTopLeftRadius: 'inherit',
     borderTopRightRadius: 'inherit',
+    '& .BgProcessNotify-iconSuccess': {
+      color: theme.palette.success.main,
+    },
+    '& .BgProcessNotify-iconError': {
+      color: theme.palette.error.main,
+    }
   },
-  containerBody: {
+  '&.BgProcessNotify-containerBody': {
     marginTop: '1rem',
     overflowWrap: 'break-word',
   },
-  containerSuccess: {
-    borderColor: theme.palette.success.main,
-    backgroundColor: theme.palette.success.light,
-  },
-  iconSuccess: {
-    color: theme.palette.success.main,
-  },
-  containerError: {
-    borderColor: theme.palette.error.main,
-    backgroundColor: theme.palette.error.light,
-  },
-  iconError: {
-    color: theme.palette.error.main,
-  },
 }));
 
 function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true, dataTestSuffix=''}) {
-  const classes = useStyles();
   return (
-    <Box className={clsx(classes.container, (success ? classes.containerSuccess : classes.containerError))} data-test={'process-popup-' + dataTestSuffix}>
-      <Box display="flex" justifyContent="space-between" className={classes.containerHeader}>
+    <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>
-        <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={onClose} title={'Close'} className={success ? classes.iconSuccess : classes.iconError} />
+        <PgIconButton size="xs" noBorder icon={<CloseIcon />} onClick={onClose} title={'Close'} className={success ? 'BgProcessNotify-iconSuccess' : 'BgProcessNotify-iconError'} />
       </Box>
-      <Box className={classes.containerBody}>
+      <Box className='BgProcessNotify-containerBody'>
         <Box>{desc}</Box>
         <Box marginTop={'1rem'} display="flex">
           <DefaultButton startIcon={<DescriptionOutlinedIcon />} onClick={()=>{
@@ -64,7 +59,7 @@ function ProcessNotifyMessage({title, desc, onClose, onViewProcess, success=true
           }}>View Processes</DefaultButton>
         </Box>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 ProcessNotifyMessage.propTypes = {
diff --git a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
index a18b0da9e..693b54b2e 100644
--- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useState, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents';
 import { BgProcessManagerProcessState } from './BgProcessConstants';
@@ -24,16 +24,14 @@ import pgAdmin from 'sources/pgadmin';
 import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded';
 
 
-const useStyles = makeStyles((theme)=>({
-  container: {
-    backgroundColor: theme.palette.background.default,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '8px',
-    userSelect: 'text',
-  },
-  cmd: {
+const StyledBox = styled(Box)(({theme}) => ({
+  backgroundColor: theme.palette.background.default,
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '8px',
+  userSelect: 'text',
+  '& .ProcessDetails-cmd': {
     ...theme.mixins.panelBorder.all,
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.otherVars.inputDisabledBg,
@@ -41,19 +39,7 @@ const useStyles = makeStyles((theme)=>({
     margin: '8px 0px',
     padding: '4px',
   },
-  logs: {
-    flexGrow: 1,
-    borderRadius: theme.shape.borderRadius,
-    padding: '4px',
-    overflow: 'auto',
-    textOverflow: 'wrap-text',
-    margin: '8px 0px',
-    ...theme.mixins.panelBorder.all,
-  },
-  logErr: {
-    color: theme.palette.error.main,
-  },
-  terminateBtn: {
+  '& .ProcessDetails-terminateBtn': {
     backgroundColor: theme.palette.error.main,
     color: theme.palette.error.contrastText,
     border: 0,
@@ -65,7 +51,20 @@ const useStyles = makeStyles((theme)=>({
       color: theme.palette.error.contrastText + ' !important',
       border: 0,
     }
-  }
+  },
+  '& .ProcessDetails-logs': {
+    flexGrow: 1,
+    borderRadius: theme.shape.borderRadius,
+    padding: '4px',
+    overflow: 'auto',
+    textOverflow: 'wrap-text',
+    margin: '8px 0px',
+    ...theme.mixins.panelBorder.all,
+
+    '& .ProcessDetails-logErr': {
+      color: theme.palette.error.main,
+    },
+  },
 }));
 
 async function getDetailedStatus(api, jobId, out, err) {
@@ -80,7 +79,6 @@ async function getDetailedStatus(api, jobId, out, err) {
 }
 
 export default function ProcessDetails({data}) {
-  const classes = useStyles();
   const api = useMemo(()=>getApiInstance());
   const [logs, setLogs] = useState(null);
   const [completed, setCompleted] = useState(false);
@@ -149,15 +147,15 @@ export default function ProcessDetails({data}) {
 
   const errRe = new RegExp(': (' + gettext('error') + '|' + gettext('fatal') + '):', 'i');
   return (
-    <Box display="flex" flexDirection="column" className={classes.container} data-test="process-details">
+    <StyledBox display="flex" flexDirection="column" data-test="process-details">
       <Box data-test="process-message">{data.details?.message}</Box>
       {data.details?.cmd && <>
         <Box>{gettext('Running command')}:</Box>
-        <Box data-test="process-cmd" className={classes.cmd}>{data.details.cmd}</Box>
+        <Box data-test="process-cmd" className='ProcessDetails-cmd'>{data.details.cmd}</Box>
       </>}
       {data.details?.query && <>
         <Box>{gettext('Running query')}:</Box>
-        <Box data-test="process-cmd" className={classes.cmd}>{data.details.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><span><AccessTimeRoundedIcon /> {gettext('Start time')}: {new Date(data.stime).toString()}</span></Box>
@@ -167,12 +165,12 @@ export default function ProcessDetails({data}) {
             pgAdmin.Tools.FileManager.openStorageManager(data.current_storage_dir);
           }} style={{marginRight: '4px'}} />}
           <DefaultButton disabled={process_state != BgProcessManagerProcessState.PROCESS_STARTED || data.server_id != null}
-            startIcon={<HighlightOffRoundedIcon />} className={classes.terminateBtn} onClick={onStopProcess}>
+            startIcon={<HighlightOffRoundedIcon />} className='ProcessDetails-terminateBtn' onClick={onStopProcess}>
               Stop Process
           </DefaultButton>
         </Box>
       </Box>
-      <Box flexGrow={1} className={classes.logs}>
+      <Box 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)=>{
@@ -181,14 +179,14 @@ export default function ProcessDetails({data}) {
             if(i==logs.length-1) {
               el?.scrollIntoView();
             }
-          }} key={id} className={errRe.test(log) ? classes.logErr : ''}>{log}</div>;
+          }} key={id} className={errRe.test(log) ? 'ProcessDetails-logErr' : ''}>{log}</div>;
         })}
       </Box>
       <Box 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>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
index 893155f79..b82988e63 100644
--- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useCallback, useEffect, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
 import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -26,67 +26,36 @@ import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary';
 import ProcessDetails from './ProcessDetails';
 
 
-const useStyles = makeStyles((theme) => ({
-  stopButton: {
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  '& .Processes-stopButton': {
     color: theme.palette.error.main
   },
-  buttonClick: {
-    backgroundColor: theme.palette.grey[400]
-  },
-  emptyPanel: {
-    minHeight: '100%',
-    minWidth: '100%',
-    background: theme.otherVars.emptySpaceBg,
-    overflow: 'auto',
-    padding: '8px',
-    display: 'flex',
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '7.5px',
-    overflow: 'auto !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
-  noPadding: {
-    padding: 0,
-  },
-  bgSucess: {
-    backgroundColor: theme.palette.success.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgFailed: {
-    backgroundColor: theme.palette.error.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgTerm: {
-    backgroundColor: theme.palette.warning.light,
-    height: '100%',
-    padding: '4px',
-  },
-  bgRunning: {
-    backgroundColor: theme.palette.primary.light,
-    height: '100%',
-    padding: '4px',
+  '& .Processes-noPadding': {
+    padding: '0 !important',
+    '& .Processes-bgSucess': {
+      backgroundColor: theme.palette.success.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgFailed': {
+      backgroundColor: theme.palette.error.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgTerm': {
+      backgroundColor: theme.palette.warning.light,
+      height: '100%',
+      padding: '4px',
+    },
+    '& .Processes-bgRunning': {
+      backgroundColor: theme.palette.primary.light,
+      height: '100%',
+      padding: '4px',
+    }
   },
 }));
 
-
 const ProcessStateTextAndColor = {
   [BgProcessManagerProcessState.PROCESS_NOT_STARTED]: [gettext('Not started'), 'bgRunning'],
   [BgProcessManagerProcessState.PROCESS_STARTED]: [gettext('Running'), 'bgRunning'],
@@ -96,7 +65,7 @@ const ProcessStateTextAndColor = {
   [BgProcessManagerProcessState.PROCESS_FAILED]: [gettext('Failed'), 'bgFailed'],
 };
 export default function Processes() {
-  const classes = useStyles();
+
   const pgAdmin = usePgAdmin();
   const [tableData, setTableData] = React.useState([]);
   const [selectedRows, setSelectedRows] = React.useState({});
@@ -130,7 +99,7 @@ export default function Processes() {
           size="xs"
           noBorder
           icon={<CancelIcon />}
-          className={classes.stopButton}
+          className='Processes-stopButton'
           disabled={row.original.process_state != BgProcessManagerProcessState.PROCESS_STARTED
             || row.original.server_id != null}
           onClick={(e) => {
@@ -165,7 +134,7 @@ export default function Processes() {
 
     const StatusCell = ({row})=>{
       const [text, bgcolor] = ProcessStateTextAndColor[row.original.process_state];
-      return <Box className={classes[bgcolor]}>{text}</Box>;
+      return <Box className={'Processes-'+bgcolor}>{text}</Box>;
     };
     StatusCell.displayName = 'StatusCell';
     StatusCell.propTypes = cellPropTypes;
@@ -247,7 +216,7 @@ export default function Processes() {
       width: 120,
       minWidth: 120,
       accessorFn: (row)=>ProcessStateTextAndColor[row.process_state][0],
-      dataClassName: classes.noPadding,
+      dataClassName: 'Processes-noPadding',
       cell: StatusCell,
     },
     {
@@ -274,48 +243,48 @@ export default function Processes() {
   }, []);
 
   return (
-    <PgTable
-      data-test="processes"
-      className={classes.autoResizer}
-      columns={columns}
-      data={tableData}
-      sortOptions={[{id: 'stime', desc: true}]}
-      selectedRows={selectedRows}
-      setSelectedRows={setSelectedRows}
-      hasSelectRow={true}
-      tableProps={{
-        getRowId: (row)=>{
-          return row.id;
-        }
-      }}
-      CustomHeader={()=>{
-        return (
-          <Box>
-            <PgButtonGroup>
-              <PgIconButton
-                icon={<DeleteIcon style={{height: '1.4rem'}}/>}
-                aria-label="Acknowledge and Remove"
-                title={gettext('Acknowledge and Remove')}
-                onClick={() => {
-                  pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
-                    pgAdmin.Browser.BgProcessManager.acknowledge(selectedRowIDs);
-                    setSelectedRows({});
-                  });
-                }}
-                disabled={selectedRowIDs.length <= 0}
-              ></PgIconButton>
-              <PgIconButton
-                icon={<HelpIcon style={{height: '1.4rem'}}/>}
-                aria-label="Help"
-                title={gettext('Help')}
-                onClick={() => {
-                  window.open(url_for('help.static', {'filename': 'processes.html'}));
-                }}
-              ></PgIconButton>
-            </PgButtonGroup>
-          </Box>
-        );
-      }}
-    ></PgTable>
+    <Root>
+      <PgTable
+        data-test="processes"
+        columns={columns}
+        data={tableData}
+        sortOptions={[{id: 'stime', desc: true}]}
+        selectedRows={selectedRows}
+        setSelectedRows={setSelectedRows}
+        hasSelectRow={true}
+        tableProps={{
+          getRowId: (row)=>{
+            return row.id;
+          }
+        }}
+        CustomHeader={()=>{
+          return (
+            <Box>
+              <PgButtonGroup>
+                <PgIconButton
+                  icon={<DeleteIcon style={{height: '1.4rem'}}/>}
+                  aria-label="Acknowledge and Remove"
+                  title={gettext('Acknowledge and Remove')}
+                  onClick={() => {
+                    pgAdmin.Browser.notifier.confirm(gettext('Remove Processes'), gettext('Are you sure you want to remove the selected processes?'), ()=>{
+                      pgAdmin.Browser.BgProcessManager.acknowledge(selectedRowIDs);
+                      setSelectedRows({});
+                    });
+                  }}
+                  disabled={selectedRowIDs.length <= 0}
+                ></PgIconButton>
+                <PgIconButton
+                  icon={<HelpIcon style={{height: '1.4rem'}}/>}
+                  aria-label="Help"
+                  title={gettext('Help')}
+                  onClick={() => {
+                    window.open(url_for('help.static', {'filename': 'processes.html'}));
+                  }}
+                ></PgIconButton>
+              </PgButtonGroup>
+            </Box>
+          );
+        }}
+      ></PgTable></Root>
   );
 }
diff --git a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
index 5f7969207..567bccfb8 100644
--- a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
+++ b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
@@ -11,7 +11,6 @@ import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import React from 'react';
 import { Box, Paper } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import Wizard from '../../../../static/js/helpers/wizard/Wizard';
 import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
 import {FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
@@ -30,42 +29,9 @@ import EventBus from '../../../../static/js/helpers/EventBus';
 import { CLOUD_PROVIDERS, CLOUD_PROVIDERS_LABELS } from './cloud_constants';
 import { LAYOUT_EVENTS } from '../../../../static/js/helpers/Layout';
 
-
-const useStyles = makeStyles(() =>
-  ({
-    messageBox: {
-      marginBottom: '1em',
-      display: 'flex',
-    },
-    messagePadding: {
-      paddingTop: '10px',
-      flex: 2.5,
-    },
-    buttonMarginEDB: {
-      position: 'relative',
-      top: '20%',
-    },
-    toggleButton: {
-      height: '100px',
-    },
-    summaryContainer: {
-      flexGrow: 1,
-      minHeight: 0,
-      overflow: 'auto',
-    },
-    boxText: {
-      paddingBottom: '5px'
-    },
-    authButton: {
-      marginLeft: '12em'
-    }
-  }),
-);
-
 export const CloudWizardEventsContext = React.createContext();
 
 export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}) {
-  const classes = useStyles();
   const eventBus = React.useRef(new EventBus());
 
   let steps = [gettext('Cloud Provider'), gettext('Credentials'), gettext('Cluster Type'),
@@ -416,10 +382,10 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
   });
 
   let cloud_providers = [
-    {label: gettext(CLOUD_PROVIDERS_LABELS.AWS), value: CLOUD_PROVIDERS.AWS, icon: <AWSIcon className={classes.icon} />},
-    {label: gettext(CLOUD_PROVIDERS_LABELS.BIGANIMAL), value: CLOUD_PROVIDERS.BIGANIMAL, icon: <BigAnimalIcon className={classes.icon} />},
-    {label: gettext(CLOUD_PROVIDERS_LABELS.AZURE), value: CLOUD_PROVIDERS.AZURE, icon: <AzureIcon className={classes.icon} /> },
-    {label: gettext(CLOUD_PROVIDERS_LABELS.GOOGLE), value: CLOUD_PROVIDERS.GOOGLE, icon: <GoogleCloudIcon className={classes.icon} /> }];
+    {label: gettext(CLOUD_PROVIDERS_LABELS.AWS), value: CLOUD_PROVIDERS.AWS, icon: <AWSIcon  />},
+    {label: gettext(CLOUD_PROVIDERS_LABELS.BIGANIMAL), value: CLOUD_PROVIDERS.BIGANIMAL, icon: <BigAnimalIcon />},
+    {label: gettext(CLOUD_PROVIDERS_LABELS.AZURE), value: CLOUD_PROVIDERS.AZURE, icon: <AzureIcon  /> },
+    {label: gettext(CLOUD_PROVIDERS_LABELS.GOOGLE), value: CLOUD_PROVIDERS.GOOGLE, icon: <GoogleCloudIcon  /> }];
 
   return (
     <CloudWizardEventsContext.Provider value={eventBus.current}>
@@ -433,10 +399,10 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
         beforeNext={onBeforeNext}
         beforeBack={onBeforeBack}>
         <WizardStep stepId={0}>
-          <Box className={classes.messageBox}>
-            <Box className={classes.messagePadding}>{gettext('Select a cloud provider for PostgreSQL database.')}</Box>
+          <Box sx={{ marginBottom: '1em', display: 'flex'}}>
+            <Box sx={{paddingTop: '10px', flex: 2.5}}>{gettext('Select a cloud provider for PostgreSQL database.')}</Box>
           </Box>
-          <Box className={classes.messageBox}>
+          <Box sx={{ marginBottom: '1em', display: 'flex'}}>
             <ToggleButtons cloudProvider={cloudProvider} setCloudProvider={setCloudProvider}
               options={cloud_providers}
             ></ToggleButtons>
@@ -444,8 +410,8 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
           <FormFooterMessage type={errMsg[0]} message={errMsg[1]} onClose={onErrClose} />
         </WizardStep>
         <WizardStep stepId={1} >
-          <Box className={classes.buttonMarginEDB}>
-            {cloudProvider == CLOUD_PROVIDERS.BIGANIMAL && <Box className={classes.messageBox}>
+          <Box sx={{ position: 'relative',top: '20%'}}>
+            {cloudProvider == CLOUD_PROVIDERS.BIGANIMAL && <Box sx={{ marginBottom: '1em', display: 'flex'}}>
               <Box>{gettext('The verification code to authenticate the pgAdmin to EDB BigAnimal is: ')} <strong>{verificationCode}</strong>
                 <br/>{gettext('By clicking the below button, you will be redirected to the EDB BigAnimal authentication page in a new tab.')}
               </Box>
@@ -453,7 +419,7 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
             {cloudProvider == CLOUD_PROVIDERS.BIGANIMAL && <PrimaryButton onClick={authenticateBigAnimal} disabled={verificationIntiated}>
               {gettext('Click here to authenticate yourself to EDB BigAnimal')}
             </PrimaryButton>}
-            {cloudProvider == CLOUD_PROVIDERS.BIGANIMAL && <Box className={classes.messageBox}>
+            {cloudProvider == CLOUD_PROVIDERS.BIGANIMAL && <Box sx={{ marginBottom: '1em', display: 'flex'}}>
               <Box ></Box>
             </Box>}
           </Box>
@@ -542,8 +508,8 @@ export default function CloudWizard({ nodeInfo, nodeData, onClose, cloudPanelId}
           }
         </WizardStep>
         <WizardStep stepId={5} >
-          <Box className={classes.boxText}>{gettext('Please review the details before creating the cloud instance.')}</Box>
-          <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
+          <Box sx={{ paddingBottom: '5px'}}>{gettext('Please review the details before creating the cloud instance.')}</Box>
+          <Paper variant="outlined" elevation={0} sx={{ flexGrow: 1, minHeight: 0, overflow: 'auto'}}>
             {cloudProvider == CLOUD_PROVIDERS.AWS && callRDSAPI == 5 && <FinalSummary
               cloudProvider={cloudProvider}
               instanceData={cloudInstanceDetails}
diff --git a/web/pgadmin/misc/cloud/static/js/aws.js b/web/pgadmin/misc/cloud/static/js/aws.js
index 40fa6a353..5c4e58b33 100644
--- a/web/pgadmin/misc/cloud/static/js/aws.js
+++ b/web/pgadmin/misc/cloud/static/js/aws.js
@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import pgAdmin from 'sources/pgadmin';
 import { getNodeAjaxOptions, getNodeListById } from 'pgbrowser/node_ajax';
 import {CloudInstanceDetailsSchema, CloudDBCredSchema, DatabaseSchema} from './aws_schema.ui';
@@ -16,16 +17,14 @@ import url_for from 'sources/url_for';
 import getApiInstance from '../../../../static/js/api_instance';
 import { isEmptyString } from 'sources/validators';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import gettext from 'sources/gettext';
 
-const useStyles = makeStyles(() =>
+const StyledSchemaView= styled(SchemaView)(() => 
   ({
-    formClass: {
+    '& .aws-formClass': {
       overflow: 'auto',
     }
-  }),
-);
+  }));
 
 // AWS credentials
 export function AwsCredentials(props) {
@@ -66,7 +65,7 @@ AwsCredentials.propTypes = {
 // AWS Instance Details
 export function AwsInstanceDetails(props) {
   const [cloudInstanceDetailsInstance, setCloudInstanceDetailsInstance] = React.useState();
-  const classes = useStyles();
+
 
   React.useMemo(() => {
     const cloudDBInstanceSchema = new CloudInstanceDetailsSchema({
@@ -114,7 +113,7 @@ export function AwsInstanceDetails(props) {
   }, [props.cloudProvider]);
 
 
-  return  <SchemaView
+  return  <StyledSchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     viewHelperProps={{ mode: 'create' }}
@@ -124,7 +123,7 @@ export function AwsInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setCloudInstanceDetails(changedData);
     }}
-    formClassName={classes.formClass}
+    formClassName='aws-formClass'
   />;
 }
 AwsInstanceDetails.propTypes = {
diff --git a/web/pgadmin/misc/cloud/static/js/azure.js b/web/pgadmin/misc/cloud/static/js/azure.js
index b79900320..101aefed1 100644
--- a/web/pgadmin/misc/cloud/static/js/azure.js
+++ b/web/pgadmin/misc/cloud/static/js/azure.js
@@ -18,15 +18,6 @@ import getApiInstance from '../../../../static/js/api_instance';
 import { CloudWizardEventsContext } from './CloudWizard';
 import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import gettext from 'sources/gettext';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles(() =>
-  ({
-    formClass: {
-      overflow: 'auto',
-    }
-  }),
-);
 
 // Azure credentials
 export function AzureCredentials(props) {
@@ -111,7 +102,6 @@ AzureCredentials.propTypes = {
 // Azure Instance
 export function AzureInstanceDetails(props) {
   const [azureInstanceSchema, setAzureInstanceSchema] = React.useState();
-  const classes = useStyles();
 
   React.useMemo(() => {
     const AzureSchema = new AzureClusterSchema({
@@ -195,7 +185,6 @@ export function AzureInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setAzureInstanceData(changedData);
     }}
-    formClassName={classes.formClass}
   />;
 }
 AzureInstanceDetails.propTypes = {
@@ -211,7 +200,6 @@ AzureInstanceDetails.propTypes = {
 // Azure Database Details
 export function AzureDatabaseDetails(props) {
   const [azureDBInstance, setAzureDBInstance] = React.useState();
-  const classes = useStyles();
 
   React.useMemo(() => {
     const azureDBSchema = new AzureDatabaseSchema({
@@ -235,7 +223,6 @@ export function AzureDatabaseDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setAzureDatabaseData(changedData);
     }}
-    formClassName={classes.formClass}
   />;
 }
 AzureDatabaseDetails.propTypes = {
diff --git a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
index 95e2e7d6f..461386a2e 100644
--- a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
+++ b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
@@ -11,38 +11,18 @@ import React from 'react';
 import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import { getAWSSummary } from './aws';
 import  {getAzureSummary} from './azure';
 import { getBigAnimalSummary } from './biganimal';
-import { commonTableStyles } from '../../../../static/js/Theme';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
-import clsx from 'clsx';
+import { TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 import gettext from 'sources/gettext';
 import { getGoogleSummary } from './google';
 import { CLOUD_PROVIDERS_LABELS } from './cloud_constants';
-
-const useStyles = makeStyles(() =>
-  ({
-    toggleButtonGroup: {
-      height: '100px',
-      flexGrow: '1'
-    },
-    toggleButtonMargin:{
-      marginTop: '0px !important',
-      padding: '12px'
-    },
-    gcpiconpadding:{
-      paddingLeft: '1.5rem'
-    }
-
-  }),
-);
+import Table from '../../../../static/js/components/Table';
 
 
 export function ToggleButtons(props) {
-  const classes = useStyles();
 
   const handleCloudProvider = (event, provider) => {
     if (provider) props.setCloudProvider(provider);
@@ -53,12 +33,12 @@ export function ToggleButtons(props) {
       color="primary"
       value={props.cloudProvider}
       onChange={handleCloudProvider}
-      className={classes.toggleButtonGroup}
+      sx={{ height: '100px', flexGrow: '1'}}
       orientation="vertical"
       exclusive>
       {
         (props.options||[]).map((option)=>{
-          return (<ToggleButton value={option.value} key={option.label} aria-label={option.label} className={clsx(classes.toggleButtonMargin, option.label==gettext(CLOUD_PROVIDERS_LABELS.GOOGLE) ? classes.gcpiconpadding : null )} component={props.cloudProvider == option.value ? PrimaryButton : DefaultButton}>
+          return (<ToggleButton value={option.value} key={option.label} aria-label={option.label} sx={{marginTop: '0px !important',padding: '12px'}} className={( option.label==gettext(CLOUD_PROVIDERS_LABELS.GOOGLE) ? 'paddingLeft: 1.5rem' : null )} component={props.cloudProvider == option.value ? PrimaryButton : DefaultButton}>
             <CheckRoundedIcon style={{visibility: props.cloudProvider == option.value  ? 'visible': 'hidden'}}/>&nbsp;
             {option.icon}&nbsp;&nbsp;&nbsp;&nbsp;{option.label}
           </ToggleButton>);
@@ -75,7 +55,6 @@ ToggleButtons.propTypes = {
 
 
 export function FinalSummary(props) {
-  const tableClasses = commonTableStyles();
   let summary = [],
     summaryHeader = ['Cloud Details', 'Version and Instance Details', 'Storage Details', 'Database Details'];
 
@@ -104,7 +83,7 @@ export function FinalSummary(props) {
 
   return summary.map((item, index) => {
     return (
-      <Table key={summaryHeader[index]} className={clsx(tableClasses.table)}>
+      <Table key={summaryHeader[index]}>
         <TableHead>
           <TableRow>
             <TableCell colSpan={2}>{gettext(summaryHeader[index])}</TableCell>
diff --git a/web/pgadmin/misc/cloud/static/js/google.js b/web/pgadmin/misc/cloud/static/js/google.js
index 84e1990e7..831f345ad 100644
--- a/web/pgadmin/misc/cloud/static/js/google.js
+++ b/web/pgadmin/misc/cloud/static/js/google.js
@@ -18,15 +18,6 @@ import getApiInstance from '../../../../static/js/api_instance';
 import { CloudWizardEventsContext } from './CloudWizard';
 import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import gettext from 'sources/gettext';
-import { makeStyles } from '@mui/styles';
-
-const useStyles = makeStyles(() =>
-  ({
-    formClass: {
-      overflow: 'auto',
-    }
-  }),
-);
 
 
 export function GoogleCredentials(props) {
@@ -126,7 +117,6 @@ GoogleCredentials.propTypes = {
 // Google Instance
 export function GoogleInstanceDetails(props) {
   const [googleInstanceSchema, setGoogleInstanceSchema] = React.useState();
-  const classes = useStyles();
 
   React.useMemo(() => {
     const GoogleClusterSchemaObj = new GoogleClusterSchema({
@@ -186,7 +176,6 @@ export function GoogleInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setGoogleInstanceData(changedData);
     }}
-    formClassName={classes.formClass}
   />;
 }
 GoogleInstanceDetails.propTypes = {
@@ -202,7 +191,6 @@ GoogleInstanceDetails.propTypes = {
 // Google Database Details
 export function GoogleDatabaseDetails(props) {
   const [googleDBInstance, setGoogleDBInstance] = React.useState();
-  const classes = useStyles();
 
   React.useMemo(() => {
     const googleDBSchema = new GoogleDatabaseSchema({
@@ -226,7 +214,6 @@ export function GoogleDatabaseDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setGoogleDatabaseData(changedData);
     }}
-    formClassName={classes.formClass}
   />;
 }
 GoogleDatabaseDetails.propTypes = {
diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
index 25e462bfd..8f8b67073 100644
--- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
+++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
@@ -8,12 +8,12 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import React, { useEffect } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@mui/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
@@ -22,8 +22,9 @@ import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabIn
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import { usePgAdmin } from '../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const Root = styled('div')(({theme}) => ({
+  height : '100%',
+  '& .Dependencies-emptyPanel': {
     minHeight: '100%',
     minWidth: '100%',
     background: theme.otherVars.emptySpaceBg,
@@ -31,26 +32,6 @@ const useStyles = makeStyles((theme) => ({
     padding: '8px',
     display: 'flex',
   },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '7.5px',
-    overflow: 'auto !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
 }));
 
 function parseData(data, node) {
@@ -75,7 +56,7 @@ function parseData(data, node) {
 }
 
 function Dependencies({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, setIsStale }) {
-  const classes = useStyles();
+
   const [tableData, setTableData] = React.useState([]);
   const [loaderText, setLoaderText] = React.useState('');
   const [msg, setMsg] = React.useState('');
@@ -164,23 +145,22 @@ function Dependencies({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStal
   }, [isActive, isStale]);
 
   return (
-    <>
+    (<Root>
       {tableData.length > 0 ? (
         <PgTable
-          className={classes.autoResizer}
           columns={columns}
           data={tableData}
           msg={msg}
           type={gettext('panel')}
         ></PgTable>
       ) : (
-        <div className={classes.emptyPanel}>
+        <div className='Dependencies-emptyPanel'>
           {loaderText ? (<Loader message={loaderText}/>) :
             <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>
       )}
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
index a0867aed8..17d9822d0 100644
--- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx
+++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
@@ -8,12 +8,12 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import React, { useEffect } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@mui/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
@@ -22,8 +22,9 @@ import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabIn
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import { usePgAdmin } from '../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const Root = styled('div')(({theme}) => ({
+  height : '100%',
+  '& .Dependents-emptyPanel': {
     minHeight: '100%',
     minWidth: '100%',
     background: theme.otherVars.emptySpaceBg,
@@ -31,26 +32,6 @@ const useStyles = makeStyles((theme) => ({
     padding: '8px',
     display: 'flex',
   },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '7.5px',
-    overflow: 'auto !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
 }));
 
 function parseData(data, node) {
@@ -75,7 +56,7 @@ function parseData(data, node) {
 }
 
 function Dependents({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, setIsStale }) {
-  const classes = useStyles();
+
   const [tableData, setTableData] = React.useState([]);
   const [loaderText, setLoaderText] = React.useState('');
   const [msg, setMsg] = React.useState('');
@@ -164,24 +145,23 @@ function Dependents({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale,
   }, [isActive, isStale]);
 
   return (
-    <>
+    (<Root>
       {tableData.length > 0 ? (
         <PgTable
-          className={classes.autoResizer}
           columns={columns}
           data={tableData}
           msg={msg}
           type={gettext('panel')}
         ></PgTable>
       ) : (
-        <div className={classes.emptyPanel}>
+        <div className='Dependents-emptyPanel'>
           {loaderText ? (<Loader message={loaderText}/>) :
             <EmptyPanelMessage text={gettext(msg)}/>
           }
         </div>
 
       )}
-    </>
+    </Root>)
   );
 }
 
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 dbffcb0db..279fe9bf1 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
@@ -7,10 +7,9 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { DefaultButton, PgButtonGroup, PgIconButton, PrimaryButton } from '../../../../../static/js/components/Buttons';
-import { useModalStyles } from '../../../../../static/js/helpers/ModalProvider';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import FolderSharedIcon from '@mui/icons-material/FolderShared';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -23,7 +22,6 @@ import SyncRoundedIcon from '@mui/icons-material/SyncRounded';
 import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
 import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
 import gettext from 'sources/gettext';
-import clsx from 'clsx';
 import { FormFooterMessage, InputSelectNonSearch, InputText, MESSAGE_TYPE } from '../../../../../static/js/components/FormComponents';
 import ListView from './ListView';
 import { PgMenu, PgMenuDivider, PgMenuItem, usePgMenuGroup } from '../../../../../static/js/components/Menu';
@@ -39,40 +37,59 @@ import ErrorBoundary from '../../../../../static/js/helpers/ErrorBoundary';
 import { MY_STORAGE } from './FileManagerConstants';
 import _ from 'lodash';
 
-const useStyles = makeStyles((theme)=>({
-  footerSaveAs: {
+const StyledBox = styled(Box)(({theme}) => ({
+  backgroundColor: theme.palette.background.default,
+  '& .FileManager-toolbar': {
+    padding: '4px',
+    display: 'flex',
+    ...theme.mixins.panelBorder?.bottom,
+    '& .FileManager-sharedStorage': {
+      width: '3rem !important',
+    },
+    '& .FileManager-inputFilename': {
+      lineHeight: 1,
+      width: '100%',
+    },
+    '& .FileManager-inputSearch': {
+      marginLeft: '4px',
+      lineHeight: 1,
+      width: '130px',
+    },
+    '& .FileManager-storageName': {
+      paddingLeft: '0.2rem'
+    },
+    '& .FileManager-sharedIcon': {
+      width: '1.3rem'
+    }
+  },
+  '& .FileManager-footer': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    padding: '0.5rem',
+    ...theme.mixins.panelBorder?.top,
+    '& .FileManager-margin': {
+      marginLeft: '0.25rem',
+    },
+  },
+  '& .FileManager-footer1': {
+    justifyContent: 'space-between',
+    padding: '4px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    '& .FileManager-formatSelect': {
+      '& .MuiSelect-select': {
+        paddingTop: '4px',
+        paddingBottom: '4px',
+      }
+    },
+  }, 
+  '& .FileManager-footerSaveAs': {
     justifyContent: 'initial',
     padding: '4px 8px',
     display: 'flex',
     alignItems: 'center',
   },
-  footer1: {
-    justifyContent: 'space-between',
-    padding: '4px 8px',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  toolbar: {
-    padding: '4px',
-    display: 'flex',
-    ...theme.mixins.panelBorder?.bottom,
-  },
-  inputFilename: {
-    lineHeight: 1,
-    width: '100%',
-  },
-  inputSearch: {
-    marginLeft: '4px',
-    lineHeight: 1,
-    width: '130px',
-  },
-  formatSelect: {
-    '& .MuiSelect-select': {
-      paddingTop: '4px',
-      paddingBottom: '4px',
-    }
-  },
-  replaceOverlay: {
+  '& .FileManager-replaceOverlay': {
     position: 'absolute',
     top: 0,
     bottom: 0,
@@ -82,7 +99,7 @@ const useStyles = makeStyles((theme)=>({
     zIndex: 2,
     display: 'flex',
   },
-  replaceDialog: {
+  '& .FileManager-replaceDialog': {
     margin: 'auto',
     marginLeft: '1rem',
     marginRight: '1rem',
@@ -91,15 +108,6 @@ const useStyles = makeStyles((theme)=>({
     width: '100%',
     ...theme.mixins.panelBorder.all,
   },
-  sharedStorage: {
-    width: '3rem !important',
-  },
-  storageName: {
-    paddingLeft: '0.2rem'
-  },
-  sharedIcon: {
-    width: '1.3rem'
-  }
 }));
 
 export function getComparator(sortColumn) {
@@ -383,15 +391,13 @@ export class FileManagerUtils {
 }
 
 function ConfirmFile({text, onYes, onNo}) {
-  const classes = useStyles();
-  const modalClasses = useModalStyles();
   return (
-    <Box className={classes.replaceOverlay}>
-      <Box margin={'8px'} className={classes.replaceDialog}>
+    <Box className='FileManager-replaceOverlay'>
+      <Box margin={'8px'} className='FileManager-replaceDialog'>
         <Box padding={'1rem'}>{text}{}</Box>
-        <Box className={modalClasses.footer}>
+        <Box className='FileManager-footer'>
           <DefaultButton data-test="no" startIcon={<CloseIcon />} onClick={onNo} >{gettext('No')}</DefaultButton>
-          <PrimaryButton data-test="yes" className={modalClasses.margin} startIcon={<CheckRoundedIcon />}
+          <PrimaryButton data-test="yes" className='FileManager-margin' startIcon={<CheckRoundedIcon />}
             onClick={onYes} autoFocus>{gettext('Yes')}</PrimaryButton>
         </Box>
       </Box>
@@ -405,8 +411,8 @@ ConfirmFile.propTypes = {
 };
 
 export default function FileManager({params, closeModal, onOK, onCancel, sharedStorages=[], restrictedSharedStorage=[]}) {
-  const classes = useStyles();
-  const modalClasses = useModalStyles();
+
+
   const apiObj = useMemo(()=>getApiInstance(), []);
   const fmUtilsObj = useMemo(()=>new FileManagerUtils(apiObj, params), []);
 
@@ -694,15 +700,15 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
 
   return (
     <ErrorBoundary>
-      <Box display="flex" flexDirection="column" height="100%" className={modalClasses.container}>
+      <StyledBox display="flex" flexDirection="column" height="100%">
         <Box 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={classes.toolbar}>
+          <Box className='FileManager-toolbar'>
             <PgButtonGroup size="small" style={{flexGrow: 1}}>
               { sharedStorages.length > 0 &&
                 <PgIconButton title={ selectedSS == MY_STORAGE ? gettext('My Storage') :gettext(selectedSS)} icon={ selectedSS == MY_STORAGE ? <><FolderIcon/><KeyboardArrowDownIcon style={{marginLeft: '-10px'}} /></> : <><FolderSharedIcon /><KeyboardArrowDownIcon style={{marginLeft: '-10px'}} /></>} splitButton
-                  name="menu-shared-storage" ref={sharedSRef} onClick={toggleMenu} className={classes.sharedStorage}/>
+                  name="menu-shared-storage" ref={sharedSRef} onClick={toggleMenu} className='FileManager-sharedStorage'/>
               }
               <PgIconButton title={gettext('Home')} onClick={async ()=>{
                 await openDir(fmUtilsObj.config?.options?.homedir, selectedSS);
@@ -710,7 +716,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
               <PgIconButton title={gettext('Go Back')} onClick={async ()=>{
                 await openDir(fmUtilsObj.dirname(fmUtilsObj.currPath), selectedSS);
               }} icon={<ArrowUpwardRoundedIcon />} disabled={!fmUtilsObj.dirname(fmUtilsObj.currPath) || showUploader} />
-              <InputText size="small" className={classes.inputFilename}
+              <InputText size="small" className='FileManager-inputFilename'
                 data-label="file-path"
                 controlProps={{maxLength: null}}
                 onKeyDown={async (e)=>{
@@ -724,7 +730,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
                 await openDir(path, selectedSS);
               }} icon={<SyncRoundedIcon />} disabled={showUploader} />
             </PgButtonGroup>
-            <InputText type="search" className={classes.inputSearch} data-label="search" placeholder={gettext('Search')} value={search} onChange={setSearch} />
+            <InputText type="search" className='FileManager-inputSearch' data-label="search" placeholder={gettext('Search')} value={search} onChange={setSearch} />
             <PgButtonGroup size="small" style={{marginLeft: '4px'}}>
               {params.dialog_type == 'storage_dialog' &&
               <PgIconButton title={gettext('Download')} icon={<GetAppRoundedIcon />}
@@ -777,7 +783,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
                   onClick={async (option)=> {
                     option.keepOpen = false;
                     await changeDir(option.value);
-                  }}><FolderIcon className={classes.sharedIcon}/><Box className={classes.storageName}>{gettext('My Storage')}</Box></PgMenuItem>
+                  }}><FolderIcon className='FileManager-sharedIcon'/><Box className='FileManager-storageName'>{gettext('My Storage')}</Box></PgMenuItem>
 
                 {
                   sharedStorages.map((ss)=> {
@@ -786,7 +792,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
                         onClick={async(option)=> {
                           option.keepOpen = false;
                           await changeDir(option.value);
-                        }}><FolderSharedIcon className={classes.sharedIcon}/><Box className={classes.storageName}>{gettext(ss)}</Box></PgMenuItem>);
+                        }}><FolderSharedIcon className='FileManager-sharedIcon'/><Box className='FileManager-storageName'>{gettext(ss)}</Box></PgMenuItem>);
                   })
                 }
 
@@ -810,16 +816,16 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
               onItemSelect={onItemSelect} />}
             <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={_.escape(errorMsg)} closable onClose={()=>setErrorMsg('')}  />
             {params.dialog_type == 'create_file' &&
-            <Box className={clsx(modalClasses.footer, classes.footerSaveAs)}>
+            <Box className={'FileManager-footer ' + 'FileManager-footerSaveAs'}>
               <span style={{whiteSpace: 'nowrap', marginRight: '4px'}}>Save As</span>
               <InputText inputRef={saveAsRef} autoFocus style={{height: '28px'}} value={saveAs} onChange={setSaveAs} />
             </Box>}
             {params.dialog_type != 'select_folder' &&
-            <Box className={clsx(modalClasses.footer, classes.footer1)}>
+            <Box className={'FileManager-footer ' + 'FileManager-footer1'}>
               <Box>{itemsText}</Box>
               <Box>
                 <span style={{marginRight: '8px'}}>File Format</span>
-                <InputSelectNonSearch value={fileType} className={classes.formatSelect}
+                <InputSelectNonSearch value={fileType} className='FileManager-formatSelect'
                   onChange={(e)=>{
                     let val = e.target.value;
                     fmUtilsObj.setFileType(val);
@@ -833,7 +839,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
             </Box>}
           </Box>
         </Box>
-        <Box className={modalClasses.footer}>
+        <Box className='FileManager-footer'>
           <PgButtonGroup style={{flexGrow: 1}}>
           </PgButtonGroup>
           <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
@@ -841,10 +847,10 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
             closeModal();
           }} >{gettext('Cancel')}</DefaultButton>
           {params.dialog_type != 'storage_dialog' &&
-            <PrimaryButton data-test="save" className={modalClasses.margin} startIcon={<CheckRoundedIcon />}
+            <PrimaryButton data-test="save" className='FileManager-margin' startIcon={<CheckRoundedIcon />}
               onClick={onOkClick} disabled={okBtnDisable || showUploader}>{okBtnText}</PrimaryButton>}
         </Box>
-      </Box>
+      </StyledBox>
     </ErrorBoundary>
   );
 }
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 acef14e79..b9fcb2e1b 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
 import FolderIcon from '@mui/icons-material/Folder';
 import DescriptionIcon from '@mui/icons-material/Description';
@@ -16,49 +16,47 @@ import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 
-
-const useStyles = makeStyles((theme)=>({
-  grid: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .GridView-grid': {
     display: 'flex',
     fontSize: '13px',
     flexWrap: 'wrap',
     overflow: 'hidden',
-  },
-  gridItem: {
-    width: '100px',
-    margin: '4px',
-    textAlign: 'center',
-    position: 'relative',
-    border: '1px solid transparent',
-    cursor: 'pointer',
-    '&[aria-selected=true]': {
-      backgroundColor: theme.palette.primary.light,
-      color: theme.otherVars.qtDatagridSelectFg,
-      borderColor: theme.palette.primary.main,
+    '& .GridView-gridItem': {
+      width: '100px',
+      margin: '4px',
+      textAlign: 'center',
+      position: 'relative',
+      border: '1px solid transparent',
+      cursor: 'pointer',
+      '&[aria-selected=true]': {
+        backgroundColor: theme.palette.primary.light,
+        color: theme.otherVars.qtDatagridSelectFg,
+        borderColor: theme.palette.primary.main,
+      },
+      '& .GridView-gridItemContent': {
+        padding: '4px',
+        '& .GridView-gridFilename': {
+          overflowWrap: 'break-word',
+        },
+        '& .GridView-gridItemEdit': {
+          border: `1px solid ${theme.otherVars.inputBorderColor}`,
+          backgroundColor: theme.palette.background.default,
+        },
+        '& .GridView-protected': {
+          height: '1.25rem',
+          width: '1.25rem',
+          position: 'absolute',
+          left: '52px',
+          color: theme.palette.error.main,
+          backgroundColor: 'inherit',
+        }
+      },
     },
   },
-  gridItemContent: {
-    padding: '4px',
-  },
-  gridFilename: {
-    overflowWrap: 'break-word',
-  },
-  gridItemEdit: {
-    border: `1px solid ${theme.otherVars.inputBorderColor}`,
-    backgroundColor: theme.palette.background.default,
-  },
-  protected: {
-    height: '1.25rem',
-    width: '1.25rem',
-    position: 'absolute',
-    left: '52px',
-    color: theme.palette.error.main,
-    backgroundColor: 'inherit',
-  }
 }));
 
 export function ItemView({idx, row, selected, onItemSelect, onItemEnter, onEditComplete}) {
-  const classes = useStyles();
   const editMode = Boolean(onEditComplete);
   const fileNameRef = useRef();
 
@@ -98,14 +96,14 @@ export function ItemView({idx, row, selected, onItemSelect, onItemEnter, onEditC
   }
 
   return (
-    <div tabIndex="-1" className={classes.gridItem} aria-selected={selected} onClick={()=>onItemSelect(idx)} onDoubleClick={()=>onItemEnter(row)} onKeyDown={handleItemKeyDown} role="gridcell">
-      <div className={classes.gridItemContent}>
+    <div tabIndex="-1" className='GridView-gridItem' aria-selected={selected} onClick={()=>onItemSelect(idx)} onDoubleClick={()=>onItemEnter(row)} onKeyDown={handleItemKeyDown} role="gridcell">
+      <div className='GridView-gridItemContent'>
         <div>
           {icon}
-          {Boolean(row.Protected) && <LockRoundedIcon className={classes.protected}/>}
+          {Boolean(row.Protected) && <LockRoundedIcon className='GridView-protected'/>}
         </div>
         <div tabIndex="-1" ref={fileNameRef} onKeyDown={handleEditKeyDown} onBlur={()=>onEditComplete?.(row)}
-          className={editMode ? classes.gridItemEdit : classes.gridFilename} suppressContentEditableWarning={true}
+          className={editMode ? 'GridView-gridItemEdit' : 'GridView-gridFilename'} suppressContentEditableWarning={true}
           contentEditable={editMode} data-test="filename-div" role={editMode ? 'textbox' : 'none'}>{row['Filename']}</div>
       </div>
     </div>
@@ -121,7 +119,7 @@ ItemView.propTypes = {
 };
 
 export default function GridView({items, operation, onItemSelect, onItemEnter}) {
-  const classes = useStyles();
+
   const [selectedIdx, setSelectedIdx] = useState(null);
   const gridRef = useRef();
 
@@ -138,15 +136,15 @@ export default function GridView({items, operation, onItemSelect, onItemEnter})
   }
 
   return (
-    <Box flexGrow={1} overflow="hidden auto" id="grid">
-      <div ref={gridRef} className={classes.grid}>
+    <StyledBox flexGrow={1} overflow="hidden auto" id="grid">
+      <div ref={gridRef} className='GridView-grid'>
         {items.map((item, i)=>(
           <ItemView key={item.Filename} idx={i} row={item} selected={selectedIdx==i} onItemSelect={setSelectedIdx}
             onItemEnter={onItemEnter} onEditComplete={operation.idx==i ? onEditComplete : null} />)
         )}
       </div>
       {items.length == 0 && <Box textAlign="center" p={1}>{gettext('No files/folders found')}</Box>}
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
index 998c56a6c..5bcdfe1d2 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
@@ -1,12 +1,4 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useRef, useEffect } from 'react';
 import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -16,8 +8,9 @@ import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 
-const useStyles = makeStyles((theme)=>({
-  grid: {
+
+const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme}) => ({
+  '&.Grid-grid': {
     fontSize: '13px',
     '& .rdg-header-row': {
       '& .rdg-cell': {
@@ -31,39 +24,39 @@ const useStyles = makeStyles((theme)=>({
         '&.rdg-editor-container': {
           padding: '0px',
         },
+      },
+      '& .Grid-input': {
+        appearance: 'none',
+        width: '100%',
+        height: '100%',
+        verticalAlign: 'top',
+        outline: 'none',
+        backgroundColor: theme.palette.background.default,
+        color: theme.palette.text.primary,
+        border: 0,
+        boxShadow: 'inset 0 0 0 1.5px '+theme.palette.primary.main,
+        padding: '0 2px',
+        '::selection': {
+          background: theme.palette.primary.light,
+        }
+      },
+      '& .Grid-protected': {
+        height: '0.75rem',
+        width: '0.75rem',
+        position: 'absolute',
+        left: '14px',
+        top: '5px',
+        color: theme.palette.error.main,
+        backgroundColor: 'inherit',
       }
     }
   },
-  input: {
-    appearance: 'none',
-    width: '100%',
-    height: '100%',
-    verticalAlign: 'top',
-    outline: 'none',
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    border: 0,
-    boxShadow: 'inset 0 0 0 1.5px '+theme.palette.primary.main,
-    padding: '0 2px',
-    '::selection': {
-      background: theme.palette.primary.light,
-    }
-  },
-  protected: {
-    height: '0.75rem',
-    width: '0.75rem',
-    position: 'absolute',
-    left: '14px',
-    top: '5px',
-    color: theme.palette.error.main,
-    backgroundColor: 'inherit',
-  }
 }));
 
 export const GridContextUtils = React.createContext();
 
 export function FileNameEditor({row, column, onRowChange, onClose}) {
-  const classes = useStyles();
+
   const value = row[column.key] ?? '';
   const [localVal, setLocalVal] = React.useState(value);
   const localValRef = useRef(localVal);
@@ -84,7 +77,7 @@ export function FileNameEditor({row, column, onRowChange, onClose}) {
   };
   return (
     <input
-      className={classes.input}
+      className='Grid-input'
       value={localVal}
       onChange={(e)=>{
         setLocalVal(e.target.value);
@@ -102,7 +95,7 @@ FileNameEditor.propTypes = {
   onClose: PropTypes.func,
 };
 function FileNameFormatter({row}) {
-  const classes = useStyles();
+
   let icon = <DescriptionIcon style={{fontSize: '1.2rem'}} />;
   if(row.file_type == 'dir') {
     icon = <FolderIcon style={{fontSize: '1.2rem'}} />;
@@ -111,7 +104,7 @@ function FileNameFormatter({row}) {
   }
   return <>
     {icon}
-    {Boolean(row.Protected) && <LockRoundedIcon className={classes.protected}/>}
+    {Boolean(row.Protected) && <LockRoundedIcon className='Grid-protected'/>}
     <span style={{marginLeft: '4px'}}>{row['Filename']}</span>
   </>;
 }
@@ -142,7 +135,7 @@ const columns = [
 
 
 export default function ListView({items, operation, ...props}) {
-  const classes = useStyles();
+
   const gridRef = useRef();
 
   useEffect(()=>{
@@ -157,10 +150,10 @@ export default function ListView({items, operation, ...props}) {
   }, [gridRef.current?.element]);
 
   return (
-    <PgReactDataGrid
+    <StyledPgReactDataGrid
       gridRef={gridRef}
       id="list"
-      className={classes.grid}
+      className='Grid-grid'
       hasSelectColumn={false}
       columns={columns}
       rows={items}
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 d66957203..5aa4fcc95 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
@@ -7,8 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useCallback, useReducer, useEffect, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import { Box, List, ListItem } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import { PgIconButton } from '../../../../../static/js/components/Buttons';
 import gettext from 'sources/gettext';
@@ -18,20 +18,19 @@ import convert from 'convert-units';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1,
-    backgroundColor: theme.palette.background.default,
-    display: 'flex',
-    flexDirection: 'column',
-    padding: '4px',
-  },
-  uploadArea: {
+
+const StyledBox = styled(Box)(({theme}) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  backgroundColor: theme.palette.background.default,
+  display: 'flex',
+  flexDirection: 'column',
+  padding: '4px',
+  '& .Uploader-uploadArea': {
     border: `1px dashed ${theme.palette.grey[600]}`,
     display: 'flex',
     alignItems: 'center',
@@ -42,19 +41,12 @@ const useStyles = makeStyles((theme)=>({
     textAlign: 'center',
     padding: '4px',
   },
-  uploadFilesRoot: {
+  '& .Uploader-uploadFilesRoot': {
     width: '350px',
     border: `1px dashed ${theme.palette.grey[600]}`,
     borderLeft: 'none',
     overflowX: 'hidden',
     overflowY: 'auto'
-  },
-  uploadProgress: {
-    position: 'unset',
-    padding: 0,
-  },
-  uploadPending: {
-
   }
 }));
 
@@ -131,7 +123,7 @@ UploadedFile.propTypes = {
 
 
 export default function Uploader({fmUtilsObj, onClose}) {
-  const classes = useStyles();
+
   const [files, dispatchFileAction] = useReducer(filesReducer, []);
   const onDrop = useCallback(acceptedFiles => {
     dispatchFileAction({
@@ -173,18 +165,18 @@ export default function Uploader({fmUtilsObj, onClose}) {
   }, [files.length]);
 
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <Box 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 className={classes.uploadArea} {...getRootProps()}>
+        <Box className='Uploader-uploadArea' {...getRootProps()}>
           <input {...getInputProps()} />
           <Box>{gettext('Drop files here, or click to select files.')}</Box>
           <Box>{gettext('The file size limit (per file) is %s MB.', fmUtilsObj.config?.upload?.fileSizeLimit)}</Box>
         </Box>
         {files.length > 0 &&
-          <Box className={classes.uploadFilesRoot}>
+          <Box className='Uploader-uploadFilesRoot'>
             <List>
               {files.map((upfile)=>(
                 <UploadedFile key={upfile.id} upfile={upfile} removeFile={async ()=>{
@@ -197,7 +189,7 @@ export default function Uploader({fmUtilsObj, onClose}) {
             </List>
           </Box>}
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 Uploader.propTypes = {
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index 8eddec1bb..08603fa3b 100644
--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -7,13 +7,12 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
 import { generateCollectionURL } from '../../browser/static/js/node_ajax';
 import gettext from 'sources/gettext';
 import PgTable from 'sources/components/PgTable';
-import Theme from 'sources/Theme';
 import PropTypes from 'prop-types';
 import { PgButtonGroup, PgIconButton } from '../../static/js/components/Buttons';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -25,46 +24,16 @@ import { evalFunc } from '../../static/js/utils';
 import { usePgAdmin } from '../../static/js/BrowserComponent';
 import { getSwitchCell } from '../../static/js/components/PgReactTableStyled';
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const StyledBox = styled(Box)(({theme}) => ({
+  height: '100%',
+  '&.CollectionNodeProperties-emptyPanel': {
     minHeight: '100%',
     minWidth: '100%',
     background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
     padding: '8px',
     display: 'flex',
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  searchPadding: {
-    flex: 2.5
-  },
-  searchInput: {
-    flex: 1,
-    margin: '4 0 4 0',
-    borderLeft: 'none',
-    paddingLeft: 5
-  },
-  propertiesPanel: {
-    height: '100%'
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '8px',
-    overflow: 'hidden !important',
-    overflowX: 'auto !important'
-  },
+  }
 }));
 
 export default function CollectionNodeProperties({
@@ -76,9 +45,7 @@ export default function CollectionNodeProperties({
   isStale,
   setIsStale
 }) {
-  const classes = useStyles();
   const pgAdmin = usePgAdmin();
-
   const [data, setData] = React.useState([]);
   const [infoMsg, setInfoMsg] = React.useState('Please select an object in the tree view.');
   const [selectedObject, setSelectedObject] = React.useState({});
@@ -193,7 +160,6 @@ export default function CollectionNodeProperties({
       }
 
       setLoaderText(gettext('Loading...'));
-
       if (!_.isUndefined(nodeObj.getSchema)) {
         schemaRef.current = nodeObj.getSchema?.(treeNodeInfo, nodeData);
         schemaRef.current?.fields.forEach((field) => {
@@ -232,7 +198,6 @@ export default function CollectionNodeProperties({
         });
       }
 
-
       api({
         url: url,
         type: 'GET',
@@ -307,15 +272,14 @@ export default function CollectionNodeProperties({
   };
 
   return (
-    <Theme className='obj_properties'>
+    <>
       <Loader message={loaderText}/>
-      <Box className={classes.propertiesPanel}>
+      <StyledBox>
         {data.length > 0 ?
           (
             <PgTable
               hasSelectRow={!('catalog' in treeNodeInfo) && (nodeData.label !== 'Catalogs') && _.isUndefined(node?.canSelect)}
               CustomHeader={CustomHeader}
-              className={classes.autoResizer}
               columns={pgTableColumns}
               data={data}
               type={'panel'}
@@ -326,13 +290,13 @@ export default function CollectionNodeProperties({
           )
           :
           (
-            <div className={classes.emptyPanel}>
+            <div className='CollectionNodeProperties-emptyPanel'>
               <EmptyPanelMessage text={gettext(infoMsg)}/>
             </div>
           )
         }
-      </Box>
-    </Theme>
+      </StyledBox>
+    </>
   );
 }
 
diff --git a/web/pgadmin/misc/properties/Properties.jsx b/web/pgadmin/misc/properties/Properties.jsx
index aa8fdc53c..25cf7a7be 100644
--- a/web/pgadmin/misc/properties/Properties.jsx
+++ b/web/pgadmin/misc/properties/Properties.jsx
@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import CollectionNodeProperties from './CollectionNodeProperties';
 import ErrorBoundary from '../../static/js/helpers/ErrorBoundary';
 import withStandardTabInfo from '../../static/js/helpers/withStandardTabInfo';
@@ -16,23 +17,19 @@ import ObjectNodeProperties from './ObjectNodeProperties';
 import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { usePgAdmin } from '../../static/js/BrowserComponent';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    height: '100%',
-    background: theme.otherVars.emptySpaceBg,
-    display: 'flex',
-    flexDirection: 'column'
-  },
+const StyledBox = styled(Box)(({theme}) => ({
+  height: '100%',
+  background: theme.otherVars.emptySpaceBg,
+  display: 'flex',
+  flexDirection: 'column'
 }));
 
 function Properties(props) {
   const isCollection = props.nodeData?._type?.startsWith('coll-') || props.nodeData?._type == 'dbms_job_scheduler';
-  const classes = useStyles();
   const pgAdmin = usePgAdmin();
   let noPropertyMsg = '';
 
@@ -44,27 +41,27 @@ function Properties(props) {
 
   if(noPropertyMsg) {
     return (
-      <Box className={classes.root}>
+      <StyledBox>
         <Box margin={'4px auto'}>
           <EmptyPanelMessage text={noPropertyMsg} />
         </Box>
-      </Box>
+      </StyledBox>
     );
   }
 
   if(isCollection) {
     return (
-      <Box className={classes.root}>
+      <StyledBox>
         <ErrorBoundary>
           <CollectionNodeProperties
             {...props}
           />
         </ErrorBoundary>
-      </Box>
+      </StyledBox>
     );
   } else {
     return (
-      <Box className={classes.root}>
+      <StyledBox>
         <ErrorBoundary>
           <ObjectNodeProperties
             {...props}
@@ -77,7 +74,7 @@ function Properties(props) {
             }}
           />
         </ErrorBoundary>
-      </Box>
+      </StyledBox>
     );
   }
 }
diff --git a/web/pgadmin/misc/sql/static/js/SQL.jsx b/web/pgadmin/misc/sql/static/js/SQL.jsx
index e04bd5061..0448a41f4 100644
--- a/web/pgadmin/misc/sql/static/js/SQL.jsx
+++ b/web/pgadmin/misc/sql/static/js/SQL.jsx
@@ -8,29 +8,29 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect } from 'react';
+import { styled } from '@mui/material/styles';
 import { generateNodeUrl } from '../../../../browser/static/js/node_ajax';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@mui/styles';
 import CodeMirror from '../../../../static/js/components/ReactCodeMirror';
 import Loader from 'sources/components/Loader';
 import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabInfo';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import { usePgAdmin } from '../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme) => ({
-  textArea: {
+
+const Root = styled('div')(({theme}) => ({
+  '& .SQL-textArea': {
     height: '100% !important',
     width: '100% !important',
     background: theme.palette.grey[400],
     minHeight: '100%',
     minWidth: '100%',
-  },
+  }
 }));
 
 function SQL({nodeData, node, treeNodeInfo, isActive, isStale, setIsStale}) {
-  const classes = useStyles();
   const did = ((!_.isUndefined(treeNodeInfo)) && (!_.isUndefined(treeNodeInfo['database']))) ? treeNodeInfo['database']._id: 0;
   const dbConnected = !_.isUndefined(treeNodeInfo) && !_.isUndefined(treeNodeInfo['database']) ? treeNodeInfo.database.connected: false;
   const [nodeSQL, setNodeSQL] = React.useState('');
@@ -92,15 +92,15 @@ function SQL({nodeData, node, treeNodeInfo, isActive, isStale, setIsStale}) {
   }, [isStale, isActive, nodeData?.id]);
 
   return (
-    <>
+    (<Root style={{height: '100%'}} >
       <Loader message={loaderText}/>
       <CodeMirror
-        className={classes.textArea}
+        className='SQL-textArea'
         value={nodeSQL}
         readonly={true}
         showCopyBtn
       />
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
index 4d0f4c391..998aea49b 100644
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -8,12 +8,12 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import React, { useEffect } from 'react';
 import PgTable from 'sources/components/PgTable';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@mui/styles';
 import { getURL } from '../../../static/utils/utils';
 import Loader from 'sources/components/Loader';
 import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
@@ -22,36 +22,16 @@ import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabIn
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import { usePgAdmin } from '../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme) => ({
-  emptyPanel: {
+const Root = styled('div')(({theme}) => ({
+  height : '100%',
+  '& .Statistics-emptyPanel': {
     minHeight: '100%',
     minWidth: '100%',
     background: theme.otherVars.emptySpaceBg,
     overflow: 'auto',
     padding: '8px',
     display: 'flex',
-  },
-  panelIcon: {
-    width: '80%',
-    margin: '0 auto',
-    marginTop: '25px !important',
-    position: 'relative',
-    textAlign: 'center',
-  },
-  panelMessage: {
-    marginLeft: '0.5rem',
-    fontSize: '0.875rem',
-  },
-  autoResizer: {
-    height: '100% !important',
-    width: '100% !important',
-    background: theme.palette.grey[400],
-    padding: '7.5px',
-    overflowX: 'auto !important',
-    overflowY: 'hidden !important',
-    minHeight: '100%',
-    minWidth: '100%',
-  },
+  }
 }));
 
 function getColumn(data, singleLineStatistics, prettifyFields=[]) {
@@ -146,9 +126,7 @@ function createSingleLineStatistics(data, prettifyFields) {
 }
 
 function Statistics({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale, setIsStale }) {
-  const classes = useStyles();
   const [tableData, setTableData] = React.useState([]);
-
   const [msg, setMsg] = React.useState('');
   const [loaderText, setLoaderText] = React.useState('');
   const [columns, setColumns] = React.useState([
@@ -232,22 +210,21 @@ function Statistics({ nodeData, nodeItem, node, treeNodeInfo, isActive, isStale,
   }, [isStale, isActive, nodeData?.id]);
 
   return (
-    <>
+    <Root>
       {tableData.length > 0 ? (
         <PgTable
-          className={classes.autoResizer}
           columns={columns}
           data={tableData}
           msg={msg}
           type={'panel'}
         ></PgTable>
       ) : (
-        <div className={classes.emptyPanel}>
+        <div className='Statistics-emptyPanel'>
           <Loader message={loaderText} />
           <EmptyPanelMessage text={gettext(msg)}/>
         </div>
       )}
-    </>
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
index 78fd15938..c58d96232 100644
--- a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
+++ b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -8,25 +8,81 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import url_for from 'sources/url_for';
 import React, { useEffect, useMemo } from 'react';
 import { FileType } from 'react-aspen';
 import { Box } from '@mui/material';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
 import SchemaView from '../../../../static/js/SchemaView';
 import getApiInstance from '../../../../static/js/api_instance';
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
 import HelpIcon from '@mui/icons-material/HelpRounded';
 import SaveSharpIcon from '@mui/icons-material/SaveSharp';
-import clsx from 'clsx';
 import pgAdmin from 'sources/pgadmin';
 import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/js/components/Buttons';
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import { getBinaryPathSchema } from '../../../../browser/server_groups/servers/static/js/binary_path.ui';
 import usePreferences from '../store';
 
+
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .PreferencesComponent-root': {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    height: '100%',
+    backgroundColor: theme.palette.background.default,
+    overflow: 'hidden',
+    '&$disabled': {
+      color: '#ddd',
+    },
+    '& .PreferencesComponent-body': {
+      borderColor: theme.otherVars.borderColor,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
+      minHeight: 0,
+      overflow: 'hidden',
+      '& .PreferencesComponent-treeContainer': {
+        flexBasis: '25%',
+        alignItems: 'flex-start',
+        paddingLeft: '5px',
+        minHeight: 0,
+        flexGrow: 1,
+        '& .PreferencesComponent-tree': {
+          height: '100%',
+          flexGrow: 1
+        },
+      },
+      '& .PreferencesComponent-preferencesContainer': {
+        flexBasis: '75%',
+        padding: '5px',
+        borderColor: theme.otherVars.borderColor + '!important',
+        borderLeft: '1px solid',
+        position: 'relative',
+        height: '100%',
+        paddingTop: '5px',
+        overflow: 'auto',
+      },
+    },
+    '& .PreferencesComponent-footer': {
+      borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
+      padding: '0.5rem',
+      display: 'flex',
+      width: '100%',
+      background: theme.otherVars.headerBg,
+      '& .PreferencesComponent-actionBtn': {
+        alignItems: 'flex-start',
+      },
+      '& .PreferencesComponent-buttonMargin': {
+        marginLeft: '0.5em'
+      },
+    },
+  },
+}));
+
 class PreferencesSchema extends BaseUISchema {
   constructor(initValues = {}, schemaFields = []) {
     super({
@@ -49,81 +105,6 @@ class PreferencesSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme) =>
-  ({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      height: '100%',
-      backgroundColor: theme.palette.background.default,
-      overflow: 'hidden',
-      '&$disabled': {
-        color: '#ddd',
-      }
-    },
-    body: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      minHeight: 0,
-    },
-    preferences: {
-      borderColor: theme.otherVars.borderColor,
-      display: 'flex',
-      flexGrow: 1,
-      height: '100%',
-      minHeight: 0,
-      overflow: 'hidden'
-
-    },
-    treeContainer: {
-      flexBasis: '25%',
-      alignItems: 'flex-start',
-      paddingLeft: '5px',
-      minHeight: 0,
-      flexGrow: 1
-    },
-    tree: {
-      height: '100%',
-      flexGrow: 1
-    },
-    preferencesContainer: {
-      flexBasis: '75%',
-      padding: '5px',
-      borderColor: theme.otherVars.borderColor + '!important',
-      borderLeft: '1px solid',
-      position: 'relative',
-      height: '100%',
-      paddingTop: '5px',
-      overflow: 'auto'
-    },
-    actionBtn: {
-      alignItems: 'flex-start',
-    },
-    buttonMargin: {
-      marginLeft: '0.5em'
-    },
-    footer: {
-      borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
-      padding: '0.5rem',
-      display: 'flex',
-      width: '100%',
-      background: theme.otherVars.headerBg,
-    },
-    customTreeClass: {
-      '& .react-checkbox-tree': {
-        height: '100% !important',
-        border: 'none !important',
-      },
-    },
-    preferencesTree: {
-      height: 'calc(100% - 50px)',
-      minHeight: 0
-    }
-  }),
-);
-
 
 function RightPanel({ schema, ...props }) {
   let initData = () => new Promise((resolve, reject) => {
@@ -157,7 +138,7 @@ RightPanel.propTypes = {
 
 
 export default function PreferencesComponent({ ...props }) {
-  const classes = useStyles();
+
   const [disableSave, setDisableSave] = React.useState(true);
   const prefSchema = React.useRef(new PreferencesSchema({}, []));
   const prefChangedData = React.useRef({});
@@ -594,18 +575,17 @@ export default function PreferencesComponent({ ...props }) {
   };
 
   return (
-    <Box height={'100%'}>
-      <Box className={classes.root}>
-        <Box className={clsx(classes.preferences)}>
-          <Box className={clsx(classes.treeContainer)} >
-
-            <Box className={clsx(classes.tree)} id={'treeContainer'} tabIndex={0}>
+    <StyledBox height={'100%'}>
+      <Box className='PreferencesComponent-root'>
+        <Box className='PreferencesComponent-body'>
+          <Box className='PreferencesComponent-treeContainer' >
+            <Box className='PreferencesComponent-tree' id={'treeContainer'} tabIndex={0}>
               {
                 useMemo(() => (prefTreeData && props.renderTree(prefTreeData)), [prefTreeData])
               }
             </Box>
           </Box>
-          <Box className={clsx(classes.preferencesContainer)}>
+          <Box className='PreferencesComponent-preferencesContainer'>
             {
               prefSchema.current && loadTree > 0 &&
                 <RightPanel schema={prefSchema.current} initValues={initValues} onDataChange={(changedData) => {
@@ -615,21 +595,21 @@ export default function PreferencesComponent({ ...props }) {
             }
           </Box>
         </Box>
-        <Box className={classes.footer}>
+        <Box className='PreferencesComponent-footer'>
           <Box>
             <PgIconButton data-test="dialog-help" onClick={onDialogHelp} icon={<HelpIcon />} title={gettext('Help for this dialog.')} />
           </Box>
-          <Box className={classes.actionBtn} marginLeft="auto">
-            <DefaultButton className={classes.buttonMargin} onClick={() => { props.closeModal();}} startIcon={<CloseSharpIcon onClick={() => { props.closeModal();}} />}>
+          <Box className='PreferencesComponent-actionBtn' marginLeft="auto">
+            <DefaultButton className='PreferencesComponent-buttonMargin' onClick={() => { props.closeModal();}} startIcon={<CloseSharpIcon onClick={() => { props.closeModal();}} />}>
               {gettext('Cancel')}
             </DefaultButton>
-            <PrimaryButton className={classes.buttonMargin} startIcon={<SaveSharpIcon />} disabled={disableSave} onClick={() => { savePreferences(prefChangedData, initValues); }}>
+            <PrimaryButton className='PreferencesComponent-buttonMargin' startIcon={<SaveSharpIcon />} disabled={disableSave} onClick={() => { savePreferences(prefChangedData, initValues); }}>
               {gettext('Save')}
             </PrimaryButton>
           </Box>
         </Box>
       </Box >
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx
index c010134ce..2f1745e4c 100644
--- a/web/pgadmin/static/js/AppMenuBar.jsx
+++ b/web/pgadmin/static/js/AppMenuBar.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useState, useEffect } from 'react';
 import { PrimaryButton } from './components/Buttons';
 import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './components/Menu';
@@ -15,51 +15,50 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
 import { usePgAdmin } from '../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    height: '30px',
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    padding: '0 0.5rem',
-    display: 'flex',
-    alignItems: 'center',
-  },
-  logo: {
+
+const StyledBox = styled(Box)(({theme}) => ({
+  height: '30px',
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  padding: '0 0.5rem',
+  display: 'flex',
+  alignItems: 'center',
+  '& .AppMenuBar-logo': {
     width: '96px',
     height: '100%',
     /*
-     * Using the SVG postgresql logo, modified to set the background color as #FFF
-     * https://wiki.postgresql.org/images/9/90/PostgreSQL_logo.1color_blue.svg
-     * background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42 42' style='enable-background:new 0 0 42 42;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id='orginal'%3E%3C/g%3E%3Cg id='Layer_x0020_3'%3E%3Cpath class='st0' d='M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30'/%3E%3Cpath class='st1' d='M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z'/%3E%3Cpath class='st2' d='M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7'/%3E%3Cpath class='st2' d='M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7'/%3E%3Cpath class='st2' d='M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18'/%3E%3Cpath class='st3' d='M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6'/%3E%3Cpath class='st2' d='M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z'/%3E%3Cpath class='st2' d='M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7'/%3E%3Cpath class='st4' d='M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z'/%3E%3Cpath class='st5' d='M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z'/%3E%3Cpath class='st2' d='M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2'/%3E%3Cpath class='st6' d='M2.7,6.6'/%3E%3C/g%3E%3C/svg%3E%0A")  0 0 no-repeat;
-     */
+       * Using the SVG postgresql logo, modified to set the background color as #FFF
+       * https://wiki.postgresql.org/images/9/90/PostgreSQL_logo.1color_blue.svg
+       * background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42 42' style='enable-background:new 0 0 42 42;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id='orginal'%3E%3C/g%3E%3Cg id='Layer_x0020_3'%3E%3Cpath class='st0' d='M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30'/%3E%3Cpath class='st1' d='M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z'/%3E%3Cpath class='st2' d='M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7'/%3E%3Cpath class='st2' d='M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7'/%3E%3Cpath class='st2' d='M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18'/%3E%3Cpath class='st3' d='M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6'/%3E%3Cpath class='st2' d='M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z'/%3E%3Cpath class='st2' d='M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7'/%3E%3Cpath class='st4' d='M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z'/%3E%3Cpath class='st5' d='M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z'/%3E%3Cpath class='st2' d='M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2'/%3E%3Cpath class='st6' d='M2.7,6.6'/%3E%3C/g%3E%3C/svg%3E%0A")  0 0 no-repeat;
+       */
     background: 'url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDUgNTAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMzI2ODkzO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGdBZG1pbjwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTguOTQsNDEuNGEyLjQ4LDIuNDgsMCwwLDEtMi4yNy0zLjQ5TDY0LDIxLjI5VjZhNiw2LDAsMCwwLTYtNkg2QTYsNiwwLDAsMCwwLDZWNDRhNiw2LDAsMCwwLDYsNkg1OGE2LDYsMCwwLDAsNi02VjQxLjRaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjkuMjUsMzAuMTdhMTMuMTMsMTMuMTMsMCwwLDEtMS44Mi02LjkzLDEzLDEzLDAsMCwxLDEuODItNi44OCwxMi41LDEyLjUsMCwwLDEsMS40OC0xLjk1LDEwLjQ0LDEwLjQ0LDAsMCwwLTMuMjUtMi44OSwxMS4xNiwxMS4xNiwwLDAsMC01LjY1LTEuNDVxLTQuNDgsMC02LjcyLDIuNjRWMTAuNDRINy41MVY0MC4zNmExLDEsMCwwLDAsMSwxaDZhMSwxLDAsMCwwLDEtMVYzMS4xOWE4LjQ3LDguNDcsMCwwLDAsNi4zNCwyLjQsMTEuMjYsMTEuMjYsMCwwLDAsNS42NS0xLjQ1LDEwLjUzLDEwLjUzLDAsMCwwLDIuMDYtMS41NkMyOS40NCwzMC40NCwyOS4zNCwzMC4zMSwyOS4yNSwzMC4xN1pNMjMuNiwyNS44YTQuNTIsNC41MiwwLDAsMS0zLjQ1LDEuNDQsNC40OCw0LjQ4LDAsMCwxLTMuNDQtMS40NCw1LjYsNS42LDAsMCwxLTEuMzUtNCw1LjU5LDUuNTksMCwwLDEsMS4zNS00LDQuNDYsNC40NiwwLDAsMSwzLjQ0LTEuNDUsNC40OSw0LjQ5LDAsMCwxLDMuNDUsMS40NSw1LjYzLDUuNjMsMCwwLDEsMS4zNCw0QTUuNjQsNS42NCwwLDAsMSwyMy42LDI1LjhaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTYuNDksMTIuNjNWMzEuMjRxMCw2LjM1LTMuNDQsOS41MXQtOS45MiwzLjE3YTI1LjQyLDI1LjQyLDAsMCwxLTYuMy0uNzUsMTUsMTUsMCwwLDEtNS0yLjIzbDIuODktNS41OWExMC4xNywxMC4xNywwLDAsMCwzLjUxLDEuNzksMTQuMzcsMTQuMzcsMCwwLDAsNC4xOC42NUE2LjUzLDYuNTMsMCwwLDAsNDcsMzYuNGE1LjM3LDUuMzcsMCwwLDAsMS40Ny00LjExdi0uNzZjLTEuNTQsMS44LTMuNzksMi42OS02Ljc2LDIuNjlhMTEuNywxMS43LDAsMCwxLTUuNTktMS4zNkExMC4zNywxMC4zNywwLDAsMSwzMi4wOSwyOWExMC44OSwxMC44OSwwLDAsMS0xLjUxLTUuNzcsMTAuODYsMTAuODYsMCwwLDEsMS41MS01Ljc0LDEwLjQyLDEwLjQyLDAsMCwxLDQuMDctMy44NiwxMS43MSwxMS43MSwwLDAsMSw1LjU5LTEuMzdjMy4yNSwwLDUuNjMsMS4wNiw3LjE0LDMuMTVWMTIuNjNabS05LjMsMTMuOTVhNC40LDQuNCwwLDAsMCwxLjQtMy4zNiw0LjM0LDQuMzQsMCwwLDAtMS4zOC0zLjM0LDUuNjUsNS42NSwwLDAsMC03LjE2LDAsNC4zLDQuMywwLDAsMC0xLjQxLDMuMzQsNC4zNSw0LjM1LDAsMCwwLDEuNDMsMy4zNiw1LjA4LDUuMDgsMCwwLDAsMy41NywxLjNBNSw1LDAsMCwwLDQ3LjE5LDI2LjU4WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgzLjQzLDMyLjg5SDcxbC0yLDUuMDlhMSwxLDAsMCwxLS45My42Mkg2MS43M2ExLDEsMCwwLDEtLjkxLTEuNEw3Mi45MSw5LjhhMSwxLDAsMCwxLC45Mi0uNmg2Ljg5YTEsMSwwLDAsMSwuOTEuNkw5My43NywzNy4yYTEsMSwwLDAsMS0uOTIsMS40SDg2LjQxYTEsMSwwLDAsMS0uOTMtLjYyWk04MSwyNi43NmwtMy43OC05LjQxLTMuNzgsOS40MVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjAuNDQsOC40NFYzNy42YTEsMSwwLDAsMS0xLDFoLTUuNmExLDEsMCwwLDEtMS0xVjM2LjMzUTExMC42MiwzOSwxMDYuMTYsMzlhMTEuMjksMTEuMjksMCwwLDEtNS42Ny0xLjQ1LDEwLjU0LDEwLjU0LDAsMCwxLTQtNC4xNEExMi42MiwxMi42MiwwLDAsMSw5NSwyNy4xOCwxMi41MywxMi41MywwLDAsMSw5Ni40NCwyMWExMC4zNSwxMC4zNSwwLDAsMSw0LTQuMDksMTEuNDgsMTEuNDgsMCwwLDEsNS42Ny0xLjQzLDguMjQsOC4yNCwwLDAsMSw2LjMsMi4zNVY4LjQ0YTEsMSwwLDAsMSwxLTFoNkExLDEsMCwwLDEsMTIwLjQ0LDguNDRabS05LjE5LDIyLjc1YTUuNzEsNS43MSwwLDAsMCwxLjM0LTQsNS42LDUuNiwwLDAsMC0xLjMyLTMuOTUsNC40Nyw0LjQ3LDAsMCwwLTMuNDMtMS40Myw0LjUzLDQuNTMsMCwwLDAtMy40NCwxLjQzLDUuNTEsNS41MSwwLDAsMC0xLjM0LDMuOTUsNS42Nyw1LjY3LDAsMCwwLDEuMzQsNCw0Ljc3LDQuNzcsMCwwLDAsNi44NSwwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2MSwxOGMxLjY2LDEuNjgsMi41LDQuMjEsMi41LDcuNnYxMmExLDEsMCwwLDEtMSwxaC02YTEsMSwwLDAsMS0xLTFWMjYuODhhNS42Nyw1LjY3LDAsMCwwLS45LTMuNTMsMy4wOSwzLjA5LDAsMCwwLTIuNTUtMS4xMywzLjYyLDMuNjIsMCwwLDAtMi44OSwxLjI2LDUuNzEsNS43MSwwLDAsMC0xLjEsMy44MlYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYyNi44OGMwLTMuMTEtMS4xNC00LjY2LTMuNDQtNC42NmEzLjcsMy43LDAsMCwwLTIuOTQsMS4yNiw1LjcxLDUuNzEsMCwwLDAtMS4wOSwzLjgyVjM3LjZhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjE2Ljg0YTEsMSwwLDAsMSwxLTFoNS42YTEsMSwwLDAsMSwxLDF2MS4zOWE4LDgsMCwwLDEsMy0yLjA4LDEwLjIzLDEwLjIzLDAsMCwxLDMuOC0uNjksMTAsMTAsMCwwLDEsNC4yOS44OEE3LjI4LDcuMjgsMCwwLDEsMTQ2LjQyLDE5YTguODUsOC44NSwwLDAsMSwzLjQxLTIuNjUsMTAuOTMsMTAuOTMsMCwwLDEsNC40OS0uOTJBOSw5LDAsMCwxLDE2MSwxOFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNjguMTIsMTIuMWEzLjkxLDMuOTEsMCwwLDEtMS4zNC0yLjc5QTQuMTYsNC4xNiwwLDAsMSwxNjgsNi4xOWE1LDUsMCwwLDEsMy42Ny0xLjM2QTUuMjUsNS4yNSwwLDAsMSwxNzUuMTgsNmEzLjc1LDMuNzUsMCwwLDEsMS4zNCwzLDQuMSw0LjEsMCwwLDEtMS4zNCwzLjEzLDUuNjgsNS42OCwwLDAsMS03LjA2LDBabS41NCwzLjc0aDZhMSwxLDAsMCwxLDEsMVYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NEExLDEsMCwwLDEsMTY4LjY2LDE1Ljg0WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwMS41NSwxOHEyLjU5LDIuNTIsMi41OSw3LjZ2MTJhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjI2Ljg4cTAtNC42Ni0zLjc0LTQuNjZhNC4zLDQuMywwLDAsMC0zLjMsMS4zNCw1LjgzLDUuODMsMCwwLDAtMS4yNCw0djEwYTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NGExLDEsMCwwLDEsMS0xaDUuNjFhMSwxLDAsMCwxLDEsMXYxLjQ3YTkuMDUsOS4wNSwwLDAsMSwzLjE5LTIuMTIsMTAuNzgsMTAuNzgsMCwwLDEsNC0uNzNBOS4zNCw5LjM0LDAsMCwxLDIwMS41NSwxOFoiLz48L3N2Zz4=)  0 0 no-repeat',
     backgroundPositionY: 'center',
   },
-  menus: {
+  '& .AppMenuBar-menus': {
     display: 'flex',
     alignItems: 'center',
     gap: '2px',
     marginLeft: '16px',
-
+  
     '& .MuiButton-containedPrimary': {
       padding: '1px 8px',
     }
   },
-  userMenu: {
+  '& .AppMenuBar-userMenu': {
     marginLeft: 'auto',
     '& .MuiButton-containedPrimary': {
       fontSize: '0.825rem',
+    },
+    '& .AppMenuBar-gravatar': {
+      marginRight: '4px',
     }
   },
-  gravatar: {
-    marginRight: '4px',
-  }
 }));
 
 
 
 export default function AppMenuBar() {
-  const classes = useStyles();
+
   const [,setRefresh] = useState(false);
   const pgAdmin = usePgAdmin();
 
@@ -97,10 +96,10 @@ export default function AppMenuBar() {
 
   const userMenuInfo = pgAdmin.Browser.utils.userMenuInfo;
 
-  return(
-    <Box className={classes.root} data-test="app-menu-bar">
-      <div className={classes.logo} />
-      <div className={classes.menus}>
+  return (
+    <StyledBox data-test="app-menu-bar">
+      <div className='AppMenuBar-logo' />
+      <div className='AppMenuBar-menus'>
         {pgAdmin.Browser.MainMenus?.map((menu)=>{
           return (
             <PgMenu
@@ -124,11 +123,11 @@ export default function AppMenuBar() {
         })}
       </div>
       {userMenuInfo &&
-        <div className={classes.userMenu}>
+        <div className='AppMenuBar-userMenu'>
           <PgMenu
             menuButton={
               <PrimaryButton data-test="loggedin-username">
-                <div className={classes.gravatar}>
+                <div className='AppMenuBar-gravatar'>
                   {userMenuInfo.gravatar &&
                   <img src={userMenuInfo.gravatar} width = "18" height = "18"
                     alt ={`Gravatar for ${ userMenuInfo.username }`} />}
@@ -146,6 +145,6 @@ export default function AppMenuBar() {
             })}
           </PgMenu>
         </div>}
-    </Box>
+    </StyledBox>
   );
 }
diff --git a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
index 889a2b578..91a2438c0 100644
--- a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
@@ -1,13 +1,4 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
@@ -15,6 +6,13 @@ import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 import { isEmptyString } from 'sources/validators';
 
+
+const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+  '& .ChangeOwnershipContent-root': {
+    ...theme.mixins.tabPanel,
+  }
+}));
+
 class ChangeOwnershipSchema extends BaseUISchema {
   constructor(deletedUser, adminUserList, noOfSharedServers) {
     super({
@@ -50,17 +48,11 @@ class ChangeOwnershipSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-  },
-}));
-
 export default function ChangeOwnershipContent({onSave, onClose, deletedUser, userList, noOfSharedServers}) {
-  const classes = useStyles();
+
   const objChangeOwnership = new ChangeOwnershipSchema(deletedUser, userList, noOfSharedServers);
 
-  return<SchemaView
+  return <StyledSchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     schema={objChangeOwnership}
@@ -74,7 +66,7 @@ export default function ChangeOwnershipContent({onSave, onClose, deletedUser, us
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName={classes.root}
+    formClassName='ChangeOwnershipContent-root'
   />;
 }
 ChangeOwnershipContent.propTypes = {
diff --git a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
index f56e527b5..d7979449a 100644
--- a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
@@ -1,19 +1,16 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 
+const StyledSchemaView = styled(SchemaView )(({theme}) => ({
+  '& .ChangePasswordContent-root': {
+    ...theme.mixins.tabPanel,
+  }
+}));
+
 class ChangePasswordSchema extends BaseUISchema {
   constructor(user, isPgpassFileUsed, hasCsrfToken=false, showUser=true) {
     super({
@@ -73,17 +70,9 @@ class ChangePasswordSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-  },
-}));
-
 export default function ChangePasswordContent({getInitData=() => { /*This is intentional (SonarQube)*/ },
   onSave, onClose, hasCsrfToken=false, showUser=true}) {
-  const classes = useStyles();
-
-  return<SchemaView
+  return <StyledSchemaView
     formType={'dialog'}
     getInitData={getInitData}
     schema={new ChangePasswordSchema('', false, hasCsrfToken, showUser)}
@@ -97,7 +86,7 @@ export default function ChangePasswordContent({getInitData=() => { /*This is int
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName={classes.root}
+    formClassName='ChangePasswordContent-root'
   />;
 }
 ChangePasswordContent.propTypes = {
diff --git a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
index 2cd2a926d..9fa0d0d02 100644
--- a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModalStyles } from '../helpers/ModalProvider';
+import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../components/Buttons';
@@ -10,24 +10,23 @@ import HTMLReactParser from 'html-react-parser';
 import PropTypes from 'prop-types';
 
 export default function ConfirmSaveContent({closeModal, text, onDontSave, onSave}) {
-  const classes = useModalStyles();
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <ModalContent>
       <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <DefaultButton data-test="dont-save" className={classes.margin} startIcon={<DeleteRoundedIcon />} onClick={()=>{
+        <DefaultButton data-test="dont-save"  startIcon={<DeleteRoundedIcon />} onClick={()=>{
           onDontSave?.();
           closeModal();
         }} >{gettext('Don\'t save')}</DefaultButton>
-        <PrimaryButton data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+        <PrimaryButton data-test="save" startIcon={<CheckRoundedIcon />} onClick={()=>{
           onSave?.();
           closeModal();
         }} autoFocus={true} >{gettext('Save')}</PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
index 18439c1e4..37de80c04 100644
--- a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
@@ -14,11 +14,11 @@ import { DefaultButton, PrimaryButton } from '../components/Buttons';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import PropTypes from 'prop-types';
-import { useModalStyles } from '../helpers/ModalProvider';
 import { FormFooterMessage, InputCheckbox, InputText, MESSAGE_TYPE } from '../components/FormComponents';
+import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 
 export default function ConnectServerContent({closeModal, data, onOK, setHeight}) {
-  const classes = useModalStyles();
+
   const containerRef = useRef();
   const firstEleRef = useRef();
   const okBtnRef = useRef();
@@ -58,7 +58,7 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
   }
 
   return (
-    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>
+    <ModalContent ref={containerRef}>
       <Box flexGrow="1" p={2}>
         {data.prompt_tunnel_password && <>
           <Box>
@@ -105,11 +105,11 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
           position: 'unset', padding: '12px 0px 0px'
         }}/>
       </Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <PrimaryButton ref={okBtnRef} data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+        <PrimaryButton ref={okBtnRef} data-test="save" startIcon={<CheckRoundedIcon />} onClick={()=>{
           let postFormData = new FormData();
           if(data.prompt_tunnel_password) {
             postFormData.append('tunnel_password', formData.tunnel_password);
@@ -124,8 +124,8 @@ export default function ConnectServerContent({closeModal, data, onOK, setHeight}
           onOK?.(postFormData);
           closeModal();
         }} >{gettext('OK')}</PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
index d2e62f759..8c62d2dc1 100644
--- a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
@@ -11,19 +11,16 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
-
 import { Box } from '@mui/material';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import HelpIcon from '@mui/icons-material/Help';
-
 import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons';
-import { useModalStyles } from '../helpers/ModalProvider';
 import { FormFooterMessage, FormNote, InputText, MESSAGE_TYPE } from '../components/FormComponents';
+import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 
 export default function MasterPasswordContent({ closeModal, onResetPassowrd, onOK, onCancel, setHeight, isPWDPresent, data, keyringName}) {
-  const classes = useModalStyles();
   const containerRef = useRef();
   const firstEleRef = useRef();
   const okBtnRef = useRef();
@@ -57,9 +54,8 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
     setHeight?.(containerRef.current?.offsetHeight);
   }, [containerRef.current]);
 
-
   return (
-    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>
+    <ModalContent ref={containerRef}>
       {isKeyring ?
         <Box flexGrow="1" p={2}>
           <Box>
@@ -98,7 +94,7 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
           }} />
         </Box>
       }
-      <Box className={classes.footer}>
+      <ModalFooter>
         <Box style={{ marginRight: 'auto' }}>
           <PgIconButton data-test="help-masterpassword" title={gettext('Help')} style={{ padding: '0.3rem', paddingLeft: '0.7rem' }} startIcon={<HelpIcon />} onClick={() => {
             let _url = url_for('help.static', {
@@ -120,7 +116,7 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
             closeModal();
           }} >{gettext('Cancel')}</DefaultButton>
         }
-        <PrimaryButton ref={okBtnRef} data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />}
+        <PrimaryButton ref={okBtnRef} data-test="save" startIcon={<CheckRoundedIcon />}
           disabled={formData.password.length == 0}
           onClick={() => {
             let postFormData = new FormData();
@@ -132,8 +128,8 @@ export default function MasterPasswordContent({ closeModal, onResetPassowrd, onO
         >
           {gettext('OK')}
         </PrimaryButton>
-      </Box>
-    </Box>);
+      </ModalFooter>
+    </ModalContent>);
 }
 
 MasterPasswordContent.propTypes = {
diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
index a101ab452..f3208fc43 100644
--- a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
@@ -14,12 +14,11 @@ import { DefaultButton, PrimaryButton } from '../components/Buttons';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import PropTypes from 'prop-types';
-import { useModalStyles } from '../helpers/ModalProvider';
+import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 import { InputText } from '../components/FormComponents';
 import { isEmptyString } from '../../../static/js/validators';
 
 export default function NamedRestoreContent({closeModal, onOK, setHeight}) {
-  const classes = useModalStyles();
   const containerRef = useRef();
   const firstEleRef = useRef();
   const okBtnRef = useRef();
@@ -55,7 +54,7 @@ export default function NamedRestoreContent({closeModal, onOK, setHeight}) {
   const isOKDisabled = isEmptyString(formData.namedRestorePoint);
 
   return (
-    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>
+    <ModalContent ref={containerRef}>
       <Box flexGrow="1" p={2}>
         <Box>
           <span style={{fontWeight: 'bold'}}>
@@ -67,18 +66,18 @@ export default function NamedRestoreContent({closeModal, onOK, setHeight}) {
             onChange={(e)=>onTextChange(e, 'namedRestorePoint')} onKeyDown={(e)=>onKeyDown(e)}/>
         </Box>
       </Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <PrimaryButton ref={okBtnRef} data-test="save" disabled={isOKDisabled} className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+        <PrimaryButton ref={okBtnRef} data-test="save" disabled={isOKDisabled} startIcon={<CheckRoundedIcon />} onClick={()=>{
           let postFormData = new FormData();
           postFormData.append('value', formData.namedRestorePoint);
           onOK?.(postFormData);
           closeModal();
         }} >{gettext('OK')}</PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
index cbd2d91a4..617895f2e 100644
--- a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
@@ -18,11 +18,10 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import gettext from 'sources/gettext';
 
 import { DefaultButton, PrimaryButton } from '../components/Buttons';
-import { useModalStyles } from '../helpers/ModalProvider';
+import { ModalContent, ModalFooter } from '../../../static/js/components/ModalContent';
 import { FormFooterMessage, InputText, MESSAGE_TYPE } from '../components/FormComponents';
 
 export default function RenameTabContent({ panelId, panelDocker, closeModal}) {
-  const classes = useModalStyles();
   const containerRef = useRef();
   const okBtnRef = useRef();
   const panelData = useMemo(()=>panelDocker.find(panelId));
@@ -63,7 +62,7 @@ export default function RenameTabContent({ panelId, panelDocker, closeModal}) {
   const isValid = formData['title'].length != 0;
 
   return (
-    <Box display="flex" flexDirection="column" className={classes.container} ref={containerRef}>
+    <ModalContent ref={containerRef}>
       <Box padding="8px">
         <Box marginBottom="4px">Current: {initialTitle}</Box>
         <InputText type="text" value={formData['title']} controlProps={{ maxLength: null }}
@@ -71,15 +70,15 @@ export default function RenameTabContent({ panelId, panelDocker, closeModal}) {
       </Box>
       <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={!isValid ? gettext('Title cannot be empty') : ''}
         closable={false} style={{position: 'initial'}} />
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={() => {
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <PrimaryButton data-test="save" startIcon={<CheckRoundedIcon />} onClick={onOkClick} className={classes.margin} disabled={!isValid}>
+        <PrimaryButton data-test="save" startIcon={<CheckRoundedIcon />} onClick={onOkClick} disabled={!isValid}>
           {gettext('OK')}
         </PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
index 688470b3a..cded49ea6 100644
--- a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
@@ -17,19 +17,17 @@ import CloseIcon from '@mui/icons-material/CloseRounded';
 import HelpIcon from '@mui/icons-material/Help';
 
 import { DefaultButton, PgIconButton } from '../components/Buttons';
-import { useModalStyles } from '../helpers/ModalProvider';
+import { ModalContent, ModalFooter }from '../../../static/js/components/ModalContent';
 
 export default function UrlDialogContent({ url, helpFile, onClose }) {
-  const classes = useModalStyles();
-
   return (
-    <Box display="flex" flexDirection="column" height="100%" className={classes.container}>
+    <ModalContent>
       <Box flexGrow="1">
         <iframe src={url} width="100%" height="100%" onLoad={(e)=>{
           e.target?.contentWindow?.focus();
         }}/>
       </Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <Box style={{ marginRight: 'auto' }}>
           <PgIconButton data-test={'help-'+helpFile} title={gettext('Help')} icon={<HelpIcon />} onClick={() => {
             let _url = url_for('help.static', {
@@ -42,8 +40,8 @@ export default function UrlDialogContent({ url, helpFile, onClose }) {
         <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={() => {
           onClose();
         }} >{gettext('Close')}</DefaultButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/static/js/Explain/Analysis.jsx b/web/pgadmin/static/js/Explain/Analysis.jsx
index 749dfd1ec..ff4c4952f 100644
--- a/web/pgadmin/static/js/Explain/Analysis.jsx
+++ b/web/pgadmin/static/js/Explain/Analysis.jsx
@@ -1,53 +1,45 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
-import clsx from 'clsx';
 import _ from 'lodash';
 import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import HTMLReactParse from 'html-react-parser';
-import { commonTableStyles } from '../Theme';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
+import Table from '../components/Table';
 
-const useStyles = makeStyles((theme)=>({
-  collapsible: {
+
+const StyledTable = styled(Table)(({theme}) => ({
+  '& .Analysis-collapsible': {
     cursor: 'pointer',
   },
-  collapseParent: {
+  '& .Analysis-collapseParent': {
     borderBottom: '2px dashed '+theme.palette.primary.main,
   },
-  level2: {
+  '& .Analysis-textRight': {
+    textAlign: 'right',
+  },
+  '& .Analysis-level2': {
     backgroundColor: theme.otherVars.explain.sev2.bg,
     color: theme.otherVars.explain.sev2.color,
   },
-  level3: {
+  '& .Analysis-level3': {
     backgroundColor: theme.otherVars.explain.sev3.bg,
     color: theme.otherVars.explain.sev3.color,
   },
-  level4: {
+  '& .Analysis-level4': {
     backgroundColor: theme.otherVars.explain.sev4.bg,
     color: theme.otherVars.explain.sev4.color,
   },
-  textRight: {
-    textAlign: 'right',
-  },
 }));
 
-function getRowClassname(classes, data, collapseParent) {
+function getRowClassname(data, collapseParent) {
   let className = [];
   if(data['Plans']?.length > 0) {
-    className.push(classes.collapsible);
+    className.push('Analysis-collapsible');
   }
   if(collapseParent) {
-    className.push(classes.collapseParent);
+    className.push('Analysis-collapseParent');
   }
   return className;
 }
@@ -70,11 +62,11 @@ NodeText.propTypes = {
 
 function ExplainRow({row, show, activeExId, setActiveExId, collapsedExId, toggleCollapseExId}) {
   let data = row['data'];
-  const classes = useStyles();
+
   const exId = `pga_ex_${data['level'].join('_')}`;
   const parentExId = `pga_ex_${data['parent_node']}`;
   const collapsed = collapsedExId.findIndex((v)=>parentExId.startsWith(v)) > -1;
-  const className = getRowClassname(classes, data, collapsedExId.indexOf(exId) > -1);
+  const className = getRowClassname(data, collapsedExId.indexOf(exId) > -1);
   let onRowClick = (e)=>{
     toggleCollapseExId(e.currentTarget.getAttribute('data-ex-id'), data['Plans']?.length);
   };
@@ -82,35 +74,35 @@ function ExplainRow({row, show, activeExId, setActiveExId, collapsedExId, toggle
   return (
     <tr onMouseEnter={(e)=>{setActiveExId(e.currentTarget.getAttribute('data-ex-id'));}}
       onMouseLeave={()=>{setActiveExId(null);}}
-      className={clsx(className)} data-parent={parentExId}
+      className={className} data-parent={parentExId}
       data-ex-id={`pga_ex_${data['level'].join('_')}`}
       style={collapsed ? {display: 'none'} : {}}
       onClick={onRowClick}>
       <td>
         <FiberManualRecordIcon fontSize="small" style={{visibility: activeExId==parentExId ? 'visible' : 'hidden'}} />
       </td>
-      <td className={classes.textRight}>{data['_serial']}.</td>
+      <td className='Analysis-textRight'>{data['_serial']}.</td>
       <td style={{paddingLeft: data['level'].length*30+'px'}} title={row['tooltip_text']}>
         <NodeText displayText={row['display_text']} extraInfo={row['node_extra_info']} />
       </td>
-      <td className={clsx(classes.textRight, classes['level'+data['exclusive_flag']])} style={show.show_timings ? {} : {display: 'none'}}>
+      <td className={'Analysis-textRight ' + 'Analysis-' +['level'+data['exclusive_flag']]} style={show.show_timings ? {} : {display: 'none'}}>
         {data['exclusive'] && (data['exclusive']+' ms')}
       </td>
-      <td className={clsx(classes.textRight, classes['level'+data['inclusive_flag']])} style={show.show_timings ? {} : {display: 'none'}}>
+      <td className={'Analysis-textRight ' + 'Analysis-' +['level'+data['inclusive_flag']]} style={show.show_timings ? {} : {display: 'none'}}>
         {data['inclusive'] && (data['inclusive']+' ms')}
       </td>
-      <td className={clsx(classes.textRight, classes['level'+data['rowsx_flag']])} style={show.show_rowsx ? {} : {display: 'none'}}>
+      <td className={'Analysis-textRight ' + 'Analysis-' +['level'+data['rowsx_flag']]} style={show.show_rowsx ? {} : {display: 'none'}}>
         {!_.isUndefined(data['rowsx_flag'])
           && (data['rowsx_direction'] == 'positive' ? <>&uarr;</> : <>&darr;</>)
         }&nbsp;{data['rowsx']}
       </td>
-      <td className={classes.textRight} style={(show.show_rowsx || show.show_rows) ? {} : {display: 'none'}}>
+      <td className='Analysis-textRight' style={(show.show_rowsx || show.show_rows) ? {} : {display: 'none'}}>
         {data['Actual Rows']}
       </td>
-      <td className={classes.textRight} style={(show.show_rowsx || show.show_plan_rows) ? {} : {display: 'none'}}>
+      <td className='Analysis-textRight' style={(show.show_rowsx || show.show_plan_rows) ? {} : {display: 'none'}}>
         {data['Plan Rows']}
       </td>
-      <td className={classes.textRight} style={(show.show_rowsx || show.show_rows) ? {} : {display: 'none'}}>
+      <td className='Analysis-textRight' style={(show.show_rowsx || show.show_rows) ? {} : {display: 'none'}}>
         {data['Actual Loops']}
       </td>
     </tr>
@@ -151,7 +143,6 @@ ExplainRow.propTypes = {
 };
 
 export default function Analysis({explainTable}) {
-  const tableClasses = commonTableStyles();
   const [activeExId, setActiveExId] = React.useState();
   const [collapsedExId, setCollapsedExId] = React.useState([]);
 
@@ -165,46 +156,48 @@ export default function Analysis({explainTable}) {
       });
     }
   };
-  return <table className={clsx(tableClasses.table, tableClasses.noBorder, tableClasses.borderBottom)}>
-    <thead>
-      <tr>
-        <th rowSpan="2" style={{width: '30px'}}></th>
-        <th rowSpan="2"><button disabled="">#</button></th>
-        <th rowSpan="2"><button disabled="">Node</button></th>
-        <th colSpan="2" style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">{gettext('Timings')}</button>
-        </th>
-        <th style={(explainTable.show_rowsx || explainTable.show_rows || explainTable.show_plan_rows) ? {} : {display: 'none'}}
-          colSpan={(explainTable.show_rowsx) ? '3' : '1'}>
-          <button disabled="">{gettext('Rows')}</button>
-        </th>
-        <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}} rowSpan="2">
-          <button disabled="">{gettext('Loops')}</button>
-        </th>
-      </tr>
-      <tr>
-        <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">{gettext('Exclusive')}</button>
-        </th>
-        <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-          <button disabled="">{gettext('Inclusive')}</button>
-        </th>
-        <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">{gettext('Rows X')}</button></th>
-        <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Actual')}</button></th>
-        <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Plan')}</button></th>
-      </tr>
-    </thead>
-    <tbody>
-      {_.sortBy(explainTable.rows,(r)=>r['data']['_serial']).map((row)=>{
-        return <ExplainRow key={row?.data?.arr_id} row={row} show={{
-          show_timings: explainTable.show_timings,
-          show_rowsx: explainTable.show_rowsx,
-          show_rows: explainTable.show_rows,
-          show_plan_rows: explainTable.show_plan_rows,
-        }} activeExId={activeExId} setActiveExId={setActiveExId} collapsedExId={collapsedExId} toggleCollapseExId={toggleCollapseExId} />;
-      })}
-    </tbody>
-  </table>;
+  return (
+    <StyledTable>
+      <thead>
+        <tr>
+          <th rowSpan="2" style={{width: '30px'}}></th>
+          <th rowSpan="2"><button disabled="">#</button></th>
+          <th rowSpan="2"><button disabled="">Node</button></th>
+          <th colSpan="2" style={explainTable.show_timings ? {} : {display: 'none'}}>
+            <button disabled="">{gettext('Timings')}</button>
+          </th>
+          <th style={(explainTable.show_rowsx || explainTable.show_rows || explainTable.show_plan_rows) ? {} : {display: 'none'}}
+            colSpan={(explainTable.show_rowsx) ? '3' : '1'}>
+            <button disabled="">{gettext('Rows')}</button>
+          </th>
+          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}} rowSpan="2">
+            <button disabled="">{gettext('Loops')}</button>
+          </th>
+        </tr>
+        <tr>
+          <th style={explainTable.show_timings ? {} : {display: 'none'}}>
+            <button disabled="">{gettext('Exclusive')}</button>
+          </th>
+          <th style={explainTable.show_timings ? {} : {display: 'none'}}>
+            <button disabled="">{gettext('Inclusive')}</button>
+          </th>
+          <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">{gettext('Rows X')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Actual')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Plan')}</button></th>
+        </tr>
+      </thead>
+      <tbody>
+        {_.sortBy(explainTable.rows,(r)=>r['data']['_serial']).map((row)=>{
+          return <ExplainRow key={row?.data?.arr_id} row={row} show={{
+            show_timings: explainTable.show_timings,
+            show_rowsx: explainTable.show_rowsx,
+            show_rows: explainTable.show_rows,
+            show_plan_rows: explainTable.show_plan_rows,
+          }} activeExId={activeExId} setActiveExId={setActiveExId} collapsedExId={collapsedExId} toggleCollapseExId={toggleCollapseExId} />;
+        })}
+      </tbody>
+    </StyledTable>
+  );
 }
 
 Analysis.propTypes = {
diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
index a402985f7..86432bd1d 100644
--- a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
+++ b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
@@ -7,43 +7,42 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import { Box, Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import gettext from 'sources/gettext';
-import { commonTableStyles } from '../Theme';
-import clsx from 'clsx';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import Table from '../components/Table';
 
-const useStyles = makeStyles((theme)=>({
-  title: {
+
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .ExplainStatistics-title': {
     fontWeight: 'bold',
     padding: '4px',
     backgroundColor: theme.otherVars.cardHeaderBg,
     borderTopLeftRadius: theme.shape.borderRadius,
     borderTopRightRadius: theme.shape.borderRadius,
   },
-  tableRow: {
-    backgroundColor: theme.palette.grey[200]
-  },
-  tableName:{
-    fontWeight: 'bold',
-  },
-  nodeName: {
-    paddingLeft: '30px',
+  '& .ExplainStatistics-tableRow': {
+    backgroundColor: theme.palette.grey[200],
+    '& .ExplainStatistics-tableName': {
+      fontWeight: 'bold',
+      '& .ExplainStatistics-nodeName': {
+        paddingLeft: '30px',
+      }
+    },
   },
 }));
 
 export default function ExplainStatistics({explainTable}) {
   // _renderStatisticsTable
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
+
   return (
-    <Box p={1}>
+    <StyledBox p={1}>
       <Grid container spacing={1}>
         <Grid item lg={6} md={12}>
-          <div className={classes.title}>{gettext('Statistics per Node Type')}</div>
-          <table className={clsx(tableClasses.table)}>
+          <div className='ExplainStatistics-title'>{gettext('Statistics per Node Type')}</div>
+          <Table >
             <thead>
               <tr>
                 <th>{gettext('Node type')}</th>
@@ -67,11 +66,11 @@ export default function ExplainStatistics({explainTable}) {
                 </tr>;
               })}
             </tbody>
-          </table>
+          </Table>
         </Grid>
         <Grid item lg={6} md={12}>
-          <div className={classes.title}>{gettext('Statistics per Relation')}</div>
-          <table className={clsx(tableClasses.table)}>
+          <div className='ExplainStatistics-title'>{gettext('Statistics per Relation')}</div>
+          <Table>
             <thead>
               <tr>
                 <th>{gettext('Relation name')}</th>
@@ -95,8 +94,8 @@ export default function ExplainStatistics({explainTable}) {
                 let table = explainTable.statistics.tables[key];
                 table.sum_of_times = _.sumBy(Object.values(table.nodes), 'sum_of_times');
                 return <React.Fragment key={i}>
-                  <tr className={classes.tableRow}>
-                    <td className={classes.tableName}>{table.name}</td>
+                  <tr className='ExplainStatistics-tableRow'>
+                    <td className='ExplainStatistics-tableName'>{table.name}</td>
                     <td>{table.count}</td>
                     {explainTable.show_timings && <>
                       <td>{Math.ceil10(table.sum_of_times, -3) + ' ms'}</td>
@@ -106,7 +105,7 @@ export default function ExplainStatistics({explainTable}) {
                   {_.sortBy(Object.keys(table.nodes)).map((nodeKey, j)=>{
                     let node = table.nodes[nodeKey];
                     return <tr key={j}>
-                      <td><div className={classes.nodeName}>{node.name}</div></td>
+                      <td><div className='ExplainStatistics-nodeName'>{node.name}</div></td>
                       <td>{node.count}</td>
                       {explainTable.show_timings && <>
                         <td>{Math.ceil10(node.sum_of_times, -3) + ' ms'}</td>
@@ -117,10 +116,10 @@ export default function ExplainStatistics({explainTable}) {
                 </React.Fragment>;
               })}
             </tbody>
-          </table>
+          </Table>
         </Grid>
       </Grid>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx
index 1c397dcbc..db805b913 100644
--- a/web/pgadmin/static/js/Explain/Graphical.jsx
+++ b/web/pgadmin/static/js/Explain/Graphical.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box, Card, CardContent, CardHeader, useTheme } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, {useEffect} from 'react';
 import _ from 'lodash';
 import { PgButtonGroup, PgIconButton } from '../components/Buttons';
@@ -20,9 +20,40 @@ import ReactDOMServer from 'react-dom/server';
 import url_for from 'sources/url_for';
 import { downloadSvg } from './svg_download';
 import CloseIcon from '@mui/icons-material/CloseRounded';
-import { commonTableStyles } from '../Theme';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import Table from '../components/Table';
+
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .Graphical-explainDetails': {
+    minWidth: '200px',
+    maxWidth: '300px',
+    position: 'absolute',
+    top: '0.25rem',
+    bottom: '0.25rem',
+    right: '0.25rem',
+    borderColor: theme.otherVars.borderColor,
+    // box-shadow: 0 0.125rem 0.5rem rgb(132 142 160 / 28%);
+    wordBreak: 'break-all',
+    display: 'flex',
+    flexDirection: 'column',
+    zIndex: 99,
+    '& .Graphical-explainContent': {
+      height: '100%',
+      overflow: 'auto',
+      '& .Graphical-tableBorderBottom':{
+        '& tbody tr:last-of-type td': {
+          borderBottom: '1px solid '+theme.otherVars.borderColor,
+        },
+      },
+      '& .Graphical-tablewrapTd': {
+        '& tbody td': {
+          whiteSpace: 'pre-wrap',
+        }
+      },
+    },
+  },
+}
+));
 
 // Some predefined constants used to calculate image location and its border
 let pWIDTH = 100;
@@ -338,30 +369,8 @@ PlanSVG.propTypes = {
 };
 
 
-const useStyles = makeStyles((theme)=>({
-  explainDetails: {
-    minWidth: '200px',
-    maxWidth: '300px',
-    position: 'absolute',
-    top: '0.25rem',
-    bottom: '0.25rem',
-    right: '0.25rem',
-    borderColor: theme.otherVars.borderColor,
-    // box-shadow: 0 0.125rem 0.5rem rgb(132 142 160 / 28%);
-    wordBreak: 'break-all',
-    display: 'flex',
-    flexDirection: 'column',
-    zIndex: 99,
-  },
-  explainContent: {
-    height: '100%',
-    overflow: 'auto',
-  }
-}));
-
 export default function Graphical({planData, ctx}) {
-  const tableStyles = commonTableStyles();
-  const classes = useStyles();
+
   const graphContainerRef = React.useRef();
   const [zoomFactor, setZoomFactor] = React.useState(INIT_ZOOM_FACTOR);
   const [[explainPlanTitle, explainPlanDetails], setExplainPlanDetails] = React.useState([null, null]);
@@ -406,7 +415,7 @@ export default function Graphical({planData, ctx}) {
   }, []);
 
   return (
-    <Box ref={graphContainerRef} height="100%" width="100%" overflow="auto">
+    <StyledBox ref={graphContainerRef} height="100%" width="100%" overflow="auto">
       <Box position="absolute" top="4px" left="4px" gap="4px" display="flex">
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Zoom in')} icon={<ZoomInIcon />} onClick={()=>onCmdClick('in')}/>
@@ -421,22 +430,22 @@ export default function Graphical({planData, ctx}) {
         onNodeClick={onNodeClick}
       />
       {Boolean(explainPlanDetails) &&
-      <Card className={classes.explainDetails} data-label="explain-details">
+      <Card className='Graphical-explainDetails' data-label="explain-details">
         <CardHeader title={<Box display="flex">
           {explainPlanTitle}
           <Box marginLeft="auto">
             <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={()=>setExplainPlanDetails([null, null])}/>
           </Box>
         </Box>} />
-        <CardContent className={classes.explainContent}>
-          <table className={clsx(tableStyles.table, tableStyles.borderBottom, tableStyles.wrapTd)}>
+        <CardContent className='Graphical-explainContent'>
+          <Table classNameRoot={'Graphical-tableBorderBottom Graphical-tablewrapTd'}>
             <tbody>
               <NodeDetails download={false} plan={explainPlanDetails} />
             </tbody>
-          </table>
+          </Table>
         </CardContent>
       </Card>}
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/Explain/index.jsx b/web/pgadmin/static/js/Explain/index.jsx
index dee22cd49..be1dd67f3 100644
--- a/web/pgadmin/static/js/Explain/index.jsx
+++ b/web/pgadmin/static/js/Explain/index.jsx
@@ -7,23 +7,23 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box, Tab, Tabs } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import _ from 'lodash';
 import Graphical from './Graphical';
 import TabPanel from '../components/TabPanel';
 import gettext  from 'sources/gettext';
 import ImageMapper from './ImageMapper';
-import { makeStyles } from '@mui/styles';
 import Analysis from './Analysis';
 import ExplainStatistics from './ExplainStatistics';
 import PropTypes from 'prop-types';
 import EmptyPanelMessage from '../components/EmptyPanelMessage';
 
-const useStyles = makeStyles((theme)=>({
-  tabPanel: {
-    padding: 0,
-    backgroundColor: theme.palette.background.default,
-  },
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .Explain-tabPanel': {
+    padding: '0 !important',
+    backgroundColor: theme.palette.background.default + ' !important',
+  }
 }));
 
 // Some predefined constants used to calculate image location and its border
@@ -466,7 +466,7 @@ function parsePlanData(data, ctx) {
 }
 
 export default function Explain({plans=[]}) {
-  const classes = useStyles();
+
   const [tabValue, setTabValue] = React.useState(0);
 
   let ctx = React.useRef({});
@@ -488,12 +488,14 @@ export default function Explain({plans=[]}) {
   }, [plans]);
 
   if(_.isEmpty(plans)) {
-    return <Box height="100%" display="flex" flexDirection="column">
-      <EmptyPanelMessage text={gettext('Use Explain/Explain analyze button to generate the plan for a query. Alternatively, you can also execute "EXPLAIN (FORMAT JSON) [QUERY]".')} />
-    </Box>;
+    return (
+      <StyledBox height="100%" display="flex" flexDirection="column">
+        <EmptyPanelMessage text={gettext('Use Explain/Explain analyze button to generate the plan for a query. Alternatively, you can also execute "EXPLAIN (FORMAT JSON) [QUERY]".')} />
+      </StyledBox>
+    );
   }
   return (
-    <Box height="100%" display="flex" flexDirection="column">
+    <StyledBox height="100%" display="flex" flexDirection="column">
       <Box>
         <Tabs
           value={tabValue}
@@ -510,16 +512,16 @@ export default function Explain({plans=[]}) {
           <Tab label="Statistics" />
         </Tabs>
       </Box>
-      <TabPanel value={tabValue} index={0} classNameRoot={classes.tabPanel}>
+      <TabPanel value={tabValue} index={0} classNameRoot='Explain-tabPanel'>
         <Graphical planData={planData} ctx={ctx.current}/>
       </TabPanel>
-      <TabPanel value={tabValue} index={1} classNameRoot={classes.tabPanel}>
+      <TabPanel value={tabValue} index={1} classNameRoot='Explain-tabPanel'>
         <Analysis explainTable={ctx.current.explainTable} />
       </TabPanel>
-      <TabPanel value={tabValue} index={2} classNameRoot={classes.tabPanel}>
+      <TabPanel value={tabValue} index={2} classNameRoot='Explain-tabPanel'>
         <ExplainStatistics explainTable={ctx.current.explainTable} />
       </TabPanel>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/PgTreeView/index.jsx b/web/pgadmin/static/js/PgTreeView/index.jsx
index fba60b84e..9b5d1ca86 100644
--- a/web/pgadmin/static/js/PgTreeView/index.jsx
+++ b/web/pgadmin/static/js/PgTreeView/index.jsx
@@ -1,6 +1,5 @@
 import { Checkbox } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import React, { useEffect, useRef } from 'react';
 import { Tree } from 'react-arborist';
@@ -13,35 +12,34 @@ import EmptyPanelMessage from '../components/EmptyPanelMessage';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 
 
-const useStyles = makeStyles((theme) => ({
-  node: {
-    display: 'inline-block',
-    paddingLeft: '1.5rem',
-    height: '100%',
-  },
-  checkboxStyle: {
-    fill: theme.palette.primary.main
-  },
-  tree: {
+
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  '& .PgTree-tree': {
     background: theme.palette.background.default,
     height: '100%',
     width: '100%',
     display: 'flex',
     flexDirection: 'column',
     flex: 1,
-  },
-  focusedNode: {
-    background: theme.palette.primary.light,
-  },
-  leafNode: {
-    marginLeft: '1.5rem'
+    '& .PgTree-leafNode': {
+      marginLeft: '1.5rem'
+    },
+    '& .PgTree-node': {
+      display: 'inline-block',
+      paddingLeft: '1.5rem',
+      height: '100%',
+    },
+    '& .PgTree-focusedNode': {
+      background: theme.palette.primary.light,
+    },
   },
 }));
 
 export const PgTreeSelectionContext = React.createContext();
 
 export default function PgTreeView({ data = [], hasCheckbox = false, selectionChange = null}) {
-  let classes = useStyles();
+
   let treeData = data;
   const treeObj = useRef();
   const treeContainerRef = useRef();
@@ -69,10 +67,10 @@ export default function PgTreeView({ data = [], hasCheckbox = false, selectionCh
     selectionChange?.(selectedChNodes);
   };
 
-  return (<>
+  return (<Root>
     { treeData.length > 0 ?
       <PgTreeSelectionContext.Provider value={selectedCheckBoxNodes}>
-        <div ref={(containerRef) => treeContainerRef.current = containerRef} className={clsx(classes.tree)}>
+        <div ref={(containerRef) => treeContainerRef.current = containerRef} className={'PgTree-tree'}>
           <AutoSizer>
             {({ width, height }) => (
               <Tree
@@ -97,7 +95,7 @@ export default function PgTreeView({ data = [], hasCheckbox = false, selectionCh
       :
       <EmptyPanelMessage text={gettext('No objects are found to display')}/>
     }
-  </>
+  </Root>
   );
 }
 
@@ -108,7 +106,7 @@ PgTreeView.propTypes = {
 };
 
 function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
-  const classes = useStyles();
+
   const pgTreeSelCtx = React.useContext(PgTreeSelectionContext);
   const [isSelected, setIsSelected] = React.useState(pgTreeSelCtx.includes(node.id) || node.data?.isSelected);
   const [isIndeterminate, setIsIndeterminate] = React.useState(node?.parent.level==0);
@@ -173,16 +171,16 @@ function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
   };
 
   return (
-    <div style={style} className={clsx(node.isFocused ? classes.focusedNode : '')} onClick={onSelect} onKeyDown={onKeyDown}>
+    <div style={style} className={node.isFocused ? 'PgTree-focusedNode' : ''} onClick={onSelect} onKeyDown={onKeyDown}>
       <CollectionArrow node={node} tree={tree} selectedNodeIds={pgTreeSelCtx} />
       {
-        hasCheckbox ? <Checkbox style={{ padding: 0 }} color="primary" className={clsx(!node.isInternal ? classes.leafNode: null)}
+        hasCheckbox ? <Checkbox style={{ padding: 0 }} color="primary" className={!node.isInternal ? 'PgTree-leafNode': null}
           checked={isSelected}
           checkedIcon={isIndeterminate  ? <IndeterminateCheckBoxIcon style={{height: '1.4rem'}} />: <CheckBoxIcon style={{height: '1.4rem'}} />}
           onChange={onCheckboxSelection}/> :
-          <span className={clsx(node.data.icon)}></span>
+          <span className={node.data.icon}></span>
       }
-      <div className={clsx(node.data.icon, classes.node)}>{node.data.name}</div>
+      <div className={node.data.icon + ' PgTree-node'}>{node.data.name}</div>
     </div>
   );
 }
diff --git a/web/pgadmin/static/js/QuickSearch/index.jsx b/web/pgadmin/static/js/QuickSearch/index.jsx
index 42a0c9141..072cec7ba 100644
--- a/web/pgadmin/static/js/QuickSearch/index.jsx
+++ b/web/pgadmin/static/js/QuickSearch/index.jsx
@@ -7,9 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 import React, {useRef,useState, useEffect} from 'react';
+import { styled } from '@mui/material/styles';
 import { CircularProgress, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
 import {useDelayDebounce} from 'sources/custom_hooks';
 import {onlineHelpSearch} from './online_help';
 import {menuSearch} from './menuitems_help';
@@ -18,8 +17,19 @@ import PropTypes from 'prop-types';
 import { InputText } from '../components/FormComponents';
 import EmptyPanelMessage from '../components/EmptyPanelMessage';
 
-const useStyles = makeStyles((theme)=>({
-  helpGroup: {
+const StyledDiv = styled('div')(({theme}) => ({
+  '& .QuickSearch-loaderRoot': {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px',
+    justifyContent: 'center',
+    '& .QuickSearch-loader': {
+      height: '25px !important',
+      width: '25px !important',
+      marginRight: '8px',
+    }
+  },
+  '& .QuickSearch-helpGroup': {
     backgroundColor: theme.palette.grey[400],
     padding: '6px',
     fontSize: '0.85em',
@@ -27,7 +37,7 @@ const useStyles = makeStyles((theme)=>({
     display: 'flex',
     alignItems: 'center',
   },
-  searchItem: {
+  '& .QuickSearch-searchItem': {
     display: 'flex',
     flexDirection: 'column',
     padding: '4px 8px',
@@ -44,30 +54,18 @@ const useStyles = makeStyles((theme)=>({
       pointerEvents: 'none',
     }
   },
-  showAll: {
+  '& .QuickSearch-showAll': {
     marginLeft: 'auto',
     color: 'inherit',
     textDecoration: 'none'
   },
-  loaderRoot: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '8px',
-    justifyContent: 'center',
-  },
-  loader: {
-    height: '25px !important',
-    width: '25px !important',
-    marginRight: '8px',
-  },
 }));
 
 function SearchLoader({loading=false}) {
-  const classes = useStyles();
   if(loading) {
     return (
-      <div className={classes.loaderRoot}>
-        <CircularProgress className={classes.loader} />
+      <div className='QuickSearch-loaderRoot'>
+        <CircularProgress className='QuickSearch-loader' />
         <Typography>{gettext('Searching...')}</Typography>
       </div>
     );
@@ -79,10 +77,10 @@ SearchLoader.propTypes = {
 };
 
 function HelpArticleContents({isHelpLoading, isMenuLoading, helpSearchResult}) {
-  const classes = useStyles();
+
   return (isHelpLoading && !(isMenuLoading??true)) ? (
-    <div>
-      <div className={classes.helpGroup}>
+    <>
+      <div className='QuickSearch-helpGroup'>
         <span className='fa fa-question-circle'></span>
           &nbsp;HELP ARTICLES&nbsp;
         {Object.keys(helpSearchResult.data).length > 10
@@ -95,7 +93,7 @@ function HelpArticleContents({isHelpLoading, isMenuLoading, helpSearchResult}) {
         }
       </div>
       <SearchLoader loading={true} />
-    </div>) : <></>;
+    </>) : <></>;
 }
 
 HelpArticleContents.propTypes = {
@@ -105,7 +103,7 @@ HelpArticleContents.propTypes = {
 };
 
 export default function QuickSearch({closeModal}) {
-  const classes = useStyles();
+
   const wrapperRef = useRef(null);
   const [searchTerm, setSearchTerm] = useState('');
   const [isShowMinLengthMsg, setIsShowMinLengthMsg] = useState(false);
@@ -192,7 +190,7 @@ export default function QuickSearch({closeModal}) {
       let menuItemsHtmlElement = [];
       items.forEach((i) => {
         menuItemsHtmlElement.push(
-          <div key={ 'li-menu-' + i.label }><a tabIndex={i.isDisabled ? '-1' : '0'} id={ 'li-menu-' + i.label } href={'#'} className={ (i.isDisabled ? clsx(classes.searchItem, 'disabled'):classes.searchItem)} onClick={
+          <div key={ 'li-menu-' + i.label }><a tabIndex={i.isDisabled ? '-1' : '0'} id={ 'li-menu-' + i.label } href={'#'} className={ (i.isDisabled ? 'QuickSearch-searchItem disabled':'QuickSearch-searchItem')} onClick={
             () => {
               closeModal();
               i.callback();
@@ -261,7 +259,7 @@ export default function QuickSearch({closeModal}) {
   return (
     <div id='quick-search-container' onClick={setSearchTerm} onKeyDown={()=>{/* no need */}}></div>,
     <div id='quick-search-container' ref={wrapperRef} role="menu">
-      <div>
+      <StyledDiv>
         <div>
           <div style={{padding: '2px 2px 2px 2px'}}>
             <InputText value={searchTerm} autoComplete='off' autoFocus
@@ -276,7 +274,7 @@ export default function QuickSearch({closeModal}) {
             <div >
               { (menuSearchResult.fetched && !(isMenuLoading??true) ) ?
                 <div>
-                  <div className={classes.helpGroup}>
+                  <div className='QuickSearch-helpGroup'>
                     <span className='fa fa-bars'></span> &nbsp;{gettext('MENU ITEMS')} ({menuSearchResult.data.length})
                   </div>
 
@@ -293,16 +291,16 @@ export default function QuickSearch({closeModal}) {
 
               { (helpSearchResult.fetched && !(isHelpLoading??true)) ?
                 <div>
-                  <div className={classes.helpGroup}>
+                  <div className='QuickSearch-helpGroup'>
                     <span className='fa fa-question-circle'></span> &nbsp;{gettext('HELP ARTICLES')} {Object.keys(helpSearchResult.data).length > 10 ?
                       <span> (10 of {Object.keys(helpSearchResult.data).length})</span>:
                       '(' + Object.keys(helpSearchResult.data).length + ')'}&nbsp;
                     { !helpSearchResult.clearedPooling ? <CircularProgress style={{height: '18px', width: '18px'}} /> :''}
-                    { Object.keys(helpSearchResult.data).length > 10 ? <a href={helpSearchResult.url} className={classes.showAll} target='_blank' rel='noreferrer'>{gettext('Show all')} &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''}
+                    { Object.keys(helpSearchResult.data).length > 10 ? <a href={helpSearchResult.url} className='QuickSearch-showAll' target='_blank' rel='noreferrer'>{gettext('Show all')} &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''}
                   </div>
 
                   {Object.keys(helpSearchResult.data).map( (value, index) => {
-                    if(index <= 9) {  return <div key={ 'li-help-' + value }><a tabIndex='0' href={helpSearchResult.data[value]} className={classes.searchItem} target='_blank' rel='noreferrer'>{value}</a></div>; }
+                    if(index <= 9) {  return <div key={ 'li-help-' + value }><a tabIndex='0' href={helpSearchResult.data[value]} className='QuickSearch-searchItem' target='_blank' rel='noreferrer'>{value}</a></div>; }
                   })}
 
                   {(Object.keys(helpSearchResult.data).length == 0) &&
@@ -315,7 +313,7 @@ export default function QuickSearch({closeModal}) {
             </div>
           </div>
         </div>
-      </div>
+      </StyledDiv>
       <div id='quick-search-iframe-container' />
     </div>
   );
diff --git a/web/pgadmin/static/js/SchemaView/DataGridView.jsx b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
index dc0235387..fe8c4798b 100644
--- a/web/pgadmin/static/js/SchemaView/DataGridView.jsx
+++ b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
@@ -10,8 +10,8 @@
 /* The DataGridView component is based on react-table component */
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { PgIconButton } from '../components/Buttons';
 import AddIcon from '@mui/icons-material/AddOutlined';
 import { MappedCellControl } from './MappedControl';
@@ -44,64 +44,58 @@ import { usePgAdmin } from '../BrowserComponent';
 import { requestAnimationAndFocus } from '../utils';
 import { PgReactTable, PgReactTableBody, PgReactTableCell, PgReactTableHeader, PgReactTableRow, PgReactTableRowContent, PgReactTableRowExpandContent } from '../components/PgReactTableStyled';
 
-const useStyles = makeStyles((theme)=>({
-  grid: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .DataGridView-grid': {
     ...theme.mixins.panelBorder,
     backgroundColor: theme.palette.background.default,
-  },
-  gridHeader: {
-    display: 'flex',
-    ...theme.mixins.panelBorder.bottom,
-    backgroundColor: theme.otherVars.headerBg,
-  },
-  gridHeaderText: {
-    padding: theme.spacing(0.5, 1),
-    fontWeight: theme.typography.fontWeightBold,
-  },
-  gridControls: {
-    marginLeft: 'auto',
-  },
-  gridControlsButton: {
-    border: 0,
-    borderRadius: 0,
-    ...theme.mixins.panelBorder.left,
-  },
-  gridRowButton: {
-    border: 0,
-    borderRadius: 0,
-    padding: 0,
-    minWidth: 0,
-    backgroundColor: 'inherit',
-    '&.Mui-disabled': {
-      border: 0,
+    '& .DataGridView-gridHeader': {
+      display: 'flex',
+      ...theme.mixins.panelBorder.bottom,
+      backgroundColor: theme.otherVars.headerBg,
+      '& .DataGridView-gridHeaderText': {
+        padding: theme.spacing(0.5, 1),
+        fontWeight: theme.typography.fontWeightBold,
+      },
+      '& .DataGridView-gridControls': {
+        marginLeft: 'auto',
+        '& .DataGridView-gridControlsButton': {
+          border: 0,
+          borderRadius: 0,
+          ...theme.mixins.panelBorder.left,
+        },
+      },
     },
-  },
-  gridTableContainer: {
-    overflow: 'auto',
-    width: '100%',
-  },
-  table: {
-    '&.pgrt-table': {
-      '& .pgrt-body':{
-        '& .pgrt-row': {
-          position: 'unset',
-          backgroundColor: theme.otherVars.emptySpaceBg,
-
-          '& .pgrt-row-content':{
-            '& .pgrd-row-cell': {
-              height: 'auto',
-              padding: theme.spacing(0.5),
-
-              '&.btn-cell, &.expanded-icon-cell': {
-                padding: '2px 0px'
+    '& .DataGridView-table': {
+      '&.pgrt-table': {
+        '& .pgrt-body':{
+          '& .pgrt-row': {
+            position: 'unset',
+            backgroundColor: theme.otherVars.emptySpaceBg,
+            '& .pgrt-row-content':{
+              '& .pgrd-row-cell': {
+                height: 'auto',
+                padding: theme.spacing(0.5),
+                '&.btn-cell, &.expanded-icon-cell': {
+                  padding: '2px 0px'
+                },
+                '& .DataGridView-gridRowButton': {
+                  border: 0,
+                  borderRadius: 0,
+                  padding: 0,
+                  minWidth: 0,
+                  backgroundColor: 'inherit',
+                  '&.Mui-disabled': {
+                    border: 0,
+                  },
+                },
               }
-            }
-          },
+            },
+          }
         }
       }
-    }
+    },
   },
-  tableRowHovered: {
+  '& .DataGridView-tableRowHovered': {
     position: 'relative',
     '& .hover-overlay': {
       backgroundColor: theme.palette.primary.light,
@@ -110,23 +104,11 @@ const useStyles = makeStyles((theme)=>({
       opacity: 0.75,
     }
   },
-  tableCellHeader: {
-    fontWeight: theme.typography.fontWeightBold,
-    padding: theme.spacing(1, 0.5),
-    textAlign: 'left',
-  },
-  tableContentWidth: {
-    width: 'calc(100% - 3px)',
-  },
-  btnCell: {
-    padding: theme.spacing(0.5, 0),
-    textAlign: 'center',
-  },
-  btnReorder: {
+  '& .DataGridView-btnReorder': {
     cursor: 'move',
     padding: '4px 2px',
   },
-  resizer: {
+  '& .DataGridView-resizer': {
     display: 'inline-block',
     width: '5px',
     height: '100%',
@@ -137,17 +119,17 @@ const useStyles = makeStyles((theme)=>({
     zIndex: 1,
     touchAction: 'none',
   },
-  expandedForm: {
+  '& .DataGridView-expandedForm': {
     border: '1px solid '+theme.palette.grey[400],
   },
-  expandedIconCell: {
+  '& .DataGridView-expandedIconCell': {
     backgroundColor: theme.palette.grey[400],
     borderBottom: 'none',
   }
 }));
 
 function DataTableRow({index, row, totalRows, isResizing, isHovered, schema, schemaRef, accessPath, moveRow, setHoverIndex, viewHelperProps}) {
-  const classes = useStyles();
+
   const [key, setKey] = useState(false);
   const depListener = useContext(DepListenerContext);
   const rowRef = useRef(null);
@@ -259,7 +241,7 @@ function DataTableRow({index, row, totalRows, isResizing, isHovered, schema, sch
   drop(rowRef);
 
   return useMemo(()=>
-    <PgReactTableRowContent ref={rowRef} row={row} data-handler-id={handlerId} className={isHovered ? classes.tableRowHovered : null} data-test='data-table-row' style={{position: 'initial'}}>
+    <PgReactTableRowContent ref={rowRef} row={row} data-handler-id={handlerId} className={isHovered ? 'DataGridView-tableRowHovered' : null} data-test='data-table-row' style={{position: 'initial'}}>
       {row.getVisibleCells().map((cell) => {
         let {modeSupported} = cell.column.field ? getFieldMetaData(cell.column.field, schemaRef.current, {}, viewHelperProps) : {modeSupported: true};
 
@@ -280,16 +262,14 @@ function DataTableRow({index, row, totalRows, isResizing, isHovered, schema, sch
 }
 
 export function DataGridHeader({label, canAdd, onAddClick, canSearch, onSearchTextChange}) {
-  const classes = useStyles();
   const [searchText, setSearchText] = useState('');
-
   return (
-    <Box className={classes.gridHeader}>
+    <Box className='DataGridView-gridHeader'>
       { label &&
-      <Box className={classes.gridHeaderText}>{label}</Box>
+      <Box className='DataGridView-gridHeaderText'>{label}</Box>
       }
       { canSearch &&
-        <Box className={classes.gridHeaderText} width={'100%'}>
+        <Box className='DataGridView-gridHeaderText' width={'100%'}>
           <InputText value={searchText}
             onChange={(value)=>{
               onSearchTextChange(value);
@@ -299,12 +279,12 @@ export function DataGridHeader({label, canAdd, onAddClick, canSearch, onSearchTe
           </InputText>
         </Box>
       }
-      <Box className={classes.gridControls}>
+      <Box className='DataGridView-gridControls'>
         {canAdd && <PgIconButton data-test="add-row" title={gettext('Add row')} onClick={()=>{
           setSearchText('');
           onSearchTextChange('');
           onAddClick();
-        }} icon={<AddIcon />} className={classes.gridControlsButton} />}
+        }} icon={<AddIcon />} className='DataGridView-gridControlsButton' />}
       </Box>
     </Box>
   );
@@ -320,7 +300,7 @@ DataGridHeader.propTypes = {
 export default function DataGridView({
   value, viewHelperProps, schema, accessPath, dataDispatch, containerClassName,
   fixedRows, ...props}) {
-  const classes = useStyles();
+
   const stateUtils = useContext(StateUtilsContext);
   const checkIsMounted = useIsMounted();
   const [hoverIndex, setHoverIndex] = useState();
@@ -345,7 +325,7 @@ export default function DataGridView({
           maxSize: 26,
           minSize: 26,
           cell: ()=>{
-            return <div className={classes.btnReorder}>
+            return <div className='DataGridView-btnReorder'>
               <DragIndicatorRoundedIcon fontSize="small" />
             </div>;
           }
@@ -369,7 +349,7 @@ export default function DataGridView({
             if(props.canEditRow) {
               canEditRow = evalFunc(schemaRef.current, props.canEditRow, row || {});
             }
-            return <PgIconButton data-test="expand-row" title={gettext('Edit row')} icon={<EditRoundedIcon fontSize="small" />} className={classes.gridRowButton}
+            return <PgIconButton data-test="expand-row" title={gettext('Edit row')} icon={<EditRoundedIcon fontSize="small" />} className='DataGridView-gridRowButton'
               onClick={()=>{
                 row.toggleExpanded();
               }} disabled={!canEditRow}
@@ -423,7 +403,7 @@ export default function DataGridView({
                       }
                     );
                   }
-                }} className={classes.gridRowButton} disabled={!canDeleteRow} />
+                }} className='DataGridView-gridRowButton' disabled={!canDeleteRow} />
             );
           }
         };
@@ -607,8 +587,8 @@ export default function DataGridView({
   }
 
   return (
-    <Box className={containerClassName}>
-      <Box className={classes.grid}>
+    <StyledBox className={containerClassName}>
+      <Box className='DataGridView-grid'>
         {(props.label || props.canAdd) && <DataGridHeader label={props.label} canAdd={props.canAdd} onAddClick={onAddClick}
           canSearch={props.canSearch}
           onSearchTextChange={(value)=>{
@@ -616,7 +596,7 @@ export default function DataGridView({
           }}
         />}
         <DndProvider backend={HTML5Backend}>
-          <PgReactTable ref={tableRef} table={table} data-test="data-grid-view" tableClassName={classes.table}>
+          <PgReactTable ref={tableRef} table={table} data-test="data-grid-view" tableClassName='DataGridView-table'>
             <PgReactTableHeader table={table} />
             <PgReactTableBody>
               {rows.map((row, i) => {
@@ -628,7 +608,7 @@ export default function DataGridView({
                   {props.canEdit &&
                     <PgReactTableRowExpandContent row={row}>
                       <FormView value={row.original} viewHelperProps={viewHelperProps} dataDispatch={dataDispatch}
-                        schema={schemaRef.current} accessPath={accessPath.concat([row.index])} isNested={true} className={classes.expandedForm}
+                        schema={schemaRef.current} accessPath={accessPath.concat([row.index])} isNested={true} className='DataGridView-expandedForm'
                         isDataGridForm={true} firstEleRef={(ele)=>{
                           requestAnimationAndFocus(ele);
                         }}/>
@@ -640,7 +620,7 @@ export default function DataGridView({
           </PgReactTable>
         </DndProvider>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx
index 94eb32ead..ea3bcb967 100644
--- a/web/pgadmin/static/js/SchemaView/FormView.jsx
+++ b/web/pgadmin/static/js/SchemaView/FormView.jsx
@@ -8,11 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { Box, Tab, Tabs, Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 
 import { MappedFormControl } from './MappedControl';
 import TabPanel from '../components/TabPanel';
@@ -26,44 +25,45 @@ import { useOnScreen } from '../custom_hooks';
 import { DepListenerContext } from './DepListener';
 import FieldSetView from './FieldSetView';
 
-const useStyles = makeStyles((theme)=>({
-  fullSpace: {
-    padding: 0,
-    height: '100%',
-    overflow: 'hidden',
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .FormView-nestedControl': {
+    height: 'unset !important',
+    '& .FormView-controlRow': {
+      marginBottom: theme.spacing(1),
+    },
+    '& .FormView-nestedTabPanel': {
+      backgroundColor: theme.otherVars.headerBg,
+    }
   },
-  controlRow: {
-    marginBottom: theme.spacing(1),
-  },
-  nestedTabPanel: {
-    backgroundColor: theme.otherVars.headerBg,
-  },
-  nestedControl: {
-    height: 'unset',
-  },
-  fullControl: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  errorMargin: {
+  '& .FormView-errorMargin': {
     /* Error footer space */
     paddingBottom: '36px !important',
   },
-  sqlTabInput: {
-    border: 0,
+  '& .FormView-fullSpace': {
+    padding: '0 !important',
+    height: '100%',
+    overflow: 'hidden',
+    '& .FormView-fullControl': {
+      display: 'flex',
+      flexDirection: 'column',
+      '& .FormView-sqlTabInput': {
+        border: 0,
+      },
+    }
   },
-  nonTabPanel: {
-    padding: 0,
-    background: 'inherit',
+  '& .FormView-nonTabPanel': {
+    backgroundColor: 'inherit',
+    '& .FormView-nonTabPanelContent': {
+      height: 'unset',
+      '& .FormView-controlRow': {
+        marginBottom: theme.spacing(1),
+      },
+    }
   },
-  nonTabPanelContent: {
-    height: 'unset'
-  }
 }));
 
 /* Optional SQL tab */
 function SQLTab({active, getSQLValue}) {
-  const classes = useStyles();
   const [sql, setSql] = useState('Loading...');
   useEffect(()=>{
     let unmounted = false;
@@ -84,7 +84,7 @@ function SQLTab({active, getSQLValue}) {
       readOnly: true,
     }}
     readonly={true}
-    className={classes.sqlTabInput}
+    className='FormView-sqlTabInput'
   />;
 }
 
@@ -167,7 +167,7 @@ export default function FormView({
   let tabs = {};
   let tabsClassname = {};
   const [tabValue, setTabValue] = useState(0);
-  const classes = useStyles();
+
   const firstEleID = useRef();
   const formRef = useRef();
   const onScreenTracker = useRef(false);
@@ -272,7 +272,7 @@ export default function FormView({
         tabs[group].push(
           <FieldSetView key={`nested${tabs[group].length}`} value={value} viewHelperProps={viewHelperProps}
             schema={field.schema} accessPath={accessPath} dataDispatch={dataDispatch} isNested={true} isDataGridForm={isDataGridForm}
-            controlClassName={classes.controlRow}
+            controlClassName='FormView-controlRow'
             {...field} visible={visible}/>
         );
       } else if(field.type === 'collection') {
@@ -293,7 +293,7 @@ export default function FormView({
           key: field.id,  ...field,
           value: value[field.id] || [], viewHelperProps: viewHelperProps,
           schema: field.schema, accessPath: accessPath.concat(field.id), dataDispatch: dataDispatch,
-          containerClassName: classes.controlRow,
+          containerClassName: 'FormView-controlRow',
           canAdd: canAdd, canReorder: canReorder,
           canEdit: canEdit, canDelete: canDelete,
           visible: visible, canAddRow: canAddRow, onDelete: field.onDelete, canSearch: field.canSearch,
@@ -315,7 +315,7 @@ export default function FormView({
          * from there as well.
          */
         if(field.isFullTab) {
-          tabsClassname[group] = classes.fullSpace;
+          tabsClassname[group] ='FormView-fullSpace';
           fullTabs.push(group);
         }
 
@@ -353,7 +353,7 @@ export default function FormView({
             });
           }}
           hasError={hasError}
-          className={classes.controlRow}
+          className='FormView-controlRow'
           noLabel={field.isFullTab}
           memoDeps={[
             value[id],
@@ -361,7 +361,7 @@ export default function FormView({
             disabled,
             visible,
             hasError,
-            classes.controlRow,
+            'FormView-controlRow',
             ...(evalFunc(null, field.deps) || []).map((dep)=>value[dep]),
           ]}
         />;
@@ -383,7 +383,7 @@ export default function FormView({
             withContainer: false, controlGridBasis: 3
           }));
           tabs[group].push(
-            <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={classes.controlRow} rowGap="8px">
+            <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className='FormView-controlRow' rowGap="8px">
               {inlineComponents}
             </Grid>
           );
@@ -398,7 +398,7 @@ export default function FormView({
 
   if(inlineComponents?.length > 0) {
     tabs[inlineCompGroup].push(
-      <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={classes.controlRow} rowGap="8px">
+      <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className='FormView-controlRow' rowGap="8px">
         {inlineComponents}
       </Grid>
     );
@@ -415,7 +415,7 @@ export default function FormView({
     finalTabs[sqlTabName] = [
       <SQLTab key="sqltab" active={sqlTabActive} getSQLValue={getSQLValue} />,
     ];
-    tabsClassname[sqlTabName] = classes.fullSpace;
+    tabsClassname[sqlTabName] = 'FormView-fullSpace';
     fullTabs.push(sqlTabName);
   }
 
@@ -430,7 +430,7 @@ export default function FormView({
 
   if(isTabView) {
     return (
-      <Box height="100%" display="flex" flexDirection="column" className={className} ref={formRef} data-test="form-view">
+      <StyledBox height="100%" display="flex" flexDirection="column" className={className} ref={formRef} data-test="form-view">
         <Box>
           <Tabs
             value={tabValue}
@@ -447,33 +447,34 @@ export default function FormView({
           </Tabs>
         </Box>
         {Object.keys(finalTabs).map((tabName, i)=>{
-          let contentClassName = [stateUtils.formErr.message ? classes.errorMargin : null];
+          let contentClassName = [(stateUtils.formErr.message ? 'FormView-errorMargin': null)];
           if(fullTabs.indexOf(tabName) == -1) {
-            contentClassName.push(classes.nestedControl);
+            contentClassName.push('FormView-nestedControl');
           } else {
-            contentClassName.push(classes.fullControl);
+            contentClassName.push('FormView-fullControl');
           }
           return (
-            <TabPanel key={tabName} value={tabValue} index={i} classNameRoot={clsx(tabsClassname[tabName], isNested ? classes.nestedTabPanel : null)}
-              className={clsx(contentClassName)} data-testid={tabName}>
+            <TabPanel key={tabName} value={tabValue} index={i} classNameRoot={[tabsClassname[tabName], (isNested ? 'FormView-nestedTabPanel' : null)].join(' ')}
+              className={contentClassName.join(' ')} data-testid={tabName}>
               {finalTabs[tabName]}
             </TabPanel>
           );
         })}
-      </Box>);
+      </StyledBox>
+    );
   } else {
-    let contentClassName = [classes.nonTabPanelContent, stateUtils.formErr.message ? classes.errorMargin : null];
+    let contentClassName = ['FormView-nonTabPanelContent', (stateUtils.formErr.message ? 'FormView-errorMargin' : null)];
     return (
-      <Box height="100%" display="flex" flexDirection="column" className={clsx(className)} ref={formRef} data-test="form-view">
-        <TabPanel value={tabValue} index={0} classNameRoot={classes.nonTabPanel}
-          className={clsx(contentClassName)}>
+      <StyledBox height="100%" display="flex" flexDirection="column" className={className} ref={formRef} data-test="form-view">
+        <TabPanel value={tabValue} index={0} classNameRoot='FormView-nonTabPanel'
+          className={contentClassName.join(' ')}>
           {Object.keys(finalTabs).map((tabName)=>{
             return (
               <React.Fragment key={tabName}>{finalTabs[tabName]}</React.Fragment>
             );
           })}
         </TabPanel>
-      </Box>);
+      </StyledBox>);
   }
 }
 
diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx
index a3815b7e7..1e93c1c46 100644
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/web/pgadmin/static/js/SchemaView/index.jsx
@@ -9,7 +9,6 @@
 
 import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Box, Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import SaveIcon from '@mui/icons-material/Save';
 import PublishIcon from '@mui/icons-material/Publish';
@@ -21,7 +20,6 @@ import HelpIcon from '@mui/icons-material/HelpRounded';
 import EditIcon from '@mui/icons-material/Edit';
 import diffArray from 'diff-arrays-of-objects';
 import _ from 'lodash';
-import clsx from 'clsx';
 
 import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents';
 import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons';
@@ -41,35 +39,45 @@ import { useIsMounted } from '../custom_hooks';
 import ErrorBoundary from '../helpers/ErrorBoundary';
 import { usePgAdmin } from '../BrowserComponent';
 import { PgButtonGroup } from '../components/Buttons';
+import { styled } from '@mui/material/styles';
 
-const useDialogStyles = makeStyles((theme)=>({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-  },
-  form: {
+const StyledBox = styled(Box)(({theme})=>({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  minHeight: 0,
+  '& .Dialog-form': {
     flexGrow: 1,
     position: 'relative',
     minHeight: 0,
     display: 'flex',
     flexDirection: 'column',
   },
-  formProperties: {
-    backgroundColor: theme.palette.grey[400],
-  },
-  footer: {
+  '& .Dialog-footer': {
     padding: theme.spacing(1),
     background: theme.otherVars.headerBg,
     display: 'flex',
     zIndex: 1010,
     ...theme.mixins.panelBorder.top,
+    '& .Dialog-buttonMargin': {
+      marginRight: '0.5rem',
+    },
   },
-  mappedControl: {
-    paddingBottom: theme.spacing(1),
+  '& .Properties-toolbar': {
+    padding: theme.spacing(1),
+    background: theme.palette.background.default,
+    ...theme.mixins.panelBorder.bottom,
   },
-  buttonMargin: {
-    marginRight: '0.5rem',
+  '& .Properties-form': {
+    padding: theme.spacing(1),
+    overflow: 'auto',
+    flexGrow: 1,
+    '& .Properties-controlRow': {
+      marginBottom: theme.spacing(1),
+    },
+  },
+  '& .Properties-noPadding': {
+    padding: 0,
   },
 }));
 
@@ -476,7 +484,6 @@ function prepareData(val, createMode=false) {
 /* If its the dialog */
 function SchemaDialogView({
   getInitData, viewHelperProps, loadingText, schema={}, showFooter=true, isTabView=true, checkDirtyOnEnableSave=false, ...props}) {
-  const classes = useDialogStyles();
   /* Some useful states */
   const [dirty, setDirty] = useState(false);
   /* formErr has 2 keys - name and message.
@@ -784,10 +791,10 @@ function SchemaDialogView({
 
   /* I am Groot */
   return (
-    <StateUtilsContext.Provider value={stateUtils}>
-      <DepListenerContext.Provider value={depListenerObj.current}>
-        <Box className={classes.root}>
-          <Box className={classes.form}>
+    <StyledBox>
+      <StateUtilsContext.Provider value={stateUtils}>
+        <DepListenerContext.Provider value={depListenerObj.current}>
+          <Box className='Dialog-form'>
             <Loader message={loaderText || loadingText}/>
             <FormView value={sessData} viewHelperProps={viewHelperProps}
               schema={schema} accessPath={[]} dataDispatch={sessDispatchWithListener}
@@ -795,18 +802,18 @@ function SchemaDialogView({
             <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={formErr.message}
               onClose={onErrClose} />
           </Box>
-          {showFooter && <Box className={classes.footer}>
+          {showFooter && <Box className='Dialog-footer'>
             {(!props.disableSqlHelp || !props.disableDialogHelp) && <Box>
               <PgIconButton data-test="sql-help" onClick={()=>props.onHelp(true, isNew)} icon={<InfoIcon />}
-                disabled={props.disableSqlHelp} className={classes.buttonMargin} title="SQL help for this object type."/>
+                disabled={props.disableSqlHelp} className='Dialog-buttonMargin' title="SQL help for this object type."/>
               <PgIconButton data-test="dialog-help" onClick={()=>props.onHelp(false, isNew)} icon={<HelpIcon />} title="Help for this dialog."
                 disabled={props.disableDialogHelp}/>
             </Box>}
             <Box marginLeft="auto">
-              <DefaultButton data-test="Close" onClick={props.onClose} startIcon={<CloseIcon />} className={classes.buttonMargin}>
+              <DefaultButton data-test="Close" onClick={props.onClose} startIcon={<CloseIcon />} className='Dialog-buttonMargin'>
                 {gettext('Close')}
               </DefaultButton>
-              <DefaultButton data-test="Reset" onClick={onResetClick} startIcon={<SettingsBackupRestoreIcon />} disabled={!dirty || saving} className={classes.buttonMargin}>
+              <DefaultButton data-test="Reset" onClick={onResetClick} startIcon={<SettingsBackupRestoreIcon />} disabled={!dirty || saving} className='Dialog-buttonMargin'>
                 {gettext('Reset')}
               </DefaultButton>
               <PrimaryButton data-test="Save" onClick={onSaveClick} startIcon={ButtonIcon} disabled={ !(viewHelperProps.mode === 'edit' || checkDirtyOnEnableSave ? dirty : true) || saving || Boolean(formErr.name && formErr.name !== 'apierror') || !formReady}>
@@ -814,9 +821,9 @@ function SchemaDialogView({
               </PrimaryButton>
             </Box>
           </Box>}
-        </Box>
-      </DepListenerContext.Provider>
-    </StateUtilsContext.Provider>
+        </DepListenerContext.Provider>
+      </StateUtilsContext.Provider>
+    </StyledBox>
   );
 }
 
@@ -851,38 +858,12 @@ SchemaDialogView.propTypes = {
   checkDirtyOnEnableSave: PropTypes.bool,
 };
 
-const usePropsStyles = makeStyles((theme)=>({
-  root: {
-    height: '100%',
-    minHeight: 0,
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  controlRow: {
-    marginBottom: theme.spacing(1),
-  },
-  form: {
-    padding: theme.spacing(1),
-    overflow: 'auto',
-    flexGrow: 1,
-  },
-  toolbar: {
-    padding: theme.spacing(1),
-    background: theme.palette.background.default,
-    ...theme.mixins.panelBorder.bottom,
-  },
-  buttonMargin: {
-    marginRight: '0.5rem',
-  },
-  noPadding: {
-    padding: 0,
-  }
-}));
+
 
 /* If its the properties tab */
 function SchemaPropertiesView({
   getInitData, viewHelperProps, schema={}, updatedData, ...props}) {
-  const classes = usePropsStyles();
+
   let defaultTab = 'General';
   let tabs = {};
   let tabsClassname = {};
@@ -926,7 +907,7 @@ function SchemaPropertiesView({
     group = group || defaultTab;
 
     if(field.isFullTab) {
-      tabsClassname[group] = classes.noPadding;
+      tabsClassname[group] = 'Properties-noPadding';
     }
 
     if(modeSupported) {
@@ -944,7 +925,7 @@ function SchemaPropertiesView({
             viewHelperProps={viewHelperProps}
             schema={field.schema}
             accessPath={[]}
-            controlClassName={classes.controlRow}
+            controlClassName='Properties-controlRow'
             {...field}
             visible={visible}
           />
@@ -959,7 +940,7 @@ function SchemaPropertiesView({
             schema={field.schema}
             accessPath={[field.id]}
             formErr={{}}
-            containerClassName={classes.controlRow}
+            containerClassName='Properties-controlRow'
             canAdd={false}
             canEdit={false}
             canDelete={false}
@@ -983,11 +964,11 @@ function SchemaPropertiesView({
             readonly={readonly}
             disabled={disabled}
             visible={visible}
-            className={field.isFullTab ? null : classes.controlRow}
+            className={field.isFullTab ? null :'Properties-controlRow'}
             noLabel={field.isFullTab}
             memoDeps={[
               origData[field.id],
-              classes.controlRow,
+              'Properties-controlRow',
               field.isFullTab
             ]}
           />
@@ -998,9 +979,9 @@ function SchemaPropertiesView({
 
   let finalTabs = _.pickBy(tabs, (v, tabName)=>schema.filterGroups.indexOf(tabName) <= -1);
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <Loader message={loaderText}/>
-      <Box className={classes.toolbar}>
+      <Box className='Properties-toolbar'>
         <PgButtonGroup size="small">
           <PgIconButton
             data-test="help" onClick={()=>props.onHelp(true, false)} icon={<InfoIcon />} disabled={props.disableSqlHelp}
@@ -1009,7 +990,7 @@ function SchemaPropertiesView({
             onClick={props.onEdit} icon={<EditIcon />} title={gettext('Edit object...')} />
         </PgButtonGroup>
       </Box>
-      <Box className={clsx(classes.form, classes.formProperties)}>
+      <Box className={'Properties-form'}>
         <Box>
           {Object.keys(finalTabs).map((tabName)=>{
             let id = tabName.replace(' ', '');
@@ -1032,7 +1013,7 @@ function SchemaPropertiesView({
           })}
         </Box>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/SecurityPages/BasePage.jsx b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
index 7b01a77af..0a8fcca66 100644
--- a/web/pgadmin/static/js/SecurityPages/BasePage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
@@ -1,5 +1,5 @@
 import { Box, Button, darken } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import React, { useEffect } from 'react';
 import { MESSAGE_TYPE, NotifierMessage } from '../components/FormComponents';
@@ -7,18 +7,13 @@ import { FinalNotifyContent } from '../helpers/Notifier';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
-const contentBg = '#2b709b';
-const loginBtnBg = '#038bba';
-
-const useStyles = makeStyles((theme)=>({
-  root: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    display: 'flex',
-    justifyContent: 'center',
-    height: '100%',
-  },
-  pageContent: {
+const StyledBox = styled(Box)(({theme}) => ({
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%',
+  '& .BasePage-pageContent': {
     display: 'flex',
     flexDirection: 'column',
     padding: '16px',
@@ -26,44 +21,45 @@ const useStyles = makeStyles((theme)=>({
     borderRadius: theme.shape.borderRadius,
     maxHeight: '100%',
     minWidth: '450px',
-    maxWidth: '450px'
-  },
-  logo: {
-    width: '96px',
-    height: '40px',
-    background: 'url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDUgNTAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMzI2ODkzO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGdBZG1pbjwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTguOTQsNDEuNGEyLjQ4LDIuNDgsMCwwLDEtMi4yNy0zLjQ5TDY0LDIxLjI5VjZhNiw2LDAsMCwwLTYtNkg2QTYsNiwwLDAsMCwwLDZWNDRhNiw2LDAsMCwwLDYsNkg1OGE2LDYsMCwwLDAsNi02VjQxLjRaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjkuMjUsMzAuMTdhMTMuMTMsMTMuMTMsMCwwLDEtMS44Mi02LjkzLDEzLDEzLDAsMCwxLDEuODItNi44OCwxMi41LDEyLjUsMCwwLDEsMS40OC0xLjk1LDEwLjQ0LDEwLjQ0LDAsMCwwLTMuMjUtMi44OSwxMS4xNiwxMS4xNiwwLDAsMC01LjY1LTEuNDVxLTQuNDgsMC02LjcyLDIuNjRWMTAuNDRINy41MVY0MC4zNmExLDEsMCwwLDAsMSwxaDZhMSwxLDAsMCwwLDEtMVYzMS4xOWE4LjQ3LDguNDcsMCwwLDAsNi4zNCwyLjQsMTEuMjYsMTEuMjYsMCwwLDAsNS42NS0xLjQ1LDEwLjUzLDEwLjUzLDAsMCwwLDIuMDYtMS41NkMyOS40NCwzMC40NCwyOS4zNCwzMC4zMSwyOS4yNSwzMC4xN1pNMjMuNiwyNS44YTQuNTIsNC41MiwwLDAsMS0zLjQ1LDEuNDQsNC40OCw0LjQ4LDAsMCwxLTMuNDQtMS40NCw1LjYsNS42LDAsMCwxLTEuMzUtNCw1LjU5LDUuNTksMCwwLDEsMS4zNS00LDQuNDYsNC40NiwwLDAsMSwzLjQ0LTEuNDUsNC40OSw0LjQ5LDAsMCwxLDMuNDUsMS40NSw1LjYzLDUuNjMsMCwwLDEsMS4zNCw0QTUuNjQsNS42NCwwLDAsMSwyMy42LDI1LjhaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTYuNDksMTIuNjNWMzEuMjRxMCw2LjM1LTMuNDQsOS41MXQtOS45MiwzLjE3YTI1LjQyLDI1LjQyLDAsMCwxLTYuMy0uNzUsMTUsMTUsMCwwLDEtNS0yLjIzbDIuODktNS41OWExMC4xNywxMC4xNywwLDAsMCwzLjUxLDEuNzksMTQuMzcsMTQuMzcsMCwwLDAsNC4xOC42NUE2LjUzLDYuNTMsMCwwLDAsNDcsMzYuNGE1LjM3LDUuMzcsMCwwLDAsMS40Ny00LjExdi0uNzZjLTEuNTQsMS44LTMuNzksMi42OS02Ljc2LDIuNjlhMTEuNywxMS43LDAsMCwxLTUuNTktMS4zNkExMC4zNywxMC4zNywwLDAsMSwzMi4wOSwyOWExMC44OSwxMC44OSwwLDAsMS0xLjUxLTUuNzcsMTAuODYsMTAuODYsMCwwLDEsMS41MS01Ljc0LDEwLjQyLDEwLjQyLDAsMCwxLDQuMDctMy44NiwxMS43MSwxMS43MSwwLDAsMSw1LjU5LTEuMzdjMy4yNSwwLDUuNjMsMS4wNiw3LjE0LDMuMTVWMTIuNjNabS05LjMsMTMuOTVhNC40LDQuNCwwLDAsMCwxLjQtMy4zNiw0LjM0LDQuMzQsMCwwLDAtMS4zOC0zLjM0LDUuNjUsNS42NSwwLDAsMC03LjE2LDAsNC4zLDQuMywwLDAsMC0xLjQxLDMuMzQsNC4zNSw0LjM1LDAsMCwwLDEuNDMsMy4zNiw1LjA4LDUuMDgsMCwwLDAsMy41NywxLjNBNSw1LDAsMCwwLDQ3LjE5LDI2LjU4WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgzLjQzLDMyLjg5SDcxbC0yLDUuMDlhMSwxLDAsMCwxLS45My42Mkg2MS43M2ExLDEsMCwwLDEtLjkxLTEuNEw3Mi45MSw5LjhhMSwxLDAsMCwxLC45Mi0uNmg2Ljg5YTEsMSwwLDAsMSwuOTEuNkw5My43NywzNy4yYTEsMSwwLDAsMS0uOTIsMS40SDg2LjQxYTEsMSwwLDAsMS0uOTMtLjYyWk04MSwyNi43NmwtMy43OC05LjQxLTMuNzgsOS40MVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjAuNDQsOC40NFYzNy42YTEsMSwwLDAsMS0xLDFoLTUuNmExLDEsMCwwLDEtMS0xVjM2LjMzUTExMC42MiwzOSwxMDYuMTYsMzlhMTEuMjksMTEuMjksMCwwLDEtNS42Ny0xLjQ1LDEwLjU0LDEwLjU0LDAsMCwxLTQtNC4xNEExMi42MiwxMi42MiwwLDAsMSw5NSwyNy4xOCwxMi41MywxMi41MywwLDAsMSw5Ni40NCwyMWExMC4zNSwxMC4zNSwwLDAsMSw0LTQuMDksMTEuNDgsMTEuNDgsMCwwLDEsNS42Ny0xLjQzLDguMjQsOC4yNCwwLDAsMSw2LjMsMi4zNVY4LjQ0YTEsMSwwLDAsMSwxLTFoNkExLDEsMCwwLDEsMTIwLjQ0LDguNDRabS05LjE5LDIyLjc1YTUuNzEsNS43MSwwLDAsMCwxLjM0LTQsNS42LDUuNiwwLDAsMC0xLjMyLTMuOTUsNC40Nyw0LjQ3LDAsMCwwLTMuNDMtMS40Myw0LjUzLDQuNTMsMCwwLDAtMy40NCwxLjQzLDUuNTEsNS41MSwwLDAsMC0xLjM0LDMuOTUsNS42Nyw1LjY3LDAsMCwwLDEuMzQsNCw0Ljc3LDQuNzcsMCwwLDAsNi44NSwwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2MSwxOGMxLjY2LDEuNjgsMi41LDQuMjEsMi41LDcuNnYxMmExLDEsMCwwLDEtMSwxaC02YTEsMSwwLDAsMS0xLTFWMjYuODhhNS42Nyw1LjY3LDAsMCwwLS45LTMuNTMsMy4wOSwzLjA5LDAsMCwwLTIuNTUtMS4xMywzLjYyLDMuNjIsMCwwLDAtMi44OSwxLjI2LDUuNzEsNS43MSwwLDAsMC0xLjEsMy44MlYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYyNi44OGMwLTMuMTEtMS4xNC00LjY2LTMuNDQtNC42NmEzLjcsMy43LDAsMCwwLTIuOTQsMS4yNiw1LjcxLDUuNzEsMCwwLDAtMS4wOSwzLjgyVjM3LjZhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjE2Ljg0YTEsMSwwLDAsMSwxLTFoNS42YTEsMSwwLDAsMSwxLDF2MS4zOWE4LDgsMCwwLDEsMy0yLjA4LDEwLjIzLDEwLjIzLDAsMCwxLDMuOC0uNjksMTAsMTAsMCwwLDEsNC4yOS44OEE3LjI4LDcuMjgsMCwwLDEsMTQ2LjQyLDE5YTguODUsOC44NSwwLDAsMSwzLjQxLTIuNjUsMTAuOTMsMTAuOTMsMCwwLDEsNC40OS0uOTJBOSw5LDAsMCwxLDE2MSwxOFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNjguMTIsMTIuMWEzLjkxLDMuOTEsMCwwLDEtMS4zNC0yLjc5QTQuMTYsNC4xNiwwLDAsMSwxNjgsNi4xOWE1LDUsMCwwLDEsMy42Ny0xLjM2QTUuMjUsNS4yNSwwLDAsMSwxNzUuMTgsNmEzLjc1LDMuNzUsMCwwLDEsMS4zNCwzLDQuMSw0LjEsMCwwLDEtMS4zNCwzLjEzLDUuNjgsNS42OCwwLDAsMS03LjA2LDBabS41NCwzLjc0aDZhMSwxLDAsMCwxLDEsMVYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NEExLDEsMCwwLDEsMTY4LjY2LDE1Ljg0WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwMS41NSwxOHEyLjU5LDIuNTIsMi41OSw3LjZ2MTJhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjI2Ljg4cTAtNC42Ni0zLjc0LTQuNjZhNC4zLDQuMywwLDAsMC0zLjMsMS4zNCw1LjgzLDUuODMsMCwwLDAtMS4yNCw0djEwYTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NGExLDEsMCwwLDEsMS0xaDUuNjFhMSwxLDAsMCwxLDEsMXYxLjQ3YTkuMDUsOS4wNSwwLDAsMSwzLjE5LTIuMTIsMTAuNzgsMTAuNzgsMCwwLDEsNC0uNzNBOS4zNCw5LjM0LDAsMCwxLDIwMS41NSwxOFoiLz48L3N2Zz4=)  0 0 no-repeat',
-    backgroundPositionY: 'center',
-  },
-  item: {
-    display: 'flex',
-    justifyContent: 'center',
-    marginBottom: '15px',
-    fontSize: '1.2rem'
-  },
-  button: {
-    backgroundColor: loginBtnBg,
-    color: '#fff',
-    padding: '4px 8px',
-    width: '100%',
-    '&:hover': {
-      backgroundColor: darken(loginBtnBg, 0.1),
+    maxWidth: '450px',
+    '& .BasePage-item': {
+      display: 'flex',
+      justifyContent: 'center',
+      marginBottom: '15px',
+      fontSize: '1.2rem',
+      '& .BasePage-logo': {
+        width: '96px',
+        height: '40px',
+        background: 'url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDUgNTAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMzI2ODkzO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGdBZG1pbjwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTguOTQsNDEuNGEyLjQ4LDIuNDgsMCwwLDEtMi4yNy0zLjQ5TDY0LDIxLjI5VjZhNiw2LDAsMCwwLTYtNkg2QTYsNiwwLDAsMCwwLDZWNDRhNiw2LDAsMCwwLDYsNkg1OGE2LDYsMCwwLDAsNi02VjQxLjRaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjkuMjUsMzAuMTdhMTMuMTMsMTMuMTMsMCwwLDEtMS44Mi02LjkzLDEzLDEzLDAsMCwxLDEuODItNi44OCwxMi41LDEyLjUsMCwwLDEsMS40OC0xLjk1LDEwLjQ0LDEwLjQ0LDAsMCwwLTMuMjUtMi44OSwxMS4xNiwxMS4xNiwwLDAsMC01LjY1LTEuNDVxLTQuNDgsMC02LjcyLDIuNjRWMTAuNDRINy41MVY0MC4zNmExLDEsMCwwLDAsMSwxaDZhMSwxLDAsMCwwLDEtMVYzMS4xOWE4LjQ3LDguNDcsMCwwLDAsNi4zNCwyLjQsMTEuMjYsMTEuMjYsMCwwLDAsNS42NS0xLjQ1LDEwLjUzLDEwLjUzLDAsMCwwLDIuMDYtMS41NkMyOS40NCwzMC40NCwyOS4zNCwzMC4zMSwyOS4yNSwzMC4xN1pNMjMuNiwyNS44YTQuNTIsNC41MiwwLDAsMS0zLjQ1LDEuNDQsNC40OCw0LjQ4LDAsMCwxLTMuNDQtMS40NCw1LjYsNS42LDAsMCwxLTEuMzUtNCw1LjU5LDUuNTksMCwwLDEsMS4zNS00LDQuNDYsNC40NiwwLDAsMSwzLjQ0LTEuNDUsNC40OSw0LjQ5LDAsMCwxLDMuNDUsMS40NSw1LjYzLDUuNjMsMCwwLDEsMS4zNCw0QTUuNjQsNS42NCwwLDAsMSwyMy42LDI1LjhaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTYuNDksMTIuNjNWMzEuMjRxMCw2LjM1LTMuNDQsOS41MXQtOS45MiwzLjE3YTI1LjQyLDI1LjQyLDAsMCwxLTYuMy0uNzUsMTUsMTUsMCwwLDEtNS0yLjIzbDIuODktNS41OWExMC4xNywxMC4xNywwLDAsMCwzLjUxLDEuNzksMTQuMzcsMTQuMzcsMCwwLDAsNC4xOC42NUE2LjUzLDYuNTMsMCwwLDAsNDcsMzYuNGE1LjM3LDUuMzcsMCwwLDAsMS40Ny00LjExdi0uNzZjLTEuNTQsMS44LTMuNzksMi42OS02Ljc2LDIuNjlhMTEuNywxMS43LDAsMCwxLTUuNTktMS4zNkExMC4zNywxMC4zNywwLDAsMSwzMi4wOSwyOWExMC44OSwxMC44OSwwLDAsMS0xLjUxLTUuNzcsMTAuODYsMTAuODYsMCwwLDEsMS41MS01Ljc0LDEwLjQyLDEwLjQyLDAsMCwxLDQuMDctMy44NiwxMS43MSwxMS43MSwwLDAsMSw1LjU5LTEuMzdjMy4yNSwwLDUuNjMsMS4wNiw3LjE0LDMuMTVWMTIuNjNabS05LjMsMTMuOTVhNC40LDQuNCwwLDAsMCwxLjQtMy4zNiw0LjM0LDQuMzQsMCwwLDAtMS4zOC0zLjM0LDUuNjUsNS42NSwwLDAsMC03LjE2LDAsNC4zLDQuMywwLDAsMC0xLjQxLDMuMzQsNC4zNSw0LjM1LDAsMCwwLDEuNDMsMy4zNiw1LjA4LDUuMDgsMCwwLDAsMy41NywxLjNBNSw1LDAsMCwwLDQ3LjE5LDI2LjU4WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgzLjQzLDMyLjg5SDcxbC0yLDUuMDlhMSwxLDAsMCwxLS45My42Mkg2MS43M2ExLDEsMCwwLDEtLjkxLTEuNEw3Mi45MSw5LjhhMSwxLDAsMCwxLC45Mi0uNmg2Ljg5YTEsMSwwLDAsMSwuOTEuNkw5My43NywzNy4yYTEsMSwwLDAsMS0uOTIsMS40SDg2LjQxYTEsMSwwLDAsMS0uOTMtLjYyWk04MSwyNi43NmwtMy43OC05LjQxLTMuNzgsOS40MVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjAuNDQsOC40NFYzNy42YTEsMSwwLDAsMS0xLDFoLTUuNmExLDEsMCwwLDEtMS0xVjM2LjMzUTExMC42MiwzOSwxMDYuMTYsMzlhMTEuMjksMTEuMjksMCwwLDEtNS42Ny0xLjQ1LDEwLjU0LDEwLjU0LDAsMCwxLTQtNC4xNEExMi42MiwxMi42MiwwLDAsMSw5NSwyNy4xOCwxMi41MywxMi41MywwLDAsMSw5Ni40NCwyMWExMC4zNSwxMC4zNSwwLDAsMSw0LTQuMDksMTEuNDgsMTEuNDgsMCwwLDEsNS42Ny0xLjQzLDguMjQsOC4yNCwwLDAsMSw2LjMsMi4zNVY4LjQ0YTEsMSwwLDAsMSwxLTFoNkExLDEsMCwwLDEsMTIwLjQ0LDguNDRabS05LjE5LDIyLjc1YTUuNzEsNS43MSwwLDAsMCwxLjM0LTQsNS42LDUuNiwwLDAsMC0xLjMyLTMuOTUsNC40Nyw0LjQ3LDAsMCwwLTMuNDMtMS40Myw0LjUzLDQuNTMsMCwwLDAtMy40NCwxLjQzLDUuNTEsNS41MSwwLDAsMC0xLjM0LDMuOTUsNS42Nyw1LjY3LDAsMCwwLDEuMzQsNCw0Ljc3LDQuNzcsMCwwLDAsNi44NSwwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2MSwxOGMxLjY2LDEuNjgsMi41LDQuMjEsMi41LDcuNnYxMmExLDEsMCwwLDEtMSwxaC02YTEsMSwwLDAsMS0xLTFWMjYuODhhNS42Nyw1LjY3LDAsMCwwLS45LTMuNTMsMy4wOSwzLjA5LDAsMCwwLTIuNTUtMS4xMywzLjYyLDMuNjIsMCwwLDAtMi44OSwxLjI2LDUuNzEsNS43MSwwLDAsMC0xLjEsMy44MlYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYyNi44OGMwLTMuMTEtMS4xNC00LjY2LTMuNDQtNC42NmEzLjcsMy43LDAsMCwwLTIuOTQsMS4yNiw1LjcxLDUuNzEsMCwwLDAtMS4wOSwzLjgyVjM3LjZhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjE2Ljg0YTEsMSwwLDAsMSwxLTFoNS42YTEsMSwwLDAsMSwxLDF2MS4zOWE4LDgsMCwwLDEsMy0yLjA4LDEwLjIzLDEwLjIzLDAsMCwxLDMuOC0uNjksMTAsMTAsMCwwLDEsNC4yOS44OEE3LjI4LDcuMjgsMCwwLDEsMTQ2LjQyLDE5YTguODUsOC44NSwwLDAsMSwzLjQxLTIuNjUsMTAuOTMsMTAuOTMsMCwwLDEsNC40OS0uOTJBOSw5LDAsMCwxLDE2MSwxOFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNjguMTIsMTIuMWEzLjkxLDMuOTEsMCwwLDEtMS4zNC0yLjc5QTQuMTYsNC4xNiwwLDAsMSwxNjgsNi4xOWE1LDUsMCwwLDEsMy42Ny0xLjM2QTUuMjUsNS4yNSwwLDAsMSwxNzUuMTgsNmEzLjc1LDMuNzUsMCwwLDEsMS4zNCwzLDQuMSw0LjEsMCwwLDEtMS4zNCwzLjEzLDUuNjgsNS42OCwwLDAsMS03LjA2LDBabS41NCwzLjc0aDZhMSwxLDAsMCwxLDEsMVYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NEExLDEsMCwwLDEsMTY4LjY2LDE1Ljg0WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwMS41NSwxOHEyLjU5LDIuNTIsMi41OSw3LjZ2MTJhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjI2Ljg4cTAtNC42Ni0zLjc0LTQuNjZhNC4zLDQuMywwLDAsMC0zLjMsMS4zNCw1LjgzLDUuODMsMCwwLDAtMS4yNCw0djEwYTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NGExLDEsMCwwLDEsMS0xaDUuNjFhMSwxLDAsMCwxLDEsMXYxLjQ3YTkuMDUsOS4wNSwwLDAsMSwzLjE5LTIuMTIsMTAuNzgsMTAuNzgsMCwwLDEsNC0uNzNBOS4zNCw5LjM0LDAsMCwxLDIwMS41NSwxOFoiLz48L3N2Zz4=)  0 0 no-repeat',
+        backgroundPositionY: 'center',
+      },
     },
-    '&.Mui-disabled': {
-      opacity: 0.60,
-      color: '#fff'
-    },
-  }
+    '& .BasePage-button': {
+      backgroundColor: loginBtnBg,
+      color: '#fff',
+      padding: '4px 8px',
+      width: '100%',
+      '&:hover': {
+        backgroundColor: darken(loginBtnBg, 0.1),
+      },
+      '&.Mui-disabled': {
+        opacity: 0.60,
+        color: '#fff'
+      },
+    }
+  },
 }));
 
+const contentBg = '#2b709b';
+const loginBtnBg = '#038bba';
+
 export function SecurityButton({...props}) {
-  const classes = useStyles();
-  return <Button type="submit" className={classes.button} {...props} />;
+
+  return <Button type="submit" className='BasePage-button' {...props} />;
 }
 
 export default function BasePage({pageImage, title,  children, messages}) {
-  const classes = useStyles();
   const snackbar = useSnackbar();
-
   useEffect(()=>{
     messages?.forEach((m)=>{
       snackbar.enqueueSnackbar(null, {
@@ -79,18 +75,18 @@ export default function BasePage({pageImage, title,  children, messages}) {
     });
   }, [messages]);
   return (
-    <Box className={classes.root}>
+    <StyledBox >
       <Box display="flex" minWidth="80%" gap="40px" alignItems="center" padding="20px 80px">
         <Box flexGrow={1} height="80%" textAlign="center">
           {pageImage}
         </Box>
-        <Box className={classes.pageContent}>
-          <Box className={classes.item}><div className={classes.logo} /></Box>
-          <Box className={classes.item}>{title}</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>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
index 889bfc828..801032e80 100644
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/web/pgadmin/static/js/Theme/index.jsx
@@ -13,7 +13,6 @@
  */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { makeStyles } from '@mui/styles';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
@@ -30,6 +29,7 @@ import jsonEditorOverride from './overrides/jsoneditor.override';
 import pgadminOverride from './overrides/pgadmin.classes.override';
 import reactAspenOverride from './overrides/reactaspen.override';
 import usePreferences from '../../../preferences/static/js/store';
+import szhMenuOverride from './overrides/szhmenu.override';
 
 /* Common settings across all themes */
 let basicSettings = createTheme();
@@ -423,7 +423,8 @@ function getFinalTheme(baseTheme) {
           ...cmOverride(baseTheme),
           ...jsonEditorOverride(baseTheme),
           ...pgadminOverride(baseTheme),
-          ...reactAspenOverride(baseTheme)
+          ...reactAspenOverride(baseTheme),
+          ...szhMenuOverride(baseTheme)
         },
       },
       MuiOutlinedInput:  {
@@ -805,83 +806,3 @@ export default function Theme({children}) {
 Theme.propTypes = {
   children: CustomPropTypes.children,
 };
-
-export const commonTableStyles = makeStyles((theme)=>({
-  table: {
-    borderSpacing: 0,
-    width: '100%',
-    overflow: 'auto',
-    backgroundColor: theme.otherVars.tableBg,
-    border: '1px solid '+theme.otherVars.borderColor,
-    '& tbody td, & thead th': {
-      margin: 0,
-      padding: theme.spacing(0.5),
-      border: '1px solid '+theme.otherVars.borderColor,
-      borderBottom: 'none',
-      position: 'relative',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      userSelect: 'text',
-      maxWidth: '250px',
-      '&:first-of-type':{
-        borderLeft: 'none',
-      },
-    },
-    '& thead tr:first-of-type th': {
-      borderTop: 'none',
-    },
-    '& tbody tr:last-of-type': {
-      '&:hover td': {
-        borderBottomColor: theme.palette.primary.main,
-      },
-      '& td': {
-        borderBottomColor: theme.otherVars.borderColor,
-      }
-    },
-    '& th': {
-      fontWeight: theme.typography.fontWeightBold,
-      padding: theme.spacing(1, 0.5),
-      textAlign: 'left',
-    },
-    '& tbody > tr': {
-      '&:hover': {
-        backgroundColor: theme.palette.primary.light,
-        '& td': {
-          borderBottom: '1px solid '+theme.palette.primary.main,
-          borderTop: '1px solid '+theme.palette.primary.main,
-        },
-        '&:last-of-type td': {
-          borderBottomColor: theme.palette.primary.main,
-        },
-      },
-    },
-  },
-  noBorder: {
-    border: 0,
-  },
-  borderBottom: {
-    '& tbody tr:last-of-type td': {
-      borderBottom: '1px solid '+theme.otherVars.borderColor,
-    },
-  },
-  wrapTd: {
-    '& tbody td': {
-      whiteSpace: 'pre-wrap',
-    }
-  },
-  noHover: {
-    '& tbody > tr': {
-      '&:hover': {
-        backgroundColor: theme.otherVars.tableBg,
-        '& td': {
-          borderBottomColor: theme.otherVars.borderColor,
-          borderTopColor: theme.otherVars.borderColor,
-        },
-        '&:last-of-type td': {
-          borderBottomColor: theme.otherVars.borderColor,
-        },
-      },
-    },
-  }
-}));
diff --git a/web/pgadmin/static/js/Theme/overrides/szhmenu.override.js b/web/pgadmin/static/js/Theme/overrides/szhmenu.override.js
new file mode 100644
index 000000000..b64d32262
--- /dev/null
+++ b/web/pgadmin/static/js/Theme/overrides/szhmenu.override.js
@@ -0,0 +1,38 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+export default function szhMenuOverride(theme) {
+  return {
+    '& .szh-menu': {
+      padding: '4px 0px',
+      zIndex: 1005,
+      backgroundColor: theme.palette.background.default,
+      color: theme.palette.text.primary,
+      border: `1px solid ${theme.otherVars.borderColor}`
+    },
+    '& .szh-menu__divider': {
+      margin: 0,
+      background: theme.otherVars.borderColor,
+    },
+    '& .szh-menu__item': {
+      display: 'flex',
+      padding: '3px 12px',
+      '&:after': {
+        right: '0.75rem',
+      },
+      '&.szh-menu__item--active, &.szh-menu__item--hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+      },
+      '&.szh-menu__item--disabled':{
+        color: theme.palette.text.muted,
+      }
+    }
+  };
+}
diff --git a/web/pgadmin/static/js/components/Buttons.jsx b/web/pgadmin/static/js/components/Buttons.jsx
index 1ed2a0f14..ff5a4ceed 100644
--- a/web/pgadmin/static/js/components/Buttons.jsx
+++ b/web/pgadmin/static/js/components/Buttons.jsx
@@ -8,15 +8,15 @@
 //////////////////////////////////////////////////////////////
 
 import { Button, ButtonGroup, Tooltip } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import React, { forwardRef } from 'react';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 import ShortcutTitle from './ShortcutTitle';
+import { styled } from '@mui/material/styles';
 
-const useStyles = makeStyles((theme)=>({
-  primaryButton: {
+
+const StyledButton = styled(Button)(({theme}) => ({
+  '&.Buttons-primaryButton': {
     border: '1px solid '+theme.palette.primary.main,
     '&.Mui-disabled': {
       color: [theme.palette.primary.contrastText,'!important'],
@@ -26,8 +26,17 @@ const useStyles = makeStyles((theme)=>({
       backgroundColor: theme.palette.primary.hoverMain,
       borderColor: theme.palette.primary.hoverBorderColor,
     },
+    '&.Buttons-noBorderPrimary': {
+      color: theme.palette.primary.contrastText,
+      backgroundColor: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.hoverMain,
+        borderColor: theme.palette.primary.hoverBorderColor,
+      },
+    }
   },
-  defaultButton: {
+  '&.Buttons-defaultButton': {
     backgroundColor: theme.palette.default.main,
     color: theme.palette.default.contrastText,
     border: '1px solid '+theme.palette.default.borderColor,
@@ -40,15 +49,23 @@ const useStyles = makeStyles((theme)=>({
       backgroundColor: theme.palette.default.hoverMain,
       color: theme.palette.default.hoverContrastText,
       borderColor: theme.palette.default.hoverBorderColor,
-    }
-  },
-  iconButton: {
-    minWidth: 0,
-    padding: '2px 4px',
-    '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
+    },
+    '&.Buttons-noBorder': {
+      border: 0,
+      backgroundColor: 'transparent',
+      color: theme.custom.icon.contrastText,
+      '&:hover': {
+        border: 0,
+        color: theme.custom.icon.contrastText,
+        backgroundColor: 'inherit',
+        filter: 'brightness(85%)',
+      },
+      '&.Mui-disabled': {
+        border: 0,
+      },
     },
   },
-  iconButtonDefault: {
+  '&.Buttons-iconButtonDefault': {
     borderColor: theme.custom.icon.borderColor,
     color: theme.custom.icon.contrastText,
     backgroundColor: theme.custom.icon.main,
@@ -72,7 +89,13 @@ const useStyles = makeStyles((theme)=>({
       borderColor: theme.custom.icon.borderColor,
     }
   },
-  splitButton: {
+  '&.Buttons-iconButton': {
+    minWidth: 0,
+    padding: '2px 4px',
+    '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
+    },
+  },
+  '&.Buttons-splitButton': {
     '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
       width: '20px',
       minWidth: 0,
@@ -81,7 +104,7 @@ const useStyles = makeStyles((theme)=>({
       }
     }
   },
-  xsButton: {
+  '&.Buttons-xsButton': {
     padding: '2px 1px',
     height: '24px !important',
     minWidth: '24px',
@@ -92,44 +115,22 @@ const useStyles = makeStyles((theme)=>({
       minWidth: '30px',
     }
   },
-  noBorder: {
-    border: 0,
-    backgroundColor: 'transparent',
-    color: theme.custom.icon.contrastText,
-    '&:hover': {
-      border: 0,
-      color: theme.custom.icon.contrastText,
-      backgroundColor: 'inherit',
-      filter: 'brightness(85%)',
-    },
-    '&.Mui-disabled': {
-      border: 0,
-    },
-  },
-  noBorderPrimary: {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
-    '&:hover': {
-      color: theme.palette.primary.contrastText,
-      backgroundColor: theme.palette.primary.hoverMain,
-      borderColor: theme.palette.primary.hoverBorderColor,
-    },
-  }
+
 }));
 
+
 /* pgAdmin primary button */
 export const PrimaryButton = forwardRef((props, ref)=>{
   let {children, className, size, noBorder, ...otherProps} = props;
-  const classes = useStyles();
-  let allClassName = [classes.primaryButton, className];
+  let allClassName = ['Buttons-primaryButton', className];
   if(size == 'xs') {
     size = undefined;
-    allClassName.push(classes.xsButton);
+    allClassName.push('Buttons-xsButton');
   }
-  noBorder && allClassName.push(...[classes.noBorder, classes.noBorderPrimary]);
+  noBorder && allClassName.push(...['Buttons-noBorder', 'Buttons-noBorderPrimary']);
   const dataLabel = typeof(children) == 'string' ? children : undefined;
   return (
-    <Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</Button>
+    <StyledButton ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</StyledButton>
   );
 });
 PrimaryButton.displayName = 'PrimaryButton';
@@ -143,16 +144,15 @@ PrimaryButton.propTypes = {
 /* pgAdmin default button */
 export const DefaultButton = forwardRef((props, ref)=>{
   let {children, className, size, noBorder, ...otherProps} = props;
-  const classes = useStyles();
-  let allClassName = [classes.defaultButton, className];
+  let allClassName = ['Buttons-defaultButton', className];
   if(size == 'xs') {
     size = undefined;
-    allClassName.push(classes.xsButton);
+    allClassName.push('Buttons-xsButton');
   }
-  noBorder && allClassName.push(classes.noBorder);
+  noBorder && allClassName.push('Buttons-noBorder');
   const dataLabel = typeof(children) == 'string' ? children : undefined;
   return (
-    <Button variant="outlined" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} color="default" {...otherProps}>{children}</Button>
+    <StyledButton variant="outlined" ref={ref} size={size} className={allClassName.join(' ')} data-label={dataLabel} color="default" {...otherProps}>{children}</StyledButton>
   );
 });
 DefaultButton.displayName = 'DefaultButton';
@@ -166,8 +166,6 @@ DefaultButton.propTypes = {
 
 /* pgAdmin Icon button, takes Icon component as input */
 export const PgIconButton = forwardRef(({icon, title, shortcut, className, splitButton, style, color, accesskey, ...props}, ref)=>{
-  const classes = useStyles();
-
   let shortcutTitle = null;
   if(accesskey || shortcut) {
     shortcutTitle = <ShortcutTitle title={title} accesskey={accesskey} shortcut={shortcut}/>;
@@ -178,7 +176,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     if(color == 'primary') {
       return (
         <PrimaryButton ref={ref} style={style}
-          className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
+          className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
           {icon}
         </PrimaryButton>
@@ -186,7 +184,7 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     } else {
       return (
         <DefaultButton ref={ref} style={style}
-          className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
+          className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
           {icon}
         </DefaultButton>
@@ -196,17 +194,18 @@ export const PgIconButton = forwardRef(({icon, title, shortcut, className, split
     return (
       <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
         <PrimaryButton ref={ref} style={style}
-          className={clsx(classes.iconButton, (splitButton ? classes.splitButton : ''), className)}
+          className={['Buttons-iconButton', (splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
           {icon}
         </PrimaryButton>
       </Tooltip>
+
     );
   } else {
     return (
       <Tooltip title={shortcutTitle || title || ''} aria-label={title || ''}>
         <DefaultButton ref={ref} style={style}
-          className={clsx(classes.iconButton, classes.iconButtonDefault, (splitButton ? classes.splitButton : ''), className)}
+          className={['Buttons-iconButton', 'Buttons-iconButtonDefault',(splitButton ? 'Buttons-splitButton' : ''), className].join(' ')}
           accessKey={accesskey} data-label={title || ''} {...props}>
           {icon}
         </DefaultButton>
diff --git a/web/pgadmin/static/js/components/CheckBoxTree.jsx b/web/pgadmin/static/js/components/CheckBoxTree.jsx
index ce9860b5f..436bf0403 100644
--- a/web/pgadmin/static/js/components/CheckBoxTree.jsx
+++ b/web/pgadmin/static/js/components/CheckBoxTree.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import CheckboxTree from 'react-checkbox-tree';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
@@ -8,37 +8,33 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme) =>
-  ({
-    treeRoot: {
-      '& .rct-collapse, .rct-checkbox': {
-        padding: 0
-      },
-      '& .rct-node-leaf':{
-        padding: '0 0 0 10px'
-      },
-      '& .react-checkbox-tree': {
-        height: '97%',
-        fontSize: '0.815rem',
-        overflow: 'auto',
-        ...theme.mixins.panelBorder
-      },
-      height: '100%'
-    },
-    unchecked: {
-      fill: theme.otherVars.borderColor
-    },
-    checked: {
-      fill: theme.palette.primary.main
-    }
-  })
-);
+
+const StyledDiv = styled('div')(({theme}) => ({
+  height: '100%',
+  '& .rct-collapse, .rct-checkbox': {
+    padding: 0
+  },
+  '& .rct-node-leaf':{
+    padding: '0 0 0 10px'
+  },
+  '& .react-checkbox-tree': {
+    height: '97%',
+    fontSize: '0.815rem',
+    overflow: 'auto',
+    ...theme.mixins.panelBorder
+  },
+  '& .CheckBoxTree-unchecked': {
+    fill: theme.otherVars.borderColor
+  },
+  '& .CheckBoxTree-checked': {
+    fill: theme.palette.primary.main
+  }
+}));
+
 export default function CheckBoxTree({treeData, ...props}) {
   const [checked, setChecked] = React.useState([]);
   const [expanded, setExpanded] = React.useState([]);
 
-  const classes = useStyles();
-
   React.useEffect(() => {
     if (props.getSelectedServers) {
       props.getSelectedServers(checked);
@@ -46,7 +42,7 @@ export default function CheckBoxTree({treeData, ...props}) {
   }, [checked]);
 
   return (
-    <div className={classes.treeRoot}>
+    <StyledDiv>
       <CheckboxTree
         nodes={treeData}
         checked={checked}
@@ -55,15 +51,15 @@ export default function CheckBoxTree({treeData, ...props}) {
         onExpand={expandedVal => setExpanded(expandedVal)}
         showNodeIcon={false}
         icons={{
-          check: <CheckBoxIcon className={classes.checked}/>,
-          uncheck: <CheckBoxOutlineBlankIcon className={classes.unchecked}/>,
-          halfCheck: <IndeterminateCheckBoxIcon className={classes.checked}/>,
+          check: <CheckBoxIcon className='CheckBoxTree-checked'/>,
+          uncheck: <CheckBoxOutlineBlankIcon className='CheckBoxTree-unchecked'/>,
+          halfCheck: <IndeterminateCheckBoxIcon className='CheckBoxTree-checked'/>,
           expandClose: <ChevronRightIcon />,
           expandOpen: <ExpandMoreIcon />,
           leaf: <ChevronRightIcon />
         }}
       />
-    </div>
+    </StyledDiv>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
index 8b5280409..1ace1fbff 100644
--- a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
+++ b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
@@ -1,28 +1,26 @@
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    color: theme.palette.text.primary,
-    margin: '24px auto 12px',
-    fontSize: '0.8rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-  },
+const StyledBox = styled(Box)(({theme}) => ({
+  color: theme.palette.text.primary,
+  margin: '24px auto 12px',
+  fontSize: '0.8rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
 }));
 
 export default function EmptyPanelMessage({text, style}) {
-  const classes = useStyles();
+
   return (
-    <Box className={classes.root} style={style}>
+    <StyledBox style={style}>
       <InfoRoundedIcon style={{height: '1.2rem'}}/>
       <span style={{marginLeft: '4px'}}>{text}</span>
-    </Box>
+    </StyledBox>
   );
 }
 EmptyPanelMessage.propTypes = {
diff --git a/web/pgadmin/static/js/components/FieldSet.jsx b/web/pgadmin/static/js/components/FieldSet.jsx
index 14bec09d2..d1c0f8502 100644
--- a/web/pgadmin/static/js/components/FieldSet.jsx
+++ b/web/pgadmin/static/js/components/FieldSet.jsx
@@ -1,17 +1,14 @@
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
-const useStyles = makeStyles((theme)=>({
-  fieldset: {
-    padding: theme.spacing(0.5),
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: 'inherit',
-    border: '1px solid ' + theme.otherVars.borderColor,
-  },
-  legend: {
+const StyledFieldset = styled('fieldset')(({theme}) => ({
+  padding: theme.spacing(0.5),
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: 'inherit',
+  border: '1px solid ' + theme.otherVars.borderColor,
+  '& .FieldSet-legend': {
     width: 'unset',
     fontSize: 'inherit',
     fontWeight: 'bold',
@@ -19,12 +16,12 @@ const useStyles = makeStyles((theme)=>({
 }));
 
 export default function FieldSet({title='', className, children}) {
-  const classes = useStyles();
+
   return (
-    <fieldset className={clsx(classes.fieldset, className)}>
-      <legend className={classes.legend}>{title}</legend>
+    <StyledFieldset className={className}>
+      <legend className='FieldSet-legend'>{title}</legend>
       {children}
-    </fieldset>
+    </StyledFieldset>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 02066d726..4f22a587e 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -9,7 +9,7 @@
 /* Common form components used in pgAdmin */
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import {
   Box, FormControl, OutlinedInput, FormHelperText, ToggleButton, ToggleButtonGroup,
   Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
@@ -24,7 +24,6 @@ import DescriptionIcon from '@mui/icons-material/Description';
 import AssignmentTurnedIn from '@mui/icons-material/AssignmentTurnedIn';
 import Select, { components as RSComponents } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import HTMLReactParse from 'html-react-parser';
 
@@ -46,52 +45,40 @@ import PgTreeView from '../PgTreeView';
 import Loader from 'sources/components/Loader';
 
 
-const useStyles = makeStyles((theme) => ({
-  formRoot: {
-    padding: '1rem'
+const Root = styled('div')(({theme}) => ({
+  '& .Form-optionIcon': {
+    ...theme.mixins.nodeIcon,
   },
-  img: {
-    maxWidth: '100%',
-    height: 'auto'
-  },
-  info: {
-    color: theme.palette.info.main,
-    marginLeft: '0.25rem',
-    fontSize: '1rem',
-  },
-  formLabel: {
-    margin: theme.spacing(0.75, 0.75, 0.75, 0.75),
-    display: 'flex',
-    wordBreak: 'break-word'
-  },
-  formLabelError: {
-    color: theme.palette.error.main,
-  },
-  sql: {
+  // '& .Form-label': {
+  //   margin: theme.spacing(0.75, 0.75, 0.75, 0.75),
+  //   display: 'flex',
+  //   wordBreak: 'break-word'
+  // },
+  // '& .Form-labelError': {
+  //   color: theme.palette.error.main,
+  // },
+  '& .Form-sql': {
     border: '1px solid ' + theme.otherVars.inputBorderColor,
     borderRadius: theme.shape.borderRadius,
     height: '100%',
   },
-  optionIcon: {
-    ...theme.mixins.nodeIcon,
+  '& .Form-readOnlySwitch': {
+    opacity: 0.75,
+    '& .MuiSwitch-track': {
+      opacity: theme.palette.action.disabledOpacity,
+    }
   },
-  colorBtn: {
+  '& .Form-colorBtn': {
     height: theme.spacing(3.5),
     minHeight: theme.spacing(3.5),
     width: theme.spacing(3.5),
     minWidth: theme.spacing(3.5),
   },
-  noteRoot: {
+  '& .Form-noteRoot': {
     display: 'flex',
     backgroundColor: theme.otherVars.borderColor,
     padding: theme.spacing(1),
   },
-  readOnlySwitch: {
-    opacity: 0.75,
-    '& .MuiSwitch-track': {
-      opacity: theme.palette.action.disabledOpacity,
-    }
-  }
 }));
 
 
@@ -125,36 +112,47 @@ FormIcon.propTypes = {
   close: PropTypes.bool,
 };
 
+const StyledGrid = styled(Grid)(({theme}) => ({
+  '& .Form-label': {
+    margin: theme.spacing(0.75, 0.75, 0.75, 0.75),
+    display: 'flex',
+    wordBreak: 'break-word'
+  },
+  '& .Form-labelError': {
+    color: theme.palette.error.main,
+  },
+}));
+
 /* Wrapper on any form component to add label, error indicator and help message */
 export function FormInput({ children, error, className, label, helpMessage, required, testcid, lid, withContainer=true, labelGridBasis=3, controlGridBasis=9, labelTooltip='' }) {
-  const classes = useStyles();
+
   const cid = testcid || _.uniqueId('c');
   const helpid = `h${cid}`;
   if(!withContainer) {
     return (
-      <>
-        <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
-          <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
+      (<>
+        <StyledGrid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
+          <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={'Form-label ' + (error ? 'Form-labelError' : null)} required={required}>
             {label}
             <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
           </InputLabel>
-        </Grid>
-        <Grid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
+        </StyledGrid>
+        <StyledGrid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
           <FormControl error={Boolean(error)} fullWidth>
             {React.cloneElement(children, { cid, helpid })}
           </FormControl>
           <FormHelperText id={helpid} variant="outlined">{HTMLReactParse(helpMessage || '')}</FormHelperText>
-        </Grid>
-      </>
+        </StyledGrid>
+      </>)
     );
   }
 
-  let labelComponent = <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
+  let labelComponent = <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={'Form-label ' + (error ? 'Form-labelError' : null)} required={required}>
     {label}
     <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
   </InputLabel>;
   return (
-    <Grid container spacing={0} className={className} data-testid="form-input">
+    <StyledGrid container spacing={0} className={className} data-testid="form-input">
       <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
         {
           labelTooltip ?
@@ -169,7 +167,7 @@ export function FormInput({ children, error, className, label, helpMessage, requ
         </FormControl>
         <FormHelperText id={helpid} variant="outlined">{HTMLReactParse(helpMessage || '')}</FormHelperText>
       </Grid>
-    </Grid>
+    </StyledGrid>
   );
 }
 FormInput.propTypes = {
@@ -188,24 +186,26 @@ FormInput.propTypes = {
 };
 
 export function InputSQL({ value, options, onChange, className, controlProps, inputRef, ...props }) {
-  const classes = useStyles();
+
   const editor = useRef();
 
   return (
-    <CodeMirror
-      currEditor={(obj) => {
-        editor.current = obj;
-        inputRef?.(obj);
-      }}
-      value={value || ''}
-      options={{
-        ...options,
-      }}
-      className={clsx(classes.sql, className)}
-      onChange={onChange}
-      {...controlProps}
-      {...props}
-    />
+    <Root style={{height: '100%'}}>
+      <CodeMirror
+        currEditor={(obj) => {
+          editor.current = obj;
+          inputRef?.(obj);
+        }}
+        value={value || ''}
+        options={{
+          ...options,
+        }}
+        className={'Form-sql ' + className}
+        onChange={onChange}
+        {...controlProps}
+        {...props}
+      />
+    </Root>
   );
 }
 InputSQL.propTypes = {
@@ -510,7 +510,7 @@ FormInputFileSelect.propTypes = {
 };
 
 export function InputSwitch({ cid, helpid, value, onChange, readonly, controlProps, ...props }) {
-  const classes = useStyles();
+
   return (
     <Switch color="primary"
       checked={Boolean(value)}
@@ -523,7 +523,7 @@ export function InputSwitch({ cid, helpid, value, onChange, readonly, controlPro
       }}
       {...controlProps}
       {...props}
-      className={(readonly || props.disabled) ? classes.readOnlySwitch : null}
+      className={(readonly || props.disabled) ? 'Form-readOnlySwitch' : null}
     />
   );
 }
@@ -605,7 +605,6 @@ FormInputCheckbox.propTypes = {
 };
 
 export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
-  const classes = useStyles();
   controlProps = controlProps || {};
   return (
     <FormControlLabel
@@ -624,11 +623,10 @@ export function InputRadio({ helpid, value, onChange, controlProps, readonly, la
           disableRipple
           {...props}
         />
-
       }
       label={controlProps.label}
       labelPlacement={labelPlacement}
-      className={(readonly || props.disabled) ? classes.readOnlySwitch : null}
+      className={(readonly || props.disabled) ? 'Form-readOnlySwitch' : null}
     />
   );
 }
@@ -811,13 +809,13 @@ const customReactSelectStyles = (theme, readonly) => ({
 });
 
 function OptionView({ image, imageUrl, label }) {
-  const classes = useStyles();
+
   return (
-    <>
-      {image && <span className={clsx(classes.optionIcon, image)}></span>}
+    <Root>
+      {image && <span className={'Form-optionIcon ' + image}></span>}
       {imageUrl && <img style={{height: '20px', marginRight: '4px'}} src={imageUrl} />}
       <span>{label}</span>
-    </>
+    </Root>
   );
 }
 OptionView.propTypes = {
@@ -1063,11 +1061,9 @@ FormInputSelect.propTypes = {
 
 const ColorButton = withColorPicker(PgIconButton);
 export function InputColor({ value, controlProps, disabled, onChange, currObj }) {
-  const classes = useStyles();
-
   let btnStyles = { backgroundColor: value };
   return (
-    <ColorButton title={gettext('Select the color')} className={classes.colorBtn} style={btnStyles} disabled={disabled}
+    <ColorButton title={gettext('Select the color')} className='Form-colorBtn' style={btnStyles} disabled={disabled}
       icon={(_.isUndefined(value) || _.isNull(value) || value === '') && <CloseIcon data-label="CloseIcon" />} options={{
         ...controlProps,
         disabled: disabled
@@ -1115,15 +1111,17 @@ PlainString.propTypes = {
 };
 
 export function FormNote({ text, className, controlProps }) {
-  const classes = useStyles();
+
   /* If raw, then remove the styles and icon */
   return (
-    <Box className={className}>
-      <Paper elevation={0} className={controlProps?.raw ? '' : classes.noteRoot}>
-        {!controlProps?.raw && <Box paddingRight="0.25rem"><DescriptionIcon fontSize="small" /></Box>}
-        <Box>{HTMLReactParse(text || '')}</Box>
-      </Paper>
-    </Box>
+    <Root>
+      <Box className={className}>
+        <Paper elevation={0} className={controlProps?.raw ? '' : 'Form-noteRoot'}>
+          {!controlProps?.raw && <Box paddingRight="0.25rem"><DescriptionIcon fontSize="small" /></Box>}
+          <Box>{HTMLReactParse(text || '')}</Box>
+        </Paper>
+      </Box>
+    </Root>
   );
 }
 FormNote.propTypes = {
@@ -1132,76 +1130,25 @@ FormNote.propTypes = {
   controlProps: PropTypes.object,
 };
 
-const useStylesFormFooter = makeStyles((theme) => ({
-  root: {
-    padding: theme.spacing(0.5),
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    zIndex: 10,
-  },
-  container: {
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(0.5),
-    display: 'flex',
-    alignItems: 'center',
-    minHeight: '36px',
-  },
-  containerSuccess: {
-    borderColor: theme.palette.success.main,
-    backgroundColor: theme.palette.success.light,
-  },
-  iconSuccess: {
-    color: theme.palette.success.main,
-  },
-  containerError: {
-    borderColor: theme.palette.error.main,
-    backgroundColor: theme.palette.error.light,
-  },
-  iconError: {
-    color: theme.palette.error.main,
-  },
-  containerInfo: {
-    borderColor: theme.palette.primary.main,
-    backgroundColor: theme.palette.primary.light,
-  },
-  iconInfo: {
-    color: theme.palette.primary.main,
-  },
-  containerWarning: {
-    borderColor: theme.palette.warning.main,
-    backgroundColor: theme.palette.warning.light,
-  },
-  iconWarning: {
-    color: theme.palette.warning.main,
-  },
-  message: {
-    color: theme.palette.text.primary,
-    marginLeft: theme.spacing(0.5),
-  },
-  messageCenter: {
-    color: theme.palette.text.primary,
-    margin: 'auto',
-  },
-  closeButton: {
-    marginLeft: 'auto',
-  },
+
+const StyledBox = styled(Box)(({theme}) => ({
+  padding: theme.spacing(0.5),
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 10,
 }));
 
 /* The form footer used mostly for showing error */
 export function FormFooterMessage({style, ...props}) {
-  const classes = useStylesFormFooter();
-
   if (!props.message) {
     return <></>;
   }
   return (
-    <Box className={classes.root} style={style}>
+    <StyledBox style={style}>
       <NotifierMessage {...props}></NotifierMessage>
-    </Box>
+    </StyledBox>
   );
 }
 
@@ -1210,18 +1157,17 @@ FormFooterMessage.propTypes = {
   message: PropTypes.string,
 };
 
-const useStylesKeyboardShortcut = makeStyles(() => ({
-  customRow: {
+const StyledFormInput = styled(FormInput)(() => ({
+  '&.FormInput-customRow': {
     paddingTop: 5
   }
 }));
 
 export function FormInputKeyboardShortcut({ hasError, label, className, helpMessage, onChange, labelTooltip, ...props }) {
-  const classes = useStylesKeyboardShortcut();
   return (
-    <FormInput label={label} error={hasError} className={clsx(classes.customRow, className)} helpMessage={helpMessage} labelTooltip={labelTooltip}>
+    <StyledFormInput label={label} error={hasError} className={'FormInput-customRow ' + className} helpMessage={helpMessage} labelTooltip={labelTooltip}>
       <KeyboardShortcuts onChange={onChange} {...props} />
-    </FormInput>
+    </StyledFormInput>
 
   );
 }
@@ -1276,20 +1222,66 @@ FormInputSelectThemes.propTypes = {
   labelTooltip: PropTypes.string
 };
 
+const StyledNotifierMessageBox = styled(Box)(({theme}) => ({
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderRadius: theme.shape.borderRadius,
+  padding: theme.spacing(0.5),
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: '36px',
+  '&.FormFooter-containerError': {
+    borderColor: theme.palette.error.main,
+    backgroundColor: theme.palette.error.light,
+    '& .FormFooter-iconError': {
+      color: theme.palette.error.main,
+    },
+  },
+  '&.FormFooter-containerSuccess': {
+    borderColor: theme.palette.success.main,
+    backgroundColor: theme.palette.success.light,
+    '& .FormFooter-iconSuccess': {
+      color: theme.palette.success.main,
+    },
+  },
+  '&.FormFooter-containerInfo': {
+    borderColor: theme.palette.primary.main,
+    backgroundColor: theme.palette.primary.light,
+    '& .FormFooter-iconInfo': {
+      color: theme.palette.primary.main,
+    },
+  },
+  '&.FormFooter-containerWarning': {
+    borderColor: theme.palette.warning.main,
+    backgroundColor: theme.palette.warning.light,
+    '& .FormFooter-iconWarning': {
+      color: theme.palette.warning.main,
+    },
+  },
+  '& .FormFooter-message': {
+    color: theme.palette.text.primary,
+    marginLeft: theme.spacing(0.5),
+  },
+  '& .FormFooter-messageCenter': {
+    color: theme.palette.text.primary,
+    margin: 'auto',
+  },
+  '& .FormFooter-closeButton': {
+    marginLeft: 'auto',
+  },
+}));
 
 export function NotifierMessage({
   type = MESSAGE_TYPE.SUCCESS, message, style, closable = true, showIcon=true, textCenter=false,
   onClose = () => {/*This is intentional (SonarQube)*/ }}) {
-  const classes = useStylesFormFooter();
-
   return (
-    <Box className={clsx(classes.container, classes[`container${type}`])} style={style} data-test="notifier-message">
-      {showIcon && <FormIcon type={type} className={classes[`icon${type}`]} />}
-      <Box className={textCenter ? classes.messageCenter : classes.message}>{HTMLReactParse(message || '')}</Box>
-      {closable && <IconButton title={gettext('Close Message')} className={clsx(classes.closeButton, classes[`icon${type}`])} onClick={onClose}>
+    <StyledNotifierMessageBox className={`FormFooter-container${type}`} style={style} data-test="notifier-message">
+      {showIcon && <FormIcon type={type} className={`FormFooter-icon${type}`} />}
+      <Box className={textCenter ? 'FormFooter-messageCenter' : 'FormFooter-message'}>{HTMLReactParse(message || '')}</Box>
+      {closable && <IconButton title={gettext('Close Message')} className={'FormFooter-closeButton ' + `FormFooter-icon${type}`} onClick={onClose}>
         <FormIcon close={true} />
       </IconButton>}
-    </Box>
+    </StyledNotifierMessageBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
index f5c543cbd..4b978c0cb 100644
--- a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
+++ b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
@@ -112,4 +112,4 @@ KeyboardShortcuts.propTypes = {
   onChange: PropTypes.func,
   fields: PropTypes.array,
   name: PropTypes.string,
-};
+};
\ No newline at end of file
diff --git a/web/pgadmin/static/js/components/Loader.jsx b/web/pgadmin/static/js/components/Loader.jsx
index b39d4f9a2..7e1c94d45 100644
--- a/web/pgadmin/static/js/components/Loader.jsx
+++ b/web/pgadmin/static/js/components/Loader.jsx
@@ -8,52 +8,50 @@
 //////////////////////////////////////////////////////////////
 
 import { CircularProgress, Box, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    backgroundColor: theme.otherVars.loader.backgroundColor,
-    color: theme.otherVars.loader.color,
-    zIndex: 1000,
-    display: 'flex',
-  },
-  loaderRoot: {
+const StyledBox = styled(Box)(({theme}) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: theme.otherVars.loader.backgroundColor,
+  color: theme.otherVars.loader.color,
+  zIndex: 1000,
+  display: 'flex',
+  '& .Loader-loaderBody': {
     color: theme.otherVars.loader.color,
     display: 'flex',
     alignItems: 'center',
     margin: 'auto',
     '.MuiTypography-root': {
       marginLeft: theme.spacing(1),
+    },
+    '& .Loader-icon': {
+      color: theme.otherVars.loader.color,
+    },
+    '& .Loader-message': {
+      marginLeft: '0.5rem',
+      fontSize: '16px',
     }
   },
-  loader: {
-    color: theme.otherVars.loader.color,
-  },
-  message: {
-    marginLeft: '0.5rem',
-    fontSize: '16px',
-  }
 }));
 
 export default function Loader({message, style, autoEllipsis=false, ...props}) {
-  const classes = useStyles();
+
   if(!message) {
     return <></>;
   }
   return (
-    <Box className={classes.root} style={style} data-label="loader" {...props}>
-      <Box className={classes.loaderRoot}>
-        <CircularProgress className={classes.loader} />
-        <Typography className={classes.message}>{message}{autoEllipsis ? '...':''}</Typography>
+    <StyledBox style={style} data-label="loader" {...props}>
+      <Box className='Loader-loaderBody'>
+        <CircularProgress className='Loader-icon' />
+        <Typography className='Loader-message'>{message}{autoEllipsis ? '...':''}</Typography>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/Menu.jsx b/web/pgadmin/static/js/components/Menu.jsx
index 00e5dabf0..e29634a95 100644
--- a/web/pgadmin/static/js/components/Menu.jsx
+++ b/web/pgadmin/static/js/components/Menu.jsx
@@ -1,4 +1,3 @@
-import { makeStyles } from '@mui/styles';
 import React, { useRef } from 'react';
 import CheckIcon from '@mui/icons-material/Check';
 import PropTypes from 'prop-types';
@@ -12,52 +11,9 @@ import {
 } from '@szhsin/react-menu';
 export {MenuDivider as PgMenuDivider} from '@szhsin/react-menu';
 import { shortcutToString } from './ShortcutTitle';
-import clsx from 'clsx';
 import CustomPropTypes from '../custom_prop_types';
 
-const useStyles = makeStyles((theme)=>({
-  menu: {
-    '& .szh-menu': {
-      padding: '4px 0px',
-      zIndex: 1005,
-      backgroundColor: theme.palette.background.default,
-      color: theme.palette.text.primary,
-      border: `1px solid ${theme.otherVars.borderColor}`
-    },
-    '& .szh-menu__divider': {
-      margin: 0,
-      background: theme.otherVars.borderColor,
-    },
-    '& .szh-menu__item': {
-      display: 'flex',
-      padding: '3px 12px',
-      '&:after': {
-        right: '0.75rem',
-      },
-      '&.szh-menu__item--active, &.szh-menu__item--hover': {
-        backgroundColor: theme.palette.primary.main,
-        color: theme.palette.primary.contrastText,
-      },
-      '&.szh-menu__item--disabled':{
-        color: theme.palette.text.muted,
-      }
-    }
-  },
-  checkIcon: {
-    width: '1.3rem',
-  },
-  hideCheck: {
-    visibility: 'hidden',
-  },
-  shortcut: {
-    marginLeft: 'auto',
-    fontSize: '0.8em',
-    paddingLeft: '12px',
-  }
-}));
-
 export function PgMenu({open, className='', label, menuButton=null, ...props}) {
-  const classes = useStyles();
   const state = open ? 'open' : 'closed';
   props.anchorRef?.current?.setAttribute('data-state', state);
 
@@ -65,7 +21,7 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
     return <Menu
       {...props}
       menuButton={menuButton}
-      className={clsx(classes.menu, className)}
+      className={className}
       aria-label={label || 'Menu'}
       onContextMenu={(e)=>e.preventDefault()}
       viewScroll='close'
@@ -75,7 +31,7 @@ export function PgMenu({open, className='', label, menuButton=null, ...props}) {
     <ControlledMenu
       state={state}
       {...props}
-      className={clsx(classes.menu, className)}
+      className={className}
       aria-label={label || 'Menu'}
       data-state={state}
       onContextMenu={(e)=>e.preventDefault()}
@@ -99,7 +55,7 @@ export const PgSubMenu = applyStatics(SubMenu)(({label, ...props})=>{
 });
 
 export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false, accesskey, shortcut, children, closeOnCheck=false, ...props})=>{
-  const classes = useStyles();
+
   let onClick = props.onClick;
   if(hasCheck) {
     onClick = (e)=>{
@@ -111,9 +67,9 @@ export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false
 
   const dataLabel = typeof(children) == 'string' ? children : props.datalabel;
   return <MenuItem {...props} onClick={onClick} data-label={dataLabel} data-checked={checked}>
-    {hasCheck && <CheckIcon className={classes.checkIcon} style={checked ? {} : {visibility: 'hidden'}} data-label="CheckIcon"/>}
+    {hasCheck && <CheckIcon  style={checked ? {} : {visibility: 'hidden', width: '1.3rem'}} data-label="CheckIcon"/>}
     {children}
-    <div className={classes.shortcut}>
+    <div>
       {keyVal ? `(${keyVal})` : ''}
     </div>
   </MenuItem>;
diff --git a/web/pgadmin/static/js/components/ModalContent.jsx b/web/pgadmin/static/js/components/ModalContent.jsx
new file mode 100644
index 000000000..03ea740d3
--- /dev/null
+++ b/web/pgadmin/static/js/components/ModalContent.jsx
@@ -0,0 +1,56 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React, { forwardRef } from 'react';
+import { styled } from '@mui/material/styles';
+import CustomPropTypes from '../custom_prop_types';
+import { Box } from '@mui/material';
+
+const StyledBox = styled(Box)(({theme})=>({
+  backgroundColor: theme.palette.background.default,
+  display: 'flex',
+  flexDirection: 'column', 
+  '& .ModalContent-footer': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    padding: '0.5rem',
+    ...theme.mixins.panelBorder?.top,
+    gap: '5px',
+    '&.ModalContent-iconButtonStyle': {
+      marginLeft: 'auto',
+      marginRight: '4px'
+    },
+  },
+}));
+
+export const ModalContent = forwardRef(({children, ...props }, ref) => {
+  return (
+    <StyledBox ref={ref}  {...props}>{children}</StyledBox>
+  );
+});
+ModalContent.displayName = 'ModalContent';
+ModalContent.propTypes = {
+  children: CustomPropTypes.children,
+};
+
+
+export function ModalFooter({children, classNameRoot, ...props}) {
+  return (
+    <StyledBox className={[classNameRoot]} {...props}>
+      <Box className='ModalContent-footer'>
+        {children}
+      </Box>
+    </StyledBox>
+  );
+}
+
+ModalFooter.propTypes = {
+  children: CustomPropTypes.children,
+  classNameRoot: CustomPropTypes.className
+};
diff --git a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
index be876386d..05deecb86 100644
--- a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
+++ b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useState, useEffect } from 'react';
 import AccountTreeIcon from '@mui/icons-material/AccountTree';
 import CommentIcon from '@mui/icons-material/Comment';
@@ -15,33 +15,30 @@ import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRound
 import { usePgAdmin } from '../../../static/js/BrowserComponent';
 import usePreferences from '../../../preferences/static/js/store';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    position: 'absolute',
-    bottom: 0,
-    width: 'auto',
-    maxWidth: '99%',
-    zIndex: 1004,
-    padding: '0.25rem 0.5rem',
-    fontSize: '0.95em',
-    color: theme.palette.background.default,
-    backgroundColor: theme.palette.text.primary,
-    borderTopRightRadius: theme.shape.borderRadius,
-  },
-  row: {
+const StyledBox = styled(Box)(({theme}) => ({
+  position: 'absolute',
+  bottom: 0,
+  width: 'auto',
+  maxWidth: '99%',
+  zIndex: 1004,
+  padding: '0.25rem 0.5rem',
+  fontSize: '0.95em',
+  color: theme.palette.background.default,
+  backgroundColor: theme.palette.text.primary,
+  borderTopRightRadius: theme.shape.borderRadius,
+  '& .ObjectBreadcrumbs-row': {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
+    '& .ObjectBreadcrumbs-overflow': {
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    }
   },
-  overflow: {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  }
 }));
 
 
 export default function ObjectBreadcrumbs() {
-  const classes = useStyles();
   const pgAdmin = usePgAdmin();
   const preferences = usePreferences().getPreferencesForModule('browser');
   const [objectData, setObjectData] = useState({
@@ -75,11 +72,11 @@ export default function ObjectBreadcrumbs() {
     return <></>;
   }
 
-  return(
-    <Box className={classes.root} data-testid="object-breadcrumbs">
-      <div className={classes.row}>
+  return (
+    <StyledBox data-testid="object-breadcrumbs">
+      <div className='ObjectBreadcrumbs-row'>
         <AccountTreeIcon style={{height: '1rem', marginRight: '0.125rem'}} data-label="AccountTreeIcon"/>
-        <div className={classes.overflow}>
+        <div className='ObjectBreadcrumbs-overflow'>
           {
             objectData.path?.reduce((res, item, i)=>(
               res.concat(<span key={item+i}>{item}</span>, <ArrowForwardIosRoundedIcon key={item+i+'-arrow'} style={{height: '0.8rem', width: '1.25rem'}} />)
@@ -88,10 +85,10 @@ export default function ObjectBreadcrumbs() {
         </div>
       </div>
       {preferences.breadcrumbs_show_comment && objectData.description &&
-          <div className={classes.row}>
+          <div className='ObjectBreadcrumbs-row'>
             <CommentIcon style={{height: '1rem', marginRight: '0.125rem'}} data-label="CommentIcon"/>
-            <div className={classes.overflow}>{objectData.description}</div>
+            <div className='ObjectBreadcrumbs-overflow'>{objectData.description}</div>
           </div>}
-    </Box>
+    </StyledBox>
   );
 }
diff --git a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
index cf41b06d9..732348338 100644
--- a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
+++ b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
@@ -3,7 +3,7 @@ import UplotReact from 'uplot-react';
 import { useResizeDetector } from 'react-resize-detector';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/styles';
+import { useTheme } from '@mui/material';
 
 function tooltipPlugin(refreshRate) {
   let tooltipTopOffset = -20;
diff --git a/web/pgadmin/static/js/components/PgReactDataGrid.jsx b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
index 8804c8b14..41fc42598 100644
--- a/web/pgadmin/static/js/components/PgReactDataGrid.jsx
+++ b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
@@ -9,23 +9,22 @@
 import React, { useContext, useEffect } from 'react';
 import ReactDataGrid, { Row } from 'react-data-grid';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import gettext from 'sources/gettext';
+import { styled } from '@mui/material/styles';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
+const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
+  '&.ReactGrid-root': {
     height: '100%',
     color: theme.palette.text.primary,
     backgroundColor: theme.otherVars.qtDatagridBg,
     fontSize: '12px',
     border: 'none',
     '--rdg-selection-color': theme.palette.primary.main,
-    '& .rdg-cell': {
+    '&.rdg-cell': {
       ...theme.mixins.panelBorder.right,
       ...theme.mixins.panelBorder.bottom,
       fontWeight: 'abc',
@@ -44,7 +43,7 @@ const useStyles = makeStyles((theme)=>({
     '& .rdg-header-row': {
       backgroundColor: theme.palette.background.default,
     },
-    '& .rdg-row': {
+    '&.rdg-row': {
       backgroundColor: theme.palette.background.default,
       '&[aria-selected=true]': {
         backgroundColor: theme.palette.primary.light,
@@ -52,7 +51,7 @@ const useStyles = makeStyles((theme)=>({
       },
     }
   },
-  cellSelection: {
+  '&.ReactGrid-cellSelection': {
     '& .rdg-cell': {
       '&[aria-selected=true]:not([role="columnheader"])': {
         outlineWidth: '1px',
@@ -62,7 +61,7 @@ const useStyles = makeStyles((theme)=>({
       }
     },
   },
-  hasSelectColumn: {
+  '&.ReactGrid-hasSelectColumn': {
     '& .rdg-cell': {
       '&[aria-selected=true][aria-colindex="1"]': {
         outlineWidth: '2px',
@@ -71,7 +70,7 @@ const useStyles = makeStyles((theme)=>({
         color: theme.palette.text.primary,
       }
     },
-    '& .rdg-row[aria-selected=true] .rdg-cell:nth-child(1)': {
+    '& .rdg-row[aria-selected=true] .rdg-cell:nth-of-type(1)': {
       backgroundColor: theme.palette.primary.main,
       color: theme.palette.primary.contrastText,
     }
@@ -131,16 +130,16 @@ CustomRow.propTypes = {
 
 export default function PgReactDataGrid({gridRef, className, hasSelectColumn=true, onItemEnter, onItemSelect,
   onItemClick, noRowsText, noRowsIcon,...props}) {
-  const classes = useStyles();
-  let finalClassName = [classes.root];
-  hasSelectColumn && finalClassName.push(classes.hasSelectColumn);
-  props.enableCellSelect && finalClassName.push(classes.cellSelection);
+
+  let finalClassName = ['ReactGrid-root'];
+  hasSelectColumn && finalClassName.push('ReactGrid-hasSelectColumn');
+  props.enableCellSelect && finalClassName.push('ReactGrid-cellSelection');
   finalClassName.push(className);
   return (
     <GridContextUtils.Provider value={{onItemEnter, onItemSelect, onItemClick}}>
-      <ReactDataGrid
+      <StyledReactDataGrid
         ref={gridRef}
-        className={clsx(finalClassName)}
+        className={finalClassName.join(' ')}
         components={{
           sortIcon: CutomSortIcon,
           rowRenderer: CustomRow,
diff --git a/web/pgadmin/static/js/components/PgReactTableStyled.jsx b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
index c8f5f3a38..d7fc60354 100644
--- a/web/pgadmin/static/js/components/PgReactTableStyled.jsx
+++ b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
@@ -9,13 +9,12 @@
 
 import React, { forwardRef, useEffect } from 'react';
 import { flexRender } from '@tanstack/react-table';
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { PgIconButton } from './Buttons';
-import clsx from 'clsx';
 import CustomPropTypes from '../custom_prop_types';
 import { InputSwitch } from './FormComponents';
 
@@ -161,6 +160,9 @@ export const PgReactTableCell = forwardRef(({row, cell, children, className}, re
   if(row.original.icon && row.original.icon[cell.column.id]) {
     classNames.push(row.original.icon[cell.column.id], 'cell-with-icon');
   }
+  if(cell.column.columnDef.dataClassName){
+    classNames.push(cell.column.columnDef.dataClassName);
+  }
 
   classNames.push(className);
 
@@ -170,7 +172,7 @@ export const PgReactTableCell = forwardRef(({row, cell, children, className}, re
       width: `calc(var(--col-${cell.column.id.replace(/\W/g, '_')}-size)*1px)`,
       ...(cell.column.columnDef.maxSize ? { maxWidth: `${cell.column.columnDef.maxSize}px` } : {})
     }} role='cell'
-    className={clsx(...classNames)}
+    className={classNames.join(' ')}
     title={String(cell.getValue() ?? '')}>
       <div className='pgrd-row-cell-content'>{children}</div>
     </div>
@@ -187,7 +189,7 @@ PgReactTableCell.propTypes = {
 
 export const PgReactTableRow = forwardRef(({ children, className, ...props }, ref)=>{
   return (
-    <div className={clsx('pgrt-row', className)} ref={ref} role="row" {...props}>
+    <div className={['pgrt-row', className].join(' ')} ref={ref} role="row" {...props}>
       {children}
     </div>
   );
@@ -200,7 +202,7 @@ PgReactTableRow.propTypes = {
 
 export const PgReactTableRowContent = forwardRef(({children, className, ...props}, ref)=>{
   return (
-    <div className={clsx('pgrt-row-content', className)} ref={ref} {...props}>
+    <div className={['pgrt-row-content', className].join(' ')} ref={ref} {...props}>
       {children}
     </div>
   );
@@ -311,8 +313,8 @@ export const PgReactTable = forwardRef(({children, table, rootClassName, tableCl
   }, [columns, table.getState().columnSizingInfo]);
 
   return (
-    <StyledDiv className={clsx('pgrt', rootClassName)} ref={ref} >
-      <div className={clsx('pgrt-table', tableClassName)} style={{ ...columnSizeVars }} {...props}>
+    <StyledDiv className={['pgrt', rootClassName].join(' ')} ref={ref} >
+      <div className={['pgrt-table', tableClassName].join(' ')} style={{ ...columnSizeVars }} {...props}>
         {children}
       </div>
     </StyledDiv>
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index be8fb0e58..422e0e2a9 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -17,7 +17,7 @@ import {
   flexRender,
 } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { Checkbox, Box } from '@mui/material';
 import { InputText } from './FormComponents';
@@ -28,7 +28,7 @@ import EmptyPanelMessage from './EmptyPanelMessage';
 import { PgReactTable, PgReactTableBody, PgReactTableCell, PgReactTableHeader, PgReactTableRow, PgReactTableRowContent, PgReactTableRowExpandContent } from './PgReactTableStyled';
 
 const ROW_HEIGHT = 30;
-function TableRow({ index, style, schema, row, measureElement }) {
+function TableRow({ index, style, schema, row, measureElement}) {
   const [expandComplete, setExpandComplete] = React.useState(false);
   const rowRef = React.useRef();
 
@@ -199,8 +199,6 @@ const StyledPgTableRoot = styled('div')(({theme})=>({
   overflow: 'hidden',
   flexDirection: 'column',
   height: '100%',
-
-
   '& .pgtable-header': {
     display: 'flex',
     background: theme.palette.background.default,
@@ -210,7 +208,6 @@ const StyledPgTableRoot = styled('div')(({theme})=>({
       minWidth: '300px'
     },
   },
-
   '& .pgtable-body': {
     flexGrow: 1,
     minHeight: 0,
@@ -218,13 +215,11 @@ const StyledPgTableRoot = styled('div')(({theme})=>({
     flexDirection: 'column',
     backgroundColor: theme.otherVars.emptySpaceBg,
   },
-
   '&.pgtable-pgrt-border': {
     '& .pgrt': {
       border: '1px solid ' + theme.otherVars.borderColor,
     }
   },
-
   '&.pgtable-pgrt-cave': {
     '& .pgtable-body': {
       padding: '8px',
@@ -244,7 +239,7 @@ export default function PgTable({ caveTable = true, tableNoBorder = true, ...pro
   return (
     <StyledPgTableRoot className={[tableNoBorder ? '' : 'pgtable-pgrt-border', caveTable ? 'pgtable-pgrt-cave' : ''].join(' ')} data-test={props['data-test']}>
       <Box className='pgtable-header'>
-        {props.CustomHeader && (<Box className='pgtable-custom-header-section'> <props.CustomHeader /></Box>)}
+        {props.CustomHeader && (<Box className={['pgtable-custom-header-section', props['className']].join(' ')}> <props.CustomHeader /></Box>)}
         <Box marginLeft="auto">
           <InputText
             placeholder={gettext('Search')}
@@ -268,5 +263,6 @@ PgTable.propTypes = {
   CustomHeader: PropTypes.func,
   caveTable: PropTypes.bool,
   tableNoBorder: PropTypes.bool,
-  'data-test': PropTypes.string
+  'data-test': PropTypes.string,
+  'className': PropTypes.string
 };
diff --git a/web/pgadmin/static/js/components/Privilege.jsx b/web/pgadmin/static/js/components/Privilege.jsx
index 83727bd41..4485f674e 100644
--- a/web/pgadmin/static/js/components/Privilege.jsx
+++ b/web/pgadmin/static/js/components/Privilege.jsx
@@ -1,34 +1,23 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import React from 'react';
 import { InputCheckbox, InputText } from './FormComponents';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles(()=>({
+
+const Root = styled('div')(()=>({
   /* Display the privs table only when focussed */
-  root: {
-    '&:not(:focus-within) .priv-table': {
-      display: 'none',
-    }
+  '&:not(:focus-within) .priv-table': {
+    display: 'none',
   },
-  table: {
+  '& .Privilege-table': {
     borderSpacing: 0,
     width: '100%',
     fontSize: '0.8em',
+    '& .Privilege-tableCell': {
+      textAlign: 'left',
+    }
   },
-  tableCell: {
-    textAlign: 'left',
-  }
 }));
 
 export default function Privilege({value, onChange, controlProps}) {
@@ -50,7 +39,7 @@ export default function Privilege({value, onChange, controlProps}) {
   };
   let all = false;
   let allWithGrant = false;
-  const classes = useStyles();
+
   let textValue = '';
   for(const v of value||[]) {
     if(v.privilege) {
@@ -129,16 +118,16 @@ export default function Privilege({value, onChange, controlProps}) {
   allWithGrant = (realVal.length === (value || []).length) && (value || []).every((d)=>d.with_grant);
 
   return (
-    <div className={classes.root}>
+    <Root>
       <InputText value={textValue} readOnly/>
-      <table className={clsx(classes.table, 'priv-table')} tabIndex="0">
+      <table className={'Privilege-table priv-table'} tabIndex="0">
         {(realVal.length > 1) && <thead>
           <tr>
-            <td className={classes.tableCell}>
+            <td className='Privilege-tableCell'>
               <InputCheckbox name="all" controlProps={{label: 'ALL'}} id={checkboxId} size="small"
                 onChange={(e)=>onCheckAll(e, false)} value={all}/>
             </td>
-            <td className={classes.tableCell}>
+            <td className='Privilege-tableCell'>
               <InputCheckbox name="all" controlProps={{label: 'WITH GRANT OPTION'}} id={checkboxId} size="small"
                 disabled={!all} onChange={(e)=>onCheckAll(e, true)} value={allWithGrant}/>
             </td>
@@ -149,12 +138,12 @@ export default function Privilege({value, onChange, controlProps}) {
             realVal.map((d)=>{
               return (
                 <tr key={d.privilege_type}>
-                  <td className={classes.tableCell}>
+                  <td className='Privilege-tableCell'>
                     <InputCheckbox name={d.privilege_type} controlProps={{label: LABELS[d.privilege_type]}}
                       id={checkboxId} value={Boolean(d.privilege)} size="small"
                       onChange={(e)=>onCheck(e, false)}/>
                   </td>
-                  <td className={classes.tableCell}>
+                  <td className='Privilege-tableCell'>
                     <InputCheckbox name={d.privilege_type} controlProps={{label: 'WITH GRANT OPTION'}}
                       id={checkboxId} value={Boolean(d.with_grant)} size="small" disabled={!d.privilege}
                       onChange={(e)=>onCheck(e, true)}/>
@@ -165,7 +154,7 @@ export default function Privilege({value, onChange, controlProps}) {
           }
         </tbody>
       </table>
-    </div>
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/QueryThresholds.jsx b/web/pgadmin/static/js/components/QueryThresholds.jsx
index b182acfbe..e29159844 100644
--- a/web/pgadmin/static/js/components/QueryThresholds.jsx
+++ b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -10,36 +10,12 @@
 import gettext from 'sources/gettext';
 import _ from 'lodash';
 import { FormGroup, Grid, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import React from 'react';
 import { InputText } from './FormComponents';
 import PropTypes from 'prop-types';
 
-const useStyles = makeStyles(() => ({
-  formControlLabel: {
-    padding: '3px',
-  },
-  formInput: {
-    marginLeft: '5px'
-  },
-  formCheckboxControl: {
-    padding: '3px',
-    border: '1px solid',
-    borderRadius: '0.25rem',
-  },
-  formGroup: {
-    padding: '5px'
-  },
-  contentTextAlign: {
-    textAlign: 'center'
-  },
-  contentStyle: {
-    paddingLeft: 10,
-  }
-}));
 
 export default function QueryThresholds({ value, onChange }) {
-  const classes = useStyles();
   const warningCid = _.uniqueId('c');
   const warninghelpid = `h${warningCid}`;
   const alertCid = _.uniqueId('c');
@@ -70,13 +46,13 @@ export default function QueryThresholds({ value, onChange }) {
         <Grid item lg={2} md={2} sm={2} xs={12}>
           <InputText cid={warningCid} helpid={warninghelpid} type='numeric' value={value?.warning} onChange={onWarningChange} />
         </Grid>
-        <Grid item lg={2} md={2} sm={2} xs={12} className={classes.contentTextAlign}>
+        <Grid item lg={2} md={2} sm={2} xs={12} sx={{ textAlign: 'center' }}>
           <Typography>{gettext('Alert')}</Typography>
         </Grid>
         <Grid item lg={2} md={2} sm={2} xs={12}>
           <InputText cid={alertCid} helpid={alerthelpid} type='numeric' value={value?.alert} onChange={onAlertChange} />
         </Grid>
-        <Grid item lg={4} md={4} sm={4} xs={12} className={classes.contentStyle}>
+        <Grid item lg={4} md={4} sm={4} xs={12} sx={{paddingLeft: 10 }}>
           <Typography>{gettext('(in minutes)')}</Typography>
         </Grid>
       </Grid>
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
index 4d1d4662e..51012ada8 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
@@ -8,10 +8,10 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import { Box, InputAdornment } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { InputText } from '../../FormComponents';
 import { PgIconButton } from '../../Buttons';
 import CloseIcon from '@mui/icons-material/CloseRounded';
@@ -32,21 +32,19 @@ import {
   replaceAll,
 } from '@codemirror/search';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    position: 'absolute',
-    zIndex: 99,
-    right: '4px',
-    top: '0px',
-    ...theme.mixins.panelBorder.all,
-    borderTop: 'none',
-    padding: '2px 4px',
-    width: '250px',
-    backgroundColor: theme.palette.background.default,
-  },
-  marginTop: {
+const StyledBox = styled(Box)(({theme}) => ({
+  position: 'absolute',
+  zIndex: 99,
+  right: '4px',
+  top: '0px',
+  ...theme.mixins.panelBorder.all,
+  borderTop: 'none',
+  padding: '2px 4px',
+  width: '250px',
+  backgroundColor: theme.palette.background.default,
+  '& .CodeMirror-marginTop': {
     marginTop: '0.25rem',
-  },
+  }
 }));
 
 export default function FindDialog({editor, show, replace, onClose}) {
@@ -56,7 +54,7 @@ export default function FindDialog({editor, show, replace, onClose}) {
   const [matchCase, setMatchCase] = useState(false);
   const findInputRef = useRef();
   const searchQuery = useRef();
-  const classes = useStyles();
+
 
   const search = ()=>{
     if(editor) {
@@ -148,7 +146,7 @@ export default function FindDialog({editor, show, replace, onClose}) {
   }
 
   return (
-    <Box className={classes.root} style={{visibility: show ? 'visible' : 'hidden'}} tabIndex="0" onKeyDown={onEscape}>
+    <StyledBox style={{visibility: show ? 'visible' : 'hidden'}} tabIndex="0" onKeyDown={onEscape}>
       <InputText value={findVal}
         inputRef={(ele)=>{findInputRef.current = ele;}}
         onChange={(value)=>setFindVal(value)}
@@ -164,12 +162,12 @@ export default function FindDialog({editor, show, replace, onClose}) {
       />
       {replace &&
       <InputText value={replaceVal}
-        className={classes.marginTop}
+        className='CodeMirror-marginTop'
         onChange={(value)=>setReplaceVal(value)}
         onKeyPress={onReplaceEnter}
       />}
 
-      <Box display="flex" className={classes.marginTop}>
+      <Box display="flex" className='CodeMirror-marginTop'>
         <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}
@@ -183,7 +181,7 @@ export default function FindDialog({editor, show, replace, onClose}) {
           <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={clearAndClose}/>
         </Box>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
index 2e2391b08..1b96d5fb2 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
@@ -8,35 +8,33 @@
 //////////////////////////////////////////////////////////////
 
 import React, { 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 { makeStyles } from '@mui/styles';
 import { InputText } from '../../FormComponents';
 import { PgIconButton } from '../../Buttons';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    position: 'absolute',
-    zIndex: 99,
-    right: '4px',
-    top: '0px',
-    ...theme.mixins.panelBorder.all,
-    borderTop: 'none',
-    padding: '2px 4px',
-    width: '250px',
-    backgroundColor: theme.palette.background.default,
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-  },
+const StyledBox = styled(Box)(({theme}) => ({
+  position: 'absolute',
+  zIndex: 99,
+  right: '4px',
+  top: '0px',
+  ...theme.mixins.panelBorder.all,
+  borderTop: 'none',
+  padding: '2px 4px',
+  width: '250px',
+  backgroundColor: theme.palette.background.default,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
 }));
 
 export default function GotoDialog({editor, show, onClose}) {
   const [gotoVal, setGotoVal] = useState('');
   const inputRef = useRef();
-  const classes = useStyles();
+
 
   useEffect(()=>{
     if(show) {
@@ -72,8 +70,8 @@ export default function GotoDialog({editor, show, onClose}) {
   }
 
   return (
-    <Box className={classes.root} style={{visibility: show ? 'visible' : 'hidden'}} tabIndex="0" onKeyDown={onEscape}>
-      <div style={{whiteSpace: 'nowrap'}}>Ln [,Col]</div>
+    <StyledBox style={{visibility: show ? 'visible' : 'hidden'}} tabIndex="0" onKeyDown={onEscape}>
+      <div style={{whiteSpace: 'nowrap'}}>Ln, [Col]</div>
       <FormControl>
         <InputText
           value={gotoVal}
@@ -83,7 +81,7 @@ export default function GotoDialog({editor, show, onClose}) {
         />
       </FormControl>
       <PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={onClose}/>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
index 50b25ed3a..16842c13f 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
@@ -8,10 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 
 import gettext from 'sources/gettext';
@@ -24,12 +23,10 @@ import CustomPropTypes from '../../custom_prop_types';
 import FindDialog from './components/FindDialog';
 import GotoDialog from './components/GotoDialog';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    position: 'relative',
-    height: '100%'
-  },
-  copyButton: {
+const Root = styled('div')(() => ({
+  position: 'relative',
+  height: '100%',
+  '& .CodeMirror-copyButton': {
     position: 'absolute',
     zIndex: 99,
     right: '4px',
@@ -39,14 +36,14 @@ const useStyles = makeStyles(() => ({
 
 
 function CopyButton({ editor }) {
-  const classes = useStyles();
+
   const [isCopied, setIsCopied] = useState(false);
   const revertCopiedText = useDelayedCaller(() => {
     setIsCopied(false);
   });
 
   return (
-    <PgIconButton size="small" className={classes.copyButton} icon={isCopied ? <CheckRoundedIcon /> : <FileCopyRoundedIcon />}
+    <PgIconButton size="small" className='CodeMirror-copyButton' icon={isCopied ? <CheckRoundedIcon /> : <FileCopyRoundedIcon />}
       title={isCopied ? gettext('Copied!') : gettext('Copy')}
       onClick={() => {
         copyToClipboard(editor?.getValue());
@@ -63,7 +60,6 @@ CopyButton.propTypes = {
 
 
 export default function CodeMirror({className, currEditor, showCopyBtn=false, customKeyMap=[], onTextSelect, ...props}) {
-  const classes = useStyles();
   const editor = useRef();
   const [[showFind, isReplace], setShowFind] = useState([false, false]);
   const [showGoto, setShowGoto] = useState(false);
@@ -140,12 +136,12 @@ export default function CodeMirror({className, currEditor, showCopyBtn=false, cu
 
 
   return (
-    <div className={clsx(className, classes.root)} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+    <Root className={[className].join(' ')} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} >
       <Editor currEditor={currEditorWrap} customKeyMap={finalCustomKeyMap} {...props} />
       {showCopy && <CopyButton editor={editor.current} />}
       <FindDialog editor={editor.current} show={showFind} replace={isReplace} onClose={closeFind} />
       <GotoDialog editor={editor.current} show={showGoto} onClose={closeGoto} />
-    </div>
+    </Root>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/SelectThemes.jsx b/web/pgadmin/static/js/components/SelectThemes.jsx
index 2a256f557..26e9aa201 100644
--- a/web/pgadmin/static/js/components/SelectThemes.jsx
+++ b/web/pgadmin/static/js/components/SelectThemes.jsx
@@ -9,20 +9,14 @@
 
 import gettext from 'sources/gettext';
 import { Grid } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import React, { useMemo } from 'react';
 import {InputSelect } from './FormComponents';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
-const useStyles = makeStyles(() => ({
-  preview: {
-    paddingTop: 10
-  }
-}));
 
 export default function SelectThemes({onChange, ...props}) {
-  const classes = useStyles();
+
   const previewSrc = useMemo(()=>(props.options?.find((o)=>o.value==props.value)?.preview_src), [props.value]);
 
   return (
@@ -30,7 +24,7 @@ export default function SelectThemes({onChange, ...props}) {
       <Grid item lg={12} md={12} sm={12} xs={12}>
         <InputSelect ref={props.inputRef} onChange={onChange} {...props} />
       </Grid>
-      <Grid item lg={12} md={12} sm={12} xs={12} className={classes.preview}>
+      <Grid item lg={12} md={12} sm={12} xs={12} sx={{paddingTop: 10}}>
         <img className='img-fluid mx-auto d-block border' src={previewSrc} alt={gettext('Preview not available...')} />
       </Grid>
     </Grid>
diff --git a/web/pgadmin/static/js/components/ShortcutTitle.jsx b/web/pgadmin/static/js/components/ShortcutTitle.jsx
index 51de378d4..b95373c2f 100644
--- a/web/pgadmin/static/js/components/ShortcutTitle.jsx
+++ b/web/pgadmin/static/js/components/ShortcutTitle.jsx
@@ -1,26 +1,27 @@
 import React from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import { isMac } from '../keyboard_shortcuts';
 import _ from 'lodash';
 import CustomPropTypes from '../custom_prop_types';
 import gettext from 'sources/gettext';
 
-const useStyles = makeStyles((theme)=>({
-  shortcutTitle: {
+
+const Root = styled('div')(({theme}) => ({
+  '& .ShortcutTitle-title': {
     width: '100%',
     textAlign: 'center',
   },
-  shortcut: {
+  '& .ShortcutTitle-shortcut': {
     justifyContent: 'center',
     marginTop: '0.125rem',
     display: 'flex',
-  },
-  key: {
-    padding: '0 0.25rem',
-    border: `1px solid ${theme.otherVars.borderColor}`,
-    marginRight: '0.125rem',
-    borderRadius: theme.shape.borderRadius,
+    '& .ShortcutTitle-key': {
+      padding: '0 0.25rem',
+      border: `1px solid ${theme.otherVars.borderColor}`,
+      marginRight: '0.125rem',
+      borderRadius: theme.shape.borderRadius,
+    }
   },
 }));
 
@@ -67,17 +68,17 @@ export function shortcutToString(shortcut, accesskey=null, asArray=false) {
 
 /* The tooltip content to show shortcut details */
 export default function ShortcutTitle({title, shortcut, accesskey}) {
-  const classes = useStyles();
+
   let keys = shortcutToString(shortcut, accesskey, true);
   return (
-    <>
-      <div className={classes.shortcutTitle}>{title}</div>
-      <div className={classes.shortcut}>
+    (<Root>
+      <div className='ShortcutTitle-title'>{title}</div>
+      <div className='ShortcutTitle-shortcut'>
         {keys.map((key)=>{
-          return <div key={key} className={classes.key}>{key}</div>;
+          return <div key={key} className='ShortcutTitle-key'>{key}</div>;
         })}
       </div>
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/static/js/components/TabPanel.jsx b/web/pgadmin/static/js/components/TabPanel.jsx
index de5043797..455bde66d 100644
--- a/web/pgadmin/static/js/components/TabPanel.jsx
+++ b/web/pgadmin/static/js/components/TabPanel.jsx
@@ -9,28 +9,25 @@
 
 import React from 'react';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
-export const tabPanelStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-  },
-  content: {
+
+const StyledBox = styled(Box)(({theme})=>({
+  ...theme.mixins.tabPanel,
+  '& .TabPanel-content':{
     height: '100%',
   }
 }));
 
 /* Material UI does not have any tabpanel component, we create one for us */
 export default function TabPanel({children, classNameRoot, className, value, index, ...props}) {
-  const classes = tabPanelStyles();
   const active = value === index;
   return (
-    <Box className={clsx(classes.root, classNameRoot)} component="div" hidden={!active} data-test="tabpanel" {...props}>
-      <Box className={clsx(classes.content, className)}>{children}</Box>
-    </Box>
+    <StyledBox className={[classNameRoot].join(' ')} component="div" hidden={!active} data-test="tabpanel" {...props}>
+      <Box className={['TabPanel-content', className].join(' ')}>{children}</Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/Table.jsx b/web/pgadmin/static/js/components/Table.jsx
new file mode 100644
index 000000000..531622bc2
--- /dev/null
+++ b/web/pgadmin/static/js/components/Table.jsx
@@ -0,0 +1,76 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import CustomPropTypes from '../custom_prop_types';
+
+const StyledTable = styled('table')(({theme})=>({
+  borderSpacing: 0,
+  width: '100%',
+  overflow: 'auto',
+  backgroundColor: theme.otherVars.tableBg,
+  border: '1px solid '+theme.otherVars.borderColor,
+  '& tbody td, & thead th': {
+    margin: 0,
+    padding: theme.spacing(0.5),
+    border: '1px solid '+theme.otherVars.borderColor,
+    borderBottom: 'none',
+    position: 'relative',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    userSelect: 'text',
+    maxWidth: '250px',
+    '&:first-of-type':{
+      borderLeft: 'none',
+    },
+  },
+  '& thead tr:first-of-type th': {
+    borderTop: 'none',
+  },
+  '& tbody tr:last-of-type': {
+    '&:hover td': {
+      borderBottomColor: theme.palette.primary.main,
+    },
+    '& td': {
+      borderBottomColor: theme.otherVars.borderColor,
+    }
+  },
+  '& th': {
+    fontWeight: theme.typography.fontWeightBold,
+    padding: theme.spacing(1, 0.5),
+    textAlign: 'left',
+  },
+  '& tbody > tr': {
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light,
+      '& td': {
+        borderBottom: '1px solid '+theme.palette.primary.main,
+        borderTop: '1px solid '+theme.palette.primary.main,
+      },
+      '&:last-of-type td': {
+        borderBottomColor: theme.palette.primary.main,
+      },
+    },
+  },
+})
+
+);
+
+export default function Table({children, classNameRoot, ...props}) {
+  return (
+    <StyledTable className={[classNameRoot].join(' ')} {...props}>{children}</StyledTable>
+  );
+}
+
+Table.propTypes = {
+  children: CustomPropTypes.children,
+  classNameRoot: CustomPropTypes.className
+};
diff --git a/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx b/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
index b83f9624f..95cfd429b 100644
--- a/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
+++ b/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
@@ -8,8 +8,8 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import DataGridView, { DataGridHeader } from '../SchemaView/DataGridView';
 import SchemaView, { SCHEMA_STATE_ACTIONS } from '../SchemaView';
 import { DefaultButton } from '../components/Buttons';
@@ -18,22 +18,22 @@ import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 import _ from 'lodash';
 
-const useStyles = makeStyles((theme)=>({
-  formBorder: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .DataGridViewWithHeaderForm-border': {
     ...theme.mixins.panelBorder,
     borderBottom: 0,
+    '& .DataGridViewWithHeaderForm-body': {
+      padding: '0.25rem',
+      '& .DataGridViewWithHeaderForm-addBtn': {
+        marginLeft: 'auto',
+      }
+    },
   },
-  form: {
-    padding: '0.25rem',
-  },
-  addBtn: {
-    marginLeft: 'auto',
-  }
 }));
 
 export default function DataGridViewWithHeaderForm(props) {
   let {containerClassName, headerSchema, headerVisible, ...otherProps} = props;
-  const classes = useStyles();
+
   const headerFormData = useRef({});
   const schemaRef = useRef(otherProps.schema);
   const [addDisabled, setAddDisabled] = useState(true);
@@ -61,10 +61,10 @@ export default function DataGridViewWithHeaderForm(props) {
 
   headerVisible = headerVisible && evalFunc(null, headerVisible, state);
   return (
-    <Box className={containerClassName}>
-      <Box className={classes.formBorder}>
+    <StyledBox className={containerClassName}>
+      <Box className='DataGridViewWithHeaderForm-border'>
         {props.label && <DataGridHeader label={props.label} />}
-        {headerVisible && <Box className={classes.form}>
+        {headerVisible && <Box className='DataGridViewWithHeaderForm-body'>
           <SchemaView
             formType={'dialog'}
             getInitData={()=>Promise.resolve({})}
@@ -80,12 +80,12 @@ export default function DataGridViewWithHeaderForm(props) {
             resetKey={headerFormResetKey}
           />
           <Box display="flex">
-            <DefaultButton className={classes.addBtn} onClick={onAddClick} disabled={addDisabled}>Add</DefaultButton>
+            <DefaultButton className='DataGridViewWithHeaderForm-addBtn' onClick={onAddClick} disabled={addDisabled}>Add</DefaultButton>
           </Box>
         </Box>}
       </Box>
       <DataGridView {...otherProps} label="" canAdd={false}/>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index cb40a27d8..1f114b18c 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -8,9 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import { Box, Dialog, DialogContent, DialogTitle, Paper } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import React, { useState, useMemo } from 'react';
-import clsx from 'clsx';
 import { getEpoch } from 'sources/utils';
 import { DefaultButton, PgIconButton, PrimaryButton } from '../components/Buttons';
 import Draggable from 'react-draggable';
@@ -22,38 +20,38 @@ import HTMLReactParser from 'html-react-parser';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import { Rnd } from 'react-rnd';
 import { ExpandDialogIcon, MinimizeDialogIcon } from '../components/ExternalIcon';
+import { styled } from '@mui/material/styles';
 
 export const ModalContext = React.createContext({});
 const MIN_HEIGHT = 190;
 const MIN_WIDTH = 500;
-
-export function useModal() {
-  return React.useContext(ModalContext);
-}
-const useAlertStyles = makeStyles((theme) => ({
-  footer: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .Alert-footer': {
     display: 'flex',
     justifyContent: 'flex-end',
     padding: '0.5rem',
     ...theme.mixins.panelBorder.top,
   },
-  margin: {
+  '& .Alert-margin': {
     marginLeft: '0.25rem',
-  }
+  },
 }));
 
+export function useModal() {
+  return React.useContext(ModalContext);
+}
+
 function AlertContent({ text, confirm, okLabel = gettext('OK'), cancelLabel = gettext('Cancel'), onOkClick, onCancelClick }) {
-  const classes = useAlertStyles();
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <StyledBox display="flex" flexDirection="column" height="100%">
       <Box flexGrow="1" p={2}>{typeof (text) == 'string' ? HTMLReactParser(text) : text}</Box>
-      <Box className={classes.footer}>
+      <Box className='Alert-footer'>
         {confirm &&
           <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} >{cancelLabel}</DefaultButton>
         }
-        <PrimaryButton className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
+        <PrimaryButton className='Alert-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 AlertContent.propTypes = {
@@ -143,17 +141,17 @@ ModalProvider.propTypes = {
   children: CustomPropTypes.children,
 };
 
-const dialogStyle = makeStyles((theme) => ({
-  dialog: {
+const StyledRnd = styled(Rnd)(({theme}) => ({
+  '&.Dialog-content': {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     border: '1px solid ' + theme.otherVars.inputBorderColor,
     borderRadius: theme.shape.borderRadius,
   },
-  fullScreen: {
+  '&.Dialog-fullScreen': {
     transform: 'none !important'
-  }
+  },
 }));
 
 
@@ -166,7 +164,6 @@ function setEnableResizing(props, resizeable) {
 }
 
 function PaperComponent({minHeight, minWidth, ...props}) {
-  let classes = dialogStyle();
   let [dialogPosition, setDialogPosition] = useState(null);
   let resizeable = checkIsResizable(props);
 
@@ -179,9 +176,9 @@ function PaperComponent({minHeight, minWidth, ...props}) {
 
   return (
     props.isresizeable == 'true' ?
-      <Rnd
+      <StyledRnd
         size={props.isfullscreen == 'true' && { width: '100%', height: '100%' }}
-        className={clsx(classes.dialog, props.isfullscreen == 'true' ? classes.fullScreen : '')}
+        className={'Dialog-content ' + ( props.isfullscreen == 'true' ? 'Dialog-fullScreen' : '')}
         default={{
           x: x_position,
           y: y_position,
@@ -210,7 +207,7 @@ function PaperComponent({minHeight, minWidth, ...props}) {
         dragHandleClassName="modal-drag-area"
       >
         <Paper {...props} style={{ width: '100%', height: '100%', maxHeight: '100%', maxWidth: '100%' }} />
-      </Rnd>
+      </StyledRnd>
       :
       <Draggable cancel={'[class*="MuiDialogContent-root"]'}>
         <Paper {...props} style={{ minWidth: '600px' }} />
@@ -227,19 +224,15 @@ PaperComponent.propTypes = {
   minHeight: PropTypes.number,
 };
 
-export const useModalStyles = makeStyles((theme) => ({
-  container: {
+const StyleDialog = styled(Dialog)(({theme}) => ({
+  '& .Modal-container': {
     backgroundColor: theme.palette.background.default
   },
-
-  titleBar: {
+  '& .Modal-titleBar': {
     display: 'flex',
     flexGrow: 1
   },
-  title: {
-    flexGrow: 1
-  },
-  icon: {
+  '& .Modal-icon': {
     fill: 'currentColor',
     width: '1em',
     height: '1em',
@@ -249,16 +242,13 @@ export const useModalStyles = makeStyles((theme) => ({
     flexShrink: 0,
     userSelect: 'none',
   },
-  footer: {
+  '& .Modal-footer': {
     display: 'flex',
     justifyContent: 'flex-end',
     padding: '0.5rem',
     ...theme.mixins.panelBorder?.top,
   },
-  margin: {
-    marginLeft: '0.25rem',
-  },
-  iconButtonStyle: {
+  '& .Modal-iconButtonStyle': {
     marginLeft: 'auto',
     marginRight: '4px'
   },
@@ -266,7 +256,6 @@ export const useModalStyles = makeStyles((theme) => ({
 
 function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose, fullScreen = false, isFullWidth = false, showFullScreen = false, isResizeable = false, minHeight = MIN_HEIGHT, minWidth = MIN_WIDTH, showTitle=true }) {
   let useModalRef = useModal();
-  const classes = useModalStyles();
   let closeModal = (_e, reason) => {
     if(reason == 'backdropClick' && showTitle) {
       return;
@@ -279,7 +268,7 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
   const [isFullScreen, setIsFullScreen] = useState(fullScreen);
 
   return (
-    <Dialog
+    <StyleDialog
       open={true}
       onClose={closeModal}
       PaperComponent={PaperComponent}
@@ -290,15 +279,15 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
     >
       { showTitle &&
         <DialogTitle className='modal-drag-area'>
-          <Box className={classes.titleBar}>
-            <Box className={classes.title} marginRight="0.25rem" >{title}</Box>
+          <Box className='Modal-titleBar'>
+            <Box sx={{ marginRight:'0.25rem', flexGrow: 1}}>{title}</Box>
             {
               showFullScreen && !isFullScreen &&
-                <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isFullScreen); }} /></Box>
+                <Box className='Modal-iconButtonStyle'><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className='Modal-icon' />} size="xs" noBorder onClick={() => { setIsFullScreen(!isFullScreen); }} /></Box>
             }
             {
               showFullScreen && isFullScreen &&
-                <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon  className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isFullScreen); }} /></Box>
+                <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>
@@ -308,7 +297,7 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
       <DialogContent height="100%">
         {useMemo(()=>{ return content(closeModal); }, [])}
       </DialogContent>
-    </Dialog>
+    </StyleDialog>
   );
 }
 ModalContainer.propTypes = {
diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx
index 716615bed..8eee3447b 100644
--- a/web/pgadmin/static/js/helpers/Notifier.jsx
+++ b/web/pgadmin/static/js/helpers/Notifier.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import { SnackbarProvider, SnackbarContent } from 'notistack';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import {Box} from '@mui/material';
 import CloseIcon from '@mui/icons-material/CloseRounded';
 import { DefaultButton, PrimaryButton } from '../components/Buttons';
@@ -23,6 +23,19 @@ import _ from 'lodash';
 import { useModal } from './ModalProvider';
 import { parseApiError } from '../api_instance';
 
+
+const Root = styled('div')(({theme}) => ({
+  '& .Notifier-footer': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    padding: '0.5rem',
+    ...theme.mixins.panelBorder.top,
+    '& .Notifier-margin': {
+      marginLeft: '0.25rem',
+    }
+  },
+}));
+
 const AUTO_HIDE_DURATION = 3000;  // In milliseconds
 
 export const FinalNotifyContent = React.forwardRef(({children}, ref) => {
@@ -33,27 +46,15 @@ FinalNotifyContent.propTypes = {
   children: CustomPropTypes.children,
 };
 
-const useModalStyles = makeStyles((theme)=>({
-  footer: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-    padding: '0.5rem',
-    ...theme.mixins.panelBorder.top,
-  },
-  margin: {
-    marginLeft: '0.25rem',
-  },
-}));
 function AlertContent({text, confirm, okLabel=gettext('OK'), cancelLabel=gettext('Cancel'), onOkClick, onCancelClick}) {
-  const classes = useModalStyles();
   return (
     <Box display="flex" flexDirection="column" height="100%">
       <Box flexGrow="1" p={2}>{HTMLReactParser(text)}</Box>
-      <Box className={classes.footer}>
+      <Box className='Notifier-footer'>
         {confirm &&
           <DefaultButton startIcon={<CloseIcon />} onClick={onCancelClick} >{cancelLabel}</DefaultButton>
         }
-        <PrimaryButton className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
+        <PrimaryButton className='Notifier-margin' startIcon={<CheckRoundedIcon />} onClick={onOkClick} autoFocus={true} >{okLabel}</PrimaryButton>
       </Box>
     </Box>
   );
@@ -197,23 +198,25 @@ export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children, onR
   // if open in a window, then create your own Snackbar
   if(window.self == window.top) {
     return (
-      <SnackbarProvider
-        maxSnack={30}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-        ref={(obj)=>{
-          pgAdmin.Browser.notifier = new Notifier(modal, new SnackbarNotifier(obj));
-          getInstance?.(pgAdmin.Browser.notifier);
-          onReady?.();
-        }}
-      >
-        {children}
-      </SnackbarProvider>
+      <Root>
+        <SnackbarProvider
+          maxSnack={30}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          ref={(obj)=>{
+            pgAdmin.Browser.notifier = new Notifier(modal, new SnackbarNotifier(obj));
+            getInstance?.(pgAdmin.Browser.notifier);
+            onReady?.();
+          }}
+        >
+          {children}
+        </SnackbarProvider>
+      </Root>
     );
   }
   return (
-    <>
+    (<Root>
       {children}
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index 02b435a69..c91214726 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -7,8 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import FastForwardIcon from '@mui/icons-material/FastForward';
 import FastRewindIcon from '@mui/icons-material/FastRewind';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -21,119 +20,110 @@ import { Box } from '@mui/material';
 import gettext from 'sources/gettext';
 import Loader from 'sources/components/Loader';
 
+const StyledBox = styled(Box)(({theme}) => ({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: theme.palette.background.default + ' !important',
+  '& .Wizard-root': {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    minHeight: 0,
 
-const useStyles = makeStyles((theme) =>
-  ({
-    wizardBase: {
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: theme.palette.background.default
-    },
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      minHeight: 0
-    },
-    rightPanel: {
-      position: 'relative',
-      display: 'flex',
-      flexBasis: '75%',
-      overflow: 'auto',
-      height: '100%',
-      minHeight: '100px'
-    },
-    leftPanel: {
-      display: 'flex',
-      flexBasis: '25%',
-      flexDirection: 'column',
-      alignItems: 'flex-start',
-      borderRight: '1px solid',
-      ...theme.mixins.panelBorder.right,
-    },
-    label: {
-      display: 'inline-block',
-      position: 'relative',
-      paddingLeft: '0.5rem',
-      flexBasis: '70%'
-    },
-    labelArrow: {
-      display: 'inline-block',
-      position: 'relative',
-      flexBasis: '30%'
-    },
-    labelDone: {
-      display: 'inline-block',
-      position: 'relative',
-      flexBasis: '30%',
-      color: theme.otherVars.activeStepBg + ' !important',
-      padding: '4px'
-    },
-    stepLabel: {
-      padding: '1em',
-      paddingRight: 0
-    },
-    active: {
-      fontWeight: 600
-    },
-    activeIndex: {
-      backgroundColor: theme.otherVars.activeStepBg + ' !important',
-      color: theme.otherVars.activeStepFg + ' !important'
-    },
-    stepIndex: {
-      padding: '0.5em 1em ',
-      height: '2.5em',
-      borderRadius: '2em',
-      backgroundColor: theme.otherVars.stepBg,
-      color: theme.otherVars.stepFg,
-      display: 'inline-block',
-      flex: 0.5,
-
-    },
-    wizard: {
+    '& .Wizard-body': {
       width: '100%',
       height: '100%',
       minHeight: 100,
       display: 'flex',
       flexWrap: 'wrap',
+      '& .Wizard-rightPanel': {
+        position: 'relative',
+        display: 'flex',
+        flexBasis: '75%',
+        overflow: 'auto',
+        height: '100%',
+        minHeight: '100px',
+        '& .Wizard-stepDefaultStyle': {
+          width: '100%',
+          height: '100%',
+          padding: '8px',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+        '& .Wizard-hidden': {
+          display: 'none',
+        }
+      },
+      '& .Wizard-active': {
+        fontWeight: 600
+      },
+      '& .Wizard-leftPanel': {
+        display: 'flex',
+        flexBasis: '25%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        borderRight: '1px solid',
+        ...theme.mixins.panelBorder.right,
+        '& .Wizard-active': {
+          fontWeight: 600
+        },
+        '& .Wizard-stepLabel': {
+          padding: '1em',
+          paddingRight: 0,
+          '& .Wizard-stepIndex': {
+            padding: '0.5em 1em ',
+            height: '2.5em',
+            borderRadius: '2em',
+            backgroundColor: theme.otherVars.stepBg,
+            color: theme.otherVars.stepFg,
+            display: 'inline-block',
+            flex: 0.5,
+            '& .Wizard-activeIndex': {
+              backgroundColor: theme.otherVars.activeStepBg + ' !important',
+              color: theme.otherVars.activeStepFg + ' !important'
+            },
+          },
+          '& .Wizard-label': {
+            display: 'inline-block',
+            position: 'relative',
+            paddingLeft: '0.5rem',
+            flexBasis: '70%'
+          },      
+          '& .Wizard-labelArrow': {
+            display: 'inline-block',
+            position: 'relative',
+            flexBasis: '30%'
+          },
+          '& .Wizard-labelDone': {
+            display: 'inline-block',
+            position: 'relative',
+            flexBasis: '30%',
+            color: theme.otherVars.activeStepBg + ' !important',
+            padding: '4px'
+          },
+        },
+      },
     },
-    wizardFooter: {
-      borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
-      padding: '0.5rem',
-      display: 'flex',
-      width: '100%',
-      background: theme.otherVars.headerBg,
-      zIndex: 999,
-    },
-    backButton: {
-      marginRight: theme.spacing(1),
-    },
-    instructions: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-    },
-    actionBtn: {
+  },
+  '& .Wizard-footer': {
+    borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
+    padding: '0.5rem',
+    display: 'flex',
+    width: '100%',
+    background: theme.otherVars.headerBg,
+    zIndex: 999,
+    '& .Wizard-actionBtn': {
       alignItems: 'flex-start',
+      '& .Wizard-buttonMargin': {
+        marginLeft: '0.5em'
+      },
     },
-    buttonMargin: {
-      marginLeft: '0.5em'
-    },
-    stepDefaultStyle: {
-      width: '100%',
-      height: '100%',
-      padding: '8px',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    hidden: {
-      display: 'none',
-    }
-  }),
-);
+  },
+}));
 
 function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
-  const classes = useStyles();
+
   const [activeStep, setActiveStep] = React.useState(0);
   const steps = stepList && stepList.length > 0 ? stepList : [];
   const [disableNext, setDisableNext] = React.useState(false);
@@ -183,25 +173,25 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
 
   return (
-    <Box className={classes.wizardBase}>
-      <div className={clsx(classes.root, props?.rootClass)}>
-        <div className={clsx(classes.wizard, className)}>
-          <Box className={classes.leftPanel}>
+    <StyledBox>
+      <div className={'Wizard-root ' + (props?.rootClass ? props.rootClass : '') }>
+        <div className={'Wizard-body ' + className}>
+          <Box className='Wizard-leftPanel'>
             {steps.map((label, index) => (
-              <Box key={label} className={clsx(classes.stepLabel, index === activeStep ? classes.active : '')}>
-                <Box className={clsx(classes.stepIndex, index === activeStep ? classes.activeIndex : '')}>{index + 1}</Box>
-                <Box className={classes.label}>{label} </Box>
-                <Box className={classes.labelArrow}>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
-                <Box className={classes.labelDone}>{index < activeStep ? <DoneIcon />: null}</Box>
+              <Box key={label} className={'Wizard-stepLabel ' + (index === activeStep ? 'Wizard-active' : '')}>
+                <Box className={'Wizard-stepIndex ' + (index === activeStep ? 'Wizard-activeIndex' : '')}>{index + 1}</Box>
+                <Box className='Wizard-label'>{label} </Box>
+                <Box className='Wizard-labelArrow'>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
+                <Box className='Wizard-labelDone'>{index < activeStep ? <DoneIcon />: null}</Box>
               </Box>
             ))}
           </Box>
-          <div className={clsx(classes.rightPanel, props.stepPanelCss)}>
+          <div className={'Wizard-rightPanel ' + props.stepPanelCss}>
             <Loader message={props?.loaderText} />
             {
               React.Children.map(props.children, (child) => {
                 return (
-                  <div className={clsx(classes.stepDefaultStyle, child.props.className, (child.props.stepId !== activeStep ? classes.hidden : ''))}>
+                  <div className={'Wizard-stepDefaultStyle ' + child.props.className + ' ' +(child.props.stepId !== activeStep ? 'Wizard-hidden' : '')}>
                     {child}
                   </div>
                 );
@@ -210,24 +200,24 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
           </div>
         </div>
       </div>
-      <div className={classes.wizardFooter}>
+      <div className='Wizard-footer'>
         <Box>
           <PgIconButton data-test="dialog-help" onClick={() => props.onHelp()} icon={<HelpIcon />} title="Help for this dialog."
             disabled={props.disableDialogHelp} />
         </Box>
-        <Box className={classes.actionBtn} marginLeft="auto">
-          <DefaultButton onClick={handleBack} disabled={activeStep === 0} className={classes.buttonMargin} startIcon={<FastRewindIcon />}>
+        <Box className='Wizard-actionBtn' marginLeft="auto">
+          <DefaultButton onClick={handleBack} disabled={activeStep === 0} className='Wizard-buttonMargin' startIcon={<FastRewindIcon />}>
             {gettext('Back')}
           </DefaultButton>
-          <DefaultButton onClick={() => handleNext()} className={classes.buttonMargin} startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
+          <DefaultButton onClick={() => handleNext()} className='Wizard-buttonMargin' startIcon={<FastForwardIcon />} disabled={activeStep == steps.length - 1 || disableNext}>
             {gettext('Next')}
           </DefaultButton>
-          <PrimaryButton className={classes.buttonMargin} startIcon={<CheckIcon />} disabled={activeStep !== (steps.length - 1) } onClick={onSave}>
+          <PrimaryButton className='Wizard-buttonMargin' startIcon={<CheckIcon />} disabled={activeStep !== (steps.length - 1) } onClick={onSave}>
             {gettext('Finish')}
           </PrimaryButton>
         </Box>
       </div>
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
index 1e4518d66..4e50ed9fb 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerArgumentComponent.jsx
@@ -9,11 +9,12 @@
 
 import PropTypes from 'prop-types';
 
+import { styled } from '@mui/material/styles';
+
 import React, { useEffect, useRef } from 'react';
 
 import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import BugReportRoundedIcon from '@mui/icons-material/BugReportRounded';
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
 
@@ -32,44 +33,40 @@ import { BROWSER_PANELS } from '../../../../../browser/static/js/constants';
 import usePreferences from '../../../../../preferences/static/js/store';
 
 
-const useStyles = makeStyles((theme) =>
-  ({
-    root: {
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: 1,
-      height: '100%',
-      backgroundColor: theme.palette.background.default,
-      overflow: 'hidden',
-    },
-    body: {
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      minHeight: 0,
-    },
-    actionBtn: {
+const StyledBox = styled(Box)(({theme}) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1,
+  height: '100%',
+  backgroundColor: theme.palette.background.default,
+  overflow: 'hidden',
+  '& .DebuggerArgument-body': {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+  },
+  '& .DebuggerArgument-footer': {
+    borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
+    padding: '0.5rem',
+    display: 'flex',
+    width: '100%',
+    background: theme.otherVars.headerBg,
+    '& .DebuggerArgument-actionBtn': {
       alignItems: 'flex-start',
+      '& .DebuggerArgument-buttonMargin': {
+        marginLeft: '0.5em'
+      },
+      '& .DebuggerArgument-debugBtn': {
+        fontSize: '1.12rem !important',
+      },
     },
-    buttonMargin: {
-      marginLeft: '0.5em'
-    },
-    debugBtn: {
-      fontSize: '1.12rem !important',
-    },
-    footer: {
-      borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
-      padding: '0.5rem',
-      display: 'flex',
-      width: '100%',
-      background: theme.otherVars.headerBg,
-    }
-  }),
-);
+  }
+}));
 
 
 export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug, isEdbProc, transId, pgTreeInfo, pgData, ...props }) {
-  const classes = useStyles();
+
   const debuggerArgsSchema = useRef(new DebuggerArgumentSchema());
   const api = getApiInstance();
   const debuggerArgsData = useRef([]);
@@ -808,8 +805,8 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug,
   }
 
   return (
-    <Box className={classes.root}>
-      <Box className={classes.body}>
+    <StyledBox>
+      <Box className='DebuggerArgument-body'>
         {
           loadArgs > 0 &&
           <>
@@ -852,25 +849,24 @@ export default function DebuggerArgumentComponent({ debuggerInfo, restartDebug,
           </>
         }
       </Box>
-      <Box className={classes.footer}>
+      <Box className='DebuggerArgument-footer'>
         <Box>
-          <DefaultButton className={classes.buttonMargin} onClick={() => { clearArgs(); }} startIcon={<DeleteSweepIcon onClick={() => { clearArgs(); }} />}>
+          <DefaultButton className='DebuggerArgument-buttonMargin' onClick={() => { clearArgs(); }} startIcon={<DeleteSweepIcon onClick={() => { clearArgs(); }} />}>
             {gettext('Clear All')}
           </DefaultButton>
         </Box>
-        <Box className={classes.actionBtn} marginLeft="auto">
-          <DefaultButton className={classes.buttonMargin} onClick={() => { props.closeModal(); }} startIcon={<CloseSharpIcon onClick={() => { props.closeModal(); }} />}>
+        <Box className='DebuggerArgument-actionBtn' marginLeft="auto">
+          <DefaultButton className='DebuggerArgument-buttonMargin' onClick={() => { props.closeModal(); }} startIcon={<CloseSharpIcon onClick={() => { props.closeModal(); }} />}>
             {gettext('Cancel')}
           </DefaultButton>
-          <PrimaryButton className={classes.buttonMargin} startIcon={<BugReportRoundedIcon className={classes.debugBtn} />}
+          <PrimaryButton className='DebuggerArgument-buttonMargin' startIcon={<BugReportRoundedIcon className='DebuggerArgument-debugBtn' />}
             disabled={isDisableDebug}
             onClick={() => { startDebugging(); }}>
             {gettext('Debug')}
           </PrimaryButton>
         </Box>
       </Box>
-    </Box>
-
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerEditor.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerEditor.jsx
index 4c25abe0c..f9e741eb5 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerEditor.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerEditor.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
 import React, { useContext, useEffect, useMemo } from 'react';
@@ -23,14 +23,13 @@ import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
 import { isShortcutValue, toCodeMirrorKey } from '../../../../../static/js/utils';
 
 
-const useStyles = makeStyles(() => ({
-  sql: {
+const StyledCodeMirror = styled(CodeMirror)(()=>({
+  '&.Query-sql': {
     height: '100%',
   }
 }));
 
 export default function DebuggerEditor({ getEditor, params }) {
-  const classes = useStyles();
   const editor = React.useRef();
   const eventBus = useContext(DebuggerEventsContext);
   const pgAdmin = usePgAdmin();
@@ -97,7 +96,7 @@ export default function DebuggerEditor({ getEditor, params }) {
   );
 
   return (
-    <CodeMirror
+    <StyledCodeMirror
       currEditor={(obj) => {
         editor.current = obj;
       }}
@@ -105,7 +104,7 @@ export default function DebuggerEditor({ getEditor, params }) {
       onBreakPointChange={(line, on)=>{
         setBreakpoint(line, on ? 1 : 0);
       }}
-      className={classes.sql}
+      className='Query-sql'
       readonly={true}
       customKeyMap={shortcutOverrideKeys}
       breakpoint
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerMessages.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerMessages.jsx
index 659a0e865..80ae68623 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerMessages.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerMessages.jsx
@@ -1,34 +1,24 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import { DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS } from '../DebuggerConstants';
 
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    whiteSpace: 'pre-wrap',
-    fontFamily: '"Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    padding: '5px 10px',
-    overflow: 'auto',
-    height: '100%',
-    fontSize: '12px',
-    userSelect: 'text',
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    ...theme.mixins.fontSourceCode,
-  }
+const StyledDiv = styled('div')(({theme}) => ({
+  whiteSpace: 'pre-wrap',
+  fontFamily: '"Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  padding: '5px 10px',
+  overflow: 'auto',
+  height: '100%',
+  fontSize: '12px',
+  userSelect: 'text',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  ...theme.mixins.fontSourceCode,
 }));
 
 export default function DebuggerMessages() {
-  const classes = useStyles();
+
   const [messageText, setMessageText] = React.useState('');
   const eventBus = React.useContext(DebuggerEventsContext);
   React.useEffect(()=>{
@@ -41,7 +31,5 @@ export default function DebuggerMessages() {
       });
     });
   }, []);
-  return (
-    <div className={classes.root} tabIndex="0" id='debugger-msg'>{messageText}</div>
-  );
+  return <StyledDiv tabIndex="0" id='debugger-msg'>{messageText}</StyledDiv>;
 }
diff --git a/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx b/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
index d7f3fbbfd..c05394c09 100644
--- a/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/LocalVariablesAndParams.jsx
@@ -8,12 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
 import React, { useCallback, useState } from 'react';
 
-import { makeStyles } from '@mui/styles';
 import Paper from '@mui/material/Paper';
 import TableContainer from '@mui/material/TableContainer';
 
@@ -21,32 +20,24 @@ import gettext from 'sources/gettext';
 
 import { DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS } from '../DebuggerConstants';
-import { commonTableStyles } from '../../../../../static/js/Theme';
 import { InputText, InputDateTimePicker } from '../../../../../static/js/components/FormComponents';
+import Table from '../../../../../static/js/components/Table';
 
-
-const useStyles = makeStyles(() => ({
-  table: {
-    minWidth: 650,
+const StyledPaper = styled(Paper)(() => ({
+  flexGrow: 1,
+  minHeight: 0,
+  overflow: 'auto',
+  maxHeight: '100%',
+  '& .LocalVariablesAndParams-container': {
+    maxHeight: '100%',
+    '& .LocalVariablesAndParams-cell': {
+      textAlign: 'center'
+    }
   },
-  summaryContainer: {
-    flexGrow: 1,
-    minHeight: 0,
-    overflow: 'auto',
-    maxHeight: '100%'
-  },
-  container: {
-    maxHeight: '100%'
-  },
-  cell: {
-    textAlign: 'center'
-  }
-
 }));
 
 export function LocalVariablesAndParams({ type }) {
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
+
   const eventBus = React.useContext(DebuggerEventsContext);
   const [variablesData, setVariablesData] = useState([]);
   const preValue = React.useRef({});
@@ -104,9 +95,9 @@ export function LocalVariablesAndParams({ type }) {
   };
 
   return (
-    <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
-      <TableContainer className={classes.container}>
-        <table className={clsx(tableClasses.table)} aria-label="sticky table">
+    <StyledPaper variant="outlined" elevation={0}>
+      <TableContainer className='LocalVariablesAndParams-container'>
+        <Table aria-label="sticky table">
           <thead>
             <tr>
               <th>{gettext('Name')}</th>
@@ -151,15 +142,15 @@ export function LocalVariablesAndParams({ type }) {
             ))}
             {
               variablesData.length == 0 &&
-              <tr key={_.uniqueId('c')} className={classes.cell}>
+              <tr key={_.uniqueId('c')} className='LocalVariablesAndParams-cell'>
                 <td colSpan={3} >{gettext('No data found')}</td>
               </tr>
             }
 
           </tbody>
-        </table>
+        </Table>
       </TableContainer>
-    </Paper>
+    </StyledPaper>
   );
 }
 
diff --git a/web/pgadmin/tools/debugger/static/js/components/Results.jsx b/web/pgadmin/tools/debugger/static/js/components/Results.jsx
index ec7dfd612..30235c6c8 100644
--- a/web/pgadmin/tools/debugger/static/js/components/Results.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/Results.jsx
@@ -7,32 +7,23 @@
 //
 //////////////////////////////////////////////////////////////
 import _ from 'lodash';
-import clsx from 'clsx';
-
+import { styled } from '@mui/material/styles';
 import React, { useState } from 'react';
 
-import { makeStyles } from '@mui/styles';
 import Paper from '@mui/material/Paper';
 
 import { DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS } from '../DebuggerConstants';
-import { commonTableStyles } from '../../../../../static/js/Theme';
+import Table from '../../../../../static/js/components/Table';
 
-
-const useStyles = makeStyles(() => ({
-  table: {
-    minWidth: 650,
-  },
-  summaryContainer: {
-    flexGrow: 1,
-    minHeight: 0,
-    overflow: 'auto',
-  }
+const StyledPaper = styled(Paper)(() => ({
+  flexGrow: 1,
+  minHeight: 0,
+  overflow: 'auto',
 }));
 
 export function Results() {
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
+
   const eventBus = React.useContext(DebuggerEventsContext);
   const [resultData, setResultData] = useState([]);
   const [columns, setColumns] = useState([]);
@@ -43,8 +34,8 @@ export function Results() {
     });
   }, []);
   return (
-    <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
-      <table className={clsx(tableClasses.table)}>
+    <StyledPaper variant="outlined" elevation={0}>
+      <Table>
         <thead>
           <tr key={_.uniqueId('c')}>
             {
@@ -65,7 +56,7 @@ export function Results() {
             </tr>
           ))}
         </tbody>
-      </table>
-    </Paper>
+      </Table>
+    </StyledPaper>
   );
 }
diff --git a/web/pgadmin/tools/debugger/static/js/components/Stack.jsx b/web/pgadmin/tools/debugger/static/js/components/Stack.jsx
index a3f9bcdc6..af96bdb95 100644
--- a/web/pgadmin/tools/debugger/static/js/components/Stack.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/Stack.jsx
@@ -8,39 +8,31 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 
 import React, { useState } from 'react';
 
-import { makeStyles } from '@mui/styles';
 import TableContainer from '@mui/material/TableContainer';
 import Paper from '@mui/material/Paper';
 
 import { DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS } from '../DebuggerConstants';
-import { commonTableStyles } from '../../../../../static/js/Theme';
 import { InputText } from '../../../../../static/js/components/FormComponents';
+import Table from '../../../../../static/js/components/Table';
 
-
-const useStyles = makeStyles(() => ({
-  table: {
-    minWidth: 650,
-  },
-  summaryContainer: {
-    flexGrow: 1,
-    minHeight: 0,
-    overflow: 'auto',
-    maxHeight: '100%'
-  },
-  container: {
+const StyledPaper = styled(Paper)(() => ({
+  flexGrow: 1,
+  minHeight: 0,
+  overflow: 'auto',
+  maxHeight: '100%',
+  '& .Stack-container': {
     maxHeight: '100%'
   }
 }));
 
 export function Stack() {
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
+
   const eventBus = React.useContext(DebuggerEventsContext);
   const [stackData, setStackData] = useState([]);
   const [disableFrameSelection, setDisableFrameSelection] = useState(false);
@@ -54,9 +46,9 @@ export function Stack() {
     });
   }, []);
   return (
-    <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
-      <TableContainer className={classes.container}>
-        <table className={clsx(tableClasses.table)} aria-label="sticky table">
+    <StyledPaper variant="outlined" elevation={0}>
+      <TableContainer className='Stack-container'>
+        <Table aria-label="sticky table">
           <thead>
             <tr>
               <th>{gettext('Name')}</th>
@@ -77,8 +69,8 @@ export function Stack() {
               </tr>
             ))}
           </tbody>
-        </table>
+        </Table>
       </TableContainer>
-    </Paper>
+    </StyledPaper>
   );
 }
diff --git a/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx b/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
index bbb8a2710..6fd73949d 100644
--- a/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx
@@ -9,8 +9,9 @@
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
+import { styled } from '@mui/material/styles';
+
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import FormatIndentIncreaseIcon from '@mui/icons-material/FormatIndentIncrease';
 import FormatIndentDecreaseIcon from '@mui/icons-material/FormatIndentDecrease';
 import PlayCircleFilledWhiteIcon from '@mui/icons-material/PlayCircleFilledWhite';
@@ -28,20 +29,20 @@ import { DebuggerContext, DebuggerEventsContext } from './DebuggerComponent';
 import { DEBUGGER_EVENTS, MENUS } from '../DebuggerConstants';
 import { useKeyboardShortcuts } from '../../../../../static/js/custom_hooks';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    backgroundColor: theme.otherVars.editorToolbarBg,
-    flexWrap: 'wrap',
-    ...theme.mixins.panelBorder.bottom,
-  },
+
+
+const StyledBox = styled(Box)(({theme}) => ({
+  padding: '2px 4px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  backgroundColor: theme.otherVars.editorToolbarBg,
+  flexWrap: 'wrap',
+  ...theme.mixins.panelBorder.bottom,
 }));
 
 export function ToolBar() {
-  const classes = useStyles();
+
   const debuggerCtx = useContext(DebuggerContext);
   const eventBus = useContext(DebuggerEventsContext);
   let preferences = debuggerCtx.preferences.debugger;
@@ -161,7 +162,7 @@ export function ToolBar() {
   ], debuggerCtx.containerRef);
 
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <PgButtonGroup size="small">
         <PgIconButton data-test='step-in' title={gettext('Step into')} disabled={buttonsDisabled[MENUS.STEPINTO]} icon={<FormatIndentIncreaseIcon />} onClick={() => { stepInTODebugger(); }}
           shortcut={preferences?.btn_step_into} />
@@ -189,6 +190,6 @@ export function ToolBar() {
         <PgIconButton title={gettext('Reset layout')} icon={<RotateLeftRoundedIcon />}
           onClick={onResetLayout} />
       </PgButtonGroup>
-    </Box>
+    </StyledBox>
   );
 }
\ No newline at end of file
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 bd3b91978..40af685aa 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
@@ -8,13 +8,30 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import { DefaultButton, PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import { Box, Tooltip, CircularProgress } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { ConnectedIcon, DisonnectedIcon } from '../../../../../../static/js/components/ExternalIcon';
 
+const StyledBox = styled(Box)(({theme}) => ({
+  padding: '2px 4px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  backgroundColor: theme.otherVars.editorToolbarBg,
+  flexWrap: 'wrap',
+  '& .Status-connectionButton': {
+    display: 'flex',
+    width: '450px',
+    backgroundColor: theme.palette.default.main,
+    color: theme.palette.default.contrastText,
+    border: '1px solid ' + theme.palette.default.borderColor,
+    justifyContent: 'flex-start',
+  }
+}));
+
 export const STATUS = {
   CONNECTED: 1,
   DISCONNECTED: 2,
@@ -36,28 +53,9 @@ ConnectionStatusIcon.propTypes = {
   status: PropTypes.oneOf(Object.values(STATUS)).isRequired,
 };
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    backgroundColor: theme.otherVars.editorToolbarBg,
-    flexWrap: 'wrap',
-  },
-  connectionButton: {
-    display: 'flex',
-    width: '450px',
-    backgroundColor: theme.palette.default.main,
-    color: theme.palette.default.contrastText,
-    border: '1px solid ' + theme.palette.default.borderColor,
-    justifyContent: 'flex-start',
-  },
-}));
-
 /* The connection bar component */
 export default function ConnectionBar({status, bgcolor, fgcolor, title}) {
-  const classes = useStyles();
+
   const connTitle = useMemo(()=>{
     if(status == STATUS.CONNECTED) {
       return gettext('Connected');
@@ -70,14 +68,14 @@ export default function ConnectionBar({status, bgcolor, fgcolor, title}) {
     }
   }, [status]);
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <PgButtonGroup size="small">
         <PgIconButton
           title={connTitle}
           icon={<ConnectionStatusIcon status={status} />}
           data-test="btn-conn-status"
         />
-        <DefaultButton className={classes.connectionButton} style={{backgroundColor: bgcolor, color: fgcolor}} data-test="btn-conn-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">
@@ -89,7 +87,7 @@ export default function ConnectionBar({status, bgcolor, fgcolor, title}) {
           </Tooltip>
         </DefaultButton>
       </PgButtonGroup>
-    </Box>
+    </StyledBox>
   );
 }
 
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 fe3736cd8..adf50c1f9 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
@@ -27,7 +27,6 @@ import ConfirmSaveContent from '../../../../../../static/js/Dialogs/ConfirmSaveC
 import Loader from '../../../../../../static/js/components/Loader';
 import { MainToolBar } from './MainToolBar';
 import { Box } from '@mui/material';
-import { withStyles } from '@mui/styles';
 import EventBus from '../../../../../../static/js/helpers/EventBus';
 import { ERD_EVENTS } from '../ERDConstants';
 import getApiInstance, { callFetch, parseApiError } from '../../../../../../static/js/api_instance';
@@ -35,6 +34,7 @@ import { openSocket, socketApiGet } from '../../../../../../static/js/socket_ins
 import { LAYOUT_EVENTS } from '../../../../../../static/js/helpers/Layout';
 import usePreferences from '../../../../../../preferences/static/js/store';
 import pgAdmin from 'sources/pgadmin';
+import { styled } from '@mui/material/styles';
 
 /* Custom react-diagram action for keyboard events */
 export class KeyboardShortcutAction extends Action {
@@ -77,30 +77,30 @@ 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 styles = ((theme)=>({
-  diagramContainer: {
+const StyledBox = styled(Box)(({theme})=>({
+  '& .ERDTool-diagramContainer': {
     position: 'relative',
     width: '100%',
     flexGrow: 1,
     minHeight: 0,
+    '& .ERDTool-diagramCanvas': {
+      width: '100%',
+      height: '100%',
+      color: theme.palette.text.primary,
+      backgroundColor: theme.otherVars.erdCanvasBg,
+      backgroundImage: getCanvasGrid(theme),
+      cursor: 'unset',
+      flexGrow: 1,
+    },
   },
-  diagramCanvas: {
-    width: '100%',
-    height: '100%',
-    color: theme.palette.text.primary,
-    backgroundColor: theme.otherVars.erdCanvasBg,
-    backgroundImage: getCanvasGrid(theme),
-    cursor: 'unset',
-    flexGrow: 1,
-  },
-  html2canvasReset: {
+  '& .ERDTool-html2canvasReset': {
     backgroundImage: 'none !important',
     overflow: 'auto !important',
   }
 }));
 
 /* The main body container for the ERD */
-class ERDTool extends React.Component {
+export default class ERDTool extends React.Component {
   static contextType = ModalContext;
   constructor(props) {
     super(props);
@@ -715,7 +715,7 @@ class ERDTool extends React.Component {
      * the canvas back to original state.
      * Code referred from - zoomToFitNodes function.
      */
-    this.diagramContainerRef.current?.classList.add(this.props.classes.html2canvasReset);
+    this.diagramContainerRef.current?.classList.add('ERDTool-html2canvasReset');
     const margin = 10;
     let nodesRect = this.diagram.getEngine().getBoundingNodesRect(this.diagram.getModel().getNodes());
     let linksRect = this.diagram.getBoundingLinksRect();
@@ -788,7 +788,7 @@ class ERDTool extends React.Component {
           pgAdmin.Browser.notifier.alert(gettext('Error'), msg);
         }).then(()=>{
           /* Revert back to the original CSS styles */
-          this.diagramContainerRef.current.classList.remove(this.props.classes.html2canvasReset);
+          this.diagramContainerRef.current.classList.remove('ERDTool-html2canvasReset');
           this.canvasEle.style.width = '';
           this.canvasEle.style.height = '';
           this.canvasEle.childNodes.forEach((ele)=>{
@@ -923,7 +923,7 @@ class ERDTool extends React.Component {
     this.erdDialogs.modal = this.context;
 
     return (
-      <Box ref={this.containerRef} height="100%" display="flex" flexDirection="column">
+      <StyledBox ref={this.containerRef} height="100%" display="flex" flexDirection="column">
         <ConnectionBar status={this.state.conn_status} bgcolor={this.props.params.bgcolor}
           fgcolor={this.props.params.fgcolor} title={_.unescape(this.props.params.title)}/>
         <MainToolBar preferences={this.state.preferences} eventBus={this.eventBus}
@@ -932,20 +932,20 @@ class ERDTool extends React.Component {
         />
         <FloatingNote open={this.state.note_open} onClose={this.onNoteClose}
           anchorEl={this.noteRefEle} noteNode={this.state.note_node} appendTo={this.diagramContainerRef.current} rows={8}/>
-        <div className={this.props.classes.diagramContainer} data-test="diagram-container" ref={this.diagramContainerRef} onDrop={this.onDropNode} onDragOver={e => {e.preventDefault();}}>
+        <div className='ERDTool-diagramContainer' data-test="diagram-container" ref={this.diagramContainerRef} onDrop={this.onDropNode} onDragOver={e => {e.preventDefault();}}>
           <Loader message={this.state.loading_msg} autoEllipsis={true}/>
           <ERDCanvasSettings.Provider value={{
             cardinality_notation: this.state.cardinality_notation
           }}>
-            {!this.props.isTest && <CanvasWidget className={this.props.classes.diagramCanvas} ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />}
+            {!this.props.isTest && <CanvasWidget className='ERDTool-diagramCanvas' ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />}
           </ERDCanvasSettings.Provider>
         </div>
-      </Box>
+      </StyledBox>
     );
   }
 }
 
-export default withStyles(styles)(ERDTool);
+//export default withStyles(styles)(ERDTool);
 
 ERDTool.propTypes = {
   params:PropTypes.shape({
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx
index 27038ccc6..7934b570d 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/components/FloatingNote.jsx
@@ -8,53 +8,59 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect, useState, useMemo } from 'react';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import CustomPropTypes from 'sources/custom_prop_types';
 import { Box, Popper } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { DefaultButton } from '../../../../../../static/js/components/Buttons';
 import CheckIcon from '@mui/icons-material/Check';
 
-
-const useStyles = makeStyles((theme)=>({
-  root: {
+const StyledPopper = styled(Popper)(({theme}) => ({
+  '& .FloatingNote-root': {
     width: '250px',
     marginLeft: '8px',
     ...theme.mixins.panelBorder.all,
     borderRadius: theme.shape.borderRadius,
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
+    '& .FloatingNote-note': {
+      padding: '4px',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      borderTopLeftRadius: 'inherit',
+      borderTopRightRadius: 'inherit',
+    },
+    '& .FloatingNote-header': {
+      padding: '4px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      ...theme.mixins.panelBorder.bottom,
+    },
+    '& .FloatingNote-textarea': {
+      width: '100%',
+      border: 0,
+      display: 'block',
+    },
+    '& .FloatingNote-buttons': {
+      padding: '4px',
+      ...theme.mixins.panelBorder.top,
+      textAlign: 'right',
+    }
   },
-  note: {
-    padding: '4px',
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit',
-  },
-  header: {
-    padding: '4px',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    ...theme.mixins.panelBorder.bottom,
-  },
-  textarea: {
-    width: '100%',
-    border: 0,
-    display: 'block',
-  },
-  buttons: {
-    padding: '4px',
-    ...theme.mixins.panelBorder.top,
-    textAlign: 'right',
-  },
+
+
+
+
+
+
+
 }));
 
 export default function FloatingNote({open, onClose, anchorEl, rows, noteNode}) {
   const [text, setText] = useState('');
-  const classes = useStyles();
+
   useEffect(()=>{
     if(noteNode) {
       setText(noteNode.getNote());
@@ -70,16 +76,16 @@ export default function FloatingNote({open, onClose, anchorEl, rows, noteNode})
   }, [open]);
 
   return (
-    <Popper
+    <StyledPopper
       open={open}
       anchorEl={anchorEl}
       placement="right-start"
     >
-      <Box className={classes.root}>
-        <Box className={classes.note}>{gettext('Note')}:</Box>
-        <Box className={classes.header}>{header}</Box>
-        <textarea className={classes.textarea} autoFocus value={text} rows={rows} onChange={(e)=>setText(e.target.value)}/>
-        <Box className={classes.buttons}>
+      <Box className='FloatingNote-root'>
+        <Box className='FloatingNote-note'>{gettext('Note')}:</Box>
+        <Box className='FloatingNote-header'>{header}</Box>
+        <textarea className='FloatingNote-textarea' autoFocus value={text} rows={rows} onChange={(e)=>setText(e.target.value)}/>
+        <Box className='FloatingNote-buttons'>
           <DefaultButton startIcon={<CheckIcon />} onClick={()=>{
             let updated = (noteNode.getNote() != text);
             noteNode.setNote(text);
@@ -87,7 +93,7 @@ export default function FloatingNote({open, onClose, anchorEl, rows, noteNode})
           }}>{gettext('OK')}</DefaultButton>
         </Box>
       </Box>
-    </Popper>
+    </StyledPopper>
   );
 }
 
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 57917120d..5694ea78a 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
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React, {useCallback, useEffect, useState} from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Box, useTheme } from '@mui/material';
 import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
@@ -38,40 +38,17 @@ import { MagicIcon, SQLFileIcon } from '../../../../../../static/js/components/E
 import { useModal } from '../../../../../../static/js/helpers/ModalProvider';
 import { withColorPicker } from '../../../../../../static/js/helpers/withColorPicker';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    backgroundColor: theme.otherVars.editorToolbarBg,
-    flexWrap: 'wrap',
-    ...theme.mixins.panelBorder.bottom,
-  },
-  connectionButton: {
-    display: 'flex',
-    width: '450px',
-    backgroundColor: theme.palette.default.main,
-    color: theme.palette.default.contrastText,
-    border: '1px solid ' + theme.palette.default.borderColor,
-    justifyContent: 'flex-start',
-  },
-  fillColorIcon: (props)=>({
-    '& path[fill-opacity]': {
-      fillOpacity: 1,
-      color: props.fillColor ?? theme.palette.background.default,
-    }
-  }),
-  textColorIcon: (props)=>({
-    '& path[fill-opacity]': {
-      fillOpacity: 1,
-      color: props.textColor ?? theme.palette.text.primary,
-    }
-  }),
+const StyledBox = styled(Box)(({theme}) => ({
+  padding: '2px 4px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  backgroundColor: theme.otherVars.editorToolbarBg,
+  flexWrap: 'wrap',
+  ...theme.mixins.panelBorder.bottom,
 }));
 
 export function MainToolBar({preferences, eventBus, fillColor, textColor, notation, onNotationChange}) {
-  const classes = useStyles({fillColor,textColor});
   const theme = useTheme();
   const [buttonsDisabled, setButtonsDisabled] = useState({
     'save': true,
@@ -177,8 +154,8 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
   }, [checkedMenuItems['sql_with_drop']]);
 
   return (
-    <>
-      <Box className={classes.root}>
+    (<>
+      <StyledBox>
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Load Project')} icon={<FolderRoundedIcon />}
             shortcut={preferences.open_project} onClick={()=>{
@@ -245,7 +222,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
             }} />
         </PgButtonGroup>
         <PgButtonGroup size="small">
-          <ColorButton title={gettext('Fill Color')} icon={<FormatColorFillRoundedIcon className={classes.fillColorIcon} />}
+          <ColorButton title={gettext('Fill Color')} icon={<FormatColorFillRoundedIcon />}
             value={fillColor ?? theme.palette.background.default} options={{
               allowSave: true,
             }}
@@ -256,7 +233,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
                 eventBus.fireEvent(ERD_EVENTS.CHANGE_COLORS, null, textColor);
               }
             }}/>
-          <ColorButton title={gettext('Text Color')} icon={<FormatColorTextRoundedIcon className={classes.textColorIcon} />}
+          <ColorButton title={gettext('Text Color')} icon={<FormatColorTextRoundedIcon />}
             value={textColor ?? theme.palette.text.primary} options={{
               allowSave: true,
             }}
@@ -309,7 +286,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
         </PgButtonGroup>
-      </Box>
+      </StyledBox>
       <PgMenu
         anchorRef={saveAsMenuRef}
         open={openMenuName=='menu-saveas'}
@@ -338,7 +315,7 @@ export function MainToolBar({preferences, eventBus, fillColor, textColor, notati
         <PgMenuItem hasCheck closeOnCheck value="crows" checked={notation == 'crows'} onClick={onNotationChange}>{gettext('Crow\'s Foot Notation')}</PgMenuItem>
         <PgMenuItem hasCheck closeOnCheck value="chen" checked={notation == 'chen'} onClick={onNotationChange}>{gettext('Chen Notation')}</PgMenuItem>
       </PgMenu>
-    </>
+    </>)
   );
 }
 
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx
index ee828a615..5bf7d80f3 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/links/OneToManyLink.jsx
@@ -19,9 +19,9 @@ import {
 import {Point} from '@projectstorm/geometry';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@mui/styles';
-import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import { ERDCanvasSettings } from '../components/ERDTool';
+import { keyframes } from '@emotion/react';
 
 export const POINTER_SIZE = 30;
 
@@ -79,38 +79,46 @@ export class OneToManyLinkModel extends RightAngleLinkModel {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  svgLink: {
+const svgLinkSelected =   keyframes`
+  from { stroke-dashoffset: 24;}
+  to { stroke-dashoffset: 0; }
+`;
+
+const StyledG = styled('g')((
+  {
+    theme
+  }
+) => ({
+
+  '& .OneToMany-svgLink': {
     stroke: theme.palette.text.primary,
     fontSize: '0.8em',
   },
-  '@keyframes svgLinkSelected': {
-    'from': { strokeDashoffset: 24},
-    'to': { strokeDashoffset: 0 }
-  },
-  svgLinkSelected: {
-    strokeDasharray: '10, 2',
-    animation: '$svgLinkSelected 1s linear infinite'
-  },
-  svgLinkCircle: {
+  '& .OneToMany-svgLinkCircle': {
     fill: theme.palette.text.primary,
   },
-  svgLinkPath: {
+
+  '& .OneToMany-svgLinkSelected': {
+    strokeDasharray: '10, 2',
+    animation: `${svgLinkSelected} 1s linear infinite`
+  },
+  '& .OneToMany-svgLinkPath': {
     pointerEvents: 'all',
     cursor: 'move',
   }
 }));
 
+
 function ChenNotation({rotation, type}) {
-  const classes = useStyles();
+
   const textX = Math.sign(rotation) > 0 ? -14 : 8;
   const textY = -5;
   return (
     <>
-      <text className={classes.svgLink} x={textX} y={textY} transform={'rotate(' + -rotation + ')' }>
+      <text className='OneToMany-svgLink' x={textX} y={textY} transform={'rotate(' + -rotation + ')' }>
         {type == 'one' ? '1' : 'N'}
       </text>
-      <line className={classes.svgLink} x1="0" y1="0" x2="0" y2="30"></line>
+      <line className='OneToMany-svgLink' x1="0" y1="0" x2="0" y2="30"></line>
     </>
   );
 }
@@ -121,7 +129,7 @@ ChenNotation.propTypes = {
 
 function CustomLinkEndWidget(props) {
   const { point, rotation, tx, ty, type } = props;
-  const classes = useStyles();
+
   const settings = useContext(ERDCanvasSettings);
 
   const svgForType = (itype) => {
@@ -131,13 +139,13 @@ function CustomLinkEndWidget(props) {
     if(itype == 'many') {
       return (
         <>
-          <circle className={clsx(classes.svgLink, classes.svgLinkCircle)} cx="0" cy="16" r={props.width*2.5} strokeWidth={props.width} />
-          <polyline className={classes.svgLink} points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={props.width} />
+          <circle className={['OneToMany-svgLink','OneToMany-svgLinkCircle'].join(' ')} cx="0" cy="16" r={props.width*2.5} strokeWidth={props.width} />
+          <polyline className='OneToMany-svgLink' points="-8,0 0,15 0,0 0,30 0,15 8,0" fill="none" strokeWidth={props.width} />
         </>
       );
     } else if (itype == 'one') {
       return (
-        <polyline className={classes.svgLink} points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={props.width} />
+        <polyline className='OneToMany-svgLink' points="-8,15 0,15 0,0 0,30 0,15 8,15" fill="none" strokeWidth={props.width} />
       );
     }
   };
@@ -313,16 +321,16 @@ export class OneToManyLinkWidget extends RightAngleLinkWidget {
 
 
     this.refPaths = [];
-    return <g data-default-link-test={this.props.link.getOptions().testName}>{paths}</g>;
+    return <StyledG data-default-link-test={this.props.link.getOptions().testName}>{paths}</StyledG>;
   }
 }
 
 const LinkSegment = forwardRef(({model, selected, path, ...props}, ref)=>{
-  const classes = useStyles();
+
   return (
     <path
       ref={ref}
-      className={clsx(classes.svgLink, classes.svgLinkPath, (selected ? classes.svgLinkSelected : ''))}
+      className={['OneToMany-svgLink','OneToMany-svgLinkPath', (selected ? 'OneToMany-svgLinkSelected' : '')].join(' ')}
       stroke={model.getOptions().color}
       strokeWidth={model.getOptions().width}
       selected={selected}
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 0174fe701..453445601 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
@@ -23,10 +23,8 @@ import { PgIconButton } from '../../../../../../static/js/components/Buttons';
 import NoteRoundedIcon from '@mui/icons-material/NoteRounded';
 import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
-import { withStyles } from '@mui/styles';
-import clsx from 'clsx';
 import { Box } from '@mui/material';
-
+import { styled } from '@mui/material/styles';
 
 const TYPE = 'table';
 const TABLE_WIDTH = 175;
@@ -180,8 +178,8 @@ RowIcon.propTypes = {
   icon: PropTypes.any.isRequired,
 };
 
-const styles = (theme)=>({
-  tableNode: {
+const StyledDiv = styled('div')(({theme})=>({
+  '&.TableNode-tableNode': {
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     ...theme.mixins.panelBorder.all,
@@ -192,48 +190,48 @@ const styles = (theme)=>({
     '& div:last-child': {
       borderBottomLeftRadius: 'inherit',
       borderBottomRightRadius: 'inherit',
-    }
+    },
+    '& .TableNode-tableSection': {
+      ...theme.mixins.panelBorder.bottom,
+      padding: '0.125rem 0.25rem',
+      display: 'flex',
+      '&.TableNode-tableNameText': {
+        fontWeight: 'bold',
+        wordBreak: 'break-all',
+        margin: 'auto 0',
+        '& .TableNode-error': {
+          color: theme.palette.error.main,
+        },
+      },
+      '&.TableNode-tableToolbar': {
+        background: theme.otherVars.editorToolbarBg,
+        borderTopLeftRadius: 'inherit',
+        borderTopRightRadius: 'inherit',
+      },
+      '& .TableNode-noteBtn': {
+        marginLeft: 'auto',
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText,
+      },
+    },
+    '& .TableNode-columnSection': {
+      display:'flex',
+      width: '100%' ,
+      ...theme.mixins.panelBorder.bottom,
+      '& .TableNode-columnName': {
+        display:'flex',
+        width: '100%' ,
+        padding: '0.125rem 0.25rem',
+        wordBreak: 'break-all',
+      },
+    },
   },
-  tableNodeSelected: {
+  '&.TableNode-tableNodeSelected': {
     borderColor: theme.palette.primary.main,
   },
-  tableSection: {
-    ...theme.mixins.panelBorder.bottom,
-    padding: '0.125rem 0.25rem',
-    display: 'flex',
-  },
-  columnSection: {
-    display:'flex',
-    width: '100%' ,
-    ...theme.mixins.panelBorder.bottom,
-  },
-  columnName: {
-    display:'flex',
-    width: '100%' ,
-    padding: '0.125rem 0.25rem',
-    wordBreak: 'break-all',
-  },
-  tableToolbar: {
-    background: theme.otherVars.editorToolbarBg,
-    borderTopLeftRadius: 'inherit',
-    borderTopRightRadius: 'inherit',
-  },
-  tableNameText: {
-    fontWeight: 'bold',
-    wordBreak: 'break-all',
-    margin: 'auto 0',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  noteBtn: {
-    marginLeft: 'auto',
-    backgroundColor: theme.palette.warning.main,
-    color: theme.palette.warning.contrastText,
-  }
-});
+}));
 
-class TableNodeWidgetRaw extends React.Component {
+export class TableNodeWidget extends React.Component {
   constructor(props) {
     super(props);
 
@@ -277,14 +275,13 @@ class TableNodeWidgetRaw extends React.Component {
     if(col.attlen) {
       cltype += '('+ col.attlen + (col.attprecision ? ',' + col.attprecision : '') +')';
     }
-
-    const {classes} = this.props;
+    
     return (
-      <Box className={classes.columnSection} key={col.attnum} data-test="column-row">
+      <Box className='TableNode-columnSection' key={col.attnum} data-test="column-row">
         <Box marginRight="auto" padding="0" minHeight="0" display="flex" alignItems="center">
           {this.generatePort(leftPort)}
         </Box>
-        <Box className={classes.columnName}>
+        <Box className='TableNode-columnName'>
           <RowIcon icon={icon} />
           <Box margin="auto 0">
             <span data-test="column-name">{col.name}</span>&nbsp;
@@ -324,19 +321,18 @@ class TableNodeWidgetRaw extends React.Component {
     (tableData.unique_constraint||[]).forEach((uk)=>{
       localUkCols.push(...uk.columns.map((c)=>c.column));
     });
-    const {classes} = this.props;
     const styles = {
       backgroundColor: tableMetaData.fillColor,
       color: tableMetaData.textColor,
     };
     return (
-      <div className={clsx(classes.tableNode, (this.props.node.isSelected() ? classes.tableNodeSelected: ''))}
+      <StyledDiv className={['TableNode-tableNode', (this.props.node.isSelected() ? 'TableNode-tableNodeSelected': '')].join(' ')}
         onDoubleClick={()=>{this.props.node.fireEvent({}, 'editTable');}} style={styles}>
-        <div className={clsx(classes.tableSection, classes.tableToolbar)}>
+        <div className={'TableNode-tableSection TableNode-tableToolbar'}>
           <PgIconButton size="xs" title={gettext('Show Details')} icon={this.state.show_details ? <VisibilityRoundedIcon /> : <VisibilityOffRoundedIcon />}
             onClick={this.toggleShowDetails} onDoubleClick={(e)=>{e.stopPropagation();}} />
           {this.props.node.getNote() &&
-            <PgIconButton size="xs" className={classes.noteBtn}
+            <PgIconButton size="xs" className='TableNode-noteBtn'
               title={gettext('Check Note')} icon={<NoteRoundedIcon />}
               onClick={()=>{
                 this.props.node.fireEvent({}, 'showNote');
@@ -344,31 +340,29 @@ class TableNodeWidgetRaw extends React.Component {
             />}
         </div>
         {tableMetaData.is_promise &&
-          <div className={classes.tableSection}>
-            {!tableMetaData.data_failed && <div className={classes.tableNameText}>{gettext('Fetching...')}</div>}
-            {tableMetaData.data_failed && <div className={clsx(classes.tableNameText, classes.error)}>{gettext('Failed to get data. Please delete this table.')}</div>}
+          <div className='TableNode-tableSection'>
+            {!tableMetaData.data_failed && <div className='TableNode-tableNameText'>{gettext('Fetching...')}</div>}
+            {tableMetaData.data_failed && <div className={'TableNode-tableNameText TableNode-error'}>{gettext('Failed to get data. Please delete this table.')}</div>}
           </div>}
         {!tableMetaData.is_promise && <>
-          <div className={classes.tableSection}>
+          <div className='TableNode-tableSection'>
             <RowIcon icon={SchemaIcon}/>
-            <div className={classes.tableNameText} data-test="schema-name">{tableData.schema}</div>
+            <div className='TableNode-tableNameText' data-test="schema-name">{tableData.schema}</div>
           </div>
-          <div className={classes.tableSection}>
+          <div className='TableNode-tableSection'>
             <RowIcon icon={TableIcon} />
-            <div className={classes.tableNameText} data-test="table-name">{tableData.name}</div>
+            <div className='TableNode-tableNameText' data-test="table-name">{tableData.name}</div>
           </div>
           {tableData.columns.length > 0 && <div>
             {_.map(tableData.columns, (col)=>this.generateColumn(col, localFkCols, localUkCols))}
           </div>}
         </>}
-      </div>
+      </StyledDiv>
     );
   }
 }
 
-export const TableNodeWidget = withStyles(styles)(TableNodeWidgetRaw);
-
-TableNodeWidgetRaw.propTypes = {
+TableNodeWidget.propTypes = {
   node: PropTypes.instanceOf(TableNodeModel),
   engine: PropTypes.instanceOf(DiagramEngine),
   classes: PropTypes.object,
diff --git a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
index 5ee44910f..f8167a2d9 100644
--- a/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
+++ b/web/pgadmin/tools/grant_wizard/static/js/GrantWizard.jsx
@@ -12,7 +12,6 @@ import _ from 'lodash';
 import url_for from 'sources/url_for';
 import React, { useEffect } from 'react';
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import Wizard from '../../../../static/js/helpers/wizard/Wizard';
 import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
 import PgTable from 'sources/components/PgTable';
@@ -20,46 +19,12 @@ import { getNodePrivilegeRoleSchema } from '../../../../../pgadmin/browser/serve
 import { InputSQL, FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import getApiInstance from '../../../../static/js/api_instance';
 import SchemaView from '../../../../static/js/SchemaView';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import PrivilegeSchema from './privilege_schema.ui';
 import { usePgAdmin } from '../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles(() =>
-  ({
-    root: {
-      height: '100%'
-    },
-    searchBox: {
-      marginBottom: '1em',
-      display: 'flex',
-    },
-    searchPadding: {
-      flex: 2.5
-    },
-    searchInput: {
-      flex: 1,
-      marginTop: 2,
-      borderLeft: 'none',
-      paddingLeft: 5
-    },
-    grantWizardSql: {
-      height: '90% !important',
-      width: '100%'
-    },
-    privilegeStep: {
-      height: '100%',
-      overflow: 'auto'
-    },
-    panelContent: {
-      flexGrow: 1,
-      minHeight: 0
-    }
-  }),
-);
-
 export default function GrantWizard({ sid, did, nodeInfo, nodeData, onClose }) {
-  const classes = useStyles();
+
   let columns = [
     {
 
@@ -310,11 +275,10 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData, onClose }) {
       loaderText={loaderText}
     >
       <WizardStep stepId={0}>
-        <Box className={classes.panelContent}>
+        <Box sx={{flexGrow: 1, minHeight: 0}}>
           <PgTable
             caveTable={false}
             tableNoBorder={false}
-            className={classes.table}
             height={window.innerHeight - 450}
             columns={columns}
             data={tableData}
@@ -327,7 +291,7 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData, onClose }) {
       </WizardStep>
       <WizardStep
         stepId={1}
-        className={clsx(classes.privilegeStep)}>
+        sx={{ height:'100%', overflow:'auto'}}>
         {privSchemaInstance &&
           <SchemaView
             formType={'dialog'}
@@ -347,7 +311,6 @@ export default function GrantWizard({ sid, did, nodeInfo, nodeData, onClose }) {
         <Box>{gettext('The SQL below will be executed on the database server to grant the selected privileges. Please click on Finish to complete the process.')}</Box>
         <InputSQL
           onLable={true}
-          className={classes.grantWizardSql}
           readonly={true}
           value={msqlData.toString()} />
       </WizardStep>
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 9901caaf4..7090be80b 100644
--- a/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx
+++ b/web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx
@@ -8,11 +8,11 @@
 //////////////////////////////////////////////////////////////
 
 import gettext from 'sources/gettext';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import url_for from 'sources/url_for';
 import React from 'react';
 import { Box, Paper} from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import Wizard from '../../../../static/js/helpers/wizard/Wizard';
 import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
 import { FormFooterMessage, MESSAGE_TYPE, FormNote } from '../../../../static/js/components/FormComponents';
@@ -22,39 +22,33 @@ import ImportExportSelectionSchema from './import_export_selection.ui';
 import CheckBoxTree from '../../../../static/js/components/CheckBoxTree';
 import getApiInstance from '../../../../static/js/api_instance';
 import PropTypes from 'prop-types';
-import { commonTableStyles } from '../../../../static/js/Theme';
-import clsx from 'clsx';
 import pgAdmin from 'sources/pgadmin';
+import Table from '../../../../static/js/components/Table';
 
-const useStyles = makeStyles(() =>
+const StyledBox = styled(Box)(() =>
   ({
-    root: {
-      height: '100%'
-    },
-    treeContainer: {
-      flexGrow: 1,
-      minHeight: 0,
-    },
-    boxText: {
-      paddingBottom: '5px'
-    },
-    noOverflow: {
-      overflow: 'hidden'
-    },
-    summaryContainer: {
-      flexGrow: 1,
-      minHeight: 0,
-      overflow: 'auto',
-    },
-    noteContainer: {
-      marginTop: '5px',
+    height: '100%',
+    '& .ImportExportServers-noOverflow': {
+      overflow: 'hidden',
+      '& .ImportExportServers-treeContainer': {
+        flexGrow: 1,
+        minHeight: 0,
+      },
+      '& .ImportExportServers-boxText': {
+        paddingBottom: '5px'
+      },
+      '& .ImportExportServers-summaryContainer': {
+        flexGrow: 1,
+        minHeight: 0,
+        overflow: 'auto',
+      },
+      '& .ImportExportServers-noteContainer': {
+        marginTop: '5px',
+      }
     }
-  }),
-);
+  }));
 
 export default function ImportExportServers({onClose}) {
-  const classes = useStyles();
-  const tableClasses = commonTableStyles();
 
   let steps = [gettext('Import/Export'), gettext('Database Servers'), gettext('Summary')];
   const [loaderText, setLoaderText] = React.useState('');
@@ -202,7 +196,7 @@ export default function ImportExportServers({onClose}) {
   };
 
   return (
-    <Box className={classes.root}>
+    <StyledBox>
       <Loader message={loaderText} />
       <Wizard
         title={gettext('Import/Export Servers')}
@@ -227,18 +221,18 @@ export default function ImportExportServers({onClose}) {
           />
           <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errMsg} onClose={onErrClose} />
         </WizardStep>
-        <WizardStep stepId={1} className={classes.noOverflow}>
-          <Box className={classes.boxText}>{gettext('Select the Server Groups/Servers to import/export:')}</Box>
-          <Box className={classes.treeContainer}>
+        <WizardStep stepId={1} className='ImportExportServers-noOverflow'>
+          <Box className='ImportExportServers-boxText'>{gettext('Select the Server Groups/Servers to import/export:')}</Box>
+          <Box className='ImportExportServers-treeContainer'>
             <CheckBoxTree treeData={serverData} getSelectedServers={(selServers) => {
               setSelectedServers(selServers);
             }}/>
           </Box>
         </WizardStep>
-        <WizardStep stepId={2} className={classes.noOverflow}>
-          <Box className={classes.boxText}>{gettext(summaryText)}</Box>
-          <Paper variant="outlined" elevation={0} className={classes.summaryContainer}>
-            <table className={clsx(tableClasses.table)}>
+        <WizardStep stepId={2} className='ImportExportServers-noOverflow'>
+          <Box className='ImportExportServers-boxText'>{gettext(summaryText)}</Box>
+          <Paper variant="outlined" elevation={0} className='ImportExportServers-summaryContainer'>
+            <Table>
               <thead>
                 <tr>
                   <th>Server Group</th>
@@ -255,13 +249,13 @@ export default function ImportExportServers({onClose}) {
                   </tr>
                 ))}
               </tbody>
-            </table>
+            </Table>
           </Paper>
           {selectionFormData.imp_exp == 'i' &&
-          <FormNote className={classes.noteContainer} text={noteText}/> }
+          <FormNote className='ImportExportServers-noteContainer' text={noteText}/> }
         </WizardStep>
       </Wizard>
-    </Box>
+    </StyledBox>
   );
 }
 ImportExportServers.propTypes = {
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 cdc766dd6..bd2af5693 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
@@ -11,29 +11,14 @@ import PropTypes from 'prop-types';
 import React, { useContext, useState } from 'react';
 
 import { Box, Grid, Typography } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 
 import { InputSelect } from '../../../../../static/js/components/FormComponents';
 import { SchemaDiffEventsContext } from './SchemaDiffComponent';
 import { SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants';
 
 
-const useStyles = makeStyles(() => ({
-  root: {
-    padding: '0rem'
-  },
-  spanLabel: {
-    alignSelf: 'center',
-    marginRight: '4px',
-  },
-  inputLabel: {
-    padding: '0.3rem',
-  },
-}));
-
 export function InputComponent({ label, serverList, databaseList, schemaList, diff_type, selectedSid = null, selectedDid=null, selectedScid=null }) {
 
-  const classes = useStyles();
   const [selectedServer, setSelectedServer] = useState(selectedSid);
   const [selectedDatabase, setSelectedDatabase] = useState(selectedDid);
   const [selectedSchema, setSelectedSchema] = useState(selectedScid);
@@ -71,16 +56,16 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
   };
 
   return (
-    <Box className={classes.root}>
+    <Box sx={{padding: '0rem'}}>
       <Grid
         container
         direction="row"
         alignItems="center"
       >
-        <Grid item lg={2} md={2} sm={2} xs={2} className={classes.inputLabel}>
+        <Grid item lg={2} md={2} sm={2} xs={2} sx={{padding: '0.3rem'}}>
           <Typography id={label}>{label}</Typography>
         </Grid>
-        <Grid item lg={4} md={4} sm={4} xs={4} className={classes.inputLabel}>
+        <Grid item lg={4} md={4} sm={4} xs={4} sx={{padding: '0.3rem'}}>
           <InputSelect
             options={serverList}
             optionsReloadBasis={serverList?.length}
@@ -95,7 +80,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
           ></InputSelect>
         </Grid>
 
-        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
+        <Grid item lg={3} md={3} sm={3} xs={3} sx={{padding: '0.3rem'}}>
           <InputSelect
             options={databaseList}
             optionsReloadBasis={databaseList?.map ? _.join(databaseList.map((c)=>c.value), ',') : null}
@@ -111,7 +96,7 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
           ></InputSelect>
         </Grid>
 
-        <Grid item lg={3} md={3} sm={3} xs={3} className={classes.inputLabel}>
+        <Grid item lg={3} md={3} sm={3} xs={3} sx={{padding: '0.3rem'}}>
           <InputSelect
             options={schemaList}
             optionsReloadBasis={schemaList?.map ? _.join(schemaList.map((c)=>c.value), ',') : null}
@@ -127,7 +112,6 @@ export function InputComponent({ label, serverList, databaseList, schemaList, di
           ></InputSelect>
         </Grid>
       </Grid>
-
     </Box >
   );
 }
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 3d44fc831..4668df1ef 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
@@ -7,22 +7,16 @@
 //
 //////////////////////////////////////////////////////////////
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-
 import { SelectColumn } from 'react-data-grid';
 import React, { useContext, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
-
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
 import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import InfoIcon from '@mui/icons-material/InfoRounded';
-
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
-
-
 import { FILTER_NAME, SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants';
 import { SchemaDiffContext, SchemaDiffEventsContext } from './SchemaDiffComponent';
 import { InputCheckbox } from '../../../../../static/js/components/FormComponents';
@@ -30,152 +24,148 @@ import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid
 import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
 
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-
-    paddingTop: '0.5rem',
-    display: 'flex',
-    height: '100%',
-    flexDirection: 'column',
-    color: theme.palette.text.primary,
-    backgroundColor: theme.otherVars.qtDatagridBg,
-    border: 'none',
-    fontSize: '13px',
-    '& .rdg': {
-      flex: 1,
-      borderTop: '1px solid' + theme.otherVars.borderColor,
-    },
-    '--rdg-background-color': theme.palette.default.main,
-    '--rdg-selection-color': theme.palette.primary.main,
-    '& .rdg-cell': {
-      padding: 0,
-      boxShadow: 'none',
-      color: theme.otherVars.schemaDiff.diffColorFg + ' !important',
-      ...theme.mixins.panelBorder.right,
-      ...theme.mixins.panelBorder.bottom,
-      '&[aria-colindex="1"]': {
-        padding: 0,
-      },
-      '&[aria-selected=true]:not([role="columnheader"]):not([aria-colindex="1"])': {
-        outlineWidth: '0',
-        outlineOffset: '-1px',
-        color: theme.otherVars.qtDatagridSelectFg,
-      },
-      '&[aria-selected=true][aria-colindex="1"]': {
-        outlineWidth: 0,
-      }
-    },
-    '& .rdg-header-row .rdg-cell': {
-      padding: 0,
-      paddingLeft: '0.5rem',
-      boxShadow: 'none',
+const StyledBox = styled(Box)(({theme}) => ({
+  paddingTop: '0.5rem',
+  display: 'flex',
+  height: '100%',
+  flexDirection: 'column',
+  color: theme.palette.text.primary,
+  backgroundColor: theme.otherVars.qtDatagridBg,
+  border: 'none',
+  fontSize: '13px',
+  '--rdg-background-color': theme.palette.default.main,
+  '--rdg-selection-color': theme.palette.primary.main,
+  '& .ResultGridComponent-gridPanel': { 
+    '--rdg-background-color': theme.palette.default.main + ' !important',
+    '&.ResultGridComponent-grid': {
+      fontSize: '13px',
+      '--rdg-selection-color': 'none'
     },
     '& .rdg-header-row': {
       backgroundColor: theme.palette.background.default,
+      '& .rdg-cell': {
+        padding: 0,
+        paddingLeft: '0.5rem',
+        boxShadow: 'none',
+        '&[aria-colindex="1"]': {
+          padding: 0,
+        },
+        '& .ResultGridComponent-headerSelectCell': {
+          padding: '0rem 0.3rem 0 0.3rem'
+        },
+      },
     },
     '& .rdg-row': {
       backgroundColor: theme.palette.background.default,
       '&[aria-selected=true]': {
         backgroundColor: theme.palette.primary.light,
         color: theme.otherVars.qtDatagridSelectFg,
-        '& .rdg-cell:nth-child(1)': {
+        '& .rdg-cell:nth-of-type(1)': {
           backgroundColor: 'transparent',
           outlineColor: 'transparent',
           color: theme.palette.primary.contrastText,
-        }
+        },
       },
-    }
-  },
-  grid: {
-    fontSize: '13px',
-    '--rdg-selection-color': 'none'
-  },
-  subRow: {
-    paddingLeft: '1rem'
-  },
-  recordRow: {
-    marginLeft: '2.7rem',
-    height: '1.3rem',
-    width: '1.3rem',
-    display: 'inline-block',
-    marginRight: '0.3rem',
-    paddingLeft: '0.5rem',
-  },
-  rowIcon: {
-    display: 'inline-block !important',
-    height: '1.3rem',
-    width: '1.3rem'
-  },
-  cellExpand: {
-    display: 'table',
-    blockSize: '100%',
-
-    '& > span': {
-      verticalAlign: 'middle',
-      cursor: 'pointer',
-
-      '& > span': {
-        display: 'flex',
-        alignItems: 'center',
+      '& .rdg-cell': {
+        padding: 0,
+        boxShadow: 'none',
+        color: theme.otherVars.schemaDiff.diffColorFg + ' !important',
+        ...theme.mixins.panelBorder.right,
+        ...theme.mixins.panelBorder.bottom,
+        '&[aria-colindex="1"]': {
+          padding: 0,
+        },
+        '&[aria-selected=true]:not([role="columnheader"]):not([aria-colindex="1"])': {
+          outlineWidth: '0',
+          outlineOffset: '-1px',
+          color: theme.otherVars.qtDatagridSelectFg,
+        },
+        '&[aria-selected=true][aria-colindex="1"]': {
+          outlineWidth: 0,
+        },
+        '& .ResultGridComponent-cellExpand': {
+          display: 'table',
+          blockSize: '100%',
+          '& > span': {
+            verticalAlign: 'middle',
+            cursor: 'pointer',
+            '& > span': {
+              display: 'flex',
+              alignItems: 'center',
+            }
+          },
+          '& .ResultGridComponent-subRow': {
+            paddingLeft: '1rem',
+            '& .ResultGridComponent-rowIcon': {
+              display: 'inline-block !important',
+              height: '1.3rem',
+              width: '1.3rem'
+            },
+            '& .ResultGridComponent-count': {
+              display: 'inline-block !important',
+              '& .ResultGridComponent-countLabel': {
+                paddingLeft: '1rem',
+              },
+              '& .ResultGridComponent-countStyle': {
+                fontWeight: 900,
+                fontSize: '0.8rem',
+                paddingLeft: '0.3rem',
+              },
+            }
+          }
+        },
+        '& .ResultGridComponent-selectedRow': {
+          paddingLeft: '0.5rem',
+          backgroundColor: theme.palette.primary.light,
+        },
+        '& .ResultGridComponent-source': {
+          backgroundColor: theme.otherVars.schemaDiff.sourceRowColor,
+          color: theme.otherVars.schemaDiff.diffSelectFG,
+          paddingLeft: '0.5rem',
+        },
+        '& .ResultGridComponent-target': {
+          backgroundColor: theme.otherVars.schemaDiff.targetRowColor,
+          color: theme.otherVars.schemaDiff.diffSelectFG,
+          paddingLeft: '0.5rem',
+        },
+        '& .ResultGridComponent-different': {
+          backgroundColor: theme.otherVars.schemaDiff.diffRowColor,
+          color: theme.otherVars.schemaDiff.diffSelectFG,
+          paddingLeft: '0.5rem',
+        },
+        '& .ResultGridComponent-identical': {
+          paddingLeft: '0.5rem',
+          color: theme.otherVars.schemaDiff.diffColorFg,
+        },
+        '& .ResultGridComponent-recordRow': {
+          marginLeft: '2.7rem',
+          height: '1.3rem',
+          width: '1.3rem',
+          display: 'inline-block',
+          marginRight: '0.3rem',
+          paddingLeft: '0.5rem',
+        },
+        '& .ResultGridComponent-selectCell': {
+          padding: '0 0.3rem'
+        },
+        '& .ResultGridComponent-selectedRowCheckBox': {
+          backgroundColor: theme.otherVars.schemaDiff.diffSelCheckbox,
+        },
+        '& .ResultGridComponent-selChBox': {
+          paddingLeft: 0,
+        }
       }
-    }
+    },
+    '& .ResultGridComponent-noRowsIcon': {
+      width: '1.1rem',
+      height: '1.1rem',
+      marginRight: '0.5rem',
+    },
+    '&.rdg': {
+      flex: 1,
+      borderTop: '1px solid' + theme.otherVars.borderColor,
+    },
   },
-  gridPanel: {
-    '--rdg-background-color': theme.palette.default.main + ' !important',
-  },
-  source: {
-    backgroundColor: theme.otherVars.schemaDiff.sourceRowColor,
-    color: theme.otherVars.schemaDiff.diffSelectFG,
-    paddingLeft: '0.5rem',
-  },
-  target: {
-    backgroundColor: theme.otherVars.schemaDiff.targetRowColor,
-    color: theme.otherVars.schemaDiff.diffSelectFG,
-    paddingLeft: '0.5rem',
-  },
-  different: {
-    backgroundColor: theme.otherVars.schemaDiff.diffRowColor,
-    color: theme.otherVars.schemaDiff.diffSelectFG,
-    paddingLeft: '0.5rem',
-  },
-  identical: {
-    paddingLeft: '0.5rem',
-    color: theme.otherVars.schemaDiff.diffColorFg,
-  },
-  selectCell: {
-    padding: '0 0.3rem'
-  },
-  headerSelectCell: {
-    padding: '0rem 0.3rem 0 0.3rem'
-  },
-  count: {
-    display: 'inline-block !important',
-  },
-  countStyle: {
-    fontWeight: 900,
-    fontSize: '0.8rem',
-    paddingLeft: '0.3rem',
-  },
-  countLabel: {
-    paddingLeft: '1rem',
-  },
-  selectedRow: {
-    paddingLeft: '0.5rem',
-    backgroundColor: theme.palette.primary.light
-  },
-  selectedRowCheckBox: {
-    paddingLeft: '0.5rem',
-    backgroundColor: theme.otherVars.schemaDiff.diffSelCheckbox,
-  },
-  selChBox: {
-    paddingLeft: 0,
-  },
-  noRowsIcon:{
-    width: '1.1rem',
-    height: '1.1rem',
-    marginRight: '0.5rem',
-  }
-
 }));
 
 function useFocusRef(isSelected) {
@@ -219,8 +209,7 @@ function CellExpanderFormatter({
   isCellSelected,
   expanded,
   filterParams,
-  onCellExpand,
-  classes
+  onCellExpand
 }) {
   const { ref, tabIndex } = useFocusRef(isCellSelected);
   'identicalCount' in row && setRecordCount(row, filterParams);
@@ -233,24 +222,24 @@ function CellExpanderFormatter({
   }
 
   return (
-    <div className={classes.cellExpand}>
+    <div className='ResultGridComponent-cellExpand'>
       <span onClick={onCellExpand} onKeyDown={handleKeyDown}>
-        <span ref={ref} tabIndex={tabIndex} className={'identicalCount' in row ? classes.subRow : null}>
-          {expanded ? <KeyboardArrowDownRoundedIcon /> : <KeyboardArrowRightRoundedIcon />} <span className={clsx(row.icon, classes.rowIcon)}></span>{row.label}
+        <span ref={ref} tabIndex={tabIndex} className={'identicalCount' in row ? 'ResultGridComponent-subRow' : null}>
+          {expanded ? <KeyboardArrowDownRoundedIcon /> : <KeyboardArrowRightRoundedIcon />} <span className={row.icon + ' ResultGridComponent-rowIcon'}></span>{row.label}
           {
             'identicalCount' in row ?
-              <span className={clsx(classes.count)}>
+              <span className={'ResultGridComponent-count'}>
                 {
-                  filterParams.includes(FILTER_NAME.IDENTICAL) && <><span className={classes.countLabel}>{FILTER_NAME.IDENTICAL}:</span> <span className={classes.countStyle}>{row.identicalCount} </span></>
+                  filterParams.includes(FILTER_NAME.IDENTICAL) && <><span className='ResultGridComponent-countLabel'>{FILTER_NAME.IDENTICAL}:</span> <span className='ResultGridComponent-countStyle'>{row.identicalCount} </span></>
                 }
                 {
-                  filterParams.includes(FILTER_NAME.DIFFERENT) && <><span className={classes.countLabel}>{FILTER_NAME.DIFFERENT}:</span> <span className={classes.countStyle}>{row.differentCount}  </span></>
+                  filterParams.includes(FILTER_NAME.DIFFERENT) && <><span className='ResultGridComponent-countLabel'>{FILTER_NAME.DIFFERENT}:</span> <span className='ResultGridComponent-countStyle'>{row.differentCount}  </span></>
                 }
                 {
-                  filterParams.includes(FILTER_NAME.SOURCE_ONLY) && <><span className={classes.countLabel}>{FILTER_NAME.SOURCE_ONLY}:</span> <span className={classes.countStyle}>{row.sourceOnlyCount}  </span></>
+                  filterParams.includes(FILTER_NAME.SOURCE_ONLY) && <><span className='ResultGridComponent-countLabel'>{FILTER_NAME.SOURCE_ONLY}:</span> <span className='ResultGridComponent-countStyle'>{row.sourceOnlyCount}  </span></>
                 }
                 {
-                  filterParams.includes(FILTER_NAME.TARGET_ONLY) && <><span className={classes.countLabel}>{FILTER_NAME.TARGET_ONLY}: </span><span className={classes.countStyle}>{row.targetOnlyCount}</span></>
+                  filterParams.includes(FILTER_NAME.TARGET_ONLY) && <><span className='ResultGridComponent-countLabel'>{FILTER_NAME.TARGET_ONLY}: </span><span className='ResultGridComponent-countStyle'>{row.targetOnlyCount}</span></>
                 }
               </span>
               : null
@@ -444,7 +433,7 @@ function reducer(rows, { type, id, filterParams, gridData }) {
 }
 
 export function ResultGridComponent({ gridData, allRowIds, filterParams, selectedRowIds, transId, sourceData, targetData }) {
-  const classes = useStyles();
+
   const [rows, dispatch] = useReducer(reducer, [...gridData]);
   const [selectedRows, setSelectedRows] = useState([]);
   const [rootSelection, setRootSelection] = useState(false);
@@ -544,15 +533,15 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
   function getStyleClassName(row, selectedRowIds, isCellSelected, activeRowId, isCheckbox = false) {
     let clsName = null;
     if (selectedRowIds.includes(`${row.id}`) || isCellSelected || row.id == activeRowId) {
-      clsName = isCheckbox ? classes.selectedRowCheckBox : classes.selectedRow;
+      clsName = isCheckbox ? 'ResultGridComponent-selectedRowCheckBox' : 'ResultGridComponent-selectedRow';
     } else if (row.status == FILTER_NAME.DIFFERENT) {
-      clsName = classes.different;
+      clsName = 'ResultGridComponent-different';
     } else if (row.status == FILTER_NAME.SOURCE_ONLY) {
-      clsName = classes.source;
+      clsName = 'ResultGridComponent-source';
     } else if (row.status == FILTER_NAME.TARGET_ONLY) {
-      clsName = classes.target;
+      clsName = 'ResultGridComponent-target';
     } else if (row.status == FILTER_NAME.IDENTICAL) {
-      clsName = classes.identical;
+      clsName = 'ResultGridComponent-identical';
     }
 
     return clsName;
@@ -568,7 +557,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
         return (
           <InputCheckbox
             cid={_.uniqueId('rgc')}
-            className={classes.headerSelectCell}
+            className='ResultGridComponent-headerSelectCell'
             value={selectedRows.length == allRowIds.length ? rootSelection : false}
             size='small'
             onChange={(e) => {
@@ -589,9 +578,9 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
       formatter({ row, isCellSelected }) {
         isCellSelected && setActiveRow(row.id);
         return (
-          <Box className={!row?.children && clsx(getStyleClassName(row, selectedRows, isCellSelected, activeRow, true), classes.selChBox)}>
+          <Box className={!row?.children && getStyleClassName(row, selectedRows, isCellSelected, activeRow, true) +  ' ResultGridComponent-selChBox'}>
             <InputCheckbox
-              className={classes.selectCell}
+              className='ResultGridComponent-selectCell'
               cid={`${row.id}`}
               value={selectedRows.includes(`${row.id}`)}
               size='small'
@@ -639,14 +628,13 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
                 expanded={row.isExpanded === true}
                 filterParams={filterParams}
                 onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow', filterParams: filterParams, gridData: gridData, selectedRows: selectedRows })}
-                classes={classes}
               />
             )}
             <div className="rdg-cell-value">
 
               {!hasChildren && (
-                <Box className={clsx(getStyleClassName(row, selectedRows, isCellSelected, activeRow), classes.status)}>
-                  <span className={clsx(classes.recordRow, row.icon)}></span>
+                <Box className={getStyleClassName(row, selectedRows, isCellSelected, activeRow)}>
+                  <span className={'ResultGridComponent-recordRow ' + row.icon}></span>
                   {row.label}
                 </Box>
               )}
@@ -728,13 +716,13 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
   }
 
   return (
-    <Box className={classes.root} flexGrow="1" minHeight="0" id="schema-diff-grid">
+    <StyledBox flexGrow="1" minHeight="0" id="schema-diff-grid">
       {
         gridData ?
           <PgReactDataGrid
             id="schema-diff-result-grid"
             columns={columns} rows={rows}
-            className={clsx('big-grid', classes.gridPanel, classes.grid)}
+            className={'ResultGridComponent-gridPanel ResultGridComponent-grid'}
             treeDepth={2}
             enableRowSelect={true}
             defaultColumnOptions={{
@@ -747,14 +735,14 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte
             rowKeyGetter={rowKeyGetter}
             direction={'vertical-lr'}
             noRowsText={gettext('No difference found')}
-            noRowsIcon={<InfoIcon className={classes.noRowsIcon} />}
+            noRowsIcon={<InfoIcon className='ResultGridComponent-noRowsIcon' />}
           />
           :
           <>
             {gettext('Loading result grid...')}
           </>
       }
-    </Box>
+    </StyledBox>
   );
 }
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
index b231c7171..39134e196 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
@@ -8,52 +8,57 @@
 //////////////////////////////////////////////////////////////
 import gettext from 'sources/gettext';
 
+import { styled } from '@mui/material/styles';
+
 import React, { useContext, useState, useEffect } from 'react';
 
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 import { InputSQL } from '../../../../../static/js/components/FormComponents';
 import { SchemaDiffEventsContext } from './SchemaDiffComponent';
 import { SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants';
 
-
-const useStyles = makeStyles((theme) => ({
-  header: {
+const Root = styled('div')(({theme}) => ({
+  height: '100%',
+  display:'flex',
+  flexDirection:'column',
+  '& .Results-header': {
     padding: '0.5rem',
     borderBottom: '1px solid ' + theme.otherVars.borderColor,
   },
-  sqlContainer: {
+  '& .Results-labelContainer': {
+    display: 'flex',
+    flexDirection: 'row',
+    '& .Results-label': {
+      padding: '0.2rem 0.5rem',
+      width: '33.33%'
+    },
+  },
+  '& .Results-sqlContainer': {
     display: 'flex',
     flexDirection: 'row',
     padding: '0rem 0rem 0.5rem',
     flexGrow: 1,
-    overflow: 'hidden'
-  },
-  sqldata: {
-    display: 'flex',
-    flexGrow: 1,
-    flexDirection: 'column',
-    padding: '0.2rem 0.5rem',
-    width: '33.33%',
-  },
-  labelContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-  },
-  label: {
-    padding: '0.2rem 0.5rem',
-    width: '33.33%'
-  },
-  sqlInput: {
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: 1,
+    overflow: 'hidden',
     height: '100%',
-  }
+    '& .Results-sqldata': {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'column',
+      padding: '0.2rem 0.5rem',
+      width: '33.33%',
+      height: '100%',
+      '& .Results-sqlInput': {
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1,
+        height: '100%',
+      }
+    },
+  },  
 }));
 
 export function Results() {
-  const classes = useStyles();
+
   const [sourceSQL, setSourceSQL] = useState(null);
   const [targetSQL, setTargetSQL] = useState(null);
   const [sqlDiff, setSqlDiff] = useState(null);
@@ -72,20 +77,19 @@ export function Results() {
     setSqlDiff(resultData.SQLdiff);
   };
 
-
   return (
-    <>
-      <Box className={classes.header}>
-        <span>{gettext('DDL Comparison')}</span>
+    (<Root>
+      <Box className='Results-header'>
+        <span>{gettext('DDL Comparision')}</span>
       </Box>
-      <Box className={classes.labelContainer}>
-        <Box className={classes.label}>{gettext('Source')}</Box>
-        <Box className={classes.label}>{gettext('Target')}</Box>
-        <Box className={classes.label}>{gettext('Difference')}</Box>
+      <Box className='Results-labelContainer'>
+        <Box className='Results-label'>{gettext('Source')}</Box>
+        <Box className='Results-label'>{gettext('Target')}</Box>
+        <Box className='Results-label'>{gettext('Difference')}</Box>
       </Box>
-      <Box className={classes.sqlContainer}>
-        <Box className={classes.sqldata}>
-          <Box className={classes.sqlInput}>
+      <Box className='Results-sqlContainer'>
+        <Box className='Results-sqldata'>
+          <Box className='Results-sqlInput'>
             <InputSQL
               onLable={true}
               value={sourceSQL}
@@ -97,8 +101,8 @@ export function Results() {
             />
           </Box>
         </Box>
-        <Box className={classes.sqldata}>
-          <Box className={classes.sqlInput}>
+        <Box className='Results-sqldata'>
+          <Box className='Results-sqlInput'>
             <InputSQL
               onLable={true}
               value={targetSQL}
@@ -110,8 +114,8 @@ export function Results() {
             />
           </Box>
         </Box>
-        <Box className={classes.sqldata}>
-          <Box className={classes.sqlInput}>
+        <Box className='Results-sqldata'>
+          <Box className='Results-sqlInput'>
             <InputSQL
               onLable={true}
               value={sqlDiff}
@@ -129,7 +133,7 @@ export function Results() {
           </Box>
         </Box>
       </Box>
-    </>
+    </Root>)
   );
 }
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffButtonComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffButtonComponent.jsx
index d950dd35c..8597c9c39 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffButtonComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffButtonComponent.jsx
@@ -7,6 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 
 import React, { useState, useRef, useContext, useEffect } from 'react';
@@ -17,7 +18,6 @@ import { Box } from '@mui/material';
 import CompareArrowsRoundedIcon from '@mui/icons-material/CompareArrowsRounded';
 import FeaturedPlayListRoundedIcon from '@mui/icons-material/FeaturedPlayListRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { makeStyles } from '@mui/styles';
 
 import { DefaultButton, PgButtonGroup, PgIconButton, PrimaryButton } from '../../../../../static/js/components/Buttons';
 import { FilterIcon } from '../../../../../static/js/components/ExternalIcon';
@@ -26,21 +26,19 @@ import { FILTER_NAME, MENUS, MENUS_COMPARE_CONSTANT, SCHEMA_DIFF_EVENT, IGNORE_O
 import { SchemaDiffContext, SchemaDiffEventsContext } from './SchemaDiffComponent';
 
 
-const useStyles = makeStyles((theme) => ({
-  emptyIcon: {
-    width: '1.5rem'
+const Root = styled('div')(({theme}) => ({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  '& .SchemaDiffButtons-compareBtn': {
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'flex-start',
+    paddingLeft: '1.5rem',
+    [theme.breakpoints.down('sm')]: {
+      paddingTop: '0.3rem',
+    },
   },
-  diff_btn: {
-    marginRight: '1rem'
-  },
-  noactionBtn: {
-    cursor: 'default',
-    '&:hover': {
-      backgroundColor: 'inherit',
-      cursor: 'default'
-    }
-  },
-  scriptBtn: {
+  '& .SchemaDiffButtons-scriptBtn': {
     display: 'flex',
     justifyContent: 'flex-end',
     paddingRight: '0.3rem',
@@ -49,26 +47,22 @@ const useStyles = makeStyles((theme) => ({
       flexGrow: 1,
     },
   },
-  filterBtn: {
+  '&.SchemaDiffButtons-filterBtn': {
     [theme.breakpoints.down('sm')]: {
       paddingTop: '0.3rem',
       flexGrow: 1,
-    }
-  },
-  compareBtn: {
-    display: 'flex',
-    flexGrow: 1,
-    justifyContent: 'flex-start',
-    paddingLeft: '1.5rem',
-    [theme.breakpoints.down('sm')]: {
-      paddingTop: '0.3rem',
     },
-  }
+    '& .SchemaDiffButtons-noactionBtn': {
+      cursor: 'default',
+      '&:hover': {
+        backgroundColor: 'inherit',
+        cursor: 'default'
+      }
+    },
+  },
 }));
 
 export function SchemaDiffButtonComponent({ sourceData, targetData, selectedRowIds, rows, compareParams, filterParams = [FILTER_NAME.DIFFERENT, FILTER_NAME.SOURCE_ONLY, FILTER_NAME.TARGET_ONLY] }) {
-  const classes = useStyles();
-
   const filterRef = useRef(null);
   const compareRef = useRef(null);
 
@@ -164,8 +158,8 @@ export function SchemaDiffButtonComponent({ sourceData, targetData, selectedRowI
   };
 
   return (
-    <>
-      <Box className={classes.compareBtn}>
+    (<Root>
+      <Box className='SchemaDiffButtons-compareBtn'>
         <PgButtonGroup size="small" disabled={isDisableCompare}>
           <PrimaryButton startIcon={<CompareArrowsRoundedIcon />}
             onClick={compareDiff}>{gettext('Compare')}</PrimaryButton>
@@ -173,14 +167,14 @@ export function SchemaDiffButtonComponent({ sourceData, targetData, selectedRowI
             name={MENUS.COMPARE} ref={compareRef} onClick={toggleMenu} ></PgIconButton>
         </PgButtonGroup>
       </Box>
-      <Box className={classes.scriptBtn}>
+      <Box className='SchemaDiffButtons-scriptBtn'>
         <PgButtonGroup size="small" disabled={selectedRowIds?.length <= 0}>
           <DefaultButton startIcon={<FeaturedPlayListRoundedIcon />} onClick={generateScript}>{gettext('Generate Script')}</DefaultButton>
         </PgButtonGroup>
       </Box>
-      <Box className={classes.filterBtn}>
+      <Box className='SchemaDiffButtons-filterBtn'>
         <PgButtonGroup size="small" disabled={isDisableCompare} style={{ paddingRight: '0.3rem' }}>
-          <DefaultButton startIcon={<FilterIcon />} className={classes.noactionBtn}
+          <DefaultButton startIcon={<FilterIcon />} className='SchemaDiffButtons-noactionBtn'
           >{gettext('Filter')}</DefaultButton>
           <PgIconButton title={gettext('Filter')} disabled={isDisableCompare} icon={<KeyboardArrowDownIcon />} splitButton
             name={MENUS.FILTER} ref={filterRef} onClick={toggleMenu} ></PgIconButton>
@@ -218,7 +212,7 @@ export function SchemaDiffButtonComponent({ sourceData, targetData, selectedRowI
         <PgMenuItem hasCheck checked={selectedFilters.includes(FILTER_NAME.TARGET_ONLY)}
           onClick={() => { selectFilterOption(FILTER_NAME.TARGET_ONLY); }}>{FILTER_NAME.TARGET_ONLY}</PgMenuItem>
       </PgMenu>
-    </>
+    </Root>)
   );
 }
 
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 7918e32c3..6ab784e9a 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
@@ -14,7 +14,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { Box, Grid } from '@mui/material';
 import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
 import HelpIcon from '@mui/icons-material/HelpRounded';
-import { makeStyles } from '@mui/styles';
+
 
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
@@ -33,32 +33,6 @@ import { openSocket, socketApiGet } from '../../../../../static/js/socket_instan
 import { parseApiError } from '../../../../../static/js/api_instance';
 import { usePgAdmin } from '../../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles(() => ({
-  table: {
-    minWidth: 650,
-  },
-  summaryContainer: {
-    flexGrow: 1,
-    minHeight: 0,
-    overflow: 'auto',
-  },
-  note: {
-    marginTop: '1.2rem',
-    textAlign: 'center',
-  },
-  helpBtn: {
-    display: 'flex',
-    flexDirection: 'row-reverse',
-    paddingRight: '0.3rem'
-  },
-  compareComp: {
-    flexGrow: 1,
-  },
-  diffBtn: {
-    display: 'flex',
-    justifyContent: 'flex-end'
-  }
-}));
 
 function generateFinalScript(script_array, scriptHeader, script_body) {
   _.each(Object.keys(script_array).reverse(), function (s) {
@@ -114,7 +88,6 @@ const onHelpClick=()=>{
 };
 
 export function SchemaDiffCompare({ params }) {
-  const classes = useStyles();
   const schemaDiffToolContext = useContext(SchemaDiffContext);
   const eventBus = useContext(SchemaDiffEventsContext);
 
@@ -728,7 +701,7 @@ export function SchemaDiffCompare({ params }) {
               diff_type={TYPE.SOURCE}
             ></InputComponent>
           </Grid>
-          <Grid item lg={5} md={5} sm={2} xs={2} className={classes.helpBtn}>
+          <Grid item lg={5} md={5} sm={2} xs={2} sx={{  display: 'flex',flexDirection: 'row-reverse',paddingRight: '0.3rem'}}>
             <PgButtonGroup size="small">
               <PgIconButton data-test='schema-diff-help' title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
             </PgButtonGroup>
@@ -752,7 +725,7 @@ export function SchemaDiffCompare({ params }) {
             ></InputComponent>
           </Grid>
 
-          <Grid item lg={5} md={5} sm={12} xs={12} className={classes.diffBtn}>
+          <Grid item lg={5} md={5} sm={12} xs={12}>
             <SchemaDiffButtonComponent
               sourceData={{
                 'sid': selectedSourceSid,
@@ -792,7 +765,7 @@ export function SchemaDiffCompare({ params }) {
           }}
         ></ResultGridComponent>
         :
-        <Box className={classes.note}>
+        <Box sx={{  marginTop: '1.2rem',textAlign: 'center'}}>
           <InfoRoundedIcon style={{ fontSize: '1.2rem' }} />
           {gettext(' Source and Target database server must be of the same major version.')}<br />
           <strong>{gettext(' Database Compare:')}</strong>
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 15adfbfae..46ae36c94 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
@@ -9,13 +9,13 @@
 
 
 import React, { createContext, useMemo, useRef } from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import {DividerBox} from 'rc-dock';
 
 import url_for from 'sources/url_for';
 
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
 
 import { Results } from './Results';
 import { SchemaDiffCompare } from './SchemaDiffCompare';
@@ -24,21 +24,22 @@ import getApiInstance, { callFetch } from '../../../../../static/js/api_instance
 import { useModal } from '../../../../../static/js/helpers/ModalProvider';
 import usePreferences from '../../../../../preferences/static/js/store';
 
+
 export const SchemaDiffEventsContext = createContext();
 export const SchemaDiffContext = createContext();
 
-const useStyles = makeStyles((theme) => ({
-  resultPanle: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .SchemaDiff-resultPanel': {
     backgroundColor: theme.palette.default.main,
     zIndex: 5,
     border: '1px solid ' + theme.otherVars.borderColor,
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    height: 0,
     overflow: 'hidden',
+    height: 0,
   },
-  comparePanel:{
+  '& .SchemaDiff-comparePanel': {
     overflow: 'hidden',
     border: '1px solid ' + theme.otherVars.borderColor,
     display: 'flex',
@@ -49,7 +50,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export default function SchemaDiffComponent({params}) {
-  const classes = useStyles();
   const eventBus = useRef(new EventBus());
   const containerRef = React.useRef(null);
   const api = getApiInstance();
@@ -85,14 +85,14 @@ export default function SchemaDiffComponent({params}) {
   return (
     <SchemaDiffContext.Provider value={schemaDiffContextValue}>
       <SchemaDiffEventsContext.Provider value={eventBus.current}>
-        <Box display="flex" flexDirection="column" flexGrow="1" height="100%" tabIndex="0" style={{minHeight: 80}}>
+        <StyledBox display="flex" flexDirection="column" flexGrow="1" height="100%" tabIndex="0" style={{minHeight: 80}}>
           <DividerBox mode='vertical' style={{flexGrow: 1}}>
-            <div className={classes.comparePanel} id="schema-diff-compare-container" ref={containerRef}><SchemaDiffCompare params={params} /></div>
-            <div className={classes.resultPanle} id="schema-diff-result-container">
+            <div className='SchemaDiff-comparePanel' id="schema-diff-compare-container" ref={containerRef}><SchemaDiffCompare params={params} /></div>
+            <div className='SchemaDiff-resultPanel' id="schema-diff-result-container">
               <Results />
             </div>
           </DividerBox>
-        </Box>
+        </StyledBox>
       </SchemaDiffEventsContext.Provider>
     </SchemaDiffContext.Provider>
   );
diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
index 7b1430a2c..9813790b9 100644
--- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
+++ b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import HelpIcon from '@mui/icons-material/HelpRounded';
@@ -16,84 +16,87 @@ import pgAdmin from 'sources/pgadmin';
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
-import clsx from 'clsx';
 import getApiInstance, { parseApiError } from '../../../../static/js/api_instance';
 import { PrimaryButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import { useModalStyles } from '../../../../static/js/helpers/ModalProvider';
+import { ModalContent } from '../../../../static/js/components/ModalContent';
 import { FormFooterMessage, InputSelect, InputText, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import PgReactDataGrid from '../../../../static/js/components/PgReactDataGrid';
 
-const pgBrowser = pgAdmin.Browser;
-
-const useStyles = makeStyles((theme)=>({
-  grid: {
-    fontSize: '13px',
-    '& .rdg-header-row': {
-      '& .rdg-cell': {
-        padding: '0px 4px',
-      }
-    },
-    '& .rdg-cell': {
-      padding: '0px 4px',
-      '&[aria-colindex="1"]': {
-        padding: '0px 4px',
-        '&.rdg-editor-container': {
-          padding: '0px',
-        },
-      }
-    }
-  },
-  toolbar: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .SearchObjects-toolbar': {
     padding: '4px',
     display: 'flex',
     ...theme.mixins.panelBorder?.bottom,
+    '& .SearchObjects-inputSearch': {
+      lineHeight: 1,
+    },
+    '& .SearchObjects-Btnmargin': {
+      marginLeft: '0.25rem',
+    },
   },
-  inputSearch: {
-    lineHeight: 1,
-  },
-  footer1: {
+  '& .SearchObjects-footer1': {
     justifyContent: 'space-between',
     padding: '4px 8px',
     display: 'flex',
     alignItems: 'center',
     borderTop: `1px solid ${theme.otherVars.inputBorderColor}`,
   },
-  footer: {
+  '&.SearchObjects-footer': {
     borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
     padding: '0.5rem',
     display: 'flex',
     width: '100%',
     background: theme.otherVars.headerBg,
   },
-  gridCell: {
-    display: 'inline-block',
-    height: '1.3rem',
-    width: '1.3rem',
+  '& .SearchObjects-grid': {
+    fontSize: '13px !important',
+    '& .rdg-header-row': {
+      '& .rdg-cell': {
+        padding: '0px 4px !important',
+      }
+    },
+    '& .rdg-cell': {
+      padding: '0px 4px',
+      '&[aria-colindex="1"]': {
+        padding: '0px 4px  !important',
+        '&.rdg-editor-container': {
+          padding: '0px',
+        },
+      },
+      '& .SearchObjects-textWrap': {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden'
+      },
+      '& .SearchObjects-cellMuted': {
+        color: `${theme.otherVars.textMuted} !important`,
+        cursor: 'default !important',
+      },
+      '& .SearchObjects-gridCell': {
+        display: 'inline-block',
+        height: '1.3rem',
+        width: '1.3rem',
+        '& .SearchObjects-funcArgs': {
+          cursor: 'pointer',
+        },
+
+      },
+    }
   },
-  funcArgs: {
-    cursor: 'pointer',
-  },
-  cellMuted: {
-    color: `${theme.otherVars.textMuted} !important`,
-    cursor: 'default !important',
-  },
-  textWrap: {
-    textOverflow: 'ellipsis',
-    overflow: 'hidden'
-  }
 }));
 
+const pgBrowser = pgAdmin.Browser;
+
 function ObjectNameFormatter({row}) {
-  const classes = useStyles();
+
   return (
     <div className='rdg-cell-value'>
-      <Box className={row.show_node ? '' : classes.cellMuted}>
-        <span className={clsx(classes.gridCell, row.icon)}></span>
+      <StyledBox className={row.show_node ? '' : 'SearchObjects-cellMuted'}>
+        <span className={('SearchObjects-gridCell ' + row.icon)}></span>
         {row.name}
         {row.other_info != null && row.other_info != '' && (
-          <span tabIndex="-1" className={classes.funcArgs} onClick={()=>{row.showArgs = true;}} onKeyDown={()=>{/* no need */}}> {row?.showArgs ? `(${row.other_info})` : '(...)'}</span>
+          <span tabIndex="-1" className='SearchObjects-funcArgs' onClick={()=>{row.showArgs = true;}} onKeyDown={()=>{/* no need */}}> {row?.showArgs ? `(${row.other_info})` : '(...)'}</span>
         )}
-      </Box>
+      </StyledBox>
     </div>
   );
 }
@@ -102,7 +105,7 @@ ObjectNameFormatter.propTypes = {
 };
 
 function TypePathFormatter({row, column}) {
-  const classes = useStyles();
+
   let val = '';
 
   if(column.key == 'type') {
@@ -112,7 +115,7 @@ function TypePathFormatter({row, column}) {
   }
 
   return (
-    <Box className={clsx(classes.textWrap, row.show_node ? '' : classes.cellMuted)}>{val}</Box>
+    <Box className={'SearchObjects-textWrap ' + (row.show_node ? '' : 'SearchObjects-cellMuted')}>{val}</Box>
   );
 }
 TypePathFormatter.propTypes = {
@@ -270,8 +273,6 @@ function getComparator(sortColumn) {
   };
 }
 export default function SearchObjects({nodeData}) {
-  const classes = useStyles();
-  const modalClasses = useModalStyles();
   const [type, setType] = React.useState('all');
   const [loaderText, setLoaderText] = useState('');
   const [search, setSearch] = useState('');
@@ -392,21 +393,21 @@ export default function SearchObjects({nodeData}) {
   };
 
   return (
-    <Box display="flex" flexDirection="column" height="100%" className={modalClasses.container}>
-      <Box flexGrow="1" display="flex" flexDirection="column" position="relative" overflow="hidden">
+    <ModalContent>
+      <StyledBox>
         <Loader message={loaderText} />
-        <Box className={classes.toolbar}>
-          <InputText type="search" className={classes.inputSearch} data-label="search" placeholder={gettext('Type at least 3 characters')} value={search} onChange={setSearch} onKeyPress={onEnterPress}/>
-          <Box style={{marginLeft: '4px', width: '50%'}}>
+        <Box className='SearchObjects-toolbar'>
+          <InputText type="search" className='SearchObjects-inputSearch' data-label="search" placeholder={gettext('Type at least 3 characters')} value={search} onChange={setSearch} onKeyPress={onEnterPress}/>
+          <Box sx={{marginLeft: '4px', width: '50%'}}>
             <InputSelect value={type} controlProps={{allowClear: false}} options={typeOptions} onChange={(v)=>setType(v)}/>
           </Box>
-          <PrimaryButton style={{width: '120px'}} data-test="search" className={modalClasses.margin} startIcon={<SearchRoundedIcon />}
+          <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">
           <PgReactDataGrid
             id="searchobjects"
-            className={classes.grid}
+            className='SearchObjects-grid'
             hasSelectColumn={false}
             columns={columns}
             rows={sortedItems}
@@ -423,17 +424,15 @@ export default function SearchObjects({nodeData}) {
             onItemEnter={onItemEnter}
           />
         </Box>
-        <Box className={classes.footer1}>
+        <Box className='SearchObjects-footer1'>
           <Box>{footerText}</Box>
         </Box>
         <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errorMsg} closable onClose={()=>setErrorMsg('')}  />
-      </Box>
-      <Box className={classes.footer}>
-        <Box>
-          <PgIconButton data-test="dialog-help" onClick={onDialogHelp} icon={<HelpIcon />} title={gettext('Help for this dialog.')} />
-        </Box>
-      </Box>
-    </Box>
+      </StyledBox>
+      <StyledBox className='SearchObjects-footer'>
+        <PgIconButton data-test="dialog-help" onClick={onDialogHelp} icon={<HelpIcon />} title={gettext('Help for this dialog.')} />
+      </StyledBox>
+    </ModalContent>
   );
 }
 
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 0abc4c54a..c34743896 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
@@ -7,21 +7,21 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box, Portal } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, {useContext, useLayoutEffect, useRef} from 'react';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseIcon from '@mui/icons-material/Close';
 import gettext from 'sources/gettext';
-import clsx from 'clsx';
 import JSONBigNumber from 'json-bignumber';
 import JsonEditor from '../../../../../../static/js/components/JsonEditor';
 import PropTypes from 'prop-types';
 import { RowInfoContext } from '.';
 import { usePgAdmin } from '../../../../../../static/js/BrowserComponent';
 
-const useStyles = makeStyles((theme)=>({
-  textEditor: {
+
+const StyledEditorDiv = styled(Box)(({ theme }) => ({
+  '&.Editors-textEditor': {
     position: 'absolute',
     zIndex: 1080,
     backgroundColor: theme.palette.background.default,
@@ -29,7 +29,6 @@ const useStyles = makeStyles((theme)=>({
     fontSize: '12px',
     ...theme.mixins.panelBorder.all,
     left: 0,
-    // bottom: 0,
     top: 0,
     '& textarea': {
       width: '250px',
@@ -37,9 +36,51 @@ const useStyles = makeStyles((theme)=>({
       border: 0,
       outline: 0,
       resize: 'both',
-    }
+      '& .Editors-textarea': {
+        resize: 'both',
+      },
+    },
   },
-  jsonEditor: {
+  '&.Editors-input': {
+    appearance: 'none',
+    width: '100%',
+    height: '100%',
+    verticalAlign: 'top',
+    outline: 'none',
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    border: 0,
+    boxShadow: 'inset 0 0 0 1.5px ' + theme.palette.primary.main,
+    padding: '0 2px',
+    '::selection': {
+      background: theme.palette.primary.light,
+    },
+  },
+  '& .Editors-check': {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    width: '16px',
+    height: '16px',
+    border: '1px solid ' + theme.palette.grey[800],
+    margin: '3px',
+    textAlign: 'center',
+    lineHeight: '16px',
+    '&.checked, &.unchecked': {
+      background: theme.palette.grey[200],
+    },
+    '&.checked:after': {
+      content: '\'\\2713\'',
+      fontWeight: 'bold',
+    },
+    '&.intermediate': {
+      background: theme.palette.grey[200],
+      '&:after': {
+        content: '\'\\003F\'',
+        fontWeight: 'bold',
+      },
+    },
+  },
+  '&.Editors-jsonEditor': {
     position: 'absolute',
     zIndex: 1080,
     backgroundColor: theme.palette.background.default,
@@ -58,56 +99,13 @@ const useStyles = makeStyles((theme)=>({
       height: 'abc',
       border: 'none',
       '& .ace-jsoneditor .ace_marker-layer .ace_active-line': {
-        background: theme.palette.primary.light
-      }
-    }
-  },
-  buttonMargin: {
-    marginLeft: '0.5rem',
-  },
-  textarea: {
-    resize: 'both'
-  },
-  input: {
-    appearance: 'none',
-    width: '100%',
-    height: '100%',
-    verticalAlign: 'top',
-    outline: 'none',
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    border: 0,
-    boxShadow: 'inset 0 0 0 1.5px '+theme.palette.primary.main,
-    padding: '0 2px',
-    '::selection': {
-      background: theme.palette.primary.light,
-    }
-  },
-  check: {
-    display: 'inline-block',
-    verticalAlign: 'top',
-    width: '16px',
-    height: '16px',
-    border: '1px solid '+theme.palette.grey[800],
-    margin: '3px',
-    textAlign: 'center',
-    lineHeight: '16px',
-
-    '&.checked, &.unchecked': {
-      background: theme.palette.grey[200],
-    },
-    '&.checked:after': {
-      content: '\'\\2713\'',
-      fontWeight: 'bold',
-    },
-    '&.intermediate': {
-      background: theme.palette.grey[200],
-      '&:after': {
-        content: '\'\\003F\'',
-        fontWeight: 'bold',
+        background: theme.palette.primary.light,
       },
     },
-  }
+  },
+  '& .Editors-buttonMargin': {
+    marginLeft: '0.5rem',
+  },
 }));
 
 function autoFocusAndSelect(input) {
@@ -177,7 +175,7 @@ function suppressEnterKey(e) {
   }
 }
 export function TextEditor({row, column, onRowChange, onClose}) {
-  const classes = useStyles();
+
   const value = row[column.key] ?? '';
   const [localVal, setLocalVal] = React.useState(value);
   const {getCellElement} = useContext(RowInfoContext);
@@ -201,30 +199,30 @@ export function TextEditor({row, column, onRowChange, onClose}) {
     }
   };
 
-  return(
+  return (
     <Portal container={document.body}>
-      <Box ref={(ele)=>{
+      <StyledEditorDiv ref={(ele)=>{
         setEditorPosition(getCellElement(column.idx), ele, '.rdg', 12);
-      }} className={classes.textEditor} data-label="pg-editor" onKeyDown={suppressEnterKey} >
-        <textarea ref={autoFocusAndSelect} className={classes.textarea} value={localVal} onChange={onChange} />
+      }} className='Editors-textEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
+        <textarea ref={autoFocusAndSelect} className='Editors-textarea' value={localVal} onChange={onChange} />
         <Box display="flex" justifyContent="flex-end">
           <DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
             {gettext('Cancel')}
           </DefaultButton>
           {column.can_edit &&
-            <PrimaryButton startIcon={<CheckRoundedIcon />} onClick={onOK} size="small" className={classes.buttonMargin}>
+            <PrimaryButton startIcon={<CheckRoundedIcon />} onClick={onOK} size="small" className='Editors-buttonMargin'>
               {gettext('OK')}
             </PrimaryButton>
           }
         </Box>
-      </Box>
+      </StyledEditorDiv>
     </Portal>
   );
 }
 TextEditor.propTypes = EditorPropTypes;
 
 export function NumberEditor({row, column, onRowChange, onClose}) {
-  const classes = useStyles();
+
   const pgAdmin = usePgAdmin();
 
   const value = row[column.key] ?? '';
@@ -268,24 +266,26 @@ export function NumberEditor({row, column, onRowChange, onClose}) {
     }
   };
   return (
-    <input
-      className={classes.input}
-      ref={autoFocusAndSelect}
-      value={value}
-      onChange={(e)=>{
-        if(column.can_edit) {
-          onRowChange({ ...row, [column.key]: (e.target.value == '' ? null :  e.target.value)});
-        }
-      }}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-    />
+    <StyledEditorDiv>
+      <input
+        className='Editors-input'
+        ref={autoFocusAndSelect}
+        value={value}
+        onChange={(e)=>{
+          if(column.can_edit) {
+            onRowChange({ ...row, [column.key]: (e.target.value == '' ? null :  e.target.value)});
+          }
+        }}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+      />
+    </StyledEditorDiv>
   );
 }
 NumberEditor.propTypes = EditorPropTypes;
 
 export function CheckboxEditor({row, column, onRowChange, onClose}) {
-  const classes = useStyles();
+
   const value = row[column.key] ?? null;
   const containerRef = useRef();
   const changeValue = ()=>{
@@ -321,15 +321,15 @@ export function CheckboxEditor({row, column, onRowChange, onClose}) {
   }, []);
 
   return (
-    <div ref={containerRef} onClick={changeValue} onKeyDown={onSpaceHit} tabIndex="0" onBlur={onBlur} data-label="pg-checkbox-editor">
-      <span className={clsx(classes.check, className)}></span>
-    </div>
+    <StyledEditorDiv ref={containerRef} onClick={changeValue} onKeyDown={onSpaceHit} tabIndex="0" onBlur={onBlur} data-label="pg-checkbox-editor">
+      <span className={['Editors-check', className].join(' ')}></span>
+    </StyledEditorDiv>
   );
 }
 CheckboxEditor.propTypes = EditorPropTypes;
 
 export function JsonTextEditor({row, column, onRowChange, onClose}) {
-  const classes = useStyles();
+
   const {getCellElement} = useContext(RowInfoContext);
   const pgAdmin = usePgAdmin();
 
@@ -373,9 +373,9 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
   };
   return (
     <Portal container={document.body}>
-      <Box ref={(ele)=>{
+      <StyledEditorDiv ref={(ele)=>{
         setEditorPosition(getCellElement(column.idx), ele, '.rdg', 12);
-      }} className={classes.jsonEditor} data-label="pg-editor" onKeyDown={suppressEnterKey} >
+      }} className='Editors-jsonEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
         <JsonEditor
           value={localVal}
           options={{
@@ -389,12 +389,12 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
             {gettext('Cancel')}
           </DefaultButton>
           {column.can_edit &&
-            <PrimaryButton startIcon={<CheckRoundedIcon />} onClick={onOK} size="small" className={classes.buttonMargin}>
+            <PrimaryButton startIcon={<CheckRoundedIcon />} onClick={onOK} size="small" className='Editors-buttonMargin'>
               {gettext('OK')}
             </PrimaryButton>
           }
         </Box>
-      </Box>
+      </StyledEditorDiv>
     </Portal>
   );
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
index 400d270a9..6afe74cf9 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
@@ -7,24 +7,25 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
-import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
 
-const useStyles = makeStyles((theme)=>({
-  disabledCell: {
+
+const StyledNullAndDefaultFormatter = styled(NullAndDefaultFormatter)(({theme}) => ({
+  '& .Formatters-disabledCell': {
     opacity: theme.palette.action.disabledOpacity,
   }
 }));
 
 function NullAndDefaultFormatter({value, column, children, style}) {
-  const classes = useStyles();
+
   if (_.isUndefined(value) && column.has_default_val) {
-    return <div className={classes.disabledCell} style={style}>[default]</div>;
+    return <div className='Formatters-disabledCell' style={style}>[default]</div>;
   } else if ((_.isUndefined(value) && column.not_null) ||
       (_.isUndefined(value) || _.isNull(value))) {
-    return <div className={classes.disabledCell} style={style}>[null]</div>;
+    return <div className='Formatters-disabledCell' style={style}>[null]</div>;
   }
   return children;
 }
@@ -64,11 +65,11 @@ NumberFormatter.propTypes = FormatterPropTypes;
 
 export function BinaryFormatter({row, column}) {
   let value = row[column.key];
-  const classes = useStyles();
+
   return (
-    <NullAndDefaultFormatter value={value} column={column}>
-      <span className={classes.disabledCell}>[{value}]</span>
-    </NullAndDefaultFormatter>
+    <StyledNullAndDefaultFormatter value={value} column={column}>
+      <span className='Formatters-disabledCell'>[{value}]</span>
+    </StyledNullAndDefaultFormatter>
   );
 }
 BinaryFormatter.propTypes = FormatterPropTypes;
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 2c9dc7cd9..569748c39 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import { Box } from '@mui/material';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo} from 'react';
 import {Row, useRowSelection} from 'react-data-grid';
@@ -16,7 +16,6 @@ import EditIcon from '@mui/icons-material/Edit';
 import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
 import * as Editors from './Editors';
 import * as Formatters from './Formatters';
-import clsx from 'clsx';
 import { PgIconButton } from '../../../../../../static/js/components/Buttons';
 import MapIcon from '@mui/icons-material/Map';
 import { QueryToolEventsContext } from '../QueryToolComponent';
@@ -27,22 +26,22 @@ import PgReactDataGrid from '../../../../../../static/js/components/PgReactDataG
 export const ROWNUM_KEY = '$_pgadmin_rownum_key_$';
 export const GRID_ROW_SELECT_KEY = '$_pgadmin_gridrowselect_key_$';
 
-const useStyles = makeStyles((theme)=>({
-  columnHeader: {
+const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
+  '& .QueryTool-columnHeader': {
     padding: '3px 6px',
     height: '100%',
     display: 'flex',
     lineHeight: '16px',
     alignItems: 'center',
     fontWeight: 'normal',
+    '& .QueryTool-columnName': {
+      fontWeight: 'bold',
+    },
   },
-  columnName: {
+  '& .QueryTool-editedCell': {
     fontWeight: 'bold',
   },
-  editedCell: {
-    fontWeight: 'bold',
-  },
-  deletedRow: {
+  '& .QueryTool-deletedRow': {
     '&:before': {
       content: '" "',
       position: 'absolute',
@@ -52,15 +51,15 @@ const useStyles = makeStyles((theme)=>({
       width: '100%',
     }
   },
-  rowNumCell: {
+  '& .QueryTool-rowNumCell': {
     padding: '0px 8px',
   },
-  colHeaderSelected: {
+  '& .QueryTool-colHeaderSelected': {
     outlineColor: theme.palette.primary.main,
     backgroundColor: theme.palette.primary.main,
     color: theme.palette.primary.contrastText,
   },
-  colSelected: {
+  '& .QueryTool-colSelected': {
     outlineColor: theme.palette.primary.main,
     backgroundColor: theme.palette.primary.light,
     color: theme.otherVars.qtDatagridSelectFg,
@@ -141,7 +140,6 @@ SelectAllHeaderRenderer.propTypes = {
 };
 
 function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsChange, isCellSelected}) {
-  const classes = useStyles();
   const cellRef = useRef();
   const eventBus = useContext(QueryToolEventsContext);
   const dataGridExtras = useContext(DataGridExtrasContext);
@@ -170,7 +168,7 @@ function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsCha
   }, [isCellSelected]);
 
   return (
-    <Box ref={cellRef} className={clsx(classes.columnHeader, isSelected ? classes.colHeaderSelected : null)} onClick={onClick} tabIndex="0"
+    <Box ref={cellRef} className={'QueryTool-columnHeader ' + (isSelected ? 'QueryTool-colHeaderSelected' : null)} onClick={onClick} tabIndex="0"
       onKeyDown={getCopyShortcutHandler(dataGridExtras.handleCopy)} data-column-key={column.key}>
       {(column.column_type_internal == 'geometry' || column.column_type_internal == 'geography') &&
       <Box>
@@ -180,7 +178,7 @@ function SelectableHeaderRenderer({column, selectedColumns, onSelectedColumnsCha
         }}/>
       </Box>}
       <Box marginRight="auto">
-        <span className={classes.columnName}>{column.display_name}</span><br/>
+        <span className='QueryTool-columnName'>{column.display_name}</span><br/>
         <span>{column.display_type}</span>
       </Box>
       <Box marginLeft="4px">{column.can_edit ?
@@ -221,7 +219,7 @@ function setEditorFormatter(col) {
   }
 }
 
-function cellClassGetter(col, classes, isSelected, dataChangeStore, rowKeyGetter){
+function cellClassGetter(col, isSelected, dataChangeStore, rowKeyGetter){
   return (row)=>{
     let cellClasses = [];
     if(dataChangeStore && rowKeyGetter) {
@@ -229,16 +227,16 @@ function cellClassGetter(col, classes, isSelected, dataChangeStore, rowKeyGetter
         && !_.isUndefined(dataChangeStore?.updated[rowKeyGetter(row)]?.data[col.key])
         || rowKeyGetter(row) in (dataChangeStore?.added || {})
       ) {
-        cellClasses.push(classes.editedCell);
+        cellClasses.push('QueryTool-editedCell');
       }
       if(rowKeyGetter(row) in (dataChangeStore?.deleted || {})) {
-        cellClasses.push(classes.deletedRow);
+        cellClasses.push('QueryTool-deletedRow');
       }
     }
     if(isSelected) {
-      cellClasses.push(classes.colSelected);
+      cellClasses.push('QueryTool-colSelected');
     }
-    return clsx(cellClasses);
+    return cellClasses.join(' ');
   };
 }
 
@@ -282,7 +280,7 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
 function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColumnsChange}) {
   const {rowIdx} = useContext(RowInfoContext);
   const [isRowSelected, onRowSelectionChange] = useRowSelection();
-  const classes = useStyles();
+
 
   let rowKey = rowKeyGetter(row);
   let rownum = rowIdx+1;
@@ -291,7 +289,7 @@ function RowNumColFormatter({row, rowKeyGetter, dataChangeStore, onSelectedColum
   } else if(rowKey in (dataChangeStore?.deleted || {})) {
     rownum = rownum+'-';
   }
-  return (<div className={classes.rowNumCell} onClick={()=>{
+  return (<div className='QueryTool-rowNumCell' onClick={()=>{
     onSelectedColumnsChange(new Set());
     onRowSelectionChange({ row: row, checked: !isRowSelected, isShiftClick: false});
   }} onKeyDown={()=>{/* already taken care by parent */}}>
@@ -305,7 +303,7 @@ RowNumColFormatter.propTypes = {
   onSelectedColumnsChange: PropTypes.func,
 };
 
-function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColumnsChange, rowKeyGetter, classes) {
+function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColumnsChange, rowKeyGetter) {
   let retColumns = [
     ...columns,
   ];
@@ -316,7 +314,7 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onSelectedColu
 
   for(const [idx, col] of retColumns.entries()) {
     col.headerRenderer = HeaderRenderer;
-    col.cellClass = cellClassGetter(col, classes, selectedColumns.has(idx), dataChangeStore, rowKeyGetter);
+    col.cellClass = cellClassGetter(col, selectedColumns.has(idx), dataChangeStore, rowKeyGetter);
   }
 
   let rowNumCol = retColumns[0];
@@ -363,7 +361,6 @@ function getTextWidth(column, rows, canvas, columnWidthBy) {
 
 export default function QueryToolDataGrid({columns, rows, totalRowCount, dataChangeStore,
   onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, ...props}) {
-  const classes = useStyles();
   const [readyColumns, setReadyColumns] = useState([]);
   const eventBus = useContext(QueryToolEventsContext);
   const onSelectedColumnsChangeWrapped = (arg)=>{
@@ -381,18 +378,18 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
 
   useEffect(()=>{
     let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy);
-    setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter, classes));
+    setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter));
   }, [columns]);
 
   useEffect(()=>{
     setReadyColumns((prevCols)=>{
-      return formatColumns(prevCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter, classes);
+      return formatColumns(prevCols, dataChangeStore, selectedColumns, onSelectedColumnsChangeWrapped, props.rowKeyGetter);
     });
   }, [dataChangeStore, selectedColumns]);
 
   return (
     <DataGridExtrasContext.Provider value={dataGridExtras}>
-      <PgReactDataGrid
+      <StyledPgReactDataGrid
         id="datagrid"
         columns={readyColumns}
         rows={rows}
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 f2ce6b53b..343204ce8 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModalStyles } from '../../../../../../static/js/helpers/ModalProvider';
+import { ModalContent, ModalFooter } from '../../../../../../static/js/components/ModalContent';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
@@ -9,20 +9,19 @@ import HTMLReactParser from 'html-react-parser';
 import PropTypes from 'prop-types';
 
 export default function CloseRunningDialog({closeModal, text, onYes}) {
-  const classes = useModalStyles();
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <ModalContent>
       <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="no" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('No')}</DefaultButton>
-        <PrimaryButton data-test="yes" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+        <PrimaryButton data-test="yes" startIcon={<CheckRoundedIcon />} onClick={()=>{
           onYes?.();
           closeModal();
         }} >{gettext('Yes')}</PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmExecuteQueryContent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmExecuteQueryContent.jsx
index 8c37ff14c..4bd947923 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmExecuteQueryContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmExecuteQueryContent.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
@@ -38,7 +38,7 @@ export default function ConfirmExecuteQueryContent({ onContinue, onClose, closeM
   });
 
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <>
       <StyledEditor>
         <Box>Do you want to run this query -</Box>
         <CodeMirror
@@ -63,7 +63,7 @@ export default function ConfirmExecuteQueryContent({ onContinue, onClose, closeM
           }} autoFocus={true} >{gettext('Continue')}</PrimaryButton>
         </Box>
       </StyledFooter>
-    </Box>
+    </>
   );
 }
 
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 71fd0d9aa..9473d03c4 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { styled } from '@mui/styles';
+import { ModalContent } from '../../../../../../static/js/components/ModalContent';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
@@ -8,6 +8,7 @@ import HTMLReactParser from 'html-react-parser';
 import PropTypes from 'prop-types';
 import CheckRounded from '@mui/icons-material/CheckRounded';
 import { InputCheckbox } from '../../../../../../static/js/components/FormComponents';
+import { styled } from '@mui/material/styles';
 
 const StyledFooter = styled('div')(({theme})=>({
   display: 'flex',
@@ -25,7 +26,7 @@ export default function ConfirmPromotionContent({ onContinue, onClose, closeModa
   });
 
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <ModalContent>
       <Box 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']}
@@ -43,7 +44,7 @@ export default function ConfirmPromotionContent({ onContinue, onClose, closeModa
           }} autoFocus={true} >{gettext('Continue')}</PrimaryButton>
         </Box>
       </StyledFooter>
-    </Box>
+    </ModalContent>
   );
 }
 
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 d47fb56c4..021549705 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useModalStyles } from '../../../../../../static/js/helpers/ModalProvider';
+import { ModalContent, ModalFooter } from '../../../../../../static/js/components/ModalContent';
 import gettext from 'sources/gettext';
 import { Box } from '@mui/material';
 import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
@@ -9,24 +9,23 @@ import { CommitIcon, RollbackIcon } from '../../../../../../static/js/components
 import PropTypes from 'prop-types';
 
 export default function ConfirmTransactionContent({closeModal, text, onRollback, onCommit}) {
-  const classes = useModalStyles();
   return (
-    <Box display="flex" flexDirection="column" height="100%">
+    <ModalContent>
       <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
-      <Box className={classes.footer}>
+      <ModalFooter>
         <DefaultButton data-test="cancel" startIcon={<CloseIcon />} onClick={()=>{
           closeModal();
         }} >{gettext('Cancel')}</DefaultButton>
-        <PrimaryButton data-test="rollback" className={classes.margin} startIcon={<RollbackIcon />} onClick={()=>{
+        <PrimaryButton data-test="rollback" startIcon={<RollbackIcon />} onClick={()=>{
           onRollback?.();
           closeModal();
         }} >{gettext('Rollback')}</PrimaryButton>
-        <PrimaryButton data-test="commit" className={classes.margin} startIcon={<CommitIcon />} onClick={()=>{
+        <PrimaryButton data-test="commit" startIcon={<CommitIcon />} onClick={()=>{
           onCommit?.();
           closeModal();
         }} autoFocus={true} >{gettext('Commit')}</PrimaryButton>
-      </Box>
-    </Box>
+      </ModalFooter>
+    </ModalContent>
   );
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
index 47151f92f..85b978b59 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
@@ -1,12 +1,3 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
 import React from 'react';
 import SchemaView from '../../../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
@@ -15,6 +6,7 @@ import { QueryToolContext } from '../QueryToolComponent';
 import url_for from 'sources/url_for';
 import PropTypes from 'prop-types';
 
+
 class SortingCollection extends BaseUISchema {
   constructor(columnOptions) {
     super({
@@ -80,14 +72,8 @@ class FilterSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-  },
-}));
-
 export default function FilterDialog({onClose, onSave}) {
-  const classes = useStyles();
+
   const queryToolCtx = React.useContext(QueryToolContext);
   const filterSchemaObj = React.useMemo(()=>new FilterSchema([]));
 
@@ -144,7 +130,6 @@ export default function FilterDialog({onClose, onSave}) {
       disableSqlHelp={true}
       disableDialogHelp={true}
       isTabView={false}
-      formClassName={classes.root}
       checkDirtyOnEnableSave={true}
     />
   );
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 f6968c1ba..06745aee3 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
@@ -1,12 +1,4 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import SchemaView from '../../../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
@@ -16,6 +8,13 @@ import url_for from 'sources/url_for';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 
+const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+  '& .MacrosDialog-root': {
+    ...theme.mixins.tabPanel,
+    padding: 0,
+  }
+}));
+
 class MacrosCollection extends BaseUISchema {
   constructor(keyOptions) {
     super();
@@ -105,13 +104,6 @@ class MacrosSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-    padding: 0,
-  },
-}));
-
 function getChangedMacros(userMacrosData, changeData) {
   /* For backend, added, removed is changed. Convert all added, removed to changed. */
   let changed = [];
@@ -140,7 +132,7 @@ function getChangedMacros(userMacrosData, changeData) {
 }
 
 export default function MacrosDialog({onClose, onSave}) {
-  const classes = useStyles();
+
   const queryToolCtx = React.useContext(QueryToolContext);
   const [macrosData, setMacrosData] = React.useState([]);
   const [userMacrosData, setUserMacrosData] = React.useState([]);
@@ -193,7 +185,7 @@ export default function MacrosDialog({onClose, onSave}) {
   }
 
   return (
-    <SchemaView
+    <StyledSchemaView
       formType={'dialog'}
       getInitData={()=>{
         if(macrosErr) {
@@ -211,7 +203,7 @@ export default function MacrosDialog({onClose, onSave}) {
       disableSqlHelp={true}
       disableDialogHelp={true}
       isTabView={false}
-      formClassName={classes.root}
+      formClassName='MacrosDialog-root'
     />
   );
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
index 00e17af2f..88509e022 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
@@ -1,14 +1,4 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
 import React, { useState } from 'react';
-import SchemaView from '../../../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
 import gettext from 'sources/gettext';
 import { QueryToolContext } from '../QueryToolComponent';
@@ -17,6 +7,7 @@ import _ from 'lodash';
 import { flattenSelectOptions } from '../../../../../../static/js/components/FormComponents';
 import PropTypes from 'prop-types';
 import ConnectServerContent from '../../../../../../static/js/Dialogs/ConnectServerContent';
+import SchemaView from '../../../../../../static/js/SchemaView';
 
 class NewConnectionSchema extends BaseUISchema {
   constructor(api, params, connectServer) {
@@ -194,14 +185,8 @@ class NewConnectionSchema extends BaseUISchema {
 }
 
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-  },
-}));
-
 export default function NewConnectionDialog({onClose, onSave}) {
-  const classes = useStyles();
+
   const [connecting, setConnecting] = useState(false);
   const queryToolCtx = React.useContext(QueryToolContext);
 
@@ -255,7 +240,6 @@ export default function NewConnectionDialog({onClose, onSave}) {
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName={classes.root}
     Notifier={queryToolCtx.modal}
   />;
 }
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 b96beda6a..bbdf9c780 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Box, CircularProgress, Tooltip } from '@mui/material';
 import { DefaultButton, PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -25,32 +25,27 @@ import PropTypes from 'prop-types';
 import { useKeyboardShortcuts } from '../../../../../../static/js/custom_hooks';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
+const Root = styled('div')(({theme}) => ({
+  '.ConnectionBar-root': {
     padding: '2px 4px',
     display: 'flex',
     alignItems: 'center',
     gap: '4px',
     backgroundColor: theme.otherVars.editorToolbarBg,
+    '& .ConnectionBar-connectionButton': {
+      display: 'flex',
+      width: '450px',
+      backgroundColor: theme.palette.default.main,
+      color: theme.palette.default.contrastText,
+      border: '1px solid ' + theme.palette.default.borderColor,
+      justifyContent: 'flex-start',
+    },
   },
-  connectionButton: {
-    display: 'flex',
-    width: '450px',
-    backgroundColor: theme.palette.default.main,
-    color: theme.palette.default.contrastText,
-    border: '1px solid ' + theme.palette.default.borderColor,
-    justifyContent: 'flex-start',
-  },
-  viewDataConnTitle: {
-    marginTop: 'auto',
-    marginBottom: 'auto',
-    padding: '0px 4px',
-  },
-  menu: {
+  '.ConnectionBar-menu': {
     '& .szh-menu': {
       minWidth: '450px',
     }
-  }
+  },
 }));
 
 function ConnectionStatusIcon({connected, connecting, status}) {
@@ -82,7 +77,7 @@ ConnectionStatusIcon.propTypes = {
 
 export function ConnectionBar({connected, connecting, connectionStatus, connectionStatusMsg,
   connectionList, onConnectionChange, onNewConnClick, onNewQueryToolClick, onResetLayout, containerRef}) {
-  const classes = useStyles();
+
   const connMenuRef = React.useRef();
   const [connDropdownOpen, setConnDropdownOpen] = React.useState(false);
   const queryToolCtx = React.useContext(QueryToolContext);
@@ -104,14 +99,14 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
 
   const connTitle = React.useMemo(()=>_.find(connectionList, (c)=>c.is_selected)?.conn_title, [connectionList]);
   return (
-    <>
-      <Box className={classes.root}>
+    (<Root>
+      <Box className='ConnectionBar-root'>
         <PgButtonGroup size="small">
           {queryToolCtx.preferences?.sqleditor?.connection_status &&
           <PgIconButton title={CONNECTION_STATUS_MESSAGE[connected ? connectionStatus : -1] ?? connectionStatusMsg}
             icon={<ConnectionStatusIcon connecting={connecting} status={connectionStatus} connected={connected}/>}
           />}
-          <DefaultButton className={classes.connectionButton} ref={connMenuRef}
+          <DefaultButton className='ConnectionBar-connectionButton' ref={connMenuRef}
             onClick={queryToolCtx.params.is_query_tool ? ()=>setConnDropdownOpen(true) : undefined}
             style={{backgroundColor: queryToolCtx.params.bgcolor, color: queryToolCtx.params.fgcolor}}
           >
@@ -133,7 +128,7 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
         anchorRef={connMenuRef}
         open={connDropdownOpen}
         onClose={()=>{setConnDropdownOpen(false);}}
-        className={classes.menu}
+        className='ConnectionBar-menu'
       >
         {(connectionList||[]).map((conn, i)=>{
           return (
@@ -143,7 +138,7 @@ export function ConnectionBar({connected, connecting, connectionStatus, connecti
         })}
         <PgMenuItem onClick={onNewConnClick}>{`< ${gettext('New Connection...')} >`}</PgMenuItem>
       </PgMenu>
-    </>
+    </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 40a492176..5746594e2 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
@@ -7,8 +7,8 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect, useRef }  from 'react';
+import { styled } from '@mui/material/styles';
 import ReactDOMServer from 'react-dom/server';
-import { makeStyles } from '@mui/styles';
 import _ from 'lodash';
 import { MapContainer, TileLayer, LayersControl, GeoJSON, useMap } from 'react-leaflet';
 import Leaflet, { CRS } from 'leaflet';
@@ -16,38 +16,37 @@ import {Geometry as WkxGeometry} from 'wkx';
 import {Buffer} from 'buffer';
 import gettext from 'sources/gettext';
 import Theme from 'sources/Theme';
-import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Box } from '@mui/material';
 import { PANELS } from '../QueryToolConstants';
 import { QueryToolContext } from '../QueryToolComponent';
 
-const useStyles = makeStyles((theme)=>({
-  mapContainer: {
+const StyledBox = styled(Box)(({theme}) => ({
+  '& .GeometryViewer-mapContainer': {
     backgroundColor: theme.palette.background.default,
     height: '100%',
     width: '100%',
     '& .leaflet-popup-content': {
       overflow: 'auto',
       margin: '8px',
+      '& .GeometryViewer-table': {
+        borderSpacing: 0,
+        width: '100%',
+        ...theme.mixins.panelBorder,
+        '& .GeometryViewer-tableCellHead': {
+          fontWeight: 'bold',
+        },
+        '& .GeometryViewer-tableCell': {
+          margin: 0,
+          padding: theme.spacing(0.5),
+          ...theme.mixins.panelBorder.bottom,
+          ...theme.mixins.panelBorder.right,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+        },
+      },
     }
   },
-  table: {
-    borderSpacing: 0,
-    width: '100%',
-    ...theme.mixins.panelBorder,
-  },
-  tableCell: {
-    margin: 0,
-    padding: theme.spacing(0.5),
-    ...theme.mixins.panelBorder.bottom,
-    ...theme.mixins.panelBorder.right,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-  tableCellHead: {
-    fontWeight: 'bold',
-  }
 }));
 
 function parseEwkbData(rows, column) {
@@ -189,15 +188,15 @@ function parseData(rows, columns, column) {
 }
 
 function PopupTable({data}) {
-  const classes = useStyles();
+
   return (
-    <table className={classes.table}>
+    <table className='GeometryViewer-table'>
       <tbody>
         {data.map((row)=>{
           return (
             <tr key={row.column}>
-              <td className={clsx(classes.tableCell, classes.tableCellHead)}>{row.column}</td>
-              <td className={classes.tableCell}>{row.value}</td>
+              <td className={'GeometryViewer-tableCell ' + 'GeometryViewer-tableCellHead'}>{row.column}</td>
+              <td className='GeometryViewer-tableCell'>{row.value}</td>
             </tr>
           );
         })}
@@ -371,7 +370,7 @@ TheMap.propTypes = {
 
 
 export function GeometryViewer({rows, columns, column}) {
-  const classes = useStyles();
+
   const mapRef = React.useRef();
   const contentRef = React.useRef();
   const data = parseData(rows, columns, column);
@@ -392,19 +391,19 @@ export function GeometryViewer({rows, columns, column}) {
 
   // Dyanmic CRS is not supported. Use srid as key and recreate the map on change
   return (
-    <Box ref={contentRef} width="100%" height="100%" key={data.selectedSRID}>
+    <StyledBox ref={contentRef} width="100%" height="100%" key={data.selectedSRID}>
       <MapContainer
         crs={data.selectedSRID === 4326 ? CRS.EPSG3857 : CRS.Simple}
         zoom={2} center={[20, 100]}
         preferCanvas={true}
-        className={classes.mapContainer}
+        className='GeometryViewer-mapContainer'
         whenCreated={(map)=>{
           mapRef.current = map;
         }}
       >
         <TheMap data={data}/>
       </MapContainer>
-    </Box>
+    </StyledBox>
   );
 }
 
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 563c92294..0252ed99b 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -8,12 +8,12 @@
 //////////////////////////////////////////////////////////////
 
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import React, { useContext, useState, useMemo, useEffect } from 'react';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
-import { makeStyles } from '@mui/styles';
 import { Box } from '@mui/material';
 import ShowChartRoundedIcon from '@mui/icons-material/ShowChartRounded';
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
@@ -29,47 +29,46 @@ import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants';
 import { useTheme } from '@mui/material';
 import { getChartColor } from '../../../../../../static/js/utils';
 
-// Numeric data type used to separate out the options for Y axis.
-const NUMERIC_TYPES = ['oid', 'smallint', 'integer', 'bigint', 'decimal', 'numeric',
-  'real', 'double precision', 'smallserial', 'serial', 'bigserial'];
-
-const useStyles = makeStyles((theme)=>({
-  mainContainer: {
-    width: '100%',
-    height: '100%',
-    overflowY: 'scroll',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  topContainer: {
+const StyledBox = styled(Box)(({theme}) => ({
+  width: '100%',
+  height: '100%',
+  overflowY: 'scroll',
+  display: 'flex',
+  flexDirection: 'column',
+  '& .GraphVisualiser-topContainer': {
     alignItems: 'flex-start',
     padding: '4px',
     backgroundColor: theme.otherVars.editorToolbarBg,
     flexWrap: 'wrap',
     ...theme.mixins.panelBorder.bottom,
+    '& .GraphVisualiser-displayFlex': {
+      display: 'flex',
+      '& .GraphVisualiser-spanLabel': {
+        alignSelf: 'center',
+        minWidth: '6%',
+        whiteSpace: 'nowrap',
+        '& .GraphVisualiser-axisSelectCtrl': {
+          minWidth: '200px',
+          marginTop: '2px',
+        },
+        '& .GraphVisualiser-selectCtrl': {
+          minWidth: '200px',
+        },
+
+      },
+    },
   },
-  displayFlex: {
-    display: 'flex',
-  },
-  graphContainer: {
+  '& .GraphVisualiser-graphContainer': {
     padding: '8px',
     flexGrow: 1,
     overflow: 'hidden',
   },
-  spanLabel: {
-    alignSelf: 'center',
-    minWidth: '6%',
-    whiteSpace: 'nowrap',
-  },
-  selectCtrl: {
-    minWidth: '200px',
-  },
-  axisSelectCtrl: {
-    minWidth: '200px',
-    marginTop: '2px',
-  },
 }));
 
+// Numeric data type used to separate out the options for Y axis.
+const NUMERIC_TYPES = ['oid', 'smallint', 'integer', 'bigint', 'decimal', 'numeric',
+  'real', 'double precision', 'smallserial', 'serial', 'bigserial'];
+
 // This function is used to generate the appropriate graph based on the graphType.
 function GenerateGraph({graphType, graphData, ...props}) {
   const queryToolCtx = useContext(QueryToolContext);
@@ -239,7 +238,7 @@ function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx, t
 }
 
 export function GraphVisualiser({initColumns}) {
-  const classes = useStyles();
+
   const chartObjRef = React.useRef();
   const contentRef = React.useRef();
   const eventBus = useContext(QueryToolEventsContext);
@@ -395,12 +394,12 @@ export function GraphVisualiser({initColumns}) {
   };
 
   return (
-    <Box className={classes.mainContainer}>
+    <StyledBox>
       <Loader message={loaderText} />
-      <Box className={classes.topContainer}>
-        <Box className={classes.displayFlex}>
-          <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
-          <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
+      <Box className='GraphVisualiser-topContainer'>
+        <Box className='GraphVisualiser-displayFlex'>
+          <span className='GraphVisualiser-spanLabel' >{gettext('Graph Type')}</span>
+          <InputSelect className='GraphVisualiser-selectCtrl' controlProps={{allowClear: false}}
             options={[
               {label: gettext('Line Chart'), value: 'L'},
               {label: gettext('Stacked Line Chart'), value: 'SL'},
@@ -422,14 +421,14 @@ export function GraphVisualiser({initColumns}) {
             onClick={()=>{setExpandedState(!expandedState);}}/>
         </Box>
         { expandedState && <>
-          <Box className={classes.displayFlex}>
-            <span className={classes.spanLabel}>{graphType != 'P' ? gettext('X Axis') : gettext('Label')}</span>
-            <InputSelect className={classes.axisSelectCtrl} options={xAxisOptions}
+          <Box className='GraphVisualiser-displayFlex'>
+            <span className='GraphVisualiser-spanLabel'>{graphType != 'P' ? gettext('X Axis') : gettext('Label')}</span>
+            <InputSelect className='GraphVisualiser-axisSelectCtrl' options={xAxisOptions}
               onChange={(v)=>setXAxis(v)} value={xAxis} optionsReloadBasis={optionsReload}/>
           </Box>
-          <Box className={classes.displayFlex}>
-            <span className={classes.spanLabel}>{graphType != 'P' ? gettext('Y Axis') : gettext('Value')}</span>
-            <InputSelect className={classes.axisSelectCtrl} controlProps={{'multiple': graphType != 'P', allowSelectAll: graphType != 'P'}}
+          <Box className='GraphVisualiser-displayFlex'>
+            <span className='GraphVisualiser-spanLabel'>{graphType != 'P' ? gettext('Y Axis') : gettext('Value')}</span>
+            <InputSelect className='GraphVisualiser-axisSelectCtrl' controlProps={{'multiple': graphType != 'P', allowSelectAll: graphType != 'P'}}
               options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yAxis} optionsReloadBasis={optionsReload}/>
           </Box>
         </>
@@ -443,14 +442,14 @@ export function GraphVisualiser({initColumns}) {
             onClick={onDownloadGraph} disabled={ graphData.datasets.length <= 0 }/>
         </PgButtonGroup>
       </Box>
-      <Box ref={contentRef} className={classes.graphContainer}>
+      <Box ref={contentRef} className='GraphVisualiser-graphContainer'>
         <Box style={{height:`${graphHeight}px`}}>
           {useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
             chartObjRef.current = chartObj;
           }} plugins={[plugin]}/>, [graphDataKey])}
         </Box>
       </Box>
-    </Box>
+    </StyledBox>
   );
 }
 GraphVisualiser.propTypes = {
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 0b0c687eb..60c164438 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React, {useContext, useCallback, useEffect, useState} from 'react';
-import { makeStyles } from '@mui/styles';
+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';
@@ -35,16 +35,14 @@ import ConfirmTransactionContent from '../dialogs/ConfirmTransactionContent';
 import { LayoutDocker } from '../../../../../../static/js/helpers/Layout';
 import CloseRunningDialog from '../dialogs/CloseRunningDialog';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    padding: '2px 4px',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    backgroundColor: theme.otherVars.editorToolbarBg,
-    flexWrap: 'wrap',
-    ...theme.mixins.panelBorder.bottom,
-  },
+const StyledBox = styled(Box)(({theme}) => ({
+  padding: '2px 4px',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  backgroundColor: theme.otherVars.editorToolbarBg,
+  flexWrap: 'wrap',
+  ...theme.mixins.panelBorder.bottom,
 }));
 
 function autoCommitRollback(type, api, transId, value) {
@@ -55,7 +53,6 @@ function autoCommitRollback(type, api, transId, value) {
 }
 
 export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddToMacros}) {
-  const classes = useStyles();
   const eventBus = useContext(QueryToolEventsContext);
   const queryToolCtx = useContext(QueryToolContext);
   const queryToolConnCtx = useContext(QueryToolConnectionContext);
@@ -499,8 +496,8 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
   ], containerRef);
 
   return (
-    <>
-      <Box className={classes.root}>
+    (<>
+      <StyledBox>
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Open File')} icon={<FolderRoundedIcon />} disabled={!queryToolCtx.params.is_query_tool}
             shortcut={queryToolPref.btn_open_file} onClick={openFile} />
@@ -564,7 +561,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Help')} icon={<HelpIcon />} onClick={onHelpClick} />
         </PgButtonGroup>
-      </Box>
+      </StyledBox>
       <PgMenu
         anchorRef={saveAsMenuRef}
         open={openMenuName=='menu-saveas'}
@@ -664,7 +661,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
           );
         })}
       </PgMenu>
-    </>
+    </>)
   );
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
index a5ff19e6b..a22eac3e6 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
@@ -1,33 +1,23 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React from 'react';
 import { QueryToolEventsContext } from '../QueryToolComponent';
 import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    whiteSpace: 'pre-wrap',
-    fontFamily: '"Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-    padding: '5px 10px',
-    overflow: 'auto',
-    height: '100%',
-    fontSize: '12px',
-    userSelect: 'text',
-    backgroundColor: theme.palette.background.default,
-    color: theme.palette.text.primary,
-    ...theme.mixins.fontSourceCode,
-  }
+const StyledDiv = styled('div')(({theme}) => ({
+  whiteSpace: 'pre-wrap',
+  fontFamily: '"Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+  padding: '5px 10px',
+  overflow: 'auto',
+  height: '100%',
+  fontSize: '12px',
+  userSelect: 'text',
+  backgroundColor: theme.palette.background.default,
+  color: theme.palette.text.primary,
+  ...theme.mixins.fontSourceCode,
 }));
 
 export function Messages() {
-  const classes = useStyles();
+
   const [messageText, setMessageText] = React.useState('');
   const eventBus = React.useContext(QueryToolEventsContext);
   React.useEffect(()=>{
@@ -40,7 +30,5 @@ export function Messages() {
       });
     });
   }, []);
-  return (
-    <div className={classes.root} tabIndex="0">{messageText}</div>
-  );
+  return <StyledDiv tabIndex="0">{messageText}</StyledDiv>;
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/Notifications.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/Notifications.jsx
index fc8e2b047..174a11745 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/Notifications.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/Notifications.jsx
@@ -7,16 +7,15 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
-import { commonTableStyles } from '../../../../../../static/js/Theme';
 import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
 import gettext from 'sources/gettext';
 import _ from 'lodash';
-import clsx from 'clsx';
 import { QueryToolEventsContext } from '../QueryToolComponent';
+import Table from '../../../../../../static/js/components/Table';
 
 export function Notifications() {
   const [notices, setNotices] = React.useState([]);
-  const tableClasses = commonTableStyles();
+
   const eventBus = React.useContext(QueryToolEventsContext);
   React.useEffect(()=>{
     eventBus.registerListener(QUERY_TOOL_EVENTS.PUSH_NOTICE, (notice)=>{
@@ -35,7 +34,7 @@ export function Notifications() {
   }, []);
 
 
-  return <table className={clsx(tableClasses.table, tableClasses.borderBottom)}>
+  return <Table>
     <thead>
       <tr>
         <th>{gettext('Recorded time')}</th>
@@ -54,5 +53,5 @@ export function Notifications() {
         </tr>;
       })}
     </tbody>
-  </table>;
+  </Table>;
 }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
index 727945422..bfbac9b70 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
@@ -6,7 +6,6 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
 import React, {useContext, useCallback, useEffect, useMemo } from 'react';
 import { format } from 'sql-formatter';
 import { QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
@@ -27,12 +26,6 @@ import { getTitle } from '../../sqleditor_title';
 import PropTypes from 'prop-types';
 
 
-const useStyles = makeStyles(()=>({
-  sql: {
-    height: '100%',
-  }
-}));
-
 async function registerAutocomplete(editor, api, transId) {
   editor.registerAutocomplete((context, onAvailable)=>{
     return new Promise((resolve, reject)=>{
@@ -64,7 +57,6 @@ async function registerAutocomplete(editor, api, transId) {
 }
 
 export default function Query({onTextSelect}) {
-  const classes = useStyles();
   const editor = React.useRef();
   const eventBus = useContext(QueryToolEventsContext);
   const queryToolCtx = useContext(QueryToolContext);
@@ -507,7 +499,6 @@ export default function Query({onTextSelect}) {
       editor.current=obj;
     }}
     value={''}
-    className={classes.sql}
     onCursorActivity={cursorActivity}
     onChange={change}
     autocomplete={true}
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 7ed1f3761..ac976066e 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -1,18 +1,9 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2024, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import React, { useContext } from 'react';
 import { PANELS, QUERY_TOOL_EVENTS, MAX_QUERY_LENGTH } from '../QueryToolConstants';
 import gettext from 'sources/gettext';
 import pgAdmin from 'sources/pgadmin';
 import _ from 'lodash';
-import clsx from 'clsx';
 import { Box, Grid, List, ListItem, ListSubheader } from '@mui/material';
 import url_for from 'sources/url_for';
 import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
@@ -32,64 +23,71 @@ import { parseApiError } from '../../../../../../static/js/api_instance';
 import * as clipboard from '../../../../../../static/js/clipboard';
 import EmptyPanelMessage from '../../../../../../static/js/components/EmptyPanelMessage';
 
-const useStyles = makeStyles((theme)=>({
-  leftRoot: {
+const Root = styled('div')(({ theme }) => ({
+  display: 'flex', 
+  height: '100%',
+  '.QuerySources-leftRoot': {
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: theme.otherVars.editorToolbarBg,
     ...theme.mixins.panelBorder.right,
+    '& .QuerySources-header': {
+      padding: '0.25rem',
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
+    '& .QuerySources-listRoot': {
+      ...theme.mixins.panelBorder.top,
+      '& .QuerySources-removePadding': {
+        padding: 0,
+        '& .QuerySources-listSubheader': {
+          padding: '0.25rem',
+          lineHeight: 'unset',
+          color: theme.palette.text.muted,
+          backgroundColor: theme.palette.background.default,
+          ...theme.mixins.panelBorder.bottom,
+          ...theme.mixins.fontSourceCode,
+        },
+        '& .QuerySources-fontSourceCode': {
+          ...theme.mixins.fontSourceCode,
+          userSelect: 'text',
+        },
+        '& .QuerySources-itemError': {
+          backgroundColor: theme.palette.error.light,
+          '&.Mui-selected': {
+            backgroundColor: theme.palette.error.light,
+            '&:hover': {
+              backgroundColor: theme.palette.error.light,
+            }
+          }
+        },
+      },
+    },
   },
-  listRoot: {
-    ...theme.mixins.panelBorder.top,
-  },
-  listSubheader: {
-    padding: '0.25rem',
-    lineHeight: 'unset',
-    color: theme.palette.text.muted,
-    backgroundColor: theme.palette.background.default,
-    ...theme.mixins.panelBorder.bottom,
-    ...theme.mixins.fontSourceCode,
-  },
-  removePadding: {
-    padding: 0,
-  },
-  fontSourceCode:{
-    ...theme.mixins.fontSourceCode,
-    userSelect: 'text',
-  },
-  itemError: {
-    backgroundColor: theme.palette.error.light,
-    '&.Mui-selected': {
-      backgroundColor: theme.palette.error.light,
-      '&:hover': {
-        backgroundColor: theme.palette.error.light,
-      }
-    }
-  },
-  detailsQuery: {
+  '& .QuerySources-detailsQuery': {
     marginTop: '0.5rem',
     ...theme.mixins.panelBorder.all,
+    '& .QuerySources-copyBtn': {
+      borderRadius: 0,
+      paddingLeft: '8px',
+      paddingRight: '8px',
+      borderTop: 'none',
+      borderLeft: 'none',
+      borderColor: theme.otherVars.borderColor,
+      fontSize: '13px',
+    },
+    '& .QuerySources-queryMargin': {
+      marginTop: '12px',
+    },
+    '& .QuerySources-removeBtnMargin': {
+      marginLeft: '0.25rem',
+    },
   },
-  copyBtn: {
-    borderRadius: 0,
-    paddingLeft: '8px',
-    paddingRight: '8px',
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderColor: theme.otherVars.borderColor,
-    fontSize: '13px',
-  },
-  infoHeader: {
+  '& .QuerySources-infoHeader': {
     fontSize: '13px',
     padding: '0.5rem',
     backgroundColor: theme.otherVars.editorToolbarBg,
   },
-  removeBtnMargin: {
-    marginLeft: '0.25rem',
-  },
-  queryMargin: {
-    marginTop: '12px',
-  }
 }));
 
 export const QuerySources = {
@@ -268,13 +266,12 @@ QuerySourceIcon.propTypes = {
 };
 
 function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick}) {
-  const classes = useStyles();
-  return <ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
+  return <Root><ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
     selectedItemKey==itemKey && ele && ele.scrollIntoView({
       block: 'center',
       behavior: 'smooth',
     });
-  }} className={clsx(classes.fontSourceCode, entry.status ? '' : classes.itemError)} selected={selectedItemKey==itemKey} onClick={onClick}>
+  }} 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}
@@ -282,7 +279,8 @@ function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick
     <Box fontSize="12px">
       {formatEntryDate(entry.start_time)}
     </Box>
-  </ListItem>;
+  </ListItem>
+  </Root>;
 }
 
 const EntryPropType = PropTypes.shape({
@@ -305,7 +303,7 @@ HistoryEntry.propTypes = {
 };
 
 function QueryHistoryDetails({entry}) {
-  const classes = useStyles();
+
   const [copyText, setCopyText] = React.useState(gettext('Copy'));
   const eventBus = React.useContext(QueryToolEventsContext);
   const revertCopiedText = useDelayedCaller(()=>{
@@ -323,14 +321,16 @@ function QueryHistoryDetails({entry}) {
   }, [entry]);
 
   if(!entry) {
-    return <Box display="flex" height="100%">
-      <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
-    </Box>;
+    return <Root>
+      <Box display="flex" height="100%">
+        <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
+      </Box>
+    </Root>;
   }
 
   return (
-    <>
-      {entry.info && <Box className={classes.infoHeader}>{entry.info}</Box>}
+    <Root>
+      {entry.info && <Box className='QuerySources-infoHeader'>{entry.info}</Box>}
       <Box padding="0.5rem" data-label="history-detail">
         <Grid container>
           <Grid item sm={4}>{getDateFormatted(entry.start_time) + ' ' + getTimeFormatted(entry.start_time)}</Grid>
@@ -342,9 +342,9 @@ function QueryHistoryDetails({entry}) {
           <Grid item sm={4}>{gettext('Rows affected')}</Grid>
           <Grid item sm={4}>{gettext('Duration')}</Grid>
         </Grid>
-        <Box className={classes.detailsQuery}>
-          <DefaultButton size="xs" className={classes.copyBtn} onClick={onCopyClick}>{copyText}</DefaultButton>
-          <DefaultButton size="xs" className={classes.copyBtn} onClick={onCopyToEditor}>{gettext('Copy to Query Editor')}</DefaultButton>
+        <Box className='QuerySources-detailsQuery'>
+          <DefaultButton size="xs" className='QuerySources-copyBtn' onClick={onCopyClick}>{copyText}</DefaultButton>
+          <DefaultButton size="xs" className='QuerySources-copyBtn' onClick={onCopyToEditor}>{gettext('Copy to Query Editor')}</DefaultButton>
           <CodeMirror
             value={entry.query}
             readonly={true}
@@ -353,15 +353,15 @@ function QueryHistoryDetails({entry}) {
               lineNumbers: false,
               gutters: [],
             }}
-            className={classes.queryMargin}
+            className='QuerySources-queryMargin'
           />
         </Box>
         <Box marginTop="0.5rem">
           <Box>{gettext('Messages')}</Box>
-          <Box className={classes.fontSourceCode} fontSize="13px" whiteSpace="pre-wrap">{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
+          <Box className='QuerySources-fontSourceCode' fontSize="13px" whiteSpace="pre-wrap">{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
         </Box>
       </Box>
-    </>
+    </Root>
   );
 }
 
@@ -373,7 +373,7 @@ export function QueryHistory() {
   const qhu = React.useRef(new QueryHistoryUtils());
   const queryToolCtx = React.useContext(QueryToolContext);
   const queryToolConnCtx = React.useContext(QueryToolConnectionContext);
-  const classes = useStyles();
+
   const eventBus = React.useContext(QueryToolEventsContext);
   const [selectedItemKey, setSelectedItemKey] = React.useState(1);
   const [showInternal, setShowInternal] = React.useState(true);
@@ -488,15 +488,15 @@ export function QueryHistory() {
   };
 
   return (
-    <>
+    <Root>
       <Loader message={loaderText} />
       {React.useMemo(()=>(
         <Box display="flex" height="100%">
           {qhu.current.size() == 0 ?
             <EmptyPanelMessage text={gettext('No history found')} />:
             <>
-              <Box flexBasis="50%" maxWidth="50%" className={classes.leftRoot}>
-                <Box padding="0.25rem" display="flex" flexWrap="wrap">
+              <Box flexBasis="50%" maxWidth="50%" className='QuerySources-leftRoot'>
+                <Box className='QuerySources-header'>
                   <Box marginRight="auto">
                     {gettext('Show queries generated internally by pgAdmin?')}
                     <InputSwitch value={showInternal} onChange={(e)=>{
@@ -508,15 +508,15 @@ export function QueryHistory() {
                   <Box>
                     <DefaultButton size="small" disabled={!selectedItemKey} onClick={onRemove}>{gettext('Remove')}</DefaultButton>
                     <DefaultButton size="small" disabled={!qhu.current?.getGroups()?.length}
-                      className={classes.removeBtnMargin} onClick={onRemoveAll}>{gettext('Remove All')}</DefaultButton>
+                      className='QuerySources-removeBtnMargin' onClick={onRemoveAll}>{gettext('Remove All')}</DefaultButton>
                   </Box>
                 </Box>
-                <Box flexGrow="1" overflow="auto" className={classes.listRoot}>
-                  <List ref={listRef} className={classes.root} subheader={<li />} tabIndex="0" onKeyDown={onKeyPressed}>
+                <Box flexGrow="1" overflow="auto" className='QuerySources-listRoot'>
+                  <List ref={listRef} subheader={<li />} tabIndex="0" onKeyDown={onKeyPressed}>
                     {qhu.current.getGroups().map(([groupKey, groupHeader]) => (
-                      <ListItem key={`section-${groupKey}`} className={classes.removePadding}>
-                        <List className={classes.removePadding}>
-                          <ListSubheader className={classes.listSubheader}>{groupHeader}</ListSubheader>
+                      <ListItem key={`section-${groupKey}`} className='QuerySources-removePadding'>
+                        <List className='QuerySources-removePadding'>
+                          <ListSubheader className='QuerySources-listSubheader'>{groupHeader}</ListSubheader>
                           {qhu.current.getGroupEntries(groupKey).map((entry) => (
                             <HistoryEntry key={entry.itemKey} entry={entry} formatEntryDate={qhu.current.formatEntryDate}
                               itemKey={entry.itemKey} selectedItemKey={selectedItemKey} onClick={()=>{setSelectedItemKey(entry.itemKey);}}/>
@@ -533,6 +533,6 @@ export function QueryHistory() {
             </>}
         </Box>
       ), [selectedItemKey, showInternal, qhu.current.size()])}
-    </>
+    </Root>
   );
 }
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 f793d4bd8..6ebe9b95a 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
@@ -7,6 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import _ from 'lodash';
+import { styled } from '@mui/material/styles';
 import React, { useContext, useEffect, useRef, useState }  from 'react';
 import QueryToolDataGrid, { GRID_ROW_SELECT_KEY } from '../QueryToolDataGrid';
 import {CONNECTION_STATUS, PANELS, QUERY_TOOL_EVENTS} from '../QueryToolConstants';
@@ -25,12 +26,18 @@ import { getBrowser } from '../../../../../../static/js/utils';
 import CopyData from '../QueryToolDataGrid/CopyData';
 import moment from 'moment';
 import ConfirmSaveContent from '../../../../../../static/js/Dialogs/ConfirmSaveContent';
-import { makeStyles } from '@mui/styles';
 import EmptyPanelMessage from '../../../../../../static/js/components/EmptyPanelMessage';
 import { GraphVisualiser } from './GraphVisualiser';
 import { usePgAdmin } from '../../../../../../static/js/BrowserComponent';
 import pgAdmin from 'sources/pgadmin';
 
+const StyledBox = styled(Box)(({theme}) => ({
+  display: 'flex',
+  height: '100%',
+  flexDirection: 'column',
+  backgroundColor: theme.otherVars.qtDatagridBg,
+}));
+
 export class ResultSetUtils {
   constructor(api, transId, isQueryTool=true) {
     this.api = api;
@@ -735,17 +742,8 @@ function dataChangeReducer(state, action) {
   return dataChange;
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    display: 'flex',
-    height: '100%',
-    flexDirection: 'column',
-    backgroundColor: theme.otherVars.qtDatagridBg,
-  }
-}));
-
 export function ResultSet() {
-  const classes = useStyles();
+
   const containerRef = React.useRef(null);
   const eventBus = useContext(QueryToolEventsContext);
   const queryToolCtx = useContext(QueryToolContext);
@@ -1381,7 +1379,7 @@ export function ResultSet() {
 
   const rowKeyGetter = React.useCallback((row)=>row[rsu.current.clientPK]);
   return (
-    <Box className={classes.root} ref={containerRef} tabIndex="0">
+    <StyledBox ref={containerRef} tabIndex="0">
       <Loader message={loaderText} />
       <Loader data-label="loader-more-rows" message={isLoadingMore ? gettext('Loading more rows...') : null} style={{top: 'unset', right: 'unset', padding: '0.5rem 1rem'}}/>
       {!queryData &&
@@ -1413,6 +1411,6 @@ export function ResultSet() {
           />
         </Box>
       </>}
-    </Box>
+    </StyledBox>
   );
 }
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 38d849cde..606a58cd5 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React, {useContext, useCallback, useEffect, useState} from 'react';
-import { styled } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Portal } from '@mui/material';
 import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
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 d14be8e4f..c4dbf06cc 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
@@ -8,9 +8,8 @@
 //
 //////////////////////////////////////////////////////////////
 import React, { useEffect, useState, useContext }  from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
-import clsx from 'clsx';
 import _ from 'lodash';
 import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
 import { useStopwatch } from '../../../../../../static/js/custom_hooks';
@@ -18,28 +17,26 @@ import { QueryToolEventsContext } from '../QueryToolComponent';
 import gettext from 'sources/gettext';
 
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    ...theme.mixins.panelBorder.top,
-    flexWrap: 'wrap',
-    backgroundColor: theme.otherVars.editorToolbarBg,
-    userSelect: 'text',
-  },
-  padding: {
+const StyledBox = styled(Box)(({theme}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  ...theme.mixins.panelBorder.top,
+  flexWrap: 'wrap',
+  backgroundColor: theme.otherVars.editorToolbarBg,
+  userSelect: 'text',
+  '& .StatusBar-padding': {
     padding: '2px 12px',
+    '& .StatusBar-mlAuto': {
+      marginLeft: 'auto',
+    },
+    '& .StatusBar-divider': {
+      ...theme.mixins.panelBorder.right,
+    },
   },
-  divider: {
-    ...theme.mixins.panelBorder.right,
-  },
-  mlAuto: {
-    marginLeft: 'auto',
-  }
 }));
 
 export function StatusBar() {
-  const classes = useStyles();
+
   const eventBus = useContext(QueryToolEventsContext);
   const [position, setPosition] = useState([1, 1]);
   const [lastTaskText, setLastTaskText] = useState(null);
@@ -97,22 +94,22 @@ export function StatusBar() {
   }
 
   return (
-    <Box className={classes.root}>
-      <Box className={clsx(classes.padding, classes.divider)}>{gettext('Total rows: %s of %s', rowsCount[0], rowsCount[1])}</Box>
+    <StyledBox>
+      <Box className='StatusBar-padding StatusBar-divider'>{gettext('Total rows: %s of %s', rowsCount[0], rowsCount[1])}</Box>
       {lastTaskText &&
-        <Box className={clsx(classes.padding, classes.divider)}>{lastTaskText} {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{msec.toString().padStart(3, '0')}</Box>
+        <Box className='StatusBar-padding StatusBar-divider'>{lastTaskText} {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{msec.toString().padStart(3, '0')}</Box>
       }
       {!lastTaskText && !_.isNull(lastTaskText) &&
-        <Box className={clsx(classes.padding, classes.divider)}>{lastTaskText} {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{msec.toString().padStart(3, '0')}</Box>
+        <Box className='StatusBar-padding StatusBar-divider'>{lastTaskText} {hours.toString().padStart(2, '0')}:{minutes.toString().padStart(2, '0')}:{seconds.toString().padStart(2, '0')}.{msec.toString().padStart(3, '0')}</Box>
       }
       {Boolean(selectedRowsCount) &&
-        <Box className={clsx(classes.padding, classes.divider)}>{gettext('Rows selected: %s',selectedRowsCount)}</Box>}
+        <Box className='StatusBar-padding StatusBar-divider'>{gettext('Rows selected: %s',selectedRowsCount)}</Box>}
       {stagedText &&
-        <Box className={clsx(classes.padding, classes.divider)}>
+        <Box className='StatusBar-padding StatusBar-divider'>
           <span>{gettext('Changes staged: %s', stagedText)}</span>
         </Box>
       }
-      <Box className={clsx(classes.padding, classes.mlAuto)}>{gettext('Ln %s, Col %s', position[0], position[1])}</Box>
-    </Box>
+      <Box className='StatusBar-padding StatusBar-mlAuto'>{gettext('Ln %s, Col %s', position[0], position[1])}</Box>
+    </StyledBox>
   );
 }
diff --git a/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx b/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
index 781a33333..b637a116f 100644
--- a/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
+++ b/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import SchemaView from '../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../static/js/SchemaView/base_schema.ui';
 import pgAdmin from 'sources/pgadmin';
@@ -22,6 +22,13 @@ import { showChangeOwnership } from '../../../../static/js/Dialogs/index';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import _ from 'lodash';
 
+const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+  '& .UserManagementDialog-root': {
+    ...theme.mixins.tabPanel,
+    padding: 0,
+  }
+}));
+
 class UserManagementCollection extends BaseUISchema {
   constructor(authSources, roleOptions) {
     super({
@@ -303,15 +310,8 @@ class UserManagementSchema extends BaseUISchema {
   }
 }
 
-const useStyles = makeStyles((theme)=>({
-  root: {
-    ...theme.mixins.tabPanel,
-    padding: 0,
-  },
-}));
-
 function UserManagementDialog({onClose}) {
-  const classes = useStyles();
+
   const [authSources, setAuthSources] = React.useState([]);
   const [roles, setRoles] = React.useState([]);
   const api = getApiInstance();
@@ -393,7 +393,7 @@ function UserManagementDialog({onClose}) {
     window.open(url_for('help.static', { 'filename': 'user_management.html' }), 'pgadmin_help');
   };
 
-  return <SchemaView
+  return <StyledSchemaView
     formType={'dialog'}
     getInitData={()=>{ return new Promise((resolve, reject)=>{
       api.get(url_for('user_management.users'))
@@ -414,7 +414,7 @@ function UserManagementDialog({onClose}) {
     hasSQL={false}
     disableSqlHelp={true}
     isTabView={false}
-    formClassName={classes.root}
+    formClassName='UserManagementDialog-root'
   />;
 }
 
diff --git a/web/regression/feature_tests/pg_utilities_backup_restore_test.py b/web/regression/feature_tests/pg_utilities_backup_restore_test.py
index 888848679..74ba3e1b2 100644
--- a/web/regression/feature_tests/pg_utilities_backup_restore_test.py
+++ b/web/regression/feature_tests/pg_utilities_backup_restore_test.py
@@ -291,40 +291,25 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
             server_types = default_binary_path.keys()
             path_already_set = True
             for serv in server_types:
-                if serv == 'pg' and server_version is not None and \
-                        default_binary_path['pg'] != '':
-                    path_input = \
-                        self.page.find_by_css_selector(
-                            "div[class='pgrd-row-cell'][title='PostgreSQL {}']"
-                            "+div[class='pgrd-row-cell'] input"
-                            .format(server_version)
-                        )
-                    existing_path = path_input.get_property("value")
-                    if existing_path != default_binary_path['pg']:
-                        path_already_set = False
-                        self.page.clear_edit_box(path_input)
-                        path_input.click()
-                        path_input.send_keys(default_binary_path['pg'])
-                elif serv == 'ppas' and server_version is not None and \
-                        default_binary_path['ppas'] != '':
-                    path_input = \
-                        self.page.find_by_xpath(
-                            "//div[span[text()='EDB Advanced Server {}']]"
-                            "/following-sibling::div//div/input".format(
-                                server_version))
-                    existing_path = path_input.get_property("value")
-                    if existing_path != default_binary_path['ppas']:
-                        path_already_set = False
-                        path_input = self.page.find_by_xpath(
-                            "//div[span[text()='EDB Advanced Server {}']]"
-                            "/following-sibling::div//div/input".format(
-                                server_version))
-                        self.page.clear_edit_box(path_input)
-                        path_input.click()
-                        path_input.send_keys(default_binary_path['ppas'])
+                if server_version is not None:
+                    server_type = 'PostgreSQL' if serv == 'pg' \
+                        else 'EDB Advanced Server'
+                    path_input_css = "div[class='pgrd-row-cell ']" \
+                                     "[title='{0} {1}']" \
+                                     "+div[class='pgrd-row-cell '] input"\
+                        .format(server_type, server_version)
+                    path_input = self.page.find_by_css_selector(path_input_css)
+                    if default_binary_path[serv] != '':
+                        existing_path = path_input.get_property("value")
+                        if existing_path != default_binary_path[serv]:
+                            path_already_set = False
+                            self.page.clear_edit_box(path_input)
+                            path_input.click()
+                            path_input.send_keys(default_binary_path[serv])
+                    else:
+                        print('Binary path Key is Incorrect')
                 else:
-                    print('Binary path Key is Incorrect or '
-                          'server version is None.')
+                    print('Server version is None.')
 
         # save and close the preference dialog.
         if path_already_set:
diff --git a/web/regression/feature_tests/query_tool_journey_test.py b/web/regression/feature_tests/query_tool_journey_test.py
index 4fc9c0020..bafe93f07 100644
--- a/web/regression/feature_tests/query_tool_journey_test.py
+++ b/web/regression/feature_tests/query_tool_journey_test.py
@@ -360,7 +360,7 @@ class QueryToolJourneyTest(BaseFeatureTest):
     def _check_history_queries_and_icons(self, history_queries, history_icons):
         # Select first query history entry
         self.page.find_by_css_selector(
-            QueryToolLocators.query_history_specific_entry.format(2)).click()
+            QueryToolLocators.query_history_specific_entry.format(1)).click()
         for icon, query in zip(history_icons, history_queries):
             # Check query
             query_history_selected_item = self.page.find_by_css_selector(
diff --git a/web/regression/feature_tests/xss_checks_panels_and_query_tool_test.py b/web/regression/feature_tests/xss_checks_panels_and_query_tool_test.py
index f98c5f344..31d674126 100644
--- a/web/regression/feature_tests/xss_checks_panels_and_query_tool_test.py
+++ b/web/regression/feature_tests/xss_checks_panels_and_query_tool_test.py
@@ -213,7 +213,7 @@ class CheckForXssFeatureTest(BaseFeatureTest):
         # Check for history entry
         history_ele = self.page\
             .find_by_css_selector(
-                QueryToolLocators.query_history_specific_entry.format(2))
+                QueryToolLocators.query_history_specific_entry.format(1))
 
         source_code = history_ele.get_attribute('innerHTML')
 
diff --git a/web/regression/feature_utils/locators.py b/web/regression/feature_utils/locators.py
index a7ae5a31e..be1ba8e29 100644
--- a/web/regression/feature_utils/locators.py
+++ b/web/regression/feature_utils/locators.py
@@ -159,7 +159,7 @@ class QueryToolLocators:
     query_history_entries = "#id-history li[data-label='history-entry']"
 
     query_history_specific_entry = \
-        "#id-history li[data-label='history-entry']:nth-child({0})"
+        "#id-history li[data-label='history-entry']:nth-of-type({0})"
 
     query_history_detail = "#id-history div[data-label='history-detail']"
 
diff --git a/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js b/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
index 07765b4fc..bb699f0fe 100644
--- a/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
+++ b/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
@@ -46,7 +46,7 @@ describe('SchemaView', ()=>{
     jest.spyOn(pgAdmin.Browser.notifier, 'alert').mockImplementation(() => {});
   });
 
-  describe('SchemaDialogView', ()=>{
+  describe('SchemaDialogViewEdit', ()=>{
     let ctrl,
       onSave=jest.fn(() => Promise.resolve()),
       onClose=jest.fn(),
diff --git a/web/regression/javascript/components/CodeMirror.spec.js b/web/regression/javascript/components/CodeMirror.spec.js
index 57688316a..32cdd36a4 100644
--- a/web/regression/javascript/components/CodeMirror.spec.js
+++ b/web/regression/javascript/components/CodeMirror.spec.js
@@ -129,10 +129,10 @@ describe('CodeMirror', ()=>{
     it('toggle match case', ()=>{
       ctrlMount({});
       const btn = screen.getAllByRole('button').at(0);
-      expect(btn.className.includes('makeStyles-defaultButton')).toBe(true);
+      expect(btn.className.includes('Buttons-defaultButton')).toBe(true);
       fireEvent.click(btn);
 
-      expect(screen.getAllByRole('button').at(0).className.includes('makeStyles-primaryButton')).toBe(true);
+      expect(screen.getAllByRole('button').at(0).className.includes('Buttons-primaryButton')).toBe(true);
     });
 
     it('toggle regex', ()=>{
@@ -143,7 +143,7 @@ describe('CodeMirror', ()=>{
       });
 
       const btn = screen.getAllByRole('button').at(1);
-      expect(btn.className.includes('makeStyles-defaultButton')).toBe(true);
+      expect(btn.className.includes('Buttons-defaultButton')).toBe(true);
       fireEvent.click(btn);
     });
 
diff --git a/web/yarn.lock b/web/yarn.lock
index 7bb0c4854..2dd1dda5f 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1504,7 +1504,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.11.2, @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.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @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.11.2, @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.23.2, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.24.4
   resolution: "@babel/runtime@npm:7.24.4"
   dependencies:
@@ -2566,37 +2566,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/styles@npm:^5.15.10":
-  version: 5.15.15
-  resolution: "@mui/styles@npm:5.15.15"
-  dependencies:
-    "@babel/runtime": ^7.23.9
-    "@emotion/hash": ^0.9.1
-    "@mui/private-theming": ^5.15.14
-    "@mui/types": ^7.2.14
-    "@mui/utils": ^5.15.14
-    clsx: ^2.1.0
-    csstype: ^3.1.3
-    hoist-non-react-statics: ^3.3.2
-    jss: ^10.10.0
-    jss-plugin-camel-case: ^10.10.0
-    jss-plugin-default-unit: ^10.10.0
-    jss-plugin-global: ^10.10.0
-    jss-plugin-nested: ^10.10.0
-    jss-plugin-props-sort: ^10.10.0
-    jss-plugin-rule-value-function: ^10.10.0
-    jss-plugin-vendor-prefixer: ^10.10.0
-    prop-types: ^15.8.1
-  peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 5e436a8a22ae9a2e6fcb63ead3a6eff2092cc9731fce0b22d04ab9c67639a173a0e27fb617628e7720592862118a32248be458bedfabaf1de5448543a97b0307
-  languageName: node
-  linkType: hard
-
 "@mui/system@npm:^5.15.15":
   version: 5.15.15
   resolution: "@mui/system@npm:5.15.15"
@@ -6093,16 +6062,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-vendor@npm:^2.0.8":
-  version: 2.0.8
-  resolution: "css-vendor@npm:2.0.8"
-  dependencies:
-    "@babel/runtime": ^7.8.3
-    is-in-browser: ^1.0.2
-  checksum: 647cd4ea5e401c65c59376255aa2b708e92bf84fba9ce2b3ff5ecb94bf51d74ac374052b1cf9956ef7419b8ebf07fcea9a7683d2d2459127b2ca747ab5b98745
-  languageName: node
-  linkType: hard
-
 "css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
@@ -8763,13 +8722,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hyphenate-style-name@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "hyphenate-style-name@npm:1.0.4"
-  checksum: 4f5bf4b055089754924babebaa23c17845937bcca6aee95d5d015f8fa1e6814279002bd6a9e541e3fac2cd02519fc76305396727066c57c8e21a7e73e7a12137
-  languageName: node
-  linkType: hard
-
 "iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
   version: 0.6.3
   resolution: "iconv-lite@npm:0.6.3"
@@ -9225,13 +9177,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-in-browser@npm:^1.0.2, is-in-browser@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "is-in-browser@npm:1.1.3"
-  checksum: 178491f97f6663c0574565701b76f41633dbe065e4bd8d518ce017a8fa25e5109ecb6a3bd8bd55c0aba11b208f86b9f0f9c91f3664e148ebf618b74a74fcaf09
-  languageName: node
-  linkType: hard
-
 "is-jpg@npm:^3.0.0":
   version: 3.0.0
   resolution: "is-jpg@npm:3.0.0"
@@ -10308,92 +10253,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jss-plugin-camel-case@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-camel-case@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    hyphenate-style-name: ^1.0.3
-    jss: 10.10.0
-  checksum: 693485b86f7a0e0bd0c16b8ddd057ca02a993fc088558c96501f9131e7e6261cc9f4b08047879a68441c688c40dceeb5219b1f15ade9043935aade4f37f5ca85
-  languageName: node
-  linkType: hard
-
-"jss-plugin-default-unit@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-default-unit@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    jss: 10.10.0
-  checksum: 6e56213830753ad80bca3824973a667106defaef698d5996d45d03a0e2a3e035b33cd257aa8015040c41bd6669e7598dce72c36099d7ae69db758a7b2ca453fa
-  languageName: node
-  linkType: hard
-
-"jss-plugin-global@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-global@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    jss: 10.10.0
-  checksum: f3af4f40358e96cf89e0c7c84b6e441dc9b4d543cd6109fdf9314a9818fd780d252035f46cc526c3d3fb4393bc29effc6993cc22e04f4e67ec3c889ab760d580
-  languageName: node
-  linkType: hard
-
-"jss-plugin-nested@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-nested@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    jss: 10.10.0
-    tiny-warning: ^1.0.2
-  checksum: 190094375972b68eb8f683387c74e97dc8347e7cc4f2fbfd40b3baf077dfde83d70e57be56744690d22537c0390e0a398714d86736df820c64e498df95f937de
-  languageName: node
-  linkType: hard
-
-"jss-plugin-props-sort@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-props-sort@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    jss: 10.10.0
-  checksum: 274483444b6733bd58d229ebdcdb32b3c24172bc83cb2f6f8364926de19acd872758bcf06c7b3af11cf75504a67a7d67abba62b25081d144585a56b4df9512ba
-  languageName: node
-  linkType: hard
-
-"jss-plugin-rule-value-function@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-rule-value-function@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    jss: 10.10.0
-    tiny-warning: ^1.0.2
-  checksum: 009c9593b9be8b9f1030b797e58e3c233d90e034e5c68b0cabd25bffc7da965c69dc1ccb1bb6a542d72bb824df89036b2264fe564e8538320ef99febaf2882ee
-  languageName: node
-  linkType: hard
-
-"jss-plugin-vendor-prefixer@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss-plugin-vendor-prefixer@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    css-vendor: ^2.0.8
-    jss: 10.10.0
-  checksum: 879b7233f9b0b571074dc2b88d97a05dbb949012ba2405f1481bbedd521167dc835133632adb3f2d8ffceddd337c8c13e3e8b1931590516c0664039598752dff
-  languageName: node
-  linkType: hard
-
-"jss@npm:10.10.0, jss@npm:^10.10.0":
-  version: 10.10.0
-  resolution: "jss@npm:10.10.0"
-  dependencies:
-    "@babel/runtime": ^7.3.1
-    csstype: ^3.0.2
-    is-in-browser: ^1.1.3
-    tiny-warning: ^1.0.2
-  checksum: ecf71971df42729668c283e432e841349b7fdbe52e520f7704991cf4a738fd2451ec0feeb25c12cdc5addf7facecf838e74e62936fd461fb4c99f23d54a4792d
-  languageName: node
-  linkType: hard
-
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
@@ -14288,7 +14147,6 @@ __metadata:
     "@mui/icons-material": ^5.15.10
     "@mui/lab": ^5.0.0-alpha.165
     "@mui/material": ^5.15.10
-    "@mui/styles": ^5.15.10
     "@mui/x-date-pickers": ^6.19.7
     "@projectstorm/react-diagrams": ^6.6.1
     "@simonwep/pickr": ^1.5.1
@@ -15728,13 +15586,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-warning@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "tiny-warning@npm:1.0.3"
-  checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71
-  languageName: node
-  linkType: hard
-
 "tmpl@npm:1.0.5":
   version: 1.0.5
   resolution: "tmpl@npm:1.0.5"