diff --git a/client/src/pages/accountCreation.jsx b/client/src/pages/accountCreation.jsx
index 2231366..382ab1a 100644
--- a/client/src/pages/accountCreation.jsx
+++ b/client/src/pages/accountCreation.jsx
@@ -1,23 +1,13 @@
 import React from 'react';
 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) => ({
-  wizardCard: {
-    borderRadius: 8,
-    maxWidth: 360,
-    margin: "16px auto"
-  }
-}))
-
 export default function AccountCreationDialog(props) {
-  const classes = useStyles()
 
   return (
     <Container>
-      <Card className={classes.wizardCard}>
+      <Card>
         <CardContent>
           <Typography gutterBottom variant="h5" component="h2">
             Create new account
@@ -28,7 +18,7 @@
           </Typography>
         </CardContent>
 
-        <List className={classes.root}>
+        <List>
           <ListItemLink
             to="/newAccount/rendezVous"
             icon={<Avatar><RoomRounded /></Avatar>}
diff --git a/client/src/pages/addContactPage.jsx b/client/src/pages/addContactPage.jsx
index d0451df..e47ed95 100644
--- a/client/src/pages/addContactPage.jsx
+++ b/client/src/pages/addContactPage.jsx
@@ -3,22 +3,9 @@
 
 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) => ({
-  root: {
-    '& > *': {
-      margin: theme.spacing(1),
-    },
-  },
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  },
-}))
-
 export default function AddContactPage(props) {
-  const classes = useStyles()
   const navigate = useNavigate();
   const accountId = props.accountId || props.match.params.accountId
   const contactId = props.contactId || props.match.params.contactId
@@ -47,7 +34,7 @@
           <Typography variant='body1'>{contactId}</Typography>
           <Box style={{textAlign: 'center', marginTop: 16}}>
           <Fab variant='extended' color='primary' onClick={handleClick}>
-            <GroupAddRounded className={classes.extendedIcon} />
+            <GroupAddRounded/>
             Add contact
           </Fab>
           </Box>
diff --git a/client/src/pages/jamiAccountCreation.jsx b/client/src/pages/jamiAccountCreation.jsx
index a37545d..acecd27 100644
--- a/client/src/pages/jamiAccountCreation.jsx
+++ b/client/src/pages/jamiAccountCreation.jsx
@@ -1,31 +1,11 @@
 import React, { useState } from 'react';
 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 { useNavigate } from 'react-router';
 
-const useStyles = makeStyles((theme) => ({
-  extendedIcon: {
-    marginRight: theme.spacing(1),
-  },
-  wizardCard: {
-    borderRadius: 8,
-    maxWidth: 360,
-    margin: "16px auto"
-  },
-  actionArea: {
-    textAlign: 'center',
-    display: 'block'
-  },
-  chooser: {
-    marginTop: 16
-  }
-}))
-
 export default function JamiAccountDialog(props) {
-  const classes = useStyles()
   const [name, setName] = useState('')
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(false)
@@ -54,7 +34,7 @@
 
   return (
     <Container>
-      <Card component="form" onSubmit={onSubmit} className={classes.wizardCard}>
+      <Card component="form" onSubmit={onSubmit}>
         <CardContent>
           <Typography gutterBottom variant="h5" component="h2">
             Create Jami account
@@ -64,14 +44,14 @@
             Let's start by creating a new administrator account to control access to the server configuration.
           </Typography>
 
-          <Box className={classes.chooser} >
+          <Box>
             <UsernameChooser disabled={loading} setName={setName} />
           </Box>
         </CardContent>
-        <CardActions className={classes.actionArea}>
+        <CardActions>
           {error && <Typography color="error">Error: {JSON.stringify(error)}</Typography>}
           <Fab color="primary" type="submit" variant="extended" disabled={!name || loading}>
-            <AddRounded className={classes.extendedIcon} />
+            <AddRounded/>
             Register name
           </Fab>
         </CardActions>
diff --git a/client/src/pages/serverSetup.jsx b/client/src/pages/serverSetup.jsx
index d431568..e2722fd 100644
--- a/client/src/pages/serverSetup.jsx
+++ b/client/src/pages/serverSetup.jsx
@@ -2,24 +2,9 @@
 
 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),
-    },
-  },
-  wizardCard: {
-    borderRadius: 8,
-    maxWidth: 360,
-    margin: "16px auto"
-  },
-}))
-
 export default function ServerSetup(props) {
-  const classes = useStyles()
   const [password, setPassword] = useState('')
   const [passwordRepeat, setPasswordRepeat] = useState('')
   const [loading, setLoading] = useState(false)
@@ -36,7 +21,7 @@
 
   return (
     <Container className='message-list'>
-      <Card className={classes.wizardCard} disabled={loading}>
+      <Card disabled={loading}>
         <CardContent component="form" onSubmit={handleSubmit}>
           <Typography gutterBottom variant="h5" component="h2">
           Jami Web Node setup
@@ -47,9 +32,8 @@
           </Typography>
 
           <Box style={{ textAlign: 'center', marginTop: 8, marginBottom: 16 }}>
-          <div><Input className={classes.textField} value="admin" name="username" autoComplete="username" disabled /></div>
+          <div><Input value="admin" name="username" autoComplete="username" disabled /></div>
           <div><Input
-            className={classes.textField}
             value={password}
             onChange={e => setPassword(e.target.value)}
             name="password"
@@ -58,7 +42,6 @@
             autoComplete="new-password" />
           </div>
           <div><Input
-            className={classes.textField}
             value={passwordRepeat}
             onChange={e => setPasswordRepeat(e.target.value)}
             name="password"
@@ -69,7 +52,7 @@
           </Box>
           <Box style={{ textAlign: 'center', marginTop: 24 }}>
             <Fab variant='extended' color='primary' type='submit' disabled={!isValid()}>
-              <GroupAddRounded className={classes.extendedIcon} />
+              <GroupAddRounded/>
               Create admin account
             </Fab>
           </Box>