diff --git a/client/src/components/ConversationAvatar.js b/client/src/components/ConversationAvatar.js
new file mode 100644
index 0000000..b9160a1
--- /dev/null
+++ b/client/src/components/ConversationAvatar.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { Avatar } from '@material-ui/core';
+import { PersonRounded } from '@material-ui/icons'
+
+export default function ConversationAvatar(props) {
+  return <Avatar>{props.displayName ? props.displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
+}