diff --git a/web/pgadmin/browser/static/js/utility_view.jsx b/web/pgadmin/browser/static/js/utility_view.jsx
index 626e031da..80770fb7f 100644
--- a/web/pgadmin/browser/static/js/utility_view.jsx
+++ b/web/pgadmin/browser/static/js/utility_view.jsx
@@ -14,6 +14,7 @@ import getApiInstance from 'sources/api_instance';
 import {getHelpUrl, getEPASHelpUrl} from 'pgadmin.help';
 import SchemaView from 'sources/SchemaView';
 import 'wcdocker';
+import Theme from '../../../static/js/Theme';
 
 /* The entry point for rendering React based view in properties, called in node.js */
 export function getUtilityView(schema, treeNodeInfo, actionType, formType, container, containerPanel,
@@ -80,22 +81,24 @@ export function getUtilityView(schema, treeNodeInfo, actionType, formType, conta
 
   /* Fire at will, mount the DOM */
   ReactDOM.render(
-    <SchemaView
-      formType={formType}
-      schema={_schema}
-      viewHelperProps={viewHelperProps}
-      customSaveBtnName={saveBtnName}
-      customSaveBtnIconType={saveBtnIcon}
-      onSave={onSaveClick}
-      onClose={()=>containerPanel.close()}
-      onHelp={onHelp}
-      onDataChange={()=>{/*This is intentional (SonarQube)*/}}
-      confirmOnCloseReset={confirmOnReset}
-      hasSQL={false}
-      isTabView={isTabView}
-      disableSqlHelp={sqlHelpUrl == undefined || sqlHelpUrl == ''}
-      disableDialogHelp={helpUrl == undefined || helpUrl == ''}
-    />, container);
+    <Theme>
+      <SchemaView
+        formType={formType}
+        schema={_schema}
+        viewHelperProps={viewHelperProps}
+        customSaveBtnName={saveBtnName}
+        customSaveBtnIconType={saveBtnIcon}
+        onSave={onSaveClick}
+        onClose={()=>containerPanel.close()}
+        onHelp={onHelp}
+        onDataChange={()=>{/*This is intentional (SonarQube)*/}}
+        confirmOnCloseReset={confirmOnReset}
+        hasSQL={false}
+        isTabView={isTabView}
+        disableSqlHelp={sqlHelpUrl == undefined || sqlHelpUrl == ''}
+        disableDialogHelp={helpUrl == undefined || helpUrl == ''}
+      />
+    </Theme>, container);
 }
 
 /* When switching from normal node to collection node, clean up the React mounted DOM */
diff --git a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
index 56a111979..59f88ce32 100644
--- a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
+++ b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
@@ -27,6 +27,7 @@ import { getFunctionId, getProcedureId, getAppropriateLabel, setDebuggerTitle }
 import FunctionArguments from './debugger_ui';
 import ModalProvider from '../../../../static/js/helpers/ModalProvider';
 import DebuggerComponent from './components/DebuggerComponent';
+import Theme from '../../../../static/js/Theme';
 
 export default class Debugger {
   static instance;
@@ -684,13 +685,15 @@ export default class Debugger {
     });
 
     ReactDOM.render(
-      <ModalProvider>
-        <DebuggerComponent pgAdmin={pgWindow.pgAdmin} selectedNodeInfo={selectedNodeInfo} panel={panel}  layout={layout} params={{
-          transId: trans_id,
-          directDebugger: this,
-          funcArgsInstance: this.funcArgs
-        }} />
-      </ModalProvider>,
+      <Theme>
+        <ModalProvider>
+          <DebuggerComponent pgAdmin={pgWindow.pgAdmin} selectedNodeInfo={selectedNodeInfo} panel={panel}  layout={layout} params={{
+            transId: trans_id,
+            directDebugger: this,
+            funcArgsInstance: this.funcArgs
+          }} />
+        </ModalProvider>
+      </Theme>,
       container
     );
   }
@@ -723,4 +726,4 @@ export default class Debugger {
       function (evt) { evt.cancel = false; }
     ).set({ 'title': gettext('Rename Panel') });
   }
-}
\ No newline at end of file
+}
diff --git a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
index 879758893..c473ffdf8 100644
--- a/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
+++ b/web/pgadmin/tools/debugger/static/js/components/DebuggerComponent.jsx
@@ -17,7 +17,6 @@ import Loader from 'sources/components/Loader';
 
 import Layout, { LayoutHelper } from '../../../../../static/js/helpers/Layout';
 import EventBus from '../../../../../static/js/helpers/EventBus';
