diff --git a/docs/en_US/images/dashboard_activity.png b/docs/en_US/images/dashboard_activity.png
new file mode 100644
index 000000000..ec75ada53
Binary files /dev/null and b/docs/en_US/images/dashboard_activity.png differ
diff --git a/docs/en_US/images/dashboard_config.png b/docs/en_US/images/dashboard_config.png
new file mode 100644
index 000000000..f1d298467
Binary files /dev/null and b/docs/en_US/images/dashboard_config.png differ
diff --git a/docs/en_US/images/dashboard_logs.png b/docs/en_US/images/dashboard_logs.png
new file mode 100644
index 000000000..0b1753503
Binary files /dev/null and b/docs/en_US/images/dashboard_logs.png differ
diff --git a/docs/en_US/images/dashboard_stat.png b/docs/en_US/images/dashboard_stat.png
new file mode 100644
index 000000000..c2c754b11
Binary files /dev/null and b/docs/en_US/images/dashboard_stat.png differ
diff --git a/docs/en_US/release_notes_8_10.rst b/docs/en_US/release_notes_8_10.rst
index 3a7bacaf1..646019ac0 100644
--- a/docs/en_US/release_notes_8_10.rst
+++ b/docs/en_US/release_notes_8_10.rst
@@ -20,6 +20,7 @@ Bundled PostgreSQL Utilities
 New features
 ************
 
+  | `Issue #3981 <https://github.com/pgadmin-org/pgadmin4/issues/3981>`_ -  Add support for Postgres Server Logs for Text, CSV and JSON format in plain and tabular formats. Upgrade React to version 18.
 
 Housekeeping
 ************
diff --git a/docs/en_US/tabbed_browser.rst b/docs/en_US/tabbed_browser.rst
index 4bb9c98b1..93b9d3ae2 100644
--- a/docs/en_US/tabbed_browser.rst
+++ b/docs/en_US/tabbed_browser.rst
@@ -9,14 +9,14 @@ display information about the object currently selected in the *pgAdmin* tree
 control in the left window.  Select a tab to access information about the
 highlighted object in the tree control.
 
-.. image:: images/main_dashboard_general.png
-    :alt: Dashboard panel
+.. image:: images/dashboard_activity.png
+    :alt: Dashboard Activity
     :align: center
 
 The graphs and tables on the *Dashboard* tab provides an active analysis of system statistics and the usage
 statistics for the selected server or database.
 
-Click the *General* tab to get the usage statistics for the selected server or database:
+Click the *Activity* tab to get the usage statistics for the selected server or database:
 
 * The *Server sessions* or *Database sessions* graph displays the interactions
   with the server or database.
@@ -30,8 +30,14 @@ Click the *General* tab to get the usage statistics for the selected server or d
   or fetched from the buffer cache (but not the operating system's file system
   cache) for the server or database.
 
-The *Server activity* panel displays information about sessions, locks, prepared
-transactions, and server configuration (if applicable). The information is
+.. image:: images/dashboard_stat.png
+    :alt: Dashboard Activity
+    :align: center
+
+Click the *Stat* tab to get the usage statistics for the selected server or database:
+
+The *Stat* panel displays information about sessions, locks, prepared
+transactions. The information is
 presented in context-sensitive tables.  Use controls located above the table to:
 
 * Click the *Refresh* button to update the information displayed in each table.
@@ -56,6 +62,22 @@ session:
 * Use the *Details* icon (located in the third column) to open the *Details*
   tab; the tab displays information about the selected session.
 
+.. image:: images/dashboard_config.png
+    :alt: Dashboard Activity
+    :align: center
+
+Click the *Configuration* tab to get the server configuration details.
+
+
+.. image:: images/dashboard_logs.png
+    :alt: Dashboard Activity
+    :align: center
+
+Click the *Logs* tab to get the server logs.
+
+* Use the Log Format switch to select the format you want. Text/Plain, JSON and CSV are supported.
+* Use the Logs in tabular format? switch if you want to see the logs in a tabular format.
+
 Click the *System Statistics* tab to get the statistics for the system:
 
 .. image:: images/main_dashboard_sys_statistics_summary.png
diff --git a/web/config.py b/web/config.py
index 12729ea36..d056ce98b 100644
--- a/web/config.py
+++ b/web/config.py
@@ -929,6 +929,12 @@ SERVER_HEARTBEAT_TIMEOUT = 30  # In seconds
 #############################################################################
 ENABLE_SERVER_PASS_EXEC_CMD = False
 
+#############################################################################
+# Number of records to fetch in one batch for server logs.
+##############################################################################
+
+ON_DEMAND_LOG_COUNT = 10000
+
 #############################################################################
 # Patch the default config with custom config and other manipulations
 #############################################################################
diff --git a/web/package.json b/web/package.json
index 9ce1f9596..592141ca6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -21,9 +21,10 @@
     "@emotion/styled": "^11.11.0",
     "@emotion/utils": "^1.0.0",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.1.2",
-    "@testing-library/react": "12",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "10.2.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.4",
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
@@ -72,6 +73,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.12.13",
+    "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-sql": "^6.6.5",
     "@date-io/core": "^3.0.0",
     "@date-io/date-fns": "3.x",
@@ -84,10 +86,12 @@
     "@projectstorm/react-diagrams": "^6.6.1",
     "@simonwep/pickr": "^1.5.1",
     "@szhsin/react-menu": "^2.2.0",
+    "@tanstack/react-query": "5.37.1",
     "@tanstack/react-table": "^8.16.0",
     "@tanstack/react-virtual": "^3.4.0",
-    "@types/react": "^17.0.80",
-    "@types/react-dom": "^17.0.25",
+    "@types/classnames": "^2.2.6",
+    "@types/react": "^18.0.2",
+    "@types/react-dom": "^18.0.0",
     "ajv": "^8.8.2",
     "anti-trojan-source": "^1.4.0",
     "aspen-decorations": "^1.0.2",
