diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index 4841ea1..1673a38 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,26 +1,26 @@
 import Message from './Message'
 import React from 'react'
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import { PersonRounded } from '@material-ui/icons'
+import { Box, Divider, Typography } from '@material-ui/core'
+import ConversationAvatar from './ConversationAvatar'
 
 export default function MessageList(props) {
-    const displayName = props.conversation.getDisplayName()
+  const displayName = props.conversation.getDisplayName()
 
-    return (
-        <div className="message-list">
-            <Box>
-                <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
-                </Box>
-                <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
-                    <Typography variant="h5">{displayName}</Typography>
-                    <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
-                </Box>
-            </Box>
-            <Divider orientation="horizontal" />
-            {props.messages.map((message, index) =>
-                <Message key={index} username={message.senderId} text={message.text} />
-            )}
-        </div>
-    )
+  return (
+    <div className="message-list">
+      <Box>
+        <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
+          <ConversationAvatar displayName={props.conversation.getDisplayNameNoFallback()} />
+        </Box>
+        <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
+          <Typography variant="h6">{displayName}</Typography>
+          <Typography variant="subtitle1">{props.conversation.getId()}</Typography>
+        </Box>
+      </Box>
+      <Divider orientation="horizontal" />
+      {props.messages.map((message, index) =>
+        <Message key={index} username={message.senderId} text={message.text} />
+      )}
+    </div>
+  )
 }
\ No newline at end of file