diff --git a/JamiDaemon.js b/JamiDaemon.js
index efc39c128f9589677f7cf4fb82c8d0a1b7f9c5f0..1431a628a2817b4f585e92efe27584b0105dede1 100755
--- a/JamiDaemon.js
+++ b/JamiDaemon.js
@@ -29,7 +29,7 @@ class JamiDaemon {
         this.accounts = []
         this.lookups = []
         this.tempAccounts = []
-        this.dring = require("./dring.node")
+        this.dring = require("./jamid.node")
         this.dring.init({
             AccountsChanged: () => {
                 console.log("AccountsChanged")
diff --git a/README.txt b/README.txt
index 6a6e74b5d6bd2d66a093176bb57f2dd462098c78..51388abb60aca45496ad53ddc7f3487560824de7 100644
--- a/README.txt
+++ b/README.txt
@@ -8,8 +8,8 @@ Next step will be to implement a video protocol such as WebRTC to allow audio an
 
 # Main dependencies
 
-* Jami Deamon with NodeJS bindings (https://review.jami.net/admin/repos/ring-daemon),
-* NodeJS v14+
+* Jami Deamon with NodeJS bindings (https://review.jami.net/admin/repos/jami-daemon),
+* NodeJS v16+
 
 # How to start the server
 
diff --git a/app.js b/app.js
index 9bff6340b6b04c1adc6c6d8fe3e33ad6468e7536..da9e365e826876852ced4c86a7d1634d220df5e2 100644
--- a/app.js
+++ b/app.js
@@ -1,7 +1,7 @@
 'use strict'
 
 import dotenv from 'dotenv'
-dotenv.config()
+const env = dotenv.config()
 
 import { promises as fs } from 'fs'
 import http from 'http'
diff --git a/client/src/App.js b/client/src/App.js
index 3687dccb9c00258908b463b62db2071f0f6aa711..725cda0e1a2dc934bea37e9604b6f36c0cab89ba 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -3,8 +3,10 @@
   Author: Larbi Gharib <larbi.gharib@savoirfairelinux.com>
   License: AGPL-3
 */
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import React, { useState, useEffect } from 'react'
-import { Route, Switch, Redirect } from 'react-router-dom'
+import { Route, Routes, Navigate, PageLayout, useNavigate } from 'react-router-dom'
 import authManager from './AuthManager'
 //import logo from './logo.svg'
 import './App.scss'
@@ -21,6 +23,23 @@ import JamiAccountDialog from './pages/jamiAccountCreation.jsx'
 import { AnimatePresence } from 'framer-motion'
 import WelcomeAnimation from './components/welcome'
 
+const theme = createTheme();
+const useStyles = makeStyles((theme) => {
+  root: {
+    // some CSS that access to theme
+  }
+})
+
+const Home = (props) => {
+  console.log(`home ${props}`)
+  //const navigate = useNavigate()
+  const [state, setState] = useState({
+    auth: authManager.getState()
+  })
+
+  return <Navigate to="/account" />
+}
+
 const App = (props) => {
     const [state, setState] = useState({
       loaded: false,
@@ -39,31 +58,31 @@ const App = (props) => {
     if (displayWelcome) {
       return <WelcomeAnimation showSetup={!state.auth.setupComplete} onComplete={() => setDisplayWelcome(false)} />
     } else if (!state.auth.setupComplete) {
-      return <Switch>
-          <Route path="/setup" component={ServerSetup} />
-          <Route><Redirect to="/setup" /></Route>
-        </Switch>
+      return <Routes>
+          <Route path="/setup" element={<ServerSetup />} />
+          <Route path="/" element={<Navigate to="/setup" replace />} />
+          <Route index path="*" element={<Navigate to="/setup" replace />} />
+        </Routes>
     }
-    return <React.Fragment>
-          <Route
-      render={({ location }) => {
-        console.log("App render location")
 
-        return <AnimatePresence exitBeforeEnter initial={false}>
-          <Switch location={location} key={location.pathname}>
-            <Route exact path="/"><Redirect to="/account" /></Route>
-            <Route path="/account/:accountId/settings" component={AccountSettings} />
-            <Route path="/account/:accountId" component={JamiMessenger} />
-            <Route path="/account" component={AccountSelection} />
-            <Route path="/newAccount/jami" component={JamiAccountDialog} />
-            <Route path="/newAccount" component={AccountCreationDialog} />
-            <Route path="/setup"><Redirect to="/account" /></Route>
-            <Route component={NotFoundPage} />
-          </Switch>
-          {!state.auth.authenticated && <SignInPage open={!state.auth.authenticated}/>}
-        </AnimatePresence>}}
-      />
-    </React.Fragment>
+    return <ThemeProvider theme={theme}>
+    <Routes>
+      <Route path="/account">
+        <Route index element={<AccountSelection />} />
+        <Route path=":accountId">
+          <Route index path="*" element={<JamiMessenger />} />
+          <Route path="settings" element={<AccountSettings />} />
+        </Route>
+      </Route>
+      <Route path="/newAccount" element={<AccountCreationDialog />}>
+        <Route path="jami" element={<JamiAccountDialog />} />
+      </Route>
+      <Route path="/setup" element={<ServerSetup />} />
+      <Route path="/" index element={<Home />} />
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
+    {!state.auth.authenticated && <SignInPage key="signin" open={!state.auth.authenticated}/>}
+    </ThemeProvider>
 }
 
 export default App
diff --git a/client/src/AuthManager.js b/client/src/AuthManager.js
index 83f731fc531998659b938d659abcbe2d954c9083..21800cc82ee67229ae94b57bbeb863ad4f48f517 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -119,7 +119,7 @@ class AuthManager {
         console.log(response)
         if (response.ok) {
             console.log("Success, going home")
-            //history.replace('/')
+            //navigate('/')
         } else {
         }
         this.authenticating = false
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 363df68790b33f2abccad9680f059ab13df787d0..8160459d0eb66fae8185ee40562d44f53982d90d 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@material-ui/core'
-import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@material-ui/icons'
+
+
+import { makeStyles } from '@mui/styles'
+//import { createTheme, ThemeProvider } from '@mui/material/styles'
+
+import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Toolbar, IconButton, ListItemAvatar, Input, TextField } from '@mui/material'
+import { PhoneCallbackRounded, GroupRounded, DeleteRounded, AddCircle } from '@mui/icons-material'
 
 import Account from '../../../model/Account'
 import JamiIdCard from './JamiIdCard'
@@ -28,7 +32,7 @@ const useStyles = makeStyles(theme => ({
   },
   textField: {
     //marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(2),
+    //marginRight: theme.spacing(2),
   }
 }))
 
@@ -168,7 +172,7 @@ export default function AccountPreferences(props) {
                 placeholder="Enter new moderator name or URI"
                 fullWidth />
               <ListItemSecondaryAction>
-                <IconButton onClick={addModerator}><AddCircle /></IconButton>
+                <IconButton onClick={addModerator} size="large"><AddCircle /></IconButton>
               </ListItemSecondaryAction>
             </ListItem>
             {!moderators || moderators.length === 0 ?
@@ -181,7 +185,7 @@ export default function AccountPreferences(props) {
                   </ListItemAvatar>
                   <ListItemText primary={moderator.getDisplayName()} />
                   <ListItemSecondaryAction>
-                    <IconButton onClick={e => removeModerator(moderator.uri)}><DeleteRounded /></IconButton>
+                    <IconButton onClick={e => removeModerator(moderator.uri)} size="large"><DeleteRounded /></IconButton>
                   </ListItemSecondaryAction>
                 </ListItem>
               ))}
@@ -190,5 +194,6 @@ export default function AccountPreferences(props) {
         </motion.div>
       </List>
 
-    </motion.div>)
+    </motion.div>
+  );
 }
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index cbb64e1510c208990ca2a09a8472207cf1d2da90..2020a6e55aeadd26b499990d77e86b41f142251e 100644
--- a/client/src/components/ContactList.js
+++ b/client/src/components/ContactList.js
@@ -1,4 +1,4 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
 import React from 'react'
 
 export default function ContactList() {
diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
index 601fcf6236b2af4485452fa8dc96649bbe7d585a..e50c383d4d68d75d62701d5f04d29ce786333e37 100644
--- a/client/src/components/ConversationAvatar.js
+++ b/client/src/components/ConversationAvatar.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Avatar } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons'
+import { Avatar } from '@mui/material'
+import { PersonRounded } from '@mui/icons-material'
 
 export default function ConversationAvatar(props) {
   return <Avatar>
diff --git a/client/src/components/ConversationList.js b/client/src/components/ConversationList.js
index 9fa46503dd50e947125753c067334d3b9de8de65..48053075fcfd0e37b4ec0f3af2a308905be274ef 100644
--- a/client/src/components/ConversationList.js
+++ b/client/src/components/ConversationList.js
@@ -1,10 +1,10 @@
-import List from '@material-ui/core/List'
+import List from '@mui/material/List'
 import React from 'react'
 import ConversationListItem from './ConversationListItem'
-import ListSubheader from '@material-ui/core/ListSubheader';
+import ListSubheader from '@mui/material/ListSubheader';
 import Conversation from '../../../model/Conversation';
-import { GroupRounded as GroupIcon } from '@material-ui/icons';
-import Typography from '@material-ui/core/Typography';
+import { GroupRounded as GroupIcon } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
 
 export default function ConversationList(props) {
     return (
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 80a3aae992f93903a42749d72f4711a307c55765..ed69a770caa8f1e5f355e5d01e868b31417d6032 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,7 +1,7 @@
-import { ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { ListItem, ListItemAvatar, ListItemText } from '@mui/material'
 import React from 'react'
 import Conversation from '../../../model/Conversation'
-import { useHistory, useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router-dom"
 import ConversationAvatar from './ConversationAvatar'
 
 export default function ConversationListItem(props) {
@@ -9,7 +9,7 @@ export default function ConversationListItem(props) {
     const conversation = props.conversation
     const pathId = conversationId || contactId
     const isSelected = conversation.getDisplayUri() === pathId
-    const history = useHistory()
+    const navigate = useNavigate()
 
     const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
     if (conversation instanceof Conversation) {
@@ -18,7 +18,7 @@ export default function ConversationListItem(props) {
                 button
                 alignItems="flex-start"
                 selected={isSelected}
-                onClick={() => history.replace(`/account/${conversation.getAccountId()}/${uri}`)}>
+                onClick={() => navigate(`/account/${conversation.getAccountId()}/${uri}`)}>
                 <ListItemAvatar><ConversationAvatar displayName={conversation.getDisplayNameNoFallback()} /></ListItemAvatar>
                 <ListItemText
                     primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
diff --git a/client/src/components/ConversationsOverviewCard.js b/client/src/components/ConversationsOverviewCard.js
index 407ed941e2457984f037ff7431bc0ac2f2b0a39a..9c57bffbea6e910bd92a6ac70a85ae81015bb1e6 100644
--- a/client/src/components/ConversationsOverviewCard.js
+++ b/client/src/components/ConversationsOverviewCard.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { useHistory, useParams } from 'react-router';
+import { Box, Card, CardActionArea, CardContent, CircularProgress, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { useNavigate, useParams } from 'react-router';
 import authManager from '../AuthManager'
 import Conversation from '../../../model/Conversation';
 
@@ -15,7 +15,7 @@ const useStyles = makeStyles({
 
 export default function ConversationsOverviewCard(props) {
   const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()
   const accountId = props.accountId || useParams().accountId
   const [state, setState] = useState({ loaded: false })
 
@@ -31,7 +31,7 @@ export default function ConversationsOverviewCard(props) {
   }, [accountId])
 
   return (
-    <Card onClick={() => history.push(`/account/${accountId}`)} >
+    <Card onClick={() => navigate(`/account/${accountId}`)} >
       <CardActionArea>
         <CardContent>
           <Typography className={classes.title} color="textSecondary" gutterBottom>
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index c621b56f76e0cfd37ab8b2659933fac69f60a715..7db0dd24361f031485b24f7af4a57de771a38951 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -1,17 +1,17 @@
 import React, { useState } from 'react'
-import { Box, Button, Menu, MenuItem } from '@material-ui/core'
-import { useHistory, useParams } from "react-router-dom"
+import { Box, Button, Menu, MenuItem } from '@mui/material'
+import { useNavigate, useParams } from "react-router-dom"
 import authManager from '../AuthManager'
 
 export default function Header() {
-  const history = useHistory()
+  const navigate = useNavigate()
   const [anchorEl, setAnchorEl] = useState(null)
   const handleClick = (event) => setAnchorEl(event.currentTarget)
   const handleClose = () => setAnchorEl(null)
   const params = useParams()
 
-  const goToAccountSelection = () => history.push(`/account`)
-  const goToAccountSettings = () => history.push(`/account/${params.accountId}/settings`)
+  const goToAccountSelection = () => navigate(`/account`)
+  const goToAccountSettings = () => navigate(`/account/${params.accountId}/settings`)
 
   return (
     <Box>
diff --git a/client/src/components/JamiIdCard.js b/client/src/components/JamiIdCard.js
index 1ecfd9471146ffecab7722af3c1583d588f48f2e..68c4e6cdc77f348f5481b27a67495faffd4892f3 100644
--- a/client/src/components/JamiIdCard.js
+++ b/client/src/components/JamiIdCard.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Box, Card, CardContent, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Card, CardContent, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles({
   title: {
diff --git a/client/src/components/ListItemLink.js b/client/src/components/ListItemLink.js
index 8ff17d18ac7aa1d990dbefb5dc1b580ca313d5d7..915a24ba287c32b69b0c41dcd520f91b5b9620ab 100644
--- a/client/src/components/ListItemLink.js
+++ b/client/src/components/ListItemLink.js
@@ -1,8 +1,8 @@
 import React, { useMemo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import { Link as RouterLink } from 'react-router-dom';
 
 function ListItemLink(props) {
diff --git a/client/src/components/Message.js b/client/src/components/Message.js
index ab28177a23518e7becdcdc71f119d23eb51bf57c..7cfbbdc2209d51ba0dc551a369bbcc0e7ca92607 100644
--- a/client/src/components/Message.js
+++ b/client/src/components/Message.js
@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core'
-import { GroupOutlined } from '@material-ui/icons'
+import { Typography } from '@mui/material'
+import { GroupOutlined } from '@mui/icons-material'
 import React from 'react'
 import ConversationAvatar from './ConversationAvatar'
 
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 175f19bc846dafdd12395d3d61db87b7f8622d62..3ae1b1c76a569f13c8370f65cf59d4ac1bab300c 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,6 +1,6 @@
 import Message from './Message'
 import React, { useEffect } from 'react'
-import { Box, Divider, Typography } from '@material-ui/core'
+import { Box, Divider, Typography } from '@mui/material'
 import ConversationAvatar from './ConversationAvatar'
 
 export default function MessageList(props) {
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index 3543d6d20bb445f9e371e9329d86631bb81a25ae..a4c6f845f93fd68c6d597564d54c130d8f0108f6 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { InputBase, InputAdornment } from '@material-ui/core';
-import { SearchRounded } from '@material-ui/icons';
+import { InputBase, InputAdornment } from '@mui/material';
+import { SearchRounded } from '@mui/icons-material';
 
 export default function NewContactForm(props) {
     const [value, setValue] = useState('')
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index fa7c0f2dbfe6d1cadff8ab25f5921122440cdfcd..ae0a7def1feaf258f3118d29fdfd2f6e9048f618 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
+import makeStyles from '@mui/styles/makeStyles';
+import { IconButton, InputBase, Paper, Popper } from '@mui/material'
+import { Send, EmojiEmotionsRounded } from '@mui/icons-material'
 import EmojiPicker from 'emoji-picker-react'
 import authManager from '../AuthManager'
 
@@ -56,7 +56,12 @@ export default function SendMessageForm(props) {
         onSubmit={handleSubmit}
         className="send-message-card"
         className={classes.root}>
-        <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
+        <IconButton
+          aria-describedby={id}
+          variant="contained"
+          color="primary"
+          onClick={handleOpenEmojiPicker}
+          size="large">
           <EmojiEmotionsRounded />
         </IconButton>
         <Popper
@@ -80,10 +85,14 @@ export default function SendMessageForm(props) {
           value={currentMessage}
           onChange={handleInputChange}
         />
-        <IconButton type="submit" className={classes.iconButton} aria-label="search">
+        <IconButton
+          type="submit"
+          className={classes.iconButton}
+          aria-label="search"
+          size="large">
           <Send />
         </IconButton>
       </Paper>
     </div>
-  )
+  );
 }
diff --git a/client/src/components/UsernameChooser.js b/client/src/components/UsernameChooser.js
index 3d795ce73fda8d0e7ebc18b11399ad081dcaecb0..2df96c6af5396f8ec550b2b86c883898cb4e706d 100644
--- a/client/src/components/UsernameChooser.js
+++ b/client/src/components/UsernameChooser.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import usePromise from "react-fetch-hook/usePromise"
-import { InputAdornment, TextField } from '@material-ui/core'
-import { SearchRounded } from '@material-ui/icons'
+import { InputAdornment, TextField } from '@mui/material'
+import { SearchRounded } from '@mui/icons-material'
 import authManager from '../AuthManager'
 
 const isInputValid = input => input && input.length > 2
diff --git a/client/src/components/loading.js b/client/src/components/loading.js
index 198b99338098974e6f1510afa030ca1538eef102..dee6e88a7ba426408449d5587014857ab27531ff 100644
--- a/client/src/components/loading.js
+++ b/client/src/components/loading.js
@@ -1,4 +1,4 @@
-import { CircularProgress, Container } from '@material-ui/core';
+import { CircularProgress, Container } from '@mui/material';
 import React from 'react';
 
 export default function LoadingPage() {
diff --git a/client/src/components/welcome.js b/client/src/components/welcome.js
index ff39c0bedc56824c7868fe1a0fa0fcc7dc3d53a1..46c054c4a2e727f104298130375f63689a25ebfb 100644
--- a/client/src/components/welcome.js
+++ b/client/src/components/welcome.js
@@ -1,4 +1,4 @@
-import { Button, Container } from '@material-ui/core';
+import { Button, Container } from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
 import React, { useState } from 'react';
 import JamiLogo from '../../public/jami-logo-icon.svg'
diff --git a/client/src/index.js b/client/src/index.js
index 182e2cb0c8549ae4320a2ea7ee611e1c19ee34bc..27fa95547371e227440841327e31f39d745a8fd4 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
 import App from './App.js'
 import './index.scss'
-import { CssBaseline } from '@material-ui/core'
+//import { CssBaseline } from '@mui/material'
 
 //import * as serviceWorker from './serviceWorker'
 const rootEl = document.getElementById('root')
@@ -12,7 +12,6 @@ const rootEl = document.getElementById('root')
 const render = Component =>
 ReactDOM.render(
   <React.StrictMode>
-    <CssBaseline />
     <Router>
     <Component />
     </Router>
diff --git a/client/src/pages/404.jsx b/client/src/pages/404.jsx
index 8d0dcb16cbdea3f8727779127c9df8bfe1a06d39..23882b25b80438af4c700d3b900942051a2f014d 100644
--- a/client/src/pages/404.jsx
+++ b/client/src/pages/404.jsx
@@ -1,6 +1,3 @@
-import React from 'react';
-
-
 const NotFoundPage = () => {
     return (
         <div>
diff --git a/client/src/pages/JamiMessenger.jsx b/client/src/pages/JamiMessenger.jsx
index 13c8d48119608309153eb15eb0fd587061ee7c03..97601469bf5a081313f051069057e37f278863e8 100644
--- a/client/src/pages/JamiMessenger.jsx
+++ b/client/src/pages/JamiMessenger.jsx
@@ -1,14 +1,11 @@
-import { Route, Switch, useRouteMatch } from "react-router";
+import { Route, Routes } from 'react-router-dom'
+
 import Messenger from "./messenger.jsx"
 
 export default function JamiMessenger(props) {
-    const { path, url } = useRouteMatch();
-
-    console.log("JamiMessenger render")
-
-    return <Switch>
-        <Route path={`${path}/addContact/:contactId`} component={Messenger} />
-        <Route path={`${path}/conversation/:conversationId`} component={Messenger} />
-        <Route path={`${path}`} component={Messenger} />
-    </Switch>
-}
\ No newline at end of file
+    return <Routes>
+        <Route path="addContact/:contactId" element={<Messenger />} />
+        <Route path="conversation/:conversationId" element={<Messenger />} />
+        <Route index path="*" element={<Messenger />} />
+    </Routes>
+}
diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index 9fc30cfcc33cc1eab6004dae05da62446db08663..22313669800c8a54c4674340fc1725af9c5094f8 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { DialerSipRounded, GroupOutlined, RoomRounded } from '@material-ui/icons';
+import { Container, Card, CardContent, Typography, List, Avatar, Divider } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { DialerSipRounded, GroupOutlined, RoomRounded } from '@mui/icons-material';
 import ListItemLink from '../components/ListItemLink';
 
 const useStyles = makeStyles((theme) => ({
diff --git a/client/src/pages/accountSelection.jsx b/client/src/pages/accountSelection.jsx
index 6c52af4a64e9ff1874fc9b3dc089c6a3696229df..c9e07531391515cfd021de179c665200a0d5a03d 100644
--- a/client/src/pages/accountSelection.jsx
+++ b/client/src/pages/accountSelection.jsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Card, CardHeader, Container, List } from '@material-ui/core';
+import { Avatar, Card, CardHeader, Container, List } from '@mui/material';
 import Header from '../components/Header'
 import authManager from '../AuthManager'
 import Account from '../../../model/Account';
 import LoadingPage from '../components/loading';
 import ListItemLink from '../components/ListItemLink';
 import ConversationAvatar from '../components/ConversationAvatar';
-import { AddRounded } from '@material-ui/icons';
-import { useHistory } from 'react-router';
+import { AddRounded } from '@mui/icons-material';
+import { useNavigate } from 'react-router';
 import { motion } from 'framer-motion';
 
 const variants = {
@@ -16,7 +16,7 @@ const variants = {
 }
 
 const AccountSelection = (props) => {
-  const history = useHistory()
+  const navigate = useNavigate()
   const [state, setState] = useState({
     loaded: false,
     error: false,
@@ -30,7 +30,7 @@ const AccountSelection = (props) => {
       .then(result => {
         console.log(result)
         if (result.length === 0) {
-          history.replace('/newAccount')
+          navigate('/newAccount')
         } else {
           setState({
             loaded: true,
diff --git a/client/src/pages/accountSettings.jsx b/client/src/pages/accountSettings.jsx
index beca0fde3a7232ec8c74297ad00a2af9fd0e7d5f..597d246c6b543380008463be9b488ef5a811de0a 100644
--- a/client/src/pages/accountSettings.jsx
+++ b/client/src/pages/accountSettings.jsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import { useParams } from 'react-router';
-import { Container, CircularProgress } from '@material-ui/core';
+import { Container, CircularProgress } from '@mui/material';
 import Header from '../components/Header'
 import AccountPreferences from '../components/AccountPreferences'
 import authManager from '../AuthManager'
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index a4c32d7b890fd18bccb195226facb03cbeebf46f..d0451dfad3535584147291ade60b388935a4d565 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
-import { Box, Container, Fab, Card, CardContent, Typography } from '@material-ui/core';
-import GroupAddRounded from '@material-ui/icons/GroupAddRounded';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Container, Fab, Card, CardContent, Typography } from '@mui/material';
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded';
+import makeStyles from '@mui/styles/makeStyles';
 import authManager from '../AuthManager'
 
 const useStyles = makeStyles((theme) => ({
@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme) => ({
 
 export default function AddContactPage(props) {
   const classes = useStyles()
-  const history = useHistory();
+  const navigate = useNavigate();
   const accountId = props.accountId || props.match.params.accountId
   const contactId = props.contactId || props.match.params.contactId
 
@@ -35,7 +35,7 @@ export default function AddContactPage(props) {
 
     console.log(response)
     if (response.conversationId) {
-      history.push(`/account/${accountId}/conversation/${response.conversationId}`)
+      navigate(`/account/${accountId}/conversation/${response.conversationId}`)
     }
   }
 
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index ac5976253e8dd67e5dd3ef9c30ce910b4a0ee6bb..a37545d851ddc8cd09c406669f087c015b3e8e51 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
-import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { AddRounded } from '@material-ui/icons';
+import { Container, Card, CardContent, Typography, Fab, CardActions, Box } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import { AddRounded } from '@mui/icons-material';
 import UsernameChooser from '../components/UsernameChooser';
 import authManager from '../AuthManager'
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
 
 const useStyles = makeStyles((theme) => ({
   extendedIcon: {
@@ -29,7 +29,7 @@ export default function JamiAccountDialog(props) {
   const [name, setName] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(false)
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const onSubmit = async event => {
     event.preventDefault()
@@ -49,7 +49,7 @@ export default function JamiAccountDialog(props) {
       })
     console.log(result)
     if (result && result.accountId)
-      history.replace(`/account/${result.accountId}/settings`)
+      navigate(`/account/${result.accountId}/settings`)
   }
 
   return (
diff --git a/client/src/pages/loginDialog.jsx b/client/src/pages/loginDialog.jsx
index 4e15ae168276b9b398a437a31f3e9f52428b1e62..cdefa71cacb362660de729088576a5e49ff30d0a 100644
--- a/client/src/pages/loginDialog.jsx
+++ b/client/src/pages/loginDialog.jsx
@@ -1,29 +1,29 @@
 import React from 'react';
 
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
-import Grid from '@material-ui/core/Grid';
-import Box from '@material-ui/core/Box';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import CardActionArea from '@material-ui/core/CardActionArea';
-import CardActions from '@material-ui/core/CardActions';
-
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
-import Typography from '@material-ui/core/Typography';
-//import { makeStyles } from '@material-ui/core/styles';
-import Container from '@material-ui/core/Container';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Link from '@mui/material/Link';
+import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardActionArea from '@mui/material/CardActionArea';
+import CardActions from '@mui/material/CardActions';
+
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Typography from '@mui/material/Typography';
+//import { makeStyles } from '@mui/material/styles';
+import Container from '@mui/material/Container';
 import { Redirect } from 'react-router-dom';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import CircularProgress from '@mui/material/CircularProgress';
+import DialogTitle from '@mui/material/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 
 import authManager from '../AuthManager'
 
diff --git a/client/src/pages/serverConfiguration.jsx b/client/src/pages/serverConfiguration.jsx
index ba99fe6d5b2fbfefa181650df1df699d4902e67f..3bdfaaa87ca032936990f693269ce27715cbaaa9 100644
--- a/client/src/pages/serverConfiguration.jsx
+++ b/client/src/pages/serverConfiguration.jsx
@@ -1,18 +1,29 @@
-import React from 'react';
+import React from 'react'
 import Header from '../components/Header'
 import AccountPreferences from '../components/AccountPreferences'
-import Container from '@material-ui/core/Container';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import Container from '@mui/material/Container'
+import CircularProgress from '@mui/material/CircularProgress'
 import authManager from '../AuthManager'
 import Account from '../../../model/Account'
 
 const ServerOverview = (props) => {
 
-    this.accountId = props.accountId || props.match.params.accountId
-    this.state = { loaded: false, account: props.account }
-    this.req = undefined
+  this.accountId = props.accountId || props.match.params.accountId
+  this.state = { loaded: false, account: props.account }
+  this.req = undefined
+
+  useEffect(() => {
+    const controller = new AbortController()
+    authManager.fetch(`/api/serverConfig`, {signal: controller.signal})
+      .then(res => res.json())
+      .then(result => {
+        console.log(result)
+        setState({loaded: true, account: Account.from(result)})
+      }).catch(e => console.log(e))
+      return () => controller.abort()
+  }, [accountId])
 
-  componentDidMount() {
+  /*componentDidMount() {
     this.controller = new AbortController()
     if (this.req === undefined) {
       this.req = authManager.fetch(`/api/serverConfig`, {signal: this.controller.signal})
@@ -27,7 +38,7 @@ const ServerOverview = (props) => {
   componentWillUnmount() {
     this.controller.abort()
     this.req = undefined
-  }
+  }*/
 
   return (
     <Container maxWidth="sm" className="app" >
@@ -37,4 +48,4 @@ const ServerOverview = (props) => {
   )
 }
 
-export default ServerOverview;
\ No newline at end of file
+export default ServerOverview
\ No newline at end of file
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index 703f842eeb8ad2deecf25ab1de37acc147b906bd..db5b1552e46ac355c9c2bf449b5b98129fb78513 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -1,32 +1,33 @@
 import React, { useState } from 'react'
-import { useHistory } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
 
-import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@material-ui/core'
-import GroupAddRounded from '@material-ui/icons/GroupAddRounded'
-import { makeStyles } from '@material-ui/core/styles'
+import { Box, Container, Fab, Card, CardContent, Typography, Input } from '@mui/material'
+import GroupAddRounded from '@mui/icons-material/GroupAddRounded'
+import { makeStyles } from '@mui/styles';
 import authManager from '../AuthManager'
 
 const useStyles = makeStyles((theme) => ({
   root: {
     '& > *': {
-      margin: theme.spacing(1),
+      //margin: theme.spacing(1),
     },
   },
   extendedIcon: {
-    marginRight: theme.spacing(1),
+    //marginRight: theme.spacing(1),
   },
   wizardCard: {
     borderRadius: 8,
     maxWidth: 360,
     margin: "16px auto"
-  }, textField: {
-    margin: theme.spacing(1),
+  },
+  textField: {
+    //margin: theme.spacing(1),
   }
 }))
 
 export default function ServerSetup(props) {
   const classes = useStyles()
-  const history = useHistory()
+  const navigate = useNavigate()
   const [password, setPassword] = useState('')
   const [passwordRepeat, setPasswordRepeat] = useState('')
   const [loading, setLoading] = useState(false)