diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..ea7ed09
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..98a18d9
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-ts.iml" filepath="$PROJECT_DIR$/.idea/react-ts.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/react-ts.iml b/.idea/react-ts.iml
new file mode 100644
index 0000000..ff88395
--- /dev/null
+++ b/.idea/react-ts.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..9661ac7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/userProfile/src/index.tsx b/userProfile/src/index.tsx
index df4d969..3907e1c 100644
--- a/userProfile/src/index.tsx
+++ b/userProfile/src/index.tsx
@@ -1,5 +1,146 @@
 import './style.css';
+import React, { FC, useState } from 'react';
+import ReactDom from 'react-dom';
+import { Button, Input, Select, Gapped, Modal } from '@skbkontur/react-ui';
 
+const items = [
+    'Москва',
+    'Екатеринбург',
+    'Санкт-Петербург',
+    'Новосибирск',
+    'Казань',
+    'Нижний Новгород',
+    'Челябинск',
+    'Самара',
+    'Омск',
+    'Ростов-на-Дону',
+    'Уфа'
+];
+
+type FormData = {
+    name: string;
+    surname: string;
+    city: string;
+};
+
+type DataState = {
+    saved: FormData;
+    current: FormData;
+};
+
+const defaultForm = {
+    name: '',
+    surname: '',
+    city: undefined
+};
+
+const Form: React.FC = () => {
+    const [data, setData] = useState({
+        saved: { ...defaultForm },
+        current: { ...defaultForm }
+    });
+    const [saved, setSaved] = useState(false);
+    const [opened, setOpened] = useState(false);
+    const [panel, setPanel] = useState(false);
+    function changeValue(value: string, field: string) {
+        setData({ ...data, current: { ...data.current, [field]: value } });
+    }
+
+    function renderModal() {
+        const listItems = [];
+        if (data.current.name !== data.saved.name)
+            listItems.push(
+                <p>
+                    Имя: было {data.saved.name} стало {data.current.name}
+                </p>
+            );
+        if (data.current.surname !== data.saved.surname)
+            listItems.push(
+                <p>
+                    Фамилия: была {data.saved.surname} стала {data.current.surname}
+                </p>
+            );
+        if (data.saved.city !== data.current.city)
+            listItems.push(
+                <p>
+                    Город: был {data.saved.city} стал {data.current.city}
+                </p>
+            );
+        return (
+            <Modal onClose={close}>
+                <Modal.Header>Пользователь сохранен</Modal.Header>
+                <Modal.Body>{listItems.length !== 0 && saved && <div>Измененные данные: {listItems}</div>}</Modal.Body>
+                <Modal.Footer panel={panel}>
+                    <Button
+                        onClick={() => {
+                            close();
+                        }}
+                    >
+                        Закрыть
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+
+    function open() {
+        setOpened(true);
+    }
+
+    function close() {
+        setOpened(false);
+        setData({ ...data, saved: data.current });
+        setSaved(true);
+    }
+
+    return (
+        <>
+            <form>
+                <h1>Информация о пользователе</h1>
+                <Gapped gap={14} vertical>
+                    <label>
+                        <div className="name">Имя</div>
+                        <Input
+                            placeholder="Введите имя пользователя"
+                            value={data.current.name}
+                            onValueChange={name => changeValue(name, 'name')}
+                        />
+                    </label>
+                    <label>
+                        <div className="surname">Фамилия</div>
+                        <Input
+                            placeholder="Введите фамилию пользователя"
+                            value={data.current.surname}
+                            onValueChange={surname => changeValue(surname, 'surname')}
+                        />
+                    </label>
+                    <label>
+                        <div className="city">Город</div>
+                        <Select
+                            placeholder="Выберите город"
+                            items={items}
+                            value={data.current.city}
+                            onValueChange={city => changeValue(city, 'city')}
+                            search
+                        />
+                    </label>
+                    <Button
+                        use="primary"
+                        size="large"
+                        onClick={() => {
+                            open();
+                        }}
+                    >
+                        Сохранить
+                    </Button>
+                </Gapped>
+            </form>
+            {opened && renderModal()}
+        </>
+    );
+};
+
+ReactDom.render(<Form />, document.getElementById('userForm'));
 /**
  *  Итак, перед тобой пустой проект. Давай его чем-то заполним. Не стесняйся подсматривать в уже сделанные задачи,
  *  чтобы оттуда что-то скопировать.
@@ -55,5 +196,3 @@ import './style.css';
  *      гражданство, национальность, номер телефона и адрес электронной почты.
  *      Придумай, как избежать излишнего дублирования.
  */
-
-console.log('Hi from script!');
diff --git a/userProfile/src/style.css b/userProfile/src/style.css
index 582e3b7..0a38c3e 100644
--- a/userProfile/src/style.css
+++ b/userProfile/src/style.css
@@ -1,3 +1,8 @@
 body {
     font-family: "Segoe UI", Helvetica, sans-serif;
 }
+
+.name, .surname, .city {
+    display: inline-block;
+    width: 120px;
+}