@@ -125,14 +129,14 @@
     "postcss": "^8.4.31",
     "raf": "^3.4.1",
     "rc-dock": "^3.2.9",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
     "react-arborist": "^3.2.0",
     "react-aspen": "^1.1.0",
     "react-checkbox-tree": "^1.7.2",
     "react-data-grid": "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.1",
     "react-frame-component": "^5.2.6",
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index d348251bf..2bd651eb4 100644
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -382,7 +382,7 @@ define('pgadmin.browser.node', [
 
           treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(nodeItem);
           const panelId = _.uniqueId(BROWSER_PANELS.EDIT_PROPERTIES);
-          const onClose = (force=false)=>pgBrowser.docker.close(panelId, force);
+          const onClose = (force=false)=>{ pgBrowser.docker.close(panelId, force); };
           const onSave = (newNodeData)=>{
             // Clear the cache for this node now.
             setTimeout(()=>{
@@ -412,7 +412,7 @@ define('pgadmin.browser.node', [
           // browser tree upon the 'Save' button click.
           treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(nodeItem);
           const panelId = _.uniqueId(BROWSER_PANELS.EDIT_PROPERTIES);
-          const onClose = (force=false)=>pgBrowser.docker.close(panelId, force);
+          const onClose = (force=false)=>{ pgBrowser.docker.close(panelId, force); };
           const onSave = (newNodeData)=>{
             // Clear the cache for this node now.
             setTimeout(()=>{
@@ -438,7 +438,7 @@ define('pgadmin.browser.node', [
           });
         } else {
           const panelId = BROWSER_PANELS.EDIT_PROPERTIES+nodeData.id;
-          const onClose = (force=false)=>pgBrowser.docker.close(panelId, force);
+          const onClose = (force=false)=>{ pgBrowser.docker.close(panelId, force); };
           const onSave = (newNodeData)=>{
             let _old = nodeData,
               _new = newNodeData.node,
diff --git a/web/pgadmin/dashboard/__init__.py b/web/pgadmin/dashboard/__init__.py
index 7e6eb8ab1..dd331d007 100644
--- a/web/pgadmin/dashboard/__init__.py
+++ b/web/pgadmin/dashboard/__init__.py
@@ -9,6 +9,7 @@
 
 """A blueprint module implementing the dashboard frame."""
 import math
+import re
 
 from flask import render_template, Response, g, request
 from flask_babel import gettext
@@ -16,8 +17,7 @@ from pgadmin.user_login_check import pga_login_required
 import json
 from pgadmin.utils import PgAdminModule
 from pgadmin.utils.ajax import make_response as ajax_response,\
-    internal_server_error
-
+    internal_server_error, make_json_response, precondition_required
 from pgadmin.utils.driver import get_driver
 from pgadmin.utils.preferences import Preferences
 from pgadmin.utils.constants import PREF_LABEL_DISPLAY, MIMETYPE_APP_JS, \
@@ -25,7 +25,7 @@ from pgadmin.utils.constants import PREF_LABEL_DISPLAY, MIMETYPE_APP_JS, \
 
 from .precondition import check_precondition
 from .pgd_replication import blueprint as pgd_replication
-from config import PG_DEFAULT_DRIVER
+from config import PG_DEFAULT_DRIVER, ON_DEMAND_LOG_COUNT
 
 MODULE_NAME = 'dashboard'
 
@@ -157,17 +157,17 @@ class DashboardModule(PgAdminModule):
 
         self.display_graphs = self.dashboard_preference.register(
             'display', 'show_graphs',
-            gettext("Show graphs?"), 'boolean', True,
+            gettext("Show activity?"), 'boolean', True,
             category_label=PREF_LABEL_DISPLAY,
-            help_str=gettext('If set to True, graphs '
+            help_str=gettext('If set to True, activity '
                              'will be displayed on dashboards.')
         )
 
         self.display_server_activity = self.dashboard_preference.register(
             'display', 'show_activity',
-            gettext("Show activity?"), 'boolean', True,
+            gettext("Show state?"), 'boolean', True,
             category_label=PREF_LABEL_DISPLAY,
-            help_str=gettext('If set to True, activity tables '
+            help_str=gettext('If set to True, state tables '
                              'will be displayed on dashboards.')
         )
 
@@ -241,7 +241,9 @@ class DashboardModule(PgAdminModule):
             'dashboard.get_prepared_by_server_id',
             'dashboard.get_prepared_by_database_id',
             'dashboard.config',
-            'dashboard.get_config_by_server_id',
+            'dashboard.log_formats',
+            'dashboard.logs',
+            'dashboard.get_logs_by_server_id',
             'dashboard.check_system_statistics',
             'dashboard.check_system_statistics_sid',
             'dashboard.check_system_statistics_did',
@@ -318,7 +320,8 @@ def index(sid=None, did=None):
         )
 
 
-def get_data(sid, did, template, check_long_running_query=False):
+def get_data(sid, did, template, check_long_running_query=False,
+             only_data=False):
     """
     Generic function to get server stats based on an SQL template
     Args:
@@ -347,6 +350,9 @@ def get_data(sid, did, template, check_long_running_query=False):
     if check_long_running_query:
         get_long_running_query_status(res['rows'])
 
+    if only_data:
+        return res['rows']
+
     return ajax_response(
         response=res['rows'],
         status=200
@@ -431,7 +437,15 @@ def activity(sid=None, did=None):
     :param sid: server id
     :return:
     """
-    return get_data(sid, did, 'activity.sql', True)
+    data = [{
+        'activity': get_data(sid, did, 'activity.sql', True, True),
+        'locks': get_data(sid, did, 'locks.sql', only_data=True),
+        'prepared': get_data(sid, did, 'prepared.sql', only_data=True)
+    }]
+    return ajax_response(
+        response=data,
+        status=200
+    )
 
 
 @blueprint.route('/locks/', endpoint='locks')
@@ -466,8 +480,7 @@ def prepared(sid=None, did=None):
     return get_data(sid, did, 'prepared.sql')
 
 
-@blueprint.route('/config/', endpoint='config')
-@blueprint.route('/config/<int:sid>', endpoint='get_config_by_server_id')
+@blueprint.route('/config/<int:sid>', endpoint='config')
 @pga_login_required
 @check_precondition
 def config(sid=None):
@@ -479,6 +492,145 @@ def config(sid=None):
     return get_data(sid, None, 'config.sql')
 
 
+@blueprint.route('/log_formats', endpoint='log_formats')
+@blueprint.route('/log_formats/<int:sid>', endpoint='log_formats')
+@pga_login_required
+@check_precondition
+def log_formats(sid=None):
+    if not sid:
+        return internal_server_error(errormsg='Server ID not specified.')
+
+    sql = render_template(
+        "/".join([g.template_path, 'log_format.sql'])
+    )
+    status, _format = g.conn.execute_scalar(sql)
+
+    if not status:
+        return internal_server_error(errormsg=_format)
+
+    return ajax_response(
+        response=_format,
+        status=200
+    )
+
+
+@blueprint.route('/logs/<log_format>/<disp_format>/<int:sid>', endpoint='logs')
+@blueprint.route('/logs/<log_format>/<disp_format>/<int:sid>/<int:page>',
+                 endpoint='get_logs_by_server_id')
+@pga_login_required
+@check_precondition
+def logs(log_format=None, disp_format=None, sid=None, page=0):
+    """
+    This function returns server logs details
+    """
+
+    LOG_STATEMENTS = 'DEBUG:|STATEMENT:|LOG:|WARNING:|NOTICE:|INFO:' \
+                     '|ERROR:|FATAL:|PANIC:'
+    if not sid:
+        return internal_server_error(
+            errormsg=gettext('Server ID not specified.'))
+
+    sql = render_template(
+        "/".join([g.template_path, 'log_format.sql'])
+    )
+    status, _format = g.conn.execute_scalar(sql)
+
+    # Check the requested format is available or not
+    log_format = ''
+    if log_format == 'C' and 'csvlog' in _format:
+        log_format = 'csvlog'
+    elif log_format == 'J' and 'jsonlog' in _format:
+        log_format = 'jsonlog'
+
+    sql = render_template(
+        "/".join([g.template_path, 'log_stat.sql']),
+        log_format=log_format, conn=g.conn
+    )
+    status, res = g.conn.execute_scalar(sql)
+    if not status:
+        return internal_server_error(errormsg=res)
+    if not res or len(res) < 0:
+        return ajax_response(
+            response={'logs_disabled': True},
+            status=200
+        )
+
+    file_stat = json.loads(res[0])
+
+    _start = 0
+    _end = ON_DEMAND_LOG_COUNT
+    page = int(page)
+    final_cols = []
+    if page > 0:
+        _start = page * int(ON_DEMAND_LOG_COUNT)
+        _end = _start + int(ON_DEMAND_LOG_COUNT)
+
+    if _start < file_stat:
+        if disp_format == 'plain':
+            _end = file_stat
+        sql = render_template(
+            "/".join([g.template_path, 'logs.sql']), st=_start, ed=_end,
+            log_format=log_format, conn=g.conn
+        )
+        status, res = g.conn.execute_dict(sql)
+
+        if not status:
+            return internal_server_error(errormsg=res)
+
+        final_res = res['rows'][0]['pg_read_file'].split('\n')
+        # Json format
+        if log_format == 'J':
+            for f in final_res:
+                try:
+                    _tmp_log = json.loads(f)
+                    final_cols.append(
+                        {"error_severity": _tmp_log['error_severity'],
+                         "timestamp": _tmp_log['timestamp'],
+                         "message": _tmp_log['message']})
+                except Exception as e:
+                    pass
+
+        # CSV format
+        elif log_format == 'C':
+            for f in final_res:
+                try:
+                    _tmp_log = f.split(',')
+                    final_cols.append({"error_severity": _tmp_log[11],
+                                       "timestamp": _tmp_log[0],
+                                       "message": _tmp_log[13]})
+                except Exception as e:
+                    pass
+
+        else:
+            col1 = []
+            col2 = []
+            _pattern = re.compile(LOG_STATEMENTS)
+            for f in final_res:
+                tmp = re.search(LOG_STATEMENTS, f)
+                if not tmp or tmp.group((0)) == 'STATEMENT:':
+                    last_val = final_cols.pop() if len(final_cols) > 0\
+                        else {'message': ''}
+                    last_val['message'] += f
+                    final_cols.append(last_val)
+                else:
+                    _tmp = re.split(LOG_STATEMENTS, f)
+
+                    final_cols.append({
+                        "error_severity": tmp.group(0)[:len(tmp.group(0)) - 1],
+                        "timestamp": _tmp[0],
+                        "message": _tmp[1] if len(_tmp) > 1 else ''})
+
+    if disp_format == 'plain':
+        final_response = res['rows']
+    else:
+        final_response = final_cols
+
+    return ajax_response(
+        response=final_response,
+        status=200
+    )
+
+
 @blueprint.route(
     '/cancel_query/<int:sid>/<int:pid>', methods=['DELETE']
 )
diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx
index 696029ab3..853fb2d6c 100644
--- a/web/pgadmin/dashboard/static/js/Dashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx
@@ -6,13 +6,13 @@
 // This software is released under the PostgreSQL Licence
 //
 //////////////////////////////////////////////////////////////
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, Fragment } 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 { InputCheckbox, FormInputSwitch, FormInputToggle } from '../../../static/js/components/FormComponents';
 import url_for from 'sources/url_for';
 import Graphs from './Graphs';
 import { Box, Tab, Tabs } from '@mui/material';
@@ -21,6 +21,7 @@ import CancelIcon from '@mui/icons-material/Cancel';
 import StopSharpIcon from '@mui/icons-material/StopSharp';
 import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
+import ServerLog from './ServerLog.ui';
 import _ from 'lodash';
 import EmptyPanelMessage from '../../../static/js/components/EmptyPanelMessage';
 import TabPanel from '../../../static/js/components/TabPanel';
@@ -36,8 +37,11 @@ import ErrorBoundary from '../../../static/js/helpers/ErrorBoundary';
 import { parseApiError } from '../../../static/js/api_instance';
 import SectionContainer from './components/SectionContainer';
 import Replication from './Replication';
-import RefreshButton from './components/RefreshButtons';
 import { getExpandCell } from '../../../static/js/components/PgReactTableStyled';
+import CodeMirror from '../../../static/js/components/ReactCodeMirror';
+import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
+import { getBrowser } from '../../../static/js/utils';
+import RefreshButton from './components/RefreshButtons';
 
 function parseData(data) {
   let res = [];
@@ -47,7 +51,6 @@ function parseData(data) {
   });
   return res;
 }
-
 const Root = styled('div')(({theme}) => ({
   height: '100%',
   width: '100%',
@@ -71,6 +74,16 @@ const Root = styled('div')(({theme}) => ({
         '& .Dashboard-terminateButton': {
           color: theme.palette.error.main
         },
+        '& .Dashboard-download': {
+          alignSelf: 'end',
+          '& .Dashboard-downloadButton': {
+            width: '35px',
+            height:'30px'
+          },
+        },
+        '& .Dashboard-textArea': {
+          height: '88%',
+        }
       },
     },
   },
@@ -85,6 +98,7 @@ const Root = styled('div')(({theme}) => ({
 }));
 
 let activeQSchemaObj = new ActiveQuery();
+let serverLogSchemaObj = new ServerLog();
 
 const cellPropTypes = {
   row: PropTypes.any,
@@ -218,8 +232,25 @@ function getCancelCell(pgAdmin, sid, did, canTakeAction, onSuccess) {
   return CancelCell;
 }
 
-function ActiveOnlyHeader({activeOnly, setActiveOnly}) {
+function CustomRefresh({refresh, setRefresh}) {
   return (
+    <RefreshButton onClick={(e) => {
+      e.preventDefault();
+      setRefresh(!refresh);
+    }}/>
+  );
+}
+CustomRefresh.propTypes = {
+  refresh: PropTypes.bool,
+  setRefresh: PropTypes.func,
+};
+
+function ActiveOnlyHeader({activeOnly, setActiveOnly, refresh, setRefresh}) {
+  return (<Fragment>
+    <RefreshButton onClick={(e) => {
+      e.preventDefault();
+      setRefresh(!refresh);
+    }}/>
     <InputCheckbox
       label={gettext('Active sessions only')}
       labelPlacement="end"
@@ -232,35 +263,49 @@ function ActiveOnlyHeader({activeOnly, setActiveOnly}) {
       controlProps={{
         label: gettext('Active sessions only'),
       }}
-    />
+    /></Fragment>
   );
 }
 ActiveOnlyHeader.propTypes = {
   activeOnly: PropTypes.bool,
   setActiveOnly: PropTypes.func,
+  refresh: PropTypes.bool,
+  setRefresh: PropTypes.func,
 };
 
 function Dashboard({
   nodeItem, nodeData, node, treeNodeInfo,
   ...props
 }) {
+  const preferences = _.merge(
+    usePreferences().getPreferencesForModule('dashboards'),
+    usePreferences().getPreferencesForModule('graphs'),
+    usePreferences().getPreferencesForModule('misc')
+  );
 
-  let tabs = [gettext('Sessions'), gettext('Locks'), gettext('Prepared Transactions')];
-  let mainTabs = [gettext('General'), gettext('System Statistics')];
-  if(treeNodeInfo?.server?.replication_type) {
-    mainTabs.push(gettext('Replication'));
-  }
-  let systemStatsTabs = [gettext('Summary'), gettext('CPU'), gettext('Memory'), gettext('Storage')];
+  // Set Active tab depending on preferences setting
+  let activeTab = 0;
+  if (!_.isUndefined(preferences) && !preferences.show_graphs && preferences.show_activity) activeTab = 1;
+  else if (!_.isUndefined(preferences) && !preferences.show_graphs && !preferences.show_activity) activeTab = 2;
+
+  const api = getApiInstance();
   const [dashData, setDashData] = useState([]);
   const [msg, setMsg] = useState('');
   const [ssMsg, setSsMsg] = useState('');
-  const [tabVal, setTabVal] = useState(0);
-  const [mainTabVal, setMainTabVal] = useState(0);
+  const [mainTabVal, setMainTabVal] = useState(activeTab);
   const [refresh, setRefresh] = useState(false);
   const [activeOnly, setActiveOnly] = useState(false);
   const [systemStatsTabVal, setSystemStatsTabVal] = useState(0);
   const [ldid, setLdid] = useState(0);
 
+  const [logCol, setLogCol] = useState(false);
+  const [logFormat, setLogFormat] = useState('T');
+  const [logConfigFormat, setLogConfigFormat] = useState([]);
+  const [nextPage, setNextPage] = useState(0);
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
+
+
   const systemStatsTabChanged = (e, tabVal) => {
     setSystemStatsTabVal(tabVal);
   };
@@ -270,19 +315,13 @@ function Dashboard({
   const dbConnected = treeNodeInfo?.database?.connected ?? false;
   const serverConnected = treeNodeInfo?.server?.connected ?? false;
   const prefStore = usePreferences();
-  const preferences = _.merge(
-    usePreferences().getPreferencesForModule('dashboards'),
-    usePreferences().getPreferencesForModule('graphs'),
-    usePreferences().getPreferencesForModule('misc')
-  );
+  let mainTabs = [gettext('Activity'), gettext('State')];
 
-  if (!did) {
-    tabs.push(gettext('Configuration'));
+  mainTabs.push(gettext('Configuration'), gettext('Logs'), gettext('System'));
+  if(treeNodeInfo?.server?.replication_type) {
+    mainTabs.push(gettext('Replication'));
   }
-
-  const tabChanged = (e, tabVal) => {
-    setTabVal(tabVal);
-  };
+  let systemStatsTabs = [gettext('Summary'), gettext('CPU'), gettext('Memory'), gettext('Storage')];
 
   const mainTabChanged = (e, tabVal) => {
     setMainTabVal(tabVal);
@@ -390,6 +429,97 @@ function Dashboard({
     },
   ];
 
+  const downloadServerLogs = async () => {
+    let extension = '.txt',
+      type = 'plain',
+      respData = '';
+
+    if(logCol === false) {
+      if (logFormat == 'C') {
+        extension = '.csv';
+        type = 'csv';
+      } else if (logFormat == 'J') {
+        extension = '.json';
+        type = 'json';
+      }
+      respData = dashData[0]['pg_read_file'];
+    } else if (logCol === true) {
+      extension = '.csv';
+      type = 'csv';
+      respData = dashData.map((d)=> {return Object.values(d).join(','); }).join('\n');
+    }
+
+    let fileName = 'data-' + new Date().getTime() + extension;
+
+    try {
+      let respBlob = new Blob([respData], {type : 'text/'+type}),
+        urlCreator = window.URL || window.webkitURL,
+        download_url = urlCreator.createObjectURL(respBlob),
+        link = document.createElement('a');
+
+      document.body.appendChild(link);
+
+      if (getBrowser() == 'IE' && window.navigator.msSaveBlob) {
+        // IE10: (has Blob, but not a[download] or URL)
+        window.navigator.msSaveBlob(respBlob, fileName);
+      } else {
+        link.setAttribute('href', download_url);
+        link.setAttribute('download', fileName);
+        link.click();
+      }
+      document.body.removeChild(link);
+    } catch (error) {
+      setSsMsg(gettext('Failed to download the logs.'));
+    }
+  };
+
+  const serverLogColumns = [
+    {
+      header: () => null,
+      enableSorting: false,
+      enableResizing: false,
+      enableFilters: false,
+      size: 35,
+      maxSize: 35,
+      minSize: 35,
+      id: 'btn-edit',
+      cell: getExpandCell({
+        title: gettext('View the log details')
+      }),
+    },
+    {
+      accessorKey: 'error_severity',
+      header: gettext('Error Severity'),
+      enableSorting: true,
+      enableResizing: true,
+      enableFilters: true,
+      size: 100,
+      minSize: 35,
+      filterFn: 'equalsString'
+    },
+    {
+      accessorKey: 'timestamp',
+      header: gettext('Log Prefix/Timestamp'),
+      sortable: true,
+      enableResizing: true,
+      enableSorting: false,
+      enableFilters: true,
+      size: 150,
+      minSize: 35,
+      filterFn: 'equalsString'
+    },
+    {
+      accessorKey: 'message',
+      header: gettext('Logs'),
+      enableResizing: true,
+      enableSorting: false,
+      enableFilters: false,
+      size: 35,
+      minSize: 200,
+      filterFn: 'equalsString'
+    },
+  ];
+
   const activityColumns = [
     {
       header: () => null,
@@ -682,15 +812,37 @@ function Dashboard({
       enableFilters: true,
     },
   ];
+  useEffect(() => {
+    if (mainTabVal == 3) {
+      setLogFormat('T');
+      let url = url_for('dashboard.log_formats') +  '/' + sid;
+      api({
+        url: url,
+        type: 'GET',
+      })
+        .then((res) => {
+          let _format = res.data;
+          let _frm = [
+            {'label': gettext('Text'), 'value': 'T', 'disabled': !_format.includes('stderr')},
+            {'label': gettext('JSON'), 'value': 'J', 'disabled': !_format.includes('jsonlog')},
+            {'label': gettext('CSV'), 'value': 'C', 'disabled': !_format.includes('csvlog')}
+          ];
+          setLogConfigFormat(_frm);
+        })
+        .catch((error) => {
+          pgAdmin.Browser.notifier.alert(
+            gettext('Failed to retrieve data from the server.'),
+            _.isUndefined(error.response) ? error.message : error.response.data.errormsg
+          );
+        });
+    }
+  },[nodeData, mainTabVal]);
 
   useEffect(() => {
-    // Reset Tab values to 0, so that it will select "Sessions" on node changed.
-    nodeData?._type === 'database' && setTabVal(0);
-  },[nodeData]);
 
-  useEffect(() => {
+    if (mainTabVal == 0) return;
     // disable replication tab
-    if(!treeNodeInfo?.server?.replication_type && mainTabVal == 2) {
+    if(!treeNodeInfo?.server?.replication_type && mainTabVal == 5) {
       setMainTabVal(0);
     }
 
@@ -700,39 +852,44 @@ function Dashboard({
         'Please connect to the selected server to view the dashboard.'
       );
 
-    if(tabVal == 3 && did) {
-      setTabVal(0);
-    }
-
     if (sid && serverConnected) {
-      if (tabVal === 0) {
-        url = url_for('dashboard.activity');
-      } else if (tabVal === 1) {
-        url = url_for('dashboard.locks');
-      } else if (tabVal === 2) {
-        url = url_for('dashboard.prepared');
-      } else {
-        url = url_for('dashboard.config');
-      }
 
       message = gettext('Loading dashboard...');
       if (did && !dbConnected) return;
-      if (did) url += sid + '/' + did;
-      else url += sid;
 
-      if (did && !dbConnected) return;
+      if (mainTabVal === 1) {
+        url = url_for('dashboard.activity');
+        if (did) url += sid + '/' + did;
+        else url += '/' + sid;
+
+      } else if (mainTabVal === 2) {
+        url = url_for('dashboard.config', {'sid': sid});
+      } else if (mainTabVal === 3) {
+        if(logCol === false) {
+          url = url_for('dashboard.logs', {'log_format': logFormat, 'disp_format': 'plain', 'sid': sid});
+        } else if (logCol === true) {
+          url = url_for('dashboard.logs', {'log_format': logFormat, 'disp_format': 'table', 'sid': sid});
+          setNextPage(0);
+        }
+      }
+
       if (did && did > 0) ssExtensionCheckUrl += '/' + sid + '/' + did;
       else ssExtensionCheckUrl += '/' + sid;
 
-      const api = getApiInstance();
       if (node) {
-        if (mainTabVal == 0) {
+        setSsMsg(gettext('Loading logs...'));
+        setDashData([]);
+        if (mainTabVal != 4 && mainTabVal != 5) {
           api({
             url: url,
             type: 'GET',
           })
             .then((res) => {
-              setDashData(parseData(res.data));
+              if (res.data && res.data['logs_disabled']) {
+                setSsMsg(gettext('Please enable the logging to view the server logs.'));
+              } else {
+                setDashData(parseData(res.data));
+              }
             })
             .catch((error) => {
               pgAdmin.Browser.notifier.alert(
@@ -743,7 +900,7 @@ function Dashboard({
               setMsg(gettext('Failed to retrieve data from the server.'));
             });
         }
-        else if (mainTabVal == 1) {
+        else if (mainTabVal == 4) {
           api({
             url: ssExtensionCheckUrl,
             type: 'GET',
@@ -773,15 +930,15 @@ function Dashboard({
     if (message != '') {
       setMsg(message);
     }
-  }, [nodeData, tabVal, treeNodeInfo, prefStore, refresh, mainTabVal]);
+  }, [nodeData, treeNodeInfo, prefStore, refresh, mainTabVal, logCol, logFormat]);
 
   const filteredDashData = useMemo(()=>{
-    if (tabVal == 0 && activeOnly) {
+    if (mainTabVal == 1 && activeOnly) {
       // we want to show 'idle in transaction', 'active', 'active in transaction', and future non-blank, non-"idle" status values
-      return dashData.filter((r)=>(r.state && r.state != '' && r.state != 'idle'));
+      return dashData[0]['activity'].filter((r)=>(r.state && r.state != '' && r.state != 'idle'));
     }
-    return dashData;
-  }, [dashData, activeOnly, tabVal]);
+    return dashData && dashData[0] && dashData[0]['activity'] || [];
+  }, [dashData, activeOnly, mainTabVal]);
 
   const showDefaultContents = () => {
     return (
@@ -804,6 +961,83 @@ function Dashboard({
     );
   };
 
+  const CustomLogHeaderLabel =
+    {
+      label: gettext('Table based logs'),
+    };
+  const CustomLogHeader = () => {
+    return ( <Box className='Dashboard-cardHeader' display="flex" flexDirection="column">
+      <FormInputToggle
+        label={gettext('Log Format')}
+        className='Dashboard-searchInput'
+        value={logFormat}
+        onChange={(val) => {
+          setLogFormat(val);
+        }}
+        options={logConfigFormat}
+        controlProps={CustomLogHeaderLabel}
+        labelGridBasis={3}
+        controlGridBasis={6}
+      ></FormInputToggle>
+      <FormInputSwitch
+        label={gettext('Logs in tabular format ?')}
+        labelPlacement="end"
+        className='Dashboard-searchInput'
+        value={logCol}
+        onChange={(e) => {
+          setDashData([]);
+          setLogCol(e.target.checked);
+        }}
+        controlProps={CustomLogHeaderLabel}
+        labelGridBasis={3}
+        controlGridBasis={6}
+      ></FormInputSwitch>
+      <div className='Dashboard-download'><PgIconButton
+        size="xs"
+        className='Dashboard-downloadButton'
+        icon={<GetAppRoundedIcon />}
+        onClick={downloadServerLogs}
+        aria-label="Download"
+        title={gettext('Download logs ')}
+      ></PgIconButton></div>
+    </Box>);
+  };
+
+
+  const loadNextPage = () => {
+    setIsNextPageLoading(true);
+    setTimeout(() => {
+      setHasNextPage(true);
+      setIsNextPageLoading(false);
+
+      let _url = url_for('dashboard.logs', {'log_format': logFormat, 'disp_format': 'table', 'sid': sid});
+      _url += '/' + (nextPage +1);
+
+      const api = getApiInstance();
+      api({
+        url: _url,
+        type: 'GET',
+      })
+        .then((res) => {
+          console.warn(res.data.length);
+          if (res.data && res.data.length > 0) {
+            let _d = dashData.concat(parseData(res.data));
+            setDashData(_d);
+            setNextPage(nextPage + 1);
+          }
+        })
+        .catch((error) => {
+          pgAdmin.Browser.notifier.alert(
+            gettext('Failed to retrieve data from the server.'),
+            _.isUndefined(error.response) ? error.message : error.response.data.errormsg
+          );
+          // show failed message.
+          setMsg(gettext('Failed to retrieve data from the server.'));
+        });
+
+    }, 500);
+  };
+
   return (
     (<Root>
       {sid && serverConnected ? (
@@ -815,14 +1049,25 @@ function Dashboard({
                   value={mainTabVal}
                   onChange={mainTabChanged}
                 >
-                  {mainTabs.map((tabValue) => {
-                    return <Tab key={tabValue} label={tabValue} />;
+                  {mainTabs.map((tabValue, i) => {
+                    if (tabValue == 'Activity') {
+                      if (!_.isUndefined(preferences) && preferences.show_graphs) {
+                        return <Tab key={tabValue} label={tabValue} value={i}/>;
+                      }
+                    } else if (tabValue == 'State') {
+                      if (!_.isUndefined(preferences) && preferences.show_activity) {
+                        return <Tab key={tabValue} label={tabValue} value={i}/>;
+                      }
+                    }
+                    else {
+                      return <Tab key={tabValue} label={tabValue} value={i}/>;
+                    }
                   })}
                 </Tabs>
               </Box>
-              {/* General Statistics */}
-              <TabPanel value={mainTabVal} index={0}>
-                {!_.isUndefined(preferences) && preferences.show_graphs && (
+              {/* Server Activity */}
+              {!_.isUndefined(preferences) && preferences.show_graphs && (
+                <TabPanel value={mainTabVal} index={0}>
                   <Graphs
                     key={sid + did}
                     preferences={preferences}
@@ -830,62 +1075,84 @@ function Dashboard({
                     did={did}
                     pageVisible={props.isActive}
                   ></Graphs>
-                )}
+                </TabPanel>
+              )}
+              {/* Server Activity */}
+              <TabPanel value={mainTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
                 {!_.isUndefined(preferences) && preferences.show_activity && (
-                  <SectionContainer title={dbConnected ?  gettext('Database activity') : gettext('Server activity')}>
-                    <Box>
-                      <Tabs
-                        value={tabVal}
-                        onChange={tabChanged}
-                      >
-                        {tabs.map((tabValue) => {
-                          return <Tab key={tabValue} label={tabValue} />;
-                        })}
-                        <RefreshButton onClick={(e) => {
-                          e.preventDefault();
-                          setRefresh(!refresh);
-                        }}/>
-                      </Tabs>
-                    </Box>
-                    <TabPanel value={tabVal} index={0}>
+                  <Fragment>
+                    <SectionContainer title={gettext('Sessions')} style={{height: 'auto', minHeight: '200px', paddingBottom: '20px'}}
+                    >
                       <PgTable
                         caveTable={false}
                         tableNoBorder={false}
-                        customHeader={<ActiveOnlyHeader activeOnly={activeOnly} setActiveOnly={setActiveOnly} />}
+                        customHeader={<ActiveOnlyHeader activeOnly={activeOnly} setActiveOnly={setActiveOnly} refresh={refresh} setRefresh={setRefresh}/>}
                         columns={activityColumns}
-                        data={filteredDashData}
+                        data={(dashData !== undefined && dashData[0] && filteredDashData) || []}
                         schema={activeQSchemaObj}
                       ></PgTable>
-                    </TabPanel>
-                    <TabPanel value={tabVal} index={1}>
+                    </SectionContainer>
+                    <SectionContainer title={gettext('Locks')} style={{height: 'auto', minHeight: '200px', paddingBottom: '20px'}}>
                       <PgTable
+                        customHeader={<CustomRefresh refresh={refresh} setRefresh={setRefresh}/>}
                         caveTable={false}
                         tableNoBorder={false}
                         columns={databaseLocksColumns}
-                        data={dashData}
+                        data={(dashData !== undefined && dashData[0] && dashData[0]['locks']) || []}
                       ></PgTable>
-                    </TabPanel>
-                    <TabPanel value={tabVal} index={2}>
+                    </SectionContainer>
+                    <SectionContainer title={gettext('Prepared Transactions')} style={{height: 'auto', minHeight: '200px', paddingBottom: '20px'}}>
                       <PgTable
+                        customHeader={<CustomRefresh refresh={refresh} setRefresh={setRefresh}/>}
                         caveTable={false}
                         tableNoBorder={false}
                         columns={databasePreparedColumns}
-                        data={dashData}
+                        data={(dashData !== undefined &&  dashData[0] && dashData[0]['prepared']) || []}
                       ></PgTable>
-                    </TabPanel>
-                    <TabPanel value={tabVal} index={3}>
-                      <PgTable
-                        caveTable={false}
-                        tableNoBorder={false}
-                        columns={serverConfigColumns}
-                        data={dashData}
-                      ></PgTable>
-                    </TabPanel>
-                  </SectionContainer>
+                    </SectionContainer>
+                  </Fragment>
                 )}
               </TabPanel>
+              {/* Server Configuration */}
+              <TabPanel value={mainTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
+                <PgTable
+                  caveTable={false}
+                  tableNoBorder={false}
+                  columns={serverConfigColumns}
+                  data={dashData}
+                ></PgTable>
+              </TabPanel>
+              {/* Server Logs */}
+              <TabPanel value={mainTabVal} index={3} classNameRoot='Dashboard-tabPanel'>
+                {dashData &&  dashData.length != 0 &&
+                  <CustomLogHeader/>}
+                {dashData.length == 0 && <div className='Dashboard-emptyPanel'>
+                  <EmptyPanelMessage text={ssMsg}/>
+                </div>}
+                {dashData && logCol === false && dashData.length == 1 && <CodeMirror
+                  id='tests'
+                  language={logFormat== 'J' ? 'json':'pgsql'}
+                  className='Dashboard-textArea'
+                  value={dashData[0]['pg_read_file']}
+                  readonly={true}
+                  options={{
+                    lineNumbers: true,
+                    mode: 'text/plain',
+                  }}
+                />}
+                {dashData && logCol === true && <PgTable
+                  caveTable={false}
+                  tableNoBorder={false}
+                  columns={serverLogColumns}
+                  data={dashData}
+                  hasNextPage={hasNextPage}
+                  isNextPageLoading={isNextPageLoading}
+                  loadNextPage={loadNextPage}
+                  schema={serverLogSchemaObj}
+                ></PgTable>}
+              </TabPanel>
               {/* System Statistics */}
-              <TabPanel value={mainTabVal} index={1} classNameRoot='Dashboard-tabPanel'>
+              <TabPanel value={mainTabVal} index={4} classNameRoot='Dashboard-tabPanel'>
                 <Box height="100%" display="flex" flexDirection="column">
                   {ssMsg === 'installed' && did === ldid ?
                     <ErrorBoundary>
@@ -948,7 +1215,7 @@ function Dashboard({
                 </Box>
               </TabPanel>
               {/* Replication */}
-              <TabPanel value={mainTabVal} index={2} classNameRoot='Dashboard-tabPanel'>
+              <TabPanel value={mainTabVal} index={5} classNameRoot='Dashboard-tabPanel'>
                 <Replication key={sid} sid={sid} node={node}
                   preferences={preferences} treeNodeInfo={treeNodeInfo} nodeData={nodeData} pageVisible={props.isActive} />
               </TabPanel>
@@ -973,6 +1240,7 @@ Dashboard.propTypes = {
   serverConnected: PropTypes.bool,
   dbConnected: PropTypes.bool,
   isActive: PropTypes.bool,
+  column: PropTypes.object,
 };
 
 export default withStandardTabInfo(Dashboard, BROWSER_PANELS.DASHBOARD);
diff --git a/web/pgadmin/dashboard/static/js/ServerLog.ui.js b/web/pgadmin/dashboard/static/js/ServerLog.ui.js
new file mode 100644
index 000000000..27d8f5508
--- /dev/null
+++ b/web/pgadmin/dashboard/static/js/ServerLog.ui.js
@@ -0,0 +1,51 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import gettext from 'sources/gettext';
+import BaseUISchema from 'sources/SchemaView/base_schema.ui';
+
+export default class ServerLog extends BaseUISchema {
+  constructor(initValues) {
+    super({
+      ...initValues,
+    });
+
+  }
+
+  get baseFields() {
+    return [
+      {
+        id: 'error_severity',
+        label: gettext('Error severity'),
+        type: 'text',
+        editable: false,
+        noEmpty: false,
+        readonly: true,
+        group: gettext('Details'),
+      },{
+        id: 'timestamp',
+        label: gettext('Log line prefix/timestamp'),
+        type: 'text',
+        editable: false,
+        noEmpty: false,
+        readonly: true,
+        group: gettext('Details'),
+      },{
+        id: 'message',
+        label: gettext('Log'),
+        type: 'text',
+        editable: false,
+        readonly: true,
+        group: gettext('Details'),
+      }
+    ];
+
+  }
+
+}
diff --git a/web/pgadmin/dashboard/templates/dashboard/sql/default/log_format.sql b/web/pgadmin/dashboard/templates/dashboard/sql/default/log_format.sql
new file mode 100644
index 000000000..67f078230
--- /dev/null
+++ b/web/pgadmin/dashboard/templates/dashboard/sql/default/log_format.sql
@@ -0,0 +1,6 @@
+SELECT
+  setting
+FROM
+  pg_show_all_settings()
+WHERE
+  name='log_destination'
diff --git a/web/pgadmin/dashboard/templates/dashboard/sql/default/log_stat.sql b/web/pgadmin/dashboard/templates/dashboard/sql/default/log_stat.sql
new file mode 100644
index 000000000..60a1be866
--- /dev/null
+++ b/web/pgadmin/dashboard/templates/dashboard/sql/default/log_stat.sql
@@ -0,0 +1,6 @@
+/*pga4dash*/
+{% if log_format != '' %}
+SELECT pg_stat_file(pg_current_logfile('{{log_format}}'));
+{% else %}
+SELECT pg_stat_file(pg_current_logfile());
+{% endif %}
diff --git a/web/pgadmin/dashboard/templates/dashboard/sql/default/logs.sql b/web/pgadmin/dashboard/templates/dashboard/sql/default/logs.sql
new file mode 100644
index 000000000..3502491a7
--- /dev/null
+++ b/web/pgadmin/dashboard/templates/dashboard/sql/default/logs.sql
@@ -0,0 +1,8 @@
+/*pga4dash*/
+{% if log_format != '' %}
+SELECT pg_read_file(pg_current_logfile('{{log_format}}'), {{ st }}, {{ ed }});
+{% elif st !='' and ed != '' %}
+SELECT pg_read_file(pg_current_logfile(), {{ st }}, {{ ed }});
+{% else %}
+SELECT pg_read_file(pg_current_logfile());
+{% endif %}
diff --git a/web/pgadmin/misc/__init__.py b/web/pgadmin/misc/__init__.py
index a9466bafa..7c194ad9e 100644
--- a/web/pgadmin/misc/__init__.py
+++ b/web/pgadmin/misc/__init__.py
@@ -228,6 +228,7 @@ def validate_binary_path():
     running the utilities with their versions.
     """
     data = None
+    return precondition_required(gettext('Invalid binary path.'))
     if hasattr(request.data, 'decode'):
         data = request.data.decode('utf-8')
 
diff --git a/web/pgadmin/static/bundle/app.js b/web/pgadmin/static/bundle/app.js
index af67f2e92..f9b91c371 100644
--- a/web/pgadmin/static/bundle/app.js
+++ b/web/pgadmin/static/bundle/app.js
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import BrowserComponent from '../js/BrowserComponent';
 import MainMenuFactory from '../../browser/static/js/MainMenuFactory';
 import Theme from '../js/Theme';
@@ -50,10 +50,10 @@ define('app', [
   // Create menus after all modules are initialized.
   MainMenuFactory.createMainMenus();
 
-  ReactDOM.render(
+  const root = ReactDOM.createRoot(document.querySelector('#root'));
+  root.render(
     <Theme>
       <BrowserComponent pgAdmin={pgAdmin} />
-    </Theme>,
-    document.querySelector('#root')
+    </Theme>
   );
 });
diff --git a/web/pgadmin/static/js/QuickSearch/online_help.js b/web/pgadmin/static/js/QuickSearch/online_help.js
index 62b767730..a4dd03924 100644
--- a/web/pgadmin/static/js/QuickSearch/online_help.js
+++ b/web/pgadmin/static/js/QuickSearch/online_help.js
@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import HiddenIframe from './HiddenIframe';
 import url_for from 'sources/url_for';
 
@@ -39,6 +39,8 @@ export function onlineHelpSearch(param, props) {
   if(document.getElementById('hidden-quick-search-iframe')){
     document.getElementById('hidden-quick-search-iframe').contentDocument.location.reload(true);
   }
+  const root = ReactDOM.createRoot(document.getElementById('quick-search-iframe-container'));
+
 
   // Below function will be called when the page will be loaded in Iframe
   const _iframeLoaded = () => {
@@ -69,7 +71,7 @@ export function onlineHelpSearch(param, props) {
               data: res,
             }));
             isIFrameLoaded = false;
-            ReactDOM.unmountComponentAtNode(document.getElementById('quick-search-iframe-container'));
+            root.unmount();
           } else {
             setState(state => ({
               ...state,
@@ -87,7 +89,7 @@ export function onlineHelpSearch(param, props) {
             url: srcURL,
             data: {},
           }));
-          ReactDOM.unmountComponentAtNode(document.getElementById('quick-search-iframe-container'));
+          root.unmount();
           isIFrameLoaded = false;
           window.clearInterval(pooling);
         }
@@ -98,8 +100,7 @@ export function onlineHelpSearch(param, props) {
   };
 
   // Render IFrame
-  ReactDOM.render(
-    <HiddenIframe id='hidden-quick-search-iframe' srcURL={srcURL} onLoad={_iframeLoaded}/>,
-    document.getElementById('quick-search-iframe-container'),
+  root.render(
+    <HiddenIframe id='hidden-quick-search-iframe' srcURL={srcURL} onLoad={_iframeLoaded}/>
   );
 }
diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx
index 0428b820d..456aaef63 100644
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/web/pgadmin/static/js/SchemaView/index.jsx
@@ -627,7 +627,6 @@ function SchemaDialogView({
       type: SCHEMA_STATE_ACTIONS.INIT,
       payload: schema.origData,
     });
-    return true;
   }, [props.resetKey]);
 
   const onResetClick = ()=>{
diff --git a/web/pgadmin/static/js/SecurityPages/index.jsx b/web/pgadmin/static/js/SecurityPages/index.jsx
index 399a2da8a..591d24c62 100644
--- a/web/pgadmin/static/js/SecurityPages/index.jsx
+++ b/web/pgadmin/static/js/SecurityPages/index.jsx
@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import React from 'react';
 import { SnackbarProvider } from 'notistack';
 import Theme from '../Theme/index';
@@ -18,20 +18,18 @@ window.renderSecurityPage = function(pageName, pageProps, otherProps) {
   };
 
   const Page = ComponentPageMap[pageName];
+  const root = ReactDOM.createRoot(document.querySelector('#root'));
 
   if(Page) {
-    ReactDOM.render(
-      <Theme>
-        <SnackbarProvider
-          maxSnack={5}
-          anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
-          <Page {...pageProps} {...otherProps} />
-        </SnackbarProvider>
-      </Theme>
-      , document.querySelector('#root'));
+    root.render(<Theme>
+      <SnackbarProvider
+        maxSnack={5}
+        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}>
+        <Page {...pageProps} {...otherProps} />
+      </SnackbarProvider>
+    </Theme>);
   } else {
-    ReactDOM.render(
-      <h1>Invalid Page</h1>
-      , document.querySelector('#root'));
+    root.render(
+      <h1>Invalid Page</h1>);
   }
 };
diff --git a/web/pgadmin/static/js/ToolView.jsx b/web/pgadmin/static/js/ToolView.jsx
index 070269b17..2d9ad4692 100644
--- a/web/pgadmin/static/js/ToolView.jsx
+++ b/web/pgadmin/static/js/ToolView.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useEffect, useLayoutEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { usePgAdmin } from './BrowserComponent';
 import { BROWSER_PANELS } from '../../browser/static/js/constants';
 import PropTypes from 'prop-types';
@@ -46,7 +46,8 @@ export default function ToolView() {
           const newWin = window.open('', '_blank');
           const div = newWin.document.createElement('div');
           newWin.document.body.appendChild(div);
-          ReactDOM.render(
+          const root = ReactDOM.createRoot(div);
+          root.render(
             <ToolForm actionUrl={window.location.origin+toolUrl} params={formParams}/>, div
           );
         } else {
diff --git a/web/pgadmin/static/js/components/PgReactTableStyled.jsx b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
index c9a4a24a0..b29c7ec39 100644
--- a/web/pgadmin/static/js/components/PgReactTableStyled.jsx
+++ b/web/pgadmin/static/js/components/PgReactTableStyled.jsx
@@ -306,7 +306,7 @@ PgReactTableBody.propTypes = {
   children: CustomPropTypes.children,
 };
 
-export const PgReactTable = forwardRef(({children, table, rootClassName, tableClassName, ...props}, ref)=>{
+export const PgReactTable = forwardRef(({children, table, rootClassName, tableClassName, onScrollFunc, ...props}, ref)=>{
   const columns = table.getAllColumns();
 
   useEffect(()=>{
@@ -333,7 +333,7 @@ export const PgReactTable = forwardRef(({children, table, rootClassName, tableCl
   }, [columns, table.getState().columnSizingInfo]);
 
   return (
-    <StyledDiv className={['pgrt', rootClassName].join(' ')} ref={ref} >
+    <StyledDiv className={['pgrt', rootClassName].join(' ')} ref={ref} onScroll={e => onScrollFunc?.(e.target)}>
       <div className={['pgrt-table', tableClassName].join(' ')} style={{ ...columnSizeVars }} {...props}>
         {children}
       </div>
@@ -346,6 +346,7 @@ PgReactTable.propTypes = {
   rootClassName: PropTypes.any,
   tableClassName: PropTypes.any,
   children: CustomPropTypes.children,
+  onScrollFunc: PropTypes.any,
 };
 
 export function getExpandCell({ onClick, title }) {
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 371cf1e34..b9f2e141f 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -8,6 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useMemo, useRef } from 'react';
+
 import {
   useReactTable,
   getCoreRowModel,
@@ -16,6 +17,12 @@ import {
   getExpandedRowModel,
   flexRender,
 } from '@tanstack/react-table';
+import {
+  QueryClient,
+  QueryClientProvider,
+  useInfiniteQuery,
+  keepPreviousData,
+} from '@tanstack/react-query';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -74,7 +81,7 @@ TableRow.propTypes = {
   measureElement: PropTypes.func,
 };
 
-export function Table({ columns, data, hasSelectRow, schema, sortOptions, tableProps, searchVal, ...props }) {
+export function Table({ columns, data, hasSelectRow, schema, sortOptions, tableProps, searchVal, loadNextPage, ...props }) {
   const defaultColumn = React.useMemo(
     () => ({
       size: 150,
@@ -106,10 +113,55 @@ export function Table({ columns, data, hasSelectRow, schema, sortOptions, tableP
 
   // Render the UI for your table
   const tableRef = useRef();
+  let flatData = [];
+  let fetchMoreOnBottomReached = undefined;
+  let totalFetched = 0;
+  let totalDBRowCount = 0;
+
+  if (loadNextPage) {
+    //Infinite scrolling
+    const { _data, fetchNextPage, isFetching } =
+      useInfiniteQuery({
+        queryKey: ['logs'],
+        queryFn: async () => {
+          const fetchedData = await loadNextPage();
+          return fetchedData;
+        },
+        initialPageParam: 0,
+        getNextPageParam: (_lastGroup, groups) => groups.length,
+        refetchOnWindowFocus: false,
+        placeholderData: keepPreviousData,
+      });
+
+    flatData = _data || [];
+    totalFetched = flatData.length;
+
+    //called on scroll and possibly on mount to fetch more data as the user scrolls and reaches bottom of table
+    fetchMoreOnBottomReached = React.useCallback(
+      (containerRefElement = HTMLDivElement | null) => {
+        if (containerRefElement) {
+          const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+          //once the user has scrolled within 500px of the bottom of the table, fetch more data if we can
+          if (
+            scrollHeight - scrollTop - clientHeight < 500 &&
+            !isFetching
+          ) {
+            fetchNextPage();
+          }
+        }
+      },
+      [fetchNextPage, isFetching, totalFetched, totalDBRowCount]
+    );
+
+    //a check on mount and after a fetch to see if the table is already scrolled to the bottom and immediately needs to fetch more data
+    React.useEffect(() => {
+      fetchMoreOnBottomReached(tableRef.current);
+    }, [fetchMoreOnBottomReached]);
+  }
 
   const table = useReactTable({
     columns: finalColumns,
-    data,
+    data: flatData.length >0 ? flatData : data,
     defaultColumn,
     autoResetAll: false,
     initialState: {
@@ -144,7 +196,7 @@ export function Table({ columns, data, hasSelectRow, schema, sortOptions, tableP
   });
 
   return (
-    <PgReactTable ref={tableRef} table={table}>
+    <PgReactTable ref={tableRef} table={table} onScrollFunc={loadNextPage?fetchMoreOnBottomReached: null }>
       <PgReactTableHeader table={table} />
       {rows.length == 0 ?
         <EmptyPanelMessage text={gettext('No rows found')} /> :
@@ -172,6 +224,7 @@ Table.propTypes = {
   selectedRows: PropTypes.object,
   setSelectedRows: PropTypes.func,
   searchVal: PropTypes.string,
+  loadNextPage: PropTypes.func,
 };
 
 const StyledPgTableRoot = styled('div')(({theme})=>({
@@ -214,29 +267,33 @@ const StyledPgTableRoot = styled('div')(({theme})=>({
   },
 }));
 
+const queryClient = new QueryClient();
+
 export default function PgTable({ caveTable = true, tableNoBorder = true, ...props }) {
   const [searchVal, setSearchVal] = React.useState('');
 
   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['className']].join(' ')}>{props.customHeader}</Box>)}
-        <Box marginLeft="auto">
-          <InputText
-            placeholder={gettext('Search')}
-            controlProps={{ title: gettext('Search') }}
-            className='pgtable-search-input'
-            value={searchVal}
-            onChange={(val) => {
-              setSearchVal(val);
-            }}
-          />
+    <QueryClientProvider client={queryClient}>
+      <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['className']].join(' ')}> {props.customHeader }</Box>)}
+          <Box marginLeft="auto">
+            <InputText
+              placeholder={gettext('Search')}
+              controlProps={{ title: gettext('Search') }}
+              className='pgtable-search-input'
+              value={searchVal}
+              onChange={(val) => {
+                setSearchVal(val);
+              }}
+            />
+          </Box>
         </Box>
-      </Box>
-      <div className={'pgtable-body'}>
-        <Table {...props} searchVal={searchVal} />
-      </div>
-    </StyledPgTableRoot>
+        <div className={'pgtable-body'} >
+          <Table {...props} searchVal={searchVal}/>
+        </div>
+      </StyledPgTableRoot>
+    </QueryClientProvider>
   );
 }
 
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
index 0308f98f5..1ac749ac4 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
@@ -42,6 +42,7 @@ import {
 import syntaxHighlighting from '../extensions/highlighting';
 import PgSQL from '../extensions/dialect';
 import { sql } from '@codemirror/lang-sql';
+import { json } from '@codemirror/lang-json';
 import errorMarkerExtn from '../extensions/errorMarker';
 import CustomEditorView from '../CustomEditorView';
 import breakpointGutter, { breakpointEffect } from '../extensions/breakpointGutter';
@@ -126,9 +127,6 @@ const defaultExtensions = [
     preventDefault: true,
     run: deleteCharBackwardStrict,
   }]),
-  sql({
-    dialect: PgSQL,
-  }),
   PgSQL.language.data.of({
     autocomplete: false,
   }),
@@ -151,7 +149,7 @@ const defaultExtensions = [
 export default function Editor({
   currEditor, name, value, options, onCursorActivity, onChange, readonly, disabled, autocomplete = false,
   breakpoint = false, onBreakPointChange, showActiveLine=false,
-  keepHistory = true, cid, helpid, labelledBy, customKeyMap}) {
+  keepHistory = true, cid, helpid, labelledBy, customKeyMap, language='pgsql'}) {
 
   const editorContainerRef = useRef();
   const editor = useRef();
@@ -170,6 +168,7 @@ export default function Editor({
   useEffect(() => {
     const finalOptions = { ...defaultOptions, ...options };
     const finalExtns = [
+      (language == 'json') ? json() : sql({dialect: PgSQL}),
       ...defaultExtensions,
     ];
     if (finalOptions.lineNumbers) {
@@ -399,4 +398,5 @@ Editor.propTypes = {
   helpid: PropTypes.string,
   labelledBy: PropTypes.string,
   customKeyMap: PropTypes.array,
+  language: PropTypes.string,
 };
diff --git a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
index bfcfb1f68..a769aa827 100644
--- a/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
+++ b/web/pgadmin/tools/debugger/static/js/DebuggerModule.js
@@ -9,7 +9,7 @@
 
 import _ from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import gettext from 'sources/gettext';
 import { sprintf } from 'sources/utils';
@@ -570,7 +570,8 @@ export default class DebuggerModule {
     );
     await listenPreferenceBroadcast();
 
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>
           <ModalProvider>
@@ -586,8 +587,7 @@ export default class DebuggerModule {
             />
           </ModalProvider>
         </PgAdminContext.Provider>
-      </Theme>,
-      container
+      </Theme>
     );
   }
 
diff --git a/web/pgadmin/tools/erd/static/js/ERDModule.js b/web/pgadmin/tools/erd/static/js/ERDModule.js
index 078359c40..7bc551d7e 100644
--- a/web/pgadmin/tools/erd/static/js/ERDModule.js
+++ b/web/pgadmin/tools/erd/static/js/ERDModule.js
@@ -12,7 +12,7 @@ import {getRandomInt} from 'sources/utils';
 import url_for from 'sources/url_for';
 import gettext from 'sources/gettext';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import ERDTool from './erd_tool/components/ERDTool';
 import ModalProvider from '../../../../static/js/helpers/ModalProvider';
 import Theme from '../../../../static/js/Theme';
@@ -144,7 +144,8 @@ export default class ERDModule {
   async loadComponent(container, params) {
     pgAdmin.Browser.keyboardNavigation.init();
     await listenPreferenceBroadcast();
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>
           <ModalProvider>
@@ -158,8 +159,7 @@ export default class ERDModule {
             />
           </ModalProvider>
         </PgAdminContext.Provider>
-      </Theme>,
-      container
+      </Theme>
     );
   }
 }
diff --git a/web/pgadmin/tools/psql/static/js/PsqlModule.js b/web/pgadmin/tools/psql/static/js/PsqlModule.js
index 845478d47..5cb65c599 100644
--- a/web/pgadmin/tools/psql/static/js/PsqlModule.js
+++ b/web/pgadmin/tools/psql/static/js/PsqlModule.js
@@ -27,7 +27,7 @@ import ModalProvider from '../../../../static/js/helpers/ModalProvider';
 import * as csrfToken from 'sources/csrf';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 
 export default class Psql {
@@ -184,7 +184,8 @@ export default class Psql {
   async loadComponent(container, params) {
     pgAdmin.Browser.keyboardNavigation.init();
     await listenPreferenceBroadcast();
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>
           <ModalProvider>
@@ -192,8 +193,7 @@ export default class Psql {
             <PsqlComponent params={params} pgAdmin={pgAdmin} />
           </ModalProvider>
         </PgAdminContext.Provider>
-      </Theme>,
-      container
+      </Theme>
     );
   }
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js b/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js
index 92568d040..fd7a3d888 100644
--- a/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js
+++ b/web/pgadmin/tools/schema_diff/static/js/SchemaDiffModule.js
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
@@ -102,8 +102,8 @@ export default class SchemaDiff {
   async load(container, trans_id) {
     pgAdmin.Browser.keyboardNavigation.init();
     await listenPreferenceBroadcast();
-
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>
           <ModalProvider>
@@ -111,8 +111,7 @@ export default class SchemaDiff {
             <SchemaDiffComponent params={{ transId: trans_id, pgAdmin: pgWindow.pgAdmin }}></SchemaDiffComponent>
           </ModalProvider>
         </PgAdminContext.Provider>
-      </Theme>,
-      container
+      </Theme>
     );
   }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
index 159004bb4..a21bc2569 100644
--- a/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
+++ b/web/pgadmin/tools/sqleditor/static/js/SQLEditorModule.js
@@ -19,7 +19,7 @@ import 'pgadmin.tools.user_management';
 import 'pgadmin.tools.file_manager';
 import gettext from 'sources/gettext';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import QueryToolComponent from './components/QueryToolComponent';
 import ModalProvider from '../../../../static/js/helpers/ModalProvider';
 import Theme from '../../../../static/js/Theme';
@@ -228,7 +228,8 @@ export default class SQLEditor {
     );
     pgAdmin.Browser.keyboardNavigation.init();
     await listenPreferenceBroadcast();
-    ReactDOM.render(
+    const root = ReactDOM.createRoot(container);
+    root.render(
       <Theme>
         <PgAdminContext.Provider value={pgAdmin}>
           <ModalProvider>
@@ -237,8 +238,7 @@ export default class SQLEditor {
               qtPanelId={`${BROWSER_PANELS.QUERY_TOOL}_${params.trans_id}`} selectedNodeInfo={selectedNodeInfo}/>
           </ModalProvider>
         </PgAdminContext.Provider>
-      </Theme>,
-      container
+      </Theme>
     );
   }
 }
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 9120dcbf5..369363182 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -388,7 +388,7 @@ export function QueryHistory() {
     });
   }, []);
 
-  React.useEffect(async ()=>{
+  const fetchQueryHistory = async() =>{
     if(!queryToolConnCtx.connected) {
       return;
     }
@@ -430,7 +430,11 @@ export function QueryHistory() {
     listRef.current?.focus();
     eventBus.registerListener(QUERY_TOOL_EVENTS.PUSH_HISTORY, pushHistory);
     return ()=>eventBus.deregisterListener(QUERY_TOOL_EVENTS.PUSH_HISTORY, pushHistory);
-  }, [queryToolConnCtx.connected]);
+  };
+
+  React.useEffect(() =>{
+    fetchQueryHistory();
+  },[queryToolConnCtx.connected]);
 
   const onRemove = async ()=>{
     setLoaderText(gettext('Removing history entry...'));
diff --git a/web/pgadmin/utils/driver/psycopg3/typecast.py b/web/pgadmin/utils/driver/psycopg3/typecast.py
index cd93a274a..a784cf433 100644
--- a/web/pgadmin/utils/driver/psycopg3/typecast.py
+++ b/web/pgadmin/utils/driver/psycopg3/typecast.py
@@ -128,9 +128,6 @@ PSYCOPG_SUPPORTED_MULTIRANGE_ARRAY_TYPES = (6155, 6150, 6157, 6151, 6152, 6153)
 
 
 def register_global_typecasters():
-    # This registers a unicode type caster for datatype 'RECORD'.
-    psycopg.adapters.register_loader(
-        2249, TextLoaderpgAdmin)
     # This registers a unicode type caster for datatype 'RECORD_ARRAY'.
     psycopg.adapters.register_loader(
         2287, TextLoaderpgAdmin)
diff --git a/web/regression/feature_utils/pgadmin_page.py b/web/regression/feature_utils/pgadmin_page.py
index a413e0028..91f239afa 100644
--- a/web/regression/feature_utils/pgadmin_page.py
+++ b/web/regression/feature_utils/pgadmin_page.py
@@ -282,6 +282,7 @@ class PgadminPage:
                 option_set_as_required = True
                 break
             else:
+                self.driver.implicitly_wait(2)
                 menu_option.click()
                 time.sleep(0.2)
                 if menu_option.get_attribute('data-checked') == is_selected:
diff --git a/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js b/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
index bb699f0fe..a116d80e5 100644
--- a/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
+++ b/web/regression/javascript/SchemaView/SchemaDialogViewEdit.spec.js
@@ -8,9 +8,9 @@
 //////////////////////////////////////////////////////////////
 
 
-import React from 'react';
+import React, { act } from 'react';
 
-import { act, render } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import {TestSchema} from './TestSchema.ui';
 
 import SchemaView from '../../../pgadmin/static/js/SchemaView';
diff --git a/web/regression/javascript/file_manager/FileManager.spec.js b/web/regression/javascript/file_manager/FileManager.spec.js
index 33f16606c..88c192178 100644
--- a/web/regression/javascript/file_manager/FileManager.spec.js
+++ b/web/regression/javascript/file_manager/FileManager.spec.js
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 
-import React from 'react';
+import React, { act} from 'react';
 
 import { render } from '@testing-library/react';
 import Theme from '../../../pgadmin/static/js/Theme';
@@ -18,7 +18,6 @@ import axios from 'axios';
 import getApiInstance from '../../../pgadmin/static/js/api_instance';
 import * as pgUtils from '../../../pgadmin/static/js/utils';
 import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
 
 const files = [
   {
diff --git a/web/regression/javascript/grant_wizard/wizard_spec.js b/web/regression/javascript/grant_wizard/wizard_spec.js
index c09e1675d..7aa4a5122 100644
--- a/web/regression/javascript/grant_wizard/wizard_spec.js
+++ b/web/regression/javascript/grant_wizard/wizard_spec.js
@@ -9,8 +9,8 @@
 
 
 import React from 'react';
-
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import Theme from 'sources/Theme';
 import Wizard from '../../../pgadmin/static/js/helpers/wizard/Wizard';
diff --git a/web/regression/javascript/setup-jest.js b/web/regression/javascript/setup-jest.js
index cd90d801e..1cab127e1 100644
--- a/web/regression/javascript/setup-jest.js
+++ b/web/regression/javascript/setup-jest.js
@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+const { TextEncoder, TextDecoder } = require('util');
 
 class BroadcastChannelMock {
   onmessage() {/* mock */}
@@ -93,5 +94,7 @@ Element.prototype.getBoundingClientRect = jest.fn(function () {
   };
 });
 
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
 
 jest.setTimeout(18000); // 1 second
diff --git a/web/yarn.lock b/web/yarn.lock
index 6844f6dff..027d8e94b 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.9, @babel/runtime@npm:^7.24.6, @babel/runtime@npm:^7.24.7, @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":
+"@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.9, @babel/runtime@npm:^7.24.7, @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.7
   resolution: "@babel/runtime@npm:7.24.7"
   dependencies:
@@ -1589,6 +1589,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@codemirror/lang-json@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "@codemirror/lang-json@npm:6.0.1"
+  dependencies:
+    "@codemirror/language": ^6.0.0
+    "@lezer/json": ^1.0.0
+  checksum: e9e87d50ff7b81bd56a6ab50740b1dd54e9a93f1be585e1d59d0642e2148842ea1528ac7b7221eb4ddc7fe84bbc28065144cc3ab86f6e06c6aeb2d4b4e62acf1
+  languageName: node
+  linkType: hard
+
 "@codemirror/lang-sql@npm:^6.6.5":
   version: 6.7.0
   resolution: "@codemirror/lang-sql@npm:6.7.0"
@@ -1647,13 +1657,13 @@ __metadata:
   linkType: hard
 
 "@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.27.0":
-  version: 6.28.2
-  resolution: "@codemirror/view@npm:6.28.2"
+  version: 6.28.3
+  resolution: "@codemirror/view@npm:6.28.3"
   dependencies:
     "@codemirror/state": ^6.4.0
     style-mod: ^4.1.0
     w3c-keyname: ^2.2.4
-  checksum: d2d36d7bbb1fc094fb421251b96144b67a932f43d12092bd2318ced283db0081e6e78cc99c5cecf9eedd24278d39fe41deaa490fcc03637d85c5cf332af58fec
+  checksum: 00aa8d1e3c18ae36dfedb1e86b21873f1f4694772274525ad91276a3b49185cbb5d113f0e36fb542e17c2727b7fbe322e9aedc99f23e358ee5b2e31cedca663b
   languageName: node
   linkType: hard
 
@@ -1951,9 +1961,9 @@ __metadata:
   linkType: hard
 
 "@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.6.1":
-  version: 4.10.1
-  resolution: "@eslint-community/regexpp@npm:4.10.1"
-  checksum: 1e04bc366fb8152c9266258cd25e3fded102f1d212a9476928e3cb98c48be645df6d676728d1c596053992fb9134879fe0de23c9460035b342cceb22d3af1776
+  version: 4.11.0
+  resolution: "@eslint-community/regexpp@npm:4.11.0"
+  checksum: 97d2fe46690b69417a551bd19a3dc53b6d9590d2295c43cc4c4e44e64131af541e2f4a44d5c12e87de990403654d3dae9d33600081f3a2f0386b368abc9111ec
   languageName: node
   linkType: hard
 
@@ -1981,22 +1991,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/core@npm:^1.0.0":
-  version: 1.6.3
-  resolution: "@floating-ui/core@npm:1.6.3"
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.4
+  resolution: "@floating-ui/core@npm:1.6.4"
   dependencies:
-    "@floating-ui/utils": ^0.2.3
-  checksum: ef2f6d8d0afeca3c7c908ff4122965099efb162e2b00a3c7b245f7357ffdcfa850341eacd4d8a0169d965f91ed33953206543cf7d713bd975d0e28b5e3d3a919
+    "@floating-ui/utils": ^0.2.4
+  checksum: 6855472c00ceaa14e0f1cb4bd5de0de01d05cd46bdf12cb19bd6a89fa70bdfba0460a776dc50d28ab40e3bddc291e2211958497528fdd98653ea7260d61e0442
   languageName: node
   linkType: hard
 
 "@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.0.1":
-  version: 1.6.6
-  resolution: "@floating-ui/dom@npm:1.6.6"
+  version: 1.6.7
+  resolution: "@floating-ui/dom@npm:1.6.7"
   dependencies:
-    "@floating-ui/core": ^1.0.0
-    "@floating-ui/utils": ^0.2.3
-  checksum: edc7538805aee8d11385bc53e086395abd26371277baeb3e6a209ec72ea714f5d93a4fc6fe8b26b2de4d83ae0c3adb47540a01ffee6148be43c85da87b1dd76c
+    "@floating-ui/core": ^1.6.0
+    "@floating-ui/utils": ^0.2.4
+  checksum: 66605a2948bfe7532408197b4c522fecf04cf11e7839623d0dca0d22362b42d64a5db2f3be865053e9b0d44c89faf1befa9a4ce1b7fa595d1b3dc82f635d079c
   languageName: node
   linkType: hard
 
@@ -2012,14 +2022,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.3":
-  version: 0.2.3
-  resolution: "@floating-ui/utils@npm:0.2.3"
-  checksum: 25c61c6391c2b6d46305c377b5fb6929c953d5ee8e79785cdb63137f7e7a557555cc2d97331d5fd6d848f69760095e645631c0a915766cd7343b555e4c9ecf66
+"@floating-ui/utils@npm:^0.2.4":
+  version: 0.2.4
+  resolution: "@floating-ui/utils@npm:0.2.4"
+  checksum: af44cdb3f394fbee6abc933fc3c25bf22f3f0bac58150eee8cc1dcc7e9be56a19b13e438820160614a90712e5a43f84b091afa6689318a10504042930ae9cf44
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-free@npm:latest":
+"@fortawesome/fontawesome-free@latest":
   version: 6.5.2
   resolution: "@fortawesome/fontawesome-free@npm:6.5.2"
   checksum: b77c1751721f355edc3bbc5c305d3ae87130156846511dfd3f66d5e218e246a7b3b5c57839f7b57729864b9d8b166e76aba2a11472a3e2f2ff597c24d39999df
@@ -2390,6 +2400,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lezer/json@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "@lezer/json@npm:1.0.2"
+  dependencies:
+    "@lezer/common": ^1.2.0
+    "@lezer/highlight": ^1.0.0
+    "@lezer/lr": ^1.0.0
+  checksum: f899d13765d95599c9199fc3404cb57969031dc40ce07de30f4e648979153966581f0bee02e2f8f70463b0a5322206a97c2fe8d5d14f218888c72a6dcedf90ef
+  languageName: node
+  linkType: hard
+
 "@lezer/lr@npm:^1.0.0":
   version: 1.4.1
   resolution: "@lezer/lr@npm:1.4.1"
@@ -2399,7 +2420,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:5.0.0-beta.40":
+"@mui/base@npm:5.0.0-beta.40, @mui/base@npm:^5.0.0-beta.40":
   version: 5.0.0-beta.40
   resolution: "@mui/base@npm:5.0.0-beta.40"
   dependencies:
@@ -2421,38 +2442,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/base@npm:^5.0.0-beta.40":
-  version: 5.0.0-dev.20240529-082515-213b5e33ab
-  resolution: "@mui/base@npm:5.0.0-dev.20240529-082515-213b5e33ab"
-  dependencies:
-    "@babel/runtime": ^7.24.6
-    "@floating-ui/react-dom": ^2.0.8
-    "@mui/types": ^7.2.14-dev.20240529-082515-213b5e33ab
-    "@mui/utils": ^6.0.0-dev.20240529-082515-213b5e33ab
-    "@popperjs/core": ^2.11.8
-    clsx: ^2.1.1
-    prop-types: ^15.8.1
-  peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-    react-dom: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 7ca5d369c5f4dfa2bb36fe49d721f3dc28a6d067bd74492e8f4531671ff9debe33bade579d0cdcb7d5f899bfc5003c8f710b1f9422edd22f06d805dbc68c9f4e
-  languageName: node
-  linkType: hard
-
-"@mui/core-downloads-tracker@npm:^5.15.20":
-  version: 5.15.20
-  resolution: "@mui/core-downloads-tracker@npm:5.15.20"
-  checksum: 8cc71169ce1201c5a37fad6c5c58739850694e90c7bda636c692d47a79fd4c7884eab2c24b0084d6732a3d28c9a4a6d222dd5747f9d91f5075614700a3a3282a
+"@mui/core-downloads-tracker@npm:^5.15.21":
+  version: 5.15.21
+  resolution: "@mui/core-downloads-tracker@npm:5.15.21"
+  checksum: c6f8e2350597833a96593f65e5081930a1006b645be6a34750e93e15e111eeca6973562b42688f5d6393a050401b7196d58c2aa2de96a112ac27fb998411742a
   languageName: node
   linkType: hard
 
 "@mui/icons-material@npm:^5.15.10":
-  version: 5.15.20
-  resolution: "@mui/icons-material@npm:5.15.20"
+  version: 5.15.21
+  resolution: "@mui/icons-material@npm:5.15.21"
   dependencies:
     "@babel/runtime": ^7.23.9
   peerDependencies:
@@ -2462,7 +2461,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: bdc4841e83e6628237e468965a726a8a099e57bd1075e5f70f2d5fd5715309bdf13d8dcbb66056c34109fd2a5932ab5eebf4820f3a2cb0cbe4bc17492f881e04
+  checksum: b082fd4ae2372c8ca167a5e365e7e5bca6b78123be50b4cb001665533d0b3fe5590715dbce54ad4088668e5429a56bdbf11d78c4ff7d571b87018965617a9e6d
   languageName: node
   linkType: hard
 
@@ -2496,12 +2495,12 @@ __metadata:
   linkType: hard
 
 "@mui/material@npm:^5.15.10":
-  version: 5.15.20
-  resolution: "@mui/material@npm:5.15.20"
+  version: 5.15.21
+  resolution: "@mui/material@npm:5.15.21"
   dependencies:
     "@babel/runtime": ^7.23.9
     "@mui/base": 5.0.0-beta.40
-    "@mui/core-downloads-tracker": ^5.15.20
+    "@mui/core-downloads-tracker": ^5.15.21
     "@mui/system": ^5.15.20
     "@mui/types": ^7.2.14
     "@mui/utils": ^5.15.20
@@ -2524,7 +2523,7 @@ __metadata:
       optional: true
     "@types/react":
       optional: true
-  checksum: 0d0e29682fa8f4ff03746efabb4b480da9dfe004e68982a36662ff0d40d76f5840ebf8ef3b0f9629056afb3030145dd5eb3bd2b0ab96d201fac7a300fef155b0
+  checksum: fd903dcc6f63296bf7754cd87210fce4a35b79ae8e1e91c2b8e2a5ac5f7ff06ac0fcddae65c6a51d06ae6b1d9a1391b6292a4b167948f97e2d4b1f62dd6a5dd3
   languageName: node
   linkType: hard
 
@@ -2594,7 +2593,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/types@npm:^7.2.14, @mui/types@npm:^7.2.14-dev.20240529-082515-213b5e33ab":
+"@mui/types@npm:^7.2.14":
   version: 7.2.14
   resolution: "@mui/types@npm:7.2.14"
   peerDependencies:
@@ -2624,27 +2623,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mui/utils@npm:^6.0.0-dev.20240529-082515-213b5e33ab":
-  version: 6.0.0-dev.20240529-082515-213b5e33ab
-  resolution: "@mui/utils@npm:6.0.0-dev.20240529-082515-213b5e33ab"
-  dependencies:
-    "@babel/runtime": ^7.24.6
-    "@types/prop-types": ^15.7.12
-    prop-types: ^15.8.1
-    react-is: ^18.2.0
-  peerDependencies:
-    "@types/react": ^17.0.0 || ^18.0.0
-    react: ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 6869a031b5f725933e3f028c6efc7890a42601ec7b8498edc396fd9a93d8eeff8726b696ceaada1b89aa55a00a00d6371ebb5d144a3926e5429356edc806c8e0
-  languageName: node
-  linkType: hard
-
 "@mui/x-date-pickers@npm:^7.7.1":
-  version: 7.7.1
-  resolution: "@mui/x-date-pickers@npm:7.7.1"
+  version: 7.8.0
+  resolution: "@mui/x-date-pickers@npm:7.8.0"
   dependencies:
     "@babel/runtime": ^7.24.7
     "@mui/base": ^5.0.0-beta.40
@@ -2686,7 +2667,7 @@ __metadata:
       optional: true
     moment-jalaali:
       optional: true
-  checksum: 9a697e2e8b317e77aff8de0de263c8fd5a68bfac32cf7c5e25de1aa5a6a103e2214c1219348090e0eb8d601b0d7699eed669f65276d405b1d8c670c1a1966d56
+  checksum: c766cd3a84692e8356eee02692f17a3c67759e4a551191c8db8ce45f0a1ba537bcda756e1bb947acdae3a427688b0a3e3e340ae1079af9471e7607adf2490518
   languageName: node
   linkType: hard
 
@@ -3149,61 +3130,79 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:^8.16.0":
-  version: 8.17.3
-  resolution: "@tanstack/react-table@npm:8.17.3"
+"@tanstack/query-core@npm:5.36.1":
+  version: 5.36.1
+  resolution: "@tanstack/query-core@npm:5.36.1"
+  checksum: 9ac291eff02bcfd20c8460ce04683b2551d6b51635120eb9efb1be37c6839e8428ddf85ef94bf1b71ed162b5e5cd5dfef64e14f089058d725f7cee4d8ee07d0a
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:5.37.1":
+  version: 5.37.1
+  resolution: "@tanstack/react-query@npm:5.37.1"
   dependencies:
-    "@tanstack/table-core": 8.17.3
+    "@tanstack/query-core": 5.36.1
+  peerDependencies:
+    react: ^18.0.0
+  checksum: 4bac8aeed5ab6718ba3eb527542784c9475e3eda5f2602eea1479f672b5dfcfb48289b4a26ccf5ef3cba793e4b5cc00070b33e85417dda6ecbe11a09d85ad1c5
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-table@npm:^8.16.0":
+  version: 8.19.2
+  resolution: "@tanstack/react-table@npm:8.19.2"
+  dependencies:
+    "@tanstack/table-core": 8.19.2
   peerDependencies:
     react: ">=16.8"
     react-dom: ">=16.8"
-  checksum: ec635f9c6e66bc5655e71ef5bb5087c78fca79e619d8cf80ba395152d88e72ef78e87cbb3e4b9e0b4d86504068c8bf5ba320309529ef9d3dd1ee4630bf75067a
+  checksum: 75113674c6575cc9e200b7535b0ae255849326c4776fa06c4a9e4b9224e84abe322e39349c6dff960c6a32bec580a13cc35b2de099ba4bc650f114c04833335d
   languageName: node
   linkType: hard
 
 "@tanstack/react-virtual@npm:^3.4.0":
-  version: 3.7.0
-  resolution: "@tanstack/react-virtual@npm:3.7.0"
+  version: 3.8.1
+  resolution: "@tanstack/react-virtual@npm:3.8.1"
   dependencies:
-    "@tanstack/virtual-core": 3.7.0
+    "@tanstack/virtual-core": 3.8.1
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 20aae23c13296d686e211adb76a9c0213d9a8dc2bdfc51eeffe7a4e1a0da23dcea55984f2b9571354ca85e5e8fff84dce45a9138668a0c20dc34447ef48c9b07
+  checksum: 8b6eeca22a7cf34f2a2f92927c633f24aa1291875534f624d838818381092c70b31d5aea0c0ca88b8e4b636d9cff8fb4b8ec5340a03a917f9a0f918f11890bf7
   languageName: node
   linkType: hard
 
-"@tanstack/table-core@npm:8.17.3":
-  version: 8.17.3
-  resolution: "@tanstack/table-core@npm:8.17.3"
-  checksum: 4f7115d6198f63bea6a00a1c8f33288453463afbede716365b99b3ffa565c46861eb2903c26d3d1de35211ad85fa13bc1e0f35b3546b8f7fc46218441cf06700
+"@tanstack/table-core@npm:8.19.2":
+  version: 8.19.2
+  resolution: "@tanstack/table-core@npm:8.19.2"
+  checksum: 23f5ae31ff9695a93a6390b95d62e52d4a5ae76872660068b1dd5baa23bea46727ee9649681a0ddba2451152f5175759d628258c2e26a488932fd16fa6e7b5c1
   languageName: node
   linkType: hard
 
-"@tanstack/virtual-core@npm:3.7.0":
-  version: 3.7.0
-  resolution: "@tanstack/virtual-core@npm:3.7.0"
-  checksum: d9a1e523d8ea008725599fbe5d1ad897551116a8cb4d15d4077076dbfa91bcc243fe48332203c25594dbd9ef4d6d7dfd45f117fe3ea1888b4e6eeb564e40482c
+"@tanstack/virtual-core@npm:3.8.1":
+  version: 3.8.1
+  resolution: "@tanstack/virtual-core@npm:3.8.1"
+  checksum: 76e5d9e4a4617ba331205fdb762515ad2fb77ab603fd10b5f9e0531e7ae814a6ff8fcc756a8060715310b5ae136a6f99636ff0c6d7ea9045c96016e50a5e0f87
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
-  version: 8.20.1
-  resolution: "@testing-library/dom@npm:8.20.1"
+"@testing-library/dom@npm:10.2.0":
+  version: 10.2.0
+  resolution: "@testing-library/dom@npm:10.2.0"
   dependencies:
     "@babel/code-frame": ^7.10.4
     "@babel/runtime": ^7.12.5
     "@types/aria-query": ^5.0.1
-    aria-query: 5.1.3
+    aria-query: 5.3.0
     chalk: ^4.1.0
     dom-accessibility-api: ^0.5.9
     lz-string: ^1.5.0
     pretty-format: ^27.0.2
-  checksum: 06fc8dc67849aadb726cbbad0e7546afdf8923bd39acb64c576d706249bd7d0d05f08e08a31913fb621162e3b9c2bd0dce15964437f030f9fa4476326fdd3007
+  checksum: ea2ce77f5777a6d00803bba938528d785c80aed8ca3f3d2c703b4ef6a697ef65b57773bb1f4363d893dde4e7e88f40ffb963f2a0fa1d9af7f49bee62034b24a7
   languageName: node
   linkType: hard
 
-"@testing-library/jest-dom@npm:^6.1.2":
+"@testing-library/jest-dom@npm:^6.4.6":
   version: 6.4.6
   resolution: "@testing-library/jest-dom@npm:6.4.6"
   dependencies:
@@ -3236,21 +3235,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:12":
-  version: 12.1.5
-  resolution: "@testing-library/react@npm:12.1.5"
+"@testing-library/react@npm:16.0.0":
+  version: 16.0.0
+  resolution: "@testing-library/react@npm:16.0.0"
   dependencies:
     "@babel/runtime": ^7.12.5
-    "@testing-library/dom": ^8.0.0
-    "@types/react-dom": <18.0.0
   peerDependencies:
-    react: <18.0.0
-    react-dom: <18.0.0
-  checksum: 4abd0490405e709a7df584a0db604e508a4612398bb1326e8fa32dd9393b15badc826dcf6d2f7525437886d507871f719f127b9860ed69ddd204d1fa834f576a
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 45a35f0b5f34b5a7f4dcefdd3f1d202d5421692e5cc7a491c9bc71e6ed9dd5872a182b80b4dfefb4a56d9c1df35e50f6fa2917bcf657cc26b4bc0d2259df0027
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^14.4.3":
+"@testing-library/user-event@npm:^14.5.2":
   version: 14.5.2
   resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
@@ -3328,6 +3333,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/classnames@npm:^2.2.6":
+  version: 2.3.1
+  resolution: "@types/classnames@npm:2.3.1"
+  dependencies:
+    classnames: "*"
+  checksum: 09a17ea08fcb83380921efdfdac94cfa162f87025cae0bf6f4ba508c2fa5f436459ce7612905a3f968fdddb68c03b8e6ff08e762ed2d0c110c5c4fceb244dc55
+  languageName: node
+  linkType: hard
+
 "@types/eslint-scope@npm:^3.7.3":
   version: 3.7.7
   resolution: "@types/eslint-scope@npm:3.7.7"
@@ -3456,19 +3470,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.11, @types/prop-types@npm:^15.7.12":
+"@types/prop-types@npm:*, @types/prop-types@npm:^15.7.11":
   version: 15.7.12
   resolution: "@types/prop-types@npm:15.7.12"
   checksum: ac16cc3d0a84431ffa5cfdf89579ad1e2269549f32ce0c769321fdd078f84db4fbe1b461ed5a1a496caf09e637c0e367d600c541435716a55b1d9713f5035dfe
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:<18.0.0, @types/react-dom@npm:^17.0.25":
-  version: 17.0.25
-  resolution: "@types/react-dom@npm:17.0.25"
+"@types/react-dom@npm:^18.0.0":
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
-    "@types/react": ^17
-  checksum: d1e582682478e0848c8d54ea3e89d02047bac6d916266b85ce63731b06987575919653ea7159d98fda47ade3362b8c4d5796831549564b83088e7aa9ce8b60ed
+    "@types/react": "*"
+  checksum: a0cd9b1b815a6abd2a367a9eabdd8df8dd8f13f95897b2f9e1359ea3ac6619f957c1432ece004af7d95e2a7caddbba19faa045f831f32d6263483fc5404a7596
   languageName: node
   linkType: hard
 
@@ -3481,7 +3495,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*":
+"@types/react@npm:*, @types/react@npm:^18.0.2":
   version: 18.3.3
   resolution: "@types/react@npm:18.3.3"
   dependencies:
@@ -3491,17 +3505,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17, @types/react@npm:^17.0.80":
-  version: 17.0.80
-  resolution: "@types/react@npm:17.0.80"
-  dependencies:
-    "@types/prop-types": "*"
-    "@types/scheduler": ^0.16
-    csstype: ^3.0.2
-  checksum: 1c27bfc42305d77ef0da55f8f6d4c4a3471aa02b294fcf29ea0f2cfb0bf02892e5a0a3bc7559fa4a5ba50697b2e31076cb5aa5987f69cfc2e880f6426edb8bdf
-  languageName: node
-  linkType: hard
-
 "@types/responselike@npm:^1.0.0":
   version: 1.0.3
   resolution: "@types/responselike@npm:1.0.3"
@@ -3511,13 +3514,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/scheduler@npm:^0.16":
-  version: 0.16.8
-  resolution: "@types/scheduler@npm:0.16.8"
-  checksum: 6c091b096daa490093bf30dd7947cd28e5b2cd612ec93448432b33f724b162587fed9309a0acc104d97b69b1d49a0f3fc755a62282054d62975d53d7fd13472d
-  languageName: node
-  linkType: hard
-
 "@types/semver@npm:^7.3.12":
   version: 7.5.8
   resolution: "@types/semver@npm:7.5.8"
@@ -3556,14 +3552,14 @@ __metadata:
   linkType: hard
 
 "@typescript-eslint/eslint-plugin@npm:^7.12.0":
-  version: 7.14.1
-  resolution: "@typescript-eslint/eslint-plugin@npm:7.14.1"
+  version: 7.15.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.15.0"
   dependencies:
     "@eslint-community/regexpp": ^4.10.0
-    "@typescript-eslint/scope-manager": 7.14.1
-    "@typescript-eslint/type-utils": 7.14.1
-    "@typescript-eslint/utils": 7.14.1
-    "@typescript-eslint/visitor-keys": 7.14.1
+    "@typescript-eslint/scope-manager": 7.15.0
+    "@typescript-eslint/type-utils": 7.15.0
+    "@typescript-eslint/utils": 7.15.0
+    "@typescript-eslint/visitor-keys": 7.15.0
     graphemer: ^1.4.0
     ignore: ^5.3.1
     natural-compare: ^1.4.0
@@ -3574,25 +3570,25 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: ed3d149dc6622a746dc853e8019269631bb3e2abb52190caf838d1a19527fbf9fe07ed556a744989915e9547923dd1c576410f30454eb2ab76a4b68674ef6d92
+  checksum: 4ee884c7c00362a40f1d95be042434b8dc737d9680ace7f0c283f33b044c8b9c9be93ea1e3990d7cf1271f73f4b16900469626fea213cc3ca37fe0a8d02f517d
   languageName: node
   linkType: hard
 
 "@typescript-eslint/parser@npm:^7.12.0":
-  version: 7.14.1
-  resolution: "@typescript-eslint/parser@npm:7.14.1"
+  version: 7.15.0
+  resolution: "@typescript-eslint/parser@npm:7.15.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 7.14.1
-    "@typescript-eslint/types": 7.14.1
-    "@typescript-eslint/typescript-estree": 7.14.1
-    "@typescript-eslint/visitor-keys": 7.14.1
+    "@typescript-eslint/scope-manager": 7.15.0
+    "@typescript-eslint/types": 7.15.0
+    "@typescript-eslint/typescript-estree": 7.15.0
+    "@typescript-eslint/visitor-keys": 7.15.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^8.56.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: e98ee179e3510cce5e5cce0fe82f8d30886e15798ed302ba56eab9ed586879f417dc325d5898c2809fc5d53afc983ce833c3c62a2ed16f34b2072a17b23fea44
+  checksum: e907ba4c5595d8d47a865fad4c5482937f9347510ea6d456cb6eaef785b2d3c5a08b070ed3a0b918baa07d6d634721156a0937f6ea457a24ddcc20dc5e4d7320
   languageName: node
   linkType: hard
 
@@ -3606,22 +3602,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/scope-manager@npm:7.14.1"
+"@typescript-eslint/scope-manager@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.15.0"
   dependencies:
-    "@typescript-eslint/types": 7.14.1
-    "@typescript-eslint/visitor-keys": 7.14.1
-  checksum: b9351e4887615f6a8ef049d012accd3fe07affeb34ce54cd04551d291852f7e676a61acafac8b7b4bde5dc8302c6e95dd7d1bcac94e8c58fd1dcd6a0b2d65b4b
+    "@typescript-eslint/types": 7.15.0
+    "@typescript-eslint/visitor-keys": 7.15.0
+  checksum: 4a7b6c9b73d40cd3ecb146187cafea5cb85e36ee0b7f7003b39ba6a6980e13591db5f931aacc99400e2cb55ae9f31ea56dd81bb3592c2e345c9f8a1dd4725526
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/type-utils@npm:7.14.1"
+"@typescript-eslint/type-utils@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/type-utils@npm:7.15.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 7.14.1
-    "@typescript-eslint/utils": 7.14.1
+    "@typescript-eslint/typescript-estree": 7.15.0
+    "@typescript-eslint/utils": 7.15.0
     debug: ^4.3.4
     ts-api-utils: ^1.3.0
   peerDependencies:
@@ -3629,7 +3625,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 940c0e7f39dc68a03894112ceea169e507d3bb2de067216454678a3976d7d38b43445b2c8f59a70724bc79c1748947aac11bf9f83423eda85f526d27d0b7d083
+  checksum: 6104ac153419d5364e6b8540c44f52a8db614ff040dfed30e59d5a050ac2372d6bf47a7d73449198eeff8c532259bd5ad0ea56e567d9f0dbc121268caf8ecf9d
   languageName: node
   linkType: hard
 
@@ -3640,10 +3636,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/types@npm:7.14.1"
-  checksum: 20136fc67694ae8c0efe96e8194ef880bfe4cd0c3e6c9f4ab911fe86a806af2dcce73d7e590981d155700bb462dce041777617b4660a7d0d865727e3bdad7817
+"@typescript-eslint/types@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/types@npm:7.15.0"
+  checksum: 6da90322d0073ecc83378d6e0cb13c173b5baf8eb30b785624b3155c19c66468b9ab7b6c93cda1b5162559622085cb30f24811d77f6d305c26784d65e9e1cebd
   languageName: node
   linkType: hard
 
@@ -3665,12 +3661,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/typescript-estree@npm:7.14.1"
+"@typescript-eslint/typescript-estree@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.15.0"
   dependencies:
-    "@typescript-eslint/types": 7.14.1
-    "@typescript-eslint/visitor-keys": 7.14.1
+    "@typescript-eslint/types": 7.15.0
+    "@typescript-eslint/visitor-keys": 7.15.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -3680,21 +3676,21 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 4ee6c1c629c7040c124d07d68b8af5af83bf726837b7828ce60cb3d0e02820bbe94f0b7d5a3ebd91cd38c1fee2d8bef8d42449c76f88eef11a0f4978f15447ba
+  checksum: ece4718496871d5f9188e32cbc692e5404c92b92f96d75709eab3847bbef96d1241c6a7d31a96b45cfdef6942b446018afefdd6c0c6133e31df8f9972b39b788
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/utils@npm:7.14.1"
+"@typescript-eslint/utils@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/utils@npm:7.15.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.4.0
-    "@typescript-eslint/scope-manager": 7.14.1
-    "@typescript-eslint/types": 7.14.1
-    "@typescript-eslint/typescript-estree": 7.14.1
+    "@typescript-eslint/scope-manager": 7.15.0
+    "@typescript-eslint/types": 7.15.0
+    "@typescript-eslint/typescript-estree": 7.15.0
   peerDependencies:
     eslint: ^8.56.0
-  checksum: 202dc0add3739c39dd82a20b0b0b3e2cee44130e4959ce63ea1347e6b700a37e442c82e4863becdc4b43efbafb1b685929fd076bda68d0c69860ae6f78473123
+  checksum: 4b1b467985b46efbb47cdbabf7aa5cc86df3d223d82a6cfe9b181dbc18c229b9de591206204b9969818216f346433600e166f02f2bc2d293496b4d054aa7ab17
   languageName: node
   linkType: hard
 
@@ -3726,13 +3722,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:7.14.1":
-  version: 7.14.1
-  resolution: "@typescript-eslint/visitor-keys@npm:7.14.1"
+"@typescript-eslint/visitor-keys@npm:7.15.0":
+  version: 7.15.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.15.0"
   dependencies:
-    "@typescript-eslint/types": 7.14.1
+    "@typescript-eslint/types": 7.15.0
     eslint-visitor-keys: ^3.4.3
-  checksum: 6f091423d4a8f049915a84698bd4c258f411822562d4486691e9cbdd6d0b4e21ad1853c5a8ba4ac181bd4881b459dc37c7c3931863b81de9e91284a05d18aa68
+  checksum: 8be7b1997455a80135b5c3dd9dc64a367a20dca0c724218bfec37b7931696bb7be2c4325dc2121fe9d4232e6457ab5c8ca7d112fac5e88c80bc6f9257ba8df9b
   languageName: node
   linkType: hard
 
@@ -4000,9 +3996,9 @@ __metadata:
   linkType: hard
 
 "ace-builds@npm:^1.31.1":
-  version: 1.35.0
-  resolution: "ace-builds@npm:1.35.0"
-  checksum: e7440f4b87a74a3954b2fa20f4a3f70ff749784ae673f2ba7189449ae5fe9e945a7d07b508583f808a20bdee2cbf57d6f99e3208b2bcca193110c78883593901
+  version: 1.35.2
+  resolution: "ace-builds@npm:1.35.2"
+  checksum: a978cee6a90413979934e931b409fa652b3c5aacc69b12f133195fc988b9d44398d7a486006fc8fa312e510a15f4bde1a21a6f5a9c2aa8168dfd63f6f2d56526
   languageName: node
   linkType: hard
 
@@ -4071,11 +4067,11 @@ __metadata:
   linkType: hard
 
 "acorn@npm:^8.0.4, acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.7.1, acorn@npm:^8.8.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
-  version: 8.12.0
-  resolution: "acorn@npm:8.12.0"
+  version: 8.12.1
+  resolution: "acorn@npm:8.12.1"
   bin:
     acorn: bin/acorn
-  checksum: ae142de8739ef15a5d936c550c1d267fc4dedcdbe62ad1aa2c0009afed1de84dd0a584684a5d200bb55d8db14f3e09a95c6e92a5303973c04b9a7413c36d1df0
+  checksum: 677880034aee5bdf7434cc2d25b641d7bedb0b5ef47868a78dadabedccf58e1c5457526d9d8249cd253f2df087e081c3fe7d903b448d8e19e5131a3065b83c07
   languageName: node
   linkType: hard
 
@@ -4300,16 +4296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: ^2.0.5
-  checksum: 929ff95f02857b650fb4cbcd2f41072eee2f46159a6605ea03bf63aa572e35ffdff43d69e815ddc462e16e07de8faba3978afc2813650b4448ee18c9895d982b
-  languageName: node
-  linkType: hard
-
-"aria-query@npm:^5.0.0":
+"aria-query@npm:5.3.0, aria-query@npm:^5.0.0":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
   dependencies:
@@ -4318,7 +4305,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+"array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
   dependencies:
@@ -5363,9 +5350,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629":
-  version: 1.0.30001638
-  resolution: "caniuse-lite@npm:1.0.30001638"
-  checksum: 82e47b2bfac107c662e03bfd3321bfd9493f87240c77a9bfba7ea2cc9e0b81d9238152aed903fb19e60557879e4f48b57e2c6300677391b92a060fbf0a340e30
+  version: 1.0.30001640
+  resolution: "caniuse-lite@npm:1.0.30001640"
+  checksum: ec492d8d1e11d1c55e0f5c0f218229369dc0a4bd1b5d0a579a6435865fe8f4c84bde7e816a844cce1b9cdd97f5a85b6dac5599639fabcdb0c4c5bd039e46cbfd
   languageName: node
   linkType: hard
 
@@ -5475,7 +5462,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.5.1":
+"classnames@npm:*, classnames@npm:2.x, classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.2.6, classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -6550,32 +6537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^2.0.5":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: ^1.0.0
-    call-bind: ^1.0.5
-    es-get-iterator: ^1.1.3
-    get-intrinsic: ^1.2.2
-    is-arguments: ^1.1.1
-    is-array-buffer: ^3.0.2
-    is-date-object: ^1.0.5
-    is-regex: ^1.1.4
-    is-shared-array-buffer: ^1.0.2
-    isarray: ^2.0.5
-    object-is: ^1.1.5
-    object-keys: ^1.1.1
-    object.assign: ^4.1.4
-    regexp.prototype.flags: ^1.5.1
-    side-channel: ^1.0.4
-    which-boxed-primitive: ^1.0.2
-    which-collection: ^1.0.1
-    which-typed-array: ^1.1.13
-  checksum: ee8852f23e4d20a5626c13b02f415ba443a1b30b4b3d39eaf366d59c4a85e6545d7ec917db44d476a85ae5a86064f7e5f7af7479f38f113995ba869f3a1ddc53
-  languageName: node
-  linkType: hard
-
 "deep-is@npm:^0.1.3":
   version: 0.1.4
   resolution: "deep-is@npm:0.1.4"
@@ -6975,9 +6936,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.796":
-  version: 1.4.812
-  resolution: "electron-to-chromium@npm:1.4.812"
-  checksum: 0205fcb6db3a719873398f46cd3341188d4a54e056567453819532c5fd1fadda43f501c252bc8d05eeaaeb1497f58d9875c46c4f9ecfbe713b9efe71cd879b13
+  version: 1.4.816
+  resolution: "electron-to-chromium@npm:1.4.816"
+  checksum: 5abaa04cee77af4889e68d7fd7305c50b98eaa9b4016b228c85de5713a933767e423e2e6bcd71007fff1c405c5bea79d6e9e9d18efddaa966040fe9e97f43e2e
   languageName: node
   linkType: hard
 
@@ -7188,23 +7149,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: ^1.0.2
-    get-intrinsic: ^1.1.3
-    has-symbols: ^1.0.3
-    is-arguments: ^1.1.1
-    is-map: ^2.0.2
-    is-set: ^2.0.2
-    is-string: ^1.0.7
-    isarray: ^2.0.5
-    stop-iteration-iterator: ^1.0.0
-  checksum: 8fa118da42667a01a7c7529f8a8cca514feeff243feec1ce0bb73baaa3514560bd09d2b3438873cf8a5aaec5d52da248131de153b28e2638a061b6e4df13267d
-  languageName: node
-  linkType: hard
-
 "es-iterator-helpers@npm:^1.0.19":
   version: 1.0.19
   resolution: "es-iterator-helpers@npm:1.0.19"
@@ -8135,7 +8079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
   version: 1.2.4
   resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
@@ -8338,8 +8282,8 @@ __metadata:
   linkType: hard
 
 "globby@npm:^14.0.0":
-  version: 14.0.1
-  resolution: "globby@npm:14.0.1"
+  version: 14.0.2
+  resolution: "globby@npm:14.0.2"
   dependencies:
     "@sindresorhus/merge-streams": ^2.1.0
     fast-glob: ^3.3.2
@@ -8347,7 +8291,7 @@ __metadata:
     path-type: ^5.0.0
     slash: ^5.1.0
     unicorn-magic: ^0.1.0
-  checksum: 33568444289afb1135ad62d52d5e8412900cec620e3b6ece533afa46d004066f14b97052b643833d7cf4ee03e7fac571430130cde44c333df91a45d313105170
+  checksum: 2cee79efefca4383a825fc2fcbdb37e5706728f2d39d4b63851927c128fff62e6334ef7d4d467949d411409ad62767dc2d214e0f837a0f6d4b7290b6711d485c
   languageName: node
   linkType: hard
 
@@ -8769,12 +8713,12 @@ __metadata:
   linkType: hard
 
 "https-proxy-agent@npm:^7.0.1":
-  version: 7.0.4
-  resolution: "https-proxy-agent@npm:7.0.4"
+  version: 7.0.5
+  resolution: "https-proxy-agent@npm:7.0.5"
   dependencies:
     agent-base: ^7.0.2
     debug: 4
-  checksum: daaab857a967a2519ddc724f91edbbd388d766ff141b9025b629f92b9408fc83cee8a27e11a907aede392938e9c398e240d643e178408a59e4073539cde8cfe9
+  checksum: 2e1a28960f13b041a50702ee74f240add8e75146a5c37fc98f1960f0496710f6918b3a9fe1e5aba41e50f58e6df48d107edd9c405c5f0d73ac260dabf2210857
   languageName: node
   linkType: hard
 
@@ -9041,7 +8985,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
   dependencies:
@@ -9096,7 +9040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
+"is-arguments@npm:^1.0.4":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -9106,7 +9050,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+"is-array-buffer@npm:^3.0.4":
   version: 3.0.4
   resolution: "is-array-buffer@npm:3.0.4"
   dependencies:
@@ -9261,7 +9205,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
+"is-map@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-map@npm:2.0.3"
   checksum: e6ce5f6380f32b141b3153e6ba9074892bbbbd655e92e7ba5ff195239777e767a976dcd4e22f864accaf30e53ebf961ab1995424aef91af68788f0591b7396cc
@@ -9368,7 +9312,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
+"is-set@npm:^2.0.3":
   version: 2.0.3
   resolution: "is-set@npm:2.0.3"
   checksum: 36e3f8c44bdbe9496c9689762cc4110f6a6a12b767c5d74c0398176aa2678d4467e3bf07595556f2dba897751bde1422480212b97d973c7b08a343100b0c0dfe
@@ -9530,15 +9474,15 @@ __metadata:
   linkType: hard
 
 "istanbul-lib-instrument@npm:^6.0.0":
-  version: 6.0.2
-  resolution: "istanbul-lib-instrument@npm:6.0.2"
+  version: 6.0.3
+  resolution: "istanbul-lib-instrument@npm:6.0.3"
   dependencies:
     "@babel/core": ^7.23.9
     "@babel/parser": ^7.23.9
     "@istanbuljs/schema": ^0.1.3
     istanbul-lib-coverage: ^3.2.0
     semver: ^7.5.4
-  checksum: c10aa1e93a022f9767d7f41e6c07d244cc0a5c090fbb5522d70a5f21fcb98c52b7038850276c6fd1a7a17d1868c14a9d4eb8a24efe58a0ebb9a06f3da68131fe
+  checksum: 74104c60c65c4fa0e97cc76f039226c356123893929f067bfad5f86fe839e08f5d680354a68fead3bc9c1e2f3fa6f3f53cded70778e821d911e851d349f3545a
   languageName: node
   linkType: hard
 
@@ -10748,9 +10692,9 @@ __metadata:
   linkType: hard
 
 "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
-  version: 10.2.2
-  resolution: "lru-cache@npm:10.2.2"
-  checksum: 98e8fc93691c546f719a76103ef2bee5a3ac823955c755a47641ec41f8c7fafa1baeaba466937cc1cbfa9cfd47e03536d10e2db3158a64ad91ff3a58a32c893e
+  version: 10.3.0
+  resolution: "lru-cache@npm:10.3.0"
+  checksum: f2289639bd94cf3c87bfd8a77ac991f9afe3af004ddca3548c3dae63ead1c73bba449a60a4e270992e16cf3261b3d4130943234d52ca3a4d4de2fc074a3cc7b5
   languageName: node
   linkType: hard
 
@@ -11683,16 +11627,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-is@npm:^1.1.5":
-  version: 1.1.6
-  resolution: "object-is@npm:1.1.6"
-  dependencies:
-    call-bind: ^1.0.7
-    define-properties: ^1.2.1
-  checksum: 3ea22759967e6f2380a2cbbd0f737b42dc9ddb2dfefdb159a1b927fea57335e1b058b564bfa94417db8ad58cddab33621a035de6f5e5ad56d89f2dd03e66c6a1
-  languageName: node
-  linkType: hard
-
 "object-keys@npm:^1.1.1":
   version: 1.1.1
   resolution: "object-keys@npm:1.1.1"
@@ -12990,13 +12924,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.4.24, postcss@npm:^8.4.31, postcss@npm:^8.4.33":
-  version: 8.4.38
-  resolution: "postcss@npm:8.4.38"
+  version: 8.4.39
+  resolution: "postcss@npm:8.4.39"
   dependencies:
     nanoid: ^3.3.7
-    picocolors: ^1.0.0
+    picocolors: ^1.0.1
     source-map-js: ^1.2.0
-  checksum: 649f9e60a763ca4b5a7bbec446a069edf07f057f6d780a5a0070576b841538d1ecf7dd888f2fbfd1f76200e26c969e405aeeae66332e6927dbdc8bdcb90b9451
+  checksum: 14b130c90f165961772bdaf99c67f907f3d16494adf0868e57ef68baa67e0d1f6762db9d41ab0f4d09bab6fb7888588dba3596afd1a235fd5c2d43fba7006ac6
   languageName: node
   linkType: hard
 
@@ -13197,11 +13131,11 @@ __metadata:
   linkType: hard
 
 "qs@npm:^6.11.2":
-  version: 6.12.1
-  resolution: "qs@npm:6.12.1"
+  version: 6.12.2
+  resolution: "qs@npm:6.12.2"
   dependencies:
     side-channel: ^1.0.6
-  checksum: aa761d99e65b6936ba2dd2187f2d9976afbcda38deb3ff1b3fe331d09b0c578ed79ca2abdde1271164b5be619c521ec7db9b34c23f49a074e5921372d16242d5
+  checksum: cb141456f3e518b4212177f5658168acbab60c90735f27f131336f7ae0286b51402911d4a0a786d83d3ba4aa801c032383b4304b28474de00388eb95cf988c8c
   languageName: node
   linkType: hard
 
@@ -13613,16 +13547,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.2
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.3.1
+  checksum: 298954ecd8f78288dcaece05e88b570014d8f6dce5db6f66e6ee91448debeb59dcd31561dddb354eee47e6c1bb234669459060deb238ed0213497146e555a0b9
   languageName: node
   linkType: hard
 
@@ -13819,13 +13752,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: a27bcfa8ff7c15a1e50244ad0d0c1cb2ad4375eeffefd266a64889beea6f6b64c4966c9b37d14ee32d6c9fcd5aa6ba183b6988167ab4d127d13e7cb5b386a376
   languageName: node
   linkType: hard
 
@@ -14000,7 +13932,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+"regexp.prototype.flags@npm:^1.5.2":
   version: 1.5.2
   resolution: "regexp.prototype.flags@npm:1.5.2"
   dependencies:
@@ -14230,6 +14162,7 @@ __metadata:
     "@babel/preset-env": ^7.10.2
     "@babel/preset-react": ^7.12.13
     "@babel/preset-typescript": ^7.24.7
+    "@codemirror/lang-json": ^6.0.1
     "@codemirror/lang-sql": ^6.6.5
     "@date-io/core": ^3.0.0
     "@date-io/date-fns": 3.x
@@ -14248,14 +14181,17 @@ __metadata:
     "@simonwep/pickr": ^1.5.1
     "@svgr/webpack": ^8.1.0
     "@szhsin/react-menu": ^2.2.0
+    "@tanstack/react-query": 5.37.1
     "@tanstack/react-table": ^8.16.0
     "@tanstack/react-virtual": ^3.4.0
-    "@testing-library/jest-dom": ^6.1.2
-    "@testing-library/react": 12
-    "@testing-library/user-event": ^14.4.3
+    "@testing-library/dom": 10.2.0
+    "@testing-library/jest-dom": ^6.4.6
+    "@testing-library/react": 16.0.0
+    "@testing-library/user-event": ^14.5.2
+    "@types/classnames": ^2.2.6
     "@types/jest": ^29.5.4
-    "@types/react": ^17.0.80
-    "@types/react-dom": ^17.0.25
+    "@types/react": ^18.0.2
+    "@types/react-dom": ^18.0.0
     "@typescript-eslint/eslint-plugin": ^7.12.0
     "@typescript-eslint/parser": ^7.12.0
     ajv: ^8.8.2
@@ -14322,14 +14258,14 @@ __metadata:
     prop-types: ^15.7.2
     raf: ^3.4.1
     rc-dock: ^3.2.9
-    react: ^17.0.1
+    react: ^18.2.0
     react-arborist: ^3.2.0
     react-aspen: ^1.1.0
     react-checkbox-tree: ^1.7.2
     react-data-grid: "https://github.com/pgadmin-org/react-data-grid.git#200d2f5e02de694e3e9ffbe177c279bc40240fb8"
     react-dnd: ^16.0.1
     react-dnd-html5-backend: ^16.0.1
-    react-dom: ^17.0.1
+    react-dom: ^18.2.0
     react-draggable: ^4.4.6
     react-dropzone: ^14.2.1
     react-frame-component: ^5.2.6
@@ -14440,13 +14376,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: 3e82d1f419e240ef6219d794ff29c7ee415fbdc19e038f680a10c067108e06284f1847450a210b29bbaf97b9d8a97ced5f624c31c681248ac84c80d56ad5a2c4
   languageName: node
   linkType: hard
 
@@ -14801,17 +14736,17 @@ __metadata:
   linkType: hard
 
 "socks-proxy-agent@npm:^8.0.3":
-  version: 8.0.3
-  resolution: "socks-proxy-agent@npm:8.0.3"
+  version: 8.0.4
+  resolution: "socks-proxy-agent@npm:8.0.4"
   dependencies:
     agent-base: ^7.1.1
     debug: ^4.3.4
-    socks: ^2.7.1
-  checksum: 8fab38821c327c190c28f1658087bc520eb065d55bc07b4a0fdf8d1e0e7ad5d115abbb22a95f94f944723ea969dd771ad6416b1e3cde9060c4c71f705c8b85c5
+    socks: ^2.8.3
+  checksum: b2ec5051d85fe49072f9a250c427e0e9571fd09d5db133819192d078fd291276e1f0f50f6dbc04329b207738b1071314cee8bdbb4b12e27de42dbcf1d4233c67
   languageName: node
   linkType: hard
 
-"socks@npm:^2.6.2, socks@npm:^2.7.1":
+"socks@npm:^2.6.2, socks@npm:^2.8.3":
   version: 2.8.3
   resolution: "socks@npm:2.8.3"
   dependencies:
@@ -15005,15 +14940,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: ^1.0.4
-  checksum: d04173690b2efa40e24ab70e5e51a3ff31d56d699550cfad084104ab3381390daccb36652b25755e420245f3b0737de66c1879eaa2a8d4fc0a78f9bf892fcb42
-  languageName: node
-  linkType: hard
-
 "stream-browserify@npm:^3.0.0":
   version: 3.0.0
   resolution: "stream-browserify@npm:3.0.0"
@@ -15948,22 +15874,22 @@ __metadata:
   linkType: hard
 
 "typescript@npm:^5.4.5":
-  version: 5.5.2
-  resolution: "typescript@npm:5.5.2"
+  version: 5.5.3
+  resolution: "typescript@npm:5.5.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 9c5a7982dadcb2d38d129c575dd38645ae11588ae0d4a12852fb04482bbc5a1660b2371e48fd5b33b6b605cc57cefe777670054546856945a05e77bd22c8c2cd
+  checksum: 4b4f14313484d5c86064d04ba892544801fa551f5cf72719b540b498056fec7fc192d0bbdb2ba1448e759b1548769956da9e43e7c16781e8d8856787b0575004
   languageName: node
   linkType: hard
 
 "typescript@patch:typescript@^5.4.5#~builtin<compat/typescript>":
-  version: 5.5.2
-  resolution: "typescript@patch:typescript@npm%3A5.5.2#~builtin<compat/typescript>::version=5.5.2&hash=379a07"
+  version: 5.5.3
+  resolution: "typescript@patch:typescript@npm%3A5.5.3#~builtin<compat/typescript>::version=5.5.3&hash=379a07"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: d8c8af1adb92ef36998cc9293ad8607dda68564ecc2f315a7298d6d40edae1906e0ed88e0b2b02da686adc61d638cbecb82b4c694d5bccc621b8baf6e6274f7c
+  checksum: 3c0f7fe66e0e3a5f6b531b3e20bfe4a846718d20c299a49f39d4594e0bedcf5820cb98b49a9c883f2dde7dc6942affa2c95a775ee0221ca1ef143147761b0e80
   languageName: node
   linkType: hard
 
@@ -16125,8 +16051,8 @@ __metadata:
   linkType: hard
 
 "update-browserslist-db@npm:^1.0.16":
-  version: 1.0.16
-  resolution: "update-browserslist-db@npm:1.0.16"
+  version: 1.1.0
+  resolution: "update-browserslist-db@npm:1.1.0"
   dependencies:
     escalade: ^3.1.2
     picocolors: ^1.0.1
@@ -16134,7 +16060,7 @@ __metadata:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 51b1f7189c9ea5925c80154b0a6fd3ec36106d07858d8f69826427d8edb4735d1801512c69eade38ba0814d7407d11f400d74440bbf3da0309f3d788017f35b2
+  checksum: 7b74694d96f0c360f01b702e72353dc5a49df4fe6663d3ee4e5c628f061576cddf56af35a3a886238c01dd3d8f231b7a86a8ceaa31e7a9220ae31c1c1238e562
   languageName: node
   linkType: hard
 
@@ -16602,7 +16528,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2, which-typed-array@npm:^1.1.9":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies:
@@ -16913,9 +16839,9 @@ __metadata:
   linkType: hard
 
 "yocto-queue@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "yocto-queue@npm:1.0.0"
-  checksum: 2cac84540f65c64ccc1683c267edce396b26b1e931aa429660aefac8fbe0188167b7aee815a3c22fa59a28a58d898d1a2b1825048f834d8d629f4c2a5d443801
+  version: 1.1.1
+  resolution: "yocto-queue@npm:1.1.1"
+  checksum: f2e05b767ed3141e6372a80af9caa4715d60969227f38b1a4370d60bffe153c9c5b33a862905609afc9b375ec57cd40999810d20e5e10229a204e8bde7ef255c
   languageName: node
   linkType: hard