diff --git a/web/components/chat/ChatSystemMessage.tsx b/web/components/chat/ChatSystemMessage.tsx
deleted file mode 100644
index a4459e51c..000000000
--- a/web/components/chat/ChatSystemMessage.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/no-unused-prop-types */
-import { ChatMessage } from '../../interfaces/chat-message.model';
-
-interface Props {
-  message: ChatMessage;
-}
-
-export default function ChatSystemMessage(props: Props) {
-  return <div>Component goes here</div>;
-}
diff --git a/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss b/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
new file mode 100644
index 000000000..16a4c21b2
--- /dev/null
+++ b/web/components/chat/ChatSystemMessage/ChatSystemMessage.module.scss
@@ -0,0 +1,13 @@
+@import 'styles/mixins.scss';
+
+.chatSystemMessage {
+  background-color: var(--theme-unknown-2);
+  margin: 5px;
+  border-radius: 15px;
+  border-color: rgba(0, 0, 0, 0.3);
+  border-width: 1px;
+  border-style: solid;
+  padding: 10px 10px;
+  max-width: 400px;
+  @include flexCenter;
+}
diff --git a/web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx b/web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx
new file mode 100644
index 000000000..b33386724
--- /dev/null
+++ b/web/components/chat/ChatSystemMessage/ChatSystemMessage.tsx
@@ -0,0 +1,9 @@
+import s from './ChatSystemMessage.module.scss';
+
+interface Props {
+  message: string;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function ChatSystemMessage({ message }: Props) {
+  return <div className={s.chatSystemMessage}>{message}</div>;
+}
diff --git a/web/stories/ChatSystemMessage.stories.tsx b/web/stories/ChatSystemMessage.stories.tsx
index f3902d049..3f904e837 100644
--- a/web/stories/ChatSystemMessage.stories.tsx
+++ b/web/stories/ChatSystemMessage.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import ChatSystemMessage from '../components/chat/ChatSystemMessage';
+import ChatSystemMessage from '../components/chat/ChatSystemMessage/ChatSystemMessage';
 import Mock from './assets/mocks/chatmessage-system.png';
 
 export default {
@@ -23,3 +23,6 @@ const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMe
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
+Basic.args = {
+  message: 'This is a system message.',
+};