diff --git a/README.md b/README.md
index d3c3756ab9..3133f36795 100644
--- a/README.md
+++ b/README.md
@@ -47,4 +47,4 @@ Implement the ability to edit a todo title on double click:
 
 - Implement a solution following the [React task guideline](https://github.com/mate-academy/react_task-guideline#react-tasks-guideline).
 - Use the [React TypeScript cheat sheet](https://mate-academy.github.io/fe-program/js/extra/react-typescript).
-- Replace `<your_account>` with your Github username in the [DEMO LINK](https://<your_account>.github.io/react_todo-app-with-api/) and add it to the PR description.
+- Replace `<your_account>` with your Github username in the [DEMO LINK](https://italomagno.github.io/react_todo-app-with-api/) and add it to the PR description.
diff --git a/cypress/integration/page.spec.js b/cypress/integration/page.spec.js
index fcac2e3d12..1d1c697657 100644
--- a/cypress/integration/page.spec.js
+++ b/cypress/integration/page.spec.js
@@ -519,7 +519,7 @@ describe('', () => {
         });
 
         // this test may be flaky
-        it.skip('should replace loader with a created todo', () => {
+        it('should replace loader with a created todo', () => {
           page.flushJSTimers();
           todos.assertCount(6);
           todos.assertNotLoading(5);
@@ -1515,7 +1515,7 @@ describe('', () => {
         });
 
         // It depend on your implementation
-        it.skip('should stay while waiting', () => {
+        it('should stay while waiting', () => {
           page.mockUpdate(257334);
 
           todos.title(0).trigger('dblclick');
@@ -1694,7 +1694,7 @@ describe('', () => {
         });
 
         // this test may be unstable
-        it.skip('should hide loader on fail', () => {
+        it('should hide loader on fail', () => {
           // to prevent Cypress from failing the test on uncaught exception
           cy.once('uncaught:exception', () => false);
 
diff --git a/package-lock.json b/package-lock.json
index 19701e8788..cefe8e5ec3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,15 +11,17 @@
       "license": "GPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-free": "^6.5.2",
+        "@reduxjs/toolkit": "^2.3.0",
         "bulma": "^1.0.1",
         "classnames": "^2.5.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-redux": "^9.1.2",
         "react-transition-group": "^4.4.5"
       },
       "devDependencies": {
         "@cypress/react18": "^2.0.1",
-        "@mate-academy/scripts": "^1.8.5",
+        "@mate-academy/scripts": "^1.9.12",
         "@mate-academy/students-ts-config": "*",
         "@mate-academy/stylelint-config": "*",
         "@types/node": "^20.14.10",
@@ -1183,9 +1185,9 @@
       }
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
-      "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==",
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz",
+      "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==",
       "dev": true,
       "dependencies": {
         "@octokit/rest": "^17.11.2",
@@ -1874,10 +1876,33 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz",
+      "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz",
-      "integrity": "sha512-lncuC4aHicncmbORnx+dUaAgzee9cm/PbIqgWz1PpXuwc+sa1Ct83tnqUDy/GFKleLiN7ZIeytM6KJ4cAn1SxA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.26.0.tgz",
+      "integrity": "sha512-gJNwtPDGEaOEgejbaseY6xMFu+CPltsc8/T+diUTTbOQLqD+bnrJq9ulH6WD69TqwqWmrfRAtUv30cCFZlbGTQ==",
       "cpu": [
         "arm"
       ],
@@ -1888,9 +1913,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.1.tgz",
-      "integrity": "sha512-F/tkdw0WSs4ojqz5Ovrw5r9odqzFjb5LIgHdHZG65dFI1lWTWRVy32KDJLKRISHgJvqUeUhdIvy43fX41znyDg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.26.0.tgz",
+      "integrity": "sha512-YJa5Gy8mEZgz5JquFruhJODMq3lTHWLm1fOy+HIANquLzfIOzE9RA5ie3JjCdVb9r46qfAQY/l947V0zfGJ0OQ==",
       "cpu": [
         "arm64"
       ],
@@ -1901,9 +1926,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.1.tgz",
-      "integrity": "sha512-vk+ma8iC1ebje/ahpxpnrfVQJibTMyHdWpOGZ3JpQ7Mgn/3QNHmPq7YwjZbIE7km73dH5M1e6MRRsnEBW7v5CQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.26.0.tgz",
+      "integrity": "sha512-ErTASs8YKbqTBoPLp/kA1B1Um5YSom8QAc4rKhg7b9tyyVqDBlQxy7Bf2wW7yIlPGPg2UODDQcbkTlruPzDosw==",
       "cpu": [
         "arm64"
       ],
@@ -1914,9 +1939,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.1.tgz",
-      "integrity": "sha512-IgpzXKauRe1Tafcej9STjSSuG0Ghu/xGYH+qG6JwsAUxXrnkvNHcq/NL6nz1+jzvWAnQkuAJ4uIwGB48K9OCGA==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.26.0.tgz",
+      "integrity": "sha512-wbgkYDHcdWW+NqP2mnf2NOuEbOLzDblalrOWcPyY6+BRbVhliavon15UploG7PpBRQ2bZJnbmh8o3yLoBvDIHA==",
       "cpu": [
         "x64"
       ],
@@ -1926,10 +1951,36 @@
         "darwin"
       ]
     },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.26.0.tgz",
+      "integrity": "sha512-Y9vpjfp9CDkAG4q/uwuhZk96LP11fBz/bYdyg9oaHYhtGZp7NrbkQrj/66DYMMP2Yo/QPAsVHkV891KyO52fhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.26.0.tgz",
+      "integrity": "sha512-A/jvfCZ55EYPsqeaAt/yDAG4q5tt1ZboWMHEvKAH9Zl92DWvMIbnZe/f/eOXze65aJaaKbL+YeM0Hz4kLQvdwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.1.tgz",
-      "integrity": "sha512-P9bSiAUnSSM7EmyRK+e5wgpqai86QOSv8BwvkGjLwYuOpaeomiZWifEos517CwbG+aZl1T4clSE1YqqH2JRs+g==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.26.0.tgz",
+      "integrity": "sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==",
       "cpu": [
         "arm"
       ],
@@ -1940,9 +1991,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.1.tgz",
-      "integrity": "sha512-5RnjpACoxtS+aWOI1dURKno11d7krfpGDEn19jI8BuWmSBbUC4ytIADfROM1FZrFhQPSoP+KEa3NlEScznBTyQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.26.0.tgz",
+      "integrity": "sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==",
       "cpu": [
         "arm"
       ],
@@ -1953,9 +2004,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.1.tgz",
-      "integrity": "sha512-8mwmGD668m8WaGbthrEYZ9CBmPug2QPGWxhJxh/vCgBjro5o96gL04WLlg5BA233OCWLqERy4YUzX3bJGXaJgQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.26.0.tgz",
+      "integrity": "sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==",
       "cpu": [
         "arm64"
       ],
@@ -1966,9 +2017,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.1.tgz",
-      "integrity": "sha512-dJX9u4r4bqInMGOAQoGYdwDP8lQiisWb9et+T84l2WXk41yEej8v2iGKodmdKimT8cTAYt0jFb+UEBxnPkbXEQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.26.0.tgz",
+      "integrity": "sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==",
       "cpu": [
         "arm64"
       ],
@@ -1979,9 +2030,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.1.tgz",
-      "integrity": "sha512-V72cXdTl4EI0x6FNmho4D502sy7ed+LuVW6Ym8aI6DRQ9hQZdp5sj0a2usYOlqvFBNKQnLQGwmYnujo2HvjCxQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.26.0.tgz",
+      "integrity": "sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==",
       "cpu": [
         "ppc64"
       ],
@@ -1992,9 +2043,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.1.tgz",
-      "integrity": "sha512-f+pJih7sxoKmbjghrM2RkWo2WHUW8UbfxIQiWo5yeCaCM0TveMEuAzKJte4QskBp1TIinpnRcxkquY+4WuY/tg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.26.0.tgz",
+      "integrity": "sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==",
       "cpu": [
         "riscv64"
       ],
@@ -2005,9 +2056,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.1.tgz",
-      "integrity": "sha512-qb1hMMT3Fr/Qz1OKovCuUM11MUNLUuHeBC2DPPAWUYYUAOFWaxInaTwTQmc7Fl5La7DShTEpmYwgdt2hG+4TEg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.26.0.tgz",
+      "integrity": "sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==",
       "cpu": [
         "s390x"
       ],
@@ -2018,9 +2069,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.1.tgz",
-      "integrity": "sha512-7O5u/p6oKUFYjRbZkL2FLbwsyoJAjyeXHCU3O4ndvzg2OFO2GinFPSJFGbiwFDaCFc+k7gs9CF243PwdPQFh5g==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.26.0.tgz",
+      "integrity": "sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==",
       "cpu": [
         "x64"
       ],
@@ -2031,9 +2082,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.1.tgz",
-      "integrity": "sha512-pDLkYITdYrH/9Cv/Vlj8HppDuLMDUBmgsM0+N+xLtFd18aXgM9Nyqupb/Uw+HeidhfYg2lD6CXvz6CjoVOaKjQ==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.26.0.tgz",
+      "integrity": "sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==",
       "cpu": [
         "x64"
       ],
@@ -2044,9 +2095,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.1.tgz",
-      "integrity": "sha512-W2ZNI323O/8pJdBGil1oCauuCzmVd9lDmWBBqxYZcOqWD6aWqJtVBQ1dFrF4dYpZPks6F+xCZHfzG5hYlSHZ6g==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.26.0.tgz",
+      "integrity": "sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==",
       "cpu": [
         "arm64"
       ],
@@ -2057,9 +2108,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.1.tgz",
-      "integrity": "sha512-ELfEX1/+eGZYMaCIbK4jqLxO1gyTSOIlZr6pbC4SRYFaSIDVKOnZNMdoZ+ON0mrFDp4+H5MhwNC1H/AhE3zQLg==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.26.0.tgz",
+      "integrity": "sha512-D4CxkazFKBfN1akAIY6ieyOqzoOoBV1OICxgUblWxff/pSjCA2khXlASUx7mK6W1oP4McqhgcCsu6QaLj3WMWg==",
       "cpu": [
         "ia32"
       ],
@@ -2070,9 +2121,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.1.tgz",
-      "integrity": "sha512-yjk2MAkQmoaPYCSu35RLJ62+dz358nE83VfTePJRp8CG7aMg25mEJYpXFiD+NcevhX8LxD5OP5tktPXnXN7GDw==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.26.0.tgz",
+      "integrity": "sha512-2x8MO1rm4PGEP0xWbubJW5RtbNLk3puzAMaLQd3B3JHVw4KcHlmXcO+Wewx9zCoo7EUFiMlu/aZbCJ7VjMzAag==",
       "cpu": [
         "x64"
       ],
@@ -2159,9 +2210,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true
     },
     "node_modules/@types/get-port": {
@@ -2207,13 +2258,13 @@
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
       "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
       "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -2249,6 +2300,11 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -5927,6 +5983,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
@@ -7122,9 +7187,9 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
@@ -8268,9 +8333,9 @@
       "dev": true
     },
     "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
       "dev": true,
       "dependencies": {
         "isarray": "0.0.1"
@@ -8304,9 +8369,9 @@
       "dev": true
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "dev": true
     },
     "node_modules/picomatch": {
@@ -8425,9 +8490,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
       "dev": true,
       "funding": [
         {
@@ -8445,8 +8510,8 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -8725,6 +8790,28 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
+      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -8854,6 +8941,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -8937,6 +9037,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -9052,12 +9157,12 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.18.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.1.tgz",
-      "integrity": "sha512-Elx2UT8lzxxOXMpy5HWQGZqkrQOtrVDDa/bm9l10+U4rQnVzbL/LgZ4NOM1MPIDyHk69W4InuYDF5dzRh4Kw1A==",
+      "version": "4.26.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.26.0.tgz",
+      "integrity": "sha512-ilcl12hnWonG8f+NxU6BlgysVA0gvY2l8N0R84S1HcINbW20bvwuCngJkkInV6LXhwRpucsW5k1ovDwEdBVrNg==",
       "dev": true,
       "dependencies": {
-        "@types/estree": "1.0.5"
+        "@types/estree": "1.0.6"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -9067,22 +9172,24 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.18.1",
-        "@rollup/rollup-android-arm64": "4.18.1",
-        "@rollup/rollup-darwin-arm64": "4.18.1",
-        "@rollup/rollup-darwin-x64": "4.18.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.18.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.18.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.18.1",
-        "@rollup/rollup-linux-arm64-musl": "4.18.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.18.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.18.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-gnu": "4.18.1",
-        "@rollup/rollup-linux-x64-musl": "4.18.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.18.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.18.1",
-        "@rollup/rollup-win32-x64-msvc": "4.18.1",
+        "@rollup/rollup-android-arm-eabi": "4.26.0",
+        "@rollup/rollup-android-arm64": "4.26.0",
+        "@rollup/rollup-darwin-arm64": "4.26.0",
+        "@rollup/rollup-darwin-x64": "4.26.0",
+        "@rollup/rollup-freebsd-arm64": "4.26.0",
+        "@rollup/rollup-freebsd-x64": "4.26.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.26.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.26.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.26.0",
+        "@rollup/rollup-linux-arm64-musl": "4.26.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.26.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.26.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-gnu": "4.26.0",
+        "@rollup/rollup-linux-x64-musl": "4.26.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.26.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.26.0",
+        "@rollup/rollup-win32-x64-msvc": "4.26.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -9415,9 +9522,9 @@
       "dev": true
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -10399,6 +10506,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
+      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -10449,14 +10564,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz",
-      "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==",
+      "version": "5.4.11",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.11.tgz",
+      "integrity": "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",
-        "postcss": "^8.4.39",
-        "rollup": "^4.13.0"
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -10475,6 +10590,7 @@
         "less": "*",
         "lightningcss": "^1.21.0",
         "sass": "*",
+        "sass-embedded": "*",
         "stylus": "*",
         "sugarss": "*",
         "terser": "^5.4.0"
@@ -10492,6 +10608,9 @@
         "sass": {
           "optional": true
         },
+        "sass-embedded": {
+          "optional": true
+        },
         "stylus": {
           "optional": true
         },
diff --git a/package.json b/package.json
index b6062525ab..2426a41d6f 100644
--- a/package.json
+++ b/package.json
@@ -7,15 +7,17 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@reduxjs/toolkit": "^2.3.0",
     "bulma": "^1.0.1",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-redux": "^9.1.2",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
diff --git a/src/App.tsx b/src/App.tsx
index 81e011f432..4aadfe483d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,26 +1,109 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { UserWarning } from './UserWarning';
-
-const USER_ID = 0;
+import { getTodos, USER_ID } from './api/todos';
+import { Todo } from './types/Todo';
+import { TodoList } from './components/TodoList';
+import { Header } from './components/Header';
+import { Footer } from './components/Footer';
+import { ErrorComponent } from './components/ErrorComponent';
 
 export const App: React.FC = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [filteredTodos, setFilteredTodos] = useState<Todo[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [editingTodosId, setEditingTodosId] = useState<number[]>([]);
+  const [isFooterActive, setIsFooterActiveFilter] = useState(false);
+  const [filter, setFilter] = useState('all');
+
+  async function loadAllTodos() {
+    try {
+      const loadedTodos = await getTodos();
+
+      if (loadedTodos.length > 0) {
+        setIsFooterActiveFilter(true);
+      }
+
+      setTodos(loadedTodos);
+      setFilteredTodos(loadedTodos);
+    } catch (e) {
+      setError('Unable to load todos');
+    }
+  }
+
+  useEffect(() => {
+    loadAllTodos();
+  }, []);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setError(null);
+    }, 3000);
+  }, [error]);
+
+  useEffect(() => {
+    if (todos.length === 0) {
+      setIsFooterActiveFilter(false);
+
+      return;
+    }
+
+    setIsFooterActiveFilter(true);
+  }, [todos.length]);
+
+  useEffect(() => {
+    if (filter === 'completed') {
+      setFilteredTodos(prev => prev.filter(t => t.completed));
+    }
+
+    if (filter === 'active') {
+      setFilteredTodos(prev => prev.filter(t => !t.completed));
+    }
+  }, [filter, todos]);
+
   if (!USER_ID) {
     return <UserWarning />;
   }
 
   return (
-    <section className="section container">
-      <p className="title is-4">
-        Copy all you need from the prev task:
-        <br />
-        <a href="https://github.com/mate-academy/react_todo-app-add-and-delete#react-todo-app-add-and-delete">
-          React Todo App - Add and Delete
-        </a>
-      </p>
-
-      <p className="subtitle">Styles are already copied</p>
-    </section>
+    <div className="todoapp">
+      <h1 className="todoapp__title">todos</h1>
+      <div className="todoapp__content">
+        <Header
+          todos={todos}
+          setEditingTodosId={setEditingTodosId}
+          setError={setError}
+          editingTodosId={editingTodosId}
+          setTodos={setTodos}
+          setFilteredTodos={setFilteredTodos}
+          filteredTodos={filteredTodos}
+        />
+        <section className="todoapp__main" data-cy="TodoList">
+          <TodoList
+            filter={filter}
+            filteredTodos={filteredTodos}
+            editingTodosId={editingTodosId}
+            setEditingTodosId={setEditingTodosId}
+            setError={setError}
+            todos={todos}
+            setTodos={setTodos}
+            setFilteredTodos={setFilteredTodos}
+          />
+        </section>
+        <Footer
+          filter={filter}
+          setFilter={setFilter}
+          setFilteredTodos={setFilteredTodos}
+          todos={todos}
+          isFooterActive={isFooterActive}
+          setEditingTodosId={setEditingTodosId}
+          loadAllTodos={loadAllTodos}
+          setTodos={setTodos}
+          setError={setError}
+          editingTodosId={editingTodosId}
+        />
+      </div>
+
+      <ErrorComponent error={error} setError={setError} />
+    </div>
   );
 };
diff --git a/src/api/todos.ts b/src/api/todos.ts
new file mode 100644
index 0000000000..3f0e8cc0dd
--- /dev/null
+++ b/src/api/todos.ts
@@ -0,0 +1,24 @@
+import { Todo } from '../types/Todo';
+import { client } from '../utils/fetchClient';
+
+export const USER_ID = 1865;
+
+export const getTodos = () => {
+  return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
+};
+
+export const addTodo = (title: string) => {
+  return client.post<Todo>('/todos', {
+    userId: USER_ID,
+    title,
+    completed: false,
+  });
+};
+
+export const updateTodo = (todo: Todo) => {
+  return client.patch<Todo>(`/todos/${todo.id}`, todo);
+};
+
+export const deleteTodo = (id: number) => {
+  return client.delete(`/todos/${id}`);
+};
diff --git a/src/components/ErrorComponent.tsx b/src/components/ErrorComponent.tsx
new file mode 100644
index 0000000000..e65450d98f
--- /dev/null
+++ b/src/components/ErrorComponent.tsx
@@ -0,0 +1,21 @@
+interface ErrorComponentProps {
+  error: string | null;
+  setError: (error: string | null) => void;
+}
+
+export function ErrorComponent({ error, setError }: ErrorComponentProps) {
+  return (
+    <div
+      data-cy={`ErrorNotification`}
+      className={`notification is-danger is-light has-text-weight-normal ${error ? '' : 'hidden'}`}
+    >
+      <button
+        data-cy="HideErrorButton"
+        type="button"
+        className="delete"
+        onClick={() => setError(null)}
+      />
+      {error}
+    </div>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000000..c61b79754b
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,122 @@
+import { deleteTodo } from '../api/todos';
+import { Todo } from '../types/Todo';
+
+export interface FooterProps {
+  todos: Todo[];
+  isFooterActive: boolean;
+  setEditingTodosId: (ids: number[]) => void;
+  loadAllTodos: () => void;
+  setError: (error: string) => void;
+  editingTodosId: number[];
+  setFilteredTodos: (todos: Todo[]) => void;
+  setTodos: (todos: Todo[]) => void;
+  filter: string;
+  setFilter: (filter: string) => void;
+}
+export function Footer({
+  todos,
+  isFooterActive,
+  setEditingTodosId,
+  setError,
+  editingTodosId,
+  setTodos,
+  setFilteredTodos,
+  filter,
+  setFilter,
+}: FooterProps) {
+  function handleFilterTodos(filterString: string) {
+    setFilter(filterString);
+    switch (filterString) {
+      case 'all':
+        setFilteredTodos(todos);
+        break;
+      case 'active':
+        setFilteredTodos(todos.filter(t => !t.completed));
+        break;
+      case 'completed':
+        setFilteredTodos(todos.filter(t => t.completed));
+        break;
+      default:
+        setFilteredTodos(todos);
+    }
+  }
+
+  async function handleDeleteAllCompletedTodos() {
+    const completedTodos = todos.filter(t => t.completed);
+    const completedTodoIds = completedTodos.map(t => t.id);
+
+    setEditingTodosId([...editingTodosId, ...completedTodoIds]);
+
+    const successfulDeletes: number[] = [];
+
+    for (const todo of completedTodos) {
+      try {
+        await deleteTodo(todo.id);
+        successfulDeletes.push(todo.id);
+      } catch (error) {
+        setError('Unable to delete a todo');
+      }
+    }
+
+    const newTodos = todos.filter(t => !successfulDeletes.includes(t.id));
+
+    setEditingTodosId(
+      editingTodosId.filter(id => !completedTodoIds.includes(id)),
+    );
+    setFilteredTodos(newTodos);
+    setTodos(newTodos);
+  }
+
+  return (
+    <>
+      {isFooterActive && (
+        <footer className="todoapp__footer" data-cy="Footer">
+          <span className="todo-count" data-cy="TodosCounter">
+            {`${todos.filter(t => !t.completed).length} items left`}
+          </span>
+
+          <nav className="filter" data-cy="Filter">
+            <a
+              onClick={() => handleFilterTodos('all')}
+              href="#/"
+              className={`filter__link ${filter === 'all' ? 'selected' : ''}`}
+              data-cy="FilterLinkAll"
+            >
+              All
+            </a>
+
+            <a
+              onClick={() => handleFilterTodos('active')}
+              href="#/active"
+              className={`filter__link ${filter === 'active' ? 'selected' : ''}`}
+              data-cy="FilterLinkActive"
+            >
+              Active
+            </a>
+
+            <a
+              onClick={() => {
+                handleFilterTodos('completed');
+              }}
+              href="#/completed"
+              className={`filter__link ${filter === 'completed' ? 'selected' : ''}`}
+              data-cy="FilterLinkCompleted"
+            >
+              Completed
+            </a>
+          </nav>
+
+          <button
+            type="button"
+            className={`todoapp__clear-completed`}
+            data-cy="ClearCompletedButton"
+            disabled={!todos.some(t => t.completed)}
+            onClick={handleDeleteAllCompletedTodos}
+          >
+            Clear completed
+          </button>
+        </footer>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000000..58677bcfc6
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/indent */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import { useEffect, useRef, useState } from 'react';
+import { Todo } from '../types/Todo';
+import { addTodo, updateTodo } from '../api/todos';
+
+interface HeaderProps {
+  todos: Todo[];
+  setEditingTodosId: (ids: number[]) => void;
+  setError: (error: string) => void;
+  editingTodosId: number[];
+  setTodos: (todos: Todo[]) => void;
+  setFilteredTodos: (todos: Todo[]) => void;
+  filteredTodos: Todo[];
+}
+
+export function Header({
+  todos,
+  setEditingTodosId,
+  setTodos,
+  setFilteredTodos,
+  setError,
+  editingTodosId,
+}: HeaderProps) {
+  const [newTodoTitle, setNewTodoTitle] = useState('');
+  const [isAddingNewTodo, setIsAddingNewTodo] = useState(false);
+
+  const inputNewTodo = useRef<HTMLInputElement>(null);
+
+  function handleNewTodoTitle(e: React.ChangeEvent<HTMLInputElement>) {
+    setNewTodoTitle(e.target.value);
+  }
+
+  function handleAddNewTodo(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const trimmedTitle = newTodoTitle.trim();
+
+    if (!trimmedTitle) {
+      setError('Title should not be empty');
+      inputNewTodo.current?.focus();
+
+      return;
+    }
+
+    const newTodoIdAvailable = todos.length
+      ? todos[todos.length - 1].id + 1
+      : 1;
+
+    const newTodo = {
+      title: trimmedTitle,
+      completed: false,
+      id: newTodoIdAvailable,
+    };
+
+    setIsAddingNewTodo(true);
+    setEditingTodosId([...editingTodosId, newTodoIdAvailable]);
+
+    const updatedTodos = [...todos, newTodo as Todo];
+
+    setFilteredTodos(updatedTodos);
+
+    addTodo(trimmedTitle)
+      .then(responseFromAddedTodo => {
+        const finalTodos = updatedTodos
+          .filter(t => t.id !== newTodoIdAvailable)
+          .concat(responseFromAddedTodo);
+
+        setTodos(finalTodos);
+        setFilteredTodos(finalTodos);
+        setNewTodoTitle('');
+      })
+      .catch(() => {
+        setFilteredTodos(todos);
+        setError('Unable to add a todo');
+      })
+      .finally(() => {
+        setEditingTodosId(
+          editingTodosId.filter(id => id !== newTodoIdAvailable),
+        );
+        setIsAddingNewTodo(false);
+      });
+  }
+
+  function handleToggleAllTodos() {
+    const successfulUpdatedTodo: number[] = [];
+    const hasAllCompleted = todos.every(t => t.completed);
+    const todosToUpdate = hasAllCompleted
+      ? todos
+      : todos.filter(t => !t.completed);
+
+    setEditingTodosId([...editingTodosId, ...todosToUpdate.map(t => t.id)]);
+
+    const updatePromises = todosToUpdate.map(todo =>
+      updateTodo({
+        ...todo,
+        completed: !todo.completed,
+      })
+        .then(res => {
+          successfulUpdatedTodo.push(res.id);
+        })
+        .catch(() => {
+          setError('Unable to update todo');
+        }),
+    );
+
+    Promise.all(updatePromises).then(() => {
+      const newTodosUpdated = todos.map(t =>
+        successfulUpdatedTodo.includes(t.id)
+          ? { ...t, completed: !t.completed }
+          : t,
+      );
+
+      setTodos(newTodosUpdated);
+      setFilteredTodos(newTodosUpdated);
+      setEditingTodosId([]);
+    });
+  }
+
+  useEffect(() => {
+    inputNewTodo.current?.focus();
+  }, [todos.length, isAddingNewTodo]);
+
+  return (
+    <header className="todoapp__header">
+      {/* this button should have `active` class only if all todos are completed */}
+      {todos.length > 0 && (
+        <button
+          type="button"
+          onClick={() => handleToggleAllTodos()}
+          className={`todoapp__toggle-all ${todos.every(t => t.completed) ? 'active' : ''}`}
+          data-cy="ToggleAllButton"
+        />
+      )}
+
+      {/* Add a todo on form submit */}
+      <form onSubmit={e => handleAddNewTodo(e)}>
+        <input
+          disabled={isAddingNewTodo}
+          ref={inputNewTodo}
+          data-cy="NewTodoField"
+          type="text"
+          onChange={e => handleNewTodoTitle(e)}
+          className="todoapp__new-todo"
+          value={newTodoTitle}
+          placeholder="What needs to be done?"
+        />
+      </form>
+    </header>
+  );
+}
diff --git a/src/components/TodoComponent.tsx b/src/components/TodoComponent.tsx
new file mode 100644
index 0000000000..452fd67858
--- /dev/null
+++ b/src/components/TodoComponent.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { Todo } from '../types/Todo';
+
+interface TodoProps {
+  todo: Todo;
+  handleUpdateTodoStatus: (todoId: number) => void;
+  setSelectedTodo(todo: Todo): void;
+  handleEditTodoTitle: (
+    e: React.FormEvent<HTMLFormElement>,
+    todo: Todo,
+  ) => void;
+  handleRemoveTodo: (todoId: number) => void;
+  editingTodosId: number[];
+  selectedTodo: Todo | null;
+  TodoTitleFieldRef: React.RefObject<HTMLInputElement>;
+  handleSelectedTodoChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function TodoComponent({
+  editingTodosId,
+  handleEditTodoTitle,
+  handleRemoveTodo,
+  handleUpdateTodoStatus,
+  setSelectedTodo,
+  todo,
+  selectedTodo,
+  TodoTitleFieldRef,
+  handleSelectedTodoChange,
+}: TodoProps) {
+  return (
+    <div data-cy="Todo" className={`todo ${todo.completed ? 'completed' : ''}`}>
+      <label className="todo__status-label">
+        <input
+          data-cy="TodoStatus"
+          type="checkbox"
+          className="todo__status"
+          checked={todo.completed}
+          onClick={() => handleUpdateTodoStatus(todo.id)}
+        />
+      </label>
+      {!selectedTodo || selectedTodo.id !== todo.id ? (
+        <span
+          onDoubleClick={() => setSelectedTodo(todo)}
+          data-cy="TodoTitle"
+          className="todo__title"
+        >
+          {todo.title}
+        </span>
+      ) : (
+        <form onSubmit={e => handleEditTodoTitle(e, todo)}>
+          <input
+            data-cy="TodoTitleField"
+            type="text"
+            ref={TodoTitleFieldRef}
+            className="todo__title-field"
+            onChange={handleSelectedTodoChange}
+            placeholder="Empty todo will be deleted"
+            onBlur={e =>
+              handleEditTodoTitle(
+                e as unknown as React.FormEvent<HTMLFormElement>,
+                todo,
+              )
+            }
+            value={selectedTodo?.title}
+          />
+        </form>
+      )}
+
+      {/* Remove button appears only on hover */}
+      {!selectedTodo || selectedTodo.id !== todo.id ? (
+        <button
+          onClick={() => handleRemoveTodo(todo.id)}
+          type="button"
+          className="todo__remove"
+          data-cy="TodoDelete"
+        >
+          ×
+        </button>
+      ) : null}
+
+      {/* overlay will cover the todo while it is being deleted or updated */}
+      <div
+        data-cy="TodoLoader"
+        className={`modal overlay ${editingTodosId.includes(todo.id) ? 'is-active' : ''}`}
+      >
+        <div className="modal-background has-background-white-ter" />
+        <div className="loader" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
new file mode 100644
index 0000000000..ae3026eec8
--- /dev/null
+++ b/src/components/TodoList.tsx
@@ -0,0 +1,179 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useEffect, useState } from 'react';
+import { Todo } from '../types/Todo';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { deleteTodo, updateTodo } from '../api/todos';
+import { TodoComponent } from './TodoComponent';
+
+interface TodoListProps {
+  filteredTodos: Todo[];
+  editingTodosId: number[];
+  setEditingTodosId: (ids: number[]) => void;
+  setError: (error: string) => void;
+  todos: Todo[];
+  setTodos: (todos: Todo[]) => void;
+  setFilteredTodos: (todos: Todo[]) => void;
+  filter: string;
+}
+export function TodoList({
+  todos,
+  filteredTodos,
+  editingTodosId,
+  setEditingTodosId,
+  setError,
+  setTodos,
+  setFilteredTodos,
+}: TodoListProps) {
+  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
+
+  const TodoTitleFieldRef = React.useRef<HTMLInputElement>(null);
+
+  function handleSelectedTodoChange(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!selectedTodo) {
+      return;
+    }
+
+    setSelectedTodo({
+      ...selectedTodo,
+      title: e.target.value,
+    });
+  }
+
+  async function handleEditTitleOfTodo(todo: Todo) {
+    try {
+      if (!selectedTodo) {
+        throw new Error('Unable to update todo');
+      }
+
+      setEditingTodosId([...editingTodosId, todo.id]);
+      const updatedTodoFromServer = await updateTodo({
+        ...todo,
+        title: selectedTodo.title.trim(),
+      });
+      const newTodos = todos.map(t =>
+        t.id === todo.id ? updatedTodoFromServer : t,
+      );
+
+      setTodos(newTodos);
+      setFilteredTodos(newTodos);
+      setEditingTodosId(editingTodosId.filter(id => id !== todo.id));
+      setSelectedTodo(null);
+    } catch (e) {
+      setError('Unable to update a todo');
+      setEditingTodosId(editingTodosId.filter(id => id !== todo.id));
+      setSelectedTodo(todo);
+    }
+  }
+
+  async function handleUpdateTodoStatus(todoId: number) {
+    try {
+      const todo = todos.find(t => t.id === todoId);
+
+      setEditingTodosId([...editingTodosId, todoId]);
+      if (!todo) {
+        throw new Error('Todo not found');
+      }
+
+      const updatedTodo: Todo = { ...todo, completed: !todo.completed };
+      const updatedTodoFromServer = await updateTodo(updatedTodo);
+      const newTodos = todos.map(t =>
+        t.id === todoId ? updatedTodoFromServer : t,
+      );
+
+      setEditingTodosId(editingTodosId.filter(id => id !== todoId));
+      setTodos(newTodos);
+      setFilteredTodos(newTodos);
+    } catch (e) {
+      setError('Unable to update a todo');
+      setEditingTodosId(editingTodosId.filter(id => id !== todoId));
+    }
+  }
+
+  async function handleRemoveTodo(todoId: number) {
+    try {
+      setEditingTodosId([...editingTodosId, todoId]);
+      await deleteTodo(todoId);
+      setEditingTodosId(editingTodosId.filter(id => id !== todoId));
+      setTodos(todos.filter(t => t.id !== todoId));
+      setFilteredTodos(filteredTodos.filter(t => t.id !== todoId));
+    } catch (e) {
+      setError('Unable to delete a todo');
+      setEditingTodosId(editingTodosId.filter(id => id !== todoId));
+    }
+  }
+
+  async function handleEditTodoTitle(
+    e: React.FormEvent<HTMLFormElement>,
+    todo: Todo,
+  ) {
+    e.preventDefault();
+    if (!selectedTodo) {
+      return;
+    }
+
+    if (selectedTodo && !selectedTodo.title) {
+      await handleRemoveTodo(todo.id);
+
+      return;
+    } else if (selectedTodo.title === todo.title) {
+      setSelectedTodo(null);
+
+      return;
+    } else if (selectedTodo.title !== todo.title) {
+      await handleEditTitleOfTodo(selectedTodo);
+
+      return;
+    }
+  }
+
+  useEffect(() => {
+    if (selectedTodo) {
+      TodoTitleFieldRef.current?.focus();
+      document.addEventListener('keydown', e => {
+        if (e.key === 'Escape') {
+          setTimeout(() => setSelectedTodo(null), 500);
+        }
+      });
+    }
+
+    return () => {
+      document.addEventListener('keydown', e => {
+        if (e.key === 'Escape') {
+          setTimeout(() => setSelectedTodo(null), 500);
+        }
+      });
+    };
+  }, [selectedTodo]);
+
+  return (
+    <TransitionGroup component={null}>
+      {filteredTodos.map(todo => (
+        <CSSTransition
+          key={todo.id}
+          timeout={300}
+          classNames="item"
+          unmountOnExit
+          appear
+          enter
+          exit
+        >
+          {
+            <TodoComponent
+              key={todo.id}
+              todo={todo}
+              selectedTodo={selectedTodo}
+              setSelectedTodo={setSelectedTodo}
+              handleEditTodoTitle={handleEditTodoTitle}
+              handleRemoveTodo={handleRemoveTodo}
+              handleUpdateTodoStatus={handleUpdateTodoStatus}
+              TodoTitleFieldRef={TodoTitleFieldRef}
+              handleSelectedTodoChange={handleSelectedTodoChange}
+              editingTodosId={editingTodosId}
+            />
+          }
+        </CSSTransition>
+      ))}
+    </TransitionGroup>
+  );
+}
diff --git a/src/types/Todo.ts b/src/types/Todo.ts
new file mode 100644
index 0000000000..3f52a5fdde
--- /dev/null
+++ b/src/types/Todo.ts
@@ -0,0 +1,6 @@
+export interface Todo {
+  id: number;
+  userId: number;
+  title: string;
+  completed: boolean;
+}
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..df5d0372ca
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const BASE_URL = 'https://mate.academy/students-api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET' | 'POST' | 'PATCH' | 'DELETE';
+
+function request<T>(
+  url: string,
+  method: RequestMethod = 'GET',
+  data: any = null, // we can send any data to the server
+): Promise<T> {
+  const options: RequestInit = { method };
+
+  if (data) {
+    // We add body and Content-Type only for the requests with data
+    options.body = JSON.stringify(data);
+    options.headers = {
+      'Content-Type': 'application/json; charset=UTF-8',
+    };
+  }
+
+  // DON'T change the delay it is required for tests
+  return wait(100)
+    .then(() => fetch(BASE_URL + url, options))
+    .then(response => {
+      if (response.status === 500) {
+        throw new Error('Server error');
+      }
+
+      if (!response.ok) {
+        throw new Error();
+      }
+
+      return response.json();
+    });
+}
+
+export const client = {
+  get: <T>(url: string) => request<T>(url),
+  post: <T>(url: string, data: any) => request<T>(url, 'POST', data),
+  patch: <T>(url: string, data: any) => request<T>(url, 'PATCH', data),
+  delete: (url: string) => request(url, 'DELETE'),
+};