diff --git a/frontend-react/src/components/MessageSection.js b/frontend-react/src/components/MessageSection.js
index bb95853162fa5802dc259dc41c8d0e299c1cb4b0..056b5cbc6c1fb00ce3f2487220785b3364790ce2 100644
--- a/frontend-react/src/components/MessageSection.js
+++ b/frontend-react/src/components/MessageSection.js
@@ -1,35 +1,41 @@
-import React, {useEffect, useRef} from 'react';
-import LeftMessage from "./LeftMessage";
-import RightMessage from "./RightMessage";
-import '../styles/style.css';
-
-const MessageArea = (props) => {
-
-    const End = useRef(null)
-
-    useEffect(() => {
-        if(props.messages.length > 0) {
-            scrollToBottom();
-        }
-        })
-
-    function scrollToBottom() {
-        End.current.scrollIntoView({behavior: "smooth"})
-    }
-
-    return (
-        <div className={props.area}>
-            {props.messages.map(mes => {
-                switch (mes.type) {
-                    case "right":
-                        return <RightMessage right_message={mes}/>;
-                    case "left":
-                        return <LeftMessage left_message={mes}/>;
-                }
-            })}
-            <div ref={End}></div>
-        </div>
-    );
-};
-
-export default MessageArea;
\ No newline at end of file
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import TextMessage from "./TextMessage";
+import '../styles/style.css';
+
+const MessageSection = (props) => {
+    const { area, messages } = props;
+    const End = useRef(null);
+
+    useEffect(() => {
+        if (messages.length > 0) {
+            scrollToBottom();
+        }
+    }, [messages]);
+
+    function scrollToBottom() {
+        End.current.scrollIntoView({ behavior: "smooth" });
+    }
+
+    return (
+        <div className={area}>
+            {messages.map((mes) => (
+                <TextMessage key={mes.id} message={mes} side={mes.type} />
+            ))}
+            <div ref={End}></div>
+        </div>
+    );
+};
+
+MessageSection.propTypes = {
+    area: PropTypes.string.isRequired,
+    messages: PropTypes.arrayOf(
+        PropTypes.shape({
+            id: PropTypes.number.isRequired,
+            type: PropTypes.oneOf(['left', 'right']).isRequired,
+            // Add other message properties here
+        })
+    ).isRequired,
+};
+
+export default MessageSection;
diff --git a/frontend-react/src/components/TextMessage.js b/frontend-react/src/components/TextMessage.js
new file mode 100644
index 0000000000000000000000000000000000000000..1820343fb8f628537bf83745a36cafd0fe3af50a
--- /dev/null
+++ b/frontend-react/src/components/TextMessage.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import '../styles/style.css';
+import Message from "./Message";
+
+const TextMessage = (props) => {
+    const { message, side } = props;
+
+    const messageClass = side === 'right' ? 'right_message' : 'left_message';
+
+    return (
+        <div className={messageClass}>
+            <div className={`icon ${side}`}></div>
+            <div className={`msg ${side}`}>
+                <Message message={message} />
+            </div>
+        </div>
+    );
+};
+
+export default TextMessage;