diff --git a/src/App.tsx b/src/App.tsx
index 9646bf5c6f..69806257ff 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,25 +1,94 @@
+import { 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 { Todo } from './types/Todo';
+import { UserId } from './types/User';
+import { TodoList } from './components/TodoList';
 
 export const App = () => {
+  const [title, setTitle] = useState('');
+  const [selectedUserId, setSelectedUserId] = useState<UserId>(0);
+  const [todos, setTodos] = useState<Todo[]>(todosFromServer);
+  const [crntTodoId, setCrntTodoId] = useState<number>(
+    todosFromServer
+      .reduce((a, item) => ((item.id > a) ? item.id : a), 0),
+  );
+  const [hasTitleError, setHasTitleError] = useState(false);
+  const [hasSelectError, setHasSelectError] = useState(false);
+
+  const handleTitle = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(event.target.value);
+    setHasTitleError(false);
+  };
+
+  const handleSelectUser = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedUserId(+event.target.value);
+    setHasSelectError(false);
+  };
+
+  const handleSabmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    setHasTitleError(!title);
+    setHasSelectError(!selectedUserId);
+
+    if (!title
+      || !selectedUserId) {
+      return;
+    }
+
+    setCrntTodoId(p => p + 1);
+    setTodos(prevTodos => [
+      ...prevTodos,
+      {
+        id: crntTodoId + 1,
+        title,
+        completed: false,
+        userId: selectedUserId,
+      }]);
+
+    setTitle('');
+    setSelectedUserId(0);
+  };
+
   return (
     <div className="App">
       <h1>Add todo form</h1>
 
-      <form action="/api/todos" method="POST">
+      <form
+        action="/api/todos"
+        method="POST"
+        onSubmit={handleSabmit}
+      >
         <div className="field">
-          <input type="text" data-cy="titleInput" />
-          <span className="error">Please enter a title</span>
+          <input
+            type="text"
+            data-cy="titleInput"
+            value={title}
+            placeholder="Enter title"
+            onChange={handleTitle}
+          />
+
+          {hasTitleError
+            && (<span className="error">Please enter a title</span>)}
         </div>
 
         <div className="field">
-          <select data-cy="userSelect">
+          <select
+            data-cy="userSelect"
+            value={selectedUserId}
+            onChange={handleSelectUser}
+          >
             <option value="0" disabled>Choose a user</option>
+            {usersFromServer.map(user => (
+              <option value={user.id}>{user.name}</option>
+            ))}
           </select>
 
-          <span className="error">Please choose a user</span>
+          {hasSelectError
+            && (<span className="error">Please choose a user</span>)}
         </div>
 
         <button type="submit" data-cy="submitButton">
@@ -27,35 +96,9 @@ 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..d3865f09ab 100644
--- a/src/components/TodoInfo/TodoInfo.tsx
+++ b/src/components/TodoInfo/TodoInfo.tsx
@@ -1 +1,30 @@
-export const TodoInfo = () => {};
+import React from 'react';
+import cn from 'classnames';
+
+import { Todo } from '../../types/Todo';
+import { getUserById } from '../../services/User';
+import { User } from '../../types/User';
+import { UserInfo } from '../UserInfo';
+
+type Props = {
+  todo: Todo,
+};
+
+export const TodoInfo: React.FC<Props> = ({
+  todo,
+}) => {
+  return (
+    <article
+      data-id={todo.id}
+      className={cn('TodoInfo', {
+        'TodoInfo--completed': todo.completed,
+      })}
+    >
+      <h2 className="TodoInfo__title">
+        {todo.title}
+      </h2>
+
+      <UserInfo user={getUserById(todo.userId) as User} />
+    </article>
+  );
+};
diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
index c12fae07c0..cdbf259001 100644
--- a/src/components/TodoList/TodoList.tsx
+++ b/src/components/TodoList/TodoList.tsx
@@ -1 +1,19 @@
-export const TodoList = () => {};
+import React from 'react';
+import { Todo } from '../../types/Todo';
+import { TodoInfo } from '../TodoInfo';
+
+type Props = {
+  todos: Todo[],
+};
+
+export const TodoList: React.FC<Props> = ({
+  todos,
+}) => {
+  return (
+    <section className="TodoList">
+      {
+        todos.map(todo => (<TodoInfo todo={todo} />))
+      }
+    </section>
+  );
+};
diff --git a/src/components/UserInfo/UserInfo.tsx b/src/components/UserInfo/UserInfo.tsx
index f7bf0410ec..ae1988e3f0 100644
--- a/src/components/UserInfo/UserInfo.tsx
+++ b/src/components/UserInfo/UserInfo.tsx
@@ -1 +1,15 @@
-export const UserInfo = () => {};
+import { User } from '../../types/User';
+
+type Props = {
+  user: User,
+};
+
+export const UserInfo: React.FC<Props> = ({
+  user,
+}) => {
+  return (
+    <a className="UserInfo" href={`mailto:${user.email}`}>
+      {user.name}
+    </a>
+  );
+};
diff --git a/src/services/User.ts b/src/services/User.ts
new file mode 100644
index 0000000000..561a270489
--- /dev/null
+++ b/src/services/User.ts
@@ -0,0 +1,9 @@
+import { User, UserId } from '../types/User';
+import usersFromServer from '../api/users';
+
+export const getUserById = (
+  userId: UserId,
+  users: User[] = usersFromServer,
+): User | undefined => {
+  return users.find(user => user.id === userId);
+};
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..d5218d81be
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,5 @@
+import todosFromServer from '../api/todos';
+
+const todo = todosFromServer[0];
+
+export type Todo = typeof todo;
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 0000000000..ffbddbfd97
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,6 @@
+import usersFromServer from '../api/users';
+
+const user = usersFromServer[0];
+
+export type User = typeof user;
+export type UserId = typeof user.id;