diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx
index d25a3415fd..face976aca 100644
--- a/examples/web-chat/src/App.tsx
+++ b/examples/web-chat/src/App.tsx
@@ -2,8 +2,7 @@ import { multiaddr } from 'multiaddr';
 import PeerId from 'peer-id';
 import { useEffect, useState } from 'react';
 import './App.css';
-import { ChatMessage } from './ChatMessage';
-import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
+import { ChatMessage } from 'waku/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { StoreCodec } from 'waku/waku_store';
 import handleCommand from './command';
@@ -53,9 +52,7 @@ export default function App() {
   useEffect(() => {
     const handleRelayMessage = (wakuMsg: WakuMessage) => {
       if (wakuMsg.payload) {
-        const chatMsg = ChatMessage.fromWakuChatMessage(
-          WakuChatMessage.decode(wakuMsg.payload)
-        );
+        const chatMsg = ChatMessage.decode(wakuMsg.payload);
         if (chatMsg) {
           setNewMessages([chatMsg]);
         }
@@ -77,10 +74,7 @@ export default function App() {
             const messages = response
               .map((wakuMsg) => wakuMsg.payload)
               .filter((payload) => !!payload)
-              .map((payload) => WakuChatMessage.decode(payload as Uint8Array))
-              .map((wakuChatMessage) =>
-                ChatMessage.fromWakuChatMessage(wakuChatMessage)
-              );
+              .map((payload) => ChatMessage.decode(payload as Uint8Array));
             setArchivedMessages(messages);
           }
         } catch (e) {
@@ -132,7 +126,7 @@ export default function App() {
                 setNick
               );
               const commandMessages = response.map((msg) => {
-                return new ChatMessage(new Date(), new Date(), command, msg);
+                return ChatMessage.fromUtf8String(new Date(), command, msg);
               });
               setNewMessages(commandMessages);
             }}
diff --git a/examples/web-chat/src/ChatList.tsx b/examples/web-chat/src/ChatList.tsx
index 8a6c076062..864799dd52 100644
--- a/examples/web-chat/src/ChatList.tsx
+++ b/examples/web-chat/src/ChatList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { ChatMessage } from './ChatMessage';
+import { ChatMessage } from 'waku/chat_message';
 import {
   Message,
   MessageText,
@@ -43,14 +43,14 @@ export default function ChatList(props: Props) {
         {currentMessageGroup.map((currentMessage) => (
           <Message
             key={
-              currentMessage.receivedTimestampMs.valueOf() +
+              currentMessage.timestamp.valueOf() +
               currentMessage.nick +
-              currentMessage.message
+              currentMessage.payloadAsUtf8
             }
             authorName={currentMessage.nick}
             date={formatDisplayDate(currentMessage)}
           >
-            <MessageText>{currentMessage.message}</MessageText>
+            <MessageText>{currentMessage.payloadAsUtf8}</MessageText>
           </Message>
         ))}
       </MessageGroup>
@@ -84,7 +84,7 @@ function groupMessagesBySender(messageArray: ChatMessage[]): ChatMessage[][] {
 }
 
 function formatDisplayDate(message: ChatMessage): string {
-  return message.sentTimestamp.toLocaleString([], {
+  return message.timestamp.toLocaleString([], {
     month: 'short',
     day: 'numeric',
     hour: 'numeric',
@@ -127,14 +127,14 @@ function copyMergeUniqueReplace(
       copy.push(msg);
     }
   });
-  copy.sort((a, b) => a.sentTimestamp.valueOf() - b.sentTimestamp.valueOf());
+  copy.sort((a, b) => a.timestamp.valueOf() - b.timestamp.valueOf());
   return copy;
 }
 
 function isEqual(lhs: ChatMessage, rhs: ChatMessage): boolean {
   return (
     lhs.nick === rhs.nick &&
-    lhs.message === rhs.message &&
-    lhs.sentTimestamp.toString() === rhs.sentTimestamp.toString()
+    lhs.payloadAsUtf8 === rhs.payloadAsUtf8 &&
+    lhs.timestamp.toString() === rhs.timestamp.toString()
   );
 }
diff --git a/examples/web-chat/src/ChatMessage.ts b/examples/web-chat/src/ChatMessage.ts
deleted file mode 100644
index 8b8f696572..0000000000
--- a/examples/web-chat/src/ChatMessage.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
-
-export class ChatMessage {
-  constructor(
-    public receivedTimestampMs: Date,
-    public sentTimestamp: Date,
-    public nick: string,
-    public message: string
-  ) {}
-
-  static fromWakuChatMessage(wakuChatMessage: WakuChatMessage): ChatMessage {
-    return new ChatMessage(
-      new Date(),
-      wakuChatMessage.timestamp,
-      wakuChatMessage.nick,
-      wakuChatMessage.message
-    );
-  }
-}
diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index 76ccc5cc4b..b25a150d75 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -1,5 +1,4 @@
-import { ChatMessage } from './ChatMessage';
-import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
+import { ChatMessage } from 'waku/chat_message';
 import { WakuMessage } from 'waku/waku_message';
 import { ChatContentTopic } from './App';
 import ChatList from './ChatList';
@@ -54,7 +53,7 @@ async function handleMessage(
   if (message.startsWith('/')) {
     commandHandler(message);
   } else {
-    const chatMessage = new WakuChatMessage(new Date(), nick, message);
+    const chatMessage = ChatMessage.fromUtf8String(new Date(), nick, message);
     const wakuMsg = WakuMessage.fromBytes(
       chatMessage.encode(),
       ChatContentTopic