-import Theme from '../../../../../static/js/Theme';
 import getApiInstance from '../../../../../static/js/api_instance';
 import Notify from '../../../../../static/js/helpers/Notifier';
 
@@ -153,7 +152,7 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
           if(panel) {
             panel.close();
           }
-          
+
         });
       }
     } catch (e) {
@@ -1232,20 +1231,18 @@ export default function DebuggerComponent({ pgAdmin, selectedNodeInfo, panel, ev
   return (
     <DebuggerContext.Provider value={DebuggerContextValue}>
       <DebuggerEventsContext.Provider value={eventBus.current}>
-        <Theme>
-          <Loader message={loaderText} />
-          <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
-            <ToolBar
-              containerRef={containerRef}
-            />
-            <Layout
-              getLayoutInstance={(obj) => docker.current = obj}
-              defaultLayout={defaultLayout}
-              layoutId="Debugger/Layout"
-              savedLayout={savedLayout}
-            />
-          </Box>
-        </Theme>
+        <Loader message={loaderText} />
+        <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
+          <ToolBar
+            containerRef={containerRef}
+          />
+          <Layout
+            getLayoutInstance={(obj) => docker.current = obj}
+            defaultLayout={defaultLayout}
+            layoutId="Debugger/Layout"
+            savedLayout={savedLayout}
+          />
+        </Box>
       </DebuggerEventsContext.Provider>
     </DebuggerContext.Provider>
   );
diff --git a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
index 9fa8cca64..fcf606254 100644
--- a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
+++ b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
@@ -27,6 +27,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import QueryToolComponent from './components/QueryToolComponent';
 import ModalProvider from '../../../../static/js/helpers/ModalProvider';
+import Theme from '../../../../static/js/Theme';
 
 
 export function setPanelTitle(queryToolPanel, panelTitle) {
@@ -406,9 +407,11 @@ export default class SQLEditor {
     });
     this.setupPreferencesWorker();
     ReactDOM.render(
-      <ModalProvider>
-        <QueryToolComponent params={params} pgWindow={pgWindow} pgAdmin={pgAdmin} panel={panel} selectedNodeInfo={selectedNodeInfo}/>
-      </ModalProvider>,
+      <Theme>
+        <ModalProvider>
+          <QueryToolComponent params={params} pgWindow={pgWindow} pgAdmin={pgAdmin} panel={panel} selectedNodeInfo={selectedNodeInfo}/>
+        </ModalProvider>
+      </Theme>,
       container
     );
   }
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
index 83c038071..71b5bb16c 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
@@ -16,7 +16,6 @@ import { ResultSet } from './sections/ResultSet';
 import { StatusBar } from './sections/StatusBar';
 import { MainToolBar } from './sections/MainToolBar';
 import { Messages } from './sections/Messages';
-import Theme from 'sources/Theme';
 import getApiInstance, {parseApiError} from '../../../../../static/js/api_instance';
 import url_for from 'sources/url_for';
 import { PANELS, QUERY_TOOL_EVENTS, CONNECTION_STATUS } from './QueryToolConstants';
@@ -699,35 +698,33 @@ export default function QueryToolComponent({params, pgWindow, pgAdmin, selectedN
     <QueryToolContext.Provider value={queryToolContextValue}>
       <QueryToolConnectionContext.Provider value={queryToolConnContextValue}>
         <QueryToolEventsContext.Provider value={eventBus.current}>
-          <Theme>
-            <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
-              <ConnectionBar
-                connected={qtState.connected}
-                connecting={qtState.obtaining_conn}
-                connectionStatus={qtState.connection_status}
-                connectionStatusMsg={qtState.connection_status_msg}
-                connectionList={qtState.connection_list}
-                onConnectionChange={(connectionData)=>updateQueryToolConnection(connectionData)}
-                onNewConnClick={onNewConnClick}
-                onNewQueryToolClick={onNewQueryToolClick}
-                onResetLayout={onResetLayout}
-                docker={docker.current}
-              />
-              {React.useMemo(()=>(
-                <MainToolBar
-                  containerRef={containerRef}
-                  onManageMacros={onManageMacros}
-                  onFilterClick={onFilterClick}
-                />), [containerRef.current, onManageMacros, onFilterClick])}
-              <Layout
-                getLayoutInstance={(obj)=>docker.current=obj}
-                defaultLayout={defaultLayout}
-                layoutId="SQLEditor/Layout"
-                savedLayout={params.layout}
-              />
-              <StatusBar />
-            </Box>
-          </Theme>
+          <Box width="100%" height="100%" display="flex" flexDirection="column" flexGrow="1" tabIndex="0" ref={containerRef}>
+            <ConnectionBar
+              connected={qtState.connected}
+              connecting={qtState.obtaining_conn}
+              connectionStatus={qtState.connection_status}
+              connectionStatusMsg={qtState.connection_status_msg}
+              connectionList={qtState.connection_list}
+              onConnectionChange={(connectionData)=>updateQueryToolConnection(connectionData)}
+              onNewConnClick={onNewConnClick}
+              onNewQueryToolClick={onNewQueryToolClick}
+              onResetLayout={onResetLayout}
+              docker={docker.current}
+            />
+            {React.useMemo(()=>(
+              <MainToolBar
+                containerRef={containerRef}
+                onManageMacros={onManageMacros}
+                onFilterClick={onFilterClick}
+              />), [containerRef.current, onManageMacros, onFilterClick])}
+            <Layout
+              getLayoutInstance={(obj)=>docker.current=obj}
+              defaultLayout={defaultLayout}
+              layoutId="SQLEditor/Layout"
+              savedLayout={params.layout}
+            />
+            <StatusBar />
+          </Box>
         </QueryToolEventsContext.Provider>
       </QueryToolConnectionContext.Provider>
     </QueryToolContext.Provider>
diff --git a/web/regression/javascript/debugger/MockDebuggerComponent.jsx b/web/regression/javascript/debugger/MockDebuggerComponent.jsx
index 0ae0b5e0e..f675582f3 100644
--- a/web/regression/javascript/debugger/MockDebuggerComponent.jsx
+++ b/web/regression/javascript/debugger/MockDebuggerComponent.jsx
@@ -15,13 +15,13 @@ import {DebuggerContext, DebuggerEventsContext} from '../../../pgadmin/tools/deb
 
 export default function MockDebuggerComponent({value, eventsvalue, children}) {
   return (
-    <DebuggerContext.Provider value={value}>
-      <DebuggerEventsContext.Provider value={eventsvalue}>
-        <Theme>
+    <Theme>
+      <DebuggerContext.Provider value={value}>
+        <DebuggerEventsContext.Provider value={eventsvalue}>
           {children}
-        </Theme>
-      </DebuggerEventsContext.Provider>
-    </DebuggerContext.Provider>
+        </DebuggerEventsContext.Provider>
+      </DebuggerContext.Provider>
+    </Theme>
   );
 }
 
diff --git a/web/regression/javascript/debugger/debugger_spec.js b/web/regression/javascript/debugger/debugger_spec.js
index 58c423372..ec9131d5f 100644
--- a/web/regression/javascript/debugger/debugger_spec.js
+++ b/web/regression/javascript/debugger/debugger_spec.js
@@ -27,6 +27,7 @@ import DebuggerComponent from '../../../pgadmin/tools/debugger/static/js/compone
 import FunctionArguments from '../../../pgadmin/tools/debugger/static/js/debugger_ui';
 import Debugger from '../../../pgadmin/tools/debugger/static/js/DebuggerModule';
 import {TreeFake} from '../tree/tree_fake';
+import Theme from '../../../pgadmin/static/js/Theme';
 
 
 describe('Debugger Component', () => {
@@ -266,14 +267,16 @@ describe('Debugger Component', () => {
     networkMock.onGet(url_for('debugger.execute_query', {'trans_id': params.transId, 'query_type': 'get_stack_info'})).reply(200, {'success':1,'errormsg':'','info':'','result':null,'data':{'status':'Success','result':[{'level':0,'targetname':'_test()','func':3138947,'linenumber':9,'args':''}]}});
     networkMock.onGet(url_for('debugger.poll_result', {'trans_id': params.transId})).reply(200, {'success':0,'errormsg':'','info':'','result':null,'data':{'status':'Success','result':[{'pldbg_wait_for_target':28298}]}});
     let ctrl = mount(
-      <DebuggerComponent
-        pgAdmin={pgAdmin}
-        panel={document.getElementById('debugger-main-container')}
-        selectedNodeInfo={nodeInfo}
-        layout={''}
-        params={params}
-      >
-      </DebuggerComponent>
+      <Theme>
+        <DebuggerComponent
+          pgAdmin={pgAdmin}
+          panel={document.getElementById('debugger-main-container')}
+          selectedNodeInfo={nodeInfo}
+          layout={''}
+          params={params}
+        >
+        </DebuggerComponent>
+      </Theme>
     );
 
     ctrl.find('PgIconButton[data-test="debugger-contiue"]').props().onClick();