diff --git a/web/pgadmin/browser/static/js/node_view.jsx b/web/pgadmin/browser/static/js/node_view.jsx
index 7681024c0..fde229f0c 100644
--- a/web/pgadmin/browser/static/js/node_view.jsx
+++ b/web/pgadmin/browser/static/js/node_view.jsx
@@ -18,6 +18,7 @@ import { generateNodeUrl } from './node_ajax';
 import Notify from '../../../static/js/helpers/Notifier';
 import gettext from 'sources/gettext';
 import 'wcdocker';
+import Theme from '../../../static/js/Theme';
 
 /* The entry point for rendering React based view in properties, called in node.js */
 export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, formType, container, containerPanel, onEdit, onSave) {
@@ -204,24 +205,26 @@ export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, fo
 
   /* Fire at will, mount the DOM */
   ReactDOM.render(
-    <SchemaView
-      formType={formType}
-      getInitData={initData}
-      schema={schema}
-      viewHelperProps={viewHelperProps}
-      onSave={onSaveClick}
-      onClose={()=>containerPanel.close()}
-      onHelp={onHelp}
-      onEdit={onEdit}
-      onDataChange={(dataChanged)=>{
-        isDirty = dataChanged;
-      }}
-      confirmOnCloseReset={confirmOnCloseReset}
-      hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')}
-      getSQLValue={getSQLValue}
-      disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
-      disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
-    />, container);
+    <Theme>
+      <SchemaView
+        formType={formType}
+        getInitData={initData}
+        schema={schema}
+        viewHelperProps={viewHelperProps}
+        onSave={onSaveClick}
+        onClose={()=>containerPanel.close()}
+        onHelp={onHelp}
+        onEdit={onEdit}
+        onDataChange={(dataChanged)=>{
+          isDirty = dataChanged;
+        }}
+        confirmOnCloseReset={confirmOnCloseReset}
+        hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')}
+        getSQLValue={getSQLValue}
+        disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
+        disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
+      />
+    </Theme>, container);
 }
 
 /* When switching from normal node to collection node, clean up the React mounted DOM */
diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx
index 9a8919f2f..3221286b6 100644
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/web/pgadmin/static/js/SchemaView/index.jsx
@@ -22,7 +22,6 @@ import diffArray from 'diff-arrays-of-objects';
 import _ from 'lodash';
 
 import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents';
-import Theme from 'sources/Theme';
 import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons';
 import Loader from 'sources/components/Loader';
 import { minMaxValidator, numberValidator, integerValidator, emptyValidator, checkUniqueCol, isEmptyString} from '../validators';
@@ -979,19 +978,15 @@ export default function SchemaView({formType, ...props}) {
   /* Switch the view based on formType */
   if(formType === 'tab') {
     return (
-      <Theme>
-        <ErrorBoundary>
-          <SchemaPropertiesView {...props}/>
-        </ErrorBoundary>
-      </Theme>
+      <ErrorBoundary>
+        <SchemaPropertiesView {...props}/>
+      </ErrorBoundary>
     );
   }
   return (
-    <Theme>
-      <ErrorBoundary>
-        <SchemaDialogView {...props}/>
-      </ErrorBoundary>
-    </Theme>
+    <ErrorBoundary>
+      <SchemaDialogView {...props}/>
+    </ErrorBoundary>
   );
 }
 
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index 0474f2fee..80523fe04 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -17,7 +17,6 @@ import CloseIcon from '@material-ui/icons/CloseRounded';
 import CustomPropTypes from '../custom_prop_types';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
-import Theme from '../Theme';
 import HTMLReactParser from 'html-react-parser';
 import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
 import { Rnd } from 'react-rnd';
