diff --git a/frontend-react/src/components/ChatbotComponent.js b/frontend-react/src/components/ChatbotComponent.js
index 455736b8c2655b3f1a08219a8ff49c34e26d63e0..9c8b1ddc25d447c5c69451f1b432999a31a34cfd 100644
--- a/frontend-react/src/components/ChatbotComponent.js
+++ b/frontend-react/src/components/ChatbotComponent.js
@@ -1,13 +1,13 @@
 import React, {useEffect, useState} from 'react';
 import "../styles/style.css";
 import Header from "./Header";
-import InputArea from "./Input_area";
-import MessageArea from "./Message_Area";
+import InputArea from "./InputSection";
+import MessageArea from "./MessageSection";
 import Sidebar from "./Sidebar";
 import io from 'socket.io-client';
 
-import RightMessage from "./Right_message";
-import LeftMessage from "./Left_message";
+import RightMessage from "./RightMessage";
+import LeftMessage from "./LeftMessage";
 
 const socket = io();
 const ChatbotComponent = () => {
@@ -21,7 +21,7 @@ const ChatbotComponent = () => {
     const[update, setUpdate] = useState("reload.png");
 
     const greetingMessage = {
-        info: "Hey, Welcome to Recipe Selection System, Say Hi to start chat?",
+        info: "Hey, Welcome to FoodWhizz, what would you like to have today? Say Hey to start...",
         date: getCurrentTime(),
         type: "left",
         name: "FoodWhizz"
diff --git a/frontend-react/src/components/InputSection.js b/frontend-react/src/components/InputSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..423321bc4f0594c7db3196a63e3f9493d66e6d9c
--- /dev/null
+++ b/frontend-react/src/components/InputSection.js
@@ -0,0 +1,38 @@
+import React, {useRef, useState} from 'react';
+import '../styles/style.css';
+
+const InputArea = (props) => {
+
+    const [value, setValue] = useState("")
+    const textareaRef = useRef(null);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            return false;
+        }
+    };
+
+    // Function to handle sending messages
+    function HandleSend(){
+        if (value !== "") {
+            props.send_button(value, "right");
+            setValue("")
+        }
+
+    }
+
+    return (
+        <div className="header_bottom" id="input">
+            <textarea id="input_area" ref={textareaRef} onKeyDown={handleKeyDown} placeholder="say HEY to start" value={value} onChange={event => setValue(event.target.value)}></textarea>
+            <button className="send_button" type="submit" id="send" onClick={HandleSend}>Send</button>
+        </div>
+    );
+};
+
+document.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter') {
+        document.getElementById('send').click();
+    }
+});
+
+export default InputArea;
diff --git a/frontend-react/src/components/LeftMessage.js b/frontend-react/src/components/LeftMessage.js
new file mode 100644
index 0000000000000000000000000000000000000000..95afdf12801363cceb7877e2b6cc9cfa79015bc8
--- /dev/null
+++ b/frontend-react/src/components/LeftMessage.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import Message from "./Message";
+import '../styles/style.css';
+
+const LeftMessage = (props) => {
+    return (
+        <div className="left_message">
+            <div className="icon left"></div>
+            <div className="msg left">
+                <Message message={props.left_message}/>
+            </div>
+        </div>
+    );
+};
+
+export default LeftMessage;
\ No newline at end of file
diff --git a/frontend-react/src/components/MessageSection.js b/frontend-react/src/components/MessageSection.js
new file mode 100644
index 0000000000000000000000000000000000000000..bb95853162fa5802dc259dc41c8d0e299c1cb4b0
--- /dev/null
+++ b/frontend-react/src/components/MessageSection.js
@@ -0,0 +1,35 @@
+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
diff --git a/frontend-react/src/components/RightMessage.js b/frontend-react/src/components/RightMessage.js
new file mode 100644
index 0000000000000000000000000000000000000000..b5a21a5d4492fb45620b0178ff1d055dce1a32d4
--- /dev/null
+++ b/frontend-react/src/components/RightMessage.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import '../styles/style.css';
+import Message from "./Message";
+
+const RightMessage = (props) => {
+    return (
+        <div className="right_message">
+            <div className="icon"></div>
+            <div className="msg right">
+                <Message message={props.right_message}/>
+            </div>
+        </div>
+    );
+};
+
+export default RightMessage;
\ No newline at end of file
diff --git a/frontend-react/src/components/Sidebar.js b/frontend-react/src/components/Sidebar.js
index e64bb573b6b1977140e69dcfd4d6553c3b0e59fa..3fbf4cc211c635e72a3f8fa96a36c2f05a3ed65e 100644
--- a/frontend-react/src/components/Sidebar.js
+++ b/frontend-react/src/components/Sidebar.js
@@ -31,4 +31,4 @@ const Sidebar = (props) => {
         </div>
     );
 };
-export default Sidebar;
+export default Sidebar;
\ No newline at end of file