diff --git a/client/src/components/AccountList.js b/client/src/components/AccountList.js
index 38f1291..594c979 100644
--- a/client/src/components/AccountList.js
+++ b/client/src/components/AccountList.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import { Avatar, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons';
+import { List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import ConversationAvatar from './ConversationAvatar'
 
 export default function AccountList(props) {
   return <List>
@@ -9,7 +9,7 @@
         const displayName = account.getDisplayNameNoFallback()
         return <ListItem button key={account.getId()} onClick={() => props.onClick(account)}>
           <ListItemAvatar>
-            <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+            <ConversationAvatar displayName={displayName} />
           </ListItemAvatar>
           <ListItemText primary={account.getDisplayName()} secondary={account.getDisplayUri()} />
         </ListItem>