diff --git a/.babelrc b/.babelrc
index 2365061..0b9436d 100644
--- a/.babelrc
+++ b/.babelrc
@@ -6,6 +6,6 @@
   "plugins": [
     "@babel/plugin-transform-runtime",
     "@babel/plugin-transform-async-to-generator",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-transform-class-properties"
   ]
 }
diff --git a/package-lock.json b/package-lock.json
index 9857d18..c6774d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,8 @@
       "dependencies": {
         "@axa-fr/react-oidc-context": "^3.1.6",
         "@babel/core": "^7.12.10",
-        "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/plugin-transform-async-to-generator": "^7.12.1",
+        "@babel/plugin-transform-class-properties": "^7.23.3",
         "@babel/preset-env": "^7.12.10",
         "@babel/preset-react": "^7.12.10",
         "@babel/runtime": "^7.12.5",
@@ -523,22 +523,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-class-properties": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
-      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
-      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
@@ -6253,15 +6237,6 @@
         "@babel/helper-plugin-utils": "^7.22.5"
       }
     },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
-      "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6"
-      }
-    },
     "@babel/plugin-proposal-private-property-in-object": {
       "version": "7.21.0-placeholder-for-preset-env.2",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
diff --git a/package.json b/package.json
index 87a2369..bf6f67c 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
   "dependencies": {
     "@axa-fr/react-oidc-context": "^3.1.6",
     "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
     "@babel/plugin-transform-async-to-generator": "^7.12.1",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
     "@babel/preset-env": "^7.12.10",
     "@babel/preset-react": "^7.12.10",
     "@babel/runtime": "^7.12.5",
diff --git a/src/index.js b/src/index.js
index 6bbecb1..2b47b2a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,3 @@
-import 'typeface-roboto';
 import "./index.css";
 import './i18n.js';
 import App from "./js/components/App.jsx";
diff --git a/src/js/components/Actions.jsx b/src/js/components/Actions.jsx
index 2219272..c86d38c 100644
--- a/src/js/components/Actions.jsx
+++ b/src/js/components/Actions.jsx
@@ -87,14 +87,11 @@ function ConfirmationDialog(props) {
 		props.handleClose()
 		setData({...data, acks: [], confirmations: [], action: null})
 	}
-	function handleEntering(e) {
-	}
 
 	return (
 		<Dialog
 			disableBackdropClick
 			maxWidth="xs"
-			onEntering={handleEntering}
 			onClose={handleCancel}
 			aria-labelledby="confirmation-dialog-title"
 			open={props.open}
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
index 2db2b67..cfdb587 100644
--- a/src/js/components/App.jsx
+++ b/src/js/components/App.jsx
@@ -1,6 +1,6 @@
 'use strict';
 import React from "react";
-import ReactDOM from "react-dom";
+import {createRoot} from "react-dom/client";
 import { useReactOidc } from "@axa-fr/react-oidc-context"
 import { useTranslation } from "react-i18next"
 import { useStateValue } from '../state.js'
@@ -241,7 +241,7 @@ function AuthProvider(props) {
 		return null
 	}
 	if ((authChoice == "basic") && (!basicLogin.username || !basicLogin.password)) {
-                return <Login />
+		return <Login />
 	}
 	if (!authChoice && !oidcUser && location.pathname != "/authentication/callback") {
 		return <AuthChoice />
@@ -346,7 +346,6 @@ function AppError(props) {
 	)
 }
 
-
 const domContainer = document.querySelector('#app');
-ReactDOM.render(<App />, domContainer);
-
+const root = createRoot(domContainer)
+root.render(<App />)
diff --git a/src/js/components/CatalogSelector.jsx b/src/js/components/CatalogSelector.jsx
index ce0a08f..86841e7 100644
--- a/src/js/components/CatalogSelector.jsx
+++ b/src/js/components/CatalogSelector.jsx
@@ -10,7 +10,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import useClasses from "../hooks/useClasses.jsx";
 
-const useStyles = theme => ({
+const styles = theme => ({
 	selected: {
 		cursor: "pointer",
 	},
@@ -26,7 +26,7 @@ const useStyles = theme => ({
 });
 
 function CatalogSelectorDialog(props) {
-	const classes = useStyles(useStyles)
+	const classes = useClasses(styles)
 	if (!props.options) {
 		return null
 	}
@@ -76,7 +76,7 @@ function CatalogSelector(props) {
 	if (props.options === undefined) {
 		return null
 	}
-	const classes = useClasses(useStyles)
+	const classes = useClasses(styles)
 	const [open, setOpen] = React.useState(false)
 
 	function handleClickOpen(e) {
diff --git a/src/js/components/DeployButton.jsx b/src/js/components/DeployButton.jsx
index 40b236a..02af366 100644
--- a/src/js/components/DeployButton.jsx
+++ b/src/js/components/DeployButton.jsx
@@ -12,6 +12,7 @@ import DialogTitle from "@mui/material/DialogTitle"
 import Button from "@mui/material/Button"
 import IconButton from "@mui/material/IconButton"
 import Tooltip from "@mui/material/Tooltip"
+import {useCatalogs} from "../hooks/Catalogs.jsx";
 
 function DeployButton(props) {
 	const { auth } = useUser()
diff --git a/src/js/components/ObjDetails.jsx b/src/js/components/ObjDetails.jsx
index aca27ab..00d77c2 100644
--- a/src/js/components/ObjDetails.jsx
+++ b/src/js/components/ObjDetails.jsx
@@ -66,7 +66,7 @@ function ObjMain(props) {
 }
 
 function CfgMain(props) {
-	const classes = styles()
+	const classes = useClasses(styles)
 	const sp = splitPath(props.path)
 	return (
 		<Grid item xs={12} className={classes.section}>
@@ -76,7 +76,7 @@ function CfgMain(props) {
 }
 
 function UsrMain(props) {
-	const classes = styles()
+	const classes = useClasses(styles)
 	const sp = splitPath(props.path)
 	return (
 		<Grid item xs={12} className={classes.section}>
@@ -88,7 +88,7 @@ function UsrMain(props) {
 function SvcMain(props) {
 	const sp = splitPath(props.path)
 	const [{ cstat }, dispatch] = useStateValue();
-	const classes = styles()
+	const classes = useClasses(styles)
 
 	if (cstat.monitor === undefined) {
 		return null
diff --git a/src/js/components/ObjInstanceCounts.jsx b/src/js/components/ObjInstanceCounts.jsx
index 017d387..72854b3 100644
--- a/src/js/components/ObjInstanceCounts.jsx
+++ b/src/js/components/ObjInstanceCounts.jsx
@@ -77,6 +77,6 @@ function ObjInstanceCounts(props) {
 	)
 }
 
-export {
+export default {
 	ObjInstanceCounts
 }
diff --git a/src/js/components/ObjInstances.jsx b/src/js/components/ObjInstances.jsx
index f74fd44..98793fa 100644
--- a/src/js/components/ObjInstances.jsx
+++ b/src/js/components/ObjInstances.jsx
@@ -17,6 +17,7 @@ import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import Checkbox from '@mui/material/Checkbox';
 import useClasses from "../hooks/useClasses.jsx";
+import ObjInstanceCounts from "./ObjInstanceCounts.jsx"
 
 const styles = theme => ({
 	tableWrapper: {
@@ -114,12 +115,12 @@ function ObjInstances(props) {
 		<Card className={classes.card}>
 			<CardHeader
 				title={t("Instances")}
-				subheader=<ObjInstanceCounts path={props.path} />
-				action={
-					<TableToolbar selected={selected}>
-						{(selected.length > 0) && <ObjInstanceActions selected={selected} title="" />}
-					</TableToolbar>
-				}
+				subheaderTypographyProps=<ObjInstanceCounts path={props.path} />
+			action={
+			<TableToolbar selected={selected}>
+				{(selected.length > 0) && <ObjInstanceActions selected={selected} title="" />}
+			</TableToolbar>
+		}
 			/>
 			<CardContent className={classes.content}>
 				<div className={classes.tableWrapper}>
diff --git a/src/js/components/ObjKeyActions.jsx b/src/js/components/ObjKeyActions.jsx
index 9811c70..0852268 100644
--- a/src/js/components/ObjKeyActions.jsx
+++ b/src/js/components/ObjKeyActions.jsx
@@ -48,7 +48,7 @@ function ObjKeyActions(props) {
 		<Actions path={path} title={title} submit={submit} fab={fab}>
 			<ActionsSection name="dangerous" color="danger" confirms={6}>
 				<ActionsItem value="delete" text="Delete" requires={{role: "admin", namespace: sp.namespace}}
-					icon=<DeleteIcon />
+							 icon=<DeleteIcon />
 				/>
 			</ActionsSection>
 		</Actions>
diff --git a/src/js/components/ObjKeys.jsx b/src/js/components/ObjKeys.jsx
index be0784a..a6e672b 100644
--- a/src/js/components/ObjKeys.jsx
+++ b/src/js/components/ObjKeys.jsx
@@ -53,15 +53,15 @@ function ObjKeys(props) {
                 setSelected([]);
         }
 	return (
-                <Card>
-                        <CardHeader
-                                title={t("Keys")}
-                                subheader={props.path}
+		<Card>
+			<CardHeader
+				title={t("Keys")}
+				subheader={props.path}
 				action={
 					<ObjKeyAdd path={props.path} />
 				}
-                        />
-                        <CardContent>
+			/>
+			<CardContent>
 				<div className={classes.wrapper}>
 					<TableToolbar selected={selected}>
 						{selected.length > 0 ? (
diff --git a/src/js/components/ObjKindSelector.jsx b/src/js/components/ObjKindSelector.jsx
index e631dc9..0c95897 100644
--- a/src/js/components/ObjKindSelector.jsx
+++ b/src/js/components/ObjKindSelector.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useStateValue } from '../state.js';
-import ToggleButton from '@mui/lab/ToggleButton';
-import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import LockOpenIcon from '@mui/icons-material/LockOpen';