diff --git a/src/components/EventComponent/EventComponent.tsx b/src/components/EventComponent/EventComponent.tsx
index 41ff4140a..cee42873e 100644
--- a/src/components/EventComponent/EventComponent.tsx
+++ b/src/components/EventComponent/EventComponent.tsx
@@ -13,6 +13,7 @@ export type EventComponentProps = TimestampFormatterOptions & {
   message: LocalMessage & {
     event?: Event;
   };
+  unsafeHTML?: boolean;
   /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
   Avatar?: React.ComponentType<AvatarProps>;
 };
@@ -21,10 +22,17 @@ export type EventComponentProps = TimestampFormatterOptions & {
  * Component to display system and channel event messages
  */
 const UnMemoizedEventComponent = (props: EventComponentProps) => {
-  const { Avatar = DefaultAvatar, calendar, calendarFormats, format, message } = props;
+  const {
+    Avatar = DefaultAvatar,
+    calendar,
+    calendarFormats,
+    format,
+    message,
+    unsafeHTML = false,
+  } = props;
 
   const { t, tDateTimeParser } = useTranslationContext('EventComponent');
-  const { created_at = '', event, text, type } = message;
+  const { created_at = '', event, type } = message;
   const getDateOptions = { messageCreatedAt: created_at.toString(), tDateTimeParser };
 
   if (type === 'system')
@@ -32,7 +40,14 @@ const UnMemoizedEventComponent = (props: EventComponentProps) => {
       <div className='str-chat__message--system' data-testid='message-system'>
         <div className='str-chat__message--system__text'>
           <div className='str-chat__message--system__line' />
-          <p>{text}</p>
+          {unsafeHTML ? (
+            <div
+              dangerouslySetInnerHTML={{ __html: message.html || '' }}
+              data-unsafe-inner-html
+            />
+          ) : (
+            <p>{message.text}</p>
+          )}
           <div className='str-chat__message--system__line' />
         </div>
         <div className='str-chat__message--system__date'>
diff --git a/src/components/MessageList/renderMessages.tsx b/src/components/MessageList/renderMessages.tsx
index b46b03070..5b1a41036 100644
--- a/src/components/MessageList/renderMessages.tsx
+++ b/src/components/MessageList/renderMessages.tsx
@@ -99,7 +99,7 @@ export function defaultRenderMessages({
           data-message-id={message.id}
           key={message.id || message.created_at.toISOString()}
         >
-          <MessageSystem message={message} />
+          <MessageSystem message={message} unsafeHTML={messageProps.unsafeHTML} />
         </MessageListItem>,
       );
     } else {