diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.js b/frontend/app/components/Session_/EventsBlock/EventsBlock.js
index e690ce3cc..cc6867fb9 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.js
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.js
@@ -52,8 +52,9 @@ export default class EventsBlock extends React.PureComponent {
     const { filter } = this.state;
     this.setState({ query: '' })
     this.props.setEventFilter({ query: '', filter })
-
-    this.scroller.current.forceUpdateGrid();
+    if (this.scroller.current) {
+      this.scroller.current.forceUpdateGrid();
+    }
 
     setTimeout(() => {
       if (!this.scroller.current) return;
diff --git a/frontend/app/initialize.js b/frontend/app/initialize.js
index df7909916..3ca4972ac 100644
--- a/frontend/app/initialize.js
+++ b/frontend/app/initialize.js
@@ -1,25 +1,25 @@
 import './styles/index.scss';
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 import './init';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import store from './store';
 import Router from './Router';
-import { StoreProvider, RootStore  } from './mstore';
+import { StoreProvider, RootStore } from './mstore';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { DndProvider } from 'react-dnd';
 
 document.addEventListener('DOMContentLoaded', () => {
-  render(
-    (
-      <Provider store={ store }>
-        <StoreProvider store={new RootStore()}>
-          <DndProvider backend={HTML5Backend}>
-              <Router />
-          </DndProvider>
-        </StoreProvider>
-      </Provider>
-    ),
-    document.getElementById('app'),
-  );
+    const container = document.getElementById('app');
+    const root = createRoot(container);
+    root.render(
+        <Provider store={store}>
+            <StoreProvider store={new RootStore()}>
+                <DndProvider backend={HTML5Backend}>
+                    <Router />
+                </DndProvider>
+            </StoreProvider>
+        </Provider>
+    );
 });
diff --git a/frontend/package.json b/frontend/package.json
index 8fb7f651f..d82ada89d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,6 +29,7 @@
     "jsbi": "^4.1.0",
     "jshint": "^2.11.1",
     "jspdf": "^2.5.1",
+    "jsx-runtime": "^1.2.0",
     "luxon": "^1.24.1",
     "mobx": "^6.3.8",
     "mobx-react-lite": "^3.1.6",
@@ -36,14 +37,14 @@
     "moment-range": "^3.0.3",
     "peerjs": "1.3.2",
     "rc-time-picker": "^3.7.3",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-confirm": "^0.1.27",
     "react-date-range": "^1.4.0",
     "react-daterange-picker": "^2.0.1",
-    "react-dnd": "^15.1.1",
+    "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^15.1.2",
-    "react-dom": "^16.13.1",
+    "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-google-recaptcha": "^1.1.0",
     "react-highlight": "^0.14.0",
diff --git a/frontend/path-alias.js b/frontend/path-alias.js
index 4dd1117e0..630e3868c 100644
--- a/frontend/path-alias.js
+++ b/frontend/path-alias.js
@@ -1,23 +1,25 @@
 const path = require('path');
 
 module.exports = {
-  "@": path.resolve(__dirname, "app"),
-  "App": path.resolve(__dirname, "app"),
-  "App/*": path.resolve(__dirname, "app/*"),
-  "SVG": path.resolve(__dirname, "app/svg"),
-  "SVG/*": path.resolve(__dirname, "app/svg/*"),
-  "Components": path.resolve(__dirname, "app/components"),
-  "Components/*": path.resolve(__dirname, "app/components/*"),
-  "Types": path.resolve(__dirname, "app/types" ),
-  "Types/*": path.resolve(__dirname, "app/types/*"),
-  "UI": path.resolve(__dirname, "app/components/ui"),
-  "UI/*": path.resolve(__dirname, "app/components/ui/*"),
-  "Duck": path.resolve(__dirname, "app/duck"),
-  "Duck/*": path.resolve(__dirname, "app/duck/*"),
-  "HOCs": path.resolve(__dirname, "app/components/hocs"),
-  "HOCs/*": path.resolve(__dirname, "app/components/hocs/*"),
-  "Shared": path.resolve(__dirname, "app/components/shared"),
-  "Shared/*": path.resolve(__dirname, "app/components/shared/*"),
-  "Player": path.resolve(__dirname, "app/player"),
-  "Player/*": path.resolve(__dirname, "app/player/*"),
-}; 
+    '@': path.resolve(__dirname, 'app'),
+    App: path.resolve(__dirname, 'app'),
+    'App/*': path.resolve(__dirname, 'app/*'),
+    SVG: path.resolve(__dirname, 'app/svg'),
+    'SVG/*': path.resolve(__dirname, 'app/svg/*'),
+    Components: path.resolve(__dirname, 'app/components'),
+    'Components/*': path.resolve(__dirname, 'app/components/*'),
+    Types: path.resolve(__dirname, 'app/types'),
+    'Types/*': path.resolve(__dirname, 'app/types/*'),
+    UI: path.resolve(__dirname, 'app/components/ui'),
+    'UI/*': path.resolve(__dirname, 'app/components/ui/*'),
+    Duck: path.resolve(__dirname, 'app/duck'),
+    'Duck/*': path.resolve(__dirname, 'app/duck/*'),
+    HOCs: path.resolve(__dirname, 'app/components/hocs'),
+    'HOCs/*': path.resolve(__dirname, 'app/components/hocs/*'),
+    Shared: path.resolve(__dirname, 'app/components/shared'),
+    'Shared/*': path.resolve(__dirname, 'app/components/shared/*'),
+    Player: path.resolve(__dirname, 'app/player'),
+    'Player/*': path.resolve(__dirname, 'app/player/*'),
+    'react/jsx-runtime.js': 'react/jsx-runtime',
+    'react/jsx-dev-runtime.js': 'react/jsx-dev-runtime',
+};