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/UserForm/UserForm.js b/src/components/Users/UserForm/UserForm.js
new file mode 100644
index 0000000..26a3ffa
--- /dev/null
+++ b/src/components/Users/UserForm/UserForm.js
@@ -0,0 +1,35 @@
+import React, {useRef} from 'react';
+
+import Input from "../../UI/Input/Input";
+import Button from "../../UI/Button/Button";
+
+const UserForm = () => {
+    console.log('render UserForm');
+
+    const nameRef = useRef('');
+    const usernameRef = useRef('');
+    const emailRef = useRef('');
+    const phoneRef = useRef('');
+
+    const onSubmitHandler = (e) => {
+        e.preventDefault();
+
+        console.log(nameRef.current.value)
+        console.log(usernameRef.current.value)
+        console.log(emailRef.current.value)
+        console.log(phoneRef.current.value)
+    }
+
+    return (
+        <form className={'form'} action={'#'} onSubmit={(e) => onSubmitHandler(e)}>
+            <Input type={'text'} ref={nameRef} name={'name'} value={nameRef.current.value} placeholder={'Name'}/>
+            <Input type={'text'} ref={usernameRef} name={'username'} value={usernameRef.current.value} placeholder={'Username'}/>
+            <Input type={'email'} ref={emailRef} name={'email'} value={emailRef.current.value} placeholder={'Email'}/>
+            <Input type={'tel'} ref={phoneRef} name={'phone'} value={phoneRef.current.value} placeholder={'Phone'}/>
+
+            <Button type={'submit'} text={'Create New User'}/>
+        </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..d7b35a3
--- /dev/null
+++ b/src/components/Users/Users.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import UserForm from "./UserForm/UserForm";
+
+const Users = () => {
+    console.log('render Users');
+
+    return (
+        <div>
+           <UserForm/>
+        </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