Upgrade to Node.js 24, update dependencies, migrate configs to ES modules, replace ts-node with tsx, upgrade React/Material-UI, and update GitHub Actions (#940)

## Update Dependencies, Node.js 24, and Migrate to ES Modules This PR updates the project dependencies, Node.js version, workflows, and migrates from CommonJS to ES modules. ### Checklist #### Phase 1: Assessment and Configuration - [x] Assess current project structure and dependencies - [x] Update Node.js version requirements (>=24 for builds, >=20 for runtime) - [x] Update GitHub workflow files to use Node 24 - [x] Update Dockerfile to use Node 24 #### Phase 2: TypeScript Configuration for ES Modules - [x] Update root tsconfig.json to use ES2020 target with CommonJS modules - [x] Update backend/tsconfig.json to use ES2020 target with CommonJS modules - [x] Update app/tsconfig.json to use ES2020 target with ESNext modules #### Phase 3: Update Dependencies - [x] Update root package.json dependencies to latest compatible versions - [x] Update app/package.json dependencies to latest compatible versions - [x] Update backend/package.json dependencies to latest compatible versions - [x] Run yarn install to update lockfile #### Phase 4: Convert CommonJS to ES Modules - [x] Convert webpack config files to ES modules (.js → .mjs) - [x] Convert prettier.config.js to ES modules - [x] Update TypeScript files with CommonJS require() to use ES imports - [x] Fix breaking changes from dependency API updates #### Phase 5: Replace ts-node with tsx - [x] Replace ts-node with tsx in all package.json scripts - [x] Update root package.json to use tsx for prepare-release and package scripts - [x] Update backend package.json to use tsx with mocha - [x] Update app package.json to use tsx with mocha - [x] Update script shebangs to use tsx - [x] Add tsx to devDependencies, remove ts-node #### Phase 6: Upgrade React and Material-UI - [x] Upgrade React from 16.14.0 to 18.3.1 - [x] Upgrade React-DOM from 16.14.0 to 18.3.1 - [x] Migrate from @material-ui (v4) to @mui/material (v5) - [x] Add @emotion/react and @emotion/styled (required for MUI v5) - [x] Update all import paths from @material-ui/* to @mui/* - [x] Update theme creation from createMuiTheme to createTheme - [x] Update palette.type to palette.mode - [x] Update ReactDOM.render to ReactDOM.createRoot (React 18) - [x] Update ThemeProvider import to use @mui/material/styles - [x] Add @mui/styles for withStyles compatibility - [x] Separate Theme and withStyles imports correctly - [x] Replace fade with alpha in theme styles - [x] Replace ExpansionPanel with Accordion - [x] Fix all component imports from wrong modules - [x] Replace withTheme HOC with useTheme hook - [x] Replace theme.palette.text.hint with theme.palette.text.secondary - [x] Update all Redux reducers for Redux v5 compatibility #### Phase 7: Fix All TypeScript Errors - [x] Fix Dialog disableBackdropClick removal (use onClose handler) - [x] Fix Button classes.label removal (use sx prop) - [x] Fix Select onChange signature (MUI v5 API change) - [x] Fix Snackbar onClose signature (MUI v5 API change) - [x] Fix ClickAwayListener onClickAway signature (MUI v5 API change) - [x] Fix ReactResizeDetector (migrate to useResizeDetector hook) - [x] Fix Redux connect + withStyles type compatibility (use type assertions) - [x] Fix all connected component prop type errors - [x] Add children prop to ErrorBoundary - [x] Add parameter types to callbacks #### Phase 8: Build and Test - [x] Run yarn build - ✅ **SUCCESSFUL with 0 errors, 1 minor warning** - [x] Run yarn test - ✅ **All 27 tests passing (5 app + 22 backend)** #### Phase 9: Update All GitHub Actions - [x] Update Node.js to 24 in copilot-setup.yml workflow - [x] Update Node.js to 24 in update-website.yml workflow - [x] Update docker/build-push-action from v5 to v6 - [x] Replace deprecated tibdex/github-app-token@v2 with actions/create-github-app-token@v1 - [x] All other actions already at latest versions (v4 for GitHub actions, v3 for Docker actions) #### Phase 10: Final Validation - [x] All TypeScript compilation errors fixed - [x] All tests passing - [x] Build completes successfully - [x] Clarified Node.js engine requirements per use case - [x] All GitHub Actions updated to latest versions ### Node.js Version Requirements This project has different Node.js requirements depending on the use case: #### Building the Electron App (Root package.json) - **Required:** Node.js >= 24 - **Why:** Build tools like @electron/notarize and semantic-release require Node.js 24+ - **Affected files:** `/package.json` #### Running the Backend/Server (Backend package.json) - **Required:** Node.js >= 20 - **Why:** The MQTT server runtime is compatible with Node.js 20+ - **Affected files:** `/backend/package.json` #### Frontend App (App package.json) - **Required:** Node.js >= 20 - **Why:** React and webpack tools are compatible with Node.js 20+ - **Affected files:** `/app/package.json` ### Summary of All Changes **Major Dependency Updates:** - TypeScript: 4.5.5 → 5.9.3 - Node.js: >=24 for builds, >=20 for runtime - React: 16.14.0 → 18.3.1 - React-DOM: 16.14.0 → 18.3.1 - Redux: 4.2.1 → 5.0.1 - @material-ui/core → @mui/material 5.18.0 - @material-ui/icons → @mui/icons-material 5.18.0 - mqtt: 4.3.6 → 5.14.1 - axios: 0.28.0 → 1.13.2 - redux-thunk: 2.3.0 → 3.1.0 - electron-builder: 24.13.3 → 26.0.12 - @electron/notarize: 3.1.1 (latest) - semantic-release: 25.0.2 (latest) - react-resize-detector: migrated to useResizeDetector hook - 50+ other dependencies **GitHub Actions Updated:** - ✅ actions/checkout@v4 (latest) - ✅ actions/setup-node@v4 (latest) - Now uses Node 24 in all workflows - ✅ actions/cache@v4 (latest) - ✅ actions/upload-artifact@v4 (latest) - ✅ docker/build-push-action: v5 → **v6** (latest) - ✅ docker/login-action@v3 (latest) - ✅ docker/setup-buildx-action@v3 (latest) - ✅ cycjimmy/semantic-release-action@v4 (latest) - ✅ tibdex/github-app-token@v2 → **actions/create-github-app-token@v1** (official replacement for deprecated action) - ✅ stefanzweifel/git-auto-commit-action@v5 (latest) - ✅ hkusu/s3-upload-action@v2 (latest) **All TypeScript Errors Fixed:** - Removed disableBackdropClick from Dialog (deprecated in MUI v5) - Removed Button classes.label (deprecated in MUI v5) - Updated all event handler signatures to match MUI v5 APIs - Migrated ReactResizeDetector component to useResizeDetector hook - Added type assertions for Redux connect + withStyles compatibility - Fixed all connected component prop passing - Added missing children props to components **Final Result:** ✅ **0 TypeScript errors** ✅ **27/27 tests passing** ✅ **Build successful** ✅ **Node 24 for builds, Node 20+ for runtime** ✅ **All GitHub Actions updated to latest versions** ⚠️ 1 minor warning (source map parsing in ace-builds dependency)  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>update dependencies</issue_title> > <issue_description>- update to nodejs 24 > - update npm dependencies > - update workflows > - change from commons to esmodules</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details>  - Fixes thomasnordquist/MQTT-Explorer#939  --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey). --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com> Co-authored-by: Thomas Nordquist <thomasnordquist@users.noreply.github.com>
2025-12-21 10:20:08 +01:00
parent 578bb510f9
commit 26ed0aadd2
114 changed files with 5251 additions and 4164 deletions
--- a/.github/workflows/build-dockerfile.yml
+++ b/.github/workflows/build-dockerfile.yml
@@ -22,7 +22,7 @@ jobs:
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
        with:
          context: .
          push: true
--- a/.github/workflows/copilot-setup.yml
+++ b/.github/workflows/copilot-setup.yml
@@ -14,7 +14,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '20'
+          node-version: '24'
      
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
--- a/.github/workflows/platform-builds.yml
+++ b/.github/workflows/platform-builds.yml
@@ -28,14 +28,14 @@ jobs:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 24
      - run: npm install -g yarn
      - run: yarn
      - id: create_token # get ReleaseBot access token
-        uses: tibdex/github-app-token@v2
+        uses: actions/create-github-app-token@v1
        with:
-          app_id: ${{ secrets.RELEASE_BOT_APP_ID }}
-          private_key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
+          app-id: ${{ secrets.RELEASE_BOT_APP_ID }}
+          private-key: ${{ secrets.RELEASE_BOT_PRIVATE_KEY }}
      - name: Semantic Release
        uses: cycjimmy/semantic-release-action@v4
        id: semantic   # Need an `id` for output variables
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -101,7 +101,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
-          node-version: '20'
+          node-version: '24'
      - name: Install Dependencies
        run: yarn install --frozen-lockfile
      - name: Build Browser Mode
--- a/.github/workflows/update-website.yml
+++ b/.github/workflows/update-website.yml
@@ -11,7 +11,7 @@ jobs:
          ref: gh-pages
      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: '24'
      - run: npm install
      - run: npm run readme
      - uses: stefanzweifel/git-auto-commit-action@v5
--- a/app/package.json
+++ b/app/package.json
@@ -6,8 +6,8 @@
  "scripts": {
    "build": "webpack --mode production",
    "dev": "node_modules/.bin/webpack-dev-server --mode development --progress",
-    "test": "cross-env TS_NODE_PROJECT=test/tsconfig.json yarn mochatest",
-    "mochatest": "mocha --require ts-node/register --require source-map-support/register --recursive src/*/**/*.spec.ts"
+    "test": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts",
+    "mochatest": "mocha --require tsx --require source-map-support/register --recursive src/*/**/*.spec.ts"
  },
  "engines": {
    "node": ">=20"
@@ -15,24 +15,26 @@
  "author": "",
  "license": "CC-BY-ND-4.0",
  "dependencies": {
-    "@material-ui/core": "4.12",
-    "@material-ui/icons": "^4",
-    "@material-ui/lab": "^4.0.0-alpha",
-    "@material-ui/styles": "4.11",
-    "@types/react-transition-group": "^4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/lab": "^5.0.0-alpha.177",
+    "@mui/material": "^5.18.0",
+    "@mui/styles": "^6.4.8",
+    "@types/react-transition-group": "^4.4.11",
    "ace-builds": "^1.4.11",
-    "axios": "^0.28.0",
-    "compare-versions": "^3.5.0",
-    "copy-text-to-clipboard": "^2.1.0",
-    "d3": "^5.9.7",
-    "d3-shape": "^1.3.5",
-    "diff": "^4.0.1",
-    "dot-prop": "^5.0.0",
+    "axios": "^1.13.2",
+    "compare-versions": "^6.1.1",
+    "copy-text-to-clipboard": "^3.2.0",
+    "d3": "^7.9.0",
+    "d3-shape": "^3.2.0",
+    "diff": "^7.0.0",
+    "dot-prop": "^5.3.0",
    "events": "^3.3.0",
    "get-value": "^3.0.1",
-    "immutable": "^4.0.0-rc.12",
+    "immutable": "^4.3.7",
    "in-viewport": "^3.6.0",
-    "js-base64": "^2.5.1",
+    "js-base64": "^3.7.8",
    "json-to-ast": "^2.1.0",
    "lodash.debounce": "^4.0.8",
    "lodash.throttle": "^4.1.1",
@@ -41,55 +43,56 @@
    "os-browserify": "^0.3.0",
    "parse-duration": "^0.1.1",
    "path-browserify": "^1.0.1",
-    "prismjs": "^1.15.0",
-    "react": "^16.11",
-    "react-ace": "^8",
-    "react-dom": "^16.7.0",
-    "react-redux": "^7.0.3",
-    "react-resize-detector": "^4.1.4",
-    "react-split-pane": "^0.1.85",
-    "react-transition-group": "^4",
-    "react-vis": "^1.11.6",
-    "redux": "^4.0.1",
-    "redux-batched-actions": "0.5",
-    "redux-thunk": "^2.3.0",
+    "prismjs": "^1.29.0",
+    "react": "^18.3.1",
+    "react-ace": "^12.0.0",
+    "react-dom": "^18.3.1",
+    "react-redux": "^9.2.0",
+    "react-resize-detector": "^11.0.1",
+    "react-split-pane": "^0.1.92",
+    "react-transition-group": "^4.4.5",
+    "react-vis": "^1.12.1",
+    "redux": "^5.0.1",
+    "redux-batched-actions": "^0.5.0",
+    "redux-thunk": "^3.1.0",
    "sha1": "^1.1.1",
    "socket.io-client": "^4.8.1",
    "url": "^0.11.4",
-    "uuid": "7"
+    "uuid": "^11.0.0"
  },
  "devDependencies": {
-    "@babel/runtime": "^7.17.2",
-    "@types/d3": "^5.7.2",
-    "@types/diff": "^4.0.1",
-    "@types/get-value": "^3.0.1",
-    "@types/node": "^12.7.8",
-    "@types/prismjs": "^1.9.1",
-    "@types/react": "^16.9.4",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-redux": "^7.0.9",
-    "@types/react-resize-detector": "^4.0.1",
+    "@babel/runtime": "^7.28.4",
+    "@types/d3": "^7.4.3",
+    "@types/diff": "^7.0.0",
+    "@types/get-value": "^3.0.5",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^25.0.3",
+    "@types/prismjs": "^1.26.5",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-redux": "^7.1.34",
+    "@types/react-resize-detector": "^4.0.3",
    "@types/sha1": "^1.1.1",
    "@types/socket.io-client": "^3.0.0",
-    "@types/uuid": "^7.0.2",
-    "@types/vis": "^4.21.9",
-    "chai": "^4.2.0",
-    "cross-env": "^7.0.2",
-    "css-loader": "^3.0.0",
+    "@types/uuid": "^11.0.0",
+    "@types/vis": "^4.21.24",
+    "chai": "^4.5.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.6.3",
    "lodash": "^4.17.21",
-    "mocha": "^10.4.0",
-    "moment": "^2.29.1",
-    "node-loader": "^0.6.0",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^1",
+    "mocha": "^10.8.2",
+    "moment": "^2.30.1",
+    "node-loader": "^2.0.0",
+    "source-map-loader": "^5.0.0",
+    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
-    "typescript": "^4.5.5",
-    "webpack": "^5.91.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "typescript": "^5.9.3",
+    "webpack": "^5.98.0",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
  },
  "peerDependencies": {
    "electron": "^39"
--- a/app/src/actions/Publish.ts
+++ b/app/src/actions/Publish.ts
@@ -15,7 +15,7 @@ export const setTopic = (topic?: string): Action => {
 }

 export const openFile =
-  (encoding: 'utf8' = 'utf8') =>
+  (encoding: BufferEncoding = 'utf8') =>
  async (dispatch: Dispatch<any>, getState: () => AppState) => {
    try {
      const file = await getFileContent(encoding)
@@ -31,7 +31,7 @@ type FileParameters = {
  name: string
  data: string
 }
-async function getFileContent(encoding: string): Promise<FileParameters | undefined> {
+async function getFileContent(encoding: BufferEncoding): Promise<FileParameters | undefined> {
  const rejectReasons = {
    noFileSelected: 'No file selected',
    errorReadingFile: 'Error reading file',
--- a/app/src/actions/Tree.ts
+++ b/app/src/actions/Tree.ts
@@ -7,7 +7,7 @@ import { batchActions } from 'redux-batched-actions'
 import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
-const debounce = require('lodash.debounce')
+import debounce from 'lodash.debounce'
 export { clearTopic } from './clearTopic'

 export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'
--- a/app/src/components/App.tsx
+++ b/app/src/components/App.tsx
@@ -1,6 +1,6 @@
 import ConfirmationDialog from './ConfirmationDialog'
 import ConnectionSetup from './ConnectionSetup/ConnectionSetup'
-import CssBaseline from '@material-ui/core/CssBaseline'
+import CssBaseline from '@mui/material/CssBaseline'
 import ErrorBoundary from './ErrorBoundary'
 import Notification from './Layout/Notification'
 import React from 'react'
@@ -11,7 +11,8 @@ import { bindActionCreators } from 'redux'
 import { ConfirmationRequest } from '../reducers/Global'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 ;(window as any).global = window

 const Settings = React.lazy(() => import('./SettingsDrawer/Settings'))
--- a/app/src/components/Chart/Chart.tsx
+++ b/app/src/components/Chart/Chart.tsx
@@ -1,14 +1,13 @@
 import DateFormatter from '../helper/DateFormatter'
 import NoData from './NoData'
 import NumberFormatter from '../helper/NumberFormatter'
-import React, { memo, useCallback } from 'react'
+import React, { memo, useCallback, useRef, useEffect } from 'react'
 import TooltipComponent from './TooltipComponent'
-import { default as ReactResizeDetector } from 'react-resize-detector'
-import { emphasize } from '@material-ui/core/styles'
+import { useResizeDetector } from 'react-resize-detector'
+import { emphasize, useTheme } from '@mui/material/styles'
 import { mapCurveType } from './mapCurveType'
 import { PlotCurveTypes } from '../../reducers/Charts'
 import { Point, Tooltip } from './Model'
-import { Theme, withTheme } from '@material-ui/core'
 import { useCustomXDomain } from './effects/useCustomXDomain'
 import { useCustomYDomain } from './effects/useCustomYDomain'
 import 'react-vis/dist/style.css'
@@ -17,18 +16,16 @@ const abbreviate = require('number-abbreviate')

 export interface Props {
  data: Array<{ x: number; y: number }>
-  theme: Theme
  interpolation?: PlotCurveTypes
  range?: [number?, number?]
  timeRangeStart?: number
  color?: string
 }

-export default withTheme(
-  memo((props: Props) => {
-    const [width, setWidth] = React.useState(300)
+export default memo((props: Props) => {
+  const theme = useTheme()
  const [tooltip, setTooltip] = React.useState<Tooltip | undefined>()
-    const detectResize = React.useCallback(newWidth => setWidth(newWidth), [])
+  const { width = 300, ref } = useResizeDetector()

  const hintFormatter = React.useCallback(
    (point: any) => [
@@ -51,7 +48,7 @@ export default withTheme(
  }, [])

  const paletteColor =
-      props.theme.palette.type === 'light' ? props.theme.palette.secondary.dark : props.theme.palette.primary.light
+    theme.palette.mode === 'light' ? theme.palette.secondary.dark : theme.palette.primary.light
  const color = props.color ? props.color : paletteColor

  const highlightSelectedPoint = useCallback(
@@ -73,10 +70,10 @@ export default withTheme(
  const dummyData = [{ x: -2, y: -2 }]
  return (
    <div>
-        <div style={{ height: '150px', width: '100%', position: 'relative' }}>
+      <div ref={ref} style={{ height: '150px', width: '100%', position: 'relative' }}>
        {data.length === 0 ? <NoData /> : null}
        <XYPlot
-            width={width}
+          width={width || 300}
          height={180}
          yDomain={hasData ? yDomain : dummyDomain}
          xDomain={hasData ? xDomain : dummyDomain}
@@ -94,12 +91,10 @@ export default withTheme(
            curve={mapCurveType(props.interpolation)}
          />
          <Hint value={{ x: 0, y: 0 }} style={{ pointerEvents: 'none' }}>
-              <TooltipComponent tooltip={tooltip} theme={props.theme} />
+            <TooltipComponent tooltip={tooltip} />
          </Hint>
        </XYPlot>
-          <ReactResizeDetector handleWidth={true} onResize={detectResize} />
      </div>
    </div>
  )
 })
-)
--- a/app/src/components/Chart/NoData.tsx
+++ b/app/src/components/Chart/NoData.tsx
@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'

 function NoData() {
  return (
--- a/app/src/components/Chart/TooltipComponent.tsx
+++ b/app/src/components/Chart/TooltipComponent.tsx
@@ -1,9 +1,10 @@
 import React, { memo } from 'react'
-import { fade } from '@material-ui/core/styles'
-import { Fade, Grow, Paper, Popper, Theme, Typography, withTheme } from '@material-ui/core'
+import { alpha as fade } from '@mui/material/styles'
+import { Fade, Grow, Paper, Popper, Typography, useTheme } from '@mui/material'
 import { Tooltip } from './Model'

-function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
+function TooltipComponent(props: { tooltip?: Tooltip }) {
+  const theme = useTheme()
  const { tooltip } = props
  return (
    <Popper
@@ -26,9 +27,9 @@ function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
                padding: '4px',
                marginTop: '-12px',
                backgroundColor: fade(
-                  props.theme.palette.type === 'light'
-                    ? props.theme.palette.background.paper
-                    : props.theme.palette.background.default,
+                  theme.palette.mode === 'light'
+                    ? theme.palette.background.paper
+                    : theme.palette.background.default,
                  0.7
                ),
              }}
@@ -56,4 +57,4 @@ function TooltipComponent(props: { tooltip?: Tooltip; theme: Theme }) {
  )
 }

-export default withTheme(memo(TooltipComponent))
+export default memo(TooltipComponent)
--- a/app/src/components/ChartPanel/ChartActions.tsx
+++ b/app/src/components/ChartPanel/ChartActions.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react'
-import Play from '@material-ui/icons/PlayArrow'
-import Pause from '@material-ui/icons/PauseCircleFilled'
-import Clear from '@material-ui/icons/Clear'
+import Play from '@mui/icons-material/PlayArrow'
+import Pause from '@mui/icons-material/PauseCircleFilled'
+import Clear from '@mui/icons-material/Clear'
 import CustomIconButton from '../helper/CustomIconButton'
 import { ChartParameters } from '../../reducers/Charts'
 import { SettingsButton } from './ChartSettings/SettingsButton'
--- a/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/ColorSettings.tsx
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Menu, MenuItem } from '@material-ui/core'
+import { Menu, MenuItem } from '@mui/material'
 import { colors as createColors } from './colors'

 function chartParametersForColor(chart: ChartParameters, color?: string) {
--- a/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/InterpolationSettings.tsx
@@ -4,7 +4,7 @@ import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters, PlotCurveTypes } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Menu, MenuItem, Typography } from '@material-ui/core'
+import { Menu, MenuItem, Typography } from '@mui/material'

 function chartParametersForAction(chart: ChartParameters, action: string) {
  return {
--- a/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/MoveUp.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
-import ArrowUpward from '@material-ui/icons/ArrowUpward'
+import ArrowUpward from '@mui/icons-material/ArrowUpward'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
-import { MenuItem, Typography, ListItemIcon } from '@material-ui/core'
+import { MenuItem, Typography, ListItemIcon } from '@mui/material'

 function MoveUp(props: { actions: { chart: typeof chartActions }; chart: ChartParameters; close: () => void }) {
  const moveUp = React.useCallback(() => {
--- a/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, TextField, Typography } from '@material-ui/core'
+import { Menu, TextField, Typography } from '@mui/material'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
--- a/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/SettingsButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ChartSettings from '.'
 import CustomIconButton from '../../helper/CustomIconButton'
-import MoreVertIcon from '@material-ui/icons/Settings'
+import MoreVertIcon from '@mui/icons-material/Settings'
 import { ChartParameters } from '../../../reducers/Charts'

 export function SettingsButton(props: {
--- a/app/src/components/ChartPanel/ChartSettings/Size.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/Size.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { Menu, MenuItem, TextField, Typography } from '@mui/material'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
--- a/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/TimeRangeSettings.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { bindActionCreators } from 'redux'
-import { Button, Menu, TextField, Typography } from '@material-ui/core'
+import { Button, Menu, TextField, Typography } from '@mui/material'
 import { chartActions } from '../../../actions'
 import { ChartParameters } from '../../../reducers/Charts'
 import { connect } from 'react-redux'
--- a/app/src/components/ChartPanel/ChartSettings/colors.ts
+++ b/app/src/components/ChartPanel/ChartSettings/colors.ts
@@ -12,7 +12,7 @@ import {
  yellow,
  brown,
  blueGrey,
-} from '@material-ui/core/colors'
+} from '@mui/material/colors'

 export function colors() {
  function colorToInt(color: string): [number, number, number] {
--- a/app/src/components/ChartPanel/ChartSettings/index.tsx
+++ b/app/src/components/ChartPanel/ChartSettings/index.tsx
@@ -1,17 +1,17 @@
-import BarChart from '@material-ui/icons/BarChart'
-import Clear from '@material-ui/icons/Refresh'
-import ColorLens from '@material-ui/icons/ColorLens'
+import BarChart from '@mui/icons-material/BarChart'
+import Clear from '@mui/icons-material/Refresh'
+import ColorLens from '@mui/icons-material/ColorLens'
 import ColorSettings from './ColorSettings'
 import InterpolationSettings from './InterpolationSettings'
 import MoveUp from './MoveUp'
-import MultilineChart from '@material-ui/icons/MultilineChart'
+import MultilineChart from '@mui/icons-material/MultilineChart'
 import RangeSettings from './RangeSettings'
 import React, { memo } from 'react'
 import Size from './Size'
-import Sort from '@material-ui/icons/Sort'
+import Sort from '@mui/icons-material/Sort'
 import TimeRangeSettings from './TimeRangeSettings'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, ListItemIcon, Typography } from '@material-ui/core'
+import { Menu, MenuItem, ListItemIcon, Typography } from '@mui/material'

 function ChartSettings(props: {
  open: boolean
--- a/app/src/components/ChartPanel/ChartTitle.tsx
+++ b/app/src/components/ChartPanel/ChartTitle.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { ChartParameters } from '../../reducers/Charts'
-import { Typography, Theme, withStyles } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'

 function ChartTitle(props: { parameters: ChartParameters; classes: any }) {
  const { classes, parameters } = props
--- a/app/src/components/ChartPanel/TopicChart.tsx
+++ b/app/src/components/ChartPanel/TopicChart.tsx
@@ -7,7 +7,7 @@ import { ChartActions } from './ChartActions'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
-import { Paper } from '@material-ui/core'
+import { Paper } from '@mui/material'
 const throttle = require('lodash.throttle')

 class ClearableMessageBuffer extends q.RingBuffer<q.Message> {
--- a/app/src/components/ChartPanel/index.tsx
+++ b/app/src/components/ChartPanel/index.tsx
@@ -1,13 +1,15 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../actions'
 import { ChartParameters } from '../../reducers/Charts'
 import { ChartWithTreeNode } from './ChartWithTreeNode'
 import { connect } from 'react-redux'
-import { Grid, Theme, Typography, withStyles } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { List } from 'immutable'
 const { TransitionGroup, CSSTransition } = require('react-transition-group/esm')

@@ -126,4 +128,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ChartPanel) as any)
--- a/app/src/components/ConfirmationDialog.tsx
+++ b/app/src/components/ConfirmationDialog.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, memo } from 'react'
 import { ConfirmationRequest } from '../reducers/Global'
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material'
 import { KeyCodes } from '../utils/KeyCodes'

 function ConfirmationDialog(props: { confirmationRequests: Array<ConfirmationRequest> }) {
--- a/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx
@@ -1,17 +1,19 @@
 import * as React from 'react'
 import { useState, useCallback, memo } from 'react'
-import Add from '@material-ui/icons/Add'
-import Lock from '@material-ui/icons/Lock'
-import Undo from '@material-ui/icons/Undo'
+import Add from '@mui/icons-material/Add'
+import Lock from '@mui/icons-material/Lock'
+import Undo from '@mui/icons-material/Undo'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Button, Grid, TextField, Tooltip } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Button, Grid, TextField, Tooltip } from '@mui/material'
 import { QosSelect } from '../QosSelect'
 import { QoS } from '../../../../backend/src/DataSource/MqttSource'
 import Subscriptions from './Subscriptions'
+const SubscriptionsAny = Subscriptions as any

 interface Props {
  connection: ConnectionOptions
@@ -68,7 +70,7 @@ const ConnectionSettings = memo(function ConnectionSettings(props: Props) {
            </Button>
          </Grid>
          <Grid item={true} xs={12} style={{ padding: 0 }}>
-            <Subscriptions connection={props.connection} />
+            <SubscriptionsAny connection={props.connection} />
          </Grid>
          <Grid item={true} xs={7} className={classes.gridPadding}>
            <TextField
@@ -129,4 +131,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
--- a/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx
+++ b/app/src/components/ConnectionSetup/BrowserCertificateFileSelection.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@material-ui/icons/Lock'
+import Lock from '@mui/icons-material/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { Button, Theme, Tooltip, Typography } from '@mui/material'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import { rendererRpc } from '../../../../events'
 import { RpcEvents } from '../../../../events/EventsV2'

@@ -129,7 +129,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
    whiteSpace: 'nowrap' as 'nowrap',
    textOverflow: 'ellipsis' as 'ellipsis',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
  },
  button: {
    marginTop: theme.spacing(3),
@@ -137,4 +137,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(BrowserCertificateFileSelection) as any)
--- a/app/src/components/ConnectionSetup/CertificateFileSelection.tsx
+++ b/app/src/components/ConnectionSetup/CertificateFileSelection.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Lock from '@material-ui/icons/Lock'
+import Lock from '@mui/icons-material/Lock'
 import { bindActionCreators } from 'redux'
-import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { Button, Theme, Tooltip, Typography } from '@mui/material'
 import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
 import { CertificateTypes } from '../../actions/ConnectionManager'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'

 function CertificateFileSelection(props: {
  certificateType: CertificateTypes
@@ -71,7 +71,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
    whiteSpace: 'nowrap' as 'nowrap',
    textOverflow: 'ellipsis' as 'ellipsis',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
  },
  button: {
    marginTop: theme.spacing(3),
@@ -79,4 +79,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(CertificateFileSelection) as any)
--- a/app/src/components/ConnectionSetup/Certificates.tsx
+++ b/app/src/components/ConnectionSetup/Certificates.tsx
@@ -1,18 +1,19 @@
 import * as React from 'react'
 import CertificateFileSelection from './CertificateFileSelection'
 import BrowserCertificateFileSelection from './BrowserCertificateFileSelection'
-import Undo from '@material-ui/icons/Undo'
+import Undo from '@mui/icons-material/Undo'
 import { bindActionCreators } from 'redux'
-import { Button, Grid } from '@material-ui/core'
+import { Button, Grid } from '@mui/material'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 // Check if we're in browser mode
 const isBrowserMode =
  typeof window !== 'undefined' && (typeof process === 'undefined' || process.env?.BROWSER_MODE === 'true')
-const CertSelector = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection
+const CertSelector: any = isBrowserMode ? BrowserCertificateFileSelection : CertificateFileSelection

 interface Props {
  connection: ConnectionOptions
@@ -110,4 +111,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Certificates) as any)
--- a/app/src/components/ConnectionSetup/ConnectButton.tsx
+++ b/app/src/components/ConnectionSetup/ConnectButton.tsx
@@ -1,7 +1,7 @@
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import PowerSettingsNew from '@mui/icons-material/PowerSettingsNew'
 import React from 'react'
-import { Button } from '@material-ui/core'
+import { Button } from '@mui/material'

 function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) {
  const { classes, toggle, connecting } = props
--- a/app/src/components/ConnectionSetup/ConnectionSettings.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSettings.tsx
@@ -1,17 +1,18 @@
 import ConnectButton from './ConnectButton'
 import React, { useCallback, useState } from 'react'
-import Save from '@material-ui/icons/Save'
-import Delete from '@material-ui/icons/Delete'
-import Settings from '@material-ui/icons/Settings'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
+import Save from '@mui/icons-material/Save'
+import Delete from '@mui/icons-material/Delete'
+import Settings from '@mui/icons-material/Settings'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
 import { KeyCodes } from '../../utils/KeyCodes'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { ToggleSwitch } from './ToggleSwitch'
 import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import {
@@ -24,7 +25,7 @@ import {
  InputLabel,
  MenuItem,
  TextField,
-} from '@material-ui/core'
+} from '@mui/material'

 interface Props {
  connection: ConnectionOptions
@@ -285,4 +286,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings) as any)
--- a/app/src/components/ConnectionSetup/ConnectionSetup.tsx
+++ b/app/src/components/ConnectionSetup/ConnectionSetup.tsx
@@ -1,15 +1,19 @@
 import * as React from 'react'
 import ConnectionSettings from './ConnectionSettings'
+const ConnectionSettingsAny = ConnectionSettings as any
 import ProfileList from './ProfileList'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Modal, Paper, Toolbar, Typography, Collapse } from '@mui/material'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+const AdvancedConnectionSettingsAny = AdvancedConnectionSettings as any
 import Certificates from './Certificates'
+const CertificatesAny = Certificates as any

 interface Props {
  actions: any
@@ -34,13 +38,13 @@ class ConnectionSetup extends React.PureComponent<Props, {}> {
    return (
      <div>
        <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
-          <ConnectionSettings connection={connection} />
+          <ConnectionSettingsAny connection={connection} />
        </Collapse>
        <Collapse in={showAdvancedSettings && !showCertificateSettings}>
-          <AdvancedConnectionSettings connection={connection} />
+          <AdvancedConnectionSettingsAny connection={connection} />
        </Collapse>
        <Collapse in={showCertificateSettings}>
-          <Certificates connection={connection} />
+          <CertificatesAny connection={connection} />
        </Collapse>
      </div>
    )
@@ -111,7 +115,7 @@ const styles = (theme: Theme) => ({
    textOverflow: 'ellipsis' as 'ellipsis',
    whiteSpace: 'nowrap' as 'nowrap',
    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    fontSize: '0.9em',
    marginLeft: theme.spacing(4),
  },
@@ -134,4 +138,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup) as any)
--- a/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList/AddButton.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react'
-import Add from '@material-ui/icons/Add'
-import { Fab } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import Add from '@mui/icons-material/Add'
+import { Fab } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  addButton: {
--- a/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
-import { ListItem, Typography } from '@material-ui/core'
+import { ListItem, Typography } from '@mui/material'
 import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { connectionActions, connectionManagerActions } from '../../../actions'

@@ -62,9 +63,9 @@ export const connectionItemStyle = (theme: Theme) => ({
    textOverflow: 'ellipsis' as 'ellipsis',
    whiteSpace: 'nowrap' as 'nowrap',
    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    fontSize: '0.7em',
  },
 })

-export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem))
+export default connect(null, mapDispatchToProps)(withStyles(connectionItemStyle)(ConnectionItem) as any)
--- a/app/src/components/ConnectionSetup/ProfileList/index.tsx
+++ b/app/src/components/ConnectionSetup/ProfileList/index.tsx
@@ -1,4 +1,5 @@
 import ConnectionItem from './ConnectionItem'
+const ConnectionItemAny = ConnectionItem as any
 import React from 'react'
 import { AddButton } from './AddButton'
 import { AppState } from '../../../reducers'
@@ -7,8 +8,9 @@ import { connect } from 'react-redux'
 import { connectionManagerActions } from '../../../actions'
 import { ConnectionOptions } from '../../../model/ConnectionOptions'
 import { KeyCodes } from '../../../utils/KeyCodes'
-import { List } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { List } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'

 interface Props {
@@ -49,7 +51,7 @@ function ProfileList(props: Props) {
    <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
      <div className={classes.list}>
        {Object.values(connections).map(connection => (
-          <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
+          <ConnectionItemAny connection={connection} key={connection.id} selected={selected === connection.id} />
        ))}
      </div>
    </List>
@@ -77,4 +79,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ProfileList) as any)
--- a/app/src/components/ConnectionSetup/Subscriptions.tsx
+++ b/app/src/components/ConnectionSetup/Subscriptions.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import { connectionManagerActions } from '../../actions'
 import { ConnectionOptions } from '../../model/ConnectionOptions'
 import {
@@ -12,9 +12,9 @@ import {
  TableBody,
  Paper,
  Theme,
-} from '@material-ui/core'
+} from '@mui/material'
 import { bindActionCreators } from 'redux'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'
 import { connect } from 'react-redux'

 function Subscriptions(props: {
@@ -87,4 +87,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions))
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(Subscriptions) as any)
--- a/app/src/components/ConnectionSetup/ToggleSwitch.tsx
+++ b/app/src/components/ConnectionSetup/ToggleSwitch.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { FormControlLabel, Switch } from '@material-ui/core'
+import { FormControlLabel, Switch } from '@mui/material'

 export function ToggleSwitch(props: { value: boolean; classes: any; toggle: () => void; label: string }) {
  const { classes, value, toggle, label } = props
--- a/app/src/components/Demo/Key.tsx
+++ b/app/src/components/Demo/Key.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface Props {
  keyboardKey: string
--- a/app/src/components/Demo/Mouse.tsx
+++ b/app/src/components/Demo/Mouse.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 const cursor = require('./cursor.png')

 interface State {
@@ -74,7 +75,7 @@ const style = (theme: Theme) => ({
    height: '32px',
    position: 'fixed' as 'fixed',
    zIndex: 1000000,
-    filter: theme.palette.type === 'light' ? undefined : 'invert(100%)',
+    filter: theme.palette.mode === 'light' ? undefined : 'invert(100%)',
    pointerEvents: 'none' as 'none',
  },
 })
--- a/app/src/components/Demo/ShowText.tsx
+++ b/app/src/components/Demo/ShowText.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import Key from './Key'

 interface State {
--- a/app/src/components/ErrorBoundary.tsx
+++ b/app/src/components/ErrorBoundary.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
-import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
-import Warning from '@material-ui/icons/Warning'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'
+import SentimentDissatisfied from '@mui/icons-material/SentimentDissatisfied'
+import Warning from '@mui/icons-material/Warning'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Button, Modal, Paper, Toolbar, Typography } from '@mui/material'

 interface State {
  error?: Error
@@ -11,6 +12,7 @@ interface State {

 interface Props {
  classes: any
+  children?: React.ReactNode
 }

 class ErrorBoundary extends React.PureComponent<Props, State> {
@@ -23,12 +25,12 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
  }

  private restart = () => {
-    window.location = window.location
+    window.location.reload()
  }

  private clearStorage = () => {
    PersistentStorage.clear()
-    window.location = window.location
+    window.location.reload()
  }

  public componentDidCatch(error: Error, errorInfo: any) {
--- a/app/src/components/Layout/ContentView.tsx
+++ b/app/src/components/Layout/ContentView.tsx
@@ -7,7 +7,7 @@ import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'
 import { List } from 'immutable'
 import { Sidebar } from '../Sidebar'
-import ReactResizeDetector from 'react-resize-detector'
+import { useResizeDetector } from 'react-resize-detector'

 interface Props {
  heightProperty: any
@@ -21,11 +21,23 @@ function ContentView(props: Props) {
  const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
  const [detectedHeight, setDetectedHeight] = React.useState(0)
  const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
-  const detectSize = React.useCallback((width, newHeight) => {
+  
+  const { height: resizeHeight, ref: heightRef } = useResizeDetector()
+  const { width: resizeWidth, ref: widthRef } = useResizeDetector()
+  
+  React.useEffect(() => {
+    if (resizeHeight) setDetectedHeight(resizeHeight)
+  }, [resizeHeight])
+  
+  React.useEffect(() => {
+    if (resizeWidth) setDetectedSidebarWidth(resizeWidth)
+  }, [resizeWidth])
+  
+  const detectSize = React.useCallback((width: any, newHeight: any) => {
    setDetectedHeight(newHeight)
  }, [])

-  const detectSidebarSize = React.useCallback(width => {
+  const detectSidebarSize = React.useCallback((width: any) => {
    setDetectedSidebarWidth(width)
  }, [])

@@ -85,15 +97,13 @@ function ContentView(props: Props) {
            >
              <Tree />
              {/** Passing height constraints via flex options down */}
-              <div style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
+              <div ref={heightRef} style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
                {/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
-                <ReactResizeDetector handleHeight={true} onResize={detectSize} />
                <ChartPanel />
              </div>
            </ReactSplitPane>
          </span>
-          <div style={{ height: '100%' }}>
-            <ReactResizeDetector handleWidth={true} onResize={detectSidebarSize} />
+          <div ref={widthRef} style={{ height: '100%' }}>
            <div
              className={props.paneDefaults}
              style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
--- a/app/src/components/Layout/Notification.tsx
+++ b/app/src/components/Layout/Notification.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'

-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { green, red } from '@material-ui/core/colors'
+import { Snackbar, SnackbarContent } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { green, red } from '@mui/material/colors'

 interface Props {
  message?: string
--- a/app/src/components/Layout/PauseButton.tsx
+++ b/app/src/components/Layout/PauseButton.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import CustomIconButton from '../helper/CustomIconButton'
-import Pause from '@material-ui/icons/PauseCircleFilled'
-import Resume from '@material-ui/icons/PlayArrow'
+import Pause from '@mui/icons-material/PauseCircleFilled'
+import Resume from '@mui/icons-material/PlayArrow'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { treeActions } from '../../actions'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'

 const styles = (theme: Theme) => ({
  icon: {
@@ -102,4 +103,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(PauseButton) as any)
--- a/app/src/components/Layout/SearchBar.tsx
+++ b/app/src/components/Layout/SearchBar.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback, useState, useRef } from 'react'
 import ClearAdornment from '../helper/ClearAdornment'
-import Search from '@material-ui/icons/Search'
+import Search from '@mui/icons-material/Search'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { InputBase } from '@material-ui/core'
+import { InputBase } from '@mui/material'
 import { settingsActions } from '../../actions'
-import { fade, Theme, withStyles } from '@material-ui/core/styles'
+import { alpha as fade, Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import { KeyCodes } from '../../utils/KeyCodes'

@@ -142,4 +143,4 @@ const styles = (theme: Theme) => ({
  },
 })

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SearchBar) as any)
--- a/app/src/components/Layout/TitleBar.tsx
+++ b/app/src/components/Layout/TitleBar.tsx
@@ -1,15 +1,17 @@
 import * as React from 'react'
-import CloudOff from '@material-ui/icons/CloudOff'
+import CloudOff from '@mui/icons-material/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
-import Menu from '@material-ui/icons/Menu'
+const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
+import Menu from '@mui/icons-material/Menu'
 import PauseButton from './PauseButton'
 import SearchBar from './SearchBar'
-import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@mui/material'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, globalActions, settingsActions } from '../../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  title: {
@@ -75,12 +77,12 @@ class TitleBar extends React.PureComponent<Props, {}> {
          <PauseButton />
          <Button
            className={classes.disconnect}
-            classes={{ label: classes.disconnectLabel }}
+            sx={{ color: 'primary.contrastText' }}
            onClick={actions.connection.disconnect}
          >
            Disconnect <CloudOff className={classes.disconnectIcon} />
          </Button>
-          <ConnectionHealthIndicator withBackground={true} />
+          <ConnectionHealthIndicatorAny withBackground={true} />
        </Toolbar>
      </AppBar>
    )
--- a/app/src/components/LoginDialog.tsx
+++ b/app/src/components/LoginDialog.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@material-ui/core'
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Typography } from '@mui/material'

 interface LoginDialogProps {
  open: boolean
@@ -17,7 +17,7 @@ export function LoginDialog(props: LoginDialogProps) {
  }

  return (
-    <Dialog open={props.open} disableEscapeKeyDown disableBackdropClick>
+    <Dialog open={props.open} disableEscapeKeyDown onClose={(event, reason) => { if (reason !== 'backdropClick') { /* Allow closing only via escape if needed */ } }}>
      <form onSubmit={handleSubmit}>
        <DialogTitle>Login to MQTT Explorer</DialogTitle>
        <DialogContent>
--- a/app/src/components/QosSelect.tsx
+++ b/app/src/components/QosSelect.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { TextField, MenuItem, Tooltip } from '@material-ui/core'
+import { TextField, MenuItem, Tooltip } from '@mui/material'
 import { QoS } from '../../../backend/src/DataSource/MqttSource'

 export function QosSelect(props: { selected: QoS; onChange: (value: QoS) => void; label?: string }) {
--- a/app/src/components/SettingsDrawer/BooleanSwitch.tsx
+++ b/app/src/components/SettingsDrawer/BooleanSwitch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { InputLabel, Switch, Theme, Tooltip } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { InputLabel, Switch, Theme, Tooltip } from '@mui/material'
+import { withStyles } from '@mui/styles'
 const sha1 = require('sha1')

 function BooleanSwitch(props: { title: string; value: boolean; tooltip: string; action: () => void; classes: any }) {
--- a/app/src/components/SettingsDrawer/BrokerStatistics.tsx
+++ b/app/src/components/SettingsDrawer/BrokerStatistics.tsx
@@ -3,9 +3,10 @@ import React, { useMemo } from 'react'
 import { AppState } from '../../reducers'
 import { Base64Message } from '../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { usePollingToFetchTreeNode } from '../helper/usePollingToFetchTreeNode'
 import { useUpdateComponentWhenNodeUpdates } from '../helper/useUpdateComponentWhenNodeUpdates'
 const abbreviate = require('number-abbreviate')
@@ -19,7 +20,7 @@ const styles = (theme: Theme) => ({
  container: {
    width: '100%',
    height: '224px',
-    backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
+    backgroundColor: theme.palette.mode === 'dark' ? 'rebeccapurple' : '#ebebeb',
    marginBottom: 0,
    padding: '8px',
  },
--- a/app/src/components/SettingsDrawer/Settings.tsx
+++ b/app/src/components/SettingsDrawer/Settings.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react'
 import BooleanSwitch from './BooleanSwitch'
 import BrokerStatistics from './BrokerStatistics'
-import ChevronRight from '@material-ui/icons/ChevronRight'
+import ChevronRight from '@mui/icons-material/ChevronRight'
 import TimeLocale from './TimeLocale'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions, settingsActions } from '../../actions'
 import { shell } from 'electron'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicOrder } from '../../reducers/Settings'

 import {
@@ -21,7 +22,7 @@ import {
  Select,
  Typography,
  Tooltip,
-} from '@material-ui/core'
+} from '@mui/material'

 export const autoExpandLimitSet = [
  {
@@ -70,7 +71,7 @@ const styles = (theme: Theme) => ({
  },
  author: {
    margin: 'auto 8px 8px auto',
-    color: theme.palette.text.hint,
+    color: theme.palette.text.secondary,
    cursor: 'pointer' as 'pointer',
  },
 })
--- a/app/src/components/SettingsDrawer/TimeLocale.tsx
+++ b/app/src/components/SettingsDrawer/TimeLocale.tsx
@@ -3,9 +3,9 @@ import DateFormatter from '../helper/DateFormatter'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Input, InputLabel, MenuItem, Select, Theme } from '@material-ui/core'
+import { Input, InputLabel, MenuItem, Select, Theme } from '@mui/material'
 import { settingsActions } from '../../actions'
-import { withStyles } from '@material-ui/styles'
+import { withStyles } from '@mui/styles'

 function importAll(r: any) {
  r.keys().forEach(r)
@@ -38,7 +38,7 @@ function TimeLocaleSettings(props: Props) {
    </MenuItem>
  ))

-  function updateLocale(e: React.ChangeEvent<{ value: unknown }>) {
+  function updateLocale(e: any) {
    const locale = e.target.value ? String(e.target.value) : ''
    actions.settings.setTimeLocale(locale)
  }
--- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
+++ b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
@@ -1,11 +1,11 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import TopicPlot from '../../TopicPlot'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
-import { Fade, Paper, Popper, Tooltip } from '@material-ui/core'
+import { Fade, Paper, Popper, Tooltip } from '@mui/material'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'

 interface Props {
--- a/app/src/components/Sidebar/CodeDiff/DiffCount.tsx
+++ b/app/src/components/Sidebar/CodeDiff/DiffCount.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 interface Props {
  changes: Array<Diff.Change>
--- a/app/src/components/Sidebar/CodeDiff/Gutters.tsx
+++ b/app/src/components/Sidebar/CodeDiff/Gutters.tsx
@@ -1,13 +1,13 @@
 import * as diff from 'diff'
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import Add from '@material-ui/icons/Add'
+import Add from '@mui/icons-material/Add'
 import ChartPreview from './ChartPreview'
-import Remove from '@material-ui/icons/Remove'
+import Remove from '@mui/icons-material/Remove'
 import { JsonPropertyLocation } from '../../../../../backend/src/JsonAstParser'
 import { lineChangeStyle, trimNewlineRight } from './util'
-import { Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 interface Props {
  changes: Array<diff.Change>
--- a/app/src/components/Sidebar/CodeDiff/index.tsx
+++ b/app/src/components/Sidebar/CodeDiff/index.tsx
@@ -8,7 +8,8 @@ import { isPlottable, lineChangeStyle, trimNewlineRight } from './util'
 import { JsonPropertyLocation, literalsMappedByLines } from '../../../../../backend/src/JsonAstParser'
 import { selectTextWithCtrlA } from '../../../utils/handleTextSelectWithCtrlA'
 import { style } from './style'
-import { withStyles, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { withStyles } from '@mui/styles'
 import 'prismjs/components/prism-json'

 interface Props {
--- a/app/src/components/Sidebar/CodeDiff/style.tsx
+++ b/app/src/components/Sidebar/CodeDiff/style.tsx
@@ -1,8 +1,8 @@
 import { CodeBlockColors, CodeBlockColorsBraceMonokai } from '../CodeBlockColors'
-import { Theme } from '@material-ui/core'
+import { Theme } from '@mui/material'

 export const style = (theme: Theme) => {
-  const codeBlockColors = theme.palette.type === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
+  const codeBlockColors = theme.palette.mode === 'light' ? CodeBlockColors : CodeBlockColorsBraceMonokai
  const codeBaseStyle = {
    font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
    display: 'inline-grid' as 'inline-grid',
--- a/app/src/components/Sidebar/HistoryDrawer.tsx
+++ b/app/src/components/Sidebar/HistoryDrawer.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useState, useEffect, memo } from 'react'
-import { Badge, Typography } from '@material-ui/core'
+import { Badge, Typography } from '@mui/material'
 import { selectTextWithCtrlA } from '../../utils/handleTextSelectWithCtrlA'
-import { Theme, withStyles, emphasize } from '@material-ui/core/styles'
+import { Theme, emphasize } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface HistoryItem {
  key: string
--- a/app/src/components/Sidebar/MessageId.tsx
+++ b/app/src/components/Sidebar/MessageId.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react'
 import { Message } from '../../../../backend/src/Model'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 export const MessageId = memo(function MessageId(props: { message: Message; addComma?: boolean }) {
  const { message, addComma } = props
--- a/app/src/components/Sidebar/NodeStats.tsx
+++ b/app/src/components/Sidebar/NodeStats.tsx
@@ -1,7 +1,7 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
 import { TopicViewModel } from '../../model/TopicViewModel'
-import { Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'

 interface Props {
  node?: q.TreeNode<TopicViewModel>
--- a/app/src/components/Sidebar/Panel.tsx
+++ b/app/src/components/Sidebar/Panel.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography, Theme } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import { Accordion, AccordionDetails, AccordionSummary, Typography, Theme } from '@mui/material'
+import { withStyles } from '@mui/styles'

 const styles = (theme: Theme) => ({
  summary: { minHeight: '0' },
@@ -19,14 +19,14 @@ const Panel = (props: {
  detailsHidden?: boolean
 }) => {
  return (
-    <ExpansionPanel defaultExpanded={true} disabled={props.disabled}>
-      <ExpansionPanelSummary expandIcon={<ExpandMore />} className={props.classes.summary}>
+    <Accordion defaultExpanded={true} disabled={props.disabled}>
+      <AccordionSummary expandIcon={<ExpandMore />} className={props.classes.summary}>
        <Typography className={props.classes.heading}>{props.children[0]}</Typography>
-      </ExpansionPanelSummary>
+      </AccordionSummary>
      {props.detailsHidden ? null : (
-        <ExpansionPanelDetails className={props.classes.detail}>{props.children[1]}</ExpansionPanelDetails>
+        <AccordionDetails className={props.classes.detail}>{props.children[1]}</AccordionDetails>
      )}
-    </ExpansionPanel>
+    </Accordion>
  )
 }

--- a/app/src/components/Sidebar/Publish/Editor.tsx
+++ b/app/src/components/Sidebar/Publish/Editor.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { default as AceEditor } from 'react-ace'
-import { Theme, withTheme } from '@material-ui/core'
+import { useTheme } from '@mui/material/styles'
 import 'ace-builds'
 import 'ace-builds/webpack-resolver'
 import 'ace-builds/src-noconflict/mode-json'
@@ -13,11 +13,11 @@ import 'react-ace'

 function Editor(props: {
  editorMode: string
-  theme: Theme
  value: string | undefined
  onChange: (value: string) => void
  editorRef: React.Ref<AceEditor>
 }) {
+  const theme = useTheme()
  const editorOptions = {
    showLineNumbers: false,
    tabSize: 2,
@@ -28,7 +28,7 @@ function Editor(props: {
      ref={props.editorRef}
      style={{}}
      mode={props.editorMode}
-      theme={props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
+      theme={theme.palette.mode === 'dark' ? 'monokai' : 'dawn'}
      name="UNIQUE_ID_OF_DIV"
      width="100%"
      height="200px"
@@ -45,4 +45,4 @@ function Editor(props: {
  )
 }

-export default withTheme(Editor)
+export default Editor
--- a/app/src/components/Sidebar/Publish/EditorModeSelect.tsx
+++ b/app/src/components/Sidebar/Publish/EditorModeSelect.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FormControlLabel, Radio, RadioGroup } from '@material-ui/core'
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material'

 interface Props {
  value: string
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -1,14 +1,14 @@
 import Editor from './Editor'
-import { AttachFileOutlined, FormatAlignLeft } from '@material-ui/icons'
+import { AttachFileOutlined, FormatAlignLeft } from '@mui/icons-material'
 import Message from './Model/Message'
-import Navigation from '@material-ui/icons/Navigation'
+import Navigation from '@mui/icons-material/Navigation'
 import PublishHistory from './PublishHistory'
 import React, { useCallback, useMemo, useState, useRef, memo } from 'react'
 import RetainSwitch from './RetainSwitch'
 import TopicInput from './TopicInput'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
-import { Button, Fab, Theme, Tooltip, withTheme } from '@material-ui/core'
+import { Button, Fab, Tooltip, useTheme } from '@mui/material'
 import { connect } from 'react-redux'
 import { EditorModeSelect } from './EditorModeSelect'
 import { globalActions, publishActions } from '../../../actions'
@@ -23,7 +23,6 @@ interface Props {
  globalActions: typeof globalActions
  retain: boolean
  editorMode: string
-  theme: Theme
 }

 function useHistory(): [Array<Message>, (topic: string, payload?: string) => void] {
@@ -42,6 +41,7 @@ function useHistory(): [Array<Message>, (topic: string, payload?: string) => voi
 }

 function Publish(props: Props) {
+  const theme = useTheme()
  const editorRef = useRef<AceEditor>()
  const [history, amendToHistory] = useHistory()

@@ -221,4 +221,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(Publish))
+export default connect(mapStateToProps, mapDispatchToProps)(Publish)
--- a/app/src/components/Sidebar/Publish/RetainSwitch.tsx
+++ b/app/src/components/Sidebar/Publish/RetainSwitch.tsx
@@ -1,6 +1,6 @@
 import QosSelect from './QosPublishOption'
 import React from 'react'
-import { Checkbox, FormControlLabel, Tooltip } from '@material-ui/core'
+import { Checkbox, FormControlLabel, Tooltip } from '@mui/material'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
--- a/app/src/components/Sidebar/Publish/TopicInput.tsx
+++ b/app/src/components/Sidebar/Publish/TopicInput.tsx
@@ -1,6 +1,6 @@
 import ClearAdornment from '../../helper/ClearAdornment'
 import React, { useCallback, useMemo, useRef } from 'react'
-import { FormControl, Input, InputLabel } from '@material-ui/core'
+import { FormControl, Input, InputLabel } from '@mui/material'
 import { publishActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -2,12 +2,14 @@ import * as q from '../../../../backend/src/Model'
 import React, { useState, useEffect, useCallback } from 'react'
 import NodeStats from './NodeStats'
 import ValuePanel from './ValueRenderer/ValuePanel'
+const ValuePanelAny = ValuePanel as any
 import { AppState } from '../../reducers'
-import { ExpansionPanelDetails } from '@material-ui/core'
+import { AccordionDetails } from '@mui/material'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { settingsActions, sidebarActions } from '../../actions'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import TopicPanel from './TopicPanel/TopicPanel'
 import Panel from './Panel'
@@ -56,16 +58,16 @@ function Sidebar(props: Props) {
    <div id="Sidebar" className={classes.drawer}>
      <div>
        <TopicPanel node={node} />
-        <ValuePanel lastUpdate={node ? node.lastUpdate : 0} />
+        <ValuePanelAny lastUpdate={node ? node.lastUpdate : 0} />
        <Panel>
          <span>Publish</span>
          <Publish connectionId={props.connectionId} />
        </Panel>
        <Panel detailsHidden={!node}>
          <span>Stats</span>
-          <ExpansionPanelDetails className={classes.details}>
+          <AccordionDetails className={classes.details}>
            <NodeStats node={node} />
-          </ExpansionPanelDetails>
+          </AccordionDetails>
        </Panel>
      </div>
    </div>
--- a/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx
+++ b/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx
@@ -1,8 +1,8 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import React, { useCallback } from 'react'
-import { Badge } from '@material-ui/core'
+import { Badge } from '@mui/material'

 export const RecursiveTopicDeleteButton = (props: {
  node?: q.TreeNode<any>
--- a/app/src/components/Sidebar/TopicPanel/Topic.tsx
+++ b/app/src/components/Sidebar/TopicPanel/Topic.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import * as q from '../../../../../backend/src/Model'
-import Button from '@material-ui/core/Button'
-import { withStyles, Theme } from '@material-ui/core/styles'
+import Button from '@mui/material/Button'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { treeActions } from '../../../actions'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
@@ -39,8 +40,8 @@ class Topic extends React.PureComponent<Props, {}> {
        <Button
          onClick={() => this.props.actions.selectTopic(edge!.target)}
          size="small"
-          variant={theme.palette.type === 'light' ? 'contained' : undefined}
-          color={theme.palette.type === 'light' ? 'primary' : 'secondary'}
+          variant={theme.palette.mode === 'light' ? 'contained' : undefined}
+          color={theme.palette.mode === 'light' ? 'primary' : 'secondary'}
          className={this.props.classes.button}
          key={edge!.hash()}
        >
@@ -66,4 +67,4 @@ const mapDispatchToProps = (dispatch: any) => {
  }
 }

-export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic))
+export default connect(null, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Topic) as any)
--- a/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
+++ b/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import CustomIconButton from '../../helper/CustomIconButton'
-import Delete from '@material-ui/icons/Delete'
+import Delete from '@mui/icons-material/Delete'
 import React from 'react'

 export const TopicDeleteButton = (props: {
--- a/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx
+++ b/app/src/components/Sidebar/TopicPanel/TopicPanel.tsx
@@ -3,6 +3,7 @@ import Copy from '../../helper/Copy'
 import Panel from '../Panel'
 import React, { useMemo, useCallback } from 'react'
 import Topic from './Topic'
+const TopicAny = Topic as any
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { RecursiveTopicDeleteButton } from './RecursiveTopicDeleteButton'
@@ -31,7 +32,7 @@ const TopicPanel = (props: { node?: q.TreeNode<any>; actions: typeof sidebarActi
          <RecursiveTopicDeleteButton node={node} deleteTopicAction={deleteTopic} />
          <TopicTypeButton node={node} />
        </span>
-        <Topic node={node} />
+        <TopicAny node={node} />
      </Panel>
    ),
    [node, node?.childTopicCount()]
--- a/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx
+++ b/app/src/components/Sidebar/TopicPanel/TopicTypeButton.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback, useMemo } from 'react'
 import * as q from '../../../../../backend/src/Model'
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import Grow from '@material-ui/core/Grow'
-import Button from '@material-ui/core/Button'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import MenuItem from '@material-ui/core/MenuItem'
-import MenuList from '@material-ui/core/MenuList'
-import WarningRounded from '@material-ui/icons/WarningRounded'
+import ClickAwayListener from '@mui/material/ClickAwayListener'
+import Grow from '@mui/material/Grow'
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+import Popper from '@mui/material/Popper'
+import MenuItem from '@mui/material/MenuItem'
+import MenuList from '@mui/material/MenuList'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import { MessageDecoder, decoders } from '../../../decoders'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
  const { node } = props
@@ -46,7 +46,7 @@ export const TopicTypeButton = (props: { node?: q.TreeNode<any> }) => {
    [open]
  )

-  const handleClose = useCallback((event: React.MouseEvent<Document, MouseEvent>) => {
+  const handleClose = useCallback((event: any) => {
    if (anchorEl && anchorEl.contains(event.target as HTMLElement)) {
      return
    }
--- a/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ActionButtons.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react'
-import Code from '@material-ui/icons/Code'
-import Reorder from '@material-ui/icons/Reorder'
-import ToggleButton from '@material-ui/lab/ToggleButton'
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'
+import Code from '@mui/icons-material/Code'
+import Reorder from '@mui/icons-material/Reorder'
+import ToggleButton from '@mui/lab/ToggleButton'
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup'
 import { settingsActions } from '../../../actions'
-import { Tooltip, withStyles, Theme } from '@material-ui/core'
+import { Tooltip } from '@mui/material'
+import { withStyles } from '@mui/styles'
+import { Theme } from '@mui/material/styles'
 import { bindActionCreators } from 'redux'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
@@ -73,4 +75,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ActionButtons) as any)
--- a/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/DeleteSelectedTopicButton.tsx
@@ -1,7 +1,7 @@
-import Clear from '@material-ui/icons/Clear'
+import Clear from '@mui/icons-material/Clear'
 import React, { useMemo } from 'react'
 import { bindActionCreators } from 'redux'
-import { Button, Tooltip } from '@material-ui/core'
+import { Button, Tooltip } from '@mui/material'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'

--- a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import ShowChart from '@material-ui/icons/ShowChart'
+import ShowChart from '@mui/icons-material/ShowChart'
 import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import History from '../HistoryDrawer'
--- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -9,7 +9,9 @@ import React, { useCallback } from 'react'
 import ValueRenderer from './ValueRenderer'
 import { AppState } from '../../../reducers'
 import { bindActionCreators } from 'redux'
-import { Theme, Typography, withStyles } from '@material-ui/core'
+import { Typography } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { connect } from 'react-redux'
 import { sidebarActions } from '../../../actions'
 import DeleteSelectedTopicButton from './DeleteSelectedTopicButton'
@@ -143,4 +145,4 @@ const styles = (theme: Theme) => ({
 })

 // @ts-ignore
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel))
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ValuePanel) as any)
--- a/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx
@@ -4,7 +4,7 @@ import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { connect } from 'react-redux'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Fade } from '@material-ui/core'
+import { Fade } from '@mui/material'
 import { Decoder } from '../../../../../backend/src/Model/Decoder'
 import { useDecoder } from '../../hooks/useDecoder'
 import { TopicViewModel } from '../../../model/TopicViewModel'
--- a/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx
+++ b/app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx
@@ -3,7 +3,8 @@ import React, { useEffect, useState, useMemo } from 'react'
 import TreeNode from '.'
 import { SettingsState } from '../../../reducers/Settings'
 import { sortedNodes } from '../../../sortedNodes'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { treeActions } from '../../../actions'

--- a/app/src/components/Tree/TreeNode/TreeNodeTitle.tsx
+++ b/app/src/components/Tree/TreeNode/TreeNodeTitle.tsx
@@ -1,6 +1,7 @@
 import * as q from '../../../../../backend/src/Model'
 import React, { memo } from 'react'
-import { Theme, withStyles } from '@material-ui/core'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { useDecoder } from '../../hooks/useDecoder'

@@ -94,7 +95,7 @@ const styles = (theme: Theme) => ({
    overflow: 'hidden' as 'hidden',
  },
  expander: {
-    color: theme.palette.type === 'light' ? '#222' : '#eee',
+    color: theme.palette.mode === 'light' ? '#222' : '#eee',
    cursor: 'pointer' as 'pointer',
    paddingRight: theme.spacing(0.25),
    userSelect: 'none' as 'none',
--- a/app/src/components/Tree/TreeNode/index.tsx
+++ b/app/src/components/Tree/TreeNode/index.tsx
@@ -4,7 +4,8 @@ import TreeNodeSubnodes from './TreeNodeSubnodes'
 import TreeNodeTitle from './TreeNodeTitle'
 import { SettingsState } from '../../../reducers/Settings'
 import { styles } from './styles'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { TopicViewModel } from '../../../model/TopicViewModel'
 import { treeActions } from '../../../actions'
 import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndicateTopicUpdate'
@@ -35,7 +36,7 @@ function TreeNodeComponent(props: Props) {
  const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
  useViewModelSubscriptions(treeNode, nodeRef, setSelected, setCollapsedOverride)
  const animationClass =
-    props.theme.palette.type === 'light' ? props.classes.animationLight : props.classes.animationDark
+    props.theme.palette.mode === 'light' ? props.classes.animationLight : props.classes.animationDark

  useAnimationToIndicateTopicUpdate(
    nodeRef,
--- a/app/src/components/Tree/TreeNode/styles.ts
+++ b/app/src/components/Tree/TreeNode/styles.ts
@@ -1,5 +1,5 @@
-import { blueGrey } from '@material-ui/core/colors'
-import { Theme } from '@material-ui/core/styles'
+import { blueGrey } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'

 export const styles = (theme: Theme) => {
  return {
@@ -37,7 +37,7 @@ export const styles = (theme: Theme) => {
      marginLeft: theme.spacing(1.5),
    },
    selected: {
-      backgroundColor: (theme.palette.type === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
+      backgroundColor: (theme.palette.mode === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
    },
    hover: {},
    title: {
@@ -49,7 +49,7 @@ export const styles = (theme: Theme) => {
      padding: '1px 4px 0 4px',
      margin: '1px 0px',
      '&:hover': {
-        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+        backgroundColor: theme.palette.mode === 'light' ? blueGrey[100] : theme.palette.primary.light,
      },
    },
  }
--- a/app/src/components/UpdateNotifier.tsx
+++ b/app/src/components/UpdateNotifier.tsx
@@ -1,17 +1,18 @@
-import compareVersions from 'compare-versions'
+import { compareVersions } from 'compare-versions'
 import electron from 'electron'
 import React from 'react'
 import axios from 'axios'
-import Close from '@material-ui/icons/Close'
-import CloudDownload from '@material-ui/icons/CloudDownload'
+import Close from '@mui/icons-material/Close'
+import CloudDownload from '@mui/icons-material/CloudDownload'
 import { AppState } from '../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { green } from '@material-ui/core/colors'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { green } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
 import { updateNotifierActions } from '../actions'

-import { Button, IconButton, Modal, Paper, Snackbar, SnackbarContent, Typography } from '@material-ui/core'
+import { Button, IconButton, Modal, Paper, Snackbar, SnackbarContent, Typography } from '@mui/material'
 import { rendererRpc, getAppVersion } from '../../../events'

 interface Props {
@@ -83,7 +84,7 @@ class UpdateNotifier extends React.PureComponent<Props, State> {
    return res.data as Array<GithubRelease>
  }

-  private onCloseNotification = (event: React.SyntheticEvent<any>, reason: string) => {
+  private onCloseNotification = (event: any, reason: any) => {
    if (reason === 'clickaway') {
      return
    }
--- a/app/src/components/helper/ClearAdornment.tsx
+++ b/app/src/components/helper/ClearAdornment.tsx
@@ -1,25 +1,26 @@
 import * as React from 'react'
-import Clear from '@material-ui/icons/Clear'
-import { IconButton, Theme } from '@material-ui/core'
-import { withTheme } from '@material-ui/core/styles'
+import Clear from '@mui/icons-material/Clear'
+import { IconButton, Theme } from '@mui/material'
+import { useTheme } from '@mui/material/styles'

 interface Props {
  value?: string
  action: any
  style?: React.CSSProperties
  variant?: 'primary'
-  theme: Theme
 }

 /**
 * Clear button for text input fields
 */
 function ClearAdornment(props: Props) {
+  const theme = useTheme()
+  
  if (!props.value) {
    return null
  }

-  const color = props.variant === 'primary' ? props.theme.palette.primary.contrastText : undefined
+  const color = props.variant === 'primary' ? theme.palette.primary.contrastText : undefined
  return (
    <IconButton style={{ ...props.style, padding: '1px' }} onClick={props.action}>
      <Clear style={{ color, fontSize: '16px' }} />
@@ -27,4 +28,4 @@ function ClearAdornment(props: Props) {
  )
 }

-export default withTheme(ClearAdornment)
+export default ClearAdornment
--- a/app/src/components/helper/ConnectionHealthIndicator.tsx
+++ b/app/src/components/helper/ConnectionHealthIndicator.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react'
-import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
+import DeviceHubOutlined from '@mui/icons-material/DeviceHubOutlined'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { ConnectionHealth } from '../../reducers/Connection'
-import { green, orange, red } from '@material-ui/core/colors'
-import { withStyles, Theme } from '@material-ui/core/styles'
-import { Tooltip } from '@material-ui/core'
+import { green, orange, red } from '@mui/material/colors'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'
+import { Tooltip } from '@mui/material'

 const styles = (theme: Theme) => ({
  offline: {
@@ -65,4 +66,4 @@ const mapStateToProps = (state: AppState) => {
  }
 }

-export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator))
+export default connect(mapStateToProps)(withStyles(styles)(ConnectionHealthIndicator) as any)
--- a/app/src/components/helper/Copy.tsx
+++ b/app/src/components/helper/Copy.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
-import Check from '@material-ui/icons/Check'
+import Check from '@mui/icons-material/Check'
 import CustomIconButton from './CustomIconButton'
-import FileCopy from '@material-ui/icons/FileCopy'
+import FileCopy from '@mui/icons-material/FileCopy'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { globalActions } from '../../actions'
--- a/app/src/components/helper/CustomIconButton.tsx
+++ b/app/src/components/helper/CustomIconButton.tsx
@@ -1,12 +1,14 @@
 import * as React from 'react'
-import { IconButton, Tooltip } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
+import { IconButton, Tooltip } from '@mui/material'
+import { Theme } from '@mui/material/styles'
+import { withStyles } from '@mui/styles'

 interface Props {
  onClick: any
  tooltip: string
  classes: any
  style?: React.CSSProperties
+  children?: React.ReactNode
 }

 const styles = (theme: Theme) => ({
--- a/app/src/components/helper/NumberFormatter.tsx
+++ b/app/src/components/helper/NumberFormatter.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
-import { Tooltip } from '@material-ui/core'
+import { Tooltip } from '@mui/material'

 function NumberFormatter(props: { locale: string; value: number; grouping?: boolean }) {
  let formatter: Intl.NumberFormat | undefined
--- a/app/src/components/helper/Save.tsx
+++ b/app/src/components/helper/Save.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
-import Check from '@material-ui/icons/Check'
+import Check from '@mui/icons-material/Check'
 import CustomIconButton from './CustomIconButton'

-import { SaveAlt } from '@material-ui/icons'
+import { SaveAlt } from '@mui/icons-material'
 import { bindActionCreators } from 'redux'
 import { rendererRpc, writeToFile } from '../../../../events'
 import { makeSaveDialogRpc } from '../../../../events/OpenDialogRequest'
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import * as ReactDOM from 'react-dom/client'
 import App from './components/App'
 import Demo from './components/Demo'
 import reducers, { AppState } from './reducers'
-import reduxThunk from 'redux-thunk'
+import { thunk as reduxThunk } from 'redux-thunk'
 import { applyMiddleware, compose, createStore } from 'redux'
 import { batchDispatchMiddleware } from 'redux-batched-actions'
 import { connect, Provider } from 'react-redux'
-import { ThemeProvider } from '@material-ui/styles'
+import { ThemeProvider } from '@mui/material/styles'
 import './utils/tracking'
 import { themes } from './theme'
 import { BrowserAuthWrapper } from './components/BrowserAuthWrapper'
@@ -32,11 +32,11 @@ const mapStateToProps = (state: AppState) => {

 const Application = connect(mapStateToProps)(ApplicationRenderer)

-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('app')!)
+root.render(
  <Provider store={store}>
    <BrowserAuthWrapper>
      <Application />
    </BrowserAuthWrapper>
-  </Provider>,
-  document.getElementById('app')
+  </Provider>
 )
--- a/app/src/model/ConnectionOptions.ts
+++ b/app/src/model/ConnectionOptions.ts
@@ -1,7 +1,7 @@
 import { MqttOptions } from '../../../backend/src/DataSource'
 import { v4 } from 'uuid'
 import { Subscription } from '../../../backend/src/DataSource/MqttSource'
-const sha1 = require('sha1')
+import sha1 from 'sha1'

 export interface CertificateParameters {
  name: string
--- a/app/src/reducers/Sidebar.ts
+++ b/app/src/reducers/Sidebar.ts
@@ -21,7 +21,7 @@ export enum ActionTypes {
 export type SidebarState = Record<SidebarModel>

 const actions: {
-  [s: string]: (state: SidebarState, action: ReduxAction) => SidebarState
+  [s: string]: any
 } = {
  SIDEBAR_SET_COMPARE_MESSAGE: setCompareMessage,
  SIDEBAR_RESET_STORE: resetStore,
--- a/app/src/reducers/Tree.ts
+++ b/app/src/reducers/Tree.ts
@@ -52,7 +52,7 @@ const setPaused =
  }

 const actions: {
-  [s: string]: (state: TreeState, action: ReduxAction) => TreeState
+  [s: string]: any
 } = {
  TREE_SHOW_TREE: showTree,
  TREE_SELECT_TOPIC: selectTopic,
--- a/app/src/theme.ts
+++ b/app/src/theme.ts
@@ -1,5 +1,5 @@
-import { createMuiTheme } from '@material-ui/core'
-import { amber } from '@material-ui/core/colors'
+import { createTheme } from '@mui/material/styles'
+import { amber } from '@mui/material/colors'

 const baseTheme = {
  typography: {
@@ -12,17 +12,17 @@ const baseTheme = {
  },
 }

-const darkTheme = createMuiTheme({
+const darkTheme = createTheme({
  ...(baseTheme as any),
  palette: {
-    type: 'dark',
+    mode: 'dark',
  },
 })

-const lightTheme = createMuiTheme({
+const lightTheme = createTheme({
  ...(baseTheme as any),
  palette: {
-    type: 'light',
+    mode: 'light',
    background: {
      default: '#fafafa',
    },
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -4,12 +4,12 @@
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strict": true,
-    "lib": ["es2019", "dom"],
+    "lib": ["ES2020", "dom"],
    "moduleResolution": "node",
    "outDir": "./build/",
    "sourceMap": true,
    "module": "esnext",
-    "target": "ES2017",
+    "target": "ES2020",
    "jsx": "react",
    "paths": {
      "react": ["./node_modules/@types/react"]
--- a/app/webpack.browser.config.mjs
+++ b/app/webpack.browser.config.mjs
@@ -1,9 +1,14 @@
 // Browser-specific webpack configuration
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
-const path = require('path')
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import webpack from 'webpack'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'

-module.exports = {
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
  entry: {
    app: './src/index.tsx',
    bugtracking: './src/utils/bugtracking.ts',
@@ -50,16 +55,16 @@ module.exports = {
    extensions: ['.ts', '.mjs', '.m.js', '.tsx', '.js', '.json'],
    modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
    alias: {
-      electron: require.resolve('./src/mocks/electron.ts'),
+      electron: path.resolve(__dirname, './src/mocks/electron.ts'),
    },
    fallback: {
      // Browser fallbacks for Node.js modules
-      path: require.resolve('path-browserify'),
+      path: 'path-browserify',
      fs: false,
      crypto: false,
-      url: require.resolve('url/'),
-      os: require.resolve('os-browserify/browser'),
-      events: require.resolve('events/'),
+      url: 'url/',
+      os: 'os-browserify/browser',
+      events: 'events/',
    },
  },
  module: {
@@ -93,8 +98,8 @@ module.exports = {
      'process.env.BROWSER_MODE': JSON.stringify('true'),
    }),
    new webpack.NormalModuleReplacementPlugin(/EventSystem[\\/]EventBus$/, resource => {
-      console.log('Replacing EventBus:', resource.request);
-      resource.request = resource.request.replace(/EventBus$/, 'BrowserEventBus');
+      console.log('Replacing EventBus:', resource.request)
+      resource.request = resource.request.replace(/EventBus$/, 'BrowserEventBus')
    }),
  ],
  externals: {},
--- a/app/webpack.config.mjs
+++ b/app/webpack.config.mjs
@@ -1,8 +1,13 @@
-// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const webpack = require('webpack')
+// import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import webpack from 'webpack'
+import { fileURLToPath } from 'url'
+import { dirname } from 'path'

-module.exports = {
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
  entry: {
    app: './src/index.tsx',
    bugtracking: './src/utils/bugtracking.ts',
@@ -14,6 +19,7 @@ module.exports = {
  },
  optimization: {
    minimize: false,
+    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
@@ -107,7 +113,4 @@ module.exports = {
  cache: {
    type: 'filesystem',
  },
-  optimization: {
-    runtimeChunk: 'single',
-  },
 }
--- a/app/yarn.lock
+++ b/app/yarn.lock
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,64 +4,42 @@
  "description": "",
  "main": "build/index.js",
  "scripts": {
-    "test": "NODE_PATH=../node_modules TS_NODE_PROJECT=./tsconfig.json mocha --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
+    "test": "NODE_PATH=../node_modules mocha --require tsx --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
    "build": "tsc",
-    "test-inspect": "NODE_PATH=../node_modules TS_NODE_PROJECT=./tsconfig.json mocha --inspect-brk --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
-    "coverage": "NODE_PATH=../node_modules TS_NODE_PROJECT=./tsconfig.json nyc mocha --require ts-node/register --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
-    "debug": "ts-node --inspect ./src/index.ts"
+    "test-inspect": "NODE_PATH=../node_modules mocha --inspect-brk --require tsx --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
+    "coverage": "NODE_PATH=../node_modules c8 mocha --require tsx --require source-map-support/register --recursive ./src/*/**/*.spec.ts",
+    "debug": "tsx --inspect ./src/index.ts"
  },
  "engines": {
    "node": ">=20"
  },
  "author": "",
  "license": "CC-BY-ND-4.0",
-  "nyc": {
-    "include": [
-      "src/**/*.ts",
-      "src/**/*.tsx"
-    ],
-    "exclude": [
-      "src/**/spec/*.spec.ts"
-    ],
-    "extension": [
-      ".ts",
-      ".tsx"
-    ],
-    "require": [
-      "ts-node/register"
-    ],
-    "reporter": [
-      "text-summary",
-      "html"
-    ],
-    "sourceMap": true,
-    "instrument": true
-  },
  "dependencies": {
    "@types/sha1": "^1.1.5",
-    "builder-util-runtime": "^9",
-    "fs-extra": "9",
-    "js-base64": "^3.7.2",
+    "builder-util-runtime": "^9.3.1",
+    "fs-extra": "^11.3.3",
+    "js-base64": "^3.7.8",
    "lowdb": "^1.0.0",
-    "mqtt": "^4.3.6",
+    "mqtt": "^5.14.1",
    "protobufjs": "^8.0.0",
    "sha1": "^1.1.1",
-    "uuid": "^8.3.2"
+    "uuid": "^11.0.0"
  },
  "devDependencies": {
-    "@types/chai": "^4.1.7",
-    "@types/fs-extra": "8",
-    "@types/lowdb": "^1.0.6",
-    "@types/mocha": "^7.0.2",
+    "@types/chai": "^4.3.20",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lowdb": "^1.0.15",
+    "@types/mocha": "^10.0.10",
    "@types/node": "^25.0.3",
    "@types/sha1": "^1.1.1",
-    "@types/uuid": "^8.3.4",
-    "chai": "^4.2.0",
-    "electron": "29.2.0",
-    "mocha": "^10.4.0",
-    "nyc": "15",
+    "@types/uuid": "^11.0.0",
+    "c8": "^10.1.3",
+    "chai": "^4.5.0",
+    "electron": "39.2.7",
+    "mocha": "^10.8.2",
    "source-map-support": "^0.5.9",
-    "ts-node": "^10.9.2",
-    "typescript": "^4.5.5"
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
  }
 }
--- a/backend/src/DataSource/MqttSource.ts
+++ b/backend/src/DataSource/MqttSource.ts
@@ -1,6 +1,6 @@
 import { URL } from 'url'

-import { Client, connect as mqttConnect } from 'mqtt'
+import { type MqttClient, connect as mqttConnect } from 'mqtt'
 import { DataSource, DataSourceStateMachine } from './'
 import { MqttMessage } from '../../../events'
 import { Base64Message } from '../Model/Base64Message'
@@ -27,7 +27,7 @@ export type QoS = 0 | 1 | 2

 export class MqttSource implements DataSource<MqttOptions> {
  public stateMachine: DataSourceStateMachine = new DataSourceStateMachine()
-  private client: Client | undefined
+  private client: MqttClient | undefined
  private messageCallback?: (topic: string, message: Buffer, packet: any) => void
  public topicSeparator = '/'

@@ -81,7 +81,7 @@ export class MqttSource implements DataSource<MqttOptions> {
    client.on('connect', () => {
      this.stateMachine.setConnected(true)
      options.subscriptions.forEach(subscription => {
-        client.subscribe(subscription.topic, { qos: subscription.qos }, (err: Error) => {
+        client.subscribe(subscription.topic, { qos: subscription.qos }, (err: Error | null) => {
          if (err) {
            this.stateMachine.setError(err)
          }
--- a/Show More
+++ b/Show More