diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
index 6f38c3c..38f1291 100644
--- a/client/src/components/AccountList.js
+++ b/client/src/components/AccountList.js
@@ -1,29 +1,19 @@
-import React from 'react';
+import React from 'react'
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons';
 
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import Avatar from '@material-ui/core/Avatar';
-import PersonRoundedIcon from '@material-ui/icons/PersonRounded';
-
-class AccountList extends React.Component {
-  render() {
-    return (
-        <List>
-          {
-            this.props.accounts.map(account => <ListItem button key={account.getId()} onClick={() => this.props.onClick(account)}>
-              <ListItemAvatar>
-                <Avatar>
-                  <PersonRoundedIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
-            </ListItem>
-            )
-          }
-        </List>)
-  }
+export default function AccountList(props) {
+  return <List>
+    {
+      props.accounts.map(account => {
+        const displayName = account.getDisplayNameNoFallback()
+        return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
+          <ListItemAvatar>
+            <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
+        </ListItem>
+      })
+    }
+  </List>
 }
-
-export default AccountList;
\ No newline at end of file
diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index 7e13974..a769168 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -2,7 +2,7 @@
 import React from 'react'
 import Conversation from '../../../model/Conversation'
 import { useHistory, useParams } from "react-router-dom"
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import { PersonRounded } from '@material-ui/icons'
 
 export default function ConversationListItem(props) {
     const { conversationId, contactId } = useParams()
@@ -22,7 +22,7 @@
                 style={{overflow:'hidden'}}
                 onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
                 <ListItemAvatar>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
                 </ListItemAvatar>
                 <ListItemText
                     style={{overflow:'hidden', textOverflow:'ellipsis'}}
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
index d245976..c0408a1 100644
--- a/client/src/components/Header.js
+++ b/client/src/components/Header.js
@@ -32,7 +32,7 @@
             <Menu
                 id="simple-menu"
                 anchorEl={anchorEl}
-                keepMounted
+
                 open={Boolean(anchorEl)}
                 onClose={handleClose}
             >
diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index d856c17..4841ea1 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,7 +1,7 @@
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import React from 'react'
 import Message from './Message'
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import React from 'react'
+import { Avatar, Box, Divider, Typography } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons'
 
 export default function MessageList(props) {
     const displayName = props.conversation.getDisplayName()
@@ -10,7 +10,7 @@
         <div className="message-list">
             <Box>
                 <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
                 </Box>
                 <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
                     <Typography variant="h5">{displayName}</Typography>
diff --git a/client/src/components/NewContactForm.js b/client/src/components/NewContactForm.js
index c98c9b4..5636be2 100644
--- a/client/src/components/NewContactForm.js
+++ b/client/src/components/NewContactForm.js
@@ -1,7 +1,6 @@
 import React from 'react'
-import SearchIcon from '@material-ui/icons/Search';
-import InputBase from '@material-ui/core/InputBase';
-import InputAdornment from '@material-ui/core/InputAdornment';
+import { InputBase, InputAdornment } from '@material-ui/core';
+import { SearchRounded } from '@material-ui/icons';
 
 class NewContactForm extends React.Component {
     constructor(props) {
@@ -40,11 +39,8 @@
                     type="search"
                     placeholder="Ajouter un contact"
                     onChange={this.handleChange}
-                    startAdornment={
-                        <InputAdornment position="start">
-                            <SearchIcon />
-                        </InputAdornment>
-                        } />
+                    startAdornment={<InputAdornment position="start"><SearchRounded /></InputAdornment>}
+                />
             </form>
         )
     }
diff --git a/client/src/components/SendMessageForm.js b/client/src/components/SendMessageForm.js
index 6269e3b..48770ba 100644
--- a/client/src/components/SendMessageForm.js
+++ b/client/src/components/SendMessageForm.js
@@ -1,8 +1,7 @@
 import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { IconButton, InputBase, Paper, Popper } from '@material-ui/core'
-import SendIcon from '@material-ui/icons/Send'
-import EmojiIcon from '@material-ui/icons/EmojiEmotionsRounded'
+import { Send, EmojiEmotionsRounded } from '@material-ui/icons'
 import EmojiPicker from 'emoji-picker-react'
 
 const useStyles = makeStyles((theme) => ({
@@ -58,7 +57,7 @@
         className="send-message-card"
         className={classes.root}>
         <IconButton aria-describedby={id} variant="contained" color="primary" onClick={handleOpenEmojiPicker}>
-          <EmojiIcon />
+          <EmojiEmotionsRounded />
         </IconButton>
         <Popper
           id={id}
@@ -66,7 +65,7 @@
           anchorEl={anchorEl}
           onClose={handleClose}
         >
-          <EmojiPicker
+          <EmojiPicker.default
             onEmojiClick={onEmojiClick}
             disableAutoFocus={true}
             disableSkinTonePicker={true}
@@ -82,7 +81,7 @@
           onChange={handleInputChange}
         />
         <IconButton type="submit" className={classes.iconButton} aria-label="search">
-          <SendIcon />
+          <Send />
         </IconButton>
       </Paper>
     </div>