diff --git a/src/App.js b/src/App.js
index 3c96b66..e6642ef 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,12 @@
 import React from 'react';
+import Users from "./components/Users/Users";
 
 const App = () => {
+    console.log('render App');
+
     return (
         <>
-
+            <Users/>
         </>
     );
 };
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/Users/User/User.js b/src/components/Users/User/User.js
new file mode 100644
index 0000000..ba95cb8
--- /dev/null
+++ b/src/components/Users/User/User.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const User = ({user}) => {
+    console.log('render User Item');
+
+    const {id, name, email} = user;
+
+    return (
+        <div>
+            <p>ID: {id}</p>
+            <p>NAME: {name}</p>
+            <p>EMAIL: {email}</p>
+            <hr/>
+        </div>
+    );
+};
+
+export default User;
\ No newline at end of file
diff --git a/src/components/Users/UserForm/UserForm.js b/src/components/Users/UserForm/UserForm.js
new file mode 100644
index 0000000..38d7a30
--- /dev/null
+++ b/src/components/Users/UserForm/UserForm.js
@@ -0,0 +1,75 @@
+import React, {useContext, useRef, useState} from 'react';
+
+import Input from "../../UI/Input/Input";
+import Button from "../../UI/Button/Button";
+
+import {UsersContext} from "../Users";
+
+const UserForm = () => {
+    console.log('render UserForm');
+
+    const [users, setUsers] = useContext(UsersContext);
+    const formRef = {
+        name: useRef(''),
+        username: useRef(''),
+        email: useRef(''),
+        phone: useRef(''),
+    }
+
+    const [saving, setSaving] = useState(false);
+
+    const createUser = () => {
+        setSaving(true);
+
+        fetch('https://jsonplaceholder.typicode.com/users', {
+            method: 'POST',
+            body: JSON.stringify({
+                name: formRef.name.current.value,
+                username: formRef.username.current.value,
+                email: formRef.email.current.value,
+                phone: formRef.phone.current.value
+            }),
+            headers: {
+                'Content-type': 'application/json; charset=UTF-8',
+            },
+        })
+            .then((res) => res.json())
+            .then((newUser) => {
+                //  RESET FORM
+                formRef.name.current.value = '';
+                formRef.username.current.value = '';
+                formRef.email.current.value = '';
+                formRef.phone.current.value = '';
+
+                // NEW USER
+                const newUsers = [newUser, ...users];
+                setUsers(newUsers)
+            })
+            .finally(() => {
+                setSaving(false);
+            });
+    }
+
+    const onSubmitHandler = (e) => {
+        e.preventDefault();
+
+        createUser()
+    }
+
+    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={'text'} ref={formRef.username} name={'username'} onChange={(e)=>{onInputChange(e, 'username')}} placeholder={'Username'}/>
+            <Input type={'email'} ref={formRef.email} name={'email'} onChange={(e)=>{onInputChange(e, 'email')}} placeholder={'Email'}/>
+            <Input type={'tel'} ref={formRef.phone} name={'phone'} onChange={(e)=>{onInputChange(e, 'phone')}} placeholder={'Phone'}/>
+
+            <Button type={'submit'} text={'Create New User'} disabled={saving}/>
+        </form>
+    );
+};
+
+export default UserForm;
\ No newline at end of file
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
new file mode 100644
index 0000000..0f2aca1
--- /dev/null
+++ b/src/components/Users/Users.js
@@ -0,0 +1,37 @@
+import React, {createContext, useEffect, useState} from 'react';
+
+import UserForm from "./UserForm/UserForm";
+import User from "./User/User";
+export const UsersContext = createContext(null);
+const Users = () => {
+    console.log('render Users');
+
+    const [users, setUsers] = useState();
+
+
+    useEffect(()=> {
+        fetch('http://jsonplaceholder.typicode.com/users')
+            .then(res => res.json())
+            .then((users) => {
+                setUsers(users);
+            })
+    }, [])
+
+    return (
+        <div>
+            <UsersContext.Provider value={[users, setUsers]}>
+                <UserForm/>
+            </UsersContext.Provider>
+
+            {users?.map(user => {
+                //  CHANGE jsonplaceholder DEFAULT IDs
+                //  In order to allow multiple creations of users
+                user.id = user.id + Date.now();
+
+                return <User key={user.id} user={user}/>
+            })}
+        </div>
+    );
+};
+
+export default Users;
\ 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