diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx
index 1dd796a55f..5fc3d668b3 100644
--- a/web-chat/src/App.tsx
+++ b/web-chat/src/App.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.css';
 import Room from './Room';
+import WakuMock from './WakuMock';
 
 interface Props {
 }
@@ -14,8 +15,16 @@ class App extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      messages: ['Here is a line', 'Here is another line']
+      messages: []
     };
+
+     WakuMock.create().then((wakuMock) => {
+       wakuMock.on('message',(message)=>{
+         const messages = this.state.messages.slice();
+         messages.push(message.message);
+         this.setState({messages});
+       })
+     });
   }
 
   render() {
diff --git a/web-chat/src/WakuMock.ts b/web-chat/src/WakuMock.ts
index 9bb2cbdaca..7911e8aeed 100644
--- a/web-chat/src/WakuMock.ts
+++ b/web-chat/src/WakuMock.ts
@@ -35,7 +35,7 @@ export default class WakuMock extends EventEmitter<Message> {
   }
 
   public static async create(): Promise<WakuMock> {
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 500));
 
     const wakuMock = new WakuMock();
     wakuMock.startInterval();