diff --git a/README.md b/README.md
index 3c428102e..d157727f1 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 > Here is [the working version](https://mate-academy.github.io/react_product-categories-practice/)
 
-You are given a markup for a table of products and 3 arrays. 
+You are given a markup for a table of products and 3 arrays.
 Implement as many options below as you can:
 
 1. Render products in a table with id, name, category, and owner (user).
@@ -33,7 +33,7 @@ Implement as many options below as you can:
 ## Instructions
 - Fork, clone, and run `npm i`
 - fix the DEMO LINK below (use your GitHub username and the repo name)
-  - [DEMO LINK](https://<your-account>.github.io/<your-repo-name>)
+  - [DEMO LINK](https://YePolishchuk.github.io/<your-repo-name>)
 - implement tasks one by one (You can do it in the `App.jsx`)
 - `commit`, `push`, and `deploy` after each task
 - Send a link to your `App.jsx` file to your personal Slack channel (for example #fe_apr22_misha_hrynko)
diff --git a/package.json b/package.json
index 2bff208d2..b20c34d42 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
   },
   "scripts": {
     "start": "mate-scripts start -l",
-    "build": "mate-scripts build",
+    "build": "react-scripts build",
     "test": "mate-scripts test -l",
     "lint-js": "mate-scripts lint -j",
     "lint-css": "mate-scripts lint -s",
@@ -46,7 +46,7 @@
     "update": "mate-scripts update",
     "postinstall": "npm run update && cypress verify",
     "predeploy": "npm run build",
-    "deploy": "mate-scripts deploy"
+    "deploy": "gh-pages -d build"
   },
   "browserslist": {
     "production": [
@@ -68,4 +68,4 @@
       "cypress": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.jsx
index ff3285812..f567626c3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,248 +1,278 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
-import React from 'react';
+import React, { useState } from 'react';
+import cn from 'classnames';
 import './App.scss';
 
-// import usersFromServer from './api/users';
-// import categoriesFromServer from './api/categories';
-// import productsFromServer from './api/products';
-
-// const products = productsFromServer.map((product) => {
-//   const category = null; // find by product.categoryId
-//   const user = null; // find by category.ownerId
-
-//   return null;
-// });
-
-export const App = () => (
-  <div className="section">
-    <div className="container">
-      <h1 className="title">Product Categories</h1>
-
-      <div className="block">
-        <nav className="panel">
-          <p className="panel-heading">Filters</p>
-
-          <p className="panel-tabs has-text-weight-bold">
-            <a
-              data-cy="FilterAllUsers"
-              href="#/"
-            >
-              All
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-            >
-              User 1
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-              className="is-active"
-            >
-              User 2
-            </a>
-
-            <a
-              data-cy="FilterUser"
-              href="#/"
-            >
-              User 3
-            </a>
-          </p>
-
-          <div className="panel-block">
-            <p className="control has-icons-left has-icons-right">
-              <input
-                data-cy="SearchField"
-                type="text"
-                className="input"
-                placeholder="Search"
-                value="qwe"
-              />
-
-              <span className="icon is-left">
-                <i className="fas fa-search" aria-hidden="true" />
-              </span>
-
-              <span className="icon is-right">
-                {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-                <button
-                  data-cy="ClearButton"
-                  type="button"
-                  className="delete"
-                />
-              </span>
+import usersFromServer from './api/users';
+import categoriesFromServer from './api/categories';
+import productsFromServer from './api/products';
+
+const productsCategories = productsFromServer.map(product => ({
+  ...product,
+  category: categoriesFromServer
+    .find(category => category.id === product.categoryId), // find by product.categoryId // find by category.ownerId
+}));
+
+const products = productsCategories.map(product => ({
+  ...product,
+  user: usersFromServer
+    .find(person => person.id === product.category.ownerId), // find by product.categoryId // find by category.ownerId
+}));
+
+export const App = () => {
+  const [currentPeople, setcurrentPeople] = useState('');
+  const [query, setQuery] = useState('');
+  const [currentCategory, setCurrentCategory] = useState('');
+  let selectedProducts = products;
+
+  if (currentPeople !== '') {
+    selectedProducts = selectedProducts
+      .filter(product => product.user.name === currentPeople);
+  }
+
+  if (query !== '') {
+    selectedProducts = selectedProducts
+      .filter(product => (
+        product.name.toLowerCase().includes(query.toLowerCase())
+      ));
+  }
+
+  if (currentCategory !== '') {
+    selectedProducts = selectedProducts
+      .filter(product => (
+        product.category.title === currentCategory
+      ));
+  }
+
+  return (
+    <div className="section">
+      <div className="container">
+        <h1 className="title">Product Categories</h1>
+
+        <div className="block">
+          <nav className="panel">
+            <p className="panel-heading">Filters</p>
+
+            <p className="panel-tabs has-text-weight-bold">
+              <a
+                data-cy="FilterAllUsers"
+                href="#/"
+              >
+                All
+              </a>
+
+              {usersFromServer.map(user => (
+                <a
+                  data-cy="FilterUser"
+                  href="#/"
+                  key={user.id}
+                  className={cn({
+                    'is-active': user.name === currentPeople,
+                  })}
+                  onClick={() => setcurrentPeople(user.name)}
+                >
+                  {user.name}
+                </a>
+              ))}
             </p>
-          </div>
-
-          <div className="panel-block is-flex-wrap-wrap">
-            <a
-              href="#/"
-              data-cy="AllCategories"
-              className="button is-success mr-6 is-outlined"
-            >
-              All
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1 is-info"
-              href="#/"
-            >
-              Category 1
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1"
-              href="#/"
-            >
-              Category 2
-            </a>
-
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1 is-info"
-              href="#/"
-            >
-              Category 3
-            </a>
-            <a
-              data-cy="Category"
-              className="button mr-2 my-1"
-              href="#/"
-            >
-              Category 4
-            </a>
-          </div>
-
-          <div className="panel-block">
-            <a
-              data-cy="ResetAllButton"
-              href="#/"
-              className="button is-link is-outlined is-fullwidth"
-            >
-              Reset all filters
-            </a>
-          </div>
-        </nav>
-      </div>
-
-      <div className="box table-container">
-        <p data-cy="NoMatchingMessage">
-          No products matching selected criteria
-        </p>
-
-        <table
-          data-cy="ProductTable"
-          className="table is-striped is-narrow is-fullwidth"
-        >
-          <thead>
-            <tr>
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  ID
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort" />
-                    </span>
-                  </a>
-                </span>
-              </th>
 
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  Product
-
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort-down" />
-                    </span>
-                  </a>
-                </span>
-              </th>
-
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  Category
+            <div className="panel-block">
+              <p className="control has-icons-left has-icons-right">
+                <input
+                  data-cy="SearchField"
+                  type="text"
+                  className="input"
+                  placeholder="Search"
+                  onChange={(text) => {
+                    setQuery(text.target.value);
+                  }}
+                />
 
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort-up" />
-                    </span>
-                  </a>
+                <span className="icon is-left">
+                  <i className="fas fa-search" aria-hidden="true" />
                 </span>
-              </th>
-
-              <th>
-                <span className="is-flex is-flex-wrap-nowrap">
-                  User
 
-                  <a href="#/">
-                    <span className="icon">
-                      <i data-cy="SortIcon" className="fas fa-sort" />
-                    </span>
-                  </a>
+                <span className="icon is-right">
+                  {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+                  <button
+                    data-cy="ClearButton"
+                    type="button"
+                    className="delete"
+                  />
                 </span>
-              </th>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                1
-              </td>
-
-              <td data-cy="ProductName">Milk</td>
-              <td data-cy="ProductCategory">🍺 - Drinks</td>
-
-              <td
-                data-cy="ProductUser"
-                className="has-text-link"
+              </p>
+            </div>
+
+            <div className="panel-block is-flex-wrap-wrap">
+              <a
+                href="#/"
+                data-cy="AllCategories"
+                className="button is-success mr-6 is-outlined"
+                onClick={() => setCurrentCategory('')}
               >
-                Max
-              </td>
-            </tr>
-
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                2
-              </td>
-
-              <td data-cy="ProductName">Bread</td>
-              <td data-cy="ProductCategory">🍞 - Grocery</td>
-
-              <td
-                data-cy="ProductUser"
-                className="has-text-danger"
-              >
-                Anna
-              </td>
-            </tr>
-
-            <tr data-cy="Product">
-              <td className="has-text-weight-bold" data-cy="ProductId">
-                3
-              </td>
-
-              <td data-cy="ProductName">iPhone</td>
-              <td data-cy="ProductCategory">💻 - Electronics</td>
-
-              <td
-                data-cy="ProductUser"
-                className="has-text-link"
+                All
+              </a>
+
+              {
+                categoriesFromServer.map(category => (
+                  <a
+                    data-cy="Category"
+                    className={cn(
+                      'button',
+                      'mr-2',
+                      'my-1',
+                      { 'is-info': category.title === currentCategory },
+                    )}
+                    href="#/"
+                    key={category.id}
+                    onClick={() => setCurrentCategory(category.title)}
+                  >
+                    {category.title}
+                  </a>
+                ))
+              }
+            </div>
+
+            <div className="panel-block">
+              <a
+                data-cy="ResetAllButton"
+                href="#/"
+                className="button is-link is-outlined is-fullwidth"
+                onClick={() => {
+                  setcurrentPeople('');
+                  setQuery('');
+                  setCurrentCategory('');
+                }}
               >
-                Roma
-              </td>
-            </tr>
-          </tbody>
-        </table>
+                Reset all filters
+              </a>
+            </div>
+          </nav>
+        </div>
+
+        <div className="box table-container">
+          <table
+            data-cy="ProductTable"
+            className="table is-striped is-narrow is-fullwidth"
+          >
+            <thead>
+              <tr>
+                <th>
+                  <span className="is-flex is-flex-wrap-nowrap">
+                    ID
+
+                    <a href="#/">
+                      <span className="icon">
+                        <i data-cy="SortIcon" className="fas fa-sort" />
+                      </span>
+                    </a>
+                  </span>
+                </th>
+
+                <th>
+                  <span className="is-flex is-flex-wrap-nowrap">
+                    Product
+
+                    <a href="#/">
+                      <span className="icon">
+                        <i data-cy="SortIcon" className="fas fa-sort-down" />
+                      </span>
+                    </a>
+                  </span>
+                </th>
+
+                <th>
+                  <span className="is-flex is-flex-wrap-nowrap">
+                    Category
+
+                    <a href="#/">
+                      <span className="icon">
+                        <i data-cy="SortIcon" className="fas fa-sort-up" />
+                      </span>
+                    </a>
+                  </span>
+                </th>
+
+                <th>
+                  <span className="is-flex is-flex-wrap-nowrap">
+                    User
+
+                    <a href="#/">
+                      <span className="icon">
+                        <i data-cy="SortIcon" className="fas fa-sort" />
+                      </span>
+                    </a>
+                  </span>
+                </th>
+              </tr>
+            </thead>
+            {
+              !selectedProducts.length && (
+                <p data-cy="NoMatchingMessage">
+                  No products matching selected criteria
+                </p>
+              )
+            }
+            <tbody>
+              {selectedProducts.map(product => (
+                <tr
+                  data-cy="Product"
+                  key={product.id}
+                >
+                  <td className="has-text-weight-bold" data-cy="ProductId">
+                    {product.id}
+                  </td>
+
+                  <td data-cy="ProductName">{product.name}</td>
+                  <td data-cy="ProductCategory">{`${product.category.icon} - ${product.category.title}`}</td>
+
+                  <td
+                    data-cy="ProductUser"
+                    className={cn({
+                      'has-text-link': product.user.sex === 'm',
+                      'has-text-danger': product.user.sex === 'f',
+                    })}
+                  >
+                    {product.user.name}
+                  </td>
+                </tr>
+              ))}
+
+              {/* <tr data-cy="Product">
+                <td className="has-text-weight-bold" data-cy="ProductId">
+                  2
+                </td>
+
+                <td data-cy="ProductName">Bread</td>
+                <td data-cy="ProductCategory">🍞 - Grocery</td>
+
+                <td
+                  data-cy="ProductUser"
+                  className="has-text-danger"
+                >
+                  Anna
+                </td>
+              </tr>
+
+              <tr data-cy="Product">
+                <td className="has-text-weight-bold" data-cy="ProductId">
+                  3
+                </td>
+
+                <td data-cy="ProductName">iPhone</td>
+                <td data-cy="ProductCategory">💻 - Electronics</td>
+
+                <td
+                  data-cy="ProductUser"
+                  className="has-text-link"
+                >
+                  Roma
+                </td>
+              </tr> */}
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};