diff --git a/README.md b/README.md
index 58beeac..42a55f1 100644
--- a/README.md
+++ b/README.md
@@ -68,3 +68,15 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
 ### `npm run build` fails to minify
 
 This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+
+
+### Project description
+
+This repository is a basic UI test but includes most of core UI functions,
+ using Tailwindcss [https://tailwindcss.com/] a utility-first CSS framework packed with classes.
+
+### Installed packages
+
+-React-router-dom v6 [https://reactrouter.com/en/v6.3.0/getting-started/installation#basic-installation];
+-Reduxjs/toolkit [https://redux-toolkit.js.org/tutorials/quick-start] for react-redux
+-Use-location-storage [https://github.com/astoilkov/use-local-storage-state]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 50114f0..c95ff81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,13 +8,22 @@
       "name": "test-task",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^1.8.5",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^8.0.4",
+        "react-router-dom": "^6.4.1",
         "react-scripts": "5.0.1",
+        "use-local-storage-state": "^18.1.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "autoprefixer": "^10.4.12",
+        "postcss": "^8.4.16",
+        "tailwindcss": "^3.1.8"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3097,6 +3106,37 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
+      "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
+      "dependencies": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz",
+      "integrity": "sha512-eBV5rvW4dRFOU1eajN7FmYxjAIVz/mRHgUE9En9mBn6m3mulK3WTR5C3iQhL9MZ14rWAq+xOlEaCkDiW0/heOg==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3771,6 +3811,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4165,6 +4214,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "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/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -8505,6 +8559,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14002,6 +14069,49 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz",
+      "integrity": "sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14010,6 +14120,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.1.tgz",
+      "integrity": "sha512-OJASKp5AykDWFewgWUim1vlLr7yfD4vO/h+bSgcP/ix8Md+LMHuAjovA74MQfsfhQJGGN1nHRhwS5qQQbbBt3A==",
+      "dependencies": {
+        "@remix-run/router": "1.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.1.tgz",
+      "integrity": "sha512-MY7NJCrGNVJtGp8ODMOBHu20UaIkmwD2V3YsAOUQoCXFk7Ppdwf55RdcGyrSj+ycSL9Uiwrb3gTLYSnzcRoXww==",
+      "dependencies": {
+        "@remix-run/router": "1.0.1",
+        "react-router": "6.4.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14148,6 +14288,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14290,6 +14446,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -15838,6 +15999,29 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-local-storage-state": {
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-18.1.1.tgz",
+      "integrity": "sha512-09bl6q3mkSlkEt8KeBPCmdPEWEojWYF70Qbz+7wkfQX1feaFITM9m84+h0Jr6Cnf/IvpahkFh7UbX2VNN3ioTQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/astoilkov"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "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",
@@ -18883,6 +19067,22 @@
         "source-map": "^0.7.3"
       }
     },
+    "@reduxjs/toolkit": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.5.tgz",
+      "integrity": "sha512-f4D5EXO7A7Xq35T0zRbWq5kJQyXzzscnHKmjnu2+37B3rwHU6mX9PYlbfXdnxcY6P/7zfmjhgan0Z+yuOfeBmA==",
+      "requires": {
+        "immer": "^9.0.7",
+        "redux": "^4.1.2",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5"
+      }
+    },
+    "@remix-run/router": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.1.tgz",
+      "integrity": "sha512-eBV5rvW4dRFOU1eajN7FmYxjAIVz/mRHgUE9En9mBn6m3mulK3WTR5C3iQhL9MZ14rWAq+xOlEaCkDiW0/heOg=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19364,6 +19564,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -19705,6 +19914,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@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=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -22841,6 +23055,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -26635,11 +26864,48 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-redux": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz",
+      "integrity": "sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.1.tgz",
+      "integrity": "sha512-OJASKp5AykDWFewgWUim1vlLr7yfD4vO/h+bSgcP/ix8Md+LMHuAjovA74MQfsfhQJGGN1nHRhwS5qQQbbBt3A==",
+      "requires": {
+        "@remix-run/router": "1.0.1"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.1.tgz",
+      "integrity": "sha512-MY7NJCrGNVJtGp8ODMOBHu20UaIkmwD2V3YsAOUQoCXFk7Ppdwf55RdcGyrSj+ycSL9Uiwrb3gTLYSnzcRoXww==",
+      "requires": {
+        "@remix-run/router": "1.0.1",
+        "react-router": "6.4.1"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -26748,6 +27014,20 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "redux": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
+      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "redux-thunk": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "requires": {}
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -26859,6 +27139,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "reselect": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.6.tgz",
+      "integrity": "sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -27987,6 +28272,18 @@
         "requires-port": "^1.0.0"
       }
     },
+    "use-local-storage-state": {
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/use-local-storage-state/-/use-local-storage-state-18.1.1.tgz",
+      "integrity": "sha512-09bl6q3mkSlkEt8KeBPCmdPEWEojWYF70Qbz+7wkfQX1feaFITM9m84+h0Jr6Cnf/IvpahkFh7UbX2VNN3ioTQ==",
+      "requires": {}
+    },
+    "use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "requires": {}
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index c9b80ad..3f10aec 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.1",
     "react-scripts": "5.0.1",
+    "use-local-storage-state": "^18.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +38,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.16",
+    "tailwindcss": "^3.1.8"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/index.html b/public/index.html
index aa069f2..b2a0282 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full bg-gray-50">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -24,9 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Chat</title>
   </head>
-  <body>
+  <body class="h-ful">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.js b/src/App.js
index 3784575..614c986 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,10 @@
 import logo from './logo.svg';
 import './App.css';
+import { Route, RouterProvider, Routes } from 'react-router-dom';
+import router from './routes';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+export default function App() {
+  return  <RouterProvider router={router} />
 }
 
-export default App;
+
diff --git a/src/app/store.js b/src/app/store.js
new file mode 100644
index 0000000..06e6f68
--- /dev/null
+++ b/src/app/store.js
@@ -0,0 +1,14 @@
+import { configureStore } from '@reduxjs/toolkit'
+import ChatReducer from '../features/chats/ChatSlice'
+import userReducer from '../features/users/userSlice'
+
+export const store = configureStore({
+  reducer: {
+    user: userReducer,
+    chat: ChatReducer
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
+})
\ No newline at end of file
diff --git a/src/components/chat/Receipts .js b/src/components/chat/Receipts .js
new file mode 100644
index 0000000..e26de68
--- /dev/null
+++ b/src/components/chat/Receipts .js	
@@ -0,0 +1,18 @@
+import React from 'react';
+import firstLetter from '../../utils/utils';
+
+export default function Receipts({message, author}) {
+  return (
+    <>
+    <div className="flex w-full mt-2 space-x-3 max-w-xs">
+        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 px-4 py-2">{firstLetter(author)} </div>
+        <div>
+            <div className="bg-gray-300 p-3 rounded-r-lg rounded-bl-lg">
+                <p className="text-sm">{ message }</p>
+            </div>
+            {/* <span className="text-xs text-gray-500 leading-none">2 min ago</span> */}
+        </div>
+    </div>
+    </>
+  );
+}
diff --git a/src/components/chat/Sent.js b/src/components/chat/Sent.js
new file mode 100644
index 0000000..004df2d
--- /dev/null
+++ b/src/components/chat/Sent.js
@@ -0,0 +1,18 @@
+
+import React from 'react';
+
+ const Sent = ({message}) => {
+  return (
+    <div className="flex w-full mt-2 space-x-3 max-w-xs ml-auto justify-end">
+        <div>
+            <div className="bg-blue-600 text-white p-3 rounded-l-lg rounded-br-lg">
+                <p className="text-sm">{ message } </p>
+            </div>
+            {/* <span className="text-xs text-gray-500 leading-none">2 min ago</span> */}
+        </div>
+        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 p-2">You</div>
+    </div>
+  );
+}
+
+export default Sent;
\ No newline at end of file
diff --git a/src/components/forms/FormInput.js b/src/components/forms/FormInput.js
new file mode 100644
index 0000000..e3d6ad5
--- /dev/null
+++ b/src/components/forms/FormInput.js
@@ -0,0 +1,59 @@
+import React from "react"
+
+function FormInput({
+  className = "",
+  label = "",
+  name = "",
+  id = "",
+  type = "text",
+  placeholder = " ",
+  error = false,
+  errorText = "",
+  value = "",
+  description = "",
+  horizontal = false,
+  onChange = () => {},
+  ...newProps
+}) {
+  const hasError = error 
+  const finalClass = `${className}  relative block w-full appearance-none rounded-lg border border-gray-300 px-3 py-3 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm ${
+    hasError && 'border-red-600 mb-1'
+  }`
+
+  const labelClassName = `absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1 ${
+    hasError && 'text-red-600'
+  }`;
+
+  return (
+    <>
+      <div>
+        {label && 
+        <label htmlFor={id} className={labelClassName} > { label } </label>
+        }
+        <input
+            id={id}
+            type={type}
+            name={name}
+            className={finalClass}
+            placeholder={placeholder}
+            value={value}
+            onChange={e => onChange(e)}
+            {...newProps}
+        />
+      </div>
+      {description && (
+        <p id="floating_helper_text" className="mt-2 text-xs text-gray-500">
+          {description} 
+        </p>
+      )}
+
+      {error && (
+        <p id="filled_error_help" className="mt-2 text-xs text-red-600">
+            {errorText}
+        </p>
+      )}
+    </>
+  )
+}
+
+export default FormInput
diff --git a/src/components/forms/FormTextarea.js b/src/components/forms/FormTextarea.js
new file mode 100644
index 0000000..7ee31dc
--- /dev/null
+++ b/src/components/forms/FormTextarea.js
@@ -0,0 +1,45 @@
+import React from "react"
+
+function FormTextarea({
+  className = "",
+  label = "",
+  name = "",
+  id = "",
+  placeholder = "",
+  error = false,
+  errorText = "",
+  value = "",
+  rows="1",
+  onChange = () => {},
+  ...newProps
+}) {
+  const hasError = error 
+  const finalClass = `${className} block mx-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm   ${
+    hasError && 'border-red-600'
+  }`
+
+  const labelClassName = `absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1 ${
+    hasError && 'text-red-600'
+  }`;
+
+  return (
+    <>
+      
+        {label && (
+            <label htmlFor={id} className={labelClassName} > { label } </label>
+        )}
+        <textarea 
+            id={id} 
+            rows={rows}
+            name={name}
+            className={finalClass}
+            placeholder={placeholder}
+            value={value}
+            onChange={e => onChange(e)}
+            {...newProps}
+        />
+    </>
+  )
+}
+
+export default FormTextarea
diff --git a/src/features/chats/ChatSlice.js b/src/features/chats/ChatSlice.js
new file mode 100644
index 0000000..399f900
--- /dev/null
+++ b/src/features/chats/ChatSlice.js
@@ -0,0 +1,64 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    chats: [],
+    newChat: '',
+    error: false,
+    isWaiting: ''
+}
+
+const chatSlice = createSlice({
+    name: "chat",
+    initialState,
+    reducers: {
+        startWaiting: (state) => {
+        state.isWaiting = true;
+        },
+        hasError: (state, action) => {
+        state.error = action.payload;
+        state.isWaiting = false;
+        },
+
+        createChatSuccess: (state, action) => {
+            state.newChat = action.payload;
+        },
+        getChatsSuccess: (state, action) => {
+        state.chats = action.payload;
+        state.isWaiting = false;
+        },  
+    }
+})
+
+export const { 
+    startWaiting, 
+    hasError, 
+    createChatSuccess, 
+    getChatsSuccess
+} = chatSlice.actions;
+
+
+export const fetchChats = () => async (dispatch) => {
+    dispatch(startWaiting);
+    try {
+       let messages = localStorage.getItem('messages');
+       let messageJson = JSON.parse(messages);
+       dispatch(getChatsSuccess(messageJson))
+
+    } catch (error) {
+        dispatch(hasError())
+        return console.error(error)
+    }
+};
+
+export const addChat = (data) => async (dispatch) => {
+
+    try {
+        dispatch(createChatSuccess(data));
+    } catch (error) {
+        dispatch(hasError())
+        return console.error(error)
+    }
+};
+
+
+export default chatSlice.reducer;
\ No newline at end of file
diff --git a/src/features/users/userSlice.js b/src/features/users/userSlice.js
new file mode 100644
index 0000000..7878116
--- /dev/null
+++ b/src/features/users/userSlice.js
@@ -0,0 +1,44 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    newUser: '',
+    authUser: '',
+    error: false,
+}
+
+
+const userSlice = createSlice({
+    name: "user",
+    initialState,
+    reducers: {
+        hasError: (state) =>{
+            state.error = true;
+        },
+
+        login: (state, action) => {
+            state.newUser = action.payload
+        },
+
+        getUserSuccess: (state, action) => {
+            state.authUser = action.payload;
+        },
+
+    
+    }
+})
+
+export const {login, getUserSuccess, hasError} = userSlice.actions;
+
+
+export const getAuthUser = () => async (dispatch) => {
+   
+    try {
+      const user = sessionStorage.getItem("username");
+      dispatch(getUserSuccess(user));
+    } catch (error) {
+      dispatch(hasError(error.message));
+      return console.error(error);
+    }
+};
+
+export default userSlice.reducer;
\ No newline at end of file
diff --git a/src/icons/SendIcon.js b/src/icons/SendIcon.js
new file mode 100644
index 0000000..91cf449
--- /dev/null
+++ b/src/icons/SendIcon.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function SendIcon() {
+  return (
+        <svg 
+            className="w-6 h-6 rotate-90" 
+            fill="currentColor" 
+            viewBox="0 0 20 20" 
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z"> 
+            </path>
+        </svg>
+  );
+}
diff --git a/src/index.css b/src/index.css
index ec2585e..bd6213e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..b5c0acd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,12 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { store } from './app/store'
+import { Provider } from 'react-redux'
 import reportWebVitals from './reportWebVitals';
+import { BrowserRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+     <Provider store={store}>
+        <App />
+     </Provider>
   </React.StrictMode>
 );
 
diff --git a/src/layouts/DefaultLayout.js b/src/layouts/DefaultLayout.js
new file mode 100644
index 0000000..8e4cdfe
--- /dev/null
+++ b/src/layouts/DefaultLayout.js
@@ -0,0 +1,12 @@
+import {  Outlet } from "react-router-dom";
+import Navbar from "./Navbar";
+// import Navbar from "./navbar/Navbar";
+const DefaultLayout = () => {
+    return (
+        <div className="container"> 
+            <Outlet />
+        </div>
+    )
+}
+
+export default DefaultLayout;
\ No newline at end of file
diff --git a/src/layouts/Navbar.js b/src/layouts/Navbar.js
new file mode 100644
index 0000000..fd0928f
--- /dev/null
+++ b/src/layouts/Navbar.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function Navbar({ authUser }) {
+
+   
+  return (
+    <div className="flex justify-between md:justify-center items-center fixed inset-x-0 top-0 py-2 px-3 bg-gray-100">
+        <div className="text-xl"> Chat</div>
+        <div className="mx-12">  { authUser }</div>
+  </div>
+  );
+}
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..aff2191
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,24 @@
+// import Login from './auth/Login';
+import { createBrowserRouter } from 'react-router-dom';
+import DefaultLayout from './layouts/DefaultLayout'
+import ChatRoom from './views/ChatRoom';
+import Signin from './views/Signin';
+
+
+const router = createBrowserRouter([
+   {
+      path: '/',
+      element: <Signin />
+   },
+   {
+     path: "/",
+     element: <DefaultLayout />,
+     children: [
+       {
+         path: "/chat-room/:username",
+         element: <ChatRoom />,
+       },
+     ],
+   },
+ ]);
+export default router;
\ No newline at end of file
diff --git a/src/utils/utils.js b/src/utils/utils.js
new file mode 100644
index 0000000..8255887
--- /dev/null
+++ b/src/utils/utils.js
@@ -0,0 +1,5 @@
+const  firstLetter = (string) => {
+    return string.charAt(0).toUpperCase();
+};
+
+export default firstLetter
\ No newline at end of file
diff --git a/src/views/ChatRoom.js b/src/views/ChatRoom.js
new file mode 100644
index 0000000..7b4f624
--- /dev/null
+++ b/src/views/ChatRoom.js
@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from 'react';
+import { connect, useDispatch, useSelector } from 'react-redux';
+import useLocalStorageState from 'use-local-storage-state';
+import Receipts from '../components/chat/Receipts ';
+import Sent from '../components/chat/Sent';
+import FormTextarea from '../components/forms/FormTextarea';
+import { addChat, fetchChats } from '../features/chats/ChatSlice';
+import { getAuthUser } from '../features/users/userSlice';
+import SendIcon from '../icons/SendIcon';
+import Navbar from '../layouts/Navbar';
+
+import css from './ChatRoom.module.css'
+
+ const ChatRoom = () => {
+
+  
+   const [chats, setChats] = useLocalStorageState("messages", []);
+   const [chat, setChat] = useState('')
+   const [show, setShow] = useState(false)
+   const dispatch = useDispatch();
+   const authUser = useSelector((state) =>  state.user.authUser)
+   dispatch(getAuthUser())
+  // const messages = useSelector((state) =>  state.chat.chats)
+  
+  useEffect(() => {
+    if (!chats) {
+      setChats([])
+    }
+    
+  }, [])
+  
+  
+  const handleChange = (e) => {
+    setChat(e.target.value)
+    if (e.target.value) {
+      setShow(true)
+    }
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+     
+    const data = {
+      message: chat,
+      author: authUser
+    };
+   
+      setChats([...chats, data])
+      dispatch(addChat(chats))
+      setChat('')
+      setShow(false)
+    // dispatch(fetchChats())
+
+  }
+
+
+// console.log(messages)
+  return (
+    <>
+      
+      <section className={css.sectionChat}>
+          <Navbar authUser={authUser} />
+          <div className="bg-white w-full md:w-3/5 px-2 md:px-4 py-4 mt-8 mb-14">
+            {chats.map((chat, idx) => (
+              <dd key={idx}>
+                  {authUser == chat.author ? 
+
+                    <Sent  message={chat.message} />
+                    :
+                    <Receipts 
+                      message={chat.message} 
+                      author={chat.author}  
+                    />
+
+                  }
+              </dd>
+            ))}
+           
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="flex md:justify-center fixed inset-x-0 bottom-0 bg-gray-100 ">
+              <div className="flex w-full px-2 md:w-3/5 py-2 ">
+                  <FormTextarea 
+                    id="chat"
+                    name="chat"
+                    value={chat}
+                    placeholder="Type your message"
+                    onChange={(handleChange)}
+                  />
+                  <button type="submit" disabled={show ? false: true}  className={css.btnChat}>
+                    <span className="hidden md:block px-6">Send</span> 
+                    <span className="lg:hidden px-2"> <SendIcon /></span>
+                  </button>
+              </div>
+            </div>
+          </form>
+      </section>
+    </>
+  );
+}
+
+
+export default ChatRoom;
\ No newline at end of file
diff --git a/src/views/ChatRoom.module.css b/src/views/ChatRoom.module.css
new file mode 100644
index 0000000..ed66cf5
--- /dev/null
+++ b/src/views/ChatRoom.module.css
@@ -0,0 +1,8 @@
+
+.sectionChat {
+    @apply container w-screen flex md:justify-center overflow-hidden bg-gray-100;
+}
+
+.btnChat {
+    @apply inline-flex justify-center p-2 disabled:opacity-50 bg-blue-600 text-white rounded-full cursor-pointer;
+}
\ No newline at end of file
diff --git a/src/views/Signin.js b/src/views/Signin.js
new file mode 100644
index 0000000..86245c7
--- /dev/null
+++ b/src/views/Signin.js
@@ -0,0 +1,94 @@
+
+// import { LockClosedIcon } from '@heroicons/react/20/solid'
+
+import { useState } from "react";
+import { useDispatch } from "react-redux";
+import { login } from "../features/users/userSlice";
+import {  useNavigate } from "react-router-dom";
+import FormInput from "../components/forms/FormInput";
+
+
+export default function Signin() {
+
+  const [name, setName] = useState()
+  const [error, setError] = useState(false)
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+
+
+  const handleChange = (e) => {
+    setName(e.target.value)
+    if (e.target.value) {
+      setError(false)
+    }
+  }
+
+
+  const validateForm = () => {
+    let isValidForm = true;
+   
+    if(!name) {
+        isValidForm = false;
+        setError(true)
+
+        setTimeout(() => {
+          setError(true)
+        }, 5000);
+    }
+
+    return isValidForm;
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if(validateForm()){
+        const usernameParams = name.split(' ').join('-');
+        sessionStorage.setItem('username', name)
+        dispatch(login(name))
+        navigate(`/chat-room/${usernameParams}`)
+    }
+  }
+
+
+  return (
+    <>
+      <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div>
+            <img
+              className="mx-auto h-12 w-auto"
+              src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
+              alt="Your Company"
+            />
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+              Sign in to chat
+            </h2>
+            
+          </div>
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+            <div className="-space-y-px">
+              <FormInput
+                placeholder="Enter your Name"
+                id="username"
+                name="name"
+                onChange={handleChange}
+                value={name}
+                error={error}
+                errorText="This field is required"
+              />
+            </div>
+            <div>
+              <button
+                type="submit"
+                className="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..5de1527
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    // require('@tailwindcss/forms'),
+  ],
+}
\ No newline at end of file