diff --git a/package-lock.json b/package-lock.json
index 16ac8e28b..7c3512cfc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2090,9 +2090,9 @@
       }
     },
     "@mate-academy/scripts": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.3.tgz",
-      "integrity": "sha512-clsxVN4sQap5pgFev+WOEi9GVSYU5/C6puBgwGFmwePMTK+ssFFw+tdE5agrKkqmRsEgT38+wRbzITh+rZs1Yw==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.8.tgz",
+      "integrity": "sha512-MqvuqrG8UUzQkRc375ZUIOd23nJ0BYqae/Nn5t01aDutSqZnz1ye65W4sLHiSuQJGIuHRO0CEyJxAO72wX1efw==",
       "dev": true,
       "requires": {
         "@octokit/rest": "^17.11.2",
@@ -2233,12 +2233,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -2269,12 +2269,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "is-plain-object": {
@@ -2303,12 +2303,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "universal-user-agent": {
@@ -2320,9 +2320,9 @@
       }
     },
     "@octokit/openapi-types": {
-      "version": "12.10.1",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.10.1.tgz",
-      "integrity": "sha512-P+SukKanjFY0ZhsK6wSVnQmxTP2eVPPE8OPSNuxaMYtgVzwJZgfGdwlYjf4RlRU4vLEw4ts2fsE2icG4nZ5ddQ==",
+      "version": "12.11.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
+      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
@@ -2335,12 +2335,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -2387,12 +2387,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "is-plain-object": {
@@ -2421,12 +2421,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -2538,9 +2538,9 @@
       }
     },
     "@sinonjs/text-encoding": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
-      "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz",
+      "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {
@@ -4125,9 +4125,9 @@
       }
     },
     "before-after-hook": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
       "dev": true
     },
     "bfj": {
@@ -12570,9 +12570,9 @@
       "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw=="
     },
     "macos-release": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz",
-      "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz",
+      "integrity": "sha512-DXqXhEM7gW59OjZO8NIjBCz9AQ1BEMrfiOAl4AYByHCtVHRF4KoGNO8mqQeM8lRCtQe/UnJ4imO/d2HdkKsd+A==",
       "dev": true
     },
     "magic-string": {
@@ -13466,9 +13466,9 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.12.tgz",
+      "integrity": "sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==",
       "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
diff --git a/package.json b/package.json
index 3fe08e488..af87fd478 100755
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@mate-academy/cypress-tools": "^1.0.4",
     "@mate-academy/eslint-config-react": "0.0.7",
     "@mate-academy/eslint-config-react-typescript": "^1.0.1",
-    "@mate-academy/scripts": "^1.2.3",
+    "@mate-academy/scripts": "^1.2.8",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^17.0.23",
diff --git a/src/App.tsx b/src/App.tsx
index 2cf5239da..1ec4b101b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,27 +1,65 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.scss';
 import { GoodsList } from './GoodsList';
+import { getAll, get5First, getRedGoods } from './api/goods';
+import { Good } from './types/Good';
 
-// import { getAll, get5First, getRed } from './api/goods';
-// or
-// import * as goodsAPI from './api/goods';
+export const App: React.FC = () => {
+  const [allGoods, setAllGoods] = useState<Good[]>([]);
 
-export const App: React.FC = () => (
-  <div className="App">
-    <h1>Dynamic list of Goods</h1>
+  useEffect(() => {
+    getAll().then(goods => {
+      setAllGoods(goods);
+    });
+  }, []);
 
-    <button type="button" data-cy="all-button">
-      Load all goods
-    </button>
+  const handleLoadAllGoods = () => {
+    getAll().then(goods => {
+      setAllGoods(goods);
+    });
+  };
 
-    <button type="button" data-cy="first-five-button">
-      Load 5 first goods
-    </button>
+  const handleLoad5FirstGoods = () => {
+    get5First().then(goods => {
+      setAllGoods(goods);
+    });
+  };
 
-    <button type="button" data-cy="red-button">
-      Load red goods
-    </button>
+  const handleLoadRedGoods = () => {
+    getRedGoods().then(goods => {
+      setAllGoods(goods);
+    });
+  };
 
-    <GoodsList goods={[]} />
-  </div>
-);
+  return (
+    <div className="App">
+      <h1>Dynamic list of Goods</h1>
+
+      <button
+        type="button"
+        data-cy="all-button"
+        onClick={handleLoadAllGoods}
+      >
+        Load all goods
+      </button>
+
+      <button
+        type="button"
+        data-cy="first-five-button"
+        onClick={handleLoad5FirstGoods}
+      >
+        Load 5 first goods
+      </button>
+
+      <button
+        type="button"
+        data-cy="red-button"
+        onClick={handleLoadRedGoods}
+      >
+        Load red goods
+      </button>
+
+      <GoodsList goods={allGoods} />
+    </div>
+  );
+};
diff --git a/src/GoodsList.tsx b/src/GoodsList.tsx
index b56a4331e..304707bf9 100644
--- a/src/GoodsList.tsx
+++ b/src/GoodsList.tsx
@@ -8,7 +8,7 @@ type Props = {
 export const GoodsList: React.FC<Props> = ({ goods }) => (
   <ul>
     {goods.map(good => (
-      <li key={good.id} data-cy="good">
+      <li key={good.id} data-cy="good" style={{ color: good.color }}>
         {good.name}
       </li>
     ))}
diff --git a/src/api/goods.ts b/src/api/goods.ts
index f0d1659f8..9786c1002 100644
--- a/src/api/goods.ts
+++ b/src/api/goods.ts
@@ -10,10 +10,16 @@ export function getAll(): Promise<Good[]> {
 
 export const get5First = () => {
   return getAll()
-    .then(goods => goods); // sort and get the first 5
+    .then(goods => {
+      goods.sort((a, b) => a.name.localeCompare(b.name));
+
+      return goods.slice(0, 5);
+    });
 };
 
 export const getRedGoods = () => {
   return getAll()
-    .then(goods => goods); // get only red
+    .then(goods => {
+      return goods.filter(good => good.color === 'red');
+    });
 };