diff --git a/JamiDaemon.js b/JamiDaemon.js
index efc39c1..1431a62 100755
--- a/JamiDaemon.js
+++ b/JamiDaemon.js
@@ -29,7 +29,7 @@
         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 6a6e74b..51388ab 100644
--- a/README.txt
+++ b/README.txt
@@ -8,8 +8,8 @@
 
 # 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 9bff634..da9e365 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 3687dcc..725cda0 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 { 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 @@
     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 83f731f..21800cc 100644
--- a/client/src/AuthManager.js
+++ b/client/src/AuthManager.js
@@ -119,7 +119,7 @@
         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 363df68..8160459 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 @@
   },
   textField: {
     //marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(2),
+    //marginRight: theme.spacing(2),
   }
 }))
 
@@ -168,7 +172,7 @@
                 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 @@
                   </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 @@
         </motion.div>
       </List>
 
-    </motion.div>)
+    </motion.div>
+  );
 }
diff --git a/client/src/components/ContactList.js b/client/src/components/ContactList.js
index cbb64e1..2020a6e 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 601fcf6..e50c383 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 9fa4650..4805307 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 80a3aae..ed69a77 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 @@
     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 @@
                 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 407ed94..9c57bff 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 @@
 
 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 @@
   }, [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 c621b56..7db0dd2 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 1ecfd94..68c4e6c 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 8ff17d1..915a24b 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 ab28177..7cfbbdc 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 175f19b..3ae1b1c 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 3543d6d..a4c6f84 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 fa7c0f2..ae0a7de 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 @@
         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 @@
           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 3d795ce..2df96c6 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 198b993..dee6e88 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 ff39c0b..46c054c 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 182e2cb..27fa955 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -4,7 +4,7 @@
 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 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 8d0dcb1..23882b2 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 13c8d48..9760146 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 9fc30cf..2231366 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 6c52af4..c9e0753 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 AccountSelection = (props) => {
-  const history = useHistory()
+  const navigate = useNavigate()
   const [state, setState] = useState({
     loaded: false,
     error: false,
@@ -30,7 +30,7 @@
       .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 beca0fd..597d246 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 a4c32d7..d0451df 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 @@
 
 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 @@
 
     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 ac59762..a37545d 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 @@
   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 @@
       })
     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 4e15ae1..cdefa71 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 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 '@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 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 ba99fe6..3bdfaaa 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
 
-  componentDidMount() {
+  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() {
     this.controller = new AbortController()
     if (this.req === undefined) {
       this.req = authManager.fetch(`/api/serverConfig`, {signal: this.controller.signal})
@@ -27,7 +38,7 @@
   componentWillUnmount() {
     this.controller.abort()
     this.req = undefined
-  }
+  }*/
 
   return (
     <Container maxWidth="sm" className="app" >
@@ -37,4 +48,4 @@
   )
 }
 
-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 703f842..db5b155 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)