diff --git a/src/App.js b/src/App.js
index 3c96b66..cb0dfef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,13 @@
 import React from 'react';
 
+import Comments from "./components/CommentsContainer/Comments";
+
 const App = () => {
+    console.log('render App');
+
     return (
         <>
-
+            <Comments/>
         </>
     );
 };
diff --git a/src/components/CommentsContainer/CommentForm/CommentForm.js b/src/components/CommentsContainer/CommentForm/CommentForm.js
new file mode 100644
index 0000000..866601f
--- /dev/null
+++ b/src/components/CommentsContainer/CommentForm/CommentForm.js
@@ -0,0 +1,73 @@
+import React, {useContext, useRef, useState} from 'react';
+
+import Input from "../../UI/Input/Input";
+import Button from "../../UI/Button/Button";
+
+import {CommentsContext} from "../Comments";
+import TextArea from "../../UI/TextArea/TextArea";
+
+const CommentForm = () => {
+    console.log('render CommentForm');
+
+    const [comments, setComments] = useContext(CommentsContext);
+    const formRef = {
+        name: useRef(''),
+        email: useRef(''),
+        body: useRef(''),
+    }
+
+    const [saving, setSaving] = useState(false);
+
+    const createComment = () => {
+        setSaving(true);
+
+        fetch('https://jsonplaceholder.typicode.com/comments', {
+            method: 'POST',
+            body: JSON.stringify({
+                postId: 1,
+                name: formRef.name.current.value,
+                email: formRef.email.current.value,
+                body: formRef.body.current.value
+            }),
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        })
+            .then((res) => res.json())
+            .then((newComment) => {
+                //  RESET FORM
+                formRef.name.current.value = '';
+                formRef.email.current.value = '';
+                formRef.body.current.value = '';
+
+                // NEW COMMENT
+                const newComments = [newComment, ...comments];
+                setComments(newComments)
+            })
+            .finally(() => {
+                setSaving(false);
+            });
+    }
+
+    const onSubmitHandler = (e) => {
+        e.preventDefault();
+
+        createComment()
+    }
+
+    const onInputChange = (e, name) => {
+        formRef[name].current.value = e.target.value;
+    }
+
+    return (
+        <form className={'form'} action={'#'} onSubmit={onSubmitHandler}>
+            <Input type={'text'} ref={formRef.name} name={'name'} onChange={(e)=>{onInputChange(e, 'name')}} placeholder={'Name'}/>
+            <Input type={'email'} ref={formRef.email} name={'email'} onChange={(e)=>{onInputChange(e, 'email')}} placeholder={'Email'}/>
+            <TextArea ref={formRef.body} name={'body'} onChange={(e)=>{onInputChange(e, 'body')}} placeholder={'Message'}/>
+
+            <Button type={'submit'} text={'Add New Comment'} disabled={saving}/>
+        </form>
+    );
+};
+
+export default CommentForm;
\ No newline at end of file
diff --git a/src/components/CommentsContainer/CommentItem/CommentItem.js b/src/components/CommentsContainer/CommentItem/CommentItem.js
new file mode 100644
index 0000000..9accb04
--- /dev/null
+++ b/src/components/CommentsContainer/CommentItem/CommentItem.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const CommentItem = ({comment}) => {
+    console.log('render Comment Item');
+
+    const {postId, id, name, email, body} = comment;
+
+    return (
+        <div>
+            <p>ID: {id}</p>
+            <p>POST ID: {postId}</p>
+            <p>NAME: {name}</p>
+            <p>EMAIL: {email}</p>
+            <p>COMMENT: {body}</p>
+            <hr/>
+        </div>
+    );
+};
+
+export default CommentItem;
\ No newline at end of file
diff --git a/src/components/CommentsContainer/Comments.js b/src/components/CommentsContainer/Comments.js
new file mode 100644
index 0000000..b8a1e6e
--- /dev/null
+++ b/src/components/CommentsContainer/Comments.js
@@ -0,0 +1,38 @@
+import React, {createContext, useEffect, useState} from 'react';
+
+import CommentForm from "./CommentForm/CommentForm";
+import CommentItem from "./CommentItem/CommentItem";
+
+export const CommentsContext = createContext(null);
+const Comments = () => {
+    console.log('render Comments');
+
+    const [comments, setComments] = useState();
+
+
+    useEffect(()=> {
+        fetch('https://jsonplaceholder.typicode.com/comments')
+            .then(res => res.json())
+            .then((comment) => {
+                setComments(comment);
+            })
+    }, [])
+
+    return (
+        <div>
+            <CommentsContext.Provider value={[comments, setComments]}>
+                <CommentForm />
+            </CommentsContext.Provider>
+
+            {comments?.map(comment => {
+                //  CHANGE jsonplaceholder DEFAULT IDs
+                //  In order to allow multiple creations of comments
+                comment.id = comment.id + Date.now();
+
+                return <CommentItem key={comment.id} comment={comment}/>
+            })}
+        </div>
+    );
+};
+
+export default Comments;
\ No newline at end of file
diff --git a/src/components/UI/Button/Button.js b/src/components/UI/Button/Button.js
new file mode 100644
index 0000000..679b6b9
--- /dev/null
+++ b/src/components/UI/Button/Button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Button = ({type, text, ...props}) => {
+    console.log('render Button');
+
+    return (
+        <div className={'form-controller'}>
+            <button type={type || 'submit'}{...props}>{text || 'Send'}</button>
+        </div>
+    );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/UI/Input/Input.js b/src/components/UI/Input/Input.js
new file mode 100644
index 0000000..cdbace1
--- /dev/null
+++ b/src/components/UI/Input/Input.js
@@ -0,0 +1,13 @@
+import React, {forwardRef} from 'react';
+
+const Input = forwardRef(({type, name, value, onChange, ...props}, ref) => {
+    console.log('render Input');
+
+    return (
+        <div className={'form-controller'}>
+            <input type={type || 'text'} ref={ref} name={name} value={value} onChange={onChange} {...props}/>
+        </div>
+    );
+});
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/UI/TextArea/TextArea.js b/src/components/UI/TextArea/TextArea.js
new file mode 100644
index 0000000..e799bb3
--- /dev/null
+++ b/src/components/UI/TextArea/TextArea.js
@@ -0,0 +1,15 @@
+import React, {forwardRef} from 'react';
+
+const TextArea = forwardRef(({name, value, onChange, ...props}, ref) => {
+    console.log('render TextArea');
+
+    return (
+        <div className={'form-controller'}>
+            <textarea ref={ref} name={name} onChange={onChange} {...props}>
+                {value}
+            </textarea>
+        </div>
+    );
+});
+
+export default TextArea;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..eaa6def 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
     <App />
-  </React.StrictMode>
+  // </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function