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'