diff --git a/src/App.tsx b/src/App.tsx
index a9a9bb4c53..62053aad05 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,113 @@
+import React, { useState } from 'react';
+
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import todosFromServer from './api/todos';
+import usersFromServer from './api/users';
+import todosFromServer from './api/todos';
+
+import { TodoList } from './components/TodoList';
+import { Todo } from './types/Todo';
+import { User } from './types/User';
+
+const getNewTodoId = (todo: Todo[]) => {
+  const maxId = Math.max(...todo.map(todoMax => todoMax.id));
+
+  return maxId + 1;
+};
+
+const getUserById = (userId: number): User => {
+  return usersFromServer.find(user => user.id === userId) as User;
+};
+
+const initialTodos = todosFromServer.map(todo => ({
+  ...todo,
+  user: getUserById(todo.userId),
+}));
+
+export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>(initialTodos);
+  const [title, setTitle] = useState('');
+  const [userId, setUserId] = useState(0);
+  const [hasTitleError, setTitleError] = useState(false);
+  const [hasUserIdError, setUserIdError] = useState(false);
+
+  const handlUserSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setUserId(Number(event.currentTarget.value));
+    setUserIdError(false);
+  };
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const regExp = /[^a-zA-ZА-ЩЬЮЯҐЄІЇа-щьюяґєі0-9\s]/g;
+    const value = e.currentTarget.value.replace(regExp, '');
+
+    setTitle(value);
+    setTitleError(false);
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    setTitleError(!title);
+    setUserIdError(!userId);
+
+    if (title && userId) {
+      setTitle('');
+      setUserId(0);
+
+      const newTodo = {
+        id: getNewTodoId(todos),
+        title,
+        completed: false,
+        userId,
+        user: getUserById(userId),
+      };
+
+      setTodos(currentTodos => [...currentTodos, newTodo]);
+    }
+  };
 
-export const App = () => {
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form action="/api/todos" method="POST" onSubmit={handleFormSubmit}>
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <label>
+            {'Title: '}
+            <input
+              type="text"
+              data-cy="titleInput"
+              value={title}
+              onChange={handleTitleChange}
+              placeholder="Enter a title"
+            />
+          </label>
+          {hasTitleError && <span className="error">Please enter a title</span>}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
-            <option value="0" disabled>
-              Choose a user
-            </option>
-          </select>
+          <label>
+            {'User: '}
+            <select
+              data-cy="userSelect"
+              value={userId}
+              onChange={handlUserSelect}
+            >
+              <option value="0" disabled>
+                Choose a user
+              </option>
+
+              {usersFromServer.map(user => (
+                <option key={user.id} value={user.id}>
+                  {user.name}
+                </option>
+              ))}
+            </select>
+          </label>
 
-          <span className="error">Please choose a user</span>
+          {hasUserIdError && (
+            <span className="error">Please choose a user</span>
+          )}
         </div>
 
         <button type="submit" data-cy="submitButton">
@@ -29,33 +115,7 @@ export const App = () => {
         </button>
       </form>
 
-      <section className="TodoList">
-        <article data-id="1" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
-
-          <a className="UserInfo" href="mailto:Sincere@april.biz">
-            Leanne Graham
-          </a>
-        </article>
-
-        <article data-id="15" className="TodoInfo TodoInfo--completed">
-          <h2 className="TodoInfo__title">delectus aut autem</h2>
-
-          <a className="UserInfo" href="mailto:Sincere@april.biz">
-            Leanne Graham
-          </a>
-        </article>
-
-        <article data-id="2" className="TodoInfo">
-          <h2 className="TodoInfo__title">
-            quis ut nam facilis et officia qui
-          </h2>
-
-          <a className="UserInfo" href="mailto:Julianne.OConner@kory.org">
-            Patricia Lebsack
-          </a>
-        </article>
-      </section>
+      <TodoList todos={todos} />
     </div>
   );
 };
diff --git a/src/components/TodoInfo/TodoInfo.tsx b/src/components/TodoInfo/TodoInfo.tsx
index d164511fa8..4f33554db9 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -1 +1,17 @@
-export const TodoInfo = () => {};
+import { Todo } from '../../types/Todo';
+import { UserInfo } from '../UserInfo';
+
+type Props = {
+  todo: Todo;
+};
+
+export const TodoInfo: React.FC<Props> = ({ todo }) => (
+  <article
+    data-id={todo.id}
+    className={`TodoInfo ${todo.completed ? 'TodoInfo--completed' : ''}`}
+  >
+    <h2 className="TodoInfo__title">{todo.title}</h2>
+
+    <UserInfo user={todo.user} />
+  </article>
+);
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index c12fae07c0..e3492bb0f4 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1 +1,14 @@
-export const TodoList = () => {};
+import { Todo } from '../../types/Todo';
+import { TodoInfo } from '../TodoInfo';
+
+type Props = {
+  todos: Todo[];
+};
+
+export const TodoList: React.FC<Props> = ({ todos }) => (
+  <section className="TodoList">
+    {todos.map(todo => (
+      <TodoInfo key={todo.id} todo={todo} />
+    ))}
+  </section>
+);
diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx
index f7bf0410ec..1fbca4e1d8 100644
--- a/src/components/UserInfo/UserInfo.tsx
+++ b/src/components/UserInfo/UserInfo.tsx
@@ -1 +1,12 @@
-export const UserInfo = () => {};
+import React from 'react';
+import { User } from '../../types/User';
+
+type Props = {
+  user: User;
+};
+
+export const UserInfo: React.FC<Props> = ({ user }) => (
+  <a className="UserInfo" href={`mailto:${user.email}`}>
+    {user.name}
+  </a>
+);
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..ec8b562a81
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,9 @@
+import { User } from './User';
+
+export type Todo = {
+  id: number;
+  title: string;
+  completed: boolean;
+  userId: number;
+  user: User;
+};
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 0000000000..f74409b994
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,6 @@
+export type User = {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+};