diff --git a/client/src/components/ConversationListItem.js b/client/src/components/ConversationListItem.js
index cc72c70..7e13974 100644
--- a/client/src/components/ConversationListItem.js
+++ b/client/src/components/ConversationListItem.js
@@ -1,34 +1,34 @@
 import { Avatar, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'
 import React from 'react'
 import Conversation from '../../../model/Conversation'
-import { withRouter } from 'react-router-dom';
+import { useHistory, useParams } from "react-router-dom"
+import PersonIcon from '@material-ui/icons/PersonRounded'
 
-class ConversationListItem extends React.Component {
-    render() {
-        const conversation = this.props.conversation;
-        const pathId = this.props.match.params.conversationId || this.props.match.params.contactId
-        const isSelected = conversation.getDisplayUri() === pathId
-        console.log("ConversationListItem render " + conversation)
-        console.log(this.props)
+export default function ConversationListItem(props) {
+    const { conversationId, contactId } = useParams()
+    const conversation = props.conversation
+    const pathId = conversationId || contactId
+    const isSelected = conversation.getDisplayUri() === pathId
+    const displayName = conversation.getDisplayName()
+    const history = useHistory()
 
-        const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`;
-        if (conversation instanceof Conversation) {
-            return (
-                <ListItem
-                    button
-                    alignItems="flex-start"
-                    selected={isSelected}
-                    style={{overflow:'hidden'}}
-                    onClick={() => this.props.history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
-                    <ListItemAvatar><Avatar>{conversation.getDisplayName()[0].toUpperCase()}</Avatar></ListItemAvatar>
-                    <ListItemText
-                        style={{overflow:'hidden', textOverflow:'ellipsis'}}
-                        primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
-                </ListItem>
-            )
-        } else
-            return null
-    }
+    const uri = conversation.getId() ? `conversation/${conversation.getId()}` : `addContact/${conversation.getFirstMember().contact.getUri()}`
+    if (conversation instanceof Conversation) {
+        return (
+            <ListItem
+                button
+                alignItems="flex-start"
+                selected={isSelected}
+                style={{overflow:'hidden'}}
+                onClick={() => history.push(`/account/${conversation.getAccountId()}/${uri}`)}>
+                <ListItemAvatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                </ListItemAvatar>
+                <ListItemText
+                    style={{overflow:'hidden', textOverflow:'ellipsis'}}
+                    primary={conversation.getDisplayName()} secondary={conversation.getDisplayUri()} />
+            </ListItem>
+        )
+    } else
+        return null
 }
-
-export default withRouter(ConversationListItem)
\ No newline at end of file