diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
new file mode 100644
index 0000000..3a271fc
--- /dev/null
+++ b/client/src/components/ConversationListItem.js
@@ -0,0 +1,16 @@
+import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
+import React from 'react'
+
+class ConversationListItem extends React.Component {
+    render() {
+
+        return (
+            <ListItem alignItems="flex-start">
+                <ListItemAvatar><Avatar>{this.props.conversation.getDisplayName()[0]}</Avatar></ListItemAvatar>
+                <ListItemText primary={this.props.conversation.getDisplayName()} />
+            </ListItem>
+        )
+    }
+}
+
+export default ConversationListItem
\ No newline at end of file