@@ -267,36 +266,35 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
   const [isfullScreen, setIsFullScreen] = useState(fullScreen);
 
   return (
-    <Theme>
-      <Dialog
-        open={true}
-        onClose={closeModal}
-        PaperComponent={PaperComponent}
-        PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight }}
-        fullScreen={isfullScreen}
-        fullWidth={isFullWidth}
-        disableBackdropClick
-      >
-        <DialogTitle className='modal-drag-area'>
-          <Box className={classes.titleBar}>
-            <Box className={classes.title} marginRight="0.25rem" >{title}</Box>
-            {
-              showFullScreen && !isfullScreen &&
-              <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.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>
-            }
+    <Dialog
+      open={true}
+      onClose={closeModal}
+      PaperComponent={PaperComponent}
+      PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight }}
+      fullScreen={isfullScreen}
+      fullWidth={isFullWidth}
+      disableBackdropClick
+      disablePortal
+    >
+      <DialogTitle className='modal-drag-area'>
+        <Box className={classes.titleBar}>
+          <Box className={classes.title} marginRight="0.25rem" >{title}</Box>
+          {
+            showFullScreen && !isfullScreen &&
+            <Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.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 marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={closeModal} /></Box>
-          </Box>
-        </DialogTitle>
-        <DialogContent height="100%">
-          {content(closeModal)}
-        </DialogContent>
-      </Dialog>
-    </Theme>
+          <Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon  />} size="xs" noBorder onClick={closeModal} /></Box>
+        </Box>
+      </DialogTitle>
+      <DialogContent height="100%">
+        {content(closeModal)}
+      </DialogContent>
+    </Dialog>
   );
 }
 ModalContainer.propTypes = {
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 18fa79e5f..db538e0c6 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -10,7 +10,6 @@
 import _ from 'lodash';
 import React, { useContext, useState, useMemo, useEffect } from 'react';
 import gettext from 'sources/gettext';
-import Theme from 'sources/Theme';
 import PropTypes from 'prop-types';
 import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
@@ -324,54 +323,52 @@ export function GraphVisualiser({initColumns}) {
   };
 
   return (
-    <Theme>
-      <Box className={classes.mainContainer}>
-        <Loader message={loaderText} />
-        <Box className={classes.topContainer}>
+    <Box className={classes.mainContainer}>
+      <Loader message={loaderText} />
+      <Box className={classes.topContainer}>
+        <Box className={classes.displayFlex}>
           <Box className={classes.displayFlex}>
-            <Box className={classes.displayFlex}>
-              <span className={classes.spanLabel}>{gettext('X Axis')}</span>
-              <InputSelect className={classes.selectCtrl} options={xAxisOptions}
-                onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
-            </Box>
-            <Box className={classes.displayFlex} marginLeft="auto">
-              <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
-              <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
-                options={[
-                  {label: gettext('Line Chart'), value: 'L'},
-                  {label: gettext('Stacked Line Chart'), value: 'SL'},
-                  {label: gettext('Bar Chart'), value: 'B'},
-                  {label: gettext('Stacked Bar Chart'), value: 'SB'},
-                ]} onChange={(v)=>setGraphType(v)} value={graphType} />
-            </Box>
-            <DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
-              disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
-              {gettext('Generate')}
-            </DefaultButton>
+            <span className={classes.spanLabel}>{gettext('X Axis')}</span>
+            <InputSelect className={classes.selectCtrl} options={xAxisOptions}
+              onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
           </Box>
-          <Box className={classes.displayFlex}>
-            <span className={classes.spanLabel}>{gettext('Y Axis')}</span>
-            <InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}}
-              options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
+          <Box className={classes.displayFlex} marginLeft="auto">
+            <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
+            <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
+              options={[
+                {label: gettext('Line Chart'), value: 'L'},
+                {label: gettext('Stacked Line Chart'), value: 'SL'},
+                {label: gettext('Bar Chart'), value: 'B'},
+                {label: gettext('Stacked Bar Chart'), value: 'SB'},
+              ]} onChange={(v)=>setGraphType(v)} value={graphType} />
           </Box>
+          <DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
+            disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
+            {gettext('Generate')}
+          </DefaultButton>
         </Box>
-        <Box display="flex" marginLeft="3px" marginTop="3px">
-          <PgButtonGroup size="small">
-            <PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>}
-              onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/>
-            <PgIconButton title={gettext('Download')} icon={<SaveAltIcon style={{height: '1.2rem'}}/>}
-              onClick={onDownloadGraph} disabled={ graphData.datasets.length <= 0 }/>
-          </PgButtonGroup>
-        </Box>
-        <Box ref={contentRef} className={classes.graphContainer}>
-          <Box style={{height:`${graphHeight}px`}}>
-            {useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
-              chartObjRef.current = chartObj;
-            }} plugins={plugin}/>, [graphDataKey])}
-          </Box>
+        <Box className={classes.displayFlex}>
+          <span className={classes.spanLabel}>{gettext('Y Axis')}</span>
+          <InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}}
+            options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
         </Box>
       </Box>
-    </Theme>
+      <Box display="flex" marginLeft="3px" marginTop="3px">
+        <PgButtonGroup size="small">
+          <PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>}
+            onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/>
+          <PgIconButton title={gettext('Download')} icon={<SaveAltIcon style={{height: '1.2rem'}}/>}
+            onClick={onDownloadGraph} disabled={ graphData.datasets.length <= 0 }/>
+        </PgButtonGroup>
+      </Box>
+      <Box ref={contentRef} className={classes.graphContainer}>
+        <Box style={{height:`${graphHeight}px`}}>
+          {useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
+            chartObjRef.current = chartObj;
+          }} plugins={plugin}/>, [graphDataKey])}
+        </Box>
+      </Box>
+    </Box>
   );
 }
 GraphVisualiser.propTypes = {