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>
+  );
 }