diff --git a/client/src/components/ConversationList.tsx b/client/src/components/ConversationList.tsx
new file mode 100644
index 0000000..59ccfc3
--- /dev/null
+++ b/client/src/components/ConversationList.tsx
@@ -0,0 +1,47 @@
+import { GroupRounded as GroupIcon } from '@mui/icons-material';
+import List from '@mui/material/List';
+import ListSubheader from '@mui/material/ListSubheader';
+import Typography from '@mui/material/Typography';
+import { useEffect } from 'react';
+
+import Conversation from '../../../model/Conversation';
+import { useAppSelector } from '../../redux/hooks';
+import ConversationListItem from './ConversationListItem';
+
+type ConversationListProps = {
+  accountId: string;
+  conversations: Conversation[];
+  search?: Conversation;
+};
+export default function ConversationList(props: ConversationListProps) {
+  const { refresh } = useAppSelector((state) => state.app);
+
+  useEffect(() => {
+    console.log('refresh list');
+  }, [refresh]);
+
+  return (
+    <div className="rooms-list">
+      <List>
+        {props.search instanceof Conversation && (
+          <div>
+            <ListSubheader>Public directory</ListSubheader>
+            <ConversationListItem conversation={props.search} />
+            <ListSubheader>Conversations</ListSubheader>
+          </div>
+        )}
+        {props.conversations.map((conversation) => (
+          <ConversationListItem key={conversation.getId()} conversation={conversation} />
+        ))}
+        {props.conversations.length === 0 && (
+          <div className="list-placeholder">
+            <GroupIcon color="disabled" fontSize="large" />
+            <Typography className="subtitle" variant="subtitle2">
+              No conversation yet
+            </Typography>
+          </div>
+        )}
+      </List>
+    </div>
+  );
+}