diff --git a/web-chat/src/ChatList.tsx b/web-chat/src/ChatList.tsx
new file mode 100644
index 0000000000..90e2238437
--- /dev/null
+++ b/web-chat/src/ChatList.tsx
@@ -0,0 +1,39 @@
+import { List, ListItem, ListItemText } from '@material-ui/core';
+import React from 'react';
+import { ChatMessage } from '../../build/main/chat/chat_message';
+
+interface Props {
+  messages: ChatMessage[];
+}
+
+export default function ChatList(props: Props) {
+  const messages = props.messages;
+
+  const listItems = messages.map((message) => (
+    <ListItem key={message.timestamp.toString()}>
+      <ListItemText primary={<Message message={message} />} />
+    </ListItem>
+  ));
+
+  return <List dense={true}>{listItems}</List>;
+}
+
+interface MessageProps {
+  message: ChatMessage;
+}
+
+function Message(props: MessageProps) {
+  const chatMsg = props.message;
+  const timestamp = chatMsg.timestamp.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: false,
+  });
+  return (
+    <div className="chat-message">
+      {`<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`}
+    </div>
+  );
+}
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index c3a1efe623..4b8f105010 100644
--- a/web-chat/src/Room.tsx
+++ b/web-chat/src/Room.tsx
@@ -1,8 +1,8 @@
-import { List, ListItem, ListItemText } from '@material-ui/core';
 import React, { useState } from 'react';
 import { ChatMessage } from 'waku-chat/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { ChatContentTopic } from './App';
+import ChatList from './ChatList';
 import MessageInput from './MessageInput';
 import { useWaku } from './WakuContext';
 
@@ -62,39 +62,3 @@ async function handleMessage(
     return messageSender(wakuMsg);
   }
 }
-
-interface ChatListProps {
-  messages: ChatMessage[];
-}
-
-function ChatList(props: ChatListProps) {
-  const messages = props.messages;
-
-  const listItems = messages.map((message) => (
-    <ListItem key={message.timestamp.toString()}>
-      <ListItemText primary={<Message message={message} />} />
-    </ListItem>
-  ));
-
-  return <List dense={true}>{listItems}</List>;
-}
-
-interface MessageProps {
-  message: ChatMessage;
-}
-
-function Message(props: MessageProps) {
-  const chatMsg = props.message;
-  const timestamp = chatMsg.timestamp.toLocaleString([], {
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: false,
-  });
-  return (
-    <div className="chat-message">
-      {`<${timestamp}> ${chatMsg.nick}: ${chatMsg.message}`}
-    </div>
-  );
-}