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)