diff --git a/web/components/chat/ChatAction/ChatActionMessage.module.scss b/web/components/chat/ChatAction/ChatActionMessage.module.scss
new file mode 100644
index 000000000..f7971ebd0
--- /dev/null
+++ b/web/components/chat/ChatAction/ChatActionMessage.module.scss
@@ -0,0 +1,4 @@
+.chatAction {
+  padding: 5px;
+  text-align: center;
+}
diff --git a/web/components/chat/ChatAction/ChatActionMessage.tsx b/web/components/chat/ChatAction/ChatActionMessage.tsx
new file mode 100644
index 000000000..3ad56c248
--- /dev/null
+++ b/web/components/chat/ChatAction/ChatActionMessage.tsx
@@ -0,0 +1,13 @@
+import s from './ChatActionMessage.module.scss';
+
+/* eslint-disable react/no-danger */
+interface Props {
+  body: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function ChatActionMessage(props: Props) {
+  const { body } = props;
+
+  return <div dangerouslySetInnerHTML={{ __html: body }} className={s.chatAction} />;
+}